@dxos/ui-theme 0.9.0 → 0.9.1-main.c7dcc2e112
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/plugin/node-cjs/main.css +46 -20
- 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 +46 -20
- package/dist/plugin/node-esm/main.css.map +2 -2
- package/dist/plugin/node-esm/meta.json +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/css/components/button.css +3 -8
- package/src/css/components/state.css +2 -25
- package/src/css/components/surface.css +65 -12
- package/src/css/layout/size.css +1 -1
- package/src/css/theme/semantic.css +143 -62
- package/src/css/theme/spacing.css +1 -1
|
@@ -33,10 +33,10 @@
|
|
|
33
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 { --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-
|
|
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-deck-surface: var(--dx-elevation-0); --color-scrim-surface: light-dark( oklch(from var(--dx-elevation-0) l c h / 0.5), oklch(from var(--dx-elevation-0) l c h / 0.25) ); --color-base-surface: var(--dx-elevation-1); --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-header-surface: var(--dx-elevation-2); --color-sidebar-surface: var(--dx-elevation-2); --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-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-card-surface: var(--dx-elevation-3); --color-attention-surface: var(--dx-elevation-3); --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3); --color-focus-surface: var(--dx-elevation-4); --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-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-5); --color-popover-surface: var(--dx-elevation-6); --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-description: light-dark(var(--color-neutral-600), var(--color-neutral-400)); --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600)); --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600)); --color-input-bg: light-dark(var(--color-neutral-250), var(--color-neutral-700)); --color-input-fg: var(--color-base-fg); --color-hover-surface: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.08) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.08) c h) ); --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-hover-surface-subtle: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.02) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.02) c h) ); --color-current-surface: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.1) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.1) c h) ); --color-current-surface-hover: light-dark( oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.12) c h), oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.12) c h) ); --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-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-axis-text: light-dark(var(--color-neutral-700), var(--color-neutral-300)); --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-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) ); }
|
|
37
37
|
|
|
38
38
|
/* src/css/theme/spacing.css */
|
|
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-
|
|
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-md); --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
41
|
.dx-density-lg {
|
|
42
42
|
--spacing-form-padding: var(--spacing-trim-md);
|
|
@@ -294,8 +294,7 @@
|
|
|
294
294
|
&[data-variant=ghost] {
|
|
295
295
|
@apply bg-transparent;
|
|
296
296
|
&:hover {
|
|
297
|
-
|
|
298
|
-
@apply text-inherit;
|
|
297
|
+
@apply bg-hover-surface text-inherit;
|
|
299
298
|
}
|
|
300
299
|
&[data-state=open] {
|
|
301
300
|
@apply bg-input-bg;
|
|
@@ -825,10 +824,10 @@
|
|
|
825
824
|
/* src/css/components/state.css */
|
|
826
825
|
@layer dx-components {
|
|
827
826
|
.dx-hover {
|
|
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;
|
|
827
|
+
@apply cursor-pointer hover:bg-hover-surface-subtle! 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;
|
|
829
828
|
}
|
|
830
829
|
.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!;
|
|
830
|
+
@apply group-hover/row:bg-hover-surface-subtle! 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
831
|
}
|
|
833
832
|
.dx-selected {
|
|
834
833
|
@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];
|
|
@@ -843,14 +842,6 @@
|
|
|
843
842
|
@apply data-[highlighted]:bg-current-surface data-[highlighted]:text-current-fg hover:data-[highlighted]:bg-current-surface-hover;
|
|
844
843
|
}
|
|
845
844
|
}
|
|
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) );
|
|
852
|
-
}
|
|
853
|
-
}
|
|
854
845
|
|
|
855
846
|
/* src/css/components/surface.css */
|
|
856
847
|
@layer dx-components {
|
|
@@ -858,27 +849,62 @@
|
|
|
858
849
|
@apply bg-base-surface text-base-fg;
|
|
859
850
|
--surface-bg: var(--color-base-surface);
|
|
860
851
|
}
|
|
852
|
+
.dx-deck-surface {
|
|
853
|
+
@apply bg-deck-surface text-base-fg;
|
|
854
|
+
--surface-bg: var(--color-deck-surface);
|
|
855
|
+
}
|
|
861
856
|
.dx-sidebar-surface {
|
|
862
857
|
@apply bg-sidebar-surface text-base-fg;
|
|
863
858
|
--surface-bg: var(--color-sidebar-surface);
|
|
864
859
|
}
|
|
860
|
+
.dx-header-surface {
|
|
861
|
+
@apply bg-header-surface text-base-fg;
|
|
862
|
+
--surface-bg: var(--color-header-surface);
|
|
863
|
+
}
|
|
864
|
+
.dx-card-surface {
|
|
865
|
+
@apply bg-card-surface text-base-fg;
|
|
866
|
+
--surface-bg: var(--color-card-surface);
|
|
867
|
+
}
|
|
868
|
+
.dx-group-surface {
|
|
869
|
+
@apply bg-group-surface text-base-fg;
|
|
870
|
+
--surface-bg: var(--color-group-surface);
|
|
871
|
+
}
|
|
872
|
+
.dx-input-surface {
|
|
873
|
+
@apply bg-input-surface text-base-fg;
|
|
874
|
+
--surface-bg: var(--color-input-surface);
|
|
875
|
+
}
|
|
876
|
+
.dx-toolbar-surface {
|
|
877
|
+
@apply bg-toolbar-surface text-base-fg;
|
|
878
|
+
--surface-bg: var(--color-toolbar-surface);
|
|
879
|
+
}
|
|
865
880
|
.dx-modal-surface {
|
|
866
881
|
@apply bg-modal-surface text-base-fg backdrop-blur-md;
|
|
867
882
|
--surface-bg: var(--color-modal-surface);
|
|
868
883
|
}
|
|
869
|
-
.dx-attention-surface {
|
|
870
|
-
@apply bg-attention-surface text-base-fg;
|
|
871
|
-
--surface-bg: var(--color-attention-surface);
|
|
872
|
-
}
|
|
873
884
|
.dx-popover-surface {
|
|
874
885
|
@apply bg-popover-surface text-base-fg backdrop-blur-md;
|
|
875
886
|
--surface-bg: var(--color-popover-surface);
|
|
876
887
|
}
|
|
888
|
+
.dx-attention-surface {
|
|
889
|
+
@apply bg-attention-surface text-base-fg;
|
|
890
|
+
--surface-bg: var(--color-attention-surface);
|
|
891
|
+
}
|
|
877
892
|
}
|
|
878
893
|
@layer dx-tokens {
|
|
894
|
+
.dx-base-surface,
|
|
895
|
+
.dx-deck-surface,
|
|
896
|
+
.dx-sidebar-surface,
|
|
897
|
+
.dx-header-surface,
|
|
898
|
+
.dx-card-surface,
|
|
899
|
+
.dx-group-surface,
|
|
900
|
+
.dx-input-surface,
|
|
901
|
+
.dx-toolbar-surface,
|
|
879
902
|
.dx-modal-surface,
|
|
880
|
-
.dx-popover-surface
|
|
903
|
+
.dx-popover-surface,
|
|
904
|
+
.dx-attention-surface,
|
|
905
|
+
.dx-main-sidebar {
|
|
881
906
|
--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) );
|
|
907
|
+
--color-hover-surface-subtle: light-dark( oklch(from var(--surface-bg) calc(l - 0.02) c h), oklch(from var(--surface-bg) calc(l + 0.02) c h) );
|
|
882
908
|
--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
909
|
--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
910
|
}
|
|
@@ -1318,7 +1344,7 @@
|
|
|
1318
1344
|
@apply w-full max-w-card-max-width;
|
|
1319
1345
|
}
|
|
1320
1346
|
.dx-card-popover {
|
|
1321
|
-
@apply inline-card-max-width bg-
|
|
1347
|
+
@apply inline-card-max-width bg-popover-surface;
|
|
1322
1348
|
max-width: min(var(--radix-popper-available-width), var(--spacing-card-max-width));
|
|
1323
1349
|
max-height: min(var(--radix-popper-available-height), var(--spacing-card-max-height));
|
|
1324
1350
|
}
|