diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css
index 3297b489..9c6b7a5f 100644
--- a/src/css/brand-colors.css
+++ b/src/css/brand-colors.css
@@ -7,103 +7,103 @@
 
 :root {
   /* Grey */
-  --brand-colors-grey-100: #dadce5;
-  --brand-colors-grey-200: #b7bbc8;
-  --brand-colors-grey-300: #9ca1af;
-  --brand-colors-grey-400: #858b9a;
-  --brand-colors-grey-500: #686e7d;
-  --brand-colors-grey-600: #4b505c;
-  --brand-colors-grey-700: #31333a;
-  --brand-colors-grey-800: #222325;
-  --brand-colors-grey-900: #121314;
-  --brand-colors-grey-1000: #000000;
-  --brand-colors-grey-050: #f3f5f9;
-  --brand-colors-grey-000: #ffffff;
-  --brand-colors-grey-025: #f7f9fc;
+  --brand-colors-grey-grey100: #dadce5;
+  --brand-colors-grey-grey200: #b7bbc8;
+  --brand-colors-grey-grey300: #9ca1af;
+  --brand-colors-grey-grey400: #858b9a;
+  --brand-colors-grey-grey500: #686e7d;
+  --brand-colors-grey-grey600: #4b505c;
+  --brand-colors-grey-grey700: #31333a;
+  --brand-colors-grey-grey800: #222325;
+  --brand-colors-grey-grey900: #121314;
+  --brand-colors-grey-grey1000: #000000;
+  --brand-colors-grey-grey050: #f3f5f9;
+  --brand-colors-grey-grey000: #ffffff;
+  --brand-colors-grey-grey025: #f7f9fc;
   /* Blue */
-  --brand-colors-blue-100: #d6dbff;
-  --brand-colors-blue-200: #adb6fe;
-  --brand-colors-blue-300: #8b99ff;
-  --brand-colors-blue-400: #6f7eff;
-  --brand-colors-blue-500: #4459ff;
-  --brand-colors-blue-600: #2c3dc5;
-  --brand-colors-blue-700: #1c277f;
-  --brand-colors-blue-800: #131b59;
-  --brand-colors-blue-900: #0b0f32;
-  --brand-colors-blue-050: #f4f5ff;
-  --brand-colors-blue-025: #f8f9ff;
+  --brand-colors-blue-blue100: #d6dbff;
+  --brand-colors-blue-blue200: #adb6fe;
+  --brand-colors-blue-blue300: #8b99ff;
+  --brand-colors-blue-blue400: #6f7eff;
+  --brand-colors-blue-blue500: #4459ff;
+  --brand-colors-blue-blue600: #2c3dc5;
+  --brand-colors-blue-blue700: #1c277f;
+  --brand-colors-blue-blue800: #131b59;
+  --brand-colors-blue-blue900: #0b0f32;
+  --brand-colors-blue-blue050: #f4f5ff;
+  --brand-colors-blue-blue025: #f8f9ff;
   /* Green */
-  --brand-colors-green-100: #c1e6c9;
-  --brand-colors-green-200: #80cb91;
-  --brand-colors-green-300: #4cb564;
-  --brand-colors-green-400: #279f41;
-  --brand-colors-green-500: #1c7e33;
-  --brand-colors-green-600: #145d25;
-  --brand-colors-green-700: #0d3b18;
-  --brand-colors-green-800: #092912;
-  --brand-colors-green-900: #051709;
-  --brand-colors-green-050: #ebf7ee;
-  --brand-colors-green-025: #f1faf4;
+  --brand-colors-green-green100: #c1e6c9;
+  --brand-colors-green-green200: #80cb91;
+  --brand-colors-green-green300: #4cb564;
+  --brand-colors-green-green400: #279f41;
+  --brand-colors-green-green500: #1c7e33;
+  --brand-colors-green-green600: #145d25;
+  --brand-colors-green-green700: #0d3b18;
+  --brand-colors-green-green800: #092912;
+  --brand-colors-green-green900: #051709;
+  --brand-colors-green-green050: #ebf7ee;
+  --brand-colors-green-green025: #f1faf4;
   /* Red */
-  --brand-colors-red-100: #ffd2d5;
-  --brand-colors-red-200: #ffa1aa;
-  --brand-colors-red-300: #ff7584;
-  --brand-colors-red-400: #f74d5e;
-  --brand-colors-red-500: #ca3542;
-  --brand-colors-red-600: #952731;
-  --brand-colors-red-700: #611a20;
-  --brand-colors-red-800: #431216;
-  --brand-colors-red-900: #3b0f13;
-  --brand-colors-red-050: #fff2f3;
-  --brand-colors-red-025: #fff6f7;
+  --brand-colors-red-red100: #ffd2d5;
+  --brand-colors-red-red200: #ffa1aa;
+  --brand-colors-red-red300: #ff7584;
+  --brand-colors-red-red400: #f74d5e;
+  --brand-colors-red-red500: #ca3542;
+  --brand-colors-red-red600: #952731;
+  --brand-colors-red-red700: #611a20;
+  --brand-colors-red-red800: #431216;
+  --brand-colors-red-red900: #3b0f13;
+  --brand-colors-red-red050: #fff2f3;
+  --brand-colors-red-red025: #fff6f7;
   /* Yellow */
-  --brand-colors-yellow-100: #ffd957;
-  --brand-colors-yellow-200: #f0b034;
-  --brand-colors-yellow-300: #e18f01;
-  --brand-colors-yellow-400: #c37b02;
-  --brand-colors-yellow-500: #9a6300;
-  --brand-colors-yellow-600: #714802;
-  --brand-colors-yellow-700: #482d01;
-  --brand-colors-yellow-800: #321f00;
-  --brand-colors-yellow-900: #1c1100;
-  --brand-colors-yellow-050: #fff5d5;
-  --brand-colors-yellow-025: #fff9e6;
+  --brand-colors-yellow-yellow100: #ffd957;
+  --brand-colors-yellow-yellow200: #f0b034;
+  --brand-colors-yellow-yellow300: #e18f01;
+  --brand-colors-yellow-yellow400: #c37b02;
+  --brand-colors-yellow-yellow500: #9a6300;
+  --brand-colors-yellow-yellow600: #714802;
+  --brand-colors-yellow-yellow700: #482d01;
+  --brand-colors-yellow-yellow800: #321f00;
+  --brand-colors-yellow-yellow900: #1c1100;
+  --brand-colors-yellow-yellow050: #fff5d5;
+  --brand-colors-yellow-yellow025: #fff9e6;
   /* Orange */
-  --brand-colors-orange-100: #ffd4c1;
-  --brand-colors-orange-200: #ffa47c;
-  --brand-colors-orange-300: #ff7940;
-  --brand-colors-orange-400: #f35714;
-  --brand-colors-orange-500: #c3420d;
-  --brand-colors-orange-600: #932d06;
-  --brand-colors-orange-700: #631800;
-  --brand-colors-orange-800: #451100;
-  --brand-colors-orange-900: #280a00;
-  --brand-colors-orange-050: #fff0ea;
-  --brand-colors-orange-025: #fff8f5;
+  --brand-colors-orange-orange100: #ffd4c1;
+  --brand-colors-orange-orange200: #ffa47c;
+  --brand-colors-orange-orange300: #ff7940;
+  --brand-colors-orange-orange400: #f35714;
+  --brand-colors-orange-orange500: #c3420d;
+  --brand-colors-orange-orange600: #932d06;
+  --brand-colors-orange-orange700: #631800;
+  --brand-colors-orange-orange800: #451100;
+  --brand-colors-orange-orange900: #280a00;
+  --brand-colors-orange-orange050: #fff0ea;
+  --brand-colors-orange-orange025: #fff8f5;
   /* Purple */
-  --brand-colors-purple-100: #efd2ff;
-  --brand-colors-purple-200: #dfa4ff;
-  --brand-colors-purple-300: #d27dff;
-  --brand-colors-purple-400: #b864f5;
-  --brand-colors-purple-500: #8f44e4;
-  --brand-colors-purple-600: #6c2ab2;
-  --brand-colors-purple-700: #6c2ab2;
-  --brand-colors-purple-800: #380658;
-  --brand-colors-purple-900: #280a00;
-  --brand-colors-purple-050: #fbf2ff;
-  --brand-colors-purple-025: #fcf6ff;
+  --brand-colors-purple-purple100: #efd2ff;
+  --brand-colors-purple-purple200: #dfa4ff;
+  --brand-colors-purple-purple300: #d27dff;
+  --brand-colors-purple-purple400: #b864f5;
+  --brand-colors-purple-purple500: #8f44e4;
+  --brand-colors-purple-purple600: #6c2ab2;
+  --brand-colors-purple-purple700: #6c2ab2;
+  --brand-colors-purple-purple800: #380658;
+  --brand-colors-purple-purple900: #280a00;
+  --brand-colors-purple-purple050: #fbf2ff;
+  --brand-colors-purple-purple025: #fcf6ff;
   /* Lime */
-  --brand-colors-lime-100: #b8ef4a;
-  --brand-colors-lime-200: #95ca45;
-  --brand-colors-lime-300: #7ab040;
-  --brand-colors-lime-400: #64993d;
-  --brand-colors-lime-500: #457a39;
-  --brand-colors-lime-600: #275b35;
-  --brand-colors-lime-700: #093a31;
-  --brand-colors-lime-800: #012826;
-  --brand-colors-lime-900: #011515;
-  --brand-colors-lime-025: #effed9;
-  --brand-colors-lime-050: #e3febd;
+  --brand-colors-lime-lime100: #b8ef4a;
+  --brand-colors-lime-lime200: #95ca45;
+  --brand-colors-lime-lime300: #7ab040;
+  --brand-colors-lime-lime400: #64993d;
+  --brand-colors-lime-lime500: #457a39;
+  --brand-colors-lime-lime600: #275b35;
+  --brand-colors-lime-lime700: #093a31;
+  --brand-colors-lime-lime800: #012826;
+  --brand-colors-lime-lime900: #011515;
+  --brand-colors-lime-lime025: #effed9;
+  --brand-colors-lime-lime050: #e3febd;
   /* White */
   --brand-colors-white: #ffffff;
   /* Black */
diff --git a/src/css/dark-theme-colors.css b/src/css/dark-theme-colors.css
index 89f55ccb..97576110 100644
--- a/src/css/dark-theme-colors.css
+++ b/src/css/dark-theme-colors.css
@@ -6,9 +6,9 @@
 
 [data-theme='dark'] {
   /* For default neutral backgrounds */
-  --color-background-default: var(--brand-colors-grey-800);
+  --color-background-default: var(--brand-colors-grey-grey800);
   /* For secondary neutral backgrounds. */
-  --color-background-alternative: var(--brand-colors-grey-900);
+  --color-background-alternative: var(--brand-colors-grey-grey900);
   /* For "hover" states that use background-default. */
   --color-background-default-hover: #313235;
   /* For "pressed" states that use background-alternative. */
@@ -22,19 +22,19 @@
   /* For "pressed" state that use no background fill.  (black-12% | white-12%) */
   --color-background-pressed: #ffffff1f;
   /* For default neutral text. */
-  --color-text-default: var(--brand-colors-grey-000);
+  --color-text-default: var(--brand-colors-grey-grey000);
   /* For softer contrast neutral text */
-  --color-text-alternative: var(--brand-colors-grey-200);
+  --color-text-alternative: var(--brand-colors-grey-grey200);
   /* For the softest contrast neutral text (not accessible) */
-  --color-text-muted: var(--brand-colors-grey-400);
+  --color-text-muted: var(--brand-colors-grey-grey400);
   /* For default neutral icons */
-  --color-icon-default: var(--brand-colors-grey-000);
+  --color-icon-default: var(--brand-colors-grey-grey000);
   /* For softer neutral icons */
-  --color-icon-alternative: var(--brand-colors-grey-200);
+  --color-icon-alternative: var(--brand-colors-grey-grey200);
   /* For the weakest contrast neutral icons (not accessible) */
-  --color-icon-muted: var(--brand-colors-grey-400);
+  --color-icon-muted: var(--brand-colors-grey-grey400);
   /* For soft contrast neutral border */
-  --color-border-default: var(--brand-colors-grey-400);
+  --color-border-default: var(--brand-colors-grey-grey400);
   /* For the weakest  contrast neutral border (grey200-40% | grey400-20%) */
   --color-border-muted: #858b9a33;
   /* For the default shade of screen (black-40%) */
@@ -42,61 +42,61 @@
   /* For a stronger shade of screen (black-80%) */
   --color-overlay-alternative: #000000cc;
   /* For elements used on top of overlay/alternative. Used for text, icon or border */
-  --color-overlay-inverse: var(--brand-colors-grey-000);
+  --color-overlay-inverse: var(--brand-colors-grey-grey000);
   /* For interactive, active, and selected semantics. Used for text, background, icon or border */
-  --color-primary-default: var(--brand-colors-blue-300);
+  --color-primary-default: var(--brand-colors-blue-blue300);
   /* For the stronger contrast primary semantic elements. */
-  --color-primary-alternative: var(--brand-colors-blue-200);
+  --color-primary-alternative: var(--brand-colors-blue-blue200);
   /* For the weakest contrast primary semantic backgrounds. (blue500-10% | blue300-15%) */
   --color-primary-muted: #8b99ff26;
   /* For elements used on top of primary/default. Used for text, icon or border */
-  --color-primary-inverse: var(--brand-colors-grey-900);
+  --color-primary-inverse: var(--brand-colors-grey-grey900);
   /* For the "hover" state of primary-default elements */
   --color-primary-default-hover: #a8b2ff;
   /* For the "pressed" state of primary-default elements */
   --color-primary-default-pressed: #c7ceff;
   /* For the critical alert semantic elements. Used for text, background, icon or border */
-  --color-error-default: var(--brand-colors-red-300);
+  --color-error-default: var(--brand-colors-red-red300);
   /* For the stronger contrast error semantic elements. */
-  --color-error-alternative: var(--brand-colors-red-200);
+  --color-error-alternative: var(--brand-colors-red-red200);
   /* For the weakest contrast critical alert semantic backgrounds. (red500-10% | red300-15%) */
   --color-error-muted: #ff758426;
   /* For elements used on top of error/default. Used for text, icon or border */
-  --color-error-inverse: var(--brand-colors-grey-900);
+  --color-error-inverse: var(--brand-colors-grey-grey900);
   /* For the "hover" state of error-default elements. */
   --color-error-default-hover: #ff94a0;
   /* For the "pressed" state of error-default elements. */
   --color-error-default-pressed: #ffb2bb;
   /* For the caution alert semantic elements. Used for text, background, icon or border */
-  --color-warning-default: var(--brand-colors-yellow-100);
+  --color-warning-default: var(--brand-colors-yellow-yellow100);
   /* For the weakest contrast caution alert semantic backgrounds. (yellow500-10% | yellow100-15%) */
   --color-warning-muted: #ffd95726;
   /* For elements used on top of warning/default. Used for text, icon or border */
-  --color-warning-inverse: var(--brand-colors-grey-900);
+  --color-warning-inverse: var(--brand-colors-grey-grey900);
   /* For the "hover" state of warning-default elements */
   --color-warning-default-hover: #ffe794;
   /* For the "pressed" state of warning-default elements */
   --color-warning-default-pressed: #ffeeb2;
   /* For the positive semantic elements. Used for text, background, icon or border */
-  --color-success-default: var(--brand-colors-green-300);
+  --color-success-default: var(--brand-colors-green-green300);
   /* For the weakest contrast positive semantic backgrounds. (green500-10% | green300-10%) */
   --color-success-muted: #4cb56426;
   /* For elements used on top of success/default. Used for text, icon or border */
-  --color-success-inverse: var(--brand-colors-grey-900);
+  --color-success-inverse: var(--brand-colors-grey-grey900);
   /* For the "hover" state of success-default elements */
   --color-success-default-hover: #60bd76;
   /* For the "pressed" state of success-default elements */
   --color-success-default-pressed: #76c688;
   /* For informational read-only elements. Used for text, background, icon or border */
-  --color-info-default: var(--brand-colors-blue-300);
+  --color-info-default: var(--brand-colors-blue-blue300);
   /* For the weakest contrast informational semantic backgrounds.(blue500-10% | blue300-15%) */
   --color-info-muted: #8b99ff26;
   /* For elements used on top of info/default. Used for text, icon or border */
-  --color-info-inverse: var(--brand-colors-grey-900);
+  --color-info-inverse: var(--brand-colors-grey-grey900);
   /* For Flask primary accent color. */
-  --color-flask-default: var(--brand-colors-purple-300);
+  --color-flask-default: var(--brand-colors-purple-purple300);
   /* For elements used on top of flask/default. Used for text, icon or border */
-  --color-flask-inverse: var(--brand-colors-grey-900);
+  --color-flask-inverse: var(--brand-colors-grey-grey900);
   /* For neutral drop shadow color. (black-10% | black-40%) */
   --color-shadow-default: #00000066;
   /* For primary drop shadow color. (blue500-20% | blue300-20%) */
diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css
index 22d27b77..5f6c1703 100644
--- a/src/css/light-theme-colors.css
+++ b/src/css/light-theme-colors.css
@@ -7,9 +7,9 @@
 :root,
 [data-theme='light'] {
   /* For default neutral backgrounds */
-  --color-background-default: var(--brand-colors-grey-000);
+  --color-background-default: var(--brand-colors-grey-grey000);
   /* For secondary neutral backgrounds. */
-  --color-background-alternative: var(--brand-colors-grey-050);
+  --color-background-alternative: var(--brand-colors-grey-grey050);
   /* For "hover" states that use background-default. */
   --color-background-default-hover: #f0f0f0;
   /* For "pressed" states that use background-alternative. */
@@ -23,19 +23,19 @@
   /* For "pressed" state that use no background fill.  (black-12% | white-12%) */
   --color-background-pressed: #0000001f;
   /* For default neutral text. */
-  --color-text-default: var(--brand-colors-grey-900);
+  --color-text-default: var(--brand-colors-grey-grey900);
   /* For softer contrast neutral text */
-  --color-text-alternative: var(--brand-colors-grey-500);
+  --color-text-alternative: var(--brand-colors-grey-grey500);
   /* For the softest contrast neutral text (not accessible) */
-  --color-text-muted: var(--brand-colors-grey-300);
+  --color-text-muted: var(--brand-colors-grey-grey300);
   /* For default neutral icons */
-  --color-icon-default: var(--brand-colors-grey-900);
+  --color-icon-default: var(--brand-colors-grey-grey900);
   /* For softer neutral icons */
-  --color-icon-alternative: var(--brand-colors-grey-500);
+  --color-icon-alternative: var(--brand-colors-grey-grey500);
   /* For the weakest contrast neutral icons (not accessible) */
-  --color-icon-muted: var(--brand-colors-grey-300);
+  --color-icon-muted: var(--brand-colors-grey-grey300);
   /* For soft contrast neutral border */
-  --color-border-default: var(--brand-colors-grey-200);
+  --color-border-default: var(--brand-colors-grey-grey200);
   /* For the weakest  contrast neutral border (grey200-40% | grey400-20%) */
   --color-border-muted: #b7bbc866;
   /* For the default shade of screen (black-40%) */
@@ -43,61 +43,61 @@
   /* For a stronger shade of screen (black-80%) */
   --color-overlay-alternative: #000000cc;
   /* For elements used on top of overlay/alternative. Used for text, icon or border */
-  --color-overlay-inverse: var(--brand-colors-grey-000);
+  --color-overlay-inverse: var(--brand-colors-grey-grey000);
   /* For interactive, active, and selected semantics. Used for text, background, icon or border */
-  --color-primary-default: var(--brand-colors-blue-500);
+  --color-primary-default: var(--brand-colors-blue-blue500);
   /* For the stronger contrast primary semantic elements. */
-  --color-primary-alternative: var(--brand-colors-blue-600);
+  --color-primary-alternative: var(--brand-colors-blue-blue600);
   /* For the weakest contrast primary semantic backgrounds. (blue500-10% | blue300-15%) */
   --color-primary-muted: #4459ff1a;
   /* For elements used on top of primary/default. Used for text, icon or border */
-  --color-primary-inverse: var(--brand-colors-grey-000);
+  --color-primary-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of primary-default elements */
   --color-primary-default-hover: #243cff;
   /* For the "pressed" state of primary-default elements */
   --color-primary-default-pressed: #0521ff;
   /* For the critical alert semantic elements. Used for text, background, icon or border */
-  --color-error-default: var(--brand-colors-red-500);
+  --color-error-default: var(--brand-colors-red-red500);
   /* For the stronger contrast error semantic elements. */
-  --color-error-alternative: var(--brand-colors-red-600);
+  --color-error-alternative: var(--brand-colors-red-red600);
   /* For the weakest contrast critical alert semantic backgrounds. (red500-10% | red300-15%) */
   --color-error-muted: #ca35421a;
   /* For elements used on top of error/default. Used for text, icon or border */
-  --color-error-inverse: var(--brand-colors-grey-000);
+  --color-error-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of error-default elements. */
   --color-error-default-hover: #b22f3a;
   /* For the "pressed" state of error-default elements. */
   --color-error-default-pressed: #9a2832;
   /* For the caution alert semantic elements. Used for text, background, icon or border */
-  --color-warning-default: var(--brand-colors-yellow-500);
+  --color-warning-default: var(--brand-colors-yellow-yellow500);
   /* For the weakest contrast caution alert semantic backgrounds. (yellow500-10% | yellow100-15%) */
   --color-warning-muted: #9a63001a;
   /* For elements used on top of warning/default. Used for text, icon or border */
-  --color-warning-inverse: var(--brand-colors-grey-000);
+  --color-warning-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of warning-default elements */
   --color-warning-default-hover: #7a4f00;
   /* For the "pressed" state of warning-default elements */
   --color-warning-default-pressed: #5c3b00;
   /* For the positive semantic elements. Used for text, background, icon or border */
-  --color-success-default: var(--brand-colors-green-500);
+  --color-success-default: var(--brand-colors-green-green500);
   /* For the weakest contrast positive semantic backgrounds. (green500-10% | green300-10%) */
   --color-success-muted: #1c7e331a;
   /* For elements used on top of success/default. Used for text, icon or border */
-  --color-success-inverse: var(--brand-colors-grey-000);
+  --color-success-inverse: var(--brand-colors-grey-grey000);
   /* For the "hover" state of success-default elements */
   --color-success-default-hover: #166429;
   /* For the "pressed" state of success-default elements */
   --color-success-default-pressed: #114b1e;
   /* For informational read-only elements. Used for text, background, icon or border */
-  --color-info-default: var(--brand-colors-blue-500);
+  --color-info-default: var(--brand-colors-blue-blue500);
   /* For the weakest contrast informational semantic backgrounds.(blue500-10% | blue300-15%) */
   --color-info-muted: #4459ff1a;
   /* For elements used on top of info/default. Used for text, icon or border */
-  --color-info-inverse: var(--brand-colors-grey-000);
+  --color-info-inverse: var(--brand-colors-grey-grey000);
   /* For Flask primary accent color. */
-  --color-flask-default: var(--brand-colors-purple-500);
+  --color-flask-default: var(--brand-colors-purple-purple500);
   /* For elements used on top of flask/default. Used for text, icon or border */
-  --color-flask-inverse: var(--brand-colors-grey-000);
+  --color-flask-inverse: var(--brand-colors-grey-grey000);
   /* For neutral drop shadow color. (black-10% | black-40%) */
   --color-shadow-default: #0000001a;
   /* For primary drop shadow color. (blue500-20% | blue300-20%) */