@funidata/fudis-core 0.0.1

package/README.md

@@ -0,0 +1 @@
+Do not edit - CI will overwrite this file with the root README.md on release.

package/_index.scss

@@ -0,0 +1,24 @@
+/*
+* Export all Core SCSS files here
+*/
+@forward './src/assets/fonts/fonts';
+@forward './src/foundations/borders/tokens';
+@forward './src/foundations/breakpoints/tokens';
+@forward './src/foundations/colors/tokens';
+@forward './src/foundations/focus/tokens';
+@forward './src/foundations/grid/tokens';
+@forward './src/foundations/spacing/tokens';
+@forward './src/foundations/typography/tokens';
+@forward './src/foundations/z-index/tokens';
+@forward './src/foundations/borders/mixins';
+@forward './src/foundations/breakpoints/mixins';
+@forward './src/foundations/colors/mixins';
+@forward './src/foundations/focus/mixins';
+@forward './src/foundations/grid/mixins';
+@forward './src/foundations/spacing/mixins';
+@forward './src/foundations/typography/mixins';
+@forward './src/foundations/utilities/mixins';
+@forward './src/foundations/z-index/mixins';
+@forward './src/foundations/spacing/classes';
+@forward './src/foundations/utilities/classes';
+@forward './src/components/button/button';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@funidata/fudis-core",
+  "version": "0.0.1",
+  "description": "Core styles and foundations for Fudis Design System",
+  "files": [
+    "src",
+    "./_index.scss"
+  ],
+  "scripts": {
+    "start": "storybook dev -p 6007",
+    "build:storybook": "storybook build",
+    "build:dist": "scripts/copy-files.sh",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/funidata/fudis-core.git"
+  },
+  "keywords": [
+    "funidata",
+    "design-system",
+    "core-styles",
+    "foundations"
+  ],
+  "author": "Funidata Ltd",
+  "license": "CC-BY-NC-SA-4.0",
+  "bugs": {
+    "url": "https://github.com/funidata/fudis-core/issues"
+  },
+  "homepage": "https://github.com/funidata/fudis-core#readme",
+  "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/html": "^8.6.12",
+    "@storybook/html-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "sass-embedded": "^1.86.3",
+    "storybook": "^8.6.12"
+  }
+}

package/src/assets/fonts/fonts.scss

