Skip to content

Commit 2872936

Browse files
louismaximepitonlouismaximepiton
committed
Add color tokens in OUDS Web
1 parent 17917f9 commit 2872936

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+3780
-869
lines changed

‎.bundlewatch.config.json‎

Lines changed: 8 additions & 8 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": "62.75 kB"
5+
"maxSize": "63.5 kB"
66
},
77
{
88
"path": "./dist/css/ouds-web-bootstrap.min.css",
9-
"maxSize": "59.5 kB"
9+
"maxSize": "60.5 kB"
1010
},
1111
{
1212
"path": "./dist/css/ouds-web-grid.css",
@@ -18,27 +18,27 @@
1818
},
1919
{
2020
"path": "./dist/css/ouds-web-reboot.css",
21-
"maxSize": "5.75 kB"
21+
"maxSize": "7.0 kB"
2222
},
2323
{
2424
"path": "./dist/css/ouds-web-reboot.min.css",
25-
"maxSize": "5.5 kB"
25+
"maxSize": "6.5 kB"
2626
},
2727
{
2828
"path": "./dist/css/ouds-web-utilities.css",
29-
"maxSize": "22.25 kB"
29+
"maxSize": "23.0 kB"
3030
},
3131
{
3232
"path": "./dist/css/ouds-web-utilities.min.css",
33-
"maxSize": "21.0 kB"
33+
"maxSize": "22.0 kB"
3434
},
3535
{
3636
"path": "./dist/css/ouds-web.css",
37-
"maxSize": "56.25 kB"
37+
"maxSize": "57.0 kB"
3838
},
3939
{
4040
"path": "./dist/css/ouds-web.min.css",
41-
"maxSize": "53.0 kB"
41+
"maxSize": "53.75 kB"
4242
},
4343
{
4444
"path": "./dist/js/ouds-web.bundle.js",

‎scss/_accordion.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
// OUDS mod
8383
&[data-focus-visible-added] {
8484
outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
85-
box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
85+
box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset);
8686
}
8787
// End mod
8888
}

‎scss/_button-group.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,11 @@
142142
.btn.active + &,
143143
&:active + * + .btn,
144144
&.active + * + .btn {
145-
border-color: $supporting-orange;
145+
border-color: $ouds-color-orange-500;
146146
}
147147

148148
.btn-group.show > &:not(:focus):not(:active)::before {
149-
color: $supporting-orange;
149+
color: $ouds-color-orange-500;
150150
background-color: currentcolor;
151151
}
152152
// End mod

‎scss/_buttons.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105

106106
// scss-docs-start btn-variant-loops
107107
.btn-primary {
108-
@include button-variant($supporting-orange, $supporting-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
108+
@include button-variant($ouds-color-orange-500, $ouds-color-orange-500, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
109109
}
110110

111111
.btn-success {
@@ -151,7 +151,7 @@
151151

152152
// OUDS mod: OUDS Web-specific no outline button
153153
.btn-no-outline {
154-
@include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}disabled-color));
154+
@include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}color-content-disabled));
155155

156156
.btn-check:checked + &.btn {
157157
border-color: transparent;
@@ -166,7 +166,7 @@
166166

167167
// OUDS mod: OUDS Web-specific toggle button
168168
.btn-toggle {
169-
@include button-variant(transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), $supporting-orange, $supporting-orange, $black, transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}disabled-color));
169+
@include button-variant(transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), $ouds-color-orange-500, $ouds-color-orange-500, $black, transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}color-content-disabled));
170170

