diff --git a/packages/ffe-form/less/dropdown.less b/packages/ffe-form/less/dropdown.less index c3b59cd746..bf7f3e5f9b 100644 --- a/packages/ffe-form/less/dropdown.less +++ b/packages/ffe-form/less/dropdown.less @@ -1,12 +1,12 @@ .ffe-dropdown { appearance: none; - background-color: var(--ffe-v-input-bg-color); + background-color: var(--ffe-color-surface-primary-default); background-size: 24px 24px; background-repeat: no-repeat; background-position: calc(100% - 6px) 50%; border: 2px solid var(--ffe-g-border-color); border-radius: var(--ffe-g-border-radius); - color: var(--ffe-v-input-color); + color: var(--ffe-color-foreground-default); display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='%23005aa4' d='M480-373.539q-7.231 0-13.461-2.308-6.231-2.308-11.846-7.923L274.924-563.539q-8.308-8.307-8.5-20.884-.193-12.577 8.5-21.269 8.692-8.692 21.076-8.692t21.076 8.692L480-442.768l162.924-162.924q8.307-8.307 20.884-8.5 12.576-.192 21.268 8.5 8.693 8.692 8.693 21.077 0 12.384-8.693 21.076L505.307-383.77q-5.615 5.615-11.846 7.923-6.23 2.308-13.461 2.308Z'/%3E%3C/svg%3E%0A"); .regard-color-scheme-preference & { @@ -31,14 +31,14 @@ &:focus, &:active { - border-color: var(--ffe-v-input-bg-color); + border-color: var(--ffe-color-surface-primary-default); box-shadow: 0 0 0 2px var(--ffe-g-primary-color); outline: none; } &:focus::-ms-value { - background: var(--ffe-v-dropdown-bg-color); - color: var(--ffe-v-input-color); + background: var(--ffe-color-surface-primary-default); + color: var(--ffe-color-foreground-default); } &::-ms-expand { @@ -55,7 +55,7 @@ } &::placeholder { - color: var(--ffe-v-input-placeholder-color); + color: var(--ffe-color-foreground-subtle); opacity: 1; } } diff --git a/packages/ffe-form/less/form.less b/packages/ffe-form/less/form.less index 5c9c7649b6..3828a53553 100644 --- a/packages/ffe-form/less/form.less +++ b/packages/ffe-form/less/form.less @@ -1,5 +1,3 @@ -@import 'theme'; - /* Inputs */ @import 'input-field'; @import 'textarea'; diff --git a/packages/ffe-form/less/input-field.less b/packages/ffe-form/less/input-field.less index b9781d9e0f..3e6698f0a8 100644 --- a/packages/ffe-form/less/input-field.less +++ b/packages/ffe-form/less/input-field.less @@ -4,10 +4,10 @@ padding: var(--ffe-spacing-2xs) var(--ffe-spacing-xs); /* Increased horizontal padding */ font-family: var(--ffe-g-font); font-variant-numeric: tabular-nums; - background-color: var(--ffe-color-component-form-input-fill-default); + background-color: var(--ffe-color-surface-primary-default); color: var(--ffe-color-foreground-default); border-radius: var(--ffe-g-border-radius); - border: 2px solid var(--ffe-color-border-primary-default); + border: 1px solid var(--ffe-color-border-primary-default); transition: all var(--ffe-transition-duration) var(--ffe-ease); width: 100%; font-size: var(--ffe-fontsize-form-input); @@ -24,15 +24,14 @@ @media (hover: hover) and (pointer: fine) { &:hover { border-color: var(--ffe-color-border-primary-hover); - background-color: var( - --ffe-color-component-form-input-fill-default-hover - ); + box-shadow: 0 0 0 1px var(--ffe-color-border-primary-hover); } } &:focus, &:focus-within { - border: 2px solid var(--ffe-color-border-interactive-focus); + border: 1px solid var(--ffe-color-border-interactive-focus); + box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-focus); outline: none; } @@ -52,7 +51,7 @@ &--text-like.ffe-input-field { border: none; border-bottom: 2px solid var(--ffe-color-border-primary-default); - border-radius: var(--ffe-g-border-width) var(--ffe-g-border-width) 0 0; + border-radius: 0; box-shadow: none; text-align: center; padding: 0; @@ -75,6 +74,7 @@ } &[aria-invalid='true'] { + background: var(--ffe-color-surface-feedback-critical); border-bottom: 2px solid var(--ffe-color-border-feedback-critical); border-left-style: none; border-right-style: none; diff --git a/packages/ffe-form/less/input-group.less b/packages/ffe-form/less/input-group.less index 2d0bcb64b2..3879f02cf0 100644 --- a/packages/ffe-form/less/input-group.less +++ b/packages/ffe-form/less/input-group.less @@ -18,6 +18,7 @@ &__description { margin-bottom: var(--ffe-spacing-xs); + color: var(--ffe-color-foreground-subtle); } &--message { diff --git a/packages/ffe-form/less/phone-number.less b/packages/ffe-form/less/phone-number.less index 7cedcb924d..ece2c0d2d9 100644 --- a/packages/ffe-form/less/phone-number.less +++ b/packages/ffe-form/less/phone-number.less @@ -41,13 +41,14 @@ &__plus { font-weight: 400; line-height: 1; - padding: var(--ffe-v-input-padding); - background-color: var(--ffe-v-input-bg-color); - border: var(--ffe-g-border-width) solid var(--ffe-g-border-color); + padding: 12px var(--ffe-spacing-sm); + background-color: var(--ffe-color-surface-primary-default); + border: var(--ffe-g-border-width) solid + var(--ffe-color-border-primary-default); border-radius: var(--ffe-g-border-radius) 0 0 var(--ffe-g-border-radius); border-right: 0; transition: border-color var(--ffe-transition-duration) var(--ffe-ease); - color: var(--ffe-v-input-color); + color: var(--ffe-color-foreground-default); display: flex; align-items: center; } diff --git a/packages/ffe-form/less/textarea.less b/packages/ffe-form/less/textarea.less index f6a51a69dd..66b293f27f 100644 --- a/packages/ffe-form/less/textarea.less +++ b/packages/ffe-form/less/textarea.less @@ -1,40 +1,41 @@ .ffe-textarea { display: block; width: 100%; - padding: var(--ffe-v-input-padding); + padding: 12px var(--ffe-spacing-sm); font-family: var(--ffe-g-font); font-variant-numeric: tabular-nums; border-radius: var(--ffe-g-border-radius); - border: var(--ffe-g-border-width) solid var(--ffe-g-border-color); - background-color: var(--ffe-v-input-bg-color); - color: var(--ffe-v-input-color); + border: 1px solid var(--ffe-color-border-primary-default); + background-color: var(--ffe-color-surface-primary-default); + color: var(--ffe-color-foreground-default); transition: border-color var(--ffe-transition-duration) var(--ffe-ease); font-size: var(--ffe-fontsize-form-input); @media (hover: hover) and (pointer: fine) { &:hover { - border-color: var(--ffe-g-primary-color); + border-color: var(--ffe-color-border-primary-hover); + box-shadow: 0 0 0 1px var(--ffe-color-border-primary-hover); } } &:focus, &:active { - border: var(--ffe-g-border-width-focus) solid var(--ffe-g-primary-color); + border: 1px solid var(--ffe-color-border-interactive-focus); + box-shadow: 0 0 0 1px var(--ffe-color-border-interactive-focus); outline: none; } &::placeholder { - color: var(--ffe-v-input-placeholder-color); + color: var(--ffe-color-foreground-subtle); opacity: 1; } } .ffe-textarea--invalid, :where(textarea).ffe-textarea[aria-invalid='true'] { - border-color: var(--ffe-g-error-color); - border-style: solid; + border: 1px solid var(--ffe-color-border-feedback-critical); &:focus { - border: var(--ffe-g-border-width-focus) solid var(--ffe-g-error-color); + box-shadow: 0 0 0 1px var(--ffe-color-border-feedback-critical); } } diff --git a/packages/ffe-form/less/theme.less b/packages/ffe-form/less/theme.less deleted file mode 100644 index 42cc2f63ae..0000000000 --- a/packages/ffe-form/less/theme.less +++ /dev/null @@ -1,48 +0,0 @@ -:root, -:host { - --ffe-v-input-color: var(--ffe-farge-svart); - --ffe-v-input-bg-color: var(--ffe-farge-hvit); - --ffe-v-input-placeholder-color: var(--ffe-farge-moerkgraa); - --ffe-v-input-padding: 12px var(--ffe-spacing-sm); - --ffe-v-info-message-icon-color: var(--ffe-g-secondary-color); - --ffe-v-info-message-icon-fill: var(--ffe-farge-hvit); - --ffe-v-dropdown-bg-color: var(--ffe-farge-hvit); - --ffe-v-success-message-icon-color: var(--ffe-farge-skog); - --ffe-v-success-message-icon-fill: var(--ffe-farge-hvit); - --ffe-v-error-message-icon-color: var(--ffe-g-error-color); - --ffe-v-error-message-icon-fill: var(--ffe-farge-hvit); - --ffe-v-text-on-colored-bg-color: var(--ffe-farge-hvit); - --ffe-v-checkbox-color: var(--ffe-g-border-color); - --ffe-v-checkbox-selected-color: var(--ffe-g-primary-color); - --ffe-v-checkbox-marker-color: var(--ffe-g-primary-color); - --ffe-v-checkbox-focus-outline-color: var(--ffe-g-primary-color); - --ffe-v-radio-button-label-color: var(--ffe-g-primary-color); - --ffe-v-toggle-switch-box-shadow: 0 0 0 3px var(--ffe-farge-hvit), - 0 0 0 5px var(--ffe-g-primary-color); - --ffe-v-toggle-switch-hover-color: var(--ffe-farge-moerkgraa); - --ffe-v-tooltip-icon-color: var(--ffe-g-primary-color); - --ffe-v-tooltip-border-color: var(--ffe-g-border-color); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-input-color: var(--ffe-farge-hvit); - --ffe-v-input-bg-color: var(--ffe-farge-svart); - --ffe-v-input-placeholder-color: var(--ffe-farge-graa); - --ffe-v-info-message-icon-color: var(--ffe-farge-vann-70); - --ffe-v-info-message-icon-fill: var(--ffe-farge-fjell); - --ffe-v-dropdown-bg-color: var(--ffe-farge-koksgraa); - --ffe-v-success-message-icon-color: var(--ffe-farge-skog-70); - --ffe-v-success-message-icon-fill: var(--ffe-farge-fjell); - --ffe-v-error-message-icon-fill: var(--ffe-farge-fjell); - --ffe-v-checkbox-selected-color: var(--ffe-farge-vann-70); - --ffe-v-checkbox-marker-color: var(--ffe-farge-vann-30); - --ffe-v-checkbox-focus-outline-color: var(--ffe-farge-hvit); - --ffe-v-radio-button-label-color: var(--ffe-farge-hvit); - --ffe-v-toggle-switch-box-shadow: 0 0 0 3px var(--ffe-farge-svart), - 0 0 0 5px var(--ffe-farge-hvit); - --ffe-v-toggle-switch-hover-color: var(--ffe-farge-moerkgraa); - --ffe-v-tooltip-icon-color: var(--ffe-farge-vann-70); - --ffe-v-tooltip-border-color: var(--ffe-farge-graa); - } - } -} diff --git a/packages/ffe-form/less/toggle-switch.less b/packages/ffe-form/less/toggle-switch.less index a654704699..291c7e0c12 100644 --- a/packages/ffe-form/less/toggle-switch.less +++ b/packages/ffe-form/less/toggle-switch.less @@ -12,7 +12,7 @@ align-items: center; position: relative; cursor: pointer; - color: var(--ffe-g-secondary-color); + color: var(--ffe-color-foreground-default); font-family: var(--ffe-g-font); font-variant-numeric: tabular-nums; min-height: 44px; @@ -51,7 +51,7 @@ content: ''; width: 56px; height: 30px; - background: var(--ffe-g-border-color); + background: var(--ffe-color-component-toggleswitch-fill-default); border-radius: 52px; left: auto; right: 0; @@ -65,7 +65,7 @@ content: ''; width: 24px; height: 24px; - background: var(--ffe-v-input-bg-color); + background: var(--ffe-color-surface-primary-default); border-radius: 50%; position: absolute; left: 4px; @@ -74,7 +74,9 @@ @media (hover: hover) and (pointer: fine) { .ffe-toggle-switch__label:hover &::before { - background: var(--ffe-v-toggle-switch-hover-color); + background: var( + --ffe-color-component-toggleswitch-fill-default-hover + ); } } } @@ -84,12 +86,14 @@ } &__input:checked + &__label &__switch::before { - background: var(--ffe-g-primary-color); + background: var(--ffe-color-component-toggleswitch-fill-selected); } @media (hover: hover) and (pointer: fine) { &__input:checked + &__label:hover &__switch::before { - background: var(--ffe-g-secondary-color); + background: var( + --ffe-color-component-toggleswitch-fill-selected-hover + ); } } @@ -98,6 +102,14 @@ } &__input:focus + &__label &__switch::before { - box-shadow: var(--ffe-v-toggle-switch-box-shadow); + box-shadow: + 0 0 0 3px var(--ffe-color-surface-primary-default), + 0 0 0 5px var(--ffe-color-border-interactive-focus); + } + + :active + &__label &__switch::before { + background: var( + --ffe-color-component-toggleswitch-fill-default-pressed + ); } }