@birdycom/omniacss 0.11.0 → 0.11.2

package/scss/utilities/_borders_extended.scss

@@ -1,97 +1,97 @@
-// SCSS Document
-// File: src/scss/utilities/_borders_extended.scss
-// Description: Per-side border style/color, axis borders, logical borders, logical radius and border-image.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Complements _borders_outlines.scss (.border-t*, .round-tl*): adds what was still missing.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
-// Map: per-side style -> per-side color -> axis widths -> logical widths -> logical radius -> border-image
-
-$_sides: ('t': top, 'r': right, 'b': bottom, 'l': left);
-$_styles: (solid, dashed, dotted, double, none);
-
-/* Per-side border style */
-@each $key, $side in $_sides {
-  @each $style in $_styles {
-    .border-#{$key}-#{$style} { border-#{$side}-style: $style; }
-  }
-}
-
-/* Per-side border color (combine with a color utility on the element for the rest) */
-@each $key, $side in $_sides {
-  .border-#{$key}-current { border-#{$side}-color: currentcolor; }
-  .border-#{$key}-transparent { border-#{$side}-color: transparent; }
-}
-
-/* Axis borders: x = left + right, y = top + bottom */
-@each $w in (0, 1, 2, 4, 8) {
-  .border-x-#{$w} { border-left-width: #{$w}px; border-right-width: #{$w}px; }
-  .border-y-#{$w} { border-top-width: #{$w}px; border-bottom-width: #{$w}px; }
-}
-
-/* Logical borders — follow writing direction (s = inline-start, e = inline-end, bs/be = block) */
-@each $w in (0, 1, 2, 4) {
-  .border-s-#{$w} { border-inline-start-width: #{$w}px; }
-  .border-e-#{$w} { border-inline-end-width: #{$w}px; }
-  .border-bs-#{$w} { border-block-start-width: #{$w}px; }
-  .border-be-#{$w} { border-block-end-width: #{$w}px; }
-  .border-inline-#{$w} { border-inline-width: #{$w}px; }
-  .border-block-#{$w} { border-block-width: #{$w}px; }
-}
-.border-inline-solid { border-inline-style: solid; }
-.border-block-solid { border-block-style: solid; }
-.border-inline-current { border-inline-color: currentcolor; }
-.border-block-current { border-block-color: currentcolor; }
-
-/* Logical border radius — ss = start-start, se = start-end, es = end-start, ee = end-end */
-@each $key, $prop in ('ss': start-start, 'se': start-end, 'es': end-start, 'ee': end-end) {
-  @each $r, $v in ('none': 0, 'sm': 0.25rem, 'md': 0.5rem, 'lg': 1rem, 'full': 9999px) {
-    .round-#{$key}-#{$r} { border-#{$prop}-radius: $v; }
-  }
-}
-
-/* Border image */
-.border-image-none { border-image: none; }
-.border-image-gradient {
-  border-image-source: linear-gradient(var(--oc-border-image-angle, 135deg), var(--oc-gradient-from, currentcolor), var(--oc-gradient-to, transparent));
-  border-image-slice: 1;
-}
-.border-image-stripes {
-  border-image-source: repeating-linear-gradient(45deg, var(--oc-gradient-from, currentcolor) 0 6px, var(--oc-gradient-to, transparent) 6px 12px);
-  border-image-slice: 1;
-}
-.border-image-slice-1 { border-image-slice: 1; }
-.border-image-slice-fill { border-image-slice: 1 fill; }
-.border-image-repeat-stretch { border-image-repeat: stretch; }
-.border-image-repeat-repeat { border-image-repeat: repeat; }
-.border-image-repeat-round { border-image-repeat: round; }
-.border-image-repeat-space { border-image-repeat: space; }
-.border-image-width-1 { border-image-width: 1; }
-.border-image-width-auto { border-image-width: auto; }
-.border-image-outset-0 { border-image-outset: 0; }
-.border-image-outset-1 { border-image-outset: 0.25rem; }
-.border-image-outset-2 { border-image-outset: 0.5rem; }
-
-/* Side shorthands — a 1px solid line in the current color on one side */
-@each $key, $side in $_sides {
-  .border-#{$key}-line { border-#{$side}: 1px solid currentcolor; }
-}
-
-/* Logical side shorthands, styles and colors */
-@each $key, $side in ('s': inline-start, 'e': inline-end, 'bs': block-start, 'be': block-end) {
-  .border-#{$key}-line { border-#{$side}: 1px solid currentcolor; }
-  .border-#{$key}-solid { border-#{$side}-style: solid; }
-  .border-#{$key}-dashed { border-#{$side}-style: dashed; }
-  .border-#{$key}-current { border-#{$side}-color: currentcolor; }
-}
-.border-inline-line { border-inline: 1px solid currentcolor; }
-.border-block-line { border-block: 1px solid currentcolor; }
-
-/* Per-corner radius (longhands) */
-@each $key, $corner in ('tl': top-left, 'tr': top-right, 'bl': bottom-left, 'br': bottom-right) {
-  @each $r, $v in ('none': 0, 'sm': 0.25rem, 'md': 0.5rem, 'lg': 1rem, 'full': 9999px) {
-    .radius-#{$key}-#{$r} { border-#{$corner}-radius: $v; }
-  }
-}
+// SCSS Document
+// File: src/scss/utilities/_borders_extended.scss
+// Description: Per-side border style/color, axis borders, logical borders, logical radius and border-image.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Complements _borders_outlines.scss (.border-t*, .round-tl*): adds what was still missing.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
+// Map: per-side style -> per-side color -> axis widths -> logical widths -> logical radius -> border-image
+
+$_sides: ('t': top, 'r': right, 'b': bottom, 'l': left);
+$_styles: (solid, dashed, dotted, double, none);
+
+/* Per-side border style */
+@each $key, $side in $_sides {
+  @each $style in $_styles {
+    .border-#{$key}-#{$style} { border-#{$side}-style: $style; }
+  }
+}
+
+/* Per-side border color (combine with a color utility on the element for the rest) */
+@each $key, $side in $_sides {
+  .border-#{$key}-current { border-#{$side}-color: currentcolor; }
+  .border-#{$key}-transparent { border-#{$side}-color: transparent; }
+}
+
+/* Axis borders: x = left + right, y = top + bottom */
+@each $w in (0, 1, 2, 4, 8) {
+  .border-x-#{$w} { border-left-width: #{$w}px; border-right-width: #{$w}px; }
+  .border-y-#{$w} { border-top-width: #{$w}px; border-bottom-width: #{$w}px; }
+}
+
+/* Logical borders — follow writing direction (s = inline-start, e = inline-end, bs/be = block) */
+@each $w in (0, 1, 2, 4) {
+  .border-s-#{$w} { border-inline-start-width: #{$w}px; }
+  .border-e-#{$w} { border-inline-end-width: #{$w}px; }
+  .border-bs-#{$w} { border-block-start-width: #{$w}px; }
+  .border-be-#{$w} { border-block-end-width: #{$w}px; }
+  .border-inline-#{$w} { border-inline-width: #{$w}px; }
+  .border-block-#{$w} { border-block-width: #{$w}px; }
+}
+.border-inline-solid { border-inline-style: solid; }
+.border-block-solid { border-block-style: solid; }
+.border-inline-current { border-inline-color: currentcolor; }
+.border-block-current { border-block-color: currentcolor; }
+
+/* Logical border radius — ss = start-start, se = start-end, es = end-start, ee = end-end */
+@each $key, $prop in ('ss': start-start, 'se': start-end, 'es': end-start, 'ee': end-end) {
+  @each $r, $v in ('none': 0, 'sm': 0.25rem, 'md': 0.5rem, 'lg': 1rem, 'full': 9999px) {
+    .round-#{$key}-#{$r} { border-#{$prop}-radius: $v; }
+  }
+}
+
+/* Border image */
+.border-image-none { border-image: none; }
+.border-image-gradient {
+  border-image-source: linear-gradient(var(--oc-border-image-angle, 135deg), var(--oc-gradient-from, currentcolor), var(--oc-gradient-to, transparent));
+  border-image-slice: 1;
+}
+.border-image-stripes {
+  border-image-source: repeating-linear-gradient(45deg, var(--oc-gradient-from, currentcolor) 0 6px, var(--oc-gradient-to, transparent) 6px 12px);
+  border-image-slice: 1;
+}
+.border-image-slice-1 { border-image-slice: 1; }
+.border-image-slice-fill { border-image-slice: 1 fill; }
+.border-image-repeat-stretch { border-image-repeat: stretch; }
+.border-image-repeat-repeat { border-image-repeat: repeat; }
+.border-image-repeat-round { border-image-repeat: round; }
+.border-image-repeat-space { border-image-repeat: space; }
+.border-image-width-1 { border-image-width: 1; }
+.border-image-width-auto { border-image-width: auto; }
+.border-image-outset-0 { border-image-outset: 0; }
+.border-image-outset-1 { border-image-outset: 0.25rem; }
+.border-image-outset-2 { border-image-outset: 0.5rem; }
+
+/* Side shorthands — a 1px solid line in the current color on one side */
+@each $key, $side in $_sides {
+  .border-#{$key}-line { border-#{$side}: 1px solid currentcolor; }
+}
+
+/* Logical side shorthands, styles and colors */
+@each $key, $side in ('s': inline-start, 'e': inline-end, 'bs': block-start, 'be': block-end) {
+  .border-#{$key}-line { border-#{$side}: 1px solid currentcolor; }
+  .border-#{$key}-solid { border-#{$side}-style: solid; }
+  .border-#{$key}-dashed { border-#{$side}-style: dashed; }
+  .border-#{$key}-current { border-#{$side}-color: currentcolor; }
+}
+.border-inline-line { border-inline: 1px solid currentcolor; }
+.border-block-line { border-block: 1px solid currentcolor; }
+
+/* Per-corner radius (longhands) */
+@each $key, $corner in ('tl': top-left, 'tr': top-right, 'bl': bottom-left, 'br': bottom-right) {
+  @each $r, $v in ('none': 0, 'sm': 0.25rem, 'md': 0.5rem, 'lg': 1rem, 'full': 9999px) {
+    .radius-#{$key}-#{$r} { border-#{$corner}-radius: $v; }
+  }
+}

