@mediaradar/design-tokens 2.0.0

package/dist/css/ref.css

@@ -0,0 +1,350 @@
+:root {
+  --mr-ref-color-brand-warm-canvas-light: #f4f2ee;
+  --mr-ref-color-brand-warm-canvas-dark: #1c1814;
+  --mr-ref-color-brand-warm-surface-light: #fbfaf7;
+  --mr-ref-color-brand-warm-surface-dark: #26211b;
+  --mr-ref-color-brand-warm-subtle-light: #ebe7e0;
+  --mr-ref-color-brand-warm-subtle-dark: #322c24;
+  --mr-ref-color-brand-warm-text-primary-light: #1f1b16;
+  --mr-ref-color-brand-warm-text-primary-dark: #f4f2ee;
+  --mr-ref-color-brand-warm-text-secondary-light: #6b6358;
+  --mr-ref-color-brand-warm-text-secondary-dark: #b5aea1;
+  --mr-ref-color-brand-warm-text-tertiary-light: #5f574b;
+  --mr-ref-color-brand-warm-text-tertiary-dark: #a39b8c;
+  --mr-ref-color-brand-warm-text-link-light: #2747c4;
+  --mr-ref-color-brand-warm-text-link-dark: #8aa0ff;
+  --mr-ref-color-brand-warm-text-inverse-light: #fbfaf7;
+  --mr-ref-color-brand-warm-text-inverse-dark: #1c1814;
+  --mr-ref-color-brand-warm-text-danger-light: #8b1018;
+  --mr-ref-color-brand-warm-text-danger-dark: #ff7068;
+  --mr-ref-color-brand-warm-text-warning-light: #5c4118;
+  --mr-ref-color-brand-warm-text-warning-dark: #e8c285;
+  --mr-ref-color-brand-warm-text-success-light: #1d4d2a;
+  --mr-ref-color-brand-warm-text-success-dark: #7fc28f;
+  --mr-ref-color-brand-warm-border-default-light: #dcd6cb;
+  --mr-ref-color-brand-warm-border-default-dark: #3a3329;
+  --mr-ref-color-brand-warm-border-interactive: #6b6358;
+  --mr-ref-color-brand-warm-border-focus-light: #2747c4;
+  --mr-ref-color-brand-warm-border-focus-dark: #8aa0ff;
+  --mr-ref-color-brand-warm-border-focus-soft-light: rgba(39, 71, 196, 0.28);
+  --mr-ref-color-brand-warm-border-focus-soft-dark: rgba(138, 160, 255, 0.35);
+  --mr-ref-color-brand-warm-brand-primary-light: #f05323;
+  --mr-ref-color-brand-warm-brand-primary-dark: #ff7548;
+  --mr-ref-color-brand-warm-brand-primary-action-light: #2747c4;
+  --mr-ref-color-brand-warm-brand-primary-action-dark: #5b73dd;
+  --mr-ref-color-brand-warm-onprimary: #ffffff;
+  --mr-ref-color-brand-warm-brand-primary-soft-light: #ebe3d5;
+  --mr-ref-color-brand-warm-brand-primary-soft-dark: #3a322a;
+  --mr-ref-color-brand-warm-status-success-light: #1d7a3b;
+  --mr-ref-color-brand-warm-status-success-dark: #3a9555;
+  --mr-ref-color-brand-warm-status-warning-light: #b8843a;
+  --mr-ref-color-brand-warm-status-warning-dark: #d9a655;
+  --mr-ref-color-brand-warm-status-danger-light: #c53030;
+  --mr-ref-color-brand-warm-status-danger-dark: #e84a4a;
+  --mr-ref-color-brand-warm-status-onstatus: #ffffff;
+  --mr-ref-color-brand-warm-ai-tint-light: #e4e2f5;
+  --mr-ref-color-brand-warm-ai-tint-dark: #2b2e48;
+  --mr-ref-color-brand-warm-ai-ontint-light: #2747c4;
+  --mr-ref-color-brand-warm-ai-ontint-dark: #8aa0ff;
+  --mr-ref-color-brand-warm-ai-gradient-light: linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%);
+  --mr-ref-color-brand-warm-ai-gradient-dark: linear-gradient(135deg, #5b73dd 0%, #ff7548 60%, #ffb878 100%);
+  --mr-ref-color-primary-light-1: #f5f9ff;
+  --mr-ref-color-primary-light-2: #ebf4ff;
+  --mr-ref-color-primary-light-3: #d6e6ff;
+  --mr-ref-color-primary-light-4: #bdd8ff;
+  --mr-ref-color-primary-light-5: #9ec5ff;
+  --mr-ref-color-primary-light-6: #7ab0ff;
+  --mr-ref-color-primary-light-7: #5299ff;
+  --mr-ref-color-primary-light-8: #2e85ff;
+  --mr-ref-color-primary-light-9: #1471ff;
+  --mr-ref-color-primary-light-10: #0080ff;
+  --mr-ref-color-primary-light-11: #0064ca;
+  --mr-ref-color-primary-light-12: #0052a8;
+  --mr-ref-color-primary-light-13: #004085;
+  --mr-ref-color-primary-light-14: #003673;
+  --mr-ref-color-primary-light-15: #002d61;
+  --mr-ref-color-electric-blue-light-1: #f3f4ff;
+  --mr-ref-color-electric-blue-light-2: #e8eaff;
+  --mr-ref-color-electric-blue-light-3: #d2d5ff;
+  --mr-ref-color-electric-blue-light-4: #bcbfff;
+  --mr-ref-color-electric-blue-light-5: #a5aaff;
+  --mr-ref-color-electric-blue-light-6: #8f95ff;
+  --mr-ref-color-electric-blue-light-7: #797fff;
+  --mr-ref-color-electric-blue-light-8: #626aff;
+  --mr-ref-color-electric-blue-light-9: #4148ff;
+  --mr-ref-color-electric-blue-light-10: #2125ff;
+  --mr-ref-color-electric-blue-light-11: #1a1dcc;
+  --mr-ref-color-electric-blue-light-12: #141699;
+  --mr-ref-color-electric-blue-light-13: #0d0f66;
+  --mr-ref-color-electric-blue-light-14: #080940;
+  --mr-ref-color-electric-blue-light-15: #03041a;
+  --mr-ref-color-marigold-light-1: #fffbf5;
+  --mr-ref-color-marigold-light-2: #fef5e8;
+  --mr-ref-color-marigold-light-3: #fdebd6;
+  --mr-ref-color-marigold-light-4: #fcddbf;
+  --mr-ref-color-marigold-light-5: #fbcea6;
+  --mr-ref-color-marigold-light-6: #fabe8a;
+  --mr-ref-color-marigold-light-7: #f9ae6e;
+  --mr-ref-color-marigold-light-8: #f99d52;
+  --mr-ref-color-marigold-light-9: #f99539;
+  --mr-ref-color-marigold-light-10: #f99d20;
+  --mr-ref-color-marigold-light-11: #d98205;
+  --mr-ref-color-marigold-light-12: #b36b00;
+  --mr-ref-color-marigold-light-13: #8c5400;
+  --mr-ref-color-marigold-light-14: #663d00;
+  --mr-ref-color-marigold-light-15: #402600;
+  --mr-ref-color-neutral-light-1: #ffffff;
+  --mr-ref-color-neutral-light-2: #ffffff;
+  --mr-ref-color-neutral-light-3: #ededed;
+  --mr-ref-color-neutral-light-4: #e3e3e3;
+  --mr-ref-color-neutral-light-5: #d9d9d9;
+  --mr-ref-color-neutral-light-6: #cccccc;
+  --mr-ref-color-neutral-light-7: #b6b6b6;
+  --mr-ref-color-neutral-light-8: #a1a1a1;
+  --mr-ref-color-neutral-light-9: #8c8c8c;
+  --mr-ref-color-neutral-light-10: #767676;
+  --mr-ref-color-neutral-light-11: #626262;
+  --mr-ref-color-neutral-light-12: #505050;
+  --mr-ref-color-neutral-light-13: #3d3d3d;
+  --mr-ref-color-neutral-light-14: #343132;
+  --mr-ref-color-neutral-light-15: #2b2829;
+  --mr-ref-color-neutral-light-white: #ffffff;
+  --mr-ref-color-neutral-light-black: #221f20;
+  --mr-ref-color-cherry-red-light-1: #fff0f0;
+  --mr-ref-color-cherry-red-light-2: #ffe0e0;
+  --mr-ref-color-cherry-red-light-3: #ffc2c2;
+  --mr-ref-color-cherry-red-light-4: #ffa3a3;
+  --mr-ref-color-cherry-red-light-5: #ff8585;
+  --mr-ref-color-cherry-red-light-6: #ff6666;
+  --mr-ref-color-cherry-red-light-7: #ff4747;
+  --mr-ref-color-cherry-red-light-8: #ff3a3a;
+  --mr-ref-color-cherry-red-light-9: #e62b2e;
+  --mr-ref-color-cherry-red-light-10: #ff3033;
+  --mr-ref-color-cherry-red-light-11: #d9292b;
+  --mr-ref-color-cherry-red-light-12: #b32224;
+  --mr-ref-color-cherry-red-light-13: #8c1a1c;
+  --mr-ref-color-cherry-red-light-14: #661314;
+  --mr-ref-color-cherry-red-light-15: #400c0d;
+  --mr-ref-color-poolside-light-1: #f0fcfe;
+  --mr-ref-color-poolside-light-2: #e0f8fc;
+  --mr-ref-color-poolside-light-3: #c0f0f8;
+  --mr-ref-color-poolside-light-4: #a1e8f4;
+  --mr-ref-color-poolside-light-5: #81dff0;
+  --mr-ref-color-poolside-light-6: #62d7ec;
+  --mr-ref-color-poolside-light-7: #42cfe8;
+  --mr-ref-color-poolside-light-8: #23c6e4;
+  --mr-ref-color-poolside-light-9: #16b4d3;
+  --mr-ref-color-poolside-light-10: #14c8eb;
+  --mr-ref-color-poolside-light-11: #0f96b0;
+  --mr-ref-color-poolside-light-12: #0a7084;
+  --mr-ref-color-poolside-light-13: #075160;
+  --mr-ref-color-poolside-light-14: #04323b;
+  --mr-ref-color-poolside-light-15: #011417;
+  --mr-ref-color-limewash-light-1: #e6f9ed;
+  --mr-ref-color-limewash-light-2: #d6f5e1;
+  --mr-ref-color-limewash-light-3: #bdefcf;
+  --mr-ref-color-limewash-light-4: #a4eabe;
+  --mr-ref-color-limewash-light-5: #83e2a6;
+  --mr-ref-color-limewash-light-6: #6bdc94;
+  --mr-ref-color-limewash-light-7: #49d47c;
+  --mr-ref-color-limewash-light-8: #2bca64;
+  --mr-ref-color-limewash-light-9: #26b058;
+  --mr-ref-color-limewash-light-10: #20974c;
+  --mr-ref-color-limewash-light-11: #1b7e3f;
+  --mr-ref-color-limewash-light-12: #186d37;
+  --mr-ref-color-limewash-light-13: #145c2e;
+  --mr-ref-color-limewash-light-14: #0f4322;
+  --mr-ref-color-limewash-light-15: #092a15;
+  --mr-ref-color-solar-flare-light-1: #fffdf0;
+  --mr-ref-color-solar-flare-light-2: #fff9d6;
+  --mr-ref-color-solar-flare-light-3: #fff5bd;
+  --mr-ref-color-solar-flare-light-4: #fff1a3;
+  --mr-ref-color-solar-flare-light-5: #ffed8a;
+  --mr-ref-color-solar-flare-light-6: #ffe970;
+  --mr-ref-color-solar-flare-light-7: #ffe557;
+  --mr-ref-color-solar-flare-light-8: #ffe13d;
+  --mr-ref-color-solar-flare-light-9: #ffdd24;
+  --mr-ref-color-solar-flare-light-10: #ffd500;
+  --mr-ref-color-solar-flare-light-11: #ccaa00;
+  --mr-ref-color-solar-flare-light-12: #a68a00;
+  --mr-ref-color-solar-flare-light-13: #736000;
+  --mr-ref-color-solar-flare-light-14: #4d4000;
+  --mr-ref-color-solar-flare-light-15: #262000;
+  --mr-ref-color-berry-universal-1: #fcf2f7;
+  --mr-ref-color-berry-universal-2: #f9e5ef;
+  --mr-ref-color-berry-universal-3: #f4ccdf;
+  --mr-ref-color-berry-universal-4: #efb3cf;
+  --mr-ref-color-berry-universal-5: #ea99bf;
+  --mr-ref-color-berry-universal-6: #e580af;
+  --mr-ref-color-berry-universal-7: #cf669e;
+  --mr-ref-color-berry-universal-8: #af447f;
+  --mr-ref-color-berry-universal-9: #8f2260;
+  --mr-ref-color-berry-universal-10: #6f0041;
+  --mr-ref-color-berry-universal-11: #5c0036;
+  --mr-ref-color-berry-universal-12: #4a002b;
+  --mr-ref-color-berry-universal-13: #380020;
+  --mr-ref-color-berry-universal-14: #260016;
+  --mr-ref-color-berry-universal-15: #14000b;
+  --mr-ref-color-shadow-universal-1: #f0f4f6;
+  --mr-ref-color-shadow-universal-2: #d1dce2;
+  --mr-ref-color-shadow-universal-3: #b2c3cd;
+  --mr-ref-color-shadow-universal-4: #92abb9;
+  --mr-ref-color-shadow-universal-5: #7392a4;
+  --mr-ref-color-shadow-universal-6: #547a8f;
+  --mr-ref-color-shadow-universal-7: #3c6073;
+  --mr-ref-color-shadow-universal-8: #254659;
+  --mr-ref-color-shadow-universal-9: #18394c;
+  --mr-ref-color-shadow-universal-10: #0c2c3e;
+  --mr-ref-color-shadow-universal-11: #0a2332;
+  --mr-ref-color-shadow-universal-12: #071a25;
+  --mr-ref-color-shadow-universal-13: #05121a;
+  --mr-ref-color-shadow-universal-14: #02090d;
+  --mr-ref-color-shadow-universal-15: #010406;
+  --mr-ref-color-mint-glow-universal-1: #edfdf6;
+  --mr-ref-color-mint-glow-universal-2: #dbfaee;
+  --mr-ref-color-mint-glow-universal-3: #c9f8e5;
+  --mr-ref-color-mint-glow-universal-4: #b8f5dd;
+  --mr-ref-color-mint-glow-universal-5: #a6f3d4;
+  --mr-ref-color-mint-glow-universal-6: #94f0cc;
+  --mr-ref-color-mint-glow-universal-7: #82eec3;
+  --mr-ref-color-mint-glow-universal-8: #70ebba;
+  --mr-ref-color-mint-glow-universal-9: #5ee9b1;
+  --mr-ref-color-mint-glow-universal-10: #4ae6b2;
+  --mr-ref-color-mint-glow-universal-11: #3ab58c;
+  --mr-ref-color-mint-glow-universal-12: #2a8567;
+  --mr-ref-color-mint-glow-universal-13: #1a5441;
+  --mr-ref-color-mint-glow-universal-14: #0a241c;
+  --mr-ref-color-mint-glow-universal-15: #05120e;
+  --mr-ref-color-yellow-universal-1: #fffdeb;
+  --mr-ref-color-yellow-universal-2: #ffface;
+  --mr-ref-color-yellow-universal-3: #fff7b5;
+  --mr-ref-color-yellow-universal-4: #fff59d;
+  --mr-ref-color-yellow-universal-5: #fff282;
+  --mr-ref-color-yellow-universal-6: #fff06c;
+  --mr-ref-color-yellow-universal-7: #ffed53;
+  --mr-ref-color-yellow-universal-8: #ffeb3b;
+  --mr-ref-color-yellow-universal-9: #e0cf34;
+  --mr-ref-color-yellow-universal-10: #bfb02c;
+  --mr-ref-color-yellow-universal-11: #a39626;
+  --mr-ref-color-yellow-universal-12: #80761e;
+  --mr-ref-color-yellow-universal-13: #615916;
+  --mr-ref-color-yellow-universal-14: #403b0f;
+  --mr-ref-color-yellow-universal-15: #1a1806;
+  --mr-ref-color-red-universal-1: #feeceb;
+  --mr-ref-color-red-universal-2: #fcd0cd;
+  --mr-ref-color-red-universal-3: #fbb8b3;
+  --mr-ref-color-red-universal-4: #faa19b;
+  --mr-ref-color-red-universal-5: #f8877e;
+  --mr-ref-color-red-universal-6: #f77268;
+  --mr-ref-color-red-universal-7: #f55a4e;
+  --mr-ref-color-red-universal-8: #f44336;
+  --mr-ref-color-red-universal-9: #d73b30;
+  --mr-ref-color-red-universal-10: #b73229;
+  --mr-ref-color-red-universal-11: #9c2b23;
+  --mr-ref-color-red-universal-12: #7a221b;
+  --mr-ref-color-red-universal-13: #5d1915;
+  --mr-ref-color-red-universal-14: #3d110e;
+  --mr-ref-color-red-universal-15: #180705;
+  --mr-ref-color-green-universal-1: #edf7ed;
+  --mr-ref-color-green-universal-2: #d2ebd3;
+  --mr-ref-color-green-universal-3: #bbe1bc;
+  --mr-ref-color-green-universal-4: #a6d7a8;
+  --mr-ref-color-green-universal-5: #8ccc8f;
+  --mr-ref-color-green-universal-6: #79c37c;
+  --mr-ref-color-green-universal-7: #61b965;
+  --mr-ref-color-green-universal-8: #4caf50;
+  --mr-ref-color-green-universal-9: #439a46;
+  --mr-ref-color-green-universal-10: #39833c;
+  --mr-ref-color-green-universal-11: #317033;
+  --mr-ref-color-green-universal-12: #265828;
+  --mr-ref-color-green-universal-13: #1d431e;
+  --mr-ref-color-green-universal-14: #132c14;
+  --mr-ref-color-green-universal-15: #081208;
+  --mr-ref-color-secondary-light-1: #f5f5f5;
+  --mr-ref-color-secondary-light-2: #e6e6e6;
+  --mr-ref-color-secondary-light-3: #d9d9d9;
+  --mr-ref-color-secondary-light-4: #cccccc;
+  --mr-ref-color-secondary-light-5: #b6b6b6;
+  --mr-ref-color-secondary-light-6: #a1a1a1;
+  --mr-ref-color-secondary-light-7: #8c8c8c;
+  --mr-ref-color-secondary-light-8: #727272;
+  --mr-ref-color-secondary-light-9: #575757;
+  --mr-ref-color-secondary-light-10: #3d3d3d;
+  --mr-ref-color-secondary-light-11: #363233;
+  --mr-ref-color-secondary-light-12: #2f2b2c;
+  --mr-ref-color-secondary-light-13: #282526;
+  --mr-ref-color-secondary-light-14: #221f20;
+  --mr-ref-color-secondary-light-15: #0f0e0e;
+  --mr-ref-color-orange-light-1: #fff0eb;
+  --mr-ref-color-orange-light-2: #ffe0d6;
+  --mr-ref-color-orange-light-3: #ffc2b3;
+  --mr-ref-color-orange-light-4: #ffa38a;
+  --mr-ref-color-orange-light-5: #ff8566;
+  --mr-ref-color-orange-light-6: #ff704d;
+  --mr-ref-color-orange-light-7: #ff5c33;
+  --mr-ref-color-orange-light-8: #ff471a;
+  --mr-ref-color-orange-light-9: #e62e00;
+  --mr-ref-color-orange-light-10: #ff3300;
+  --mr-ref-color-orange-light-11: #d92b00;
+  --mr-ref-color-orange-light-12: #b32400;
+  --mr-ref-color-orange-light-13: #8c1c00;
+  --mr-ref-color-orange-light-14: #661400;
+  --mr-ref-color-orange-light-15: #400d00;
+  --mr-ref-color-laser-pink-light-1: #fff0f8;
+  --mr-ref-color-laser-pink-light-2: #ffe0f2;
+  --mr-ref-color-laser-pink-light-3: #ffc2e5;
+  --mr-ref-color-laser-pink-light-4: #ffa3d9;
+  --mr-ref-color-laser-pink-light-5: #ff85cc;
+  --mr-ref-color-laser-pink-light-6: #ff66bf;
+  --mr-ref-color-laser-pink-light-7: #ff47b2;
+  --mr-ref-color-laser-pink-light-8: #fc3aa8;
+  --mr-ref-color-laser-pink-light-9: #e82b96;
+  --mr-ref-color-laser-pink-light-10: #fc3aa8;
+  --mr-ref-color-laser-pink-light-11: #d12080;
+  --mr-ref-color-laser-pink-light-12: #b0146c;
+  --mr-ref-color-laser-pink-light-13: #8f0d57;
+  --mr-ref-color-laser-pink-light-14: #6e0641;
+  --mr-ref-color-laser-pink-light-15: #4d002c;
+  --mr-ref-dimension-border-width-none: 0px;
+  --mr-ref-dimension-border-width-hair: 1px;
+  --mr-ref-dimension-border-width-thin: 2px;
+  --mr-ref-dimension-radius-none: 0px;
+  --mr-ref-dimension-radius-xs: 2px;
+  --mr-ref-dimension-radius-sm: 4px;
+  --mr-ref-dimension-radius-md: 8px;
+  --mr-ref-dimension-radius-lg: 12px;
+  --mr-ref-dimension-radius-xl: 16px;
+  --mr-ref-dimension-radius-full: 999px;
+  --mr-ref-typography-family-primary: 'Roboto Flex', sans-serif;
+  --mr-ref-typography-family-heading: 'Roboto Flex', sans-serif;
+  --mr-ref-typography-weight-regular: 400;
+  --mr-ref-typography-weight-medium: 500;
+  --mr-ref-typography-weight-semibold: 600;
+  --mr-ref-typography-weight-bold: 700;
+  --mr-ref-typography-line-height-xs: 1.2;
+  --mr-ref-typography-line-height-sm: 1.3;
+  --mr-ref-typography-line-height-base: 1.5;
+  --mr-ref-typography-line-height-lg: 1.6;
+  --mr-ref-typography-line-height-xl: 1.8;
+  --mr-ref-typography-size-xs: 0.75rem;
+  --mr-ref-typography-size-sm: 0.875rem;
+  --mr-ref-typography-size-base: 1rem;
+  --mr-ref-typography-size-md: 1.125rem;
+  --mr-ref-typography-size-lg: 1.25rem;
+  --mr-ref-typography-size-xl: 1.5rem;
+  --mr-ref-typography-size-h1: 1.875rem;
+  --mr-ref-typography-letter-spacing-normal: 0;
+  --mr-ref-typography-letter-spacing-tight: -0.009999999776482582;
+  --mr-ref-opacity-disabled: 0.4;
+  --mr-ref-opacity-muted: 0.7;
+  --mr-ref-opacity-overlay: 0.6;
+  --mr-ref-shadow-sm: #000bec;
+  --mr-ref-shadow-md: #000bec;
+  --mr-ref-motion-duration-fast: 120ms;
+  --mr-ref-motion-duration-base: 200ms;
+  --mr-ref-motion-duration-slow: 320ms;
+  --mr-ref-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --mr-ref-z-dropdown: 1000;
+  --mr-ref-z-modal: 1100;
+  --mr-ref-z-tooltip: 1200;
+}

