@fkui/design 6.13.0 → 6.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fkui/design",
-  "version": "6.13.0",
+  "version": "6.14.0",
   "description": "fkui design",
   "keywords": [
     "fkui",
@@ -31,8 +31,9 @@
   ],
   "scripts": {
     "build": "node build.mjs",
-    "clean": "rimraf .jest-cache coverage lib test-results",
+    "clean": "rimraf .jest-cache coverage lib temp test-results",
     "test": "jest --coverage",
+    "posttest": "sass -p node --no-source-map tests:temp/tests",
     "unit": "jest",
     "unit:watch": "jest --watch"
   },
@@ -41,10 +42,10 @@
     "runner": "jest-light-runner"
   },
   "devDependencies": {
-    "@fkui/icon-lib-default": "6.13.0",
-    "@fkui/theme-default": "6.13.0",
+    "@fkui/icon-lib-default": "6.14.0",
+    "@fkui/theme-default": "6.14.0",
     "autoprefixer": "10.4.21",
-    "cssnano": "7.0.7",
+    "cssnano": "7.1.0",
     "flush-promises": "1.0.2",
     "glob": "11.0.3",
     "jest-light-runner": "0.7.9",
@@ -56,7 +57,7 @@
     "svgo": "4.0.0"
   },
   "peerDependencies": {
-    "@fkui/theme-default": "^6.13.0",
+    "@fkui/theme-default": "^6.14.0",
     "sass": "^1.40.0",
     "stylelint": ">= 14"
   },
@@ -73,5 +74,5 @@
     "npm": ">= 7"
   },
   "sass": "./src/fkui.scss",
-  "gitHead": "15534e9b913041fd573a064252a987c8d9df94b7"
+  "gitHead": "be0e617deddf3bf47dcee46b025980be6dff86fa"
 }

package/src/components/_index.scss

@@ -0,0 +1,95 @@
+@forward "anchor/variables";
+@forward "badge/variables";
+@forward "button/variables";
+@forward "calendar-day/variables";
+@forward "card/variables";
+@forward "checkbox/variables";
+@forward "chip/variables";
+@forward "close-button/variables";
+@forward "combobox/variables";
+@forward "contextmenu/variables";
+@forward "crud-dataset/variables";
+@forward "datepicker-field/variables";
+@forward "dialogue-tree/variables";
+@forward "entrypoint/variables";
+@forward "error-list/variables";
+@forward "expandable-panel/variables";
+@forward "expandable-paragraph/variables";
+@forward "fieldset/variables";
+@forward "file-item/variables";
+@forward "file-selector/variables";
+@forward "file-uploader/variables";
+@forward "group/variables";
+@forward "icon/variables";
+@forward "indent/variables";
+@forward "label/variables";
+@forward "layout-application-template/variables";
+@forward "layout-navigation/variables";
+@forward "layout-secondary/variables";
+@forward "list/variables";
+@forward "loader/variables";
+@forward "logo/variables";
+@forward "message-box/variables";
+@forward "modal/variables";
+@forward "navigation-menu/variables";
+@forward "offline/variables";
+@forward "output-field/variables";
+@forward "page-header/variables";
+@forward "progressbar/variables";
+@forward "radio-button/variables";
+@forward "select-field/variables";
+@forward "sort-filter-dataset/variables";
+@forward "static-panel/variables";
+@forward "table/variables";
+@forward "text-field/variables";
+@forward "textarea-field/variables";
+@forward "tooltip/variables";
+@forward "wizard/variables";
+
+@use "anchor";
+@use "badge";
+@use "button";
+@use "calendar-day";
+@use "card";
+@use "checkbox";
+@use "chip";
+@use "close-button";
+@use "combobox";
+@use "contextmenu";
+@use "crud-dataset";
+@use "datepicker-field";
+@use "dialogue-tree";
+@use "entrypoint";
+@use "error-list";
+@use "expandable-panel";
+@use "expandable-paragraph";
+@use "fieldset";
+@use "file-item";
+@use "file-selector";
+@use "file-uploader";
+@use "group";
+@use "icon";
+@use "indent";
+@use "label";
+@use "layout-application-template";
+@use "layout-navigation";
+@use "layout-secondary";
+@use "list";
+@use "loader";
+@use "logo";
+@use "message-box";
+@use "modal";
+@use "navigation-menu";
+@use "offline";
+@use "output-field";
+@use "page-header";
+@use "progressbar";
+@use "radio-button";
+@use "select-field";
+@use "sort-filter-dataset";
+@use "static-panel";
+@use "table";
+@use "text-field";
+@use "textarea-field";
+@use "tooltip";
+@use "wizard";

