mcr-design-systems 1.0.14 → 1.0.16

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 (9) hide show
  1. package/dist/components/Icon/generated/ChevronUpIcon.js +6 -6
  2. package/dist/components/InputBase/variants.d.ts +2 -2
  3. package/dist/components/InputBase/variants.js +1 -1
  4. package/dist/tokens/semantic.d.ts +88 -88
  5. package/dist/tokens/semantic.js +88 -88
  6. package/dist/tokens/theme-types.d.ts +1 -0
  7. package/dist/tokens/utils.d.ts +2 -2
  8. package/dist/tokens/utils.js +69 -60
  9. package/package.json +1 -1
package/dist/components/Icon/generated/ChevronUpIcon.js CHANGED
@@ -10,10 +10,13 @@ const d = ({
10
10
  title: a
11
11
  }) => {
12
12
  const u = p.useMemo(() => {
13
- const t = new DOMParser().parseFromString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
13
+ const t = new DOMParser().parseFromString(
14
+ `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
14
15
  <path d="M11.3692 8.22462C11.762 7.90427 12.341 7.92686 12.7071 8.29298L18.7071 14.293L18.7754 14.3692C19.0958 14.7619 19.0732 15.3409 18.7071 15.707C18.341 16.0732 17.762 16.0958 17.3692 15.7754L17.293 15.707L12 10.4141L6.70708 15.707C6.31655 16.0976 5.68354 16.0976 5.29302 15.707C4.90249 15.3165 4.90249 14.6835 5.29302 14.293L11.293 8.29298L11.3692 8.22462Z" fill="black"/>
15
16
  </svg>
16
- `, "image/svg+xml").querySelector("svg");
17
+ `,
18
+ "image/svg+xml"
19
+ ).querySelector("svg");
17
20
  if (!t) return "";
18
21
  if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
19
22
  "path, circle, rect, polygon, polyline, line, ellipse"
@@ -22,10 +25,7 @@ const d = ({
22
25
  s && s !== "none" && e.setAttribute("fill", n), l && l !== "none" && e.setAttribute("stroke", n);
23
26
  }), r) {
24
27
  const e = t.getAttribute("class") || "";
25
- t.setAttribute(
26
- "class",
27
- `${e} ${r}`.trim()
28
- );
28
+ t.setAttribute("class", `${e} ${r}`.trim());
29
29
  }
30
30
  return new XMLSerializer().serializeToString(t);
31
31
  }, [i, n, r]);
package/dist/components/InputBase/variants.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
17
17
  primary: string;
18
18
  error: string;
19
19
  };
20
- }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2", {
20
+ }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary", {
21
21
  size: {
22
22
  sm: string;
23
23
  md: string;
@@ -55,7 +55,7 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
55
55
  primary: string;
56
56
  error: string;
57
57
  };
58
- }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2", unknown, unknown, undefined>>;
58
+ }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary", unknown, unknown, undefined>>;
59
59
  export declare const textAreaVariants: import('tailwind-variants').TVReturnType<{
60
60
  size: {
61
61
  sm: string;
package/dist/components/InputBase/variants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { tv as e } from "../../node_modules/tailwind-variants/dist/index.js";
2
2
  const a = e({
3
- base: "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2",
3
+ base: "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary",
4
4
  variants: {
5
5
  size: {
6
6
  sm: "py-xs-2 px-xs h-lg text-base-sm",
package/dist/tokens/semantic.d.ts CHANGED
@@ -49,14 +49,14 @@ export declare const semanticTokens: {
49
49
  readonly 'accent-yellow-subtle-disabled': "yellow-50";
50
50
  readonly 'accent-yellow-subtle-hover': "yellow-200";
51
51
  readonly 'accent-yellow-subtle-pressed': "yellow-300";
52
- readonly 'brand-disabled': "orange-200";
53
- readonly 'brand-hover': "orange-700";
54
- readonly 'brand-pressed': "orange-800";
55
- readonly 'brand-rest': "orange-600";
56
- readonly 'brand-subtle-disabled': "orange-100";
57
- readonly 'brand-subtle-hover': "orange-200";
58
- readonly 'brand-subtle-pressed': "orange-300";
59
- readonly 'brand-subtle-rest': "orange-100";
52
+ readonly 'brand-disabled': "brand-300";
53
+ readonly 'brand-hover': "brand-700";
54
+ readonly 'brand-pressed': "brand-800";
55
+ readonly 'brand-rest': "brand-600";
56
+ readonly 'brand-subtle-disabled': "brand-200";
57
+ readonly 'brand-subtle-hover': "brand-300";
58
+ readonly 'brand-subtle-pressed': "brand-400";
59
+ readonly 'brand-subtle-rest': "brand-200";
60
60
  readonly card: "white";
61
61
  readonly dialog: "white";
62
62
  readonly input: "white";
@@ -80,15 +80,15 @@ export declare const semanticTokens: {
80
80
  readonly 'segment-control-item-hover': "neutral-100";
81
81
  readonly 'segment-control-item-selected': "white";
82
82
  readonly 'segment-control-item-selected-disabled': "neutral-100";
83
- readonly 'selected-bolder-rest': "orange-200";
84
- readonly 'selected-boldest-disabled': "orange-50";
85
- readonly 'selected-boldest-hover': "orange-700";
86
- readonly 'selected-boldest-pressed': "orange-800";
87
- readonly 'selected-boldest-rest': "orange-600";
88
- readonly 'selected-disabled': "orange-100";
89
- readonly 'selected-hover': "orange-200";
90
- readonly 'selected-pressed': "orange-300";
91
- readonly 'selected-rest': "orange-100";
83
+ readonly 'selected-bolder-rest': "brand-300";
84
+ readonly 'selected-boldest-disabled': "brand-300";
85
+ readonly 'selected-boldest-hover': "brand-700";
86
+ readonly 'selected-boldest-pressed': "brand-800";
87
+ readonly 'selected-boldest-rest': "brand-600";
88
+ readonly 'selected-disabled': "brand-200";
89
+ readonly 'selected-hover': "brand-300";
90
+ readonly 'selected-pressed': "brand-400";
91
+ readonly 'selected-rest': "brand-200";
92
92
  readonly 'surface-level-1': "white";
93
93
  readonly 'surface-level-2': "neutral-100";
94
94
  readonly 'surface-level-3': "white";
@@ -123,17 +123,17 @@ export declare const semanticTokens: {
123
123
  readonly 'accent-yellow': "yellow-600";
124
124
  readonly 'accent-yellow-disabled': "yellow-400";
125
125
  readonly 'accent-yellow-strong': "yellow-800";
126
- readonly 'brand-disabled': "orange-300";
127
- readonly 'brand-disabled-strong': "orange-100";
128
- readonly 'brand-hover': "orange-500";
129
- readonly 'brand-pressed': "orange-700";
130
- readonly 'brand-pressed-strong': "orange-800";
131
- readonly 'brand-rest': "orange-600";
132
- readonly 'brand-rest-strong': "orange-800";
133
- readonly 'btn-primary': "white";
134
- readonly 'btn-primary-disabled': "orange-300";
135
- readonly checkbox: "white";
136
- readonly 'checkbox-disabled': "white";
126
+ readonly 'brand-disabled': "brand-500";
127
+ readonly 'brand-disabled-strong': "brand-100";
128
+ readonly 'brand-hover': "brand-500";
129
+ readonly 'brand-pressed': "brand-700";
130
+ readonly 'brand-pressed-strong': "brand-800";
131
+ readonly 'brand-rest': "brand-700";
132
+ readonly 'brand-rest-strong': "brand-800";
133
+ readonly 'btn-primary': "neutral-950";
134
+ readonly 'btn-primary-disabled': "neutral-400";
135
+ readonly checkbox: "neutral-950";
136
+ readonly 'checkbox-disabled': "neutral-400";
137
137
  readonly 'link-disabled': "neutral-300";
138
138
  readonly 'link-hover': "blue-500";
139
139
  readonly 'link-pressed': "blue-700";
@@ -146,31 +146,31 @@ export declare const semanticTokens: {
146
146
  readonly 'neutral-main-static': "neutral-900";
147
147
  readonly 'neutral-subtle': "neutral-600";
148
148
  readonly 'neutral-subtlest': "neutral-500";
149
- readonly 'selected-bold': "white";
150
- readonly 'selected-disabled': "orange-300";
151
- readonly 'selected-disabled-strong': "orange-100";
152
- readonly 'selected-hover': "orange-500";
153
- readonly 'selected-pressed': "orange-700";
154
- readonly 'selected-rest': "orange-600";
155
- readonly 'selected-strong': "orange-800";
156
- readonly 'selected-subtle': "orange-600";
149
+ readonly 'selected-bold': "neutral-900";
150
+ readonly 'selected-disabled': "neutral-400";
151
+ readonly 'selected-disabled-strong': "neutral-300";
152
+ readonly 'selected-hover': "neutral-800";
153
+ readonly 'selected-pressed': "neutral-950";
154
+ readonly 'selected-rest': "neutral-900";
155
+ readonly 'selected-strong': "neutral-950";
156
+ readonly 'selected-subtle': "neutral-600";
157
157
  };
158
158
  readonly border: {
159
- readonly active: "orange-600";
160
- readonly 'active-light': "orange-300";
161
- readonly 'active-strong': "orange-800";
159
+ readonly active: "brand-700";
160
+ readonly 'active-light': "brand-300";
161
+ readonly 'active-strong': "brand-800";
162
162
  readonly card: "neutral-200";
163
163
  readonly dialog: "neutral-200";
164
164
  readonly error: "fg-accent-error";
165
165
  readonly 'error-light': "fg-accent-error-disabled";
166
166
  readonly 'error-strong': "fg-accent-error-strong";
167
- readonly indicator: "orange-600";
168
- readonly 'indicator-disabled': "orange-300";
167
+ readonly indicator: "brand-700";
168
+ readonly 'indicator-disabled': "brand-300";
169
169
  readonly info: "fg-accent-info";
170
170
  readonly 'info-light': "fg-accent-info-disabled";
171
171
  readonly 'info-strong': "fg-accent-info-strong";
172
172
  readonly input: "neutral-300";
173
- readonly 'input-active': "orange-600";
173
+ readonly 'input-active': "brand-700";
174
174
  readonly 'input-disabled': "neutral-200";
175
175
  readonly inverse: "white";
176
176
  readonly 'inverse-static': "white";
@@ -180,10 +180,10 @@ export declare const semanticTokens: {
180
180
  readonly 'neutral-strong': "neutral-300";
181
181
  readonly 'neutral-strongest': "neutral-400";
182
182
  readonly 'segment-control': "transparent";
183
- readonly selected: "orange-600";
184
- readonly 'selected-disabled': "orange-300";
185
- readonly 'selected-secondary': "orange-600";
186
- readonly 'selected-secondary-disabled': "orange-300";
183
+ readonly selected: "brand-700";
184
+ readonly 'selected-disabled': "brand-300";
185
+ readonly 'selected-secondary': "brand-700";
186
+ readonly 'selected-secondary-disabled': "brand-300";
187
187
  readonly success: "fg-accent-success";
188
188
  readonly 'success-light': "fg-accent-success-disabled";
189
189
  readonly 'success-strong': "fg-accent-success-strong";
@@ -262,14 +262,14 @@ export declare const semanticTokens: {
262
262
  readonly 'accent-yellow-subtle-disabled': "yellow-950";
263
263
  readonly 'accent-yellow-subtle-hover': "yellow-800";
264
264
  readonly 'accent-yellow-subtle-pressed': "yellow-800";
265
- readonly 'brand-disabled': "orange-900";
266
- readonly 'brand-hover': "orange-300";
267
- readonly 'brand-pressed': "orange-700";
268
- readonly 'brand-rest': "orange-400";
269
- readonly 'brand-subtle-disabled': "orange-900";
270
- readonly 'brand-subtle-hover': "orange-800";
271
- readonly 'brand-subtle-pressed': "orange-950";
272
- readonly 'brand-subtle-rest': "orange-900";
265
+ readonly 'brand-disabled': "brand-900";
266
+ readonly 'brand-hover': "brand-300";
267
+ readonly 'brand-pressed': "brand-700";
268
+ readonly 'brand-rest': "brand-400";
269
+ readonly 'brand-subtle-disabled': "brand-900";
270
+ readonly 'brand-subtle-hover': "brand-800";
271
+ readonly 'brand-subtle-pressed': "brand-950";
272
+ readonly 'brand-subtle-rest': "brand-900";
273
273
  readonly card: "neutral-800";
274
274
  readonly dialog: "neutral-800";
275
275
  readonly input: "neutral-950";
@@ -293,15 +293,15 @@ export declare const semanticTokens: {
293
293
  readonly 'segment-control-item-hover': "neutral-500";
294
294
  readonly 'segment-control-item-selected': "neutral-600";
295
295
  readonly 'segment-control-item-selected-disabled': "neutral-800";
296
- readonly 'selected-bolder-rest': "orange-900";
297
- readonly 'selected-boldest-disabled': "orange-950";
298
- readonly 'selected-boldest-hover': "orange-300";
299
- readonly 'selected-boldest-pressed': "orange-700";
300
- readonly 'selected-boldest-rest': "orange-400";
301
- readonly 'selected-disabled': "orange-900";
302
- readonly 'selected-hover': "orange-800";
303
- readonly 'selected-pressed': "orange-950";
304
- readonly 'selected-rest': "orange-900";
296
+ readonly 'selected-bolder-rest': "brand-900";
297
+ readonly 'selected-boldest-disabled': "brand-900";
298
+ readonly 'selected-boldest-hover': "brand-300";
299
+ readonly 'selected-boldest-pressed': "brand-700";
300
+ readonly 'selected-boldest-rest': "brand-400";
301
+ readonly 'selected-disabled': "brand-950";
302
+ readonly 'selected-hover': "brand-900";
303
+ readonly 'selected-pressed': "brand-800";
304
+ readonly 'selected-rest': "brand-950";
305
305
  readonly 'surface-level-1': "neutral-950";
306
306
  readonly 'surface-level-2': "neutral-900";
307
307
  readonly 'surface-level-3': "neutral-800";
@@ -336,15 +336,15 @@ export declare const semanticTokens: {
336
336
  readonly 'accent-yellow': "yellow-400";
337
337
  readonly 'accent-yellow-disabled': "yellow-600";
338
338
  readonly 'accent-yellow-strong': "yellow-300";
339
- readonly 'brand-disabled': "orange-700";
340
- readonly 'brand-disabled-strong': "orange-900";
341
- readonly 'brand-hover': "orange-500";
342
- readonly 'brand-pressed': "orange-300";
343
- readonly 'brand-pressed-strong': "orange-400";
344
- readonly 'brand-rest': "orange-400";
345
- readonly 'brand-rest-strong': "orange-300";
339
+ readonly 'brand-disabled': "brand-800";
340
+ readonly 'brand-disabled-strong': "brand-900";
341
+ readonly 'brand-hover': "brand-500";
342
+ readonly 'brand-pressed': "brand-300";
343
+ readonly 'brand-pressed-strong': "brand-400";
344
+ readonly 'brand-rest': "brand-400";
345
+ readonly 'brand-rest-strong': "brand-500";
346
346
  readonly 'btn-primary': "neutral-900";
347
- readonly 'btn-primary-disabled': "orange-700";
347
+ readonly 'btn-primary-disabled': "brand-800";
348
348
  readonly checkbox: "neutral-900";
349
349
  readonly 'checkbox-disabled': "neutral-900";
350
350
  readonly 'link-disabled': "neutral-500";
@@ -360,30 +360,30 @@ export declare const semanticTokens: {
360
360
  readonly 'neutral-subtle': "neutral-300";
361
361
  readonly 'neutral-subtlest': "neutral-400";
362
362
  readonly 'selected-bold': "neutral-900";
363
- readonly 'selected-disabled': "orange-700";
364
- readonly 'selected-disabled-strong': "orange-900";
365
- readonly 'selected-hover': "orange-500";
366
- readonly 'selected-pressed': "orange-300";
367
- readonly 'selected-rest': "orange-400";
368
- readonly 'selected-strong': "orange-400";
369
- readonly 'selected-subtle': "orange-400";
363
+ readonly 'selected-disabled': "neutral-500";
364
+ readonly 'selected-disabled-strong': "neutral-600";
365
+ readonly 'selected-hover': "white";
366
+ readonly 'selected-pressed': "white";
367
+ readonly 'selected-rest': "white";
368
+ readonly 'selected-strong': "white";
369
+ readonly 'selected-subtle': "white";
370
370
  };
371
371
  readonly border: {
372
- readonly active: "orange-400";
373
- readonly 'active-light': "orange-700";
374
- readonly 'active-strong': "orange-300";
372
+ readonly active: "brand-400";
373
+ readonly 'active-light': "brand-700";
374
+ readonly 'active-strong': "brand-500";
375
375
  readonly card: "neutral-700";
376
376
  readonly dialog: "neutral-700";
377
377
  readonly error: "fg-accent-error";
378
378
  readonly 'error-light': "fg-accent-error-disabled";
379
379
  readonly 'error-strong': "fg-accent-error-strong";
380
- readonly indicator: "orange-400";
381
- readonly 'indicator-disabled': "orange-700";
380
+ readonly indicator: "brand-400";
381
+ readonly 'indicator-disabled': "brand-700";
382
382
  readonly info: "fg-accent-info";
383
383
  readonly 'info-light': "fg-accent-info-disabled";
384
384
  readonly 'info-strong': "fg-accent-info-strong";
385
385
  readonly input: "neutral-600";
386
- readonly 'input-active': "orange-400";
386
+ readonly 'input-active': "brand-400";
387
387
  readonly 'input-disabled': "neutral-700";
388
388
  readonly inverse: "neutral-900";
389
389
  readonly 'inverse-static': "white";
@@ -393,10 +393,10 @@ export declare const semanticTokens: {
393
393
  readonly 'neutral-strong': "neutral-600";
394
394
  readonly 'neutral-strongest': "neutral-500";
395
395
  readonly 'segment-control': "neutral-700";
396
- readonly selected: "orange-400";
397
- readonly 'selected-disabled': "orange-700";
398
- readonly 'selected-secondary': "orange-400";
399
- readonly 'selected-secondary-disabled': "orange-700";
396
+ readonly selected: "brand-400";
397
+ readonly 'selected-disabled': "brand-700";
398
+ readonly 'selected-secondary': "brand-400";
399
+ readonly 'selected-secondary-disabled': "brand-700";
400
400
  readonly success: "fg-accent-success";
401
401
  readonly 'success-light': "fg-accent-success-disabled";
402
402
  readonly 'success-strong': "fg-accent-success-strong";
package/dist/tokens/semantic.js CHANGED
@@ -49,14 +49,14 @@ const e = {
49
49
  "accent-yellow-subtle-disabled": "yellow-50",
50
50
  "accent-yellow-subtle-hover": "yellow-200",
51
51
  "accent-yellow-subtle-pressed": "yellow-300",
52
- "brand-disabled": "orange-200",
53
- "brand-hover": "orange-700",
54
- "brand-pressed": "orange-800",
55
- "brand-rest": "orange-600",
56
- "brand-subtle-disabled": "orange-100",
57
- "brand-subtle-hover": "orange-200",
58
- "brand-subtle-pressed": "orange-300",
59
- "brand-subtle-rest": "orange-100",
52
+ "brand-disabled": "brand-300",
53
+ "brand-hover": "brand-700",
54
+ "brand-pressed": "brand-800",
55
+ "brand-rest": "brand-600",
56
+ "brand-subtle-disabled": "brand-200",
57
+ "brand-subtle-hover": "brand-300",
58
+ "brand-subtle-pressed": "brand-400",
59
+ "brand-subtle-rest": "brand-200",
60
60
  card: "white",
61
61
  dialog: "white",
62
62
  input: "white",
@@ -80,15 +80,15 @@ const e = {
80
80
  "segment-control-item-hover": "neutral-100",
81
81
  "segment-control-item-selected": "white",
82
82
  "segment-control-item-selected-disabled": "neutral-100",
83
- "selected-bolder-rest": "orange-200",
84
- "selected-boldest-disabled": "orange-50",
85
- "selected-boldest-hover": "orange-700",
86
- "selected-boldest-pressed": "orange-800",
87
- "selected-boldest-rest": "orange-600",
88
- "selected-disabled": "orange-100",
89
- "selected-hover": "orange-200",
90
- "selected-pressed": "orange-300",
91
- "selected-rest": "orange-100",
83
+ "selected-bolder-rest": "brand-300",
84
+ "selected-boldest-disabled": "brand-300",
85
+ "selected-boldest-hover": "brand-700",
86
+ "selected-boldest-pressed": "brand-800",
87
+ "selected-boldest-rest": "brand-600",
88
+ "selected-disabled": "brand-200",
89
+ "selected-hover": "brand-300",
90
+ "selected-pressed": "brand-400",
91
+ "selected-rest": "brand-200",
92
92
  "surface-level-1": "white",
93
93
  "surface-level-2": "neutral-100",
94
94
  "surface-level-3": "white",
@@ -123,17 +123,17 @@ const e = {
123
123
  "accent-yellow": "yellow-600",
124
124
  "accent-yellow-disabled": "yellow-400",
125
125
  "accent-yellow-strong": "yellow-800",
126
- "brand-disabled": "orange-300",
127
- "brand-disabled-strong": "orange-100",
128
- "brand-hover": "orange-500",
129
- "brand-pressed": "orange-700",
130
- "brand-pressed-strong": "orange-800",
131
- "brand-rest": "orange-600",
132
- "brand-rest-strong": "orange-800",
133
- "btn-primary": "white",
134
- "btn-primary-disabled": "orange-300",
135
- checkbox: "white",
136
- "checkbox-disabled": "white",
126
+ "brand-disabled": "brand-500",
127
+ "brand-disabled-strong": "brand-100",
128
+ "brand-hover": "brand-500",
129
+ "brand-pressed": "brand-700",
130
+ "brand-pressed-strong": "brand-800",
131
+ "brand-rest": "brand-700",
132
+ "brand-rest-strong": "brand-800",
133
+ "btn-primary": "neutral-950",
134
+ "btn-primary-disabled": "neutral-400",
135
+ checkbox: "neutral-950",
136
+ "checkbox-disabled": "neutral-400",
137
137
  "link-disabled": "neutral-300",
138
138
  "link-hover": "blue-500",
139
139
  "link-pressed": "blue-700",
@@ -146,31 +146,31 @@ const e = {
146
146
  "neutral-main-static": "neutral-900",
147
147
  "neutral-subtle": "neutral-600",
148
148
  "neutral-subtlest": "neutral-500",
149
- "selected-bold": "white",
150
- "selected-disabled": "orange-300",
151
- "selected-disabled-strong": "orange-100",
152
- "selected-hover": "orange-500",
153
- "selected-pressed": "orange-700",
154
- "selected-rest": "orange-600",
155
- "selected-strong": "orange-800",
156
- "selected-subtle": "orange-600"
149
+ "selected-bold": "neutral-900",
150
+ "selected-disabled": "neutral-400",
151
+ "selected-disabled-strong": "neutral-300",
152
+ "selected-hover": "neutral-800",
153
+ "selected-pressed": "neutral-950",
154
+ "selected-rest": "neutral-900",
155
+ "selected-strong": "neutral-950",
156
+ "selected-subtle": "neutral-600"
157
157
  },
158
158
  border: {
159
- active: "orange-600",
160
- "active-light": "orange-300",
161
- "active-strong": "orange-800",
159
+ active: "brand-700",
160
+ "active-light": "brand-300",
161
+ "active-strong": "brand-800",
162
162
  card: "neutral-200",
163
163
  dialog: "neutral-200",
164
164
  error: "fg-accent-error",
165
165
  "error-light": "fg-accent-error-disabled",
166
166
  "error-strong": "fg-accent-error-strong",
167
- indicator: "orange-600",
168
- "indicator-disabled": "orange-300",
167
+ indicator: "brand-700",
168
+ "indicator-disabled": "brand-300",
169
169
  info: "fg-accent-info",
170
170
  "info-light": "fg-accent-info-disabled",
171
171
  "info-strong": "fg-accent-info-strong",
172
172
  input: "neutral-300",
173
- "input-active": "orange-600",
173
+ "input-active": "brand-700",
174
174
  "input-disabled": "neutral-200",
175
175
  inverse: "white",
176
176
  "inverse-static": "white",
@@ -180,10 +180,10 @@ const e = {
180
180
  "neutral-strong": "neutral-300",
181
181
  "neutral-strongest": "neutral-400",
182
182
  "segment-control": "transparent",
183
- selected: "orange-600",
184
- "selected-disabled": "orange-300",
185
- "selected-secondary": "orange-600",
186
- "selected-secondary-disabled": "orange-300",
183
+ selected: "brand-700",
184
+ "selected-disabled": "brand-300",
185
+ "selected-secondary": "brand-700",
186
+ "selected-secondary-disabled": "brand-300",
187
187
  success: "fg-accent-success",
188
188
  "success-light": "fg-accent-success-disabled",
189
189
  "success-strong": "fg-accent-success-strong",
@@ -262,14 +262,14 @@ const e = {
262
262
  "accent-yellow-subtle-disabled": "yellow-950",
263
263
  "accent-yellow-subtle-hover": "yellow-800",
264
264
  "accent-yellow-subtle-pressed": "yellow-800",
265
- "brand-disabled": "orange-900",
266
- "brand-hover": "orange-300",
267
- "brand-pressed": "orange-700",
268
- "brand-rest": "orange-400",
269
- "brand-subtle-disabled": "orange-900",
270
- "brand-subtle-hover": "orange-800",
271
- "brand-subtle-pressed": "orange-950",
272
- "brand-subtle-rest": "orange-900",
265
+ "brand-disabled": "brand-900",
266
+ "brand-hover": "brand-300",
267
+ "brand-pressed": "brand-700",
268
+ "brand-rest": "brand-400",
269
+ "brand-subtle-disabled": "brand-900",
270
+ "brand-subtle-hover": "brand-800",
271
+ "brand-subtle-pressed": "brand-950",
272
+ "brand-subtle-rest": "brand-900",
273
273
  card: "neutral-800",
274
274
  dialog: "neutral-800",
275
275
  input: "neutral-950",
@@ -293,15 +293,15 @@ const e = {
293
293
  "segment-control-item-hover": "neutral-500",
294
294
  "segment-control-item-selected": "neutral-600",
295
295
  "segment-control-item-selected-disabled": "neutral-800",
296
- "selected-bolder-rest": "orange-900",
297
- "selected-boldest-disabled": "orange-950",
298
- "selected-boldest-hover": "orange-300",
299
- "selected-boldest-pressed": "orange-700",
300
- "selected-boldest-rest": "orange-400",
301
- "selected-disabled": "orange-900",
302
- "selected-hover": "orange-800",
303
- "selected-pressed": "orange-950",
304
- "selected-rest": "orange-900",
296
+ "selected-bolder-rest": "brand-900",
297
+ "selected-boldest-disabled": "brand-900",
298
+ "selected-boldest-hover": "brand-300",
299
+ "selected-boldest-pressed": "brand-700",
300
+ "selected-boldest-rest": "brand-400",
301
+ "selected-disabled": "brand-950",
302
+ "selected-hover": "brand-900",
303
+ "selected-pressed": "brand-800",
304
+ "selected-rest": "brand-950",
305
305
  "surface-level-1": "neutral-950",
306
306
  "surface-level-2": "neutral-900",
307
307
  "surface-level-3": "neutral-800",
@@ -336,15 +336,15 @@ const e = {
336
336
  "accent-yellow": "yellow-400",
337
337
  "accent-yellow-disabled": "yellow-600",
338
338
  "accent-yellow-strong": "yellow-300",
339
- "brand-disabled": "orange-700",
340
- "brand-disabled-strong": "orange-900",
341
- "brand-hover": "orange-500",
342
- "brand-pressed": "orange-300",
343
- "brand-pressed-strong": "orange-400",
344
- "brand-rest": "orange-400",
345
- "brand-rest-strong": "orange-300",
339
+ "brand-disabled": "brand-800",
340
+ "brand-disabled-strong": "brand-900",
341
+ "brand-hover": "brand-500",
342
+ "brand-pressed": "brand-300",
343
+ "brand-pressed-strong": "brand-400",
344
+ "brand-rest": "brand-400",
345
+ "brand-rest-strong": "brand-500",
346
346
  "btn-primary": "neutral-900",
347
- "btn-primary-disabled": "orange-700",
347
+ "btn-primary-disabled": "brand-800",
348
348
  checkbox: "neutral-900",
349
349
  "checkbox-disabled": "neutral-900",
350
350
  "link-disabled": "neutral-500",
@@ -360,30 +360,30 @@ const e = {
360
360
  "neutral-subtle": "neutral-300",
361
361
  "neutral-subtlest": "neutral-400",
362
362
  "selected-bold": "neutral-900",
363
- "selected-disabled": "orange-700",
364
- "selected-disabled-strong": "orange-900",
365
- "selected-hover": "orange-500",
366
- "selected-pressed": "orange-300",
367
- "selected-rest": "orange-400",
368
- "selected-strong": "orange-400",
369
- "selected-subtle": "orange-400"
363
+ "selected-disabled": "neutral-500",
364
+ "selected-disabled-strong": "neutral-600",
365
+ "selected-hover": "white",
366
+ "selected-pressed": "white",
367
+ "selected-rest": "white",
368
+ "selected-strong": "white",
369
+ "selected-subtle": "white"
370
370
  },
371
371
  border: {
372
- active: "orange-400",
373
- "active-light": "orange-700",
374
- "active-strong": "orange-300",
372
+ active: "brand-400",
373
+ "active-light": "brand-700",
374
+ "active-strong": "brand-500",
375
375
  card: "neutral-700",
376
376
  dialog: "neutral-700",
377
377
  error: "fg-accent-error",
378
378
  "error-light": "fg-accent-error-disabled",
379
379
  "error-strong": "fg-accent-error-strong",
380
- indicator: "orange-400",
381
- "indicator-disabled": "orange-700",
380
+ indicator: "brand-400",
381
+ "indicator-disabled": "brand-700",
382
382
  info: "fg-accent-info",
383
383
  "info-light": "fg-accent-info-disabled",
384
384
  "info-strong": "fg-accent-info-strong",
385
385
  input: "neutral-600",
386
- "input-active": "orange-400",
386
+ "input-active": "brand-400",
387
387
  "input-disabled": "neutral-700",
388
388
  inverse: "neutral-900",
389
389
  "inverse-static": "white",
@@ -393,10 +393,10 @@ const e = {
393
393
  "neutral-strong": "neutral-600",
394
394
  "neutral-strongest": "neutral-500",
395
395
  "segment-control": "neutral-700",
396
- selected: "orange-400",
397
- "selected-disabled": "orange-700",
398
- "selected-secondary": "orange-400",
399
- "selected-secondary-disabled": "orange-700",
396
+ selected: "brand-400",
397
+ "selected-disabled": "brand-700",
398
+ "selected-secondary": "brand-400",
399
+ "selected-secondary-disabled": "brand-700",
400
400
  success: "fg-accent-success",
401
401
  "success-light": "fg-accent-success-disabled",
402
402
  "success-strong": "fg-accent-success-strong",
package/dist/tokens/theme-types.d.ts CHANGED
@@ -60,4 +60,5 @@ export type SemanticTheme = {
60
60
  export type Theme = {
61
61
  dark?: SemanticTheme;
62
62
  light?: SemanticTheme;
63
+ brand?: Record<string, string>;
63
64
  };
package/dist/tokens/utils.d.ts CHANGED
@@ -8,13 +8,13 @@ export type ThemeName = 'light' | 'dark';
8
8
  export declare const getSystemTheme: () => ThemeName;
9
9
  export declare const getStoredTheme: (enableCustomPersister?: boolean) => ThemeName | null;
10
10
  export declare const generateCSSVariables: (theme: ThemeName) => string;
11
- export declare const generateCustomThemeCSSVariables: (themeData: SemanticTheme) => string;
11
+ export declare const generateCustomThemeCSSVariables: (themeData: SemanticTheme, brand?: Record<string, string>) => string;
12
12
  export declare const applyTheme: (theme: ThemeName, customTheme?: Theme, enableCustomPersister?: boolean) => void;
13
13
  export declare const themeUtils: {
14
14
  getSystemTheme: () => ThemeName;
15
15
  getStoredTheme: (enableCustomPersister?: boolean) => ThemeName | null;
16
16
  generateCSSVariables: (theme: ThemeName) => string;
17
- generateCustomThemeCSSVariables: (themeData: SemanticTheme) => string;
17
+ generateCustomThemeCSSVariables: (themeData: SemanticTheme, brand?: Record<string, string>) => string;
18
18
  applyTheme: (theme: ThemeName, customTheme?: Theme, enableCustomPersister?: boolean) => void;
19
19
  getToken: (category: keyof typeof semanticTokens.light, token: string, theme?: ThemeName) => never;
20
20
  getCustomToken: (customTheme: Theme, category: keyof SemanticTheme, token: string, theme?: ThemeName) => undefined;
package/dist/tokens/utils.js CHANGED
@@ -1,95 +1,104 @@
1
- import { baseColors as g, alphaColors as s, colorScales as $, ringColors as d } from "./primitives/colors.js";
1
+ import { baseColors as $, alphaColors as s, colorScales as g, ringColors as d } from "./primitives/colors.js";
2
2
  import { semanticTokens as a } from "./semantic.js";
3
3
  import "react/jsx-runtime";
4
4
  import "react";
5
5
  import "./context.js";
6
- const m = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", u = (r = !1) => typeof window > "u" || r ? null : localStorage.getItem("mcr-theme") || null, i = (r) => {
7
- const c = a[r];
6
+ const h = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", m = (o = !1) => typeof window > "u" || o ? null : localStorage.getItem("mcr-theme") || null, i = (o) => {
7
+ const c = a[o];
8
8
  let t = "";
9
- return Object.entries(g).forEach(([e, o]) => {
10
- t += `--color-${e}: ${o};
9
+ return Object.entries($).forEach(([e, r]) => {
10
+ t += `--color-${e}: ${r};
11
11
  `;
12
- }), Object.entries(s.white).forEach(([e, o]) => {
13
- t += `--color-white-alpha-${e.replace(/[/.]/g, "-")}: ${o};
12
+ }), Object.entries(s.white).forEach(([e, r]) => {
13
+ t += `--color-white-alpha-${e.replace(/[/.]/g, "-")}: ${r};
14
14
  `;
15
- }), Object.entries(s.black).forEach(([e, o]) => {
16
- t += `--color-black-alpha-${e.replace(/[/.]/g, "-")}: ${o};
15
+ }), Object.entries(s.black).forEach(([e, r]) => {
16
+ t += `--color-black-alpha-${e.replace(/[/.]/g, "-")}: ${r};
17
17
  `;
18
- }), Object.entries($).forEach(([e, o]) => {
19
- Object.entries(o).forEach(([n, l]) => {
18
+ }), Object.entries(g).forEach(([e, r]) => {
19
+ Object.entries(r).forEach(([n, l]) => {
20
20
  t += `--color-${e}-${n}: ${l};
21
21
  `;
22
22
  });
23
- }), Object.entries(c.bg).forEach(([e, o]) => {
24
- t += `--color-bg-${e}: var(--color-${o});
23
+ }), Object.entries(c.bg).forEach(([e, r]) => {
24
+ t += `--color-bg-${e}: var(--color-${r});
25
25
  `;
26
- }), Object.entries(c.fg).forEach(([e, o]) => {
27
- t += `--color-fg-${e}: var(--color-${o});
26
+ }), Object.entries(c.fg).forEach(([e, r]) => {
27
+ t += `--color-fg-${e}: var(--color-${r});
28
28
  `;
29
- }), Object.entries(c.border).forEach(([e, o]) => {
30
- t += `--color-border-${e}: var(--color-${o});
29
+ }), Object.entries(c.border).forEach(([e, r]) => {
30
+ t += `--color-border-${e}: var(--color-${r});
31
31
  `;
32
- }), Object.entries(d).forEach(([e, o]) => {
33
- t += `--color-ring-${e}: ${o};
32
+ }), Object.entries(d).forEach(([e, r]) => {
33
+ t += `--color-ring-${e}: ${r};
34
+ `;
35
+ }), Object.entries(c.brand).forEach(([e, r]) => {
36
+ console.log(r, e), t += `--color-${e}: ${r};
34
37
  `;
35
38
  }), t;
36
- }, f = (r) => {
37
- let c = "";
38
- return r.font && Object.entries(r.font).forEach(([t, e]) => {
39
- c += `--font-${t}: ${e};
39
+ }, b = (o, c) => {
40
+ let t = "";
41
+ return o.font && Object.entries(o.font).forEach(([e, r]) => {
42
+ t += `--font-${e}: ${r};
40
43
  `;
41
- }), r.bg && Object.entries(r.bg).forEach(([t, e]) => {
42
- const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
43
- c += `--color-bg-${o}: ${e};
44
+ }), o.bg && Object.entries(o.bg).forEach(([e, r]) => {
45
+ const n = e.replace(/([A-Z])/g, "-$1").toLowerCase();
46
+ t += `--color-bg-${n}: ${r};
44
47
  `;
45
- }), r.fg && Object.entries(r.fg).forEach(([t, e]) => {
46
- const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
47
- c += `--color-fg-${o}: ${e};
48
+ }), o.fg && Object.entries(o.fg).forEach(([e, r]) => {
49
+ const n = e.replace(/([A-Z])/g, "-$1").toLowerCase();
50
+ t += `--color-fg-${n}: ${r};
48
51
  `;
49
- }), r.border && Object.entries(r.border).forEach(([t, e]) => {
50
- const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
51
- c += `--color-border-${o}: ${e};
52
+ }), o.border && Object.entries(o.border).forEach(([e, r]) => {
53
+ const n = e.replace(/([A-Z])/g, "-$1").toLowerCase();
54
+ t += `--color-border-${n}: ${r};
52
55
  `;
53
- }), r.ringColor && Object.entries(r.ringColor).forEach(([t, e]) => {
54
- const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
55
- c += `--color-ring-${o}: ${e};
56
+ }), o.ringColor && Object.entries(o.ringColor).forEach(([e, r]) => {
57
+ const n = e.replace(/([A-Z])/g, "-$1").toLowerCase();
58
+ t += `--color-ring-${n}: ${r};
56
59
  `;
57
- }), c;
58
- }, h = (r, c, t = !1) => {
60
+ }), c && Object.entries(c).forEach(([e, r]) => {
61
+ t += `--color-brand-${e}: ${r};
62
+ `;
63
+ }), t;
64
+ }, u = (o, c, t = !1) => {
59
65
  if (typeof document > "u") return;
60
- document.documentElement.setAttribute("data-theme", r);
61
- let e = i(r);
62
- if (c && c[r]) {
63
- const l = c[r], b = f(l);
64
- e += b;
66
+ document.documentElement.setAttribute("data-theme", o);
67
+ let e = i(o);
68
+ if (c && c[o]) {
69
+ const l = c[o], f = b(
70
+ l,
71
+ c.brand
72
+ );
73
+ e += f;
65
74
  }
66
- const o = document.getElementById("mcr-theme-variables");
67
- o && o.remove();
75
+ const r = document.getElementById("mcr-theme-variables");
76
+ r && r.remove();
68
77
  const n = document.createElement("style");
69
78
  n.id = "mcr-theme-variables", n.textContent = `
70
- [data-theme="${r}"] {
71
- color-scheme: ${r};
79
+ [data-theme="${o}"] {
80
+ color-scheme: ${o};
72
81
  ${e}
73
82
  }
74
- `, document.head.appendChild(n), t || localStorage.setItem("mcr-theme", r);
75
- }, y = {
76
- getSystemTheme: m,
77
- getStoredTheme: u,
83
+ `, document.head.appendChild(n), t || localStorage.setItem("mcr-theme", o);
84
+ }, w = {
85
+ getSystemTheme: h,
86
+ getStoredTheme: m,
78
87
  generateCSSVariables: i,
79
- generateCustomThemeCSSVariables: f,
80
- applyTheme: h,
88
+ generateCustomThemeCSSVariables: b,
89
+ applyTheme: u,
81
90
  // Get token value for current theme
82
- getToken: (r, c, t = "light") => a[t][r]?.[c],
91
+ getToken: (o, c, t = "light") => a[t][o]?.[c],
83
92
  // Get token value from custom theme
84
- getCustomToken: (r, c, t, e = "light") => r[e]?.[c]?.[t],
93
+ getCustomToken: (o, c, t, e = "light") => o[e]?.[c]?.[t],
85
94
  // Generate CSS custom property name
86
- getCSSVar: (r, c) => `var(--color-${r}-${c})`
95
+ getCSSVar: (o, c) => `var(--color-${o}-${c})`
87
96
  };
88
97
  export {
89
- h as applyTheme,
98
+ u as applyTheme,
90
99
  i as generateCSSVariables,
91
- f as generateCustomThemeCSSVariables,
92
- u as getStoredTheme,
93
- m as getSystemTheme,
94
- y as themeUtils
100
+ b as generateCustomThemeCSSVariables,
101
+ m as getStoredTheme,
102
+ h as getSystemTheme,
103
+ w as themeUtils
95
104
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mcr-design-systems",
3
3
  "private": false,
4
- "version": "1.0.14",
4
+ "version": "1.0.16",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",