Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[OUDS] feat: Add "Elevation" tokens, utilities and documentation - new version #2741

Merged
merged 22 commits into from
Sep 24, 2024
Merged

[OUDS] feat: Add "Elevation" tokens, utilities and documentation - new version #2741

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
a69106c
utilities from boosted
hannahiss Sep 19, 2024
336320f
elevation tokens first version
hannahiss Sep 19, 2024
1227521
restore dist
hannahiss Sep 19, 2024
4bf3aeb
Merge branch 'ouds/main' into ouds/main-his-tokens-elevation
hannahiss Sep 20, 2024
c8a8348
add shadows units :-)
hannahiss Sep 20, 2024
98ca7cb
Merge remote-tracking branch 'origin/ouds/main-his-tokens-elevation' …
hannahiss Sep 20, 2024
0b6a9e8
Add ouds-maps + bootstrap values
hannahiss Sep 23, 2024
d73be99
doc: Add migration documentation for elevation
vprothais Sep 23, 2024
2391af9
Merge branch 'ouds/main' into ouds/main-his-tokens-elevation
julien-deramond Sep 24, 2024
e380a35
Update bundlewatch values
julien-deramond Sep 24, 2024
ce17cff
doc: Add scss-docs part and elevation reference for shadow
vprothais Sep 24, 2024
bd03a2a
doc: Remove keywords
vprothais Sep 24, 2024
42719e4
doc: Add ouds-maps doc in the right version of migrate doc
vprothais Sep 24, 2024
0750849
Reorder alphabetically raw tokens
julien-deramond Sep 24, 2024
7755969
doc: Remove commented variables from migration guides
vprothais Sep 24, 2024
0362117
doc: Comment content concerning component since we don't have any.
vprothais Sep 24, 2024
ee93d62
doc: Rephrasing from code review
vprothais Sep 24, 2024
f8aca84
Typo in comment
julien-deramond Sep 24, 2024
cc84c63
Reorder alphabetically semantic tokens
julien-deramond Sep 24, 2024
6550ead
Update site/content/docs/0.0/utilities/shadows.md
julien-deramond Sep 24, 2024
ae51b65
Merge branch 'ouds/main' into ouds/main-his-tokens-elevation
julien-deramond Sep 24, 2024
7346e58
feat: Add unit test for shadow utilities
vprothais Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"files": [
{
"path": "./dist/css/ouds-web-bootstrap.css",
"maxSize": "45.0 kB"
"maxSize": "45.25 kB"
},
{
"path": "./dist/css/ouds-web-bootstrap.min.css",
"maxSize": "41.75 kB"
"maxSize": "42.0 kB"
},
{
"path": "./dist/css/ouds-web-grid.css",
Expand Down
36 changes: 0 additions & 36 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,3 @@
// 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": $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-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: 49 additions & 0 deletions scss/_ouds-maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// 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": $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-elevations
$ouds-elevations: (
"none": $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none,
"raised": $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised,
"drag": $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag,
"overlay-default": $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default,
"overlay-emphasized": $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized,
"sticky-default": $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default,
"sticky-emphasized": $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized,
"sticky-navigation-scrolled": $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled,
"focus": $ouds-elevation-x-focus $ouds-elevation-y-focus $ouds-elevation-blur-focus $ouds-elevation-spread-focus $ouds-elevation-color-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
10 changes: 6 additions & 4 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,12 @@
}
// scss-docs-end root-border-var

--#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
@if $enable-bootstrap-compatibility {
--#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
}

--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; // OUDS mod
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; // OUDS mod
Expand Down
14 changes: 12 additions & 2 deletions scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,20 @@ $utilities: map-merge(
null: var(--#{$prefix}box-shadow),
sm: var(--#{$prefix}box-shadow-sm),
lg: var(--#{$prefix}box-shadow-lg),
none: none,
)
// OUDS mod: `none` value handled by `shadow-ouds`
),
bootstrap-compatibility: true
),
// scss-docs-end utils-shadow
// OUDS mod
// scss-docs-start utils-shadow-ouds
"shadow-ouds": (
property: box-shadow,
class: shadow,
values: $ouds-elevations
),
// scss-docs-end utils-shadow-ouds
// End mod
// scss-docs-start utils-focus-ring
"focus-ring": (
css-var: true,
Expand Down
6 changes: 3 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,9 +649,9 @@ $focus-visible-outer-color: $black !default; // OUDS mod
// scss-docs-end focus-visible-variables

// scss-docs-start box-shadow-variables
$box-shadow: null !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
$box-shadow-sm: null !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
$box-shadow-lg: null !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
$box-shadow: map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
$box-shadow-sm: map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
$box-shadow-lg: map-get($ouds-elevations, "overlay-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
1 change: 1 addition & 0 deletions scss/ouds-web-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $include-column-box-sizing: true !default;
@import "tokens/raw";
@import "tokens/semantic";
@import "tokens/component";
@import "ouds-maps";
@import "variables";
@import "variables-dark";
@import "maps";
Expand Down
1 change: 1 addition & 0 deletions scss/ouds-web-reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@import "tokens/raw";
@import "tokens/semantic";
@import "tokens/component";
@import "ouds-maps";
@import "variables";
@import "variables-dark";
@import "maps";
Expand Down
1 change: 1 addition & 0 deletions scss/ouds-web-utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import "tokens/raw";
@import "tokens/semantic";
@import "tokens/component";
@import "ouds-maps";
@import "variables";
@import "variables-dark";
@import "maps";
Expand Down
1 change: 1 addition & 0 deletions scss/ouds-web.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@import "tokens/raw";
@import "tokens/semantic";
@import "tokens/component";
@import "ouds-maps";
@import "variables";
@import "variables-dark";
@import "maps";
Expand Down
1 change: 1 addition & 0 deletions scss/tests/customize/_ouds-web-bootstrap.test.scss
View file
Open in desktop
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import "../../tokens/raw";
@import "../../tokens/semantic";
@import "../../tokens/component";
@import "../../ouds-maps";
@import "../../variables";
@import "../../maps";
@import "../../mixins";
Expand Down
1 change: 1 addition & 0 deletions scss/tests/mixins/_auto-import-of-variables-dark.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "../../tokens/raw";
@import "../../tokens/semantic";
@import "../../tokens/component";
@import "../../ouds-maps";
@import "../../variables";
// Voluntarily not importing _variables-dark.scss
@import "../../maps";
Expand Down
1 change: 1 addition & 0 deletions scss/tests/mixins/_color-modes.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "../../tokens/raw";
@import "../../tokens/semantic";
@import "../../tokens/component";
@import "../../ouds-maps";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
Expand Down
1 change: 1 addition & 0 deletions scss/tests/mixins/_utilities.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $enable-important-utilities: false;
@import "../../tokens/raw";
@import "../../tokens/semantic";
@import "../../tokens/component";
@import "../../ouds-maps";
@import "../../variables"; // Added to avoid undefined variable error like `$white`
// End mod
@import "../../mixins/utilities";
Expand Down
1 change: 1 addition & 0 deletions scss/tests/utilities/_api.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@import "../../tokens/raw";
@import "../../tokens/semantic";
@import "../../tokens/component";
@import "../../ouds-maps";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
Expand Down
30 changes: 30 additions & 0 deletions scss/tokens/_raw.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,36 @@ $ouds-border-width-100: $ouds-border-base !default;
// $ouds-border-width-200: $ouds-border-base * 2 !default;
// scss-docs-end ouds-raw-border

// Elevation

// scss-docs-start ouds-raw-elevation
$ouds-elevation-blur-0: 0 !default;
// $ouds-elevation-blur-100: 1px !default;
$ouds-elevation-blur-200: 2px !default;
$ouds-elevation-blur-300: 3px !default;
$ouds-elevation-blur-400: 4px !default;
// $ouds-elevation-blur-500: 8px !default;
$ouds-elevation-blur-600: 12px !default;
// $ouds-elevation-blur-700: 20px !default;

$ouds-elevation-spread-n100: -1px !default;
// $ouds-elevation-spread-n200: -2px !default;
$ouds-elevation-spread-n300: -4px !default;
// $ouds-elevation-spread-n400: -8px !default;
$ouds-elevation-spread-0: 0 !default;
$ouds-elevation-spread-300: 3px !default;

$ouds-elevation-x-0: 0 !default;

$ouds-elevation-y-0: 0 !default;
$ouds-elevation-y-100: 1px !default;
$ouds-elevation-y-200: 2px !default;
$ouds-elevation-y-300: 4px !default;
// $ouds-elevation-y-400: 8px !default;
$ouds-elevation-y-500: 12px !default;
// $ouds-elevation-y-600: 20px !default;
// scss-docs-end ouds-raw-elevation

// Opacity

// scss-docs-start ouds-raw-opacity
Expand Down
54 changes: 54 additions & 0 deletions scss/tokens/_semantic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,60 @@ $ouds-border-width-thicker: $ouds-border-width-100 !default;
// $ouds-border-width-outside-focus: $ouds-border-width-50 !default;
// scss-docs-end ouds-semantic-border

// Elevation

// scss-docs-start ouds-semantic-elevation
$ouds-elevation-blur-drag: $ouds-elevation-blur-400 !default;
$ouds-elevation-blur-focus: $ouds-elevation-blur-0 !default;
$ouds-elevation-blur-none: $ouds-elevation-blur-0 !default;
$ouds-elevation-blur-overlay-default: $ouds-elevation-blur-300 !default;
$ouds-elevation-blur-overlay-emphasized: $ouds-elevation-blur-600 !default;
$ouds-elevation-blur-raised: $ouds-elevation-blur-200 !default;
$ouds-elevation-blur-sticky-default: $ouds-elevation-blur-400 !default;
$ouds-elevation-blur-sticky-emphasized: $ouds-elevation-blur-400 !default;
$ouds-elevation-blur-sticky-navigation-scrolled: $ouds-elevation-blur-400 !default;

$ouds-elevation-color-drag: rgba(0, 0, 0, .32) !default;
$ouds-elevation-color-focus: rgba(0, 0, 0, 1) !default;
$ouds-elevation-color-none: rgba(0, 0, 0, 0) !default;
$ouds-elevation-color-overlay-default: rgba(0, 0, 0, .24) !default;
$ouds-elevation-color-overlay-emphasized: rgba(0, 0, 0, .16) !default;
$ouds-elevation-color-raised: rgba(0, 0, 0, .32) !default;
$ouds-elevation-color-sticky-default: rgba(0, 0, 0, .16) !default;
$ouds-elevation-color-sticky-emphasized: rgba(0, 0, 0, .16) !default;
$ouds-elevation-color-sticky-navigation-scrolled: rgba(0, 0, 0, .16) !default;

$ouds-elevation-spread-drag: $ouds-elevation-spread-n100 !default;
$ouds-elevation-spread-focus: $ouds-elevation-spread-300 !default;
$ouds-elevation-spread-none: $ouds-elevation-spread-0 !default;
$ouds-elevation-spread-overlay-default: $ouds-elevation-spread-n100 !default;
$ouds-elevation-spread-overlay-emphasized: $ouds-elevation-spread-n300 !default;
$ouds-elevation-spread-raised: $ouds-elevation-spread-0 !default;
$ouds-elevation-spread-sticky-default: $ouds-elevation-spread-n100 !default;
$ouds-elevation-spread-sticky-emphasized: $ouds-elevation-spread-n100 !default;
$ouds-elevation-spread-sticky-navigation-scrolled: $ouds-elevation-spread-n100 !default;

$ouds-elevation-x-drag: $ouds-elevation-x-0 !default;
$ouds-elevation-x-focus: $ouds-elevation-x-0 !default;
$ouds-elevation-x-none: $ouds-elevation-x-0 !default;
$ouds-elevation-x-overlay-default: $ouds-elevation-x-0 !default;
$ouds-elevation-x-overlay-emphasized: $ouds-elevation-x-0 !default;
$ouds-elevation-x-raised: $ouds-elevation-x-0 !default;
$ouds-elevation-x-sticky-default: $ouds-elevation-x-0 !default;
$ouds-elevation-x-sticky-emphasized: $ouds-elevation-x-0 !default;
$ouds-elevation-x-sticky-navigation-scrolled: $ouds-elevation-x-0 !default;

$ouds-elevation-y-drag: $ouds-elevation-y-300 !default;
$ouds-elevation-y-focus: $ouds-elevation-y-0 !default;
$ouds-elevation-y-none: $ouds-elevation-y-0 !default;
$ouds-elevation-y-overlay-default: $ouds-elevation-y-200 !default;
$ouds-elevation-y-overlay-emphasized: $ouds-elevation-y-500 !default;
$ouds-elevation-y-raised: $ouds-elevation-y-100 !default;
$ouds-elevation-y-sticky-default: $ouds-elevation-y-300 !default;
$ouds-elevation-y-sticky-emphasized: $ouds-elevation-y-300 !default;
$ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default;
// scss-docs-end ouds-semantic-elevation

// Opacity

// scss-docs-start ouds-semantic-opacity
Expand Down
1 change: 1 addition & 0 deletions site/assets/scss/docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
@import "../../../scss/tokens/raw";
@import "../../../scss/tokens/semantic";
@import "../../../scss/tokens/component";
@import "../../../scss/ouds-maps";
@import "../../../scss/variables";
@import "../../../scss/mixins";

Expand Down
1 change: 1 addition & 0 deletions site/assets/scss/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@import "../../../scss/tokens/raw";
@import "../../../scss/tokens/semantic";
@import "../../../scss/tokens/component";
@import "../../../scss/ouds-maps";
@import "../../../scss/variables";
@import "../../../scss/mixins";
@import "variables";
Expand Down
2 changes: 2 additions & 0 deletions site/content/docs/0.0/customize/custom-libraries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ The [`scss/tokens/_raw.scss`]({{< param repo >}}/blob/v{{< param current_version

The [`scss/tokens/_semantic.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic.scss) file contains all the semantic tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built on raw tokens, assigning them semantic meaning through media queries or specific contexts. These tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw token.

Some semantic tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_ouds-maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_ouds-maps.scss) file.

### Component tokens

The [`scss/tokens/_component.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_component.scss) file is dedicated to component tokens. These tokens could be used in projects, but exclusively within components, often relying on semantic tokens, though they may occasionally reference raw tokens. Essentially, they map the semantic tokens to components.
Expand Down
10 changes: 9 additions & 1 deletion site/content/docs/0.0/layout/z-index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,12 @@ aliases:
- "/docs/layout/z-index/"
---

{{< callout-soon "page" >}}
Several OUDS Web components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content.<!-- We utilize a default z-index scale in OUDS Web that's been designed to properly layer navigation, tooltips and popovers, modals, and more.-->

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components<!--—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors-->. There's no reason we couldn't have used `100`+ or `500`+.

We don't encourage customization of these individual values; should you change one, you likely need to change them all.

{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}

To handle overlapping borders<!-- within components (e.g., buttons and inputs in input groups)-->, we use low single digit `z-index` values<!-- of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements-->.
Loading
Loading