@helsenorge/designsystem-react 10.2.0 → 10.3.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 (78) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/components/AnchorLink/styles.module.scss +8 -9
  3. package/components/Avatar/styles.module.scss +9 -9
  4. package/components/Badge/styles.module.scss +9 -9
  5. package/components/Button/styles.module.scss +65 -59
  6. package/components/Checkbox/styles.module.scss +103 -103
  7. package/components/Chip/styles.module.scss +22 -22
  8. package/components/Close/styles.module.scss +4 -4
  9. package/components/DictionaryTrigger/styles.module.scss +5 -5
  10. package/components/Drawer/styles.module.scss +16 -16
  11. package/components/Dropdown/styles.module.scss +51 -51
  12. package/components/Duolist/index.js +2 -1
  13. package/components/Duolist/index.js.map +1 -1
  14. package/components/Duolist/styles.module.scss +57 -35
  15. package/components/Duolist/styles.module.scss.d.ts +1 -0
  16. package/components/EmptyState/styles.module.scss +12 -12
  17. package/components/ErrorWrapper/styles.module.scss +11 -21
  18. package/components/ErrorWrapper/styles.module.scss.d.ts +0 -1
  19. package/components/Expander/styles.module.scss +46 -46
  20. package/components/ExpanderHierarchy/expander.module.scss +29 -29
  21. package/components/ExpanderHierarchy/styles.module.scss +4 -5
  22. package/components/ExpanderList/styles.module.scss +30 -30
  23. package/components/EyebrowHeader/styles.module.scss +0 -2
  24. package/components/FormGroup/styles.module.scss +9 -9
  25. package/components/FormLayout/styles.module.scss +4 -5
  26. package/components/HelpBubble/styles.module.scss +13 -13
  27. package/components/HelpPanel/styles.module.scss +2 -2
  28. package/components/HelpQuestion/styles.module.scss +19 -19
  29. package/components/HighlightPanel/styles.module.scss +20 -20
  30. package/components/HorizontalScroll/styles.module.scss +4 -3
  31. package/components/Input/styles.module.scss +12 -12
  32. package/components/Label/styles.module.scss +15 -15
  33. package/components/LinkList/styles.module.scss +33 -33
  34. package/components/ListHeader/styles.module.scss +8 -8
  35. package/components/Loader/styles.module.scss +14 -14
  36. package/components/MaxCharacters/styles.module.scss +11 -11
  37. package/components/Modal/styles.module.scss +34 -34
  38. package/components/NotificationPanel/styles.module.scss +33 -33
  39. package/components/Panel/styles.module.scss +45 -45
  40. package/components/PanelList/styles.module.scss +5 -5
  41. package/components/PopMenu/styles.module.scss +15 -15
  42. package/components/PopOver/styles.module.scss +13 -14
  43. package/components/PopOver/styles.module.scss.d.ts +0 -3
  44. package/components/Progressbar/styles.module.scss +4 -4
  45. package/components/PromoPanel/styles.module.scss +22 -22
  46. package/components/RadioButton/styles.module.scss +99 -99
  47. package/components/Select/styles.module.scss +21 -21
  48. package/components/ServiceMessage/styles.module.scss +49 -49
  49. package/components/SharingStatus/styles.module.scss +13 -13
  50. package/components/Slider/styles.module.scss +24 -24
  51. package/components/Spacer/styles.module.scss +14 -14
  52. package/components/StatusDot/styles.module.scss +22 -22
  53. package/components/Step/styles.module.scss +3 -3
  54. package/components/StepButtons/styles.module.scss +9 -9
  55. package/components/Stepper/styles.module.scss +23 -15
  56. package/components/StickyNote/styles.module.scss +3 -3
  57. package/components/Table/styles.module.scss +32 -32
  58. package/components/Tabs/TabList/styles.module.scss +1 -1
  59. package/components/Tabs/TabPanel/styles.module.scss +5 -5
  60. package/components/Tabs/styles.module.scss +1 -1
  61. package/components/Tag/styles.module.scss +16 -16
  62. package/components/TagList/styles.module.scss +4 -4
  63. package/components/Textarea/styles.module.scss +9 -9
  64. package/components/Tile/styles.module.scss +25 -25
  65. package/components/Title/styles.module.scss +8 -8
  66. package/components/Toggle/styles.module.scss +14 -14
  67. package/components/Tooltip/TooltipWord/styles.module.scss +4 -4
  68. package/components/Trigger/styles.module.scss +21 -21
  69. package/components/Validation/styles.module.scss +10 -10
  70. package/package.json +1 -1
  71. package/scss/_body.scss +5 -6
  72. package/scss/_breakpoints.scss +2 -2
  73. package/scss/_font-mixins.scss +2 -2
  74. package/scss/_fonts.scss +0 -2
  75. package/scss/_input.scss +53 -50
  76. package/scss/_print.scss +2 -2
  77. package/scss/layout.module.scss +2 -2
  78. package/scss/typography.module.scss +44 -43
