@semanticus/semanticus-css 0.7.0 → 0.9.0

package/src/utilities/_variables.css

@@ -4,9 +4,6 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-/* Shared variables */
-@import '../variables/_shared.css';
-
 /* ==========================================================================
    Theme-independent variables
    ========================================================================== */
@@ -18,232 +15,40 @@
 
   /* Borders & radii */
   --border-style: solid;
-  --border-radius-sm: var(--border-radius);
-  --border-radius-lg: calc(var(--border-radius) * 2);
-  --border-radius-xl: calc(var(--border-radius) * 4);
-  --border-radius-xxl: calc(var(--border-radius) * 8);
+  --border-radius-default: var(--border-radius);
+  --border-radius-sm: var(--border-radius-default);
+  --border-radius-lg: calc(var(--border-radius-default) * 2);
+  --border-radius-xl: calc(var(--border-radius-default) * 4);
+  --border-radius-xxl: calc(var(--border-radius-default) * 8);
   --border-radius-pill: 50rem;
 
   /* Border-width scale */
-  --border-width-1: var(--border-width);
-  --border-width-2: calc(var(--border-width) * 2);
-  --border-width-3: calc(var(--border-width) * 3);
-  --border-width-4: calc(var(--border-width) * 4);
-  --border-width-5: calc(var(--border-width) * 5);
+  --border-width-default: var(--border-width);
+  --border-width-0: 0;
+  --border-width-1: var(--border-width-default);
+  --border-width-2: calc(var(--border-width-default) * 2);
+  --border-width-3: calc(var(--border-width-default) * 3);
+  --border-width-4: calc(var(--border-width-default) * 4);
+  --border-width-5: calc(var(--border-width-default) * 5);
 
   /* Spacing scale */
+  --spacer-default: var(--spacing);
   --spacer-0: 0;
-  --spacer-1: calc(var(--spacing) * 0.25);
-  --spacer-2: calc(var(--spacing) * 0.5);
-  --spacer-3: var(--spacing);
-  --spacer-4: calc(var(--spacing) * 1.5);
-  --spacer-5: calc(var(--spacing) * 3);
-
-  /* Font-size scale */
-  --fs-1: calc(1.375rem + 1.5vw);
-  --fs-2: calc(1.325rem + 0.9vw);
-  --fs-3: calc(1.3rem + 0.6vw);
-  --fs-4: calc(1.275rem + 0.3vw);
-  --fs-5: 1.25rem;
-  --fs-6: 1rem;
+  --spacer-1: calc(var(--spacer-default) * 0.25);
+  --spacer-2: calc(var(--spacer-default) * 0.5);
+  --spacer-3: var(--spacer-default);
+  --spacer-4: calc(var(--spacer-default) * 1.5);
+  --spacer-5: calc(var(--spacer-default) * 3);
 
   /* Focus ring */
   --focus-ring-width: var(--outline-width);
   --focus-ring-opacity: 0.25;
 
   /* Auto-switching mappings (resolved at computed-value time via Semanticus CSS) */
-  --emphasis-color: var(--color-contrast);
+  --emphasis-color: rgb(var(--color-contrast-rgb));
   --secondary-color: var(--color-text-muted);
   --border-color: var(--color-border-muted);
-  --box-shadow: var(--shadow-md);
-  --box-shadow-sm: var(--shadow-sm);
-  --box-shadow-lg: var(--shadow-lg);
   --focus-ring-color: var(--color-primary-focus);
 
-  /* Status inverse colors (readable text on status-colored backgrounds) */
-  --color-success-inverse: #fff;
-  --color-info-inverse: #fff;
-  --color-warning-inverse: #000;
-  --color-danger-inverse: #fff;
-
   --max-z-index: 1050;
 }
