@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/checkbox/src/auro-checkbox.js

@@ -0,0 +1,184 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { LitElement, html } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import styleCss from "./styles/auro-checkbox-css.js";
+import colorCss from "./styles/color-css.js";
+import tokensCss from "./styles/tokens-css.js";
+
+import checkLg from '@alaskaairux/icons/dist/icons/interface/check-lg.mjs';
+
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+/**
+ * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
+ *
+ * @attr {Boolean} checked - If set to true, the checkbox will be filled with a checkmark.
+ * @attr {Boolean} disabled - If set to true, the checkbox will not be clickable.
+ * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
+ * @attr {String} id - Sets the individual `id` per element.
+ * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
+ * @attr {String} value - Sets the element's input value.
+ * @csspart checkbox - apply css to a specific checkbox.
+ * @csspart checkbox-input - apply css to a specific checkbox's input.
+ * @csspart checkbox-label - apply css to a specific checkbox's label.
+ */
+
+// build the component class
+export class AuroCheckbox extends LitElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.error = false;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      checked: {
+        type: Boolean,
+        reflect: true
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      id:       { type: String },
+      name:     { type: String },
+      value:    { type: String }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-checkbox"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-checkbox") // this will register this element to <custom-checkbox/>
+   *
+   */
+  static register(name = "auro-checkbox") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCheckbox);
+  }
+
+  // This custom event is only for the purpose of supporting IE
+  // .addEventListener('change', function() { })
+  handleChange(event) {
+    this.checked = event.target.checked;
+    const customEvent = new CustomEvent(event.type, event);
+
+    this.dispatchEvent(customEvent);
+  }
+
+  handleInput(event) {
+    this.checked = event.target.checked;
+
+    this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  /**
+   * Function to support @focusin event.
+   * @private
+   * @returns {void}
+   */
+  handleFocusin() {
+    this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  /**
+   * Function to generate checkmark svg.
+   * @private
+   * @returns {void}
+   */
+  generateIconHtml() {
+    this.dom = new DOMParser().parseFromString(checkLg.svg, 'text/html');
+    this.svg = this.dom.body.firstChild;
+
+    this.svg.classList.add('svg--cbx');
+
+    return this.svg;
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
+
+    this.addEventListener('click', () => {
+      this.handleFocusin();
+    });
+
+    this.addEventListener('focusin', () => {
+      this.handleFocusin();
+    });
+
+    this.addEventListener('focusout', () => {
+      this.dispatchEvent(new CustomEvent('auroCheckbox-focusout', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      }));
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const labelClasses = {
+      'label': true,
+      'label--cbx': true,
+      'errorBorder': this.error
+    };
+
+    return html`
+      <div class="cbxContainer" part="checkbox">
+        <input
+          class="util_displayHiddenVisually cbx--input"
+          part="checkbox-input"
+          @change=${this.handleChange}
+          @input="${this.handleInput}"
+          ?disabled="${this.disabled}"
+          .checked="${this.checked}"
+          id="${ifDefined(this.id)}"
+          name="${ifDefined(this.name)}"
+          type="checkbox"
+          .value="${this.value}"
+        />
+
+        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}" part="checkbox-label">
+          ${this.checked ? this.generateIconHtml() : undefined}
+          <slot></slot>
+        </label>
+      </div>
+    `;
+  }
+}

package/components/checkbox/src/index.js

@@ -0,0 +1,8 @@
+import { AuroCheckbox } from './auro-checkbox.js';
+import { AuroCheckboxGroup } from './auro-checkbox-group.js';
+
+AuroCheckbox.register();
+AuroCheckboxGroup.register();
+
+// Enable TypeScript support
+export { AuroCheckbox, AuroCheckboxGroup };

package/components/checkbox/src/styles/auro-checkbox-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, $ds-size-50)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:var(--ds-size-50, 0.25rem);left:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1}`;

package/components/checkbox/src/styles/auro-checkbox-group-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;

package/components/checkbox/src/styles/auro-checkbox-group.css

@@ -0,0 +1,26 @@
+/* stylelint-disable no-descending-specificity,
+   no-duplicate-selectors
+   declaration-empty-line-before,
+   comment-whitespace-inside,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-max-type,
+   scss/selector-nest-combinators,
+   selector-class-pattern */
+:host {
+  display: block;
+  padding-bottom: var(--ds-size-150, 0.75rem);
+}
+
+.displayFlex legend + slot {
+  display: flex;
+  white-space: nowrap;
+}
+
+fieldset {
+  all: unset;
+}
+
+legend {
+  margin-bottom: var(--ds-size-150, 0.75rem);
+}

package/components/checkbox/src/styles/auro-checkbox-group.scss

@@ -0,0 +1,38 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable no-descending-specificity,
+   no-duplicate-selectors
+   declaration-empty-line-before,
+   comment-whitespace-inside,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-max-type,
+   scss/selector-nest-combinators,
+   selector-class-pattern */
+
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  display: block;
+  padding-bottom: var(--ds-size-150, $ds-size-150);
+}
+
+.displayFlex {
+  legend + slot {
+    display: flex;
+    white-space: nowrap;
+  }
+}
+
+fieldset {
+  all: unset;
+
+}
+
+legend {
+  margin-bottom: var(--ds-size-150, $ds-size-150);
+}
+

package/components/checkbox/src/styles/auro-checkbox.css

@@ -0,0 +1,123 @@
+/* stylelint-disable custom-property-empty-line-before,
+   custom-property-pattern,
+   selector-max-class,
+   scss/selector-nest-combinators,
+   order/properties-order,
+   max-nesting-depth,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-class-pattern,
+   rule-empty-line-before,
+   scss/selector-no-redundant-nesting-selector,
+   no-descending-specificity,
+   no-duplicate-selectors,
+   declaration-empty-line-before */
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *:before, *:after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+*:focus-visible {
+  outline: 0;
+}
+*:focus-visible {
+  outline: 0;
+}
+
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+.util_displayInline {
+  display: inline;
+}
+
+.util_displayInlineBlock {
+  display: inline-block;
+}
+
+.util_displayBlock {
+  display: block;
+}
+
+.util_displayFlex {
+  display: flex;
+}
+
+.util_displayHidden {
+  display: none;
+}
+
+.util_displayHiddenVisually {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+}
+
+:host {
+  display: block;
+  --cbxLocation: var(--ds-size-50, $ds-size-50);
+}
+
+fieldset {
+  all: unset;
+}
+
+@media screen and (min-width: 576px) {
+  .displayFlex slot {
+    display: flex;
+  }
+}
+
+.cbxContainer {
+  position: relative;
+  padding-left: var(--ds-size-100, 0.5rem);
+  padding-right: var(--ds-size-100, 0.5rem);
+  line-height: var(--ds-size-400, 2rem);
+}
+
+.cbx--input:disabled + label:hover {
+  cursor: auto;
+}
+
+.label {
+  margin-left: var(--ds-size-300, 1.5rem);
+  display: block;
+}
+.label:hover {
+  cursor: pointer;
+}
+
+.label--cbx:after {
+  -webkit-tap-highlight-color: transparent;
+  position: absolute;
+  content: "";
+  top: var(--ds-size-50, 0.25rem);
+  left: var(--cbxLocation);
+  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
+  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--ds-border-radius, 0.375rem);
+  outline-style: solid;
+  outline-width: 1px;
+  z-index: 0;
+}
+
+.svg--cbx {
+  position: absolute;
+  top: var(--ds-size-25, 0.125rem);
+  left: var(--ds-size-25, 0.125rem);
+  padding-top: 3px;
+  padding-bottom: 3px;
+  z-index: 1;
+}

package/components/checkbox/src/styles/auro-checkbox.scss

@@ -0,0 +1,100 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable custom-property-empty-line-before,
+   custom-property-pattern,
+   selector-max-class,
+   scss/selector-nest-combinators,
+   order/properties-order,
+   max-nesting-depth,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-class-pattern,
+   rule-empty-line-before,
+   scss/selector-no-redundant-nesting-selector,
+   no-descending-specificity,
+   no-duplicate-selectors,
+   declaration-empty-line-before */
+
+// Import Auro tokens
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
+@import "@aurodesignsystem/webcorestylesheets/src/core";
+@import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+// container styles - defines the look of the outer custom component
+:host {
+  display: block;
+  --cbxLocation: var(--ds-size-50, $ds-size-50);
+}
+
+fieldset {
+  all: unset;
+}
+
+.displayFlex {
+  slot {
+    @include auro_breakpoint--sm {
+      display: flex;
+    }
+  }
+}
+
+.cbxContainer {
+  position: relative;
+  padding-left: var(--ds-size-100, $ds-size-100);
+  padding-right: var(--ds-size-100, $ds-size-100);
+  line-height: var(--ds-size-400, $ds-size-400);
+}
+
+.cbx--input {
+  &:disabled {
+    & + label {
+      &:hover {
+        cursor: auto;
+      }
+    }
+  }
+}
+
+.label {
+  margin-left: var(--ds-size-300, $ds-size-300);
+  display: block;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+// No tokens available for values used here
+.label--cbx {
+  &:after {
+    -webkit-tap-highlight-color: transparent;
+    position: absolute;
+    content: '';
+    top: var(--ds-size-50, $ds-size-50);
+    left: var(--cbxLocation);
+    width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
+    height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
+    border-width: 1px;
+    border-style: solid;
+    border-radius: var(--ds-border-radius, $ds-border-radius);
+    outline-style: solid;
+    outline-width: 1px;
+    z-index: 0;
+  }
+}
+
+.svg--cbx {
+  position: absolute;
+  top: var(--ds-size-25, $ds-size-25);
+  left: var(--ds-size-25, $ds-size-25);
+
+  padding-top: 3px;
+  padding-bottom: 3px;
+
+  z-index: 1;
+}

package/components/checkbox/src/styles/color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .label--cbx:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .label--cbx:hover{--ds-auro-checkbox-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-checkbox-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}:host([checked]:focus-within) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);--ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-checkbox-label-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([disabled]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-checkmark-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([disabled][checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-color-utility-error-default, #cc1816);--ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-checkbox-outline-color: var(--ds-color-border-ui-active-default, #225296)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816)}:host([error][checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-container-error-inverse, #74110e);--ds-auro-checkbox-container-color: var(--ds-color-container-error-inverse, #df0b37)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}:host([error][checked]:focus-within) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);--ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816)}`;

