diff --git a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx index 01d21c9ab..d4517a052 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx @@ -34,7 +34,7 @@ export default function Phone({ disabled = false, label, name = "phoneNumber", - placeholder = "", + placeholder, readOnly = false, registerOptions = { required: true, diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css b/apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css index db208169e..1917df96f 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css @@ -1,15 +1,15 @@ .helpText { align-items: flex-start; display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .error { align-items: center; color: var(--Text-Interactive-Error); display: flex; - gap: var(--Spacing-x-half); - margin: var(--Spacing-x1) 0 0; + gap: var(--Space-x05); + margin: var(--Space-x1) 0 0; } .error svg { diff --git a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx index c912b9a20..b02709fc9 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx @@ -24,7 +24,7 @@ export default function PasswordInput({ label, "aria-label": ariaLabel, disabled = false, - placeholder = "", + placeholder, registerOptions = {}, visibilityToggleable = true, isNewPassword = false, diff --git a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css index 88f3789ec..72945fac8 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css @@ -1,79 +1,22 @@ -.container { - align-content: center; - background-color: var(--Main-Grey-White); - border-color: var(--Scandic-Beige-40); - border-style: solid; - border-width: 1px; - border-radius: var(--Corner-radius-md); - display: grid; - height: 60px; - padding: var(--Spacing-x1) var(--Spacing-x2); - transition: border-color 200ms ease; - position: relative; -} - -.container:has(.input:active, .input:focus) { - border-color: var(--Scandic-Blue-90); -} - -.container:has(.input:disabled) { - background-color: var(--Main-Grey-10); - border: none; - color: var(--Main-Grey-40); -} - -.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) { - border-color: var(--Scandic-Red-60); -} - -.input { - background: none; - border: none; - color: var(--Main-Grey-100); - height: 18px; - margin: 0; - order: 2; - overflow: visible; - padding: 0; -} - -.input:not(:active, :focus):placeholder-shown { - height: 0px; - transition: height 150ms ease; -} - -.input:focus, -.input:focus:placeholder-shown, -.input:active, -.input:active:placeholder-shown { - height: 18px; - transition: height 150ms ease; - outline: none; -} - -.input:disabled { - color: var(--Main-Grey-40); -} - .helpText { align-items: flex-start; display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .error { align-items: center; - color: var(--Scandic-Red-60); + color: var(--Text-Interactive-Error); display: flex; - gap: var(--Spacing-x-half); - margin: var(--Spacing-x1) 0 0; + gap: var(--Space-x05); + margin: var(--Space-x1) 0 0; } .errors { display: flex; flex-wrap: wrap; - gap: var(--Spacing-x-one-and-half) var(--Spacing-x1); - padding-top: var(--Spacing-x1); + gap: var(--Space-x15) var(--Space-x1); + padding-top: var(--Space-x1); } .inputWrapper {