-
-/* ==========================================================================
-   Light theme (default)
-   ========================================================================== */
-
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  /* RGB channels */
-  --primary-rgb: 1, 114, 173;
-  --secondary-rgb: 93, 107, 137;
-  --contrast-rgb: 24, 28, 37;
-
-  /* Text emphasis (darker/hover shades in light) */
-  --primary-text-emphasis: #015887;
-  --secondary-text-emphasis: #48536b;
-  --success-text-emphasis: #20603b;
-  --info-text-emphasis: #025d5d;
-  --warning-text-emphasis: #694d00;
-  --danger-text-emphasis: #9b2318;
-  --contrast-text-emphasis: #495057;
-
-  /* Subtle backgrounds (low opacity) */
-  --primary-bg-subtle: rgba(1, 114, 173, 0.1);
-  --secondary-bg-subtle: rgba(93, 107, 137, 0.1);
-  --success-bg-subtle: rgba(43, 122, 76, 0.1);
-  --info-bg-subtle: rgba(4, 120, 120, 0.1);
-  --warning-bg-subtle: rgba(255, 191, 0, 0.1);
-  --danger-bg-subtle: rgba(197, 47, 33, 0.1);
-  --contrast-bg-subtle: #ced4da;
-
-  /* Subtle borders (medium opacity) */
-  --primary-border-subtle: rgba(1, 114, 173, 0.35);
-  --secondary-border-subtle: rgba(93, 107, 137, 0.35);
-  --success-border-subtle: rgba(43, 122, 76, 0.35);
-  --info-border-subtle: rgba(4, 120, 120, 0.35);
-  --warning-border-subtle: rgba(255, 191, 0, 0.35);
-  --danger-border-subtle: rgba(197, 47, 33, 0.35);
-  --contrast-border-subtle: #adb5bd;
-
-  /* Body & emphasis RGB */
-  --body-color-rgb: 55, 60, 68;
-  --body-bg-rgb: 255, 255, 255;
-  --emphasis-color-rgb: 24, 28, 37;
-
-  /* Secondary surfaces */
-  --secondary-bg-rgb: 233, 236, 239;
-
-  /* Link RGB */
-  --link-color-rgb: 1, 114, 173;
-  --link-hover-color-rgb: 1, 88, 135;
-
-  /* Link hover RGB (per-variant) */
-  --secondary-hover-color-rgb: 72, 83, 107;
-  --success-hover-color-rgb: 32, 96, 59;
-  --info-hover-color-rgb: 2, 93, 93;
-  --warning-hover-color-rgb: 232, 174, 1;
-  --danger-hover-color-rgb: 155, 35, 24;
-  --contrast-hover-color-rgb: 249, 250, 251;
-}
-
-/* ==========================================================================
-   Dark theme (system preference)
-   ========================================================================== */
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    /* RGB channels */
-    --primary-rgb: 1, 170, 255;
-    --secondary-rgb: 150, 158, 175;
-    --contrast-rgb: 248, 249, 250;
-
-    /* Text emphasis (lighter/hover shades in dark) */
-    --primary-text-emphasis: #79c0ff;
-    --secondary-text-emphasis: #b3b9c5;
-    --success-text-emphasis: #93deb5;
-    --info-text-emphasis: #25dddd;
-    --warning-text-emphasis: #e8ae01;
-    --danger-text-emphasis: #f5b7a8;
-    --contrast-text-emphasis: #f8f9fa;
-
-    /* Subtle backgrounds */
-    --primary-bg-subtle: rgba(1, 170, 255, 0.15);
-    --secondary-bg-subtle: rgba(150, 158, 175, 0.15);
-    --success-bg-subtle: rgba(110, 213, 157, 0.15);
-    --info-bg-subtle: rgba(10, 194, 194, 0.15);
-    --warning-bg-subtle: rgba(255, 191, 0, 0.15);
-    --danger-bg-subtle: rgba(243, 143, 121, 0.15);
-    --contrast-bg-subtle: #2a3140;
-
-    /* Subtle borders */
-    --primary-border-subtle: rgba(1, 170, 255, 0.35);
-    --secondary-border-subtle: rgba(150, 158, 175, 0.35);
-    --success-border-subtle: rgba(110, 213, 157, 0.35);
-    --info-border-subtle: rgba(10, 194, 194, 0.35);
-    --warning-border-subtle: rgba(255, 191, 0, 0.35);
-    --danger-border-subtle: rgba(243, 143, 121, 0.35);
-    --contrast-border-subtle: #2a3140;
-
-    /* Body & emphasis RGB */
-    --body-color-rgb: 194, 199, 208;
-    --body-bg-rgb: 19, 23, 31;
-    --emphasis-color-rgb: 223, 227, 235;
-
-    /* Secondary surfaces */
-    --secondary-bg-rgb: 42, 49, 64;
-
-    /* Link RGB */
-    --link-color-rgb: 1, 170, 255;
-    --link-hover-color-rgb: 121, 192, 255;
-
-    /* Link hover RGB (per-variant) */
-    --secondary-hover-color-rgb: 179, 185, 197;
-    --success-hover-color-rgb: 147, 222, 181;
-    --info-hover-color-rgb: 37, 221, 221;
-    --warning-hover-color-rgb: 232, 174, 1;
-    --danger-hover-color-rgb: 245, 183, 168;
-    --contrast-hover-color-rgb: 255, 255, 255;
-  }
-}
-
-/* ==========================================================================
-   Dark theme (explicit)
-   ========================================================================== */
-
-[data-theme="dark"] {
-  /* RGB channels */
-  --primary-rgb: 1, 170, 255;
-  --secondary-rgb: 150, 158, 175;
-  --contrast-rgb: 248, 249, 250;
-
-  /* Text emphasis (lighter/hover shades in dark) */
-  --primary-text-emphasis: #79c0ff;
-  --secondary-text-emphasis: #b3b9c5;
-  --success-text-emphasis: #93deb5;
-  --info-text-emphasis: #25dddd;
-  --warning-text-emphasis: #e8ae01;
-  --danger-text-emphasis: #f5b7a8;
-  --contrast-text-emphasis: #f8f9fa;
-
-  /* Subtle backgrounds */
-  --primary-bg-subtle: rgba(1, 170, 255, 0.15);
-  --secondary-bg-subtle: rgba(150, 158, 175, 0.15);
-  --success-bg-subtle: rgba(110, 213, 157, 0.15);
-  --info-bg-subtle: rgba(10, 194, 194, 0.15);
-  --warning-bg-subtle: rgba(255, 191, 0, 0.15);
-  --danger-bg-subtle: rgba(243, 143, 121, 0.15);
-  --contrast-bg-subtle: #2a3140;
-
-  /* Subtle borders */
-  --primary-border-subtle: rgba(1, 170, 255, 0.35);
-  --secondary-border-subtle: rgba(150, 158, 175, 0.35);
-  --success-border-subtle: rgba(110, 213, 157, 0.35);
-  --info-border-subtle: rgba(10, 194, 194, 0.35);
-  --warning-border-subtle: rgba(255, 191, 0, 0.35);
-  --danger-border-subtle: rgba(243, 143, 121, 0.35);
-  --contrast-border-subtle: #2a3140;
-
-  /* Body & emphasis RGB */
-  --body-color-rgb: 194, 199, 208;
-  --body-bg-rgb: 19, 23, 31;
-  --emphasis-color-rgb: 223, 227, 235;
-
-  /* Secondary surfaces */
-  --secondary-bg-rgb: 42, 49, 64;
-
-  /* Link RGB */
-  --link-color-rgb: 1, 170, 255;
-  --link-hover-color-rgb: 121, 192, 255;
-
-  /* Link hover RGB (per-variant) */
-  --secondary-hover-color-rgb: 179, 185, 197;
-  --success-hover-color-rgb: 147, 222, 181;
-  --info-hover-color-rgb: 37, 221, 221;
-  --warning-hover-color-rgb: 232, 174, 1;
-  --danger-hover-color-rgb: 245, 183, 168;
-  --contrast-hover-color-rgb: 255, 255, 255;
-}

