@fkui/design 5.36.0

package/src/core/typography/_headings.scss

@@ -0,0 +1,88 @@
+@use "../../core/config-variables";
+@use "../../core/size";
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: var(--f-font-weight-bold);
+    margin-bottom: size.$margin-025;
+    line-height: var(--f-line-height-medium);
+}
+h1 {
+    font-size: var(--f-font-size-h1);
+    color: var(--f-text-color-heading-1);
+}
+h2 {
+    font-size: var(--f-font-size-h2);
+    color: var(--f-text-color-heading-2);
+}
+h3 {
+    font-size: var(--f-font-size-h3);
+    color: var(--f-text-color-heading-3);
+}
+h4 {
+    font-size: var(--f-font-size-h4);
+    color: var(--f-text-color-heading-4);
+}
+h5 {
+    font-size: var(--f-font-size-large);
+    color: var(--f-text-color-heading-5);
+}
+h6 {
+    font-size: var(--f-font-size-standard);
+    color: var(--f-text-color-heading-6);
+}
+.heading--strong {
+    font-size: var(--f-font-size-large);
+    font-weight: var(--f-font-weight-medium);
+}
+
+* + h1,
+* + h2,
+* + h3,
+* + h4,
+* + h5,
+* + h6 {
+    margin-top: size.$margin-200;
+}
+
+@media (max-width: config-variables.$f-breakpoint-medium) {
+    h1 {
+        font-size: var(--f-font-size-h2);
+    }
+    h2 {
+        font-size: var(--f-font-size-xxx-large);
+    }
+    h3 {
+        font-size: var(--f-font-size-h4);
+    }
+    h4 {
+        font-size: var(--f-font-size-large);
+    }
+    h5 {
+        font-size: var(--f-font-size-standard);
+    }
+    h6 {
+        font-size: var(--f-font-size-standard);
+    }
+    .heading--strong {
+        font-size: var(--f-font-size-large);
+        font-weight: var(--f-font-weight-medium);
+    }
+}
+
+@for $i from 1 through 6 {
+    .heading--h#{$i} {
+        /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder -- technical debt */
+        @extend h#{$i};
+    }
+}
+
+@for $i from 1 through 5 {
+    h#{$i} + h#{$i + 1} {
+        margin-top: size.$margin-100;
+    }
+}

package/src/core/utils/_all.scss

@@ -0,0 +1 @@
+@forward "functions";

package/src/core/utils/_functions.scss

@@ -0,0 +1,41 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "../../core/config-variables";
+
+// Expands a shorthand value:
+// 10px -> 10px 10px 10px 10px
+// 10px 20px -> 10px 20px 10px 20px
+// 10px 20px 30px -> 10px 20px 30px 20px
+// 10px 20px 30px 40px -> 10px 20px 30px 40px
+@function fk-expand-shorthand($val) {
+    @if list.length($val) == 1 {
+        @return $val $val $val $val;
+    } @else if list.length($val) == 2 {
+        @return list.nth($val, 1) list.nth($val, 2) list.nth($val, 1) list.nth($val, 2);
+    } @else if list.length($val) == 3 {
+        @return list.nth($val, 1) list.nth($val, 2) list.nth($val, 3) list.nth($val, 2);
+    } @else {
+        @return $val;
+    }
+}
+
+@function strip-unit($value) {
+    @return math.div($value, $value * 0 + 1);
+}
+
+@function get-min-for($key) {
+    $value: map.get(config-variables.$f-breakpoints, $key);
+    @return if($value != 0, $value, null);
+}
+
+@function get-max-for($key) {
+    $breakpoint-keys: map.keys(config-variables.$f-breakpoints);
+    $index: list.index($breakpoint-keys, $key);
+    $next: if($index < list.length($breakpoint-keys), list.nth($breakpoint-keys, $index + 1), null);
+    @return if($next, get-min-for($next) - 0.02px, null);
+}
+
+@function densify($value) {
+    @return calc($value * var(--f-density-factor));
+}

package/src/fkui-exp.scss

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

package/src/fkui-int.scss

@@ -0,0 +1 @@
+@use "./fkui";

package/src/fkui.scss

@@ -0,0 +1,3 @@
+@use "core/all" as core;
+@use "components/all" as components;
+@use "internal-components/all" as internal-components;

