Skip to content

Commit 49a9e54

Browse files
mdomdo
committed
Test out using a Sass map for component tokens
1 parent 540a2ed commit 49a9e54

4 files changed

Lines changed: 47 additions & 248 deletions

File tree

‎scss/_dropdown.scss‎

Lines changed: 46 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -7,58 +7,51 @@
77
@use "mixins/gradients" as *;
88
@use "mixins/transition" as *;
99

10-
// scss-docs-start dropdown-variables
11-
$dropdown-gap: $spacer * .125 !default;
12-
$dropdown-min-width: 10rem !default;
13-
$dropdown-padding-x: .25rem !default;
14-
$dropdown-padding-y: .25rem !default;
15-
$dropdown-spacer: .125rem !default;
16-
$dropdown-font-size: $font-size-base !default;
17-
$dropdown-color: var(--fg-body) !default;
18-
$dropdown-bg: var(--bg-body) !default;
19-
$dropdown-border-color: var(--border-color-translucent) !default;
20-
$dropdown-border-radius: var(--border-radius-lg) !default;
21-
$dropdown-border-width: var(--border-width) !default;
22-
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
23-
$dropdown-box-shadow: var(--box-shadow) !default;
10+
// scss-docs-start dropdown-tokens
11+
// Customizable via @use 'bootstrap/dropdown' with ($tokens: (...))
12+
$tokens: () !default;
2413

25-
$dropdown-divider-bg: $dropdown-border-color !default;
26-
$dropdown-divider-margin-y: $spacer * .125 !default;
27-
$dropdown-divider-margin-x: $spacer * .25 !default;
28-
29-
$dropdown-link-color: var(--fg-body) !default;
30-
$dropdown-link-hover-color: $dropdown-link-color !default;
31-
$dropdown-link-hover-bg: var(--bg-1) !default;
32-
33-
$dropdown-link-active-color: $component-active-color !default;
34-
$dropdown-link-active-bg: $component-active-bg !default;
35-
36-
$dropdown-link-disabled-color: var(--fg-3) !default;
37-
38-
$dropdown-item-padding-y: $spacer * .25 !default;
39-
$dropdown-item-padding-x: $spacer * .75 !default;
40-
$dropdown-item-border-radius: var(--border-radius) !default;
41-
$dropdown-item-gap: $spacer * .5 !default;
42-
43-
$dropdown-header-color: var(--gray-600) !default;
44-
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
45-
$dropdown-header-padding-y: $dropdown-padding-y !default;
46-
// scss-docs-end dropdown-variables
14+
// stylelint-disable scss/dollar-variable-default
15+
$dropdown-tokens: map.merge(
16+
(
17+
// scss-docs-start dropdown-css-vars
18+
--dropdown-zindex: #{$zindex-dropdown},
19+
--dropdown-gap: .125rem,
20+
--dropdown-min-width: 10rem,
21+
--dropdown-padding-x: .25rem,
22+
--dropdown-padding-y: .25rem,
23+
--dropdown-spacer: .125rem,
24+
--dropdown-font-size: #{$font-size-base},
25+
--dropdown-color: var(--fg-body),
26+
--dropdown-bg: var(--bg-body),
27+
--dropdown-border-color: var(--border-color-translucent),
28+
--dropdown-border-radius: var(--border-radius-lg),
29+
--dropdown-border-width: var(--border-width),
30+
--dropdown-inner-border-radius: calc(var(--dropdown-border-radius) - var(--dropdown-border-width)),
31+
--dropdown-box-shadow: var(--box-shadow),
32+
--dropdown-divider-bg: var(--border-color-translucent),
33+
--dropdown-divider-margin-y: .125rem,
34+
--dropdown-divider-margin-x: .25rem,
35+
--dropdown-link-color: var(--fg-body),
36+
--dropdown-link-hover-color: var(--fg-body),
37+
--dropdown-link-hover-bg: var(--bg-1),
38+
--dropdown-link-active-color: var(--primary-contrast),
39+
--dropdown-link-active-bg: var(--primary-bg),
40+
--dropdown-link-disabled-color: var(--fg-3),
41+
--dropdown-item-gap: .5rem,
42+
--dropdown-item-padding-x: .75rem,
43+
--dropdown-item-padding-y: .25rem,
44+
--dropdown-item-border-radius: var(--border-radius),
45+
--dropdown-header-color: var(--fg-2),
46+
--dropdown-header-padding-x: .75rem,
47+
--dropdown-header-padding-y: .25rem,
48+
// scss-docs-end dropdown-css-vars
49+
),
50+
$tokens
51+
);
52+
// stylelint-enable scss/dollar-variable-default
53+
// scss-docs-end dropdown-tokens
4754

48-
// scss-docs-start dropdown-dark-variables
49-
$dropdown-dark-color: var(--gray-300) !default;
50-
$dropdown-dark-bg: var(--gray-900) !default;
51-
$dropdown-dark-border-color: $dropdown-border-color !default;
52-
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
53-
$dropdown-dark-box-shadow: null !default;
54-
$dropdown-dark-link-color: $dropdown-dark-color !default;
55-
$dropdown-dark-link-hover-color: $white !default;
56-
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
57-
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
58-
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
59-
$dropdown-dark-link-disabled-color: var(--gray-500) !default;
60-
$dropdown-dark-header-color: var(--gray-500) !default;
61-
// scss-docs-end dropdown-dark-variables
6255

