ixia-ui-react 1.4.1 → 1.4.3
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/index.d.ts +6 -6
- package/dist/index.js +100 -93
- package/dist/index.js.map +1 -1
- package/dist/themes/hogarth.css +64 -0
- package/dist/themes/mabel.css +63 -0
- package/dist/themes/maculata.css +63 -0
- package/dist/themes/monadelpha.css +63 -0
- package/dist/themes/venus.css +63 -0
- package/dist/themes/viridiflora.css +63 -0
- package/package.json +9 -3
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/* Ixia 'Hogarth' brand theme: cream-gold brand, carmine-eye rose accent. Import after input.css, then set data-brand='hogarth' on <html> or any subtree. */
|
|
2
|
+
:root[data-brand='hogarth'],
|
|
3
|
+
[data-brand='hogarth'] {
|
|
4
|
+
/* Yellow is a lifted ladder: light mode needs 800 for text-safe fills. */
|
|
5
|
+
--ixia-brand-default: light-dark(var(--yellow-800), var(--yellow-500));
|
|
6
|
+
--ixia-brand-muted: light-dark(var(--yellow-900), var(--yellow-400));
|
|
7
|
+
--ixia-brand-subtle: light-dark(var(--yellow-50), var(--yellow-950));
|
|
8
|
+
--ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
|
|
9
|
+
--ixia-brand-container: light-dark(var(--yellow-100), var(--yellow-950));
|
|
10
|
+
--ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
|
|
11
|
+
--ixia-brand-container-high: light-dark(var(--yellow-200), var(--yellow-900));
|
|
12
|
+
--ixia-brand-on-container: light-dark(var(--yellow-900), var(--yellow-100));
|
|
13
|
+
--ixia-brand-on-container-muted: light-dark(var(--yellow-800), var(--yellow-300));
|
|
14
|
+
--ixia-brand-border: light-dark(var(--yellow-400), var(--yellow-700));
|
|
15
|
+
--ixia-brand-border-strong: light-dark(var(--yellow-700), var(--yellow-600));
|
|
16
|
+
--ixia-brand-shadow: light-dark(#9b6c0040, #f6cc5d59);
|
|
17
|
+
--ixia-brand-gradient: linear-gradient(
|
|
18
|
+
135deg,
|
|
19
|
+
var(--rose-900) 0%,
|
|
20
|
+
var(--yellow-600) 35%,
|
|
21
|
+
var(--yellow-400) 70%,
|
|
22
|
+
var(--yellow-100) 100%
|
|
23
|
+
);
|
|
24
|
+
--ixia-brand-gradient-subtle: linear-gradient(135deg, #eeb40029, #f9dc841f, #ffd2d914);
|
|
25
|
+
--ixia-accent-default: light-dark(var(--rose-600), var(--rose-400));
|
|
26
|
+
--ixia-accent-muted: light-dark(var(--rose-700), var(--rose-300));
|
|
27
|
+
--ixia-accent-subtle: light-dark(var(--rose-50), var(--rose-950));
|
|
28
|
+
--ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
|
|
29
|
+
--ixia-accent-container: light-dark(var(--rose-100), var(--rose-950));
|
|
30
|
+
--ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
|
|
31
|
+
--ixia-accent-container-high: light-dark(var(--rose-200), var(--rose-900));
|
|
32
|
+
--ixia-accent-on-container: light-dark(var(--rose-900), var(--rose-100));
|
|
33
|
+
--ixia-accent-on-container-muted: light-dark(var(--rose-700), var(--rose-300));
|
|
34
|
+
--ixia-accent-border: light-dark(var(--rose-300), var(--rose-700));
|
|
35
|
+
--ixia-accent-border-strong: var(--rose-500);
|
|
36
|
+
--ixia-accent-shadow: light-dark(#a4205740, #ff96af59);
|
|
37
|
+
/* Derived tokens resolve where declared, so re-bind them inside the scope. */
|
|
38
|
+
--ixia-surface-focus-ring: var(--ixia-brand-default);
|
|
39
|
+
--color-surface-focus-ring: var(--ixia-surface-focus-ring);
|
|
40
|
+
--color-brand-default: var(--ixia-brand-default);
|
|
41
|
+
--color-brand-muted: var(--ixia-brand-muted);
|
|
42
|
+
--color-brand-subtle: var(--ixia-brand-subtle);
|
|
43
|
+
--color-brand-on-default: var(--ixia-brand-on-default);
|
|
44
|
+
--color-brand-container: var(--ixia-brand-container);
|
|
45
|
+
--color-brand-container-low: var(--ixia-brand-container-low);
|
|
46
|
+
--color-brand-container-high: var(--ixia-brand-container-high);
|
|
47
|
+
--color-brand-on-container: var(--ixia-brand-on-container);
|
|
48
|
+
--color-brand-on-container-muted: var(--ixia-brand-on-container-muted);
|
|
49
|
+
--color-brand-border: var(--ixia-brand-border);
|
|
50
|
+
--color-brand-border-strong: var(--ixia-brand-border-strong);
|
|
51
|
+
--color-brand-shadow: var(--ixia-brand-shadow);
|
|
52
|
+
--color-accent-default: var(--ixia-accent-default);
|
|
53
|
+
--color-accent-muted: var(--ixia-accent-muted);
|
|
54
|
+
--color-accent-subtle: var(--ixia-accent-subtle);
|
|
55
|
+
--color-accent-on-default: var(--ixia-accent-on-default);
|
|
56
|
+
--color-accent-container: var(--ixia-accent-container);
|
|
57
|
+
--color-accent-container-low: var(--ixia-accent-container-low);
|
|
58
|
+
--color-accent-container-high: var(--ixia-accent-container-high);
|
|
59
|
+
--color-accent-on-container: var(--ixia-accent-on-container);
|
|
60
|
+
--color-accent-on-container-muted: var(--ixia-accent-on-container-muted);
|
|
61
|
+
--color-accent-border: var(--ixia-accent-border);
|
|
62
|
+
--color-accent-border-strong: var(--ixia-accent-border-strong);
|
|
63
|
+
--color-accent-shadow: var(--ixia-accent-shadow);
|
|
64
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* Ixia 'Mabel' brand theme: cerise-rose brand, jade accent. Import after input.css, then set data-brand='mabel' on <html> or any subtree. */
|
|
2
|
+
:root[data-brand='mabel'],
|
|
3
|
+
[data-brand='mabel'] {
|
|
4
|
+
--ixia-brand-default: light-dark(var(--rose-600), var(--rose-400));
|
|
5
|
+
--ixia-brand-muted: light-dark(var(--rose-700), var(--rose-300));
|
|
6
|
+
--ixia-brand-subtle: light-dark(var(--rose-50), var(--rose-950));
|
|
7
|
+
--ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
|
|
8
|
+
--ixia-brand-container: light-dark(var(--rose-100), var(--rose-950));
|
|
9
|
+
--ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
|
|
10
|
+
--ixia-brand-container-high: light-dark(var(--rose-200), var(--rose-900));
|
|
11
|
+
--ixia-brand-on-container: light-dark(var(--rose-900), var(--rose-100));
|
|
12
|
+
--ixia-brand-on-container-muted: light-dark(var(--rose-700), var(--rose-300));
|
|
13
|
+
--ixia-brand-border: light-dark(var(--rose-300), var(--rose-700));
|
|
14
|
+
--ixia-brand-border-strong: var(--rose-500);
|
|
15
|
+
--ixia-brand-shadow: light-dark(#a4205740, #ff96af59);
|
|
16
|
+
--ixia-brand-gradient: linear-gradient(
|
|
17
|
+
135deg,
|
|
18
|
+
var(--rose-900) 0%,
|
|
19
|
+
var(--rose-600) 45%,
|
|
20
|
+
var(--rose-400) 78%,
|
|
21
|
+
var(--pink-200) 100%
|
|
22
|
+
);
|
|
23
|
+
--ixia-brand-gradient-subtle: linear-gradient(135deg, #e4518129, #ff96af1f, #ffcfec14);
|
|
24
|
+
--ixia-accent-default: light-dark(var(--teal-600), var(--teal-400));
|
|
25
|
+
--ixia-accent-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
26
|
+
--ixia-accent-subtle: light-dark(var(--teal-50), var(--teal-950));
|
|
27
|
+
--ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
|
|
28
|
+
--ixia-accent-container: light-dark(var(--teal-100), var(--teal-950));
|
|
29
|
+
--ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
|
|
30
|
+
--ixia-accent-container-high: light-dark(var(--teal-200), var(--teal-900));
|
|
31
|
+
--ixia-accent-on-container: light-dark(var(--teal-900), var(--teal-100));
|
|
32
|
+
--ixia-accent-on-container-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
33
|
+
--ixia-accent-border: light-dark(var(--teal-300), var(--teal-700));
|
|
34
|
+
--ixia-accent-border-strong: var(--teal-500);
|
|
35
|
+
--ixia-accent-shadow: light-dark(#006d6540, #62d0c259);
|
|
36
|
+
/* Derived tokens resolve where declared, so re-bind them inside the scope. */
|
|
37
|
+
--ixia-surface-focus-ring: var(--ixia-brand-default);
|
|
38
|
+
--color-surface-focus-ring: var(--ixia-surface-focus-ring);
|
|
39
|
+
--color-brand-default: var(--ixia-brand-default);
|
|
40
|
+
--color-brand-muted: var(--ixia-brand-muted);
|
|
41
|
+
--color-brand-subtle: var(--ixia-brand-subtle);
|
|
42
|
+
--color-brand-on-default: var(--ixia-brand-on-default);
|
|
43
|
+
--color-brand-container: var(--ixia-brand-container);
|
|
44
|
+
--color-brand-container-low: var(--ixia-brand-container-low);
|
|
45
|
+
--color-brand-container-high: var(--ixia-brand-container-high);
|
|
46
|
+
--color-brand-on-container: var(--ixia-brand-on-container);
|
|
47
|
+
--color-brand-on-container-muted: var(--ixia-brand-on-container-muted);
|
|
48
|
+
--color-brand-border: var(--ixia-brand-border);
|
|
49
|
+
--color-brand-border-strong: var(--ixia-brand-border-strong);
|
|
50
|
+
--color-brand-shadow: var(--ixia-brand-shadow);
|
|
51
|
+
--color-accent-default: var(--ixia-accent-default);
|
|
52
|
+
--color-accent-muted: var(--ixia-accent-muted);
|
|
53
|
+
--color-accent-subtle: var(--ixia-accent-subtle);
|
|
54
|
+
--color-accent-on-default: var(--ixia-accent-on-default);
|
|
55
|
+
--color-accent-container: var(--ixia-accent-container);
|
|
56
|
+
--color-accent-container-low: var(--ixia-accent-container-low);
|
|
57
|
+
--color-accent-container-high: var(--ixia-accent-container-high);
|
|
58
|
+
--color-accent-on-container: var(--ixia-accent-on-container);
|
|
59
|
+
--color-accent-on-container-muted: var(--ixia-accent-on-container-muted);
|
|
60
|
+
--color-accent-border: var(--ixia-accent-border);
|
|
61
|
+
--color-accent-border-strong: var(--ixia-accent-border-strong);
|
|
62
|
+
--color-accent-shadow: var(--ixia-accent-shadow);
|
|
63
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* Ixia maculata brand theme (the input.css default): apricot-coral brand, jade accent. Set data-brand='maculata' to restore it inside another theme's subtree. */
|
|
2
|
+
:root[data-brand='maculata'],
|
|
3
|
+
[data-brand='maculata'] {
|
|
4
|
+
--ixia-brand-default: light-dark(var(--orange-600), var(--orange-400));
|
|
5
|
+
--ixia-brand-muted: light-dark(var(--orange-700), var(--orange-300));
|
|
6
|
+
--ixia-brand-subtle: light-dark(var(--orange-50), var(--orange-950));
|
|
7
|
+
--ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
|
|
8
|
+
--ixia-brand-container: light-dark(var(--orange-100), var(--orange-950));
|
|
9
|
+
--ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
|
|
10
|
+
--ixia-brand-container-high: light-dark(var(--orange-200), var(--orange-900));
|
|
11
|
+
--ixia-brand-on-container: light-dark(var(--orange-900), var(--orange-100));
|
|
12
|
+
--ixia-brand-on-container-muted: light-dark(var(--orange-700), var(--orange-300));
|
|
13
|
+
--ixia-brand-border: light-dark(var(--orange-300), var(--orange-700));
|
|
14
|
+
--ixia-brand-border-strong: var(--orange-500);
|
|
15
|
+
--ixia-brand-shadow: light-dark(#9e380040, #ffa06559);
|
|
16
|
+
--ixia-brand-gradient: linear-gradient(
|
|
17
|
+
135deg,
|
|
18
|
+
var(--orange-800) 0%,
|
|
19
|
+
var(--orange-500) 45%,
|
|
20
|
+
var(--amber-400) 78%,
|
|
21
|
+
var(--yellow-300) 100%
|
|
22
|
+
);
|
|
23
|
+
--ixia-brand-gradient-subtle: linear-gradient(135deg, #df640029, #eeac4a1f, #f9dc8414);
|
|
24
|
+
--ixia-accent-default: light-dark(var(--teal-600), var(--teal-400));
|
|
25
|
+
--ixia-accent-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
26
|
+
--ixia-accent-subtle: light-dark(var(--teal-50), var(--teal-950));
|
|
27
|
+
--ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
|
|
28
|
+
--ixia-accent-container: light-dark(var(--teal-100), var(--teal-950));
|
|
29
|
+
--ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
|
|
30
|
+
--ixia-accent-container-high: light-dark(var(--teal-200), var(--teal-900));
|
|
31
|
+
--ixia-accent-on-container: light-dark(var(--teal-900), var(--teal-100));
|
|
32
|
+
--ixia-accent-on-container-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
33
|
+
--ixia-accent-border: light-dark(var(--teal-300), var(--teal-700));
|
|
34
|
+
--ixia-accent-border-strong: var(--teal-500);
|
|
35
|
+
--ixia-accent-shadow: light-dark(#006d6540, #62d0c259);
|
|
36
|
+
/* Derived tokens resolve where declared, so re-bind them inside the scope. */
|
|
37
|
+
--ixia-surface-focus-ring: var(--ixia-brand-default);
|
|
38
|
+
--color-surface-focus-ring: var(--ixia-surface-focus-ring);
|
|
39
|
+
--color-brand-default: var(--ixia-brand-default);
|
|
40
|
+
--color-brand-muted: var(--ixia-brand-muted);
|
|
41
|
+
--color-brand-subtle: var(--ixia-brand-subtle);
|
|
42
|
+
--color-brand-on-default: var(--ixia-brand-on-default);
|
|
43
|
+
--color-brand-container: var(--ixia-brand-container);
|
|
44
|
+
--color-brand-container-low: var(--ixia-brand-container-low);
|
|
45
|
+
--color-brand-container-high: var(--ixia-brand-container-high);
|
|
46
|
+
--color-brand-on-container: var(--ixia-brand-on-container);
|
|
47
|
+
--color-brand-on-container-muted: var(--ixia-brand-on-container-muted);
|
|
48
|
+
--color-brand-border: var(--ixia-brand-border);
|
|
49
|
+
--color-brand-border-strong: var(--ixia-brand-border-strong);
|
|
50
|
+
--color-brand-shadow: var(--ixia-brand-shadow);
|
|
51
|
+
--color-accent-default: var(--ixia-accent-default);
|
|
52
|
+
--color-accent-muted: var(--ixia-accent-muted);
|
|
53
|
+
--color-accent-subtle: var(--ixia-accent-subtle);
|
|
54
|
+
--color-accent-on-default: var(--ixia-accent-on-default);
|
|
55
|
+
--color-accent-container: var(--ixia-accent-container);
|
|
56
|
+
--color-accent-container-low: var(--ixia-accent-container-low);
|
|
57
|
+
--color-accent-container-high: var(--ixia-accent-container-high);
|
|
58
|
+
--color-accent-on-container: var(--ixia-accent-on-container);
|
|
59
|
+
--color-accent-on-container-muted: var(--ixia-accent-on-container-muted);
|
|
60
|
+
--color-accent-border: var(--ixia-accent-border);
|
|
61
|
+
--color-accent-border-strong: var(--ixia-accent-border-strong);
|
|
62
|
+
--color-accent-shadow: var(--ixia-accent-shadow);
|
|
63
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* Ixia monadelpha brand theme: blue-violet brand, turquoise-eye teal accent. Import after input.css, then set data-brand='monadelpha' on <html> or any subtree. */
|
|
2
|
+
:root[data-brand='monadelpha'],
|
|
3
|
+
[data-brand='monadelpha'] {
|
|
4
|
+
--ixia-brand-default: light-dark(var(--indigo-600), var(--indigo-400));
|
|
5
|
+
--ixia-brand-muted: light-dark(var(--indigo-700), var(--indigo-300));
|
|
6
|
+
--ixia-brand-subtle: light-dark(var(--indigo-50), var(--indigo-950));
|
|
7
|
+
--ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
|
|
8
|
+
--ixia-brand-container: light-dark(var(--indigo-100), var(--indigo-950));
|
|
9
|
+
--ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
|
|
10
|
+
--ixia-brand-container-high: light-dark(var(--indigo-200), var(--indigo-900));
|
|
11
|
+
--ixia-brand-on-container: light-dark(var(--indigo-900), var(--indigo-100));
|
|
12
|
+
--ixia-brand-on-container-muted: light-dark(var(--indigo-700), var(--indigo-300));
|
|
13
|
+
--ixia-brand-border: light-dark(var(--indigo-300), var(--indigo-700));
|
|
14
|
+
--ixia-brand-border-strong: var(--indigo-500);
|
|
15
|
+
--ixia-brand-shadow: light-dark(#4b4db840, #a7b5ff59);
|
|
16
|
+
--ixia-brand-gradient: linear-gradient(
|
|
17
|
+
135deg,
|
|
18
|
+
var(--indigo-900) 0%,
|
|
19
|
+
var(--indigo-500) 40%,
|
|
20
|
+
var(--sky-300) 75%,
|
|
21
|
+
var(--teal-200) 100%
|
|
22
|
+
);
|
|
23
|
+
--ixia-brand-gradient-subtle: linear-gradient(135deg, #737ef929, #8cd3fd1f, #b2eee314);
|
|
24
|
+
--ixia-accent-default: light-dark(var(--teal-600), var(--teal-400));
|
|
25
|
+
--ixia-accent-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
26
|
+
--ixia-accent-subtle: light-dark(var(--teal-50), var(--teal-950));
|
|
27
|
+
--ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
|
|
28
|
+
--ixia-accent-container: light-dark(var(--teal-100), var(--teal-950));
|
|
29
|
+
--ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
|
|
30
|
+
--ixia-accent-container-high: light-dark(var(--teal-200), var(--teal-900));
|
|
31
|
+
--ixia-accent-on-container: light-dark(var(--teal-900), var(--teal-100));
|
|
32
|
+
--ixia-accent-on-container-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
33
|
+
--ixia-accent-border: light-dark(var(--teal-300), var(--teal-700));
|
|
34
|
+
--ixia-accent-border-strong: var(--teal-500);
|
|
35
|
+
--ixia-accent-shadow: light-dark(#006d6540, #62d0c259);
|
|
36
|
+
/* Derived tokens resolve where declared, so re-bind them inside the scope. */
|
|
37
|
+
--ixia-surface-focus-ring: var(--ixia-brand-default);
|
|
38
|
+
--color-surface-focus-ring: var(--ixia-surface-focus-ring);
|
|
39
|
+
--color-brand-default: var(--ixia-brand-default);
|
|
40
|
+
--color-brand-muted: var(--ixia-brand-muted);
|
|
41
|
+
--color-brand-subtle: var(--ixia-brand-subtle);
|
|
42
|
+
--color-brand-on-default: var(--ixia-brand-on-default);
|
|
43
|
+
--color-brand-container: var(--ixia-brand-container);
|
|
44
|
+
--color-brand-container-low: var(--ixia-brand-container-low);
|
|
45
|
+
--color-brand-container-high: var(--ixia-brand-container-high);
|
|
46
|
+
--color-brand-on-container: var(--ixia-brand-on-container);
|
|
47
|
+
--color-brand-on-container-muted: var(--ixia-brand-on-container-muted);
|
|
48
|
+
--color-brand-border: var(--ixia-brand-border);
|
|
49
|
+
--color-brand-border-strong: var(--ixia-brand-border-strong);
|
|
50
|
+
--color-brand-shadow: var(--ixia-brand-shadow);
|
|
51
|
+
--color-accent-default: var(--ixia-accent-default);
|
|
52
|
+
--color-accent-muted: var(--ixia-accent-muted);
|
|
53
|
+
--color-accent-subtle: var(--ixia-accent-subtle);
|
|
54
|
+
--color-accent-on-default: var(--ixia-accent-on-default);
|
|
55
|
+
--color-accent-container: var(--ixia-accent-container);
|
|
56
|
+
--color-accent-container-low: var(--ixia-accent-container-low);
|
|
57
|
+
--color-accent-container-high: var(--ixia-accent-container-high);
|
|
58
|
+
--color-accent-on-container: var(--ixia-accent-on-container);
|
|
59
|
+
--color-accent-on-container-muted: var(--ixia-accent-on-container-muted);
|
|
60
|
+
--color-accent-border: var(--ixia-accent-border);
|
|
61
|
+
--color-accent-border-strong: var(--ixia-accent-border-strong);
|
|
62
|
+
--color-accent-shadow: var(--ixia-accent-shadow);
|
|
63
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* Ixia 'Venus' brand theme: orchid-magenta brand, leaf-emerald accent. Import after input.css, then set data-brand='venus' on <html> or any subtree. */
|
|
2
|
+
:root[data-brand='venus'],
|
|
3
|
+
[data-brand='venus'] {
|
|
4
|
+
--ixia-brand-default: light-dark(var(--pink-600), var(--pink-400));
|
|
5
|
+
--ixia-brand-muted: light-dark(var(--pink-700), var(--pink-300));
|
|
6
|
+
--ixia-brand-subtle: light-dark(var(--pink-50), var(--pink-950));
|
|
7
|
+
--ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
|
|
8
|
+
--ixia-brand-container: light-dark(var(--pink-100), var(--pink-950));
|
|
9
|
+
--ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
|
|
10
|
+
--ixia-brand-container-high: light-dark(var(--pink-200), var(--pink-900));
|
|
11
|
+
--ixia-brand-on-container: light-dark(var(--pink-900), var(--pink-100));
|
|
12
|
+
--ixia-brand-on-container-muted: light-dark(var(--pink-700), var(--pink-300));
|
|
13
|
+
--ixia-brand-border: light-dark(var(--pink-300), var(--pink-700));
|
|
14
|
+
--ixia-brand-border-strong: var(--pink-500);
|
|
15
|
+
--ixia-brand-shadow: light-dark(#91317d40, #f497d659);
|
|
16
|
+
--ixia-brand-gradient: linear-gradient(
|
|
17
|
+
135deg,
|
|
18
|
+
var(--pink-900) 0%,
|
|
19
|
+
var(--pink-600) 40%,
|
|
20
|
+
var(--pink-400) 75%,
|
|
21
|
+
var(--rose-200) 100%
|
|
22
|
+
);
|
|
23
|
+
--ixia-brand-gradient-subtle: linear-gradient(135deg, #ce5eaf29, #f497d61f, #ffd2d914);
|
|
24
|
+
--ixia-accent-default: light-dark(var(--emerald-600), var(--emerald-400));
|
|
25
|
+
--ixia-accent-muted: light-dark(var(--emerald-700), var(--emerald-300));
|
|
26
|
+
--ixia-accent-subtle: light-dark(var(--emerald-50), var(--emerald-950));
|
|
27
|
+
--ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
|
|
28
|
+
--ixia-accent-container: light-dark(var(--emerald-100), var(--emerald-950));
|
|
29
|
+
--ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
|
|
30
|
+
--ixia-accent-container-high: light-dark(var(--emerald-200), var(--emerald-900));
|
|
31
|
+
--ixia-accent-on-container: light-dark(var(--emerald-900), var(--emerald-100));
|
|
32
|
+
--ixia-accent-on-container-muted: light-dark(var(--emerald-700), var(--emerald-300));
|
|
33
|
+
--ixia-accent-border: light-dark(var(--emerald-300), var(--emerald-700));
|
|
34
|
+
--ixia-accent-border-strong: var(--emerald-500);
|
|
35
|
+
--ixia-accent-shadow: light-dark(#006f4f40, #65d3a859);
|
|
36
|
+
/* Derived tokens resolve where declared, so re-bind them inside the scope. */
|
|
37
|
+
--ixia-surface-focus-ring: var(--ixia-brand-default);
|
|
38
|
+
--color-surface-focus-ring: var(--ixia-surface-focus-ring);
|
|
39
|
+
--color-brand-default: var(--ixia-brand-default);
|
|
40
|
+
--color-brand-muted: var(--ixia-brand-muted);
|
|
41
|
+
--color-brand-subtle: var(--ixia-brand-subtle);
|
|
42
|
+
--color-brand-on-default: var(--ixia-brand-on-default);
|
|
43
|
+
--color-brand-container: var(--ixia-brand-container);
|
|
44
|
+
--color-brand-container-low: var(--ixia-brand-container-low);
|
|
45
|
+
--color-brand-container-high: var(--ixia-brand-container-high);
|
|
46
|
+
--color-brand-on-container: var(--ixia-brand-on-container);
|
|
47
|
+
--color-brand-on-container-muted: var(--ixia-brand-on-container-muted);
|
|
48
|
+
--color-brand-border: var(--ixia-brand-border);
|
|
49
|
+
--color-brand-border-strong: var(--ixia-brand-border-strong);
|
|
50
|
+
--color-brand-shadow: var(--ixia-brand-shadow);
|
|
51
|
+
--color-accent-default: var(--ixia-accent-default);
|
|
52
|
+
--color-accent-muted: var(--ixia-accent-muted);
|
|
53
|
+
--color-accent-subtle: var(--ixia-accent-subtle);
|
|
54
|
+
--color-accent-on-default: var(--ixia-accent-on-default);
|
|
55
|
+
--color-accent-container: var(--ixia-accent-container);
|
|
56
|
+
--color-accent-container-low: var(--ixia-accent-container-low);
|
|
57
|
+
--color-accent-container-high: var(--ixia-accent-container-high);
|
|
58
|
+
--color-accent-on-container: var(--ixia-accent-on-container);
|
|
59
|
+
--color-accent-on-container-muted: var(--ixia-accent-on-container-muted);
|
|
60
|
+
--color-accent-border: var(--ixia-accent-border);
|
|
61
|
+
--color-accent-border-strong: var(--ixia-accent-border-strong);
|
|
62
|
+
--color-accent-shadow: var(--ixia-accent-shadow);
|
|
63
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* Ixia viridiflora brand theme: jade brand, apricot-coral accent. Import after input.css, then set data-brand='viridiflora' on <html> or any subtree. */
|
|
2
|
+
:root[data-brand='viridiflora'],
|
|
3
|
+
[data-brand='viridiflora'] {
|
|
4
|
+
--ixia-brand-default: light-dark(var(--teal-600), var(--teal-400));
|
|
5
|
+
--ixia-brand-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
6
|
+
--ixia-brand-subtle: light-dark(var(--teal-50), var(--teal-950));
|
|
7
|
+
--ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
|
|
8
|
+
--ixia-brand-container: light-dark(var(--teal-100), var(--teal-950));
|
|
9
|
+
--ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
|
|
10
|
+
--ixia-brand-container-high: light-dark(var(--teal-200), var(--teal-900));
|
|
11
|
+
--ixia-brand-on-container: light-dark(var(--teal-900), var(--teal-100));
|
|
12
|
+
--ixia-brand-on-container-muted: light-dark(var(--teal-700), var(--teal-300));
|
|
13
|
+
--ixia-brand-border: light-dark(var(--teal-300), var(--teal-700));
|
|
14
|
+
--ixia-brand-border-strong: var(--teal-500);
|
|
15
|
+
--ixia-brand-shadow: light-dark(#006d6540, #62d0c259);
|
|
16
|
+
--ixia-brand-gradient: linear-gradient(
|
|
17
|
+
135deg,
|
|
18
|
+
var(--violet-950) 0%,
|
|
19
|
+
var(--teal-700) 35%,
|
|
20
|
+
var(--teal-400) 75%,
|
|
21
|
+
var(--emerald-200) 100%
|
|
22
|
+
);
|
|
23
|
+
--ixia-brand-gradient-subtle: linear-gradient(135deg, #00a49729, #62d0c21f, #b3f0d414);
|
|
24
|
+
--ixia-accent-default: light-dark(var(--orange-600), var(--orange-400));
|
|
25
|
+
--ixia-accent-muted: light-dark(var(--orange-700), var(--orange-300));
|
|
26
|
+
--ixia-accent-subtle: light-dark(var(--orange-50), var(--orange-950));
|
|
27
|
+
--ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
|
|
28
|
+
--ixia-accent-container: light-dark(var(--orange-100), var(--orange-950));
|
|
29
|
+
--ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
|
|
30
|
+
--ixia-accent-container-high: light-dark(var(--orange-200), var(--orange-900));
|
|
31
|
+
--ixia-accent-on-container: light-dark(var(--orange-900), var(--orange-100));
|
|
32
|
+
--ixia-accent-on-container-muted: light-dark(var(--orange-700), var(--orange-300));
|
|
33
|
+
--ixia-accent-border: light-dark(var(--orange-300), var(--orange-700));
|
|
34
|
+
--ixia-accent-border-strong: var(--orange-500);
|
|
35
|
+
--ixia-accent-shadow: light-dark(#9e380040, #ffa06559);
|
|
36
|
+
/* Derived tokens resolve where declared, so re-bind them inside the scope. */
|
|
37
|
+
--ixia-surface-focus-ring: var(--ixia-brand-default);
|
|
38
|
+
--color-surface-focus-ring: var(--ixia-surface-focus-ring);
|
|
39
|
+
--color-brand-default: var(--ixia-brand-default);
|
|
40
|
+
--color-brand-muted: var(--ixia-brand-muted);
|
|
41
|
+
--color-brand-subtle: var(--ixia-brand-subtle);
|
|
42
|
+
--color-brand-on-default: var(--ixia-brand-on-default);
|
|
43
|
+
--color-brand-container: var(--ixia-brand-container);
|
|
44
|
+
--color-brand-container-low: var(--ixia-brand-container-low);
|
|
45
|
+
--color-brand-container-high: var(--ixia-brand-container-high);
|
|
46
|
+
--color-brand-on-container: var(--ixia-brand-on-container);
|
|
47
|
+
--color-brand-on-container-muted: var(--ixia-brand-on-container-muted);
|
|
48
|
+
--color-brand-border: var(--ixia-brand-border);
|
|
49
|
+
--color-brand-border-strong: var(--ixia-brand-border-strong);
|
|
50
|
+
--color-brand-shadow: var(--ixia-brand-shadow);
|
|
51
|
+
--color-accent-default: var(--ixia-accent-default);
|
|
52
|
+
--color-accent-muted: var(--ixia-accent-muted);
|
|
53
|
+
--color-accent-subtle: var(--ixia-accent-subtle);
|
|
54
|
+
--color-accent-on-default: var(--ixia-accent-on-default);
|
|
55
|
+
--color-accent-container: var(--ixia-accent-container);
|
|
56
|
+
--color-accent-container-low: var(--ixia-accent-container-low);
|
|
57
|
+
--color-accent-container-high: var(--ixia-accent-container-high);
|
|
58
|
+
--color-accent-on-container: var(--ixia-accent-on-container);
|
|
59
|
+
--color-accent-on-container-muted: var(--ixia-accent-on-container-muted);
|
|
60
|
+
--color-accent-border: var(--ixia-accent-border);
|
|
61
|
+
--color-accent-border-strong: var(--ixia-accent-border-strong);
|
|
62
|
+
--color-accent-shadow: var(--ixia-accent-shadow);
|
|
63
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ixia-ui-react",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"description": "A React component library for building polished product interfaces with composable primitives and Tailwind CSS styling.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessible-ui",
|
|
@@ -34,7 +34,13 @@
|
|
|
34
34
|
"types": "./dist/index.d.ts",
|
|
35
35
|
"import": "./dist/index.js"
|
|
36
36
|
},
|
|
37
|
-
"./styles": "./dist/styles.css"
|
|
37
|
+
"./styles": "./dist/styles.css",
|
|
38
|
+
"./themes/hogarth": "./dist/themes/hogarth.css",
|
|
39
|
+
"./themes/mabel": "./dist/themes/mabel.css",
|
|
40
|
+
"./themes/maculata": "./dist/themes/maculata.css",
|
|
41
|
+
"./themes/monadelpha": "./dist/themes/monadelpha.css",
|
|
42
|
+
"./themes/venus": "./dist/themes/venus.css",
|
|
43
|
+
"./themes/viridiflora": "./dist/themes/viridiflora.css"
|
|
38
44
|
},
|
|
39
45
|
"publishConfig": {
|
|
40
46
|
"access": "public"
|
|
@@ -42,7 +48,7 @@
|
|
|
42
48
|
"scripts": {
|
|
43
49
|
"build": "tsc -b && vp build && pnpm run build:css",
|
|
44
50
|
"build-storybook": "pnpm build:tailwind && storybook build",
|
|
45
|
-
"build:css": "node -e \"const fs=require('fs');fs.copyFileSync('src/styles/input.css','dist/styles.css')\"",
|
|
51
|
+
"build:css": "node -e \"const fs=require('fs');fs.copyFileSync('src/styles/input.css','dist/styles.css');fs.cpSync('src/styles/themes','dist/themes',{recursive:true})\"",
|
|
46
52
|
"build:tailwind": "pnpm dlx @tailwindcss/cli -i ./src/styles/input.css -o ./dist/styles.css",
|
|
47
53
|
"check": "vp check",
|
|
48
54
|
"chromatic": "pnpm dlx chromatic --project-token chpt_96e26fa06b6e511",
|