@corto-ai/gds-angular 2.1.1 → 2.1.2

package/README.md

@@ -14,6 +14,75 @@ Developers can browse component examples in the Storybook environment that match
 - `test` packages: <https://storybook.test.docorto.ai/>
 - `latest` packages: <https://storybook.docorto.ai/>
 
+## Implementation Recommendations
+
+### Node module (exact version)
+
+When using this module with an exact version pinned in your `package.json` file, we recommend leveraging our CDN by implementing the same version of the stylesheet listed below in the "CDN Assets" section.
+
+### Node module (non-exact version)
+
+If you plan to use a non-exact version of this module (`latest`, `^2.1.1`, etc.), we recommend that you implement one of the stylesheets provided in this package. This will help keep your component and stylesheet versions synced.
+
+### Stylesheet-only
+
+If you plan to only use the stylesheet/fonts for this library, we recommend implementing a version of the CDN stylesheets listed below in the "CDN Assets" section.
+
+## CDN Assets
+
+Version: 2.1.2
+
+- All brands combined: <https://cdn.cortoaws.com/style/gds/2.1.2/all.css>
+- Acctivity: <https://cdn.cortoaws.com/style/gds/2.1.2/acctivity.css>
+- CORTO: <https://cdn.cortoaws.com/style/gds/2.1.2/corto.css>
+- LawY: <https://cdn.cortoaws.com/style/gds/2.1.2/lawy.css>
+- LEAP: <https://cdn.cortoaws.com/style/gds/2.1.2/leap.css>
+
+Version: 2.1.1
+
+- All brands combined: <https://cdn.cortoaws.com/style/gds/2.1.1/all.css>
+- Acctivity: <https://cdn.cortoaws.com/style/gds/2.1.1/acctivity.css>
+- CORTO: <https://cdn.cortoaws.com/style/gds/2.1.1/corto.css>
+- LawY: <https://cdn.cortoaws.com/style/gds/2.1.1/lawy.css>
+- LEAP: <https://cdn.cortoaws.com/style/gds/2.1.1/leap.css>
+
+## Library `@layer`s
+
+GDS uses CSS `@layer`s to define priority of styles without requiring the `!important` tag, or adding specificity to override other styles. We currently use the following `@layer`s. These are subject to change.
+
+```
+@layer            // defined from lowest to highest priority.
+
+  reset,          // reset styles
+  variable,       // GDS/brand variables
+  third-party,    // third-party library styles
+  cdk-overlay,    // pre-defined layer used by the CDK library
+  base,           // global styles (fonts, animations, etc.)
+  design-system,  // helper classes
+  utility,        // utility override classes
+  view;           // application view/component styles
+```
+
+Feel free to add your own styles to an existing layer by encapsulating them in a `@layer` block:
+
+```
+@layer view {
+  .your-class {
+    ...
+  }
+
+  .another-class {
+    ...
+  }
+}
+```
+
+You can also define your own `@layer`s by adding them before or after the GDS `@layer` block. `@layer`s are registered in the order they appear in stylesheet(s).
+
+Styles that are not part of a `@layer` have higher priority than classes/styles defined in `@layer`s.
+
+For more information, visit <http://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer>
+
 ## Maintenance
 
 This library is maintained by CORTO and published as part of the regular package release workflow.