@tmorrow/cre8-wc 1.1.3 → 1.1.6

package/lib/design-tokens/core/scss/utilities/colors.css

@@ -0,0 +1 @@
+.cre8-u-content-knockout-brand{color:var(----cre8-color-content-knockout-brand)}

package/lib/design-tokens/core/scss/utilities/display.css

@@ -0,0 +1 @@
+.cre8-u-display-flex{display:flex !important}.cre8-u-display-block{display:block !important}

package/lib/design-tokens/femmecubator/equity.css

@@ -0,0 +1,142 @@
+/**
+ * femmecubator: all tokens
+ */
+
+:root {
+  --cre8-color-base-color-blue-15: #b3d4f7;
+  --cre8-color-base-color-blue-25: #81b7f2;
+  --cre8-color-base-color-blue-35: #4e9aec;
+  --cre8-color-base-color-blue-50: #026fe4;
+  --cre8-color-base-color-blue-60: #0259b6;
+  --cre8-color-base-color-blue-70: #014ea0;
+  --cre8-color-base-color-blue-80: #013872;
+  --cre8-color-base-color-blue-90: #012144;
+  --cre8-color-base-color-blue-05: #e6f1fc;
+  --cre8-color-base-color-green-15: #d4efdf;
+  --cre8-color-base-color-green-30: #7dcea0;
+  --cre8-color-base-color-green-50: #00875a;
+  --cre8-color-base-color-green-70: #1f8b4d;
+  --cre8-color-base-color-green-90: #17683a;
+  --cre8-color-base-color-red-15: #fbdddd;
+  --cre8-color-base-color-red-30: #f5abab;
+  --cre8-color-base-color-red-50: #eb5757;
+  --cre8-color-base-color-red-70: #bc4646;
+  --cre8-color-base-color-red-90: #8d3434;
+  --cre8-color-base-color-yellow-20: #fae9b7;
+  --cre8-color-base-color-yellow-30: #f7df94;
+  --cre8-color-base-color-yellow-50: #f2c94c;
+  --cre8-color-base-color-yellow-70: #dab544;
+  --cre8-color-base-color-yellow-95: #30280f;
+  --cre8-color-base-color-sky-15: #c0e1f4;
+  --cre8-color-base-color-sky-30: #81c4e9;
+  --cre8-color-base-color-sky-50: #2d9cdb;
+  --cre8-color-base-color-sky-70: #247daf;
+  --cre8-color-base-color-sky-90: #174e6e;
+  --cre8-color-base-color-white: #ffffff;
+  --cre8-color-base-color-gray-10: #fafafa;
+  --cre8-color-base-color-gray-20: #efefef;
+  --cre8-color-base-color-gray-30: #e0e0e0;
+  --cre8-color-base-color-gray-40: #cfcfcf;
+  --cre8-color-base-color-gray-50: #bdbdbd;
+  --cre8-color-base-color-gray-60: #9c9c9c;
+  --cre8-color-base-color-gray-70: #828282;
+  --cre8-color-base-color-gray-80: #4f4f4f;
+  --cre8-color-base-color-gray-90: #333333;
+  --cre8-color-base-color-transparent: #ffffff00;
+  --cre8-color-base-color-wesparkle-red: #e43c4a;
+  --cre8-base-spacing-4: 4px;
+  --cre8-base-spacing-8: 8px;
+  --cre8-base-spacing-12: 12px;
+  --cre8-base-spacing-16: 16px;
+  --cre8-base-spacing-20: 20px;
+  --cre8-base-spacing-24: 28px;
+  --cre8-base-spacing-32: 36px;
+  --cre8-base-spacing-48: 48px;
+  --cre8-base-spacing-56: 56px;
+  --cre8-base-spacing-64: 64px;
+  --cre8-base-border-radius-0: 0rem;
+  --cre8-base-border-radius-4: 4px;
+  --cre8-base-border-radius-16: 16px;
+  --cre8-base-border-radius-60: 60px;
+  --cre8-base-border-radius-900: 900px;
+  --cre8-base-border-width-0: 0px;
+  --cre8-base-border-width-1: 1px;
+  --cre8-base-border-width-2: 2rem;
+  --cre8-base-border-width-4: 4px;
+  --cre8-base-border-width-6: 6px;
+  --cre8-color-bg-strong: #828282;
+  --cre8-color-bg-subtle: #333333;
+  --cre8-color-bg-default: #4f4f4f;
+  --cre8-color-bg-disabled: #e0e0e0;
+  --cre8-color-bg-brand-default: #026fe4;
+  --cre8-color-bg-brand-subtle: #e6f1fc;
+  --cre8-color-bg-brand-hover: #81b7f2;
+  --cre8-color-bg-brand-strong: #012144;
+  --cre8-color-bg-success-default: #d4efdf;
+  --cre8-color-bg-success-strong: #00875a;
+  --cre8-color-bg-error-default: #fbdddd;
+  --cre8-color-bg-error-strong: #eb5757;
+  --cre8-color-bg-warning-default: #fae9b7;
+  --cre8-color-bg-warning-strong: #f2c94c;
+  --cre8-color-bg-info-default: #c0e1f4;
+  --cre8-color-bg-info-strong: #2d9cdb;
+  --cre8-color-bg-transparent: #ffffff00;
+  --cre8-color-bg-active: #333333;
+  --cre8-color-bg-logo: #e43c4a;
+  --cre8-color-content-default: #ffffff;
+  --cre8-color-content-subtle: #4f4f4f;
+  --cre8-color-content-disabled: #9c9c9c;
+  --cre8-color-content-knockout: #ffffff;
+  --cre8-color-content-brand-default: #026fe4;
+  --cre8-color-content-brand-subtle: #e6f1fc;
+  --cre8-color-content-brand-strong: #81b7f2;
+  --cre8-color-content-success-default: #17683a;
+  --cre8-color-content-success-icon: #00875a;
+  --cre8-color-content-error-default: #8d3434;
+  --cre8-color-content-error-icon: #eb5757;
+  --cre8-color-content-warning-default: #30280f;
+  --cre8-color-content-warning-icon: #f2c94c;
+  --cre8-color-content-info-default: #174e6e;
+  --cre8-color-content-info-icon: #2d9cdb;
+  --cre8-color-content-link-default: #026fe4;
+  --cre8-color-content-link-strong: #012144;
+  --cre8-color-content-link-subtle: #4f4f4f;
+  --cre8-color-content-link-hover: #014ea0;
+  --cre8-color-border-default: #9c9c9c;
+  --cre8-color-border-strong: #4f4f4f;
+  --cre8-color-border-disabled: #9c9c9c;
+  --cre8-color-border-knockout: #ffffff;
+  --cre8-color-border-success: #00875a;
+  --cre8-color-border-error: #eb5757;
+  --cre8-color-border-warning: #f2c94c;
+  --cre8-color-border-info: #2d9cdb;
+  --cre8-color-border-transparent: #ffffff00;
+  --cre8-color-border-active: #333333;
+  --cre8-color-border-brand-default: #026fe4;
+  --cre8-color-border-brand-hover: #81b7f2;
+  --cre8-color-border-brand-strong: #014ea0;
+  --cre8-color-border-brand-subtle: #e6f1fc;
+  --cre8-color-border-divider: #4f4f4f;
+  --cre8-border-radius-none: 0rem;
+  --cre8-border-radius-small: 4px;
+  --cre8-border-radius-default: 16px;
+  --cre8-border-radius-large: 60px;
+  --cre8-border-radius-container: 60px;
+  --cre8-border-radius-round: 900px;
+  --cre8-border-width-none: 0px;
+  --cre8-border-width-thin: 1px;
+  --cre8-border-width-default: 2rem;
+  --cre8-border-width-medium: 4px;
+  --cre8-border-width-thick: 6px;
+  --cre8-border-width-focus: 2rem;
+  --cre8-spacing-3xs: 4px;
+  --cre8-spacing-2xs: 8px;
+  --cre8-spacing-xs: 12px;
+  --cre8-spacing-s: 16px;
+  --cre8-spacing-m: 20px;
+  --cre8-spacing-l: 28px;
+  --cre8-spacing-xl: 36px;
+  --cre8-spacing-2xl: 48px;
+  --cre8-spacing-3xl: 56px;
+  --cre8-spacing-4xl: 64px;
+}

