diff --git a/packages/design/src/components/icon/_icon.scss b/packages/design/src/components/icon/_icon.scss index 2fa34bdd67..bd5489bc29 100644 --- a/packages/design/src/components/icon/_icon.scss +++ b/packages/design/src/components/icon/_icon.scss @@ -1,5 +1,6 @@ @use "../../core/size"; @use "../../core/utils/functions" as *; +@use "variables" as *; $ICON_SELECTOR: ".icon" !default; @@ -86,8 +87,8 @@ $ICON_SELECTOR: ".icon" !default; &--tooltip { .f-icon-circle { - color: var(--f-icon-color-info); fill: var(--f-icon-color-info); + color: var(--f-icon-color-info); } .f-icon-i { @@ -97,29 +98,29 @@ $ICON_SELECTOR: ".icon" !default; &--info { .f-icon-circle { - color: var(--f-icon-color-white); - fill: var(--f-icon-color-info); + color: $icon-info-color-background; + fill: $icon-info-color-border; } } &--warning { .f-icon-circle { - color: var(--f-icon-color-white); - fill: var(--f-icon-color-warning); + color: $icon-warning-color-background; + fill: $icon-warning-color-border; } } &--error { .f-icon-triangle { - color: var(--f-icon-color-white); - fill: var(--f-icon-color-error); + color: $icon-error-color-background; + fill: $icon-error-color-border; } } &--success { .f-icon-circle { - color: var(--f-icon-color-white); - fill: var(--f-icon-color-success); + color: $icon-success-color-background; + fill: $icon-success-color-border; } .f-icon-success { transform: scale(0.6); diff --git a/packages/design/src/components/icon/_variables.scss b/packages/design/src/components/icon/_variables.scss new file mode 100644 index 0000000000..99e857bf91 --- /dev/null +++ b/packages/design/src/components/icon/_variables.scss @@ -0,0 +1,15 @@ +// INFO +$icon-info-color-border: var(--fkds-color-feedback-border-info); +$icon-info-color-background: var(--fkds-icon-color-background-primary); + +// WARNING +$icon-warning-color-border: var(--fkds-color-feedback-border-warning); +$icon-warning-color-background: var(--fkds-icon-color-background-primary); + +// ERROR +$icon-error-color-border: var(--fkds-color-feedback-border-negative); +$icon-error-color-background: var(--fkds-icon-color-background-primary); + +// SUCCESS +$icon-success-color-border: var(--fkds-color-feedback-border-positive); +$icon-success-color-background: var(--fkds-icon-color-background-primary); diff --git a/packages/design/src/components/message-box/_message-box.scss b/packages/design/src/components/message-box/_message-box.scss index 29baee2b5f..3a68a23606 100644 --- a/packages/design/src/components/message-box/_message-box.scss +++ b/packages/design/src/components/message-box/_message-box.scss @@ -1,6 +1,7 @@ @use "../../core/size"; @use "../../core/mixins/breakpoints"; @use "../../core/utils/functions" as *; +@use "variables" as *; $MESSAGE_BOX_SELECTOR: ".message-box" !default; @@ -28,7 +29,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default; transform: translateY(-0.05rem); } &__banner { - fill: var(--f-icon-color-error); + fill: $messagebox-error-icon-error-color-border; color: white; } } @@ -52,7 +53,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default; border-collapse: separate; padding: densify(size.$padding-100) size.$padding-100; - @include make-box-variant($selector, var(--f-background-error), var(--f-border-color-error), $short-layout); + @include make-box-variant($selector, $messagebox-error-color-background, $messagebox-error-color-border, $short-layout); .iflex__item > p { margin-bottom: 0; @@ -66,7 +67,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default; &__heading { font-size: var(--f-font-size-h3); font-weight: var(--f-font-weight-medium); - color: var(--f-text-color-default); + color: $messagebox-info-color-heading; line-height: var(--f-line-height-medium); align-items: flex-start; margin-bottom: densify(size.$margin-050); @@ -78,35 +79,35 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default; } &--info { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-info), var(--f-border-color-info)); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-info-color-background, $messagebox-info-color-border); } &--info-short { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-info), var(--f-border-color-info), $short-layout: true); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-info-color-background, $messagebox-info-color-border, $short-layout: true); } &--error { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-error), var(--f-border-color-error)); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-error-color-background, $messagebox-error-color-border); } &--error-short { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-error), var(--f-border-color-error), $short-layout: true); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-error-color-background, $messagebox-error-color-border, $short-layout: true); } &--warning { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-warning), var(--f-border-color-warning)); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-warning-color-background, $messagebox-warning-color-border); } &--warning-short { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-warning), var(--f-border-color-warning), $short-layout: true); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-warning-color-background, $messagebox-warning-color-border, $short-layout: true); } &--success { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-success), var(--f-border-color-success)); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-success-color-background, $messagebox-success-color-border); } &--success-short { - @include make-box-variant($MESSAGE_BOX_SELECTOR, var(--f-background-success), var(--f-border-color-success), $short-layout: true); + @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-success-color-background, $messagebox-success-color-border, $short-layout: true); } &--banner { diff --git a/packages/design/src/components/message-box/_variables.scss b/packages/design/src/components/message-box/_variables.scss new file mode 100644 index 0000000000..5f7036cf58 --- /dev/null +++ b/packages/design/src/components/message-box/_variables.scss @@ -0,0 +1,10 @@ +$messagebox-info-color-background: var(--fkds-color-feedback-background-info); +$messagebox-info-color-border: var(--fkds-color-feedback-border-info); +$messagebox-error-color-background: var(--fkds-color-feedback-background-negative); +$messagebox-error-color-border: var(--fkds-color-feedback-border-negative); +$messagebox-warning-color-background: var(--fkds-color-feedback-background-warning); +$messagebox-warning-color-border: var(--fkds-color-feedback-border-warning); +$messagebox-success-color-background: var(--fkds-color-feedback-background-positive); +$messagebox-success-color-border: var(--fkds-color-feedback-border-positive); +$messagebox-info-color-heading: var(--fkds-color-text-primary); +$messagebox-error-icon-error-color-border: var(--fkds-icon-color-feedback-content-negative); diff --git a/packages/theme-default/src/_css-variables.scss b/packages/theme-default/src/_css-variables.scss index a86c9a122f..3fff62ff0e 100644 --- a/packages/theme-default/src/_css-variables.scss +++ b/packages/theme-default/src/_css-variables.scss @@ -57,7 +57,6 @@ --f-icon-color-primary: #{$palette-color-bluebell-100}; // select-field, file-item, file-selector, calendar --f-icon-color-discrete: #{$palette-color-fk-black-70}; // wizard-step --f-icon-color-success: #{$palette-color-green-a-85}; // message-box, text-field, form-step - --f-icon-color-warning: #{$palette-color-yellow-100}; // message-box, modal --f-icon-color-error: #{$palette-color-red-100}; // message-box, text-field, textarea, modal, file-item --f-icon-color-input: #{$palette-color-fk-black-50}; // textfield --f-icon-color-notice: #{$palette-color-tegel-100}; // expandable-panel @@ -81,8 +80,6 @@ --f-background-input-selected: #{$palette-color-bluebell-100}; // checkbox, radiobutton --f-background-input-selected-disabled: #{$palette-color-fk-black-50}; // checkbox, radiobutton --f-background-error: #{$palette-color-red-5}; // modal, messagebox - --f-background-info: #{$palette-color-bluebell-5}; // modal, messagebox, tooltip - --f-background-warning: #{$palette-color-yellow-5}; // modal, messagebox --f-background-success: #{$palette-color-green-a-5}; // modal, messagebox --f-background-overlay: rgba(0, 0, 0, 0.75); // modal, loader diff --git a/packages/theme-default/src/deprecated-variables.json b/packages/theme-default/src/deprecated-variables.json index 7349851057..070b37cb0e 100644 --- a/packages/theme-default/src/deprecated-variables.json +++ b/packages/theme-default/src/deprecated-variables.json @@ -133,5 +133,8 @@ "--f-text-color-button-tertiary-hover", "--f-background-button-tertiary-hover", "--f-text-color-button-tertiary-inverted", - "--f-text-color-button-tertiary-inverted-disabled" + "--f-text-color-button-tertiary-inverted-disabled", + "--f-icon-color-warning", + "--f-background-info", + "--f-background-warning" ] diff --git a/packages/theme-default/src/fkui-css-variables-deprecated.scss b/packages/theme-default/src/fkui-css-variables-deprecated.scss index d823576178..a15e3729e8 100644 --- a/packages/theme-default/src/fkui-css-variables-deprecated.scss +++ b/packages/theme-default/src/fkui-css-variables-deprecated.scss @@ -243,6 +243,9 @@ $palette-color-hav-20: #dbe0ec !default; --f-background-button-tertiary-hover: #{$palette-color-bluebell-15}; --f-text-color-button-tertiary-inverted: #{$palette-color-white-100}; --f-text-color-button-tertiary-inverted-disabled: #{$palette-color-fk-black-50}; + --f-icon-color-warning: #{$palette-color-yellow-100}; + --f-background-info: #{$palette-color-bluebell-5}; + --f-background-warning: #{$palette-color-yellow-5}; } @if $global {