@fkui/design 5.36.0

package/src/components/text-field/_text-field.scss

@@ -0,0 +1,127 @@
+@use "../../core";
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$TEXT_FIELD_SELECTOR: ".text-field" !default;
+
+#{$TEXT_FIELD_SELECTOR} {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+    position: relative;
+    width: var(--f-width-full);
+
+    &--inline {
+        @include core.label-inline;
+    }
+
+    &--table {
+        margin-bottom: 0;
+    }
+
+    // remove clear X in IE11, Edge
+    input[type="text"]::-ms-clear {
+        display: none;
+    }
+
+    &__error-popup-icon {
+        color: var(--f-text-color-error);
+        height: 16px;
+    }
+
+    &__input-wrapper {
+        display: flex;
+        gap: densify(size.$padding-050);
+    }
+
+    &__input {
+        background-color: var(--f-background-input);
+        box-shadow: var(--f-input-shadow-inset);
+        border-radius: var(--f-border-radius-medium);
+        border: var(--f-border-width-medium) solid var(--f-border-color-input);
+        min-height: densify(var(--f-height-large));
+        padding: 0 0.75rem;
+        width: var(--f-width-full);
+    }
+
+    &__icon-wrapper {
+        flex: 1 1 auto;
+        position: relative;
+
+        &:has(.text-field__append-inner) {
+            .text-field__input {
+                padding: var(--padding-input-fields);
+            }
+        }
+    }
+
+    &__append-inner {
+        display: inline;
+        position: absolute;
+        right: densify(size.$margin-075);
+        top: densify(size.$margin-050);
+        height: var(--f-icon-size-large);
+        width: var(--f-icon-size-large);
+        overflow: hidden;
+        text-align: center;
+    }
+
+    &__icon {
+        height: var(--f-icon-size-large);
+        transition: opacity var(--f-animation-duration-medium) ease-in-out;
+        width: var(--f-icon-size-large);
+
+        &--left {
+            position: relative;
+            top: 3px;
+        }
+    }
+
+    &__input:disabled + &__icon {
+        color: var(--f-text-color-button-disabled);
+    }
+
+    &__input:disabled {
+        border-color: var(--f-border-color-input-disabled);
+        color: var(--f-text-color-input-disabled);
+        background-color: var(--f-background-input-disabled);
+    }
+
+    &--error {
+        #{$TEXT_FIELD_SELECTOR}__input {
+            border-color: var(--f-border-color-error);
+        }
+    }
+
+    &--search + #{$TEXT_FIELD_SELECTOR}__append-inner {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 0;
+        right: densify(0.25rem);
+        min-height: densify(var(--f-height-large));
+        width: 2.5rem;
+    }
+
+    .clear-button {
+        background: none;
+        border: 0;
+        cursor: pointer;
+
+        &__icon {
+            color: var(--f-text-color-discrete);
+            height: var(--f-icon-size-x-small);
+            width: var(--f-icon-size-x-small);
+        }
+    }
+
+    // Hide the web browsers standard clear-button when input is of type search
+    /* stylelint-disable property-no-vendor-prefix */
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-results-button,
+    input[type="search"]::-webkit-search-results-decoration {
+        -webkit-appearance: none;
+    }
+}

package/src/components/textarea-field/_textarea-field.scss

