fix(field): set color and fill in default theme

tyler-technologies-oss · Jan 30, 2024 · a24234b · a24234b
1 parent 561ec8b
commit a24234b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/lib/field-next/_core.scss b/src/lib/field-next/_core.scss
@@ -42,10 +42,6 @@ $host-tokens: [display];
   grid-template-areas: 'start center end popover-icon accessory';
   grid-template-columns: auto 1fr auto auto auto;
   grid-area: container;
-
-  // transition-property: background, outline-color;
-  // transition-duration: #{token(animation-duration)};
-  // transition-timing-function: #{token(animation-timing-function)};
 
   border-radius: #{token(shape)};
   box-sizing: border-box;
@@ -100,6 +96,7 @@ $host-tokens: [display];
 }
 
 @mixin popover-icon {
+  isolation: isolate;
   align-items: center;
 
   display: flex;

diff --git a/src/lib/field-next/_core.variant.scss b/src/lib/field-next/_core.variant.scss
@@ -22,13 +22,17 @@
 @mixin container-plain($theme: default) {
   @include override('padding-inline', 0px, value);
 
-  @if $theme != default {
+  @if $theme == default {
+    @include text-color(token(text-color));
+  } @else {
     @include text-color(theme.variable($theme));
   }
 }
 
 @mixin container-outlined($theme: default) {
-  @if $theme != default {
+  @if $theme == default {
+    @include text-color(token(text-color));
+  } @else {
     @include override('inner-border-color', theme.variable($theme), value);
     @include text-color(theme.variable($theme));
   }
@@ -37,7 +41,7 @@
 @mixin container-tonal($theme: default) {
   @if $theme == default {
     @include override('inner-border-color', #{token(tonal-inner-border-color)}, value);
-    color: #{token(tonal-on-surface-color)};
+    @include text-color(token(tonal-on-surface-color));
   } @else {
     @include override('inner-border-color', theme.variable(#{$theme}-container-high), value);
     @include text-color(theme.variable(on-#{$theme}-container-low));
@@ -46,7 +50,8 @@
 
 @mixin container-filled($theme: default) {
   @if $theme == default {
-    color: #{token(filled-on-surface-color)};
+    @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 text-color(theme.variable(on-#{$theme}-container-low));
@@ -56,7 +61,7 @@
 @mixin container-raised($theme: default) {
   @if $theme == default {
     @include override('inner-border-color', #{token(tonal-inner-border-color)}, value);
-    color: #{token(raised-on-surface-color)};
+    @include text-color(token(raised-on-surface-color));
   } @else {
     @include override('inner-border-color', theme.variable(#{$theme}-container-high), value);
     @include text-color(theme.variable(on-#{$theme}-container-low));