@bonniernews/dn-design-system-web 16.1.0 → 16.1.1

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 (18) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/components/badge/badge.scss +1 -1
  3. package/components/byline/byline.scss +3 -3
  4. package/components/disclaimer/disclaimer.scss +1 -1
  5. package/components/divider/divider.scss +1 -1
  6. package/components/factbox/factbox.scss +2 -2
  7. package/components/footer/footer.scss +2 -2
  8. package/components/group-header/group-header.scss +2 -2
  9. package/components/list-item/list-item.scss +2 -2
  10. package/components/profile-header/profile-header.scss +1 -1
  11. package/components/switch/switch.scss +1 -1
  12. package/components/tag-header/tag-header.scss +1 -1
  13. package/components/teaser-list-vertical/teaser-list-vertical.scss +2 -2
  14. package/components/teaser-package/teaser-package.scss +1 -1
  15. package/components/teaser-split/teaser-split.scss +2 -2
  16. package/foundations/helpers/hover.scss +1 -1
  17. package/foundations/helpers/metrics.scss +0 -10
  18. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [16.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.0...@bonniernews/dn-design-system-web@16.1.1) (2024-07-16)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **web:** use correct metric helpers ([#1338](https://github.com/BonnierNews/dn-design-system/issues/1338)) ([ca0bec0](https://github.com/BonnierNews/dn-design-system/commit/ca0bec05a2c2b272b45600ec5a8a94e35c22ff05))
13
+
7
14
  ## [16.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.7...@bonniernews/dn-design-system-web@16.1.0) (2024-07-15)
8
15
 
9
16
 
package/components/badge/badge.scss CHANGED
@@ -10,7 +10,7 @@ $ds-badge__min-size: 8px;
10
10
  @include ds-typography($ds-typography-functionalmeta02, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold);
11
11
  color: $ds-color-static-white;
12
12
  background-color: $ds-color-component-brand;
13
- border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
13
+ border: $ds-color-border-secondary ds-border-width(x2) solid;
14
14
  border-radius: 100px;
15
15
  display: inline-flex;
16
16
  align-items: center;
package/components/byline/byline.scss CHANGED
@@ -23,7 +23,7 @@ $ds-byline__image-size--direkt: 36px;
23
23
 
24
24
  &::after {
25
25
  content: "";
26
- height: ds-metrics-border-width(x1);
26
+ height: ds-border-width(x1);
27
27
  width: calc(100% - ds-spacing($ds-s-200));
28
28
  background-color: $ds-color-border-primary;
29
29
  position: absolute;
@@ -62,7 +62,7 @@ $ds-byline__image-size--direkt: 36px;
62
62
  text-decoration: none;
63
63
 
64
64
  &:focus-visible {
65
- outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
65
+ outline: ds-border-width(x2) solid $ds-color-border-focus-02;
66
66
  outline-offset: 2px;
67
67
  }
68
68
  }
@@ -174,7 +174,7 @@ $ds-byline__image-size--direkt: 36px;
174
174
  &:focus-visible {
175
175
  outline: none;
176
176
  .ds-byline__inner {
177
- outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
177
+ outline: ds-border-width(x2) solid $ds-color-border-focus-02;
178
178
  outline-offset: -2px;
179
179
  }
180
180
  }
package/components/disclaimer/disclaimer.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "../icon-sprite/icon-sprite.scss";
3
3
 
4
4
  $ds-disclaimer__icon-size: 20px;
5
- $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
5
+ $ds-btn-outlined__border-width: ds-border-width(x1);
6
6
 
7
7
  .ds-disclaimer {
8
8
  padding-bottom: ds-spacing($ds-s-100);
package/components/divider/divider.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  margin: 0 auto;
9
9
  border: none;
10
10
  background-color: $ds-color-border-primary;
11
- height: ds-metrics-border-width(x1);
11
+ height: ds-border-width(x1);
12
12
  width: 100%;
13
13
  }
14
14
  }
package/components/factbox/factbox.scss CHANGED
@@ -15,14 +15,14 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
15
15
  padding: ds-spacing($ds-s-100 0 $ds-s-200);
16
16
 
17
17
  .ds-factbox__inner {
18
- border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
18
+ border-top: ds-border-width(x1) solid $ds-color-border-primary;
19
19
  border-left: $ds-factbox-border-width solid $ds-theme-color;
20
20
  max-height: ds-px-to-rem($ds-factbox__max-height);
21
21
  overflow: hidden;
22
22
  position: relative;
23
23
  padding: $ds-factbox__padding;
24
24
  padding-left: $ds-factbox__padding-left;
25
- padding-top: $ds-factbox__padding - ds-metrics-border-width(x1);
25
+ padding-top: $ds-factbox__padding - ds-border-width(x1);
26
26
 
27
27
  @at-root .ds-force-px#{&} {
28
28
  max-height: $ds-factbox__max-height;
package/components/footer/footer.scss CHANGED
@@ -37,7 +37,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
37
37
  &__rudolf,
38
38
  &__editors,
39
39
  &__channels {
40
- border-top-width: ds-metrics-border-width(x1);
40
+ border-top-width: ds-border-width(x1);
41
41
  border-top-style: solid;
42
42
  border-color: $ds-color-static-transparent-white-10;
43
43
  }
@@ -50,7 +50,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
50
50
 
51
51
  &__link-grid {
52
52
  border-bottom-style: solid;
53
- border-bottom-width: ds-metrics-border-width(x1);
53
+ border-bottom-width: ds-border-width(x1);
54
54
  border-color: $ds-color-static-transparent-white-10;
55
55
  }
56
56
  }
package/components/group-header/group-header.scss CHANGED
@@ -16,7 +16,7 @@ $ds-group-header__icon-size: 24px;
16
16
  @include ds-typography($ds-typography-functionalbody02);
17
17
 
18
18
  &--bottom-border {
19
- border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
19
+ border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
20
20
  }
21
21
 
22
22
  &--bauta {
@@ -110,7 +110,7 @@ $ds-group-header__icon-size: 24px;
110
110
  }
111
111
 
112
112
  &--bottom-border .ds-group-header__title {
113
- padding-bottom: ds-spacing($ds-s-075) - ds-metrics-border-width(x1);
113
+ padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
114
114
  }
115
115
 
116
116
  &--bautaxl .ds-group-header__title {
package/components/list-item/list-item.scss CHANGED
@@ -153,7 +153,7 @@ $ds-list-item__icon-size: 24px;
153
153
  &:focus-visible {
154
154
  outline: none;
155
155
  .ds-list-item__inner {
156
- outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
156
+ outline: ds-border-width(x2) solid $ds-color-border-focus-02;
157
157
  outline-offset: -2px;
158
158
  }
159
159
  }
@@ -171,7 +171,7 @@ $ds-list-item__icon-size: 24px;
171
171
  &::after,
172
172
  &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
173
173
  content: "";
174
- height: ds-metrics-border-width(x1);
174
+ height: ds-border-width(x1);
175
175
  width: calc(100% - (ds-spacing($ds-s-100) * 2));
176
176
  background-color: $ds-color-border-primary;
177
177
  position: absolute;
package/components/profile-header/profile-header.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  @include ds-typography($ds-typography-functionalbody02);
48
48
  color: $ds-color-text-primary;
49
49
  margin: ds-spacing(0 $ds-s-100 0);
50
- border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
50
+ border-top: ds-border-width(x1) solid $ds-color-border-primary;
51
51
  padding: ds-spacing($ds-s-100 0);
52
52
 
53
53
  a {
package/components/switch/switch.scss CHANGED
@@ -101,7 +101,7 @@ $ds-switch__container-width: 44px;
101
101
  }
102
102
 
103
103
  &:focus-visible + .ds-switch__inner .ds-switch__box {
104
- outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
104
+ outline: ds-border-width(x2) solid $ds-color-border-focus-02;
105
105
  outline-offset: 2px;
106
106
  }
107
107
 
package/components/tag-header/tag-header.scss CHANGED
@@ -74,7 +74,7 @@
74
74
  @include ds-typography($ds-typography-functionalbody02);
75
75
  color: $ds-color-text-primary;
76
76
  margin: ds-spacing($ds-s-100 $ds-s-100 0);
77
- border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
77
+ border-top: ds-border-width(x1) solid $ds-color-border-primary;
78
78
  padding-top: ds-spacing($ds-s-100);
79
79
 
80
80
  a {
package/components/teaser-list-vertical/teaser-list-vertical.scss CHANGED
@@ -35,7 +35,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
35
35
  top: 0;
36
36
  left: 0;
37
37
  right: 0;
38
- height: ds-metrics-border-width(x1);
38
+ height: ds-border-width(x1);
39
39
  background-color: $ds-color-border-primary;
40
40
  }
41
41
  }
@@ -51,7 +51,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
51
51
  content: "";
52
52
  position: absolute;
53
53
  bottom: 0;
54
- height: ds-metrics-border-width(x1);
54
+ height: ds-border-width(x1);
55
55
  width: calc(100% - ds-spacing($ds-s-200));
56
56
  background-color: $ds-color-border-primary;
57
57
  }
