@birdycom/omniacss 0.0.0-stage → 0.11.0

package/scss/utilities/_scrollbar.scss

@@ -0,0 +1,49 @@
+// SCSS Document
+// File: src/scss/utilities/_scrollbar.scss
+// Description: Scrollbar utilities — width, gutter and color (CSS Scrollbars Styling Level 1).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .scrollbar-* classes for scrollbar-width, scrollbar-gutter and scrollbar-color.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+// Note: .scrollbar-thumb-* and .scrollbar-track-* set custom properties; .scrollbar-color applies them.
+// Map: scrollbar-width -> scrollbar-gutter -> scrollbar-color -> .scrollbar-omnia (themed OmniaCSS scrollbar)
+
+/* Scrollbar width */
+.scrollbar-auto { scrollbar-width: auto; }
+.scrollbar-thin { scrollbar-width: thin; }
+.scrollbar-none { scrollbar-width: none; }
+
+/* Scrollbar gutter — reserve space so content does not jump when a scrollbar appears */
+.scrollbar-gutter-auto { scrollbar-gutter: auto; }
+.scrollbar-gutter-stable { scrollbar-gutter: stable; }
+.scrollbar-gutter-both { scrollbar-gutter: stable both-edges; }
+
+/* Scrollbar color */
+.scrollbar-color-auto { scrollbar-color: auto; }
+.scrollbar-color {
+  scrollbar-color: var(--oc-scrollbar-thumb, currentcolor) var(--oc-scrollbar-track, transparent);
+}
+.scrollbar-thumb-current { --oc-scrollbar-thumb: currentcolor; }
+.scrollbar-thumb-gray { --oc-scrollbar-thumb: var(--color-gray-50); }
+.scrollbar-thumb-blue { --oc-scrollbar-thumb: var(--color-vividblue-80); }
+.scrollbar-thumb-cyan { --oc-scrollbar-thumb: var(--color-skycyan-80); }
+.scrollbar-thumb-purple { --oc-scrollbar-thumb: var(--color-purple-20); }
+.scrollbar-track-transparent { --oc-scrollbar-track: transparent; }
+.scrollbar-track-gray { --oc-scrollbar-track: var(--color-silver-2); }
+
+/* OmniaCSS scrollbar: thin, Omnia-blue thumb on a transparent track, follows light/dark.
+   scrollbar-color is inherited, so one class on <html> themes every scroll area of the page. */
+.scrollbar-omnia,
+.scrollbar-omnia * {
+  scrollbar-width: thin;
+}
+.scrollbar-omnia {
+  --oc-scrollbar-thumb: light-dark(oklch(from var(--color-vividblue-95) l c h / 0.45), oklch(from var(--color-vividblue-60) l c h / 0.45));
+  --oc-scrollbar-track: transparent;
+  scrollbar-color: var(--oc-scrollbar-thumb) var(--oc-scrollbar-track);
+}
+.scrollbar-omnia:hover {
+  --oc-scrollbar-thumb: light-dark(var(--color-vividblue-95), var(--color-vividblue-60));
+}

package/scss/utilities/_shadow_tokens.scss

