@x-plat/design-system 0.4.5 → 0.5.0

package/dist/layout/index.css

@@ -1,377 +1,1082 @@
 /* src/styles/style.css */
 :root {
-  --xplat-red-50: #FFF0F0;
-  --xplat-red-100: #FFDDDE;
-  --xplat-red-200: #FFC1C2;
-  --xplat-red-300: #FF9698;
-  --xplat-red-400: #FF5A5D;
-  --xplat-red-500: #FF272B;
-  --xplat-red-600: #F80409;
-  --xplat-red-700: #D40105;
-  --xplat-red-800: #AE0609;
-  --xplat-red-900: #900C0F;
-  --xplat-green-50: #E5F6EA;
-  --xplat-green-100: #C1E7CC;
-  --xplat-green-200: #98D8AC;
-  --xplat-green-300: #6CCA8B;
-  --xplat-green-400: #47BE72;
-  --xplat-green-500: #10B259;
-  --xplat-green-600: #00A34F;
-  --xplat-green-700: #009143;
-  --xplat-green-800: #007F38;
-  --xplat-green-900: #006024;
-  --xplat-orange-50: #FFF8EC;
-  --xplat-orange-100: #FFF0D3;
-  --xplat-orange-200: #FFDDA5;
-  --xplat-orange-300: #FFC46D;
-  --xplat-orange-400: #FF9F32;
-  --xplat-orange-500: #FF820A;
-  --xplat-orange-600: #FF6900;
-  --xplat-orange-700: #CC4B02;
-  --xplat-orange-800: #A13A0B;
-  --xplat-orange-900: #82320C;
-  --xplat-yellow-50: #FFFDE7;
-  --xplat-yellow-100: #FFFAC1;
-  --xplat-yellow-200: #FFF186;
-  --xplat-yellow-300: #FFE041;
-  --xplat-yellow-400: #FFCC0D;
-  --xplat-yellow-500: #F0B100;
-  --xplat-yellow-600: #D18800;
-  --xplat-yellow-700: #A66002;
-  --xplat-yellow-800: #894B0A;
-  --xplat-yellow-900: #743D0F;
-  --xplat-blue-50: #F1F4FD;
-  --xplat-blue-100: #DFE7FA;
-  --xplat-blue-200: #C5D4F8;
-  --xplat-blue-300: #9EB8F2;
-  --xplat-blue-400: #7093EA;
-  --xplat-blue-500: #4D6DE3;
-  --xplat-blue-600: #3950D7;
-  --xplat-blue-700: #303EC5;
-  --xplat-blue-800: #2D35A0;
-  --xplat-blue-900: #29317F;
-  --xplat-lightblue-50: #EEFAFF;
-  --xplat-lightblue-100: #D9F4FF;
-  --xplat-lightblue-200: #BBEDFF;
-  --xplat-lightblue-300: #8DE3FF;
-  --xplat-lightblue-400: #57D0FF;
-  --xplat-lightblue-500: #30B6FF;
-  --xplat-lightblue-600: #1999F7;
-  --xplat-lightblue-700: #1280E3;
-  --xplat-lightblue-800: #1566B8;
-  --xplat-lightblue-900: #175791;
-  --xplat-purple-50: #FBF6FE;
-  --xplat-purple-100: #F5EAFD;
-  --xplat-purple-200: #EDD8FC;
-  --xplat-purple-300: #E0BAF8;
-  --xplat-purple-400: #CD8DF3;
-  --xplat-purple-500: #B961EB;
-  --xplat-purple-600: #A541DC;
-  --xplat-purple-700: #9230C5;
-  --xplat-purple-800: #782B9E;
-  --xplat-purple-900: #62247F;
-  --xplat-pink-50: #FFF4FE;
-  --xplat-pink-100: #FFE7FD;
-  --xplat-pink-200: #FFCFFA;
-  --xplat-pink-300: #FEA9F1;
-  --xplat-pink-400: #FD75E7;
-  --xplat-pink-500: #F553DA;
-  --xplat-pink-600: #D821B6;
-  --xplat-pink-700: #B31892;
-  --xplat-pink-800: #921676;
-  --xplat-pink-900: #781761;
-  --xplat-neutral-50: #FAFAFA;
-  --xplat-neutral-100: #F5F5F5;
-  --xplat-neutral-200: #E5E5E5;
-  --xplat-neutral-300: #D4D4D4;
-  --xplat-neutral-400: #A1A1A1;
-  --xplat-neutral-500: #737373;
-  --xplat-neutral-600: #525252;
-  --xplat-neutral-700: #404040;
-  --xplat-neutral-800: #262626;
-  --xplat-neutral-900: #171717;
-  --xplat-black: #000000;
-  --xplat-white: #FFFFFF;
-  --test-default: #ffffff;
-}
-.xplat-red-50 {
-  --ds-color: var(--xplat-red-50);
-}
-.xplat-red-100 {
-  --ds-color: var(--xplat-red-100);
-}
-.xplat-red-200 {
-  --ds-color: var(--xplat-red-200);
-}
-.xplat-red-300 {
-  --ds-color: var(--xplat-red-300);
-}
-.xplat-red-400 {
-  --ds-color: var(--xplat-red-400);
-}
-.xplat-red-500 {
-  --ds-color: var(--xplat-red-500);
-}
-.xplat-red-600 {
-  --ds-color: var(--xplat-red-600);
-}
-.xplat-red-700 {
-  --ds-color: var(--xplat-red-700);
-}
-.xplat-red-800 {
-  --ds-color: var(--xplat-red-800);
-}
-.xplat-red-900 {
-  --ds-color: var(--xplat-red-900);
-}
-.xplat-green-50 {
-  --ds-color: var(--xplat-green-50);
-}
-.xplat-green-100 {
-  --ds-color: var(--xplat-green-100);
-}
-.xplat-green-200 {
-  --ds-color: var(--xplat-green-200);
-}
-.xplat-green-300 {
-  --ds-color: var(--xplat-green-300);
-}
-.xplat-green-400 {
-  --ds-color: var(--xplat-green-400);
-}
-.xplat-green-500 {
-  --ds-color: var(--xplat-green-500);
+  --primitive-base-white: #FFFFFF;
+  --primitive-base-black: #000000;
+  --primitive-base-transparent: transparent;
+  --primitive-base-black-alpha-5: rgba(0, 0, 0, 0.05);
+  --primitive-base-black-alpha-10: rgba(0, 0, 0, 0.10);
+  --primitive-base-black-alpha-25: rgba(0, 0, 0, 0.25);
+  --primitive-base-black-alpha-50: rgba(0, 0, 0, 0.50);
+  --primitive-base-black-alpha-75: rgba(0, 0, 0, 0.75);
+  --primitive-base-white-alpha-5: rgba(255, 255, 255, 0.05);
+  --primitive-base-white-alpha-10: rgba(255, 255, 255, 0.10);
+  --primitive-base-white-alpha-25: rgba(255, 255, 255, 0.25);
+  --primitive-base-white-alpha-50: rgba(255, 255, 255, 0.50);
+  --primitive-base-white-alpha-75: rgba(255, 255, 255, 0.75);
+  --primitive-red-50: #FFF0F0;
+  --primitive-red-100: #FFDDDE;
+  --primitive-red-200: #FFC1C2;
+  --primitive-red-300: #FF9698;
+  --primitive-red-400: #FF5A5D;
+  --primitive-red-500: #FF272B;
+  --primitive-red-600: #F80409;
+  --primitive-red-700: #D40105;
+  --primitive-red-800: #AE0609;
+  --primitive-red-900: #900C0F;
+  --primitive-pink-50: #FFF4FE;
+  --primitive-pink-100: #FFE7FD;
+  --primitive-pink-200: #FFCFFA;
+  --primitive-pink-300: #FEA9F1;
+  --primitive-pink-400: #FD75E7;
+  --primitive-pink-500: #F553DA;
+  --primitive-pink-600: #D821B6;
+  --primitive-pink-700: #B31892;
+  --primitive-pink-800: #921676;
+  --primitive-pink-900: #781761;
+  --primitive-purple-50: #FBF6FE;
+  --primitive-purple-100: #F5EAFD;
+  --primitive-purple-200: #EDD8FC;
+  --primitive-purple-300: #E0BAF8;
+  --primitive-purple-400: #CD8DF3;
+  --primitive-purple-500: #B961EB;
+  --primitive-purple-600: #A541DC;
+  --primitive-purple-700: #9230C5;
+  --primitive-purple-800: #782B9E;
+  --primitive-purple-900: #62247F;
+  --primitive-deep-purple-50: #EDE7F6;
+  --primitive-deep-purple-100: #D1C4E9;
+  --primitive-deep-purple-200: #B39DDB;
+  --primitive-deep-purple-300: #9575CD;
+  --primitive-deep-purple-400: #7E57C2;
+  --primitive-deep-purple-500: #673AB7;
+  --primitive-deep-purple-600: #5E35B1;
+  --primitive-deep-purple-700: #4621A0;
+  --primitive-deep-purple-800: #290D7E;
+  --primitive-deep-purple-900: #1A0B5C;
+  --primitive-indigo-50: #E8EAF6;
+  --primitive-indigo-100: #C5CAE9;
+  --primitive-indigo-200: #9FA8DA;
+  --primitive-indigo-300: #7986CB;
+  --primitive-indigo-400: #5C6BC0;
+  --primitive-indigo-500: #3F51B5;
+  --primitive-indigo-600: #3949AB;
+  --primitive-indigo-700: #303F9F;
+  --primitive-indigo-800: #283593;
+  --primitive-indigo-900: #1A237E;
+  --primitive-blue-50: #F1F4FD;
+  --primitive-blue-100: #DFE7FA;
+  --primitive-blue-200: #C5D4F8;
+  --primitive-blue-300: #9EB8F2;
+  --primitive-blue-400: #7093EA;
+  --primitive-blue-500: #4D6DE3;
+  --primitive-blue-600: #3950D7;
+  --primitive-blue-700: #303EC5;
+  --primitive-blue-800: #2D35A0;
+  --primitive-blue-900: #29317F;
+  --primitive-light-blue-50: #EDF8FF;
+  --primitive-light-blue-100: #D7EDFF;
+  --primitive-light-blue-200: #B9E1FF;
+  --primitive-light-blue-300: #88D0FF;
+  --primitive-light-blue-400: #50B5FF;
+  --primitive-light-blue-500: #2893FF;
+  --primitive-light-blue-600: #1677FF;
+  --primitive-light-blue-700: #0A5CEB;
+  --primitive-light-blue-800: #0F4ABE;
+  --primitive-light-blue-900: #134295;
+  --primitive-cyan-50: #E0F7FA;
+  --primitive-cyan-100: #B2EBF2;
+  --primitive-cyan-200: #80DEEA;
+  --primitive-cyan-300: #4DD0E1;
+  --primitive-cyan-400: #26C6DA;
+  --primitive-cyan-500: #00BCD4;
+  --primitive-cyan-600: #00ACC1;
+  --primitive-cyan-700: #0097A7;
+  --primitive-cyan-800: #00838F;
+  --primitive-cyan-900: #006064;
+  --primitive-teal-50: #E0F2F1;
+  --primitive-teal-100: #B2DFDB;
+  --primitive-teal-200: #80CBC4;
+  --primitive-teal-300: #4DB6AC;
+  --primitive-teal-400: #26A69A;
+  --primitive-teal-500: #009688;
+  --primitive-teal-600: #00897B;
+  --primitive-teal-700: #00796B;
+  --primitive-teal-800: #00695C;
+  --primitive-teal-900: #004D40;
+  --primitive-green-50: #E5F6EA;
+  --primitive-green-100: #C1E7CC;
+  --primitive-green-200: #98D8AC;
+  --primitive-green-300: #6CCA8B;
+  --primitive-green-400: #47BE72;
+  --primitive-green-500: #10B259;
+  --primitive-green-600: #00A34F;
+  --primitive-green-700: #009143;
+  --primitive-green-800: #007F38;
+  --primitive-green-900: #006024;
+  --primitive-light-green-50: #F1F8E9;
+  --primitive-light-green-100: #DCEDC8;
+  --primitive-light-green-200: #C5E1A5;
+  --primitive-light-green-300: #AED581;
+  --primitive-light-green-400: #9CCC65;
+  --primitive-light-green-500: #8BC34A;
+  --primitive-light-green-600: #7CB342;
+  --primitive-light-green-700: #689F38;
+  --primitive-light-green-800: #558B2F;
+  --primitive-light-green-900: #33691E;
+  --primitive-lime-50: #F9FBE7;
+  --primitive-lime-100: #F0F4C3;
+  --primitive-lime-200: #E6EE9C;
+  --primitive-lime-300: #DCE775;
+  --primitive-lime-400: #D4E157;
+  --primitive-lime-500: #CDDC39;
+  --primitive-lime-600: #C0CA33;
+  --primitive-lime-700: #AFB42B;
+  --primitive-lime-800: #9E9D24;
+  --primitive-lime-900: #827717;
+  --primitive-yellow-50: #FFFDE7;
+  --primitive-yellow-100: #FFF9C4;
+  --primitive-yellow-200: #FFF6A9;
+  --primitive-yellow-300: #FFF280;
+  --primitive-yellow-400: #FFEE54;
+  --primitive-yellow-500: #FFE60C;
+  --primitive-yellow-600: #FDD835;
+  --primitive-yellow-700: #FBC02D;
+  --primitive-yellow-800: #F9A825;
+  --primitive-yellow-900: #F57F17;
+  --primitive-amber-50: #FFF8E1;
+  --primitive-amber-100: #FFECB3;
+  --primitive-amber-200: #FFE082;
+  --primitive-amber-300: #FFD54F;
+  --primitive-amber-400: #FFCA28;
+  --primitive-amber-500: #FFC107;
+  --primitive-amber-600: #FFB300;
+  --primitive-amber-700: #FFA000;
+  --primitive-amber-800: #FF8F00;
+  --primitive-amber-900: #FF6F00;
+  --primitive-orange-50: #FFF2DE;
+  --primitive-orange-100: #FFE0B2;
+  --primitive-orange-200: #FFCC80;
+  --primitive-orange-300: #FFB74D;
+  --primitive-orange-400: #FFA726;
+  --primitive-orange-500: #FF9800;
+  --primitive-orange-600: #FB8C00;
+  --primitive-orange-700: #F57C00;
+  --primitive-orange-800: #EF6C00;
+  --primitive-orange-900: #E65100;
+  --primitive-deep-orange-50: #FBE9E7;
+  --primitive-deep-orange-100: #FFCCBC;
+  --primitive-deep-orange-200: #FFAB91;
+  --primitive-deep-orange-300: #FF8A65;
+  --primitive-deep-orange-400: #FF7043;
+  --primitive-deep-orange-500: #FF5722;
+  --primitive-deep-orange-600: #F4511E;
+  --primitive-deep-orange-700: #E64A19;
+  --primitive-deep-orange-800: #D84315;
+  --primitive-deep-orange-900: #BF360C;
+  --primitive-brown-50: #F1EDEC;
+  --primitive-brown-100: #D7CCC8;
+  --primitive-brown-200: #BCAAA4;
+  --primitive-brown-300: #A1887F;
+  --primitive-brown-400: #8D6E63;
+  --primitive-brown-500: #795548;
+  --primitive-brown-600: #6D4C41;
+  --primitive-brown-700: #5D4037;
+  --primitive-brown-800: #4E342E;
+  --primitive-brown-900: #3E2723;
+  --primitive-neutral-50: #FAFAFA;
+  --primitive-neutral-100: #F5F5F5;
+  --primitive-neutral-200: #E5E5E5;
+  --primitive-neutral-300: #D4D4D4;
+  --primitive-neutral-400: #A1A1A1;
+  --primitive-neutral-500: #737373;
+  --primitive-neutral-600: #525252;
+  --primitive-neutral-700: #404040;
+  --primitive-neutral-800: #2F2F2F;
+  --primitive-neutral-900: #212121;
+  --primitive-blue-gray-50: #ECEFF1;
+  --primitive-blue-gray-100: #CFD8DC;
+  --primitive-blue-gray-200: #B0BEC5;
+  --primitive-blue-gray-300: #90A4AE;
+  --primitive-blue-gray-400: #78909C;
+  --primitive-blue-gray-500: #607D8B;
+  --primitive-blue-gray-600: #546E7A;
+  --primitive-blue-gray-700: #455A64;
+  --primitive-blue-gray-800: #37474F;
+  --primitive-blue-gray-900: #263238;
 }
