react-restyle-components 0.3.58 → 0.3.60

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.
@@ -1,60 +1,3 @@
1
- ._ :global(:root) {
2
- --border-radius-100: 0.5rem;
3
- --border-radius-200: 1rem;
4
- --border-radius-300: 1.5rem;
5
- --border-radius-400: 2rem;
6
- --border-radius-none: 0rem;
7
- --border-radius-round: 10000rem;
8
- --border-radius-025: 0.125rem;
9
- --border-radius-050: 0.25rem;
10
- --breakpoints-xs: 20rem;
11
- --breakpoints-sm: 23.4375rem;
12
- --breakpoints-md: 48rem;
13
- --breakpoints-lg: 64rem;
14
- --breakpoints-xl: 80rem;
15
- --breakpoints-xxl: 90rem;
16
- --opacity-10: 10%;
17
- --opacity-12: 12%;
18
- --opacity-20: 20%;
19
- --opacity-30: 30%;
20
- --opacity-40: 40%;
21
- --opacity-50: 50%;
22
- --opacity-60: 60%;
23
- --opacity-70: 70%;
24
- --opacity-75: 75%;
25
- --opacity-80: 80%;
26
- --opacity-90: 90%;
27
- --opacity-100: 100%;
28
- --opacity-none: 0%;
29
- --opacity-04: 4%;
30
- --opacity-08: 8%;
31
- --spacing-100: 0.5rem;
32
- --spacing-150: 0.75rem;
33
- --spacing-200: 1rem;
34
- --spacing-300: 1.5rem;
35
- --spacing-400: 2rem;
36
- --spacing-500: 2.5rem;
37
- --spacing-600: 3rem;
38
- --spacing-800: 4rem;
39
- --spacing-1000: 5rem;
40
- --spacing-1200: 6rem;
41
- --spacing-000: 0rem;
42
- --spacing-025: 0.125rem;
43
- --spacing-050: 0.25rem;
44
- --spacing-075: 0.375rem;
45
- --state-layer-none: 0%;
46
- --state-layer-hover: 8%;
47
- --state-layer-press: 12%;
48
- --state-layer-disabled: 12%;
49
- --state-layer-on-disabled: 30%;
50
- --state-layer-read-only: 8%;
51
- --state-layer-on-read-only: 70%;
52
- --state-layer-press-card: 4%;
53
- --stroke-card: 0.0625rem;
54
- --stroke-selected-card-hover: 0.125rem;
55
- --stroke-divider: 0.0625rem;
56
- }
57
-
58
1
  .theme-dark {
59
2
  --brand-white: #ffffff;
60
3
  --brand-black: #0c0e11;
@@ -138,7 +81,6 @@
138
81
  --gradient-light-stop-1: #370f5b;
139
82
  --gradient-light-stop-2: #001a42;
140
83
  }
