@cube-dev/ui-kit 0.0.0-canary-7abbe59 → 0.0.0-canary-4caa7d7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +6 -0
- package/dist/_internal/hooks/use-chained-callback.js +1 -1
- package/dist/_internal/hooks/use-debounced-value.js +1 -1
- package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
- package/dist/_internal/hooks/use-event.js +1 -1
- package/dist/_internal/hooks/use-is-first-render.js +1 -1
- package/dist/_internal/hooks/use-sync-ref.js +1 -1
- package/dist/_internal/hooks/use-timer/timer.js +1 -1
- package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
- package/dist/_internal/hooks/use-warn.js +1 -1
- package/dist/components/Block.js +1 -1
- package/dist/components/CollectionItem.js +1 -1
- package/dist/components/GlobalStyles.js +1 -1
- package/dist/components/GridProvider.js +1 -1
- package/dist/components/HiddenInput.js +1 -1
- package/dist/components/Root.js +1 -1
- package/dist/components/actions/Action/Action.js +1 -1
- package/dist/components/actions/Banner/Banner.js +1 -1
- package/dist/components/actions/Button/Button.js +1 -1
- package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/components/actions/ButtonSplit/ButtonSplit.js +1 -1
- package/dist/components/actions/ButtonSplit/context.js +1 -1
- package/dist/components/actions/CommandMenu/CommandMenu.js +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +1 -1
- package/dist/components/actions/ItemActionContext.js +1 -1
- package/dist/components/actions/ItemButton/ItemButton.js +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.js +1 -1
- package/dist/components/actions/Menu/MenuItem.js +1 -1
- package/dist/components/actions/Menu/MenuSection.js +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/styled.js +1 -1
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +1 -1
- package/dist/components/actions/use-anchored-menu.js +1 -1
- package/dist/components/actions/use-context-menu.js +1 -1
- package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
- package/dist/components/content/Alert/Alert.js +1 -1
- package/dist/components/content/Alert/use-alert.js +1 -1
- package/dist/components/content/Avatar/Avatar.js +1 -1
- package/dist/components/content/Badge/Badge.js +1 -1
- package/dist/components/content/Card/Card.js +1 -1
- package/dist/components/content/Content.js +1 -1
- package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
- package/dist/components/content/Disclosure/Disclosure.js +1 -1
- package/dist/components/content/Divider.js +1 -1
- package/dist/components/content/Footer.js +1 -1
- package/dist/components/content/Header.js +1 -1
- package/dist/components/content/HotKeys/HotKeys.js +1 -1
- package/dist/components/content/InlineInput/InlineInput.js +1 -1
- package/dist/components/content/Item/Item.js +1 -1
- package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
- package/dist/components/content/ItemCard/ItemCard.js +1 -1
- package/dist/components/content/Layout/GridLayout.js +1 -1
- package/dist/components/content/Layout/Layout.js +1 -1
- package/dist/components/content/Layout/LayoutBlock.js +1 -1
- package/dist/components/content/Layout/LayoutCenter.js +1 -1
- package/dist/components/content/Layout/LayoutContainer.js +1 -1
- package/dist/components/content/Layout/LayoutContent.js +1 -1
- package/dist/components/content/Layout/LayoutContext.js +1 -1
- package/dist/components/content/Layout/LayoutFlex.js +1 -1
- package/dist/components/content/Layout/LayoutFooter.js +1 -1
- package/dist/components/content/Layout/LayoutGrid.js +1 -1
- package/dist/components/content/Layout/LayoutHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPane.js +1 -1
- package/dist/components/content/Layout/LayoutPanel.js +1 -1
- package/dist/components/content/Layout/LayoutPanelHeader.js +1 -1
- package/dist/components/content/Layout/LayoutToolbar.js +1 -1
- package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
- package/dist/components/content/Layout/index.js +1 -1
- package/dist/components/content/Layout/utils.js +1 -1
- package/dist/components/content/Paragraph.js +1 -1
- package/dist/components/content/Placeholder/Placeholder.js +1 -1
- package/dist/components/content/PrismCode/PrismCode.js +1 -1
- package/dist/components/content/PrismCode/prismSetup.js +1 -1
- package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/dist/components/content/Result/Result.js +1 -1
- package/dist/components/content/Skeleton/Skeleton.js +1 -1
- package/dist/components/content/Tag/Tag.js +1 -1
- package/dist/components/content/Text.d.ts +7 -7
- package/dist/components/content/Text.js +1 -1
- package/dist/components/content/TextItem/TextItem.js +1 -1
- package/dist/components/content/Title.js +1 -1
- package/dist/components/content/Tree/Tree.js +1 -1
- package/dist/components/content/Tree/TreeNode.js +1 -1
- package/dist/components/content/Tree/styled.js +1 -1
- package/dist/components/content/Tree/tree-index.js +1 -1
- package/dist/components/content/Tree/use-checkbox-tree.js +1 -1
- package/dist/components/content/Tree/use-load-data.js +1 -1
- package/dist/components/content/highlightText.js +1 -1
- package/dist/components/content/use-auto-tooltip.js +1 -1
- package/dist/components/fields/Checkbox/Checkbox.js +1 -1
- package/dist/components/fields/Checkbox/CheckboxGroup.js +1 -1
- package/dist/components/fields/Checkbox/context.js +1 -1
- package/dist/components/fields/ComboBox/ComboBox.js +1 -1
- package/dist/components/fields/CommandTextArea/CommandTextArea.js +1 -1
- package/dist/components/fields/CommandTextArea/caretPosition.js +1 -1
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js +1 -1
- package/dist/components/fields/DatePicker/DateInput.js +1 -1
- package/dist/components/fields/DatePicker/DateInputBase.js +1 -1
- package/dist/components/fields/DatePicker/DatePicker.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.js +1 -1
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +1 -1
- package/dist/components/fields/DatePicker/TimeInput.js +1 -1
- package/dist/components/fields/DatePicker/parseDate.js +1 -1
- package/dist/components/fields/DatePicker/props.js +1 -1
- package/dist/components/fields/DatePicker/utils.js +1 -1
- package/dist/components/fields/FileInput/FileInput.js +1 -1
- package/dist/components/fields/FilterListBox/FilterListBox.js +1 -1
- package/dist/components/fields/FilterPicker/FilterPicker.js +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
- package/dist/components/fields/ListBox/ListBox.js +1 -1
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +1 -1
- package/dist/components/fields/ListBoxPopover/listNavigation.js +1 -1
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +1 -1
- package/dist/components/fields/NumberInput/NumberInput.js +1 -1
- package/dist/components/fields/NumberInput/StepButton.js +1 -1
- package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
- package/dist/components/fields/Picker/Picker.js +1 -1
- package/dist/components/fields/RadioGroup/Radio.js +1 -1
- package/dist/components/fields/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/fields/RadioGroup/context.js +1 -1
- package/dist/components/fields/SearchComboBox/SearchComboBox.js +1 -1
- package/dist/components/fields/SearchInput/SearchInput.js +1 -1
- package/dist/components/fields/Select/Select.js +1 -1
- package/dist/components/fields/Slider/Gradation.js +1 -1
- package/dist/components/fields/Slider/HueSlider.js +1 -1
- package/dist/components/fields/Slider/RangeSlider.js +1 -1
- package/dist/components/fields/Slider/Slider.js +1 -1
- package/dist/components/fields/Slider/SliderBase.js +1 -1
- package/dist/components/fields/Slider/SliderThumb.js +1 -1
- package/dist/components/fields/Slider/SliderTrack.js +1 -1
- package/dist/components/fields/Slider/elements.js +1 -1
- package/dist/components/fields/Slider/index.js +1 -1
- package/dist/components/fields/Switch/Switch.js +1 -1
- package/dist/components/fields/TextArea/TextArea.js +1 -1
- package/dist/components/fields/TextInput/TextInput.js +1 -1
- package/dist/components/fields/TextInput/TextInputBase.js +1 -1
- package/dist/components/fields/TextInputMapper/TextInputMapper.js +1 -1
- package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
- package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js +1 -1
- package/dist/components/form/Form/Field.js +1 -1
- package/dist/components/form/Form/Form.js +1 -1
- package/dist/components/form/Form/ResetButton/ResetButton.js +1 -1
- package/dist/components/form/Form/SubmitButton/SubmitButton.js +1 -1
- package/dist/components/form/Form/SubmitError.js +1 -1
- package/dist/components/form/Form/index.js +1 -1
- package/dist/components/form/Form/use-field/use-field-props.js +1 -1
- package/dist/components/form/Form/use-field/use-field.js +1 -1
- package/dist/components/form/Form/use-form.js +1 -1
- package/dist/components/form/Form/validation.js +1 -1
- package/dist/components/form/Label.js +1 -1
- package/dist/components/form/wrapper.js +1 -1
- package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
- package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
- package/dist/components/layout/Board/Board.js +1 -1
- package/dist/components/layout/Board/BoardProvider.js +1 -1
- package/dist/components/layout/Board/BoardResponsive.js +1 -1
- package/dist/components/layout/Board/Widget.js +1 -1
- package/dist/components/layout/Board/WidgetHost.js +1 -1
- package/dist/components/layout/Board/board-context.js +1 -1
- package/dist/components/layout/Board/board-store.js +1 -1
- package/dist/components/layout/Board/grid-core/calculate.js +1 -1
- package/dist/components/layout/Board/grid-core/collision.js +1 -1
- package/dist/components/layout/Board/grid-core/compactors.js +1 -1
- package/dist/components/layout/Board/grid-core/constraints.js +1 -1
- package/dist/components/layout/Board/grid-core/layout.js +1 -1
- package/dist/components/layout/Board/grid-core/sort.js +1 -1
- package/dist/components/layout/Board/index.js +1 -1
- package/dist/components/layout/Board/responsive-utils.js +1 -1
- package/dist/components/layout/Board/use-board-layout.js +1 -1
- package/dist/components/layout/Board/use-board-registry.js +1 -1
- package/dist/components/layout/Flex.js +1 -1
- package/dist/components/layout/Flow.js +1 -1
- package/dist/components/layout/Grid.js +1 -1
- package/dist/components/layout/Panel.js +1 -1
- package/dist/components/layout/Prefix.js +1 -1
- package/dist/components/layout/ResizablePanel.js +1 -1
- package/dist/components/layout/Space.js +1 -1
- package/dist/components/layout/Suffix.js +1 -1
- package/dist/components/navigation/Tabs/DraggableTabList.js +1 -1
- package/dist/components/navigation/Tabs/TabButton.js +1 -1
- package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
- package/dist/components/navigation/Tabs/TabPanel.js +1 -1
- package/dist/components/navigation/Tabs/TabPicker.js +1 -1
- package/dist/components/navigation/Tabs/Tabs.js +1 -1
- package/dist/components/navigation/Tabs/TabsAction.js +1 -1
- package/dist/components/navigation/Tabs/TabsContext.js +1 -1
- package/dist/components/navigation/Tabs/popover-placement.js +1 -1
- package/dist/components/navigation/Tabs/styled.js +1 -1
- package/dist/components/navigation/Tabs/types.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
- package/dist/components/organisms/FileTabs/FileTabs.js +1 -1
- package/dist/components/organisms/StatsCard/StatsCard.js +1 -1
- package/dist/components/other/Calendar/Calendar.js +1 -1
- package/dist/components/other/Calendar/CalendarCell.js +1 -1
- package/dist/components/other/Calendar/CalendarGrid.js +1 -1
- package/dist/components/other/Calendar/RangeCalendar.js +1 -1
- package/dist/components/other/CloudLogo/CloudLogo.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
- package/dist/components/overlays/Dialog/Dialog.js +1 -1
- package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
- package/dist/components/overlays/Dialog/DialogForm.js +1 -1
- package/dist/components/overlays/Dialog/DialogTrigger.js +1 -1
- package/dist/components/overlays/Dialog/context.js +1 -1
- package/dist/components/overlays/Dialog/use-dialog-container.js +1 -1
- package/dist/components/overlays/Modal/Modal.js +1 -1
- package/dist/components/overlays/Modal/OpenTransitionContext.js +1 -1
- package/dist/components/overlays/Modal/Overlay.js +1 -1
- package/dist/components/overlays/Modal/Popover.js +1 -1
- package/dist/components/overlays/Modal/Tray.js +1 -1
- package/dist/components/overlays/Modal/Underlay.js +1 -1
- package/dist/components/overlays/Notifications/Notification.js +1 -1
- package/dist/components/overlays/Notifications/NotificationAction.js +1 -1
- package/dist/components/overlays/Notifications/NotificationCard.js +1 -1
- package/dist/components/overlays/Notifications/NotificationContext.js +1 -1
- package/dist/components/overlays/Notifications/NotificationItem.js +1 -1
- package/dist/components/overlays/Notifications/OverlayContainer.js +1 -1
- package/dist/components/overlays/Notifications/OverlayProvider.js +1 -1
- package/dist/components/overlays/Notifications/PersistentNotificationsList.js +1 -1
- package/dist/components/overlays/Notifications/dismissed-storage.js +1 -1
- package/dist/components/overlays/Notifications/format-relative-time.js +1 -1
- package/dist/components/overlays/Notifications/index.js +1 -1
- package/dist/components/overlays/Notifications/use-notification-state.js +1 -1
- package/dist/components/overlays/Notifications/use-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-overlay-timers.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-state.js +1 -1
- package/dist/components/overlays/Notifications/use-toast-state.js +1 -1
- package/dist/components/overlays/Toast/ToastItem.js +1 -1
- package/dist/components/overlays/Toast/index.js +1 -1
- package/dist/components/overlays/Toast/useProgressToast.js +1 -1
- package/dist/components/overlays/Toast/useToast.js +1 -1
- package/dist/components/overlays/Tooltip/Tooltip.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipProvider.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipTrigger.js +1 -1
- package/dist/components/overlays/Tooltip/context.js +1 -1
- package/dist/components/portal/Portal.js +1 -1
- package/dist/components/portal/PortalProvider.js +1 -1
- package/dist/components/portal/usePortal.js +1 -1
- package/dist/components/shared/DraggableCollection.js +1 -1
- package/dist/components/shared/InvalidIcon.js +1 -1
- package/dist/components/shared/ValidIcon.js +1 -1
- package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
- package/dist/components/status/Spin/Cube.js +1 -1
- package/dist/components/status/Spin/InternalSpinner.js +1 -1
- package/dist/components/status/Spin/Spin.js +1 -1
- package/dist/components/status/Spin/SpinsContainer.js +1 -1
- package/dist/data/item-themes.js +1 -1
- package/dist/data/themes.js +1 -1
- package/dist/i18n/I18nProvider.js +1 -1
- package/dist/i18n/createFormatter.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/i18n/instance.js +1 -1
- package/dist/i18n/locales/de-DE/uikit.js +1 -1
- package/dist/i18n/locales/en-US/uikit.js +1 -1
- package/dist/i18n/locales/es-ES/uikit.js +1 -1
- package/dist/i18n/locales/es-MX/uikit.js +1 -1
- package/dist/i18n/locales/fr-FR/uikit.js +1 -1
- package/dist/i18n/locales/it-IT/uikit.js +1 -1
- package/dist/i18n/locales/ja-JP/uikit.js +1 -1
- package/dist/i18n/locales/nb-NO/uikit.js +1 -1
- package/dist/i18n/locales/pt-BR/uikit.js +1 -1
- package/dist/i18n/locales/pt-PT/uikit.js +1 -1
- package/dist/i18n/locales/sv-SE/uikit.js +1 -1
- package/dist/i18n/locales/vi-VN/uikit.js +1 -1
- package/dist/i18n/locales.js +1 -1
- package/dist/i18n/useFormatter.js +1 -1
- package/dist/i18n/useI18n.js +1 -1
- package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
- package/dist/icons/AdjustmentsIcon.js +1 -1
- package/dist/icons/AiIcon.js +1 -1
- package/dist/icons/AreaChartIcon.js +1 -1
- package/dist/icons/BackwardIcon.js +1 -1
- package/dist/icons/BarChartIcon.js +1 -1
- package/dist/icons/BellFilledIcon.js +1 -1
- package/dist/icons/BellIcon.js +1 -1
- package/dist/icons/BooleanIcon.js +1 -1
- package/dist/icons/CalendarEditIcon.js +1 -1
- package/dist/icons/CalendarIcon.js +1 -1
- package/dist/icons/CaretDownIcon.js +1 -1
- package/dist/icons/CaretUpIcon.js +1 -1
- package/dist/icons/ChartAreaStackedIcon.js +1 -1
- package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarGroupedIcon.js +1 -1
- package/dist/icons/ChartBarHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarLineIcon.js +1 -1
- package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBoxPlot2Icon.js +1 -1
- package/dist/icons/ChartBoxPlotIcon.js +1 -1
- package/dist/icons/ChartBubbleIcon.js +1 -1
- package/dist/icons/ChartDonut2Icon.js +1 -1
- package/dist/icons/ChartFunnelIcon.js +1 -1
- package/dist/icons/ChartHeatmapIcon.js +1 -1
- package/dist/icons/ChartKPIIcon.js +1 -1
- package/dist/icons/ChartPie2Icon.js +1 -1
- package/dist/icons/ChartScatterIcon.js +1 -1
- package/dist/icons/CheckCircleFilledIcon.js +1 -1
- package/dist/icons/CheckCircleIcon.js +1 -1
- package/dist/icons/CheckIcon.js +1 -1
- package/dist/icons/CircleFilledIcon.js +1 -1
- package/dist/icons/ClearIcon.js +1 -1
- package/dist/icons/CloseCircleFilledIcon.js +1 -1
- package/dist/icons/CloseCircleIcon.js +1 -1
- package/dist/icons/CloseIcon.js +1 -1
- package/dist/icons/CodeIcon.js +1 -1
- package/dist/icons/ColumnTotalIcon.js +1 -1
- package/dist/icons/CopyIcon.js +1 -1
- package/dist/icons/CountIcon.js +1 -1
- package/dist/icons/CubeIcon.js +1 -1
- package/dist/icons/CubePauseIcon.js +1 -1
- package/dist/icons/CubePlayIcon.js +1 -1
- package/dist/icons/CurrencyDollarIcon.js +1 -1
- package/dist/icons/DangerIcon.js +1 -1
- package/dist/icons/DashboardIcon.js +1 -1
- package/dist/icons/DatabaseIcon.js +1 -1
- package/dist/icons/DecimalDecreaseIcon.js +1 -1
- package/dist/icons/DecimalIncreaseIcon.js +1 -1
- package/dist/icons/DirectionIcon.js +1 -1
- package/dist/icons/DonutIcon.js +1 -1
- package/dist/icons/DownIcon.js +1 -1
- package/dist/icons/EditIcon.js +1 -1
- package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
- package/dist/icons/ExclamationCircleIcon.js +1 -1
- package/dist/icons/ExclamationIcon.js +1 -1
- package/dist/icons/EyeIcon.js +1 -1
- package/dist/icons/EyeInvisibleIcon.js +1 -1
- package/dist/icons/FilterIcon.js +1 -1
- package/dist/icons/FolderFilledIcon.js +1 -1
- package/dist/icons/FolderIcon.js +1 -1
- package/dist/icons/FolderOpenFilledIcon.js +1 -1
- package/dist/icons/FolderOpenIcon.js +1 -1
- package/dist/icons/ForwardIcon.js +1 -1
- package/dist/icons/GripVerticalIcon.js +1 -1
- package/dist/icons/HierarchyIcon.js +1 -1
- package/dist/icons/HierarchyOpenIcon.js +1 -1
- package/dist/icons/Icon.js +1 -1
- package/dist/icons/InfoCircleIcon.js +1 -1
- package/dist/icons/InfoIcon.js +1 -1
- package/dist/icons/KeyIcon.js +1 -1
- package/dist/icons/LeftIcon.js +1 -1
- package/dist/icons/LineChartIcon.js +1 -1
- package/dist/icons/LoadingIcon.js +1 -1
- package/dist/icons/LockFilledIcon.js +1 -1
- package/dist/icons/LockIcon.js +1 -1
- package/dist/icons/MoreIcon.js +1 -1
- package/dist/icons/NotAllowedIcon.js +1 -1
- package/dist/icons/Number123Icon.js +1 -1
- package/dist/icons/NumberIcon.js +1 -1
- package/dist/icons/PauseCircleFilledIcon.js +1 -1
- package/dist/icons/PauseCircleIcon.js +1 -1
- package/dist/icons/PauseIcon.js +1 -1
- package/dist/icons/PercentageIcon.js +1 -1
- package/dist/icons/PieChartIcon.js +1 -1
- package/dist/icons/PlayCircleIcon.js +1 -1
- package/dist/icons/PlayIcon.js +1 -1
- package/dist/icons/PlusIcon.js +1 -1
- package/dist/icons/ProgressBarIcon.js +1 -1
- package/dist/icons/ReloadIcon.js +1 -1
- package/dist/icons/ReportIcon.js +1 -1
- package/dist/icons/ReturnIcon.js +1 -1
- package/dist/icons/RightIcon.js +1 -1
- package/dist/icons/RowTotalsIcon.js +1 -1
- package/dist/icons/SchemeIcon.js +1 -1
- package/dist/icons/SearchIcon.js +1 -1
- package/dist/icons/SemanticQueryIcon.js +1 -1
- package/dist/icons/SettingsIcon.js +1 -1
- package/dist/icons/ShieldFilledIcon.js +1 -1
- package/dist/icons/ShieldIcon.js +1 -1
- package/dist/icons/SlashIcon.js +1 -1
- package/dist/icons/SparklesIcon.js +1 -1
- package/dist/icons/SqlIcon.js +1 -1
- package/dist/icons/StatsIcon.js +1 -1
- package/dist/icons/StopIcon.js +1 -1
- package/dist/icons/StringIcon.js +1 -1
- package/dist/icons/SubtotalsIcon.js +1 -1
- package/dist/icons/SwitchIcon.js +1 -1
- package/dist/icons/TableIcon.js +1 -1
- package/dist/icons/ThumbsDownIcon.js +1 -1
- package/dist/icons/ThumbsUpIcon.js +1 -1
- package/dist/icons/ThunderboltCrossedIcon.js +1 -1
- package/dist/icons/ThunderboltFilledIcon.js +1 -1
- package/dist/icons/ThunderboltIcon.js +1 -1
- package/dist/icons/TimeIcon.js +1 -1
- package/dist/icons/TrashIcon.js +1 -1
- package/dist/icons/UnlockIcon.js +1 -1
- package/dist/icons/UpIcon.js +1 -1
- package/dist/icons/UserGroupIcon.js +1 -1
- package/dist/icons/UserIcon.js +1 -1
- package/dist/icons/UserLockIcon.js +1 -1
- package/dist/icons/ViewIcon.js +1 -1
- package/dist/icons/WarningFilledIcon.js +1 -1
- package/dist/icons/WarningIcon.js +1 -1
- package/dist/icons/wrap-icon.js +1 -1
- package/dist/index.js +1 -1
- package/dist/provider.js +1 -1
- package/dist/providers/TrackingProvider.js +1 -1
- package/dist/providers/navigationAdapter.default.js +1 -1
- package/dist/tokens/base.js +1 -1
- package/dist/tokens/colors.js +1 -2
- package/dist/tokens/colors.js.map +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/layout.js +1 -1
- package/dist/tokens/palette.js +130 -110
- package/dist/tokens/palette.js.map +1 -1
- package/dist/tokens/shadows.js +1 -1
- package/dist/tokens/sizes.js +1 -1
- package/dist/tokens/spacing.js +1 -1
- package/dist/tokens/typography.js +1 -1
- package/dist/utils/ResizeSensor.js +1 -1
- package/dist/utils/is-dev-env.js +1 -1
- package/dist/utils/modules.js +1 -1
- package/dist/utils/promise.js +1 -1
- package/dist/utils/raf.js +1 -1
- package/dist/utils/random.js +1 -1
- package/dist/utils/range.js +1 -1
- package/dist/utils/react/RenderCache.js +1 -1
- package/dist/utils/react/Slots.js +1 -1
- package/dist/utils/react/chain.js +1 -1
- package/dist/utils/react/forwardRefWithGenerics.js +1 -1
- package/dist/utils/react/index.js +1 -1
- package/dist/utils/react/interactions.js +1 -1
- package/dist/utils/react/isTextOnly.js +1 -1
- package/dist/utils/react/mapProps.js +1 -1
- package/dist/utils/react/mergeProps.js +1 -1
- package/dist/utils/react/nullableValue.js +1 -1
- package/dist/utils/react/resolveIcon.js +1 -1
- package/dist/utils/react/sharedStore.js +1 -1
- package/dist/utils/react/useCombinedRefs.js +1 -1
- package/dist/utils/react/useControlledFocusVisible.js +1 -1
- package/dist/utils/react/useEventBus.js +1 -1
- package/dist/utils/react/useId.js +1 -1
- package/dist/utils/react/useIsDarwin.js +1 -1
- package/dist/utils/react/useKeySymbols.js +1 -1
- package/dist/utils/react/useLayoutEffect.js +1 -1
- package/dist/utils/react/useLocalStorage.js +1 -1
- package/dist/utils/react/useMergeStyles.js +1 -1
- package/dist/utils/react/usePopoverSync.js +1 -1
- package/dist/utils/react/useQaProps.js +1 -1
- package/dist/utils/react/useViewportSize.js +1 -1
- package/dist/utils/react/wrapNodeIfPlain.js +1 -1
- package/dist/utils/selection.js +1 -1
- package/dist/utils/styles.js +1 -1
- package/dist/utils/tree.js +1 -1
- package/dist/utils/warnings.js +1 -1
- package/dist/version.js +3 -3
- package/docs/Colors.md +77 -0
- package/docs/glaze/api.md +951 -414
- package/docs/glaze/methodology.md +512 -212
- package/docs/glaze/migration.md +127 -49
- package/docs/glaze/okhst.md +170 -0
- package/package.json +3 -3
package/dist/tokens/palette.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-
|
|
1
|
+
/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4caa7d7 | Cube Dev Team */
|
|
2
2
|
import { glaze } from "@tenphi/glaze";
|
|
3
3
|
|
|
4
4
|
//#region src/tokens/palette.ts
|
|
@@ -8,7 +8,7 @@ import { glaze } from "@tenphi/glaze";
|
|
|
8
8
|
* Produces light, dark, and high-contrast color variants from a single
|
|
9
9
|
* source of truth. Every color token is emitted as a tasty state map:
|
|
10
10
|
*
|
|
11
|
-
* '#surface': { '': '
|
|
11
|
+
* '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
|
|
12
12
|
*
|
|
13
13
|
* The `@dark` and `@hc` state aliases are wired up globally in
|
|
14
14
|
* `src/components/Root.tsx` (see `setGlobalPredefinedStates`).
|
|
@@ -19,7 +19,12 @@ const DANGER_HUE = 23.1;
|
|
|
19
19
|
const WARNING_HUE = 84.3;
|
|
20
20
|
const NOTE_HUE = 302.3;
|
|
21
21
|
/** Seed saturation; per-color saturation factors below are 0–1 of this seed. */
|
|
22
|
-
const SEED_SATURATION =
|
|
22
|
+
const SEED_SATURATION = 65;
|
|
23
|
+
const TEXT_TONE = -98;
|
|
24
|
+
const TEXT_SOFT_TONE = -72;
|
|
25
|
+
const TEXT_SOFT2_TONE = -52;
|
|
26
|
+
const SURFACE_2_TEXT_OFFSET = 2;
|
|
27
|
+
const SURFACE_3_TEXT_OFFSET = 4;
|
|
23
28
|
glaze.configure({
|
|
24
29
|
states: {
|
|
25
30
|
dark: "@dark",
|
|
@@ -33,254 +38,248 @@ glaze.configure({
|
|
|
33
38
|
const defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);
|
|
34
39
|
defaultTheme.colors({
|
|
35
40
|
surface: {
|
|
36
|
-
|
|
41
|
+
tone: 100,
|
|
37
42
|
saturation: .11
|
|
38
43
|
},
|
|
39
44
|
"surface-2": {
|
|
40
45
|
base: "surface",
|
|
41
|
-
|
|
42
|
-
saturation: .
|
|
46
|
+
tone: "-2",
|
|
47
|
+
saturation: .1,
|
|
43
48
|
inherit: false
|
|
44
49
|
},
|
|
45
50
|
"surface-3": {
|
|
46
51
|
base: "surface",
|
|
47
|
-
|
|
48
|
-
saturation: .
|
|
52
|
+
tone: "-4",
|
|
53
|
+
saturation: .1,
|
|
49
54
|
inherit: false
|
|
50
55
|
},
|
|
51
56
|
"surface-4": {
|
|
52
57
|
base: "surface",
|
|
53
|
-
|
|
54
|
-
saturation: .
|
|
58
|
+
tone: "-6",
|
|
59
|
+
saturation: .1,
|
|
55
60
|
inherit: false
|
|
56
61
|
},
|
|
57
62
|
"surface-text": {
|
|
58
63
|
base: "surface",
|
|
59
|
-
|
|
60
|
-
saturation: .475
|
|
64
|
+
tone: `${TEXT_TONE - 2}`,
|
|
65
|
+
saturation: .475,
|
|
66
|
+
contrast: ["AA", "AAA"]
|
|
61
67
|
},
|
|
62
68
|
"surface-text-soft": {
|
|
63
69
|
base: "surface",
|
|
64
|
-
|
|
70
|
+
tone: `${TEXT_SOFT_TONE - 2}`,
|
|
65
71
|
saturation: .375,
|
|
66
|
-
contrast: [
|
|
72
|
+
contrast: ["AA", "AAA"],
|
|
67
73
|
inherit: false
|
|
68
74
|
},
|
|
69
75
|
"surface-text-soft-2": {
|
|
70
76
|
base: "surface",
|
|
71
|
-
|
|
77
|
+
tone: `${TEXT_SOFT2_TONE - 2}`,
|
|
72
78
|
saturation: .24,
|
|
73
|
-
contrast: [
|
|
79
|
+
contrast: ["AA", "AAA"],
|
|
74
80
|
inherit: false
|
|
75
81
|
},
|
|
76
82
|
"surface-2-text": {
|
|
77
83
|
base: "surface-2",
|
|
78
|
-
|
|
84
|
+
tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
|
|
79
85
|
saturation: .475,
|
|
86
|
+
contrast: ["AA", "AAA"],
|
|
80
87
|
inherit: false
|
|
81
88
|
},
|
|
82
89
|
"surface-2-text-soft": {
|
|
83
90
|
base: "surface-2",
|
|
84
|
-
|
|
91
|
+
tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
|
|
85
92
|
saturation: .375,
|
|
86
|
-
contrast: [
|
|
93
|
+
contrast: ["AA", "AAA"],
|
|
87
94
|
inherit: false
|
|
88
95
|
},
|
|
89
96
|
"surface-3-text": {
|
|
90
97
|
base: "surface-3",
|
|
91
|
-
|
|
98
|
+
tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
|
|
92
99
|
saturation: .475,
|
|
100
|
+
contrast: ["AA", "AAA"],
|
|
93
101
|
inherit: false
|
|
94
102
|
},
|
|
95
103
|
"surface-3-text-soft": {
|
|
96
104
|
base: "surface-3",
|
|
97
|
-
|
|
105
|
+
tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
|
|
98
106
|
saturation: .375,
|
|
99
|
-
contrast: [
|
|
107
|
+
contrast: ["AA", "AAA"],
|
|
100
108
|
inherit: false
|
|
101
109
|
},
|
|
102
110
|
border: {
|
|
103
111
|
base: "surface",
|
|
104
|
-
|
|
112
|
+
tone: ["-10", "-20"],
|
|
105
113
|
saturation: .175
|
|
106
114
|
},
|
|
107
115
|
placeholder: {
|
|
108
116
|
base: "surface",
|
|
109
|
-
|
|
117
|
+
tone: "-33",
|
|
110
118
|
saturation: .175,
|
|
111
119
|
inherit: false
|
|
112
120
|
},
|
|
113
121
|
focus: {
|
|
114
122
|
base: "surface",
|
|
115
|
-
|
|
123
|
+
tone: "-29",
|
|
116
124
|
saturation: .8625,
|
|
117
125
|
inherit: false
|
|
118
126
|
},
|
|
119
127
|
disabled: {
|
|
120
|
-
|
|
128
|
+
tone: 80.8,
|
|
121
129
|
saturation: .4,
|
|
122
130
|
inherit: false
|
|
123
131
|
},
|
|
124
132
|
"disabled-surface": {
|
|
125
133
|
base: "surface",
|
|
126
|
-
|
|
134
|
+
tone: "-3.5",
|
|
127
135
|
saturation: .2,
|
|
128
|
-
contrast: [1.1, 1.2],
|
|
129
136
|
inherit: false
|
|
130
137
|
},
|
|
131
138
|
"disabled-surface-text": {
|
|
132
139
|
base: "surface",
|
|
133
|
-
|
|
140
|
+
tone: "-23",
|
|
134
141
|
saturation: .3,
|
|
135
|
-
contrast: [2, 2.5],
|
|
136
142
|
inherit: false
|
|
137
143
|
},
|
|
138
144
|
"surface-inverse": {
|
|
139
|
-
|
|
145
|
+
tone: 12,
|
|
140
146
|
saturation: .475,
|
|
141
147
|
mode: "fixed",
|
|
142
148
|
inherit: false
|
|
143
149
|
},
|
|
144
150
|
"accent-surface-text": {
|
|
145
|
-
|
|
151
|
+
tone: 100,
|
|
146
152
|
mode: "fixed"
|
|
147
153
|
},
|
|
148
154
|
"accent-surface": {
|
|
149
155
|
base: "accent-surface-text",
|
|
150
|
-
|
|
151
|
-
contrast: [
|
|
156
|
+
tone: "-49",
|
|
157
|
+
contrast: ["AA", "AAA"],
|
|
152
158
|
mode: "fixed"
|
|
153
159
|
},
|
|
154
160
|
"accent-surface-2": {
|
|
155
161
|
base: "accent-surface-text",
|
|
156
|
-
|
|
157
|
-
contrast: [
|
|
162
|
+
tone: "-52",
|
|
163
|
+
contrast: ["AA", "AAA"],
|
|
158
164
|
mode: "fixed"
|
|
159
165
|
},
|
|
160
166
|
"accent-surface-3": {
|
|
161
167
|
base: "accent-surface-text",
|
|
162
|
-
|
|
163
|
-
contrast: [
|
|
168
|
+
tone: "-55",
|
|
169
|
+
contrast: ["AA", "AAA"],
|
|
164
170
|
mode: "fixed"
|
|
165
171
|
},
|
|
166
172
|
"accent-surface-hover": {
|
|
167
173
|
base: "accent-surface-text",
|
|
168
|
-
|
|
169
|
-
contrast: [
|
|
174
|
+
tone: "-58",
|
|
175
|
+
contrast: ["AA", "AAA"],
|
|
170
176
|
mode: "fixed"
|
|
171
177
|
},
|
|
172
178
|
"accent-surface-border": {
|
|
173
179
|
base: "accent-surface",
|
|
174
|
-
|
|
175
|
-
contrast: [1.4, 1.8],
|
|
180
|
+
tone: "+13",
|
|
176
181
|
mode: "fixed"
|
|
177
182
|
},
|
|
178
183
|
"accent-text": {
|
|
179
184
|
base: "surface",
|
|
180
|
-
|
|
185
|
+
tone: "-61",
|
|
181
186
|
saturation: 1,
|
|
182
|
-
contrast: [
|
|
187
|
+
contrast: ["AA", "AAA"]
|
|
183
188
|
},
|
|
184
189
|
"accent-text-soft": {
|
|
185
190
|
base: "surface",
|
|
186
|
-
|
|
191
|
+
tone: "-49",
|
|
187
192
|
saturation: 1,
|
|
188
|
-
contrast: [
|
|
193
|
+
contrast: ["AA", "AAA"]
|
|
189
194
|
},
|
|
190
195
|
"accent-icon": {
|
|
191
196
|
base: "surface",
|
|
192
|
-
|
|
193
|
-
saturation: .9375
|
|
194
|
-
contrast: [3.2, 5]
|
|
197
|
+
tone: "-38",
|
|
198
|
+
saturation: .9375
|
|
195
199
|
},
|
|
196
200
|
"accent-disabled-surface": {
|
|
197
201
|
base: "surface",
|
|
198
|
-
|
|
199
|
-
saturation: .5
|
|
200
|
-
contrast: [1.4, 1.5]
|
|
202
|
+
tone: "-13",
|
|
203
|
+
saturation: .5
|
|
201
204
|
},
|
|
202
205
|
"accent-disabled-surface-text": {
|
|
203
206
|
base: "accent-disabled-surface",
|
|
204
|
-
|
|
207
|
+
tone: "max",
|
|
205
208
|
saturation: .4,
|
|
206
|
-
contrast: 1.51,
|
|
207
209
|
mode: "fixed"
|
|
208
210
|
},
|
|
209
211
|
"code-comment": {
|
|
210
212
|
base: "surface",
|
|
211
213
|
hue: 280,
|
|
212
214
|
saturation: .1,
|
|
213
|
-
|
|
214
|
-
contrast: [
|
|
215
|
+
tone: "-50",
|
|
216
|
+
contrast: ["AA", "AAA"],
|
|
215
217
|
inherit: false
|
|
216
218
|
},
|
|
217
219
|
"code-punctuation": {
|
|
218
220
|
base: "surface",
|
|
219
221
|
hue: 348,
|
|
220
222
|
saturation: .4,
|
|
221
|
-
|
|
222
|
-
contrast: [
|
|
223
|
+
tone: "-50",
|
|
224
|
+
contrast: ["AA", "AAA"],
|
|
223
225
|
inherit: false
|
|
224
226
|
},
|
|
225
227
|
"code-keyword": {
|
|
226
228
|
base: "surface",
|
|
227
229
|
hue: 348,
|
|
228
230
|
saturation: 1,
|
|
229
|
-
|
|
230
|
-
contrast: [
|
|
231
|
+
tone: "-54",
|
|
232
|
+
contrast: ["AA", "AAA"],
|
|
231
233
|
inherit: false
|
|
232
234
|
},
|
|
233
235
|
"code-string": {
|
|
234
236
|
base: "surface",
|
|
235
237
|
hue: PURPLE_HUE,
|
|
236
238
|
saturation: 1,
|
|
237
|
-
|
|
238
|
-
contrast: [
|
|
239
|
+
tone: "-50",
|
|
240
|
+
contrast: ["AA", "AAA"],
|
|
239
241
|
inherit: false
|
|
240
242
|
},
|
|
241
243
|
"code-number": {
|
|
242
244
|
base: "surface",
|
|
243
245
|
hue: 156,
|
|
244
246
|
saturation: .9,
|
|
245
|
-
|
|
246
|
-
contrast: [
|
|
247
|
+
tone: "-50",
|
|
248
|
+
contrast: ["AA", "AAA"],
|
|
247
249
|
inherit: false
|
|
248
250
|
},
|
|
249
251
|
"code-function": {
|
|
250
252
|
base: "surface",
|
|
251
253
|
hue: 348,
|
|
252
254
|
saturation: 1,
|
|
253
|
-
|
|
254
|
-
contrast: [
|
|
255
|
+
tone: "-54",
|
|
256
|
+
contrast: ["AA", "AAA"],
|
|
255
257
|
inherit: false
|
|
256
258
|
},
|
|
257
259
|
"code-attribute": {
|
|
258
260
|
base: "surface",
|
|
259
261
|
hue: 200,
|
|
260
262
|
saturation: 1,
|
|
261
|
-
|
|
262
|
-
contrast: [
|
|
263
|
+
tone: "-50",
|
|
264
|
+
contrast: ["AA", "AAA"],
|
|
263
265
|
inherit: false
|
|
264
266
|
},
|
|
265
267
|
"loading-face-1": {
|
|
266
268
|
base: "surface",
|
|
267
|
-
|
|
269
|
+
tone: "-2",
|
|
268
270
|
saturation: .3,
|
|
269
|
-
contrast: [1.04, 1.5],
|
|
270
271
|
inherit: false
|
|
271
272
|
},
|
|
272
273
|
"loading-face-2": {
|
|
273
274
|
base: "surface",
|
|
274
|
-
|
|
275
|
+
tone: "-9",
|
|
275
276
|
saturation: .62,
|
|
276
|
-
contrast: [1.24, 2.5],
|
|
277
277
|
inherit: false
|
|
278
278
|
},
|
|
279
279
|
"loading-face-3": {
|
|
280
280
|
base: "surface",
|
|
281
|
-
|
|
281
|
+
tone: "-21",
|
|
282
282
|
saturation: .66,
|
|
283
|
-
contrast: [1.75, 4],
|
|
284
283
|
inherit: false
|
|
285
284
|
},
|
|
286
285
|
"shadow-sm": {
|
|
@@ -305,29 +304,49 @@ defaultTheme.colors({
|
|
|
305
304
|
inherit: false
|
|
306
305
|
},
|
|
307
306
|
overlay: {
|
|
308
|
-
|
|
307
|
+
tone: 10,
|
|
309
308
|
opacity: .5,
|
|
310
309
|
inherit: false
|
|
311
310
|
}
|
|
312
311
|
});
|
|
312
|
+
const TINTED_SURFACE_SATURATION = .5;
|
|
313
|
+
const TINTED_SURFACE_TONE_OFFSET = 2;
|
|
313
314
|
/**
|
|
314
315
|
* Per-colored-theme overrides on top of `defaultTheme`:
|
|
315
316
|
* - `surface` — bumped saturation so the banner bg is visibly tinted.
|
|
316
317
|
* - `border` — bumped saturation so OUTLINE-variant borders pick up the
|
|
317
318
|
* theme hue (used by `#<theme>-border` in `item-themes.ts`). Mirrors the
|
|
318
|
-
* default-theme `border` shape (`base: 'surface'`,
|
|
319
|
+
* default-theme `border` shape (`base: 'surface'`, tone window) but
|
|
319
320
|
* with higher saturation. Glaze's `extend({ colors })` redefines each
|
|
320
321
|
* listed color from scratch, so we restate the full definition here.
|
|
321
322
|
*/
|
|
322
323
|
const TINTED_SURFACE_OVERRIDE = {
|
|
323
324
|
surface: {
|
|
324
|
-
|
|
325
|
-
saturation:
|
|
325
|
+
tone: 100 - TINTED_SURFACE_TONE_OFFSET,
|
|
326
|
+
saturation: TINTED_SURFACE_SATURATION
|
|
326
327
|
},
|
|
327
328
|
border: {
|
|
328
329
|
base: "surface",
|
|
329
|
-
|
|
330
|
+
tone: ["-10", "-20"],
|
|
330
331
|
saturation: .5
|
|
332
|
+
},
|
|
333
|
+
"surface-text": {
|
|
334
|
+
base: "surface",
|
|
335
|
+
tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
|
|
336
|
+
saturation: .25,
|
|
337
|
+
contrast: ["AA", "AAA"]
|
|
338
|
+
},
|
|
339
|
+
"surface-text-soft": {
|
|
340
|
+
base: "surface",
|
|
341
|
+
tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
|
|
342
|
+
saturation: .25,
|
|
343
|
+
contrast: ["AA", "AAA"]
|
|
344
|
+
},
|
|
345
|
+
"surface-text-soft-2": {
|
|
346
|
+
base: "surface",
|
|
347
|
+
tone: `${TEXT_SOFT2_TONE - TINTED_SURFACE_TONE_OFFSET}`,
|
|
348
|
+
saturation: .25,
|
|
349
|
+
contrast: ["AA", "AAA"]
|
|
331
350
|
}
|
|
332
351
|
};
|
|
333
352
|
const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
|
|
@@ -372,68 +391,66 @@ const noteTheme = defaultTheme.extend({
|
|
|
372
391
|
* pressed/focused border on the brand-purple primary fill. Matches the
|
|
373
392
|
* legacy `#fixed-primary-text` alias (= `#primary-accent-surface-hover`).
|
|
374
393
|
* - `accent-disabled-surface` / `accent-disabled-surface-text` —
|
|
375
|
-
* brand-tinted disabled chip + label,
|
|
376
|
-
* dark `surface` so the disabled state is
|
|
394
|
+
* brand-tinted disabled chip + label, positioned with relative tone
|
|
395
|
+
* deltas against the fixed dark `surface` so the disabled state is
|
|
396
|
+
* scheme-symmetric.
|
|
377
397
|
*/
|
|
378
398
|
const specialTheme = glaze(PURPLE_HUE, SEED_SATURATION);
|
|
379
399
|
specialTheme.colors({
|
|
380
400
|
surface: {
|
|
381
|
-
|
|
401
|
+
tone: 12,
|
|
382
402
|
saturation: .475,
|
|
383
403
|
mode: "fixed"
|
|
384
404
|
},
|
|
385
405
|
"accent-surface-text": {
|
|
386
|
-
|
|
406
|
+
tone: 100,
|
|
387
407
|
mode: "fixed"
|
|
388
408
|
},
|
|
389
409
|
"accent-surface": {
|
|
390
410
|
base: "accent-surface-text",
|
|
391
|
-
|
|
392
|
-
contrast: [
|
|
411
|
+
tone: "-49",
|
|
412
|
+
contrast: ["AA", "AAA"],
|
|
393
413
|
mode: "fixed"
|
|
394
414
|
},
|
|
395
415
|
"accent-surface-2": {
|
|
396
416
|
base: "accent-surface-text",
|
|
397
|
-
|
|
398
|
-
contrast: [
|
|
417
|
+
tone: "-52",
|
|
418
|
+
contrast: ["AA", "AAA"],
|
|
399
419
|
mode: "fixed"
|
|
400
420
|
},
|
|
401
421
|
"accent-surface-3": {
|
|
402
422
|
base: "accent-surface-text",
|
|
403
|
-
|
|
404
|
-
contrast: [
|
|
423
|
+
tone: "-55",
|
|
424
|
+
contrast: ["AA", "AAA"],
|
|
405
425
|
mode: "fixed"
|
|
406
426
|
},
|
|
407
427
|
"accent-surface-border": {
|
|
408
428
|
base: "accent-surface",
|
|
409
|
-
|
|
410
|
-
contrast: [1.4, 1.8],
|
|
429
|
+
tone: "+13",
|
|
411
430
|
mode: "fixed"
|
|
412
431
|
},
|
|
413
432
|
"accent-surface-hover": {
|
|
414
433
|
base: "accent-surface-text",
|
|
415
|
-
|
|
416
|
-
contrast: [
|
|
434
|
+
tone: "-58",
|
|
435
|
+
contrast: ["AA", "AAA"],
|
|
417
436
|
mode: "fixed"
|
|
418
437
|
},
|
|
419
438
|
"accent-text": {
|
|
420
439
|
base: "accent-surface-text",
|
|
421
|
-
|
|
422
|
-
contrast: [
|
|
440
|
+
tone: "-58",
|
|
441
|
+
contrast: ["AA", "AAA"],
|
|
423
442
|
mode: "fixed"
|
|
424
443
|
},
|
|
425
444
|
"accent-disabled-surface": {
|
|
426
445
|
base: "surface",
|
|
427
|
-
|
|
446
|
+
tone: "+4",
|
|
428
447
|
saturation: .5,
|
|
429
|
-
contrast: [1.4, 1.5],
|
|
430
448
|
mode: "fixed"
|
|
431
449
|
},
|
|
432
450
|
"accent-disabled-surface-text": {
|
|
433
451
|
base: "accent-disabled-surface",
|
|
434
|
-
|
|
452
|
+
tone: "+18",
|
|
435
453
|
saturation: .4,
|
|
436
|
-
contrast: 1.51,
|
|
437
454
|
mode: "fixed"
|
|
438
455
|
}
|
|
439
456
|
});
|
|
@@ -461,21 +478,24 @@ const palette = glaze.palette({
|
|
|
461
478
|
* All Glaze-generated color tokens as a tasty `Styles` map.
|
|
462
479
|
*
|
|
463
480
|
* Keys use `#name` syntax; values are state maps:
|
|
464
|
-
* '#surface': { '': '
|
|
481
|
+
* '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
|
|
465
482
|
*
|
|
466
483
|
* Spread into `useGlobalStyles('body', tokens)` (already wired through
|
|
467
484
|
* `src/components/GlobalStyles.tsx`).
|
|
468
485
|
*/
|
|
469
|
-
const PALETTE_TOKENS = palette.tasty({
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
486
|
+
const PALETTE_TOKENS = palette.tasty({
|
|
487
|
+
prefix: {
|
|
488
|
+
default: "",
|
|
489
|
+
primary: "primary-",
|
|
490
|
+
purple: "purple-",
|
|
491
|
+
success: "success-",
|
|
492
|
+
danger: "danger-",
|
|
493
|
+
warning: "warning-",
|
|
494
|
+
note: "note-",
|
|
495
|
+
special: "special-"
|
|
496
|
+
},
|
|
497
|
+
format: "oklch"
|
|
498
|
+
});
|
|
479
499
|
|
|
480
500
|
//#endregion
|
|
481
501
|
export { PALETTE_TOKENS };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.js","names":[],"sources":["../../src/tokens/palette.ts"],"sourcesContent":["import { glaze } from '@tenphi/glaze';\n\nimport type { ColorMap } from '@tenphi/glaze';\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * Glaze-generated color palette for the Cube UI Kit.\n *\n * Produces light, dark, and high-contrast color variants from a single\n * source of truth. Every color token is emitted as a tasty state map:\n *\n * '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }\n *\n * The `@dark` and `@hc` state aliases are wired up globally in\n * `src/components/Root.tsx` (see `setGlobalPredefinedStates`).\n */\n\n// ============================================================================\n// Hue / saturation seeds\n// ============================================================================\n\nconst PURPLE_HUE = 280.3;\nconst SUCCESS_HUE = 156.9;\nconst DANGER_HUE = 23.1;\nconst WARNING_HUE = 84.3;\nconst NOTE_HUE = 302.3;\n\n/** Seed saturation; per-color saturation factors below are 0–1 of this seed. */\nconst SEED_SATURATION = 80;\n\n// ============================================================================\n// Global Glaze configuration\n// ============================================================================\n\nglaze.configure({\n states: {\n dark: '@dark',\n highContrast: '@hc',\n },\n modes: {\n dark: true,\n highContrast: true,\n },\n});\n\n// ============================================================================\n// Default theme (neutral, primary in palette → exported unprefixed)\n// ============================================================================\n\nconst defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);\n\ndefaultTheme.colors({\n // ---- Surfaces (neutral, very low saturation) ----\n surface: { lightness: 100, saturation: 0.11 },\n 'surface-2': {\n base: 'surface',\n lightness: '-2',\n saturation: 0.15,\n inherit: false,\n },\n 'surface-3': {\n base: 'surface',\n lightness: '-4',\n saturation: 0.19,\n inherit: false,\n },\n 'surface-4': {\n base: 'surface',\n lightness: '-6',\n saturation: 0.2,\n inherit: false,\n },\n\n // ---- Text on surfaces ----\n // The darkest text token uses an *absolute* lightness anchored at the very\n // bottom of Glaze's lightness window (default `[10, 100]` for light /\n // `[15, 95]` for dark). A contrast-driven `surface-text` would top out near\n // L≈21 in light mode (because the solver only needs to *meet* the contrast\n // floor, then stops), leaving it noticeably softer than the legacy `#dark`\n // (OKHSL L=12). Setting `lightness: 2` (mode: 'auto', default) pins the\n // light-mode resolved value to L≈11.8 — pixel-equivalent to the legacy\n // `#dark` — and inverts in dark mode to L≈94 (cr≈13.7 vs the dark surface).\n // High-contrast pushes it all the way to the absolute extremes (L=2 light /\n // L=99 dark, cr≈20.8 / 20.5), unbounded by the normal lightness window.\n //\n // The softer variants below keep `lightness: '-1'` as a directional hint and\n // a numeric `contrast` ratio. Values are tuned so light-mode lightness lands\n // close to the legacy palette (`#dark-02` L=31, `#dark-03` L=49), so the\n // visual look in light mode is preserved while dark mode gets the proper\n // inverted ramp via the contrast solver.\n 'surface-text': {\n base: 'surface',\n lightness: 2,\n saturation: 0.475,\n },\n 'surface-text-soft': {\n base: 'surface',\n lightness: '-1',\n saturation: 0.375,\n contrast: [9, 11],\n inherit: false,\n },\n 'surface-text-soft-2': {\n base: 'surface',\n lightness: '-1',\n saturation: 0.24,\n contrast: [4.5, 5.5],\n inherit: false,\n },\n 'surface-2-text': {\n base: 'surface-2',\n lightness: 2,\n saturation: 0.475,\n inherit: false,\n },\n 'surface-2-text-soft': {\n base: 'surface-2',\n lightness: '-1',\n saturation: 0.375,\n contrast: [9, 11],\n inherit: false,\n },\n 'surface-3-text': {\n base: 'surface-3',\n lightness: 2,\n saturation: 0.475,\n inherit: false,\n },\n 'surface-3-text-soft': {\n base: 'surface-3',\n lightness: '-1',\n saturation: 0.375,\n contrast: [9, 11],\n inherit: false,\n },\n\n // ---- Other neutral UI primitives (default-only) ----\n border: {\n base: 'surface',\n lightness: ['-10', '-20'],\n saturation: 0.175,\n },\n placeholder: {\n base: 'surface',\n lightness: 67,\n saturation: 0.175,\n inherit: false,\n },\n focus: {\n base: 'surface',\n lightness: 71,\n saturation: 0.8625,\n inherit: false,\n },\n disabled: {\n lightness: 80.8,\n saturation: 0.4,\n inherit: false,\n },\n // Disabled fill chip + text — both adaptive (mode 'auto') and\n // *contrast-driven* against `surface` so the disabled state has the same\n // perceived intensity in light and dark schemes.\n //\n // The previous design relied on `#dark.04` (alpha tint) for the chip and\n // `#dark-04` (= `#placeholder`) for text. Because `#dark` is `#surface-text`\n // (anchored to absolute L=2 → flips to L=94 in dark), the resulting\n // composite was much more contrasting in dark mode (chip cr=1.04 → 1.51,\n // text cr=2.21 → 2.75 vs the chip), and combined with `color: '#white'` on\n // PRIMARY-type buttons text-on-chip jumped from cr=1.6 (washed) to cr=6.5\n // (fully readable) — the dark disabled state stopped looking disabled.\n //\n // With these contrast-driven tokens both schemes resolve to the same\n // ratios (chip ~1.4, text ~2.0 vs surface, text-on-chip ~1.4) so the\n // disabled appearance is identical in light, dark, and high-contrast.\n //\n // These two tokens are NEUTRAL — the chip has very low saturation and is\n // used by non-PRIMARY-style disabled states (secondary / outline / neutral\n // / clear / link / item). PRIMARY-style buttons (solid brand fill, white\n // label) use `accent-disabled-surface` + `accent-disabled-surface-text`\n // instead so the disabled chip stays brand-tinted per theme. Both tokens\n // therefore stay default-only (`inherit: false`) — the colored themes get\n // their own brand-tinted disabled chip via the inherited accent variants.\n 'disabled-surface': {\n base: 'surface',\n lightness: '-1',\n saturation: 0.2,\n contrast: [1.1, 1.2],\n inherit: false,\n },\n 'disabled-surface-text': {\n base: 'surface',\n lightness: '-1',\n saturation: 0.3,\n contrast: [2, 2.5],\n inherit: false,\n },\n\n // Fixed-mode \"always dark\" surface for elements that intentionally stay\n // inverted regardless of scheme (tooltips, code blocks, popovers with their\n // own dark theme, etc.). `mode: 'fixed'` bypasses the dark-scheme inversion\n // so the color reads as a dark surface in light, dark, and high-contrast.\n // Pair with `#white` (built-in) for foreground text.\n 'surface-inverse': {\n lightness: 12,\n saturation: 0.475,\n mode: 'fixed',\n inherit: false,\n },\n\n // ---- Accent system (theme-aware, inherited by colored themes) ----\n // Everything here is anchored to a fixed white \"accent-surface-text\" via\n // `mode: 'fixed'` + small *relative* lightness offsets, so accent colors\n // stay visually consistent across light/dark/high-contrast schemes (the\n // brand color does not flip). Contrast targets are explicit numeric ratios\n // — using 'AA'/'AAA' here would let the solver push the color far away\n // from its anchor in dark schemes, breaking the visual relationship\n // between `accent-surface` and `accent-text` (e.g. solid button bg vs.\n // its hover bg). All accent variants therefore share the same shape.\n 'accent-surface-text': { lightness: 100, mode: 'fixed' },\n 'accent-surface': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [4.5, 7],\n mode: 'fixed',\n },\n 'accent-surface-2': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [5, 8],\n mode: 'fixed',\n },\n 'accent-surface-3': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [5.5, 9],\n mode: 'fixed',\n },\n // Hover variant of `accent-surface` — a *fixed*-mode darker shade used as\n // the hover fill for solid PRIMARY-type buttons. Anchored to the same\n // accent-surface-text so it stays in the same hue family. Numeric contrast\n // is tuned so the hover shade lands near today's light-mode \"darker\n // purple\" (≈L=44 light / ≈L=40 dark), giving a visible darkening in BOTH\n // schemes (~7–9 OKHSL lightness points below `accent-surface`). Using a\n // dedicated fixed token avoids the trap of reusing `accent-text` (which\n // is `mode: 'auto'` and inverts direction in dark mode).\n 'accent-surface-hover': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [6, 10],\n mode: 'fixed',\n },\n // Border for accent surfaces — mirrors the default-theme `border` shape\n // (a relative lightness step down from its surface base) but anchored to the\n // fixed accent surface so it stays in the brand hue family and does not flip\n // in dark mode. Used for outlines/dividers on top of `accent-surface`.\n 'accent-surface-border': {\n base: 'accent-surface',\n lightness: '+1',\n contrast: [1.4, 1.8],\n mode: 'fixed',\n },\n // Saturated foreground variants. Anchored to `surface` (NOT `accent-surface`)\n // with `mode: 'auto'` so they adapt with the scheme: in dark mode the solver\n // pushes them lighter to stay readable on the dark surface. Anchoring to the\n // brand fill instead would only enforce contrast against that fill — leaving\n // the dark-mode color washed out against the actual surface they sit on\n // (e.g. SECONDARY button labels). The numeric `contrast` value is the\n // achieved-light-mode ratio under the previous chain, so the visual\n // appearance in light mode is preserved while dark mode is brought up to\n // the same perceived contrast.\n 'accent-text': {\n base: 'surface',\n lightness: '-1',\n saturation: 1,\n contrast: [6.4, 10],\n },\n // Softer adaptive companion to `accent-text` for \"secondary\" foregrounds\n // (LINK base color, subdued labels, etc.). Same anchor + saturation as\n // `accent-text` but a relaxed AA-only contrast floor (4.5/7) so it sits\n // visibly less prominent than the main brand text. Critically, it stays\n // `mode: 'auto'` (default) — unlike the fixed `accent-surface` brand color,\n // which would collapse to cr≈3 against the dark surface and break AA. The\n // adaptive lightness keeps cr≥4.5 in BOTH light and dark schemes.\n 'accent-text-soft': {\n base: 'surface',\n lightness: '-1',\n saturation: 1,\n contrast: [4.5, 7],\n },\n 'accent-icon': {\n base: 'surface',\n lightness: '-1',\n saturation: 0.9375,\n contrast: [3.2, 5],\n },\n\n // Brand-tinted disabled chip + label for PRIMARY-style buttons (solid brand\n // fill, white text). Mirrors the shape of the neutral `disabled-surface` /\n // `disabled-surface-text` pair (`mode: 'auto'`, contrast-driven against\n // `surface`) so the disabled state is scheme-symmetric — chip cr ≈ 1.4 vs\n // surface, label cr ≈ 2.8–3.2 vs surface (≈ 2.1 text-on-chip) in BOTH\n // light and dark. Saturation is bumped up so the chip reads as a *muted\n // brand* color rather than a fully neutral grey, preserving the brand\n // identity even in the disabled state. Inherited per theme, so each colored\n // theme automatically emits `<theme>-accent-disabled-surface` and\n // `<theme>-accent-disabled-surface-text` (e.g. `#danger-accent-disabled-surface`).\n 'accent-disabled-surface': {\n base: 'surface',\n lightness: '-1',\n saturation: 0.5,\n contrast: [1.4, 1.5],\n },\n 'accent-disabled-surface-text': {\n base: 'accent-disabled-surface',\n lightness: '+1',\n saturation: 0.4,\n contrast: 1.51,\n mode: 'fixed',\n },\n\n // ---- Code syntax highlighting (PrismCode) ----\n // A small palette of *adaptive* colored tokens for syntax highlighting.\n // Each token: `mode: 'auto'` (default) + `base: 'surface'` + a numeric\n // `contrast` floor of 4.5 (= WCAG AA) so every token reads against `#surface`\n // in light, dark, and high-contrast schemes alike. Hues mirror the\n // long-standing PrismCode reference (pink keywords / pink functions /\n // orange strings / green numbers / gray comments). `code-attribute` keeps\n // a cyan hue for HTML attribute names / CSS properties / selectors — not\n // exercised in the SQL reference but useful in other languages. Diff\n // insertion / deletion re-use the existing `success-*` / `danger-*` ramps.\n 'code-comment': {\n base: 'surface',\n hue: 280,\n saturation: 0.1,\n lightness: '-1',\n contrast: [4.5, 7],\n inherit: false,\n },\n 'code-punctuation': {\n base: 'surface',\n hue: 348,\n saturation: 0.4,\n lightness: '-1',\n contrast: [4.5, 7],\n inherit: false,\n },\n 'code-keyword': {\n base: 'surface',\n hue: 348,\n saturation: 1,\n lightness: '-1',\n contrast: [5, 7.5],\n inherit: false,\n },\n 'code-string': {\n base: 'surface',\n hue: PURPLE_HUE,\n saturation: 1,\n lightness: '-1',\n contrast: [4.5, 7],\n inherit: false,\n },\n 'code-number': {\n base: 'surface',\n hue: 156,\n saturation: 0.9,\n lightness: '-1',\n contrast: [4.5, 7],\n inherit: false,\n },\n 'code-function': {\n base: 'surface',\n hue: 348,\n saturation: 1,\n lightness: '-1',\n contrast: [5, 7.5],\n inherit: false,\n },\n 'code-attribute': {\n base: 'surface',\n hue: 200,\n saturation: 1,\n lightness: '-1',\n contrast: [4.5, 7],\n inherit: false,\n },\n\n // ---- Loading-animation cube faces ----\n 'loading-face-1': {\n base: 'surface',\n lightness: 98,\n saturation: 0.3,\n contrast: [1.04, 1.5],\n inherit: false,\n },\n 'loading-face-2': {\n base: 'surface',\n lightness: 91,\n saturation: 0.62,\n contrast: [1.24, 2.5],\n inherit: false,\n },\n 'loading-face-3': {\n base: 'surface',\n lightness: 79,\n saturation: 0.66,\n contrast: [1.75, 4],\n inherit: false,\n },\n\n // ---- Shadows (default-only) ----\n 'shadow-sm': {\n type: 'shadow',\n bg: 'surface',\n fg: 'surface-text',\n intensity: 5,\n inherit: false,\n },\n 'shadow-md': {\n type: 'shadow',\n bg: 'surface',\n fg: 'surface-text',\n intensity: 10,\n inherit: false,\n },\n 'shadow-lg': {\n type: 'shadow',\n bg: 'surface',\n fg: 'surface-text',\n intensity: 15,\n inherit: false,\n },\n\n // Backdrop overlay (translucent)\n overlay: { lightness: 10, opacity: 0.5, inherit: false },\n});\n\n// ============================================================================\n// Colored themes\n// ============================================================================\n\n/**\n * Per-colored-theme overrides on top of `defaultTheme`:\n * - `surface` — bumped saturation so the banner bg is visibly tinted.\n * - `border` — bumped saturation so OUTLINE-variant borders pick up the\n * theme hue (used by `#<theme>-border` in `item-themes.ts`). Mirrors the\n * default-theme `border` shape (`base: 'surface'`, lightness window) but\n * with higher saturation. Glaze's `extend({ colors })` redefines each\n * listed color from scratch, so we restate the full definition here.\n */\nconst TINTED_SURFACE_OVERRIDE: ColorMap = {\n surface: { lightness: 96, saturation: 0.8 },\n border: {\n base: 'surface',\n lightness: ['-10', '-20'],\n saturation: 0.5,\n },\n};\n\nconst primaryTheme = defaultTheme.extend({\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst successTheme = defaultTheme.extend({\n hue: SUCCESS_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst dangerTheme = defaultTheme.extend({\n hue: DANGER_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst warningTheme = defaultTheme.extend({\n hue: WARNING_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst noteTheme = defaultTheme.extend({\n hue: NOTE_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\n\n// ============================================================================\n// Special theme (fixed-mode, NOT inherited from defaultTheme)\n// ============================================================================\n\n/**\n * Standalone theme for `special`-variant components (hero CTAs, banners, etc.)\n * that intentionally sit on a dark surface regardless of the active scheme.\n *\n * Every token here is `mode: 'fixed'` so the resolved value is identical in\n * light, dark, and high-contrast. The shape is purpose-built (not a full\n * mirror of `defaultTheme`) — only what `SPECIAL_*_STYLES` in\n * `src/data/item-themes.ts` consumes is emitted.\n *\n * Token rundown:\n * - `surface` — dark L≈12 backdrop (same value as `#surface-inverse`).\n * - `accent-surface` / `accent-surface-2` / `accent-surface-3` —\n * brand-purple PRIMARY fill ramp (default → hover → pressed). Mirrors\n * the `#primary-accent-surface` / `-2` / `-3` ramp on the colored\n * themes so `SPECIAL_PRIMARY_STYLES.fill` can use the same shape.\n * - `accent-surface-hover` — legacy alias kept around for the\n * `#special-hover` color shortcut in `src/tokens/colors.ts`. Item\n * themes themselves no longer reference it.\n * - `accent-surface-text` — fixed white (= built-in `#white`), exposed\n * for explicit references.\n * - `accent-text` — dark-purple foreground readable on white. Used as\n * CLEAR-variant text on the always-white pill, and as the\n * pressed/focused border on the brand-purple primary fill. Matches the\n * legacy `#fixed-primary-text` alias (= `#primary-accent-surface-hover`).\n * - `accent-disabled-surface` / `accent-disabled-surface-text` —\n * brand-tinted disabled chip + label, contrast-driven against the fixed\n * dark `surface` so the disabled state is scheme-symmetric.\n */\nconst specialTheme = glaze(PURPLE_HUE, SEED_SATURATION);\n\nspecialTheme.colors({\n surface: { lightness: 12, saturation: 0.475, mode: 'fixed' },\n\n 'accent-surface-text': { lightness: 100, mode: 'fixed' },\n 'accent-surface': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [4.5, 7],\n mode: 'fixed',\n },\n 'accent-surface-2': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [5, 8],\n mode: 'fixed',\n },\n 'accent-surface-3': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [5.5, 9],\n mode: 'fixed',\n },\n 'accent-surface-border': {\n base: 'accent-surface',\n lightness: '+1',\n contrast: [1.4, 1.8],\n mode: 'fixed',\n },\n 'accent-surface-hover': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [6, 8.5],\n mode: 'fixed',\n },\n 'accent-text': {\n base: 'accent-surface-text',\n lightness: '-1',\n contrast: [6, 8.5],\n mode: 'fixed',\n },\n\n 'accent-disabled-surface': {\n base: 'surface',\n lightness: '+1',\n saturation: 0.5,\n contrast: [1.4, 1.5],\n mode: 'fixed',\n },\n 'accent-disabled-surface-text': {\n base: 'accent-disabled-surface',\n lightness: '+1',\n saturation: 0.4,\n contrast: 1.51,\n mode: 'fixed',\n },\n});\n\n// ============================================================================\n// Palette composition\n// ============================================================================\n\n/**\n * Theme map for the palette.\n *\n * `purple` is the legacy alias for `primary` and resolves to identical tokens\n * (same theme instance, different prefix → no token-value collision).\n *\n * `default` is emitted with an empty prefix (custom map below), so its tokens\n * appear unprefixed (`#surface`, `#border`, …). All other themes are prefixed\n * with `<themeName>-`.\n */\nconst palette = glaze.palette({\n default: defaultTheme,\n primary: primaryTheme,\n purple: primaryTheme,\n success: successTheme,\n danger: dangerTheme,\n warning: warningTheme,\n note: noteTheme,\n special: specialTheme,\n});\n\n// ============================================================================\n// Tasty-formatted token export\n// ============================================================================\n\n/**\n * All Glaze-generated color tokens as a tasty `Styles` map.\n *\n * Keys use `#name` syntax; values are state maps:\n * '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }\n *\n * Spread into `useGlobalStyles('body', tokens)` (already wired through\n * `src/components/GlobalStyles.tsx`).\n */\nexport const PALETTE_TOKENS: Styles = palette.tasty({\n prefix: {\n default: '',\n primary: 'primary-',\n purple: 'purple-',\n success: 'success-',\n danger: 'danger-',\n warning: 'warning-',\n note: 'note-',\n special: 'special-',\n },\n}) as Styles;\n\n/** Re-exported for advanced consumers / tests. */\nexport {\n defaultTheme,\n primaryTheme,\n successTheme,\n dangerTheme,\n warningTheme,\n noteTheme,\n specialTheme,\n palette,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"palette.js","names":[],"sources":["../../src/tokens/palette.ts"],"sourcesContent":["import { glaze } from '@tenphi/glaze';\n\nimport type { ColorMap } from '@tenphi/glaze';\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * Glaze-generated color palette for the Cube UI Kit.\n *\n * Produces light, dark, and high-contrast color variants from a single\n * source of truth. Every color token is emitted as a tasty state map:\n *\n * '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }\n *\n * The `@dark` and `@hc` state aliases are wired up globally in\n * `src/components/Root.tsx` (see `setGlobalPredefinedStates`).\n */\n\n// ============================================================================\n// Hue / saturation seeds\n// ============================================================================\n\nconst PURPLE_HUE = 280.3;\nconst SUCCESS_HUE = 156.9;\nconst DANGER_HUE = 23.1;\nconst WARNING_HUE = 84.3;\nconst NOTE_HUE = 302.3;\n\n/** Seed saturation; per-color saturation factors below are 0–1 of this seed. */\nconst SEED_SATURATION = 65;\n\n// Relative tone ramp from a white surface.\n// Tone is a contrast-uniform 0–100 scale (OKHST). A relative tone delta of -N\n// yields a fixed WCAG contrast step against the base regardless of where the\n// base sits on the scale. These constants form the primary text ramp; the\n// surface-2 / surface-3 variants reuse the same absolute targets via a small\n// offset because their bases are shifted down from `surface`.\nconst TEXT_TONE = -98; // relative tone delta from white surface (~cr 21)\nconst TEXT_SOFT_TONE = -72; // relative tone delta from white surface (~cr 9)\nconst TEXT_SOFT2_TONE = -52; // relative tone delta from white surface (~cr 4.5)\nconst SURFACE_2_TEXT_OFFSET = 2;\nconst SURFACE_3_TEXT_OFFSET = 4;\n\n// ============================================================================\n// Global Glaze configuration\n// ============================================================================\n\nglaze.configure({\n states: {\n dark: '@dark',\n highContrast: '@hc',\n },\n modes: {\n dark: true,\n highContrast: true,\n },\n});\n\n// ============================================================================\n// Default theme (neutral, primary in palette → exported unprefixed)\n// ============================================================================\n\nconst defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);\n\ndefaultTheme.colors({\n // ---- Surfaces (neutral, very low saturation) ----\n surface: { tone: 100, saturation: 0.11 },\n 'surface-2': {\n base: 'surface',\n tone: '-2',\n saturation: 0.1,\n inherit: false,\n },\n 'surface-3': {\n base: 'surface',\n tone: '-4',\n saturation: 0.1,\n inherit: false,\n },\n 'surface-4': {\n base: 'surface',\n tone: '-6',\n saturation: 0.1,\n inherit: false,\n },\n\n // ---- Text on surfaces ----\n // Tone is the contrast-uniform OKHST axis, so a relative tone delta directly\n // encodes a WCAG contrast step. `surface-text` sits at tone 2 (a -98 delta\n // from white), giving the same near-black appearance as the legacy `#dark`.\n // We still keep an `['AA','AAA']` contrast floor on every text-on-surface\n // color so a future low-contrast scale can shift the ramp down without ever\n // breaking readability.\n 'surface-text': {\n base: 'surface',\n tone: `${TEXT_TONE - 2}`,\n saturation: 0.475,\n contrast: ['AA', 'AAA'],\n },\n 'surface-text-soft': {\n base: 'surface',\n tone: `${TEXT_SOFT_TONE - 2}`,\n saturation: 0.375,\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'surface-text-soft-2': {\n base: 'surface',\n tone: `${TEXT_SOFT2_TONE - 2}`,\n saturation: 0.24,\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'surface-2-text': {\n base: 'surface-2',\n tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,\n saturation: 0.475,\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'surface-2-text-soft': {\n base: 'surface-2',\n tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,\n saturation: 0.375,\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'surface-3-text': {\n base: 'surface-3',\n tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,\n saturation: 0.475,\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'surface-3-text-soft': {\n base: 'surface-3',\n tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,\n saturation: 0.375,\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n\n // ---- Other neutral UI primitives (default-only) ----\n border: {\n base: 'surface',\n tone: ['-10', '-20'],\n saturation: 0.175,\n },\n placeholder: {\n base: 'surface',\n tone: '-33',\n saturation: 0.175,\n inherit: false,\n },\n focus: {\n base: 'surface',\n tone: '-29',\n saturation: 0.8625,\n inherit: false,\n },\n disabled: {\n tone: 80.8,\n saturation: 0.4,\n inherit: false,\n },\n // Disabled fill chip + text — both adaptive (mode 'auto') and positioned\n // with relative tone deltas against `surface` so the disabled state has the\n // same perceived intensity in light, dark, and high-contrast schemes. No\n // numeric contrast prop is needed: tone is already on a WCAG-uniform scale.\n //\n // Tone deltas reproduce the legacy palette's disabled appearance exactly:\n // the chip sits ~cr 1.11 vs `surface` (a faint greyed pill for\n // OUTLINE/SECONDARY/item disabled states) and the label ~cr 2.02 vs\n // `surface` — intentionally sub-AA so it reads as disabled while staying the\n // same softness clear/link disabled labels had before. PRIMARY-style buttons\n // use the brand-tinted `accent-disabled-*` variants below instead. Both\n // tokens stay default-only (`inherit: false`) — colored themes inherit their\n // own disabled chip via the accent variants.\n 'disabled-surface': {\n base: 'surface',\n tone: '-3.5',\n saturation: 0.2,\n inherit: false,\n },\n 'disabled-surface-text': {\n base: 'surface',\n tone: '-23',\n saturation: 0.3,\n inherit: false,\n },\n\n // Fixed-mode \"always dark\" surface for elements that intentionally stay\n // inverted regardless of scheme (tooltips, code blocks, popovers with their\n // own dark theme, etc.). `mode: 'fixed'` bypasses the dark-scheme inversion\n // so the color reads as a dark surface in light, dark, and high-contrast.\n // Pair with `#white` (built-in) for foreground text.\n 'surface-inverse': {\n tone: 12,\n saturation: 0.475,\n mode: 'fixed',\n inherit: false,\n },\n\n // ---- Accent system (theme-aware, inherited by colored themes) ----\n // Everything here is anchored to a fixed white \"accent-surface-text\" via\n // `mode: 'fixed'` + relative tone deltas, so accent colors stay visually\n // consistent across light/dark/high-contrast schemes (the brand color does\n // not flip). The solid fills are white-text-on-brand backgrounds, so they\n // keep an `['AA','AAA']` contrast floor even though the chosen tone deltas\n // already exceed it. This leaves room for a future low-contrast scale.\n 'accent-surface-text': { tone: 100, mode: 'fixed' },\n 'accent-surface': {\n base: 'accent-surface-text',\n tone: '-49',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n 'accent-surface-2': {\n base: 'accent-surface-text',\n tone: '-52',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n 'accent-surface-3': {\n base: 'accent-surface-text',\n tone: '-55',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n // Hover variant of `accent-surface` — a *fixed*-mode darker shade used as\n // the hover fill for solid PRIMARY-type buttons. Anchored to the same\n // accent-surface-text so it stays in the same hue family. The relative tone\n // lands a few steps darker than the pressed state in both schemes.\n 'accent-surface-hover': {\n base: 'accent-surface-text',\n tone: '-58',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n // Border for accent surfaces — a small relative tone step away from the\n // brand fill so it stays in the brand hue family and does not flip in dark\n // mode. No contrast prop needed; the delta is chosen directly on the tone\n // scale.\n 'accent-surface-border': {\n base: 'accent-surface',\n tone: '+13',\n mode: 'fixed',\n },\n // Saturated foreground variants. Anchored to `surface` (NOT `accent-surface`)\n // with `mode: 'auto'` so they adapt with the scheme: in dark mode the color\n // stays readable on the dark surface. Anchoring to the brand fill instead\n // would only enforce contrast against that fill, leaving dark-mode text\n // washed out. The relative tone positions each color; `['AA','AAA']` is the\n // readability floor.\n 'accent-text': {\n base: 'surface',\n tone: '-61',\n saturation: 1,\n contrast: ['AA', 'AAA'],\n },\n // Softer adaptive companion to `accent-text` for \"secondary\" foregrounds\n // (LINK base color, subdued labels, etc.). Same anchor + saturation as\n // `accent-text` but a smaller tone delta so it sits visibly less prominent.\n 'accent-text-soft': {\n base: 'surface',\n tone: '-49',\n saturation: 1,\n contrast: ['AA', 'AAA'],\n },\n 'accent-icon': {\n base: 'surface',\n tone: '-38',\n saturation: 0.9375,\n },\n\n // Brand-tinted disabled chip + label for PRIMARY-style buttons (solid brand\n // fill, white text). Mirrors the shape of the neutral `disabled-surface` /\n // `disabled-surface-text` pair (`mode: 'auto'`, relative tone against\n // `surface`) so the disabled state is scheme-symmetric. Saturation is bumped\n // up so the chip reads as a *muted brand* color rather than a fully neutral\n // grey, preserving brand identity even in the disabled state. Inherited per\n // theme, so each colored theme automatically emits\n // `<theme>-accent-disabled-surface` and `<theme>-accent-disabled-surface-text`\n // (e.g. `#danger-accent-disabled-surface`).\n 'accent-disabled-surface': {\n base: 'surface',\n tone: '-13',\n saturation: 0.5,\n },\n 'accent-disabled-surface-text': {\n base: 'accent-disabled-surface',\n tone: 'max',\n saturation: 0.4,\n mode: 'fixed',\n },\n\n // ---- Code syntax highlighting (PrismCode) ----\n // A small palette of *adaptive* colored tokens for syntax highlighting.\n // Each token is anchored to `surface` with a relative tone plus an `['AA',\n // 'AAA']` readability floor. Hues mirror the long-standing PrismCode\n // reference (pink keywords / pink functions / orange strings / green numbers /\n // gray comments). `code-attribute` keeps a cyan hue for HTML attribute names /\n // CSS properties / selectors. Diff insertion / deletion re-use the existing\n // `success-*` / `danger-*` ramps.\n 'code-comment': {\n base: 'surface',\n hue: 280,\n saturation: 0.1,\n tone: '-50',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'code-punctuation': {\n base: 'surface',\n hue: 348,\n saturation: 0.4,\n tone: '-50',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'code-keyword': {\n base: 'surface',\n hue: 348,\n saturation: 1,\n tone: '-54',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'code-string': {\n base: 'surface',\n hue: PURPLE_HUE,\n saturation: 1,\n tone: '-50',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'code-number': {\n base: 'surface',\n hue: 156,\n saturation: 0.9,\n tone: '-50',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'code-function': {\n base: 'surface',\n hue: 348,\n saturation: 1,\n tone: '-54',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n 'code-attribute': {\n base: 'surface',\n hue: 200,\n saturation: 1,\n tone: '-50',\n contrast: ['AA', 'AAA'],\n inherit: false,\n },\n\n // ---- Loading-animation cube faces ----\n // Decorative gradient steps from `surface` to a saturated mid-tone. Tone\n // deltas are chosen directly on the contrast-uniform scale; no contrast prop\n // is needed for a non-text decorative element.\n 'loading-face-1': {\n base: 'surface',\n tone: '-2',\n saturation: 0.3,\n inherit: false,\n },\n 'loading-face-2': {\n base: 'surface',\n tone: '-9',\n saturation: 0.62,\n inherit: false,\n },\n 'loading-face-3': {\n base: 'surface',\n tone: '-21',\n saturation: 0.66,\n inherit: false,\n },\n\n // ---- Shadows (default-only) ----\n 'shadow-sm': {\n type: 'shadow',\n bg: 'surface',\n fg: 'surface-text',\n intensity: 5,\n inherit: false,\n },\n 'shadow-md': {\n type: 'shadow',\n bg: 'surface',\n fg: 'surface-text',\n intensity: 10,\n inherit: false,\n },\n 'shadow-lg': {\n type: 'shadow',\n bg: 'surface',\n fg: 'surface-text',\n intensity: 15,\n inherit: false,\n },\n\n // Backdrop overlay (translucent)\n overlay: { tone: 10, opacity: 0.5, inherit: false },\n});\n\n// ============================================================================\n// Colored themes\n// ============================================================================\n\nconst TINTED_SURFACE_SATURATION = 0.5;\nconst TINTED_SURFACE_TONE_OFFSET = 2;\n\n/**\n * Per-colored-theme overrides on top of `defaultTheme`:\n * - `surface` — bumped saturation so the banner bg is visibly tinted.\n * - `border` — bumped saturation so OUTLINE-variant borders pick up the\n * theme hue (used by `#<theme>-border` in `item-themes.ts`). Mirrors the\n * default-theme `border` shape (`base: 'surface'`, tone window) but\n * with higher saturation. Glaze's `extend({ colors })` redefines each\n * listed color from scratch, so we restate the full definition here.\n */\nconst TINTED_SURFACE_OVERRIDE: ColorMap = {\n surface: {\n tone: 100 - TINTED_SURFACE_TONE_OFFSET,\n saturation: TINTED_SURFACE_SATURATION,\n },\n border: {\n base: 'surface',\n tone: ['-10', '-20'],\n saturation: 0.5,\n },\n 'surface-text': {\n base: 'surface',\n tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET}`,\n saturation: 0.25,\n contrast: ['AA', 'AAA'],\n },\n 'surface-text-soft': {\n base: 'surface',\n tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET}`,\n saturation: 0.25,\n contrast: ['AA', 'AAA'],\n },\n 'surface-text-soft-2': {\n base: 'surface',\n tone: `${TEXT_SOFT2_TONE - TINTED_SURFACE_TONE_OFFSET}`,\n saturation: 0.25,\n contrast: ['AA', 'AAA'],\n },\n};\n\nconst primaryTheme = defaultTheme.extend({\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst successTheme = defaultTheme.extend({\n hue: SUCCESS_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst dangerTheme = defaultTheme.extend({\n hue: DANGER_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst warningTheme = defaultTheme.extend({\n hue: WARNING_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\nconst noteTheme = defaultTheme.extend({\n hue: NOTE_HUE,\n colors: TINTED_SURFACE_OVERRIDE,\n});\n\n// ============================================================================\n// Special theme (fixed-mode, NOT inherited from defaultTheme)\n// ============================================================================\n\n/**\n * Standalone theme for `special`-variant components (hero CTAs, banners, etc.)\n * that intentionally sit on a dark surface regardless of the active scheme.\n *\n * Every token here is `mode: 'fixed'` so the resolved value is identical in\n * light, dark, and high-contrast. The shape is purpose-built (not a full\n * mirror of `defaultTheme`) — only what `SPECIAL_*_STYLES` in\n * `src/data/item-themes.ts` consumes is emitted.\n *\n * Token rundown:\n * - `surface` — dark L≈12 backdrop (same value as `#surface-inverse`).\n * - `accent-surface` / `accent-surface-2` / `accent-surface-3` —\n * brand-purple PRIMARY fill ramp (default → hover → pressed). Mirrors\n * the `#primary-accent-surface` / `-2` / `-3` ramp on the colored\n * themes so `SPECIAL_PRIMARY_STYLES.fill` can use the same shape.\n * - `accent-surface-hover` — legacy alias kept around for the\n * `#special-hover` color shortcut in `src/tokens/colors.ts`. Item\n * themes themselves no longer reference it.\n * - `accent-surface-text` — fixed white (= built-in `#white`), exposed\n * for explicit references.\n * - `accent-text` — dark-purple foreground readable on white. Used as\n * CLEAR-variant text on the always-white pill, and as the\n * pressed/focused border on the brand-purple primary fill. Matches the\n * legacy `#fixed-primary-text` alias (= `#primary-accent-surface-hover`).\n * - `accent-disabled-surface` / `accent-disabled-surface-text` —\n * brand-tinted disabled chip + label, positioned with relative tone\n * deltas against the fixed dark `surface` so the disabled state is\n * scheme-symmetric.\n */\nconst specialTheme = glaze(PURPLE_HUE, SEED_SATURATION);\n\nspecialTheme.colors({\n surface: { tone: 12, saturation: 0.475, mode: 'fixed' },\n\n 'accent-surface-text': { tone: 100, mode: 'fixed' },\n 'accent-surface': {\n base: 'accent-surface-text',\n tone: '-49',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n 'accent-surface-2': {\n base: 'accent-surface-text',\n tone: '-52',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n 'accent-surface-3': {\n base: 'accent-surface-text',\n tone: '-55',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n 'accent-surface-border': {\n base: 'accent-surface',\n tone: '+13',\n mode: 'fixed',\n },\n 'accent-surface-hover': {\n base: 'accent-surface-text',\n tone: '-58',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n 'accent-text': {\n base: 'accent-surface-text',\n tone: '-58',\n contrast: ['AA', 'AAA'],\n mode: 'fixed',\n },\n\n 'accent-disabled-surface': {\n base: 'surface',\n tone: '+4',\n saturation: 0.5,\n mode: 'fixed',\n },\n 'accent-disabled-surface-text': {\n base: 'accent-disabled-surface',\n tone: '+18',\n saturation: 0.4,\n mode: 'fixed',\n },\n});\n\n// ============================================================================\n// Palette composition\n// ============================================================================\n\n/**\n * Theme map for the palette.\n *\n * `purple` is the legacy alias for `primary` and resolves to identical tokens\n * (same theme instance, different prefix → no token-value collision).\n *\n * `default` is emitted with an empty prefix (custom map below), so its tokens\n * appear unprefixed (`#surface`, `#border`, …). All other themes are prefixed\n * with `<themeName>-`.\n */\nconst palette = glaze.palette({\n default: defaultTheme,\n primary: primaryTheme,\n purple: primaryTheme,\n success: successTheme,\n danger: dangerTheme,\n warning: warningTheme,\n note: noteTheme,\n special: specialTheme,\n});\n\n// ============================================================================\n// Tasty-formatted token export\n// ============================================================================\n\n/**\n * All Glaze-generated color tokens as a tasty `Styles` map.\n *\n * Keys use `#name` syntax; values are state maps:\n * '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }\n *\n * Spread into `useGlobalStyles('body', tokens)` (already wired through\n * `src/components/GlobalStyles.tsx`).\n */\nexport const PALETTE_TOKENS: Styles = palette.tasty({\n prefix: {\n default: '',\n primary: 'primary-',\n purple: 'purple-',\n success: 'success-',\n danger: 'danger-',\n warning: 'warning-',\n note: 'note-',\n special: 'special-',\n },\n format: 'oklch',\n}) as Styles;\n\n/** Re-exported for advanced consumers / tests. */\nexport {\n defaultTheme,\n primaryTheme,\n successTheme,\n dangerTheme,\n warningTheme,\n noteTheme,\n specialTheme,\n palette,\n};\n"],"mappings":"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"}
|
package/dist/tokens/shadows.js
CHANGED