@helloimjolopez-pathway/pathway-tokens 5.4.0 → 7.0.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.
Files changed (16) hide show
  1. package/README.md +80 -19
  2. package/components/scrollbar/scrollbar.jsx +184 -0
  3. package/components/sidenav/sidenav.jsx +866 -0
  4. package/dist/breakpoints.css +11 -0
  5. package/dist/layout-contextual.css +36 -0
  6. package/dist/layout-responsive.css +32 -0
  7. package/dist/layout.css +48 -0
  8. package/dist/motion.css +23 -0
  9. package/dist/primitives.css +358 -0
  10. package/dist/themes/light.css +175 -0
  11. package/dist/themes/midnight.css +175 -0
  12. package/dist/tokens.js +8943 -69506
  13. package/dist/tokens.json +3099 -10657
  14. package/dist/type.css +49 -0
  15. package/package.json +51 -8
  16. package/dist/tokens.css +0 -2648
package/dist/breakpoints.css ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --breakpoints-desktop-1920px: 1920px;
7
+ --breakpoints-desktop-1440px: 1440px;
8
+ --breakpoints-tablet-1024px: 1024px;
9
+ --breakpoints-tablet-768px: 768px;
10
+ --breakpoints-mobile-393px: 393px;
11
+ }
package/dist/layout-contextual.css ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * contextual-layout-units — one name per token, breakpoint resolved by media query.
3
+ * Generated by style-dictionary.config.js. Do not edit.
4
+ *
5
+ * :root is the desktop value. Narrower breakpoints override only what differs.
6
+ */
7
+ :root {
8
+ --contextual-layout-units-button-border-width-hover: 1px;
9
+ --contextual-layout-units-button-border-width-rest: 0.75px;
10
+ --contextual-layout-units-button-corner-radius-radius: 8px;
11
+ --contextual-layout-units-button-gap-horizontal: 8px;
12
+ --contextual-layout-units-button-padding-large-horizontal: 14px;
13
+ --contextual-layout-units-button-padding-large-vertical: 12px;
14
+ --contextual-layout-units-button-padding-medium-horizontal: 12px;
15
+ --contextual-layout-units-button-padding-medium-vertical: 10px;
16
+ --contextual-layout-units-button-padding-small-horizontal: 8px;
17
+ --contextual-layout-units-button-padding-small-vertical: 6px;
18
+ --contextual-layout-units-button-padding-xsmall-horizontal: 8px;
19
+ --contextual-layout-units-button-padding-xsmall-vertical: 6px;
20
+ --contextual-layout-units-button-radius: 8px;
21
+ --contextual-layout-units-card-border-width-hover: 0.75px;
22
+ --contextual-layout-units-card-border-width-rest: 0.5px;
23
+ --contextual-layout-units-card-cornerradius: 12px;
24
+ --contextual-layout-units-card-gap: 8px;
25
+ --contextual-layout-units-card-padding-medium-horizontal: 16px;
26
+ --contextual-layout-units-card-padding-medium-vertical: 16px;
27
+ --contextual-layout-units-card-padding-small-horizontal: 14px;
28
+ --contextual-layout-units-card-padding-small-vertical: 14px;
29
+ --contextual-layout-units-field-borderwidth: 1px;
30
+ --contextual-layout-units-focus-ring-offset: 2px;
31
+ --contextual-layout-units-focus-ring-width: 2px;
32
+ --contextual-layout-units-navitem-corner-radius-radius: 8px;
33
+ --contextual-layout-units-navitem-padding-horizontal: 14px;
34
+ --contextual-layout-units-navitem-padding-vertical: 12px;
35
+ --contextual-layout-units-selector-borderwidth: 1px;
36
+ }
package/dist/layout-responsive.css ADDED
@@ -0,0 +1,32 @@
1
+ /**
2
+ * shell-layout — one name per token, breakpoint resolved by media query.
3
+ * Generated by style-dictionary.config.js. Do not edit.
4
+ *
5
+ * :root is the desktop value. Narrower breakpoints override only what differs.
6
+ */
7
+ :root {
8
+ --shell-layout-sheet-padding-bottom: 64px;
9
+ --shell-layout-sheet-padding-horizontal: 36px;
10
+ --shell-layout-sheet-padding-top: 16px;
11
+ --shell-layout-topnav-height: 56px;
12
+ --shell-layout-topnav-padding-horizontal: 16px;
13
+ --shell-layout-topnav-padding-vertical: 6px;
14
+ }
15
+
16
+ @media (max-width: 1023px) {
17
+ :root {
18
+ --shell-layout-sheet-padding-bottom: 48px;
19
+ --shell-layout-sheet-padding-horizontal: 24px;
20
+ --shell-layout-sheet-padding-top: 14px;
21
+ --shell-layout-topnav-padding-horizontal: 12px;
22
+ }
23
+ }
24
+
25
+ @media (max-width: 767px) {
26
+ :root {
27
+ --shell-layout-sheet-padding-bottom: 36px;
28
+ --shell-layout-sheet-padding-horizontal: 16px;
29
+ --shell-layout-sheet-padding-top: 12px;
30
+ --shell-layout-topnav-padding-horizontal: 8px;
31
+ }
32
+ }
package/dist/layout.css ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * semantic-layout-units — one name per token, breakpoint resolved by media query.
3
+ * Generated by style-dictionary.config.js. Do not edit.
4
+ *
5
+ * :root is the desktop value. Narrower breakpoints override only what differs.
6
+ */
7
+ :root {
8
+ --semantic-layout-units-accessibility-touch-target-aa-height: 44px;
9
+ --semantic-layout-units-accessibility-touch-target-aa-width: 44px;
10
+ --semantic-layout-units-accessibility-touch-target-aaa-height: 48px;
11
+ --semantic-layout-units-accessibility-touch-target-aaa-width: 48px;
12
+ --semantic-layout-units-accessibility-touch-target-desktop-only-height: 36px;
13
+ --semantic-layout-units-accessibility-touch-target-desktop-only-width: 36px;
14
+ --semantic-layout-units-borderwidth-base: 1px;
15
+ --semantic-layout-units-borderwidth-medium: 1.5px;
16
+ --semantic-layout-units-borderwidth-thick: 2px;
17
+ --semantic-layout-units-borderwidth-thin: 0.75px;
18
+ --semantic-layout-units-borderwidth-xthick: 4px;
19
+ --semantic-layout-units-borderwidth-xthin: 0.5px;
20
+ --semantic-layout-units-borderwidth-xxthick: 6px;
21
+ --semantic-layout-units-cornerradius-base: 8px;
22
+ --semantic-layout-units-cornerradius-full: 64px;
23
+ --semantic-layout-units-cornerradius-large: 12px;
24
+ --semantic-layout-units-cornerradius-medium: 8px;
25
+ --semantic-layout-units-cornerradius-small: 4px;
26
+ --semantic-layout-units-cornerradius-xlarge: 16px;
27
+ --semantic-layout-units-cornerradius-xsmall: 2px;
28
+ --semantic-layout-units-gap-base: 16px;
29
+ --semantic-layout-units-gap-medium: 12px;
30
+ --semantic-layout-units-gap-relaxed: 24px;
31
+ --semantic-layout-units-gap-tight: 8px;
32
+ --semantic-layout-units-gap-wide: 36px;
33
+ --semantic-layout-units-gap-xtight: 6px;
34
+ --semantic-layout-units-gap-xxtight: 4px;
35
+ --semantic-layout-units-gap-xxxtight: 2px;
36
+ --semantic-layout-units-padding-base: 16px;
37
+ --semantic-layout-units-padding-collosal: 120px;
38
+ --semantic-layout-units-padding-ginormous: 64px;
39
+ --semantic-layout-units-padding-medium: 12px;
40
+ --semantic-layout-units-padding-relaxed: 24px;
41
+ --semantic-layout-units-padding-tight: 8px;
42
+ --semantic-layout-units-padding-wide: 36px;
43
+ --semantic-layout-units-padding-xtight: 6px;
44
+ --semantic-layout-units-padding-xwide: 48px;
45
+ --semantic-layout-units-padding-xxtight: 4px;
46
+ --semantic-layout-units-padding-xxwide: 56px;
47
+ --semantic-layout-units-padding-xxxtight: 2px;
48
+ }
package/dist/motion.css ADDED
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
7
+ --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
8
+ --motion-duration-3: 200ms; /** Micro-interactions needing slightly more presence; small reveals, focus rings */
9
+ --motion-duration-4: 300ms; /** Chevron / disclosure rotation, dropdown & popover content, in-component state */
10
+ --motion-duration-5: 380ms; /** Panel state changes: accordions, expand/collapse, item enter/exit */
11
+ --motion-duration-6: 460ms; /** Large physical-scale moves (e.g. SideNav width expand/collapse) */
12
+ --motion-duration-7: 680ms; /** Cross-component transitions: page content sliding, large layout shifts */
13
+ --motion-duration-8: 1100ms; /** Slowest transition step: very large layout shifts, deliberate full-screen moves */
14
+ --motion-duration-loop: 1000ms; /** Standard continuous-loop period (standalone Spinner, skeleton shimmer) */
15
+ --motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner — faster reads as more responsive feedback) */
16
+ --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
17
+ --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below. */
18
+ --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
19
+ --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
20
+ --motion-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /** Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot. */
21
+ --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
22
+ --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Continuous loops only (spinners, shimmer). Never for bounded transitions. */
23
+ }
package/dist/primitives.css ADDED
@@ -0,0 +1,358 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --primitive-color-cool-neutral-0: #ffffff;
7
+ --primitive-color-cool-neutral-10: #fafafa;
8
+ --primitive-color-cool-neutral-25: #f6f6f6;
9
+ --primitive-color-cool-neutral-50: #ededed;
10
+ --primitive-color-cool-neutral-75: #e1e1e1;
11
+ --primitive-color-cool-neutral-100: #d2d2d2;
12
+ --primitive-color-cool-neutral-125: #c4c4c4;
13
+ --primitive-color-cool-neutral-150: #b5b5b5;
14
+ --primitive-color-cool-neutral-175: #a6a6a6;
15
+ --primitive-color-cool-neutral-200: #979797;
16
+ --primitive-color-cool-neutral-250: #8b8b8b;
17
+ --primitive-color-cool-neutral-300: #7b7b7b;
18
+ --primitive-color-cool-neutral-350: #6b6b6b;
19
+ --primitive-color-cool-neutral-400: #606060;
20
+ --primitive-color-cool-neutral-450: #545454;
21
+ --primitive-color-cool-neutral-500: #484848;
22
+ --primitive-color-cool-neutral-550: #3d3d3d;
23
+ --primitive-color-cool-neutral-600: #313131;
24
+ --primitive-color-cool-neutral-700: #202020;
25
+ --primitive-color-cool-neutral-800: #161616;
26
+ --primitive-color-cool-neutral-900: #070707;
27
+ --primitive-color-cool-neutral-0-4: rgba(255, 255, 255, 0.04);
28
+ --primitive-color-cool-neutral-0-8: rgba(255, 255, 255, 0.08);
29
+ --primitive-color-cool-neutral-0-16: rgba(255, 255, 255, 0.16);
30
+ --primitive-color-cool-neutral-0-24: rgba(255, 255, 255, 0.24);
31
+ --primitive-color-cool-neutral-0-36: rgba(255, 255, 255, 0.36);
32
+ --primitive-color-cool-neutral-0-50: rgba(255, 255, 255, 0.5);
33
+ --primitive-color-cool-neutral-0-70: rgba(255, 255, 255, 0.7);
34
+ --primitive-color-cool-neutral-800-4: rgba(22, 22, 22, 0.04);
35
+ --primitive-color-cool-neutral-800-8: rgba(22, 22, 22, 0.08);
36
+ --primitive-color-cool-neutral-800-16: rgba(22, 22, 22, 0.16);
37
+ --primitive-color-cool-neutral-800-24: rgba(22, 22, 22, 0.24);
38
+ --primitive-color-cool-neutral-800-36: rgba(22, 22, 22, 0.36);
39
+ --primitive-color-cool-neutral-800-50: rgba(22, 22, 22, 0.5);
40
+ --primitive-color-cool-neutral-800-70: rgba(22, 22, 22, 0.7);
41
+ --primitive-color-warm-neutral-0: #fefefd;
42
+ --primitive-color-warm-neutral-25: #f9f7f5;
43
+ --primitive-color-warm-neutral-50: #f3f0ec;
44
+ --primitive-color-warm-neutral-75: #e6e2dc;
45
+ --primitive-color-warm-neutral-100: #d8d3cd;
46
+ --primitive-color-warm-neutral-125: #d1ccc5;
47
+ --primitive-color-warm-neutral-150: #cbc6be;
48
+ --primitive-color-warm-neutral-175: #c4bfb7;
49
+ --primitive-color-warm-neutral-200: #bdb8b0;
50
+ --primitive-color-warm-neutral-250: #b0aaa2;
51
+ --primitive-color-warm-neutral-300: #9b968e;
52
+ --primitive-color-warm-neutral-350: #87827b;
53
+ --primitive-color-warm-neutral-400: #77726b;
54
+ --primitive-color-warm-neutral-450: #67625c;
55
+ --primitive-color-warm-neutral-500: #57534e;
56
+ --primitive-color-warm-neutral-550: #484540;
57
+ --primitive-color-warm-neutral-600: #393733;
58
+ --primitive-color-warm-neutral-700: #2b2926;
59
+ --primitive-color-warm-neutral-800: #1e1c1a;
60
+ --primitive-color-warm-neutral-900: #0f0e0d;
61
+ --primitive-color-warm-neutral-100-4: rgba(216, 211, 205, 0.04);
62
+ --primitive-color-warm-neutral-100-8: rgba(216, 211, 205, 0.08);
63
+ --primitive-color-warm-neutral-100-16: rgba(216, 211, 205, 0.16);
64
+ --primitive-color-warm-neutral-100-24: rgba(216, 211, 205, 0.24);
65
+ --primitive-color-warm-neutral-100-36: rgba(216, 211, 205, 0.36);
66
+ --primitive-color-warm-neutral-100-50: rgba(216, 211, 205, 0.5);
67
+ --primitive-color-warm-neutral-100-70: rgba(216, 211, 205, 0.7);
68
+ --primitive-color-warm-neutral-500-4: rgba(87, 83, 78, 0.04);
69
+ --primitive-color-warm-neutral-500-8: rgba(87, 83, 78, 0.08);
70
+ --primitive-color-warm-neutral-500-16: rgba(87, 83, 78, 0.16);
71
+ --primitive-color-warm-neutral-500-24: rgba(87, 83, 78, 0.24);
72
+ --primitive-color-warm-neutral-500-36: rgba(87, 83, 78, 0.36);
73
+ --primitive-color-warm-neutral-500-50: rgba(87, 83, 78, 0.5);
74
+ --primitive-color-warm-neutral-500-70: rgba(87, 83, 78, 0.7);
75
+ --primitive-color-brand-0: #f9fafd;
76
+ --primitive-color-brand-10: #eef2fb;
77
+ --primitive-color-brand-25: #e2e9f7;
78
+ --primitive-color-brand-50: #ccd7f2;
79
+ --primitive-color-brand-75: #b6c6ec;
80
+ --primitive-color-brand-100: #a0b5e6;
81
+ --primitive-color-brand-150: #86a0dd;
82
+ --primitive-color-brand-200: #6e8bd4;
83
+ --primitive-color-brand-250: #5d7cca;
84
+ --primitive-color-brand-300: #5475c6;
85
+ --primitive-color-brand-350: #4b6ec3;
86
+ --primitive-color-brand-400: #4364b6;
87
+ --primitive-color-brand-450: #3a5aaa;
88
+ --primitive-color-brand-500: #345499;
89
+ --primitive-color-brand-550: #2d4889;
90
+ --primitive-color-brand-600: #22386b;
91
+ --primitive-color-brand-700: #152343;
92
+ --primitive-color-brand-800: #0a1223;
93
+ --primitive-color-brand-900: #060a15;
94
+ --primitive-color-brand-75-4: rgba(182, 198, 236, 0.04);
95
+ --primitive-color-brand-75-8: rgba(182, 198, 236, 0.08);
96
+ --primitive-color-brand-75-16: rgba(182, 198, 236, 0.16);
97
+ --primitive-color-brand-75-24: rgba(182, 198, 236, 0.24);
98
+ --primitive-color-brand-75-36: rgba(182, 198, 236, 0.36);
99
+ --primitive-color-brand-75-50: rgba(182, 198, 236, 0.5);
100
+ --primitive-color-brand-75-70: rgba(182, 198, 236, 0.7);
101
+ --primitive-color-brand-600-4: rgba(34, 56, 107, 0.04);
102
+ --primitive-color-brand-600-8: rgba(34, 56, 107, 0.08);
103
+ --primitive-color-brand-600-16: rgba(34, 56, 107, 0.16);
104
+ --primitive-color-brand-600-24: rgba(34, 56, 107, 0.24);
105
+ --primitive-color-brand-600-36: rgba(34, 56, 107, 0.36);
106
+ --primitive-color-brand-600-50: rgba(34, 56, 107, 0.5);
107
+ --primitive-color-brand-600-70: rgba(34, 56, 107, 0.7);
108
+ --primitive-color-red-0: #fdfafa;
109
+ --primitive-color-red-25: #faefef;
110
+ --primitive-color-red-50: #f5dfdf;
111
+ --primitive-color-red-75: #f0cdcd;
112
+ --primitive-color-red-100: #e9b7b7;
113
+ --primitive-color-red-150: #e29f9f;
114
+ --primitive-color-red-200: #d98686;
115
+ --primitive-color-red-250: #cf6e6e;
116
+ --primitive-color-red-300: #c55858;
117
+ --primitive-color-red-350: #ba4646;
118
+ --primitive-color-red-400: #b03a3a;
119
+ --primitive-color-red-450: #a63232;
120
+ --primitive-color-red-500: #9d2d2d;
121
+ --primitive-color-red-600: #882727;
122
+ --primitive-color-red-700: #722121;
123
+ --primitive-color-red-800: #5f1b1b;
124
+ --primitive-color-red-900: #520f11;
125
+ --primitive-color-orange-0: #fcfafa;
126
+ --primitive-color-orange-25: #f9f1ed;
127
+ --primitive-color-orange-50: #f9e2d6;
128
+ --primitive-color-orange-75: #f9d2bc;
129
+ --primitive-color-orange-100: #fabd9d;
130
+ --primitive-color-orange-150: #fda97b;
131
+ --primitive-color-orange-200: #fe9156;
132
+ --primitive-color-orange-250: #f97b38;
133
+ --primitive-color-orange-300: #f56618;
134
+ --primitive-color-orange-350: #e1580e;
135
+ --primitive-color-orange-400: #c14d0f;
136
+ --primitive-color-orange-500: #a5420d;
137
+ --primitive-color-orange-600: #8d380b;
138
+ --primitive-color-orange-700: #72300c;
139
+ --primitive-color-orange-800: #59270c;
140
+ --primitive-color-orange-900: #491900;
141
+ --primitive-color-green-0: #f8fcf9;
142
+ --primitive-color-green-25: #dff6e2;
143
+ --primitive-color-green-50: #c9edce;
144
+ --primitive-color-green-75: #b4e4b9;
145
+ --primitive-color-green-100: #9edba5;
146
+ --primitive-color-green-150: #7acd84;
147
+ --primitive-color-green-200: #59c56b;
148
+ --primitive-color-green-300: #3db856;
149
+ --primitive-color-green-350: #36a14f;
150
+ --primitive-color-green-400: #358d4b;
151
+ --primitive-color-green-500: #2a793e;
152
+ --primitive-color-green-600: #1f602e;
153
+ --primitive-color-green-700: #174f26;
154
+ --primitive-color-green-800: #0d351b;
155
+ --primitive-color-green-900: #001f00;
156
+ --primitive-color-seabreeze-0: #f6fbfd;
157
+ --primitive-color-seabreeze-25: #e9f6fc;
158
+ --primitive-color-seabreeze-50: #dbf0fb;
159
+ --primitive-color-seabreeze-75: #c4e7f8;
160
+ --primitive-color-seabreeze-100: #b1e1f6;
161
+ --primitive-color-seabreeze-150: #95d4ee;
162
+ --primitive-color-seabreeze-200: #7bc7e5;
163
+ --primitive-color-seabreeze-250: #66badb;
164
+ --primitive-color-seabreeze-300: #5ab1d3;
165
+ --primitive-color-seabreeze-350: #52abce;
166
+ --primitive-color-seabreeze-400: #3597bb;
167
+ --primitive-color-seabreeze-500: #2a7e9d;
168
+ --primitive-color-seabreeze-600: #216883;
169
+ --primitive-color-seabreeze-700: #185167;
170
+ --primitive-color-seabreeze-800: #123c4e;
171
+ --primitive-color-seabreeze-900: #00293a;
172
+ --primitive-color-lagoon-0: #f8fbfc;
173
+ --primitive-color-lagoon-25: #e5f2f4;
174
+ --primitive-color-lagoon-50: #d2e9ed;
175
+ --primitive-color-lagoon-75: #bfe0e5;
176
+ --primitive-color-lagoon-100: #acd7dd;
177
+ --primitive-color-lagoon-150: #9aced5;
178
+ --primitive-color-lagoon-200: #89c5cd;
179
+ --primitive-color-lagoon-250: #7bbec6;
180
+ --primitive-color-lagoon-300: #5dbac6;
181
+ --primitive-color-lagoon-350: #31adc0;
182
+ --primitive-color-lagoon-400: #23a4b8;
183
+ --primitive-color-lagoon-500: #1e99ae;
184
+ --primitive-color-lagoon-600: #187d8e;
185
+ --primitive-color-lagoon-700: #146171;
186
+ --primitive-color-lagoon-800: #104956;
187
+ --primitive-color-lagoon-900: #003440;
188
+ --primitive-color-jade-0: #f8fcfb;
189
+ --primitive-color-jade-25: #daf1eb;
190
+ --primitive-color-jade-50: #c7ebe1;
191
+ --primitive-color-jade-75: #aee3d6;
192
+ --primitive-color-jade-100: #94dbc9;
193
+ --primitive-color-jade-150: #85d6c2;
194
+ --primitive-color-jade-200: #6fceb7;
195
+ --primitive-color-jade-250: #41c8a9;
196
+ --primitive-color-jade-300: #2bab92;
197
+ --primitive-color-jade-350: #208877;
198
+ --primitive-color-jade-400: #1a766a;
199
+ --primitive-color-jade-500: #176459;
200
+ --primitive-color-jade-600: #135349;
201
+ --primitive-color-jade-700: #10423b;
202
+ --primitive-color-jade-800: #0d362f;
203
+ --primitive-color-jade-900: #012b25;
204
+ --primitive-color-amethyst-0: #faf9fc;
205
+ --primitive-color-amethyst-25: #f4f2fa;
206
+ --primitive-color-amethyst-50: #e8e6f5;
207
+ --primitive-color-amethyst-75: #dcd9ef;
208
+ --primitive-color-amethyst-100: #cbc6e8;
209
+ --primitive-color-amethyst-150: #b9b3e0;
210
+ --primitive-color-amethyst-200: #a8a0d8;
211
+ --primitive-color-amethyst-300: #9a90d0;
212
+ --primitive-color-amethyst-350: #877ec8;
213
+ --primitive-color-amethyst-400: #6e64b8;
214
+ --primitive-color-amethyst-500: #5951a0;
215
+ --primitive-color-amethyst-600: #464080;
216
+ --primitive-color-amethyst-700: #353063;
217
+ --primitive-color-amethyst-800: #221e3f;
218
+ --primitive-color-amethyst-900: #110c2c;
219
+ --primitive-color-saffron-0: #fefaf2;
220
+ --primitive-color-saffron-25: #fef2de;
221
+ --primitive-color-saffron-50: #feeaca;
222
+ --primitive-color-saffron-75: #fee2b3;
223
+ --primitive-color-saffron-100: #fed897;
224
+ --primitive-color-saffron-150: #ffc864;
225
+ --primitive-color-saffron-200: #eab655;
226
+ --primitive-color-saffron-300: #bf9342;
227
+ --primitive-color-saffron-350: #aa843e;
228
+ --primitive-color-saffron-400: #91723b;
229
+ --primitive-color-saffron-500: #6d5936;
230
+ --primitive-color-saffron-600: #51432c;
231
+ --primitive-color-saffron-700: #342d21;
232
+ --primitive-color-saffron-800: #1d1912;
233
+ --primitive-color-saffron-900: #110d07;
234
+ --primitive-color-mauve-0: #fcf9fb;
235
+ --primitive-color-mauve-25: #f7e9f2;
236
+ --primitive-color-mauve-75: #f2d9e9;
237
+ --primitive-color-mauve-100: #ebc6de;
238
+ --primitive-color-mauve-150: #e2accf;
239
+ --primitive-color-mauve-200: #d586b9;
240
+ --primitive-color-mauve-300: #c85fa5;
241
+ --primitive-color-mauve-350: #b83d8f;
242
+ --primitive-color-mauve-400: #9b3178;
243
+ --primitive-color-mauve-500: #842a66;
244
+ --primitive-color-mauve-700: #74255a;
245
+ --primitive-color-mauve-800: #65204e;
246
+ --primitive-color-mauve-900: #5b1545;
247
+ --primitive-type-family-brand: Red Hat Text;
248
+ --primitive-type-fontstyle-normal: Normal;
249
+ --primitive-type-fontstyle-italic: Italic;
250
+ --primitive-type-textdecoration-none: None;
251
+ --primitive-type-textdecoration-underline: Underline;
252
+ --primitive-type-size-10: 10px;
253
+ --primitive-type-size-11: 11px;
254
+ --primitive-type-size-12: 12px;
255
+ --primitive-type-size-14: 14px;
256
+ --primitive-type-size-16: 16px;
257
+ --primitive-type-size-18: 18px;
258
+ --primitive-type-size-20: 20px;
259
+ --primitive-type-size-24: 24px;
260
+ --primitive-type-size-32: 32px;
261
+ --primitive-type-size-36: 36px;
262
+ --primitive-type-size-40: 40px;
263
+ --primitive-type-size-48: 48px;
264
+ --primitive-type-size-56: 56px;
265
+ --primitive-type-weight-300: 300;
266
+ --primitive-type-weight-400: 400;
267
+ --primitive-type-weight-500: 500;
268
+ --primitive-type-weight-600: 600;
269
+ --primitive-type-weight-700: 700;
270
+ --primitive-type-line-height-56pt-tight: 60px;
271
+ --primitive-type-line-height-56pt-single: 68px;
272
+ --primitive-type-line-height-56pt-relaxed: 76px;
273
+ --primitive-type-line-height-56pt-spacious: 84px;
274
+ --primitive-type-line-height-48pt-tight: 52px;
275
+ --primitive-type-line-height-48pt-single: 58px;
276
+ --primitive-type-line-height-48pt-relaxed: 64px;
277
+ --primitive-type-line-height-48pt-spacious: 72px;
278
+ --primitive-type-line-height-40pt-tight: 44px;
279
+ --primitive-type-line-height-40pt-single: 48px;
280
+ --primitive-type-line-height-40pt-relaxed: 52px;
281
+ --primitive-type-line-height-40pt-spacious: 56px;
282
+ --primitive-type-line-height-36pt-tight: 40px;
283
+ --primitive-type-line-height-36pt-single: 44px;
284
+ --primitive-type-line-height-36pt-relaxed: 50px;
285
+ --primitive-type-line-height-36pt-spacious: 58px;
286
+ --primitive-type-line-height-32pt-tight: 36px;
287
+ --primitive-type-line-height-32pt-single: 40px;
288
+ --primitive-type-line-height-32pt-relaxed: 46px;
289
+ --primitive-type-line-height-32pt-spacious: 52px;
290
+ --primitive-type-line-height-24pt-tight: 28px;
291
+ --primitive-type-line-height-24pt-single: 30px;
292
+ --primitive-type-line-height-24pt-relaxed: 36px;
293
+ --primitive-type-line-height-24pt-spacious: 40px;
294
+ --primitive-type-line-height-20pt-tight: 24px;
295
+ --primitive-type-line-height-20pt-single: 28px;
296
+ --primitive-type-line-height-20pt-relaxed: 32px;
297
+ --primitive-type-line-height-20pt-spacious: 36px;
298
+ --primitive-type-line-height-18pt-tight: 22px;
299
+ --primitive-type-line-height-18pt-single: 24px;
300
+ --primitive-type-line-height-18pt-relaxed: 30px;
301
+ --primitive-type-line-height-18pt-spacious: 34px;
302
+ --primitive-type-line-height-16pt-tight: 20px;
303
+ --primitive-type-line-height-16pt-single: 22px;
304
+ --primitive-type-line-height-16pt-relaxed: 28px;
305
+ --primitive-type-line-height-16pt-spacious: 30px;
306
+ --primitive-type-line-height-14pt-tight: 18px;
307
+ --primitive-type-line-height-14pt-single: 20px;
308
+ --primitive-type-line-height-14pt-relaxed: 24px;
309
+ --primitive-type-line-height-14pt-spacious: 28px;
310
+ --primitive-type-line-height-12pt-tight: 16px;
311
+ --primitive-type-line-height-12pt-single: 18px;
312
+ --primitive-type-line-height-12pt-relaxed: 22px;
313
+ --primitive-type-line-height-12pt-spacious: 24px;
314
+ --primitive-type-line-height-11pt-tight: 14px;
315
+ --primitive-type-line-height-11pt-single: 16px;
316
+ --primitive-type-line-height-11pt-relaxed: 18px;
317
+ --primitive-type-line-height-11pt-spacious: 22px;
318
+ --primitive-type-line-height-10pt-tight: 12px;
319
+ --primitive-type-line-height-10pt-single: 14px;
320
+ --primitive-type-line-height-10pt-relaxed: 16px;
321
+ --primitive-type-line-height-10pt-spacious: 20px;
322
+ --primitive-type-letter-spacing-compact: 0px;
323
+ --primitive-type-letter-spacing-standard: 0.10000000149011612px;
324
+ --primitive-type-letter-spacing-wide: 0.30000001192092896px;
325
+ --primitive-type-letter-spacing-extrawide: 0.6000000238418579px;
326
+ --primitive-unit-unit-1: 1px;
327
+ --primitive-unit-unit-2: 2px;
328
+ --primitive-unit-unit-4: 4px;
329
+ --primitive-unit-unit-6: 6px;
330
+ --primitive-unit-unit-8: 8px;
331
+ --primitive-unit-unit-10: 10px;
332
+ --primitive-unit-unit-11: 11px;
333
+ --primitive-unit-unit-12: 12px;
334
+ --primitive-unit-unit-14: 14px;
335
+ --primitive-unit-unit-16: 16px;
336
+ --primitive-unit-unit-18: 18px;
337
+ --primitive-unit-unit-20: 20px;
338
+ --primitive-unit-unit-24: 24px;
339
+ --primitive-unit-unit-26: 26px;
340
+ --primitive-unit-unit-28: 28px;
341
+ --primitive-unit-unit-32: 32px;
342
+ --primitive-unit-unit-36: 36px;
343
+ --primitive-unit-unit-40: 40px;
344
+ --primitive-unit-unit-44: 44px;
345
+ --primitive-unit-unit-48: 48px;
346
+ --primitive-unit-unit-56: 56px;
347
+ --primitive-unit-unit-64: 64px;
348
+ --primitive-unit-unit-72: 72px;
349
+ --primitive-unit-unit-80: 80px;
350
+ --primitive-unit-unit-88: 88px;
351
+ --primitive-unit-unit-96: 96px;
352
+ --primitive-unit-unit-104: 104px;
353
+ --primitive-unit-unit-112: 112px;
354
+ --primitive-unit-unit-120: 120px;
355
+ --primitive-unit-unit-0-point-5: 0.5px;
356
+ --primitive-unit-unit-0-point-75: 0.75px;
357
+ --primitive-unit-unit-1-point-5: 1.5px;
358
+ }