@birdycom/omniacss 0.0.0-stage → 0.11.1

package/scss/utilities/_anchor_positioning.scss

@@ -0,0 +1,65 @@
+// SCSS Document
+// File: src/scss/utilities/_anchor_positioning.scss
+// Description: CSS Anchor Positioning utilities — tether an element to an anchor without JavaScript.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .anchor-*, .anchored-*, .anchor-area-*, .anchor-try-* and .anchor-visibility-* classes.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning
+// Note: the anchored element needs position: absolute or fixed (.absolute / .fixed).
+//       Pair .anchor-{name} on the trigger with .anchored-{name} on the positioned element.
+// Map: anchor-name -> position-anchor -> anchor-scope -> position-area -> position-try -> position-visibility
+
+$_anchor-names: ('oc', 'trigger', 'menu', 'tooltip');
+
+/* Anchor name — register an element as anchor */
+@each $name in $_anchor-names {
+  .anchor-#{$name} { anchor-name: --#{$name}; }
+}
+.anchor-none { anchor-name: none; }
+
+/* Position anchor — attach a positioned element to a named anchor */
+@each $name in $_anchor-names {
+  .anchored-#{$name} { position-anchor: --#{$name}; }
+}
+.anchored-auto { position-anchor: auto; }
+
+/* Anchor scope — limit anchor name lookup to a subtree (repeated components) */
+.anchor-scope-all { anchor-scope: all; }
+.anchor-scope-none { anchor-scope: none; }
+
+/* Position area — place the element in a region of the 3×3 grid around the anchor */
+.anchor-area-top { position-area: top; }
+.anchor-area-bottom { position-area: bottom; }
+.anchor-area-left { position-area: left; }
+.anchor-area-right { position-area: right; }
+.anchor-area-center { position-area: center; }
+.anchor-area-top-left { position-area: top left; }
+.anchor-area-top-right { position-area: top right; }
+.anchor-area-bottom-left { position-area: bottom left; }
+.anchor-area-bottom-right { position-area: bottom right; }
+.anchor-area-top-span-right { position-area: top span-right; }
+.anchor-area-bottom-span-right { position-area: bottom span-right; }
+.anchor-area-block-start { position-area: block-start; }
+.anchor-area-block-end { position-area: block-end; }
+.anchor-area-inline-start { position-area: inline-start; }
+.anchor-area-inline-end { position-area: inline-end; }
+
+/* Position try fallbacks — alternatives when the element overflows */
+.anchor-try-none { position-try-fallbacks: none; }
+.anchor-try-flip-block { position-try-fallbacks: flip-block; }
+.anchor-try-flip-inline { position-try-fallbacks: flip-inline; }
+.anchor-try-flip-both { position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
+.anchor-try-order-normal { position-try-order: normal; }
+.anchor-try-order-most-width { position-try-order: most-width; }
+.anchor-try-order-most-height { position-try-order: most-height; }
+
+/* Position visibility — hide the element when its anchor is hidden or it overflows */
+.anchor-visibility-always { position-visibility: always; }
+.anchor-visibility-anchors-visible { position-visibility: anchors-visible; }
+.anchor-visibility-no-overflow { position-visibility: no-overflow; }
+
+/* Anchor size — match the anchor's width (dropdown menus) */
+.w-anchor { width: anchor-size(width); }
+.min-w-anchor { min-width: anchor-size(width); }

package/scss/utilities/_animation_properties.scss

@@ -0,0 +1,143 @@
+// SCSS Document
+// File: src/scss/utilities/_animation_properties.scss
+// Description: Animation longhand utilities, easing functions, motion path (offset-*), the individual
+//              rotate property, transform-box and scroll/view timeline longhands.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .animate-delay-*, .animate-duration-*, .animate-direction-*, .animate-fill-*, .animate-play-*,
+//          .animate-repeat-*, .animate-compose-*, .animate-ease-*, .animate-name-*, .ease-spring/.ease-bounce/.ease-steps-*,
+//          .offset-*, .rotate-prop-*, .transform-box-*, .animate-range-start-*/-end-*, .scroll-timeline-axis-*,
+//          .view-timeline-axis-*, .view-timeline-inset-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations
+// Note: complements _motion_transforms.scss (transition-*, .animate-spin, transform utilities).
+// Map: duration -> delay -> iteration -> direction -> fill-mode -> play-state -> composition -> name
+//      -> easing -> motion path -> rotate property -> transform-box -> timeline longhands
+
+/* Animation duration */
+@each $ms in (75, 150, 300, 500, 700, 1000, 2000) {
+  .animate-duration-#{$ms} { animation-duration: #{$ms}ms; }
+}
+
+/* Animation delay */
+@each $ms in (0, 75, 150, 300, 500, 1000) {
+  .animate-delay-#{$ms} { animation-delay: #{$ms}ms; }
+}
+
+/* Animation iteration count */
+.animate-repeat-1 { animation-iteration-count: 1; }
+.animate-repeat-2 { animation-iteration-count: 2; }
+.animate-repeat-3 { animation-iteration-count: 3; }
+.animate-repeat-infinite { animation-iteration-count: infinite; }
+
+/* Animation direction */
+.animate-direction-normal { animation-direction: normal; }
+.animate-direction-reverse { animation-direction: reverse; }
+.animate-direction-alternate { animation-direction: alternate; }
+.animate-direction-alternate-reverse { animation-direction: alternate-reverse; }
+
+/* Animation fill mode */
+.animate-fill-none { animation-fill-mode: none; }
+.animate-fill-forwards { animation-fill-mode: forwards; }
+.animate-fill-backwards { animation-fill-mode: backwards; }
+.animate-fill-both { animation-fill-mode: both; }
+
+/* Animation play state (e.g. pause on hover with hover:animate-paused in your own CSS) */
+.animate-running { animation-play-state: running; }
+.animate-paused { animation-play-state: paused; }
+
+/* Animation composition */
+.animate-compose-replace { animation-composition: replace; }
+.animate-compose-add { animation-composition: add; }
+.animate-compose-accumulate { animation-composition: accumulate; }
+
+/* Animation name — pair with .animate-duration-* (keyframes from _motion_transforms.scss) */
+.animate-name-none { animation-name: none; }
+.animate-name-spin { animation-name: oc-spin; }
+.animate-name-pulse { animation-name: oc-pulse; }
+.animate-name-bounce { animation-name: oc-bounce; }
+.animate-name-ping { animation-name: oc-ping; }
+
+/* Easing functions — animations (transitions use .ease-*) */
+.animate-ease-linear { animation-timing-function: linear; }
+.animate-ease-in { animation-timing-function: ease-in; }
+.animate-ease-out { animation-timing-function: ease-out; }
+.animate-ease-in-out { animation-timing-function: ease-in-out; }
+.animate-ease-steps-4 { animation-timing-function: steps(4, end); }
+.animate-ease-spring {
+  animation-timing-function: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
+}
+
+/* Easing functions — transitions: spring/bounce via linear(), stepped */
+.ease-spring {
+  transition-timing-function: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
+}
+.ease-bounce {
+  transition-timing-function: linear(0, 0.063, 0.25, 0.563, 1 36.4%, 0.812, 0.75, 0.813, 1 72.7%, 0.953, 0.938, 0.953, 1 90.9%, 0.984, 1);
+}
+.ease-steps-4 { transition-timing-function: steps(4, end); }
+.ease-step-start { transition-timing-function: step-start; }
+.ease-step-end { transition-timing-function: step-end; }
+
+/* Motion path — move an element along a path */
+.offset-path-none { offset-path: none; }
+.offset-path-circle { offset-path: circle(40% at 50% 50%); }
+.offset-path-ellipse { offset-path: ellipse(45% 35% at 50% 50%); }
+.offset-path-inset { offset-path: inset(10% round 1rem); }
+.offset-path-wave { offset-path: path("M 0 40 C 40 0, 80 80, 120 40 S 200 0, 240 40"); }
+.offset-path-ray { offset-path: ray(45deg closest-side); }
+@each $p in (0, 25, 50, 75, 100) {
+  .offset-distance-#{$p} { offset-distance: #{$p * 1%}; }
+}
+.offset-rotate-auto { offset-rotate: auto; }
+.offset-rotate-reverse { offset-rotate: reverse; }
+.offset-rotate-0 { offset-rotate: 0deg; }
+.offset-anchor-center { offset-anchor: center; }
+.offset-anchor-auto { offset-anchor: auto; }
+.offset-position-normal { offset-position: normal; }
+.offset-position-center { offset-position: center; }
+.offset-none { offset: none; }
+
+/* Follow the path from 0% to 100% */
+@keyframes oc-follow-path {
+  from { offset-distance: 0%; }
+  to { offset-distance: 100%; }
+}
+.animate-follow-path { animation: oc-follow-path 3s ease-in-out infinite alternate; }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-follow-path { animation: none; }
+}
+
+/* Individual rotate property (independent from transform) */
+@each $deg in (0, 45, 90, 180, -45, -90) {
+  $name: '#{$deg}';
+  @if $deg < 0 {
+    $name: 'n#{-$deg}';
+  }
+  .rotate-prop-#{$name} { rotate: #{$deg}deg; }
+}
+.rotate-prop-x-180 { rotate: x 180deg; }
+.rotate-prop-y-180 { rotate: y 180deg; }
+
+/* Transform box — reference box for transform-origin (SVG) */
+.transform-box-content { transform-box: content-box; }
+.transform-box-border { transform-box: border-box; }
+.transform-box-fill { transform-box: fill-box; }
+.transform-box-stroke { transform-box: stroke-box; }
+.transform-box-view { transform-box: view-box; }
+
+/* Timeline longhands */
+.animate-range-start-entry { animation-range-start: entry; }
+.animate-range-start-contain { animation-range-start: contain; }
+.animate-range-end-exit { animation-range-end: exit; }
+.animate-range-end-contain { animation-range-end: contain; }
+.scroll-timeline-axis-block { scroll-timeline-axis: block; }
+.scroll-timeline-axis-inline { scroll-timeline-axis: inline; }
+.scroll-timeline-name-oc { scroll-timeline-name: --oc-timeline; }
+.view-timeline-axis-block { view-timeline-axis: block; }
+.view-timeline-axis-inline { view-timeline-axis: inline; }
+.view-timeline-name-oc { view-timeline-name: --oc-timeline; }
+.view-timeline-inset-auto { view-timeline-inset: auto; }
+.view-timeline-inset-10 { view-timeline-inset: 10%; }

