@mediaradar/design-tokens 2.8.0 → 2.10.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 (8) hide show
  1. package/dist/DESIGN.md +3 -0
  2. package/dist/css/dark.css +3 -0
  3. package/dist/css/ref.css +6 -0
  4. package/dist/css/sys.css +3 -0
  5. package/dist/js/tokens.d.ts +12 -0
  6. package/dist/js/tokens.js +12 -0
  7. package/dist/tailwind/theme.css +3 -0
  8. package/package.json +1 -1
package/dist/DESIGN.md CHANGED
@@ -167,12 +167,15 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
167
167
  | --- | --- | --- |
168
168
  | canvas | #f4f2ee | #1c1814 |
169
169
  | surface | #fbfaf7 | #26211b |
170
+ | inverseSurface | #1f1b16 | #f4f2ee |
170
171
  | subtle | #ebe7e0 | #322c24 |
171
172
  | input | #fbfaf7 | #2e2820 |
172
173
  | text-primary | #1f1b16 | #f4f2ee |
173
174
  | text-secondary | #6b6358 | #b5aea1 |
174
175
  | text-tertiary | #5f574b | #a39b8c |
175
176
  | text-inverse | #fbfaf7 | #1c1814 |
177
+ | text-inverseSuccess | #7fc28f | #1d7a3b |
178
+ | text-inverseWarning | #e8c285 | #8a5a12 |
176
179
  | text-warning | #5c4118 | #e8c285 |
177
180
  | text-danger | #8b1018 | #ff7068 |
178
181
  | text-success | #1d4d2a | #7fc28f |
package/dist/css/dark.css CHANGED
@@ -1,12 +1,15 @@
1
1
  [data-theme="dark"] {
2
2
  --mr-color-canvas: var(--mr-ref-color-brand-warm-canvas-dark);
3
3
  --mr-color-surface: var(--mr-ref-color-brand-warm-surface-dark);
4
+ --mr-color-inverse-surface: var(--mr-ref-color-brand-warm-inverse-surface-dark);
4
5
  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-dark);
5
6
  --mr-color-input: var(--mr-ref-color-brand-warm-input-dark);
6
7
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-dark);
7
8
  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-dark);
8
9
  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-dark);
9
10
  --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-dark);
11
+ --mr-color-text-inverse-success: var(--mr-ref-color-brand-warm-text-inverse-success-dark);
12
+ --mr-color-text-inverse-warning: var(--mr-ref-color-brand-warm-text-inverse-warning-dark);
10
13
  --mr-color-text-warning: var(--mr-ref-color-brand-warm-text-warning-dark);
11
14
  --mr-color-text-danger: var(--mr-ref-color-brand-warm-text-danger-dark);
12
15
  --mr-color-text-success: var(--mr-ref-color-brand-warm-text-success-dark);
package/dist/css/ref.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --mr-ref-color-brand-warm-canvas-dark: #1c1814;
4
4
  --mr-ref-color-brand-warm-surface-light: #fbfaf7;
5
5
  --mr-ref-color-brand-warm-surface-dark: #26211b;
6
+ --mr-ref-color-brand-warm-inverse-surface-light: #1f1b16;
7
+ --mr-ref-color-brand-warm-inverse-surface-dark: #f4f2ee;
6
8
  --mr-ref-color-brand-warm-subtle-light: #ebe7e0;
7
9
  --mr-ref-color-brand-warm-subtle-dark: #322c24;
8
10
  --mr-ref-color-brand-warm-text-primary-light: #1f1b16;
@@ -15,6 +17,10 @@
15
17
  --mr-ref-color-brand-warm-text-link-dark: #8aa0ff;
16
18
  --mr-ref-color-brand-warm-text-inverse-light: #fbfaf7;
17
19
  --mr-ref-color-brand-warm-text-inverse-dark: #1c1814;
20
+ --mr-ref-color-brand-warm-text-inverse-success-light: #7fc28f;
21
+ --mr-ref-color-brand-warm-text-inverse-success-dark: #1d7a3b;
22
+ --mr-ref-color-brand-warm-text-inverse-warning-light: #e8c285;
23
+ --mr-ref-color-brand-warm-text-inverse-warning-dark: #8a5a12;
18
24
  --mr-ref-color-brand-warm-text-danger-light: #8b1018;
19
25
  --mr-ref-color-brand-warm-text-danger-dark: #ff7068;
20
26
  --mr-ref-color-brand-warm-text-warning-light: #5c4118;
package/dist/css/sys.css CHANGED
@@ -1,12 +1,15 @@
1
1
  :root {
2
2
  --mr-color-canvas: var(--mr-ref-color-brand-warm-canvas-light);
3
3
  --mr-color-surface: var(--mr-ref-color-brand-warm-surface-light);
4
+ --mr-color-inverse-surface: var(--mr-ref-color-brand-warm-inverse-surface-light);
4
5
  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-light);