@@ -0,0 +1,21 @@
+// File: src/scss/utilities/_shadow_tokens.scss
+// Shared light-dark() aware shadow values (Omnia tokens only). Emits no CSS itself.
+// Used by .shadow-* (_effects_advanced.scss), state variants (_state_variants.scss) and dark: utilities.
+@use "sass:string";
+$oc-shadow-c: string.unquote("var(--oc-shadow-color, var(--color-black-50))");
+@function oc-sh($l, $d) {
+  @return string.unquote("light-dark(oklch(from #{$oc-shadow-c} l c h / #{$l}), oklch(from #{$oc-shadow-c} l c h / #{$d}))");
+}
+$oc-shadow-edge: string.unquote(", 0 0 0 1px light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.2))");
+$oc-shadow-edge-hi: string.unquote(", 0 0 0 1px light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.22)), inset 0 1px 0 0 light-dark(transparent, oklch(from var(--color-white-50) l c h / 0.14))");
+$oc-shadow-sm: 0 1px 2px 0 oc-sh(0.08, 0.6) + $oc-shadow-edge;
+$oc-shadow-md: 0 4px 6px -1px oc-sh(0.15, 0.7), 0 2px 4px -2px oc-sh(0.12, 0.6) + $oc-shadow-edge;
+$oc-shadow-lg: 0 10px 15px -3px oc-sh(0.18, 0.75), 0 4px 6px -4px oc-sh(0.14, 0.65) + $oc-shadow-edge-hi;
+$oc-shadow-xl: 0 20px 25px -5px oc-sh(0.22, 0.8), 0 8px 10px -6px oc-sh(0.16, 0.7) + $oc-shadow-edge-hi;
+// Dark-only variants (for .dark: utilities, where color-scheme is not guaranteed to be dark)
+@function oc-shd($d) { @return string.unquote("oklch(from #{$oc-shadow-c} l c h / #{$d})"); }
+$oc-dark-edge: string.unquote(", 0 0 0 1px oklch(from var(--color-white-50) l c h / 0.2)");
+$oc-dark-edge-hi: string.unquote(", 0 0 0 1px oklch(from var(--color-white-50) l c h / 0.22), inset 0 1px 0 0 oklch(from var(--color-white-50) l c h / 0.14)");
+$oc-dark-shadow-sm: 0 1px 2px 0 oc-shd(0.6) + $oc-dark-edge;
+$oc-dark-shadow-md: 0 4px 6px -1px oc-shd(0.7), 0 2px 4px -2px oc-shd(0.6) + $oc-dark-edge;
+$oc-dark-shadow-lg: 0 10px 15px -3px oc-shd(0.75), 0 4px 6px -4px oc-shd(0.65) + $oc-dark-edge-hi;

package/scss/utilities/_shapes.scss

