@tabler/core 1.5.0 → 1.6.0

package/scss/mixins/_functions.scss

@@ -7,46 +7,39 @@
 @use '../settings' as *;
 @use 'bootstrap/breakpoints' as *;
 
-@function theme-color-lighter($color, $background: #fff) {
-  @return color.mix($color, $background, 10%);
+// Mixes two colours in `oklab` so tints and shades stay perceptually even, then
+// clips the result to the sRGB gamut so every consumer (`luminance()`,
+// `to-rgb()`, the emitted `rgb()` values) keeps working on legacy channels.
+@function mix-color($color1, $color2, $weight: 50%) {
+  @return color.to-gamut(color.mix($color1, $color2, $weight, $method: oklab), $space: rgb, $method: clip);
 }
 
-@function theme-color-darker($color) {
-  @return shade-color($color, 10%);
+// Runtime counterpart of `mix-color()`: returns a CSS `color-mix()` so the token
+// follows `--tblr-*` overrides in the browser. Use it only where the result is
+// emitted as-is; it cannot feed `color-contrast()`, `to-rgb()` or `luminance()`.
+@function mix-color-css($color1, $color2, $weight: 50%) {
+  @return color-mix(in oklab, #{$color1} #{to-percentage($weight)}, #{$color2});
 }
 
-// str-replace was defined here twice — the canonical copy lives in the
-// "Bootstrap functions" section below.
-
-@mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
-  $prev: breakpoint-prev($name, $breakpoints);
-
-  @if $prev == null {
-    @content;
-  } @else {
-    $max: breakpoint-max($prev, $breakpoints);
-
-    @if $max {
-      @media (max-width: $max) {
-        @content;
-      }
-    } @else {
-      @content;
-    }
-  }
+// Shifts lightness in `oklch` (perceptual, keeps hue and chroma) and clips the
+// result to sRGB. `$amount` is a percentage added to the oklch L channel.
+@function adjust-lightness($color, $amount) {
+  @return color.to-gamut(color.adjust($color, $lightness: $amount, $space: oklch), $space: rgb, $method: clip);
 }
 
-@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
-  $n: list.index($breakpoint-names, $name);
-  @if not $n {
-    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
-  }
-  @return if(sass($n > 1): list.nth($breakpoint-names, $n - 1); else: null);
+// Runtime counterpart of `adjust-lightness()`: relative color syntax, so the
+// token follows `--tblr-*` overrides in the browser. Emit-only, like `mix-color-css()`.
+//
+// Only `l` goes through `calc()`. Safari before 18 resolves `h` to an angle, so
+// `calc(h + 30)` is invalid there and needs `calc(h + 30deg)`; `l` and `c` are
+// numbers in every browser. The origin must be a plain color: Safari before 18
+// does not take `currentcolor`, a system color or `light-dark()` there.
+@function adjust-lightness-css($color, $amount) {
+  $delta: math.div($amount, 100%);
+  $sign: if(sass($delta < 0): '-'; else: '+');
+  @return oklch(from #{$color} calc(l #{$sign} #{math.abs($delta)}) c h);
 }
 
-// escape-svg was defined here twice — the canonical copy lives in the
-// "Bootstrap functions" section below.
-
 /**
  * Converts a given value to a percentage string.
  *
@@ -54,7 +47,10 @@
  * @return {String} - The percentage representation of the value.
  */
 @function to-percentage($value) {
-  @return if(sass(math.is-unitless($value)): math.percentage($value); else: $value);
+  @if meta.type-of($value) == number and math.is-unitless($value) {
+    @return math.percentage($value);
+  }
+  @return $value;
 }
 
 /**
@@ -63,56 +59,37 @@
  * @param {Color} $color - The base color to be made transparent.
  * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
  * @return {Color} - The resulting color with the specified transparency.
+ *
+ * Mixes in `oklab` so tints against an opaque background (e.g. alert backgrounds
+ * over `--bg-surface`) stay perceptually even; mixing with `transparent` gives
+ * the same result in every color space.
  */
 @function color-transparent($color, $alpha: 1, $background: transparent) {
-  @if $alpha == 1 {
+  @if $alpha == 1 or $alpha == 100% {
     @return $color;
-  } @else {
-    @return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
   }
+  @return color-mix(in oklab, #{$color} #{to-percentage($alpha)}, $background);
 }
 
-@function url-svg($svg) {
-  $svg: str-replace($svg, '#', '%23');
-  $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+// Focus ring colour of `$color`, as in Bootstrap v6: mixed with the page background
+// instead of made transparent, so the ring is opaque and looks the same on any
+// surface, and stronger in dark mode, where a 50% mix is too faint.
+@function focus-ring-color($color) {
+  @return light-dark(color-transparent($color, calc(var(--focus-ring-opacity) * 100%), var(--body-bg)), color-transparent($color, calc(var(--focus-ring-opacity-dark) * 100%), var(--body-bg)));
+}
 
-  @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+// Paints a monochrome svg data uri (authored with `black`) in a Sass colour, for
+// the few places that cannot use `mask-icon()`: a pseudo-element that already
+// carries a background, or a form control without pseudo-elements. Pass a Sass
+// colour, never `var()` — an svg image cannot resolve custom properties.
+@function svg-icon-color($svg, $color) {
+  @return str-replace($svg, "'black'", "'#{$color}'");
 }
 
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
-// Ascending
-// Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
-  $prev-key: null;
-  $prev-num: null;
-  @each $key, $num in $map {
-    @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
-      // Do nothing
-    } @else if not math.compatible($prev-num, $num) {
-      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    } @else if $prev-num >= $num {
-      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    }
-    $prev-key: $key;
-    $prev-num: $num;
-  }
-}
-
-// Starts at zero
-// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
-  @if list.length($map) > 0 {
-    $values: map.values($map);
-    $first-value: list.nth($values, 1);
-    @if $first-value != 0 {
-      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
-    }
-  }
-}
-
 // Colors
 @function to-rgb($value) {
   @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
@@ -121,13 +98,12 @@
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
   @if $identifier == 'body' and $target == 'bg' {
-    @return color-mix(in srgb, var(--#{$identifier}-bg) calc(var(--#{$target}-opacity) * 100%), transparent);
+    @return color-transparent(var(--#{$identifier}-bg), calc(var(--#{$target}-opacity) * 100%));
   }
   @if $identifier == 'body' and $target == 'text' {
-    @return color-mix(in srgb, var(--#{$identifier}-color) calc(var(--#{$target}-opacity) * 100%), transparent);
-  } @else {
-    @return color-mix(in srgb, var(--#{$identifier}) calc(var(--#{$target}-opacity) * 100%), transparent);
+    @return color-transparent(var(--#{$identifier}-color), calc(var(--#{$target}-opacity) * 100%));
   }
+  @return color-transparent(var(--#{$identifier}), calc(var(--#{$target}-opacity) * 100%));
 }
 
 @function map-loop($map, $func, $args...) {
@@ -152,14 +128,6 @@
 }
 // stylelint-enable scss/dollar-variable-pattern
 
-@function varify($list) {
-  $result: null;
-  @each $entry in $list {
-    $result: list.append($result, var(--#{$entry}), space);
-  }
-  @return $result;
-}
-
 // Internal Bootstrap function to turn maps into its negative variant.
 // It prefixes the keys with `n` and makes the value negative.
 @function negativify-map($map) {
@@ -172,32 +140,6 @@
   @return $result;
 }
 
-// Get multiple keys from a sass map
-@function map-get-multiple($map, $values) {
-  $result: ();
-  @each $key, $value in $map {
-    @if (list.index($values, $key) != null) {
-      $result: map.merge(
-        $result,
-        (
-          $key: $value,
-        )
-      );
-    }
-  }
-  @return $result;
-}
-
-// Merge multiple maps
-@function map-merge-multiple($maps...) {
-  $merged-maps: ();
-
-  @each $map in $maps {
-    $merged-maps: map.merge($merged-maps, $map);
-  }
-  @return $merged-maps;
-}
-
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
@@ -300,17 +242,17 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+  @return color.mix(color.change($foreground, $alpha: 1), $background, color.channel($foreground, 'alpha') * 100%, $method: srgb);
 }
 
-// Tint a color: mix a color with white
+// Tint a color: mix a color with white (in oklab, see `mix-color()`)
 @function tint-color($color, $weight) {
-  @return color.mix(white, $color, $weight);
+  @return mix-color(white, $color, $weight);
 }
 
-// Shade a color: mix a color with black
+// Shade a color: mix a color with black (in oklab, see `mix-color()`)
 @function shade-color($color, $weight) {
-  @return color.mix(black, $color, $weight);
+  @return mix-color(black, $color, $weight);
 }
 
 // Shade the color if the weight is positive, else tint it
@@ -400,3 +342,15 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   }
   @return $result;
 }
+
+// Seeds a component token from a Sass variable that has a `:root` scale
+// counterpart. While the variable still holds `$default`, the token reads the
+// scale (`var(--btn-input-padding-y)`) and follows it at runtime; once a
+// project configured the variable from Sass, that value wins, as it did before
+// the scale existed. `$token` is the bare name of the root custom property.
+@function var-if-default($value, $default, $token) {
+  @if $value == $default {
+    @return var(#{$token});
+  }
+  @return $value;
+}

package/scss/mixins/_mixins.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:meta';
 @use '../settings' as *;
 @use '../variables' as *;
@@ -65,20 +66,52 @@
   gap: var(--list-gap);
 }
 
-@mixin focus-ring($show-border: false) {
-  outline: 0;
-  box-shadow:
-    0 0 0 2px var(--primary),
-    0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--primary), 0.25);
-
-  @if ($show-border) {
-    border-color: color-transparent(var(--primary), 0.25);
+// `--focus-ring` is not set by default: composed on `:root` it would freeze the
+// width and the colour there, and an override on a component would not reach
+// the ring. Set it to replace the whole outline at once.
+//
+// deprecated(2.0): `$show-border` is the 1.5 name of the first parameter. It
+// tinted the border under the ring; drawing the ring over the border is what
+// `$offset` does, so the old argument keeps its place and feeds it.
+@mixin focus-ring($show-border: false, $color: null, $offset: $show-border) {
+  @if $color != null {
+    outline: var(--focus-ring-width) solid #{$color};
+  } @else {
+    outline: var(--focus-ring, var(--focus-ring-width) solid var(--focus-ring-color));
+  }
+  @if $offset {
+    outline-offset: var(--focus-ring-offset);
   }
 }
 
+// Fades the focus ring in: `outline-color` starts from transparent instead of
+// `currentcolor`. `transition` is one property, so pass the element's other
+// transitions here instead of a second `transition()` call.
+@mixin focus-ring-transition($transitions...) {
+  outline-color: transparent;
+  @include transition(list.append($transitions, $focus-ring-transition, comma)...);
+}
+
 //
 // Print styles
 //
+// Renders an svg icon through a CSS mask so the shape is painted with the
+// element's `background-color` and follows the theme without a colour baked
+// into the data uri. Set `background-color` on the element; pass `null` for
+// `$icon` when the mask image is applied per state.
+@mixin mask-icon($icon: null, $size: contain, $position: center) {
+  @if $icon != null {
+    mask-image: $icon;
+  }
+  mask-repeat: no-repeat;
+  @if $position != null {
+    mask-position: $position;
+  }
+  @if $size != null {
+    mask-size: $size;
+  }
+}
+
 @mixin media-print {
   @media print {
     @content;

package/scss/mixins/bootstrap/_caret.scss

@@ -40,17 +40,18 @@
   &:#{$selector} {
     content: '';
     display: inline-block;
-    vertical-align: $caret-vertical-align;
-    width: $caret-width;
-    height: $caret-width;
+    vertical-align: $vertical-align;
+    width: $width;
+    height: $width;
     border-bottom: 1px var(--border-style);
     border-inline-start: 1px var(--border-style);
-    margin-inline-end: 0.1em;
 
     @if $direction != 'start' {
-      margin-inline-start: $caret-spacing;
+      margin-inline-start: $spacing;
+      margin-inline-end: 0.1em;
     } @else {
-      margin-inline-end: $caret-spacing;
+      margin-inline-start: 0.1em;
+      margin-inline-end: $spacing;
     }
 
     @if $direction == down {

package/scss/mixins/bootstrap/_color-mode.scss

@@ -15,6 +15,12 @@
         @content;
       }
     }
+  } @else if $mode == dark {
+    .theme-dark,
+    [data-bs-theme='dark'],
+    [data-theme='dark'] {
+      @content;
+    }
   } @else {
     [data-bs-theme='#{$mode}'],
     [data-theme='#{$mode}'] {

package/scss/mixins/bootstrap/_forms.scss

@@ -4,6 +4,7 @@
 @use '../../settings' as *;
 @use '../../variables' as *;
 @use '../functions' as *;
+@use '../mixins' as *;
 @use 'breakpoints' as *;
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
@@ -21,7 +22,7 @@
   }
 }
 
-@mixin form-validation-state($state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity), $border-color: $color) {
+@mixin form-validation-state($state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: color-transparent($color, $form-feedback-tooltip-opacity), $focus-box-shadow: null, $border-color: $color, $focus-ring-color: focus-ring-color($color)) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
@@ -67,11 +68,9 @@
 
       &:focus {
         border-color: $border-color;
-        @if $enable-shadows {
-          @include box-shadow($input-box-shadow, $focus-box-shadow);
-        } @else {
-          box-shadow: $focus-box-shadow;
-        }
+        @include focus-ring(true, $focus-ring-color);
+        // deprecated(2.0): a `focus-box-shadow` key in `$form-validation-states`
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -102,11 +101,9 @@
 
       &:focus {
         border-color: $border-color;
-        @if $enable-shadows {
-          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
-        } @else {
-          box-shadow: $focus-box-shadow;
-        }
+        @include focus-ring(true, $focus-ring-color);
+        // deprecated(2.0): a `focus-box-shadow` key in `$form-validation-states`
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -128,6 +125,8 @@
       }
 
       &:focus {
+        @include focus-ring(true, $focus-ring-color);
+        // deprecated(2.0): a `focus-box-shadow` key in `$form-validation-states`
         box-shadow: $focus-box-shadow;
       }
 

package/scss/mixins/bootstrap/_gradients.scss

@@ -38,6 +38,6 @@
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 
-@mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) {
+@mixin gradient-striped($color: color-transparent(var(--white), 0.15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }

package/scss/mixins/bootstrap/_table-variants.scss

@@ -2,16 +2,15 @@
 @use '../../variables' as *;
 @use '../functions' as *;
 @use 'breakpoints' as *;
-@use 'sass:color';
 @use 'sass:math';
 
 @mixin table-variant($state, $background) {
   .table-#{$state} {
     $color: color-contrast(opaque($body-bg, $background));
-    $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
-    $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
-    $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
-    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
+    $hover-bg: mix-color($color, $background, math.percentage($table-hover-bg-factor));
+    $striped-bg: mix-color($color, $background, math.percentage($table-striped-bg-factor));
+    $active-bg: mix-color($color, $background, math.percentage($table-active-bg-factor));
+    $table-border-color: mix-color($color, $background, math.percentage($table-border-factor));
 
     --table-color: #{$color};
     --table-bg: #{$background};

package/scss/tabler-props.scss

@@ -1 +1,6 @@
+@use 'deprecated-props' as *;
+
 @forward 'props';
+
+// `--tblr-*-rgb` of older 1.x releases, behind `$enable-deprecated`.
+@include deprecated-color-props();

package/scss/tabler-themes.scss

@@ -1,22 +1,53 @@
 @use 'config' as *;
+@use 'deprecated-props' as *;
 
 [data-bs-theme-base='slate'],
 [data-theme-base='slate'] {
-  --gray-50: #f8fafc;
-  --gray-100: #f1f5f9;
-  --gray-200: #e2e8f0;
-  --gray-300: #cbd5e1;
-  --gray-400: #94a3b8;
-  --gray-500: #64748b;
-  --gray-600: #475569;
-  --gray-700: #334155;
-  --gray-800: #1e293b;
-  --gray-900: #0f172a;
-  --gray-950: #020617;
+  --gray-50: oklch(98.42% 0.0034 247.86deg); // #f8fafc
+  --gray-100: oklch(96.83% 0.0069 247.9deg); // #f1f5f9
+  --gray-200: oklch(92.88% 0.0126 255.51deg); // #e2e8f0
+  --gray-300: oklch(86.9% 0.0198 252.89deg); // #cbd5e1
+  --gray-400: oklch(71.07% 0.0351 256.79deg); // #94a3b8
+  --gray-500: oklch(55.44% 0.0407 257.42deg); // #64748b
+  --gray-600: oklch(44.55% 0.0374 257.28deg); // #475569
+  --gray-700: oklch(37.17% 0.0392 257.29deg); // #334155
+  --gray-800: oklch(27.95% 0.0368 260.03deg); // #1e293b
+  --gray-900: oklch(20.77% 0.0398 265.75deg); // #0f172a
+  --gray-950: oklch(12.88% 0.0406 264.7deg); // #020617
 }
 
 [data-bs-theme-base='gray'],
 [data-theme-base='gray'] {
+  --gray-50: oklch(98.46% 0.0017 247.84deg); // #f9fafb
+  --gray-100: oklch(96.7% 0.0029 264.54deg); // #f3f4f6
+  --gray-200: oklch(92.76% 0.0058 264.53deg); // #e5e7eb
+  --gray-300: oklch(87.17% 0.0093 258.34deg); // #d1d5db
+  --gray-400: oklch(71.37% 0.0192 261.32deg); // #9ca3af
+  --gray-500: oklch(55.1% 0.0234 264.36deg); // #6b7280
+  --gray-600: oklch(44.61% 0.0263 256.8deg); // #4b5563
+  --gray-700: oklch(37.29% 0.0306 259.73deg); // #374151
+  --gray-800: oklch(27.81% 0.0296 256.85deg); // #1f2937
+  --gray-900: oklch(21.01% 0.0318 264.66deg); // #111827
+  --gray-950: oklch(12.96% 0.0274 261.69deg); // #030712
+}
+
+[data-bs-theme-base='zinc'],
+[data-theme-base='zinc'] {
+  --gray-50: oklch(98.51% 0 0deg); // #fafafa
+  --gray-100: oklch(96.74% 0.0013 286.37deg); // #f4f4f5
+  --gray-200: oklch(91.97% 0.004 286.32deg); // #e4e4e7
+  --gray-300: oklch(87.11% 0.0055 286.29deg); // #d4d4d8
+  --gray-400: oklch(71.18% 0.0129 286.07deg); // #a1a1aa
+  --gray-500: oklch(55.17% 0.0138 285.94deg); // #71717a
+  --gray-600: oklch(44.19% 0.0146 285.79deg); // #52525b
+  --gray-700: oklch(37.03% 0.0119 285.81deg); // #3f3f46
+  --gray-800: oklch(27.39% 0.0055 286.03deg); // #27272a
+  --gray-900: oklch(21.03% 0.0059 285.89deg); // #18181b
+  --gray-950: oklch(14.08% 0.0044 285.82deg); // #09090b
+}
+
+[data-bs-theme-base='neutral'],
+[data-theme-base='neutral'] {
   --gray-50: #{$gray-50};
   --gray-100: #{$gray-100};
   --gray-200: #{$gray-200};
@@ -30,72 +61,41 @@
   --gray-950: #{$gray-950};
 }
 
-[data-bs-theme-base='zinc'],
-[data-theme-base='zinc'] {
-  --gray-50: #fafafa;
-  --gray-100: #f4f4f5;
-  --gray-200: #e4e4e7;
-  --gray-300: #d4d4d8;
-  --gray-400: #a1a1aa;
-  --gray-500: #71717a;
-  --gray-600: #52525b;
-  --gray-700: #3f3f46;
-  --gray-800: #27272a;
-  --gray-900: #18181b;
-  --gray-950: #09090b;
-}
-
-[data-bs-theme-base='neutral'],
-[data-theme-base='neutral'] {
-  --gray-50: #fafafa;
-  --gray-100: #f5f5f5;
-  --gray-200: #e5e5e5;
-  --gray-300: #d4d4d4;
-  --gray-400: #a3a3a3;
-  --gray-500: #737373;
-  --gray-600: #525252;
-  --gray-700: #404040;
-  --gray-800: #262626;
-  --gray-900: #171717;
-  --gray-950: #0a0a0a;
-}
-
 [data-bs-theme-base='stone'],
 [data-theme-base='stone'] {
-  --gray-50: #fafaf9;
-  --gray-100: #f5f5f4;
-  --gray-200: #e7e5e4;
-  --gray-300: #d6d3d1;
-  --gray-400: #a8a29e;
-  --gray-500: #78716c;
-  --gray-600: #57534e;
-  --gray-700: #44403c;
-  --gray-800: #292524;
-  --gray-900: #1c1917;
-  --gray-950: #0c0a09;
+  --gray-50: oklch(98.48% 0.0013 106.42deg); // #fafaf9
+  --gray-100: oklch(96.99% 0.0013 106.42deg); // #f5f5f4
+  --gray-200: oklch(92.32% 0.0026 48.72deg); // #e7e5e4
+  --gray-300: oklch(86.87% 0.0043 56.37deg); // #d6d3d1
+  --gray-400: oklch(71.61% 0.0091 56.26deg); // #a8a29e
+  --gray-500: oklch(55.34% 0.0116 58.07deg); // #78716c
+  --gray-600: oklch(44.44% 0.0096 73.64deg); // #57534e
+  --gray-700: oklch(37.41% 0.0087 67.56deg); // #44403c
+  --gray-800: oklch(26.85% 0.0063 34.3deg); // #292524
+  --gray-900: oklch(21.61% 0.0061 56.04deg); // #1c1917
+  --gray-950: oklch(14.69% 0.0041 49.25deg); // #0c0a09
 }
 
 // Easter egg: not listed in the theme settings panel, enable with `data-bs-theme-base="pink"` or `?theme-base=pink`
 [data-bs-theme-base='pink'],
 [data-theme-base='pink'] {
-  --gray-50: #fdf2f8;
-  --gray-100: #fce7f3;
-  --gray-200: #fbcfe8;
-  --gray-300: #f9a8d4;
-  --gray-400: #f472b6;
-  --gray-500: #ec4899;
-  --gray-600: #db2777;
-  --gray-700: #be185d;
-  --gray-800: #9d174d;
-  --gray-900: #831843;
-  --gray-950: #500724;
+  --gray-50: oklch(97.14% 0.0141 343.2deg); // #fdf2f8
+  --gray-100: oklch(94.82% 0.0276 342.26deg); // #fce7f3
+  --gray-200: oklch(89.94% 0.0589 343.23deg); // #fbcfe8
+  --gray-300: oklch(82.28% 0.1095 346.02deg); // #f9a8d4
+  --gray-400: oklch(72.53% 0.1752 349.76deg); // #f472b6
+  --gray-500: oklch(65.59% 0.2118 354.31deg); // #ec4899
+  --gray-600: oklch(59.16% 0.218 0.58deg); // #db2777
+  --gray-700: oklch(52.46% 0.199 3.96deg); // #be185d
+  --gray-800: oklch(45.87% 0.1697 3.82deg); // #9d174d
+  --gray-900: oklch(40.78% 0.1442 2.43deg); // #831843
+  --gray-950: oklch(28.45% 0.1048 3.91deg); // #500724
 }
 
 @each $name, $value in $extra-colors {
   [data-bs-theme-primary='#{$name}'],
   [data-theme-primary='#{$name}'] {
     --primary: #{$value};
-    --primary-rgb: #{to-rgb($value)};
   }
 }
 
@@ -110,7 +110,6 @@
 [data-theme-primary='inverted'] {
   --primary: var(--gray-800);
   --primary-fg: var(--light);
-  --primary-rgb: #{to-rgb($dark)};
 
   &[data-bs-theme='dark'],
   [data-bs-theme='dark'],
@@ -118,7 +117,6 @@
   [data-theme='dark'] {
     --primary: #{$light};
     --primary-fg: var(--dark);
-    --primary-rgb: #{to-rgb($light)};
   }
 }
 
@@ -132,3 +130,6 @@
     }
   }
 }
+
+// `--tblr-primary-rgb` of older 1.x releases, behind `$enable-deprecated`.
+@include deprecated-theme-props();

package/scss/tabler-vendors.scss

@@ -1,7 +1,6 @@
 @forward 'config';
 
 @forward 'vendor/nouislider';
-@forward 'vendor/litepicker';
 @forward 'vendor/tom-select';
 @forward 'vendor/apexcharts';
 @forward 'vendor/jsvectormap';
@@ -13,3 +12,6 @@
 @forward 'vendor/coloris';
 @forward 'vendor/typed';
 @forward 'vendor/fullcalendar';
+// deprecated(2.0): Litepicker is replaced by the Datepicker plugin; its styles
+// stay for projects that still load it.
+@forward 'vendor/litepicker';

package/scss/tabler.scss

@@ -1,3 +1,5 @@
 @forward 'core';
 // Cross-module `@extend` rules — must load last, see the note in `_extends.scss`.
 @forward 'extends';
+// Aliases and tokens of older 1.x releases, behind `$enable-deprecated`.
+@forward 'deprecated';