@microphi/styles 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://example.com/compare/@microphi/styles@1.3.1...@microphi/styles@1.4.0) (2026-07-22)
+
+### Features
+
+* **microphi:** update styles, debug, and json-db packages ([38118b2](https://example.com/commits/38118b233d2e52a701065b34a889c153107edee5))
+* **styles:** add CSS Grid utilities and documentation 🎉 ([c1b2739](https://example.com/commits/c1b2739a61df448fe52c9ba6c0deb4d7029b6924))
+* **styles:** add opacity, text-transform, letter-spacing & min/max sizing utilities; fix .fx-grid display ✨ ([0c6d75b](https://example.com/commits/0c6d75b00129236dfcc5c674f0fc57c0aeca5b0f))
+
+## [1.3.1](https://example.com/compare/@microphi/styles@1.3.0...@microphi/styles@1.3.1) (2025-10-09)
+
+**Note:** Version bump only for package @microphi/styles
+
 # [1.3.0](https://example.com/compare/@microphi/styles@1.2.5...@microphi/styles@1.3.0) (2025-09-25)
 
 ### Features

package/README.md

@@ -21,6 +21,7 @@ We believe in a flex first approach when it comes to layouting. This library is
 
 - **Modular Architecture:** A well-organized structure with reusable components and utilities.
 - **Flex layout system:** Flex layout system for clear and powerful layouting.
+- **Grid layout system:** Comprehensive CSS Grid utilities for modern layout solutions.
 - **Utility Classes:** Commonly used utility classes for margin, padding, colors, typography, etc.
 # - **Mixins and Functions:** Custom mixins and functions to reduce repetitive CSS and enhance your workflow.
 # - **Theming Support:** Easy customization of themes through variables for colors, typography, and other design elements.
@@ -49,21 +50,117 @@ This will include the core styles and utilities in your project. You can then st
 
 ### Example Usage
 
-Here's a basic example using the grid system and utility classes:
+Here's a basic example using the flex system and utility classes:
 
 ```html
-<div class="container">
-  <div class="row">
-    <div class="col-6">
-      <p class="text-primary">This is a column</p>
-    </div>
-    <div class="col-6">
-      <p class="text-secondary">This is another column</p>
-    </div>
+<div class="fx-flex fx-justify-center fx-items-center">
+  <div class="fx-w-full fx-h-50">
+    <p class="text-primary">This is a flex container</p>
   </div>
 </div>
 ```
 
+### Grid System
+
+The library also provides comprehensive CSS Grid utilities for modern layout solutions:
+
+```html
+<div class="fx-grid fx-grid-cols-3 fx-gap-4">
+  <div class="fx-col-span-2">Main content</div>
+  <div>Sidebar</div>
+  <div class="fx-col-start-1 fx-col-end-4">Full width footer</div>
+</div>
+```
+
+#### Grid Container Utilities
+
+- `fx-grid` - Sets display: grid
+- `fx-grid-cols-{n}` - Defines grid-template-columns (1-12, none, subgrid)
+- `fx-grid-rows-{n}` - Defines grid-template-rows (1-6, none, subgrid)
+- `fx-grid-flow-{dir}` - Controls grid-auto-flow (row, column, dense, etc.)
+- `fx-gap-{size}` - Sets gap between grid items
+- `fx-gap-col-{size}` - Sets column-gap
+- `fx-gap-row-{size}` - Sets row-gap
+- `fx-justify-content-{alignment}` - Justifies content along the inline axis
+- `fx-content-{alignment}` - Aligns content along the block axis
+- `fx-justify-items-{alignment}` - Justifies grid items along the inline axis
+- `fx-items-{alignment}` - Aligns grid items along the block axis
+- `fx-place-content-{position}` - Sets place-content shorthand
+- `fx-place-items-{position}` - Sets place-items shorthand
+
+#### Grid Item Utilities
+
+- `fx-col-span-{n}` - Makes item span across n columns (1-12, auto, full)
+- `fx-row-span-{n}` - Makes item span across n rows (1-6, auto, full)
+- `fx-col-start-{n}` - Sets grid-column-start property
+- `fx-col-end-{n}` - Sets grid-column-end property
+- `fx-row-start-{n}` - Sets grid-row-start property
+- `fx-row-end-{n}` - Sets grid-row-end property
+- `fx-area-{value}` - Sets grid-area property
+- `fx-place-self-{position}` - Sets place-self property
+
+#### Responsive Grid
+
+All grid utilities are responsive and support breakpoints:
+
+```html
+<div class="fx-grid fx-grid-cols-1 sm:fx-grid-cols-2 lg:fx-grid-cols-3 fx-gap-4">
+  <div>Responsive grid item</div>
+  <div>Responsive grid item</div>
+  <div>Responsive grid item</div>
+</div>
+```
+
+### Typography System
+
+The library provides a flexible typography system that works with the Utopia scale generator. You can customize the typography scale using the Utopia package and map the generated CSS variables to the fx-scss classes.
+
+#### Dynamic Font Size Classes
+
+The system generates font size classes dynamically based on your Utopia configuration:
+
+```html
+<!-- Generate classes from --fx-typography--6 to --fx-typography-6 based on your scale -->
+<p class="fx-text-3">Larger text using --fx-typography-3 variable</p>
+<p class="fx-text-0">Base text using --fx-typography-0 variable</p>
+<p class="fx-text--2">Smaller text using --fx-typography--2 variable</p>
+```
+
+#### Semantic Typography Classes
+
+The library also provides semantic classes that map to specific scale steps:
+
+```html
+<h1 class="fx-headline-1">Headline 1 using --fx-typography-1</h1>
+<h2 class="fx-headline-2">Headline 2 using --fx-typography-2</h2>
+<p class="fx-title">Title using --fx-typography-1</p>
+<p class="fx-subtitle">Subtitle using --fx-typography-0</p>
+<p class="fx-body-1">Body 1 using --fx-typography--1</p>
+<p class="fx-body-2">Body 2 using --fx-typography--2</p>
+<p class="fx-caption">Caption using --fx-typography--3</p>
+<p class="fx-overline">Overline using --fx-typography--4</p>
+```
+
+#### Customizing Typography Variables
+
+To customize which CSS variables the classes use (e.g., if using a different prefix in Utopia), define a custom `$typography-vars` map before importing fx-scss:
+
+```scss
+// Define custom mapping to match your Utopia configuration
+$typography-vars: (
+  1: var(--step-typography-1),
+  2: var(--step-typography-2),
+  3: var(--step-typography-3),
+  0: var(--step-typography-0),
+  -1: var(--step-typography--1),
+  -2: var(--step-typography--2),
+  // ... etc for all steps in your scale
+) !default;
+
+// Now import fx-scss
+@import 'path/to/fx-scss/main';
+```
+
 ## Folder Structure
 
 The SCSS library follows a clean, modular structure:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microphi/styles",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "helper styles",
   "scripts": {},
   "private": false,
@@ -22,5 +22,5 @@
   "peerDependencies": {
     "utopia-core-scss": "^1.2.0"
   },
-  "gitHead": "8f426385c1a8ecc44850b9dd99bb98bbb4c5c80f"
+  "gitHead": "c8a065cd3b4ef94d80ee260f70b1edacc20c8779"
 }

package/scss/_display.scss

@@ -5,7 +5,7 @@ $display-map: (
   "display": (
     property: display,
     shortcut: null,
-    values: (block, inline-block, inline, flex, inline-flex)
+    values: (block, inline-block, inline, flex, inline-flex, grid, inline-grid)
   ),
   "overflow": (
     property: overflow,

package/scss/_grid.scss

@@ -0,0 +1,311 @@
+@use "variables" as var;
+@use "mixins" as mix;
+
+// Grid utilities map
+$grid-map: (
+  // display:grid / inline-grid are emitted as bare .fx-grid / .fx-inline-grid
+  // by the display values map in _display.scss.
+  "grid-template-columns": (
+    property: grid-template-columns,
+    shortcut: grid-cols,
+    values: (
+      1: repeat(1, minmax(0, 1fr)),
+      2: repeat(2, minmax(0, 1fr)),
+      3: repeat(3, minmax(0, 1fr)),
+      4: repeat(4, minmax(0, 1fr)),
+      5: repeat(5, minmax(0, 1fr)),
+      6: repeat(6, minmax(0, 1fr)),
+      7: repeat(7, minmax(0, 1fr)),
+      8: repeat(8, minmax(0, 1fr)),
+      9: repeat(9, minmax(0, 1fr)),
+      10: repeat(10, minmax(0, 1fr)),
+      11: repeat(11, minmax(0, 1fr)),
+      12: repeat(12, minmax(0, 1fr)),
+      none: none,
+      subgrid: subgrid
+    )
+  ),
+  "grid-template-rows": (
+    property: grid-template-rows,
+    shortcut: grid-rows,
+    values: (
+      1: repeat(1, minmax(0, 1fr)),
+      2: repeat(2, minmax(0, 1fr)),
+      3: repeat(3, minmax(0, 1fr)),
+      4: repeat(4, minmax(0, 1fr)),
+      5: repeat(5, minmax(0, 1fr)),
+      6: repeat(6, minmax(0, 1fr)),
+      none: none,
+      subgrid: subgrid
+    )
+  ),
+  "grid-template-areas": (
+    property: grid-template-areas,
+    shortcut: grid-areas,
+    values: (
+      none: none,
+      subgrid: subgrid
+    )
+  ),
+  "grid-auto-flow": (
+    property: grid-auto-flow,
+    shortcut: grid-flow,
+    values: (
+      row: row,
+      column: column,
+      dense: dense,
+      row-dense: row dense,
+      col-dense: column dense
+    )
+  ),
+  "grid-auto-columns": (
+    property: grid-auto-columns,
+    shortcut: grid-auto-cols,
+    values: (
+      auto: auto,
+      max: max-content,
+      min: min-content
+    )
+  ),
+  "grid-auto-rows": (
+    property: grid-auto-rows,
+    shortcut: grid-auto-rows,
+    values: (
+      auto: auto,
+      max: max-content,
+      min: min-content
+    )
+  ),
+  "grid-gap": (
+    property: gap,
+    shortcut: gap,
+    values: var.$values
+  ),
+  "grid-column-gap": (
+    property: column-gap,
+    shortcut: gap-col,
+    values: var.$values
+  ),
+  "grid-row-gap": (
+    property: row-gap,
+    shortcut: gap-row,
+    values: var.$values
+  ),
+  "justify-items": (
+    property: justify-items,
+    shortcut: justify-items,
+    values: (
+      start: start,
+      end: end,
+      center: center,
+      stretch: stretch
+    )
+  ),
+  "align-items": (
+    property: align-items,
+    shortcut: items,
+    values: (
+      start: start,
+      end: end,
+      center: center,
+      stretch: stretch
+    )
+  ),
+  "justify-content": (
+    property: justify-content,
+    shortcut: justify-content,
+    values: (
+      start: start,
+      end: end,
+      center: center,
+      stretch: stretch,
+      space-around: space-around,
+      space-between: space-between,
+      space-evenly: space-evenly
+    )
+  ),
+  "align-content": (
+    property: align-content,
+    shortcut: content,
+    values: (
+      start: start,
+      end: end,
+      center: center,
+      stretch: stretch,
+      space-around: space-around,
+      space-between: space-between,
+      space-evenly: space-evenly
+    )
+  )
+);
+
+@each $key, $utility in $grid-map {
+  @include mix.generate-utilities($utility)
+}
+
+// Additional grid utilities for grid column and row spans
+$grid-span-map: (
+  "grid-column": (
+    property: grid-column,
+    shortcut: col-span,
+    values: (
+      1: span 1,
+      2: span 2,
+      3: span 3,
+      4: span 4,
+      5: span 5,
+      6: span 6,
+      7: span 7,
+      8: span 8,
+      9: span 9,
+      10: span 10,
+      11: span 11,
+      12: span 12,
+      auto: auto,
+      full: 1 / -1
+    )
+  ),
+  "grid-row": (
+    property: grid-row,
+    shortcut: row-span,
+    values: (
+      1: span 1,
+      2: span 2,
+      3: span 3,
+      4: span 4,
+      5: span 5,
+      6: span 6,
+      auto: auto,
+      full: 1 / -1
+    )
+  ),
+  "grid-column-start": (
+    property: grid-column-start,
+    shortcut: col-start,
+    values: (
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      6: 6,
+      7: 7,
+      8: 8,
+      9: 9,
+      10: 10,
+      11: 11,
+      12: 12,
+      13: 13,
+      auto: auto
+    )
+  ),
+  "grid-column-end": (
+    property: grid-column-end,
+    shortcut: col-end,
+    values: (
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      6: 6,
+      7: 7,
+      8: 8,
+      9: 9,
+      10: 10,
+      11: 11,
+      12: 12,
+      13: 13,
+      auto: auto,
+      full: -1
+    )
+  ),
+  "grid-row-start": (
+    property: grid-row-start,
+    shortcut: row-start,
+    values: (
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      6: 6,
+      7: 7,
+      auto: auto
+    )
+  ),
+  "grid-row-end": (
+    property: grid-row-end,
+    shortcut: row-end,
+    values: (
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      6: 6,
+      7: 7,
+      auto: auto,
+      full: -1
+    )
+  )
+);
+
+@each $key, $utility in $grid-span-map {
+  @include mix.generate-utilities($utility)
+}
+
+// Additional grid placement utilities
+$grid-placement-map: (
+  "grid-area": (
+    property: grid-area,
+    shortcut: area,
+    values: (
+      auto: auto,
+      span-1: span 1,
+      span-2: span 2,
+      span-3: span 3,
+      span-4: span 4,
+      span-5: span 5,
+      span-6: span 6
+    )
+  ),
+  "place-items": (
+    property: place-items,
+    shortcut: place-items,
+    values: (
+      start: start,
+      center: center,
+      end: end,
+      stretch: stretch
+    )
+  ),
+  "place-content": (
+    property: place-content,
+    shortcut: place-content,
+    values: (
+      start: start,
+      center: center,
+      end: end,
+      stretch: stretch,
+      space-around: space-around,
+      space-between: space-between,
+      space-evenly: space-evenly
+    )
+  ),
+  "place-self": (
+    property: place-self,
+    shortcut: place-self,
+    values: (
+      auto: auto,
+      start: start,
+      end: end,
+      center: center,
+      stretch: stretch
+    )
+  )
+);
+
+@each $key, $utility in $grid-placement-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_letter-spacing.scss

@@ -0,0 +1,22 @@
+@use "mixins" as mix;
+
+// Letter-spacing (tracking) utilities map
+// Generates .fx-tracking-{tighter,tight,normal,wide,wider,widest}
+$letter-spacing-map: (
+  "letter-spacing": (
+    property: letter-spacing,
+    shortcut: tracking,
+    values: (
+      tighter: -0.05em,
+      tight: -0.025em,
+      normal: 0,
+      wide: 0.025em,
+      wider: 0.05em,
+      widest: 0.1em
+    )
+  ),
+);
+
+@each $key, $utility in $letter-spacing-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_min-max-sizing.scss

@@ -0,0 +1,57 @@
+@use "mixins" as mix;
+
+// Min/max sizing utilities map
+// Generates .fx-min-w-*, .fx-max-w-*, .fx-min-h-*, .fx-max-h-*
+// The rem scale is shared by the max-* families (3xs..lg); note 2xs = 10rem (~160px).
+$min-max-sizing-map: (
+  "min-width": (
+    property: min-width,
+    shortcut: min-w,
+    values: (
+      0: 0,
+      full: 100%
+    )
+  ),
+  "min-height": (
+    property: min-height,
+    shortcut: min-h,
+    values: (
+      0: 0,
+      full: 100%
+    )
+  ),
+  "max-width": (
+    property: max-width,
+    shortcut: max-w,
+    values: (
+      0: 0,
+      none: none,
+      "3xs": 8rem,
+      "2xs": 10rem,
+      "xs": 12rem,
+      "sm": 16rem,
+      "md": 24rem,
+      "lg": 32rem,
+      full: 100%
+    )
+  ),
+  "max-height": (
+    property: max-height,
+    shortcut: max-h,
+    values: (
+      0: 0,
+      none: none,
+      "3xs": 8rem,
+      "2xs": 10rem,
+      "xs": 12rem,
+      "sm": 16rem,
+      "md": 24rem,
+      "lg": 32rem,
+      full: 100%
+    )
+  ),
+);
+
+@each $key, $utility in $min-max-sizing-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_opacity.scss

@@ -0,0 +1,30 @@
+@use "mixins" as mix;
+
+// Opacity utilities map
+// Generates .fx-opacity-{0..100} for opacity 0.0 to 1.0
+$opacity-map: (
+  "opacity": (
+    property: opacity,
+    shortcut: opacity,
+    values: (
+      0: 0,
+      5: 0.05,
+      10: 0.1,
+      20: 0.2,
+      25: 0.25,
+      30: 0.3,
+      40: 0.4,
+      50: 0.5,
+      60: 0.6,
+      70: 0.7,
+      75: 0.75,
+      80: 0.8,
+      90: 0.9,
+      100: 1
+    )
+  ),
+);
+
+@each $key, $utility in $opacity-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_text-transform.scss

@@ -0,0 +1,22 @@
+@use "mixins" as mix;
+
+// Text-transform utilities map
+// Uses an empty shortcut so selectors are bare: .fx-uppercase, .fx-lowercase,
+// .fx-capitalize, .fx-normal-case. (The legacy .fx-f-capitalize in _fx-font.scss
+// is intentionally left untouched.)
+$text-transform-map: (
+  "text-transform": (
+    property: text-transform,
+    shortcut: "",
+    values: (
+      uppercase: uppercase,
+      lowercase: lowercase,
+      capitalize: capitalize,
+      normal-case: none
+    )
+  ),
+);
+
+@each $key, $utility in $text-transform-map {
+  @include mix.generate-utilities($utility)
+}

package/scss/_typography.scss

@@ -1,5 +1,7 @@
 @use 'sass:math';
 @use "sass:map";
+@use "sass:list";
+@use "sass:meta";
 
 $font-weight-map: (
   font-thin: 100,
@@ -13,88 +15,124 @@ $font-weight-map: (
   font-black: 900
 ) !default;
 
-
 @each $key, $value in $font-weight-map {
   .fx-#{$key} {
     font-weight: #{$value} !important;
   }
 }
 
+// Define typography scale range - users can override these values
+// This should match the positiveSteps and negativeSteps used in utopia
+$positive-steps: 6 !default;  // Number of positive steps (should match utopia positiveSteps)
+$negative-steps: 4 !default;  // Number of negative steps (should match utopia negativeSteps)
+
+// Create a map of typography variables - users can override this to match their utopia prefix
+// To customize, users can define their own $typography-vars map before importing this file
+// Example:
+// $typography-vars: (
+//   1: var(--step-typography-1),
+//   2: var(--step-typography-2),
+//   // ... etc up to positiveSteps and negativeSteps
+// ) !default;
+
+// Default map with the most common range of steps
+$typography-vars: (
+  0: var(--fx-typography-0),
+  1: var(--fx-typography-1),
+  2: var(--fx-typography-2),
+  3: var(--fx-typography-3),
+  4: var(--fx-typography-4),
+  5: var(--fx-typography-5),
+  6: var(--fx-typography-6),
+  7: var(--fx-typography-7),
+  8: var(--fx-typography-8),
+  -1: var(--fx-typography--1),
+  -2: var(--fx-typography--2),
+  -3: var(--fx-typography--3),
+  -4: var(--fx-typography--4),
+  -5: var(--fx-typography--5),
+  -6: var(--fx-typography--6),
+  -7: var(--fx-typography--7),
+  -8: var(--fx-typography--8)
+) !default;
 
-@function project($min, $max) {
-  $r_min: 400px;
-  $r_max: 1000px;
-
-  $m: calc(($max - $min)/($r_max - $r_min) * 100);
-  @return clamp($min, min(#{$m}vw, #{$m}vh), $max);
-}
-
-// TODO: Check the line-height for headlines and subtitles
-.fx-headline-1 {
-  font-size: var(--fx-typography-6);
-  /* font-size: project(60px, 112px); */
-  font-weight: map.get($font-weight-map, font-semibold);
-  line-height: initial;
-}
-
-.fx-headline-2 {
-  font-size: var(--fx-typography-5);
-  /* font-size: project(40px, 84px); */
-  font-weight: map.get($font-weight-map, font-medium);
-  line-height: initial;
-}
-
-.fx-headline-3 {
-  font-size: var(--fx-typography-4);
-  /* font-size: project(30px, 64px); */
-  font-weight: map.get($font-weight-map, font-semibold);
-  line-height: initial;
+// Function to get the appropriate CSS variable name from the map
+// If the exact index isn't in the map, fall back to default naming
+@function get-typography-var($step) {
+  @if map.has-key($typography-vars, $step) {
+    @return map.get($typography-vars, $step);
+  } @else {
+    // Fallback to dynamically generated variable name if not in map
+    @return var(--fx-typography-#{$step});
+  }
 }
 
-.fx-headline-4 {
-  font-size: var(--fx-typography-3);
-  font-weight: map.get($font-weight-map, font-semibold);
-  line-height: initial;
+// Generate font size classes dynamically based on the typography scale
+@for $i from $positive-steps * -1 through $positive-steps {
+  @if $i != 0 {
+    .fx-text-#{$i} {
+      font-size: get-typography-var($i);
+    }
+  } @else {
+    .fx-text-0 {
+      font-size: get-typography-var(0);
+    }
+  }
 }
 
-.fx-headline-5 {
-  font-size: var(--fx-typography-2);
-  font-weight: map.get($font-weight-map, font-normal);
-  line-height: initial;
+// Define specific semantic typography classes
+// Headline classes - dynamically generated based on positive steps
+@for $i from 1 through $positive-steps {
+  .fx-headline-#{$i} {
+    font-size: get-typography-var($i);
+    font-weight: if($i <= 3, map.get($font-weight-map, font-semibold), map.get($font-weight-map, font-medium));
+    line-height: initial;
+  }
 }
 
+// Body and other semantic classes
 .fx-title {
-  font-size: var(--fx-typography-1);
+  font-size: get-typography-var(1);
   font-weight: map.get($font-weight-map, font-medium);
-  line-height: calc(var(--fx-typography-1) + 2px);
+  line-height: calc(get-typography-var(1) + var(--fx-xs));
 }
 
 .fx-subtitle {
-  font-size: var(--fx-typography-0);
+  font-size: get-typography-var(0);
   font-weight: map.get($font-weight-map, font-normal);
-  line-height: calc(var(--fx-typography-0) + 2px);
+  line-height: calc(get-typography-var(0) + var(--fx-xs));
 }
 
-.fx-body-1 {
-  font-size: var(--fx-typography--1);
-  font-weight: map.get($font-weight-map, font-normal);
-  line-height: calc(var(--fx-typography--1) + 2px);
+@for $i from 1 through $negative-steps {
+  .fx-body-#{$i} {
+    font-size: get-typography-var(-$i);
+    font-weight: if($i == 1, map.get($font-weight-map, font-normal), map.get($font-weight-map, font-light));
+    line-height: calc(get-typography-var(-$i) + var(--fx-xs));
+  }
 }
 
-.fx-body-2 {
-  font-size: var(--fx-typography--2);
-  font-weight: map.get($font-weight-map, font-light);
-  line-height: calc(var(--fx-typography--2) + 2px);
+@for $i from 1 through $negative-steps {
+  $caption-index: $i - 1;
+  @if $caption-index == 0 {
+    .fx-caption {
+      font-size: get-typography-var(-$i);
+      font-weight: map.get($font-weight-map, font-normal);
+      line-height: initial;
+    }
+  } @else if $caption-index > 0 {
+    .fx-caption-#{$caption-index} {
+      font-size: get-typography-var(-$i);
+      font-weight: map.get($font-weight-map, font-normal);
+      line-height: initial;
+    }
   }
-
-.fx-caption {
-  font-size: var(--fx-typography--3);
-  font-weight: map.get($font-weight-map, font-normal);
-  line-height: initial;
 }
 
 .fx-overline {
-  font-size: var(--fx-typography--4);
+  font-size: get-typography-var(-4);
   font-weight: map.get($font-weight-map, font-light);
   line-height: initial;
 }
+
+// Additional utility: helper function for responsive typography if needed
+// The responsive classes will be generated by the existing mixins system

package/scss/main.scss

@@ -0,0 +1,22 @@
+// Variables and Mixins
+@import 'variables';
+@import 'mixins';
+
+// Layout Utilities
+@import 'display';
+@import 'flex';
+@import 'grid'; // Added grid utilities
+@import 'sizing';
+@import 'min-max-sizing';
+@import 'spacing';
+@import 'spacing-v2';
+
+// Component Utilities
+@import 'border-radius';
+@import 'typography';
+@import 'fx-font';
+@import 'fx-flex';
+@import 'opacity';
+@import 'text-transform';
+@import 'letter-spacing';
+@import 'helpers';