@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/core/styles/input/textInputStyle.ts

@@ -0,0 +1,232 @@
+import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {CardTone} from '../../types'
+import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+
+/**
+ * @internal
+ */
+export interface TextInputInputStyleProps {
+  $fontSize: number[]
+  $scheme: ThemeColorSchemeKey
+  $tone: CardTone
+  $weight?: ThemeFontWeightKey
+}
+
+/**
+ * @internal
+ */
+export interface TextInputRepresentationStyleProps {
+  $hasPrefix?: boolean
+  $hasSuffix?: boolean
+  $scheme: ThemeColorSchemeKey
+  $tone: CardTone
+  $unstableDisableFocusRing?: boolean
+}
+
+const ROOT_STYLE = css`
+  &:not([hidden]) {
+    display: flex;
+  }
+
+  align-items: center;
+`
+
+export function textInputRootStyle(): ReturnType<typeof css> {
+  return ROOT_STYLE
+}
+
+export function textInputBaseStyle(
+  props: TextInputInputStyleProps & ThemeProps,
+): ReturnType<typeof css> {
+  const {$scheme, $tone, $weight} = props
+  const {color, font} = getTheme_v2(props.theme)
+
+  return css`
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: ${font.text.family};
+    font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular};
+    margin: 0;
+    position: relative;
+    z-index: 1;
+    display: block;
+
+    /* NOTE: This is a hack to disable Chrome’s autofill styles */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-text-fill-color: var(--input-fg-color) !important;
+      transition: background-color 5000s;
+      transition-delay: 86400s /* 24h */;
+    }
+
+    /* &:is(textarea) */
+    &[data-as='textarea'] {
+      resize: none;
+    }
+
+    color: var(--input-fg-color);
+
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --input-fg-color: ${color.input.default.enabled.fg};
+      --input-placeholder-color: ${color.input.default.enabled.placeholder};
+
+      /* enabled */
+      &:not(:invalid):not(:disabled):not(:read-only) {
+        --input-fg-color: ${color.input.default.enabled.fg};
+        --input-placeholder-color: ${color.input.default.enabled.placeholder};
+      }
+
+      /* disabled */
+      &:not(:invalid):disabled {
+        --input-fg-color: ${color.input.default.disabled.fg};
+        --input-placeholder-color: ${color.input.default.disabled.placeholder};
+      }
+
+      /* invalid */
+      &:invalid {
+        --input-fg-color: ${color.input.invalid.enabled.fg};
+        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
+      }
+
+      /* readOnly */
+      &:read-only {
+        --input-fg-color: ${color.input.default.readOnly.fg};
+        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
+      }
+    }
+  `
+}
+
+export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
+  const {font, media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$fontSize, (sizeIndex) => {
+    const size = font.text.sizes[sizeIndex] || font.text.sizes[2]
+
+    return {
+      fontSize: rem(size.fontSize),
+      lineHeight: size.lineHeight / size.fontSize,
+    }
+  })
+}
+
+export function textInputRepresentationStyle(
+  props: TextInputRepresentationStyleProps & ThemeProps,
+): ReturnType<typeof css> {
+  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing} = props
+  const {color, input} = getTheme_v2(props.theme)
+
+  return css`
+    --input-box-shadow: none;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    pointer-events: none;
+    z-index: 0;
+
+    background-color: var(--card-bg-color);
+    box-shadow: var(--input-box-shadow);
+
+    border-top-left-radius: ${$hasPrefix ? 0 : undefined};
+    border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
+    border-top-right-radius: ${$hasSuffix ? 0 : undefined};
+    border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --card-bg-color: ${color.input.default.enabled.bg};
+      --card-fg-color: ${color.input.default.enabled.fg};
+
+      /* enabled */
+      *:not(:disabled) + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
+          color: color.input.default.enabled.border,
+          width: input.border.width,
+        })};
+      }
+
+      /* invalid */
+      *:not(:disabled):invalid + & {
+        --card-bg-color: ${color.input.invalid.enabled.bg};
+        --card-fg-color: ${color.input.invalid.enabled.fg};
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.enabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
+      /* focused */
+      *:not(:disabled):focus + & {
+        &[data-border] {
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({
+                border: {color: color.input.default.enabled.border, width: input.border.width},
+                focusRing: input.text.focusRing,
+              })};
+        }
+
+        &:not([data-border]) {
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({focusRing: input.text.focusRing})};
+        }
+      }
+
+      /* disabled */
+      *:disabled + & {
+        --card-bg-color: ${color.input.default.disabled.bg} !important;
+        --card-fg-color: ${color.input.default.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.default.disabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
+      /* readOnly */
+      *:read-only + & {
+        --card-bg-color: ${color.input.default.readOnly.bg} !important;
+        --card-fg-color: ${color.input.default.readOnly.fg} !important;
+      }
+
+      /* hovered */
+      @media (hover: hover) {
+        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+          --card-bg-color: ${color.input.default.hovered.bg};
+          --card-fg-color: ${color.input.default.hovered.fg};
+        }
+
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.default.hovered.border,
+            width: input.border.width,
+          })};
+        }
+      }
+    }
+  `
+}

