@odx/ui 3.6.0 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 3.7.0
+
+### Minor Changes
+
+- 8d72579: Added headline classes styling
+
 ## 3.6.0
 
 ### Minor Changes

package/core-theme.css

@@ -676,6 +676,69 @@ html body {
   font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)*1/var(--odx-typography-negative-font-scaling-factor)));
 }
 
+.odx-headline,
+[class*=odx-headline-] {
+  color: var(--odx-c-headline);
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+}
+
+.odx-headline-sm {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.6667);
+  font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-sm {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
+  }
+}
+
+.odx-headline-md {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.75);
+  font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-md {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 3.3334);
+  }
+}
+
+.odx-headline-lg {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.0417);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0417);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 1.9167);
+  font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-lg {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 4.0834);
+  }
+}
+
+.odx-headline-xl {
+  padding-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  line-height: calc(var(--odx-vertical-rythm-base-size) * 2);
+  font-size: calc(var(--odx-typography-base-size) * (1*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)*var(--odx-typography-positive-font-scaling-factor)));
+}
+@media (min-width: 480px) {
+  .odx-headline-xl {
+    padding-top: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.4584);
+    line-height: calc(var(--odx-vertical-rythm-base-size) * 4.0834);
+  }
+}
+
 .odx-text-list, .odx-content ol,
 .odx-content ul,
 .odx-text-list ol,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/layout/_typography.scss

@@ -112,3 +112,46 @@ html body {
     @include typography.font-size(-2);
   }
 }
+
+.odx-headline,
+[class*='odx-headline-'] {
+  color: var(--odx-c-headline);
+
+  @include typography.font-weight(normal);
+}
+
+.odx-headline-sm {
+  @include dimensions.line-height(2, math.div(40, 24));
+  @include typography.font-size(5);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(3, math.div(64, 24));
+  }
+}
+
+.odx-headline-md {
+  @include dimensions.line-height(2, math.div(42, 24));
+  @include typography.font-size(6);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(4, math.div(80, 24));
+  }
+}
+
+.odx-headline-lg {
+  @include dimensions.line-height(2, math.div(46, 24));
+  @include typography.font-size(7);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(5, math.div(98, 24));
+  }
+}
+
+.odx-headline-xl {
+  @include dimensions.line-height(2);
+  @include typography.font-size(8);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.line-height(5, math.div(98, 24));
+  }
+}