@birdycom/omniacss 0.0.0-stage → 0.11.1

package/scss/utilities/_clamp.scss

@@ -0,0 +1,111 @@
+// SCSS Document
+// File: src/scss/utilities/_clamp.scss
+// Description: Fluid values using CSS clamp(), min(), max() for font-size, width, padding, margin
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// References: MDN clamp(), min(), max()
+// Properties: font-size, width, padding, margin
+// Values: clamp(), min(), max(), vw, ch, rem, calc()
+
+@use '../utilities/' as *;
+
+/* =======================================================================
+   Fluid / clamp defaults (override in project if needed)
+   Used for .text-fluid (body-like), .text-fluid-heading, .text-fluid-heading-wide.
+   ======================================================================= */
+$fluid-font-min: 1rem !default;
+$fluid-font-preferred: 1.2vw !default;
+$fluid-font-max: 1.25rem !default;
+
+$fluid-heading-min: 1.5rem !default;
+$fluid-heading-preferred: 2.5vw !default;
+$fluid-heading-max: 2rem !default;
+
+/* Wide heading: clamp(1.8rem, 7vw + 1rem, 5rem) */
+$fluid-heading-wide-min: 1.8rem !default;
+$fluid-heading-wide-max: 5rem !default;
+
+$fluid-width-min: 20rem !default;
+$fluid-width-preferred: 90vw !default;
+$fluid-width-max: 65ch !default;
+
+/* =======================================================================
+   Mixin: apply clamp() to any property
+   ======================================================================= */
+@mixin fluid-clamp($property, $min, $preferred, $max) {
+  #{$property}: clamp(#{$min}, #{$preferred}, #{$max});
+}
+
+/* =======================================================================
+   Fluid font-size utilities
+   ======================================================================= */
+.text-fluid {
+  font-size: clamp(#{$fluid-font-min}, #{$fluid-font-preferred}, #{$fluid-font-max});
+}
+
+.text-fluid-heading {
+  font-size: clamp(#{$fluid-heading-min}, #{$fluid-heading-preferred}, #{$fluid-heading-max});
+}
+
+.text-fluid-heading-wide {
+  font-size: clamp(#{$fluid-heading-wide-min}, calc(7vw + 1rem), #{$fluid-heading-wide-max});
+}
+
+/* =======================================================================
+   min() / max() utilities (.w-min/.w-max reserved in _sizing.scss for min-content/max-content)
+   ======================================================================= */
+.text-min {
+  font-size: max(1rem, 1.2vw);
+}
+
+.w-fluid-cap {
+  width: min(var(--w-cap-a, 90vw), var(--w-cap-b, 65ch));
+}
+
+.w-fluid-floor {
+  width: max(var(--w-floor-a, 20rem), var(--w-floor-b, 50vw));
+}
+
+.p-min {
+  padding: min(1rem, 5vw);
+}
+
+.m-min {
+  margin: min(1rem, 5vw);
+}
+
+.p-max {
+  padding: max(0.5rem, 2vw);
+}
+
+.m-max {
+  margin: max(0.5rem, 2vw);
+}
+
+/* =======================================================================
+   Fluid width (clamp) and fixed vw/ch width classes
+   ======================================================================= */
+.w-fluid {
+  width: clamp(#{$fluid-width-min}, #{$fluid-width-preferred}, #{$fluid-width-max});
+}
+
+.max-w-fluid {
+  max-width: clamp(#{$fluid-width-min}, #{$fluid-width-preferred}, #{$fluid-width-max});
+}
+
+$fluid-w-vw: (25, 40, 50, 60, 75, 90, 100) !default;
+$fluid-w-ch: (45, 50, 55, 65, 70, 75, 80) !default;
+
+@each $v in $fluid-w-vw {
+  .w-#{$v}vw {
+    width: #{$v}vw;
+  }
+}
+
+@each $v in $fluid-w-ch {
+  .w-#{$v}ch {
+    width: #{$v}ch;
+  }
+}

package/scss/utilities/_colors_html.scss

@@ -0,0 +1,341 @@
+// SCSS Document 
+// File: src/scss/utilities/_colors_html.scss
+// Description: colors properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: background-color, color
+// Values: rgb, rgba, hsl, hsla, #
+
+@use "sass:string";
+@use "sass:color";
+@use "sass:list";
+@use "sass:math";
+@use "sass:map";
+@use '../utilities/' as *;
+// Tone scale for color steps 5..95.
+// This keeps low steps vivid (no gray overlay) and darkens high steps.
+$oc-tone-scale: (
+  2: (lightness: 56%, chroma: -18%),
+  10: (lightness: 38%, chroma: -12%),
+  20: (lightness: 30%, chroma: -10%),
+  30: (lightness: 22%, chroma: -8%),
+  40: (lightness: 14%, chroma: -6%),
+  50: (lightness: 6%, chroma: -4%),
+  60: (lightness: -6%, chroma: 2%),
+  70: (lightness: -12%, chroma: 4%),
+  80: (lightness: -18%, chroma: 6%),
+  90: (lightness: -24%, chroma: 8%),
+  95: (lightness: -32%, chroma: 10%)
+);
+
+@function oc-tone-color($source-color, $step) {
+  $tone: map.get($oc-tone-scale, $step);
+  @if $tone == null {
+    @return $source-color;
+  }
+
+  @return color.scale(
+    $source-color,
+    $lightness: map.get($tone, lightness),
+    $chroma: map.get($tone, chroma)
+  );
+}
+
+
+/* The HTML Colors properties */
+///
+/// @group ColorsHTML
+///
+
+///
+/// This code defines a series of nested Sass @each loops that generate CSS background colors 
+/// and text colors based on a set of predefined color palettes. 
+/// The @each loops iterate through several arrays of color properties, 
+/// starting with a top-level array called $html-colors, and dig into subsequent arrays of 
+/// maincolorshtml-prop, colorname-prop, pseudoclasses-prop, and opacitycolor-prop 
+/// to generate CSS classes for each color with different opacity and/or pseudo-class options. 
+/// 
+/// The code then generates CSS code block and sets the appropriate background-color 
+/// and color properties based on the selected color and opacity value. 
+/// The $DEFAULT-COLOR-TYPE-VALUE variable determines whether the color being iterated 
+/// through is set as a hexadecimal value, HSL, or RGB.
+///
+/// @group ColorsHTML
+/// @name colorshtml
+/// @link src/scss/utilities/_colors_html.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require {variable} $colorshtml
+/// @require {variable} $pseudoclasses
+/// @require {variable} $opacitycolor
+/// @require str-replace
+/// @example scss - colors class
+///   @each $colorshtml-prop, $colorshtml-value in $html-colors { // first list 'htmlcolors'
+///   @each $maincolorshtml-prop, $maincolorshtml-value in $colorshtml-value { // first list 'htmlcolors'
+///     @each $colorname-prop, $colorname-value in $maincolorshtml-value { // second list 'colors name'
+///       @each $pseudoclasses-prop, $pseudoclasses-value in $pseudoclasses { // make the pseudo classes
+///         @each $opacitycolor-prop, $opacitycolor-value in $opacitycolor { // set the opacity off the colors  
+///           #{".#{$pseudoclasses-value}" + "bg-" + to-lower-case("#{$colorname-prop}") + if($opacitycolor-value <= 90, "#{$opacitycolor-prop}#{$pseudoclasses-prop}","#{$pseudoclasses-prop}")}{
+///             @each $colorhtml-prop, $colorhtml-value in $colorname-value {
+///               @if $colorhtml-prop == $DEFAULT-COLOR-TYPE-VALUE {
+///                 @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {  
+///                   @if $opacitycolor-value <= 90 {
+///                     background-color: $coloromnia-value+#{$opacitycolor-value}; 
+///                   } @else {
+///                     background-color: $coloromnia-value;  
+///                   };
+///                 };
+///                 @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+///                   $h:(); $s:(); $l:();
+///                   @each $color-prop, $color-value in $colorhtml-value {
+///                       @if $color-prop == 'h' { $h: #{$color-value}; }
+///                       @if $color-prop == 's' { $s: #{$color-value}+'%'; }
+///                       @if $color-prop == 'l' { $l: #{$color-value}+'%'; }
+///                   };
+///                   @if $opacitycolor-value <= 90 {
+///                     background-color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ', #{$opacitycolor-value}% )'  }; 
+///                   } @else {
+///                     background-color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ' )'  }; 
+///                   };
+///                 };
+///                 @if $DEFAULT-COLOR-TYPE-VALUE == 'rgb' { 
+///                   $r:(); $g:(); $b:();
+///                   @each $color-prop, $color-value in $colorhtml-value {
+///                       @if $color-prop == 'r' { $r: #{$color-value}; }
+///                       @if $color-prop == 'g' { $g: #{$color-value}; }
+///                       @if $color-prop == 'b' { $b: #{$color-value}; }
+///                   };
+///                     @if $opacitycolor-value <= 90 {
+///                       background-color: #{'rgb('+ $r  $g  $b + ' / #{$opacitycolor-value}% )'  }; 
+///                     } @else {
+///                       background-color: #{'rgb('+ $r  $g  $b + ' )'  }; 
+///                     };
+///                 };
+///               };    
+///             };
+///           };
+///           #{".#{$pseudoclasses-value}" + "text-"  + to-lower-case("#{$colorname-prop}") + if($opacitycolor-value <= 90, "#{$opacitycolor-prop}#{$pseudoclasses-prop}","#{$pseudoclasses-prop}")}{
+///             @each $colorhtml-prop, $colorhtml-value in $colorname-value {
+///               @if $colorhtml-prop == $DEFAULT-COLOR-TYPE-VALUE {
+///                 @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {   
+///                   @if $opacitycolor-value <= 90 {
+///                     color: $coloromnia-value+#{$opacitycolor-value}; 
+///                   } @else {
+///                     color: $coloromnia-value;  
+///                   };  
+///                 };
+///                 @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+///                   $h:(); $s:(); $l:();
+///                   @each $color-prop, $color-value in $colorhtml-value {
+///                       @if $color-prop == 'h' { $h: #{$color-value}; }
+///                       @if $color-prop == 's' { $s: #{$color-value}+'%'; }
+///                       @if $color-prop == 'l' { $l: #{$color-value}+'%'; }
+///                   };
+///                   @if $opacitycolor-value <= 90 {
+///                     color: #{'hsl('+$h + ', ' + $s + ', ' +  $l + ', #{$opacitycolor-value}% )'  }; 
+///                   } @else {
+///                     color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ' )'  }; 
+///                   }; 
+///                 };
+///                 @if $DEFAULT-COLOR-TYPE-VALUE == 'rgb' { 
+///                   $r:(); $g:(); $b:();
+///                   @each $color-prop, $color-value in $colorhtml-value {
+///                       @if $color-prop == 'r' { $r: #{$color-value}; }
+///                       @if $color-prop == 'g' { $g: #{$color-value}; }
+///                       @if $color-prop == 'b' { $b: #{$color-value}; }
+///                   };
+///                   @if $opacitycolor-value <= 90 {
+///                     color: #{'rgb('+ $r  $g  $b + ' / #{$opacitycolor-value}% )'  }; 
+///                   } @else {
+///                     color: #{'rgb('+ $r  $g  $b + ' )'  }; 
+///                   };  
+///                 };
+///               };    
+///             };
+///           };
+///         };
+///       };
+///     };
+///   };
+/// };
+/// @example html - use background, text and hover-color class
+///   <div class="bg-darkgreen w-12 h-10 p-0.5 hover:bg-orange text-cyan">
+///     <p>text = Cyan</p>
+///     <p>background = darkgreen</p>
+///     <p>hover background = orange </p>
+///   </div> 
+@each $colorshtml-prop, $colorshtml-value in $html-colors { // first list 'htmlcolors'
+
+  @each $maincolorshtml-prop, $maincolorshtml-value in $colorshtml-value { // first list 'htmlcolors'
+
+    @each $colorname-prop, $colorname-value in $maincolorshtml-value { // second list 'colors name'
+
+      @each $pseudoclasses-prop, $pseudoclasses-value in $pseudoclasses { // make the pseudo classes
+
+        @each $opacitycolor-prop, $opacitycolor-value in $opacitycolor { // set the opacity off the colors
+          $step: list.nth($opacitycolor-value, 1);
+          $color-name: string.to-lower-case(#{$colorname-prop});
+
+          $opacity-suffix: "#{$pseudoclasses-prop}";
+          @if $opacitycolor-value <= 95 {
+            $opacity-suffix: "#{$opacitycolor-prop}#{$pseudoclasses-prop}";
+          }
+
+          #{".#{$pseudoclasses-value}" + "bg-" + string.to-lower-case("#{$colorname-prop}") + $opacity-suffix}{
+
+            @each $colorhtml-prop, $colorhtml-value in $colorname-value {
+
+              @if $colorhtml-prop == $DEFAULT-COLOR-TYPE-VALUE or (($DEFAULT-COLOR-TYPE-VALUE == 'oklch' or $DEFAULT-COLOR-TYPE-VALUE == 'oklab') and $colorhtml-prop == 'hex') {
+              
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {  
+
+                  @if $opacitycolor-value <= 95 {
+
+                    background-color: $colorhtml-value+#{$opacitycolor-value}; 
+
+                  } @else {
+
+                    background-color: $colorhtml-value;  
+                  }
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+                  
+                  $h:(); $s:(); $l:();
+                  
+                  @each $color-prop, $color-value in $colorhtml-value {
+                  
+                      @if $color-prop == 'h' { $h: #{$color-value}; }
+                      @if $color-prop == 's' { $s: #{$color-value}+'%'; }
+                      @if $color-prop == 'l' { $l: #{$color-value}+'%'; }
+
+                  }
+
+                  @if $opacitycolor-value <= 95 {
+
+                    background-color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ', #{$opacitycolor-value}% )'  }; 
+
+                  } @else {
+
+                    background-color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ' )'  }; 
+                  }
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'rgb' { 
+                  
+                  $r:(); $g:(); $b:();
+                  
+                  @each $color-prop, $color-value in $colorhtml-value {
+                  
+                      @if $color-prop == 'r' { $r: #{$color-value}; }
+                      @if $color-prop == 'g' { $g: #{$color-value}; }
+                      @if $color-prop == 'b' { $b: #{$color-value}; }
+
+                  }
+
+                    @if $opacitycolor-value <= 95 {
+
+                      background-color: #{'rgb('+ $r  $g  $b + ' / #{$opacitycolor-value}% )'  }; 
+
+                    } @else {
+
+                      background-color: #{'rgb('+ $r  $g  $b + ' )'  }; 
+                    } 
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'oklch' {
+                  background-color: var(--color-#{$color-name}-#{$step});
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'oklab' {
+                  background-color: var(--color-#{$color-name}-#{$step});
+                }
+              }    
+            }
+          }
+          
+          #{".#{$pseudoclasses-value}" + "text-"  + string.to-lower-case("#{$colorname-prop}") + $opacity-suffix}{
+
+          // @extend .#{$colorshtml-prop};
+
+            @each $colorhtml-prop, $colorhtml-value in $colorname-value {
+
+              @if $colorhtml-prop == $DEFAULT-COLOR-TYPE-VALUE or (($DEFAULT-COLOR-TYPE-VALUE == 'oklch' or $DEFAULT-COLOR-TYPE-VALUE == 'oklab') and $colorhtml-prop == 'hex') {
+              
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {   
+
+                  @if $opacitycolor-value <= 95 {
+
+                    color: $colorhtml-value+#{$opacitycolor-value}; 
+
+                  } @else {
+
+                    color: $colorhtml-value;  
+                  }  
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+                  
+                  $h:(); $s:(); $l:();
+                  
+                  @each $color-prop, $color-value in $colorhtml-value {
+                  
+                      @if $color-prop == 'h' { $h: #{$color-value}; }
+                      @if $color-prop == 's' { $s: #{$color-value}+'%'; }
+                      @if $color-prop == 'l' { $l: #{$color-value}+'%'; }
+
+                  }
+
+                  @if $opacitycolor-value <= 95 {
+
+                    color: #{'hsl('+$h + ', ' + $s + ', ' +  $l + ', #{$opacitycolor-value}% )'  }; 
+
+                  } @else {
+
+                    color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ' )'  }; 
+                  } 
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'rgb' { 
+                  
+                  $r:(); $g:(); $b:();
+                  
+                  @each $color-prop, $color-value in $colorhtml-value {
+                  
+                      @if $color-prop == 'r' { $r: #{$color-value}; }
+                      @if $color-prop == 'g' { $g: #{$color-value}; }
+                      @if $color-prop == 'b' { $b: #{$color-value}; }
+
+                  }
+
+                  @if $opacitycolor-value <= 95 {
+
+                    color: #{'rgb('+ $r  $g  $b + ' / #{$opacitycolor-value}% )'  }; 
+
+                  } @else {
+
+                    color: #{'rgb('+ $r  $g  $b + ' )'  }; 
+                  }  
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'oklch' {
+                  color: var(--color-#{$color-name}-#{$step});
+                }
+
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'oklab' {
+                  color: var(--color-#{$color-name}-#{$step});
+                }
+              }    
+            }
+          }
+        }
+      }
+    }
+  }
+};
+/* End html Colors properties */

package/scss/utilities/_colors_mix.scss

@@ -0,0 +1,84 @@
+// SCSS Document
+// File: src/scss/utilities/_colors_mix.scss
+// Description: color-mix(in oklch, color X%, transparent) utilities for Omnia, HTML, and RAL. Omnia/HTML use var(--color-{name}-mix-{step}); RAL uses color-mix(in oklch, var(--color-{name}) step%, transparent) (one token per RAL).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Purpose: Generate .bg-{color}-mix-{step} and .text-{color}-mix-{step} (step: 0,5,10,20,...,100).
+// Uses var(--color-{name}-mix-{step}) from oc-colors.css so one source of truth (tokens in _colors_tokens.scss).
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+/* ===================================================================
+   COLOR-MIX (with transparent)
+   Per color: .bg-{name}-mix-{step} and .text-{name}-mix-{step} reference
+   var(--color-{name}-mix-{step}) from oc-colors.css (tokens emitted in _colors_tokens.scss).
+   =================================================================== */
+
+@mixin _generate-color-mix($color-map) {
+  @each $colors-prop, $colors-value in $color-map {
+    @each $main-prop, $main-value in $colors-value {
+      @each $colorname-prop, $colorname-value in $main-value {
+        $hex: map.get($colorname-value, hex);
+        @if $hex {
+          $name: string.to-lower-case(#{$colorname-prop});
+          @each $pseudoclasses-prop, $pseudoclasses-value in $pseudoclasses {
+            @each $step in $color-mix-steps {
+              $suffix: "-#{$step}#{$pseudoclasses-prop}";
+              #{".#{$pseudoclasses-value}bg-" + $name + "-mix" + $suffix} {
+                background-color: var(--color-#{$name}-mix-#{$step});
+              }
+              #{".#{$pseudoclasses-value}text-" + $name + "-mix" + $suffix} {
+                color: var(--color-#{$name}-mix-#{$step});
+              }
+              #{".#{$pseudoclasses-value}border-" + $name + "-mix" + $suffix} {
+                border-color: var(--color-#{$name}-mix-#{$step});
+              }
+              #{".#{$pseudoclasses-value}outline-" + $name + "-mix" + $suffix} {
+                outline-color: var(--color-#{$name}-mix-#{$step});
+              }              
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// RAL: one token per color; mix utilities use color-mix(in oklch, var(--color-{name}) step%, transparent) (no -mix-{step} token).
+@mixin _generate-ral-color-mix($ral-map) {
+  @each $colors-prop, $colors-value in $ral-map {
+    @each $main-prop, $main-value in $colors-value {
+      @each $colorname-prop, $colorname-value in $main-value {
+        $hex: map.get($colorname-value, hex);
+        @if $hex {
+          $name: string.to-lower-case(#{$colorname-prop});
+          @each $pseudoclasses-prop, $pseudoclasses-value in $pseudoclasses {
+            @each $step in $color-mix-steps {
+              $suffix: "-#{$step}#{$pseudoclasses-prop}";
+              #{".#{$pseudoclasses-value}bg-" + $name + "-mix" + $suffix} {
+                background-color: color-mix(in oklch, var(--color-#{$name}) #{$step * 1%}, transparent);
+              }
+              #{".#{$pseudoclasses-value}text-" + $name + "-mix" + $suffix} {
+                color: color-mix(in oklch, var(--color-#{$name}) #{$step * 1%}, transparent);
+              }
+              #{".#{$pseudoclasses-value}border-" + $name + "-mix" + $suffix} {
+                border-color: color-mix(in oklch, var(--color-#{$name}) #{$step * 1%}, transparent);
+              }
+              #{".#{$pseudoclasses-value}outline-" + $name + "-mix" + $suffix} {
+                outline-color: color-mix(in oklch, var(--color-#{$name}) #{$step * 1%}, transparent);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include _generate-color-mix($omnia-colors);
+@include _generate-color-mix($html-colors);
+@include _generate-ral-color-mix($ral-colors);