package/src/components/anchor/_anchor.scss

@@ -1,11 +1,10 @@
-$ANCHOR_SELECTOR: ".anchor" !default;
 $anchor-svg-margin: 0.25rem;
 @use "../../core/mixins/anchor";
 
-#{$ANCHOR_SELECTOR} {
+.anchor {
     @include anchor.anchor;
 
-    &#{$ANCHOR_SELECTOR}--block {
+    &.anchor--block {
         display: inline-flex;
 
         & > svg,
@@ -15,7 +14,7 @@ $anchor-svg-margin: 0.25rem;
         }
     }
 
-    &#{$ANCHOR_SELECTOR}--discrete {
+    &.anchor--discrete {
         color: var(--f-text-color-link-discrete);
         text-decoration-color: var(--f-border-color-link-discrete);
 

package/src/components/anchor/_index.scss

@@ -0,0 +1 @@
+@use "anchor";

package/src/components/anchor/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/badge/_badge.scss

@@ -1,9 +1,7 @@
 @use "../../core";
 @use "variables" as *;
 
-$BADGE_SELECTOR: ".badge" !default;
-
-@mixin make-badge-variant($BADGE_SELECTOR, $text-color, $background-color, $border-color: "") {
+@mixin make-badge-variant($text-color, $background-color, $border-color: "") {
     color: $text-color;
     background-color: $background-color;
 
@@ -14,7 +12,7 @@ $BADGE_SELECTOR: ".badge" !default;
     }
 }
 
-#{$BADGE_SELECTOR} {
+.badge {
     border-radius: var(--f-border-radius-medium);
     border-style: solid;
     border-width: var(--f-border-width-small);
@@ -26,62 +24,42 @@ $BADGE_SELECTOR: ".badge" !default;
     padding: 0 0.5rem;
 
     &--default {
-        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-default, $badge-color-background-default);
+        @include make-badge-variant($badge-color-text-default, $badge-color-background-default);
     }
 
     &--default-inverted {
-        @include make-badge-variant(
-            $BADGE_SELECTOR,
-            $badge-color-text-default-inverted,
-            $badge-color-background-default-inverted,
-            $badge-color-border-default-inverted
-        );
+        @include make-badge-variant($badge-color-text-default-inverted, $badge-color-background-default-inverted, $badge-color-border-default-inverted);
     }
 
     &--warning {
-        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-warning, $badge-color-background-warning);
+        @include make-badge-variant($badge-color-text-warning, $badge-color-background-warning);
     }
 
     &--warning-inverted {
-        @include make-badge-variant(
-            $BADGE_SELECTOR,
-            $badge-color-text-warning-inverted,
-            $badge-color-background-warning-inverted,
-            $badge-color-border-warning-inverted
-        );
+        @include make-badge-variant($badge-color-text-warning-inverted, $badge-color-background-warning-inverted, $badge-color-border-warning-inverted);
     }
 
     &--error {
-        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-error, $badge-color-background-error);
+        @include make-badge-variant($badge-color-text-error, $badge-color-background-error);
     }
 
     &--error-inverted {
-        @include make-badge-variant(
-            $BADGE_SELECTOR,
-            $badge-color-text-error-inverted,
-            $badge-color-background-error-inverted,
-            $badge-color-border-error-inverted
-        );
+        @include make-badge-variant($badge-color-text-error-inverted, $badge-color-background-error-inverted, $badge-color-border-error-inverted);
     }
 
     &--success {
-        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-success, $badge-color-background-success);
+        @include make-badge-variant($badge-color-text-success, $badge-color-background-success);
     }
 
     &--success-inverted {
-        @include make-badge-variant(
-            $BADGE_SELECTOR,
-            $badge-color-text-success-inverted,
-            $badge-color-background-success-inverted,
-            $badge-color-border-success-inverted
-        );
+        @include make-badge-variant($badge-color-text-success-inverted, $badge-color-background-success-inverted, $badge-color-border-success-inverted);
     }
 
     &--info {
-        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-info, $badge-color-background-info);
+        @include make-badge-variant($badge-color-text-info, $badge-color-background-info);
     }
 
     &--info-inverted {
-        @include make-badge-variant($BADGE_SELECTOR, $badge-color-text-info-inverted, $badge-color-background-info-inverted, $badge-color-border-info-inverted);
+        @include make-badge-variant($badge-color-text-info-inverted, $badge-color-background-info-inverted, $badge-color-border-info-inverted);
     }
 }

