@birdycom/omniacss 0.11.0 → 0.11.2

package/scss/utilities/_font_variants.scss

@@ -1,139 +1,139 @@
-// SCSS Document
-// File: src/scss/utilities/_font_variants.scss
-// Description: Font variants, variable font axes, font-size-adjust, synthesis, hyphenation, text effects,
-//              ruby annotation and MathML typography utilities.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .font-caps-*, .font-lig-*, .font-east-*, .font-pos-*, .font-emoji-*, .font-alt-*,
-//          .font-wght-*, .font-size-adjust-*, .font-synthesis-*, .hyphenate-*, .text-justify-*, .text-wrap-mode-*,
-//          .text-combine-*, .emphasis-style-*/.emphasis-color-*, .text-stroke-*, .text-fill-*, .ruby-*, .math-*.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
-// Note: numeric variants live in _fonts.scss (.font-num-*).
-// Map: caps -> ligatures -> east asian -> position -> emoji -> alternates -> variation axes -> size adjust
-//      -> synthesis -> hyphenation -> justify/wrap-mode/combine -> emphasis -> text stroke/fill -> ruby -> math
-
-/* Font variant caps */
-.font-caps-normal { font-variant-caps: normal; }
-.font-caps-small { font-variant-caps: small-caps; }
-.font-caps-all-small { font-variant-caps: all-small-caps; }
-.font-caps-petite { font-variant-caps: petite-caps; }
-.font-caps-all-petite { font-variant-caps: all-petite-caps; }
-.font-caps-unicase { font-variant-caps: unicase; }
-.font-caps-titling { font-variant-caps: titling-caps; }
-
-/* Font variant ligatures */
-.font-lig-normal { font-variant-ligatures: normal; }
-.font-lig-none { font-variant-ligatures: none; }
-.font-lig-common { font-variant-ligatures: common-ligatures; }
-.font-lig-no-common { font-variant-ligatures: no-common-ligatures; }
-.font-lig-discretionary { font-variant-ligatures: discretionary-ligatures; }
-.font-lig-historical { font-variant-ligatures: historical-ligatures; }
-.font-lig-contextual { font-variant-ligatures: contextual; }
-
-/* Font variant east asian */
-.font-east-normal { font-variant-east-asian: normal; }
-.font-east-jis04 { font-variant-east-asian: jis04; }
-.font-east-simplified { font-variant-east-asian: simplified; }
-.font-east-traditional { font-variant-east-asian: traditional; }
-.font-east-full-width { font-variant-east-asian: full-width; }
-.font-east-proportional { font-variant-east-asian: proportional-width; }
-.font-east-ruby { font-variant-east-asian: ruby; }
-
-/* Font variant position (real sub/superscript glyphs) */
-.font-pos-normal { font-variant-position: normal; }
-.font-pos-sub { font-variant-position: sub; }
-.font-pos-super { font-variant-position: super; }
-
-/* Font variant emoji */
-.font-emoji-normal { font-variant-emoji: normal; }
-.font-emoji-text { font-variant-emoji: text; }
-.font-emoji-emoji { font-variant-emoji: emoji; }
-.font-emoji-unicode { font-variant-emoji: unicode; }
-
-/* Font variant alternates and shorthand */
-.font-alt-normal { font-variant-alternates: normal; }
-.font-alt-historical { font-variant-alternates: historical-forms; }
-.font-variant-normal { font-variant: normal; }
-.font-variant-none { font-variant: none; }
-
-/* Variable font axes (font-variation-settings) */
-.font-variation-normal { font-variation-settings: normal; }
-@each $w in (100, 200, 300, 400, 500, 600, 700, 800, 900) {
-  .font-wght-#{$w} { font-variation-settings: "wght" #{$w}; }
-}
-.font-wdth-75 { font-variation-settings: "wdth" 75; }
-.font-wdth-125 { font-variation-settings: "wdth" 125; }
-.font-slnt-n10 { font-variation-settings: "slnt" -10; }
-
-/* Font size adjust — keep x-height consistent across fallback fonts */
-.font-size-adjust-none { font-size-adjust: none; }
-.font-size-adjust-from-font { font-size-adjust: from-font; }
-.font-size-adjust-0\.5 { font-size-adjust: 0.5; }
-.font-size-adjust-ex { font-size-adjust: ex-height 0.53; }
-.font-size-adjust-cap { font-size-adjust: cap-height 0.7; }
-
-/* Font synthesis longhands */
-.font-synthesis-weight-none { font-synthesis-weight: none; }
-.font-synthesis-style-none { font-synthesis-style: none; }
-.font-synthesis-small-caps-none { font-synthesis-small-caps: none; }
-
-/* Font language override */
-.font-lang-normal { font-language-override: normal; }
-
-/* Hyphenation details */
-.hyphenate-char-auto { hyphenate-character: auto; }
-.hyphenate-char-dash { hyphenate-character: "\2010"; }
-.hyphenate-char-equals { hyphenate-character: "="; }
-.hyphenate-limit-auto { hyphenate-limit-chars: auto; }
-.hyphenate-limit-6 { hyphenate-limit-chars: 6 3 2; }
-.hyphenate-limit-10 { hyphenate-limit-chars: 10 4 4; }
-
-/* Text justify, wrap mode, combine upright */
-.text-justify-auto { text-justify: auto; }
-.text-justify-none { text-justify: none; }
-.text-justify-inter-word { text-justify: inter-word; }
-.text-justify-inter-character { text-justify: inter-character; }
-.text-wrap-mode-wrap { text-wrap-mode: wrap; }
-.text-wrap-mode-nowrap { text-wrap-mode: nowrap; }
-.text-combine-none { text-combine-upright: none; }
-.text-combine-all { text-combine-upright: all; }
-
-/* Text emphasis longhands */
-.emphasis-style-filled { text-emphasis-style: filled; }
-.emphasis-style-open { text-emphasis-style: open; }
-.emphasis-style-double-circle { text-emphasis-style: double-circle; }
-.emphasis-color-current { text-emphasis-color: currentcolor; }
-.emphasis-color-red { text-emphasis-color: var(--color-red-100); }
-.emphasis-color-blue { text-emphasis-color: var(--color-blue-100); }
-
-/* Text stroke and fill (WebKit text effects, supported in all engines) */
-.text-stroke-0 { -webkit-text-stroke-width: 0; }
-.text-stroke-1 { -webkit-text-stroke-width: 1px; }
-.text-stroke-2 { -webkit-text-stroke-width: 2px; }
-.text-stroke-current { -webkit-text-stroke-color: currentcolor; }
-.text-stroke-white { -webkit-text-stroke-color: var(--color-white-50); }
-.text-stroke-black { -webkit-text-stroke-color: var(--color-black-50); }
-.text-fill-transparent { -webkit-text-fill-color: transparent; }
-.text-fill-current { -webkit-text-fill-color: currentcolor; }
-.text-outline { -webkit-text-stroke: 1px currentcolor; -webkit-text-fill-color: transparent; }
-
-/* Ruby annotation (<ruby> / <rt>) */
-.ruby-over { ruby-position: over; }
-.ruby-under { ruby-position: under; }
-.ruby-inter-character { ruby-position: inter-character; }
-.ruby-align-start { ruby-align: start; }
-.ruby-align-center { ruby-align: center; }
-.ruby-align-space-between { ruby-align: space-between; }
-.ruby-align-space-around { ruby-align: space-around; }
-.ruby-overhang-auto { ruby-overhang: auto; }
-.ruby-overhang-none { ruby-overhang: none; }
-
-/* MathML typography */
-.math-normal { math-style: normal; }
-.math-compact { math-style: compact; }
-.math-depth-auto { math-depth: auto-add; }
-.math-depth-0 { math-depth: 0; }
-.math-shift-normal { math-shift: normal; }
-.math-shift-compact { math-shift: compact; }
+// SCSS Document
+// File: src/scss/utilities/_font_variants.scss
+// Description: Font variants, variable font axes, font-size-adjust, synthesis, hyphenation, text effects,
+//              ruby annotation and MathML typography utilities.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .font-caps-*, .font-lig-*, .font-east-*, .font-pos-*, .font-emoji-*, .font-alt-*,
+//          .font-wght-*, .font-size-adjust-*, .font-synthesis-*, .hyphenate-*, .text-justify-*, .text-wrap-mode-*,
+//          .text-combine-*, .emphasis-style-*/.emphasis-color-*, .text-stroke-*, .text-fill-*, .ruby-*, .math-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
+// Note: numeric variants live in _fonts.scss (.font-num-*).
+// Map: caps -> ligatures -> east asian -> position -> emoji -> alternates -> variation axes -> size adjust
+//      -> synthesis -> hyphenation -> justify/wrap-mode/combine -> emphasis -> text stroke/fill -> ruby -> math
+
+/* Font variant caps */
+.font-caps-normal { font-variant-caps: normal; }
+.font-caps-small { font-variant-caps: small-caps; }
+.font-caps-all-small { font-variant-caps: all-small-caps; }
+.font-caps-petite { font-variant-caps: petite-caps; }
+.font-caps-all-petite { font-variant-caps: all-petite-caps; }
+.font-caps-unicase { font-variant-caps: unicase; }
+.font-caps-titling { font-variant-caps: titling-caps; }
+
+/* Font variant ligatures */
+.font-lig-normal { font-variant-ligatures: normal; }
+.font-lig-none { font-variant-ligatures: none; }
+.font-lig-common { font-variant-ligatures: common-ligatures; }
+.font-lig-no-common { font-variant-ligatures: no-common-ligatures; }
+.font-lig-discretionary { font-variant-ligatures: discretionary-ligatures; }
+.font-lig-historical { font-variant-ligatures: historical-ligatures; }
+.font-lig-contextual { font-variant-ligatures: contextual; }
+
+/* Font variant east asian */
+.font-east-normal { font-variant-east-asian: normal; }
+.font-east-jis04 { font-variant-east-asian: jis04; }
+.font-east-simplified { font-variant-east-asian: simplified; }
+.font-east-traditional { font-variant-east-asian: traditional; }
+.font-east-full-width { font-variant-east-asian: full-width; }
+.font-east-proportional { font-variant-east-asian: proportional-width; }
+.font-east-ruby { font-variant-east-asian: ruby; }
+
+/* Font variant position (real sub/superscript glyphs) */
+.font-pos-normal { font-variant-position: normal; }
+.font-pos-sub { font-variant-position: sub; }
+.font-pos-super { font-variant-position: super; }
+
+/* Font variant emoji */
+.font-emoji-normal { font-variant-emoji: normal; }
+.font-emoji-text { font-variant-emoji: text; }
+.font-emoji-emoji { font-variant-emoji: emoji; }
+.font-emoji-unicode { font-variant-emoji: unicode; }
+
+/* Font variant alternates and shorthand */
+.font-alt-normal { font-variant-alternates: normal; }
+.font-alt-historical { font-variant-alternates: historical-forms; }
+.font-variant-normal { font-variant: normal; }
+.font-variant-none { font-variant: none; }
+
+/* Variable font axes (font-variation-settings) */
+.font-variation-normal { font-variation-settings: normal; }
+@each $w in (100, 200, 300, 400, 500, 600, 700, 800, 900) {
+  .font-wght-#{$w} { font-variation-settings: "wght" #{$w}; }
+}
+.font-wdth-75 { font-variation-settings: "wdth" 75; }
+.font-wdth-125 { font-variation-settings: "wdth" 125; }
+.font-slnt-n10 { font-variation-settings: "slnt" -10; }
+
+/* Font size adjust — keep x-height consistent across fallback fonts */
+.font-size-adjust-none { font-size-adjust: none; }
+.font-size-adjust-from-font { font-size-adjust: from-font; }
+.font-size-adjust-0\.5 { font-size-adjust: 0.5; }
+.font-size-adjust-ex { font-size-adjust: ex-height 0.53; }
+.font-size-adjust-cap { font-size-adjust: cap-height 0.7; }
+
+/* Font synthesis longhands */
+.font-synthesis-weight-none { font-synthesis-weight: none; }
+.font-synthesis-style-none { font-synthesis-style: none; }
+.font-synthesis-small-caps-none { font-synthesis-small-caps: none; }
+
+/* Font language override */
+.font-lang-normal { font-language-override: normal; }
+
+/* Hyphenation details */
+.hyphenate-char-auto { hyphenate-character: auto; }
+.hyphenate-char-dash { hyphenate-character: "\2010"; }
+.hyphenate-char-equals { hyphenate-character: "="; }
+.hyphenate-limit-auto { hyphenate-limit-chars: auto; }
+.hyphenate-limit-6 { hyphenate-limit-chars: 6 3 2; }
+.hyphenate-limit-10 { hyphenate-limit-chars: 10 4 4; }
+
+/* Text justify, wrap mode, combine upright */
+.text-justify-auto { text-justify: auto; }
+.text-justify-none { text-justify: none; }
+.text-justify-inter-word { text-justify: inter-word; }
+.text-justify-inter-character { text-justify: inter-character; }
+.text-wrap-mode-wrap { text-wrap-mode: wrap; }
+.text-wrap-mode-nowrap { text-wrap-mode: nowrap; }
+.text-combine-none { text-combine-upright: none; }
+.text-combine-all { text-combine-upright: all; }
+
+/* Text emphasis longhands */
+.emphasis-style-filled { text-emphasis-style: filled; }
+.emphasis-style-open { text-emphasis-style: open; }
+.emphasis-style-double-circle { text-emphasis-style: double-circle; }
+.emphasis-color-current { text-emphasis-color: currentcolor; }
+.emphasis-color-red { text-emphasis-color: var(--color-red-100); }
+.emphasis-color-blue { text-emphasis-color: var(--color-blue-100); }
+
+/* Text stroke and fill (WebKit text effects, supported in all engines) */
+.text-stroke-0 { -webkit-text-stroke-width: 0; }
+.text-stroke-1 { -webkit-text-stroke-width: 1px; }
+.text-stroke-2 { -webkit-text-stroke-width: 2px; }
+.text-stroke-current { -webkit-text-stroke-color: currentcolor; }
+.text-stroke-white { -webkit-text-stroke-color: var(--color-white-50); }
+.text-stroke-black { -webkit-text-stroke-color: var(--color-black-50); }
+.text-fill-transparent { -webkit-text-fill-color: transparent; }
+.text-fill-current { -webkit-text-fill-color: currentcolor; }
+.text-outline { -webkit-text-stroke: 1px currentcolor; -webkit-text-fill-color: transparent; }
+
+/* Ruby annotation (<ruby> / <rt>) */
+.ruby-over { ruby-position: over; }
+.ruby-under { ruby-position: under; }
+.ruby-inter-character { ruby-position: inter-character; }
+.ruby-align-start { ruby-align: start; }
+.ruby-align-center { ruby-align: center; }
+.ruby-align-space-between { ruby-align: space-between; }
+.ruby-align-space-around { ruby-align: space-around; }
+.ruby-overhang-auto { ruby-overhang: auto; }
+.ruby-overhang-none { ruby-overhang: none; }
+
+/* MathML typography */
+.math-normal { math-style: normal; }
+.math-compact { math-style: compact; }
+.math-depth-auto { math-depth: auto-add; }
+.math-depth-0 { math-depth: 0; }
+.math-shift-normal { math-shift: normal; }
+.math-shift-compact { math-shift: compact; }

package/scss/utilities/_gap.scss

@@ -1,104 +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)};
-  }
-}
-
+// 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

@@ -1,48 +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}); }
-    }
-  }
-}
+// 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}); }
+    }
+  }
+}