package/src/fonts.scss

@@ -0,0 +1,3 @@
+body {
+    font-family: var(--f-font-family);
+}

package/src/internal-components/IFlex/_iflex.scss

@@ -0,0 +1,98 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints";
+@import "../../core/config-variables";
+
+$IFLEX_SELECTOR: ".iflex" !default;
+$iflex-base-gap: 0.25rem;
+
+%iflex {
+    display: flex;
+}
+
+@for $i from 1 through 8 {
+    %iflex--gap-#{$i}x {
+        margin-left: -$iflex-base-gap * $i;
+        margin-right: -$iflex-base-gap * $i;
+
+        %iflex__item {
+            padding-left: $iflex-base-gap * $i;
+            padding-right: $iflex-base-gap * $i;
+        }
+    }
+}
+
+%iflex__item {
+    flex: 1 0 0%;
+}
+
+%iflex--grow {
+    flex: 1 1 auto;
+}
+
+%iflex--shrink {
+    flex: 0 1 auto;
+}
+
+%iflex--align-top {
+    align-self: flex-start;
+}
+
+%iflex--align-center {
+    align-self: center;
+}
+
+%iflex--align-bottom {
+    align-self: flex-end;
+}
+
+#{$IFLEX_SELECTOR} {
+    @extend %iflex;
+
+    &__item {
+        @extend %iflex__item;
+    }
+
+    &--grow {
+        @extend %iflex--grow;
+    }
+
+    &--shrink {
+        @extend %iflex--shrink;
+    }
+
+    @for $i from 1 through 8 {
+        &--gap-#{$i}x {
+            @extend %iflex--gap-#{$i}x;
+        }
+    }
+
+    &--align-top {
+        @extend %iflex--align-top;
+    }
+
+    &--align-center {
+        @extend %iflex--align-center;
+    }
+
+    &--align-bottom {
+        @extend %iflex--align-bottom;
+    }
+}
+
+#{$IFLEX_SELECTOR}--collapse {
+    @include breakpoints.breakpoint-down(sm) {
+        display: block;
+    }
+}
+
+#{$IFLEX_SELECTOR}--wrap {
+    flex-wrap: wrap;
+}
+
+#{$IFLEX_SELECTOR}--float-right {
+    justify-content: flex-end;
+}
+
+#{$IFLEX_SELECTOR}--float-center {
+    justify-content: center;
+}

package/src/internal-components/IMenu/_imenu.scss

@@ -0,0 +1,106 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints";
+@import "../../core/config-variables";
+
+$IMENU_SELECTOR: ".imenu" !default;
+
+#{$IMENU_SELECTOR} {
+    background-color: var(--f-background-menu);
+
+    &__list {
+        margin: 0;
+        padding: 0;
+
+        &__item {
+            cursor: pointer;
+            list-style-type: none;
+            white-space: nowrap;
+
+            a,
+            a:visited,
+            a:active {
+                color: var(--f-text-color-menu);
+            }
+
+            a:hover {
+                color: var(--f-text-color-menu-hover);
+            }
+        }
+    }
+}
+
+#{$IMENU_SELECTOR}--vertical {
+    .imenu__list {
+        display: block;
+
+        &__item {
+            padding: size.$padding-075;
+            display: block;
+
+            &:hover {
+                font-weight: var(--f-font-weight-normal);
+                background-color: var(--f-background-menu-vertical-hover);
+            }
+
+            &--highlight {
+                background-color: var(--f-background-menu-vertical-highlight);
+                font-weight: var(--f-font-weight-medium);
+            }
+
+            &--highlight:hover {
+                font-weight: var(--f-font-weight-medium);
+            }
+        }
+    }
+}
+
+#{$IMENU_SELECTOR}--horizontal {
+    overflow: hidden;
+
+    .imenu__list {
+        display: flex;
+
+        &__item {
+            display: inline-flex;
+            padding-top: size.$padding-100;
+            padding-left: size.$padding-075;
+            padding-right: size.$padding-075;
+
+            &--highlight {
+                color: var(--f-text-color-menu-horizontal-highlight);
+                font-weight: var(--f-font-weight-medium);
+            }
+        }
+
+        &__anchor-container {
+            padding-bottom: size.$padding-050;
+            border-bottom: 5px solid transparent;
+
+            &--highlight {
+                border-bottom: 5px solid var(--f-border-color-menu-horizontal-highlight);
+            }
+
+            &:hover {
+                border-bottom: 5px solid var(--f-border-color-menu-horizontal-hover);
+            }
+        }
+
+        &__anchor {
+            display: inline-flex;
+
+            &--highlight:hover {
+                font-weight: var(--f-font-weight-medium);
+            }
+
+            &-icon-right {
+                flex: 1 0 auto;
+                padding-top: size.$padding-025;
+                color: var(--f-border-color-menu-horizontal-highlight);
+            }
+
+            &-span {
+                padding-right: size.$padding-075;
+            }
+        }
+    }
+}