@@ -0,0 +1,33 @@
+/* stylelint-disable property-disallowed-list */
+
+// Light, 300
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('./woff/FiraSans-Light.woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+// Regular, 400
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('./woff/FiraSans-Regular.woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+// Medium, 500
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('./woff/FiraSans-Medium.woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+// Semibold, 600
+@font-face {
+  font-family: 'Fira Sans';
+  src: url('./woff/FiraSans-SemiBold.woff2');
+  font-weight: 600;
+  font-style: normal;
+}

package/src/components/button/button.scss

@@ -0,0 +1,58 @@
+@use '../../foundations/colors/mixins.scss' as colors;
+@use '../../foundations/focus/mixins.scss' as focus;
+@use '../../foundations/borders/mixins.scss' as borders;
+@use '../../foundations/typography/mixins.scss' as typography;
+@use '../../foundations/spacing/tokens.scss' as spacing;
+@use '../../foundations/utilities/mixins.scss' as utilities;
+
+.fudis-button {
+  @include utilities.box-reset;
+  @include borders.border-radius('2px');
+  @include colors.bg-color('transparent');
+  @include typography.button-typography;
+  @include borders.border('2px', 'solid', 'primary');
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 spacing.$spacing-xs;
+  min-width: spacing.$spacing-xxl;
+  vertical-align: middle;
+
+  &:focus {
+    @include focus.focus-generic;
+  }
+
+  &[aria-disabled='true'] {
+    @include colors.text-color('gray-dark');
+    @include colors.bg-color('gray-light');
+    @include borders.border('2px', 'solid', 'transparent');
+    @include borders.outline('1px', 'dashed', 'gray-middle');
+  }
+
+  &__primary {
+    @include colors.text-color('white');
+    @include colors.bg-color('primary');
+  }
+
+  &__secondary {
+    @include colors.text-color('primary');
+    @include colors.bg-color('white');
+  }
+
+  &__tertiary {
+    @include colors.text-color('primary');
+    @include borders.border('2px', 'solid', 'transparent');
+  }
+
+  &__size {
+    &__small {
+      min-height: spacing.$spacing-md;
+    }
+
+    &__medium {
+      min-height: spacing.$spacing-lg;
+    }
+  }
+}

package/src/components/button/button.stories.js

@@ -0,0 +1,49 @@
+export default {
+  title: "Components/Button",
+  decorators: [
+    (storyFn) =>
+      `<div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;">${storyFn()}</div>`,
+  ],
+};
+
+export const Primary = () => `
+  <button class="fudis-button fudis-button__primary fudis-button__size__medium">
+    Primary
+  </button>
+`;
+
+export const Secondary = () => `
+  <button class="fudis-button fudis-button__secondary fudis-button__size__medium">
+    Secondary
+  </button>
+`;
+
+export const Tertiary = () => `
+  <button class="fudis-button fudis-button__tertiary fudis-button__size__medium">
+  Tertiary
+  </button>
+`;
+
+export const Primary_Small = () => `
+  <button class="fudis-button fudis-button__primary fudis-button__size__small">
+  Primary Small
+  </button>
+`;
+
+export const Secondary_Small = () => `
+  <button class="fudis-button fudis-button__secondary fudis-button__size__small">
+  Secondary Small
+  </button>
+`;
+
+export const Tertiary_Small = () => `
+  <button class="fudis-button fudis-button__tertiary fudis-button__size__small">
+  Tertiary Small
+  </button>
+`;
+
+export const Disabled = () => `
+  <button aria-disabled="true" class="fudis-button fudis-button__primary fudis-button__size__medium">
+    Disabled
+  </button>
+`;

package/src/foundations/borders/mixins.scss

@@ -0,0 +1,57 @@
+/* stylelint-disable @stylistic/block-opening-brace-space-before */
+/* stylelint-disable declaration-property-value-disallowed-list */
+/* stylelint-disable property-disallowed-list */
+@use 'sass:map';
+@use './../colors/tokens.scss' as colors;
+@use './../spacing/tokens.scss' as spacing;
+@use './tokens.scss' as borderTokens;
+
+/**
+  Generates border, i. e.:
+  border: 2px solid $primary-dark;
+*/
+@mixin border($width, $style, $color) {
+  @if map.has-key(spacing.$pixel-tokens, $width) and
+    map.has-key(borderTokens.$border-styles, $style) and
+    map.has-key(colors.$colors, $color)
+  {
+    border: map.get(spacing.$pixel-tokens, $width)
+      map.get(borderTokens.$border-styles, $style)
+      map.get(colors.$colors, $color);
+  } @else {
+    @error 'Unknown border parameter. Please check foundations/borders/mixins.scss for accepted arguments.';
+  }
+}
+
+/**
+ Generates outline i.e. outline: 2px solid $primary-dark;
+*/
+@mixin outline($width, $style, $color) {
+  @if map.has-key(spacing.$pixel-tokens, $width) and
+    map.has-key(borderTokens.$border-styles, $style) and
+    map.has-key(colors.$colors, $color)
+  {
+    outline: map.get(spacing.$pixel-tokens, $width)
+      map.get(borderTokens.$border-styles, $style)
+      map.get(colors.$colors, $color);
+    outline-offset: -(map.get(spacing.$pixel-tokens, $width));
+  } @else {
+    @error 'Unknown border parameter. Please check foundations/borders/mixins.scss for accepted arguments.';
+  }
+}
+
+@mixin border-radius($width) {
+  @if map.has-key(spacing.$pixel-tokens, $width) {
+    border-radius: map.get(spacing.$pixel-tokens, $width);
+  } @else {
+    @error 'Unknown border-radius of #{$width}. It can only be "1px", "2px" or "3px"';
+  }
+}
+
+@mixin border-none() {
+  border: none;
+}
+
+@mixin outline-none() {
+  outline: none;
+}

package/src/foundations/borders/tokens.scss

@@ -0,0 +1,5 @@
+$border-styles: (
+  'solid': solid,
+  'dashed': dashed,
+  'none': none,
+);

package/src/foundations/breakpoints/mixins.scss

@@ -0,0 +1,29 @@
+/* stylelint-disable @stylistic/block-opening-brace-space-before */
+@use 'sass:map';
+@use './tokens';
+
+@mixin breakpoint($breakpoint) {
+  @if map.has-key(tokens.$breakpoints, $breakpoint) {
+    $breakpoint-value: map.get(tokens.$breakpoints, $breakpoint);
+
+    @media screen and (min-width: #{$breakpoint-value}) {
+      @content;
+    }
+  } @else {
+    @error 'Unknown minimum breakpoint of #{$breakpoint}. Accepted arguments are: "xxl", "xl", "lg", "md", "sm", "xs".';
+  }
+}
+
+@mixin breakpoint-max($breakpoint) {
+  @if map.has-key(tokens.$max-breakpoints, $breakpoint) and $breakpoint != 'xs'
+  {
+    $breakpoint-value: map.get(tokens.$max-breakpoints, $breakpoint);
+    $calc-max-width: calc($breakpoint-value - 0.01em);
+
+    @media screen and (max-width: #{$calc-max-width}) {
+      @content;
+    }
+  } @else {
+    @error 'Unknown maximum breakpoint of #{$breakpoint}. Accepted arguments are: "xxl", "xl", "lg", "md", and "sm"';
+  }
+}

package/src/foundations/breakpoints/tokens.scss

@@ -0,0 +1,23 @@
+// Meant to be used as "min-width" for breakpoints
+$breakpoint-xxl: 100em; // 1600px-;
+$breakpoint-xl: 75em; // 1200px-1599px;
+$breakpoint-lg: 62em; // 992px-1199px;
+$breakpoint-md: 48em; // 768px-991px;
+$breakpoint-sm: 36em; // 576px-767px;
+$breakpoint-xs: 0; // 0-575px;
+
+$breakpoints: (
+  'xxl': $breakpoint-xxl,
+  'xl': $breakpoint-xl,
+  'lg': $breakpoint-lg,
+  'md': $breakpoint-md,
+  'sm': $breakpoint-sm,
+  'xs': $breakpoint-xs,
+);
+$max-breakpoints: (
+  'xxl': $breakpoint-xxl,
+  'xl': $breakpoint-xl,
+  'lg': $breakpoint-lg,
+  'md': $breakpoint-md,
+  'sm': $breakpoint-sm,
+);

package/src/foundations/colors/mixins.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use './tokens' as colors;
+
+@mixin text-color($color) {
+  @if map.has-key(colors.$colors, $color) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    color: map.get(colors.$colors, $color);
+  } @else {
+    @error 'Unknown palette color of #{$color}. Check colors/tokens.scss file for accepted arguments.';
+  }
+}
+
+@mixin bg-color($color) {
+  @if map.has-key(colors.$colors, $color) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    background-color: map.get(colors.$colors, $color);
+  } @else {
+    @error 'Unknown palette background color of #{$color}. Check colors/tokens.scss file for accepted arguments.';
+  }
+}

package/src/foundations/colors/tokens.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+
+/* stylelint-disable color-no-hex */
+
+/*
+  --- Primary Colors ---
+*/
+$color-primary-light: var(--fudis-color-primary-light);
+$color-primary: var(--fudis-color-primary);
+$color-primary-dark: var(--fudis-color-primary-dark);
+$color-primary-extra-dark: var(--fudis-color-primary-extra-dark);
+
+/*
+  --- Secondary & Accent Colors ---
+*/
+
+// Grays
+
+$color-black: #000000;
+$color-white: #ffffff;
+$color-gray-extra-light: #f1f1f1;
+$color-gray-light: #d4d4d4;
+$color-gray-middle: #727272;
+$color-gray-dark: #484848;
+
+// Accent colors
+
+$color-red-light: #f8dcd9;
+$color-red: #b83c2e;
+$color-yellow-light: #fdefb4;
+$color-yellow: #f1c40f;
+$color-green-light: #c6ecd6;
+$color-green: #1e874b;
+$color-focus-primary: #1076db;
+$colors: (
+  'primary-light': $color-primary-light,
+  'primary': $color-primary,
+  'primary-dark': $color-primary-dark,
+  'primary-extra-dark': $color-primary-extra-dark,
+  'black': $color-black,
+  'white': $color-white,
+  'gray-extra-light': $color-gray-extra-light,
+  'gray-light': $color-gray-light,
+  'gray-middle': $color-gray-middle,
+  'gray-dark': $color-gray-dark,
+  'red-light': $color-red-light,
+  'red': $color-red,
+  'yellow-light': $color-yellow-light,
+  'yellow': $color-yellow,
+  'green-light': $color-green-light,
+  'green': $color-green,
+  'focus-primary': $color-focus-primary,
+  'transparent': transparent,
+);

package/src/foundations/focus/mixins.scss

@@ -0,0 +1,33 @@
+/* stylelint-disable property-disallowed-list */
+@use './../spacing/tokens.scss' as spacing;
+@use './../borders/mixins.scss' as borders;
+@use './../colors/tokens' as colors;
+@use './tokens' as tokens;
+
+@mixin focus-generic {
+  outline: tokens.$focus-generic-outline;
+  outline-offset: spacing.$pixel-1;
+  box-shadow: 0 0 0 spacing.$spacing-xxs colors.$color-white;
+}
+
+@mixin focus-form-field {
+  @include borders.border('1px', 'solid', 'focus-primary');
+
+  outline: tokens.$focus-form-field-outline;
+  outline-offset: -(spacing.$pixel-2);
+  box-shadow: 0 0 0 spacing.$pixel-1 colors.$color-white;
+}
+
+@mixin focus-checkbox {
+  @include borders.outline('2px', 'solid', 'primary');
+
+  outline-offset: -(spacing.$pixel-1);
+  width: spacing.$checkbox-size;
+  height: spacing.$checkbox-size;
+}
+
+@mixin focus-dropdown {
+  outline: tokens.$focus-generic-outline;
+  outline-offset: -(spacing.$pixel-2);
+  box-shadow: 0 0 0 spacing.$spacing-xxs colors.$color-white;
+}

package/src/foundations/focus/tokens.scss

@@ -0,0 +1,6 @@
+@use './../colors/tokens.scss' as colors;
+@use './../spacing/tokens.scss' as spacing;
+
+// Variables for Generic and Form field focus outlines
+$focus-generic-outline: spacing.$pixel-2 dashed colors.$color-gray-dark;
+$focus-form-field-outline: spacing.$pixel-2 solid colors.$color-focus-primary;

package/src/foundations/grid/mixins.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use './tokens' as tokens;
+@use './../spacing/tokens.scss' as spacing;
+
+@mixin grid-max-width($width) {
+  @if map.has-key(tokens.$grid-widths, $width) {
+    $grid-width-value: map.get(tokens.$grid-widths, $width);
+
+    max-width: $grid-width-value;
+
+    @if $width == xl or $width == xxl {
+      gap: spacing.$spacing-lg spacing.$spacing-lg;
+    }
+
+    @if $width == md or $width == lg {
+      gap: spacing.$spacing-md spacing.$spacing-md;
+    }
+
+    @if $width == sm or $width == xs {
+      gap: spacing.$spacing-sm spacing.$spacing-sm;
+    }
+  } @else {
+    @error 'Unknown grid width of #{$width}. Accepted arguments are: "xxl", "xl", "lg", "md", "sm", "xs".';
+  }
+}
+
+@mixin grid-xs-margins() {
+  margin-right: spacing.$spacing-sm;
+  margin-left: spacing.$spacing-sm;
+}

package/src/foundations/grid/tokens.scss

@@ -0,0 +1,18 @@
+// TODO: is $grid-width-xs actually needed? Check from designers was there a reasoning for it
+
+/* stylelint-disable unit-disallowed-list */
+$grid-width-xs: calc(34rem / var(--fudis-rem-multiplier)); // 320px-544px
+$grid-width-sm: calc(34rem / var(--fudis-rem-multiplier)); // 544px
+$grid-width-md: calc(45rem / var(--fudis-rem-multiplier)); // 720px
+$grid-width-lg: calc(60rem / var(--fudis-rem-multiplier)); // 960px
+$grid-width-xl: calc(65rem / var(--fudis-rem-multiplier)); // 1040px
+$grid-width-xxl: calc(96.25rem / var(--fudis-rem-multiplier)); // 1540px
+
+$grid-widths: (
+  'xxl': $grid-width-xxl,
+  'xl': $grid-width-xl,
+  'lg': $grid-width-lg,
+  'md': $grid-width-md,
+  'sm': $grid-width-sm,
+  'xs': $grid-width-xs,
+);

package/src/foundations/spacing/classes.scss

@@ -0,0 +1,28 @@
+@use './tokens.scss' as spacing;
+@use './mixins.scss' as mixins;
+@use './../breakpoints/mixins.scss' as breakpoints;
+@include mixins.spacing-classes('fudis');
+
+@include breakpoints.breakpoint('xs') {
+  @include mixins.spacing-classes('fudis-xs');
+}
+
+@include breakpoints.breakpoint('sm') {
+  @include mixins.spacing-classes('fudis-sm');
+}
+
+@include breakpoints.breakpoint('md') {
+  @include mixins.spacing-classes('fudis-md');
+}
+
+@include breakpoints.breakpoint('lg') {
+  @include mixins.spacing-classes('fudis-lg');
+}
+
+@include breakpoints.breakpoint('xl') {
+  @include mixins.spacing-classes('fudis-xl');
+}
+
+@include breakpoints.breakpoint('xxl') {
+  @include mixins.spacing-classes('fudis-xxl');
+}

package/src/foundations/spacing/mixins.scss

@@ -0,0 +1,60 @@
+/* stylelint-disable declaration-no-important */
+@use './tokens.scss' as spacing;
+
+$direction-attributes: (
+  'm': 'margin',
+  'mt': 'margin-top',
+  'mb': 'margin-bottom',
+  'ml': 'margin-left',
+  'mr': 'margin-right',
+  'p': 'padding',
+  'pt': 'padding-top',
+  'pb': 'padding-bottom',
+  'pl': 'padding-left',
+  'pr': 'padding-right',
+);
+$spacing-tokens: (
+  'none': spacing.$spacing-none,
+  'xxs': spacing.$spacing-xxs,
+  'xs': spacing.$spacing-xs,
+  'sm': spacing.$spacing-sm,
+  'md': spacing.$spacing-md,
+  'lg': spacing.$spacing-lg,
+  'xl': spacing.$spacing-xl,
+  'xxl': spacing.$spacing-xxl,
+);
+
+@mixin spacing-classes($prefix) {
+  @each $sKey, $sValue in $spacing-tokens {
+    @each $dirKey, $dirValue in $direction-attributes {
+      // Generates for desired screen size margin or padding with desired direction. E.g. .fudis-lg-ml-sm or .fudis-sm-pt-xl
+      .#{$prefix}-#{$dirKey}-#{$sKey} {
+        #{$dirValue}: #{$sValue} !important;
+      }
+    }
+
+    // Generates horizontal margins e.g. .fudis-lg-mx-sm
+    .#{$prefix}-mx-#{$sKey} {
+      margin-right: #{$sValue} !important;
+      margin-left: #{$sValue} !important;
+    }
+
+    // Generates vertical margins e.g. .fudis-lg-my-sm
+    .#{$prefix}-my-#{$sKey} {
+      margin-top: #{$sValue} !important;
+      margin-bottom: #{$sValue} !important;
+    }
+
+    // Generates horizontal padding e.g. .fudis-lg-px-sm
+    .#{$prefix}-px-#{$sKey} {
+      padding-right: #{$sValue} !important;
+      padding-left: #{$sValue} !important;
+    }
+
+    // Generates vertical padding e.g. .fudis-lg-py-sm
+    .#{$prefix}-py-#{$sKey} {
+      padding-top: #{$sValue} !important;
+      padding-bottom: #{$sValue} !important;
+    }
+  }
+}