171171
.btn-check:checked + & {
172172
color: var(--#{$prefix}highlight-color);
@@ -201,7 +201,7 @@
201201

202202
// OUDS mod: OUDS Web-specific dropdown button
203203
.btn-dropdown {
204-
@include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
204+
@include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-content-disabled), var(--#{$prefix}color-content-disabled));
205205
}
206206
// End mod
207207

@@ -270,7 +270,7 @@
270270
--#{$prefix}btn-active-color: var(--#{$prefix}highlight-color);
271271
--#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg);
272272
--#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
273-
--#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
273+
--#{$prefix}btn-disabled-color: var(--#{$prefix}color-content-disabled);
274274
--#{$prefix}btn-disabled-bg: transparent;
275275
@include border-radius(50%, 50%);
276276
@include button-icon(var(--#{$prefix}network-logo));

‎scss/_color-palette.scss‎

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

‎scss/_config.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Configuration file for OUDS Web
2+
3+
$prefix: bs- !default;

‎scss/_dropdown.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@
211211
&:focus {
212212
&[data-focus-visible-added] {
213213
outline-offset: -$focus-visible-outer-width;
214-
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
214+
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
215215
}
216216
}
217217
// End mod

‎scss/_list-group.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,11 @@
141141
&:focus {
142142
&[data-focus-visible-added] {
143143
outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width));
144-
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
144+
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
145145

146146
&.active {
147-
outline-color: var(--#{$prefix}focus-visible-inner-color);
148-
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
147+
outline-color: var(--#{$prefix}color-border-focus-inset);
148+
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus);
149149
}
150150
}
151151
}

‎scss/_root.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -258,14 +258,11 @@
258258
--#{$prefix}code-color: #{$code-color};
259259
--#{$prefix}highlight-color: #{$mark-color};
260260
--#{$prefix}highlight-bg: #{$mark-bg};
261-
--#{$prefix}disabled-color: #{$disabled-color}; // OUDS mod
262-
--#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // OUDS mod
263261

264262
// scss-docs-start root-border-var-ouds
265263
--#{$prefix}border-width: #{$border-width};
266264
--#{$prefix}border-style: #{$border-style};
267265
--#{$prefix}border-color: #{$border-color};
268-
--#{$prefix}border-color-subtle: #{$border-color-subtle}; // OUDS mod
269266
--#{$prefix}border-color-translucent: #{$border-color-translucent};
270267
// scss-docs-end root-border-var-ouds
271268

@@ -401,9 +398,6 @@
401398
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
402399
}
403400

404-
--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; // OUDS mod
405-
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; // OUDS mod
406-
407401
// Focus styles
408402
// scss-docs-start root-focus-variables
409403
--#{$prefix}focus-ring-width: #{$focus-ring-width};
@@ -498,16 +492,10 @@
498492
--#{$prefix}code-color: #{$code-color-dark};
499493
--#{$prefix}highlight-color: #{$mark-color-dark};
500494
--#{$prefix}highlight-bg: #{$mark-bg-dark};
501-
--#{$prefix}disabled-color: #{$disabled-color-dark}; // OUDS mod
502-
--#{$prefix}tertiary-active-bg: #{$tertiary-active-bg-dark}; // OUDS mod
503495

504496
--#{$prefix}border-color: #{$border-color-dark};
505-
--#{$prefix}border-color-subtle: #{$border-color-subtle-dark}; // OUDS mod
506497
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
507498

508-
--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // OUDS mod
509-
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // OUDS mod
510-
511499
--#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod
512500

513501
--#{$prefix}form-valid-color: #{$form-valid-color-dark};

‎scss/_stepped-process.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
color: var(--#{$prefix}stepped-process-link-color);
100100
text-decoration: if($link-decoration == none, null, none);
101101
white-space: nowrap;
102-
outline-color: var(--#{$prefix}focus-visible-inner-color);
102+
outline-color: var(--#{$prefix}color-border-focus-inset);
103103
box-shadow: none;
104104

105105
&::before {
@@ -121,7 +121,7 @@
121121

122122
.active ~ .stepped-process-item & {
123123
color: var(--#{$prefix}stepped-process-link-next-color);
124-
outline-color: var(--#{$prefix}focus-visible-outer-color);
124+
outline-color: var(--#{$prefix}color-border-focus);
125125
}
126126
}
127127

0 commit comments

Comments
 (0)