@kanso-labs/kanso-ui 0.42.2 → 0.43.1

package/README.md

@@ -491,6 +491,11 @@ default value — useful for discovering names, not required at runtime
 import '@kanso-labs/kanso-ui/tokens.css'
 ```
 
+The tokens themselves, as the
+[W3C Design Tokens (DTCG)](https://design-tokens.github.io/community-group/format/)
+source they are built from, are published as `@kanso-labs/kanso-ui/tokens.json`,
+for a library or tool that builds its own output from the same values.
+
 ### A scheme from Material Theme Builder
 
 The colour roles are Material Design's, so a whole scheme can come from
@@ -562,29 +567,34 @@ every colour role `tokens.css` lists.
 The tokens resolve once, on `:root`, and every component inherits them already
 resolved, so a `--kui-*` property redeclared on a smaller element — a wrapping
 `<div>` — reaches nothing on its own. `ThemeScope` resolves them again on an
-element of its own. An override declared on the scope, through `className` or
-`style`, or on any element around it, reaches every component inside, and the
-rest of the page keeps its own tokens:
-
-```css
-.accent {
-  --kui-color-primary: #7d5260;
-  --kui-color-on-primary: #ffffff;
-}
-```
+element of its own. An override handed to the scope's `theme`, or declared on it
+through `className` or `style`, or on any element around it, reaches every
+component inside, and the rest of the page keeps its own tokens:
 
 ```tsx
-import { Select, ThemeScope } from '@kanso-labs/kanso-ui'
+import { type KuiTheme, Select, ThemeScope } from '@kanso-labs/kanso-ui'
+
+const accent: KuiTheme = {
+  '--kui-color-on-primary': '#ffffff',
+  '--kui-color-primary': '#7d5260',
+}
 
 function Section() {
   return (
-    <ThemeScope className="accent">
+    <ThemeScope theme={accent}>
       <Select label="Label">…</Select>
     </ThemeScope>
   )
 }
 ```
 
+`KuiTheme` is the list `tokens.css` declares, as a type: every property is
+optional, takes a value in CSS syntax, and shows its default in an editor. A
+class carrying the same declarations does the same job, for an app that would
+rather keep them in a stylesheet. `theme` holds one value per property for both
+schemes, so a theme with a light and a dark value is two maps, the scope handed
+the one for the scheme in use.
+
 `scheme` pins the scope to `'light'` or `'dark'`, whatever the OS asks for. Left
 unset, the scope keeps the scheme around it, so a scope inside a dark page stays
 dark.

package/dist/index.d.ts

@@ -87,5 +87,6 @@ import "./components/index.js";
 import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, Key, ListLayout, PressEvent, Pressable, RouterProvider, Selection, SharedElement, SharedElementTransition, SortDescriptor, TableLayout, TokenFieldValue, Virtualizer, VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter, useListData, useLocale, useTreeData } from "./react-aria.js";
+import { KuiTheme } from "./tokens/theme.js";
 import { ThemeScope, ThemeScopeProps } from "./theme-scope.js";
-export { AppBar, type AppBarProps, type AppBarScroll, type AppBarScrollOptions, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type Key, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, LoadingIndicator, type LoadingIndicatorProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, SharedElement, SharedElementTransition, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, type SliderSize, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, type SortDescriptor, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLayout, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, TimeField, type TimeFieldProps, TimePicker, type TimePickerMode, type TimePickerProps, TokenField, type TokenFieldProps, TokenFieldValue, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, colorScheme, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, themeScope, useAppBarScroll, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, type AppBarProps, type AppBarScroll, type AppBarScrollOptions, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type Key, Keycap, type KeycapProps, type KuiTheme, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, LoadingIndicator, type LoadingIndicatorProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorInset, type SeparatorProps, SharedElement, SharedElementTransition, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, type SliderSize, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, type SortDescriptor, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLayout, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, ThemeScope, type ThemeScopeProps, TimeField, type TimeFieldProps, TimePicker, type TimePickerMode, type TimePickerProps, TokenField, type TokenFieldProps, TokenFieldValue, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, colorScheme, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, themeScope, useAppBarScroll, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/theme-scope.d.ts

@@ -1,4 +1,5 @@
 import { RenderComponentProps } from "./render/useRender.js";
+import { KuiTheme } from "./tokens/theme.js";
 //#region src/theme-scope.d.ts
 type ThemeScopeProps = RenderComponentProps<'div'> & {
   /**
@@ -10,20 +11,31 @@ type ThemeScopeProps = RenderComponentProps<'div'> & {
    * pins, or the OS's.
    */
   scheme?: 'dark' | 'light' | undefined;
+  /**
+   * `--kui-*` overrides for everything inside, as a map of the custom
+   * properties `tokens.css` lists to CSS values. The scope declares them on
+   * its own element, as an override in `style` would be, with `style` winning
+   * where the two set the same property.
+   *
+   * The values hold for both schemes. To give light and dark a value each,
+   * keep two maps and hand the scope the one for the scheme in use.
+   */
+  theme?: KuiTheme | undefined;
 };
 /**
  * Themes what is inside it, overlays included.
  *
- * A `--kui-*` override declared on the scope — through `className` or
- * `style` — or on any element around it reaches every component inside,
+ * A `--kui-*` override declared on the scope — through `theme`, `className`
+ * or `style` — or on any element around it reaches every component inside,
  * where on any element but `<html>` it would otherwise reach none, since the
  * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts
  * opened inside portal into the scope rather than into the body, so they
  * follow it too. The rest of the page keeps its own tokens.
  *
  * ```tsx
