Skip to content

Commit 2617225

Browse files
louismaximepitonlouismaximepiton
committed
Add border color utilities to the Colors tokens PR
1 parent 29f453f commit 2617225

File tree

14 files changed

+181
-120
lines changed

14 files changed

+181
-120
lines changed

‎.bundlewatch.config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
"files": [
33
{
44
"path": "./dist/css/ouds-web-bootstrap.css",
5-
"maxSize": "63.5 kB"
5+
"maxSize": "63.75 kB"
66
},
77
{
88
"path": "./dist/css/ouds-web-bootstrap.min.css",
9-
"maxSize": "60.5 kB"
9+
"maxSize": "60.75 kB"
1010
},
1111
{
1212
"path": "./dist/css/ouds-web-grid.css",

‎scss/_maps.scss‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ $ouds-border-widths: (
2020
"thick": $ouds-border-width-thick,
2121
"thicker": $ouds-border-width-thicker,
2222
) !default;
23+
24+
$ouds-border-colors: (
25+
"brand-primary": var(--#{$prefix}color-border-brand-primary),
26+
"default": var(--#{$prefix}color-border-default),
27+
"emphasized": var(--#{$prefix}color-border-emphasized),
28+
"on-brand-primary": var(--#{$prefix}color-border-on-brand-primary),
29+
"always-black": var(--#{$prefix}color-always-black),
30+
"always-white": var(--#{$prefix}color-always-white),
31+
"always-on-black": var(--#{$prefix}color-always-on-black),
32+
"always-on-white": var(--#{$prefix}color-always-on-white),
33+
) !default;
2334
// scss-docs-end ouds-maps-borders
2435

2536
// scss-docs-start ouds-maps-dimension
@@ -117,7 +128,7 @@ $ouds-opacities: (
117128
) !default;
118129
// scss-docs-end ouds-maps-opacities
119130

120-
// scss-docs-start ouds-maps-opacities
131+
// scss-docs-start ouds-maps-backgrouds
121132
$ouds-backgrounds: (
122133
"primary": var(--#{$prefix}color-bg-primary),
123134
"secondary": var(--#{$prefix}color-bg-secondary),
@@ -140,7 +151,7 @@ $ouds-backgrounds: (
140151
"always-white": var(--#{$prefix}color-always-white),
141152
"transparent": transparent,
142153
) !default;
143-
// scss-docs-end ouds-maps-opacities
154+
// scss-docs-end ouds-maps-backgrounds
144155
// End mod
145156

146157
// Re-assigned maps

‎scss/_utilities.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,12 +202,14 @@ $utilities: map-merge(
202202
local-vars: (
203203
"border-opacity": 1
204204
),
205-
values: $utilities-border-colors
205+
values: $utilities-border-colors,
206+
bootstrap-compatibility: true
206207
),
207208
"subtle-border-color": (
208209
property: border-color,
209210
class: border,
210-
values: $utilities-border-subtle
211+
values: $utilities-border-subtle,
212+
bootstrap-compatibility: true
211213
),
212214
"border-width": (
213215
property: border-width,
@@ -270,6 +272,11 @@ $utilities: map-merge(
270272
class: border,
271273
values: $ouds-border-styles
272274
),
275+
"border-color-ouds": (
276+
property: border-color,
277+
class: border,
278+
values: $ouds-border-colors
279+
),
273280
// scss-docs-end utils-borders-ouds
274281
// End mod
275282
// Sizing utilities

‎scss/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -612,7 +612,7 @@ $border-widths: (
612612
5: $ouds-border-width-thicker * 1.25 // OUDS mod: instead of `$border-width * 2.5`
613613
) !default;
614614
$border-style: $ouds-border-style-default !default; // OUDS mod: instead of `solid`
615-
$border-color: $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300` // TODO LM: Decide whether to use default in here or in translucent
615+
$border-color: $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300`
616616
$border-color-translucent: rgba($black, .175) !default;
617617
// scss-docs-end border-variables
618618

‎scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss‎

Lines changed: 82 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,14 @@ $utilities: ();
8585
local-vars: (
8686
"border-opacity": 1
8787
),
88-
values: $utilities-border-colors
88+
values: $utilities-border-colors,
89+
bootstrap-compatibility: true
8990
),
9091
"subtle-border-color": (
9192
property: border-color,
9293
class: border,
93-
values: $utilities-border-subtle
94+
values: $utilities-border-subtle,
95+
bootstrap-compatibility: true
9496
),
9597
"border-width": (
9698
property: border-width,
@@ -150,6 +152,11 @@ $utilities: ();
150152
class: border,
151153
values: $ouds-border-styles
152154
),
155+
"border-color-ouds": (
156+
property: border-color,
157+
class: border,
158+
values: $ouds-border-colors
159+
),
153160
"rounded": (
154161
property: border-radius,
155162
class: rounded,
@@ -1073,88 +1080,6 @@ $utilities: ();
10731080
border: 0 !important;
10741081
}
10751082

1076-
.border-primary {
1077-
--bs-border-opacity: 1;
1078-
border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
1079-
}
1080-
1081-
.border-secondary {
1082-
--bs-border-opacity: 1;
1083-
border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
1084-
}
1085-
1086-
.border-success {
1087-
--bs-border-opacity: 1;
1088-
border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
1089-
}
1090-
1091-
.border-info {
1092-
--bs-border-opacity: 1;
1093-
border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
1094-
}
1095-
1096-
.border-warning {
1097-
--bs-border-opacity: 1;
1098-
border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
1099-
}
1100-
1101-
.border-danger {
1102-
--bs-border-opacity: 1;
1103-
border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
1104-
}
1105-
1106-
.border-light {
1107-
--bs-border-opacity: 1;
1108-
border-color: rgba(85, 85, 85, var(--bs-border-opacity)) !important;
1109-
}
1110-
1111-
.border-dark {
1112-
--bs-border-opacity: 1;
1113-
border-color: rgba(39, 39, 39, var(--bs-border-opacity)) !important;
1114-
}
1115-
1116-
.border-black {
1117-
--bs-border-opacity: 1;
1118-
border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
1119-
}
1120-
1121-
.border-white {
1122-
--bs-border-opacity: 1;
1123-
border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
1124-
}
1125-
1126-
.border-primary-subtle {
1127-
border-color: var(--bs-primary-border-subtle) !important;
1128-
}
1129-
1130-
.border-secondary-subtle {
1131-
border-color: var(--bs-secondary-border-subtle) !important;
1132-
}
1133-
1134-
.border-success-subtle {
1135-
border-color: var(--bs-success-border-subtle) !important;
1136-
}
1137-
1138-
.border-info-subtle {
1139-
border-color: var(--bs-info-border-subtle) !important;
1140-
}
1141-
1142-
.border-warning-subtle {
1143-
border-color: var(--bs-warning-border-subtle) !important;
1144-
}
1145-
1146-
.border-danger-subtle {
1147-
border-color: var(--bs-danger-border-subtle) !important;
1148-
}
1149-
1150-
.border-light-subtle {
1151-
border-color: var(--bs-light-border-subtle) !important;
1152-
}
1153-
1154-
.border-dark-subtle {
1155-
border-color: var(--bs-dark-border-subtle) !important;
1156-
}
1157-
11581083
.border-top {
11591084
border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
11601085
}
@@ -1207,6 +1132,38 @@ $utilities: ();
12071132
border-style: dashed !important;
12081133
}
12091134

1135+
.border-brand-primary {
1136+
border-color: var(--bs-color-border-brand-primary) !important;
1137+
}
1138+
1139+
.border-default {
1140+
border-color: var(--bs-color-border-default) !important;
1141+
}
1142+
1143+
.border-emphasized {
1144+
border-color: var(--bs-color-border-emphasized) !important;
1145+
}
1146+
1147+
.border-on-brand-primary {
1148+
border-color: var(--bs-color-border-on-brand-primary) !important;
1149+
}
1150+
1151+
.border-always-black {
1152+
border-color: var(--bs-color-always-black) !important;
1153+
}
1154+
1155+
.border-always-white {
1156+
border-color: var(--bs-color-always-white) !important;
1157+
}
1158+
1159+
.border-always-on-black {
1160+
border-color: var(--bs-color-always-on-black) !important;
1161+
}
1162+
1163+
.border-always-on-white {
1164+
border-color: var(--bs-color-always-on-white) !important;
1165+
}
1166+
12101167
.rounded {
12111168
border-radius: 0px !important; // stylelint-disable-line property-disallowed-list, length-zero-no-unit
12121169
}
@@ -9973,12 +9930,14 @@ $utilities: ();
99739930
local-vars: (
99749931
"border-opacity": 1
99759932
),
9976-
values: $utilities-border-colors
9933+
values: $utilities-border-colors,
9934+
bootstrap-compatibility: true
99779935
),
99789936
"subtle-border-color": (
99799937
property: border-color,
99809938
class: border,
9981-
values: $utilities-border-subtle
9939+
values: $utilities-border-subtle,
9940+
bootstrap-compatibility: true
99829941
),
99839942
"border-width": (
99849943
property: border-width,
@@ -10038,6 +9997,11 @@ $utilities: ();
100389997
class: border,
100399998
values: $ouds-border-styles
100409999
),
10000+
"border-color-ouds": (
10001+
property: border-color,
10002+
class: border,
10003+
values: $ouds-border-colors
10004+
),
1004110005
"rounded": (
1004210006
property: border-radius,
1004310007
class: rounded,
@@ -11183,6 +11147,38 @@ $utilities: ();
1118311147
border-style: dashed !important;
1118411148
}
1118511149

11150+
.border-brand-primary {
11151+
border-color: var(--bs-color-border-brand-primary) !important;
11152+
}
11153+
11154+
.border-default {
11155+
border-color: var(--bs-color-border-default) !important;
11156+
}
11157+
11158+
.border-emphasized {
11159+
border-color: var(--bs-color-border-emphasized) !important;
11160+
}
11161+
11162+
.border-on-brand-primary {
11163+
border-color: var(--bs-color-border-on-brand-primary) !important;
11164+
}
11165+
11166+
.border-always-black {
11167+
border-color: var(--bs-color-always-black) !important;
11168+
}
11169+
11170+
.border-always-white {
11171+
border-color: var(--bs-color-always-white) !important;
11172+
}
11173+
11174+
.border-always-on-black {
11175+
border-color: var(--bs-color-always-on-black) !important;
11176+
}
11177+
11178+
.border-always-on-white {
11179+
border-color: var(--bs-color-always-on-white) !important;
11180+
}
11181+
1118611182
.rounded-0 {
1118711183
border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
1118811184
}

‎site/assets/scss/_callouts.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
margin-bottom: $spacer; // OUDS mod
1212
color: var(--bd-callout-color, inherit);
1313
background-color: var(--bd-callout-bg, var(--#{$prefix}color-surface-status-neutral)); // OUDS mod
14-
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-200)); // OUDS mod
14+
// OUDS mod: no border-left
1515

1616
h4 {
1717
margin-bottom: .25rem;
@@ -33,6 +33,6 @@
3333
.bd-callout-#{$variant} {
3434
--bd-callout-color: var(--bs-emphasis-color); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)`
3535
--bd-callout-bg: var(--#{$prefix}color-surface-status-#{if($variant == "danger", negative, $variant)}-muted); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
36-
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
36+
// OUDS mod: no --bd-callout-border
3737
}
3838
}

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@
288288
.bd-example-border-utils {
289289
[class^="border"] {
290290
display: inline-block;
291+
flex-shrink: 0;
291292
width: 5rem;
292293
height: 5rem;
293294
margin: .25rem;
@@ -472,10 +473,6 @@
472473
}
473474
// scss-docs-end sticker-fs-xl
474475

475-
.border-subtle {
476-
--bs-border-color: var(--bs-color-border-default);
477-
}
478-
479476
.color-copy:hover > svg {
480477
transform: scale(1.07);
481478
}

‎site/content/docs/0.0/content/reboot.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,15 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are
140140

141141
{{< example >}}
142142
<hr>
143+
144+
<hr class="border border-emphasized border-medium opacity-medium">
145+
<hr class="border border-brand-primary border-thick opacity-strong">
143146
{{< /example >}}
144147

145-
<!-- Should be in example above <div class="text-success">
148+
<!-- Should be in example above
149+
<div class="text-success">
146150
<hr>
147-
</div>
148-
149-
<hr class="border border-danger border-medium opacity-medium">
150-
<hr class="border border-primary border-thick opacity-strong">-->
151+
</div>-->
151152

152153
<!-- ## Lists
153154

0 commit comments

Comments
 (0)