package/lib/design-tokens/femmecubator/fonts.css

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

package/lib/design-tokens/femmecubator/tokens_brand.css

@@ -0,0 +1,146 @@
+:root {
+  --cre8-color-bg-brand: #035c67;
+  --cre8-color-bg-brand-hover: #024a52;
+  --cre8-color-bg-brand-strong: #035c67;
+  --cre8-color-bg-brand-strong-hover: #024a52;
+  --cre8-color-bg-brand-strong-active: #012529;
+  --cre8-color-bg-brand-xstrong: #012529;
+  --cre8-color-bg-brand-xstrong-hover: #011c1f;
+  --cre8-color-bg-brand-xstrong-active: #011c1f;
+  --cre8-color-bg-default: #ffffff;
+  --cre8-color-bg-subtle: #fbfbfa;
+  --cre8-color-bg-strong: #2d2d2d;
+  --cre8-color-bg-disabled: #eaeaea;
+  --cre8-color-bg-success: #e6f1f0;
+  --cre8-color-bg-success-strong: #007766;
+  --cre8-color-bg-error: #fdeeee;
+  --cre8-color-bg-error-strong: #bb4242;
+  --cre8-color-bg-warning: #fcf5e5;
+  --cre8-color-bg-warning-strong: #e89f12;
+  --cre8-color-bg-info: #e6eff1;
+  --cre8-color-bg-info-strong: #035c67;
+  --cre8-color-bg-attention: #e1fff5;
+  --cre8-color-bg-attention-strong: #035c67;
+  --cre8-color-bg-default-hover: #e6eff1;
+  --cre8-color-bg-opacity-transparent: rgba(45, 45, 45, 0.0);
+  --cre8-color-bg-opacity-default: rgba(45, 45, 45, 0.50);
+  --cre8-color-bg-active: #2d2d2d;
+  --cre8-color-content-default: #2d2d2d;
+  --cre8-color-content-subtle: #6c6c6c;
+  --cre8-color-content-disabled: #949494;
+  --cre8-color-content-link-disabled: #949494;
+  --cre8-color-content-knockout: #ffffff;
+  --cre8-color-content-success: #00473d;
+  --cre8-color-content-success-icon: #007766;
+  --cre8-color-content-error: #bb4242;
+  --cre8-color-content-error-icon: #ea5353;
+  --cre8-color-content-attention-icon: #002f32;
+  --cre8-color-content-brand-knockout: #e6eff1;
+  --cre8-color-content-brand: #035c67;
+  --cre8-color-content-brand-strong: #035c67;
+  --cre8-color-content-link: #035c67;
+  --cre8-color-content-link-hover: #024a52;
+  --cre8-color-content-link-active: #012529;
+  --cre8-color-content-link-visited: #7522D9;
+  --cre8-color-content-warning-icon: #e89f12;
+  --cre8-color-content-info-icon: #035c67;
+  --cre8-color-border-default: #d5d5d5;
+  --cre8-color-border-strong: #949494;
+  --cre8-color-border-knockout: #ffffff;
+  --cre8-color-border-disabled: #ababab;
+  --cre8-color-border-success: #007766;
+  --cre8-color-border-error: #ea5353;
+  --cre8-color-border-warning: #e89f12;
+  --cre8-color-border-info: #012529;
+  --cre8-color-border-attention: #002f32;
+  --cre8-color-border-brand: #035c67;
+  --cre8-color-border-brand-subtle: #56a1aa;
+  --cre8-color-border-brand-strong: #035c67;
+  --cre8-color-border-transparent: rgba(45, 45, 45, 0.0);
+  --cre8-color-border-active-outline: #035c67;
+  --cre8-font-size-0: 0.75rem;
+  --cre8-font-size-1: 0.875rem;
+  --cre8-font-size-2: 1rem;
+  --cre8-font-size-3: 1.125rem;
+  --cre8-font-size-4: 1.25rem;
+  --cre8-font-size-5: 1.5rem;
+  --cre8-font-size-6: 1.75rem;
+  --cre8-font-size-7: 2rem;
+  --cre8-font-size-8: 2.5rem;
+  --cre8-font-size-9: 3rem;
+  --cre8-font-size-10: 3.5rem;
+  --cre8-font-size-11: 4rem;
+  --cre8-font-size-12: 4.5rem;
+  --cre8-letter-spacing-0: -1.5;
+  --cre8-letter-spacing-1: -1;
+  --cre8-letter-spacing-2: -0.5;
+  --cre8-letter-spacing-3: 0;
+  --cre8-letter-spacing-4: 2;
+  --cre8-letter-spacing-5: 1;
+  --cre8-letter-spacing-6: 1.5;
+  --cre8-paragraph-spacing-0: 0;
+  --cre8-text-case-none: none;
+  --cre8-text-case-uppercase: uppercase;
+  --cre8-text-decoration-none: none;
+  --cre8-text-decoration-underline: underline;
+  --cre8-paragraph-indent-0: 0px;
+  --cre8-border-radius-small: 4px;
+  --cre8-border-radius-default: 8px;
+  --cre8-border-radius-large: 16px;
+  --cre8-border-radius-round: 900px;
+  --cre8-border-radius-button: 8px;
+  --cre8-border-radius-badge: 4px;
+  --cre8-border-radius-tabs: 8px;
+  --cre8-border-radius-container: 16px;
+  --cre8-border-radius-field: 8px;
+  --cre8-border-width-none: 0rem;
+  --cre8-border-width-default: 0.0625rem;
+  --cre8-border-width-focus: 0.125rem;
+  --cre8-border-width-large: 0.25rem;
+  --cre8-border-width-button-tertiary-outline-focus: 0.125rem;
+  --cre8-border-width-button-default: 0.125rem;
+  --cre8-border-width-tab-selected: 0.125rem;
+  --cre8-border-style-button-tertiary-outline-focus: solid;
+  --cre8-border-style-default: solid;
+  --cre8-shadow-default: 0 8px 6px 0 rgba(0,0,0,0.1);
+  --cre8-shadow-button: none;
+  --cre8-shadow-none: none;
+  --cre8-shadow-large: 0 10px 12px 0 rgba(0,0,0,0.2);
+  --cre8-shadow-small: 0 1px 2px 1px rgba(0,0,0,0.2);
+  --cre8-color-link-bg-active: #333333;
+  --cre8-font-families-nb-akademie: "NB Akademie", sans-serif;
+  --cre8-font-weights-nb-akademie-0: 400;
+  --cre8-font-weights-nb-akademie-1: 500;
+  --cre8-font-weights-nb-akademie-2: 700;
+  --cre8-line-heights-0: 1.25;
+  --cre8-line-heights-1: 1.12;
+  --cre8-line-heights-2: 1.1400000000000001;
+  --cre8-line-heights-3: 1.2;
+  --cre8-line-heights-4: 1.3;
+  --cre8-line-heights-5: 1.33;
+  --cre8-line-heights-6: 1.4000000000000001;
+  --cre8-line-heights-7: 1.5;
+  --cre8-line-heights-8: 1.43;
+  --cre8-line-heights-9: 1.11;
+  --cre8-line-heights-10: 1.1300000000000001;
+  --cre8-line-heights-11: 1.16;
+  --cre8-line-heights-12: 0.48;
+  --cre8-line-heights-13: 0.4;
+  --cre8-line-heights-14: 0.32;
+  --cre8-line-heights-15: 0.28;
+  --cre8-line-heights-16: 0.24;
+  --cre8-line-heights-17: 0.2;
+  --cre8-line-heights-18: 0.16;
+  --cre8-icon-size-small: 0.875rem;
+  --cre8-icon-size-default: 1rem;
+  --cre8-icon-size-large: 1.125rem;
+  --cre8-badge-padding-horizontal: 0.375rem;
+  --cre8-badge-padding-vertical: 0.125rem;
+  --cre8-progress-meter-height: 0.5rem;
+  --cre8-breakpoints-bp-xsm: 23.4375rem;
+  --cre8-breakpoints-bp-sm: 35rem;
+  --cre8-breakpoints-bp-md: 48rem;
+  --cre8-breakpoints-bp-lg: 60rem;
+  --cre8-breakpoints-bp-xl: 75rem;
+  --cre8-breakpoints-bp-xxl: 87.5rem;
+}

