@sanity/ui 1.8.2 → 2.0.0-alpha.2

package/src/theme/studioTheme/color.ts

@@ -1,16 +1,17 @@
-import {black, ColorTints, hues, white} from '@sanity/color'
+import {ColorTints, black, hues, white} from '@sanity/color'
 import {rgba} from '../lib/color-fns'
-import {createColorTheme} from '../lib/theme'
+import {ThemeColorName, createColorTheme} from '../lib/theme'
 import {multiply, screen} from './helpers'
+import {getColorHex} from './tints'
 
-const tones: {[key: string]: ColorTints} = {
+export const tones: Record<ThemeColorName, ColorTints> = {
   default: hues.gray,
   transparent: hues.gray,
-  primary: hues.blue,
-  positive: hues.green,
+  primary: hues.gray,
+  positive: hues.cyan,
   caution: hues.yellow,
   critical: hues.red,
-}
+} as const
 
 const NEUTRAL_TONES = ['default', 'transparent']
 
@@ -22,9 +23,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: getColorHex(tones['default'], dark, 'default', 'bg_base'),
+        border: getColorHex(tones['default'], dark, 'default', 'border_base'),
+        focusRing: getColorHex(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),
@@ -65,9 +66,9 @@ export const color = createColorTheme({
 
     return {
       fg: tints[dark ? 100 : 900].hex,
-      bg: tints[dark ? 950 : 50].hex,
-      border: tints[dark ? 800 : 200].hex,
-      focusRing: tints[500].hex,
+      bg: getColorHex(tints, dark, name, 'bg_base'),
+      border: getColorHex(tints, dark, name, 'border_base'),
+      focusRing: getColorHex(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),
@@ -92,14 +93,15 @@ export const color = createColorTheme({
     if (state === 'disabled') {
       tints = defaultTints
 
-      const bg = mix(base.bg, tints[dark ? 800 : 200].hex)
+      const bg = getColorHex(tones.default, dark, 'default', 'bg_tint')
       const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
       return {
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 800 : 200].hex),
-        fg: mix(base.bg, dark ? black.hex : white.hex),
+        border: getColorHex(tones.default, dark, 'default', 'bg_base'),
+        fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
+        iconColor: getColorHex(tones.default, dark, 'default', 'border_base'),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex),
         },
@@ -121,14 +123,15 @@ export const color = createColorTheme({
     }
 
     if (state === 'hovered') {
-      const bg = mix(base.bg, tints[dark ? 300 : 600].hex)
+      const bg = getColorHex(tints, dark, tone, 'bg_accent_hover')
       const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
       return {
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 300 : 600].hex),
-        fg: mix(base.bg, dark ? black.hex : white.hex),
+        border: bg,
+        fg: getColorHex(tints, dark, 'default', 'bg_base'),
+        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex),
         },
@@ -150,14 +153,15 @@ export const color = createColorTheme({
     }
 
     if (state === 'pressed') {
-      const bg = mix(base.bg, tints[dark ? 200 : 800].hex)
-      const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
+      const bg = getColorHex(tints, dark, tone, 'bg_accent_active')
+      const skeletonFrom = mix2(bg, tints[dark ? 200 : 600].hex)
 
       return {
-        bg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        bg: bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 200 : 800].hex),
-        fg: mix(base.bg, dark ? black.hex : white.hex),
+        border: bg,
+        fg: getColorHex(tints, dark, 'default', 'bg_base'),
+        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex),
         },
@@ -189,8 +193,9 @@ export const color = createColorTheme({
       return {
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: mix(base.bg, tints[dark ? 200 : 800].hex),
-        fg: mix(base.bg, dark ? black.hex : white.hex),
+        border: bg,
+        fg: getColorHex(tints, dark, 'default', 'bg_base'),
+        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex),
         },
@@ -212,14 +217,15 @@ export const color = createColorTheme({
     }
 
     // state: "enabled" | unknown
-    const bg = mix(base.bg, tints[dark ? 400 : 500].hex)
+    const bg = getColorHex(tints, dark, tone, 'bg_accent')
     const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
     return {
       bg,
       bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-      border: mix(base.bg, tints[dark ? 400 : 500].hex),
-      fg: mix(base.bg, dark ? black.hex : white.hex),
+      border: bg,
+      fg: getColorHex(tints, dark, 'default', 'bg_base'),
+      iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
       muted: {
         fg: mix(base.bg, tints[dark ? 900 : 100].hex),
       },
@@ -256,20 +262,21 @@ export const color = createColorTheme({
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: mix(bg, tints[dark ? 950 : 50].hex),
-        fg: mix(bg, tints[dark ? 800 : 200].hex),
+        border: getColorHex(tones.default, dark, 'default', 'border_base'),
+        fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
+        iconColor: getColorHex(tones.default, dark, 'default', 'border_base'),
         muted: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
         },
         accent: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         link: {
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         code: {
           bg,
-          fg: mix(bg, tints[dark ? 900 : 100].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: rgba(skeletonFrom, 0.5),
@@ -279,20 +286,17 @@ export const color = createColorTheme({
     }
 
     if (state === 'hovered') {
-      // if (isNeutral) {
-      //   tints = tones.primary
-      // }
-
-      const bg = mix(base.bg, tints[dark ? 950 : 50].hex)
+      const bg = getColorHex(tints, dark, name, 'bg_base_hover')
       const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
 
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
         border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg: getColorHex(tints, dark, tone, 'text_primary'),
+        iconColor: getColorHex(tints, dark, name, 'icon_default'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -302,7 +306,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -316,16 +320,17 @@ export const color = createColorTheme({
         tints = tones.primary
       }
 
-      const bg = mix(base.bg, tints[dark ? 900 : 100].hex)
-      const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
+      const bg = getColorHex(tints, dark, name, 'bg_base_active')
+      const skeletonFrom = mix(bg, getColorHex(tints, dark, name, 'bg_base_active'))
 
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        border: getColorHex(tints, dark, name, 'border_base'),
+        fg: getColorHex(tints, dark, tone, 'text_primary'),
+        iconColor: getColorHex(tints, dark, name, 'icon_default'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -335,7 +340,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -355,10 +360,11 @@ export const color = createColorTheme({
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: mix(bg, tints[dark ? 900 : 100].hex),
-        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        border: getColorHex(tints, dark, name, 'border_base'),
+        fg: getColorHex(tints, dark, tone, 'text_primary'),
+        iconColor: getColorHex(tints, dark, name, 'icon_default'),
         muted: {
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -368,7 +374,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+          fg: getColorHex(tints, dark, tone, 'text_secondary'),
         },
         skeleton: {
           from: skeletonFrom,
@@ -383,10 +389,11 @@ export const color = createColorTheme({
     return {
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      border: mix(bg, tints[dark ? 900 : 100].hex),
-      fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+      border: mix(bg, getColorHex(tints, dark, name, 'bg_base')),
+      fg: getColorHex(tints, dark, tone, 'text_primary'),
+      iconColor: getColorHex(tints, dark, name, 'icon_default'),
       muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+        fg: getColorHex(tints, dark, tone, 'text_secondary'),
       },
       accent: {
         fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -396,7 +403,7 @@ export const color = createColorTheme({
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+        fg: getColorHex(tints, dark, tone, 'text_secondary'),
       },
       skeleton: {
         from: skeletonFrom,
@@ -433,12 +440,11 @@ export const color = createColorTheme({
 
     if (mode === 'ghost') {
       return {
-        ...solid,
+        ...muted,
         enabled: {
           ...muted.enabled,
           border: base.border,
         },
-        disabled: muted.disabled,
       }
     }
 
@@ -481,6 +487,7 @@ export const color = createColorTheme({
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
       fg: base.fg,
+      iconColor: getColorHex(tints, dark, name, 'icon_default'),
       border: base.border,
       muted: {
         fg: mix(base.bg, tints[dark ? 400 : 600].hex),
@@ -510,44 +517,49 @@ export const color = createColorTheme({
 
       return {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+        bg2: getColorHex(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),
+        border: getColorHex(tints, dark, 'critical', 'border_base'),
+        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
       }
     }
 
     if (state === 'hovered') {
       return {
         bg: base.bg,
+        bg2: getColorHex(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),
+        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
       }
     }
 
     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),
-        placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
+        bg: getColorHex(tones.default, dark, 'default', 'bg_tint'),
+        bg2: getColorHex(tones.default, dark, 'default', 'border_base'),
+        fg: getColorHex(tones.default, dark, 'default', 'text_secondary'),
+        border: getColorHex(tones.default, dark, 'default', 'border_base'),
+        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
       }
     }
 
     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),
-        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),
+        bg: getColorHex(tones.default, dark, 'default', 'bg_tint'),
+        bg2: getColorHex(tones.default, dark, 'default', 'border_base'),
+        fg: getColorHex(tones.default, dark, 'default', 'text_secondary'),
+        border: getColorHex(tones.default, dark, 'default', 'border_base'),
+        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
       }
     }
 
     return {
       bg: base.bg,
+      bg2: getColorHex(tones.default, dark, 'default', 'text_secondary'),
       fg: base.fg,
       border: base.border,
-      placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),
+      placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
     }
   },
 

package/src/theme/studioTheme/fonts.ts

@@ -54,7 +54,7 @@ export const fonts: ThemeFonts = {
   },
   heading: {
     family:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     weights: {
       regular: 700,
       medium: 800,
@@ -114,7 +114,7 @@ export const fonts: ThemeFonts = {
   },
   label: {
     family:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
     weights: {
       regular: 600,
       medium: 700,
@@ -166,7 +166,7 @@ export const fonts: ThemeFonts = {
   },
   text: {
     family:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     weights: {
       regular: 400,
       medium: 500,

package/src/theme/studioTheme/theme.ts

@@ -12,9 +12,14 @@ export const studioTheme: RootTheme = {
       {distance: -6, size: 35},
       {distance: -9, size: 55},
     ],
+    focusRing: {offset: 1, width: 1},
   },
   button: {
     textWeight: 'medium',
+    focusRing: {offset: -1, width: 2},
+  },
+  card: {
+    focusRing: {offset: -1, width: 1},
   },
   color,
   container: [320, 640, 960, 1280, 1600, 1920],
@@ -37,21 +42,30 @@ export const studioTheme: RootTheme = {
   input: {
     checkbox: {
       size: 17,
+      focusRing: {offset: -1, width: 1},
     },
     radio: {
       size: 17,
       markSize: 9,
+      focusRing: {offset: -1, width: 1},
     },
     switch: {
-      width: 33,
-      height: 17,
-      padding: 4,
+      width: 21,
+      height: 13,
+      padding: 2,
       transitionDurationMs: 150,
       transitionTimingFunction: 'ease-out',
+      focusRing: {offset: 1, width: 1},
     },
     border: {
       width: 1,
     },
+    select: {
+      focusRing: {offset: -1, width: 1},
+    },
+    text: {
+      focusRing: {offset: -1, width: 1},
+    },
   },
   // styles: {
   //   button: {

package/src/theme/studioTheme/tints.ts

@@ -0,0 +1,152 @@
+/**
+ * This file creates a translation between the tints and the studio colors
+ * Providing readable names, and allowing to mix colors and tints in the same ThemeColor.
+ * e.g. for positive theme: `{"bg_base": "white", "bg_base_hover": "gray/50", "bg_base_active": "cyan/50"}
+ * This is not possible in the previous configuration, as each ThemeColor uses only one tint.
+ */
+import {ColorTintKey, ColorTints, ColorValue, black, hues, white} from '@sanity/color'
+import {ThemeColorName, ThemeColorSchemeKey} from '../lib/theme'
+
+export const colorKeys = [
+  'text_primary',
+  'text_secondary',
+  'text_inactive',
+  'bg_base',
+  'bg_base_hover',
+  'bg_base_active',
+  'bg_accent',
+  'bg_accent_hover',
+  'bg_accent_active',
+  'bg_tint',
+  'icon_default',
+  'icon_inverted',
+  'border_base',
+  'border_accent',
+  'border_accent_inverted',
+] as const
+
+export type ColorKey = (typeof colorKeys)[number]
+
+type ColorTintsDictionary = Record<ColorKey, ColorTintKey | ColorValue>
+const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
+  light: {
+    text_primary: '900',
+    text_secondary: '600',
+    text_inactive: '500',
+    bg_base: white,
+    bg_base_hover: '50',
+    bg_base_active: '100',
+    bg_accent: '500',
+    bg_accent_hover: '600',
+    bg_accent_active: '700',
+    bg_tint: '50',
+    icon_default: '500',
+    icon_inverted: white,
+    border_base: '100',
+    border_accent: '500',
+    border_accent_inverted: white,
+  },
+  dark: {
+    text_primary: '50',
+    text_secondary: '300',
+    text_inactive: '400',
+    bg_base: black,
+    bg_base_hover: '900',
+    bg_base_active: '800',
+    bg_accent: '500',
+    bg_accent_hover: '400',
+    bg_accent_active: '300',
+    bg_tint: '900',
+    icon_default: '300',
+    icon_inverted: hues.gray[900],
+    border_base: '800',
+    border_accent: '300',
+    border_accent_inverted: hues.gray[900],
+  },
+}
+
+export const colorTints: Record<
+  ThemeColorSchemeKey,
+  Record<ThemeColorName, ColorTintsDictionary>
+> = {
+  light: {
+    default: {
+      ...defaultTints.light,
+      bg_accent: '900',
+      bg_accent_hover: '950',
+      bg_accent_active: black,
+      border_accent: '600',
+    },
+    primary: {
+      ...defaultTints.light,
+      bg_accent: '900',
+      bg_accent_hover: '950',
+      bg_accent_active: black,
+      border_accent: '600',
+    },
+    positive: {
+      ...defaultTints.light,
+      bg_base_hover: hues.gray[50],
+      bg_base_active: '50',
+      bg_accent: '400',
+      bg_accent_hover: '500',
+      bg_accent_active: '600',
+      border_accent: '400',
+    },
+    transparent: defaultTints.light,
+    caution: defaultTints.light,
+    critical: defaultTints.light,
+  },
+  dark: {
+    default: {
+      ...defaultTints.dark,
+      text_primary: white,
+      bg_accent: white,
+      bg_accent_hover: '50',
+      bg_accent_active: '100',
+    },
+    primary: {
+      ...defaultTints.dark,
+      text_primary: white,
+      bg_accent: white,
+      bg_accent_hover: '50',
+      bg_accent_active: '100',
+    },
+    positive: {
+      ...defaultTints.dark,
+      bg_base_hover: hues.gray[900],
+      bg_base_active: '900',
+      bg_accent: '400',
+      bg_accent_hover: '300',
+      bg_accent_active: '200',
+      border_accent: '400',
+    },
+    transparent: defaultTints.dark,
+    caution: defaultTints.dark,
+    critical: defaultTints.dark,
+  },
+}
+
+export const getColorValue = (
+  tints: ColorTints,
+  dark: boolean,
+  tone: ThemeColorName,
+  key: ColorKey,
+): ColorValue => {
+  const value = colorTints[dark ? 'dark' : 'light'][tone][key]
+
+  if (typeof value === 'string') {
+    return tints[value]
+  }
+
+  return value
+}
+
+export const getColorHex = (
+  tints: ColorTints,
+  dark: boolean,
+  tone: ThemeColorName,
+  key: ColorKey,
+): string => {
+  return getColorValue(tints, dark, tone, key).hex
+}

package/src/theme/types.ts

@@ -37,3 +37,11 @@ export interface ThemeContextValue {
   theme: RootTheme
   tone: ThemeColorName
 }
+
+/**
+ * @public
+ */
+export interface FocusRing {
+  offset: number
+  width: number
+}

package/src/types/index.ts

@@ -9,6 +9,7 @@ export * from './grid'
 export * from './gridItem'
 export * from './placement'
 export * from './popover'
+export * from './radius'
 export * from './selectable'
 export * from './styled'
 export * from './text'

package/src/types/radius.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type Radius = number | 'full'