@nycds/variables 0.2.2
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/CHANGELOG.md +185 -0
- package/LICENSE +674 -0
- package/README.org +247 -0
- package/dist/dark.css +268 -0
- package/dist/dark.min.css +1 -0
- package/dist/variables.css +368 -0
- package/dist/variables.min.css +1 -0
- package/package.json +16 -0
- package/postcss.config.js +1 -0
- package/scripts/build.js +72 -0
- package/scripts/make-theme-files.js +144 -0
- package/tokens/dist/nyc.cmp.tokens.json +583 -0
- package/tokens/dist/nyc.dark.tokens.json +755 -0
- package/tokens/dist/nyc.light.tokens.json +755 -0
- package/tokens/dist/nyc.ref.tokens.json +533 -0
- package/tokens/src/nyc.tokens.json +3415 -0
|
@@ -0,0 +1,368 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 23 Sep 2026 16:05:55 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--nyc-cmp-navigation-primary-padding-block: 0;
|
|
8
|
+
--nyc-cmp-navigation-primary-padding-inline: 0;
|
|
9
|
+
--nyc-cmp-header-subproperty-quahog-purple-bg: #f6d6ffff;
|
|
10
|
+
--nyc-cmp-header-subproperty-quahog-purple-default: #9400bdff;
|
|
11
|
+
--nyc-cmp-header-subproperty-liberty-green-bg: #d8fdfaff;
|
|
12
|
+
--nyc-cmp-header-subproperty-liberty-green-default: #00ccbbff;
|
|
13
|
+
--nyc-cmp-header-subproperty-forest-green-bg: #e7fdebff;
|
|
14
|
+
--nyc-cmp-header-subproperty-forest-green-default: #006611ff;
|
|
15
|
+
--nyc-cmp-header-subproperty-sidewalk-gray-bg: #eaecf6ff;
|
|
16
|
+
--nyc-cmp-header-subproperty-sidewalk-gray-default: #c2cae5ff;
|
|
17
|
+
--nyc-cmp-header-subproperty-sky-blue-bg: #f0f8ffff;
|
|
18
|
+
--nyc-cmp-header-subproperty-sky-blue-default: #d1e9ffff;
|
|
19
|
+
--nyc-cmp-header-subproperty-bright-blue-bg: #dbf2ffff;
|
|
20
|
+
--nyc-cmp-header-subproperty-bright-blue-default: #42baffff;
|
|
21
|
+
--nyc-cmp-header-subproperty-navy-blue-bg: #dddffdff;
|
|
22
|
+
--nyc-cmp-header-subproperty-navy-blue-default: #000675ff;
|
|
23
|
+
--nyc-cmp-button-font-weight: 600;
|
|
24
|
+
--nyc-sys-radius-fluid-sm-base: clamp(0.75rem, 0.6461rem + 0.5195vw, 1rem);
|
|
25
|
+
--nyc-sys-radius-fluid-xs-base: clamp(0.5rem, 0.2922rem + 1.039vw, 1rem);
|
|
26
|
+
--nyc-sys-radius-fluid-base-2xl: clamp(1rem, 0.3766rem + 3.1169vw, 2.5rem);
|
|
27
|
+
--nyc-sys-space-fluid-2xl-4xl: clamp(2.5rem, 2.0844rem + 2.0779vw, 3.5rem);
|
|
28
|
+
--nyc-sys-space-fluid-lg-4xl: clamp(1.5rem, 0.6688rem + 4.1558vw, 3.5rem);
|
|
29
|
+
--nyc-sys-space-fluid-base-4xl: clamp(1rem, -0.039rem + 5.1948vw, 3.5rem);
|
|
30
|
+
--nyc-sys-space-fluid-xl-3xl: clamp(2rem, 1.5844rem + 2.0779vw, 3rem);
|
|
31
|
+
--nyc-sys-space-fluid-xs-xl: clamp(0.5rem, -0.1234rem + 3.1169vw, 2rem);
|
|
32
|
+
--nyc-sys-space-fluid-5xl-6xl: clamp(4rem, 3.5844rem + 2.0779vw, 5rem);
|
|
33
|
+
--nyc-sys-space-fluid-xs-base: clamp(0.5rem, 0.2922rem + 1.039vw, 1rem);
|
|
34
|
+
--nyc-sys-space-fluid-sm-base: clamp(0.75rem, 0.6461rem + 0.5195vw, 1rem);
|
|
35
|
+
--nyc-sys-space-fluid-3xl-5xl: clamp(3rem, 2.5844rem + 2.0779vw, 4rem);
|
|
36
|
+
--nyc-sys-space-fluid-xl-5xl: clamp(2rem, 1.1688rem + 4.1558vw, 4rem);
|
|
37
|
+
--nyc-sys-space-fluid-6xl-8xl: clamp(5rem, 4.1688rem + 4.1558vw, 7rem);
|
|
38
|
+
--nyc-sys-space-fluid-7xl-8xl: clamp(6rem, 5.5844rem + 2.0779vw, 7rem);
|
|
39
|
+
--nyc-sys-space-fluid-lg-3xl: clamp(1.5rem, 0.8766rem + 3.1169vw, 3rem);
|
|
40
|
+
--nyc-sys-space-fluid-base-5xl: clamp(1rem, -0.2468rem + 6.2338vw, 4rem);
|
|
41
|
+
--nyc-sys-space-fluid-base-lg: clamp(1rem, 0.7922rem + 1.039vw, 1.5rem);
|
|
42
|
+
--nyc-sys-space-fluid-lg-xl: clamp(1.5rem, 1.2922rem + 1.039vw, 2rem);
|
|
43
|
+
--nyc-sys-space-fluid-lg-8xl: clamp(1.5rem, -0.7857rem + 11.4286vw, 7rem);
|
|
44
|
+
--nyc-sys-space-fluid-xl-2xl: clamp(2rem, 1.7922rem + 1.039vw, 2.5rem);
|
|
45
|
+
--nyc-sys-space-fluid-lg-5xl: clamp(1.5rem, 0.461rem + 5.1948vw, 4rem);
|
|
46
|
+
--nyc-sys-space-fluid-base-xl: clamp(1rem, 0.5844rem + 2.0779vw, 2rem);
|
|
47
|
+
--nyc-sys-space-fluid-xs-sm: clamp(0.5rem, 0.3961rem + 0.5195vw, 0.75rem);
|
|
48
|
+
--nyc-sys-space-fluid-lg-2xl: clamp(1.5rem, 1.0844rem + 2.0779vw, 2.5rem);
|
|
49
|
+
--nyc-sys-space-fluid-2xl-5xl: clamp(2.5rem, 1.8766rem + 3.1169vw, 4rem);
|
|
50
|
+
--nyc-sys-space-fluid-base-2xl: clamp(1rem, 0.3766rem + 3.1169vw, 2.5rem);
|
|
51
|
+
--nyc-sys-space-fluid-2xl-6xl: clamp(2.5rem, 1.461rem + 5.1948vw, 5rem);
|
|
52
|
+
--nyc-sys-size-text-fluid-xs-sm: clamp(0.875rem, 0.8231rem + 0.2597vw, 1rem);
|
|
53
|
+
--nyc-sys-size-text-fluid-4xl-8xl: clamp(2rem, 0.3377rem + 8.3117vw, 6rem);
|
|
54
|
+
--nyc-sys-size-text-fluid-sm-xl: clamp(1rem, 0.8442rem + 0.7792vw, 1.375rem);
|
|
55
|
+
--nyc-sys-size-text-fluid-4xl-7xl: clamp(2rem, 1.1688rem + 4.1558vw, 4rem);
|
|
56
|
+
--nyc-sys-size-text-fluid-lg-3xl: clamp(1.25rem, 1.0422rem + 1.039vw, 1.75rem);
|
|
57
|
+
--nyc-sys-size-text-fluid-3xl-6xl: clamp(1.75rem, 1.0227rem + 3.6364vw, 3.5rem);
|
|
58
|
+
--nyc-sys-size-text-fluid-xl-3xl: clamp(1.375rem, 1.2192rem + 0.7792vw, 1.75rem);
|
|
59
|
+
--nyc-sys-size-text-fluid-lg-2xl: clamp(1.25rem, 1.1461rem + 0.5195vw, 1.5rem);
|
|
60
|
+
--nyc-sys-size-text-fluid-base-lg: clamp(1.125rem, 1.0731rem + 0.2597vw, 1.25rem);
|
|
61
|
+
--nyc-sys-size-text-fluid-lg-xl: clamp(1.25rem, 1.1981rem + 0.2597vw, 1.375rem);
|
|
62
|
+
--nyc-sys-size-text-fluid-2xl-5xl: clamp(1.5rem, 1.0844rem + 2.0779vw, 2.5rem);
|
|
63
|
+
--nyc-sys-size-text-fluid-base-xl: clamp(1.125rem, 1.0211rem + 0.5195vw, 1.375rem);
|
|
64
|
+
--nyc-sys-size-text-fluid-xl-4xl: clamp(1.375rem, 1.1153rem + 1.2987vw, 2rem);
|
|
65
|
+
--nyc-sys-size-text-fluid-2xl-4xl: clamp(1.5rem, 1.2922rem + 1.039vw, 2rem);
|
|
66
|
+
--nyc-sys-size-text-fluid-4xl-6xl: clamp(2rem, 1.3766rem + 3.1169vw, 3.5rem);
|
|
67
|
+
--nyc-sys-size-text-fluid-3xl-5xl: clamp(1.75rem, 1.4383rem + 1.5584vw, 2.5rem);
|
|
68
|
+
--nyc-sys-size-text-fluid-5xl-7xl: clamp(2.5rem, 1.8766rem + 3.1169vw, 4rem);
|
|
69
|
+
--nyc-ref-type-family-clash: 'Clash Grotesk', sans-serif;
|
|
70
|
+
--nyc-ref-type-family-noto: 'Noto Sans', sans-serif;
|
|
71
|
+
--nyc-ref-gradient-sidewalk-gray-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-sidewalk-gray-bg) 0%, #FFF 100%);
|
|
72
|
+
--nyc-ref-gradient-quahog-purple-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-quahog-purple-bg) 0%, #FFF 100%);
|
|
73
|
+
--nyc-ref-gradient-navy-blue-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-navy-blue-bg) 0%, #FFF 100%);
|
|
74
|
+
--nyc-ref-gradient-sky-blue-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-sky-blue-bg) 0%, #FFF 100%);
|
|
75
|
+
--nyc-ref-gradient-bright-blue-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-bright-blue-bg) 0%, #FFF 100%);
|
|
76
|
+
--nyc-ref-gradient-liberty-green-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-liberty-green-bg) 0%, #FFF 100%);
|
|
77
|
+
--nyc-ref-gradient-forest-green-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-forest-green-bg) 0%, #FFF 100%);
|
|
78
|
+
--nyc-ref-gradient-green-100-white: linear-gradient(180deg, var(--nyc-ref-color-green-100) 0%, #FFF 100%);
|
|
79
|
+
--nyc-ref-gradient-yellow-100-white: linear-gradient(180deg, var(--nyc-ref-color-yellow-100) 0%, #FFF 100%);
|
|
80
|
+
--nyc-ref-gradient-red-100-white: linear-gradient(180deg, var(--nyc-ref-color-red-100) 0%, #FFF 100%);
|
|
81
|
+
--nyc-ref-gradient-blue-orange: linear-gradient(180deg, #E2F3FF 0%, #FFECD9 100%);
|
|
82
|
+
--nyc-ref-gradient-rainbow: conic-gradient(from 175deg at 50% 50%, #6C95FF 17.627713680267334deg, #FFA149 101.25deg, #BB64FF 226.87499284744263deg, #70BAFF 325.17677307128906deg);
|
|
83
|
+
--nyc-ref-gradient-purple: linear-gradient(179deg, #131627 15.45%, #4B184D 87.84%);
|
|
84
|
+
--nyc-ref-gradient-orange-blue: linear-gradient(180deg, #FFECD9 0%, #E2F3FF 100%);
|
|
85
|
+
--nyc-ref-shadow-20: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);
|
|
86
|
+
--nyc-ref-shadow-10: 0px 4px 12px 0px rgba(0, 0, 0, 0.20);
|
|
87
|
+
--nyc-ref-color-yellow-100: #fff9e5ff;
|
|
88
|
+
--nyc-ref-color-yellow-90: #ffeeb2ff;
|
|
89
|
+
--nyc-ref-color-yellow-70: #ffdd66ff;
|
|
90
|
+
--nyc-ref-color-yellow-50: #ffc700ff;
|
|
91
|
+
--nyc-ref-color-yellow-30: #997700ff;
|
|
92
|
+
--nyc-ref-color-yellow-10: #4c3c00ff;
|
|
93
|
+
--nyc-ref-color-red-100: #fde7e8ff;
|
|
94
|
+
--nyc-ref-color-red-90: #f9b8bbff;
|
|
95
|
+
--nyc-ref-color-red-70: #f47178ff;
|
|
96
|
+
--nyc-ref-color-red-50: #ec131eff;
|
|
97
|
+
--nyc-ref-color-red-40: #b30f17ff;
|
|
98
|
+
--nyc-ref-color-red-30: #8e0b12ff;
|
|
99
|
+
--nyc-ref-color-red-10: #470609ff;
|
|
100
|
+
--nyc-ref-color-green-100: #e6f8e6ff;
|
|
101
|
+
--nyc-ref-color-green-90: #b3e9b3ff;
|
|
102
|
+
--nyc-ref-color-green-70: #66d468ff;
|
|
103
|
+
--nyc-ref-color-green-50: #00b703ff;
|
|
104
|
+
--nyc-ref-color-green-30: #006e02ff;
|
|
105
|
+
--nyc-ref-color-green-10: #003701ff;
|
|
106
|
+
--nyc-ref-color-purple-50: #c67dffff;
|
|
107
|
+
--nyc-ref-color-purple-40: #7f00d6ff;
|
|
108
|
+
--nyc-ref-color-purple-30: #58376eff;
|
|
109
|
+
--nyc-ref-color-purple-20: #4c3959ff;
|
|
110
|
+
--nyc-ref-color-purple-10: #131627ff;
|
|
111
|
+
--nyc-ref-color-orange-70-25: #fba95b40;
|
|
112
|
+
--nyc-ref-color-orange-90: #ffe0c2ff;
|
|
113
|
+
--nyc-ref-color-orange-80: #fcc788ff;
|
|
114
|
+
--nyc-ref-color-orange-70: #fba95bff;
|
|
115
|
+
--nyc-ref-color-orange-60: #f98d26ff;
|
|
116
|
+
--nyc-ref-color-orange-50: #e57000ff;
|
|
117
|
+
--nyc-ref-color-blue-100: #e7f0faff;
|
|
118
|
+
--nyc-ref-color-blue-90: #d1e9ffff;
|
|
119
|
+
--nyc-ref-color-blue-80: #b5dbffff;
|
|
120
|
+
--nyc-ref-color-blue-70: #70baffff;
|
|
121
|
+
--nyc-ref-color-blue-60: #3185fcff;
|
|
122
|
+
--nyc-ref-color-blue-50: #004fffff;
|
|
123
|
+
--nyc-ref-color-blue-40: #103fefff;
|
|
124
|
+
--nyc-ref-color-blue-30: #051adbff;
|
|
125
|
+
--nyc-ref-color-blue-20: #0008a0ff;
|
|
126
|
+
--nyc-ref-color-blue-10: #050560ff;
|
|
127
|
+
--nyc-ref-color-gray-10-25: #22222240;
|
|
128
|
+
--nyc-ref-color-gray-white-25: #ffffff40;
|
|
129
|
+
--nyc-ref-color-gray-white-80: #ffffffcc;
|
|
130
|
+
--nyc-ref-color-gray-black-90: #000000e6;
|
|
131
|
+
--nyc-ref-color-gray-10-15: #22222226;
|
|
132
|
+
--nyc-ref-color-gray-white-15: #ffffff26;
|
|
133
|
+
--nyc-ref-color-gray-10-60: #22222299;
|
|
134
|
+
--nyc-ref-color-gray-white-75: #ffffffbf;
|
|
135
|
+
--nyc-ref-color-gray-white: #ffffffff;
|
|
136
|
+
--nyc-ref-color-gray-black: #000000ff;
|
|
137
|
+
--nyc-ref-color-gray-90: #eeeeeeff;
|
|
138
|
+
--nyc-ref-color-gray-80: #ddddddff;
|
|
139
|
+
--nyc-ref-color-gray-70: #ccccccff;
|
|
140
|
+
--nyc-ref-color-gray-60: #aaaaaaff;
|
|
141
|
+
--nyc-ref-color-gray-50: #949494ff;
|
|
142
|
+
--nyc-ref-color-gray-40: #777777ff;
|
|
143
|
+
--nyc-ref-color-gray-30: #555555ff;
|
|
144
|
+
--nyc-ref-color-gray-20: #333333ff;
|
|
145
|
+
--nyc-ref-color-gray-10: #222222ff;
|
|
146
|
+
--nyc-ref-length-1-5: 1.5px;
|
|
147
|
+
--nyc-ref-length-1440: 1440px;
|
|
148
|
+
--nyc-ref-length-1160: 1160px;
|
|
149
|
+
--nyc-ref-length-1090: 1090px;
|
|
150
|
+
--nyc-ref-length-750: 750px;
|
|
151
|
+
--nyc-ref-length-440: 440px;
|
|
152
|
+
--nyc-ref-length-360: 360px;
|
|
153
|
+
--nyc-ref-length-320: 320px;
|
|
154
|
+
--nyc-ref-length-240: 240px;
|
|
155
|
+
--nyc-ref-length-176: 176px;
|
|
156
|
+
--nyc-ref-length-112: 112px;
|
|
157
|
+
--nyc-ref-length-100: 100px;
|
|
158
|
+
--nyc-ref-length-96: 96px;
|
|
159
|
+
--nyc-ref-length-90: 90px;
|
|
160
|
+
--nyc-ref-length-80: 80px;
|
|
161
|
+
--nyc-ref-length-64: 64px;
|
|
162
|
+
--nyc-ref-length-56: 56px;
|
|
163
|
+
--nyc-ref-length-50: 50px;
|
|
164
|
+
--nyc-ref-length-48: 48px;
|
|
165
|
+
--nyc-ref-length-40: 40px;
|
|
166
|
+
--nyc-ref-length-36: 36px;
|
|
167
|
+
--nyc-ref-length-32: 32px;
|
|
168
|
+
--nyc-ref-length-28: 28px;
|
|
169
|
+
--nyc-ref-length-24: 24px;
|
|
170
|
+
--nyc-ref-length-22: 22px;
|
|
171
|
+
--nyc-ref-length-20: 20px;
|
|
172
|
+
--nyc-ref-length-18: 18px;
|
|
173
|
+
--nyc-ref-length-16: 16px;
|
|
174
|
+
--nyc-ref-length-14: 14px;
|
|
175
|
+
--nyc-ref-length-12: 12px;
|
|
176
|
+
--nyc-ref-length-10: 10px;
|
|
177
|
+
--nyc-ref-length-8: 8px;
|
|
178
|
+
--nyc-ref-length-4: 4px;
|
|
179
|
+
--nyc-ref-length-2: 2px;
|
|
180
|
+
--nyc-cmp-space-vertical-3xl: var(--nyc-sys-space-fluid-7xl-8xl);
|
|
181
|
+
--nyc-cmp-space-vertical-2xl: var(--nyc-sys-space-fluid-5xl-6xl);
|
|
182
|
+
--nyc-cmp-space-vertical-xl: var(--nyc-sys-space-fluid-3xl-5xl);
|
|
183
|
+
--nyc-cmp-space-vertical-lg: var(--nyc-sys-space-fluid-xl-3xl);
|
|
184
|
+
--nyc-cmp-space-vertical-md: var(--nyc-sys-space-fluid-lg-xl);
|
|
185
|
+
--nyc-cmp-space-vertical-xs: var(--nyc-sys-space-fluid-sm-base);
|
|
186
|
+
--nyc-cmp-space-vertical-sm: var(--nyc-sys-space-fluid-base-lg);
|
|
187
|
+
--nyc-cmp-inline-message: var(--nyc-ref-color-orange-70-25);
|
|
188
|
+
--nyc-cmp-emergency-surface: var(--nyc-ref-color-red-40);
|
|
189
|
+
--nyc-cmp-type-caption-size: var(--nyc-sys-size-text-fluid-xs-sm);
|
|
190
|
+
--nyc-cmp-type-intro-size: var(--nyc-sys-size-text-fluid-lg-xl);
|
|
191
|
+
--nyc-cmp-type-display-size: var(--nyc-sys-size-text-fluid-5xl-7xl);
|
|
192
|
+
--nyc-cmp-modal-body-padding-horizontal: var(--nyc-sys-space-fluid-base-xl);
|
|
193
|
+
--nyc-cmp-modal-body-padding-vertical: var(--nyc-sys-space-fluid-base-xl);
|
|
194
|
+
--nyc-cmp-modal-header-padding-vertical: var(--nyc-sys-space-fluid-sm-base);
|
|
195
|
+
--nyc-cmp-modal-header-padding-horizontal: var(--nyc-sys-space-fluid-base-lg);
|
|
196
|
+
--nyc-cmp-table-header-background: var(--nyc-ref-color-gray-20);
|
|
197
|
+
--nyc-cmp-hero-padding-horizontal: var(--nyc-sys-space-fluid-base-5xl);
|
|
198
|
+
--nyc-cmp-hero-padding-vertical: var(--nyc-sys-space-fluid-xl-5xl);
|
|
199
|
+
--nyc-cmp-center-gutter: var(--nyc-sys-space-fluid-base-5xl);
|
|
200
|
+
--nyc-cmp-accordion-icon-size: var(--nyc-sys-size-text-fluid-3xl-5xl);
|
|
201
|
+
--nyc-cmp-accordion-body-padding-block: var(--nyc-sys-space-fluid-lg-xl);
|
|
202
|
+
--nyc-cmp-accordion-body-padding-inline: var(--nyc-sys-space-fluid-lg-xl);
|
|
203
|
+
--nyc-cmp-accordion-heading-padding-inline: var(--nyc-sys-space-fluid-base-lg);
|
|
204
|
+
--nyc-cmp-accordion-heading-font-size: var(--nyc-sys-size-text-fluid-xl-3xl);
|
|
205
|
+
--nyc-cmp-heading-h5-size: var(--nyc-sys-size-text-fluid-base-lg);
|
|
206
|
+
--nyc-cmp-heading-h4-size: var(--nyc-sys-size-text-fluid-lg-2xl);
|
|
207
|
+
--nyc-cmp-heading-h1-home-sub: var(--nyc-sys-size-text-fluid-3xl-6xl);
|
|
208
|
+
--nyc-cmp-heading-h1-home: var(--nyc-sys-size-text-fluid-5xl-7xl);
|
|
209
|
+
--nyc-cmp-heading-h3-size: var(--nyc-sys-size-text-fluid-xl-3xl);
|
|
210
|
+
--nyc-cmp-heading-h2-size: var(--nyc-sys-size-text-fluid-3xl-5xl);
|
|
211
|
+
--nyc-cmp-heading-h1-size: var(--nyc-sys-size-text-fluid-4xl-6xl);
|
|
212
|
+
--nyc-cmp-footer-color: var(--nyc-ref-color-gray-white);
|
|
213
|
+
--nyc-cmp-footer-background: var(--nyc-ref-color-gray-black);
|
|
214
|
+
--nyc-cmp-navigation-official-message: var(--nyc-ref-color-gray-20);
|
|
215
|
+
--nyc-cmp-navigation-primary-background: var(--nyc-ref-color-gray-black);
|
|
216
|
+
--nyc-cmp-header-primary-on-header: var(--nyc-ref-color-gray-white);
|
|
217
|
+
--nyc-cmp-header-primary-background: var(--nyc-ref-color-gray-black);
|
|
218
|
+
--nyc-cmp-button-padding-block: var(--nyc-sys-space-fluid-xs-sm);
|
|
219
|
+
--nyc-cmp-button-padding-inline: var(--nyc-sys-space-fluid-base-xl);
|
|
220
|
+
--nyc-cmp-button-font-size: var(--nyc-sys-size-text-fluid-base-xl);
|
|
221
|
+
--nyc-cmp-card-heading-size: var(--nyc-sys-size-text-fluid-xl-3xl);
|
|
222
|
+
--nyc-sys-radius-xl: var(--nyc-ref-length-32);
|
|
223
|
+
--nyc-sys-radius-sm: var(--nyc-ref-length-12);
|
|
224
|
+
--nyc-sys-radius-2xs: var(--nyc-ref-length-4);
|
|
225
|
+
--nyc-sys-radius-2xl: var(--nyc-ref-length-40);
|
|
226
|
+
--nyc-sys-radius-lg: var(--nyc-ref-length-24);
|
|
227
|
+
--nyc-sys-radius-base: var(--nyc-ref-length-16);
|
|
228
|
+
--nyc-sys-radius-xs: var(--nyc-ref-length-8);
|
|
229
|
+
--nyc-sys-font-family-heading: var(--nyc-ref-type-family-clash);
|
|
230
|
+
--nyc-sys-font-family-body: var(--nyc-ref-type-family-noto);
|
|
231
|
+
--nyc-sys-space-7xl: var(--nyc-ref-length-96);
|
|
232
|
+
--nyc-sys-space-4xl: var(--nyc-ref-length-56);
|
|
233
|
+
--nyc-sys-space-3xl: var(--nyc-ref-length-48);
|
|
234
|
+
--nyc-sys-space-2xs: var(--nyc-ref-length-4);
|
|
235
|
+
--nyc-sys-space-xl: var(--nyc-ref-length-32);
|
|
236
|
+
--nyc-sys-space-8xl: var(--nyc-ref-length-112);
|
|
237
|
+
--nyc-sys-space-6xl: var(--nyc-ref-length-80);
|
|
238
|
+
--nyc-sys-space-5xl: var(--nyc-ref-length-64);
|
|
239
|
+
--nyc-sys-space-2xl: var(--nyc-ref-length-40);
|
|
240
|
+
--nyc-sys-space-lg: var(--nyc-ref-length-24);
|
|
241
|
+
--nyc-sys-space-base: var(--nyc-ref-length-16);
|
|
242
|
+
--nyc-sys-space-sm: var(--nyc-ref-length-12);
|
|
243
|
+
--nyc-sys-space-xs: var(--nyc-ref-length-8);
|
|
244
|
+
--nyc-sys-gradient-text-fill: var(--nyc-ref-gradient-rainbow);
|
|
245
|
+
--nyc-sys-gradient-background: var(--nyc-ref-gradient-blue-orange);
|
|
246
|
+
--nyc-sys-shadow-base: var(--nyc-ref-shadow-20);
|
|
247
|
+
--nyc-sys-shadow-low: var(--nyc-ref-shadow-10);
|
|
248
|
+
--nyc-sys-color-element-pressed-inverted: var(--nyc-ref-color-gray-white-25);
|
|
249
|
+
--nyc-sys-color-element-hover-inverted: var(--nyc-ref-color-gray-white-15);
|
|
250
|
+
--nyc-sys-color-progress-complete: var(--nyc-ref-color-gray-10);
|
|
251
|
+
--nyc-sys-color-progress-incomplete: var(--nyc-ref-color-gray-40);
|
|
252
|
+
--nyc-sys-color-link-hover: var(--nyc-ref-color-blue-10);
|
|
253
|
+
--nyc-sys-color-element-pressed: var(--nyc-ref-color-gray-10-25);
|
|
254
|
+
--nyc-sys-color-link-inverted: var(--nyc-ref-color-blue-80);
|
|
255
|
+
--nyc-sys-color-link-high-contrast: var(--nyc-ref-color-gray-black);
|
|
256
|
+
--nyc-sys-color-auxiliary-information: var(--nyc-ref-color-blue-70);
|
|
257
|
+
--nyc-sys-color-auxiliary-warning: var(--nyc-ref-color-orange-70);
|
|
258
|
+
--nyc-sys-color-auxiliary-error: var(--nyc-ref-color-red-50);
|
|
259
|
+
--nyc-sys-color-auxiliary-success: var(--nyc-ref-color-green-50);
|
|
260
|
+
--nyc-sys-color-subproperty-background: var(--nyc-ref-color-blue-100);
|
|
261
|
+
--nyc-sys-color-element-hover: var(--nyc-ref-color-gray-10-15);
|
|
262
|
+
--nyc-sys-color-link: var(--nyc-ref-color-blue-30);
|
|
263
|
+
--nyc-sys-color-link-visited: var(--nyc-ref-color-purple-40);
|
|
264
|
+
--nyc-sys-color-on-secondary-hover: var(--nyc-ref-color-blue-10);
|
|
265
|
+
--nyc-sys-color-on-inactive: var(--nyc-ref-color-gray-10);
|
|
266
|
+
--nyc-sys-color-inactive: var(--nyc-ref-color-gray-70);
|
|
267
|
+
--nyc-sys-color-border-focus-high: var(--nyc-ref-color-gray-white);
|
|
268
|
+
--nyc-sys-color-border-medium: var(--nyc-ref-color-gray-50);
|
|
269
|
+
--nyc-sys-color-border-high-inverted: var(--nyc-ref-color-gray-white);
|
|
270
|
+
--nyc-sys-color-border-focus: var(--nyc-ref-color-gray-black);
|
|
271
|
+
--nyc-sys-color-border-medium-low: var(--nyc-ref-color-gray-70);
|
|
272
|
+
--nyc-sys-color-border-high: var(--nyc-ref-color-gray-black);
|
|
273
|
+
--nyc-sys-color-border-medium-high: var(--nyc-ref-color-gray-30);
|
|
274
|
+
--nyc-sys-color-border-base: var(--nyc-ref-color-gray-80);
|
|
275
|
+
--nyc-sys-color-on-surface-high: var(--nyc-ref-color-gray-white);
|
|
276
|
+
--nyc-sys-color-on-surface-base: var(--nyc-ref-color-gray-black);
|
|
277
|
+
--nyc-sys-color-surface-emergency: var(--nyc-ref-color-red-40);
|
|
278
|
+
--nyc-sys-color-surface-info: var(--nyc-ref-color-blue-100);
|
|
279
|
+
--nyc-sys-color-surface-warning: var(--nyc-ref-color-yellow-100);
|
|
280
|
+
--nyc-sys-color-surface-error: var(--nyc-ref-color-red-100);
|
|
281
|
+
--nyc-sys-color-surface-success: var(--nyc-ref-color-green-100);
|
|
282
|
+
--nyc-sys-color-surface-input-highlight: var(--nyc-ref-color-blue-100);
|
|
283
|
+
--nyc-sys-color-surface-input: var(--nyc-ref-color-gray-white);
|
|
284
|
+
--nyc-sys-color-surface-high-overlay-white: var(--nyc-ref-color-gray-white-80);
|
|
285
|
+
--nyc-sys-color-surface-highlight: var(--nyc-ref-color-blue-90);
|
|
286
|
+
--nyc-sys-color-surface-high-overlay-black: var(--nyc-ref-color-gray-black-90);
|
|
287
|
+
--nyc-sys-color-surface-high: var(--nyc-ref-color-gray-black);
|
|
288
|
+
--nyc-sys-color-surface-low: var(--nyc-ref-color-gray-90);
|
|
289
|
+
--nyc-sys-color-surface-base: var(--nyc-ref-color-gray-white);
|
|
290
|
+
--nyc-sys-color-surface-inactive: var(--nyc-ref-color-gray-white-75);
|
|
291
|
+
--nyc-sys-color-on-disabled: var(--nyc-ref-color-gray-20);
|
|
292
|
+
--nyc-sys-color-disabled: var(--nyc-ref-color-gray-70);
|
|
293
|
+
--nyc-sys-color-on-secondary: var(--nyc-ref-color-blue-40);
|
|
294
|
+
--nyc-sys-color-secondary: var(--nyc-ref-color-gray-white);
|
|
295
|
+
--nyc-sys-color-on-primary: var(--nyc-ref-color-gray-white);
|
|
296
|
+
--nyc-sys-color-primary-hover: var(--nyc-ref-color-blue-10);
|
|
297
|
+
--nyc-sys-color-primary: var(--nyc-ref-color-blue-40);
|
|
298
|
+
--nyc-sys-color-text-input: var(--nyc-ref-color-gray-black);
|
|
299
|
+
--nyc-sys-color-text-type-ahead: var(--nyc-ref-color-gray-50);
|
|
300
|
+
--nyc-sys-color-text-base-inverse: var(--nyc-ref-color-gray-white);
|
|
301
|
+
--nyc-sys-color-text-secondary: var(--nyc-ref-color-gray-30);
|
|
302
|
+
--nyc-sys-color-text-base: var(--nyc-ref-color-gray-black);
|
|
303
|
+
--nyc-sys-color-background: var(--nyc-ref-color-gray-white);
|
|
304
|
+
--nyc-sys-color-base: var(--nyc-ref-color-gray-black);
|
|
305
|
+
--nyc-sys-size-border-base: var(--nyc-ref-length-2);
|
|
306
|
+
--nyc-sys-size-border-sm: var(--nyc-ref-length-1-5);
|
|
307
|
+
--nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
|
|
308
|
+
--nyc-sys-size-text-8xl: var(--nyc-ref-length-96);
|
|
309
|
+
--nyc-sys-size-text-xl: var(--nyc-ref-length-22);
|
|
310
|
+
--nyc-sys-size-text-xs: var(--nyc-ref-length-14);
|
|
311
|
+
--nyc-sys-size-text-5xl: var(--nyc-ref-length-40);
|
|
312
|
+
--nyc-sys-size-text-3xl: var(--nyc-ref-length-28);
|
|
313
|
+
--nyc-sys-size-text-2xl: var(--nyc-ref-length-24);
|
|
314
|
+
--nyc-sys-size-text-lg: var(--nyc-ref-length-20);
|
|
315
|
+
--nyc-sys-size-text-base: var(--nyc-ref-length-18);
|
|
316
|
+
--nyc-sys-size-text-7xl: var(--nyc-ref-length-64);
|
|
317
|
+
--nyc-sys-size-text-6xl: var(--nyc-ref-length-56);
|
|
318
|
+
--nyc-sys-size-text-4xl: var(--nyc-ref-length-32);
|
|
319
|
+
--nyc-sys-size-text-sm: var(--nyc-ref-length-16);
|
|
320
|
+
--nyc-sys-size-width-line-length: var(--nyc-ref-length-750);
|
|
321
|
+
--nyc-sys-size-width-surface-lg: var(--nyc-ref-length-440);
|
|
322
|
+
--nyc-sys-size-width-surface-base: var(--nyc-ref-length-360);
|
|
323
|
+
--nyc-sys-size-width-surface-sm: var(--nyc-ref-length-240);
|
|
324
|
+
--nyc-sys-size-width-page-max: var(--nyc-ref-length-1090);
|
|
325
|
+
--nyc-sys-size-width-page-min: var(--nyc-ref-length-320);
|
|
326
|
+
--nyc-cmp-form-border-color: var(--nyc-sys-color-border-medium);
|
|
327
|
+
--nyc-cmp-global-alert-border-color: var(--nyc-sys-color-border-high);
|
|
328
|
+
--nyc-cmp-global-alert-color: var(--nyc-sys-color-on-surface-high);
|
|
329
|
+
--nyc-cmp-global-alert-background: var(--nyc-sys-color-surface-emergency);
|
|
330
|
+
--nyc-cmp-modal-border-radius: var(--nyc-sys-radius-lg);
|
|
331
|
+
--nyc-cmp-modal-background: var(--nyc-sys-color-surface-base);
|
|
332
|
+
--nyc-cmp-table-cell-border-color: var(--nyc-sys-color-border-base);
|
|
333
|
+
--nyc-cmp-table-cell-padding-block: var(--nyc-sys-space-sm);
|
|
334
|
+
--nyc-cmp-table-cell-padding-inline: var(--nyc-sys-space-base);
|
|
335
|
+
--nyc-cmp-table-header-border-color: var(--nyc-sys-color-border-medium-high);
|
|
336
|
+
--nyc-cmp-table-header-color: var(--nyc-sys-color-text-base-inverse);
|
|
337
|
+
--nyc-cmp-hr-background-color: var(--nyc-sys-color-border-medium-high);
|
|
338
|
+
--nyc-cmp-accordion-group-background: var(--nyc-sys-color-surface-base);
|
|
339
|
+
--nyc-cmp-accordion-heading-padding-block: var(--nyc-sys-space-base);
|
|
340
|
+
--nyc-cmp-accordion-heading-background: var(--nyc-sys-color-surface-base);
|
|
341
|
+
--nyc-cmp-navigation-primary-inactive: var(--nyc-sys-color-inactive);
|
|
342
|
+
--nyc-cmp-navigation-primary-active: var(--nyc-sys-color-on-surface-high);
|
|
343
|
+
--nyc-cmp-header-padding-block: var(--nyc-sys-space-sm);
|
|
344
|
+
--nyc-cmp-header-padding-inline: var(--nyc-sys-space-base);
|
|
345
|
+
--nyc-cmp-button-outline-color: var(--nyc-sys-color-border-high);
|
|
346
|
+
--nyc-cmp-button-gap: var(--nyc-sys-space-xs);
|
|
347
|
+
--nyc-cmp-button-border-radius: var(--nyc-sys-radius-2xl);
|
|
348
|
+
--nyc-cmp-region-base: var(--nyc-sys-space-2xl);
|
|
349
|
+
--nyc-cmp-card-padding-block: var(--nyc-sys-space-base);
|
|
350
|
+
--nyc-cmp-card-border-radius: var(--nyc-sys-radius-xs);
|
|
351
|
+
--nyc-cmp-card-border-color-hover: var(--nyc-sys-color-border-medium-high);
|
|
352
|
+
--nyc-cmp-card-width-lg: var(--nyc-sys-size-width-surface-lg);
|
|
353
|
+
--nyc-cmp-card-width-base: var(--nyc-sys-size-width-surface-base);
|
|
354
|
+
--nyc-cmp-card-padding-inline: var(--nyc-sys-space-base);
|
|
355
|
+
--nyc-cmp-card-body-size: var(--nyc-sys-size-text-base);
|
|
356
|
+
--nyc-cmp-card-shadow: var(--nyc-sys-shadow-base);
|
|
357
|
+
--nyc-cmp-card-border-width: var(--nyc-sys-size-border-base);
|
|
358
|
+
--nyc-cmp-card-border-radius-hover: var(--nyc-sys-radius-base);
|
|
359
|
+
--nyc-cmp-card-border-color: var(--nyc-sys-color-border-base);
|
|
360
|
+
--nyc-cmp-card-radius-xl: var(--nyc-sys-radius-2xl);
|
|
361
|
+
--nyc-cmp-card-radius-lg-hover: var(--nyc-sys-radius-xs);
|
|
362
|
+
--nyc-cmp-card-radius-lg: var(--nyc-sys-radius-lg);
|
|
363
|
+
--nyc-cmp-card-radius-base: var(--nyc-sys-radius-base);
|
|
364
|
+
--nyc-cmp-card-color: var(--nyc-sys-color-on-surface-base);
|
|
365
|
+
--nyc-cmp-card-background-hover: var(--nyc-sys-color-surface-base);
|
|
366
|
+
--nyc-cmp-card-background: var(--nyc-sys-color-surface-inactive);
|
|
367
|
+
--nyc-sys-color-border-selected: var(--nyc-sys-color-primary);
|
|
368
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--nyc-cmp-navigation-primary-padding-block:0;--nyc-cmp-navigation-primary-padding-inline:0;--nyc-cmp-header-subproperty-quahog-purple-bg:#f6d6ff;--nyc-cmp-header-subproperty-quahog-purple-default:#9400bd;--nyc-cmp-header-subproperty-liberty-green-bg:#d8fdfa;--nyc-cmp-header-subproperty-liberty-green-default:#0cb;--nyc-cmp-header-subproperty-forest-green-bg:#e7fdeb;--nyc-cmp-header-subproperty-forest-green-default:#061;--nyc-cmp-header-subproperty-sidewalk-gray-bg:#eaecf6;--nyc-cmp-header-subproperty-sidewalk-gray-default:#c2cae5;--nyc-cmp-header-subproperty-sky-blue-bg:#f0f8ff;--nyc-cmp-header-subproperty-sky-blue-default:#d1e9ff;--nyc-cmp-header-subproperty-bright-blue-bg:#dbf2ff;--nyc-cmp-header-subproperty-bright-blue-default:#42baff;--nyc-cmp-header-subproperty-navy-blue-bg:#dddffd;--nyc-cmp-header-subproperty-navy-blue-default:#000675;--nyc-cmp-button-font-weight:600;--nyc-sys-radius-fluid-sm-base:clamp(0.75rem,0.6461rem + 0.5195vw,1rem);--nyc-sys-radius-fluid-xs-base:clamp(0.5rem,0.2922rem + 1.039vw,1rem);--nyc-sys-radius-fluid-base-2xl:clamp(1rem,0.3766rem + 3.1169vw,2.5rem);--nyc-sys-space-fluid-2xl-4xl:clamp(2.5rem,2.0844rem + 2.0779vw,3.5rem);--nyc-sys-space-fluid-lg-4xl:clamp(1.5rem,0.6688rem + 4.1558vw,3.5rem);--nyc-sys-space-fluid-base-4xl:clamp(1rem,-0.039rem + 5.1948vw,3.5rem);--nyc-sys-space-fluid-xl-3xl:clamp(2rem,1.5844rem + 2.0779vw,3rem);--nyc-sys-space-fluid-xs-xl:clamp(0.5rem,-0.1234rem + 3.1169vw,2rem);--nyc-sys-space-fluid-5xl-6xl:clamp(4rem,3.5844rem + 2.0779vw,5rem);--nyc-sys-space-fluid-xs-base:clamp(0.5rem,0.2922rem + 1.039vw,1rem);--nyc-sys-space-fluid-sm-base:clamp(0.75rem,0.6461rem + 0.5195vw,1rem);--nyc-sys-space-fluid-3xl-5xl:clamp(3rem,2.5844rem + 2.0779vw,4rem);--nyc-sys-space-fluid-xl-5xl:clamp(2rem,1.1688rem + 4.1558vw,4rem);--nyc-sys-space-fluid-6xl-8xl:clamp(5rem,4.1688rem + 4.1558vw,7rem);--nyc-sys-space-fluid-7xl-8xl:clamp(6rem,5.5844rem + 2.0779vw,7rem);--nyc-sys-space-fluid-lg-3xl:clamp(1.5rem,0.8766rem + 3.1169vw,3rem);--nyc-sys-space-fluid-base-5xl:clamp(1rem,-0.2468rem + 6.2338vw,4rem);--nyc-sys-space-fluid-base-lg:clamp(1rem,0.7922rem + 1.039vw,1.5rem);--nyc-sys-space-fluid-lg-xl:clamp(1.5rem,1.2922rem + 1.039vw,2rem);--nyc-sys-space-fluid-lg-8xl:clamp(1.5rem,-0.7857rem + 11.4286vw,7rem);--nyc-sys-space-fluid-xl-2xl:clamp(2rem,1.7922rem + 1.039vw,2.5rem);--nyc-sys-space-fluid-lg-5xl:clamp(1.5rem,0.461rem + 5.1948vw,4rem);--nyc-sys-space-fluid-base-xl:clamp(1rem,0.5844rem + 2.0779vw,2rem);--nyc-sys-space-fluid-xs-sm:clamp(0.5rem,0.3961rem + 0.5195vw,0.75rem);--nyc-sys-space-fluid-lg-2xl:clamp(1.5rem,1.0844rem + 2.0779vw,2.5rem);--nyc-sys-space-fluid-2xl-5xl:clamp(2.5rem,1.8766rem + 3.1169vw,4rem);--nyc-sys-space-fluid-base-2xl:clamp(1rem,0.3766rem + 3.1169vw,2.5rem);--nyc-sys-space-fluid-2xl-6xl:clamp(2.5rem,1.461rem + 5.1948vw,5rem);--nyc-sys-size-text-fluid-xs-sm:clamp(0.875rem,0.8231rem + 0.2597vw,1rem);--nyc-sys-size-text-fluid-4xl-8xl:clamp(2rem,0.3377rem + 8.3117vw,6rem);--nyc-sys-size-text-fluid-sm-xl:clamp(1rem,0.8442rem + 0.7792vw,1.375rem);--nyc-sys-size-text-fluid-4xl-7xl:clamp(2rem,1.1688rem + 4.1558vw,4rem);--nyc-sys-size-text-fluid-lg-3xl:clamp(1.25rem,1.0422rem + 1.039vw,1.75rem);--nyc-sys-size-text-fluid-3xl-6xl:clamp(1.75rem,1.0227rem + 3.6364vw,3.5rem);--nyc-sys-size-text-fluid-xl-3xl:clamp(1.375rem,1.2192rem + 0.7792vw,1.75rem);--nyc-sys-size-text-fluid-lg-2xl:clamp(1.25rem,1.1461rem + 0.5195vw,1.5rem);--nyc-sys-size-text-fluid-base-lg:clamp(1.125rem,1.0731rem + 0.2597vw,1.25rem);--nyc-sys-size-text-fluid-lg-xl:clamp(1.25rem,1.1981rem + 0.2597vw,1.375rem);--nyc-sys-size-text-fluid-2xl-5xl:clamp(1.5rem,1.0844rem + 2.0779vw,2.5rem);--nyc-sys-size-text-fluid-base-xl:clamp(1.125rem,1.0211rem + 0.5195vw,1.375rem);--nyc-sys-size-text-fluid-xl-4xl:clamp(1.375rem,1.1153rem + 1.2987vw,2rem);--nyc-sys-size-text-fluid-2xl-4xl:clamp(1.5rem,1.2922rem + 1.039vw,2rem);--nyc-sys-size-text-fluid-4xl-6xl:clamp(2rem,1.3766rem + 3.1169vw,3.5rem);--nyc-sys-size-text-fluid-3xl-5xl:clamp(1.75rem,1.4383rem + 1.5584vw,2.5rem);--nyc-sys-size-text-fluid-5xl-7xl:clamp(2.5rem,1.8766rem + 3.1169vw,4rem);--nyc-ref-type-family-clash:"Clash Grotesk",sans-serif;--nyc-ref-type-family-noto:"Noto Sans",sans-serif;--nyc-ref-gradient-sidewalk-gray-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-sidewalk-gray-bg) 0%,#fff 100%);--nyc-ref-gradient-quahog-purple-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-quahog-purple-bg) 0%,#fff 100%);--nyc-ref-gradient-navy-blue-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-navy-blue-bg) 0%,#fff 100%);--nyc-ref-gradient-sky-blue-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-sky-blue-bg) 0%,#fff 100%);--nyc-ref-gradient-bright-blue-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-bright-blue-bg) 0%,#fff 100%);--nyc-ref-gradient-liberty-green-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-liberty-green-bg) 0%,#fff 100%);--nyc-ref-gradient-forest-green-white:linear-gradient(180deg,var(--nyc-cmp-header-subproperty-forest-green-bg) 0%,#fff 100%);--nyc-ref-gradient-green-100-white:linear-gradient(180deg,var(--nyc-ref-color-green-100) 0%,#fff 100%);--nyc-ref-gradient-yellow-100-white:linear-gradient(180deg,var(--nyc-ref-color-yellow-100) 0%,#fff 100%);--nyc-ref-gradient-red-100-white:linear-gradient(180deg,var(--nyc-ref-color-red-100) 0%,#fff 100%);--nyc-ref-gradient-blue-orange:linear-gradient(180deg,#e2f3ff,#ffecd9);--nyc-ref-gradient-rainbow:conic-gradient(from 175deg at 50% 50%,#6c95ff 17.627713680267334deg,#ffa149 101.25deg,#bb64ff 226.87499284744263deg,#70baff 325.17677307128906deg);--nyc-ref-gradient-purple:linear-gradient(179deg,#131627 15.45%,#4b184d 87.84%);--nyc-ref-gradient-orange-blue:linear-gradient(180deg,#ffecd9,#e2f3ff);--nyc-ref-shadow-20:4px 4px 12px 0px rgba(0,0,0,.2);--nyc-ref-shadow-10:0px 4px 12px 0px rgba(0,0,0,.2);--nyc-ref-color-yellow-100:#fff9e5;--nyc-ref-color-yellow-90:#ffeeb2;--nyc-ref-color-yellow-70:#fd6;--nyc-ref-color-yellow-50:#ffc700;--nyc-ref-color-yellow-30:#970;--nyc-ref-color-yellow-10:#4c3c00;--nyc-ref-color-red-100:#fde7e8;--nyc-ref-color-red-90:#f9b8bb;--nyc-ref-color-red-70:#f47178;--nyc-ref-color-red-50:#ec131e;--nyc-ref-color-red-40:#b30f17;--nyc-ref-color-red-30:#8e0b12;--nyc-ref-color-red-10:#470609;--nyc-ref-color-green-100:#e6f8e6;--nyc-ref-color-green-90:#b3e9b3;--nyc-ref-color-green-70:#66d468;--nyc-ref-color-green-50:#00b703;--nyc-ref-color-green-30:#006e02;--nyc-ref-color-green-10:#003701;--nyc-ref-color-purple-50:#c67dff;--nyc-ref-color-purple-40:#7f00d6;--nyc-ref-color-purple-30:#58376e;--nyc-ref-color-purple-20:#4c3959;--nyc-ref-color-purple-10:#131627;--nyc-ref-color-orange-70-25:#fba95b40;--nyc-ref-color-orange-90:#ffe0c2;--nyc-ref-color-orange-80:#fcc788;--nyc-ref-color-orange-70:#fba95b;--nyc-ref-color-orange-60:#f98d26;--nyc-ref-color-orange-50:#e57000;--nyc-ref-color-blue-100:#e7f0fa;--nyc-ref-color-blue-90:#d1e9ff;--nyc-ref-color-blue-80:#b5dbff;--nyc-ref-color-blue-70:#70baff;--nyc-ref-color-blue-60:#3185fc;--nyc-ref-color-blue-50:#004fff;--nyc-ref-color-blue-40:#103fef;--nyc-ref-color-blue-30:#051adb;--nyc-ref-color-blue-20:#0008a0;--nyc-ref-color-blue-10:#050560;--nyc-ref-color-gray-10-25:#22222240;--nyc-ref-color-gray-white-25:#ffffff40;--nyc-ref-color-gray-white-80:#ffffffcc;--nyc-ref-color-gray-black-90:#000000e6;--nyc-ref-color-gray-10-15:#22222226;--nyc-ref-color-gray-white-15:#ffffff26;--nyc-ref-color-gray-10-60:#22222299;--nyc-ref-color-gray-white-75:#ffffffbf;--nyc-ref-color-gray-white:#fff;--nyc-ref-color-gray-black:#000;--nyc-ref-color-gray-90:#eee;--nyc-ref-color-gray-80:#ddd;--nyc-ref-color-gray-70:#ccc;--nyc-ref-color-gray-60:#aaa;--nyc-ref-color-gray-50:#949494;--nyc-ref-color-gray-40:#777;--nyc-ref-color-gray-30:#555;--nyc-ref-color-gray-20:#333;--nyc-ref-color-gray-10:#222;--nyc-ref-length-1-5:1.5px;--nyc-ref-length-1440:1440px;--nyc-ref-length-1160:1160px;--nyc-ref-length-1090:1090px;--nyc-ref-length-750:750px;--nyc-ref-length-440:440px;--nyc-ref-length-360:360px;--nyc-ref-length-320:320px;--nyc-ref-length-240:240px;--nyc-ref-length-176:176px;--nyc-ref-length-112:112px;--nyc-ref-length-100:100px;--nyc-ref-length-96:96px;--nyc-ref-length-90:90px;--nyc-ref-length-80:80px;--nyc-ref-length-64:64px;--nyc-ref-length-56:56px;--nyc-ref-length-50:50px;--nyc-ref-length-48:48px;--nyc-ref-length-40:40px;--nyc-ref-length-36:36px;--nyc-ref-length-32:32px;--nyc-ref-length-28:28px;--nyc-ref-length-24:24px;--nyc-ref-length-22:22px;--nyc-ref-length-20:20px;--nyc-ref-length-18:18px;--nyc-ref-length-16:16px;--nyc-ref-length-14:14px;--nyc-ref-length-12:12px;--nyc-ref-length-10:10px;--nyc-ref-length-8:8px;--nyc-ref-length-4:4px;--nyc-ref-length-2:2px;--nyc-cmp-space-vertical-3xl:var(--nyc-sys-space-fluid-7xl-8xl);--nyc-cmp-space-vertical-2xl:var(--nyc-sys-space-fluid-5xl-6xl);--nyc-cmp-space-vertical-xl:var(--nyc-sys-space-fluid-3xl-5xl);--nyc-cmp-space-vertical-lg:var(--nyc-sys-space-fluid-xl-3xl);--nyc-cmp-space-vertical-md:var(--nyc-sys-space-fluid-lg-xl);--nyc-cmp-space-vertical-xs:var(--nyc-sys-space-fluid-sm-base);--nyc-cmp-space-vertical-sm:var(--nyc-sys-space-fluid-base-lg);--nyc-cmp-inline-message:var(--nyc-ref-color-orange-70-25);--nyc-cmp-emergency-surface:var(--nyc-ref-color-red-40);--nyc-cmp-type-caption-size:var(--nyc-sys-size-text-fluid-xs-sm);--nyc-cmp-type-intro-size:var(--nyc-sys-size-text-fluid-lg-xl);--nyc-cmp-type-display-size:var(--nyc-sys-size-text-fluid-5xl-7xl);--nyc-cmp-modal-body-padding-horizontal:var(--nyc-sys-space-fluid-base-xl);--nyc-cmp-modal-body-padding-vertical:var(--nyc-sys-space-fluid-base-xl);--nyc-cmp-modal-header-padding-vertical:var(--nyc-sys-space-fluid-sm-base);--nyc-cmp-modal-header-padding-horizontal:var(--nyc-sys-space-fluid-base-lg);--nyc-cmp-table-header-background:var(--nyc-ref-color-gray-20);--nyc-cmp-hero-padding-horizontal:var(--nyc-sys-space-fluid-base-5xl);--nyc-cmp-hero-padding-vertical:var(--nyc-sys-space-fluid-xl-5xl);--nyc-cmp-center-gutter:var(--nyc-sys-space-fluid-base-5xl);--nyc-cmp-accordion-icon-size:var(--nyc-sys-size-text-fluid-3xl-5xl);--nyc-cmp-accordion-body-padding-block:var(--nyc-sys-space-fluid-lg-xl);--nyc-cmp-accordion-body-padding-inline:var(--nyc-sys-space-fluid-lg-xl);--nyc-cmp-accordion-heading-padding-inline:var(--nyc-sys-space-fluid-base-lg);--nyc-cmp-accordion-heading-font-size:var(--nyc-sys-size-text-fluid-xl-3xl);--nyc-cmp-heading-h5-size:var(--nyc-sys-size-text-fluid-base-lg);--nyc-cmp-heading-h4-size:var(--nyc-sys-size-text-fluid-lg-2xl);--nyc-cmp-heading-h1-home-sub:var(--nyc-sys-size-text-fluid-3xl-6xl);--nyc-cmp-heading-h1-home:var(--nyc-sys-size-text-fluid-5xl-7xl);--nyc-cmp-heading-h3-size:var(--nyc-sys-size-text-fluid-xl-3xl);--nyc-cmp-heading-h2-size:var(--nyc-sys-size-text-fluid-3xl-5xl);--nyc-cmp-heading-h1-size:var(--nyc-sys-size-text-fluid-4xl-6xl);--nyc-cmp-footer-color:var(--nyc-ref-color-gray-white);--nyc-cmp-footer-background:var(--nyc-ref-color-gray-black);--nyc-cmp-navigation-official-message:var(--nyc-ref-color-gray-20);--nyc-cmp-navigation-primary-background:var(--nyc-ref-color-gray-black);--nyc-cmp-header-primary-on-header:var(--nyc-ref-color-gray-white);--nyc-cmp-header-primary-background:var(--nyc-ref-color-gray-black);--nyc-cmp-button-padding-block:var(--nyc-sys-space-fluid-xs-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-fluid-base-xl);--nyc-cmp-button-font-size:var(--nyc-sys-size-text-fluid-base-xl);--nyc-cmp-card-heading-size:var(--nyc-sys-size-text-fluid-xl-3xl);--nyc-sys-radius-xl:var(--nyc-ref-length-32);--nyc-sys-radius-sm:var(--nyc-ref-length-12);--nyc-sys-radius-2xs:var(--nyc-ref-length-4);--nyc-sys-radius-2xl:var(--nyc-ref-length-40);--nyc-sys-radius-lg:var(--nyc-ref-length-24);--nyc-sys-radius-base:var(--nyc-ref-length-16);--nyc-sys-radius-xs:var(--nyc-ref-length-8);--nyc-sys-font-family-heading:var(--nyc-ref-type-family-clash);--nyc-sys-font-family-body:var(--nyc-ref-type-family-noto);--nyc-sys-space-7xl:var(--nyc-ref-length-96);--nyc-sys-space-4xl:var(--nyc-ref-length-56);--nyc-sys-space-3xl:var(--nyc-ref-length-48);--nyc-sys-space-2xs:var(--nyc-ref-length-4);--nyc-sys-space-xl:var(--nyc-ref-length-32);--nyc-sys-space-8xl:var(--nyc-ref-length-112);--nyc-sys-space-6xl:var(--nyc-ref-length-80);--nyc-sys-space-5xl:var(--nyc-ref-length-64);--nyc-sys-space-2xl:var(--nyc-ref-length-40);--nyc-sys-space-lg:var(--nyc-ref-length-24);--nyc-sys-space-base:var(--nyc-ref-length-16);--nyc-sys-space-sm:var(--nyc-ref-length-12);--nyc-sys-space-xs:var(--nyc-ref-length-8);--nyc-sys-gradient-text-fill:var(--nyc-ref-gradient-rainbow);--nyc-sys-gradient-background:var(--nyc-ref-gradient-blue-orange);--nyc-sys-shadow-base:var(--nyc-ref-shadow-20);--nyc-sys-shadow-low:var(--nyc-ref-shadow-10);--nyc-sys-color-element-pressed-inverted:var(--nyc-ref-color-gray-white-25);--nyc-sys-color-element-hover-inverted:var(--nyc-ref-color-gray-white-15);--nyc-sys-color-progress-complete:var(--nyc-ref-color-gray-10);--nyc-sys-color-progress-incomplete:var(--nyc-ref-color-gray-40);--nyc-sys-color-link-hover:var(--nyc-ref-color-blue-10);--nyc-sys-color-element-pressed:var(--nyc-ref-color-gray-10-25);--nyc-sys-color-link-inverted:var(--nyc-ref-color-blue-80);--nyc-sys-color-link-high-contrast:var(--nyc-ref-color-gray-black);--nyc-sys-color-auxiliary-information:var(--nyc-ref-color-blue-70);--nyc-sys-color-auxiliary-warning:var(--nyc-ref-color-orange-70);--nyc-sys-color-auxiliary-error:var(--nyc-ref-color-red-50);--nyc-sys-color-auxiliary-success:var(--nyc-ref-color-green-50);--nyc-sys-color-subproperty-background:var(--nyc-ref-color-blue-100);--nyc-sys-color-element-hover:var(--nyc-ref-color-gray-10-15);--nyc-sys-color-link:var(--nyc-ref-color-blue-30);--nyc-sys-color-link-visited:var(--nyc-ref-color-purple-40);--nyc-sys-color-on-secondary-hover:var(--nyc-ref-color-blue-10);--nyc-sys-color-on-inactive:var(--nyc-ref-color-gray-10);--nyc-sys-color-inactive:var(--nyc-ref-color-gray-70);--nyc-sys-color-border-focus-high:var(--nyc-ref-color-gray-white);--nyc-sys-color-border-medium:var(--nyc-ref-color-gray-50);--nyc-sys-color-border-high-inverted:var(--nyc-ref-color-gray-white);--nyc-sys-color-border-focus:var(--nyc-ref-color-gray-black);--nyc-sys-color-border-medium-low:var(--nyc-ref-color-gray-70);--nyc-sys-color-border-high:var(--nyc-ref-color-gray-black);--nyc-sys-color-border-medium-high:var(--nyc-ref-color-gray-30);--nyc-sys-color-border-base:var(--nyc-ref-color-gray-80);--nyc-sys-color-on-surface-high:var(--nyc-ref-color-gray-white);--nyc-sys-color-on-surface-base:var(--nyc-ref-color-gray-black);--nyc-sys-color-surface-emergency:var(--nyc-ref-color-red-40);--nyc-sys-color-surface-info:var(--nyc-ref-color-blue-100);--nyc-sys-color-surface-warning:var(--nyc-ref-color-yellow-100);--nyc-sys-color-surface-error:var(--nyc-ref-color-red-100);--nyc-sys-color-surface-success:var(--nyc-ref-color-green-100);--nyc-sys-color-surface-input-highlight:var(--nyc-ref-color-blue-100);--nyc-sys-color-surface-input:var(--nyc-ref-color-gray-white);--nyc-sys-color-surface-high-overlay-white:var(--nyc-ref-color-gray-white-80);--nyc-sys-color-surface-highlight:var(--nyc-ref-color-blue-90);--nyc-sys-color-surface-high-overlay-black:var(--nyc-ref-color-gray-black-90);--nyc-sys-color-surface-high:var(--nyc-ref-color-gray-black);--nyc-sys-color-surface-low:var(--nyc-ref-color-gray-90);--nyc-sys-color-surface-base:var(--nyc-ref-color-gray-white);--nyc-sys-color-surface-inactive:var(--nyc-ref-color-gray-white-75);--nyc-sys-color-on-disabled:var(--nyc-ref-color-gray-20);--nyc-sys-color-disabled:var(--nyc-ref-color-gray-70);--nyc-sys-color-on-secondary:var(--nyc-ref-color-blue-40);--nyc-sys-color-secondary:var(--nyc-ref-color-gray-white);--nyc-sys-color-on-primary:var(--nyc-ref-color-gray-white);--nyc-sys-color-primary-hover:var(--nyc-ref-color-blue-10);--nyc-sys-color-primary:var(--nyc-ref-color-blue-40);--nyc-sys-color-text-input:var(--nyc-ref-color-gray-black);--nyc-sys-color-text-type-ahead:var(--nyc-ref-color-gray-50);--nyc-sys-color-text-base-inverse:var(--nyc-ref-color-gray-white);--nyc-sys-color-text-secondary:var(--nyc-ref-color-gray-30);--nyc-sys-color-text-base:var(--nyc-ref-color-gray-black);--nyc-sys-color-background:var(--nyc-ref-color-gray-white);--nyc-sys-color-base:var(--nyc-ref-color-gray-black);--nyc-sys-size-border-base:var(--nyc-ref-length-2);--nyc-sys-size-border-sm:var(--nyc-ref-length-1-5);--nyc-sys-size-line-height-body:var(--nyc-ref-length-24);--nyc-sys-size-text-8xl:var(--nyc-ref-length-96);--nyc-sys-size-text-xl:var(--nyc-ref-length-22);--nyc-sys-size-text-xs:var(--nyc-ref-length-14);--nyc-sys-size-text-5xl:var(--nyc-ref-length-40);--nyc-sys-size-text-3xl:var(--nyc-ref-length-28);--nyc-sys-size-text-2xl:var(--nyc-ref-length-24);--nyc-sys-size-text-lg:var(--nyc-ref-length-20);--nyc-sys-size-text-base:var(--nyc-ref-length-18);--nyc-sys-size-text-7xl:var(--nyc-ref-length-64);--nyc-sys-size-text-6xl:var(--nyc-ref-length-56);--nyc-sys-size-text-4xl:var(--nyc-ref-length-32);--nyc-sys-size-text-sm:var(--nyc-ref-length-16);--nyc-sys-size-width-line-length:var(--nyc-ref-length-750);--nyc-sys-size-width-surface-lg:var(--nyc-ref-length-440);--nyc-sys-size-width-surface-base:var(--nyc-ref-length-360);--nyc-sys-size-width-surface-sm:var(--nyc-ref-length-240);--nyc-sys-size-width-page-max:var(--nyc-ref-length-1090);--nyc-sys-size-width-page-min:var(--nyc-ref-length-320);--nyc-cmp-form-border-color:var(--nyc-sys-color-border-medium);--nyc-cmp-global-alert-border-color:var(--nyc-sys-color-border-high);--nyc-cmp-global-alert-color:var(--nyc-sys-color-on-surface-high);--nyc-cmp-global-alert-background:var(--nyc-sys-color-surface-emergency);--nyc-cmp-modal-border-radius:var(--nyc-sys-radius-lg);--nyc-cmp-modal-background:var(--nyc-sys-color-surface-base);--nyc-cmp-table-cell-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-table-cell-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-table-cell-padding-inline:var(--nyc-sys-space-base);--nyc-cmp-table-header-border-color:var(--nyc-sys-color-border-medium-high);--nyc-cmp-table-header-color:var(--nyc-sys-color-text-base-inverse);--nyc-cmp-hr-background-color:var(--nyc-sys-color-border-medium-high);--nyc-cmp-accordion-group-background:var(--nyc-sys-color-surface-base);--nyc-cmp-accordion-heading-padding-block:var(--nyc-sys-space-base);--nyc-cmp-accordion-heading-background:var(--nyc-sys-color-surface-base);--nyc-cmp-navigation-primary-inactive:var(--nyc-sys-color-inactive);--nyc-cmp-navigation-primary-active:var(--nyc-sys-color-on-surface-high);--nyc-cmp-header-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-header-padding-inline:var(--nyc-sys-space-base);--nyc-cmp-button-outline-color:var(--nyc-sys-color-border-high);--nyc-cmp-button-gap:var(--nyc-sys-space-xs);--nyc-cmp-button-border-radius:var(--nyc-sys-radius-2xl);--nyc-cmp-region-base:var(--nyc-sys-space-2xl);--nyc-cmp-card-padding-block:var(--nyc-sys-space-base);--nyc-cmp-card-border-radius:var(--nyc-sys-radius-xs);--nyc-cmp-card-border-color-hover:var(--nyc-sys-color-border-medium-high);--nyc-cmp-card-width-lg:var(--nyc-sys-size-width-surface-lg);--nyc-cmp-card-width-base:var(--nyc-sys-size-width-surface-base);--nyc-cmp-card-padding-inline:var(--nyc-sys-space-base);--nyc-cmp-card-body-size:var(--nyc-sys-size-text-base);--nyc-cmp-card-shadow:var(--nyc-sys-shadow-base);--nyc-cmp-card-border-width:var(--nyc-sys-size-border-base);--nyc-cmp-card-border-radius-hover:var(--nyc-sys-radius-base);--nyc-cmp-card-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-card-radius-xl:var(--nyc-sys-radius-2xl);--nyc-cmp-card-radius-lg-hover:var(--nyc-sys-radius-xs);--nyc-cmp-card-radius-lg:var(--nyc-sys-radius-lg);--nyc-cmp-card-radius-base:var(--nyc-sys-radius-base);--nyc-cmp-card-color:var(--nyc-sys-color-on-surface-base);--nyc-cmp-card-background-hover:var(--nyc-sys-color-surface-base);--nyc-cmp-card-background:var(--nyc-sys-color-surface-inactive);--nyc-sys-color-border-selected:var(--nyc-sys-color-primary)}
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nycds/variables",
|
|
3
|
+
"version": "0.2.2",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"style": "dist/variables.css",
|
|
6
|
+
"main": "dist/variables.css",
|
|
7
|
+
"devDependencies": {
|
|
8
|
+
"style-dictionary": "^3.9.2",
|
|
9
|
+
"@nycds/config": "^0.2.0"
|
|
10
|
+
},
|
|
11
|
+
"scripts": {
|
|
12
|
+
"clean": "rimraf ./dist",
|
|
13
|
+
"build:css": "node ./scripts/make-theme-files.js && node ./scripts/build.js",
|
|
14
|
+
"minify:css": "postcss dist/*.css --use cssnano --ext .min.css --dir dist --no-map"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { postcssConfig as default } from '@nycds/config'
|
package/scripts/build.js
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import StyleDictionary from 'style-dictionary'
|
|
2
|
+
import { resolve } from 'path'
|
|
3
|
+
|
|
4
|
+
const SRCDIR = resolve(process.cwd(), './tokens/dist')
|
|
5
|
+
const DESTDIR = resolve(process.cwd(), './dist')
|
|
6
|
+
|
|
7
|
+
const baseTokens = ['ref', 'light', 'cmp']
|
|
8
|
+
const themes = ['dark']
|
|
9
|
+
|
|
10
|
+
StyleDictionary.registerTransform({
|
|
11
|
+
name: 'nyc/length/px',
|
|
12
|
+
type: 'value',
|
|
13
|
+
matcher: (token) => token.path.includes('length'),
|
|
14
|
+
transformer: (token) => `${token.value}px`,
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
StyleDictionary.registerTransform({
|
|
18
|
+
name: 'nyc/size/clamp',
|
|
19
|
+
type: 'value',
|
|
20
|
+
matcher: (token) => token.path.includes('length'),
|
|
21
|
+
transformer: (token) => `${token.value}px`,
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
const cssConfig = {
|
|
25
|
+
prefix: 'nyc',
|
|
26
|
+
transforms: ['attribute/cti', 'name/cti/kebab', 'nyc/length/px', 'color/hsl'],
|
|
27
|
+
buildPath: `${DESTDIR}/`,
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const getThemeConfig = (theme) => ({
|
|
31
|
+
include: [`${SRCDIR}/nyc.ref.tokens.json`],
|
|
32
|
+
source: [`${SRCDIR}/**/nyc.${theme}.tokens.json`],
|
|
33
|
+
platforms: {
|
|
34
|
+
css: {
|
|
35
|
+
...cssConfig,
|
|
36
|
+
files: [
|
|
37
|
+
{
|
|
38
|
+
destination: `${theme}.css`,
|
|
39
|
+
format: 'css/variables',
|
|
40
|
+
options: {
|
|
41
|
+
outputReferences: true,
|
|
42
|
+
selector: `:root${theme != 'light' ? '[data-theme="' + theme + '"]' : ''}`,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
const baseVariables = StyleDictionary.extend({
|
|
51
|
+
include: baseTokens.map((t) => `${SRCDIR}/nyc.${t}.tokens.json`),
|
|
52
|
+
platforms: {
|
|
53
|
+
css: {
|
|
54
|
+
...cssConfig,
|
|
55
|
+
files: [
|
|
56
|
+
{
|
|
57
|
+
destination: 'variables.css',
|
|
58
|
+
format: 'css/variables',
|
|
59
|
+
options: {
|
|
60
|
+
outputReferences: true,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
baseVariables.buildAllPlatforms()
|
|
69
|
+
|
|
70
|
+
themes.map((theme) => {
|
|
71
|
+
StyleDictionary.extend(getThemeConfig(theme)).buildAllPlatforms()
|
|
72
|
+
})
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import { readFileSync, writeFile, existsSync, mkdirSync } from 'fs'
|
|
2
|
+
import { resolve } from 'path'
|
|
3
|
+
|
|
4
|
+
const roundTo4 = (num) => roundToX(num, 4)
|
|
5
|
+
|
|
6
|
+
const roundToX = (num, decimals) => {
|
|
7
|
+
return +(Math.round(num + 'e' + decimals) + 'e-' + decimals)
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const SRCDIR = resolve(process.cwd(), './tokens/src')
|
|
11
|
+
const DESTDIR = resolve(process.cwd(), './tokens/dist')
|
|
12
|
+
|
|
13
|
+
if (!existsSync(DESTDIR)) {
|
|
14
|
+
mkdirSync(DESTDIR)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const data = readFileSync(`${SRCDIR}/nyc.tokens.json`, {})
|
|
18
|
+
|
|
19
|
+
const tokens = JSON.parse(data)
|
|
20
|
+
|
|
21
|
+
const getThemes = (obj) => {
|
|
22
|
+
return Object.keys(obj.sys)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const themes = getThemes(tokens)
|
|
26
|
+
|
|
27
|
+
// console.log(data, themes);
|
|
28
|
+
|
|
29
|
+
const writeTokenFile = (obj, filename) => {
|
|
30
|
+
const objStr = JSON.stringify(obj, null, 2)
|
|
31
|
+
writeFile(filename, objStr, (error) => {
|
|
32
|
+
if (error) {
|
|
33
|
+
console.log('An error has occurred ', error)
|
|
34
|
+
return
|
|
35
|
+
}
|
|
36
|
+
console.log('Data written successfully to disk')
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const removeThemeRefs = (obj, themes) => {
|
|
41
|
+
const regex = new RegExp(
|
|
42
|
+
`\\.(${themes.toString().replaceAll(',', '|')})`,
|
|
43
|
+
'g',
|
|
44
|
+
)
|
|
45
|
+
return JSON.parse(JSON.stringify(obj).replace(regex, ''))
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const removeClampRefs = (obj) => {
|
|
49
|
+
// const regex = new RegExp(`\\.(${themes.toString().replace(',','|')})`, 'g');
|
|
50
|
+
const tokensStr = JSON.stringify(obj)
|
|
51
|
+
const matches = [
|
|
52
|
+
...tokensStr.matchAll(new RegExp('fluid\\.[A-Za-z0-9.-]+\\.max', 'g')),
|
|
53
|
+
]
|
|
54
|
+
// console.log(matches);
|
|
55
|
+
const newStr = matches.reduce((acc, cur) => {
|
|
56
|
+
return acc.replaceAll(cur[0], cur[0].substring(0, cur[0].length - 4))
|
|
57
|
+
}, tokensStr)
|
|
58
|
+
// console.log(newStr)
|
|
59
|
+
const tokens = JSON.parse(newStr)
|
|
60
|
+
// console.log(tokens);
|
|
61
|
+
return tokens
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const getTokenValue = (reference, tokens) => {
|
|
65
|
+
//console.log(reference, reference.replace(/[{}]/g, '').split('.'))
|
|
66
|
+
let ref = reference
|
|
67
|
+
if (typeof ref === 'string' && ref.includes('sys')) {
|
|
68
|
+
ref = `${ref.slice(0, 5)}light.${ref.slice(5)}`
|
|
69
|
+
}
|
|
70
|
+
//console.log(ref, ref.replace(/[{}]/g, '').split('.'))
|
|
71
|
+
const val = ref
|
|
72
|
+
.replace(/[{}]/g, '')
|
|
73
|
+
.split('.')
|
|
74
|
+
.reduce((acc, cur) => acc[cur], tokens).value
|
|
75
|
+
if (typeof val === 'string' && val.includes('ref')) {
|
|
76
|
+
return getTokenValue(val, tokens)
|
|
77
|
+
}
|
|
78
|
+
return val
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
const getClampVal = (pageMin, pageMax, minVal, maxVal) => {
|
|
82
|
+
const factor = (1 / (pageMax - pageMin)) * (maxVal - minVal)
|
|
83
|
+
const calc1 = `${roundTo4(minVal - pageMin * factor)}rem`
|
|
84
|
+
const calc2 = `${roundTo4(100 * factor)}vw`
|
|
85
|
+
const calcV = `${calc1} + ${calc2}`
|
|
86
|
+
const clamp = `clamp(${minVal}rem, ${calcV}, ${maxVal}rem)`
|
|
87
|
+
return clamp
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const get = (t, path) => path.split('.').reduce((r, k) => r?.[k], t)
|
|
91
|
+
|
|
92
|
+
const set = (t, path, value) => {
|
|
93
|
+
if (typeof t != 'object') throw Error('non-object')
|
|
94
|
+
if (path == '') throw Error('empty path')
|
|
95
|
+
const pos = path.indexOf('.')
|
|
96
|
+
return pos == -1
|
|
97
|
+
? ((t[path] = value), value)
|
|
98
|
+
: set(t[path.slice(0, pos)], path.slice(pos + 1), value)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const handleFluidTokens = (path, tokens, theme, pageMin, pageMax) => {}
|
|
102
|
+
|
|
103
|
+
const clampTokens = (tokens, theme) => {
|
|
104
|
+
const pageMin =
|
|
105
|
+
getTokenValue(tokens.sys[theme].size.width.page.min.value, tokens) / 16
|
|
106
|
+
const pageMax =
|
|
107
|
+
getTokenValue(tokens.sys[theme].size.width.page.max.value, tokens) / 16
|
|
108
|
+
|
|
109
|
+
const paths = ['size.text.fluid', 'space.fluid', 'radius.fluid']
|
|
110
|
+
paths.forEach((path) => {
|
|
111
|
+
const o = get(tokens.sys[theme], path)
|
|
112
|
+
if (!o) return
|
|
113
|
+
Object.keys(o).map((k) => {
|
|
114
|
+
const minV = getTokenValue(o[k].min.value, tokens) / 16
|
|
115
|
+
const maxV = getTokenValue(o[k].max.value, tokens) / 16
|
|
116
|
+
const clamp = getClampVal(pageMin, pageMax, minV, maxV)
|
|
117
|
+
set(tokens.sys[theme], `${path}.${k}`, {
|
|
118
|
+
type: 'dimension',
|
|
119
|
+
value: clamp,
|
|
120
|
+
})
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
//console.log(tokens.sys[theme].size.text.fluid)
|
|
124
|
+
return removeClampRefs(tokens)
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// The token file includes references to Figma variable modes which we
|
|
128
|
+
// dont want, like 'dark' in {sys.dark.space.lg}, so we strip them out.
|
|
129
|
+
// Include "value" here to remove mode references in cmp tier.
|
|
130
|
+
const cleanTokens = removeThemeRefs(tokens, [...themes, 'value'])
|
|
131
|
+
|
|
132
|
+
themes.forEach((theme) => {
|
|
133
|
+
const filename = `${DESTDIR}/nyc.${theme}.tokens.json`
|
|
134
|
+
const transformedTokens = clampTokens(cleanTokens, theme)
|
|
135
|
+
writeTokenFile({ sys: transformedTokens.sys[theme] }, filename)
|
|
136
|
+
})
|
|
137
|
+
|
|
138
|
+
const tiers = ['ref', 'cmp']
|
|
139
|
+
|
|
140
|
+
tiers.forEach((tier) => {
|
|
141
|
+
const filename = `${DESTDIR}/nyc.${tier}.tokens.json`
|
|
142
|
+
const transformedTokens = removeClampRefs(cleanTokens)
|
|
143
|
+
writeTokenFile({ [tier]: transformedTokens[tier] }, filename)
|
|
144
|
+
})
|