@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/theme/studioTheme/color.ts

@@ -1,17 +1,16 @@
-import {ColorTints, black, hues, white} from '@sanity/color'
+import {black, ColorTints, hues, white} from '@sanity/color'
 import {rgba} from '../lib/color-fns'
-import {ThemeColorName, createColorTheme} from '../lib/theme'
+import {createColorTheme} from '../lib/theme'
 import {multiply, screen} from './helpers'
-import {getColorHex} from './tints'
 
-export const tones: Record<ThemeColorName, ColorTints> = {
+export const tones: {[key: string]: ColorTints} = {
   default: hues.gray,
   transparent: hues.gray,
-  primary: hues.gray,
-  positive: hues.cyan,
+  primary: hues.blue,
+  positive: hues.green,
   caution: hues.yellow,
   critical: hues.red,
-} as const
+}
 
 const NEUTRAL_TONES = ['default', 'transparent']
 
@@ -23,9 +22,9 @@ export const color = createColorTheme({
 
       return {
         fg: dark ? white.hex : black.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'),
+        bg: dark ? black.hex : white.hex,
+        border: tints[dark ? 800 : 200].hex,
+        focusRing: hues.blue[dark ? 500 : 500].hex,
         shadow: {
           outline: rgba(tints[500].hex, 0.4),
           umbra: dark ? rgba(tints[950].hex, 0.4) : rgba(tints[500].hex, 0.2),
@@ -66,9 +65,9 @@ export const color = createColorTheme({
 
     return {
       fg: tints[dark ? 100 : 900].hex,
-      bg: getColorHex(tints, dark, name, 'bg_base'),
-      border: getColorHex(tints, dark, name, 'border_base'),
-      focusRing: getColorHex(tints, dark, name, 'border_accent'),
+      bg: tints[dark ? 950 : 50].hex,
+      border: tints[dark ? 800 : 200].hex,
+      focusRing: tints[500].hex,
       shadow: {
         outline: rgba(tints[500].hex, 0.4),
         umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
@@ -93,15 +92,16 @@ export const color = createColorTheme({
     if (state === 'disabled') {
       tints = defaultTints
 
-      const bg = getColorHex(tones.default, dark, 'default', 'bg_tint')
+      const bg = mix(base.bg, tints[dark ? 800 : 200].hex)
       const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
       return {
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].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'),
+        border: mix(base.bg, tints[dark ? 800 : 200].hex),
+        iconColor: '', // Add color
+
+        fg: mix(base.bg, dark ? black.hex : white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex),
         },
@@ -123,15 +123,16 @@ export const color = createColorTheme({
     }
 
     if (state === 'hovered') {
-      const bg = getColorHex(tints, dark, tone, 'bg_accent_hover')
+      const bg = mix(base.bg, tints[dark ? 300 : 600].hex)
       const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
       return {
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: bg,
-        fg: getColorHex(tints, dark, 'default', 'bg_base'),
-        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
+        border: mix(base.bg, tints[dark ? 300 : 600].hex),
+        fg: mix(base.bg, dark ? black.hex : white.hex),
+        iconColor: '', // Add color
+
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex),
         },
@@ -153,15 +154,16 @@ export const color = createColorTheme({
     }
 
     if (state === 'pressed') {
-      const bg = getColorHex(tints, dark, tone, 'bg_accent_active')
-      const skeletonFrom = mix2(bg, tints[dark ? 200 : 600].hex)
+      const bg = mix(base.bg, tints[dark ? 200 : 800].hex)
+      const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
       return {
-        bg: bg,
+        bg: mix(base.bg, tints[dark ? 200 : 800].hex),
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: bg,
-        fg: getColorHex(tints, dark, 'default', 'bg_base'),
-        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
+        iconColor: '', // Add color
+
+        border: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg: mix(base.bg, dark ? black.hex : white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex),
         },
@@ -193,9 +195,10 @@ export const color = createColorTheme({
       return {
         bg,
         bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-        border: bg,
-        fg: getColorHex(tints, dark, 'default', 'bg_base'),
-        iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
+        border: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg: mix(base.bg, dark ? black.hex : white.hex),
+        iconColor: '', // Add color
+
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex),
         },
@@ -217,15 +220,16 @@ export const color = createColorTheme({
     }
 
     // state: "enabled" | unknown
-    const bg = getColorHex(tints, dark, tone, 'bg_accent')
+    const bg = mix(base.bg, tints[dark ? 400 : 500].hex)
     const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex)
 
     return {
       bg,
       bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-      border: bg,
-      fg: getColorHex(tints, dark, 'default', 'bg_base'),
-      iconColor: getColorHex(tints, dark, 'default', 'icon_inverted'),
+      border: mix(base.bg, tints[dark ? 400 : 500].hex),
+      iconColor: '', // Add color
+
+      fg: mix(base.bg, dark ? black.hex : white.hex),
       muted: {
         fg: mix(base.bg, tints[dark ? 900 : 100].hex),
       },
@@ -262,21 +266,21 @@ export const color = createColorTheme({
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].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'),
+        border: mix(bg, tints[dark ? 950 : 50].hex),
+        iconColor: '', // Add color
+        fg: mix(bg, tints[dark ? 800 : 200].hex),
         muted: {
-          fg: getColorHex(tones.default, dark, 'default', 'text_inactive'),
+          fg: mix(bg, tints[dark ? 900 : 100].hex),
         },
         accent: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(bg, tints[dark ? 900 : 100].hex),
         },
         link: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(bg, tints[dark ? 900 : 100].hex),
         },
         code: {
           bg,
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(bg, tints[dark ? 900 : 100].hex),
         },
         skeleton: {
           from: rgba(skeletonFrom, 0.5),
@@ -286,17 +290,22 @@ export const color = createColorTheme({
     }
 
     if (state === 'hovered') {
-      const bg = getColorHex(tints, dark, name, 'bg_base_hover')
+      // if (isNeutral) {
+      //   tints = tones.primary
+      // }
+
+      const bg = mix(base.bg, tints[dark ? 950 : 50].hex)
       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: getColorHex(tints, dark, tone, 'text_primary'),
-        iconColor: getColorHex(tints, dark, name, 'icon_default'),
+        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        iconColor: '', // Add color
+
         muted: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
         accent: {
           fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -306,7 +315,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
         skeleton: {
           from: skeletonFrom,
@@ -320,17 +329,18 @@ export const color = createColorTheme({
         tints = tones.primary
       }
 
-      const bg = getColorHex(tints, dark, name, 'bg_base_active')
-      const skeletonFrom = mix(bg, getColorHex(tints, dark, name, 'bg_base_active'))
+      const bg = mix(base.bg, tints[dark ? 900 : 100].hex)
+      const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex)
 
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, 'border_base'),
-        fg: getColorHex(tints, dark, tone, 'text_primary'),
-        iconColor: getColorHex(tints, dark, name, 'icon_default'),
+        border: mix(bg, tints[dark ? 900 : 100].hex),
+        iconColor: '', // Add color
+
+        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
         muted: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -340,7 +350,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
         skeleton: {
           from: skeletonFrom,
@@ -360,11 +370,12 @@ export const color = createColorTheme({
       return {
         bg,
         bg2: mix(bg, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, 'border_base'),
-        fg: getColorHex(tints, dark, tone, 'text_primary'),
-        iconColor: getColorHex(tints, dark, name, 'icon_default'),
+        border: mix(bg, tints[dark ? 900 : 100].hex),
+        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        iconColor: '', // Add color
+
         muted: {
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
         accent: {
           fg: mix(bg, hues.red[dark ? 400 : 500].hex),
@@ -374,7 +385,7 @@ export const color = createColorTheme({
         },
         code: {
           bg: mix(bg, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, 'text_secondary'),
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex),
         },
         skeleton: {
           from: skeletonFrom,
@@ -389,11 +400,12 @@ export const color = createColorTheme({
     return {
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      border: mix(bg, getColorHex(tints, dark, name, 'bg_base')),
-      fg: getColorHex(tints, dark, tone, 'text_primary'),
-      iconColor: getColorHex(tints, dark, name, 'icon_default'),
+      border: mix(bg, tints[dark ? 900 : 100].hex),
+      fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+      iconColor: '', // Add color
+
       muted: {
-        fg: getColorHex(tints, dark, tone, 'text_secondary'),
+        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
       },
       accent: {
         fg: mix(base.bg, hues.red[dark ? 400 : 500].hex),
@@ -403,7 +415,7 @@ export const color = createColorTheme({
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: getColorHex(tints, dark, tone, 'text_secondary'),
+        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
       },
       skeleton: {
         from: skeletonFrom,
@@ -440,11 +452,12 @@ export const color = createColorTheme({
 
     if (mode === 'ghost') {
       return {
-        ...muted,
+        ...solid,
         enabled: {
           ...muted.enabled,
           border: base.border,
         },
+        disabled: muted.disabled,
       }
     }
 
@@ -487,8 +500,8 @@ 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,
+      iconColor: '', // Add color
       muted: {
         fg: mix(base.bg, tints[dark ? 400 : 600].hex),
       },
@@ -517,49 +530,52 @@ export const color = createColorTheme({
 
       return {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        bg2: getColorHex(tints, dark, 'critical', 'text_secondary'),
+        bg2: '', // Add color
         fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-        border: getColorHex(tints, dark, 'critical', 'border_base'),
-        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
+        border: mix(base.bg, tints[dark ? 800 : 200].hex),
+        placeholder: mix(base.bg, tints[dark ? 600 : 400].hex),
       }
     }
 
     if (state === 'hovered') {
       return {
         bg: base.bg,
-        bg2: getColorHex(tones.default, dark, 'default', 'text_secondary'),
+        bg2: '', // Add color
+
         fg: base.fg,
         border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
+        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),
       }
     }
 
     if (state === 'disabled') {
       return {
-        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'),
+        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
+        bg2: '', // Add color
+
+        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),
       }
     }
 
     if (state === 'readOnly') {
       return {
-        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'),
+        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
+        bg2: '', // Add color
+
+        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),
       }
     }
 
     return {
       bg: base.bg,
-      bg2: getColorHex(tones.default, dark, 'default', 'text_secondary'),
+      bg2: '', // Add color
       fg: base.fg,
       border: base.border,
-      placeholder: getColorHex(tones.default, !dark, 'default', 'text_secondary'),
+      placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex),
     }
   },
 

package/src/theme/studioTheme/helpers.ts

@@ -1,10 +1,20 @@
-import {parseColor, rgbToHex, screen as _screen, multiply as _multiply} from '../lib/color-fns'
+import {
+  parseColor,
+  rgbToHex,
+  screen as _screen,
+  multiply as _multiply,
+  rgba,
+} from '../lib/color-fns'
 
 export function multiply(bg: string, fg: string): string {
   const b = parseColor(bg)
   const s = parseColor(fg)
   const hex = rgbToHex(_multiply(b, s))
 
+  if (s.a) {
+    return rgba(hex, s.a)
+  }
+
   return hex
 }
 
@@ -13,5 +23,9 @@ export function screen(bg: string, fg: string): string {
   const s = parseColor(fg)
   const hex = rgbToHex(_screen(b, s))
 
+  if (s.a) {
+    return rgba(hex, s.a)
+  }
+
   return hex
 }

package/src/theme/studioTheme/theme.ts

@@ -8,11 +8,11 @@ import {fonts} from './fonts'
 export const studioTheme: RootTheme = {
   avatar: {
     sizes: [
-      {distance: -3, size: 25},
-      {distance: -6, size: 35},
-      {distance: -9, size: 55},
+      {distance: -3, size: 23},
+      {distance: -6, size: 33},
+      {distance: -9, size: 53},
     ],
-    focusRing: {offset: 1, width: 1},
+    focusRing: {offset: 0, width: 1},
   },
   button: {
     textWeight: 'medium',
@@ -33,7 +33,7 @@ export const studioTheme: RootTheme = {
   shadows: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
     {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
     {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},