- * // .accent { --kui-color-primary: #7d5260; }
- * <ThemeScope className="accent" scheme="dark">
+ * const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }
+ *
+ * <ThemeScope scheme="dark" theme={accent}>
  *   <Select label="Label">…</Select>
  * </ThemeScope>
  * ```
@@ -37,7 +49,7 @@ type ThemeScopeProps = RenderComponentProps<'div'> & {
  * `render` swaps the element, for a scope that should be a `<main>`, a
  * `<section>`, or the `<body>` itself.
  */
-declare function ThemeScope({ children, render, scheme, ...props }: ThemeScopeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ThemeScope({ children, render, scheme, theme, ...props }: ThemeScopeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { ThemeScope, type ThemeScopeProps };
+export { type KuiTheme, ThemeScope, type ThemeScopeProps };
 //# sourceMappingURL=theme-scope.d.ts.map

package/dist/theme-scope.js

@@ -20,16 +20,17 @@ const schemes = {
 /**
 * Themes what is inside it, overlays included.
 *
-* A `--kui-*` override declared on the scope — through `className` or
-* `style` — or on any element around it reaches every component inside,
+* A `--kui-*` override declared on the scope — through `theme`, `className`
+* or `style` — or on any element around it reaches every component inside,
 * where on any element but `<html>` it would otherwise reach none, since the
 * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts
 * opened inside portal into the scope rather than into the body, so they
 * follow it too. The rest of the page keeps its own tokens.
 *
 * ```tsx
