@licklist/design 0.78.18 → 0.78.20

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

@@ -0,0 +1,121 @@
+/* Color tokens derived from Figma
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-92
+ */
+
+: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;
+}
+
+/* Color utility mixins */
+@mixin color-bg($color) {
+    background-color: var(--color-#{$color});
+}
+
+@mixin color-text($color) {
+    color: var(--color-#{$color});
+}
+
+@mixin color-border($color) {
+    border-color: var(--color-#{$color});
+}
+
+/* Helper classes for quick color application */
+.color-label-primary {
+    color: var(--color-label-primary);
+}
+
+.color-label-secondary {
+    color: var(--color-label-secondary);
+}
+
+.color-label-tertiary {
+    color: var(--color-label-tertiary);
+}
+
+.color-label-disabled {
+    color: var(--color-label-disabled);
+}
+
+.color-label-inverse {
+    color: var(--color-label-inverse);
+}
+
+.bg-surface-primary {
+    background-color: var(--color-surface-primary);
+}
+
+.bg-surface-secondary {
+    background-color: var(--color-surface-secondary);
+}
+
+.bg-surface-tertiary {
+    background-color: var(--color-surface-tertiary);
+}
+
+.bg-surface-hover {
+    background-color: var(--color-surface-hover);
+}
+
+.border-primary {
+    border-color: var(--color-border-primary);
+}
+
+.border-secondary {
+    border-color: var(--color-border-secondary);
+}
+
+.border-focus {
+    border-color: var(--color-border-focus);
+}

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

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

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

@@ -0,0 +1,108 @@
+/* Status/Alert Color tokens derived from Figma Alerts & Errors page
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=167:968
+ */
+
+:root {
+    /* Success/Green Status Colors */
+    --color-success-fill: #2d6b18;
+    --color-success-background: #eef9ea;
+    --color-success-border: #c9ecbd;
+
+    /* Error/Red Status Colors */
+    --color-error-fill: #cc3c35;
+    --color-error-background: #fceceb;
+    --color-error-border: #f5c4c2;
+
+    /* Alert/Warning/Yellow Status Colors */
+    --color-alert-fill: #fd7e14;
+    --color-alert-background: #fcf6e7;
+    --color-alert-border: #f6e3b4;
+
+    /* Info/Blue Status Colors */
+    --color-info-fill: #0e8ce2;
+    --color-info-background: #e7f4fc;
+    --color-info-border: #b4dbf6;
+}
+
+/* Legacy format for compatibility with existing alias system */
+:root {
+    /* Surfaces - Status backgrounds */
+    --surfaces-status-background-success: var(--color-success-background);
+    --surfaces-status-background-error: var(--color-error-background);
+    --surfaces-status-background-alert: var(--color-alert-background);
+    --surfaces-status-background-info: var(--color-info-background);
+
+    /* Borders - Status borders */
+    --borders-status-border-success: var(--color-success-border);
+    --borders-status-border-error: var(--color-error-border);
+    --borders-status-border-alert: var(--color-alert-border);
+    --borders-status-border-info: var(--color-info-border);
+
+    /* Fills - Status icons/text */
+    --fills-status-fill-success: var(--color-success-fill);
+    --fills-status-fill-error: var(--color-error-fill);
+    --fills-status-fill-alert: var(--color-alert-fill);
+    --fills-status-fill-info: var(--color-info-fill);
+}
+
+/* SCSS Map for status colors */
+$status-colors: (
+    success: (
+        fill: var(--color-success-fill),
+        background: var(--color-success-background),
+        border: var(--color-success-border)
+    ),
+    error: (
+        fill: var(--color-error-fill),
+        background: var(--color-error-background),
+        border: var(--color-error-border)
+    ),
+    alert: (
+        fill: var(--color-alert-fill),
+        background: var(--color-alert-background),
+        border: var(--color-alert-border)
+    ),
+    info: (
+        fill: var(--color-info-fill),
+        background: var(--color-info-background),
+        border: var(--color-info-border)
+    )
+);
+
+/* Mixins for status colors */
+@mixin status-success() {
+    background-color: var(--surfaces-status-background-success);
+    border-color: var(--borders-status-border-success);
+    color: var(--fills-status-fill-success);
+}
+
+@mixin status-error() {
+    background-color: var(--surfaces-status-background-error);
+    border-color: var(--borders-status-border-error);
+    color: var(--fills-status-fill-error);
+}
+
+@mixin status-alert() {
+    background-color: var(--surfaces-status-background-alert);
+    border-color: var(--borders-status-border-alert);
+    color: var(--fills-status-fill-alert);
+}
+
+@mixin status-info() {
+    background-color: var(--surfaces-status-background-info);
+    border-color: var(--borders-status-border-info);
+    color: var(--fills-status-fill-info);
+}
+
+/* Helper mixin for getting status colors */
+@function get-status-color($status, $type) {
+    $status-map: map-get($status-colors, $status);
+    @if $status-map {
+        $color: map-get($status-map, $type);
+        @if $color {
+            @return $color;
+        }
+    }
+    @warn "Unknown status color: #{$status}.#{$type}";
+    @return null;
+}

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

@@ -0,0 +1,146 @@
+/* Typography tokens and mixins derived from Figma
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
+ */
+
+:root {
+    /* Families */
+    --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+    /* Headings Desktop */
+    --heading-xxl-size: 44px;
+    --heading-xxl-line: 48px;
+    --heading-xxl-weight: 600;
+    --heading-xl-size: 32px;
+    --heading-xl-line: 36px;
+    --heading-xl-weight: 700;
+    --heading-h1-size: 24px;
+    --heading-h1-line: 28px;
+    --heading-h1-weight: 600;
+    --heading-h2-size: 20px;
+    --heading-h2-line: 24px;
+    --heading-h2-weight: 600;
+    --heading-h3-size: 17px;
+    --heading-h3-line: 20px;
+    --heading-h3-weight: 600;
+    --heading-h4-size: 15px;
+    --heading-h4-line: 18px;
+    --heading-h4-weight: 600;
+    --heading-h5-size: 13px;
+    --heading-h5-line: 16px;
+    --heading-h5-weight: 500;
+    --heading-h6-size: 11px;
+    --heading-h6-line: 14px;
+    --heading-h6-weight: 500;
+
+    /* Headings Mobile */
+    --heading-xxl-mobile-size: 32px;
+    --heading-xxl-mobile-line: 36px;
+    --heading-xxl-mobile-weight: 600;
+    --heading-xl-mobile-size: 26px;
+    --heading-xl-mobile-line: 30px;
+    --heading-xl-mobile-weight: 700;
+    --heading-h1-mobile-size: 20px;
+    --heading-h1-mobile-line: 23px;
+    --heading-h1-mobile-weight: 600;
+    --heading-h2-mobile-size: 18px;
+    --heading-h2-mobile-line: 22px;
+    --heading-h2-mobile-weight: 600;
+    --heading-h3-mobile-size: 16px;
+    --heading-h3-mobile-line: 18px;
+    --heading-h3-mobile-weight: 600;
+    --heading-h4-mobile-size: 14px;
+    --heading-h4-mobile-line: 16px;
+    --heading-h4-mobile-weight: 600;
+    --heading-h5-mobile-size: 13px;
+    --heading-h5-mobile-line: 16px;
+    --heading-h5-mobile-weight: 500;
+    --heading-h6-mobile-size: 11px;
+    --heading-h6-mobile-line: 14px;
+    --heading-h6-mobile-weight: 500;
+
+    /* Body Desktop */
+    --text-xl-size: 20px;
+    --text-xl-line: 26px;
+    --text-xl-weight: 400;
+    --text-large-size: 18px;
+    --text-large-line: 24px;
+    --text-large-weight: 400;
+    --text-regular-size: 15px;
+    --text-regular-line: 20px;
+    --text-regular-weight: 400;
+    --text-small-size: 13px;
+    --text-small-line: 16px;
+    --text-small-weight: 400;
+    --text-small-emphasis-weight: 500;
+    --text-small-bold-weight: 600;
+    --text-xs-size: 10px;
+    --text-xs-line: 13px;
+    --text-xs-weight: 500;
+    --text-xs-bold-weight: 600;
+}
+
+/* Breakpoint: adjust if your system uses different breakpoints */
+$bp-mobile-max: 767px;
+
+/* Map of variants to CSS variable tuples: (size, line, weight) */
+$typo-map: (
+    'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
+    'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
+    'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
+    'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
+    'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
+    'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
+    'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
+    'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
+
+    'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
+    'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
+    'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
+    'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
+    'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
+    'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
+    'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
+    'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
+
+    'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
+    'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
+    'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
+    'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
+    'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
+    'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
+    'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
+    'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
+);
+
+@mixin apply-typo($tuple) {
+    $size: nth($tuple, 1);
+    $line: nth($tuple, 2);
+    $weight: nth($tuple, 3);
+    $family: nth($tuple, 4);
+    font-family: $family;
+    font-size: $size;
+    line-height: $line;
+    font-weight: $weight;
+    color: var(--labels-main-label-primary, #121E52);
+}
+
+@mixin typography($variant) {
+    @if map-has-key($typo-map, $variant) {
+        @include apply-typo(map-get($typo-map, $variant));
+    }
+
+    @else {
+        /* Fallback to regular text */
+        @include apply-typo(map-get($typo-map, 'text.regular'));
+    }
+}
+
+/* Convenience mixin that switches to mobile variant under mobile breakpoint */
+@mixin responsive-heading($desktopVariant, $mobileVariant) {
+    @include typography($desktopVariant);
+
+    @media (max-width: $bp-mobile-max) {
+        @include typography($mobileVariant);
+    }
+}

package/src/v2/types/navigation.ts

@@ -0,0 +1,17 @@
+export interface NavigationItem {
+  id: string
+  label: string
+  path: string
+  requiredRoles?: string[]
+  requiredPermissions?: string[]
+  adminOnly?: boolean
+  venueRequired?: boolean
+}
+
+export interface AuthCredentials {
+  roles: string[]
+  permissions: string[]
+  isAdmin: boolean
+  isVenueUser: boolean
+  venueId?: string
+}

package/src/zone/form/ZoneForm.stories.tsx

@@ -8,7 +8,8 @@ export default {
 } as Meta
 
 export const Default: Story<ZoneFormProps> = (args) => {
-  const isLoading = boolean('isLoading', false)
+  // TODO: Replace with Storybook controls
+  const isLoading = false
   return <ZoneForm {...args} isLoading={isLoading} />
 }
 

package/styles/overrides/_functions.scss

@@ -0,0 +1,6 @@
+@import 'bootstrap/scss/functions';
+
+// size in scalable pixels (0.25rem by default)
+@function sp($value) {
+  @return calc($value / 4 * $font-size-base);
+}