@accelint/design-toolkit 2.2.1 → 2.3.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/README.md +1 -0
- package/dist/components/accordion/index.d.ts +2 -2
- package/dist/components/accordion/index.js +1 -1
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/accordion/styles.d.ts +3 -39
- package/dist/components/accordion/styles.js +1 -1
- package/dist/components/accordion/styles.js.map +1 -1
- package/dist/components/avatar/index.d.ts +4 -4
- package/dist/components/badge/index.d.ts +2 -2
- package/dist/components/box/index.d.ts +3 -3
- package/dist/components/button/index.d.ts +35 -23
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/styles.d.ts +297 -0
- package/dist/components/button/styles.js +2 -0
- package/dist/components/button/styles.js.map +1 -0
- package/dist/components/button/types.d.ts +14 -0
- package/dist/components/button/types.js +2 -0
- package/dist/components/button/types.js.map +1 -0
- package/dist/components/checkbox/index.d.ts +2 -2
- package/dist/components/checkbox/index.js +1 -1
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/chip/index.d.ts +25 -48
- package/dist/components/chip/index.js +1 -1
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/chip/styles.d.ts +250 -0
- package/dist/components/chip/styles.js +2 -0
- package/dist/components/chip/styles.js.map +1 -0
- package/dist/components/chip/types.d.ts +20 -0
- package/dist/components/chip/types.js +2 -0
- package/dist/components/chip/types.js.map +1 -0
- package/dist/components/classification-badge/index.d.ts +15 -16
- package/dist/components/classification-badge/index.js +1 -1
- package/dist/components/classification-badge/index.js.map +1 -1
- package/dist/components/classification-badge/styles.d.ts +51 -0
- package/dist/components/classification-badge/styles.js +2 -0
- package/dist/components/classification-badge/styles.js.map +1 -0
- package/dist/components/classification-badge/types.d.ts +9 -0
- package/dist/components/classification-badge/types.js +2 -0
- package/dist/components/classification-badge/types.js.map +1 -0
- package/dist/components/classification-banner/index.d.ts +15 -16
- package/dist/components/classification-banner/index.js +1 -2
- package/dist/components/classification-banner/index.js.map +1 -1
- package/dist/components/classification-banner/styles.d.ts +38 -0
- package/dist/components/classification-banner/styles.js +2 -0
- package/dist/components/classification-banner/styles.js.map +1 -0
- package/dist/components/classification-banner/types.d.ts +9 -0
- package/dist/components/classification-banner/types.js +2 -0
- package/dist/components/classification-banner/types.js.map +1 -0
- package/dist/components/combobox/index.js +1 -1
- package/dist/components/combobox/index.js.map +1 -1
- package/dist/components/date-field/index.js +1 -1
- package/dist/components/date-field/index.js.map +1 -1
- package/dist/components/dialog/index.d.ts +5 -5
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/icon/index.d.ts +2 -2
- package/dist/components/icon/types.d.ts +3 -5
- package/dist/components/label/index.d.ts +10 -7
- package/dist/components/label/index.js +1 -1
- package/dist/components/label/index.js.map +1 -1
- package/dist/components/label/styles.d.ts +5 -0
- package/dist/components/label/styles.js +2 -0
- package/dist/components/label/styles.js.map +1 -0
- package/dist/components/label/types.d.ts +10 -0
- package/dist/components/label/types.js +2 -0
- package/dist/components/label/types.js.map +1 -0
- package/dist/components/options/index.d.ts +2 -2
- package/dist/components/options-item/index.js +1 -1
- package/dist/components/options-item/index.js.map +1 -1
- package/dist/components/popover/styles.d.ts +3 -3
- package/dist/components/query-builder/index.js +1 -1
- package/dist/components/query-builder/index.js.map +1 -1
- package/dist/components/query-builder/value-editor.js +1 -1
- package/dist/components/query-builder/value-editor.js.map +1 -1
- package/dist/components/radio/index.d.ts +11 -9
- package/dist/components/radio/index.js +1 -1
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/styles.d.ts +53 -0
- package/dist/components/radio/styles.js +2 -0
- package/dist/components/radio/styles.js.map +1 -0
- package/dist/components/radio/types.d.ts +21 -0
- package/dist/components/radio/types.js +2 -0
- package/dist/components/radio/types.js.map +1 -0
- package/dist/components/search-field/index.js +1 -1
- package/dist/components/search-field/index.js.map +1 -1
- package/dist/components/switch/index.d.ts +10 -7
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/styles.d.ts +41 -0
- package/dist/components/switch/styles.js +2 -0
- package/dist/components/switch/styles.js.map +1 -0
- package/dist/components/switch/types.d.ts +13 -0
- package/dist/components/switch/types.js +2 -0
- package/dist/components/switch/types.js.map +1 -0
- package/dist/components/tabs/index.js +1 -1
- package/dist/components/tabs/index.js.map +1 -1
- package/dist/components/text-area-field/index.d.ts +19 -0
- package/dist/components/text-area-field/index.js +2 -0
- package/dist/components/text-area-field/index.js.map +1 -0
- package/dist/components/text-area-field/styles.d.ts +113 -0
- package/dist/components/text-area-field/styles.js +2 -0
- package/dist/components/text-area-field/styles.js.map +1 -0
- package/dist/components/text-area-field/types.d.ts +23 -0
- package/dist/components/text-area-field/types.js +2 -0
- package/dist/components/text-area-field/types.js.map +1 -0
- package/dist/components/text-field/index.js +1 -1
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/components/tooltip/index.d.ts +2 -2
- package/dist/index.css +122 -252
- package/dist/index.d.ts +25 -11
- package/dist/index.js +1 -1
- package/dist/lib/react.js.map +1 -1
- package/dist/lib/utils.js +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +873 -754
- package/dist/tokens/generated/themes.css +147 -0
- package/dist/tokens/generated/themes.d.ts +2 -0
- package/dist/tokens/generated/tokens.css +119 -0
- package/dist/tokens/generated/tokens.d.ts +108 -0
- package/dist/tokens/generated/tokens.js +2 -0
- package/dist/tokens/generated/tokens.js.map +1 -0
- package/package.json +6 -6
- package/dist/components/floating-button/index.d.ts +0 -18
- package/dist/components/floating-button/index.js +0 -2
- package/dist/components/floating-button/index.js.map +0 -1
- package/dist/components/icon-button/index.d.ts +0 -20
- package/dist/components/icon-button/index.js +0 -2
- package/dist/components/icon-button/index.js.map +0 -1
- package/dist/components/text-area/index.d.ts +0 -30
- package/dist/components/text-area/index.js +0 -2
- package/dist/components/text-area/index.js.map +0 -1
- package/dist/components/toggle-icon-button/index.d.ts +0 -20
- package/dist/components/toggle-icon-button/index.js +0 -2
- package/dist/components/toggle-icon-button/index.js.map +0 -1
@@ -0,0 +1,147 @@
|
|
1
|
+
/*
|
2
|
+
This file is generated by the generate-tokens.mjs script.
|
3
|
+
Do not edit this file manually.
|
4
|
+
*/
|
5
|
+
|
6
|
+
@import './tokens.css';
|
7
|
+
|
8
|
+
@theme {
|
9
|
+
/* Remove the default Tailwind styles. */
|
10
|
+
--color-* : initial;
|
11
|
+
--font-* : initial;
|
12
|
+
--radius-* : initial;
|
13
|
+
--shadow-* : initial;
|
14
|
+
--spacing-* : initial;
|
15
|
+
--text-* : initial;
|
16
|
+
}
|
17
|
+
|
18
|
+
@theme {
|
19
|
+
/** Colors (semantic) **/
|
20
|
+
--color-surface-default: var(--colors-neutral-10, #0b0b0b);
|
21
|
+
--color-surface-raised: var(--colors-neutral-09, #222222);
|
22
|
+
--color-surface-overlay: var(--colors-neutral-08, #2f2f31);
|
23
|
+
--color-transparent-dark: var(--colors-alpha-black-02, rgba(0, 0, 0, 0.4));
|
24
|
+
--color-transparent-light: var(--colors-alpha-white-01, rgba(255, 255, 255, 0.08));
|
25
|
+
--color-interactive: var(--colors-neutral-05, #565656);
|
26
|
+
--color-interactive-default: var(--colors-neutral-02, #e6e6e6);
|
27
|
+
--color-interactive-hover: var(--colors-neutral-01, #ffffff);
|
28
|
+
--color-interactive-hover-light: var(--colors-neutral-03, #898989);
|
29
|
+
--color-interactive-hover-dark: var(--colors-neutral-08, #2f2f31);
|
30
|
+
--color-interactive-disabled: var(--colors-neutral-07, #383838);
|
31
|
+
--color-static-light: var(--colors-neutral-07, #383838);
|
32
|
+
--color-static-dark: var(--colors-neutral-09, #222222);
|
33
|
+
--color-highlight: var(--colors-highlight-primary-03, #28f5be);
|
34
|
+
--color-highlight-bold: var(--colors-highlight-primary-03, #28f5be);
|
35
|
+
--color-highlight-hover: var(--colors-highlight-primary-04, #189372);
|
36
|
+
--color-highlight-subtle: var(--colors-highlight-primary-05, #0a3d30);
|
37
|
+
--color-info: var(--colors-neutral-04, #686868);
|
38
|
+
--color-info-bold: var(--colors-utility-info-03, #686868);
|
39
|
+
--color-info-hover: var(--colors-utility-info-04, #424244);
|
40
|
+
--color-info-subtle: var(--colors-utility-info-05, #222222);
|
41
|
+
--color-advisory: var(--colors-utility-advisory-03, #62a6ff);
|
42
|
+
--color-advisory-bold: var(--colors-utility-advisory-03, #62a6ff);
|
43
|
+
--color-advisory-hover: var(--colors-utility-advisory-04, #3a6499);
|
44
|
+
--color-advisory-subtle: var(--colors-utility-advisory-05, #142133);
|
45
|
+
--color-normal: var(--colors-utility-normal-03, #30d27e);
|
46
|
+
--color-normal-bold: var(--colors-utility-normal-03, #30d27e);
|
47
|
+
--color-normal-hover: var(--colors-utility-normal-04, #1c7e4c);
|
48
|
+
--color-normal-subtle: var(--colors-utility-normal-05, #0a2a19);
|
49
|
+
--color-serious: var(--colors-utility-serious-03, #fca400);
|
50
|
+
--color-serious-bold: var(--colors-utility-serious-03, #fca400);
|
51
|
+
--color-serious-hover: var(--colors-utility-serious-04, #976201);
|
52
|
+
--color-serious-subtle: var(--colors-utility-serious-05, #322100);
|
53
|
+
--color-critical: var(--colors-utility-critical-03, #d4231d);
|
54
|
+
--color-critical-bold: var(--colors-utility-critical-03, #d4231d);
|
55
|
+
--color-critical-hover: var(--colors-utility-critical-04, #7f1511);
|
56
|
+
--color-critical-subtle: var(--colors-utility-critical-05, #2a0706);
|
57
|
+
--color-default-light: var(--colors-neutral-01, #ffffff);
|
58
|
+
--color-default-dark: var(--colors-neutral-03, #898989);
|
59
|
+
--color-inverse-dark: var(--colors-neutral-07, #383838);
|
60
|
+
--color-inverse-light: var(--colors-neutral-09, #222222);
|
61
|
+
--color-disabled: var(--colors-neutral-05, #565656);
|
62
|
+
--color-classification-missing: var(--colors-neutral-10, #0b0b0b);
|
63
|
+
--color-classification-unclass: var(--colors-classification-unclass, #007A33);
|
64
|
+
--color-classification-cui: var(--colors-classification-cui, #502b85);
|
65
|
+
--color-classification-confidential: var(--colors-classification-confidential, #0033a0);
|
66
|
+
--color-classification-secret: var(--colors-classification-secret, #c8102e);
|
67
|
+
--color-classification-top-secret: var(--colors-classification-top-secret, #ff8c00);
|
68
|
+
--color-classification-ts-sci: var(--colors-classification-ts-sci, #fce83a);
|
69
|
+
}
|
70
|
+
|
71
|
+
@theme {
|
72
|
+
/** Typography **/
|
73
|
+
--typography-header-xxl-size: var(--typography-header-xxl-size);
|
74
|
+
--typography-header-xxl-height: var(--typography-header-xxl-height);
|
75
|
+
--typography-header-xl-size: var(--typography-header-xl-size);
|
76
|
+
--typography-header-xl-height: var(--typography-header-xl-height);
|
77
|
+
--typography-header-l-size: var(--typography-header-l-size);
|
78
|
+
--typography-header-l-height: var(--typography-header-l-height);
|
79
|
+
--typography-header-m-size: var(--typography-header-m-size);
|
80
|
+
--typography-header-m-height: var(--typography-header-m-height);
|
81
|
+
--typography-header-s-size: var(--typography-header-s-size);
|
82
|
+
--typography-header-s-height: var(--typography-header-s-height);
|
83
|
+
--typography-header-xs-size: var(--typography-header-xs-size);
|
84
|
+
--typography-header-xs-height: var(--typography-header-xs-height);
|
85
|
+
--typography-body-l-size: var(--typography-body-l-size);
|
86
|
+
--typography-body-l-height: var(--typography-body-l-height);
|
87
|
+
--typography-body-m-size: var(--typography-body-m-size);
|
88
|
+
--typography-body-m-height: var(--typography-body-m-height);
|
89
|
+
--typography-body-s-size: var(--typography-body-s-size);
|
90
|
+
--typography-body-s-height: var(--typography-body-s-height);
|
91
|
+
--typography-body-xs-size: var(--typography-body-xs-size);
|
92
|
+
--typography-body-xs-height: var(--typography-body-xs-height);
|
93
|
+
--typography-body-xxs-size: var(--typography-body-xxs-size);
|
94
|
+
--typography-body-xxs-height: var(--typography-body-xxs-height);
|
95
|
+
--typography-button-l-size: var(--typography-button-l-size);
|
96
|
+
--typography-button-l-height: var(--typography-button-l-height);
|
97
|
+
--typography-button-m-size: var(--typography-button-m-size);
|
98
|
+
--typography-button-m-height: var(--typography-button-m-height);
|
99
|
+
--typography-button-s-size: var(--typography-button-s-size);
|
100
|
+
--typography-button-s-height: var(--typography-button-s-height);
|
101
|
+
--typography-button-xs-size: var(--typography-button-xs-size);
|
102
|
+
--typography-button-xs-height: var(--typography-button-xs-height);
|
103
|
+
}
|
104
|
+
|
105
|
+
@theme {
|
106
|
+
/** Spacing **/
|
107
|
+
--spacing-0: var(--spacing-0);
|
108
|
+
--spacing-none: var(--spacing-none);
|
109
|
+
--spacing-xxs: var(--spacing-xxs);
|
110
|
+
--spacing-xs: var(--spacing-xs);
|
111
|
+
--spacing-s: var(--spacing-s);
|
112
|
+
--spacing-m: var(--spacing-m);
|
113
|
+
--spacing-l: var(--spacing-l);
|
114
|
+
--spacing-xl: var(--spacing-xl);
|
115
|
+
--spacing-xxl: var(--spacing-xxl);
|
116
|
+
--spacing-oversized: var(--spacing-oversized);
|
117
|
+
}
|
118
|
+
|
119
|
+
@theme {
|
120
|
+
/** Radius **/
|
121
|
+
--radius-none: var(--radius-none);
|
122
|
+
--radius-small: var(--radius-small);
|
123
|
+
--radius-medium: var(--radius-medium);
|
124
|
+
--radius-large: var(--radius-large);
|
125
|
+
--radius-round: var(--radius-round);
|
126
|
+
}
|
127
|
+
|
128
|
+
@theme {
|
129
|
+
/** Shadows **/
|
130
|
+
--shadows-elevation-default: var(--shadows-elevation-default);
|
131
|
+
--shadows-elevation-overlay: var(--shadows-elevation-overlay);
|
132
|
+
--shadows-elevation-raised: var(--shadows-elevation-raised);
|
133
|
+
}
|
134
|
+
|
135
|
+
@theme {
|
136
|
+
/** Font **/
|
137
|
+
--font-primary: var(--font-primary);
|
138
|
+
--font-display: var(--font-display);
|
139
|
+
}
|
140
|
+
|
141
|
+
@theme {
|
142
|
+
/** Icons **/
|
143
|
+
--icons-size-l: var(--icons-size-l);
|
144
|
+
--icons-size-m: var(--icons-size-m);
|
145
|
+
--icons-size-s: var(--icons-size-s);
|
146
|
+
--icons-size-xs: var(--icons-size-xs);
|
147
|
+
}
|
@@ -0,0 +1,119 @@
|
|
1
|
+
:root {
|
2
|
+
--colors-neutral-10: #0b0b0b;
|
3
|
+
--colors-neutral-11: #FF0000;
|
4
|
+
--colors-neutral-01: #ffffff;
|
5
|
+
--colors-neutral-02: #e6e6e6;
|
6
|
+
--colors-neutral-03: #898989;
|
7
|
+
--colors-neutral-04: #686868;
|
8
|
+
--colors-neutral-05: #565656;
|
9
|
+
--colors-neutral-06: #424242;
|
10
|
+
--colors-neutral-07: #383838;
|
11
|
+
--colors-neutral-08: #2f2f31;
|
12
|
+
--colors-neutral-09: #222222;
|
13
|
+
--colors-alpha-black-01: rgba(0, 0, 0, 0.08);
|
14
|
+
--colors-alpha-black-02: rgba(0, 0, 0, 0.4);
|
15
|
+
--colors-alpha-black-03: rgba(0, 0, 0, 0.8);
|
16
|
+
--colors-alpha-white-01: rgba(255, 255, 255, 0.08);
|
17
|
+
--colors-alpha-white-02: rgba(255, 255, 255, 0.4);
|
18
|
+
--colors-alpha-white-03: rgba(255, 255, 255, 0.8);
|
19
|
+
--colors-highlight-primary-01: #c9fdef;
|
20
|
+
--colors-highlight-primary-02: #7df9d8;
|
21
|
+
--colors-highlight-primary-03: #28f5be;
|
22
|
+
--colors-highlight-primary-04: #189372;
|
23
|
+
--colors-highlight-primary-05: #0a3d30;
|
24
|
+
--colors-highlight-secondary-01: #c9f6fd;
|
25
|
+
--colors-highlight-secondary-02: #7ee9f9;
|
26
|
+
--colors-highlight-secondary-03: #28dcf5;
|
27
|
+
--colors-highlight-secondary-04: #188493;
|
28
|
+
--colors-highlight-secondary-05: #0a373d;
|
29
|
+
--colors-highlight-tertiary-01: #f9c5e2;
|
30
|
+
--colors-highlight-tertiary-02: #f174b9;
|
31
|
+
--colors-highlight-tertiary-03: #e8178a;
|
32
|
+
--colors-highlight-tertiary-04: #8a0e53;
|
33
|
+
--colors-highlight-tertiary-05: #3a0623;
|
34
|
+
--colors-utility-info-01: #e6e6e6;
|
35
|
+
--colors-utility-info-02: #898989;
|
36
|
+
--colors-utility-info-03: #686868;
|
37
|
+
--colors-utility-info-04: #424244;
|
38
|
+
--colors-utility-info-05: #222222;
|
39
|
+
--colors-utility-advisory-01: #e0edff;
|
40
|
+
--colors-utility-advisory-02: #a1caff;
|
41
|
+
--colors-utility-advisory-03: #62a6ff;
|
42
|
+
--colors-utility-advisory-04: #3a6499;
|
43
|
+
--colors-utility-advisory-05: #142133;
|
44
|
+
--colors-utility-normal-01: #d6f6e5;
|
45
|
+
--colors-utility-normal-02: #82e4b2;
|
46
|
+
--colors-utility-normal-03: #30d27e;
|
47
|
+
--colors-utility-normal-04: #1c7e4c;
|
48
|
+
--colors-utility-normal-05: #0a2a19;
|
49
|
+
--colors-utility-serious-01: #feedcc;
|
50
|
+
--colors-utility-serious-02: #fdc865;
|
51
|
+
--colors-utility-serious-03: #fca400;
|
52
|
+
--colors-utility-serious-04: #976201;
|
53
|
+
--colors-utility-serious-05: #322100;
|
54
|
+
--colors-utility-critical-01: #f6d3d2;
|
55
|
+
--colors-utility-critical-02: #e57b77;
|
56
|
+
--colors-utility-critical-03: #d4231d;
|
57
|
+
--colors-utility-critical-04: #7f1511;
|
58
|
+
--colors-utility-critical-05: #2a0706;
|
59
|
+
--colors-classification-unclass: #007A33;
|
60
|
+
--colors-classification-cui: #502b85;
|
61
|
+
--colors-classification-confidential: #0033a0;
|
62
|
+
--colors-classification-secret: #c8102e;
|
63
|
+
--colors-classification-top-secret: #ff8c00;
|
64
|
+
--colors-classification-ts-sci: #fce83a;
|
65
|
+
--typography-header-xxl-size: 32px;
|
66
|
+
--typography-header-xxl-height: 40px;
|
67
|
+
--typography-header-xl-size: 24px;
|
68
|
+
--typography-header-xl-height: 28px;
|
69
|
+
--typography-header-l-size: 20px;
|
70
|
+
--typography-header-l-height: 24px;
|
71
|
+
--typography-header-m-size: 14px;
|
72
|
+
--typography-header-m-height: 20px;
|
73
|
+
--typography-header-s-size: 12px;
|
74
|
+
--typography-header-s-height: 16px;
|
75
|
+
--typography-header-xs-size: 10px;
|
76
|
+
--typography-header-xs-height: 12px;
|
77
|
+
--typography-body-l-size: 16px;
|
78
|
+
--typography-body-l-height: 24px;
|
79
|
+
--typography-body-m-size: 14px;
|
80
|
+
--typography-body-m-height: 20px;
|
81
|
+
--typography-body-s-size: 12px;
|
82
|
+
--typography-body-s-height: 16px;
|
83
|
+
--typography-body-xs-size: 10px;
|
84
|
+
--typography-body-xs-height: 12px;
|
85
|
+
--typography-body-xxs-size: 9px;
|
86
|
+
--typography-body-xxs-height: 12px;
|
87
|
+
--typography-button-l-size: 16px;
|
88
|
+
--typography-button-l-height: 24px;
|
89
|
+
--typography-button-m-size: 14px;
|
90
|
+
--typography-button-m-height: 20px;
|
91
|
+
--typography-button-s-size: 12px;
|
92
|
+
--typography-button-s-height: 16px;
|
93
|
+
--typography-button-xs-size: 10px;
|
94
|
+
--typography-button-xs-height: 12px;
|
95
|
+
--spacing-0: 0px;
|
96
|
+
--spacing-none: unset;
|
97
|
+
--spacing-xxs: 2px;
|
98
|
+
--spacing-xs: 4px;
|
99
|
+
--spacing-s: 8px;
|
100
|
+
--spacing-m: 12px;
|
101
|
+
--spacing-l: 16px;
|
102
|
+
--spacing-xl: 24px;
|
103
|
+
--spacing-xxl: 40px;
|
104
|
+
--spacing-oversized: 80px;
|
105
|
+
--radius-none: 0px;
|
106
|
+
--radius-small: 2px;
|
107
|
+
--radius-medium: 4px;
|
108
|
+
--radius-large: 8px;
|
109
|
+
--radius-round: 80px;
|
110
|
+
--shadows-elevation-default: initial;
|
111
|
+
--shadows-elevation-overlay: 0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14);
|
112
|
+
--shadows-elevation-raised: 0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14);
|
113
|
+
--font-primary: "Roboto Flex", sans-serif;
|
114
|
+
--font-display: "Roboto Mono", monospace;
|
115
|
+
--icons-size-l: var(--spacing-xl);
|
116
|
+
--icons-size-m: 20px;
|
117
|
+
--icons-size-s: var(--spacing-l);
|
118
|
+
--icons-size-xs: var(--spacing-m);
|
119
|
+
}
|
@@ -0,0 +1,108 @@
|
|
1
|
+
type RGBAColor = [number, number, number, number];
|
2
|
+
/** Semantic Colors **/
|
3
|
+
declare const colorSurfaceDefault: RGBAColor;
|
4
|
+
declare const colorSurfaceRaised: RGBAColor;
|
5
|
+
declare const colorSurfaceOverlay: RGBAColor;
|
6
|
+
declare const colorTransparentDark: RGBAColor;
|
7
|
+
declare const colorTransparentLight: RGBAColor;
|
8
|
+
declare const colorInteractive: RGBAColor;
|
9
|
+
declare const colorInteractiveDefault: RGBAColor;
|
10
|
+
declare const colorInteractiveHover: RGBAColor;
|
11
|
+
declare const colorInteractiveHoverLight: RGBAColor;
|
12
|
+
declare const colorInteractiveHoverDark: RGBAColor;
|
13
|
+
declare const colorInteractiveDisabled: RGBAColor;
|
14
|
+
declare const colorStaticLight: RGBAColor;
|
15
|
+
declare const colorStaticDark: RGBAColor;
|
16
|
+
declare const colorHighlight: RGBAColor;
|
17
|
+
declare const colorHighlightBold: RGBAColor;
|
18
|
+
declare const colorHighlightHover: RGBAColor;
|
19
|
+
declare const colorHighlightSubtle: RGBAColor;
|
20
|
+
declare const colorInfo: RGBAColor;
|
21
|
+
declare const colorInfoBold: RGBAColor;
|
22
|
+
declare const colorInfoHover: RGBAColor;
|
23
|
+
declare const colorInfoSubtle: RGBAColor;
|
24
|
+
declare const colorAdvisory: RGBAColor;
|
25
|
+
declare const colorAdvisoryBold: RGBAColor;
|
26
|
+
declare const colorAdvisoryHover: RGBAColor;
|
27
|
+
declare const colorAdvisorySubtle: RGBAColor;
|
28
|
+
declare const colorNormal: RGBAColor;
|
29
|
+
declare const colorNormalBold: RGBAColor;
|
30
|
+
declare const colorNormalHover: RGBAColor;
|
31
|
+
declare const colorNormalSubtle: RGBAColor;
|
32
|
+
declare const colorSerious: RGBAColor;
|
33
|
+
declare const colorSeriousBold: RGBAColor;
|
34
|
+
declare const colorSeriousHover: RGBAColor;
|
35
|
+
declare const colorSeriousSubtle: RGBAColor;
|
36
|
+
declare const colorCritical: RGBAColor;
|
37
|
+
declare const colorCriticalBold: RGBAColor;
|
38
|
+
declare const colorCriticalHover: RGBAColor;
|
39
|
+
declare const colorCriticalSubtle: RGBAColor;
|
40
|
+
declare const colorDefaultLight: RGBAColor;
|
41
|
+
declare const colorDefaultDark: RGBAColor;
|
42
|
+
declare const colorInverseDark: RGBAColor;
|
43
|
+
declare const colorInverseLight: RGBAColor;
|
44
|
+
declare const colorDisabled: RGBAColor;
|
45
|
+
declare const colorClassificationMissing: RGBAColor;
|
46
|
+
declare const colorClassificationUnclass: RGBAColor;
|
47
|
+
declare const colorClassificationCui: RGBAColor;
|
48
|
+
declare const colorClassificationConfidential: RGBAColor;
|
49
|
+
declare const colorClassificationSecret: RGBAColor;
|
50
|
+
declare const colorClassificationTopSecret: RGBAColor;
|
51
|
+
declare const colorClassificationTsSci: RGBAColor;
|
52
|
+
/** Other Design Tokens **/
|
53
|
+
declare const typographyHeaderXxlSize = 32;
|
54
|
+
declare const typographyHeaderXxlHeight = 40;
|
55
|
+
declare const typographyHeaderXlSize = 24;
|
56
|
+
declare const typographyHeaderXlHeight = 28;
|
57
|
+
declare const typographyHeaderLSize = 20;
|
58
|
+
declare const typographyHeaderLHeight = 24;
|
59
|
+
declare const typographyHeaderMSize = 14;
|
60
|
+
declare const typographyHeaderMHeight = 20;
|
61
|
+
declare const typographyHeaderSSize = 12;
|
62
|
+
declare const typographyHeaderSHeight = 16;
|
63
|
+
declare const typographyHeaderXsSize = 10;
|
64
|
+
declare const typographyHeaderXsHeight = 12;
|
65
|
+
declare const typographyBodyLSize = 16;
|
66
|
+
declare const typographyBodyLHeight = 24;
|
67
|
+
declare const typographyBodyMSize = 14;
|
68
|
+
declare const typographyBodyMHeight = 20;
|
69
|
+
declare const typographyBodySSize = 12;
|
70
|
+
declare const typographyBodySHeight = 16;
|
71
|
+
declare const typographyBodyXsSize = 10;
|
72
|
+
declare const typographyBodyXsHeight = 12;
|
73
|
+
declare const typographyBodyXxsSize = 9;
|
74
|
+
declare const typographyBodyXxsHeight = 12;
|
75
|
+
declare const typographyButtonLSize = 16;
|
76
|
+
declare const typographyButtonLHeight = 24;
|
77
|
+
declare const typographyButtonMSize = 14;
|
78
|
+
declare const typographyButtonMHeight = 20;
|
79
|
+
declare const typographyButtonSSize = 12;
|
80
|
+
declare const typographyButtonSHeight = 16;
|
81
|
+
declare const typographyButtonXsSize = 10;
|
82
|
+
declare const typographyButtonXsHeight = 12;
|
83
|
+
declare const spacing0 = 0;
|
84
|
+
declare const spacingNone = "unset";
|
85
|
+
declare const spacingXxs = 2;
|
86
|
+
declare const spacingXs = 4;
|
87
|
+
declare const spacingS = 8;
|
88
|
+
declare const spacingM = 12;
|
89
|
+
declare const spacingL = 16;
|
90
|
+
declare const spacingXl = 24;
|
91
|
+
declare const spacingXxl = 40;
|
92
|
+
declare const spacingOversized = 80;
|
93
|
+
declare const radiusNone = 0;
|
94
|
+
declare const radiusSmall = 2;
|
95
|
+
declare const radiusMedium = 4;
|
96
|
+
declare const radiusLarge = 8;
|
97
|
+
declare const radiusRound = 80;
|
98
|
+
declare const shadowsElevationDefault = "initial";
|
99
|
+
declare const shadowsElevationOverlay = "0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14)";
|
100
|
+
declare const shadowsElevationRaised = "0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14)";
|
101
|
+
declare const fontPrimary = "\"Roboto Flex\", sans-serif";
|
102
|
+
declare const fontDisplay = "\"Roboto Mono\", monospace";
|
103
|
+
declare const iconsSizeL = 24;
|
104
|
+
declare const iconsSizeM = 20;
|
105
|
+
declare const iconsSizeS = 16;
|
106
|
+
declare const iconsSizeXs = 12;
|
107
|
+
|
108
|
+
export { type RGBAColor, colorAdvisory, colorAdvisoryBold, colorAdvisoryHover, colorAdvisorySubtle, colorClassificationConfidential, colorClassificationCui, colorClassificationMissing, colorClassificationSecret, colorClassificationTopSecret, colorClassificationTsSci, colorClassificationUnclass, colorCritical, colorCriticalBold, colorCriticalHover, colorCriticalSubtle, colorDefaultDark, colorDefaultLight, colorDisabled, colorHighlight, colorHighlightBold, colorHighlightHover, colorHighlightSubtle, colorInfo, colorInfoBold, colorInfoHover, colorInfoSubtle, colorInteractive, colorInteractiveDefault, colorInteractiveDisabled, colorInteractiveHover, colorInteractiveHoverDark, colorInteractiveHoverLight, colorInverseDark, colorInverseLight, colorNormal, colorNormalBold, colorNormalHover, colorNormalSubtle, colorSerious, colorSeriousBold, colorSeriousHover, colorSeriousSubtle, colorStaticDark, colorStaticLight, colorSurfaceDefault, colorSurfaceOverlay, colorSurfaceRaised, colorTransparentDark, colorTransparentLight, fontDisplay, fontPrimary, iconsSizeL, iconsSizeM, iconsSizeS, iconsSizeXs, radiusLarge, radiusMedium, radiusNone, radiusRound, radiusSmall, shadowsElevationDefault, shadowsElevationOverlay, shadowsElevationRaised, spacing0, spacingL, spacingM, spacingNone, spacingOversized, spacingS, spacingXl, spacingXs, spacingXxl, spacingXxs, typographyBodyLHeight, typographyBodyLSize, typographyBodyMHeight, typographyBodyMSize, typographyBodySHeight, typographyBodySSize, typographyBodyXsHeight, typographyBodyXsSize, typographyBodyXxsHeight, typographyBodyXxsSize, typographyButtonLHeight, typographyButtonLSize, typographyButtonMHeight, typographyButtonMSize, typographyButtonSHeight, typographyButtonSSize, typographyButtonXsHeight, typographyButtonXsSize, typographyHeaderLHeight, typographyHeaderLSize, typographyHeaderMHeight, typographyHeaderMSize, typographyHeaderSHeight, typographyHeaderSSize, typographyHeaderXlHeight, typographyHeaderXlSize, typographyHeaderXsHeight, typographyHeaderXsSize, typographyHeaderXxlHeight, typographyHeaderXxlSize };
|
@@ -0,0 +1,2 @@
|
|
1
|
+
var o=[11,11,11,1],t=[34,34,34,1],r=[47,47,49,1],e=[0,0,0,.4],c=[255,255,255,.08],p=[86,86,86,1],s=[230,230,230,1],n=[255,255,255,1],l=[137,137,137,1],i=[47,47,49,1],a=[56,56,56,1],x=[56,56,56,1],y=[34,34,34,1],g=[40,245,190,1],B=[40,245,190,1],C=[24,147,114,1],h=[10,61,48,1],R=[104,104,104,1],A=[104,104,104,1],G=[66,66,68,1],d=[34,34,34,1],S=[98,166,255,1],H=[98,166,255,1],u=[58,100,153,1],v=[20,33,51,1],f=[48,210,126,1],b=[48,210,126,1],z=[28,126,76,1],X=[10,42,25,1],L=[252,164,0,1],D=[252,164,0,1],m=[151,98,1,1],I=[50,33,0,1],M=[212,35,29,1],N=[212,35,29,1],k=[127,21,17,1],T=[42,7,6,1],w=[255,255,255,1],E=[137,137,137,1],O=[56,56,56,1],F=[34,34,34,1],P=[86,86,86,1],U=[11,11,11,1],j=[0,122,51,1],q=[80,43,133,1],J=[0,51,160,1],K=[200,16,46,1],Q=[255,140,0,1],V=[252,232,58,1],W=32,Y=40,Z=24,_=28,$=20,oo=24,to=14,ro=20,eo=12,co=16,po=10,so=12,no=16,lo=24,io=14,ao=20,xo=12,yo=16,go=10,Bo=12,Co=9,ho=12,Ro=16,Ao=24,Go=14,So=20,Ho=12,uo=16,vo=10,fo=12,bo=0,zo="unset",Xo=2,Lo=4,Do=8,mo=12,Io=16,Mo=24,No=40,ko=80,To=0,wo=2,Eo=4,Oo=8,Fo=80,Po="initial",Uo="0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14)",jo="0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14)",qo='"Roboto Flex", sans-serif',Jo='"Roboto Mono", monospace',Ko=24,Qo=20,Vo=16,Wo=12;export{S as colorAdvisory,H as colorAdvisoryBold,u as colorAdvisoryHover,v as colorAdvisorySubtle,J as colorClassificationConfidential,q as colorClassificationCui,U as colorClassificationMissing,K as colorClassificationSecret,Q as colorClassificationTopSecret,V as colorClassificationTsSci,j as colorClassificationUnclass,M as colorCritical,N as colorCriticalBold,k as colorCriticalHover,T as colorCriticalSubtle,E as colorDefaultDark,w as colorDefaultLight,P as colorDisabled,g as colorHighlight,B as colorHighlightBold,C as colorHighlightHover,h as colorHighlightSubtle,R as colorInfo,A as colorInfoBold,G as colorInfoHover,d as colorInfoSubtle,p as colorInteractive,s as colorInteractiveDefault,a as colorInteractiveDisabled,n as colorInteractiveHover,i as colorInteractiveHoverDark,l as colorInteractiveHoverLight,O as colorInverseDark,F as colorInverseLight,f as colorNormal,b as colorNormalBold,z as colorNormalHover,X as colorNormalSubtle,L as colorSerious,D as colorSeriousBold,m as colorSeriousHover,I as colorSeriousSubtle,y as colorStaticDark,x as colorStaticLight,o as colorSurfaceDefault,r as colorSurfaceOverlay,t as colorSurfaceRaised,e as colorTransparentDark,c as colorTransparentLight,Jo as fontDisplay,qo as fontPrimary,Ko as iconsSizeL,Qo as iconsSizeM,Vo as iconsSizeS,Wo as iconsSizeXs,Oo as radiusLarge,Eo as radiusMedium,To as radiusNone,Fo as radiusRound,wo as radiusSmall,Po as shadowsElevationDefault,Uo as shadowsElevationOverlay,jo as shadowsElevationRaised,bo as spacing0,Io as spacingL,mo as spacingM,zo as spacingNone,ko as spacingOversized,Do as spacingS,Mo as spacingXl,Lo as spacingXs,No as spacingXxl,Xo as spacingXxs,lo as typographyBodyLHeight,no as typographyBodyLSize,ao as typographyBodyMHeight,io as typographyBodyMSize,yo as typographyBodySHeight,xo as typographyBodySSize,Bo as typographyBodyXsHeight,go as typographyBodyXsSize,ho as typographyBodyXxsHeight,Co as typographyBodyXxsSize,Ao as typographyButtonLHeight,Ro as typographyButtonLSize,So as typographyButtonMHeight,Go as typographyButtonMSize,uo as typographyButtonSHeight,Ho as typographyButtonSSize,fo as typographyButtonXsHeight,vo as typographyButtonXsSize,oo as typographyHeaderLHeight,$ as typographyHeaderLSize,ro as typographyHeaderMHeight,to as typographyHeaderMSize,co as typographyHeaderSHeight,eo as typographyHeaderSSize,_ as typographyHeaderXlHeight,Z as typographyHeaderXlSize,so as typographyHeaderXsHeight,po as typographyHeaderXsSize,Y as typographyHeaderXxlHeight,W as typographyHeaderXxlSize};//# sourceMappingURL=tokens.js.map
|
2
|
+
//# sourceMappingURL=tokens.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/tokens/generated/tokens.ts"],"names":["colorSurfaceDefault","colorSurfaceRaised","colorSurfaceOverlay","colorTransparentDark","colorTransparentLight","colorInteractive","colorInteractiveDefault","colorInteractiveHover","colorInteractiveHoverLight","colorInteractiveHoverDark","colorInteractiveDisabled","colorStaticLight","colorStaticDark","colorHighlight","colorHighlightBold","colorHighlightHover","colorHighlightSubtle","colorInfo","colorInfoBold","colorInfoHover","colorInfoSubtle","colorAdvisory","colorAdvisoryBold","colorAdvisoryHover","colorAdvisorySubtle","colorNormal","colorNormalBold","colorNormalHover","colorNormalSubtle","colorSerious","colorSeriousBold","colorSeriousHover","colorSeriousSubtle","colorCritical","colorCriticalBold","colorCriticalHover","colorCriticalSubtle","colorDefaultLight","colorDefaultDark","colorInverseDark","colorInverseLight","colorDisabled","colorClassificationMissing","colorClassificationUnclass","colorClassificationCui","colorClassificationConfidential","colorClassificationSecret","colorClassificationTopSecret","colorClassificationTsSci","typographyHeaderXxlSize","typographyHeaderXxlHeight","typographyHeaderXlSize","typographyHeaderXlHeight","typographyHeaderLSize","typographyHeaderLHeight","typographyHeaderMSize","typographyHeaderMHeight","typographyHeaderSSize","typographyHeaderSHeight","typographyHeaderXsSize","typographyHeaderXsHeight","typographyBodyLSize","typographyBodyLHeight","typographyBodyMSize","typographyBodyMHeight","typographyBodySSize","typographyBodySHeight","typographyBodyXsSize","typographyBodyXsHeight","typographyBodyXxsSize","typographyBodyXxsHeight","typographyButtonLSize","typographyButtonLHeight","typographyButtonMSize","typographyButtonMHeight","typographyButtonSSize","typographyButtonSHeight","typographyButtonXsSize","typographyButtonXsHeight","spacing0","spacingNone","spacingXxs","spacingXs","spacingS","spacingM","spacingL","spacingXl","spacingXxl","spacingOversized","radiusNone","radiusSmall","radiusMedium","radiusLarge","radiusRound","shadowsElevationDefault","shadowsElevationOverlay","shadowsElevationRaised","fontPrimary","fontDisplay","iconsSizeL","iconsSizeM","iconsSizeS","iconsSizeXs"],"mappings":"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","file":"tokens.js","sourcesContent":["\nexport type RGBAColor = [number, number, number, number];\n\n/** Semantic Colors **/\nexport const colorSurfaceDefault: RGBAColor = [11, 11, 11, 1];\nexport const colorSurfaceRaised: RGBAColor = [34, 34, 34, 1];\nexport const colorSurfaceOverlay: RGBAColor = [47, 47, 49, 1];\nexport const colorTransparentDark: RGBAColor = [0, 0, 0, 0.4];\nexport const colorTransparentLight: RGBAColor = [255, 255, 255, 0.08];\nexport const colorInteractive: RGBAColor = [86, 86, 86, 1];\nexport const colorInteractiveDefault: RGBAColor = [230, 230, 230, 1];\nexport const colorInteractiveHover: RGBAColor = [255, 255, 255, 1];\nexport const colorInteractiveHoverLight: RGBAColor = [137, 137, 137, 1];\nexport const colorInteractiveHoverDark: RGBAColor = [47, 47, 49, 1];\nexport const colorInteractiveDisabled: RGBAColor = [56, 56, 56, 1];\nexport const colorStaticLight: RGBAColor = [56, 56, 56, 1];\nexport const colorStaticDark: RGBAColor = [34, 34, 34, 1];\nexport const colorHighlight: RGBAColor = [40, 245, 190, 1];\nexport const colorHighlightBold: RGBAColor = [40, 245, 190, 1];\nexport const colorHighlightHover: RGBAColor = [24, 147, 114, 1];\nexport const colorHighlightSubtle: RGBAColor = [10, 61, 48, 1];\nexport const colorInfo: RGBAColor = [104, 104, 104, 1];\nexport const colorInfoBold: RGBAColor = [104, 104, 104, 1];\nexport const colorInfoHover: RGBAColor = [66, 66, 68, 1];\nexport const colorInfoSubtle: RGBAColor = [34, 34, 34, 1];\nexport const colorAdvisory: RGBAColor = [98, 166, 255, 1];\nexport const colorAdvisoryBold: RGBAColor = [98, 166, 255, 1];\nexport const colorAdvisoryHover: RGBAColor = [58, 100, 153, 1];\nexport const colorAdvisorySubtle: RGBAColor = [20, 33, 51, 1];\nexport const colorNormal: RGBAColor = [48, 210, 126, 1];\nexport const colorNormalBold: RGBAColor = [48, 210, 126, 1];\nexport const colorNormalHover: RGBAColor = [28, 126, 76, 1];\nexport const colorNormalSubtle: RGBAColor = [10, 42, 25, 1];\nexport const colorSerious: RGBAColor = [252, 164, 0, 1];\nexport const colorSeriousBold: RGBAColor = [252, 164, 0, 1];\nexport const colorSeriousHover: RGBAColor = [151, 98, 1, 1];\nexport const colorSeriousSubtle: RGBAColor = [50, 33, 0, 1];\nexport const colorCritical: RGBAColor = [212, 35, 29, 1];\nexport const colorCriticalBold: RGBAColor = [212, 35, 29, 1];\nexport const colorCriticalHover: RGBAColor = [127, 21, 17, 1];\nexport const colorCriticalSubtle: RGBAColor = [42, 7, 6, 1];\nexport const colorDefaultLight: RGBAColor = [255, 255, 255, 1];\nexport const colorDefaultDark: RGBAColor = [137, 137, 137, 1];\nexport const colorInverseDark: RGBAColor = [56, 56, 56, 1];\nexport const colorInverseLight: RGBAColor = [34, 34, 34, 1];\nexport const colorDisabled: RGBAColor = [86, 86, 86, 1];\nexport const colorClassificationMissing: RGBAColor = [11, 11, 11, 1];\nexport const colorClassificationUnclass: RGBAColor = [0, 122, 51, 1];\nexport const colorClassificationCui: RGBAColor = [80, 43, 133, 1];\nexport const colorClassificationConfidential: RGBAColor = [0, 51, 160, 1];\nexport const colorClassificationSecret: RGBAColor = [200, 16, 46, 1];\nexport const colorClassificationTopSecret: RGBAColor = [255, 140, 0, 1];\nexport const colorClassificationTsSci: RGBAColor = [252, 232, 58, 1];\n/** Other Design Tokens **/\nexport const typographyHeaderXxlSize = 32;\nexport const typographyHeaderXxlHeight = 40;\nexport const typographyHeaderXlSize = 24;\nexport const typographyHeaderXlHeight = 28;\nexport const typographyHeaderLSize = 20;\nexport const typographyHeaderLHeight = 24;\nexport const typographyHeaderMSize = 14;\nexport const typographyHeaderMHeight = 20;\nexport const typographyHeaderSSize = 12;\nexport const typographyHeaderSHeight = 16;\nexport const typographyHeaderXsSize = 10;\nexport const typographyHeaderXsHeight = 12;\nexport const typographyBodyLSize = 16;\nexport const typographyBodyLHeight = 24;\nexport const typographyBodyMSize = 14;\nexport const typographyBodyMHeight = 20;\nexport const typographyBodySSize = 12;\nexport const typographyBodySHeight = 16;\nexport const typographyBodyXsSize = 10;\nexport const typographyBodyXsHeight = 12;\nexport const typographyBodyXxsSize = 9;\nexport const typographyBodyXxsHeight = 12;\nexport const typographyButtonLSize = 16;\nexport const typographyButtonLHeight = 24;\nexport const typographyButtonMSize = 14;\nexport const typographyButtonMHeight = 20;\nexport const typographyButtonSSize = 12;\nexport const typographyButtonSHeight = 16;\nexport const typographyButtonXsSize = 10;\nexport const typographyButtonXsHeight = 12;\nexport const spacing0 = 0;\nexport const spacingNone = 'unset';\nexport const spacingXxs = 2;\nexport const spacingXs = 4;\nexport const spacingS = 8;\nexport const spacingM = 12;\nexport const spacingL = 16;\nexport const spacingXl = 24;\nexport const spacingXxl = 40;\nexport const spacingOversized = 80;\nexport const radiusNone = 0;\nexport const radiusSmall = 2;\nexport const radiusMedium = 4;\nexport const radiusLarge = 8;\nexport const radiusRound = 80;\nexport const shadowsElevationDefault = 'initial';\nexport const shadowsElevationOverlay = '0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14)';\nexport const shadowsElevationRaised = '0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14)';\nexport const fontPrimary = '\"Roboto Flex\", sans-serif';\nexport const fontDisplay = '\"Roboto Mono\", monospace';\nexport const iconsSizeL = 24;\nexport const iconsSizeM = 20;\nexport const iconsSizeS = 16;\nexport const iconsSizeXs = 12;"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@accelint/design-toolkit",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.3.0",
|
4
4
|
"private": false,
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"repository": {
|
@@ -75,10 +75,9 @@
|
|
75
75
|
"react": "^19.0.0",
|
76
76
|
"react-dom": "^19.0.0",
|
77
77
|
"tailwind-merge": "^3.2.0",
|
78
|
-
"tailwindcss-react-aria-components": "^2.0.0",
|
79
78
|
"zod": "3.23.8",
|
80
|
-
"@accelint/
|
81
|
-
"@accelint/
|
79
|
+
"@accelint/core": "0.2.1",
|
80
|
+
"@accelint/icons": "2.0.0"
|
82
81
|
},
|
83
82
|
"devDependencies": {
|
84
83
|
"@storybook/addon-essentials": "^8.6.12",
|
@@ -110,8 +109,8 @@
|
|
110
109
|
"vite": "5.4.18",
|
111
110
|
"vite-tsconfig-paths": "5.0.1",
|
112
111
|
"vitest": "^3.1.1",
|
113
|
-
"@accelint/typescript-config": "0.1.2",
|
114
112
|
"@accelint/biome-config": "0.1.2",
|
113
|
+
"@accelint/typescript-config": "0.1.2",
|
115
114
|
"@accelint/vitest-config": "0.1.3"
|
116
115
|
},
|
117
116
|
"$schema": "https://json.schemastore.org/package",
|
@@ -121,9 +120,10 @@
|
|
121
120
|
},
|
122
121
|
"scripts": {
|
123
122
|
"bench": "pnpm vitest bench --run --dir src",
|
124
|
-
"build": "pnpm tsup && pnpm build:css",
|
123
|
+
"build": "pnpm gen:tokens && pnpm tsup && pnpm build:css",
|
125
124
|
"build:css": "pnpm tailwindcss -i ./src/index.css -o ./dist/styles.css",
|
126
125
|
"dev": "pnpm tsc --watch",
|
126
|
+
"gen:tokens": "node scripts/generate-tokens.mjs",
|
127
127
|
"index": "pnpm zx ../../scripts/indexer.mjs design-toolkit/components",
|
128
128
|
"lint": "pnpm biome lint",
|
129
129
|
"preview": "pnpm storybook dev -p 6006",
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import * as cva_types from 'cva/types';
|
3
|
-
import { VariantProps } from 'cva';
|
4
|
-
import { ButtonProps } from 'react-aria-components';
|
5
|
-
|
6
|
-
declare const floatingButtonStyles: (props?: ({
|
7
|
-
isDisabled?: boolean | null | undefined;
|
8
|
-
} & cva_types.ClassProp) | undefined) => string;
|
9
|
-
interface FloatingButtonProps extends Omit<ButtonProps, 'isDisabled'> {
|
10
|
-
isDisabled?: boolean;
|
11
|
-
}
|
12
|
-
declare const FloatingButton: {
|
13
|
-
({ className, isDisabled, ...props }: FloatingButtonProps): react_jsx_runtime.JSX.Element;
|
14
|
-
displayName: string;
|
15
|
-
as(props: VariantProps<typeof floatingButtonStyles>, className?: string | string[]): string;
|
16
|
-
};
|
17
|
-
|
18
|
-
export { FloatingButton, type FloatingButtonProps };
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import {cn}from'./../../lib/utils.js';import'client-only';import {cva}from'cva';import {Button,composeRenderProps}from'react-aria-components';import {jsx}from'react/jsx-runtime';var o=cva(["absolute right-[20px] bottom-[20px] inline-flex size-[32px] cursor-pointer items-center justify-center rounded-full bg-transparent shadow-elevation-overlay outline outline-interactive-default","icon-default-dark [--icon-size:var(--spacing-xl)]","hover:icon-default-light hover:bg-interactive-hover-dark hover:outline-interactive-hover","focus:icon-default-light focus:bg-interactive-hover-dark focus:outline-interactive-hover"],{variants:{isDisabled:{true:"icon-disabled hover:icon-disabled cursor-not-allowed bg-interactive-disabled outline-interactive-disabled hover:bg-interactive-disabled hover:outline-interactive-disabled focus:bg-interactive-disabled focus:outline-interactive-disabled",false:""}},defaultVariants:{isDisabled:false}}),a=({className:e,isDisabled:t,...n})=>jsx(Button,{className:composeRenderProps(e,r=>cn(o({className:r,isDisabled:t}))),isDisabled:t,...n});a.displayName="FloatingButton";a.as=(e,t)=>cn(o({...e,className:t}));export{a as FloatingButton};//# sourceMappingURL=index.js.map
|
2
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/floating-button/index.tsx"],"names":["FloatingButton","AriaButton","u","l","className","cn","floatingButtonStyles","props"],"mappings":"8XAyBI,CAAA,mDACA,CAAA,gMAKE,CAAA,CAAA,UACQ,CAAA,CAAA,IAAA,CAAA,6OACC,CAAA,KAGX,CAAA,EAAA,CAAA,CAAA,CAAA,2BAWSA,CAAAA,KAAkB,CAC7B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,sBAGF,CAAA,CAAA,CAAA,GACGC,EAAA,GACCC,GAAA,CAAAC,MAAA,CAAA,CAAA,SAA0CC,CACxCC,mBACEC,CAAAA,CAAqB,CACnB,iBACA,CAAA,CAAA,CAAA,UAIN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UACIC,CACN,EAEFP,GAAe,CAAA,CAAA,EAAA,CAAA,CAAA,4BAEbO,CAAAA,CACAH,CAAAA,EAAAA,CACGC,EAAGC,CAAAA,CAAqB,KAAKC,CAAAA,CAAO,CAAA,CAAA,GAAA,CAAA,CAAA,SAAY,CAAA,CAAA,CAAA,CAAA,CAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { cn } from '@/lib/utils';\nimport 'client-only';\nimport { type VariantProps, cva } from 'cva';\nimport {\n Button as AriaButton,\n type ButtonProps as AriaButtonProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nconst floatingButtonStyles = cva(\n [\n 'absolute right-[20px] bottom-[20px] inline-flex size-[32px] cursor-pointer items-center justify-center rounded-full bg-transparent shadow-elevation-overlay outline outline-interactive-default',\n 'icon-default-dark [--icon-size:var(--spacing-xl)]',\n 'hover:icon-default-light hover:bg-interactive-hover-dark hover:outline-interactive-hover',\n 'focus:icon-default-light focus:bg-interactive-hover-dark focus:outline-interactive-hover',\n ],\n {\n variants: {\n isDisabled: {\n true: 'icon-disabled hover:icon-disabled cursor-not-allowed bg-interactive-disabled outline-interactive-disabled hover:bg-interactive-disabled hover:outline-interactive-disabled focus:bg-interactive-disabled focus:outline-interactive-disabled',\n false: '',\n },\n },\n defaultVariants: {\n isDisabled: false,\n },\n },\n);\n\nexport interface FloatingButtonProps\n extends Omit<AriaButtonProps, 'isDisabled'> {\n isDisabled?: boolean;\n}\n\nexport const FloatingButton = ({\n className,\n isDisabled,\n ...props\n}: FloatingButtonProps) => (\n <AriaButton\n className={composeRenderProps(className, (className) =>\n cn(\n floatingButtonStyles({\n className,\n isDisabled,\n }),\n ),\n )}\n isDisabled={isDisabled}\n {...props}\n />\n);\nFloatingButton.displayName = 'FloatingButton';\nFloatingButton.as = (\n props: VariantProps<typeof floatingButtonStyles>,\n className?: string | string[],\n) => cn(floatingButtonStyles({ ...props, className }));\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import * as cva_types from 'cva/types';
|
3
|
-
import { VariantProps } from 'cva';
|
4
|
-
import { ButtonProps } from 'react-aria-components';
|
5
|
-
|
6
|
-
declare const iconButtonStyles: (props?: ({
|
7
|
-
variant?: "primary" | "secondary" | "child" | null | undefined;
|
8
|
-
size?: "small" | "medium" | null | undefined;
|
9
|
-
isDisabled?: boolean | null | undefined;
|
10
|
-
} & cva_types.ClassProp) | undefined) => string;
|
11
|
-
interface IconButtonProps extends Omit<ButtonProps, 'isDisabled'>, VariantProps<typeof iconButtonStyles> {
|
12
|
-
isDisabled?: boolean;
|
13
|
-
}
|
14
|
-
declare const IconButton: {
|
15
|
-
({ className, size, variant, isDisabled, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
|
16
|
-
displayName: string;
|
17
|
-
as(props: VariantProps<typeof iconButtonStyles>, className?: string | string[]): string;
|
18
|
-
};
|
19
|
-
|
20
|
-
export { IconButton, type IconButtonProps };
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import {expectsIconWrapper}from'./../../lib/react.js';import {cn}from'./../../lib/utils.js';import'client-only';import {cva}from'cva';import {Button,composeRenderProps}from'react-aria-components';import {jsx}from'react/jsx-runtime';var o=cva("inline-flex cursor-pointer items-center justify-center bg-transparent dtk-pressed:bg-interactive-hover-dark outline-none hover:bg-interactive-hover-dark focus:bg-interactive-hover-dark",{variants:{variant:{primary:"icon-default-light",secondary:"icon-default-dark hover:icon-default-light dtk-pressed:icon-default-light focus:icon-default-light",child:"bg-transparent dtk-pressed:bg-transparent hover:bg-transparent focus:bg-default-light/5"},size:{medium:"size-[28px] rounded-medium [--icon-size:var(--spacing-xl)]",small:"size-[20px] rounded-small [--icon-size:var(--spacing-l)]"},isDisabled:{true:"icon-disabled fg-disabled hover:fg-disabled focus:fg-disabled cursor-not-allowed bg-transparent dtk-pressed:bg-transparent hover:bg-transparent focus:bg-transparent",false:""}},compoundVariants:[{isDisabled:true,variant:"child",className:"cursor-default"}],defaultVariants:{isDisabled:false,size:"medium",variant:"primary"}}),r=({className:e,size:t="medium",variant:s="primary",isDisabled:a,...n})=>(expectsIconWrapper({children:n.children,componentName:r.displayName}),jsx(Button,{className:composeRenderProps(e,d=>cn(o({isDisabled:a,size:t,variant:s,className:d}))),isDisabled:a,...n}));r.displayName="IconButton";r.as=(e,t)=>cn(o({...e,className:t}));export{r as IconButton};//# sourceMappingURL=index.js.map
|
2
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/icon-button/index.tsx"],"names":["c","IconButton","className","l","jsx","m","composeRenderProps","u","i","isDisabled","cn","iconButtonStyles","props"],"mappings":"wOAwBE,IAAA,CAAA,CAAAA,GAAA,CAAA,0LAGI,CAAA,CAAA,QACE,CAAA,CAAA,qCAEE,CAAA,SAAA,CAAA,oGAEA,CAAA,KAAA,CAAA,yFAGF,CAAQ,0EACD,CAAA,KAAA,CAAA,0DAGP,CAAA,CAAA,UAAM,CAAA,CAAA,IAAA,CAAA,sKAIV,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,gBAEgB,CAAA,CAAA,CACZ,uBACA,CAAA,OAAW,CAAA,SAAA,CAAA,kCAID,CAAA,CACZ,iBACA,IAAA,CAAA,QAAS,CAAA,OAWFC,CAAAA,aACXC,CAAAA,CACA,CAAA,CAAA,SAAO,CAAA,CAAA,CAAA,IACP,CAAA,CAAA,CAAA,QAAU,CAAA,OACV,CAAA,CAAA,CAAA,SACA,CAAA,UAEmB,CACjB,CAAA,CAAA,GAAA,CAAA,CAAA,IAAgBC,kBAAA,CAAA,CAAA,oBACDF,aACjB,CAAC,CAAA,CAGCG,WACE,CAAA,CAAA,CAAAC,GAAWC,CAAAA,MAAmBJ,EAAYA,SAGpC,CAAAK,kBAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,EAAA,CAAAC,CAAAA,CACA,CAAA,iBAEA,CAAA,CAAA,CAAA,OACF,CAAC,CACH,CACF,SACA,CAAA,CAAA,CAAA,CAAYA,EACX,CAAA,UAKI,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAc,CAAA,CAAA,WACzBR,CAAAA,YAGKS,CAAGC,CAAAA,CAAiB,EAAE,CAAA,CAAGC,CAAAA,CAAO,CAAA,GAAAJ,EAAA,CAAA,CAAA,CAAA,CAAA,GAAW,CAAC,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { expectsIconWrapper } from '@/lib/react';\nimport { cn } from '@/lib/utils';\nimport 'client-only';\nimport { type VariantProps, cva } from 'cva';\nimport {\n Button as AriaButton,\n type ButtonProps as AriaButtonProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nconst iconButtonStyles = cva(\n 'inline-flex cursor-pointer items-center justify-center bg-transparent dtk-pressed:bg-interactive-hover-dark outline-none hover:bg-interactive-hover-dark focus:bg-interactive-hover-dark',\n {\n variants: {\n variant: {\n primary: 'icon-default-light',\n secondary:\n 'icon-default-dark hover:icon-default-light dtk-pressed:icon-default-light focus:icon-default-light',\n child:\n 'bg-transparent dtk-pressed:bg-transparent hover:bg-transparent focus:bg-default-light/5',\n },\n size: {\n medium: 'size-[28px] rounded-medium [--icon-size:var(--spacing-xl)]',\n small: 'size-[20px] rounded-small [--icon-size:var(--spacing-l)]',\n },\n isDisabled: {\n true: 'icon-disabled fg-disabled hover:fg-disabled focus:fg-disabled cursor-not-allowed bg-transparent dtk-pressed:bg-transparent hover:bg-transparent focus:bg-transparent',\n false: '',\n },\n },\n compoundVariants: [\n {\n isDisabled: true,\n variant: 'child',\n className: 'cursor-default',\n },\n ],\n defaultVariants: {\n isDisabled: false,\n size: 'medium',\n variant: 'primary',\n },\n },\n);\n\nexport interface IconButtonProps\n extends Omit<AriaButtonProps, 'isDisabled'>,\n VariantProps<typeof iconButtonStyles> {\n isDisabled?: boolean;\n}\n\nexport const IconButton = ({\n className,\n size = 'medium',\n variant = 'primary',\n isDisabled,\n ...props\n}: IconButtonProps) => {\n expectsIconWrapper({\n children: props.children,\n componentName: IconButton.displayName,\n });\n\n return (\n <AriaButton\n className={composeRenderProps(className, (className) =>\n cn(\n iconButtonStyles({\n isDisabled,\n size,\n variant,\n className,\n }),\n ),\n )}\n isDisabled={isDisabled}\n {...props}\n />\n );\n};\n\nIconButton.displayName = 'IconButton';\nIconButton.as = (\n props: VariantProps<typeof iconButtonStyles>,\n className?: string | string[],\n) => cn(iconButtonStyles({ ...props, className }));\n"]}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import * as cva_types from 'cva/types';
|
3
|
-
import { TextFieldProps, TextAreaProps as TextAreaProps$1 } from 'react-aria-components';
|
4
|
-
import { VariantProps } from 'cva';
|
5
|
-
import { ForwardedRef } from 'react';
|
6
|
-
|
7
|
-
declare const textAreaStyles: (props?: ({
|
8
|
-
isDisabled?: boolean | null | undefined;
|
9
|
-
isInvalid?: boolean | null | undefined;
|
10
|
-
isReadOnly?: boolean | null | undefined;
|
11
|
-
size?: "small" | "medium" | null | undefined;
|
12
|
-
isClearable?: boolean | null | undefined;
|
13
|
-
} & cva_types.ClassProp) | undefined) => string;
|
14
|
-
interface InputProps extends VariantProps<typeof textAreaStyles>, Omit<TextAreaProps$1, 'size'> {
|
15
|
-
selectOnFocus?: boolean;
|
16
|
-
ref?: ForwardedRef<HTMLTextAreaElement>;
|
17
|
-
}
|
18
|
-
interface TextAreaProps extends Omit<VariantProps<typeof textAreaStyles>, 'isDisabled' | 'isInvalid' | 'isReadOnly'>, Omit<TextFieldProps, 'className'>, Omit<InputProps, keyof TextFieldProps> {
|
19
|
-
className?: string;
|
20
|
-
description?: string;
|
21
|
-
errorMessage?: string;
|
22
|
-
label?: string;
|
23
|
-
placeholder?: string;
|
24
|
-
}
|
25
|
-
declare function TextArea({ className, description, errorMessage, isDisabled, isInvalid, isReadOnly, label, placeholder, size, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
26
|
-
declare namespace TextArea {
|
27
|
-
var displayName: string;
|
28
|
-
}
|
29
|
-
|
30
|
-
export { TextArea, type TextAreaProps };
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import'client-only';import {TextField,Text,useContextProps,TextAreaContext,TextArea}from'react-aria-components';import {cn}from'./../../lib/utils.js';import {cva}from'cva';import {Label}from'../label/index.js';import {jsxs,jsx}from'react/jsx-runtime';var c=cva(["block w-full rounded-medium p-s font-display outline outline-interactive"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious"},isReadOnly:{true:"rounded-none p-0 outline-none"},size:{medium:"text-body-s",small:"text-body-xs"},isClearable:{true:"",false:""}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"},{isClearable:true,isDisabled:false,size:"medium",className:"pr-xl"}],defaultVariants:{isClearable:false,size:"medium"}}),p=({className:r,ref:s=null,selectOnFocus:l=false,size:t="medium",...e})=>([e,s]=useContextProps(e,s,TextAreaContext),e.readOnly?jsx("span",{className:cn(c({isDisabled:false,isReadOnly:e.readOnly,size:t,className:r})),children:e.value||"\xA0"}):jsx("div",{className:"relative flex items-center",children:jsx(TextArea,{...e,onFocus:i=>{l&&s.current?.select(),e.onFocus?.(i);},ref:s,className:({isDisabled:i,isInvalid:o})=>cn(c({isDisabled:i,isInvalid:o,isReadOnly:e.readOnly,size:t,className:r}))})}));p.displayName="TextArea.Input";function F({className:r,description:s,errorMessage:l,isDisabled:t,isInvalid:e,isReadOnly:i,label:o,placeholder:f,size:d="medium",...u}){let m=d==="small",A=!(m||e)||t,y=e&&!t&&!i;return jsxs(TextField,{...u,isDisabled:t,isInvalid:e,isReadOnly:i,className:"flex flex-col gap-xs",children:[!m&&jsx(Label,{className:"empty:hidden",isDisabled:t,isOptional:!u.isRequired,children:o}),jsx(p,{className:r,placeholder:f,size:d}),A&&jsx(Text,{className:cn(["fg-default-dark text-body-xs empty:hidden",t&&"fg-disabled"]),slot:"description",children:s}),y&&jsx(Text,{className:"fg-serious text-body-xs empty:hidden",slot:"errorMessage",children:l})]})}F.displayName="TextArea";export{F as TextArea};//# sourceMappingURL=index.js.map
|
2
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/text-area/index.tsx"],"names":["g","ref","size","props","TextAreaContext","P","h","T","e","textAreaStyles","n","Input","label","isSmall","shouldShowDescription","isInvalid","isDisabled","shouldShowError","isReadOnly","jsxs","b","Label","a","jsx","AriaText","x","TextArea"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport {\n Text as AriaText,\n TextArea as AriaTextArea,\n type TextAreaProps as AriaTextAreaProps,\n TextField as AriaTextField,\n type TextFieldProps as AriaTextFieldProps,\n TextAreaContext,\n useContextProps,\n} from 'react-aria-components';\n\nimport { cn } from '@/lib/utils';\nimport { type VariantProps, cva } from 'cva';\nimport type { ForwardedRef } from 'react';\nimport { Label } from '../label';\n\nconst textAreaStyles = cva(\n ['block w-full rounded-medium p-s font-display outline outline-interactive'],\n {\n variants: {\n isDisabled: {\n true: 'text-disabled outline-interactive-disabled placeholder:text-disabled',\n false:\n 'text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight',\n },\n isInvalid: {\n true: 'outline-serious',\n },\n isReadOnly: {\n true: 'rounded-none p-0 outline-none',\n },\n size: {\n medium: 'text-body-s',\n small: 'text-body-xs',\n },\n isClearable: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n isDisabled: true,\n isInvalid: true,\n className: 'outline-interactive-disabled',\n },\n {\n isClearable: true,\n isDisabled: false,\n size: 'medium',\n className: 'pr-xl',\n },\n ],\n defaultVariants: {\n isClearable: false,\n size: 'medium',\n },\n },\n);\n\ninterface InputProps\n extends VariantProps<typeof textAreaStyles>,\n Omit<AriaTextAreaProps, 'size'> {\n selectOnFocus?: boolean;\n ref?: ForwardedRef<HTMLTextAreaElement>;\n}\n\nconst Input = ({\n className,\n ref = null,\n selectOnFocus = false,\n size = 'medium',\n ...props\n}: InputProps) => {\n [props, ref] = useContextProps(props, ref, TextAreaContext);\n\n if (props.readOnly) {\n return (\n <span\n className={cn(\n textAreaStyles({\n isDisabled: false,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )}\n >\n {props.value || '\\u00A0'}\n </span>\n );\n }\n\n return (\n <div className='relative flex items-center'>\n <AriaTextArea\n {...props}\n onFocus={(e) => {\n if (selectOnFocus) {\n ref.current?.select();\n }\n\n props.onFocus?.(e);\n }}\n ref={ref}\n className={({ isDisabled, isInvalid }) =>\n cn(\n textAreaStyles({\n isDisabled,\n isInvalid,\n isReadOnly: props.readOnly,\n size,\n className,\n }),\n )\n }\n />\n </div>\n );\n};\nInput.displayName = 'TextArea.Input';\n\nexport interface TextAreaProps\n extends Omit<\n VariantProps<typeof textAreaStyles>,\n 'isDisabled' | 'isInvalid' | 'isReadOnly'\n >,\n Omit<AriaTextFieldProps, 'className'>,\n Omit<InputProps, keyof AriaTextFieldProps> {\n className?: string;\n description?: string;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n}\n\nexport function TextArea({\n className,\n description,\n errorMessage,\n isDisabled,\n isInvalid,\n isReadOnly,\n label,\n placeholder,\n size = 'medium',\n ...props\n}: TextAreaProps) {\n const isSmall = size === 'small';\n const shouldShowDescription = !(isSmall || isInvalid) || isDisabled;\n const shouldShowError = isInvalid && !isDisabled && !isReadOnly;\n\n return (\n <AriaTextField\n {...(props as AriaTextFieldProps)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n className={'flex flex-col gap-xs'}\n >\n {!isSmall && (\n <Label\n className='empty:hidden'\n isDisabled={isDisabled}\n isOptional={!props.isRequired}\n >\n {label}\n </Label>\n )}\n <Input className={className} placeholder={placeholder} size={size} />\n {shouldShowDescription && (\n <AriaText\n className={cn([\n 'fg-default-dark text-body-xs empty:hidden',\n isDisabled && 'fg-disabled',\n ])}\n slot='description'\n >\n {description}\n </AriaText>\n )}\n {shouldShowError && (\n <AriaText\n className='fg-serious text-body-xs empty:hidden'\n slot='errorMessage'\n >\n {errorMessage}\n </AriaText>\n )}\n </AriaTextField>\n );\n}\nTextArea.displayName = 'TextArea';\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
-
import * as cva_types from 'cva/types';
|
3
|
-
import { VariantProps } from 'cva';
|
4
|
-
import { ToggleButtonProps } from 'react-aria-components';
|
5
|
-
|
6
|
-
declare const toggleIconButtonStyles: (props?: ({
|
7
|
-
variant?: "primary" | "secondary" | null | undefined;
|
8
|
-
size?: "small" | "medium" | null | undefined;
|
9
|
-
isDisabled?: boolean | null | undefined;
|
10
|
-
} & cva_types.ClassProp) | undefined) => string;
|
11
|
-
interface ToggleIconButtonProps extends Omit<ToggleButtonProps, 'isDisabled'>, VariantProps<typeof toggleIconButtonStyles> {
|
12
|
-
isDisabled?: boolean;
|
13
|
-
}
|
14
|
-
declare const ToggleIconButton: {
|
15
|
-
({ className, size, variant, isDisabled, ...props }: ToggleIconButtonProps): react_jsx_runtime.JSX.Element;
|
16
|
-
displayName: string;
|
17
|
-
as(props: VariantProps<typeof toggleIconButtonStyles>, className?: string | string[]): string;
|
18
|
-
};
|
19
|
-
|
20
|
-
export { ToggleIconButton, type ToggleIconButtonProps };
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import {expectsIconWrapper}from'./../../lib/react.js';import {cn}from'./../../lib/utils.js';import'client-only';import {cva}from'cva';import {ToggleButton,composeRenderProps}from'react-aria-components';import {jsx}from'react/jsx-runtime';var r=cva("inline-flex cursor-pointer items-center justify-center bg-transparent outline-none hover:bg-interactive-hover-dark focus:bg-interactive-hover-dark",{variants:{variant:{primary:"icon-default-light dtk-selected:icon-highlight dtk-selected:hover:bg-highlight-subtle dtk-selected:focus:bg-highlight-subtle",secondary:"icon-default-dark hover:icon-default-light focus:icon-default-light dtk-selected:icon-highlight dtk-selected:hover:bg-highlight-subtle dtk-selected:focus:bg-highlight-subtle"},size:{medium:"size-[28px] rounded-medium [--icon-size:var(--spacing-xl)]",small:"size-[20px] rounded-small [--icon-size:var(--spacing-l)]"},isDisabled:{true:"not-dtk-selected:icon-disabled dtk-selected:cursor-default not-dtk-selected:cursor-not-allowed not-dtk-selected:bg-interactive-disabled dtk-selected:hover:bg-transparent not-dtk-selected:hover:bg-interactive-disabled dtk-selected:focus:bg-transparent not-dtk-selected:focus:bg-interactive-disabled",false:""}},defaultVariants:{isDisabled:false,size:"medium",variant:"primary"}}),o=({className:e,size:t="medium",variant:l="secondary",isDisabled:i,...s})=>(expectsIconWrapper({children:s.children,componentName:o.displayName}),jsx(ToggleButton,{className:composeRenderProps(e,a=>cn(r({isDisabled:i,size:t,variant:l,className:a}))),isDisabled:i,...s}));o.displayName="ToggleIconButton";o.as=(e,t)=>cn(r({...e,className:t}));export{o as ToggleIconButton};//# sourceMappingURL=index.js.map
|
2
|
-
//# sourceMappingURL=index.js.map
|