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

package/styles/focus-indicator/_core.scss

@@ -3,24 +3,19 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/utils';
-@use '../core/styles/tokens/focus-indicator/tokens';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, focus-indicator);
-}
+@use './token-utils' as *;
 
 @mixin base {
-  animation-delay: 0s, calc(var(--_duration) * 0.25);
-  animation-duration: calc(var(--_duration) * 0.25), calc(var(--_duration) * 0.75);
-  animation-timing-function: var(--_easing);
+  animation-delay: 0s, calc(#{token(duration)} * 0.25);
+  animation-duration: calc(#{token(duration)} * 0.25), calc(#{token(duration)} * 0.75);
+  animation-timing-function: #{token(easing)};
   box-sizing: border-box;
-  color: var(--_color);
+  color: #{token(color)};
   display: none;
   pointer-events: none;
   position: absolute;
-  margin-block: var(--_margin-block);
-  margin-inline: var(--_margin-inline);
+  margin-block: #{token(offset-block)};
+  margin-inline: #{token(offset-inline)};
 }
 
 @mixin active {
@@ -28,25 +23,25 @@
 }
 
 @mixin circular {
-  --_shape: 50%;
+  @include override(shape, 50%, value);
 }
 
 @mixin outward {
   animation-name: outward-grow, outward-shrink;
-  border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
-  border-end-start-radius: calc(var(--_shape-end-start) + var(--_outward-offset));
-  border-start-end-radius: calc(var(--_shape-start-end) + var(--_outward-offset));
-  border-start-start-radius: calc(var(--_shape-start-start) + var(--_outward-offset));
-  inset: calc(-1 * var(--_outward-offset));
-  outline: var(--_width) solid currentColor;
+  border-end-end-radius: calc(#{token(shape-end-end)} + #{token(outward-offset)});
+  border-end-start-radius: calc(#{token(shape-end-start)} + #{token(outward-offset)});
+  border-start-end-radius: calc(#{token(shape-start-end)} + #{token(outward-offset)});
+  border-start-start-radius: calc(#{token(shape-start-start)} + #{token(outward-offset)});
+  inset: calc(-1 * #{token(outward-offset)});
+  outline: #{token(width)} solid currentColor;
 }
 
 @mixin inward {
   animation-name: inward-grow, inward-shrink;
-  border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
-  border-end-start-radius: calc(var(--_shape-end-start) - var(--_inward-offset));
-  border-start-end-radius: calc(var(--_shape-start-end) - var(--_inward-offset));
-  border-start-start-radius: calc(var(--_shape-start-start) - var(--_inward-offset));
-  border: var(--_width) solid currentColor;
-  inset: var(--_inward-offset);
+  border-end-end-radius: calc(#{token(shape-end-end)} - #{token(inward-offset)});
+  border-end-start-radius: calc(#{token(shape-end-start)} - #{token(inward-offset)});
+  border-start-end-radius: calc(#{token(shape-start-end)} - #{token(inward-offset)});
+  border-start-start-radius: calc(#{token(shape-start-start)} - #{token(inward-offset)});
+  border: #{token(width)} solid currentColor;
+  inset: #{token(inward-offset)};
 }

package/styles/focus-indicator/_token-utils.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/utils';
+@use '../core/styles/tokens/focus-indicator/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: focus-indicator;
+$_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/focus-indicator/focus-indicator.scss

@@ -4,52 +4,57 @@
  * License: Apache-2.0
  */
 @use './animations';
-@use './configuration';
+@use './configuration' as *;
 @use './core';
 
-/// Host styles
+//
+// Host
+//
+
 :host {
-  display: contents;
+  @include configuration;
+}
+
+:host {
+  @include core.base;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+//
+// States
+//
+
 :host([active]) {
-  .forge-focus-indicator {
-    @include core.active;
-  }
+  @include core.active;
 }
 
 :host(:not([inward])) {
-  .forge-focus-indicator {
-    @include core.outward;
-  }
+  @include core.outward;
 }
 
 :host([inward]) {
-  .forge-focus-indicator {
-    @include core.inward;
-  }
+  @include core.inward;
 }
 
 :host([circular]) {
-  .forge-focus-indicator {
-    @include core.circular;
-  }
+  @include core.circular;
 }
 
-/// Base styles
-.forge-focus-indicator {
-  @include configuration.configuration;
-  @include core.base;
-}
+//
+// Animations
+//
 
 @include animations.keyframes;
 
+//
+// Media Queries
+//
+
 @media (prefers-reduced-motion) {
-  .forge-focus-indicator {
+  :host {
     animation: none;
   }
 }

package/styles/focus-indicator/index.scss

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

package/styles/forge.scss

@@ -10,9 +10,6 @@
 @use './typography/forge-typography';
 
 // Required global component styles
-@use './button/forge-button';
-@use './floating-action-button/forge-floating-action-button';
-@use './icon-button/forge-icon-button';
 @use './table/forge-table';
 @use './tooltip/forge-tooltip';
 @use './ripple/forge-ripple';

package/styles/icon-button/_configuration.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+$host-tokens: [display disabled-cursor];
+
+@mixin host-configuration {
+  @include tokens($includes: $host-tokens);
+}
+
+@mixin configuration {
+  @include tokens($excludes: $host-tokens);
+}

package/styles/icon-button/_core.scss

@@ -0,0 +1,141 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin host {
+  display: #{token(display)};
+  position: relative;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin base {
+  position: relative;
+  z-index: 0;
+  
+  display: #{token(display)};
+  align-items: center;
+  justify-content: center;
+  gap: #{token(gap)};
+
+  box-sizing: border-box;
+  height: #{token(density-large-size)};
+  min-width: #{token(density-large-size)};
+  border: #{token(border)};
+  border-start-start-radius: #{token(shape-start-start)};
+  border-start-end-radius: #{token(shape-start-end)};
+  border-end-start-radius: #{token(shape-end-start)};
+  border-end-end-radius: #{token(shape-end-end)};
+  padding: #{token(padding)};
+  box-shadow: #{token(shadow)};
+
+  color: #{token(icon-color)};
+  background: #{token(background-color)};
+  font-size: #{token(icon-size)};
+  cursor: #{token(cursor)};
+  user-select: none;
+
+  transition-property: box-shadow, background;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin slotted-start-end {
+  font-size: #{token(icon-size)};
+  height: #{token(icon-size)};
+  width: #{token(icon-size)};
+  font-weight: inherit;
+}
+
+@mixin anchor-base {
+  position: absolute;
+  inset: 0;
+  text-decoration: none;
+}
+
+@mixin host-disabled {
+  cursor: #{token(disabled-cursor)};
+}
+
+@mixin disabled {
+  pointer-events: none;
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin outlined {
+  border-width: #{token(outlined-border-width)};
+  border-style: #{token(outlined-border-style)};
+  border-color: #{token(outlined-border-color)};
+}
+
+@mixin tonal {
+  @include override(icon-color, tonal-icon-color);
+  @include override(background-color, tonal-background-color);
+}
+
+@mixin filled {
+  @include override(icon-color, filled-icon-color);
+  @include override(background-color, filled-background-color);
+}
+
+@mixin raised {
+  @include override(shadow, raised-shadow);
+
+  &:hover {
+    @include override(raised-shadow, raised-hover-shadow);
+  }
+
+  &:active {
+    @include override(raised-shadow, raised-active-shadow);
+  }
+}
+
+@mixin raised-disabled {
+  @include override(raised-shadow, raised-disabled-shadow);
+}
+
+@mixin density-small {
+  @include override(size, density-small-size);
+  @include override(icon-size, density-small-icon-size);
+  @include override(padding, density-small-padding);
+}
+
+@mixin density-small-slotted {
+  font-size: #{token(density-small-icon-size)};
+}
+
+@mixin density-medium {
+  @include override(size, density-medium-size);
+  @include override(padding, density-medium-padding);
+}
+
+@mixin toggle-on-icon {
+  @include override(icon-color, toggle-on-icon-color);
+}
+
+@mixin toggle-on-outlined {
+  @include override(background-color, outlined-toggle-on-background-color);
+  @include override(icon-color, outlined-toggle-on-icon-color);
+}
+
+@mixin toggle-tonal {
+  @include override(background-color, tonal-toggle-background-color);
+}
+
+@mixin toggle-on-tonal {
+  @include override(icon-color, tonal-toggle-on-icon-color);
+  @include override(background-color, tonal-toggle-on-background-color);
+}
+
+@mixin toggle-filled {
+  @include override(icon-color, filled-toggle-icon-color);
+  @include override(background-color, filled-toggle-background-color);
+}
+
+@mixin toggle-on-filled {
+  @include override(icon-color, filled-toggle-on-icon-color);
+  @include override(background-color, filled-toggle-on-background-color);
+}

package/styles/icon-button/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/icon-button/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: icon-button;
+$_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);
+}