@bonniernews/dn-design-system-web 25.0.4 → 25.0.6-beta.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 (109) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/assets/form-field/form-field.scss +6 -6
  3. package/assets/teaser/teaser.scss +5 -5
  4. package/components/article-top-image/article-top-image.scss +1 -1
  5. package/components/badge/badge.scss +5 -5
  6. package/components/blocked-content/blocked-content.scss +9 -9
  7. package/components/buddy-menu/buddy-menu.scss +15 -15
  8. package/components/button/button.scss +49 -33
  9. package/components/checkbox/checkbox.scss +9 -9
  10. package/components/disclaimer/disclaimer.scss +10 -10
  11. package/components/divider/divider.scss +3 -3
  12. package/components/empty-state/empty-state.scss +3 -3
  13. package/components/factbox/factbox.scss +13 -13
  14. package/components/footer/footer.scss +16 -16
  15. package/components/game-header/game-header.scss +6 -6
  16. package/components/group-header/group-header.scss +6 -6
  17. package/components/image-caption/image-caption.scss +3 -3
  18. package/components/link-box/link-box-item.scss +4 -4
  19. package/components/link-box/link-box.scss +1 -1
  20. package/components/list-item/list-item.scss +24 -24
  21. package/components/modal/modal.scss +4 -4
  22. package/components/pagination/pagination.scss +4 -4
  23. package/components/pictogram/pictogram.scss +3 -3
  24. package/components/profile-header/profile-header.scss +7 -7
  25. package/components/quote/quote.scss +2 -2
  26. package/components/radio-button/radio-button.scss +9 -9
  27. package/components/spinner/spinner.scss +14 -14
  28. package/components/switch/switch.scss +13 -13
  29. package/components/tag-header/tag-header.scss +8 -8
  30. package/components/teaser-centered/teaser-centered.scss +1 -1
  31. package/components/teaser-footer/teaser-footer.scss +5 -5
  32. package/components/teaser-image/teaser-image.scss +4 -4
  33. package/components/teaser-large/teaser-large.scss +7 -6
  34. package/components/teaser-list-vertical/teaser-list-vertical.scss +8 -8
  35. package/components/teaser-longlife/teaser-longlife.scss +7 -7
  36. package/components/teaser-native/teaser-native.scss +19 -19
  37. package/components/teaser-onsite/teaser-onsite.scss +2 -2
  38. package/components/teaser-package/teaser-package.scss +2 -2
  39. package/components/teaser-right-now/teaser-right-now.scss +1 -1
  40. package/components/teaser-slideshow/teaser-slideshow.njk +0 -1
  41. package/components/teaser-slideshow/teaser-slideshow.scss +3 -3
  42. package/components/teaser-split/teaser-split.scss +5 -5
  43. package/components/teaser-standard/teaser-standard.scss +5 -5
  44. package/components/teaser-swipe-card/teaser-swipe-card.scss +10 -10
  45. package/components/teaser-tipsa/teaser-tipsa.scss +2 -2
  46. package/components/text-button/text-button.scss +7 -7
  47. package/components/text-button-toggle/text-button-toggle.scss +7 -7
  48. package/components/text-input/text-input.scss +22 -23
  49. package/components/tooltip/tooltip.scss +5 -5
  50. package/components/video-caption/video-caption.scss +4 -4
  51. package/components/vip-badge/vip-badge.scss +10 -10
  52. package/foundations/colors.scss +6 -18
  53. package/foundations/cssVariables.scss +1 -0
  54. package/foundations/gradients.scss +25 -0
  55. package/foundations/helpers/colors.scss +10 -18
  56. package/foundations/helpers/forward.helpers.scss +1 -0
  57. package/foundations/helpers/gradients.scss +33 -0
  58. package/foundations/helpers/hover.scss +2 -2
  59. package/foundations/helpers/links.scss +4 -3
  60. package/foundations/helpers/metrics.scss +4 -6
  61. package/foundations/helpers/shadows.scss +5 -5
  62. package/foundations/helpers/typography.scss +11 -12
  63. package/foundations/shadows.scss +4 -4
  64. package/foundations/variables/border-width.scss +5 -0
  65. package/foundations/variables/colorsCssVariables.scss +84 -82
  66. package/foundations/variables/colorsDnDark.scss +89 -0
  67. package/foundations/variables/colorsDnLight.scss +89 -0
  68. package/foundations/variables/gradientsDnDark.scss +46 -0
  69. package/foundations/variables/gradientsDnLight.scss +46 -0
  70. package/foundations/variables/gradientsList.scss +4 -0
  71. package/foundations/variables/radius.scss +6 -0
  72. package/foundations/variables/shadowsDnDark.scss +30 -0
  73. package/foundations/variables/shadowsDnLight.scss +30 -0
  74. package/foundations/variables/shadowsList.scss +4 -0
  75. package/foundations/variables/spacingBase.scss +1 -0
  76. package/foundations/variables/spacingBaseList.scss +1 -0
  77. package/foundations/variables/spacingDetail.scss +3 -16
  78. package/foundations/variables/spacingDetailList.scss +3 -16
  79. package/foundations/variables/spacingDetailScreenLarge.scss +3 -16
  80. package/foundations/variables/typographyLetterSpacing.scss +1 -1
  81. package/foundations/variables/typographyLineHeight.scss +3 -3
  82. package/foundations/variables/typographyList.scss +53 -0
  83. package/foundations/variables/typographyScreenExtraLarge.scss +381 -0
  84. package/foundations/variables/typographyScreenLarge.scss +381 -0
  85. package/foundations/variables/{typographyTokensScreenSmall.scss → typographyScreenSmall.scss} +267 -309
  86. package/package.json +2 -2
  87. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +86 -84
  88. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +3 -3
  89. package/types-lib/ds-color.d.ts +97 -93
  90. package/variables/colors-dark-mode.json +109 -0
  91. package/variables/colors-light-mode.json +109 -0
  92. package/variables/gradients-dark-mode.json +58 -0
  93. package/variables/gradients-light-mode.json +58 -0
  94. package/variables/typography-list.json +55 -0
  95. package/foundations/variables/colorsDnDarkTokens.scss +0 -88
  96. package/foundations/variables/colorsDnLightTokens.scss +0 -87
  97. package/foundations/variables/decorations.scss +0 -1
  98. package/foundations/variables/metrics.scss +0 -12
  99. package/foundations/variables/shadowsDnDarkTokens.scss +0 -34
  100. package/foundations/variables/shadowsDnLightTokens.scss +0 -34
  101. package/foundations/variables/shadowsTokensList.scss +0 -4
  102. package/foundations/variables/typographyTokensList.scss +0 -59
  103. package/foundations/variables/typographyTokensScreenExtraLarge.scss +0 -422
  104. package/foundations/variables/typographyTokensScreenLarge.scss +0 -422
  105. package/tokens/colors-dark-mode.json +0 -106
  106. package/tokens/colors-light-mode.json +0 -105
  107. package/tokens/typography-list.json +0 -61
  108. package/variables/shadows-css-variables.json +0 -6
  109. /package/{tokens → variables}/icon-list.json +0 -0
