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

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.
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.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.1...@bonniernews/dn-design-system-web@16.1.2) (2024-07-16)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **web:** remove deprecated spacing ([#1337](https://github.com/BonnierNews/dn-design-system/issues/1337)) ([82823ad](https://github.com/BonnierNews/dn-design-system/commit/82823ad8bb5ad3591bcad1d9916ee25267bb62b6))
13
+
7
14
  ## [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
15
 
9
16
 
@@ -50,9 +50,3 @@ By using sass variables for spacing tokens you will see which tokens are availab
50
50
  padding: 1.25rem 0.875rem;
51
51
  }
52
52
  ```
53
-
54
- ## ⚠️ Deprecated functions and mixins
55
-
56
- The function `ds-spacing-component()` is deprecated.
57
-
58
- The mixin `@include ds-spacing-layout()` is deprecated.
@@ -8,9 +8,6 @@
8
8
  @use "../variables/spacingDetailScreenLarge.scss" as *;
9
9
  @forward "../variables/spacingDetailList.scss";
10
10
 
11
- // @todo remove when possible
12
- @forward "spacing-deprecated.scss";
13
-
14
11
  @function ds-spacing($units: null, $sizeUnit: "px", $negative: false) {
15
12
  @if $units {
16
13
  $values: ();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "16.1.1",
3
+ "version": "16.1.2",
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",
@@ -1,63 +0,0 @@
1
- @use "sass:list";
2
- @use "sass:math";
3
- @use "sass:map";
4
- @use "mediaQueries.scss" as *;
5
- @use "../variables/deprecated/spacingComponent.scss" as *;
6
- @use "../variables/deprecated/spacingLayout.scss" as *;
7
- @use "../variables/deprecated/spacingLayoutLargeScreen.scss" as *;
8
- @forward "../variables/deprecated/spacingComponentList.scss";
9
- @forward "../variables/deprecated/spacingLayoutList.scss";
10
-
11
- @function ds-spacing-component($units: null, $sizeUnit: "px", $negative: false) {
12
- @if $units {
13
- @return _ds-get-spacings-deprecated($spacingComponent, $units, $sizeUnit, $negative);
14
- }
15
-
16
- @return null;
17
- }
18
-
19
- @mixin ds-spacing-layout($units: null, $property: padding, $sizeUnit: "px", $negative: false) {
20
- @if $units {
21
- $values: _ds-get-spacings-deprecated($spacingLayout, $units, $sizeUnit, $negative);
22
- @include ds-mq-largest-breakpoint(mobile) {
23
- #{$property}: $values;
24
- }
25
- $valuesLargeScreen: _ds-get-spacings-deprecated($spacingLayoutLargeScreen, $units, $sizeUnit, $negative);
26
- @include ds-mq-smallest-breakpoint(tablet) {
27
- #{$property}: $valuesLargeScreen;
28
- }
29
- }
30
- }
31
-
32
- @function _ds-get-spacings-deprecated($map, $units, $sizeUnit: "px", $negative: false) {
33
- $values: ();
34
-
35
- @each $unit in $units {
36
- $value: map.get($map, $unit);
37
- @if ($unit == "auto") {
38
- $value: auto;
39
- } @else if ($unit == 0) {
40
- $value: 0 * 1;
41
- } @else if ($value and type-of($value) == "number") {
42
- @if ($sizeUnit == "rem") {
43
- $value: (math.div($value, 16)) * 1rem;
44
- } @else if ($sizeUnit == "em") {
45
- $value: (math.div($value, 16)) * 1em;
46
- } @else {
47
- $value: $value * 1px;
48
- }
49
- @if $negative {
50
- $value: $value * -1;
51
- }
52
- }
53
- @if (type-of($value) == "number" or $value == "auto") {
54
- $values: list.append($values, $value);
55
- }
56
- }
57
-
58
- @if length($values) == 1 {
59
- @return list.nth($values, 1);
60
- }
61
-
62
- @return $values;
63
- }
@@ -1,12 +0,0 @@
1
- $spacingComponent: (
2
- x1: 4,
3
- x2: 8,
4
- x3: 12,
5
- x4: 16,
6
- x5: 20,
7
- x6: 24,
8
- x8: 32,
9
- x20: 80,
10
- outer: 16,
11
- outer-negative: -16
12
- );
@@ -1,10 +0,0 @@
1
- $ds-sc-x1: x1;
2
- $ds-sc-x2: x2;
3
- $ds-sc-x3: x3;
4
- $ds-sc-x4: x4;
5
- $ds-sc-x5: x5;
6
- $ds-sc-x6: x6;
7
- $ds-sc-x8: x8;
8
- $ds-sc-x20: x20;
9
- $ds-sc-outer: outer;
10
- $ds-sc-outer-negative: outer-negative;
@@ -1,17 +0,0 @@
1
- $spacingLayout: (
2
- page-horizontal: 16,
3
- page-top-small: 16,
4
- page-top-large: 48,
5
- page-bottom: 16,
6
- gap-vertical-static-medium: 16,
7
- gap-vertical-medium: 16,
8
- gap-vertical-static-large: 32,
9
- gap-horizontal-static-small: 8,
10
- gap-vertical-static-small: 8,
11
- page-top-xsmall: 4,
12
- teaser-vertical-small: 8,
13
- teaser-horizontal: 16,
14
- gap-vertical-xsmall: 4,
15
- teaser-vertical-medium: 12,
16
- direkt-header-bottom: 48
17
- );
@@ -1,17 +0,0 @@
1
- $spacingLayoutLargeScreen: (
2
- page-top-small: 32,
3
- page-top-large: 48,
4
- page-bottom: 32,
5
- page-horizontal: 32,
6
- gap-vertical-medium: 32,
7
- page-top-xsmall: 8,
8
- teaser-vertical-small: 12,
9
- teaser-horizontal: 16,
10
- gap-vertical-xsmall: 8,
11
- teaser-vertical-medium: 16,
12
- direkt-header-bottom: 64,
13
- gap-vertical-static-medium: 16,
14
- gap-vertical-static-large: 32,
15
- gap-horizontal-static-small: 8,
16
- gap-vertical-static-small: 8
17
- );
@@ -1,15 +0,0 @@
1
- $ds-sl-page-horizontal: page-horizontal;
2
- $ds-sl-page-top-small: page-top-small;
3
- $ds-sl-page-top-large: page-top-large;
4
- $ds-sl-page-bottom: page-bottom;
5
- $ds-sl-gap-vertical-static-medium: gap-vertical-static-medium;
6
- $ds-sl-gap-vertical-medium: gap-vertical-medium;
7
- $ds-sl-gap-vertical-static-large: gap-vertical-static-large;
8
- $ds-sl-gap-horizontal-static-small: gap-horizontal-static-small;
9
- $ds-sl-gap-vertical-static-small: gap-vertical-static-small;
10
- $ds-sl-page-top-xsmall: page-top-xsmall;
11
- $ds-sl-teaser-vertical-small: teaser-vertical-small;
12
- $ds-sl-teaser-horizontal: teaser-horizontal;
13
- $ds-sl-gap-vertical-xsmall: gap-vertical-xsmall;
14
- $ds-sl-teaser-vertical-medium: teaser-vertical-medium;
15
- $ds-sl-direkt-header-bottom: direkt-header-bottom;