@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.30

package/src/theme/studioTheme/tints.ts

@@ -1,152 +0,0 @@
-/**
- * This file creates a translation between the tints and the studio colors
- * Providing readable names, and allowing to mix colors and tints in the same ThemeColor.
- * e.g. for positive theme: `{"bg_base": "white", "bg_base_hover": "gray/50", "bg_base_active": "cyan/50"}
- * This is not possible in the previous configuration, as each ThemeColor uses only one tint.
- */
-import {ColorTintKey, ColorTint, ColorTints, black, hues, white} from '@sanity/color'
-import {ThemeColorName, ThemeColorSchemeKey} from '../lib/theme'
-
-export const colorKeys = [
-  'text_primary',
-  'text_secondary',
-  'text_inactive',
-  'bg_base',
-  'bg_base_hover',
-  'bg_base_active',
-  'bg_accent',
-  'bg_accent_hover',
-  'bg_accent_active',
-  'bg_tint',
-  'icon_default',
-  'icon_inverted',
-  'border_base',
-  'border_accent',
-  'border_accent_inverted',
-] as const
-
-export type ColorKey = (typeof colorKeys)[number]
-
-type ColorTintsDictionary = Record<ColorKey, ColorTint | ColorTintKey>
-const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
-  light: {
-    text_primary: '900',
-    text_secondary: '600',
-    text_inactive: '500',
-    bg_base: white,
-    bg_base_hover: '50',
-    bg_base_active: '100',
-    bg_accent: '500',
-    bg_accent_hover: '600',
-    bg_accent_active: '700',
-    bg_tint: '50',
-    icon_default: '500',
-    icon_inverted: white,
-    border_base: '100',
-    border_accent: '500',
-    border_accent_inverted: white,
-  },
-  dark: {
-    text_primary: '50',
-    text_secondary: '300',
-    text_inactive: '400',
-    bg_base: black,
-    bg_base_hover: '900',
-    bg_base_active: '800',
-    bg_accent: '500',
-    bg_accent_hover: '400',
-    bg_accent_active: '300',
-    bg_tint: '900',
-    icon_default: '300',
-    icon_inverted: hues.gray[900],
-    border_base: '800',
-    border_accent: '300',
-    border_accent_inverted: hues.gray[900],
-  },
-}
-
-export const colorTints: Record<
-  ThemeColorSchemeKey,
-  Record<ThemeColorName, ColorTintsDictionary>
-> = {
-  light: {
-    default: {
-      ...defaultTints.light,
-      bg_accent: '900',
-      bg_accent_hover: '950',
-      bg_accent_active: black,
-      border_accent: '600',
-    },
-    primary: {
-      ...defaultTints.light,
-      bg_accent: '900',
-      bg_accent_hover: '950',
-      bg_accent_active: black,
-      border_accent: '600',
-    },
-    positive: {
-      ...defaultTints.light,
-      bg_base_hover: hues.gray[50],
-      bg_base_active: '50',
-      bg_accent: '400',
-      bg_accent_hover: '500',
-      bg_accent_active: '600',
-      border_accent: '400',
-    },
-    transparent: defaultTints.light,
-    caution: defaultTints.light,
-    critical: defaultTints.light,
-  },
-  dark: {
-    default: {
-      ...defaultTints.dark,
-      text_primary: white,
-      bg_accent: white,
-      bg_accent_hover: '50',
-      bg_accent_active: '100',
-    },
-    primary: {
-      ...defaultTints.dark,
-      text_primary: white,
-      bg_accent: white,
-      bg_accent_hover: '50',
-      bg_accent_active: '100',
-    },
-    positive: {
-      ...defaultTints.dark,
-      bg_base_hover: hues.gray[900],
-      bg_base_active: '900',
-      bg_accent: '400',
-      bg_accent_hover: '300',
-      bg_accent_active: '200',
-      border_accent: '400',
-    },
-    transparent: defaultTints.dark,
-    caution: defaultTints.dark,
-    critical: defaultTints.dark,
-  },
-}
-
-export const getColorValue = (
-  tints: ColorTints,
-  dark: boolean,
-  tone: ThemeColorName,
-  key: ColorKey,
-): ColorTint => {
-  const value = colorTints[dark ? 'dark' : 'light'][tone][key]
-
-  if (typeof value === 'string') {
-    return tints[value]
-  }
-
-  return value
-}
-
-export const getColorHex = (
-  tints: ColorTints,
-  dark: boolean,
-  tone: ThemeColorName,
-  key: ColorKey,
-): string => {
-  return getColorValue(tints, dark, tone, key).hex
-}

package/src/theme/types.ts

@@ -1,47 +0,0 @@
-import {CSSObject} from '../types/styled'
-import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
-
-/**
- * @public
- */
-export type RootTheme = BaseTheme<Styles>
-
-/**
- * TODO: Rename to `ThemeStyles`
- * @public
- */
-export interface Styles {
-  button?: {
-    root?: CSSObject
-  }
-  card?: {
-    root?: CSSObject
-  }
-}
-
-/**
- * @public
- */
-export interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
-    color: ThemeColor
-  }
-}
-
-/**
- * @public
- */
-export interface ThemeContextValue {
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorName
-}
-
-/**
- * @public
- */
-export interface FocusRing {
-  offset: number
-  width: number
-}

package/src/types/badge.ts

@@ -1,9 +0,0 @@
-/**
- * @public
- */
-export type BadgeMode = 'default' | 'outline'
-
-/**
- * @public
- */
-export type BadgeTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/button.ts

@@ -1,14 +0,0 @@
-/**
- * @public
- */
-export type ButtonMode = 'default' | 'ghost' | 'bleed'
-
-/**
- * @public
- */
-export type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- */
-export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/card.ts

@@ -1,6 +0,0 @@
-import {ThemeColorToneKey} from '../theme'
-
-/**
- * @public
- */
-export type CardTone = ThemeColorToneKey | 'inherit'

package/src/types/selectable.ts

@@ -1,4 +0,0 @@
-/**
- * @public
- */
-export type SelectableTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/styled.ts

@@ -1,9 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Workaround types that are missing in v6
-// https://github.com/styled-components/styled-components/issues/4062
-
-import type {StyledObject} from 'styled-components'
-
-/** @internal */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type CSSObject = StyledObject<any>