package/types-lib/ds-color.d.ts CHANGED
@@ -1,105 +1,109 @@
1
1
  export enum DsColorEnum {
2
- "text-primary" = "text-primary",
3
- "text-primary-02" = "text-primary-02",
4
- "text-secondary" = "text-secondary",
5
- "text-critical" = "text-critical",
6
- "text-disabled" = "text-disabled",
7
- "text-on-brand" = "text-on-brand",
8
- "text-on-business" = "text-on-business",
9
- "text-on-critical" = "text-on-critical",
10
- "text-on-success" = "text-on-success",
11
- "text-brand" = "text-brand",
12
- "text-body-link" = "text-body-link",
13
- "text-body-link-visited" = "text-body-link-visited",
14
- "text-positive" = "text-positive",
15
- "text-culture" = "text-culture",
16
- "icon-primary" = "icon-primary",
17
- "icon-primary-02" = "icon-primary-02",
18
- "icon-secondary" = "icon-secondary",
19
- "icon-critical" = "icon-critical",
20
- "icon-disabled" = "icon-disabled",
21
- "icon-on-brand" = "icon-on-brand",
22
- "icon-on-business" = "icon-on-business",
23
- "icon-brand" = "icon-brand",
24
- "icon-on-critical" = "icon-on-critical",
25
- "icon-on-success" = "icon-on-success",
26
- "icon-culture" = "icon-culture",
27
- "component-brand" = "component-brand",
28
- "component-business" = "component-business",
29
- "component-primary" = "component-primary",
30
- "component-primary-overlay" = "component-primary-overlay",
31
- "component-primary-overlay-02" = "component-primary-overlay-02",
32
- "component-secondary" = "component-secondary",
33
- "component-secondary-overlay" = "component-secondary-overlay",
34
- "component-secondary-overlay-02" = "component-secondary-overlay-02",
35
- "component-critical" = "component-critical",
36
- "component-critical-overlay" = "component-critical-overlay",
37
- "component-static-white" = "component-static-white",
38
- "component-positive" = "component-positive",
39
- "component-primary-02" = "component-primary-02",
40
- "surface-below" = "surface-below",
41
- "surface-native-article" = "surface-native-article",
42
- "surface-background" = "surface-background",
43
- "surface-raised" = "surface-raised",
44
- "surface-elevated" = "surface-elevated",
45
- "surface-overlay" = "surface-overlay",
46
- "surface-quiz" = "surface-quiz",
47
- "surface-korsord" = "surface-korsord",
48
- "surface-sudoko" = "surface-sudoko",
2
+ "surface-foreground" = "surface-foreground",
3
+ "surface-primary" = "surface-primary",
4
+ "surface-primary-raised-soft" = "surface-primary-raised-soft",
5
+ "surface-primary-raised-strong" = "surface-primary-raised-strong",
6
+ "surface-primary-elevated" = "surface-primary-elevated",
7
+ "surface-primaryinvert" = "surface-primaryinvert",
8
+ "surface-primaryinvert-raised-soft" = "surface-primaryinvert-raised-soft",
9
+ "surface-primaryinvert-elevated" = "surface-primaryinvert-elevated",
49
10
  "surface-brand" = "surface-brand",
50
- "surface-inverted" = "surface-inverted",
11
+ "surface-success" = "surface-success",
12
+ "surface-culture" = "surface-culture",
51
13
  "surface-breaking" = "surface-breaking",
14
+ "surface-overlay" = "surface-overlay",
15
+ "surface-ad-yellow" = "surface-ad-yellow",
16
+ "surface-native-article" = "surface-native-article",
17
+ "surface-quiz" = "surface-quiz",
52
18
  "border-primary" = "border-primary",
53
- "border-primary-02" = "border-primary-02",
54
- "border-primary-03" = "border-primary-03",
55
- "border-secondary" = "border-secondary",
56
- "border-business" = "border-business",
57
- "border-critical" = "border-critical",
58
- "border-focus" = "border-focus",
59
- "border-focus-02" = "border-focus-02",
60
- "border-focus-03" = "border-focus-03",
61
- "border-focus-04" = "border-focus-04",
19
+ "border-primary-strong" = "border-primary-strong",
20
+ "border-primary-strongest" = "border-primary-strongest",
21
+ "border-primaryinvert" = "border-primaryinvert",
22
+ "border-primaryinvert-strong" = "border-primaryinvert-strong",
23
+ "border-primaryinvert-strongest" = "border-primaryinvert-strongest",
62
24
  "border-brand" = "border-brand",
63
25
  "border-culture" = "border-culture",
64
- "background-primary" = "background-primary",
65
- "static-red-100" = "static-red-100",
66
- "static-black" = "static-black",
67
- "static-transparent-black" = "static-transparent-black",
68
- "static-white" = "static-white",
69
- "static-transparent-white" = "static-transparent-white",
70
- "static-green-100" = "static-green-100",
71
- "static-red-300" = "static-red-300",
72
- "static-transparent-white-10" = "static-transparent-white-10",
73
- "static-kultur" = "static-kultur",
74
- "static-economy" = "static-economy",
75
- "static-sport" = "static-sport",
76
- "static-neutral-200" = "static-neutral-200",
77
- "static-sthlm" = "static-sthlm",
78
- "static-ad-yellow" = "static-ad-yellow",
79
- "static-neutral-100" = "static-neutral-100",
80
- "static-neutral-500" = "static-neutral-500",
81
- "static-red-500" = "static-red-500",
82
- "static-yellow" = "static-yellow",
83
- "static-red-200" = "static-red-200",
84
- "static-red-0" = "static-red-0",
85
- "gradient-content-fade-left" = "gradient-content-fade-left",
86
- "gradient-content-fade-right" = "gradient-content-fade-right",
87
- "gradient-content-fade-up" = "gradient-content-fade-up",
88
- "gradient-content-fade-down" = "gradient-content-fade-down"
26
+ "text-primary" = "text-primary",
27
+ "text-primary-subtle" = "text-primary-subtle",
28
+ "text-primary-disabled" = "text-primary-disabled",
29
+ "text-primaryinvert" = "text-primaryinvert",
30
+ "text-primaryinvert-subtle" = "text-primaryinvert-subtle",
31
+ "text-primaryinvert-disabled" = "text-primaryinvert-disabled",
32
+ "text-brand" = "text-brand",
33
+ "text-culture" = "text-culture",
34
+ "text-critical" = "text-critical",
35
+ "text-success" = "text-success",
36
+ "text-on-brand" = "text-on-brand",
37
+ "text-body-link" = "text-body-link",
38
+ "text-body-link-visited" = "text-body-link-visited",
39
+ "gradients-primary-fade-start" = "gradients-primary-fade-start",
40
+ "gradients-primary-fade-end" = "gradients-primary-fade-end",
41
+ "brand-0" = "brand-0",
42
+ "brand-100" = "brand-100",
43
+ "brand-200" = "brand-200",
44
+ "brand-300" = "brand-300",
45
+ "brand-400" = "brand-400",
46
+ "brand-500" = "brand-500",
47
+ "brand-600" = "brand-600",
48
+ "brand-700" = "brand-700",
49
+ "brand-800" = "brand-800",
50
+ "brand-900" = "brand-900",
51
+ "brand-1000" = "brand-1000",
52
+ "brand-1100" = "brand-1100",
53
+ "culture-0" = "culture-0",
54
+ "culture-100" = "culture-100",
55
+ "culture-200" = "culture-200",
56
+ "culture-300" = "culture-300",
57
+ "culture-400" = "culture-400",
58
+ "culture-500" = "culture-500",
59
+ "culture-600" = "culture-600",
60
+ "culture-700" = "culture-700",
61
+ "culture-800" = "culture-800",
62
+ "culture-900" = "culture-900",
63
+ "culture-1000" = "culture-1000",
64
+ "culture-1100" = "culture-1100",
65
+ "neutral-100" = "neutral-100",
66
+ "neutral-200" = "neutral-200",
67
+ "neutral-300" = "neutral-300",
68
+ "neutral-400" = "neutral-400",
69
+ "neutral-500" = "neutral-500",
70
+ "neutral-600" = "neutral-600",
71
+ "neutral-700" = "neutral-700",
72
+ "neutral-800" = "neutral-800",
73
+ "neutral-900" = "neutral-900",
74
+ "neutral-1000" = "neutral-1000",
75
+ "neutral-1100" = "neutral-1100",
76
+ "neutral-white" = "neutral-white",
77
+ "neutral-050" = "neutral-050",
78
+ "neutral-black" = "neutral-black",
79
+ "bright-neutral-alpha-100" = "bright-neutral-alpha-100",
80
+ "bright-neutral-alpha-200" = "bright-neutral-alpha-200",
81
+ "bright-neutral-alpha-300" = "bright-neutral-alpha-300",
82
+ "bright-neutral-alpha-400" = "bright-neutral-alpha-400",
83
+ "bright-neutral-alpha-500" = "bright-neutral-alpha-500",
84
+ "bright-neutral-alpha-050" = "bright-neutral-alpha-050",
85
+ "dark-neutral-alpha-100" = "dark-neutral-alpha-100",
86
+ "dark-neutral-alpha-200" = "dark-neutral-alpha-200",
87
+ "dark-neutral-alpha-300" = "dark-neutral-alpha-300",
88
+ "dark-neutral-alpha-400" = "dark-neutral-alpha-400",
89
+ "dark-neutral-alpha-500" = "dark-neutral-alpha-500",
90
+ "dark-neutral-alpha-050" = "dark-neutral-alpha-050"
89
91
  }
