tabler/core/scss/tabler-themes.scss

@use 'config' 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;
}

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

// 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;
}

@each $name, $value in $extra-colors {
  [data-bs-theme-primary='#{$name}'],
  [data-theme-primary='#{$name}'] {
    --primary: #{$value};
    --primary-rgb: #{to-rgb($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);
  --primary-rgb: #{to-rgb($dark)};

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

@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%;
    }
  }
}