package/src/components/badge/_index.scss

@@ -0,0 +1 @@
+@use "badge";

package/src/components/badge/_variables.scss

@@ -1,25 +1,25 @@
-$badge-color-text-default: var(--fkds-color-text-primary);
-$badge-color-background-default: var(--fkds-color-feedback-background-neutral-strong);
-$badge-color-text-default-inverted: var(--fkds-color-text-primary);
-$badge-color-background-default-inverted: var(--fkds-color-feedback-background-neutral);
-$badge-color-border-default-inverted: var(--fkds-color-feedback-border-neutral);
-$badge-color-text-warning: var(--fkds-color-text-primary);
-$badge-color-background-warning: var(--fkds-color-feedback-background-warning-strong);
-$badge-color-text-warning-inverted: var(--fkds-color-text-primary);
-$badge-color-background-warning-inverted: var(--fkds-color-feedback-background-warning);
-$badge-color-border-warning-inverted: var(--fkds-color-feedback-border-warning);
-$badge-color-text-error: var(--fkds-color-text-inverted);
-$badge-color-background-error: var(--fkds-color-feedback-background-negative-strong);
-$badge-color-text-error-inverted: var(--fkds-color-text-primary);
-$badge-color-background-error-inverted: var(--fkds-color-feedback-background-negative);
-$badge-color-border-error-inverted: var(--fkds-color-feedback-border-negative);
-$badge-color-text-success: var(--fkds-color-text-inverted);
-$badge-color-background-success: var(--fkds-color-feedback-background-positive-strong);
-$badge-color-text-success-inverted: var(--fkds-color-text-primary);
-$badge-color-background-success-inverted: var(--fkds-color-feedback-background-positive);
-$badge-color-border-success-inverted: var(--fkds-color-feedback-border-positive);
-$badge-color-text-info: var(--fkds-color-text-inverted);
-$badge-color-background-info: var(--fkds-color-feedback-background-info-strong);
-$badge-color-text-info-inverted: var(--fkds-color-text-primary);
-$badge-color-background-info-inverted: var(--fkds-color-feedback-background-info);
-$badge-color-border-info-inverted: var(--fkds-color-feedback-border-info);
+$badge-color-text-default: var(--fkds-color-text-primary) !default;
+$badge-color-background-default: var(--fkds-color-feedback-background-neutral-strong) !default;
+$badge-color-text-default-inverted: var(--fkds-color-text-primary) !default;
+$badge-color-background-default-inverted: var(--fkds-color-feedback-background-neutral) !default;
+$badge-color-border-default-inverted: var(--fkds-color-feedback-border-neutral) !default;
+$badge-color-text-warning: var(--fkds-color-text-primary) !default;
+$badge-color-background-warning: var(--fkds-color-feedback-background-warning-strong) !default;
+$badge-color-text-warning-inverted: var(--fkds-color-text-primary) !default;
+$badge-color-background-warning-inverted: var(--fkds-color-feedback-background-warning) !default;
+$badge-color-border-warning-inverted: var(--fkds-color-feedback-border-warning) !default;
+$badge-color-text-error: var(--fkds-color-text-inverted) !default;
+$badge-color-background-error: var(--fkds-color-feedback-background-negative-strong) !default;
+$badge-color-text-error-inverted: var(--fkds-color-text-primary) !default;
+$badge-color-background-error-inverted: var(--fkds-color-feedback-background-negative) !default;
+$badge-color-border-error-inverted: var(--fkds-color-feedback-border-negative) !default;
+$badge-color-text-success: var(--fkds-color-text-inverted) !default;
+$badge-color-background-success: var(--fkds-color-feedback-background-positive-strong) !default;
+$badge-color-text-success-inverted: var(--fkds-color-text-primary) !default;
+$badge-color-background-success-inverted: var(--fkds-color-feedback-background-positive) !default;
+$badge-color-border-success-inverted: var(--fkds-color-feedback-border-positive) !default;
+$badge-color-text-info: var(--fkds-color-text-inverted) !default;
+$badge-color-background-info: var(--fkds-color-feedback-background-info-strong) !default;
+$badge-color-text-info-inverted: var(--fkds-color-text-primary) !default;
+$badge-color-background-info-inverted: var(--fkds-color-feedback-background-info) !default;
+$badge-color-border-info-inverted: var(--fkds-color-feedback-border-info) !default;