141
- ._ :global(:root),
142
84
  .theme-light {
143
85
  --brand-white: #ffffff;
144
86
  --brand-black: #0c0e11;
@@ -1,157 +1,3 @@
1
- ._ :global(html).theme--dark {
2
- color-scheme: dark;
3
- }
4
- ._ :global(html).theme--light {
5
- color-scheme: light;
6
- }
7
-
8
- ._ :global(:root) {
9
- --B25: #ebf3ff;
10
- --B50: #dbeaff;
11
- --B100: #b2d2ff;
12
- --B200: #9bc5ff;
13
- --B300: #7ab1fd;
14
- --B400: #337ee7;
15
- --B500: #145bbf;
16
- --B600: #0c489c;
17
- --B700: #033273;
18
- --Brand: var(--B700);
19
-
20
- --A50: #e0feff;
21
- --A100: #adf8fb;
22
- --A200: #5ae8ed;
23
- --A300: #36dbe0;
24
- --A400: #1ac7cd;
25
- --A500: #16a8ad;
26
- --A600: #108b8f;
27
- --A700: #075255;
28
- --Accent: var(--A400);
29
-
30
- --N0: #ffffff;
31
- --N25: #f9f9f9;
32
- --N50: #f2f2f2;
33
- --N75: #e6e6e6;
34
- --N100: #dbdbdb;
35
- --N200: #cbcbcb;
36
- --N300: #b5b5b5;
37
- --N400: #a4a2a2;
38
- --N500: #808080;
39
- --N600: #4d4d4d;
40
- --N700: #242323;
41
- --N1000: #000000;
42
- --Natural: var(--N700);
43
-
44
- --Gl25: #f7f9fc;
45
- --Gl50: #e7edf8;
46
- --Gl100: #d6e1f4;
47
- --Gl200: #b9c8e7;
48
- --Gl300: #9babd1;
49
- --Gl400: #7a89b1;
50
- --Gl500: #566384;
51
- --Gl600: #4a5777;
52
- --Gl700: #3f4b6a;
53
- --Gl800: #2e3750;
54
- --Gl850: #262e43;
55
- --Gl900: #1e2537;
56
- --Gl950: #1b1d24;
57
- --Glacious: var(--Gl800);
58
-
59
- --HO50: #ffded5;
60
- --HO100: #feb9a5;
61
- --HO200: #ff906e;
62
- --HO300: #ff784f;
63
- --HO400: #ff5d2d;
64
- --HO500: #eb4d13;
65
- --HO600: #7e2600;
66
- --HO700: #421604;
67
- --HotOrange: var(--HO400);
68
-
69
- --Y50: #fbf3e0;
70
- --Y100: #f9e3b6;
71
- --Y200: #fcc003;
72
- --Y300: #e4a201;
73
- --Y400: #ca8501;
74
- --Y500: #a35803;
75
- --Y600: #6f3400;
76
- --Y700: #2e2204;
77
- --Yellow: var(--Y200);
78
-
79
- --Gr25: #eafae6;
80
- --Gr50: #cdefc4;
81
- --Gr100: #91db8b;
82
- --Gr200: #45c65a;
83
- --Gr300: #3ba755;
84
- --Gr400: #2e844a;
85
- --Gr500: #22683e;
86
- --Gr600: #194e31;
87
- --Gr700: #0e3522;
88
- --Green: var(--Gr300);
89
-
90
- --CB50: #cfe9fe;
91
- --CB100: #90d0fe;
92
- --CB200: #1ab9ff;
93
- --CB300: #08abed;
94
- --CB400: #0d9dda;
95
- --CB500: #107cad;
96
- --CB600: #084968;
97
- --CB700: #023248;
98
- --CloudBlue: var(--CB500);
99
-
100
- --I50: #e0e5f8;
101
- --I100: #bec7f6;
102
- --I200: #9ea9f1;
103
- --I300: #8e9bef;
104
- --I400: #7f8ced;
105
- --I500: #5867e8;
106
- --I600: #3a49da;
107
- --I700: #260f8f;
108
- --Indigo: var(--I500);
109
-
110
- --Pu50: #ece1f9;
111
- --Pu100: #d7bff2;
112
- --Pu200: #c29ef1;
113
- --Pu300: #b78def;
114
- --Pu400: #ad7bee;
115
- --Pu500: #9050e9;
116
- --Pu600: #7526e3;
117
- --Pu700: #401075;
118
- --Purple: var(--Pu500);
119
-
120
- --V50: #f2defe;
121
- --V100: #e5b9fe;
122
- --V200: #d892fe;
123
- --V300: #d384fe;
124
- --V400: #cb65ff;
125
- --V500: #ba01ff;
126
- --V600: #7b119a;
127
- --V700: #3d0157;
128
- --Violet: var(--V500);
129
-
130
- --Pi50: #fddde3;
131
- --Pi100: #fdb6c5;
132
- --Pi200: #fe8aa7;
133
- --Pi300: #fe7298;
134
- --Pi400: #ff538a;
135
- --Pi500: #e3066a;
136
- --Pi600: #b60554;
137
- --Pi700: #61022a;
138
- --Pink: var(--Pi400);
139
-
140
- --R25: #fcece8;
141
- --R50: #ffdfd7;
142
- --R100: #feb8ab;
143
- --R200: #fe8f7d;
144
- --R300: #fe7765;
145
- --R400: #fe5c4c;
146
- --R500: #ee3e3e;
147
- --R600: #ba0517;
148
- --R700: #640103;
149
- --Red: var(--R400);
150
-
151
- --color-impersonation-start: #ec4b4b;
152
- --color-bloomberg: #fe9c29;
153
- }
154
-
155
1
  .theme--dark {
156
2
  --global-focus-color: var(--B300);
157
3
  --global-window-border-color: var(--Gl800);
@@ -5,31 +5,3 @@
5
5
  .origin-0 {
6
6
  transform-origin: 0%;
7
7
  }
8
-
9
- ._ :global(input:focus) ~ label,
10
- ._ :global(input:not(:placeholder-shown)) ~ label,
11
- ._ :global(textarea:focus) ~ label,
12
- ._ :global(textarea:not(:placeholder-shown)) ~ label,
13
- ._ :global(select:focus) ~ label,
14
- ._ :global(select:not([value='']):valid) ~ label {
15
- /* @apply transform; scale-75; -translate-y-6; */
16
- --tw-translate-x: 0;
17
- --tw-translate-y: 0;
18
- --tw-rotate: 0;
19
- --tw-skew-x: 0;
20
- --tw-skew-y: 0;
21
- transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
22
- rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
23
- scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
24
- --tw-scale-x: 0.75;
25
- --tw-scale-y: 0.75;
26
- --tw-translate-y: -1.5rem;
27
- }
28
-
29
- ._ :global(input:focus) ~ label,
30
- ._ :global(select:focus) ~ label {
31
- /* @apply text-black; left-0; */
32
- --tw-text-opacity: 1;
33
- color: '#696969';
34
- left: 0px;
35
- }
@@ -5,31 +5,3 @@
5
5
  .origin-0 {
6
6
  transform-origin: 0%;
7
7
  }
8
-
9
- ._ :global(input:focus) ~ label,
10
- ._ :global(input:not(:placeholder-shown)) ~ label,
11
- ._ :global(textarea:focus) ~ label,
12
- ._ :global(textarea:not(:placeholder-shown)) ~ label,
13
- ._ :global(select:focus) ~ label,
14
- ._ :global(select:not([value='']):valid) ~ label {
15
- /* @apply transform; scale-75; -translate-y-6; */
16
- --tw-translate-x: 0;
17
- --tw-translate-y: 0;
18
- --tw-rotate: 0;
19
- --tw-skew-x: 0;
20
- --tw-skew-y: 0;
21
- transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
22
- rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
23
- scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
24
- --tw-scale-x: 0.75;
25
- --tw-scale-y: 0.75;
26
- --tw-translate-y: -1.5rem;
27
- }
28
-
29
- ._ :global(input:focus) ~ label,
30
- ._ :global(select:focus) ~ label {
31
- /* @apply text-black; left-0; */
32
- --tw-text-opacity: 1;
33
- color: '#696969';
34
- left: 0px;
35
- }
@@ -1,4 +1,4 @@
1
- @import "./assets/css/tokens.css";
1
+ @import './assets/css/tokens.css';
2
2
  @tailwind base;
3
3
  @tailwind components;
4
4
  @tailwind utilities;
@@ -17,9 +17,7 @@
17
17
  table tr:hover {
18
18
  @apply dark:bg-white;
19
19
  }
20
- ._ :global(select) {
21
- @apply dark:text-black;
22
- }
20
+
23
21
  .main {
24
22
  @apply bg-white;
25
23
  }
@@ -30,10 +28,6 @@
30
28
  @apply dark:bg-boxdark;
31
29
  }
32
30
  }
