mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
98 lines
4.2 KiB
SCSS
98 lines
4.2 KiB
SCSS
@use 'settings' as *;
|
|
@use 'variables' as *;
|
|
@use 'mixins/functions' as *;
|
|
|
|
//
|
|
// Dark mode
|
|
//
|
|
$darken-dark: adjust-lightness-css(var(--dark), -2%) !default;
|
|
$border-color-dark: adjust-lightness-css(var(--dark), 8%) !default;
|
|
$border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default;
|
|
$border-dark-color-dark: adjust-lightness-css(var(--dark), 4%) !default;
|
|
$border-active-color-dark: adjust-lightness-css(var(--dark), 12%) !default;
|
|
|
|
//new bootsrap variables
|
|
$body-color-dark: $gray-200 !default;
|
|
$body-emphasis-color-dark: $white !default;
|
|
|
|
$text-secondary-dark: rgba(153, 159, 164, 1) !default;
|
|
|
|
// Theme text emphasis dark
|
|
$primary-text-emphasis-dark: mix-color-css(var(--white), var(--primary), 40%) !default;
|
|
$secondary-text-emphasis-dark: mix-color-css(var(--white), var(--secondary), 40%) !default;
|
|
$success-text-emphasis-dark: mix-color-css(var(--white), var(--success), 40%) !default;
|
|
$info-text-emphasis-dark: mix-color-css(var(--white), var(--info), 40%) !default;
|
|
$warning-text-emphasis-dark: mix-color-css(var(--white), var(--warning), 40%) !default;
|
|
$danger-text-emphasis-dark: mix-color-css(var(--white), var(--danger), 40%) !default;
|
|
$light-text-emphasis-dark: $gray-100 !default;
|
|
$dark-text-emphasis-dark: $gray-300 !default;
|
|
|
|
// Theme bg subtle dark
|
|
$primary-bg-subtle-dark: mix-color-css(var(--black), var(--primary), 80%) !default;
|
|
$secondary-bg-subtle-dark: mix-color-css(var(--black), var(--secondary), 80%) !default;
|
|
$success-bg-subtle-dark: mix-color-css(var(--black), var(--success), 80%) !default;
|
|
$info-bg-subtle-dark: mix-color-css(var(--black), var(--info), 80%) !default;
|
|
$warning-bg-subtle-dark: mix-color-css(var(--black), var(--warning), 80%) !default;
|
|
$danger-bg-subtle-dark: mix-color-css(var(--black), var(--danger), 80%) !default;
|
|
$light-bg-subtle-dark: $gray-800 !default;
|
|
$dark-bg-subtle-dark: mix-color-css(var(--gray-800), var(--black)) !default;
|
|
|
|
// Theme border subtle dark
|
|
$primary-border-subtle-dark: mix-color-css(var(--black), var(--primary), 40%) !default;
|
|
$secondary-border-subtle-dark: mix-color-css(var(--black), var(--secondary), 40%) !default;
|
|
$success-border-subtle-dark: mix-color-css(var(--black), var(--success), 40%) !default;
|
|
$info-border-subtle-dark: mix-color-css(var(--black), var(--info), 40%) !default;
|
|
$warning-border-subtle-dark: mix-color-css(var(--black), var(--warning), 40%) !default;
|
|
$danger-border-subtle-dark: mix-color-css(var(--black), var(--danger), 40%) !default;
|
|
$light-border-subtle-dark: $gray-700 !default;
|
|
$dark-border-subtle-dark: $gray-800 !default;
|
|
|
|
// Body dark
|
|
$body-bg-dark: $gray-900 !default;
|
|
$body-secondary-color-dark: color-transparent(var(--body-color), 0.75) !default;
|
|
$body-secondary-bg-dark: $gray-800 !default;
|
|
$body-tertiary-color-dark: color-transparent(var(--body-color), 0.5) !default;
|
|
$body-tertiary-bg-dark: mix-color($gray-800, $gray-900, 50%) !default;
|
|
|
|
// Headings dark
|
|
$headings-color-dark: inherit !default;
|
|
|
|
// Link dark
|
|
$link-color-dark: tint-color($primary, 40%) !default;
|
|
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
|
|
|
// Mark dark
|
|
$mark-color-dark: $body-color-dark !default;
|
|
$mark-bg-dark: mix-color-css(var(--black), var(--yellow), 60%) !default;
|
|
|
|
//
|
|
// Forms dark
|
|
//
|
|
|
|
$form-select-indicator-color-dark: $body-color-dark !default;
|
|
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
|
|
|
// Form validation colors dark
|
|
$form-valid-color-dark: mix-color-css(var(--white), var(--green), 40%) !default;
|
|
$form-valid-border-color-dark: mix-color-css(var(--white), var(--green), 40%) !default;
|
|
$form-invalid-color-dark: mix-color-css(var(--white), var(--red), 40%) !default;
|
|
$form-invalid-border-color-dark: mix-color-css(var(--white), var(--red), 40%) !default;
|
|
|
|
//
|
|
// Accordion dark
|
|
//
|
|
|
|
//
|
|
// Carousel dark
|
|
//
|
|
|
|
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
|
|
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
|
|
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
|
|
|
|
//
|
|
// Close button dark
|
|
//
|
|
|
|
$btn-close-filter-dark: $btn-close-white-filter !default;
|