@sanity/ui 3.0.0-static.19 → 3.0.0-static.20

package/src/theme/v3/defaultFonts.ts

@@ -0,0 +1,250 @@
+import type {ThemeFonts_v3} from './types'
+
+export const defaultThemeFonts: ThemeFonts_v3 = {
+  code: {
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+        customIconSize: 24,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+        customIconSize: 28,
+      },
+    ],
+  },
+  heading: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
+    weight: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 17,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: -0.25,
+        customIconSize: 28,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: -0.5,
+        customIconSize: 36,
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: -1,
+        customIconSize: 44,
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: -1,
+        customIconSize: 48,
+      },
+    ],
+  },
+  label: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weight: {
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800,
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+        customIconSize: 8,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 9.5,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+        customIconSize: 10,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 10.8,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.25,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+        customIconSize: 14,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 13.6,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5,
+        customIconSize: 18,
+      },
+    ],
+  },
+  text: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 15,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+        customIconSize: 24,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+        customIconSize: 28,
+      },
+    ],
+  },
+}

package/src/theme/v3/defaultTokens.ts

@@ -9,41 +9,41 @@ export const defaultTokens: PartialTokens<Tokens> = {
         bg: ['50', '950'],
         fg: ['700', '300'],
         token: {
-          atrule: ['purple-600', 'purple-300'],
-          attrName: ['green-600', 'green-300'],
-          attrValue: ['yellow-600', 'yellow-300'],
-          attribute: ['yellow-600', 'yellow-300'],
-          boolean: ['purple-600', 'purple-300'],
-          builtin: ['purple-600', 'purple-300'],
-          cdata: ['yellow-600', 'yellow-300'],
-          char: ['yellow-600', 'yellow-300'],
-          class: ['orange-600', 'orange-300'],
-          className: ['cyan-600', 'cyan-300'],
-          comment: ['gray-300', 'gray-600'],
-          constant: ['purple-600', 'purple-300'],
-          deleted: ['red-600', 'red-300'],
-          entity: ['red-600', 'red-300'],
-          function: ['green-600', 'green-300'],
-          hexcode: ['blue-600', 'blue-300'],
-          id: ['purple-600', 'purple-300'],
-          important: ['purple-600', 'purple-300'],
-          inserted: ['green-600', 'green-300'],
-          keyword: ['magenta-600', 'magenta-300'],
-          number: ['purple-600', 'purple-300'],
-          operator: ['magenta-600', 'magenta-300'],
-          prolog: ['gray-600', 'gray-300'],
-          property: ['blue-600', 'blue-300'],
-          pseudoClass: ['yellow-600', 'yellow-300'],
-          pseudoElement: ['yellow-600', 'yellow-300'],
-          punctuation: ['gray-600', 'gray-300'],
-          regex: ['blue-600', 'blue-300'],
-          selector: ['red-600', 'red-300'],
-          string: ['yellow-600', 'yellow-300'],
-          symbol: ['purple-600', 'purple-300'],
-          tag: ['red-600', 'red-300'],
-          unit: ['orange-600', 'orange-300'],
-          url: ['red-600', 'red-300'],
-          variable: ['red-600', 'red-300'],
+          atrule: ['purple-600', 'purple-400'],
+          attrName: ['green-600', 'green-400'],
+          attrValue: ['yellow-600', 'yellow-400'],
+          attribute: ['yellow-600', 'yellow-400'],
+          boolean: ['purple-600', 'purple-400'],
+          builtin: ['purple-600', 'purple-400'],
+          cdata: ['yellow-600', 'yellow-400'],
+          char: ['yellow-600', 'yellow-400'],
+          class: ['orange-600', 'orange-400'],
+          className: ['cyan-600', 'cyan-400'],
+          comment: ['gray-400', 'gray-600'],
+          constant: ['purple-600', 'purple-400'],
+          deleted: ['red-600', 'red-400'],
+          entity: ['red-600', 'red-400'],
+          function: ['green-600', 'green-400'],
+          hexcode: ['blue-600', 'blue-400'],
+          id: ['purple-600', 'purple-400'],
+          important: ['purple-600', 'purple-400'],
+          inserted: ['green-600', 'green-400'],
+          keyword: ['magenta-600', 'magenta-400'],
+          number: ['purple-600', 'purple-400'],
+          operator: ['magenta-600', 'magenta-400'],
+          prolog: ['gray-600', 'gray-400'],
+          property: ['blue-600', 'blue-400'],
+          pseudoClass: ['yellow-600', 'yellow-400'],
+          pseudoElement: ['yellow-600', 'yellow-400'],
+          punctuation: ['gray-600', 'gray-400'],
+          regex: ['blue-600', 'blue-400'],
+          selector: ['red-600', 'red-400'],
+          string: ['yellow-600', 'yellow-400'],
+          symbol: ['purple-600', 'purple-400'],
+          tag: ['red-600', 'red-400'],
+          unit: ['orange-600', 'orange-400'],
+          url: ['red-600', 'red-400'],
+          variable: ['red-600', 'red-400'],
         },
       },
       focusRing: ['blue-500', 'blue-500'],
