@tmorrow/cre8-wc 1.1.3 → 1.1.6

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

@@ -0,0 +1,532 @@
+:root {
+    /* Header */
+    --cre8-desktop-menu-padding-vertical-padding: 1rem;
+    --cre8-desktop-menu-padding-horizontal-padding: 1.5rem;
+    --cre8-color-header-bg-default: #ffffff;
+    --cre8-color-header-bg-secondary: #f5f5f5;
+    --cre8-color-header-bg-tertiary: #000000;
+    --cre8-color-header-menu-bg-default: #ffffff;
+    --cre8-color-header-menu-bg-active: #a259ff;
+    --cre8-color-header-menu-bg-focus: #a259ff;
+    --cre8-color-header-menu-content-default: #333333;
+    --cre8-color-header-menu-content-active: #ffffff;
+    --cre8-color-header-menu-content-focus: #ffffff;
+    --cre8-color-header-menu-border-default: rgba(51, 51, 51, 0.0);
+    --cre8-color-header-menu-bg-hover: #f5f5f5;
+    --cre8-color-header-menu-content-hover: #a259ff;
+    --cre8-color-header-menu-border-hover: rgba(51, 51, 51, 0.0);
+    --cre8-color-header-menu-bg-pressed: #e6d8ff;
+    --cre8-color-header-menu-content-pressed: #7a42cc;
+    --cre8-color-header-menu-border-pressed: rgba(51, 51, 51, 0.0);
+    --cre8-color-header-menu-border-active: rgba(51, 51, 51, 0.0);
+    --cre8-color-header-menu-border-focus: rgba(51, 51, 51, 0.0);
+    --cre8-color-header-submenu-bg-default: #ffffff;
+    --cre8-color-header-submenu-bg-focus: #a259ff;
+    --cre8-color-header-submenu-content-default: #333333;
+    --cre8-color-header-submenu-bg-hover: #f5f5f5;
+    --cre8-color-header-submenu-content-hover: #a259ff;
+    --cre8-color-header-submenu-content-focus: #ffffff;
+    --cre8-color-header-submenu-bg-pressed: #e6d8ff;
+    --cre8-color-header-submenu-content-pressed: #7a42cc;
+
+    /* Footer */
+    --cre8-color-footer-bg-default: #f5f5f5;
+    --cre8-color-footer-bg-secondary: #000000;
+    --cre8-color-footer-content-default: #333333;
+    --cre8-color-footer-content-secondary: #ffffff;
+    --cre8-color-footer-link-default: #a259ff;
+    --cre8-color-footer-link-hover: #7a42cc;
+
+    /* Spacing System */
+    --cre8-spacing-0: 0rem;
+    --cre8-spacing-2: 0.125rem;
+    --cre8-spacing-4: 0.25rem;
+    --cre8-spacing-6: 0.375rem;
+    --cre8-spacing-8: 0.5rem;
+    --cre8-spacing-12: 0.75rem;
+    --cre8-spacing-14: 0.875rem;
+    --cre8-spacing-16: 1rem;
+    --cre8-spacing-18: 1.125rem;
+    --cre8-spacing-24: 1.5rem;
+    --cre8-spacing-32: 2rem;
+    --cre8-spacing-40: 2.5rem;
+    --cre8-spacing-48: 3rem;
+    --cre8-spacing-64: 4rem;
+    --cre8-spacing-80: 5rem;
+    --cre8-spacing-96: 6rem;
+    --cre8-spacing-120: 7.5rem;
+    --cre8-spacing-160: 10rem;
+
+    /* Button Styles */
+    --cre8-color-button-primary-bg: #a259ff;
+    --cre8-color-button-primary-bg-hover: #8a4adc;
+    --cre8-color-button-primary-bg-active: #7a42cc;
+    --cre8-color-button-primary-bg-disabled: #e6e6e6;
+    --cre8-color-button-primary-border: #a259ff;
+    --cre8-color-button-primary-border-hover: #8a4adc;
+    --cre8-color-button-primary-border-active: #7a42cc;
+    --cre8-color-button-primary-border-disabled: #e6e6e6;
+    --cre8-color-button-primary-content: #ffffff;
+    --cre8-color-button-primary-content-hover: #ffffff;
+    --cre8-color-button-primary-content-active: #ffffff;
+    --cre8-color-button-primary-content-disabled: #999999;
+    --cre8-color-button-primary-outline: #000000;
+
+    --cre8-color-button-secondary-bg: #ffffff;
+    --cre8-color-button-secondary-bg-hover: #f5f5f5;
+    --cre8-color-button-secondary-bg-active: #eeeeee;
+    --cre8-color-button-secondary-bg-disabled: #f5f5f5;
+    --cre8-color-button-secondary-border: #dddddd;
+    --cre8-color-button-secondary-border-hover: #a259ff;
+    --cre8-color-button-secondary-border-active: #7a42cc;
+    --cre8-color-button-secondary-border-disabled: #e6e6e6;
+    --cre8-color-button-secondary-content: #000000;
+    --cre8-color-button-secondary-content-hover: #a259ff;
+    --cre8-color-button-secondary-content-active: #7a42cc;
+    --cre8-color-button-secondary-content-disabled: #999999;
+    --cre8-color-button-secondary-outline: #000000;
+
+    --cre8-color-button-tertiary-bg: rgba(51, 51, 51, 0.0);
+    --cre8-color-button-tertiary-bg-hover: rgba(51, 51, 51, 0.0);
+    --cre8-color-button-tertiary-bg-active: rgba(51, 51, 51, 0.0);
+    --cre8-color-button-tertiary-bg-disabled: rgba(51, 51, 51, 0.0);
+    --cre8-color-button-tertiary-border: rgba(51, 51, 51, 0.0);
+    --cre8-color-button-tertiary-border-hover: #a259ff;
+    --cre8-color-button-tertiary-border-active: #7a42cc;
+    --cre8-color-button-tertiary-border-disabled: rgba(51, 51, 51, 0.0);
+    --cre8-color-button-tertiary-content: #a259ff;
+    --cre8-color-button-tertiary-content-hover: #8a4adc;
+    --cre8-color-button-tertiary-content-active: #7a42cc;
+    --cre8-color-button-tertiary-content-disabled: #999999;
+    --cre8-color-button-tertiary-outline: #000000;
+
+    /* Button Padding */
+    --cre8-button-padding-vertical-small: 0.5rem;
+    --cre8-button-padding-vertical-medium: 0.75rem;
+    --cre8-button-padding-vertical-icon-only: 0.25rem;
+    --cre8-button-padding-vertical-large: 1rem;
+    --cre8-button-padding-horizontal-small: 0.75rem;
+    --cre8-button-padding-horizontal-medium: 1.25rem;
+    --cre8-button-padding-horizontal-large: 1.75rem;
+    --cre8-button-padding-horizontal-icon-only: 0.25rem;
+
+    /* Background Colors */
+    --cre8-color-bg-default: #ffffff;
+    --cre8-color-bg-subtle: #f5f5f5;
+    --cre8-color-bg-strong: #000000;
+    --cre8-color-bg-disabled: #e6e6e6;
+    --cre8-color-bg-success: #e6f7ef;
+    --cre8-color-bg-success-strong: #0e8d69;
+    --cre8-color-bg-error: #fdeeee;
+    --cre8-color-bg-error-strong: #e14c4c;
+    --cre8-color-bg-warning: #fff4e2;
+    --cre8-color-bg-warning-strong: #f6a623;
+    --cre8-color-bg-info: #e6eaff;
+    --cre8-color-bg-info-strong: #5b6af9;
+    --cre8-color-bg-attention: #e6d8ff;
+    --cre8-color-bg-attention-strong: #a259ff;
+    --cre8-color-bg-default-hover: #f5f5f5;
+    
+    /* Brand Colors */
+    --cre8-color-bg-brand: #a259ff;
+    --cre8-color-bg-brand-hover: #8a4adc;
+    --cre8-color-bg-brand-strong: #7a42cc;
+    --cre8-color-bg-brand-strong-hover: #6936b0;
+    --cre8-color-bg-brand-strong-active: #5b2e99;
+    --cre8-color-bg-brand-xstrong: #000000;
+    --cre8-color-bg-brand-xstrong-hover: #1a1a1a;
+    --cre8-color-bg-brand-xstrong-active: #333333;
+    --cre8-color-bg-opacity-transparent: rgba(51, 51, 51, 0.0);
+    --cre8-color-bg-opacity-default: rgba(51, 51, 51, 0.50);
+    --cre8-color-bg-active: #000000;
+
+    /* Content Colors */
+    --cre8-color-content-default: #000000;
+    --cre8-color-content-subtle: #666666;
+    --cre8-color-content-disabled: #999999;
+    --cre8-color-content-link-disabled: #999999;
+    --cre8-color-content-knockout: #ffffff;
+    --cre8-color-content-success: #0e8d69;
+    --cre8-color-content-success-icon: #0e8d69;
+    --cre8-color-content-error: #e14c4c;
+    --cre8-color-content-error-icon: #e14c4c;
+    --cre8-color-content-attention-icon: #7a42cc;
+    --cre8-color-content-brand-knockout: #ffffff;
+    --cre8-color-content-brand: #a259ff;
+    --cre8-color-content-brand-strong: #7a42cc;
+    --cre8-color-content-link: #a259ff;
+    --cre8-color-content-link-hover: #8a4adc;
+    --cre8-color-content-link-active: #7a42cc;
+    --cre8-color-content-link-visited: #9747ff;
+    --cre8-color-content-warning-icon: #f6a623;
+    --cre8-color-content-info-icon: #5b6af9;
+
+    /* Border Colors */
+    --cre8-color-border-default: #e6e6e6;
+    --cre8-color-border-strong: #999999;
+    --cre8-color-border-knockout: #ffffff;
+    --cre8-color-border-disabled: #cccccc;
+    --cre8-color-border-success: #0e8d69;
+    --cre8-color-border-error: #e14c4c;
+    --cre8-color-border-warning: #f6a623;
+    --cre8-color-border-info: #5b6af9;
+    --cre8-color-border-attention: #a259ff;
+    --cre8-color-border-brand: #a259ff;
+    --cre8-color-border-brand-subtle: #c9adff;
+    --cre8-color-border-brand-strong: #7a42cc;
+    --cre8-color-border-transparent: rgba(51, 51, 51, 0.0);
+    --cre8-color-border-active-outline: #a259ff;
+
+    /* Typography */
+    --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;
+    
+    /* Border Radius */
+    --cre8-border-radius-small: 4px;
+    --cre8-border-radius-default: 8px;
+    --cre8-border-radius-large: 12px;
+    --cre8-border-radius-round: 900px;
+    --cre8-border-radius-button: 8px;
+    --cre8-border-radius-badge: 4px;
+    --cre8-border-radius-tabs: 8px;
+    --cre8-border-radius-container: 12px;
+    --cre8-border-radius-field: 8px;
+    
+    /* Border Properties */
+    --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;
+    
+    /* Shadows */
+    --cre8-shadow-default: 0 4px 8px 0 rgba(0,0,0,0.08);
+    --cre8-shadow-button: 0 2px 4px 0 rgba(0,0,0,0.06);
+    --cre8-shadow-none: none;
+    --cre8-shadow-large: 0 10px 20px 0 rgba(0,0,0,0.12);
+    --cre8-shadow-small: 0 2px 4px 0 rgba(0,0,0,0.04);
+    
+    /* Miscellaneous */
+    --cre8-color-link-bg-active: #000000;
+    --cre8-font-families-default: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --cre8-font-weights-nb-akademie-0: 400;
+    --cre8-font-weights-nb-akademie-1: 500;
+    --cre8-font-weights-nb-akademie-2: 700;
+    
+    /* Line Heights */
+    --cre8-line-heights-0: 1.25;
+    --cre8-line-heights-1: 1.15;
+    --cre8-line-heights-2: 1.2;
+    --cre8-line-heights-3: 1.3;
+    --cre8-line-heights-4: 1.4;
+    --cre8-line-heights-5: 1.5;
+    --cre8-line-heights-6: 1.6;
+    --cre8-line-heights-7: 1.7;
+    --cre8-line-heights-8: 1.43;
+    --cre8-line-heights-9: 1.11;
+    --cre8-line-heights-10: 1.13;
+    --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;
+    
+    /* Icon Sizes */
+    --cre8-icon-size-small: 0.875rem;
+    --cre8-icon-size-default: 1rem;
+    --cre8-icon-size-large: 1.25rem;
+    
+    /* Badge Properties */
+    --cre8-badge-padding-horizontal: 0.375rem;
+    --cre8-badge-padding-vertical: 0.125rem;
+    
+    /* Progress Meter */
+    --cre8-progress-meter-height: 0.5rem;
+    
+    /* Breakpoints */
+    --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;
+    --cre8-typography-body-xlarge-font-family: #cccccc;
+    --cre8-typography-body-xlarge-font-size: 1rem;
+    --cre8-typography-body-xlarge-font-weight: #cccccc;
+    --cre8-typography-body-xlarge-line-height: 1.5;
+    --cre8-typography-body-xlarge-text-decoration: #cccccc;
+    --cre8-typography-body-xlarge-text-transform: #cccccc;
+    --cre8-typography-body-xlarge-strong-font-family: #cccccc;
+    --cre8-typography-body-xlarge-strong-font-size: 1rem;
+    --cre8-typography-body-xlarge-strong-font-weight: #cccccc;
+    --cre8-typography-body-xlarge-strong-line-height: 1.5;
+    --cre8-typography-body-xlarge-strong-text-decoration: #cccccc;
+    --cre8-typography-body-xlarge-strong-text-transform: #cccccc;
+    --cre8-typography-body-xlarge-link-font-family: #cccccc;
+    --cre8-typography-body-xlarge-link-font-size: 1rem;
+    --cre8-typography-body-xlarge-link-font-weight: #cccccc;
+    --cre8-typography-body-xlarge-link-line-height: 1.5;
+    --cre8-typography-body-xlarge-link-text-decoration: #cccccc;
+    --cre8-typography-body-xlarge-link-text-transform: #cccccc;
+    --cre8-typography-body-large-font-family: #cccccc;
+    --cre8-typography-body-large-font-size: 1rem;
+    --cre8-typography-body-large-font-weight: #cccccc;
+    --cre8-typography-body-large-line-height: 1.5;
+    --cre8-typography-body-large-text-decoration: #cccccc;
+    --cre8-typography-body-large-text-transform: #cccccc;
+    --cre8-typography-body-large-strong-font-family: #cccccc;
+    --cre8-typography-body-large-strong-font-size: 1rem;
+    --cre8-typography-body-large-strong-font-weight: #cccccc;
+    --cre8-typography-body-large-strong-line-height: 1.5;
+    --cre8-typography-body-large-strong-text-decoration: #cccccc;
+    --cre8-typography-body-large-strong-text-transform: #cccccc;
+    --cre8-typography-body-default-font-family: #cccccc;
+    --cre8-typography-body-default-font-size: 1rem;
+    --cre8-typography-body-default-font-weight: #cccccc;
+    --cre8-typography-body-default-line-height: 1.5;
+    --cre8-typography-body-default-text-decoration: #cccccc;
+    --cre8-typography-body-default-text-transform: #cccccc;
+    --cre8-typography-body-default-strong-font-family: #cccccc;
+    --cre8-typography-body-default-strong-font-size: 1rem;
+    --cre8-typography-body-default-strong-font-weight: #cccccc;
+    --cre8-typography-body-default-strong-line-height: 1.5;
+    --cre8-typography-body-default-strong-text-decoration: #cccccc;
+    --cre8-typography-body-default-strong-text-transform: #cccccc;
+    --cre8-typography-body-small-font-family: #cccccc;
+    --cre8-typography-body-small-font-size: 1rem;
+    --cre8-typography-body-small-font-weight: #cccccc;
+    --cre8-typography-body-small-line-height: 1.5;
+    --cre8-typography-body-small-text-decoration: #cccccc;
+    --cre8-typography-body-small-text-transform: #cccccc;
+    --cre8-typography-body-small-strong-font-family: #cccccc;
+    --cre8-typography-body-small-strong-font-size: 1rem;
+    --cre8-typography-body-small-strong-font-weight: #cccccc;
+    --cre8-typography-body-small-strong-line-height: 1.5;
+    --cre8-typography-body-small-strong-text-decoration: #cccccc;
+    --cre8-typography-body-small-strong-text-transform: #cccccc;
+    --cre8-typography-body-large-link-font-family: #cccccc;
+    --cre8-typography-body-large-link-font-size: 1rem;
+    --cre8-typography-body-large-link-font-weight: #cccccc;
+    --cre8-typography-body-large-link-line-height: 1.5;
+    --cre8-typography-body-large-link-text-decoration: #cccccc;
+    --cre8-typography-body-large-link-text-transform: #cccccc;
+    --cre8-typography-body-default-link-font-family: #cccccc;
+    --cre8-typography-body-default-link-font-size: 1rem;
+    --cre8-typography-body-default-link-font-weight: #cccccc;
+    --cre8-typography-body-default-link-line-height: 1.5;
+    --cre8-typography-body-default-link-text-decoration: #cccccc;
+    --cre8-typography-body-default-link-text-transform: #cccccc;
+    --cre8-typography-body-small-link-font-family: #cccccc;
+    --cre8-typography-body-small-link-font-size: 1rem;
+    --cre8-typography-body-small-link-font-weight: #cccccc;
+    --cre8-typography-body-small-link-line-height: 1.5;
+    --cre8-typography-body-small-link-text-decoration: #cccccc;
+    --cre8-typography-body-small-link-text-transform: #cccccc;
+    --cre8-typography-label-default-font-family: #cccccc;
+    --cre8-typography-label-default-font-size: 1rem;
+    --cre8-typography-label-default-font-weight: #cccccc;
+    --cre8-typography-label-default-line-height: 1.5;
+    --cre8-typography-label-default-text-decoration: #cccccc;
+    --cre8-typography-label-default-text-transform: #cccccc;
+    --cre8-typography-label-large-font-family: #cccccc;
+    --cre8-typography-label-large-font-size: 1rem;
+    --cre8-typography-label-large-font-weight: #cccccc;
+    --cre8-typography-label-large-line-height: 1.5;
+    --cre8-typography-label-large-text-decoration: #cccccc;
+    --cre8-typography-label-large-text-transform: #cccccc;
+    --cre8-typography-label-small-font-family: #cccccc;
+    --cre8-typography-label-small-font-size: 1rem;
+    --cre8-typography-label-small-font-weight: #cccccc;
+    --cre8-typography-label-small-line-height: 1.5;
+    --cre8-typography-label-small-text-decoration: #cccccc;
+    --cre8-typography-label-small-text-transform: #cccccc;
+    --cre8-typography-title-xlarge-font-family: #cccccc;
+    --cre8-typography-title-xlarge-font-size: 1rem;
+    --cre8-typography-title-xlarge-font-weight: #cccccc;
+    --cre8-typography-title-xlarge-line-height: 1.5;
+    --cre8-typography-title-xlarge-text-decoration: #cccccc;
+    --cre8-typography-title-xlarge-text-transform: #cccccc;
+    --cre8-typography-title-xlarge-mobile-font-family: #cccccc;
+    --cre8-typography-title-xlarge-mobile-font-size: 1rem;
+    --cre8-typography-title-xlarge-mobile-font-weight: #cccccc;
+    --cre8-typography-title-xlarge-mobile-line-height: 1.5;
+    --cre8-typography-title-xlarge-mobile-text-decoration: #cccccc;
+    --cre8-typography-title-xlarge-mobile-text-transform: #cccccc;
+    --cre8-typography-title-large-font-family: #cccccc;
+    --cre8-typography-title-large-font-size: 1rem;
+    --cre8-typography-title-large-font-weight: #cccccc;
+    --cre8-typography-title-large-line-height: 1.5;
+    --cre8-typography-title-large-text-decoration: #cccccc;
+    --cre8-typography-title-large-text-transform: #cccccc;
+    --cre8-typography-title-large-mobile-font-family: #cccccc;
+    --cre8-typography-title-large-mobile-font-size: 1rem;
+    --cre8-typography-title-large-mobile-font-weight: #cccccc;
+    --cre8-typography-title-large-mobile-line-height: 1.5;
+    --cre8-typography-title-large-mobile-text-decoration: #cccccc;
+    --cre8-typography-title-large-mobile-text-transform: #cccccc;
+    --cre8-typography-title-default-font-family: #cccccc;
+    --cre8-typography-title-default-font-size: 1rem;
+    --cre8-typography-title-default-font-weight: #cccccc;
+    --cre8-typography-title-default-line-height: 1.5;
+    --cre8-typography-title-default-text-decoration: #cccccc;
+    --cre8-typography-title-default-text-transform: #cccccc;
+    --cre8-typography-title-default-mobile-font-family: #cccccc;
+    --cre8-typography-title-default-mobile-font-size: 1rem;
+    --cre8-typography-title-default-mobile-font-weight: #cccccc;
+    --cre8-typography-title-default-mobile-line-height: 1.5;
+    --cre8-typography-title-default-mobile-text-decoration: #cccccc;
+    --cre8-typography-title-default-mobile-text-transform: #cccccc;
+    --cre8-typography-title-small-font-family: #cccccc;
+    --cre8-typography-title-small-font-size: 1rem;
+    --cre8-typography-title-small-font-weight: #cccccc;
+    --cre8-typography-title-small-line-height: 1.5;
+    --cre8-typography-title-small-text-decoration: #cccccc;
+    --cre8-typography-title-small-text-transform: #cccccc;
+    --cre8-typography-title-small-mobile-font-family: #cccccc;
+    --cre8-typography-title-small-mobile-font-size: 1rem;
+    --cre8-typography-title-small-mobile-font-weight: #cccccc;
+    --cre8-typography-title-small-mobile-line-height: 1.5;
+    --cre8-typography-title-small-mobile-text-decoration: #cccccc;
+    --cre8-typography-title-small-mobile-text-transform: #cccccc;
+    --cre8-typography-headline-large-font-family: #cccccc;
+    --cre8-typography-headline-large-font-size: 1rem;
+    --cre8-typography-headline-large-font-weight: #cccccc;
+    --cre8-typography-headline-large-line-height: 1.5;
+    --cre8-typography-headline-large-text-decoration: #cccccc;
+    --cre8-typography-headline-large-text-transform: #cccccc;
+    --cre8-typography-headline-large-mobile-font-family: #cccccc;
+    --cre8-typography-headline-large-mobile-font-size: 1rem;
+    --cre8-typography-headline-large-mobile-font-weight: #cccccc;
+    --cre8-typography-headline-large-mobile-line-height: 1.5;
+    --cre8-typography-headline-large-mobile-text-decoration: #cccccc;
+    --cre8-typography-headline-large-mobile-text-transform: #cccccc;
+    --cre8-typography-headline-default-font-family: #cccccc;
+    --cre8-typography-headline-default-font-size: 1rem;
+    --cre8-typography-headline-default-font-weight: #cccccc;
+    --cre8-typography-headline-default-line-height: 1.5;
+    --cre8-typography-headline-default-text-decoration: #cccccc;
+    --cre8-typography-headline-default-text-transform: #cccccc;
+    --cre8-typography-headline-default-mobile-font-family: #cccccc;
+    --cre8-typography-headline-default-mobile-font-size: 1rem;
+    --cre8-typography-headline-default-mobile-font-weight: #cccccc;
+    --cre8-typography-headline-default-mobile-line-height: 1.5;
+    --cre8-typography-headline-default-mobile-text-decoration: #cccccc;
+    --cre8-typography-headline-default-mobile-text-transform: #cccccc;
+    --cre8-typography-headline-small-font-family: #cccccc;
+    --cre8-typography-headline-small-font-size: 1rem;
+    --cre8-typography-headline-small-font-weight: #cccccc;
+    --cre8-typography-headline-small-line-height: 1.5;
+    --cre8-typography-headline-small-text-decoration: #cccccc;
+    --cre8-typography-headline-small-text-transform: #cccccc;
+    --cre8-typography-headline-small-mobile-font-family: #cccccc;
+    --cre8-typography-headline-small-mobile-font-size: 1rem;
+    --cre8-typography-headline-small-mobile-font-weight: #cccccc;
+    --cre8-typography-headline-small-mobile-line-height: 1.5;
+    --cre8-typography-headline-small-mobile-text-decoration: #cccccc;
+    --cre8-typography-headline-small-mobile-text-transform: #cccccc;
+    --cre8-typography-headline-xsmall-font-family: #cccccc;
+    --cre8-typography-headline-xsmall-font-size: 1rem;
+    --cre8-typography-headline-xsmall-font-weight: #cccccc;
+    --cre8-typography-headline-xsmall-line-height: 1.5;
+    --cre8-typography-headline-xsmall-text-decoration: #cccccc;
+    --cre8-typography-headline-xsmall-text-transform: #cccccc;
+    --cre8-typography-headline-xsmall-mobile-font-family: #cccccc;
+    --cre8-typography-headline-xsmall-mobile-font-size: 1rem;
+    --cre8-typography-headline-xsmall-mobile-font-weight: #cccccc;
+    --cre8-typography-headline-xsmall-mobile-line-height: 1.5;
+    --cre8-typography-headline-xsmall-mobile-text-decoration: #cccccc;
+    --cre8-typography-headline-xsmall-mobile-text-transform: #cccccc;
+    --cre8-typography-display-large-font-family: #cccccc;
+    --cre8-typography-display-large-font-size: 1rem;
+    --cre8-typography-display-large-font-weight: #cccccc;
+    --cre8-typography-display-large-line-height: 1.5;
+    --cre8-typography-display-large-text-decoration: #cccccc;
+    --cre8-typography-display-large-text-transform: #cccccc;
+    --cre8-typography-display-large-mobile-font-family: #cccccc;
+    --cre8-typography-display-large-mobile-font-size: 1rem;
+    --cre8-typography-display-large-mobile-font-weight: #cccccc;
+    --cre8-typography-display-large-mobile-line-height: 1.5;
+    --cre8-typography-display-large-mobile-text-decoration: #cccccc;
+    --cre8-typography-display-large-mobile-text-transform: #cccccc;
+    --cre8-typography-display-default-font-family: #cccccc;
+    --cre8-typography-display-default-font-size: 1rem;
+    --cre8-typography-display-default-font-weight: #cccccc;
+    --cre8-typography-display-default-line-height: 1.5;
+    --cre8-typography-display-default-text-decoration: #cccccc;
+    --cre8-typography-display-default-text-transform: #cccccc;
+    --cre8-typography-display-default-mobile-font-family: #cccccc;
+    --cre8-typography-display-default-mobile-font-size: 1rem;
+    --cre8-typography-display-default-mobile-font-weight: #cccccc;
+    --cre8-typography-display-default-mobile-line-height: 1.5;
+    --cre8-typography-display-default-mobile-text-decoration: #cccccc;
+    --cre8-typography-display-default-mobile-text-transform: #cccccc;
+    --cre8-typography-display-small-font-family: #cccccc;
+    --cre8-typography-display-small-font-size: 1rem;
+    --cre8-typography-display-small-font-weight: #cccccc;
+    --cre8-typography-display-small-line-height: 1.5;
+    --cre8-typography-display-small-text-decoration: #cccccc;
+    --cre8-typography-display-small-text-transform: #cccccc;
+    --cre8-typography-display-small-mobile-font-family: #cccccc;
+    --cre8-typography-display-small-mobile-font-size: 1rem;
+    --cre8-typography-display-small-mobile-font-weight: #cccccc;
+    --cre8-typography-display-small-mobile-line-height: 1.5;
+    --cre8-typography-display-small-mobile-text-decoration: #cccccc;
+    --cre8-typography-display-small-mobile-text-transform: #cccccc;
+    --cre8-typography-meta-default-font-family: #cccccc;
+    --cre8-typography-meta-default-font-size: 1rem;
+    --cre8-typography-meta-default-font-weight: #cccccc;
+    --cre8-typography-meta-default-line-height: 1.5;
+    --cre8-typography-meta-default-text-decoration: #cccccc;
+    --cre8-typography-meta-default-text-transform: #cccccc;
+    --cre8-typography-meta-default-sentence-case-font-family: #cccccc;
+    --cre8-typography-meta-default-sentence-case-font-size: 1rem;
+    --cre8-typography-meta-default-sentence-case-font-weight: #cccccc;
+    --cre8-typography-meta-default-sentence-case-line-height: 1.5;
+    --cre8-typography-meta-default-sentence-case-text-decoration: #cccccc;
+    --cre8-typography-meta-default-sentence-case-text-transform: #cccccc;
+    --cre8-typography-meta-large-font-family: #cccccc;
+    --cre8-typography-meta-large-font-size: 1rem;
+    --cre8-typography-meta-large-font-weight: #cccccc;
+    --cre8-typography-meta-large-line-height: 1.5;
+    --cre8-typography-meta-large-text-decoration: #cccccc;
+    --cre8-typography-meta-large-text-transform: #cccccc;
+    --cre8-typography-meta-small-font-family: #cccccc;
+    --cre8-typography-meta-small-font-size: 1rem;
+    --cre8-typography-meta-small-font-weight: #cccccc;
+    --cre8-typography-meta-small-line-height: 1.5;
+    --cre8-typography-meta-small-text-decoration: #cccccc;
+    --cre8-typography-meta-small-text-transform: #cccccc;
+}

