Skip to content

Commit

Permalink
Implementing Size, Spacing and Dimension tokens and associated doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Oct 7, 2024
1 parent d14c37b commit 6b7eec8
Show file tree
Hide file tree
Showing 31 changed files with 1,775 additions and 131 deletions.
96 changes: 96 additions & 0 deletions scss/_maps.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,99 @@
// OUDS mod
// scss-docs-start ouds-maps-borders
$ouds-border-radiuses: (
null: $ouds-border-radius-default,
"none": $ouds-border-radius-none,
"short": $ouds-border-radius-short,
"medium": $ouds-border-radius-medium,
"tall": $ouds-border-radius-tall,
"pill": px-to-rem($ouds-border-radius-pill),
"circle": 50%
) !default;

$ouds-border-styles: (
"drag": $ouds-border-style-drag
) !default;

$ouds-border-widths: (
"thin": $ouds-border-width-thin,
"medium": $ouds-border-width-medium,
"thick": $ouds-border-width-thick,
"thicker": $ouds-border-width-thicker,
) !default;
// scss-docs-end ouds-maps-borders

// scss-docs-start ouds-maps-dimension
$ouds-dimension-space-scaled: (
"none": var(--#{$prefix}space-scaled-none),
"smash": var(--#{$prefix}space-scaled-smash),
"shortest": var(--#{$prefix}space-scaled-shortest),
"shorter": var(--#{$prefix}space-scaled-shorter),
"short": var(--#{$prefix}space-scaled-short),
"medium": var(--#{$prefix}space-scaled-medium),
"tall": var(--#{$prefix}space-scaled-tall),
"taller": var(--#{$prefix}space-scaled-taller),
"tallest": var(--#{$prefix}space-scaled-tallest),
"spacious": var(--#{$prefix}space-scaled-spacious)
) !default;

// stylelint-disable function-disallowed-list
$ouds-dimension-negative-space-scaled: (
"nsmash": calc(-1 * var(--#{$prefix}space-scaled-smash)),
"nshortest": calc(-1 * var(--#{$prefix}space-scaled-shortest)),
"nshorter": calc(-1 * var(--#{$prefix}space-scaled-shorter)),
"nshort": calc(-1 * var(--#{$prefix}space-scaled-short)),
"nmedium": calc(-1 * var(--#{$prefix}space-scaled-medium)),
"ntall": calc(-1 * var(--#{$prefix}space-scaled-tall)),
"ntaller": calc(-1 * var(--#{$prefix}space-scaled-taller)),
"ntallest": calc(-1 * var(--#{$prefix}space-scaled-tallest)),
"nspacious": calc(-1 * var(--#{$prefix}space-scaled-spacious))
) !default;
// stylelint-enable function-disallowed-list

$ouds-dimension-space-fixed: (
"none": $ouds-space-fixed-none,
"smash": $ouds-space-fixed-smash,
"shortest": $ouds-space-fixed-shortest,
"shorter": $ouds-space-fixed-shorter,
"short": $ouds-space-fixed-short,
"medium": $ouds-space-fixed-medium,
"tall": $ouds-space-fixed-tall,
"taller": $ouds-space-fixed-taller,
"tallest": $ouds-space-fixed-tallest,
"spacious": $ouds-space-fixed-spacious,
"huge": $ouds-space-fixed-huge,
"jumbo": $ouds-space-fixed-jumbo
) !default;

$ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-map($ouds-dimension-space-fixed), null) !default;
// scss-docs-end ouds-maps-dimension

// scss-docs-start ouds-maps-elevations
$ouds-elevations: (
"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,
"focus": $ouds-elevation-focus
) !default;
// scss-docs-end ouds-maps-elevations

// 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
) !default;
// scss-docs-end ouds-maps-opacities
// End mod

// Re-assigned maps
//
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
Expand Down
49 changes: 0 additions & 49 deletions scss/_ouds-maps.scss
View file

This file was deleted.

39 changes: 39 additions & 0 deletions scss/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,45 @@
--#{$prefix}border-color-translucent: #{$border-color-translucent};
// scss-docs-end root-border-var-ouds

// scss-docs-start root-space-scaled-var-ouds
--#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-mobile};
--#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-mobile};
--#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-mobile};
--#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-mobile};
--#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-mobile};
--#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-mobile};
--#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-mobile};
--#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-mobile};
--#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-mobile};
--#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-mobile};

@include media-breakpoint-up(md) {
--#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-tablet};
--#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-tablet};
--#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-tablet};
--#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-tablet};
--#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-tablet};
--#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-tablet};
--#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-tablet};
--#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-tablet};
--#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-tablet};
--#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-tablet};
}

@include media-breakpoint-up(xl) {
--#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-desktop};
--#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-desktop};
--#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-desktop};
--#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-desktop};
--#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-desktop};
--#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-desktop};
--#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-desktop};
--#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-desktop};
--#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-desktop};
--#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop};
}
// scss-docs-end root-space-scaled-var-ouds

// scss-docs-start root-border-var
@if $enable-bootstrap-compatibility {
--#{$prefix}border-radius: #{$border-radius};
Expand Down
Loading

0 comments on commit 6b7eec8

Please sign in to comment.