package/src/foundations/spacing/tokens.scss

@@ -0,0 +1,31 @@
+/* stylelint-disable unit-disallowed-list */
+
+// Spacing values, based on default 16px base value
+$spacing-none: 0; // 0px
+$spacing-xxs: calc(0.25rem / var(--fudis-rem-multiplier)); // 4px
+$spacing-xs: calc(0.5rem / var(--fudis-rem-multiplier)); // 8px
+$spacing-sm: calc(1rem / var(--fudis-rem-multiplier)); // 16px
+$spacing-md: calc(1.5rem / var(--fudis-rem-multiplier)); // 24px
+$spacing-lg: calc(2rem / var(--fudis-rem-multiplier)); // 32px
+$spacing-xl: calc(2.5rem / var(--fudis-rem-multiplier)); // 40px
+$spacing-xxl: calc(4rem / var(--fudis-rem-multiplier)); // 64px
+
+$pixel-1: 1px;
+$pixel-2: 2px;
+$pixel-3: 3px;
+
+// Used with borders, border-radius and letter-spacing mixins. Any value >=4px should be used from spacing values above.
+$pixel-tokens: (
+  '1px': $pixel-1,
+  '2px': $pixel-2,
+  '3px': $pixel-3,
+);
+
+// Form input width tokens
+$input-width-xs: calc(5.75rem / var(--fudis-rem-multiplier));
+$input-width-sm: calc(10rem / var(--fudis-rem-multiplier));
+$input-width-md: calc(14rem / var(--fudis-rem-multiplier));
+$input-width-lg: calc(23rem / var(--fudis-rem-multiplier));
+
+// Fixed size for checkboxes' visual input box. Clickable input area should be 2rem high.
+$checkbox-size: calc(1.25rem / var(--fudis-rem-multiplier));

