@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/heading/heading.styles.js

@@ -0,0 +1,907 @@
+import { css } from 'lit';
+const styles = css `@charset "UTF-8";
+.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  font-family: var(--cre8-typography-body-default-font-family);
+  font-size: var(--cre8-typography-body-default-font-size);
+  font-weight: var(--cre8-typography-body-default-font-weight);
+  line-height: var(--cre8-typography-body-default-line-height);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: inline;
+  text-align: left;
+}
+
+/**
+ * DefaultHeading component styling/Heading title-large
+ */
+.cre8-c-heading,
+.cre8-c-heading--title-large {
+  font-family: var(--cre8-typography-title-large-mobile-font-family);
+  font-size: var(--cre8-typography-title-large-mobile-font-size);
+  font-weight: var(--cre8-typography-title-large-mobile-font-weight);
+  line-height: var(--cre8-typography-title-large-mobile-line-height);
+  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);
+  text-transform: var(--cre8-typography-title-large-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading,
+  .cre8-c-heading--title-large {
+    font-family: var(--cre8-typography-title-large-font-family);
+    font-size: var(--cre8-typography-title-large-font-size);
+    font-weight: var(--cre8-typography-title-large-font-weight);
+    line-height: var(--cre8-typography-title-large-line-height);
+    text-decoration: var(--cre8-typography-title-large-text-decoration);
+    text-transform: var(--cre8-typography-title-large-text-transform);
+  }
+}
+.cre8-c-heading,
+.cre8-c-heading--title-large {
+  margin: 0;
+  color: var(--cre8-color-content-default);
+}
+
+/**
+ * Heading with theme headline-large preset applied
+ */
+.cre8-c-heading--headline-large {
+  font-family: var(--cre8-typography-headline-large-mobile-font-family);
+  font-size: var(--cre8-typography-headline-large-mobile-font-size);
+  font-weight: var(--cre8-typography-headline-large-mobile-font-weight);
+  line-height: var(--cre8-typography-headline-large-mobile-line-height);
+  text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);
+  text-transform: var(--cre8-typography-headline-large-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--headline-large {
+    font-family: var(--cre8-typography-headline-large-font-family);
+    font-size: var(--cre8-typography-headline-large-font-size);
+    font-weight: var(--cre8-typography-headline-large-font-weight);
+    line-height: var(--cre8-typography-headline-large-line-height);
+    text-decoration: var(--cre8-typography-headline-large-text-decoration);
+    text-transform: var(--cre8-typography-headline-large-text-transform);
+  }
+}
+
+/**
+ * Heading with theme headline-default preset applied
+ */
+.cre8-c-heading--headline-default {
+  font-family: var(--cre8-typography-headline-default-mobile-font-family);
+  font-size: var(--cre8-typography-headline-default-mobile-font-size);
+  font-weight: var(--cre8-typography-headline-default-mobile-font-weight);
+  line-height: var(--cre8-typography-headline-default-mobile-line-height);
+  text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);
+  text-transform: var(--cre8-typography-headline-default-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--headline-default {
+    font-family: var(--cre8-typography-headline-default-font-family);
+    font-size: var(--cre8-typography-headline-default-font-size);
+    font-weight: var(--cre8-typography-headline-default-font-weight);
+    line-height: var(--cre8-typography-headline-default-line-height);
+    text-decoration: var(--cre8-typography-headline-default-text-decoration);
+    text-transform: var(--cre8-typography-headline-default-text-transform);
+  }
+}
+
+/**
+ * Heading with theme headline-small preset applied
+ */
+.cre8-c-heading--headline-small {
+  font-family: var(--cre8-typography-headline-small-mobile-font-family);
+  font-size: var(--cre8-typography-headline-small-mobile-font-size);
+  font-weight: var(--cre8-typography-headline-small-mobile-font-weight);
+  line-height: var(--cre8-typography-headline-small-mobile-line-height);
+  text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);
+  text-transform: var(--cre8-typography-headline-small-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--headline-small {
+    font-family: var(--cre8-typography-headline-small-font-family);
+    font-size: var(--cre8-typography-headline-small-font-size);
+    font-weight: var(--cre8-typography-headline-small-font-weight);
+    line-height: var(--cre8-typography-headline-small-line-height);
+    text-decoration: var(--cre8-typography-headline-small-text-decoration);
+    text-transform: var(--cre8-typography-headline-small-text-transform);
+  }
+}
+
+/**
+ * Heading with theme title-xlarge preset applied
+ */
+.cre8-c-heading--title-xlarge {
+  font-family: var(--cre8-typography-title-xlarge-mobile-font-family);
+  font-size: var(--cre8-typography-title-xlarge-mobile-font-size);
+  font-weight: var(--cre8-typography-title-xlarge-mobile-font-weight);
+  line-height: var(--cre8-typography-title-xlarge-mobile-line-height);
+  text-decoration: var(--cre8-typography-title-xlarge-mobile-text-decoration);
+  text-transform: var(--cre8-typography-title-xlarge-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--title-xlarge {
+    font-family: var(--cre8-typography-title-xlarge-font-family);
+    font-size: var(--cre8-typography-title-xlarge-font-size);
+    font-weight: var(--cre8-typography-title-xlarge-font-weight);
+    line-height: var(--cre8-typography-title-xlarge-line-height);
+    text-decoration: var(--cre8-typography-title-xlarge-text-decoration);
+    text-transform: var(--cre8-typography-title-xlarge-text-transform);
+  }
+}
+
+/**
+ * Heading with theme title-large preset applied
+ */
+.cre8-c-heading--title-large {
+  font-family: var(--cre8-typography-title-large-mobile-font-family);
+  font-size: var(--cre8-typography-title-large-mobile-font-size);
+  font-weight: var(--cre8-typography-title-large-mobile-font-weight);
+  line-height: var(--cre8-typography-title-large-mobile-line-height);
+  text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);
+  text-transform: var(--cre8-typography-title-large-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--title-large {
+    font-family: var(--cre8-typography-title-large-font-family);
+    font-size: var(--cre8-typography-title-large-font-size);
+    font-weight: var(--cre8-typography-title-large-font-weight);
+    line-height: var(--cre8-typography-title-large-line-height);
+    text-decoration: var(--cre8-typography-title-large-text-decoration);
+    text-transform: var(--cre8-typography-title-large-text-transform);
+  }
+}
+
+/**
+ * Heading with theme title-default preset applied
+ */
+.cre8-c-heading--title-default {
+  font-family: var(--cre8-typography-title-default-mobile-font-family);
+  font-size: var(--cre8-typography-title-default-mobile-font-size);
+  font-weight: var(--cre8-typography-title-default-mobile-font-weight);
+  line-height: var(--cre8-typography-title-default-mobile-line-height);
+  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);
+  text-transform: var(--cre8-typography-title-default-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--title-default {
+    font-family: var(--cre8-typography-title-default-font-family);
+    font-size: var(--cre8-typography-title-default-font-size);
+    font-weight: var(--cre8-typography-title-default-font-weight);
+    line-height: var(--cre8-typography-title-default-line-height);
+    text-decoration: var(--cre8-typography-title-default-text-decoration);
+    text-transform: var(--cre8-typography-title-default-text-transform);
+  }
+}
+
+/**
+ * Heading with theme title-small preset applied
+ */
+.cre8-c-heading--title-small {
+  font-family: var(--cre8-typography-title-small-mobile-font-family);
+  font-size: var(--cre8-typography-title-small-mobile-font-size);
+  font-weight: var(--cre8-typography-title-small-mobile-font-weight);
+  line-height: var(--cre8-typography-title-small-mobile-line-height);
+  text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);
+  text-transform: var(--cre8-typography-title-small-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--title-small {
+    font-family: var(--cre8-typography-title-small-font-family);
+    font-size: var(--cre8-typography-title-small-font-size);
+    font-weight: var(--cre8-typography-title-small-font-weight);
+    line-height: var(--cre8-typography-title-small-line-height);
+    text-decoration: var(--cre8-typography-title-small-text-decoration);
+    text-transform: var(--cre8-typography-title-small-text-transform);
+  }
+}
+
+/**
+ * Heading with theme display-small preset applied
+ */
+.cre8-c-heading--display-small {
+  font-family: var(--cre8-typography-display-small-mobile-font-family);
+  font-size: var(--cre8-typography-display-small-mobile-font-size);
+  font-weight: var(--cre8-typography-display-small-mobile-font-weight);
+  line-height: var(--cre8-typography-display-small-mobile-line-height);
+  text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);
+  text-transform: var(--cre8-typography-display-small-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--display-small {
+    font-family: var(--cre8-typography-display-small-font-family);
+    font-size: var(--cre8-typography-display-small-font-size);
+    font-weight: var(--cre8-typography-display-small-font-weight);
+    line-height: var(--cre8-typography-display-small-line-height);
+    text-decoration: var(--cre8-typography-display-small-text-decoration);
+    text-transform: var(--cre8-typography-display-small-text-transform);
+  }
+}
+
+/**
+ * Heading with theme display-default preset applied
+ */
+.cre8-c-heading--display-default {
+  font-family: var(--cre8-typography-display-default-mobile-font-family);
+  font-size: var(--cre8-typography-display-default-mobile-font-size);
+  font-weight: var(--cre8-typography-display-default-mobile-font-weight);
+  line-height: var(--cre8-typography-display-default-mobile-line-height);
+  text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);
+  text-transform: var(--cre8-typography-display-default-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-heading--display-default {
+    font-family: var(--cre8-typography-display-default-font-family);
+    font-size: var(--cre8-typography-display-default-font-size);
+    font-weight: var(--cre8-typography-display-default-font-weight);
+    line-height: var(--cre8-typography-display-default-line-height);
+    text-decoration: var(--cre8-typography-display-default-text-decoration);
+    text-transform: var(--cre8-typography-display-default-text-transform);
+  }
+}
+
+/**
+ * Heading with theme label-large preset applied
+ */
+.cre8-c-heading--label-large {
+  font-family: var(--cre8-typography-label-large-font-family);
+  font-size: var(--cre8-typography-label-large-font-size);
+  font-weight: var(--cre8-typography-label-large-font-weight);
+  line-height: var(--cre8-typography-label-large-line-height);
+  text-decoration: var(--cre8-typography-label-large-text-decoration);
+  text-transform: var(--cre8-typography-label-large-text-transform);
+}
+
+/**
+ * Heading with theme label-default preset applied
+ */
+.cre8-c-heading--label-default {
+  font-family: var(--cre8-typography-label-default-font-family);
+  font-size: var(--cre8-typography-label-default-font-size);
+  font-weight: var(--cre8-typography-label-default-font-weight);
+  line-height: var(--cre8-typography-label-default-line-height);
+  text-decoration: var(--cre8-typography-label-default-text-decoration);
+  text-transform: var(--cre8-typography-label-default-text-transform);
+}
+
+/**
+ * Heading with theme label-small preset applied
+ */
+.cre8-c-heading--label-small {
+  font-family: var(--cre8-typography-label-small-font-family);
+  font-size: var(--cre8-typography-label-small-font-size);
+  font-weight: var(--cre8-typography-label-small-font-weight);
+  line-height: var(--cre8-typography-label-small-line-height);
+  text-decoration: var(--cre8-typography-label-small-text-decoration);
+  text-transform: var(--cre8-typography-label-small-text-transform);
+}
+
+/**
+ * Heading with theme meta-default preset applied
+ */
+.cre8-c-heading--meta-large {
+  font-family: var(--cre8-typography-meta-large-font-family);
+  font-size: var(--cre8-typography-meta-large-font-size);
+  font-weight: var(--cre8-typography-meta-large-font-weight);
+  line-height: var(--cre8-typography-meta-large-line-height);
+  text-decoration: var(--cre8-typography-meta-large-text-decoration);
+  text-transform: var(--cre8-typography-meta-large-text-transform);
+  text-transform: uppercase;
+}
+
+/**
+ * Heading with theme meta-default preset applied
+ */
+.cre8-c-heading--meta-default {
+  font-family: var(--cre8-typography-meta-default-font-family);
+  font-size: var(--cre8-typography-meta-default-font-size);
+  font-weight: var(--cre8-typography-meta-default-font-weight);
+  line-height: var(--cre8-typography-meta-default-line-height);
+  text-decoration: var(--cre8-typography-meta-default-text-decoration);
+  text-transform: var(--cre8-typography-meta-default-text-transform);
+  text-transform: uppercase;
+}
+
+/**
+ * Heading with theme meta-small preset applied
+ */
+.cre8-c-heading--meta-small {
+  font-family: var(--cre8-typography-meta-small-font-family);
+  font-size: var(--cre8-typography-meta-small-font-size);
+  font-weight: var(--cre8-typography-meta-small-font-weight);
+  line-height: var(--cre8-typography-meta-small-line-height);
+  text-decoration: var(--cre8-typography-meta-small-text-decoration);
+  text-transform: var(--cre8-typography-meta-small-text-transform);
+  text-transform: uppercase;
+}
+
+/**
+ * Heading with brand color applied
+ */
+.cre8-c-heading--brand-color {
+  color: var(--cre8-color-content-brand-strong);
+}
+.cre8-c-heading--brand-color.cre8-c-heading--inverted {
+  color: var(--cre8-color-content-brand-knockout);
+}
+
+.cre8-c-heading--inverted {
+  color: var(--cre8-color-content-knockout);
+}`;
+export default styles;
+//# sourceMappingURL=heading.styles.js.map