refactor(checkbox): appearance/shape structure

ui-parts/checkbox/package.json

@@ -13,11 +13,11 @@
     "postpack": "rm -rf dist"
   },
   "dependencies": {
+    "@atls-ui-parts/theme": "workspace:*",
     "clsx": "2.1.1"
   },
   "devDependencies": {
     "@atls-ui-parts/layout": "workspace:*",
-    "@atls-ui-parts/theme": "workspace:*",
     "@storybook/react": "8.6.12",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
@@ -28,7 +28,6 @@
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",
-    "@vanilla-extract/dynamic": "*",
     "react": "*",
     "react-dom": "*"
   },

ui-parts/checkbox/src/box/styles/appearance.css.ts

@@ -1,7 +1,21 @@
-import { styleVariants } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
-export const boxColorStyles = styleVariants({
-  blue: { border: '1px solid blue' },
-  green: { border: '1px solid green' },
-  red: { border: '1px solid red' },
+import { vars }  from '@atls-ui-parts/theme'
+
+const boxBlueAppearanceStyles = style({
+  border: vars.borders.normalBlue,
+})
+
+const boxGreenAppearanceStyles = style({
+  border: vars.borders.normalGreen,
 })
+
+const boxRedAppearanceStyles = style({
+  border: vars.borders.normalRed,
+})
+
+export const boxAppearanceStyles = {
+  blue: boxBlueAppearanceStyles,
+  green: boxGreenAppearanceStyles,
+  red: boxRedAppearanceStyles,
+}

ui-parts/checkbox/src/box/styles/shape.css.ts

@@ -1,7 +1,27 @@
-import { styleVariants } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
-export const boxShapeStyles = styleVariants({
-  small: { width: 16, height: 16, borderRadius: 4 },
-  medium: { width: 24, height: 24, borderRadius: 4 },
-  large: { width: 32, height: 32, borderRadius: 4 },
+import { vars }  from '@atls-ui-parts/theme'
+
+const boxSmallShapeStyles = style({
+  width: vars.space.g16,
+  height: vars.space.g16,
+  borderRadius: vars.radii.f4,
+})
+
+const boxMediumShapeStyles = style({
+  width: vars.space.g24,
+  height: vars.space.g24,
+  borderRadius: vars.radii.f4,
 })
+
+const boxLargeShapeStyles = style({
+  width: vars.space.g32,
+  height: vars.space.g32,
+  borderRadius: vars.radii.f4,
+})
+
+export const boxShapeStyles = {
+  small: boxSmallShapeStyles,
+  medium: boxMediumShapeStyles,
+  large: boxLargeShapeStyles,
+}

ui-parts/checkbox/src/check/check.css.ts

@@ -1,15 +1,37 @@
 import { style } from '@vanilla-extract/css'
 
+import { vars }  from '@atls-ui-parts/theme'
+
 export const checkBaseStyles = style({
-  width: 'calc(100% - 3px)',
-  height: 'calc(100% - 3px)',
   display: 'none',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'blue',
-  borderRadius: 4,
 })
 
 export const checkCheckedStyles = style({
   display: 'flex',
 })
+
+const checkBlueAppearanceStyles = style({
+  backgroundColor: vars.colors.blue,
+})
+
+const checkGreenAppearanceStyles = style({
+  backgroundColor: vars.colors.green,
+})
+
+const checkRedAppearanceStyles = style({
+  backgroundColor: vars.colors.red,
+})
+
+export const checkAppearanceStyles = {
+  blue: checkBlueAppearanceStyles,
+  green: checkGreenAppearanceStyles,
+  red: checkRedAppearanceStyles,
+}
+
+export const checkShapeStyles = style({
+  width: `calc(100% - ${vars.radii.f3})`,
+  height: `calc(100% - ${vars.radii.f3})`,
+  borderRadius: vars.radii.f4,
+})

ui-parts/checkbox/src/checkbox.component.tsx

@@ -9,25 +9,23 @@ import { useEffect }               from 'react'
 import { useState }                from 'react'
 
 import { boxBaseStyles }           from './box/index.js'
-import { boxShapeStyles }          from './box/index.js'
-import { boxColorStyles }          from './box/index.js'
 import { checkBaseStyles }         from './check/index.js'
 import { checkCheckedStyles }      from './check/index.js'
 import { containerBaseStyles }     from './container/index.js'
 import { containerPositionStyles } from './container/index.js'
 import { hiddenInputStyles }       from './hidden-input/index.js'
-import { labelAppearanceStyles }   from './label/index.js'
 import { labelPositionStyles }     from './label/index.js'
-import { labelShapeStyles }        from './label/index.js'
+import { checkboxAppearances }     from './styles/index.js'
+import { checkboxShapes }          from './styles/index.js'
 
 export const Checkbox = ({
   onCheck,
   children,
   active,
   defaultActive = false,
   labelPosition = 'end',
-  size = 'medium',
-  color = 'blue',
+  appearance = checkboxAppearances.blue,
+  shape = checkboxShapes.medium,
   icon,
   checkedIcon = icon,
   className,
@@ -101,19 +99,27 @@ export const Checkbox = ({
       <div
         className={clsx(
           boxBaseStyles,
-          boxShapeStyles[size],
-          boxColorStyles[color],
+          shape.box,
+          appearance.box,
           classNames?.box
         )}
       >
-        <div className={clsx(checkBaseStyles, checked && checkCheckedStyles, classNames?.check)}>
+        <div
+          className={clsx(
+            checkBaseStyles,
+            shape.check,
+            appearance.check,
+            checked && checkCheckedStyles,
+            classNames?.check
+          )}
+        >
           {checkedIcon}
         </div>
       </div>
       <div
         className={clsx(
-          labelShapeStyles,
-          labelAppearanceStyles,
+          shape.label,
+          appearance.label,
           labelPositionStyles[labelPosition],
           classNames?.label
         )}

ui-parts/checkbox/src/checkbox.interfaces.ts

@@ -10,15 +10,31 @@ export interface CheckboxClassNames {
   label?: string
 }
 
+export type CheckboxAppearanceName = 'blue' | 'green' | 'red'
+
+export interface CheckboxAppearance {
+  box: string
+  check: string
+  label: string
+}
+
+export type CheckboxShapeName = 'large' | 'medium' | 'small'
+
+export interface CheckboxShape {
+  box: string
+  check: string
+  label: string
+}
+
 export interface CheckboxProps extends HTMLAttributes<HTMLDivElement> {
   active?: boolean
+  appearance?: CheckboxAppearance
   checkedIcon?: ReactNode
   classNames?: CheckboxClassNames
   defaultActive?: boolean
   onCheck?: (checked: boolean) => void
   labelPosition?: 'bottom' | 'end' | 'start' | 'top'
-  size?: 'large' | 'medium' | 'small'
-  color?: 'blue' | 'green' | 'red'
+  shape?: CheckboxShape
   icon?: ReactNode
   ref?: Ref<HTMLDivElement>
 }

ui-parts/checkbox/src/index.ts

@@ -5,3 +5,5 @@ export type * from './checkbox.interfaces.js'
 export * from './container/index.js'
 export * from './hidden-input/index.js'
 export * from './label/index.js'
+export { checkboxAppearances } from './styles/index.js'
+export { checkboxShapes } from './styles/index.js'

ui-parts/checkbox/src/styles/appearance.css.ts

@@ -0,0 +1,24 @@
+import type { CheckboxAppearance }     from '../checkbox.interfaces.js'
+import type { CheckboxAppearanceName } from '../checkbox.interfaces.js'
+
+import { boxAppearanceStyles }         from '../box/index.js'
+import { checkAppearanceStyles }       from '../check/index.js'
+import { labelAppearanceStyles }       from '../label/index.js'
+
+export const checkboxAppearances: Record<CheckboxAppearanceName, CheckboxAppearance> = {
+  blue: {
+    box: boxAppearanceStyles.blue,
+    check: checkAppearanceStyles.blue,
+    label: labelAppearanceStyles,
+  },
+  green: {
+    box: boxAppearanceStyles.green,
+    check: checkAppearanceStyles.green,
+    label: labelAppearanceStyles,
+  },
+  red: {
+    box: boxAppearanceStyles.red,
+    check: checkAppearanceStyles.red,
+    label: labelAppearanceStyles,
+  },
+}

ui-parts/checkbox/src/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './appearance.css.js'
+export * from './shape.css.js'

ui-parts/checkbox/src/styles/shape.css.ts

@@ -0,0 +1,24 @@
+import type { CheckboxShape }     from '../checkbox.interfaces.js'
+import type { CheckboxShapeName } from '../checkbox.interfaces.js'
+
+import { boxShapeStyles }         from '../box/index.js'
+import { checkShapeStyles }       from '../check/index.js'
+import { labelShapeStyles }       from '../label/index.js'
+
+export const checkboxShapes: Record<CheckboxShapeName, CheckboxShape> = {
+  large: {
+    box: boxShapeStyles.large,
+    check: checkShapeStyles,
+    label: labelShapeStyles,
+  },
+  medium: {
+    box: boxShapeStyles.medium,
+    check: checkShapeStyles,
+    label: labelShapeStyles,
+  },
+  small: {
+    box: boxShapeStyles.small,
+    check: checkShapeStyles,
+    label: labelShapeStyles,
+  },
+}

ui-parts/checkbox/stories/checkbox.stories.tsx

@@ -7,6 +7,8 @@ import { Column }             from '@atls-ui-parts/layout'
 import { Layout }             from '@atls-ui-parts/layout'
 
 import { Checkbox }           from '../src/checkbox.component.js'
+import { checkboxAppearances } from '../src/index.js'
+import { checkboxShapes }      from '../src/index.js'
 
 import { customBoxStyles }       from './styles.css.js'
 import { customCheckStyles }     from './styles.css.js'
@@ -29,17 +31,19 @@ const meta: Meta<CheckboxProps> = {
       description: 'Is the checkbox checked',
       control: { type: 'boolean' },
     },
-    color: {
-      name: 'Color',
+    appearance: {
+      name: 'Appearance',
       description: 'Color of the divider',
       control: { type: 'select' },
-      options: ['red', 'blue', 'green'],
+      options: Object.keys(checkboxAppearances),
+      mapping: checkboxAppearances,
     },
-    size: {
-      name: 'Size',
+    shape: {
+      name: 'Shape',
       description: 'Size of the divider',
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: Object.keys(checkboxShapes),
+      mapping: checkboxShapes,
     },
     labelPosition: {
       name: 'Label position',
@@ -60,8 +64,8 @@ export const Base: Story = {
     onCheck: () => undefined,
     active: false,
     labelPosition: 'start',
-    size: 'medium',
-    color: 'blue',
+    appearance: checkboxAppearances.blue,
+    shape: checkboxShapes.medium,
     children: 'Checkbox Label',
   },
 }
@@ -71,8 +75,8 @@ export const Custom: Story = {
   args: {
     defaultActive: true,
     labelPosition: 'end',
-    size: 'medium',
-    color: 'blue',
+    appearance: checkboxAppearances.blue,
+    shape: checkboxShapes.medium,
     checkedIcon: '✓',
     classNames: {
       box: customBoxStyles,

ui-parts/theme/src/theme/borders.ts

@@ -8,6 +8,8 @@ export const borders = {
   normalSilver: '1px solid rgba(224, 224, 224, 1)',
   normalCloudyWhite: '1px solid rgba(228, 228, 228, 1)',
   normalBlue: '1px solid rgba(65, 109, 223, 1)',
+  normalGreen: '1px solid rgba(52, 197, 29, 1)',
+  normalRed: '1px solid rgba(255, 47, 47, 1)',
   normalLightGray: '1px solid rgba(184, 184, 184, 1)',
   normalLightBlue: '1px solid rgba(232, 237, 251, 1)',
   normalSoftBlue: '1px solid rgba(18, 112, 252, 1)',

ui-parts/theme/src/theme/space.ts

@@ -7,7 +7,9 @@ export const space = {
   g10: '10px',
   g12: '12px',
   g14: '14px',
+  g16: '16px',
   g17: '17px',
   g22: '22px',
   g24: '24px',
+  g32: '32px',
 }

yarn.lock

@@ -497,7 +497,6 @@ __metadata:
     storybook: "npm:8.6.12"
   peerDependencies:
     "@vanilla-extract/css": "*"
-    "@vanilla-extract/dynamic": "*"
     react: "*"
     react-dom: "*"
   languageName: unknown