@dxos/ui-theme 0.8.4-main.9be5663bfe → 0.8.4-main.bc2380dfbc
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 +88 -84
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +88 -84
- 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 +147 -106
- package/dist/plugin/node-cjs/main.css.map +2 -2
- package/dist/plugin/node-cjs/meta.json +1 -1
- package/dist/plugin/node-esm/main.css +147 -106
- package/dist/plugin/node-esm/main.css.map +2 -2
- package/dist/plugin/node-esm/meta.json +1 -1
- package/dist/plugin/node-esm/plugins/ThemePlugin.mjs.map +2 -2
- 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 +1 -4
- 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/fragments/text.d.ts +0 -1
- package/dist/types/src/fragments/text.d.ts.map +1 -1
- package/dist/types/src/plugins/ThemePlugin.d.ts +1 -1
- package/dist/types/src/plugins/ThemePlugin.d.ts.map +1 -1
- package/dist/types/src/theme/components/button.d.ts +2 -2
- package/dist/types/src/theme/components/button.d.ts.map +1 -1
- package/dist/types/src/theme/components/card.d.ts.map +1 -1
- package/dist/types/src/theme/components/dialog.d.ts.map +1 -1
- package/dist/types/src/theme/components/icon-button.d.ts +1 -0
- package/dist/types/src/theme/components/icon-button.d.ts.map +1 -1
- package/dist/types/src/theme/components/input.d.ts +8 -8
- package/dist/types/src/theme/components/input.d.ts.map +1 -1
- package/dist/types/src/theme/components/main.d.ts.map +1 -1
- package/dist/types/src/theme/components/scroll-area.d.ts.map +1 -1
- package/dist/types/src/theme/primitives/column.d.ts +22 -5
- package/dist/types/src/theme/primitives/column.d.ts.map +1 -1
- package/dist/types/src/theme/primitives/panel.d.ts.map +1 -1
- package/dist/types/src/theme/theme.d.ts.map +1 -1
- package/dist/types/src/util/hash-styles.d.ts +1 -1
- package/dist/types/src/util/hash-styles.d.ts.map +1 -1
- package/dist/types/src/util/mx.d.ts +21 -1
- package/dist/types/src/util/mx.d.ts.map +1 -1
- package/dist/types/src/util/size.d.ts.map +1 -1
- package/dist/types/src/util/valence.d.ts +2 -2
- package/dist/types/src/util/valence.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -19
- package/src/Theme.stories.tsx +5 -5
- package/src/css/DESIGN_SYSTEM.md +159 -0
- package/src/css/base/base.css +2 -2
- package/src/css/components/button.css +3 -3
- package/src/css/components/checkbox.css +1 -1
- package/src/css/components/focus.css +12 -12
- package/src/css/components/panel.css +45 -45
- package/src/css/components/selected.css +61 -15
- package/src/css/components/selected.md +101 -0
- package/src/css/components/surface.css +4 -4
- package/src/css/components/tag.css +25 -23
- package/src/css/layout/size.css +16 -3
- package/src/css/theme/animation.css +31 -0
- package/src/css/theme/semantic.css +36 -40
- package/src/css/theme/spacing.css +7 -8
- package/src/css/theme/styles.css +22 -22
- package/src/css/utilities.css +48 -6
- package/src/defs.ts +1 -1
- package/src/fragments/AUDIT.md +0 -3
- package/src/fragments/density.ts +8 -5
- package/src/fragments/hover.ts +0 -2
- package/src/fragments/text.ts +1 -1
- package/src/main.css +38 -4
- package/src/theme/components/button.ts +2 -2
- package/src/theme/components/card.ts +4 -0
- package/src/theme/components/dialog.ts +5 -3
- package/src/theme/components/focus.ts +2 -2
- package/src/theme/components/icon-button.ts +6 -3
- package/src/theme/components/input.ts +9 -9
- package/src/theme/components/message.ts +5 -5
- package/src/theme/components/popover.ts +1 -1
- package/src/theme/components/scroll-area.ts +10 -5
- package/src/theme/components/select.ts +1 -1
- package/src/theme/components/tooltip.ts +1 -1
- package/src/theme/primitives/column.ts +44 -20
- package/src/util/hash-styles.ts +19 -19
- package/src/util/mx.ts +3 -3
|
@@ -1,11 +1,30 @@
|
|
|
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";
|
|
6
6
|
|
|
7
7
|
/* src/css/theme/animation.css */
|
|
8
8
|
@theme { --ease-in-out-symmetric: cubic-bezier(0.5, 0, 0.5, 1); @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } --animate-fade-in: fade-in 200ms ease-out; --animate-fade-out: fade-out 400ms ease-out; @keyframes slide-down-and-fade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } } @keyframes slide-left-and-fade { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-up-and-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-right-and-fade { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } --animate-slide-down-and-fade: slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-left-and-fade: slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-up-and-fade: slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); --animate-slide-right-and-fade: slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1); @keyframes toast-hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes toast-slide-in-right { 0% { transform: translateX(calc(100% + 1rem)); } 100% { transform: translateX(0); } } @keyframes toast-slide-in-bottom { 0% { transform: translateY(calc(100% + 1rem)); } 100% { transform: translateY(0); } } @keyframes toast-swipe-out { 0% { transform: translateX(var(--radix-toast-swipe-end-x)); } 100% { transform: translateX(calc(100% + 1rem)); } } --animate-toast-hide: toast-hide 100ms ease-in forwards; --animate-toast-slide-in-right: toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-slide-in-bottom: toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1); --animate-toast-swipe-out: toast-swipe-out 100ms ease-out forwards; @keyframes slide-down { from { height: 0px; } to { height: var(--radix-accordion-content-height); } } @keyframes slide-up { from { height: var(--radix-accordion-content-height); } to { height: 0px; } } --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1); --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1); @keyframes shimmer-loop { 100% { transform: translateX(100%); } } --animate-shimmer: shimmer-loop 2s infinite; @keyframes halo-pulse { 0% { opacity: 0.3; } 5% { opacity: 1; } 100% { opacity: 0.3; } } --animate-halo-pulse: halo-pulse 2s ease-out infinite; @keyframes progress-indeterminate { 0% { left: 0; width: 0%; } 25% { left: 25%; width: 50%; } 75% { left: 50%; width: 100%; } 100% { left: 100%; width: 0%; } } --animate-progress-indeterminate: progress-indeterminate 2s ease-out infinite; @keyframes trail { to { offset-distance: 100%; } } @keyframes trail-offset { 0% { offset-distance: 50%; } 100% { offset-distance: 150%; } } --animate-trail: trail 6s linear infinite; --animate-trail-offset: trail-offset 6s linear infinite; --animate-spin-slow: spin 3s linear infinite; @keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } --animate-blink: blink 1s step-start infinite; }
|
|
9
|
+
@keyframes shimmer-text {
|
|
10
|
+
from {
|
|
11
|
+
mask-position-x: 100%;
|
|
12
|
+
-webkit-mask-position-x: 100%;
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
mask-position-x: -100%;
|
|
16
|
+
-webkit-mask-position-x: -100%;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@media (prefers-reduced-motion: reduce) {
|
|
20
|
+
.animate-halo-pulse,
|
|
21
|
+
.animate-spin-slow,
|
|
22
|
+
.animate-trail,
|
|
23
|
+
.animate-trail-offset,
|
|
24
|
+
.animate-shimmer {
|
|
25
|
+
animation: none;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
9
28
|
|
|
10
29
|
/* src/css/theme/border.css */
|
|
11
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); }
|
|
@@ -14,10 +33,10 @@
|
|
|
14
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); }
|
|
15
34
|
|
|
16
35
|
/* src/css/theme/semantic.css */
|
|
17
|
-
@theme { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-
|
|
36
|
+
@theme { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-inverse-foreground: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --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-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-card-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925)); --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-input-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-current-surface-hover: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-current-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850)); --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-selected-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-attention-surface: var(--color-focus-surface); --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3); --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700)); --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800)); --color-accent-foreground: 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-focus-ring: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-focus-ring-subtle: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850)); --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700)); --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-700)); --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-foreground: 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-foreground: 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-500)); --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); }
|
|
18
37
|
|
|
19
38
|
/* src/css/theme/spacing.css */
|
|
20
|
-
@theme { --spacing-screen-border: 2rem; --spacing-popover-min-width:
|
|
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; }
|
|
21
40
|
@layer dx-tokens {
|
|
22
41
|
}
|
|
23
42
|
@layer dx-tokens {
|
|
@@ -50,7 +69,7 @@
|
|
|
50
69
|
--dx-grid-focus-indicator-width: var(--dx-hair-line);
|
|
51
70
|
--dx-input-fine: var(--dx-lacuna-3);
|
|
52
71
|
--dx-input-coarse: var(--dx-lacuna-4);
|
|
53
|
-
--dx-default-icons-size:
|
|
72
|
+
--dx-default-icons-size: 1rem;
|
|
54
73
|
}
|
|
55
74
|
[data-grid-focus-indicator-variant=stack] {
|
|
56
75
|
--dx-grid-focus-indicator-width: var(--dx-thick-line);
|
|
@@ -63,14 +82,14 @@
|
|
|
63
82
|
--dx-topbar-size: var(--dx-rail-size);
|
|
64
83
|
--dx-toolbar-size: var(--dx-rail-action);
|
|
65
84
|
--dx-statusbar-size: var(--dx-rail-item);
|
|
66
|
-
--dx-nav-sidebar-size:
|
|
85
|
+
--dx-nav-sidebar-size: 350px;
|
|
67
86
|
--dx-complementary-sidebar-size: 25rem;
|
|
68
87
|
--dx-drawer-size: 50dvh;
|
|
69
|
-
--dx-l0-size:
|
|
88
|
+
--dx-l0-size: 72px;
|
|
70
89
|
--dx-l0-avatar-size: 3rem;
|
|
71
90
|
--dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
|
|
72
91
|
--dx-r0-size: var(--dx-rail-size);
|
|
73
|
-
--dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
|
|
92
|
+
--dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
|
|
74
93
|
}
|
|
75
94
|
:root {
|
|
76
95
|
--dx-calc-auto: auto;
|
|
@@ -91,7 +110,7 @@
|
|
|
91
110
|
}
|
|
92
111
|
|
|
93
112
|
/* src/css/theme/styles.css */
|
|
94
|
-
@theme { --color-info-fill: var(--color-cyan-fill); --color-info-surface: var(--color-cyan-surface); --color-info-
|
|
113
|
+
@theme { --color-info-fill: var(--color-cyan-fill); --color-info-surface: var(--color-cyan-surface); --color-info-foreground: var(--color-cyan-foreground); --color-info-text: var(--color-cyan-text); --color-info-border: var(--color-cyan-border); --color-success-fill: var(--color-emerald-fill); --color-success-surface: var(--color-emerald-surface); --color-success-foreground: var(--color-emerald-foreground); --color-success-text: var(--color-emerald-text); --color-success-border: var(--color-emerald-border); --color-warning-fill: var(--color-amber-fill); --color-warning-surface: var(--color-amber-surface); --color-warning-foreground: var(--color-amber-foreground); --color-warning-text: var(--color-amber-text); --color-warning-border: var(--color-amber-border); --color-error-fill: var(--color-rose-fill); --color-error-surface: var(--color-rose-surface); --color-error-foreground: var(--color-rose-foreground); --color-error-text: var(--color-rose-text); --color-error-border: var(--color-rose-border); --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700)); --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-neutral-foreground: light-dark(var(--color-neutral-800), var(--color-neutral-200)); --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700)); --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800)); --color-red-foreground: light-dark(var(--color-red-800), var(--color-red-200)); --color-red-text: light-dark(var(--color-red-700), var(--color-red-300)); --color-red-border: light-dark(var(--color-red-400), var(--color-red-600)); --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700)); --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800)); --color-orange-foreground: light-dark(var(--color-orange-800), var(--color-orange-200)); --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300)); --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600)); --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700)); --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800)); --color-amber-foreground: light-dark(var(--color-amber-800), var(--color-amber-200)); --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300)); --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600)); --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700)); --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800)); --color-yellow-foreground: light-dark(var(--color-yellow-800), var(--color-yellow-200)); --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300)); --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600)); --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700)); --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800)); --color-lime-foreground: light-dark(var(--color-lime-800), var(--color-lime-200)); --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300)); --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600)); --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700)); --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800)); --color-green-foreground: light-dark(var(--color-green-800), var(--color-green-200)); --color-green-text: light-dark(var(--color-green-700), var(--color-green-300)); --color-green-border: light-dark(var(--color-green-400), var(--color-green-600)); --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700)); --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800)); --color-emerald-foreground: light-dark(var(--color-emerald-800), var(--color-emerald-200)); --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300)); --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600)); --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700)); --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800)); --color-teal-foreground: light-dark(var(--color-teal-800), var(--color-teal-200)); --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300)); --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600)); --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700)); --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800)); --color-cyan-foreground: light-dark(var(--color-cyan-800), var(--color-cyan-200)); --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300)); --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600)); --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700)); --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800)); --color-sky-foreground: light-dark(var(--color-sky-800), var(--color-sky-200)); --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300)); --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600)); --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700)); --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800)); --color-blue-foreground: light-dark(var(--color-blue-800), var(--color-blue-200)); --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300)); --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600)); --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700)); --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800)); --color-indigo-foreground: light-dark(var(--color-indigo-800), var(--color-indigo-200)); --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300)); --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600)); --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700)); --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800)); --color-violet-foreground: light-dark(var(--color-violet-800), var(--color-violet-200)); --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300)); --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600)); --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700)); --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800)); --color-purple-foreground: light-dark(var(--color-purple-800), var(--color-purple-200)); --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300)); --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600)); --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700)); --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800)); --color-fuchsia-foreground: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200)); --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300)); --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600)); --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700)); --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800)); --color-pink-foreground: light-dark(var(--color-pink-800), var(--color-pink-200)); --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300)); --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600)); --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700)); --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800)); --color-rose-foreground: light-dark(var(--color-rose-800), var(--color-rose-200)); --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300)); --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600)); }
|
|
95
114
|
|
|
96
115
|
/* src/css/theme/text.css */
|
|
97
116
|
@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; }
|
|
@@ -124,9 +143,9 @@
|
|
|
124
143
|
html .dark,
|
|
125
144
|
.sb-show-main {
|
|
126
145
|
background-color: var(--color-base-surface);
|
|
127
|
-
color: var(--color-base-
|
|
146
|
+
color: var(--color-base-foreground);
|
|
128
147
|
--surface-bg: var(--color-base-surface);
|
|
129
|
-
--
|
|
148
|
+
--foreground: var(--color-base-foreground);
|
|
130
149
|
--description-text: var(--color-description);
|
|
131
150
|
}
|
|
132
151
|
}
|
|
@@ -243,7 +262,7 @@
|
|
|
243
262
|
/* src/css/components/button.css */
|
|
244
263
|
@layer dx-components {
|
|
245
264
|
.dx-button {
|
|
246
|
-
@apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[
|
|
265
|
+
@apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2rem] px-3;
|
|
247
266
|
@apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
|
|
248
267
|
&[aria-pressed=true],
|
|
249
268
|
&[aria-checked=true] {
|
|
@@ -277,7 +296,7 @@
|
|
|
277
296
|
@apply bg-hover-surface;
|
|
278
297
|
}
|
|
279
298
|
&[data-variant=primary] {
|
|
280
|
-
@apply text-accent-
|
|
299
|
+
@apply text-accent-foreground bg-accent-surface;
|
|
281
300
|
&:hover,
|
|
282
301
|
&[aria-pressed=true],
|
|
283
302
|
&[aria-checked=true] &[data-state=open] {
|
|
@@ -285,7 +304,7 @@
|
|
|
285
304
|
}
|
|
286
305
|
}
|
|
287
306
|
&[data-variant=destructive] {
|
|
288
|
-
@apply text-accent-
|
|
307
|
+
@apply text-accent-foreground bg-rose-fill;
|
|
289
308
|
&:hover,
|
|
290
309
|
&[aria-pressed=true],
|
|
291
310
|
&[aria-checked=true] &[data-state=open] {
|
|
@@ -330,7 +349,7 @@
|
|
|
330
349
|
}
|
|
331
350
|
}
|
|
332
351
|
.dx-checkbox {
|
|
333
|
-
@apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-
|
|
352
|
+
@apply w-4 h-4 overflow-hidden shadow-inner transition-colors bg-un-accent accent-un-accent text-accent-foreground shrink-0 inline-grid place-items-center rounded-xs;
|
|
334
353
|
}
|
|
335
354
|
.dx-checkbox--switch {
|
|
336
355
|
@apply inline-block appearance-none relative shrink-0 h-5 w-8;
|
|
@@ -423,9 +442,9 @@
|
|
|
423
442
|
@apply outline-hidden;
|
|
424
443
|
}
|
|
425
444
|
&:focus-visible {
|
|
426
|
-
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-
|
|
445
|
+
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
427
446
|
&[data-variant=primary] {
|
|
428
|
-
@apply ring-[var(--color-
|
|
447
|
+
@apply ring-[var(--color-focus-ring)];
|
|
429
448
|
}
|
|
430
449
|
&:hover {
|
|
431
450
|
@apply outline-hidden;
|
|
@@ -450,9 +469,9 @@
|
|
|
450
469
|
@apply outline-hidden;
|
|
451
470
|
}
|
|
452
471
|
&:focus {
|
|
453
|
-
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-
|
|
472
|
+
@apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
454
473
|
&[data-variant=primary] {
|
|
455
|
-
@apply ring-[var(--color-
|
|
474
|
+
@apply ring-[var(--color-focus-ring)];
|
|
456
475
|
}
|
|
457
476
|
&:hover {
|
|
458
477
|
@apply outline-hidden;
|
|
@@ -479,9 +498,9 @@
|
|
|
479
498
|
.dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
|
|
480
499
|
.dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
|
|
481
500
|
.dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
|
|
482
|
-
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-
|
|
501
|
+
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
|
|
483
502
|
&[data-variant=primary] {
|
|
484
|
-
@apply ring-[var(--color-
|
|
503
|
+
@apply ring-[var(--color-focus-ring)];
|
|
485
504
|
}
|
|
486
505
|
&:hover {
|
|
487
506
|
@apply outline-hidden;
|
|
@@ -493,9 +512,9 @@
|
|
|
493
512
|
.dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
|
|
494
513
|
.dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
|
|
495
514
|
.dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
|
|
496
|
-
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-
|
|
515
|
+
@apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
|
|
497
516
|
&[data-variant=primary] {
|
|
498
|
-
@apply ring-[var(--color-
|
|
517
|
+
@apply ring-[var(--color-focus-ring)];
|
|
499
518
|
}
|
|
500
519
|
&:hover {
|
|
501
520
|
@apply outline-hidden;
|
|
@@ -533,10 +552,10 @@
|
|
|
533
552
|
}
|
|
534
553
|
&:focus-visible {
|
|
535
554
|
&::after {
|
|
536
|
-
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-
|
|
555
|
+
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
537
556
|
}
|
|
538
557
|
&[data-variant=primary]::after {
|
|
539
|
-
@apply ring-[var(--color-
|
|
558
|
+
@apply ring-[var(--color-focus-ring)];
|
|
540
559
|
}
|
|
541
560
|
&:hover {
|
|
542
561
|
@apply outline-hidden;
|
|
@@ -560,10 +579,10 @@
|
|
|
560
579
|
}
|
|
561
580
|
&:focus {
|
|
562
581
|
&::after {
|
|
563
|
-
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-
|
|
582
|
+
@apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
|
|
564
583
|
}
|
|
565
584
|
&[data-variant=primary]::after {
|
|
566
|
-
@apply ring-[var(--color-
|
|
585
|
+
@apply ring-[var(--color-focus-ring)];
|
|
567
586
|
}
|
|
568
587
|
&:hover {
|
|
569
588
|
@apply outline-hidden;
|
|
@@ -623,93 +642,93 @@
|
|
|
623
642
|
|
|
624
643
|
/* src/css/components/panel.css */
|
|
625
644
|
@layer dx-components {
|
|
626
|
-
|
|
645
|
+
[data-hue=neutral] .dx-panel,
|
|
627
646
|
.dx-panel--neutral {
|
|
628
|
-
@apply bg-neutral-surface text-neutral-
|
|
647
|
+
@apply bg-neutral-surface text-neutral-foreground border-neutral-border;
|
|
629
648
|
}
|
|
630
|
-
|
|
649
|
+
[data-hue=red] .dx-panel,
|
|
631
650
|
.dx-panel--red {
|
|
632
|
-
@apply bg-red-surface text-red-
|
|
651
|
+
@apply bg-red-surface text-red-foreground border-red-border;
|
|
633
652
|
}
|
|
634
|
-
|
|
653
|
+
[data-hue=orange] .dx-panel,
|
|
635
654
|
.dx-panel--orange {
|
|
636
|
-
@apply bg-orange-surface text-orange-
|
|
655
|
+
@apply bg-orange-surface text-orange-foreground border-orange-border;
|
|
637
656
|
}
|
|
638
|
-
|
|
657
|
+
[data-hue=amber] .dx-panel,
|
|
639
658
|
.dx-panel--amber {
|
|
640
|
-
@apply bg-amber-surface text-amber-
|
|
659
|
+
@apply bg-amber-surface text-amber-foreground border-amber-border;
|
|
641
660
|
}
|
|
642
|
-
|
|
661
|
+
[data-hue=yellow] .dx-panel,
|
|
643
662
|
.dx-panel--yellow {
|
|
644
|
-
@apply bg-yellow-surface text-yellow-
|
|
663
|
+
@apply bg-yellow-surface text-yellow-foreground border-yellow-border;
|
|
645
664
|
}
|
|
646
|
-
|
|
665
|
+
[data-hue=lime] .dx-panel,
|
|
647
666
|
.dx-panel--lime {
|
|
648
|
-
@apply bg-lime-surface text-lime-
|
|
667
|
+
@apply bg-lime-surface text-lime-foreground border-lime-border;
|
|
649
668
|
}
|
|
650
|
-
|
|
669
|
+
[data-hue=green] .dx-panel,
|
|
651
670
|
.dx-panel--green {
|
|
652
|
-
@apply bg-green-surface text-green-
|
|
671
|
+
@apply bg-green-surface text-green-foreground border-green-border;
|
|
653
672
|
}
|
|
654
|
-
|
|
673
|
+
[data-hue=emerald] .dx-panel,
|
|
655
674
|
.dx-panel--emerald {
|
|
656
|
-
@apply bg-emerald-surface text-emerald-
|
|
675
|
+
@apply bg-emerald-surface text-emerald-foreground border-emerald-border;
|
|
657
676
|
}
|
|
658
|
-
|
|
677
|
+
[data-hue=teal] .dx-panel,
|
|
659
678
|
.dx-panel--teal {
|
|
660
|
-
@apply bg-teal-surface text-teal-
|
|
679
|
+
@apply bg-teal-surface text-teal-foreground border-teal-border;
|
|
661
680
|
}
|
|
662
|
-
|
|
681
|
+
[data-hue=cyan] .dx-panel,
|
|
663
682
|
.dx-panel--cyan {
|
|
664
|
-
@apply bg-cyan-surface text-cyan-
|
|
683
|
+
@apply bg-cyan-surface text-cyan-foreground border-cyan-border;
|
|
665
684
|
}
|
|
666
|
-
|
|
685
|
+
[data-hue=sky] .dx-panel,
|
|
667
686
|
.dx-panel--sky {
|
|
668
|
-
@apply bg-sky-surface text-sky-
|
|
687
|
+
@apply bg-sky-surface text-sky-foreground border-sky-border;
|
|
669
688
|
}
|
|
670
|
-
|
|
689
|
+
[data-hue=blue] .dx-panel,
|
|
671
690
|
.dx-panel--blue {
|
|
672
|
-
@apply bg-blue-surface text-blue-
|
|
691
|
+
@apply bg-blue-surface text-blue-foreground border-blue-border;
|
|
673
692
|
}
|
|
674
|
-
|
|
693
|
+
[data-hue=indigo] .dx-panel,
|
|
675
694
|
.dx-panel--indigo {
|
|
676
|
-
@apply bg-indigo-surface text-indigo-
|
|
695
|
+
@apply bg-indigo-surface text-indigo-foreground border-indigo-border;
|
|
677
696
|
}
|
|
678
|
-
|
|
697
|
+
[data-hue=violet] .dx-panel,
|
|
679
698
|
.dx-panel--violet {
|
|
680
|
-
@apply bg-violet-surface text-violet-
|
|
699
|
+
@apply bg-violet-surface text-violet-foreground border-violet-border;
|
|
681
700
|
}
|
|
682
|
-
|
|
701
|
+
[data-hue=purple] .dx-panel,
|
|
683
702
|
.dx-panel--purple {
|
|
684
|
-
@apply bg-purple-surface text-purple-
|
|
703
|
+
@apply bg-purple-surface text-purple-foreground border-purple-border;
|
|
685
704
|
}
|
|
686
|
-
|
|
705
|
+
[data-hue=fuchsia] .dx-panel,
|
|
687
706
|
.dx-panel--fuchsia {
|
|
688
|
-
@apply bg-fuchsia-surface text-fuchsia-
|
|
707
|
+
@apply bg-fuchsia-surface text-fuchsia-foreground border-fuchsia-border;
|
|
689
708
|
}
|
|
690
|
-
|
|
709
|
+
[data-hue=pink] .dx-panel,
|
|
691
710
|
.dx-panel--pink {
|
|
692
|
-
@apply bg-pink-surface text-pink-
|
|
711
|
+
@apply bg-pink-surface text-pink-foreground border-pink-border;
|
|
693
712
|
}
|
|
694
|
-
|
|
713
|
+
[data-hue=rose] .dx-panel,
|
|
695
714
|
.dx-panel--rose {
|
|
696
|
-
@apply bg-rose-surface text-rose-
|
|
715
|
+
@apply bg-rose-surface text-rose-foreground border-rose-border;
|
|
697
716
|
}
|
|
698
|
-
|
|
717
|
+
[data-hue=info] .dx-panel,
|
|
699
718
|
.dx-panel--info {
|
|
700
|
-
@apply bg-info-surface text-info-
|
|
719
|
+
@apply bg-info-surface text-info-foreground border-info-border;
|
|
701
720
|
}
|
|
702
|
-
|
|
721
|
+
[data-hue=success] .dx-panel,
|
|
703
722
|
.dx-panel--success {
|
|
704
|
-
@apply bg-success-surface text-success-
|
|
723
|
+
@apply bg-success-surface text-success-foreground border-success-border;
|
|
705
724
|
}
|
|
706
|
-
|
|
725
|
+
[data-hue=warning] .dx-panel,
|
|
707
726
|
.dx-panel--warning {
|
|
708
|
-
@apply bg-warning-surface text-warning-
|
|
727
|
+
@apply bg-warning-surface text-warning-foreground border-warning-border;
|
|
709
728
|
}
|
|
710
|
-
|
|
729
|
+
[data-hue=error] .dx-panel,
|
|
711
730
|
.dx-panel--error {
|
|
712
|
-
@apply bg-error-surface text-error-
|
|
731
|
+
@apply bg-error-surface text-error-foreground border-error-border;
|
|
713
732
|
}
|
|
714
733
|
}
|
|
715
734
|
|
|
@@ -743,35 +762,41 @@
|
|
|
743
762
|
/* src/css/components/selected.css */
|
|
744
763
|
@layer dx-components {
|
|
745
764
|
.dx-hover {
|
|
746
|
-
@apply cursor-pointer hover:bg-
|
|
765
|
+
@apply cursor-pointer hover:bg-hover-surface! hover:text-hover-foreground! hover:aria-selected:bg-selected-surface-hover! hover:aria-selected:text-selected-foreground! hover:aria-[current=true]:bg-current-surface-hover! hover:aria-[current=true]:text-current-foreground!;
|
|
747
766
|
}
|
|
748
|
-
.dx-
|
|
749
|
-
@apply
|
|
767
|
+
.dx-hover-row {
|
|
768
|
+
@apply group-hover/row:bg-hover-surface! group-hover/row:text-hover-foreground! group-hover/row:group-aria-selected/row:bg-selected-surface-hover! group-hover/row:group-aria-selected/row:text-selected-foreground! group-hover/row:group-aria-[current=true]/row:bg-current-surface-hover! group-hover/row:group-aria-[current=true]/row:text-current-foreground!;
|
|
769
|
+
}
|
|
770
|
+
.dx-selected {
|
|
771
|
+
@apply aria-selected:bg-selected-surface! aria-selected:text-selected-foreground! aria-selected:font-semibold aria-selected:tracking-normal transition-[color, font-variation-settings, letter-spacing];
|
|
750
772
|
}
|
|
751
773
|
.dx-current {
|
|
752
|
-
@apply dx-ring-pseudo aria-[current=true]:bg-
|
|
774
|
+
@apply dx-ring-pseudo aria-[current=true]:bg-current-surface! aria-[current=true]:text-current-foreground! aria-[current=true]:after:ring-focus-ring-subtle!;
|
|
753
775
|
}
|
|
754
|
-
.dx-
|
|
755
|
-
@apply aria-
|
|
776
|
+
.dx-current-row {
|
|
777
|
+
@apply group-aria-[current=true]/row:bg-current-surface! group-aria-[current=true]/row:text-current-foreground!;
|
|
778
|
+
}
|
|
779
|
+
.dx-highlighted {
|
|
780
|
+
@apply data-[highlighted]:bg-current-surface data-[highlighted]:text-current-foreground hover:data-[highlighted]:bg-current-surface-hover;
|
|
756
781
|
}
|
|
757
782
|
}
|
|
758
783
|
|
|
759
784
|
/* src/css/components/surface.css */
|
|
760
785
|
@layer dx-components {
|
|
761
786
|
.dx-base-surface {
|
|
762
|
-
@apply bg-base-surface text-base-
|
|
787
|
+
@apply bg-base-surface text-base-foreground;
|
|
763
788
|
--surface-bg: var(--color-base-surface);
|
|
764
789
|
}
|
|
765
790
|
.dx-sidebar-surface {
|
|
766
|
-
@apply bg-sidebar-surface text-base-
|
|
791
|
+
@apply bg-sidebar-surface text-base-foreground;
|
|
767
792
|
--surface-bg: var(--color-sidebar-surface);
|
|
768
793
|
}
|
|
769
794
|
.dx-modal-surface {
|
|
770
|
-
@apply bg-modal-surface text-base-
|
|
795
|
+
@apply bg-modal-surface text-base-foreground backdrop-blur-md;
|
|
771
796
|
--surface-bg: var(--color-modal-surface);
|
|
772
797
|
}
|
|
773
798
|
.dx-attention-surface {
|
|
774
|
-
@apply bg-attention-surface text-base-
|
|
799
|
+
@apply bg-attention-surface text-base-foreground;
|
|
775
800
|
--surface-bg: var(--color-attention-surface);
|
|
776
801
|
}
|
|
777
802
|
}
|
|
@@ -784,98 +809,99 @@
|
|
|
784
809
|
user-select: none;
|
|
785
810
|
}
|
|
786
811
|
.dx-tag--anchor {
|
|
787
|
-
@apply inline cursor-pointer -mx-[
|
|
812
|
+
@apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
|
|
813
|
+
@apply bg-group-surface text-sky-foreground border-sky-border;
|
|
788
814
|
&:hover {
|
|
789
815
|
@apply bg-hover-surface;
|
|
790
816
|
}
|
|
791
817
|
}
|
|
792
818
|
.dx-tag[data-hue=neutral],
|
|
793
819
|
.dx-tag--neutral {
|
|
794
|
-
@apply bg-neutral-surface text-neutral-
|
|
820
|
+
@apply bg-neutral-surface text-neutral-foreground;
|
|
795
821
|
}
|
|
796
822
|
.dx-tag[data-hue=red],
|
|
797
823
|
.dx-tag--red {
|
|
798
|
-
@apply bg-red-surface text-red-
|
|
824
|
+
@apply bg-red-surface text-red-foreground;
|
|
799
825
|
}
|
|
800
826
|
.dx-tag[data-hue=orange],
|
|
801
827
|
.dx-tag--orange {
|
|
802
|
-
@apply bg-orange-surface text-orange-
|
|
828
|
+
@apply bg-orange-surface text-orange-foreground;
|
|
803
829
|
}
|
|
804
830
|
.dx-tag[data-hue=amber],
|
|
805
831
|
.dx-tag--amber {
|
|
806
|
-
@apply bg-amber-surface text-amber-
|
|
832
|
+
@apply bg-amber-surface text-amber-foreground;
|
|
807
833
|
}
|
|
808
834
|
.dx-tag[data-hue=yellow],
|
|
809
835
|
.dx-tag--yellow {
|
|
810
|
-
@apply bg-yellow-surface text-yellow-
|
|
836
|
+
@apply bg-yellow-surface text-yellow-foreground;
|
|
811
837
|
}
|
|
812
838
|
.dx-tag[data-hue=lime],
|
|
813
839
|
.dx-tag--lime {
|
|
814
|
-
@apply bg-lime-surface text-lime-
|
|
840
|
+
@apply bg-lime-surface text-lime-foreground;
|
|
815
841
|
}
|
|
816
842
|
.dx-tag[data-hue=green],
|
|
817
843
|
.dx-tag--green {
|
|
818
|
-
@apply bg-green-surface text-green-
|
|
844
|
+
@apply bg-green-surface text-green-foreground;
|
|
819
845
|
}
|
|
820
846
|
.dx-tag[data-hue=emerald],
|
|
821
847
|
.dx-tag--emerald {
|
|
822
|
-
@apply bg-emerald-surface text-emerald-
|
|
848
|
+
@apply bg-emerald-surface text-emerald-foreground;
|
|
823
849
|
}
|
|
824
850
|
.dx-tag[data-hue=teal],
|
|
825
851
|
.dx-tag--teal {
|
|
826
|
-
@apply bg-teal-surface text-teal-
|
|
852
|
+
@apply bg-teal-surface text-teal-foreground;
|
|
827
853
|
}
|
|
828
854
|
.dx-tag[data-hue=cyan],
|
|
829
855
|
.dx-tag--cyan {
|
|
830
|
-
@apply bg-cyan-surface text-cyan-
|
|
856
|
+
@apply bg-cyan-surface text-cyan-foreground;
|
|
831
857
|
}
|
|
832
858
|
.dx-tag[data-hue=sky],
|
|
833
859
|
.dx-tag--sky {
|
|
834
|
-
@apply bg-sky-surface text-sky-
|
|
860
|
+
@apply bg-sky-surface text-sky-foreground;
|
|
835
861
|
}
|
|
836
862
|
.dx-tag[data-hue=blue],
|
|
837
863
|
.dx-tag--blue {
|
|
838
|
-
@apply bg-blue-surface text-blue-
|
|
864
|
+
@apply bg-blue-surface text-blue-foreground;
|
|
839
865
|
}
|
|
840
866
|
.dx-tag[data-hue=indigo],
|
|
841
867
|
.dx-tag--indigo {
|
|
842
|
-
@apply bg-indigo-surface text-indigo-
|
|
868
|
+
@apply bg-indigo-surface text-indigo-foreground;
|
|
843
869
|
}
|
|
844
870
|
.dx-tag[data-hue=violet],
|
|
845
871
|
.dx-tag--violet {
|
|
846
|
-
@apply bg-violet-surface text-violet-
|
|
872
|
+
@apply bg-violet-surface text-violet-foreground;
|
|
847
873
|
}
|
|
848
874
|
.dx-tag[data-hue=purple],
|
|
849
875
|
.dx-tag--purple {
|
|
850
|
-
@apply bg-purple-surface text-purple-
|
|
876
|
+
@apply bg-purple-surface text-purple-foreground;
|
|
851
877
|
}
|
|
852
878
|
.dx-tag[data-hue=fuchsia],
|
|
853
879
|
.dx-tag--fuchsia {
|
|
854
|
-
@apply bg-fuchsia-surface text-fuchsia-
|
|
880
|
+
@apply bg-fuchsia-surface text-fuchsia-foreground;
|
|
855
881
|
}
|
|
856
882
|
.dx-tag[data-hue=pink],
|
|
857
883
|
.dx-tag--pink {
|
|
858
|
-
@apply bg-pink-surface text-pink-
|
|
884
|
+
@apply bg-pink-surface text-pink-foreground;
|
|
859
885
|
}
|
|
860
886
|
.dx-tag[data-hue=rose],
|
|
861
887
|
.dx-tag--rose {
|
|
862
|
-
@apply bg-rose-surface text-rose-
|
|
888
|
+
@apply bg-rose-surface text-rose-foreground;
|
|
863
889
|
}
|
|
864
890
|
.dx-tag[data-hue=info],
|
|
865
891
|
.dx-tag--info {
|
|
866
|
-
@apply bg-cyan-surface text-cyan-
|
|
892
|
+
@apply bg-cyan-surface text-cyan-foreground;
|
|
867
893
|
}
|
|
868
894
|
.dx-tag[data-hue=success],
|
|
869
895
|
.dx-tag--success {
|
|
870
|
-
@apply bg-emerald-surface text-emerald-
|
|
896
|
+
@apply bg-emerald-surface text-emerald-foreground;
|
|
871
897
|
}
|
|
872
898
|
.dx-tag[data-hue=warning],
|
|
873
899
|
.dx-tag--warning {
|
|
874
|
-
@apply bg-amber-surface text-amber-
|
|
900
|
+
@apply bg-amber-surface text-amber-foreground;
|
|
875
901
|
}
|
|
876
902
|
.dx-tag[data-hue=error],
|
|
877
903
|
.dx-tag--error {
|
|
878
|
-
@apply bg-rose-surface text-rose-
|
|
904
|
+
@apply bg-rose-surface text-rose-foreground;
|
|
879
905
|
}
|
|
880
906
|
}
|
|
881
907
|
|
|
@@ -1182,6 +1208,9 @@
|
|
|
1182
1208
|
.dx-size-container {
|
|
1183
1209
|
container-type: size;
|
|
1184
1210
|
}
|
|
1211
|
+
.dx-inline-size-container {
|
|
1212
|
+
container-type: inline-size;
|
|
1213
|
+
}
|
|
1185
1214
|
.dx-document {
|
|
1186
1215
|
@apply mx-auto w-full max-w-document-max-width;
|
|
1187
1216
|
}
|
|
@@ -1492,11 +1521,20 @@
|
|
|
1492
1521
|
|
|
1493
1522
|
/* src/css/utilities.css */
|
|
1494
1523
|
@utility dx-expander { @apply flex-1 min-h-0 min-w-0 h-full w-full; }
|
|
1495
|
-
@utility dx-column { @apply flex-1 min-w-0 w-full; }
|
|
1496
1524
|
@utility dx-container { @apply dx-expander overflow-hidden; }
|
|
1525
|
+
@utility dx-column { @apply flex-1 min-w-0 w-full; }
|
|
1497
1526
|
@utility dx-fullscreen { @apply absolute inset-0; }
|
|
1498
1527
|
@utility dx-slot-warning { @apply border border-rose-500 border-dashed; }
|
|
1499
1528
|
@utility dx-ring-pseudo { @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:ring after:ring-inset after:ring-transparent; }
|
|
1529
|
+
@utility shimmer-text { mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.4) 100%); mask-size: 200% 100%; -webkit-mask-size: 200% 100%; mask-repeat: repeat-x; -webkit-mask-repeat: repeat-x; animation: shimmer-text 2s linear infinite; }
|
|
1530
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1531
|
+
.shimmer-text {
|
|
1532
|
+
animation: none;
|
|
1533
|
+
mask-image: none;
|
|
1534
|
+
-webkit-mask-image: none;
|
|
1535
|
+
opacity: 0.6;
|
|
1536
|
+
}
|
|
1537
|
+
}
|
|
1500
1538
|
|
|
1501
1539
|
/* src/css/integrations/codemirror.css */
|
|
1502
1540
|
@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), var(--color-blue-600)); --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-50), var(--color-neutral-950)); --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-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)); }
|
|
@@ -1513,11 +1551,14 @@
|
|
|
1513
1551
|
}
|
|
1514
1552
|
|
|
1515
1553
|
/* src/main.css */
|
|
1554
|
+
@source "../../../**/*.{ts,tsx,html}";
|
|
1555
|
+
@source "../../../../tools/**/*.{ts,tsx,html}";
|
|
1516
1556
|
@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}");
|
|
1517
|
-
@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,
|
|
1557
|
+
@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,foreground,text,border}");
|
|
1518
1558
|
@source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
|
|
1519
|
-
@source inline("bg-{info,success,warning,error}-{fill,surface,
|
|
1559
|
+
@source inline("bg-{info,success,warning,error}-{fill,surface,foreground,text,border}");
|
|
1520
1560
|
@source inline("border-{info,success,warning,error}-border");
|
|
1561
|
+
@source inline("bg-grid-{surface,foreground,line,highlight,comment,comment-active,selection-surface,selection-foreground}");
|
|
1521
1562
|
@plugin "@tailwindcss/forms";
|
|
1522
1563
|
@plugin "tailwind-scrollbar";
|
|
1523
1564
|
@plugin "tailwindcss-radix";
|