5
6
  --mr-color-input: var(--mr-ref-color-brand-warm-input-light);
6
7
  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-light);
7
8
  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-light);
8
9
  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-light);
9
10
  --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-light);
11
+ --mr-color-text-inverse-success: var(--mr-ref-color-brand-warm-text-inverse-success-light);
12
+ --mr-color-text-inverse-warning: var(--mr-ref-color-brand-warm-text-inverse-warning-light);
10
13
  --mr-color-text-warning: var(--mr-ref-color-brand-warm-text-warning-light);
11
14
  --mr-color-text-danger: var(--mr-ref-color-brand-warm-text-danger-light);
12
15
  --mr-color-text-success: var(--mr-ref-color-brand-warm-text-success-light);
package/dist/js/tokens.d.ts CHANGED
@@ -6,12 +6,15 @@ export const mrButtonBorder: string;
6
6
  export const mrButtonTypographyFontfamily: string;
7
7
  export const mrSysColorCanvas: string;
8
8
  export const mrSysColorSurface: string;
9
+ export const mrSysColorInverseSurface: string;
9
10
  export const mrSysColorSubtle: string;
10
11
  export const mrSysColorInput: string;
11
12
  export const mrSysColorTextPrimary: string;
12
13
  export const mrSysColorTextSecondary: string;
13
14
  export const mrSysColorTextTertiary: string;
14
15
  export const mrSysColorTextInverse: string;
16
+ export const mrSysColorTextInverseSuccess: string;
17
+ export const mrSysColorTextInverseWarning: string;
15
18
  export const mrSysColorTextWarning: string;
16
19
  export const mrSysColorTextDanger: string;
17
20
  export const mrSysColorTextSuccess: string;
@@ -37,6 +40,8 @@ export const mrRefColorBrandWarmCanvasLight: string;
37
40
  export const mrRefColorBrandWarmCanvasDark: string;
38
41
  export const mrRefColorBrandWarmSurfaceLight: string;
39
42
  export const mrRefColorBrandWarmSurfaceDark: string;
43
+ export const mrRefColorBrandWarmInverseSurfaceLight: string;
44
+ export const mrRefColorBrandWarmInverseSurfaceDark: string;
40
45
  export const mrRefColorBrandWarmSubtleLight: string;
41
46
  export const mrRefColorBrandWarmSubtleDark: string;
42
47
  export const mrRefColorBrandWarmTextPrimaryLight: string;
@@ -49,6 +54,10 @@ export const mrRefColorBrandWarmTextLinkLight: string;
49
54
  export const mrRefColorBrandWarmTextLinkDark: string;
50
55
  export const mrRefColorBrandWarmTextInverseLight: string;
51
56
  export const mrRefColorBrandWarmTextInverseDark: string;
57
+ export const mrRefColorBrandWarmTextInverseSuccessLight: string;
58
+ export const mrRefColorBrandWarmTextInverseSuccessDark: string;
59
+ export const mrRefColorBrandWarmTextInverseWarningLight: string;
60
+ export const mrRefColorBrandWarmTextInverseWarningDark: string;
52
61
  export const mrRefColorBrandWarmTextDangerLight: string;
53
62
  export const mrRefColorBrandWarmTextDangerDark: string;
54
63
  export const mrRefColorBrandWarmTextWarningLight: string;
@@ -446,12 +455,15 @@ export const mrRefZToast: number;
446
455
  export const mrRefZTooltip: number;
447
456
  export const mrColorCanvas: string;
448
457
  export const mrColorSurface: string;
458
+ export const mrColorInverseSurface: string;
449
459
  export const mrColorSubtle: string;
450
460
  export const mrColorInput: string;
451
461
  export const mrColorTextPrimary: string;
452
462
  export const mrColorTextSecondary: string;
453
463
  export const mrColorTextTertiary: string;
454
464
  export const mrColorTextInverse: string;
465
+ export const mrColorTextInverseSuccess: string;
466
+ export const mrColorTextInverseWarning: string;
455
467
  export const mrColorTextWarning: string;
456
468
  export const mrColorTextDanger: string;
457
469
  export const mrColorTextSuccess: string;
package/dist/js/tokens.js CHANGED
@@ -7,12 +7,15 @@ export const mrButtonTypographyFontfamily =
7
7
  "'Instrument Sans', system-ui, sans-serif";
8
8
  export const mrSysColorCanvas = "#1c1814";
9
9
  export const mrSysColorSurface = "#26211b";
10
+ export const mrSysColorInverseSurface = "#f4f2ee";
10
11
  export const mrSysColorSubtle = "#322c24";
11
12
  export const mrSysColorInput = "#2e2820";
12
13
  export const mrSysColorTextPrimary = "#f4f2ee";
13
14
  export const mrSysColorTextSecondary = "#b5aea1";
