@massds/mds-tokens 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +7 -6
  2. package/dist/index.css +75 -68
  3. package/dist/primitives.css +34 -34
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -48,7 +48,7 @@ The `test-page/` directory is only for local validation and is not published to
48
48
 
49
49
  ## Development
50
50
 
51
- Install dependencies, lint the source files, and then build the distributable files from this package directory:
51
+ Install dependencies from the repository root, then run style package commands from this package directory or with npm workspaces:
52
52
 
53
53
  ```bash
54
54
  npm install
@@ -80,11 +80,12 @@ Tokens release flow:
80
80
 
81
81
  1. Create a release branch from `main`, based on [semantic versioning](https://semver.org/), for example `release/tokens-1.0.0`
82
82
  2. Update `packages/tokens/package.json` to the release version
83
- 3. Run `npm run changelog:release -- <version> <date>` from `packages/tokens`, or omit arguments to use the version from `package.json` and today’s date
84
- 4. Merge the release branch into `main` through a pull request
85
- 5. In the GitHub UI, create the release tag for the merged release commit using the format `tokens-v*`, for example `tokens-v1.0.0`
86
- 6. In the GitHub Release for that tag, copy the relevant release notes from `packages/tokens/CHANGELOG.md`
87
- 7. Creating the tag in GitHub triggers `.github/workflows/publish-tokens.yml` to publish the package
83
+ 3. Run `npm i & npm run build` and commit changes
84
+ 4. Run `npm run changelog:release -- <version> <date>` from `packages/tokens`, or omit arguments to use the version from `package.json` and today’s date
85
+ 5. Merge the release branch into `main` through a pull request
86
+ 6. In the GitHub UI, create the release tag for the merged release commit using the format `tokens-v*`, for example `tokens-v1.0.0`
87
+ 7. In the GitHub Release for that tag, copy the relevant release notes from `packages/tokens/CHANGELOG.md`
88
+ 8. Creating the tag in GitHub triggers `.github/workflows/publish-tokens.yml` to publish the package
88
89
 
89
90
  - Stable releases use tags such as `tokens-v1.0.0` and publish to the npm `latest` dist-tag.
90
91
  - Prereleases use tags such as `tokens-v1.1.0-beta.1` and publish to the npm `beta` dist-tag.
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Semantic tokens
2
+ * Semantic tokens
3
3
  * Use these in your projects
4
4
  *
5
5
  */
@@ -12,8 +12,9 @@
12
12
  */
13
13
 
14
14
  :root {
15
- --mds-background-transparent: var(--mds-color-utility-base-white-transparent);
16
- --mds-background-surface-default: #fdfdfd;
15
+ --mds-background-base-transparent: var(--mds-color-utility-base-white-transparent);
16
+ --mds-background-base-overlay: var(--mds-color-utility-base-black-transparent);
17
+ --mds-background-surface-default: var(--mds-color-brand-surface-1000);
17
18
  --mds-background-section-brand-neutral-lowest: var(--mds-color-brand-gray-100);
18
19
  --mds-background-section-brand-neutral-low: var(--mds-color-brand-gray-300);
19
20
  --mds-background-section-brand-neutral-mid: var(--mds-color-brand-gray-800);
@@ -41,7 +42,10 @@
41
42
  --mds-background-section-utility-success-lowest: var(--mds-color-utility-success-green-100);
42
43
  --mds-background-section-utility-success-mid: var(--mds-color-utility-success-green-600);
43
44
  --mds-background-section-utility-success-highest: var(--mds-color-utility-success-green-1300);
44
-
45
+ --mds-background-section-utility-static-white: var(--mds-color-utility-base-white);
46
+ --mds-background-section-utility-static-black: var(--mds-color-utility-base-black);
47
+ --mds-background-section-utility-inverse: var(--mds-color-utility-base-white);
48
+
45
49
 
46
50
  /* Adaptive/Interactive state colors */
47
51
  --mds-background-adaptive-brand-neutral-lowest: var(--mds-color-brand-gray-100);
@@ -86,7 +90,9 @@
86
90
  --mds-background-adaptive-utility-success-mid: var(--mds-color-utility-success-green-600);
87
91
  --mds-background-adaptive-utility-success-high: var(--mds-color-utility-success-green-900);
88
92
  --mds-background-adaptive-utility-success-highest: var(--mds-color-utility-success-green-1300);
89
- --mds-background-overlay: #00000099;
93
+ --mds-background-adaptive-utility-static-white: var(--mds-color-utility-base-white);
94
+ --mds-background-adaptive-utility-static-black: var(--mds-color-utility-base-black);
95
+ --mds-background-adaptive-utility-inverse: var(--mds-color-utility-base-white);
90
96
 
91
97
  /** Text and Icon Colors **/
92
98
  --mds-text-and-icons-brand-neutral-default: var(--mds-color-brand-gray-1300);
@@ -98,6 +104,9 @@
98
104
  --mds-text-and-icons-utility-danger-mid: var(--mds-color-utility-danger-red-600);
99
105
  --mds-text-and-icons-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
100
106
  --mds-text-and-icons-utility-success-mid: var(--mds-color-utility-success-green-900);
107
+ --mds-text-and-icons-utility-static-white: var(--mds-color-utility-base-white);
108
+ --mds-text-and-icons-utility-static-black: var(--mds-color-utility-base-black);
109
+ --mds-text-and-icons-utility-inverse: var(--mds-color-utility-base-white);
101
110
 
102
111
  /** Border Colors **/
103
112
  --mds-border-brand-neutral-lowest: var(--mds-color-brand-gray-200);
@@ -124,15 +133,9 @@
124
133
  --mds-border-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
125
134
  --mds-border-utility-success-low: var(--mds-color-utility-success-green-300);
126
135
  --mds-border-utility-success-mid: var(--mds-color-utility-success-green-600);
127
-
128
- /** Static colors - These won't change even if the theme changes **/
129
- --mds-static-white: var(--mds-color-utility-base-white);
130
- --mds-static-black: var(--mds-color-utility-base-black);
131
- --mds-static-light-gray: var(--mds-color-brand-gray-100);
132
- --mds-static-blue-mid: var(--mds-color-brand-bay-blue-1000);
133
-
134
- /** Misc **/
135
- --mds-inverse: var(--mds-color-utility-base-white); /** Switched based on light/dark mode **/
136
+ --mds-border-utility-static-white: var(--mds-color-utility-base-white);
137
+ --mds-border-utility-static-black: var(--mds-color-utility-base-black);
138
+ --mds-border-utility-inverse: var(--mds-color-utility-base-white);
136
139
 
137
140
  /** End color variables **/
138
141
 
@@ -146,17 +149,17 @@
146
149
  --mds-radius-max: var(--mds-border-radius-round);
147
150
 
148
151
 
149
- /**
152
+ /**
150
153
  * Elevation/Box shadow tokens
151
154
  **/
152
155
 
153
156
  --mds-shadow-container: var(--mds-elevation-offset-none) var(--mds-elevation-offset-100) var(--mds-elevation-blur-400) 0 var(--mds-shadow-container-opacity);
154
157
  --mds-shadow-modal: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-300) 0 var(--mds-shadow-modal-opacity);
155
- --mds-shadow-hover-sm: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-150) 0 var(--mds-shadow-hover-opacity);
158
+ --mds-shadow-hover-sm: var(--mds-elevation-offset-none) var(--mds-elevation-offset-50) var(--mds-elevation-blur-150) 0 var(--mds-shadow-hover-opacity);
156
159
  --mds-shadow-hover-md: var(--mds-elevation-offset-none) var(--mds-elevation-offset-100) var(--mds-elevation-blur-200) 0 var(--mds-shadow-hover-opacity);
157
160
 
158
161
  /**
159
- * Spacing tokens
162
+ * Spacing tokens
160
163
  */
161
164
  --mds-space-3xs: var(--mds-space-50);
162
165
  --mds-space-2xs: var(--mds-space-100);
@@ -169,51 +172,61 @@
169
172
  --mds-space-3xl: var(--mds-space-800);
170
173
 
171
174
  /**
172
- * Typography size tokens
175
+ * Line Height tokens
176
+ */
177
+ --mds-line-height-100: 1;
178
+ --mds-line-height-110: 1.1;
179
+ --mds-line-height-120: 1.2;
180
+ --mds-line-height-130: 1.3;
181
+ --mds-line-height-140: 1.4;
182
+ --mds-line-height-180: 1.8;
183
+
184
+ /**
185
+ * Typography size tokens
173
186
  *
174
187
  */
175
188
 
176
189
  /** Headings **/
177
- --mds-text-heading-2xs: var(--mds-font-weight-semibold) var(--mds-font-size-225)/1.4 var(--mds-font-family-headings);
178
- --mds-text-heading-xs: var(--mds-font-weight-semibold) var(--mds-font-size-275)/1.3 var(--mds-font-family-headings);
179
- --mds-text-heading-sm: var(--mds-font-weight-semibold) var(--mds-font-size-300)/1.3 var(--mds-font-family-headings);
180
- --mds-text-heading-md: var(--mds-font-weight-semibold) var(--mds-font-size-325)/1.2 var(--mds-font-family-headings);
190
+ --mds-text-heading-2xs: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-140) var(--mds-font-family-headings);
191
+ --mds-text-heading-xs: var(--mds-font-weight-semibold) var(--mds-font-size-275)/var(--mds-line-height-130) var(--mds-font-family-headings);
192
+ --mds-text-heading-sm: var(--mds-font-weight-semibold) var(--mds-font-size-300)/var(--mds-line-height-130) var(--mds-font-family-headings);
193
+ --mds-text-heading-md: var(--mds-font-weight-semibold) var(--mds-font-size-325)/var(--mds-line-height-120) var(--mds-font-family-headings);
181
194
 
182
195
  /** The 3 values below change based on screen sizes **/
183
- --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-450)/1.2 var(--mds-font-family-headings);
184
- --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/1.2 var(--mds-font-family-headings);
185
- --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/1.1 var(--mds-font-family-headings);
196
+ --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-120) var(--mds-font-family-headings);
197
+ --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/var(--mds-line-height-120) var(--mds-font-family-headings);
198
+ --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/var(--mds-line-height-110) var(--mds-font-family-headings);
186
199
 
187
200
  /** Body text **/
188
- --mds-text-body: var(--mds-font-size-200)/1.8 var(--mds-font-family);
189
- --mds-text-body-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/1.8 var(--mds-font-family);
201
+ --mds-text-body: var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
202
+ --mds-text-body-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
190
203
 
191
204
  /**** The 2 values below change based on screen sizes ****/
192
- --mds-text-body-lg: var(--mds-font-size-225)/1.8 var(--mds-font-family);
193
- --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/1.8 var(--mds-font-family);
205
+ --mds-text-body-lg: var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
206
+ --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
194
207
 
195
208
  /** Labels **/
196
- --mds-text-label-sm: var(--mds-font-weight-medium) var(--mds-font-size-175)/1.2 var(--mds-font-family);
197
- --mds-text-label: var(--mds-font-weight-medium) var(--mds-font-size-200)/1.2 var(--mds-font-family);
198
- --mds-text-label-md: var(--mds-font-weight-medium) var(--mds-font-size-225)/1.2 var(--mds-font-family);
209
+ --mds-text-label-sm: var(--mds-font-weight-medium) var(--mds-font-size-175)/var(--mds-line-height-120) var(--mds-font-family);
210
+ --mds-text-label: var(--mds-font-weight-medium) var(--mds-font-size-200)/var(--mds-line-height-120) var(--mds-font-family);
211
+ --mds-text-label-md: var(--mds-font-weight-medium) var(--mds-font-size-225)/var(--mds-line-height-120) var(--mds-font-family);
199
212
 
200
213
  /**** The values below change based on screen sizes ****/
201
- --mds-text-label-lg: var(--mds-font-weight-medium) var(--mds-font-size-250)/1.2 var(--mds-font-family);
202
- --mds-text-label-xl: var(--mds-font-weight-medium) var(--mds-font-size-275)/1.2 var(--mds-font-family);
214
+ --mds-text-label-lg: var(--mds-font-weight-medium) var(--mds-font-size-250)/var(--mds-line-height-120) var(--mds-font-family);
215
+ --mds-text-label-xl: var(--mds-font-weight-medium) var(--mds-font-size-275)/var(--mds-line-height-120) var(--mds-font-family);
203
216
 
204
217
  /** Eyebrow text (uppercase text labels). Needs 1px Letter spacing **/
205
- --mds-text-eyebrow: var(--mds-font-weight-semibold) var(--mds-font-size-175)/1 var(--mds-font-family);
206
- --mds-text-eyebrow-md: var(--mds-font-weight-semibold) var(--mds-font-size-200)/1 var(--mds-font-family);
218
+ --mds-text-eyebrow: var(--mds-font-weight-semibold) var(--mds-font-size-175)/var(--mds-line-height-100) var(--mds-font-family);
219
+ --mds-text-eyebrow-md: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-100) var(--mds-font-family);
207
220
 
208
221
  /* uppercase must be set separately as a text-transform in addition to using these variables */
209
222
  --mds-text-transform-eyebrow: uppercase;
210
223
  --mds-text-letter-spacing-eyebrow: 1px;
211
224
 
212
- /** Caption text **/
213
- --mds-text-caption-sm: var(--mds-font-weight-regular) var(--mds-font-size-125)/1.3 var(--mds-font-family);
214
- --mds-text-caption: var(--mds-font-weight-regular) var(--mds-font-size-175)/1.3 var(--mds-font-family);
215
- --mds-text-caption-bold: var(--mds-font-weight-medium) var(--mds-font-size-175)/1.3 var(--mds-font-family);
216
- --mds-text-caption-md: var(--mds-font-weight-regular) var(--mds-font-size-200)/1.3 var(--mds-font-family);
225
+ /** Caption text **/
226
+ --mds-text-caption-sm: var(--mds-font-weight-regular) var(--mds-font-size-125)/var(--mds-line-height-130) var(--mds-font-family);
227
+ --mds-text-caption: var(--mds-font-weight-regular) var(--mds-font-size-175)/var(--mds-line-height-130) var(--mds-font-family);
228
+ --mds-text-caption-bold: var(--mds-font-weight-medium) var(--mds-font-size-175)/var(--mds-line-height-130) var(--mds-font-family);
229
+ --mds-text-caption-md: var(--mds-font-weight-regular) var(--mds-font-size-200)/var(--mds-line-height-130) var(--mds-font-family);
217
230
 
218
231
 
219
232
 
@@ -227,7 +240,7 @@
227
240
 
228
241
  /**
229
242
  * Spacing, typography, and grid tokens that change based on breakpoints.
230
- * Breakpoints (Use these as max-width in media queries):
243
+ * Breakpoints (Use these as max-width in media queries):
231
244
  * 320 - XS breakpoint
232
245
  * 480 - SM breakpoint
233
246
  * 768 - MD breakpoint
@@ -241,11 +254,11 @@
241
254
  --mds-breakpoint-horizontal-space-columns: 12;
242
255
  --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
243
256
  --mds-breakpoint-horizontal-space-margin: var(--mds-space-600);
244
- --mds-text-body-lg: var(--mds-font-size-225)/1.8 var(--mds-font-family);
245
- --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/1.8 var(--mds-font-family);
246
- --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/1.1 var(--mds-font-family-headings);
247
- --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/1.2 var(--mds-font-family-headings);
248
- --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/1.2 var(--mds-font-family-headings);
257
+ --mds-text-body-lg: var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
258
+ --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
259
+ --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/var(--mds-line-height-110) var(--mds-font-family-headings);
260
+ --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-500)/var(--mds-line-height-120) var(--mds-font-family-headings);
261
+ --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/var(--mds-line-height-120) var(--mds-font-family-headings);
249
262
  }
250
263
  }
251
264
 
@@ -255,11 +268,11 @@
255
268
  --mds-breakpoint-horizontal-space-columns: 6;
256
269
  --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
257
270
  --mds-breakpoint-horizontal-space-margin: var(--mds-space-400);
258
- --mds-text-body-lg: var(--mds-font-size-225)/1.8 var(--mds-font-family);
259
- --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/1.8 var(--mds-font-family);
260
- --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/1.1 var(--mds-font-family-headings);
261
- --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/1.2 var(--mds-font-family-headings);
262
- --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-400)/1.2 var(--mds-font-family-headings);
271
+ --mds-text-body-lg: var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
272
+ --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-225)/var(--mds-line-height-180) var(--mds-font-family);
273
+ --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-550)/var(--mds-line-height-110) var(--mds-font-family-headings);
274
+ --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-120) var(--mds-font-family-headings);
275
+ --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-400)/var(--mds-line-height-120) var(--mds-font-family-headings);
263
276
  }
264
277
  }
265
278
 
@@ -269,11 +282,11 @@
269
282
  --mds-breakpoint-horizontal-space-columns: 6;
270
283
  --mds-breakpoint-horizontal-space-gutter: var(--mds-space-200);
271
284
  --mds-breakpoint-horizontal-space-margin: var(--mds-space-300);
272
- --mds-text-body-lg: var(--mds-font-size-200)/1.8 var(--mds-font-family);
273
- --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/1.8 var(--mds-font-family);
274
- --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/1.1 var(--mds-font-family-headings);
275
- --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-400)/1.2 var(--mds-font-family-headings);
276
- --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/1.2 var(--mds-font-family-headings);
285
+ --mds-text-body-lg: var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
286
+ --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
287
+ --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-110) var(--mds-font-family-headings);
288
+ --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-400)/var(--mds-line-height-120) var(--mds-font-family-headings);
289
+ --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/var(--mds-line-height-120) var(--mds-font-family-headings);
277
290
  }
278
291
  }
279
292
 
@@ -284,16 +297,10 @@
284
297
  --mds-breakpoint-horizontal-space-columns: 6;
285
298
  --mds-breakpoint-horizontal-space-gutter: var(--mds-space-200);
286
299
  --mds-breakpoint-horizontal-space-margin: var(--mds-space-200);
287
- --mds-text-body-lg: var(--mds-font-size-200)/1.8 var(--mds-font-family);
288
- --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/1.8 var(--mds-font-family);
289
- --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/1.1 var(--mds-font-family-headings);
290
- --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-400)/1.2 var(--mds-font-family-headings);
291
- --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/1.2 var(--mds-font-family-headings);
300
+ --mds-text-body-lg: var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
301
+ --mds-text-body-lg-bold: var(--mds-font-weight-semibold) var(--mds-font-size-200)/var(--mds-line-height-180) var(--mds-font-family);
302
+ --mds-text-heading-2xl: var(--mds-font-weight-semibold) var(--mds-font-size-450)/var(--mds-line-height-110) var(--mds-font-family-headings);
303
+ --mds-text-heading-xl: var(--mds-font-weight-semibold) var(--mds-font-size-400)/var(--mds-line-height-120) var(--mds-font-family-headings);
304
+ --mds-text-heading-lg: var(--mds-font-weight-semibold) var(--mds-font-size-350)/var(--mds-line-height-120) var(--mds-font-family-headings);
292
305
  }
293
306
  }
294
-
295
-
296
-
297
-
298
-
299
-
package/dist/primitives.css CHANGED
@@ -4,18 +4,18 @@
4
4
  * That will make theming/changes a lot easier in the long run!
5
5
  */
6
6
 
7
- /* The required font for mass.gov websites is Noto Sans, which is included here in a link from Google fonts */
8
- @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
7
+ /* The required font for mass.gov websites is Noto Sans, which is included here in a link from Google fonts */
8
+ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
9
9
 
10
10
  :root {
11
- /** We can remove this general one eventually and use body **/
11
+ /** We can remove this general one eventually and use body **/
12
12
  --mds-font-family: "Noto Sans", Helvetica, Arial, sans-serif;
13
13
 
14
14
  --mds-font-family-headings: "Noto Sans", Helvetica, Arial, sans-serif;
15
15
  --mds-font-family-body: "Noto Sans", Helvetica, Arial, sans-serif;
16
16
  --mds-font-family-utility: "Noto Sans", Helvetica, Arial, sans-serif;
17
17
  --mds-font-family-label: "Noto Sans", Helvetica, Arial, sans-serif;
18
-
18
+
19
19
  --mds-border-radius-25: 0.125rem;
20
20
  --mds-border-radius-50: 0.25rem;
21
21
  --mds-border-radius-100: 0.5rem;
@@ -83,46 +83,46 @@
83
83
  --mds-color-brand-duckling-yellow-1100: #ac8a13;
84
84
  --mds-color-brand-duckling-yellow-1200: #947610;
85
85
  --mds-color-brand-duckling-yellow-1300: #7b630e;
86
- --mds-color-independence-cranberry-100: #f0e7e8;
87
- --mds-color-independence-cranberry-200: #e1ced2;
88
- --mds-color-independence-cranberry-300: #d2b6bb;
89
- --mds-color-independence-cranberry-400: #c39da5;
90
- --mds-color-independence-cranberry-500: #b4858e;
91
- --mds-color-independence-cranberry-600: #955461;
92
- --mds-color-independence-cranberry-700: #863b4a;
93
- --mds-color-independence-cranberry-800: #772334;
94
- --mds-color-independence-cranberry-900: #680a1d;
95
- --mds-color-independence-cranberry-1000: #5e091a;
96
- --mds-color-independence-cranberry-1100: #530817;
97
- --mds-color-independence-cranberry-1200: #490714;
98
- --mds-color-independence-cranberry-1300: #34050f;
99
- --mds-color-utility-base-white : #ffffff;
100
- --mds-color-utility-base-black : #000000;
101
- --mds-color-utility-base-gray: #fdfdfd;
102
- --mds-color-utility-base-white-transparent : #ffffff00;
103
- --mds-color-utility-base-black-transparent : #00000000;
86
+ --mds-color-brand-independence-cranberry-100: #f0e7e8;
87
+ --mds-color-brand-independence-cranberry-200: #e1ced2;
88
+ --mds-color-brand-independence-cranberry-300: #d2b6bb;
89
+ --mds-color-brand-independence-cranberry-400: #c39da5;
90
+ --mds-color-brand-independence-cranberry-500: #b4858e;
91
+ --mds-color-brand-independence-cranberry-600: #955461;
92
+ --mds-color-brand-independence-cranberry-700: #863b4a;
93
+ --mds-color-brand-independence-cranberry-800: #772334;
94
+ --mds-color-brand-independence-cranberry-900: #680a1d;
95
+ --mds-color-brand-independence-cranberry-1000: #5e091a;
96
+ --mds-color-brand-independence-cranberry-1100: #530817;
97
+ --mds-color-brand-independence-cranberry-1200: #490714;
98
+ --mds-color-brand-independence-cranberry-1300: #34050f;
99
+ --mds-color-brand-surface-1000 : #fdfdfd;
100
+ --mds-color-utility-base-white: #ffffff;
101
+ --mds-color-utility-base-black: #141414;
102
+ --mds-color-utility-base-white-transparent: #ffffff00;
103
+ --mds-color-utility-base-black-transparent: #00000099;
104
104
  --mds-color-utility-danger-red-100: #fef1f1;
105
105
  --mds-color-utility-danger-red-300: #f99f9f;
106
106
  --mds-color-utility-danger-red-600: #cd0d0d;
107
107
  --mds-color-utility-danger-red-900: #900909;
108
108
  --mds-color-utility-danger-red-1300: #480505;
109
- --mds-color-utility-focus-blue-300 : #b2dbff;
110
- --mds-color-utility-focus-blue-600 : #0088ff;
111
- --mds-color-utility-informative-blue-100 : #e8eef4;
112
- --mds-color-utility-informative-blue-300 : #b9ccdd;
113
- --mds-color-utility-informative-blue-600 : #7299bc;
114
- --mds-color-utility-informative-blue-900 : #14558f;
115
- --mds-color-utility-informative-blue-1300 : #0a2b48;
109
+ --mds-color-utility-focus-blue-300: #b2dbff;
110
+ --mds-color-utility-focus-blue-600: #0088ff;
111
+ --mds-color-utility-informative-blue-100: #e8eef4;
112
+ --mds-color-utility-informative-blue-300: #b9ccdd;
113
+ --mds-color-utility-informative-blue-600: #7299bc;
114
+ --mds-color-utility-informative-blue-900: #14558f;
115
+ --mds-color-utility-informative-blue-1300: #0a2b48;
116
116
  --mds-color-utility-success-green-100: #eafbef;
117
117
  --mds-color-utility-success-green-300: #81e4a2;
118
118
  --mds-color-utility-success-green-600: #24a850;
119
119
  --mds-color-utility-success-green-900: #187236;
120
120
  --mds-color-utility-success-green-1300: #0b3218;
121
- --mds-color-utility-warning-yellow-100: #fff9eb;
122
- --mds-color-utility-warning-yellow-300: #fcdf9c;
123
- --mds-color-utility-warning-yellow-600: #f6b622;
124
- --mds-color-utility-warning-yellow-900: #bf8808;
125
- --mds-color-utility-warning-yellow-1300: #7b5705;
121
+ --mds-color-utility-warning-yellow-100: #fef9e8;
122
+ --mds-color-utility-warning-yellow-300: #fceebb;
123
+ --mds-color-utility-warning-yellow-600: #fadc76;
124
+ --mds-color-utility-warning-yellow-900: #f6c51b;
125
+ --mds-color-utility-warning-yellow-1300: #7b630e;
126
126
  --mds-font-size-100: 0.625rem;
127
127
  --mds-font-size-125: 0.75rem;
128
128
  --mds-font-size-175: 0.875rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@massds/mds-tokens",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Design tokens for the Massachusetts Design System",
5
5
  "files": [
6
6
  "dist/"