border utils, css/sass vars, and more

diff --git a/scss/_root.scss b/scss/_root.scss
index 4da23ce3a7ee063bdf64ac1c3707060f0f21f198..3a5a4fc138b4351b2bc4c40659367151811b3fa3 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -95,10 +95,10 @@
   // --#{$prefix}font-size-base: 1rem;
 
   // scss-docs-start root-border-var
-  --#{$prefix}border-width: #{$border-width};
-  --#{$prefix}border-style: #{$border-style};
-  --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  --#{$prefix}border-width: 1px;
+  --#{$prefix}border-style: solid;
+  --#{$prefix}border-color: light-dark(#{$gray-300}, #{$gray-700});
+  --#{$prefix}border-color-translucent: light-dark(rgba($black, .175), rgba($white, .15));
 
   --#{$prefix}border-radius: .5rem;
   --#{$prefix}border-radius-sm: .375rem;
@@ -108,10 +108,12 @@
   --#{$prefix}border-radius-pill: 50rem;
   // scss-docs-end root-border-var
 
-  --#{$prefix}box-shadow: light-dark(0 .5rem 1rem rgb(0 0 0 / 15%), 0 .5rem 1rem rgb(255 0 0 / 50%));
-  --#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%);
-  --#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%);
-  --#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%);
+  // scss-docs-start root-shadow-vars
+  --#{$prefix}box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15);
+  --#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / .075);
+  --#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / .175);
+  --#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / .075);
+  // scss-docs-end root-shadow-vars
 
   // Focus styles
   // scss-docs-start root-focus-variables

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index eb84b390961ab3aa9fe870a5a5ec4f63788b4f80..7cd84a4e08f6d9ed024cc057b7b0fff93f7ae193 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -145,68 +145,87 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-position
     // scss-docs-start utils-borders
-    "border": (
+    // "border": (
+    //   // selector: "attr-includes",
+    //   class: border,
+    //   property: border,
+    //   values: (
+    //     null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+    //     // 0: 0,
+    //   )
+    // ),
+    "borders": (
       property: border,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      class: border,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-top": (
-      class: border-top,
+    // "borders": (
+    //   class: border,
+    //   property: '--#{$prefix}border-width',
+    //   values: map.merge($border-widths, (0: 0))
+    // ),
+    "border-t": (
+      class: border-t,
       property: border-block-start,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      values: map.merge($borders, (0: 0))
     ),
-    "border-end": (
+    "border-e": (
       property: border-inline-end,
-      class: border-end,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      class: border-e,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-bottom": (
+    "border-b": (
       property: border-block-end,
-      class: border-bottom,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      class: border-b,
+      values: map.merge($borders, (0: 0))
     ),
-    "border-start": (
+    "border-s": (
       property: border-inline-start,
-      class: border-start,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      class: border-s,
+      values: map.merge($borders, (0: 0))
     ),
     "border-y": (
       property: border-block,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      values: map.merge($borders, (0: 0))
     ),
     "border-x": (
       property: border-inline,
-      values: (
-        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-        0: 0,
-      )
+      values: map.merge($borders, (0: 0))
     ),
     "border-color": (
-      property: border-color,
+      property: --#{$prefix}border-color,
       class: border,
       values: theme-color-values("border")
     ),
-    "border-width": (
-      property: border-width,
+    "dividers-x": (
+      selector: ".dividers-x > :not(:first-child)",
+      property: border-inline-start,
+      values: (
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      )
+    ),
+    "dividers-y": (
+      selector: ".dividers-y > :not(:first-child)",
+      property: border-block-start,
+      values: (
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+      )
+    ),
+    "border-opacity": (
       class: border,
-      values: $border-widths
+      property: border-color,
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}border-color) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}border-color) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}border-color) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}border-color) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}border-color) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}border-color) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}border-color) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}border-color) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}border-color) 90%, transparent),
+        100: var(--#{$prefix}border-color),
+      )
     ),
     // "border-opacity": (
     //   css-var: true,
