Merge pull request #10 from glassonion1/feature/adjust_color

adjust component color and style

examples/package.json

@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/core": "^0.2.0",
-    "@sakura-ui/forms": "^0.2.0",
+    "@sakura-ui/core": "^0.2.2",
+    "@sakura-ui/forms": "^0.2.1",
     "@sakura-ui/tailwind-theme-plugin": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/src/pages/Forms.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { H1, Button } from '@sakura-ui/core'
-//from '../../../packages/core/src'
 import {
   CheckboxGroup,
   Radio,
@@ -10,7 +9,6 @@ import {
   FieldsetControl,
   LabelControl
 } from '@sakura-ui/forms'
-//from '../../../packages/forms/src'
 
 const Forms = () => {
   return (

examples/src/pages/Home.tsx

@@ -26,7 +26,6 @@ import {
   Th,
   Td
 } from '@sakura-ui/core'
-//from '../../../packages/core/src'
 import {
   Checkbox,
   CheckboxGroup,
@@ -39,7 +38,6 @@ import {
   FieldsetControl,
   LabelControl
 } from '@sakura-ui/forms'
-//from '../../../packages/forms/src'
 
 const Home = () => {
   const [count, setCount] = useState<number>(0)
@@ -118,6 +116,16 @@ const Home = () => {
             XXXXXxxxxxxxxxxxxxXXX
           </CardBody>
         </Card>
+        <Card className="flex justify-between items-center">
+          <span>
+            <CardHeader>xxxXXX</CardHeader>
+            <CardBody>xxxxxxxxXXX</CardBody>
+          </span>
+          <Icon
+            className="text-base-sm !font-medium mr-6"
+            icon="arrow_forward"
+          />
+        </Card>
         <Card>
           <CardImg src="bg-mt.webp" className="h-48 w-full" />
           <CardHeader>Header: XXXxxx</CardHeader>
@@ -151,8 +159,8 @@ const Home = () => {
           </CardFooter>
         </Card>
       </div>
-      <div className="my-4 flex items-stretch gap-x-20">
-        <Card className="w-80">
+      <div className="my-4 grid grid-cols-3 gap-4">
+        <Card className="">
           <CardImg src="bg-mt.webp" className="h-48 w-full" />
           <CardHeader>Header:XXXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</CardHeader>
           <CardBody>
@@ -170,7 +178,7 @@ const Home = () => {
             </Button>
           </CardFooter>
         </Card>
-        <Card className="w-80">
+        <Card className="">
           <CardImg src="bg-mt.webp" className="h-48 w-full" />
           <CardHeader>Header: XXXxxx</CardHeader>
           <CardBody>Body: XXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxx</CardBody>
@@ -180,6 +188,11 @@ const Home = () => {
             </Button>
           </CardFooter>
         </Card>
+        <Card className="">
+          <CardImg src="bg-mt.webp" className="h-48 w-full" />
+          <CardHeader>Header: XXXxxx</CardHeader>
+          <CardBody>Body: XXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxx</CardBody>
+        </Card>
       </div>
       <div>
         <H2>List</H2>
@@ -798,6 +811,17 @@ const Home = () => {
             <FileInput />
           </LabelControl>
         </div>
+        <div className="flex space-x-4">
+          <LabelControl labelText="File input" helperText="size=lg">
+            <FileInput />
+          </LabelControl>
+          <LabelControl labelText="File input" helperText="size=md">
+            <FileInput size="md" />
+          </LabelControl>
+          <LabelControl labelText="File input" helperText="size=sm">
+            <FileInput size="sm" />
+          </LabelControl>
+        </div>
         <div className="flex space-x-4">
           <LabelControl labelText="Textarea">
             <Textarea rows={4} />

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "",
   "keywords": [],
   "author": "glassonion1",

packages/core/src/components/Card.tsx

@@ -18,13 +18,11 @@ export const Card = (props: CardProps) => {
   const style = `
     border
     border-solid
-    border-sumi-300
+    border-sumi-500
     rounded-2xl
     sm:rounded-3xl
     text-sumi-900
     overflow-hidden
-    flex flex-col
-    gap-2
   `
 
   return (
@@ -65,8 +63,10 @@ export const CardHeader = (props: CardHeaderProps) => {
 
   const style = `
     text-base
+    leading-[2rem]
     font-medium
     first:pt-4
+    pt-2
     last:pb-4
     px-6
   `
@@ -87,7 +87,9 @@ export const CardBody = (props: CardBodyProps) => {
 
   const style = `
     text-base-sm
+    leading-[1.85rem]
     first:pt-4
+    pt-2
     last:pb-4
     px-6
   `
@@ -107,7 +109,9 @@ export const CardFooter = (props: CardFooterProps) => {
 
   const style = `
     text-base-sm
+    leading-[1.85rem]
     first:pt-4
+    pt-2
     last:pb-4
     px-6
   `

packages/core/src/components/Link.tsx

@@ -17,17 +17,16 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
 
     const styleUnderLine = `
       underline
-      underline-offset-[0.125em]
+      underline-offset-[0.1875rem]
+      hover:decoration-4
     `
 
     // Make lines break at each word
     const style = `
-      rounded-sm
       cursor-pointer
-      text-sea-600
-      hover:text-sea-800
-      active:text-sea-800
-      visited:text-sea-900
+      text-blue-1000
+      active:text-orange-700
+      visited:text-magenta-900
       focus:outline
       focus:outline-2
       focus:outline-wood-500
@@ -36,26 +35,24 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
     `
 
     const styleIcon = `
+      inline
       align-middle
-      ml-0.5
-      text-sumi-700
       font-icon
       font-light
-      leading-4
       antialiased
     `
 
     if (href?.startsWith('http')) {
       return (
         <Component
-          className={cx(style, className)}
+          className={cx(style, styleUnderLine, className)}
           href={href}
           target="_blank"
           rel="noopener noreferrer"
           {...restProps}
           ref={ref}
         >
-          <span className={styleUnderLine}>{children}</span>
+          <span>{children}</span>&nbsp;
           <span className={cx(styleIcon)} aria-hidden="true">
             open_in_new
           </span>

packages/core/src/components/buttonStyle.ts

@@ -12,9 +12,9 @@ export const base = `
   outline-offset-2
   border
   border-solid
-  border-sea-800
-  active:border-sea-1200
-  hover:border-sea-900
+  border-blue-900
+  hover:border-blue-1000
+  active:border-blue-1200
   focus:outline
   focus:outline-2
   focus:outline-wood-600
@@ -24,34 +24,34 @@ export const base = `
 
 const primary = `
   text-white
-  bg-sea-800
-  active:bg-sea-1200
-  hover:bg-sea-900
+  bg-blue-900
+  hover:bg-blue-1000
+  active:bg-blue-1200
   disabled:bg-sumi-500
   disabled:text-white
 `
 
 const secondary = `
-  text-sea-800
+  text-blue-900
+  hover:text-blue-1000
+  active:text-blue-1200
   bg-transparent
-  active:bg-sea-200
-  hover:bg-sea-100
-  active:text-sea-1200
-  hover:text-sea-900
+  hover:bg-blue-200
+  active:bg-blue-300
   disabled:text-sumi-500
   disabled:bg-transparent
 `
 
 const tertiary = `
   bg-transparent
   text-blue-900
+  hover:text-blue-1000
+  active:text-blue-1200
   underline
   hover:bg-blue-200
-  hover:text-blue-1000
   active:bg-blue-300
-  active:text-blue-1200
   disabled:bg-transparent
-  disabled:text-solid-grey-420
+  disabled:text-sumi-500
 `
 
 const styles: { [key in ButtonVariant]: string } = {

packages/forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/forms",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "keywords": [],
   "author": "glassonion1",

packages/forms/src/components/FileInput.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
+import { InputSize } from './inputStyle'
 
-export interface FileInputProps extends React.ComponentPropsWithRef<'input'> {}
+export interface FileInputProps
+  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+  size?: InputSize
+}
 
 export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
   (props, ref) => {
-    const { id, className, ...restProps } = props
+    const { id, className, size = 'lg', ...restProps } = props
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
       restProps.required = true
@@ -23,29 +27,24 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       file:whitespace-nowrap
       file:border
       file:border-solid
-      file:border-sea-800
-      file:active:border-sea-1200
-      file:hover:border-sea-900
+      file:border-blue-900
+      file:hover:border-blue-1000
+      file:active:border-blue-1200
       file:disabled:border-sumi-500
       file:disabled:cursor-not-allowed
     `
 
     const secondary = `
-      file:text-sea-800
-      file:bg-transparent
-      file:active:bg-sea-200
-      file:hover:bg-sea-100
+      file:text-sea-900
+      file:hover:text-sea-1000
       file:active:text-sea-1200
-      file:hover:text-sea-900
+      file:bg-transparent
+      file:hover:bg-sea-200
+      file:active:bg-sea-300
       file:disabled:text-sumi-500
       file:disabled:bg-transparent
     `
-    const styleLg = `
-      file:p-4
-      file:text-button
-      file:rounded-lg
-      file:leading-snug
-    `
+
     const styleInput = `
       text-label
       text-sumi-900
@@ -57,11 +56,37 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       aria-invalid:text-sun-800
     `
 
+    const sizeStyles: { [key in InputSize]: string } = {
+      // 16(p-4) * 2 + 22(text-button * leading-snug) + boader * 2 = 56px
+      lg: `
+        file:p-4
+        file:text-button
+        file:rounded-lg
+        file:leading-snug
+      `,
+      // 12(py-3) * 2 + 22(text-button * leading-snug) + boader * 2 = 48px
+      md: `
+        file:px-4
+        file:py-3
+        file:text-button
+        file:rounded-lg
+        file:leading-snug
+      `,
+      // 8(py-2) * 2 + 22(text-button * leading-snug) + boader * 2 = 40px
+      sm: `
+        file:px-3
+        file:py-2
+        file:text-button
+        file:rounded-md
+        file:leading-snug
+      `
+    }
+
     return (
       <input
         type="file"
         id={id || ctx.id}
-        className={cx(base, secondary, styleLg, styleInput, className)}
+        className={cx(base, secondary, sizeStyles[size], styleInput, className)}
         aria-describedby={ctx.helperTextId}
         aria-errormessage={ctx.errorMessageId}
         aria-invalid={ctx.isInvalid ?? false}