90
92
  export type DsColor = keyof typeof DsColorEnum;
91
93
 
92
94
  export enum DsColorIconEnum {
93
- "icon-primary" = "icon-primary",
94
- "icon-primary-02" = "icon-primary-02",
95
- "icon-secondary" = "icon-secondary",
96
- "icon-critical" = "icon-critical",
97
- "icon-disabled" = "icon-disabled",
98
- "icon-on-brand" = "icon-on-brand",
99
- "icon-on-business" = "icon-on-business",
100
- "icon-brand" = "icon-brand",
101
- "icon-on-critical" = "icon-on-critical",
102
- "icon-on-success" = "icon-on-success",
103
- "icon-culture" = "icon-culture"
95
+ "text-primary" = "text-primary",
96
+ "text-primary-subtle" = "text-primary-subtle",
97
+ "text-primary-disabled" = "text-primary-disabled",
98
+ "text-primaryinvert" = "text-primaryinvert",
99
+ "text-primaryinvert-subtle" = "text-primaryinvert-subtle",
100
+ "text-primaryinvert-disabled" = "text-primaryinvert-disabled",
101
+ "text-brand" = "text-brand",
102
+ "text-culture" = "text-culture",
103
+ "text-critical" = "text-critical",
104
+ "text-success" = "text-success",
105
+ "text-on-brand" = "text-on-brand",
106
+ "text-body-link" = "text-body-link",
107
+ "text-body-link-visited" = "text-body-link-visited"
104
108
  }
