@semanticus/semanticus-css 0.5.1 → 0.8.0

package/src/utilities/colors/_text-colors.css

@@ -1,155 +1,177 @@
 .link-primary {
-  color: rgba(var(--primary-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-primary-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-primary:hover, .link-primary:focus {
-  color: rgba(var(--link-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--link-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--link-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-primary-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-primary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-primary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-secondary {
-  color: rgba(var(--secondary-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-secondary-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: rgba(var(--secondary-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--secondary-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--secondary-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-secondary-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-secondary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-secondary-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-success {
-  color: rgba(var(--success-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-success-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-success:hover, .link-success:focus {
-  color: rgba(var(--success-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--success-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--success-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-success-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-success-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-success-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-info {
-  color: rgba(var(--info-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-info-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-info:hover, .link-info:focus {
-  color: rgba(var(--info-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--info-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--info-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-info-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-info-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-info-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-warning {
-  color: rgba(var(--warning-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-warning-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: rgba(var(--warning-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--warning-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--warning-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-warning-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-warning-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-warning-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-danger {
-  color: rgba(var(--danger-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-danger-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-danger:hover, .link-danger:focus {
-  color: rgba(var(--danger-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--danger-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--danger-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-danger-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-danger-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-danger-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-contrast {
-  color: rgba(var(--contrast-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-contrast-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-contrast:hover, .link-contrast:focus {
-  color: rgba(var(--contrast-hover-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--contrast-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--contrast-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-contrast-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-contrast-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-contrast-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-body-emphasis {
-  color: rgba(var(--emphasis-color-rgb), var(--link-opacity, 1)) !important;
-  -webkit-text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 1)) !important;
+  color: rgba(var(--color-emphasis-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 1)) !important;
 }
 .link-body-emphasis:hover, .link-body-emphasis:focus {
-  color: rgba(var(--emphasis-color-rgb), var(--link-opacity, 0.75)) !important;
-  -webkit-text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 0.75)) !important;
-  text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 0.75)) !important;
+  color: rgba(var(--color-emphasis-rgb), var(--link-opacity, 0.75)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 0.75)) !important;
+  text-decoration-color: rgba(var(--color-emphasis-rgb), var(--link-underline-opacity, 0.75)) !important;
 }
 
 .text-primary {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-primary-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--primary-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-secondary {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-secondary-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-success {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-success-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--success-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-info {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-info-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--info-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-warning {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-warning-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--warning-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-danger {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-danger-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--danger-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-contrast {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-contrast-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-body {
   --text-opacity: 1;
+  --color-text: rgba(var(--color-body-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-muted {
   --text-opacity: 1;
+  --color-text: var(--color-text-muted) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--secondary-color) !important;
+  color: var(--color-text) !important;
 }
 
 .text-body-secondary {
   --text-opacity: 1;
+  --color-text: var(--secondary-color) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--secondary-color) !important;
+  color: var(--color-text) !important;
 }
 
 .text-body-emphasis {
   --text-opacity: 1;
+  --color-text: var(--emphasis-color) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--emphasis-color) !important;
+  color: var(--color-text) !important;
 }
 
 .text-reset {
@@ -175,31 +197,52 @@
 }
 
 .text-primary-emphasis {
-  color: var(--primary-text-emphasis) !important;
+  --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-secondary-emphasis {
-  color: var(--secondary-text-emphasis) !important;
+  --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-success-emphasis {
-  color: var(--success-text-emphasis) !important;
+  --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-info-emphasis {
-  color: var(--info-text-emphasis) !important;
+  --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-warning-emphasis {
-  color: var(--warning-text-emphasis) !important;
+  --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-danger-emphasis {
-  color: var(--danger-text-emphasis) !important;
+  --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-contrast-emphasis {
-  color: var(--contrast-text-emphasis) !important;
+  --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .link-opacity-10 {
@@ -269,57 +312,57 @@
 .link-underline-primary {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-primary-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline-secondary {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-secondary-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline-success {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-success-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline-info {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-info-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline-warning {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-warning-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline-danger {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-danger-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline-contrast {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity)) !important;
-  text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--color-contrast-rgb), var(--link-underline-opacity)) !important;
 }
 
 .link-underline {
   --link-underline-opacity: 1;
 
-  -webkit-text-decoration-color: rgba(var(--link-color-rgb), var(--link-underline-opacity, 1)) !important;
-  text-decoration-color: rgba(var(--link-color-rgb), var(--link-underline-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--color-link-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--color-link-rgb), var(--link-underline-opacity, 1)) !important;
 }
 
 .link-underline-opacity-0 {
@@ -369,3 +412,50 @@
 .link-underline-opacity-100-hover:hover {
   --link-underline-opacity: 1;
 }
+
+/* Dark mode: headings should be lighter than text color (mix in white) */
+@media (prefers-color-scheme: dark) {
+  .text-primary,
+  .text-secondary,
+  .text-success,
+  .text-info,
+  .text-warning,
+  .text-danger,
+  .text-contrast,
+  .text-body,
+  .text-muted,
+  .text-body-secondary,
+  .text-body-emphasis,
+  .text-primary-emphasis,
+  .text-secondary-emphasis,
+  .text-success-emphasis,
+  .text-info-emphasis,
+  .text-warning-emphasis,
+  .text-danger-emphasis,
+  .text-contrast-emphasis {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}
+
+[data-theme="dark"] {
+  .text-primary,
+  .text-secondary,
+  .text-success,
+  .text-info,
+  .text-warning,
+  .text-danger,
+  .text-contrast,
+  .text-body,
+  .text-muted,
+  .text-body-secondary,
+  .text-body-emphasis,
+  .text-primary-emphasis,
+  .text-secondary-emphasis,
+  .text-success-emphasis,
+  .text-info-emphasis,
+  .text-warning-emphasis,
+  .text-danger-emphasis,
+  .text-contrast-emphasis {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}

package/src/utilities/effects/_shadows.css

@@ -4,15 +4,15 @@
 }
 
 .shadow {
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--shadow-md) !important;
 }
 
 .shadow-sm {
-  box-shadow: var(--box-shadow-sm) !important;
+  box-shadow: var(--shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: var(--box-shadow-lg) !important;
+  box-shadow: var(--shadow-lg) !important;
 }
 
 .shadow-none {
@@ -20,29 +20,29 @@
 }
 
 .focus-ring-primary {
-  --focus-ring-color: rgba(var(--primary-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-primary-rgb), var(--focus-ring-opacity));
 }
 
 .focus-ring-secondary {
-  --focus-ring-color: rgba(var(--secondary-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-secondary-rgb), var(--focus-ring-opacity));
 }
 
 .focus-ring-success {
-  --focus-ring-color: rgba(var(--success-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-success-rgb), var(--focus-ring-opacity));
 }
 
 .focus-ring-info {
-  --focus-ring-color: rgba(var(--info-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-info-rgb), var(--focus-ring-opacity));
 }
 
 .focus-ring-warning {
-  --focus-ring-color: rgba(var(--warning-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-warning-rgb), var(--focus-ring-opacity));
 }
 
 .focus-ring-danger {
-  --focus-ring-color: rgba(var(--danger-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-danger-rgb), var(--focus-ring-opacity));
 }
 
 .focus-ring-contrast {
-  --focus-ring-color: rgba(var(--contrast-rgb), var(--focus-ring-opacity));
+  --focus-ring-color: rgba(var(--color-contrast-rgb), var(--focus-ring-opacity));
 }

package/src/utilities/layout/_flexbox.css

@@ -1,3 +1,19 @@
+.flow-h {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: stretch;
+}
+
+.flow-v {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: flex-start;
+}
+
 .hstack {
   display: flex;
   flex-direction: row;
@@ -843,4 +859,3 @@
     order: 6 !important;
   }
 }
-

package/src/utilities/layout/_misc.css

@@ -8,8 +8,8 @@
   display: inline-flex;
   gap: 0.375rem;
   align-items: center;
-  -webkit-text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, 0.5));
-  text-decoration-color: rgba(var(--link-color-rgb), var(--link-opacity, 0.5));
+  -webkit-text-decoration-color: rgba(var(--color-link-rgb), var(--link-opacity, 0.5));
+  text-decoration-color: rgba(var(--color-link-rgb), var(--link-opacity, 0.5));
   text-underline-offset: 0.25em;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

package/src/utilities/modules.css

@@ -1,7 +1,13 @@
 /**
  * Semanticus CSS Utilities Modules
+ *
  * Just the utility classes (no global variables, no normalize)
  * Used by the full version which imports global variables and normalize separately
+ *
+ * Adapted from Bootstrap v5.3.8 utilities (https://getbootstrap.com/)
+ * Original work: Copyright (c) 2011-2026 The Bootstrap Authors
+ * Modifications: Copyright (c) 2026 Joao Goncalves
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
 @import './_variables.css';