perf: remove color stylesheet

AlaskaAirlines · Jul 23, 2024 · 0afb095 · 0afb095
1 parent bdd2e5e
commit 0afb095
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 35 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/husky.sh"
-
 npx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all preCommit test linters postinstall
diff --git a/src/auro-background.js b/src/auro-background.js
@@ -7,7 +7,6 @@
 import { LitElement, html } from "lit";
 
 import styleCss from "./style-css.js";
-import colorCss from "./color-css.js";
 import tokensCss from "./tokens-css.js";
 
 import { styleMap } from 'lit/directives/style-map.js';
@@ -61,7 +60,6 @@ export class AuroBackground extends LitElement {
   static get styles() {
     return [
       styleCss,
-      colorCss,
       tokensCss
     ];
   }
@@ -95,7 +93,7 @@ export class AuroBackground extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const styles = {
-      '--background': this.bg || 'var(--ds-auro-background-color)',
+      '--background': this.bg || 'var(--ds-auro-container-color)',
       '--backgroundSm': this.bgSm || 'var(--background)',
       '--backgroundMd': this.bgMd || 'var(--backgroundSm)',
       '--backgroundLg': this.bgLg || 'var(--backgroundMd)',

diff --git a/src/color.scss b/src/color.scss
diff --git a/src/style.scss b/src/style.scss
@@ -20,24 +20,32 @@
 
   padding: var(--inset);
 
+  background: var(--background);
+
   @include auro_breakpoint--sm {
     width: var(--widthSm);
     height: var(--heightSm);
 
     padding: var(--insetSm);
+
+    background: var(--backgroundSm);
   }
 
   @include auro_breakpoint--md {
     width: var(--widthMd);
     height: var(--heightMd);
 
     padding: var(--insetMd);
+
+    background: var(--backgroundMd);
   }
 
   @include auro_breakpoint--lg {
     width: var(--widthLg);
     height: var(--heightLg);
 
     padding: var(--insetMd);
+
+    background: var(--backgroundLg);
   }
 }
diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,5 +1,5 @@
 @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  --ds-auro-background-color: transparent;
+  --ds-auro-container-color: transparent;
 }