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

package/dist/system.css

@@ -11497,7 +11497,7 @@
   text-decoration: none;
 }
 
-.s-selectable.s-surface {
+.s-selectable.s-default {
   --color-tinted-bg-0: var(--color-tinted-default-bg-0);
   --color-tinted-bg-1: var(--color-tinted-default-bg-1);
   --color-tinted-bg-2: var(--color-tinted-default-bg-2);
@@ -12027,7 +12027,7 @@
   opacity: 0.8;
 }
 
-.s-button.s-solid.s-surface {
+.s-button.s-solid.s-default {
   --color-bg: var(--color-solid-default-bg-0);
   --color-border: var(--color-solid-default-border-1);
   --color-fg: var(--color-solid-default-fg-0);
@@ -12035,68 +12035,68 @@
   --button-box-shadow: none;
 }
 
-.s-button.s-solid.s-surface:not([data-disabled]):hover {
+.s-button.s-solid.s-default:not([data-disabled]):hover {
   --color-bg: var(--color-solid-default-bg-1);
   --color-border: var(--color-solid-default-border-2);
   --color-fg: var(--color-solid-default-fg-0);
   --color-muted-fg: var(--color-solid-default-fg-4);
 }
 
-.s-button.s-solid.s-surface:not([data-disabled]):active {
+.s-button.s-solid.s-default:not([data-disabled]):active {
   --color-bg: var(--color-solid-default-bg-2);
   --color-border: var(--color-solid-default-border-3);
   --color-fg: var(--color-solid-default-fg-0);
   --color-muted-fg: var(--color-solid-default-fg-4);
 }
 
-.s-button.s-solid.s-surface:not([data-disabled])[data-selected] {
+.s-button.s-solid.s-default:not([data-disabled])[data-selected] {
   --color-bg: var(--color-solid-default-bg-2);
   --color-border: var(--color-solid-default-border-3);
   --color-fg: var(--color-solid-default-fg-0);
   --color-muted-fg: var(--color-solid-default-fg-4);
 }
 
-.s-button.s-solid.s-surface[data-disabled] {
+.s-button.s-solid.s-default[data-disabled] {
   --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
   --color-muted-fg: var(--color-default-tinted-fg-1);
 }
 
-.s-button.s-ghost.s-surface {
-  --color-bg: var(--color-tinted-default-bg-0);
+.s-button.s-ghost.s-default {
+  --color-bg: var(--color-tinted-default-bg-1);
   --color-border: var(--color-tinted-default-border-1);
   --color-fg: var(--color-tinted-default-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
-.s-button.s-ghost.s-surface:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-default-bg-1);
+.s-button.s-ghost.s-default:not([data-disabled]):hover {
+  --color-bg: var(--color-tinted-default-bg-2);
   --color-border: var(--color-tinted-default-border-2);
   --color-fg: var(--color-tinted-default-fg-1);
 }
 
-.s-button.s-ghost.s-surface:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-default-bg-2);
+.s-button.s-ghost.s-default:not([data-disabled]):active {
+  --color-bg: var(--color-tinted-default-bg-3);
   --color-border: var(--color-tinted-default-border-3);
   --color-fg: var(--color-tinted-default-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
-.s-button.s-ghost.s-surface:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-default-bg-2);
+.s-button.s-ghost.s-default:not([data-disabled])[data-selected] {
+  --color-bg: var(--color-tinted-default-bg-3);
   --color-border: var(--color-tinted-default-border-3);
   --color-fg: var(--color-tinted-default-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
-.s-button.s-ghost.s-surface[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+.s-button.s-ghost.s-default[data-disabled] {
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
 
-.s-button.s-tinted.s-surface {
+.s-button.s-tinted.s-default {
   box-shadow: none;
   --color-bg: var(--color-tinted-default-bg-0);
   --color-border: var(--color-tinted-default-border-1);
@@ -12105,28 +12105,28 @@
   --button-box-shadow: none;
 }
 
-.s-button.s-tinted.s-surface:not([data-disabled]):hover {
+.s-button.s-tinted.s-default:not([data-disabled]):hover {
   --color-bg: var(--color-tinted-default-bg-1);
   --color-border: var(--color-tinted-default-border-2);
   --color-fg: var(--color-tinted-default-fg-1);
   --color-muted-fg: var(--color-tinted-default-fg-3);
 }
 
-.s-button.s-tinted.s-surface:not([data-disabled]):active {
+.s-button.s-tinted.s-default:not([data-disabled]):active {
   --color-bg: var(--color-tinted-default-bg-2);
   --color-border: var(--color-tinted-default-border-3);
   --color-fg: var(--color-tinted-default-fg-1);
   --color-muted-fg: var(--color-tinted-default-fg-3);
 }
 
-.s-button.s-tinted.s-surface:not([data-disabled])[data-selected] {
+.s-button.s-tinted.s-default:not([data-disabled])[data-selected] {
   --color-bg: var(--color-tinted-default-bg-2);
   --color-border: var(--color-tinted-default-border-3);
   --color-fg: var(--color-tinted-default-fg-1);
   --color-muted-fg: var(--color-tinted-default-fg-3);
 }
 
-.s-button.s-tinted.s-surface[data-disabled] {
+.s-button.s-tinted.s-default[data-disabled] {
   --color-bg: var(--color-default-tinted-bg-0);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
@@ -12170,34 +12170,34 @@
 }
 
 .s-button.s-ghost.s-neutral {
-  --color-bg: var(--color-tinted-neutral-bg-0);
+  --color-bg: var(--color-tinted-neutral-bg-1);
   --color-border: var(--color-tinted-neutral-border-1);
   --color-fg: var(--color-tinted-neutral-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-neutral:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-neutral-bg-1);
+  --color-bg: var(--color-tinted-neutral-bg-2);
   --color-border: var(--color-tinted-neutral-border-2);
   --color-fg: var(--color-tinted-neutral-fg-1);
 }
 
 .s-button.s-ghost.s-neutral:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-neutral-bg-2);
+  --color-bg: var(--color-tinted-neutral-bg-3);
   --color-border: var(--color-tinted-neutral-border-3);
   --color-fg: var(--color-tinted-neutral-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-neutral:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-neutral-bg-2);
+  --color-bg: var(--color-tinted-neutral-bg-3);
   --color-border: var(--color-tinted-neutral-border-3);
   --color-fg: var(--color-tinted-neutral-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-neutral[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
@@ -12276,34 +12276,34 @@
 }
 
 .s-button.s-ghost.s-accent {
-  --color-bg: var(--color-tinted-primary-bg-0);
+  --color-bg: var(--color-tinted-primary-bg-1);
   --color-border: var(--color-tinted-primary-border-1);
   --color-fg: var(--color-tinted-primary-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-accent:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-primary-bg-1);
+  --color-bg: var(--color-tinted-primary-bg-2);
   --color-border: var(--color-tinted-primary-border-2);
   --color-fg: var(--color-tinted-primary-fg-1);
 }
 
 .s-button.s-ghost.s-accent:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-primary-bg-2);
+  --color-bg: var(--color-tinted-primary-bg-3);
   --color-border: var(--color-tinted-primary-border-3);
   --color-fg: var(--color-tinted-primary-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-accent:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-primary-bg-2);
+  --color-bg: var(--color-tinted-primary-bg-3);
   --color-border: var(--color-tinted-primary-border-3);
   --color-fg: var(--color-tinted-primary-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-accent[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
@@ -12382,34 +12382,34 @@
 }
 
 .s-button.s-ghost.s-suggest {
-  --color-bg: var(--color-tinted-suggest-bg-0);
+  --color-bg: var(--color-tinted-suggest-bg-1);
   --color-border: var(--color-tinted-suggest-border-1);
   --color-fg: var(--color-tinted-suggest-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-suggest:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-suggest-bg-1);
+  --color-bg: var(--color-tinted-suggest-bg-2);
   --color-border: var(--color-tinted-suggest-border-2);
   --color-fg: var(--color-tinted-suggest-fg-1);
 }
 
 .s-button.s-ghost.s-suggest:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-suggest-bg-2);
+  --color-bg: var(--color-tinted-suggest-bg-3);
   --color-border: var(--color-tinted-suggest-border-3);
   --color-fg: var(--color-tinted-suggest-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-suggest:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-suggest-bg-2);
+  --color-bg: var(--color-tinted-suggest-bg-3);
   --color-border: var(--color-tinted-suggest-border-3);
   --color-fg: var(--color-tinted-suggest-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-suggest[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
@@ -12488,34 +12488,34 @@
 }
 
 .s-button.s-ghost.s-positive {
-  --color-bg: var(--color-tinted-positive-bg-0);
+  --color-bg: var(--color-tinted-positive-bg-1);
   --color-border: var(--color-tinted-positive-border-1);
   --color-fg: var(--color-tinted-positive-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-positive:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-positive-bg-1);
+  --color-bg: var(--color-tinted-positive-bg-2);
   --color-border: var(--color-tinted-positive-border-2);
   --color-fg: var(--color-tinted-positive-fg-1);
 }
 
 .s-button.s-ghost.s-positive:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-positive-bg-2);
+  --color-bg: var(--color-tinted-positive-bg-3);
   --color-border: var(--color-tinted-positive-border-3);
   --color-fg: var(--color-tinted-positive-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-positive:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-positive-bg-2);
+  --color-bg: var(--color-tinted-positive-bg-3);
   --color-border: var(--color-tinted-positive-border-3);
   --color-fg: var(--color-tinted-positive-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-positive[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
@@ -12594,34 +12594,34 @@
 }
 
 .s-button.s-ghost.s-caution {
-  --color-bg: var(--color-tinted-caution-bg-0);
+  --color-bg: var(--color-tinted-caution-bg-1);
   --color-border: var(--color-tinted-caution-border-1);
   --color-fg: var(--color-tinted-caution-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-caution:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-caution-bg-1);
+  --color-bg: var(--color-tinted-caution-bg-2);
   --color-border: var(--color-tinted-caution-border-2);
   --color-fg: var(--color-tinted-caution-fg-1);
 }
 
 .s-button.s-ghost.s-caution:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-caution-bg-2);
+  --color-bg: var(--color-tinted-caution-bg-3);
   --color-border: var(--color-tinted-caution-border-3);
   --color-fg: var(--color-tinted-caution-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-caution:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-caution-bg-2);
+  --color-bg: var(--color-tinted-caution-bg-3);
   --color-border: var(--color-tinted-caution-border-3);
   --color-fg: var(--color-tinted-caution-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-caution[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
@@ -12700,34 +12700,34 @@
 }
 
 .s-button.s-ghost.s-critical {
-  --color-bg: var(--color-tinted-critical-bg-0);
+  --color-bg: var(--color-tinted-critical-bg-1);
   --color-border: var(--color-tinted-critical-border-1);
   --color-fg: var(--color-tinted-critical-fg-2);
-  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
+  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-critical:not([data-disabled]):hover {
-  --color-bg: var(--color-tinted-critical-bg-1);
+  --color-bg: var(--color-tinted-critical-bg-2);
   --color-border: var(--color-tinted-critical-border-2);
   --color-fg: var(--color-tinted-critical-fg-1);
 }
 
 .s-button.s-ghost.s-critical:not([data-disabled]):active {
-  --color-bg: var(--color-tinted-critical-bg-2);
+  --color-bg: var(--color-tinted-critical-bg-3);
   --color-border: var(--color-tinted-critical-border-3);
   --color-fg: var(--color-tinted-critical-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-critical:not([data-disabled])[data-selected] {
-  --color-bg: var(--color-tinted-critical-bg-2);
+  --color-bg: var(--color-tinted-critical-bg-3);
   --color-border: var(--color-tinted-critical-border-3);
   --color-fg: var(--color-tinted-critical-fg-1);
   --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
 }
 
 .s-button.s-ghost.s-critical[data-disabled] {
-  --color-bg: var(--color-default-tinted-bg-0);
+  --color-bg: var(--color-default-tinted-bg-1);
   --color-border: var(--color-default-tinted-border-0);
   --color-fg: var(--color-default-tinted-fg-2);
 }
@@ -17129,7 +17129,7 @@
   --color-critical-tinted-critical-fg-4: var(--color-dark-critical-tinted-critical-fg-4);
 }
 
-.s-card.s-canvas {
+.s-card.s-transparent {
   --color-accent-fg: var(--color-transparent-accent-fg);
   --color-avatar-gray-bg: var(--color-transparent-avatar-gray-bg);
   --color-avatar-gray-fg: var(--color-transparent-avatar-gray-fg);
@@ -17423,7 +17423,7 @@
   --card-hairline-hard-color: var(--color-tinted-default-border-2);
 }
 
-.s-card.s-surface {
+.s-card.s-default {
   --color-accent-fg: var(--color-default-accent-fg);
   --color-avatar-gray-bg: var(--color-default-avatar-gray-bg);
   --color-avatar-gray-fg: var(--color-default-avatar-gray-fg);

package/dist/theme.d.mts

@@ -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
  */
@@ -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

@@ -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
  */
@@ -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 {