@fkui/theme-default 6.22.0 → 6.23.0

package/src/dark/_variables.scss

@@ -0,0 +1,85 @@
+@use "../palette-variables" as *;
+
+@mixin variables {
+    // TEXT
+    --fkds-color-text-primary: #{$palette-color-fk-black-15};
+    --fkds-color-text-secondary: #{$palette-color-fk-black-30};
+    --fkds-color-text-inverted: #{$palette-color-fk-black-100};
+    --fkds-color-text-disabled: #{$palette-color-fk-black-50};
+
+    // BACKGROUND
+    --fkds-color-background-primary: #{$palette-color-fk-black-100};
+    --fkds-color-background-secondary: #{$palette-color-fk-black-100};
+    --fkds-color-background-tertiary: #{$palette-color-fk-black-50};
+    --fkds-color-background-disabled: #{$palette-color-fk-black-70};
+
+    // BORDER
+    --fkds-color-border-primary: #{$palette-color-fk-black-30};
+    --fkds-color-border-strong: #{$palette-color-fk-black-15};
+    --fkds-color-border-weak: #{$palette-color-fk-black-50};
+    --fkds-color-border-disabled: #{$palette-color-fk-black-30};
+    --fkds-color-border-inverted: #{$palette-color-fk-black-100};
+
+    // ACTION - TEXT
+    --fkds-color-action-text-primary-default: #{$palette-color-bluebell-50};
+    --fkds-color-action-text-primary-hover: #{$palette-color-bluebell-15};
+    --fkds-color-action-text-primary-active: #{$palette-color-bluebell-15};
+    --fkds-color-action-text-primary-focus: #{$palette-color-bluebell-15};
+    --fkds-color-action-text-secondary-default: #{$palette-color-fk-black-15};
+    --fkds-color-action-text-secondary-hover: #{$palette-color-bluebell-15};
+    --fkds-color-action-text-secondary-active: #{$palette-color-bluebell-15};
+    --fkds-color-action-text-secondary-focus: #{$palette-color-bluebell-5};
+    --fkds-color-action-text-inverted-default: #{$palette-color-fk-black-100};
+    --fkds-color-action-text-inverted-hover: #{$palette-color-fk-black-100};
+    --fkds-color-action-text-inverted-active: #{$palette-color-fk-black-100};
+    --fkds-color-action-text-inverted-focus: #{$palette-color-fk-black-100};
+
+    // ACTION - BACKGROUND
+    --fkds-color-action-background-primary-default: #{$palette-color-bluebell-50};
+    --fkds-color-action-background-primary-hover: #{$palette-color-bluebell-15};
+    --fkds-color-action-background-primary-active: #{$palette-color-bluebell-15};
+    --fkds-color-action-background-primary-focus: #{$palette-color-bluebell-15};
+    --fkds-color-action-background-secondary-default: #{$palette-color-fk-black-100};
+    --fkds-color-action-background-secondary-hover: #{$palette-color-fk-black-70};
+    --fkds-color-action-background-secondary-active: #{$palette-color-fk-black-70};
+    --fkds-color-action-background-secondary-focus: #{$palette-color-fk-black-70};
+
+    // ACTION - BORDER
+    --fkds-color-action-border-primary-default: #{$palette-color-bluebell-50};
+    --fkds-color-action-border-primary-hover: #{$palette-color-bluebell-15};
+    --fkds-color-action-border-primary-active: #{$palette-color-bluebell-15};
+    --fkds-color-action-border-primary-focus: #{$palette-color-bluebell-15};
+
+    // FEEDBACK - BACKGROUND
+    --fkds-color-feedback-background-neutral: #{$palette-color-fk-black-100};
+    --fkds-color-feedback-background-neutral-strong: #{$palette-color-fk-black-30};
+    --fkds-color-feedback-background-info: #{$palette-color-fk-black-100};
+    --fkds-color-feedback-background-info-strong: #{$palette-color-bluebell-50};
+    --fkds-color-feedback-background-positive: #{$palette-color-fk-black-100};
+    --fkds-color-feedback-background-positive-strong: #{$palette-color-green-a-50};
+    --fkds-color-feedback-background-warning: #{$palette-color-fk-black-100};
+    --fkds-color-feedback-background-warning-strong: #{$palette-color-yellow-50};
+    --fkds-color-feedback-background-negative: #{$palette-color-fk-black-100};
+    --fkds-color-feedback-background-negative-strong: #{$palette-color-red-50};
+
+    // FEEDBACK - BORDER
+    --fkds-color-feedback-border-neutral: #{$palette-color-fk-black-50};
+    --fkds-color-feedback-border-info: #{$palette-color-bluebell-50};
+    --fkds-color-feedback-border-positive: #{$palette-color-green-a-50};
+    --fkds-color-feedback-border-warning: #{$palette-color-yellow-50};
+    --fkds-color-feedback-border-negative: #{$palette-color-red-50};
+
+    // FEEDBACK - TEXT
+    --fkds-color-feedback-text-negative: #{$palette-color-red-50};
+    --fkds-color-feedback-text-positive: #{$palette-color-green-a-50};
+
+    // SELECT - BACKGROUND
+    --fkds-color-select-background-primary-default: #{$palette-color-bluebell-50};
+    --fkds-color-select-background-primary-hover: #{$palette-color-bluebell-85};
+    --fkds-color-select-background-primary-active: #{$palette-color-bluebell-85};
+    --fkds-color-select-background-primary-focus: #{$palette-color-bluebell-85};
+    --fkds-color-select-background-secondary-default: #{$palette-color-green-a-50};
+    --fkds-color-select-background-secondary-hover: #{$palette-color-green-a-85};
+    --fkds-color-select-background-secondary-active: #{$palette-color-green-a-85};
+    --fkds-color-select-background-secondary-focus: #{$palette-color-green-a-85};
+}

