@eyesee/ui-components 0.2.0 → 0.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
CHANGED
|
@@ -14,12 +14,14 @@ npm install @eyesee/ui-components
|
|
|
14
14
|
|
|
15
15
|
### Peer dependencies
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
npm 7+ installs these automatically when you add the package. Install manually only if your setup does not resolve peers:
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
npm install react react-dom clsx react-hook-form react-toastify
|
|
20
|
+
npm install react react-dom clsx react-hook-form react-toastify sass
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
`sass` is required when you use the SCSS mixins entry point (`@eyesee/ui-components/mixins`) in your own stylesheets.
|
|
24
|
+
|
|
23
25
|
---
|
|
24
26
|
|
|
25
27
|
## Setup
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createIcon as
|
|
3
|
-
const
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { createIcon as t } from "./createIcon.js";
|
|
3
|
+
const c = t(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ e(
|
|
4
4
|
"path",
|
|
5
5
|
{
|
|
6
6
|
d: "M16.6667 28H6.66667C5.95942 28 5.28115 27.719 4.78105 27.219C4.28095 26.7189 4 26.0406 4 25.3333V6.66667C4 5.95942 4.28095 5.28115 4.78105 4.78105C5.28115 4.28095 5.95942 4 6.66667 4H25.3333C26.0406 4 26.7189 4.28095 27.219 4.78105C27.719 5.28115 28 5.95942 28 6.66667V16.6667M21.3333 25.3333H29.3333M25.3333 21.3333V29.3333",
|
|
7
|
-
stroke:
|
|
8
|
-
strokeWidth:
|
|
7
|
+
stroke: o,
|
|
8
|
+
strokeWidth: r,
|
|
9
9
|
strokeLinecap: "round",
|
|
10
10
|
strokeLinejoin: "round"
|
|
11
11
|
}
|
|
12
12
|
));
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
c as SquareAddIcon
|
|
15
15
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eyesee/ui-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Shared EyeSee React components and design tokens.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -16,10 +16,12 @@
|
|
|
16
16
|
"exports": {
|
|
17
17
|
".": "./dist/index.js",
|
|
18
18
|
"./icons": "./dist/components/icons-v2/index.js",
|
|
19
|
-
"./styles": "./dist/style.css"
|
|
19
|
+
"./styles": "./dist/style.css",
|
|
20
|
+
"./mixins": "./src/styles/_mixins.scss"
|
|
20
21
|
},
|
|
21
22
|
"files": [
|
|
22
23
|
"dist",
|
|
24
|
+
"src/styles",
|
|
23
25
|
"README.md"
|
|
24
26
|
],
|
|
25
27
|
"sideEffects": [
|
|
@@ -40,7 +42,8 @@
|
|
|
40
42
|
"react": "^18.2.0",
|
|
41
43
|
"react-dom": "^18.2.0",
|
|
42
44
|
"react-hook-form": "^7.31.3",
|
|
43
|
-
"react-toastify": "^10.0.5"
|
|
45
|
+
"react-toastify": "^10.0.5",
|
|
46
|
+
"sass": "^1.72.0"
|
|
44
47
|
},
|
|
45
48
|
"devDependencies": {
|
|
46
49
|
"@storybook/react-vite": "^10.2.13",
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// Typography mixins
|
|
2
|
+
|
|
3
|
+
@mixin heading {
|
|
4
|
+
font-family: Roboto, sans-serif;
|
|
5
|
+
font-style: normal;
|
|
6
|
+
font-weight: 600;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin h1 {
|
|
10
|
+
/* Title/H1 */
|
|
11
|
+
@include heading;
|
|
12
|
+
font-size: var(--font--heading--h1--text-size);
|
|
13
|
+
line-height: var(--font--heading--h1--line-height);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@mixin h2 {
|
|
17
|
+
@include heading;
|
|
18
|
+
font-size: var(--font--heading--h2--text-size);
|
|
19
|
+
line-height: var(--font--heading--h2--line-height);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin h3 {
|
|
23
|
+
@include heading;
|
|
24
|
+
font-size: var(--font--heading--h3--text-size);
|
|
25
|
+
line-height: var(--font--heading--h3--line-height);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin h4 {
|
|
29
|
+
@include heading;
|
|
30
|
+
font-size: var(--font--heading--h4--text-size);
|
|
31
|
+
line-height: var(--font--heading--h4--line-height);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@mixin h5 {
|
|
35
|
+
@include heading;
|
|
36
|
+
font-size: var(--font--heading--h5--text-size);
|
|
37
|
+
line-height: var(--font--heading--h5--line-height);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin h6 {
|
|
41
|
+
@include heading;
|
|
42
|
+
font-size: var(--font--heading--h6--text-size);
|
|
43
|
+
line-height: var(--font--heading--h6--line-height);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Body/body */
|
|
47
|
+
@mixin body {
|
|
48
|
+
font-family: Roboto, sans-serif;
|
|
49
|
+
font-style: normal;
|
|
50
|
+
font-weight: 400;
|
|
51
|
+
font-size: var(--font--body--body--text-size);
|
|
52
|
+
line-height: var(--font--body--body--line-height);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@mixin body-lg {
|
|
56
|
+
@include body;
|
|
57
|
+
font-size: var(--font--body--body-lg--text-size);
|
|
58
|
+
line-height: var(--font--body--body-lg--line-height);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@mixin body-lg-strong {
|
|
62
|
+
@include body-lg;
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@mixin body-strong {
|
|
67
|
+
@include body;
|
|
68
|
+
font-weight: 500;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Body/body-sm */
|
|
72
|
+
@mixin body-sm {
|
|
73
|
+
@include body;
|
|
74
|
+
font-size: var(--font--body--body-sm--text-size);
|
|
75
|
+
line-height: var(--font--body--body-sm--line-height);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@mixin body-sm-strong {
|
|
79
|
+
@include body-sm;
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@mixin label {
|
|
84
|
+
@include body-sm-strong;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Checkbox hover tokens — set on a parent `:hover` to style nested checkboxes
|
|
88
|
+
@mixin checkbox-hover-tokens {
|
|
89
|
+
--checkbox-border-color: var(--color-border-secondary-subtle);
|
|
90
|
+
--checkbox-filled-background: var(--color--background--secondary--default-hover);
|
|
91
|
+
--checkbox-filled-border-color: var(--color--background--secondary--default-hover);
|
|
92
|
+
}
|
|
@@ -0,0 +1,945 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--brand: #ce2850;
|
|
3
|
+
--eyesee-blue: #5986b3;
|
|
4
|
+
--main_text_color: #333333;
|
|
5
|
+
--secondary_text_color: #c4c4c4;
|
|
6
|
+
--border_gray_light: #e5e5e5;
|
|
7
|
+
--border_gray: #c4c4c4;
|
|
8
|
+
--button_color_dark: #333;
|
|
9
|
+
--button_color_grey: #f5f5f5;
|
|
10
|
+
--table_header_light_gray: #fcfcfc;
|
|
11
|
+
--main_layout: #fafafa;
|
|
12
|
+
--success_green: #92d050;
|
|
13
|
+
--error_red: #ff3333;
|
|
14
|
+
--surface_1: #e5e5e5;
|
|
15
|
+
--button_purple: #7b61ff;
|
|
16
|
+
--table-cell: #6a6a6a;
|
|
17
|
+
--text-small: 0.75rem;
|
|
18
|
+
--text-medium: 0.875rem;
|
|
19
|
+
--text-large: 1rem;
|
|
20
|
+
--text-shadow-lg: 0 15px 30px rgb(0 0 0 / 50%), 0 5px 15px rgb(0 0 0 / 8%);
|
|
21
|
+
--text-shadow-md: 0 15px 30px rgb(0 0 0 / 30%), 0 5px 15px rgb(0 0 0 / 4%);
|
|
22
|
+
--skeleton_gray: hsl(220deg 13% 95%);
|
|
23
|
+
--header-height: 3.5rem;
|
|
24
|
+
--tooltip-margin: 0.5rem;
|
|
25
|
+
|
|
26
|
+
--alert-error-50: #ffe7ed;
|
|
27
|
+
--alert-error-100: #ffd0dc;
|
|
28
|
+
--alert-error-150: #ffb8ca;
|
|
29
|
+
--alert-error-200: #ffa1b9;
|
|
30
|
+
--alert-error-300: #ff7295;
|
|
31
|
+
--alert-error-400: #ff4372;
|
|
32
|
+
--alert-error-500: #ff144f;
|
|
33
|
+
--alert-error-600: #cc103f;
|
|
34
|
+
--alert-error-700: #990c2f;
|
|
35
|
+
--alert-error-800: #660820;
|
|
36
|
+
--alert-error-850: #4c0618;
|
|
37
|
+
--alert-error-900: #330410;
|
|
38
|
+
--alert-error-950: #190208;
|
|
39
|
+
|
|
40
|
+
--alert-warning-50: #fffae7;
|
|
41
|
+
--alert-warning-100: #fff5d0;
|
|
42
|
+
--alert-warning-150: #fff0b8;
|
|
43
|
+
--alert-warning-200: #ffeba1;
|
|
44
|
+
--alert-warning-300: #ffe072;
|
|
45
|
+
--alert-warning-400: #ffd643;
|
|
46
|
+
--alert-warning-500: #ffcc14;
|
|
47
|
+
--alert-warning-600: #cca310;
|
|
48
|
+
--alert-warning-700: #997a0c;
|
|
49
|
+
--alert-warning-800: #665208;
|
|
50
|
+
--alert-warning-850: #4c3d06;
|
|
51
|
+
--alert-warning-900: #332904;
|
|
52
|
+
--alert-warning-950: #191402;
|
|
53
|
+
|
|
54
|
+
--alert-success-50: #c3f7db;
|
|
55
|
+
--alert-success-100: #aeefcb;
|
|
56
|
+
--alert-success-150: #98e7bc;
|
|
57
|
+
--alert-success-200: #82dfac;
|
|
58
|
+
--alert-success-300: #57d08e;
|
|
59
|
+
--alert-success-400: #2bc06f;
|
|
60
|
+
--alert-success-500: #00b050;
|
|
61
|
+
--alert-success-600: #008d40;
|
|
62
|
+
--alert-success-700: #006a30;
|
|
63
|
+
--alert-success-800: #004620;
|
|
64
|
+
--alert-success-850: #003518;
|
|
65
|
+
--alert-success-900: #002310;
|
|
66
|
+
--alert-success-950: #001208;
|
|
67
|
+
--text-default-body-lighter: #777777;
|
|
68
|
+
--text-default-label: #999999;
|
|
69
|
+
--text-default-body: #333333;
|
|
70
|
+
--text-default-body-disabled: #c4c4c4;
|
|
71
|
+
--secondary-color-500: #36afff;
|
|
72
|
+
--color-text-secondary-default: #ff144f;
|
|
73
|
+
--neutral-color-800: #505062;
|
|
74
|
+
--background-secondary-default: #333333;
|
|
75
|
+
--background-disabled-subtle: #f5f5f5;
|
|
76
|
+
--background-neutral-card: #ffffff;
|
|
77
|
+
--color-background-neutral-subtle: #f5f5f5;
|
|
78
|
+
--box-shadow-elevation-normal-color: #2e2e3b33;
|
|
79
|
+
--box-shadow-elevation-normal: 0rem 0rem 0.125rem 0rem var(--box-shadow-elevation-normal-color);
|
|
80
|
+
--radius--full: 24px;
|
|
81
|
+
--radius--8: 8px;
|
|
82
|
+
--radius--subtle: 4px;
|
|
83
|
+
|
|
84
|
+
// Pill color tokens (Figma design system)
|
|
85
|
+
// Light: pale bg + dark text
|
|
86
|
+
--color--pill--turquoise--light--bg: #c3e7ff;
|
|
87
|
+
--color--pill--turquoise--light--text: #206c9e;
|
|
88
|
+
--color--pill--purple--light--bg: #e2ccf9;
|
|
89
|
+
--color--pill--purple--light--text: #5a00b3;
|
|
90
|
+
--color--pill--green--light--bg: #aeefcb;
|
|
91
|
+
--color--pill--green--light--text: #006a30;
|
|
92
|
+
--color--pill--red--light--bg: #ffd0dc;
|
|
93
|
+
--color--pill--red--light--text: #cc103f;
|
|
94
|
+
--color--pill--yellow--light--bg: #fff0b8;
|
|
95
|
+
--color--pill--yellow--light--text: #997a0c;
|
|
96
|
+
--color--pill--orange--light--bg: #f7d3c2;
|
|
97
|
+
--color--pill--orange--light--text: #8a421f;
|
|
98
|
+
--color--pill--greenyellow--light--bg: #e5f7c2;
|
|
99
|
+
--color--pill--greenyellow--light--text: #668a1f;
|
|
100
|
+
--color--pill--neutral--light--bg: #f1f1f7;
|
|
101
|
+
--color--pill--neutral--light--text: #737388;
|
|
102
|
+
// Dark: saturated bg + dark text
|
|
103
|
+
--color--pill--turquoise--dark--bg: #5ebfff;
|
|
104
|
+
--color--pill--turquoise--dark--text: #103a56;
|
|
105
|
+
--color--pill--purple--dark--bg: #a966ec;
|
|
106
|
+
--color--pill--purple--dark--text: #2d005a;
|
|
107
|
+
--color--pill--green--dark--bg: #57d08e;
|
|
108
|
+
--color--pill--green--dark--text: #003518;
|
|
109
|
+
--color--pill--red--dark--bg: #ff4372;
|
|
110
|
+
--color--pill--red--dark--text: #660820;
|
|
111
|
+
--color--pill--yellow--dark--bg: #ffd643;
|
|
112
|
+
--color--pill--yellow--dark--text: #4c3d06;
|
|
113
|
+
--color--pill--orange--dark--bg: #eb8b5c;
|
|
114
|
+
--color--pill--orange--dark--text: #45210f;
|
|
115
|
+
--color--pill--greenyellow--dark--bg: #bbeb5c;
|
|
116
|
+
--color--pill--greenyellow--dark--text: #33450f;
|
|
117
|
+
--color--pill--neutral--dark--bg: #c6c6de;
|
|
118
|
+
--color--pill--neutral--dark--text: #505062;
|
|
119
|
+
// Outline: transparent bg + border + text
|
|
120
|
+
--color--pill--turquoise--outline--border: #36afff;
|
|
121
|
+
--color--pill--purple--outline--border: #8d33e6;
|
|
122
|
+
--color--pill--green--outline--border: #00b050;
|
|
123
|
+
--color--pill--red--outline--border: #ff144f;
|
|
124
|
+
--color--pill--yellow--outline--border: #ffcc14;
|
|
125
|
+
--color--pill--orange--outline--border: #e66e33;
|
|
126
|
+
--color--pill--greenyellow--outline--border: #aae633;
|
|
127
|
+
--color--pill--neutral--outline--border: #c6c6de;
|
|
128
|
+
|
|
129
|
+
// new colors system
|
|
130
|
+
--color--background--primary--dark: var(--gray--850);
|
|
131
|
+
--color--background--primary--dark-hover: var(--gray--950);
|
|
132
|
+
--color--background--secondary--default: var(--red--500);
|
|
133
|
+
--color-border-secondary-default: var(--red--500);
|
|
134
|
+
--color-border-secondary-subtle: var(--red--200);
|
|
135
|
+
--color--background--secondary--default-hover: var(--red--600);
|
|
136
|
+
--color-background-secondary-verysubtle: var(--red--50);
|
|
137
|
+
--color--background--disabled--subtle: var(--gray--100);
|
|
138
|
+
--color--background--disabled--default: var(--gray--400);
|
|
139
|
+
--color--text--disabled--default: var(--gray--400);
|
|
140
|
+
--color--background--neutral--card: var(--base-colors--white);
|
|
141
|
+
--color--background--neutral--card-hover: var(--base-colors--white);
|
|
142
|
+
--color--text--default--body: var(--gray--850);
|
|
143
|
+
--color-icon-warning-default: var(--orange--500);
|
|
144
|
+
--color-text-default-body-lighter: var(--gray--700);
|
|
145
|
+
--color-background-neutral-subtle: var(--gray--100);
|
|
146
|
+
--color-icon-secondary-default: var(--red--500);
|
|
147
|
+
--color-border-primary-dark: var(--gray--950);
|
|
148
|
+
--color-border-primary-dark-hover: var(--gray--850);
|
|
149
|
+
--color-text-primary-dark: var(--gray--950);
|
|
150
|
+
--color-text-primary-dark-hover: var(--gray--850);
|
|
151
|
+
--color-border-neutral-subtle: var(--gray--200);
|
|
152
|
+
--color-border-neutral-default: var(--gray--400);
|
|
153
|
+
--color--text--secondary--default: var(--red--500);
|
|
154
|
+
--color--text--primary--default: var(--gray--950);
|
|
155
|
+
--color--text--on-color--body: var(--base-colors--white);
|
|
156
|
+
--color--icon--on-color--on-color: var(--base-colors--white);
|
|
157
|
+
--color--border--disabled--default: var(--gray--400);
|
|
158
|
+
--color-icon-disabled-default: var(--gray--400);
|
|
159
|
+
--color-border-error-default: var(--red--500);
|
|
160
|
+
--color--text--error--default: var(--red--500);
|
|
161
|
+
--color--text--default--label: var(--gray--600);
|
|
162
|
+
--color--icon--default--default: var(--gray--850);
|
|
163
|
+
--color--text--default--placeholder: var(--gray--400);
|
|
164
|
+
--color-icon-default-default-lighter: var(--gray--700);
|
|
165
|
+
|
|
166
|
+
//avatar color
|
|
167
|
+
--color-background-avatar-purple: #8d33e6;
|
|
168
|
+
--color-background-avatar-green: #2bc06f;
|
|
169
|
+
--color-background-avatar-red: #ff144f;
|
|
170
|
+
--color-background-avatar-turquoise: #36afff;
|
|
171
|
+
--color-background-avatar-yellow: #ffcc14;
|
|
172
|
+
--color-background-avatar-orange: #e66e33;
|
|
173
|
+
--color-background-avatar-greenyellow: #aae633;
|
|
174
|
+
--color-background-avatar-pink: #f36cad;
|
|
175
|
+
--color-background-avatar-blue: #6c89f3;
|
|
176
|
+
|
|
177
|
+
// New Design System Variables
|
|
178
|
+
--TRUE: 1;
|
|
179
|
+
--FALSE: 0;
|
|
180
|
+
|
|
181
|
+
--base-colors--white: #ffffff;
|
|
182
|
+
--base-colors--black: #000000;
|
|
183
|
+
|
|
184
|
+
--purple--50: #f1e8fb;
|
|
185
|
+
--purple--100: #e2ccf9;
|
|
186
|
+
--purple--150: #d4b2f6;
|
|
187
|
+
--purple--200: #c699f3;
|
|
188
|
+
--purple--300: #a966ec;
|
|
189
|
+
--purple--400: #8d33e6;
|
|
190
|
+
--purple--500: #7000e0;
|
|
191
|
+
--purple--600: #5a00b3;
|
|
192
|
+
--purple--700: #430086;
|
|
193
|
+
--purple--800: #2d005a;
|
|
194
|
+
--purple--850: #220043;
|
|
195
|
+
--purple--900: #16002d;
|
|
196
|
+
--purple--950: #0b0016;
|
|
197
|
+
|
|
198
|
+
--turquoise--50: #ebf7ff;
|
|
199
|
+
--turquoise--100: #d7efff;
|
|
200
|
+
--turquoise--150: #c3e7ff;
|
|
201
|
+
--turquoise--200: #afdfff;
|
|
202
|
+
--turquoise--300: #86cfff;
|
|
203
|
+
--turquoise--400: #5ebfff;
|
|
204
|
+
--turquoise--500: #36afff;
|
|
205
|
+
--turquoise--600: #2b8ecf;
|
|
206
|
+
--turquoise--700: #206c9e;
|
|
207
|
+
--turquoise--800: #164b6e;
|
|
208
|
+
--turquoise--850: #103a56;
|
|
209
|
+
--turquoise--900: #0b293d;
|
|
210
|
+
--turquoise--950: #051925;
|
|
211
|
+
|
|
212
|
+
--cold-gray--50: #f8f8fb;
|
|
213
|
+
--cold-gray--100: #f1f1f7;
|
|
214
|
+
--cold-gray--150: #eaeaf3;
|
|
215
|
+
--cold-gray--200: #e3e3ef;
|
|
216
|
+
--cold-gray--300: #d4d4e6;
|
|
217
|
+
--cold-gray--400: #c6c6de;
|
|
218
|
+
--cold-gray--500: #b8b8d6;
|
|
219
|
+
--cold-gray--600: #9595af;
|
|
220
|
+
--cold-gray--700: #737388;
|
|
221
|
+
--cold-gray--800: #505062;
|
|
222
|
+
--cold-gray--850: #3f3f4e;
|
|
223
|
+
--cold-gray--900: #2e2e3b;
|
|
224
|
+
--cold-gray--950: #1b1b26;
|
|
225
|
+
|
|
226
|
+
--red--50: #ffe7ed;
|
|
227
|
+
--red--100: #ffd0dc;
|
|
228
|
+
--red--150: #ffb8ca;
|
|
229
|
+
--red--200: #ffa1b9;
|
|
230
|
+
--red--300: #ff7295;
|
|
231
|
+
--red--400: #ff4372;
|
|
232
|
+
--red--500: #ff144f;
|
|
233
|
+
--red--600: #cc103f;
|
|
234
|
+
--red--700: #990c2f;
|
|
235
|
+
--red--800: #660820;
|
|
236
|
+
--red--850: #4c0618;
|
|
237
|
+
--red--900: #330410;
|
|
238
|
+
--red--950: #190208;
|
|
239
|
+
|
|
240
|
+
--green--50: #c3f7db;
|
|
241
|
+
--green--100: #aeefcb;
|
|
242
|
+
--green--150: #98e7bc;
|
|
243
|
+
--green--200: #82dfac;
|
|
244
|
+
--green--300: #57d08e;
|
|
245
|
+
--green--400: #2bc06f;
|
|
246
|
+
--green--500: #00b050;
|
|
247
|
+
--green--600: #008d40;
|
|
248
|
+
--green--700: #006a30;
|
|
249
|
+
--green--800: #004620;
|
|
250
|
+
--green--850: #003518;
|
|
251
|
+
--green--900: #002310;
|
|
252
|
+
--green--950: #001208;
|
|
253
|
+
|
|
254
|
+
--orange--50: #fffae7;
|
|
255
|
+
--orange--100: #fff5d0;
|
|
256
|
+
--orange--150: #fff0b8;
|
|
257
|
+
--orange--200: #ffeba1;
|
|
258
|
+
--orange--300: #ffe072;
|
|
259
|
+
--orange--400: #ffd643;
|
|
260
|
+
--orange--500: #ffcc14;
|
|
261
|
+
--orange--600: #cca310;
|
|
262
|
+
--orange--700: #997a0c;
|
|
263
|
+
--orange--800: #665208;
|
|
264
|
+
--orange--850: #4c3d06;
|
|
265
|
+
--orange--900: #332904;
|
|
266
|
+
--orange--950: #191402;
|
|
267
|
+
|
|
268
|
+
--gray--50: #fafafa;
|
|
269
|
+
--gray--100: #f5f5f5;
|
|
270
|
+
--gray--150: #eaeaea;
|
|
271
|
+
--gray--200: #e5e5e5;
|
|
272
|
+
--gray--300: #d4d4d4;
|
|
273
|
+
--gray--400: #c4c4c4;
|
|
274
|
+
--gray--500: #bbbbbb;
|
|
275
|
+
--gray--600: #999999;
|
|
276
|
+
--gray--700: #777777;
|
|
277
|
+
--gray--800: #505050;
|
|
278
|
+
--gray--850: #333333;
|
|
279
|
+
--gray--900: #2e2e2e;
|
|
280
|
+
--gray--950: #1b1b1b;
|
|
281
|
+
--pink--50: #feedf5;
|
|
282
|
+
--pink--100: #fcdaeb;
|
|
283
|
+
--pink--150: #fbc8e1;
|
|
284
|
+
--pink--200: #f9b5d6;
|
|
285
|
+
--pink--300: #f691c2;
|
|
286
|
+
--pink--400: #f36cad;
|
|
287
|
+
--pink--500: #f04798;
|
|
288
|
+
--pink--600: #c3397c;
|
|
289
|
+
--pink--700: #962b5f;
|
|
290
|
+
--pink--800: #681d41;
|
|
291
|
+
--pink--850: #521633;
|
|
292
|
+
--pink--900: #3b0f24;
|
|
293
|
+
--pink--950: #250816;
|
|
294
|
+
|
|
295
|
+
--blue--50: #edf1fe;
|
|
296
|
+
--blue--100: #dae2fc;
|
|
297
|
+
--blue--150: #c8d3fb;
|
|
298
|
+
--blue--200: #b5c4f9;
|
|
299
|
+
--blue--300: #91a7f6;
|
|
300
|
+
--blue--400: #6c89f3;
|
|
301
|
+
--blue--500: #476cf0;
|
|
302
|
+
--blue--600: #3957c3;
|
|
303
|
+
--blue--700: #2b4296;
|
|
304
|
+
--blue--800: #1d2d68;
|
|
305
|
+
--blue--850: #162352;
|
|
306
|
+
--blue--900: #0f193b;
|
|
307
|
+
--blue--950: #080e25;
|
|
308
|
+
|
|
309
|
+
--yellow--50: #fdfeed;
|
|
310
|
+
--yellow--100: #f9fcda;
|
|
311
|
+
--yellow--150: #f7fbc8;
|
|
312
|
+
--yellow--200: #f3f9b5;
|
|
313
|
+
--yellow--300: #eef691;
|
|
314
|
+
--yellow--400: #e8f36c;
|
|
315
|
+
--yellow--500: #e2f047;
|
|
316
|
+
--yellow--600: #b7c339;
|
|
317
|
+
--yellow--700: #8d962b;
|
|
318
|
+
--yellow--800: #62681d;
|
|
319
|
+
--yellow--850: #4d5216;
|
|
320
|
+
--yellow--900: #373b0f;
|
|
321
|
+
--yellow--950: #232508;
|
|
322
|
+
|
|
323
|
+
--mint--50: #ebfdf7;
|
|
324
|
+
--mint--100: #d6faee;
|
|
325
|
+
--mint--150: #c2f8e6;
|
|
326
|
+
--mint--200: #adf5dd;
|
|
327
|
+
--mint--300: #85f0cc;
|
|
328
|
+
--mint--400: #5cebbb;
|
|
329
|
+
--mint--500: #33e6aa;
|
|
330
|
+
--mint--600: #29b888;
|
|
331
|
+
--mint--700: #1f8a66;
|
|
332
|
+
--mint--800: #145c44;
|
|
333
|
+
--mint--850: #0f4533;
|
|
334
|
+
--mint--900: #0a2e22;
|
|
335
|
+
--mint--950: #051711;
|
|
336
|
+
|
|
337
|
+
--cold-pink--50: #fce5fc;
|
|
338
|
+
--cold-pink--100: #f8ccf9;
|
|
339
|
+
--cold-pink--150: #f5b2f6;
|
|
340
|
+
--cold-pink--200: #f199f3;
|
|
341
|
+
--cold-pink--300: #eb66ec;
|
|
342
|
+
--cold-pink--400: #e433e6;
|
|
343
|
+
--cold-pink--500: #dd00e0;
|
|
344
|
+
--cold-pink--600: #b100b3;
|
|
345
|
+
--cold-pink--700: #850086;
|
|
346
|
+
--cold-pink--800: #58005a;
|
|
347
|
+
--cold-pink--850: #420043;
|
|
348
|
+
--cold-pink--900: #2c002d;
|
|
349
|
+
--cold-pink--950: #160016;
|
|
350
|
+
|
|
351
|
+
--red-orange--50: #fcf0eb;
|
|
352
|
+
--red-orange--100: #fae2d6;
|
|
353
|
+
--red-orange--150: #f7d3c2;
|
|
354
|
+
--red-orange--200: #f5c5ad;
|
|
355
|
+
--red-orange--300: #f0a885;
|
|
356
|
+
--red-orange--400: #eb8b5c;
|
|
357
|
+
--red-orange--500: #e66e33;
|
|
358
|
+
--red-orange--600: #b85829;
|
|
359
|
+
--red-orange--700: #8a421f;
|
|
360
|
+
--red-orange--800: #5c2c14;
|
|
361
|
+
--red-orange--850: #45210f;
|
|
362
|
+
--red-orange--900: #2e160a;
|
|
363
|
+
--red-orange--950: #170b05;
|
|
364
|
+
|
|
365
|
+
--green-yellow--50: #f6fceb;
|
|
366
|
+
--green-yellow--100: #eefad6;
|
|
367
|
+
--green-yellow--150: #e5f7c2;
|
|
368
|
+
--green-yellow--200: #ddf5ad;
|
|
369
|
+
--green-yellow--300: #ccf085;
|
|
370
|
+
--green-yellow--400: #bbeb5c;
|
|
371
|
+
--green-yellow--500: #aae633;
|
|
372
|
+
--green-yellow--600: #88b829;
|
|
373
|
+
--green-yellow--700: #668a1f;
|
|
374
|
+
--green-yellow--800: #445c14;
|
|
375
|
+
--green-yellow--850: #33450f;
|
|
376
|
+
--green-yellow--900: #222e0a;
|
|
377
|
+
--green-yellow--950: #111705;
|
|
378
|
+
|
|
379
|
+
// Font System
|
|
380
|
+
--font-style--roboto: 'Roboto';
|
|
381
|
+
--font-weight--light: 'Light';
|
|
382
|
+
--font-weight--regular: 'Regular';
|
|
383
|
+
--font-weight--medium: 'Medium';
|
|
384
|
+
--font-weight--semibold: 'SemiBold';
|
|
385
|
+
--font-weight--bold: 'Bold';
|
|
386
|
+
|
|
387
|
+
// Scale System
|
|
388
|
+
--scale--0: 0px;
|
|
389
|
+
--scale--75: 0.75px;
|
|
390
|
+
--scale--100: 1px;
|
|
391
|
+
--scale--125: 1.25px;
|
|
392
|
+
--scale--150: 1.5px;
|
|
393
|
+
--scale--175: 1.75px;
|
|
394
|
+
--scale--200: 2px;
|
|
395
|
+
--scale--275: 2.75px;
|
|
396
|
+
--scale--300: 3px;
|
|
397
|
+
--scale--400: 4px;
|
|
398
|
+
--scale--600: 6px;
|
|
399
|
+
--scale--800: 8px;
|
|
400
|
+
--scale--1000: 10px;
|
|
401
|
+
--scale--1200: 12px;
|
|
402
|
+
--scale--1400: 14px;
|
|
403
|
+
--scale--1600: 16px;
|
|
404
|
+
--scale--1800: 18px;
|
|
405
|
+
--scale--2000: 20px;
|
|
406
|
+
--scale--2400: 24px;
|
|
407
|
+
--scale--2800: 28px;
|
|
408
|
+
--scale--3200: 32px;
|
|
409
|
+
--scale--3600: 36px;
|
|
410
|
+
--scale--4000: 40px;
|
|
411
|
+
--scale--4400: 44px;
|
|
412
|
+
--scale--4800: 48px;
|
|
413
|
+
--scale--5200: 52px;
|
|
414
|
+
--scale--5600: 56px;
|
|
415
|
+
--scale--6000: 60px;
|
|
416
|
+
--scale--6400: 64px;
|
|
417
|
+
--scale--7200: 72px;
|
|
418
|
+
--scale--8000: 80px;
|
|
419
|
+
--scale--9600: 96px;
|
|
420
|
+
--scale--9999: 999px;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
// Alias Classes
|
|
424
|
+
.alias--main {
|
|
425
|
+
--primary--50: var(--purple--50);
|
|
426
|
+
--primary--100: var(--purple--100);
|
|
427
|
+
--primary--150: var(--purple--150);
|
|
428
|
+
--primary--200: var(--purple--200);
|
|
429
|
+
--primary--300: var(--purple--300);
|
|
430
|
+
--primary--400: var(--purple--400);
|
|
431
|
+
--primary--500: var(--purple--500);
|
|
432
|
+
--primary--600: var(--purple--600);
|
|
433
|
+
--primary--700: var(--purple--700);
|
|
434
|
+
--primary--800: var(--purple--800);
|
|
435
|
+
--primary--850: var(--purple--850);
|
|
436
|
+
--primary--900: var(--purple--900);
|
|
437
|
+
--primary--950: var(--purple--950);
|
|
438
|
+
--secondary--50: var(--turquoise--50);
|
|
439
|
+
--secondary--100: var(--turquoise--100);
|
|
440
|
+
--secondary--150: var(--turquoise--150);
|
|
441
|
+
--secondary--200: var(--turquoise--200);
|
|
442
|
+
--secondary--300: var(--turquoise--300);
|
|
443
|
+
--secondary--400: var(--turquoise--400);
|
|
444
|
+
--secondary--500: var(--turquoise--500);
|
|
445
|
+
--secondary--600: var(--turquoise--600);
|
|
446
|
+
--secondary--700: var(--turquoise--700);
|
|
447
|
+
--secondary--800: var(--turquoise--800);
|
|
448
|
+
--secondary--850: var(--turquoise--850);
|
|
449
|
+
--secondary--900: var(--turquoise--900);
|
|
450
|
+
--secondary--950: var(--turquoise--950);
|
|
451
|
+
--error--50: var(--red--50);
|
|
452
|
+
--error--100: var(--red--100);
|
|
453
|
+
--error--150: var(--red--150);
|
|
454
|
+
--error--200: var(--red--200);
|
|
455
|
+
--error--300: var(--red--300);
|
|
456
|
+
--error--400: var(--red--400);
|
|
457
|
+
--error--500: var(--red--500);
|
|
458
|
+
--error--600: var(--red--600);
|
|
459
|
+
--error--700: var(--red--700);
|
|
460
|
+
--error--800: var(--red--800);
|
|
461
|
+
--error--850: var(--red--850);
|
|
462
|
+
--error--900: var(--red--900);
|
|
463
|
+
--error--950: var(--red--950);
|
|
464
|
+
--success--50: var(--green--50);
|
|
465
|
+
--success--100: var(--green--100);
|
|
466
|
+
--success--150: var(--green--150);
|
|
467
|
+
--success--200: var(--green--200);
|
|
468
|
+
--success--300: var(--green--300);
|
|
469
|
+
--success--400: var(--green--400);
|
|
470
|
+
--success--500: var(--green--500);
|
|
471
|
+
--success--600: var(--green--600);
|
|
472
|
+
--success--700: var(--green--700);
|
|
473
|
+
--success--800: var(--green--800);
|
|
474
|
+
--success--850: var(--green--850);
|
|
475
|
+
--success--900: var(--green--900);
|
|
476
|
+
--success--950: var(--green--950);
|
|
477
|
+
--warning--50: var(--orange--50);
|
|
478
|
+
--warning--100: var(--orange--100);
|
|
479
|
+
--warning--150: var(--orange--150);
|
|
480
|
+
--warning--200: var(--orange--200);
|
|
481
|
+
--warning--300: var(--orange--300);
|
|
482
|
+
--warning--400: var(--orange--400);
|
|
483
|
+
--warning--500: var(--orange--500);
|
|
484
|
+
--warning--600: var(--orange--600);
|
|
485
|
+
--warning--700: var(--orange--700);
|
|
486
|
+
--warning--800: var(--orange--800);
|
|
487
|
+
--warning--850: var(--orange--850);
|
|
488
|
+
--warning--900: var(--orange--900);
|
|
489
|
+
--warning--950: var(--orange--950);
|
|
490
|
+
// --base-colors--white: var(--base-colors--white);
|
|
491
|
+
--base-colors--black: var(--base-colors--black);
|
|
492
|
+
--cold-neutral--50: var(--cold-gray--50);
|
|
493
|
+
--cold-neutral--100: var(--cold-gray--100);
|
|
494
|
+
--cold-neutral--150: var(--cold-gray--150);
|
|
495
|
+
--cold-neutral--200: var(--cold-gray--200);
|
|
496
|
+
--cold-neutral--300: var(--cold-gray--300);
|
|
497
|
+
--cold-neutral--400: var(--cold-gray--400);
|
|
498
|
+
--cold-neutral--500: var(--cold-gray--500);
|
|
499
|
+
--cold-neutral--600: var(--cold-gray--600);
|
|
500
|
+
--cold-neutral--700: var(--cold-gray--700);
|
|
501
|
+
--cold-neutral--800: var(--cold-gray--800);
|
|
502
|
+
--cold-neutral--850: var(--cold-gray--850);
|
|
503
|
+
--cold-neutral--900: var(--cold-gray--900);
|
|
504
|
+
--cold-neutral--950: var(--cold-gray--950);
|
|
505
|
+
--true-neutral--50: var(--gray--50);
|
|
506
|
+
--true-neutral--100: var(--gray--100);
|
|
507
|
+
--true-neutral--150: var(--gray--150);
|
|
508
|
+
--true-neutral--200: var(--gray--200);
|
|
509
|
+
--true-neutral--300: var(--gray--300);
|
|
510
|
+
--true-neutral--400: var(--gray--400);
|
|
511
|
+
--true-neutral--500: var(--gray--500);
|
|
512
|
+
--true-neutral--600: var(--gray--600);
|
|
513
|
+
--true-neutral--700: var(--gray--700);
|
|
514
|
+
--true-neutral--800: var(--gray--800);
|
|
515
|
+
--true-neutral--850: var(--gray--850);
|
|
516
|
+
--true-neutral--900: var(--gray--900);
|
|
517
|
+
--true-neutral--950: var(--gray--950);
|
|
518
|
+
--accent--orange--50: var(--red-orange--50);
|
|
519
|
+
--accent--orange--100: var(--red-orange--100);
|
|
520
|
+
--accent--orange--150: var(--red-orange--150);
|
|
521
|
+
--accent--orange--200: var(--red-orange--200);
|
|
522
|
+
--accent--orange--300: var(--red-orange--300);
|
|
523
|
+
--accent--orange--400: var(--red-orange--400);
|
|
524
|
+
--accent--orange--500: var(--red-orange--500);
|
|
525
|
+
--accent--orange--600: var(--red-orange--600);
|
|
526
|
+
--accent--orange--700: var(--red-orange--700);
|
|
527
|
+
--accent--orange--800: var(--red-orange--800);
|
|
528
|
+
--accent--orange--850: var(--red-orange--850);
|
|
529
|
+
--accent--orange--900: var(--red-orange--900);
|
|
530
|
+
--accent--orange--950: var(--red-orange--950);
|
|
531
|
+
--accent--green-yellow--50: var(--green-yellow--50);
|
|
532
|
+
--accent--green-yellow--100: var(--green-yellow--100);
|
|
533
|
+
--accent--green-yellow--150: var(--green-yellow--150);
|
|
534
|
+
--accent--green-yellow--200: var(--green-yellow--200);
|
|
535
|
+
--accent--green-yellow--300: var(--green-yellow--300);
|
|
536
|
+
--accent--green-yellow--400: var(--green-yellow--400);
|
|
537
|
+
--accent--green-yellow--500: var(--green-yellow--500);
|
|
538
|
+
--accent--green-yellow--600: var(--green-yellow--600);
|
|
539
|
+
--accent--green-yellow--700: var(--green-yellow--700);
|
|
540
|
+
--accent--green-yellow--800: var(--green-yellow--800);
|
|
541
|
+
--accent--green-yellow--850: var(--green-yellow--850);
|
|
542
|
+
--accent--green-yellow--900: var(--green-yellow--900);
|
|
543
|
+
--accent--green-yellow--950: var(--green-yellow--950);
|
|
544
|
+
--accent--pink--50: var(--pink--50);
|
|
545
|
+
--accent--pink--100: var(--pink--100);
|
|
546
|
+
--accent--pink--150: var(--pink--150);
|
|
547
|
+
--accent--pink--200: var(--pink--200);
|
|
548
|
+
--accent--pink--300: var(--pink--300);
|
|
549
|
+
--accent--pink--400: var(--pink--400);
|
|
550
|
+
--accent--pink--500: var(--pink--500);
|
|
551
|
+
--accent--pink--600: var(--pink--600);
|
|
552
|
+
--accent--pink--700: var(--pink--700);
|
|
553
|
+
--accent--pink--800: var(--pink--800);
|
|
554
|
+
--accent--pink--850: var(--pink--850);
|
|
555
|
+
--accent--pink--900: var(--pink--900);
|
|
556
|
+
--accent--pink--950: var(--pink--950);
|
|
557
|
+
--accent--blue--50: var(--blue--50);
|
|
558
|
+
--accent--blue--100: var(--blue--100);
|
|
559
|
+
--accent--blue--150: var(--blue--150);
|
|
560
|
+
--accent--blue--200: var(--blue--200);
|
|
561
|
+
--accent--blue--300: var(--blue--300);
|
|
562
|
+
--accent--blue--400: var(--blue--400);
|
|
563
|
+
--accent--blue--500: var(--blue--500);
|
|
564
|
+
--accent--blue--600: var(--blue--600);
|
|
565
|
+
--accent--blue--700: var(--blue--700);
|
|
566
|
+
--accent--blue--800: var(--blue--800);
|
|
567
|
+
--accent--blue--850: var(--blue--850);
|
|
568
|
+
--accent--blue--900: var(--blue--900);
|
|
569
|
+
--accent--blue--950: var(--blue--950);
|
|
570
|
+
--accent--yellow--50: var(--yellow--50);
|
|
571
|
+
--accent--yellow--100: var(--yellow--100);
|
|
572
|
+
--accent--yellow--150: var(--yellow--150);
|
|
573
|
+
--accent--yellow--200: var(--yellow--200);
|
|
574
|
+
--accent--yellow--300: var(--yellow--300);
|
|
575
|
+
--accent--yellow--400: var(--yellow--400);
|
|
576
|
+
--accent--yellow--500: var(--yellow--500);
|
|
577
|
+
--accent--yellow--600: var(--yellow--600);
|
|
578
|
+
--accent--yellow--700: var(--yellow--700);
|
|
579
|
+
--accent--yellow--800: var(--yellow--800);
|
|
580
|
+
--accent--yellow--850: var(--yellow--850);
|
|
581
|
+
--accent--yellow--900: var(--yellow--900);
|
|
582
|
+
--accent--yellow--950: var(--yellow--950);
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
// Mapped Internal (for internal-facing components)
|
|
586
|
+
.mapped--internal,
|
|
587
|
+
.mapped--external {
|
|
588
|
+
--radius--button: var(--scale--2400);
|
|
589
|
+
--radius--input: var(--scale--2400);
|
|
590
|
+
--color--text--default--heading: var(--true-neutral--850);
|
|
591
|
+
--color--text--default--body-darker: var(--true-neutral--850);
|
|
592
|
+
--color--text--default--body: var(--true-neutral--850);
|
|
593
|
+
--color--text--default--body-lighter: var(--true-neutral--700);
|
|
594
|
+
--color--text--default--label: var(--true-neutral--600);
|
|
595
|
+
--color--text--default--placeholder: var(--true-neutral--400);
|
|
596
|
+
--color--text--on-color--heading: var(--base-colors--white);
|
|
597
|
+
--color--text--on-color--body: var(--base-colors--white);
|
|
598
|
+
--color--text--on-color--label: var(--true-neutral--200);
|
|
599
|
+
--color--text--on-color--placeholder: var(--true-neutral--500);
|
|
600
|
+
--color--text--primary--default: var(--true-neutral--850);
|
|
601
|
+
--color--text--secondary--default: var(--error--500);
|
|
602
|
+
--color--text--secondary--default-hover: var(--error--600);
|
|
603
|
+
--color--text--primary--default-hover: var(--true-neutral--950);
|
|
604
|
+
--color--text--primary--dark: var(--true-neutral--950);
|
|
605
|
+
--color--text--primary--dark-hover: var(--true-neutral--850);
|
|
606
|
+
--color--text--error--default: var(--error--500);
|
|
607
|
+
--color--text--error--default-hover: var(--error--600);
|
|
608
|
+
--color--text--success--default: var(--success--500);
|
|
609
|
+
--color--text--success--default-hover: var(--success--600);
|
|
610
|
+
--color--text--information--default: var(--true-neutral--850);
|
|
611
|
+
--color--text--warning--default: var(--warning--500);
|
|
612
|
+
--color--text--warning--default-hover: var(--warning--600);
|
|
613
|
+
--color--text--information--default-hover: var(--true-neutral--950);
|
|
614
|
+
--color--text--disabled--default: var(--true-neutral--400);
|
|
615
|
+
--color--text--disabled--on-color: var(--true-neutral--150);
|
|
616
|
+
--color--icon--default--default-lighter: var(--true-neutral--700);
|
|
617
|
+
--color--icon--default--default: var(--true-neutral--850);
|
|
618
|
+
--color--icon--default--default-darker: var(--true-neutral--850);
|
|
619
|
+
--color--icon--on-color--on-color: var(--base-colors--white);
|
|
620
|
+
--color--icon--primary--default: var(--true-neutral--850);
|
|
621
|
+
--color--icon--primary--default-hover: var(--true-neutral--950);
|
|
622
|
+
--color--icon--primary--dark: var(--true-neutral--950);
|
|
623
|
+
--color--icon--primary--dark-hover: var(--true-neutral--850);
|
|
624
|
+
--color--icon--secondary--default: var(--error--500);
|
|
625
|
+
--color--icon--secondary--default-hover: var(--error--600);
|
|
626
|
+
--color--icon--error--default: var(--error--500);
|
|
627
|
+
--color--icon--error--default-hover: var(--error--600);
|
|
628
|
+
--color--icon--success--default: var(--success--500);
|
|
629
|
+
--color--icon--success--default-hover: var(--success--600);
|
|
630
|
+
--color--icon--warning--default: var(--warning--500);
|
|
631
|
+
--color--icon--warning--default-hover: var(--warning--600);
|
|
632
|
+
--color--icon--information--default: var(--primary--400);
|
|
633
|
+
--color--icon--information--default-hover: var(--primary--500);
|
|
634
|
+
--color--icon--disabled--default: var(--true-neutral--400);
|
|
635
|
+
--color--icon--disabled--on-color: var(--true-neutral--150);
|
|
636
|
+
--color--background--neutral--bg: var(--true-neutral--50);
|
|
637
|
+
--color--background--neutral--card: var(--base-colors--white);
|
|
638
|
+
--color--background--neutral--card-hover: var(--base-colors--white);
|
|
639
|
+
--color--background--neutral--verysubtle: var(--true-neutral--50);
|
|
640
|
+
--color--background--neutral--verysubtle--hover: var(--true-neutral--100);
|
|
641
|
+
--color--background--neutral--subtle: var(--true-neutral--100);
|
|
642
|
+
--color--background--neutral--subtle-hover: var(--true-neutral--200);
|
|
643
|
+
--color--background--neutral--dark: var(--true-neutral--950);
|
|
644
|
+
--color--background--neutral--dark-hover: var(--true-neutral--900);
|
|
645
|
+
--color--background--avatar--purple: var(--purple--400);
|
|
646
|
+
--color--background--avatar--turquoise: var(--turquoise--500);
|
|
647
|
+
--color--background--avatar--red: var(--red--500);
|
|
648
|
+
--color--background--avatar--green: var(--green--400);
|
|
649
|
+
--color--background--avatar--yellow: var(--orange--500);
|
|
650
|
+
--color--background--avatar--orange: var(--red-orange--500);
|
|
651
|
+
--color--background--avatar--greenyellow: var(--green-yellow--500);
|
|
652
|
+
--color--background--avatar--pink: var(--pink--400);
|
|
653
|
+
--color--background--avatar--blue: var(--blue--400);
|
|
654
|
+
--color--background--primary--default: var(--true-neutral--850);
|
|
655
|
+
--color--background--primary--default-hover: var(--true-neutral--950);
|
|
656
|
+
--color--background--primary--dark: var(--true-neutral--850);
|
|
657
|
+
--color--background--primary--dark-hover: var(--true-neutral--950);
|
|
658
|
+
--color--background--primary--dark-variant: var(--true-neutral--950);
|
|
659
|
+
--color--background--primary--dark-variant-hover: var(--true-neutral--850);
|
|
660
|
+
--color--background--primary--subtle: var(--true-neutral--100);
|
|
661
|
+
--color--background--primary--subtle-hover: var(--true-neutral--200);
|
|
662
|
+
--color--background--primary--verysubtle: var(--true-neutral--50);
|
|
663
|
+
--color--background--primary--verysubtle-hover: var(--true-neutral--100);
|
|
664
|
+
--color--background--secondary--default: var(--error--500);
|
|
665
|
+
--color--background--secondary--default-hover: var(--error--600);
|
|
666
|
+
--color--background--secondary--subtle: var(--error--200);
|
|
667
|
+
--color--background--secondary--subtle-hover: var(--error--300);
|
|
668
|
+
--color--background--secondary--verysubtle: var(--error--50);
|
|
669
|
+
--color--background--secondary--verysubtle-hover: var(--error--100);
|
|
670
|
+
--color--background--error--default: var(--error--500);
|
|
671
|
+
--color--background--error--default-hover: var(--error--600);
|
|
672
|
+
--color--background--error--subtle: var(--error--200);
|
|
673
|
+
--color--background--error--subtle-hover: var(--error--300);
|
|
674
|
+
--color--background--error--verysubtle: var(--error--50);
|
|
675
|
+
--color--background--error--verysubtle-hover: var(--error--100);
|
|
676
|
+
--color--background--success--default: var(--success--500);
|
|
677
|
+
--color--background--success--default-hover: var(--success--600);
|
|
678
|
+
--color--background--success--subtle: var(--success--200);
|
|
679
|
+
--color--background--success--subtle-hover: var(--success--300);
|
|
680
|
+
--color--background--success--verysubtle: var(--success--50);
|
|
681
|
+
--color--background--success--verysubtle-hover: var(--success--100);
|
|
682
|
+
--color--background--warning--default: var(--warning--500);
|
|
683
|
+
--color--background--warning--default-hover: var(--warning--600);
|
|
684
|
+
--color--background--warning--subtle: var(--warning--300);
|
|
685
|
+
--color--background--warning--subtle-hover: var(--warning--400);
|
|
686
|
+
--color--background--warning--verysubtle: var(--warning--100);
|
|
687
|
+
--color--background--warning--verysubtle-hover: var(--warning--200);
|
|
688
|
+
--color--background--disabled--default: var(--true-neutral--400);
|
|
689
|
+
--color--background--disabled--subtle: var(--true-neutral--100);
|
|
690
|
+
--color--border--neutral--default: var(--true-neutral--400);
|
|
691
|
+
--color--border--neutral--default-hover: var(--true-neutral--500);
|
|
692
|
+
--color--border--neutral--subtle: var(--true-neutral--200);
|
|
693
|
+
--color--border--neutral--subtle-hover: var(--true-neutral--300);
|
|
694
|
+
--color--border--neutral--on-color: var(--base-colors--white);
|
|
695
|
+
--color--border--neutral--on-color-hover: var(--base-colors--white);
|
|
696
|
+
--color--border--primary--default: var(--true-neutral--850);
|
|
697
|
+
--color--border--primary--default-hover: var(--true-neutral--950);
|
|
698
|
+
--color--border--primary--dark: var(--true-neutral--950);
|
|
699
|
+
--color--border--primary--dark-hover: var(--true-neutral--850);
|
|
700
|
+
--color--border--primary--subtle: var(--true-neutral--500);
|
|
701
|
+
--color--border--primary--subtle-hover: var(--true-neutral--600);
|
|
702
|
+
--color--border--secondary--default: var(--error--500);
|
|
703
|
+
--color--border--secondary--default-hover: var(--error--600);
|
|
704
|
+
--color--border--secondary--subtle: var(--error--200);
|
|
705
|
+
--color--border--secondary--subtle-hover: var(--error--300);
|
|
706
|
+
--color--border--error--default: var(--error--500);
|
|
707
|
+
--color--border--error--default-hover: var(--error--600);
|
|
708
|
+
--color--border--error--subtle: var(--error--200);
|
|
709
|
+
--color--border--error--subtle-hover: var(--error--300);
|
|
710
|
+
--color--border--success--default: var(--success--500);
|
|
711
|
+
--color--border--success--default-hover: var(--success--600);
|
|
712
|
+
--color--border--success--subtle: var(--success--200);
|
|
713
|
+
--color--border--success--subtle-hover: var(--success--300);
|
|
714
|
+
--color--border--warning--default: var(--warning--500);
|
|
715
|
+
--color--border--warning--default-hover: var(--warning--600);
|
|
716
|
+
--color--border--warning--subtle: var(--warning--300);
|
|
717
|
+
--color--border--warning--subtle-hover: var(--warning--400);
|
|
718
|
+
--color--border--disabled--default: var(--true-neutral--400);
|
|
719
|
+
--color--border--disabled--subtle: var(--true-neutral--100);
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
// Mapped External (overrides values that differ from Internal in Figma)
|
|
723
|
+
.mapped--external {
|
|
724
|
+
--radius--button: var(--scale--400);
|
|
725
|
+
--radius--input: var(--scale--400);
|
|
726
|
+
--color--text--default--heading: var(--cold-neutral--850);
|
|
727
|
+
--color--text--default--body-darker: var(--cold-neutral--800);
|
|
728
|
+
--color--text--default--body: var(--cold-neutral--700);
|
|
729
|
+
--color--text--default--body-lighter: var(--cold-neutral--600);
|
|
730
|
+
--color--text--default--label: var(--cold-neutral--600);
|
|
731
|
+
--color--text--default--placeholder: var(--cold-neutral--400);
|
|
732
|
+
--color--text--on-color--label: var(--cold-neutral--200);
|
|
733
|
+
--color--text--on-color--placeholder: var(--cold-neutral--500);
|
|
734
|
+
--color--text--primary--default: var(--primary--500);
|
|
735
|
+
--color--text--primary--default-hover: var(--primary--600);
|
|
736
|
+
--color--text--primary--dark: var(--primary--800);
|
|
737
|
+
--color--text--primary--dark-hover: var(--primary--700);
|
|
738
|
+
--color--text--secondary--default: var(--secondary--500);
|
|
739
|
+
--color--text--secondary--default-hover: var(--secondary--600);
|
|
740
|
+
--color--text--information--default: var(--primary--400);
|
|
741
|
+
--color--text--information--default-hover: var(--primary--500);
|
|
742
|
+
--color--text--disabled--default: var(--cold-neutral--400);
|
|
743
|
+
--color--text--disabled--on-color: var(--cold-neutral--150);
|
|
744
|
+
--color--icon--default--default-lighter: var(--cold-neutral--600);
|
|
745
|
+
--color--icon--default--default: var(--cold-neutral--700);
|
|
746
|
+
--color--icon--default--default-darker: var(--cold-neutral--800);
|
|
747
|
+
--color--icon--primary--default: var(--primary--500);
|
|
748
|
+
--color--icon--primary--default-hover: var(--primary--600);
|
|
749
|
+
--color--icon--primary--dark: var(--primary--800);
|
|
750
|
+
--color--icon--primary--dark-hover: var(--primary--700);
|
|
751
|
+
--color--icon--secondary--default: var(--secondary--500);
|
|
752
|
+
--color--icon--secondary--default-hover: var(--secondary--600);
|
|
753
|
+
--color--icon--disabled--default: var(--cold-neutral--400);
|
|
754
|
+
--color--icon--disabled--on-color: var(--cold-neutral--150);
|
|
755
|
+
--color--background--neutral--bg: var(--cold-neutral--50);
|
|
756
|
+
--color--background--neutral--card-hover: var(--cold-neutral--50);
|
|
757
|
+
--color--background--neutral--verysubtle: var(--cold-neutral--50);
|
|
758
|
+
--color--background--neutral--verysubtle--hover: var(--cold-neutral--100);
|
|
759
|
+
--color--background--neutral--subtle: var(--cold-neutral--100);
|
|
760
|
+
--color--background--neutral--subtle-hover: var(--cold-neutral--200);
|
|
761
|
+
--color--background--neutral--dark: var(--cold-neutral--950);
|
|
762
|
+
--color--background--neutral--dark-hover: var(--cold-neutral--900);
|
|
763
|
+
--color--background--primary--default: var(--primary--500);
|
|
764
|
+
--color--background--primary--default-hover: var(--primary--600);
|
|
765
|
+
--color--background--primary--dark: var(--primary--800);
|
|
766
|
+
--color--background--primary--dark-hover: var(--primary--700);
|
|
767
|
+
--color--background--primary--dark-variant: var(--primary--850);
|
|
768
|
+
--color--background--primary--dark-variant-hover: var(--primary--700);
|
|
769
|
+
--color--background--primary--subtle: var(--primary--100);
|
|
770
|
+
--color--background--primary--subtle-hover: var(--primary--200);
|
|
771
|
+
--color--background--primary--verysubtle: var(--primary--50);
|
|
772
|
+
--color--background--primary--verysubtle-hover: var(--primary--100);
|
|
773
|
+
--color--background--secondary--default: var(--secondary--500);
|
|
774
|
+
--color--background--secondary--default-hover: var(--secondary--600);
|
|
775
|
+
--color--background--secondary--subtle: var(--secondary--300);
|
|
776
|
+
--color--background--secondary--subtle-hover: var(--secondary--400);
|
|
777
|
+
--color--background--secondary--verysubtle: var(--secondary--50);
|
|
778
|
+
--color--background--secondary--verysubtle-hover: var(--secondary--100);
|
|
779
|
+
--color--background--disabled--default: var(--cold-neutral--400);
|
|
780
|
+
--color--background--disabled--subtle: var(--cold-neutral--100);
|
|
781
|
+
--color--border--neutral--default: var(--cold-neutral--400);
|
|
782
|
+
--color--border--neutral--default-hover: var(--cold-neutral--500);
|
|
783
|
+
--color--border--neutral--subtle: var(--cold-neutral--200);
|
|
784
|
+
--color--border--neutral--subtle-hover: var(--cold-neutral--300);
|
|
785
|
+
--color--border--primary--default: var(--primary--500);
|
|
786
|
+
--color--border--primary--default-hover: var(--primary--600);
|
|
787
|
+
--color--border--primary--dark: var(--primary--800);
|
|
788
|
+
--color--border--primary--dark-hover: var(--primary--700);
|
|
789
|
+
--color--border--primary--subtle: var(--primary--200);
|
|
790
|
+
--color--border--primary--subtle-hover: var(--primary--300);
|
|
791
|
+
--color--border--secondary--default: var(--secondary--500);
|
|
792
|
+
--color--border--secondary--default-hover: var(--secondary--600);
|
|
793
|
+
--color--border--secondary--subtle: var(--secondary--300);
|
|
794
|
+
--color--border--secondary--subtle-hover: var(--secondary--400);
|
|
795
|
+
--color--border--disabled--default: var(--cold-neutral--400);
|
|
796
|
+
--color--border--disabled--subtle: var(--cold-neutral--100);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
// Responsive Variables - Desktop (default, min-width: 1536px)
|
|
800
|
+
@media (min-width: 1536px) {
|
|
801
|
+
:root {
|
|
802
|
+
--font--heading--h1--text-size: var(--scale--4000);
|
|
803
|
+
--font--heading--h1--paragraph-spacing: var(--scale--4800);
|
|
804
|
+
--font--heading--h1--line-height: var(--scale--4800);
|
|
805
|
+
--font--heading--h2--text-size: var(--scale--3200);
|
|
806
|
+
--font--heading--h2--paragraph-spacing: var(--scale--4000);
|
|
807
|
+
--font--heading--h2--line-height: var(--scale--4000);
|
|
808
|
+
--font--heading--h3--text-size: var(--scale--2800);
|
|
809
|
+
--font--heading--h3--paragraph-spacing: var(--scale--3200);
|
|
810
|
+
--font--heading--h3--line-height: var(--scale--3200);
|
|
811
|
+
--font--heading--h4--text-size: var(--scale--2400);
|
|
812
|
+
--font--heading--h4--paragraph-spacing: var(--scale--2800);
|
|
813
|
+
--font--heading--h4--line-height: var(--scale--2800);
|
|
814
|
+
--font--heading--h5--text-size: var(--scale--2000);
|
|
815
|
+
--font--heading--h5--paragraph-spacing: var(--scale--2400);
|
|
816
|
+
--font--heading--h5--line-height: var(--scale--2400);
|
|
817
|
+
--font--heading--h6--text-size: var(--scale--1600);
|
|
818
|
+
--font--heading--h6--paragraph-spacing: var(--scale--2000);
|
|
819
|
+
--font--heading--h6--line-height: var(--scale--2000);
|
|
820
|
+
--font--body--body-lg--text-size: var(--scale--1800);
|
|
821
|
+
--font--body--body-lg--paragraph-spacing: var(--scale--2800);
|
|
822
|
+
--font--body--body-lg--line-height: var(--scale--2800);
|
|
823
|
+
--font--body--body--text-size: var(--scale--1600);
|
|
824
|
+
--font--body--body--paragraph-spacing: var(--scale--2400);
|
|
825
|
+
--font--body--body--line-height: var(--scale--2400);
|
|
826
|
+
--font--body--body-sm--text-size: var(--scale--1400);
|
|
827
|
+
--font--body--body-sm--paragraph-spacing: var(--scale--2000);
|
|
828
|
+
--font--body--body-sm--line-height: var(--scale--2000);
|
|
829
|
+
--font--body--label--text-size: var(--scale--1400);
|
|
830
|
+
--font--body--label--paragraph-spacing: var(--scale--2000);
|
|
831
|
+
--font--body--label--line-height: var(--scale--2000);
|
|
832
|
+
--icon--icon-size--4xl: var(--scale--4800);
|
|
833
|
+
--icon--icon-size--2xl: var(--scale--3200);
|
|
834
|
+
--icon--icon-size--xl: var(--scale--2800);
|
|
835
|
+
--icon--icon-size--lg: var(--scale--2400);
|
|
836
|
+
--icon--icon-weight--4xl: var(--scale--300);
|
|
837
|
+
--icon--icon-size--default: var(--scale--2000);
|
|
838
|
+
--icon--icon-size--sm: var(--scale--1600);
|
|
839
|
+
--icon--icon-weight--2xl: var(--scale--200);
|
|
840
|
+
--icon--icon-weight--xl: var(--scale--175);
|
|
841
|
+
--icon--icon-weight--lg: var(--scale--150);
|
|
842
|
+
--icon--icon-weight--default: var(--scale--125);
|
|
843
|
+
--icon--icon-weight--sm: var(--scale--100);
|
|
844
|
+
--avatar--avatar-size--2xs: var(--scale--2000);
|
|
845
|
+
--avatar--avatar-size--xs: var(--scale--2400);
|
|
846
|
+
--avatar--avatar-size--sm: var(--scale--2800);
|
|
847
|
+
--avatar--avatar-size--md: var(--scale--3200);
|
|
848
|
+
--avatar--avatar-size--lg: var(--scale--3600);
|
|
849
|
+
--avatar--avatar-size--xl: var(--scale--4000);
|
|
850
|
+
--spacing--4xs: var(--scale--200);
|
|
851
|
+
--spacing--3xs: var(--scale--400);
|
|
852
|
+
--spacing--2xs: var(--scale--800);
|
|
853
|
+
--spacing--xs: var(--scale--1200);
|
|
854
|
+
--spacing--sm: var(--scale--1600);
|
|
855
|
+
--spacing--md: var(--scale--2000);
|
|
856
|
+
--spacing--lg: var(--scale--2400);
|
|
857
|
+
--spacing--xl: var(--scale--3200);
|
|
858
|
+
--spacing--2xl: var(--scale--4000);
|
|
859
|
+
--spacing--3xl: var(--scale--4800);
|
|
860
|
+
--spacing--4xl: var(--scale--5200);
|
|
861
|
+
--scale--3xs: var(--scale--1600);
|
|
862
|
+
--scale--2xs: var(--scale--2000);
|
|
863
|
+
--scale--xs: var(--scale--2400);
|
|
864
|
+
--scale--sm: var(--scale--3200);
|
|
865
|
+
--scale--md: var(--scale--4000);
|
|
866
|
+
--scale--lg: var(--scale--4800);
|
|
867
|
+
--scale--xl: var(--scale--5200);
|
|
868
|
+
--scale--2xl: var(--scale--5600);
|
|
869
|
+
--scale--3xl: var(--scale--6400);
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
// Responsive Variables - Laptop (up to 1536px)
|
|
874
|
+
@media (max-width: 1535px) {
|
|
875
|
+
:root {
|
|
876
|
+
--font--heading--h1--text-size: var(--scale--3600);
|
|
877
|
+
--font--heading--h1--paragraph-spacing: var(--scale--4400);
|
|
878
|
+
--font--heading--h1--line-height: var(--scale--4400);
|
|
879
|
+
--font--heading--h2--text-size: var(--scale--2800);
|
|
880
|
+
--font--heading--h2--paragraph-spacing: var(--scale--3200);
|
|
881
|
+
--font--heading--h2--line-height: var(--scale--3200);
|
|
882
|
+
--font--heading--h3--text-size: var(--scale--2400);
|
|
883
|
+
--font--heading--h3--paragraph-spacing: var(--scale--2800);
|
|
884
|
+
--font--heading--h3--line-height: var(--scale--2800);
|
|
885
|
+
--font--heading--h4--text-size: var(--scale--2000);
|
|
886
|
+
--font--heading--h4--paragraph-spacing: var(--scale--2400);
|
|
887
|
+
--font--heading--h4--line-height: var(--scale--2400);
|
|
888
|
+
--font--heading--h5--text-size: var(--scale--1600);
|
|
889
|
+
--font--heading--h5--paragraph-spacing: var(--scale--2000);
|
|
890
|
+
--font--heading--h5--line-height: var(--scale--2000);
|
|
891
|
+
--font--heading--h6--text-size: var(--scale--1400);
|
|
892
|
+
--font--heading--h6--paragraph-spacing: var(--scale--1600);
|
|
893
|
+
--font--heading--h6--line-height: var(--scale--1600);
|
|
894
|
+
--font--body--body-lg--text-size: var(--scale--1600);
|
|
895
|
+
--font--body--body-lg--paragraph-spacing: var(--scale--2400);
|
|
896
|
+
--font--body--body-lg--line-height: var(--scale--2400);
|
|
897
|
+
--font--body--body--text-size: var(--scale--1400);
|
|
898
|
+
--font--body--body--paragraph-spacing: var(--scale--2000);
|
|
899
|
+
--font--body--body--line-height: var(--scale--2000);
|
|
900
|
+
--font--body--body-sm--text-size: var(--scale--1200);
|
|
901
|
+
--font--body--body-sm--paragraph-spacing: var(--scale--1800);
|
|
902
|
+
--font--body--body-sm--line-height: var(--scale--1800);
|
|
903
|
+
--font--body--label--text-size: var(--scale--1200);
|
|
904
|
+
--font--body--label--paragraph-spacing: var(--scale--1800);
|
|
905
|
+
--font--body--label--line-height: var(--scale--1800);
|
|
906
|
+
--icon--icon-size--4xl: var(--scale--4400);
|
|
907
|
+
--icon--icon-size--2xl: var(--scale--2800);
|
|
908
|
+
--icon--icon-size--xl: var(--scale--2400);
|
|
909
|
+
--icon--icon-size--lg: var(--scale--2000);
|
|
910
|
+
--icon--icon-weight--4xl: var(--scale--275);
|
|
911
|
+
--icon--icon-size--default: var(--scale--1600);
|
|
912
|
+
--icon--icon-size--sm: var(--scale--1200);
|
|
913
|
+
--icon--icon-weight--2xl: var(--scale--175);
|
|
914
|
+
--icon--icon-weight--xl: var(--scale--150);
|
|
915
|
+
--icon--icon-weight--lg: var(--scale--125);
|
|
916
|
+
--icon--icon-weight--default: var(--scale--100);
|
|
917
|
+
--icon--icon-weight--sm: var(--scale--75);
|
|
918
|
+
--avatar--avatar-size--2xs: var(--scale--1600);
|
|
919
|
+
--avatar--avatar-size--xs: var(--scale--2000);
|
|
920
|
+
--avatar--avatar-size--sm: var(--scale--2400);
|
|
921
|
+
--avatar--avatar-size--md: var(--scale--2800);
|
|
922
|
+
--avatar--avatar-size--lg: var(--scale--3200);
|
|
923
|
+
--avatar--avatar-size--xl: var(--scale--3600);
|
|
924
|
+
--spacing--4xs: var(--scale--0);
|
|
925
|
+
--spacing--3xs: var(--scale--200);
|
|
926
|
+
--spacing--2xs: var(--scale--400);
|
|
927
|
+
--spacing--xs: var(--scale--800);
|
|
928
|
+
--spacing--sm: var(--scale--1200);
|
|
929
|
+
--spacing--md: var(--scale--1600);
|
|
930
|
+
--spacing--lg: var(--scale--2000);
|
|
931
|
+
--spacing--xl: var(--scale--2800);
|
|
932
|
+
--spacing--2xl: var(--scale--3600);
|
|
933
|
+
--spacing--3xl: var(--scale--4400);
|
|
934
|
+
--spacing--4xl: var(--scale--4800);
|
|
935
|
+
--scale--3xs: var(--scale--1200);
|
|
936
|
+
--scale--2xs: var(--scale--1600);
|
|
937
|
+
--scale--xs: var(--scale--2000);
|
|
938
|
+
--scale--sm: var(--scale--2800);
|
|
939
|
+
--scale--md: var(--scale--3600);
|
|
940
|
+
--scale--lg: var(--scale--4400);
|
|
941
|
+
--scale--xl: var(--scale--4800);
|
|
942
|
+
--scale--2xl: var(--scale--5200);
|
|
943
|
+
--scale--3xl: var(--scale--6000);
|
|
944
|
+
}
|
|
945
|
+
}
|