package/scss/utilities/_aspect.scss

@@ -0,0 +1,73 @@
+// SCSS Document 
+// File: src/utilities/_aspect.scss
+// Description: CSS layout properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: aspect-ratio
+// Values: 
+
+@use "sass:string";
+@use '../utilities/' as *;
+
+/* The aspect-ratio properties */
+
+///
+/// The aspect-ratio Property
+/// @group aspect
+///
+
+///
+/// The aspect-ratio property sets the Text decoration.
+/// @group aspect
+/// @name aspect
+/// @link src/scss/utilities/_variables_layout.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require {variable} $aspect
+/// @example scss -  aspect-ratio class
+///   @each $aspect-prop, $aspect-value in $aspect {
+///       #{".#{$aspect-prop}"}{
+///         aspect-ratio: $aspect-value ;
+///       }
+///   }
+/// @example html - use text decoration line class
+///   <div class="h-100vh">
+///     <div class="output" >
+///     <p>1. <code>aspect-ratio: aspect-auto</code></p>
+///       <section class="h-full text-center">
+///         <img class="aspect-auto w-auto h-full" id="example-element" src="../image/plumeria.jpg" class="transition-all" width="466" height="640">
+///       </section>
+///     </div> 
+///     <div class="output" >
+///     <p>2. <code>aspect-ratio: aspect-1 (1/1)</code></p>
+///      <section class="h-full text-center">
+///         <img class="aspect-1 w-auto h-full" id="example-element" src="../image/plumeria.jpg" class="transition-all" width="466" height="640">
+///      </section>
+///    </div> 
+///     <div class="output" >
+///     <p>3. <code>aspect-ratio: aspect-16 (16/9)</code></p>
+///       <section class="h-full text-center">
+///        <img class="aspect-16 w-auto h-full" id="example-element" src="../image/plumeria.jpg" class="transition-all" width="466" height="640">
+///      </section>
+///    </div> 
+///     <div class="output" >
+///     <p>4. <code>aspect-ratio: aspect-21 (21/9)</code></p>
+///       <section class="h-full text-center">
+///        <img class="aspect-21 w-auto h-full" id="example-element" src="../image/plumeria.jpg" class="transition-all" width="466" height="640">
+///      </section>
+///    </div>
+///   </div>
+@each $aspect-prop, $aspect-value in $aspect {
+
+  #{".#{$aspect-prop}"}{
+
+    aspect-ratio: string.unquote($aspect-value) ;
+
+  }
+}
+/* End The aspect-ratio properties */

