@semanticus/semanticus-css 0.7.0 → 0.8.0

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

@@ -1,94 +1,94 @@
 .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(--primary-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-primary-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -96,7 +96,7 @@
 
 .text-secondary {
   --text-opacity: 1;
-  --color-text: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-secondary-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -104,7 +104,7 @@
 
 .text-success {
   --text-opacity: 1;
-  --color-text: rgba(var(--success-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-success-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -112,7 +112,7 @@
 
 .text-info {
   --text-opacity: 1;
-  --color-text: rgba(var(--info-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-info-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -120,7 +120,7 @@
 
 .text-warning {
   --text-opacity: 1;
-  --color-text: rgba(var(--warning-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-warning-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -128,7 +128,7 @@
 
 .text-danger {
   --text-opacity: 1;
-  --color-text: rgba(var(--danger-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-danger-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -136,7 +136,7 @@
 
 .text-contrast {
   --text-opacity: 1;
-  --color-text: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-contrast-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -144,7 +144,7 @@
 
 .text-body {
   --text-opacity: 1;
-  --color-text: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
+  --color-text: rgba(var(--color-body-rgb), var(--text-opacity)) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -152,7 +152,7 @@
 
 .text-muted {
   --text-opacity: 1;
-  --color-text: var(--secondary-color) !important;
+  --color-text: var(--color-text-muted) !important;
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
@@ -197,49 +197,49 @@
 }
 
 .text-primary-emphasis {
-  --color-text: 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-text: 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-text: 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-text: 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-text: 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-text: 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-text: 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;
@@ -312,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 {

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';

package/src/utilities/spacing/_gap.css

@@ -2,6 +2,10 @@
   gap: 0 !important;
 }
 
+.gap-d {
+  gap: var(--spacer-default) !important;
+}
+
 .gap-1 {
   gap: var(--spacer-1) !important;
 }
@@ -26,6 +30,10 @@
   row-gap: 0 !important;
 }
 
+.row-gap-d {
+  row-gap: var(--spacer-default) !important;
+}
+
 .row-gap-1 {
   row-gap: var(--spacer-1) !important;
 }
@@ -51,6 +59,11 @@
   column-gap: 0 !important;
 }
 
+.column-gap-d {
+  -moz-column-gap: var(--spacer-default) !important;
+  column-gap: var(--spacer-default) !important;
+}
+
 .column-gap-1 {
   -moz-column-gap: var(--spacer-1) !important;
   column-gap: var(--spacer-1) !important;
@@ -80,6 +93,9 @@
   .gap-sm-0 {
     gap: 0 !important;
   }
+  .gap-sm-d {
+    gap: var(--spacer-default) !important;
+  }
   .gap-sm-1 {
     gap: var(--spacer-1) !important;
   }
@@ -98,6 +114,9 @@
   .row-gap-sm-0 {
     row-gap: 0 !important;
   }
+  .row-gap-sm-d {
+    row-gap: var(--spacer-default) !important;
+  }
   .row-gap-sm-1 {
     row-gap: var(--spacer-1) !important;
   }
@@ -117,6 +136,10 @@
     -moz-column-gap: 0 !important;
     column-gap: 0 !important;
   }
+  .column-gap-sm-d {
+    -moz-column-gap: var(--spacer-default) !important;
+    column-gap: var(--spacer-default) !important;
+  }
   .column-gap-sm-1 {
     -moz-column-gap: var(--spacer-1) !important;
     column-gap: var(--spacer-1) !important;
@@ -143,6 +166,9 @@
   .gap-md-0 {
     gap: 0 !important;
   }
+  .gap-md-d {
+    gap: var(--spacer-default) !important;
+  }
   .gap-md-1 {
     gap: var(--spacer-1) !important;
   }
@@ -161,6 +187,9 @@
   .row-gap-md-0 {
     row-gap: 0 !important;
   }
+  .row-gap-md-d {
+    row-gap: var(--spacer-default) !important;
+  }
   .row-gap-md-1 {
     row-gap: var(--spacer-1) !important;
   }
@@ -180,6 +209,10 @@
     -moz-column-gap: 0 !important;
     column-gap: 0 !important;
   }
+  .column-gap-md-d {
+    -moz-column-gap: var(--spacer-default) !important;
+    column-gap: var(--spacer-default) !important;
+  }
   .column-gap-md-1 {
     -moz-column-gap: var(--spacer-1) !important;
     column-gap: var(--spacer-1) !important;
@@ -206,6 +239,9 @@
   .gap-lg-0 {
     gap: 0 !important;
   }
+  .gap-lg-d {
+    gap: var(--spacer-default) !important;
+  }
   .gap-lg-1 {
     gap: var(--spacer-1) !important;
   }
@@ -224,6 +260,9 @@
   .row-gap-lg-0 {
     row-gap: 0 !important;
   }
+  .row-gap-lg-d {
+    row-gap: var(--spacer-default) !important;
+  }
   .row-gap-lg-1 {
     row-gap: var(--spacer-1) !important;
   }
@@ -243,6 +282,10 @@
     -moz-column-gap: 0 !important;
     column-gap: 0 !important;
   }
+  .column-gap-lg-d {
+    -moz-column-gap: var(--spacer-default) !important;
+    column-gap: var(--spacer-default) !important;
+  }
   .column-gap-lg-1 {
     -moz-column-gap: var(--spacer-1) !important;
     column-gap: var(--spacer-1) !important;
@@ -269,6 +312,9 @@
   .gap-xl-0 {
     gap: 0 !important;
   }
+  .gap-xl-d {
+    gap: var(--spacer-default) !important;
+  }
   .gap-xl-1 {
     gap: var(--spacer-1) !important;
   }
@@ -287,6 +333,9 @@
   .row-gap-xl-0 {
     row-gap: 0 !important;
   }
+  .row-gap-xl-d {
+    row-gap: var(--spacer-default) !important;
+  }
   .row-gap-xl-1 {
     row-gap: var(--spacer-1) !important;
   }
@@ -306,6 +355,10 @@
     -moz-column-gap: 0 !important;
     column-gap: 0 !important;
   }
+  .column-gap-xl-d {
+    -moz-column-gap: var(--spacer-default) !important;
+    column-gap: var(--spacer-default) !important;
+  }
   .column-gap-xl-1 {
     -moz-column-gap: var(--spacer-1) !important;
     column-gap: var(--spacer-1) !important;
@@ -332,6 +385,9 @@
   .gap-xxl-0 {
     gap: 0 !important;
   }
+  .gap-xxl-d {
+    gap: var(--spacer-default) !important;
+  }
   .gap-xxl-1 {
     gap: var(--spacer-1) !important;
   }
@@ -350,6 +406,9 @@
   .row-gap-xxl-0 {
     row-gap: 0 !important;
   }
+  .row-gap-xxl-d {
+    row-gap: var(--spacer-default) !important;
+  }
   .row-gap-xxl-1 {
     row-gap: var(--spacer-1) !important;
   }
@@ -369,6 +428,10 @@
     -moz-column-gap: 0 !important;
     column-gap: 0 !important;
   }
+  .column-gap-xxl-d {
+    -moz-column-gap: var(--spacer-default) !important;
+    column-gap: var(--spacer-default) !important;
+  }
   .column-gap-xxl-1 {
     -moz-column-gap: var(--spacer-1) !important;
     column-gap: var(--spacer-1) !important;