@bonniernews/dn-design-system-web 3.0.0-alpha.2 → 3.0.0-alpha.21

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 (56) hide show
  1. package/CHANGELOG.md +166 -0
  2. package/README.md +1 -1
  3. package/assets/article-image/article-image.njk +34 -0
  4. package/assets/article-image/article-image.scss +6 -0
  5. package/assets/form-field/form-field.scss +5 -9
  6. package/components/article-body-image/README.md +42 -0
  7. package/components/article-body-image/article-body-image.njk +19 -0
  8. package/components/article-body-image/article-body-image.scss +8 -0
  9. package/components/article-top-image/README.md +40 -0
  10. package/components/article-top-image/article-top-image.njk +19 -0
  11. package/components/article-top-image/article-top-image.scss +6 -0
  12. package/components/badge/badge.scss +5 -9
  13. package/components/blocked-content/blocked-content.scss +6 -6
  14. package/components/buddy-menu/buddy-menu.scss +14 -21
  15. package/components/button/button.scss +22 -19
  16. package/components/button-toggle/button-toggle.scss +22 -21
  17. package/components/byline/byline.scss +11 -8
  18. package/components/checkbox/checkbox.scss +10 -14
  19. package/components/disclaimer/disclaimer.scss +26 -12
  20. package/components/divider/divider.scss +1 -1
  21. package/components/factbox/factbox.scss +11 -9
  22. package/components/footer/footer.scss +14 -20
  23. package/components/icon-button/icon-button.scss +3 -3
  24. package/components/icon-button-toggle/icon-button-toggle.scss +3 -3
  25. package/components/image-caption/README.md +38 -0
  26. package/components/image-caption/image-caption.njk +25 -0
  27. package/components/image-caption/image-caption.scss +15 -0
  28. package/components/list-item/list-item.scss +9 -9
  29. package/components/quote/quote.scss +2 -2
  30. package/components/radio-button/radio-button.scss +10 -15
  31. package/components/switch/switch.scss +2 -2
  32. package/components/text-button/text-button.scss +8 -13
  33. package/components/text-button-toggle/text-button-toggle.scss +4 -10
  34. package/components/text-input/text-input.scss +20 -24
  35. package/components/thematic-break/thematic-break.scss +1 -1
  36. package/components/video-caption/README.md +37 -0
  37. package/components/video-caption/video-caption.njk +26 -0
  38. package/components/video-caption/video-caption.scss +18 -0
  39. package/foundations/helpers/README-links.md +1 -1
  40. package/foundations/helpers/README-spacing.md +48 -10
  41. package/foundations/helpers/spacing.scss +3 -1
  42. package/foundations/typography/fontDefinitions.scss +106 -60
  43. package/foundations/variables/colorsCssVariables.scss +3 -0
  44. package/foundations/variables/colorsDnDarkTokens.scss +4 -1
  45. package/foundations/variables/colorsDnLightTokens.scss +3 -0
  46. package/foundations/variables/spacingComponentList.scss +10 -0
  47. package/foundations/variables/spacingLayout.scss +1 -0
  48. package/foundations/variables/spacingLayoutLargeScreen.scss +3 -9
  49. package/foundations/variables/spacingLayoutList.scss +9 -0
  50. package/foundations/variables/typographyTokensList.scss +31 -30
  51. package/foundations/variables/typographyTokensScreenLarge.scss +167 -161
  52. package/foundations/variables/typographyTokensScreenSmall.scss +189 -183
  53. package/package.json +2 -2
  54. package/tokens/colors-css-variables.json +3 -0
  55. package/tokens/spacing-component-list.json +12 -0
  56. package/tokens/spacing-layout-list.json +11 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.2",
3
+ "version": "3.0.0-alpha.21",
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",
@@ -20,7 +20,7 @@
20
20
  "stylelint": "^14.14.0",
21
21
  "stylelint-config-prettier": "^9.0.3",
22
22
  "stylelint-config-standard": "^29.0.0",
23
- "stylelint-config-standard-scss": "^6.0.0",
23
+ "stylelint-config-standard-scss": "^7.0.1",
24
24
  "stylelint-prettier": "^2.0.0",
25
25
  "stylelint-sass-render-errors": "^3.0.0",
26
26
  "stylelint-selector-bem-pattern": "^2.1.1"
@@ -33,6 +33,7 @@
33
33
  "component-critical-overlay": "var(--ds-color-component-critical-overlay)",
34
34
  "component-static-white": "var(--ds-color-component-static-white)",
35
35
  "component-positive": "var(--ds-color-component-positive)",
36
+ "component-primary-02": "var(--ds-color-component-primary-02)",
36
37
  "surface-below": "var(--ds-color-surface-below)",
37
38
  "surface-native-article": "var(--ds-color-surface-native-article)",
38
39
  "surface-background": "var(--ds-color-surface-background)",
@@ -63,6 +64,8 @@
63
64
  "static-neutral-200": "var(--ds-color-static-neutral-200)",
64
65
  "static-sthlm": "var(--ds-color-static-sthlm)",
65
66
  "static-ad-yellow": "var(--ds-color-static-ad-yellow)",
67
+ "static-neutral-100": "var(--ds-color-static-neutral-100)",
68
+ "static-neutral-500": "var(--ds-color-static-neutral-500)",
66
69
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
67
70
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
68
71
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",
@@ -0,0 +1,12 @@
1
+ {
2
+ "x1": "x1",
3
+ "x2": "x2",
4
+ "x3": "x3",
5
+ "x4": "x4",
6
+ "x5": "x5",
7
+ "x6": "x6",
8
+ "x8": "x8",
9
+ "x20": "x20",
10
+ "outer": "outer",
11
+ "outer-negative": "outer-negative"
12
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "page-horizontal": "page-horizontal",
3
+ "page-top-small": "page-top-small",
4
+ "page-top-large": "page-top-large",
5
+ "page-bottom": "page-bottom",
6
+ "gap-vertical-static-medium": "gap-vertical-static-medium",
7
+ "gap-vertical-medium": "gap-vertical-medium",
8
+ "gap-vertical-static-large": "gap-vertical-static-large",
9
+ "gap-horizontal-static-small": "gap-horizontal-static-small",
10
+ "gap-vertical-static-small": "gap-vertical-static-small"
11
+ }