mid in refactoring text field

deven-org · Mar 14, 2024 · c13e0aa · c13e0aa
1 parent e715ff9
commit c13e0aa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 28 deletions.
diff --git a/packages/ui-library/src/components/input-field-text/index.css.ts b/packages/ui-library/src/components/input-field-text/index.css.ts
@@ -1,8 +1,8 @@
 import { typeSafeNestedCss } from "../../utils/css-in-ts/nested-typesafe-css-literals";
 
-import { renderThemedCssStrings } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
-export const styleCustom = typeSafeNestedCss`
+export const styleCustom = typeSafeNestedCss/* css */ `
   .blr-input-field-text {
     display: flex;
     flex-direction: column;
@@ -24,16 +24,12 @@ export const styleCustom = typeSafeNestedCss`
   .noPointerEvents {
     pointer-events: none;
   }
-`;
-
-export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTextDark } = renderThemedCssStrings(
-  (_componentTokens, semanticTokens) => {
-    const { inputfield, inputslot, labelslot } = semanticTokens.sem.forms;
-    const { InputIcon } = _componentTokens.cmp;
 
-    return typeSafeNestedCss`
-      .blr-input-field-text {
+  ${SemanticThemeIterator((theme, sem, typeSafeCss) => {
+    const { inputfield, inputslot, labelslot } = sem.forms;
 
+    return typeSafeCss/* css */ `
+     .blr-input-field-text.${theme} {
         &.sm {
 
           & > .label-wrapper {
@@ -210,7 +206,13 @@ export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTex
           background-color: ${inputfield.container.bgcolor.default.hover};
 
           &.blr-input-icon {
-            color: ${InputIcon.Icon.IconColor.Hover};
+            color: ${
+              ""
+              /* 
+                TODO: dont mix cmp and sem
+                $ {InputIcon.Icon.IconColor.Hover};
+              */
+            }
           }
 
           &.error-input:not(.disabled) + .blr-input-icon {
@@ -310,8 +312,7 @@ export const { tokenizedLight: inputFieldTextLight, tokenizedDark: inputFieldTex
             background: transparent;
             color: ${inputfield.userinput.textcolor.error.rest};
           }
-        }
-      }
-    `;
-  }
-);
+      }      
+    }`;
+  })}
+`;
diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts
@@ -2,8 +2,6 @@ import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { formDark, formLight } from '../../foundation/semantic-tokens/form.css';
-import { inputFieldTextLight, inputFieldTextDark } from './index.css';
 import { InputTypes, FormSizesType, SizesType } from '../../globals/types';
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
@@ -101,28 +99,28 @@ export class BlrInputFieldText extends LitElement {
 
   protected render() {
     if (this.size) {
-      const dynamicStyles = this.theme === 'Light' ? [formLight, inputFieldTextLight] : [formDark, inputFieldTextDark];
-
       const wasInitialPasswordField = Boolean(this.type === 'password');
 
       const classes = classMap({
-        [`${this.size}`]: this.size,
+        'blr-input-field-text': true,
+        [this.size]: this.size,
+        [this.theme]: this.theme,
       });
 
       const inputClasses = classMap({
-        [`${this.size}`]: this.size,
+        [this.size]: this.size,
       });
 
       const inputContainerClasses = classMap({
         'focus': this.isFocused || false,
         'error-input': this.hasError || false,
         'disabled': this.disabled || false,
-        [`${this.size}`]: this.size,
+        [this.size]: this.size,
       });
 
       const iconClasses = classMap({
         'blr-input-icon': true,
-        [`${this.size}`]: this.size,
+        [this.size]: this.size,
         'noPointerEvents': Boolean(this.disabled || this.readonly),
       });
 
@@ -161,10 +159,7 @@ export class BlrInputFieldText extends LitElement {
       `;
 
       return html`
-        <style>
-          ${dynamicStyles}
-        </style>
-        <div class="blr-input-field-text ${classes}">
+        <div class="${classes}">
           ${this.hasLabel
             ? html`
                 <div class="label-wrapper">