6356
@layer components {
6457
// The dropdown wrapper (`<div>`)
@@ -69,36 +62,9 @@ $dropdown-dark-header-color: var(--gray-500) !default;
6962
// The dropdown menu
7063
.dropdown-menu {
7164
// scss-docs-start dropdown-css-vars
72-
--dropdown-zindex: #{$zindex-dropdown};
73-
--dropdown-gap: #{$dropdown-gap};
74-
--dropdown-min-width: #{$dropdown-min-width};
75-
--dropdown-padding-x: #{$dropdown-padding-x};
76-
--dropdown-padding-y: #{$dropdown-padding-y};
77-
--dropdown-spacer: #{$dropdown-spacer};
78-
--dropdown-font-size: #{$dropdown-font-size};
79-
--dropdown-color: #{$dropdown-color};
80-
--dropdown-bg: #{$dropdown-bg};
81-
--dropdown-border-color: #{$dropdown-border-color};
82-
--dropdown-border-radius: #{$dropdown-border-radius};
83-
--dropdown-border-width: #{$dropdown-border-width};
84-
--dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
85-
--dropdown-divider-bg: #{$dropdown-divider-bg};
86-
--dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
87-
--dropdown-divider-margin-x: #{$dropdown-divider-margin-x};
88-
--dropdown-box-shadow: #{$dropdown-box-shadow};
89-
--dropdown-link-color: #{$dropdown-link-color};
90-
--dropdown-link-hover-color: #{$dropdown-link-hover-color};
91-
--dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
92-
--dropdown-link-active-color: #{$dropdown-link-active-color};
93-
--dropdown-link-active-bg: #{$dropdown-link-active-bg};
94-
--dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
95-
--dropdown-item-gap: #{$dropdown-item-gap};
96-
--dropdown-item-padding-x: #{$dropdown-item-padding-x};
97-
--dropdown-item-padding-y: #{$dropdown-item-padding-y};
98-
--dropdown-item-border-radius: #{$dropdown-item-border-radius};
99-
--dropdown-header-color: #{$dropdown-header-color};
100-
--dropdown-header-padding-x: #{$dropdown-header-padding-x};
101-
--dropdown-header-padding-y: #{$dropdown-header-padding-y};
65+
@each $prop, $value in $dropdown-tokens {
66+
#{$prop}: #{$value};
67+
}
10268
// scss-docs-end dropdown-css-vars
10369

10470
position: absolute;
@@ -118,17 +84,6 @@ $dropdown-dark-header-color: var(--gray-500) !default;
11884
border: var(--dropdown-border-width) solid var(--dropdown-border-color);
11985
@include border-radius(var(--dropdown-border-radius));
12086
@include box-shadow(var(--dropdown-box-shadow));
121-
122-
@if $dropdown-padding-y == 0 {
123-
> .dropdown-item:first-child,
124-
> li:first-child .dropdown-item {
125-
@include border-top-radius(var(--dropdown-inner-border-radius));
126-
}
127-
> .dropdown-item:last-child,
128-
> li:last-child .dropdown-item {
129-
@include border-bottom-radius(var(--dropdown-inner-border-radius));
130-
}
131-
}
13287
}
13388

13489
.dropdown-menu.show {
@@ -202,24 +157,6 @@ $dropdown-dark-header-color: var(--gray-500) !default;
202157
color: var(--fg-2);
203158
}
204159

205-
// Dark dropdowns
206-
.dropdown-menu-dark {
207-
// scss-docs-start dropdown-dark-css-vars
208-
--dropdown-color: #{$dropdown-dark-color};
209-
--dropdown-bg: #{$dropdown-dark-bg};
210-
--dropdown-border-color: #{$dropdown-dark-border-color};
211-
--dropdown-box-shadow: #{$dropdown-dark-box-shadow};
212-
--dropdown-link-color: #{$dropdown-dark-link-color};
213-
--dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
214-
--dropdown-divider-bg: #{$dropdown-dark-divider-bg};
215-
--dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
216-
--dropdown-link-active-color: #{$dropdown-dark-link-active-color};
217-
--dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
218-
--dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
219-
--dropdown-header-color: #{$dropdown-dark-header-color};
220-
// scss-docs-end dropdown-dark-css-vars
221-
}
222-
223160
// scss-docs-start dropdown-submenu
224161
// Submenus
225162
//

‎site/src/components/shortcodes/DETAILS_README.md‎

Lines changed: 0 additions & 126 deletions
This file was deleted.

‎site/src/content/details/warning-color-assistive-technologies.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "Accessibility Tip: Using color to convey meaning"
2+
title: 'Accessibility Tip: Using color to convey meaning'
33
---
44

55
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [_sufficient_ color contrast](/docs/[[config:docs_version]]/getting-started/accessibility/#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.

‎site/src/content/docs/components/dropdown.mdx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -496,20 +496,8 @@ Dropdown items include at least one variable that is not set on `.dropdown`. Thi
496496
- `--bs-dropdown-item-border-radius`
497497
</Callout>
498498

499-
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
500-
501-
<ScssDocs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" />
502-
503499
### Sass variables
504500

505-
Variables for all dropdowns:
506-
507-
<ScssDocs name="dropdown-variables" file="scss/_dropdown.scss" />
508-
509-
Variables for the [dark dropdown](#dark-dropdowns):
510-
511-
<ScssDocs name="dropdown-dark-variables" file="scss/_dropdown.scss" />
512-
513501
Variables for the CSS-based carets that indicate a dropdown’s interactivity:
514502

515503
<ScssDocs name="caret-variables" file="scss/mixins/_caret.scss" />

0 commit comments

Comments
 (0)