@fkui/design 6.9.0 → 6.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.9.0",
+  "version": "6.10.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -42,8 +42,8 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.9.0",
-    "@fkui/theme-default": "6.9.0",
+    "@fkui/icon-lib-default": "6.10.0",
+    "@fkui/theme-default": "6.10.0",
     "autoprefixer": "10.4.21",
     "cssnano": "7.0.7",
     "flush-promises": "1.0.2",
@@ -51,13 +51,13 @@
     "jest-light-runner": "0.7.8",
     "jest-preset-stylelint": "7.3.0",
     "picocolors": "1.1.1",
-    "postcss": "8.5.3",
+    "postcss": "8.5.4",
     "postcss-url": "10.1.3",
     "postcss-var-func-fallback": "3.0.1",
     "svgo": "3.3.2"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.9.0",
+    "@fkui/theme-default": "^6.10.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -73,5 +73,5 @@
     "node": ">= 20",
     "npm": ">= 7"
   },
-  "gitHead": "48b871595e21338b3437afb00b21ade0030a78fb"
+  "gitHead": "e9daf74232b7f96db6d4289338ad08c7bd6f61fa"
 }

package/src/_core.scss

@@ -1 +1,2 @@
 @forward "core/mixins";
+@forward "core/utils/all";

package/src/components/_all.scss

@@ -10,7 +10,6 @@
 @use "badge/badge";
 @use "button/button";
 @use "calendar-day/calendar-day";
-@use "calendar-deprecated/calendar-deprecated";
 @use "checkbox/all" as checkbox;
 @use "chip/chip";
 @use "close-button/close-button";

package/src/components/badge/_badge.scss

@@ -1,4 +1,4 @@
-@use "../../core/utils/functions" as *;
+@use "../../core";
 @use "variables" as *;
 
 $BADGE_SELECTOR: ".badge" !default;
@@ -21,7 +21,7 @@ $BADGE_SELECTOR: ".badge" !default;
     box-sizing: border-box;
     display: inline-block;
     font-size: var(--f-font-size-standard);
-    line-height: densify(var(--f-line-height-large));
+    line-height: core.densify(var(--f-line-height-large));
     font-weight: var(--f-font-weight-normal);
     padding: 0 0.5rem;
 

package/src/components/button/_button.scss

@@ -2,7 +2,6 @@ $BUTTON_SELECTOR: ".button" !default;
 
 @use "../../core";
 @use "../../core/size";
