@widgetic/design-system 0.5.9 → 0.5.11

package/dist/styles/fonts.css

@@ -3,182 +3,486 @@
 
 /*** GLOBAL STYLE FONTS ***/
 
-  /* BL MELODY FAMILY: rules and classes */
-  
-  /* BL Melody */
-
+  /** INTER FAMILY (Figma Foundations: 01 — Foundations) **/
   @font-face {
-    font-family: 'BL Melody';
-    /* 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-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Thin-BETA.woff2') format('woff2');
+    font-weight: 100;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: 'BL Melody';
-    src: url('/fonts/BLMelody/BLMelody-SemiBold.woff2') format('woff2');
-    font-weight: 600;
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-ExtraLight-BETA.woff2') format('woff2');
+    font-weight: 200;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: 'BL Melody';
-    src: url('/fonts/BLMelody/BLMelody-Bold.woff2') format('woff2');
-    font-weight: 700;
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Light-BETA.woff2') format('woff2');
+    font-weight: 300;
     font-style: normal;
     font-display: swap;
   }
 
-/* Convert classes to utilities */
-@utility h1 {
-    font-family: 'BL Melody';
-    font-weight: 500;
-    font-size: 144px;
-    line-height: 0.85;
-}
-
-@utility h2 {
-    font-family: 'BL Melody';
-    font-weight: 500;
-    font-size: 72px;
-    line-height: 0.96;
-}
-
-@utility h3 {
-    font-family: 'BL Melody';
-    font-weight: 700;
-    font-size: 56px;
-    line-height: 1;
-}
+  @font-face {
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
 
-@utility h4 {
-    font-family: 'BL Melody';
-    font-weight: 600;
-    font-size: 32px;
-    line-height: 1.1;
-}
+  @font-face {
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Italic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
 
-@utility h5 {
-    font-family: 'BL Melody';
+  @font-face {
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Medium.woff2') format('woff2');
     font-weight: 500;
-    font-size: 24px;
-    line-height: 1.2;
-}
+    font-style: normal;
+    font-display: swap;
+  }
 
-@utility h6 {
-    font-family: 'BL Melody';
+  @font-face {
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
     font-weight: 600;
-    font-size: 14px;
-    line-height: 1;
-}
-
+    font-style: normal;
+    font-display: swap;
+  }
 
+  @font-face {
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
 
-  /** RIEGLA FAMILY **/
-  /* Riegla Regular */
   @font-face {
-    font-family: 'Riegla Regular';
-    src: url('/fonts/Riegla/Riegla-Regular.otf') format('opentype');
-    font-weight: 400;
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-ExtraBold.woff2') format('woff2');
+    font-weight: 800;
     font-style: normal;
     font-display: swap;
   }
 
-  /* Riegla Italic */
   @font-face {
-    font-family: 'Riegla Regular';
-    src: url('/fonts/Riegla/Riegla-Italic.otf') format('opentype');
-    font-weight: 400;
-    font-style: italic;
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter-Black.woff2') format('woff2');
+    font-weight: 900;
+    font-style: normal;
     font-display: swap;
   }
 
-  /* Riegla Bold */
   @font-face {
-    font-family: 'Riegla Regular';
-    src: url('/fonts/Riegla/Riegla-Bold.otf') format('opentype');
-    font-weight: 700;
+    font-family: 'Inter';
+    src: url('/fonts/Inter/Inter.var.woff2') format('woff2-variations');
+    font-weight: 100 900;
     font-style: normal;
     font-display: swap;
   }
 
-  /* Riegla Bold Italic */
+  /* JETBRAINS MONO: Monospace Display (Developer API) */
   @font-face {
-    font-family: 'Riegla Regular';
-    src: url('/fonts/Riegla/Riegla-Bold Italic.otf') format('opentype');
-    font-weight: 700;
-    font-style: italic;
+    font-family: 'JetBrains Mono';
+    src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
+    font-weight: 800;
+    font-style: normal;
     font-display: swap;
   }
 
-  /* Riegla Medium */
+  /* COUSINE: Code & Embed Snippets */
   @font-face {
-    font-family: 'Riegla Medium';
-    src: url('/fonts/Riegla/RieglaMedium-Regular.otf') format('opentype');
+    font-family: 'Cousine';
+    src: url('/fonts/Cousine/Cousine-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
 
-@utility subtitle1 {
-    font-family: 'Riegla Regular';
-    font-size: 32px;
-    line-height: 1.2;
+  @font-face {
+    font-family: 'Cousine';
+    src: url('/fonts/Cousine/Cousine-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+/* Typography Utilities updated to Inter, JetBrains Mono, Cousine and Figma Foundations (node 41:90) */
+@utility h1 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 800;
+    font-size: 64.2px;
+    line-height: 64.2px;
+    letter-spacing: -2.57px;
 }
 
-@utility subtitle2 {
-    font-family: 'Riegla Regular';
+@utility h2 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 800;
+    font-size: 60px;
+    line-height: 58.8px;
+    letter-spacing: -2.7px;
+}
+
+@utility h3 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 800;
+    font-size: 36px;
+    line-height: 35.3px;
+    letter-spacing: -1.8px;
+}
+
+@utility h4 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 800;
+    font-size: 24px;
+    line-height: 35.2px;
+    letter-spacing: -0.84px;
+}
+
+@utility h5 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28.8px;
+    letter-spacing: -0.14px;
+}
+
+@utility h6 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: -0.28px;
+}
+
+@utility subtitle1 {
+    font-family: 'Inter', system-ui, sans-serif;
     font-size: 24px;
     line-height: 1.3;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+}
+
+@utility subtitle2 {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 20px;
+    line-height: 1.35;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+}
+
+@utility body-large {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 17px;
+    line-height: 21.8px;
+    font-weight: 500;
+    letter-spacing: -0.25px;
 }
 
 @utility body-medium {
-    font-family: 'Riegla Medium';
-    font-size: 18px;
-    font-weight: 400;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
     line-height: 1.4;
+    letter-spacing: -0.01em;
 }
 
 @utility body {
-    font-family: 'Riegla Regular';
-    font-size: 18px;
-    line-height: 1.4;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 400;
+    letter-spacing: -0.01em;
 }
 
 @utility body-bold {
-    font-family: 'Riegla Regular';
-    font-size: 18px;
-    line-height: 1.4;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
     font-weight: 700;
+    letter-spacing: -0.01em;
 }
 
 @utility subtext {
-    font-family: 'Riegla Regular';
-    font-size: 16px;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 14px;
     line-height: 1.4;
+    font-weight: 400;
+    letter-spacing: -0.01em;
 }
 
 @utility caption {
-    font-family: 'Riegla Medium';
+    font-family: 'Inter', system-ui, sans-serif;
     font-weight: 400;
-    font-size: 14px;
-    line-height: 1.2;
+    font-size: 13px;
+    line-height: 1.3;
 }
 
 @utility link {
-    font-family: 'Riegla Medium';
+    font-family: 'Inter', system-ui, sans-serif;
     font-size: 14px;
-    line-height: 1;
+    line-height: 1.4;
     text-decoration: underline;
+    font-weight: 400;
 }
 
 @utility tag {
-    font-family: 'Riegla Medium';
+    font-family: 'Inter', system-ui, sans-serif;
     font-size: 11px;
     line-height: 16px;
     text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+}
+
+/* Explicit Figma Foundations Typography Tokens (01 — Foundations 41:90) */
+/* 1. Display Hero */
+@utility display-hero {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 64.2px;
+    line-height: 64.2px;
+    font-weight: 800;
+    letter-spacing: -2.57px;
+}
+
+/* 2. Display Section */
+@utility display-section {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 60px;
+    line-height: 58.8px;
+    font-weight: 800;
+    letter-spacing: -2.7px;
+}
+
+/* 3. Heading Alert */
+@utility heading-alert {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 52.8px;
+    line-height: 50.2px;
+    font-weight: 800;
+    letter-spacing: -2.9px;
+}
+
+/* 4. Heading Card */
+@utility heading-card {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 36px;
+    line-height: 35.3px;
+    font-weight: 800;
+    letter-spacing: -1.8px;
+}
+
+/* 5. Heading Feature */
+@utility heading-feature {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 30.6px;
+    line-height: 31.2px;
+    font-weight: 800;
+    letter-spacing: -1.07px;
+}
+
+/* 6. Heading Sub / Plan / FAQ */
+@utility heading-sub {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 24px;
+    line-height: 35.2px;
+    font-weight: 800;
+    letter-spacing: -0.84px;
+}
+
+@utility heading-plan {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 24px;
+    line-height: 35.2px;
+    font-weight: 800;
+    letter-spacing: -0.84px;
+}
+
+@utility heading-faq {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 22px;
+    line-height: 35.2px;
+    font-weight: 600;
+    letter-spacing: -0.84px;
+}
+
+/* 7. Lead / Subcopy */
+@utility lead {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 22.8px;
+    line-height: 24.6px;
+    font-weight: 500;
+    letter-spacing: -0.46px;
+}
+
+@utility subcopy {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 22.8px;
+    line-height: 24.6px;
+    font-weight: 500;
+    letter-spacing: -0.46px;
+}
+
+/* 8. Action & Button & Quote */
+@utility action-button {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 18px;
+    line-height: 28.8px;
+    font-weight: 600;
+    letter-spacing: -0.14px;
+}
+
+@utility quote {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 18px;
+    line-height: 28.8px;
+    font-weight: 600;
+    letter-spacing: -0.14px;
+}
+
+/* 9. Body Standard */
+@utility body-standard {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 17px;
+    line-height: 21.8px;
+    font-weight: 500;
+    letter-spacing: -0.25px;
+}
+
+/* 10. UI Compact / Tabs / Links / Tags */
+@utility ui-compact {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 700;
+    letter-spacing: -0.28px;
+}
+
+/* 11. Caption & Table Cell & Footnote */
+@utility caption-footnote {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 12.9px;
+    line-height: 20.7px;
+    font-weight: 600;
+    letter-spacing: 0px;
+}
+
+/* 12. Micro / Table Header / Views */
+@utility micro-data {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 11.9px;
+    line-height: 19.1px;
+    font-weight: 700;
+    letter-spacing: -0.12px;
+}
+
+@utility micro-header {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 11.9px;
+    line-height: 19.1px;
+    font-weight: 700;
+    letter-spacing: -0.12px;
+}
+
+/* 13. Monospace Display (Developer API) */
+@utility mono-display {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 72px;
+    line-height: 73.4px;
+    font-weight: 800;
+    letter-spacing: -3.24px;
+}
+
+@utility api-heading {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 72px;
+    line-height: 73.4px;
+    font-weight: 800;
+    letter-spacing: -3.24px;
+}
+
+/* 14. Monospace Code Snippet (Cousine) */
+@utility mono-code {
+    font-family: 'Cousine', monospace;
+    font-size: 12px;
+    line-height: 19.8px;
+    font-weight: 400;
+    letter-spacing: -0.24px;
+}
+
+@utility code-snippet {
+    font-family: 'Cousine', monospace;
+    font-size: 12px;
+    line-height: 19.8px;
+    font-weight: 400;
+    letter-spacing: -0.24px;
+}
+
+@utility label-cta {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 17px;
+    line-height: 19.55px;
+    font-weight: 800;
+    letter-spacing: -0.34px;
+}
+
+@utility label-cta-hero {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 25px;
+    line-height: 25px;
+    font-weight: 800;
+    letter-spacing: -0.875px;
+}
+
+@utility footer-logo {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 22px;
+    line-height: 35.2px;
+    font-weight: 700;
+    letter-spacing: -0.66px;
+}
+
+@utility footer-heading {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 20.8px;
+    font-weight: 600;
+    letter-spacing: 0.65px;
+    text-transform: uppercase;
+}
+
+@utility footer-link {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 14px;
+    line-height: 22.4px;
+    font-weight: 400;
+    letter-spacing: -0.14px;
+}
+
+@utility footer-body {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 14px;
+    line-height: 21px;
+    font-weight: 400;
+    letter-spacing: -0.14px;
+}
+
+@utility footer-copyright {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 20.8px;
+    font-weight: 400;
+    letter-spacing: -0.14px;
 }
-