@fkui/design 6.13.0 → 6.14.0

package/src/components/card/_index.scss

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

package/src/components/card/_variables.scss

@@ -1,6 +1,6 @@
-$card-color-heading: var(--fkds-color-text-primary);
-$card-color-text: var(--fkds-color-text-primary);
-$card-color-border: var(--fkds-color-border-primary);
-$card-color-background: var(--fkds-color-background-primary);
-$card-color-border-error: var(--fkds-color-feedback-border-negative);
-$card-color-text-error: var(--f-text-color-error);
+$card-color-heading: var(--fkds-color-text-primary) !default;
+$card-color-text: var(--fkds-color-text-primary) !default;
+$card-color-border: var(--fkds-color-border-primary) !default;
+$card-color-background: var(--fkds-color-background-primary) !default;
+$card-color-border-error: var(--fkds-color-feedback-border-negative) !default;
+$card-color-text-error: var(--f-text-color-error) !default;

package/src/components/checkbox/_checkbox-group.scss

@@ -1,15 +1,13 @@
 @use "../../core/size";
 @use ".././radio-button/item";
 
-$CHECKBOX_GROUP_SELECTOR: ".checkbox-group" !default;
-
-#{$CHECKBOX_GROUP_SELECTOR} {
+.checkbox-group {
     &__content {
         display: flex;
         flex-direction: column;
     }
     &--border {
-        #{$CHECKBOX_GROUP_SELECTOR}__content {
+        .checkbox-group__content {
             .checkbox {
                 @extend %selectable-item;
             }

package/src/components/checkbox/_checkbox.scss

@@ -5,14 +5,13 @@
 @use "variables" as *;
 
 $checkbox_label_offset: 0.1rem;
-$CHECKBOX_SELECTOR: ".checkbox" !default;
 
 %checkbox-icon {
     mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImNoZWNrYm94LWljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHJlY3QgeD0iMy40NzQiIHk9IjkuMTk0IiBmaWxsPSIjM0M1NTkyIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIi8+CjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTguMzc2LDE1LjAwNWMtMC40MTYsMC0wLjgzMi0wLjE1OC0xLjE0OS0wLjQ3NWwtMy4yNS0zLjI0M2MtMC42MzUtMC42MzQtMC42MzUtMS42NiwwLTIuMjkzCiAgICAgICAgYzAuNjM1LTAuNjMzLDEuNjYzLTAuNjMzLDIuMjk4LDBsMi4xMDEsMi4wOTdsNS4zNTEtNS4zNGMwLjYzNS0wLjYzNCwxLjY2My0wLjYzNCwyLjI5OCwwYzAuNjM1LDAuNjMzLDAuNjM1LDEuNjU5LDAsMi4yOTMKICAgICAgICBsLTYuNSw2LjQ4N0M5LjIwNywxNC44NDcsOC43OTIsMTUuMDA1LDguMzc2LDE1LjAwNXoiLz4KPC9zdmc+Cg==");
     mask-repeat: no-repeat;
 }
 
-#{$CHECKBOX_SELECTOR} {
+.checkbox {
     min-height: var(--f-height-medium);
     margin-bottom: core.densify(size.$margin-100);
 
@@ -87,7 +86,7 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
             color: GrayText;
         }
 
-        #{$CHECKBOX_SELECTOR}__label {
+        .checkbox__label {
             cursor: default;
 
             &::before {
@@ -105,7 +104,7 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
             }
         }
 
-        input[type="checkbox"]:checked + #{$CHECKBOX_SELECTOR}__label::after {
+        input[type="checkbox"]:checked + .checkbox__label::after {
             background-color: $checkbox-icon-color-content-disabled;
         }
     }
@@ -119,11 +118,11 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
         }
     }
 
-    input[type="checkbox"]:checked + #{$CHECKBOX_SELECTOR}__label::after {
+    input[type="checkbox"]:checked + .checkbox__label::after {
         opacity: 1;
     }
 
-    input[type="checkbox"]:focus + #{$CHECKBOX_SELECTOR}__label {
+    input[type="checkbox"]:focus + .checkbox__label {
         @include focus-indicator;
     }
 }

package/src/components/checkbox/_variables.scss

