@sixthshift/design-system 0.5.0 → 0.7.0
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/README.md +132 -87
- package/dist/components/Badge/Badge.d.ts +12 -4
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +8 -6
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Button/Button.d.ts +26 -3
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +14 -5
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +1 -0
- package/dist/components/Calendar/Calendar.js.map +1 -1
- package/dist/components/Calendar/CalendarView.d.ts +0 -11
- package/dist/components/Calendar/CalendarView.d.ts.map +1 -1
- package/dist/components/Calendar/CalendarView.js +1 -0
- package/dist/components/Calendar/CalendarView.js.map +1 -1
- package/dist/components/Calendar/calendar.hooks.d.ts.map +1 -1
- package/dist/components/Calendar/calendar.hooks.js +1 -0
- package/dist/components/Calendar/calendar.hooks.js.map +1 -1
- package/dist/components/Card/Card.d.ts +2 -2
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +3 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +1 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +1 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Code/Editor/Editor.d.ts.map +1 -1
- package/dist/components/Code/Editor/Editor.js +1 -0
- package/dist/components/Code/Editor/Editor.js.map +1 -1
- package/dist/components/Code/Workspace/StatusBar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/StatusBar.js +1 -0
- package/dist/components/Code/Workspace/StatusBar.js.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.js +1 -0
- package/dist/components/Code/Workspace/Toolbar.js.map +1 -1
- package/dist/components/Code/Workspace/Workspace.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Workspace.js +1 -0
- package/dist/components/Code/Workspace/Workspace.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +7 -1
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DatePicker/DateSegments.d.ts.map +1 -1
- package/dist/components/DatePicker/DateSegments.js +1 -0
- package/dist/components/DatePicker/DateSegments.js.map +1 -1
- package/dist/components/DatePicker/datepicker.hooks.d.ts.map +1 -1
- package/dist/components/DatePicker/datepicker.hooks.js +1 -0
- package/dist/components/DatePicker/datepicker.hooks.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +1 -0
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.d.ts.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.js +7 -1
- package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimeSegments.d.ts.map +1 -1
- package/dist/components/DateTimePicker/DateTimeSegments.js +1 -0
- package/dist/components/DateTimePicker/DateTimeSegments.js.map +1 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +1 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js +7 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +31 -10
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js +46 -17
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/FormField/index.d.ts +2 -2
- package/dist/components/FormField/index.d.ts.map +1 -1
- package/dist/components/FormField/index.js +1 -1
- package/dist/components/FormField/index.js.map +1 -1
- package/dist/components/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/components/HoverCard/HoverCard.js +4 -0
- package/dist/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContent.d.ts +16 -2
- package/dist/components/HoverCard/components/HoverCardContent.d.ts.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContent.js +4 -3
- package/dist/components/HoverCard/components/HoverCardContent.js.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContext.d.ts +2 -0
- package/dist/components/HoverCard/components/HoverCardContext.d.ts.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContext.js +1 -0
- package/dist/components/HoverCard/components/HoverCardContext.js.map +1 -1
- package/dist/components/HoverCard/components/HoverCardTrigger.d.ts.map +1 -1
- package/dist/components/HoverCard/components/HoverCardTrigger.js +1 -0
- package/dist/components/HoverCard/components/HoverCardTrigger.js.map +1 -1
- package/dist/components/Message/Message.d.ts +5 -1
- package/dist/components/Message/Message.d.ts.map +1 -1
- package/dist/components/Message/Message.js +3 -3
- package/dist/components/Message/Message.js.map +1 -1
- package/dist/components/Modal/Modal.d.ts +26 -9
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/Modal/Modal.js +46 -21
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/components/ModalContext.d.ts.map +1 -1
- package/dist/components/Modal/components/ModalContext.js +1 -0
- package/dist/components/Modal/components/ModalContext.js.map +1 -1
- package/dist/components/Modal/components/ModalHeader.d.ts.map +1 -1
- package/dist/components/Modal/components/ModalHeader.js +1 -0
- package/dist/components/Modal/components/ModalHeader.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts +3 -1
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +8 -0
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/components/PopoverBody.d.ts +16 -2
- package/dist/components/Popover/components/PopoverBody.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverBody.js +4 -3
- package/dist/components/Popover/components/PopoverBody.js.map +1 -1
- package/dist/components/Popover/components/PopoverClose.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverClose.js +1 -0
- package/dist/components/Popover/components/PopoverClose.js.map +1 -1
- package/dist/components/Popover/components/PopoverContext.d.ts +2 -0
- package/dist/components/Popover/components/PopoverContext.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverContext.js +1 -0
- package/dist/components/Popover/components/PopoverContext.js.map +1 -1
- package/dist/components/Popover/components/PopoverTrigger.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverTrigger.js +1 -0
- package/dist/components/Popover/components/PopoverTrigger.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.d.ts.map +1 -1
- package/dist/components/RadioButton/RadioButton.js +1 -0
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js +1 -0
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +10 -7
- package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/SearchInput/SearchInput.js +11 -6
- package/dist/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/components/Select/Select.d.ts +6 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +11 -4
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/SelectDropdown.d.ts +3 -1
- package/dist/components/Select/SelectDropdown.d.ts.map +1 -1
- package/dist/components/Select/SelectDropdown.js +3 -2
- package/dist/components/Select/SelectDropdown.js.map +1 -1
- package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
- package/dist/components/Select/SelectTrigger.js +5 -1
- package/dist/components/Select/SelectTrigger.js.map +1 -1
- package/dist/components/Select/useSelectKeyboard.d.ts.map +1 -1
- package/dist/components/Select/useSelectKeyboard.js +1 -0
- package/dist/components/Select/useSelectKeyboard.js.map +1 -1
- package/dist/components/Sheet/Sheet.d.ts +12 -0
- package/dist/components/Sheet/Sheet.d.ts.map +1 -1
- package/dist/components/Sheet/Sheet.js +26 -10
- package/dist/components/Sheet/Sheet.js.map +1 -1
- package/dist/components/Sheet/components/SheetContext.d.ts.map +1 -1
- package/dist/components/Sheet/components/SheetContext.js +1 -0
- package/dist/components/Sheet/components/SheetContext.js.map +1 -1
- package/dist/components/Sheet/components/SheetHeader.d.ts.map +1 -1
- package/dist/components/Sheet/components/SheetHeader.js +1 -0
- package/dist/components/Sheet/components/SheetHeader.js.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts +2 -2
- package/dist/components/Spinner/Spinner.js +2 -2
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +1 -0
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.js +1 -0
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Tabs/components/TabsContext.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsContext.js +1 -0
- package/dist/components/Tabs/components/TabsContext.js.map +1 -1
- package/dist/components/Tabs/components/TabsList.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsList.js +1 -0
- package/dist/components/Tabs/components/TabsList.js.map +1 -1
- package/dist/components/Tabs/components/TabsPanels.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsPanels.js +1 -0
- package/dist/components/Tabs/components/TabsPanels.js.map +1 -1
- package/dist/components/Tabs/components/TabsTrigger.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsTrigger.js +2 -1
- package/dist/components/Tabs/components/TabsTrigger.js.map +1 -1
- package/dist/components/TagChip/TagChip.d.ts.map +1 -1
- package/dist/components/TagChip/TagChip.js +1 -0
- package/dist/components/TagChip/TagChip.js.map +1 -1
- package/dist/components/TagInput/TagInput.d.ts +8 -2
- package/dist/components/TagInput/TagInput.d.ts.map +1 -1
- package/dist/components/TagInput/TagInput.js +8 -5
- package/dist/components/TagInput/TagInput.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +21 -5
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +31 -5
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/TimePicker/PeriodSelector.d.ts.map +1 -1
- package/dist/components/TimePicker/PeriodSelector.js +1 -0
- package/dist/components/TimePicker/PeriodSelector.js.map +1 -1
- package/dist/components/TimePicker/TimeColumn.d.ts.map +1 -1
- package/dist/components/TimePicker/TimeColumn.js +1 -0
- package/dist/components/TimePicker/TimeColumn.js.map +1 -1
- package/dist/components/TimePicker/TimePicker.d.ts.map +1 -1
- package/dist/components/TimePicker/TimePicker.js +7 -1
- package/dist/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/components/TimePicker/TimeSegments.d.ts.map +1 -1
- package/dist/components/TimePicker/TimeSegments.js +1 -0
- package/dist/components/TimePicker/TimeSegments.js.map +1 -1
- package/dist/components/Toast/Toast.d.ts +16 -2
- package/dist/components/Toast/Toast.d.ts.map +1 -1
- package/dist/components/Toast/Toast.js +17 -7
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +5 -1
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.js +4 -3
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +3 -0
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.js +4 -3
- package/dist/components/ToggleGroup/ToggleGroupMultiple.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +3 -0
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupSingle.js +4 -3
- package/dist/components/ToggleGroup/ToggleGroupSingle.js.map +1 -1
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts +13 -0
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +3 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +4 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipBody.d.ts +16 -2
- package/dist/components/Tooltip/components/TooltipBody.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipBody.js +4 -3
- package/dist/components/Tooltip/components/TooltipBody.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipContext.d.ts +2 -0
- package/dist/components/Tooltip/components/TooltipContext.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipContext.js +1 -0
- package/dist/components/Tooltip/components/TooltipContext.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipTrigger.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipTrigger.js +1 -0
- package/dist/components/Tooltip/components/TooltipTrigger.js.map +1 -1
- package/dist/hooks/useCollapsible.d.ts.map +1 -1
- package/dist/hooks/useCollapsible.js +1 -0
- package/dist/hooks/useCollapsible.js.map +1 -1
- package/dist/hooks/useControllableState.d.ts.map +1 -1
- package/dist/hooks/useControllableState.js +1 -0
- package/dist/hooks/useControllableState.js.map +1 -1
- package/dist/hooks/useDebouncedCallback.d.ts.map +1 -1
- package/dist/hooks/useDebouncedCallback.js +1 -0
- package/dist/hooks/useDebouncedCallback.js.map +1 -1
- package/dist/hooks/useDebouncedState.d.ts.map +1 -1
- package/dist/hooks/useDebouncedState.js +1 -0
- package/dist/hooks/useDebouncedState.js.map +1 -1
- package/dist/hooks/useDeviceFormFactor.d.ts.map +1 -1
- package/dist/hooks/useDeviceFormFactor.js +1 -0
- package/dist/hooks/useDeviceFormFactor.js.map +1 -1
- package/dist/hooks/useLocalStorage.d.ts.map +1 -1
- package/dist/hooks/useLocalStorage.js +1 -0
- package/dist/hooks/useLocalStorage.js.map +1 -1
- package/dist/hooks/useMergedFloatingRef.d.ts.map +1 -1
- package/dist/hooks/useMergedFloatingRef.js +1 -0
- package/dist/hooks/useMergedFloatingRef.js.map +1 -1
- package/dist/hooks/usePresence.d.ts.map +1 -1
- package/dist/hooks/usePresence.js +1 -0
- package/dist/hooks/usePresence.js.map +1 -1
- package/dist/hooks/useStack.d.ts.map +1 -1
- package/dist/hooks/useStack.js +34 -10
- package/dist/hooks/useStack.js.map +1 -1
- package/dist/hooks/useTheme.d.ts.map +1 -1
- package/dist/hooks/useTheme.js +1 -0
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/internal/PickerField.d.ts.map +1 -1
- package/dist/internal/PickerField.js +1 -0
- package/dist/internal/PickerField.js.map +1 -1
- package/dist/internal/SegmentedField.d.ts.map +1 -1
- package/dist/internal/SegmentedField.js +1 -0
- package/dist/internal/SegmentedField.js.map +1 -1
- package/dist/internal/brandScope.d.ts +25 -0
- package/dist/internal/brandScope.d.ts.map +1 -0
- package/dist/internal/brandScope.js +37 -0
- package/dist/internal/brandScope.js.map +1 -0
- package/dist/internal/escapeLayers.d.ts +12 -0
- package/dist/internal/escapeLayers.d.ts.map +1 -0
- package/dist/internal/escapeLayers.js +48 -0
- package/dist/internal/escapeLayers.js.map +1 -0
- package/dist/lib/ErrorBoundary.d.ts.map +1 -1
- package/dist/lib/ErrorBoundary.js +1 -0
- package/dist/lib/ErrorBoundary.js.map +1 -1
- package/dist/lib/contexts/ComponentsContext/ComponentsContext.d.ts.map +1 -1
- package/dist/lib/contexts/ComponentsContext/ComponentsContext.js +1 -0
- package/dist/lib/contexts/ComponentsContext/ComponentsContext.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/OverlayContext.d.ts +9 -4
- package/dist/lib/contexts/OverlayContext/OverlayContext.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/OverlayContext.js +25 -12
- package/dist/lib/contexts/OverlayContext/OverlayContext.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/ToastStack.d.ts +20 -0
- package/dist/lib/contexts/OverlayContext/ToastStack.d.ts.map +1 -0
- package/dist/lib/contexts/OverlayContext/ToastStack.js +45 -0
- package/dist/lib/contexts/OverlayContext/ToastStack.js.map +1 -0
- package/dist/lib/contexts/OverlayContext/hooks/useModal.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/hooks/useModal.js +1 -0
- package/dist/lib/contexts/OverlayContext/hooks/useModal.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/hooks/useToast.d.ts +27 -10
- package/dist/lib/contexts/OverlayContext/hooks/useToast.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/hooks/useToast.js +31 -49
- package/dist/lib/contexts/OverlayContext/hooks/useToast.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/index.d.ts +2 -0
- package/dist/lib/contexts/OverlayContext/index.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/index.js +2 -0
- package/dist/lib/contexts/OverlayContext/index.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/toastStore.d.ts +68 -0
- package/dist/lib/contexts/OverlayContext/toastStore.d.ts.map +1 -0
- package/dist/lib/contexts/OverlayContext/toastStore.js +69 -0
- package/dist/lib/contexts/OverlayContext/toastStore.js.map +1 -0
- package/dist/lib/withErrorBoundary.d.ts.map +1 -1
- package/dist/lib/withErrorBoundary.js +1 -0
- package/dist/lib/withErrorBoundary.js.map +1 -1
- package/dist/lib/withSuspenseAndErrorBoundary.d.ts.map +1 -1
- package/dist/lib/withSuspenseAndErrorBoundary.js +1 -0
- package/dist/lib/withSuspenseAndErrorBoundary.js.map +1 -1
- package/dist/{theme/schema.d.ts → theming/vocabulary.d.ts} +4 -4
- package/dist/theming/vocabulary.d.ts.map +1 -0
- package/dist/{theme/schema.js → theming/vocabulary.js} +4 -4
- package/dist/theming/vocabulary.js.map +1 -0
- package/package.json +18 -6
- package/src/components/Badge/Badge.tsx +12 -6
- package/src/components/Button/Button.tsx +25 -5
- package/src/{theme/recipes/button.css → components/Button/button.recipe.css} +2 -2
- package/src/components/Calendar/Calendar.tsx +2 -0
- package/src/components/Calendar/CalendarView.tsx +2 -0
- package/src/components/Calendar/calendar.hooks.ts +2 -0
- package/src/components/Card/Card.tsx +4 -2
- package/src/components/Checkbox/Checkbox.tsx +2 -0
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +2 -0
- package/src/components/Code/Editor/Editor.tsx +2 -0
- package/src/components/Code/Workspace/StatusBar.tsx +2 -0
- package/src/components/Code/Workspace/Toolbar.tsx +2 -0
- package/src/components/Code/Workspace/Workspace.tsx +2 -0
- package/src/components/DatePicker/DatePicker.tsx +10 -0
- package/src/components/DatePicker/DateSegments.tsx +2 -0
- package/src/components/DatePicker/datepicker.hooks.ts +2 -0
- package/src/components/DateRangePicker/DateRangePicker.tsx +2 -0
- package/src/components/DateTimePicker/DateTimePicker.tsx +10 -1
- package/src/components/DateTimePicker/DateTimeSegments.tsx +2 -0
- package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx +10 -1
- package/src/components/FormField/FormField.tsx +94 -42
- package/src/components/FormField/index.ts +2 -2
- package/src/components/HoverCard/HoverCard.tsx +5 -0
- package/src/components/HoverCard/components/HoverCardContent.tsx +13 -3
- package/src/components/HoverCard/components/HoverCardContext.tsx +4 -0
- package/src/components/HoverCard/components/HoverCardTrigger.tsx +2 -0
- package/src/components/Message/Message.tsx +27 -23
- package/src/components/Modal/Modal.tsx +88 -51
- package/src/components/Modal/components/ModalContext.tsx +2 -0
- package/src/components/Modal/components/ModalHeader.tsx +2 -0
- package/src/components/Popover/Popover.tsx +10 -0
- package/src/components/Popover/components/PopoverBody.tsx +13 -3
- package/src/components/Popover/components/PopoverClose.tsx +2 -0
- package/src/components/Popover/components/PopoverContext.tsx +4 -0
- package/src/components/Popover/components/PopoverTrigger.tsx +2 -0
- package/src/components/RadioButton/RadioButton.tsx +2 -0
- package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +2 -0
- package/src/components/SearchInput/SearchInput.tsx +15 -8
- package/src/components/Select/Select.tsx +27 -2
- package/src/components/Select/SelectDropdown.tsx +6 -0
- package/src/components/Select/SelectTrigger.tsx +5 -0
- package/src/components/Select/useSelectKeyboard.ts +2 -0
- package/src/components/Sheet/Sheet.tsx +59 -34
- package/src/components/Sheet/components/SheetContext.tsx +2 -0
- package/src/components/Sheet/components/SheetHeader.tsx +2 -0
- package/src/components/Spinner/Spinner.tsx +2 -2
- package/src/components/Switch/Switch.tsx +2 -0
- package/src/components/Tabs/Tabs.tsx +2 -0
- package/src/components/Tabs/components/TabsContext.tsx +2 -0
- package/src/components/Tabs/components/TabsList.tsx +2 -0
- package/src/components/Tabs/components/TabsPanels.tsx +2 -0
- package/src/components/Tabs/components/TabsTrigger.tsx +3 -1
- package/src/{theme/recipes/tabs.css → components/Tabs/tabs.recipe.css} +1 -1
- package/src/components/TagChip/TagChip.tsx +2 -0
- package/src/components/TagInput/TagInput.tsx +15 -6
- package/src/components/Textarea/Textarea.tsx +42 -6
- package/src/{theme/recipes/textarea.css → components/Textarea/textarea.recipe.css} +1 -1
- package/src/components/TimePicker/PeriodSelector.tsx +2 -0
- package/src/components/TimePicker/TimeColumn.tsx +2 -0
- package/src/components/TimePicker/TimePicker.tsx +10 -0
- package/src/components/TimePicker/TimeSegments.tsx +2 -0
- package/src/components/Toast/Toast.tsx +26 -6
- package/src/components/Toggle/Toggle.tsx +20 -3
- package/src/components/ToggleGroup/ToggleGroupMultiple.tsx +8 -1
- package/src/components/ToggleGroup/ToggleGroupSingle.tsx +8 -0
- package/src/components/ToggleGroup/toggleGroup.types.ts +13 -0
- package/src/components/Tooltip/Tooltip.tsx +5 -0
- package/src/components/Tooltip/components/TooltipBody.tsx +13 -3
- package/src/components/Tooltip/components/TooltipContext.tsx +4 -0
- package/src/components/Tooltip/components/TooltipTrigger.tsx +2 -0
- package/src/hooks/useCollapsible.ts +2 -0
- package/src/hooks/useControllableState.ts +2 -0
- package/src/hooks/useDebouncedCallback.ts +2 -0
- package/src/hooks/useDebouncedState.ts +2 -0
- package/src/hooks/useDeviceFormFactor.ts +2 -0
- package/src/hooks/useLocalStorage.ts +2 -0
- package/src/hooks/useMergedFloatingRef.ts +2 -0
- package/src/hooks/usePresence.ts +2 -0
- package/src/hooks/useStack.ts +35 -12
- package/src/hooks/useTheme.ts +2 -0
- package/src/internal/PickerField.tsx +2 -0
- package/src/internal/SegmentedField.tsx +2 -0
- package/src/internal/brandScope.ts +39 -0
- package/src/internal/escapeLayers.ts +53 -0
- package/src/lib/ErrorBoundary.tsx +2 -0
- package/src/lib/contexts/ComponentsContext/ComponentsContext.tsx +2 -0
- package/src/lib/contexts/OverlayContext/OverlayContext.tsx +42 -26
- package/src/lib/contexts/OverlayContext/ToastStack.tsx +71 -0
- package/src/lib/contexts/OverlayContext/hooks/useModal.tsx +2 -0
- package/src/lib/contexts/OverlayContext/hooks/useToast.ts +30 -73
- package/src/lib/contexts/OverlayContext/index.ts +2 -0
- package/src/lib/contexts/OverlayContext/toastStore.ts +138 -0
- package/src/lib/withErrorBoundary.tsx +2 -0
- package/src/lib/withSuspenseAndErrorBoundary.tsx +2 -0
- package/src/theme/linen/index.css +11 -0
- package/src/theme/linen/palette.css +87 -0
- package/src/theme/linen/theme.css +371 -0
- package/src/theming/tailwind.css +356 -0
- package/src/{theme/schema.ts → theming/vocabulary.ts} +3 -3
- package/dist/theme/index.d.ts +0 -9
- package/dist/theme/index.d.ts.map +0 -1
- package/dist/theme/index.js +0 -8
- package/dist/theme/index.js.map +0 -1
- package/dist/theme/schema.d.ts.map +0 -1
- package/dist/theme/schema.js.map +0 -1
- package/src/theme/index.ts +0 -39
- package/src/theme/recipes/index.css +0 -28
- package/src/theme/tokens.css +0 -824
- /package/src/{theme/recipes/badge.css → components/Badge/badge.recipe.css} +0 -0
- /package/src/{theme/recipes/card.css → components/Card/card.recipe.css} +0 -0
- /package/src/{theme/recipes/checkbox.css → components/Checkbox/checkbox.recipe.css} +0 -0
- /package/src/{theme/recipes/field.css → components/Field/field.recipe.css} +0 -0
- /package/src/{theme/recipes/input.css → components/Input/input.recipe.css} +0 -0
- /package/src/{theme/recipes/message.css → components/Message/message.recipe.css} +0 -0
- /package/src/{theme/recipes/modal.css → components/Modal/modal.recipe.css} +0 -0
- /package/src/{theme/recipes/radio-button.css → components/RadioButton/radio-button.recipe.css} +0 -0
- /package/src/{theme/recipes/search-input.css → components/SearchInput/search-input.recipe.css} +0 -0
- /package/src/{theme/recipes/select.css → components/Select/select.recipe.css} +0 -0
- /package/src/{theme/recipes/sheet.css → components/Sheet/sheet.recipe.css} +0 -0
- /package/src/{theme/recipes/spinner.css → components/Spinner/spinner.recipe.css} +0 -0
- /package/src/{theme/recipes/switch.css → components/Switch/switch.recipe.css} +0 -0
- /package/src/{theme/recipes/tag-chip.css → components/TagChip/tag-chip.recipe.css} +0 -0
- /package/src/{theme/recipes/toggle.css → components/Toggle/toggle.recipe.css} +0 -0
|
@@ -0,0 +1,356 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The system's theme-independent half, CSS-first (v4) — everything a theme
|
|
3
|
+
* folder does NOT contain. A theme imports its own theme.css plus this file,
|
|
4
|
+
* and is complete:
|
|
5
|
+
*
|
|
6
|
+
* - the component recipes (layer 2), imported first: every component's
|
|
7
|
+
* `*.recipe.css`, each inside `@layer components`. Adding a component
|
|
8
|
+
* adds one import line here; `check:recipes` fails the build on a recipe
|
|
9
|
+
* nobody imports, or an import pointing at nothing.
|
|
10
|
+
* - `@theme` tells Tailwind which utilities exist. Every semantic token
|
|
11
|
+
* needs an entry here or its class does not compile. Component tokens do
|
|
12
|
+
* not — layer 2 is read as plain `var()` in CSS, never through a utility.
|
|
13
|
+
* - `@layer base` holds the few global rules the components genuinely need.
|
|
14
|
+
* App opinions (page background, scroll behaviour) are deliberately not
|
|
15
|
+
* here: a library has no business restyling its consumer's page.
|
|
16
|
+
* - Stacking order, animations, and the `dark:` variant — theme-independent
|
|
17
|
+
* by design.
|
|
18
|
+
* - the `overrides` layer, declared last so it outranks `components` and
|
|
19
|
+
* `utilities`: the consumer's home for component-token overrides. Naming
|
|
20
|
+
* the four Tailwind layers too pins the whole order even when this file
|
|
21
|
+
* loads before Tailwind's own declaration.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
@layer theme, base, components, utilities, overrides;
|
|
25
|
+
|
|
26
|
+
@import "../components/Button/button.recipe.css";
|
|
27
|
+
@import "../components/Badge/badge.recipe.css";
|
|
28
|
+
@import "../components/Message/message.recipe.css";
|
|
29
|
+
@import "../components/Spinner/spinner.recipe.css";
|
|
30
|
+
@import "../components/Tabs/tabs.recipe.css";
|
|
31
|
+
@import "../components/Toggle/toggle.recipe.css";
|
|
32
|
+
@import "../components/Input/input.recipe.css";
|
|
33
|
+
@import "../components/Textarea/textarea.recipe.css";
|
|
34
|
+
@import "../components/SearchInput/search-input.recipe.css";
|
|
35
|
+
@import "../components/Field/field.recipe.css";
|
|
36
|
+
@import "../components/Checkbox/checkbox.recipe.css";
|
|
37
|
+
@import "../components/RadioButton/radio-button.recipe.css";
|
|
38
|
+
@import "../components/Switch/switch.recipe.css";
|
|
39
|
+
@import "../components/Card/card.recipe.css";
|
|
40
|
+
@import "../components/Modal/modal.recipe.css";
|
|
41
|
+
@import "../components/Sheet/sheet.recipe.css";
|
|
42
|
+
@import "../components/Select/select.recipe.css";
|
|
43
|
+
@import "../components/TagChip/tag-chip.recipe.css";
|
|
44
|
+
|
|
45
|
+
/* =============================================================================
|
|
46
|
+
3. TAILWIND THEME
|
|
47
|
+
============================================================================= */
|
|
48
|
+
|
|
49
|
+
/* Theming is a runtime variable swap, not a build-time variant, so `dark:` is
|
|
50
|
+
only here for consumers who reach for it. Components never use it. */
|
|
51
|
+
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
|
52
|
+
|
|
53
|
+
@theme inline {
|
|
54
|
+
/* Drop Tailwind's stock palette: a `bg-red-500` in component source is a
|
|
55
|
+
token that was never designed, so it should fail to compile. */
|
|
56
|
+
--color-*: initial;
|
|
57
|
+
--color-white: #ffffff;
|
|
58
|
+
--color-black: #000000;
|
|
59
|
+
|
|
60
|
+
/* Background */
|
|
61
|
+
--color-bg-strong: var(--bg-strong);
|
|
62
|
+
--color-bg-strong-hovered: var(--bg-strong-hovered);
|
|
63
|
+
--color-bg-strong-pressed: var(--bg-strong-pressed);
|
|
64
|
+
--color-bg-strong-disabled: var(--bg-strong-disabled);
|
|
65
|
+
--color-bg-normal: var(--bg-normal);
|
|
66
|
+
--color-bg-normal-hovered: var(--bg-normal-hovered);
|
|
67
|
+
--color-bg-normal-pressed: var(--bg-normal-pressed);
|
|
68
|
+
--color-bg-normal-disabled: var(--bg-normal-disabled);
|
|
69
|
+
--color-bg-subtle: var(--bg-subtle);
|
|
70
|
+
--color-bg-subtle-hovered: var(--bg-subtle-hovered);
|
|
71
|
+
--color-bg-subtle-pressed: var(--bg-subtle-pressed);
|
|
72
|
+
--color-bg-subtle-disabled: var(--bg-subtle-disabled);
|
|
73
|
+
--color-bg-brand-subtle: var(--bg-brand-subtle);
|
|
74
|
+
--color-bg-brand-subtle-hovered: var(--bg-brand-subtle-hovered);
|
|
75
|
+
--color-bg-brand-subtle-pressed: var(--bg-brand-subtle-pressed);
|
|
76
|
+
--color-bg-brand-subtle-disabled: var(--bg-brand-subtle-disabled);
|
|
77
|
+
--color-bg-brand: var(--bg-brand);
|
|
78
|
+
--color-bg-brand-hovered: var(--bg-brand-hovered);
|
|
79
|
+
--color-bg-brand-pressed: var(--bg-brand-pressed);
|
|
80
|
+
--color-bg-brand-disabled: var(--bg-brand-disabled);
|
|
81
|
+
--color-bg-brand-strong: var(--bg-brand-strong);
|
|
82
|
+
--color-bg-brand-strong-hovered: var(--bg-brand-strong-hovered);
|
|
83
|
+
--color-bg-brand-strong-pressed: var(--bg-brand-strong-pressed);
|
|
84
|
+
--color-bg-brand-strong-disabled: var(--bg-brand-strong-disabled);
|
|
85
|
+
--color-bg-success-subtle: var(--bg-success-subtle);
|
|
86
|
+
--color-bg-success-subtle-hovered: var(--bg-success-subtle-hovered);
|
|
87
|
+
--color-bg-success-subtle-pressed: var(--bg-success-subtle-pressed);
|
|
88
|
+
--color-bg-success-subtle-disabled: var(--bg-success-subtle-disabled);
|
|
89
|
+
--color-bg-success: var(--bg-success);
|
|
90
|
+
--color-bg-success-hovered: var(--bg-success-hovered);
|
|
91
|
+
--color-bg-success-pressed: var(--bg-success-pressed);
|
|
92
|
+
--color-bg-success-disabled: var(--bg-success-disabled);
|
|
93
|
+
--color-bg-success-strong: var(--bg-success-strong);
|
|
94
|
+
--color-bg-success-strong-hovered: var(--bg-success-strong-hovered);
|
|
95
|
+
--color-bg-success-strong-pressed: var(--bg-success-strong-pressed);
|
|
96
|
+
--color-bg-success-strong-disabled: var(--bg-success-strong-disabled);
|
|
97
|
+
--color-bg-warning-subtle: var(--bg-warning-subtle);
|
|
98
|
+
--color-bg-warning-subtle-hovered: var(--bg-warning-subtle-hovered);
|
|
99
|
+
--color-bg-warning-subtle-pressed: var(--bg-warning-subtle-pressed);
|
|
100
|
+
--color-bg-warning-subtle-disabled: var(--bg-warning-subtle-disabled);
|
|
101
|
+
--color-bg-warning: var(--bg-warning);
|
|
102
|
+
--color-bg-warning-hovered: var(--bg-warning-hovered);
|
|
103
|
+
--color-bg-warning-pressed: var(--bg-warning-pressed);
|
|
104
|
+
--color-bg-warning-disabled: var(--bg-warning-disabled);
|
|
105
|
+
--color-bg-warning-strong: var(--bg-warning-strong);
|
|
106
|
+
--color-bg-warning-strong-hovered: var(--bg-warning-strong-hovered);
|
|
107
|
+
--color-bg-warning-strong-pressed: var(--bg-warning-strong-pressed);
|
|
108
|
+
--color-bg-warning-strong-disabled: var(--bg-warning-strong-disabled);
|
|
109
|
+
--color-bg-danger-subtle: var(--bg-danger-subtle);
|
|
110
|
+
--color-bg-danger-subtle-hovered: var(--bg-danger-subtle-hovered);
|
|
111
|
+
--color-bg-danger-subtle-pressed: var(--bg-danger-subtle-pressed);
|
|
112
|
+
--color-bg-danger-subtle-disabled: var(--bg-danger-subtle-disabled);
|
|
113
|
+
--color-bg-danger: var(--bg-danger);
|
|
114
|
+
--color-bg-danger-hovered: var(--bg-danger-hovered);
|
|
115
|
+
--color-bg-danger-pressed: var(--bg-danger-pressed);
|
|
116
|
+
--color-bg-danger-disabled: var(--bg-danger-disabled);
|
|
117
|
+
--color-bg-danger-strong: var(--bg-danger-strong);
|
|
118
|
+
--color-bg-danger-strong-hovered: var(--bg-danger-strong-hovered);
|
|
119
|
+
--color-bg-danger-strong-pressed: var(--bg-danger-strong-pressed);
|
|
120
|
+
--color-bg-danger-strong-disabled: var(--bg-danger-strong-disabled);
|
|
121
|
+
--color-bg-overlay: var(--bg-overlay);
|
|
122
|
+
|
|
123
|
+
/* Foreground */
|
|
124
|
+
--color-fg-strong: var(--fg-strong);
|
|
125
|
+
--color-fg-strong-hovered: var(--fg-strong-hovered);
|
|
126
|
+
--color-fg-strong-pressed: var(--fg-strong-pressed);
|
|
127
|
+
--color-fg-strong-disabled: var(--fg-strong-disabled);
|
|
128
|
+
--color-fg-on-strong: var(--fg-on-strong);
|
|
129
|
+
--color-fg-on-strong-hovered: var(--fg-on-strong-hovered);
|
|
130
|
+
--color-fg-on-strong-pressed: var(--fg-on-strong-pressed);
|
|
131
|
+
--color-fg-on-strong-disabled: var(--fg-on-strong-disabled);
|
|
132
|
+
--color-fg-normal: var(--fg-normal);
|
|
133
|
+
--color-fg-normal-hovered: var(--fg-normal-hovered);
|
|
134
|
+
--color-fg-normal-pressed: var(--fg-normal-pressed);
|
|
135
|
+
--color-fg-normal-disabled: var(--fg-normal-disabled);
|
|
136
|
+
--color-fg-subtle: var(--fg-subtle);
|
|
137
|
+
--color-fg-subtle-hovered: var(--fg-subtle-hovered);
|
|
138
|
+
--color-fg-subtle-pressed: var(--fg-subtle-pressed);
|
|
139
|
+
--color-fg-subtle-disabled: var(--fg-subtle-disabled);
|
|
140
|
+
--color-fg-brand: var(--fg-brand);
|
|
141
|
+
--color-fg-brand-hovered: var(--fg-brand-hovered);
|
|
142
|
+
--color-fg-brand-pressed: var(--fg-brand-pressed);
|
|
143
|
+
--color-fg-brand-disabled: var(--fg-brand-disabled);
|
|
144
|
+
--color-fg-on-brand-subtle: var(--fg-on-brand-subtle);
|
|
145
|
+
--color-fg-on-brand-subtle-hovered: var(--fg-on-brand-subtle-hovered);
|
|
146
|
+
--color-fg-on-brand-subtle-pressed: var(--fg-on-brand-subtle-pressed);
|
|
147
|
+
--color-fg-on-brand-subtle-disabled: var(--fg-on-brand-subtle-disabled);
|
|
148
|
+
--color-fg-on-brand: var(--fg-on-brand);
|
|
149
|
+
--color-fg-on-brand-hovered: var(--fg-on-brand-hovered);
|
|
150
|
+
--color-fg-on-brand-pressed: var(--fg-on-brand-pressed);
|
|
151
|
+
--color-fg-on-brand-disabled: var(--fg-on-brand-disabled);
|
|
152
|
+
--color-fg-on-brand-strong: var(--fg-on-brand-strong);
|
|
153
|
+
--color-fg-on-brand-strong-hovered: var(--fg-on-brand-strong-hovered);
|
|
154
|
+
--color-fg-on-brand-strong-pressed: var(--fg-on-brand-strong-pressed);
|
|
155
|
+
--color-fg-on-brand-strong-disabled: var(--fg-on-brand-strong-disabled);
|
|
156
|
+
--color-fg-success: var(--fg-success);
|
|
157
|
+
--color-fg-success-hovered: var(--fg-success-hovered);
|
|
158
|
+
--color-fg-success-pressed: var(--fg-success-pressed);
|
|
159
|
+
--color-fg-success-disabled: var(--fg-success-disabled);
|
|
160
|
+
--color-fg-on-success-subtle: var(--fg-on-success-subtle);
|
|
161
|
+
--color-fg-on-success-subtle-hovered: var(--fg-on-success-subtle-hovered);
|
|
162
|
+
--color-fg-on-success-subtle-pressed: var(--fg-on-success-subtle-pressed);
|
|
163
|
+
--color-fg-on-success-subtle-disabled: var(--fg-on-success-subtle-disabled);
|
|
164
|
+
--color-fg-on-success: var(--fg-on-success);
|
|
165
|
+
--color-fg-on-success-hovered: var(--fg-on-success-hovered);
|
|
166
|
+
--color-fg-on-success-pressed: var(--fg-on-success-pressed);
|
|
167
|
+
--color-fg-on-success-disabled: var(--fg-on-success-disabled);
|
|
168
|
+
--color-fg-warning: var(--fg-warning);
|
|
169
|
+
--color-fg-warning-hovered: var(--fg-warning-hovered);
|
|
170
|
+
--color-fg-warning-pressed: var(--fg-warning-pressed);
|
|
171
|
+
--color-fg-warning-disabled: var(--fg-warning-disabled);
|
|
172
|
+
--color-fg-on-warning-subtle: var(--fg-on-warning-subtle);
|
|
173
|
+
--color-fg-on-warning-subtle-hovered: var(--fg-on-warning-subtle-hovered);
|
|
174
|
+
--color-fg-on-warning-subtle-pressed: var(--fg-on-warning-subtle-pressed);
|
|
175
|
+
--color-fg-on-warning-subtle-disabled: var(--fg-on-warning-subtle-disabled);
|
|
176
|
+
--color-fg-on-warning: var(--fg-on-warning);
|
|
177
|
+
--color-fg-on-warning-hovered: var(--fg-on-warning-hovered);
|
|
178
|
+
--color-fg-on-warning-pressed: var(--fg-on-warning-pressed);
|
|
179
|
+
--color-fg-on-warning-disabled: var(--fg-on-warning-disabled);
|
|
180
|
+
--color-fg-danger: var(--fg-danger);
|
|
181
|
+
--color-fg-danger-hovered: var(--fg-danger-hovered);
|
|
182
|
+
--color-fg-danger-pressed: var(--fg-danger-pressed);
|
|
183
|
+
--color-fg-danger-disabled: var(--fg-danger-disabled);
|
|
184
|
+
--color-fg-on-danger-subtle: var(--fg-on-danger-subtle);
|
|
185
|
+
--color-fg-on-danger-subtle-hovered: var(--fg-on-danger-subtle-hovered);
|
|
186
|
+
--color-fg-on-danger-subtle-pressed: var(--fg-on-danger-subtle-pressed);
|
|
187
|
+
--color-fg-on-danger-subtle-disabled: var(--fg-on-danger-subtle-disabled);
|
|
188
|
+
--color-fg-on-danger: var(--fg-on-danger);
|
|
189
|
+
--color-fg-on-danger-hovered: var(--fg-on-danger-hovered);
|
|
190
|
+
--color-fg-on-danger-pressed: var(--fg-on-danger-pressed);
|
|
191
|
+
--color-fg-on-danger-disabled: var(--fg-on-danger-disabled);
|
|
192
|
+
|
|
193
|
+
/* Border */
|
|
194
|
+
--color-border-strong: var(--border-strong);
|
|
195
|
+
--color-border-strong-hovered: var(--border-strong-hovered);
|
|
196
|
+
--color-border-strong-pressed: var(--border-strong-pressed);
|
|
197
|
+
--color-border-strong-disabled: var(--border-strong-disabled);
|
|
198
|
+
--color-border-normal: var(--border-normal);
|
|
199
|
+
--color-border-normal-hovered: var(--border-normal-hovered);
|
|
200
|
+
--color-border-normal-pressed: var(--border-normal-pressed);
|
|
201
|
+
--color-border-normal-disabled: var(--border-normal-disabled);
|
|
202
|
+
--color-border-subtle: var(--border-subtle);
|
|
203
|
+
--color-border-subtle-hovered: var(--border-subtle-hovered);
|
|
204
|
+
--color-border-subtle-pressed: var(--border-subtle-pressed);
|
|
205
|
+
--color-border-subtle-disabled: var(--border-subtle-disabled);
|
|
206
|
+
--color-border-brand-subtle: var(--border-brand-subtle);
|
|
207
|
+
--color-border-brand-subtle-hovered: var(--border-brand-subtle-hovered);
|
|
208
|
+
--color-border-brand-subtle-pressed: var(--border-brand-subtle-pressed);
|
|
209
|
+
--color-border-brand-subtle-disabled: var(--border-brand-subtle-disabled);
|
|
210
|
+
--color-border-brand: var(--border-brand);
|
|
211
|
+
--color-border-brand-hovered: var(--border-brand-hovered);
|
|
212
|
+
--color-border-brand-pressed: var(--border-brand-pressed);
|
|
213
|
+
--color-border-brand-disabled: var(--border-brand-disabled);
|
|
214
|
+
--color-border-brand-strong: var(--border-brand-strong);
|
|
215
|
+
--color-border-brand-strong-hovered: var(--border-brand-strong-hovered);
|
|
216
|
+
--color-border-brand-strong-pressed: var(--border-brand-strong-pressed);
|
|
217
|
+
--color-border-brand-strong-disabled: var(--border-brand-strong-disabled);
|
|
218
|
+
--color-border-success: var(--border-success);
|
|
219
|
+
--color-border-success-hovered: var(--border-success-hovered);
|
|
220
|
+
--color-border-success-pressed: var(--border-success-pressed);
|
|
221
|
+
--color-border-success-disabled: var(--border-success-disabled);
|
|
222
|
+
--color-border-warning: var(--border-warning);
|
|
223
|
+
--color-border-warning-hovered: var(--border-warning-hovered);
|
|
224
|
+
--color-border-warning-pressed: var(--border-warning-pressed);
|
|
225
|
+
--color-border-warning-disabled: var(--border-warning-disabled);
|
|
226
|
+
--color-border-danger: var(--border-danger);
|
|
227
|
+
--color-border-danger-hovered: var(--border-danger-hovered);
|
|
228
|
+
--color-border-danger-pressed: var(--border-danger-pressed);
|
|
229
|
+
--color-border-danger-disabled: var(--border-danger-disabled);
|
|
230
|
+
|
|
231
|
+
/* Interaction */
|
|
232
|
+
--color-focus-ring: var(--focus-ring);
|
|
233
|
+
|
|
234
|
+
/* Stacking order. Named tokens only — never a raw `z-[n]`.
|
|
235
|
+
`popover` and `modal` share a value on purpose: both portal to
|
|
236
|
+
`document.body`, so with equal z-index the later-appended portal paints on
|
|
237
|
+
top. A Select opened inside a Modal is appended after the Modal and lands
|
|
238
|
+
above it; a Modal opened while a popover is up is appended later and covers
|
|
239
|
+
it. Giving either a higher number breaks one of those two directions. */
|
|
240
|
+
--z-index-content-sticky: 10;
|
|
241
|
+
--z-index-app-bar: 30;
|
|
242
|
+
--z-index-sheet: 50;
|
|
243
|
+
--z-index-popover: 70;
|
|
244
|
+
--z-index-modal: 70;
|
|
245
|
+
--z-index-toast: 9999;
|
|
246
|
+
|
|
247
|
+
/* Overlay enter/exit pairs, selected by `data-state`. */
|
|
248
|
+
--animate-fade-in: fade-in 200ms ease-out forwards;
|
|
249
|
+
--animate-fade-out: fade-out 200ms ease-out forwards;
|
|
250
|
+
--animate-fade-in-slow: fade-in 300ms ease-out forwards;
|
|
251
|
+
--animate-fade-out-slow: fade-out 300ms ease-out forwards;
|
|
252
|
+
--animate-slide-up-in: slide-up-in 200ms ease-out forwards;
|
|
253
|
+
--animate-slide-up-out: slide-up-out 200ms ease-out forwards;
|
|
254
|
+
--animate-slide-right-in: slide-right-in 200ms ease-out forwards;
|
|
255
|
+
--animate-slide-right-out: slide-right-out 200ms ease-out forwards;
|
|
256
|
+
--animate-slide-left-in: slide-left-in 200ms ease-out forwards;
|
|
257
|
+
--animate-slide-left-out: slide-left-out 200ms ease-out forwards;
|
|
258
|
+
|
|
259
|
+
@keyframes fade-in {
|
|
260
|
+
from {
|
|
261
|
+
opacity: 0;
|
|
262
|
+
}
|
|
263
|
+
to {
|
|
264
|
+
opacity: 1;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
@keyframes fade-out {
|
|
268
|
+
from {
|
|
269
|
+
opacity: 1;
|
|
270
|
+
}
|
|
271
|
+
to {
|
|
272
|
+
opacity: 0;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
@keyframes slide-up-in {
|
|
276
|
+
from {
|
|
277
|
+
transform: translateY(100%);
|
|
278
|
+
}
|
|
279
|
+
to {
|
|
280
|
+
transform: translateY(0);
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
@keyframes slide-up-out {
|
|
284
|
+
from {
|
|
285
|
+
transform: translateY(0);
|
|
286
|
+
}
|
|
287
|
+
to {
|
|
288
|
+
transform: translateY(100%);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
@keyframes slide-right-in {
|
|
292
|
+
from {
|
|
293
|
+
transform: translateX(100%);
|
|
294
|
+
}
|
|
295
|
+
to {
|
|
296
|
+
transform: translateX(0);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
@keyframes slide-right-out {
|
|
300
|
+
from {
|
|
301
|
+
transform: translateX(0);
|
|
302
|
+
}
|
|
303
|
+
to {
|
|
304
|
+
transform: translateX(100%);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
@keyframes slide-left-in {
|
|
308
|
+
from {
|
|
309
|
+
transform: translateX(-100%);
|
|
310
|
+
}
|
|
311
|
+
to {
|
|
312
|
+
transform: translateX(0);
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
@keyframes slide-left-out {
|
|
316
|
+
from {
|
|
317
|
+
transform: translateX(0);
|
|
318
|
+
}
|
|
319
|
+
to {
|
|
320
|
+
transform: translateX(-100%);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* =============================================================================
|
|
326
|
+
4. BASE LAYER
|
|
327
|
+
============================================================================= */
|
|
328
|
+
|
|
329
|
+
/* Not app styling — each of these is something the components depend on. */
|
|
330
|
+
@layer base {
|
|
331
|
+
/* Tailwind's preflight defaults border-color to currentColor, so any component
|
|
332
|
+
using a bare `border` would take its border from the text colour. */
|
|
333
|
+
* {
|
|
334
|
+
@apply border-border-normal;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* Twenty components have no focus style of their own and rely on this. */
|
|
338
|
+
:focus-visible {
|
|
339
|
+
@apply outline-hidden ring-2 ring-focus-ring ring-offset-2 ring-offset-bg-normal;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/* Honored globally rather than per component, so every animation the system
|
|
343
|
+
ships inherits it. `!important` is the point: it has to beat the animation
|
|
344
|
+
utilities on the elements themselves. */
|
|
345
|
+
@media (prefers-reduced-motion: reduce) {
|
|
346
|
+
/* biome-ignore-start lint/complexity/noImportantStyles: overriding utility-level animations is the intent */
|
|
347
|
+
*,
|
|
348
|
+
*::before,
|
|
349
|
+
*::after {
|
|
350
|
+
animation-duration: 0.01ms !important;
|
|
351
|
+
animation-iteration-count: 1 !important;
|
|
352
|
+
transition-duration: 0.01ms !important;
|
|
353
|
+
}
|
|
354
|
+
/* biome-ignore-end lint/complexity/noImportantStyles: overriding utility-level animations is the intent */
|
|
355
|
+
}
|
|
356
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Token naming vocabulary
|
|
3
3
|
*
|
|
4
4
|
* The naming convention for design tokens, as types and as data:
|
|
5
5
|
*
|
|
6
6
|
* {context}-[on-]{intent}[-{weight}][-{state}]
|
|
7
7
|
*
|
|
8
|
-
* src/theme/
|
|
9
|
-
* TypeScript from
|
|
8
|
+
* The theme sources (src/theme/<name>/ plus src/theming/tailwind.css) are the only place
|
|
9
|
+
* tokens are defined, and nothing derives TypeScript from them. These types describe the *shape* a token name can take
|
|
10
10
|
* rather than enumerating the names that happen to exist today, which is why the
|
|
11
11
|
* vocabulary below is the thing to edit when the system grows a new axis.
|
|
12
12
|
*
|
package/dist/theme/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Exports
|
|
3
|
-
*
|
|
4
|
-
* The token naming vocabulary and its types. Token *values* live in
|
|
5
|
-
* src/theme/tokens.css and are read from the stylesheet, not from here.
|
|
6
|
-
*/
|
|
7
|
-
export type { BgToken, BorderToken, ColorMode, ColorModeSchema, ColorToken, Context, CSSVarName, Feedback, FgToken, HexValue, Hierarchy, Intent, Semantic, StandaloneToken, State, ThemeSchema, TokenName, Weight, } from "./schema.js";
|
|
8
|
-
export { contexts, cssVar, feedback, hierarchy, intents, semantics, standaloneTokens, states, weights, } from "./schema.js";
|
|
9
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,YAAY,EACV,OAAO,EACP,WAAW,EACX,SAAS,EACT,eAAe,EACf,UAAU,EACV,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,EACf,KAAK,EACL,WAAW,EACX,SAAS,EACT,MAAM,GACP,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,MAAM,UAAU,CAAC"}
|
package/dist/theme/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Exports
|
|
3
|
-
*
|
|
4
|
-
* The token naming vocabulary and its types. Token *values* live in
|
|
5
|
-
* src/theme/tokens.css and are read from the stylesheet, not from here.
|
|
6
|
-
*/
|
|
7
|
-
export { contexts, cssVar, feedback, hierarchy, intents, semantics, standaloneTokens, states, weights, } from "./schema.js";
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
package/dist/theme/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,MAAM,UAAU,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/theme/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH,uCAAuC;AACvC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,iBAAiB;AACjB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAMzC,gDAAgD;AAChD,eAAO,MAAM,QAAQ,iCAAkC,CAAC;AACxD,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,0CAA0C;AAC1C,eAAO,MAAM,SAAS,yCAA0C,CAAC;AACjE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,mCAAmC;AACnC,eAAO,MAAM,QAAQ,2CAA4C,CAAC;AAClE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,oBAAoB;AACpB,eAAO,MAAM,SAAS,yEAAuC,CAAC;AAC9D,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,gFAAgF;AAChF,eAAO,MAAM,OAAO,6FAA8C,CAAC;AACnE,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C,8DAA8D;AAC9D,eAAO,MAAM,OAAO,+BAAgC,CAAC;AACrD,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9C,yBAAyB;AACzB,eAAO,MAAM,MAAM,6CAA8C,CAAC;AAClE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C,0DAA0D;AAC1D,eAAO,MAAM,gBAAgB,yBAA0B,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAMhE,gFAAgF;AAChF,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE7C,uDAAuD;AACvD,KAAK,cAAc,GAAG,MAAM,GAAG,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC;AAEzD,2DAA2D;AAC3D,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,EAAE,CAAC;AAEtD,wBAAwB;AACxB,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,cAAc,EAAE,CAAC,CAAC;AAEvD,uDAAuD;AACvD,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,cAAc,EAAE,CAAC,GAAG,QAAQ,CAAC,SAAS,cAAc,EAAE,CAAC,CAAC;AAE7F,oBAAoB;AACpB,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,cAAc,EAAE,CAAC,CAAC;AAE/D,6CAA6C;AAC7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,eAAe,CAAC;AAE1E,uBAAuB;AACvB,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC;AAEnC,+BAA+B;AAC/B,MAAM,MAAM,UAAU,GAAG,KAAK,UAAU,EAAE,CAAC;AAM3C,yCAAyC;AACzC,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;AAEnE,uBAAuB;AACvB,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC;CACvB,CAAC;AAMF,kCAAkC;AAClC,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEhD"}
|
package/dist/theme/schema.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../src/theme/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAYH,gFAAgF;AAChF,aAAa;AACb,gFAAgF;AAEhF,gDAAgD;AAChD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAU,CAAC;AAGxD,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGjE,mCAAmC;AACnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAGlE,oBAAoB;AACpB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC;AAG9D,gFAAgF;AAChF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAGnE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGrD,yBAAyB;AACzB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAU,CAAC;AAGlE,0DAA0D;AAC1D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAU,CAAC;AAiDxD,gFAAgF;AAChF,YAAY;AACZ,gFAAgF;AAEhF,kCAAkC;AAClC,MAAM,UAAU,MAAM,CAAC,KAAiB;IACtC,OAAO,SAAS,KAAK,GAAG,CAAC;AAC3B,CAAC"}
|
package/src/theme/index.ts
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Exports
|
|
3
|
-
*
|
|
4
|
-
* The token naming vocabulary and its types. Token *values* live in
|
|
5
|
-
* src/theme/tokens.css and are read from the stylesheet, not from here.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
export type {
|
|
9
|
-
BgToken,
|
|
10
|
-
BorderToken,
|
|
11
|
-
ColorMode,
|
|
12
|
-
ColorModeSchema,
|
|
13
|
-
ColorToken,
|
|
14
|
-
Context,
|
|
15
|
-
CSSVarName,
|
|
16
|
-
Feedback,
|
|
17
|
-
FgToken,
|
|
18
|
-
HexValue,
|
|
19
|
-
Hierarchy,
|
|
20
|
-
Intent,
|
|
21
|
-
Semantic,
|
|
22
|
-
StandaloneToken,
|
|
23
|
-
State,
|
|
24
|
-
ThemeSchema,
|
|
25
|
-
TokenName,
|
|
26
|
-
Weight,
|
|
27
|
-
} from "./schema";
|
|
28
|
-
|
|
29
|
-
export {
|
|
30
|
-
contexts,
|
|
31
|
-
cssVar,
|
|
32
|
-
feedback,
|
|
33
|
-
hierarchy,
|
|
34
|
-
intents,
|
|
35
|
-
semantics,
|
|
36
|
-
standaloneTokens,
|
|
37
|
-
states,
|
|
38
|
-
weights,
|
|
39
|
-
} from "./schema";
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tier 3 — the component recipes.
|
|
3
|
-
*
|
|
4
|
-
* One file per component, aggregated here so `tokens.css` has a single import
|
|
5
|
-
* and adding a component does not touch a file anyone else is editing. Each
|
|
6
|
-
* recipe maps `(variant, intent, state)` to a semantic token; see button.css
|
|
7
|
-
* for the pattern and the reasoning behind `@layer components`.
|
|
8
|
-
*/
|
|
9
|
-
@import "./button.css";
|
|
10
|
-
@import "./badge.css";
|
|
11
|
-
@import "./message.css";
|
|
12
|
-
@import "./spinner.css";
|
|
13
|
-
@import "./tabs.css";
|
|
14
|
-
@import "./toggle.css";
|
|
15
|
-
|
|
16
|
-
/* Form controls and surfaces — the components consumers most often restyle. */
|
|
17
|
-
@import "./input.css";
|
|
18
|
-
@import "./textarea.css";
|
|
19
|
-
@import "./search-input.css";
|
|
20
|
-
@import "./field.css";
|
|
21
|
-
@import "./checkbox.css";
|
|
22
|
-
@import "./radio-button.css";
|
|
23
|
-
@import "./switch.css";
|
|
24
|
-
@import "./card.css";
|
|
25
|
-
@import "./modal.css";
|
|
26
|
-
@import "./sheet.css";
|
|
27
|
-
@import "./select.css";
|
|
28
|
-
@import "./tag-chip.css";
|