Skip to content

Commit

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

Co-authored-by: boosted-bot <[email protected]>
Co-authored-by: Vincent Prothais <[email protected]>
  • Loading branch information
@boosted-bot @vprothais
3 people authored Feb 3, 2025
1 parent 6eae629 commit 972eb0b
Show file tree
Hide file tree
Showing 13 changed files with 861 additions and 499 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
"css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles **/tokens/_component.scss,**/tokens/_raw.scss,**/tokens/_semantic.scss",
"css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles **/tokens/_component.scss,**/tokens/_raw.scss,**/tokens/_semantic.scss,**/tokens/_semantic-colors-custom-props.scss",
"css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
Expand Down
2 changes: 1 addition & 1 deletion scss/_containers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
.container-max-width {
@include media-breakpoint-up(get-breakpoint-from-width()) {
--#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())};
max-width: $ouds-size-max-width-grid;
max-width: $ouds-grid-2xl-max-width-alt;

.row {
--#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_breakpoints.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@

// OUDS mod
// Get the breakpoint infix corresponding to a given width
@function get-breakpoint-from-width($width: $ouds-size-max-width-grid, $breakpoints: $grid-breakpoints) {
@function get-breakpoint-from-width($width: $ouds-grid-2xl-max-width-alt, $breakpoints: $grid-breakpoints) {
$breakpoint-infix: "";
@each $infix, $value in $grid-breakpoints {
@if $width >= $value {
Expand Down
176 changes: 88 additions & 88 deletions scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
View file

Large diffs are not rendered by default.

585 changes: 297 additions & 288 deletions scss/tokens/_component.scss
View file

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions scss/tokens/_raw.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Raw primitive values
// Insertion of brand foundations
// Token version 0.4.1

// Border

Expand Down Expand Up @@ -137,7 +138,7 @@ $ouds-color-functional-scarlet-200: #ffb2b3 !default;
$ouds-color-functional-scarlet-300: #ff8081 !default;
$ouds-color-functional-scarlet-400: #ff4d4e !default;
$ouds-color-functional-scarlet-500: #ff1a1b !default;
$ouds-color-functional-scarlet-600: #ea0305 !default;
$ouds-color-functional-scarlet-600: #db0002 !default;
$ouds-color-functional-scarlet-700: #b20002 !default;
$ouds-color-functional-scarlet-800: #800001 !default;
$ouds-color-functional-scarlet-900: #4d0001 !default;
Expand All @@ -158,13 +159,13 @@ $ouds-color-opacity-black-80: rgba(0, 0, 0, .08) !default;
$ouds-color-opacity-black-160: rgba(0, 0, 0, .16) !default;
$ouds-color-opacity-black-200: rgba(0, 0, 0, .2) !default;
$ouds-color-opacity-black-240: rgba(0, 0, 0, .24) !default;
// $ouds-color-opacity-black-280: rgba(0, 0, 0, .28) !default;
$ouds-color-opacity-black-280: rgba(0, 0, 0, .28) !default;
$ouds-color-opacity-black-320: rgba(0, 0, 0, .32) !default;
// $ouds-color-opacity-black-360: rgba(0, 0, 0, .36) !default;
// $ouds-color-opacity-black-400: rgba(0, 0, 0, .4) !default;
// $ouds-color-opacity-black-440: rgba(0, 0, 0, .44) !default;
$ouds-color-opacity-black-440: rgba(0, 0, 0, .44) !default;
// $ouds-color-opacity-black-480: rgba(0, 0, 0, .48) !default;
// $ouds-color-opacity-black-520: rgba(0, 0, 0, .52) !default;
$ouds-color-opacity-black-520: rgba(0, 0, 0, .52) !default;
// $ouds-color-opacity-black-560: rgba(0, 0, 0, .56) !default;
// $ouds-color-opacity-black-600: rgba(0, 0, 0, .6) !default;
// $ouds-color-opacity-black-640: rgba(0, 0, 0, .64) !default;
Expand Down Expand Up @@ -260,7 +261,7 @@ $ouds-dimension-1600: $ouds-dimension-base * 32 !default; // 128
$ouds-dimension-1800: $ouds-dimension-base * 36 !default; // 144
// $ouds-dimension-2000: $ouds-dimension-base * 40 !default; // 160
// $ouds-dimension-3000: $ouds-dimension-base * 80 !default; // 320
// $ouds-dimension-4000: $ouds-dimension-base * 120 !default; // 480
$ouds-dimension-4000: $ouds-dimension-base * 120 !default; // 480
// $ouds-dimension-5000: $ouds-dimension-base * 140 !default; // 560
$ouds-dimension-6000: $ouds-dimension-base * 160 !default; // 640
$ouds-dimension-7000: $ouds-dimension-base * 180 !default; // 720
Expand Down
195 changes: 155 additions & 40 deletions scss/tokens/_semantic-colors-custom-props.scss
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions scss/tokens/_semantic.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Semantic applications
// Depends on raw primitive values
// Token version 0.4.1

// Border

Expand Down Expand Up @@ -70,7 +71,7 @@ $ouds-color-action-pressed-dark: $ouds-color-orange-500 !default;
$ouds-color-action-selected-dark: $ouds-color-orange-500 !default;
$ouds-color-action-visited-dark: $ouds-color-decorative-amethyst-400 !default;
$ouds-color-always-black-light: $ouds-color-functional-black !default;
$ouds-color-always-on-black-light: $ouds-color-functional-white !default;
$ouds-color-always-on-black-light: $ouds-color-functional-light-gray-160 !default;
$ouds-color-always-on-white-light: $ouds-color-functional-black !default;
$ouds-color-always-white-light: $ouds-color-functional-white !default;
$ouds-color-always-black-dark: $ouds-color-functional-black !default;
Expand Down Expand Up @@ -443,6 +444,7 @@ $ouds-grid-2xl-column-count: $ouds-grid-column-count-1200 !default;
$ouds-grid-2xl-column-gap: $ouds-grid-column-gap-600 !default;
$ouds-grid-2xl-margin: $ouds-grid-margin-1700 !default;
$ouds-grid-2xl-max-width: $ouds-grid-max-width-700 !default;
$ouds-grid-2xl-max-width-alt: $ouds-grid-max-width-650 !default;
$ouds-grid-2xl-min-width: $ouds-grid-min-width-700 !default;
$ouds-grid-2xl-width: $ouds-grid-width-700 !default;
$ouds-grid-2xs-column-count: $ouds-grid-column-count-400 !default;
Expand Down Expand Up @@ -572,7 +574,6 @@ $ouds-size-icon-with-heading-xlarge-size-md-tablet: $ouds-dimension-700 !default
$ouds-size-icon-with-heading-xlarge-size-sm-desktop: $ouds-dimension-700 !default;
$ouds-size-icon-with-heading-xlarge-size-sm-mobile: $ouds-dimension-550 !default;
$ouds-size-icon-with-heading-xlarge-size-sm-tablet: $ouds-dimension-650 !default;
$ouds-size-max-width-grid: $ouds-grid-max-width-650 !default;
$ouds-size-max-width-type-body-large-desktop: $ouds-dimension-7000 !default;
$ouds-size-max-width-type-body-large-mobile: $ouds-dimension-6000 !default;
$ouds-size-max-width-type-body-large-tablet: $ouds-dimension-6000 !default;
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/0.0/layout/containers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,15 @@ Comparison between `.container-fluid` with `.container-max-width` and `.containe

### Custom max width

If necessary, in specific cases, you can define a custom maximum width for the fluid container by overriding the `$ouds-size-max-width-grid` variable before importing the OUDS Web SCSS files.
If necessary, in specific cases, you can define a custom maximum width for the fluid container by overriding the `$ouds-grid-2xl-max-width-alt` variable before importing the OUDS Web SCSS files.

This adjustment will apply to all containers using the `.container-max-width`class, ensuring that your layout stays within the specific width. Once the layout exceeds the `$ouds-size-max-width-grid` value at larger breakpoints, the container's margins and gutter values will remain unchanged.
This adjustment will apply to all containers using the `.container-max-width`class, ensuring that your layout stays within the specific width. Once the layout exceeds the `$ouds-grid-2xl-max-width-alt` value at larger breakpoints, the container's margins and gutter values will remain unchanged.

```scss
@import "../node_modules/@ouds/web/scss/config";
@import "../node_modules/@ouds/web/scss/functions";

$ouds-size-max-width-grid: 3500px; // Custom container max width
$ouds-grid-2xl-max-width-alt: 3500px; // Custom container max width

@import "../node_modules/@ouds/web/scss/tokens/raw";
@import "../node_modules/@ouds/web/scss/tokens/semantic";
Expand Down
Loading

0 comments on commit 972eb0b

Please sign in to comment.