@sanity/ui 2.0.0-alpha.6 → 2.0.0-alpha.8

package/src/theme/lib/theme/color/cssVariables/cardVariables.ts

@@ -49,7 +49,7 @@ const legacyFixedVariables = [
   '--card-link-color',
   '--card-hairline-soft-color',
   '--card-hairline-hard-color',
-  '--card-bg2-color',
+  '--card-border-color',
 ] as const
 
 const allVariables = [...Object.values(mutableCardVariables), ...legacyFixedVariables] as const
@@ -65,20 +65,19 @@ export const cardVariables: Record<CardCssVariable, string> = {
   '--card-shadow-penumbra-color': tonesCssVariables.default['base-shadow-penumbra-color'],
   '--card-shadow-ambient-color': tonesCssVariables.default['base-shadow-ambient-color'],
   '--card-focus-ring-color': tonesCssVariables.positive['bg-accent'],
+
   '--card-icon-color': tonesCssVariables.default['icon-default'],
-  '--card-bg-image': 'inherit',
 
   // Card
   '--card-bg-color': tonesCssVariables.default['bg-base'],
-
+  '--card-bg-image': 'inherit',
   '--card-fg-color': tonesCssVariables.default['text-primary'],
-
+  '--card-border-color': tonesCssVariables.default['border-base'],
   '--card-muted-fg-color': tonesCssVariables.default['text-secondary'],
   '--card-accent-fg-color': tonesCssVariables.default['text-accent'],
   '--card-link-fg-color': tonesCssVariables.default['text-link'],
   '--card-code-bg-color': tonesCssVariables.default['bg-tint-code'],
   '--card-code-fg-color': tonesCssVariables.default['text-code'],
-
   '--card-skeleton-color-from': tonesCssVariables.default['skeleton-from'],
   '--card-skeleton-color-to': tonesCssVariables.default['skeleton-to'],
 
@@ -86,7 +85,4 @@ export const cardVariables: Record<CardCssVariable, string> = {
   '--card-link-color': tonesCssVariables.default['text-link'],
   '--card-hairline-soft-color': tonesCssVariables.default['border-base'],
   '--card-hairline-hard-color': tonesCssVariables.default['border-base'],
-
-  // Card
-  '--card-bg2-color': tonesCssVariables.default['bg-tint'],
 }

package/src/theme/lib/theme/color/cssVariables/cssVars.test.ts

@@ -39,10 +39,10 @@ describe('css variables', () => {
       '--default-border-accent-inverted': '#ffffff',
       '--default-base-bg-card': '#ffffff',
       '--default-base-bg-raw': '#ffffff',
-      '--default-base-shadow-outline-color': 'rgba(120,129,145,0.4)',
-      '--default-base-shadow-umbra-color': 'rgba(120,129,145,0.2)',
-      '--default-base-shadow-penumbra-color': 'rgba(120,129,145,0.14)',
-      '--default-base-shadow-ambient-color': 'rgba(120,129,145,0.12)',
+      '--default-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
+      '--default-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
+      '--default-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
+      '--default-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
       '--default-base-text-color': '#ffffff',
       '--default-skeleton-from': '#f3f4f6',
       '--default-skeleton-to': 'rgba(249,249,250,0.5)',
@@ -69,10 +69,10 @@ describe('css variables', () => {
       '--transparent-border-accent-inverted': '#ffffff',
       '--transparent-base-bg-card': '#f9f9fa',
       '--transparent-base-bg-raw': '#ffffff',
-      '--transparent-base-shadow-outline-color': 'rgba(120,129,145,0.4)',
-      '--transparent-base-shadow-umbra-color': 'rgba(120,129,145,0.2)',
-      '--transparent-base-shadow-penumbra-color': 'rgba(120,129,145,0.14)',
-      '--transparent-base-shadow-ambient-color': 'rgba(120,129,145,0.12)',
+      '--transparent-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
+      '--transparent-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
+      '--transparent-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
+      '--transparent-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
       '--transparent-base-text-color': '#ffffff',
       '--transparent-skeleton-from': '#f3f4f6',
       '--transparent-skeleton-to': 'rgba(249,249,250,0.5)',
@@ -99,10 +99,10 @@ describe('css variables', () => {
       '--primary-border-accent-inverted': '#ffffff',
       '--primary-base-bg-card': '#f9f9fa',
       '--primary-base-bg-raw': '#ffffff',
-      '--primary-base-shadow-outline-color': 'rgba(120,129,145,0.4)',
-      '--primary-base-shadow-umbra-color': 'rgba(120,129,145,0.2)',
-      '--primary-base-shadow-penumbra-color': 'rgba(120,129,145,0.14)',
-      '--primary-base-shadow-ambient-color': 'rgba(120,129,145,0.12)',
+      '--primary-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
+      '--primary-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
+      '--primary-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
+      '--primary-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
       '--primary-base-text-color': '#ffffff',
       '--primary-skeleton-from': '#f3f4f6',
       '--primary-skeleton-to': 'rgba(249,249,250,0.5)',
@@ -129,10 +129,10 @@ describe('css variables', () => {
       '--positive-border-accent-inverted': '#ffffff',
       '--positive-base-bg-card': '#ebfdff',
       '--positive-base-bg-raw': '#ffffff',
-      '--positive-base-shadow-outline-color': 'rgba(14,207,241,0.4)',
-      '--positive-base-shadow-umbra-color': 'rgba(14,207,241,0.2)',
-      '--positive-base-shadow-penumbra-color': 'rgba(14,207,241,0.14)',
-      '--positive-base-shadow-ambient-color': 'rgba(14,207,241,0.12)',
+      '--positive-base-shadow-outline-color': 'rgba(14,207,241,0.2)',
+      '--positive-base-shadow-umbra-color': 'rgba(14,207,241,0.1)',
+      '--positive-base-shadow-penumbra-color': 'rgba(14,207,241,0.07)',
+      '--positive-base-shadow-ambient-color': 'rgba(14,207,241,0.06)',
       '--positive-base-text-color': '#ffffff',
       '--positive-skeleton-from': '#d2fcfe',
       '--positive-skeleton-to': 'rgba(235,253,255,0.5)',
@@ -159,10 +159,10 @@ describe('css variables', () => {
       '--caution-border-accent-inverted': '#ffffff',
       '--caution-base-bg-card': '#fffdf0',
       '--caution-base-bg-raw': '#ffffff',
-      '--caution-base-shadow-outline-color': 'rgba(243,188,22,0.4)',
-      '--caution-base-shadow-umbra-color': 'rgba(243,188,22,0.2)',
-      '--caution-base-shadow-penumbra-color': 'rgba(243,188,22,0.14)',
-      '--caution-base-shadow-ambient-color': 'rgba(243,188,22,0.12)',
+      '--caution-base-shadow-outline-color': 'rgba(243,188,22,0.2)',
+      '--caution-base-shadow-umbra-color': 'rgba(243,188,22,0.1)',
+      '--caution-base-shadow-penumbra-color': 'rgba(243,188,22,0.07)',
+      '--caution-base-shadow-ambient-color': 'rgba(243,188,22,0.06)',
       '--caution-base-text-color': '#ffffff',
       '--caution-skeleton-from': '#fef7cd',
       '--caution-skeleton-to': 'rgba(255,253,240,0.5)',
@@ -189,10 +189,10 @@ describe('css variables', () => {
       '--critical-border-accent-inverted': '#ffffff',
       '--critical-base-bg-card': '#fff5f5',
       '--critical-base-bg-raw': '#ffffff',
-      '--critical-base-shadow-outline-color': 'rgba(236,70,54,0.4)',
-      '--critical-base-shadow-umbra-color': 'rgba(236,70,54,0.2)',
-      '--critical-base-shadow-penumbra-color': 'rgba(236,70,54,0.14)',
-      '--critical-base-shadow-ambient-color': 'rgba(236,70,54,0.12)',
+      '--critical-base-shadow-outline-color': 'rgba(236,70,54,0.2)',
+      '--critical-base-shadow-umbra-color': 'rgba(236,70,54,0.1)',
+      '--critical-base-shadow-penumbra-color': 'rgba(236,70,54,0.07)',
+      '--critical-base-shadow-ambient-color': 'rgba(236,70,54,0.06)',
       '--critical-base-text-color': '#ffffff',
       '--critical-skeleton-from': '#fee8e7',
       '--critical-skeleton-to': 'rgba(255,245,245,0.5)',
@@ -215,7 +215,7 @@ describe('css variables', () => {
       '--card-link-color': 'var(--default-text-link)',
       '--card-hairline-soft-color': 'var(--default-border-base)',
       '--card-hairline-hard-color': 'var(--default-border-base)',
-      '--card-bg2-color': 'var(--default-bg-tint)',
+      '--card-border-color': 'var(--default-border-base)',
     }
 
     expect(result).toEqual(expected)

package/src/theme/lib/theme/color/cssVariables/tints.ts

@@ -112,22 +112,22 @@ const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
     'base-shadow-outline-color': {
       type: 'colorWithOpacity',
       tint: '500',
-      opacity: 0.4,
+      opacity: 0.2,
     },
     'base-shadow-umbra-color': {
       type: 'colorWithOpacity',
       tint: '500',
-      opacity: 0.2,
+      opacity: 0.1,
     },
     'base-shadow-penumbra-color': {
       type: 'colorWithOpacity',
       tint: '500',
-      opacity: 0.14,
+      opacity: 0.07,
     },
     'base-shadow-ambient-color': {
       type: 'colorWithOpacity',
       tint: '500',
-      opacity: 0.12,
+      opacity: 0.06,
     },
     'skeleton-from': '100',
     'skeleton-to': {

package/src/theme/lib/theme/color/index.ts

@@ -2,3 +2,4 @@ export * from './types'
 
 // Css Variables
 export * from './cssVariables'
+export * from './_legacy'

package/src/theme/studioTheme/theme.ts

@@ -39,7 +39,7 @@ export const studioTheme: RootTheme = {
   shadows: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
     {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
     {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},

package/src/theme/themeProvider.tsx

@@ -2,6 +2,7 @@ import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider, createGlobalStyle} from 'styled-components'
 import {DEFAULT_THEME_LAYER} from './defaults'
 import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
+import {legacyColors} from './lib/theme/color/_legacy/legacyColor'
 import {createCssVars} from './lib/theme/color/cssVariables'
 import {cssObjectToCssString} from './lib/theme/color/cssVariables/utils'
 import {ThemeContext} from './themeContext'
@@ -43,7 +44,7 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
 
     const layer = rootLayer || DEFAULT_THEME_LAYER
 
-    return {sanity: {...restTheme, layer}}
+    return {sanity: {...restTheme, layer, color: {...legacyColors, tones: restTheme.color.tones}}}
   }, [themeProp])
 
   const value: ThemeContextValue | null = useMemo(