@birdycom/omniacss 0.0.0-stage → 0.11.0

package/scss/utilities/_fonts.scss

@@ -0,0 +1,276 @@
+// SCSS Document 
+// File: src/utilities/_fonts.scss
+// Description: fonts properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: fontsize, fontstyle
+// Values: value in rem,
+
+@use '../utilities/' as *;
+
+/* The font family property */
+
+///
+/// The fontfamily property specifies the font style for a text.
+/// @group FontFamily
+/// @name fontfamily
+/// @link src/scss/utilities/_fonts.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// @require $fontfamily
+/// @example scss - fontfamily class
+///   @each  $fontfamily-prop, $fontfamily-value in $fontfamily {
+///     .#{$fontfamily-prop} {
+///       font-family: $fontfamily-value;
+///     }
+///   }
+/// @example html - use the fontfamily class
+///   <div class="container">
+///     <p class="font-normal font-1">fontfamily: "Roboto Flex", sans-serif</p>
+///     <p class="font-roboto font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: "Source Sans Pro", sans-serif</p>
+///     <p class="font-source font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: Times, "Times New Roman", Georgia, serif</p>
+///     <p class="font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: Verdana, Arial, Helvetica, sans-serif</p>
+///     <p class="font-sansserif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: "Lucida Console", Courier, monospace</p>
+///     <p class="font-monospace font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: cursive</p>
+///     <p class="font-cursive font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: fantasy</p>
+///     <p class="font-fantasy font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontfamily: Noto emoji</p>
+///     <p class="font-emoji font-1.5">🥰💀✌️🌴🐢🐐🍄⚽🍻👑📸😬👀🚨🏡🕊️🏆😻🌟🧿🍀🎨🍜</p>
+///     <p class="font-normal font-1">fontfamily: Noto color emoji</p>
+///     <p class="font-coloremoji font-1.5">🥰💀✌️🌴🐢🐐🍄⚽🍻👑📸😬👀🚨🏡🕊️🏆😻🌟🧿🍀🎨🍜</p>
+///     <p class="font-normal font-1">fontfamily: Noto Sans Math</p>
+///     <p class="font-math font-1.5">𝞉𝞩𝟃𞻰⟥⦀⦁ 𝚢𝚣𝚤𝖿𝗀𝗁𝗂 𝑻𝑼𝑽𝗔𝗕𝗖𝗗 ϑϕϰϱϵℊℎ ⊰⊱⊲⊳⊴⊵⫕ 𞹴𞹵𞹶𞹷𞹹𞹺𞹻±</p>
+///     <p class="font-normal font-1">fontfamily: fangsong</p>
+///     <p class="font-fangsong font-1.5">人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは</p>
+///     <p class="font-normal font-1">fontfamily: Noto Sans Egyptian Hieroglyphs</p>
+///     <p class="font-hieroglyphs font-2.5">𓂧𓌅 𓉗𓇯 𓃾𓂝𓏴𓌅𓀠 𓀠𓃻𓏲𓏴𓃾 𓇯𓂋𓃾𓌓 𓂋𓏲𓁶𓁹𓂝𓃾 𓉐𓂝𓇯 𓇯 𓉐𓂝𓏴 𓇯𓂝𓆓𓃾 𓃻𓃾 𓁹𓉐𓇯𓏲𓂝𓏴𓃾 𓌅𓃾 𓃾𓆓𓌓𓂝𓃾 𓇯𓂋𓂝𓌓𓂝 𓏲𓂝𓇯𓃾 𓇯𓁶𓃻𓉐𓌅 𓇯𓏭𓇯𓃻𓃾 𓌓𓁶𓌓𓆓𓂝𓃾</p>
+///   </div>
+@each $fontfamily-prop, $fontfamily-value in $fontfamily {
+
+  // fontfamily
+
+  .#{$fontfamily-prop} {
+
+    font-family: $fontfamily-value;
+
+    }  
+};
+
+.test:before {
+  content: "\13000";
+}
+
+/* The font size property */
+
+///
+/// The fontsize property specifies the height of the fonts.
+/// @group FontSize
+/// @name fontsize
+/// @link src/scss/utilities/_fonts.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// @require $fontsize
+/// @example scss - fontsize class
+///   @each  $fontsize-prop, $fontsize-value in $fontsize {
+///     .#{$fontsize-prop} {
+///       font-size: $fontsize-value;
+///     }
+///   }
+/// @example html - use the fontsize class
+///   <div class="container">
+///     <p class="font-normal font-1">fontsize: 0.625rem - 10px</p>
+///     <p class="font-0.6">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 0.75 - 12px</p>
+///     <p class="font-0.7">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 0.875 - 14px</p>
+///     <p class="font-0.8">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 1rem - 16px</p>
+///     <p class="font-1">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 1.125rem - 18px</p>
+///     <p class="font-1.1">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 1.25rem - 20px</p>
+///     <p class="font-1.2">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 1.5rem - 24px</p>
+///     <p class="font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 1.75rem - 28px</p>
+///     <p class="font-1.7">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 1.875rem - 30px</p>
+///     <p class="font-1.8">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 2rem - 30px</p>
+///     <p class="font-2">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 2.5rem - 40px</p>
+///     <p class="font-2.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 3rem - 48px</p>
+///     <p class="font-3">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 4rem - 64px</p>
+///     <p class="font-4">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 5rem - 80px</p>
+///     <p class="font-5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 6rem - 96px</p>
+///     <p class="font-6">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 7rem - 112px</p>
+///     <p class="font-7">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontsize: 8rem - 128px</p>
+///     <p class="font-8">The quick brown fox jumps over the lazy dog.</p>
+///   </div>
+@each $fontsize-prop, $fontsize-value in $fontsize {
+
+  // fontsize
+
+  .#{$fontsize-prop} {
+
+    font-size: $fontsize-value;
+
+    }  
+};
+/* The font style property */
+
+///
+/// The fontstyle property specifies the font style for a text.
+/// @group FontStyle
+/// @name fontstyle
+/// @link src/scss/utilities/_fonts.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// @require $fontstyle
+/// @example scss - fontstyle class
+///   @each  $fontstyle-prop, $fontstyle-value in $fontstyle {
+///     .#{$fontstyle-prop} {
+///       font-size: $fontstyle-value;
+///     }
+///   }
+/// @example html - use the fontstyle class
+///   <div class="container">
+///     <p class="font-normal font-1">fontstyle: normal</p>
+///     <p class="font-normal font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontstyle: italic</p>
+///     <p class="font-italic font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-normal font-1">fontstyle: oblique</p>
+///     <p class="font-oblique font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///   </div>
+@each $fontstyle-prop, $fontstyle-value in $fontstyle {
+
+  // fontstyle
+
+  .#{$fontstyle-prop} {
+
+    font-style: $fontstyle-value;
+
+    }  
+};
+
+/* The font weight property */
+
+///
+/// The font-weight property sets how thick or thin characters in text should be displayed.
+/// @group FontWeight
+/// @name fontweight
+/// @link src/scss/utilities/_fonts.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// @require $fontweight
+/// @example scss - fontweight class
+///   @each  $fontweight-prop, $fontweight-value in $fontweight {
+///     .#{$fontweight-prop} {
+///       font-weight: $fontweight-value;
+///     }
+///   }
+/// @example html - use the fontweight class
+///   <div class="container">
+///     <p class="font-1">font-thin: 100</p>
+///     <p class="font-thin font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-extralight: 200</p>
+///     <p class="font-extralight font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-light: 300</p>
+///     <p class="font-light font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-normal: 400</p>
+///     <p class="font-normal font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-medium: 500</p>
+///     <p class="font-medium font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-semibold: 600</p>
+///     <p class="font-semibold font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-bold: 700</p>
+///     <p class="font-bold font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-extrabold: 800</p>
+///     <p class="font-extrabold font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-black: 900</p>
+///     <p class="font-black font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///     <p class="font-1">font-extrablack: 1000</p>
+///     <p class="font-extrablack font-serif font-1.5">The quick brown fox jumps over the lazy dog.</p>
+///   </div>
+@each $fontweight-prop, $fontweight-value in $fontweight {
+
+  // fontweight
+
+  .#{$fontweight-prop} {
+
+    font-weight: $fontweight-value;
+
+    }  
+};
+
+/* The font variant numeric property */
+
+///
+/// The font-variant numeric property sets how thick or thin characters in text should be displayed.
+/// @group FontVariantNumeric
+/// @name fontvariantnumeric
+/// @link src/scss/utilities/_fonts.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// @require $fontvariantnumeric
+/// @example scss - fontvariantnumeric class
+///   @each  $fontvariantnumeric-prop, $fontvariantnumeric-value in $fontvariantnumeric {
+///     .#{$fontvariantnumeric-prop} {
+///       font-variant-numeric: $fontvariantnumeric-value;
+///     }
+///   }
+/// @example html - use the fontvariantnumeric class
+///   <div class="container">
+///     <p class="font-1">font-variant-numeric: normal</p>
+///     <p class="font-num-normal font-source font-1.5">123456789</p>
+///     <p class="font-1">font-variant-numeric: ordinal</p>
+///     <p class="font-num-ordinal font-source font-1.5">1st, 2nd, 3rd, 4th, 5th</p>
+///     <p class="font-num-ordinal font-source font-1.5">1st</p>
+///     <p class="font-1">font-variant-numeric: slashed</p>
+///     <p class="font-num-slashed font-source font-1.5">0 100</p>
+///     <p class="font-1">font-variant-numeric: lining</p>
+///     <p class="font-num-lining font-source font-1.5">1234567890</p>
+///     <p class="font-1">font-variant-numeric: oldstyle</p>
+///     <p class="font-num-oldstyle font-source font-1.5">1234567890</p>
+///     <p class="font-1">font-variant-numeric: proportional</p>
+///     <p class="font-num-proportional font-source font-1.5">121212</p>
+///     <p class="font-num-proportional font-source font-1.5">909090</p>
+///     <p class="font-1">font-variant-numeric: tabular</p>
+///     <p class="font-num-tabular font-source font-1.5">121212</p>
+///     <p class="font-num-tabular font-source font-1.5">909090</p>
+///     <p class="font-1">font-variant-numeric: diagonal</p>
+///     <p class="font-num-diagonal font-source font-1.5">3/14 2/71 3/14 2/7</p>
+///     <p class="font-1">font-variant-numeric: stacked</p>
+///     <p class="font-num-stacked font-source font-1.5">3/14 2/71 3/14 2/7</p>
+///     <p class="font-1">font-variant-numeric: oldstacked</p>
+///     <p class="font-num-oldstacked font-source font-1.5">3/14 2/71 3/14 2/7</p>
+///   </div>
+@each $fontvariantnumeric-prop, $fontvariantnumeric-value in $fontvariantnumeric {
+
+  // fontvariantnumeric
+
+  .#{$fontvariantnumeric-prop} {
+
+    font-variant-numeric: $fontvariantnumeric-value;
+
+    }  
+};

