@dxos/ui-theme 0.8.4-main.fcc0d83b33 → 0.8.4-staging.60fe92afc8
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/LICENSE +102 -5
- package/README.md +1 -1
- package/dist/lib/browser/index.mjs +89 -862
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +89 -862
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/plugin/node-cjs/main.css +198 -97
- package/dist/plugin/node-cjs/main.css.map +3 -3
- package/dist/plugin/node-cjs/meta.json +1 -1
- package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs +82 -10
- package/dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map +3 -3
- package/dist/plugin/node-esm/main.css +198 -97
- package/dist/plugin/node-esm/main.css.map +3 -3
- package/dist/plugin/node-esm/meta.json +1 -1
- package/dist/plugin/node-esm/plugins/ThemePlugin.mjs +84 -12
- package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map +3 -3
- package/dist/types/src/Theme.stories.d.ts.map +1 -1
- package/dist/types/src/defs.d.ts +1 -1
- package/dist/types/src/defs.d.ts.map +1 -1
- package/dist/types/src/fragments/density.d.ts +2 -2
- package/dist/types/src/fragments/density.d.ts.map +1 -1
- package/dist/types/src/fragments/hover.d.ts +0 -1
- package/dist/types/src/fragments/hover.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/plugins/ThemePlugin.d.ts +2 -1
- package/dist/types/src/plugins/ThemePlugin.d.ts.map +1 -1
- package/dist/types/src/util/hash-styles.d.ts +12 -2
- package/dist/types/src/util/hash-styles.d.ts.map +1 -1
- package/dist/types/src/util/mx.d.ts +0 -56
- package/dist/types/src/util/mx.d.ts.map +1 -1
- package/dist/types/src/util/valence.d.ts +8 -2
- package/dist/types/src/util/valence.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -11
- package/src/Theme.stories.tsx +94 -27
- package/src/css/DESIGN_SYSTEM.md +187 -0
- package/src/css/base/base.css +2 -2
- package/src/css/components/button.css +63 -13
- package/src/css/components/card.css +14 -0
- package/src/css/components/checkbox.css +3 -3
- package/src/css/components/focus.css +12 -12
- package/src/css/components/link.css +4 -1
- package/src/css/components/panel.css +23 -23
- package/src/css/components/state.css +99 -0
- package/src/css/components/state.md +101 -0
- package/src/css/components/surface.css +33 -11
- package/src/css/components/tag.css +24 -25
- package/src/css/integrations/codemirror.css +4 -3
- package/src/css/integrations/tldraw.css +1 -1
- package/src/css/layout/main.css +6 -0
- package/src/css/theme/palette.css +34 -0
- package/src/css/theme/semantic.css +101 -60
- package/src/css/theme/spacing.css +28 -11
- package/src/css/theme/styles.css +172 -119
- package/src/defs.ts +3 -1
- package/src/fragments/AUDIT.md +0 -2
- package/src/fragments/density.ts +34 -7
- package/src/fragments/hover.ts +0 -2
- package/src/index.ts +1 -1
- package/src/main.css +68 -9
- package/src/plugins/ThemePlugin.ts +102 -14
- package/src/plugins/main.css +10 -7
- package/src/util/hash-styles.ts +54 -42
- package/src/util/mx.ts +1 -126
- package/src/util/valence.ts +15 -5
- package/dist/types/src/theme/components/avatar.d.ts +0 -21
- package/dist/types/src/theme/components/avatar.d.ts.map +0 -1
- package/dist/types/src/theme/components/breadcrumb.d.ts +0 -9
- package/dist/types/src/theme/components/breadcrumb.d.ts.map +0 -1
- package/dist/types/src/theme/components/button.d.ts +0 -15
- package/dist/types/src/theme/components/button.d.ts.map +0 -1
- package/dist/types/src/theme/components/card.d.ts +0 -12
- package/dist/types/src/theme/components/card.d.ts.map +0 -1
- package/dist/types/src/theme/components/dialog.d.ts +0 -17
- package/dist/types/src/theme/components/dialog.d.ts.map +0 -1
- package/dist/types/src/theme/components/focus.d.ts +0 -6
- package/dist/types/src/theme/components/focus.d.ts.map +0 -1
- package/dist/types/src/theme/components/icon-button.d.ts +0 -9
- package/dist/types/src/theme/components/icon-button.d.ts.map +0 -1
- package/dist/types/src/theme/components/icon.d.ts +0 -10
- package/dist/types/src/theme/components/icon.d.ts.map +0 -1
- package/dist/types/src/theme/components/index.d.ts +0 -27
- package/dist/types/src/theme/components/index.d.ts.map +0 -1
- package/dist/types/src/theme/components/input.d.ts +0 -115
- package/dist/types/src/theme/components/input.d.ts.map +0 -1
- package/dist/types/src/theme/components/link.d.ts +0 -7
- package/dist/types/src/theme/components/link.d.ts.map +0 -1
- package/dist/types/src/theme/components/list.d.ts +0 -14
- package/dist/types/src/theme/components/list.d.ts.map +0 -1
- package/dist/types/src/theme/components/main.d.ts +0 -28
- package/dist/types/src/theme/components/main.d.ts.map +0 -1
- package/dist/types/src/theme/components/menu.d.ts +0 -13
- package/dist/types/src/theme/components/menu.d.ts.map +0 -1
- package/dist/types/src/theme/components/message.d.ts +0 -12
- package/dist/types/src/theme/components/message.d.ts.map +0 -1
- package/dist/types/src/theme/components/popover.d.ts +0 -11
- package/dist/types/src/theme/components/popover.d.ts.map +0 -1
- package/dist/types/src/theme/components/scroll-area.d.ts +0 -32
- package/dist/types/src/theme/components/scroll-area.d.ts.map +0 -1
- package/dist/types/src/theme/components/select.d.ts +0 -13
- package/dist/types/src/theme/components/select.d.ts.map +0 -1
- package/dist/types/src/theme/components/separator.d.ts +0 -8
- package/dist/types/src/theme/components/separator.d.ts.map +0 -1
- package/dist/types/src/theme/components/skeleton.d.ts +0 -7
- package/dist/types/src/theme/components/skeleton.d.ts.map +0 -1
- package/dist/types/src/theme/components/splitter.d.ts +0 -4
- package/dist/types/src/theme/components/splitter.d.ts.map +0 -1
- package/dist/types/src/theme/components/status.d.ts +0 -9
- package/dist/types/src/theme/components/status.d.ts.map +0 -1
- package/dist/types/src/theme/components/tag.d.ts +0 -7
- package/dist/types/src/theme/components/tag.d.ts.map +0 -1
- package/dist/types/src/theme/components/toast.d.ts +0 -12
- package/dist/types/src/theme/components/toast.d.ts.map +0 -1
- package/dist/types/src/theme/components/toolbar.d.ts +0 -11
- package/dist/types/src/theme/components/toolbar.d.ts.map +0 -1
- package/dist/types/src/theme/components/tooltip.d.ts +0 -8
- package/dist/types/src/theme/components/tooltip.d.ts.map +0 -1
- package/dist/types/src/theme/components/treegrid.d.ts +0 -10
- package/dist/types/src/theme/components/treegrid.d.ts.map +0 -1
- package/dist/types/src/theme/index.d.ts +0 -4
- package/dist/types/src/theme/index.d.ts.map +0 -1
- package/dist/types/src/theme/primitives/column.d.ts +0 -29
- package/dist/types/src/theme/primitives/column.d.ts.map +0 -1
- package/dist/types/src/theme/primitives/index.d.ts +0 -3
- package/dist/types/src/theme/primitives/index.d.ts.map +0 -1
- package/dist/types/src/theme/primitives/panel.d.ts +0 -13
- package/dist/types/src/theme/primitives/panel.d.ts.map +0 -1
- package/dist/types/src/theme/theme.d.ts +0 -5
- package/dist/types/src/theme/theme.d.ts.map +0 -1
- package/src/css/components/selected.css +0 -30
- package/src/theme/components/avatar.ts +0 -95
- package/src/theme/components/breadcrumb.ts +0 -29
- package/src/theme/components/button.ts +0 -48
- package/src/theme/components/card.ts +0 -102
- package/src/theme/components/dialog.ts +0 -61
- package/src/theme/components/focus.ts +0 -33
- package/src/theme/components/icon-button.ts +0 -21
- package/src/theme/components/icon.ts +0 -28
- package/src/theme/components/index.ts +0 -30
- package/src/theme/components/input.ts +0 -171
- package/src/theme/components/link.ts +0 -25
- package/src/theme/components/list.ts +0 -46
- package/src/theme/components/main.ts +0 -34
- package/src/theme/components/menu.ts +0 -50
- package/src/theme/components/message.ts +0 -40
- package/src/theme/components/popover.ts +0 -41
- package/src/theme/components/scroll-area.ts +0 -115
- package/src/theme/components/select.ts +0 -52
- package/src/theme/components/separator.ts +0 -24
- package/src/theme/components/skeleton.ts +0 -23
- package/src/theme/components/splitter.ts +0 -20
- package/src/theme/components/status.ts +0 -32
- package/src/theme/components/tag.ts +0 -23
- package/src/theme/components/toast.ts +0 -53
- package/src/theme/components/toolbar.ts +0 -35
- package/src/theme/components/tooltip.ts +0 -27
- package/src/theme/components/treegrid.ts +0 -37
- package/src/theme/index.ts +0 -7
- package/src/theme/primitives/column.ts +0 -71
- package/src/theme/primitives/index.ts +0 -6
- package/src/theme/primitives/panel.ts +0 -43
- package/src/theme/theme.ts +0 -87
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
|
|
2
|
-
@import "tailwindcss";
|
|
2
|
+
@import "tailwindcss" source(none);
|
|
3
3
|
@import "@fontsource-variable/jetbrains-mono/wght-italic.css";
|
|
4
4
|
@import "@fontsource-variable/jetbrains-mono/wght.css";
|
|
5
5
|
@import "@fontsource/poiret-one";
|
|
@@ -30,14 +30,29 @@
|
|
|
30
30
|
@theme { --ring-offset-width-focus-offset: var(--dx-focus-offset); --ring-width-focus-line: var(--dx-focus-line); --ring-width-hair-line: var(--dx-hair-line); --ring-width-thick-line: var(--dx-thick-line); --ring-width-no-line: var(--dx-no-line); --border-width-landmark-line: var(--dx-landmark-line); --radius-none: 0; --radius-sm: 0.25rem; --radius: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3); }
|
|
31
31
|
|
|
32
32
|
/* src/css/theme/palette.css */
|
|
33
|
-
@theme { --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); --color-composer-100: rgb(5 40 61); --color-composer-200: rgb(10 75 105); --color-composer-300: rgb(1 122 183); --color-composer-400: rgb(6 197 253); }
|
|
33
|
+
@theme { --dx-neutral-hue: 190; --dx-neutral-chroma: 0.001; --color-neutral-50: oklch(0.985 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%); --color-neutral-100: oklch(0.935 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-125: color-mix(in oklch, var(--color-neutral-100) 75%, var(--color-neutral-200) 25%); --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%); --color-neutral-175: color-mix(in oklch, var(--color-neutral-150) 50%, var(--color-neutral-200) 50%); --color-neutral-200: oklch(0.875 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%); --color-neutral-300: oklch(0.8 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-400: oklch(0.708 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-500: oklch(0.556 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-600: oklch(0.439 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-700: oklch(0.371 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%); --color-neutral-775: color-mix(in oklch, var(--color-neutral-750) 50%, var(--color-neutral-800) 50%); --color-neutral-800: oklch(0.269 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-825: color-mix(in oklch, var(--color-neutral-800) 75%, var(--color-neutral-900) 25%); --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%); --color-neutral-875: color-mix(in oklch, var(--color-neutral-800) 25%, var(--color-neutral-900) 75%); --color-neutral-900: oklch(0.205 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%); --color-neutral-950: oklch(0.145 var(--dx-neutral-chroma) var(--dx-neutral-hue)); --color-primary-50: var(--color-blue-50); --color-primary-100: var(--color-blue-100); --color-primary-200: var(--color-blue-200); --color-primary-300: var(--color-blue-300); --color-primary-400: var(--color-blue-400); --color-primary-500: var(--color-blue-500); --color-primary-600: var(--color-blue-600); --color-primary-700: var(--color-blue-700); --color-primary-800: var(--color-blue-800); --color-primary-900: var(--color-blue-900); --color-primary-950: var(--color-blue-950); --color-composer-100: rgb(5 40 61); --color-composer-200: rgb(10 75 105); --color-composer-300: rgb(1 122 183); --color-composer-400: rgb(6 197 253); }
|
|
34
34
|
|
|
35
35
|
/* src/css/theme/semantic.css */
|
|
36
|
-
@theme { --
|
|
36
|
+
@theme { --dx-elevation-0: light-dark(var(--color-neutral-300), var(--color-neutral-950)); --dx-elevation-1: light-dark(var(--color-neutral-200), var(--color-neutral-900)); --dx-elevation-2: light-dark(var(--color-neutral-125), var(--color-neutral-875)); --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-850)); --dx-elevation-4: light-dark(var(--color-neutral-100), var(--color-neutral-825)); --dx-elevation-5: light-dark(var(--color-neutral-75), var(--color-neutral-800)); --dx-elevation-6: light-dark(var(--color-neutral-50), var(--color-neutral-775)); --dx-elevation-7: light-dark(white, var(--color-neutral-750)); --color-sidebar-surface: var(--dx-elevation-2); --color-header-surface: var(--dx-elevation-2); --color-deck-surface: var(--dx-elevation-3); --color-base-surface: var(--dx-elevation-3); --color-card-surface: var(--dx-elevation-3); --color-group-surface: var(--dx-elevation-4); --color-group-alt-surface: light-dark( oklch(from var(--dx-elevation-4) calc(l - 0.03) c h), oklch(from var(--dx-elevation-4) calc(l + 0.03) c h) ); --color-input-surface: var(--dx-elevation-4); --color-toolbar-surface: var(--dx-elevation-5); --color-modal-surface: var(--dx-elevation-6); --color-popover-surface: var(--dx-elevation-6); --color-l0-surface: var(--dx-elevation-1); --color-l1-surface: var(--dx-elevation-2); --color-r0-surface: var(--dx-elevation-2); --color-r1-surface: var(--dx-elevation-2); --color-scrim-surface: light-dark( oklch(from var(--color-neutral-50) l c h / 0.5), oklch(from var(--color-neutral-950) l c h / 0.25) ); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-sidebar-fg: light-dark(var(--color-neutral-700), var(--color-neutral-250)); --color-sidebar-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-75)); --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-850)); --color-focus-ring: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-focus-ring-subtle: light-dark(var(--color-neutral-300), var(--color-neutral-600)); --color-attention-surface: var(--color-focus-surface); --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3); --color-input-bg: light-dark(var(--color-neutral-250), var(--color-neutral-700)); --color-input-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --dx-hover-surface-base: light-dark(var(--color-neutral-200), var(--color-neutral-850)); --color-hover-surface: var(--dx-hover-surface-base); --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --dx-current-surface-base: light-dark(var(--color-neutral-150), var(--color-neutral-800)); --dx-current-surface-hover-base: light-dark(var(--color-neutral-150), var(--color-neutral-600)); --color-current-surface: var(--dx-current-surface-base); --color-current-surface-hover: var(--dx-current-surface-hover-base); --color-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-selected-surface: var(--color-current-surface); --color-selected-surface-hover: var(--color-current-surface-hover); --color-selected-fg: var(--color-current-fg); --color-accent-bg: light-dark(var(--color-blue-600), var(--color-blue-700)); --color-accent-bg-hover: light-dark(var(--color-blue-700), var(--color-blue-800)); --color-accent-fg: var(--color-blue-100); --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400)); --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --color-primary-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-700)); --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500)); --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600)); --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800)); --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400)); --color-grid-selection-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600)); --color-grid-comment-active: light-dark( oklch(from var(--color-green-400) l c h / 0.5), oklch(from var(--color-green-600) l c h / 0.5) ); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); }
|
|
37
37
|
|
|
38
38
|
/* src/css/theme/spacing.css */
|
|
39
39
|
@theme { --spacing-screen-border: 2rem; --spacing-popover-default-width: 20rem; --spacing-popover-min-width: 16rem; --spacing-document-max-width: 50rem; --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right)); --spacing-card-default-width: 20rem; --spacing-card-min-width: 18rem; --spacing-card-max-width: 22rem; --spacing-card-min-height: 18rem; --spacing-card-max-height: 30rem; --spacing-tag-padding-block: 0.125rem; --spacing-trim-xs: 0.25rem; --spacing-trim-sm: 0.5rem; --spacing-trim-md: 0.75rem; --spacing-trim-lg: 1.5rem; --spacing-form-chrome: var(--spacing-trim-xs); --spacing-form-gap: var(--spacing-trim-sm); --spacing-form-section-gap: var(--spacing-trim-lg); --spacing-form-padding: var(--spacing-trim-sm); --spacing-icon-button-padding: var(--spacing-trim-xs); --spacing-scroll-padding: 4px; }
|
|
40
40
|
@layer dx-tokens {
|
|
41
|
+
.dx-density-lg {
|
|
42
|
+
--spacing-form-padding: var(--spacing-trim-md);
|
|
43
|
+
--spacing-icon-button-padding: var(--spacing-trim-sm);
|
|
44
|
+
--spacing-scroll-padding: 8px;
|
|
45
|
+
}
|
|
46
|
+
.dx-density-sm {
|
|
47
|
+
--spacing-form-padding: var(--spacing-trim-xs);
|
|
48
|
+
--spacing-icon-button-padding: var(--spacing-trim-xs);
|
|
49
|
+
--spacing-scroll-padding: 2px;
|
|
50
|
+
}
|
|
51
|
+
.dx-density-xs {
|
|
52
|
+
--spacing-form-padding: var(--spacing-trim-xs);
|
|
53
|
+
--spacing-icon-button-padding: var(--spacing-trim-xs);
|
|
54
|
+
--spacing-scroll-padding: 2px;
|
|
55
|
+
}
|
|
41
56
|
}
|
|
42
57
|
@layer dx-tokens {
|
|
43
58
|
:root {
|
|
@@ -67,8 +82,9 @@
|
|
|
67
82
|
--dx-focus-line: var(--dx-thick-line);
|
|
68
83
|
--dx-modal-line: var(--dx-hair-line);
|
|
69
84
|
--dx-grid-focus-indicator-width: var(--dx-hair-line);
|
|
70
|
-
--dx-input-
|
|
71
|
-
--dx-input-
|
|
85
|
+
--dx-input-md: var(--dx-lacuna-3);
|
|
86
|
+
--dx-input-lg: var(--dx-lacuna-4);
|
|
87
|
+
--dx-input-sm: var(--dx-lacuna-3);
|
|
72
88
|
--dx-default-icons-size: 1rem;
|
|
73
89
|
}
|
|
74
90
|
[data-grid-focus-indicator-variant=stack] {
|
|
@@ -89,7 +105,7 @@
|
|
|
89
105
|
--dx-l0-avatar-size: 3rem;
|
|
90
106
|
--dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
|
|
91
107
|
--dx-r0-size: var(--dx-rail-size);
|
|
92
|
-
--dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
|
|
108
|
+
--dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
|
|
93
109
|
}
|
|
94
110
|
:root {
|
|
95
111
|
--dx-calc-auto: auto;
|
|
@@ -110,7 +126,7 @@
|
|
|
110
126
|
}
|
|
111
127
|
|
|
112
128
|
/* src/css/theme/styles.css */
|
|
113
|
-
@theme { --color-
|
|
129
|
+
@theme { --color-primary-bg: var(--color-blue-bg); --color-primary-bg-hover: var(--color-blue-bg-hover); --color-primary-fg: var(--color-blue-fg); --color-primary-surface: var(--color-blue-surface); --color-primary-text: var(--color-blue-text); --color-primary-border: var(--color-blue-border); --color-secondary-bg: var(--color-green-bg); --color-secondary-bg-hover: var(--color-green-bg-hover); --color-secondary-fg: var(--color-green-fg); --color-secondary-surface: var(--color-green-surface); --color-secondary-text: var(--color-green-text); --color-secondary-border: var(--color-green-border); --color-info-bg: var(--color-cyan-bg); --color-info-bg-hover: var(--color-cyan-bg-hover); --color-info-fg: var(--color-cyan-fg); --color-info-surface: var(--color-cyan-surface); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-bg: var(--color-emerald-bg); --color-success-bg-hover: var(--color-emerald-bg-hover); --color-success-fg: var(--color-emerald-fg); --color-success-surface: var(--color-emerald-surface); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-bg: var(--color-amber-bg); --color-warning-bg-hover: var(--color-amber-bg-hover); --color-warning-fg: var(--color-amber-fg); --color-warning-surface: var(--color-amber-surface); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-bg: var(--color-rose-bg); --color-error-bg-hover: var(--color-rose-bg-hover); --color-error-fg: var(--color-rose-fg); --color-error-surface: var(--color-rose-surface); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-bg: var(--color-neutral-600); --color-neutral-bg-hover: var(--color-neutral-700); --color-neutral-fg: var(--color-neutral-900); --color-neutral-surface: var(--color-neutral-400); --color-neutral-text: light-dark(var(--color-neutral-800), var(--color-neutral-500)); --color-neutral-border: var(--color-neutral-600); --color-red-bg: var(--color-red-600); --color-red-bg-hover: var(--color-red-700); --color-red-fg: var(--color-red-900); --color-red-surface: var(--color-red-400); --color-red-text: light-dark(var(--color-red-800), var(--color-red-500)); --color-red-border: var(--color-red-600); --color-orange-bg: var(--color-orange-600); --color-orange-bg-hover: var(--color-orange-700); --color-orange-fg: var(--color-orange-900); --color-orange-surface: var(--color-orange-400); --color-orange-text: light-dark(var(--color-orange-800), var(--color-orange-500)); --color-orange-border: var(--color-orange-600); --color-amber-bg: var(--color-amber-600); --color-amber-bg-hover: var(--color-amber-700); --color-amber-fg: var(--color-amber-900); --color-amber-surface: var(--color-amber-400); --color-amber-text: light-dark(var(--color-amber-800), var(--color-amber-500)); --color-amber-border: var(--color-amber-600); --color-yellow-bg: var(--color-yellow-600); --color-yellow-bg-hover: var(--color-yellow-700); --color-yellow-fg: var(--color-yellow-900); --color-yellow-surface: var(--color-yellow-400); --color-yellow-text: light-dark(var(--color-yellow-800), var(--color-yellow-500)); --color-yellow-border: var(--color-yellow-600); --color-lime-bg: var(--color-lime-600); --color-lime-bg-hover: var(--color-lime-700); --color-lime-fg: var(--color-lime-900); --color-lime-surface: var(--color-lime-400); --color-lime-text: light-dark(var(--color-lime-800), var(--color-lime-500)); --color-lime-border: var(--color-lime-600); --color-green-bg: var(--color-green-600); --color-green-bg-hover: var(--color-green-700); --color-green-fg: var(--color-green-900); --color-green-surface: var(--color-green-400); --color-green-text: light-dark(var(--color-green-800), var(--color-green-500)); --color-green-border: var(--color-green-600); --color-emerald-bg: var(--color-emerald-600); --color-emerald-bg-hover: var(--color-emerald-700); --color-emerald-fg: var(--color-emerald-900); --color-emerald-surface: var(--color-emerald-400); --color-emerald-text: light-dark(var(--color-emerald-800), var(--color-emerald-500)); --color-emerald-border: var(--color-emerald-600); --color-teal-bg: var(--color-teal-600); --color-teal-bg-hover: var(--color-teal-700); --color-teal-fg: var(--color-teal-900); --color-teal-surface: var(--color-teal-400); --color-teal-text: light-dark(var(--color-teal-800), var(--color-teal-500)); --color-teal-border: var(--color-teal-600); --color-cyan-bg: var(--color-cyan-600); --color-cyan-bg-hover: var(--color-cyan-700); --color-cyan-fg: var(--color-cyan-900); --color-cyan-surface: var(--color-cyan-400); --color-cyan-text: light-dark(var(--color-cyan-800), var(--color-cyan-500)); --color-cyan-border: var(--color-cyan-600); --color-sky-bg: var(--color-sky-600); --color-sky-bg-hover: var(--color-sky-700); --color-sky-fg: var(--color-sky-900); --color-sky-surface: var(--color-sky-400); --color-sky-text: light-dark(var(--color-sky-800), var(--color-sky-500)); --color-sky-border: var(--color-sky-600); --color-blue-bg: var(--color-blue-600); --color-blue-bg-hover: var(--color-blue-700); --color-blue-fg: var(--color-blue-900); --color-blue-surface: var(--color-blue-400); --color-blue-text: light-dark(var(--color-blue-800), var(--color-blue-500)); --color-blue-border: var(--color-blue-600); --color-indigo-bg: var(--color-indigo-600); --color-indigo-bg-hover: var(--color-indigo-700); --color-indigo-fg: var(--color-indigo-900); --color-indigo-surface: var(--color-indigo-400); --color-indigo-text: light-dark(var(--color-indigo-800), var(--color-indigo-500)); --color-indigo-border: var(--color-indigo-600); --color-violet-bg: var(--color-violet-600); --color-violet-bg-hover: var(--color-violet-700); --color-violet-fg: var(--color-violet-900); --color-violet-surface: var(--color-violet-400); --color-violet-text: light-dark(var(--color-violet-800), var(--color-violet-500)); --color-violet-border: var(--color-violet-600); --color-purple-bg: var(--color-purple-600); --color-purple-bg-hover: var(--color-purple-700); --color-purple-fg: var(--color-purple-900); --color-purple-surface: var(--color-purple-400); --color-purple-text: light-dark(var(--color-purple-800), var(--color-purple-500)); --color-purple-border: var(--color-purple-600); --color-fuchsia-bg: var(--color-fuchsia-600); --color-fuchsia-bg-hover: var(--color-fuchsia-700); --color-fuchsia-fg: var(--color-fuchsia-900); --color-fuchsia-surface: var(--color-fuchsia-400); --color-fuchsia-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-500)); --color-fuchsia-border: var(--color-fuchsia-600); --color-pink-bg: var(--color-pink-600); --color-pink-bg-hover: var(--color-pink-700); --color-pink-fg: var(--color-pink-900); --color-pink-surface: var(--color-pink-400); --color-pink-text: light-dark(var(--color-pink-800), var(--color-pink-500)); --color-pink-border: var(--color-pink-600); --color-rose-bg: var(--color-rose-600); --color-rose-bg-hover: var(--color-rose-700); --color-rose-fg: var(--color-rose-900); --color-rose-surface: var(--color-rose-400); --color-rose-text: light-dark(var(--color-rose-800), var(--color-rose-500)); --color-rose-border: var(--color-rose-600); }
|
|
114
130
|
|
|
115
131
|
/* src/css/theme/text.css */
|
|
116
132
|
@theme { --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "Source Code Pro", monospace; --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; --text-sm--line-height: 1.25rem; --text-base: 1rem; --text-base--line-height: 1.5rem; --text-lg: 1.125rem; --text-lg--line-height: 1.75rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.25rem; --text-4xl: 2.25rem; --text-4xl--line-height: 2.5rem; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; }
|
|
@@ -143,9 +159,9 @@
|
|
|
143
159
|
html .dark,
|
|
144
160
|
.sb-show-main {
|
|
145
161
|
background-color: var(--color-base-surface);
|
|
146
|
-
color: var(--color-base-
|
|
162
|
+
color: var(--color-base-fg);
|
|
147
163
|
--surface-bg: var(--color-base-surface);
|
|
148
|
-
--
|
|
164
|
+
--foreground: var(--color-base-fg);
|
|
149
165
|
--description-text: var(--color-description);
|
|
150
166
|
}
|
|
151
167
|
}
|
|
@@ -262,8 +278,12 @@
|
|
|
262
278
|
/* src/css/components/button.css */
|
|
263
279
|
@layer dx-components {
|
|
264
280
|
.dx-button {
|
|
265
|
-
@apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[
|
|
266
|
-
@apply font-medium transition-colors duration-100 ease-linear bg-input-
|
|
281
|
+
@apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2rem] px-3;
|
|
282
|
+
@apply font-medium transition-colors duration-100 ease-linear bg-input-bg;
|
|
283
|
+
&[data-variant=default] {
|
|
284
|
+
color: var(--dx-valence-text, inherit);
|
|
285
|
+
background: var(--dx-valence-bg, var(--color-input-bg));
|
|
286
|
+
}
|
|
267
287
|
&[aria-pressed=true],
|
|
268
288
|
&[aria-checked=true] {
|
|
269
289
|
@apply text-accent-text bg-attention-surface;
|
|
@@ -274,10 +294,11 @@
|
|
|
274
294
|
&[data-variant=ghost] {
|
|
275
295
|
@apply bg-transparent;
|
|
276
296
|
&:hover {
|
|
277
|
-
|
|
297
|
+
background: light-dark(oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.05) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.05) c h));
|
|
298
|
+
@apply text-inherit;
|
|
278
299
|
}
|
|
279
300
|
&[data-state=open] {
|
|
280
|
-
@apply bg-input-
|
|
301
|
+
@apply bg-input-bg;
|
|
281
302
|
}
|
|
282
303
|
&[aria-pressed=true],
|
|
283
304
|
&[aria-checked=true] {
|
|
@@ -295,20 +316,40 @@
|
|
|
295
316
|
&:hover {
|
|
296
317
|
@apply bg-hover-surface;
|
|
297
318
|
}
|
|
319
|
+
&[data-variant=default]:hover {
|
|
320
|
+
color: var(--dx-valence-text);
|
|
321
|
+
background-color: var(--dx-valence-bg-hover, var(--color-hover-surface));
|
|
322
|
+
}
|
|
323
|
+
&[data-variant=ghost]:hover {
|
|
324
|
+
color: var(--dx-valence-text);
|
|
325
|
+
background-color: var(--dx-valence-bg, var(--color-hover-surface));
|
|
326
|
+
}
|
|
298
327
|
&[data-variant=primary] {
|
|
299
|
-
@apply text-accent-
|
|
328
|
+
@apply text-accent-fg bg-accent-bg;
|
|
300
329
|
&:hover,
|
|
301
330
|
&[aria-pressed=true],
|
|
302
|
-
&[aria-checked=true]
|
|
303
|
-
|
|
331
|
+
&[aria-checked=true],
|
|
332
|
+
&[data-state=open] {
|
|
333
|
+
@apply bg-accent-bg-hover;
|
|
304
334
|
}
|
|
305
335
|
}
|
|
306
336
|
&[data-variant=destructive] {
|
|
307
|
-
@apply text-accent-
|
|
337
|
+
@apply text-accent-fg bg-error-bg;
|
|
308
338
|
&:hover,
|
|
309
339
|
&[aria-pressed=true],
|
|
310
|
-
&[aria-checked=true]
|
|
311
|
-
|
|
340
|
+
&[aria-checked=true],
|
|
341
|
+
&[data-state=open] {
|
|
342
|
+
@apply bg-error-bg-hover;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
&[data-variant=valence] {
|
|
346
|
+
@apply text-inverse-fg;
|
|
347
|
+
background: var(--dx-valence-bg, var(--color-neutral-bg));
|
|
348
|
+
&:hover,
|
|
349
|
+
&[aria-pressed=true],
|
|
350
|
+
&[aria-checked=true],
|
|
351
|
+
&[data-state=open] {
|
|
352
|
+
background-color: var(--dx-valence-bg-hover, var(--color-neutral-bg-hover));
|
|
312
353
|
}
|
|
313
354
|
}
|
|
314
355
|
}
|
|
@@ -319,13 +360,32 @@
|
|
|
319
360
|
.dx-button:not([data-props~=wrap]) {
|
|
320
361
|
@apply truncate;
|
|
321
362
|
}
|
|
363
|
+
.dx-button[data-density=lg] {
|
|
364
|
+
@apply min-h-[2.5rem] px-3;
|
|
365
|
+
}
|
|
366
|
+
.dx-button[data-density=sm] {
|
|
367
|
+
@apply min-h-[1.75rem] px-2;
|
|
368
|
+
}
|
|
369
|
+
.dx-button[data-density=xs] {
|
|
370
|
+
@apply min-h-[1.5rem] px-1 text-xs;
|
|
371
|
+
}
|
|
372
|
+
.dx-button[data-density=xs].aspect-square {
|
|
373
|
+
@apply size-6 px-0;
|
|
374
|
+
}
|
|
322
375
|
@media (pointer: fine) {
|
|
323
|
-
.dx-button[data-density=
|
|
376
|
+
.dx-button[data-density=md] {
|
|
324
377
|
@apply min-h-[2rem] px-2.5;
|
|
325
378
|
}
|
|
326
379
|
}
|
|
327
380
|
}
|
|
328
381
|
|
|
382
|
+
/* src/css/components/card.css */
|
|
383
|
+
@layer dx-components {
|
|
384
|
+
.dx-card__section > *:not([class*=col-span]) {
|
|
385
|
+
grid-column: var(--dx-col, auto);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
329
389
|
/* src/css/components/checkbox.css */
|
|
330
390
|
@layer dx-components {
|
|
331
391
|
.dx-checkbox--switch,
|
|
@@ -334,7 +394,7 @@
|
|
|
334
394
|
&[aria-checked=true],
|
|
335
395
|
&[aria-checked=mixed],
|
|
336
396
|
&:checked {
|
|
337
|
-
@apply bg-accent-
|
|
397
|
+
@apply bg-accent-bg accent-accent-bg border-accent-bg;
|
|
338
398
|
}
|
|
339
399
|
&:not([disabled]),
|
|
340
400
|
&[disabled=false] {
|
|
@@ -343,13 +403,13 @@
|
|
|
343
403
|
&[aria-checked=true],
|
|
344
404
|
&[aria-checked=mixed],
|
|
345
405
|
&:checked {
|
|
346
|
-
@apply bg-accent-
|
|
406
|
+
@apply bg-accent-bg-hover accent-accent-bg-hover border-accent-bg-hover;
|
|
347
407
|
}
|
|
348
408
|
}
|
|
349
409
|
}
|
|
350
410
|
}
|
|
351
411
|
.dx-checkbox {
|
|
352
|
-
@apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-
|
|
412
|
+
@apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-fg shrink-0 inline-grid place-items-center rounded-xs;
|
|
353
413
|
}
|
|
354
414
|
.dx-checkbox--switch {
|
|
355
415
|
@apply inline-block appearance-none relative shrink-0 h-5 w-8;
|
|
@@ -442,9 +502,9 @@
|
|
|
442
502
|
@apply outline-hidden;
|
|
443
503
|
}
|
|
444
504
|
&:focus-visible {
|
|
445
|
-
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-
|
|
505
|
+
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
446
506
|
&[data-variant=primary] {
|
|
447
|
-
@apply ring-[var(--color-
|
|
507
|
+
@apply ring-[var(--color-focus-ring)];
|
|
448
508
|
}
|
|
449
509
|
&:hover {
|
|
450
510
|
@apply outline-hidden;
|
|
@@ -469,9 +529,9 @@
|
|
|
469
529
|
@apply outline-hidden;
|
|
470
530
|
}
|
|
471
531
|
&:focus {
|
|
472
|
-
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-
|
|
532
|
+
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
473
533
|
&[data-variant=primary] {
|
|
474
|
-
@apply ring-[var(--color-
|
|
534
|
+
@apply ring-[var(--color-focus-ring)];
|
|
475
535
|
}
|
|
476
536
|
&:hover {
|
|
477
537
|
@apply outline-hidden;
|
|
@@ -498,9 +558,9 @@
|
|
|
498
558
|
.dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
|
|
499
559
|
.dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
|
|
500
560
|
.dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
|
|
501
|
-
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-
|
|
561
|
+
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
|
|
502
562
|
&[data-variant=primary] {
|
|
503
|
-
@apply ring-[var(--color-
|
|
563
|
+
@apply ring-[var(--color-focus-ring)];
|
|
504
564
|
}
|
|
505
565
|
&:hover {
|
|
506
566
|
@apply outline-hidden;
|
|
@@ -512,9 +572,9 @@
|
|
|
512
572
|
.dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
|
|
513
573
|
.dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
|
|
514
574
|
.dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
|
|
515
|
-
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-
|
|
575
|
+
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
|
|
516
576
|
&[data-variant=primary] {
|
|
517
|
-
@apply ring-[var(--color-
|
|
577
|
+
@apply ring-[var(--color-focus-ring)];
|
|
518
578
|
}
|
|
519
579
|
&:hover {
|
|
520
580
|
@apply outline-hidden;
|
|
@@ -552,10 +612,10 @@
|
|
|
552
612
|
}
|
|
553
613
|
&:focus-visible {
|
|
554
614
|
&::after {
|
|
555
|
-
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-
|
|
615
|
+
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
556
616
|
}
|
|
557
617
|
&[data-variant=primary]::after {
|
|
558
|
-
@apply ring-[var(--color-
|
|
618
|
+
@apply ring-[var(--color-focus-ring)];
|
|
559
619
|
}
|
|
560
620
|
&:hover {
|
|
561
621
|
@apply outline-hidden;
|
|
@@ -579,10 +639,10 @@
|
|
|
579
639
|
}
|
|
580
640
|
&:focus {
|
|
581
641
|
&::after {
|
|
582
|
-
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-
|
|
642
|
+
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
583
643
|
}
|
|
584
644
|
&[data-variant=primary]::after {
|
|
585
|
-
@apply ring-[var(--color-
|
|
645
|
+
@apply ring-[var(--color-focus-ring)];
|
|
586
646
|
}
|
|
587
647
|
&:hover {
|
|
588
648
|
@apply outline-hidden;
|
|
@@ -644,98 +704,101 @@
|
|
|
644
704
|
@layer dx-components {
|
|
645
705
|
[data-hue=neutral] .dx-panel,
|
|
646
706
|
.dx-panel--neutral {
|
|
647
|
-
@apply bg-neutral-surface text-neutral-
|
|
707
|
+
@apply bg-neutral-surface text-neutral-fg border-neutral-border;
|
|
648
708
|
}
|
|
649
709
|
[data-hue=red] .dx-panel,
|
|
650
710
|
.dx-panel--red {
|
|
651
|
-
@apply bg-red-surface text-red-
|
|
711
|
+
@apply bg-red-surface text-red-fg border-red-border;
|
|
652
712
|
}
|
|
653
713
|
[data-hue=orange] .dx-panel,
|
|
654
714
|
.dx-panel--orange {
|
|
655
|
-
@apply bg-orange-surface text-orange-
|
|
715
|
+
@apply bg-orange-surface text-orange-fg border-orange-border;
|
|
656
716
|
}
|
|
657
717
|
[data-hue=amber] .dx-panel,
|
|
658
718
|
.dx-panel--amber {
|
|
659
|
-
@apply bg-amber-surface text-amber-
|
|
719
|
+
@apply bg-amber-surface text-amber-fg border-amber-border;
|
|
660
720
|
}
|
|
661
721
|
[data-hue=yellow] .dx-panel,
|
|
662
722
|
.dx-panel--yellow {
|
|
663
|
-
@apply bg-yellow-surface text-yellow-
|
|
723
|
+
@apply bg-yellow-surface text-yellow-fg border-yellow-border;
|
|
664
724
|
}
|
|
665
725
|
[data-hue=lime] .dx-panel,
|
|
666
726
|
.dx-panel--lime {
|
|
667
|
-
@apply bg-lime-surface text-lime-
|
|
727
|
+
@apply bg-lime-surface text-lime-fg border-lime-border;
|
|
668
728
|
}
|
|
669
729
|
[data-hue=green] .dx-panel,
|
|
670
730
|
.dx-panel--green {
|
|
671
|
-
@apply bg-green-surface text-green-
|
|
731
|
+
@apply bg-green-surface text-green-fg border-green-border;
|
|
672
732
|
}
|
|
673
733
|
[data-hue=emerald] .dx-panel,
|
|
674
734
|
.dx-panel--emerald {
|
|
675
|
-
@apply bg-emerald-surface text-emerald-
|
|
735
|
+
@apply bg-emerald-surface text-emerald-fg border-emerald-border;
|
|
676
736
|
}
|
|
677
737
|
[data-hue=teal] .dx-panel,
|
|
678
738
|
.dx-panel--teal {
|
|
679
|
-
@apply bg-teal-surface text-teal-
|
|
739
|
+
@apply bg-teal-surface text-teal-fg border-teal-border;
|
|
680
740
|
}
|
|
681
741
|
[data-hue=cyan] .dx-panel,
|
|
682
742
|
.dx-panel--cyan {
|
|
683
|
-
@apply bg-cyan-surface text-cyan-
|
|
743
|
+
@apply bg-cyan-surface text-cyan-fg border-cyan-border;
|
|
684
744
|
}
|
|
685
745
|
[data-hue=sky] .dx-panel,
|
|
686
746
|
.dx-panel--sky {
|
|
687
|
-
@apply bg-sky-surface text-sky-
|
|
747
|
+
@apply bg-sky-surface text-sky-fg border-sky-border;
|
|
688
748
|
}
|
|
689
749
|
[data-hue=blue] .dx-panel,
|
|
690
750
|
.dx-panel--blue {
|
|
691
|
-
@apply bg-blue-surface text-blue-
|
|
751
|
+
@apply bg-blue-surface text-blue-fg border-blue-border;
|
|
692
752
|
}
|
|
693
753
|
[data-hue=indigo] .dx-panel,
|
|
694
754
|
.dx-panel--indigo {
|
|
695
|
-
@apply bg-indigo-surface text-indigo-
|
|
755
|
+
@apply bg-indigo-surface text-indigo-fg border-indigo-border;
|
|
696
756
|
}
|
|
697
757
|
[data-hue=violet] .dx-panel,
|
|
698
758
|
.dx-panel--violet {
|
|
699
|
-
@apply bg-violet-surface text-violet-
|
|
759
|
+
@apply bg-violet-surface text-violet-fg border-violet-border;
|
|
700
760
|
}
|
|
701
761
|
[data-hue=purple] .dx-panel,
|
|
702
762
|
.dx-panel--purple {
|
|
703
|
-
@apply bg-purple-surface text-purple-
|
|
763
|
+
@apply bg-purple-surface text-purple-fg border-purple-border;
|
|
704
764
|
}
|
|
705
765
|
[data-hue=fuchsia] .dx-panel,
|
|
706
766
|
.dx-panel--fuchsia {
|
|
707
|
-
@apply bg-fuchsia-surface text-fuchsia-
|
|
767
|
+
@apply bg-fuchsia-surface text-fuchsia-fg border-fuchsia-border;
|
|
708
768
|
}
|
|
709
769
|
[data-hue=pink] .dx-panel,
|
|
710
770
|
.dx-panel--pink {
|
|
711
|
-
@apply bg-pink-surface text-pink-
|
|
771
|
+
@apply bg-pink-surface text-pink-fg border-pink-border;
|
|
712
772
|
}
|
|
713
773
|
[data-hue=rose] .dx-panel,
|
|
714
774
|
.dx-panel--rose {
|
|
715
|
-
@apply bg-rose-surface text-rose-
|
|
775
|
+
@apply bg-rose-surface text-rose-fg border-rose-border;
|
|
716
776
|
}
|
|
717
777
|
[data-hue=info] .dx-panel,
|
|
718
778
|
.dx-panel--info {
|
|
719
|
-
@apply bg-info-surface text-info-
|
|
779
|
+
@apply bg-info-surface text-info-fg border-info-border;
|
|
720
780
|
}
|
|
721
781
|
[data-hue=success] .dx-panel,
|
|
722
782
|
.dx-panel--success {
|
|
723
|
-
@apply bg-success-surface text-success-
|
|
783
|
+
@apply bg-success-surface text-success-fg border-success-border;
|
|
724
784
|
}
|
|
725
785
|
[data-hue=warning] .dx-panel,
|
|
726
786
|
.dx-panel--warning {
|
|
727
|
-
@apply bg-warning-surface text-warning-
|
|
787
|
+
@apply bg-warning-surface text-warning-fg border-warning-border;
|
|
728
788
|
}
|
|
729
789
|
[data-hue=error] .dx-panel,
|
|
730
790
|
.dx-panel--error {
|
|
731
|
-
@apply bg-error-surface text-error-
|
|
791
|
+
@apply bg-error-surface text-error-fg border-error-border;
|
|
732
792
|
}
|
|
733
793
|
}
|
|
734
794
|
|
|
735
795
|
/* src/css/components/link.css */
|
|
736
796
|
@layer dx-components {
|
|
737
797
|
.dx-link {
|
|
738
|
-
@apply text-accent-text hover:text-accent-text-hover;
|
|
798
|
+
@apply text-accent-text hover:text-accent-text-hover cursor-pointer;
|
|
799
|
+
}
|
|
800
|
+
.dx-link-hover {
|
|
801
|
+
@apply hover:text-accent-text-hover! cursor-pointer;
|
|
739
802
|
}
|
|
740
803
|
}
|
|
741
804
|
|
|
@@ -759,40 +822,66 @@
|
|
|
759
822
|
}
|
|
760
823
|
}
|
|
761
824
|
|
|
762
|
-
/* src/css/components/
|
|
825
|
+
/* src/css/components/state.css */
|
|
763
826
|
@layer dx-components {
|
|
764
827
|
.dx-hover {
|
|
765
|
-
@apply cursor-pointer hover:bg-
|
|
828
|
+
@apply cursor-pointer hover:bg-hover-surface! hover:text-hover-fg! hover:aria-selected:bg-selected-surface-hover hover:aria-selected:text-selected-fg hover:aria-[current=true]:bg-current-surface-hover hover:aria-[current=true]:text-current-fg;
|
|
766
829
|
}
|
|
767
|
-
.dx-
|
|
768
|
-
@apply
|
|
830
|
+
.dx-hover-row {
|
|
831
|
+
@apply group-hover/row:bg-hover-surface! group-hover/row:text-hover-fg! group-hover/row:group-aria-selected/row:bg-selected-surface-hover! group-hover/row:group-aria-selected/row:text-selected-fg! group-hover/row:group-aria-[current=true]/row:bg-current-surface-hover! group-hover/row:group-aria-[current=true]/row:text-current-fg!;
|
|
832
|
+
}
|
|
833
|
+
.dx-selected {
|
|
834
|
+
@apply aria-selected:bg-selected-surface! aria-selected:text-selected-fg! aria-selected:font-semibold aria-selected:tracking-normal transition-[color, font-variation-settings, letter-spacing];
|
|
769
835
|
}
|
|
770
836
|
.dx-current {
|
|
771
|
-
@apply dx-ring-pseudo aria-[current=true]:bg-
|
|
837
|
+
@apply dx-ring-pseudo aria-[current=true]:bg-current-surface! aria-[current=true]:text-current-fg! aria-[current=true]:after:ring-focus-ring-subtle!;
|
|
772
838
|
}
|
|
773
|
-
.dx-
|
|
774
|
-
@apply aria-
|
|
839
|
+
.dx-current-row {
|
|
840
|
+
@apply group-aria-[current=true]/row:bg-current-surface! group-aria-[current=true]/row:text-current-fg!;
|
|
841
|
+
}
|
|
842
|
+
.dx-highlighted {
|
|
843
|
+
@apply data-[highlighted]:bg-current-surface data-[highlighted]:text-current-fg hover:data-[highlighted]:bg-current-surface-hover;
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
@layer dx-tokens {
|
|
847
|
+
.dx-main-sidebar {
|
|
848
|
+
--dx-sidebar-l-shift: 0.04;
|
|
849
|
+
--color-hover-surface: light-dark( oklch(from var(--dx-hover-surface-base) calc(l - var(--dx-sidebar-l-shift)) c h), oklch(from var(--dx-hover-surface-base) calc(l + var(--dx-sidebar-l-shift)) c h) );
|
|
850
|
+
--color-current-surface: light-dark( oklch(from var(--dx-current-surface-base) calc(l - var(--dx-sidebar-l-shift)) c h), oklch(from var(--dx-current-surface-base) calc(l + var(--dx-sidebar-l-shift)) c h) );
|
|
851
|
+
--color-current-surface-hover: light-dark( oklch(from var(--dx-current-surface-hover-base) calc(l - var(--dx-sidebar-l-shift)) c h), oklch(from var(--dx-current-surface-hover-base) calc(l + var(--dx-sidebar-l-shift)) c h) );
|
|
775
852
|
}
|
|
776
853
|
}
|
|
777
854
|
|
|
778
855
|
/* src/css/components/surface.css */
|
|
779
856
|
@layer dx-components {
|
|
780
857
|
.dx-base-surface {
|
|
781
|
-
@apply bg-base-surface text-base-
|
|
858
|
+
@apply bg-base-surface text-base-fg;
|
|
782
859
|
--surface-bg: var(--color-base-surface);
|
|
783
860
|
}
|
|
784
861
|
.dx-sidebar-surface {
|
|
785
|
-
@apply bg-sidebar-surface text-base-
|
|
862
|
+
@apply bg-sidebar-surface text-base-fg;
|
|
786
863
|
--surface-bg: var(--color-sidebar-surface);
|
|
787
864
|
}
|
|
788
865
|
.dx-modal-surface {
|
|
789
|
-
@apply bg-modal-surface text-base-
|
|
866
|
+
@apply bg-modal-surface text-base-fg backdrop-blur-md;
|
|
790
867
|
--surface-bg: var(--color-modal-surface);
|
|
791
868
|
}
|
|
792
869
|
.dx-attention-surface {
|
|
793
|
-
@apply bg-attention-surface text-base-
|
|
870
|
+
@apply bg-attention-surface text-base-fg;
|
|
794
871
|
--surface-bg: var(--color-attention-surface);
|
|
795
872
|
}
|
|
873
|
+
.dx-popover-surface {
|
|
874
|
+
@apply bg-popover-surface text-base-fg backdrop-blur-md;
|
|
875
|
+
--surface-bg: var(--color-popover-surface);
|
|
876
|
+
}
|
|
877
|
+
}
|
|
878
|
+
@layer dx-tokens {
|
|
879
|
+
.dx-modal-surface,
|
|
880
|
+
.dx-popover-surface {
|
|
881
|
+
--color-hover-surface: light-dark( oklch(from var(--surface-bg) calc(l - 0.08) c h), oklch(from var(--surface-bg) calc(l + 0.08) c h) );
|
|
882
|
+
--color-current-surface: light-dark( oklch(from var(--surface-bg) calc(l - 0.1) c h), oklch(from var(--surface-bg) calc(l + 0.1) c h) );
|
|
883
|
+
--color-current-surface-hover: light-dark( oklch(from var(--surface-bg) calc(l - 0.12) c h), oklch(from var(--surface-bg) calc(l + 0.12) c h) );
|
|
884
|
+
}
|
|
796
885
|
}
|
|
797
886
|
|
|
798
887
|
/* src/css/components/tag.css */
|
|
@@ -803,99 +892,99 @@
|
|
|
803
892
|
user-select: none;
|
|
804
893
|
}
|
|
805
894
|
.dx-tag--anchor {
|
|
806
|
-
@apply inline cursor-pointer
|
|
807
|
-
@apply bg-
|
|
895
|
+
@apply inline cursor-pointer px-[4px] py-0.5;
|
|
896
|
+
@apply bg-input-surface ring ring-neutral-border rounded-sm;
|
|
808
897
|
&:hover {
|
|
809
898
|
@apply bg-hover-surface;
|
|
810
899
|
}
|
|
811
900
|
}
|
|
812
901
|
.dx-tag[data-hue=neutral],
|
|
813
902
|
.dx-tag--neutral {
|
|
814
|
-
@apply bg-neutral-surface text-neutral-
|
|
903
|
+
@apply bg-neutral-surface text-neutral-fg;
|
|
815
904
|
}
|
|
816
905
|
.dx-tag[data-hue=red],
|
|
817
906
|
.dx-tag--red {
|
|
818
|
-
@apply bg-red-surface text-red-
|
|
907
|
+
@apply bg-red-surface text-red-fg;
|
|
819
908
|
}
|
|
820
909
|
.dx-tag[data-hue=orange],
|
|
821
910
|
.dx-tag--orange {
|
|
822
|
-
@apply bg-orange-surface text-orange-
|
|
911
|
+
@apply bg-orange-surface text-orange-fg;
|
|
823
912
|
}
|
|
824
913
|
.dx-tag[data-hue=amber],
|
|
825
914
|
.dx-tag--amber {
|
|
826
|
-
@apply bg-amber-surface text-amber-
|
|
915
|
+
@apply bg-amber-surface text-amber-fg;
|
|
827
916
|
}
|
|
828
917
|
.dx-tag[data-hue=yellow],
|
|
829
918
|
.dx-tag--yellow {
|
|
830
|
-
@apply bg-yellow-surface text-yellow-
|
|
919
|
+
@apply bg-yellow-surface text-yellow-fg;
|
|
831
920
|
}
|
|
832
921
|
.dx-tag[data-hue=lime],
|
|
833
922
|
.dx-tag--lime {
|
|
834
|
-
@apply bg-lime-surface text-lime-
|
|
923
|
+
@apply bg-lime-surface text-lime-fg;
|
|
835
924
|
}
|
|
836
925
|
.dx-tag[data-hue=green],
|
|
837
926
|
.dx-tag--green {
|
|
838
|
-
@apply bg-green-surface text-green-
|
|
927
|
+
@apply bg-green-surface text-green-fg;
|
|
839
928
|
}
|
|
840
929
|
.dx-tag[data-hue=emerald],
|
|
841
930
|
.dx-tag--emerald {
|
|
842
|
-
@apply bg-emerald-surface text-emerald-
|
|
931
|
+
@apply bg-emerald-surface text-emerald-fg;
|
|
843
932
|
}
|
|
844
933
|
.dx-tag[data-hue=teal],
|
|
845
934
|
.dx-tag--teal {
|
|
846
|
-
@apply bg-teal-surface text-teal-
|
|
935
|
+
@apply bg-teal-surface text-teal-fg;
|
|
847
936
|
}
|
|
848
937
|
.dx-tag[data-hue=cyan],
|
|
849
938
|
.dx-tag--cyan {
|
|
850
|
-
@apply bg-cyan-surface text-cyan-
|
|
939
|
+
@apply bg-cyan-surface text-cyan-fg;
|
|
851
940
|
}
|
|
852
941
|
.dx-tag[data-hue=sky],
|
|
853
942
|
.dx-tag--sky {
|
|
854
|
-
@apply bg-sky-surface text-sky-
|
|
943
|
+
@apply bg-sky-surface text-sky-fg;
|
|
855
944
|
}
|
|
856
945
|
.dx-tag[data-hue=blue],
|
|
857
946
|
.dx-tag--blue {
|
|
858
|
-
@apply bg-blue-surface text-blue-
|
|
947
|
+
@apply bg-blue-surface text-blue-fg;
|
|
859
948
|
}
|
|
860
949
|
.dx-tag[data-hue=indigo],
|
|
861
950
|
.dx-tag--indigo {
|
|
862
|
-
@apply bg-indigo-surface text-indigo-
|
|
951
|
+
@apply bg-indigo-surface text-indigo-fg;
|
|
863
952
|
}
|
|
864
953
|
.dx-tag[data-hue=violet],
|
|
865
954
|
.dx-tag--violet {
|
|
866
|
-
@apply bg-violet-surface text-violet-
|
|
955
|
+
@apply bg-violet-surface text-violet-fg;
|
|
867
956
|
}
|
|
868
957
|
.dx-tag[data-hue=purple],
|
|
869
958
|
.dx-tag--purple {
|
|
870
|
-
@apply bg-purple-surface text-purple-
|
|
959
|
+
@apply bg-purple-surface text-purple-fg;
|
|
871
960
|
}
|
|
872
961
|
.dx-tag[data-hue=fuchsia],
|
|
873
962
|
.dx-tag--fuchsia {
|
|
874
|
-
@apply bg-fuchsia-surface text-fuchsia-
|
|
963
|
+
@apply bg-fuchsia-surface text-fuchsia-fg;
|
|
875
964
|
}
|
|
876
965
|
.dx-tag[data-hue=pink],
|
|
877
966
|
.dx-tag--pink {
|
|
878
|
-
@apply bg-pink-surface text-pink-
|
|
967
|
+
@apply bg-pink-surface text-pink-fg;
|
|
879
968
|
}
|
|
880
969
|
.dx-tag[data-hue=rose],
|
|
881
970
|
.dx-tag--rose {
|
|
882
|
-
@apply bg-rose-surface text-rose-
|
|
971
|
+
@apply bg-rose-surface text-rose-fg;
|
|
883
972
|
}
|
|
884
973
|
.dx-tag[data-hue=info],
|
|
885
974
|
.dx-tag--info {
|
|
886
|
-
@apply bg-cyan-surface text-cyan-
|
|
975
|
+
@apply bg-cyan-surface text-cyan-fg;
|
|
887
976
|
}
|
|
888
977
|
.dx-tag[data-hue=success],
|
|
889
978
|
.dx-tag--success {
|
|
890
|
-
@apply bg-emerald-surface text-emerald-
|
|
979
|
+
@apply bg-emerald-surface text-emerald-fg;
|
|
891
980
|
}
|
|
892
981
|
.dx-tag[data-hue=warning],
|
|
893
982
|
.dx-tag--warning {
|
|
894
|
-
@apply bg-amber-surface text-amber-
|
|
983
|
+
@apply bg-amber-surface text-amber-fg;
|
|
895
984
|
}
|
|
896
985
|
.dx-tag[data-hue=error],
|
|
897
986
|
.dx-tag--error {
|
|
898
|
-
@apply bg-rose-surface text-rose-
|
|
987
|
+
@apply bg-rose-surface text-rose-fg;
|
|
899
988
|
}
|
|
900
989
|
}
|
|
901
990
|
|
|
@@ -1064,7 +1153,11 @@
|
|
|
1064
1153
|
@apply backdrop-blur-lg;
|
|
1065
1154
|
}
|
|
1066
1155
|
background-color: var(--color-sidebar-surface);
|
|
1156
|
+
color: var(--color-sidebar-fg);
|
|
1067
1157
|
--surface-bg: var(--color-sidebar-surface);
|
|
1158
|
+
& :is([aria-current]:not([aria-current=false]), [aria-selected=true]) {
|
|
1159
|
+
color: var(--color-sidebar-current-fg);
|
|
1160
|
+
}
|
|
1068
1161
|
transition-property:
|
|
1069
1162
|
inset-inline-start,
|
|
1070
1163
|
inset-inline-end,
|
|
@@ -1531,7 +1624,7 @@
|
|
|
1531
1624
|
}
|
|
1532
1625
|
|
|
1533
1626
|
/* src/css/integrations/codemirror.css */
|
|
1534
|
-
@theme { --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1); --color-cm-active-line: light-dark( oklch(from var(--color-neutral-200) l c h / 0.5), oklch(from var(--color-neutral-800) l c h / 0.5) ); --color-cm-separator: var(--color-blue-500); --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-cm-selection: light-dark( oklch(from var(--color-blue-400) l c h / 0.5), oklch(from var(--color-blue-600) l c h / 0.5) ); --color-cm-focused-selection: light-dark(var(--color-blue-400),
|
|
1627
|
+
@theme { --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1); --color-cm-active-line: light-dark( oklch(from var(--color-neutral-200) l c h / 0.5), oklch(from var(--color-neutral-800) l c h / 0.5) ); --color-cm-separator: var(--color-blue-500); --color-cm-cursor: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-cm-selection: light-dark( oklch(from var(--color-blue-400) l c h / 0.5), oklch(from var(--color-blue-600) l c h / 0.5) ); --color-cm-focused-selection: light-dark(var(--color-blue-400), oklch(0.445 0.057 256)); --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800)); --color-cm-comment-text: light-dark(var(--color-neutral-950), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-teal-200), var(--color-teal-200)); --color-cm-comment-current-surface: light-dark(var(--color-orange-200), var(--color-orange-200)); --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400)); --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500)); --color-cm-code-mark: var(--color-blue-500); --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400)); }
|
|
1535
1628
|
|
|
1536
1629
|
/* src/css/integrations/tldraw.css */
|
|
1537
1630
|
.tl-background {
|
|
@@ -1539,17 +1632,25 @@
|
|
|
1539
1632
|
}
|
|
1540
1633
|
.tl-container.tl-theme__light,
|
|
1541
1634
|
.tl-container.tl-theme__dark {
|
|
1542
|
-
--color-selected: var(--color-accent-
|
|
1635
|
+
--color-selected: var(--color-accent-bg);
|
|
1543
1636
|
--color-panel: var(--color-modal-surface);
|
|
1544
1637
|
--color-panel-contrast: var(--color-separator);
|
|
1545
1638
|
}
|
|
1546
1639
|
|
|
1547
1640
|
/* src/main.css */
|
|
1641
|
+
@source "../../../**/*.{ts,tsx,html}";
|
|
1642
|
+
@source "../../../../tools/**/*.{ts,tsx,html}";
|
|
1643
|
+
@source not "../../../ui/react-ui-geo/data/**";
|
|
1644
|
+
@source not "../../../ui/solid-ui-geo/data/**";
|
|
1645
|
+
@source not "../../../apps/composer-app/src/plugins/welcome/components/Welcome/hero-image.ts";
|
|
1548
1646
|
@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
|
|
1549
|
-
@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{
|
|
1647
|
+
@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{bg,bg-hover,fg,surface,text,border}");
|
|
1648
|
+
@source inline("bg-{primary,secondary}-{50,100,200,300,400,500,600,700,800,900,950}");
|
|
1550
1649
|
@source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
|
|
1551
|
-
@source inline("bg-{info,success,warning,error}-{
|
|
1650
|
+
@source inline("bg-{info,success,warning,error}-{bg,surface,fg,text,border}");
|
|
1552
1651
|
@source inline("border-{info,success,warning,error}-border");
|
|
1652
|
+
@source inline("bg-grid-{surface,fg,line,highlight,comment,comment-active,selection-surface,selection-fg}");
|
|
1653
|
+
@source inline("bg-{l0,r0,l1,r1}-surface");
|
|
1553
1654
|
@plugin "@tailwindcss/forms";
|
|
1554
1655
|
@plugin "tailwind-scrollbar";
|
|
1555
1656
|
@plugin "tailwindcss-radix";
|