package/dist/css/spacing.css

@@ -0,0 +1,50 @@
+:root {
+  --mr-ref-dimension-spacing-scale-0: 0rem;
+  --mr-ref-dimension-spacing-scale-1: 0.25rem;
+  --mr-ref-dimension-spacing-scale-2: 0.5rem;
+  --mr-ref-dimension-spacing-scale-3: 0.75rem;
+  --mr-ref-dimension-spacing-scale-4: 1rem;
+  --mr-ref-dimension-spacing-scale-5: 1.25rem;
+  --mr-ref-dimension-spacing-scale-6: 1.5rem;
+  --mr-ref-dimension-spacing-scale-7: 1.75rem;
+  --mr-ref-dimension-spacing-scale-8: 2rem;
+  --mr-ref-dimension-spacing-scale-9: 2.25rem;
+  --mr-ref-dimension-spacing-scale-10: 2.5rem;
+  --mr-ref-dimension-spacing-scale-11: 2.75rem;
+  --mr-ref-dimension-spacing-scale-12: 3rem;
+  --mr-ref-dimension-spacing-scale-13: 3.25rem;
+  --mr-ref-dimension-spacing-scale-14: 3.5rem;
+  --mr-ref-dimension-spacing-scale-15: 3.75rem;
+  --mr-ref-dimension-spacing-scale-16: 4rem;
+  --mr-ref-dimension-spacing-scale-17: 4.25rem;
+  --mr-ref-dimension-spacing-scale-18: 4.5rem;
+  --mr-ref-dimension-spacing-scale-19: 4.75rem;
+  --mr-ref-dimension-spacing-scale-20: 5rem;
+  --mr-ref-dimension-spacing-scale-21: 5.25rem;
+  --mr-ref-dimension-spacing-scale-22: 5.5rem;
+  --mr-ref-dimension-spacing-scale-23: 5.75rem;
+  --mr-ref-dimension-spacing-scale-24: 6rem;
+  --mr-ref-dimension-spacing-scale-25: 7rem;
+  --mr-ref-dimension-spacing-scale-26: 8rem;
+  --mr-ref-dimension-spacing-scale-27: 9rem;
+  --mr-ref-dimension-spacing-scale-28: 10rem;
+  --mr-ref-dimension-spacing-scale-29: 11rem;
+  --mr-ref-dimension-spacing-scale-30: 12rem;
+  --mr-ref-dimension-spacing-scale-1-5: 0.375rem;
+  --mr-ref-dimension-spacing-scale-2-5: 0.625rem;
+  --mr-ref-dimension-spacing-scale-3-5: 0.875rem;
+  --mr-ref-dimension-spacing-scale-4-5: 1.125rem;
+  --mr-ref-dimension-spacing-scale-5-5: 1.375rem;
+  --mr-ref-dimension-spacing-scale-6-5: 1.625rem;
+  --mr-ref-dimension-spacing-scale-7-5: 1.875rem;
+  --mr-ref-dimension-spacing-px-0: 0px;
+  --mr-ref-dimension-spacing-px-1: 1px;
+  --mr-ref-dimension-spacing-px-2: 2px;
+  --mr-ref-dimension-spacing-px-3: 3px;
+  --mr-ref-dimension-spacing-px-5: 5px;
+  --mr-ref-dimension-spacing-px-6: 6px;
+  --mr-ref-dimension-spacing-px-7: 7px;
+  --mr-ref-dimension-spacing-px-8: 8px;
+  --mr-ref-dimension-spacing-px-9: 9px;
+  --mr-ref-dimension-spacing-px-10: 10px;
+}

