@aurodesignsystem/webcorestylesheets
Advanced tools
Comparing version 5.1.1 to 5.1.2
# Semantic Release Automated Changelog | ||
## [5.1.2](https://github.com/AlaskaAirlines/WebCoreStyleSheets/compare/v5.1.1...v5.1.2) (2024-07-25) | ||
### Performance Improvements | ||
* update repo dependencies ([a63bb6d](https://github.com/AlaskaAirlines/WebCoreStyleSheets/commit/a63bb6dacf1fdb8a4c5f8b85f6815a9cb8855f88)) | ||
## [5.1.1](https://github.com/AlaskaAirlines/WebCoreStyleSheets/compare/v5.1.0...v5.1.1) (2024-05-08) | ||
@@ -4,0 +11,0 @@ |
{ | ||
"name": "@aurodesignsystem/webcorestylesheets", | ||
"description": "Auro core foundation Sass UI Kit", | ||
"version": "5.1.1", | ||
"version": "5.1.2", | ||
"author": "Product design and research", | ||
@@ -23,3 +23,3 @@ "main": "src/", | ||
"devDependencies": { | ||
"@aurodesignsystem/design-tokens": "^4.3.0", | ||
"@aurodesignsystem/design-tokens": "^4.9.0", | ||
"@commitlint/cli": "^19.3.0", | ||
@@ -29,14 +29,14 @@ "@commitlint/config-conventional": "^19.2.2", | ||
"@semantic-release/git": "^10.0.0", | ||
"@semantic-release/npm": "^12.0.0", | ||
"@semantic-release/npm": "^12.0.1", | ||
"auto-changelog": "^2.3.0", | ||
"concat": "^1.0.3", | ||
"copyfiles": "^2.4.1", | ||
"glob": "^10.3.12", | ||
"husky": "^9.0.11", | ||
"glob": "^11.0.0", | ||
"husky": "^9.1.2", | ||
"jest": "^29.7.0", | ||
"live-server": "^1.2.1", | ||
"nodemon": "^3.1.0", | ||
"nodemon": "^3.1.4", | ||
"npm-run-all": "^4.1.5", | ||
"replace-in-file": "^7.1.0", | ||
"sass": "^1.77.0", | ||
"replace-in-file": "^7.2.0", | ||
"sass": "^1.77.8", | ||
"sass-lint": "^1.13.1", | ||
@@ -76,3 +76,11 @@ "sass-true": ">=6.1.0", | ||
"release": { | ||
"branch": "master", | ||
"branches": [ | ||
{ | ||
"name": "master" | ||
}, | ||
{ | ||
"name": "beta", | ||
"prerelease": true | ||
} | ||
], | ||
"plugins": [ | ||
@@ -79,0 +87,0 @@ "@semantic-release/commit-analyzer", |
@@ -29,2 +29,17 @@ # WC Style Sheets | ||
### Pre-processed bundled resources | ||
At a limited scale, some files have been pre-processed to CSS so that it can be delivered via CDN and used in environments where this rendered resource is required. | ||
**API Note**: First supporting version `v2.9.0` | ||
**NOTICE!** Use `@latest` **at your own risk**. This will not restrict updates and will allow instant access to **MAJOR** releases that will contain **BREAKING CHANGES**. You have been warned! | ||
| resource | CDN URL | | ||
|---|--- | ||
| essentials.scss<br>fonts.scss|[https://cdn.jsdelivr.net/npm/@aurodesignsystem/<br>webcorestylesheets@latest/dist/bundled/essentials.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css)| | ||
| focus-visible.scss<br>essentials.scss<br>fonts.scss|[https://cdn.jsdelivr.net/npm/@aurodesignsystem/<br>webcorestylesheets@latest/dist/bundled/essentials+fv.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials+fv.css)| | ||
### Using the files in Sass from npm resource | ||
```bash | ||
@@ -34,21 +49,10 @@ $ npm i @aurodesignsystem/webcorestylesheets | ||
### Using the files in Sass | ||
There are no core files to import, rather WCSS is an à la carte solution allowing for users to import what they want and when they want it. In most cases you can simply import the Sass file as illustrated below: | ||
```scss | ||
@import "~@aurodesignsystem/webcorestylesheets/src/ ... " | ||
@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... " | ||
``` | ||
### Tokens Dependency | ||
### Installing the essentials | ||
WCSS uses Sass and has a dependency on the `SCSSVariables.scss` file from [Design Tokens](https://github.com/AlaskaAirlines/AuroDesignTokens) package. This reference needs to be imported before any reference of a WCSS partial. | ||
```scss | ||
@import "~@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; | ||
@import "~@aurodesignsystem/webcorestylesheets/src/ ... "; | ||
``` | ||
### Install the essentials | ||
While WCSS is an à la carte solution, there are things that should be considered when adding WCSS to your project. For example, if the project has little or no legacy CSS, it is suggested to set the following foundation, in this order: | ||
@@ -58,18 +62,18 @@ | ||
// baseline design tokens as Sass variables | ||
@import "~@aurodesignsystem/design-tokens/src/tokens/SCSSVariables"; | ||
@import "./../node_modules/@aurodesignsystem/design-tokens/src/tokens/SCSSVariables"; | ||
// globally add the mixins so that any future reference will be addressed | ||
@import '~@aurodesignsystem/webcorestylesheets/src/breakpoints'; | ||
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; | ||
// it's typically best practice to load the @font-face rules prior to any reference of the custom web fonts | ||
@import '~@aurodesignsystem/webcorestylesheets/src/fonts'; | ||
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/fonts'; | ||
// set a baseline browser normalize | ||
@import '~@aurodesignsystem/webcorestylesheets/src/normalize'; | ||
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/normalize'; | ||
// opt-in support for `:focus-visible` accessibility feature | ||
@import '~@aurodesignsystem/webcorestylesheets/src/tokens/focus-visible'; | ||
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/focus-visible'; | ||
// essentials setup baseline primitive selectors for any UI development | ||
@import '~@aurodesignsystem/webcorestylesheets/src/tokens/essentials'; | ||
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials'; | ||
``` | ||
@@ -79,24 +83,23 @@ | ||
### Web font dependency | ||
### Tokens Dependency | ||
WC style sheets has full support for Auro's web fonts, ASCircular. When importing `~@aurodesignsystem/webcorestylesheets/src/fonts` this will import the (3) Auro web fonts that are loaded from our CDN for `light`, `medium`, and `book` weights. | ||
WCSS uses Sass and has a dependency on the `SCSSVariables.scss` file from [Design Tokens](https://github.com/AlaskaAirlines/AuroDesignTokens) package. This reference needs to be imported before any reference of a WCSS partial. | ||
Any references to `ASCircularWeb-Book`, `ASCircularWeb-Medium`, or `ASCircularWeb-Light` would be considered redundant and you should remove those legacy references. | ||
```scss | ||
@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; | ||
@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... "; | ||
``` | ||
Any references to `ASCircularWeb-Bold` or any other `ASCircularWeb-` style font family is not supported and these references are considered fully deprecated. | ||
### Web font dependency | ||
WC style sheets has full support for Auro's web fonts, ASCircular. When importing the following code, this will import the (3) Auro web fonts that are loaded from our CDN for `light`, `medium`, and `book` weights. | ||
## Pre-processed bundled resources | ||
```scss | ||
@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/fonts" | ||
``` | ||
At a limited scale, some files have been pre-processed to CSS so that it can be delivered via CDN and used in environments where this rendered resource is required. | ||
Any references to `ASCircularWeb-Book`, `ASCircularWeb-Medium`, or `ASCircularWeb-Light` would be considered redundant and you should remove those legacy references. | ||
**API Note**: First supporting version `v2.9.0` | ||
Any references to `ASCircularWeb-Bold` or any other `ASCircularWeb-` style font family is not supported and these references are considered fully deprecated. | ||
**NOTICE!** Use `@latest` at your own risk. This will not restrict updates and will allow instant access to MAJOR releases that will contain BREAKING CHANGES. You have been warned! | ||
| resource | CDN URL | | ||
|---|--- | ||
| essentials.scss<br>fonts.scss|[https://cdn.jsdelivr.net/npm/@aurodesignsystem/<br>webcorestylesheets@latest/dist/bundled/essentials.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css)| | ||
| focus-visible.scss<br>essentials.scss<br>fonts.scss|[https://cdn.jsdelivr.net/npm/@aurodesignsystem/<br>webcorestylesheets@latest/dist/bundled/essentials+fv.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials+fv.css)| | ||
## Development | ||
@@ -103,0 +106,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
244759
110