diff --git a/docs/index.html b/docs/index.html index ed80988..d2757ea 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,9 +1,9 @@ -@aurodesignsystem/webcorestylesheets - v5.1.1

accessibility

css

:focus

:focus { ... }

Description

Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.

Check current browser support for :focus-visible on Can I Use.

Example

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";

&:focus-visible

:focus { ... }

Description

Global selector to address box-model and default :focus pseudo elements. Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.

Check current browser support for :focus-visible on Can I Use.

Example

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";

&:focus-visible

&:focus-visible { ... }

Description

Global setting for the display of focus-visible accessibility interaction. Can I Use.

This is a OPT-IN feature, support is NOT added by default. Users MUST subscribe to Sass import described below.

The focus-visible Sass file MUST be imported BEFORE the essentials Sass file. Sass load order is IMPORTANT. See example below.

Manage $scope option.

Example

Default selector(s)

*:focus-visible {}

Selector(s) when $scope: true;

.auro *:focus-visible {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";

it's important to import focus-visible BEFORE essentials

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
 @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

animation

mixins

auro_transition

#{$scope}.#{$prefix}pagecontainer { ... }

Description

Container class

Manage $scope and $prefix options.

Example

Default selector(s)

.container {}

Selector(s) when $scope: true;

.auro .container {}

Selector(s) when $prefix: true;

.auro_container {}

Example HTML selector use

<element class="container"> ... </element>

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

core

css

#{$sym}#{$prefix}#{$scope}blockquote

import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}.#{$prefix}hyperlink

#{$scope}.#{$prefix}hyperlink { ... }

Description

Baseline hyperlink styles as mirrored in auro-hyperlink web component

Support for: .hyperlink--nav, and .hyperlink--ondark

Manage $scope and $prefix options.

Example

Default selector(s)

.hyperlink {}
@@ -289,62 +245,7 @@
     gap: var(--ds-grid-gutter-xl, $ds-grid-gutter-xl);
   }
  }" data-collapsed="@mixin grid_gutter($gutter: 16px) { ... }">@mixin grid_gutter($gutter: 16px) { ... }

Parameters

NameDescriptionTypeDefault value
$gutter

Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.

String16px

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

import mixin file with altered output values prior to import

$gutter: $ds-grid-gutter-xs !default;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

css

#{$scope}.#{$prefix}grid

#{$scope}.#{$prefix}grid { ... }

Description

Grid class This class selector is to be deprecated during the next major release. Manage $scope and $prefix options.

Example

Default selector(s)

.grid {}

Selector(s) when $scope: true;

.auro .grid {}

Selector(s) when $prefix: true;

.auro_grid {}

Example HTML selector use

<element class="grid"> ... </element>

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

headings

css

#{$scope}.#{$prefix}heading

headings
css
#{$scope}.#{$prefix}heading
#{$scope}.#{$prefix}pageLayout-3col { ... }
Description
pageLayout-3col class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-3col {}
Selector(s) when $scope: true;
.auro .pageLayout-3col {}
Selector(s) when $prefix: true;
.auro_pageLayout-3col {}
Example HTML selector use
<element class="pageLayout-3col"> ... </element>
import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

responsive

mixins

auro_breakpoint--lg

@mixin auro_breakpoint--lg() { ... }

Description

Standard breakpoint to support resolutions greater than 1232px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include auro_breakpoint--lg {
-      ...
-    }
-}

auro_breakpoint--md

@mixin auro_breakpoint--md() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include auro_breakpoint--md {
-      ...
-    }
-}

auro_breakpoint--sm

@mixin auro_breakpoint--sm() { ... }

Description

Standard breakpoint to support resolutions greater than 660px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
-    @include auro_breakpoint--sm {
-      ...
-    }
-}

auro_breakpoint

#{$scope}.#{$prefix}pageLayout-3col { ... }

Description

pageLayout-3col class

Manage $scope and $prefix options.

Example

Default selector(s)

.pageLayout-3col {}

