@dxos/ui-theme 0.9.0 → 0.9.1-staging.ee54ba693a
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 +37 -7
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +37 -7
- 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 +56 -27
- 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 +56 -27
- package/dist/plugin/node-esm/main.css.map +2 -2
- package/dist/plugin/node-esm/meta.json +1 -1
- package/dist/types/src/util/index.d.ts +2 -0
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/src/util/mx.d.ts.map +1 -1
- package/dist/types/src/util/tv.d.ts +27 -0
- package/dist/types/src/util/tv.d.ts.map +1 -0
- package/dist/types/src/util/tv.test.d.ts +2 -0
- package/dist/types/src/util/tv.test.d.ts.map +1 -0
- package/dist/types/src/util/tw-merge-config.d.ts +17 -0
- package/dist/types/src/util/tw-merge-config.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -7
- package/src/Theme.stories.tsx +1 -1
- package/src/css/components/button.css +10 -9
- package/src/css/components/state.css +2 -25
- package/src/css/components/surface.css +65 -12
- package/src/css/components/tag.css +2 -2
- package/src/css/layout/size.css +1 -1
- package/src/css/theme/semantic.css +162 -75
- package/src/css/theme/spacing.css +7 -5
- package/src/util/index.ts +2 -0
- package/src/util/mx.ts +5 -35
- package/src/util/tv.test.ts +38 -0
- package/src/util/tv.ts +45 -0
- package/src/util/tw-merge-config.ts +46 -0
|
@@ -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-
|
|
36
|
+
@theme { --dx-elevation-0: light-dark(var(--color-neutral-300), var(--color-neutral-950)); --dx-elevation-1: light-dark(var(--color-neutral-300), var(--color-neutral-925)); --dx-elevation-2: light-dark(var(--color-neutral-200), var(--color-neutral-900)); --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-875)); --dx-elevation-4: light-dark(var(--color-neutral-125), var(--color-neutral-850)); --dx-elevation-5: light-dark(var(--color-neutral-100), var(--color-neutral-825)); --dx-elevation-6: light-dark(var(--color-neutral-75), var(--color-neutral-800)); --dx-elevation-7: light-dark(var(--color-neutral-50), var(--color-neutral-775)); --dx-elevation-8: 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-card-surface: var(--dx-elevation-1); --color-base-surface: var(--dx-elevation-2); --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150)); --color-attention-surface: var(--dx-elevation-2); --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3); --color-header-surface: var(--dx-elevation-3); --color-sidebar-surface: var(--dx-elevation-3); --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-2); --color-l1-surface: var(--dx-elevation-3); --color-r0-surface: var(--dx-elevation-3); --color-r1-surface: var(--dx-elevation-3); --color-toolbar-surface: var(--dx-elevation-4); --color-focus-surface: var(--dx-elevation-5); --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-5); --color-group-alt-surface: light-dark( oklch(from var(--dx-elevation-5) calc(l - 0.03) c h), oklch(from var(--dx-elevation-5) calc(l + 0.03) c h) ); --color-input-surface: var(--dx-elevation-5); --color-modal-surface: var(--dx-elevation-6); --color-popover-surface: var(--dx-elevation-7); --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-200), var(--color-neutral-800)); --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-700)); --color-input-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750)); --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-775)); --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);
|
|
@@ -63,10 +63,9 @@
|
|
|
63
63
|
--dx-lacuna-3: 0.375rem;
|
|
64
64
|
--dx-lacuna-4: 0.5rem;
|
|
65
65
|
--dx-lacuna-6: 0.75rem;
|
|
66
|
-
--dx-gutter-
|
|
67
|
-
--dx-gutter-
|
|
68
|
-
--dx-gutter-
|
|
69
|
-
--dx-gutter-lg: 2.5rem;
|
|
66
|
+
--dx-gutter-sm: 0.5rem;
|
|
67
|
+
--dx-gutter-md: 1rem;
|
|
68
|
+
--dx-gutter-lg: 2rem;
|
|
70
69
|
}
|
|
71
70
|
:root {
|
|
72
71
|
--dx-hair-line: 1px;
|
|
@@ -286,7 +285,11 @@
|
|
|
286
285
|
}
|
|
287
286
|
&[aria-pressed=true],
|
|
288
287
|
&[aria-checked=true] {
|
|
289
|
-
@apply text-
|
|
288
|
+
@apply text-base-fg bg-selected-surface;
|
|
289
|
+
}
|
|
290
|
+
&[aria-pressed=false],
|
|
291
|
+
&[aria-checked=false] {
|
|
292
|
+
@apply text-description;
|
|
290
293
|
}
|
|
291
294
|
&[disabled]:not([disabled=false]) {
|
|
292
295
|
@apply opacity-40 cursor-not-allowed shadow-none;
|
|
@@ -294,8 +297,7 @@
|
|
|
294
297
|
&[data-variant=ghost] {
|
|
295
298
|
@apply bg-transparent;
|
|
296
299
|
&:hover {
|
|
297
|
-
|
|
298
|
-
@apply text-inherit;
|
|
300
|
+
@apply bg-hover-surface text-inherit;
|
|
299
301
|
}
|
|
300
302
|
&[data-state=open] {
|
|
301
303
|
@apply bg-input-bg;
|
|
@@ -825,10 +827,10 @@
|
|
|
825
827
|
/* src/css/components/state.css */
|
|
826
828
|
@layer dx-components {
|
|
827
829
|
.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;
|
|
830
|
+
@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
831
|
}
|
|
830
832
|
.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!;
|
|
833
|
+
@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
834
|
}
|
|
833
835
|
.dx-selected {
|
|
834
836
|
@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 +845,6 @@
|
|
|
843
845
|
@apply data-[highlighted]:bg-current-surface data-[highlighted]:text-current-fg hover:data-[highlighted]:bg-current-surface-hover;
|
|
844
846
|
}
|
|
845
847
|
}
|
|
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
848
|
|
|
855
849
|
/* src/css/components/surface.css */
|
|
856
850
|
@layer dx-components {
|
|
@@ -858,27 +852,62 @@
|
|
|
858
852
|
@apply bg-base-surface text-base-fg;
|
|
859
853
|
--surface-bg: var(--color-base-surface);
|
|
860
854
|
}
|
|
855
|
+
.dx-deck-surface {
|
|
856
|
+
@apply bg-deck-surface text-base-fg;
|
|
857
|
+
--surface-bg: var(--color-deck-surface);
|
|
858
|
+
}
|
|
861
859
|
.dx-sidebar-surface {
|
|
862
860
|
@apply bg-sidebar-surface text-base-fg;
|
|
863
861
|
--surface-bg: var(--color-sidebar-surface);
|
|
864
862
|
}
|
|
863
|
+
.dx-header-surface {
|
|
864
|
+
@apply bg-header-surface text-base-fg;
|
|
865
|
+
--surface-bg: var(--color-header-surface);
|
|
866
|
+
}
|
|
867
|
+
.dx-card-surface {
|
|
868
|
+
@apply bg-card-surface text-base-fg;
|
|
869
|
+
--surface-bg: var(--color-card-surface);
|
|
870
|
+
}
|
|
871
|
+
.dx-group-surface {
|
|
872
|
+
@apply bg-group-surface text-base-fg;
|
|
873
|
+
--surface-bg: var(--color-group-surface);
|
|
874
|
+
}
|
|
875
|
+
.dx-input-surface {
|
|
876
|
+
@apply bg-input-surface text-base-fg;
|
|
877
|
+
--surface-bg: var(--color-input-surface);
|
|
878
|
+
}
|
|
879
|
+
.dx-toolbar-surface {
|
|
880
|
+
@apply bg-toolbar-surface text-base-fg;
|
|
881
|
+
--surface-bg: var(--color-toolbar-surface);
|
|
882
|
+
}
|
|
865
883
|
.dx-modal-surface {
|
|
866
884
|
@apply bg-modal-surface text-base-fg backdrop-blur-md;
|
|
867
885
|
--surface-bg: var(--color-modal-surface);
|
|
868
886
|
}
|
|
869
|
-
.dx-attention-surface {
|
|
870
|
-
@apply bg-attention-surface text-base-fg;
|
|
871
|
-
--surface-bg: var(--color-attention-surface);
|
|
872
|
-
}
|
|
873
887
|
.dx-popover-surface {
|
|
874
888
|
@apply bg-popover-surface text-base-fg backdrop-blur-md;
|
|
875
889
|
--surface-bg: var(--color-popover-surface);
|
|
876
890
|
}
|
|
891
|
+
.dx-attention-surface {
|
|
892
|
+
@apply bg-attention-surface text-base-fg;
|
|
893
|
+
--surface-bg: var(--color-attention-surface);
|
|
894
|
+
}
|
|
877
895
|
}
|
|
878
896
|
@layer dx-tokens {
|
|
897
|
+
.dx-base-surface,
|
|
898
|
+
.dx-deck-surface,
|
|
899
|
+
.dx-sidebar-surface,
|
|
900
|
+
.dx-header-surface,
|
|
901
|
+
.dx-card-surface,
|
|
902
|
+
.dx-group-surface,
|
|
903
|
+
.dx-input-surface,
|
|
904
|
+
.dx-toolbar-surface,
|
|
879
905
|
.dx-modal-surface,
|
|
880
|
-
.dx-popover-surface
|
|
906
|
+
.dx-popover-surface,
|
|
907
|
+
.dx-attention-surface,
|
|
908
|
+
.dx-main-sidebar {
|
|
881
909
|
--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) );
|
|
910
|
+
--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
911
|
--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
912
|
--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
913
|
}
|
|
@@ -892,8 +921,8 @@
|
|
|
892
921
|
user-select: none;
|
|
893
922
|
}
|
|
894
923
|
.dx-tag--anchor {
|
|
895
|
-
@apply inline cursor-pointer px-[4px] py-0.5;
|
|
896
|
-
@apply bg-input-surface ring ring-neutral-border rounded-sm;
|
|
924
|
+
@apply inline-block cursor-pointer px-[4px] py-0.5;
|
|
925
|
+
@apply bg-input-surface ring-inset ring ring-neutral-border rounded-sm;
|
|
897
926
|
&:hover {
|
|
898
927
|
@apply bg-hover-surface;
|
|
899
928
|
}
|
|
@@ -1318,7 +1347,7 @@
|
|
|
1318
1347
|
@apply w-full max-w-card-max-width;
|
|
1319
1348
|
}
|
|
1320
1349
|
.dx-card-popover {
|
|
1321
|
-
@apply inline-card-max-width bg-
|
|
1350
|
+
@apply inline-card-max-width bg-popover-surface;
|
|
1322
1351
|
max-width: min(var(--radix-popper-available-width), var(--spacing-card-max-width));
|
|
1323
1352
|
max-height: min(var(--radix-popper-available-height), var(--spacing-card-max-height));
|
|
1324
1353
|
}
|