package/dist/css/sys.css

@@ -0,0 +1,140 @@
+:root {
+  --mr-color-canvas: var(--mr-ref-color-brand-warm-canvas-light);
+  --mr-color-surface: var(--mr-ref-color-brand-warm-surface-light);
+  --mr-color-subtle: var(--mr-ref-color-brand-warm-subtle-light);
+  --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-light);
+  --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-light);
+  --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-light);
+  --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-light);
+  --mr-color-text-warning: var(--mr-ref-color-brand-warm-text-warning-light);
+  --mr-color-text-danger: var(--mr-ref-color-brand-warm-text-danger-light);
+  --mr-color-text-success: var(--mr-ref-color-brand-warm-text-success-light);
+  --mr-color-text-link: var(--mr-ref-color-brand-warm-text-link-light);
+  --mr-color-brand-primary: var(--mr-ref-color-brand-warm-brand-primary-light);
+  --mr-color-brand-primary-action: var(--mr-ref-color-brand-warm-brand-primary-action-light);
+  --mr-color-brand-onprimary: var(--mr-ref-color-brand-warm-onprimary);
+  --mr-color-brand-primary-soft: var(--mr-ref-color-brand-warm-brand-primary-soft-light);
+  --mr-color-status-success: var(--mr-ref-color-brand-warm-status-success-light);
+  --mr-color-status-warning: var(--mr-ref-color-brand-warm-status-warning-light);
+  --mr-color-status-danger: var(--mr-ref-color-brand-warm-status-danger-light);
+  --mr-color-status-onstatus: var(--mr-ref-color-brand-warm-status-onstatus);
+  --mr-color-status-on-status: var(--mr-ref-color-brand-warm-status-onstatus);
+  --mr-color-border-default: var(--mr-ref-color-brand-warm-border-default-light);
+  --mr-color-border-interactive: var(--mr-ref-color-brand-warm-border-interactive);
+  --mr-color-border-focus: var(--mr-ref-color-brand-warm-border-focus-light);
+  --mr-color-border-focus-soft: var(--mr-ref-color-brand-warm-border-focus-soft-light);
+  --mr-color-ai-tint: var(--mr-ref-color-brand-warm-ai-tint-light);
+  --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
+  --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
+  --mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
+  --mr-typography-font-size-sm: var(--mr-ref-typography-size-sm);
+  --mr-typography-font-size-base: var(--mr-ref-typography-size-base);
+  --mr-typography-font-size-md: var(--mr-ref-typography-size-md);
+  --mr-typography-font-size-lg: var(--mr-ref-typography-size-lg);
+  --mr-typography-font-size-xl: var(--mr-ref-typography-size-xl);
+  --mr-typography-font-size-h1: var(--mr-ref-typography-size-h1);
+  --mr-typography-weight-regular: var(--mr-ref-typography-weight-regular);
+  --mr-typography-weight-medium: var(--mr-ref-typography-weight-medium);
+  --mr-typography-weight-semibold: var(--mr-ref-typography-weight-semibold);
+  --mr-typography-weight-bold: var(--mr-ref-typography-weight-bold);
+  --mr-typography-line-height-tight: var(--mr-ref-typography-line-height-xs);
+  --mr-typography-line-height-base: var(--mr-ref-typography-line-height-base);
+  --mr-typography-line-height-head: var(--mr-ref-typography-line-height-base);
+  --mr-typography-letter-spacing-normal: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-typography-letter-spacing-tight: var(--mr-ref-typography-letter-spacing-tight);
+  --mr-shape-radius-control: var(--mr-ref-dimension-radius-md);
+  --mr-shape-radius-card: var(--mr-ref-dimension-radius-lg);
+  --mr-shape-border-width-control: var(--mr-ref-dimension-border-width-hair);
+  --mr-spacing-control-padding-x: var(--mr-ref-dimension-spacing-scale-3);
+  --mr-spacing-control-padding-y: var(--mr-ref-dimension-spacing-scale-2);
+  --mr-spacing-layout-xs: var(--mr-ref-dimension-spacing-scale-2);
+  --mr-spacing-layout-sm: var(--mr-ref-dimension-spacing-scale-3);
+  --mr-spacing-layout-md: var(--mr-ref-dimension-spacing-scale-4);
+  --mr-spacing-layout-lg: var(--mr-ref-dimension-spacing-scale-6);
+  --mr-spacing-layout-xl: var(--mr-ref-dimension-spacing-scale-8);
+  --mr-spacing-card-padding: var(--mr-ref-dimension-spacing-scale-5);
+  --mr-spacing-dialog-padding: var(--mr-ref-dimension-spacing-scale-6);
+  --mr-elevation-raised: var(--mr-ref-shadow-sm);
+  --mr-elevation-overlay: var(--mr-ref-shadow-md);
+  --mr-motion-duration-interactive: var(--mr-ref-motion-duration-base);
+  --mr-motion-easing-interactive: var(--mr-ref-motion-easing-standard);
+  --mr-opacity-disabled: var(--mr-ref-opacity-disabled);
+  --mr-z-dropdown: var(--mr-ref-z-dropdown);
+  --mr-z-modal: var(--mr-ref-z-modal);
+  --mr-z-tooltip: var(--mr-ref-z-tooltip);
+  --mr-text-style-heading-1-font-size: var(--mr-typography-font-size-h1);
+  --mr-text-style-heading-1-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-heading-1-line-height: var(--mr-typography-line-height-head);
+  --mr-text-style-heading-1-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-heading-1-color: var(--mr-ref-color-secondary-light-11);
+  --mr-text-style-heading-2-font-size: var(--mr-typography-font-size-lg);
+  --mr-text-style-heading-2-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-heading-2-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-heading-2-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-heading-2-color: var(--mr-color-text-primary);
+  --mr-text-style-heading-3-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-heading-3-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-heading-3-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-heading-3-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-heading-3-color: var(--mr-color-text-primary);
+  --mr-text-style-body-lg-font-size: var(--mr-typography-font-size-lg);
+  --mr-text-style-body-lg-font-weight: var(--mr-ref-typography-weight-bold);
+  --mr-text-style-body-lg-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-body-lg-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-lg-color: var(--mr-color-text-primary);
+  --mr-text-style-body-font-size: var(--mr-typography-font-size-md);
+  --mr-text-style-body-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-body-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-body-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-color: var(--mr-color-text-primary);
+  --mr-text-style-body-sm-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-body-sm-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-body-sm-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-body-sm-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-sm-color: var(--mr-color-text-primary);
+  --mr-text-style-body-xs-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-body-xs-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-body-xs-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-body-xs-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-xs-color: var(--mr-color-text-primary);
+  --mr-text-style-label-font-size: var(--mr-typography-font-size-base);
+  --mr-text-style-label-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-label-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-color: var(--mr-color-text-primary);
+  --mr-text-style-label-strong-font-size: var(--mr-typography-font-size-base);
+  --mr-text-style-label-strong-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-label-strong-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-strong-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-strong-color: var(--mr-color-text-primary);
+  --mr-text-style-label-sm-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-label-sm-font-weight: var(--mr-ref-typography-weight-bold);
+  --mr-text-style-label-sm-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-sm-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-sm-color: var(--mr-color-text-secondary);
+  --mr-text-style-label-xs-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-label-xs-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-label-xs-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-xs-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-xs-color: var(--mr-color-text-secondary);
+  --mr-text-style-caption-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-caption-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-caption-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-caption-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-caption-color: var(--mr-color-text-secondary);
+  --mr-text-style-link-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-link-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-link-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-link-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-link-color: var(--mr-color-text-link);
+  --mr-text-style-link-strong-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-link-strong-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-link-strong-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-link-strong-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-link-strong-color: var(--mr-color-text-link);
+  --mr-text-style-link-xs-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-link-xs-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-link-xs-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-link-xs-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-link-xs-color: var(--mr-color-text-link);
+}

