@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 +7 -0
- package/foundations/helpers/README-spacing.md +0 -6
- package/foundations/helpers/spacing.scss +0 -3
- package/package.json +1 -1
- package/foundations/helpers/spacing-deprecated.scss +0 -63
- package/foundations/variables/deprecated/spacingComponent.scss +0 -12
- package/foundations/variables/deprecated/spacingComponentList.scss +0 -10
- package/foundations/variables/deprecated/spacingLayout.scss +0 -17
- package/foundations/variables/deprecated/spacingLayoutLargeScreen.scss +0 -17
- package/foundations/variables/deprecated/spacingLayoutList.scss +0 -15
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,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,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;
|