mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

WIP, needs to be broken apart

Browse Source 
- button ideas
- rewrite utility mixin
- cleanup some code
- remove hyphen from infix by default
This commit is contained in:
Mark Otto
2025-03-07 09:46:35 -08:00
parent 9f8967d470
commit 12fb082b3b
23 changed files with 1129 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
scss/_root.scss
View File

@@ -1,7 +1,8 @@
@use "config" as *;
@use "colors" as *;
@use "theme" as *;
@use "variables" as *;
@use "maps" as *;
// @use "maps" as *;
@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
@@ -9,8 +10,9 @@
@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
@layer colors {
:root,
[data-bs-theme="light"] {
:root {
color-scheme: light dark;
@each $color-group-name, $color-group in $all-colors {
@if type-of($color-group) == "map" {
@each $color-name, $color-value in $color-group {
@@ -24,11 +26,16 @@
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color-name, $color-map in $new-theme-colors {
@each $key, $value in $color-map {
--#{$prefix}#{$color-name}-#{$key}: #{$value};
}
}
}
}
:root,
[data-bs-theme="light"] {
:root {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
@@ -53,24 +60,24 @@
// --#{$prefix}#{$color}: #{$value};
// }
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}
// @each $color, $value in $theme-colors-rgb {
// --#{$prefix}#{$color}-rgb: #{$value};
// }
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
// @each $color, $value in $theme-colors-text {
// --#{$prefix}#{$color}-text-emphasis: #{$value};
// }
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
// @each $color, $value in $theme-colors-bg-subtle {
// --#{$prefix}#{$color}-bg-subtle: #{$value};
// }
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
// @each $color, $value in $theme-colors-border-subtle {
// --#{$prefix}#{$color}-border-subtle: #{$value};
// }
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
// --#{$prefix}white-rgb: #{to-rgb($white)};
// --#{$prefix}black-rgb: #{to-rgb($black)};
// Fonts
@@ -94,32 +101,32 @@
}
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
// --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
// --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
// --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
// --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
@@ -168,54 +175,54 @@
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
// --#{$prefix}body-color: #{$body-color-dark};
// --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
// --#{$prefix}body-bg: #{$body-bg-dark};
// --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
// --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
// --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
// --#{$prefix}secondary-color: #{$body-secondary-color-dark};
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
// --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
// --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
// --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
// --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
// --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
// @each $color, $value in $theme-colors-text-dark {
// --#{$prefix}#{$color}-text-emphasis: #{$value};
// }
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
// @each $color, $value in $theme-colors-bg-subtle-dark {
// --#{$prefix}#{$color}-bg-subtle: #{$value};
// }
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
// @each $color, $value in $theme-colors-border-subtle-dark {
// --#{$prefix}#{$color}-border-subtle: #{$value};
// }
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
// --#{$prefix}link-color: #{$link-color-dark};
// --#{$prefix}link-hover-color: #{$link-hover-color-dark};
// --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};
// --#{$prefix}code-color: #{$code-color-dark};
// --#{$prefix}highlight-color: #{$mark-color-dark};
// --#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
// --#{$prefix}border-color: #{$border-color-dark};
// --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// --#{$prefix}form-valid-color: #{$form-valid-color-dark};
// --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
// --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
// --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars
}
}