package/dist/css/tokens.css

@@ -0,0 +1,5 @@
+@import "./ref.css";
+@import "./sys.css";
+@import "./spacing.css";
+@import "./typography.css";
+@import "./component.css";

package/dist/css/typography.css

@@ -0,0 +1,77 @@
+:root {
+  --mr-text-style-heading-1-font-size: var(--mr-typography-font-size-h1);
+  --mr-text-style-heading-1-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-heading-1-line-height: var(--mr-typography-line-height-head);
+  --mr-text-style-heading-1-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-heading-1-color: var(--mr-ref-color-secondary-light-11);
+  --mr-text-style-heading-2-font-size: var(--mr-typography-font-size-lg);
+  --mr-text-style-heading-2-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-heading-2-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-heading-2-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-heading-2-color: var(--mr-color-text-primary);
+  --mr-text-style-heading-3-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-heading-3-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-heading-3-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-heading-3-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-heading-3-color: var(--mr-color-text-primary);
+  --mr-text-style-body-lg-font-size: var(--mr-typography-font-size-lg);
+  --mr-text-style-body-lg-font-weight: var(--mr-ref-typography-weight-bold);
+  --mr-text-style-body-lg-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-body-lg-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-lg-color: var(--mr-color-text-primary);
+  --mr-text-style-body-font-size: var(--mr-typography-font-size-md);
+  --mr-text-style-body-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-body-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-body-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-color: var(--mr-color-text-primary);
+  --mr-text-style-body-sm-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-body-sm-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-body-sm-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-body-sm-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-sm-color: var(--mr-color-text-primary);
+  --mr-text-style-body-xs-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-body-xs-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-body-xs-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-body-xs-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-body-xs-color: var(--mr-color-text-primary);
+  --mr-text-style-label-font-size: var(--mr-typography-font-size-base);
+  --mr-text-style-label-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-label-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-color: var(--mr-color-text-primary);
+  --mr-text-style-label-strong-font-size: var(--mr-typography-font-size-base);
+  --mr-text-style-label-strong-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-label-strong-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-strong-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-strong-color: var(--mr-color-text-primary);
+  --mr-text-style-label-sm-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-label-sm-font-weight: var(--mr-ref-typography-weight-bold);
+  --mr-text-style-label-sm-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-sm-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-sm-color: var(--mr-color-text-secondary);
+  --mr-text-style-label-xs-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-label-xs-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-label-xs-line-height: var(--mr-typography-line-height-tight);
+  --mr-text-style-label-xs-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-label-xs-color: var(--mr-color-text-secondary);
+  --mr-text-style-caption-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-caption-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-caption-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-caption-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-caption-color: var(--mr-color-text-secondary);
+  --mr-text-style-link-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-link-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-link-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-link-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-link-color: var(--mr-color-text-link);
+  --mr-text-style-link-strong-font-size: var(--mr-typography-font-size-sm);
+  --mr-text-style-link-strong-font-weight: var(--mr-ref-typography-weight-semibold);
+  --mr-text-style-link-strong-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-link-strong-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-link-strong-color: var(--mr-color-text-link);
+  --mr-text-style-link-xs-font-size: var(--mr-typography-font-size-xs);
+  --mr-text-style-link-xs-font-weight: var(--mr-ref-typography-weight-regular);
+  --mr-text-style-link-xs-line-height: var(--mr-ref-typography-line-height-base);
+  --mr-text-style-link-xs-letter-spacing: var(--mr-ref-typography-letter-spacing-normal);
+  --mr-text-style-link-xs-color: var(--mr-color-text-link);
+}

