@funidata/fudis-core 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/package.json +13 -7
  2. package/src/components/alert/alert.scss +1 -1
  3. package/src/components/button/button.scss +1 -1
  4. package/src/components/fieldset/fieldset.scss +1 -2
  5. package/src/components/guidance/guidance.scss +2 -2
  6. package/src/components/icon/icon.scss +3 -3
  7. package/src/components/radio-button/radio-button.scss +11 -11
  8. package/src/components/tab-navigation/tab-navigation.scss +2 -2
  9. package/src/components/table/table-mixins.scss +1 -1
  10. package/src/foundations/grid/mixins.scss +0 -5
  11. package/src/foundations/typography/mixins.scss +2 -2
  12. package/src/foundations/utilities/mixins.scss +1 -1
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@funidata/fudis-core",
3
- "version": "3.0.0",
3
+ "version": "3.1.0",
4
4
  "description": "Core styles and foundations for Fudis Design System",
5
5
  "files": [
6
6
  "src",
7
7
  "./_index.scss",
8
8
  "./_styles.scss"
9
9
  ],
10
+ "type": "module",
10
11
  "scripts": {
11
12
  "start": "storybook dev -p 6007",
12
13
  "build:storybook": "storybook build",
@@ -30,14 +31,19 @@
30
31
  "url": "https://github.com/funidata/fudis-core/issues"
31
32
  },
32
33
  "homepage": "https://github.com/funidata/fudis-core#readme",
34
+ "optionalDependencies": {
35
+ "@rolldown/binding-linux-x64-gnu": "1.0.1",
36
+ "lightningcss-linux-x64-gnu": "1.32.0"
37
+ },
33
38
  "devDependencies": {
34
- "@storybook/addon-a11y": "9.1.19",
35
- "@storybook/html-vite": "9.1.19",
36
- "@whitespace/storybook-addon-html": "^8.0.2",
39
+ "@storybook/addon-a11y": "10.4.0",
40
+ "@storybook/addon-docs": "10.4.0",
41
+ "@storybook/html-vite": "10.4.0",
42
+ "@whitespace/storybook-addon-html": "^9.0.0",
37
43
  "nodemon": "^3.1.14",
38
44
  "prettier2": "npm:prettier@2.8.8",
39
- "sass-embedded": "^1.97.3",
40
- "storybook": "9.1.19",
41
- "@storybook/addon-docs": "9.1.19"
45
+ "sass-embedded": "^1.99.0",
46
+ "storybook": "10.4.0",
47
+ "vite": "^8.0.12"
42
48
  }
43
49
  }
package/src/components/alert/alert.scss CHANGED
@@ -26,9 +26,9 @@
26
26
  margin-right: spacing.$spacing-xxs;
27
27
  margin-left: auto;
28
28
  box-shadow: none;
29
- cursor: pointer;
30
29
  width: spacing.$spacing-md;
31
30
  height: spacing.$spacing-md;
31
+ cursor: pointer;
32
32
 