package/src/internal-components/IPopupMenu/_ipopupmenu.scss

@@ -0,0 +1,50 @@
+@use "../../core/size";
+@use "../../core/mixins/breakpoints";
+@import "../../core/config-variables";
+
+$IPOPUPMENU_SELECTOR: ".ipopupmenu" !default;
+
+#{$IPOPUPMENU_SELECTOR} {
+    background-color: var(--f-background-popupmenu);
+
+    &__list {
+        margin: 0;
+        border: 1px solid var(--f-border-color-popupmenu);
+        padding: size.$padding-050;
+
+        &__item {
+            cursor: pointer;
+            list-style-type: none;
+            white-space: nowrap;
+
+            a,
+            a:visited,
+            a:active {
+                color: var(--f-text-color-popupmenu);
+            }
+
+            a:hover {
+                color: var(--f-text-color-popupmenu-hover);
+            }
+        }
+    }
+}
+
+#{$IPOPUPMENU_SELECTOR}--vertical {
+    .ipopupmenu__list {
+        display: block;
+
+        &__item {
+            padding: size.$padding-075;
+            display: block;
+            &:hover {
+                background-color: var(--f-background-popupmenu-vertical-hover);
+            }
+
+            &--highlight {
+                background-color: var(--f-background-popupmenu-vertical-highlight);
+                font-weight: var(--f-font-weight-medium);
+            }
+        }
+    }
+}

package/src/internal-components/ISkipLink/_iskiplink.scss

@@ -0,0 +1,16 @@
+@use "../../core/size";
+@import "../../core/config-variables";
+
+$ISKIPLINK_SELECTOR: ".iskiplink" !default;
+
+#{$ISKIPLINK_SELECTOR} {
+    position: absolute;
+    top: -200px;
+
+    &:focus {
+        color: black;
+        background-color: var(--f-background-skiplink-focus);
+        left: 10px;
+        top: 45px;
+    }
+}

package/src/internal-components/_all.scss

@@ -0,0 +1,11 @@
+/* stylelint-disable no-invalid-position-at-import-rule -- technical debt */
+@forward "IFlex/iflex";
+@import "IMenu/imenu";
+@import "IPopupMenu/ipopupmenu";
+@import "popup/popup";
+@import "animate-expand/animate-expand";
+@import "ISkipLink/iskiplink";
+@import "calendar/calendar";
+@import "calendar-month/month";
+@import "calendar-navbar/navbar";
+@import "popupError/popuperror";

package/src/internal-components/animate-expand/_animate-expand.scss

@@ -0,0 +1,17 @@
+$ANIMATE_EXPAND_SELECTOR: ".animate-expand" !default;
+
+#{$ANIMATE_EXPAND_SELECTOR} {
+    transition: var(--f-animation-expand-close);
+    overflow: hidden;
+    visibility: hidden;
+
+    &--expanded {
+        transition: var(--f-animation-expand-open);
+        opacity: 1;
+        visibility: visible;
+    }
+
+    &--opacity {
+        opacity: 0;
+    }
+}

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

@@ -0,0 +1,7 @@
+$CALENDAR_SELECTOR: ".calendar" !default;
+
+#{$CALENDAR_SELECTOR} {
+    &__wrapper {
+        width: 100%;
+    }
+}

package/src/internal-components/calendar-month/_month.scss

