diff --git a/.husky/pre-commit b/.husky/pre-commit index 610c2a5..72c4429 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - npm test 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..36fa945 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,20 +1,20 @@ { "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", - "@commitlint/cli": "^19.3.0", + "@aurodesignsystem/design-tokens": "^4.9.1", + "@commitlint/cli": "^19.4.0", "@commitlint/config-conventional": "^19.2.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.0", @@ -23,7 +23,7 @@ "concat": "^1.0.3", "copyfiles": "^2.4.1", "glob": "^11.0.0", - "husky": "^9.1.2", + "husky": "^9.1.5", "jest": "^29.7.0", "live-server": "^1.2.1", "nodemon": "^3.1.4", @@ -33,7 +33,7 @@ "sass-lint": "^1.13.1", "sass-true": ">=6.1.0", "sassdoc": "^2.7.3", - "semantic-release": "^23.0.8", + "semantic-release": "^24.1.0", "stylelint": ">=13.13.1", "stylelint-config-recommended": ">=5.0.0", "stylelint-config-standard": ">=22.0.0" @@ -42,7 +42,7 @@ "node": "^18 || ^20" }, "peerDependencies": { - "@aurodesignsystem/design-tokens": "^4.1.1", + "@aurodesignsystem/design-tokens": "^4.9.1", "sass": "^1.42.1" } }, @@ -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": { @@ -651,15 +651,15 @@ } }, "node_modules/@commitlint/cli": { - "version": "19.3.0", - "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-19.3.0.tgz", - "integrity": "sha512-LgYWOwuDR7BSTQ9OLZ12m7F/qhNY+NpAyPBgo4YNMkACE7lGuUnuQq1yi9hz1KA4+3VqpOYl8H1rY/LYK43v7g==", + "version": "19.4.0", + "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-19.4.0.tgz", + "integrity": "sha512-sJX4J9UioVwZHq7JWM9tjT5bgWYaIN3rC4FP7YwfEwBYiIO+wMyRttRvQLNkow0vCdM0D67r9NEWU0Ui03I4Eg==", "dev": true, "dependencies": { "@commitlint/format": "^19.3.0", "@commitlint/lint": "^19.2.2", - "@commitlint/load": "^19.2.0", - "@commitlint/read": "^19.2.1", + "@commitlint/load": "^19.4.0", + "@commitlint/read": "^19.4.0", "@commitlint/types": "^19.0.3", "execa": "^8.0.1", "yargs": "^17.0.0" @@ -899,9 +899,9 @@ } }, "node_modules/@commitlint/load": { - "version": "19.2.0", - "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-19.2.0.tgz", - "integrity": "sha512-XvxxLJTKqZojCxaBQ7u92qQLFMMZc4+p9qrIq/9kJDy8DOrEa7P1yx7Tjdc2u2JxIalqT4KOGraVgCE7eCYJyQ==", + "version": "19.4.0", + "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-19.4.0.tgz", + "integrity": "sha512-I4lCWaEZYQJ1y+Y+gdvbGAx9pYPavqZAZ3/7/8BpWh+QjscAn8AjsUpLV2PycBsEx7gupq5gM4BViV9xwTIJuw==", "dev": true, "dependencies": { "@commitlint/config-validator": "^19.0.3", @@ -943,9 +943,9 @@ } }, "node_modules/@commitlint/read": { - "version": "19.2.1", - "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-19.2.1.tgz", - "integrity": "sha512-qETc4+PL0EUv7Q36lJbPG+NJiBOGg7SSC7B5BsPWOmei+Dyif80ErfWQ0qXoW9oCh7GTpTNRoaVhiI8RbhuaNw==", + "version": "19.4.0", + "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-19.4.0.tgz", + "integrity": "sha512-r95jLOEZzKDakXtnQub+zR3xjdnrl2XzerPwm7ch1/cc5JGq04tyaNpa6ty0CRCWdVrk4CZHhqHozb8yZwy2+g==", "dev": true, "dependencies": { "@commitlint/top-level": "^19.0.0", @@ -2297,14 +2297,15 @@ } }, "node_modules/@semantic-release/commit-analyzer": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-12.0.0.tgz", - "integrity": "sha512-qG+md5gdes+xa8zP7lIo1fWE17zRdO8yMCaxh9lyL65TQleoSv8WHHOqRURfghTytUh+NpkSyBprQ5hrkxOKVQ==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-13.0.0.tgz", + "integrity": "sha512-KtXWczvTAB1ZFZ6B4O+w8HkfYm/OgQb1dUGNFZtDgQ0csggrmkq8sTxhd+lwGF8kMb59/RnG9o4Tn7M/I8dQ9Q==", "dev": true, "dependencies": { - "conventional-changelog-angular": "^7.0.0", - "conventional-commits-filter": "^4.0.0", - "conventional-commits-parser": "^5.0.0", + "conventional-changelog-angular": "^8.0.0", + "conventional-changelog-writer": "^8.0.0", + "conventional-commits-filter": "^5.0.0", + "conventional-commits-parser": "^6.0.0", "debug": "^4.0.0", "import-from-esm": "^1.0.3", "lodash-es": "^4.17.21", @@ -2317,6 +2318,45 @@ "semantic-release": ">=20.1.0" } }, + "node_modules/@semantic-release/commit-analyzer/node_modules/conventional-changelog-angular": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-8.0.0.tgz", + "integrity": "sha512-CLf+zr6St0wIxos4bmaKHRXWAcsCXrJU6F4VdNDrGRK3B8LDLKoX3zuMV5GhtbGkVR/LohZ6MT6im43vZLSjmA==", + "dev": true, + "dependencies": { + "compare-func": "^2.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@semantic-release/commit-analyzer/node_modules/conventional-commits-parser": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.0.0.tgz", + "integrity": "sha512-TbsINLp48XeMXR8EvGjTnKGsZqBemisPoyWESlpRyR8lif0lcwzqz+NMtYSj1ooF/WYjSuu7wX0CtdeeMEQAmA==", + "dev": true, + "dependencies": { + "meow": "^13.0.0" + }, + "bin": { + "conventional-commits-parser": "dist/cli/index.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@semantic-release/commit-analyzer/node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@semantic-release/error": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-3.0.0.tgz", @@ -2699,21 +2739,21 @@ } }, "node_modules/@semantic-release/release-notes-generator": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@semantic-release/release-notes-generator/-/release-notes-generator-13.0.0.tgz", - "integrity": "sha512-LEeZWb340keMYuREMyxrODPXJJ0JOL8D/mCl74B4LdzbxhtXV2LrPN2QBEcGJrlQhoqLO0RhxQb6masHytKw+A==", + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/@semantic-release/release-notes-generator/-/release-notes-generator-14.0.1.tgz", + "integrity": "sha512-K0w+5220TM4HZTthE5dDpIuFrnkN1NfTGPidJFm04ULT1DEZ9WG89VNXN7F0c+6nMEpWgqmPvb7vY7JkB2jyyA==", "dev": true, "dependencies": { - "conventional-changelog-angular": "^7.0.0", - "conventional-changelog-writer": "^7.0.0", - "conventional-commits-filter": "^4.0.0", - "conventional-commits-parser": "^5.0.0", + "conventional-changelog-angular": "^8.0.0", + "conventional-changelog-writer": "^8.0.0", + "conventional-commits-filter": "^5.0.0", + "conventional-commits-parser": "^6.0.0", "debug": "^4.0.0", "get-stream": "^7.0.0", "import-from-esm": "^1.0.3", "into-stream": "^7.0.0", "lodash-es": "^4.17.21", - "read-pkg-up": "^11.0.0" + "read-package-up": "^11.0.0" }, "engines": { "node": ">=20.8.1" @@ -2722,6 +2762,33 @@ "semantic-release": ">=20.1.0" } }, + "node_modules/@semantic-release/release-notes-generator/node_modules/conventional-changelog-angular": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-8.0.0.tgz", + "integrity": "sha512-CLf+zr6St0wIxos4bmaKHRXWAcsCXrJU6F4VdNDrGRK3B8LDLKoX3zuMV5GhtbGkVR/LohZ6MT6im43vZLSjmA==", + "dev": true, + "dependencies": { + "compare-func": "^2.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@semantic-release/release-notes-generator/node_modules/conventional-commits-parser": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.0.0.tgz", + "integrity": "sha512-TbsINLp48XeMXR8EvGjTnKGsZqBemisPoyWESlpRyR8lif0lcwzqz+NMtYSj1ooF/WYjSuu7wX0CtdeeMEQAmA==", + "dev": true, + "dependencies": { + "meow": "^13.0.0" + }, + "bin": { + "conventional-commits-parser": "dist/cli/index.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@semantic-release/release-notes-generator/node_modules/get-stream": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-7.0.1.tgz", @@ -2734,6 +2801,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@semantic-release/release-notes-generator/node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -2945,6 +3024,12 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "dev": true }, + "node_modules/@types/semver": { + "version": "7.5.8", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", + "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==", + "dev": true + }, "node_modules/@types/stack-utils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", @@ -5198,32 +5283,43 @@ } }, "node_modules/conventional-changelog-writer": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-7.0.1.tgz", - "integrity": "sha512-Uo+R9neH3r/foIvQ0MKcsXkX642hdm9odUp7TqgFS7BsalTcjzRlIfWZrZR1gbxOozKucaKt5KAbjW8J8xRSmA==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-8.0.0.tgz", + "integrity": "sha512-TQcoYGRatlAnT2qEWDON/XSfnVG38JzA7E0wcGScu7RElQBkg9WWgZd1peCWFcWDh1xfb2CfsrcvOn1bbSzztA==", "dev": true, "dependencies": { - "conventional-commits-filter": "^4.0.0", + "@types/semver": "^7.5.5", + "conventional-commits-filter": "^5.0.0", "handlebars": "^4.7.7", - "json-stringify-safe": "^5.0.1", - "meow": "^12.0.1", - "semver": "^7.5.2", - "split2": "^4.0.0" + "meow": "^13.0.0", + "semver": "^7.5.2" }, "bin": { - "conventional-changelog-writer": "cli.mjs" + "conventional-changelog-writer": "dist/cli/index.js" }, "engines": { - "node": ">=16" + "node": ">=18" + } + }, + "node_modules/conventional-changelog-writer/node_modules/meow": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/conventional-commits-filter": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-4.0.0.tgz", - "integrity": "sha512-rnpnibcSOdFcdclpFwWa+pPlZJhXE7l+XK04zxhbWrhgpR96h33QLz8hITTXbcYICxVr3HZFtbtUAQ+4LdBo9A==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-5.0.0.tgz", + "integrity": "sha512-tQMagCOC59EVgNZcC5zl7XqO30Wki9i9J3acbUvkaosCT6JX3EeFwJD7Qqp4MCikRnzS18WXV3BLIQ66ytu6+Q==", "dev": true, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/conventional-commits-parser": { @@ -8572,9 +8668,9 @@ } }, "node_modules/husky": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.2.tgz", - "integrity": "sha512-1/aDMXZdhr1VdJJTLt6e7BipM0Jd9qkpubPiIplon1WmCeOy3nnzsCMeBqS9AsL5ioonl8F8y/F2CLOmk19/Pw==", + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.5.tgz", + "integrity": "sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==", "dev": true, "bin": { "husky": "bin.js" @@ -8671,9 +8767,9 @@ } }, "node_modules/import-meta-resolve": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz", - "integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", + "integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==", "dev": true, "funding": { "type": "github", @@ -10895,9 +10991,9 @@ } }, "node_modules/jiti": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz", - "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==", + "version": "1.21.6", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", + "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==", "dev": true, "bin": { "jiti": "bin/jiti.js" @@ -10987,12 +11083,6 @@ "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==", "dev": true }, - "node_modules/json-stringify-safe": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", - "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==", - "dev": true - }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -15692,9 +15782,9 @@ } }, "node_modules/p-locate/node_modules/yocto-queue": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz", - "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz", + "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==", "dev": true, "engines": { "node": ">=12.20" @@ -16598,36 +16688,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/read-pkg-up": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-11.0.0.tgz", - "integrity": "sha512-LOVbvF1Q0SZdjClSefZ0Nz5z8u+tIE7mV5NibzmE9VYmDe9CaBbAVtz1veOSZbofrdsilxuDAYnFenukZVp8/Q==", - "deprecated": "Renamed to read-package-up", - "dev": true, - "dependencies": { - "find-up-simple": "^1.0.0", - "read-pkg": "^9.0.0", - "type-fest": "^4.6.0" - }, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/read-pkg-up/node_modules/type-fest": { - "version": "4.18.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.18.2.tgz", - "integrity": "sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==", - "dev": true, - "engines": { - "node": ">=16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/read-pkg/node_modules/parse-json": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-8.1.0.tgz", @@ -18357,21 +18417,21 @@ } }, "node_modules/semantic-release": { - "version": "23.0.8", - "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-23.0.8.tgz", - "integrity": "sha512-yZkuWcTTfh5h/DrR4Q4QvJSARJdb6wjwn/sN0qKMYEkvwaVFek8YWfrgtL8oWaRdl0fLte0Y1wWMzLbwoaII1g==", + "version": "24.1.0", + "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-24.1.0.tgz", + "integrity": "sha512-FwaE2hKDHQn9G6GA7xmqsc9WnsjaFD/ppLM5PUg56Do9oKSCf+vH6cPeb3hEBV/m06n8Sh9vbVqPjHu/1onzQw==", "dev": true, "dependencies": { - "@semantic-release/commit-analyzer": "^12.0.0", + "@semantic-release/commit-analyzer": "^13.0.0-beta.1", "@semantic-release/error": "^4.0.0", "@semantic-release/github": "^10.0.0", "@semantic-release/npm": "^12.0.0", - "@semantic-release/release-notes-generator": "^13.0.0", + "@semantic-release/release-notes-generator": "^14.0.0-beta.1", "aggregate-error": "^5.0.0", "cosmiconfig": "^9.0.0", "debug": "^4.0.0", "env-ci": "^11.0.0", - "execa": "^8.0.0", + "execa": "^9.0.0", "figures": "^6.0.0", "find-versions": "^6.0.0", "get-stream": "^6.0.0", @@ -18408,6 +18468,18 @@ "node": ">=18" } }, + "node_modules/semantic-release/node_modules/@sindresorhus/merge-streams": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz", + "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/semantic-release/node_modules/aggregate-error": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-5.0.0.tgz", @@ -18467,44 +18539,51 @@ } }, "node_modules/semantic-release/node_modules/execa": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz", - "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==", + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-9.3.1.tgz", + "integrity": "sha512-gdhefCCNy/8tpH/2+ajP9IQc14vXchNdd0weyzSJEFURhRMGncQ+zKFxwjAufIewPEJm9BPOaJnvg2UtlH2gPQ==", "dev": true, "dependencies": { + "@sindresorhus/merge-streams": "^4.0.0", "cross-spawn": "^7.0.3", - "get-stream": "^8.0.1", - "human-signals": "^5.0.0", - "is-stream": "^3.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^5.1.0", - "onetime": "^6.0.0", + "figures": "^6.1.0", + "get-stream": "^9.0.0", + "human-signals": "^8.0.0", + "is-plain-obj": "^4.1.0", + "is-stream": "^4.0.1", + "npm-run-path": "^5.2.0", + "pretty-ms": "^9.0.0", "signal-exit": "^4.1.0", - "strip-final-newline": "^3.0.0" + "strip-final-newline": "^4.0.0", + "yoctocolors": "^2.0.0" }, "engines": { - "node": ">=16.17" + "node": "^18.19.0 || >=20.5.0" }, "funding": { "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, "node_modules/semantic-release/node_modules/execa/node_modules/get-stream": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", - "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz", + "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==", "dev": true, + "dependencies": { + "@sec-ant/readable-stream": "^0.4.1", + "is-stream": "^4.0.1" + }, "engines": { - "node": ">=16" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/semantic-release/node_modules/figures": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/figures/-/figures-6.0.1.tgz", - "integrity": "sha512-0oY/olScYD4IhQ8u//gCPA4F3mlTn2dacYmiDm/mbDQvpmLjV4uH+zhsQ5IyXRyvqkvtUkXkNdGvg5OFJTCsuQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz", + "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==", "dev": true, "dependencies": { "is-unicode-supported": "^2.0.0" @@ -18517,12 +18596,12 @@ } }, "node_modules/semantic-release/node_modules/human-signals": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz", - "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.0.tgz", + "integrity": "sha512-/1/GPCpDUCCYwlERiYjxoczfP0zfvZMU/OWgQPMya9AbAE24vseigFdhAMObpc8Q4lc/kjutPfUddDYyAmejnA==", "dev": true, "engines": { - "node": ">=16.17.0" + "node": ">=18.18.0" } }, "node_modules/semantic-release/node_modules/indent-string": { @@ -18537,13 +18616,25 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/semantic-release/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/semantic-release/node_modules/is-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz", - "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz", + "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==", "dev": true, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -18593,22 +18684,10 @@ "marked": ">=1 <13" } }, - "node_modules/semantic-release/node_modules/mimic-fn": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", - "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/semantic-release/node_modules/npm-run-path": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz", - "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", "dev": true, "dependencies": { "path-key": "^4.0.0" @@ -18620,21 +18699,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/semantic-release/node_modules/onetime": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz", - "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==", - "dev": true, - "dependencies": { - "mimic-fn": "^4.0.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/semantic-release/node_modules/p-reduce": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-3.0.0.tgz", @@ -18672,12 +18736,12 @@ } }, "node_modules/semantic-release/node_modules/strip-final-newline": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz", - "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz", + "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==", "dev": true, "engines": { - "node": ">=12" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" diff --git a/package.json b/package.json index 328897e..cdcf428 100644 --- a/package.json +++ b/package.json @@ -13,15 +13,15 @@ "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", - "@commitlint/cli": "^19.3.0", + "@aurodesignsystem/design-tokens": "^4.9.1", + "@commitlint/cli": "^19.4.0", "@commitlint/config-conventional": "^19.2.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.0", @@ -30,7 +30,7 @@ "concat": "^1.0.3", "copyfiles": "^2.4.1", "glob": "^11.0.0", - "husky": "^9.1.2", + "husky": "^9.1.5", "jest": "^29.7.0", "live-server": "^1.2.1", "nodemon": "^3.1.4", @@ -40,7 +40,7 @@ "sass-lint": "^1.13.1", "sass-true": ">=6.1.0", "sassdoc": "^2.7.3", - "semantic-release": "^23.0.8", + "semantic-release": "^24.1.0", "stylelint": ">=13.13.1", "stylelint-config-recommended": ">=5.0.0", "stylelint-config-standard": ">=22.0.0" 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; }