npm - @tmorrow/cre8-wc - Versions diffs - 1.1.3 → 1.1.6 - Mend

@tmorrow/cre8-wc 1.1.3 → 1.1.6

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 (257) hide show

package/lib/design-tokens/brands/legacy/css/tokens_legacy.css ADDED Viewed

@@ -0,0 +1,250 @@
+@import './fonts.css';
+@import './tokens_brand.css';
+:root{--cre8-typography-body-xlarge-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-xlarge-font-size: var(--cre8-font-size-5);
+      --cre8-typography-body-xlarge-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-xlarge-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-body-xlarge-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-xlarge-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-xlarge-strong-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-xlarge-strong-font-size: var(--cre8-font-size-5);
+      --cre8-typography-body-xlarge-strong-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-body-xlarge-strong-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-body-xlarge-strong-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-xlarge-strong-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-xlarge-link-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-xlarge-link-font-size: var(--cre8-font-size-5);
+      --cre8-typography-body-xlarge-link-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-body-xlarge-link-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-body-xlarge-link-text-decoration: var(--cre8-text-decoration-underline);
+      --cre8-typography-body-xlarge-link-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-large-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-large-font-size: var(--cre8-font-size-4);
+      --cre8-typography-body-large-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-large-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-body-large-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-large-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-large-strong-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-large-strong-font-size: var(--cre8-font-size-4);
+      --cre8-typography-body-large-strong-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-body-large-strong-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-body-large-strong-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-large-strong-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-default-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-default-font-size: var(--cre8-font-size-2);
+      --cre8-typography-body-default-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-default-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-body-default-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-default-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-default-strong-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-default-strong-font-size: var(--cre8-font-size-2);
+      --cre8-typography-body-default-strong-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-body-default-strong-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-body-default-strong-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-default-strong-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-small-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-small-font-size: var(--cre8-font-size-0);
+      --cre8-typography-body-small-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-small-line-height: var(--cre8-line-heights-6);
+      --cre8-typography-body-small-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-small-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-small-strong-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-small-strong-font-size: var(--cre8-font-size-0);
+      --cre8-typography-body-small-strong-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-body-small-strong-line-height: var(--cre8-line-heights-6);
+      --cre8-typography-body-small-strong-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-body-small-strong-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-large-link-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-large-link-font-size: var(--cre8-font-size-4);
+      --cre8-typography-body-large-link-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-large-link-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-body-large-link-text-decoration: var(--cre8-text-decoration-underline);
+      --cre8-typography-body-large-link-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-default-link-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-default-link-font-size: var(--cre8-font-size-2);
+      --cre8-typography-body-default-link-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-default-link-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-body-default-link-text-decoration: var(--cre8-text-decoration-underline);
+      --cre8-typography-body-default-link-text-transform: var(--cre8-text-case-none);
+--cre8-typography-body-small-link-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-body-small-link-font-size: var(--cre8-font-size-0);
+      --cre8-typography-body-small-link-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-body-small-link-line-height: var(--cre8-line-heights-6);
+      --cre8-typography-body-small-link-text-decoration: var(--cre8-text-decoration-underline);
+      --cre8-typography-body-small-link-text-transform: var(--cre8-text-case-none);
+--cre8-typography-label-default-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-label-default-font-size: var(--cre8-font-size-2);
+      --cre8-typography-label-default-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-label-default-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-label-default-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-label-default-text-transform: var(--cre8-text-case-none);
+--cre8-typography-label-large-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-label-large-font-size: var(--cre8-font-size-2);
+      --cre8-typography-label-large-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-label-large-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-label-large-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-label-large-text-transform: var(--cre8-text-case-none);
+--cre8-typography-label-small-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-label-small-font-size: var(--cre8-font-size-1);
+      --cre8-typography-label-small-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-label-small-line-height: var(--cre8-line-heights-13);
+      --cre8-typography-label-small-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-label-small-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-xlarge-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-xlarge-font-size: var(--cre8-font-size-7);
+      --cre8-typography-title-xlarge-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-xlarge-line-height: var(--cre8-line-heights-3);
+      --cre8-typography-title-xlarge-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-xlarge-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-xlarge-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-xlarge-mobile-font-size: var(--cre8-font-size-5);
+      --cre8-typography-title-xlarge-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-xlarge-mobile-line-height: var(--cre8-line-heights-2);
+      --cre8-typography-title-xlarge-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-xlarge-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-large-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-large-font-size: var(--cre8-font-size-5);
+      --cre8-typography-title-large-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-large-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-title-large-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-large-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-large-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-large-mobile-font-size: var(--cre8-font-size-4);
+      --cre8-typography-title-large-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-large-mobile-line-height: var(--cre8-line-heights-11);
+      --cre8-typography-title-large-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-large-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-default-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-default-font-size: var(--cre8-font-size-4);
+      --cre8-typography-title-default-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-default-line-height: var(--cre8-line-heights-5);
+      --cre8-typography-title-default-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-default-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-default-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-default-mobile-font-size: var(--cre8-font-size-3);
+      --cre8-typography-title-default-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-default-mobile-line-height: var(--cre8-line-heights-5);
+      --cre8-typography-title-default-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-default-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-small-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-small-font-size: var(--cre8-font-size-2);
+      --cre8-typography-title-small-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-small-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-title-small-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-small-text-transform: var(--cre8-text-case-none);
+--cre8-typography-title-small-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-title-small-mobile-font-size: var(--cre8-font-size-2);
+      --cre8-typography-title-small-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-title-small-mobile-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-title-small-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-title-small-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-large-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-large-font-size: var(--cre8-font-size-9);
+      --cre8-typography-headline-large-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-large-line-height: var(--cre8-line-heights-11);
+      --cre8-typography-headline-large-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-large-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-large-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-large-mobile-font-size: var(--cre8-font-size-8);
+      --cre8-typography-headline-large-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-large-mobile-line-height: var(--cre8-line-heights-11);
+      --cre8-typography-headline-large-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-large-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-default-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-default-font-size: var(--cre8-font-size-8);
+      --cre8-typography-headline-default-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-default-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-headline-default-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-default-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-default-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-default-mobile-font-size: var(--cre8-font-size-7);
+      --cre8-typography-headline-default-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-default-mobile-line-height: var(--cre8-line-heights-12);
+      --cre8-typography-headline-default-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-default-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-small-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-small-font-size: var(--cre8-font-size-7);
+      --cre8-typography-headline-small-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-small-line-height: var(--cre8-line-heights-3);
+      --cre8-typography-headline-small-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-small-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-small-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-small-mobile-font-size: var(--cre8-font-size-6);
+      --cre8-typography-headline-small-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-small-mobile-line-height: var(--cre8-line-heights-3);
+      --cre8-typography-headline-small-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-small-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-xsmall-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-xsmall-font-size: var(--cre8-font-size-5);
+      --cre8-typography-headline-xsmall-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-xsmall-line-height: var(--cre8-line-heights-5);
+      --cre8-typography-headline-xsmall-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-xsmall-text-transform: var(--cre8-text-case-none);
+--cre8-typography-headline-xsmall-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-headline-xsmall-mobile-font-size: var(--cre8-font-size-5);
+      --cre8-typography-headline-xsmall-mobile-font-weight: var(--cre8-font-weights-rubik-1);
+      --cre8-typography-headline-xsmall-mobile-line-height: var(--cre8-line-heights-5);
+      --cre8-typography-headline-xsmall-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-headline-xsmall-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-display-large-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-display-large-font-size: var(--cre8-font-size-13);
+      --cre8-typography-display-large-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-display-large-line-height: var(--cre8-line-heights-10);
+      --cre8-typography-display-large-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-display-large-text-transform: var(--cre8-text-case-none);
+--cre8-typography-display-large-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-display-large-mobile-font-size: var(--cre8-font-size-12);
+      --cre8-typography-display-large-mobile-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-display-large-mobile-line-height: var(--cre8-line-heights-10);
+      --cre8-typography-display-large-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-display-large-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-display-default-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-display-default-font-size: var(--cre8-font-size-11);
+      --cre8-typography-display-default-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-display-default-line-height: var(--cre8-line-heights-10);
+      --cre8-typography-display-default-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-display-default-text-transform: var(--cre8-text-case-none);
+--cre8-typography-display-default-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-display-default-mobile-font-size: var(--cre8-font-size-10);
+      --cre8-typography-display-default-mobile-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-display-default-mobile-line-height: var(--cre8-line-heights-10);
+      --cre8-typography-display-default-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-display-default-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-display-small-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-display-small-font-size: var(--cre8-font-size-9);
+      --cre8-typography-display-small-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-display-small-line-height: var(--cre8-line-heights-11);
+      --cre8-typography-display-small-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-display-small-text-transform: var(--cre8-text-case-none);
+--cre8-typography-display-small-mobile-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-display-small-mobile-font-size: var(--cre8-font-size-8);
+      --cre8-typography-display-small-mobile-font-weight: var(--cre8-font-weights-rubik-0);
+      --cre8-typography-display-small-mobile-line-height: var(--cre8-line-heights-11);
+      --cre8-typography-display-small-mobile-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-display-small-mobile-text-transform: var(--cre8-text-case-none);
+--cre8-typography-meta-default-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-meta-default-font-size: var(--cre8-font-size-1);
+      --cre8-typography-meta-default-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-meta-default-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-meta-default-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-meta-default-text-transform: var(--cre8-text-case-uppercase);
+--cre8-typography-meta-large-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-meta-large-font-size: var(--cre8-font-size-2);
+      --cre8-typography-meta-large-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-meta-large-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-meta-large-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-meta-large-text-transform: var(--cre8-text-case-uppercase);
+--cre8-typography-meta-small-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-meta-small-font-size: var(--cre8-font-size-0);
+      --cre8-typography-meta-small-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-meta-small-line-height: var(--cre8-line-heights-6);
+      --cre8-typography-meta-small-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-meta-small-text-transform: var(--cre8-text-case-uppercase);
+--cre8-typography-meta-default-sentence-case-font-family: var(--cre8-font-families-rubik);
+      --cre8-typography-meta-default-sentence-case-font-size: var(--cre8-font-size-1);
+      --cre8-typography-meta-default-sentence-case-font-weight: var(--cre8-font-weights-rubik-2);
+      --cre8-typography-meta-default-sentence-case-line-height: var(--cre8-line-heights-4);
+      --cre8-typography-meta-default-sentence-case-text-decoration: var(--cre8-text-decoration-none);
+      --cre8-typography-meta-default-sentence-case-text-transform: var(--cre8-text-case-none);
+    }

package/lib/design-tokens/brands/marketing/css/fonts.css ADDED Viewed

@@ -0,0 +1,31 @@
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
+	font-display: fallback;
+}
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 500;
+	src: url('../assets/fonts/Montserrat-Medium.ttf') format('truetype');
+	font-display: fallback;
+}
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
+	font-display: fallback;
+}
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
+	font-display: fallback;
+}