@funidata/fudis-core 2.3.4 → 3.1.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@funidata/fudis-core",
-  "version": "2.3.4",
+  "version": "3.1.0",
   "description": "Core styles and foundations for Fudis Design System",
   "files": [
     "src",
     "./_index.scss",
     "./_styles.scss"
   ],
+  "type": "module",
   "scripts": {
     "start": "storybook dev -p 6007",
     "build:storybook": "storybook build",
@@ -30,16 +31,19 @@
     "url": "https://github.com/funidata/fudis-core/issues"
   },
   "homepage": "https://github.com/funidata/fudis-core#readme",
+  "optionalDependencies": {
+    "@rolldown/binding-linux-x64-gnu": "1.0.1",
+    "lightningcss-linux-x64-gnu": "1.32.0"
+  },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/html": "^8.6.12",
-    "@storybook/html-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@whitespace/storybook-addon-html": "^7.0.0",
-    "nodemon": "^3.1.10",
-    "sass-embedded": "^1.86.3",
-    "storybook": "^8.6.12"
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/html-vite": "10.4.0",
+    "@whitespace/storybook-addon-html": "^9.0.0",
+    "nodemon": "^3.1.14",
+    "prettier2": "npm:prettier@2.8.8",
+    "sass-embedded": "^1.99.0",
+    "storybook": "10.4.0",
+    "vite": "^8.0.12"
   }
 }

package/src/components/alert/alert.scss

@@ -28,6 +28,7 @@
     box-shadow: none;
     width: spacing.$spacing-md;
     height: spacing.$spacing-md;
+    cursor: pointer;
 
     &:focus {
       @include focus.focus-generic;

package/src/components/button/button.scss

@@ -15,10 +15,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
   padding: 0 spacing.$spacing-xs;
   min-width: spacing.$spacing-xxl;
   vertical-align: middle;
+  text-align: left;
+  cursor: pointer;
 
   &:focus {
     @include focus.focus-generic;
@@ -56,10 +57,13 @@
 
   &__size {
     &__small {
+      padding-top: calc(spacing.$spacing-xxs / 2);
+      padding-bottom: calc(spacing.$spacing-xxs / 2);
       min-height: spacing.$spacing-md;
     }
 
     &__medium {
+      padding: calc(spacing.$spacing-md / 4) spacing.$spacing-xs;
       min-height: spacing.$spacing-lg;
     }
 

package/src/components/fieldset/fieldset.scss

@@ -73,8 +73,7 @@
     &__md {
       @include typography.heading-xs;
 
-      .fudis-fieldset__legend__main__text,
-      .fudis-fieldset__legend__main__required {
+      .fudis-fieldset__legend__main__text {
         vertical-align: sub;
       }
     }

package/src/components/guidance/guidance.scss

@@ -19,14 +19,14 @@
     display: flex;
     transform: translateX(
       /* stylelint-disable unit-disallowed-list */
-        calc(-1 * calc(0.4rem / var(--fudis-rem-multiplier)))
+      calc(-1 * calc(0.4rem / var(--fudis-rem-multiplier)))
     );
-    opacity: 0;
-    height: spacing.$spacing-xs;
     animation-name: delay-appearance;
     animation-delay: 0.2s;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
+    opacity: 0;
+    height: spacing.$spacing-xs;
 
     &__list {
       min-height: spacing.$spacing-xs;

package/src/components/icon/icon.scss

@@ -3,14 +3,14 @@
 
 /* Only for internal use for this icon class */
 @mixin icon-mask-base() {
+  mask-size: contain;
+  mask-position: center;
+  mask-repeat: no-repeat;
   /* 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;
 }
 
 /* Only for internal use in creating white background for large fill icons */

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

@@ -13,11 +13,11 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
   @include typography.body-text-md-regular;
   @include colorMixin.text-color('gray-dark');
 
-  display: inline-flex;
+  display: flex;
   position: relative;
   align-items: center;
   margin-bottom: 0;
-  width: auto;
+  width: fit-content;
   min-height: spacing.$spacing-lg;
 
   &__label {
@@ -26,13 +26,18 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
     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;
+    cursor: pointer;
+
+    &--disabled {
+      cursor: default;
+    }
 
+    /* Radio button circle */
     &-wrapper {
       display: flex;
       align-items: center;
@@ -69,15 +74,15 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
       &__indicator {
         &::after {
           display: block;
+          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");
+          mask-size: contain;
+          mask-position: center;
+          mask-repeat: no-repeat;
           /* 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");
         }
       }
     }
@@ -88,14 +93,9 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
     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 */

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

@@ -41,8 +41,8 @@
       top: 50%;
       transform: translate(0, -50%);
       border-style: none;
-      cursor: pointer;
       padding: 0;
+      cursor: pointer;
 
       &:focus {
         @include focus.focus-generic;
@@ -102,10 +102,10 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  cursor: pointer;
   padding-right: spacing.$spacing-sm;
   padding-left: spacing.$spacing-sm;
   text-decoration: none;
+  cursor: pointer;
 
   &:focus-visible {
     @include focus.focus-generic;

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

@@ -14,8 +14,8 @@
 
   display: flex;
   align-items: center;
-  cursor: pointer;
   width: 100%;
+  cursor: pointer;
 }
 
 @mixin fudis-table-default {

package/src/foundations/grid/mixins.scss

@@ -23,8 +23,3 @@
     @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/typography/mixins.scss

@@ -15,6 +15,11 @@
   font-family: tokens.$font-family;
   font-size: tokens.$body-text-lg-font-size;
   font-weight: tokens.$font-weight-light;
+
+  @include breakpoints.breakpoint-max('sm') {
+    line-height: tokens.$body-text-md-line-height;
+    font-size: tokens.$body-text-md-font-size;
+  }
 }
 
 @mixin body-text-lg-regular {
@@ -23,6 +28,11 @@
   font-family: tokens.$font-family;
   font-size: tokens.$body-text-lg-font-size;
   font-weight: tokens.$font-weight-regular;
+
+  @include breakpoints.breakpoint-max('sm') {
+    line-height: tokens.$body-text-md-line-height;
+    font-size: tokens.$body-text-md-font-size;
+  }
 }
 
 @mixin body-text-md-light {
@@ -266,8 +276,8 @@
   display: inline-block;
   position: relative;
   text-decoration: underline;
-  font-family: tokens.$font-family;
   overflow-wrap: anywhere;
+  font-family: tokens.$font-family;
 
   &:focus {
     @include focus.focus-generic;
@@ -298,10 +308,10 @@
 // Tab component
 
 @mixin tab-text {
+  text-wrap: nowrap;
   font-family: tokens.$font-family;
   font-size: tokens.$body-text-md-font-size;
   font-weight: tokens.$font-weight-medium;
-  text-wrap: nowrap;
 }
 
 // Empty state

package/src/foundations/utilities/classes.scss

@@ -50,4 +50,8 @@
   &__lg {
     max-width: spacing.$input-width-lg;
   }
+
+  &__full-width {
+    max-width: 100%;
+  }
 }

package/src/foundations/utilities/mixins.scss

@@ -13,12 +13,12 @@
   margin: -1px;
   outline: 0;
   border: 0;
+  clip-path: rect(0 0 0 0);
   padding: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;
   white-space: nowrap;
-  clip: rect(0 0 0 0);
 }
 
 @mixin box-reset() {