@hashicorp/design-system-components 0.12.8 → 0.12.11

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @hashicorp/design-system-components
 
+## 0.12.11
+
+### Patch Changes
+
+- [#426](https://github.com/hashicorp/design-system/pull/426) [`ff236b25`](https://github.com/hashicorp/design-system/commit/ff236b2530dae122c011abf88baf2059a7871427) Thanks [@didoo](https://github.com/didoo)! - Updated font-weight to "medium" for "Badge" and "BadgeCount" components
+
+## 0.12.10
+
+### Patch Changes
+
+- [#428](https://github.com/hashicorp/design-system/pull/428) [`599dca97`](https://github.com/hashicorp/design-system/commit/599dca971fba57b613f9a17588ebe0e569aafe4c) Thanks [@didoo](https://github.com/didoo)! - Fixed issue with "disabled" visual state for "Hds::Button" when is a link
+
+## 0.12.9
+
+### Patch Changes
+
+- [#418](https://github.com/hashicorp/design-system/pull/418) [`981e2bd9`](https://github.com/hashicorp/design-system/commit/981e2bd99d29398a40274d390d1885ebfcd85133) Thanks [@alex-ju](https://github.com/alex-ju)! - Determine an accessible name for `alertdialog` alerts #418
+
+* [#416](https://github.com/hashicorp/design-system/pull/416) [`824e53d1`](https://github.com/hashicorp/design-system/commit/824e53d11678a5bb2544add3d9d1b2a93f9c42c1) Thanks [@alex-ju](https://github.com/alex-ju)! - Remove stray aria-describedby in alert component
+
+- [#415](https://github.com/hashicorp/design-system/pull/415) [`c6842109`](https://github.com/hashicorp/design-system/commit/c68421094991b2d62832cb346b4cf23eca1049e4) Thanks [@didoo](https://github.com/didoo)! - Added `@levelHover` and `@levelActive` arguments to `Card::Container` component
+
 ## 0.12.8
 
 ### Patch Changes

package/addon/components/hds/alert/index.hbs

@@ -1,11 +1,18 @@
-<div class={{this.classNames}} role={{this.role}} aria-live="polite" aria-describedby="content" ...attributes>
+<div
+  class={{this.classNames}}
+  role={{this.role}}
+  aria-live="polite"
+  aria-labelledby={{this.ariaLabelledBy}}
+  {{did-insert this.didInsert}}
+  ...attributes
+>
   {{#if this.icon}}
     <div class="hds-alert__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />
     </div>
   {{/if}}
 
-  <div class="hds-alert__content" {{did-insert this.didInsertContent}}>
+  <div class="hds-alert__content">
     <div class="hds-alert__text">
       {{yield (hash Title=(component "hds/alert/title"))}}
       {{yield (hash Description=(component "hds/alert/description"))}}

package/addon/components/hds/alert/index.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 
 export const TYPES = ['page', 'inline', 'compact'];
@@ -20,8 +21,13 @@ export const MAPPING_COLORS_TO_ICONS = {
   critical: 'alert-diamond',
 };
 
+const CONTENT_ELEMENT_SELECTOR = '.hds-alert__content';
+const TITLE_ELEMENT_SELECTOR = '.hds-alert__title';
+const DESCRIPTION_ELEMENT_SELECTOR = '.hds-alert__description';
+
 export default class HdsAlertIndexComponent extends Component {
   @tracked role = 'alert';
+  @tracked ariaLabelledBy;
 
   constructor() {
     super(...arguments);
@@ -131,10 +137,23 @@ export default class HdsAlertIndexComponent extends Component {
   }
 
   @action
-  didInsertContent(element) {
-    let actions = element.querySelectorAll('button, a');
+  didInsert(element) {
+    let actions = element.querySelectorAll(
+      `${CONTENT_ELEMENT_SELECTOR} button, ${CONTENT_ELEMENT_SELECTOR} a`
+    );
     if (actions.length) {
       this.role = 'alertdialog';
     }
+
+    // `alertdialog` must have an accessible name so we use either the
+    // title or the description as label for the alert
+    let label =
+      element.querySelector(TITLE_ELEMENT_SELECTOR) ||
+      element.querySelector(DESCRIPTION_ELEMENT_SELECTOR);
+    if (label) {
+      let labelId = label.getAttribute('id') || guidFor(element);
+      label.setAttribute('id', labelId);
+      this.ariaLabelledBy = labelId;
+    }
   }
 }

package/addon/components/hds/card/container.js

@@ -21,7 +21,7 @@ export default class HdsCardContainerComponent extends Component {
     let { level = DEFAULT_LEVEL } = this.args;
 
     assert(
-      `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+      `@level for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
         ', '
       )}, received: ${level}`,
       LEVELS.includes(level)
@@ -30,6 +30,50 @@ export default class HdsCardContainerComponent extends Component {
     return level;
   }
 
+  /**
+   * Sets the "elevation" level for the component on ":hover" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelHover
+   * @type {string}
+   */
+  get levelHover() {
+    let { levelHover } = this.args;
+
+    if (levelHover) {
+      assert(
+        `@levelHover for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${levelHover}`,
+        LEVELS.includes(levelHover)
+      );
+    }
+
+    return levelHover;
+  }
+
+  /**
+   * Sets the "elevation" level for the component on ":active" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelActive
+   * @type {string}
+   */
+  get levelActive() {
+    let { levelActive } = this.args;
+
+    if (levelActive) {
+      assert(
+        `@levelActive for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${levelActive}`,
+        LEVELS.includes(levelActive)
+      );
+    }
+
+    return levelActive;
+  }
+
   /**
    * Sets the background for the component
    * Accepted values: neutral-primary, neutral-secondary
@@ -42,7 +86,7 @@ export default class HdsCardContainerComponent extends Component {
     let { background = DEFAULT_BACKGROUND } = this.args;
 
     assert(
-      `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+      `@background for "Hds::Card::Container" must be one of the following: ${BACKGROUNDS.join(
         ', '
       )}, received: ${background}`,
       BACKGROUNDS.includes(background)
@@ -63,7 +107,7 @@ export default class HdsCardContainerComponent extends Component {
     let { overflow = DEFAULT_OVERFLOW } = this.args;
 
     assert(
-      `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+      `@overflow for "Hds::Card::Container" must be one of the following: ${OVERFLOWS.join(
         ', '
       )}, received: ${overflow}`,
       OVERFLOWS.includes(overflow)
@@ -80,10 +124,26 @@ export default class HdsCardContainerComponent extends Component {
   get classNames() {
     let classes = ['hds-card__container'];
 
-    // add an "elevation" class helper based on the @level and @hasBorder arguments
+    // add "elevation" classes based on the @level and @hasBorder arguments
     classes.push(
-      `hds-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.level}`
+      `hds-card__container--level-${
+        this.args.hasBorder ? 'surface' : 'elevation'
+      }-${this.level}`
     );
+    if (this.levelHover) {
+      classes.push(
+        `hds-card__container--hover-level-${
+          this.args.hasBorder ? 'surface' : 'elevation'
+        }-${this.levelHover}`
+      );
+    }
+    if (this.levelActive) {
+      classes.push(
+        `hds-card__container--active-level-${
+          this.args.hasBorder ? 'surface' : 'elevation'
+        }-${this.levelActive}`
+      );
+    }
 
     // add a class based on the @background argument
     classes.push(`hds-card__container--background-${this.background}`);

package/addon/components/hds/form/checkbox/base.hbs

@@ -1 +1 @@
-<input type="checkbox" class={{this.classNames}} ...attributes value={{@value}} />
+<input type="checkbox" class="hds-form-checkbox" ...attributes value={{@value}} />

package/addon/components/hds/form/checkbox/field.hbs

@@ -10,10 +10,10 @@
     <Hds::Form::Checkbox::Base
       class="hds-form-field__control"
       @value={{@value}}
-      @isInvalid={{@isInvalid}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/checkbox/group.hbs

@@ -1,9 +1,14 @@
-<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
   {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
-  {{yield (hash Legend=F.Legend HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     {{yield
-      (hash Checkbox::Field=(component "hds/form/checkbox/field" contextualClass="hds-form-group__control-field"))
+      (hash
+        Checkbox::Field=(component
+          "hds/form/checkbox/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+        )
+      )
     }}
   </F.Control>
 </Hds::Form::Fieldset>

package/addon/components/hds/form/field/index.hbs

@@ -1,5 +1,15 @@
 <div class={{this.classNames}} ...attributes>
-  {{yield (hash Label=(component "hds/form/label" controlId=this.id contextualClass="hds-form-field__label"))}}
+  {{yield
+    (hash
+      Label=(component
+        "hds/form/label"
+        controlId=this.id
+        isRequired=this.isRequired
+        isOptional=this.isOptional
+        contextualClass="hds-form-field__label"
+      )
+    )
+  }}
   {{yield
     (hash
       HelperText=(component

package/addon/components/hds/form/field/index.js

@@ -63,4 +63,22 @@ export default class HdsFormFieldIndexComponent extends Component {
 
     return classes.join(' ');
   }
+
+  /**
+   * @param isRequired
+   * @type {boolean}
+   * @default false
+   */
+  get isRequired() {
+    return this.args.isRequired || false;
+  }
+
+  /**
+   * @param isOptional
+   * @type {boolean}
+   * @default false
+   */
+  get isOptional() {
+    return this.args.isOptional || false;
+  }
 }

package/addon/components/hds/form/fieldset/index.hbs

@@ -1,5 +1,11 @@
 <fieldset class={{this.classNames}} id={{this.id}} ...attributes aria-describedby={{this.ariaDescribedBy}}>
-  {{yield (hash Legend=(component "hds/form/legend" contextualClass="hds-form-group__legend"))}}
+  {{yield
+    (hash
+      Legend=(component
+        "hds/form/legend" isRequired=this.isRequired isOptional=this.isOptional contextualClass="hds-form-group__legend"
+      )
+    )
+  }}
   {{yield
     (hash
       HelperText=(component

package/addon/components/hds/form/fieldset/index.js

@@ -46,4 +46,22 @@ export default class HdsFormFieldsetIndexComponent extends Component {
 
     return classes.join(' ');
   }
+
+  /**
+   * @param isRequired
+   * @type {boolean}
+   * @default false
+   */
+  get isRequired() {
+    return this.args.isRequired || false;
+  }
+
+  /**
+   * @param isOptional
+   * @type {boolean}
+   * @default false
+   */
+  get isOptional() {
+    return this.args.isOptional || false;
+  }
 }

package/addon/components/hds/form/indicator/index.hbs

@@ -0,0 +1,6 @@
+{{#if @isOptional}}
+  <span class="hds-form-indicator hds-form-indicator--optional">(Optional)</span>
+{{/if}}
+{{#if @isRequired}}
+  <Hds::Badge class="hds-form-indicator" @size="small" @color="neutral" @text="Required" />
+{{/if}}

package/addon/components/hds/form/label/index.hbs

@@ -1,3 +1,4 @@
 <label class={{this.classNames}} for={{@controlId}} ...attributes>
   {{yield}}
+  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
 </label>

package/addon/components/hds/form/legend/index.hbs

@@ -1,3 +1,4 @@
 <legend class={{this.classNames}} ...attributes>
   {{yield}}
+  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
 </legend>

package/addon/components/hds/form/radio/base.hbs

@@ -1 +1 @@
-<input type="radio" class={{this.classNames}} ...attributes value={{@value}} />
+<input type="radio" class="hds-form-radio" ...attributes value={{@value}} />

package/addon/components/hds/form/radio/field.hbs

@@ -10,10 +10,10 @@
     <Hds::Form::Radio::Base
       class="hds-form-field__control"
       @value={{@value}}
-      @isInvalid={{@isInvalid}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/radio/group.hbs

@@ -1,7 +1,14 @@
-<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
   {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
-  {{yield (hash Legend=F.Legend HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
-    {{yield (hash Radio::Field=(component "hds/form/radio/field" contextualClass="hds-form-group__control-field"))}}
+    {{yield
+      (hash
+        Radio::Field=(component
+          "hds/form/radio/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+        )
+      )
+    }}
   </F.Control>
 </Hds::Form::Fieldset>

package/addon/components/hds/form/select/field.hbs

@@ -1,6 +1,13 @@
-<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} as |F|>
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  as |F|
+>
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Select::Base
       class="hds-form-field__control"
@@ -10,6 +17,7 @@
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
       as |S|
     >
       {{yield (hash Options=S.Options)}}

package/addon/components/hds/form/text-input/field.hbs

@@ -1,6 +1,13 @@
-<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} as |F|>
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  as |F|
+>
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::TextInput::Base
       class="hds-form-field__control"
@@ -11,6 +18,7 @@
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/textarea/base.hbs

@@ -1,2 +1,2 @@
 {{! Notice: this is not the native HTML <textarea> but the Ember component <Textarea> }}
-<Textarea class={{this.classNames}} {{style width=@width}} ...attributes @value={{@value}} />
+<Textarea class={{this.classNames}} {{style width=@width height=@height}} rows="4" ...attributes @value={{@value}} />

package/addon/components/hds/form/textarea/field.hbs

@@ -1,15 +1,24 @@
-<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} as |F|>
+<Hds::Form::Field
+  @layout="vertical"
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @isRequired={{@isRequired}}
+  @isOptional={{@isOptional}}
+  as |F|
+>
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
     <Hds::Form::Textarea::Base
       class="hds-form-field__control"
       @value={{@value}}
       @isInvalid={{@isInvalid}}
       @width={{@width}}
+      @height={{@height}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/toggle/base.js

@@ -9,11 +9,6 @@ export default class HdsFormToggleBaseComponent extends Component {
   get classNames() {
     let classes = ['hds-form-toggle'];
 
-    // add a class based on the @isInvalid argument
-    if (this.args.isInvalid) {
-      classes.push(`hds-form-toggle--is-invalid`);
-    }
-
     // add a class based on the @_wrapperClass argument
     // we need to use this special argument to pass a class to the wrapping element, because the ...attributes is applied to the control
     // notice: this will *not* be documented for public use

package/addon/components/hds/form/toggle/field.hbs

@@ -11,10 +11,10 @@
       {{! template-lint-disable no-capital-arguments }}
       @_wrapperClass="hds-form-field__control"
       @value={{@value}}
-      @isInvalid={{@isInvalid}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}
+      required={{@isRequired}}
     />
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/toggle/group.hbs

@@ -0,0 +1,14 @@
+<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
+  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
+  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield
+      (hash
+        Toggle::Field=(component
+          "hds/form/toggle/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+        )
+      )
+    }}
+  </F.Control>
+</Hds::Form::Fieldset>

package/app/components/hds/form/indicator/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/indicator/index';

package/app/components/hds/form/toggle/group.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/toggle/group';

package/app/styles/components/badge-count.scss

@@ -17,6 +17,7 @@ $hds-badge-count-border-width: 1px;
   border: $hds-badge-count-border-width solid transparent;
   display: inline-flex;
   font-family: var(--token-typography-font-stack-text);
+  font-weight: var(--token-typography-font-weight-medium);
   max-width: 100%;
 }
 

package/app/styles/components/badge.scss

@@ -29,6 +29,7 @@
 .hds-badge__text {
   flex: 1 0 0;
   font-family: var(--token-typography-font-stack-text);
+  font-weight: var(--token-typography-font-weight-medium);
 }
 
 
@@ -143,4 +144,4 @@ $size-props: (
       color: var(--token-color-foreground-#{$color});
     }
   }
-}
+}

package/app/styles/components/button.scss

@@ -32,11 +32,19 @@ $hds-button-focus-border-width: 3px;
   }
 
   // This covers all of the browsers and focus scenarios (due to the custom focus design).
+  //
+  // IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+  // the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+  // but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+  //
   &:disabled,
+  &[disabled],
   &.mock-disabled,
   &:disabled:focus,
+  &[disabled]:focus,
   &.mock-disabled:focus,
   &:disabled:hover,
+  &[disabled]:hover,
   &.mock-disabled:hover {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-border-primary);
@@ -254,11 +262,19 @@ $size-props: (
     }
   }
 
+  //
+  // IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+  // the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+  // but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+  //
   &:disabled,
+  &[disabled],
   &.mock-disabled,
   &:disabled:focus,
+  &[disabled]:focus,
   &.mock-disabled:focus,
   &:disabled:hover,
+  &[disabled]:hover,
   &.mock-disabled:hover {
     background-color: transparent;
     border-color: transparent;

package/app/styles/components/card/container.scss

@@ -6,6 +6,7 @@
 //
 
 
+$hds-card-container-style: ( 'surface', 'elevation' );
 $hds-card-container-levels: ( 'base', 'mid', 'high' );
 
 $hds-card-container-border-radius: 6px;
@@ -16,6 +17,30 @@ $hds-card-container-border-radius: 6px;
   position: relative;
 }
 
+// LEVEL (elevation style as "drop" + "border" shadow effects)
+
+@each $style in $hds-card-container-style {
+  // IMPORTANT: we need to keep separate loops, because we want the "hover" state
+  // to override the "rest" state, and the "active" state to override the "hover" state
+  // so the order of the declaration matters, they need to be one group after another group
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--level-#{$style}-#{$level} {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--hover-level-#{$style}-#{$level}:hover,
+    .hds-card__container--hover-level-#{$style}-#{$level}.mock-hover {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--active-level-#{$style}-#{$level}:active,
+    .hds-card__container--active-level-#{$style}-#{$level}.mock-active {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+}
 
 // BACKGROUND
 

package/app/styles/components/form/_tokens.scss

@@ -0,0 +1,41 @@
+//
+// FORM > TOKENS
+//
+// TODO: this will be removed once we define the correct component-level tokens for the "form controls" component
+//
+
+:root {
+  // INPUT / DEFAULT
+  --token-form-control-foreground-color-default: var(--token-color-foreground-strong);
+  --token-form-control-background-color-default: var(--token-color-surface-interactive);
+  --token-form-control-background-color-default-hover: var(--token-color-surface-interactive-hover);
+  --token-form-control-border-color-default: #8c909c;
+  --token-form-control-border-color-default-hover: #656a76;
+  // INPUT / CHECKED
+  --token-form-control-background-color-checked: #1060FF;
+  --token-form-control-background-color-checked-hover: #0C56E9;
+  --token-form-control-border-color-checked: #0C56E9;
+  --token-form-control-border-color-checked-hover: #0046D1;
+  // INPUT / READONLY
+  --token-form-control-foreground-color-readonly: var(--token-color-foreground-primary);
+  --token-form-control-background-color-readonly: var(--token-color-surface-strong);
+  --token-form-control-border-color-readonly: var(--token-color-border-faint);
+  // INPUT / DISABLED
+  --token-form-control-foreground-color-disabled: var(--token-color-foreground-disabled);
+  --token-form-control-background-color-disabled: var(--token-color-surface-interactive-disabled);
+  --token-form-control-border-color-disabled: var(--token-color-border-primary);
+  // INPUT / INVALID
+  --token-form-control-foreground-color-critical: var(--token-color-foreground-critical-on-surface);
+  --token-form-control-border-color-critical: #c00005;
+  --token-form-control-border-color-critical-hover: #940004;
+  // INPUT / PLACEHOLDER
+  --token-form-control-placeholder-color: var(--token-color-foreground-faint);
+  // INPUT / BORDER SIZING
+  --token-form-control-border-radius: 5px;
+  // LABEL/HELPER-TEXT
+  --token-form-label-foreground-color: var(--token-color-foreground-strong);
+  --token-form-helper-text-foreground-color: var(--token-color-foreground-faint);
+  // CHECKBOX
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+}