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

package/src/css/utils/srOnly/srOnly.css.ts

@@ -0,0 +1,10 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const root = _style(layers.utils, {
+  display: 'block',
+  width: 0,
+  height: 0,
+  position: 'absolute',
+  overflow: ['hidden', 'clip'],
+})

package/src/css/utils/srOnly/srOnly.ts

@@ -1,7 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {root} from './srOnly.css'
 
 /** @public */
-export function srOnly(): string | undefined {
-  return _scopeClassNames(_composeClassNames('sr-only'))
+export function srOnly(props: {className?: string}) {
+  return _composeClassNames(props.className, root)
 }

package/src/css/vars.css.ts

@@ -0,0 +1,676 @@
+import {COLOR_HUES, COLOR_TINTS} from '@sanity/color'
+import {
+  AVATAR_COLORS,
+  AVATAR_SIZE,
+  COLOR_VARIANTS,
+  CONTAINER_SCALE,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  RADIUS,
+  SHADOW,
+  SPACE,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_SCHEMES,
+  THEME_COLOR_STATE_TONES,
+} from '@sanity/ui/theme'
+import {createThemeContract, createVar} from '@vanilla-extract/css'
+
+import {_fromEntries} from './_fromEntries'
+import type {_CSSThemeWithoutPalette, CSSThemeColorPalette} from './types'
+
+/** @public */
+export const paletteVars = createThemeContract({
+  black: '',
+  white: '',
+
+  // hues
+  ..._fromEntries(
+    COLOR_HUES.map((h) => [
+      h,
+      {
+        ..._fromEntries(COLOR_TINTS.map((t) => [t, ''])),
+      },
+    ]),
+  ),
+}) satisfies CSSThemeColorPalette
+
+const _themeVars = createThemeContract({
+  avatar: {
+    focusRing: {
+      offset: '',
+      width: '',
+    },
+    scale: {
+      ..._fromEntries(
+        AVATAR_SIZE.map((s) => [
+          s,
+          {
+            distance: '',
+            size: '',
+          },
+        ]),
+      ),
+    },
+  },
+  button: {
+    border: {
+      width: '',
+    },
+    focusRing: {
+      offset: '',
+      width: '',
+    },
+  },
+  card: {
+    shadow: {
+      outline: '',
+    },
+  },
+  color: {
+    // schemes
+    ..._fromEntries(
+      THEME_COLOR_SCHEMES.map((s) => [
+        s,
+        {
+          ..._fromEntries(
+            THEME_COLOR_CARD_TONES.map((t) => [
+              t,
+              {
+                avatar: {
+                  ..._fromEntries(AVATAR_COLORS.map((c) => [c, {bg: '', fg: ''}])),
+                },
+                backdrop: '',
+                // bg: {
+                //   '0': '',
+                //   '4': '',
+                // },
+                // border: {
+                //   '0': '',
+                //   '4': '',
+                // },
+                code: {
+                  bg: '',
+                  fg: '',
+
+                  token: {
+                    atrule: '',
+                    attrName: '',
+                    attrValue: '',
+                    attribute: '',
+                    boolean: '',
+                    builtin: '',
+                    cdata: '',
+                    char: '',
+                    class: '',
+                    className: '',
+                    comment: '',
+                    constant: '',
+                    deleted: '',
+                    doctype: '',
+                    entity: '',
+                    function: '',
+                    hexcode: '',
+                    id: '',
+                    important: '',
+                    inserted: '',
+                    keyword: '',
+                    number: '',
+                    operator: '',
+                    prolog: '',
+                    property: '',
+                    pseudoClass: '',
+                    pseudoElement: '',
+                    punctuation: '',
+                    regex: '',
+                    selector: '',
+                    string: '',
+                    symbol: '',
+                    tag: '',
+                    unit: '',
+                    url: '',
+                    variable: '',
+                  },
+                },
+                // fg: {
+                //   '0': '',
+                //   '4': '',
+                // },
+
+                focusRing: '',
+                link: {
+                  fg: '',
+                },
+
+                shadow: {
+                  outline: '',
+                  umbra: '',
+                  penumbra: '',
+                  ambient: '',
+                },
+
+                skeleton: {
+                  from: '',
+                  to: '',
+                },
+
+                ..._fromEntries(
+                  COLOR_VARIANTS.map((v) => [
+                    v,
+                    {
+                      ..._fromEntries(
+                        THEME_COLOR_STATE_TONES.map((t) => [
+                          t,
+                          {
+                            bg: {
+                              0: '',
+                              4: '',
+                            },
+                            border: {
+                              0: '',
+                              4: '',
+                            },
+                            fg: {
+                              0: '',
+                              4: '',
+                            },
+                          },
+                        ]),
+                      ),
+                    },
+                  ]),
+                ),
+              },
+            ]),
+          ),
+        },
+      ]),
+    ),
+  },
+  container: {
+    ..._fromEntries(CONTAINER_SCALE.map((w) => [w, ''])),
+  },
+  font: {
+    code: {
+      family: '',
+      featureSettings: '',
+      weight: {
+        regular: '',
+        medium: '',
+        semibold: '',
+        bold: '',
+      },
+      scale: {
+        ..._fromEntries(
+          FONT_CODE_SIZE.map((s) => [
+            s,
+            {
+              fontSize: '',
+              lineHeight: '',
+              letterSpacing: '',
+              ascenderHeight: '',
+              descenderHeight: '',
+              iconSize: '',
+              customIconSize: '',
+            },
+          ]),
+        ),
+      },
+    },
+    heading: {
+      family: '',
+      featureSettings: '',
+      weight: {
+        regular: '',
+        medium: '',
+        semibold: '',
+        bold: '',
+      },
+      scale: {
+        ..._fromEntries(
+          FONT_HEADING_SIZE.map((s) => [
+            s,
+            {
+              fontSize: '',
+              lineHeight: '',
+              letterSpacing: '',
+              ascenderHeight: '',
+              descenderHeight: '',
+              iconSize: '',
+              customIconSize: '',
+            },
+          ]),
+        ),
+      },
+    },
+    label: {
+      family: '',
+      featureSettings: '',
+      weight: {
+        regular: '',
+        medium: '',
+        semibold: '',
+        bold: '',
+      },
+      scale: {
+        ..._fromEntries(
+          FONT_LABEL_SIZE.map((s) => [
+            s,
+            {
+              fontSize: '',
+              lineHeight: '',
+              letterSpacing: '',
+              ascenderHeight: '',
+              descenderHeight: '',
+              iconSize: '',
+              customIconSize: '',
+            },
+          ]),
+        ),
+      },
+    },
+    text: {
+      family: '',
+      featureSettings: '',
+      weight: {
+        regular: '',
+        medium: '',
+        semibold: '',
+        bold: '',
+      },
+      scale: {
+        ..._fromEntries(
+          FONT_TEXT_SIZE.map((s) => [
+            s,
+            {
+              fontSize: '',
+              lineHeight: '',
+              letterSpacing: '',
+              ascenderHeight: '',
+              descenderHeight: '',
+              iconSize: '',
+              customIconSize: '',
+            },
+          ]),
+        ),
+      },
+    },
+  },
+  input: {
+    border: {
+      width: '',
+    },
+    checkbox: {
+      size: '',
+      focusRing: {
+        offset: '',
+        width: '',
+      },
+    },
+    radio: {
+      size: '',
+      markSize: '',
+      focusRing: {
+        offset: '',
+        width: '',
+      },
+    },
+    select: {
+      focusRing: {
+        offset: '',
+        width: '',
+      },
+    },
+    switch: {
+      focusRing: {
+        width: '',
+        offset: '',
+      },
+      height: '',
+      width: '',
+      padding: '',
+      transitionDurationMs: '',
+      transitionTimingFunction: '',
+    },
+    text: {
+      focusRing: {
+        offset: '',
+        width: '',
+      },
+    },
+  },
+  radius: {
+    ..._fromEntries(RADIUS.map((r) => [r, ''])),
+  },
+  shadow: {
+    ..._fromEntries(
+      SHADOW.map((s) => [
+        s,
+        {
+          umbra: '',
+          penumbra: '',
+          ambient: '',
+        },
+      ]),
+    ),
+  },
+  space: {
+    ..._fromEntries(SPACE.map((s) => [s, ''])),
+  },
+}) satisfies _CSSThemeWithoutPalette
+
+/**
+ * Variables to be defined in a theme.
+ *
+ * @public */
+export const themeVars = {
+  ..._themeVars,
+  color: {
+    ..._themeVars.color,
+    palette: paletteVars,
+  },
+}
+
+/**
+ * Variables to be used.
+ *
+ * @public
+ */
+export const vars = {
+  ...themeVars,
+  avatar: {
+    ...themeVars.avatar,
+    distance: createVar(),
+    size: createVar(),
+  },
+  arrow: {
+    size: createVar(),
+  },
+  button: {
+    ...themeVars.button,
+    boxShadow: createVar(),
+  },
+  color: {
+    ...themeVars.color,
+    avatar: {
+      bg: createVar(),
+      fg: createVar(),
+      // colors
+      ..._fromEntries(AVATAR_COLORS.map((c) => [c, {bg: createVar(), fg: createVar()}])),
+    },
+    backdrop: createVar(),
+    bg: createVar(),
+    border: createVar(),
+    code: {
+      fg: createVar(),
+      bg: createVar(),
+      token: {
+        atrule: createVar(),
+        attrName: createVar(),
+        attrValue: createVar(),
+        attribute: createVar(),
+        boolean: createVar(),
+        builtin: createVar(),
+        cdata: createVar(),
+        char: createVar(),
+        class: createVar(),
+        className: createVar(),
+        comment: createVar(),
+        constant: createVar(),
+        deleted: createVar(),
+        doctype: createVar(),
+        entity: createVar(),
+        function: createVar(),
+        hexcode: createVar(),
+        id: createVar(),
+        important: createVar(),
+        inserted: createVar(),
+        keyword: createVar(),
+        number: createVar(),
+        operator: createVar(),
+        prolog: createVar(),
+        property: createVar(),
+        pseudoClass: createVar(),
+        pseudoElement: createVar(),
+        punctuation: createVar(),
+        regex: createVar(),
+        selector: createVar(),
+        string: createVar(),
+        symbol: createVar(),
+        tag: createVar(),
+        unit: createVar(),
+        url: createVar(),
+        variable: createVar(),
+      },
+    },
+    fg: createVar(),
+    focusRing: createVar(),
+    input: {
+      checkbox: {
+        bg: createVar(),
+        border: createVar(),
+        fg: createVar(),
+      },
+      text: {
+        bg: createVar(),
+        border: createVar(),
+        fg: createVar(),
+        placeholder: createVar(),
+      },
+      radio: {
+        bg: createVar(),
+        border: createVar(),
+        fg: createVar(),
+      },
+      switch: {
+        bg: createVar(),
+        fg: createVar(),
+      },
+    },
+    link: {
+      fg: createVar(),
+    },
+    muted: {
+      bg: createVar(),
+      border: createVar(),
+      fg: createVar(),
+    },
+    shadow: {
+      outline: createVar(),
+      umbra: createVar(),
+      penumbra: createVar(),
+      ambient: createVar(),
+    },
+    skeleton: {
+      from: createVar(),
+      to: createVar(),
+    },
+    // variants
+    ..._fromEntries(
+      COLOR_VARIANTS.map((v) => [
+        v,
+        {
+          ..._fromEntries(
+            THEME_COLOR_STATE_TONES.map((t) => [
+              t,
+              {
+                bg: {
+                  0: createVar(),
+                  1: createVar(),
+                  2: createVar(),
+                  3: createVar(),
+                  4: createVar(),
+                },
+                border: {
+                  0: createVar(),
+                  1: createVar(),
+                  2: createVar(),
+                  3: createVar(),
+                  4: createVar(),
+                },
+                fg: {
+                  0: createVar(),
+                  1: createVar(),
+                  2: createVar(),
+                  3: createVar(),
+                  4: createVar(),
+                },
+              },
+            ]),
+          ),
+        },
+      ]),
+    ),
+
+    // tones
+    ..._fromEntries(
+      THEME_COLOR_CARD_TONES.map((t) => [
+        t,
+        {
+          avatar: {
+            ..._fromEntries(AVATAR_COLORS.map((c) => [c, {bg: createVar(), fg: createVar()}])),
+          },
+          backdrop: createVar(),
+          code: {
+            fg: createVar(),
+            bg: createVar(),
+            token: {
+              atrule: createVar(),
+              attrName: createVar(),
+              attrValue: createVar(),
+              attribute: createVar(),
+              boolean: createVar(),
+              builtin: createVar(),
+              cdata: createVar(),
+              char: createVar(),
+              class: createVar(),
+              className: createVar(),
+              comment: createVar(),
+              constant: createVar(),
+              deleted: createVar(),
+              doctype: createVar(),
+              entity: createVar(),
+              function: createVar(),
+              hexcode: createVar(),
+              id: createVar(),
+              important: createVar(),
+              inserted: createVar(),
+              keyword: createVar(),
+              number: createVar(),
+              operator: createVar(),
+              prolog: createVar(),
+              property: createVar(),
+              pseudoClass: createVar(),
+              pseudoElement: createVar(),
+              punctuation: createVar(),
+              regex: createVar(),
+              selector: createVar(),
+              string: createVar(),
+              symbol: createVar(),
+              tag: createVar(),
+              unit: createVar(),
+              url: createVar(),
+              variable: createVar(),
+            },
+          },
+          bg: createVar(),
+          border: createVar(),
+          fg: createVar(),
+          focusRing: createVar(),
+          link: {
+            fg: createVar(),
+          },
+          muted: {
+            bg: createVar(),
+            border: createVar(),
+            fg: createVar(),
+          },
+          shadow: {
+            outline: createVar(),
+            umbra: createVar(),
+            penumbra: createVar(),
+            ambient: createVar(),
+          },
+          skeleton: {
+            from: createVar(),
+            to: createVar(),
+          },
+          ..._fromEntries(
+            COLOR_VARIANTS.map((v) => [
+              v,
+              {
+                ..._fromEntries(
+                  THEME_COLOR_STATE_TONES.map((t) => [
+                    t,
+                    {
+                      bg: {
+                        0: createVar(),
+                        4: createVar(),
+                      },
+                      border: {
+                        0: createVar(),
+                        4: createVar(),
+                      },
+                      fg: {
+                        0: createVar(),
+                        4: createVar(),
+                      },
+                    },
+                  ]),
+                ),
+              },
+            ]),
+          ),
+        },
+      ]),
+    ),
+  },
+  font: {
+    ...themeVars.font,
+    family: createVar(),
+    featureSettings: createVar(),
+    fontSize: createVar(),
+    lineHeight: createVar(),
+    letterSpacing: createVar(),
+    fontWeight: createVar(),
+    ascenderHeight: createVar(),
+    descenderHeight: createVar(),
+    capHeight: createVar(),
+    iconSize: createVar(),
+    iconOffset: createVar(),
+    customIconOffset: createVar(),
+    customIconSize: createVar(),
+    skeleton: {
+      ascenderHeight: createVar(),
+      descenderHeight: createVar(),
+      lineHeight: createVar(),
+    },
+    weight: {
+      regular: createVar(),
+      medium: createVar(),
+      semibold: createVar(),
+      bold: createVar(),
+    },
+  },
+  input: {
+    ...themeVars.input,
+    switch: {
+      ...themeVars.input.switch,
+      thumb: {
+        offset: createVar(),
+        size: createVar(),
+      },
+    },
+    text: {
+      ...themeVars.input.text,
+      fontSize: createVar(),
+      lineHeight: createVar(),
+      letterSpacing: createVar(),
+      ascenderHeight: createVar(),
+      descenderHeight: createVar(),
+      padding: createVar(),
+      gap: createVar(),
+    },
+  },
+}

package/src/theme/v3/buildTheme_v3.ts

@@ -1,10 +1,11 @@
 import {black, hues, white} from '@sanity/color'
 
+import type {ThemeShadow} from '../v0'
 import {defaultThemeConfig} from '../v2/defaults/config'
 import {defaultThemeFonts} from './defaultFonts'
 import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
-import type {Radius, Space, Theme_v3, ThemeOptions} from './types'
+import type {Radius, Shadow, Space, Theme_v3, ThemeOptions} from './types'
 
 /** @public */
 export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
@@ -27,7 +28,11 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
     palette: {black, white, hues},
     // TODO
     radius: (v2?.radius ?? defaultThemeConfig.radius) as unknown as Record<Radius, number>,
-    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
+    // TODO
+    shadow: (v2?.shadow ?? defaultThemeConfig.shadow) as unknown as Record<
+      Shadow,
+      ThemeShadow | undefined
+    >,
     // TODO
     space: (v2?.space ?? defaultThemeConfig.space) as unknown as Record<Space, number>,
   }