package/lib/design-tokens/femmecubator/tokens_femmecubator.module.css

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

package/lib/design-tokens/mcdonalds/tokens.module.css

@@ -0,0 +1,58 @@
+
+:root {
+    /* Color Tokens */
+    --cre8-color-primary: #FFC72C; /* Bright Yellow - Brand Primary */
+    --cre8-color-secondary: #C8102E; /* Bright Red - Brand Secondary */
+    --cre8-color-accent: #1EAEDB; /* Sky Blue - Playful Accent */
+    --cre8-color-success: #68B631; /* Green - Success Indicator */
+    --cre8-color-warning: #FFC72C; /* Yellow - Warning Indicator */
+    --cre8-color-danger: #C8102E; /* Red - Danger Indicator */
+    --cre8-color-info: #1EAEDB; /* Blue - Info Indicator */
+    --cre8-color-surface: #FFFFFF; /* White - Surface Color */
+    --cre8-color-background: #F9F9F9; /* Light Background */
+    --cre8-color-text: #333333; /* Dark Text Color */
+    --cre8-color-text-light: #FFFFFF; /* Light Text Color for contrast */
+    --cre8-color-border: #E0E0E0; /* Light Border Color */
+    
+    /* Typography Tokens */
+    --cre8-font-family: "Helvetica Neue", Arial, sans-serif; /* Primary Font Family */
+    --cre8-font-size-xs: 0.75rem; /* 12px - Extra Small */
+    --cre8-font-size-sm: 0.875rem; /* 14px - Small */
+    --cre8-font-size-md: 1rem; /* 16px - Medium */
+    --cre8-font-size-lg: 1.125rem; /* 18px - Large */
+    --cre8-font-size-xl: 1.25rem; /* 20px - Extra Large */
+    --cre8-font-size-2xl: 1.5rem; /* 24px - 2X Extra Large */
+    --cre8-font-size-3xl: 1.875rem; /* 30px - 3X Extra Large */
+    --cre8-font-size-4xl: 2.25rem; /* 36px - 4X Extra Large */
+    
+    /* Spacing Tokens */
+    --cre8-space-xs: 0.25rem; /* 4px - Extra Small */
+    --cre8-space-sm: 0.5rem; /* 8px - Small */
+    --cre8-space-md: 0.75rem; /* 12px - Medium */
+    --cre8-space-lg: 1rem; /* 16px - Large */
+    --cre8-space-xl: 1.5rem; /* 24px - Extra Large */
+    --cre8-space-2xl: 2rem; /* 32px - 2X Extra Large */
+    --cre8-space-3xl: 3rem; /* 48px - 3X Extra Large */
+    --cre8-space-4xl: 4rem; /* 64px - 4X Extra Large */
+    
+    /* Border Radius Tokens */
+    --cre8-radius-none: 0; /* No Radius */
+    --cre8-radius-sm: 0.25rem; /* 4px - Small Radius */
+    --cre8-radius-md: 0.5rem; /* 8px - Medium Radius */
+    --cre8-radius-lg: 0.75rem; /* 12px - Large Radius */
+    --cre8-radius-xl: 1rem; /* 16px - Extra Large Radius */
+    --cre8-radius-full: 9999px; /* Full Radius for circles */
+    
+    /* Shadow Tokens */
+    --cre8-shadow-none: none; /* No Shadow */
+    --cre8-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); /* Small Shadow */
+    --cre8-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1); /* Medium Shadow */
+    --cre8-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1); /* Large Shadow */
+    
+    /* Breakpoint Tokens */
+    --cre8-breakpoint-sm: 400px; /* Small Devices */
+    --cre8-breakpoint-md: 768px; /* Medium Devices */
+    --cre8-breakpoint-lg: 1024px; /* Large Devices */
+    --cre8-breakpoint-xl: 1280px; /* Extra Large Devices */
+    --cre8-breakpoint-2xl: 1440px; /* 2X Extra Large Devices */
+}

package/lib/design-tokens/target/fonts.css

@@ -0,0 +1,26 @@
+@font-face {
+	font-family: 'Aeonik';
+	font-style: normal;
+	font-weight: 300;
+	src: url('../assets/fonts/Aeonik-Light.woff2') format('woff2'),
+			 url('../assets/fonts/Aeonik-Light.woff') format('woff');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Aeonik';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/Aeonik-Regular.woff2') format('woff2'),
+			 url('../assets/fonts/Aeonik-Regular.woff') format('woff');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Aeonik';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../assets/fonts/Aeonik-Bold.woff2') format('woff2'),
+			 url('../assets/fonts/Aeonik-Bold.woff') format('woff');
+	font-display: fallback;
+}