@@ -0,0 +1,55 @@
+@use "../../core/size";
+@use "../../core";
+@use "../../core/utils/functions" as *;
+
+$TEXTAREA_FIELD_SELECTOR: ".textarea-field" !default;
+
+#{$TEXTAREA_FIELD_SELECTOR} {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    line-height: var(--f-line-height-large);
+    margin: 0 0 densify(var(--f-margin-component-bottom));
+    position: relative;
+    width: var(--f-width-full);
+
+    &--inline {
+        @include core.label-inline;
+    }
+
+    &__textarea {
+        background-color: var(--f-background-input);
+        box-shadow: var(--f-input-shadow-inset);
+        border-radius: var(--f-border-radius-medium);
+        border: var(--f-border-width-medium) solid var(--f-border-color-input);
+        box-sizing: border-box;
+        font-size: var(--f-font-size-standard);
+        min-height: densify(var(--f-height-large));
+        padding: densify(size.$padding-050) size.$padding-075;
+        width: var(--f-width-full);
+    }
+
+    &__textarea[rows] {
+        height: auto;
+    }
+
+    &__textarea:disabled {
+        border-color: var(--f-border-color-input-disabled);
+        color: var(--f-text-color-input-disabled);
+        background-color: var(--f-background-input-disabled);
+    }
+
+    &--error {
+        #{$TEXTAREA_FIELD_SELECTOR}__textarea {
+            border-color: var(--f-border-color-error);
+        }
+    }
+
+    &__resize--none {
+        resize: none;
+    }
+
+    &__resize--vertical {
+        resize: vertical;
+    }
+}

package/src/components/tooltip/_tooltip.scss

@@ -0,0 +1,87 @@
+@use "../../core/size";
+@use "../icon/icon";
+@use "../../core/mixins/arrow-creator";
+@use "../../core/mixins/breakpoints";
+@use "../../core/utils/functions" as *;
+
+$TOOLTIP_SELECTOR: ".tooltip" !default;
+
+#{$TOOLTIP_SELECTOR}-before {
+    display: inline-block;
+
+    &__label {
+        display: block;
+    }
+}
+
+#{$TOOLTIP_SELECTOR} {
+    display: inline;
+    margin-left: size.$margin-050;
+
+    &__container {
+        display: inline;
+    }
+
+    &__button {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        font-size: var(--f-font-size-large);
+        padding: 0.125rem;
+        transform: translateY(0.125rem);
+        height: var(--f-icon-size-large);
+        width: var(--f-icon-size-large);
+
+        #{icon.$ICON_SELECTOR}-stack {
+            height: 100%;
+            width: 100%;
+        }
+
+        #{icon.$ICON_SELECTOR} {
+            height: 100%;
+            width: 100%;
+            left: 0;
+        }
+    }
+
+    &__arrow {
+        @include arrow-creator.arrow-creator(
+            $background: var(--f-background-info),
+            $border: var(--f-tooltip-border-color),
+            $position: size.$margin-200,
+            $size: size.$margin-075,
+            $up: true,
+            $width: var(--f-tooltip-border-width)
+        );
+    }
+
+    /// Content wrapper is placed around everything, i.e.
+    /// arrow, close button, header and body.
+    &__content-wrapper {
+        background-color: var(--f-background-info);
+        border: var(--f-tooltip-border-width) solid var(--f-tooltip-border-color);
+        border-radius: var(--f-border-radius-small);
+        box-sizing: content-box;
+        margin-top: size.$margin-075;
+        margin-bottom: size.$margin-050;
+        position: relative;
+    }
+
+    /// Content is placed around header and body.
+    &__content {
+        margin: densify(size.$margin-100) size.$margin-100 0 size.$margin-100;
+    }
+
+    &__header {
+        align-items: flex-start;
+        display: flex;
+        font-size: var(--f-font-size-large);
+        font-weight: var(--f-font-weight-bold);
+        line-height: var(--f-line-height-medium);
+        margin-bottom: size.$margin-050;
+    }
+
+    .close-button {
+        margin: var(--f-tooltip-close-button-margin);
+    }
+}

package/src/components/wizard/_all.scss

@@ -0,0 +1,2 @@
+@import "wizard";
+@import "wizard-step";

package/src/components/wizard/_wizard-step.scss