@@ -56,6 +56,10 @@ export const defaultTokens: PartialTokens<Tokens> = {
         penumbra: ['600/0.07', 'black/0.14'],
         ambient: ['600/0.06', 'black/0.12'],
       },
+      skeleton: {
+        from: ['200 70%', '800 35%'],
+        to: ['200 40%', '800 50%'],
+      },
       variant: {
         tinted: {
           '*': {

package/src/theme/v3/types.ts

@@ -1,6 +1,12 @@
 import type {ColorHues, ColorTint} from '@sanity/color'
 
-import type {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
+import type {
+  ThemeFocusRing,
+  ThemeFontWeight,
+  ThemeFontWeightKey,
+  ThemeLayer,
+  ThemeShadow,
+} from '../v0'
 import type {ThemeAvatar_v2, ThemeConfig, ThemeInput_v2} from '../v2'
 import type {
   AVATAR_SIZE,
@@ -66,6 +72,33 @@ export interface ThemePalette_v3 {
   hues: ColorHues
 }
 
+/** @public */
+export interface ThemeFontSize_v3 {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
+/** @public */
+export interface ThemeFont_v3 {
+  family: string
+  featureSettings?: string
+  weight: ThemeFontWeight
+  sizes: ThemeFontSize_v3[]
+}
+
+/** @public */
+export interface ThemeFonts_v3 {
+  code: ThemeFont_v3
+  heading: ThemeFont_v3
+  label: ThemeFont_v3
+  text: ThemeFont_v3
+}
+
 /**
  * Supersedes `RootTheme` and `RootTheme_v2`.
  *
@@ -88,7 +121,7 @@ export interface Theme_v3 {
   color: ThemeColor_v3
   // color: ThemeColorSchemes_v2
   container: number[]
-  font: ThemeFonts
+  font: ThemeFonts_v3
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]

package/src/theme/versioning/v3_v2.ts

@@ -97,6 +97,7 @@ export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
       },
     },
     container: theme_v3.container,
+    // @ts-expect-error TODO: fix this
     font: theme_v3.font,
     input: theme_v3.input,
     layer: theme_v3.layer,

package/src/css/primitives/_input/__workshop__/customInput.tsx

@@ -1,16 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import {_input, _inputElement, _inputPresentation} from '@sanity/ui/css'
-
-export default function CustomInputStory() {
-  return (
-    <Box padding={4}>
-      <Box className={_input({border: true, padding: 3, radius: 2})}>
-        <button className={_inputElement()} tabIndex={0}>
-          <Text>Input text</Text>
-        </button>
-
-        <Box className={_inputPresentation()} padding={3}></Box>
-      </Box>
-    </Box>
-  )
-}

package/src/css/primitives/_input/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'css/input',
-  title: 'Input',
-  stories: [
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./customInput')),
-    },
-  ],
-})