package/components/PopMenu/styles.module.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use 'sass:map';
2
- @import '../../scss/palette';
3
- @import '../../scss/breakpoints';
2
+ @use '../../scss/palette' as palette;
3
+ @use '../../scss/breakpoints' as *;
4
4
 
5
5
  .pop-menu-button {
6
6
  padding: 0;
@@ -14,7 +14,7 @@
14
14
  min-width: 3rem;
15
15
 
16
16
  &:focus {
17
- border: 0.1875rem solid $black;
17
+ border: 0.1875rem solid palette.$black;
18
18
  box-shadow: none;
19
19
  outline: none;
20
20
  }
@@ -40,12 +40,12 @@ html :focus > .pop-menu-button {
40
40
  }
41
41
 
42
42
  &:active {
43
- background-color: $neutral50;
43
+ background-color: palette.$neutral50;
44
44
  border: none;
45
45
  }
46
46
 
47
47
  &:hover {
48
- background-color: $neutral50;
48
+ background-color: palette.$neutral50;
49
49
  }
50
50
 
51
51
  &:active:hover {
@@ -53,8 +53,8 @@ html :focus > .pop-menu-button {
53
53
  }
54
54
 
55
55
  &:active:focus {
56
- background-color: $neutral50;
57
- border: 0.1875rem solid $black;
56
+ background-color: palette.$neutral50;
57
+ border: 0.1875rem solid palette.$black;
58
58
  }
59
59
  }
60
60
 
@@ -64,12 +64,12 @@ html :focus > .pop-menu-button {
64
64
  }
65
65
 
66
66
  &:active {
67
- background-color: $neutral100;
67
+ background-color: palette.$neutral100;
68
68
  border: none;
69
69
  }
70
70
 
71
71
  &:hover {
72
- background-color: $neutral100;
72
+ background-color: palette.$neutral100;
73
73
  }
74
74
 
75
75
  &:active:hover {
@@ -77,8 +77,8 @@ html :focus > .pop-menu-button {
77
77
  }
78
78
 
79
79
  &:active:focus {
80
- background-color: $neutral100;
81
- border: 0.1875rem solid $black;
80
+ background-color: palette.$neutral100;
81
+ border: 0.1875rem solid palette.$black;
82
82
  }
83
83
  }
84
84
 
@@ -88,12 +88,12 @@ html :focus > .pop-menu-button {
88
88
  }
89
89
 
90
90
  &:active {
91
- background-color: $blueberry100;
91
+ background-color: palette.$blueberry100;
92
92
  border: none;
93
93
  }
94
94
 
95
95
  &:hover {
96
- background-color: $blueberry100;
96
+ background-color: palette.$blueberry100;
97
97
  }
98
98
 
99
99
  &:active:hover {
@@ -101,8 +101,8 @@ html :focus > .pop-menu-button {
101
101
  }
102
102
 
103
103
  &:active:focus {
104
- background-color: $blueberry100;
105
- border: 0.1875rem solid $black;
104
+ background-color: palette.$blueberry100;
105
+ border: 0.1875rem solid palette.$black;
106
106
  }
107
107
  }
108
108
 
package/components/PopOver/styles.module.scss CHANGED
@@ -1,9 +1,8 @@
1
1
  @use 'sass:map';
2
- @import '../../scss/spacers';
3
- @import '../../scss/breakpoints';
4
- @import '../../scss/palette';
5
- @import '../../scss/font-settings';
6
- @import '../AnchorLink/styles.module';
2
+ @use '../../scss/spacers' as spacers;
3
+ @use '../../scss/palette' as palette;
4
+ @use '../../scss/font-settings' as font-settings;
5
+ @use '../../scss/breakpoints' as *;
7
6
 
8
7
  .popover {
9
8
  $popover: &;
@@ -14,18 +13,18 @@
14
13
  max-width: 23.3125rem;
15
14
  text-align: start;
16
15
  font-family: inherit;
17
- font-size: $font-size-sm;
18
- line-height: $lineheight-size-sm;
19
- background-color: $white;
16
+ font-size: font-settings.$font-size-sm;
17
+ line-height: font-settings.$lineheight-size-sm;
18
+ background-color: palette.$white;
20
19
  z-index: 3;
21
20
  visibility: hidden;
22
- border: getSpacer(4xs) solid $plum600;
21
+ border: spacers.getSpacer(4xs) solid palette.$plum600;
23
22
  border-radius: 0.5625rem;
24
23
  box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
25
24
 
26
25
  @media (min-width: map.get($grid-breakpoints, lg)) {
27
- font-size: $font-size-md;
28
- line-height: $lineheight-size-md;
26
+ font-size: font-settings.$font-size-md;
27
+ line-height: font-settings.$lineheight-size-md;
29
28
  }
30
29
 
31
30
  &--visible {
@@ -33,7 +32,7 @@
33
32
  }
34
33
 
35
34
  &__arrow {
36
- --drop-shadow-color: #{$plum600};
35
+ --drop-shadow-color: #{palette.$plum600};
37
36
 
38
37
  width: 0;
39
38
  height: 0;
@@ -45,14 +44,14 @@
45
44
 
46
45
  &--over {
47
46
  border-width: 0.625rem;
48
- border-bottom-color: $white;
47
+ border-bottom-color: palette.$white;
49
48
  filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
50
49
  filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
51
50
  }
52
51
 
53
52
  &--under {
54
53
  border-width: 0.625rem;
55
- border-top-color: $white;
54
+ border-top-color: palette.$white;
56
55
  filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
57
56
  filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
58
57
  }
package/components/PopOver/styles.module.scss.d.ts CHANGED
@@ -1,7 +1,4 @@
1
1
  export type Styles = {
2
- anchorlink: string;
3
- anchorlink__icon: string;
4
- 'anchorlink-wrapper': string;
5
2
  popover: string;
6
3
  popover__arrow: string;
7
4
  'popover__arrow--over': string;
package/components/Progressbar/styles.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '../../scss/palette';
2
- @import '../../scss/screen-reader';
1
+ @use '../../scss/palette' as palette;
2
+ @use '../../scss/screen-reader' as *;
3
3
 
4
4
  .progressbar {
5
5
  &__svg {
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  &--overlay-screen {
23
- background: $transparent-grey;
23
+ background: palette.$transparent-grey;
24
24
  position: fixed;
25
25
  inset: 0;
26
26
  }
@@ -29,7 +29,7 @@
29
29
  position: absolute;
30
30
  top: 0;
31
31
  left: 0;
32
- background: $transparent-grey;
32
+ background: palette.$transparent-grey;
33
33
  height: 100%;
34
34
  width: 100%;
35
35
  }
package/components/PromoPanel/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'sass:map';
2
- @import '../../scss/palette';
3
- @import '../../scss/spacers';
4
- @import '../../scss/breakpoints';
2
+ @use '../../scss/palette' as palette;
3
+ @use '../../scss/spacers' as spacers;
4
+ @use '../../scss/breakpoints' as *;
5
5
 
6
6
  $colors: 'neutral', 'blueberry', 'cherry';
7
7
 
@@ -11,14 +11,14 @@ $colors: 'neutral', 'blueberry', 'cherry';
11
11
  display: flex;
12
12
  align-items: center;
13
13
  border-radius: 8px;
14
- padding-left: getSpacer(s);
15
- padding-right: getSpacer(2xs);
14
+ padding-left: spacers.getSpacer(s);
15
+ padding-right: spacers.getSpacer(2xs);
16
16
  transition: background-color 0.15s ease-in-out;
17
17
 
18
18
  &:focus-within {
19
19
  box-shadow:
20
- 0 0 0 2px $black,
21
- inset 0 0 0 2px $black;
20
+ 0 0 0 2px palette.$black,
21
+ inset 0 0 0 2px palette.$black;
22
22
  }
23
23
 
24
24
  @media (min-width: map.get($grid-breakpoints, xs)) {
@@ -26,27 +26,27 @@ $colors: 'neutral', 'blueberry', 'cherry';
26
26
  }
27
27
 
28
28
  @media (min-width: map.get($grid-breakpoints, sm)) {
29
- padding-right: getSpacer(s);
29
+ padding-right: spacers.getSpacer(s);
30
30
  }
31
31
 
32
32
  @media (min-width: map.get($grid-breakpoints, md)) {
33
- padding-right: getSpacer(l);
33
+ padding-right: spacers.getSpacer(l);
34
34
  }
35
35
 
36
36
  &--no-illustration {
37
- padding-left: getSpacer(s);
37
+ padding-left: spacers.getSpacer(s);
38
38
 
39
39
  @media (min-width: map.get($grid-breakpoints, md)) {
40
- padding-left: getSpacer(l);
40
+ padding-left: spacers.getSpacer(l);
41
41
  }
42
42
  }
43
43
 
44
44
  @each $color in $colors {
45
45
  &--#{$color} {
46
- background-color: map.get($palette-map, #{$color}50);
46
+ background-color: map.get(palette.$palette-map, #{$color}50);
47
47
 
48
48
  &:hover {
49
- background-color: map.get($palette-map, #{$color}100);
49
+ background-color: map.get(palette.$palette-map, #{$color}100);
50
50
  }
51
51
  }
52
52
  }
@@ -63,14 +63,14 @@ $colors: 'neutral', 'blueberry', 'cherry';
63
63
  display: flex;
64
64
  flex-direction: column;
65
65
  flex-grow: 1;
66
- gap: getSpacer(3xs);
67
- padding-top: getSpacer(m);
68
- padding-bottom: getSpacer(m);
66
+ gap: spacers.getSpacer(3xs);
67
+ padding-top: spacers.getSpacer(m);
68
+ padding-bottom: spacers.getSpacer(m);
69
69
 
70
70
  @media (min-width: map.get($grid-breakpoints, md)) {
71
- gap: getSpacer(2xs);
72
- padding-top: getSpacer(l);
73
- padding-bottom: getSpacer(l);
71
+ gap: spacers.getSpacer(2xs);
72
+ padding-top: spacers.getSpacer(l);
73
+ padding-bottom: spacers.getSpacer(l);
74
74
  }
75
75
 
76
76
  a,
@@ -87,14 +87,14 @@ $colors: 'neutral', 'blueberry', 'cherry';
87
87
  }
88
88
 
89
89
  &__icon {
90
- margin-left: getSpacer(xs);
90
+ margin-left: spacers.getSpacer(xs);
91
91
 
92
92
  @media (min-width: map.get($grid-breakpoints, sm)) {
93
- margin-left: getSpacer(s);
93
+ margin-left: spacers.getSpacer(s);
94
94
  }
95
95
 
96
96
  @media (min-width: map.get($grid-breakpoints, lg)) {
97
- margin-left: getSpacer(l);
97
+ margin-left: spacers.getSpacer(l);
98
98
  }
99
99
  }
100
100
  }