@@ -0,0 +1,72 @@
+// SCSS Document
+// File: src/scss/utilities/_shapes.scss
+// Description: clip-path, shape-outside and shape-margin utilities (CSS Shapes / CSS Masking).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .clip-* classes (geometric clip paths) and .shape-* classes (text wrap around floats).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
+// Note: shape-outside only has effect on floated elements (e.g. use with .float-left).
+// Map: clip-path basic shapes -> polygons -> shape() -> clip border -> shape-outside -> shape-margin
+
+/* Clip path — basic shapes */
+.clip-none { clip-path: none; }
+.clip-circle { clip-path: circle(50%); }
+.clip-ellipse { clip-path: ellipse(50% 40%); }
+.clip-inset-4 { clip-path: inset(4px); }
+.clip-inset-8 { clip-path: inset(8px round 8px); }
+
+/* Clip path — polygons */
+.clip-polygon-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
+.clip-polygon-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
+.clip-polygon-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
+.clip-polygon-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
+.clip-polygon-arrow-right { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }
+.clip-polygon-chevron { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
+
+/* Clip path — shape() function (CSS Shapes Level 2, responsive curves) */
+.clip-shape-wave {
+  clip-path: shape(from 0% 0%, line to 100% 0%, line to 100% 85%, curve to 0% 85% with 50% 115%, close);
+}
+
+/* Clip path — reference box */
+.clip-border-box { clip-path: border-box; }
+.clip-padding-box { clip-path: padding-box; }
+.clip-content-box { clip-path: content-box; }
+
+/* Clip border — a border that follows the clip-path of the child element.
+   A normal border/outline is clipped away by clip-path, so put .clip-border-* on a wrapper.
+   Color = currentcolor of the wrapper (e.g. .text-dodgerblue-20); the clipped child needs an opaque background. */
+.clip-border,
+.clip-border-2,
+.clip-border-4 {
+  --oc-clip-border-color: currentcolor;
+}
+.clip-border {
+  filter: drop-shadow(1px 0 0 var(--oc-clip-border-color)) drop-shadow(-1px 0 0 var(--oc-clip-border-color))
+    drop-shadow(0 1px 0 var(--oc-clip-border-color)) drop-shadow(0 -1px 0 var(--oc-clip-border-color));
+}
+.clip-border-2 {
+  filter: drop-shadow(2px 0 0 var(--oc-clip-border-color)) drop-shadow(-2px 0 0 var(--oc-clip-border-color))
+    drop-shadow(0 2px 0 var(--oc-clip-border-color)) drop-shadow(0 -2px 0 var(--oc-clip-border-color));
+}
+.clip-border-4 {
+  filter: drop-shadow(4px 0 0 var(--oc-clip-border-color)) drop-shadow(-4px 0 0 var(--oc-clip-border-color))
+    drop-shadow(0 4px 0 var(--oc-clip-border-color)) drop-shadow(0 -4px 0 var(--oc-clip-border-color));
+}
+
+/* Shape outside — wrap inline content around a float */
+.shape-none { shape-outside: none; }
+.shape-circle { shape-outside: circle(50%); }
+.shape-ellipse { shape-outside: ellipse(50% 40%); }
+.shape-margin-box { shape-outside: margin-box; }
+.shape-border-box { shape-outside: border-box; }
+.shape-padding-box { shape-outside: padding-box; }
+.shape-content-box { shape-outside: content-box; }
+
+/* Shape margin */
+.shape-m-0 { shape-margin: 0; }
+.shape-m-1 { shape-margin: 0.25rem; }
+.shape-m-2 { shape-margin: 0.5rem; }
+.shape-m-4 { shape-margin: 1rem; }

package/scss/utilities/_sizing.scss

@@ -0,0 +1,458 @@
+// SCSS Document 
+// File: src/utilities/_sizing.scss
+// Description: Spacing properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: width, min-width, max-width
+// Properties: height, min-height, max-height
+// Values: value in rem, auto, percent, full, screen, min, max, fit, none, revert
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+// helpers
+
+// loop true the $sizes list and make the new css-elements 
+// $size-number is the first set from the list-item ( "size-1" ), the text before the :-sign
+// $size-value is the second set from the list item ( $base-size * 0.125 ), the text after the :-sign
+
+/* The Width property */
+
+///
+/// The width property specifies the width of a element.
+/// @group Width
+/// @name width
+/// @link src/scss/utilities/_sizing.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements but non-replaced inline elements, table rows, and row groups
+///
+/// 
+/// @example scss - width class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   $run: 0;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///   $result: omnia-generate-sizing($min-group, 'width', false, false);
+///   $min-group: map.get($result,1);
+///   $run: map.get($result,6);
+///   .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+///     #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///     }
+///   };
+/// @example html - use the width class
+///   <div class="container absolute w-23  bg-red-10">
+///     <h2>Voorbeeld set width with a lenght of 23rem</h2>
+///   </div>
+//
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+$run: 0;
+@while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'width', true, $run);
+
+  $min-group: map.get($result,1);
+  $run: map.get($result,6);
+  
+  .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+
+     #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+      
+  }
+};
+
+///
+/// The width percent property specifies the width of a element.
+/// @group Width
+/// @name width percent
+/// @link src/scss/utilities/_sizing.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements but non-replaced inline elements, table rows, and row groups
+///
+/// 
+/// @example scss - width percent class
+///  @for $t from 2 through 6 {
+///    @for $i from 1 through $t {
+///      @if $i != $t { // this step is necessary because we only need one 100% the w-full
+///        .w-perc {
+///          &-#{$i}\/#{$t} {
+///            width: calc($DEFAULT-BASE-SIZE-PERCENT / $t * $i); 
+///          }
+///        }
+///      }
+///    }
+///  }
+/// @example html - use the width class
+///   <div class="container absolute w-perc-1/3  bg-red-10">
+///     <h2>Voorbeeld set width with a lenght of 33.333333%</h2>
+///   </div>
+//
+// width with percent
+@for $t from 2 through 6 {
+  // divide the width in half (100% / $t)
+  @for $i from 1 through $t {
+
+    @if $i != $t { // this step is necessary because we only need one 100% the w-full
+
+      .w-perc {
+      
+        &-#{$i}\/#{$t} {
+          width: calc($DEFAULT-BASE-SIZE-PERCENT / $t * $i); 
+        }
+      }
+    }
+  }
+}
+
+// extra width properties 
+
+  // width full
+  .w-full {
+
+    width: $DEFAULT-BASE-SIZE-PERCENT;
+
+    }  
+
+  // width screen
+  .w-screen {
+
+    width: 100vw;
+
+    }    
+
+  // width dynamic viewport (modern mobile-safe viewport units)
+  .w-dvw {
+
+    width: 100dvw;
+
+    }
+
+  // width min-content
+  .w-min {
+
+    width: min-content;
+
+    }    
+
+  // width max-content
+  .w-max {
+
+    width: max-content;
+
+    }   
+
+  // width fit-content
+  .w-fit {
+
+    width: fit-content;
+
+    }
+
+  // width stretch (fill the containing block, margins included)
+  .w-stretch {
+
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+
+    }
+
+  // width none
+  .w-none {
+
+    width: unset;
+
+    }   
+
+  // width revert
+  .w-rev {
+
+    width: revert;
+
+    }  
+
+/* The Min-width property */
+/* Constrains the minimum width of an element. */
+
+.min-w-0 { min-width: 0; }
+.min-w-full { min-width: 100%; }
+.min-w-min { min-width: min-content; }
+.min-w-max { min-width: max-content; }
+.min-w-fit { min-width: fit-content; }
+.min-w-screen { min-width: 100vw; }
+.min-w-dvw { min-width: 100dvw; }
+.min-w-px { min-width: 1px; }
+.min-w-4 { min-width: 1rem; }
+.min-w-8 { min-width: 2rem; }
+.min-w-12 { min-width: 3rem; }
+.min-w-16 { min-width: 4rem; }
+.min-w-20 { min-width: 5rem; }
+.min-w-24 { min-width: 6rem; }
+.min-w-32 { min-width: 8rem; }
+.min-w-40 { min-width: 10rem; }
+.min-w-48 { min-width: 12rem; }
+.min-w-56 { min-width: 14rem; }
+.min-w-64 { min-width: 16rem; }
+.min-w-72 { min-width: 18rem; }
+.min-w-80 { min-width: 20rem; }
+.min-w-96 { min-width: 24rem; }
+
+/* The Max-width property */
+/* Constrains the maximum width of an element. */
+
+.max-w-0 { max-width: 0; }
+.max-w-none { max-width: none; }
+.max-w-full { max-width: 100%; }
+.max-w-min { max-width: min-content; }
+.max-w-max { max-width: max-content; }
+.max-w-fit { max-width: fit-content; }
+.max-w-screen { max-width: 100vw; }
+.max-w-dvw { max-width: 100dvw; }
+.max-w-px { max-width: 1px; }
+.max-w-xs { max-width: 20rem; }   /* 320px */
+.max-w-sm { max-width: 24rem; }   /* 384px */
+.max-w-md { max-width: 28rem; }   /* 448px */
+.max-w-lg { max-width: 32rem; }   /* 512px */
+.max-w-xl { max-width: 36rem; }   /* 576px */
+.max-w-2xl { max-width: 42rem; }  /* 672px */
+.max-w-3xl { max-width: 48rem; }  /* 768px */
+.max-w-4xl { max-width: 56rem; }  /* 896px */
+.max-w-5xl { max-width: 64rem; }  /* 1024px */
+.max-w-6xl { max-width: 72rem; }  /* 1152px */
+.max-w-7xl { max-width: 80rem; }  /* 1280px */
+.max-w-prose { max-width: 65ch; } /* Optimal reading width */
+
+/* End Width property */
+    
+/* The Height property */
+
+///
+/// The height property specifies the height of a element.
+/// @group Height
+/// @name height
+/// @link src/scss/utilities/_sizing.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements but non-replaced inline elements, table columns, and column groups
+///
+/// 
+/// @example scss - height class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   $run: 0;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///   $result: omnia-generate-sizing($min-group, 'height', false, false);
+///   $min-group: map.get($result,1);
+///   $run: map.get($result,6);
+///   .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+///     #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///     }
+///   };
+/// @example html - use the height class
+///   <div class="container absolute h-5.7 bg-red-10">
+///     <h2>Voorbeeld set height with a lenght of 5.75rem</h2>
+///   </div>
+//
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+$run: 0;
+@while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'height', true, $run);
+
+  $min-group: map.get($result,1); 
+  $run: map.get($result,6);
+   
+  .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+
+     #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+      
+  }
+};
+
+///
+/// The height percent property specifies the height of a element.
+/// @group Height
+/// @name height percent
+/// @link src/scss/utilities/_sizing.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements but non-replaced inline elements, table rows, and row groups
+///
+/// 
+/// @example scss - width percent class
+///  @for $t from 2 through 6 {
+///    @for $i from 1 through $t {
+///      @if $i != $t { // this step is necessary because we only need one 100% the h-full
+///        .h-perc {
+///          &-#{$i}\/#{$t} {
+///            height: calc($DEFAULT-BASE-SIZE-PERCENT / $t * $i); 
+///          }
+///        }
+///      }
+///    }
+///  }
+/// @example html - use the height class
+///   <div class="container absolute h-perc-1/3  bg-red-10">
+///     <h2>Voorbeeld set height with a lenght of 33.333333%</h2>
+///   </div>
+//
+// height with percent
+@for $t from 2 through 6 {
+  // divide the height in half (100% / 2)
+  @for $i from 1 through $t {
+
+    @if $i != $t { // this step is necessary because we only need one 100% the h-full
+
+      .h-perc {
+      
+        &-#{$i}\/#{$t} {
+          height: calc($DEFAULT-BASE-SIZE-PERCENT / $t * $i); 
+        }
+      }
+    }
+  }
+}
+
+// extra height properties 
+
+  // height full
+  .h-full {
+
+    height: $DEFAULT-BASE-SIZE-PERCENT;
+
+    }  
+
+  // height screen
+  .h-screen {
+
+    height: 100vh;
+
+    }    
+
+  // height dynamic viewport (modern mobile-safe viewport units)
+  .h-dvh {
+
+    height: 100dvh;
+
+    }
+
+  // height min-content
+  .h-min {
+
+    height: min-content;
+
+    }    
+
+  // height max-content
+  .h-max {
+
+    height: max-content;
+
+    }   
+
+  // height fit-content
+  .h-fit {
+
+    height: fit-content;
+
+    }
+
+  // height stretch (fill the containing block, margins included)
+  .h-stretch {
+
+    height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
+
+    }
+
+  // height none
+  .h-none {
+
+    height: unset;
+
+    }   
+
+  // height revert
+  .h-rev {
+
+    height: revert;
+
+    }        
+
+    
+/* The Min-height property */
+/* Constrains the minimum height of an element. */
+
+.min-h-0 { min-height: 0; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.min-h-dvh { min-height: 100dvh; }
+.min-h-min { min-height: min-content; }
+.min-h-max { min-height: max-content; }
+.min-h-fit { min-height: fit-content; }
+.min-h-px { min-height: 1px; }
+.min-h-4 { min-height: 1rem; }
+.min-h-8 { min-height: 2rem; }
+.min-h-12 { min-height: 3rem; }
+.min-h-16 { min-height: 4rem; }
+.min-h-20 { min-height: 5rem; }
+.min-h-24 { min-height: 6rem; }
+.min-h-32 { min-height: 8rem; }
+.min-h-40 { min-height: 10rem; }
+.min-h-48 { min-height: 12rem; }
+.min-h-56 { min-height: 14rem; }
+.min-h-64 { min-height: 16rem; }
+.min-h-80 { min-height: 20rem; }
+.min-h-96 { min-height: 24rem; }
+
+/* The Max-height property */
+/* Constrains the maximum height of an element. */
+
+.max-h-0 { max-height: 0; }
+.max-h-none { max-height: none; }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+.max-h-dvh { max-height: 100dvh; }
+.max-h-min { max-height: min-content; }
+.max-h-max { max-height: max-content; }
+.max-h-fit { max-height: fit-content; }
+.max-h-px { max-height: 1px; }
+.max-h-4 { max-height: 1rem; }
+.max-h-8 { max-height: 2rem; }
+.max-h-12 { max-height: 3rem; }
+.max-h-16 { max-height: 4rem; }
+.max-h-20 { max-height: 5rem; }
+.max-h-24 { max-height: 6rem; }
+.max-h-32 { max-height: 8rem; }
+.max-h-40 { max-height: 10rem; }
+.max-h-48 { max-height: 12rem; }
+.max-h-56 { max-height: 14rem; }
+.max-h-64 { max-height: 16rem; }
+.max-h-80 { max-height: 20rem; }
+.max-h-96 { max-height: 24rem; }
+
+/* End Height property */
+
+/* ===================================================================
+   ICON SIZE (width + height same value)
+   Use with Iconify: class="iconify size-5" instead of data-width/data-height.
+   Scale: size-N = N * 0.25rem (e.g. size-4 = 1rem, size-5 = 1.25rem, size-8 = 2rem).
+   =================================================================== */
+@for $i from 1 through 24 {
+  .size-#{$i} {
+    width: #{$i * 0.25}rem;
+    height: #{$i * 0.25}rem;
+  }
+}
+/* So that width/height apply on inline icon elements (e.g. Iconify span) */
+.iconify[class*="size-"] {
+  display: inline-flex;
+  vertical-align: middle;
+}

