@fkui/design 5.46.0 → 6.0.0

package/src/components/label/_label.scss

@@ -40,7 +40,7 @@ $LABEL_SELECTOR: ".label" !default;
         display: block;
         font-weight: var(--f-font-weight-normal);
 
-        &--discrete {
+        &--format {
             color: var(--f-text-color-discrete);
         }
     }

package/src/components/logo/_logo.scss

@@ -0,0 +1,35 @@
+@use "../../core/mixins/breakpoints";
+
+$LOGO_SELECTOR: ".logo" !default;
+
+#{$LOGO_SELECTOR} {
+    display: inline-block;
+
+    &--small {
+        padding: var(--f-logo-size-small);
+        background: var(--f-logo-image-small);
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    &--large {
+        padding: var(--f-logo-size-large);
+        background: var(--f-logo-image-large);
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    &--responsive {
+        padding: var(--f-logo-size-large);
+        background: var(--f-logo-image-large);
+        background-repeat: no-repeat;
+        background-position: center;
+
+        @include breakpoints.breakpoint-only(sm) {
+            padding: var(--f-logo-size-small);
+            background: var(--f-logo-image-small);
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    }
+}

package/src/components/modal/_modal.scss

@@ -77,16 +77,6 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
                     max-width: $size;
                 }
             }
-
-            // @deprecated alias, use --large (to be removed in fkui 4.x)
-            &-large {
-                max-width: map.get($modal-sizes, "large");
-            }
-
-            // @deprecated alias, use --fullwidth (to be removed in fkui 4.x)
-            &-fullscreen {
-                max-width: map.get($modal-sizes, "fullwidth");
-            }
         }
 
         // mobile sizes

package/src/components/page-header/_page-header.scss

@@ -1,14 +1,7 @@
 @use "../../core/size";
-@use "../../core/mixins/breakpoints";
-@use "../../core/config-variables";
 
-$assets-primary-logo-path: "#{config-variables.$asset-path}/infrastructure/web/assets/images" !default;
 $PAGE_HEADER_SELECTOR: ".page-header" !default;
 $page-header-separator-width: 1px !default;
-$page-header-logo-small-size: 0.8rem;
-$page-header-logo-large-size: 12.39rem;
-$fk-logo-small: "fk-logo-primary-small.svg";
-$fk-logo-large: "fk-logo-primary-large.svg";
 
 #{$PAGE_HEADER_SELECTOR} {
     display: flex;
@@ -26,35 +19,7 @@ $fk-logo-large: "fk-logo-primary-large.svg";
         padding: 0;
         align-items: center;
         box-sizing: border-box;
-        &--small {
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-position: center;
-            padding: $page-header-logo-small-size;
-            background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-small}");
-        }
-        &--large {
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-color: var(--f-background-pageheader-primary);
-            padding: $page-header-logo-small-size calc($page-header-logo-large-size / 2);
-            background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-large}");
-        }
-        &--responsive {
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-color: var(--f-background-pageheader-primary);
-            padding: $page-header-logo-small-size calc($page-header-logo-large-size / 2);
-            background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-large}");
 
-            @include breakpoints.breakpoint-only(sm) {
-                min-width: $page-header-logo-small-size;
-                padding: $page-header-logo-small-size;
-                background-image: url("#{config-variables.$asset-path-images}/#{$fk-logo-small}");
-            }
-        }
         & > a {
             display: inline-flex;
         }

package/src/core/mixins/_button.scss

@@ -1,4 +1,5 @@
 @use "focus";
+@use "variables" as *;
 
 @mixin make-button-variant(
     $name,
@@ -8,18 +9,18 @@
     $color,
     $color--hover: $color,
     $color--focus: $color--hover,
-    $color--disabled: var(--f-text-color-button-disabled),
+    $color--disabled: $button-color-text-disabled,
     $icon-color: $color,
     $icon-color--hover: $color--hover,
     $icon-color--focus: $color--focus,
     $icon-color--disabled: $color--disabled,
     $background-color--hover: $background-color,
     $background-color--focus: $background-color--hover,
-    $background-color--disabled: var(--f-background-button-disabled),
-    $border-color: transparent,
+    $background-color--disabled: $button-color-background-disabled,
+    $border-color: $button-color-border-default,
     $border-color--hover: $border-color,
     $border-color--focus: $border-color--hover,
-    $border-color--disabled: var(--f-border-color-button-disabled),
+    $border-color--disabled: $button-color-border-disabled,
     $border-width: var(--f-border-width-medium),
     $padding-top,
     $padding-right,

package/src/core/mixins/_variables.scss

@@ -0,0 +1,4 @@
+$button-color-border-default: transparent;
+$button-color-background-disabled: var(--fkds-color-action-background-disabled);
+$button-color-border-disabled: var(--fkds-color-action-border-disabled);
+$button-color-text-disabled: var(--fkds-color-action-text-disabled);

package/stylelint/rules/deprecatedVariable/index.js

@@ -1,5 +1,5 @@
 const stylelint = require("stylelint");
-const deprecatedVariables = require("@fkui/css-variables/dist/deprecated-variables.json");
+const deprecatedVariables = require("@fkui/theme-default/dist/deprecated-variables.json");
 
 /**
  * @typedef { import("postcss").Root } Root