Skip to content

Commit

Permalink
Add color tokens in OUDS Web
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Nov 29, 2024
1 parent 30e7344 commit 11e7727
Show file tree
Hide file tree
Showing 65 changed files with 3,780 additions and 869 deletions.
16 changes: 8 additions & 8 deletions .bundlewatch.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"files": [
{
"path": "./dist/css/ouds-web-bootstrap.css",
"maxSize": "62.75 kB"
"maxSize": "63.5 kB"
},
{
"path": "./dist/css/ouds-web-bootstrap.min.css",
"maxSize": "59.5 kB"
"maxSize": "60.5 kB"
},
{
"path": "./dist/css/ouds-web-grid.css",
Expand All @@ -18,27 +18,27 @@
},
{
"path": "./dist/css/ouds-web-reboot.css",
"maxSize": "5.75 kB"
"maxSize": "7.0 kB"
},
{
"path": "./dist/css/ouds-web-reboot.min.css",
"maxSize": "5.5 kB"
"maxSize": "6.5 kB"
},
{
"path": "./dist/css/ouds-web-utilities.css",
"maxSize": "22.25 kB"
"maxSize": "23.0 kB"
},
{
"path": "./dist/css/ouds-web-utilities.min.css",
"maxSize": "21.0 kB"
"maxSize": "22.0 kB"
},
{
"path": "./dist/css/ouds-web.css",
"maxSize": "56.25 kB"
"maxSize": "57.0 kB"
},
{
"path": "./dist/css/ouds-web.min.css",
"maxSize": "53.0 kB"
"maxSize": "53.75 kB"
},
{
"path": "./dist/js/ouds-web.bundle.js",
Expand Down
2 changes: 1 addition & 1 deletion scss/_accordion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
// OUDS mod
&[data-focus-visible-added] {
outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset);
}
// End mod
}
Expand Down
4 changes: 2 additions & 2 deletions scss/_button-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,11 +142,11 @@
.btn.active + &,
&:active + * + .btn,
&.active + * + .btn {
border-color: $supporting-orange;
border-color: $ouds-color-orange-500;
}

.btn-group.show > &:not(:focus):not(:active)::before {
color: $supporting-orange;
color: $ouds-color-orange-500;
background-color: currentcolor;
}
// End mod
Expand Down
10 changes: 5 additions & 5 deletions scss/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@

// scss-docs-start btn-variant-loops
.btn-primary {
@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));
@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));
}

.btn-success {
Expand Down Expand Up @@ -151,7 +151,7 @@

// OUDS mod: OUDS Web-specific no outline button
.btn-no-outline {
@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));
@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));

.btn-check:checked + &.btn {
border-color: transparent;
Expand All @@ -166,7 +166,7 @@

// OUDS mod: OUDS Web-specific toggle button
.btn-toggle {
@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));
@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));

.btn-check:checked + & {
color: var(--#{$prefix}highlight-color);
Expand Down Expand Up @@ -201,7 +201,7 @@

// OUDS mod: OUDS Web-specific dropdown button
.btn-dropdown {
@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));
@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));
}
// End mod

Expand Down Expand Up @@ -270,7 +270,7 @@
--#{$prefix}btn-active-color: var(--#{$prefix}highlight-color);
--#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg);
--#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
--#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
--#{$prefix}btn-disabled-color: var(--#{$prefix}color-content-disabled);
--#{$prefix}btn-disabled-bg: transparent;
@include border-radius(50%, 50%);
@include button-icon(var(--#{$prefix}network-logo));
Expand Down
79 changes: 0 additions & 79 deletions scss/_color-palette.scss
View file

This file was deleted.

3 changes: 3 additions & 0 deletions scss/_config.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Configuration file for OUDS Web

$prefix: bs- !default;
2 changes: 1 addition & 1 deletion scss/_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@
&:focus {
&[data-focus-visible-added] {
outline-offset: -$focus-visible-outer-width;
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
}
}
// End mod
Expand Down
6 changes: 3 additions & 3 deletions scss/_list-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,11 @@
&:focus {
&[data-focus-visible-added] {
outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width));
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);

&.active {
outline-color: var(--#{$prefix}focus-visible-inner-color);
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
outline-color: var(--#{$prefix}color-border-focus-inset);
box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus);
}
}
}
Expand Down
12 changes: 0 additions & 12 deletions scss/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,14 +258,11 @@
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
--#{$prefix}disabled-color: #{$disabled-color}; // OUDS mod
--#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // OUDS mod

