// Color system $white: #fff; $min-contrast-ratio: 3.5 !default; // Variables // // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. // Color system $white: #fff !default; $gray-100: #F1F5F9 !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5bd !default; $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; // fusv-disable $grays: ("100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900, ) !default; // Light color $light-primary: #EDE9FE !default; // NEW $light-secondary: #F1F5F9 !default; // NEW $light-success: #DCFCE7 !default; // NEW $light-danger: #FFE4E6 !default; // NEW $light-warning: #FEF3C7 !default; // NEW $light-info: #CFFAFE !default; // NEW // scss-docs-start theme-colors-map $theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark, "white": $white, "light-primary": $light-primary, "light-danger": $light-danger, "light-info": $light-info, "light-warning": $light-warning, "light-secondary": $light-secondary, "light-success": $light-success, "gray-400": $gray-400, ); // scss-docs-end theme-colors-map // Body // // Settings for the `` element. $body-bg: $white !default; $body-color: $gray-600 !default; $body-text-align: null !default; // Typography // $h1-font-size: 2.25rem !default; $h2-font-size: 1.75rem !default; $h3-font-size: 1.5rem !default; $h4-font-size: 1.25rem !default; $h5-font-size: 1rem !default; $h6-font-size: 0.8125rem !default; // scss-docs-end font-variables // scss-docs-start font-sizes $font-sizes: (1: $h1-font-size, 2: $h2-font-size, 3: $h3-font-size, 4: $h4-font-size, 5: $h5-font-size, 6: $h6-font-size) !default; // line height $h1-line-height: 1.3 !default; $h2-line-height: 1.35 !default; $h3-line-height: 1.4 !default; $h4-line-height: 1.45 !default; $h5-line-height: 1.5 !default; $h6-line-height: 1.55 !default; // scss-docs-end font-sizes $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: $gray-900 !default; $line-height-base: 1.5 !default; $font-family-sans-serif: "Archivo", "sans-serif;" !default; $font-family-base: $font-family-sans-serif !default; $font-material-design: "Material Design Icons"; $font-weight-normal: 400 !default; $font-weight-medium: 500 !default; $font-weight-bold: 600 !default; // Components // // Define common padding and border radius sizes and more. $border-radius: 0.5rem !default; $border-radius-sm: 0.25rem !default; $border-radius-lg: 0.75rem !default; // card $card-border-radius: $border-radius-lg !default; $card-border-color: $gray-300 !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. $input-btn-padding-y: 0.5rem !default; $input-btn-padding-x: 1rem !default; // $btn-font-weight: $font-weight-medium !default; $btn-box-shadow: none !default; $btn-focus-width: none !default; $btn-focus-box-shadow: none !default; $form-label-margin-bottom: 0.5rem !default; $form-label-font-size: null !default; $form-label-font-style: null !default; $form-label-font-weight: null !default; $form-label-color: $dark !default; $zindex-dropdown: 1001 !default; // line height $line-height-base: 1.5 !default; $line-height-sm: 1.4 !default; $line-height-lg: 2 !default; // pagination $pagination-padding-y: .375rem !default; $pagination-padding-x: 1rem !default; // Grid containers // // Define the maximum width of `.container` for different screen sizes. /* beautify ignore:start */ // $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, ) !default; $container-max-widths: ( sm: 640px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1536px, ) !default; /* beautify ignore:end */ // Settings for the `` element. // Spacing // // Control the default styling of most Bootstrap elements by modifying these // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. $spacer: 1rem !default; $spacers: () !default; // stylelint-disable-next-line scss/dollar-variable-default $spacers: map-merge((0: 0, 1: ($spacer * 0.25), // 4px 2: ($spacer * 0.5), // 8px 3: ($spacer * 1), // 16px 4: ($spacer * 1.5), // 24px 5: ($spacer * 2), // 32px 6: ($spacer * 2.5), // 40px 7: ($spacer * 3), // 48px 8: ($spacer * 3.5), // 56px 9: ($spacer * 4), // 64px 10: ($spacer * 4.5), // 72px 11: ($spacer * 5), // 80px 12: ($spacer * 5.5), // 88px 13: ($spacer * 6), // 96px 14: ($spacer * 6.5), // 104px 15: ($spacer * 7), // 112px 16: ($spacer * 7.5), // 120px 17: ($spacer * 8), // 128px 18: ($spacer * 8.5), // 136px 19: ($spacer * 9), // 144px 20: ($spacer * 9.5), // 152px 21: ($spacer * 10), // 160px 22: ($spacer * 14), // 224px 23: ($spacer * 18), // 224px 24: ($spacer * 19), // 224px ), $spacers); $enable-negative-margins: true; // Avatar $avatar-size-xs: 1.5rem !default; $avatar-size-sm: 2rem !default; $avatar-size-md: 2.5rem !default; $avatar-size-lg: 3.5rem !default; $avatar-size-xl: 5rem !default; $avatar-size-xxl: 7.5rem !default; // Icon $icon-size-xs: 1.5rem !default; $icon-size-sm: 2rem !default; $icon-size-md: 2.5rem !default; $icon-size-lg: 3rem !default; $icon-size-xl: 3.5rem !default; $icon-size-xxl: 4rem !default; $icon-size-xxxl: 5rem !default; // Breadcrumbs $breadcrumb-font-size: 0.875rem !default; $carousel-control-color: $dark !default; $carousel-control-icon-width: 1rem !default; $carousel-control-opacity: 1 !default; $carousel-indicator-width: 8px !default; $carousel-indicator-height: 8px !default; $carousel-control-transition: none !default; // Images aspect ratio 4:3 $img-4by3-xxl: 9rem; $img-4by3-xl: 7.75rem; $img-4by3-lg: 6.5rem; $img-4by3-md: 5.25rem; $img-4by3-sm: 4rem; $img-4by3-xs: 2.75rem; // Smooth Box Shadow $box-shadow-smooth-sm: 0px 2px 4px rgba(0, 0, 20, 0.08),0px 1px 2px rgba(0, 0, 20, 0.08)!default; $box-shadow-smooth-md: 0px 9px 26px rgba(0, 0, 0, 0.19), 0px 1.4932px 5.38611px rgba(0, 0, 0, 0.0823856), 0px 0.826568px 1.06088px rgba(0, 0, 0, 0.063299)!default; $box-shadow-smooth-lg: 0 1px 1px rgba(21,30,40,0.11),0 2px 2px rgba(21,30,40,0.11),0 4px 4px rgba(21,30,40,0.11),0 8px 8px rgba(21,30,40,0.11),0 16px 16px rgba(21,30,40,0.11),0 32px 32px rgba(21,30,40,0.11)!default; $table-cell-padding-y: 1rem; $table-cell-padding-x: 1.5rem; $table-cell-color: $black; // 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 // // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-text-dark-variables $primary-text-emphasis-dark: tint-color($primary, 40%) !default; $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default; $success-text-emphasis-dark: tint-color($success, 40%) !default; $info-text-emphasis-dark: tint-color($info, 40%) !default; $warning-text-emphasis-dark: tint-color($warning, 40%) !default; $danger-text-emphasis-dark: tint-color($danger, 40%) !default; $light-text-emphasis-dark: $gray-100 !default; $dark-text-emphasis-dark: $gray-300 !default; // scss-docs-end theme-text-dark-variables // scss-docs-start theme-bg-subtle-dark-variables $primary-bg-subtle-dark: shade-color($primary, 80%) !default; $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default; $success-bg-subtle-dark: shade-color($success, 80%) !default; $info-bg-subtle-dark: shade-color($info, 80%) !default; $warning-bg-subtle-dark: shade-color($warning, 80%) !default; $danger-bg-subtle-dark: shade-color($danger, 80%) !default; $light-bg-subtle-dark: $gray-800 !default; $dark-bg-subtle-dark: mix($gray-800, $black) !default; // scss-docs-end theme-bg-subtle-dark-variables // scss-docs-start theme-border-subtle-dark-variables $primary-border-subtle-dark: shade-color($primary, 40%) !default; $secondary-border-subtle-dark: shade-color($secondary, 40%) !default; $success-border-subtle-dark: shade-color($success, 40%) !default; $info-border-subtle-dark: shade-color($info, 40%) !default; $warning-border-subtle-dark: shade-color($warning, 40%) !default; $danger-border-subtle-dark: shade-color($danger, 40%) !default; $light-border-subtle-dark: $gray-700 !default; $dark-border-subtle-dark: $gray-800 !default; // scss-docs-end theme-border-subtle-dark-variables $body-color-dark: $gray-500 !default; $body-bg-dark: $gray-900 !default; $body-secondary-color-dark: rgba($body-color-dark, .75) !default; $body-secondary-bg-dark: $gray-800 !default; $body-tertiary-color-dark: rgba($body-color-dark, .5) !default; $body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default; $body-emphasis-color-dark: $white !default; $border-color-dark: $gray-700 !default; $border-color-translucent-dark: rgba($white, .15) !default; $headings-color-dark: inherit !default; $link-color-dark: tint-color($primary, 40%) !default; $link-hover-color-dark: tint-color($primary, 40%) !default; $code-color-dark: tint-color(#000, 40%) !default; // // Forms // $form-select-indicator-color-dark: $body-color-dark !default; $form-select-indicator-dark: url("data:image/svg+xml,") !default; $form-switch-color-dark: rgba($white, .25) !default; $form-switch-bg-image-dark: url("data:image/svg+xml,") !default; // scss-docs-start form-validation-colors-dark $form-valid-color-dark: $success !default; $form-valid-border-color-dark: $success !default; $form-invalid-color-dark: $danger !default; $form-invalid-border-color-dark: $danger !default; // scss-docs-end form-validation-colors-dark // // Accordion // $accordion-icon-color-dark: $primary-text-emphasis-dark !default; $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; $accordion-button-icon-dark: url("data:image/svg+xml,") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; // scss-docs-end sass-dark-mode-vars