@@ -1,16 +1,16 @@
 // TEXT
-$checkbox-color-text-disabled: var(--fkds-color-text-disabled);
+$checkbox-color-text-disabled: var(--fkds-color-text-disabled) !default;
 
 // ICON
-$checkbox-icon-color-content: var(--fkds-icon-color-content-inverted);
-$checkbox-icon-color-content-disabled: var(--fkds-icon-color-content-disabled);
+$checkbox-icon-color-content: var(--fkds-icon-color-content-inverted) !default;
+$checkbox-icon-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
 
 // BACKGROUND
-$checkbox-color-background-default: var(--fkds-color-background-primary);
-$checkbox-color-background-selected: var(--fkds-color-select-background-primary-default);
-$checkbox-color-background-disabled: var(--fkds-color-background-disabled);
+$checkbox-color-background-default: var(--fkds-color-background-primary) !default;
+$checkbox-color-background-selected: var(--fkds-color-select-background-primary-default) !default;
+$checkbox-color-background-disabled: var(--fkds-color-background-disabled) !default;
 
 // BORDER
-$checkbox-color-border-default: var(--fkds-color-border-primary);
-$checkbox-color-border-selected: transparent;
-$checkbox-color-border-disabled: var(--fkds-color-border-disabled);
+$checkbox-color-border-default: var(--fkds-color-border-primary) !default;
+$checkbox-color-border-selected: transparent !default;
+$checkbox-color-border-disabled: var(--fkds-color-border-disabled) !default;

package/src/components/chip/_index.scss

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

package/src/components/chip/_variables.scss

@@ -1,17 +1,17 @@
 // TEXT
-$chip-color-text-default: var(--fkds-color-text-primary);
-$chip-color-text-selected: var(--fkds-color-text-inverted);
-$chip-color-text-disabled: var(--fkds-color-text-disabled);
-$chip-color-text-hover: var(--fkds-color-text-primary);
+$chip-color-text-default: var(--fkds-color-text-primary) !default;
+$chip-color-text-selected: var(--fkds-color-text-inverted) !default;
+$chip-color-text-disabled: var(--fkds-color-text-disabled) !default;
+$chip-color-text-hover: var(--fkds-color-text-primary) !default;
 
 // BACKGROUND
-$chip-color-background-default: var(--fkds-color-background-primary);
-$chip-color-background-selected: var(--fkds-color-select-background-secondary-default);
-$chip-color-background-disabled: var(--fkds-color-background-disabled);
-$chip-color-background-hover: var(--fkds-color-select-background-secondary-hover);
+$chip-color-background-default: var(--fkds-color-background-primary) !default;
+$chip-color-background-selected: var(--fkds-color-select-background-secondary-default) !default;
+$chip-color-background-disabled: var(--fkds-color-background-disabled) !default;
+$chip-color-background-hover: var(--fkds-color-select-background-secondary-hover) !default;
 
 // BORDER
-$chip-color-border-default: var(--fkds-color-border-primary);
-$chip-color-border-disabled: var(--fkds-color-border-primary);
-$chip-color-border-hover: var(--fkds-color-border-primary);
-$chip-color-border-selected: transparent;
+$chip-color-border-default: var(--fkds-color-border-primary) !default;
+$chip-color-border-disabled: var(--fkds-color-border-primary) !default;
+$chip-color-border-hover: var(--fkds-color-border-primary) !default;
+$chip-color-border-selected: transparent !default;

package/src/components/close-button/_index.scss

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

package/src/components/close-button/_variables.scss

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

package/src/components/combobox/_index.scss

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

package/src/components/combobox/_variables.scss