package/src/utilities/borders/_border-radius.css

@@ -6,6 +6,10 @@
   border-radius: 0 !important;
 }
 
+.rounded-d {
+  border-radius: var(--border-radius-default) !important;
+}
+
 .rounded-1 {
   border-radius: var(--border-radius-sm) !important;
 }
@@ -44,6 +48,11 @@
   border-top-right-radius: 0 !important;
 }
 
+.rounded-top-d {
+  border-top-left-radius: var(--border-radius-default) !important;
+  border-top-right-radius: var(--border-radius-default) !important;
+}
+
 .rounded-top-1 {
   border-top-left-radius: var(--border-radius-sm) !important;
   border-top-right-radius: var(--border-radius-sm) !important;
@@ -89,6 +98,11 @@
   border-bottom-right-radius: 0 !important;
 }
 
+.rounded-end-d {
+  border-top-right-radius: var(--border-radius-default) !important;
+  border-bottom-right-radius: var(--border-radius-default) !important;
+}
+
 .rounded-end-1 {
   border-top-right-radius: var(--border-radius-sm) !important;
   border-bottom-right-radius: var(--border-radius-sm) !important;
@@ -134,6 +148,11 @@
   border-bottom-left-radius: 0 !important;
 }
 
+.rounded-bottom-d {
+  border-bottom-right-radius: var(--border-radius-default) !important;
+  border-bottom-left-radius: var(--border-radius-default) !important;
+}
+
 .rounded-bottom-1 {
   border-bottom-right-radius: var(--border-radius-sm) !important;
   border-bottom-left-radius: var(--border-radius-sm) !important;
@@ -179,6 +198,11 @@
   border-top-left-radius: 0 !important;
 }
 