package/src/components/button/_button.scss

@@ -1,5 +1,3 @@
-$BUTTON_SELECTOR: ".button" !default;
-
 @use "../../core";
 @use "../../core/size";
 @use "variables" as *;
@@ -104,10 +102,10 @@ $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: core.densify(var(--f-button-secondary-padding-top)),
+    padding-top: core.densify(var(--f-button-secondary-padding-top)),
     padding-right: var(--f-button-secondary-padding-right),
     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 */,
+    padding-left: var(--f-button-secondary-padding-left),
 ) !default;
 
 /// Standard button
@@ -118,10 +116,10 @@ $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: core.densify(var(--f-button-standard-padding-top)),
+    padding-top: core.densify(var(--f-button-standard-padding-top)),
     padding-right: var(--f-button-standard-padding-right),
     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 */,
+    padding-left: var(--f-button-standard-padding-left),
 ) !default;
 
 /// Discrete button
@@ -136,10 +134,10 @@ $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: core.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: core.densify(var(--f-button-discrete-padding-bottom)),
-    padding-left: var(--f-button-discrete-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
+    padding-left: var(--f-button-discrete-padding-left),
 ) !default;
 
 /// Discrete inverted button
@@ -153,10 +151,10 @@ $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: core.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: core.densify(var(--f-button-discrete-padding-bottom)),
-    padding-left: var(--f-button-discrete-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
+    padding-left: var(--f-button-discrete-padding-left),
 ) !default;
 
 /// Tertiary button
@@ -171,10 +169,10 @@ $button--tertiary: (
     border-width: 0,
     shadow: none,
     shadow-hover: none,
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */ padding-top: core.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: core.densify(var(--f-button-tertiary-padding-bottom)),
-    padding-left: var(--f-button-tertiary-padding-left) /* stylelint-enable declaration-block-no-redundant-longhand-properties */,
+    padding-left: var(--f-button-tertiary-padding-left),
 ) !default;
 
 /// Button placeholders
@@ -226,26 +224,26 @@ $button--tertiary: (
     }
 }
 