package/dist/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>MediaRadar Design Tokens CDN</title>
+  <style>
+    body { font-family: sans-serif; max-width: 640px; margin: 60px auto; padding: 0 24px; color: #111; }
+    h1 { font-size: 1.25rem; margin-bottom: 4px; }
+    p { color: #555; font-size: 0.9rem; margin-top: 0; }
+    ul { padding-left: 1.25rem; line-height: 2; }
+    a { color: #5B4FE8; }
+    code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }
+  </style>
+</head>
+<body>
+  <h1>MediaRadar Design Tokens CDN</h1>
+  <p>Static asset CDN for the MediaRadar design system. Import via URL — no install required.</p>
+  <ul>
+    <li><a href="/css/tokens.css"><code>/css/tokens.css</code></a> — entry point</li>
+    <li><a href="/css/dark.css"><code>/css/dark.css</code></a> — dark theme</li>
+    <li><a href="/tailwind/theme.css"><code>/tailwind/theme.css</code></a> — Tailwind v4 @theme</li>
+    <li><a href="/tailwind/typography.css"><code>/tailwind/typography.css</code></a> — text-style utilities</li>
+    <li><a href="/js/tokens.js"><code>/js/tokens.js</code></a> — JS token values</li>
+    <li><a href="/js/tokens.d.ts"><code>/js/tokens.d.ts</code></a> — TypeScript types</li>
+    <li><a href="/DESIGN.md"><code>/DESIGN.md</code></a> — LLM design spec</li>
+    <li><a href="/patterns.json"><code>/patterns.json</code></a> — component catalogue</li>
+  </ul>
+</body>
+</html>