@godxjp/ui 14.0.0 → 14.0.1
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/styles/density.css +62 -0
- package/package.json +2 -1
package/dist/styles/density.css
CHANGED
|
@@ -29,3 +29,65 @@
|
|
|
29
29
|
:root[data-density="comfortable"] {
|
|
30
30
|
--scaling: 1.08;
|
|
31
31
|
}
|
|
32
|
+
|
|
33
|
+
/*
|
|
34
|
+
* A DESCENDANT density scope (`.ui-density-*` from `<PageContainer density>`) must
|
|
35
|
+
* RE-DERIVE every --scaling-tied token, not just flip --scaling. CSS substitutes
|
|
36
|
+
* `var(--scaling)` at the element that DECLARES a token, so the size tokens declared
|
|
37
|
+
* at `:root` (foundation/control/table) are baked with the ROOT --scaling and inherit
|
|
38
|
+
* as fixed values — a subtree that only sets a new --scaling can't retune them. (Same
|
|
39
|
+
* reason `.ui-scale-fixed` re-declares the whole list.) Mirror that list here, scaled
|
|
40
|
+
* by the LOCAL --scaling, so controls/spacing in the subtree actually resize. The
|
|
41
|
+
* `:root[data-density]` selectors above need ONLY --scaling: they re-declare on the
|
|
42
|
+
* same element as the :root token formulas, so those re-resolve there.
|
|
43
|
+
*
|
|
44
|
+
* density.css is a registered tier-definition file (check-control-sizing), so the
|
|
45
|
+
* `calc(var(--control-height) ± …)` tier offsets are permitted here.
|
|
46
|
+
*/
|
|
47
|
+
.ui-density-compact,
|
|
48
|
+
.ui-density-default,
|
|
49
|
+
.ui-density-comfortable {
|
|
50
|
+
--space-1: calc(0.25rem * var(--scaling));
|
|
51
|
+
--space-2: calc(0.5rem * var(--scaling));
|
|
52
|
+
--space-3: calc(0.75rem * var(--scaling));
|
|
53
|
+
--space-4: calc(1rem * var(--scaling));
|
|
54
|
+
--space-5: calc(1.25rem * var(--scaling));
|
|
55
|
+
--space-6: calc(1.5rem * var(--scaling));
|
|
56
|
+
--space-8: calc(2rem * var(--scaling));
|
|
57
|
+
--space-10: calc(2.5rem * var(--scaling));
|
|
58
|
+
--space-12: calc(3rem * var(--scaling));
|
|
59
|
+
--radius: calc(0.375rem * var(--scaling));
|
|
60
|
+
--control-height: calc(var(--control-height-default) * var(--scaling));
|
|
61
|
+
--control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
|
|
62
|
+
--control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
|
|
63
|
+
--control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
|
|
64
|
+
--control-icon-size: calc(1rem * var(--scaling));
|
|
65
|
+
--control-icon-size-sm: calc(0.875rem * var(--scaling));
|
|
66
|
+
--control-padding-x: var(--space-3);
|
|
67
|
+
--control-gap: var(--space-2);
|
|
68
|
+
--control-gap-sm: var(--space-1);
|
|
69
|
+
--checkbox-size: calc(1rem * var(--scaling));
|
|
70
|
+
--switch-width: calc(2.25rem * var(--scaling));
|
|
71
|
+
--switch-height: calc(1.25rem * var(--scaling));
|
|
72
|
+
--switch-thumb-size: calc(1rem * var(--scaling));
|
|
73
|
+
--switch-thumb-translate: calc(1rem * var(--scaling));
|
|
74
|
+
--table-row-height: calc(var(--table-row-height-default) * var(--scaling));
|
|
75
|
+
--table-cell-padding-y: var(--space-2);
|
|
76
|
+
--phi-unit: var(--space-4);
|
|
77
|
+
--space-page-x: var(--space-6);
|
|
78
|
+
--space-page-y: var(--space-6);
|
|
79
|
+
--space-section: var(--space-4);
|
|
80
|
+
--space-stack-xs: var(--space-1);
|
|
81
|
+
--space-stack-sm: var(--space-2);
|
|
82
|
+
--space-stack-md: var(--space-4);
|
|
83
|
+
--space-stack-lg: var(--space-6);
|
|
84
|
+
--space-stack-xl: var(--space-10);
|
|
85
|
+
--space-inline-xs: var(--space-1);
|
|
86
|
+
--space-inline-sm: var(--space-2);
|
|
87
|
+
--space-inline-md: var(--space-3);
|
|
88
|
+
--space-inline-lg: var(--space-4);
|
|
89
|
+
--space-chrome-x: var(--space-6);
|
|
90
|
+
--space-chrome-y: var(--space-4);
|
|
91
|
+
--space-chrome-gap: var(--space-2);
|
|
92
|
+
--field-label-gap: var(--space-2);
|
|
93
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"packageManager": "pnpm@10.29.1",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -295,6 +295,7 @@
|
|
|
295
295
|
"preview:build": "vite build --config preview/vite.config.ts",
|
|
296
296
|
"docs:sync-primitives": "node preview/scripts/sync-primitive-docs.mjs && prettier --write \"docs/primitives/**/*.tsx\"",
|
|
297
297
|
"audit": "node scripts/ui-audit.mjs",
|
|
298
|
+
"audit:examples": "node scripts/ui-audit.mjs docs",
|
|
298
299
|
"build": "tsup && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
|
|
299
300
|
"dev": "node scripts/dev.mjs",
|
|
300
301
|
"prepublishOnly": "pnpm run build",
|