@tangible/ui 0.0.4 → 0.0.6
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/README.md +124 -27
- package/components/Accordion/Accordion.d.ts +1 -1
- package/components/Accordion/Accordion.js +93 -22
- package/components/Accordion/index.d.ts +1 -1
- package/components/Accordion/types.d.ts +20 -3
- package/components/Combobox/Combobox.js +2 -1
- package/components/Icon/Icon.js +2 -1
- package/components/Modal/Modal.js +2 -2
- package/components/MoveHandle/MoveHandle.js +13 -2
- package/components/MultiSelect/MultiSelect.js +2 -1
- package/components/Progress/Progress.js +2 -1
- package/components/Select/Select.js +2 -1
- package/components/StepList/StepList.js +2 -1
- package/components/Tabs/Tabs.js +2 -2
- package/components/Toolbar/Toolbar.js +2 -1
- package/components/Tooltip/Tooltip.js +2 -1
- package/package.json +7 -9
- package/styles/all.css +1 -1
- package/styles/all.expanded.css +107 -39
- package/styles/all.expanded.unlayered.css +107 -39
- package/styles/all.unlayered.css +1 -1
- package/styles/components/input/index.scss +2 -2
- package/styles/index.scss +14 -0
- package/styles/system/_control.scss +6 -3
- package/tui-manifest.json +23 -4
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
select
|
|
58
58
|
) {
|
|
59
59
|
// Internal tokens — read component API with fallback to primitives
|
|
60
|
-
--_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg));
|
|
60
|
+
--_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg-surface));
|
|
61
61
|
--_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg-muted));
|
|
62
62
|
--_border: var(--#{sys.$prefix}input-border, var(--#{sys.$prefix}color-border));
|
|
63
63
|
--_border-focus: var(--#{sys.$prefix}input-border-focus, var(--#{sys.$prefix}theme-primary-base));
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
// ---------------------------------------------------------------------------
|
|
216
216
|
:where(.#{sys.$prefix}interface) input[type="file"] {
|
|
217
217
|
// Internal tokens
|
|
218
|
-
--_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg));
|
|
218
|
+
--_bg: var(--#{sys.$prefix}input-bg, var(--#{sys.$prefix}color-bg-surface));
|
|
219
219
|
--_fg: var(--#{sys.$prefix}input-fg, var(--#{sys.$prefix}color-fg-muted));
|
|
220
220
|
--_border: var(--#{sys.$prefix}input-border, var(--#{sys.$prefix}color-border));
|
|
221
221
|
--_radius: var(--#{sys.$prefix}input-radius, var(--#{sys.$prefix}radius-md));
|
package/styles/index.scss
CHANGED
|
@@ -35,6 +35,9 @@
|
|
|
35
35
|
|
|
36
36
|
@include sys.emit-scale-vars(sys.$prefix, sys.$radius, sys.$font);
|
|
37
37
|
|
|
38
|
+
--#{sys.$prefix}typography-weight-normal: 400;
|
|
39
|
+
--#{sys.$prefix}typography-weight-bold: 700;
|
|
40
|
+
|
|
38
41
|
--#{sys.$prefix}typography-size: var(--#{sys.$prefix}font-size-base);
|
|
39
42
|
--#{sys.$prefix}typography-line-height: 1.4;
|
|
40
43
|
--#{sys.$prefix}typography-font-family: inherit;
|
|
@@ -82,6 +85,17 @@
|
|
|
82
85
|
text-transform: none;
|
|
83
86
|
letter-spacing: normal;
|
|
84
87
|
}
|
|
88
|
+
|
|
89
|
+
// Form input reset — WP and other hosts apply box-shadow on :focus
|
|
90
|
+
// that competes with our outline-based focus ring.
|
|
91
|
+
input,
|
|
92
|
+
textarea,
|
|
93
|
+
select {
|
|
94
|
+
&:focus,
|
|
95
|
+
&:focus-visible {
|
|
96
|
+
box-shadow: none;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
85
99
|
}
|
|
86
100
|
}
|
|
87
101
|
|
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
// --tui-control-height-sm: 32px;
|
|
22
22
|
// --tui-control-height-md: 36px;
|
|
23
23
|
// --tui-control-height-lg: 44px;
|
|
24
|
+
// --tui-control-font-size-sm: 13px; /* optional: decouple font from size tier */
|
|
25
|
+
// --tui-control-font-size-md: 13px;
|
|
26
|
+
// --tui-control-font-size-lg: 13px;
|
|
24
27
|
// }
|
|
25
28
|
//
|
|
26
29
|
// Usage:
|
|
@@ -29,7 +32,7 @@
|
|
|
29
32
|
// =============================================================================
|
|
30
33
|
|
|
31
34
|
@mixin control-sizing($prefix) {
|
|
32
|
-
--_fs: var(--#{$prefix}typography-size-md);
|
|
35
|
+
--_fs: var(--#{$prefix}control-font-size-md, var(--#{$prefix}typography-size-md));
|
|
33
36
|
--_py: var(--#{$prefix}spacing-xxs);
|
|
34
37
|
--_height: calc(2em + 2 * var(--_py));
|
|
35
38
|
|
|
@@ -38,12 +41,12 @@
|
|
|
38
41
|
min-height: var(--#{$prefix}control-height-md, var(--_height));
|
|
39
42
|
|
|
40
43
|
&.is-size-sm {
|
|
41
|
-
--_fs: var(--#{$prefix}typography-size-sm);
|
|
44
|
+
--_fs: var(--#{$prefix}control-font-size-sm, var(--#{$prefix}typography-size-sm));
|
|
42
45
|
min-height: var(--#{$prefix}control-height-sm, var(--_height));
|
|
43
46
|
}
|
|
44
47
|
|
|
45
48
|
&.is-size-lg {
|
|
46
|
-
--_fs: var(--#{$prefix}typography-size-lg);
|
|
49
|
+
--_fs: var(--#{$prefix}control-font-size-lg, var(--#{$prefix}typography-size-lg));
|
|
47
50
|
min-height: var(--#{$prefix}control-height-lg, var(--_height));
|
|
48
51
|
}
|
|
49
52
|
}
|
package/tui-manifest.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.
|
|
3
|
-
"generated": "2026-03-
|
|
2
|
+
"version": "0.0.6",
|
|
3
|
+
"generated": "2026-03-11T21:53:09.418Z",
|
|
4
4
|
"components": {
|
|
5
5
|
"Accordion": {
|
|
6
6
|
"props": {
|
|
7
|
+
"variant": {
|
|
8
|
+
"type": "\"card\" | \"flush\"",
|
|
9
|
+
"required": false,
|
|
10
|
+
"description": "Visual treatment.\n- `card` (default): Bordered cards with gap between items.\n- `flush`: Items share borders, no gap, no radius — denser layout."
|
|
11
|
+
},
|
|
7
12
|
"className": {
|
|
8
13
|
"type": "string",
|
|
9
14
|
"required": false
|
|
@@ -28,11 +33,17 @@
|
|
|
28
33
|
"--tui-accordion-bg",
|
|
29
34
|
"--tui-accordion-bg-open",
|
|
30
35
|
"--tui-accordion-border",
|
|
36
|
+
"--tui-accordion-divider",
|
|
31
37
|
"--tui-accordion-radius",
|
|
32
38
|
"--tui-accordion-padding",
|
|
39
|
+
"--tui-accordion-trigger-padding",
|
|
40
|
+
"--tui-accordion-trigger-bg",
|
|
41
|
+
"--tui-accordion-trigger-hover",
|
|
42
|
+
"--tui-accordion-panel-padding",
|
|
43
|
+
"--tui-accordion-panel-bg",
|
|
44
|
+
"--tui-accordion-panel-spacing",
|
|
33
45
|
"--tui-accordion-gap",
|
|
34
|
-
"--tui-accordion-indicator"
|
|
35
|
-
"--tui-accordion-trigger-hover"
|
|
46
|
+
"--tui-accordion-indicator"
|
|
36
47
|
],
|
|
37
48
|
"story": {
|
|
38
49
|
"title": "Components/Accordion",
|
|
@@ -834,6 +845,7 @@
|
|
|
834
845
|
"--tui-combobox-content-border",
|
|
835
846
|
"--tui-combobox-content-shadow",
|
|
836
847
|
"--tui-combobox-content-radius",
|
|
848
|
+
"--tui-combobox-option-radius",
|
|
837
849
|
"--tui-combobox-option-bg-hover",
|
|
838
850
|
"--tui-combobox-option-bg-selected"
|
|
839
851
|
],
|
|
@@ -1195,6 +1207,11 @@
|
|
|
1195
1207
|
"cssTokens": [
|
|
1196
1208
|
"--tui-modal-z",
|
|
1197
1209
|
"--tui-modal-max",
|
|
1210
|
+
"--tui-modal-spacing",
|
|
1211
|
+
"--tui-modal-offset-top",
|
|
1212
|
+
"--tui-modal-offset-bottom",
|
|
1213
|
+
"--tui-modal-offset-start",
|
|
1214
|
+
"--tui-modal-offset-end",
|
|
1198
1215
|
"--tui-modal-backdrop",
|
|
1199
1216
|
"--tui-modal-bg",
|
|
1200
1217
|
"--tui-modal-border",
|
|
@@ -1388,6 +1405,7 @@
|
|
|
1388
1405
|
"--tui-multiselect-content-border",
|
|
1389
1406
|
"--tui-multiselect-content-shadow",
|
|
1390
1407
|
"--tui-multiselect-content-radius",
|
|
1408
|
+
"--tui-multiselect-option-radius",
|
|
1391
1409
|
"--tui-multiselect-option-bg-hover",
|
|
1392
1410
|
"--tui-multiselect-option-bg-selected",
|
|
1393
1411
|
"--tui-multiselect-chip-bg",
|
|
@@ -2088,6 +2106,7 @@
|
|
|
2088
2106
|
"--tui-select-content-border",
|
|
2089
2107
|
"--tui-select-content-shadow",
|
|
2090
2108
|
"--tui-select-content-radius",
|
|
2109
|
+
"--tui-select-option-radius",
|
|
2091
2110
|
"--tui-select-option-bg-hover",
|
|
2092
2111
|
"--tui-select-option-bg-selected"
|
|
2093
2112
|
],
|