-* // .accent { --kui-color-primary: #7d5260; }
-* <ThemeScope className="accent" scheme="dark">
+* const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }
+*
+* <ThemeScope scheme="dark" theme={accent}>
 *   <Select label="Label">…</Select>
 * </ThemeScope>
 * ```
@@ -45,7 +46,7 @@ const schemes = {
 */
 function ThemeScope(t0) {
 	const $ = c(17);
-	const { children, render, scheme, ...props$1 } = t0;
+	const { children, render, scheme, theme, ...props$1 } = t0;
 	const [container, setContainer] = useState(null);
 	let t1;
 	if ($[0] !== container) {
@@ -55,7 +56,13 @@ function ThemeScope(t0) {
 	} else t1 = $[1];
 	const getContainer = t1;
 	const t2 = "div";
-	const t3 = mergeStyles(props(styles.root, tokenScope, scheme !== void 0 && schemes[scheme], scheme !== void 0 && pinnedScheme[scheme]), props$1);
+	const t3 = mergeStyles(props(styles.root, tokenScope, scheme !== void 0 && schemes[scheme], scheme !== void 0 && pinnedScheme[scheme]), theme === void 0 ? props$1 : {
+		...props$1,
+		style: {
+			...theme,
+			...props$1.style
+		}
+	});
 	let t4;
 	if ($[2] !== children || $[3] !== getContainer) {
 		t4 = /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {

package/dist/theme-scope.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","useRender","mergeStyles","pinnedScheme","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","ThemeScope","t0","$","children","render","props","container","setContainer","t1","getContainer","t2","t3","undefined","t4","t5","t6","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { pinnedScheme } from './styles/scheme';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along. A pinned scheme paints the scope's\n// surface and sets its `color-scheme` too; see src/styles/scheme.ts.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is the scope's own last child,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. A pinned scope paints its own surface and text in\n   * that scheme and sets `color-scheme` for the native controls inside, so\n   * it reads on any page. Left unset, the scope paints nothing and keeps the\n   * scheme around it: the one an enclosing scope or the `<html>` element\n   * pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n};\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `className` or\n * `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * // .accent { --kui-color-primary: #7d5260; }\n * <ThemeScope className=\"accent\" scheme=\"dark\">\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, or the `<body>` itself.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme], scheme !== undefined && pinnedScheme[scheme]), props),\n      children: <>\n          <PortalProvider getContainer={getContainer}>\n            {children}\n          </PortalProvider>\n          <div className=\"x9f619 xjp7ctv\" ref={setContainer} />\n        </>\n    },\n    render\n  });\n}\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":";;;;;;;;;;;AA8BA,MAAMc,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,UAAU;CACdC,MAAMR;CACNS,OAAOR;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAAW,WAAAC,IAAA;CAAA,MAAAC,IAAAxB,EAAA,EAAA;CAAoB,MAAA,EAAAyB,UAAAC,QAAAL,QAAA,GAAAM,YAAAJ;CAUlB,MAAA,CAAAK,WAAAC,gBAAkC1B,SAAgC,IAAI;CAAE,IAAA2B;CAAA,IAAAN,EAAA,OAAAI,WAAA;EACvCE,WAAMF;EAASJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhD,MAAAO,eAAqBD;CAEH,MAAAE,KAAA;CAGX,MAAAC,KAAAzB,YAAYP,MAAaY,OAAMC,MAAOF,YAAYS,WAAWa,KAAAA,KAAajB,QAAQI,SAASA,WAAWa,KAAAA,KAAazB,aAAaY,OAAO,GAAGM,OAAK;CAAC,IAAAQ;CAAA,IAAAX,EAAA,OAAAC,YAAAD,EAAA,OAAAO,cAAA;EAE/II,KAAA,oBAACS,uBAAD;GAA8Bb;GAC3BN;EADY,CAAA;EAEED,EAAA,KAAAC;EAAAD,EAAA,KAAAO;EAAAP,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAK,cAAA;EACjBO,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAsBP,KAAAA;EAAY,CAAA;EAAIL,EAAA,KAAAK;EAAAL,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAW,MAAAX,EAAA,OAAAY,IAAA;EAJ/CC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACNF,IAGAC,EAAqD,EAAA,CAAA;EACpDZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,WAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAa,IAAA;EARAC,KAAA;GAAA,GACFX;GAAK,GACLM;GAAgJR,UACzIY;EAMZ;EAACb,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAE,UAAAF,EAAA,QAAAc,IAAA;EAXcC,KAAA;GAAAC,gBACCR;GAAKL,OACdW;GASNZ;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAbMjB,UAAUgC,EAahB;AAAC"}
+{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","KuiTheme","useRender","mergeStyles","pinnedScheme","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","theme","ThemeScope","t0","$","children","render","props","container","setContainer","t1","getContainer","t2","t3","undefined","style","t4","t5","t6","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport type { KuiTheme } from './tokens/theme';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { pinnedScheme } from './styles/scheme';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along. A pinned scheme paints the scope's\n// surface and sets its `color-scheme` too; see src/styles/scheme.ts.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is the scope's own last child,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. A pinned scope paints its own surface and text in\n   * that scheme and sets `color-scheme` for the native controls inside, so\n   * it reads on any page. Left unset, the scope paints nothing and keeps the\n   * scheme around it: the one an enclosing scope or the `<html>` element\n   * pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n  /**\n   * `--kui-*` overrides for everything inside, as a map of the custom\n   * properties `tokens.css` lists to CSS values. The scope declares them on\n   * its own element, as an override in `style` would be, with `style` winning\n   * where the two set the same property.\n   *\n   * The values hold for both schemes. To give light and dark a value each,\n   * keep two maps and hand the scope the one for the scheme in use.\n   */\n  theme?: KuiTheme | undefined;\n};\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `theme`, `className`\n * or `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }\n *\n * <ThemeScope scheme=\"dark\" theme={accent}>\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, or the `<body>` itself.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  theme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme], scheme !== undefined && pinnedScheme[scheme]), theme === undefined ? props : {\n        ...props,\n        style: {\n          ...theme,\n          ...props.style\n        }\n      }),\n      children: <>\n          <PortalProvider getContainer={getContainer}>\n            {children}\n          </PortalProvider>\n          <div className=\"x9f619 xjp7ctv\" ref={setContainer} />\n        </>\n    },\n    render\n  });\n}\nexport type { KuiTheme } from './tokens/theme';\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":";;;;;;;;;;;AA+BA,MAAMe,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,UAAU;CACdC,MAAMR;CACNS,OAAOR;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAAY,WAAAC,IAAA;CAAA,MAAAC,IAAA1B,EAAA,EAAA;CAAoB,MAAA,EAAA2B,UAAAC,QAAAN,QAAAC,OAAA,GAAAM,YAAAJ;CAWlB,MAAA,CAAAK,WAAAC,gBAAkC5B,SAAgC,IAAI;CAAE,IAAA6B;CAAA,IAAAN,EAAA,OAAAI,WAAA;EACvCE,WAAMF;EAASJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhD,MAAAO,eAAqBD;CAEH,MAAAE,KAAA;CAGX,MAAAC,KAAA1B,YAAYR,MAAaa,OAAMC,MAAOF,YAAYS,WAAWc,KAAAA,KAAalB,QAAQI,SAASA,WAAWc,KAAAA,KAAa1B,aAAaY,OAAO,GAAGC,UAAUa,KAAAA,IAAVP,UAAA;EAAA,GACxIA;EAAKQ,OACD;GAAA,GACFd;GAAK,GACLM,QAAKQ;EACV;CACF,CAAC;CAAC,IAAAC;CAAA,IAAAZ,EAAA,OAAAC,YAAAD,EAAA,OAAAO,cAAA;EAEEK,KAAA,oBAACS,uBAAD;GAA8Bd;GAC3BN;EADY,CAAA;EAEED,EAAA,KAAAC;EAAAD,EAAA,KAAAO;EAAAP,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAK,cAAA;EACjBQ,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAsBR,KAAAA;EAAY,CAAA;EAAIL,EAAA,KAAAK;EAAAL,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAY,MAAAZ,EAAA,OAAAa,IAAA;EAJ/CC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACNF,IAGAC,EAAqD,EAAA,CAAA;EACpDb,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;EAAAb,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAG,WAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAc,IAAA;EAdAC,KAAA;GAAA,GACFZ;GAAK,GACLM;GAMDR,UACQa;EAMZ;EAACd,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAE,UAAAF,EAAA,QAAAe,IAAA;EAjBcC,KAAA;GAAAC,gBACCT;GAAKL,OACdY;GAeNb;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OAnBMlB,UAAUkC,EAmBhB;AAAC"}

package/dist/tokens/theme.d.ts

@@ -0,0 +1,395 @@
+//#region src/tokens/theme.d.ts
+/**
+ * A theme: any of the `--kui-*` custom properties `tokens.css` lists, each set
+ * to a value in CSS syntax. Hand one to `ThemeScope`'s `theme` prop, and every
+ * component inside reads it.
+ *
+ * The values hold for both schemes. A theme with a value of its own for light
+ * and for dark is two of these, with the scope handed the one for the scheme
+ * in use.
+ */
+type KuiTheme = {
+  /** Defaults to `#fef7ff` in the light scheme and `#141218` in the dark. */
+  readonly '--kui-color-background'?: string;
+  /** Defaults to `#b3261e` in the light scheme and `#f2b8b5` in the dark. */
+  readonly '--kui-color-error'?: string;
+  /** Defaults to `#f9dedc` in the light scheme and `#8c1d18` in the dark. */
+  readonly '--kui-color-error-container'?: string;
+  /** Defaults to `#f5eff7` in the light scheme and `#322f35` in the dark. */
+  readonly '--kui-color-inverse-on-surface'?: string;
+  /** Defaults to `#d0bcff` in the light scheme and `#6750a4` in the dark. */
+  readonly '--kui-color-inverse-primary'?: string;
+  /** Defaults to `#322f35` in the light scheme and `#e6e0e9` in the dark. */
+  readonly '--kui-color-inverse-surface'?: string;
+  /** Defaults to `#a04022` in the light scheme and `#ffb59f` in the dark. */
+  readonly '--kui-color-negative'?: string;
+  /** Defaults to `#ffdbd1` in the light scheme and `#81290c` in the dark. */
+  readonly '--kui-color-negative-container'?: string;
+  /** Defaults to `#1d1b20` in the light scheme and `#e6e0e9` in the dark. */
+  readonly '--kui-color-on-background'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#601410` in the dark. */
+  readonly '--kui-color-on-error'?: string;
+  /** Defaults to `#410e0b` in the light scheme and `#f9dedc` in the dark. */
+  readonly '--kui-color-on-error-container'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#5f1600` in the dark. */
+  readonly '--kui-color-on-negative'?: string;
+  /** Defaults to `#3a0a00` in the light scheme and `#ffdbd1` in the dark. */
+  readonly '--kui-color-on-negative-container'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#003827` in the dark. */
+  readonly '--kui-color-on-positive'?: string;
+  /** Defaults to `#002115` in the light scheme and `#90f6ca` in the dark. */
+  readonly '--kui-color-on-positive-container'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#381e72` in the dark. */
+  readonly '--kui-color-on-primary'?: string;
+  /** Defaults to `#21005d` in the light scheme and `#eaddff` in the dark. */
+  readonly '--kui-color-on-primary-container'?: string;
+  /** Defaults to `#21005d`. */
+  readonly '--kui-color-on-primary-fixed'?: string;
+  /** Defaults to `#4f378b`. */
+  readonly '--kui-color-on-primary-fixed-variant'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#332d41` in the dark. */
+  readonly '--kui-color-on-secondary'?: string;
+  /** Defaults to `#1d192b` in the light scheme and `#e8def8` in the dark. */
+  readonly '--kui-color-on-secondary-container'?: string;
+  /** Defaults to `#1d192b`. */
+  readonly '--kui-color-on-secondary-fixed'?: string;
+  /** Defaults to `#4a4458`. */
+  readonly '--kui-color-on-secondary-fixed-variant'?: string;
+  /** Defaults to `#1d1b20` in the light scheme and `#e6e0e9` in the dark. */
+  readonly '--kui-color-on-surface'?: string;
+  /** Defaults to `#49454f` in the light scheme and `#cac4d0` in the dark. */
+  readonly '--kui-color-on-surface-variant'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#492532` in the dark. */
+  readonly '--kui-color-on-tertiary'?: string;
+  /** Defaults to `#31111d` in the light scheme and `#ffd8e4` in the dark. */
+  readonly '--kui-color-on-tertiary-container'?: string;
+  /** Defaults to `#31111d`. */
+  readonly '--kui-color-on-tertiary-fixed'?: string;
+  /** Defaults to `#633b48`. */
+  readonly '--kui-color-on-tertiary-fixed-variant'?: string;
+  /** Defaults to `#79747e` in the light scheme and `#938f99` in the dark. */
+  readonly '--kui-color-outline'?: string;
+  /** Defaults to `#cac4d0` in the light scheme and `#49454f` in the dark. */
+  readonly '--kui-color-outline-variant'?: string;
+  /** Defaults to `#006c4d` in the light scheme and `#74d9af` in the dark. */
+  readonly '--kui-color-positive'?: string;
+  /** Defaults to `#90f6ca` in the light scheme and `#00513a` in the dark. */
+  readonly '--kui-color-positive-container'?: string;
+  /** Defaults to `#6750a4` in the light scheme and `#d0bcff` in the dark. */
+  readonly '--kui-color-primary'?: string;
+  /** Defaults to `#eaddff` in the light scheme and `#4f378b` in the dark. */
+  readonly '--kui-color-primary-container'?: string;
+  /** Defaults to `#eaddff`. */
+  readonly '--kui-color-primary-fixed'?: string;
+  /** Defaults to `#d0bcff`. */
+  readonly '--kui-color-primary-fixed-dim'?: string;
+  /** Defaults to `#000000`. */
+  readonly '--kui-color-scrim'?: string;
+  /** Defaults to `#625b71` in the light scheme and `#ccc2dc` in the dark. */
+  readonly '--kui-color-secondary'?: string;
+  /** Defaults to `#e8def8` in the light scheme and `#4a4458` in the dark. */
+  readonly '--kui-color-secondary-container'?: string;
+  /** Defaults to `#e8def8`. */
+  readonly '--kui-color-secondary-fixed'?: string;
+  /** Defaults to `#ccc2dc`. */
+  readonly '--kui-color-secondary-fixed-dim'?: string;
+  /** Defaults to `#000000`. */
+  readonly '--kui-color-shadow'?: string;
+  /** Defaults to `#fef7ff` in the light scheme and `#141218` in the dark. */
+  readonly '--kui-color-surface'?: string;
+  /** Defaults to `#fef7ff` in the light scheme and `#3b383e` in the dark. */
+  readonly '--kui-color-surface-bright'?: string;
+  /** Defaults to `#f3edf7` in the light scheme and `#211f26` in the dark. */
+  readonly '--kui-color-surface-container'?: string;
+  /** Defaults to `#ece6f0` in the light scheme and `#2b2930` in the dark. */
+  readonly '--kui-color-surface-container-high'?: string;
+  /** Defaults to `#e6e0e9` in the light scheme and `#36343b` in the dark. */
+  readonly '--kui-color-surface-container-highest'?: string;
+  /** Defaults to `#f7f2fa` in the light scheme and `#1d1b20` in the dark. */
+  readonly '--kui-color-surface-container-low'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#0f0d13` in the dark. */
+  readonly '--kui-color-surface-container-lowest'?: string;
+  /** Defaults to `#ded8e1` in the light scheme and `#141218` in the dark. */
+  readonly '--kui-color-surface-dim'?: string;
+  /** Defaults to `#6750a4` in the light scheme and `#d0bcff` in the dark. */
+  readonly '--kui-color-surface-tint'?: string;
+  /** Defaults to `#e7e0ec` in the light scheme and `#49454f` in the dark. */
+  readonly '--kui-color-surface-variant'?: string;
+  /** Defaults to `#7d5260` in the light scheme and `#efb8c8` in the dark. */
+  readonly '--kui-color-tertiary'?: string;
+  /** Defaults to `#ffd8e4` in the light scheme and `#633b48` in the dark. */
+  readonly '--kui-color-tertiary-container'?: string;
+  /** Defaults to `#ffd8e4`. */
+  readonly '--kui-color-tertiary-fixed'?: string;
+  /** Defaults to `#efb8c8`. */
+  readonly '--kui-color-tertiary-fixed-dim'?: string;
+  /** Defaults to `450ms`. */
+  readonly '--kui-motion-duration-long1'?: string;
+  /** Defaults to `500ms`. */
+  readonly '--kui-motion-duration-long2'?: string;
+  /** Defaults to `600ms`. */
+  readonly '--kui-motion-duration-long3'?: string;
+  /** Defaults to `250ms`. */
+  readonly '--kui-motion-duration-medium1'?: string;
+  /** Defaults to `300ms`. */
+  readonly '--kui-motion-duration-medium2'?: string;
+  /** Defaults to `350ms`. */
+  readonly '--kui-motion-duration-medium3'?: string;
+  /** Defaults to `100ms`. */
+  readonly '--kui-motion-duration-short1'?: string;
+  /** Defaults to `150ms`. */
+  readonly '--kui-motion-duration-short2'?: string;
+  /** Defaults to `200ms`. */
+  readonly '--kui-motion-duration-short3'?: string;
+  /** Defaults to `cubic-bezier(0.2, 0, 0, 1)`. */
+  readonly '--kui-motion-easing-emphasized'?: string;
+  /** Defaults to `cubic-bezier(0.3, 0, 0.8, 0.15)`. */
+  readonly '--kui-motion-easing-emphasized-accelerate'?: string;
+  /** Defaults to `cubic-bezier(0.05, 0.7, 0.1, 1)`. */
+  readonly '--kui-motion-easing-emphasized-decelerate'?: string;
+  /** Defaults to `cubic-bezier(0.34, 1.56, 0.64, 1)`. */
+  readonly '--kui-motion-easing-spring-fast'?: string;
+  /** Defaults to `cubic-bezier(0.16, 1, 0.3, 1)`. */
+  readonly '--kui-motion-easing-spring-slow'?: string;
+  /** Defaults to `cubic-bezier(0.2, 0, 0, 1)`. */
+  readonly '--kui-motion-easing-standard'?: string;
+  /** Defaults to `9999px`. */
+  readonly '--kui-radius-circle'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-radius-lg'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-radius-md'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-radius-none'?: string;
+  /** Defaults to `9999px`. */
+  readonly '--kui-radius-pill'?: string;
+  /** Defaults to `8px`. */
+  readonly '--kui-radius-sm'?: string;
+  /** Defaults to `28px`. */
+  readonly '--kui-radius-xl'?: string;
+  /** Defaults to `4px`. */
+  readonly '--kui-radius-xs'?: string;
+  /** Defaults to `0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation1'?: string;
+  /** Defaults to `0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation2'?: string;
+  /** Defaults to `0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation3'?: string;
+  /** Defaults to `0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation4'?: string;
+  /** Defaults to `0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation5'?: string;
+  /** Defaults to `56px`. */
+  readonly '--kui-sizing-control-lg'?: string;
+  /** Defaults to `48px`. */
+  readonly '--kui-sizing-control-md'?: string;
+  /** Defaults to `40px`. */
+  readonly '--kui-sizing-control-sm'?: string;
+  /** Defaults to `96px`. */
+  readonly '--kui-sizing-control-xl'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-sizing-control-xs'?: string;
+  /** Defaults to `136px`. */
+  readonly '--kui-sizing-control-xxl'?: string;
+  /** Defaults to `88px`. */
+  readonly '--kui-sizing-row-lg'?: string;
+  /** Defaults to `72px`. */
+  readonly '--kui-sizing-row-md'?: string;
+  /** Defaults to `56px`. */
+  readonly '--kui-sizing-row-sm'?: string;
+  /** Defaults to `48px`. */
+  readonly '--kui-sizing-row-xs'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-spacing-lg'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-spacing-md'?: string;
+  /** Defaults to `8px`. */
+  readonly '--kui-spacing-sm'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-spacing-xl'?: string;
+  /** Defaults to `4px`. */
+  readonly '--kui-spacing-xs'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-spacing-xxl'?: string;
+  /** Defaults to `2px`. */
+  readonly '--kui-spacing-xxs'?: string;
+  /** Defaults to `40px`. */
+  readonly '--kui-spacing-xxxl'?: string;
+  /** Defaults to `0.12`. */
+  readonly '--kui-state-layer-opacity-disabled-container'?: string;
+  /** Defaults to `0.38`. */
+  readonly '--kui-state-layer-opacity-disabled-content'?: string;
+  /** Defaults to `0.16`. */
+  readonly '--kui-state-layer-opacity-dragged'?: string;
+  /** Defaults to `0.1`. */
+  readonly '--kui-state-layer-opacity-focus'?: string;
+  /** Defaults to `0.08`. */
+  readonly '--kui-state-layer-opacity-hover'?: string;
+  /** Defaults to `0.1`. */
+  readonly '--kui-state-layer-opacity-pressed'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-body-large-font'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-typography-body-large-line-height'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-body-large-size'?: string;
+  /** Defaults to `0.5px`. */
+  readonly '--kui-typography-body-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-body-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-body-medium-font'?: string;
+  /** Defaults to `20px`. */
+  readonly '--kui-typography-body-medium-line-height'?: string;
+  /** Defaults to `14px`. */
+  readonly '--kui-typography-body-medium-size'?: string;
+  /** Defaults to `0.25px`. */
+  readonly '--kui-typography-body-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-body-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-body-small-font'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-body-small-line-height'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-typography-body-small-size'?: string;
+  /** Defaults to `0.4px`. */
+  readonly '--kui-typography-body-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-body-small-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-display-large-font'?: string;
+  /** Defaults to `64px`. */
+  readonly '--kui-typography-display-large-line-height'?: string;
+  /** Defaults to `57px`. */
+  readonly '--kui-typography-display-large-size'?: string;
+  /** Defaults to `-0.25px`. */
+  readonly '--kui-typography-display-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-display-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-display-medium-font'?: string;
+  /** Defaults to `52px`. */
+  readonly '--kui-typography-display-medium-line-height'?: string;
+  /** Defaults to `45px`. */
+  readonly '--kui-typography-display-medium-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-display-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-display-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-display-small-font'?: string;
+  /** Defaults to `44px`. */
+  readonly '--kui-typography-display-small-line-height'?: string;
+  /** Defaults to `36px`. */
+  readonly '--kui-typography-display-small-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-display-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-display-small-weight'?: string;
+  /** Defaults to `'Roboto Serif', 'Iowan Old Style', Georgia, serif`. */
+  readonly '--kui-typography-font-family-brand'?: string;
+  /** Defaults to `'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace`. */
+  readonly '--kui-typography-font-family-mono'?: string;
+  /** Defaults to `'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`. */
+  readonly '--kui-typography-font-family-plain'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-headline-large-font'?: string;
+  /** Defaults to `40px`. */
+  readonly '--kui-typography-headline-large-line-height'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-typography-headline-large-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-headline-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-headline-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-headline-medium-font'?: string;
+  /** Defaults to `36px`. */
+  readonly '--kui-typography-headline-medium-line-height'?: string;
+  /** Defaults to `28px`. */
+  readonly '--kui-typography-headline-medium-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-headline-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-headline-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-headline-small-font'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-typography-headline-small-line-height'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-typography-headline-small-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-headline-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-headline-small-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-label-large-font'?: string;
+  /** Defaults to `20px`. */
+  readonly '--kui-typography-label-large-line-height'?: string;
+  /** Defaults to `14px`. */
+  readonly '--kui-typography-label-large-size'?: string;
+  /** Defaults to `0.1px`. */
+  readonly '--kui-typography-label-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-label-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-label-medium-font'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-label-medium-line-height'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-typography-label-medium-size'?: string;
+  /** Defaults to `0.5px`. */
+  readonly '--kui-typography-label-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-label-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-label-small-font'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-label-small-line-height'?: string;
+  /** Defaults to `11px`. */
+  readonly '--kui-typography-label-small-size'?: string;
+  /** Defaults to `0.5px`. */
+  readonly '--kui-typography-label-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-label-small-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-title-large-font'?: string;
+  /** Defaults to `28px`. */
+  readonly '--kui-typography-title-large-line-height'?: string;
+  /** Defaults to `22px`. */
+  readonly '--kui-typography-title-large-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-title-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-title-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-title-medium-font'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-typography-title-medium-line-height'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-title-medium-size'?: string;
+  /** Defaults to `0.15px`. */
+  readonly '--kui-typography-title-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-title-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-title-small-font'?: string;
+  /** Defaults to `20px`. */
+  readonly '--kui-typography-title-small-line-height'?: string;
+  /** Defaults to `14px`. */
+  readonly '--kui-typography-title-small-size'?: string;
+  /** Defaults to `0.1px`. */
+  readonly '--kui-typography-title-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-title-small-weight'?: string;
+  /** Defaults to `700`. */
+  readonly '--kui-typography-weight-bold'?: string;
+  /** Defaults to `500`. */
+  readonly '--kui-typography-weight-medium'?: string;
+  /** Defaults to `400`. */
+  readonly '--kui-typography-weight-regular'?: string;
+};
+//#endregion
+export type { KuiTheme };
+//# sourceMappingURL=theme.d.ts.map