@licklist/design 0.78.18 → 0.78.20

package/src/v2/styles/components/Button.scss

@@ -0,0 +1,168 @@
+/* Button Component Styles based on Figma design */
+
+.new-button {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm, 8px) var(--spacing-reg, 16px);
+  border-radius: var(--radius-md, 4px);
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-weight: var(--heading-h5-weight, 600);
+  font-size: var(--text-reg-size, 15px);
+  line-height: var(--text-reg-line, 18px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  // Primary Button - Solid with gradient
+  &--primary {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      var(--purples-purple-500) 5.77%,
+      var(--purples-purple-700) 95.19%,
+      var(--purples-purple-900) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--purples-purple-50) 0%,
+      var(--purples-purple-900) 100%
+    ),
+    linear-gradient(90deg, var(--purples-purple-500) 0%, var(--purples-purple-500) 100%);
+    color: var(--labels-main-label-white, #ffffff);
+
+    &:hover {
+      background-color: var(--fills-main-fill-action, #6200ee);
+    }
+
+    &:active,
+    &:focus {
+      background-color: var(--fills-main-fill-action, #6200ee);
+    }
+  }
+
+  // Primary - Soft
+  &--primary-soft {
+    background-color: var(--surfaces-main-background-action-soft, #efe6fd);
+    color: var(--labels-main-label-action, #6200ee);
+
+    &:hover {
+      background-color: var(--surfaces-main-background-action-soft-hover, #ceb0fa);
+    }
+
+    &:active {
+      background-color: var(--surfaces-main-background-action-soft-pressed, #965ff4);
+      color: var(--labels-main-label-white, #ffffff);
+    }
+  }
+
+  // Primary - Outline
+  &--primary-outline {
+    border: 2px solid var(--fills-main-fill-action, #6200ee);
+    background-color: transparent;
+    color: var(--labels-main-label-action, #6200ee);
+
+    &:hover {
+      border: 2px solid var(--fills-main-fill-action, #6200ee);
+      background-color: var(--surfaces-main-background-action-soft, #efe6fd);
+    }
+
+    &:active {
+      background-color: var(--surfaces-main-background-action-soft, #efe6fd);
+    }
+  }
+
+  // Secondary Button
+  &--secondary {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      var(--neutrals-gray-200) 5.77%,
+      var(--purples-purple-700) 95.19%,
+      var(--purples-purple-900) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--neutrals-gray-200) 0%,
+      var(--fills-main-fill-secondary) 100%
+    ),
+    linear-gradient(90deg, var(--fills-main-fill-secondary) 0%, var(--fills-main-fill-secondary) 100%);
+    color: var(--labels-main-label-white, #ffffff);
+
+    &:hover,
+    &:active {
+      // Same gradient for hover/pressed states
+    }
+  }
+
+  // Destructive - Soft
+  &--destructive-soft {
+    background-color: var(--surfaces-main-background-danger-soft, #fceceb);
+    color: var(--labels-main-label-danger, #cc3c35);
+
+    &:hover {
+      background-color: var(--surfaces-main-background-danger-soft-hover, #f5c4c2);
+    }
+
+    &:active {
+      background-color: var(--surfaces-main-background-danger-soft-pressed, #e66861);
+      color: var(--labels-main-label-white, #ffffff);
+    }
+  }
+
+  // Destructive - Strong
+  &--destructive-strong {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      var(--red-red) 5.77%,
+      var(--red-red-dark) 95.19%,
+      var(--red-red-darkest) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--red-red-lighter) 0%,
+      var(--red-red-darkest) 100%
+    ),
+    linear-gradient(90deg, var(--red-red-dark) 0%, var(--red-red-dark) 100%);
+    color: var(--labels-main-label-white, #ffffff);
+
+    &:hover,
+    &:active {
+      background-color: var(--fills-main-fill-danger, #cc3c35);
+    }
+  }
+
+  // Info Button
+  &--info {
+    background-color: var(--surfaces-status-background-info, #e7f4fc);
+    color: var(--labels-status-label-info, #0d7fce);
+
+    &:hover,
+    &:active {
+      // Same background for hover/pressed states
+    }
+  }
+
+  // Disabled state
+  &:disabled,
+  &--disabled {
+    background-color: var(--surfaces-status-background-disabled, #d2d5e3);
+    color: var(--labels-status-label-disabled, #9399b3);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // Text styling
+  p {
+    margin: 0;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+}
+

package/src/v2/styles/form/NewInput.scss

@@ -0,0 +1,172 @@
+/* New Form Input Styles based on Figma design tokens */
+
+.new-form-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs, 4px);
+    width: 100%;
+
+    &__label {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-sm-size, 13px);
+        font-weight: var(--heading-h5-weight, 500);
+        line-height: var(--text-sm-line, 16px);
+        color: var(--labels-main-label-primary, #121e52);
+        margin: 0;
+    }
+
+    &__label-optional {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-xs-size, 11px);
+        font-weight: var(--heading-h6-weight, 500);
+        line-height: var(--text-xs-line, 14px);
+        color: var(--labels-main-label-secondary, #626a90);
+        text-align: right;
+    }
+
+    &__label-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacing-reg, 16px);
+        width: 100%;
+    }
+
+    &__input {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-sm-size, 13px);
+        line-height: var(--text-sm-line, 16px);
+        color: var(--labels-main-label-primary, #121e52);
+        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
+        border-radius: var(--radius-md, 4px);
+        padding: 8px 10px;
+        height: 40px;
+        width: 100%;
+        transition: all 0.2s ease;
+
+        &:focus {
+            outline: none;
+            border-color: var(--borders-main-border-selected, #121e52);
+            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+        }
+
+        &::placeholder {
+            color: var(--labels-main-label-secondary, #626a90);
+        }
+    }
+
+    &__textarea {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-sm-size, 13px);
+        line-height: var(--text-sm-line, 16px);
+        color: var(--labels-main-label-primary, #121e52);
+        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+        border: 1px solid var(--borders-main-border-primary, #e8e9ef);
+        border-radius: var(--radius-md, 4px);
+        padding: 8px 10px;
+        min-height: 120px;
+        width: 100%;
+        resize: vertical;
+        transition: all 0.2s ease;
+
+        &:focus {
+            outline: none;
+            border-color: var(--borders-main-border-selected, #121e52);
+        }
+
+        &::placeholder {
+            color: var(--labels-main-label-secondary, #626a90);
+        }
+    }
+
+    &__input-with-icon {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm, 8px);
+        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
+        border-radius: var(--radius-md, 4px);
+        padding: 5px;
+        height: 40px;
+
+        input {
+            flex: 1;
+            border: none;
+            background: transparent;
+            font-family: var(--font-family-sans, 'Geist', sans-serif);
+            font-size: var(--text-sm-size, 13px);
+            line-height: var(--text-sm-line, 16px);
+            color: var(--labels-main-label-primary, #121e52);
+
+            &:focus {
+                outline: none;
+            }
+
+            &::placeholder {
+                color: var(--labels-main-label-secondary, #626a90);
+            }
+        }
+
+        .icon {
+            width: 22px;
+            height: 22px;
+            flex-shrink: 0;
+        }
+    }
+
+    &__verification-code {
+        display: flex;
+        gap: var(--spacing-sm, 8px);
+        height: 62px;
+
+        .code-input {
+            flex: 1;
+            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+            border: 2px solid var(--borders-main-border-primary, #e8e9ef);
+            border-radius: var(--radius-md, 4px);
+            text-align: center;
+            font-family: var(--font-family-sans, 'Geist', sans-serif);
+            font-size: var(--text-lg-size, 18px);
+            font-weight: var(--heading-h3-weight, 600);
+            color: var(--labels-main-label-primary, #121e52);
+            transition: all 0.2s ease;
+
+            &:focus {
+                outline: none;
+                border-color: var(--borders-main-border-selected, #121e52);
+            }
+        }
+    }
+
+    &__helper-text {
+        font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-sm-size, 13px);
+        font-weight: 400;
+        line-height: var(--text-sm-line, 16px);
+        color: var(--labels-main-label-secondary, #626a90);
+        margin: 0;
+    }
+
+    // States
+    &--active {
+        .new-form-input__input {
+            border-color: var(--borders-main-border-selected, #121e52);
+        }
+    }
+
+    &--error {
+        .new-form-input__input {
+            border-color: var(--borders-status-border-error, #ef4444);
+        }
+
+        .new-form-input__helper-text {
+            color: var(--labels-status-label-error, #ef4444);
+        }
+    }
+
+    &--disabled {
+        opacity: var(--opacity-50, 0.5);
+        pointer-events: none;
+    }
+}

package/src/v2/styles/index.scss

@@ -0,0 +1,5 @@
+@import './tokens/aliases';
+@import './tokens/colors';
+@import './tokens/sizes';
+@import './tokens/status';
+@import './tokens/typography';

package/src/v2/styles/navigation/Navigation.scss

@@ -0,0 +1,17 @@
+.navigation {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+
+    &--collapsed {
+        width: 76px;
+    }
+}

package/src/v2/styles/navigation/NavigationItem.scss

@@ -0,0 +1,86 @@
+@import '../../../overrides/functions';
+
+.navigation-item {
+  width: 100%;
+  flex: 1 1 0;
+  padding: 8px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  outline: none;
+
+  &:hover {
+    background: linear-gradient(225deg, var(--gradients-stop1, #6200EE) 0%, var(--gradients-stop2, #5D5BF4) 50%, var(--gradients-stop3, #0E8CE2) 100%);
+
+    .navigation-item__icon svg,
+    .navigation-item__icon path {
+      fill: var(--fills-main-fill-white, white);
+      color: var(--fills-main-fill-white, white);
+    }
+
+    .navigation-item__label {
+      color: var(--labels-main-label-white, white);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--fills-main-fill-primary, #14215A);
+    outline-offset: 2px;
+  }
+
+  &--active {
+    background: linear-gradient(225deg, var(--gradients-stop1, #6200EE) 0%, var(--gradients-stop2, #5D5BF4) 50%, var(--gradients-stop3, #0E8CE2) 100%);
+
+    .navigation-item__icon svg,
+    .navigation-item__icon path {
+      fill: var(--fills-main-fill-white, white);
+      color: var(--fills-main-fill-white, white);
+    }
+
+    .navigation-item__label {
+      color: var(--labels-main-label-white, white);
+      font-weight: 600;
+    }
+  }
+
+    &--collapsed {
+        justify-content: center;
+        gap: 0;
+    }
+
+    &__icon {
+        width: 24px;
+        height: 24px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg,
+        img {
+            width: 18px;
+            height: 18px;
+            color: var(--fills-main-fill-primary, #14215A);
+        }
+    }
+
+    &__label {
+        color: var(--labels-main-label-primary, #121E52);
+        font-size: 13px;
+        font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        line-height: 16px;
+        word-wrap: break-word;
+        white-space: nowrap;
+    }
+}

package/src/v2/styles/navigation/NavigationSection.scss

@@ -0,0 +1,26 @@
+.navigation-section {
+    align-self: stretch;
+    padding: 8px 8px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+
+    &--collapsed {
+        padding-top: 8px;
+        padding-left: 8px;
+        padding-right: 8px;
+        align-items: flex-start; // Keep left-aligned like expanded
+    }
+
+    &__title {
+        color: var(--labels-main-label-secondary, #626A90);
+        font-size: 13px;
+        font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        line-height: 16px;
+        word-wrap: break-word;
+        text-transform: none !important; // Override any global uppercase rules
+    }
+}

package/src/v2/styles/navigation/_index.scss

@@ -0,0 +1,9 @@
+@import './NavigationItem.scss';
+@import './NavigationSection.scss';
+@import './Navigation.scss';
+@import './FigmasSideBar.scss';
+@import './FigmasAdminSideBar.scss';
+@import './FigmasTopHat.scss';
+@import './TopHatControlDisc.scss';
+@import './SideBarToggleLarge.scss';
+@import './SidebarUserElement.scss';

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

@@ -0,0 +1,199 @@
+/* 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);
+}