tabler/core/scss/tabler-themes.scss

@use 'config' as *;
@use 'deprecated-props' as *;

[data-bs-theme-base='slate'],
[data-theme-base='slate'] {
  --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};
  --gray-300: #{$gray-300};
  --gray-400: #{$gray-400};
  --gray-500: #{$gray-500};
  --gray-600: #{$gray-600};
  --gray-700: #{$gray-700};
  --gray-800: #{$gray-800};
  --gray-900: #{$gray-900};
  --gray-950: #{$gray-950};
}

[data-bs-theme-base='stone'],
[data-theme-base='stone'] {
  --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: 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};
  }
}

@each $value in (0, 0.5, 1, 1.5, 2) {
  [data-bs-theme-radius='#{$value}'],
  [data-theme-radius='#{$value}'] {
    --border-radius-scale: #{$value};
  }
}

[data-bs-theme-primary='inverted'],
[data-theme-primary='inverted'] {
  --primary: var(--gray-800);
  --primary-fg: var(--light);

  &[data-bs-theme='dark'],
  [data-bs-theme='dark'],
  &[data-theme='dark'],
  [data-theme='dark'] {
    --primary: #{$light};
    --primary-fg: var(--dark);
  }
}

@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
  [data-bs-theme-font='#{$name}'],
  [data-theme-font='#{$name}'] {
    --body-font-family: var(--font-#{$name});

    @if $name == 'monospace' {
      --body-font-size: 80%;
    }
  }
}

// `--tblr-primary-rgb` of older 1.x releases, behind `$enable-deprecated`.
@include deprecated-theme-props();