@funidata/fudis-core 2.2.0-rc.1 → 2.2.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funidata/fudis-core",
-  "version": "2.2.0-rc.1",
+  "version": "2.2.0-rc.2",
   "description": "Core styles and foundations for Fudis Design System",
   "files": [
     "src",

package/src/components/breadcrumbs/breadcrumbs.scss

@@ -12,12 +12,12 @@
   margin-bottom: spacing.$spacing-md;
   list-style: none;
 
-  &__item {
+  &-item {
     display: flex;
     align-items: center;
     min-height: spacing.$spacing-lg;
 
-    &-link {
+    a {
       @include typography.link-inherit;
     }
   }

package/src/components/button/button.scss

@@ -77,10 +77,8 @@
     height: spacing.$spacing-sm;
 
     &__component {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      position: relative;
+      top: -50%;
     }
   }
 }

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

@@ -67,11 +67,18 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
       }
 
       &__indicator {
-        @include colorMixin.bg-color('gray-dark');
-
-        border-radius: 50%;
-        width: $radio-indicator-size;
-        height: $radio-indicator-size;
+        &::after {
+          display: block;
+          /* stylelint-disable property-disallowed-list */
+          background-color: currentcolor;
+          width: $radio-indicator-size;
+          height: $radio-indicator-size;
+          content: '';
+          mask-repeat: no-repeat;
+          mask-position: center;
+          mask-size: contain;
+          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%20width='12'%20height='12'%3E%3Ccircle%20cx='6'%20cy='6'%20r='6'/%3E%3C/svg%3E");
+        }
       }
     }
   }

package/src/components/table/table-mixins.scss

@@ -1,6 +1,22 @@
 @use '../../foundations/typography/mixins.scss' as typography;
 @use '../../foundations/spacing/tokens' as spacing;
 @use '../../foundations/colors/tokens' as color;
+@use '../../foundations/colors/mixins' as colorMixin;
+@use '../../foundations/borders/mixins' as border;
+@use '../../foundations/focus/mixins' as focus;
+@use '../../foundations/utilities/mixins' as utilities;
+
+@mixin fudis-table-header-button {
+  @include utilities.box-reset;
+  @include typography.table-header;
+  @include colorMixin.bg-color('transparent');
+  @include border.border-none;
+
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 100%;
+}
 
 @mixin fudis-table-default {
   width: 100%;
@@ -17,9 +33,8 @@
   &__header {
     @include typography.table-header;
 
-    border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
-    padding: spacing.$spacing-sm;
-    vertical-align: bottom;
+    padding: spacing.$spacing-xs spacing.$spacing-sm;
+    vertical-align: middle;
 
     &__align {
       &__left {
@@ -34,6 +49,40 @@
         text-align: right;
       }
     }
+
+    &-row {
+      border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
+    }
+
+    &-button {
+      @include fudis-table-header-button;
+
+      &:focus {
+        @include focus.focus-generic;
+      }
+
+      &__align {
+        &__left {
+          justify-content: left;
+        }
+
+        &__center {
+          justify-content: center;
+        }
+
+        &__right {
+          justify-content: right;
+        }
+      }
+
+      &--sortable {
+        white-space: nowrap;
+      }
+
+      &--active {
+        text-decoration: underline solid color.$color-gray-middle;
+      }
+    }
   }
 
   &__cell {
@@ -71,9 +120,9 @@
     }
 
     /* Checkbox needs different padding-top since its clickable area expands out of visible component outlines */
-    &__checkbox {
-      padding-top: calc(spacing.$spacing-xs + spacing.$spacing-xxs);
-    }
+    // &__checkbox {
+    //   padding-top: calc(spacing.$spacing-xs + spacing.$spacing-xxs);
+    // }
   }
 }
 
@@ -92,9 +141,8 @@
   &__header {
     @include typography.table-header;
 
-    border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
-    padding: spacing.$spacing-xs;
-    vertical-align: bottom;
+    padding: spacing.$spacing-xxs spacing.$spacing-xs;
+    vertical-align: middle;
 
     &__align {
       &__left {
@@ -109,6 +157,40 @@
         text-align: right;
       }
     }
+
+    &-row {
+      border-bottom: spacing.$pixel-2 solid color.$color-gray-light;
+    }
+
+    &-button {
+      @include fudis-table-header-button;
+
+      &:focus {
+        @include focus.focus-generic;
+      }
+
+      &__align {
+        &__left {
+          justify-content: left;
+        }
+
+        &__center {
+          justify-content: center;
+        }
+
+        &__right {
+          justify-content: right;
+        }
+      }
+
+      &--sortable {
+        white-space: nowrap;
+      }
+
+      &--active {
+        text-decoration: underline solid color.$color-gray-dark;
+      }
+    }
   }
 
   &__cell {
@@ -146,8 +228,8 @@
     }
 
     /* Checkbox needs different padding-top since its clickable area expands out of visible component outlines */
-    &__checkbox {
-      padding-top: spacing.$spacing-xxs;
-    }
+    // &__checkbox {
+    //   padding-top: spacing.$spacing-xxs;
+    // }
   }
 }

package/src/foundations/typography/mixins.scss

@@ -142,7 +142,6 @@
   @include colorMixin.text-color('gray-dark');
 
   text-transform: uppercase;
-  line-height: tokens.$table-header-line-height;
   font-family: tokens.$font-family;
   font-size: tokens.$body-text-md-font-size;
   font-weight: tokens.$font-weight-regular;

package/src/foundations/typography/tokens.scss

@@ -31,7 +31,6 @@ $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));
 $table-caption-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
-$table-header-line-height: calc(1.5rem / var(--fudis-rem-multiplier));
 
 // Font weight
 $font-weight-light: 300;

package/src/foundations/utilities/classes.scss

@@ -11,6 +11,10 @@
   @include mixins.box-reset;
 }
 
+.fudis-dimmer {
+  @include mixins.dimmer;
+}
+
 // Invalid and disabled state styles for input elemenets
 
 .fudis-form-input {

package/src/foundations/utilities/mixins.scss

@@ -4,6 +4,7 @@
 @use './../typography/mixins.scss' as typography;
 @use './../borders/mixins.scss' as borders;
 @use './../focus/mixins.scss' as focus;
+@use './../colors/mixins.scss' as colorMixin;
 
 @mixin visually-hidden() {
   position: absolute;
@@ -26,6 +27,14 @@
   padding: 0;
 }
 
+@mixin dimmer() {
+  @include colorMixin.bg-color('white');
+
+  // At least when overriding ngMaterial, opacity needs to be declared as !important
+  /* stylelint-disable-next-line declaration-no-important */
+  opacity: 0.95 !important;
+}
+
 @mixin text-input() {
   @include typography.text-field-input;
   @include borders.border-radius('2px');