WIP scss

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 885a6287fc6c6a8b23f75985ea5e53e1871153c4..7b35a25998086fbe997e607d731b6d780d36d022 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -1,5 +1,6 @@
 @use "config" as *;
 @use "colors" as *;
+@use "theme" as *;
 @use "variables" as *;
 @use "functions" as *;
 @use "vendor/rfs" as *;
@@ -64,7 +65,7 @@ $button-variants: (
       "border-color": "transparent"
     ),
     "hover": (
-      "bg": "bg-subtle",
+      "bg": ("bg-muted", "bg-subtle"),
       "color": "text"
     ),
     "active": (
@@ -135,9 +136,22 @@ $button-variants: (
         @if $value == "transparent" {
           --#{$prefix}btn-hover-#{$property}: transparent;
           // #{$property}: transparent;
+        } @else if type-of($value) == "list" {
+          // Handle two-value properties using color-mix
+          $first-value: nth($value, 1);
+          $second-value: nth($value, 2);
+          --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
         } @else if $value == "bg-subtle" {
           --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
           // #{$property}: var(#{$prefix}#{$color}-#{$value});
+          // @if type-of($value) == "list" {
+          //   // Handle two-value properties using color-mix
+          //   $first-value: nth($value, 1);
+          //   $second-value: nth($value, 2);
+          //   --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
+          // } @else {
+          //   --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+          // }
         } @else {
           --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
           // #{$property}: oklch(
@@ -169,7 +183,7 @@ $button-variants: (
 }
 
 // Generate all button variants
-@each $color, $_ in $theme-colors {
+@each $color, $_ in $new-theme-colors {
   @each $variant, $_ in $button-variants {
     .btn-#{$color}-#{$variant} {
       @include button-variant($color, $variant);

diff --git a/scss/_config.scss b/scss/_config.scss
index 1dc4e32fe98d22bc3d3e283f6e213bf2294c1194..be0b7c9297d4ec8d7ac1cb2d4226db66ca847f4e 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -41,7 +41,7 @@ $breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  2xl: 1400px
+  2xl: 1600px
 ) !default;
 // scss-docs-end breakpoints
 
@@ -63,7 +63,7 @@ $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 1140px,
-  2xl: 1320px
+  2xl: 1440px
 ) !default;
 // scss-docs-end container-max-widths
 

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index eabeddbe0188981cd11ad9f5de382d6d135ca481..d4a7f1f8c91af0e78f65184c2f1333b56350dbd5 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -15,10 +15,10 @@
     --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
     --#{$prefix}tooltip-margin: #{$tooltip-margin};
     @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-    --#{$prefix}tooltip-color: #{$tooltip-color};
-    --#{$prefix}tooltip-bg: #{$tooltip-bg};
+    --#{$prefix}tooltip-color: var(--#{$prefix}bg-0);
+    --#{$prefix}tooltip-bg: var(--#{$prefix}fg-0);
     --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+    --#{$prefix}tooltip-opacity: .95;
     --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
     --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
     // scss-docs-end tooltip-css-vars

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index a54e512f25a235bf9a5a13a1df893bc405a83cbc..d43feeefe935ed575d9eab9a46f34b0faea5dd2f 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -175,13 +175,27 @@ $utilities: map.merge(
         0: 0,
       )
     ),
+    "border-y": (
+      property: border-block,
+      values: (
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+        0: 0,
+      )
+    ),
+    "border-x": (
+      property: border-inline,
+      values: (
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+        0: 0,
+      )
+    ),
     "border-color": (
       property: border-color,
       class: border,
-      local-vars: (
-        "border-opacity": 1
-      ),
-      // values: $utilities-border-colors
+      // local-vars: (
+      //   "border-opacity": 1
+      // ),
+      values: theme-color-values("border")
     ),
     // "subtle-border-color": (
     //   property: border-color,
@@ -309,6 +323,15 @@ $utilities: map.merge(
         evenly: space-evenly,
       )
     ),
+    "justify-self": (
+      responsive: true,
+      property: justify-self,
+      values: (
+        start: flex-start,
+        end: flex-end,
+        center: center,
+      )
+    ),
     "align-items": (
       responsive: true,
       property: align-items,
@@ -591,19 +614,30 @@ $utilities: map.merge(
       local-vars: (
         "text-opacity": 1
       ),
-      values: (
+      // values: map.merge(
+      //   theme-color-values("text"),
+      //   $theme-fgs
+      // ),
+      values: map.merge(
         // $utilities-text-colors,
-        // (
-        "muted": var(--#{$prefix}secondary-color), // deprecated
-        "black-50": rgba($black, .5), // deprecated
-        "white-50": rgba($white, .5), // deprecated
-        "body-secondary": var(--#{$prefix}secondary-color),
-        "body-tertiary": var(--#{$prefix}tertiary-color),
-        "body-emphasis": var(--#{$prefix}emphasis-color),
-        "reset": inherit,
-        // )
-      )
+        theme-color-values("text"),
+        (
+          "muted": var(--#{$prefix}secondary-color), // deprecated
+          "black-50": rgba($black, .5), // deprecated
+          "white-50": rgba($white, .5), // deprecated
+          "body-secondary": var(--#{$prefix}secondary-color),
+          "body-tertiary": var(--#{$prefix}tertiary-color),
+          "body-emphasis": var(--#{$prefix}emphasis-color),
+          "reset": inherit,
+        )
+      )
+    ),
+    "contrast-color": (
+      property: color,
+      class: text-on,
+      values: theme-color-values("contrast"),
     ),
+    // scss-docs-end utils-color
     "text-opacity": (
       // css-var: true,
       property: --#{$prefix}text-opacity,
@@ -615,12 +649,12 @@ $utilities: map.merge(
         100: 1
       )
     ),
-    "text-color": (
-      property: color,
-      class: text,
-      values: theme-color-values("text"),
-      // values: $utilities-text-emphasis-colors
-    ),
+    // "text-color": (
+    //   property: color,
+    //   class: text,
+    //   values: theme-color-values("text"),
+    //   // values: $utilities-text-emphasis-colors
+    // ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
@@ -676,19 +710,18 @@ $utilities: map.merge(
     // scss-docs-end utils-links
     // scss-docs-start utils-bg-color
     "bg-attr": (
-      selector: "attr-starts",
+      selector: "attr-includes",
       class: "bg-",
       property: background-color,
       values: var(--#{$prefix}bg),
     ),
     "bg-color": (
-      // css-var: true,
       property: --#{$prefix}bg,
       class: bg,
-      // local-vars: (
-      //   "bg-opacity": 1
-      // ),
-      values: theme-color-values("bg"),
+      values: map.merge(
+        theme-color-values("bg"),
+        $theme-bgs
+      ),
     ),
     "bg-color-subtle": (
       property: --#{$prefix}bg,
@@ -700,8 +733,6 @@ $utilities: map.merge(
       class: bg-muted,
       values: theme-color-values("bg-muted"),
     ),
-
-
     "bg-opacity": (
       class: bg,
       property: background-color,
@@ -718,11 +749,6 @@ $utilities: map.merge(
         100: var(--#{$prefix}bg),
       )
     ),
-    // "subtle-background-color": (
-    //   property: background-color,
-    //   class: bg,
-    //   // values: $utilities-bg-subtle
-    // ),
     // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
@@ -741,7 +767,7 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-interaction
     // scss-docs-start utils-border-radius
-    "rounded": (
+    "border-radius": (
       property: border-radius,
       class: rounded,
       values: (

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3173346ca0721a64edad719823dcda1624c9daec..8f136475583f529156f0901a97438e0c5e55e881 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -160,7 +160,7 @@ $body-emphasis-color:       light-dark($black, $white) !default;
 //
 // Style anchor elements.
 
-$link-color:                              var(--#{$prefix}primary-text) !default;
+$link-color:                              var(--#{$prefix}primary-base) !default;
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        color-mix(in srgb, #{$link-color}, $black #{$link-shade-percentage}) !default;
@@ -240,7 +240,7 @@ $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: 1px !default;
 $border-widths: (
   1: 1px,
   2: 2px,
@@ -248,28 +248,35 @@ $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;
+$border-style: solid !default;
+$border-color: light-dark($gray-300, $gray-700) !default;
+$border-color-translucent: rgba($black, .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .375rem !default;
-$border-radius-sm:            .25rem !default;
-$border-radius-lg:            .5rem !default;
-$border-radius-xl:            1rem !default;
-$border-radius-2xl:           2rem !default;
-$border-radius-pill:          50rem !default;
+$border-radius: var(--#{$prefix}border-radius) !default;
+$border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$border-radius-xl: var(--#{$prefix}border-radius-xl) !default;
+$border-radius-2xl: var(--#{$prefix}border-radius-2xl) !default;
+$border-radius-pill: var(--#{$prefix}border-radius-pill) !default;
 // scss-docs-end border-radius-variables
-// fusv-disable
-$border-radius-2xl:           $border-radius-2xl !default; // Deprecated in v5.3.0
-// fusv-enable
+
+$border-radii: (
+  "0": 0,
+  "sm": $border-radius-sm,
+  "md": $border-radius,
+  "lg": $border-radius-lg,
+  "xl": $border-radius-xl,
+  "2xl": $border-radius-2xl,
+  "pill": $border-radius-pill,
+) !default;
 
 // scss-docs-start box-shadow-variables
-$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
 // scss-docs-end box-shadow-variables
 
 $component-active-color:      $white !default;
@@ -1113,9 +1120,9 @@ $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     var(--#{$prefix}body-bg) !default;
-$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
+$tooltip-bg:                        var(--#{$prefix}fg-) !default;
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
-$tooltip-opacity:                   .9 !default;
+$tooltip-opacity:                   .95 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
 $tooltip-padding-x:                 $spacer * .5 !default;
 $tooltip-margin:                    null !default; // TODO: remove this in v6