+.rounded-start-d {
+  border-bottom-left-radius: var(--border-radius-default) !important;
+  border-top-left-radius: var(--border-radius-default) !important;
+}
+
 .rounded-start-1 {
   border-bottom-left-radius: var(--border-radius-sm) !important;
   border-top-left-radius: var(--border-radius-sm) !important;

package/src/utilities/borders/_border-width.css

@@ -1,3 +1,11 @@
+.border-0 {
+  border-width: 0 !important;
+}
+
+.border-d {
+  border-width: var(--border-width-default) !important;
+}
+
 .border-1 {
   border-width: var(--border-width-1) !important;
 }

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

@@ -3,7 +3,7 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--primary-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-primary-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-secondary {
@@ -11,7 +11,7 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--secondary-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
@@ -19,7 +19,7 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--success-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-success-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-info {
@@ -27,7 +27,7 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--info-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-info-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-warning {
@@ -35,7 +35,7 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--warning-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-warning-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-danger {
@@ -43,7 +43,7 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--danger-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-danger-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-contrast {
@@ -51,104 +51,111 @@
   --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
   color: var(--color-text) !important;
-  background-color: rgba(var(--contrast-rgb), var(--bg-opacity, 1)) !important;
+  background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-primary-subtle {
-  --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(--primary-text-emphasis) !important;
-  background-color: var(--primary-bg-subtle) !important;
+  color: rgb(var(--color-primary-emphasis-rgb)) !important;
+  background-color: var(--color-primary-bg-subtle) !important;
 }
 
 .text-bg-secondary-subtle {
-  --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(--secondary-text-emphasis) !important;
-  background-color: var(--secondary-bg-subtle) !important;
+  color: rgb(var(--color-secondary-emphasis-rgb)) !important;
+  background-color: var(--color-secondary-bg-subtle) !important;
 }
 
 .text-bg-success-subtle {
-  --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(--success-text-emphasis) !important;
-  background-color: var(--success-bg-subtle) !important;
+  color: rgb(var(--color-success-emphasis-rgb)) !important;
+  background-color: var(--color-success-bg-subtle) !important;
 }
 
 .text-bg-info-subtle {
-  --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(--info-text-emphasis) !important;
-  background-color: var(--info-bg-subtle) !important;
+  color: rgb(var(--color-info-emphasis-rgb)) !important;
+  background-color: var(--color-info-bg-subtle) !important;
 }
 
 .text-bg-warning-subtle {
-  --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(--warning-text-emphasis) !important;
-  background-color: var(--warning-bg-subtle) !important;
+  color: rgb(var(--color-warning-emphasis-rgb)) !important;
+  background-color: var(--color-warning-bg-subtle) !important;
 }
 
 .text-bg-danger-subtle {
-  --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(--danger-text-emphasis) !important;
-  background-color: var(--danger-bg-subtle) !important;
+  color: rgb(var(--color-danger-emphasis-rgb)) !important;
+  background-color: var(--color-danger-bg-subtle) !important;
 }
 
 .text-bg-contrast-subtle {
-  --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(--contrast-text-emphasis) !important;
-  background-color: var(--contrast-bg-subtle) !important;
+  color: rgb(var(--color-contrast-emphasis-rgb)) !important;
+  background-color: var(--color-contrast-bg-subtle) !important;
 }
 
 .bg-primary {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--primary-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-primary-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-secondary {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-success {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--success-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-success-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-info {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-info-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-warning {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--warning-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-warning-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-danger {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--danger-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-danger-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-contrast {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--contrast-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-body {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-body-bg-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-transparent {
@@ -160,7 +167,7 @@
 .bg-body-secondary {
   --bg-opacity: 1;
 
-  background-color: rgba(var(--secondary-bg-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-secondary-bg-rgb), var(--bg-opacity)) !important;
 }
 
 .bg-opacity-10 {
@@ -184,31 +191,31 @@
 }
 
 .bg-primary-subtle {
-  background-color: var(--primary-bg-subtle) !important;
+  background-color: var(--color-primary-bg-subtle) !important;
 }
 
 .bg-secondary-subtle {
-  background-color: var(--secondary-bg-subtle) !important;
+  background-color: var(--color-secondary-bg-subtle) !important;
 }
 
 .bg-success-subtle {
-  background-color: var(--success-bg-subtle) !important;
+  background-color: var(--color-success-bg-subtle) !important;
 }
 
 .bg-info-subtle {
-  background-color: var(--info-bg-subtle) !important;
+  background-color: var(--color-info-bg-subtle) !important;
 }
 
 .bg-warning-subtle {
-  background-color: var(--warning-bg-subtle) !important;
+  background-color: var(--color-warning-bg-subtle) !important;
 }
 
 .bg-danger-subtle {
-  background-color: var(--danger-bg-subtle) !important;
+  background-color: var(--color-danger-bg-subtle) !important;
 }
 
 .bg-contrast-subtle {
-  background-color: var(--contrast-bg-subtle) !important;
+  background-color: var(--color-contrast-bg-subtle) !important;
 }
 
 .bg-gradient {

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

@@ -1,69 +1,69 @@
 .border-primary {
   --border-opacity: 1;
 
-  border-color: rgba(var(--primary-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-primary-rgb), var(--border-opacity)) !important;
 }
 
 .border-secondary {
   --border-opacity: 1;
 
-  border-color: rgba(var(--secondary-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-secondary-rgb), var(--border-opacity)) !important;
 }
 
 .border-success {
   --border-opacity: 1;
 
-  border-color: rgba(var(--success-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-success-rgb), var(--border-opacity)) !important;
 }
 
 .border-info {
   --border-opacity: 1;
 
-  border-color: rgba(var(--info-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-info-rgb), var(--border-opacity)) !important;
 }
 
 .border-warning {
   --border-opacity: 1;
 
-  border-color: rgba(var(--warning-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-warning-rgb), var(--border-opacity)) !important;
 }
 
 .border-danger {
   --border-opacity: 1;
 
-  border-color: rgba(var(--danger-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-danger-rgb), var(--border-opacity)) !important;
 }
 
 .border-contrast {
   --border-opacity: 1;
 
-  border-color: rgba(var(--contrast-rgb), var(--border-opacity)) !important;
+  border-color: rgba(var(--color-contrast-rgb), var(--border-opacity)) !important;
 }
 
 .border-primary-subtle {
-  border-color: var(--primary-border-subtle) !important;
+  border-color: var(--color-primary-border-subtle) !important;
 }
 
 .border-secondary-subtle {
-  border-color: var(--secondary-border-subtle) !important;
+  border-color: var(--color-secondary-border-subtle) !important;
 }
 
 .border-success-subtle {
-  border-color: var(--success-border-subtle) !important;
+  border-color: var(--color-success-border-subtle) !important;
 }
 
 .border-info-subtle {
-  border-color: var(--info-border-subtle) !important;
+  border-color: var(--color-info-border-subtle) !important;
 }
 
 .border-warning-subtle {
-  border-color: var(--warning-border-subtle) !important;
+  border-color: var(--color-warning-border-subtle) !important;
 }
 
 .border-danger-subtle {
-  border-color: var(--danger-border-subtle) !important;
+  border-color: var(--color-danger-border-subtle) !important;
 }
 
 .border-contrast-subtle {
-  border-color: var(--contrast-border-subtle) !important;
+  border-color: var(--color-contrast-border-subtle) !important;
 }