package/src/deprecated-variables.json

@@ -202,5 +202,38 @@
     "--f-text-color-button-discrete-disabled",
     "--f-text-color-button-discrete-inverted",
     "--f-text-color-button-discrete-inverted-disabled",
-    " --f-icon-color-discrete"
+    "--f-icon-color-discrete",
+    "--fkds-icon-color-action-content-primary-default",
+    "--fkds-icon-color-action-content-primary-hover",
+    "--fkds-icon-color-action-content-primary-active",
+    "--fkds-icon-color-action-content-primary-focus",
+    "--fkds-icon-color-action-content-secondary-default",
+    "--fkds-icon-color-action-content-secondary-hover",
+    "--fkds-icon-color-action-content-secondary-active",
+    "--fkds-icon-color-action-content-secondary-focus",
+    "--fkds-icon-color-action-content-weak-default",
+    "--fkds-icon-color-action-content-inverted-default",
+    "--fkds-icon-color-action-content-inverted-hover",
+    "--fkds-icon-color-action-content-inverted-active",
+    "--fkds-icon-color-action-content-inverted-focus",
+    "--fkds-icon-color-feedback-content-info",
+    "--fkds-icon-color-feedback-content-positive",
+    "--fkds-icon-color-feedback-content-warning",
+    "--fkds-icon-color-feedback-content-negative",
+    "--fkds-icon-color-feedback-background-info",
+    "--fkds-icon-color-feedback-background-positive",
+    "--fkds-icon-color-feedback-background-warning",
+    "--fkds-icon-color-feedback-background-negative",
+    "--fkds-icon-color-feedback-border-info",
+    "--fkds-icon-color-feedback-border-positive",
+    "--fkds-icon-color-feedback-border-warning",
+    "--fkds-icon-color-feedback-border-negative",
+    "--fkds-icon-color-content-primary",
+    "--fkds-icon-color-background-primary",
+    "--fkds-icon-color-border-primary",
+    "--fkds-icon-color-content-disabled",
+    "--fkds-icon-color-content-inverted",
+    "--f-icon-color-error",
+    "--f-text-color-error",
+    "--f-icon-color-info"
 ]

package/src/fkui-css-variables-deprecated.scss

@@ -1,6 +1,6 @@
 // stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
 
-@use "./palette-variables" as *;
+@use "palette-variables" as *;
 
 $global: true !default;
 $palette-color-red-10: #fdeaea !default;
@@ -313,6 +313,41 @@ $palette-color-hav-20: #dbe0ec !default;
     --f-text-color-button-discrete-disabled: #{$palette-color-fk-black-50};
     --f-text-color-button-discrete-inverted: #{$palette-color-white-100};
     --f-text-color-button-discrete-inverted-disabled: #{$palette-color-bluebell-15};