@@ -0,0 +1,318 @@
+@use "../../core";
+
+$WIZARD_STEP_SELECTOR: ".wizard-step" !default;
+
+/* Selectors */
+$icon-stack-selector: ".icon-stack" !default;
+$icon-circle-selector: ".icon.f-icon-circle" !default;
+$icon-success-selector: ".icon.f-icon-success" !default;
+$icon-number-selector: "#{$icon-stack-selector} div" !default;
+$title-placeholder-selector: ".iflex--grow" !default;
+$header-selector: "#{$WIZARD_STEP_SELECTOR}__header" !default;
+$title-selector: "#{$header-selector}__title" !default;
+$title-container-selector: "#{$title-selector}-container";
+$line-adjustment-selector: "#{$header-selector}__line-adjustment" !default;
+$step-of-selector: "#{$header-selector}__step-of" !default;
+$line-up-selector: "#{$header-selector}__line-up" !default;
+$line-down-selector: "#{$header-selector}__line-down" !default;
+
+/* position adjustments for lines */
+
+/* change line-gap-to-circle variable to change distances */
+
+$line-gap-to-circle: 4px;
+$line-width: 2px;
+$line-center: 14px;
+$line-down-adjustment-up: #{-7 + $line-gap-to-circle};
+$line-down-length: 13px;
+$line-up-length: 20px;
+$line-up-adjustment-down: #{$line-gap-to-circle};
+$line-desktop-adjustment-up: #{$line-down-adjustment-up};
+$line-desktop-adjustment-down: #{$line-gap-to-circle * -2};
+$line-desktop-push-content-right: 22px;
+$line-desktop-align-line: 4px;
+$line-desktop-padding-top: 1px;
+$icon-size: 30px;
+
+#{$WIZARD_STEP_SELECTOR} {
+    #{$title-selector} {
+        font-size: 1.125rem;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    #{$title-container-selector} {
+        height: $icon-size;
+    }
+
+    #{$line-adjustment-selector} {
+        height: calc(#{$line-down-length} + #{$line-gap-to-circle});
+    }
+
+    #{$header-selector} {
+        margin-left: -10px;
+
+        #{$icon-stack-selector} {
+            display: block;
+            width: $icon-size;
+            height: $icon-size;
+            margin-right: 8px;
+        }
+
+        #{$icon-number-selector} {
+            width: 100%;
+            text-align: center;
+            font-size: 20px;
+            position: absolute;
+            font-weight: bold;
+        }
+
+        #{$icon-circle-selector} {
+            width: $icon-size;
+            height: $icon-size;
+            transition:
+                color 400ms ease-out,
+                fill 400ms ease-out,
+                opacity 400ms ease-out;
+        }
+
+        #{$icon-success-selector} {
+            display: none;
+        }
+    }
+
+    #{$step-of-selector} {
+        color: var(--f-text-color-discrete);
+        font-weight: normal;
+        font-size: 1rem;
+    }
+
+    #{$line-down-selector} {
+        position: relative;
+        margin-bottom: $line-gap-to-circle;
+        margin-left: #{$line-center};
+        height: #{$line-down-length};
+        margin-top: $line-gap-to-circle;
+        width: #{$line-width};
+        background-color: var(--f-background-wizard-step-line);
+    }
+
+    #{$line-up-selector} {
+        margin-left: #{$line-center};
+        height: #{$line-up-length};
+        width: #{$line-width};
+        margin-top: #{$line-gap-to-circle};
+        margin-bottom: #{$line-up-adjustment-down};
+        background-color: var(--f-background-wizard-step-line);
+    }
+    @include core.breakpoint-up(md) {
+        #{$line-up-selector} {
+            margin-bottom: $line-gap-to-circle;
+        }
+    }
+    @include core.breakpoint-up(md) {
+        &__connector {
+            border-left: #{$line-width} solid var(--f-border-color-wizard-step-line);
+            padding-left: #{$line-desktop-push-content-right};
+            margin-top: #{$line-desktop-adjustment-up};
+            margin-left: #{$line-desktop-align-line};
+            margin-bottom: #{$line-desktop-adjustment-down};
+            padding-top: #{$line-desktop-padding-top};
+        }
+    }
+
+    &--open #{$header-selector} {
+        #{$title-selector} {
+            color: var(--f-text-color-default);
+        }
+
+        #{$icon-circle-selector} {
+            fill: var(--f-icon-color-discrete);
+            color: var(--f-icon-color-white);
+        }
+
+        #{$icon-number-selector} {
+            color: var(--f-icon-color-black);
+        }
+
+        #{$step-of-selector} {
+            display: block;
+        }
+
+        #{$title-placeholder-selector} {
+            padding-top: 12px;
+        }
+
+        #{$line-up-selector} {
+            height: 35px;
+        }
+
+        #{$line-down-selector} {
+            margin-bottom: 0;
+        }
+    }
+
+    &--done #{$header-selector} {
+        margin-top: $line-gap-to-circle;
+
+        #{$title-selector} {
+            color: var(--f-text-color-wizard-step-done);
+            text-decoration-color: var(--f-text-color-wizard-step-done);
+        }
+
+        #{$title-selector}:hover {
+            text-decoration-color: var(--f-text-color-link-hover);
+        }
+
+        #{$line-up-selector} {
+            display: none;
+        }
+
+        #{$line-down-selector} {
+            margin-bottom: 0;
+        }
+
+        #{$icon-circle-selector} {
+            fill: var(--f-icon-color-wizard-step-done);
+            color: var(--f-icon-color-wizard-step-done);
+        }
+
+        #{$icon-number-selector} {
+            display: none;
+        }
+
+        #{$icon-success-selector} {
+            display: block;
+            color: var(--f-icon-color-white);
+            width: 20px;
+            height: 20px;
+            left: 5px;
+            top: 5px;
+        }
+
+        #{$line-adjustment-selector} {
+            height: calc(#{$line-down-length} + #{$line-gap-to-circle});
+        }
+    }
+
+    &--pending #{$header-selector} {
+        #{$title-selector} {
+            color: var(--f-text-color-discrete);
+        }
+
+        #{$icon-number-selector} {
+            color: var(--f-icon-color-discrete);
+        }
+
+        #{$icon-circle-selector} {
+            color: var(--f-icon-color-wizard-step-pending);
+            fill: var(--f-text-color-discrete);
+        }
+
+        #{$title-placeholder-selector} {
+            padding-top: 0;
+        }
+
+        #{$line-adjustment-selector} {
+            height: calc(#{$line-down-length} + (#{$line-gap-to-circle} * 2));
+        }
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--pending + #{$WIZARD_STEP_SELECTOR} {
+    #{$line-up-selector} {
+        display: none;
+    }
+    #{$title-placeholder-selector} {
+        padding-top: 0;
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--open:first-child {
+    #{$line-up-selector} {
+        visibility: hidden;
+        height: 1.25rem;
+    }
+    #{$title-placeholder-selector} {
+        padding-top: 0;
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--done:first-child,
+#{$WIZARD_STEP_SELECTOR}--pending:first-child {
+    #{$line-up-selector} {
+        display: none;
+        margin-top: 0;
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--done {
+    @include core.breakpoint-up(md) {
+        .wizard-step__connector {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--pending {
+    @include core.breakpoint-up(md) {
+        .wizard-step__connector {
+            margin-top: -#{$line-gap-to-circle};
+            margin-bottom: $line-gap-to-circle;
+        }
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--done:last-child,
+#{$WIZARD_STEP_SELECTOR}--pending:last-child {
+    @include core.breakpoint-up(md) {
+        .wizard-step__connector {
+            border-left: none;
+        }
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--done:last-child {
+    @include core.breakpoint-up(md) {
+        .wizard-step__connector {
+            border-left: none;
+        }
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}:last-child {
+    #{$line-down-selector} {
+        display: none;
+    }
+
+    &.wizard-step--open {
+        .wizard-step__connector {
+            margin-top: 1rem;
+        }
+    }
+
+    #{$line-adjustment-selector} {
+        display: none;
+    }
+    @include core.breakpoint-up(md) {
+        .wizard-step__connector {
+            border-left: none;
+        }
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--open,
+#{$WIZARD_STEP_SELECTOR}--pending {
+    #{$line-up-selector} {
+        margin-top: -#{$line-gap-to-circle + 3};
+    }
+}
+
+#{$WIZARD_STEP_SELECTOR}--done + #{$WIZARD_STEP_SELECTOR}--pending {
+    margin-top: $line-gap-to-circle;
+
+    #{$line-up-selector} {
+        display: none;
+    }
+}

package/src/components/wizard/_wizard.scss

@@ -0,0 +1,5 @@
+$WIZARD_SELECTOR: ".wizard" !default;
+
+#{$WIZARD_SELECTOR} {
+    margin-top: 20px;
+}

package/src/core/_all.scss

@@ -0,0 +1,6 @@
+@use "reset";
+@use "global";
+@use "typography/all" as typography;
+@use "helpers/all" as helpers;
+@use "layout/all" as layout;
+@use "density";

package/src/core/_config-variables.scss

@@ -0,0 +1,23 @@
+$asset-path: "~@fkui/design" !default;
+$asset-path-images: "#{$asset-path}/src/assets/images" !default;
+
+// responsiveness
+$f-grid-base: 16px !default;
+$f-grid-columns: 12 !default;
+$f-gutter-width: 2rem !default;
+$f-container-spacing: 1rem !default;
+$f-container-max-widths: (
+    sm: 95%,
+    md: 90%,
+    lg: 80%,
+    xl: 1280px,
+) !default;
+$f-breakpoint-medium: (40 * $f-grid-base) !default; // 640px
+$f-breakpoint-large: (64 * $f-grid-base) !default; // 1024px
+$f-breakpoint-xlarge: (80 * $f-grid-base) !default; // 1280px
+$f-breakpoints: (
+    sm: 0,
+    md: $f-breakpoint-medium,
+    lg: $f-breakpoint-large,
+    xl: $f-breakpoint-xlarge,
+) !default;

package/src/core/_density.scss

@@ -0,0 +1,11 @@
+.density-default {
+    --f-density-factor: 1;
+}
+
+.density-dense {
+    --f-density-factor: 0.8;
+}
+
+.density-densest {
+    --f-density-factor: 0.6;
+}

package/src/core/_global.scss

@@ -0,0 +1,47 @@
+@use "../core/mixins/breakpoints";
+@use "size";
+
+html {
+    // only applies when using FKUI in a non scoped application
+    font-size: var(--f-font-size-default-rem);
+
+    @include breakpoints.breakpoint-up(lg) {
+        font-size: var(--f-font-size-default-large-up-rem);
+    }
+}
+
+body {
+    // only applies when using FKUI in a non scoped application
+    color: var(--f-text-color-default);
+    font-size: var(--f-font-size-standard);
+    font-weight: var(--f-font-weight-normal);
+    line-height: var(--f-line-height-large);
+}
+
+p {
+    font-size: var(--f-font-size-standard);
+    font-weight: var(--f-font-weight-normal);
+    line-height: var(--f-line-height-large);
+    margin-bottom: #{size.$margin-100};
+}
+
+b,
+strong {
+    font-weight: var(--f-font-weight-medium);
+}
+
+code {
+    font-size: var(--f-font-size-standard);
+    border-radius: var(--f-border-radius-small);
+    font-family: var(--f-font-family-code);
+    background-color: var(--f-background-code);
+    display: inline-block;
+    margin: 0 #{size.$margin-025};
+    padding: 0 #{size.$padding-025};
+}
+
+pre {
+    code {
+        display: block;
+    }
+}

package/src/core/_mixins.scss

@@ -0,0 +1,8 @@
+@forward "mixins/arrow-creator";
+@forward "mixins/breakpoints";
+@forward "mixins/button_icon";
+@forward "mixins/button";
+@forward "mixins/circle";
+@forward "mixins/focus";
+@forward "mixins/label-inline";
+@forward "mixins/sr-only";