feat: introduce '@sanity/ui/theme' export

.eslintignore

@@ -1,2 +1,4 @@
 .workshop
 dist
+storybook-static
+theme.js

.gitignore

@@ -4,7 +4,7 @@
 .env.local
 .workshop
 dist
+etc
 node_modules
-
-/etc
 storybook-static
+theme.js

.storybook/decorators/withSanityTheme.decorator.tsx

@@ -2,8 +2,8 @@ import {DecoratorHelpers} from '@storybook/addon-themes'
 import {StoryFn} from '@storybook/react'
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
-import {Card} from '../../src/primitives'
-import {studioTheme, ThemeProvider} from '../../src/theme'
+import {Card, ThemeProvider} from '../../src/core'
+import {studioTheme} from '../../src/theme'
 
 const {initializeThemeState, pluckThemeFromContext, useThemeParameters} = DecoratorHelpers
 

exports/index.ts

@@ -0,0 +1,131 @@
+export * from '../src/core'
+
+// re-export for backwards compatibility
+export {
+  buildTheme,
+  COLOR_BASE_TONES,
+  COLOR_BLEND_MODES,
+  COLOR_BUTTON_MODES,
+  COLOR_CONFIG_BASE_KEYS,
+  COLOR_CONFIG_BASE_TONES,
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  COLOR_HUES,
+  COLOR_STATES,
+  COLOR_STATE_TONES,
+  COLOR_TINTS,
+  createColorTheme,
+  hexToRgb,
+  hslToRgb,
+  isColorBlendModeValue,
+  isColorButtonMode,
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+  isColorHueValue,
+  isColorOpacityValue,
+  isColorTintValue,
+  isColorTokenValue,
+  isColorValue,
+  multiply,
+  parseColor,
+  parseTokenKey,
+  parseTokenValue,
+  rgbToHex,
+  rgbToHsl,
+  rgba,
+  rgbaToRGBA,
+  screen,
+  studioTheme,
+  type BaseColorTokens,
+  type BaseTheme,
+  type BoxShadow,
+  type ButtonColorTokens,
+  type ButtonModeColorTokens,
+  type CSSObject,
+  type ColorBaseTone,
+  type ColorBlendModeTokenValue,
+  type ColorBlendModeValue,
+  type ColorButtonMode,
+  type ColorConfigBaseKey,
+  type ColorConfigBaseTone,
+  type ColorConfigBlendKey,
+  type ColorConfigOpacityValue,
+  type ColorConfigStateKey,
+  type ColorConfigStateTone,
+  type ColorConfigValue,
+  type ColorHueValue,
+  type ColorState,
+  type ColorStateTone,
+  type ColorThemeConfig,
+  type ColorTintValue,
+  type ColorTokenValue,
+  type ColorTokens,
+  type FocusRing,
+  type HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB,
+  type RGBA,
+  type RootTheme,
+  type StateColorTokens,
+  type Styles,
+  type TMP_BaseColorTheme,
+  type TMP_ButtonColorTheme,
+  type TMP_ButtonModesColorTheme,
+  type TMP_ButtonStatesColorTheme,
+  type TMP_ColorPalette,
+  type TMP_ColorTheme,
+  type TMP_StateColorTheme,
+  type TMP_Theme,
+  type Theme,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemeKey,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorSyntax,
+  type ThemeColorToneKey,
+  type ThemeConfig,
+  type ThemeFont,
+  type ThemeFontKey,
+  type ThemeFontSize,
+  type ThemeFontWeight,
+  type ThemeFontWeightKey,
+  type ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer,
+  type ThemeShadow,
+  type TokenBaseKeyNode,
+  type TokenBlendModeValueNode,
+  type TokenButtonKeyNode,
+  type TokenColorValueNode,
+  type TokenHueValueNode,
+  type TokenKeyNode,
+  type TokenValueNode,
+} from '@sanity/ui/theme'

exports/theme.ts

@@ -0,0 +1 @@
+export * from '../src/theme'

package.json

@@ -3,13 +3,13 @@
   "version": "2.0.0-alpha.26",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "source": "./src/index.ts",
+  "source": "./exports/index.ts",
   "module": "./dist/index.esm.js",
   "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "source": "./src/index.ts",
