@birdycom/omniacss 0.11.0 → 0.11.2

package/scss/utilities/_containment.scss

@@ -1,82 +1,82 @@
-// SCSS Document
-// File: src/scss/utilities/_containment.scss
-// Description: Container queries, containment and content-visibility utilities (CSS Containment Level 2/3).
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .container-*, .cq-name-*, .contain-*, .content-{auto,visible,hidden}, .contain-intrinsic-*
-//          and container query variants (.cq-xs\:flex, .cq-md\:grid-cols-3, ...).
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
-// Note: .cq-inline / .cq-normal stay in _container.scss (backwards compatible aliases).
-// Map: container-type -> container-name -> contain -> content-visibility -> intrinsic size -> @container variants
-
-/* Container type — makes an element a query container */
-.container-normal { container-type: normal; }
-.container-size { container-type: size; }
-.container-inline-size { container-type: inline-size; }
-.container-scroll-state { container-type: scroll-state; }
-.cq-size { container-type: size; }
-.cq-scroll-state { container-type: scroll-state; }
-
-/* Container name — target a specific container in @container rules */
-.cq-name-none { container-name: none; }
-.cq-name-main { container-name: main; }
-.cq-name-sidebar { container-name: sidebar; }
-.cq-name-card { container-name: card; }
-
-/* Contain — isolate layout, paint, style and size calculations */
-.contain-none { contain: none; }
-.contain-strict { contain: strict; }
-.contain-content { contain: content; }
-.contain-size { contain: size; }
-.contain-inline-size { contain: inline-size; }
-.contain-layout { contain: layout; }
-.contain-style { contain: style; }
-.contain-paint { contain: paint; }
-
-/* Content visibility — skip rendering work for off-screen content */
-.content-visible { content-visibility: visible; }
-.content-auto { content-visibility: auto; }
-.content-hidden { content-visibility: hidden; }
-
-/* Contain intrinsic size — placeholder size for content-visibility: auto */
-.contain-intrinsic-none { contain-intrinsic-size: none; }
-.contain-intrinsic-auto-sm { contain-intrinsic-size: auto 200px; }
-.contain-intrinsic-auto-md { contain-intrinsic-size: auto 500px; }
-.contain-intrinsic-auto-lg { contain-intrinsic-size: auto 1000px; }
-
-// ---------------------------------------------------------------------------
-// Container query variants — same idea as _responsive.scss, but based on the
-// nearest query container (.container-inline-size / .cq-inline) instead of
-// the viewport. Pattern: .cq-{size}\:{utility}
-// ---------------------------------------------------------------------------
-$_cq-breakpoints: (
-  'xs': 20rem,
-  'sm': 24rem,
-  'md': 28rem,
-  'lg': 32rem,
-  'xl': 36rem
-);
-
-@each $prefix, $min-width in $_cq-breakpoints {
-  @container (min-width: #{$min-width}) {
-    // Display
-    .cq-#{$prefix}\:block { display: block; }
-    .cq-#{$prefix}\:hidden { display: none; }
-    .cq-#{$prefix}\:flex { display: flex; }
-    .cq-#{$prefix}\:grid { display: grid; }
-    .cq-#{$prefix}\:inline-flex { display: inline-flex; }
-
-    // Flex direction
-    .cq-#{$prefix}\:flex-row { flex-direction: row; }
-    .cq-#{$prefix}\:flex-col { flex-direction: column; }
-
-    // Grid template columns (1-6)
-    @for $i from 1 through 6 {
-      .cq-#{$prefix}\:grid-cols-#{$i} {
-        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
-      }
-    }
-  }
-}
+// SCSS Document
+// File: src/scss/utilities/_containment.scss
+// Description: Container queries, containment and content-visibility utilities (CSS Containment Level 2/3).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .container-*, .cq-name-*, .contain-*, .content-{auto,visible,hidden}, .contain-intrinsic-*
+//          and container query variants (.cq-xs\:flex, .cq-md\:grid-cols-3, ...).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
+// Note: .cq-inline / .cq-normal stay in _container.scss (backwards compatible aliases).
+// Map: container-type -> container-name -> contain -> content-visibility -> intrinsic size -> @container variants
+
+/* Container type — makes an element a query container */
+.container-normal { container-type: normal; }
+.container-size { container-type: size; }
+.container-inline-size { container-type: inline-size; }
+.container-scroll-state { container-type: scroll-state; }
+.cq-size { container-type: size; }
+.cq-scroll-state { container-type: scroll-state; }
+
+/* Container name — target a specific container in @container rules */
+.cq-name-none { container-name: none; }
+.cq-name-main { container-name: main; }
+.cq-name-sidebar { container-name: sidebar; }
+.cq-name-card { container-name: card; }
+
+/* Contain — isolate layout, paint, style and size calculations */
+.contain-none { contain: none; }
+.contain-strict { contain: strict; }
+.contain-content { contain: content; }
+.contain-size { contain: size; }
+.contain-inline-size { contain: inline-size; }
+.contain-layout { contain: layout; }
+.contain-style { contain: style; }
+.contain-paint { contain: paint; }
+
+/* Content visibility — skip rendering work for off-screen content */
+.content-visible { content-visibility: visible; }
+.content-auto { content-visibility: auto; }
+.content-hidden { content-visibility: hidden; }
+
+/* Contain intrinsic size — placeholder size for content-visibility: auto */
+.contain-intrinsic-none { contain-intrinsic-size: none; }
+.contain-intrinsic-auto-sm { contain-intrinsic-size: auto 200px; }
+.contain-intrinsic-auto-md { contain-intrinsic-size: auto 500px; }
+.contain-intrinsic-auto-lg { contain-intrinsic-size: auto 1000px; }
+
+// ---------------------------------------------------------------------------
+// Container query variants — same idea as _responsive.scss, but based on the
+// nearest query container (.container-inline-size / .cq-inline) instead of
+// the viewport. Pattern: .cq-{size}\:{utility}
+// ---------------------------------------------------------------------------
+$_cq-breakpoints: (
+  'xs': 20rem,
+  'sm': 24rem,
+  'md': 28rem,
+  'lg': 32rem,
+  'xl': 36rem
+);
+
+@each $prefix, $min-width in $_cq-breakpoints {
+  @container (min-width: #{$min-width}) {
+    // Display
+    .cq-#{$prefix}\:block { display: block; }
+    .cq-#{$prefix}\:hidden { display: none; }
+    .cq-#{$prefix}\:flex { display: flex; }
+    .cq-#{$prefix}\:grid { display: grid; }
+    .cq-#{$prefix}\:inline-flex { display: inline-flex; }
+
+    // Flex direction
+    .cq-#{$prefix}\:flex-row { flex-direction: row; }
+    .cq-#{$prefix}\:flex-col { flex-direction: column; }
+
+    // Grid template columns (1-6)
+    @for $i from 1 through 6 {
+      .cq-#{$prefix}\:grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+  }
+}

package/scss/utilities/_css_functions.scss

@@ -1,34 +1,34 @@
-// SCSS Document
-// File: src/scss/utilities/_css_functions.scss
-// Description: Utilities built on modern CSS functions: tree counting (sibling-index(), sibling-count()) for
-//              staggered motion and fanned layouts, and color-mix() alpha steps of currentColor.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.8.2
-// Framework: OmniaCSS
-// Purpose: Progressive enhancement — without sibling-index() the delay/rotation is invalid and falls back to 0.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index
-// Map: stagger -> fan -> currentColor alpha
-
-/* Stagger — each child waits (index - 1) × --oc-stagger before its transition or animation starts */
-@each $ms in (30, 60, 100, 150, 250) {
-  .stagger-#{$ms} { --oc-stagger: #{$ms}ms; }
-}
-.delay-stagger { transition-delay: calc((sibling-index() - 1) * var(--oc-stagger, 60ms)); }
-.delay-stagger-reverse { transition-delay: calc((sibling-count() - sibling-index()) * var(--oc-stagger, 60ms)); }
-.animate-delay-stagger { animation-delay: calc((sibling-index() - 1) * var(--oc-stagger, 60ms)); }
-
-/* Fan — rotate siblings around the middle one, like cards in a hand (set on each child) */
-.fan {
-  rotate: calc((sibling-index() - (sibling-count() + 1) / 2) * var(--oc-fan, 6deg));
-  transform-origin: 50% 140%;
-}
-@each $deg in (3, 6, 10, 15) {
-  .fan-#{$deg} { --oc-fan: #{$deg}deg; }
-}
-
-/* currentColor alpha — tint a background or border with the text color (works with every text-* color) */
-@each $n in (5, 10, 15, 20, 30, 40, 50, 60, 70, 80) {
-  .bg-current-#{$n} { background-color: color-mix(in oklch, currentColor $n * 1%, transparent); }
-  .border-current-#{$n} { border-color: color-mix(in oklch, currentColor $n * 1%, transparent); }
-}
+// SCSS Document
+// File: src/scss/utilities/_css_functions.scss
+// Description: Utilities built on modern CSS functions: tree counting (sibling-index(), sibling-count()) for
+//              staggered motion and fanned layouts, and color-mix() alpha steps of currentColor.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.8.2
+// Framework: OmniaCSS
+// Purpose: Progressive enhancement — without sibling-index() the delay/rotation is invalid and falls back to 0.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index
+// Map: stagger -> fan -> currentColor alpha
+
+/* Stagger — each child waits (index - 1) × --oc-stagger before its transition or animation starts */
+@each $ms in (30, 60, 100, 150, 250) {
+  .stagger-#{$ms} { --oc-stagger: #{$ms}ms; }
+}
+.delay-stagger { transition-delay: calc((sibling-index() - 1) * var(--oc-stagger, 60ms)); }
+.delay-stagger-reverse { transition-delay: calc((sibling-count() - sibling-index()) * var(--oc-stagger, 60ms)); }
+.animate-delay-stagger { animation-delay: calc((sibling-index() - 1) * var(--oc-stagger, 60ms)); }
+
+/* Fan — rotate siblings around the middle one, like cards in a hand (set on each child) */
+.fan {
+  rotate: calc((sibling-index() - (sibling-count() + 1) / 2) * var(--oc-fan, 6deg));
+  transform-origin: 50% 140%;
+}
+@each $deg in (3, 6, 10, 15) {
+  .fan-#{$deg} { --oc-fan: #{$deg}deg; }
+}
+
+/* currentColor alpha — tint a background or border with the text color (works with every text-* color) */
+@each $n in (5, 10, 15, 20, 30, 40, 50, 60, 70, 80) {
+  .bg-current-#{$n} { background-color: color-mix(in oklch, currentColor $n * 1%, transparent); }
+  .border-current-#{$n} { border-color: color-mix(in oklch, currentColor $n * 1%, transparent); }
+}

package/scss/utilities/_dark_mode.scss

@@ -1,117 +1,117 @@
-// File: src/scss/utilities/_dark_mode.scss
-// Description: Dark mode variant utilities using dark: prefix.
-// Supports two strategies:
-//   1. Class-based: add .dark class to <html> or <body>
-//   2. Media-based: prefers-color-scheme: dark (automatic)
-// Default strategy: class-based (.dark ancestor selector)
-// Pattern: .dark .dark\:{utility} e.g. dark\:bg-gray-900, dark\:text-white
-// Copyright: 2021-2026 Birdycom
-// Autor: Serge Cools
-// Version: 0.1.6
-// Framework: OmniaCSS
-@use "shadow_tokens" as *;
-
-// ---------------------------------------------------------------------------
-// Class-based dark mode (.dark ancestor on html/body)
-// Usage: <html class="dark"> or toggle via JS
-// ---------------------------------------------------------------------------
-
-// Background colors for dark mode
-.dark .dark\:bg-black { background-color: var(--color-black-60); }
-.dark .dark\:bg-white { background-color: var(--color-white-2); }
-.dark .dark\:bg-gray-50 { background-color: var(--color-snow-50); }
-.dark .dark\:bg-gray-100 { background-color: var(--color-linen-30); }
-.dark .dark\:bg-gray-200 { background-color: var(--color-silver-2); }
-.dark .dark\:bg-gray-300 { background-color: var(--color-silver-20); }
-.dark .dark\:bg-gray-400 { background-color: var(--color-gray-20); }
-.dark .dark\:bg-gray-500 { background-color: var(--color-black-2); }
-.dark .dark\:bg-gray-600 { background-color: var(--color-duskblue-20); }
-.dark .dark\:bg-gray-700 { background-color: var(--color-shallowblue-30); }
-.dark .dark\:bg-gray-800 { background-color: var(--color-shallowblue-40); }
-.dark .dark\:bg-gray-900 { background-color: var(--color-shallowblue-50); }
-.dark .dark\:bg-gray-950 { background-color: var(--color-black-40); }
-.dark .dark\:bg-transparent { background-color: transparent; }
-
-// Semantic surface colors for dark mode
-.dark .dark\:bg-surface { background-color: var(--color-shallowblue-50); }
-.dark .dark\:bg-surface-soft { background-color: var(--color-shallowblue-40); }
-.dark .dark\:bg-surface-raised { background-color: var(--color-shallowblue-30); }
-
-// Text colors for dark mode
-.dark .dark\:text-white { color: var(--color-white-2); }
-.dark .dark\:text-black { color: var(--color-black-60); }
-.dark .dark\:text-gray-50 { color: var(--color-snow-50); }
-.dark .dark\:text-gray-100 { color: var(--color-linen-30); }
-.dark .dark\:text-gray-200 { color: var(--color-silver-2); }
-.dark .dark\:text-gray-300 { color: var(--color-silver-20); }
-.dark .dark\:text-gray-400 { color: var(--color-gray-20); }
-.dark .dark\:text-gray-500 { color: var(--color-black-2); }
-.dark .dark\:text-gray-600 { color: var(--color-duskblue-20); }
-.dark .dark\:text-gray-700 { color: var(--color-shallowblue-30); }
-.dark .dark\:text-gray-800 { color: var(--color-shallowblue-40); }
-.dark .dark\:text-gray-900 { color: var(--color-shallowblue-50); }
-
-// Semantic text colors
-.dark .dark\:text-muted { color: var(--color-gray-20); }
-.dark .dark\:text-soft { color: var(--color-silver-20); }
-.dark .dark\:text-primary { color: var(--color-silver-2); }
-
-// Border colors for dark mode
-.dark .dark\:border-gray-200 { border-color: var(--color-silver-2); }
-.dark .dark\:border-gray-300 { border-color: var(--color-silver-20); }
-.dark .dark\:border-gray-500 { border-color: var(--color-black-2); }
-.dark .dark\:border-gray-600 { border-color: var(--color-duskblue-20); }
-.dark .dark\:border-gray-700 { border-color: var(--color-shallowblue-30); }
-.dark .dark\:border-gray-800 { border-color: var(--color-shallowblue-40); }
-.dark .dark\:border-transparent { border-color: transparent; }
-
-// Opacity for dark mode
-.dark .dark\:opacity-0 { opacity: 0; }
-.dark .dark\:opacity-25 { opacity: 0.25; }
-.dark .dark\:opacity-50 { opacity: 0.5; }
-.dark .dark\:opacity-75 { opacity: 0.75; }
-.dark .dark\:opacity-100 { opacity: 1; }
-
-// Shadow utilities for dark mode (softer shadows on dark backgrounds)
-.dark .dark\:shadow-none { box-shadow: none; }
-.dark .dark\:shadow-sm { box-shadow: #{$oc-dark-shadow-sm}; }
-.dark .dark\:shadow-md { box-shadow: #{$oc-dark-shadow-md}; }
-.dark .dark\:shadow-lg { box-shadow: #{$oc-dark-shadow-lg}; }
-
-// Ring / outline for dark mode
-.dark .dark\:outline-gray-600 { outline-color: var(--color-duskblue-20); }
-.dark .dark\:outline-gray-700 { outline-color: var(--color-shallowblue-30); }
-
-// Display overrides (e.g. show/hide elements in dark mode)
-.dark .dark\:hidden { display: none; }
-.dark .dark\:block { display: block; }
-
-// ---------------------------------------------------------------------------
-// Media-based dark mode (automatic, respects OS preference)
-// These use @media (prefers-color-scheme: dark) for auto-detection.
-// Classes use the auto-dark: prefix.
-// ---------------------------------------------------------------------------
-
-@media (prefers-color-scheme: dark) {
-  // Background
-  .auto-dark\:bg-gray-800 { background-color: var(--color-shallowblue-40); }
-  .auto-dark\:bg-gray-900 { background-color: var(--color-shallowblue-50); }
-  .auto-dark\:bg-gray-950 { background-color: var(--color-black-40); }
-  .auto-dark\:bg-surface { background-color: var(--color-shallowblue-50); }
-
-  // Text
-  .auto-dark\:text-white { color: var(--color-white-2); }
-  .auto-dark\:text-gray-100 { color: var(--color-linen-30); }
-  .auto-dark\:text-gray-200 { color: var(--color-silver-2); }
-  .auto-dark\:text-gray-300 { color: var(--color-silver-20); }
-  .auto-dark\:text-muted { color: var(--color-gray-20); }
-
-  // Border
-  .auto-dark\:border-gray-700 { border-color: var(--color-shallowblue-30); }
-  .auto-dark\:border-gray-800 { border-color: var(--color-shallowblue-40); }
-
-  // Shadow
-  .auto-dark\:shadow-none { box-shadow: none; }
-}
-
-/* End dark mode utilities */
+// File: src/scss/utilities/_dark_mode.scss
+// Description: Dark mode variant utilities using dark: prefix.
+// Supports two strategies:
+//   1. Class-based: add .dark class to <html> or <body>
+//   2. Media-based: prefers-color-scheme: dark (automatic)
+// Default strategy: class-based (.dark ancestor selector)
+// Pattern: .dark .dark\:{utility} e.g. dark\:bg-gray-900, dark\:text-white
+// Copyright: 2021-2026 Birdycom
+// Autor: Serge Cools
+// Version: 0.1.6
+// Framework: OmniaCSS
+@use "shadow_tokens" as *;
+
+// ---------------------------------------------------------------------------
+// Class-based dark mode (.dark ancestor on html/body)
+// Usage: <html class="dark"> or toggle via JS
+// ---------------------------------------------------------------------------
+
+// Background colors for dark mode
+.dark .dark\:bg-black { background-color: var(--color-black-60); }
+.dark .dark\:bg-white { background-color: var(--color-white-2); }
+.dark .dark\:bg-gray-50 { background-color: var(--color-snow-50); }
+.dark .dark\:bg-gray-100 { background-color: var(--color-linen-30); }
+.dark .dark\:bg-gray-200 { background-color: var(--color-silver-2); }
+.dark .dark\:bg-gray-300 { background-color: var(--color-silver-20); }
+.dark .dark\:bg-gray-400 { background-color: var(--color-gray-20); }
+.dark .dark\:bg-gray-500 { background-color: var(--color-black-2); }
+.dark .dark\:bg-gray-600 { background-color: var(--color-duskblue-20); }
+.dark .dark\:bg-gray-700 { background-color: var(--color-shallowblue-30); }
+.dark .dark\:bg-gray-800 { background-color: var(--color-shallowblue-40); }
+.dark .dark\:bg-gray-900 { background-color: var(--color-shallowblue-50); }
+.dark .dark\:bg-gray-950 { background-color: var(--color-black-40); }
+.dark .dark\:bg-transparent { background-color: transparent; }
+
+// Semantic surface colors for dark mode
+.dark .dark\:bg-surface { background-color: var(--color-shallowblue-50); }
+.dark .dark\:bg-surface-soft { background-color: var(--color-shallowblue-40); }
+.dark .dark\:bg-surface-raised { background-color: var(--color-shallowblue-30); }
+
+// Text colors for dark mode
+.dark .dark\:text-white { color: var(--color-white-2); }
+.dark .dark\:text-black { color: var(--color-black-60); }
+.dark .dark\:text-gray-50 { color: var(--color-snow-50); }
+.dark .dark\:text-gray-100 { color: var(--color-linen-30); }
+.dark .dark\:text-gray-200 { color: var(--color-silver-2); }
+.dark .dark\:text-gray-300 { color: var(--color-silver-20); }
+.dark .dark\:text-gray-400 { color: var(--color-gray-20); }
+.dark .dark\:text-gray-500 { color: var(--color-black-2); }
+.dark .dark\:text-gray-600 { color: var(--color-duskblue-20); }
+.dark .dark\:text-gray-700 { color: var(--color-shallowblue-30); }
+.dark .dark\:text-gray-800 { color: var(--color-shallowblue-40); }
+.dark .dark\:text-gray-900 { color: var(--color-shallowblue-50); }
+
+// Semantic text colors
+.dark .dark\:text-muted { color: var(--color-gray-20); }
+.dark .dark\:text-soft { color: var(--color-silver-20); }
+.dark .dark\:text-primary { color: var(--color-silver-2); }
+
+// Border colors for dark mode
+.dark .dark\:border-gray-200 { border-color: var(--color-silver-2); }
+.dark .dark\:border-gray-300 { border-color: var(--color-silver-20); }
+.dark .dark\:border-gray-500 { border-color: var(--color-black-2); }
+.dark .dark\:border-gray-600 { border-color: var(--color-duskblue-20); }
+.dark .dark\:border-gray-700 { border-color: var(--color-shallowblue-30); }
+.dark .dark\:border-gray-800 { border-color: var(--color-shallowblue-40); }
+.dark .dark\:border-transparent { border-color: transparent; }
+
+// Opacity for dark mode
+.dark .dark\:opacity-0 { opacity: 0; }
+.dark .dark\:opacity-25 { opacity: 0.25; }
+.dark .dark\:opacity-50 { opacity: 0.5; }
+.dark .dark\:opacity-75 { opacity: 0.75; }
+.dark .dark\:opacity-100 { opacity: 1; }
+
+// Shadow utilities for dark mode (softer shadows on dark backgrounds)
+.dark .dark\:shadow-none { box-shadow: none; }
+.dark .dark\:shadow-sm { box-shadow: #{$oc-dark-shadow-sm}; }
+.dark .dark\:shadow-md { box-shadow: #{$oc-dark-shadow-md}; }
+.dark .dark\:shadow-lg { box-shadow: #{$oc-dark-shadow-lg}; }
+
+// Ring / outline for dark mode
+.dark .dark\:outline-gray-600 { outline-color: var(--color-duskblue-20); }
+.dark .dark\:outline-gray-700 { outline-color: var(--color-shallowblue-30); }
+
+// Display overrides (e.g. show/hide elements in dark mode)
+.dark .dark\:hidden { display: none; }
+.dark .dark\:block { display: block; }
+
+// ---------------------------------------------------------------------------
+// Media-based dark mode (automatic, respects OS preference)
+// These use @media (prefers-color-scheme: dark) for auto-detection.
+// Classes use the auto-dark: prefix.
+// ---------------------------------------------------------------------------
+
+@media (prefers-color-scheme: dark) {
+  // Background
+  .auto-dark\:bg-gray-800 { background-color: var(--color-shallowblue-40); }
+  .auto-dark\:bg-gray-900 { background-color: var(--color-shallowblue-50); }
+  .auto-dark\:bg-gray-950 { background-color: var(--color-black-40); }
+  .auto-dark\:bg-surface { background-color: var(--color-shallowblue-50); }
+
+  // Text
+  .auto-dark\:text-white { color: var(--color-white-2); }
+  .auto-dark\:text-gray-100 { color: var(--color-linen-30); }
+  .auto-dark\:text-gray-200 { color: var(--color-silver-2); }
+  .auto-dark\:text-gray-300 { color: var(--color-silver-20); }
+  .auto-dark\:text-muted { color: var(--color-gray-20); }
+
+  // Border
+  .auto-dark\:border-gray-700 { border-color: var(--color-shallowblue-30); }
+  .auto-dark\:border-gray-800 { border-color: var(--color-shallowblue-40); }
+
+  // Shadow
+  .auto-dark\:shadow-none { box-shadow: none; }
+}
+
+/* End dark mode utilities */

package/scss/utilities/_drop_shadow_colors.scss

@@ -1,26 +1,26 @@
-// SCSS Document
-// File: src/scss/utilities/_drop_shadow_colors.scss
-// Description: Color classes for the drop-shadow filter (.drop-shadow-sm … -lg read --oc-shadow-color).
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.4.0
-// Framework: OmniaCSS
-// Purpose: Generate .drop-shadow-current, .drop-shadow-transparent and .drop-shadow-{omnia color} (also hover: via the engine).
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
-// Note: class="drop-shadow-lg drop-shadow-vividblue" — the color class only sets --oc-shadow-color,
-//       the size class draws the shadow with a 25-30% alpha of that color.
-// Map: keywords -> every Omnia color
-
-@use "sass:string";
-@use '../utilities/' as *;
-
-.drop-shadow-current { --oc-shadow-color: currentcolor; }
-.drop-shadow-transparent { --oc-shadow-color: transparent; }
-
-@each $group, $families in $omnia-colors {
-  @each $family, $colors in $families {
-    @each $color, $props in $colors {
-      .drop-shadow-#{string.to-lower-case(#{$color})} { --oc-shadow-color: var(--color-#{string.to-lower-case(#{$color})}-50); }
-    }
-  }
-}
+// SCSS Document
+// File: src/scss/utilities/_drop_shadow_colors.scss
+// Description: Color classes for the drop-shadow filter (.drop-shadow-sm … -lg read --oc-shadow-color).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .drop-shadow-current, .drop-shadow-transparent and .drop-shadow-{omnia color} (also hover: via the engine).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
+// Note: class="drop-shadow-lg drop-shadow-vividblue" — the color class only sets --oc-shadow-color,
+//       the size class draws the shadow with a 25-30% alpha of that color.
+// Map: keywords -> every Omnia color
+
+@use "sass:string";
+@use '../utilities/' as *;
+
+.drop-shadow-current { --oc-shadow-color: currentcolor; }
+.drop-shadow-transparent { --oc-shadow-color: transparent; }
+
+@each $group, $families in $omnia-colors {
+  @each $family, $colors in $families {
+    @each $color, $props in $colors {
+      .drop-shadow-#{string.to-lower-case(#{$color})} { --oc-shadow-color: var(--color-#{string.to-lower-case(#{$color})}-50); }
+    }
+  }
+}