@dxos/ui-theme 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +63 -57
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +63 -57
- 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 +64 -29
- 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 +64 -29
- 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/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/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.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 +9 -16
- package/src/css/components/panel.css +22 -22
- package/src/css/components/selected.css +8 -3
- package/src/css/components/selected.md +101 -0
- package/src/css/components/tag.css +3 -1
- package/src/css/layout/size.css +16 -3
- package/src/css/theme/animation.css +31 -0
- package/src/css/theme/spacing.css +6 -7
- package/src/css/utilities.css +48 -6
- package/src/fragments/AUDIT.md +0 -1
- package/src/fragments/density.ts +8 -5
- package/src/fragments/text.ts +1 -1
- package/src/main.css +36 -2
- package/src/theme/components/card.ts +4 -0
- package/src/theme/components/dialog.ts +5 -3
- package/src/theme/components/icon-button.ts +6 -3
- package/src/theme/components/input.ts +6 -6
- 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/primitives/column.ts +44 -20
- package/src/util/mx.ts +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/plugins/ThemePlugin.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/plugins/ThemePlugin.ts":{"bytes":13135,"imports":[{"path":"@tailwindcss/postcss","kind":"import-statement","external":true},{"path":"autoprefixer","kind":"import-statement","external":true},{"path":"node:fs","kind":"import-statement","external":true},{"path":"node:path","kind":"import-statement","external":true},{"path":"postcss-import","kind":"import-statement","external":true},{"path":"postcss-nesting","kind":"import-statement","external":true}],"format":"esm"},"src/css/theme/animation.css":{"bytes":4993,"imports":[]},"src/css/theme/border.css":{"bytes":623,"imports":[]},"src/css/theme/palette.css":{"bytes":1519,"imports":[]},"src/css/theme/semantic.css":{"bytes":5986,"imports":[]},"src/css/theme/spacing.css":{"bytes":3986,"imports":[]},"src/css/theme/styles.css":{"bytes":8793,"imports":[]},"src/css/theme/text.css":{"bytes":1008,"imports":[]},"src/css/base/base.css":{"bytes":850,"imports":[]},"src/css/base/typography.css":{"bytes":3219,"imports":[{"path":"@fontsource-variable/jetbrains-mono/wght-italic.css","kind":"import-rule","external":true},{"path":"@fontsource-variable/jetbrains-mono/wght.css","kind":"import-rule","external":true},{"path":"@fontsource/poiret-one","kind":"import-rule","external":true}]},"src/css/components/button.css":{"bytes":2255,"imports":[]},"src/css/components/checkbox.css":{"bytes":1662,"imports":[]},"src/css/components/dialog.css":{"bytes":1597,"imports":[]},"src/css/components/focus.css":{"bytes":5467,"imports":[]},"src/css/components/icon.css":{"bytes":109,"imports":[]},"src/css/components/panel.css":{"bytes":3195,"imports":[]},"src/css/components/link.css":{"bytes":135,"imports":[]},"src/css/components/scrollbar.css":{"bytes":524,"imports":[]},"src/css/components/selected.css":{"bytes":1355,"imports":[]},"src/css/components/surface.css":{"bytes":950,"imports":[]},"src/css/components/tag.css":{"bytes":2996,"imports":[]},"src/css/components/text.css":{"bytes":1996,"imports":[]},"src/css/layout/main.css":{"bytes":6568,"imports":[]},"src/css/layout/native.css":{"bytes":496,"imports":[]},"src/css/layout/positioning.css":{"bytes":322,"imports":[]},"src/css/layout/size.css":{"bytes":6881,"imports":[]},"src/css/utilities.css":{"bytes":3909,"imports":[]},"src/css/integrations/codemirror.css":{"bytes":1737,"imports":[]},"src/css/integrations/tldraw.css":{"bytes":331,"imports":[]},"src/main.css":{"bytes":4682,"imports":[{"path":"tailwindcss","kind":"import-rule","external":true},{"path":"src/css/theme/animation.css","kind":"import-rule","original":"./css/theme/animation.css"},{"path":"src/css/theme/border.css","kind":"import-rule","original":"./css/theme/border.css"},{"path":"src/css/theme/palette.css","kind":"import-rule","original":"./css/theme/palette.css"},{"path":"src/css/theme/semantic.css","kind":"import-rule","original":"./css/theme/semantic.css"},{"path":"src/css/theme/spacing.css","kind":"import-rule","original":"./css/theme/spacing.css"},{"path":"src/css/theme/styles.css","kind":"import-rule","original":"./css/theme/styles.css"},{"path":"src/css/theme/text.css","kind":"import-rule","original":"./css/theme/text.css"},{"path":"src/css/base/base.css","kind":"import-rule","original":"./css/base/base.css"},{"path":"src/css/base/typography.css","kind":"import-rule","original":"./css/base/typography.css"},{"path":"src/css/components/button.css","kind":"import-rule","original":"./css/components/button.css"},{"path":"src/css/components/checkbox.css","kind":"import-rule","original":"./css/components/checkbox.css"},{"path":"src/css/components/dialog.css","kind":"import-rule","original":"./css/components/dialog.css"},{"path":"src/css/components/focus.css","kind":"import-rule","original":"./css/components/focus.css"},{"path":"src/css/components/icon.css","kind":"import-rule","original":"./css/components/icon.css"},{"path":"src/css/components/panel.css","kind":"import-rule","original":"./css/components/panel.css"},{"path":"src/css/components/link.css","kind":"import-rule","original":"./css/components/link.css"},{"path":"src/css/components/scrollbar.css","kind":"import-rule","original":"./css/components/scrollbar.css"},{"path":"src/css/components/selected.css","kind":"import-rule","original":"./css/components/selected.css"},{"path":"src/css/components/surface.css","kind":"import-rule","original":"./css/components/surface.css"},{"path":"src/css/components/tag.css","kind":"import-rule","original":"./css/components/tag.css"},{"path":"src/css/components/text.css","kind":"import-rule","original":"./css/components/text.css"},{"path":"src/css/layout/main.css","kind":"import-rule","original":"./css/layout/main.css"},{"path":"src/css/layout/native.css","kind":"import-rule","original":"./css/layout/native.css"},{"path":"src/css/layout/positioning.css","kind":"import-rule","original":"./css/layout/positioning.css"},{"path":"src/css/layout/size.css","kind":"import-rule","original":"./css/layout/size.css"},{"path":"src/css/utilities.css","kind":"import-rule","original":"./css/utilities.css"},{"path":"src/css/integrations/codemirror.css","kind":"import-rule","original":"./css/integrations/codemirror.css"},{"path":"src/css/integrations/tldraw.css","kind":"import-rule","original":"./css/integrations/tldraw.css"}]}},"outputs":{"dist/plugin/node-cjs/plugins/ThemePlugin.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6236},"dist/plugin/node-cjs/plugins/ThemePlugin.cjs":{"imports":[{"path":"@tailwindcss/postcss","kind":"import-statement","external":true},{"path":"autoprefixer","kind":"import-statement","external":true},{"path":"node:fs","kind":"import-statement","external":true},{"path":"node:path","kind":"import-statement","external":true},{"path":"postcss-import","kind":"import-statement","external":true},{"path":"postcss-nesting","kind":"import-statement","external":true}],"exports":["LAYER_ORDER","ThemePlugin"],"entryPoint":"src/plugins/ThemePlugin.ts","inputs":{"src/plugins/ThemePlugin.ts":{"bytesInOutput":2777}},"bytes":2889},"dist/plugin/node-cjs/main.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":120464},"dist/plugin/node-cjs/main.css":{"imports":[{"path":"tailwindcss","kind":"import-rule","external":true},{"path":"@fontsource-variable/jetbrains-mono/wght-italic.css","kind":"import-rule","external":true},{"path":"@fontsource-variable/jetbrains-mono/wght.css","kind":"import-rule","external":true},{"path":"@fontsource/poiret-one","kind":"import-rule","external":true}],"entryPoint":"src/main.css","inputs":{"src/css/theme/animation.css":{"bytesInOutput":3508},"src/css/theme/border.css":{"bytesInOutput":450},"src/css/theme/palette.css":{"bytesInOutput":1253},"src/css/theme/semantic.css":{"bytesInOutput":5285},"src/css/theme/spacing.css":{"bytesInOutput":3089},"src/css/theme/styles.css":{"bytesInOutput":8479},"src/css/theme/text.css":{"bytesInOutput":841},"src/css/base/base.css":{"bytesInOutput":806},"src/css/base/typography.css":{"bytesInOutput":2742},"src/css/components/button.css":{"bytesInOutput":1748},"src/css/components/checkbox.css":{"bytesInOutput":1336},"src/css/components/dialog.css":{"bytesInOutput":1550},"src/css/components/focus.css":{"bytesInOutput":5360},"src/css/components/icon.css":{"bytesInOutput":91},"src/css/components/panel.css":{"bytesInOutput":2861},"src/css/components/link.css":{"bytesInOutput":100},"src/css/components/scrollbar.css":{"bytesInOutput":451},"src/css/components/selected.css":{"bytesInOutput":766},"src/css/components/surface.css":{"bytesInOutput":553},"src/css/components/tag.css":{"bytesInOutput":2726},"src/css/components/text.css":{"bytesInOutput":1794},"src/css/layout/main.css":{"bytesInOutput":6361},"src/css/layout/native.css":{"bytesInOutput":215},"src/css/layout/positioning.css":{"bytesInOutput":297},"src/css/layout/size.css":{"bytesInOutput":5804},"src/css/utilities.css":{"bytesInOutput":1154},"src/css/integrations/codemirror.css":{"bytesInOutput":1284},"src/css/integrations/tldraw.css":{"bytesInOutput":276},"src/main.css":{"bytesInOutput":1229}},"bytes":63760}}}
|
|
@@ -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); }
|
|
@@ -17,7 +36,7 @@
|
|
|
17
36
|
@theme { --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-base-surface-text: 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-surface-text: 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-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-hover-surface-text: 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-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950)); --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-highlight-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-highlight-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-highlight-surface-text: 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-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50)); --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-surface-text: 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-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600)); --color-un-accent: var(--color-neutral-400); --color-un-accent-hover: var(--color-neutral-500); --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-highlight: oklch(from var(--color-emerald-500) l c h / 0.5); --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-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1); --color-grid-selection-overlay: var(--color-blue-500); --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800)); --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600)); --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,10 +82,10 @@
|
|
|
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);
|
|
@@ -623,91 +642,91 @@
|
|
|
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
647
|
@apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
|
|
629
648
|
}
|
|
630
|
-
|
|
649
|
+
[data-hue=red] .dx-panel,
|
|
631
650
|
.dx-panel--red {
|
|
632
651
|
@apply bg-red-surface text-red-surface-text border-red-border;
|
|
633
652
|
}
|
|
634
|
-
|
|
653
|
+
[data-hue=orange] .dx-panel,
|
|
635
654
|
.dx-panel--orange {
|
|
636
655
|
@apply bg-orange-surface text-orange-surface-text border-orange-border;
|
|
637
656
|
}
|
|
638
|
-
|
|
657
|
+
[data-hue=amber] .dx-panel,
|
|
639
658
|
.dx-panel--amber {
|
|
640
659
|
@apply bg-amber-surface text-amber-surface-text border-amber-border;
|
|
641
660
|
}
|
|
642
|
-
|
|
661
|
+
[data-hue=yellow] .dx-panel,
|
|
643
662
|
.dx-panel--yellow {
|
|
644
663
|
@apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
|
|
645
664
|
}
|
|
646
|
-
|
|
665
|
+
[data-hue=lime] .dx-panel,
|
|
647
666
|
.dx-panel--lime {
|
|
648
667
|
@apply bg-lime-surface text-lime-surface-text border-lime-border;
|
|
649
668
|
}
|
|
650
|
-
|
|
669
|
+
[data-hue=green] .dx-panel,
|
|
651
670
|
.dx-panel--green {
|
|
652
671
|
@apply bg-green-surface text-green-surface-text border-green-border;
|
|
653
672
|
}
|
|
654
|
-
|
|
673
|
+
[data-hue=emerald] .dx-panel,
|
|
655
674
|
.dx-panel--emerald {
|
|
656
675
|
@apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
|
|
657
676
|
}
|
|
658
|
-
|
|
677
|
+
[data-hue=teal] .dx-panel,
|
|
659
678
|
.dx-panel--teal {
|
|
660
679
|
@apply bg-teal-surface text-teal-surface-text border-teal-border;
|
|
661
680
|
}
|
|
662
|
-
|
|
681
|
+
[data-hue=cyan] .dx-panel,
|
|
663
682
|
.dx-panel--cyan {
|
|
664
683
|
@apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
|
|
665
684
|
}
|
|
666
|
-
|
|
685
|
+
[data-hue=sky] .dx-panel,
|
|
667
686
|
.dx-panel--sky {
|
|
668
687
|
@apply bg-sky-surface text-sky-surface-text border-sky-border;
|
|
669
688
|
}
|
|
670
|
-
|
|
689
|
+
[data-hue=blue] .dx-panel,
|
|
671
690
|
.dx-panel--blue {
|
|
672
691
|
@apply bg-blue-surface text-blue-surface-text border-blue-border;
|
|
673
692
|
}
|
|
674
|
-
|
|
693
|
+
[data-hue=indigo] .dx-panel,
|
|
675
694
|
.dx-panel--indigo {
|
|
676
695
|
@apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
|
|
677
696
|
}
|
|
678
|
-
|
|
697
|
+
[data-hue=violet] .dx-panel,
|
|
679
698
|
.dx-panel--violet {
|
|
680
699
|
@apply bg-violet-surface text-violet-surface-text border-violet-border;
|
|
681
700
|
}
|
|
682
|
-
|
|
701
|
+
[data-hue=purple] .dx-panel,
|
|
683
702
|
.dx-panel--purple {
|
|
684
703
|
@apply bg-purple-surface text-purple-surface-text border-purple-border;
|
|
685
704
|
}
|
|
686
|
-
|
|
705
|
+
[data-hue=fuchsia] .dx-panel,
|
|
687
706
|
.dx-panel--fuchsia {
|
|
688
707
|
@apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
|
|
689
708
|
}
|
|
690
|
-
|
|
709
|
+
[data-hue=pink] .dx-panel,
|
|
691
710
|
.dx-panel--pink {
|
|
692
711
|
@apply bg-pink-surface text-pink-surface-text border-pink-border;
|
|
693
712
|
}
|
|
694
|
-
|
|
713
|
+
[data-hue=rose] .dx-panel,
|
|
695
714
|
.dx-panel--rose {
|
|
696
715
|
@apply bg-rose-surface text-rose-surface-text border-rose-border;
|
|
697
716
|
}
|
|
698
|
-
|
|
717
|
+
[data-hue=info] .dx-panel,
|
|
699
718
|
.dx-panel--info {
|
|
700
719
|
@apply bg-info-surface text-info-surface-text border-info-border;
|
|
701
720
|
}
|
|
702
|
-
|
|
721
|
+
[data-hue=success] .dx-panel,
|
|
703
722
|
.dx-panel--success {
|
|
704
723
|
@apply bg-success-surface text-success-surface-text border-success-border;
|
|
705
724
|
}
|
|
706
|
-
|
|
725
|
+
[data-hue=warning] .dx-panel,
|
|
707
726
|
.dx-panel--warning {
|
|
708
727
|
@apply bg-warning-surface text-warning-surface-text border-warning-border;
|
|
709
728
|
}
|
|
710
|
-
|
|
729
|
+
[data-hue=error] .dx-panel,
|
|
711
730
|
.dx-panel--error {
|
|
712
731
|
@apply bg-error-surface text-error-surface-text border-error-border;
|
|
713
732
|
}
|
|
@@ -784,7 +803,8 @@
|
|
|
784
803
|
user-select: none;
|
|
785
804
|
}
|
|
786
805
|
.dx-tag--anchor {
|
|
787
|
-
@apply inline cursor-pointer -mx-[
|
|
806
|
+
@apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
|
|
807
|
+
@apply bg-group-surface text-sky-surface-text border-sky-border;
|
|
788
808
|
&:hover {
|
|
789
809
|
@apply bg-hover-surface;
|
|
790
810
|
}
|
|
@@ -1182,6 +1202,9 @@
|
|
|
1182
1202
|
.dx-size-container {
|
|
1183
1203
|
container-type: size;
|
|
1184
1204
|
}
|
|
1205
|
+
.dx-inline-size-container {
|
|
1206
|
+
container-type: inline-size;
|
|
1207
|
+
}
|
|
1185
1208
|
.dx-document {
|
|
1186
1209
|
@apply mx-auto w-full max-w-document-max-width;
|
|
1187
1210
|
}
|
|
@@ -1492,11 +1515,20 @@
|
|
|
1492
1515
|
|
|
1493
1516
|
/* src/css/utilities.css */
|
|
1494
1517
|
@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
1518
|
@utility dx-container { @apply dx-expander overflow-hidden; }
|
|
1519
|
+
@utility dx-column { @apply flex-1 min-w-0 w-full; }
|
|
1497
1520
|
@utility dx-fullscreen { @apply absolute inset-0; }
|
|
1498
1521
|
@utility dx-slot-warning { @apply border border-rose-500 border-dashed; }
|
|
1499
1522
|
@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; }
|
|
1523
|
+
@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; }
|
|
1524
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1525
|
+
.shimmer-text {
|
|
1526
|
+
animation: none;
|
|
1527
|
+
mask-image: none;
|
|
1528
|
+
-webkit-mask-image: none;
|
|
1529
|
+
opacity: 0.6;
|
|
1530
|
+
}
|
|
1531
|
+
}
|
|
1500
1532
|
|
|
1501
1533
|
/* src/css/integrations/codemirror.css */
|
|
1502
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), 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 +1545,14 @@
|
|
|
1513
1545
|
}
|
|
1514
1546
|
|
|
1515
1547
|
/* src/main.css */
|
|
1548
|
+
@source "../../../**/*.{ts,tsx,html}";
|
|
1549
|
+
@source "../../../../tools/**/*.{ts,tsx,html}";
|
|
1516
1550
|
@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
1551
|
@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
|
|
1518
1552
|
@source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
|
|
1519
1553
|
@source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
|
|
1520
1554
|
@source inline("border-{info,success,warning,error}-border");
|
|
1555
|
+
@source inline("bg-grid-{surface,highlight,comment,comment-active,hover-overlay,selection-overlay,line,focus-indicator}");
|
|
1521
1556
|
@plugin "@tailwindcss/forms";
|
|
1522
1557
|
@plugin "tailwind-scrollbar";
|
|
1523
1558
|
@plugin "tailwindcss-radix";
|