@nycds/variables 0.2.2 → 0.3.0-prerelease.1
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 +18 -0
- package/README.org +74 -217
- package/dist/dark.css +12 -8
- package/dist/dark.min.css +1 -1
- package/dist/variables.css +31 -9
- package/dist/variables.min.css +1 -1
- package/package.json +17 -2
- package/postcss.config.js +0 -1
- package/scripts/build.js +0 -72
- package/scripts/make-theme-files.js +0 -144
- package/tokens/dist/nyc.cmp.tokens.json +0 -583
- package/tokens/dist/nyc.dark.tokens.json +0 -755
- package/tokens/dist/nyc.light.tokens.json +0 -755
- package/tokens/dist/nyc.ref.tokens.json +0 -533
- package/tokens/src/nyc.tokens.json +0 -3415
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @nycds/variables
|
|
2
2
|
|
|
3
|
+
## 0.3.0-prerelease.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 76844b4: Feat: Sync DS tokens
|
|
8
|
+
|
|
9
|
+
## 0.3.0-prerelease.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 6052344: Add export maps to all packages
|
|
14
|
+
- ddd68c2: Feat: Add TS types export
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- bb212bc: Add sm/md/lg shadow vars
|
|
19
|
+
- aa61601: Limit published files to dist, src and CHANGELOG.md
|
|
20
|
+
|
|
3
21
|
## 0.2.2
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/README.org
CHANGED
|
@@ -1,247 +1,104 @@
|
|
|
1
1
|
#+TITLE: Variables
|
|
2
2
|
|
|
3
|
-
This
|
|
4
|
-
convention influenced by Google's
|
|
5
|
-
|
|
6
|
-
Component.
|
|
3
|
+
This package provides the design system's design tokens as [[https://developer.mozilla.org/en-US/docs/Web/CSS/--*][CSS custom
|
|
4
|
+
properties]], adopting a naming convention influenced by Google's
|
|
5
|
+
[[https://m3.material.io/foundations/design-tokens/how-to-read-tokens#98e82e98-5ecd-4c5d-a03a-7d4cc5d55c20][Material design system tokens]]. The tokens are divided into a 3-tier
|
|
6
|
+
structure: Reference, System, and Component.
|
|
7
7
|
|
|
8
8
|
#+TOC: headlines 2
|
|
9
9
|
|
|
10
|
-
|
|
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);
|
|
10
|
+
* Stylesheets
|
|
70
11
|
|
|
71
|
-
|
|
72
|
-
|
|
12
|
+
| Import path | File | Contents |
|
|
13
|
+
|--------------------------------+----------------------+---------------------------------------------------------------|
|
|
14
|
+
| =@nycds/variables= or =/style= | =dist/variables.css= | Reference, light theme System and Component tokens on =:root= |
|
|
15
|
+
| =@nycds/variables/dark= | =dist/dark.css= | Dark theme tokens on =:root[data-theme="dark"]= |
|
|
73
16
|
|
|
74
|
-
|
|
75
|
-
|
|
17
|
+
Both have a minified version (=/style.min=, =/dark.min=). Every
|
|
18
|
+
=@nycds/core= stylesheet already includes =variables.css=. =dark.css=
|
|
19
|
+
isn't included anywhere; load it yourself and set =data-theme="dark"=
|
|
20
|
+
on =<html>= to use it.
|
|
76
21
|
|
|
77
|
-
|
|
78
|
-
|
|
22
|
+
To override a token, declare it on =:root= in a stylesheet that loads
|
|
23
|
+
after this one:
|
|
79
24
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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);
|
|
25
|
+
#+begin_src css
|
|
26
|
+
:root {
|
|
27
|
+
--nyc-sys-color-link: rebeccapurple;
|
|
28
|
+
}
|
|
162
29
|
#+end_src
|
|
163
30
|
|
|
164
|
-
|
|
31
|
+
* Tiers
|
|
165
32
|
|
|
166
|
-
|
|
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
|
|
33
|
+
** Reference
|
|
172
34
|
|
|
173
|
-
|
|
35
|
+
Reference tokens hold raw values: the value you would give a CSS
|
|
36
|
+
property when not using tokens. Use them to define System tokens, not
|
|
37
|
+
directly in components.
|
|
174
38
|
|
|
175
|
-
|
|
176
|
-
|
|
39
|
+
| Prefix | Pattern | Example |
|
|
40
|
+
|---------+---------------------------------------+---------------------------|
|
|
41
|
+
| nyc-ref | --{prefix}-{property}{-label}{-scale} | =--nyc-ref-color-blue-40= |
|
|
177
42
|
|
|
178
|
-
|
|
179
|
-
|
|
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);
|
|
43
|
+
Categories: =length=, =color= (=gray=, =blue=, =orange=, =purple=,
|
|
44
|
+
=green=, =red=, =yellow=), =shadow=, =gradient= and =type=.
|
|
185
45
|
|
|
186
|
-
|
|
46
|
+
** System
|
|
187
47
|
|
|
188
|
-
|
|
48
|
+
System tokens give Reference tokens a semantic name, such as a
|
|
49
|
+
=primary= color or a =base= space. They are the tokens to use when
|
|
50
|
+
styling with the design system, and the tier that the dark theme
|
|
51
|
+
mainly redefines.
|
|
189
52
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
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
|
|
53
|
+
| Prefix | Pattern | Example |
|
|
54
|
+
|---------+-----------------------------------------+---------------------------|
|
|
55
|
+
| nyc-sys | --{prefix}-{property}-{label}{-variant} | =--nyc-sys-color-primary= |
|
|
196
56
|
|
|
197
|
-
|
|
57
|
+
Categories: =size= (=width=, =text=, =line-height=, =border=), =color=,
|
|
58
|
+
=shadow=, =gradient=, =space=, =font= and =radius=.
|
|
198
59
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
60
|
+
*Fluid tokens*, like =--nyc-sys-space-fluid-base-lg= or
|
|
61
|
+
=--nyc-sys-size-text-fluid-base-xl=, scale between two steps of their
|
|
62
|
+
scale as the viewport grows from =--nyc-sys-size-width-page-min=
|
|
63
|
+
(320px) to =--nyc-sys-size-width-page-max= (1090px). They compile to
|
|
64
|
+
=clamp()= values.
|
|
203
65
|
|
|
204
|
-
** Component
|
|
66
|
+
** Component
|
|
205
67
|
|
|
206
|
-
Component
|
|
207
|
-
|
|
68
|
+
Component tokens hold the values a single component uses, and
|
|
69
|
+
reference System tokens. Override them to restyle one component
|
|
70
|
+
without affecting others.
|
|
208
71
|
|
|
209
|
-
| Prefix | Pattern |
|
|
210
|
-
|
|
211
|
-
| nyc-cmp | --{prefix}-{component}-{property}{-state} |
|
|
72
|
+
| Prefix | Pattern | Example |
|
|
73
|
+
|---------+-------------------------------------------+--------------------------------|
|
|
74
|
+
| nyc-cmp | --{prefix}-{component}-{property}{-state} | =--nyc-cmp-button-font-weight= |
|
|
212
75
|
|
|
76
|
+
Components with tokens include =accordion=, =button=, =card=,
|
|
77
|
+
=center=, =footer=, =form=, =header=, =heading=, =hero=, =modal=,
|
|
78
|
+
=navigation=, =region= and =table=.
|
|
213
79
|
|
|
214
|
-
|
|
215
|
-
--nyc-cmp-card-background-hover: var(--nyc-sys-color-primary-light, transparent);
|
|
216
|
-
#+end_src
|
|
80
|
+
* Building the tokens
|
|
217
81
|
|
|
218
|
-
|
|
82
|
+
The tokens are not written by hand. =tokens/src/nyc.tokens.json= is
|
|
83
|
+
exported from the Figma design file, and =pnpm build:css= (run as part
|
|
84
|
+
of =prepare=) compiles it in two steps:
|
|
219
85
|
|
|
220
|
-
|
|
221
|
-
|
|
86
|
+
1. =scripts/make-theme-files.js= splits the export into one file per
|
|
87
|
+
tier and theme in =tokens/dist/= (=nyc.ref=, =nyc.light=, =nyc.dark=
|
|
88
|
+
and =nyc.cmp=), removes the Figma mode names from token
|
|
89
|
+
references, and converts fluid =min=/=max= pairs into =clamp()=
|
|
90
|
+
values.
|
|
91
|
+
2. =scripts/build.js= runs [[https://amzn.github.io/style-dictionary/][Style Dictionary]] to write
|
|
92
|
+
=dist/variables.css= and =dist/dark.css=. Tokens keep their
|
|
93
|
+
references, e.g. =--nyc-sys-color-primary:
|
|
94
|
+
var(--nyc-ref-color-blue-40)=.
|
|
222
95
|
|
|
223
|
-
|
|
224
|
-
|
|
96
|
+
To change a token, update it in Figma and re-export
|
|
97
|
+
=nyc.tokens.json=, or edit that file, then rebuild. Don't edit the
|
|
98
|
+
files in =dist/= or =tokens/dist/=.
|
|
225
99
|
|
|
226
|
-
|
|
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
|
-
}
|
|
100
|
+
* Custom selectors
|
|
244
101
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
102
|
+
The =:--heading= [[https://drafts.csswg.org/css-extensions/#custom-selectors][custom selector]] (=h1= to =h6=) used across the
|
|
103
|
+
components is defined in =@nycds/utilities/src/css/custom-selectors.css=,
|
|
104
|
+
not in this package.
|
package/dist/dark.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 05 Nov 2026 20:16:27 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root[data-theme="dark"] {
|
|
@@ -65,8 +65,9 @@
|
|
|
65
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
66
|
--nyc-ref-gradient-purple: linear-gradient(179deg, #131627 15.45%, #4B184D 87.84%);
|
|
67
67
|
--nyc-ref-gradient-orange-blue: linear-gradient(180deg, #FFECD9 0%, #E2F3FF 100%);
|
|
68
|
-
--nyc-ref-shadow-
|
|
69
|
-
--nyc-ref-shadow-
|
|
68
|
+
--nyc-ref-shadow-30: 0 0 16px 1px rgba(0, 0, 0, 0.2);
|
|
69
|
+
--nyc-ref-shadow-20: 0 0 12px 1px rgba(0, 0, 0, 0.18);
|
|
70
|
+
--nyc-ref-shadow-10: 0 0 8px 1px rgba(0, 0, 0, 0.15);
|
|
70
71
|
--nyc-ref-color-yellow-100: #fff9e5ff;
|
|
71
72
|
--nyc-ref-color-yellow-90: #ffeeb2ff;
|
|
72
73
|
--nyc-ref-color-yellow-70: #ffdd66ff;
|
|
@@ -184,14 +185,17 @@
|
|
|
184
185
|
--nyc-sys-space-xs: var(--nyc-ref-length-8);
|
|
185
186
|
--nyc-sys-gradient-text-fill: var(--nyc-ref-gradient-rainbow);
|
|
186
187
|
--nyc-sys-gradient-background: var(--nyc-ref-gradient-purple);
|
|
188
|
+
--nyc-sys-shadow-lg: var(--nyc-ref-shadow-30);
|
|
189
|
+
--nyc-sys-shadow-md: var(--nyc-ref-shadow-20);
|
|
190
|
+
--nyc-sys-shadow-sm: var(--nyc-ref-shadow-10);
|
|
187
191
|
--nyc-sys-shadow-base: var(--nyc-ref-shadow-20);
|
|
188
192
|
--nyc-sys-shadow-low: var(--nyc-ref-shadow-10);
|
|
189
|
-
--nyc-sys-color-element-pressed
|
|
190
|
-
--nyc-sys-color-element-hover
|
|
193
|
+
--nyc-sys-color-on-dark-element-pressed: var(--nyc-ref-color-gray-10-25);
|
|
194
|
+
--nyc-sys-color-on-dark-element-hover: var(--nyc-ref-color-gray-10-15);
|
|
191
195
|
--nyc-sys-color-progress-complete: var(--nyc-ref-color-gray-80);
|
|
192
196
|
--nyc-sys-color-progress-incomplete: var(--nyc-ref-color-gray-70);
|
|
193
197
|
--nyc-sys-color-link-hover: var(--nyc-ref-color-blue-70);
|
|
194
|
-
--nyc-sys-color-element-pressed: var(--nyc-ref-color-gray-white-25);
|
|
198
|
+
--nyc-sys-color-on-light-element-pressed: var(--nyc-ref-color-gray-white-25);
|
|
195
199
|
--nyc-sys-color-link-inverted: var(--nyc-ref-color-blue-30);
|
|
196
200
|
--nyc-sys-color-link-high-contrast: var(--nyc-ref-color-gray-white);
|
|
197
201
|
--nyc-sys-color-auxiliary-information: var(--nyc-ref-color-blue-80);
|
|
@@ -199,7 +203,7 @@
|
|
|
199
203
|
--nyc-sys-color-auxiliary-error: var(--nyc-ref-color-red-70);
|
|
200
204
|
--nyc-sys-color-auxiliary-success: var(--nyc-ref-color-green-70);
|
|
201
205
|
--nyc-sys-color-subproperty-background: var(--nyc-ref-color-purple-10);
|
|
202
|
-
--nyc-sys-color-element-hover: var(--nyc-ref-color-gray-white-15);
|
|
206
|
+
--nyc-sys-color-on-light-element-hover: var(--nyc-ref-color-gray-white-15);
|
|
203
207
|
--nyc-sys-color-link: var(--nyc-ref-color-blue-80);
|
|
204
208
|
--nyc-sys-color-link-visited: var(--nyc-ref-color-purple-50);
|
|
205
209
|
--nyc-sys-color-on-secondary-hover: var(--nyc-ref-color-blue-10);
|
|
@@ -243,9 +247,9 @@
|
|
|
243
247
|
--nyc-sys-color-text-base: var(--nyc-ref-color-gray-white);
|
|
244
248
|
--nyc-sys-color-background: var(--nyc-ref-color-purple-10);
|
|
245
249
|
--nyc-sys-color-base: var(--nyc-ref-color-gray-white);
|
|
250
|
+
--nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
|
|
246
251
|
--nyc-sys-size-border-base: var(--nyc-ref-length-2);
|
|
247
252
|
--nyc-sys-size-border-sm: var(--nyc-ref-length-1-5);
|
|
248
|
-
--nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
|
|
249
253
|
--nyc-sys-size-text-8xl: var(--nyc-ref-length-96);
|
|
250
254
|
--nyc-sys-size-text-xl: var(--nyc-ref-length-22);
|
|
251
255
|
--nyc-sys-size-text-xs: var(--nyc-ref-length-14);
|
package/dist/dark.min.css
CHANGED
|
@@ -1 +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)}
|
|
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-30:0 0 16px 1px rgba(0,0,0,.2);--nyc-ref-shadow-20:0 0 12px 1px rgba(0,0,0,.18);--nyc-ref-shadow-10:0 0 8px 1px rgba(0,0,0,.15);--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-lg:var(--nyc-ref-shadow-30);--nyc-sys-shadow-md:var(--nyc-ref-shadow-20);--nyc-sys-shadow-sm:var(--nyc-ref-shadow-10);--nyc-sys-shadow-base:var(--nyc-ref-shadow-20);--nyc-sys-shadow-low:var(--nyc-ref-shadow-10);--nyc-sys-color-on-dark-element-pressed:var(--nyc-ref-color-gray-10-25);--nyc-sys-color-on-dark-element-hover: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-on-light-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-on-light-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-line-height-body:var(--nyc-ref-length-24);--nyc-sys-size-border-base:var(--nyc-ref-length-2);--nyc-sys-size-border-sm:var(--nyc-ref-length-1-5);--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)}
|
package/dist/variables.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 05 Nov 2026 20:16:27 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -82,8 +82,9 @@
|
|
|
82
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
83
|
--nyc-ref-gradient-purple: linear-gradient(179deg, #131627 15.45%, #4B184D 87.84%);
|
|
84
84
|
--nyc-ref-gradient-orange-blue: linear-gradient(180deg, #FFECD9 0%, #E2F3FF 100%);
|
|
85
|
-
--nyc-ref-shadow-
|
|
86
|
-
--nyc-ref-shadow-
|
|
85
|
+
--nyc-ref-shadow-30: 0 0 16px 1px rgba(0, 0, 0, 0.2);
|
|
86
|
+
--nyc-ref-shadow-20: 0 0 12px 1px rgba(0, 0, 0, 0.18);
|
|
87
|
+
--nyc-ref-shadow-10: 0 0 8px 1px rgba(0, 0, 0, 0.15);
|
|
87
88
|
--nyc-ref-color-yellow-100: #fff9e5ff;
|
|
88
89
|
--nyc-ref-color-yellow-90: #ffeeb2ff;
|
|
89
90
|
--nyc-ref-color-yellow-70: #ffdd66ff;
|
|
@@ -194,6 +195,8 @@
|
|
|
194
195
|
--nyc-cmp-modal-header-padding-vertical: var(--nyc-sys-space-fluid-sm-base);
|
|
195
196
|
--nyc-cmp-modal-header-padding-horizontal: var(--nyc-sys-space-fluid-base-lg);
|
|
196
197
|
--nyc-cmp-table-header-background: var(--nyc-ref-color-gray-20);
|
|
198
|
+
--nyc-cmp-hero-padding-inline: var(--nyc-sys-space-fluid-base-5xl);
|
|
199
|
+
--nyc-cmp-hero-padding-block: var(--nyc-sys-space-fluid-lg-4xl);
|
|
197
200
|
--nyc-cmp-hero-padding-horizontal: var(--nyc-sys-space-fluid-base-5xl);
|
|
198
201
|
--nyc-cmp-hero-padding-vertical: var(--nyc-sys-space-fluid-xl-5xl);
|
|
199
202
|
--nyc-cmp-center-gutter: var(--nyc-sys-space-fluid-base-5xl);
|
|
@@ -243,14 +246,17 @@
|
|
|
243
246
|
--nyc-sys-space-xs: var(--nyc-ref-length-8);
|
|
244
247
|
--nyc-sys-gradient-text-fill: var(--nyc-ref-gradient-rainbow);
|
|
245
248
|
--nyc-sys-gradient-background: var(--nyc-ref-gradient-blue-orange);
|
|
249
|
+
--nyc-sys-shadow-lg: var(--nyc-ref-shadow-30);
|
|
250
|
+
--nyc-sys-shadow-md: var(--nyc-ref-shadow-20);
|
|
251
|
+
--nyc-sys-shadow-sm: var(--nyc-ref-shadow-10);
|
|
246
252
|
--nyc-sys-shadow-base: var(--nyc-ref-shadow-20);
|
|
247
253
|
--nyc-sys-shadow-low: var(--nyc-ref-shadow-10);
|
|
248
|
-
--nyc-sys-color-element-pressed
|
|
249
|
-
--nyc-sys-color-element-hover
|
|
254
|
+
--nyc-sys-color-on-dark-element-pressed: var(--nyc-ref-color-gray-white-25);
|
|
255
|
+
--nyc-sys-color-on-dark-element-hover: var(--nyc-ref-color-gray-white-15);
|
|
250
256
|
--nyc-sys-color-progress-complete: var(--nyc-ref-color-gray-10);
|
|
251
257
|
--nyc-sys-color-progress-incomplete: var(--nyc-ref-color-gray-40);
|
|
252
258
|
--nyc-sys-color-link-hover: var(--nyc-ref-color-blue-10);
|
|
253
|
-
--nyc-sys-color-element-pressed: var(--nyc-ref-color-gray-10-25);
|
|
259
|
+
--nyc-sys-color-on-light-element-pressed: var(--nyc-ref-color-gray-10-25);
|
|
254
260
|
--nyc-sys-color-link-inverted: var(--nyc-ref-color-blue-80);
|
|
255
261
|
--nyc-sys-color-link-high-contrast: var(--nyc-ref-color-gray-black);
|
|
256
262
|
--nyc-sys-color-auxiliary-information: var(--nyc-ref-color-blue-70);
|
|
@@ -258,7 +264,7 @@
|
|
|
258
264
|
--nyc-sys-color-auxiliary-error: var(--nyc-ref-color-red-50);
|
|
259
265
|
--nyc-sys-color-auxiliary-success: var(--nyc-ref-color-green-50);
|
|
260
266
|
--nyc-sys-color-subproperty-background: var(--nyc-ref-color-blue-100);
|
|
261
|
-
--nyc-sys-color-element-hover: var(--nyc-ref-color-gray-10-15);
|
|
267
|
+
--nyc-sys-color-on-light-element-hover: var(--nyc-ref-color-gray-10-15);
|
|
262
268
|
--nyc-sys-color-link: var(--nyc-ref-color-blue-30);
|
|
263
269
|
--nyc-sys-color-link-visited: var(--nyc-ref-color-purple-40);
|
|
264
270
|
--nyc-sys-color-on-secondary-hover: var(--nyc-ref-color-blue-10);
|
|
@@ -302,9 +308,9 @@
|
|
|
302
308
|
--nyc-sys-color-text-base: var(--nyc-ref-color-gray-black);
|
|
303
309
|
--nyc-sys-color-background: var(--nyc-ref-color-gray-white);
|
|
304
310
|
--nyc-sys-color-base: var(--nyc-ref-color-gray-black);
|
|
311
|
+
--nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
|
|
305
312
|
--nyc-sys-size-border-base: var(--nyc-ref-length-2);
|
|
306
313
|
--nyc-sys-size-border-sm: var(--nyc-ref-length-1-5);
|
|
307
|
-
--nyc-sys-size-line-height-body: var(--nyc-ref-length-24);
|
|
308
314
|
--nyc-sys-size-text-8xl: var(--nyc-ref-length-96);
|
|
309
315
|
--nyc-sys-size-text-xl: var(--nyc-ref-length-22);
|
|
310
316
|
--nyc-sys-size-text-xs: var(--nyc-ref-length-14);
|
|
@@ -323,10 +329,17 @@
|
|
|
323
329
|
--nyc-sys-size-width-surface-sm: var(--nyc-ref-length-240);
|
|
324
330
|
--nyc-sys-size-width-page-max: var(--nyc-ref-length-1090);
|
|
325
331
|
--nyc-sys-size-width-page-min: var(--nyc-ref-length-320);
|
|
332
|
+
--nyc-cmp-promo-body-font-size: var(--nyc-cmp-type-intro-size);
|
|
333
|
+
--nyc-cmp-promo-border-radius: var(--nyc-sys-radius-xl);
|
|
334
|
+
--nyc-cmp-promo-background: var(--nyc-sys-color-surface-base);
|
|
335
|
+
--nyc-cmp-promo-heading-font-family: var(--nyc-sys-font-family-heading);
|
|
336
|
+
--nyc-cmp-promo-heading-font-size: var(--nyc-cmp-heading-h2-size);
|
|
337
|
+
--nyc-cmp-promo-shadow: var(--nyc-sys-shadow-lg);
|
|
326
338
|
--nyc-cmp-form-border-color: var(--nyc-sys-color-border-medium);
|
|
327
339
|
--nyc-cmp-global-alert-border-color: var(--nyc-sys-color-border-high);
|
|
328
340
|
--nyc-cmp-global-alert-color: var(--nyc-sys-color-on-surface-high);
|
|
329
341
|
--nyc-cmp-global-alert-background: var(--nyc-sys-color-surface-emergency);
|
|
342
|
+
--nyc-cmp-modal-shadow: var(--nyc-sys-shadow-md);
|
|
330
343
|
--nyc-cmp-modal-border-radius: var(--nyc-sys-radius-lg);
|
|
331
344
|
--nyc-cmp-modal-background: var(--nyc-sys-color-surface-base);
|
|
332
345
|
--nyc-cmp-table-cell-border-color: var(--nyc-sys-color-border-base);
|
|
@@ -334,14 +347,23 @@
|
|
|
334
347
|
--nyc-cmp-table-cell-padding-inline: var(--nyc-sys-space-base);
|
|
335
348
|
--nyc-cmp-table-header-border-color: var(--nyc-sys-color-border-medium-high);
|
|
336
349
|
--nyc-cmp-table-header-color: var(--nyc-sys-color-text-base-inverse);
|
|
350
|
+
--nyc-cmp-hero-shadow: var(--nyc-sys-shadow-lg);
|
|
351
|
+
--nyc-cmp-hero-color: var(--nyc-sys-color-on-surface-base);
|
|
352
|
+
--nyc-cmp-hero-background: var(--nyc-sys-color-surface-base);
|
|
337
353
|
--nyc-cmp-hr-background-color: var(--nyc-sys-color-border-medium-high);
|
|
354
|
+
--nyc-cmp-accordion-shadow: var(--nyc-sys-shadow-sm);
|
|
338
355
|
--nyc-cmp-accordion-group-background: var(--nyc-sys-color-surface-base);
|
|
339
356
|
--nyc-cmp-accordion-heading-padding-block: var(--nyc-sys-space-base);
|
|
340
357
|
--nyc-cmp-accordion-heading-background: var(--nyc-sys-color-surface-base);
|
|
341
358
|
--nyc-cmp-navigation-primary-inactive: var(--nyc-sys-color-inactive);
|
|
342
359
|
--nyc-cmp-navigation-primary-active: var(--nyc-sys-color-on-surface-high);
|
|
360
|
+
--nyc-cmp-header-secondary-shadow: var(--nyc-sys-shadow-lg);
|
|
343
361
|
--nyc-cmp-header-padding-block: var(--nyc-sys-space-sm);
|
|
344
362
|
--nyc-cmp-header-padding-inline: var(--nyc-sys-space-base);
|
|
363
|
+
--nyc-cmp-button-border-color-hover: var(--nyc-sys-color-primary-hover);
|
|
364
|
+
--nyc-cmp-button-border-color: var(--nyc-sys-color-primary);
|
|
365
|
+
--nyc-cmp-button-background-hover: var(--nyc-sys-color-primary-hover);
|
|
366
|
+
--nyc-cmp-button-background: var(--nyc-sys-color-primary);
|
|
345
367
|
--nyc-cmp-button-outline-color: var(--nyc-sys-color-border-high);
|
|
346
368
|
--nyc-cmp-button-gap: var(--nyc-sys-space-xs);
|
|
347
369
|
--nyc-cmp-button-border-radius: var(--nyc-sys-radius-2xl);
|
|
@@ -353,7 +375,7 @@
|
|
|
353
375
|
--nyc-cmp-card-width-base: var(--nyc-sys-size-width-surface-base);
|
|
354
376
|
--nyc-cmp-card-padding-inline: var(--nyc-sys-space-base);
|
|
355
377
|
--nyc-cmp-card-body-size: var(--nyc-sys-size-text-base);
|
|
356
|
-
--nyc-cmp-card-shadow: var(--nyc-sys-shadow-
|
|
378
|
+
--nyc-cmp-card-shadow: var(--nyc-sys-shadow-sm);
|
|
357
379
|
--nyc-cmp-card-border-width: var(--nyc-sys-size-border-base);
|
|
358
380
|
--nyc-cmp-card-border-radius-hover: var(--nyc-sys-radius-base);
|
|
359
381
|
--nyc-cmp-card-border-color: var(--nyc-sys-color-border-base);
|