Skip to content

Commit

Permalink
Update to use the new semantic token (renamed)
Browse files Browse the repository at this point in the history
  • Loading branch information
julien-deramond committed Oct 24, 2024
1 parent ff47620 commit 394082a
Show file tree
Hide file tree
Showing 6 changed files with 8 additions and 8 deletions.
2 changes: 1 addition & 1 deletion package.json
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/_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\"",
Expand Down
2 changes: 1 addition & 1 deletion scss/_containers.scss
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-grid-max-width;
max-width: $ouds-size-max-width-grid-grid;

.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
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-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 {
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/0.0/layout/containers.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/0.0/migration-from-boosted.md
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ Technically, it means that you can get rid of the following things:
<li><code>$ouds-grid-margin-400</code></li>
<li><code>$ouds-grid-margin-500</code></li>
<li><code>$ouds-grid-margin-700</code></li>
<li><code>$ouds-grid-max-width</code></li>
<li><code>$ouds-size-max-width-grid-grid</code></li>
<li><code>$ouds-grid-md-column-gap</code></li>
<li><code>$ouds-grid-md-margin</code></li>
<li><code>$ouds-grid-md-min-width</code></li>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/0.0/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ toc: true
<li><code>$ouds-grid-margin-400</code></li>
<li><code>$ouds-grid-margin-500</code></li>
<li><code>$ouds-grid-margin-700</code></li>
<li><code>$ouds-grid-max-width</code></li>
<li><code>$ouds-size-max-width-grid-grid</code></li>
<li><code>$ouds-grid-md-column-gap</code></li>
<li><code>$ouds-grid-md-margin</code></li>
<li><code>$ouds-grid-md-min-width</code></li>
Expand Down

0 comments on commit 394082a

Please sign in to comment.