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

package/src/foundations/borders/mixins.scss

@@ -2,9 +2,9 @@
 /* stylelint-disable declaration-property-value-disallowed-list */
 /* stylelint-disable property-disallowed-list */
 @use 'sass:map';
-@use './../colors/tokens.scss' as colors;
+@use './../colors/tokens.scss' as color;
 @use './../spacing/tokens.scss' as spacing;
-@use './tokens.scss' as borderTokens;
+@use './tokens';
 
 /**
   Generates border, i. e.:
@@ -12,12 +12,12 @@
 */
 @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)
+    map.has-key(tokens.$border-styles, $style) and
+    map.has-key(color.$colors, $color)
   {
     border: map.get(spacing.$pixel-tokens, $width)
-      map.get(borderTokens.$border-styles, $style)
-      map.get(colors.$colors, $color);
+      map.get(tokens.$border-styles, $style)
+      map.get(color.$colors, $color);
   } @else {
     @error 'Unknown border parameter. Please check foundations/borders/mixins.scss for accepted arguments.';
   }
@@ -28,12 +28,12 @@
 */
 @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)
+    map.has-key(tokens.$border-styles, $style) and
+    map.has-key(color.$colors, $color)
   {
     outline: map.get(spacing.$pixel-tokens, $width)
-      map.get(borderTokens.$border-styles, $style)
-      map.get(colors.$colors, $color);
+      map.get(tokens.$border-styles, $style)
+      map.get(color.$colors, $color);
     outline-offset: -(map.get(spacing.$pixel-tokens, $width));
   } @else {
     @error 'Unknown border parameter. Please check foundations/borders/mixins.scss for accepted arguments.';

package/src/foundations/colors/mixins.scss

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

package/src/foundations/focus/mixins.scss

@@ -1,25 +1,25 @@
 /* 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;
+@use './../borders/mixins.scss' as border;
+@use './../colors/tokens' as color;
+@use './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;
+  box-shadow: 0 0 0 spacing.$spacing-xxs color.$color-white;
 }
 
 @mixin focus-form-field {
-  @include borders.border('1px', 'solid', 'focus-primary');
+  @include border.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;
+  box-shadow: 0 0 0 spacing.$pixel-1 color.$color-white;
 }
 
 @mixin focus-checkbox {
-  @include borders.outline('2px', 'solid', 'primary');
+  @include border.outline('2px', 'solid', 'primary');
 
   outline-offset: -(spacing.$pixel-1);
   width: spacing.$checkbox-size;
@@ -29,5 +29,5 @@
 @mixin focus-dropdown {
   outline: tokens.$focus-generic-outline;
   outline-offset: -(spacing.$pixel-2);
-  box-shadow: 0 0 0 spacing.$spacing-xxs colors.$color-white;
+  box-shadow: 0 0 0 spacing.$spacing-xxs color.$color-white;
 }

package/src/foundations/grid/mixins.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use './tokens' as tokens;
+@use './tokens';
 @use './../spacing/tokens.scss' as spacing;
 
 @mixin grid-max-width($width) {

package/src/foundations/spacing/classes.scss

@@ -1,5 +1,4 @@
-@use './tokens.scss' as spacing;
-@use './mixins.scss' as mixins;
+@use './mixins';
 @use './../breakpoints/mixins.scss' as breakpoints;
 @include mixins.spacing-classes('fudis');
 

package/src/foundations/spacing/tokens.scss

@@ -29,3 +29,6 @@ $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));
+
+// Fixed height for tab navigation scroll view buttons
+$tab-navigation-button-height: calc(3rem / var(--fudis-rem-multiplier));

package/src/foundations/typography/classes.scss

@@ -0,0 +1,105 @@
+@use './mixins.scss' as typography;
+@use './../colors/mixins.scss' as colorMixin;
+@use './../focus/mixins.scss' as focus;
+@use './../utilities/mixins.scss' as utilities;
+
+.fudis-heading {
+  @include colorMixin.text-color('gray-dark');
+
+  box-sizing: border-box;
+  margin-top: 0;
+
+  // For keyboard users, where Heading tag is focused manually
+  &:focus-visible {
+    @include focus.focus-generic;
+  }
+
+  &__variant {
+    &__xxs {
+      @include typography.heading-xxs;
+    }
+
+    &__xs {
+      @include typography.heading-xs;
+    }
+
+    &__sm {
+      @include typography.heading-sm;
+    }
+
+    &__md {
+      @include typography.heading-md;
+    }
+
+    &__lg {
+      @include typography.heading-lg;
+    }
+
+    &__xl {
+      @include typography.heading-xl;
+    }
+
+    &__xxl {
+      @include typography.heading-xxl;
+    }
+  }
+
+  &__align {
+    &__left {
+      text-align: left;
+    }
+
+    &__right {
+      text-align: right;
+    }
+
+    &__center {
+      text-align: center;
+    }
+  }
+}
+
+.fudis-body-text {
+  @include utilities.box-reset;
+  @include colorMixin.text-color('gray-dark');
+
+  &__sm-regular {
+    @include typography.body-text-sm-regular;
+  }
+
+  &__md-regular {
+    @include typography.body-text-md-regular;
+  }
+
+  &__lg-regular {
+    @include typography.body-text-lg-regular;
+  }
+
+  &__md-light {
+    @include typography.body-text-md-light;
+  }
+
+  &__lg-light {
+    @include typography.body-text-lg-light;
+  }
+
+  &__left {
+    text-align: left;
+  }
+
+  &__right {
+    text-align: right;
+  }
+
+  &__center {
+    text-align: center;
+  }
+}
+
+.fudis-text-emptystate {
+  @include typography.text-emptystate;
+}
+
+.fudis-table-caption {
+  @include typography.table-caption;
+}

package/src/foundations/typography/mixins.scss

@@ -3,9 +3,9 @@
 @use 'sass:map';
 @use './../breakpoints/mixins.scss' as breakpoints;
 @use './../spacing/tokens.scss' as spacing;
-@use './../colors/mixins.scss' as colors;
+@use './../colors/mixins.scss' as colorMixin;
 @use './../focus/mixins.scss' as focus;
-@use './tokens.scss' as tokens;
+@use './tokens';
 
 // Body Text
 
@@ -130,6 +130,8 @@
 // Table caption
 
 @mixin table-caption {
+  @include colorMixin.text-color('gray-dark');
+
   text-transform: uppercase;
   line-height: tokens.$text-input-line-height;
   font-family: tokens.$font-family;
@@ -241,7 +243,7 @@
 // Link component
 
 @mixin text-link {
-  @include colors.text-color('primary-dark');
+  @include colorMixin.text-color('primary-dark');
 
   display: inline-block;
   position: relative;
@@ -275,10 +277,19 @@
   font-weight: inherit;
 }
 
+// Tab component
+
+@mixin tab-text {
+  font-family: tokens.$font-family;
+  font-size: tokens.$body-text-md-font-size;
+  font-weight: tokens.$font-weight-medium;
+  text-wrap: nowrap;
+}
+
 // Empty state
 
 @mixin text-emptystate {
-  @include colors.text-color('gray-middle');
+  @include colorMixin.text-color('gray-middle');
 
   font-family: tokens.$font-family;
   font-size: tokens.$body-text-md-font-size;

package/src/foundations/utilities/classes.scss

@@ -1,7 +1,7 @@
-@use './mixins.scss' as mixins;
+@use './mixins';
 @use './../spacing/tokens.scss' as spacing;
 @use './../borders/mixins.scss' as border;
-@use './../colors/mixins.scss' as colors;
+@use './../colors/mixins.scss' as colorMixin;
 
 .fudis-visually-hidden {
   @include mixins.visually-hidden;
@@ -15,19 +15,15 @@
 
 .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');
-    }
+  @include colorMixin.bg-color('white');
+
+  &[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');
+    @include colorMixin.bg-color('gray-extra-light');
 
     cursor: default;
     pointer-events: none;

package/src/foundations/utilities/mixins.scss

@@ -1,7 +1,6 @@
 /* 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;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use './tokens' as tokens;
+@use './tokens';
 
 @mixin z-index($layer-name) {
   @if map.has-key(tokens.$layer-names, $layer-name) {

package/src/assets/fonts/fonts.scss

@@ -1,33 +0,0 @@
-/* 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;
-}