@@ -1,9 +1,9 @@
-$combobox-color-background-hover: var(--fkds-color-select-background-primary-hover);
-$combobox-color-background-selected: var(--fkds-color-select-background-primary-default);
-$combobox-color-background: var(--fkds-color-background-primary);
-$combobox-color-text-hover: var(--fkds-color-text-primary);
-$combobox-color-text-selected: var(--fkds-color-text-inverted);
-$combobox-color-text: var(--fkds-color-text-primary);
-$combobox-color-border: var(--fkds-color-border-primary);
-$combobox-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default);
-$combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-icon-color-content-disabled);
+$combobox-color-background-hover: var(--fkds-color-select-background-primary-hover) !default;
+$combobox-color-background-selected: var(--fkds-color-select-background-primary-default) !default;
+$combobox-color-background: var(--fkds-color-background-primary) !default;
+$combobox-color-text-hover: var(--fkds-color-text-primary) !default;
+$combobox-color-text-selected: var(--fkds-color-text-inverted) !default;
+$combobox-color-text: var(--fkds-color-text-primary) !default;
+$combobox-color-border: var(--fkds-color-border-primary) !default;
+$combobox-f-icon-arrow-down-color-content-default: var(--fkds-icon-color-action-content-primary-default) !default;
+$combobox-f-icon-arrow-down-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;

package/src/components/contextmenu/_contextmenu.scss

@@ -2,9 +2,7 @@
 @use "../../core/mixins/breakpoints";
 @use "../../core/config-variables";
 