33
33
  &:focus {
34
34
  @include focus.focus-generic;
package/src/components/button/button.scss CHANGED
@@ -15,11 +15,11 @@
15
15
  display: inline-flex;
16
16
  align-items: center;
17
17
  justify-content: center;
18
- cursor: pointer;
19
18
  padding: 0 spacing.$spacing-xs;
20
19
  min-width: spacing.$spacing-xxl;
21
20
  vertical-align: middle;
22
21
  text-align: left;
22
+ cursor: pointer;
23
23
 
24
24
  &:focus {
25
25
  @include focus.focus-generic;
package/src/components/fieldset/fieldset.scss CHANGED
@@ -73,8 +73,7 @@
73
73
  &__md {
74
74
  @include typography.heading-xs;
75
75
 
76
- .fudis-fieldset__legend__main__text,
77
- .fudis-fieldset__legend__main__required {
76
+ .fudis-fieldset__legend__main__text {
78
77
  vertical-align: sub;
79
78
  }
80
79
  }
package/src/components/guidance/guidance.scss CHANGED
@@ -21,12 +21,12 @@
21
21
  /* stylelint-disable unit-disallowed-list */
22
22
  calc(-1 * calc(0.4rem / var(--fudis-rem-multiplier)))
23
23
  );
24
- opacity: 0;
25
- height: spacing.$spacing-xs;
26
24
  animation-name: delay-appearance;
27
25
  animation-delay: 0.2s;
28
26
  animation-iteration-count: 1;
29
27
  animation-fill-mode: forwards;
28
+ opacity: 0;
29
+ height: spacing.$spacing-xs;
30
30
 
31
31
  &__list {
32
32
  min-height: spacing.$spacing-xs;
package/src/components/icon/icon.scss CHANGED
@@ -3,14 +3,14 @@
3
3
 
4
4
  /* Only for internal use for this icon class */
5
5
  @mixin icon-mask-base() {
6
+ mask-size: contain;
7
+ mask-position: center;
8
+ mask-repeat: no-repeat;
6
9
  /* stylelint-disable property-disallowed-list */
7
10
  background-color: currentcolor;
8
11
  width: var(--icon-size);
9
12
  height: var(--icon-size);
10
13
  content: '';
11
- mask-repeat: no-repeat;
12
- mask-position: center;
13
- mask-size: contain;
14
14
  }
15
15
 
16
16
  /* Only for internal use in creating white background for large fill icons */
package/src/components/radio-button/radio-button.scss CHANGED
@@ -17,7 +17,7 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
17
17
  position: relative;
18
18
  align-items: center;
19
19
  margin-bottom: 0;
20
- width: auto;
20
+ width: fit-content;
21
21
  min-height: spacing.$spacing-lg;
22
22
 
23
23
  &__label {
@@ -26,13 +26,18 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
26
26
  padding-left: spacing.$spacing-xs;
27
27
  }
28
28
 
29
- /* Radio button circle */
30
29
  &__content {
31
30
  display: flex;
32
31
  align-items: center;
33
32
  transform: translateX(calc(-0.1rem / var(--fudis-rem-multiplier)));
34
33
  padding-left: 0;
34
+ cursor: pointer;
35
+
36
+ &--disabled {
37
+ cursor: default;
38
+ }
35
39
 
40
+ /* Radio button circle */
36
41
  &-wrapper {
37
42
  display: flex;
38
43
  align-items: center;
@@ -69,15 +74,15 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
69
74
  &__indicator {
70
75
  &::after {
71
76
  display: block;
77
+ 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");
78
+ mask-size: contain;
79
+ mask-position: center;
80
+ mask-repeat: no-repeat;
72
81
  /* stylelint-disable property-disallowed-list */
73
82
  background-color: currentcolor;
74
83
  width: $radio-indicator-size;
75
84
  height: $radio-indicator-size;
76
85
  content: '';
77
- mask-repeat: no-repeat;
78
- mask-position: center;
79
- mask-size: contain;
80
- 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");
81
86
  }
82
87
  }
83
88
  }
@@ -88,14 +93,9 @@ $radio-indicator-size: calc(0.75rem / var(--fudis-rem-multiplier));
88
93
  left: 0;
89
94
  opacity: 0;
90
95
  margin: 0;
91
- cursor: pointer;
92
96
  width: 100%;
93
97
  height: 100%;
94
98
 
95
- &--disabled {
96
- cursor: default;
97
- }
98
-
99
99
  /* stylelint-disable-next-line */
100
100
  &:focus
101
101
  /* stylelint-disable selector-class-pattern */
package/src/components/tab-navigation/tab-navigation.scss CHANGED
@@ -41,8 +41,8 @@
41
41
  top: 50%;
42
42
  transform: translate(0, -50%);
43
43
  border-style: none;
44
- cursor: pointer;
45
44
  padding: 0;
45
+ cursor: pointer;
46
46
 
47
47
  &:focus {
48
48
  @include focus.focus-generic;
@@ -102,10 +102,10 @@
102
102
  box-sizing: border-box;
103
103
  display: flex;
104
104
  align-items: center;
105
- cursor: pointer;
106
105
  padding-right: spacing.$spacing-sm;
107
106
  padding-left: spacing.$spacing-sm;
108
107
  text-decoration: none;
108
+ cursor: pointer;
109
109
 
110
110
  &:focus-visible {
111
111
  @include focus.focus-generic;
package/src/components/table/table-mixins.scss CHANGED
@@ -14,8 +14,8 @@
14
14
 
15
15
  display: flex;
16
16
  align-items: center;
17
- cursor: pointer;
18
17
  width: 100%;
18
+ cursor: pointer;
19
19
  }
20
20
 
21
21
  @mixin fudis-table-default {
package/src/foundations/grid/mixins.scss CHANGED
@@ -23,8 +23,3 @@
23
23
  @error 'Unknown grid width of #{$width}. Accepted arguments are: "xxl", "xl", "lg", "md", "sm", "xs".';
24
24
  }
25
25
  }
26
-
27
- @mixin grid-xs-margins() {
28
- margin-right: spacing.$spacing-sm;
29
- margin-left: spacing.$spacing-sm;
30
- }
package/src/foundations/typography/mixins.scss CHANGED
@@ -276,8 +276,8 @@
276
276
  display: inline-block;
277
277
  position: relative;
278
278
  text-decoration: underline;
279
- font-family: tokens.$font-family;
280
279
  overflow-wrap: anywhere;
280
+ font-family: tokens.$font-family;
281
281
 
282
282
  &:focus {
283
283
  @include focus.focus-generic;
@@ -308,10 +308,10 @@
308
308
  // Tab component
309
309
 
310
310
  @mixin tab-text {
311
+ text-wrap: nowrap;
311
312
  font-family: tokens.$font-family;
312
313
  font-size: tokens.$body-text-md-font-size;
313
314
  font-weight: tokens.$font-weight-medium;
314
- text-wrap: nowrap;
315
315
  }
316
316
 
317
317
  // Empty state
package/src/foundations/utilities/mixins.scss CHANGED
@@ -13,12 +13,12 @@
13
13
  margin: -1px;
14
14
  outline: 0;
15
15
  border: 0;
16
+ clip-path: rect(0 0 0 0);
16
17
  padding: 0;
17
18
  width: 1px;
18
19
  height: 1px;
19
20
  overflow: hidden;
20
21
  white-space: nowrap;
21
- clip: rect(0 0 0 0);
22
22
  }
23
23
 
24
24
  @mixin box-reset() {