@massds/mds-tokens 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +93 -0
  2. package/dist/index.css +299 -0
  3. package/dist/primitives.css +199 -0
  4. package/package.json +52 -0
package/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # Massachusetts Design System Tokens
2
+
3
+ CSS design tokens for the Massachusetts Design System. This package publishes CSS variable files that can be imported into applications, component libraries, and other front-end builds.
4
+
5
+ For general guidance on how to use the Design System, check out the [Design System Microsite](https://www.mass.gov/massachusetts-design-system).
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @massds/mds-tokens
11
+ ```
12
+
13
+ ## Package Contents
14
+
15
+ The published package includes token files under `dist/`:
16
+
17
+ ```text
18
+ dist/
19
+ ├── index.css
20
+ └── primitives.css
21
+ ```
22
+
23
+ - `dist/index.css` contains the semantic tokens intended for application use
24
+ - `dist/primitives.css` contains lower-level primitive tokens used to build the semantic layer (Do not reference directly)
25
+
26
+ ## Usage
27
+
28
+ Import the semantic token file from your CSS entrypoint:
29
+
30
+ ```css
31
+ @import "@massds/mds-tokens/dist/index.css";
32
+ ```
33
+
34
+ Use `index.css` as the public entrypoint for the package. Applications should not reference `primitives.css` directly, primitive values are for theming and may change as the design system evolves.
35
+
36
+ ## Source Layout
37
+
38
+ Source files live under `src/` and are copied into `dist/` during the build:
39
+
40
+ ```text
41
+ src/
42
+ ├── index.css
43
+ └── primitives.css
44
+ ```
45
+
46
+ The `test-page/` directory is only for local validation and is not published to npm.
47
+
48
+
49
+ ## Development
50
+
51
+ Install dependencies, lint the source files, and then build the distributable files from this package directory:
52
+
53
+ ```bash
54
+ npm install
55
+ npm run lint
56
+ npm run build
57
+ ```
58
+
59
+ Individual lint commands:
60
+
61
+ ```bash
62
+ npm run lint:css
63
+ npm run lint:html
64
+ ```
65
+
66
+ The build copies the CSS token source files from `src/` into `dist/`.
67
+
68
+ ## Publishing
69
+
70
+ The package is published to npm as `@massds/mds-tokens` with the GitHub Actions workflow at `.github/workflows/publish-tokens.yml`.
71
+
72
+ Recommended branch and tag strategy for tokens:
73
+
74
+ - Use `main` as the long-lived release branch for `@massds/mds-tokens`.
75
+ - Merge tokens release work into `main` through a pull request with required checks.
76
+ - Create tokens release tags only from commits already on `main`.
77
+ - Use the `tokens-v*` tag prefix for every tokens release.
78
+
79
+ Tokens release flow:
80
+
81
+ 1. Create a release branch from `main`, based on [semantic versioning](https://semver.org/), for example `release/tokens-1.0.0`
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
88
+
89
+ - Stable releases use tags such as `tokens-v1.0.0` and publish to the npm `latest` dist-tag.
90
+ - Prereleases use tags such as `tokens-v1.1.0-beta.1` and publish to the npm `beta` dist-tag.
91
+
92
+
93
+ Questions? Email the Massachusetts Design System Team at <designsystem@mass.gov>
package/dist/index.css ADDED
@@ -0,0 +1,299 @@
1
+ /**
2
+ * Semantic tokens
3
+ * Use these in your projects
4
+ *
5
+ */
6
+
7
+ @import url('primitives.css');
8
+
9
+ /**
10
+ * Color Theme tokens used in the theme.
11
+ *
12
+ */
13
+
14
+ :root {
15
+ --mds-background-transparent: var(--mds-color-utility-base-white-transparent);
16
+ --mds-background-surface-default: #fdfdfd;
17
+ --mds-background-section-brand-neutral-lowest: var(--mds-color-brand-gray-100);
18
+ --mds-background-section-brand-neutral-low: var(--mds-color-brand-gray-300);
19
+ --mds-background-section-brand-neutral-mid: var(--mds-color-brand-gray-800);
20
+ --mds-background-section-brand-neutral-high: var(--mds-color-brand-gray-1100);
21
+ --mds-background-section-brand-neutral-highest: var(--mds-color-brand-gray-1300);
22
+ --mds-background-section-brand-neutral-disabled: var(--mds-color-brand-gray-200);
23
+ --mds-background-section-brand-primary-lowest: var(--mds-color-brand-bay-blue-100);
24
+ --mds-background-section-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
25
+ --mds-background-section-brand-primary-highest: var(--mds-color-brand-bay-blue-1300);
26
+ --mds-background-section-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-100);
27
+ --mds-background-section-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000);
28
+ --mds-background-section-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300);
29
+ --mds-background-section-brand-tertiary-lowest: var(--mds-color-brand-independence-cranberry-100);
30
+ --mds-background-section-brand-tertiary-mid: var(--mds-color-brand-independence-cranberry-800);
31
+ --mds-background-section-brand-tertiary-highest: var(--mds-color-brand-independence-cranberry-1300);
32
+ --mds-background-section-utility-informative-lowest: var(--mds-color-utility-informative-blue-100);
33
+ --mds-background-section-utility-informative-mid: var(--mds-color-utility-informative-blue-900);
34
+ --mds-background-section-utility-informative-highest: var(--mds-color-utility-informative-blue-1300);
35
+ --mds-background-section-utility-danger-lowest: var(--mds-color-utility-danger-red-100);
36
+ --mds-background-section-utility-danger-mid: var(--mds-color-utility-danger-red-600);
37
+ --mds-background-section-utility-danger-highest: var(--mds-color-utility-danger-red-1300);
38
+ --mds-background-section-utility-warning-lowest: var(--mds-color-utility-warning-yellow-100);
39
+ --mds-background-section-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
40
+ --mds-background-section-utility-warning-highest: var(--mds-color-utility-warning-yellow-1300);
41
+ --mds-background-section-utility-success-lowest: var(--mds-color-utility-success-green-100);
42
+ --mds-background-section-utility-success-mid: var(--mds-color-utility-success-green-600);
43
+ --mds-background-section-utility-success-highest: var(--mds-color-utility-success-green-1300);
44
+
45
+
46
+ /* Adaptive/Interactive state colors */
47
+ --mds-background-adaptive-brand-neutral-lowest: var(--mds-color-brand-gray-100);
48
+ --mds-background-adaptive-brand-neutral-low: var(--mds-color-brand-gray-300);
49
+ --mds-background-adaptive-brand-neutral-mid: var(--mds-color-brand-gray-900);
50
+ --mds-background-adaptive-brand-neutral-high: var(--mds-color-brand-gray-1000);
51
+ --mds-background-adaptive-brand-neutral-highest: var(--mds-color-brand-gray-1300);
52
+ --mds-background-adaptive-brand-neutral-disabled: var(--mds-color-brand-gray-200);
53
+ --mds-background-adaptive-brand-primary-lowest: var(--mds-color-brand-bay-blue-200);
54
+ --mds-background-adaptive-brand-primary-low: var(--mds-color-brand-bay-blue-400);
55
+ --mds-background-adaptive-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
56
+ --mds-background-adaptive-brand-primary-high: var(--mds-color-brand-bay-blue-1100);
57
+ --mds-background-adaptive-brand-primary-highest: var(--mds-color-brand-bay-blue-1300);
58
+ --mds-background-adaptive-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-200);
59
+ --mds-background-adaptive-brand-secondary-low: var(--mds-color-brand-berkshires-green-600);
60
+ --mds-background-adaptive-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000);
61
+ --mds-background-adaptive-brand-secondary-high: var(--mds-color-brand-berkshires-green-1100);
62
+ --mds-background-adaptive-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300);
63
+ --mds-background-adaptive-brand-tertiary-lowest: var(--mds-color-brand-independence-cranberry-200);
64
+ --mds-background-adaptive-brand-tertiary-low: var(--mds-color-brand-independence-cranberry-500);
65
+ --mds-background-adaptive-brand-tertiary-mid: var(--mds-color-brand-independence-cranberry-900);
66
+ --mds-background-adaptive-brand-tertiary-high: var(--mds-color-brand-independence-cranberry-1100);
67
+ --mds-background-adaptive-brand-tertiary-highest: var(--mds-color-brand-independence-cranberry-1300);
68
+ --mds-background-adaptive-brand-highlight-mid: var(--mds-color-brand-duckling-yellow-800);
69
+ --mds-background-adaptive-utility-informative-lowest: var(--mds-color-utility-informative-blue-100);
70
+ --mds-background-adaptive-utility-informative-low: var(--mds-color-utility-informative-blue-300);
71
+ --mds-background-adaptive-utility-informative-mid: var(--mds-color-utility-informative-blue-600);
72
+ --mds-background-adaptive-utility-informative-high: var(--mds-color-utility-informative-blue-900);
73
+ --mds-background-adaptive-utility-informative-highest: var(--mds-color-utility-informative-blue-1300);
74
+ --mds-background-adaptive-utility-danger-lowest: var(--mds-color-utility-danger-red-100);
75
+ --mds-background-adaptive-utility-danger-low: var(--mds-color-utility-danger-red-300);
76
+ --mds-background-adaptive-utility-danger-mid: var(--mds-color-utility-danger-red-600);
77
+ --mds-background-adaptive-utility-danger-high: var(--mds-color-utility-danger-red-900);
78
+ --mds-background-adaptive-utility-danger-highest: var(--mds-color-utility-danger-red-1300);
79
+ --mds-background-adaptive-utility-warning-lowest: var(--mds-color-utility-warning-yellow-100);
80
+ --mds-background-adaptive-utility-warning-low: var(--mds-color-utility-warning-yellow-300);
81
+ --mds-background-adaptive-utility-warning-mid: var(--mds-color-utility-warning-yellow-900);
82
+ --mds-background-adaptive-utility-warning-high: var(--mds-color-brand-duckling-yellow-1100);
83
+ --mds-background-adaptive-utility-warning-highest: var(--mds-color-utility-warning-yellow-1300);
84
+ --mds-background-adaptive-utility-success-lowest: var(--mds-color-utility-success-green-100);
85
+ --mds-background-adaptive-utility-success-low: var(--mds-color-utility-success-green-300);
86
+ --mds-background-adaptive-utility-success-mid: var(--mds-color-utility-success-green-600);
87
+ --mds-background-adaptive-utility-success-high: var(--mds-color-utility-success-green-900);
88
+ --mds-background-adaptive-utility-success-highest: var(--mds-color-utility-success-green-1300);
89
+ --mds-background-overlay: #00000099;
90
+
91
+ /** Text and Icon Colors **/
92
+ --mds-text-and-icons-brand-neutral-default: var(--mds-color-brand-gray-1300);
93
+ --mds-text-and-icons-brand-neutral-muted: var(--mds-color-brand-gray-900);
94
+ --mds-text-and-icons-brand-neutral-disabled: var(--mds-color-brand-gray-700);
95
+ --mds-text-and-icons-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
96
+ --mds-text-and-icons-brand-secondary-mid: var(--mds-color-brand-berkshires-green-1000);
97
+ --mds-text-and-icons-utility-informative-mid: var(--mds-color-utility-informative-blue-900);
98
+ --mds-text-and-icons-utility-danger-mid: var(--mds-color-utility-danger-red-600);
99
+ --mds-text-and-icons-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
100
+ --mds-text-and-icons-utility-success-mid: var(--mds-color-utility-success-green-900);
101
+
102
+ /** Border Colors **/
103
+ --mds-border-brand-neutral-lowest: var(--mds-color-brand-gray-200);
104
+ --mds-border-brand-neutral-low: var(--mds-color-brand-gray-400);
105
+ --mds-border-brand-neutral-mid: var(--mds-color-brand-gray-600);
106
+ --mds-border-brand-neutral-high: var(--mds-color-brand-gray-750);
107
+ --mds-border-brand-primary-lowest: var(--mds-color-brand-bay-blue-200);
108
+ --mds-border-brand-primary-low: var(--mds-color-brand-bay-blue-400);
109
+ --mds-border-brand-primary-mid: var(--mds-color-brand-bay-blue-1000);
110
+ --mds-border-brand-primary-high: var(--mds-color-brand-bay-blue-1100);
111
+ --mds-border-brand-primary-highest: var(--mds-color-brand-bay-blue-1300);
112
+ --mds-border-brand-secondary-lowest: var(--mds-color-brand-berkshires-green-200);
113
+ --mds-border-brand-secondary-low: var(--mds-color-brand-berkshires-green-600);
114
+ --mds-border-brand-secondary-mid: var(--mds-color-brand-berkshires-green-900);
115
+ --mds-border-brand-secondary-high: var(--mds-color-brand-berkshires-green-1100);
116
+ --mds-border-brand-secondary-highest: var(--mds-color-brand-berkshires-green-1300);
117
+ --mds-border-focus-on-light: var(--mds-color-utility-focus-blue-600);
118
+ --mds-border-focus-on-dark: var(--mds-color-utility-focus-blue-300);
119
+ --mds-border-utility-informative-low: var(--mds-color-utility-informative-blue-300);
120
+ --mds-border-utility-informative-mid: var(--mds-color-utility-informative-blue-900);
121
+ --mds-border-utility-danger-low: var(--mds-color-utility-danger-red-300);
122
+ --mds-border-utility-danger-mid: var(--mds-color-utility-danger-red-600);
123
+ --mds-border-utility-warning-low: var(--mds-color-utility-warning-yellow-300);
124
+ --mds-border-utility-warning-mid: var(--mds-color-utility-warning-yellow-600);
125
+ --mds-border-utility-success-low: var(--mds-color-utility-success-green-300);
126
+ --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
+
137
+ /** End color variables **/
138
+
139
+ /**
140
+ * Corner (border radius) tokens used in the theme.
141
+ */
142
+
143
+ --mds-radius-xs: var(--mds-border-radius-25);
144
+ --mds-radius-sm: var(--mds-border-radius-50);
145
+ --mds-radius-md: var(--mds-border-radius-100);
146
+ --mds-radius-max: var(--mds-border-radius-round);
147
+
148
+
149
+ /**
150
+ * Elevation/Box shadow tokens
151
+ **/
152
+
153
+ --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
+ --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);
156
+ --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
+
158
+ /**
159
+ * Spacing tokens
160
+ */
161
+ --mds-space-3xs: var(--mds-space-50);
162
+ --mds-space-2xs: var(--mds-space-100);
163
+ --mds-space-xs: var(--mds-space-150);
164
+ --mds-space-sm: var(--mds-space-200);
165
+ --mds-space-md: var(--mds-space-300);
166
+ --mds-space-lg: var(--mds-space-400);
167
+ --mds-space-xl: var(--mds-space-500);
168
+ --mds-space-2xl: var(--mds-space-600);
169
+ --mds-space-3xl: var(--mds-space-800);
170
+
171
+ /**
172
+ * Typography size tokens
173
+ *
174
+ */
175
+
176
+ /** 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);
181
+
182
+ /** 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);
186
+
187
+ /** 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);
190
+
191
+ /**** 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);
194
+
195
+ /** 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);
199
+
200
+ /**** 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);
203
+
204
+ /** 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);
207
+
208
+ /* uppercase must be set separately as a text-transform in addition to using these variables */
209
+ --mds-text-transform-eyebrow: uppercase;
210
+ --mds-text-letter-spacing-eyebrow: 1px;
211
+
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);
217
+
218
+
219
+
220
+ /** These values change based on screen sizes **/
221
+
222
+ /** Default values are set for 1024px and above **/
223
+ --mds-breakpoint-horizontal-space-columns: 12;
224
+ --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
225
+ --mds-breakpoint-horizontal-space-margin: var(--mds-space-600);
226
+ }
227
+
228
+ /**
229
+ * Spacing, typography, and grid tokens that change based on breakpoints.
230
+ * Breakpoints (Use these as max-width in media queries):
231
+ * 320 - XS breakpoint
232
+ * 480 - SM breakpoint
233
+ * 768 - MD breakpoint
234
+ * 1024 - LG breakpoint
235
+ * 1280 - XL breakpoint
236
+ */
237
+
238
+ /** 769px-1024px **/
239
+ @media (max-width: 1024px) {
240
+ :root {
241
+ --mds-breakpoint-horizontal-space-columns: 12;
242
+ --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
243
+ --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);
249
+ }
250
+ }
251
+
252
+ /** 481px-768px **/
253
+ @media (max-width: 768px) {
254
+ :root {
255
+ --mds-breakpoint-horizontal-space-columns: 6;
256
+ --mds-breakpoint-horizontal-space-gutter: var(--mds-space-300);
257
+ --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);
263
+ }
264
+ }
265
+
266
+ /** 321px-480px **/
267
+ @media (max-width: 480px) {
268
+ :root {
269
+ --mds-breakpoint-horizontal-space-columns: 6;
270
+ --mds-breakpoint-horizontal-space-gutter: var(--mds-space-200);
271
+ --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);
277
+ }
278
+ }
279
+
280
+
281
+ /** 0-320px **/
282
+ @media (max-width: 320px) {
283
+ :root {
284
+ --mds-breakpoint-horizontal-space-columns: 6;
285
+ --mds-breakpoint-horizontal-space-gutter: var(--mds-space-200);
286
+ --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);
292
+ }
293
+ }
294
+
295
+
296
+
297
+
298
+
299
+
package/dist/primitives.css ADDED
@@ -0,0 +1,199 @@
1
+ /**
2
+ * Primitive token values
3
+ * Do NOT use these in your projects - use the semantic tokens (semantic-tokens.css) instead
4
+ * That will make theming/changes a lot easier in the long run!
5
+ */
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');
9
+
10
+ :root {
11
+ /** We can remove this general one eventually and use body **/
12
+ --mds-font-family: "Noto Sans", Helvetica, Arial, sans-serif;
13
+
14
+ --mds-font-family-headings: "Noto Sans", Helvetica, Arial, sans-serif;
15
+ --mds-font-family-body: "Noto Sans", Helvetica, Arial, sans-serif;
16
+ --mds-font-family-utility: "Noto Sans", Helvetica, Arial, sans-serif;
17
+ --mds-font-family-label: "Noto Sans", Helvetica, Arial, sans-serif;
18
+
19
+ --mds-border-radius-25: 0.125rem;
20
+ --mds-border-radius-50: 0.25rem;
21
+ --mds-border-radius-100: 0.5rem;
22
+ --mds-border-radius-150: 0.75rem;
23
+ --mds-border-radius-200: 1rem;
24
+ --mds-border-radius-250: 1.25rem;
25
+ --mds-border-radius-300: 1.5rem;
26
+ --mds-border-radius-350: 1.75rem;
27
+ --mds-border-radius-400: 2rem;
28
+ --mds-border-radius-450: 2.25rem;
29
+ --mds-border-radius-500: 2.5rem;
30
+ --mds-border-radius-600: 3rem;
31
+ --mds-border-radius-round: 1000px;
32
+ --mds-color-brand-gray-100: #f7f7f7;
33
+ --mds-color-brand-gray-200: #f0f0f0;
34
+ --mds-color-brand-gray-300: #e6e6e6;
35
+ --mds-color-brand-gray-400: #dcdcdc;
36
+ --mds-color-brand-gray-500: #cccccc;
37
+ --mds-color-brand-gray-600: #bababa;
38
+ --mds-color-brand-gray-700: #a8a8a8;
39
+ --mds-color-brand-gray-750: #949494;
40
+ --mds-color-brand-gray-800: #878787;
41
+ --mds-color-brand-gray-900: #707070;
42
+ --mds-color-brand-gray-1000: #535353;
43
+ --mds-color-brand-gray-1100: #3d3d3d;
44
+ --mds-color-brand-gray-1200: #2a2a2a;
45
+ --mds-color-brand-gray-1250: #212121;
46
+ --mds-color-brand-gray-1300: #141414;
47
+ --mds-color-brand-bay-blue-100: #e8eef4;
48
+ --mds-color-brand-bay-blue-200: #d0dde9;
49
+ --mds-color-brand-bay-blue-300: #b9ccdd;
50
+ --mds-color-brand-bay-blue-400: #a1bbd2;
51
+ --mds-color-brand-bay-blue-500: #8aaac7;
52
+ --mds-color-brand-bay-blue-600: #7299bc;
53
+ --mds-color-brand-bay-blue-700: #5b88b1;
54
+ --mds-color-brand-bay-blue-800: #4377a5;
55
+ --mds-color-brand-bay-blue-900: #2c669a;
56
+ --mds-color-brand-bay-blue-1000: #14558f;
57
+ --mds-color-brand-bay-blue-1100: #104472;
58
+ --mds-color-brand-bay-blue-1200: #0e3c64;
59
+ --mds-color-brand-bay-blue-1300: #0a2b48;
60
+ --mds-color-brand-berkshires-green-100: #ebf3ee;
61
+ --mds-color-brand-berkshires-green-200: #d7e7dd;
62
+ --mds-color-brand-berkshires-green-300: #c3dacd;
63
+ --mds-color-brand-berkshires-green-400: #afcebc;
64
+ --mds-color-brand-berkshires-green-500: #9ac1a9;
65
+ --mds-color-brand-berkshires-green-600: #80b294;
66
+ --mds-color-brand-berkshires-green-700: #67a27f;
67
+ --mds-color-brand-berkshires-green-800: #388557;
68
+ --mds-color-brand-berkshires-green-900: #32784e;
69
+ --mds-color-brand-berkshires-green-1000: #2d6a46;
70
+ --mds-color-brand-berkshires-green-1100: #275d3d;
71
+ --mds-color-brand-berkshires-green-1200: #225034;
72
+ --mds-color-brand-berkshires-green-1300: #1c432c;
73
+ --mds-color-brand-duckling-yellow-100: #fef9e8;
74
+ --mds-color-brand-duckling-yellow-200: #fdf3d1;
75
+ --mds-color-brand-duckling-yellow-300: #fceebb;
76
+ --mds-color-brand-duckling-yellow-400: #fbe8a4;
77
+ --mds-color-brand-duckling-yellow-500: #fbe28d;
78
+ --mds-color-brand-duckling-yellow-600: #fadc76;
79
+ --mds-color-brand-duckling-yellow-700: #f8d149;
80
+ --mds-color-brand-duckling-yellow-800: #f6c51b;
81
+ --mds-color-brand-duckling-yellow-900: #ddb118;
82
+ --mds-color-brand-duckling-yellow-1000: #c59e16;
83
+ --mds-color-brand-duckling-yellow-1100: #ac8a13;
84
+ --mds-color-brand-duckling-yellow-1200: #947610;
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;
104
+ --mds-color-utility-danger-red-100: #fef1f1;
105
+ --mds-color-utility-danger-red-300: #f99f9f;
106
+ --mds-color-utility-danger-red-600: #cd0d0d;
107
+ --mds-color-utility-danger-red-900: #900909;
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;
116
+ --mds-color-utility-success-green-100: #eafbef;
117
+ --mds-color-utility-success-green-300: #81e4a2;
118
+ --mds-color-utility-success-green-600: #24a850;
119
+ --mds-color-utility-success-green-900: #187236;
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;
126
+ --mds-font-size-100: 0.625rem;
127
+ --mds-font-size-125: 0.75rem;
128
+ --mds-font-size-175: 0.875rem;
129
+ --mds-font-size-200: 1rem;
130
+ --mds-font-size-225: 1.125rem;
131
+ --mds-font-size-250: 1.25rem;
132
+ --mds-font-size-275: 1.375rem;
133
+ --mds-font-size-300: 1.5rem;
134
+ --mds-font-size-325: 1.625rem;
135
+ --mds-font-size-350: 1.75rem;
136
+ --mds-font-size-400: 2rem;
137
+ --mds-font-size-450: 2.25rem;
138
+ --mds-font-size-500: 2.5rem;
139
+ --mds-font-size-550: 2.75rem;
140
+ --mds-font-size-600: 3rem;
141
+ --mds-font-size-700: 3.5rem;
142
+ --mds-font-size-800: 4rem;
143
+ --mds-font-size-1200: 6rem;
144
+ --mds-font-size-2100: 10.5rem;
145
+ --mds-font-weight-extralight: 150;
146
+ --mds-font-weight-light: 300;
147
+ --mds-font-weight-regular: 400;
148
+ --mds-font-weight-medium: 500;
149
+ --mds-font-weight-semibold: 600;
150
+ --mds-font-weight-bold: 700;
151
+ --mds-font-weight-extrabold: 800;
152
+ --mds-space-0: 0;
153
+ --mds-space-25: 0.125rem;
154
+ --mds-space-50: 0.25rem;
155
+ --mds-space-100: 0.5rem;
156
+ --mds-space-150: 0.75rem;
157
+ --mds-space-175: 0.875rem;
158
+ --mds-space-200: 1rem;
159
+ --mds-space-250: 1.25rem;
160
+ --mds-space-300: 1.5rem;
161
+ --mds-space-350: 1.75rem;
162
+ --mds-space-400: 2rem;
163
+ --mds-space-450: 2.25rem;
164
+ --mds-space-500: 2.5rem;
165
+ --mds-space-600: 3rem;
166
+ --mds-space-700: 3.5rem;
167
+ --mds-space-800: 4rem;
168
+ --mds-space-900: 4.5rem;
169
+ --mds-space-1000: 5rem;
170
+ --mds-space-1100: 5.5rem;
171
+ --mds-space-1200: 6rem;
172
+ --mds-space-1300: 6.5rem;
173
+ --mds-space-1400: 7rem;
174
+ --mds-space-1500: 7.5rem;
175
+ --mds-space-1600: 8rem;
176
+ --mds-space-1800: 9rem;
177
+ --mds-space-2000: 10rem;
178
+ --mds-elevation-offset-100: 8px;
179
+ --mds-elevation-offset-200: 16px;
180
+ --mds-elevation-offset-300: 24px;
181
+ --mds-elevation-offset-400: 32px;
182
+ --mds-elevation-offset-none: 0px;
183
+ --mds-elevation-offset-50: 4px;
184
+ --mds-elevation-blur-150: 12px;
185
+ --mds-elevation-blur-200: 16px;
186
+ --mds-elevation-blur-300: 24px;
187
+ --mds-elevation-blur-400: 32px;
188
+ --mds-elevation-blur-none: 0px;
189
+ --mds-elevation-blur-25: 2px;
190
+ --mds-elevation-spread-100: 8px;
191
+ --mds-elevation-spread-150: 12px;
192
+ --mds-elevation-spread-200: 16px;
193
+ --mds-elevation-spread-250: 20px;
194
+ --mds-elevation-spread-none: 0px;
195
+ --mds-elevation-spread-50: 4px;
196
+ --mds-shadow-hover-opacity: #00000029;
197
+ --mds-shadow-container-opacity: #0000001a;
198
+ --mds-shadow-modal-opacity: #00000024;
199
+ }
package/package.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "name": "@massds/mds-tokens",
3
+ "version": "1.0.0",
4
+ "description": "Design tokens for the Massachusetts Design System",
5
+ "files": [
6
+ "dist/"
7
+ ],
8
+ "scripts": {
9
+ "build": "node ./scripts/build.js",
10
+ "changelog:release": "bash ../../scripts/compile-package-changelog.sh .",
11
+ "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
12
+ "lint": "npm run lint:css && npm run lint:html",
13
+ "lint:css": "stylelint \"src/**/*.css\" \"test-page/**/*.css\"",
14
+ "lint:css:fix": "stylelint --fix \"src/**/*.css\" \"test-page/**/*.css\"",
15
+ "lint:html": "htmlhint \"test-page/**/*.html\"",
16
+ "prepublishOnly": "node ./scripts/build.js",
17
+ "version:patch": "npm version patch",
18
+ "version:minor": "npm version minor",
19
+ "version:major": "npm version major",
20
+ "release": "git push origin --tags"
21
+ },
22
+ "repository": {
23
+ "type": "git",
24
+ "url": "git+https://github.com/massgov/massachusetts-design-system.git",
25
+ "directory": "packages/tokens"
26
+ },
27
+ "keywords": [
28
+ "css-tokens",
29
+ "css-variables",
30
+ "design-tokens",
31
+ "design-system",
32
+ "massachusetts"
33
+ ],
34
+ "author": "Massachusetts Digital Services",
35
+ "license": "MIT",
36
+ "devDependencies": {
37
+ "htmlhint": "^1.7.1",
38
+ "stylelint": "^16.24.0",
39
+ "stylelint-config-standard": "^39.0.1"
40
+ },
41
+ "publishConfig": {
42
+ "access": "public",
43
+ "registry": "https://registry.npmjs.org/"
44
+ },
45
+ "engines": {
46
+ "node": "24.14.0"
47
+ },
48
+ "volta": {
49
+ "node": "24.14.0",
50
+ "npm": "10.9.2"
51
+ }
52
+ }