@birdycom/omniacss 0.0.0-stage → 0.11.1

package/scss/utilities/_colors_omnia.scss

@@ -0,0 +1,315 @@
+// SCSS Document 
+// File: src/scss/utilities/_colors_omnia.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 *;
+// oc-tone-color() and $oc-tone-scale: see variables/_color_tone.scss (forwarded via utilities index).
+// oklch/oklab utilities use var(--color-{name}-{step}) from oc-colors.css so values stay in one place.
+
+/* The OMNIA Colors properties */
+///
+/// @group ColorsOMNIA
+///
+
+///
+/// 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 
+/// maincolorsomnia-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 ColorsOMNIA
+/// @name colorsomnia
+/// @link src/scss/utilities/_colors_omnia.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require {variable} $colorsomnia
+/// @require {variable} $pseudoclasses
+/// @require {variable} $opacitycolor
+/// @require str-replace
+/// @example scss - colors class
+///   @each $colorsomnia-prop, $colorsomnia-value in $omnia-colors { // first list 'omniacolors'
+///   @each $maincolorsomnia-prop, $maincolorsomnia-value in $colorsomnia-value { // first list 'omniacolors'
+///    @each $colorname-prop, $colorname-value in $maincolorsomnia-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 $coloromnia-prop, $coloromnia-value in $colorname-value {
+///                @if $coloromnia-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 $coloromnia-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 $coloromnia-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 $coloromnia-prop, $coloromnia-value in $colorname-value {
+///              @if $coloromnia-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 $coloromnia-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 $coloromnia-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-green-50 w-12 h-10 p-0.5 hover:text-red text-cyan">
+///     <p>text = Cyan</p>
+///     <p>background = darkgreen</p>
+///     <p>hover background = orange </p>
+///   </div> 
+@each $colorsomnia-prop, $colorsomnia-value in $omnia-colors { // first list 'omniacolors'
+
+  @each $maincolorsomnia-prop, $maincolorsomnia-value in $colorsomnia-value { // first list 'omniacolors'
+
+    @each $colorname-prop, $colorname-value in $maincolorsomnia-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 $coloromnia-prop, $coloromnia-value in $colorname-value {
+        
+                @if $coloromnia-prop == $DEFAULT-COLOR-TYPE-VALUE or (($DEFAULT-COLOR-TYPE-VALUE == 'oklch' or $DEFAULT-COLOR-TYPE-VALUE == 'oklab') and $coloromnia-prop == 'hex') {
+                
+                  @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {
+
+                    @if $opacitycolor-value <= 95 {
+
+                      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 $coloromnia-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 $coloromnia-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' {
+                    // Use token from oc-colors.css so one source of truth; class matches --color-{name}-{step}.
+                    background-color: var(--color-#{$color-name}-#{$step});
+                  }
+
+                  @if $DEFAULT-COLOR-TYPE-VALUE == 'oklab' {
+                    // Same token naming as oklch; oc-colors emits from hex so token is shared.
+                    background-color: var(--color-#{$color-name}-#{$step});
+                  }
+                }    
+              }
+            }
+
+          #{".#{$pseudoclasses-value}" + "text-" + string.to-lower-case("#{$colorname-prop}") + $opacity-suffix}{
+      
+            @each $coloromnia-prop, $coloromnia-value in $colorname-value {
+      
+              @if $coloromnia-prop == $DEFAULT-COLOR-TYPE-VALUE or (($DEFAULT-COLOR-TYPE-VALUE == 'oklch' or $DEFAULT-COLOR-TYPE-VALUE == 'oklab') and $coloromnia-prop == 'hex') {
+              
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' { 
+
+                  @if $opacitycolor-value <= 95 {
+
+                    color: $coloromnia-value+#{$opacitycolor-value}; 
+
+                  } @else {
+
+                    color: $coloromnia-value;  
+                  }                  
+                }
+      
+                @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+                  
+                  $h:(); $s:(); $l:();
+                  
+                  @each $color-prop, $color-value in $coloromnia-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 $coloromnia-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 OMNIA Colors properties */

package/scss/utilities/_colors_ral.scss

@@ -0,0 +1,151 @@
+// SCSS Document 
+// File: src/scss/utilities/_colors_ral.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 '../utilities/' as *;
+
+/* The RAL Colors properties */
+///
+/// @group ColorsRAL
+///
+
+///
+/// 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 
+/// maincolorsomnia-prop, colorname-prop, and pseudoclasses-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.
+/// 
+/// This site displays a review of standard colors according the Classic RAL System. 
+/// RAL is used for information defining standard colors for paint and coatings. 
+/// It is the most popular Central European Color Standard used today. 
+/// The colors are used in architecture, construction, industry and road safety. 
+/// The RAL colors in this chart have been matched as closely as possible.
+/// 
+/// * RAL 1xxx (geel): RAL 1000 groenbeige - RAL 1037 zonnegeel (40 kleuren)
+/// * RAL 2xxx (oranje): RAL 2000 geeloranje - RAL 2013 parelmoeroranje (14 kleuren)
+/// * RAL 3xxx (rood): RAL 3000 vuurrood - RAL 3033 parelmoerlichtrood (34 kleuren)
+/// * RAL 4xxx (violet): RAL 4001 roodlila - RAL 4012 parelmoerlichtviolet (12 kleuren)
+/// * RAL 5xxx (blauw): RAL 5000 paarsblauw - RAL 5026 parelmoernachtblauw (25 kleuren)
+/// * RAL 6xxx (groen): RAL 6000 patinagroen - RAL 6038 briljantgroen (38 kleuren)
+/// * RAL 7xxx (grijs): RAL 7000 pelsgrijs - RAL 7048 parelmoermuisgrijs (38 kleuren)
+/// * RAL 8xxx (bruin): RAL 8000 groenbruin - RAL 8029 parelmoerkoper (20 kleuren)
+/// * RAL 9xxx (wit/zwart): RAL 9001 crèmewit - RAL 9023 parelmoerdonkergrijs (14 kleuren)
+///
+/// @group ColorsRAL
+/// @name colorsral
+/// @link src/scss/utilities/_colors_ral.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require {variable} $colorsral
+/// @require {variable} $pseudoclasses
+/// @require str-replace
+/// @example scss - colors class
+///   @each $colorsral-prop, $colorsral-value in $ral-colors { // first list 'ralcolors'
+///   @each $maincolorsral-prop, $maincolorsral-value in $colorsral-value { // first list 'ralcolors'
+///     @each $colorname-prop, $colorname-value in $maincolorsral-value { // second list 'colors name'
+///       @each $pseudoclasses-prop, $pseudoclasses-value in $pseudoclasses { // make the pseudo classes
+///         #{".#{$pseudoclasses-value}" + "bg-" + to-lower-case("#{$colorname-prop}"+ "#{$pseudoclasses-prop}")}{
+///           @each $colorral-prop, $colorral-value in $colorname-value {
+///             @if $colorral-prop == $DEFAULT-COLOR-TYPE-VALUE {
+///               @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {  
+///                 background-color: $colorral-value;  
+///               };
+///               @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+///                 $h:(); $s:(); $l:();
+///                 @each $color-prop, $color-value in $colorral-value {
+///                     @if $color-prop == 'h' { $h: #{$color-value}; }
+///                     @if $color-prop == 's' { $s: #{$color-value}+'%'; }
+///                     @if $color-prop == 'l' { $l: #{$color-value}+'%'; }
+///                 };
+///                 background-color: #{'hsl('+ $h + ', ' + $s + ', ' +  $l + ')'}; 
+///               };
+///               @if $DEFAULT-COLOR-TYPE-VALUE == 'rgb' { 
+///                 $r:(); $g:(); $b:();
+///                 @each $color-prop, $color-value in $colorral-value {
+///                     @if $color-prop == 'r' { $r: #{$color-value}; }
+///                     @if $color-prop == 'g' { $g: #{$color-value}; }
+///                     @if $color-prop == 'b' { $b: #{$color-value}; }
+///                 };
+///                 background-color: #{'rgb('+ $r  $g  $b + ')'}; 
+///               };
+///             };   
+///           };
+///         };
+///         #{".#{$pseudoclasses-value}" + "text-" + to-lower-case("#{$colorname-prop}"+ "#{$pseudoclasses-prop}")}{
+///           @each $colorral-prop, $colorral-value in $colorname-value {
+///             @if $colorral-prop == $DEFAULT-COLOR-TYPE-VALUE {
+///               @if $DEFAULT-COLOR-TYPE-VALUE == 'hex' or $DEFAULT-COLOR-TYPE-VALUE == 'websafe' {   
+///                 color: $colorral-value;  
+///               };
+///               @if $DEFAULT-COLOR-TYPE-VALUE == 'hsl' { 
+///                 $h:(); $s:(); $l:();
+///                 @each $color-prop, $color-value in $colorral-value {
+///                     @if $color-prop == 'h' { $h: #{$color-value}; }
+///                     @if $color-prop == 's' { $s: #{$color-value}+'%'; }
+///                     @if $color-prop == 'l' { $l: #{$color-value}+'%'; }
+///                 };
+///                 color: #{'hsl('+ $h + ', ' + $s + ', ' + $l + ')'}; 
+///               };
+///               @if $DEFAULT-COLOR-TYPE-VALUE == 'rgb' { 
+///                 $r:(); $g:(); $b:();
+///                 @each $color-prop, $color-value in $colorral-value {
+///                     @if $color-prop == 'r' { $r: #{$color-value}; }
+///                     @if $color-prop == 'g' { $g: #{$color-value}; }
+///                     @if $color-prop == 'b' { $b: #{$color-value}; }
+///                 };
+///                 color: #{'rgb('+ $r  $g  $b + ')'}; 
+///               };
+///             };    
+///           };
+///         };
+///       };
+///     };
+///   };
+/// };
+/// @example html - use background, text and hover-color class
+///   <div class="bg-ral1003 w-20 h-12 p-0.5 hover:bg-ral1005">
+///     <p class="text-ral1036">Signal yellow, background = ral1003, hover background = ral1036 </p>
+///     <p class="text-ral2005">text = ral2005</p>
+///     <p class="text-ral3002">background = ral1003</p>
+///     <p class="text-ral1005">hover background = ral1005 </p>
+///   </div> 
+@each $colorsral-prop, $colorsral-value in $ral-colors { // first list 'ralcolors'
+
+  @each $maincolorsral-prop, $maincolorsral-value in $colorsral-value { // first list 'ralcolors'
+
+    @each $colorname-prop, $colorname-value in $maincolorsral-value { // second list 'colors name'
+
+      $ral-name: string.to-lower-case(#{$colorname-prop});
+      @each $pseudoclasses-prop, $pseudoclasses-value in $pseudoclasses { // make the pseudo classes
+
+        #{".#{$pseudoclasses-value}" + "bg-" + $ral-name + "#{$pseudoclasses-prop}"}{
+          background-color: var(--color-#{$ral-name});
+        }
+
+        #{".#{$pseudoclasses-value}" + "text-" + $ral-name + "#{$pseudoclasses-prop}"}{
+          color: var(--color-#{$ral-name});
+        }
+      }
+    }
+  }
+};
+
+/* End RAL Colors properties */

package/scss/utilities/_colors_tokens.scss

@@ -0,0 +1,87 @@
+// File: src/scss/utilities/_colors_tokens.scss
+// Description: CSS custom properties for Omnia/HTML colors under @supports (color: oklch(...)).
+// Copyright: 2021-2026 Birdycom
+// Framework: OmniaCSS
+// Purpose: Emit tone/mix tokens for Omnia & HTML; single token per color for RAL.
+// Sources: $omnia-colors, $html-colors, $ral-colors; $opacitycolor, $color-mix-steps from _variables_effects; oc-tone-color() from _color_tone.scss.
+
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use '../utilities/' as *;
+
+/* ===================================================================
+   COLOR TOKENS (@supports oklch)
+   Omnia/HTML: --color-{name}-{step} (tone), --color-{name}-mix-{step} (color-mix).
+   RAL: --color-{name} only (one value per RAL code, no steps).
+   Use: var(--color-red-50); var(--color-red-mix-50); var(--color-ral9023);
+   =================================================================== */
+
+@mixin _emit-color-tokens($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 {
+          $oklch-color: color.to-space($hex, oklch);
+          $name: string.to-lower-case(#{$colorname-prop});
+
+          @each $opacitycolor-prop, $opacitycolor-value in $opacitycolor {
+            $step: list.nth($opacitycolor-value, 1);
+            $tone-color: oc-tone-color($oklch-color, $step);
+            --color-#{$name}-#{$step}: #{$tone-color};
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Emit --color-{name}-mix-{step} for color-mix(in oklch, color step%, transparent). Steps from $color-mix-steps.
+@mixin _emit-color-mix-tokens($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 {
+          $oklch-color: color.to-space($hex, oklch);
+          $name: string.to-lower-case(#{$colorname-prop});
+          @each $step in $color-mix-steps {
+            --color-#{$name}-mix-#{$step}: color-mix(in oklch, #{$oklch-color} #{$step * 1%}, transparent);
+          }
+        }
+      }
+    }
+  }
+}
+
+/// RAL: one token per color only (--color-ral1000, --color-ral9023, etc.), no tone/mix steps.
+@mixin _emit-ral-tokens($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 {
+          $oklch-color: color.to-space($hex, oklch);
+          $name: string.to-lower-case(#{$colorname-prop});
+          --color-#{$name}: #{$oklch-color};
+        }
+      }
+    }
+  }
+}
+
+@supports (color: oklch(0 0 0)) {
+  :root,
+  :host {
+    /* Omnia palette (tone + mix) */
+    @include _emit-color-tokens($omnia-colors);
+    @include _emit-color-mix-tokens($omnia-colors);
+    /* HTML palette (tone + mix) */
+    @include _emit-color-tokens($html-colors);
+    @include _emit-color-mix-tokens($html-colors);
+    /* RAL palette (single token per color, no steps) */
+    @include _emit-ral-tokens($ral-colors);
+  }
+}

package/scss/utilities/_container.scss

@@ -0,0 +1,58 @@
+// SCSS Document 
+// File: src/scss/variables/__variables.scss
+// Description: Default string items for using in the CSS properties 
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// class: container
+
+@use '../utilities/' as *;
+
+/* The Container property */
+
+///
+/// The Layout class within OmniaCSS
+/// @group Container
+///
+
+///
+/// CSS container class with max-width and breakpoints
+/// @group Container
+/// @name container
+/// @link src/scss/utilities/_container.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require {mixin} respond-to
+/// @example html - use container class
+///   <div class="container">
+///     <h1>Design system</h1>
+///     <h3>Colors</h3>
+///   </div>
+.container {
+  width: 100%;
+  max-width: 100%;
+  margin-inline: auto; /* Center the container horizontally */
+  padding-inline: 1rem; /* Default horizontal padding */
+
+  @include respond-to('small') {
+    max-width: 41rem;
+  }
+
+  @include respond-to('medium') {
+    max-width: 60rem;
+  }
+
+  @include respond-to('large') {
+    max-width: 80rem;
+  }
+}
+
+/* Container Query Types */
+.cq-inline { container-type: inline-size; }
+.cq-normal { container-type: normal; }
+
+/* End Container property */