-@use "../../core/utils/functions" as *;
 @use "variables" as *;
 
 @mixin button-group-margin($margin-bottom, $margin-right) {
@@ -19,24 +18,24 @@ $BUTTON_SELECTOR: ".button" !default;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: densify(size.$margin-050);
-    margin-top: densify(size.$margin-025);
+    margin-bottom: core.densify(size.$margin-050);
+    margin-top: core.densify(size.$margin-025);
 
     .button-group__item {
         margin: 0;
-        margin-bottom: densify(size.$margin-100);
+        margin-bottom: core.densify(size.$margin-100);
 
         @include core.breakpoint-up(md) {
-            @include button-group-margin(densify(size.$margin-100), size.$margin-125);
+            @include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
         }
     }
 
     > .button.button--discrete {
-        @include button-group-margin(densify(size.$margin-100), size.$margin-150);
+        @include button-group-margin(core.densify(size.$margin-100), size.$margin-150);
     }
 
     > .button.button--small {
-        @include button-group-margin(densify(size.$margin-075), size.$margin-075);
+        @include button-group-margin(core.densify(size.$margin-075), size.$margin-075);
         &.button--full-width {
             @include core.breakpoint-down(sm) {
                 margin-right: 0;
@@ -45,7 +44,7 @@ $BUTTON_SELECTOR: ".button" !default;
     }
 
     > .button.button--medium {
-        @include button-group-margin(densify(size.$margin-075), size.$margin-100);
+        @include button-group-margin(core.densify(size.$margin-075), size.$margin-100);
         &.button--full-width {
             @include core.breakpoint-down(sm) {
                 margin-right: 0;
@@ -55,7 +54,7 @@ $BUTTON_SELECTOR: ".button" !default;
 
     > .button.button--large {
         @include core.breakpoint-up(md) {
-            @include button-group-margin(densify(size.$margin-100), size.$margin-125);
+            @include button-group-margin(core.densify(size.$margin-100), size.$margin-125);
         }
     }
 
@@ -65,21 +64,21 @@ $BUTTON_SELECTOR: ".button" !default;
 }
 
 .button-list {
-    margin-bottom: densify(size.$margin-050);
-    margin-top: densify(size.$margin-025);
+    margin-bottom: core.densify(size.$margin-050);
+    margin-top: core.densify(size.$margin-025);
     padding-left: 0;
 
     > li button {
         margin: 0;
-        margin-bottom: densify(size.$margin-100);
+        margin-bottom: core.densify(size.$margin-100);
 
         &.button.button--small,
         &.button.button--medium {
-            margin-bottom: densify(size.$margin-075);
+            margin-bottom: core.densify(size.$margin-075);
         }
 
         &.button.button--large {
-            margin-bottom: densify(size.$margin-100);
+            margin-bottom: core.densify(size.$margin-100);
         }
     }
 }
@@ -91,9 +90,9 @@ $button--primary: (
     color: $button-primary-color-text-default,
     shadow: var(--f-button-shadow),
     shadow-hover: var(--f-button-shadow-hover),
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-primary-padding-top)),
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.densify(var(--f-button-primary-padding-top)),
     padding-right: var(--f-button-primary-padding-right),
-    padding-bottom: densify(var(--f-button-primary-padding-bottom)),
+    padding-bottom: core.densify(var(--f-button-primary-padding-bottom)),
     padding-left: var(--f-button-primary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
 ) !default;
 
@@ -105,9 +104,9 @@ $button--secondary: (
     color: $button-secondary-color-text-default,
     shadow: var(--f-button-shadow),
     shadow-hover: var(--f-button-shadow-hover),
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-secondary-padding-top)),
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.densify(var(--f-button-secondary-padding-top)),
     padding-right: var(--f-button-secondary-padding-right),
-    padding-bottom: densify(var(--f-button-secondary-padding-bottom)),
+    padding-bottom: core.densify(var(--f-button-secondary-padding-bottom)),
     padding-left: var(--f-button-secondary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
 ) !default;
 
@@ -119,9 +118,9 @@ $button--standard: (
     color: var(--f-text-color-button-standard),
     shadow: var(--f-button-shadow),
     shadow-hover: var(--f-button-shadow-hover),
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-standard-padding-top)),
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.densify(var(--f-button-standard-padding-top)),
     padding-right: var(--f-button-standard-padding-right),
-    padding-bottom: densify(var(--f-button-standard-padding-bottom)),
+    padding-bottom: core.densify(var(--f-button-standard-padding-bottom)),
     padding-left: var(--f-button-standard-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
 ) !default;
 
@@ -137,9 +136,9 @@ $button--discrete: (
     border-width: 0,
     shadow: none,
     shadow-hover: var(--f-button-shadow-hover),
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-discrete-padding-top)),
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.densify(var(--f-button-discrete-padding-top)),
     padding-right: var(--f-button-discrete-padding-right),
-    padding-bottom: densify(var(--f-button-discrete-padding-bottom)),
+    padding-bottom: core.densify(var(--f-button-discrete-padding-bottom)),
     padding-left: var(--f-button-discrete-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
 ) !default;
 
@@ -154,9 +153,9 @@ $button--discrete-inverted: (
     border-width: 0,
     shadow: none,
     shadow-hover: var(--f-button-shadow-hover),
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-discrete-padding-top)),
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.densify(var(--f-button-discrete-padding-top)),
     padding-right: var(--f-button-discrete-padding-right),
