feat(themes): support component themes #64

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "csspart",
+    "labelledby"
+  ]
+}

README.md

@@ -58,15 +58,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->

package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@aurodesignsystem/auro-library": "^2.6.0",
-    "@aurodesignsystem/design-tokens": "^4.7.0",
+    "@aurodesignsystem/design-tokens": "^4.9.0",
     "@aurodesignsystem/eslint-config": "^1.3.1",
     "@aurodesignsystem/webcorestylesheets": "^5.1.1",
     "@commitlint/cli": "^19.3.0",
@@ -39,7 +39,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^12.0.1",
-    "@web/dev-server": "^0.4.5",
+    "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.18.2",
     "autoprefixer": "^10.4.19",
     "compression": "^1.7.4",
@@ -48,26 +48,26 @@
     "copyfiles": "^2.4.1",
     "core-js": "^3.37.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-jsdoc": "^48.2.12",
-    "husky": "^9.0.11",
+    "eslint-plugin-jsdoc": "^48.7.0",
+    "husky": "^9.1.0",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
     "nodemon": "^3.1.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-discard-comments": "^7.0.1",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^4.18.0",
+    "rollup": "^4.18.1",
     "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
     "semantic-release": "^24.0.0",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.7.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.3.2",
-    "typescript": "^5.5.2",
+    "stylelint-scss": "^6.4.1",
+    "typescript": "^5.5.3",
     "wc-sass-render": "^1.4.0",
     "web-component-analyzer": "^2.0.0",
     "whatwg-fetch": "^3.6.20",

src/auro-card.js

@@ -10,6 +10,8 @@ import { LitElement, html } from "lit";
 // Import touch detection lib
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styleCss from "./style-css.js";
+import tokensCss from "./tokens-css.js";
+import colorCss from "./color-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -44,7 +46,11 @@ export class AuroCard extends LitElement {
   }
 
   static get styles() {
-    return [styleCss];
+    return [
+      styleCss,
+      tokensCss,
+      colorCss
+    ];
   }
 
   static get properties() {

src/color.scss

@@ -0,0 +1,29 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable order/properties-order, scss/double-slash-comment-whitespace-inside */
+
+// Import Auro tokens
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+
+// Component: card
+
+:host([border]) {
+  border-color: var(--ds-auro-card-border-color);
+}
+
+// Navigation Card
+
+:host([href])  {
+  auro-hyperlink {
+    outline-color: var(--ds-auro-card-link-border-color);
+    color: inherit;
+
+    &:focus {
+      --ds-auro-card-link-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+    }
+  }
+}

src/style.scss

@@ -68,7 +68,8 @@
 }
 
 :host([border]) {
-  border: 1px solid var(--ds-color-border-divider-default, $ds-color-border-divider-default);
+  border-width: 1px;
+  border-style: solid;
   border-radius: var(--ds-border-radius, $ds-border-radius);
   overflow: hidden;
 }
@@ -95,12 +96,16 @@
     }
 
     &:focus {
-      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
+      outline-width: 1px;
+      outline-style: solid;
       border-radius: var(--ds-border-radius, $ds-border-radius);
       color: inherit;
     }
 
     &:hover {
+      outline-width: 1px;
+      outline-style: solid;
+      outline-offset: -1px;
       box-shadow: var(--ds-elevation-200, $ds-elevation-100);
       color: inherit;
     }

src/tokens.scss

@@ -0,0 +1,6 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-card-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-card-link-border-color: transparent;
+}