From 2cbc0676e35a1763119da28d5cfd8f1edcad773d Mon Sep 17 00:00:00 2001
From: "christian.b.hoffmann" <christian.b.hoffmann@accenture.com>
Date: Mon, 22 Jan 2024 17:09:43 +0100
Subject: [PATCH] reset css.ts

---
 .../forms/number-input/index.css.ts           | 358 +++++++++---------
 1 file changed, 177 insertions(+), 181 deletions(-)

diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/forms/number-input/index.css.ts
index 376d97a50..d2199c001 100644
--- a/packages/ui-library/src/components/forms/number-input/index.css.ts
+++ b/packages/ui-library/src/components/forms/number-input/index.css.ts
@@ -1,181 +1,173 @@
-import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss as css } from "../../../utils/nested-typesafe-css-literals";
 import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
 
-import { componentTokens } from "../../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-const { NumberInput } = componentTokens.Forms;
-
 export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
   const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius, SM, MD, LG, PrefixSuffix } = semanticTokens.Forms;
   const { StepperCombo } = componentTokens.Action;
+  const { NumberInput } = componentTokens.Forms;
 
-  return typeSafeNestedCss`
+  return css`
     .noPointerEvents {
       pointer-events: none;
     }
 
     .input-wrapper {
+      box-sizing: border-box;
+      width: 100%;
       outline: ${Input.Default.Rest.width} ${Input.Default.Rest.style} ${Input.Default.Rest.color};
       border-radius: ${InputBorderRadius};
 
-      > input {
-        border: none;
-        outline: none;
-        color: inherit;
-      }
-
-      .unit{
-        color:${PrefixSuffix.OnPopulatedField.Default.Rest};
-      }
+      &:focus-within {
+        outline: ${Input.Default.Focus.width} ${Input.Default.Focus.style} ${Input.Default.Focus.color};
+        background-color: ${SurfaceFill.Default.Focus};
 
-      > * {
-        background-color: transparent;
-      }
+        & > input {
+          color: ${UserInput.Default.Focus};
 
-      &.split {
-        &.sm {
-          > .custom-stepper-button {
-            width: ${StepperCombo.SM.Vertical.Width};
+          &::placeholder {
+            color: ${Placeholder.Default.Focus};
           }
-          
         }
+      }
+    }
 
-        &.md {
-          > .custom-stepper-button {
-            width: ${StepperCombo.MD.Vertical.Width};
-          }
-        }
+    .input-unit-container {
+      &.sm {
+        gap: ${NumberInput.Input.TextContainer.ItemSpacing.SM};
+      }
 
-        &.lg {
-          > .custom-stepper-button {
-            width: ${StepperCombo.LG.Vertical.Width};
-          }
-        }
-        > .unit {
-          text-align: left;
-        }
-  
-        > input {
-          text-align: right;
-          &.sm{
-            padding-right:${NumberInput.InputField.TextWrapper.ItemSpacing.SM};
-          }
+      &.md {
+        gap: ${NumberInput.Input.TextContainer.ItemSpacing.MD};
+      }
 
-          &.md{
-            padding-right:${NumberInput.InputField.TextWrapper.ItemSpacing.MD};
-          }
+      &.lg {
+        gap: ${NumberInput.Input.TextContainer.ItemSpacing.LG};
+      }
 
-          &.lg{
-            padding-right:${NumberInput.InputField.TextWrapper.ItemSpacing.LG};
-          }
-        }
+      .unit {
+        color: ${PrefixSuffix.OnPopulatedField.Default.Rest};
       }
+    }
 
-      > .unit,
-      input {
-        &.sm {
-          font-weight: ${SM.UserInput.fontWeight};
-          font-size: ${SM.UserInput.fontSize};
-          font-family: ${SM.UserInput.fontFamily}, sans-serif;
-          line-height: ${SM.UserInput.lineHeight};
-          padding: ${SM.InputField.Padding};
+    input {
+      border: none;
+      outline: none;
+    }
 
-        }
+    & > * {
+      background-color: transparent;
+    }
 
-        &.md {
-          font-weight: ${MD.UserInput.fontWeight};
-          font-size: ${MD.UserInput.fontSize};
-          font-family: ${MD.UserInput.fontFamily}, sans-serif;
-          line-height: ${MD.UserInput.lineHeight};
-          padding: ${MD.InputField.Padding};
+    .split {
+      &.sm {
+        & > .custom-stepper-button {
+          width: ${StepperCombo.SM.Vertical.Width};
         }
+      }
 
-        &.lg {
-          font-weight: ${LG.UserInput.fontWeight};
-          font-size: ${LG.UserInput.fontSize};
-          font-family: ${LG.UserInput.fontFamily}, sans-serif;
-          line-height: ${LG.UserInput.lineHeight};
-          padding: ${LG.InputField.Padding};
+      &.md {
+        & > .custom-stepper-button {
+          width: ${StepperCombo.MD.Vertical.Width};
         }
-
       }
 
-      &.disabled {
-        outline: ${Input.Default.Disabled.width} ${Input.Default.Disabled.style} ${Input.Default.Disabled.color};
-        background-color: ${SurfaceFill.Default.Disabled};
-        cursor: not-allowed;
-
-        & > input {
-          color: ${UserInput.Default.Disabled};
-          cursor: not-allowed;
-
-          &::placeholder {
-            color: ${Placeholder.Default.Disabled};
-          }
+      &.lg {
+        & > .custom-stepper-button {
+          width: ${StepperCombo.LG.Vertical.Width};
         }
       }
+    }
 
-      &:focus-within {
-        outline: ${Input.Default.Focus.width} ${Input.Default.Focus.style} ${Input.Default.Focus.color};
-        background-color: ${SurfaceFill.Default.Focus};
+    .unit,
+    input {
+      &.sm {
+        font-weight: ${SM.UserInput.fontWeight};
+        font-size: ${SM.UserInput.fontSize};
+        font-family: ${SM.UserInput.fontFamily}, sans-serif;
+        line-height: ${SM.UserInput.lineHeight};
+        padding: ${SM.InputField.Padding};
+      }
 
-        & > input {
-          color: ${UserInput.Default.Focus};
+      &.md {
+        font-weight: ${MD.UserInput.fontWeight};
+        font-size: ${MD.UserInput.fontSize};
+        font-family: ${MD.UserInput.fontFamily}, sans-serif;
+        line-height: ${MD.UserInput.lineHeight};
+        padding: ${MD.InputField.Padding};
+      }
 
-          &::placeholder {
-            color: ${Placeholder.Default.Focus};
-          }
-        }
+      &.lg {
+        font-weight: ${LG.UserInput.fontWeight};
+        font-size: ${LG.UserInput.fontSize};
+        font-family: ${LG.UserInput.fontFamily}, sans-serif;
+        line-height: ${LG.UserInput.lineHeight};
+        padding: ${LG.InputField.Padding};
       }
+    }
 
-      &.error-input {
-        outline: ${Input.Error.Rest.width} ${Input.Error.Rest.style} ${Input.Error.Rest.color};
-        color: ${UserInput.Error.Rest};
-        background-color: ${SurfaceFill.Error.Rest};
+    &.disabled {
+      outline: ${Input.Default.Disabled.width} ${Input.Default.Disabled.style} ${Input.Default.Disabled.color};
+      background-color: ${SurfaceFill.Default.Disabled};
+      cursor: not-allowed;
+
+      & > input {
+        color: ${UserInput.Default.Disabled};
+        cursor: not-allowed;
 
         &::placeholder {
-          color: ${Placeholder.Error.Rest};
+          color: ${Placeholder.Default.Disabled};
         }
+      }
+    }
 
-        &:hover {
-          outline: ${Input.Error.Hover.width} ${Input.Error.Hover.style} ${Input.Error.Hover.color};
-          color: ${UserInput.Error.Hover};
-          background-color: ${SurfaceFill.Error.Hover};
+    &.error-input {
+      outline: ${Input.Error.Rest.width} ${Input.Error.Rest.style} ${Input.Error.Rest.color};
+      color: ${UserInput.Error.Rest};
+      background-color: ${SurfaceFill.Error.Rest};
 
-          &::placeholder {
-            color: ${Placeholder.Error.Hover};
-          }
-        }
+      &::placeholder {
+        color: ${Placeholder.Error.Rest};
+      }
 
-        &:active {
-          outline: ${Input.Error.Pressed.width} ${Input.Error.Pressed.style} ${Input.Error.Pressed.color};
-          color: ${UserInput.Error.Pressed};
-          background-color: ${SurfaceFill.Error.Pressed};
+      &:hover {
+        outline: ${Input.Error.Hover.width} ${Input.Error.Hover.style} ${Input.Error.Hover.color};
+        color: ${UserInput.Error.Hover};
+        background-color: ${SurfaceFill.Error.Hover};
 
-          &::placeholder {
-            color: ${Placeholder.Error.Pressed};
-          }
+        &::placeholder {
+          color: ${Placeholder.Error.Hover};
         }
+      }
 
-        &:focus-within {
-          outline: ${Input.Error.Focus.width} ${Input.Error.Focus.style} ${Input.Error.Focus.color};
-          color: ${UserInput.Error.Focused};
-          background-color: ${SurfaceFill.Error.Focus};
+      &:active {
+        outline: ${Input.Error.Pressed.width} ${Input.Error.Pressed.style} ${Input.Error.Pressed.color};
+        color: ${UserInput.Error.Pressed};
+        background-color: ${SurfaceFill.Error.Pressed};
 
-          &::placeholder {
-            color: ${Placeholder.Error.Focus};
-          }
+        &::placeholder {
+          color: ${Placeholder.Error.Pressed};
         }
       }
 
-      &[readonly] {
-        outline: ${Input.Default.Hover.width} ${Input.Default.ReadOnly.style} ${Input.Default.ReadOnly.color};
-        background-color: ${SurfaceFill.Default.ReadOnly};
+      &:focus-within {
+        outline: ${Input.Error.Focus.width} ${Input.Error.Focus.style} ${Input.Error.Focus.color};
+        color: ${UserInput.Error.Focused};
+        background-color: ${SurfaceFill.Error.Focus};
 
         &::placeholder {
-          color: ${Placeholder.Default.ReadOnly};
+          color: ${Placeholder.Error.Focus};
         }
       }
     }
+
+    &.readonly {
+      outline: ${Input.Default.Hover.width} ${Input.Default.ReadOnly.style} ${Input.Default.ReadOnly.color};
+      background-color: ${SurfaceFill.Default.ReadOnly};
+
+      &::placeholder {
+        color: ${Placeholder.Default.ReadOnly};
+      }
+    }
   `;
 });
 
@@ -184,7 +176,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
     const { StepperCombo } = componentTokens.Action;
     const { Silent } = semanticTokens.Action;
 
-    return typeSafeNestedCss`
+    return css`
       .stepper-combo {
         &.horizontal {
           display: grid;
@@ -194,7 +186,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           &.sm {
             width: ${StepperCombo.SM.Horizontal.Width};
 
-            > blr-divider {
+            & > blr-divider {
               padding: ${StepperCombo.SM.Horizontal.DividerWrapper.Padding};
             }
           }
@@ -202,7 +194,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           &.md {
             width: ${StepperCombo.MD.Horizontal.Width};
 
-            > blr-divider {
+            & > blr-divider {
               padding: ${StepperCombo.MD.Horizontal.DividerWrapper.Padding};
             }
           }
@@ -210,11 +202,10 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           &.lg {
             width: ${StepperCombo.LG.Horizontal.Width};
 
-            > blr-divider {
+            & > blr-divider {
               padding: ${StepperCombo.LG.Horizontal.DividerWrapper.Padding};
             }
           }
-         
         }
 
         &.vertical {
@@ -225,7 +216,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           &.sm {
             width: ${StepperCombo.SM.Vertical.Width};
 
-            > blr-divider {
+            & > blr-divider {
               padding: ${StepperCombo.SM.Vertical.DividerWrapper.Padding};
             }
           }
@@ -233,7 +224,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           &.md {
             width: ${StepperCombo.MD.Vertical.Width};
 
-            > blr-divider {
+            & > blr-divider {
               padding: ${StepperCombo.MD.Vertical.DividerWrapper.Padding};
             }
           }
@@ -241,7 +232,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           &.lg {
             width: ${StepperCombo.LG.Vertical.Width};
 
-            > blr-divider {
+            & > blr-divider {
               padding: ${StepperCombo.LG.Vertical.DividerWrapper.Padding};
             }
           }
@@ -284,73 +275,78 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
   }
 );
 
-export const baseStyle = typeSafeNestedCss`
+export const baseStyle = css`
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
   .input-wrapper {
     display: flex;
     overflow: hidden;
     box-sizing: border-box;
 
-    & > input::-webkit-outer-spin-button,
-    & > input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
+    .input-unit-container {
+      display: flex;
     }
 
-    > input {
-      flex-grow: 1;
+    .input-unit-container .unit.prepend {
+      grid-area: first;
+      padding-right: 0;
+      order: -2;
     }
 
-    > input[type="number"] {
-      -moz-appearance: textfield;
+    .input-unit-container input.prepend {
+      grid-area: second;
+      padding-left: 0;
     }
 
-    &.split {
-      > button:first-of-type {
-        order: -2;
-      }
+    .input-unit-container .unit:not(.prepend) {
+      grid-area: second;
+      padding-left: 0;
+    }
 
-      .unit {
-        order: 0;
-        padding-left:0;
-      }
-   
-      .unit.prepend {
-        order: -1;
-        text-align: right;
-        padding-right:0;
-      }
+    .input-unit-container input:not(.prepend) {
+      grid-area: first;
+      padding-right: 0;
+    }
 
-      > input.prepend {
-        text-align: left;
-      }
-      
-      > button:last-of-type {
-        margin-left:auto;
-      }
-      > input{
-        padding-right:0;
-      }
+    .input-unit-container.split {
+      flex: 1;
+      display: inline-grid;
+      grid-template-columns: 1fr auto auto 1fr;
+      grid-template-areas: "left-gap first second right-gap";
     }
 
-    &.horizontal,
-    &.vertical {
-      .unit.prepend {
-        order: -1;
-        padding-right:0;
-      }
-      > input.prepend{
-        &.sm{
-        padding-left:${NumberInput.InputField.TextWrapper.ItemSpacing.SM};
-        }
+    .input-unit-container.split .input-container > input {
+      text-align: center;
+    }
 
-        &.md{
-          padding-left:${NumberInput.InputField.TextWrapper.ItemSpacing.MD};
-        }
-        
-        &.lg{
-          padding-left:${NumberInput.InputField.TextWrapper.ItemSpacing.LG};
-        }
-      }
+    .input-unit-container.split input {
+      text-align: left;
+    }
+  }
+
+  .split > button:first-of-type {
+    order: -2;
+  }
+
+  .split > button:last-of-type {
+    _margin-left: auto;
+  }
+
+  &:not(.split) {
+    .input-unit-container {
+      width: 100%;
+    }
+
+    .input-unit-container input:not(.prepend) {
+      width: 100%;
     }
   }
 `;