@licklist/design 0.78.21 → 0.78.26

package/src/v2/styles/tokens/_colors.scss

@@ -1,121 +1,554 @@
-/* Color tokens derived from Figma
- * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-92
+/* BKIT Design System Colors
+ * Complete color palette with base colors, semantic mappings, and theme variants
+ * Source: BKIT Base Colours, Main Colours, Semantic Colours, and Palette Mappings
  */
 
 :root {
-    /* Purples - Primary brand colors */
-    --color-purple-50: #efe6fd;
-    --color-purple-100: #dccefb;
-    --color-purple-200: #c49af7;
-    --color-purple-300: #a866f3;
-    --color-purple-400: #8c33ef;
-    --color-purple-500: #7000eb;
-    --color-purple-600: #5a00bc;
-    --color-purple-700: #450091;
-    --color-purple-800: #2f0064;
-    --color-purple-900: #1a0036;
-
-    /* Labels - Text colors */
-    --color-label-primary: #121e52;
-    --color-label-secondary: #626a90;
-    --color-label-tertiary: #979db2;
-    --color-label-disabled: #c2c7d4;
-    --color-label-inverse: #ffffff;
-
-    /* Surfaces - Background colors */
-    --color-surface-primary: #ffffff;
-    --color-surface-secondary: #f8f8fa;
-    --color-surface-tertiary: #e8e9ef;
-    --color-surface-hover: #f0f0f2;
-    --color-surface-active: #e8e9ef;
-    --color-surface-focus: #ffffff;
-
-    /* Borders */
-    --color-border-primary: #e8e9ef;
-    --color-border-secondary: #d4d6dd;
-    --color-border-focus: #7000eb;
-
-    /* Brand colors */
-    --color-primary: #7000eb;
-    --color-primary-hover: #5a00bc;
-    --color-primary-active: #450091;
-    --color-primary-focus: #8c33ef;
-    --color-primary-inverse: #ffffff;
-
-    /* Status colors */
-    --color-success: #10b981;
-    --color-success-light: #d1fae5;
-    --color-error: #ef4444;
-    --color-error-light: #fee2e2;
-    --color-warning: #f59e0b;
-    --color-warning-light: #fef3c7;
-    --color-info: #3b82f6;
-    --color-info-light: #dbeafe;
-
-    /* Fills */
-    --color-fill-primary: #14215a;
-    --color-fill-secondary: #626a90;
-    --color-fill-disabled: #c2c7d4;
-}
+  /* Base Colors - BKIT */
+  
+  /* Blues */
+  --blue-50: #E7F4FC;
+  --blue-100: #B4DBF6;
+  --blue-200: #90CAF2;
+  --blue-300: #5EB2EC;
+  --blue-400: #3EA3E8;
+  --blue-500: #0E8CE2;
+  --blue-600: #0D7FCE;
+  --blue-700: #0A63A0;
+  --blue-800: #084D7C;
+  --blue-900: #063B5F;
 
