@bonniernews/dn-design-system-web 16.1.1 → 16.2.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 (13) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/components/spinner/spinner.scss +1 -2
  3. package/foundations/colors.scss +7 -33
  4. package/foundations/helpers/README-spacing.md +0 -6
  5. package/foundations/helpers/colors.scss +35 -0
  6. package/foundations/helpers/spacing.scss +0 -3
  7. package/package.json +1 -1
  8. package/foundations/helpers/spacing-deprecated.scss +0 -63
  9. package/foundations/variables/deprecated/spacingComponent.scss +0 -12
  10. package/foundations/variables/deprecated/spacingComponentList.scss +0 -10
  11. package/foundations/variables/deprecated/spacingLayout.scss +0 -17
  12. package/foundations/variables/deprecated/spacingLayoutLargeScreen.scss +0 -17
  13. package/foundations/variables/deprecated/spacingLayoutList.scss +0 -15
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [16.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.2...@bonniernews/dn-design-system-web@16.2.0) (2024-07-17)
8
+
9
+
10
+ ### Features
11
+
12
+ * **web:** enable dark mode if supported ([#1339](https://github.com/BonnierNews/dn-design-system/issues/1339)) ([899bbe5](https://github.com/BonnierNews/dn-design-system/commit/899bbe59d8c513b47fe5e04e2e462ea827c0c6a8))
13
+
14
+ ## [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)
15
+
16
+
17
+ ### Maintenance
18
+
19
+ * **web:** remove deprecated spacing ([#1337](https://github.com/BonnierNews/dn-design-system/issues/1337)) ([82823ad](https://github.com/BonnierNews/dn-design-system/commit/82823ad8bb5ad3591bcad1d9916ee25267bb62b6))
20
+
7
21
  ## [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
22
 
9
23
 
package/components/spinner/spinner.scss CHANGED
@@ -1,5 +1,4 @@
1
- @use "../../foundations/helpers/utilities.scss" as *;
2
- @use "../../foundations/helpers/colors.scss" as *;
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
3
2
 
4
3
  $ds-spinner__border-radius: 50%;
5
4
  $ds-spinner__size--l: 40px;
package/foundations/colors.scss CHANGED
@@ -9,46 +9,20 @@ html,
9
9
  @each $name, $value in meta.module-variables("colorsDnLightTokens") {
10
10
  --ds-color-#{string.slice($name, 8)}: #{$value};
11
11
  }
12
+ }
12
13
 
13
- // Skip automatic dark mode since majority of dn.se is not adapted
14
- // Better to toggle using .dnDark on adapted views and/or elements
15
- // @media (prefers-color-scheme: dark) {
16
- // @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
17
- // --ds-#{string.slice($name, 9)}: #{$value};
18
- // }
19
- // }
14
+ // enable listening to OS dark mode by setting class support-color-scheme on html-tag
15
+ html.support-color-scheme:not(.ds-light) {
16
+ @media (prefers-color-scheme: dark) {
17
+ @include get-dark-color-scheme();
18
+ }
20
19
  }
21
20
 
22
21
  // for manually switching on dark mode
23
22
  // dnDark should only be used in storybook otherwise use ds-dark
24
23
  .dnDark,
25
24
  .ds-dark {
26
- @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
27
- --ds-color-#{string.slice($name, 13)}: #{$value};
28
- }
29
-
30
- // these are not static so needs to be defined here also
31
- --ds-theme-color: #{$ds-color-component-brand};
32
-
33
- .ds-theme--nyheter {
34
- --ds-theme-color: #{$ds-color-component-brand};
35
- }
36
-
37
- .ds-theme--ekonomi {
38
- --ds-theme-color: #{$ds-color-static-economy};
39
- }
40
-
41
- .ds-theme--kultur {
42
- --ds-theme-color: #{$ds-color-static-kultur};
43
- }
44
-
45
- .ds-theme--sport {
46
- --ds-theme-color: #{$ds-color-static-sport};
47
- }
48
-
49
- .ds-theme--sthlm {
50
- --ds-theme-color: #{$ds-color-static-sthlm};
51
- }
25
+ @include get-dark-color-scheme();
52
26
  }
53
27
 
54
28
  html {
package/foundations/helpers/README-spacing.md CHANGED
@@ -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.
package/foundations/helpers/colors.scss CHANGED
@@ -1,3 +1,38 @@
1
1
  @forward "../variables/colorsCssVariables.scss";
2
2
 
3
+ @use "sass:meta";
4
+ @use "sass:string";
5
+ @use "../variables/colorsCssVariables" as *;
6
+ @use "../variables/colorsDnLightTokens";
7
+ @use "../variables/colorsDnDarkTokens";
8
+
3
9
  $ds-theme-color: var(--ds-theme-color);
10
+
11
+ @mixin get-dark-color-scheme() {
12
+ @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
13
+ --ds-color-#{string.slice($name, 13)}: #{$value};
14
+ }
15
+
16
+ // these are not static so needs to be defined here also
17
+ --ds-theme-color: #{$ds-color-component-brand};
18
+
19
+ .ds-theme--nyheter {
20
+ --ds-theme-color: #{$ds-color-component-brand};
21
+ }
22
+
23
+ .ds-theme--ekonomi {
24
+ --ds-theme-color: #{$ds-color-static-economy};
25
+ }
26
+
27
+ .ds-theme--kultur {
28
+ --ds-theme-color: #{$ds-color-static-kultur};
29
+ }
30
+
31
+ .ds-theme--sport {
32
+ --ds-theme-color: #{$ds-color-static-sport};
33
+ }
34
+
35
+ .ds-theme--sthlm {
36
+ --ds-theme-color: #{$ds-color-static-sthlm};
37
+ }
38
+ }
package/foundations/helpers/spacing.scss CHANGED
@@ -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.2.0",
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",
package/foundations/helpers/spacing-deprecated.scss DELETED
@@ -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
- }
package/foundations/variables/deprecated/spacingComponent.scss DELETED
@@ -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
- );
package/foundations/variables/deprecated/spacingComponentList.scss DELETED
@@ -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;
package/foundations/variables/deprecated/spacingLayout.scss DELETED
@@ -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
- );
package/foundations/variables/deprecated/spacingLayoutLargeScreen.scss DELETED
@@ -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
- );
package/foundations/variables/deprecated/spacingLayoutList.scss DELETED
@@ -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;