package/src/{styles → core/styles}/margin/marginStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveMarginStyleProps} from './types'

package/src/{styles → core/styles}/margin/marginsStyle.test.ts

@@ -1,9 +1,9 @@
 /** @jest-environment jsdom */
 
-import {studioTheme, Theme} from '../../theme'
+import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
 import {responsiveMarginStyle} from './marginStyle'
 
-const theme: Theme = {sanity: studioTheme}
+const theme = getScopedTheme(defaultTheme, 'light', 'default')
 
 describe('styles/margin', () => {
   it('should 1', () => {

package/src/{styles → core/styles}/padding/paddingStyle.test.ts

@@ -1,9 +1,9 @@
 /** @jest-environment jsdom */
 
-import {studioTheme, Theme} from '../../theme'
+import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
-const theme: Theme = {sanity: studioTheme}
+const theme = getScopedTheme(defaultTheme, 'light', 'default')
 
 describe('styles/padding', () => {
   it('should 1', () => {

package/src/{styles → core/styles}/padding/paddingStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsivePaddingStyleProps} from './types'

package/src/{styles → core/styles}/radius/radiusStyle.ts

@@ -1,11 +1,10 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveRadiusStyleProps} from './types'
 
 export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media, radius} = theme.sanity
+  const {media, radius} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$radius, (value) => {
     let borderRadius: string | 0 = 0

package/src/core/styles/shadow/shadowStyle.ts

@@ -0,0 +1,29 @@
+import {ThemeBoxShadow, ThemeShadow, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+import {EMPTY_RECORD} from '../../constants'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveShadowStyleProps} from './types'
+
+function toBoxShadow(shadow: ThemeBoxShadow, color: string) {
+  return `${shadow.map(rem).join(' ')} ${color}`
+}
+
+function shadowStyle(shadow: ThemeShadow | null, outlineWidth: number = 1): CSSObject {
+  if (!shadow) return EMPTY_RECORD
+
+  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`
+  const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)')
+  const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)')
+  const ambient = toBoxShadow(shadow.ambient, 'var(--card-shadow-ambient-color)')
+
+  return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
+}
+
+export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
+  const {card, media, shadow} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$shadow, (index) =>
+    shadowStyle(shadow[index], card.shadow.outline),
+  )
+}

package/src/{styles → core/styles}/types.ts

@@ -1,4 +1,4 @@
-import {Theme} from '../theme'
+import {Theme} from '@sanity/ui/theme'
 
 /**
  * @internal

package/src/core/theme/__workshop__/build/Root.tsx

@@ -0,0 +1,350 @@
+import {css, styled} from 'styled-components'
+import {getTheme_v2} from '../../../../theme'
+
+export const Root = styled.div((props) => {
+  const {button, card, input} = getTheme_v2(props.theme)
+
+  return css`
+    background: #000;
+    font-family:
+      Inter,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+    font-size: 13px;
+    line-height: 9px;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    user-select: none;
+
+    pre {
+      font: inherit;
+      font-family: 'SF Mono', Menlo, monospace;
+      margin: 0;
+      padding: 0;
+    }
+
+    .base {
+      background-color: var(--bg);
+      color: var(--fg);
+    }
+
+    .button {
+      --border-width: ${button.border.width}px;
+
+      --bg: var(--button-enabled-bg);
+      --fg: var(--button-enabled-fg);
+      --icon: var(--button-enabled-icon);
+      --border: var(--button-enabled-border);
+      --muted-bg: var(--button-enabled-muted-bg);
+      --muted-fg: var(--button-enabled-muted-fg);
+      --accent-fg: var(--button-enabled-accent-fg);
+      --link-fg: var(--button-enabled-link-fg);
+      --code-bg: var(--button-enabled-code-bg);
+      --code-fg: var(--button-enabled-code-fg);
+      --skeleton-from: var(--button-enabled-skeleton-from);
+      --skeleton-to: var(--button-enabled-skeleton-to);
+
+      background-color: var(--bg);
+      color: var(--fg);
+      box-shadow: inset 0 0 0 var(--border-width) var(--border);
+      text-align: center;
+      border-radius: var(--radius-2);
+      font-weight: 500;
+      cursor: default;
+      transition: box-shadow 50ms ease-in-out;
+      outline: none;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        --bg: var(--button-hovered-bg);
+        --fg: var(--button-hovered-fg);
+        --icon: var(--button-hovered-icon);
+        --border: var(--button-hovered-border);
+        --muted-bg: var(--button-hovered-muted-bg);
+        --muted-fg: var(--button-hovered-muted-fg);
+        --accent-fg: var(--button-hovered-accent-fg);
+        --link-fg: var(--button-hovered-link-fg);
+        --code-bg: var(--button-hovered-code-bg);
+        --code-fg: var(--button-hovered-code-fg);
+        --skeleton-from: var(--button-hovered-skeleton-from);
+        --skeleton-to: var(--button-hovered-skeleton-to);
+      }
+
+      &:focus-visible {
+        box-shadow:
+          inset 0 0 0 var(--border-width) var(--border),
+          0 0 0 1px var(--base-bg),
+          0 0 0 3px var(--focus-ring);
+
+        --bg: var(--button-hovered-bg);
+        --fg: var(--button-hovered-fg);
+        --icon: var(--button-hovered-icon);
+        --border: var(--button-hovered-border);
+        --muted-bg: var(--button-hovered-muted-bg);
+        --muted-fg: var(--button-hovered-muted-fg);
+        --accent-fg: var(--button-hovered-accent-fg);
+        --link-fg: var(--button-hovered-link-fg);
+        --code-bg: var(--button-hovered-code-bg);
+        --code-fg: var(--button-hovered-code-fg);
+        --skeleton-from: var(--button-hovered-skeleton-from);
+        --skeleton-to: var(--button-hovered-skeleton-to);
+      }
+
+      &:active {
+        --bg: var(--button-pressed-bg);
+        --fg: var(--button-pressed-fg);
+        --icon: var(--button-pressed-icon);
+        --border: var(--button-pressed-border);
+        --muted-bg: var(--button-pressed-muted-bg);
+        --muted-fg: var(--button-pressed-muted-fg);
+        --accent-fg: var(--button-pressed-accent-fg);
+        --link-fg: var(--button-pressed-link-fg);
+        --code-bg: var(--button-pressed-code-bg);
+        --code-fg: var(--button-pressed-code-fg);
+        --skeleton-from: var(--button-pressed-skeleton-from);
+        --skeleton-to: var(--button-pressed-skeleton-to);
+      }
+
+      &.selected {
+        --bg: var(--button-selected-bg);
+        --fg: var(--button-selected-fg);
+        --icon: var(--button-selected-icon);
+        --border: var(--button-selected-border);
+        --muted-bg: var(--button-selected-muted-bg);
+        --muted-fg: var(--button-selected-muted-fg);
+        --accent-fg: var(--button-selected-accent-fg);
+        --link-fg: var(--button-selected-link-fg);
+        --code-bg: var(--button-selected-code-bg);
+        --code-fg: var(--button-selected-code-fg);
+        --skeleton-from: var(--button-selected-skeleton-from);
+        --skeleton-to: var(--button-selected-skeleton-to);
+      }
+
+      &.disabled {
+        --bg: var(--button-disabled-bg);
+        --fg: var(--button-disabled-fg);
+        --icon: var(--button-disabled-icon);
+        --border: var(--button-disabled-border);
+        --muted-bg: var(--button-disabled-muted-bg);
+        --muted-fg: var(--button-disabled-muted-fg);
+        --accent-fg: var(--button-disabled-accent-fg);
+        --link-fg: var(--button-disabled-link-fg);
+        --code-bg: var(--button-disabled-code-bg);
+        --code-fg: var(--button-disabled-code-fg);
+        --skeleton-from: var(--button-disabled-skeleton-from);
+        --skeleton-to: var(--button-disabled-skeleton-to);
+      }
+    }
+
+    .card {
+      --border-width: ${card.border.width}px;
+
+      --bg: var(--card-enabled-bg);
+      --fg: var(--card-enabled-fg);
+      --icon: var(--card-enabled-icon);
+      --border: var(--card-enabled-border);
+      --muted-bg: var(--card-enabled-muted-bg);
+      --muted-fg: var(--card-enabled-muted-fg);
+      --accent-fg: var(--card-enabled-accent-fg);
+      --link-fg: var(--card-enabled-link-fg);
+      --code-bg: var(--card-enabled-code-bg);
+      --code-fg: var(--card-enabled-code-fg);
+      --skeleton-from: var(--card-enabled-skeleton-from);
+      --skeleton-to: var(--card-enabled-skeleton-to);
+
+      background-color: var(--bg);
+      color: var(--fg);
+      box-shadow: inset 0 0 0 var(--border-width) var(--border);
+      border-radius: var(--radius-2);
+      font-weight: 500;
+      cursor: default;
+      transition: box-shadow 50ms ease-in-out;
+      outline: none;
+
+      &:hover {
+        --bg: var(--card-hovered-bg);
+        --fg: var(--card-hovered-fg);
+        --icon: var(--card-hovered-icon);
+        --border: var(--card-hovered-border);
+        --muted-bg: var(--card-hovered-muted-bg);
+        --muted-fg: var(--card-hovered-muted-fg);
+        --accent-fg: var(--card-hovered-accent-fg);
+        --link-fg: var(--card-hovered-link-fg);
+        --code-bg: var(--card-hovered-code-bg);
+        --code-fg: var(--card-hovered-code-fg);
+        --skeleton-from: var(--card-hovered-skeleton-from);
+        --skeleton-to: var(--card-hovered-skeleton-to);
+      }
+
+      &:focus-visible {
+        box-shadow:
+          inset 0 0 0 var(--border-width) var(--border),
+          0 0 0 1px var(--base-bg),
+          0 0 0 3px var(--focus-ring);
+
+        /* --bg: var(--card-hovered-bg);
+        --fg: var(--card-hovered-fg);
+        --icon: var(--card-hovered-icon);
+        --border: var(--card-hovered-border);
+        --muted-bg: var(--card-hovered-muted-bg);
+        --muted-fg: var(--card-hovered-muted-fg);
+        --accent-fg: var(--card-hovered-accent-fg);
+        --link-fg: var(--card-hovered-link-fg);
+        --code-bg: var(--card-hovered-code-bg);
+        --code-fg: var(--card-hovered-code-fg);
+        --skeleton-from: var(--card-hovered-skeleton-from);
+        --skeleton-to: var(--card-hovered-skeleton-to); */
+      }
+
+      &:active {
+        --bg: var(--card-pressed-bg);
+        --fg: var(--card-pressed-fg);
+        --icon: var(--card-pressed-icon);
+        --border: var(--card-pressed-border);
+        --muted-bg: var(--card-pressed-muted-bg);
+        --muted-fg: var(--card-pressed-muted-fg);
+        --accent-fg: var(--card-pressed-accent-fg);
+        --link-fg: var(--card-pressed-link-fg);
+        --code-bg: var(--card-pressed-code-bg);
+        --code-fg: var(--card-pressed-code-fg);
+        --skeleton-from: var(--card-pressed-skeleton-from);
+        --skeleton-to: var(--card-pressed-skeleton-to);
+      }
+
+      &.selected {
+        --bg: var(--card-selected-bg);
+        --fg: var(--card-selected-fg);
+        --icon: var(--card-selected-icon);
+        --border: var(--card-selected-border);
+        --muted-bg: var(--card-selected-muted-bg);
+        --muted-fg: var(--card-selected-muted-fg);
+        --accent-fg: var(--card-selected-accent-fg);
+        --link-fg: var(--card-selected-link-fg);
+        --code-bg: var(--card-selected-code-bg);
+        --code-fg: var(--card-selected-code-fg);
+        --skeleton-from: var(--card-selected-skeleton-from);
+        --skeleton-to: var(--card-selected-skeleton-to);
+      }
+
+      &.disabled {
+        --bg: var(--card-disabled-bg);
+        --fg: var(--card-disabled-fg);
+        --icon: var(--card-disabled-icon);
+        --border: var(--card-disabled-border);
+        --muted-bg: var(--card-disabled-muted-bg);
+        --muted-fg: var(--card-disabled-muted-fg);
+        --accent-fg: var(--card-disabled-accent-fg);
+        --link-fg: var(--card-disabled-link-fg);
+        --code-bg: var(--card-disabled-code-bg);
+        --code-fg: var(--card-disabled-code-fg);
+        --skeleton-from: var(--card-disabled-skeleton-from);
+        --skeleton-to: var(--card-disabled-skeleton-to);
+      }
+    }
+
+    .input {
+      background-color: var(--bg);
+      color: var(--fg);
+      padding: var(--space-3);
+      box-shadow: inset 0 0 0 ${input.border.width}px var(--border);
+      font-size: 16px;
+      line-height: 11px;
+      border-radius: var(--radius-2);
+      cursor: default;
+      transition: box-shadow 50ms ease-in-out;
+
+      .placeholder {
+        color: var(--placeholder);
+      }
+
+      --bg: var(--input-enabled-bg);
+      --bg2: var(--input-enabled-bg2);
+      --fg: var(--input-enabled-fg);
+      --border: var(--input-enabled-border);
+      --placeholder: var(--input-enabled-placeholder);
+
+      &:hover {
+        --bg: var(--input-hovered-bg);
+        --bg2: var(--input-hovered-bg2);
+        --fg: var(--input-hovered-fg);
+        --border: var(--input-hovered-border);
+        --placeholder: var(--input-hovered-placeholder);
+      }
+
+      &:focus,
+      &.readOnly:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 1px var(--focus-ring);
+
+        --bg: var(--input-hovered-bg);
+        --bg2: var(--input-hovered-bg2);
+        --fg: var(--input-hovered-fg);
+        --border: var(--input-hovered-border);
+        --placeholder: var(--input-hovered-placeholder);
+      }
+
+      &.readOnly {
+        --bg: var(--input-read-only-bg);
+        --bg2: var(--input-read-only-bg2);
+        --fg: var(--input-read-only-fg);
+        --border: var(--input-read-only-border);
+        --placeholder: var(--input-read-only-placeholder);
+      }
+
+      &.disabled {
+        --bg: var(--input-disabled-bg);
+        --bg2: var(--input-disabled-bg2);
+        --fg: var(--input-disabled-fg);
+        --border: var(--input-disabled-border);
+        --placeholder: var(--input-disabled-placeholder);
+      }
+    }
+
+    .bg2 {
+      background-color: var(--muted-bg);
+    }
+
+    .border {
+      border: 1px solid var(--border);
+    }
+
+    .icon {
+      color: var(--icon);
+    }
+
+    .muted-fg {
+      color: var(--muted-fg);
+    }
+
+    .accent-fg {
+      color: var(--accent-fg);
+    }
+
+    .link-fg {
+      color: var(--link-fg);
+    }
+
+    .code {
+      background-color: var(--code-bg);
+      color: var(--code-fg);
+    }
+
+    .skeleton-from {
+      color: var(--skeleton-from);
+    }
+
+    .skeleton-to {
+      color: var(--skeleton-to);
+    }
+  `
+})