feat(checkbox): update checkbox to match facelift designs EDX-486

src/primitives/checkbox/styles.ts

@@ -50,24 +50,37 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
 
         & > path {
           vector-effect: non-scaling-stroke;
-          stroke-width: 2 !important;
+          stroke-width: 1.2 !important;
         }
       }
     }
 
-    &:not(:disabled):focus + span {
+    &:not(:checked)&:not(:disabled):focus + span {
       box-shadow: ${focusRingStyle({
         border: {width: input.border.width, color: color.default.enabled.border},
         focusRing,
       })};
     }
 
-    &:not(:disabled):focus:not(:focus-visible) + span {
+    &:not(:checked)&:not(:disabled):focus:not(:focus-visible) + span {
       box-shadow: ${focusRingBorderStyle({
         color: color.default.enabled.border,
         width: input.border.width,
       })};
     }
+    &:checked + span {
+      background: ${color.default.enabled.bg2};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.default.enabled.bg2,
+        width: input.border.width,
+      })};
+      color: ${color.default.enabled.bg};
+    }
+    &:checked&:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
+        focusRing: {width: 1, offset: 1},
+      })};
+    }
 
     &:checked + span > svg:first-child {
       opacity: 1;
@@ -81,6 +94,9 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       })};
       color: ${color.default.readOnly.fg};
     }
+    &:checked&[data-read-only]:disabled + span {
+      background-color: ${color.default.readOnly.bg2};
+    }
 
     &:not([data-read-only]):disabled + span {
       background-color: ${color.default.disabled.bg};
@@ -90,6 +106,9 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       })};
       color: ${color.default.disabled.fg};
     }
+    &:checked&:not([data-read-only]):disabled + span {
+      background-color: ${color.default.disabled.bg2};
+    }
 
     &:indeterminate + span > svg:last-child {
       opacity: 1;

src/theme/lib/theme/color/defaults.ts

@@ -327,6 +327,7 @@ export const defaultOpts: ThemeColorBuilderOpts = {
   input: () => {
     return {
       bg: black,
+      bg2: black,
       fg: black,
       border: black,
       placeholder: black,

src/theme/lib/theme/color/input/types.ts

@@ -3,6 +3,7 @@
  */
 export interface ThemeColorInputState {
   bg: string
+  bg2: string
   fg: string
   border: string
   placeholder: string

src/theme/studioTheme/color.ts

@@ -24,9 +24,9 @@ export const color = createColorTheme({
 
       return {
         fg: dark ? white.hex : black.hex,
-        bg: dark ? black.hex : white.hex,
-        border: tints[dark ? 800 : 200].hex,
-        focusRing: hues.blue[dark ? 500 : 500].hex,
+        bg: getColor(tones['default'], dark, 'default', 'bg_base'),
+        border: getColor(tones['default'], dark, 'default', 'border_base'),
+        focusRing: getColor(tones['positive'], dark, 'positive', 'border_accent'),
         shadow: {
           outline: rgba(tints[500].hex, 0.4),
           umbra: dark ? rgba(tints[950].hex, 0.4) : rgba(tints[500].hex, 0.2),
@@ -69,7 +69,7 @@ export const color = createColorTheme({
       fg: tints[dark ? 100 : 900].hex,
       bg: getColor(tints, dark, name, 'bg_base'),
       border: getColor(tints, dark, name, 'border_base'),
-      focusRing: tints[500].hex,
+      focusRing: getColor(tints, dark, name, 'border_accent'),
       shadow: {
         outline: rgba(tints[500].hex, 0.4),
         umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
@@ -519,6 +519,7 @@ export const color = createColorTheme({
 
       return {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+        bg2: getColor(tints, dark, 'critical', 'text_secondary'),
         fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         border: mix(base.bg, tints[dark ? 800 : 200].hex),
         placeholder: mix(base.bg, tints[dark ? 600 : 400].hex),
@@ -528,6 +529,7 @@ export const color = createColorTheme({
     if (state === 'hovered') {
       return {
         bg: base.bg,
+        bg2: getColor(tones.default, dark, 'default', 'text_secondary'),
         fg: base.fg,
         border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
         placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),
@@ -536,24 +538,27 @@ export const color = createColorTheme({
 
     if (state === 'disabled') {
       return {
-        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
-        fg: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        border: mix(base.bg, hues.gray[dark ? 900 : 100].hex),
+        bg: getColor(tones.default, dark, 'default', 'bg_tint'),
+        bg2: getColor(tones.default, dark, 'default', 'border_base'),
+        fg: getColor(tones.default, dark, 'default', 'bg_base'),
+        border: getColor(tones.default, dark, 'default', 'border_base'),
         placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
       }
     }
 
     if (state === 'readOnly') {
       return {
-        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
-        fg: mix(base.bg, hues.gray[dark ? 200 : 800].hex),
-        border: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
+        bg: getColor(tones.default, dark, 'default', 'bg_tint'),
+        bg2: getColor(tones.default, dark, 'default', 'border_base'),
+        fg: getColor(tones.default, dark, 'default', 'bg_base'),
+        border: getColor(tones.default, dark, 'default', 'border_base'),
         placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),
       }
     }
 
     return {
       bg: base.bg,
+      bg2: getColor(tones.default, dark, 'default', 'text_secondary'),
       fg: base.fg,
       border: base.border,
       placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),

src/theme/studioTheme/theme.ts

@@ -38,7 +38,7 @@ export const studioTheme: RootTheme = {
   input: {
     checkbox: {
       size: 17,
-      focusRing: {offset: 1, width: 1},
+      focusRing: {offset: -1, width: 1},
     },
     radio: {
       size: 17,

src/theme/studioTheme/tints.ts

@@ -58,7 +58,7 @@ const defaultTints: {
   },
 }
 
-export const colorTints: {
+const colorTints: {
   light: {
     [key in validTones]: ColorTintsDictionary
   }

stories/primitives/Checkbox.stories.tsx

@@ -2,6 +2,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {useCallback, useState} from 'react'
 import {Checkbox, Flex, Stack} from '../../src/primitives'
+import {matrixBuilder} from '../helpers/matrixBuilder'
 
 const meta: Meta<typeof Checkbox> = {
   argTypes: {
@@ -46,15 +47,27 @@ export const InputStates: Story = {
   render: (props) => {
     return (
       <Stack space={3}>
-        <Flex gap={3}>
-          <Checkbox {...props} />
-          <Checkbox {...props} indeterminate />
-          <Checkbox {...props} defaultChecked />
-        </Flex>
-        <Flex gap={3}>
-          <Checkbox {...props} disabled />
-          <Checkbox {...props} disabled indeterminate />
-          <Checkbox {...props} defaultChecked disabled />
+        <Flex direction={'row'} wrap={'wrap'} gap={4} align={'center'}>
+          {matrixBuilder({
+            scheme: 'light',
+            columns: ['default', 'indeterminate', 'checked'],
+            rows: ['enabled', 'disabled', 'readOnly'],
+            title: '',
+            renderItem({row, column}) {
+              return (
+                <Flex justify="center" marginTop={2}>
+                  <Checkbox
+                    {...props}
+                    defaultChecked={column === 'checked'}
+                    disabled={row === 'disabled'}
+                    indeterminate={column === 'indeterminate'}
+                    readOnly={row === 'readOnly'}
+                    key={row + column}
+                  />
+                </Flex>
+              )
+            },
+          })}
         </Flex>
       </Stack>
     )