From 394082ad825402486a569c888f843cd6f8b1d89f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 24 Oct 2024 14:47:59 +0200 Subject: [PATCH] Update to use the new semantic token (renamed) --- package.json | 2 +- scss/_containers.scss | 2 +- scss/mixins/_breakpoints.scss | 2 +- site/content/docs/0.0/layout/containers.md | 6 +++--- site/content/docs/0.0/migration-from-boosted.md | 2 +- site/content/docs/0.0/migration.md | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 756d3fe97e..0ed06259ce 100644 --- a/package.json +++ b/package.json @@ -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/_raw.scss,**/tokens/_semantic.scss", + "css-lint-vars": "fusv scss/ site/assets/scss/ --ignoreFiles **/tokens/_component.scss,**/tokens/_raw.scss,**/tokens/_semantic.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\"", diff --git a/scss/_containers.scss b/scss/_containers.scss index d18f8cff30..0ef7087b43 100644 --- a/scss/_containers.scss +++ b/scss/_containers.scss @@ -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-grid-max-width; + max-width: $ouds-size-max-width-grid-grid; .row { --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())}; diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 558c42498d..4ea3809ff8 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -128,7 +128,7 @@ // OUDS mod // Get the breakpoint infix corresponding to a given width -@function get-breakpoint-from-width($width: $ouds-grid-max-width, $breakpoints: $grid-breakpoints) { +@function get-breakpoint-from-width($width: $ouds-size-max-width-grid-grid, $breakpoints: $grid-breakpoints) { $breakpoint-infix: ""; @each $infix, $value in $grid-breakpoints { @if $width >= $value { diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index ed354be9c6..98da3d712f 100644 --- a/site/content/docs/0.0/layout/containers.md +++ b/site/content/docs/0.0/layout/containers.md @@ -121,14 +121,14 @@ 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-grid-max-width` 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-size-max-width-grid-grid` 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-grid-max-width` 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-size-max-width-grid-grid` value at larger breakpoints, the container's margins and gutter values will remain unchanged. ```scss @import "../node_modules/ouds-web/scss/functions"; -$ouds-grid-max-width: 3500px; // Custom container max width +$ouds-size-max-width-grid-grid: 3500px; // Custom container max width @import "../node_modules/ouds-web/tokens/raw"; @import "../node_modules/ouds-web/tokens/semantic"; diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 58b7a5a9e7..09df44003d 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -269,7 +269,7 @@ Technically, it means that you can get rid of the following things:
  • $ouds-grid-margin-400
  • $ouds-grid-margin-500
  • $ouds-grid-margin-700
    • -
  • $ouds-grid-max-width
    • +
  • $ouds-size-max-width-grid-grid
  • $ouds-grid-md-column-gap
  • $ouds-grid-md-margin
  • $ouds-grid-md-min-width
    • diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 60ed86eadf..e52f40efb2 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -212,7 +212,7 @@ toc: true
  • $ouds-grid-margin-400
  • $ouds-grid-margin-500
  • $ouds-grid-margin-700
    • -
  • $ouds-grid-max-width
    • +
  • $ouds-size-max-width-grid-grid
  • $ouds-grid-md-column-gap
  • $ouds-grid-md-margin
  • $ouds-grid-md-min-width