@godxjp/ui 13.15.0 → 13.15.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 +51 -44
- package/package.json +1 -1
package/dist/styles/density.css
CHANGED
|
@@ -1,54 +1,61 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* DENSITY — one knob retunes φ-unit, controls, tables. Two entry points, same vars:
|
|
3
|
-
* • `<PageContainer density>` → `.ui-density-*` class (scoped
|
|
3
|
+
* • `<PageContainer density>` → `.ui-density-*` class (scoped to a descendant,
|
|
4
|
+
* wins for its subtree by proximity).
|
|
4
5
|
* • the density AXIS → `:root[data-density="*"]` on <html> (AppProvider density prop),
|
|
5
6
|
* so density cascades app-wide incl. portalled overlays. PageContainer inherits it
|
|
6
7
|
* when its `density` prop is unset (emits no class).
|
|
7
|
-
*
|
|
8
|
+
*
|
|
9
|
+
* INTENTIONALLY UNLAYERED — do NOT wrap in `@layer components`. The active
|
|
10
|
+
* tokens (--control-height, --table-row-height, --phi-unit…) get their defaults
|
|
11
|
+
* from UNLAYERED `:root` rules in tokens/components/*.css. A layered block always
|
|
12
|
+
* loses to an unlayered one regardless of specificity, so a layered
|
|
13
|
+
* `:root[data-density]` would silently never override those defaults (the axis
|
|
14
|
+
* would be a no-op on <html>). Unlayered, `:root[data-density="x"]` (0,2,0) beats
|
|
15
|
+
* the `:root` default (0,1,0) by specificity. Apps use the prop / axis, never
|
|
16
|
+
* these classes directly.
|
|
8
17
|
*/
|
|
9
18
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
19
|
+
.ui-density-compact,
|
|
20
|
+
:root[data-density="compact"] {
|
|
21
|
+
--control-height: var(--control-height-compact);
|
|
22
|
+
--control-padding-x: var(--control-padding-x-compact);
|
|
23
|
+
--table-row-height: var(--table-row-height-compact);
|
|
24
|
+
--phi-unit: var(--space-3);
|
|
25
|
+
--checkbox-size: var(--checkbox-size-compact);
|
|
26
|
+
--switch-width: var(--switch-width-compact);
|
|
27
|
+
--switch-height: var(--switch-height-compact);
|
|
28
|
+
--switch-thumb-size: var(--switch-thumb-size-compact);
|
|
29
|
+
--switch-thumb-translate: var(--switch-thumb-translate-compact);
|
|
30
|
+
--table-cell-padding-y: var(--space-1);
|
|
31
|
+
/* Tighter overlay/card chrome at compact density (12px vertical). */
|
|
32
|
+
--space-chrome-y: var(--space-3);
|
|
33
|
+
}
|
|
26
34
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
35
|
+
.ui-density-default,
|
|
36
|
+
:root[data-density="default"] {
|
|
37
|
+
--control-height: var(--control-height-default);
|
|
38
|
+
--control-padding-x: var(--control-padding-x-default);
|
|
39
|
+
--table-row-height: var(--table-row-height-default);
|
|
40
|
+
--table-cell-padding-y: var(--space-2);
|
|
41
|
+
}
|
|
34
42
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
43
|
+
.ui-density-comfortable,
|
|
44
|
+
:root[data-density="comfortable"] {
|
|
45
|
+
--control-height: var(--control-height-comfortable);
|
|
46
|
+
/* Comfortable steps 44 → 36 → 32 (design spacing-density), steeper than the
|
|
47
|
+
* default 4px step so sm/xs aren't left 4px too tall. */
|
|
48
|
+
--control-height-sm: calc(var(--control-height) - 0.5rem);
|
|
49
|
+
--control-height-xs: calc(var(--control-height) - 0.75rem);
|
|
50
|
+
--control-padding-x: var(--control-padding-x-comfortable);
|
|
51
|
+
--table-row-height: var(--table-row-height-comfortable);
|
|
52
|
+
--phi-unit: var(--space-6);
|
|
53
|
+
--checkbox-size: var(--checkbox-size-comfortable);
|
|
54
|
+
--switch-width: var(--switch-width-comfortable);
|
|
55
|
+
--switch-height: var(--switch-height-comfortable);
|
|
56
|
+
--switch-thumb-size: var(--switch-thumb-size-comfortable);
|
|
57
|
+
--switch-thumb-translate: var(--switch-thumb-translate-comfortable);
|
|
58
|
+
--table-cell-padding-y: var(--space-2);
|
|
59
|
+
/* Roomier overlay/card chrome at comfortable density (24px vertical). */
|
|
60
|
+
--space-chrome-y: var(--space-6);
|
|
54
61
|
}
|