package/scss/utilities/_gap.scss

@@ -0,0 +1,104 @@
+// SCSS Document 
+// File: src/utilities/_gap.scss
+// Description: CSS gap properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: gap, row-gap, column-gap
+// Values: value in rem
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+/* The Gap property */
+
+///
+/// The position Property
+/// @group Gap
+///
+
+///
+/// The position property specifies the type of positioning method used for an element.
+/// @group Gap
+/// @name gap
+/// @link src/scss/utilities/_gap.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	multi-column elements, flex containers, grid containers
+///
+/// @require $sizesgap
+/// @example scss - gap class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///   $result: omnia-generate-sizing($min-group, 'gap', false, false);
+///     $min-group: map.get($result,1); 
+///     .#{map.get($result,5)}-#{map.get($result,2)} {
+///       #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///     }
+///   .#{map.get($result,5)+'-row'}-#{map.get($result,2)} {
+///       #{'row-' + map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///     }
+///     .#{map.get($result,5)+'-col'}-#{map.get($result,2)} {
+///       #{'column-' + map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///     }  
+///   };
+/// @example html - use gap class
+///   <div class="grid grid-cols-3 gap-col-8 gap-row-4 font-mono text-white text-sm text-center font-bold leading-6 bg-stripes-sky rounded-lg">
+///    <div class="p-4 rounded-lg shadow-lg bg-deepskyblue">01</div>
+///    <div class="p-4 rounded-lg shadow-lg bg-deepskyblue">02</div>
+///    <div class="p-4 rounded-lg shadow-lg bg-deepskyblue">03</div>
+///    <div class="p-4 rounded-lg shadow-lg bg-deepskyblue">04</div>
+///    <div class="p-4 rounded-lg shadow-lg bg-deepskyblue">05</div>
+///    <div class="p-4 rounded-lg shadow-lg bg-deepskyblue">06</div>
+///   </div>
+//
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+@while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'gap', false, false);
+
+  $min-group: map.get($result,1); 
+
+  // margin 
+  .#{map.get($result,5)}-#{map.get($result,2)} {
+
+    #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+      
+  }
+  // gap row (y-as)
+  .#{map.get($result,5)+'-row'}-#{map.get($result,2)} {
+
+    #{'row-' + map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+     
+  }
+  // gap column (x-as)
+  .#{map.get($result,5)+'-col'}-#{map.get($result,2)} {
+
+    #{'column-' + map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+};
+
+/* ===================================================================
+   Short gap aliases
+   gap-x-* = gap-col-*, gap-y-* = gap-row-*
+   =================================================================== */
+$min-group-alias: $DEFAULT-BASE-FIRST-MIN-GROUP;
+@while $min-group-alias <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+  $result: omnia-generate-sizing($min-group-alias, 'gap', false, false);
+  $min-group-alias: map.get($result,1);
+
+  /* gap-x alias for gap-col (column gap) */
+  .gap-x-#{map.get($result,2)} {
+    column-gap: map.get($result,3) + #{map.get($result,4)};
+  }
+  /* gap-y alias for gap-row (row gap) */
+  .gap-y-#{map.get($result,2)} {
+    row-gap: map.get($result,3) + #{map.get($result,4)};
+  }
+}
+
+/* End Gap property */

