@funidata/fudis-core 0.0.2-alpha.5 → 0.0.3

package/src/components/icon/icon.scss

@@ -0,0 +1,238 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/colors/tokens.scss' as colors;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+
+/* Only for internal use for this icon class */
+@mixin icon-mask-base() {
+  /* stylelint-disable property-disallowed-list */
+  background-color: currentcolor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  content: '';
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.fudis-icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.6s ease;
+
+  &__color {
+    &__yellow {
+      @include colorMixin.text-color('yellow');
+    }
+
+    &__red {
+      @include colorMixin.text-color('red');
+    }
+
+    &__gray-dark {
+      @include colorMixin.text-color('gray-dark');
+    }
+
+    &__gray-middle {
+      @include colorMixin.text-color('gray-middle');
+    }
+
+    &__gray-light {
+      @include colorMixin.text-color('gray-light');
+    }
+
+    &__primary {
+      @include colorMixin.text-color('primary');
+    }
+
+    &__primary-dark {
+      @include colorMixin.text-color('primary-dark');
+    }
+
+    &__green {
+      @include colorMixin.text-color('green');
+    }
+
+    &__white {
+      @include colorMixin.text-color('white');
+    }
+  }
+
+  &__lg {
+    --icon-size: #{spacing.$spacing-lg};
+  }
+
+  &__md {
+    --icon-size: #{spacing.$spacing-md};
+  }
+
+  &__sm {
+    --icon-size: #{spacing.$spacing-sm};
+  }
+
+  &__rotate {
+    &__flip-180 {
+      transform: rotate(180deg);
+    }
+
+    &__cw-90 {
+      transform: rotate(90deg);
+    }
+
+    &__ccw-90 {
+      transform: rotate(-90deg);
+    }
+  }
+
+  &__achievement {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M24.373 12.384c-.277.894-.664 1.75-1.152 2.55a7.743 7.743 0 0 1-1.067-2.251 29.695 29.695 0 0 1 1.152-3.616 21.15 21.15 0 0 1 1.067 3.317ZM22.209 15.67a8.063 8.063 0 0 1-1.067 2.186 6.729 6.729 0 0 1-1.067-2.133 8.66 8.66 0 0 1 1.067-2.422c.49.722.85 1.523 1.067 2.368Z'/%3E%3Cpath d='M24.064 17.888a10.932 10.932 0 0 1-2.9-.47 9.271 9.271 0 0 1 2.132-1.813c.984.023 1.96.177 2.902.459a9.526 9.526 0 0 1-2.134 1.824ZM22.73 20.267a9.804 9.804 0 0 1-2.634 1.066 9.826 9.826 0 0 1-2.496-1.365 9.802 9.802 0 0 1 2.634-1.067c.892.336 1.732.796 2.496 1.366ZM18.826 15.403c.347.778.549 1.613.598 2.464-.181.576-2.027 2.133-2.027 2.133a7.06 7.06 0 0 1-.597-2.475c.192-.608 2.026-2.122 2.026-2.122Z'/%3E%3Cpath d='m18.112 19.339 3.307-1.664-2.496 2.282-4.587 2.592.416-1.216 3.36-1.994ZM7.66 12.576c.255.84.613 1.647 1.066 2.4.47-.648.83-1.369 1.067-2.133a29.196 29.196 0 0 0-1.067-3.467 21.546 21.546 0 0 0-1.067 3.2ZM9.792 15.67a8.064 8.064 0 0 0 1.067 2.186 6.73 6.73 0 0 0 1.066-2.133A8.663 8.663 0 0 0 10.86 13.3a7.56 7.56 0 0 0-1.067 2.368Z'/%3E%3Cpath d='M7.936 17.888c.984-.025 1.96-.183 2.901-.47a9.27 9.27 0 0 0-2.133-1.813c-.983.023-1.959.177-2.901.459a9.525 9.525 0 0 0 2.133 1.824ZM11.904 21.333a9.825 9.825 0 0 0 2.496-1.365 9.802 9.802 0 0 0-2.635-1.067c-.891.336-1.732.796-2.495 1.366.821.481 1.709.84 2.634 1.066ZM13.174 15.403a7.062 7.062 0 0 0-.598 2.464c.181.576 2.027 2.133 2.027 2.133.347-.782.55-1.62.597-2.475-.192-.608-2.026-2.122-2.026-2.122Z'/%3E%3Cpath d='m13.888 19.339-3.307-1.664 2.496 2.282 4.587 2.592-.406-1.216-3.37-1.994Z'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__alert {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.634 8.5a1 1 0 0 1 1.73 0l7.5 13a1 1 0 0 1-.86 1.5h-15a1 1 0 0 1-.87-1.5l7.5-13Zm8.37 13.5-7.5-13-7.5 13h15Z' clip-rule='evenodd'/%3E%3Ccircle cx='16.504' cy='19.75' r='.75'/%3E%3Cpath d='M16.504 17.75a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v3a.76.76 0 0 1-.75.75Z'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__archive {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='archive' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M25.429 11.83a.533.533 0 0 0-.533.533v10.304a1.6 1.6 0 0 1-1.6 1.6H9.78a1.6 1.6 0 0 1-1.6-1.6V12.363a.533.533 0 1 0-1.067 0v10.304a2.667 2.667 0 0 0 2.667 2.666h13.515a2.677 2.677 0 0 0 2.666-2.666V12.363a.533.533 0 0 0-.533-.534Z'/%3E%3Cpath fill-rule='evenodd' d='M8 6.4h17.066a2.667 2.667 0 0 1 2.667 2.667v1.962h-22.4V9.067A2.667 2.667 0 0 1 8 6.4ZM6.4 9.963h20.266v-.896a1.6 1.6 0 0 0-1.6-1.6H8a1.61 1.61 0 0 0-1.6 1.6v.896ZM20.267 17.248c0 .784-.636 1.419-1.42 1.419H14.23a1.419 1.419 0 0 1-1.43-1.419v-.352c0-.79.64-1.43 1.43-1.43h4.619a1.43 1.43 0 0 1 1.419 1.43v.352Zm-6.4-.352v.352a.363.363 0 0 0 .362.352h4.619a.352.352 0 0 0 .352-.352v-.352a.363.363 0 0 0-.352-.363h-4.62a.363.363 0 0 0-.362.363Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__arrow-big {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='arrow-big' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.925 24.534a1.6 1.6 0 0 1-1.6-1.6v-9.93l-3.06 3.064a1.596 1.596 0 0 1-2.259.005 1.598 1.598 0 0 1-.011-2.258l5.792-5.87c.315-.322.75-.495 1.174-.478.39-.016.858.161 1.166.47l5.861 5.87a1.6 1.6 0 1 1-2.264 2.26l-3.2-3.202v10.07a1.6 1.6 0 0 1-1.6 1.6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__arrow-dashed {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='arrow-dashed' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M23.466 17.067H16v-2.134h7.466v2.134Zm-10.666 0H5.333v-2.134H12.8v2.134Z'/%3E%3Cpath d='m26.506 16-6.016 4.267v-8.534L26.506 16Z'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__arrow-solid {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='arrow-solid' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M25.868 15.182a1 1 0 0 1 0 1.636l-7.865 5.539a1 1 0 0 1-1.576-.818V10.461a1 1 0 0 1 1.576-.818l7.865 5.54Z'/%3E%3Cpath fill-rule='evenodd' d='M5.5 16a1 1 0 0 1 1-1H20a1 1 0 1 1 0 2H6.5a1 1 0 0 1-1-1Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__check {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='check' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22.726 9.437a1.5 1.5 0 0 1 .371 2.088l-7.448 10.667a1.5 1.5 0 0 1-2.347.143l-4.285-4.779a1.5 1.5 0 0 1 2.234-2.003l3.022 3.37 6.364-9.115a1.5 1.5 0 0 1 2.089-.371Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__brochure {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='brochure' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M11 8.5a.5.5 0 0 0-.5.5v13.5a.5.5 0 0 0 .5.5h7v-2a1.5 1.5 0 0 1 1.5-1.5h2V9a.5.5 0 0 0-.5-.5H11Zm9.793 12H19.5a.5.5 0 0 0-.5.5v1.293l1.793-1.793ZM9.5 9A1.5 1.5 0 0 1 11 7.5h10A1.5 1.5 0 0 1 22.5 9v11.207L18.707 24H11a1.5 1.5 0 0 1-1.5-1.5V9Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M12 12a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__check-indeterminate {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='check-indeterminate' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='12' height='3' x='2' y='7' rx='1.5'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__calendar {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='calendar' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22.394 24.533c.552 0 1.073-.813 1.073-1.365v-12.8c0-.553-.52-.768-1.073-.768H19.2V8.533h-1.066V9.6h-4.267V8.533H12.8V9.6H9.594c-.518 0-1.06.244-1.06.768v12.8c0 .553.507 1.365 1.06 1.365h12.8ZM9.6 10.667h3.2v1.066h1.067v-1.066h4.267v1.066H19.2v-1.066h3.2V12.8H9.6v-2.133Zm0 3.2h12.8v8.868c0 .276-.163.732-.44.732h-12c-.275 0-.36-.456-.36-.732v-8.868Zm4.267 5.333h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Zm3.2 3.2h-2.134v2.133h2.133V19.2Zm0-3.2h-2.134v2.133h2.133V16Zm3.2 3.2h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__bullets {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='bullets' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='7' cy='11' r='1'/%3E%3Crect width='16' height='2' x='10' y='10' rx='1'/%3E%3Ccircle cx='7' cy='16' r='1'/%3E%3Crect width='16' height='2' x='10' y='15' rx='1'/%3E%3Ccircle cx='7' cy='21' r='1'/%3E%3Crect width='16' height='2' x='10' y='20' rx='1'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__back {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='back' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m18.684 14.403-.018-.003h-7.37l3.486-3.411c.2-.197.2-.513 0-.709a.518.518 0 0 0-.723 0l-4.25 4.16a.686.686 0 0 0 0 .986l4.25 4.16c.2.196.524.196.723 0 .2-.194.2-.512 0-.708l-3.486-3.411h7.37v.004c1.49-.037 2.667 1.19 2.667 2.662s-1.178 2.699-2.667 2.663v.004h-1.6a.533.533 0 0 0 0 1.067h1.6a3.737 3.737 0 0 0 3.733-3.734c0-2.057-1.654-3.756-3.715-3.73' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__change-log {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='change-log' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16.5 15.717V11.2h-1v5.083l2.91 1.746.514-.858-2.424-1.454Z' clip-rule='evenodd'/%3E%3Cpath d='M9.066 16a6.934 6.934 0 1 1 3.736 6.152l.494-.95A5.862 5.862 0 1 0 10.138 16H9.066Z'/%3E%3Cpath d='M7.467 16h4.266L9.6 18.667 7.467 16Z'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__search {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='search' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m19.114 18.485 3.083 3.2a.917.917 0 0 1 0 1.227.981.981 0 0 1-1.366 0l-3.2-3.2a5.472 5.472 0 0 1-2.634.683 5.397 5.397 0 1 1 5.397-5.333 5.227 5.227 0 0 1-1.28 3.423Zm-5.473-6.65a3.488 3.488 0 0 0-2.11 3.27 3.467 3.467 0 0 0 3.476 3.423 3.488 3.488 0 1 0-1.366-6.693Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__new-tab {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='new-tab' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M17.571 8H23.464c.296 0 .536.24.536.536V14.429h-1.071v-4.6l-7.657 7.657-.38.379-.757-.758.38-.379 7.656-7.657h-4.6V8ZM9 10.143h7.5v1.071h-6.429V21.93h10.715V15.5h1.071V23H9V10.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__close {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='close' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z'/%3E%3Cpath d='M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__exclamation-mark-circle {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='exclamation-mark-circle' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath d='M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__checkmark-circle {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='checkmark-circle' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M21.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
+
+  &__info-circle {
+    &::after {
+      @include icon-mask-base;
+
+      mask-image: url("data:image/svg+xml,%3Csvg id='info-circle' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Ccircle cx='16' cy='11.5' r='1.5'/%3E%3Cpath d='M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z'/%3E%3C/svg%3E");
+    }
+  }
+}

package/src/components/label/label.scss

@@ -0,0 +1,33 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/typography/tokens.scss' as typographyToken;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+
+.fudis-label {
+  @include colorMixin.text-color('gray-dark');
+  @include typography.text-field-label;
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  &__content {
+    margin: spacing.$spacing-xxs 0;
+    min-height: spacing.$spacing-md;
+
+    &__text {
+      margin-right: spacing.$spacing-xs;
+    }
+
+    &__required {
+      @include typography.text-field-label;
+      @include colorMixin.text-color('gray-middle');
+
+      display: inline-block;
+      vertical-align: bottom;
+      text-transform: initial;
+      /* stylelint-disable-next-line property-disallowed-list */
+      font-size: typographyToken.$body-text-sm-font-size;
+    }
+  }
+}

package/src/components/link/link.scss

@@ -0,0 +1,18 @@
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+
+.fudis-link {
+  &__size {
+    &__inherit {
+      @include typography.link-inherit;
+    }
+
+    &__md {
+      @include typography.link-md;
+    }
+
+    &__lg {
+      @include typography.link-lg;
+    }
+  }
+}

package/src/components/loading-spinner/loading-spinner.scss

@@ -0,0 +1,49 @@
+@use '../../foundations/colors/tokens.scss' as color;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+
+/* stylelint-disable-next-line unit-disallowed-list */
+$lg-size: calc(3rem / var(--fudis-rem-multiplier)); // 48px
+/* stylelint-disable-next-line unit-disallowed-list */
+$max-width: calc(16rem / var(--fudis-rem-multiplier)); // 256px
+
+.fudis-loading-spinner {
+  display: inline-block;
+  max-width: $max-width;
+
+  &__ui-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__variant {
+    &__sm {
+      margin-top: spacing.$spacing-xxs;
+      margin-bottom: spacing.$spacing-xs;
+      width: spacing.$spacing-md;
+      height: spacing.$spacing-md;
+    }
+
+    &__lg {
+      margin-bottom: spacing.$spacing-sm;
+      width: $lg-size;
+      height: $lg-size;
+    }
+  }
+
+  &__svg {
+    animation: spin 1.5s linear infinite;
+    fill: color.$color-primary;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/notification/notification.scss

@@ -0,0 +1,49 @@
+@use '../../foundations/colors/mixins.scss' as color;
+@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/focus/mixins.scss' as focus;
+
+.fudis-notification {
+  @include border.border-radius('2px');
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  padding: 0 spacing.$spacing-sm 0 spacing.$spacing-xxs;
+  width: 100%;
+  min-height: spacing.$spacing-md;
+
+  &__content {
+    display: inline-block;
+    align-self: center;
+    margin: calc(spacing.$spacing-xxs + spacing.$pixel-2) 0;
+  }
+
+  &__warning {
+    @include color.bg-color('yellow-light');
+    @include border.border('1px', 'solid', 'yellow');
+
+    border-left-width: spacing.$spacing-xs;
+  }
+
+  &__danger {
+    @include color.bg-color('red-light');
+    @include border.border('1px', 'solid', 'red');
+
+    border-left-width: spacing.$spacing-xs;
+  }
+
+  &__success {
+    @include color.bg-color('green-light');
+    @include border.border('1px', 'solid', 'green');
+
+    border-left-width: spacing.$spacing-xs;
+  }
+
+  &__info {
+    @include color.bg-color('primary-light');
+    @include border.border('1px', 'solid', 'primary-dark');
+
+    border-left-width: spacing.$spacing-xs;
+  }
+}

package/src/components/popover/popover.scss

@@ -0,0 +1,18 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/borders/mixins.scss' as border;
+
+/* stylelint-disable unit-disallowed-list */
+
+.fudis-popover {
+  @include border.border-radius('3px');
+  @include typography.body-text-sm-regular;
+  @include colorMixin.bg-color('gray-dark');
+  @include colorMixin.text-color('white');
+
+  display: inline-block;
+  padding: spacing.$spacing-xxs spacing.$spacing-xs;
+  max-width: calc(12rem / var(--fudis-rem-multiplier));
+  letter-spacing: normal;
+}

package/src/components/radio-button/radio-button.scss

@@ -0,0 +1,107 @@
+/* stylelint-disable unit-disallowed-list */
+@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/colors/tokens.scss' as color;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/focus/mixins.scss' as focus;
+
+$radio-input-size: calc(1.25rem / var(--fudis-rem-multiplier));
+$radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
+
+.fudis-radio-button {
+  @include typography.body-text-md-regular;
+  @include colorMixin.text-color('gray-dark');
+
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  margin-bottom: 0;
+  width: auto;
+  min-height: spacing.$spacing-lg;
+
+  &__label {
+    margin-bottom: 0;
+    padding-right: spacing.$spacing-xs;
+    padding-left: spacing.$spacing-xs;
+  }
+
+  /* Radio button circle */
+  &__content {
+    display: flex;
+    align-items: center;
+    transform: translateX(calc(-0.1rem / var(--fudis-rem-multiplier)));
+    padding-left: 0;
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: spacing.$spacing-lg;
+      min-height: spacing.$spacing-lg;
+    }
+
+    &__control {
+      @include border.border('1px', 'solid', 'gray-middle');
+
+      display: inline-flex;
+      top: 0;
+      left: 0;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: $radio-input-size;
+      min-width: $radio-input-size;
+      height: $radio-input-size;
+
+      &--invalid {
+        @include border.border('1px', 'solid', 'red');
+
+        box-shadow: 0 0 0 spacing.$pixel-3 color.$color-red-light;
+      }
+
+      &--disabled {
+        @include border.border('1px', 'dashed', 'gray-middle');
+        @include colorMixin.bg-color('gray-extra-light');
+      }
+
+      &__indicator {
+        @include colorMixin.bg-color('gray-dark');
+
+        border-radius: 50%;
+        width: $radio-indicator-size;
+        height: $radio-indicator-size;
+      }
+    }
+  }
+
+  &__input {
+    position: absolute;
+    left: 0;
+    opacity: 0;
+    margin: 0;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+
+    &--disabled {
+      cursor: default;
+    }
+
+    /* stylelint-disable-next-line */
+    &:focus
+    /* stylelint-disable selector-class-pattern */
+      + .fudis-radio-button__content
+      .fudis-radio-button__content__control {
+      @include focus.focus-form-field;
+    }
+  }
+
+  /* 
+  * If RadioButtonGroup is disabled through "disabled" Input, we need to set pointer-event to none for each radio-button. 
+  * This is not necessary when disabling comes through formControl.
+  */
+  &--disabled {
+    pointer-events: none;
+  }
+}

package/src/components/radio-button-group/radio-button-group.scss

@@ -0,0 +1,7 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+
+.fudis-radio-button-group {
+  .fudis-fieldset-content {
+    margin-top: spacing.$spacing-none;
+  }
+}

package/src/components/tab-navigation/tab-navigation.scss

@@ -0,0 +1,99 @@
+@use '../../foundations/colors/tokens.scss' as color;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/focus/mixins' as focus;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+@use '../../foundations/borders/mixins.scss' as border;
+@use '../../foundations/typography/tokens.scss' as typography;
+@use '../../foundations/typography/mixins.scss' as typographyMixin;
+
+.fudis-tab-navigation-bar {
+  display: inline-block;
+  position: relative;
+
+  &__wrapper {
+    &--primary {
+      border-bottom: solid spacing.$pixel-1 color.$color-gray-dark;
+    }
+
+    &--secondary {
+      @include border.border-none;
+
+      padding-top: spacing.$spacing-xxs;
+    }
+
+    &__tab-container {
+      display: flex;
+      column-gap: spacing.$spacing-xs;
+      overflow-x: auto;
+      scrollbar-width: none;
+
+      &--primary {
+        padding-top: spacing.$pixel-3;
+
+        &:first-child {
+          padding-left: spacing.$spacing-sm;
+        }
+
+        &:last-child {
+          padding-right: spacing.$spacing-sm;
+        }
+      }
+
+      &--secondary {
+        padding: spacing.$pixel-3;
+      }
+    }
+  }
+}
+
+.fudis-tab-navigation-tab {
+  @include colorMixin.bg-color('white');
+  @include colorMixin.text-color('gray-dark');
+  @include typographyMixin.tab-text;
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding-right: spacing.$spacing-sm;
+  padding-left: spacing.$spacing-sm;
+  text-decoration: none;
+
+  &:focus-visible {
+    @include focus.focus-generic;
+  }
+
+  &--primary {
+    @include border.border('1px', 'solid', 'gray-dark');
+
+    border-bottom: unset;
+    border-top-left-radius: spacing.$pixel-2;
+    border-top-right-radius: spacing.$pixel-2;
+    height: spacing.$spacing-xl;
+
+    &--active {
+      @include colorMixin.bg-color('primary');
+      @include colorMixin.text-color('white');
+
+      border-color: color.$color-primary;
+      text-decoration: underline solid;
+    }
+  }
+
+  &--secondary {
+    @include colorMixin.bg-color('gray-light');
+    @include colorMixin.text-color('gray-dark');
+    @include border.border('1px', 'solid', 'gray-light');
+
+    border-radius: spacing.$pixel-1;
+    height: spacing.$spacing-lg;
+
+    &--active {
+      @include colorMixin.bg-color('gray-dark');
+      @include colorMixin.text-color('white');
+      @include border.border('1px', 'solid', 'gray-dark');
+
+      text-decoration: underline solid;
+    }
+  }
+}

package/src/components/text-area/text-area.scss

@@ -0,0 +1,7 @@
+@use '../../foundations/utilities/mixins.scss' as utilities;
+
+.fudis-text-area {
+  &__input {
+    @include utilities.text-area;
+  }
+}

package/src/components/text-input/text-input.scss

@@ -0,0 +1,17 @@
+@use '../../foundations/utilities/mixins.scss' as utilities;
+
+.fudis-text-input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+
+  &__input {
+    @include utilities.text-input;
+  }
+
+  // Keep number input arrows visible all the time
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  input[type='number']::-webkit-inner-spin-button {
+    opacity: 1;
+  }
+}

package/src/components/validator-error-message/validator-error-message.scss

@@ -0,0 +1,17 @@
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/colors/mixins.scss' as colorMixin;
+
+.fudis-error-message {
+  margin-top: spacing.$spacing-xs;
+  margin-bottom: spacing.$spacing-xs;
+
+  &__body-text {
+    @include typography.body-text-md-regular;
+  }
+
+  &__form-error {
+    @include colorMixin.text-color('red');
+    @include typography.body-text-sm-regular;
+  }
+}