package/scss/utilities/_sizing_logical.scss

@@ -0,0 +1,99 @@
+// SCSS Document
+// File: src/scss/utilities/_sizing_logical.scss
+// Description: Size keywords (3xs … 7xl, line-height units) and the logical size scale (inline-size, block-size,
+//              min/max in both axes) that complete the width/height families of _sizing.scss and _layout_extras.scss.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .w-3xs … .w-7xl, .min-w-3xs …, .max-w-3xs/2xs, .{w,h,size,min-w,min-h,max-w,max-h}-lh/rlh,
+//          .inline-size-{n}, .block-size-{n}, .min-inline-size-*, .max-inline-size-*, .min-block-size-*, .max-block-size-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+// Note: Same quarter-rem scale as .size-{n} (size-4 = 1rem), so logical and physical icon/box sizes line up.
+@use "sass:string";
+
+// Map: size keywords -> line-height units -> logical scale -> logical min/max
+
+$_container-sizes: (
+  '3xs': 16rem, '2xs': 18rem, 'xs': 20rem, 'sm': 24rem, 'md': 28rem, 'lg': 32rem, 'xl': 36rem,
+  '2xl': 42rem, '3xl': 48rem, '4xl': 56rem, '5xl': 64rem, '6xl': 72rem, '7xl': 80rem
+);
+
+/* Size keywords — container-like widths (same values as .max-w-xs … .max-w-7xl) */
+@each $key, $value in $_container-sizes {
+  .w-#{$key} { width: $value; }
+  .min-w-#{$key} { min-width: $value; }
+  .inline-size-#{$key} { inline-size: $value; }
+  .min-inline-size-#{$key} { min-inline-size: $value; }
+  .max-inline-size-#{$key} { max-inline-size: $value; }
+}
+.max-w-3xs { max-width: 16rem; }
+.max-w-2xs { max-width: 18rem; }
+
+/* Line-height units — size a box in lines of text (lh) or root lines (rlh) */
+@each $unit in (lh, rlh) {
+  $one: string.unquote("1#{$unit}"); // "1#{$unit}" without quotes would compile to "1 lh"
+  .w-#{$unit} { width: $one; }
+  .h-#{$unit} { height: $one; }
+  .size-#{$unit} { width: $one; height: $one; }
+  .min-w-#{$unit} { min-width: $one; }
+  .min-h-#{$unit} { min-height: $one; }
+  .max-w-#{$unit} { max-width: $one; }
+  .max-h-#{$unit} { max-height: $one; }
+  .inline-size-#{$unit} { inline-size: $one; }
+  .block-size-#{$unit} { block-size: $one; }
+}
+/* Several lines: .h-3lh (exactly three lines), .max-h-5lh (clip after five lines), .min-h-2lh (reserve two lines) */
+@each $n in (2, 3, 4, 5, 6, 8, 10) {
+  .h-#{$n}lh { height: #{$n}lh; }
+  .min-h-#{$n}lh { min-height: #{$n}lh; }
+  .max-h-#{$n}lh { max-height: #{$n}lh; }
+  .block-size-#{$n}lh { block-size: #{$n}lh; }
+}
+
+/* Small / large / dynamic viewport units (svh = toolbars shown, lvh = toolbars hidden, dvh = follows them) */
+.h-svh { height: 100svh; }
+.h-lvh { height: 100lvh; }
+.min-h-svh { min-height: 100svh; }
+.min-h-lvh { min-height: 100lvh; }
+.max-h-svh { max-height: 100svh; }
+.max-h-lvh { max-height: 100lvh; }
+.w-svw { width: 100svw; }
+.w-lvw { width: 100lvw; }
+.min-w-dvw { min-width: 100dvw; }
+.max-w-dvw { max-width: 100dvw; }
+
+/* Logical size scale: inline-size-{n} / block-size-{n} (n * 0.25rem) */
+$_logical-scale: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96);
+@each $n in $_logical-scale {
+  $v: #{$n * 0.25}rem;
+  @if $n == 0 { $v: 0; }
+  .inline-size-#{$n} { inline-size: $v; }
+  .block-size-#{$n} { block-size: $v; }
+  .min-inline-size-#{$n} { min-inline-size: $v; }
+  .min-block-size-#{$n} { min-block-size: $v; }
+  .max-inline-size-#{$n} { max-inline-size: $v; }
+  .max-block-size-#{$n} { max-block-size: $v; }
+}
+@each $axis in (inline, block) {
+  .#{$axis}-size-px { #{$axis}-size: 1px; }
+  .min-#{$axis}-size-px { min-#{$axis}-size: 1px; }
+  .max-#{$axis}-size-px { max-#{$axis}-size: 1px; }
+  .#{$axis}-size-screen { #{$axis}-size: 100v#{string.slice($axis, 1, 1)}; }
+  .#{$axis}-size-stretch { #{$axis}-size: stretch; }
+}
+
+/* Logical min/max keywords with the -size spelling (the shorter .min-inline-* names stay available) */
+@each $k, $v in ('full': 100%, 'fit': fit-content, 'min': min-content, 'max': max-content) {
+  .min-inline-size-#{$k} { min-inline-size: $v; }
+  .min-block-size-#{$k} { min-block-size: $v; }
+  @if $k != 'full' {
+    .max-block-size-#{$k} { max-block-size: $v; }
+  }
+}
+.max-block-size-full { max-block-size: 100%; }
+.max-inline-size-none { max-inline-size: none; }
+.max-block-size-none { max-block-size: none; }
+.max-inline-size-fit { max-inline-size: fit-content; }
+.max-inline-size-min { max-inline-size: min-content; }
+.max-inline-size-max { max-inline-size: max-content; }