@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/styles/field-next/_core.state.scss

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/theme';
+@use './core.variant' as variant;
+@use './token-utils' as *;
+
+//
+// Hover
+//
+
+@mixin container-hover($variant, $theme: default) {
+  @if $variant == outlined {
+    @include container-outlined-hover($theme);
+  } @else if $variant == tonal {
+    @include container-tonal-hover($theme);
+  } @else if $variant == filled {
+    @include container-filled-hover($theme);
+  }
+}
+
+@mixin container-outlined-hover($theme: default) {
+  @if $theme == default {
+    @include override('inner-border-color', #{token(hover-border-color)}, value);
+  } @else {
+    @include override('inner-border-color', theme.variable(#{$theme}-container-high), value);
+  }
+}
+
+@mixin container-tonal-hover($theme: default) {
+  @if $theme == default {
+    @include override('resize-container-inset-label-background', #{token(tonal-hover-color)}, value);
+  } @else {
+    @include override('resize-container-inset-label-background', theme.variable(#{$theme}-container-minimum), value);
+  }
+}
+
+@mixin container-filled-hover($theme: default) {
+  @if $theme == default {
+    @include override('inner-border-color', #{token(hover-border-color)}, value);
+  } @else {
+    @include override('inner-border-color', theme.variable(#{$theme}-container-high), value);
+  }
+}
+
+@mixin container-background-hover($variant, $theme: default) {
+  @if $variant == outlined {
+    @include container-background-outlined-hover($theme);
+  } @else if $variant == tonal {
+    @include container-background-tonal-hover($theme);
+  } @else if $variant == filled {
+    @include container-background-filled-hover($theme);
+  } @else if $variant == raised {
+    @include container-background-raised-hover($theme);
+  }
+}
+
+@mixin container-background-outlined-hover($theme: default) {
+  outline-style: #{token(hover-border-style)};
+  outline-width: #{token(hover-border-width)};
+
+  @if $theme == default {
+    outline-color: #{token(hover-border-color)};
+  } @else {
+    outline-color: theme.variable(#{$theme}-container-high);
+  }
+}
+
+@mixin container-background-tonal-hover($theme: default) {
+  @if $theme == default {
+    background: #{token(tonal-hover-color)};
+  } @else {
+    background: theme.variable(#{$theme}-container-minimum);
+  }
+}
+
+@mixin container-background-filled-hover($theme: default) {
+  outline-style: #{token(hover-border-style)};
+  outline-width: #{token(hover-border-width)};
+
+  @if $theme == default {
+    outline-color: #{token(hover-border-color)};
+  } @else {
+    outline-color: theme.variable(#{$theme}-container-high);
+  }
+}
+
+@mixin container-background-raised-hover($theme: default) {
+  box-shadow: #{token(raised-active-elevation)};
+}
+
+//
+// Focus
+//
+
+@mixin container-background-focus($variant) {
+  @if $variant == raised {
+    box-shadow: #{token(raised-active-elevation)};
+  }
+}
+
+//
+// Invalid
+//
+
+@mixin container-invalid($variant) {
+  @if $variant == plain {
+    @include override('input-color', #{token(invalid-color)}, value);
+    @include variant.text-color(token(invalid-color));
+  } @else if $variant == outlined {
+    @include override('inner-border-color', #{token(invalid-border-color)}, value);
+    @include variant.text-color(token(invalid-color));
+  } @else if $variant == tonal {
+    @include override('inner-border-color', #{token(invalid-border-color)}, value);
+    @include override('resize-container-inset-label-background', #{token(invalid-surface-color)}, value);
+    @include variant.text-color(token(invalid-on-surface-color));
+  } @else if $variant == filled {
+    @include override('inner-border-color', #{token(invalid-border-color)}, value);
+    @include override('resize-container-inset-label-background', #{token(invalid-surface-color)}, value);
+    @include variant.text-color(token(invalid-on-surface-color));
+  } @else if $variant == raised {
+    @include override('inner-border-color', #{token(invalid-border-color)}, value);
+    @include override('resize-container-inset-label-background', #{token(invalid-surface-color)}, value);
+    @include variant.text-color(token(invalid-on-surface-color));
+  }
+}
+
+@mixin container-background-invalid($variant) {
+  @if $variant == outlined {
+    outline-style: #{token(invalid-border-style)};
+    outline-width: #{token(invalid-border-width)};
+    outline-color: #{token(invalid-border-color)};
+  } @else if $variant == tonal {
+    background: #{token(invalid-surface-color)};
+  } @else if $variant == filled {
+    outline-style: #{token(invalid-border-style)};
+    outline-width: #{token(invalid-border-width)};
+    outline-color: #{token(invalid-border-color)};
+    background: #{token(invalid-surface-color)};
+  } @else if $variant == raised {
+    background: #{token(invalid-surface-color)};
+  }
+}
+
+@mixin container-invalid-hover($variant) {
+  @if $variant == outlined {
+    @include override('inner-border-color', #{token(invalid-border-color-hover)}, value);
+  } @else if $variant == tonal {
+    @include override('inner-border-color', #{token(invalid-border-color-hover)}, value);
+    @include override('resize-container-inset-label-background', #{token(invalid-surface-color-hover)}, value);
+  } @else if $variant == filled {
+    @include override('inner-border-color', #{token(invalid-border-color-hover)}, value);
+  }
+}
+
+@mixin container-background-invalid-hover($variant) {
+  @if $variant == outlined {
+    outline-color: #{token(invalid-border-color-hover)};
+  } @else if $variant == tonal {
+    background: #{token(invalid-surface-color-hover)};
+  } @else if $variant == filled {
+    outline-color: #{token(invalid-border-color-hover)};
+  }
+}
+
+@mixin label-invalid {
+  color: #{token(invalid-label-color)};
+}
+
+@mixin inset-label-invalid($variant) {
+  @if $variant == plain {
+    color: #{token(invalid-label-color)};
+  } @else if $variant == outlined {
+    color: #{token(invalid-label-color)};
+  } @else if $variant == tonal {
+    color: #{token(invalid-inset-label-on-surface-color)};
+  } @else if $variant == filled {
+    color: #{token(invalid-inset-label-on-surface-color)};
+  } @else if $variant == raised {
+    color: #{token(invalid-inset-label-on-surface-color)};
+  }
+}
+
+@mixin support-text-invalid {
+  color: #{token(invalid-color)};
+}
+
+//
+// Popover
+//
+
+@mixin popover-icon-expanded {
+  & > * {
+    rotate: #{token(popover-icon-open-rotation)};
+  }
+}

package/styles/field-next/_core.variant.scss

@@ -0,0 +1,225 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/theme';
+@use './token-utils' as *;
+
+//
+// Root variant
+//
+
+@mixin variant($variant, $theme: primary) {
+  @if $variant == plain {
+    @include plain($theme);
+  } @else if $variant == outlined {
+    @include outlined($theme);
+  } @else if $variant == tonal {
+    @include tonal($theme);
+  } @else if $variant == filled {
+    @include filled($theme);
+  } @else if $variant == raised {
+    @include raised($theme);
+  }
+}
+
+@mixin plain($theme: default) {
+  @include override('container-padding-inline', 'plain-container-padding-inline');
+  @include override('resize-container-inset-label-background', theme.variable(surface), value);
+
+  @if $theme == default {
+    @include text-color(token(text-color));
+  } @else {
+    @include text-color(theme.variable($theme));
+  }
+}
+
+@mixin outlined($theme: default) {
+  @include override('resize-container-inset-label-background', theme.variable(surface), value);
+
+  @if $theme == default {
+    @include override('inner-border-color', #{token(border-color)}, value);
+    @include text-color(token(text-color));
+  } @else {
+    @include override('inner-border-color', theme.variable($theme), value);
+    @include text-color(theme.variable($theme));
+  }
+}
+
+@mixin tonal($theme: default) {
+  @if $theme == default {
+    @include override('inner-border-color', #{token(tonal-inner-border-color)}, value);
+    @include override('resize-container-inset-label-background', #{token(tonal-surface-color)}, value);
+    @include text-color(token(tonal-on-surface-color));
+  } @else {
+    @include override('inner-border-color', theme.variable(#{$theme}-container-high), value);
+    @include override('resize-container-inset-label-background', theme.variable(#{$theme}-container-low), value);
+    @include text-color(theme.variable(on-#{$theme}-container-low));
+  }
+}
+
+@mixin filled($theme: default) {
+  @if $theme == default {
+    @include override('resize-container-inset-label-background', #{token(filled-surface-color)}, value);
+    @include text-color(token(text-color));
+    @include text-color(token(filled-on-surface-color));
+  } @else {
+    @include override('inner-border-color', theme.variable($theme), value);
+    @include override('resize-container-inset-label-background', theme.variable(#{$theme}-container-low), value);
+    @include text-color(theme.variable(on-#{$theme}-container-low));
+  }
+}
+
+@mixin raised($theme: default) {
+  @if $theme == default {
+    @include override('inner-border-color', #{token(tonal-inner-border-color)}, value);
+    @include override('resize-container-inset-label-background', #{token(raised-surface-color)}, value);
+    @include text-color(token(raised-on-surface-color));
+  } @else {
+    @include override('inner-border-color', theme.variable(#{$theme}-container-high), value);
+    @include override('resize-container-inset-label-background', theme.variable(#{$theme}-container-low), value);
+    @include text-color(theme.variable(on-#{$theme}-container-low));
+  }
+}
+
+@mixin text-color($color) {
+  color: $color;
+  fill: $color;
+}
+
+//
+// Container background variant
+//
+
+@mixin container-background-variant($variant, $theme: primary) {
+  @if $variant == outlined {
+    @include container-background-outlined($theme);
+  } @else if $variant == tonal {
+    @include container-background-tonal($theme);
+  } @else if $variant == filled {
+    @include container-background-filled($theme);
+  } @else if $variant == raised {
+    @include container-background-raised($theme);
+  }
+}
+
+@mixin container-background-outlined($theme: default) {
+  outline-style: #{token(border-style)};
+  outline-width: #{token(border-width)};
+
+  @if $theme == default {
+    outline-color: #{token(border-color)};
+  } @else {
+    outline-color: theme.variable($theme);
+  }
+}
+
+@mixin container-background-tonal($theme: default) {
+  @if $theme == default {
+    background: #{token(tonal-surface-color)};
+  } @else {
+    background: theme.variable(#{$theme}-container-low);
+  }
+}
+
+@mixin container-background-filled($theme: default) {
+  outline-style: #{token(border-style)};
+  outline-width: #{token(border-width)};
+
+  @if $theme == default {
+    outline-color:  #{token(border-color)};
+    background: #{token(filled-surface-color)};
+  } @else {
+    outline-color: theme.variable($theme);
+    background: theme.variable(#{$theme}-container-low);
+  }
+}
+
+@mixin container-background-raised($theme: default) {
+  box-shadow: #{token(raised-elevation)};
+
+  @if $theme == default {
+    background: #{token(raised-surface-color)};
+  } @else {
+    background: theme.variable(#{$theme}-container-low);
+  }
+}
+
+//
+// Label variant
+//
+
+@mixin label-variant($variant, $theme: default) {
+  @if $variant == plain and $theme != default {
+    color: theme.variable($theme);
+  }
+}
+
+@mixin inset-label-variant($variant, $theme: default) {
+  @if $variant == plain {
+    @include inset-label-plain($theme);
+  } @else if $variant == outlined {
+    @include inset-label-outlined($theme);
+  } @else if $variant == tonal {
+    @include inset-label-tonal($theme);
+  } @else if $variant == filled {
+    @include inset-label-filled($theme);
+  } @else if $variant == raised {
+    @include inset-label-raised($theme);
+  }
+}
+
+@mixin inset-label-plain($theme: default) {
+  @if $theme == default {
+    color: #{token(inset-label-color)};
+  } @else {
+    color: theme.variable($theme);
+  }
+}
+
+@mixin inset-label-outlined($theme: default) {
+  @if $theme == default {
+    color: #{token(inset-label-color)};
+  } @else {
+    color: theme.variable($theme);
+  }
+}
+
+@mixin inset-label-tonal($theme: default) {
+  @if $theme == default {
+    color: #{token(inset-label-color)};
+  } @else {
+    color: theme.variable(on-#{$theme}-container-low);
+  }
+}
+
+@mixin inset-label-filled($theme: default) {
+  @if $theme == default {
+    color: #{token(inset-label-color)};
+  } @else {
+    color: theme.variable(on-#{$theme}-container-low);
+  }
+}
+
+@mixin inset-label-raised($theme: default) {
+  @if $theme == default {
+    color: #{token(inset-label-color)};
+  } @else {
+    color: theme.variable(on-#{$theme}-container-low);
+  }
+}
+
+//
+// Accessory variant
+//
+
+@mixin accessory-variant($variant) {
+  @if $variant == plain {
+    &::before {
+      border-inline-start-style: none;
+    }
+  } @else if $variant == tonal or $variant == raised {
+    block-size: #{token(inner-border-block-size)};
+  }
+}

package/styles/field-next/_token-utils.scss

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