@@ -0,0 +1,74 @@
+@use "../../components/z-index";
+
+$MONTH_SELECTOR: ".calendar-month" !default;
+$days: 7;
+$week-width: 2%;
+$day-width: calc((100% - $week-width) / $days);
+
+#{$MONTH_SELECTOR} {
+    &__table {
+        border-spacing: 2px;
+        padding: 0 0.5rem 1rem;
+        width: 100%;
+        border-collapse: separate;
+        border: none;
+        margin: 0;
+    }
+
+    &__col--week {
+        width: #{$week-width};
+    }
+
+    &__col--day {
+        width: #{$day-width};
+    }
+
+    &__header-cell {
+        padding: 0.5rem 0;
+        text-align: center;
+        background-color: white;
+
+        abbr {
+            font-weight: var(--f-font-weight-normal);
+            text-decoration: none;
+            border-bottom: none;
+            text-transform: none;
+            font-size: 1rem;
+            cursor: auto;
+            color: var(--f-text-color-weekday-weeknumber);
+        }
+    }
+
+    &__cell {
+        height: 2.75rem;
+        padding: 0;
+        background: white;
+    }
+
+    &__cell--week-number {
+        vertical-align: middle;
+        padding-right: 0.25rem;
+        text-align: right;
+        min-width: 2rem;
+        color: var(--f-text-color-weekday-weeknumber);
+    }
+
+    &__button {
+        appearance: none;
+        border: 0;
+        cursor: pointer;
+        padding: 0;
+        width: 100%;
+        background-color: var(--f-background-month);
+        font-size: 1rem;
+
+        &:focus {
+            position: relative;
+            z-index: z-index.$CALENDAR_MONTH;
+
+            &[tabindex="-1"] {
+                box-shadow: var(--f-focus-box-shadow);
+            }
+        }
+    }
+}

package/src/internal-components/calendar-navbar/_navbar.scss

@@ -0,0 +1,55 @@
+$CALENDAR_NAVBAR_SELECTOR: ".calendar-navbar" !default;
+$calendar-icon-padding: 5px;
+$calendar-icon-disabled-border-width: 1px;
+$calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-disabled-border-width);
+
+#{$CALENDAR_NAVBAR_SELECTOR} {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    border-bottom: 1px solid var(--f-border-color-calendar-navbar);
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+    font-size: var(--f-font-size-h4);
+
+    &__month {
+        order: 2;
+    }
+
+    &__arrow--previous {
+        order: 1;
+        transform: scaleX(-1);
+    }
+
+    &__arrow--next {
+        order: 3;
+    }
+
+    &__icon {
+        color: var(--f-icon-color-white);
+        background-color: var(--f-icon-color-primary);
+        width: var(--f-icon-size-large);
+        height: var(--f-icon-size-large);
+        padding: $calendar-icon-padding;
+        border-radius: 50%;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+
+        &--disabled {
+            color: var(--f-icon-color-discrete);
+            background-color: var(--f-icon-color-white);
+            padding: $calendar-icon-disabled-padding;
+            border: $calendar-icon-disabled-border-width solid var(--f-border-color-calendar-navbar);
+            box-shadow: none;
+        }
+    }
+
+    &__arrow {
+        padding: 0;
+        display: flex;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+    }
+}

package/src/internal-components/popup/_popup.scss

@@ -0,0 +1,35 @@
+@use "../../core/size";
+@use "../../components/z-index";
+@import "../../core/config-variables";
+
+$POPUP_SELECTOR: ".popup" !default;
+
+#{$POPUP_SELECTOR} {
+    &--overlay {
+        position: absolute;
+
+        // Place popup at the top as default so it doesn't affect
+        // the page height when teleporting to bottom of body.
+        top: 0;
+
+        #{$POPUP_SELECTOR}__wrapper {
+            left: -10000px;
+            max-width: fit-content;
+            border-radius: var(--f-border-radius-small);
+            position: absolute;
+            z-index: z-index.$POPUP_ZINDEX;
+            box-shadow: var(--f-box-modal-shadow);
+        }
+    }
+
+    &--inline {
+        position: static;
+
+        #{$POPUP_SELECTOR}__wrapper {
+            box-sizing: border-box;
+            margin-top: size.$margin-050;
+            margin-bottom: size.$margin-050;
+            position: static;
+        }
+    }
+}