// scss-docs-start root-border-var-ouds
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-subtle: #{$border-color-subtle}; // OUDS mod
--#{$prefix}border-color-translucent: #{$border-color-translucent};
// scss-docs-end root-border-var-ouds

Expand Down Expand Up @@ -401,9 +398,6 @@
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
}

--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; // OUDS mod
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; // OUDS mod

// Focus styles
// scss-docs-start root-focus-variables
--#{$prefix}focus-ring-width: #{$focus-ring-width};
Expand Down Expand Up @@ -498,16 +492,10 @@
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}disabled-color: #{$disabled-color-dark}; // OUDS mod
--#{$prefix}tertiary-active-bg: #{$tertiary-active-bg-dark}; // OUDS mod

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

--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // OUDS mod
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // OUDS mod

--#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod

--#{$prefix}form-valid-color: #{$form-valid-color-dark};
Expand Down
4 changes: 2 additions & 2 deletions scss/_stepped-process.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
color: var(--#{$prefix}stepped-process-link-color);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
outline-color: var(--#{$prefix}focus-visible-inner-color);
outline-color: var(--#{$prefix}color-border-focus-inset);
box-shadow: none;

&::before {
Expand All @@ -121,7 +121,7 @@

.active ~ .stepped-process-item & {
color: var(--#{$prefix}stepped-process-link-next-color);
outline-color: var(--#{$prefix}focus-visible-outer-color);
outline-color: var(--#{$prefix}color-border-focus);
}
}

Expand Down
6 changes: 0 additions & 6 deletions scss/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1061,12 +1061,6 @@ $utilities: map-merge(
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
"supporting-green": $supporting-green, // OUDS mod
"supporting-blue": $supporting-blue, // OUDS mod
"supporting-yellow": $supporting-yellow, // OUDS mod
"supporting-pink": $supporting-pink, // OUDS mod
"supporting-purple": $supporting-purple, // OUDS mod
"supporting-orange": $supporting-orange, // OUDS mod
)
)
),
Expand Down
55 changes: 21 additions & 34 deletions scss/_variables-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,14 @@
//

// OUDS mod
// scss-docs-start brand-colors-dark
$functional-green-dark: $ods-forest-100 !default;
$functional-blue-dark: $ods-water-100 !default;
$functional-yellow-dark: $functional-yellow !default;
$functional-red-dark: $ods-fire-100 !default;
// scss-docs-end brand-colors-dark

// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-color-dark-variables
$primary-dark: $supporting-orange !default;
$primary-dark: $ouds-color-content-brand-primary-dark !default;
$secondary-dark: $white !default;
$success-dark: $functional-green-dark !default;
$info-dark: $functional-blue-dark !default;
$warning-dark: $functional-yellow-dark !default;
$danger-dark: $functional-red-dark !default;
$success-dark: $ouds-color-functional-malachite-500 !default;
$info-dark: $ouds-color-functional-dodger-blue-500 !default;
$warning-dark: $ouds-color-functional-sun-500 !default;
$danger-dark: $ouds-color-functional-scarlet-600 !default;
$light-dark: $gray-500 !default;
$dark-dark: $black !default;
// scss-docs-end theme-color-dark-variables
Expand Down Expand Up @@ -73,32 +66,26 @@ $light-border-subtle-dark: $light-dark !default; // OUDS mod: instead o
$dark-border-subtle-dark: $dark-dark !default; // OUDS mod: instead of `$gray-800`
// scss-docs-end theme-border-subtle-dark-variables

$body-color-dark: $white !default; // OUDS mod: instead of `$gray-300`
$body-bg-dark: $gray-950 !default; // OUDS mod: instead of `$gray-900`
$body-secondary-color-dark: $gray-600 !default; // OUDS mod: instead of `rgba($body-color-dark, .75)`
$body-secondary-bg-dark: $gray-900 !default; // OUDS mod: instead of `$gray-800`
$body-tertiary-color-dark: $gray-700 !default; // OUDS mod: instead of `rgba($body-color-dark, .5)`
$body-tertiary-bg-dark: $black !default; // OUDS mod: instead of `mix($gray-800, $gray-900, 50%)`
$body-emphasis-color-dark: $white !default; // OUDS mod: instead of `$gray-100`
$disabled-color-dark: var(--#{$prefix}tertiary-color) !default; // OUDS mod
$tertiary-active-bg-dark: $gray-700 !default; // OUDS mod
$border-color-dark: $white !default; // OUDS mod: instead of `$gray-700`
$border-color-subtle-dark: $gray-700 !default; // OUDS mod
$body-color-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$gray-300`
$body-bg-dark: $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$gray-900`
$body-secondary-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `rgba($body-color-dark, .75)`
$body-secondary-bg-dark: $ouds-color-bg-secondary-dark !default; // OUDS mod: instead of `$gray-800`
$body-tertiary-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `rgba($body-color-dark, .5)`
$body-tertiary-bg-dark: $ouds-color-bg-tertiary-dark !default; // OUDS mod: instead of `mix($gray-800, $gray-900, 50%)`
$body-emphasis-color-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$gray-100`
$border-color-dark: $ouds-color-border-default-dark !default; // OUDS mod: instead of `$gray-700`
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: inherit !default;
$link-color-dark: $white !default; // OUDS mod: instead of `tint-color($primary, 40%)`
$link-hover-color-dark: $supporting-orange !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
$code-color-dark: $gray-600 !default; // OUDS mod: instead of `tint-color($code-color, 40%)`
$mark-color-dark: $black !default; // OUDS mod: instead of `$body-color-dark`
$mark-bg-dark: $white !default; // OUDS mod: instead of `$yellow-800`

$focus-ring-color-dark: rgba($supporting-orange, $focus-ring-opacity) !default; // OUDS mod
$link-hover-color-dark: $ouds-color-orange-500 !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
$code-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `tint-color($code-color, 40%)`
$mark-color-dark: $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$body-color-dark`
$mark-bg-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$yellow-800`

$focus-visible-inner-color-dark: $black !default; // OUDS mod
$focus-visible-outer-color-dark: $white !default; // OUDS mod
$focus-ring-color-dark: rgba($ouds-color-orange-500, $focus-ring-opacity) !default; // OUDS mod

$success-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$functional-green-dark}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default; // OUDS mod
$danger-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$functional-red-dark}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default; // OUDS mod
$success-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$ouds-color-functional-malachite-500}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default; // OUDS mod
$danger-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$ouds-color-functional-scarlet-600}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default; // OUDS mod

// OUDS mod
$svg-as-custom-props-dark: (
Expand All @@ -114,7 +101,7 @@ $svg-as-custom-props-dark: (
$form-check-filter-dark: none !default; // OUDS mod
$form-check-input-disabled-color-dark: $gray-700 !default; // OUDS mod
$form-color-disabled-filter-dark: brightness(0) invert(1) brightness(.4) !default; // OUDS mod
$form-switch-square-bg-dark: $gray-950 !default; // OUDS mod
$form-switch-square-bg-dark: $ouds-color-functional-dark-gray-880 !default; // OUDS mod

// OUDS mod: no $form-select-indicator-color-dark
$form-select-indicator-dark: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // OUDS mod: instead of Bootstrap svg
Expand Down
Loading

0 comments on commit 11e7727

Please sign in to comment.