package/components/teaser-package/teaser-package.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  > .ds-teaser::after,
14
14
  > .ds-split-container::after {
15
15
  content: "";
16
- height: ds-metrics-border-width(x1);
16
+ height: ds-border-width(x1);
17
17
  background-color: $ds-color-border-primary;
18
18
  position: absolute;
19
19
  display: block;
package/components/teaser-split/teaser-split.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  @at-root .ds-teaser-package > & + & {
13
13
  &:before {
14
14
  content: "";
15
- height: ds-metrics-border-width(x1);
15
+ height: ds-border-width(x1);
16
16
  background-color: $ds-color-border-primary;
17
17
  left: 0;
18
18
  right: 0;
@@ -52,7 +52,7 @@
52
52
  content: "";
53
53
  margin-top: ds-spacing($ds-s-100);
54
54
  padding-top: ds-spacing($ds-s-075);
55
- border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
55
+ border-top: ds-border-width(x1) solid $ds-color-border-primary;
56
56
 
57
57
  @include ds-mq-smallest-breakpoint(tablet) {
58
58
  margin-top: 0;
package/foundations/helpers/hover.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  @mixin ds-focus(
25
25
  $offset: false,
26
26
  $includeSelector: true,
27
- $width: ds-metrics-border-width(x2),
27
+ $width: ds-border-width(x2),
28
28
  $color: $ds-color-border-focus-02
29
29
  ) {
30
30
  @if not $includeSelector {
package/foundations/helpers/metrics.scss CHANGED
@@ -41,13 +41,3 @@ $dsBorderWidth: map.get($metrics, "border-width");
41
41
 
42
42
  @return $values;
43
43
  }
44
-
45
- // deprecated
46
- @function ds-metrics-border-radius($units: null) {
47
- @return ds-border-radius($units);
48
- }
49
-
50
- // deprecated
51
- @function ds-metrics-border-width($units: null) {
52
- @return ds-border-width($units);
53
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "16.1.0",
3
+ "version": "16.1.1",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",