14
15
  export const mrSysColorTextTertiary = "#a39b8c";
15
16
  export const mrSysColorTextInverse = "#1c1814";
17
+ export const mrSysColorTextInverseSuccess = "#1d7a3b";
18
+ export const mrSysColorTextInverseWarning = "#8a5a12";
16
19
  export const mrSysColorTextWarning = "#e8c285";
17
20
  export const mrSysColorTextDanger = "#ff7068";
18
21
  export const mrSysColorTextSuccess = "#7fc28f";
@@ -39,6 +42,8 @@ export const mrRefColorBrandWarmCanvasLight = "#f4f2ee";
39
42
  export const mrRefColorBrandWarmCanvasDark = "#1c1814";
40
43
  export const mrRefColorBrandWarmSurfaceLight = "#fbfaf7";
41
44
  export const mrRefColorBrandWarmSurfaceDark = "#26211b";
45
+ export const mrRefColorBrandWarmInverseSurfaceLight = "#1f1b16";
46
+ export const mrRefColorBrandWarmInverseSurfaceDark = "#f4f2ee";
42
47
  export const mrRefColorBrandWarmSubtleLight = "#ebe7e0";
43
48
  export const mrRefColorBrandWarmSubtleDark = "#322c24";
44
49
  export const mrRefColorBrandWarmTextPrimaryLight = "#1f1b16";
@@ -51,6 +56,10 @@ export const mrRefColorBrandWarmTextLinkLight = "#2747c4";
51
56
  export const mrRefColorBrandWarmTextLinkDark = "#8aa0ff";
52
57
  export const mrRefColorBrandWarmTextInverseLight = "#fbfaf7";
53
58
  export const mrRefColorBrandWarmTextInverseDark = "#1c1814";
59
+ export const mrRefColorBrandWarmTextInverseSuccessLight = "#7fc28f";
60
+ export const mrRefColorBrandWarmTextInverseSuccessDark = "#1d7a3b";
61
+ export const mrRefColorBrandWarmTextInverseWarningLight = "#e8c285";
62
+ export const mrRefColorBrandWarmTextInverseWarningDark = "#8a5a12";
54
63
  export const mrRefColorBrandWarmTextDangerLight = "#8b1018";
55
64
  export const mrRefColorBrandWarmTextDangerDark = "#ff7068";
56
65
  export const mrRefColorBrandWarmTextWarningLight = "#5c4118";
@@ -454,12 +463,15 @@ export const mrRefZToast = 1150; // Above modal, below tooltip. A toast reportin
454
463
  export const mrRefZTooltip = 1200;
455
464
  export const mrColorCanvas = "#f4f2ee";
456
465
  export const mrColorSurface = "#fbfaf7";
466
+ export const mrColorInverseSurface = "#1f1b16";
457
467
  export const mrColorSubtle = "#ebe7e0";
458
468
  export const mrColorInput = "#fbfaf7";
459
469
  export const mrColorTextPrimary = "#1f1b16";
460
470
  export const mrColorTextSecondary = "#6b6358";
461
471
  export const mrColorTextTertiary = "#5f574b";
462
472
  export const mrColorTextInverse = "#fbfaf7";
473
+ export const mrColorTextInverseSuccess = "#7fc28f";
474
+ export const mrColorTextInverseWarning = "#e8c285";
463
475
  export const mrColorTextWarning = "#5c4118";
464
476
  export const mrColorTextDanger = "#8b1018";
465
477
  export const mrColorTextSuccess = "#1d4d2a";
package/dist/tailwind/theme.css CHANGED
@@ -49,12 +49,15 @@
49
49
  --spacing-10px: var(--mr-ref-dimension-spacing-px-10);
50
50
  --color-canvas: var(--mr-color-canvas);
51
51
  --color-surface: var(--mr-color-surface);
52
+ --color-inverseSurface: var(--mr-color-inverse-surface);
52
53
  --color-subtle: var(--mr-color-subtle);
53
54
  --color-input: var(--mr-color-input);
54
55
  --color-text-primary: var(--mr-color-text-primary);
55
56
  --color-text-secondary: var(--mr-color-text-secondary);
56
57
  --color-text-tertiary: var(--mr-color-text-tertiary);
57
58
  --color-text-inverse: var(--mr-color-text-inverse);
59
+ --color-text-inverseSuccess: var(--mr-color-text-inverse-success);
60
+ --color-text-inverseWarning: var(--mr-color-text-inverse-warning);
58
61
  --color-text-warning: var(--mr-color-text-warning);
59
62
  --color-text-danger: var(--mr-color-text-danger);
60
63
  --color-text-success: var(--mr-color-text-success);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mediaradar/design-tokens",
3
- "version": "2.8.0",
3
+ "version": "2.10.0",
4
4
  "main": "dist/js/tokens.js",
5
5
  "types": "dist/js/tokens.d.ts",
6
6
  "type": "module",