@dxos/ui-theme 0.9.1-main.c7dcc2e112 → 0.10.0
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 +11 -8
- 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 +11 -8
- 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 +7 -6
- package/src/Theme.stories.tsx +1 -1
- package/src/css/components/button.css +7 -1
- package/src/css/components/tag.css +2 -2
- package/src/css/theme/semantic.css +42 -36
- package/src/css/theme/spacing.css +6 -4
- 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,7 +33,7 @@
|
|
|
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
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; }
|
|
@@ -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;
|
|
@@ -918,8 +921,8 @@
|
|
|
918
921
|
user-select: none;
|
|
919
922
|
}
|
|
920
923
|
.dx-tag--anchor {
|
|
921
|
-
@apply inline cursor-pointer px-[4px] py-0.5;
|
|
922
|
-
@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;
|
|
923
926
|
&:hover {
|
|
924
927
|
@apply bg-hover-surface;
|
|
925
928
|
}
|