@sanity/ui 3.0.0-static.2 → 3.0.0-static.4

package/dist/theme.d.mts

@@ -258,10 +258,10 @@ export declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
 export declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
 
 /** @public */
-export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5]
+export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5, 'auto']
 
 /** @public */
-export declare type ContainerWidth = (typeof CONTAINER)[number] | 'auto' | 'fill'
+export declare type ContainerWidth = (typeof CONTAINER)[number]
 
 /**
  * @public
@@ -280,8 +280,6 @@ export declare type CSSObject = StyledObject<any>
 
 declare type CSSVariableKey = `--${string}`
 
-export declare const defaultPalette: PaletteConfig
-
 export declare const defaultTokens: PartialTokens<Tokens>
 
 /** @public */
@@ -423,24 +421,6 @@ export declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB
  */
 export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
 
-export declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
 /**
  * @internal
  */
@@ -471,7 +451,7 @@ export declare type PartialTokens<T> = T extends [ColorToken, ColorToken]
 export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 /** @public */
-export declare type Radius = (typeof RADIUS)[number] | 'full'
+export declare type Radius = (typeof RADIUS)[number]
 
 export declare function renderColor(
   token: [ColorToken, ColorToken],
@@ -746,7 +726,6 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
  */
 export declare interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -1780,7 +1759,6 @@ export declare interface ThemeLayer {
 /** @public */
 export declare interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
@@ -1807,27 +1785,7 @@ export declare interface ThemeStyles {
 
 export declare type Tint = (typeof TINTS)[number]
 
-export declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
+export declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
 /** @internal */
 export declare interface TokenBaseKeyNode {

package/dist/theme.d.ts

@@ -258,10 +258,10 @@ export declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
 export declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
 
 /** @public */
-export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5]
+export declare const CONTAINER: readonly [0, 1, 2, 3, 4, 5, 'auto']
 
 /** @public */
-export declare type ContainerWidth = (typeof CONTAINER)[number] | 'auto' | 'fill'
+export declare type ContainerWidth = (typeof CONTAINER)[number]
 
 /**
  * @public
@@ -280,8 +280,6 @@ export declare type CSSObject = StyledObject<any>
 
 declare type CSSVariableKey = `--${string}`
 
-export declare const defaultPalette: PaletteConfig
-
 export declare const defaultTokens: PartialTokens<Tokens>
 
 /** @public */
@@ -423,24 +421,6 @@ export declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB
  */
 export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
 
-export declare type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<
-    Hue,
-    {
-      h: number
-      c: number
-    }
-  >
-}
-
 /**
  * @internal
  */
@@ -471,7 +451,7 @@ export declare type PartialTokens<T> = T extends [ColorToken, ColorToken]
 export declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 /** @public */
-export declare type Radius = (typeof RADIUS)[number] | 'full'
+export declare type Radius = (typeof RADIUS)[number]
 
 export declare function renderColor(
   token: [ColorToken, ColorToken],
@@ -746,7 +726,6 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
  */
 export declare interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -1780,7 +1759,6 @@ export declare interface ThemeLayer {
 /** @public */
 export declare interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
@@ -1807,27 +1785,7 @@ export declare interface ThemeStyles {
 
 export declare type Tint = (typeof TINTS)[number]
 
-export declare const TINTS: readonly [
-  50,
-  100,
-  150,
-  200,
-  250,
-  300,
-  350,
-  400,
-  450,
-  500,
-  550,
-  600,
-  650,
-  700,
-  750,
-  800,
-  850,
-  900,
-  950,
-]
+export declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
 /** @internal */
 export declare interface TokenBaseKeyNode {

package/dist/theme.js

@@ -13,7 +13,7 @@ function isColorTintKey(str) {
 function isColorButtonMode(str) {
   return v3_v2.THEME_COLOR_BUTTON_MODES.includes(str);
 }
-const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
+const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
 function createSelectableTones(opts, base, dark, solid, muted) {
   return {
     default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
@@ -1185,7 +1185,7 @@ const defaultThemeConfig = {
       zOffset: 200
     }
   },
-  radius: [0, 1, 5, 9, 13, 17, 25, 45, 77, 129],
+  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [null, {
     umbra: [0, 0, 0, 0],
     penumbra: [0, 0, 0, 0],
@@ -1301,10 +1301,10 @@ const defaultThemeConfig = {
     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",
     weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900
     },
     sizes: [{
       ascenderHeight: 5,
@@ -1447,7 +1447,7 @@ const defaultThemeConfig = {
       letterSpacing: 0
     }]
   }
-}, HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
+}, HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
 function parseColor$1(str) {
   let cursor = 0;
   const color2 = getColor();
@@ -1670,54 +1670,7 @@ function buildColorElement_v3(tokens, options) {
     }
   };
 }
-const defaultPalette = {
-  chroma: {
-    min: 5e-3,
-    max: 0.2325
-  },
-  luminosity: {
-    min: 0.1875,
-    max: 1
-  },
-  hues: {
-    gray: {
-      h: 277,
-      c: 0.04
-    },
-    blue: {
-      h: 273,
-      c: 0.185
-    },
-    purple: {
-      h: 295,
-      c: 0.4
-    },
-    magenta: {
-      h: 12,
-      c: 0.4
-    },
-    red: {
-      h: 30,
-      c: 0.4
-    },
-    orange: {
-      h: 68,
-      c: 0.4
-    },
-    yellow: {
-      h: 90,
-      c: 0.4
-    },
-    green: {
-      h: 171,
-      c: 0.4
-    },
-    cyan: {
-      h: 194,
-      c: 0.4
-    }
-  }
-}, defaultTokens = {
+const defaultTokens = {
   color: {
     "*": {
       // backdrop: ['black/0.2', '200/0.2'],
@@ -1773,12 +1726,12 @@ const defaultPalette = {
         tinted: {
           "*": {
             bg: {
-              0: ["900", "50"],
-              4: ["800", "150"]
+              0: ["950", "50"],
+              4: ["800", "100"]
             },
             border: {
-              0: ["800", "150"],
-              4: ["600", "350"]
+              0: ["800", "100"],
+              4: ["600", "300"]
             },
             fg: {
               0: ["100", "900"],
@@ -1850,15 +1803,15 @@ const defaultPalette = {
           "*": {
             bg: {
               0: ["black", "gray/50"],
-              4: ["900", "150"]
+              4: ["800", "300 50%"]
             },
             border: {
-              0: ["900", "150"],
-              4: ["700", "350"]
+              0: ["900", "100"],
+              4: ["700", "300"]
             },
             fg: {
-              0: ["150", "black"],
-              4: ["550", "600"]
+              0: ["100", "black"],
+              4: ["500", "600"]
             }
           }
         }
@@ -1870,11 +1823,11 @@ const defaultPalette = {
           "*": {
             bg: {
               0: ["gray/950", "white"],
-              4: ["850", "100"]
+              4: ["800", "200"]
             },
             border: {
-              0: ["850", "100"],
-              4: ["650", "300"]
+              0: ["800", "100"],
+              4: ["600", "300"]
             },
             fg: {
               0: ["white", "black"],
@@ -2077,7 +2030,6 @@ function buildTheme_v3(options) {
   } = options ?? {}, tokens = resolveTokens(options?.tokens ?? defaultTokens);
   return {
     _version: 3,
-    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,
@@ -2953,7 +2905,6 @@ exports.buildColor_v3 = buildColor_v3;
 exports.buildTheme = buildTheme;
 exports.buildTheme_v3 = buildTheme_v3;
 exports.createColorTheme = createColorTheme;
-exports.defaultPalette = defaultPalette;
 exports.defaultTokens = defaultTokens;
 exports.getContrastRatio = getContrastRatio;
 exports.getScopedTheme = getScopedTheme;