@licklist/design 0.78.5-dev.110 → 0.78.5-dev.112

package/src/v2/components/Checkbox/Checkbox.scss

@@ -28,10 +28,10 @@
     width: 0;
 
     &:checked ~ .checkbox__toggle {
-      background: var(--fill-selected, #14215A);
-      border: 1px solid var(--border-primary, #E8E9EF);
+      background: var(--fill-selected, var(--neutral-500));
+      border: none;
 
-      .checkbox__xmark {
+      .checkbox__unchecked-group {
         opacity: 0;
         visibility: hidden;
       }
@@ -43,29 +43,25 @@
     }
 
     &:focus ~ .checkbox__toggle {
-      box-shadow: 0 0 0 2px rgba(20, 33, 90, 0.2);
+      outline: none;
     }
 
     &:disabled ~ .checkbox__toggle {
-      background-color: var(--surface-status-disabled, #f8f8fa);
-      border-color: var(--border-primary, #e8e9ef);
+      background-color: var(--surface-status-disabled, var(--neutral-25));
+      border-color: var(--border-primary, var(--neutral-50));
       cursor: not-allowed;
       opacity: 0.6;
     }
   }
 
-  // Only show X mark when not pristine and not checked
+  // Only show Unchecked group (X) when not pristine and not checked
   &:not(&--pristine) &__input:not(:checked) ~ &__toggle {
-    .checkbox__xmark {
+    background: var(--grey-500); // Match image track color
+    border: none;
+
+    .checkbox__unchecked-group {
       opacity: 1;
       visibility: visible;
-      top: 50%;
-      position: absolute;
-      right: 4px;
-      transform: translateY(-50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
 
     .checkbox__checked-group {
@@ -78,30 +74,18 @@
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: flex-end; // Positions X mark to the right
     width: 58px;
-    height: 34px; // Set explicit height to help with vertical centering
+    height: 34px;
     min-width: 58px;
     padding: 4px;
-    background: var(--surface-secondary, #F8F8FA);
-    border: 1px solid var(--border-primary, #E8E9EF);
+    background: var(--surface-secondary, var(--neutral-25));
+    border: none;
     border-radius: var(--padding-xl, 32px);
     flex-shrink: 0;
+    transition: background-color 0.2s ease;
   }
 
-  &__xmark {
-    width: 24px;
-    height: 24px;
-    opacity: 0; // Hidden by default (blank state)
-    visibility: hidden;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__checked-group {
+  &__unchecked-group {
     position: absolute;
     left: 4px;
     top: 50%;
@@ -113,37 +97,33 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background: white;
+    border-radius: 50%;
   }
 
-  &__circle {
-    position: relative;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
+  &__icon-cross {
+    fill: var(--grey-500);
+    opacity: 0.5;
   }
 
-  &__checkmark {
+  &__checked-group {
     position: absolute;
+    right: 4px; // Checked position on the right
     top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translateY(-50%);
     width: 24px;
     height: 24px;
+    opacity: 0;
+    visibility: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: white;
+    border-radius: 50%;
+  }
 
-    svg {
-      width: 100%;
-      height: 100%;
-    }
+  &__icon-tick {
+    fill: var(--neutral-500);
   }
 
   &__content {
@@ -177,19 +157,19 @@
     font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
     font-size: var(--text-xs-size, 11px);
     line-height: var(--text-xs-line, 14px);
-    color: var(--label-status-error, #ef4444);
+    color: var(--label-status-error, var(--red-500));
     margin-left: 69px;
   }
 
   &__wrapper:hover &__input:not(:disabled) ~ &__toggle {
-    border-color: var(--border-primary-hover, #d1d3de);
+    // border-color: var(--border-primary-hover, #d1d3de);
   }
 
   &--pristine {
     .checkbox__toggle {
-      background: var(--surface-secondary, #F8F8FA);
+      background: var(--surface-secondary, var(--neutral-25));
     }
-    .checkbox__xmark,
+    .checkbox__unchecked-group,
     .checkbox__checked-group {
       opacity: 0 !important;
       visibility: hidden !important;
@@ -205,7 +185,7 @@
   align-items: center;
   gap: 8px;
   border-radius: var(--padding-xl, 32px);
-  border: 1px solid var(--border-primary, #E8E9EF);
-  background: var(--surface-primary, #FFF);
+  border: 1px solid var(--border-primary, var(--neutral-50));
+  background: var(--surface-primary, var(--neutral-white));
 }
 

package/src/v2/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes, forwardRef } from 'react'
+import { IconTick, IconCross } from '../../icons'
 import './Checkbox.scss'
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
@@ -41,53 +42,14 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             {...props}
           />
           <span className="checkbox__toggle">
-            {/* X mark - visible when unchecked, positioned to the right */}
-            <span className="checkbox__xmark">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-              >
-                <path
-                  d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z"
-                  fill="#14215A"
-                />
-                <path
-                  d="M18.1426 8.59961L14.0762 12.375L18.1426 16.1504L16.1006 18.3496L11.8711 14.4219L7.64258 18.3496L5.60059 16.1504L9.66602 12.375L5.60059 8.59961L7.64258 6.40039L11.8711 10.3271L16.1006 6.40039L18.1426 8.59961Z"
-                  fill="white"
-                />
-              </svg>
+            {/* White circle + X mark - visible when unchecked, positioned to the left */}
+            <span className="checkbox__unchecked-group">
+              <IconCross size={16} className="checkbox__icon-cross" />
             </span>
 
-            {/* White circle + Checkmark - visible when checked, positioned to the left */}
+            {/* White circle + Checkmark - visible when checked, positioned to the right */}
             <span className="checkbox__checked-group">
-              <span className="checkbox__circle">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <circle cx="12" cy="12" r="12" fill="white" />
-                </svg>
-              </span>
-              <span className="checkbox__checkmark">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <path
-                    d="M19.1272 8.67725L10.8545 18.1013L5.71509 13.2058L7.78491 11.0334L10.6611 13.7734L16.8728 6.69824L19.1272 8.67725Z"
-                    fill="#14215A"
-                  />
-                </svg>
-              </span>
+              <IconTick size={16} className="checkbox__icon-tick" />
             </span>
           </span>
           {(label || description) && (

package/src/v2/components/ColorPicker/ColorPicker.scss

@@ -0,0 +1,96 @@
+.color-picker-grid {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 20px;
+  row-gap: 32px;
+  margin-top: 16px;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition: all 0.2s;
+
+  &--error {
+    border-color: #E0423A;
+    background-color: rgba(224, 66, 58, 0.05);
+  }
+
+  @media (max-width: 480px) {
+    column-gap: 0;
+    row-gap: 16px;
+    justify-content: flex-start;
+  }
+}
+
+.color-picker-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px; // 1.5 * 4 = 6px
+  padding: 8px; // 2 * 4 = 8px
+  border-radius: 8px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  min-width: 72px;
+  background: transparent;
+  border: none;
+  outline: none;
+
+  @media (max-width: 480px) {
+    min-width: unset;
+    width: 25%;
+    padding: 4px;
+
+    .color-picker-outer-circle {
+      width: 48px;
+      height: 48px;
+    }
+
+    .color-picker-inner-circle {
+      width: 32px;
+      height: 32px;
+    }
+
+    .color-picker-name {
+      font-size: 10px;
+    }
+  }
+
+  &:hover {
+    background-color: var(--surface-primary-hover);
+  }
+}
+
+.color-picker-outer-circle {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-primary);
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: var(--label-secondary);
+  }
+
+  &--selected {
+    border-width: 2px;
+  }
+}
+
+.color-picker-inner-circle {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  transition: all 0.2s ease-out;
+}
+
+.color-picker-name {
+  font-size: 12px; // text-xs
+  font-weight: 500; // font-medium
+  color: var(--label-secondary);
+  line-height: 1.25; // leading-tight
+  text-transform: capitalize;
+}

package/src/v2/components/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ColorPicker } from './ColorPicker'
+import * as React from 'react'
+import { useState } from 'react'
+
+const meta: Meta<typeof ColorPicker> = {
+  title: 'V2/Components/ColorPicker',
+  component: ColorPicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ColorPicker>
+
+const MOCK_COLORS = [
+  { name: 'Red', hex: '#EF4444' },
+  { name: 'Orange', hex: '#F97316' },
+  { name: 'Amber', hex: '#F59E0B' },
+  { name: 'Yellow', hex: '#EAB308' },
+  { name: 'Lime', hex: '#84CC16' },
+  { name: 'Green', hex: '#22C55E' },
+  { name: 'Emerald', hex: '#10B981' },
+  { name: 'Teal', hex: '#14B8A6' },
+  { name: 'Cyan', hex: '#06B6D4' },
+  { name: 'Sky', hex: '#0EA5E9' },
+  { name: 'Blue', hex: '#3B82F6' },
+]
+
+export const Default: Story = {
+  args: {
+    colors: MOCK_COLORS,
+    selectedColor: '#EF4444',
+    onChange: (hex: string) => console.log('Selected color:', hex),
+    t: (key: string) => key,
+  },
+}
+
+export const Controlled: Story = {
+  render: (args) => {
+    const ControlledExample = () => {
+      const [selected, setSelected] = useState('#3B82F6')
+      return (
+        <ColorPicker
+          {...args}
+          selectedColor={selected}
+          onChange={setSelected}
+          t={(key: string) => key}
+        />
+      )
+    }
+    return <ControlledExample />
+  },
+  args: {
+    colors: MOCK_COLORS,
+  },
+}
+
+export const NoSelection: Story = {
+  args: {
+    colors: MOCK_COLORS,
+    selectedColor: '',
+    onChange: (hex: string) => console.log('Selected color:', hex),
+    t: (key: string) => key,
+  },
+}

package/src/v2/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import './ColorPicker.scss'
+
+export interface ColorOption {
+  name: string
+  hex: string
+}
+
+export interface ColorPickerProps {
+  colors: ColorOption[]
+  selectedColor?: string
+  onChange: (hex: string) => void
+  t: (key: string) => string
+  error?: string
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  colors,
+  selectedColor,
+  onChange,
+  t,
+  error,
+}) => {
+  return (
+    <div className={`color-picker-grid ${error ? 'color-picker-grid--error' : ''}`}>
+      {colors.map((color) => (
+        <button
+          key={color.name}
+          type="button"
+          className="color-picker-button"
+          onClick={() => onChange(color.hex)}
+        >
+          <div
+            className={`color-picker-outer-circle ${
+              selectedColor === color.hex ? 'color-picker-outer-circle--selected' : ''
+            }`}
+            style={selectedColor === color.hex ? { borderColor: color.hex, borderWidth: '2px' } : {}}
+          >
+            <div
+              className="color-picker-inner-circle"
+              style={{ backgroundColor: color.hex }}
+            />
+          </div>
+          <span className="color-picker-name">{t(color.name)}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/v2/components/ColorPicker/index.ts

@@ -0,0 +1 @@
+export * from './ColorPicker'

package/src/v2/components/FeatureCard/FeatureCard.scss

@@ -0,0 +1,65 @@
+@import '../../styles/tokens/colors';
+@import '../../styles/tokens/sizes';
+
+.feature-card {
+  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 12px;
+  background-color: var(--surface-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex: 1;
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  &__title {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    color: var(--label-primary);
+    margin: 0;
+  }
+
+  &__description {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--label-primary);
+    opacity: 0.8;
+    margin: 4px 0 0;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    @media (min-width: 640px) {
+      width: auto;
+    }
+  }
+}

package/src/v2/components/FeatureCard/FeatureCard.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FeatureCard } from './FeatureCard'
+import { AnalyticsIcon } from '../../icons'
+import * as React from 'react'
+
+const meta: Meta<typeof FeatureCard> = {
+  title: 'V2/Components/FeatureCard',
+  component: FeatureCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof FeatureCard>
+
+export const Default: Story = {
+  args: {
+    icon: <AnalyticsIcon />,
+    title: 'Dynamic Pricing',
+    description: 'When enabled, you will be able to set different prices for different times of the day.',
+  },
+}
+
+export const WithAction: Story = {
+  args: {
+    icon: <AnalyticsIcon />,
+    title: 'Variable Pricing',
+    description: 'Set different prices for different days of the week or periods.',
+    action: <div style={{ width: '40px', height: '24px', background: '#ccc', borderRadius: '12px' }} />,
+  },
+}
+
+export const CustomClassName: Story = {
+  args: {
+    icon: <AnalyticsIcon />,
+    title: 'Custom Styled Card',
+    description: 'This card has a custom CSS class applied to it.',
+    className: 'custom-feature-card',
+  },
+}

package/src/v2/components/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import './FeatureCard.scss'
+
+export interface FeatureCardProps {
+  icon: React.ReactNode
+  title: string
+  description: string
+  action?: React.ReactNode
+  className?: string
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  className = '',
+}) => {
+  return (
+    <div className={`feature-card ${className}`}>
+      <div className="feature-card__content">
+        <div className="feature-card__icon-wrapper">
+          {icon}
+        </div>
+        <div className="feature-card__text">
+          <h3 className="feature-card__title">{title}</h3>
+          <p className="feature-card__description">{description}</p>
+        </div>
+      </div>
+      {action && (
+        <div className="feature-card__action">
+          {action}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/v2/components/FeatureCard/index.ts

@@ -0,0 +1,2 @@
+export { FeatureCard } from './FeatureCard'
+export type { FeatureCardProps } from './FeatureCard'

package/src/v2/components/IconButton/IconButton.scss

@@ -76,6 +76,6 @@
   color: var(--label-danger, #cc3c35);
 
   &:hover {
-    background: var(--surface-primary, #fff);
+    background: var(--surface-danger-soft-hover, color-mix(in srgb, var(--surface-danger-soft) 85%, black));
   }
 }

package/src/v2/components/IconButton/IconButton.tsx

@@ -6,12 +6,20 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   label?: string
   icon?: 'back' | 'add' | 'delete' | ReactNode
   variant?: 'default' | 'danger'
+  backgroundColor?: string
+  borderColor?: string
+  hoverBackgroundColor?: string
+  hoverBorderColor?: string
 }
 
 export function IconButton({
   label,
   icon = 'back',
   variant = 'default',
+  backgroundColor,
+  borderColor,
+  hoverBackgroundColor,
+  hoverBorderColor,
   className = '',
   ...props
 }: IconButtonProps) {
@@ -22,6 +30,24 @@ export function IconButton({
     className,
   ].filter(Boolean).join(' ')
 
+  const style: any = {
+    ...(backgroundColor ? { backgroundColor } : {}),
+    ...(borderColor ? { borderColor } : {}),
+    ...(props.style || {}),
+  }
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (hoverBackgroundColor) e.currentTarget.style.backgroundColor = hoverBackgroundColor
+    if (hoverBorderColor) e.currentTarget.style.borderColor = hoverBorderColor
+    if (props.onMouseEnter) props.onMouseEnter(e)
+  }
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.currentTarget.style.backgroundColor = backgroundColor || ''
+    e.currentTarget.style.borderColor = borderColor || ''
+    if (props.onMouseLeave) props.onMouseLeave(e)
+  }
+
   const iconSize = isIconOnly ? 32 : 16
 
   const renderIcon = () => {
@@ -33,14 +59,27 @@ export function IconButton({
 
   if (isIconOnly) {
     return (
-      <button type="button" className={classes} {...props}>
+      <button
+        type="button"
+        className={classes}
+        style={style}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
         {renderIcon()}
       </button>
     )
   }
 
   return (
-    <button className={classes} {...props}>
+    <button
+      className={classes}
+      style={style}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
       <span className="icon-button__icon">
         {renderIcon()}
       </span>