@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/src/css/styles/margin/rules.ts

@@ -3,57 +3,61 @@ import {responsiveRules} from '../../responsiveRules'
 import {type Rules} from '../../types'
 import {vars} from '../../vars'
 
-export const marginRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`m-${space}`, {margin: vars.space[space]}),
-  }
-}, {})
-
-export const marginXRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`mx-${space}`, {
-      marginLeft: vars.space[space],
-      marginRight: vars.space[space],
-    }),
-  }
-}, {})
-
-export const marginYRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`my-${space}`, {
-      marginTop: vars.space[space],
-      marginBottom: vars.space[space],
-    }),
-  }
-}, {})
-
-export const marginTopRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`mt-${space}`, {marginTop: vars.space[space]}),
-  }
-}, {})
-
-export const marginRightRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`mr-${space}`, {marginRight: vars.space[space]}),
-  }
-}, {})
-
-export const marginBottomRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`mb-${space}`, {marginBottom: vars.space[space]}),
-  }
-}, {})
-
-export const marginLeftRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`ml-${space}`, {marginLeft: vars.space[space]}),
-  }
-}, {})
+export const marginRules: Rules = {
+  // NOTE: order matters
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`m-${space}`.replace('.', '_'), {margin: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mx-${space}`.replace('.', '_'), {
+        marginLeft: vars.space[space],
+        marginRight: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`my-${space}`.replace('.', '_'), {
+        marginTop: vars.space[space],
+        marginBottom: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mt-${space}`.replace('.', '_'), {marginTop: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mr-${space}`.replace('.', '_'), {marginRight: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mb-${space}`.replace('.', '_'), {marginBottom: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`ml-${space}`.replace('.', '_'), {marginLeft: vars.space[space]}),
+    }
+  }, {}),
+}

package/src/css/styles/outline/rules.ts

@@ -0,0 +1,7 @@
+import {Rules} from '../../types'
+
+export const outlineRules: Rules = {
+  'outline-none': {
+    outline: 'none',
+  },
+}

package/src/css/styles/overflow/index.ts

@@ -0,0 +1,2 @@
+export * from './overflow'
+export * from './types'

package/src/css/styles/overflow/overflow.ts

@@ -0,0 +1,11 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {OverflowStyleProps} from './types'
+
+export function overflow(props: OverflowStyleProps): string {
+  return composeClassNames(
+    _resp(`overflow`, props.overflow),
+    _resp(`overflow-x`, props.overflowX),
+    _resp(`overflow-y`, props.overflowY),
+  )
+}

package/src/css/styles/overflow/types.ts

@@ -0,0 +1,11 @@
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export type BoxOverflow = 'visible' | 'hidden' | 'auto'
+
+/** @public */
+export interface OverflowStyleProps {
+  overflow?: ResponsiveProp<BoxOverflow>
+  overflowX?: ResponsiveProp<BoxOverflow>
+  overflowY?: ResponsiveProp<BoxOverflow>
+}

package/src/css/styles/padding/rules.ts

@@ -3,57 +3,59 @@ import {responsiveRules} from '../../responsiveRules'
 import {type Rules} from '../../types'
 import {vars} from '../../vars'
 
-export const paddingRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`p-${space}`, {padding: vars.space[space]}),
-  }
-}, {})
+export const paddingRules: Rules = {
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`p-${space}`.replace('.', '_'), {padding: vars.space[space]}),
+    }
+  }, {}),
 
-export const paddingXRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`px-${space}`, {
-      paddingLeft: vars.space[space],
-      paddingRight: vars.space[space],
-    }),
-  }
-}, {})
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`px-${space}`.replace('.', '_'), {
+        paddingLeft: vars.space[space],
+        paddingRight: vars.space[space],
+      }),
+    }
+  }, {}),
 
-export const paddingYRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`py-${space}`, {
-      paddingTop: vars.space[space],
-      paddingBottom: vars.space[space],
-    }),
-  }
-}, {})
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`py-${space}`.replace('.', '_'), {
+        paddingTop: vars.space[space],
+        paddingBottom: vars.space[space],
+      }),
+    }
+  }, {}),
 
-export const paddingTopRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`pt-${space}`, {paddingTop: vars.space[space]}),
-  }
-}, {})
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pt-${space}`.replace('.', '_'), {paddingTop: vars.space[space]}),
+    }
+  }, {}),
 
-export const paddingRightRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`pr-${space}`, {paddingRight: vars.space[space]}),
-  }
-}, {})
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pr-${space}`.replace('.', '_'), {paddingRight: vars.space[space]}),
+    }
+  }, {}),
 
-export const paddingBottomRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`pb-${space}`, {paddingBottom: vars.space[space]}),
-  }
-}, {})
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pb-${space}`.replace('.', '_'), {paddingBottom: vars.space[space]}),
+    }
+  }, {}),
 
-export const paddingLeftRules = SPACE.reduce<Rules>((acc, space) => {
-  return {
-    ...acc,
-    ...responsiveRules(`pl-${space}`, {paddingLeft: vars.space[space]}),
-  }
-}, {})
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pl-${space}`.replace('.', '_'), {paddingLeft: vars.space[space]}),
+    }
+  }, {}),
+}

package/src/css/types.ts

@@ -176,7 +176,7 @@ export type ThemeVarName =
   | '--input-text-focus-ring-width'
   | '--layer-dialog-z-offset'
   | `--radius-${Radius}`
-  | `--space-${Space}`
+  | `--space-${Exclude<Space, 0.5> | '0_5'}`
   | `--shadow-${Shadow}-umbra`
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
@@ -264,15 +264,20 @@ export type CardScopedVarName =
   | `--card-badge-${ThemeColorStateToneKey}-fg-color`
   | `--card-badge-${ThemeColorStateToneKey}-icon-color`
   | `--card-bg-color`
+  | `--card-bg-image`
+  | `--card-bg2-color`
   | `--card-border-color`
   | `--card-code-bg-color`
   | `--card-code-fg-color`
   | `--card-fg-color`
   | `--card-focus-ring-color`
+  | `--card-hairline-soft-color`
+  | `--card-hairline-hard-color`
   | `--card-icon-color`
   | `--card-kbd-bg-color`
   | `--card-kbd-border-color`
   | `--card-kbd-fg-color`
+  | `--card-link-color`
   | `--card-link-fg-color`
   | `--card-muted-bg-color`
   | `--card-muted-fg-color`
@@ -297,12 +302,22 @@ export type CardScopedVarName =
   | `--font-letter-spacing`
   | `--font-line-height`
   | `--font-size`
+  | `--font-skeleton-line-height`
+  | `--font-skeleton-ascender-height`
+  | `--font-skeleton-descender-height`
   | `--font-weight-regular`
   | `--font-weight-medium`
   | `--font-weight-semibold`
   | `--font-weight-bold`
   | `--font-weight`
   | `--fg-color`
+  | `--input-bg-color`
+  | `--input-border-color`
+  | `--input-fg-color`
+  | `--padding-top`
+  | `--padding-right`
+  | `--padding-bottom`
+  | `--padding-left`
 
 // export type CardVarName = `--card-${CardSize}-${CardVariant}-${CardState}-${CardElement}`
 
@@ -581,11 +596,31 @@ export interface ScopedColorVars extends Omit<ColorStateVars, 'badge'> {
   badge: ColorBadgeVars & ColorBadgeToneVars
 }
 
+export interface FontSizeVars {
+  ascenderHeight: CSSVar
+  descenderHeight: CSSVar
+  fontSize: CSSVar
+  lineHeight: CSSVar
+  letterSpacing: CSSVar
+  iconSize: CSSVar
+}
+
+export interface FontVars<Size extends number> {
+  family: CSSVar
+  sizes: Record<Size, FontSizeVars>
+}
+
 /** @public */
 export interface Vars {
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
   } & ScopedColorVars
+  font: {
+    code: FontVars<FontCodeSize>
+    heading: FontVars<FontHeadingSize>
+    label: FontVars<FontLabelSize>
+    text: FontVars<FontTextSize>
+  }
   space: Record<Space, CSSVar>
 }

package/src/css/varNames.ts

@@ -186,7 +186,7 @@ export const varNames: VarNames = {
     },
   },
   space: Object.fromEntries(
-    SPACE.map((space) => [space, `--space-${space}` satisfies CSSVarName]),
+    SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as CSSVarName]),
   ) as Record<Space, CSSVarName>,
 } as const
 

package/src/css/vars.ts

@@ -1,4 +1,11 @@
 import {
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_TEXT_SIZE,
+  FontCodeSize,
+  FontHeadingSize,
+  FontLabelSize,
+  FontTextSize,
   SPACE,
   type Space,
   THEME_COLOR_AVATAR_COLORS,
@@ -12,6 +19,7 @@ import {
   type ThemeColorSchemeKey,
 } from '@sanity/ui/theme'
 import {
+  FontSizeVars,
   type ColorAvatarVars,
   type ColorBadgeVars,
   type ColorCardVars,
@@ -162,6 +170,84 @@ export const vars: Vars = {
       variable: `var(--color-syntax-variable)`,
     },
   },
+  font: {
+    code: {
+      family: `var(--font-code-family)`,
+      sizes: FONT_CODE_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontCodeSize, FontSizeVars>,
+      ),
+    },
+    heading: {
+      family: `var(--font-heading-family)`,
+      sizes: FONT_HEADING_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontHeadingSize, FontSizeVars>,
+      ),
+    },
+    label: {
+      family: `var(--font-label-family)`,
+      sizes: FONT_CODE_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontLabelSize, FontSizeVars>,
+      ),
+    },
+    text: {
+      family: `var(--font-text-family)`,
+      sizes: FONT_TEXT_SIZE.reduce(
+        (acc, size) => {
+          return {
+            ...acc,
+            [size]: {
+              fontSize: `var(--font-code-${size}-size)`,
+              ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+              descenderHeight: `var(--font-code-${size}-descender-height)`,
+              lineHeight: `var(--font-code-${size}-line-height)`,
+              letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+              iconSize: `var(--font-code-${size}-icon-size)`,
+            },
+          }
+        },
+        {} as Record<FontTextSize, FontSizeVars>,
+      ),
+    },
+  },
   space: Object.fromEntries(
     SPACE.map((space) => [space, `var(${varNames.space[space]})` satisfies CSSVar]),
   ) as Record<Space, CSSVar>,