diff --git a/README.md b/README.md index d33b9c9..0781d2a 100644 --- 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]( -### CSS Custom Property fallbacks - - -[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. - - - ### Define dependency in project component diff --git a/demo/api.md b/demo/api.md index fecae95..137cf63 100644 --- 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 ```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}); } ``` diff --git a/src/color.scss b/src/color.scss index 392285d..28f5e57 100644 --- 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 index 55cb164..ffe14dc 100644 --- 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}); }