@bonniernews/dn-design-system-web 21.1.5 → 21.2.1-beta.0

package/components/teaser-standard/teaser-standard.scss

@@ -5,6 +5,10 @@
   padding: ds-spacing($ds-s-075 $ds-s-100 0);
   overflow: hidden;
 
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-standard);
 
@@ -28,17 +32,12 @@
     margin-bottom: ds-spacing($ds-s-100);
   }
 
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
   .ds-teaser__content {
     display: block;
   }
 
   .ds-teaser__media {
+    margin-top: ds-spacing($ds-s-025);
     margin-bottom: ds-spacing($ds-s-100);
     margin-left: ds-spacing($ds-s-100);
     float: right;

package/foundations/helpers/colors.scss

@@ -6,11 +6,6 @@
 @use "../variables/colorsDnLightTokens";
 @use "../variables/colorsDnDarkTokens";
 
-// Temporary variables before we update tokens
-$bauta-surface-color: #360003;
-$updated-color-border-primary: #ffffff19;
-// end of temporary variables
-
 $ds-theme-color: var(--ds-theme-color);
 
 @mixin get-dark-color-scheme() {
@@ -22,7 +17,7 @@ $ds-theme-color: var(--ds-theme-color);
   --ds-theme-color: #{$ds-color-component-brand};
 
   .ds-theme--nyheter {
-    --ds-theme-color: #{$ds-color-component-brand};
+    --ds-theme-color: #{$ds-color-border-brand};
   }
 
   .ds-theme--ekonomi {

package/foundations/variables/colorsCssVariables.scss

@@ -11,6 +11,7 @@ $ds-color-text-brand: var(--ds-color-text-brand);
 $ds-color-text-body-link: var(--ds-color-text-body-link);
 $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
 $ds-color-text-positive: var(--ds-color-text-positive);
+$ds-color-text-culture: var(--ds-color-text-culture);
 $ds-color-icon-primary: var(--ds-color-icon-primary);
 $ds-color-icon-primary-02: var(--ds-color-icon-primary-02);
 $ds-color-icon-secondary: var(--ds-color-icon-secondary);
@@ -21,6 +22,7 @@ $ds-color-icon-on-business: var(--ds-color-icon-on-business);
 $ds-color-icon-brand: var(--ds-color-icon-brand);
 $ds-color-icon-on-critical: var(--ds-color-icon-on-critical);
 $ds-color-icon-on-success: var(--ds-color-icon-on-success);
+$ds-color-icon-culture: var(--ds-color-icon-culture);
 $ds-color-component-brand: var(--ds-color-component-brand);
 $ds-color-component-business: var(--ds-color-component-business);
 $ds-color-component-primary: var(--ds-color-component-primary);
@@ -45,6 +47,7 @@ $ds-color-surface-korsord: var(--ds-color-surface-korsord);
 $ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
 $ds-color-surface-brand: var(--ds-color-surface-brand);
 $ds-color-surface-inverted: var(--ds-color-surface-inverted);
+$ds-color-surface-breaking: var(--ds-color-surface-breaking);
 $ds-color-border-primary: var(--ds-color-border-primary);
 $ds-color-border-primary-02: var(--ds-color-border-primary-02);
 $ds-color-border-primary-03: var(--ds-color-border-primary-03);
@@ -56,6 +59,7 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
 $ds-color-border-focus-03: var(--ds-color-border-focus-03);
 $ds-color-border-focus-04: var(--ds-color-border-focus-04);
 $ds-color-border-brand: var(--ds-color-border-brand);
+$ds-color-border-culture: var(--ds-color-border-culture);
 $ds-color-background-primary: var(--ds-color-background-primary);
 $ds-color-static-red-100: var(--ds-color-static-red-100);
 $ds-color-static-black: var(--ds-color-static-black);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -1,84 +1,88 @@
-$ds-hex-dark-text-primary: #EDEDED;
-$ds-hex-dark-text-primary-02: #B8B8B8;
+$ds-hex-dark-text-primary: #ededed;
+$ds-hex-dark-text-primary-02: #b8b8b8;
 $ds-hex-dark-text-secondary: #050505;
-$ds-hex-dark-text-critical: #FD2330;
-$ds-hex-dark-text-disabled: #B8B8B8;
+$ds-hex-dark-text-critical: #fd2330;
+$ds-hex-dark-text-disabled: #b8b8b8;
 $ds-hex-dark-text-on-brand: #ffffff;
 $ds-hex-dark-text-on-business: #ffffff;
 $ds-hex-dark-text-on-critical: #ffffff;
 $ds-hex-dark-text-on-success: #ffffff;
-$ds-hex-dark-text-brand: #FD2330;
-$ds-hex-dark-text-body-link: #65A0FC;
-$ds-hex-dark-text-body-link-visited: #65A0FC;
-$ds-hex-dark-text-positive: #3A8352;
-$ds-hex-dark-icon-primary: #EDEDED;
-$ds-hex-dark-icon-primary-02: #CFCFCF;
+$ds-hex-dark-text-brand: #fd2330;
+$ds-hex-dark-text-body-link: #65a0fc;
+$ds-hex-dark-text-body-link-visited: #65a0fc;
+$ds-hex-dark-text-positive: #3a8352;
+$ds-hex-dark-text-culture: #4293d7;
+$ds-hex-dark-icon-primary: #ededed;
+$ds-hex-dark-icon-primary-02: #cfcfcf;
 $ds-hex-dark-icon-secondary: #050505;
-$ds-hex-dark-icon-critical: #FD2330;
-$ds-hex-dark-icon-disabled: #B8B8B8;
+$ds-hex-dark-icon-critical: #fd2330;
+$ds-hex-dark-icon-disabled: #b8b8b8;
 $ds-hex-dark-icon-on-brand: #141414;
 $ds-hex-dark-icon-on-critical: #ffffff;
 $ds-hex-dark-icon-on-success: #ffffff;
 $ds-hex-dark-icon-on-business: #ffffff;
-$ds-hex-dark-icon-brand: #FD2330;
-$ds-hex-dark-component-brand: #FD2330;
-$ds-hex-dark-component-business: #3A8352;
-$ds-hex-dark-component-primary: #EDEDED;
-$ds-hex-dark-component-primary-overlay: #ffffff21;
-$ds-hex-dark-component-primary-overlay-02: #9E9E9E;
+$ds-hex-dark-icon-brand: #fd2330;
+$ds-hex-dark-icon-culture: #4293d7;
+$ds-hex-dark-component-brand: #fd2330;
+$ds-hex-dark-component-business: #3a8352;
+$ds-hex-dark-component-primary: #ededed;
+$ds-hex-dark-component-primary-overlay: rgba(255, 255, 255, 0.13);
+$ds-hex-dark-component-primary-overlay-02: #9e9e9e;
 $ds-hex-dark-component-secondary: #050505;
-$ds-hex-dark-component-secondary-overlay: #08080821;
-$ds-hex-dark-component-secondary-overlay-02: #08080833;
-$ds-hex-dark-component-critical: #EF7171;
-$ds-hex-dark-component-critical-overlay: #A51D24;
+$ds-hex-dark-component-secondary-overlay: rgba(8, 8, 8, 0.13);
+$ds-hex-dark-component-secondary-overlay-02: rgba(8, 8, 8, 0.2);
+$ds-hex-dark-component-critical: #ef7171;
+$ds-hex-dark-component-critical-overlay: #a51d24;
 $ds-hex-dark-component-static-white: #ffffff;
-$ds-hex-dark-component-positive: #3A8352;
-$ds-hex-dark-component-primary-02: #CFCFCF;
-$ds-hex-dark-surface-below: #262626;
+$ds-hex-dark-component-positive: #3a8352;
+$ds-hex-dark-component-primary-02: #cfcfcf;
+$ds-hex-dark-surface-below: #171717;
 $ds-hex-dark-surface-background: #050505;
-$ds-hex-dark-surface-raised: #2B2B2B;
-$ds-hex-dark-surface-native-article: #2B2B2B;
-$ds-hex-dark-surface-elevated: #2B2B2B;
+$ds-hex-dark-surface-raised: #2b2b2b;
+$ds-hex-dark-surface-native-article: #2b2b2b;
+$ds-hex-dark-surface-elevated: #2b2b2b;
 $ds-hex-dark-surface-inverted: #ffffff;
-$ds-hex-dark-surface-overlay: #05050580;
-$ds-hex-dark-surface-quiz: #EA3E3F;
-$ds-hex-dark-surface-korsord: #8BB6E8;
-$ds-hex-dark-surface-sudoko: #90D0BD;
-$ds-hex-dark-surface-brand: #DA000D;
-$ds-hex-dark-border-primary: #3B3B3B;
-$ds-hex-dark-border-primary-02: #ffffff66;
-$ds-hex-dark-border-primary-03: #EDEDED;
+$ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
+$ds-hex-dark-surface-quiz: #ea3e3f;
+$ds-hex-dark-surface-korsord: #8bb6e8;
+$ds-hex-dark-surface-sudoko: #90d0bd;
+$ds-hex-dark-surface-brand: #da000d;
+$ds-hex-dark-surface-breaking: #300407;
+$ds-hex-dark-border-primary: rgba(255, 255, 255, 0.19);
+$ds-hex-dark-border-primary-02: rgba(255, 255, 255, 0.4);
+$ds-hex-dark-border-primary-03: #ededed;
 $ds-hex-dark-border-secondary: #141414;
-$ds-hex-dark-border-business: #3A8352;
-$ds-hex-dark-border-critical: #FD2330;
-$ds-hex-dark-border-focus: #FD2330;
+$ds-hex-dark-border-business: #3a8352;
+$ds-hex-dark-border-critical: #fd2330;
+$ds-hex-dark-border-focus: #fd2330;
 $ds-hex-dark-border-focus-02: #ffffff;
-$ds-hex-dark-border-focus-03: #FD2330;
-$ds-hex-dark-border-focus-04: #3A8352;
-$ds-hex-dark-border-brand: #DA000D;
+$ds-hex-dark-border-focus-03: #fd2330;
+$ds-hex-dark-border-focus-04: #3a8352;
+$ds-hex-dark-border-brand: #fd2330;
+$ds-hex-dark-border-culture: #4293d7;
 $ds-hex-dark-background-primary: #141414;
 $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
-$ds-hex-dark-static-red-100: #FAD4D4;
+$ds-hex-dark-static-red-100: #fad4d4;
 $ds-hex-dark-static-black: #141414;
-$ds-hex-dark-static-transparent-black: #14141499;
+$ds-hex-dark-static-transparent-black: rgba(20, 20, 20, 0.6);
 $ds-hex-dark-static-white: #ffffff;
-$ds-hex-dark-static-transparent-white: #ffffff80;
-$ds-hex-dark-static-green-100: #CEE4D6;
-$ds-hex-dark-static-red-300: #EF7171;
-$ds-hex-dark-static-transparent-white-10: #ffffff21;
-$ds-hex-dark-static-kultur: #568CBB;
-$ds-hex-dark-static-economy: #60BCA1;
-$ds-hex-dark-static-sport: #F58D2D;
-$ds-hex-dark-static-neutral-200: #E0E0E0;
-$ds-hex-dark-static-sthlm: #FF589B;
-$ds-hex-dark-static-ad-yellow: #FFEAC2;
-$ds-hex-dark-static-neutral-100: #EDEDED;
-$ds-hex-dark-static-neutral-500: #9E9E9E;
-$ds-hex-dark-static-red-500: #DA000D;
-$ds-hex-dark-static-yellow: #FFE600;
-$ds-hex-dark-static-red-200: #F6ACAD;
-$ds-hex-dark-static-red-0: #FCE8E8;
+$ds-hex-dark-static-transparent-white: rgba(255, 255, 255, 0.5);
+$ds-hex-dark-static-green-100: #cee4d6;
+$ds-hex-dark-static-red-300: #ef7171;
+$ds-hex-dark-static-transparent-white-10: rgba(255, 255, 255, 0.13);
+$ds-hex-dark-static-kultur: #568cbb;
+$ds-hex-dark-static-economy: #60bca1;
+$ds-hex-dark-static-sport: #f58d2d;
+$ds-hex-dark-static-neutral-200: #e0e0e0;
+$ds-hex-dark-static-sthlm: #ff589b;
+$ds-hex-dark-static-ad-yellow: #ffeac2;
+$ds-hex-dark-static-neutral-100: #ededed;
+$ds-hex-dark-static-neutral-500: #9e9e9e;
+$ds-hex-dark-static-red-500: #da000d;
+$ds-hex-dark-static-yellow: #ffe600;
+$ds-hex-dark-static-red-200: #f6acad;
+$ds-hex-dark-static-red-0: #fce8e8;

package/foundations/variables/colorsDnLightTokens.scss

@@ -1,82 +1,86 @@
 $ds-hex-text-primary: #050505;
 $ds-hex-text-primary-02: #666666;
 $ds-hex-text-secondary: #ffffff;
-$ds-hex-text-critical: #DA000D;
+$ds-hex-text-critical: #da000d;
 $ds-hex-text-disabled: #666666;
 $ds-hex-text-on-brand: #ffffff;
 $ds-hex-text-on-business: #ffffff;
 $ds-hex-text-on-critical: #ffffff;
 $ds-hex-text-on-success: #ffffff;
-$ds-hex-text-brand: #DA000D;
-$ds-hex-text-body-link: #4373CE;
-$ds-hex-text-body-link-visited: #4373CE;
-$ds-hex-text-positive: #3A8352;
+$ds-hex-text-brand: #da000d;
+$ds-hex-text-body-link: #4373ce;
+$ds-hex-text-body-link-visited: #4373ce;
+$ds-hex-text-positive: #3a8352;
+$ds-hex-text-culture: #227ac3;
 $ds-hex-icon-primary: #050505;
 $ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
-$ds-hex-icon-critical: #DA000D;
+$ds-hex-icon-critical: #da000d;
 $ds-hex-icon-disabled: #666666;
 $ds-hex-icon-on-brand: #ffffff;
 $ds-hex-icon-on-business: #ffffff;
-$ds-hex-icon-brand: #DA000D;
+$ds-hex-icon-brand: #da000d;
 $ds-hex-icon-on-critical: #ffffff;
 $ds-hex-icon-on-success: #ffffff;
-$ds-hex-component-brand: #DA000D;
-$ds-hex-component-business: #3A8352;
+$ds-hex-icon-culture: #227ac3;
+$ds-hex-component-brand: #da000d;
+$ds-hex-component-business: #3a8352;
 $ds-hex-component-primary: #141414;
-$ds-hex-component-primary-overlay: #08080821;
-$ds-hex-component-primary-overlay-02: #08080833;
+$ds-hex-component-primary-overlay: rgba(8, 8, 8, 0.13);
+$ds-hex-component-primary-overlay-02: rgba(8, 8, 8, 0.2);
 $ds-hex-component-secondary: #ffffff;
-$ds-hex-component-secondary-overlay: #ffffff21;
-$ds-hex-component-secondary-overlay-02: #ffffff33;
-$ds-hex-component-critical: #EA3E3F;
-$ds-hex-component-critical-overlay: #A51D24;
+$ds-hex-component-secondary-overlay: rgba(255, 255, 255, 0.13);
+$ds-hex-component-secondary-overlay-02: rgba(255, 255, 255, 0.2);
+$ds-hex-component-critical: #ea3e3f;
+$ds-hex-component-critical-overlay: #a51d24;
 $ds-hex-component-static-white: #ffffff;
-$ds-hex-component-positive: #3A8352;
-$ds-hex-component-primary-02: #CFCFCF;
-$ds-hex-surface-below: #EDEDED;
-$ds-hex-surface-native-article: #EDEDED;
+$ds-hex-component-positive: #3a8352;
+$ds-hex-component-primary-02: #cfcfcf;
+$ds-hex-surface-below: #f2f2f2;
+$ds-hex-surface-native-article: #ededed;
 $ds-hex-surface-background: #ffffff;
-$ds-hex-surface-raised: #EDEDED;
+$ds-hex-surface-raised: #ededed;
 $ds-hex-surface-elevated: #ffffff;
-$ds-hex-surface-overlay: #05050580;
-$ds-hex-surface-quiz: #EA3E3F;
-$ds-hex-surface-korsord: #8BB6E8;
-$ds-hex-surface-sudoko: #90D0BD;
-$ds-hex-surface-brand: #DA000D;
+$ds-hex-surface-overlay: rgba(5, 5, 5, 0.5);
+$ds-hex-surface-quiz: #ea3e3f;
+$ds-hex-surface-korsord: #8bb6e8;
+$ds-hex-surface-sudoko: #90d0bd;
+$ds-hex-surface-brand: #da000d;
 $ds-hex-surface-inverted: #141414;
-$ds-hex-border-primary: #08080821;
-$ds-hex-border-primary-02: #08080866;
+$ds-hex-surface-breaking: #300407;
+$ds-hex-border-primary: rgba(5, 5, 5, 0.13);
+$ds-hex-border-primary-02: rgba(8, 8, 8, 0.4);
 $ds-hex-border-primary-03: #050505;
 $ds-hex-border-secondary: #ffffff;
-$ds-hex-border-business: #3A8352;
-$ds-hex-border-critical: #DA000D;
-$ds-hex-border-focus: #DA000D;
+$ds-hex-border-business: #3a8352;
+$ds-hex-border-critical: #da000d;
+$ds-hex-border-focus: #da000d;
 $ds-hex-border-focus-02: #141414;
-$ds-hex-border-focus-03: #DA000D;
-$ds-hex-border-focus-04: #3A8352;
-$ds-hex-border-brand: #DA000D;
+$ds-hex-border-focus-03: #da000d;
+$ds-hex-border-focus-04: #3a8352;
+$ds-hex-border-brand: #da000d;
+$ds-hex-border-culture: #227ac3;
 $ds-hex-background-primary: #ffffff;
-$ds-hex-static-red-100: #FAD4D4;
+$ds-hex-static-red-100: #fad4d4;
 $ds-hex-static-black: #141414;
-$ds-hex-static-transparent-black: #14141499;
+$ds-hex-static-transparent-black: rgba(20, 20, 20, 0.6);
 $ds-hex-static-white: #ffffff;
-$ds-hex-static-transparent-white: #ffffff80;
-$ds-hex-static-green-100: #CEE4D6;
-$ds-hex-static-red-300: #EF7171;
-$ds-hex-static-transparent-white-10: #ffffff21;
-$ds-hex-static-kultur: #568CBB;
-$ds-hex-static-economy: #60BCA1;
-$ds-hex-static-sport: #F58D2D;
-$ds-hex-static-neutral-200: #E0E0E0;
-$ds-hex-static-sthlm: #FF589B;
-$ds-hex-static-ad-yellow: #FFEAC2;
-$ds-hex-static-neutral-100: #EDEDED;
-$ds-hex-static-neutral-500: #9E9E9E;
-$ds-hex-static-red-500: #DA000D;
-$ds-hex-static-yellow: #FFE600;
-$ds-hex-static-red-200: #F6ACAD;
-$ds-hex-static-red-0: #FCE8E8;
+$ds-hex-static-transparent-white: rgba(255, 255, 255, 0.5);
+$ds-hex-static-green-100: #cee4d6;
+$ds-hex-static-red-300: #ef7171;
+$ds-hex-static-transparent-white-10: rgba(255, 255, 255, 0.13);
+$ds-hex-static-kultur: #568cbb;
+$ds-hex-static-economy: #60bca1;
+$ds-hex-static-sport: #f58d2d;
+$ds-hex-static-neutral-200: #e0e0e0;
+$ds-hex-static-sthlm: #ff589b;
+$ds-hex-static-ad-yellow: #ffeac2;
+$ds-hex-static-neutral-100: #ededed;
+$ds-hex-static-neutral-500: #9e9e9e;
+$ds-hex-static-red-500: #da000d;
+$ds-hex-static-yellow: #ffe600;
+$ds-hex-static-red-200: #f6acad;
+$ds-hex-static-red-0: #fce8e8;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/metrics.scss

@@ -1,7 +1,8 @@
 $metrics: (
   border-radius: (
     x1: 2,
-    x2: 4
+    x2: 4,
+    lg: 8
   ),
   border-width: (
     x1: 1,

package/foundations/variables/typographyFontWeight.scss

@@ -2,3 +2,4 @@ $ds-fontweight-regular: Regular;
 $ds-fontweight-medium: Medium;
 $ds-fontweight-semibold: SemiBold;
 $ds-fontweight-bold: Bold;
+$ds-fontweight-extrabold: ExtraBold;

package/foundations/variables/typographyTokensList.scss

@@ -15,6 +15,7 @@ $ds-typography-detaildirekt-header: 'detaildirekt-header';
 $ds-typography-detailteaser-standard-compact: 'detailteaser-standard-compact';
 $ds-typography-detailteaser-standard-compact-opinion: 'detailteaser-standard-compact-opinion';
 $ds-typography-detailteaser-large: 'detailteaser-large';
+$ds-typography-detailteaser-breaking: 'detailteaser-breaking';
 $ds-typography-detailteaser-large-opinion: 'detailteaser-large-opinion';
 $ds-typography-detailteaser-large-storRubrik: 'detailteaser-large-storRubrik';
 $ds-typography-detailteaser-standard: 'detailteaser-standard';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -54,15 +54,22 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 56,
+    fontSize: 48,
+    letterSpacing: 0
+  ),
+  detailteaser-breaking: (
+    fontFamily: "DN Serif Display",
+    fontWeight: ExtraBold,
+    lineHeight: 1.1,
+    fontSize: 64,
     letterSpacing: 0
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
-    fontSize: 36,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold
+    fontWeight: Bold,
+    fontSize: 28
   ),
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
@@ -74,7 +81,7 @@ $typographyTokensScreenExtraLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 40,
+    fontSize: 36,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -93,6 +93,13 @@ $typographyTokensScreenLarge: (
     fontSize: 40,
     letterSpacing: 0
   ),
+  detailteaser-breaking: (
+    fontFamily: "DN Serif Display",
+    fontWeight: ExtraBold,
+    lineHeight: 1.1,
+    fontSize: 64,
+    letterSpacing: 0
+  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
@@ -110,10 +117,10 @@ $typographyTokensScreenLarge: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
-    fontSize: 26,
     lineHeight: 1.1,
     letterSpacing: 0,
-    fontWeight: Bold
+    fontWeight: Bold,
+    fontSize: 28
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -133,7 +140,7 @@ $typographyTokensScreenLarge: (
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 40,
+    fontSize: 32,
     lineHeight: 1.1,
     letterSpacing: 0
   ),

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -122,6 +122,13 @@ $typographyTokensScreenSmall: (
     fontSize: 26,
     letterSpacing: 0
   ),
+  detailteaser-breaking: (
+    fontFamily: "DN Serif Display",
+    fontWeight: ExtraBold,
+    lineHeight: 1.1,
+    fontSize: 36,
+    letterSpacing: 0
+  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
@@ -139,10 +146,10 @@ $typographyTokensScreenSmall: (
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
-    fontSize: 20,
     lineHeight: 1.2,
     letterSpacing: 0,
-    fontWeight: Bold
+    fontWeight: Bold,
+    fontSize: 20
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
@@ -156,14 +163,14 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     lineHeight: 1.2,
-    fontSize: 17,
+    fontSize: 18,
     letterSpacing: 0
   ),
   detailteaser-large-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    fontSize: 26,
-    lineHeight: 1.1,
+    fontSize: 20,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   detailteaser-large-compact-opinion: (
@@ -205,7 +212,7 @@ $typographyTokensScreenSmall: (
   detailteaser-tipsa: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    fontSize: 17,
+    fontSize: 18,
     lineHeight: 1.2,
     letterSpacing: 0
   ),

package/helpers/teaser.tsx

@@ -1,9 +1,11 @@
 interface MediaProps {
   mediaHtml?: string;
+  rounded?: boolean;
 }
 
-export const Media = ({ mediaHtml }: MediaProps) => {
-  return mediaHtml && (<div className="ds-teaser__media" dangerouslySetInnerHTML={{ __html: mediaHtml }} />)
+export const Media = ({ mediaHtml, rounded }: MediaProps) => {
+  const classNames = 'ds-teaser__media' + (rounded ? ' ds-teaser__media--rounded' : '');
+  return mediaHtml && (<div className={classNames} dangerouslySetInnerHTML={{ __html: mediaHtml }} />)
 }
 
 interface ContentProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "21.1.5",
+  "version": "21.2.1-beta.0",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",

package/tokens/colors-css-variables.json

@@ -12,6 +12,7 @@
   "text-body-link": "var(--ds-color-text-body-link)",
   "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
   "text-positive": "var(--ds-color-text-positive)",
+  "text-culture": "var(--ds-color-text-culture)",
   "icon-primary": "var(--ds-color-icon-primary)",
   "icon-primary-02": "var(--ds-color-icon-primary-02)",
   "icon-secondary": "var(--ds-color-icon-secondary)",
@@ -22,6 +23,7 @@
   "icon-brand": "var(--ds-color-icon-brand)",
   "icon-on-critical": "var(--ds-color-icon-on-critical)",
   "icon-on-success": "var(--ds-color-icon-on-success)",
+  "icon-culture": "var(--ds-color-icon-culture)",
   "component-brand": "var(--ds-color-component-brand)",
   "component-business": "var(--ds-color-component-business)",
   "component-primary": "var(--ds-color-component-primary)",
@@ -46,6 +48,7 @@
   "surface-sudoko": "var(--ds-color-surface-sudoko)",
   "surface-brand": "var(--ds-color-surface-brand)",
   "surface-inverted": "var(--ds-color-surface-inverted)",
+  "surface-breaking": "var(--ds-color-surface-breaking)",
   "border-primary": "var(--ds-color-border-primary)",
   "border-primary-02": "var(--ds-color-border-primary-02)",
   "border-primary-03": "var(--ds-color-border-primary-03)",
@@ -57,6 +60,7 @@
   "border-focus-03": "var(--ds-color-border-focus-03)",
   "border-focus-04": "var(--ds-color-border-focus-04)",
   "border-brand": "var(--ds-color-border-brand)",
+  "border-culture": "var(--ds-color-border-culture)",
   "background-primary": "var(--ds-color-background-primary)",
   "static-red-100": "var(--ds-color-static-red-100)",
   "static-black": "var(--ds-color-static-black)",
@@ -82,4 +86,4 @@
   "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
   "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",
   "gradient-content-fade-down": "var(--ds-color-gradient-content-fade-down)"
-}
+}