@widgetic/design-system 0.3.89 → 0.5.8

package/dist/styles/fonts.css

@@ -1,3 +1,6 @@
+/* Tailwind config */
+/* @config "../../../tailwind.config.ts"; */
+
 /*** GLOBAL STYLE FONTS ***/
 
   /* BL MELODY FAMILY: rules and classes */
@@ -6,7 +9,8 @@
 
   @font-face {
     font-family: 'BL Melody';
-    src: url('@widgetic/design-system/fonts/BLMelody/BLMelody-Medium.woff2') format('woff2');
+    /* Absolute /fonts/… so consumer Vite builds (site) resolve from static/, not _app/immutable/assets/ */
+    src: url('/fonts/BLMelody/BLMelody-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
@@ -14,7 +18,7 @@
 
   @font-face {
     font-family: 'BL Melody';
-    src: url('@widgetic/design-system/fonts/BLMelody/BLMelody-SemiBold.woff2') format('woff2');
+    src: url('/fonts/BLMelody/BLMelody-SemiBold.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
@@ -22,53 +26,54 @@
 
   @font-face {
     font-family: 'BL Melody';
-    src: url('@widgetic/design-system/fonts/BLMelody/BLMelody-Bold.woff2') format('woff2');
+    src: url('/fonts/BLMelody/BLMelody-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
 
-  .h1 {
+/* Convert classes to utilities */
+@utility h1 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 144px;
     line-height: 0.85;
-  }
+}
 
-  .h2 {
+@utility h2 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 72px;
     line-height: 0.96;
-  }
+}
 
-  .h3 {
+@utility h3 {
     font-family: 'BL Melody';
     font-weight: 700;
     font-size: 56px;
     line-height: 1;
-  }
+}
 
-  .h4 {
+@utility h4 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 32px;
     line-height: 1.1;
-  }
+}
 
-  .h5 {
+@utility h5 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 24px;
     line-height: 1.2;
-  }
+}
 
-  .h6 {
+@utility h6 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 14px;
     line-height: 1;
-  }
+}
 
 
 
@@ -76,7 +81,7 @@
   /* Riegla Regular */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Regular.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -85,7 +90,7 @@
   /* Riegla Italic */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Italic.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Italic.otf') format('opentype');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
@@ -94,7 +99,7 @@
   /* Riegla Bold */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Bold.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Bold.otf') format('opentype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
@@ -103,7 +108,7 @@
   /* Riegla Bold Italic */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Bold Italic.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Bold Italic.otf') format('opentype');
     font-weight: 700;
     font-style: italic;
     font-display: swap;
@@ -112,61 +117,68 @@
   /* Riegla Medium */
   @font-face {
     font-family: 'Riegla Medium';
-    src: url('@widgetic/design-system/fonts/Riegla/RieglaMedium-Regular.otf') format('opentype');
+    src: url('/fonts/Riegla/RieglaMedium-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
 
-  .subtitle1 {
+@utility subtitle1 {
     font-family: 'Riegla Regular';
     font-size: 32px;
     line-height: 1.2;
-  }
+}
 
-  .subtitle2 {
+@utility subtitle2 {
     font-family: 'Riegla Regular';
     font-size: 24px;
     line-height: 1.3;
-  }
+}
 
-  .body-medium {
-    font-family: 'Riegla Medium' !important;
-    font-size: 18px !important;
-    font-weight: 400 !important;
-    line-height: 1.4 !important;
-  }
+@utility body-medium {
+    font-family: 'Riegla Medium';
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+}
 
-  .body {
-    font-family: 'Riegla Regular' !important;
-    font-size: 18px !important;
-    line-height: 1.4 !important;
-  }
+@utility body {
+    font-family: 'Riegla Regular';
+    font-size: 18px;
+    line-height: 1.4;
+}
 
-  .subtext {
-    font-family: 'Riegla Regular' !important;
-    font-size: 16px !important;
-    line-height: 1.4 !important;
-  }
+@utility body-bold {
+    font-family: 'Riegla Regular';
+    font-size: 18px;
+    line-height: 1.4;
+    font-weight: 700;
+}
 
-  .caption {
+@utility subtext {
+    font-family: 'Riegla Regular';
+    font-size: 16px;
+    line-height: 1.4;
+}
+
+@utility caption {
     font-family: 'Riegla Medium';
-    font-weight: 400 !important;
+    font-weight: 400;
     font-size: 14px;
     line-height: 1.2;
-  }
+}
 
-  .link {
+@utility link {
     font-family: 'Riegla Medium';
     font-size: 14px;
     line-height: 1;
     text-decoration: underline;
-  }
+}
 
-  .tag {
+@utility tag {
     font-family: 'Riegla Medium';
     font-size: 11px;
     line-height: 16px;
     text-transform: uppercase;
-  }
+}
   

package/dist/styles/global.css

@@ -1,16 +1,77 @@
-/* Tailwind 4
-@import "tailwindcss"; */
-
-/* Taildind 3 imports */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+/* Tailwind import(v4) */
+@import 'tailwindcss';
 
 /* Import fonts css */
+/* @import './fonts.css' layer(utilities); */
 @import './fonts.css';
 
+/* Tailwind config load *after* main imports - needed for tailwind 4 
+go 3 levels up in development mode, 2 levels up in production mode*/
+@config "../../tailwind.config.ts";
+
+/* Widgetic DS palette as TW4 theme tokens (enables bg-grey2, text-forest-green, etc.) */
+@theme {
+  --color-dark: hsl(var(--dark));
+  --color-deep-forest-green: hsl(var(--deep-forest-green));
+  --color-sage-green: hsl(var(--sage-green));
+  --color-sunny-yellow: hsl(var(--sunny-yellow));
+  --color-light-green: hsl(var(--light-green));
+  --color-forest-green: hsl(var(--forest-green));
+  --color-error: hsl(var(--error));
+  --color-light-error: hsl(var(--light-error));
+  --color-grey1: hsl(var(--grey1));
+  --color-grey2: hsl(var(--grey2));
+  --color-grey3: hsl(var(--grey3));
+  --color-grey4: hsl(var(--grey4));
+  --color-grey5: hsl(var(--grey5));
+  --color-grey6: hsl(var(--grey6));
+  --color-grey7: hsl(var(--grey7));
+
+  --radius-pill: 100px;
+  --radius-large: 15px;
+  --radius-medium: 12px;
+  --radius-small: 8px;
+}
+
+/* Utility classes for border radius - Moved to top level */
+/* NOTE: We define these custom utilities BEFORE the base layer 
+   so they are available for @apply within the base layer if needed, 
+   and Tailwind processes them correctly. */
+@utility rounded-pill {
+  border-radius: var(--radius-pill);
+}
+
+@utility rounded-large {
+  border-radius: var(--radius-large);
+}
+
+@utility rounded-medium {
+  border-radius: var(--radius-medium);
+}
+
+@utility rounded-small {
+  border-radius: var(--radius-small);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
 @layer base {
-  /* CSS Variables Here at the top of the base layer */
+  /* Rule for Default border color fix from first @layer block */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  /* CSS Variables now defined globally on :root */
   :root {
     /* Site Grid Variables */
     --site-column-width: 74px;
@@ -56,11 +117,10 @@
     /* Icon Colors */
     --icon-success: 142 71% 45%;
     --icon-error: 0 84% 60%;
-  }
 
-  /* CLASSES FOR WIDGETIC COMPONENTS */
-  /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
-  .widgetic-colors {
+    
+    /* Widgetic Color Variables (Moved from .widgetic-colors) */
+    /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
     --dark: 120 35.7% 9.4%;
     --deep-forest-green: 115 24.1% 24.7%;
     --sage-green: 108 25.4% 52.9%;
@@ -69,7 +129,6 @@
     --forest-green: 90 16.7% 83.3%;
     --error: 0 89% 65.7%;
     --light-error: 0 45.5% 93.7%;
-    
     /* Greys */
     --grey1: 0 0% 96.1%;
     --grey2: 0 0% 94.1%;
@@ -78,11 +137,11 @@
     --grey5: 0 0% 40%;
     --grey6: 0 0% 26.7%;
     --grey7: 0 0% 12.9%;
-  }
 
-  /* Border radius tokens */
-  .widgetic-radius {
-    /* Corner radius values */
+
+
+    /* Border radius values */
+    --radius: 0.5rem;       /* Base radius used by shadcn borderRadius utilities (rounded-sm/md/lg/xl) */
     --radius-pill: 100px;   /* Pill/Extra large corner radius */
     --radius-large: 15px;   /* Large corner radius */
     --radius-medium: 12px;  /* Medium corner radius */
@@ -94,30 +153,21 @@
     --breakpoint-tablet: 744px;
     --breakpoint-desktop: 1156px;
   }
-  /* Utility classes for border radius */
-  .rounded-pill {
-    border-radius: var(--radius-pill);
-  }
-
-  .rounded-large {
-    border-radius: var(--radius-large);
-  }
-
-  .rounded-medium {
-    border-radius: var(--radius-medium);
-  }
-
-  .rounded-small {
-    border-radius: var(--radius-small);
-  }
 
   /*** GLOBAL STYLE CLASSES ***/
   * {
     border-color: hsl(var(--border));
   }
 
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
   html, 
   body {
+    width: 100%;
+    height: 100vh;
     overflow: hidden; /* prevent scroll */
     margin: 0;
     background-color: hsl(var(--background));
@@ -126,18 +176,18 @@
 
   /* This is the root container of the website(app.html) */
   .root-ct {
-    @apply min-h-screen;
+    @apply w-full h-full;
     display: block !important;
   }
 
   /* This is the root layout container of the website pages */
   .layout-ct {
-    @apply min-h-screen w-full;
+    @apply w-full h-full;
   }
 
   .page-ct {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     /* background-color: green; */
   }
 
@@ -164,6 +214,7 @@
   }
 
   .native-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-muted;
     cursor: pointer;
     
     border: calc(var(--scrollbar-width) / 3) solid transparent;
@@ -185,11 +236,18 @@
   .site-grid {
     /* background-color: green; */
     display: grid;
-    grid-template-columns: repeat(var(--site-columns-desktop), var(--site-column-width));
+    /* Prefer fluid columns so the page never forces horizontal scroll above tablet. */
+    grid-template-columns: repeat(var(--site-columns-desktop), minmax(0, 1fr));
     column-gap: var(--site-column-gap);
+    max-width: calc(
+      (var(--site-columns-desktop) * var(--site-column-width)) +
+        ((var(--site-columns-desktop) - 1) * var(--site-column-gap))
+    );
+    width: 100%;
     margin: 0 auto;
     justify-content: center;
     position: relative;
+    box-sizing: border-box;
   }
 
   /* Debug class */
@@ -272,8 +330,8 @@
     @apply bg-transparent;
   }
 
-  /* Desktop Layout - Stretching (744px - 1156px) */
-  @media (max-width: var(--breakpoint-desktop)) {
+  /* Desktop Layout - Stretching (≤1156px). Use literal px — var() in @media is invalid CSS. */
+  @media (max-width: 1156px) {
     :root {
         --site-column-width: 64px;
         --site-column-gap: 20px;
@@ -281,11 +339,14 @@
     .site-grid {
         grid-template-columns: repeat(12, minmax(0, 1fr));
         max-width: none;
+        width: 100%;
+        padding-inline: 24px;
+        box-sizing: border-box;
     }
   }
 
-  /* Tablet (744px and below) */
-  @media (max-width: var(--breakpoint-tablet)) {
+  /* Tablet (≤744px) */
+  @media (max-width: 744px) {
     :root {
         --site-columns-tablet: 8;
         --site-column-gap: 16px;
@@ -297,11 +358,12 @@
     .site-grid {
         grid-template-columns: repeat(var(--site-columns-tablet), minmax(0, 1fr));
         gap: 16px;
+        padding-inline: 16px;
     }
   }
 
-  /* Mobile (393px and below) */
-  @media (max-width: var(--breakpoint-mobile)) {    
+  /* Mobile (≤393px) */
+  @media (max-width: 393px) {    
     :root {
         --site-columns-mobile: 4;
         --dashboard-sidebar-width: auto;
@@ -309,6 +371,7 @@
     .site-grid {
         grid-template-columns: repeat(var(--site-columns-mobile), minmax(0, 1fr));
         gap: 16px;
+        padding-inline: 16px;
     }
   }
 
@@ -551,7 +614,8 @@
 
   /* Modal Button Styles */
   .modal-btn-primary {
-    @apply h6 inline-flex items-center justify-center !important;
+    @apply !h6 !inline-flex !items-center !justify-center;
+    cursor: pointer;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -567,7 +631,8 @@
   }
 
   .modal-btn-secondary {
-    @apply h6 inline-flex items-center justify-center !important;
+    @apply !h6 !inline-flex !items-center !justify-center;
+    cursor: pointer;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -585,9 +650,9 @@
   }
 
   .modal-btn-attention {
-    @apply h6 inline-flex items-center justify-center !important;
+    @apply !h6 !inline-flex !items-center !justify-center;
     padding: 0 16px !important;
-    height: 34px;
+    height: 34px !important;
     border-radius: var(--radius-pill) !important;
     background-color: hsl(var(--error)) !important;
     color: white !important;
@@ -604,7 +669,8 @@
 
   /* Primary Button - Base styfles */
   .btn-primary {
-    @apply inline-flex items-center justify-center gap-2 !important;
+    @apply !inline-flex !items-center !justify-center !gap-2;
+    cursor: pointer;
     padding: 8px 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -624,7 +690,7 @@
 
   /* Primary Button sizes */
   .btn-primary-small {
-    @apply body-medium inline-flex items-center justify-center gap-1 !important;
+    @apply !body-medium !inline-flex !items-center !justify-center !gap-1;
     padding: 4px 12px 6px 12px !important;
     border-radius: var(--radius-medium) !important;
     background-color: hsl(var(--deep-forest-green)) !important;
@@ -632,7 +698,7 @@
   }
 
   .btn-primary-large {
-    @apply body-medium inline-flex items-center justify-center gap-3 !important;
+    @apply !body-medium !inline-flex !items-center !justify-center !gap-3;
     padding: 16px 32px !important;
     min-height: 56px !important;
     border-radius: var(--radius-medium) !important;
@@ -652,7 +718,8 @@
 
   /* Secondary Button */
   .btn-secondary {
-    @apply h6 inline-flex items-center justify-center gap-2 !important;
+    @apply !h6 !inline-flex !items-center !justify-center !gap-2;
+    cursor: pointer;
     padding: 0 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -691,7 +758,7 @@
   }
 
   .dropdown-menu-item {
-    @apply flex items-center gap-2 w-full text-left h6 text-[hsl(var(--grey7))] whitespace-nowrap;
+    @apply !flex !items-center !gap-2 !w-full !text-left !h6 !text-[hsl(var(--grey7))] !whitespace-nowrap;
     padding: 8px 16px;
   }