@birdycom/omniacss 0.0.0-stage → 0.11.1

package/scss/utilities/_transforms_3d.scss

@@ -0,0 +1,76 @@
+// SCSS Document
+// File: src/scss/utilities/_transforms_3d.scss
+// Description: 3D transforms and the axes that _motion_transforms.scss does not cover — rotate-x/y/z, scale-x/y/z/3d,
+//              translate-z/3d, extra translate steps (negative, fractions) and extra perspective values.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .rotate-x-{deg}, .rotate-y-{deg}, .rotate-z-{deg} (and .-rotate-*), .scale-x-{n}, .scale-y-{n}, .scale-z-{n},
+//          .scale-3d, .translate-{x|y|z}-{n} (and .-translate-*), .translate-{x|y}-{fraction}, .translate-3d,
+//          .perspective-{px} and .perspective-origin-{corner}.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
+// Note: Rotate-x/y/z compose through custom properties on the transform property (together with skew);
+//       scale and translate keep using the individual scale / translate properties, like the 2D classes.
+//       For a visible 3D effect put .transform-3d and .perspective-* on the parent.
+// Map: rotate 3D -> scale axes -> translate steps -> translate 3D -> perspective
+
+@use "sass:string";
+@use "sass:list";
+
+$_rotate-3d: var(--oc-rotate-x,) var(--oc-rotate-y,) var(--oc-rotate-z,) skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0));
+
+/* Rotate around one axis */
+@each $axis in (x, y, z) {
+  @each $deg in (0, 1, 2, 3, 6, 12, 15, 30, 45, 60, 90, 180) {
+    .rotate-#{$axis}-#{$deg} { --oc-rotate-#{$axis}: rotate#{string.to-upper-case($axis)}(#{$deg}deg); transform: $_rotate-3d; }
+    @if $deg != 0 {
+      .-rotate-#{$axis}-#{$deg} { --oc-rotate-#{$axis}: rotate#{string.to-upper-case($axis)}(-#{$deg}deg); transform: $_rotate-3d; }
+    }
+  }
+}
+
+/* Scale per axis */
+$_scale-steps: ('0': 0, '50': .5, '75': .75, '90': .9, '95': .95, '100': 1, '105': 1.05, '110': 1.1, '125': 1.25, '150': 1.5);
+@each $key, $value in $_scale-steps {
+  .scale-x-#{$key} { --oc-scale-x: #{$value}; scale: var(--oc-scale-x) var(--oc-scale-y, 1) var(--oc-scale-z,); }
+  .scale-y-#{$key} { --oc-scale-y: #{$value}; scale: var(--oc-scale-x, 1) var(--oc-scale-y) var(--oc-scale-z,); }
+  .scale-z-#{$key} { --oc-scale-z: #{$value}; scale: var(--oc-scale-x, 1) var(--oc-scale-y, 1) var(--oc-scale-z); }
+}
+.scale-3d { scale: var(--oc-scale-x, 1) var(--oc-scale-y, 1) var(--oc-scale-z, 1); }
+
+/* Translate: more steps than 0/1/2/4/8/full, negative values and fractions of the element itself */
+$_translate-steps: (3, 5, 6, 10, 12, 16, 20, 24, 32);
+@each $axis in (x, y) {
+  $others: 'var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0)';
+  @if $axis == x { $others: 'var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0)'; }
+  @each $n in (1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32) {
+    @if list.index($_translate-steps, $n) {
+      .translate-#{$axis}-#{$n} { --oc-translate-#{$axis}: #{$n * 0.25}rem; translate: #{$others}; }
+    }
+    .-translate-#{$axis}-#{$n} { --oc-translate-#{$axis}: -#{$n * 0.25}rem; translate: #{$others}; }
+  }
+  .-translate-#{$axis}-full { --oc-translate-#{$axis}: -100%; translate: #{$others}; }
+  @each $name, $value in ('1\\/2': 50%, '1\\/3': 33.333333%, '2\\/3': 66.666667%, '1\\/4': 25%, '3\\/4': 75%) {
+    .translate-#{$axis}-#{$name} { --oc-translate-#{$axis}: #{$value}; translate: #{$others}; }
+    .-translate-#{$axis}-#{$name} { --oc-translate-#{$axis}: -#{$value}; translate: #{$others}; }
+  }
+}
+
+/* Translate along z (needs perspective on a parent) */
+@each $n in (0, 1, 2, 4, 8, 12, 16, 24, 32) {
+  .translate-z-#{$n} { --oc-translate-z: #{$n * 0.25}rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y, 0) var(--oc-translate-z); }
+  @if $n != 0 {
+    .-translate-z-#{$n} { --oc-translate-z: -#{$n * 0.25}rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y, 0) var(--oc-translate-z); }
+  }
+}
+.translate-3d { translate: var(--oc-translate-x, 0) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+
+/* Perspective: more distances and corner origins */
+@each $px in (100, 300, 800, 1200, 1500, 2000) {
+  .perspective-#{$px} { perspective: #{$px}px; }
+}
+.perspective-origin-top-left { perspective-origin: top left; }
+.perspective-origin-top-right { perspective-origin: top right; }
+.perspective-origin-bottom-left { perspective-origin: bottom left; }
+.perspective-origin-bottom-right { perspective-origin: bottom right; }

package/scss/utilities/_typography_advanced.scss

@@ -0,0 +1,124 @@
+// SCSS Document
+// File: src/scss/utilities/_typography_advanced.scss
+// Map: smoothing/stretch/clamp/list-image/text-overflow/wrap/indent/overflow-wrap/hyphens/content/quotes/counters/line-height keywords
+
+/* Font smoothing */
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+/* Font stretch */
+.font-stretch-ultra-condensed { font-stretch: ultra-condensed; }
+.font-stretch-extra-condensed { font-stretch: extra-condensed; }
+.font-stretch-condensed { font-stretch: condensed; }
+.font-stretch-semi-condensed { font-stretch: semi-condensed; }
+.font-stretch-normal { font-stretch: normal; }
+.font-stretch-semi-expanded { font-stretch: semi-expanded; }
+.font-stretch-expanded { font-stretch: expanded; }
+.font-stretch-extra-expanded { font-stretch: extra-expanded; }
+.font-stretch-ultra-expanded { font-stretch: ultra-expanded; }
+
+/* Line clamp */
+.line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: unset;
+}
+.line-clamp-1,
+.line-clamp-2,
+.line-clamp-3,
+.line-clamp-4,
+.line-clamp-5,
+.line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.line-clamp-1 { -webkit-line-clamp: 1; }
+.line-clamp-2 { -webkit-line-clamp: 2; }
+.line-clamp-3 { -webkit-line-clamp: 3; }
+.line-clamp-4 { -webkit-line-clamp: 4; }
+.line-clamp-5 { -webkit-line-clamp: 5; }
+.line-clamp-6 { -webkit-line-clamp: 6; }
+
+/* List style image */
+.list-image-none { list-style-image: none; }
+.list-image-check { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23059669' d='M10.3 3.3 5 8.6 1.7 5.3l1.1-1.1L5 6.4l4.2-4.2z'/%3E%3C/svg%3E"); }
+.list-image-dot { list-style-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%233b82f6%22/%3E%3C/svg%3E'); }
+
+/* Text overflow */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip { text-overflow: clip; }
+
+/* Text wrap */
+.text-wrap { text-wrap: wrap; }
+.text-nowrap { text-wrap: nowrap; }
+.text-balance { text-wrap: balance; }
+.text-pretty { text-wrap: pretty; }
+
+/* Text indent */
+.indent-0 { text-indent: 0; }
+.indent-1 { text-indent: 0.25rem; }
+.indent-2 { text-indent: 0.5rem; }
+.indent-4 { text-indent: 1rem; }
+.indent-8 { text-indent: 2rem; }
+
+/* Overflow wrap */
+.wrap-normal { overflow-wrap: normal; }
+.wrap-break-word { overflow-wrap: break-word; }
+.wrap-anywhere { overflow-wrap: anywhere; }
+
+/* Hyphens */
+.hyphens-none { hyphens: none; }
+.hyphens-manual { hyphens: manual; }
+.hyphens-auto { hyphens: auto; }
+
+/* Content helpers */
+.content-none::before,
+.content-none::after { content: none; }
+.content-empty::before,
+.content-empty::after { content: ""; }
+.content-open-quote::before { content: open-quote; }
+.content-close-quote::after { content: close-quote; }
+.content-attr::before { content: attr(data-oc-content); }
+
+/* Quotes */
+.quotes-none { quotes: none; }
+.quotes-auto { quotes: auto; }
+.quotes-french { quotes: "\00AB" "\00BB" "\2039" "\203A"; }
+.quotes-german { quotes: "\201E" "\201C" "\201A" "\2018"; }
+.quotes-english { quotes: "\201C" "\201D" "\2018" "\2019"; }
+
+/* Counters — reset/increment the "oc" counter and print it with ::before */
+.counter-reset { counter-reset: oc; }
+.counter-reset-none { counter-reset: none; }
+.counter-increment { counter-increment: oc; }
+.counter-increment-none { counter-increment: none; }
+.counter-set-0 { counter-set: oc 0; }
+.content-counter::before { content: counter(oc) ". "; }
+.content-counters::before { content: counters(oc, ".") " "; }
+
+/* List style type — newer predefined counter styles */
+.list-disclosure-open { list-style-type: disclosure-open; }
+.list-disclosure-closed { list-style-type: disclosure-closed; }
+.list-l-armenian { list-style-type: lower-armenian; }
+.list-cjk-decimal { list-style-type: cjk-decimal; }
+
+/* Line height keywords — unitless, scale with the font size (the .lineheight-{n} classes are fixed rem values) */
+.lineheight-none { line-height: 1; }
+.lineheight-tight { line-height: 1.25; }
+.lineheight-snug { line-height: 1.375; }
+.lineheight-relaxed { line-height: 1.625; }
+.lineheight-loose { line-height: 2; }
+.lineheight-normal { line-height: normal; }

package/scss/utilities/_typography_modern.scss

@@ -0,0 +1,83 @@
+// SCSS Document
+// File: src/scss/utilities/_typography_modern.scss
+// Description: Modern typography utilities — text-box trimming, whitespace collapsing, CJK spacing,
+//              initial letters, emphasis marks and font rendering controls.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .text-box-*, .text-stable, .whitespace-collapse-*, .text-spacing-trim-*, .text-autospace-*,
+//          .hanging-*, .initial-letter-*, .emphasis-*, .font-optical-*, .font-kerning-*, .tab-* and .break-auto-phrase.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/text-box
+// Note: complements _typography_advanced.scss (text-wrap, line-clamp, hyphens, ...).
+// Map: text-box -> text-wrap-style -> white-space-collapse -> CJK spacing -> hanging punctuation
+//      -> initial-letter -> text-emphasis -> font rendering -> tab-size -> word-break
+
+/* Text box — trim the space above cap height and below the baseline */
+.text-box-normal { text-box: normal; }
+.text-box-trim { text-box: trim-both cap alphabetic; }
+.text-box-trim-start { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
+.text-box-trim-end { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
+.text-box-trim-ex { text-box: trim-both ex alphabetic; }
+
+/* Text wrap style */
+.text-stable { text-wrap-style: stable; }
+.text-wrap-auto { text-wrap-style: auto; }
+
+/* White space collapse */
+.whitespace-collapse { white-space-collapse: collapse; }
+.whitespace-preserve { white-space-collapse: preserve; }
+.whitespace-preserve-breaks { white-space-collapse: preserve-breaks; }
+.whitespace-preserve-spaces { white-space-collapse: preserve-spaces; }
+.whitespace-break-spaces { white-space-collapse: break-spaces; }
+
+/* Text spacing trim (CJK punctuation) */
+.text-spacing-trim-normal { text-spacing-trim: normal; }
+.text-spacing-trim-auto { text-spacing-trim: auto; }
+.text-spacing-trim-space-all { text-spacing-trim: space-all; }
+.text-spacing-trim-space-first { text-spacing-trim: space-first; }
+
+/* Text autospace (space between CJK and Latin/numbers) */
+.text-autospace-normal { text-autospace: normal; }
+.text-autospace-auto { text-autospace: auto; }
+.text-autospace-none { text-autospace: no-autospace; }
+
+/* Hanging punctuation */
+.hanging-none { hanging-punctuation: none; }
+.hanging-first { hanging-punctuation: first; }
+.hanging-last { hanging-punctuation: last; }
+.hanging-first-last { hanging-punctuation: first allow-end last; }
+
+/* Initial letter (drop caps) — applied to ::first-letter */
+.initial-letter-normal::first-letter { initial-letter: normal; }
+.initial-letter-2::first-letter { initial-letter: 2; }
+.initial-letter-3::first-letter { initial-letter: 3; }
+.initial-letter-3-2::first-letter { initial-letter: 3 2; }
+
+/* Text emphasis */
+.emphasis-none { text-emphasis: none; }
+.emphasis-dot { text-emphasis: filled dot; }
+.emphasis-circle { text-emphasis: filled circle; }
+.emphasis-open-circle { text-emphasis: open circle; }
+.emphasis-sesame { text-emphasis: filled sesame; }
+.emphasis-triangle { text-emphasis: filled triangle; }
+.emphasis-over { text-emphasis-position: over right; }
+.emphasis-under { text-emphasis-position: under right; }
+
+/* Font rendering */
+.font-optical-auto { font-optical-sizing: auto; }
+.font-optical-none { font-optical-sizing: none; }
+.font-kerning-auto { font-kerning: auto; }
+.font-kerning-normal { font-kerning: normal; }
+.font-kerning-none { font-kerning: none; }
+.font-synthesis-none { font-synthesis: none; }
+.font-palette-light { font-palette: light; }
+.font-palette-dark { font-palette: dark; }
+
+/* Tab size */
+.tab-2 { tab-size: 2; }
+.tab-4 { tab-size: 4; }
+.tab-8 { tab-size: 8; }
+
+/* Word break — phrase-aware line breaking (Japanese) */
+.break-auto-phrase { word-break: auto-phrase; }

package/scss/utilities/_view_transitions.scss

@@ -0,0 +1,64 @@
+// SCSS Document
+// File: src/scss/utilities/_view_transitions.scss
+// Description: View Transitions utilities — name and group elements for animated view changes.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .vt-name-*, .vt-class-* classes and the opt-in mixin for cross-document transitions.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
+// Note: @view-transition { navigation: auto; } is a global at-rule. It is NOT emitted by default;
+//       include the mixin view-transition-navigation() in your own stylesheet to opt in.
+// Map: view-transition-name -> view-transition-class -> pseudo-element animations -> opt-in mixin
+
+/* View transition name — each name must be unique on the page */
+.vt-name-none { view-transition-name: none; }
+.vt-name-auto { view-transition-name: auto; }
+.vt-name-match-element { view-transition-name: match-element; }
+.vt-name-hero { view-transition-name: hero; }
+.vt-name-header { view-transition-name: header; }
+.vt-name-main { view-transition-name: main; }
+.vt-name-media { view-transition-name: media; }
+
+/* View transition class — share transition styles between named elements */
+.vt-class-card { view-transition-class: card; }
+.vt-class-fade { view-transition-class: fade; }
+.vt-class-slide { view-transition-class: slide; }
+
+/* Preset animations for the classes above */
+::view-transition-group(*.fade) {
+  animation-duration: 200ms;
+}
+::view-transition-old(*.slide) {
+  animation: oc-vt-slide-out 250ms ease-in both;
+}
+::view-transition-new(*.slide) {
+  animation: oc-vt-slide-in 250ms ease-out both;
+}
+
+@keyframes oc-vt-slide-out {
+  to { opacity: 0; transform: translateX(-2rem); }
+}
+@keyframes oc-vt-slide-in {
+  from { opacity: 0; transform: translateX(2rem); }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+/// Opt in to cross-document (MPA) view transitions.
+/// @group ViewTransitions
+/// @example scss
+///   @use 'utilities/view_transitions' as vt;
+///   @include vt.view-transition-navigation;
+@mixin view-transition-navigation {
+  @view-transition {
+    navigation: auto;
+  }
+}

package/scss/utilities/_writing_modes.scss

@@ -0,0 +1,72 @@
+// SCSS Document
+// File: src/scss/utilities/_writing_modes.scss
+// Description: Writing modes, direction, text orientation, unicode-bidi and logical inset/sizing utilities.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .write-*, .dir-*, .text-orient-*, .bidi-*, .start-* / .end-* / .inset-inline-* / .inset-block-*
+//          and .inline-size-* / .block-size-* classes.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
+// Note: logical margin/padding live in _spacing_margin.scss / _spacing_padding.scss (.m-inline-*, .p-block-start-*).
+//       The older .writingmode-* classes in _text.scss remain available.
+// Map: writing-mode -> direction -> text-orientation -> unicode-bidi -> logical inset -> logical sizing
+
+/* Writing mode */
+.write-horizontal { writing-mode: horizontal-tb; }
+.write-vertical-rl { writing-mode: vertical-rl; }
+.write-vertical-lr { writing-mode: vertical-lr; }
+.write-sideways-rl { writing-mode: sideways-rl; }
+.write-sideways-lr { writing-mode: sideways-lr; }
+
+/* Direction */
+.dir-ltr { direction: ltr; }
+.dir-rtl { direction: rtl; }
+
+/* Text orientation (vertical writing modes only) */
+.text-orient-mixed { text-orientation: mixed; }
+.text-orient-upright { text-orientation: upright; }
+.text-orient-sideways { text-orientation: sideways; }
+
+/* Unicode bidi */
+.bidi-normal { unicode-bidi: normal; }
+.bidi-embed { unicode-bidi: embed; }
+.bidi-isolate { unicode-bidi: isolate; }
+.bidi-override { unicode-bidi: bidi-override; }
+.bidi-isolate-override { unicode-bidi: isolate-override; }
+.bidi-plaintext { unicode-bidi: plaintext; }
+
+// ---------------------------------------------------------------------------
+// Logical inset — follows writing-mode and direction (start = left in LTR, right in RTL)
+// ---------------------------------------------------------------------------
+$_logical-inset: (
+  'auto': auto,
+  '0': 0,
+  '1': 0.25rem,
+  '2': 0.5rem,
+  '4': 1rem,
+  '8': 2rem,
+  'full': 100%
+);
+
+/* Logical inset */
+@each $key, $value in $_logical-inset {
+  .start-#{$key} { inset-inline-start: $value; }
+  .end-#{$key} { inset-inline-end: $value; }
+  .inset-inline-#{$key} { inset-inline: $value; }
+  .inset-block-#{$key} { inset-block: $value; }
+}
+
+/* Logical sizing — inline-size (width in horizontal-tb) and block-size (height in horizontal-tb) */
+.inline-size-auto { inline-size: auto; }
+.inline-size-full { inline-size: 100%; }
+.inline-size-fit { inline-size: fit-content; }
+.inline-size-min { inline-size: min-content; }
+.inline-size-max { inline-size: max-content; }
+.block-size-auto { block-size: auto; }
+.block-size-full { block-size: 100%; }
+.block-size-fit { block-size: fit-content; }
+.block-size-min { block-size: min-content; }
+.block-size-max { block-size: max-content; }
+.max-inline-size-prose { max-inline-size: 65ch; }
+.max-inline-size-full { max-inline-size: 100%; }

package/scss/variables/_color_tone.scss

@@ -0,0 +1,39 @@
+// File: src/scss/variables/_color_tone.scss
+// Description: Shared tone scale and oc-tone-color() for Omnia color steps.
+// Used by _colors_omnia.scss and _colors_tokens.scss so tone logic lives in one place.
+// Copyright: 2021-2026 Birdycom
+// Framework: OmniaCSS
+
+@use "sass:map";
+@use "sass:color";
+
+/// Tone scale for color steps 2..95 (light steps = lighter tint, high steps = darker shade).
+/// Step 100 = base color (no scaling). Keys must match $opacitycolor values.
+$oc-tone-scale: (
+  2: (lightness: 56%, chroma: -18%),
+  10: (lightness: 38%, chroma: -12%),
+  20: (lightness: 30%, chroma: -10%),
+  30: (lightness: 22%, chroma: -8%),
+  40: (lightness: 14%, chroma: -6%),
+  50: (lightness: 6%, chroma: -4%),
+  60: (lightness: -6%, chroma: 2%),
+  70: (lightness: -12%, chroma: 4%),
+  80: (lightness: -18%, chroma: 6%),
+  90: (lightness: -24%, chroma: 8%),
+  95: (lightness: -32%, chroma: 10%)
+);
+
+/// Returns a scaled (tone) version of the source color for the given step.
+/// @param {color} $source-color - oklch/oklab color
+/// @param {number} $step - 2, 10, 20, ... 95; 100 returns $source-color unchanged
+@function oc-tone-color($source-color, $step) {
+  $tone: map.get($oc-tone-scale, $step);
+  @if $tone == null {
+    @return $source-color;
+  }
+  @return color.scale(
+    $source-color,
+    $lightness: map.get($tone, lightness),
+    $chroma: map.get($tone, chroma)
+  );
+}

package/scss/variables/_hulp.scss

@@ -0,0 +1,108 @@
+// SCSS Document 
+// File: src/utilities/_hulp.scss
+// Description: CSS hulp class (demo helpers only — no global element/id rules: they would leak into every page)
+// Copyright: 2021-2023 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: 
+// Values: 
+
+
+.wrapbox-1 {
+  width: 10em;
+  margin: 0.5em;
+  white-space: normal;
+  vertical-align: top;
+  display: inline-block;
+}
+.wrapbox-2 {
+  width: 40em;
+  margin: 0.5em;
+  white-space: normal;
+  vertical-align: top;
+  display: inline-block;
+}
+.narrow {
+  padding: 10px;
+  border: 1px solid;
+  width: 500px;
+  margin: 0 auto;
+  font-size: 20px;
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+
+/* hulp for writing mode  */
+
+
+/* Scoped (was a global th/td rule that leaked into every table): add .hulp-table to opt in. */
+.hulp-table th {
+  background-color: var(--oc-muted, var(--color-frostblue-60));
+}
+
+.hulp-table td, .hulp-table th {
+  border: 1px solid var(--oc-border-strong, var(--color-mistblue-80));
+  padding: 3px;
+}
+/* End hulp for writing mode  */
+
+/* hulp for aspect ratio */
+
+.output {
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--background-primary);
+  overflow: hidden;
+  padding: 1em;
+}
+.output section {
+  height: 100%;
+  text-align: center;
+}
+/* End hulp for aspect ratio */
+
+/* hulp for alignment */
+.box {
+  padding: 0.5rem;
+  background: linear-gradient(-45deg, var(--color-vividblue-60), var(--color-mistblue-30));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bg-stripes-sky{
+  background-color: oklch(from var(--color-skycyan-70) l c h / 0.1);
+  background-image: linear-gradient(135deg,oklch(from var(--color-skycyan-80) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-skycyan-80) l c h / 0.5) 0,oklch(from var(--color-skycyan-80) l c h / 0.5) 60%,transparent 0,transparent);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-fuchsia {
+  background-color: oklch(from var(--color-violet-60) l c h / 0.1);
+  background-image: linear-gradient(135deg,oklch(from var(--color-violet-70) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-violet-70) l c h / 0.5) 0,oklch(from var(--color-violet-70) l c h / 0.5) 60%,transparent 0,transparent);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-pink {
+  background-color: oklch(from var(--color-purple-2) l c h / 0.1);
+  background-image: linear-gradient(135deg,oklch(from var(--color-purple-10) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-purple-10) l c h / 0.5) 0,oklch(from var(--color-purple-10) l c h / 0.5) 60%,transparent 0,transparent);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-purple {
+    background-color: oklch(from var(--color-indigo-2) l c h / 0.1);
+    background-image: linear-gradient(135deg,oklch(from var(--color-indigo-10) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-indigo-10) l c h / 0.5) 0,oklch(from var(--color-indigo-10) l c h / 0.5) 60%,transparent 0,transparent);
+    background-size: 7.07px 7.07px;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+/* .shadow-md / .shadow-lg live in utilities/_effects_advanced.scss (light-dark aware) */
+
+/* End hulp for alignment */

package/scss/variables/_mixins.scss

@@ -0,0 +1,40 @@
+// SCSS Document 
+// File: src/scss/variables/__mixins.scss
+// Description: sass mixin 
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+
+@use '../variables/_variables' as *;
+@use "sass:map";
+@use "sass:meta";
+
+///
+/// Below you will find the SASS mixins that we will use within our framework - file mixins.
+/// @group Mixins
+
+// start respond-to
+/// to manage responsive breakpoints that you can use for containers
+/// @group Mixins
+/// @name respond-to
+/// @link src/scss/variables/_mixins.scss
+///
+/// @since 1.0.0
+/// @author Serge Cools
+@mixin respond-to($breakpoint) {
+  // If the key exists in the map
+  @if map.has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media #{meta.inspect(map.get($breakpoints, $breakpoint))} {
+      @content;
+    }
+  }
+ 
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Available breakpoints are: #{map.keys($breakpoints)}.";
+  }
+}
+// end respond-to

package/scss/variables/_modifiers.scss

@@ -0,0 +1,32 @@
+// SCSS Document 
+// File: src/scss/variables/_modifiers.scss
+// Description: Default string items for using in the CSS properties 
+// Copyright: 2021-2023 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Variables and strings: 
+
+///
+/// Below you will find the list of all strings and arrays that we will use within our framework - file modifiers.
+/// @group PseudoClasses
+///
+
+// Default Pseudo-classes
+///
+/// The different pseudo-classes: :hover, :focus, :active
+/// @group pseudoclasses
+///
+/// @name pseudoclasses
+///
+/// @since 1.0.0
+/// @author Serge Cools
+///
+///
+$pseudoclasses: (
+  "": "", // normal
+  ":hover": hover\:, // hover
+  ":active": active\:, // active
+  ":focus": focus\:, // focus
+);
+// end default pseudo-classes