-#{$BUTTON_SELECTOR} {
+.button {
     @extend %button-template;
-    @include core.make-button-variant($BUTTON_SELECTOR, $button--standard...);
+    @include core.make-button-variant(".button", $button--standard...);
 
-    &#{$BUTTON_SELECTOR}--primary {
-        @include core.make-button-variant($BUTTON_SELECTOR, $button--primary...);
+    &.button--primary {
+        @include core.make-button-variant(".button", $button--primary...);
     }
 
-    &#{$BUTTON_SELECTOR}--secondary {
-        @include core.make-button-variant($BUTTON_SELECTOR, $button--secondary...);
+    &.button--secondary {
+        @include core.make-button-variant(".button", $button--secondary...);
     }
 
-    &#{$BUTTON_SELECTOR}--discrete {
+    &.button--discrete {
         width: inherit;
         min-width: 0;
         font-weight: var(--f-font-weight-bold);
         outline-offset: size.$padding-025;
         line-height: calc(1.25 * var(--f-font-size-standard));
 
-        @include core.make-button-variant($BUTTON_SELECTOR, $button--discrete...);
+        @include core.make-button-variant(".button", $button--discrete...);
 
         @include core.breakpoint-down(sm) {
             width: auto;
@@ -277,7 +275,7 @@ $button--tertiary: (
         }
     }
 
-    &#{$BUTTON_SELECTOR}--discrete-inverted {
+    &.button--discrete-inverted {
         width: inherit;
         min-width: 0;
         font-weight: var(--f-font-weight-bold);
@@ -290,7 +288,7 @@ $button--tertiary: (
         /* stylelint-enable declaration-block-no-redundant-longhand-properties */
         line-height: calc(1.25 * var(--f-font-size-standard));
 
-        @include core.make-button-variant($BUTTON_SELECTOR, $button--discrete-inverted...);
+        @include core.make-button-variant(".button", $button--discrete-inverted...);
 
         @include core.breakpoint-down(sm) {
             width: auto;
@@ -304,13 +302,13 @@ $button--tertiary: (
         }
     }
 
-    &#{$BUTTON_SELECTOR}--tertiary {
+    &.button--tertiary {
         width: inherit;
         min-width: 0;
         font-weight: var(--f-font-weight-medium);
         outline-offset: size.$padding-025;
 
-        @include core.make-button-variant($BUTTON_SELECTOR, $button--tertiary...);
+        @include core.make-button-variant(".button", $button--tertiary...);
 
         @include core.breakpoint-down(sm) {
             width: auto;
@@ -353,16 +351,16 @@ $button--tertiary: (
             }
         }
 
-        &#{$BUTTON_SELECTOR}--small {
+        &.button--small {
             min-width: 24px;
             padding: core.densify(0.375rem) size.$padding-025;
             text-underline-offset: 3.5px;
-            &#{$BUTTON_SELECTOR}--align-text {
+            &.button--align-text {
                 margin-left: -(size.$margin-025);
             }
         }
 
-        &#{$BUTTON_SELECTOR}--medium {
+        &.button--medium {
             min-width: 8rem;
             /* stylelint-disable declaration-block-no-redundant-longhand-properties -- readability */
             padding-top: core.densify(var(--f-button-tertiary-padding-top));
@@ -370,20 +368,20 @@ $button--tertiary: (
             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 {
+            &.button--align-text {
                 margin-left: -(size.$margin-050);
             }
         }
 
-        &#{$BUTTON_SELECTOR}--large {
+        &.button--large {
             min-width: var(--f-button-min-width);
             padding: core.densify(1.125rem) 0.75rem;
-            &#{$BUTTON_SELECTOR}--align-text {
+            &.button--align-text {
                 margin-left: -(size.$margin-075);
             }
         }
 
-        &#{$BUTTON_SELECTOR}--align-text {
+        &.button--align-text {
             margin-left: -(size.$margin-050);
             min-width: 0;
         }
@@ -395,15 +393,15 @@ $button--tertiary: (
         }
     }
 
-    &#{$BUTTON_SELECTOR}--full-width {
+    &.button--full-width {
         min-width: var(--f-width-full);
     }
 
-    &#{$BUTTON_SELECTOR}--margin-bottom-0 {
+    &.button--margin-bottom-0 {
         margin-bottom: 0;
     }
 
-    &#{$BUTTON_SELECTOR}--small {
+    &.button--small {
         font-size: 14px;
         line-height: 1.25rem;
         min-width: 4rem;
@@ -421,7 +419,7 @@ $button--tertiary: (
         }
     }
 
-    &#{$BUTTON_SELECTOR}--medium {
+    &.button--medium {
         line-height: 1.5rem;
         min-width: 8rem;
         padding: core.densify(0.625rem) 1.25rem;
@@ -433,7 +431,7 @@ $button--tertiary: (
         }
     }
 
-    &#{$BUTTON_SELECTOR}--large {
+    &.button--large {
         line-height: 1.5rem;
         min-width: 9.5rem;
         padding: core.densify(1rem) 1.5rem;
@@ -463,7 +461,7 @@ $button--tertiary: (
     &.disabled:hover,
     &:disabled,
     &:disabled:hover,
-    &#{$BUTTON_SELECTOR}--disabled {
+    &.button--disabled {
         border-width: var(--f-border-width-medium);
         box-shadow: none;
         cursor: default;

package/src/components/button/_index.scss

@@ -0,0 +1 @@
+@use "button";

package/src/components/button/_variables.scss

@@ -1,35 +1,35 @@
 // PRIMARY
-$button-primary-color-background-default: var(--fkds-color-action-background-primary-default);
-$button-primary-color-background-hover: var(--fkds-color-action-background-primary-hover);
-$button-primary-color-text-default: var(--fkds-color-action-text-inverted-default);
+$button-primary-color-background-default: var(--fkds-color-action-background-primary-default) !default;
+$button-primary-color-background-hover: var(--fkds-color-action-background-primary-hover) !default;
+$button-primary-color-text-default: var(--fkds-color-action-text-inverted-default) !default;
 
 // SECONDARY
-$button-secondary-color-background-default: var(--fkds-color-action-background-secondary-default);
-$button-secondary-color-border-default: var(--fkds-color-action-border-primary-default);
-$button-secondary-color-text-default: var(--fkds-color-action-text-primary-default);
-$button-secondary-color-background-hover: var(--fkds-color-action-background-secondary-hover);
+$button-secondary-color-background-default: var(--fkds-color-action-background-secondary-default) !default;
+$button-secondary-color-border-default: var(--fkds-color-action-border-primary-default) !default;
+$button-secondary-color-text-default: var(--fkds-color-action-text-primary-default) !default;
+$button-secondary-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
 
 // TERTIARY
-$button-tertiary-color-text-default: var(--fkds-color-action-text-primary-default);
-$button-tertiary-color-background-default: transparent;
-$button-tertiary-color-background-disabled: transparent;
-$button-tertiary-color-border-disabled: transparent;
-$button-tertiary-color-text-disabled: var(--fkds-color-text-disabled);
-$button-tertiary-color-background-hover: var(--fkds-color-action-background-secondary-hover);
-$button-tertiary-color-text-hover: var(--fkds-color-action-text-primary-default);
+$button-tertiary-color-text-default: var(--fkds-color-action-text-primary-default) !default;
+$button-tertiary-color-background-default: transparent !default;
+$button-tertiary-color-background-disabled: transparent !default;
+$button-tertiary-color-border-disabled: transparent !default;
+$button-tertiary-color-text-disabled: var(--fkds-color-text-disabled) !default;
+$button-tertiary-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
+$button-tertiary-color-text-hover: var(--fkds-color-action-text-primary-default) !default;
 
 // TERTIARY - black
-$button-tertiary-black-color-text-default: var(--fkds-color-action-text-secondary-default);
-$button-tertiary-black-icon-color-content-default: var(--fkds-icon-color-action-content-secondary-default);
-$button-tertiary-black-color-text-focus: var(--fkds-color-action-text-secondary-default);
-$button-tertiary-black-icon-color-content-focus: var(--fkds-icon-color-action-content-secondary-default);
+$button-tertiary-black-color-text-default: var(--fkds-color-action-text-secondary-default) !default;
+$button-tertiary-black-icon-color-content-default: var(--fkds-icon-color-action-content-secondary-default) !default;
+$button-tertiary-black-color-text-focus: var(--fkds-color-action-text-secondary-default) !default;
+$button-tertiary-black-icon-color-content-focus: var(--fkds-icon-color-action-content-secondary-default) !default;
 
 // TERTIARY - inverted
-$button-tertiary-inverted-color-text-default: var(--fkds-color-action-text-inverted-default);
-$button-tertiary-inverted-icon-color-content-default: var(--fkds-icon-color-action-content-inverted-default);
-$button-tertiary-inverted-color-text-focus: var(--fkds-color-action-text-inverted-focus);
-$button-tertiary-inverted-icon-color-content-focus: var(--fkds-icon-color-action-content-inverted-default);
-$button-tertiary-inverted-color-background-focus: transparent;
-$button-tertiary-inverted-color-background-disabled: transparent;
-$button-tertiary-inverted-color-text-disabled: var(--fkds-color-text-disabled);
-$button-tertiary-inverted-icon-color-content-disabled: var(--fkds-icon-color-content-disabled);
+$button-tertiary-inverted-color-text-default: var(--fkds-color-action-text-inverted-default) !default;
+$button-tertiary-inverted-icon-color-content-default: var(--fkds-icon-color-action-content-inverted-default) !default;
+$button-tertiary-inverted-color-text-focus: var(--fkds-color-action-text-inverted-focus) !default;
+$button-tertiary-inverted-icon-color-content-focus: var(--fkds-icon-color-action-content-inverted-default) !default;
+$button-tertiary-inverted-color-background-focus: transparent !default;
+$button-tertiary-inverted-color-background-disabled: transparent !default;
+$button-tertiary-inverted-color-text-disabled: var(--fkds-color-text-disabled) !default;
+$button-tertiary-inverted-icon-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;

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

@@ -1,10 +1,9 @@
 @use "../../core/mixins/circle";
 @use "variables" as *;
 
-$CALENDAR_DAY_SELECTOR: ".calendar-day" !default;
 $calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
 
-#{$CALENDAR_DAY_SELECTOR} {
+.calendar-day {
     align-items: center;
     display: inline-flex;
     font-weight: var(--f-font-weight-medium);

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

@@ -0,0 +1 @@
+@use "calendar-day";

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

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

package/src/components/card/_card.scss

@@ -2,9 +2,7 @@
 @use "../../core/size";
 @use "variables" as *;
 
-$CARD_SELECTOR: ".card" !default;
-
-#{$CARD_SELECTOR} {
+.card {
     padding: core.densify(size.$padding-100) size.$padding-100;
     margin: core.densify(size.$margin-100) 0;