+
+    // Deprecated since v6.23.0
+    --fkds-icon-color-action-content-primary-default: #{$palette-color-bluebell-100};
+    --fkds-icon-color-action-content-primary-hover: #{$palette-color-bluebell-120};
+    --fkds-icon-color-action-content-primary-active: #{$palette-color-bluebell-120};
+    --fkds-icon-color-action-content-primary-focus: #{$palette-color-bluebell-120};
+    --fkds-icon-color-action-content-secondary-default: #{$palette-color-fk-black-100};
+    --fkds-icon-color-action-content-secondary-hover: #{$palette-color-bluebell-120};
+    --fkds-icon-color-action-content-secondary-active: #{$palette-color-bluebell-120};
+    --fkds-icon-color-action-content-secondary-focus: #{$palette-color-bluebell-120};
+    --fkds-icon-color-action-content-weak-default: #{$palette-color-fk-black-70};
+    --fkds-icon-color-action-content-inverted-default: #{$palette-color-white-100};
+    --fkds-icon-color-action-content-inverted-hover: #{$palette-color-white-100};
+    --fkds-icon-color-action-content-inverted-active: #{$palette-color-white-100};
+    --fkds-icon-color-action-content-inverted-focus: #{$palette-color-white-100};
+    --fkds-icon-color-feedback-content-info: #{$palette-color-fk-black-100};
+    --fkds-icon-color-feedback-content-positive: #{$palette-color-fk-black-100};
+    --fkds-icon-color-feedback-content-warning: #{$palette-color-fk-black-100};
+    --fkds-icon-color-feedback-content-negative: #{$palette-color-fk-black-100};
+    --fkds-icon-color-feedback-background-info: #{$palette-color-bluebell-5};
+    --fkds-icon-color-feedback-background-positive: #{$palette-color-green-a-5};
+    --fkds-icon-color-feedback-background-warning: #{$palette-color-yellow-5};
+    --fkds-icon-color-feedback-background-negative: #{$palette-color-red-5};
+    --fkds-icon-color-feedback-border-info: #{$palette-color-bluebell-100};
+    --fkds-icon-color-feedback-border-positive: #{$palette-color-green-a-85};
+    --fkds-icon-color-feedback-border-warning: #{$palette-color-yellow-100};
+    --fkds-icon-color-feedback-border-negative: #{$palette-color-red-100};
+    --fkds-icon-color-content-primary: #{$palette-color-fk-black-100};
+    --fkds-icon-color-background-primary: #{$palette-color-white-100};
+    --fkds-icon-color-border-primary: #{$palette-color-fk-black-100};
+    --fkds-icon-color-content-disabled: #{$palette-color-fk-black-50};
+    --fkds-icon-color-content-inverted: #{$palette-color-white-100};
+    --f-icon-color-error: #{$palette-color-red-100};
+    --f-text-color-error: #{$palette-color-red-85};
+    --f-icon-color-info: #{$palette-color-bluebell-100};
 }
 
 @if $global {

package/src/fkui-css-variables.scss

@@ -1,20 +1,15 @@
 // stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
 
-@use "version" as *;
-@use "semantic-tokens" as semantic-tokens;
-@use "css-variables" as css-variables;
-
-$global: true !default;
+@use "light/theme" as light;
 
 @mixin css-variables {
-    @include semantic-tokens.css-variables;
-    @include css-variables.css-variables;
+    @include light.theme;
 }
 
+$global: true !default;
+
 @if $global {
     :root {
-        --fkui-theme-default-version: "#{$version}";
-
         @include css-variables;
     }
 }

package/src/light/_theme.scss

@@ -0,0 +1,10 @@
+@use "../shared" as shared;
+@use "variables" as light;
+@use "../version" as *;
+
+@mixin theme {
+    @include shared.variables;
+    @include light.variables;
+
+    --fkui-theme-default-version: "#{$version}";
+}

package/src/{_semantic-tokens.scss → light/_variables.scss}

@@ -1,6 +1,6 @@
-@use "palette-variables" as *;
+@use "../palette-variables" as *;
 
-@mixin css-variables {
+@mixin variables {
     // TEXT
     --fkds-color-text-primary: #{$palette-color-fk-black-100};
     --fkds-color-text-secondary: #{$palette-color-fk-black-70};
@@ -82,40 +82,4 @@
     --fkds-color-select-background-secondary-hover: #{$palette-color-green-a-15};
     --fkds-color-select-background-secondary-active: #{$palette-color-green-a-15};
     --fkds-color-select-background-secondary-focus: #{$palette-color-green-a-15};
-
-    // ICON
-    --fkds-icon-color-content-primary: #{$palette-color-fk-black-100};
-    --fkds-icon-color-background-primary: #{$palette-color-white-100};
-    --fkds-icon-color-border-primary: #{$palette-color-fk-black-100};
-    --fkds-icon-color-content-disabled: #{$palette-color-fk-black-50};
-    --fkds-icon-color-content-inverted: #{$palette-color-white-100};
-
-    // ICON - ACTION
-    --fkds-icon-color-action-content-primary-default: #{$palette-color-bluebell-100};
-    --fkds-icon-color-action-content-primary-hover: #{$palette-color-bluebell-120};
-    --fkds-icon-color-action-content-primary-active: #{$palette-color-bluebell-120};
-    --fkds-icon-color-action-content-primary-focus: #{$palette-color-bluebell-120};
-    --fkds-icon-color-action-content-secondary-default: #{$palette-color-fk-black-100};
-    --fkds-icon-color-action-content-secondary-hover: #{$palette-color-bluebell-120};
-    --fkds-icon-color-action-content-secondary-active: #{$palette-color-bluebell-120};
-    --fkds-icon-color-action-content-secondary-focus: #{$palette-color-bluebell-120};
-    --fkds-icon-color-action-content-weak-default: #{$palette-color-fk-black-70};
-    --fkds-icon-color-action-content-inverted-default: #{$palette-color-white-100};
-    --fkds-icon-color-action-content-inverted-hover: #{$palette-color-white-100};
-    --fkds-icon-color-action-content-inverted-active: #{$palette-color-white-100};
-    --fkds-icon-color-action-content-inverted-focus: #{$palette-color-white-100};
-
-    // ICON - FEEDBACK
-    --fkds-icon-color-feedback-content-info: #{$palette-color-fk-black-100};
-    --fkds-icon-color-feedback-content-positive: #{$palette-color-fk-black-100};
-    --fkds-icon-color-feedback-content-warning: #{$palette-color-fk-black-100};
-    --fkds-icon-color-feedback-content-negative: #{$palette-color-fk-black-100};
-    --fkds-icon-color-feedback-background-info: #{$palette-color-bluebell-5};
-    --fkds-icon-color-feedback-background-positive: #{$palette-color-green-a-5};
-    --fkds-icon-color-feedback-background-warning: #{$palette-color-yellow-5};
-    --fkds-icon-color-feedback-background-negative: #{$palette-color-red-5};
-    --fkds-icon-color-feedback-border-info: #{$palette-color-bluebell-100};
-    --fkds-icon-color-feedback-border-positive: #{$palette-color-green-a-85};
-    --fkds-icon-color-feedback-border-warning: #{$palette-color-yellow-100};
-    --fkds-icon-color-feedback-border-negative: #{$palette-color-red-100};
 }

package/src/{_css-variables.scss → shared/_index.scss}

@@ -1,15 +1,14 @@
 // stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
 
-@use "palette-variables" as *;
+@use "../palette-variables" as *;
 
-@mixin css-variables {
+@mixin variables {
     // ***********
     // TEXT COLORS
     // ***********
     --f-text-color-default: #{$palette-color-fk-black-100}; // global
     --f-text-color-default-inverted: #{$palette-color-white-100}; // global
     --f-text-color-discrete: #{$palette-color-fk-black-70}; // label, table
-    --f-text-color-error: #{$palette-color-red-85}; // label, error-list
 
     --f-text-color-link: #{$palette-color-bluebell-100};
     --f-text-color-link-hover: #{$palette-color-fk-black-100};
@@ -39,10 +38,9 @@
     // ICON COLORS
     // ***********
     --f-icon-color-white: #{$palette-color-white-100}; // global
-    --f-icon-color-info: #{$palette-color-bluebell-100}; // message-box, modal, tooltip
+
     --f-icon-color-primary: #{$palette-color-bluebell-100}; // select-field, file-item, file-selector, calendar
     --f-icon-color-success: #{$palette-color-green-a-85}; // message-box, text-field, form-step
-    --f-icon-color-error: #{$palette-color-red-100}; // message-box, text-field, textarea, modal, file-item
     --f-icon-color-notice: #{$palette-color-tegel-100}; // expandable-panel
     --f-icon-color-loader: #{$palette-color-green-a-85};
     --f-icon-color-expandable-panel: #{$palette-color-white-100};

package/src/theme-auto.scss

@@ -0,0 +1,7 @@
+// stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
+
+@use "auto/theme" as auto;
+
+:root {
+    @include auto.theme;
+}

package/src/theme-dark.scss

@@ -0,0 +1,7 @@
+// stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
+
+@use "dark/theme" as dark;
+
+:root {
+    @include dark.theme;
+}

package/src/theme-light.scss

@@ -0,0 +1,7 @@
+// stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
+
+@use "light/theme" as light;
+
+:root {
+    @include light.theme;
+}