@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.
Files changed (16) hide show
  1. package/CHANGELOG.md +185 -0
  2. package/LICENSE +674 -0
  3. package/README.org +247 -0
  4. package/dist/dark.css +268 -0
  5. package/dist/dark.min.css +1 -0
  6. package/dist/variables.css +368 -0
  7. package/dist/variables.min.css +1 -0
  8. package/package.json +16 -0
  9. package/postcss.config.js +1 -0
  10. package/scripts/build.js +72 -0
  11. package/scripts/make-theme-files.js +144 -0
  12. package/tokens/dist/nyc.cmp.tokens.json +583 -0
  13. package/tokens/dist/nyc.dark.tokens.json +755 -0
  14. package/tokens/dist/nyc.light.tokens.json +755 -0
  15. package/tokens/dist/nyc.ref.tokens.json +533 -0
  16. package/tokens/src/nyc.tokens.json +3415 -0
package/README.org ADDED
@@ -0,0 +1,247 @@
1
+ #+TITLE: Variables
2
+
3
+ This library utilizes [[https://developer.mozilla.org/en-US/docs/Web/CSS/--*][CSS custom properties]], adopting a naming
4
+ convention influenced by Google's [[https://m3.material.io/foundations/design-tokens/how-to-read-tokens#98e82e98-5ecd-4c5d-a03a-7d4cc5d55c20][Material design system tokens]]. The
5
+ variables are divided into a 3-tier structure: Reference, System, and
6
+ Component.
7
+
8
+ #+TOC: headlines 2
9
+
10
+ ** Reference variables
11
+
12
+ Reference variables are used to hold direct property values, the value
13
+ you would give to a CSS property when not using variables.
14
+
15
+ | Prefix | Pattern |
16
+ |---------+---------------------------------------|
17
+ | nyc-ref | --{prefix}-{property}{-label}{-scale} |
18
+
19
+ *** Color
20
+
21
+ Color reference variables allow you to label and scale colors used on the site.
22
+
23
+ #+begin_src css :noweb-ref ref-vars
24
+ --nyc-ref-color-blue-50: hsla(214, 54%, 95%, 1);
25
+ --nyc-ref-color-blue-100: hsla(207, 71%, 68%, 1);
26
+ --nyc-ref-color-blue-200: hsla(213, 53%, 50%, 1);
27
+ --nyc-ref-color-blue-250: hsla(213, 59%, 45%, 1);
28
+ --nyc-ref-color-blue-500: hsla(208, 100%, 30%, 1);
29
+ --nyc-ref-color-blue-700: hsla(210, 64%, 19%, 1);
30
+ --nyc-ref-color-orange-500: hsla(26, 92%, 58%, 1);
31
+ --nyc-ref-color-orange-700: hsla(25, 78%, 41%, 1);
32
+ --nyc-ref-color-neutral-0: hsla(0, 0%, 100%, 1);
33
+ --nyc-ref-color-neutral-100: hsla(0, 0%, 93%, 1);
34
+ --nyc-ref-color-neutral-200: hsla(0, 0%, 80%, 1);
35
+ --nyc-ref-color-neutral-300: hsla(0, 0%, 53%, 1);
36
+ --nyc-ref-color-neutral-400: hsla(0, 0%, 40%, 1);
37
+ --nyc-ref-color-neutral-800: hsla(0, 0%, 20%, 1);
38
+ --nyc-ref-color-neutral-900: hsla(0, 0%, 0%, 1);
39
+
40
+ --nyc-ref-shadow-400: 4px 4px 8px hsla(0, 0%, 0%, .2);
41
+ --nyc-ref-shadow-450: 0 4px 8px hsla(0, 0%, 0%, .2);
42
+ --nyc-ref-shadow-500: 0 4px 4px hsla(0, 0%, 0%, .25);
43
+
44
+ --nyc-ref-gradient-blue-100: radial-gradient(
45
+ 56.94% 119.67% at 78.96% 43.36%, #E6F4FF 0%, #BDE3FF 100%
46
+ );
47
+ /* warning: gradient uses a rotation that is not supported by
48
+ CSS and may not behave as expected */
49
+ #+end_src
50
+
51
+ *** Size
52
+
53
+ The below size variables are used for fluid =font-size= and are
54
+ generated from the [[https://utopia.fyi][Utopia]] calculator ([[https://utopia.fyi/type/calculator?c=320,16,1.2,1024,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12][scale source]])
55
+
56
+ #+name: min-max-values
57
+ | viewport-min | viewport-max | value-min | value-max |
58
+ | 320 | 1120 | 18 | 24 |
59
+
60
+ #+name: clamp-generator
61
+ #+begin_src
62
+ #+end_src
63
+
64
+ #+begin_src css :noweb-ref ref-vars
65
+ /* Step -2: 11.11px → 11.52px */
66
+ --nyc-ref-dimension-size-step--2: clamp(0.69rem, calc(0.68rem + 0.06vw), 0.72rem);
67
+
68
+ /* Step -1: 13.33px → 14.40px */
69
+ --nyc-ref-dimension-size-step--1: clamp(0.83rem, calc(0.80rem + 0.15vw), 0.90rem);
70
+
71
+ /* Step 0: 16.00px → 18.00px */
72
+ --nyc-ref-dimension-size-step-0: clamp(1.00rem, calc(0.94rem + 0.28vw), 1.13rem);
73
+
74
+ /* Step 1: 19.20px → 22.50px */
75
+ --nyc-ref-dimension-size-step-1: clamp(1.20rem, calc(1.11rem + 0.47vw), 1.41rem);
76
+
77
+ /* Step 2: 23.04px → 28.13px */
78
+ --nyc-ref-dimension-size-step-2: clamp(1.44rem, calc(1.30rem + 0.72vw), 1.76rem);
79
+
80
+ /* Step 3: 27.65px → 35.16px */
81
+ --nyc-ref-dimension-size-step-3: clamp(1.73rem, calc(1.51rem + 1.07vw), 2.20rem);
82
+
83
+ /* Step 4: 33.18px → 43.95px */
84
+ --nyc-ref-dimension-size-step-4: clamp(2.07rem, calc(1.77rem + 1.53vw), 2.75rem);
85
+
86
+ /* Step 5: 39.81px → 54.93px */
87
+ --nyc-ref-dimension-size-step-5: clamp(2.49rem, calc(2.06rem + 2.15vw), 3.43rem);
88
+ #+end_src
89
+
90
+ *** Space
91
+
92
+ The below space variables are used for fluid =margin= and =padding= and
93
+ are generated from the [[https://utopia.fyi][Utopia]] calculator ([[https://utopia.fyi/space/calculator?c=320,16,1.2,1024,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12][scale source]])
94
+
95
+ #+begin_src css :noweb-ref ref-vars
96
+ --nyc-sys-dimension-space-3xs: clamp(0.25rem, calc(0.22rem + 0.14vw), 0.31rem);
97
+ --nyc-sys-dimension-space-2xs: clamp(0.50rem, calc(0.47rem + 0.14vw), 0.56rem);
98
+ --nyc-sys-dimension-space-xs: clamp(0.75rem, calc(0.69rem + 0.28vw), 0.88rem);
99
+ --nyc-sys-dimension-space-s: clamp(1.00rem, calc(0.94rem + 0.28vw), 1.13rem);
100
+ --nyc-sys-dimension-space-m: clamp(1.50rem, calc(1.41rem + 0.43vw), 1.69rem);
101
+ --nyc-sys-dimension-space-l: clamp(2.00rem, calc(1.89rem + 0.57vw), 2.25rem);
102
+ --nyc-sys-dimension-space-xl: clamp(3.00rem, calc(2.83rem + 0.85vw), 3.38rem);
103
+ --nyc-sys-dimension-space-2xl: clamp(4.00rem, calc(3.77rem + 1.14vw), 4.50rem);
104
+ --nyc-sys-dimension-space-3xl: clamp(6.00rem, calc(5.66rem + 1.70vw), 6.75rem);
105
+
106
+ /* One-up pairs */
107
+ --nyc-sys-dimension-space-3xs-2xs: clamp(0.25rem, calc(0.11rem + 0.71vw), 0.56rem);
108
+ --nyc-sys-dimension-space-2xs-xs: clamp(0.50rem, calc(0.33rem + 0.85vw), 0.88rem);
109
+ --nyc-sys-dimension-space-xs-s: clamp(0.75rem, calc(0.58rem + 0.85vw), 1.13rem);
110
+ --nyc-sys-dimension-space-s-m: clamp(1.00rem, calc(0.69rem + 1.56vw), 1.69rem);
111
+ --nyc-sys-dimension-space-m-l: clamp(1.50rem, calc(1.16rem + 1.70vw), 2.25rem);
112
+ --nyc-sys-dimension-space-l-xl: clamp(2.00rem, calc(1.38rem + 3.13vw), 3.38rem);
113
+ --nyc-sys-dimension-space-xl-2xl: clamp(3.00rem, calc(2.32rem + 3.41vw), 4.50rem);
114
+ --nyc-sys-dimension-space-2xl-3xl: clamp(4.00rem, calc(2.75rem + 6.25vw), 6.75rem);
115
+
116
+ /* Custom pairs */
117
+ --nyc-sys-dimension-space-s-l: clamp(1.00rem, calc(0.43rem + 2.84vw), 2.25rem);
118
+
119
+ /* Flow */
120
+ --nyc-sys-dimension-flow-space: var(--nyc-sys-dimension-space-m);
121
+
122
+ /* Region */
123
+ --nyc-sys-dimension-region-space: var(--nyc-sys-dimension-space-l-xl);
124
+ #+end_src
125
+
126
+ *** Type
127
+
128
+ #+begin_src css :noweb-ref ref-vars
129
+ --nyc-ref-font-family-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
130
+ #+end_src
131
+
132
+ ** System variables
133
+
134
+ System variables introduce a semantic layer where we can provide
135
+ useful names to our Reference variables, such as a ~primary~ color or a
136
+ ~base~ font.
137
+
138
+ | Prefix | Pattern |
139
+ |---------+-----------------------------------------|
140
+ | nyc-sys | --{prefix}-{property}-{label}{-variant} |
141
+
142
+ *** Color
143
+
144
+ #+begin_src css :noweb-ref sys-vars
145
+ --nyc-sys-color-primary: var(--nyc-ref-color-blue-500);
146
+ --nyc-sys-color-on-primary: var(--nyc-ref-color-neutral-0);
147
+ --nyc-sys-color-primary-lighter: var(--nyc-ref-color-blue-100);
148
+ --nyc-sys-color-on-primary-lighter: var(--nyc-ref-color-blue-700);
149
+ --nyc-sys-color-primary-lightest: var(--nyc-ref-color-blue-50);
150
+ --nyc-sys-color-primary-dark: var(--nyc-ref-color-blue-700);
151
+ --nyc-sys-color-secondary: var(--nyc-ref-color-orange-500);
152
+ --nyc-sys-color-text: var(--nyc-ref-color-neutral-800);
153
+ --nyc-sys-color-text-light: var(--nyc-ref-color-neutral-400);
154
+ --nyc-sys-color-link: var(--nyc-sys-color-primary, currentColor);
155
+ --nyc-sys-color-background: var(--nyc-ref-color-neutral-0);
156
+ --nyc-sys-color-border: var(--nyc-ref-color-neutral-100);
157
+ --nyc-sys-color-neutral-lightest: var(--nyc-ref-color-neutral-100);
158
+ --nyc-sys-color-neutral-light: var(--nyc-ref-color-neutral-200);
159
+ --nyc-sys-color-neutral: var(--nyc-ref-color-neutral-300);
160
+ --nyc-sys-color-accent: var(--nyc-sys-color-primary);
161
+ --nyc-sys-color-focus: var(--nyc-sys-color-primary-lighter);
162
+ #+end_src
163
+
164
+ *** Gradient/Shadow
165
+
166
+ #+begin_src css :noweb-ref sys-vars
167
+ --nyc-sys-gradient-primary-light: var(--nyc-ref-gradient-blue-100);
168
+ --nyc-sys-shadow-base: var(--nyc-ref-shadow-500);
169
+ --nyc-sys-shadow-weak: var(--nyc-ref-shadow-400);
170
+ --nyc-sys-shadow-focus: inset 0 0 0 .2rem var(--nyc-sys-color-primary-lighter);
171
+ #+end_src
172
+
173
+ *** Dimension
174
+
175
+ #+begin_src css :noweb-ref sys-vars
176
+ --nyc-sys-dimension-page-max-width: 64rem;
177
+
178
+ --nyc-sys-dimension-size-xs: var(--nyc-ref-dimension-size-step--2);
179
+ --nyc-sys-dimension-size-s: var(--nyc-ref-dimension-size-step--1);
180
+ --nyc-sys-dimension-size-m: var(--nyc-ref-dimension-size-step-0);
181
+ --nyc-sys-dimension-size-l: var(--nyc-ref-dimension-size-step-2);
182
+ --nyc-sys-dimension-size-xl: var(--nyc-ref-dimension-size-step-3);
183
+ --nyc-sys-dimension-size-xxl: var(--nyc-ref-dimension-size-step-4);
184
+ --nyc-sys-dimension-size-xxxl: var(--nyc-ref-dimension-size-step-5);
185
+
186
+ #+end_src
187
+
188
+ *** Typesetting
189
+
190
+ #+begin_src css :noweb-ref sys-vars
191
+ --nyc-sys-line-height: 1.4;
192
+ --nyc-sys-font-size-base: var(--nyc-ref-dimension-size-step-0);
193
+ --nyc-sys-font-family-base: var(--nyc-ref-font-family-helvetica);
194
+ --nyc-sys-font-family-secondary: var(--nyc-sys-font-family-base);
195
+ #+end_src
196
+
197
+ *** Logical variables
198
+
199
+ #+begin_src css :noweb-ref sys-vars
200
+ --ON: initial;
201
+ --OFF: ;
202
+ #+end_src
203
+
204
+ ** Component variables
205
+
206
+ Component variables are the variables that will be referenced in our
207
+ component CSS properties and these reference System variables.
208
+
209
+ | Prefix | Pattern |
210
+ |---------+-------------------------------------------|
211
+ | nyc-cmp | --{prefix}-{component}-{property}{-state} |
212
+
213
+
214
+ #+begin_src css :tangle no
215
+ --nyc-cmp-card-background-hover: var(--nyc-sys-color-primary-light, transparent);
216
+ #+end_src
217
+
218
+ ** Property sets
219
+
220
+ Property sets are
221
+ ** Custom selectors
222
+
223
+ [[https://drafts.csswg.org/css-extensions/#custom-selectors][Custom selectors]] is a draft CSS specification that allows holding
224
+ multiple CSS selectors under a given name.
225
+
226
+ #+begin_src css :noweb-ref custom-selectors
227
+ @custom-selector :--heading h1, h2, h3, h4, h5, h6;
228
+ #+end_src
229
+
230
+ ** Appendix :noexport:
231
+
232
+ #+BEGIN_SRC css :noweb yes
233
+ /* CSS variables: Reference and System */
234
+ :root {
235
+ /* Reference variables */
236
+ <<ref-vars>>
237
+
238
+ /* System variables */
239
+ <<sys-vars>>
240
+
241
+ /* Property sets */
242
+ <<property-sets>>
243
+ }
244
+
245
+ /* Custom selectors */
246
+ <<custom-selectors>>
247
+ #+END_SRC
package/dist/dark.css ADDED
@@ -0,0 +1,268 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 23 Sep 2026 16:05:55 GMT
4
+ */
5
+
6
+ :root[data-theme="dark"] {
7
+ --nyc-sys-radius-fluid-sm-base: clamp(0.75rem, 0.6461rem + 0.5195vw, 1rem);
8
+ --nyc-sys-radius-fluid-xs-base: clamp(0.5rem, 0.2922rem + 1.039vw, 1rem);
9
+ --nyc-sys-radius-fluid-base-2xl: clamp(1rem, 0.3766rem + 3.1169vw, 2.5rem);
10
+ --nyc-sys-space-fluid-2xl-4xl: clamp(2.5rem, 2.0844rem + 2.0779vw, 3.5rem);
11
+ --nyc-sys-space-fluid-lg-4xl: clamp(1.5rem, 0.6688rem + 4.1558vw, 3.5rem);
12
+ --nyc-sys-space-fluid-base-4xl: clamp(1rem, -0.039rem + 5.1948vw, 3.5rem);
13
+ --nyc-sys-space-fluid-xl-3xl: clamp(2rem, 1.5844rem + 2.0779vw, 3rem);
14
+ --nyc-sys-space-fluid-xs-xl: clamp(0.5rem, -0.1234rem + 3.1169vw, 2rem);
15
+ --nyc-sys-space-fluid-5xl-6xl: clamp(4rem, 3.5844rem + 2.0779vw, 5rem);
16
+ --nyc-sys-space-fluid-xs-base: clamp(0.5rem, 0.2922rem + 1.039vw, 1rem);
17
+ --nyc-sys-space-fluid-sm-base: clamp(0.75rem, 0.6461rem + 0.5195vw, 1rem);
18
+ --nyc-sys-space-fluid-3xl-5xl: clamp(3rem, 2.5844rem + 2.0779vw, 4rem);
19
+ --nyc-sys-space-fluid-xl-5xl: clamp(2rem, 1.1688rem + 4.1558vw, 4rem);
20
+ --nyc-sys-space-fluid-6xl-8xl: clamp(5rem, 4.1688rem + 4.1558vw, 7rem);
21
+ --nyc-sys-space-fluid-7xl-8xl: clamp(6rem, 5.5844rem + 2.0779vw, 7rem);
22
+ --nyc-sys-space-fluid-lg-3xl: clamp(1.5rem, 0.8766rem + 3.1169vw, 3rem);
23
+ --nyc-sys-space-fluid-base-5xl: clamp(1rem, -0.2468rem + 6.2338vw, 4rem);
24
+ --nyc-sys-space-fluid-base-lg: clamp(1rem, 0.7922rem + 1.039vw, 1.5rem);
25
+ --nyc-sys-space-fluid-lg-xl: clamp(1.5rem, 1.2922rem + 1.039vw, 2rem);
26
+ --nyc-sys-space-fluid-lg-8xl: clamp(1.5rem, -0.7857rem + 11.4286vw, 7rem);
27
+ --nyc-sys-space-fluid-xl-2xl: clamp(2rem, 1.7922rem + 1.039vw, 2.5rem);
28
+ --nyc-sys-space-fluid-lg-5xl: clamp(1.5rem, 0.461rem + 5.1948vw, 4rem);
29
+ --nyc-sys-space-fluid-base-xl: clamp(1rem, 0.5844rem + 2.0779vw, 2rem);
30
+ --nyc-sys-space-fluid-xs-sm: clamp(0.5rem, 0.3961rem + 0.5195vw, 0.75rem);
31
+ --nyc-sys-space-fluid-lg-2xl: clamp(1.5rem, 1.0844rem + 2.0779vw, 2.5rem);
32
+ --nyc-sys-space-fluid-2xl-5xl: clamp(2.5rem, 1.8766rem + 3.1169vw, 4rem);
33
+ --nyc-sys-space-fluid-base-2xl: clamp(1rem, 0.3766rem + 3.1169vw, 2.5rem);
34
+ --nyc-sys-space-fluid-2xl-6xl: clamp(2.5rem, 1.461rem + 5.1948vw, 5rem);
35
+ --nyc-sys-size-text-fluid-xs-sm: clamp(0.875rem, 0.8231rem + 0.2597vw, 1rem);
36
+ --nyc-sys-size-text-fluid-4xl-8xl: clamp(2rem, 0.3377rem + 8.3117vw, 6rem);
37
+ --nyc-sys-size-text-fluid-sm-xl: clamp(1rem, 0.8442rem + 0.7792vw, 1.375rem);
38
+ --nyc-sys-size-text-fluid-4xl-7xl: clamp(2rem, 1.1688rem + 4.1558vw, 4rem);
39
+ --nyc-sys-size-text-fluid-lg-3xl: clamp(1.25rem, 1.0422rem + 1.039vw, 1.75rem);
40
+ --nyc-sys-size-text-fluid-3xl-6xl: clamp(1.75rem, 1.0227rem + 3.6364vw, 3.5rem);
41
+ --nyc-sys-size-text-fluid-xl-3xl: clamp(1.375rem, 1.2192rem + 0.7792vw, 1.75rem);
42
+ --nyc-sys-size-text-fluid-lg-2xl: clamp(1.25rem, 1.1461rem + 0.5195vw, 1.5rem);
43
+ --nyc-sys-size-text-fluid-base-lg: clamp(1.125rem, 1.0731rem + 0.2597vw, 1.25rem);
44
+ --nyc-sys-size-text-fluid-lg-xl: clamp(1.25rem, 1.1981rem + 0.2597vw, 1.375rem);
45
+ --nyc-sys-size-text-fluid-2xl-5xl: clamp(1.5rem, 1.0844rem + 2.0779vw, 2.5rem);
46
+ --nyc-sys-size-text-fluid-base-xl: clamp(1.125rem, 1.0211rem + 0.5195vw, 1.375rem);
47
+ --nyc-sys-size-text-fluid-xl-4xl: clamp(1.375rem, 1.1153rem + 1.2987vw, 2rem);
48
+ --nyc-sys-size-text-fluid-2xl-4xl: clamp(1.5rem, 1.2922rem + 1.039vw, 2rem);
49
+ --nyc-sys-size-text-fluid-4xl-6xl: clamp(2rem, 1.3766rem + 3.1169vw, 3.5rem);
50
+ --nyc-sys-size-text-fluid-3xl-5xl: clamp(1.75rem, 1.4383rem + 1.5584vw, 2.5rem);
51
+ --nyc-sys-size-text-fluid-5xl-7xl: clamp(2.5rem, 1.8766rem + 3.1169vw, 4rem);
52
+ --nyc-ref-type-family-clash: 'Clash Grotesk', sans-serif;
53
+ --nyc-ref-type-family-noto: 'Noto Sans', sans-serif;
54
+ --nyc-ref-gradient-sidewalk-gray-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-sidewalk-gray-bg) 0%, #FFF 100%);
55
+ --nyc-ref-gradient-quahog-purple-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-quahog-purple-bg) 0%, #FFF 100%);
56
+ --nyc-ref-gradient-navy-blue-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-navy-blue-bg) 0%, #FFF 100%);
57
+ --nyc-ref-gradient-sky-blue-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-sky-blue-bg) 0%, #FFF 100%);
58
+ --nyc-ref-gradient-bright-blue-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-bright-blue-bg) 0%, #FFF 100%);
59
+ --nyc-ref-gradient-liberty-green-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-liberty-green-bg) 0%, #FFF 100%);
60
+ --nyc-ref-gradient-forest-green-white: linear-gradient(180deg, var(--nyc-cmp-header-subproperty-forest-green-bg) 0%, #FFF 100%);
61
+ --nyc-ref-gradient-green-100-white: linear-gradient(180deg, var(--nyc-ref-color-green-100) 0%, #FFF 100%);
62
+ --nyc-ref-gradient-yellow-100-white: linear-gradient(180deg, var(--nyc-ref-color-yellow-100) 0%, #FFF 100%);
63
+ --nyc-ref-gradient-red-100-white: linear-gradient(180deg, var(--nyc-ref-color-red-100) 0%, #FFF 100%);
64
+ --nyc-ref-gradient-blue-orange: linear-gradient(180deg, #E2F3FF 0%, #FFECD9 100%);
65
+ --nyc-ref-gradient-rainbow: conic-gradient(from 175deg at 50% 50%, #6C95FF 17.627713680267334deg, #FFA149 101.25deg, #BB64FF 226.87499284744263deg, #70BAFF 325.17677307128906deg);
66
+ --nyc-ref-gradient-purple: linear-gradient(179deg, #131627 15.45%, #4B184D 87.84%);
67
+ --nyc-ref-gradient-orange-blue: linear-gradient(180deg, #FFECD9 0%, #E2F3FF 100%);
68
+ --nyc-ref-shadow-20: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);
69
+ --nyc-ref-shadow-10: 0px 4px 12px 0px rgba(0, 0, 0, 0.20);
70
+ --nyc-ref-color-yellow-100: #fff9e5ff;
71
+ --nyc-ref-color-yellow-90: #ffeeb2ff;
72
+ --nyc-ref-color-yellow-70: #ffdd66ff;
73
+ --nyc-ref-color-yellow-50: #ffc700ff;
74
+ --nyc-ref-color-yellow-30: #997700ff;
75
+ --nyc-ref-color-yellow-10: #4c3c00ff;
76
+ --nyc-ref-color-red-100: #fde7e8ff;
77
+ --nyc-ref-color-red-90: #f9b8bbff;
78
+ --nyc-ref-color-red-70: #f47178ff;
79
+ --nyc-ref-color-red-50: #ec131eff;
80
+ --nyc-ref-color-red-40: #b30f17ff;
81
+ --nyc-ref-color-red-30: #8e0b12ff;
82
+ --nyc-ref-color-red-10: #470609ff;
83
+ --nyc-ref-color-green-100: #e6f8e6ff;
84
+ --nyc-ref-color-green-90: #b3e9b3ff;
85
+ --nyc-ref-color-green-70: #66d468ff;
86
+ --nyc-ref-color-green-50: #00b703ff;
87
+ --nyc-ref-color-green-30: #006e02ff;
88
+ --nyc-ref-color-green-10: #003701ff;
89
+ --nyc-ref-color-purple-50: #c67dffff;
90
+ --nyc-ref-color-purple-40: #7f00d6ff;
91
+ --nyc-ref-color-purple-30: #58376eff;
92
+ --nyc-ref-color-purple-20: #4c3959ff;
93
+ --nyc-ref-color-purple-10: #131627ff;
94
+ --nyc-ref-color-orange-70-25: #fba95b40;
95
+ --nyc-ref-color-orange-90: #ffe0c2ff;
96
+ --nyc-ref-color-orange-80: #fcc788ff;
97
+ --nyc-ref-color-orange-70: #fba95bff;
98
+ --nyc-ref-color-orange-60: #f98d26ff;
99
+ --nyc-ref-color-orange-50: #e57000ff;
100
+ --nyc-ref-color-blue-100: #e7f0faff;
101
+ --nyc-ref-color-blue-90: #d1e9ffff;
102
+ --nyc-ref-color-blue-80: #b5dbffff;
103
+ --nyc-ref-color-blue-70: #70baffff;
104
+ --nyc-ref-color-blue-60: #3185fcff;
105
+ --nyc-ref-color-blue-50: #004fffff;
106
+ --nyc-ref-color-blue-40: #103fefff;
107
+ --nyc-ref-color-blue-30: #051adbff;
108
+ --nyc-ref-color-blue-20: #0008a0ff;
109
+ --nyc-ref-color-blue-10: #050560ff;
110
+ --nyc-ref-color-gray-10-25: #22222240;
111
+ --nyc-ref-color-gray-white-25: #ffffff40;
112
+ --nyc-ref-color-gray-white-80: #ffffffcc;
113
+ --nyc-ref-color-gray-black-90: #000000e6;
114
+ --nyc-ref-color-gray-10-15: #22222226;
115
+ --nyc-ref-color-gray-white-15: #ffffff26;
116
+ --nyc-ref-color-gray-10-60: #22222299;
117
+ --nyc-ref-color-gray-white-75: #ffffffbf;
118
+ --nyc-ref-color-gray-white: #ffffffff;
119
+ --nyc-ref-color-gray-black: #000000ff;
120
+ --nyc-ref-color-gray-90: #eeeeeeff;
121
+ --nyc-ref-color-gray-80: #ddddddff;
122
+ --nyc-ref-color-gray-70: #ccccccff;
123
+ --nyc-ref-color-gray-60: #aaaaaaff;
124
+ --nyc-ref-color-gray-50: #949494ff;
125
+ --nyc-ref-color-gray-40: #777777ff;
126
+ --nyc-ref-color-gray-30: #555555ff;
127
+ --nyc-ref-color-gray-20: #333333ff;
128
+ --nyc-ref-color-gray-10: #222222ff;
129
+ --nyc-ref-length-1-5: 1.5px;
130
+ --nyc-ref-length-1440: 1440px;
131
+ --nyc-ref-length-1160: 1160px;
132
+ --nyc-ref-length-1090: 1090px;
133
+ --nyc-ref-length-750: 750px;
134
+ --nyc-ref-length-440: 440px;
135
+ --nyc-ref-length-360: 360px;
136
+ --nyc-ref-length-320: 320px;
137
+ --nyc-ref-length-240: 240px;
138
+ --nyc-ref-length-176: 176px;
139
+ --nyc-ref-length-112: 112px;
140
+ --nyc-ref-length-100: 100px;
141
+ --nyc-ref-length-96: 96px;
142
+ --nyc-ref-length-90: 90px;
143
+ --nyc-ref-length-80: 80px;
144
+ --nyc-ref-length-64: 64px;
145
+ --nyc-ref-length-56: 56px;
146
+ --nyc-ref-length-50: 50px;
147
+ --nyc-ref-length-48: 48px;
148
+ --nyc-ref-length-40: 40px;
149
+ --nyc-ref-length-36: 36px;
150
+ --nyc-ref-length-32: 32px;
151
+ --nyc-ref-length-28: 28px;
152
+ --nyc-ref-length-24: 24px;
153
+ --nyc-ref-length-22: 22px;
154
+ --nyc-ref-length-20: 20px;
155
+ --nyc-ref-length-18: 18px;
156
+ --nyc-ref-length-16: 16px;
157
+ --nyc-ref-length-14: 14px;
158
+ --nyc-ref-length-12: 12px;
159
+ --nyc-ref-length-10: 10px;
160
+ --nyc-ref-length-8: 8px;
161
+ --nyc-ref-length-4: 4px;
162
+ --nyc-ref-length-2: 2px;
163
+ --nyc-sys-radius-xl: var(--nyc-ref-length-32);
164
+ --nyc-sys-radius-sm: var(--nyc-ref-length-12);
165
+ --nyc-sys-radius-2xs: var(--nyc-ref-length-4);
166
+ --nyc-sys-radius-2xl: var(--nyc-ref-length-40);
167
+ --nyc-sys-radius-lg: var(--nyc-ref-length-24);
168
+ --nyc-sys-radius-base: var(--nyc-ref-length-16);
169
+ --nyc-sys-radius-xs: var(--nyc-ref-length-8);
170
+ --nyc-sys-font-family-heading: var(--nyc-ref-type-family-clash);
171
+ --nyc-sys-font-family-body: var(--nyc-ref-type-family-noto);
172
+ --nyc-sys-space-7xl: var(--nyc-ref-length-96);
173
+ --nyc-sys-space-4xl: var(--nyc-ref-length-56);
174
+ --nyc-sys-space-3xl: var(--nyc-ref-length-48);
175
+ --nyc-sys-space-2xs: var(--nyc-ref-length-4);
176
+ --nyc-sys-space-xl: var(--nyc-ref-length-32);
177
+ --nyc-sys-space-8xl: var(--nyc-ref-length-112);
178
+ --nyc-sys-space-6xl: var(--nyc-ref-length-80);
179
+ --nyc-sys-space-5xl: var(--nyc-ref-length-64);
180
+ --nyc-sys-space-2xl: var(--nyc-ref-length-40);
181
+ --nyc-sys-space-lg: var(--nyc-ref-length-24);
182
+ --nyc-sys-space-base: var(--nyc-ref-length-16);
183
+ --nyc-sys-space-sm: var(--nyc-ref-length-12);
184
+ --nyc-sys-space-xs: var(--nyc-ref-length-8);
185
+ --nyc-sys-gradient-text-fill: var(--nyc-ref-gradient-rainbow);
186
+ --nyc-sys-gradient-background: var(--nyc-ref-gradient-purple);
187
+ --nyc-sys-shadow-base: var(--nyc-ref-shadow-20);
188
+ --nyc-sys-shadow-low: var(--nyc-ref-shadow-10);
189
+ --nyc-sys-color-element-pressed-inverted: var(--nyc-ref-color-gray-10-25);
190
+ --nyc-sys-color-element-hover-inverted: var(--nyc-ref-color-gray-10-15);
191
+ --nyc-sys-color-progress-complete: var(--nyc-ref-color-gray-80);
192
+ --nyc-sys-color-progress-incomplete: var(--nyc-ref-color-gray-70);
193
+ --nyc-sys-color-link-hover: var(--nyc-ref-color-blue-70);
194
+ --nyc-sys-color-element-pressed: var(--nyc-ref-color-gray-white-25);
195
+ --nyc-sys-color-link-inverted: var(--nyc-ref-color-blue-30);
196
+ --nyc-sys-color-link-high-contrast: var(--nyc-ref-color-gray-white);
197
+ --nyc-sys-color-auxiliary-information: var(--nyc-ref-color-blue-80);
198
+ --nyc-sys-color-auxiliary-warning: var(--nyc-ref-color-orange-80);
199
+ --nyc-sys-color-auxiliary-error: var(--nyc-ref-color-red-70);
200
+ --nyc-sys-color-auxiliary-success: var(--nyc-ref-color-green-70);
201
+ --nyc-sys-color-subproperty-background: var(--nyc-ref-color-purple-10);
202
+ --nyc-sys-color-element-hover: var(--nyc-ref-color-gray-white-15);
203
+ --nyc-sys-color-link: var(--nyc-ref-color-blue-80);
204
+ --nyc-sys-color-link-visited: var(--nyc-ref-color-purple-50);
205
+ --nyc-sys-color-on-secondary-hover: var(--nyc-ref-color-blue-10);
206
+ --nyc-sys-color-on-inactive: var(--nyc-ref-color-gray-10);
207
+ --nyc-sys-color-inactive: var(--nyc-ref-color-gray-40);
208
+ --nyc-sys-color-border-focus-high: var(--nyc-ref-color-gray-black);
209
+ --nyc-sys-color-border-medium: var(--nyc-ref-color-gray-50);
210
+ --nyc-sys-color-border-high-inverted: var(--nyc-ref-color-gray-black);
211
+ --nyc-sys-color-border-focus: var(--nyc-ref-color-gray-white);
212
+ --nyc-sys-color-border-medium-low: var(--nyc-ref-color-gray-40);
213
+ --nyc-sys-color-border-high: var(--nyc-ref-color-gray-white);
214
+ --nyc-sys-color-border-medium-high: var(--nyc-ref-color-gray-80);
215
+ --nyc-sys-color-border-base: var(--nyc-ref-color-gray-30);
216
+ --nyc-sys-color-on-surface-high: var(--nyc-ref-color-gray-white);
217
+ --nyc-sys-color-on-surface-base: var(--nyc-ref-color-gray-white);
218
+ --nyc-sys-color-surface-emergency: var(--nyc-ref-color-red-40);
219
+ --nyc-sys-color-surface-info: var(--nyc-ref-color-blue-10);
220
+ --nyc-sys-color-surface-warning: var(--nyc-ref-color-yellow-10);
221
+ --nyc-sys-color-surface-error: var(--nyc-ref-color-red-10);
222
+ --nyc-sys-color-surface-success: var(--nyc-ref-color-green-10);
223
+ --nyc-sys-color-surface-input-highlight: var(--nyc-ref-color-blue-80);
224
+ --nyc-sys-color-surface-input: var(--nyc-ref-color-gray-white);
225
+ --nyc-sys-color-surface-high-overlay-white: var(--nyc-ref-color-gray-white-80);
226
+ --nyc-sys-color-surface-highlight: var(--nyc-ref-color-blue-20);
227
+ --nyc-sys-color-surface-high-overlay-black: var(--nyc-ref-color-gray-black-90);
228
+ --nyc-sys-color-surface-high: var(--nyc-ref-color-gray-white);
229
+ --nyc-sys-color-surface-low: var(--nyc-ref-color-gray-10);
230
+ --nyc-sys-color-surface-base: var(--nyc-ref-color-gray-black);
231
+ --nyc-sys-color-surface-inactive: var(--nyc-ref-color-gray-10-60);
232
+ --nyc-sys-color-on-disabled: var(--nyc-ref-color-gray-80);
233
+ --nyc-sys-color-disabled: var(--nyc-ref-color-gray-30);
234
+ --nyc-sys-color-on-secondary: var(--nyc-ref-color-gray-white);
235
+ --nyc-sys-color-secondary: var(--nyc-ref-color-purple-30);
236
+ --nyc-sys-color-on-primary: var(--nyc-ref-color-gray-white);
237
+ --nyc-sys-color-primary-hover: var(--nyc-ref-color-blue-30);
238
+ --nyc-sys-color-primary: var(--nyc-ref-color-blue-40);
239
+ --nyc-sys-color-text-input: var(--nyc-ref-color-gray-black);
240
+ --nyc-sys-color-text-type-ahead: var(--nyc-ref-color-gray-50);
241
+ --nyc-sys-color-text-base-inverse: var(--nyc-ref-color-gray-black);
242
+ --nyc-sys-color-text-secondary: var(--nyc-ref-color-gray-80);
243
+ --nyc-sys-color-text-base: var(--nyc-ref-color-gray-white);
244
+ --nyc-sys-color-background: var(--nyc-ref-color-purple-10);
245
+ --nyc-sys-color-base: var(--nyc-ref-color-gray-white);
246
+ --nyc-sys-size-border-base: var(--nyc-ref-length-2);
247
+ --nyc-sys-size-border-sm: var(--nyc-ref-length-1-5);
248
+ --nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
249
+ --nyc-sys-size-text-8xl: var(--nyc-ref-length-96);
250
+ --nyc-sys-size-text-xl: var(--nyc-ref-length-22);
251
+ --nyc-sys-size-text-xs: var(--nyc-ref-length-14);
252
+ --nyc-sys-size-text-5xl: var(--nyc-ref-length-40);
253
+ --nyc-sys-size-text-3xl: var(--nyc-ref-length-28);
254
+ --nyc-sys-size-text-2xl: var(--nyc-ref-length-24);
255
+ --nyc-sys-size-text-lg: var(--nyc-ref-length-20);
256
+ --nyc-sys-size-text-base: var(--nyc-ref-length-18);
257
+ --nyc-sys-size-text-7xl: var(--nyc-ref-length-64);
258
+ --nyc-sys-size-text-6xl: var(--nyc-ref-length-56);
259
+ --nyc-sys-size-text-4xl: var(--nyc-ref-length-32);
260
+ --nyc-sys-size-text-sm: var(--nyc-ref-length-16);
261
+ --nyc-sys-size-width-line-length: var(--nyc-ref-length-750);
262
+ --nyc-sys-size-width-surface-lg: var(--nyc-ref-length-440);
263
+ --nyc-sys-size-width-surface-base: var(--nyc-ref-length-360);
264
+ --nyc-sys-size-width-surface-sm: var(--nyc-ref-length-240);
265
+ --nyc-sys-size-width-page-max: var(--nyc-ref-length-1090);
266
+ --nyc-sys-size-width-page-min: var(--nyc-ref-length-320);
267
+ --nyc-sys-color-border-selected: var(--nyc-sys-color-primary);
268
+ }
package/dist/dark.min.css ADDED
@@ -0,0 +1 @@
1
+ :root[data-theme=dark]{--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-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-purple);--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-10-25);--nyc-sys-color-element-hover-inverted:var(--nyc-ref-color-gray-10-15);--nyc-sys-color-progress-complete:var(--nyc-ref-color-gray-80);--nyc-sys-color-progress-incomplete:var(--nyc-ref-color-gray-70);--nyc-sys-color-link-hover:var(--nyc-ref-color-blue-70);--nyc-sys-color-element-pressed:var(--nyc-ref-color-gray-white-25);--nyc-sys-color-link-inverted:var(--nyc-ref-color-blue-30);--nyc-sys-color-link-high-contrast:var(--nyc-ref-color-gray-white);--nyc-sys-color-auxiliary-information:var(--nyc-ref-color-blue-80);--nyc-sys-color-auxiliary-warning:var(--nyc-ref-color-orange-80);--nyc-sys-color-auxiliary-error:var(--nyc-ref-color-red-70);--nyc-sys-color-auxiliary-success:var(--nyc-ref-color-green-70);--nyc-sys-color-subproperty-background:var(--nyc-ref-color-purple-10);--nyc-sys-color-element-hover:var(--nyc-ref-color-gray-white-15);--nyc-sys-color-link:var(--nyc-ref-color-blue-80);--nyc-sys-color-link-visited:var(--nyc-ref-color-purple-50);--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-40);--nyc-sys-color-border-focus-high:var(--nyc-ref-color-gray-black);--nyc-sys-color-border-medium:var(--nyc-ref-color-gray-50);--nyc-sys-color-border-high-inverted:var(--nyc-ref-color-gray-black);--nyc-sys-color-border-focus:var(--nyc-ref-color-gray-white);--nyc-sys-color-border-medium-low:var(--nyc-ref-color-gray-40);--nyc-sys-color-border-high:var(--nyc-ref-color-gray-white);--nyc-sys-color-border-medium-high:var(--nyc-ref-color-gray-80);--nyc-sys-color-border-base:var(--nyc-ref-color-gray-30);--nyc-sys-color-on-surface-high:var(--nyc-ref-color-gray-white);--nyc-sys-color-on-surface-base:var(--nyc-ref-color-gray-white);--nyc-sys-color-surface-emergency:var(--nyc-ref-color-red-40);--nyc-sys-color-surface-info:var(--nyc-ref-color-blue-10);--nyc-sys-color-surface-warning:var(--nyc-ref-color-yellow-10);--nyc-sys-color-surface-error:var(--nyc-ref-color-red-10);--nyc-sys-color-surface-success:var(--nyc-ref-color-green-10);--nyc-sys-color-surface-input-highlight:var(--nyc-ref-color-blue-80);--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-20);--nyc-sys-color-surface-high-overlay-black:var(--nyc-ref-color-gray-black-90);--nyc-sys-color-surface-high:var(--nyc-ref-color-gray-white);--nyc-sys-color-surface-low:var(--nyc-ref-color-gray-10);--nyc-sys-color-surface-base:var(--nyc-ref-color-gray-black);--nyc-sys-color-surface-inactive:var(--nyc-ref-color-gray-10-60);--nyc-sys-color-on-disabled:var(--nyc-ref-color-gray-80);--nyc-sys-color-disabled:var(--nyc-ref-color-gray-30);--nyc-sys-color-on-secondary:var(--nyc-ref-color-gray-white);--nyc-sys-color-secondary:var(--nyc-ref-color-purple-30);--nyc-sys-color-on-primary:var(--nyc-ref-color-gray-white);--nyc-sys-color-primary-hover:var(--nyc-ref-color-blue-30);--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-black);--nyc-sys-color-text-secondary:var(--nyc-ref-color-gray-80);--nyc-sys-color-text-base:var(--nyc-ref-color-gray-white);--nyc-sys-color-background:var(--nyc-ref-color-purple-10);--nyc-sys-color-base:var(--nyc-ref-color-gray-white);--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-sys-color-border-selected:var(--nyc-sys-color-primary)}