package/components/checkbox/src/styles/color.css

@@ -0,0 +1,84 @@
+/* stylelint-disable selector-class-pattern, order/properties-order, no-descending-specificity */
+:host .label {
+  color: var(--ds-auro-checkbox-label-color);
+}
+:host .label--cbx:after {
+  background-color: var(--ds-auro-checkbox-container-color);
+  border-color: var(--ds-auro-checkbox-border-color);
+  outline-color: var(--ds-auro-checkbox-outline-color);
+}
+:host .label--cbx:hover {
+  --ds-auro-checkbox-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
+}
+:host .svg--cbx {
+  color: var(--ds-auro-checkbox-checkmark-color);
+}
+
+:host(:focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
+  --ds-auro-checkbox-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5);
+}
+
+:host([checked]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);
+}
+:host([checked]) .label--cbx:hover {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-hover-default, #193d73);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);
+}
+
+:host([checked]:focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);
+}
+:host([checked]:focus-within) .label--cbx:hover {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);
+}
+
+:host([disabled]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);
+  --ds-auro-checkbox-label-color: var(--ds-color-text-ui-disabled-default, #adadad);
+}
+:host([disabled]) .label--cbx:hover {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);
+}
+
+:host([disabled][checked]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
+  --ds-auro-checkbox-checkmark-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);
+}
+:host([disabled][checked]) .label--cbx:hover {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);
+}
+
+:host([error]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-utility-error-default, #cc1816);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #ffffff);
+}
+
+:host([error]:not([checked]):focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-ui-active-default, #225296);
+  --ds-auro-checkbox-outline-color: var(--ds-color-border-ui-active-default, #225296);
+}
+
+:host([error][checked]) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-error-default, #cc1816);
+  --ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816);
+}
+:host([error][checked]) .label--cbx:hover {
+  --ds-auro-checkbox-border-color: var(--ds-color-container-error-inverse, #74110e);
+  --ds-auro-checkbox-container-color: var(--ds-color-container-error-inverse, #df0b37);
+}
+
+:host([error][checked]:focus-within) {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);
+}
+:host([error][checked]:focus-within) .label--cbx:hover {
+  --ds-auro-checkbox-border-color: var(--ds-color-border-subtle-default, #f0f7fd);
+  --ds-auro-checkbox-container-color: var(--ds-color-utility-error-default, #cc1816);
+}