package/lib/design-tokens/core/scss/theming/animation.css

@@ -0,0 +1 @@
+:root,:host{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}

package/lib/design-tokens/core/scss/theming/body.css

@@ -0,0 +1 @@
+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}}

package/lib/design-tokens/core/scss/theming/component.css

@@ -0,0 +1 @@
+*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}

package/lib/design-tokens/core/scss/theming/component.scss

@@ -1,4 +1,4 @@
-@import '../../../../node_modules/@tmorrow/cre8-design-tokens/lib/web/mixins/typography-usage';
+@import './typography-usage';
 @import './reset';
 @import './breakpoints';
 @import './animation';

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

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

package/lib/design-tokens/core/scss/theming/head.css

@@ -0,0 +1 @@
+.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}

package/lib/design-tokens/core/scss/theming/spacing.css

@@ -0,0 +1 @@
+.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}

package/lib/design-tokens/core/scss/theming/variables.css

@@ -0,0 +1,39 @@
+: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
+ *//*# sourceMappingURL=variables.css.map */

package/lib/design-tokens/core/scss/theming/variables.scss

@@ -30,6 +30,7 @@
   @include cre8-typography-label-small();
   display: block;
   margin-bottom: size(1);
+  margin-left: var(--cre8-input-label-margin-left, 0px);
 }
 
 // Inverted form label styles
@@ -232,13 +233,14 @@
 @mixin input-styles() {
   @include cre8-typography-body-default();
   @include focusTransparent();
+  --size-base-unit: .5rem;
   -webkit-appearance: none;
   width: 100%;
   border-width: var(--cre8-border-width-default);
   border-style: solid;
   border-color: var(--cre8-color-border-strong);
   border-radius: var(--cre8-border-radius-default);
-  padding: size(1.5) size(1);
+  padding: var(--cre8-input-padding, size(1.5) size(1));
   color: var(--cre8-color-content-default);
   background-color: var(--cre8-color-bg-default);
   transition: outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);

package/lib/design-tokens/core/scss/theming/visibility.css

@@ -0,0 +1 @@
+.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}}

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

@@ -0,0 +1 @@
+:root,:host{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}