-    padding-bottom: densify(var(--f-button-discrete-padding-bottom)),
+    padding-bottom: core.densify(var(--f-button-discrete-padding-bottom)),
     padding-left: var(--f-button-discrete-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
 ) !default;
 
@@ -172,9 +171,9 @@ $button--tertiary: (
     border-width: 0,
     shadow: none,
     shadow-hover: none,
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: densify(var(--f-button-tertiary-padding-top)),
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.densify(var(--f-button-tertiary-padding-top)),
     padding-right: var(--f-button-tertiary-padding-right),
-    padding-bottom: densify(var(--f-button-tertiary-padding-bottom)),
+    padding-bottom: core.densify(var(--f-button-tertiary-padding-bottom)),
     padding-left: var(--f-button-tertiary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
 ) !default;
 
@@ -191,13 +190,13 @@ $button--tertiary: (
     justify-content: center;
     letter-spacing: var(--f-button-letter-spacing);
     line-height: var(--f-button-default-line-height);
-    margin-bottom: densify(size.$margin-150);
-    margin-top: densify(size.$margin-025);
+    margin-bottom: core.densify(size.$margin-150);
+    margin-top: core.densify(size.$margin-025);
     min-width: var(--f-button-min-width);
     /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
-    padding-top: densify(var(--f-button-default-padding-top));
+    padding-top: core.densify(var(--f-button-default-padding-top));
     padding-right: var(--f-button-default-padding-right);
-    padding-bottom: densify(var(--f-button-default-padding-bottom));
+    padding-bottom: core.densify(var(--f-button-default-padding-bottom));
     padding-left: var(--f-button-default-padding-left);
     /* stylelint-enable declaration-block-no-redundant-longhand-properties */
     position: relative;
@@ -254,9 +253,9 @@ $button--tertiary: (
 
         &--black {
             /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
-            padding-top: densify(var(--f-button-discrete-black-padding-top));
+            padding-top: core.densify(var(--f-button-discrete-black-padding-top));
             padding-right: var(--f-button-discrete-black-padding-right);
-            padding-bottom: densify(var(--f-button-discrete-black-padding-bottom));
+            padding-bottom: core.densify(var(--f-button-discrete-black-padding-bottom));
             padding-left: var(--f-button-discrete-black-padding-left);
             /* stylelint-enable declaration-block-no-redundant-longhand-properties */
             color: var(--f-text-color-default);
@@ -284,9 +283,9 @@ $button--tertiary: (
         font-weight: var(--f-font-weight-bold);
         outline-offset: size.$padding-025;
         /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
-        padding-top: densify(var(--f-button-discrete-padding-top));
+        padding-top: core.densify(var(--f-button-discrete-padding-top));
         padding-right: var(--f-button-discrete-padding-right);
-        padding-bottom: densify(var(--f-button-discrete-padding-bottom));
+        padding-bottom: core.densify(var(--f-button-discrete-padding-bottom));
         padding-left: var(--f-button-discrete-padding-left);
         /* stylelint-enable declaration-block-no-redundant-longhand-properties */
         line-height: calc(1.25 * var(--f-font-size-standard));
@@ -356,7 +355,7 @@ $button--tertiary: (
 
         &#{$BUTTON_SELECTOR}--small {
             min-width: 24px;
-            padding: densify(0.375rem) size.$padding-025;
+            padding: core.densify(0.375rem) size.$padding-025;
             text-underline-offset: 3.5px;
             &#{$BUTTON_SELECTOR}--align-text {
                 margin-left: -(size.$margin-025);
@@ -366,9 +365,9 @@ $button--tertiary: (
         &#{$BUTTON_SELECTOR}--medium {
             min-width: 8rem;
             /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
-            padding-top: densify(var(--f-button-tertiary-padding-top));
+            padding-top: core.densify(var(--f-button-tertiary-padding-top));
             padding-right: var(--f-button-tertiary-padding-right);
-            padding-bottom: densify(var(--f-button-tertiary-padding-bottom));
+            padding-bottom: core.densify(var(--f-button-tertiary-padding-bottom));
             padding-left: var(--f-button-tertiary-padding-left);
             /* stylelint-enable declaration-block-no-redundant-longhand-properties */
             &#{$BUTTON_SELECTOR}--align-text {
@@ -378,7 +377,7 @@ $button--tertiary: (
 
         &#{$BUTTON_SELECTOR}--large {
             min-width: var(--f-button-min-width);
-            padding: densify(1.125rem) 0.75rem;
+            padding: core.densify(1.125rem) 0.75rem;
             &#{$BUTTON_SELECTOR}--align-text {
                 margin-left: -(size.$margin-075);
             }
@@ -408,7 +407,7 @@ $button--tertiary: (
         font-size: 14px;
         line-height: 1.25rem;
         min-width: 4rem;
-        padding: densify(size.$padding-025) size.$padding-075;
+        padding: core.densify(size.$padding-025) size.$padding-075;
 
         @include core.breakpoint-down(sm) {
             &:not(.button--full-width) {
@@ -425,7 +424,7 @@ $button--tertiary: (
     &#{$BUTTON_SELECTOR}--medium {
         line-height: 1.5rem;
         min-width: 8rem;
-        padding: densify(0.625rem) 1.25rem;
+        padding: core.densify(0.625rem) 1.25rem;
 
         @include core.breakpoint-down(sm) {
             &:not(.button--full-width) {
@@ -437,7 +436,7 @@ $button--tertiary: (
     &#{$BUTTON_SELECTOR}--large {
         line-height: 1.5rem;
         min-width: 9.5rem;
-        padding: densify(1rem) 1.5rem;
+        padding: core.densify(1rem) 1.5rem;
 
         @include core.breakpoint-down(sm) {
             max-width: var(--f-width-full);

package/src/components/calendar-day/_calendar-day.scss

@@ -1,7 +1,8 @@
 @use "../../core/mixins/circle";
+@use "variables" as *;
 
 $CALENDAR_DAY_SELECTOR: ".calendar-day" !default;
-$calendar-highlight-border: var(--f-border-width-small) solid var(--f-border-color-calendar-highlight);
+$calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
 
 #{$CALENDAR_DAY_SELECTOR} {
     align-items: center;
@@ -11,6 +12,7 @@ $calendar-highlight-border: var(--f-border-width-small) solid var(--f-border-col
     height: 2.75rem;
     width: 100%;
 
+    // Highlight = mark today's date
     &--highlight {
         position: relative;
 
@@ -19,20 +21,18 @@ $calendar-highlight-border: var(--f-border-width-small) solid var(--f-border-col
 
             content: "";
             position: absolute;
-            border: var(--f-border-width-small) solid var(--f-border-color-calendar-highlight);
+            border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
         }
 
         &.calendar-day--selected {
             &::before {
-                border: var(--f-border-width-medium) solid var(--f-border-color-calendar-selected);
+                border: var(--f-border-width-medium) solid $calendarday-highlight-color-border-selected;
             }
         }
-        &:active:not(&--disabled) {
-            color: var(--f-text-color-default-inverted);
-            background-color: var(--f-background-calendar-selected);
 
+        &:active:not(&--disabled) {
             &::before {
-                border: var(--f-border-width-medium) solid var(--f-border-color-calendar-selected);
+                border: var(--f-border-width-medium) solid $calendarday-highlight-color-border-selected;
             }
         }
 
@@ -44,7 +44,7 @@ $calendar-highlight-border: var(--f-border-width-small) solid var(--f-border-col
 
                 content: "";
                 position: absolute;
-                border: var(--f-border-width-small) solid var(--f-border-color-calendar-highlight);
+                border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
             }
 
             &::after {
@@ -58,8 +58,8 @@ $calendar-highlight-border: var(--f-border-width-small) solid var(--f-border-col
     }
 
     &--selected {
-        color: var(--f-text-color-default-inverted);
-        background-color: var(--f-background-calendar-selected);
+        color: $calendarday-color-text-selected;
+        background-color: $calendarday-color-background-selected;
     }
 
     &--disabled {
@@ -75,12 +75,12 @@ $calendar-highlight-border: var(--f-border-width-small) solid var(--f-border-col
 
     &:hover:not(&--disabled, &--selected),
     &--hover:not(&--disabled, &--selected) {
-        background-color: var(--f-background-calendar-hover);
+        background-color: $calendarday-color-background-hover;
     }
 
     &:active:not(&--disabled),
     &--active:not(&--disabled) {
-        color: var(--f-text-color-default-inverted);
-        background-color: var(--f-background-calendar-selected);
+        color: $calendarday-color-text-selected;
+        background-color: $calendarday-color-background-selected;
     }
 }

package/src/components/calendar-day/_variables.scss

@@ -0,0 +1,10 @@
+// SELECTED DAY
+$calendarday-color-text-selected: var(--fkds-color-text-inverted);
+$calendarday-color-background-selected: var(--fkds-color-select-background-primary-default);
+
+// HOVER
+$calendarday-color-background-hover: var(--fkds-color-select-background-primary-hover);
+
+// TODAY
+$calendarday-highlight-color-border-default: var(--fkds-color-border-strong);
+$calendarday-highlight-color-border-selected: var(--fkds-color-border-inverted);

package/src/components/card/_card.scss

@@ -1,12 +1,12 @@
+@use "../../core";
 @use "../../core/size";
-@use "../../core/utils/functions" as *;
 @use "variables" as *;
 
 $CARD_SELECTOR: ".card" !default;
 
 #{$CARD_SELECTOR} {
-    padding: densify(size.$padding-100) size.$padding-100;
-    margin: densify(size.$margin-100) 0;
+    padding: core.densify(size.$padding-100) size.$padding-100;
+    margin: core.densify(size.$margin-100) 0;
 
     &--default {
         background-color: $card-color-background;
@@ -40,13 +40,13 @@ $CARD_SELECTOR: ".card" !default;
             font-size: var(--f-font-size-large);
             font-weight: var(--f-font-weight-bold);
             line-height: var(--f-line-height-large);
-            margin-bottom: densify(size.$margin-025);
+            margin-bottom: core.densify(size.$margin-025);
             display: block;
         }
     }
 
     &__footer {
-        padding-top: densify(size.$padding-125);
+        padding-top: core.densify(size.$padding-125);
 
         > .button-group {
             margin-bottom: 0;

package/src/components/checkbox/_checkbox.scss

@@ -1,7 +1,7 @@
+@use "../../core";
 @use "../../core/size";
 @use "../../core/mixins/focus" as *;
 @use "../../core/mixins/sr-only" as *;
-@use "../../core/utils/functions" as *;
 
 $checkbox_label_offset: 0.1rem;
 $CHECKBOX_SELECTOR: ".checkbox" !default;
@@ -12,7 +12,7 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
 
 #{$CHECKBOX_SELECTOR} {
     min-height: var(--f-height-medium);
-    margin-bottom: densify(size.$margin-100);
+    margin-bottom: core.densify(size.$margin-100);
 
     &:last-child {
         margin-bottom: 0;

package/src/components/datepicker-field/_datepicker-field.scss

@@ -1,7 +1,8 @@
+@use "../../core";
 @use "../../core/size";
 @use "../../core/config-variables";
 @use "../../core/mixins/breakpoints";
-@use "../../core/utils/functions" as *;
+@use "variables" as *;
 
 $DATEPICKER_FIELD_SELECTOR: ".datepicker-field" !default;
 $POPUP_SELECTOR: ".popup" !default;
@@ -14,21 +15,27 @@ $calendar-width: calc(100vw - #{$popup-spacing});
     &__button {
         background: transparent;
         border: 0;
+        border-radius: var(--f-border-radius-medium);
         flex: 0 0 auto;
         padding: 0;
         cursor: pointer;
 
         .icon {
-            color: var(--f-icon-color-primary);
+            color: $datepickerfield-f-icon-calendar-color-content-default;
             min-height: var(--f-icon-size-large);
             min-width: var(--f-icon-size-large);
-            height: densify(var(--f-icon-size-x-large));
-            width: densify(var(--f-icon-size-x-large));
+            height: core.densify(var(--f-icon-size-x-large));
+            width: core.densify(var(--f-icon-size-x-large));
             vertical-align: middle;
         }
 
+        &:hover {
+            .icon {
+                color: $datepickerfield-f-icon-calendar-color-content-hover;
+            }
+        }
         &:disabled .icon {
-            color: var(--f-icon-color-discrete);
+            color: $datepickerfield-f-icon-calendar-color-content-disabled;
         }
     }
 
@@ -36,8 +43,8 @@ $calendar-width: calc(100vw - #{$popup-spacing});
         // 16px = popup spacing (20px) - 4px
         margin-top: -16px;
         border-radius: var(--f-border-radius-medium);
-        border: var(--f-border-width-small) solid var(--f-border-color-modal);
-        background-color: var(--f-background-content);
+        border: var(--f-border-width-medium) solid $datepickerfield-popup-color-border;
+        background-color: $datepickerfield-popup-color-background;
     }
 
     &__close {

package/src/components/datepicker-field/_variables.scss

@@ -0,0 +1,8 @@
+// CALENDAR ICON BUTTON
+$datepickerfield-f-icon-calendar-color-content-default: var(--fkds-icon-color-action-content-primary-default);
+$datepickerfield-f-icon-calendar-color-content-hover: var(--fkds-icon-color-action-content-primary-hover);
+$datepickerfield-f-icon-calendar-color-content-disabled: var(--fkds-icon-color-content-disabled);
+
+// Popup
+$datepickerfield-popup-color-background: var(--fkds-color-background-primary);
+$datepickerfield-popup-color-border: var(--fkds-color-border-primary);

package/src/components/entrypoint/_entrypoint.scss

@@ -1,6 +1,6 @@
+@use "../../core";
 @use "../../core/size";
 @use "variables" as *;
-@use "../../core/utils/functions" as *;
 
 $ENTRYPOINT_SELECTOR: ".entrypoint" !default;
 
@@ -18,10 +18,10 @@ $ENTRYPOINT_SELECTOR: ".entrypoint" !default;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
-    margin-bottom: densify(size.$margin-150);
-    margin-top: densify(size.$margin-025);
+    margin-bottom: core.densify(size.$margin-150);
+    margin-top: core.densify(size.$margin-025);
     text-align: left;
-    padding: densify(size.$padding-100) size.$padding-100;
+    padding: core.densify(size.$padding-100) size.$padding-100;
     line-height: var(--f-line-height-large);
     width: 100%;
 

package/src/components/error-list/_error-list.scss

@@ -1,12 +1,12 @@
+@use "../../core";
 @use "../../core/config-variables";
 @use "../../core/size";
-@use "../../core/utils/functions" as *;
 
 $ERROR_LIST_SELECTOR: ".error-list" !default;
 
 #{$ERROR_LIST_SELECTOR} {
     color: var(--f-text-color-error);
-    margin: 0 0 densify(var(--f-margin-component-bottom));
+    margin: 0 0 core.densify(var(--f-margin-component-bottom));
 
     &--list-style-none {
         list-style-type: none;
@@ -19,7 +19,7 @@ $ERROR_LIST_SELECTOR: ".error-list" !default;
 
     &__list {
         margin: 0;
-        line-height: max(1.5, densify(2));
+        line-height: max(1.5, core.densify(2));
     }
 
     &__bullet::before {

package/src/components/expandable-panel/_expandable-panel.scss

@@ -1,8 +1,8 @@
+@use "../../core";
 @use "../../core/mixins/circle";
 @use "../../core/typography/headings";
-@use "../icon/icon";
 @use "../../core/size";
-@use "../../core/utils/functions" as *;
+@use "../icon/icon";
 
 $EXPANDABLE_PANEL_SELECTOR: ".expandable-panel" !default;
 $EXPANDABLE_PANEL_LINE_HEIGHT: var(--f-line-height-medium);
@@ -10,7 +10,7 @@ $ICON_MARGIN: 0.5rem;
 $ICON_WIDTH: var(--f-icon-size-medium);
 
 #{$EXPANDABLE_PANEL_SELECTOR} {
-    margin-bottom: densify(size.$margin-200);
+    margin-bottom: core.densify(size.$margin-200);
 
     &__icon {
         @include circle.circle($background: var(--f-icon-color-expandable-panel), $size: $ICON_WIDTH);
@@ -64,7 +64,7 @@ $ICON_WIDTH: var(--f-icon-size-medium);
             cursor: pointer;
             display: flex;
             margin: 0;
-            padding: densify(size.$padding-100) size.$padding-100;
+            padding: core.densify(size.$padding-100) size.$padding-100;
             position: relative;
             text-align: left;
             width: 100%;
@@ -108,6 +108,6 @@ $ICON_WIDTH: var(--f-icon-size-medium);
         border: var(--f-border-width-medium) solid var(--f-border-color-panel);
         border-top: 0;
         line-height: inherit;
-        padding: densify(size.$padding-150) size.$padding-150;
+        padding: core.densify(size.$padding-150) size.$padding-150;
     }
 }

package/src/components/expandable-paragraph/_expandable-paragraph.scss

@@ -1,7 +1,7 @@
+@use "../../core";
 @use "../../core/config-variables";
 @use "../../core/size";
 @use "../../core/mixins/circle" as *;
-@use "../../core/utils/functions" as *;
 
 $EXPANDABLE_PARAGRAPH_SELECTOR: ".expandable-paragraph" !default;
 $ICON_WIDTH: var(--f-icon-size-small);
@@ -10,7 +10,7 @@ $CONTENT_MARGIN: calc(#{$ICON_WIDTH} + #{$ICON_MARGIN});
 $EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);
 
 #{$EXPANDABLE_PARAGRAPH_SELECTOR} {
-    margin: 0 0 densify(var(--f-margin-component-bottom));
+    margin: 0 0 core.densify(var(--f-margin-component-bottom));
     &__heading {
         line-height: $EXPANDABLE_PARAGRAPH_LINE_HEIGHT;
         margin: 0;
@@ -80,18 +80,18 @@ $EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);
     }
 
     &__content {
-        margin-top: densify(size.$margin-075);
-        margin-bottom: densify(size.$margin-100);
+        margin-top: core.densify(size.$margin-075);
+        margin-bottom: core.densify(size.$margin-100);
     }
 
     &__separator {
         border-bottom: var(--f-border-width-medium) solid var(--f-border-color-separator);
-        margin: 0 $ICON_MARGIN densify(size.$margin-050) $ICON_MARGIN;
+        margin: 0 $ICON_MARGIN core.densify(size.$margin-050) $ICON_MARGIN;
     }
 
     &--list {
-        margin-bottom: densify(size.$margin-050);
-        padding-bottom: densify(size.$padding-050);
+        margin-bottom: core.densify(size.$margin-050);
+        padding-bottom: core.densify(size.$padding-050);
         border-bottom: var(--f-border-width-small) solid var(--f-border-color-separator);
     }
 }