+      "source": "./exports/index.ts",
       "require": "./dist/index.js",
       "node": {
         "module": "./dist/index.esm.js",
@@ -18,10 +18,29 @@
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "source": "./exports/theme.ts",
+      "require": "./dist/theme.js",
+      "node": {
+        "module": "./dist/theme.esm.js",
+        "import": "./dist/theme.cjs.mjs"
+      },
+      "import": "./dist/theme.esm.js",
+      "default": "./dist/theme.esm.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/theme.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
+    "exports",
     "src"
   ],
   "license": "MIT",

src/__workshop__/constants.ts → src/core/__workshop__/constants.ts

@@ -13,10 +13,8 @@ import {
   Placement,
   TextAlign,
   TextInputType,
-  ThemeColorSpotKey,
-  ThemeColorToneKey,
-  ThemeFontWeightKey,
 } from '@sanity/ui'
+import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0 (default)': 0,

src/components/dialog/dialog.tsx → src/core/components/dialog/dialog.tsx

@@ -1,4 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {
@@ -11,7 +12,7 @@ import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '
 import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {BORDER_OFFSET_X} from './constants'

src/components/dialog/styles.ts → src/core/components/dialog/styles.ts

@@ -1,7 +1,7 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
-import {CSSObject} from '../../types/styled'
 
 /**
  * @internal

src/components/menu/menu.test.tsx → src/core/components/menu/menu.test.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 

src/components/menu/menuButton.tsx → src/core/components/menu/menuButton.tsx

@@ -1,7 +1,7 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, useRef} from 'react'
 import {isElement} from 'react-is'
 import {Popover, PopoverProps} from '../../primitives'
-import {ThemeColorSchemeKey} from '../../theme'
 import {Placement, Radius} from '../../types'
 import {MenuProps} from './menu'
 

src/components/skeleton/textSkeleton.tsx → src/core/components/skeleton/textSkeleton.tsx

@@ -1,8 +1,8 @@
+import {Theme, ThemeFontKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {_responsive} from '../../styles'
-import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(({

src/components/toast/toast.test.tsx → src/core/components/toast/toast.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
 import {useToast} from './useToast'

src/components/toast/toast.tsx → src/core/components/toast/toast.tsx

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ThemeColorToneKey} from '../../theme'
 
 /**
  * @public

src/components/tree/treeItem.tsx → src/core/components/tree/treeItem.tsx

@@ -1,8 +1,8 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {ThemeFontWeightKey} from '../../theme'
 import {
   treeItemRootStyle,
   treeItemRootColorStyle,

src/hooks/useMediaIndex/useMediaIndex.test.tsx → src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,6 +1,7 @@
 /** @jest-environment node */
+import {studioTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {studioTheme, ThemeProvider} from '../../theme'
+import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
 function Log() {

src/primitives/avatar/avatar.tsx → src/core/primitives/avatar/avatar.tsx

@@ -1,8 +1,9 @@
+import {ThemeColorSpotKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {ThemeColorSpotKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Text} from '../text'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'

src/primitives/avatar/styles.ts → src/core/primitives/avatar/styles.ts

@@ -1,6 +1,6 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
-import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {

src/primitives/badge/badge.test.tsx → src/core/primitives/badge/badge.test.tsx

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {

src/primitives/badge/styles.ts → src/core/primitives/badge/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {BadgeStyleProps} from './types'
 
 export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {

src/primitives/button/button.test.tsx → src/core/primitives/button/button.test.tsx

@@ -3,7 +3,7 @@
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Button, ButtonProps} from './button'
 
 describe('atoms/button', () => {

src/primitives/button/styles.ts → src/core/primitives/button/styles.ts

@@ -1,9 +1,9 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-import {CSSObject} from '../../types/styled'
 
 /**
  * @internal

src/primitives/card/__workshop__/selected.tsx → src/core/primitives/card/__workshop__/selected.tsx

@@ -1,16 +1,6 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Inline,
-  Stack,
-  Text,
-  Theme,
-  ThemeColorToneKey,
-  useRootTheme,
-} from '@sanity/ui'
+import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
+import {Theme, ThemeColorToneKey} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 

src/primitives/card/card.tsx → src/core/primitives/card/card.tsx

@@ -1,3 +1,4 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
@@ -10,7 +11,7 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme'
+import {ThemeColorProvider, useRootTheme} from '../../theme'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'