Skip to content

Commit 935b48c

Browse files
mdomdo
committed
sooooo much better
1 parent 0a226a8 commit 935b48c

7 files changed

Lines changed: 190 additions & 135 deletions

File tree

‎scss/_colors.scss‎

Lines changed: 94 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,102 @@
11
// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
22

3+
@use "sass:map";
4+
@use "functions" as *;
5+
@use "mixins/tokens" as *;
6+
37
// Easily convert colors to oklch() with https://oklch.com/
4-
$new-blue: oklch(60% 0.24 240) !default;
5-
$new-indigo: oklch(56% 0.26 288) !default;
6-
$new-violet: oklch(56% 0.24 300) !default;
7-
$new-purple: oklch(56% 0.24 320) !default;
8-
$new-pink: oklch(60% 0.22 4) !default;
9-
$new-red: oklch(60% 0.22 20) !default;
10-
$new-orange: oklch(70% 0.22 52) !default;
11-
$new-amber: oklch(79% 0.2 78) !default;
12-
$new-yellow: oklch(88% 0.24 88) !default;
13-
$new-lime: oklch(65% 0.24 135) !default;
14-
$new-green: oklch(64% 0.22 160) !default;
15-
$new-teal: oklch(68% 0.22 190) !default;
16-
$new-cyan: oklch(69% 0.22 220) !default;
17-
$new-brown: oklch(60% 0.12 54) !default;
18-
$new-gray: oklch(60% 0.02 245) !default;
19-
$new-pewter: oklch(65% 0.01 290) !default;
20-
21-
$hues: (
22-
"blue": $new-blue,
23-
"indigo": $new-indigo,
24-
"violet": $new-violet,
25-
"purple": $new-purple,
26-
"pink": $new-pink,
27-
"red": $new-red,
28-
"orange": $new-orange,
29-
"amber": $new-amber,
30-
"yellow": $new-yellow,
31-
"lime": $new-lime,
32-
"green": $new-green,
33-
"teal": $new-teal,
34-
"cyan": $new-cyan,
35-
"brown": $new-brown,
36-
"gray": $new-gray,
37-
"pewter": $new-pewter
8+
9+
$white: #fff !default;
10+
$black: #000 !default;
11+
12+
// scss-docs-start colors-list
13+
$blue: oklch(60% 0.24 240) !default;
14+
$indigo: oklch(56% 0.26 288) !default;
15+
$violet: oklch(56% 0.24 300) !default;
16+
$purple: oklch(56% 0.24 320) !default;
17+
$pink: oklch(60% 0.22 4) !default;
18+
$red: oklch(60% 0.22 20) !default;
19+
$orange: oklch(70% 0.22 52) !default;
20+
$amber: oklch(79% 0.2 78) !default;
21+
$yellow: oklch(88% 0.24 88) !default;
22+
$lime: oklch(65% 0.24 135) !default;
23+
$green: oklch(64% 0.22 160) !default;
24+
$teal: oklch(68% 0.22 190) !default;
25+
$cyan: oklch(69% 0.22 220) !default;
26+
$brown: oklch(60% 0.12 54) !default;
27+
$gray: oklch(60% 0.02 245) !default;
28+
$pewter: oklch(65% 0.01 290) !default;
29+
// scss-docs-end colors-list
30+
31+
// scss-docs-start colors-map
32+
$colors: () !default;
33+
34+
// stylelint-disable-next-line scss/dollar-variable-default
35+
$colors: defaults(
36+
(
37+
"blue": $blue,
38+
"indigo": $indigo,
39+
"violet": $violet,
40+
"purple": $purple,
41+
"pink": $pink,
42+
"red": $red,
43+
"orange": $orange,
44+
"amber": $amber,
45+
"yellow": $yellow,
46+
"lime": $lime,
47+
"green": $green,
48+
"teal": $teal,
49+
"cyan": $cyan,
50+
"brown": $brown,
51+
"gray": $gray,
52+
"pewter": $pewter,
53+
),
54+
$colors
55+
);
56+
// scss-docs-end colors-map
57+
58+
// scss-docs-start color-mix-options
59+
$color-mix-space: lab !default;
60+
$tint-color: $white !default;
61+
$shade-color: $black !default;
62+
63+
$color-tints: (
64+
"025": 94%,
65+
"050": 90%,
66+
"100": 80%,
67+
"200": 60%,
68+
"300": 40%,
69+
"400": 20%,
3870
) !default;
3971

40-
:root {
41-
@each $color, $hue in $hues {
42-
--#{$color}-025: color-mix(in lab, #fff 94%, #{$hue});
43-
--#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
44-
--#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
45-
--#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
46-
--#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
47-
--#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
48-
--#{$color}-500: #{$hue};
49-
--#{$color}-600: color-mix(in lab, #000 16%, #{$hue});
50-
--#{$color}-700: color-mix(in lab, #000 32%, #{$hue});
51-
--#{$color}-800: color-mix(in lab, #000 48%, #{$hue});
52-
--#{$color}-900: color-mix(in lab, #000 64%, #{$hue});
53-
--#{$color}-950: color-mix(in lab, #000 76%, #{$hue});
54-
--#{$color}-975: color-mix(in lab, #000 88%, #{$hue});
72+
$color-shades: (
73+
"600": 16%,
74+
"700": 32%,
75+
"800": 48%,
76+
"900": 64%,
77+
"950": 76%,
78+
"975": 88%,
79+
) !default;
80+
// scss-docs-end color-mix-options
81+
82+
// scss-docs-start color-tokens
83+
$color-tokens: () !default;
84+
85+
$-color-defaults: () !default;
86+
@each $color, $value in $colors {
87+
@each $stop, $percent in $color-tints {
88+
$-color-defaults: map.set($-color-defaults, --#{$color}-#{$stop}, color-mix(in #{$color-mix-space}, #{$tint-color} #{$percent}, #{$value}));
89+
}
90+
$-color-defaults: map.set($-color-defaults, --#{$color}-500, #{$value});
91+
@each $stop, $percent in $color-shades {
92+
$-color-defaults: map.set($-color-defaults, --#{$color}-#{$stop}, color-mix(in #{$color-mix-space}, #{$shade-color} #{$percent}, #{$value}));
5593
}
5694
}
5795

58-
$white: #fff !default;
59-
$black: #000 !default;
96+
// stylelint-disable-next-line scss/dollar-variable-default
97+
$color-tokens: defaults($-color-defaults, $color-tokens);
98+
// scss-docs-end color-tokens
99+
100+
:root {
101+
@include tokens($color-tokens);
102+
}

‎scss/helpers/_stacks.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use "../layout/breakpoints" as *;
2-
@use "../layout/containers" as *;
32

43
@layer helpers {
54
// scss-docs-start stacks

‎site/src/components/shortcodes/Code.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@ if (highlightedCode) {
340340
{nestedInExample ? (
341341
<>
342342
{!noToolbar && (
343-
<div class="hstack highlight-toolbar">
343+
<div class="hstack highlight-toolbar align-items-center">
344344
{highlightedTabs ? (
345345
<div class="code-tabs">
346346
{highlightedTabs.map((tab, index) => (
@@ -388,7 +388,7 @@ if (highlightedCode) {
388388
) : (
389389
<div class="bd-code-snippet">
390390
{!noToolbar && (
391-
<div class="hstack highlight-toolbar">
391+
<div class="hstack highlight-toolbar align-items-center">
392392
{highlightedTabs ? (
393393
<div class="code-tabs">
394394
{highlightedTabs.map((tab, index) => (

‎site/src/content/docs/customize/color-modes.mdx‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -147,26 +147,28 @@ For example, you can create a “blue theme” with the selector `data-bs-theme=
147147

148148
<ScssDocs name="custom-color-mode" file="site/src/scss/_content.scss" />
149149

150-
<Example showMarkup={false} code={`<div class="bd-example text-body bg-body" data-bs-theme="blue">
151-
<div class="h4">Example blue theme</div>
152-
<p>Some paragraph text to show how the blue theme might look with written copy.</p>
153-
154-
<hr class="my-4"/>
155-
156-
<div class="dropdown">
157-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
158-
Dropdown button
159-
</button>
160-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
161-
<li><a class="dropdown-item active" href="#">Action</a></li>
162-
<li><a class="dropdown-item" href="#">Action</a></li>
163-
<li><a class="dropdown-item" href="#">Another action</a></li>
164-
<li><a class="dropdown-item" href="#">Something else here</a></li>
165-
<li><hr class="dropdown-divider"></li>
166-
<li><a class="dropdown-item" href="#">Separated link</a></li>
167-
</ul>
168-
</div>
169-
</div>`} />
150+
<Example showMarkup={false} code={`<div data-bs-theme="blue">
151+
<div class="bd-example fg-body bg-body">
152+
<div class="h4">Example blue theme</div>
153+
<p>Some paragraph text to show how the blue theme might look with written copy.</p>
154+
155+
<hr class="my-4"/>
156+
157+
<div class="dropdown">
158+
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
159+
Dropdown button
160+
</button>
161+
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
162+
<li><a class="dropdown-item active" href="#">Action</a></li>
163+
<li><a class="dropdown-item" href="#">Action</a></li>
164+
<li><a class="dropdown-item" href="#">Another action</a></li>
165+
<li><a class="dropdown-item" href="#">Something else here</a></li>
166+
<li><hr class="dropdown-divider"></li>
167+
<li><a class="dropdown-item" href="#">Separated link</a></li>
168+
</ul>
169+
</div>
170+
</div>
171+
</div>`} />
170172

171173
```html
172174
<div data-bs-theme="blue">

‎site/src/content/docs/customize/color.mdx‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ All Bootstrap colors are available as Sass variables and a Sass map in `scss/_va
2020

2121
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
2222

23-
<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(13, 1fr)', gap: '4px', minWidth: '0'}}>
23+
<div class="grid bd-colors-grid">
2424
{getData('colors').map((color) => {
2525
return (
2626
<div class="d-contents grid-cols-fill">
@@ -51,68 +51,65 @@ Be sure to monitor contrast ratios as you customize colors. As shown below, we
5151
</div>
5252
</div>
5353

54-
<Callout>
55-
@mdo-do: Move this content to Theme page most likely. Replace with how to modify color variables.
56-
</Callout>
54+
## How it works
5755

58-
### Using the new colors
56+
Bootstrap generates its colors from a series of Sass variables and a Sass map called `$colors` in `scss/_colors.scss`. These are our base colors—blue, indigo, violet, etc—and are used to generate the tints and shades of each color you see above. You can customize these colors by adding or removing colors from the `$colors` map.
5957

60-
These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
58+
### Default colors
6159

62-
<Example code={`<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
63-
Example element with utilities
64-
</div>`} />
60+
Below is our default list of colors. Colors are unique in Bootstrap in that they're still Sass variables by default. In addition, they're in `oklch()` format, which is a modern color space that is designed to be perceptually uniform.
6561

66-
### Theme colors
62+
<ScssDocs name="colors-list" file="scss/_colors.scss" />
6763

68-
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s `scss/_variables.scss` file.
64+
The above colors are then turned into a Sass map called `$colors`.
6965

70-
<div class="row">
71-
{getData('theme-colors').map((themeColor) => {
72-
return (
73-
<div class="col-md-4">
74-
<div class={`p-3 mb-3 text-bg-${themeColor.name} rounded-3`}>{themeColor.title}</div>
75-
</div>
76-
)
77-
})}
78-
</div>
66+
<ScssDocs name="colors-map" file="scss/_colors.scss" />
7967

80-
All these colors are available as a nested Sass map, `$theme-colors`, in `scss/_theme.scss`. Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
68+
### Color mixing
8169

82-
### Notes on Sass
70+
As mentioned already, we generate lighter (tints) and darker (shades) versions of each color using the `color-mix()` function. This allows us to quickly and easily generate a full scale of colors.
8371

84-
Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s `mix()` color function.
72+
The tint and shade stops, the `color-mix()` color space, and the mix colors are all customizable.
8573

86-
Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
74+
<ScssDocs name="color-mix-options" file="scss/_colors.scss" />
8775

88-
Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we produce. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
76+
Those options and the `$colors` map are used to generate a `$color-tokens` map, which is output as CSS custom properties on `:root`.
8977

90-
## Color Sass maps
78+
<ScssDocs name="color-tokens" file="scss/_colors.scss" />
9179

92-
Bootstrap’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.
80+
## Customizing
9381

94-
- `$colors` lists all our available base (`500`) colors
95-
- `$theme-colors` is a nested map of semantically named theme colors (defined in `scss/_theme.scss`)
82+
You can customize the colors by adding or removing colors from the `$colors` map. You can also customize the tint and shade stops, the `color-mix()` color space, and the mix colors. Say you want to add another blue-gray color, like slate.
9683

97-
Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
84+
1. Create a new Sass variable for the new color, in `oklch()` format.
85+
2. Add the new color to the `$colors` map.
86+
3. Recompile source Sass to generate the new colors.
9887

99-
{/*<ScssDocs name="colors-map" file="scss/_variables.scss" />*/}
88+
Here's how that would look:
10089

101-
Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not *every* component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.
90+
```scss
91+
$slate: oklch(55% 0.07 260);
10292

103-
### Example
93+
@use "bootstrap" as * with (
94+
$colors: (
95+
"slate": $slate,
96+
),
97+
);
98+
```
10499

105-
Here’s how you can use these in your Sass:
100+
To remove a color, set the value to `null`.
106101

107102
```scss
108-
.alpha { color: $purple; }
109-
.beta {
110-
color: $yellow-300;
111-
background-color: $indigo-900;
112-
}
103+
@use "bootstrap" as * with (
104+
$colors: (
105+
"pewter": null,
106+
),
107+
);
113108
```
114109

115-
[Color]([[docsref:/utilities/colors]]) and [background]([[docsref:/utilities/background]]) utility classes are also available for setting `color` and `background-color` using the `500` color values.
110+
<Callout type="warning">
111+
mdo-do: Update the content below
112+
</Callout>
116113

117114
## Generating utilities
118115

‎site/src/scss/_component-examples.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,4 +393,18 @@
393393
margin-inline-end: 0;
394394
}
395395

396+
397+
.bd-colors-grid {
398+
grid-template-columns: repeat(7, 1fr);
399+
gap: 4px;
400+
min-width: 0;
401+
402+
@include media-breakpoint-up(md) {
403+
// grid-template-columns: repeat(13, 1fr);
404+
}
405+
406+
@include media-breakpoint-up(xl) {
407+
grid-template-columns: repeat(13, 1fr);
408+
}
409+
}
396410
}

0 commit comments

Comments
 (0)