@tylertech/forge 3.0.0-next.12 → 3.0.0-next.13

package/styles/chips/chip/_mixins.scss

@@ -3,12 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/chips/chip-theme' as mdc-chip-theme;
+@use '@material/ripple/ripple' as mdc-ripple;
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/animation/animation' as mdc-animation;
 @use '@material/theme/theme' as mdc-theme;
-@use '../../button/mixins' as button-mixins;
+@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
+@use '@material/button/button-base' as mdc-button-base;
+@use '@material/button/button-shared-theme' as mdc-button-shared-theme;
+@use '@material/button/button-outlined' as mdc-button-outlined;
+@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '../../theme';
 @use './variables';
@@ -18,8 +22,6 @@
     @include base;
 
     &.forge-chip--disabled {
-      @include button-mixins.outlined-disabled;
-
       @include theme.property(border-color, border-color);
       @include mdc-theme.property(color, text-disabled-on-light);
       cursor: default;
@@ -198,15 +200,27 @@
 }
 
 @mixin base() {
-  @include button-mixins.base;
-  @include button-mixins.outlined;
+  @include mdc-ripple.surface();
+  @include mdc-ripple.radius-bounded();
+  @include mdc-ripple-theme.states(primary, false);
+  @include mdc-button-base.base(mdc-feature-targeting.all());
+  @include mdc-button-shared-theme.shape-radius(small);
+  @include mdc-button-shared-theme.container-fill-color(transparent);
+  @include mdc-button-shared-theme.ink-color(primary);
+  @include mdc-button-shared-theme.density(0);
+  @include mdc-button-outlined.outlined(mdc-feature-targeting.all());
+  @include mdc-button-outlined-theme.outline-width(mdc-button-outlined-theme.$outlined-border-width);
+  @include mdc-button-outlined-theme.outline-color(primary);
+
   @include mdc-chip-theme.shape-radius(50%);
   @include theme.css-custom-property(width, --forge-chip-width, auto);
   @include theme.css-custom-property(height, --forge-chip-height, auto);
   @include theme.css-custom-property(min-height, --forge-chip-min-height, variables.$min-height);
-
+  
   box-sizing: border-box;
   transition: mdc-animation.enter(background-color, 150ms);
+  text-transform: none;
+  overflow: hidden;
 }
 
 @mixin invalid() {

package/styles/circular-progress/_configuration.scss

@@ -3,21 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/circular-progress/tokens';
+@use './token-utils' as *;
 
-///
-/// Initializes private configuration state CSS variables
-/// 
-@mixin configuration {
-  // Tokens
-  --_size: #{tokens.get(size)};
-  --_spacing: #{tokens.get(padding)};
-  --_track-width: #{tokens.get(track-width)};
-  --_track-color: #{tokens.get(track-color)};
-  --_track-background: #{tokens.get(track-background)};
-  --_arc-duration: #{tokens.get(arc-duration)};
+$_host-tokens: [size];
+
+@mixin host-configuration {
+  @include tokens($includes: $_host-tokens);
+}
 
-  // Duration variables
-  --_cycle-duration: calc(4 * var(--_arc-duration));
-  --_linear-duration: calc(var(--_arc-duration) * 360 / 306);
+@mixin configuration {
+  @include tokens($excludes: $_host-tokens);
 }

package/styles/circular-progress/_core.scss

@@ -5,18 +5,15 @@
  */
 @use 'sass:list';
 @use './animation';
-@use '../core/styles/utils';
-@use '../core/styles/tokens/circular-progress/tokens';
+@use './token-utils' as *;
 
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, circular-progress);
-}
+$_cycle-duration: calc(4 * #{token(arc-duration)});
 
 @mixin container {
   display: inline-flex;
   vertical-align: middle;
-  min-block-size: #{tokens.get(size)};
-  min-inline-size: #{tokens.get(size)};
+  min-block-size: #{token(size)};
+  min-inline-size: #{token(size)};
   position: relative;
   align-items: center;
   justify-content: center;
@@ -30,13 +27,13 @@
 @mixin progress {
   flex: 1;
   align-self: stretch;
-  margin: var(--_spacing);
+  margin: #{token(padding)};
 }
 
 @mixin indeterminate {
   will-change: transform;
   animation: #{animation.$indeterminate-animation};
-  animation-duration: var(--_linear-duration);
+  animation-duration: calc(#{token(arc-duration)} * 360 / 306);
 }
 
 @mixin indeterminate-left {
@@ -57,20 +54,21 @@
 @mixin indeterminate-circle {
   box-sizing: border-box;
   border-radius: 50%;
-  border: solid calc(var(--_size) * var(--_track-width) / 100);
-  border-color: var(--_track-color) var(--_track-color) transparent transparent;
+  border: solid calc(#{token(size)} * #{token(track-width)} / 100);
+  border-color: #{token(indicator-color)} #{token(indicator-color)} transparent transparent;
+  transition: border-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
   will-change: transform;
   animation: #{animation.$indeterminate-circle-animation};
   animation-iteration-count: infinite;
   animation-fill-mode: both;
-  animation-duration: var(--_arc-duration), var(--_cycle-duration);
+  animation-duration: #{token(arc-duration)}, #{$_cycle-duration};
   animation-timing-function: #{animation.$indeterminate-easing};
 }
 
 @mixin indeterminate-right-circle {
   rotate: 100deg;
   inset: 0 0 0 -100%;
-  animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms;
+  animation-delay: calc(-0.5 * #{token(arc-duration)}), 0ms;
 }
 
 @mixin determinate-svg {
@@ -80,17 +78,18 @@
 @mixin determinate-svg-circle {
   cx: 50%;
   cy: 50%;
-  r: calc(50% * (1 - var(--_track-width) / 100));
+  r: calc(50% * (1 - #{token(track-width)} / 100));
   // match size to indeterminate border width
-  stroke-width: calc(var(--_track-width) * 1%);
+  stroke-width: calc(#{token(track-width)} * 1%);
   // note, pathLength is set so this can be normalized
   stroke-dasharray: 100;
   fill: transparent;
 }
 
 @mixin determinate-progress {
-  transition: stroke-dashoffset 500ms #{animation.$determinate-easing};
-  stroke: var(--_track-color);
+  transition: stroke-dashoffset 500ms #{animation.$determinate-easing},
+              stroke #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  stroke: #{token(indicator-color)};
 }
 
 @mixin determinate-track {
@@ -98,13 +97,14 @@
 }
 
 @mixin determinate-track-background {
-  stroke: var(--_track-background);
+  transition: stroke #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  stroke: #{token(track-color)};
 }
 
 @mixin determinate-spinner {
   will-change: transform;
   animation: #{animation.$determinate-animation};
-  animation-duration: var(--_cycle-duration);
+  animation-duration: #{$_cycle-duration};
   animation-timing-function: #{animation.$indeterminate-easing};
 }
 

package/styles/circular-progress/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/circular-progress/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: circular-progress;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/styles/circular-progress/circular-progress.scss

@@ -6,8 +6,17 @@
 @use './core';
 @use './animation';
 @use './configuration';
+@use '../core/styles/theme';
+@use './token-utils' as *;
+
+//
+// Host styles
+//
+
+:host {
+  @include configuration.host-configuration;
+}
 
-/// Host styles
 :host {
   @include core.container;
 }
@@ -16,9 +25,15 @@
   display: none;
 }
 
-/// Base styles
+//
+// Base styles
+//
+
 .forge-circular-progress {
   @include configuration.configuration;
+}
+
+.forge-circular-progress {
   @include core.progress;
 
   &--indeterminate {
@@ -39,7 +54,10 @@ svg {
   @include core.center-content;
 }
 
-/// Indeterminate styles
+//
+// Indeterminate styles
+//
+
 .left {
   @include core.indeterminate-left;
 
@@ -60,7 +78,10 @@ svg {
   @include core.indeterminate-circle;
 }
 
-/// Determinate styles
+//
+// Determinate styles
+//
+
 svg {
   @include core.determinate-svg;
 
@@ -85,6 +106,32 @@ svg {
   @include core.determinate-spinner;
 }
 
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    .forge-circular-progress {
+      @include override(indicator-color, theme.variable($theme), value);
+      @include override(track-color, theme.variable(#{$theme}-container), value);
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(secondary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);
+
+:host([no-track]) {
+  .forge-circular-progress {
+    @include override(track-color, transparent, value);
+  }
+}
+
 @media screen and (forced-colors: active) {
   .progress {
     stroke: CanvasText;

package/styles/circular-progress/index.scss

@@ -6,3 +6,4 @@
 @forward './animation';
 @forward './configuration';
 @forward './core';
+@forward './token-utils' show provide-theme;

package/styles/color-picker/color-picker.scss

@@ -6,9 +6,6 @@
 @use '../theme';
 @use './mixins';
 
-// Required component styles
-@use '../icon-button/forge-icon-button';
-
 @include mixins.styles;
 
 :host {

package/styles/core/styles/_utils.scss

@@ -31,15 +31,23 @@
 /// ```
 /// 
 @function module-ref($module, $token, $value, $type: ref, $prefix: config.$prefix) {
-  $fallback: if($type == ref, module-var($value), $value);
+  $fallback: if($type == ref, module-var($module, $value), $value);
   @return create-var($module, $token, $fallback, $prefix);
 }
 
 ///
-/// Gets a module token CSS variable.
+/// Creates an internal token reference variable for a module.
+///
+/// Example:
+/// ```sass
+/// color: #{module-var(color)}; // => color: var(--_component-name-color);
+/// ```
 /// 
-@function module-var($token, $prefix: config.$prefix) {
-  @return var(--_#{$token});
+/// @param {String} $module - The module name.
+/// @param {String} $token - The token name.
+///
+@function module-var($module, $token, $prefix: config.$prefix) {
+  @return var(#{create-module-var($module, $token)});
 }
 
 ///
@@ -93,6 +101,47 @@
   }
 }
 
+///
+/// Creates a token CSS custom property definition to point one token to another.
+/// 
+/// If `$new-token` is not a valid token then the provided value will be used verbatim.
+/// 
+/// Example:
+/// ```sass
+/// #{override(component-name, tokens, color, new-color)}; // => --_component-name-color: var(--_component-name-new-color);
+/// #{override(component-name, tokens, color, red)}; // => --_component-name-color: red;
+/// ```
+/// 
+/// @param {String} $module - The module name.
+/// @param {String} $module-tokens - The available tokens.
+/// @param {String} $token - The token name to override.
+/// @param {String} $token-or-value - The token name (if exists) or value to point to.
+/// @param {Boolean} $type - The type of token this is. Valid values are `token` and `value`.
+/// 
+@mixin override($module, $module-tokens, $token, $token-or-value, $type: token) {
+  @if $type == 'token' {
+    @if not map.get($module-tokens, $token) {
+      @error 'Invalid token "#{$token}" for module "#{$module}"';
+    }
+    @if not map.get($module-tokens, $token-or-value) {
+      @error 'Invalid override token "#{$token-or-value}" for module "#{$module}"';
+    }
+  }
+
+  // When the "token" type is specified, we output a module-level CSS custom property override
+  // that points to the provided token. This ensures that the module is taking ownership of the
+  // token value (which breaks the global cascading of internal tokens) and the module can choose
+  // to provide its own token specific to that override.
+  //
+  // When the "value" type is specified, we output a global-level CSS custom property override
+  // that points to the provided value. This keeps the global cascading of internal tokens intact
+  // instead of just overriding the token to a specific unchangeable value.
+  $value: if($type == 'token' and map.has-key($module-tokens, $token-or-value),
+              module-var($module, $token-or-value),
+              create-var($module, $token, $token-or-value));
+  #{create-module-var($module, $token)}: #{$value};
+}
+
 ///
 /// Creates a new map by inheriting from a base map and overriding/adding values.
 ///
@@ -125,6 +174,20 @@
   --#{$prefix}-#{$module}-#{$name}: #{$value};
 }
 
+///
+/// Declares an internal token reference variable for a module.
+/// 
+/// Example:
+/// ```sass
+/// #{create-module-var(color)}: red; // => --_component-name-color: red;
+/// ```
+/// 
+/// @param {String} $token - The token name.
+/// 
+@function create-module-var($module, $token) {
+  @return --_#{$module}-#{$token};
+}
+
 ///
 /// Flattens multiple maps into a single map. 
 ///

package/styles/core/styles/spacing/index.scss

@@ -8,6 +8,13 @@
 @use '../tokens/spacing/tokens';
 @use '../utils';
 
+///
+/// Gets a spacing token value.
+/// 
+@function value($key) {
+  @return tokens.get($key);
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific spacing token with its token value as the fallback value.
 /// 

package/styles/core/styles/tokens/_token-utils.scss

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+@use '../utils';
+
+///
+/// Mixin for providing theme tokens to the module using external names.
+/// 
+/// Example:
+/// ```sass
+/// provide-theme(( color: red )); // => --forge-component-name-color: red;
+/// ```
+/// 
+/// @param {String} $module - The module name.
+/// @param {Map} $tokens - The tokens for this module.
+/// @param {Map} $theme - The theme tokens. 
+///
+@mixin provide-theme($module, $tokens, $theme) {
+  @include utils.provide($tokens, $theme, $module);
+}
+
+///
+/// Creates an internal token reference variable for the module.
+///
+/// This function requires that the token exists in the module.
+/// 
+/// Example:
+/// ```sass
+/// color: #{token(color)}; // => color: var(--_component-name-color);
+/// color: #{token(my-color, custom)}; // => color: var(--_component-name-my-color);
+/// ```
+/// 
+/// @param {String} $module - The module name. 
+/// @param {String} $tokens - The tokens for this module.
+/// @param {String} $token - The token name.
+/// @param {String} $type - The type of token this is. Valid values are `token` and `custom`. Using `custom` will not check if the token exists.
+///
+@function token($module, $tokens, $token, $type: token) {
+  @if ($type == 'token' and not map.has-key($tokens, $token)) {
+    @error 'Invalid token "#{$token}" for module "#{$module}"';
+  }
+  @return utils.module-var($module, $token);
+}
+
+///
+/// Declares an internal token reference variable for the module.
+/// 
+/// Example:
+/// ```sass
+/// #{declare(color)}: red; // => --_component-name-color: red;
+/// ```
+/// 
+/// @param {String} $module - The module name. 
+/// @param {String} $token - The token name.
+/// 
+@function declare($module, $token) {
+  @return utils.create-module-var($module, $token);
+}
+
+///
+/// Creates a token CSS custom property definition to point one token to another.
+/// 
+/// If `$new-token` is not a valid token then the provided value will be used verbatim.
+/// 
+/// Example:
+/// ```sass
+/// #{override(color, new-color)}; // => --_component-name-color: var(--_component-name-new-color);
+/// ```
+///
+/// @param {String} $module - The module name.
+/// @param {String} $tokens - The tokens for this module.
+/// @param {String} $token - The token name to override.
+/// @param {String} $token-or-value - The token name (if exists) or value to point to.
+/// @param {Boolean} $type - The type of token this is. Valid values are `token` and `value`.
+/// 
+@mixin override($module, $tokens, $token, $token-or-value, $type: token) {
+  @include utils.override($module, $tokens, $token, $token-or-value, $type);
+}
+
+///
+/// Generates CSS custom property declarations for all provided module-level tokens.
+///
+/// @param {String} $module - The module name.
+/// @param {String} $tokens - The tokens for this module.
+/// @param {List} $includes - An optional list of token names to include from `$tokens`
+/// @param {List} $excludes - An optional list of token names to exclude from `$tokens`
+/// 
+@mixin tokens($module, $tokens, $includes: null, $excludes: null) {
+  @if ($includes) {
+    // We are including only specific tokens
+    @each $token in $includes {
+      @if (not map.has-key($tokens, $token)) {
+        @error 'Invalid include token "#{$token}" for module "#{$module}"';
+      }
+      #{declare($module, $token)}: #{map.get($tokens, $token)};
+    }
+  } @else {
+    // We are including all tokens, but first we need to check if any excluded tokens were provided
+    @if ($excludes) {
+      @each $token in $excludes {
+        @if (not map.has-key($tokens, $token)) {
+          @error 'Invalid exclude token "#{$token}" for module "#{$module}"';
+        }
+        $tokens: map.remove($tokens, $token);
+      }
+    }
+
+    @each $token-name, $token-value in $tokens {
+      #{declare($module, $token-name)}: #{$token-value};
+    }
+  }
+}
+

package/styles/core/styles/tokens/button/_tokens.scss

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../elevation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../theme';
+@use '../../typography';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(button, primary-color, theme.variable(primary)),
+  text-color: utils.module-ref(button, text-color, primary-color),
+  disabled-color: utils.module-val(button, disabled, theme.variable(surface-container)),
+  padding: utils.module-val(button, padding, 8px),
+  display: utils.module-val(button, display, inline-flex),
+  justify: utils.module-val(button, justify, center),
+  shape: utils.module-val(button, shape, shape.variable(medium)),
+
+  // Base
+  height: utils.module-val(button, height, 36px),
+  min-width: utils.module-val(button, min-width, 64px),
+  spacing: utils.module-val(button, spacing, spacing.variable(xsmall)),
+  border-width: utils.module-val(button, border-width, medium),
+  border-style: utils.module-val(button, border-style, none),
+  border-color: utils.module-val(button, border-color, currentColor),
+  shape-start-start-radius: utils.module-ref(button, shape-start-start-radius, shape),
+  shape-start-end-radius: utils.module-ref(button, shape-start-end-radius, shape),
+  shape-end-start-radius: utils.module-ref(button, shape-end-start-radius, shape),
+  shape-end-end-radius: utils.module-ref(button, shape-end-end-radius, shape),
+  padding-block: utils.module-ref(button, padding-block, padding),
+  padding-inline: utils.module-ref(button, padding-inline, padding),
+  background: utils.module-val(button, background, transparent),
+  hover-background: utils.module-ref(button, hover-background, background),
+  active-background: utils.module-ref(button, active-background, background),
+  color: utils.module-ref(button, color, text-color),
+  icon-size: utils.module-val(button, icon-size, typography.font-size-relative('1125')),
+  shadow: utils.module-val(button, shadow, none),
+  hover-shadow: utils.module-val(button, hover-shadow, none),
+  active-shadow: utils.module-val(button, active-shadow, none),
+  cursor: utils.module-val(button, cursor, pointer),
+  transition-duration: utils.module-val(button, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(button, transition-timing, animation.variable(easing-standard)),
+
+  // Outlined
+  outlined-background: utils.module-ref(button, outlined-background, background),
+  outlined-color: utils.module-ref(button, outlined-color, primary-color),
+  outlined-border-width: utils.module-val(button, outlined-border-width, border.variable(thin)),
+  outlined-border-style: utils.module-val(button, outlined-border-style, solid),
+  outlined-border-color: utils.module-ref(button, outlined-border-color, primary-color),
+
+  // Tonal
+  tonal-background: utils.module-val(button, tonal-background, theme.variable(primary-container)),
+  tonal-disabled-background: utils.module-ref(button, tonal-disabled-background, disabled-color),
+  tonal-color: utils.module-val(button, flat-color, theme.variable(on-primary-container)),
+  tonal-disabled-color: utils.module-ref(button, tonal-disabled-color, disabled-text-color),
+
+  // Filled
+  filled-background: utils.module-ref(button, filled-background, primary-color),
+  filled-disabled-background: utils.module-ref(button, filled-disabled-background, disabled-color),
+  filled-color: utils.module-val(button, filled-color, theme.variable(on-primary)),
+  filled-disabled-color: utils.module-ref(button, filled-disabled-color, disabled-text-color),
+
+  // Raised
+  raised-shadow: utils.module-val(button, raised-shadow, elevation.value(2)),
+  raised-hover-shadow: utils.module-val(button, raised-hover-shadow, elevation.value(4)),
+  raised-active-shadow: utils.module-val(button, raised-active-shadow, elevation.value(8)),
+  raised-disabled-shadow: utils.module-val(button, raised-disabled-shadow, none),
+
+  // Link
+  link-color: utils.module-ref(button, link-color, primary-color),
+  link-text-decoration: utils.module-val(button, link-text-decoration, underline),
+  link-height: utils.module-val(button, link-height, auto),
+  link-padding: utils.module-val(button, link-padding, 0),
+  link-line-height: utils.module-val(button, link-line-height, normal),
+  link-width: utils.module-val(button, link-width, auto),
+  link-hover-text-decoration: utils.module-val(button, link-hover-text-decoration, none),
+  link-active-opacity: utils.module-val(button, link-active-opacity, theme.emphasis(high)),
+  link-transition-duration: utils.module-val(button, link-transition-duration, animation.variable(duration-short3)),
+  link-transition-timing: utils.module-val(button, link-transition-timing, animation.variable(easing-standard)),
+
+  // Disabled
+  disabled-cursor: utils.module-val(button, disabled-cursor, not-allowed),
+  disabled-text-color: utils.module-val(button, disabled-text-color, theme.variable(text-low)),
+  disabled-background: utils.module-val(button, disabled-background, transparent),
+  disabled-border-color: utils.module-ref(button, disabled-border-color, disabled-color),
+  disabled-shadow: utils.module-val(button, disabled-shadow, none),
+
+  // Dense
+  dense-height: utils.module-val(button, dense-height, 24px),
+
+  // Pill
+  pill-shape: utils.module-val(button, pill-shape, shape.variable(full)),
+  pill-padding-inline: utils.module-val(button, pill-padding-inline, spacing.variable(small)),
+
+  // Focus indicator
+  focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 4px),
+  text-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 0px),
+  link-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 2px),
+
+  // Popover icon
+  popover-icon-transition-duration: utils.module-val(button, popover-icon-transition-duration, animation.variable(duration-short3)),
+  popover-icon-transition-timing: utils.module-val(button, popover-icon-transition-timing, animation.variable(easing-standard)),
+  popover-icon-open-rotation: utils.module-val(button, popover-icon-open-rotation, 180deg)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}