@bonniernews/dn-design-system-web 20.7.0-beta.0 → 20.7.0-beta.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.
- package/CHANGELOG.md +17 -3
- package/components/group-header/group-header.njk +1 -2
- package/components/group-header/group-header.scss +13 -1
- package/components/teaser-package/teaser-package.njk +1 -2
- package/components/teaser-package/teaser-package.scss +28 -13
- package/components/teaser-split/teaser-split.njk +1 -1
- package/foundations/helpers/colors.scss +0 -5
- package/package.json +3 -7
- package/variables/colors-css-variables.json +92 -0
- package/variables/shadows-css-variables.json +6 -0
- package/variables/spacing-base-list.json +15 -0
- package/variables/spacing-detail-list.json +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,16 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
## [20.7.0-beta.
|
|
7
|
+
## [20.7.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.1...@bonniernews/dn-design-system-web@20.7.0-beta.1) (2024-10-17)
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
###
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **web:** less specific export ([15695f3](https://github.com/BonnierNews/dn-design-system/commit/15695f39a5280447d459a642f8c23dca2e459464))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Maintenance
|
|
16
|
+
|
|
17
|
+
* **deps-dev:** bump @babel/runtime from 7.24.5 to 7.25.7 ([#1431](https://github.com/BonnierNews/dn-design-system/issues/1431)) ([f9835dc](https://github.com/BonnierNews/dn-design-system/commit/f9835dc526d20abb98ebcf0fbbad6a1bb143ec80))
|
|
18
|
+
* **deps-dev:** bump @react-native/metro-config from 0.75.2 to 0.75.4 ([#1434](https://github.com/BonnierNews/dn-design-system/issues/1434)) ([22e6777](https://github.com/BonnierNews/dn-design-system/commit/22e67776633a67be1201a78bb5bd9bc6744e291c))
|
|
19
|
+
* **deps-dev:** bump @testing-library/react-native from 12.6.1 to 12.7.2 ([#1432](https://github.com/BonnierNews/dn-design-system/issues/1432)) ([9f44974](https://github.com/BonnierNews/dn-design-system/commit/9f449744f5db8fddf95e08067fce8ae9cf351f1f))
|
|
20
|
+
* **deps:** bump express from 4.19.2 to 4.21.1 ([#1429](https://github.com/BonnierNews/dn-design-system/issues/1429)) ([08ea9e8](https://github.com/BonnierNews/dn-design-system/commit/08ea9e884c315661aa6fc6350e7542ea70054555))
|
|
21
|
+
* prerelease packages ([ec0ca89](https://github.com/BonnierNews/dn-design-system/commit/ec0ca895f0e4995f0b700ee40140920f3105ef86))
|
|
22
|
+
* revert "chore(deps-dev): bump @react-native/metro-config from 0.75.2 to 0.75.4" ([#1435](https://github.com/BonnierNews/dn-design-system/issues/1435)) ([97a0feb](https://github.com/BonnierNews/dn-design-system/commit/97a0febdabed45c94a01b0600a040d8eb20dbf46))
|
|
11
23
|
|
|
12
|
-
|
|
24
|
+
## [20.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.0...@bonniernews/dn-design-system-web@20.6.1) (2024-10-16)
|
|
13
25
|
|
|
14
26
|
|
|
15
27
|
### Maintenance
|
|
16
28
|
|
|
29
|
+
* move to figma variables ([#1419](https://github.com/BonnierNews/dn-design-system/issues/1419)) ([96eaa70](https://github.com/BonnierNews/dn-design-system/commit/96eaa701b712e66a0597b2524ae31db34eea6294))
|
|
30
|
+
* prerelease packages ([c2ddd94](https://github.com/BonnierNews/dn-design-system/commit/c2ddd9434e69a243959a1a510394cdacd791ef21))
|
|
17
31
|
* **web:** running multiple screenshots via test_ids ([#1426](https://github.com/BonnierNews/dn-design-system/issues/1426)) ([996e498](https://github.com/BonnierNews/dn-design-system/commit/996e49813c9a1124cad803760437fba4420cbce7))
|
|
18
32
|
|
|
19
33
|
## [20.6.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.4...@bonniernews/dn-design-system-web@20.6.0) (2024-10-09)
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
classNamePrefix + (params.type or "icon"),
|
|
14
14
|
classNamePrefix + params.variant if params.variant,
|
|
15
15
|
classNamePrefix + 'bottom-border' if params.showBottomBorder,
|
|
16
|
-
'ds-dark' if params.variant == 'bauta',
|
|
17
16
|
params.classNames if params.classNames
|
|
18
17
|
] | join(" ") %}
|
|
19
18
|
|
|
@@ -46,7 +45,7 @@
|
|
|
46
45
|
{% else %}
|
|
47
46
|
{{ groupHeaderInner | safe }}
|
|
48
47
|
{% endif %}
|
|
49
|
-
{# there is no static-white toggle btn so it is disabled for bauta for now #}
|
|
48
|
+
{# there is no static-white toggle btn so it is disabled for bauta/xl for now #}
|
|
50
49
|
{% if params.type == 'toggle' and not params.variant %}
|
|
51
50
|
{{ ButtonToggle({
|
|
52
51
|
variant: "brand",
|
|
@@ -23,7 +23,15 @@ $ds-group-header__icon-size: 24px;
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&--bauta {
|
|
26
|
-
--group-header-background: #{$
|
|
26
|
+
--group-header-background: #{$ds-theme-color};
|
|
27
|
+
--group-header-color: #{$ds-color-text-on-brand};
|
|
28
|
+
--group-header-icon-color: #{$ds-color-icon-on-brand};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&--bautaxl {
|
|
32
|
+
--group-header-background: #{$ds-color-static-black};
|
|
33
|
+
--group-header-color: #{$ds-color-static-yellow};
|
|
34
|
+
--group-header-icon-color: #{$ds-color-icon-on-brand};
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
&--toggle,
|
|
@@ -108,6 +116,10 @@ $ds-group-header__icon-size: 24px;
|
|
|
108
116
|
padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
|
|
109
117
|
}
|
|
110
118
|
|
|
119
|
+
&--bautaxl .ds-group-header__title {
|
|
120
|
+
@include ds-typography($ds-typography-detailbaota-xl-label);
|
|
121
|
+
}
|
|
122
|
+
|
|
111
123
|
.ds-group-header__image {
|
|
112
124
|
margin-left: ds-spacing($ds-s-100);
|
|
113
125
|
align-self: center;
|
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
componentClassName,
|
|
9
9
|
classNamePrefix + params.areaType if params.areaType,
|
|
10
10
|
'ds-theme--' + params.theme if params.theme,
|
|
11
|
-
params.classNames if params.classNames
|
|
12
|
-
'ds-dark' if params.areaType == 'bauta'
|
|
11
|
+
params.classNames if params.classNames
|
|
13
12
|
] | join(" ") %}
|
|
14
13
|
{%- set attributes = getAttributes(params.attributes) %}
|
|
15
14
|
|
|
@@ -46,23 +46,38 @@
|
|
|
46
46
|
display: none;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
&.ds-teaser-package--
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
& .ds-teaser,
|
|
53
|
-
& .ds-teaser--slideshow {
|
|
54
|
-
background-color: $bauta-surface-color;
|
|
49
|
+
&.ds-teaser-package--bautaxl {
|
|
50
|
+
&::after {
|
|
51
|
+
background-color: transparent;
|
|
55
52
|
}
|
|
56
53
|
|
|
57
|
-
.ds-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
background-color: $updated-color-border-primary;
|
|
54
|
+
.ds-group-header + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
|
|
55
|
+
.ds-teaser__title {
|
|
56
|
+
@include ds-typography($ds-typography-detailteaser-baotaxl);
|
|
61
57
|
}
|
|
62
|
-
}
|
|
63
58
|
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
@include ds-mq-only-breakpoint(mobile) {
|
|
60
|
+
background-color: $ds-color-static-black;
|
|
61
|
+
.ds-teaser__title,
|
|
62
|
+
.ds-teaser__text {
|
|
63
|
+
color: $ds-color-static-white;
|
|
64
|
+
}
|
|
65
|
+
.ds-teaser-dot {
|
|
66
|
+
color: $ds-color-static-red-300;
|
|
67
|
+
}
|
|
68
|
+
.ds-teaser__vignette,
|
|
69
|
+
.ds-teaser__sticker {
|
|
70
|
+
color: $ds-color-static-red-300;
|
|
71
|
+
}
|
|
72
|
+
&::after {
|
|
73
|
+
background-color: $ds-color-static-transparent-white-10;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
& + .ds-teaser::after,
|
|
77
|
+
& + .ds-split-container::after {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
66
81
|
}
|
|
67
82
|
}
|
|
68
83
|
}
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
{%- set classNamePrefix = componentClassName + "--" %}
|
|
79
79
|
{%- set classes = [
|
|
80
80
|
componentClassName,
|
|
81
|
-
classNamePrefix + params.areaType if params.areaType == "bauta",
|
|
81
|
+
classNamePrefix + params.areaType if params.areaType == "bauta" or params.areaType == "bautaxl",
|
|
82
82
|
"ds-theme--" + params.theme if params.theme,
|
|
83
83
|
params.classNames if params.classNames
|
|
84
84
|
] | join(" ") %}
|
|
@@ -6,11 +6,6 @@
|
|
|
6
6
|
@use "../variables/colorsDnLightTokens";
|
|
7
7
|
@use "../variables/colorsDnDarkTokens";
|
|
8
8
|
|
|
9
|
-
// Temporary variables before we update tokens
|
|
10
|
-
$bauta-surface-color: #360003;
|
|
11
|
-
$updated-color-border-primary: #ffffff19;
|
|
12
|
-
// end of temporary variables
|
|
13
|
-
|
|
14
9
|
$ds-theme-color: var(--ds-theme-color);
|
|
15
10
|
|
|
16
11
|
@mixin get-dark-color-scheme() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonniernews/dn-design-system-web",
|
|
3
|
-
"version": "20.7.0-beta.
|
|
3
|
+
"version": "20.7.0-beta.1",
|
|
4
4
|
"description": "DN design system for web.",
|
|
5
5
|
"main": "index.tsx",
|
|
6
6
|
"type": "module",
|
|
@@ -28,12 +28,8 @@
|
|
|
28
28
|
"./assets/*.tsx": "./assets/*.tsx",
|
|
29
29
|
"./assets/*.njk": "./assets/*.njk",
|
|
30
30
|
"./assets/*.scss": "./assets/*.scss",
|
|
31
|
-
"./components
|
|
32
|
-
"./
|
|
33
|
-
"./components/*.md": "./components/*.md",
|
|
34
|
-
"./components/*.js": "./components/*.js",
|
|
35
|
-
"./components/*.scss": "./components/*.scss",
|
|
36
|
-
"./components/*.css": "./components/*.css",
|
|
31
|
+
"./components/*": "./components/*",
|
|
32
|
+
"./njk-helpers/*": "./njk-helpers/*",
|
|
37
33
|
"./introduction/*.md": "./introduction/*.md",
|
|
38
34
|
"./foundations/*": "./foundations/*",
|
|
39
35
|
"./tokens/*.json": "./tokens/*.json",
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
{
|
|
2
|
+
"surface-foreground": "var(--ds-color-surface-foreground)",
|
|
3
|
+
"surface-primary": "var(--ds-color-surface-primary)",
|
|
4
|
+
"surface-primary-raised": "var(--ds-color-surface-primary-raised)",
|
|
5
|
+
"surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",
|
|
6
|
+
"surface-primaryinvert": "var(--ds-color-surface-primaryinvert)",
|
|
7
|
+
"surface-primaryinvert-raised": "var(--ds-color-surface-primaryinvert-raised)",
|
|
8
|
+
"surface-primaryinvert-elevated": "var(--ds-color-surface-primaryinvert-elevated)",
|
|
9
|
+
"surface-brand": "var(--ds-color-surface-brand)",
|
|
10
|
+
"surface-breaking": "var(--ds-color-surface-breaking)",
|
|
11
|
+
"surface-overlay": "var(--ds-color-surface-overlay)",
|
|
12
|
+
"border-brand": "var(--ds-color-border-brand)",
|
|
13
|
+
"border-primary": "var(--ds-color-border-primary)",
|
|
14
|
+
"border-primary-strong": "var(--ds-color-border-primary-strong)",
|
|
15
|
+
"border-primary-strongest": "var(--ds-color-border-primary-strongest)",
|
|
16
|
+
"border-primaryinvert": "var(--ds-color-border-primaryinvert)",
|
|
17
|
+
"border-primaryinvert-strong": "var(--ds-color-border-primaryinvert-strong)",
|
|
18
|
+
"border-primaryinvert-strongest": "var(--ds-color-border-primaryinvert-strongest)",
|
|
19
|
+
"text-primary": "var(--ds-color-text-primary)",
|
|
20
|
+
"text-primary-subtle": "var(--ds-color-text-primary-subtle)",
|
|
21
|
+
"text-primary-disabled": "var(--ds-color-text-primary-disabled)",
|
|
22
|
+
"text-primaryinvert": "var(--ds-color-text-primaryinvert)",
|
|
23
|
+
"text-primaryinvert-subtle": "var(--ds-color-text-primaryinvert-subtle)",
|
|
24
|
+
"text-primaryinvert-disabled": "var(--ds-color-text-primaryinvert-disabled)",
|
|
25
|
+
"text-brand": "var(--ds-color-text-brand)",
|
|
26
|
+
"text-critical": "var(--ds-color-text-critical)",
|
|
27
|
+
"text-on-brand": "var(--ds-color-text-on-brand)",
|
|
28
|
+
"text-body-link": "var(--ds-color-text-body-link)",
|
|
29
|
+
"text-body-link-visited": "var(--ds-color-text-body-link-visited)",
|
|
30
|
+
"brand-0": "var(--ds-color-brand-0)",
|
|
31
|
+
"brand-100": "var(--ds-color-brand-100)",
|
|
32
|
+
"brand-200": "var(--ds-color-brand-200)",
|
|
33
|
+
"brand-300": "var(--ds-color-brand-300)",
|
|
34
|
+
"brand-400": "var(--ds-color-brand-400)",
|
|
35
|
+
"brand-500": "var(--ds-color-brand-500)",
|
|
36
|
+
"brand-600": "var(--ds-color-brand-600)",
|
|
37
|
+
"brand-700": "var(--ds-color-brand-700)",
|
|
38
|
+
"brand-800": "var(--ds-color-brand-800)",
|
|
39
|
+
"brand-900": "var(--ds-color-brand-900)",
|
|
40
|
+
"brand-1000": "var(--ds-color-brand-1000)",
|
|
41
|
+
"brand-1100": "var(--ds-color-brand-1100)",
|
|
42
|
+
"culture-0": "var(--ds-color-culture-0)",
|
|
43
|
+
"culture-100": "var(--ds-color-culture-100)",
|
|
44
|
+
"culture-200": "var(--ds-color-culture-200)",
|
|
45
|
+
"culture-300": "var(--ds-color-culture-300)",
|
|
46
|
+
"culture-400": "var(--ds-color-culture-400)",
|
|
47
|
+
"culture-500": "var(--ds-color-culture-500)",
|
|
48
|
+
"culture-600": "var(--ds-color-culture-600)",
|
|
49
|
+
"culture-700": "var(--ds-color-culture-700)",
|
|
50
|
+
"culture-800": "var(--ds-color-culture-800)",
|
|
51
|
+
"culture-900": "var(--ds-color-culture-900)",
|
|
52
|
+
"culture-1000": "var(--ds-color-culture-1000)",
|
|
53
|
+
"culture-1100": "var(--ds-color-culture-1100)",
|
|
54
|
+
"sport-0": "var(--ds-color-sport-0)",
|
|
55
|
+
"sport-100": "var(--ds-color-sport-100)",
|
|
56
|
+
"sport-200": "var(--ds-color-sport-200)",
|
|
57
|
+
"sport-300": "var(--ds-color-sport-300)",
|
|
58
|
+
"sport-400": "var(--ds-color-sport-400)",
|
|
59
|
+
"sport-500": "var(--ds-color-sport-500)",
|
|
60
|
+
"sport-600": "var(--ds-color-sport-600)",
|
|
61
|
+
"sport-700": "var(--ds-color-sport-700)",
|
|
62
|
+
"sport-800": "var(--ds-color-sport-800)",
|
|
63
|
+
"sport-900": "var(--ds-color-sport-900)",
|
|
64
|
+
"sport-1000": "var(--ds-color-sport-1000)",
|
|
65
|
+
"sport-1100": "var(--ds-color-sport-1100)",
|
|
66
|
+
"bright-neutral-0": "var(--ds-color-bright-neutral-0)",
|
|
67
|
+
"bright-neutral-100": "var(--ds-color-bright-neutral-100)",
|
|
68
|
+
"bright-neutral-200": "var(--ds-color-bright-neutral-200)",
|
|
69
|
+
"bright-neutral-300": "var(--ds-color-bright-neutral-300)",
|
|
70
|
+
"bright-neutral-400": "var(--ds-color-bright-neutral-400)",
|
|
71
|
+
"bright-neutral-500": "var(--ds-color-bright-neutral-500)",
|
|
72
|
+
"bright-neutral-050": "var(--ds-color-bright-neutral-050)",
|
|
73
|
+
"bright-neutral-alpha-100": "var(--ds-color-bright-neutral-alpha-100)",
|
|
74
|
+
"bright-neutral-alpha-200": "var(--ds-color-bright-neutral-alpha-200)",
|
|
75
|
+
"bright-neutral-alpha-300": "var(--ds-color-bright-neutral-alpha-300)",
|
|
76
|
+
"bright-neutral-alpha-400": "var(--ds-color-bright-neutral-alpha-400)",
|
|
77
|
+
"bright-neutral-alpha-500": "var(--ds-color-bright-neutral-alpha-500)",
|
|
78
|
+
"bright-neutral-alpha-050": "var(--ds-color-bright-neutral-alpha-050)",
|
|
79
|
+
"dark-neutral-0": "var(--ds-color-dark-neutral-0)",
|
|
80
|
+
"dark-neutral-100": "var(--ds-color-dark-neutral-100)",
|
|
81
|
+
"dark-neutral-200": "var(--ds-color-dark-neutral-200)",
|
|
82
|
+
"dark-neutral-300": "var(--ds-color-dark-neutral-300)",
|
|
83
|
+
"dark-neutral-400": "var(--ds-color-dark-neutral-400)",
|
|
84
|
+
"dark-neutral-500": "var(--ds-color-dark-neutral-500)",
|
|
85
|
+
"dark-neutral-050": "var(--ds-color-dark-neutral-050)",
|
|
86
|
+
"dark-neutral-alpha-100": "var(--ds-color-dark-neutral-alpha-100)",
|
|
87
|
+
"dark-neutral-alpha-200": "var(--ds-color-dark-neutral-alpha-200)",
|
|
88
|
+
"dark-neutral-alpha-300": "var(--ds-color-dark-neutral-alpha-300)",
|
|
89
|
+
"dark-neutral-alpha-400": "var(--ds-color-dark-neutral-alpha-400)",
|
|
90
|
+
"dark-neutral-alpha-500": "var(--ds-color-dark-neutral-alpha-500)",
|
|
91
|
+
"dark-neutral-alpha-050": "var(--ds-color-dark-neutral-alpha-050)"
|
|
92
|
+
}
|