@@ -666,16 +685,15 @@ $utilities: map.merge(
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
-      property: --#{$prefix}link-opacity,
-      // css-var: true,
+      property: color,
       class: link-opacity,
       state: hover,
       values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
+        10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
+        25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
+        75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
+        100: var(--#{$prefix}link-color),
       )
     ),
     "link-offset": (
@@ -694,6 +712,7 @@ $utilities: map.merge(
       local-vars: (
         "link-underline-opacity": 1
       ),
+      values: theme-color-values("text"),
       // values: map.merge(
       //   $utilities-links-underline,
       //   (
@@ -703,16 +722,17 @@ $utilities: map.merge(
     ),
     "link-underline-opacity": (
       // css-var: true,
-      property: --#{$prefix}link-underline-opacity,
+      // property: --#{$prefix}link-underline-opacity,
+      property: text-decoration-color,
       class: link-underline-opacity,
       state: hover,
       values: (
-        0: 0,
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
+        0: color-mix(in oklch, var(--#{$prefix}link-color) 0%, transparent),
+        10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
+        25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
+        75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
+        100: var(--#{$prefix}link-color),
       ),
     ),
     // scss-docs-end utils-links

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 92f4cd235870985ce7beab4d44e7cde066ff8c79..79518207135e9c53461c7bffeefc7f263dd6c4a4 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -241,7 +241,11 @@ $paragraph-margin-bottom:   1rem !default;
 // Define common padding and border radius sizes and more.
 
 // scss-docs-start border-variables
-$border-width: 1px !default;
+$border-width: var(--#{$prefix}border-width) !default;
+$border-style: var(--#{$prefix}border-style) !default;
+$border-color: var(--#{$prefix}border-color) !default;
+$border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
+
 $border-widths: (
   1: 1px,
   2: 2px,
@@ -249,9 +253,15 @@ $border-widths: (
   4: 4px,
   5: 5px
 ) !default;
-$border-style: solid !default;
-$border-color: light-dark($gray-300, $gray-700) !default;
-$border-color-translucent: rgba($black, .175) !default;
+
+$borders: (
+  0: 0,
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+  2: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+  3: 3px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+  4: 4px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+  5: 5px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index f9a67399862f581b01ac62bcd74090453a6658f5..6e3cb32fb05bd4dc5ef6c6ec162ea6218d1d7272 100644 (file)
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -6,17 +6,18 @@
 @layer helpers {
   @each $color, $value in $theme-colors {
     .link-#{$color} {
-      color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+      --#{$prefix}link-color: var(--#{$prefix}#{$color});
+      // color: var(--#{$prefix}#{$color});
       text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
 
-      @if $link-shade-percentage != 0 {
-        &:hover,
-        &:focus {
-          $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-          color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
-          text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
-        }
-      }
+      // @if $link-shade-percentage != 0 {
+      //   &:hover,
+      //   &:focus {
+      //     $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+      //     color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+      //     text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
+      //   }
+      // }
     }
   }
 

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index d700a27da5fcc198849705a149fc567249506e4e..8ed0d487bb690396a94be4911ecd1ad8fec26351 100644 (file)
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -6,16 +6,17 @@
 
 // Utility generator
 
-// - Utilities can three different types of selectors:
+// - Utilities can four different types of selectors:
 //   - class: .class
 //   - attr-starts: [class^="class"]
 //   - attr-includes: [class*="class"]
+//   - any other string: used directly as a custom selector (e.g., "& > :not(:last-child)")
 // - Utilities can generate a regular CSS property or a CSS custom property
 // - Utilities can be responsive or not
 // - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
 
 @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
-  // Determine if we're generating a class, or an attribute selector
+  // Determine if we're generating a class, or an attribute selector, or using a custom selector
   $selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
   // Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
   $selectorClass: map.get($utility, class);
@@ -73,6 +74,9 @@
       $selector: "[class^=\"#{$selectorClass}\"]";
     } @else if $selectorType == "attr-includes" {
       $selector: "[class*=\"#{$selectorClass}\"]";
+    } @else {
+      // Use the selector value directly as a custom selector string
+      $selector: $selectorType;
     }
 
     // @debug $utility;

diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index dc87339983d781ac4ba397bf3c07948b307f7633..9a71ebced3df39019c455ec7e7339b3339bd624c 100644 (file)
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -254,12 +254,18 @@
   }
 
   .bd-example-border-utils {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+
     [class^="border"] {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       width: 5rem;
       height: 5rem;
-      margin: .25rem;
-      background-color: var(--bs-tertiary-bg);
+      color: var(--bs-fg-3);
+      background-color: var(--bs-bg-1);
     }
   }
 
@@ -275,13 +281,13 @@
 
     .position-relative {
       height: 200px;
-      background-color: var(--bs-tertiary-bg);
+      background-color: var(--bs-bg-1);
     }
 
     .position-absolute {
       width: 2rem;
       height: 2rem;
-      background-color: var(--bs-body-color);
+      background-color: var(--bs-fg);
       @include border-radius();
     }
   }
@@ -384,7 +390,7 @@
 
   .highlight-toolbar {
     background-color: var(--bd-pre-bg);
-    border-bottom: 1px solid var(--bs-border-color);
+    border-block: 1px solid var(--bs-border-color);
   }
 
   .bd-file-ref {