package/scss/utilities/_backgrounds.scss

@@ -0,0 +1,49 @@
+// SCSS Document
+// File: src/scss/utilities/_backgrounds.scss
+// Map: attachment -> clip -> image -> origin -> position -> repeat -> size
+
+/* Background attachment */
+.bg-fixed { background-attachment: fixed; }
+.bg-local { background-attachment: local; }
+.bg-scroll { background-attachment: scroll; }
+
+/* Background clip */
+.bg-clip-border { background-clip: border-box; }
+.bg-clip-padding { background-clip: padding-box; }
+.bg-clip-content { background-clip: content-box; }
+.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
+
+/* Background image */
+.bg-image-none { background-image: none; }
+.bg-image-gradient-to-r { background-image: linear-gradient(to right, var(--color-vividblue-60), var(--color-vividblue-90)); }
+.bg-image-gradient-to-b { background-image: linear-gradient(to bottom, var(--color-vividblue-60), var(--color-vividblue-90)); }
+.bg-image-radial { background-image: radial-gradient(circle, var(--color-vividblue-60), var(--color-vividblue-95)); }
+
+/* Background origin */
+.bg-origin-border { background-origin: border-box; }
+.bg-origin-padding { background-origin: padding-box; }
+.bg-origin-content { background-origin: content-box; }
+
+/* Background position */
+.bg-pos-center { background-position: center; }
+.bg-pos-top { background-position: top; }
+.bg-pos-bottom { background-position: bottom; }
+.bg-pos-left { background-position: left; }
+.bg-pos-right { background-position: right; }
+.bg-pos-left-top { background-position: left top; }
+.bg-pos-left-bottom { background-position: left bottom; }
+.bg-pos-right-top { background-position: right top; }
+.bg-pos-right-bottom { background-position: right bottom; }
+
+/* Background repeat */
+.bg-repeat { background-repeat: repeat; }
+.bg-no-repeat { background-repeat: no-repeat; }
+.bg-repeat-x { background-repeat: repeat-x; }
+.bg-repeat-y { background-repeat: repeat-y; }
+.bg-repeat-round { background-repeat: round; }
+.bg-repeat-space { background-repeat: space; }
+
+/* Background size */
+.bg-size-auto { background-size: auto; }
+.bg-cover { background-size: cover; }
+.bg-contain { background-size: contain; }

package/scss/utilities/_borders_extended.scss

@@ -0,0 +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; }
+  }
+}

package/scss/utilities/_borders_outlines.scss

@@ -0,0 +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 */