package/scss/utilities/_gradient_stops.scss

@@ -0,0 +1,48 @@
+// SCSS Document
+// File: src/scss/utilities/_gradient_stops.scss
+// Description: Stop positions for the composable gradients of _gradients.scss, extra gradient angles and anchors,
+//              and gradients in a perceptual color space.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .from-pos-{n}, .via-pos-{n}, .to-pos-{n} (percent), .bg-conic-{deg}, .bg-radial-at-{bl|tr|c},
+//          .bg-radial-{closest|farthest}-{side|corner} and .bg-linear-to-{dir}-{oklch|oklab}.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
+// Note: Position classes set --oc-gradient-{from|via|to}-pos; _gradients.scss reads them inside the stop list,
+//       e.g. class="bg-linear-to-r from-red from-pos-10 via-yellow to-green to-pos-90".
+// Map: stop positions -> conic angles -> radial anchors and sizes -> color-space gradients
+
+$_stop-positions: (0, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100);
+$_gradient-stops: var(--oc-gradient-stops, var(--oc-gradient-from, transparent) var(--oc-gradient-from-pos,), var(--oc-gradient-to, transparent) var(--oc-gradient-to-pos,));
+
+/* Stop positions (percent) */
+@each $n in $_stop-positions {
+  .from-pos-#{$n} { --oc-gradient-from-pos: #{$n}%; }
+  .via-pos-#{$n} { --oc-gradient-via-pos: #{$n}%; }
+  .to-pos-#{$n} { --oc-gradient-to-pos: #{$n}%; }
+}
+
+/* Conic gradient start angles (0, 90 and 180 live in _gradients.scss) */
+@each $deg in (45, 135, 225, 270, 315) {
+  .bg-conic-#{$deg} { background-image: conic-gradient(from #{$deg}deg, #{$_gradient-stops}); }
+}
+
+/* Radial gradient anchors and sizes */
+.bg-radial-at-c { background-image: radial-gradient(at center, #{$_gradient-stops}); }
+.bg-radial-at-bl { background-image: radial-gradient(at bottom left, #{$_gradient-stops}); }
+.bg-radial-at-tr { background-image: radial-gradient(at top right, #{$_gradient-stops}); }
+.bg-radial-closest-side { background-image: radial-gradient(closest-side, #{$_gradient-stops}); }
+.bg-radial-closest-corner { background-image: radial-gradient(closest-corner, #{$_gradient-stops}); }
+.bg-radial-farthest-side { background-image: radial-gradient(farthest-side, #{$_gradient-stops}); }
+.bg-radial-farthest-corner { background-image: radial-gradient(farthest-corner, #{$_gradient-stops}); }
+
+/* Linear gradients interpolated in a perceptual color space (smoother mid tones than sRGB) */
+$_directions: ('t': to top, 'tr': to top right, 'r': to right, 'br': to bottom right, 'b': to bottom, 'bl': to bottom left, 'l': to left, 'tl': to top left);
+@each $key, $dir in $_directions {
+  @each $space in (oklch, oklab) {
+    @if not ($key == 'r' and $space == oklch) {
+      .bg-linear-to-#{$key}-#{$space} { background-image: linear-gradient(#{$dir} in #{$space}, #{$_gradient-stops}); }
+    }
+  }
+}

package/scss/utilities/_gradients.scss

@@ -0,0 +1,99 @@
+// SCSS Document
+// File: src/scss/utilities/_gradients.scss
+// Description: Gradient utilities — linear, radial, conic and repeating gradients with composable color stops.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .bg-linear-*, .bg-radial-*, .bg-conic-*, .bg-repeating-* (shape/direction) and
+//          .from-{color}, .via-{color}, .to-{color} (stops) for every Omnia color.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
+// Note: stop positions (.from-pos-10 …) live in _gradient_stops.scss.
+//       combine one shape class with stop classes, e.g. class="bg-linear-to-r from-red via-yellow to-green".
+//       The existing .bg-image-gradient-* / .bg-image-radial presets in _backgrounds.scss stay available.
+// Map: stops -> linear -> radial -> conic -> repeating -> color stops per Omnia color
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+// Stops: from -> (via) -> to. A .via-* class switches to a three-stop gradient.
+$_stops: var(--oc-gradient-stops, var(--oc-gradient-from, transparent) var(--oc-gradient-from-pos,), var(--oc-gradient-to, transparent) var(--oc-gradient-to-pos,));
+
+/* Linear gradients — direction */
+$_linear: (
+  't': to top, 'tr': to top right, 'r': to right, 'br': to bottom right,
+  'b': to bottom, 'bl': to bottom left, 'l': to left, 'tl': to top left
+);
+@each $key, $dir in $_linear {
+  .bg-linear-to-#{$key} { background-image: linear-gradient(#{$dir}, #{$_stops}); }
+}
+@each $deg in (0, 45, 90, 135, 180, 225, 270, 315) {
+  .bg-linear-#{$deg} { background-image: linear-gradient(#{$deg}deg, #{$_stops}); }
+}
+
+/* Linear gradient in a perceptual color space (smoother mid tones) */
+.bg-linear-to-r-oklch { background-image: linear-gradient(to right in oklch, #{$_stops}); }
+
+/* Radial gradients — shape and position */
+.bg-radial { background-image: radial-gradient(#{$_stops}); }
+.bg-radial-circle { background-image: radial-gradient(circle, #{$_stops}); }
+.bg-radial-ellipse { background-image: radial-gradient(ellipse, #{$_stops}); }
+.bg-radial-at-t { background-image: radial-gradient(at top, #{$_stops}); }
+.bg-radial-at-b { background-image: radial-gradient(at bottom, #{$_stops}); }
+.bg-radial-at-l { background-image: radial-gradient(at left, #{$_stops}); }
+.bg-radial-at-r { background-image: radial-gradient(at right, #{$_stops}); }
+.bg-radial-at-tl { background-image: radial-gradient(at top left, #{$_stops}); }
+.bg-radial-at-br { background-image: radial-gradient(at bottom right, #{$_stops}); }
+
+/* Conic gradients */
+.bg-conic { background-image: conic-gradient(#{$_stops}); }
+.bg-conic-90 { background-image: conic-gradient(from 90deg, #{$_stops}); }
+.bg-conic-180 { background-image: conic-gradient(from 180deg, #{$_stops}); }
+.bg-conic-at-t { background-image: conic-gradient(at top, #{$_stops}); }
+.bg-conic-wheel { background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
+
+/* Repeating gradients (stripes and rings) */
+.bg-repeating-stripes {
+  background-image: repeating-linear-gradient(45deg, var(--oc-gradient-from, transparent) 0 10px, var(--oc-gradient-to, transparent) 10px 20px);
+}
+.bg-repeating-stripes-x {
+  background-image: repeating-linear-gradient(90deg, var(--oc-gradient-from, transparent) 0 10px, var(--oc-gradient-to, transparent) 10px 20px);
+}
+.bg-repeating-rings {
+  background-image: repeating-radial-gradient(circle, var(--oc-gradient-from, transparent) 0 10px, var(--oc-gradient-to, transparent) 10px 20px);
+}
+
+/* Color stops — keywords */
+@each $name, $value in ('transparent': transparent, 'current': currentcolor, 'white': var(--color-white-50), 'black': var(--color-black-50)) {
+  .from-#{$name} { --oc-gradient-from: #{$value}; }
+  .to-#{$name} { --oc-gradient-to: #{$value}; }
+  .via-#{$name} {
+    --oc-gradient-via: #{$value};
+    --oc-gradient-stops: var(--oc-gradient-from, transparent) var(--oc-gradient-from-pos,), var(--oc-gradient-via) var(--oc-gradient-via-pos,), var(--oc-gradient-to, transparent) var(--oc-gradient-to-pos,);
+  }
+}
+
+/* Color stops — every Omnia color (base tone via the color tokens, hex fallback) */
+@each $group, $families in $omnia-colors {
+  @each $family, $colors in $families {
+    @each $color, $props in $colors {
+      $name: string.to-lower-case(#{$color});
+      $value: var(--color-#{$name}-100, #{map.get($props, hex)});
+      .from-#{$name} { --oc-gradient-from: #{$value}; }
+      .to-#{$name} { --oc-gradient-to: #{$value}; }
+      .via-#{$name} {
+        --oc-gradient-via: #{$value};
+        --oc-gradient-stops: var(--oc-gradient-from, transparent) var(--oc-gradient-from-pos,), var(--oc-gradient-via) var(--oc-gradient-via-pos,), var(--oc-gradient-to, transparent) var(--oc-gradient-to-pos,);
+      }
+    }
+  }
+}
+
+/* Gradient text — combine with a gradient class: class="text-gradient bg-linear-to-r from-red to-blue" */
+.text-gradient {
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}