fix(theming): resolve minor theming issues #296

AlaskaAirlines · Sep 16, 2024 · 9281c5f · 9281c5f
1 parent f60c185
commit 9281c5f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -57,15 +57,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) -->

diff --git a/demo/api.md b/demo/api.md
@@ -34,12 +34,14 @@
 | [activeLabel](#activeLabel)                     | `activeLabel`                     | `Boolean` | false                      | If set, the label will remain fixed in the active position. |
 | [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `String`  |                            | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
 | [autocorrect](#autocorrect)                     | `autocorrect`                     | `String`  |                            | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
+| [buttonTag](#buttonTag)                       |                                   | `string`  |                            |                                                  |
 | [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |                            |                                                  |
 | [disabled](#disabled)                        | `disabled`                        | `Boolean` | false                      | If set, disables the input.                      |
 | [error](#error)                           | `error`                           | `String`  |                            | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [errorMessage](#errorMessage)                    | `errorMessage`                    | `String`  |                            | Contains the help text message for the current validity error. |
 | [helpText](#helpText)                        | `helpText`                        | `String`  |                            | Deprecated, see `slot`.                          |
 | [icon](#icon)                            | `icon`                            | `Boolean` | false                      | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
+| [iconTag](#iconTag)                         |                                   | `string`  |                            |                                                  |
 | [id](#id)                              | `id`                              | `String`  |                            | Sets the unique ID of the element.               |
 | [isValid](#isValid)                         | `isValid`                         | `String`  | false                      | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. |
 | [label](#label)                           | `label`                           | `String`  | "Input label is undefined" | Deprecated, see `slot`.                          |
@@ -1168,17 +1170,17 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
 
 ```scss
-:host {
-  --ds-auro-input-alert-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
-  --ds-auro-input-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default);
-  --ds-auro-input-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default);
-  --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, $ds-color-text-ui-focus-default);
-  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default);
-  --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default);
-  --ds-auro-input-notification-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
-  --ds-auro-input-placeholder-text-color: transparent;
-  --ds-auro-input-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  --ds-auro-input-type-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
+
+:root {
+  --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
+  --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default});
+  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-input-notification-icon-color: var(--ds-color-alert-error-default, #{$ds-color-alert-error-default});
+  --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-input-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/color.scss b/src/color.scss
@@ -55,7 +55,7 @@ label {
 :host([bordered]) {
   .wrapper {
     border-color: var(--ds-auro-input-border-color);
-    background-color: var(--ds-auro-input-background-color);
+    background-color: var(--ds-auro-input-container-color);
 
     &:focus-within {
       --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
@@ -77,7 +77,7 @@ label {
 
 :host([validity]:not([validity='valid'])) {
   --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
-  --ds-auro-input-help-text-color: var(--ds-color-alert-error-default, #{$ds-color-alert-error-default});
+  --ds-auro-input-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
 }
 
 :host([validity]:not([validity='valid'])[bordered]) {

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,10 +1,12 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
+
 :root {
-  --ds-auro-input-background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-  --ds-auro-input-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default);
-  --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, $ds-color-text-ui-focus-default);
-  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default);
-  --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default);
-  --ds-auro-input-notification-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
-  --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  --ds-auro-input-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
+  --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default});
+  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+  --ds-auro-input-notification-icon-color: var(--ds-color-alert-error-default, #{$ds-color-alert-error-default});
+  --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-input-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }