feat(radio): update radio input to match facelift designs

sanity-io · Sep 29, 2023 · bd1ea96 · bd1ea96
1 parent 37296e2
commit bd1ea96
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 13 deletions.
diff --git a/cypress/e2e/ui/textInput.cy.ts b/cypress/e2e/ui/textInput.cy.ts
@@ -7,7 +7,7 @@ context('Primitives/TextInput', () => {
     cy.get('#text-input-example + span').should(
       'have.css',
       'boxShadow',
-      'rgb(34, 118, 252) 0px 0px 0px 1px inset, rgb(206, 210, 217) 0px 0px 0px 1px inset',
+      'rgb(34, 218, 244) 0px 0px 0px 1px inset, rgb(230, 232, 236) 0px 0px 0px 1px inset',
     )
   })
 })
diff --git a/src/primitives/radio/styles.ts b/src/primitives/radio/styles.ts
@@ -59,7 +59,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
         height: ${rem(input.radio.markSize)};
         width: ${rem(input.radio.markSize)};
         border-radius: ${rem(input.radio.markSize / 2)};
-        background: ${color.default.enabled.fg};
+        background: ${color.default.enabled.bg2};
         opacity: 0;
       }
     }
@@ -89,7 +89,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       background: ${color.default.readOnly.bg};
 
       &::after {
-        background: ${color.default.readOnly.fg};
+        background: ${color.default.readOnly.border};
       }
     }
 
@@ -99,7 +99,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       background: ${color.default.disabled.bg};
 
       &::after {
-        background: ${color.default.disabled.fg};
+        background: ${color.default.disabled.border};
       }
     }
   `

diff --git a/src/theme/studioTheme/theme.ts b/src/theme/studioTheme/theme.ts
@@ -43,7 +43,7 @@ export const studioTheme: RootTheme = {
     radio: {
       size: 17,
       markSize: 9,
-      focusRing: {offset: 1, width: 1},
+      focusRing: {offset: -1, width: 1},
     },
     switch: {
       width: 33,

diff --git a/src/theme/studioTheme/tints.ts b/src/theme/studioTheme/tints.ts
@@ -49,7 +49,7 @@ const defaultTints: {
     bg_accent: '500',
     bg_accent_hover: '400',
     bg_accent_active: '300',
-    bg_tint: '900',
+    bg_tint: '950',
     icon_default: '300',
     icon_inverted: hues.gray[900],
     border_base: '900',

diff --git a/stories/primitives/Radio.stories.tsx b/stories/primitives/Radio.stories.tsx
@@ -2,6 +2,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {ChangeEvent, useCallback, useState} from 'react'
 import {Flex, Radio, Stack} from '../../src/primitives'
+import {matrixBuilder} from '../helpers/matrixBuilder'
 
 const meta: Meta<typeof Radio> = {
   argTypes: {
@@ -52,13 +53,45 @@ export const InputStates: Story = {
   render: (props) => {
     return (
       <Stack space={3}>
-        <Flex gap={3}>
-          <Radio {...props} />
-          <Radio {...props} defaultChecked />
-        </Flex>
-        <Flex gap={3}>
-          <Radio {...props} disabled />
-          <Radio {...props} defaultChecked disabled />
+        <Flex direction={'row'} wrap={'wrap'} gap={4} align={'center'}>
+          {matrixBuilder({
+            scheme: 'light',
+            columns: ['default', 'checked'],
+            rows: ['enabled', 'disabled', 'readOnly'],
+            title: '',
+            renderItem({row, column}) {
+              return (
+                <Flex justify="center" marginTop={2}>
+                  <Radio
+                    {...props}
+                    defaultChecked={column === 'checked'}
+                    disabled={row === 'disabled'}
+                    readOnly={row === 'readOnly'}
+                    key={row + column}
+                  />
+                </Flex>
+              )
+            },
+          })}
+          {matrixBuilder({
+            scheme: 'dark',
+            columns: ['default', 'checked'],
+            rows: ['enabled', 'disabled', 'readOnly'],
+            title: '',
+            renderItem({row, column}) {
+              return (
+                <Flex justify="center" marginTop={2}>
+                  <Radio
+                    {...props}
+                    defaultChecked={column === 'checked'}
+                    disabled={row === 'disabled'}
+                    readOnly={row === 'readOnly'}
+                    key={row + column}
+                  />
+                </Flex>
+              )
+            },
+          })}
         </Flex>
       </Stack>
     )