package/scss/utilities/_borders_outlines.scss

@@ -1,161 +1,161 @@
-// SCSS Document
-// File: src/scss/utilities/_borders_outlines.scss
-// Description: Border radius, border width/style/color, outline width/style/color/offset.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.2.0
-// Framework: OmniaCSS
-// Properties: border-radius, border-width, border-style, border-color, outline-width, outline-style, outline-color, outline-offset.
-// Values: from $roundsizes, $bordersizes, $borderstyles, $bordercolors (neutrals), $outlinesizes, $outlinestyles, $outlinecolors (neutrals), $outlineoffsets in _variables_layout.scss; palette border/outline colors from $omnia-colors, $html-colors, $ral-colors (var(--color-*) from oc-colors.css).
-
-@use "sass:string";
-@use "sass:map";
-@use "sass:list";
-@use '../utilities/' as *;
-
-/* ===================================================================
-   BORDERS & OUTLINES
-   Generated from variable maps (same structure as $bordersizes).
-   Source: src/scss/variables/_variables_layout.scss
-   =================================================================== */
-
-///
-/// Border radius, border width/style/color, outline utilities.
-/// @group BordersOutlines
-/// @name bordersoutlines
-/// @link src/scss/utilities/_borders_outlines.scss
-/// @since 0.2.0
-/// @author Serge Cools
-/// @require {variable} $roundsizes
-/// @require {variable} $bordersizes
-/// @require {variable} $borderstyles
-/// @require {variable} $bordercolors
-/// @require {variable} $outlinesizes
-/// @require {variable} $outlinestyles
-/// @require {variable} $outlinecolors
-/// @require {variable} $outlineoffsets
-/// @example scss - rounded from $roundsizes
-///   @each $key, $val in $roundsizes { .rounded-#{string.slice($key, 7)} { border-radius: $val; } }
-/// @example html
-///   <div class="rounded-lg border-2 border-solid border-red-500 outline-2 outline-offset-2">...</div>
-///
-
-/* Border radius — from $roundsizes; class prefix .rounded- (round-* → rounded-*) */
-@each $key, $val in $roundsizes {
-  .#{$key} {
-    border-radius: $val;
-  }
-}
-
-/* Border width — from $bordersizes; class = key (e.g. .border-none, .border-1, .border-t1) */
-@each $key, $val in $bordersizes {
-  .#{$key} {
-    border-width: $val;
-  }
-}
-
-/* Divider — from $dividersizes; border between direct children (flex/grid). Uses :not(:last-child) with border-bottom (h) or border-inline-end (v). */
-@each $key, $val in $dividersizes {
-  @if string.index($key, "divider-h") {
-    .#{$key} > :not(:last-child) {
-      border-top-width: 0;
-      border-bottom-width: $val;
-    }
-  } @else {
-    .#{$key} > :not(:last-child) {
-      border-inline-start-width: 0;
-      border-inline-end-width: $val;
-    }
-  }
-}
-
-/* Border style — from $borderstyles */
-@each $key, $val in $borderstyles {
-  .#{$key} {
-    border-style: $val;
-  }
-}
-
-/* Border color — neutrals from $bordercolors; palette from Omnia/HTML (var) and RAL */
-@each $key, $val in $bordercolors {
-  .#{$key} {
-    border-color: $val;
-  }
-}
-
-/* Border/outline color — Omnia & HTML palettes (var(--color-{name}-{step}), same as .bg-* / .text-*) */
-@mixin _border-outline-from-palette($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 $opacitycolor-prop, $opacitycolor-value in $opacitycolor {
-            $step: list.nth($opacitycolor-value, 1);
-            .border-#{$name}-#{$step} {
-              border-color: var(--color-#{$name}-#{$step});
-            }
-            .outline-#{$name}-#{$step} {
-              outline-color: var(--color-#{$name}-#{$step});
-            }
-          }
-        }
-      }
-    }
-  }
-}
-@include _border-outline-from-palette($omnia-colors);
-@include _border-outline-from-palette($html-colors);
-
-/* Border/outline color — RAL palette (single token --color-{name} from oc-colors.css) */
-@each $colorsral-prop, $colorsral-value in $ral-colors {
-  @each $maincolorsral-prop, $maincolorsral-value in $colorsral-value {
-    @each $colorname-prop, $colorname-value in $maincolorsral-value {
-      $name: string.to-lower-case(#{$colorname-prop});
-      .border-#{$name} {
-        border-color: var(--color-#{$name});
-      }
-      .outline-#{$name} {
-        outline-color: var(--color-#{$name});
-      }
-    }
-  }
-}
-
-/* Outline width — from $outlinesizes (same structure as $bordersizes) */
-@each $key, $val in $outlinesizes {
-  .#{$key} {
-    outline-width: $val;
-  }
-}
-
-/* Outline style — from $outlinestyles; .outline-hidden uses full outline for a11y (visible on focus, invisible by default) */
-@each $key, $val in $outlinestyles {
-  @if $key == "outline-hidden" {
-    .outline-hidden {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-    }
-  } @else {
-    .#{$key} {
-      outline-style: $val;
-    }
-  }
-}
-
-/* Outline color — neutrals from $outlinecolors (palette classes generated above) */
-@each $key, $val in $outlinecolors {
-  .#{$key} {
-    outline-color: $val;
-  }
-}
-
-/* Outline offset — from $outlineoffsets (same structure as $bordersizes) */
-@each $key, $val in $outlineoffsets {
-  .#{$key} {
-    outline-offset: $val;
-  }
-}
-
-/* End Borders & Outlines */
+// SCSS Document
+// File: src/scss/utilities/_borders_outlines.scss
+// Description: Border radius, border width/style/color, outline width/style/color/offset.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: border-radius, border-width, border-style, border-color, outline-width, outline-style, outline-color, outline-offset.
+// Values: from $roundsizes, $bordersizes, $borderstyles, $bordercolors (neutrals), $outlinesizes, $outlinestyles, $outlinecolors (neutrals), $outlineoffsets in _variables_layout.scss; palette border/outline colors from $omnia-colors, $html-colors, $ral-colors (var(--color-*) from oc-colors.css).
+
+@use "sass:string";
+@use "sass:map";
+@use "sass:list";
+@use '../utilities/' as *;
+
+/* ===================================================================
+   BORDERS & OUTLINES
+   Generated from variable maps (same structure as $bordersizes).
+   Source: src/scss/variables/_variables_layout.scss
+   =================================================================== */
+
+///
+/// Border radius, border width/style/color, outline utilities.
+/// @group BordersOutlines
+/// @name bordersoutlines
+/// @link src/scss/utilities/_borders_outlines.scss
+/// @since 0.2.0
+/// @author Serge Cools
+/// @require {variable} $roundsizes
+/// @require {variable} $bordersizes
+/// @require {variable} $borderstyles
+/// @require {variable} $bordercolors
+/// @require {variable} $outlinesizes
+/// @require {variable} $outlinestyles
+/// @require {variable} $outlinecolors
+/// @require {variable} $outlineoffsets
+/// @example scss - rounded from $roundsizes
+///   @each $key, $val in $roundsizes { .rounded-#{string.slice($key, 7)} { border-radius: $val; } }
+/// @example html
+///   <div class="rounded-lg border-2 border-solid border-red-500 outline-2 outline-offset-2">...</div>
+///
+
+/* Border radius — from $roundsizes; class prefix .rounded- (round-* → rounded-*) */
+@each $key, $val in $roundsizes {
+  .#{$key} {
+    border-radius: $val;
+  }
+}
+
+/* Border width — from $bordersizes; class = key (e.g. .border-none, .border-1, .border-t1) */
+@each $key, $val in $bordersizes {
+  .#{$key} {
+    border-width: $val;
+  }
+}
+
+/* Divider — from $dividersizes; border between direct children (flex/grid). Uses :not(:last-child) with border-bottom (h) or border-inline-end (v). */
+@each $key, $val in $dividersizes {
+  @if string.index($key, "divider-h") {
+    .#{$key} > :not(:last-child) {
+      border-top-width: 0;
+      border-bottom-width: $val;
+    }
+  } @else {
+    .#{$key} > :not(:last-child) {
+      border-inline-start-width: 0;
+      border-inline-end-width: $val;
+    }
+  }
+}
+
+/* Border style — from $borderstyles */
+@each $key, $val in $borderstyles {
+  .#{$key} {
+    border-style: $val;
+  }
+}
+
+/* Border color — neutrals from $bordercolors; palette from Omnia/HTML (var) and RAL */
+@each $key, $val in $bordercolors {
+  .#{$key} {
+    border-color: $val;
+  }
+}
+
+/* Border/outline color — Omnia & HTML palettes (var(--color-{name}-{step}), same as .bg-* / .text-*) */
+@mixin _border-outline-from-palette($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 $opacitycolor-prop, $opacitycolor-value in $opacitycolor {
+            $step: list.nth($opacitycolor-value, 1);
+            .border-#{$name}-#{$step} {
+              border-color: var(--color-#{$name}-#{$step});
+            }
+            .outline-#{$name}-#{$step} {
+              outline-color: var(--color-#{$name}-#{$step});
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@include _border-outline-from-palette($omnia-colors);
+@include _border-outline-from-palette($html-colors);
+
+/* Border/outline color — RAL palette (single token --color-{name} from oc-colors.css) */
+@each $colorsral-prop, $colorsral-value in $ral-colors {
+  @each $maincolorsral-prop, $maincolorsral-value in $colorsral-value {
+    @each $colorname-prop, $colorname-value in $maincolorsral-value {
+      $name: string.to-lower-case(#{$colorname-prop});
+      .border-#{$name} {
+        border-color: var(--color-#{$name});
+      }
+      .outline-#{$name} {
+        outline-color: var(--color-#{$name});
+      }
+    }
+  }
+}
+
+/* Outline width — from $outlinesizes (same structure as $bordersizes) */
+@each $key, $val in $outlinesizes {
+  .#{$key} {
+    outline-width: $val;
+  }
+}
+
+/* Outline style — from $outlinestyles; .outline-hidden uses full outline for a11y (visible on focus, invisible by default) */
+@each $key, $val in $outlinestyles {
+  @if $key == "outline-hidden" {
+    .outline-hidden {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  } @else {
+    .#{$key} {
+      outline-style: $val;
+    }
+  }
+}
+
+/* Outline color — neutrals from $outlinecolors (palette classes generated above) */
+@each $key, $val in $outlinecolors {
+  .#{$key} {
+    outline-color: $val;
+  }
+}
+
+/* Outline offset — from $outlineoffsets (same structure as $bordersizes) */
+@each $key, $val in $outlineoffsets {
+  .#{$key} {
+    outline-offset: $val;
+  }
+}
+
+/* End Borders & Outlines */