33
- ._ :global(body) {
34
- font-size: 14px;
35
- font-family: 'Arima Regular';
36
- }
37
31
 
38
32
  .ps__rail-y {
39
33
  background: none !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.3.58",
3
+ "version": "0.3.60",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {
@@ -1,3 +0,0 @@
1
- ._ :global(:root) {
2
- font-family: 'Inter var', sans-serif;
3
- }
@@ -1,518 +0,0 @@
1
- ._ :global(:root) {
2
- --border-radius-100: 0.5rem;
3
- --border-radius-200: 1rem;
4
- --border-radius-300: 1.5rem;
5
- --border-radius-400: 2rem;
6
- --border-radius-none: 0rem;
7
- --border-radius-round: 10000rem;
8
- --border-radius-025: 0.125rem;
9
- --border-radius-050: 0.25rem;
10
- --breakpoints-xs: 20rem;
11
- --breakpoints-sm: 23.4375rem;
12
- --breakpoints-md: 48rem;
13
- --breakpoints-lg: 64rem;
14
- --breakpoints-xl: 80rem;
15
- --breakpoints-xxl: 90rem;
16
- --opacity-10: 10%;
17
- --opacity-12: 12%;
18
- --opacity-20: 20%;
19
- --opacity-30: 30%;
20
- --opacity-40: 40%;
21
- --opacity-50: 50%;
22
- --opacity-60: 60%;
23
- --opacity-70: 70%;
24
- --opacity-75: 75%;
25
- --opacity-80: 80%;
26
- --opacity-90: 90%;
27
- --opacity-100: 100%;
28
- --opacity-none: 0%;
29
- --opacity-04: 4%;
30
- --opacity-08: 8%;
31
- --spacing-100: 0.5rem;
32
- --spacing-150: 0.75rem;
33
- --spacing-200: 1rem;
34
- --spacing-300: 1.5rem;
35
- --spacing-400: 2rem;
36
- --spacing-500: 2.5rem;
37
- --spacing-600: 3rem;
38
- --spacing-800: 4rem;
39
- --spacing-1000: 5rem;
40
- --spacing-1200: 6rem;
41
- --spacing-000: 0rem;
42
- --spacing-025: 0.125rem;
43
- --spacing-050: 0.25rem;
44
- --spacing-075: 0.375rem;
45
- --state-layer-none: 0%;
46
- --state-layer-hover: 8%;
47
- --state-layer-press: 12%;
48
- --state-layer-disabled: 12%;
49
- --state-layer-on-disabled: 30%;
50
- --state-layer-read-only: 8%;
51
- --state-layer-on-read-only: 70%;
52
- --state-layer-press-card: 4%;
53
- --stroke-card: 0.0625rem;
54
- --stroke-selected-card-hover: 0.125rem;
55
- --stroke-divider: 0.0625rem;
56
- }
57
- .theme-dark {
58
- --brand-white: #fff;
59
- --brand-black: #0c0e11;
60
- --brand-theme-purple: #8223d2;
61
- --brand-theme-yellow: #d2fa46;
62
- --brand-theme-blue: #4a68f9;
63
- --brand-theme-green: #6efac3;
64
- --sub-surface: #040308;
65
- --surface: #130f17;
66
- --surface-variant: #1e1a22;
67
- --on-surface: #f8eef9;
68
- --on-surface-soft: #cdc4ce;
69
- --outline: #7c757e;
70
- --outline-soft: #4a454e;
71
- --scrim-overlay: #0c0e1180;
72
- --elevated-level-01: #221e26;
73
- --elevated-level-02: #29242c;
74
- --elevated-level-03: #2d2830;
75
- --elevated-dynamic-card: #edddf60a;
76
- --primary: #ddb7ff;
77
- --on-primary: #1c0334;
78
- --primary-soft: #410071;
79
- --on-primary-soft: #ddb7ff;
80
- --secondary: #4e4356;
81
- --on-secondary: #edddf6;
82
- --neutral: #f8eef9;
83
- --on-neutral: #130f17;
84
- --neutral-soft: #4a454e;
85
- --on-neutral-soft: #e9dfeb;
86
- --inverse-surface: #e9dfeb;
87
- --inverse-on-surface: #130f17;
88
- --inverse-primary: #8223d2;
89
- --status-success-soft: #0b4521;
90
- --status-on-success-soft: #c5ffc8;
91
- --status-success: #47e26f;
92
- --status-on-success: #0a2415;
93
- --status-error-soft: #7d000f;
94
- --status-on-error-soft: #ffeae9;
95
- --status-error: #ffb3ad;
96
- --status-on-error: #470306;
97
- --status-warning-soft: #e7c500;
98
- --status-on-warning-soft: #3a3000;
99
- --status-warning: #ffe264;
100
- --status-on-warning: #221b00;
101
- --accent-red: #ffb2b9;
102
- --accent-on-red: #40000f;
103
- --accent-red-soft: #7c0026;
104
- --accent-on-red-soft: #ffeced;
105
- --accent-orange: #ffb690;
106
- --accent-on-orange: #341100;
107
- --accent-orange-soft: #632700;
108
- --accent-on-orange-soft: #ffede6;
109
- --accent-tennis: #dcff66;
110
- --accent-on-tennis: #171e00;
111
- --accent-tennis-soft: #334000;
112
- --accent-on-tennis-soft: #dcff66;
113
- --accent-green: #65f2bc;
114
- --accent-on-green: #002115;
115
- --accent-green-soft: #004530;
116
- --accent-on-green-soft: #bdffdf;
117
- --accent-teal: #2fd9f4;
118
- --accent-on-teal: #001f25;
119
- --accent-teal-soft: #00424c;
120
- --accent-on-teal-soft: #d4f7ff;
121
- --accent-blue: #bac3ff;
122
- --accent-on-blue: #001159;
123
- --accent-blue-soft: #061e77;
124
- --accent-on-blue-soft: #f0efff;
125
- --accent-purple: #ddb7ff;
126
- --accent-on-purple: #1c0334;
127
- --accent-purple-soft: #410071;
128
- --accent-on-purple-soft: #ddb7ff;
129
- --fills-surface-contrast: #f8eef90a;
130
- --fills-surface-contrast-inverse: #130f1714;
131
- --fills-drop-shadow: #160d1e26;
132
- --fills-actions-pressed-shadow: #ffffff14;
133
- --fills-cards-pressed-shadow: #0c0e110a;
134
- --fills-sticker-opacity: 100%;
135
- --gradient-dark-stop-1: #ca93ff;
136
- --gradient-dark-stop-2: #f2aeff;
137
- --gradient-light-stop-1: #370f5b;
138
- --gradient-light-stop-2: #001a42;
139
- }
140
- ._ :global(:root),
141
- .theme-light {
142
- --brand-white: #fff;
143
- --brand-black: #0c0e11;
144
- --brand-theme-purple: #8223d2;
145
- --brand-theme-yellow: #d2fa46;
146
- --brand-theme-blue: #4a68f9;
147
- --brand-theme-green: #6efac3;
148
- --sub-surface: #f1f0f4;
149
- --surface: #fff;
150
- --surface-variant: #faf9fc;
151
- --on-surface: #1a1c1e;
152
- --on-surface-soft: #5d5e61;
153
- --outline: #c6c6ca;
154
- --outline-soft: #eeedf1;
155
- --scrim-overlay: #0c0e1180;
156
- --elevated-level-01: #fff;
157
- --elevated-level-02: #fff;
158
- --elevated-level-03: #fff;
159
- --elevated-dynamic-card: #fff;
160
- --primary: #8223d2;
161
- --on-primary: #fff;
162
- --primary-soft: #faecff;
163
- --on-primary-soft: #590099;
164
- --secondary: #edddf6;
165
- --on-secondary: #211829;
166
- --neutral: #1a1c1e;
167
- --on-neutral: #fff;
168
- --neutral-soft: #f1f0f4;
169
- --on-neutral-soft: #2f3033;
170
- --inverse-surface: #252629;
171
- --inverse-on-surface: #fff;
172
- --inverse-primary: #ca93ff;
173
- --status-success-soft: #c5ffc8;
174
- --status-on-success-soft: #062011;
175
- --status-success: #136d31;
176
- --status-on-success: #c5ffc8;
177
- --status-error-soft: #ffdad7;
178
- --status-on-error-soft: #410004;
179
- --status-error: #b91a24;
180
- --status-on-error: #ffeae9;
181
- --status-warning-soft: #fff0c0;
182
- --status-on-warning-soft: #3a3000;
183
- --status-warning: #e7c500;
184
- --status-on-warning: #524609;
185
- --accent-red: #b91641;
186
- --accent-on-red: #fff8f7;
187
- --accent-red-soft: #ffe1e2;
188
- --accent-on-red-soft: #67001e;
189
- --accent-orange: #ec6a06;
190
- --accent-on-orange: #fff8f6;
191
- --accent-orange-soft: #ffe2d5;
192
- --accent-on-orange-soft: #552100;
193
- --accent-tennis: #d2fa46;
194
- --accent-on-tennis: #171e00;
195
- --accent-tennis-soft: #e5ff8d;
196
- --accent-on-tennis-soft: #293500;
197
- --accent-green: #6efac3;
198
- --accent-on-green: #002115;
199
- --accent-green-soft: #ccffe5;
200
- --accent-on-green-soft: #003826;
201
- --accent-teal: #2fd9f4;
202
- --accent-on-teal: #001f25;
203
- --accent-teal-soft: #ddf9ff;
204
- --accent-on-teal-soft: #00363e;
205
- --accent-blue: #4a68f9;
206
- --accent-on-blue: #fbf8ff;
207
- --accent-blue-soft: #f4f2ff;
208
- --accent-on-blue-soft: #00208d;
209
- --accent-purple: #8223d2;
210
- --accent-on-purple: #fff;
211
- --accent-purple-soft: #faecff;
212
- --accent-on-purple-soft: #590099;
213
- --fills-surface-contrast: #0c0e110a;
214
- --fills-surface-contrast-inverse: #ffffff14;
215
- --fills-drop-shadow: #0c0e110a;
216
- --fills-actions-pressed-shadow: #0c0e1114;
217
- --fills-cards-pressed-shadow: #0c0e110a;
218
- --fills-sticker-opacity: 0%;
219
- --gradient-dark-stop-1: #6900b3;
220
- --gradient-dark-stop-2: #991bbd;
221
- --gradient-light-stop-1: #faecff;
222
- --gradient-light-stop-2: #effcff;
223
- }
224
- .partner-dark {
225
- --brand-white: #fff;
226
- --brand-black: #0c0e11;
227
- --brand-theme-purple: #8223d2;
228
- --brand-theme-yellow: #d2fa46;
229
- --brand-theme-blue: #4a68f9;
230
- --brand-theme-green: #6efac3;
231
- --sub-surface: #030405;
232
- --surface: #0f1114;
233
- --surface-variant: #1a1c1e;
234
- --on-surface: #f1f0f4;
235
- --on-surface-soft: #c6c6ca;
236
- --outline: #76777a;
237
- --outline-soft: #46474a;
238
- --scrim-overlay: #0c0e1180;
239
- --elevated-level-01: #1e2022;
240
- --elevated-level-02: #252629;
241
- --elevated-level-03: #292a2d;
242
- --elevated-dynamic-card: #e3e2e60a;
243
- --primary: #fff;
244
- --on-primary: #0f1114;
245
- --primary-soft: #292a2d;
246
- --on-primary-soft: #fff;
247
- --secondary: #46474a;
248
- --on-secondary: #e3e2e6;
249
- --neutral: #f1f0f4;
250
- --on-neutral: #0f1114;
251
- --neutral-soft: #46474a;
252
- --on-neutral-soft: #e3e2e6;
253
- --inverse-surface: #e3e2e6;
254
- --inverse-on-surface: #0f1114;
255
- --inverse-primary: #46474a;
256
- --status-success-soft: #0b4521;
257
- --status-on-success-soft: #c5ffc8;
258
- --status-success: #47e26f;
259
- --status-on-success: #0a2415;
260
- --status-error-soft: #7d000f;
261
- --status-on-error-soft: #ffeae9;
262
- --status-error: #ffb3ad;
263
- --status-on-error: #470306;
264
- --status-warning-soft: #e7c500;
265
- --status-on-warning-soft: #3a3000;
266
- --status-warning: #ffe264;
267
- --status-on-warning: #221b00;
268
- --accent-red: #ffb2b9;
269
- --accent-on-red: #40000f;
270
- --accent-red-soft: #7c0026;
271
- --accent-on-red-soft: #ffeced;
272
- --accent-orange: #ffb690;
273
- --accent-on-orange: #341100;
274
- --accent-orange-soft: #632700;
275
- --accent-on-orange-soft: #ffede6;
276
- --accent-tennis: #d2fa46;
277
- --accent-on-tennis: #171e00;
278
- --accent-tennis-soft: #334000;
279
- --accent-on-tennis-soft: #dcff66;
280
- --accent-green: #65f2bc;
281
- --accent-on-green: #002115;
282
- --accent-green-soft: #004530;
283
- --accent-on-green-soft: #bdffdf;
284
- --accent-teal: #2fd9f4;
285
- --accent-on-teal: #001f25;
286
- --accent-teal-soft: #00424c;
287
- --accent-on-teal-soft: #d4f7ff;
288
- --accent-blue: #bac3ff;
289
- --accent-on-blue: #001159;
290
- --accent-blue-soft: #061e77;
291
- --accent-on-blue-soft: #f0efff;
292
- --accent-purple: #ddb7ff;
293
- --accent-on-purple: #1c0334;
294
- --accent-purple-soft: #410071;
295
- --accent-on-purple-soft: #ddb7ff;
296
- --fills-surface-contrast: #ffffff0a;
297
- --fills-surface-contrast-inverse: #0c0e1114;
298
- --fills-drop-shadow: #0c0e1126;
299
- --fills-actions-pressed-shadow: #ffffff14;
300
- --fills-cards-pressed-shadow: #0c0e110a;
301
- --fills-sticker-opacity: 100%;
302
- --gradient-dark-stop-1: #ca93ff;
303
- --gradient-dark-stop-2: #f2aeff;
304
- --gradient-light-stop-1: #370f5b;
305
- --gradient-light-stop-2: #001a42;
306
- }
307
- .partner-light {
308
- --brand-white: #fff;
309
- --brand-black: #0c0e11;
310
- --brand-theme-purple: #8223d2;
311
- --brand-theme-yellow: #d2fa46;
312
- --brand-theme-blue: #4a68f9;
313
- --brand-theme-green: #6efac3;
314
- --sub-surface: #f1f0f4;
315
- --surface: #fff;
316
- --surface-variant: #faf9fc;
317
- --on-surface: #1a1c1e;
318
- --on-surface-soft: #5d5e61;
319
- --outline: #c6c6ca;
320
- --outline-soft: #eeedf1;
321
- --scrim-overlay: #0c0e1180;
322
- --elevated-level-01: #fff;
323
- --elevated-level-02: #fff;
324
- --elevated-level-03: #fff;
325
- --elevated-dynamic-card: #fff;
326
- --primary: #0c0e11;
327
- --on-primary: #fff;
328
- --primary-soft: #f1f0f4;
329
- --on-primary-soft: #3a3b3e;
330
- --secondary: #e3e2e6;
331
- --on-secondary: #1a1c1e;
332
- --neutral: #1a1c1e;
333
- --on-neutral: #fff;
334
- --neutral-soft: #f1f0f4;
335
- --on-neutral-soft: #2f3033;
336
- --inverse-surface: #252629;
337
- --inverse-on-surface: #fff;
338
- --inverse-primary: #e3e2e6;
339
- --status-success-soft: #c5ffc8;
340
- --status-on-success-soft: #062011;
341
- --status-success: #136d31;
342
- --status-on-success: #c5ffc8;
343
- --status-error-soft: #ffdad7;
344
- --status-on-error-soft: #410004;
345
- --status-error: #b91a24;
346
- --status-on-error: #ffeae9;
347
- --status-warning-soft: #fff0c0;
348
- --status-on-warning-soft: #3a3000;
349
- --status-warning: #e7c500;
350
- --status-on-warning: #524609;
351
- --accent-red: #b91641;
352
- --accent-on-red: #fff8f7;
353
- --accent-red-soft: #fff0f1;
354
- --accent-on-red-soft: #67001e;
355
- --accent-orange: #ec6a06;
356
- --accent-on-orange: #fff8f6;
357
- --accent-orange-soft: #fff1eb;
358
- --accent-on-orange-soft: #552100;
359
- --accent-tennis: #d2fa46;
360
- --accent-on-tennis: #171e00;
361
- --accent-tennis-soft: #e5ff8d;
362
- --accent-on-tennis-soft: #293500;
363
- --accent-green: #6efac3;
364
- --accent-on-green: #002115;
365
- --accent-green-soft: #ccffe5;
366
- --accent-on-green-soft: #003826;
367
- --accent-teal: #2fd9f4;
368
- --accent-on-teal: #001f25;
369
- --accent-teal-soft: #ddf9ff;
370
- --accent-on-teal-soft: #00363e;
371
- --accent-blue: #4a68f9;
372
- --accent-on-blue: #fbf8ff;
373
- --accent-blue-soft: #f4f2ff;
374
- --accent-on-blue-soft: #00208d;
375
- --accent-purple: #8223d2;
376
- --accent-on-purple: #fff;
377
- --accent-purple-soft: #faecff;
378
- --accent-on-purple-soft: #590099;
379
- --fills-surface-contrast: #0c0e110a;
380
- --fills-surface-contrast-inverse: #ffffff14;
381
- --fills-drop-shadow: #0c0e110a;
382
- --fills-actions-pressed-shadow: #0c0e1114;
383
- --fills-cards-pressed-shadow: #0c0e110a;
384
- --fills-sticker-opacity: 0%;
385
- --gradient-dark-stop-1: #6900b3;
386
- --gradient-dark-stop-2: #991bbd;
387
- --gradient-light-stop-1: #faecff;
388
- --gradient-light-stop-2: #f0efff;
389
- }
390
- ._ :global(:root),
391
- .partner-dark,
392
- .partner-light,
393
- .theme-dark,
394
- .theme-light {
395
- --action-outline-fill: var(--fills-surface-contrast-inverse);
396
- --action-border-radius: var(--border-radius-round);
397
- --tag-on-theme-alt: var(--on-secondary);
398
- --tag-theme-alt: var(--secondary);
399
- --action-inactive-toggle-stroke: var(--outline-soft);
400
- --action-inactive-toggle-surface: var(--surface-variant);
401
- --action-on-surface: var(--on-surface);
402
- --action-outline-action: var(--on-surface);
403
- --action-on-tonal-action: var(--on-secondary);
404
- --action-tonal-action: var(--secondary);
405
- --tag-on-theme: var(--on-primary);
406
- --action-on-filled-action: var(--on-primary);
407
- --tag-theme: var(--primary);
408
- --action-subtle-engaged: var(--primary);
409
- --action-filled-action: var(--primary);
410
- }
411
- ._ :global(*),
412
- ._ :global(:after),
413
- ._ :global(:before) {
414
- --tw-border-spacing-x: 0;
415
- --tw-border-spacing-y: 0;
416
- --tw-translate-x: 0;
417
- --tw-translate-y: 0;
418
- --tw-rotate: 0;
419
- --tw-skew-x: 0;
420
- --tw-skew-y: 0;
421
- --tw-scale-x: 1;
422
- --tw-scale-y: 1;
423
- --tw-pan-x: ;
424
- --tw-pan-y: ;
425
- --tw-pinch-zoom: ;
426
- --tw-scroll-snap-strictness: proximity;
427
- --tw-gradient-from-position: ;
428
- --tw-gradient-via-position: ;
429
- --tw-gradient-to-position: ;
430
- --tw-ordinal: ;
431
- --tw-slashed-zero: ;
432
- --tw-numeric-figure: ;
433
- --tw-numeric-spacing: ;
434
- --tw-numeric-fraction: ;
435
- --tw-ring-inset: ;
436
- --tw-ring-offset-width: 0px;
437
- --tw-ring-offset-color: #fff;
438
- --tw-ring-color: #3b82f680;
439
- --tw-ring-offset-shadow: 0 0 #0000;
440
- --tw-ring-shadow: 0 0 #0000;
441
- --tw-shadow: 0 0 #0000;
442
- --tw-shadow-colored: 0 0 #0000;
443
- --tw-blur: ;
444
- --tw-brightness: ;
445
- --tw-contrast: ;
446
- --tw-grayscale: ;
447
- --tw-hue-rotate: ;
448
- --tw-invert: ;
449
- --tw-saturate: ;
450
- --tw-sepia: ;
451
- --tw-drop-shadow: ;
452
- --tw-backdrop-blur: ;
453
- --tw-backdrop-brightness: ;
454
- --tw-backdrop-contrast: ;
455
- --tw-backdrop-grayscale: ;
456
- --tw-backdrop-hue-rotate: ;
457
- --tw-backdrop-invert: ;
458
- --tw-backdrop-opacity: ;
459
- --tw-backdrop-saturate: ;
460
- --tw-backdrop-sepia: ;
461
- --tw-contain-size: ;
462
- --tw-contain-layout: ;
463
- --tw-contain-paint: ;
464
- --tw-contain-style: ;
465
- }
466
- ::backdrop {
467
- --tw-border-spacing-x: 0;
468
- --tw-border-spacing-y: 0;
469
- --tw-translate-x: 0;
470
- --tw-translate-y: 0;
471
- --tw-rotate: 0;
472
- --tw-skew-x: 0;
473
- --tw-skew-y: 0;
474
- --tw-scale-x: 1;
475
- --tw-scale-y: 1;
476
- --tw-pan-x: ;
477
- --tw-pan-y: ;
478
- --tw-pinch-zoom: ;
479
- --tw-scroll-snap-strictness: proximity;
480
- --tw-gradient-from-position: ;
481
- --tw-gradient-via-position: ;
482
- --tw-gradient-to-position: ;
483
- --tw-ordinal: ;
484
- --tw-slashed-zero: ;
485
- --tw-numeric-figure: ;
486
- --tw-numeric-spacing: ;
487
- --tw-numeric-fraction: ;
488
- --tw-ring-inset: ;
489
- --tw-ring-offset-width: 0px;
490
- --tw-ring-offset-color: #fff;
491
- --tw-ring-color: #3b82f680;
492
- --tw-ring-offset-shadow: 0 0 #0000;
493
- --tw-ring-shadow: 0 0 #0000;
494
- --tw-shadow: 0 0 #0000;
495
- --tw-shadow-colored: 0 0 #0000;
496
- --tw-blur: ;
497
- --tw-brightness: ;
498
- --tw-contrast: ;
499
- --tw-grayscale: ;
500
- --tw-hue-rotate: ;
501
- --tw-invert: ;
502
- --tw-saturate: ;
503
- --tw-sepia: ;
504
- --tw-drop-shadow: ;
505
- --tw-backdrop-blur: ;
506
- --tw-backdrop-brightness: ;
507
- --tw-backdrop-contrast: ;
508
- --tw-backdrop-grayscale: ;
509
- --tw-backdrop-hue-rotate: ;
510
- --tw-backdrop-invert: ;
511
- --tw-backdrop-opacity: ;
512
- --tw-backdrop-saturate: ;
513
- --tw-backdrop-sepia: ;
514
- --tw-contain-size: ;
515
- --tw-contain-layout: ;
516
- --tw-contain-paint: ;
517
- --tw-contain-style: ;
518
- }