package/src/foundations/typography/mixins.scss

@@ -0,0 +1,287 @@
+/* stylelint-disable property-disallowed-list */
+/* stylelint-disable unit-disallowed-list */
+@use 'sass:map';
+@use './../breakpoints/mixins.scss' as breakpoints;
+@use './../spacing/tokens.scss' as spacing;
+@use './../colors/mixins.scss' as colors;
+@use './../focus/mixins.scss' as focus;
+@use './tokens.scss' as tokens;
+
+// Body Text
+
+@mixin body-text-lg-light {
+  text-transform: initial;
+  line-height: tokens.$body-text-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-lg-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+@mixin body-text-lg-regular {
+  text-transform: initial;
+  line-height: tokens.$body-text-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-lg-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+@mixin body-text-md-light {
+  text-transform: initial;
+  line-height: tokens.$body-text-md-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+@mixin body-text-md-regular {
+  text-transform: initial;
+  line-height: tokens.$body-text-md-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+@mixin body-text-sm-regular {
+  text-transform: initial;
+  line-height: tokens.$body-text-sm-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-sm-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+// Headings
+
+@mixin heading-xxl {
+  line-height: tokens.$heading-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-xxl-font-size;
+  font-weight: tokens.$font-weight-medium;
+
+  @include breakpoints.breakpoint-max('sm') {
+    font-size: tokens.$heading-xl-font-size;
+  }
+}
+
+@mixin heading-xl {
+  line-height: tokens.$heading-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-xl-font-size;
+  font-weight: tokens.$font-weight-medium;
+
+  @include breakpoints.breakpoint-max('sm') {
+    line-height: tokens.$heading-md-line-height;
+    font-size: tokens.$heading-lg-font-size;
+  }
+}
+
+@mixin heading-lg {
+  line-height: tokens.$heading-md-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-lg-font-size;
+  font-weight: tokens.$font-weight-medium;
+
+  @include breakpoints.breakpoint-max('sm') {
+    font-size: tokens.$heading-md-font-size;
+  }
+}
+
+@mixin heading-md {
+  line-height: tokens.$heading-md-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-md-font-size;
+  font-weight: tokens.$font-weight-medium;
+
+  @include breakpoints.breakpoint-max('sm') {
+    line-height: tokens.$heading-sm-line-height;
+    font-size: tokens.$heading-sm-font-size;
+  }
+}
+
+@mixin heading-sm {
+  line-height: tokens.$heading-sm-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-sm-font-size;
+  font-weight: tokens.$font-weight-medium;
+
+  @include breakpoints.breakpoint-max('sm') {
+    font-size: tokens.$heading-xs-font-size;
+    font-weight: tokens.$font-weight-bold;
+  }
+}
+
+@mixin heading-xs {
+  line-height: tokens.$heading-sm-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-xs-font-size;
+  font-weight: tokens.$font-weight-bold;
+
+  @include breakpoints.breakpoint-max('sm') {
+    font-size: tokens.$heading-xxs-font-size;
+  }
+}
+
+@mixin heading-xxs {
+  line-height: tokens.$heading-sm-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$heading-xxs-font-size;
+  font-weight: tokens.$font-weight-bold;
+}
+
+// Table caption
+
+@mixin table-caption {
+  text-transform: uppercase;
+  line-height: tokens.$text-input-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+// Other UI styles
+
+// Text-input, text-area, dropdown, legend components
+
+@mixin text-field-label {
+  text-transform: uppercase;
+  line-height: tokens.$form-label-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+@mixin text-field-input {
+  line-height: tokens.$text-input-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-lg-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+@mixin select-group-label {
+  line-height: tokens.$text-input-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-sm-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+// Badge component
+
+@mixin badge-typography {
+  text-transform: uppercase;
+  line-height: tokens.$badge-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-sm-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+// Description-list component
+
+@mixin description-list-key-typography {
+  @include text-field-label;
+}
+
+@mixin description-list-value-typography {
+  line-height: tokens.$body-text-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-lg-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+@mixin description-list-compact-key-typography {
+  text-transform: none;
+  line-height: tokens.$body-text-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+@mixin description-list-compact-value-typography {
+  line-height: tokens.$body-text-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+// Button component
+
+@mixin button-typography {
+  @include letter-spacing('1px');
+
+  text-transform: uppercase;
+  line-height: tokens.$body-text-sm-line-height;
+  /* stylelint-disable-next-line @stylistic/declaration-colon-space-after */
+  font-family:
+    tokens.$font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-bold;
+}
+
+@mixin letter-spacing($width) {
+  @if map.has-key(spacing.$pixel-tokens, $width) {
+    letter-spacing: map.get(spacing.$pixel-tokens, $width);
+  } @else {
+    @error 'Unknown letter-spacing parameter. It can only be "1px", "2px" or "3px"';
+  }
+}
+
+// Expandable component
+
+@mixin expandable-regular-typography {
+  line-height: tokens.$body-text-lg-line-height;
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-lg-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+@mixin expandable-sub-title-typography {
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-sm-font-size;
+  font-weight: tokens.$font-weight-light;
+}
+
+// Link component
+
+@mixin text-link {
+  @include colors.text-color('primary-dark');
+
+  display: inline-block;
+  position: relative;
+  text-decoration: underline solid;
+  font-family: tokens.$font-family;
+  overflow-wrap: anywhere;
+
+  &:focus {
+    @include focus.focus-generic;
+  }
+}
+
+@mixin link-md {
+  @include text-link;
+
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+@mixin link-lg {
+  @include text-link;
+
+  font-size: tokens.$body-text-lg-font-size;
+  font-weight: tokens.$font-weight-regular;
+}
+
+@mixin link-inherit {
+  @include text-link;
+
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+// Empty state
+
+@mixin text-emptystate {
+  @include colors.text-color('gray-middle');
+
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-regular;
+  font-style: tokens.$font-style-italic;
+}

package/src/foundations/typography/tokens.scss

@@ -0,0 +1,41 @@
+/* stylelint-disable unit-disallowed-list */
+
+$font-family: 'Fira Sans', sans-serif;
+
+// Body text font size
+$body-text-lg-font-size: calc(1rem / var(--fudis-rem-multiplier));
+$body-text-md-font-size: calc(0.875rem / var(--fudis-rem-multiplier));
+$body-text-sm-font-size: calc(0.75rem / var(--fudis-rem-multiplier));
+
+// Heading font size
+$heading-xxl-font-size: calc(2.25rem / var(--fudis-rem-multiplier));
+$heading-xl-font-size: calc(1.75rem / var(--fudis-rem-multiplier));
+$heading-lg-font-size: calc(1.5rem / var(--fudis-rem-multiplier));
+$heading-md-font-size: calc(1.25rem / var(--fudis-rem-multiplier));
+$heading-sm-font-size: calc(1.125rem / var(--fudis-rem-multiplier));
+$heading-xs-font-size: calc(1rem / var(--fudis-rem-multiplier));
+$heading-xxs-font-size: calc(0.875rem / var(--fudis-rem-multiplier));
+
+// Body text line height
+$body-text-lg-line-height: calc(1.25rem / var(--fudis-rem-multiplier));
+$body-text-md-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
+$body-text-sm-line-height: calc(1rem / var(--fudis-rem-multiplier));
+
+// Heading line heights
+$heading-lg-line-height: calc(2.5rem / var(--fudis-rem-multiplier));
+$heading-md-line-height: calc(1.75rem / var(--fudis-rem-multiplier));
+$heading-sm-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
+
+// Other UI line heights
+$text-input-line-height: calc(1.25rem / var(--fudis-rem-multiplier));
+$form-label-line-height: calc(1.5rem / var(--fudis-rem-multiplier));
+$badge-line-height: calc(0.875rem / var(--fudis-rem-multiplier));
+
+// Font weight
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+
+// Font styles
+$font-style-italic: italic;

package/src/foundations/utilities/classes.scss

@@ -0,0 +1,53 @@
+@use './mixins.scss' as mixins;
+@use './../spacing/tokens.scss' as spacing;
+@use './../borders/mixins.scss' as border;
+@use './../colors/mixins.scss' as colors;
+
+.fudis-visually-hidden {
+  @include mixins.visually-hidden;
+}
+
+.fudis-box-reset {
+  @include mixins.box-reset;
+}
+
+// Invalid and disabled state styles for input elemenets
+
+.fudis-form-input {
+  @include border.border('1px', 'solid', 'gray-middle');
+  @include colors.bg-color('white');
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &.ng-touched,
+  &--touched {
+    &[aria-invalid='true'] {
+      @include border.border('1px', 'solid', 'red');
+    }
+  }
+
+  &[aria-disabled='true'] {
+    @include border.border('1px', 'dashed', 'gray-middle');
+    @include colors.bg-color('gray-extra-light');
+
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.fudis-input-size {
+  &__xs {
+    max-width: spacing.$input-width-xs;
+  }
+
+  &__sm {
+    max-width: spacing.$input-width-sm;
+  }
+
+  &__md {
+    max-width: spacing.$input-width-md;
+  }
+
+  &__lg {
+    max-width: spacing.$input-width-lg;
+  }
+}

package/src/foundations/utilities/mixins.scss

@@ -0,0 +1,57 @@
+/* stylelint-disable property-disallowed-list */
+/* stylelint-disable unit-disallowed-list */
+@use './../spacing/tokens.scss' as spacing;
+@use './../colors/tokens.scss' as colors;
+@use './../typography/mixins.scss' as typography;
+@use './../borders/mixins.scss' as borders;
+@use './../focus/mixins.scss' as focus;
+
+@mixin visually-hidden() {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  margin: -1px;
+  outline: 0;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+}
+
+@mixin box-reset() {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin text-input() {
+  @include typography.text-field-input;
+  @include borders.border-radius('2px');
+
+  box-sizing: border-box;
+  padding: spacing.$spacing-xxs spacing.$spacing-sm;
+  width: 100%;
+  height: spacing.$spacing-xl;
+
+  &:focus {
+    @include focus.focus-form-field;
+  }
+}
+
+@mixin text-area() {
+  @include typography.text-field-input;
+
+  box-sizing: border-box;
+  display: block;
+  padding: spacing.$spacing-xxs;
+  width: 100%;
+  height: calc(5rem / var(--fudis-rem-multiplier));
+  resize: vertical; // Enable resizing the textarea only vertically. Can be also 'none' if we want to disable resizing all together
+
+  &:focus {
+    @include focus.focus-form-field;
+  }
+}

package/src/foundations/z-index/mixins.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use './tokens' as tokens;
+
+@mixin z-index($layer-name) {
+  @if map.has-key(tokens.$layer-names, $layer-name) {
+    /* stylelint-disable-next-line property-disallowed-list */
+    z-index: map.get(tokens.$layer-names, $layer-name);
+  } @else {
+    @error 'Unknown z-index layer name of #{$layer-name}. Accepted names are: "dropdown-menu", "dialog" and "alert".';
+  }
+}

package/src/foundations/z-index/tokens.scss

@@ -0,0 +1,17 @@
+/**
+* Add new z-index layer names when needed. Do not clutter, keep z-index options minimum.
+*/
+$z-index-dropdown-menu: 100;
+$z-index-dialog: 200;
+$z-index-alert: 300;
+
+/**
+* If we don't want to maintain static z-index numbers, this could be refactored so that we have an array of layer names
+* and z-indexes are calculated according to the array indexes * 100.
+* This way the possible top/below priority doesn't need manual refactoring of the z-index values above.
+*/
+$layer-names: (
+  'dropdown-menu': $z-index-dropdown-menu,
+  'dialog': $z-index-dialog,
+  'alert': $z-index-alert,
+);