Selector(s) when $scope: true;

.auro .pageLayout-3col {}

Selector(s) when $prefix: true;

.auro_pageLayout-3col {}

Example HTML selector use

<element class="pageLayout-3col"> ... </element>

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

responsive

mixins

auro_breakpoint

#{$scope}.auro_table { ... }

Description

CSS selectors for easy reproduction of Auro Table UI.

Defaults are set by baseline Design Tokens

Manage $scope options.

Example

import selector file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";

#{$scope}.auro_tablist

#{$scope}.#{$prefix}util_nowrap { ... }

Description

Utility class force no wrap on content

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_nowrap {}

Selector(s) when $scope: true;

.auro .util_nowrap {}

Selector(s) when $prefix: true;

.auro_util_nowrap {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";

#{$scope}.#{$prefix}util_capitalize

#{$scope}.#{$prefix}util_capitalize { ... }

Description

Utility class to capitalize a string

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_capitalize {}

Selector(s) when $scope: true;

.auro .util_capitalize {}

Selector(s) when $prefix: true;

.auro_util_capitalize {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
\ No newline at end of file +}" data-collapsed="#{$scope}.#{$prefix}util_capitalize { ... }">#{$scope}.#{$prefix}util_capitalize { ... }

Description

Utility class to capitalize a string

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_capitalize {}

Selector(s) when $scope: true;

.auro .util_capitalize {}

Selector(s) when $prefix: true;

.auro_util_capitalize {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7d63079..7ef83dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,19 @@ { "name": "@aurodesignsystem/webcorestylesheets", - "version": "5.1.1", + "version": "5.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/webcorestylesheets", - "version": "5.1.1", + "version": "5.1.2", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { "chalk": "^5.3.0" }, "devDependencies": { - "@aurodesignsystem/design-tokens": "^4.9.0", + "@aurodesignsystem/design-tokens": "^4.9.1", "@commitlint/cli": "^19.3.0", "@commitlint/config-conventional": "^19.2.2", "@semantic-release/changelog": "^6.0.3", @@ -60,9 +60,9 @@ } }, "node_modules/@aurodesignsystem/design-tokens": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.9.0.tgz", - "integrity": "sha512-rJWcSCOFwtJ2O8e1jKnFch92cPqeXiLfqgtKpv1B0D4bqMfWgGPVXWizn3M0aMOHrEjCgFmVBXpZFXfsbpOW1A==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.9.1.tgz", + "integrity": "sha512-vnxVwJszDB7BIvzMxBee2Hn3EQmPXOHPWvF0rXjwfgndOi/AbHjjJgayJFbioJXvRLRUiVAtNCrcH4vuMFShkg==", "dev": true, "hasInstallScript": true, "dependencies": { diff --git a/package.json b/package.json index 328897e..82c4dd5 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,14 @@ "node": "^18 || ^20" }, "peerDependencies": { - "@aurodesignsystem/design-tokens": "^4.1.1", + "@aurodesignsystem/design-tokens": "^4.9.1", "sass": "^1.42.1" }, "dependencies": { "chalk": "^5.3.0" }, "devDependencies": { - "@aurodesignsystem/design-tokens": "^4.9.0", + "@aurodesignsystem/design-tokens": "^4.9.1", "@commitlint/cli": "^19.3.0", "@commitlint/config-conventional": "^19.2.2", "@semantic-release/changelog": "^6.0.3", diff --git a/src/_blockquote.scss b/src/_blockquote.scss index 80f6bf7..4406be8 100644 --- a/src/_blockquote.scss +++ b/src/_blockquote.scss @@ -24,7 +24,7 @@ $focus: null !default; /// #{$sym}#{$prefix}#{$scope}blockquote { margin-left: 0; - border-left: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default); + border-left: 1px solid var(--ds-color-border-ui-active-default, $ds-color-border-ui-active-default); padding: var(--ds-size-100, $ds-size-100); padding-left: var(--ds-size-400, $ds-size-400); color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); diff --git a/src/_breakpoints.scss b/src/_breakpoints.scss index d9f567a..ff1c291 100644 --- a/src/_breakpoints.scss +++ b/src/_breakpoints.scss @@ -8,58 +8,6 @@ // The following mixins provide pre-configured Orion approved // breakpoints when development mobile-first UIs. -/// Standard breakpoint to support resolutions greater than 1232px. -/// This mixin is to be deprecated during the next major release. -/// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @group responsive -/// @example scss - Set breakpoint -/// .foo { -/// @include auro_breakpoint--lg { -/// ... -/// } -/// } -@mixin auro_breakpoint--lg { - @media screen and (min-width: $ds-grid-breakpoint-lg) { - @content; - } -} - - -/// Standard breakpoint to support resolutions greater than 1024px. -/// This mixin is to be deprecated during the next major release. -/// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @group responsive -/// @example scss - Set breakpoint -/// .foo { -/// @include auro_breakpoint--md { -/// ... -/// } -/// } -@mixin auro_breakpoint--md { - @media screen and (min-width: $ds-grid-breakpoint-md) { - @content; - } -} - -/// Standard breakpoint to support resolutions greater than 660px. -/// This mixin is to be deprecated during the next major release. -/// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @group responsive -/// @example scss - Set breakpoint -/// .foo { -/// @include auro_breakpoint--sm { -/// ... -/// } -/// } -@mixin auro_breakpoint--sm { - @media screen and (min-width: $ds-grid-breakpoint-sm) { - @content; - } -} - /// Open format mixin to define any breakpoint. /// /// See also: [Media_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features) diff --git a/src/_core.scss b/src/_core.scss index dee2949..7931584 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -10,72 +10,6 @@ $focus-visible: null !default; // sass-lint:disable no-important /// Global selector to address box-model and default `:focus` pseudo elements. -/// -/// **DEPRECATED!!** -/// The use of the Sass variable `$focus-visible` has been deprecated. See [&:focus-visible](/docs/#accessibility-css-&:focus-visible) for preferred feature. -/// -/// Global media setting for [a11y support of reduced-motion](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend). -/// -/// [Manage](/#scope-prefix-variable-scope) `$scope` option. -/// @group Accessibility -/// @example scss - Default selector(s) -/// *, *:before, *:after {} -/// -/// @example scss - Selector(s) when $scope: true; -/// .auro *, .auro *:before, .auro *:after {} -/// -/// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core"; -/// -/// @example scss - import file with `$focus` set to `true` -/// $focus: true; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core"; -/// -#{$scope} * { - &, - &:before, - &:after { - box-sizing: border-box; - - @media (prefers-reduced-motion: reduce) { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } - } - - // =-=-=-=-=-=-= START deprecated code =-=-=-=-=-=-=-=-=-= - // if $focus-visible is true, override the default focus-visible outline - @if $focus-visible == true { - &:focus-visible { - outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default); - } - } @else if $focus-visible == null { - &:focus-visible { - outline: 0; - } - } - - // if $focus-visible is true, override the default focus-visible outline - @if $focus-visible == true { - &:focus-visible { - outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default); - } - } @else if $focus-visible == null { - &:focus-visible { - outline: 0; - } - } - - // if $focus is true, override the default focus outline - @if $focus == true { - &:focus { - outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default); - } - } - // =-=-=-=-=-=-= END deprecated code =-=-=-=-=-=-=-=-=-= -} - /// Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it. /// /// Check current browser support for :focus-visible on [Can I Use](https://caniuse.com/css-focus-visible). diff --git a/src/_essentials.scss b/src/_essentials.scss index ff4701a..ea118be 100644 --- a/src/_essentials.scss +++ b/src/_essentials.scss @@ -123,10 +123,10 @@ #{$scope}.#{$prefix}hyperlink { text-decoration: underline; - color: var(--ds-color-ui-default-default, $ds-color-ui-default-default); + color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default); &:visited { - color: var(--ds-color-ui-default-default, $ds-color-ui-default-default); + color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default); } &--nav { @@ -142,16 +142,16 @@ } &--ondark { - color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse); + color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse); &:not(.is-touching) { &:hover { - color: var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse); + color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse); } } &:visited { - color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse); + color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse); } } @@ -159,7 +159,7 @@ &:hover { text-decoration: none; - color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default); + color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default); } } } diff --git a/src/_focus-visible.scss b/src/_focus-visible.scss index f5641a4..4cbf325 100644 --- a/src/_focus-visible.scss +++ b/src/_focus-visible.scss @@ -31,6 +31,6 @@ $focus-visible: false; /// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible"; /// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; &:focus-visible { - outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default); + outline: 1px solid var(--ds-color-border-ui-focus-default, $ds-color-border-ui-focus-default); } } diff --git a/src/_grids.scss b/src/_grids.scss index b92fd94..81e7e3e 100644 --- a/src/_grids.scss +++ b/src/_grids.scss @@ -100,82 +100,6 @@ $fixed-anchor-width: 168px; } } - -/// Grid class -/// This class selector is to be deprecated during the next major release. -/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. -/// @group grid -/// @example scss - Default selector(s) -/// .grid {} -/// -/// @example scss - Selector(s) when $scope: true; -/// .auro .grid {} -/// -/// @example scss - Selector(s) when $prefix: true; -/// .auro_grid {} -/// -/// @example html - Example HTML selector use -/// ... -/// @example scss - import file; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; -/// -#{$scope}.#{$prefix}grid { - display: grid; - @include grid_width($ds-grid-breakpoint-xl); - @include grid_margin(); - @include grid_gutter($ds-grid-gutter-xs); - - &.two-column { - - > :nth-child(1) { - grid-area: col1; - } - - > :nth-child(2) { - grid-area: col2; - } - - grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr)); - grid-template-areas: - "col1" - "col2"; - - @include auro_grid-breakpoint--md { - grid-template-areas: "col1 col2"; - } - } - - &.fixed-nav { - - @extend .two-column; - - > :nth-child(1) { - position: sticky; - top: 0; - --align-self: stretch; - align-self: var(--align-self); - } - - @include auro_grid-breakpoint--md { - grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto; - } - } - - &.fixed-anchor { - - @extend .two-column; - grid-template-areas: - "col2" - "col1"; - - @include auro_grid-breakpoint--md { - grid-template-areas: "col1 col2"; - grid-template-columns: auto var(--fixed-nav-width, $fixed-nav-width); - } - - } -} - /// Container class /// /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. @@ -358,7 +282,7 @@ $fixed-anchor-width: 168px; .sidenav { grid-area: sidenav; - background-color: var(--ds-color-base-white, $ds-color-base-white); + background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); @include grid_padding($ds-grid-margin-xs); @include auro_grid-breakpoint--md { @@ -437,7 +361,7 @@ $fixed-anchor-width: 168px; .sidenav { grid-area: sidenav; z-index: 1; - background-color: var(--ds-color-base-white, $ds-color-base-white); + background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); @include grid_padding($ds-grid-margin-xs); @include grid-stickycolumn--xs(); diff --git a/src/_headings.scss b/src/_headings.scss index d891598..022acae 100644 --- a/src/_headings.scss +++ b/src/_headings.scss @@ -57,11 +57,12 @@ font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight); line-height: var(--ds-text-heading-display-height-breakpoint-sm, $ds-text-heading-display-height-breakpoint-sm); - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { font-size: var(--ds-text-heading-display-size-breakpoint-md, $ds-text-heading-display-size-breakpoint-md); line-height: var(--ds-text-heading-display-height-breakpoint-md, $ds-text-heading-display-height-breakpoint-md); } - @include auro_breakpoint--lg { + + @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { font-size: var(--ds-text-heading-display-size-breakpoint-lg, $ds-text-heading-display-size-breakpoint-lg); line-height: var(--ds-text-heading-display-height-breakpoint-lg, $ds-text-heading-display-height-breakpoint-lg); } @@ -89,11 +90,12 @@ font-weight: var(--ds-text-heading-800-weight, $ds-text-heading-800-weight); line-height: var(--ds-text-heading-800-height-breakpoint-sm, $ds-text-heading-800-height-breakpoint-sm); - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { font-size: var(--ds-text-heading-800-size-breakpoint-md, $ds-text-heading-800-size-breakpoint-md); line-height: var(--ds-text-heading-800-height-breakpoint-md, $ds-text-heading-800-height-breakpoint-md); } - @include auro_breakpoint--lg { + + @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { font-size: var(--ds-text-heading-800-size-breakpoint-lg, $ds-text-heading-800-size-breakpoint-lg); line-height: var(--ds-text-heading-800-height-breakpoint-lg, $ds-text-heading-800-height-breakpoint-lg); } @@ -121,11 +123,12 @@ font-weight: var(--ds-text-heading-700-weight, $ds-text-heading-700-weight); line-height: var(--ds-text-heading-700-height-breakpoint-sm, $ds-text-heading-700-height-breakpoint-sm); - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { font-size: var(--ds-text-heading-700-size-breakpoint-md, $ds-text-heading-700-size-breakpoint-md); line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md); } - @include auro_breakpoint--lg { + + @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { font-size: var(--ds-text-heading-700-size-breakpoint-lg, $ds-text-heading-700-size-breakpoint-lg); line-height: var(--ds-text-heading-700-height-breakpoint-lg, $ds-text-heading-700-height-breakpoint-lg); } @@ -155,11 +158,12 @@ font-weight: var(--ds-text-heading-600-weight, $ds-text-heading-600-weight); line-height: var(--ds-text-heading-600-height-breakpoint-sm, $ds-text-heading-600-height-breakpoint-sm); - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { font-size: var(--ds-text-heading-600-size-breakpoint-md, $ds-text-heading-600-size-breakpoint-md); line-height: var(--ds-text-heading-600-height-breakpoint-md, $ds-text-heading-600-height-breakpoint-md); } - @include auro_breakpoint--lg { + + @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { font-size: var(--ds-text-heading-600-size-breakpoint-lg, $ds-text-heading-600-size-breakpoint-lg); line-height: var(--ds-text-heading-600-height-breakpoint-lg, $ds-text-heading-600-height-breakpoint-lg); } @@ -189,11 +193,12 @@ font-weight: var(--ds-text-heading-500-weight, $ds-text-heading-500-weight); line-height: var(--ds-text-heading-500-height-breakpoint-sm, $ds-text-heading-500-height-breakpoint-sm); - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { font-size: var(--ds-text-heading-500-size-breakpoint-md, $ds-text-heading-500-size-breakpoint-md); line-height: var(--ds-text-heading-500-height-breakpoint-md, $ds-text-heading-500-height-breakpoint-md); } - @include auro_breakpoint--lg { + + @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { font-size: var(--ds-text-heading-500-size-breakpoint-lg, $ds-text-heading-500-size-breakpoint-lg); line-height: var(--ds-text-heading-500-height-breakpoint-lg, $ds-text-heading-500-height-breakpoint-lg); } diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss index a296f0a..372562e 100644 --- a/src/componentSupport/_containedButtons.scss +++ b/src/componentSupport/_containedButtons.scss @@ -44,12 +44,12 @@ } } - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { flex-direction: row; > * { margin-bottom: 0; - margin-left: var(--dstext-body-size-default, $ds-text-body-size-default); + margin-left: var(--ds-text-body-size-default, $ds-text-body-size-default); &:first-child { margin-left: 0; diff --git a/src/componentSupport/_table.scss b/src/componentSupport/_table.scss index 246ae6b..7a74026 100644 --- a/src/componentSupport/_table.scss +++ b/src/componentSupport/_table.scss @@ -26,7 +26,7 @@ tr { &:nth-child(even) { - background-color: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100); + background-color: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default); } } @@ -36,7 +36,7 @@ font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight); } - @include auro_breakpoint--sm { + @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { display: table; width: 100%; @@ -44,7 +44,7 @@ thead { border-collapse: collapse; - border-bottom: 1px solid var(--ds-color-brand-gray-200, $ds-color-brand-gray-200); + border-bottom: 1px solid var(--ds-color-border-tertiary-default, $ds-color-border-tertiary-default); } th, diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss index e161e94..5a16c26 100644 --- a/src/componentSupport/_tablist.scss +++ b/src/componentSupport/_tablist.scss @@ -16,7 +16,7 @@ /// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist"; #{$scope}.auro_tablist { - @include auro_breakpoint--sm { + @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { overflow-y: unset; white-space: unset; diff --git a/src/elementDemoStyles/elementDemoStyles.scss b/src/elementDemoStyles/elementDemoStyles.scss index d89a3ff..27b16e7 100644 --- a/src/elementDemoStyles/elementDemoStyles.scss +++ b/src/elementDemoStyles/elementDemoStyles.scss @@ -67,12 +67,12 @@ $paragraph: true; // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #f8f8f8; + background: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default); } // !important because that libraries that inline CSS SUCK! pre { - background: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100) !important; + background: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default) !important; border: unset !important; margin-bottom: var(--ds-size-300, $ds-size-300) !important; padding-left: var(--ds-size-150, $ds-size-150) !important; @@ -103,21 +103,21 @@ code[class*="language-"], pre[class*="language-"] { } code:not(.html):not(.css):not(.js) { - color: var(--ds-color-brand-flamingo-500, $ds-color-brand-flamingo-500); + color: var(--ds-color-utility-pink-default, $ds-color-utility-pink-default); } // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= .exampleWrapper { - $stripe: #f3f3f3; - $background: var(--ds-color-base-white, $ds-color-base-white); + $stripe: var(--ds-color-container-subtle-default, $ds-color-container-subtle-default); + $background: var(--ds-color-container-primary-default, $ds-color-container-primary-default); - background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px); + background: repeating-linear-gradient(45deg, $stripe, $stripe 10px, $background 10px, $background 20px); } .exampleWrapper--ondark { - $stripe: var(--ds-color-background-darkest, $ds-color-background-darkest); - $background: var(--ds-color-background-darker, $ds-color-background-darker); + $stripe: var(--ds-color-background-primary-100-inverse, $ds-color-background-primary-100-inverse); + $background: var(--ds-color-background-primary-200-inverse, $ds-color-background-primary-200-inverse); - background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px); + background: repeating-linear-gradient(45deg, $stripe, $stripe 10px, $background 10px, $background 20px); } diff --git a/src/utilityMixins/_anchor-roleButton.scss b/src/utilityMixins/_anchor-roleButton.scss index 528fac2..ad5a680 100644 --- a/src/utilityMixins/_anchor-roleButton.scss +++ b/src/utilityMixins/_anchor-roleButton.scss @@ -28,13 +28,13 @@ $hover-color: null; @if $style == css { - $color: var(--ds-color-text-link-default, $ds-color-text-link-default); - $hover-color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default); + $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default); + $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default); $line-height: var(--ds-unitless-scale-300, $ds-unitless-scale-300); $padding: 0 var(--ds-size-200, $ds-size-200); } @else if $style == sass or $style == scss { - $color: $ds-color-text-link-default; - $hover-color: $ds-color-ui-hover-default; + $color: $ds-color-text-ui-default-default; + $hover-color: $ds-color-container-ui-primary-hover-default; $line-height: $ds-unitless-scale-300; $padding: 0 $ds-size-200; } @else { diff --git a/src/utilityMixins/_anchor-roleTab.scss b/src/utilityMixins/_anchor-roleTab.scss index ef66b45..2eaab6a 100644 --- a/src/utilityMixins/_anchor-roleTab.scss +++ b/src/utilityMixins/_anchor-roleTab.scss @@ -27,16 +27,16 @@ $isactive-color: null; @if $style == css { - $color: var(--ds-color-text-link-default, $ds-color-text-link-default); + $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default); $border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default); $padding: var(--ds-size-200, $ds-size-200, $ds-size-200, $ds-size-200); - $hover-color: var(--ds-color-ui-hover-default, $ds-color-ui-hover-default); + $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default); $isactive-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); } @else if $style == sass or $style == scss { - $color: $ds-color-text-link-default; + $color: $ds-color-text-ui-default-default; $border-color: $ds-color-border-primary-default; $padding: $ds-size-200; - $hover-color: $ds-color-ui-hover-default; + $hover-color: $ds-color-container-ui-primary-hover-default; $isactive-color: $ds-color-text-primary-default; } @else { @error 'Invalid $style option. Please use `css` or `sass`'; diff --git a/tests/breakpoint.spec.scss b/tests/breakpoint.spec.scss index d915ca6..f2d0661 100644 --- a/tests/breakpoint.spec.scss +++ b/tests/breakpoint.spec.scss @@ -8,7 +8,7 @@ @include assert { @include output { .auro_breakpoint--lg { - @include auro_breakpoint--lg { + @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { color: orange; } } @@ -30,7 +30,7 @@ @include assert { @include output { .auro_breakpoint--md { - @include auro_breakpoint--md { + @include auro_breakpoint($min: $ds-grid-breakpoint-md) { color: orange; } } @@ -52,7 +52,7 @@ @include assert { @include output { .auro_breakpoint--sm { - @include auro_breakpoint--sm { + @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { color: orange; } } diff --git a/tests/roleButton.spec.scss b/tests/roleButton.spec.scss index 479cb90..432bde5 100644 --- a/tests/roleButton.spec.scss +++ b/tests/roleButton.spec.scss @@ -17,7 +17,7 @@ display: inline-block; padding: 0 1rem; text-decoration: none; - color: #0074c8; + color: #2c67b5; border: 1px solid transparent; line-height: 3; } @@ -26,7 +26,7 @@ .auro_roleButton:hover { cursor: pointer; text-decoration: underline; - color: #054687; + color: #193d73; } } } @@ -46,7 +46,7 @@ display: inline-block; padding: 0 1rem; text-decoration: none; - color: #0074c8; + color: #2c67b5; border: 1px solid transparent; line-height: 3; } @@ -54,7 +54,7 @@ :host(:not(.is-touching)) .auro_roleButton:hover { cursor: pointer; text-decoration: underline; - color: #054687; + color: #193d73; } } } @@ -73,7 +73,7 @@ display: inline-block; padding: 0 1rem; text-decoration: none; - color: #0074c8; + color: #2c67b5; border: 1px solid transparent; line-height: 3; } @@ -82,7 +82,7 @@ .auro_roleButton:hover { cursor: pointer; text-decoration: underline; - color: #054687; + color: #193d73; } } } @@ -102,7 +102,7 @@ display: inline-block; padding: 0 1rem; text-decoration: none; - color: #0074c8; + color: #2c67b5; border: 1px solid transparent; line-height: 3; } @@ -110,7 +110,7 @@ :host(:not(.is-touching)) .auro_roleButton:hover { cursor: pointer; text-decoration: underline; - color: #054687; + color: #193d73; } } } @@ -129,7 +129,7 @@ display: inline-block; padding: 0 var(--ds-size-200, 1rem); text-decoration: none; - color: var(--ds-color-text-link-default, #0074c8); + color: var(--ds-color-text-ui-default-default, #2c67b5); border: 1px solid transparent; line-height: var(--ds-unitless-scale-300, 3); } @@ -138,7 +138,7 @@ .auro_roleButton:hover { cursor: pointer; text-decoration: underline; - color: var(--ds-color-ui-hover-default, #054687); + color: var(--ds-color-container-ui-primary-hover-default, #193d73); } } } @@ -158,7 +158,7 @@ display: inline-block; padding: 0 var(--ds-size-200, 1rem); text-decoration: none; - color: var(--ds-color-text-link-default, #0074c8); + color: var(--ds-color-text-ui-default-default, #2c67b5); border: 1px solid transparent; line-height: var(--ds-unitless-scale-300, 3); } @@ -166,7 +166,7 @@ :host(:not(.is-touching)) .auro_roleButton:hover { cursor: pointer; text-decoration: underline; - color: var(--ds-color-ui-hover-default, #054687); + color: var(--ds-color-container-ui-primary-hover-default, #193d73); } } } diff --git a/tests/roleTab.spec.scss b/tests/roleTab.spec.scss index 5440fb7..c2ba9da 100644 --- a/tests/roleTab.spec.scss +++ b/tests/roleTab.spec.scss @@ -15,7 +15,7 @@ @include expect { .auro_roleTab { padding: 1rem; - color: #0074c8; + color: #2c67b5; border-width: 0 0 1px; border-style: solid; border-color: #585e67; @@ -24,7 +24,7 @@ .auro_roleTab:not(.is-touching):hover { cursor: pointer; text-decoration: none; - color: #054687; + color: #193d73; border-width: 0 0 2px; border-color: currentColor; } @@ -51,7 +51,7 @@ .hyperlink--tab { padding: 1rem; - color: #0074c8; + color: #2c67b5; border-width: 0 0 1px; border-style: solid; border-color: #585e67; @@ -61,7 +61,7 @@ cursor: pointer; text-decoration: none; - color: #054687; + color: #193d73; border-width: 0 0 2px; border-color: currentColor; } @@ -90,7 +90,7 @@ .auro_roleTab { padding: 1rem; - color: #0074c8; + color: #2c67b5; border-width: 0 0 1px; border-style: solid; border-color: #585e67;; @@ -100,7 +100,7 @@ cursor: pointer; text-decoration: none; - color: #054687; + color: #193d73; border-width: 0 0 2px; border-color: currentColor; } @@ -128,7 +128,7 @@ @include expect($selector: false) { .hyperlink--tab { padding: 1rem; - color: #0074c8; + color: #2c67b5; border-width: 0 0 1px; border-style: solid; border-color: #585e67;; @@ -137,7 +137,7 @@ :host(:not(.is-touching)) .hyperlink--tab:hover { cursor: pointer; text-decoration: none; - color: #054687; + color: #193d73; border-width: 0 0 2px; border-color: currentColor; } @@ -164,7 +164,7 @@ @include expect { .auro_roleTab { padding: 1rem; - color: var(--ds-color-text-link-default, #0074c8); + color: var(--ds-color-text-ui-default-default, #2c67b5); border-width: 0 0 1px; border-style: solid; border-color: var(--ds-color-border-primary-default, #585e67); @@ -173,7 +173,7 @@ .auro_roleTab:not(.is-touching):hover { cursor: pointer; text-decoration: none; - color: var(--ds-color-ui-hover-default, #054687); + color: var(--ds-color-container-ui-primary-hover-default, #193d73); border-width: 0 0 2px; border-color: currentColor; } @@ -200,7 +200,7 @@ @include expect($selector: false) { .hyperlink--tab { padding: 1rem; - color: var(--ds-color-text-link-default, #0074c8); + color: var(--ds-color-text-ui-default-default, #2c67b5); border-width: 0 0 1px; border-style: solid; border-color: var(--ds-color-border-primary-default, #585e67); @@ -209,7 +209,7 @@ :host(:not(.is-touching)) .hyperlink--tab:hover { cursor: pointer; text-decoration: none; - color: var(--ds-color-ui-hover-default, #054687); + color: var(--ds-color-container-ui-primary-hover-default, #193d73); border-width: 0 0 2px; border-color: currentColor; }