add highlight to button.

examples/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@sakura-ui/config": "^0.1.4",
-    "@sakura-ui/core": "^0.1.11",
+    "@sakura-ui/core": "^0.1.12",
     "@sakura-ui/forms": "^0.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/src/App.tsx

@@ -15,8 +15,9 @@ import {
   Card,
   CardHeader,
   CardBody,
-  CardFooter //from '@sakura-ui/core'
-} from '../../packages/core/src'
+  CardFooter
+} from '@sakura-ui/core'
+//from '../../packages/core/src'
 import {
   Checkbox,
   CheckboxGroup,
@@ -26,8 +27,9 @@ import {
   Input,
   Textarea,
   FieldsetControl,
-  LabelControl //from '@sakura-ui/forms'
-} from '../../packages/forms/src'
+  LabelControl
+} from '@sakura-ui/forms'
+//from '../../packages/forms/src'
 
 const App = () => {
   const [count, setCount] = useState<number>(0)
@@ -335,7 +337,7 @@ const App = () => {
             <Textarea rows={4} />
           </LabelControl>
           <LabelControl labelText="Textarea with maxLength">
-            <Textarea rows={4} maxLength="50" />
+            <Textarea rows={4} maxLength={50} />
           </LabelControl>
         </div>
         <div className="flex space-x-4">

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",

packages/core/src/components/Button.tsx

@@ -26,8 +26,8 @@ export const Button: React.ElementType<ButtonProps> = React.forwardRef<
     border
     border-solid
     border-sea-800
-    active:enabled:border-sea-800-darken
-    hover:enabled:border-sea-800-darken
+    active:enabled:border-sea-800/[.8]
+    hover:enabled:border-sea-800/[.85]
     focus:outline
     focus:outline-2
     focus:outline-wood-600
@@ -38,18 +38,18 @@ export const Button: React.ElementType<ButtonProps> = React.forwardRef<
   const primary = `
     text-white-1000
     bg-sea-800
-    active:enabled:bg-sea-800-darken
-    hover:enabled:bg-sea-800-darken
+    active:enabled:bg-sea-800/[.8]
+    hover:enabled:bg-sea-800/[.85]
     disabled:bg-sumi-500
     disabled:text-white-1000
   `
   const secondary = `
     text-sea-800
     bg-transparent
-    active:enabled:bg-sea-50
+    active:enabled:bg-sea-50/[.60]
     hover:enabled:bg-sea-50
-    active:enabled:text-sea-800-darken
-    hover:enabled:text-sea-800-darken
+    active:enabled:text-sea-800/[.85]
+    hover:enabled:text-sea-800/[.85]
     disabled:text-sumi-500
   `
 

packages/core/src/components/IconButton.tsx

@@ -38,8 +38,8 @@ export const IconButton: React.ElementType<IconButtonProps> = React.forwardRef<
     border
     border-solid
     border-sea-800
-    active:enabled:border-sea-800-darken
-    hover:enabled:border-sea-800-darken
+    active:enabled:border-sea-800/[.8]
+    hover:enabled:border-sea-800/[.85]
     focus:outline
     focus:outline-2
     focus:outline-wood-600
@@ -50,18 +50,18 @@ export const IconButton: React.ElementType<IconButtonProps> = React.forwardRef<
   const primary = `
     text-white-1000
     bg-sea-800
-    active:enabled:bg-sea-800-darken
-    hover:enabled:bg-sea-800-darken
+    active:enabled:bg-sea-800/[.8]
+    hover:enabled:bg-sea-800/[.85]
     disabled:bg-sumi-500
     disabled:text-white-1000
   `
   const secondary = `
     text-sea-800
     bg-transparent
-    active:enabled:bg-sea-50
+    active:enabled:bg-sea-50/[.60]
     hover:enabled:bg-sea-50
-    active:enabled:text-sea-800-darken
-    hover:enabled:text-sea-800-darken
+    active:enabled:text-sea-800/[.85]
+    hover:enabled:text-sea-800/[.85]
     disabled:text-sumi-500
   `