package.scss._variables-dark.scss Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of boosted Show documentation
Show all versions of boosted Show documentation
Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.
The newest version!
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
//
// Boosted mod
// scss-docs-start brand-colors-dark
$functional-green-dark: $ods-forest-100 !default;
$functional-blue-dark: $ods-water-100 !default;
$functional-yellow-dark: $functional-yellow !default;
$functional-red-dark: $ods-fire-100 !default;
// scss-docs-end brand-colors-dark
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-color-dark-variables
$primary-dark: $supporting-orange !default;
$secondary-dark: $white !default;
$success-dark: $functional-green-dark !default;
$info-dark: $functional-blue-dark !default;
$warning-dark: $functional-yellow-dark !default;
$danger-dark: $functional-red-dark !default;
$light-dark: $gray-500 !default;
$dark-dark: $black !default;
// scss-docs-end theme-color-dark-variables
// scss-docs-start theme-colors-dark-map
$theme-colors-dark: (
"primary": $primary-dark,
"secondary": $secondary-dark,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"light": $light-dark,
"dark": $dark-dark,
) !default;
// scss-docs-end theme-colors-dark-map
// End mod
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: $primary-dark !default; // Boosted mod: instead of `tint-color($primary, 40%)`
$secondary-text-emphasis-dark: $secondary-dark !default; // Boosted mod: instead of `tint-color($secondary, 40%)`
$success-text-emphasis-dark: $success-dark !default; // Boosted mod: instead of `tint-color($success, 40%)`
$info-text-emphasis-dark: $info-dark !default; // Boosted mod: instead of `tint-color($info, 40%)`
$warning-text-emphasis-dark: $warning-dark !default; // Boosted mod: instead of `tint-color($warning, 40%)`
$danger-text-emphasis-dark: $danger-dark !default; // Boosted mod: instead of `tint-color($danger, 40%)`
$light-text-emphasis-dark: $light-dark !default; // Boosted mod: instead of `$gray-100`
$dark-text-emphasis-dark: $dark-dark !default; // Boosted mod: instead of `$gray-300`
// scss-docs-end theme-text-dark-variables
// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark: $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 80%)`
$secondary-bg-subtle-dark: $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 80%)`
$success-bg-subtle-dark: $success-dark !default; // Boosted mod: instead of `shade-color($success, 80%)`
$info-bg-subtle-dark: $info-dark !default; // Boosted mod: instead of `shade-color($info, 80%)`
$warning-bg-subtle-dark: $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 80%)`
$danger-bg-subtle-dark: $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 80%)`
$light-bg-subtle-dark: $light-dark !default; // Boosted mod: instead of `$gray-800`
$dark-bg-subtle-dark: $dark-dark !default; // Boosted mod: instead of `mix($gray-800, $black)`
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark: $primary-dark !default; // Boosted mod: instead of `shade-color($primary, 40%)`
$secondary-border-subtle-dark: $secondary-dark !default; // Boosted mod: instead of `shade-color($secondary, 40%)`
$success-border-subtle-dark: $success-dark !default; // Boosted mod: instead of `shade-color($success, 40%)`
$info-border-subtle-dark: $info-dark !default; // Boosted mod: instead of `shade-color($info, 40%)`
$warning-border-subtle-dark: $warning-dark !default; // Boosted mod: instead of `shade-color($warning, 40%)`
$danger-border-subtle-dark: $danger-dark !default; // Boosted mod: instead of `shade-color($danger, 40%)`
$light-border-subtle-dark: $light-dark !default; // Boosted mod: instead of `$gray-700`
$dark-border-subtle-dark: $dark-dark !default; // Boosted mod: instead of `$gray-800`
// scss-docs-end theme-border-subtle-dark-variables
$body-color-dark: $white !default; // Boosted mod: instead of `$gray-300`
$body-bg-dark: $gray-950 !default; // Boosted mod: instead of `$gray-900`
$body-secondary-color-dark: $gray-600 !default; // Boosted mod: instead of `rgba($body-color-dark, .75)`
$body-secondary-bg-dark: $gray-900 !default; // Boosted mod: instead of `$gray-800`
$body-tertiary-color-dark: $gray-700 !default; // Boosted mod: instead of `rgba($body-color-dark, .5)`
$body-tertiary-bg-dark: $black !default; // Boosted mod: instead of `mix($gray-800, $gray-900, 50%)`
$body-emphasis-color-dark: $white !default; // Boosted mod: instead of `$gray-100`
$disabled-color-dark: var(--#{$prefix}tertiary-color) !default; // Boosted mod
$tertiary-active-bg-dark: $gray-700 !default; // Boosted mod
$border-color-dark: $white !default; // Boosted mod: instead of `$gray-700`
$border-color-subtle-dark: $gray-700 !default; // Boosted mod
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
$link-hover-color-dark: $supporting-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
$code-color-dark: $gray-600 !default; // Boosted mod: instead of `tint-color($code-color, 40%)`
$mark-color-dark: $black !default; // Boosted mod: instead of `$body-color-dark`
$mark-bg-dark: $white !default; // Boosted mod: instead of `$yellow-800`
$focus-ring-color-dark: rgba($supporting-orange, $focus-ring-opacity) !default; // Boosted mod
$focus-visible-inner-color-dark: $black !default; // Boosted mod
$focus-visible-outer-color-dark: $white !default; // Boosted mod
$success-icon-dark: url("data:image/svg+xml,") !default; // Boosted mod
$danger-icon-dark: url("data:image/svg+xml,") !default; // Boosted mod
// Boosted mod
$svg-as-custom-props-dark: (
"success": $success-icon-dark,
"error": $danger-icon-dark
) !default;
// End mod
//
// Forms
//
$form-check-filter-dark: none !default; // Boosted mod
$form-check-input-disabled-color-dark: $gray-700 !default; // Boosted mod
$form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // Boosted mod
$form-switch-square-bg-dark: $gray-950 !default; // Boosted mod
// Boosted mod: no $form-select-indicator-color-dark
$form-select-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod: instead of Bootstrap svg
$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod
// Boosted mod: no $form-switch-color-dark
// Boosted mod: no $form-switch-bg-image-dark
// scss-docs-start form-validation-colors-dark
$form-valid-color-dark: var(--#{$prefix}success-text-emphasis) !default; // Boosted mod: instead of `$green-300`
$form-valid-border-color-dark: var(--#{$prefix}success) !default; // Boosted mod: instead of `$green-300`
$form-invalid-color-dark: var(--#{$prefix}danger-text-emphasis) !default; // Boosted mod: instead of `$red-300`
$form-invalid-border-color-dark: var(--#{$prefix}danger) !default; // Boosted mod: instead of `$red-300`
// scss-docs-end form-validation-colors-dark
//
// Accordion
//
// Boosted mod: no $accordion-icon-color-dark
// Boosted mod: no $accordion-icon-active-color-dark
// Boosted mod: no $accordion-button-icon-dark
// Boosted mod: no $accordion-button-active-icon-dark
//
// Breadcrumb
//
$breadcrumb-divider-filter-dark: $invert-filter !default; // Boosted mod
//
// Tables
//
$table-striped-bg-factor-dark: 1 !default; // Boosted mod
$table-active-bg-factor-dark: .35 !default; // Boosted mod
$table-hover-bg-factor-dark: .135 !default; // Boosted mod
// scss-docs-end sass-dark-mode-vars