@reshape-biotech/design-system 2.7.47 → 2.7.49
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/components/activity/Activity.stories.svelte +13 -1
- package/dist/components/activity/Activity.svelte +28 -8
- package/dist/components/activity/Activity.svelte.d.ts +1 -0
- package/dist/components/activity/ActivityIcon.svelte +8 -0
- package/dist/components/activity/ActivityIcon.svelte.d.ts +1 -1
- package/dist/components/avatar/Avatar.stories.svelte +1 -1
- package/dist/components/banner/Banner.stories.svelte +1 -1
- package/dist/components/button/Button.stories.svelte +1 -1
- package/dist/components/card/Card.stories.svelte +1 -1
- package/dist/components/checkbox/Checkbox.stories.svelte +1 -1
- package/dist/components/collapsible/Collapsible.stories.svelte +1 -1
- package/dist/components/combobox/Combobox.stories.svelte +1 -1
- package/dist/components/datepicker/DatePicker.stories.svelte +1 -1
- package/dist/components/divider/Divider.stories.svelte +1 -1
- package/dist/components/drawer/Drawer.stories.svelte +7 -7
- package/dist/components/dropdown/Dropdown.stories.svelte +1 -1
- package/dist/components/empty-content/EmptyContent.stories.svelte +1 -1
- package/dist/components/graphs/bar-chart/BarChart.stories.svelte +1 -1
- package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte +1 -1
- package/dist/components/graphs/chart/Chart.stories.svelte +1 -1
- package/dist/components/graphs/line/LineChart.stories.svelte +1 -1
- package/dist/components/graphs/matrix/Matrix.stories.svelte +1 -1
- package/dist/components/graphs/multiline/MultiLineChart.stories.svelte +1 -1
- package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte +1 -1
- package/dist/components/icon-button/IconButton.stories.svelte +1 -1
- package/dist/components/icons/AnalysisIcon.stories.svelte +1 -1
- package/dist/components/icons/Icon.stories.svelte +1 -1
- package/dist/components/input/Input.stories.svelte +1 -1
- package/dist/components/label/Label.stories.svelte +1 -1
- package/dist/components/legend/Legend.stories.svelte +1 -1
- package/dist/components/list/List.stories.svelte +1 -1
- package/dist/components/logo/Logo.stories.svelte +1 -1
- package/dist/components/manual-cfu-counter/ManualCFUCounter.stories.svelte +1 -1
- package/dist/components/markdown/Markdown.stories.svelte +1 -1
- package/dist/components/modal/Modal.stories.svelte +8 -8
- package/dist/components/multi-cfu-counter/MultiCFUCounter.stories.svelte +1 -1
- package/dist/components/nav/Nav.stories.svelte +1 -1
- package/dist/components/notification-popup/NotificationPopup.stories.svelte +1 -1
- package/dist/components/notifications/Notifications.stories.svelte +1 -1
- package/dist/components/pill/Pill.stories.svelte +1 -1
- package/dist/components/progress-circle/ProgressCircle.stories.svelte +1 -1
- package/dist/components/required-status-indicator/RequiredStatusIndicator.stories.svelte +1 -1
- package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte +1 -1
- package/dist/components/select/Select.stories.svelte +1 -1
- package/dist/components/skeleton-loader/SkeletonLoader.stories.svelte +1 -1
- package/dist/components/slider/Slider.stories.svelte +1 -1
- package/dist/components/spinner/Spinner.stories.svelte +1 -1
- package/dist/components/stat-card/StatCard.stories.svelte +1 -1
- package/dist/components/status-badge/StatusBadge.stories.svelte +1 -1
- package/dist/components/stepper/Stepper.stories.svelte +1 -1
- package/dist/components/table/Table.stories.svelte +1 -1
- package/dist/components/tabs/Tabs.stories.svelte +1 -1
- package/dist/components/tag/Tag.stories.svelte +1 -1
- package/dist/components/textarea/Textarea.stories.svelte +1 -1
- package/dist/components/toast/Toast.stories.svelte +1 -1
- package/dist/components/toggle/Toggle.stories.svelte +1 -1
- package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte +1 -1
- package/dist/components/tooltip/Tooltip.stories.svelte +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/safelist-source.d.ts +1 -1
- package/dist/safelist-source.js +2 -2
- package/dist/safelist.css +1 -1
- package/dist/tailwind.preset.d.ts +7 -0
- package/dist/tokens/Colors.stories.svelte +194 -0
- package/dist/tokens/Colors.stories.svelte.d.ts +18 -0
- package/dist/{components/typography → tokens}/Typography.stories.svelte +2 -1
- package/dist/tokens/colorLookup.d.ts +1 -0
- package/dist/tokens/colorLookup.js +37 -0
- package/dist/tokens/colors.d.ts +4 -0
- package/dist/tokens/colors.js +4 -0
- package/dist/tokens.d.ts +90 -0
- package/dist/tokens.js +46 -18
- package/package.json +10 -4
- /package/dist/{components/typography → tokens}/Typography.stories.svelte.d.ts +0 -0
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
7
7
|
const { Story } = defineMeta({
|
|
8
8
|
component: Table,
|
|
9
|
-
title: '
|
|
9
|
+
title: 'Components/Table',
|
|
10
10
|
tags: ['autodocs'],
|
|
11
11
|
});
|
|
12
12
|
import IconButton from '../icon-button/IconButton.svelte';
|
package/dist/index.d.ts
CHANGED
|
@@ -48,7 +48,7 @@ export * from './components/toggle/index.js';
|
|
|
48
48
|
export * from './components/checkbox/index.js';
|
|
49
49
|
export { tokens } from './tokens.js';
|
|
50
50
|
export { notifications } from './notifications.js';
|
|
51
|
-
export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, } from './tokens.js';
|
|
51
|
+
export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor, annotationOutputFadedFillColors, annotationOutputFadedStrokeColors, } from './tokens.js';
|
|
52
52
|
export * as TokensColors from './tokens/colors.js';
|
|
53
53
|
export * as TokensTypography from './tokens/typography.js';
|
|
54
54
|
export { default as echarts, init } from './echarts-config.js';
|
package/dist/index.js
CHANGED
|
@@ -50,7 +50,7 @@ export * from './components/checkbox/index.js';
|
|
|
50
50
|
// Styles and Tokens
|
|
51
51
|
export { tokens } from './tokens.js';
|
|
52
52
|
export { notifications } from './notifications.js';
|
|
53
|
-
export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, } from './tokens.js';
|
|
53
|
+
export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor, chartColor, annotationOutputFadedFillColors, annotationOutputFadedStrokeColors, } from './tokens.js';
|
|
54
54
|
// Export tokens modules for granular imports
|
|
55
55
|
export * as TokensColors from './tokens/colors.js';
|
|
56
56
|
export * as TokensTypography from './tokens/typography.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const safelist: "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lime bg-dark-lime-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-orange bg-dark-orange-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pink bg-dark-pink-hover bg-dark-plum bg-dark-plum-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-static border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lime-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-orange-hover hover:bg-dark-pear-hover hover:bg-dark-pink-hover hover:bg-dark-plum-hover hover:bg-dark-sky-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-static ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";
|
|
1
|
+
export const safelist: "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";
|
package/dist/safelist-source.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Auto-generated safelist — do not edit manually.
|
|
2
|
-
// Token-derived:
|
|
2
|
+
// Token-derived: 313, Manual: 43 → Total: 356
|
|
3
3
|
//
|
|
4
4
|
// Consumer usage (one line in your main CSS):
|
|
5
5
|
// @source "../node_modules/@reshape-biotech/design-system/dist";
|
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
// TW4 scans compiled components for utility classes automatically.
|
|
8
8
|
// This file adds token-derived classes (bg-*, text-*, border-*, etc.)
|
|
9
9
|
// that consumers can use even if no component references them.
|
|
10
|
-
export const safelist = "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lime bg-dark-lime-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-orange bg-dark-orange-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pink bg-dark-pink-hover bg-dark-plum bg-dark-plum-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-static border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lime-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-orange-hover hover:bg-dark-pear-hover hover:bg-dark-pink-hover hover:bg-dark-plum-hover hover:bg-dark-sky-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-static ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";
|
|
10
|
+
export const safelist = "-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]";
|
package/dist/safelist.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* Auto-generated safelist — do not edit manually */
|
|
2
|
-
@source inline("-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lime bg-dark-lime-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-orange bg-dark-orange-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pink bg-dark-pink-hover bg-dark-plum bg-dark-plum-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-static border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lime-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-orange-hover hover:bg-dark-pear-hover hover:bg-dark-pink-hover hover:bg-dark-plum-hover hover:bg-dark-sky-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-static ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]");
|
|
2
|
+
@source inline("-rotate-90 [&>*>.control-button]:flex-col [&>*]:flex-1 [&>*]:flex-none [&>*]:rounded-md! [&>*]:rounded-xl [&>svg]:h-4 [&>svg]:h-5 [&>svg]:w-4 [&>svg]:w-5 badge-error badge-md badge-neutral badge-progress badge-sm badge-success badge-warning bg-accent bg-accent-hover bg-accent-inverse bg-accent-inverse-hover bg-base bg-base-inverse bg-blue bg-blue-hover bg-blue-inverse bg-blue-inverse-hover bg-danger bg-danger-hover bg-danger-inverse bg-danger-inverse-hover bg-dark-accent bg-dark-accent-hover bg-dark-accent-inverse bg-dark-accent-inverse-hover bg-dark-base bg-dark-base-inverse bg-dark-blue bg-dark-blue-hover bg-dark-blue-inverse bg-dark-blue-inverse-hover bg-dark-danger bg-dark-danger-hover bg-dark-danger-inverse bg-dark-danger-inverse-hover bg-dark-lilac bg-dark-lilac-hover bg-dark-lilac-inverse bg-dark-lilac-inverse-hover bg-dark-lime bg-dark-lime-hover bg-dark-lime-inverse bg-dark-lime-inverse-hover bg-dark-neutral bg-dark-neutral-darker bg-dark-neutral-darker-hover bg-dark-neutral-hover bg-dark-neutral-inverse bg-dark-neutral-inverse-hover bg-dark-orange bg-dark-orange-hover bg-dark-orange-inverse bg-dark-orange-inverse-hover bg-dark-overlay bg-dark-pear bg-dark-pear-hover bg-dark-pear-inverse bg-dark-pear-inverse-hover bg-dark-pink bg-dark-pink-hover bg-dark-pink-inverse bg-dark-pink-inverse-hover bg-dark-plum bg-dark-plum-hover bg-dark-plum-inverse bg-dark-plum-inverse-hover bg-dark-primary bg-dark-secondary bg-dark-sky bg-dark-sky-hover bg-dark-sky-inverse bg-dark-sky-inverse-hover bg-dark-success bg-dark-success-hover bg-dark-success-inverse bg-dark-success-inverse-hover bg-dark-warning bg-dark-warning-hover bg-dark-warning-inverse bg-dark-warning-inverse-hover bg-lilac bg-lilac-hover bg-lilac-inverse bg-lilac-inverse-hover bg-lime bg-lime-hover bg-lime-inverse bg-lime-inverse-hover bg-neutral bg-neutral-darker bg-neutral-darker-hover bg-neutral-hover bg-neutral-inverse bg-neutral-inverse-hover bg-orange bg-orange-hover bg-orange-inverse bg-orange-inverse-hover bg-overlay bg-pear bg-pear-hover bg-pear-inverse bg-pear-inverse-hover bg-pink bg-pink-hover bg-pink-inverse bg-pink-inverse-hover bg-plum bg-plum-hover bg-plum-inverse bg-plum-inverse-hover bg-sky bg-sky-hover bg-sky-inverse bg-sky-inverse-hover bg-success bg-success-hover bg-success-inverse bg-success-inverse-hover bg-surface bg-surface-secondary bg-warning bg-warning-hover bg-warning-inverse bg-warning-inverse-hover border-axis border-blue-inverse border-danger border-dark-axis border-dark-blue-inverse border-dark-danger border-dark-focus border-dark-hover border-dark-input border-dark-interactive border-dark-interactive-inverse border-dark-lime-inverse border-dark-orange-inverse border-dark-pink-inverse border-dark-static border-dark-static-inverse border-focus border-hover border-input border-interactive border-interactive-inverse border-lime-inverse border-orange-inverse border-pink-inverse border-static border-static-inverse border-white data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground group-first:invisible group-last:invisible h-[calc(100%-26px)] hover:bg-accent-hover hover:bg-accent-inverse-hover hover:bg-blue-hover hover:bg-blue-inverse-hover hover:bg-danger-hover hover:bg-danger-inverse-hover hover:bg-dark-accent-hover hover:bg-dark-accent-inverse-hover hover:bg-dark-blue-hover hover:bg-dark-blue-inverse-hover hover:bg-dark-danger-hover hover:bg-dark-danger-inverse-hover hover:bg-dark-lilac-hover hover:bg-dark-lilac-inverse-hover hover:bg-dark-lime-hover hover:bg-dark-lime-inverse-hover hover:bg-dark-neutral-darker-hover hover:bg-dark-neutral-hover hover:bg-dark-neutral-inverse-hover hover:bg-dark-orange-hover hover:bg-dark-orange-inverse-hover hover:bg-dark-pear-hover hover:bg-dark-pear-inverse-hover hover:bg-dark-pink-hover hover:bg-dark-pink-inverse-hover hover:bg-dark-plum-hover hover:bg-dark-plum-inverse-hover hover:bg-dark-sky-hover hover:bg-dark-sky-inverse-hover hover:bg-dark-success-hover hover:bg-dark-success-inverse-hover hover:bg-dark-warning-hover hover:bg-dark-warning-inverse-hover hover:bg-lilac-hover hover:bg-lilac-inverse-hover hover:bg-lime-hover hover:bg-lime-inverse-hover hover:bg-neutral-darker-hover hover:bg-neutral-hover hover:bg-neutral-inverse-hover hover:bg-orange-hover hover:bg-orange-inverse-hover hover:bg-pear-hover hover:bg-pear-inverse-hover hover:bg-pink-hover hover:bg-pink-inverse-hover hover:bg-plum-hover hover:bg-plum-inverse-hover hover:bg-sky-hover hover:bg-sky-inverse-hover hover:bg-success-hover hover:bg-success-inverse-hover hover:bg-warning-hover hover:bg-warning-inverse-hover leading-4 leading-5 leading-6 leading-7 lg:block md:flex outline-dark-focus outline-dark-hover outline-dark-input outline-dark-interactive outline-dark-static outline-focus outline-hover outline-input outline-interactive outline-static ring-1 ring-[#12192a1a] ring-axis ring-blue-inverse ring-danger ring-dark-axis ring-dark-blue-inverse ring-dark-danger ring-dark-focus ring-dark-hover ring-dark-input ring-dark-interactive ring-dark-interactive-inverse ring-dark-lime-inverse ring-dark-orange-inverse ring-dark-pink-inverse ring-dark-static ring-dark-static-inverse ring-focus ring-hover ring-input ring-interactive ring-interactive-inverse ring-lime-inverse ring-orange-inverse ring-pink-inverse ring-static ring-static-inverse ring-white shadow-container shadow-focus shadow-hover shadow-input shadow-menu sm:gap-2 sm:w-[460px] table-auto table-fixed text-accent text-blue text-danger text-dark-accent text-dark-blue text-dark-danger text-dark-icon-accent text-dark-icon-blue text-dark-icon-danger text-dark-icon-lilac text-dark-icon-lime text-dark-icon-orange text-dark-icon-pear text-dark-icon-pink text-dark-icon-plum text-dark-icon-primary text-dark-icon-primary-inverse text-dark-icon-secondary text-dark-icon-secondary-inverse text-dark-icon-sky text-dark-icon-success text-dark-icon-tertiary text-dark-icon-warning text-dark-icon-white text-dark-lilac text-dark-lime text-dark-orange text-dark-pear text-dark-pink text-dark-plum text-dark-primary text-dark-primary-inverse text-dark-secondary text-dark-secondary-inverse text-dark-sky text-dark-success text-dark-tertiary text-dark-tertiary-inverse text-dark-warning text-icon-accent text-icon-blue text-icon-danger text-icon-lilac text-icon-lime text-icon-orange text-icon-pear text-icon-pink text-icon-plum text-icon-primary text-icon-primary-inverse text-icon-secondary text-icon-secondary-inverse text-icon-sky text-icon-success text-icon-tertiary text-icon-warning text-icon-white text-lilac text-lime text-orange text-pear text-pink text-plum text-primary text-primary-inverse text-secondary text-secondary-inverse text-sky text-success text-tertiary text-tertiary-inverse text-warning tooltip-bottom tooltip-left tooltip-right tooltip-top transform translate-y-[2px] w-[calc(100%-72px-72px)]");
|
|
@@ -15,6 +15,13 @@ declare namespace config {
|
|
|
15
15
|
'dark-hover': string;
|
|
16
16
|
'dark-focus': string;
|
|
17
17
|
'dark-danger': string;
|
|
18
|
+
'dark-static-inverse': string;
|
|
19
|
+
'dark-interactive-inverse': string;
|
|
20
|
+
'dark-blue-inverse': string;
|
|
21
|
+
'dark-orange-inverse': string;
|
|
22
|
+
'dark-pink-inverse': string;
|
|
23
|
+
'dark-lime-inverse': string;
|
|
24
|
+
'dark-axis': string;
|
|
18
25
|
static: string;
|
|
19
26
|
input: string;
|
|
20
27
|
interactive: string;
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
+
import { backgroundColor, textColor, borderColor } from '../tokens';
|
|
4
|
+
import { colorLookup } from './colorLookup';
|
|
5
|
+
const { Story } = defineMeta({
|
|
6
|
+
title: 'Foundations/Color tokens',
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'fullscreen',
|
|
10
|
+
docs: {
|
|
11
|
+
description: {
|
|
12
|
+
component:
|
|
13
|
+
'Semantic tokens express **intent** rather than raw values. Use these instead of primitive tokens so components adapt automatically when the palette changes. Dark mode variants are applied automatically via Tailwind\'s `dark:` modifier.',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
type TokenRow = {
|
|
20
|
+
name: string;
|
|
21
|
+
usage: string;
|
|
22
|
+
light: string | null | undefined;
|
|
23
|
+
dark: string | null | undefined;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const textTokens: TokenRow[] = [
|
|
27
|
+
{ name: 'text-primary', usage: 'Primary text, such as titles, sentence case headers, and menu items', light: textColor.primary, dark: textColor['dark-primary'] },
|
|
28
|
+
{ name: 'text-secondary', usage: 'Secondary text, such as navigation input field labels, and descriptions', light: textColor.secondary, dark: textColor['dark-secondary'] },
|
|
29
|
+
{ name: 'text-tertiary', usage: 'Meta text, such as inline labels, input placeholders, and disabled text', light: textColor.tertiary, dark: textColor['dark-tertiary'] },
|
|
30
|
+
{ name: 'text-primary-inverse', usage: 'Text on dark/colored backgrounds, such as primary buttons', light: textColor['primary-inverse'], dark: textColor['dark-primary-inverse'] },
|
|
31
|
+
{ name: 'text-secondary-inverse', usage: 'Secondary text on dark/colored backgrounds', light: textColor['secondary-inverse'], dark: textColor['dark-secondary-inverse'] },
|
|
32
|
+
{ name: 'text-tertiary-inverse', usage: 'Tertiary text on dark/colored backgrounds', light: textColor['tertiary-inverse'], dark: textColor['dark-tertiary-inverse'] },
|
|
33
|
+
{ name: 'text-accent', usage: 'Interactive or selected text, such as active tab items or links', light: textColor.accent, dark: textColor['dark-accent'] },
|
|
34
|
+
{ name: 'text-success', usage: 'Text communicating a favorable outcome, such as input field success messaging', light: textColor.success, dark: textColor['dark-success'] },
|
|
35
|
+
{ name: 'text-warning', usage: 'Text emphasizing caution, such as messages falling outside of range', light: textColor.warning, dark: textColor['dark-warning'] },
|
|
36
|
+
{ name: 'text-danger', usage: 'Critical text, such as input field error messaging', light: textColor.danger, dark: textColor['dark-danger'] },
|
|
37
|
+
{ name: 'text-blue', usage: 'Informative text, such as informative banners', light: textColor.blue, dark: textColor['dark-blue'] },
|
|
38
|
+
{ name: 'text-orange', usage: 'Orange text when there is no meaning tied to the color', light: textColor.orange, dark: textColor['dark-orange'] },
|
|
39
|
+
{ name: 'text-sky', usage: 'Sky text when there is no meaning tied to the color', light: textColor.sky, dark: textColor['dark-sky'] },
|
|
40
|
+
{ name: 'text-pink', usage: 'Pink text when there is no meaning tied to the color', light: textColor.pink, dark: textColor['dark-pink'] },
|
|
41
|
+
{ name: 'text-plum', usage: 'Plum text when there is no meaning tied to the color', light: textColor.plum, dark: textColor['dark-plum'] },
|
|
42
|
+
{ name: 'text-lilac', usage: 'Lilac text when there is no meaning tied to the color', light: textColor.lilac, dark: textColor['dark-lilac'] },
|
|
43
|
+
{ name: 'text-lime', usage: 'Lime text when there is no meaning tied to the color', light: textColor.lime, dark: textColor['dark-lime'] },
|
|
44
|
+
{ name: 'text-pear', usage: 'Pear text when there is no meaning tied to the color', light: textColor.pear, dark: textColor['dark-pear'] },
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
const iconTokens: TokenRow[] = [
|
|
48
|
+
{ name: 'text-icon-primary', usage: 'Icon-only buttons', light: textColor['icon-primary'], dark: textColor['dark-icon-primary'] },
|
|
49
|
+
{ name: 'text-icon-secondary', usage: 'Icons paired with body typography', light: textColor['icon-secondary'], dark: textColor['dark-icon-secondary'] },
|
|
50
|
+
{ name: 'text-icon-tertiary', usage: 'Icons paired with body/secondary/tertiary text', light: textColor['icon-tertiary'], dark: textColor['dark-icon-tertiary'] },
|
|
51
|
+
{ name: 'text-icon-primary-inverse', usage: 'Icons on dark/colored backgrounds', light: textColor['icon-primary-inverse'], dark: textColor['dark-icon-primary-inverse'] },
|
|
52
|
+
{ name: 'text-icon-secondary-inverse', usage: 'Secondary icons on dark/colored backgrounds', light: textColor['icon-secondary-inverse'], dark: textColor['dark-icon-secondary-inverse'] },
|
|
53
|
+
{ name: 'text-icon-accent', usage: 'Interactive or selected items, such as active menu items', light: textColor['icon-accent'], dark: textColor['dark-icon-accent'] },
|
|
54
|
+
{ name: 'text-icon-success', usage: 'Icons communicating a favorable outcome, such as success section messaging', light: textColor['icon-success'], dark: textColor['dark-icon-success'] },
|
|
55
|
+
{ name: 'text-icon-warning', usage: 'Icons communicating caution, such as those used in warning section messaging', light: textColor['icon-warning'], dark: textColor['dark-icon-warning'] },
|
|
56
|
+
{ name: 'text-icon-danger', usage: 'Icons communicating critical information, such as those used in error handling', light: textColor['icon-danger'], dark: textColor['dark-icon-danger'] },
|
|
57
|
+
{ name: 'text-icon-blue', usage: 'Blue icons when there is no meaning tied to the color', light: textColor['icon-blue'], dark: textColor['dark-icon-blue'] },
|
|
58
|
+
{ name: 'text-icon-orange', usage: 'Orange icons when there is no meaning tied to the color', light: textColor['icon-orange'], dark: textColor['dark-icon-orange'] },
|
|
59
|
+
{ name: 'text-icon-sky', usage: 'Sky icons when there is no meaning tied to the color', light: textColor['icon-sky'], dark: textColor['dark-icon-sky'] },
|
|
60
|
+
{ name: 'text-icon-pink', usage: 'Pink icons when there is no meaning tied to the color', light: textColor['icon-pink'], dark: textColor['dark-icon-pink'] },
|
|
61
|
+
{ name: 'text-icon-plum', usage: 'Plum icons when there is no meaning tied to the color', light: textColor['icon-plum'], dark: textColor['dark-icon-plum'] },
|
|
62
|
+
{ name: 'text-icon-lilac', usage: 'Lilac icons when there is no meaning tied to the color', light: textColor['icon-lilac'], dark: textColor['dark-icon-lilac'] },
|
|
63
|
+
{ name: 'text-icon-lime', usage: 'Lime icons when there is no meaning tied to the color', light: textColor['icon-lime'], dark: textColor['dark-icon-lime'] },
|
|
64
|
+
{ name: 'text-icon-pear', usage: 'Pear icons when there is no meaning tied to the color', light: textColor['icon-pear'], dark: textColor['dark-icon-pear'] },
|
|
65
|
+
{ name: 'text-icon-white', usage: 'White icons when there is no meaning tied to the color', light: textColor['icon-white'], dark: textColor['dark-icon-white'] },
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
const backgroundTokens: TokenRow[] = [
|
|
69
|
+
{ name: 'bg-neutral', usage: 'Default background for neutral elements, such as icon or secondary buttons', light: backgroundColor['neutral'], dark: backgroundColor['dark-neutral'] },
|
|
70
|
+
{ name: 'bg-neutral-hover', usage: 'Default background for neutral elements in a hovered state', light: backgroundColor['neutral-hover'], dark: backgroundColor['dark-neutral-hover'] },
|
|
71
|
+
{ name: 'bg-neutral-darker', usage: 'Darker background color for interactive contexts, such as toggle or picker', light: backgroundColor['neutral-darker'], dark: backgroundColor['dark-neutral-darker'] },
|
|
72
|
+
{ name: 'bg-neutral-darker-hover', usage: 'Darker background color for interactive contexts in a hovered state', light: backgroundColor['neutral-darker-hover'], dark: backgroundColor['dark-neutral-darker-hover'] },
|
|
73
|
+
{ name: 'bg-neutral-inverse', usage: 'Neutral background on dark/colored backgrounds when there is no meaning tied to the color', light: backgroundColor['neutral-inverse'], dark: backgroundColor['dark-neutral-inverse'] },
|
|
74
|
+
{ name: 'bg-neutral-inverse-hover', usage: 'Neutral inverse background in a hovered state', light: backgroundColor['neutral-inverse-hover'], dark: backgroundColor['dark-neutral-inverse-hover'] },
|
|
75
|
+
{ name: 'bg-accent', usage: 'Background for interactive elements, such as selected radio and icon items', light: backgroundColor['accent'], dark: backgroundColor['dark-accent'] },
|
|
76
|
+
{ name: 'bg-accent-hover', usage: 'Background for interactive elements in a hovered state', light: backgroundColor['accent-hover'], dark: backgroundColor['dark-accent-hover'] },
|
|
77
|
+
{ name: 'bg-accent-inverse', usage: 'Background for interactive elements in a focused state, such as primary buttons, checkboxes, and toggle buttons', light: backgroundColor['accent-inverse'], dark: backgroundColor['dark-accent-inverse'] },
|
|
78
|
+
{ name: 'bg-accent-inverse-hover', usage: 'Background for interactive elements in a focused state, in a hovered state', light: backgroundColor['accent-inverse-hover'], dark: backgroundColor['dark-accent-inverse-hover'] },
|
|
79
|
+
{ name: 'bg-success', usage: 'Background for communicating a favorable outcome, such as a success section message', light: backgroundColor['success'], dark: backgroundColor['dark-success'] },
|
|
80
|
+
{ name: 'bg-success-hover', usage: 'Background for communicating a favorable outcome in a hovered state', light: backgroundColor['success-hover'], dark: backgroundColor['dark-success-hover'] },
|
|
81
|
+
{ name: 'bg-success-inverse', usage: 'Vibrant background for communicating a favorable outcome', light: backgroundColor['success-inverse'], dark: backgroundColor['dark-success-inverse'] },
|
|
82
|
+
{ name: 'bg-success-inverse-hover', usage: 'Vibrant background for communicating a favorable outcome in a hovered state', light: backgroundColor['success-inverse-hover'], dark: backgroundColor['dark-success-inverse-hover'] },
|
|
83
|
+
{ name: 'bg-warning', usage: 'Background for communicating caution, such as a warning section message', light: backgroundColor['warning'], dark: backgroundColor['dark-warning'] },
|
|
84
|
+
{ name: 'bg-warning-hover', usage: 'Background for communicating caution in a hovered state', light: backgroundColor['warning-hover'], dark: backgroundColor['dark-warning-hover'] },
|
|
85
|
+
{ name: 'bg-warning-inverse', usage: 'Vibrant background for communicating caution, such as warning buttons and banners', light: backgroundColor['warning-inverse'], dark: backgroundColor['dark-warning-inverse'] },
|
|
86
|
+
{ name: 'bg-warning-inverse-hover', usage: 'Vibrant background for communicating caution in a hovered state', light: backgroundColor['warning-inverse-hover'], dark: backgroundColor['dark-warning-inverse-hover'] },
|
|
87
|
+
{ name: 'bg-danger', usage: 'Background for communicating critical information, such as error section messages', light: backgroundColor['danger'], dark: backgroundColor['dark-danger'] },
|
|
88
|
+
{ name: 'bg-danger-hover', usage: 'Background for communicating critical information in a hovered state', light: backgroundColor['danger-hover'], dark: backgroundColor['dark-danger-hover'] },
|
|
89
|
+
{ name: 'bg-danger-inverse', usage: 'Vibrant background for communicating critical information, such as danger buttons and error banners', light: backgroundColor['danger-inverse'], dark: backgroundColor['dark-danger-inverse'] },
|
|
90
|
+
{ name: 'bg-danger-inverse-hover', usage: 'Vibrant background for communicating critical information in a hovered state', light: backgroundColor['danger-inverse-hover'], dark: backgroundColor['dark-danger-inverse-hover'] },
|
|
91
|
+
{ name: 'bg-blue', usage: 'Subtle blue background when there is no meaning tied to the color', light: backgroundColor['blue'], dark: backgroundColor['dark-blue'] },
|
|
92
|
+
{ name: 'bg-blue-hover', usage: 'Subtle blue background in a hovered state', light: backgroundColor['blue-hover'], dark: backgroundColor['dark-blue-hover'] },
|
|
93
|
+
{ name: 'bg-blue-inverse', usage: 'Vibrant blue background', light: backgroundColor['blue-inverse'], dark: backgroundColor['dark-blue-inverse'] },
|
|
94
|
+
{ name: 'bg-blue-inverse-hover', usage: 'Vibrant blue background in a hovered state', light: backgroundColor['blue-inverse-hover'], dark: backgroundColor['dark-blue-inverse-hover'] },
|
|
95
|
+
{ name: 'bg-orange', usage: 'Subtle orange background when there is no meaning tied to the color', light: backgroundColor['orange'], dark: backgroundColor['dark-orange'] },
|
|
96
|
+
{ name: 'bg-orange-hover', usage: 'Subtle orange background in a hovered state', light: backgroundColor['orange-hover'], dark: backgroundColor['dark-orange-hover'] },
|
|
97
|
+
{ name: 'bg-orange-inverse', usage: 'Vibrant orange background', light: backgroundColor['orange-inverse'], dark: backgroundColor['dark-orange-inverse'] },
|
|
98
|
+
{ name: 'bg-orange-inverse-hover', usage: 'Vibrant orange background in a hovered state', light: backgroundColor['orange-inverse-hover'], dark: backgroundColor['dark-orange-inverse-hover'] },
|
|
99
|
+
{ name: 'bg-sky', usage: 'Subtle sky background when there is no meaning tied to the color', light: backgroundColor['sky'], dark: backgroundColor['dark-sky'] },
|
|
100
|
+
{ name: 'bg-sky-hover', usage: 'Subtle sky background in a hovered state', light: backgroundColor['sky-hover'], dark: backgroundColor['dark-sky-hover'] },
|
|
101
|
+
{ name: 'bg-sky-inverse', usage: 'Vibrant sky background', light: backgroundColor['sky-inverse'], dark: backgroundColor['dark-sky-inverse'] },
|
|
102
|
+
{ name: 'bg-sky-inverse-hover', usage: 'Vibrant sky background in a hovered state', light: backgroundColor['sky-inverse-hover'], dark: backgroundColor['dark-sky-inverse-hover'] },
|
|
103
|
+
{ name: 'bg-pink', usage: 'Subtle pink background when there is no meaning tied to the color', light: backgroundColor['pink'], dark: backgroundColor['dark-pink'] },
|
|
104
|
+
{ name: 'bg-pink-hover', usage: 'Subtle pink background in a hovered state', light: backgroundColor['pink-hover'], dark: backgroundColor['dark-pink-hover'] },
|
|
105
|
+
{ name: 'bg-pink-inverse', usage: 'Vibrant pink background', light: backgroundColor['pink-inverse'], dark: backgroundColor['dark-pink-inverse'] },
|
|
106
|
+
{ name: 'bg-pink-inverse-hover', usage: 'Vibrant pink background in a hovered state', light: backgroundColor['pink-inverse-hover'], dark: backgroundColor['dark-pink-inverse-hover'] },
|
|
107
|
+
{ name: 'bg-plum', usage: 'Subtle plum background when there is no meaning tied to the color', light: backgroundColor['plum'], dark: backgroundColor['dark-plum'] },
|
|
108
|
+
{ name: 'bg-plum-hover', usage: 'Subtle plum background in a hovered state', light: backgroundColor['plum-hover'], dark: backgroundColor['dark-plum-hover'] },
|
|
109
|
+
{ name: 'bg-plum-inverse', usage: 'Vibrant plum background', light: backgroundColor['plum-inverse'], dark: backgroundColor['dark-plum-inverse'] },
|
|
110
|
+
{ name: 'bg-plum-inverse-hover', usage: 'Vibrant plum background in a hovered state', light: backgroundColor['plum-inverse-hover'], dark: backgroundColor['dark-plum-inverse-hover'] },
|
|
111
|
+
{ name: 'bg-lilac', usage: 'Subtle lilac background when there is no meaning tied to the color', light: backgroundColor['lilac'], dark: backgroundColor['dark-lilac'] },
|
|
112
|
+
{ name: 'bg-lilac-hover', usage: 'Subtle lilac background in a hovered state', light: backgroundColor['lilac-hover'], dark: backgroundColor['dark-lilac-hover'] },
|
|
113
|
+
{ name: 'bg-lilac-inverse', usage: 'Vibrant lilac background', light: backgroundColor['lilac-inverse'], dark: backgroundColor['dark-lilac-inverse'] },
|
|
114
|
+
{ name: 'bg-lilac-inverse-hover', usage: 'Vibrant lilac background in a hovered state', light: backgroundColor['lilac-inverse-hover'], dark: backgroundColor['dark-lilac-inverse-hover'] },
|
|
115
|
+
{ name: 'bg-lime', usage: 'Subtle lime background when there is no meaning tied to the color, such as lime category icons', light: backgroundColor['lime'], dark: backgroundColor['dark-lime'] },
|
|
116
|
+
{ name: 'bg-lime-hover', usage: 'Subtle lime background in a hovered state', light: backgroundColor['lime-hover'], dark: backgroundColor['dark-lime-hover'] },
|
|
117
|
+
{ name: 'bg-lime-inverse', usage: 'Vibrant lime background', light: backgroundColor['lime-inverse'], dark: backgroundColor['dark-lime-inverse'] },
|
|
118
|
+
{ name: 'bg-lime-inverse-hover', usage: 'Vibrant lime background in a hovered state', light: backgroundColor['lime-inverse-hover'], dark: backgroundColor['dark-lime-inverse-hover'] },
|
|
119
|
+
{ name: 'bg-pear', usage: 'Subtle pear background when there is no meaning tied to the color', light: backgroundColor['pear'], dark: backgroundColor['dark-pear'] },
|
|
120
|
+
{ name: 'bg-pear-hover', usage: 'Subtle pear background in a hovered state', light: backgroundColor['pear-hover'], dark: backgroundColor['dark-pear-hover'] },
|
|
121
|
+
{ name: 'bg-pear-inverse', usage: 'Vibrant pear background', light: backgroundColor['pear-inverse'], dark: backgroundColor['dark-pear-inverse'] },
|
|
122
|
+
{ name: 'bg-pear-inverse-hover', usage: 'Vibrant pear background in a hovered state', light: backgroundColor['pear-inverse-hover'], dark: backgroundColor['dark-pear-inverse-hover'] },
|
|
123
|
+
{ name: 'bg-surface', usage: 'Background color for foreground UI elements, such as cards, modals, and sidebars', light: backgroundColor['surface'], dark: backgroundColor['dark-primary'] },
|
|
124
|
+
{ name: 'bg-surface-secondary', usage: 'Background color for secondary UI elements, such as sidebars or panels', light: backgroundColor['surface-secondary'], dark: backgroundColor['dark-secondary'] },
|
|
125
|
+
{ name: 'bg-base', usage: 'Background color for the page or application', light: backgroundColor['base'], dark: backgroundColor['dark-base'] },
|
|
126
|
+
{ name: 'bg-base-inverse', usage: 'Background color for inverted contexts, such as navbars', light: backgroundColor['base-inverse'], dark: backgroundColor['dark-base-inverse'] },
|
|
127
|
+
{ name: 'bg-overlay', usage: 'Background color for overlays above content, such as modals and drawers', light: backgroundColor['overlay'], dark: backgroundColor['dark-overlay'] },
|
|
128
|
+
];
|
|
129
|
+
|
|
130
|
+
const borderTokens: TokenRow[] = [
|
|
131
|
+
{ name: 'border-static', usage: 'Visually group or separate UI elements, such as table cells and panel dividers', light: borderColor['static'], dark: borderColor['dark-static'] },
|
|
132
|
+
{ name: 'border-input', usage: 'Input element borders', light: borderColor['input'], dark: borderColor['dark-input'] },
|
|
133
|
+
{ name: 'border-interactive', usage: 'Interactive element borders, such as button and input borders', light: borderColor['interactive'], dark: borderColor['dark-interactive'] },
|
|
134
|
+
{ name: 'border-hover', usage: 'Interactive elements in a hovered or selected state', light: borderColor['hover'], dark: borderColor['dark-hover'] },
|
|
135
|
+
{ name: 'border-focus', usage: 'Elements in a focused or active state, such as active input fields', light: borderColor['focus'], dark: borderColor['dark-focus'] },
|
|
136
|
+
{ name: 'border-danger', usage: 'Borders communicating critical information, such as an input with a validation error', light: borderColor['danger'], dark: borderColor['dark-danger'] },
|
|
137
|
+
{ name: 'border-static-inverse', usage: 'Static border on dark or colored backgrounds', light: borderColor['static-inverse'], dark: borderColor['dark-static-inverse'] },
|
|
138
|
+
{ name: 'border-interactive-inverse', usage: 'Interactive border on dark or colored backgrounds', light: borderColor['interactive-inverse'], dark: borderColor['dark-interactive-inverse'] },
|
|
139
|
+
{ name: 'border-blue-inverse', usage: 'Borders on blue backgrounds', light: borderColor['blue-inverse'], dark: borderColor['dark-blue-inverse'] },
|
|
140
|
+
{ name: 'border-orange-inverse', usage: 'Borders on orange backgrounds', light: borderColor['orange-inverse'], dark: borderColor['dark-orange-inverse'] },
|
|
141
|
+
{ name: 'border-pink-inverse', usage: 'Borders on pink backgrounds', light: borderColor['pink-inverse'], dark: borderColor['dark-pink-inverse'] },
|
|
142
|
+
{ name: 'border-lime-inverse', usage: 'Borders on lime backgrounds', light: borderColor['lime-inverse'], dark: borderColor['dark-lime-inverse'] },
|
|
143
|
+
{ name: 'border-axis', usage: 'Chart axis lines and grid lines', light: borderColor['axis'], dark: borderColor['dark-axis'] },
|
|
144
|
+
{ name: 'border-white', usage: 'White borders on dark or colored backgrounds', light: borderColor['white'], dark: null },
|
|
145
|
+
];
|
|
146
|
+
</script>
|
|
147
|
+
|
|
148
|
+
{#snippet tokenTable(tokens: typeof textTokens)}
|
|
149
|
+
<div class="overflow-x-auto">
|
|
150
|
+
<table class="w-full border-collapse">
|
|
151
|
+
<thead>
|
|
152
|
+
<tr class="border-b border-static bg-base text-left text-xs text-tertiary font-medium tracking-wider uppercase">
|
|
153
|
+
<th class="px-4 py-3">Token</th>
|
|
154
|
+
<th class="px-4 py-3">Usage</th>
|
|
155
|
+
<th class="px-4 py-3">Light mode</th>
|
|
156
|
+
<th class="px-4 py-3 border-b border-static-inverse bg-dark-primary">Dark mode</th>
|
|
157
|
+
</tr>
|
|
158
|
+
</thead>
|
|
159
|
+
<tbody>
|
|
160
|
+
{#each tokens as { name, usage, light, dark }}
|
|
161
|
+
<tr>
|
|
162
|
+
<td class="p-4 align-middle border-b border-static font-mono font-medium text-xs text-primary whitespace-nowrap w-1/4">{name}</td>
|
|
163
|
+
<td class="p-4 align-middle border-b border-static text-label text-secondary">{usage}</td>
|
|
164
|
+
<td class="p-4 align-middle border-b border-static w-1/5">
|
|
165
|
+
{#if light}
|
|
166
|
+
<span class="inline-flex items-center gap-3">
|
|
167
|
+
<span class="inline-block size-8 rounded shrink-0 border border-static" style="background: {light}"></span>
|
|
168
|
+
<code class="text-xs font-mono text-tertiary">{colorLookup[light.toLowerCase()] ?? light}</code>
|
|
169
|
+
</span>
|
|
170
|
+
{:else}
|
|
171
|
+
<span class="text-xs text-tertiary">—</span>
|
|
172
|
+
{/if}
|
|
173
|
+
</td>
|
|
174
|
+
<td class="p-4 align-middle border-b border-dark-static bg-dark-base w-1/5">
|
|
175
|
+
{#if dark}
|
|
176
|
+
<span class="inline-flex items-center gap-3">
|
|
177
|
+
<span class="inline-block size-8 rounded shrink-0 border border-static-inverse" style="background: {dark}"></span>
|
|
178
|
+
<code class="text-xs font-mono text-tertiary-inverse">{colorLookup[dark.toLowerCase()] ?? dark}</code>
|
|
179
|
+
</span>
|
|
180
|
+
{:else}
|
|
181
|
+
<span class="text-xs text-tertiary-inverse">—</span>
|
|
182
|
+
{/if}
|
|
183
|
+
</td>
|
|
184
|
+
</tr>
|
|
185
|
+
{/each}
|
|
186
|
+
</tbody>
|
|
187
|
+
</table>
|
|
188
|
+
</div>
|
|
189
|
+
{/snippet}
|
|
190
|
+
|
|
191
|
+
<Story name="Text">{@render tokenTable(textTokens)}</Story>
|
|
192
|
+
<Story name="Icon">{@render tokenTable(iconTokens)}</Story>
|
|
193
|
+
<Story name="Background">{@render tokenTable(backgroundTokens)}</Story>
|
|
194
|
+
<Story name="Border">{@render tokenTable(borderTokens)}</Story>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const Colors: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type Colors = InstanceType<typeof Colors>;
|
|
18
|
+
export default Colors;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const colorLookup: Record<string, string>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { colors } from './colors';
|
|
2
|
+
function buildLookup() {
|
|
3
|
+
const m = {};
|
|
4
|
+
const set = (hex, label) => {
|
|
5
|
+
if (typeof hex === 'string')
|
|
6
|
+
m[hex.toLowerCase()] = label;
|
|
7
|
+
};
|
|
8
|
+
set(colors.base.mist, 'base.mist');
|
|
9
|
+
set(colors.base.snow, 'base.snow');
|
|
10
|
+
for (const [k, v] of Object.entries(colors.base.obsidian)) {
|
|
11
|
+
set(v, k === 'default' ? 'base.obsidian' : `base.obsidian[${k}]`);
|
|
12
|
+
}
|
|
13
|
+
for (const [k, v] of Object.entries(colors.base.white)) {
|
|
14
|
+
set(v, k === 'default' ? 'base.white' : `base.white[${k}]`);
|
|
15
|
+
}
|
|
16
|
+
for (const [k, v] of Object.entries(colors.base.midnight)) {
|
|
17
|
+
set(v, k === 'default' ? 'base.midnight' : `base.midnight[${k}]`);
|
|
18
|
+
}
|
|
19
|
+
const families = [
|
|
20
|
+
'gray', 'periwinkle', 'orange', 'sky', 'blue', 'green',
|
|
21
|
+
'yellow', 'red', 'pink', 'plum', 'lilac', 'lime', 'pear',
|
|
22
|
+
];
|
|
23
|
+
for (const family of families) {
|
|
24
|
+
for (const [step, val] of Object.entries(colors[family])) {
|
|
25
|
+
if (typeof val === 'string') {
|
|
26
|
+
set(val, `${family}[${step}]`);
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
for (const [variant, hex] of Object.entries(val)) {
|
|
30
|
+
set(hex, variant === 'default' ? `${family}[${step}]` : `${family}[${step}][${variant}]`);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return m;
|
|
36
|
+
}
|
|
37
|
+
export const colorLookup = buildLookup();
|
package/dist/tokens/colors.d.ts
CHANGED