@licklist/design 0.78.41 → 0.78.44

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

@@ -0,0 +1,562 @@
+/* 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 {
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+  --deep-purple-500: #6200EE;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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);
+
+  /* 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-primary-alt: var(--tone-lighter);
+  --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: var(--actions-regular);
+  --surface-action-hover: var(--actions-dark);
+  --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(--neutral-600);
+  --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-action-secondary: var(--deep-purple-500);
+  --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);
+}
+
+/* Dark Theme Palette Mappings */
+[data-theme="dark"] {
+  /* Labels */
+  --label-primary: var(--tone-lighter);
+  --label-primary-alt: var(--shade-light);
+  --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: var(--actions-regular);
+  --surface-action-hover: var(--actions-light);
+  --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);
+}
+
+/* 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});
+}
+
+@mixin color-text($color) {
+  color: var(--#{$color});
+}
+
+@mixin color-border($color) {
+  border-color: var(--#{$color});
+}

package/dist/v2/styles/tokens/_sizes.scss

@@ -0,0 +1,125 @@
+/* Size tokens - Radius, Spacing, and Opacity
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=37-110
+ */
+
+:root {
+    /* Radius tokens - Border radius values */
+    --radius-zero: 0px;
+    --radius-xs: 1px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-reg: 8px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+
+    /* Spacing tokens - Gap, padding, margin values */
+    --spacing-zero: 0px;
+    --spacing-xxs: 1px;
+    --spacing-xs: 2px;
+    --spacing-sm: 4px;
+    --spacing-md: 8px;
+    --spacing-reg: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-xxl: 64px;
+    --spacing-super: 128px;
+
+    /* Layout tokens - Container insets */
+    --container-padding-mobile: 16px;
+
+    /* Opacity tokens - Transparency values */
+    --opacity-0: 0;
+    --opacity-10: 0.1;
+    --opacity-20: 0.2;
+    --opacity-30: 0.3;
+    --opacity-40: 0.4;
+    --opacity-50: 0.5;
+    --opacity-60: 0.6;
+    --opacity-70: 0.7;
+    --opacity-80: 0.8;
+    --opacity-90: 0.9;
+    --opacity-100: 1;
+}
+
+/* Helper mixins for using size tokens */
+@mixin radius($token) {
+    border-radius: var(--radius-#{$token});
+}
+
+@mixin spacing($property, $token) {
+    #{$property}: var(--spacing-#{$token});
+}
+
+@mixin opacity($token) {
+    opacity: var(--opacity-#{$token});
+}
+
+/* Convenience mixins for common radius values */
+@mixin radius-zero {
+    border-radius: var(--radius-zero);
+}
+
+@mixin radius-xs {
+    border-radius: var(--radius-xs);
+}
+
+@mixin radius-sm {
+    border-radius: var(--radius-sm);
+}
+
+@mixin radius-md {
+    border-radius: var(--radius-md);
+}
+
+@mixin radius-reg {
+    border-radius: var(--radius-reg);
+}
+
+@mixin radius-lg {
+    border-radius: var(--radius-lg);
+}
+
+@mixin radius-xl {
+    border-radius: var(--radius-xl);
+}
+
+/* Convenience mixins for common spacing values */
+@mixin spacing-zero {
+    --spacing: var(--spacing-zero);
+}
+
+@mixin spacing-xxs {
+    --spacing: var(--spacing-xxs);
+}
+
+@mixin spacing-xs {
+    --spacing: var(--spacing-xs);
+}
+
+@mixin spacing-sm {
+    --spacing: var(--spacing-sm);
+}
+
+@mixin spacing-md {
+    --spacing: var(--spacing-md);
+}
+
+@mixin spacing-reg {
+    --spacing: var(--spacing-reg);
+}
+
+@mixin spacing-lg {
+    --spacing: var(--spacing-lg);
+}
+
+@mixin spacing-xl {
+    --spacing: var(--spacing-xl);
+}
+
+@mixin spacing-xxl {
+    --spacing: var(--spacing-xxl);
+}
+
+@mixin spacing-super {
+    --spacing: var(--spacing-super);
+}