-.xplat-green-600 {
-  --ds-color: var(--xplat-green-600);
+:root {
+  --spacing-size-0: 0;
+  --spacing-size-1: 4px;
+  --spacing-size-2: 8px;
+  --spacing-size-3: 12px;
+  --spacing-size-4: 16px;
+  --spacing-size-5: 20px;
+  --spacing-size-6: 24px;
+  --spacing-size-7: 28px;
+  --spacing-size-8: 32px;
+  --spacing-size-9: 36px;
+  --spacing-size-10: 40px;
+  --spacing-size-11: 48px;
+  --spacing-size-12: 64px;
+  --spacing-size-13: 80px;
+  --spacing-size-14: 96px;
+  --spacing-size-15: 120px;
+  --spacing-size-16: 160px;
+  --spacing-stroke-0: 0;
+  --spacing-stroke-1: 0.5px;
+  --spacing-stroke-2: 1px;
+  --spacing-stroke-3: 2px;
+  --spacing-stroke-4: 4px;
+  --spacing-stroke-5: 8px;
+  --spacing-stroke-6: 12px;
+}
+:root {
+  --spacing-brand-space-1: var(--spacing-size-1);
+  --spacing-brand-space-2: var(--spacing-size-2);
+  --spacing-brand-space-3: var(--spacing-size-3);
+  --spacing-brand-space-4: var(--spacing-size-4);
+  --spacing-brand-space-5: var(--spacing-size-5);
+  --spacing-brand-space-6: var(--spacing-size-6);
+  --spacing-brand-space-7: var(--spacing-size-7);
+  --spacing-brand-space-8: var(--spacing-size-8);
+  --spacing-brand-space-9: var(--spacing-size-9);
+  --spacing-brand-space-10: var(--spacing-size-10);
+  --spacing-brand-space-11: var(--spacing-size-11);
+  --spacing-brand-space-12: var(--spacing-size-12);
+  --spacing-brand-space-13: var(--spacing-size-13);
+  --spacing-brand-space-14: var(--spacing-size-14);
+  --spacing-brand-space-15: var(--spacing-size-15);
+  --spacing-brand-space-16: var(--spacing-size-16);
+  --spacing-brand-space-none: var(--spacing-size-0);
+  --spacing-brand-control-height-xs: var(--spacing-size-6);
+  --spacing-brand-control-height-sm: var(--spacing-size-8);
+  --spacing-brand-control-height-md: var(--spacing-size-10);
+  --spacing-brand-control-height-lg: var(--spacing-size-11);
+  --spacing-brand-radius-none: var(--spacing-size-0);
+  --spacing-brand-radius-sm: var(--spacing-size-1);
+  --spacing-brand-radius-md: var(--spacing-size-2);
+  --spacing-brand-radius-lg: var(--spacing-size-3);
+  --spacing-brand-radius-xl: var(--spacing-size-4);
+  --spacing-brand-radius-full: 9999px;
+  --spacing-brand-stroke-none: var(--spacing-stroke-0);
+  --spacing-brand-stroke-xs: var(--spacing-stroke-1);
+  --spacing-brand-stroke-sm: var(--spacing-stroke-2);
+  --spacing-brand-stroke-md: var(--spacing-stroke-3);
+  --spacing-brand-stroke-lg: var(--spacing-stroke-4);
+  --spacing-brand-stroke-xl: var(--spacing-stroke-5);
+  --spacing-brand-stroke-2xl: var(--spacing-stroke-6);
+}
+:root {
+  --spacing-space-1: var(--spacing-brand-space-1);
+  --spacing-space-2: var(--spacing-brand-space-2);
+  --spacing-space-3: var(--spacing-brand-space-3);
+  --spacing-space-4: var(--spacing-brand-space-4);
+  --spacing-space-5: var(--spacing-brand-space-5);
+  --spacing-space-6: var(--spacing-brand-space-6);
+  --spacing-space-7: var(--spacing-brand-space-7);
+  --spacing-space-8: var(--spacing-brand-space-8);
+  --spacing-space-9: var(--spacing-brand-space-9);
+  --spacing-space-10: var(--spacing-brand-space-10);
+  --spacing-space-11: var(--spacing-brand-space-11);
+  --spacing-space-12: var(--spacing-brand-space-12);
+  --spacing-space-13: var(--spacing-brand-space-13);
+  --spacing-space-14: var(--spacing-brand-space-14);
+  --spacing-space-15: var(--spacing-brand-space-15);
+  --spacing-space-16: var(--spacing-brand-space-16);
+  --spacing-space-none: var(--spacing-brand-space-none);
+  --spacing-control-height-xs: var(--spacing-brand-control-height-xs);
+  --spacing-control-height-sm: var(--spacing-brand-control-height-sm);
+  --spacing-control-height-md: var(--spacing-brand-control-height-md);
+  --spacing-control-height-lg: var(--spacing-brand-control-height-lg);
+  --spacing-radius-none: var(--spacing-brand-radius-none);
+  --spacing-radius-sm: var(--spacing-brand-radius-sm);
+  --spacing-radius-md: var(--spacing-brand-radius-md);
+  --spacing-radius-lg: var(--spacing-brand-radius-lg);
+  --spacing-radius-xl: var(--spacing-brand-radius-xl);
+  --spacing-radius-full: var(--spacing-brand-radius-full);
+  --spacing-stroke-none: var(--spacing-brand-stroke-none);
+  --spacing-stroke-xs: var(--spacing-brand-stroke-xs);
+  --spacing-stroke-sm: var(--spacing-brand-stroke-sm);
+  --spacing-stroke-md: var(--spacing-brand-stroke-md);
+  --spacing-stroke-lg: var(--spacing-brand-stroke-lg);
+  --spacing-stroke-xl: var(--spacing-brand-stroke-xl);
+  --spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
+}
+:root {
+  --brand-primary-50: var(--primitive-blue-50);
+  --brand-primary-100: var(--primitive-blue-100);
+  --brand-primary-200: var(--primitive-blue-200);
+  --brand-primary-300: var(--primitive-blue-300);
+  --brand-primary-400: var(--primitive-blue-400);
+  --brand-primary-500: var(--primitive-blue-500);
+  --brand-primary-600: var(--primitive-blue-600);
+  --brand-primary-700: var(--primitive-blue-700);
+  --brand-primary-800: var(--primitive-blue-800);
+  --brand-primary-900: var(--primitive-blue-900);
+  --brand-secondary-50: var(--primitive-light-blue-50);
+  --brand-secondary-100: var(--primitive-light-blue-100);
+  --brand-secondary-200: var(--primitive-light-blue-200);
+  --brand-secondary-300: var(--primitive-light-blue-300);
+  --brand-secondary-400: var(--primitive-light-blue-400);
+  --brand-secondary-500: var(--primitive-light-blue-500);
+  --brand-secondary-600: var(--primitive-light-blue-600);
+  --brand-secondary-700: var(--primitive-light-blue-700);
+  --brand-secondary-800: var(--primitive-light-blue-800);
+  --brand-secondary-900: var(--primitive-light-blue-900);
+  --brand-neutral-50: var(--primitive-neutral-50);
+  --brand-neutral-100: var(--primitive-neutral-100);
+  --brand-neutral-200: var(--primitive-neutral-200);
+  --brand-neutral-300: var(--primitive-neutral-300);
+  --brand-neutral-400: var(--primitive-neutral-400);
+  --brand-neutral-500: var(--primitive-neutral-500);
+  --brand-neutral-600: var(--primitive-neutral-600);
+  --brand-neutral-700: var(--primitive-neutral-700);
+  --brand-neutral-800: var(--primitive-neutral-800);
+  --brand-neutral-900: var(--primitive-neutral-900);
+  --brand-base-white: var(--primitive-base-white);
+  --brand-base-black-alpha-10: var(--primitive-base-black-alpha-10);
+  --brand-base-black-alpha-25: var(--primitive-base-black-alpha-25);
+  --brand-categorical-1-100: var(--primitive-red-100);
+  --brand-categorical-1-200: var(--primitive-red-200);
+  --brand-categorical-1-300: var(--primitive-red-300);
+  --brand-categorical-1-400: var(--primitive-red-400);
+  --brand-categorical-1-500: var(--primitive-red-500);
+  --brand-categorical-1-600: var(--primitive-red-600);
+  --brand-categorical-2-100: var(--primitive-green-100);
+  --brand-categorical-2-200: var(--primitive-green-200);
+  --brand-categorical-2-300: var(--primitive-green-300);
+  --brand-categorical-2-400: var(--primitive-green-400);
+  --brand-categorical-2-500: var(--primitive-green-500);
+  --brand-categorical-2-600: var(--primitive-green-600);
+  --brand-categorical-3-100: var(--primitive-blue-100);
+  --brand-categorical-3-200: var(--primitive-blue-200);
+  --brand-categorical-3-300: var(--primitive-blue-300);
+  --brand-categorical-3-400: var(--primitive-blue-400);
+  --brand-categorical-3-500: var(--primitive-blue-500);
+  --brand-categorical-3-600: var(--primitive-blue-600);
+  --brand-categorical-4-100: var(--primitive-purple-100);
+  --brand-categorical-4-200: var(--primitive-purple-200);
+  --brand-categorical-4-300: var(--primitive-purple-300);
+  --brand-categorical-4-400: var(--primitive-purple-400);
+  --brand-categorical-4-500: var(--primitive-purple-500);
+  --brand-categorical-4-600: var(--primitive-purple-600);
+  --brand-categorical-5-100: var(--primitive-orange-100);
+  --brand-categorical-5-200: var(--primitive-orange-200);
+  --brand-categorical-5-300: var(--primitive-orange-300);
+  --brand-categorical-5-400: var(--primitive-orange-400);
+  --brand-categorical-5-500: var(--primitive-orange-500);
+  --brand-categorical-5-600: var(--primitive-orange-600);
+  --brand-categorical-6-100: var(--primitive-teal-100);
+  --brand-categorical-6-200: var(--primitive-teal-200);
+  --brand-categorical-6-300: var(--primitive-teal-300);
+  --brand-categorical-6-400: var(--primitive-teal-400);
+  --brand-categorical-6-500: var(--primitive-teal-500);
+  --brand-categorical-6-600: var(--primitive-teal-600);
+  --brand-categorical-7-100: var(--primitive-yellow-100);
+  --brand-categorical-7-200: var(--primitive-yellow-200);
+  --brand-categorical-7-300: var(--primitive-yellow-300);
+  --brand-categorical-7-400: var(--primitive-yellow-400);
+  --brand-categorical-7-500: var(--primitive-yellow-500);
+  --brand-categorical-7-600: var(--primitive-yellow-600);
+  --brand-categorical-8-100: var(--primitive-pink-100);
+  --brand-categorical-8-200: var(--primitive-pink-200);
+  --brand-categorical-8-300: var(--primitive-pink-300);
+  --brand-categorical-8-400: var(--primitive-pink-400);
+  --brand-categorical-8-500: var(--primitive-pink-500);
+  --brand-categorical-8-600: var(--primitive-pink-600);
+}
+:root {
+  --system-success-50: var(--primitive-green-50);
+  --system-success-100: var(--primitive-green-100);
+  --system-success-200: var(--primitive-green-200);
+  --system-success-300: var(--primitive-green-300);
+  --system-success-400: var(--primitive-green-400);
+  --system-success-500: var(--primitive-green-500);
+  --system-success-600: var(--primitive-green-600);
+  --system-success-700: var(--primitive-green-700);
+  --system-success-800: var(--primitive-green-800);
+  --system-success-900: var(--primitive-green-900);
+  --system-error-50: var(--primitive-red-50);
+  --system-error-100: var(--primitive-red-100);
+  --system-error-200: var(--primitive-red-200);
+  --system-error-300: var(--primitive-red-300);
+  --system-error-400: var(--primitive-red-400);
+  --system-error-500: var(--primitive-red-500);
+  --system-error-600: var(--primitive-red-600);
+  --system-error-700: var(--primitive-red-700);
+  --system-error-800: var(--primitive-red-800);
+  --system-error-900: var(--primitive-red-900);
+  --system-warning-50: var(--primitive-yellow-50);
+  --system-warning-100: var(--primitive-yellow-100);
+  --system-warning-200: var(--primitive-yellow-200);
+  --system-warning-300: var(--primitive-yellow-300);
+  --system-warning-400: var(--primitive-yellow-400);
+  --system-warning-500: var(--primitive-yellow-500);
+  --system-warning-600: var(--primitive-yellow-600);
+  --system-warning-700: var(--primitive-yellow-700);
+  --system-warning-800: var(--primitive-yellow-800);
+  --system-warning-900: var(--primitive-yellow-900);
+  --system-info-50: var(--primitive-blue-50);
+  --system-info-100: var(--primitive-blue-100);
+  --system-info-200: var(--primitive-blue-200);
+  --system-info-300: var(--primitive-blue-300);
+  --system-info-400: var(--primitive-blue-400);
+  --system-info-500: var(--primitive-blue-500);
+  --system-info-600: var(--primitive-blue-600);
+  --system-info-700: var(--primitive-blue-700);
+  --system-info-800: var(--primitive-blue-800);
+  --system-info-900: var(--primitive-blue-900);
+  --system-link-400: var(--primitive-purple-400);
+  --system-link-500: var(--primitive-purple-500);
+  --system-link-600: var(--primitive-purple-600);
+  --system-link-700: var(--primitive-purple-700);
+}
+:root {
+  --semantic-text-strong: var(--brand-neutral-900);
+  --semantic-text-subtle: var(--brand-neutral-700);
+  --semantic-text-muted: var(--brand-neutral-500);
+  --semantic-text-brand: var(--brand-primary-700);
+  --semantic-text-disabled: var(--brand-neutral-400);
+  --semantic-text-inverse: var(--brand-base-white);
+  --semantic-text-success: var(--system-success-700);
+  --semantic-text-error: var(--system-error-700);
+  --semantic-text-warning: var(--system-warning-700);
+  --semantic-text-info: var(--system-info-700);
+  --semantic-text-link: var(--system-link-700);
+  --semantic-text-sunday: var(--system-error-500);
+  --semantic-text-saturday: var(--system-info-500);
+  --semantic-surface-neutral-default: var(--brand-base-white);
+  --semantic-surface-neutral-subtle: var(--brand-neutral-50);
+  --semantic-surface-neutral-strong: var(--brand-neutral-300);
+  --semantic-surface-neutral-overlay: var(--brand-base-black-alpha-25);
+  --semantic-surface-neutral-disabled: var(--brand-neutral-200);
+  --semantic-surface-brand-subtle: var(--brand-primary-50);
+  --semantic-surface-brand-default: var(--brand-primary-600);
+  --semantic-surface-brand-strong: var(--brand-primary-700);
+  --semantic-surface-success-subtle: var(--system-success-50);
+  --semantic-surface-success-default: var(--system-success-400);
+  --semantic-surface-success-strong: var(--system-success-700);
+  --semantic-surface-error-subtle: var(--system-error-50);
+  --semantic-surface-error-default: var(--system-error-600);
+  --semantic-surface-error-strong: var(--system-error-700);
+  --semantic-surface-warning-subtle: var(--system-warning-50);
+  --semantic-surface-warning-default: var(--system-warning-600);
+  --semantic-surface-warning-strong: var(--system-warning-700);
+  --semantic-surface-info-subtle: var(--system-info-50);
+  --semantic-surface-info-default: var(--system-info-400);
+  --semantic-surface-info-strong: var(--system-info-700);
+  --semantic-border-default: var(--brand-neutral-200);
+  --semantic-border-subtle: var(--brand-neutral-100);
+  --semantic-border-strong: var(--brand-neutral-400);
+  --semantic-border-disabled: var(--brand-neutral-300);
+  --semantic-border-brand: var(--brand-primary-600);
+  --semantic-border-success: var(--system-success-300);
+  --semantic-border-error: var(--system-error-300);
+  --semantic-border-warning: var(--system-warning-500);
+  --semantic-border-info: var(--system-info-300);
+  --semantic-icon-strong: var(--brand-neutral-700);
+  --semantic-icon-subtle: var(--brand-neutral-500);
+  --semantic-icon-inverse: var(--brand-base-white);
+  --semantic-icon-brand: var(--brand-primary-600);
+  --semantic-icon-success: var(--system-success-400);
+  --semantic-icon-error: var(--system-error-600);
+  --semantic-icon-warning: var(--system-warning-600);
+  --semantic-icon-info: var(--system-info-400);
+  --semantic-icon-disabled: var(--brand-neutral-300);
+  --semantic-emphasis-brand: var(--brand-primary-800);
+  --semantic-emphasis-success: var(--system-success-800);
+  --semantic-emphasis-error: var(--system-error-800);
+  --semantic-emphasis-warning: var(--system-warning-800);
+  --semantic-emphasis-info: var(--system-info-800);
+  --semantic-interaction-overlay-10: var(--brand-base-black-alpha-10);
+  --semantic-interaction-overlay-25: var(--brand-base-black-alpha-25);
+  --semantic-interaction-focus-ring: var(--brand-primary-700);
+}
+:root {
+  --semantic-categorical-1-bg: var(--brand-categorical-1-100);
+  --semantic-categorical-1-area: var(--brand-categorical-1-200);
+  --semantic-categorical-1-fill: var(--brand-categorical-1-400);
+  --semantic-categorical-1-text: var(--brand-categorical-1-600);
+  --semantic-categorical-2-bg: var(--brand-categorical-2-100);
+  --semantic-categorical-2-area: var(--brand-categorical-2-200);
+  --semantic-categorical-2-fill: var(--brand-categorical-2-400);
+  --semantic-categorical-2-text: var(--brand-categorical-2-600);
+  --semantic-categorical-3-bg: var(--brand-categorical-3-100);
+  --semantic-categorical-3-area: var(--brand-categorical-3-200);
+  --semantic-categorical-3-fill: var(--brand-categorical-3-400);
+  --semantic-categorical-3-text: var(--brand-categorical-3-600);
+  --semantic-categorical-4-bg: var(--brand-categorical-4-100);
+  --semantic-categorical-4-area: var(--brand-categorical-4-200);
+  --semantic-categorical-4-fill: var(--brand-categorical-4-400);
+  --semantic-categorical-4-text: var(--brand-categorical-4-600);
+  --semantic-categorical-5-bg: var(--brand-categorical-5-100);
+  --semantic-categorical-5-area: var(--brand-categorical-5-200);
+  --semantic-categorical-5-fill: var(--brand-categorical-5-400);
+  --semantic-categorical-5-text: var(--brand-categorical-5-600);
+  --semantic-categorical-6-bg: var(--brand-categorical-6-100);
+  --semantic-categorical-6-area: var(--brand-categorical-6-200);
+  --semantic-categorical-6-fill: var(--brand-categorical-6-400);
+  --semantic-categorical-6-text: var(--brand-categorical-6-600);
+  --semantic-categorical-7-bg: var(--brand-categorical-7-100);
+  --semantic-categorical-7-area: var(--brand-categorical-7-200);
+  --semantic-categorical-7-fill: var(--brand-categorical-7-400);
+  --semantic-categorical-7-text: var(--brand-categorical-7-600);
+  --semantic-categorical-8-bg: var(--brand-categorical-8-100);
+  --semantic-categorical-8-area: var(--brand-categorical-8-200);
+  --semantic-categorical-8-fill: var(--brand-categorical-8-400);
+  --semantic-categorical-8-text: var(--brand-categorical-8-600);
+}
+.semantic-text-strong {
+  --ds-color: var(--semantic-text-strong);
+}
+.semantic-text-subtle {
+  --ds-color: var(--semantic-text-subtle);
+}
+.semantic-text-muted {
+  --ds-color: var(--semantic-text-muted);
+}
+.semantic-text-brand {
+  --ds-color: var(--semantic-text-brand);
+}
+.semantic-text-disabled {
+  --ds-color: var(--semantic-text-disabled);
+}
+.semantic-text-inverse {
+  --ds-color: var(--semantic-text-inverse);
+}
+.semantic-text-success {
+  --ds-color: var(--semantic-text-success);
+}
+.semantic-text-error {
+  --ds-color: var(--semantic-text-error);
+}
+.semantic-text-warning {
+  --ds-color: var(--semantic-text-warning);
+}
+.semantic-text-info {
+  --ds-color: var(--semantic-text-info);
+}
+.semantic-text-link {
+  --ds-color: var(--semantic-text-link);
+}
+.semantic-text-sunday {
+  --ds-color: var(--semantic-text-sunday);
+}
+.semantic-text-saturday {
+  --ds-color: var(--semantic-text-saturday);
+}
+.semantic-surface-neutral-default {
+  --ds-color: var(--semantic-surface-neutral-default);
+}
+.semantic-surface-neutral-subtle {
+  --ds-color: var(--semantic-surface-neutral-subtle);
+}
+.semantic-surface-neutral-strong {
+  --ds-color: var(--semantic-surface-neutral-strong);
+}
+.semantic-surface-neutral-overlay {
+  --ds-color: var(--semantic-surface-neutral-overlay);
+}
+.semantic-surface-neutral-disabled {
+  --ds-color: var(--semantic-surface-neutral-disabled);
+}
+.semantic-surface-brand-subtle {
+  --ds-color: var(--semantic-surface-brand-subtle);
+}
+.semantic-surface-brand-default {
+  --ds-color: var(--semantic-surface-brand-default);
+}
+.semantic-surface-brand-strong {
+  --ds-color: var(--semantic-surface-brand-strong);
+}
+.semantic-surface-success-subtle {
+  --ds-color: var(--semantic-surface-success-subtle);
+}
+.semantic-surface-success-default {
+  --ds-color: var(--semantic-surface-success-default);
+}
+.semantic-surface-success-strong {
+  --ds-color: var(--semantic-surface-success-strong);
+}
+.semantic-surface-error-subtle {
+  --ds-color: var(--semantic-surface-error-subtle);
+}
+.semantic-surface-error-default {
+  --ds-color: var(--semantic-surface-error-default);
+}
+.semantic-surface-error-strong {
+  --ds-color: var(--semantic-surface-error-strong);
+}
+.semantic-surface-warning-subtle {
+  --ds-color: var(--semantic-surface-warning-subtle);
+}
+.semantic-surface-warning-default {
+  --ds-color: var(--semantic-surface-warning-default);
+}
+.semantic-surface-warning-strong {
+  --ds-color: var(--semantic-surface-warning-strong);
+}
+.semantic-surface-info-subtle {
+  --ds-color: var(--semantic-surface-info-subtle);
+}
+.semantic-surface-info-default {
+  --ds-color: var(--semantic-surface-info-default);
+}
+.semantic-surface-info-strong {
+  --ds-color: var(--semantic-surface-info-strong);
+}
+.semantic-border-default {
+  --ds-color: var(--semantic-border-default);
+}
+.semantic-border-subtle {
+  --ds-color: var(--semantic-border-subtle);
+}
+.semantic-border-strong {
+  --ds-color: var(--semantic-border-strong);
+}
+.semantic-border-disabled {
+  --ds-color: var(--semantic-border-disabled);
+}
+.semantic-border-brand {
+  --ds-color: var(--semantic-border-brand);
+}
+.semantic-border-success {
+  --ds-color: var(--semantic-border-success);
+}
+.semantic-border-error {
+  --ds-color: var(--semantic-border-error);
+}
+.semantic-border-warning {
+  --ds-color: var(--semantic-border-warning);
+}
+.semantic-border-info {
+  --ds-color: var(--semantic-border-info);
+}
+.semantic-icon-strong {
+  --ds-color: var(--semantic-icon-strong);
+}
+.semantic-icon-subtle {
+  --ds-color: var(--semantic-icon-subtle);
+}
+.semantic-icon-inverse {
+  --ds-color: var(--semantic-icon-inverse);
+}
+.semantic-icon-brand {
+  --ds-color: var(--semantic-icon-brand);
+}
+.semantic-icon-success {
+  --ds-color: var(--semantic-icon-success);
+}
+.semantic-icon-error {
+  --ds-color: var(--semantic-icon-error);
+}
+.semantic-icon-warning {
+  --ds-color: var(--semantic-icon-warning);
+}
+.semantic-icon-info {
+  --ds-color: var(--semantic-icon-info);
+}
+.semantic-icon-disabled {
+  --ds-color: var(--semantic-icon-disabled);
+}
+.semantic-emphasis-brand {
+  --ds-color: var(--semantic-emphasis-brand);
+}
+.semantic-emphasis-success {
+  --ds-color: var(--semantic-emphasis-success);
+}
+.semantic-emphasis-error {
+  --ds-color: var(--semantic-emphasis-error);
+}
+.semantic-emphasis-warning {
+  --ds-color: var(--semantic-emphasis-warning);
+}
+.semantic-emphasis-info {
+  --ds-color: var(--semantic-emphasis-info);
+}
+.semantic-interaction-overlay-10 {
+  --ds-color: var(--semantic-interaction-overlay-10);
+}
+.semantic-interaction-overlay-25 {
+  --ds-color: var(--semantic-interaction-overlay-25);
+}
+.semantic-interaction-focus-ring {
+  --ds-color: var(--semantic-interaction-focus-ring);
+}
+.brand-primary-50 {
+  --ds-color: var(--brand-primary-50);
+}
+.brand-primary-100 {
+  --ds-color: var(--brand-primary-100);
+}
+.brand-primary-200 {
+  --ds-color: var(--brand-primary-200);
+}
+.brand-primary-300 {
+  --ds-color: var(--brand-primary-300);
+}
+.brand-primary-400 {
+  --ds-color: var(--brand-primary-400);
+}
+.brand-primary-500 {
+  --ds-color: var(--brand-primary-500);
+}
+.brand-primary-600 {
+  --ds-color: var(--brand-primary-600);
+}
+.brand-primary-700 {
+  --ds-color: var(--brand-primary-700);
+}
+.brand-primary-800 {
+  --ds-color: var(--brand-primary-800);
+}
+.brand-primary-900 {
+  --ds-color: var(--brand-primary-900);
+}
+.brand-secondary-50 {
+  --ds-color: var(--brand-secondary-50);
+}
+.brand-secondary-100 {
+  --ds-color: var(--brand-secondary-100);
+}
+.brand-secondary-200 {
+  --ds-color: var(--brand-secondary-200);
+}
+.brand-secondary-300 {
+  --ds-color: var(--brand-secondary-300);
+}
+.brand-secondary-400 {
+  --ds-color: var(--brand-secondary-400);
+}
+.brand-secondary-500 {
+  --ds-color: var(--brand-secondary-500);
+}
+.brand-secondary-600 {
+  --ds-color: var(--brand-secondary-600);
+}
+.brand-secondary-700 {
+  --ds-color: var(--brand-secondary-700);
+}
+.brand-secondary-800 {
+  --ds-color: var(--brand-secondary-800);
+}
+.brand-secondary-900 {
+  --ds-color: var(--brand-secondary-900);
+}
+.brand-neutral-50 {
+  --ds-color: var(--brand-neutral-50);
+}
+.brand-neutral-100 {
+  --ds-color: var(--brand-neutral-100);
+}
+.brand-neutral-200 {
+  --ds-color: var(--brand-neutral-200);
+}
+.brand-neutral-300 {
+  --ds-color: var(--brand-neutral-300);
+}
+.brand-neutral-400 {
+  --ds-color: var(--brand-neutral-400);
+}
+.brand-neutral-500 {
+  --ds-color: var(--brand-neutral-500);
+}
+.brand-neutral-600 {
+  --ds-color: var(--brand-neutral-600);
+}
+.brand-neutral-700 {
+  --ds-color: var(--brand-neutral-700);
+}
+.brand-neutral-800 {
+  --ds-color: var(--brand-neutral-800);
+}
+.brand-neutral-900 {
+  --ds-color: var(--brand-neutral-900);
+}
+.brand-base-white {
+  --ds-color: var(--brand-base-white);
+}
+.brand-base-black-alpha-10 {
+  --ds-color: var(--brand-base-black-alpha-10);
+}
+.brand-base-black-alpha-25 {
+  --ds-color: var(--brand-base-black-alpha-25);
+}
+.brand-categorical-1-100 {
+  --ds-color: var(--brand-categorical-1-100);
+}
+.brand-categorical-1-200 {
+  --ds-color: var(--brand-categorical-1-200);
+}
+.brand-categorical-1-300 {
+  --ds-color: var(--brand-categorical-1-300);
+}
+.brand-categorical-1-400 {
+  --ds-color: var(--brand-categorical-1-400);
+}
+.brand-categorical-1-500 {
+  --ds-color: var(--brand-categorical-1-500);
+}
+.brand-categorical-1-600 {
+  --ds-color: var(--brand-categorical-1-600);
+}
+.brand-categorical-2-100 {
+  --ds-color: var(--brand-categorical-2-100);
+}
+.brand-categorical-2-200 {
+  --ds-color: var(--brand-categorical-2-200);
+}
+.brand-categorical-2-300 {
+  --ds-color: var(--brand-categorical-2-300);
+}
+.brand-categorical-2-400 {
+  --ds-color: var(--brand-categorical-2-400);
+}
+.brand-categorical-2-500 {
+  --ds-color: var(--brand-categorical-2-500);
+}
+.brand-categorical-2-600 {
+  --ds-color: var(--brand-categorical-2-600);
+}
+.brand-categorical-3-100 {
+  --ds-color: var(--brand-categorical-3-100);
+}
+.brand-categorical-3-200 {
+  --ds-color: var(--brand-categorical-3-200);
+}
+.brand-categorical-3-300 {
+  --ds-color: var(--brand-categorical-3-300);
+}
+.brand-categorical-3-400 {
+  --ds-color: var(--brand-categorical-3-400);
 }
-.xplat-green-700 {
-  --ds-color: var(--xplat-green-700);
+.brand-categorical-3-500 {
+  --ds-color: var(--brand-categorical-3-500);
 }
-.xplat-green-800 {
-  --ds-color: var(--xplat-green-800);
+.brand-categorical-3-600 {
+  --ds-color: var(--brand-categorical-3-600);
 }
-.xplat-green-900 {
-  --ds-color: var(--xplat-green-900);
+.brand-categorical-4-100 {
+  --ds-color: var(--brand-categorical-4-100);
 }
-.xplat-orange-50 {
-  --ds-color: var(--xplat-orange-50);
+.brand-categorical-4-200 {
+  --ds-color: var(--brand-categorical-4-200);
 }
-.xplat-orange-100 {
-  --ds-color: var(--xplat-orange-100);
+.brand-categorical-4-300 {
+  --ds-color: var(--brand-categorical-4-300);
 }
-.xplat-orange-200 {
-  --ds-color: var(--xplat-orange-200);
+.brand-categorical-4-400 {
+  --ds-color: var(--brand-categorical-4-400);
 }
-.xplat-orange-300 {
-  --ds-color: var(--xplat-orange-300);
+.brand-categorical-4-500 {
+  --ds-color: var(--brand-categorical-4-500);
 }
-.xplat-orange-400 {
-  --ds-color: var(--xplat-orange-400);
+.brand-categorical-4-600 {
+  --ds-color: var(--brand-categorical-4-600);
 }
-.xplat-orange-500 {
-  --ds-color: var(--xplat-orange-500);
+.brand-categorical-5-100 {
+  --ds-color: var(--brand-categorical-5-100);
 }
-.xplat-orange-600 {
-  --ds-color: var(--xplat-orange-600);
+.brand-categorical-5-200 {
+  --ds-color: var(--brand-categorical-5-200);
 }
-.xplat-orange-700 {
-  --ds-color: var(--xplat-orange-700);
+.brand-categorical-5-300 {
+  --ds-color: var(--brand-categorical-5-300);
 }
-.xplat-orange-800 {
-  --ds-color: var(--xplat-orange-800);
+.brand-categorical-5-400 {
+  --ds-color: var(--brand-categorical-5-400);
 }
-.xplat-orange-900 {
-  --ds-color: var(--xplat-orange-900);
+.brand-categorical-5-500 {
+  --ds-color: var(--brand-categorical-5-500);
 }
-.xplat-yellow-50 {
-  --ds-color: var(--xplat-yellow-50);
+.brand-categorical-5-600 {
+  --ds-color: var(--brand-categorical-5-600);
 }
-.xplat-yellow-100 {
-  --ds-color: var(--xplat-yellow-100);
+.brand-categorical-6-100 {
+  --ds-color: var(--brand-categorical-6-100);
 }
-.xplat-yellow-200 {
-  --ds-color: var(--xplat-yellow-200);
+.brand-categorical-6-200 {
+  --ds-color: var(--brand-categorical-6-200);
 }
-.xplat-yellow-300 {
-  --ds-color: var(--xplat-yellow-300);
+.brand-categorical-6-300 {
+  --ds-color: var(--brand-categorical-6-300);
 }
-.xplat-yellow-400 {
-  --ds-color: var(--xplat-yellow-400);
+.brand-categorical-6-400 {
+  --ds-color: var(--brand-categorical-6-400);
 }
-.xplat-yellow-500 {
-  --ds-color: var(--xplat-yellow-500);
+.brand-categorical-6-500 {
+  --ds-color: var(--brand-categorical-6-500);
 }
-.xplat-yellow-600 {
-  --ds-color: var(--xplat-yellow-600);
+.brand-categorical-6-600 {
+  --ds-color: var(--brand-categorical-6-600);
 }
-.xplat-yellow-700 {
-  --ds-color: var(--xplat-yellow-700);
+.brand-categorical-7-100 {
+  --ds-color: var(--brand-categorical-7-100);
 }
-.xplat-yellow-800 {
-  --ds-color: var(--xplat-yellow-800);
+.brand-categorical-7-200 {
+  --ds-color: var(--brand-categorical-7-200);
 }
-.xplat-yellow-900 {
-  --ds-color: var(--xplat-yellow-900);
+.brand-categorical-7-300 {
+  --ds-color: var(--brand-categorical-7-300);
 }
-.xplat-blue-50 {
-  --ds-color: var(--xplat-blue-50);
+.brand-categorical-7-400 {
+  --ds-color: var(--brand-categorical-7-400);
 }
-.xplat-blue-100 {
-  --ds-color: var(--xplat-blue-100);
+.brand-categorical-7-500 {
+  --ds-color: var(--brand-categorical-7-500);
 }
-.xplat-blue-200 {
-  --ds-color: var(--xplat-blue-200);
+.brand-categorical-7-600 {
+  --ds-color: var(--brand-categorical-7-600);
 }
-.xplat-blue-300 {
-  --ds-color: var(--xplat-blue-300);
+.brand-categorical-8-100 {
+  --ds-color: var(--brand-categorical-8-100);
 }
-.xplat-blue-400 {
-  --ds-color: var(--xplat-blue-400);
+.brand-categorical-8-200 {
+  --ds-color: var(--brand-categorical-8-200);
 }
-.xplat-blue-500 {
-  --ds-color: var(--xplat-blue-500);
+.brand-categorical-8-300 {
+  --ds-color: var(--brand-categorical-8-300);
 }
-.xplat-blue-600 {
-  --ds-color: var(--xplat-blue-600);
+.brand-categorical-8-400 {
+  --ds-color: var(--brand-categorical-8-400);
 }
-.xplat-blue-700 {
-  --ds-color: var(--xplat-blue-700);
+.brand-categorical-8-500 {
+  --ds-color: var(--brand-categorical-8-500);
 }
-.xplat-blue-800 {
-  --ds-color: var(--xplat-blue-800);
+.brand-categorical-8-600 {
+  --ds-color: var(--brand-categorical-8-600);
 }
-.xplat-blue-900 {
-  --ds-color: var(--xplat-blue-900);
+.system-success-50 {
+  --ds-color: var(--system-success-50);
 }
-.xplat-lightblue-50 {
-  --ds-color: var(--xplat-lightblue-50);
+.system-success-100 {
+  --ds-color: var(--system-success-100);
 }
-.xplat-lightblue-100 {
-  --ds-color: var(--xplat-lightblue-100);
+.system-success-200 {
+  --ds-color: var(--system-success-200);
 }
-.xplat-lightblue-200 {
-  --ds-color: var(--xplat-lightblue-200);
+.system-success-300 {
+  --ds-color: var(--system-success-300);
 }
-.xplat-lightblue-300 {
-  --ds-color: var(--xplat-lightblue-300);
+.system-success-400 {
+  --ds-color: var(--system-success-400);
 }
-.xplat-lightblue-400 {
-  --ds-color: var(--xplat-lightblue-400);
+.system-success-500 {
+  --ds-color: var(--system-success-500);
 }
-.xplat-lightblue-500 {
-  --ds-color: var(--xplat-lightblue-500);
+.system-success-600 {
+  --ds-color: var(--system-success-600);
 }
-.xplat-lightblue-600 {
-  --ds-color: var(--xplat-lightblue-600);
+.system-success-700 {
+  --ds-color: var(--system-success-700);
 }
-.xplat-lightblue-700 {
-  --ds-color: var(--xplat-lightblue-700);
+.system-success-800 {
+  --ds-color: var(--system-success-800);
 }
-.xplat-lightblue-800 {
-  --ds-color: var(--xplat-lightblue-800);
+.system-success-900 {
+  --ds-color: var(--system-success-900);
 }
-.xplat-lightblue-900 {
-  --ds-color: var(--xplat-lightblue-900);
+.system-error-50 {
+  --ds-color: var(--system-error-50);
 }
-.xplat-purple-50 {
-  --ds-color: var(--xplat-purple-50);
+.system-error-100 {
+  --ds-color: var(--system-error-100);
 }
-.xplat-purple-100 {
-  --ds-color: var(--xplat-purple-100);
+.system-error-200 {
+  --ds-color: var(--system-error-200);
 }
-.xplat-purple-200 {
-  --ds-color: var(--xplat-purple-200);
+.system-error-300 {
+  --ds-color: var(--system-error-300);
 }
-.xplat-purple-300 {
-  --ds-color: var(--xplat-purple-300);
+.system-error-400 {
+  --ds-color: var(--system-error-400);
 }
-.xplat-purple-400 {
-  --ds-color: var(--xplat-purple-400);
+.system-error-500 {
+  --ds-color: var(--system-error-500);
 }
-.xplat-purple-500 {
-  --ds-color: var(--xplat-purple-500);
+.system-error-600 {
+  --ds-color: var(--system-error-600);
 }
-.xplat-purple-600 {
-  --ds-color: var(--xplat-purple-600);
+.system-error-700 {
+  --ds-color: var(--system-error-700);
 }
-.xplat-purple-700 {
-  --ds-color: var(--xplat-purple-700);
+.system-error-800 {
+  --ds-color: var(--system-error-800);
 }
-.xplat-purple-800 {
-  --ds-color: var(--xplat-purple-800);
+.system-error-900 {
+  --ds-color: var(--system-error-900);
 }
-.xplat-purple-900 {
-  --ds-color: var(--xplat-purple-900);
+.system-warning-50 {
+  --ds-color: var(--system-warning-50);
 }
-.xplat-pink-50 {
-  --ds-color: var(--xplat-pink-50);
+.system-warning-100 {
+  --ds-color: var(--system-warning-100);
 }
-.xplat-pink-100 {
-  --ds-color: var(--xplat-pink-100);
+.system-warning-200 {
+  --ds-color: var(--system-warning-200);
 }
-.xplat-pink-200 {
-  --ds-color: var(--xplat-pink-200);
+.system-warning-300 {
+  --ds-color: var(--system-warning-300);
 }
-.xplat-pink-300 {
-  --ds-color: var(--xplat-pink-300);
+.system-warning-400 {
+  --ds-color: var(--system-warning-400);
 }
-.xplat-pink-400 {
-  --ds-color: var(--xplat-pink-400);
+.system-warning-500 {
+  --ds-color: var(--system-warning-500);
 }
-.xplat-pink-500 {
-  --ds-color: var(--xplat-pink-500);
+.system-warning-600 {
+  --ds-color: var(--system-warning-600);
 }
-.xplat-pink-600 {
-  --ds-color: var(--xplat-pink-600);
+.system-warning-700 {
+  --ds-color: var(--system-warning-700);
 }
-.xplat-pink-700 {
-  --ds-color: var(--xplat-pink-700);
+.system-warning-800 {
+  --ds-color: var(--system-warning-800);
 }
-.xplat-pink-800 {
-  --ds-color: var(--xplat-pink-800);
+.system-warning-900 {
+  --ds-color: var(--system-warning-900);
 }
-.xplat-pink-900 {
-  --ds-color: var(--xplat-pink-900);
+.system-info-50 {
+  --ds-color: var(--system-info-50);
 }
-.xplat-neutral-50 {
-  --ds-color: var(--xplat-neutral-50);
+.system-info-100 {
+  --ds-color: var(--system-info-100);
 }
-.xplat-neutral-100 {
-  --ds-color: var(--xplat-neutral-100);
+.system-info-200 {
+  --ds-color: var(--system-info-200);
 }
-.xplat-neutral-200 {
-  --ds-color: var(--xplat-neutral-200);
+.system-info-300 {
+  --ds-color: var(--system-info-300);
 }
-.xplat-neutral-300 {
-  --ds-color: var(--xplat-neutral-300);
+.system-info-400 {
+  --ds-color: var(--system-info-400);
 }
-.xplat-neutral-400 {
-  --ds-color: var(--xplat-neutral-400);
+.system-info-500 {
+  --ds-color: var(--system-info-500);
 }
-.xplat-neutral-500 {
-  --ds-color: var(--xplat-neutral-500);
+.system-info-600 {
+  --ds-color: var(--system-info-600);
 }
-.xplat-neutral-600 {
-  --ds-color: var(--xplat-neutral-600);
+.system-info-700 {
+  --ds-color: var(--system-info-700);
 }
-.xplat-neutral-700 {
-  --ds-color: var(--xplat-neutral-700);
+.system-info-800 {
+  --ds-color: var(--system-info-800);
 }
-.xplat-neutral-800 {
-  --ds-color: var(--xplat-neutral-800);
+.system-info-900 {
+  --ds-color: var(--system-info-900);
 }
-.xplat-neutral-900 {
-  --ds-color: var(--xplat-neutral-900);
+.system-link-400 {
+  --ds-color: var(--system-link-400);
 }
-.xplat-black {
-  --ds-color: var(--xplat-black);
+.system-link-500 {
+  --ds-color: var(--system-link-500);
 }
-.xplat-white {
-  --ds-color: var(--xplat-white);
+.system-link-600 {
+  --ds-color: var(--system-link-600);
 }
-.test-default {
-  --ds-color: var(--test-default);
+.system-link-700 {
+  --ds-color: var(--system-link-700);
 }
 
 /* src/layout/Grid/FullGrid/fullgrid.scss */