-$CONTEXTMENU_SELECTOR: ".contextmenu" !default;
-
-#{$CONTEXTMENU_SELECTOR} {
+.contextmenu {
     min-width: 260px;
     background-color: var(--f-background-popupmenu);
 

package/src/components/contextmenu/_index.scss

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

package/src/components/contextmenu/_variables.scss

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

package/src/components/crud-dataset/_crud-dataset.scss

@@ -1,8 +1,7 @@
-$CRUD_DATASET_SELECTOR: ".crud-dataset" !default;
 $crud-dataset-add-button-margin-top: 0.5rem !default;
 $crud-dataset-add-button-margin-left: 2px !default; // to line up with table or list that has 2px border
 
-#{$CRUD_DATASET_SELECTOR} {
+.crud-dataset {
     margin: 0 0 var(--f-margin-component-bottom);
 
     &__add-button {

package/src/components/crud-dataset/_index.scss

@@ -0,0 +1 @@
+@use "crud-dataset";

package/src/components/crud-dataset/_variables.scss

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

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

@@ -4,14 +4,11 @@
 @use "../../core/mixins/breakpoints";
 @use "variables" as *;
 
-$DATEPICKER_FIELD_SELECTOR: ".datepicker-field" !default;
-$POPUP_SELECTOR: ".popup" !default;
-
 // 40px = popup spacing (20px) * 2
 $popup-spacing: 40px;
 $calendar-width: calc(100vw - #{$popup-spacing});
 
-#{$DATEPICKER_FIELD_SELECTOR} {
+.datepicker-field {
     &__button {
         background: transparent;
         border: 0;
@@ -58,14 +55,14 @@ $calendar-width: calc(100vw - #{$popup-spacing});
     }
 }
 
-#{$POPUP_SELECTOR}--overlay #{$DATEPICKER_FIELD_SELECTOR} {
+.popup--overlay .datepicker-field {
     &__popup {
         width: $calendar-width;
         max-width: 28rem;
     }
 }
 
-#{$POPUP_SELECTOR}--inline #{$DATEPICKER_FIELD_SELECTOR} {
+.popup--inline .datepicker-field {
     &__popup {
         width: 100%;
     }

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

@@ -0,0 +1 @@
+@use "datepicker-field";

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

@@ -1,8 +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);
+$datepickerfield-f-icon-calendar-color-content-default: var(--fkds-icon-color-action-content-primary-default) !default;
+$datepickerfield-f-icon-calendar-color-content-hover: var(--fkds-icon-color-action-content-primary-hover) !default;
+$datepickerfield-f-icon-calendar-color-content-disabled: var(--fkds-icon-color-content-disabled) !default;
 
 // Popup
-$datepickerfield-popup-color-background: var(--fkds-color-background-primary);
-$datepickerfield-popup-color-border: var(--fkds-color-border-primary);
+$datepickerfield-popup-color-background: var(--fkds-color-background-primary) !default;
+$datepickerfield-popup-color-border: var(--fkds-color-border-primary) !default;

package/src/components/dialogue-tree/_index.scss

@@ -0,0 +1 @@
+@use "dialogue-tree";

package/src/components/dialogue-tree/_variables.scss

@@ -1,6 +1,6 @@
-$dialogue-tree-color-background-default: var(--fkds-color-background-primary);
-$dialogue-tree-color-border-default: var(--fkds-color-border-primary);
-$dialogue-tree-color-text-default: var(--fkds-color-action-text-secondary-default);
-$dialogue-tree-color-background-hover: var(--fkds-color-action-background-secondary-hover);
-$dialogue-tree-color-border-hover: var(--fkds-color-border-primary);
-$dialogue-tree-color-text-hover: var(--fkds-color-action-text-secondary-default);
+$dialogue-tree-color-background-default: var(--fkds-color-background-primary) !default;
+$dialogue-tree-color-border-default: var(--fkds-color-border-primary) !default;
+$dialogue-tree-color-text-default: var(--fkds-color-action-text-secondary-default) !default;
+$dialogue-tree-color-background-hover: var(--fkds-color-action-background-secondary-hover) !default;
+$dialogue-tree-color-border-hover: var(--fkds-color-border-primary) !default;
+$dialogue-tree-color-text-hover: var(--fkds-color-action-text-secondary-default) !default;

package/src/components/entrypoint/_entrypoint.scss

@@ -2,10 +2,7 @@
 @use "../../core/size";
 @use "variables" as *;
 
-$ENTRYPOINT_SELECTOR: ".entrypoint" !default;
-
-#{$ENTRYPOINT_SELECTOR} {
-    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+.entrypoint {
     background-color: $entrypoint-color-background-default;
     color: $entrypoint-color-text-default;
     border: var(--f-border-width-medium) solid transparent; // forced-colors mode

package/src/components/entrypoint/_index.scss

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

package/src/components/entrypoint/_variables.scss

@@ -1,3 +1,3 @@
-$entrypoint-color-background-default: var(--fkds-color-action-background-primary-default);
-$entrypoint-color-background-hover: var(--fkds-color-action-background-primary-hover);
-$entrypoint-color-text-default: var(--fkds-color-action-text-inverted-default);
+$entrypoint-color-background-default: var(--fkds-color-action-background-primary-default) !default;
+$entrypoint-color-background-hover: var(--fkds-color-action-background-primary-hover) !default;
+$entrypoint-color-text-default: var(--fkds-color-action-text-inverted-default) !default;

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

@@ -3,9 +3,7 @@
 @use "../../core/size";
 @use "variables" as *;
 
-$ERROR_LIST_SELECTOR: ".error-list" !default;
-
-#{$ERROR_LIST_SELECTOR} {
+.error-list {
     color: $errorlist-color-text;
     margin: 0 0 core.densify(var(--f-margin-component-bottom));
 

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

@@ -0,0 +1 @@
+@use "error-list";

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

@@ -1 +1 @@
-$errorlist-color-text: var(--fkds-color-feedback-text-negative);
+$errorlist-color-text: var(--fkds-color-feedback-text-negative) !default;

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

@@ -4,12 +4,11 @@
 @use "../../core/size";
 @use "../icon/icon";
 
-$EXPANDABLE_PANEL_SELECTOR: ".expandable-panel" !default;
 $EXPANDABLE_PANEL_LINE_HEIGHT: var(--f-line-height-medium);
 $ICON_MARGIN: 0.5rem;
 $ICON_WIDTH: var(--f-icon-size-medium);
 
-#{$EXPANDABLE_PANEL_SELECTOR} {
+.expandable-panel {
     margin-bottom: core.densify(size.$margin-200);
 
     &__icon {

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

@@ -0,0 +1 @@
+@use "expandable-panel";

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

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

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

@@ -3,13 +3,12 @@
 @use "../../core/size";
 @use "../../core/mixins/circle" as *;
 
-$EXPANDABLE_PARAGRAPH_SELECTOR: ".expandable-paragraph" !default;
 $ICON_WIDTH: var(--f-icon-size-small);
 $ICON_MARGIN: 0.5rem;
 $CONTENT_MARGIN: calc(#{$ICON_WIDTH} + #{$ICON_MARGIN});
 $EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);
 
-#{$EXPANDABLE_PARAGRAPH_SELECTOR} {
+.expandable-paragraph {
     margin: 0 0 core.densify(var(--f-margin-component-bottom));
     &__heading {
         line-height: $EXPANDABLE_PARAGRAPH_LINE_HEIGHT;
@@ -43,20 +42,20 @@ $EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);
         }
     }
 
-    &#{$EXPANDABLE_PARAGRAPH_SELECTOR}--open {
-        #{$EXPANDABLE_PARAGRAPH_SELECTOR}__icon {
+    &.expandable-paragraph--open {
+        .expandable-paragraph__icon {
             svg:nth-child(2) {
                 transform: rotate(0);
             }
         }
 
-        #{$EXPANDABLE_PARAGRAPH_SELECTOR}__container {
+        .expandable-paragraph__container {
             height: auto;
         }
     }
 
-    &#{$EXPANDABLE_PARAGRAPH_SELECTOR}--closed {
-        #{$EXPANDABLE_PARAGRAPH_SELECTOR}__icon {
+    &.expandable-paragraph--closed {
+        .expandable-paragraph__icon {
             svg:nth-child(2) {
                 transform: rotate(-90deg);
             }

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

@@ -0,0 +1 @@
+@use "expandable-paragraph";

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

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

package/src/components/fieldset/_fieldset.scss

@@ -2,9 +2,7 @@
 @use "../../core/config-variables";
 @use "../../core/size";
 
-$FIELDSET_SELECTOR: ".fieldset" !default;
-
-#{$FIELDSET_SELECTOR} {
+.fieldset {
     border: 0;
     margin: 0 0 core.densify(var(--f-margin-component-bottom));
     min-width: 0;

package/src/components/fieldset/_index.scss

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

package/src/components/fieldset/_variables.scss

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

package/src/components/file-item/_file-item.scss

@@ -1,15 +1,12 @@
 @use "../anchor/anchor";
 @use "../../core/size";
 
-$FILE_ITEM_SELECTOR: ".file-item" !default;
-$FILE_LIST_ITEM_SELECTOR: ".file-item-list" !default;
-
-#{$FILE_LIST_ITEM_SELECTOR} {
+.file-item-list {
     list-style-type: none;
     padding-left: 0;
 }
 
-#{$FILE_ITEM_SELECTOR} {
+.file-item {
     .button--discrete {
         padding: 0;
         min-width: auto;

package/src/components/file-item/_index.scss

@@ -0,0 +1 @@
+@use "file-item";

package/src/components/file-item/_variables.scss

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

package/src/components/file-selector/_file-selector.scss

@@ -1,9 +1,7 @@
 @use "../../core/mixins/focus" as *;
 @use "../../core/mixins/sr-only" as *;
 
-$FILE_SELECTOR_SELECTOR: ".file-selector" !default;
-
-#{$FILE_SELECTOR_SELECTOR} {
+.file-selector {
     svg {
         color: var(--f-icon-color-primary);
     }

package/src/components/file-selector/_index.scss

@@ -0,0 +1 @@
+@use "file-selector";

package/src/components/file-selector/_variables.scss

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

package/src/components/file-uploader/_file-uploader.scss

@@ -1,6 +1,4 @@
-$FILE_UPLOADER_SELECTOR: ".file-uploader" !default;
-
-#{$FILE_UPLOADER_SELECTOR} {
+.file-uploader {
     &__message-box {
         margin-top: 1.25rem;
     }

package/src/components/file-uploader/_index.scss

@@ -0,0 +1 @@
+@use "file-uploader";

package/src/components/file-uploader/_variables.scss

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

package/src/components/group/_index.scss

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

package/src/components/group/_variables.scss

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

package/src/components/icon/_icon.scss

@@ -2,8 +2,6 @@
 @use "../../core/size";
 @use "variables" as *;
 
-$ICON_SELECTOR: ".icon" !default;
-
 @at-root {
     %icon--base {
         display: inline-block;
@@ -29,13 +27,13 @@ $ICON_SELECTOR: ".icon" !default;
 
         position: relative;
 
-        #{$ICON_SELECTOR} {
+        .icon {
             position: absolute;
         }
     }
 }
 
-#{$ICON_SELECTOR} {
+.icon {
     @extend %icon--base;
 
     &--flip-horizontal {
@@ -59,8 +57,8 @@ $ICON_SELECTOR: ".icon" !default;
     }
 }
 
-#{$ICON_SELECTOR}-stack,
-#{$ICON_SELECTOR} {
+.icon-stack,
+.icon {
     &--new-window {
         // anchor icons to top-right and bottom-left
         .icon {
@@ -81,8 +79,8 @@ $ICON_SELECTOR: ".icon" !default;
     }
 }
 
-#{$ICON_SELECTOR}-stack,
-#{$ICON_SELECTOR}--stack {
+.icon-stack,
+.icon--stack {
     @extend %icon-stack;
 
     &--tooltip {

package/src/components/icon/_index.scss

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

package/src/components/icon/_variables.scss

@@ -1,15 +1,15 @@
 // INFO
-$icon-info-color-border: var(--fkds-icon-color-feedback-border-info);
-$icon-info-color-background: var(--fkds-icon-color-feedback-background-info);
+$icon-info-color-border: var(--fkds-icon-color-feedback-border-info) !default;
+$icon-info-color-background: var(--fkds-icon-color-feedback-background-info) !default;
 
 // WARNING
-$icon-warning-color-border: var(--fkds-icon-color-feedback-border-warning);
-$icon-warning-color-background: var(--fkds-icon-color-feedback-background-warning);
+$icon-warning-color-border: var(--fkds-icon-color-feedback-border-warning) !default;
+$icon-warning-color-background: var(--fkds-icon-color-feedback-background-warning) !default;
 
 // ERROR
-$icon-error-color-border: var(--fkds-icon-color-feedback-border-negative);
-$icon-error-color-background: var(--fkds-icon-color-feedback-background-negative);
+$icon-error-color-border: var(--fkds-icon-color-feedback-border-negative) !default;
+$icon-error-color-background: var(--fkds-icon-color-feedback-background-negative) !default;
 
 // SUCCESS
-$icon-success-color-border: var(--fkds-icon-color-feedback-border-positive);
-$icon-success-color-background: var(--fkds-icon-color-feedback-background-positive);
+$icon-success-color-border: var(--fkds-icon-color-feedback-border-positive) !default;
+$icon-success-color-background: var(--fkds-icon-color-feedback-background-positive) !default;

package/src/components/indent/_indent.scss

@@ -1,9 +1,8 @@
 @use "../../core/size";
 
 $radio_button_label_offset: 0.1rem;
-$INDENT_SELECTOR: ".indent" !default;
 
-#{$INDENT_SELECTOR} {
+.indent {
     border-left: var(--f-border-width-medium) solid var(--f-border-color-separator);
     margin-bottom: size.$margin-100;
     margin-left: size.$margin-050;

package/src/components/indent/_index.scss

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

package/src/components/indent/_variables.scss

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

package/src/components/label/_index.scss

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

package/src/components/label/_label.scss

@@ -3,9 +3,7 @@
 @use "../icon/icon";
 @use "variables" as *;
 
-$LABEL_SELECTOR: ".label" !default;
-
-#{$LABEL_SELECTOR} {
+.label {
     color: $label-color-text;
     display: inline-block;
     font-size: var(--f-font-size-standard);
@@ -14,6 +12,10 @@ $LABEL_SELECTOR: ".label" !default;
     margin-bottom: core.densify(size.$margin-025);
     width: var(--f-width-full);
 
+    &.sr-only {
+        width: auto;
+    }
+
     &__message {
         display: block;
         font-weight: var(--f-font-weight-normal);

package/src/components/label/_variables.scss

@@ -1,4 +1,4 @@
-$label-color-text: var(--fkds-color-text-primary);
-$label-color-text-description: var(--fkds-color-text-primary);
-$label-color-text-description-format: var(--fkds-color-text-secondary);
-$label-color-text-message-error: var(--fkds-color-feedback-text-negative);
+$label-color-text: var(--fkds-color-text-primary) !default;
+$label-color-text-description: var(--fkds-color-text-primary) !default;
+$label-color-text-description-format: var(--fkds-color-text-secondary) !default;
+$label-color-text-message-error: var(--fkds-color-feedback-text-negative) !default;

package/src/components/layout-application-template/_index.scss

@@ -0,0 +1 @@
+@use "layout-application-template";