fix: scss text-$variant contrast, font-weight and outlined button variant text to black

This commit is contained in:
axolotle 2024-08-15 17:56:06 +02:00
parent 181c1e1599
commit fcfcd767f0
2 changed files with 82 additions and 9 deletions

View file

@ -34,9 +34,9 @@ $gray-100: #fafafa;
$gray-200: #ededed;
$gray-300: #e3e3e3;
$gray-400: #d4d4d4;
$gray-500: #b5b5b5;
$gray-500: #b5b5b5;
$gray-600: #757575;
$gray-700: #4f4f4f;
$gray-700: #4f4f4f;
$gray-800: #3b3b3b;
$gray-900: #262626;
$black: #202020;
@ -73,7 +73,7 @@ $theme-colors: (
'best': $purple,
);
$min-contrast-ratio: 7;
// $min-contrast-ratio: 7;
$spacer: 1rem;
@ -91,9 +91,9 @@ $component-active-color: $black;
// Adapt font-weight based on fira
$font-weight-light: 200;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-medium: 400;
$font-weight-semibold: 500;
$font-weight-bold: 700;
$font-weight-bold: 500;
$headings-font-weight: 500;
@ -114,9 +114,9 @@ $font-family-sans-serif:
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji' !default;
'Noto Color Emoji';
$font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !default;
'Liberation Mono', 'Courier New', monospace;
$h2-font-size: $font-size-base * 1.5;
$h3-font-size: $font-size-base * 1.4;
@ -126,9 +126,60 @@ $h5-font-size: $font-size-base * 1.1;
$list-group-item-padding-y: $spacer * 0.75;
$modal-md: 600px;
$form-feedback-invalid-color: shade-color($danger, 20%);
// Import default variables after the above setup to compute all other variables.
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/variables-dark';
// Hacky way to have different text colors
@function custom-text-color($identifier, $target) {
@each $variant
in ('primary', 'secondary', 'success', 'info', 'warning', 'danger', 'best')
{
@if $identifier == $variant {
@return rgb(var(--#{$prefix}#{$identifier}-text-rgb));
}
}
@return rgba-css-var($identifier, $target);
}
$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
$utilities-text: map-merge(
$theme-colors-rgb,
(
'black': to-rgb($black),
'white': to-rgb($white),
'body': to-rgb($body-color),
)
);
$utilities-text-colors: map-loop(
$utilities-text,
custom-text-color,
'$key',
'text'
);
// Altered text color variant for light theme
$light-text-colors: (
'primary': shade-color($primary, 30%),
'secondary': $secondary,
'success': shade-color($success, 45%),
'info': shade-color($info, 45%),
'warning': shade-color($warning, 50%),
'danger': shade-color($danger, 20%),
'best': shade-color($purple, 15%),
);
// Altered text color variant for dark theme
$dark-text-colors: (
'primary': $primary,
'secondary': tint-color($secondary, 20%),
'success': $success,
'info': $info,
'warning': $warning,
'danger': $danger,
'best': $purple,
);
@import '~bootstrap/scss/maps';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';

View file

@ -22,7 +22,7 @@
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import "~bootstrap/scss/accordion";
@import '~bootstrap/scss/accordion';
@import '~bootstrap/scss/breadcrumb';
// @import "~bootstrap/scss/pagination";
@import '~bootstrap/scss/badge';
@ -53,9 +53,31 @@
@import 'font';
@import '~fork-awesome/scss/fork-awesome.scss';
// Style overrides happens after dependencies imports
:root,
[data-bs-theme='light'] {
@each $color, $value in $light-text-colors {
--#{$prefix}#{$color}-text-rgb: #{to-rgb($value)};
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
--bs-btn-color: $dark;
}
}
}
[data-bs-theme='dark'] {
@each $color, $value in $dark-text-colors {
--#{$prefix}#{$color}-text-rgb: #{to-rgb($value)};
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
--bs-btn-color: $light;
}
}
}
html {
min-height: 100vh;
}