@licklist/design 0.78.21 → 0.78.26

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

@@ -1,199 +0,0 @@
-/* Color aliases - semantic mappings for color tokens
- * These are structured aliases that map semantic names to color values
- * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=32-474
- */
-
-/* 
- * The Alias system maps semantic names to color values
- * Format: var(--[category]/[subcategory]/[specific-name], #fallback)
- * 
- * Current aliases found in design:
- */
-
-:root {
-    /* Labels - Text colors */
-    --labels-main-label-primary: #121e52;
-    --labels-main-label-secondary: #626a90;
-    --labels-main-label-tertiary: #979db2;
-    --labels-main-label-disabled: #c2c7d4;
-    --labels-main-label-inverse: #ffffff;
-    --labels-main-label-action: #6200ee;
-    --labels-main-label-danger: #cc3c35;
-    --labels-main-label-white: #ffffff;
-    --labels-status-label-disabled: #9399b3;
-    --labels-status-label-info: #0d7fce;
-
-    /* Surfaces - Background colors */
-    --surfaces-main-background-primary: #ffffff;
-    --surfaces-main-background-secondary: #f8f8fa;
-    --surfaces-main-background-secondary-hover: #e8e9ef;
-    --surfaces-main-background-secondary-pressed: #d2d5e3;
-    --surfaces-main-background-tertiary: #e8e9ef;
-    --surfaces-main-background-active: #e8e9ef;
-    --surfaces-main-background-focus: #ffffff;
-
-    /* Action surfaces */
-    --surfaces-main-background-action-soft: #efe6fd;
-    --surfaces-main-background-action-soft-hover: #ceb0fa;
-    --surfaces-main-background-action-soft-pressed: #965ff4;
-
-    /* Danger surfaces */
-    --surfaces-main-background-danger-soft: #fceceb;
-    --surfaces-main-background-danger-soft-hover: #f5c4c2;
-    --surfaces-main-background-danger-soft-pressed: #e66861;
-
-    /* Status surfaces */
-    --surfaces-status-background-disabled: #d2d5e3;
-    --surfaces-status-background-info: #e7f4fc;
-
-    /* Borders */
-    --borders-main-border-primary: #e8e9ef;
-    --borders-main-border-secondary: #d4d6dd;
-    --borders-main-border-colour-overlay: rgba(18, 30, 82, 0.1);
-    --borders-main-border-focus: #7000eb;
-    --borders-main-border-action: #6200ee;
-    --borders-main-border-selected: #121e52;
-
-    /* Fills */
-    --fills-main-fill-primary: #14215a;
-    --fills-main-fill-secondary: #626a90;
-    --fills-main-fill-disabled: #c2c7d4;
-    --fills-main-fill-action: #6200ee;
-    --fills-main-fill-danger: #cc3c35;
-    --fills-main-fill-white: rgba(255, 255, 255, 1);
-
-    /* Surfaces - Color variants */
-    --surfaces-colour-teal: #e9faf7;
-    --surfaces-colour-orange: #fff2e8;
-    --surfaces-colour-green: #f0f9f0;
-    --surfaces-colour-red: #fefafa;
-
-    /* Neutrals for gradients */
-    --neutrals-gray-200: rgba(147, 153, 179, 1);
-
-    /* Purples for gradients */
-    --purples-purple-50: rgba(239, 230, 253, 1);
-    --purples-purple-500: rgba(98, 0, 238, 1);
-    --purples-purple-700: rgba(70, 0, 169, 1);
-    --purples-purple-900: rgba(41, 0, 100, 1);
-
-    /* Reds for gradients */
-    --red-red: rgba(224, 66, 58, 1);
-    --red-red-lighter: rgba(245, 196, 194, 1);
-    --red-red-dark: rgba(204, 60, 53, 1);
-    --red-red-darkest: rgba(94, 28, 24, 1);
-
-    /* Opacity aliases */
-    --opacity-100-percent: 1;
-    --opacity-90-percent: 0.9;
-    --opacity-80-percent: 0.8;
-    --opacity-70-percent: 0.7;
-    --opacity-60-percent: 0.6;
-    --opacity-50-percent: 0.5;
-    --opacity-40-percent: 0.4;
-    --opacity-30-percent: 0.3;
-    --opacity-20-percent: 0.2;
-    --opacity-10-percent: 0.1;
-    --opacity-0-percent: 0;
-
-    /* Spacing aliases (for compatibility with Figma's /25, /50, /100) */
-    --spacing-25: 4px;
-    --spacing-50: 8px;
-    --spacing-100: 16px;
-
-    /* Radius aliases (for compatibility with Figma's /50) */
-    --radius-50: 4px;
-}
-
-/* 
- * Helper mixins for using semantic color aliases
- */
-@mixin label-primary {
-    color: var(--labels-main-label-primary, #121e52);
-}
-
-@mixin label-secondary {
-    color: var(--labels-main-label-secondary, #626a90);
-}
-
-@mixin label-tertiary {
-    color: var(--labels-main-label-tertiary, #979db2);
-}
-
-@mixin label-disabled {
-    color: var(--labels-main-label-disabled, #c2c7d4);
-}
-
-@mixin surface-primary {
-    background-color: var(--surfaces-main-background-primary, #ffffff);
-}
-
-@mixin surface-secondary {
-    background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-}
-
-@mixin surface-secondary-hover {
-    background-color: var(--surfaces-main-background-secondary-hover, #e8e9ef);
-}
-
-@mixin surface-tertiary {
-    background-color: var(--surfaces-main-background-tertiary, #e8e9ef);
-}
-
-@mixin border-primary {
-    border-color: var(--borders-main-border-primary, #e8e9ef);
-}
-
-@mixin border-colour-overlay {
-    border-color: var(--borders-main-border-colour-overlay, rgba(18, 30, 82, 0.1));
-}
-
-@mixin fill-primary {
-    fill: var(--fills-main-fill-primary, #14215a);
-}
-
-@mixin fill-secondary {
-    fill: var(--fills-main-fill-secondary, #626a90);
-}
-
-@mixin fill-disabled {
-    fill: var(--fills-main-fill-disabled, #c2c7d4);
-}
-
-@mixin label-inverse {
-    color: var(--labels-main-label-inverse, #ffffff);
-}
-
-@mixin border-secondary {
-    border-color: var(--borders-main-border-secondary, #d4d6dd);
-}
-
-@mixin border-focus {
-    border-color: var(--borders-main-border-focus, #7000eb);
-}
-
-@mixin surface-active {
-    background-color: var(--surfaces-main-background-active, #e8e9ef);
-}
-
-@mixin surface-focus {
-    background-color: var(--surfaces-main-background-focus, #ffffff);
-}
-
-/* Spacing shortcut mixins */
-@mixin spacing-25 {
-    padding: var(--spacing-25, 4px);
-}
-
-@mixin spacing-50 {
-    padding: var(--spacing-50, 8px);
-}
-
-@mixin spacing-100 {
-    padding: var(--spacing-100, 16px);
-}
-
-/* Radius shortcut mixin */
-@mixin radius-50 {
-    border-radius: var(--radius-50, 4px);
-}