105
109
  export type DsColorIcon = keyof typeof DsColorIconEnum;
package/variables/colors-dark-mode.json ADDED
@@ -0,0 +1,109 @@
1
+ {
2
+ "surface": {
3
+ "foreground": "#0d0d0d",
4
+ "primary": "#050505",
5
+ "primary-raised-soft": "#121212",
6
+ "primary-raised-strong": "#1e1e1e",
7
+ "primary-elevated": "#121212",
8
+ "primaryinvert": "#ffffff",
9
+ "primaryinvert-raised-soft": "rgba(5, 5, 5, 0.05)",
10
+ "primaryinvert-elevated": "#ffffff",
11
+ "brand": "#da000d",
12
+ "success": "#3a8352",
13
+ "culture": "#227ac3",
14
+ "breaking": "#300407",
15
+ "overlay": "rgba(5, 5, 5, 0.5)",
16
+ "ad-yellow": "#ffeac6",
17
+ "native-article": "#2b2b2b",
18
+ "quiz": "#ea3e3f"
19
+ },
20
+ "border": {
21
+ "primary": "rgba(255, 255, 255, 0.15)",
22
+ "primary-strong": "rgba(255, 255, 255, 0.39)",
23
+ "primary-strongest": "#ffffff",
24
+ "primaryinvert": "rgba(5, 5, 5, 0.13)",
25
+ "primaryinvert-strong": "rgba(5, 5, 5, 0.5)",
26
+ "primaryinvert-strongest": "#050505",
27
+ "brand": "#fd2330",
28
+ "culture": "#4293d7"
29
+ },
30
+ "text": {
31
+ "primary": "#e8e8e8",
32
+ "primary-subtle": "#b2b2b2",
33
+ "primary-disabled": "#b2b2b2",
34
+ "primaryinvert": "#050505",
35
+ "primaryinvert-subtle": "#5a5a5a",
36
+ "primaryinvert-disabled": "#050505",
37
+ "brand": "#fd2330",
38
+ "culture": "#4293d7",
39
+ "critical": "#fd2330",
40
+ "success": "#3a8352",
41
+ "on-brand": "#ffffff",
42
+ "body-link": "#65a0fc",
43
+ "body-link-visited": "#65a0fc"
44
+ },
45
+ "gradients": {
46
+ "primary-fade-start": "#050505",
47
+ "primary-fade-end": "rgba(5, 5, 5, 0)"
48
+ },
49
+ "brand": {
50
+ "0": "#fbf4f4",
51
+ "100": "#f9eced",
52
+ "200": "#f2d9da",
53
+ "300": "#f0c2c4",
54
+ "400": "#f2888e",
55
+ "500": "#fd2330",
56
+ "600": "#da000d",
57
+ "700": "#af010b",
58
+ "800": "#85020a",
59
+ "900": "#5a0308",
60
+ "1000": "#300407",
61
+ "1100": "#1a0506"
62
+ },
63
+ "culture": {
64
+ "0": "#f4f7fa",
65
+ "100": "#eaf0f6",
66
+ "200": "#cedfee",
67
+ "300": "#b3cee5",
68
+ "400": "#88b6dd",
69
+ "500": "#4293d7",
70
+ "600": "#227ac3",
71
+ "700": "#195a8f",
72
+ "800": "#154b79",
73
+ "900": "#0e314e",
74
+ "1000": "#152029",
75
+ "1100": "#05101a"
76
+ },
77
+ "neutral": {
78
+ "100": "#f2f2f2",
79
+ "200": "#e8e8e8",
80
+ "300": "#cdcdcd",
81
+ "400": "#b2b2b2",
82
+ "500": "#8c8c8c",
83
+ "600": "#666666",
84
+ "700": "#5a5a5a",
85
+ "800": "#353535",
86
+ "900": "#1e1e1e",
87
+ "1000": "#121212",
88
+ "1100": "#0d0d0d",
89
+ "white": "#ffffff",
90
+ "050": "#f8f8f8",
91
+ "black": "#050505"
92
+ },
93
+ "bright-neutral-alpha": {
94
+ "100": "rgba(5, 5, 5, 0.05)",
95
+ "200": "rgba(5, 5, 5, 0.13)",
96
+ "300": "rgba(5, 5, 5, 0.2)",
97
+ "400": "rgba(5, 5, 5, 0.35)",
98
+ "500": "rgba(5, 5, 5, 0.5)",
99
+ "050": "rgba(5, 5, 5, 0.03)"
100
+ },
101
+ "dark-neutral-alpha": {
102
+ "100": "rgba(255, 255, 255, 0.05)",
103
+ "200": "rgba(255, 255, 255, 0.15)",
104
+ "300": "rgba(255, 255, 255, 0.19)",
105
+ "400": "rgba(255, 255, 255, 0.34)",
106
+ "500": "rgba(255, 255, 255, 0.39)",
107
+ "050": "rgba(255, 255, 255, 0.03)"
108
+ }
109
+ }
package/variables/colors-light-mode.json ADDED
@@ -0,0 +1,109 @@
1
+ {
2
+ "surface": {
3
+ "foreground": "#f8f8f8",
4
+ "primary": "#ffffff",
5
+ "primary-raised-soft": "#f2f2f2",
6
+ "primary-raised-strong": "#e8e8e8",
7
+ "primary-elevated": "#ffffff",
8
+ "primaryinvert": "#050505",
9
+ "primaryinvert-raised-soft": "#ffffff0d",
10
+ "primaryinvert-elevated": "#121212",
11
+ "brand": "#da000d",
12
+ "success": "#3a8352",
13
+ "culture": "#227ac3",
14
+ "breaking": "#300407",
15
+ "overlay": "#05050580",
16
+ "ad-yellow": "#ffeac6",
17
+ "native-article": "#ededed",
18
+ "quiz": "#ea3e3f"
19
+ },
20
+ "border": {
21
+ "primary": "#05050521",
22
+ "primary-strong": "#05050580",
23
+ "primary-strongest": "#050505",
24
+ "primaryinvert": "#ffffff26",
25
+ "primaryinvert-strong": "#ffffff63",
26
+ "primaryinvert-strongest": "#ffffff",
27
+ "brand": "#da000d",
28
+ "culture": "#227ac3"
29
+ },
30
+ "text": {
31
+ "primary": "#050505",
32
+ "primary-subtle": "#5a5a5a",
33
+ "primary-disabled": "#5a5a5a",
34
+ "primaryinvert": "#f2f2f2",
35
+ "primaryinvert-subtle": "#b2b2b2",
36
+ "primaryinvert-disabled": "#f2f2f2",
37
+ "brand": "#da000d",
38
+ "culture": "#227ac3",
39
+ "critical": "#da000d",
40
+ "success": "#3a8352",
41
+ "on-brand": "#ffffff",
42
+ "body-link": "#4373ce",
43
+ "body-link-visited": "#4373ce"
44
+ },
45
+ "gradients": {
46
+ "primary-fade-start": "#ffffff",
47
+ "primary-fade-end": "#ffffff00"
48
+ },
49
+ "brand": {
50
+ "0": "#fbf4f4",
51
+ "100": "#f9eced",
52
+ "200": "#f2d9da",
53
+ "300": "#f0c2c4",
54
+ "400": "#f2888e",
55
+ "500": "#fd2330",
56
+ "600": "#da000d",
57
+ "700": "#af010b",
58
+ "800": "#85020a",
59
+ "900": "#5a0308",
60
+ "1000": "#300407",
61
+ "1100": "#1a0506"
62
+ },
63
+ "culture": {
64
+ "0": "#f4f7fa",
65
+ "100": "#eaf0f6",
66
+ "200": "#cedfee",
67
+ "300": "#b3cee5",
68
+ "400": "#88b6dd",
69
+ "500": "#4293d7",
70
+ "600": "#227ac3",
71
+ "700": "#195a8f",
72
+ "800": "#154b79",
73
+ "900": "#0e314e",
74
+ "1000": "#152029",
75
+ "1100": "#05101a"
76
+ },
77
+ "neutral": {
78
+ "100": "#f2f2f2",
79
+ "200": "#e8e8e8",
80
+ "300": "#cdcdcd",
81
+ "400": "#b2b2b2",
82
+ "500": "#8c8c8c",
83
+ "600": "#666666",
84
+ "700": "#5a5a5a",
85
+ "800": "#353535",
86
+ "900": "#1e1e1e",
87
+ "1000": "#121212",
88
+ "1100": "#0d0d0d",
89
+ "white": "#ffffff",
90
+ "050": "#f8f8f8",
91
+ "black": "#050505"
92
+ },
93
+ "bright-neutral-alpha": {
94
+ "100": "#0505050d",
95
+ "200": "#05050521",
96
+ "300": "#05050533",
97
+ "400": "#05050559",
98
+ "500": "#05050580",
99
+ "050": "#05050508"
100
+ },
101
+ "dark-neutral-alpha": {
102
+ "100": "#ffffff0d",
103
+ "200": "#ffffff26",
104
+ "300": "#ffffff30",
105
+ "400": "#ffffff57",
106
+ "500": "#ffffff63",
107
+ "050": "#ffffff08"
108
+ }
109
+ }
package/variables/gradients-dark-mode.json ADDED
@@ -0,0 +1,58 @@
1
+ {
2
+ "content-fade-left": {
3
+ "type": "linear",
4
+ "angle": 270,
5
+ "stops": [
6
+ {
7
+ "color": "#050505",
8
+ "position": 0
9
+ },
10
+ {
11
+ "color": "rgba(5, 5, 5, 0)",
12
+ "position": 1
13
+ }
14
+ ]
15
+ },
16
+ "content-fade-right": {
17
+ "type": "linear",
18
+ "angle": 270,
19
+ "stops": [
20
+ {
21
+ "color": "rgba(5, 5, 5, 0)",
22
+ "position": 0
23
+ },
24
+ {
25
+ "color": "#050505",
26
+ "position": 1
27
+ }
28
+ ]
29
+ },
30
+ "content-fade-up": {
31
+ "type": "linear",
32
+ "angle": 180,
33
+ "stops": [
34
+ {
35
+ "color": "rgba(5, 5, 5, 0)",
36
+ "position": 0
37
+ },
38
+ {
39
+ "color": "#050505",
40
+ "position": 1
41
+ }
42
+ ]
43
+ },
44
+ "content-fade-down": {
45
+ "type": "linear",
46
+ "angle": 180,
47
+ "stops": [
48
+ {
49
+ "color": "#050505",
50
+ "position": 0
51
+ },
52
+ {
53
+ "color": "rgba(5, 5, 5, 0)",
54
+ "position": 1
55
+ }
56
+ ]
57
+ }
58
+ }
package/variables/gradients-light-mode.json ADDED
@@ -0,0 +1,58 @@
1
+ {
2
+ "content-fade-left": {
3
+ "type": "linear",
4
+ "angle": 270,
5
+ "stops": [
6
+ {
7
+ "color": "#ffffff",
8
+ "position": 0
9
+ },
10
+ {
11
+ "color": "rgba(255, 255, 255, 0)",
12
+ "position": 1
13
+ }
14
+ ]
15
+ },
16
+ "content-fade-right": {
17
+ "type": "linear",
18
+ "angle": 270,
19
+ "stops": [
20
+ {
21
+ "color": "rgba(255, 255, 255, 0)",
22
+ "position": 0
23
+ },
24
+ {
25
+ "color": "#ffffff",
26
+ "position": 1
27
+ }
28
+ ]
29
+ },
30
+ "content-fade-up": {
31
+ "type": "linear",
32
+ "angle": 180,
33
+ "stops": [
34
+ {
35
+ "color": "rgba(255, 255, 255, 0)",
36
+ "position": 0
37
+ },
38
+ {
39
+ "color": "#ffffff",
40
+ "position": 1
41
+ }
42
+ ]
43
+ },
44
+ "content-fade-down": {
45
+ "type": "linear",
46
+ "angle": 180,
47
+ "stops": [
48
+ {
49
+ "color": "#ffffff",
50
+ "position": 0
51
+ },
52
+ {
53
+ "color": "rgba(255, 255, 255, 0)",
54
+ "position": 1
55
+ }
56
+ ]
57
+ }
58
+ }
package/variables/typography-list.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "expressive-heading-xxs": "'expressive-heading-xxs'",
3
+ "expressive-heading-xs": "'expressive-heading-xs'",
4
+ "expressive-heading-sm": "'expressive-heading-sm'",
5
+ "expressive-heading-md": "'expressive-heading-md'",
6
+ "expressive-heading-lg": "'expressive-heading-lg'",
7
+ "expressive-heading-xl": "'expressive-heading-xl'",
8
+ "expressive-body-sm": "'expressive-body-sm'",
9
+ "expressive-body-md": "'expressive-body-md'",
10
+ "expressive-body-lg": "'expressive-body-lg'",
11
+ "expressive-ingress-sm": "'expressive-ingress-sm'",
12
+ "expressive-ingress-md": "'expressive-ingress-md'",
13
+ "functional-heading-xxs": "'functional-heading-xxs'",
14
+ "functional-heading-xs": "'functional-heading-xs'",
15
+ "functional-heading-sm": "'functional-heading-sm'",
16
+ "functional-heading-md": "'functional-heading-md'",
17
+ "functional-heading-lg": "'functional-heading-lg'",
18
+ "functional-heading-xl": "'functional-heading-xl'",
19
+ "functional-label-sm": "'functional-label-sm'",
20
+ "functional-label-md": "'functional-label-md'",
21
+ "functional-body-sm": "'functional-body-sm'",
22
+ "functional-body-md": "'functional-body-md'",
23
+ "functional-body-lg": "'functional-body-lg'",
24
+ "functional-meta-sm": "'functional-meta-sm'",
25
+ "functional-meta-md": "'functional-meta-md'",
26
+ "functional-ingress-sm": "'functional-ingress-sm'",
27
+ "functional-ingress-md": "'functional-ingress-md'",
28
+ "detail-dropcap": "'detail-dropcap'",
29
+ "detail-gameheader": "'detail-gameheader'",
30
+ "detail-medryckare": "'detail-medryckare'",
31
+ "detail-mellanrubrik": "'detail-mellanrubrik'",
32
+ "detail-direkt-header": "'detail-direkt-header'",
33
+ "detail-teaser-standard": "'detail-teaser-standard'",
34
+ "detail-teaser-standard-opinion": "'detail-teaser-standard-opinion'",
35
+ "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
36
+ "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
37
+ "detail-teaser-large": "'detail-teaser-large'",
38
+ "detail-teaser-large-compact": "'detail-teaser-large-compact'",
39
+ "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
40
+ "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
41
+ "detail-teaser-twin": "'detail-teaser-twin'",
42
+ "detail-teaser-tipsa": "'detail-teaser-tipsa'",
43
+ "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
44
+ "detail-teaser-longlife": "'detail-teaser-longlife'",
45
+ "detail-teaser-breaking": "'detail-teaser-breaking'",
46
+ "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
47
+ "detail-teaser-story": "'detail-teaser-story'",
48
+ "detail-article-standard": "'detail-article-standard'",
49
+ "detail-article-opinion": "'detail-article-opinion'",
50
+ "detail-article-longread": "'detail-article-longread'",
51
+ "detail-article-longread-premium": "'detail-article-longread-premium'",
52
+ "detail-article-direkt": "'detail-article-direkt'",
53
+ "detail-article-direct-opinion": "'detail-article-direct-opinion'",
54
+ "detail-article-quote": "'detail-article-quote'"
55
+ }