-/* Color utility mixins */
-@mixin color-bg($color) {
-    background-color: var(--color-#{$color});
-}
+  /* Cyans */
+  --cyan-50: #EAFBFF;
+  --cyan-75: #BDF3FF;
+  --cyan-100: #AFF1FF;
+  --cyan-200: #9DEEFF;
+  --cyan-300: #71E6FF;
+  --cyan-400: #55E1FF;
+  --cyan-500: #2BD9FF;
+  --cyan-600: #27C5E8;
+  --cyan-700: #1F9AB5;
+  --cyan-800: #18778C;
+  --cyan-900: #125B6B;
 
-@mixin color-text($color) {
-    color: var(--color-#{$color});
-}
+  /* Indigos */
+  --indigo-50: #EFEFFE;
+  --indigo-100: #CDCCFC;
+  --indigo-200: #B4B4FA;
+  --indigo-300: #9291F8;
+  --indigo-400: #7C74FF;
+  --indigo-500: #5D5BF4;
+  --indigo-600: #5553DE;
+  --indigo-700: #4241AD;
+  --indigo-800: #333286;
+  --indigo-900: #272666;
 
-@mixin color-border($color) {
-    border-color: var(--color-#{$color});
-}
+  /* Greens */
+  --green-50: #EEF9EA;
+  --green-100: #C9ECBD;
+  --green-200: #AFE39D;
+  --green-300: #8BD671;
+  --green-400: #75CE55;
+  --green-500: #52C22B;
+  --green-600: #4BB127;
+  --green-700: #3A8A1F;
+  --green-800: #2D6B18;
+  --green-900: #225112;
 
-/* Helper classes for quick color application */
-.color-label-primary {
-    color: var(--color-label-primary);
-}
+  /* Reds */
+  --red-50: #FCECEB;
+  --red-100: #F5C4C2;
+  --red-200: #F1A8A4;
+  --red-300: #EA807B;
+  --red-400: #E66861;
+  --red-500: #E0423A;
+  --red-600: #CC3C35;
+  --red-700: #9F2F29;
+  --red-800: #7B2420;
+  --red-900: #5E1C18;
 
-.color-label-secondary {
-    color: var(--color-label-secondary);
-}
+  /* Purples */
+  --purple-50: #EFE6FD;
+  --purple-100: #CEB0FA;
+  --purple-200: #B78AF7;
+  --purple-300: #965FF4;
+  --purple-400: #8133F1;
+  --purple-500: #6200EE;
+  --purple-600: #5900D9;
+  --purple-700: #4600A9;
+  --purple-800: #360083;
+  --purple-900: #290064;
 
-.color-label-tertiary {
-    color: var(--color-label-tertiary);
-}
+  /* Oranges */
+  --orange-50: #FFF2E8;
+  --orange-100: #FED7B6;
+  --orange-200: #FEC493;
+  --orange-300: #FEA962;
+  --orange-400: #FD9843;
+  --orange-500: #FD7E14;
+  --orange-600: #E67312;
+  --orange-700: #B4590E;
+  --orange-800: #8B450B;
+  --orange-900: #6A3508;
 
-.color-label-disabled {
-    color: var(--color-label-disabled);
-}
+  /* Yellows */
+  --yellow-50: #FCF6E7;
+  --yellow-100: #F6E3B4;
+  --yellow-200: #F2D68F;
+  --yellow-300: #ECC35C;
+  --yellow-400: #FCC741;
+  --yellow-500: #FBB912;
+  --yellow-600: #E4A810;
+  --yellow-700: #A07509;
+  --yellow-800: #7C5B07;
+  --yellow-900: #5F4505;
 
-.color-label-inverse {
-    color: var(--color-label-inverse);
-}
+  /* Pinks */
+  --pink-50: #FDECF4;
+  --pink-100: #F8C3DB;
+  --pink-200: #F4A6CA;
+  --pink-300: #F07EB2;
+  --pink-400: #ED65A3;
+  --pink-500: #E83E8C;
+  --pink-600: #D33874;
+  --pink-700: #A52C63;
+  --pink-800: #80224D;
+  --pink-900: #611A3B;
 
-.bg-surface-primary {
-    background-color: var(--color-surface-primary);
-}
+  /* Teals */
+  --teal-50: #E9FAF7;
+  --teal-100: #BAF0E7;
+  --teal-200: #99E8DB;
+  --teal-300: #6BDECB;
+  --teal-400: #4ED8C1;
+  --teal-500: #22CEB1;
+  --teal-600: #1FBBA1;
+  --teal-700: #18927E;
+  --teal-800: #137161;
+  --teal-900: #0E574A;
 
-.bg-surface-secondary {
-    background-color: var(--color-surface-secondary);
-}
+  /* Neutrals */
+  --neutral-white: #FFFFFF;
+  --neutral-25: #F8F8FA;
+  --neutral-50: #E8E9EF;
+  --neutral-75: #D2D5E3;
+  --neutral-100: #B6BACC;
+  --neutral-200: #9399B3;
+  --neutral-300: #626A90;
+  --neutral-400: #433D7B;
+  --neutral-500: #14215A;
+  --neutral-600: #121E52;
+  --neutral-700: #0E1740;
+  --neutral-800: #0B1232;
+  --neutral-900: #080E26;
+  --neutral-black: #000000;
+
+  /* Main Color Abstractions */
+  
+  /* Purple Scale */
+  --purple-lightest: var(--purple-50);
+  --purple-lighter: var(--purple-100);
+  --purple-light: var(--purple-300);
+  --purple-regular: var(--purple-500);
+  --purple-dark: var(--purple-600);
+  --purple-darker: var(--purple-800);
+  --purple-darkest: var(--purple-900);
+
+  /* Blue Scale */
+  --blue-lightest: var(--blue-50);
+  --blue-lighter: var(--blue-100);
+  --blue-light: var(--blue-300);
+  --blue-regular: var(--blue-500);
+  --blue-dark: var(--blue-600);
+  --blue-darker: var(--blue-800);
+  --blue-darkest: var(--blue-900);
+
+  /* Indigo Scale */
+  --indigo-lightest: var(--indigo-50);
+  --indigo-lighter: var(--indigo-100);
+  --indigo-light: var(--indigo-300);
+  --indigo-regular: var(--indigo-500);
+  --indigo-dark: var(--indigo-600);
+  --indigo-darker: var(--indigo-800);
+  --indigo-darkest: var(--indigo-900);
+
+  /* Cyan Scale */
+  --cyan-lightest: var(--cyan-50);
+  --cyan-lighter: var(--cyan-100);
+  --cyan-light: var(--cyan-300);
+  --cyan-regular: var(--cyan-500);
+  --cyan-dark: var(--cyan-700);
+  --cyan-darker: var(--cyan-800);
+  --cyan-darkest: var(--cyan-900);
+
+  /* Red Scale */
+  --red-lightest: var(--red-50);
+  --red-lighter: var(--red-100);
+  --red-light: var(--red-400);
+  --red-regular: var(--red-500);
+  --red-dark: var(--red-600);
+  --red-darker: var(--red-800);
+  --red-darkest: var(--red-900);
+
+  /* Orange Scale */
+  --orange-lightest: var(--orange-50);
+  --orange-lighter: var(--orange-100);
+  --orange-light: var(--orange-300);
+  --orange-regular: var(--orange-500);
+  --orange-dark: var(--orange-600);
+  --orange-darker: var(--orange-700);
+  --orange-darkest: var(--orange-800);
+
+  /* Yellow Scale */
+  --yellow-lightest: var(--yellow-50);
+  --yellow-lighter: var(--yellow-100);
+  --yellow-light: var(--yellow-300);
+  --yellow-regular: var(--yellow-500);
+  --yellow-dark: var(--yellow-600);
+  --yellow-darker: var(--yellow-800);
+  --yellow-darkest: var(--yellow-900);
+
+  /* Pink Scale */
+  --pink-lightest: var(--pink-50);
+  --pink-lighter: var(--pink-100);
+  --pink-light: var(--pink-300);
+  --pink-regular: var(--pink-500);
+  --pink-dark: var(--pink-600);
+  --pink-darker: var(--pink-700);
+  --pink-darkest: var(--pink-800);
+
+  /* Green Scale */
+  --green-lightest: var(--green-50);
+  --green-lighter: var(--green-100);
+  --green-light: var(--green-300);
+  --green-regular: var(--green-500);
+  --green-dark: var(--green-600);
+  --green-darker: var(--green-800);
+  --green-darkest: var(--green-900);
+
+  /* Teal Scale */
+  --teal-lightest: var(--teal-50);
+  --teal-lighter: var(--teal-100);
+  --teal-light: var(--teal-300);
+  --teal-regular: var(--teal-500);
+  --teal-dark: var(--teal-600);
+  --teal-darker: var(--teal-700);
+  --teal-darkest: var(--teal-800);
+
+  /* Neutral Scale */
+  --tone-lightest: var(--neutral-white);
+  --tone-lighter: var(--neutral-25);
+  --tone-light: var(--neutral-50);
+  --tone-regular: var(--neutral-75);
+  --tone-dark: var(--neutral-100);
+  --tone-darker: var(--neutral-200);
+  --tone-darkest: var(--neutral-300);
+
+  --shade-lightest: var(--neutral-400);
+  --shade-lighter: var(--neutral-500);
+  --shade-light: var(--neutral-600);
+  --shade-regular: var(--neutral-700);
+  --shade-dark: var(--neutral-800);
+  --shade-darker: var(--neutral-900);
+  --shade-darkest: var(--neutral-black);
+
+  /* Semantic Colors */
+  
+  /* Highlight Colors */
+  --highlight-lightest: var(--cyan-lightest);
+  --highlight-lighter: var(--cyan-lighter);
+  --highlight-light: var(--cyan-light);
+  --highlight-regular: var(--blue-regular);
+  --highlight-dark: var(--blue-dark);
+  --highlight-darker: var(--blue-darker);
+  --highlight-darkest: var(--blue-darkest);
+
+  /* Success Colors */
+  --success-lightest: var(--green-lightest);
+  --success-lighter: var(--green-lighter);
+  --success-light: var(--green-light);
+  --success-regular: var(--green-regular);
+  --success-dark: var(--green-dark);
+  --success-darker: var(--green-darker);
+  --success-darkest: var(--green-darkest);
+
+  /* Error Colors */
+  --errors-lightest: var(--red-lightest);
+  --errors-lighter: var(--red-lighter);
+  --errors-light: var(--red-light);
+  --errors-regular: var(--red-regular);
+  --errors-dark: var(--red-dark);
+  --errors-darker: var(--red-darker);
+  --errors-darkest: var(--red-darkest);
+
+  /* Action Colors */
+  --actions-lightest: var(--purple-50);
+  --actions-lighter: var(--purple-lighter);
+  --actions-light: var(--purple-light);
+  --actions-regular: var(--purple-regular);
+  --actions-dark: var(--purple-dark);
+  --actions-darker: var(--purple-darker);
+  --actions-darkest: var(--purple-darkest);
 
-.bg-surface-tertiary {
-    background-color: var(--color-surface-tertiary);
+  /* Information Colors */
+  --information-lightest: var(--blue-lightest);
+  --information-lighter: var(--blue-lighter);
+  --information-light: var(--blue-light);
+  --information-regular: var(--blue-regular);
+  --information-dark: var(--blue-dark);
+  --information-darker: var(--blue-darker);
+  --information-darkest: var(--blue-darkest);
+
+  /* Alert Colors */
+  --alert-lightest: var(--yellow-lightest);
+  --alert-lighter: var(--yellow-lighter);
+  --alert-light: var(--orange-light);
+  --alert-regular: var(--orange-regular);
+  --alert-darker: var(--yellow-darker);
+  --alert-darkest: var(--yellow-darkest);
+
+  /* Danger Colors */
+  --danger-lightest: var(--red-lightest);
+  --danger-lighter: var(--red-lighter);
+  --danger-light: var(--red-light);
+  --danger-regular: var(--red-regular);
+  --danger-dark: var(--red-dark);
+  --danger-darker: var(--red-darker);
+  --danger-darkest: var(--red-darkest);
+
+  /* Disabled Colors */
+  --disabled-lightest: var(--tone-light);
+  --disabled-lighter: var(--tone-regular);
+  --disabled-light: var(--tone-dark);
+  --disabled-regular: var(--tone-darker);
+  --disabled-dark: var(--shade-lighter);
+  --disabled-darker: var(--shade-light);
+  --disabled-darkest: var(--shade-regular);
+
+  /* Light Theme Palette Mappings */
+  
+  /* Labels */
+  --label-primary: var(--shade-light);
+  --label-secondary: var(--tone-darkest);
+  --label-secondary-hover: var(--shade-lighter);
+  --label-white: var(--tone-lightest);
+  --label-highlight: var(--highlight-dark);
+  --label-action: var(--actions-regular);
+  --label-danger: var(--danger-dark);
+  --label-status-error: var(--errors-dark);
+  --label-status-success: var(--success-darker);
+  --label-status-info: var(--information-dark);
+  --label-status-alert: var(--alert-regular);
+  --label-status-disabled: var(--disabled-regular);
+
+  /* Surfaces */
+  --surface-primary: var(--tone-lightest);
+  --surface-primary-hover: var(--tone-lighter);
+  --surface-primary-pressed: var(--tone-light);
+  --surface-secondary: var(--neutral-25);
+  --surface-secondary-hover: var(--tone-light);
+  --surface-secondary-pressed: var(--tone-regular);
+  --surface-tertiary: var(--tone-light);
+  --surface-tertiary-hover: var(--tone-lighter);
+  --surface-tertiary-pressed: var(--tone-lightest);
+
+  /* Surface Status */
+  --surface-status-success: var(--success-lightest);
+  --surface-status-error: var(--errors-lightest);
+  --surface-status-alert: var(--alert-lightest);
+  --surface-status-info: var(--information-lightest);
+  --surface-status-disabled: var(--disabled-lighter);
+
+  /* Surface Actions */
+  --surface-action-soft: var(--actions-lightest);
+  --surface-action-soft-hover: var(--actions-lighter);
+  --surface-action-soft-pressed: var(--actions-light);
+
+  /* Surface Danger */
+  --surface-danger-soft: var(--danger-lightest);
+  --surface-danger-soft-hover: var(--danger-lighter);
+  --surface-danger-soft-pressed: var(--danger-light);
+
+  /* Surface Highlight */
+  --surface-highlight-soft: var(--highlight-lightest);
+
+  /* Surface Colors */
+  --surface-colour-red-soft: var(--red-lightest);
+  --surface-colour-green-soft: var(--green-lightest);
+  --surface-colour-blue-soft: var(--blue-lightest);
+  --surface-colour-orange-soft: var(--orange-lightest);
+  --surface-colour-yellow-soft: var(--yellow-lightest);
+  --surface-colour-purple-soft: var(--purple-lightest);
+  --surface-colour-indigo-soft: var(--indigo-lightest);
+  --surface-colour-cyan-soft: var(--cyan-lightest);
+  --surface-colour-pink-soft: var(--pink-lightest);
+  --surface-colour-teal-soft: var(--teal-lightest);
+
+  /* Borders */
+  --border-primary: var(--tone-light);
+  --border-secondary: var(--tone-regular);
+  --border-selected: var(--shade-light);
+  --border-action: var(--actions-regular);
+  --border-status-error: var(--errors-lighter);
+  --border-status-success: var(--success-lighter);
+  --border-status-alert: var(--alert-lighter);
+  --border-status-info: var(--information-lighter);
+  --border-status-disabled: var(--disabled-lightest);
+  --border-colour-overlay: #121E521A;
+
+  /* Fills */
+  --fill-primary: var(--shade-lighter);
+  --fill-secondary: var(--tone-darkest);
+  --fill-white: var(--tone-lightest);
+  --fill-action: var(--actions-regular);
+  --fill-highlight: var(--highlight-dark);
+  --fill-danger: var(--danger-dark);
+  --fill-status-success: var(--success-darker);
+  --fill-status-error: var(--errors-dark);
+  --fill-status-alert: var(--alert-regular);
+  --fill-status-info: var(--information-regular);
+  --fill-status-disabled: var(--disabled-light);
+
+  /* Gradients */
+  --gradient-stop1: var(--purple-500);
+  --gradient-stop2: var(--indigo-500);
+  --gradient-stop3: var(--blue-500);
 }
 
-.bg-surface-hover {
-    background-color: var(--color-surface-hover);
+/* Dark Theme Palette Mappings */
+[data-theme="dark"] {
+  /* Labels */
+  --label-primary: var(--tone-lighter);
+  --label-secondary: var(--tone-darker);
+  --label-secondary-hover: var(--tone-lighter);
+  --label-white: var(--tone-lightest);
+  --label-highlight: var(--highlight-light);
+  --label-action: var(--actions-lighter);
+  --label-danger: var(--danger-light);
+  --label-status-error: var(--errors-light);
+  --label-status-success: var(--success-light);
+  --label-status-info: var(--information-light);
+  --label-status-alert: var(--alert-light);
+  --label-status-disabled: var(--disabled-regular);
+
+  /* Surfaces */
+  --surface-primary: var(--shade-darker);
+  --surface-primary-hover: var(--shade-dark);
+  --surface-primary-pressed: var(--shade-regular);
+  --surface-secondary: var(--shade-dark);
+  --surface-secondary-hover: var(--shade-darker);
+  --surface-secondary-pressed: var(--shade-darkest);
+  --surface-tertiary: var(--shade-regular);
+  --surface-tertiary-hover: var(--shade-dark);
+  --surface-tertiary-pressed: var(--shade-darker);
+
+  /* Surface Status */
+  --surface-status-success: var(--success-darkest);
+  --surface-status-error: var(--errors-darkest);
+  --surface-status-alert: var(--alert-darkest);
+  --surface-status-info: var(--information-darkest);
+  --surface-status-disabled: var(--disabled-darkest);
+
+  /* Surface Actions */
+  --surface-action-soft: var(--actions-darkest);
+  --surface-action-soft-hover: var(--actions-darker);
+  --surface-action-soft-pressed: var(--actions-dark);
+
+  /* Surface Danger */
+  --surface-danger-soft: var(--danger-darkest);
+  --surface-danger-soft-hover: var(--danger-darker);
+  --surface-danger-soft-pressed: var(--danger-dark);
+
+  /* Surface Highlight */
+  --surface-highlight-soft: var(--highlight-darkest);
+
+  /* Surface Colors */
+  --surface-colour-red-soft: var(--red-darkest);
+  --surface-colour-green-soft: var(--green-darkest);
+  --surface-colour-blue-soft: var(--blue-darkest);
+  --surface-colour-orange-soft: var(--orange-darkest);
+  --surface-colour-yellow-soft: var(--yellow-darkest);
+  --surface-colour-purple-soft: var(--purple-darkest);
+  --surface-colour-indigo-soft: var(--indigo-darkest);
+  --surface-colour-cyan-soft: var(--cyan-darkest);
+  --surface-colour-pink-soft: var(--pink-darkest);
+  --surface-colour-teal-soft: var(--teal-darkest);
+
+  /* Borders */
+  --border-primary: var(--shade-light);
+  --border-secondary: var(--shade-dark);
+  --border-selected: var(--tone-light);
+  --border-action: var(--actions-light);
+  --border-status-error: var(--errors-darker);
+  --border-status-success: var(--success-darker);
+  --border-status-alert: var(--alert-darker);
+  --border-status-info: var(--information-darker);
+  --border-status-disabled: var(--disabled-dark);
+  --border-colour-overlay: #FFFFFF1A;
+
+  /* Fills */
+  --fill-primary: var(--tone-lighter);
+  --fill-secondary: var(--tone-darker);
+  --fill-white: var(--tone-lightest);
+  --fill-action: var(--actions-lighter);
+  --fill-highlight: var(--highlight-light);
+  --fill-danger: var(--danger-light);
+  --fill-status-success: var(--success-light);
+  --fill-status-error: var(--errors-light);
+  --fill-status-alert: var(--alert-light);
+  --fill-status-info: var(--information-light);
+  --fill-status-disabled: var(--disabled-dark);
+
+  /* Gradients */
+  --gradient-stop1: var(--indigo-400);
+  --gradient-stop2: var(--cyan-500);
+  --gradient-stop3: var(--cyan-100);
 }
 
-.border-primary {
-    border-color: var(--color-border-primary);
+/* Color utility classes for quick application */
+
+/* Text Colors */
+.text-primary { color: var(--label-primary); }
+.text-secondary { color: var(--label-secondary); }
+.text-white { color: var(--label-white); }
+.text-action { color: var(--label-action); }
+.text-danger { color: var(--label-danger); }
+.text-success { color: var(--label-status-success); }
+.text-error { color: var(--label-status-error); }
+.text-info { color: var(--label-status-info); }
+.text-warning { color: var(--label-status-alert); }
+.text-disabled { color: var(--label-status-disabled); }
+
+/* Background Colors */
+.bg-primary { background-color: var(--surface-primary); }
+.bg-secondary { background-color: var(--surface-secondary); }
+.bg-tertiary { background-color: var(--surface-tertiary); }
+.bg-success { background-color: var(--surface-status-success); }
+.bg-error { background-color: var(--surface-status-error); }
+.bg-warning { background-color: var(--surface-status-alert); }
+.bg-info { background-color: var(--surface-status-info); }
+.bg-action-soft { background-color: var(--surface-action-soft); }
+.bg-danger-soft { background-color: var(--surface-danger-soft); }
+
+/* Border Colors */
+.border-primary { border-color: var(--border-primary); }
+.border-secondary { border-color: var(--border-secondary); }
+.border-selected { border-color: var(--border-selected); }
+.border-action { border-color: var(--border-action); }
+.border-success { border-color: var(--border-status-success); }
+.border-error { border-color: var(--border-status-error); }
+.border-warning { border-color: var(--border-status-alert); }
+.border-info { border-color: var(--border-status-info); }
+
+/* Color utility mixins */
+@mixin color-bg($color) {
+  background-color: var(--#{$color});
 }
 
-.border-secondary {
-    border-color: var(--color-border-secondary);
+@mixin color-text($color) {
+  color: var(--#{$color});
 }
 
-.border-focus {
-    border-color: var(--color-border-focus);
+@mixin color-border($color) {
+  border-color: var(--#{$color});
 }

package/dist/v2/components/Colors/Colors.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import './Colors.scss';
-interface ColorSwatchProps {
-    name: string;
-    hex: string;
-    rgb?: string;
-    className?: string;
-}
-export declare const ColorSwatch: React.FC<ColorSwatchProps>;
-export interface ColorGroup {
-    title: string;
-    colors: {
-        name: string;
-        hex: string;
-        rgb?: string;
-        description?: string;
-    }[];
-}
-export declare const ColorsShowcase: React.FC<ColorGroup>;
-export {};
-//# sourceMappingURL=Colors.d.ts.map

package/dist/v2/components/Colors/Colors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Colors/Colors.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAAe,CAAA;AAEtB,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAA;AAED,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACJ,IAAI,EAAE,MAAM,CAAA;QACZ,GAAG,EAAE,MAAM,CAAA;QACX,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,WAAW,CAAC,EAAE,MAAM,CAAA;KACvB,EAAE,CAAA;CACN;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiB/C,CAAA"}

package/dist/v2/components/Colors/index.d.ts

@@ -1,3 +0,0 @@
-export { ColorsShowcase, ColorSwatch } from './Colors';
-export type { ColorGroup } from './Colors';
-//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/Colors/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Colors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}

package/dist/v2/components/Typography/Typography.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export type TypographyVariant = 'heading.xxl' | 'heading.xl' | 'heading.h1' | 'heading.h2' | 'heading.h3' | 'heading.h4' | 'heading.h5' | 'heading.h6' | 'text.xl' | 'text.large' | 'text.regular' | 'text.small' | 'text.small.emphasis' | 'text.small.bold' | 'text.xs' | 'text.xs.bold';
-export interface TypographyProps {
-    variant?: TypographyVariant;
-    className?: string;
-    children: React.ReactNode;
-    as?: keyof JSX.IntrinsicElements;
-    color?: string;
-}
-export declare const Typography: React.FC<TypographyProps>;
-//# sourceMappingURL=Typography.d.ts.map