@vsn-ux/gaia-styles 0.1.2 → 0.1.4
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/all-no-reset-10pt.css +45 -9
- package/dist/all-no-reset.css +45 -9
- package/dist/all.css +45 -9
- package/dist/components/radio-button.css +25 -6
- package/dist/components.css +25 -6
- package/dist/design-tokens.css +16 -3
- package/dist/design-tokens.d.ts +13 -0
- package/dist/design-tokens.js +180 -24
- package/package.json +1 -1
- package/src/design-tokens/dtcg-tokens.json +44 -3
- package/src/styles/components/radio-button.css +23 -3
- package/src/styles/theme.css +4 -0
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
5
|
+
--ga-color-blue-60: #366af6;
|
|
5
6
|
--ga-color-blue-70: #1f4ddb;
|
|
6
7
|
--ga-color-border-action: var(--ga-color-primary);
|
|
7
8
|
--ga-color-border-action-hover: var(--ga-color-primary-60);
|
|
@@ -18,16 +19,27 @@
|
|
|
18
19
|
--ga-color-cyan-70: #2a6480;
|
|
19
20
|
--ga-color-cyan-80: #1f4e66;
|
|
20
21
|
--ga-color-cyan-90: #133445;
|
|
21
|
-
--ga-color-error: var(--ga-color-red-
|
|
22
|
+
--ga-color-error: var(--ga-color-red-60);
|
|
22
23
|
--ga-color-error-light: var(--ga-color-utility-red-light);
|
|
23
24
|
--ga-color-green-10: #eef5ee;
|
|
24
25
|
--ga-color-green-40: #9bc59b;
|
|
26
|
+
--ga-color-green-60: #448548;
|
|
25
27
|
--ga-color-green-70: #2e6b31;
|
|
26
28
|
--ga-color-grey-10: #f2f2f2;
|
|
27
29
|
--ga-color-grey-40: #b9b9b9;
|
|
30
|
+
--ga-color-icon-action: var(--ga-color-primary);
|
|
31
|
+
--ga-color-icon-action-hover: var(--ga-color-primary-60);
|
|
32
|
+
--ga-color-icon-error: var(--ga-color-error);
|
|
33
|
+
--ga-color-icon-information: var(--ga-color-information);
|
|
34
|
+
--ga-color-icon-on-action: var(--ga-color-secondary);
|
|
35
|
+
--ga-color-icon-on-disabled: var(--ga-color-utility-grey);
|
|
36
|
+
--ga-color-icon-on-primary: var(--ga-color-white);
|
|
37
|
+
--ga-color-icon-primary: var(--ga-color-primary-90);
|
|
38
|
+
--ga-color-icon-success: var(--ga-color-success);
|
|
39
|
+
--ga-color-icon-warning: var(--ga-color-warning);
|
|
28
40
|
--ga-color-indigo-10: #f0f2fe;
|
|
29
41
|
--ga-color-indigo-40: #adb4f9;
|
|
30
|
-
--ga-color-information: var(--ga-color-blue-
|
|
42
|
+
--ga-color-information: var(--ga-color-blue-60);
|
|
31
43
|
--ga-color-information-light: var(--ga-color-utility-blue-light);
|
|
32
44
|
--ga-color-lime-10: #edf6dd;
|
|
33
45
|
--ga-color-lime-40: #a5c656;
|
|
@@ -52,13 +64,14 @@
|
|
|
52
64
|
--ga-color-purple-40: #c3acf9;
|
|
53
65
|
--ga-color-red-10: #fcf1ee;
|
|
54
66
|
--ga-color-red-40: #eca79e;
|
|
67
|
+
--ga-color-red-60: #cc453e;
|
|
55
68
|
--ga-color-red-70: #b0241d;
|
|
56
69
|
--ga-color-rose-10: #fcf0f4;
|
|
57
70
|
--ga-color-rose-40: #efa1bd;
|
|
58
71
|
--ga-color-secondary: var(--ga-color-orange-20);
|
|
59
72
|
--ga-color-secondary-10: var(--ga-color-orange-10);
|
|
60
73
|
--ga-color-secondary-30: var(--ga-color-orange-30);
|
|
61
|
-
--ga-color-success: var(--ga-color-green-
|
|
74
|
+
--ga-color-success: var(--ga-color-green-60);
|
|
62
75
|
--ga-color-success-light: var(--ga-color-utility-green-light);
|
|
63
76
|
--ga-color-surface-action: var(--ga-color-primary);
|
|
64
77
|
--ga-color-surface-action-hover: var(--ga-color-primary-90);
|
|
@@ -162,8 +175,10 @@
|
|
|
162
175
|
--color-cyan-90: var(--ga-color-cyan-90);
|
|
163
176
|
--color-blue-10: var(--ga-color-blue-10);
|
|
164
177
|
--color-blue-40: var(--ga-color-blue-40);
|
|
178
|
+
--color-blue-60: var(--ga-color-blue-60);
|
|
165
179
|
--color-green-10: var(--ga-color-green-10);
|
|
166
180
|
--color-green-40: var(--ga-color-green-40);
|
|
181
|
+
--color-green-60: var(--ga-color-green-60);
|
|
167
182
|
--color-grey-10: var(--ga-color-grey-10);
|
|
168
183
|
--color-grey-40: var(--ga-color-grey-40);
|
|
169
184
|
--color-indigo-10: var(--ga-color-indigo-10);
|
|
@@ -178,12 +193,14 @@
|
|
|
178
193
|
--color-orange-20: var(--ga-color-orange-20);
|
|
179
194
|
--color-orange-30: var(--ga-color-orange-30);
|
|
180
195
|
--color-orange-40: var(--ga-color-orange-40);
|
|
196
|
+
--color-orange-60: var(--ga-color-orange-60);
|
|
181
197
|
--color-pink-10: var(--ga-color-pink-10);
|
|
182
198
|
--color-pink-40: var(--ga-color-pink-40);
|
|
183
199
|
--color-purple-10: var(--ga-color-purple-10);
|
|
184
200
|
--color-purple-40: var(--ga-color-purple-40);
|
|
185
201
|
--color-red-10: var(--ga-color-red-10);
|
|
186
202
|
--color-red-40: var(--ga-color-red-40);
|
|
203
|
+
--color-red-60: var(--ga-color-red-60);
|
|
187
204
|
--color-rose-10: var(--ga-color-rose-10);
|
|
188
205
|
--color-rose-40: var(--ga-color-rose-40);
|
|
189
206
|
--color-teal-10: var(--ga-color-teal-10);
|
|
@@ -776,8 +793,8 @@
|
|
|
776
793
|
top: calc(1/2 * 100%);
|
|
777
794
|
left: calc(1/2 * 100%);
|
|
778
795
|
display: block;
|
|
779
|
-
height: calc(0.4rem *
|
|
780
|
-
width: calc(0.4rem *
|
|
796
|
+
height: calc(0.4rem * 1);
|
|
797
|
+
width: calc(0.4rem * 1);
|
|
781
798
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
782
799
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
783
800
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
@@ -791,10 +808,29 @@
|
|
|
791
808
|
.ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
|
|
792
809
|
background-color: var(--ga-color-surface-action-hover);
|
|
793
810
|
}
|
|
794
|
-
.ga-radio-button__native:disabled
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
811
|
+
.ga-radio-button__native:disabled {
|
|
812
|
+
~ .ga-radio-button__marker {
|
|
813
|
+
border-color: var(--ga-color-border-disabled);
|
|
814
|
+
background-color: var(--ga-color-surface-disabled);
|
|
815
|
+
color: var(--ga-color-text-disabled);
|
|
816
|
+
}
|
|
817
|
+
~ .ga-radio-button__label {
|
|
818
|
+
color: var(--ga-color-text-disabled);
|
|
819
|
+
}
|
|
820
|
+
&:checked ~ .ga-radio-button__marker::after {
|
|
821
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
&.ga-radio-button--invalid {
|
|
825
|
+
.ga-radio-button__marker {
|
|
826
|
+
border-color: var(--ga-color-border-error);
|
|
827
|
+
background-color: var(--ga-color-surface-error);
|
|
828
|
+
color: var(--ga-color-border-error);
|
|
829
|
+
}
|
|
830
|
+
.ga-radio-button__native:checked ~ .ga-radio-button__marker {
|
|
831
|
+
background-color: var(--ga-color-border-error);
|
|
832
|
+
color: var(--ga-color-border-error);
|
|
833
|
+
}
|
|
798
834
|
}
|
|
799
835
|
.ga-radio-button__label {
|
|
800
836
|
min-height: calc(0.4rem * 4);
|
package/dist/all-no-reset.css
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
5
|
+
--ga-color-blue-60: #366af6;
|
|
5
6
|
--ga-color-blue-70: #1f4ddb;
|
|
6
7
|
--ga-color-border-action: var(--ga-color-primary);
|
|
7
8
|
--ga-color-border-action-hover: var(--ga-color-primary-60);
|
|
@@ -18,16 +19,27 @@
|
|
|
18
19
|
--ga-color-cyan-70: #2a6480;
|
|
19
20
|
--ga-color-cyan-80: #1f4e66;
|
|
20
21
|
--ga-color-cyan-90: #133445;
|
|
21
|
-
--ga-color-error: var(--ga-color-red-
|
|
22
|
+
--ga-color-error: var(--ga-color-red-60);
|
|
22
23
|
--ga-color-error-light: var(--ga-color-utility-red-light);
|
|
23
24
|
--ga-color-green-10: #eef5ee;
|
|
24
25
|
--ga-color-green-40: #9bc59b;
|
|
26
|
+
--ga-color-green-60: #448548;
|
|
25
27
|
--ga-color-green-70: #2e6b31;
|
|
26
28
|
--ga-color-grey-10: #f2f2f2;
|
|
27
29
|
--ga-color-grey-40: #b9b9b9;
|
|
30
|
+
--ga-color-icon-action: var(--ga-color-primary);
|
|
31
|
+
--ga-color-icon-action-hover: var(--ga-color-primary-60);
|
|
32
|
+
--ga-color-icon-error: var(--ga-color-error);
|
|
33
|
+
--ga-color-icon-information: var(--ga-color-information);
|
|
34
|
+
--ga-color-icon-on-action: var(--ga-color-secondary);
|
|
35
|
+
--ga-color-icon-on-disabled: var(--ga-color-utility-grey);
|
|
36
|
+
--ga-color-icon-on-primary: var(--ga-color-white);
|
|
37
|
+
--ga-color-icon-primary: var(--ga-color-primary-90);
|
|
38
|
+
--ga-color-icon-success: var(--ga-color-success);
|
|
39
|
+
--ga-color-icon-warning: var(--ga-color-warning);
|
|
28
40
|
--ga-color-indigo-10: #f0f2fe;
|
|
29
41
|
--ga-color-indigo-40: #adb4f9;
|
|
30
|
-
--ga-color-information: var(--ga-color-blue-
|
|
42
|
+
--ga-color-information: var(--ga-color-blue-60);
|
|
31
43
|
--ga-color-information-light: var(--ga-color-utility-blue-light);
|
|
32
44
|
--ga-color-lime-10: #edf6dd;
|
|
33
45
|
--ga-color-lime-40: #a5c656;
|
|
@@ -52,13 +64,14 @@
|
|
|
52
64
|
--ga-color-purple-40: #c3acf9;
|
|
53
65
|
--ga-color-red-10: #fcf1ee;
|
|
54
66
|
--ga-color-red-40: #eca79e;
|
|
67
|
+
--ga-color-red-60: #cc453e;
|
|
55
68
|
--ga-color-red-70: #b0241d;
|
|
56
69
|
--ga-color-rose-10: #fcf0f4;
|
|
57
70
|
--ga-color-rose-40: #efa1bd;
|
|
58
71
|
--ga-color-secondary: var(--ga-color-orange-20);
|
|
59
72
|
--ga-color-secondary-10: var(--ga-color-orange-10);
|
|
60
73
|
--ga-color-secondary-30: var(--ga-color-orange-30);
|
|
61
|
-
--ga-color-success: var(--ga-color-green-
|
|
74
|
+
--ga-color-success: var(--ga-color-green-60);
|
|
62
75
|
--ga-color-success-light: var(--ga-color-utility-green-light);
|
|
63
76
|
--ga-color-surface-action: var(--ga-color-primary);
|
|
64
77
|
--ga-color-surface-action-hover: var(--ga-color-primary-90);
|
|
@@ -162,8 +175,10 @@
|
|
|
162
175
|
--color-cyan-90: var(--ga-color-cyan-90);
|
|
163
176
|
--color-blue-10: var(--ga-color-blue-10);
|
|
164
177
|
--color-blue-40: var(--ga-color-blue-40);
|
|
178
|
+
--color-blue-60: var(--ga-color-blue-60);
|
|
165
179
|
--color-green-10: var(--ga-color-green-10);
|
|
166
180
|
--color-green-40: var(--ga-color-green-40);
|
|
181
|
+
--color-green-60: var(--ga-color-green-60);
|
|
167
182
|
--color-grey-10: var(--ga-color-grey-10);
|
|
168
183
|
--color-grey-40: var(--ga-color-grey-40);
|
|
169
184
|
--color-indigo-10: var(--ga-color-indigo-10);
|
|
@@ -178,12 +193,14 @@
|
|
|
178
193
|
--color-orange-20: var(--ga-color-orange-20);
|
|
179
194
|
--color-orange-30: var(--ga-color-orange-30);
|
|
180
195
|
--color-orange-40: var(--ga-color-orange-40);
|
|
196
|
+
--color-orange-60: var(--ga-color-orange-60);
|
|
181
197
|
--color-pink-10: var(--ga-color-pink-10);
|
|
182
198
|
--color-pink-40: var(--ga-color-pink-40);
|
|
183
199
|
--color-purple-10: var(--ga-color-purple-10);
|
|
184
200
|
--color-purple-40: var(--ga-color-purple-40);
|
|
185
201
|
--color-red-10: var(--ga-color-red-10);
|
|
186
202
|
--color-red-40: var(--ga-color-red-40);
|
|
203
|
+
--color-red-60: var(--ga-color-red-60);
|
|
187
204
|
--color-rose-10: var(--ga-color-rose-10);
|
|
188
205
|
--color-rose-40: var(--ga-color-rose-40);
|
|
189
206
|
--color-teal-10: var(--ga-color-teal-10);
|
|
@@ -776,8 +793,8 @@
|
|
|
776
793
|
top: calc(1/2 * 100%);
|
|
777
794
|
left: calc(1/2 * 100%);
|
|
778
795
|
display: block;
|
|
779
|
-
height: calc(0.25rem *
|
|
780
|
-
width: calc(0.25rem *
|
|
796
|
+
height: calc(0.25rem * 1);
|
|
797
|
+
width: calc(0.25rem * 1);
|
|
781
798
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
782
799
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
783
800
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
@@ -791,10 +808,29 @@
|
|
|
791
808
|
.ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
|
|
792
809
|
background-color: var(--ga-color-surface-action-hover);
|
|
793
810
|
}
|
|
794
|
-
.ga-radio-button__native:disabled
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
811
|
+
.ga-radio-button__native:disabled {
|
|
812
|
+
~ .ga-radio-button__marker {
|
|
813
|
+
border-color: var(--ga-color-border-disabled);
|
|
814
|
+
background-color: var(--ga-color-surface-disabled);
|
|
815
|
+
color: var(--ga-color-text-disabled);
|
|
816
|
+
}
|
|
817
|
+
~ .ga-radio-button__label {
|
|
818
|
+
color: var(--ga-color-text-disabled);
|
|
819
|
+
}
|
|
820
|
+
&:checked ~ .ga-radio-button__marker::after {
|
|
821
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
&.ga-radio-button--invalid {
|
|
825
|
+
.ga-radio-button__marker {
|
|
826
|
+
border-color: var(--ga-color-border-error);
|
|
827
|
+
background-color: var(--ga-color-surface-error);
|
|
828
|
+
color: var(--ga-color-border-error);
|
|
829
|
+
}
|
|
830
|
+
.ga-radio-button__native:checked ~ .ga-radio-button__marker {
|
|
831
|
+
background-color: var(--ga-color-border-error);
|
|
832
|
+
color: var(--ga-color-border-error);
|
|
833
|
+
}
|
|
798
834
|
}
|
|
799
835
|
.ga-radio-button__label {
|
|
800
836
|
min-height: calc(0.25rem * 4);
|
package/dist/all.css
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--ga-color-blue-10: #edf4fe;
|
|
4
4
|
--ga-color-blue-40: #93bbf9;
|
|
5
|
+
--ga-color-blue-60: #366af6;
|
|
5
6
|
--ga-color-blue-70: #1f4ddb;
|
|
6
7
|
--ga-color-border-action: var(--ga-color-primary);
|
|
7
8
|
--ga-color-border-action-hover: var(--ga-color-primary-60);
|
|
@@ -18,16 +19,27 @@
|
|
|
18
19
|
--ga-color-cyan-70: #2a6480;
|
|
19
20
|
--ga-color-cyan-80: #1f4e66;
|
|
20
21
|
--ga-color-cyan-90: #133445;
|
|
21
|
-
--ga-color-error: var(--ga-color-red-
|
|
22
|
+
--ga-color-error: var(--ga-color-red-60);
|
|
22
23
|
--ga-color-error-light: var(--ga-color-utility-red-light);
|
|
23
24
|
--ga-color-green-10: #eef5ee;
|
|
24
25
|
--ga-color-green-40: #9bc59b;
|
|
26
|
+
--ga-color-green-60: #448548;
|
|
25
27
|
--ga-color-green-70: #2e6b31;
|
|
26
28
|
--ga-color-grey-10: #f2f2f2;
|
|
27
29
|
--ga-color-grey-40: #b9b9b9;
|
|
30
|
+
--ga-color-icon-action: var(--ga-color-primary);
|
|
31
|
+
--ga-color-icon-action-hover: var(--ga-color-primary-60);
|
|
32
|
+
--ga-color-icon-error: var(--ga-color-error);
|
|
33
|
+
--ga-color-icon-information: var(--ga-color-information);
|
|
34
|
+
--ga-color-icon-on-action: var(--ga-color-secondary);
|
|
35
|
+
--ga-color-icon-on-disabled: var(--ga-color-utility-grey);
|
|
36
|
+
--ga-color-icon-on-primary: var(--ga-color-white);
|
|
37
|
+
--ga-color-icon-primary: var(--ga-color-primary-90);
|
|
38
|
+
--ga-color-icon-success: var(--ga-color-success);
|
|
39
|
+
--ga-color-icon-warning: var(--ga-color-warning);
|
|
28
40
|
--ga-color-indigo-10: #f0f2fe;
|
|
29
41
|
--ga-color-indigo-40: #adb4f9;
|
|
30
|
-
--ga-color-information: var(--ga-color-blue-
|
|
42
|
+
--ga-color-information: var(--ga-color-blue-60);
|
|
31
43
|
--ga-color-information-light: var(--ga-color-utility-blue-light);
|
|
32
44
|
--ga-color-lime-10: #edf6dd;
|
|
33
45
|
--ga-color-lime-40: #a5c656;
|
|
@@ -52,13 +64,14 @@
|
|
|
52
64
|
--ga-color-purple-40: #c3acf9;
|
|
53
65
|
--ga-color-red-10: #fcf1ee;
|
|
54
66
|
--ga-color-red-40: #eca79e;
|
|
67
|
+
--ga-color-red-60: #cc453e;
|
|
55
68
|
--ga-color-red-70: #b0241d;
|
|
56
69
|
--ga-color-rose-10: #fcf0f4;
|
|
57
70
|
--ga-color-rose-40: #efa1bd;
|
|
58
71
|
--ga-color-secondary: var(--ga-color-orange-20);
|
|
59
72
|
--ga-color-secondary-10: var(--ga-color-orange-10);
|
|
60
73
|
--ga-color-secondary-30: var(--ga-color-orange-30);
|
|
61
|
-
--ga-color-success: var(--ga-color-green-
|
|
74
|
+
--ga-color-success: var(--ga-color-green-60);
|
|
62
75
|
--ga-color-success-light: var(--ga-color-utility-green-light);
|
|
63
76
|
--ga-color-surface-action: var(--ga-color-primary);
|
|
64
77
|
--ga-color-surface-action-hover: var(--ga-color-primary-90);
|
|
@@ -162,8 +175,10 @@
|
|
|
162
175
|
--color-cyan-90: var(--ga-color-cyan-90);
|
|
163
176
|
--color-blue-10: var(--ga-color-blue-10);
|
|
164
177
|
--color-blue-40: var(--ga-color-blue-40);
|
|
178
|
+
--color-blue-60: var(--ga-color-blue-60);
|
|
165
179
|
--color-green-10: var(--ga-color-green-10);
|
|
166
180
|
--color-green-40: var(--ga-color-green-40);
|
|
181
|
+
--color-green-60: var(--ga-color-green-60);
|
|
167
182
|
--color-grey-10: var(--ga-color-grey-10);
|
|
168
183
|
--color-grey-40: var(--ga-color-grey-40);
|
|
169
184
|
--color-indigo-10: var(--ga-color-indigo-10);
|
|
@@ -178,12 +193,14 @@
|
|
|
178
193
|
--color-orange-20: var(--ga-color-orange-20);
|
|
179
194
|
--color-orange-30: var(--ga-color-orange-30);
|
|
180
195
|
--color-orange-40: var(--ga-color-orange-40);
|
|
196
|
+
--color-orange-60: var(--ga-color-orange-60);
|
|
181
197
|
--color-pink-10: var(--ga-color-pink-10);
|
|
182
198
|
--color-pink-40: var(--ga-color-pink-40);
|
|
183
199
|
--color-purple-10: var(--ga-color-purple-10);
|
|
184
200
|
--color-purple-40: var(--ga-color-purple-40);
|
|
185
201
|
--color-red-10: var(--ga-color-red-10);
|
|
186
202
|
--color-red-40: var(--ga-color-red-40);
|
|
203
|
+
--color-red-60: var(--ga-color-red-60);
|
|
187
204
|
--color-rose-10: var(--ga-color-rose-10);
|
|
188
205
|
--color-rose-40: var(--ga-color-rose-40);
|
|
189
206
|
--color-teal-10: var(--ga-color-teal-10);
|
|
@@ -917,8 +934,8 @@
|
|
|
917
934
|
top: calc(1/2 * 100%);
|
|
918
935
|
left: calc(1/2 * 100%);
|
|
919
936
|
display: block;
|
|
920
|
-
height: calc(0.25rem *
|
|
921
|
-
width: calc(0.25rem *
|
|
937
|
+
height: calc(0.25rem * 1);
|
|
938
|
+
width: calc(0.25rem * 1);
|
|
922
939
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
923
940
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
924
941
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
@@ -932,10 +949,29 @@
|
|
|
932
949
|
.ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
|
|
933
950
|
background-color: var(--ga-color-surface-action-hover);
|
|
934
951
|
}
|
|
935
|
-
.ga-radio-button__native:disabled
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
952
|
+
.ga-radio-button__native:disabled {
|
|
953
|
+
~ .ga-radio-button__marker {
|
|
954
|
+
border-color: var(--ga-color-border-disabled);
|
|
955
|
+
background-color: var(--ga-color-surface-disabled);
|
|
956
|
+
color: var(--ga-color-text-disabled);
|
|
957
|
+
}
|
|
958
|
+
~ .ga-radio-button__label {
|
|
959
|
+
color: var(--ga-color-text-disabled);
|
|
960
|
+
}
|
|
961
|
+
&:checked ~ .ga-radio-button__marker::after {
|
|
962
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
963
|
+
}
|
|
964
|
+
}
|
|
965
|
+
&.ga-radio-button--invalid {
|
|
966
|
+
.ga-radio-button__marker {
|
|
967
|
+
border-color: var(--ga-color-border-error);
|
|
968
|
+
background-color: var(--ga-color-surface-error);
|
|
969
|
+
color: var(--ga-color-border-error);
|
|
970
|
+
}
|
|
971
|
+
.ga-radio-button__native:checked ~ .ga-radio-button__marker {
|
|
972
|
+
background-color: var(--ga-color-border-error);
|
|
973
|
+
color: var(--ga-color-border-error);
|
|
974
|
+
}
|
|
939
975
|
}
|
|
940
976
|
.ga-radio-button__label {
|
|
941
977
|
min-height: calc(0.25rem * 4);
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
top: calc(1/2 * 100%);
|
|
45
45
|
left: calc(1/2 * 100%);
|
|
46
46
|
display: block;
|
|
47
|
-
height: calc(0.25rem *
|
|
48
|
-
width: calc(0.25rem *
|
|
47
|
+
height: calc(0.25rem * 1);
|
|
48
|
+
width: calc(0.25rem * 1);
|
|
49
49
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
50
50
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
51
51
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
@@ -59,10 +59,29 @@
|
|
|
59
59
|
.ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
|
|
60
60
|
background-color: var(--ga-color-surface-action-hover);
|
|
61
61
|
}
|
|
62
|
-
.ga-radio-button__native:disabled
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
.ga-radio-button__native:disabled {
|
|
63
|
+
~ .ga-radio-button__marker {
|
|
64
|
+
border-color: var(--ga-color-border-disabled);
|
|
65
|
+
background-color: var(--ga-color-surface-disabled);
|
|
66
|
+
color: var(--ga-color-text-disabled);
|
|
67
|
+
}
|
|
68
|
+
~ .ga-radio-button__label {
|
|
69
|
+
color: var(--ga-color-text-disabled);
|
|
70
|
+
}
|
|
71
|
+
&:checked ~ .ga-radio-button__marker::after {
|
|
72
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
&.ga-radio-button--invalid {
|
|
76
|
+
.ga-radio-button__marker {
|
|
77
|
+
border-color: var(--ga-color-border-error);
|
|
78
|
+
background-color: var(--ga-color-surface-error);
|
|
79
|
+
color: var(--ga-color-border-error);
|
|
80
|
+
}
|
|
81
|
+
.ga-radio-button__native:checked ~ .ga-radio-button__marker {
|
|
82
|
+
background-color: var(--ga-color-border-error);
|
|
83
|
+
color: var(--ga-color-border-error);
|
|
84
|
+
}
|
|
66
85
|
}
|
|
67
86
|
.ga-radio-button__label {
|
|
68
87
|
min-height: calc(0.25rem * 4);
|
package/dist/components.css
CHANGED
|
@@ -534,8 +534,8 @@
|
|
|
534
534
|
top: calc(1/2 * 100%);
|
|
535
535
|
left: calc(1/2 * 100%);
|
|
536
536
|
display: block;
|
|
537
|
-
height: calc(0.25rem *
|
|
538
|
-
width: calc(0.25rem *
|
|
537
|
+
height: calc(0.25rem * 1);
|
|
538
|
+
width: calc(0.25rem * 1);
|
|
539
539
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
540
540
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
541
541
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
@@ -549,10 +549,29 @@
|
|
|
549
549
|
.ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
|
|
550
550
|
background-color: var(--ga-color-surface-action-hover);
|
|
551
551
|
}
|
|
552
|
-
.ga-radio-button__native:disabled
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
552
|
+
.ga-radio-button__native:disabled {
|
|
553
|
+
~ .ga-radio-button__marker {
|
|
554
|
+
border-color: var(--ga-color-border-disabled);
|
|
555
|
+
background-color: var(--ga-color-surface-disabled);
|
|
556
|
+
color: var(--ga-color-text-disabled);
|
|
557
|
+
}
|
|
558
|
+
~ .ga-radio-button__label {
|
|
559
|
+
color: var(--ga-color-text-disabled);
|
|
560
|
+
}
|
|
561
|
+
&:checked ~ .ga-radio-button__marker::after {
|
|
562
|
+
background-color: var(--ga-color-icon-on-disabled);
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
&.ga-radio-button--invalid {
|
|
566
|
+
.ga-radio-button__marker {
|
|
567
|
+
border-color: var(--ga-color-border-error);
|
|
568
|
+
background-color: var(--ga-color-surface-error);
|
|
569
|
+
color: var(--ga-color-border-error);
|
|
570
|
+
}
|
|
571
|
+
.ga-radio-button__native:checked ~ .ga-radio-button__marker {
|
|
572
|
+
background-color: var(--ga-color-border-error);
|
|
573
|
+
color: var(--ga-color-border-error);
|
|
574
|
+
}
|
|
556
575
|
}
|
|
557
576
|
.ga-radio-button__label {
|
|
558
577
|
min-height: calc(0.25rem * 4);
|
package/dist/design-tokens.css
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--ga-color-blue-10: #edf4fe;
|
|
7
7
|
--ga-color-blue-40: #93bbf9;
|
|
8
|
+
--ga-color-blue-60: #366af6;
|
|
8
9
|
--ga-color-blue-70: #1f4ddb;
|
|
9
10
|
--ga-color-border-action: var(--ga-color-primary);
|
|
10
11
|
--ga-color-border-action-hover: var(--ga-color-primary-60);
|
|
@@ -21,16 +22,27 @@
|
|
|
21
22
|
--ga-color-cyan-70: #2a6480;
|
|
22
23
|
--ga-color-cyan-80: #1f4e66;
|
|
23
24
|
--ga-color-cyan-90: #133445;
|
|
24
|
-
--ga-color-error: var(--ga-color-red-
|
|
25
|
+
--ga-color-error: var(--ga-color-red-60);
|
|
25
26
|
--ga-color-error-light: var(--ga-color-utility-red-light);
|
|
26
27
|
--ga-color-green-10: #eef5ee;
|
|
27
28
|
--ga-color-green-40: #9bc59b;
|
|
29
|
+
--ga-color-green-60: #448548;
|
|
28
30
|
--ga-color-green-70: #2e6b31;
|
|
29
31
|
--ga-color-grey-10: #f2f2f2;
|
|
30
32
|
--ga-color-grey-40: #b9b9b9;
|
|
33
|
+
--ga-color-icon-action: var(--ga-color-primary);
|
|
34
|
+
--ga-color-icon-action-hover: var(--ga-color-primary-60);
|
|
35
|
+
--ga-color-icon-error: var(--ga-color-error);
|
|
36
|
+
--ga-color-icon-information: var(--ga-color-information);
|
|
37
|
+
--ga-color-icon-on-action: var(--ga-color-secondary);
|
|
38
|
+
--ga-color-icon-on-disabled: var(--ga-color-utility-grey);
|
|
39
|
+
--ga-color-icon-on-primary: var(--ga-color-white);
|
|
40
|
+
--ga-color-icon-primary: var(--ga-color-primary-90);
|
|
41
|
+
--ga-color-icon-success: var(--ga-color-success);
|
|
42
|
+
--ga-color-icon-warning: var(--ga-color-warning);
|
|
31
43
|
--ga-color-indigo-10: #f0f2fe;
|
|
32
44
|
--ga-color-indigo-40: #adb4f9;
|
|
33
|
-
--ga-color-information: var(--ga-color-blue-
|
|
45
|
+
--ga-color-information: var(--ga-color-blue-60);
|
|
34
46
|
--ga-color-information-light: var(--ga-color-utility-blue-light);
|
|
35
47
|
--ga-color-lime-10: #edf6dd;
|
|
36
48
|
--ga-color-lime-40: #a5c656;
|
|
@@ -55,13 +67,14 @@
|
|
|
55
67
|
--ga-color-purple-40: #c3acf9;
|
|
56
68
|
--ga-color-red-10: #fcf1ee;
|
|
57
69
|
--ga-color-red-40: #eca79e;
|
|
70
|
+
--ga-color-red-60: #cc453e;
|
|
58
71
|
--ga-color-red-70: #b0241d;
|
|
59
72
|
--ga-color-rose-10: #fcf0f4;
|
|
60
73
|
--ga-color-rose-40: #efa1bd;
|
|
61
74
|
--ga-color-secondary: var(--ga-color-orange-20);
|
|
62
75
|
--ga-color-secondary-10: var(--ga-color-orange-10);
|
|
63
76
|
--ga-color-secondary-30: var(--ga-color-orange-30);
|
|
64
|
-
--ga-color-success: var(--ga-color-green-
|
|
77
|
+
--ga-color-success: var(--ga-color-green-60);
|
|
65
78
|
--ga-color-success-light: var(--ga-color-utility-green-light);
|
|
66
79
|
--ga-color-surface-action: var(--ga-color-primary);
|
|
67
80
|
--ga-color-surface-action-hover: var(--ga-color-primary-90);
|
package/dist/design-tokens.d.ts
CHANGED
|
@@ -27,12 +27,15 @@ export declare const tokens: {
|
|
|
27
27
|
"color.neutral.60": Record<".", ColorTokenNormalized["$value"]>;
|
|
28
28
|
"color.blue.10": Record<".", ColorTokenNormalized["$value"]>;
|
|
29
29
|
"color.blue.40": Record<".", ColorTokenNormalized["$value"]>;
|
|
30
|
+
"color.blue.60": Record<".", ColorTokenNormalized["$value"]>;
|
|
30
31
|
"color.blue.70": Record<".", ColorTokenNormalized["$value"]>;
|
|
31
32
|
"color.green.10": Record<".", ColorTokenNormalized["$value"]>;
|
|
32
33
|
"color.green.40": Record<".", ColorTokenNormalized["$value"]>;
|
|
34
|
+
"color.green.60": Record<".", ColorTokenNormalized["$value"]>;
|
|
33
35
|
"color.green.70": Record<".", ColorTokenNormalized["$value"]>;
|
|
34
36
|
"color.red.10": Record<".", ColorTokenNormalized["$value"]>;
|
|
35
37
|
"color.red.40": Record<".", ColorTokenNormalized["$value"]>;
|
|
38
|
+
"color.red.60": Record<".", ColorTokenNormalized["$value"]>;
|
|
36
39
|
"color.red.70": Record<".", ColorTokenNormalized["$value"]>;
|
|
37
40
|
"color.grey.10": Record<".", ColorTokenNormalized["$value"]>;
|
|
38
41
|
"color.grey.40": Record<".", ColorTokenNormalized["$value"]>;
|
|
@@ -131,6 +134,16 @@ export declare const tokens: {
|
|
|
131
134
|
"color.border.action-hover": Record<".", ColorTokenNormalized["$value"]>;
|
|
132
135
|
"color.border.action-hover-2": Record<".", ColorTokenNormalized["$value"]>;
|
|
133
136
|
"color.border.focus": Record<".", ColorTokenNormalized["$value"]>;
|
|
137
|
+
"color.icon.primary": Record<".", ColorTokenNormalized["$value"]>;
|
|
138
|
+
"color.icon.on-primary": Record<".", ColorTokenNormalized["$value"]>;
|
|
139
|
+
"color.icon.action": Record<".", ColorTokenNormalized["$value"]>;
|
|
140
|
+
"color.icon.action-hover": Record<".", ColorTokenNormalized["$value"]>;
|
|
141
|
+
"color.icon.on-action": Record<".", ColorTokenNormalized["$value"]>;
|
|
142
|
+
"color.icon.information": Record<".", ColorTokenNormalized["$value"]>;
|
|
143
|
+
"color.icon.on-disabled": Record<".", ColorTokenNormalized["$value"]>;
|
|
144
|
+
"color.icon.success": Record<".", ColorTokenNormalized["$value"]>;
|
|
145
|
+
"color.icon.warning": Record<".", ColorTokenNormalized["$value"]>;
|
|
146
|
+
"color.icon.error": Record<".", ColorTokenNormalized["$value"]>;
|
|
134
147
|
"size.0": Record<".", DimensionTokenNormalized["$value"]>;
|
|
135
148
|
"size.2": Record<".", DimensionTokenNormalized["$value"]>;
|
|
136
149
|
"size.4": Record<".", DimensionTokenNormalized["$value"]>;
|
package/dist/design-tokens.js
CHANGED
|
@@ -219,6 +219,18 @@ export const tokens = {
|
|
|
219
219
|
"hex": "#93bbf9"
|
|
220
220
|
},
|
|
221
221
|
},
|
|
222
|
+
"color.blue.60": {
|
|
223
|
+
".": {
|
|
224
|
+
"colorSpace": "srgb",
|
|
225
|
+
"channels": [
|
|
226
|
+
0.21176470588235294,
|
|
227
|
+
0.41568627450980394,
|
|
228
|
+
0.9647058823529412
|
|
229
|
+
],
|
|
230
|
+
"alpha": 1,
|
|
231
|
+
"hex": "#366af6"
|
|
232
|
+
},
|
|
233
|
+
},
|
|
222
234
|
"color.blue.70": {
|
|
223
235
|
".": {
|
|
224
236
|
"colorSpace": "srgb",
|
|
@@ -255,6 +267,18 @@ export const tokens = {
|
|
|
255
267
|
"hex": "#9bc59b"
|
|
256
268
|
},
|
|
257
269
|
},
|
|
270
|
+
"color.green.60": {
|
|
271
|
+
".": {
|
|
272
|
+
"colorSpace": "srgb",
|
|
273
|
+
"channels": [
|
|
274
|
+
0.26666666666666666,
|
|
275
|
+
0.5215686274509804,
|
|
276
|
+
0.2823529411764706
|
|
277
|
+
],
|
|
278
|
+
"alpha": 1,
|
|
279
|
+
"hex": "#448548"
|
|
280
|
+
},
|
|
281
|
+
},
|
|
258
282
|
"color.green.70": {
|
|
259
283
|
".": {
|
|
260
284
|
"colorSpace": "srgb",
|
|
@@ -291,6 +315,18 @@ export const tokens = {
|
|
|
291
315
|
"hex": "#eca79e"
|
|
292
316
|
},
|
|
293
317
|
},
|
|
318
|
+
"color.red.60": {
|
|
319
|
+
".": {
|
|
320
|
+
"colorSpace": "srgb",
|
|
321
|
+
"channels": [
|
|
322
|
+
0.8,
|
|
323
|
+
0.27058823529411763,
|
|
324
|
+
0.24313725490196078
|
|
325
|
+
],
|
|
326
|
+
"alpha": 1,
|
|
327
|
+
"hex": "#cc453e"
|
|
328
|
+
},
|
|
329
|
+
},
|
|
294
330
|
"color.red.70": {
|
|
295
331
|
".": {
|
|
296
332
|
"colorSpace": "srgb",
|
|
@@ -967,12 +1003,12 @@ export const tokens = {
|
|
|
967
1003
|
".": {
|
|
968
1004
|
"colorSpace": "srgb",
|
|
969
1005
|
"channels": [
|
|
970
|
-
0.
|
|
971
|
-
0.
|
|
972
|
-
0.
|
|
1006
|
+
0.8,
|
|
1007
|
+
0.27058823529411763,
|
|
1008
|
+
0.24313725490196078
|
|
973
1009
|
],
|
|
974
1010
|
"alpha": 1,
|
|
975
|
-
"hex": "#
|
|
1011
|
+
"hex": "#cc453e"
|
|
976
1012
|
},
|
|
977
1013
|
},
|
|
978
1014
|
"color.error.light": {
|
|
@@ -991,12 +1027,12 @@ export const tokens = {
|
|
|
991
1027
|
".": {
|
|
992
1028
|
"colorSpace": "srgb",
|
|
993
1029
|
"channels": [
|
|
994
|
-
0.
|
|
995
|
-
0.
|
|
996
|
-
0.
|
|
1030
|
+
0.26666666666666666,
|
|
1031
|
+
0.5215686274509804,
|
|
1032
|
+
0.2823529411764706
|
|
997
1033
|
],
|
|
998
1034
|
"alpha": 1,
|
|
999
|
-
"hex": "#
|
|
1035
|
+
"hex": "#448548"
|
|
1000
1036
|
},
|
|
1001
1037
|
},
|
|
1002
1038
|
"color.success.light": {
|
|
@@ -1039,12 +1075,12 @@ export const tokens = {
|
|
|
1039
1075
|
".": {
|
|
1040
1076
|
"colorSpace": "srgb",
|
|
1041
1077
|
"channels": [
|
|
1042
|
-
0.
|
|
1043
|
-
0.
|
|
1044
|
-
0.
|
|
1078
|
+
0.21176470588235294,
|
|
1079
|
+
0.41568627450980394,
|
|
1080
|
+
0.9647058823529412
|
|
1045
1081
|
],
|
|
1046
1082
|
"alpha": 1,
|
|
1047
|
-
"hex": "#
|
|
1083
|
+
"hex": "#366af6"
|
|
1048
1084
|
},
|
|
1049
1085
|
},
|
|
1050
1086
|
"color.information.light": {
|
|
@@ -1375,24 +1411,24 @@ export const tokens = {
|
|
|
1375
1411
|
".": {
|
|
1376
1412
|
"colorSpace": "srgb",
|
|
1377
1413
|
"channels": [
|
|
1378
|
-
0.
|
|
1379
|
-
0.
|
|
1380
|
-
0.
|
|
1414
|
+
0.21176470588235294,
|
|
1415
|
+
0.41568627450980394,
|
|
1416
|
+
0.9647058823529412
|
|
1381
1417
|
],
|
|
1382
1418
|
"alpha": 1,
|
|
1383
|
-
"hex": "#
|
|
1419
|
+
"hex": "#366af6"
|
|
1384
1420
|
},
|
|
1385
1421
|
},
|
|
1386
1422
|
"color.border.success": {
|
|
1387
1423
|
".": {
|
|
1388
1424
|
"colorSpace": "srgb",
|
|
1389
1425
|
"channels": [
|
|
1390
|
-
0.
|
|
1391
|
-
0.
|
|
1392
|
-
0.
|
|
1426
|
+
0.26666666666666666,
|
|
1427
|
+
0.5215686274509804,
|
|
1428
|
+
0.2823529411764706
|
|
1393
1429
|
],
|
|
1394
1430
|
"alpha": 1,
|
|
1395
|
-
"hex": "#
|
|
1431
|
+
"hex": "#448548"
|
|
1396
1432
|
},
|
|
1397
1433
|
},
|
|
1398
1434
|
"color.border.warning": {
|
|
@@ -1411,12 +1447,12 @@ export const tokens = {
|
|
|
1411
1447
|
".": {
|
|
1412
1448
|
"colorSpace": "srgb",
|
|
1413
1449
|
"channels": [
|
|
1414
|
-
0.
|
|
1415
|
-
0.
|
|
1416
|
-
0.
|
|
1450
|
+
0.8,
|
|
1451
|
+
0.27058823529411763,
|
|
1452
|
+
0.24313725490196078
|
|
1417
1453
|
],
|
|
1418
1454
|
"alpha": 1,
|
|
1419
|
-
"hex": "#
|
|
1455
|
+
"hex": "#cc453e"
|
|
1420
1456
|
},
|
|
1421
1457
|
},
|
|
1422
1458
|
"color.border.action": {
|
|
@@ -1467,6 +1503,126 @@ export const tokens = {
|
|
|
1467
1503
|
"hex": "#1f4e66"
|
|
1468
1504
|
},
|
|
1469
1505
|
},
|
|
1506
|
+
"color.icon.primary": {
|
|
1507
|
+
".": {
|
|
1508
|
+
"colorSpace": "srgb",
|
|
1509
|
+
"channels": [
|
|
1510
|
+
0.07450980392156863,
|
|
1511
|
+
0.20392156862745098,
|
|
1512
|
+
0.27058823529411763
|
|
1513
|
+
],
|
|
1514
|
+
"alpha": 1,
|
|
1515
|
+
"hex": "#133445"
|
|
1516
|
+
},
|
|
1517
|
+
},
|
|
1518
|
+
"color.icon.on-primary": {
|
|
1519
|
+
".": {
|
|
1520
|
+
"colorSpace": "srgb",
|
|
1521
|
+
"channels": [
|
|
1522
|
+
1,
|
|
1523
|
+
1,
|
|
1524
|
+
1
|
|
1525
|
+
],
|
|
1526
|
+
"alpha": 1,
|
|
1527
|
+
"hex": "#ffffff"
|
|
1528
|
+
},
|
|
1529
|
+
},
|
|
1530
|
+
"color.icon.action": {
|
|
1531
|
+
".": {
|
|
1532
|
+
"colorSpace": "srgb",
|
|
1533
|
+
"channels": [
|
|
1534
|
+
0.12156862745098039,
|
|
1535
|
+
0.3058823529411765,
|
|
1536
|
+
0.4
|
|
1537
|
+
],
|
|
1538
|
+
"alpha": 1,
|
|
1539
|
+
"hex": "#1f4e66"
|
|
1540
|
+
},
|
|
1541
|
+
},
|
|
1542
|
+
"color.icon.action-hover": {
|
|
1543
|
+
".": {
|
|
1544
|
+
"colorSpace": "srgb",
|
|
1545
|
+
"channels": [
|
|
1546
|
+
0.21568627450980393,
|
|
1547
|
+
0.49411764705882355,
|
|
1548
|
+
0.6274509803921569
|
|
1549
|
+
],
|
|
1550
|
+
"alpha": 1,
|
|
1551
|
+
"hex": "#377ea0"
|
|
1552
|
+
},
|
|
1553
|
+
},
|
|
1554
|
+
"color.icon.on-action": {
|
|
1555
|
+
".": {
|
|
1556
|
+
"colorSpace": "srgb",
|
|
1557
|
+
"channels": [
|
|
1558
|
+
0.9803921568627451,
|
|
1559
|
+
0.8784313725490196,
|
|
1560
|
+
0.807843137254902
|
|
1561
|
+
],
|
|
1562
|
+
"alpha": 1,
|
|
1563
|
+
"hex": "#fae0ce"
|
|
1564
|
+
},
|
|
1565
|
+
},
|
|
1566
|
+
"color.icon.information": {
|
|
1567
|
+
".": {
|
|
1568
|
+
"colorSpace": "srgb",
|
|
1569
|
+
"channels": [
|
|
1570
|
+
0.21176470588235294,
|
|
1571
|
+
0.41568627450980394,
|
|
1572
|
+
0.9647058823529412
|
|
1573
|
+
],
|
|
1574
|
+
"alpha": 1,
|
|
1575
|
+
"hex": "#366af6"
|
|
1576
|
+
},
|
|
1577
|
+
},
|
|
1578
|
+
"color.icon.on-disabled": {
|
|
1579
|
+
".": {
|
|
1580
|
+
"colorSpace": "srgb",
|
|
1581
|
+
"channels": [
|
|
1582
|
+
0.7254901960784313,
|
|
1583
|
+
0.7254901960784313,
|
|
1584
|
+
0.7254901960784313
|
|
1585
|
+
],
|
|
1586
|
+
"alpha": 1,
|
|
1587
|
+
"hex": "#b9b9b9"
|
|
1588
|
+
},
|
|
1589
|
+
},
|
|
1590
|
+
"color.icon.success": {
|
|
1591
|
+
".": {
|
|
1592
|
+
"colorSpace": "srgb",
|
|
1593
|
+
"channels": [
|
|
1594
|
+
0.26666666666666666,
|
|
1595
|
+
0.5215686274509804,
|
|
1596
|
+
0.2823529411764706
|
|
1597
|
+
],
|
|
1598
|
+
"alpha": 1,
|
|
1599
|
+
"hex": "#448548"
|
|
1600
|
+
},
|
|
1601
|
+
},
|
|
1602
|
+
"color.icon.warning": {
|
|
1603
|
+
".": {
|
|
1604
|
+
"colorSpace": "srgb",
|
|
1605
|
+
"channels": [
|
|
1606
|
+
0.7333333333333333,
|
|
1607
|
+
0.34509803921568627,
|
|
1608
|
+
0.13333333333333333
|
|
1609
|
+
],
|
|
1610
|
+
"alpha": 1,
|
|
1611
|
+
"hex": "#bb5822"
|
|
1612
|
+
},
|
|
1613
|
+
},
|
|
1614
|
+
"color.icon.error": {
|
|
1615
|
+
".": {
|
|
1616
|
+
"colorSpace": "srgb",
|
|
1617
|
+
"channels": [
|
|
1618
|
+
0.8,
|
|
1619
|
+
0.27058823529411763,
|
|
1620
|
+
0.24313725490196078
|
|
1621
|
+
],
|
|
1622
|
+
"alpha": 1,
|
|
1623
|
+
"hex": "#cc453e"
|
|
1624
|
+
},
|
|
1625
|
+
},
|
|
1470
1626
|
"size.0": {
|
|
1471
1627
|
".": {
|
|
1472
1628
|
"value": 0,
|
package/package.json
CHANGED
|
@@ -60,6 +60,9 @@
|
|
|
60
60
|
"40": {
|
|
61
61
|
"$value": "#93BBF9"
|
|
62
62
|
},
|
|
63
|
+
"60": {
|
|
64
|
+
"$value": "#366AF6"
|
|
65
|
+
},
|
|
63
66
|
"70": {
|
|
64
67
|
"$value": "#1F4DDB"
|
|
65
68
|
}
|
|
@@ -71,6 +74,9 @@
|
|
|
71
74
|
"40": {
|
|
72
75
|
"$value": "#9BC59B"
|
|
73
76
|
},
|
|
77
|
+
"60": {
|
|
78
|
+
"$value": "#448548"
|
|
79
|
+
},
|
|
74
80
|
"70": {
|
|
75
81
|
"$value": "#2E6B31"
|
|
76
82
|
}
|
|
@@ -82,6 +88,9 @@
|
|
|
82
88
|
"40": {
|
|
83
89
|
"$value": "#ECA79E"
|
|
84
90
|
},
|
|
91
|
+
"60": {
|
|
92
|
+
"$value": "#CC453E"
|
|
93
|
+
},
|
|
85
94
|
"70": {
|
|
86
95
|
"$value": "#B0241D"
|
|
87
96
|
}
|
|
@@ -270,13 +279,13 @@
|
|
|
270
279
|
}
|
|
271
280
|
},
|
|
272
281
|
"error": {
|
|
273
|
-
"$value": "{color.red.
|
|
282
|
+
"$value": "{color.red.60}",
|
|
274
283
|
"light": {
|
|
275
284
|
"$value": "{color.utility.red.light}"
|
|
276
285
|
}
|
|
277
286
|
},
|
|
278
287
|
"success": {
|
|
279
|
-
"$value": "{color.green.
|
|
288
|
+
"$value": "{color.green.60}",
|
|
280
289
|
"light": {
|
|
281
290
|
"$value": "{color.utility.green.light}"
|
|
282
291
|
}
|
|
@@ -288,7 +297,7 @@
|
|
|
288
297
|
}
|
|
289
298
|
},
|
|
290
299
|
"information": {
|
|
291
|
-
"$value": "{color.blue.
|
|
300
|
+
"$value": "{color.blue.60}",
|
|
292
301
|
"light": {
|
|
293
302
|
"$value": "{color.utility.blue.light}"
|
|
294
303
|
}
|
|
@@ -400,6 +409,38 @@
|
|
|
400
409
|
"focus": {
|
|
401
410
|
"$value": "{color.primary}"
|
|
402
411
|
}
|
|
412
|
+
},
|
|
413
|
+
"icon": {
|
|
414
|
+
"primary": {
|
|
415
|
+
"$value": "{color.primary.90}"
|
|
416
|
+
},
|
|
417
|
+
"on-primary": {
|
|
418
|
+
"$value": "{color.white}"
|
|
419
|
+
},
|
|
420
|
+
"action": {
|
|
421
|
+
"$value": "{color.primary}"
|
|
422
|
+
},
|
|
423
|
+
"action-hover": {
|
|
424
|
+
"$value": "{color.primary.60}"
|
|
425
|
+
},
|
|
426
|
+
"on-action": {
|
|
427
|
+
"$value": "{color.secondary}"
|
|
428
|
+
},
|
|
429
|
+
"information": {
|
|
430
|
+
"$value": "{color.information}"
|
|
431
|
+
},
|
|
432
|
+
"on-disabled": {
|
|
433
|
+
"$value": "{color.utility.grey}"
|
|
434
|
+
},
|
|
435
|
+
"success": {
|
|
436
|
+
"$value": "{color.success}"
|
|
437
|
+
},
|
|
438
|
+
"warning": {
|
|
439
|
+
"$value": "{color.warning}"
|
|
440
|
+
},
|
|
441
|
+
"error": {
|
|
442
|
+
"$value": "{color.error}"
|
|
443
|
+
}
|
|
403
444
|
}
|
|
404
445
|
},
|
|
405
446
|
"size": {
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
@apply bg-(--ga-color-surface-action);
|
|
26
26
|
|
|
27
27
|
&::after {
|
|
28
|
-
@apply absolute top-1/2 left-1/2 block h-
|
|
28
|
+
@apply absolute top-1/2 left-1/2 block h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white content-[''];
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -34,8 +34,28 @@
|
|
|
34
34
|
@apply bg-(--ga-color-surface-action-hover);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.ga-radio-button__native:disabled
|
|
38
|
-
|
|
37
|
+
.ga-radio-button__native:disabled {
|
|
38
|
+
~ .ga-radio-button__marker {
|
|
39
|
+
@apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
~ .ga-radio-button__label {
|
|
43
|
+
@apply text-(--ga-color-text-disabled);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:checked ~ .ga-radio-button__marker::after {
|
|
47
|
+
@apply bg-(--ga-color-icon-on-disabled);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&.ga-radio-button--invalid {
|
|
52
|
+
.ga-radio-button__marker {
|
|
53
|
+
@apply border-(--ga-color-border-error) bg-(--ga-color-surface-error) text-(--ga-color-border-error);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ga-radio-button__native:checked ~ .ga-radio-button__marker {
|
|
57
|
+
@apply bg-(--ga-color-border-error) text-(--ga-color-border-error);
|
|
58
|
+
}
|
|
39
59
|
}
|
|
40
60
|
|
|
41
61
|
.ga-radio-button__label {
|
package/src/styles/theme.css
CHANGED
|
@@ -5,8 +5,10 @@
|
|
|
5
5
|
--color-cyan-90: var(--ga-color-cyan-90);
|
|
6
6
|
--color-blue-10: var(--ga-color-blue-10);
|
|
7
7
|
--color-blue-40: var(--ga-color-blue-40);
|
|
8
|
+
--color-blue-60: var(--ga-color-blue-60);
|
|
8
9
|
--color-green-10: var(--ga-color-green-10);
|
|
9
10
|
--color-green-40: var(--ga-color-green-40);
|
|
11
|
+
--color-green-60: var(--ga-color-green-60);
|
|
10
12
|
--color-grey-10: var(--ga-color-grey-10);
|
|
11
13
|
--color-grey-40: var(--ga-color-grey-40);
|
|
12
14
|
--color-indigo-10: var(--ga-color-indigo-10);
|
|
@@ -21,12 +23,14 @@
|
|
|
21
23
|
--color-orange-20: var(--ga-color-orange-20);
|
|
22
24
|
--color-orange-30: var(--ga-color-orange-30);
|
|
23
25
|
--color-orange-40: var(--ga-color-orange-40);
|
|
26
|
+
--color-orange-60: var(--ga-color-orange-60);
|
|
24
27
|
--color-pink-10: var(--ga-color-pink-10);
|
|
25
28
|
--color-pink-40: var(--ga-color-pink-40);
|
|
26
29
|
--color-purple-10: var(--ga-color-purple-10);
|
|
27
30
|
--color-purple-40: var(--ga-color-purple-40);
|
|
28
31
|
--color-red-10: var(--ga-color-red-10);
|
|
29
32
|
--color-red-40: var(--ga-color-red-40);
|
|
33
|
+
--color-red-60: var(--ga-color-red-60);
|
|
30
34
|
--color-rose-10: var(--ga-color-rose-10);
|
|
31
35
|
--color-rose-40: var(--ga-color-rose-40);
|
|
32
36
|
--color-teal-10: var(--ga-color-teal-10);
|