@sonic-equipment/ui 0.0.11 → 0.0.12

package/dist/styles.css

@@ -1,20 +1,21 @@
-:root {   
-  --font-family-sonic: 'Pancetta', sans-serif;  
-
-  --font-size-20: 0.75rem; /* 12px */
-  --font-size-24: 0.875rem; /* 14px */
-  --font-size-28: 1rem; /* 16px */
-  --font-size-32: 1.125rem; /* 18px */
-  --font-size-36: 1.25rem; /* 20px */
-  --font-size-40: 1.5rem; /* 24px */
-  --font-size-48: 1.875rem;/* 30px */ 
-  --font-size-56: 2.25rem; /* 36px */
-  --font-size-64: 3rem; /* 48px */
-  --font-size-72: 3.75rem; /* 60px */
-  --font-size-80: 4.5rem; /* 72px */
-  --font-size-96: 6rem; /* 96px */
-  --font-size-112: 8rem; /* 128px */
-  --font-size-base: var(--font-size-28);
+:root {
+  --font-family-sonic: 'Pancetta', sans-serif;
+
+  --font-size-11: 0.6875rem;
+  --font-size-12: 0.75rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-24: 1.5rem;
+  --font-size-32: 2rem;
+  --font-size-36: 2.25rem;
+  --font-size-44: 2.75rem;
+  --font-size-48: 3rem;
+  --font-size-52: 3.25rem;
+  --font-size-64: 4rem;
+  --font-size-96: 6rem;
+
+  --font-size-base: var(--font-size-16);
 
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
@@ -25,6 +26,40 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --font-weight-black: 900;
+
+  --font-weight-base: var(--font-weight-normal);
+
+  --line-height-22: 1.375rem;
+  --line-height-24: 1.5rem;
+  --line-height-28: 1.75rem;
+  --line-height-38: 2.375rem;
+  --line-height-42: 2.625rem;
+  --line-height-44: 2.75rem;
+  --line-height-56: 3.5rem;
+  --line-height-84: 5.25rem;
+
+  --line-height-base: var(--line-height-24);
+
+  --text-heading-xxl-size: var(--font-size-96);
+  --text-heading-xxl-line-height: var(--line-height-84);
+
+  --text-heading-xl-size: var(--font-size-64);
+  --text-heading-xl-line-height: var(--line-height-56);
+
+  --text-heading-l-size: var(--font-size-52);
+  --text-heading-l-line-height: var(--line-height-44);
+
+  --text-heading-m-size: var(--font-size-48);
+  --text-heading-m-line-height: var(--line-height-42);
+
+  --text-heading-s-size: var(--font-size-44);
+  --text-heading-s-line-height: var(--line-height-38);
+
+  --text-heading-xs-size: var(--font-size-32);
+  --text-heading-xs-line-height: var(--line-height-28);
+
+  --text-heading-xxs-size: var(--font-size-24);
+  --text-heading-xxs-line-height: var(--line-height-22);
 }
 :root {
   --breakpoint-sm: 640px;
@@ -34,30 +69,32 @@
   --breakpoint-xxl: 1536px;
 }
 :root {
-  --space-1: 2px;
-  --space-2: 4px;
-  --space-3: 6px;
-  --space-4: 8px;
-  --space-5: 12px;
-  --space-6: 16px;
-  --space-8: 20px;
-  --space-10: 24px; 
-  --space-12: 28px; 
-  --space-14: 32px; 
-  --space-17: 36px; 
-  --space-20: 40px; 
-  --space-24: 48px; 
-  --space-28: 56px; 
-  --space-32: 64px; 
-  --space-38: 72px; 
-  --space-44: 80px; 
-  --space-52: 96px; 
-  --space-60: 112px;
-  --space-70: 128px;
-  --space-80: 144px;
-  --space-92: 160px;
-  --space-104: 192px;
-  --space-120: 224px;
+  /*********************************************************
+  *
+  *  Global spacing tokens
+  *
+  *********************************************************/
+  --space-0: 0;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-36: 36px;
+  --space-44: 44px;
+  --space-48: 48px;
+  --space-52: 52px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --space-72: 72px;
+  --space-96: 96px;
+
+  --space-20: 20px;
+  --space-40: 40px;
+  --space-80: 80px;
+  --space-100: 100px;
 }
 :root {
   /*********************************************************
@@ -66,6 +103,8 @@
   *
   *********************************************************/
 
+  --color-transparent: transparent;
+
   --color-white: #ffffff;
 
   --color-red-50: #fff0f1;
@@ -92,11 +131,23 @@
   *
   *********************************************************/
 
+  --color-brand-white: var(--color-white);
   --color-brand-black: var(--color-black);
 
   --color-brand-red: var(--color-red-700);
   --color-brand-dark-red: var(--color-red-800);
 
+  --color-brand-dark-steelblue: #44586b;
+  --color-brand-light-steelblue: #6ca1b6;
+  --color-brand-dark-golden-rod: #d2a558;
+
+  --color-status-available: #007000;
+
+  --color-semantic-okay: #30d158;
+  --color-semantic-notify: #ff9f0a;
+  --color-semantic-stop: #e30613;
+  --color-semantic-information: #0a84ff;
+
   --color-brand-light-gray: var(--color-gray-100);
   --color-brand-medium-gray: var(--color-gray-500);
   --color-brand-dark-gray: var(--color-gray-900);
@@ -104,37 +155,60 @@
   --color-focus-ring: var(--color-brand-red);
 }
 :root {
+  /*********************************************************
+  *
+  *  Global border radius tokens
+  *
+  *********************************************************/
   --border-radius-0: 0px;
-  --border-radius-1: 2px;
-  --border-radius-2: 4px;
-  --border-radius-4: 6px;
-  --border-radius-6: 8px;
-  --border-radius-8: 12px;
-  --border-radius-12: 16px;
-  --border-radius-16: 20px;
-  --border-radius-20: 22px;
-  --border-radius-24: 30px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
+  --border-radius-12: 12px;
+  --border-radius-16: 16px;
+  --border-radius-20: 20px;
+  --border-radius-22: 22px;
+  --border-radius-30: 30px;
   --border-radius-full: 9999px;
-  
-  
 
+  /*********************************************************
+  *
+  *  Global border width tokens
+  *
+  *********************************************************/
   --border-width-0: 0px;
   --border-width-1: 1px;
   --border-width-2: 2px;
   --border-width-3: 4px;
 }
+
 .button-module-V4meK {
-  display: inline-flex;
+  all: unset;
+
   align-items: center;
-  justify-content: center;
+  display: inline-flex;
   flex-shrink: 0;
+  font-size: var(--font-size-base);
+  font-style: italic;
+  font-weight: var(--font-weight-bold);
+  justify-content: center;
+  line-height: var(--line-height-base);
+  text-transform: uppercase;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  vertical-align: top;
-  text-transform: uppercase;
-  font-style: italic;
-  font-weight: var(--font-weight-bold);
+  vertical-align: text-bottom;
+  cursor: pointer;
+}
+
+  .button-module-V4meK:where([data-disabled]) {
+    cursor: default;
+  }
+
+  .button-module-V4meK {
+
+  gap: 3px;
 }
 
 /*********************************************************
@@ -145,14 +219,14 @@
 
 .button-module-GVTEW {
   min-height: 40px;
-  border-radius: var(--border-radius-16);
-  padding-inline: var(--space-8);
+  border-radius: var(--border-radius-20);
+  padding-inline: var(--space-20);
 }
 
 .button-module-nyNY8 {
-  min-height: 44px;  
-  border-radius: var(--border-radius-20);
-  padding-inline: var(--space-8);
+  min-height: 44px;
+  border-radius: var(--border-radius-22);
+  padding-inline: var(--space-24);
 }
 
 /*********************************************************
@@ -161,31 +235,75 @@
  *
 *********************************************************/
 
-/* Primary */
-
-.button-module-AjvlY:where(.button-module-tmyk8) {
+.button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY) {
     background-color: var(--color-brand-red);
-    color: var(--color-white);
+    color: var(--color-brand-white);
   }
 
-.button-module-AjvlY:where(.button-module-tmyk8):where([data-hovered]),
-    .button-module-AjvlY:where(.button-module-tmyk8):where([data-pressed]) {
+.button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
       background-color: var(--color-brand-dark-red);
     }
 
-/* Primary */
+.button-module-tmyk8:where(.button-module-f4UVe) {
+    color: var(--color-brand-black);
+  }
+
+.button-module-tmyk8:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where([data-pressed]) {
+      color: var(--color-brand-red);
+    }
 
-.button-module-vq9GI:where(.button-module-tmyk8) {
-    background-color: var(--color-white);
-    color: var(--color-black);
+.button-module-tmyk8:where(.button-module-vq9GI) {
     border: 1px solid var(--color-brand-medium-gray);
   }
 
-.button-module-vq9GI:where(.button-module-tmyk8):where([data-hovered]),
-    .button-module-vq9GI:where(.button-module-tmyk8):where([data-pressed]) {
+.button-module-tmyk8 .button-module-ydQAo {
+    color: var(--color-brand-white);
+  }
+
+.button-module-tmyk8:where([data-disabled]) {
+    background-color: var(--color-red-100);
+    color: var(--color-red-50);
+    border-color: var(--color-brand-light-gray);
+  }
+
+.button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY) {
+    background-color: var(--color-brand-white);
+    color: var(--color-brand-black);
+  }
+
+.button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
       background-color: var(--color-brand-light-gray);
     }
+
+.button-module--1bCH:where(.button-module-f4UVe) {
+    color: var(--color-brand-black);
+  }
+
+.button-module--1bCH:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where([data-pressed]) {
+      color: var(--color-brand-red);
+    }
+
+.button-module--1bCH:where(.button-module-vq9GI) {
+    border: 1px solid var(--color-brand-medium-gray);
+  }
+
+.button-module--1bCH .button-module-ydQAo {
+    color: var(--color-brand-red);
+  }
+
+.button-module--1bCH:where([data-disabled]) {
+    background-color: var(--color-white);
+    color: var(--color-brand-medium-gray);
+    border-color: var(--color-brand-medium-gray);
+  }
+
+.button-module--1bCH:where([data-disabled]) .button-module-ydQAo {
+      color: var(--color-red-300);
+    }
+
 .icon-button-module-HJm0i {
+  all: unset;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -229,40 +347,122 @@
 .icon-button-module-fTeP4:where([data-pressed]), .icon-button-module-dM0eo:where([data-pressed]) {
     color: var(--color-brand-dark-red);
   }
-.favorite-button-module-6FS3Q {
-  color: var(--color-brand-red);
+
+.favorite-button-module-tXSS3:where(.favorite-button-module-6FS3Q) {
+    color: var(--color-brand-red);
+  }
+
+.product-price-module-oIU1K {
+  --current-price-color: var(--color-brand-black);
+
+  display: flex;
+  flex-direction: column;
+}
+
+  .product-price-module-oIU1K .product-price-module-til0s {
+    font-weight: var(--font-weight-bold);
+    color: var(--color-brand-dark-gray);
+    text-decoration: line-through;
+    font-size: var(--font-size-18);
+    padding-left: var(--space-4);
+  }
+
+  .product-price-module-oIU1K .product-price-module-FfVhl {
+    display: flex;
+    gap: var(--space-4);
+    align-items: baseline;
+    margin-top: calc(var(--space-4) * -1);
+  }
+
+  .product-price-module-oIU1K .product-price-module-pvy2w {
+    position: relative;
+    display: flex;
+    line-height: 1;
+    color: var(--current-price-color);
+    font-weight: var(--font-weight-black);
+    font-size: var(--font-size-36);
+    font-style: italic;
+  }
+
+  .product-price-module-oIU1K .product-price-module-pvy2w > * {
+      line-height: 1;
+    }
+
+  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-GCw07 {
+      font-size: 36px;
+    }
+
+  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-N56iV {
+      margin-bottom: 0;
+    }
+
+  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-eWOOF {
+      position: relative;
+      font-size: var(--font-size-24);
+      margin-left: -0.375rem;
+      margin-top: 2px;
+      vertical-align: top;
+    }
+
+  .product-price-module-oIU1K .product-price-module-96DoG {
+    font-size: var(--font-size-12);
+    color: var(--color-brand-dark-gray);
+    font-weight: var(--font-weight-normal);
+  }
+
+  .product-price-module-oIU1K:has(.product-price-module-til0s) {
+    --current-price-color: var(--color-brand-red);
+  }
+
+.product-sku-module-ITb8x {
+    all: unset;
+    font-size: var(--font-size-14);
+    color: var(--color-brand-dark-gray);;
 }
+
 .checkbox-module-y3eBg {
+  all: unset;
+
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
+  --disabled-color: color-mix(in srgb, var(--selected-color) 20%, transparent);
+
   --checkmark-color: var(--color-white);
+  --disabled-checkmark-color: color-mix(
+    in srgb,
+    var(--checkmark-color) 40%,
+    transparent
+  );
+
+  box-sizing: border-box;
 
   display: flex;
   align-items: center;
-  gap: 0.571rem;
-  font-size: var(--font-size-24);
-  line-height: 14px;
+  gap: 4px;
   color: var(--color-brand-black);
   forced-color-adjust: none;
 }
 
   .checkbox-module-y3eBg .checkbox-module-TqLux {
+    box-sizing: border-box;
     width: 16px;
     height: 16px;
     border: 2px solid var(--color-brand-medium-gray);
-    border-radius: var(--border-radius-1);
+    border-radius: var(--border-radius-2);
     transition: all 200ms;
     display: flex;
     align-items: center;
-    justify-content: center;    
+    justify-content: center;
+    color: var(--checkmark-color);
   }
 
   .checkbox-module-y3eBg .checkbox-module-Yhrdp {
     width: 1rem;
     height: 1rem;
     fill: none;
-    stroke: var(--checkmark-color);
-    stroke-width: 3px;
+    stroke: currentColor;
+    stroke-width: 2px;
+    stroke-linecap: round;
     stroke-dasharray: 22px;
     stroke-dashoffset: 66;
     transition: all 200ms;
@@ -272,10 +472,11 @@
     border-color: var(--color-brand-dark-gray);
   }
 
-  .checkbox-module-y3eBg[data-focus-visible] .checkbox-module-TqLux {
-    outline: 2px solid var(--color-focus-ring);
-    outline-offset: 2px;
-  }
+  .checkbox-module-y3eBg.checkbox-module-zoTSP .checkbox-module-TqLux, .checkbox-module-y3eBg.checkbox-module-sHmzp .checkbox-module-TqLux, .checkbox-module-y3eBg[data-focus-visible] .checkbox-module-TqLux {
+      outline: 2px solid var(--color-brand-white);
+      outline-offset: 0px;
+      box-shadow: 0 0 8px 2px var(--color-brand-red);
+    }
 
   .checkbox-module-y3eBg[data-selected] .checkbox-module-TqLux, .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-TqLux {
       border-color: var(--selected-color);
@@ -294,4 +495,10 @@
   .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-Yhrdp {
       stroke: none;
       fill: var(--checkmark-color);
-    }
+    }
+
+  .checkbox-module-y3eBg[data-disabled] .checkbox-module-TqLux {
+    border-color: var(--color-transparent);
+    background-color: var(--disabled-color);
+    color: var(--disabled-checkmark-color);
+  }

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,2 @@
+export declare const getTokenValue: (token: string) => string;
+export declare const getTokenKeyValue: (token: string) => Record<string, string>;

package/dist/typography/heading/heading.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const SIZES: readonly ["xxl", "xl", "l", "m", "s", "xs", "xxs"];
+export declare const TAGS: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "h7"];
+type Size = (typeof SIZES)[number];
+type Tag = (typeof TAGS)[number];
+interface HeadingProps {
+    children: React.ReactNode;
+    className?: string;
+    italic?: boolean;
+    size: Size;
+    tag?: Tag;
+    uppercase?: boolean;
+}
+export declare function Heading({ children, className, italic, size, tag, uppercase, }: HeadingProps): import("react").ReactElement<{
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/typography/heading/heading.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react';
+import { Heading } from './heading';
+declare const meta: {
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            description: string;
+            name: string;
+            options: readonly ["xxl", "xl", "l", "m", "s", "xs", "xxs"];
+        };
+        tag: {
+            control: {
+                type: "select";
+            };
+            description: string;
+            name: string;
+            options: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "h7"];
+        };
+    };
+    args: {
+        children: string;
+        size: "xxl";
+        tag: "h1";
+        uppercase: true;
+    };
+    component: typeof Heading;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;