Skip to content

Commit

Permalink
chore: update tokens (#2816)
Browse files Browse the repository at this point in the history 
---------

Co-authored-by: boosted-bot <[email protected]>
Co-authored-by: louismaxime.piton <[email protected]>
  • Loading branch information
@boosted-bot @louismaximepiton
3 people authored Dec 6, 2024
1 parent e4ba8cd commit 3f768fc
Show file tree
Hide file tree
Showing 16 changed files with 1,613 additions and 850 deletions.
21 changes: 10 additions & 11 deletions scss/_maps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ $ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-ma

// scss-docs-start ouds-maps-elevations
$ouds-elevations: (
"default": $ouds-elevation-default,
"drag": $ouds-elevation-drag,
"emphasized": $ouds-elevation-emphasized,
"none": $ouds-elevation-none,
"raised": $ouds-elevation-raised,
"drag": $ouds-elevation-drag,
"overlay-default": $ouds-elevation-overlay-default,
"overlay-emphasized": $ouds-elevation-overlay-emphasized,
"sticky-default": $ouds-elevation-sticky-default,
"sticky-emphasized": $ouds-elevation-sticky-emphasized,
"sticky-navigation-scrolled": $ouds-elevation-sticky-navigation-scrolled
Expand All @@ -85,7 +85,6 @@ $ouds-elevations: (

// scss-docs-start ouds-maps-font
$ouds-font-sizes: (
cs: "/code-small",
cm: "/code-medium",
bs: "/body-small",
bm: "/body-medium",
Expand All @@ -104,17 +103,17 @@ $ouds-font-weights: (
bold: $ouds-font-weight-strong
) !default;

$ouds-icon-sizes: ("short", "medium", "tall") !default;
$ouds-icon-sizes: ("sm", "md", "lg") !default;
// scss-docs-end ouds-maps-font

// scss-docs-start ouds-maps-opacities
$ouds-opacities: (
"transparent": $ouds-opacity-transparent,
"weaker": $ouds-opacity-weaker,
"weak": $ouds-opacity-weak,
"medium": $ouds-opacity-medium,
"strong": $ouds-opacity-strong,
"opaque": $ouds-opacity-opaque
"invisible": $ouds-opacity-invisible,
"weaker": $ouds-opacity-weaker,
"weak": $ouds-opacity-weak,
"medium": $ouds-opacity-medium,
"strong": $ouds-opacity-strong,
"opaque": $ouds-opacity-opaque
) !default;
// scss-docs-end ouds-maps-opacities
// End mod
Expand Down
126 changes: 63 additions & 63 deletions scss/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,74 +310,74 @@
// scss-docs-end root-space-scaled-var-ouds

// scss-docs-start root-size-scaled-var-ouds
--#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-mobile)};
--#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-mobile)};
--#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-mobile)};
--#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-mobile)};
--#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-mobile)};
--#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-mobile)};
--#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-mobile)};
--#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-mobile)};
--#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-mobile)};
--#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-mobile)};
--#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-mobile)};
--#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-mobile)};
--#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-mobile)};
--#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-mobile)};
--#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-mobile)};
--#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-mobile)};
--#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-mobile)};
--#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-mobile)};
--#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-mobile)};
--#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-mobile)};
--#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-mobile)};
--#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-mobile)};
--#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-mobile)};
--#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-mobile)};
--#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-mobile)};
--#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-mobile)};
--#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-mobile)};
--#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-mobile)};
--#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-mobile)};
--#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-mobile)};
--#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-mobile)};
--#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-mobile)};
--#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-mobile)};
--#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-mobile)};
--#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-mobile)};
--#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-mobile)};

@include media-breakpoint-up(md) {
--#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-tablet)};
--#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-tablet)};
--#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-tablet)};
--#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-tablet)};
--#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-tablet)};
--#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-tablet)};
--#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-tablet)};
--#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-tablet)};
--#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-tablet)};
--#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-tablet)};
--#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-tablet)};
--#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-tablet)};
--#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-tablet)};
--#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-tablet)};
--#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-tablet)};
--#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-tablet)};
--#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-tablet)};
--#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-tablet)};
--#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-tablet)};
--#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-tablet)};
--#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-tablet)};
--#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-tablet)};
--#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-tablet)};
--#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-tablet)};
--#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-tablet)};
--#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-tablet)};
--#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-tablet)};
--#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-tablet)};
--#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-tablet)};
--#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-tablet)};
--#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-tablet)};
--#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-tablet)};
--#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-tablet)};
--#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-tablet)};
--#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-tablet)};
--#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-tablet)};
--#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-tablet)};
--#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-tablet)};
--#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-tablet)};
--#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-tablet)};
--#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-tablet)};
--#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-tablet)};
}

@include media-breakpoint-up(xl) {
--#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-desktop)};
--#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-desktop)};
--#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-desktop)};
--#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-desktop)};
--#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-desktop)};
--#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-desktop)};
--#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-desktop)};
--#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-desktop)};
--#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-desktop)};
--#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-desktop)};
--#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-desktop)};
--#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-desktop)};
--#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-desktop)};
--#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-desktop)};
--#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-desktop)};
--#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-desktop)};
--#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-desktop)};
--#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-desktop)};
--#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-desktop)};
--#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-desktop)};
--#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-desktop)};
--#{$prefix}icon-sm-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-sm-desktop)};
--#{$prefix}icon-md-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-md-desktop)};
--#{$prefix}icon-lg-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-lg-desktop)};
--#{$prefix}icon-sm-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-sm-desktop)};
--#{$prefix}icon-md-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-md-desktop)};
--#{$prefix}icon-lg-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-lg-desktop)};
--#{$prefix}icon-sm-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-sm-desktop)};
--#{$prefix}icon-md-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-md-desktop)};
--#{$prefix}icon-lg-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-lg-desktop)};
--#{$prefix}icon-sm-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-sm-desktop)};
--#{$prefix}icon-md-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-md-desktop)};
--#{$prefix}icon-lg-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-lg-desktop)};
--#{$prefix}icon-sm-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-sm-desktop)};
--#{$prefix}icon-md-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-md-desktop)};
--#{$prefix}icon-lg-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-lg-desktop)};
--#{$prefix}icon-sm-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-sm-desktop)};
--#{$prefix}icon-md-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-md-desktop)};
--#{$prefix}icon-lg-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-lg-desktop)};
--#{$prefix}icon-sm-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-sm-desktop)};
--#{$prefix}icon-md-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-md-desktop)};
--#{$prefix}icon-lg-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-lg-desktop)};
}
// scss-docs-end root-size-scaled-var-ouds
// End mod
Expand Down
6 changes: 3 additions & 3 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -662,9 +662,9 @@ $focus-visible-outer-color: $black !default; // OUDS mod
// scss-docs-end focus-visible-variables

// scss-docs-start box-shadow-variables
$box-shadow: $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
$box-shadow-sm: $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
$box-shadow-lg: $ouds-elevation-overlay-emphasized !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
$box-shadow: $ouds-elevation-default !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
$box-shadow-sm: $ouds-elevation-default !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
$box-shadow-lg: $ouds-elevation-emphasized !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
$box-shadow-inset: null !default; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)`
// scss-docs-end box-shadow-variables

Expand Down
28 changes: 14 additions & 14 deletions scss/helpers/_icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,37 +20,37 @@
}
}

.decorative-shortest-icon {
.decorative-2xs-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-shortest if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-2xs if($enable-important-utilities, !important, null);
}

.decorative-shorter-icon {
.decorative-xs-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-shorter if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-xs if($enable-important-utilities, !important, null);
}

.decorative-short-icon {
.decorative-sm-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-short if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-sm if($enable-important-utilities, !important, null);
}

.decorative-medium-icon {
.decorative-md-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-medium if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-md if($enable-important-utilities, !important, null);
}

.decorative-tall-icon {
.decorative-lg-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-tall if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-lg if($enable-important-utilities, !important, null);
}

.decorative-taller-icon {
.decorative-xl-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-taller if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-xl if($enable-important-utilities, !important, null);
}

.decorative-tallest-icon {
.decorative-2xl-icon {
@extend %icon-size;
font-size: $ouds-size-icon-decorative-tallest if($enable-important-utilities, !important, null);
font-size: $ouds-size-icon-decorative-2xl if($enable-important-utilities, !important, null);
}
2 changes: 1 addition & 1 deletion scss/mixins/_fonts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// scss-docs-start ouds-mixin-font
// $font-size-ref can be one of: "code-small", "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large"
// $font-size-ref can be one of: "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large"

@mixin get-font-size($font-size-ref: "display-large") {
@if str-slice($font-size-ref, 1, 5) != "label" and str-slice($font-size-ref, 1, 4) != "code" {
Expand Down
Loading

0 comments on commit 3f768fc

Please sign in to comment.