@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/style-dictionary-dist/terraware.scss

@@ -0,0 +1,414 @@
+$tw-sz-btn-large-height: 48px;
+$tw-sz-btn-large-icon: 28px;
+$tw-sz-btn-large-min-width: 120px;
+$tw-sz-btn-medium-height: 40px;
+$tw-sz-btn-medium-icon: 24px;
+$tw-sz-btn-medium-min-width: 100px;
+$tw-sz-btn-small-height: 32px;
+$tw-sz-btn-small-icon: 20px;
+$tw-sz-btn-small-min-width: 80px;
+$tw-sz-btn-stroke: 2px;
+$tw-sz-btn-stroke-focus: 2px;
+$tw-sz-btn-x-large-height: 56px;
+$tw-sz-btn-x-large-icon: 32px;
+$tw-sz-btn-x-large-min-width: 140px;
+$tw-fnt-btn-label-font-family-undefined: 'Inter', sans-serif;
+$tw-fnt-btn-label-font-weight-undefined: 600;
+$tw-fnt-btn-label-large-font-family: 'Inter', sans-serif;
+$tw-fnt-btn-label-large-font-size: 20px;
+$tw-fnt-btn-label-large-font-weight: 600;
+$tw-fnt-btn-label-large-line-height: 28px;
+$tw-fnt-btn-label-medium-font-family: 'Inter', sans-serif;
+$tw-fnt-btn-label-medium-font-size: 16px;
+$tw-fnt-btn-label-medium-font-weight: 600;
+$tw-fnt-btn-label-medium-line-height: 24px;
+$tw-fnt-btn-label-small-font-family: 'Inter', sans-serif;
+$tw-fnt-btn-label-small-font-size: 14px;
+$tw-fnt-btn-label-small-font-weight: 600;
+$tw-fnt-btn-label-small-line-height: 20px;
+$tw-fnt-btn-label-x-large-font-family: 'Inter', sans-serif;
+$tw-fnt-btn-label-x-large-font-size: 24px;
+$tw-fnt-btn-label-x-large-font-weight: 600;
+$tw-fnt-btn-label-x-large-line-height: 32px;
+$tw-clr-base-black: #000000;
+$tw-clr-base-gray-025: #F9F8F7;
+$tw-clr-base-gray-050: #F1F0EC;
+$tw-clr-base-gray-075: #EBEAE4;
+$tw-clr-base-gray-100: #E3E1D9;
+$tw-clr-base-gray-200: #CBC6B7;
+$tw-clr-base-gray-300: #B2AB93;
+$tw-clr-base-gray-400: #9A9172;
+$tw-clr-base-gray-500: #7F775B;
+$tw-clr-base-gray-600: #645E48;
+$tw-clr-base-gray-700: #4B4736;
+$tw-clr-base-gray-800: #333025;
+$tw-clr-base-gray-900: #1D1B15;
+$tw-clr-base-transparent: #FFFFFF00;
+$tw-clr-base-white: #FFFFFF;
+$tw-clr-base-blue-050: #EFF1F8;
+$tw-clr-base-blue-100: #DDE1F1;
+$tw-clr-base-blue-200: #BDC4E4;
+$tw-clr-base-blue-300: #9EA9D7;
+$tw-clr-base-blue-400: #808ECA;
+$tw-clr-base-blue-500: #6172BE;
+$tw-clr-base-blue-600: #4658AA;
+$tw-clr-base-blue-700: #35437F;
+$tw-clr-base-blue-800: #242D57;
+$tw-clr-base-green-050: #E2F6EC;
+$tw-clr-base-green-100: #C2EBD6;
+$tw-clr-base-green-200: #84D6AC;
+$tw-clr-base-green-300: #41C07F;
+$tw-clr-base-green-400: #36A36B;
+$tw-clr-base-green-500: #2C8658;
+$tw-clr-base-green-600: #236A46;
+$tw-clr-base-green-700: #1A5035;
+$tw-clr-base-green-800: #123624;
+$tw-clr-base-light-green-050: #EAF3DC;
+$tw-clr-base-light-green-100: #D4E8BA;
+$tw-clr-base-light-green-200: #ACD278;
+$tw-clr-base-light-green-300: #86BA3E;
+$tw-clr-base-light-green-400: #719E34;
+$tw-clr-base-light-green-500: #5D822B;
+$tw-clr-base-light-green-600: #496622;
+$tw-clr-base-light-green-700: #384D1A;
+$tw-clr-base-light-green-800: #263411;
+$tw-clr-base-orange-050: #F8EFE5;
+$tw-clr-base-orange-100: #F1DFCB;
+$tw-clr-base-orange-200: #E3C099;
+$tw-clr-base-orange-300: #D5A167;
+$tw-clr-base-orange-400: #C78237;
+$tw-clr-base-orange-500: #A36A2D;
+$tw-clr-base-orange-600: #815424;
+$tw-clr-base-orange-700: #61401B;
+$tw-clr-base-orange-800: #422B12;
+$tw-clr-base-pink-050: #F9EDF2;
+$tw-clr-base-pink-100: #F3DCE6;
+$tw-clr-base-pink-200: #E7B9CD;
+$tw-clr-base-pink-300: #DC97B5;
+$tw-clr-base-pink-400: #D0749B;
+$tw-clr-base-pink-500: #C34D7F;
+$tw-clr-base-pink-600: #A13664;
+$tw-clr-base-pink-700: #7A294C;
+$tw-clr-base-pink-800: #531C34;
+$tw-clr-base-purple-050: #F4EFF9;
+$tw-clr-base-purple-100: #E8DEF2;
+$tw-clr-base-purple-200: #D3BEE6;
+$tw-clr-base-purple-300: #BD9FDA;
+$tw-clr-base-purple-400: #A880CE;
+$tw-clr-base-purple-500: #9360C1;
+$tw-clr-base-purple-600: #7A43AD;
+$tw-clr-base-purple-700: #5D3383;
+$tw-clr-base-purple-800: #3E2359;
+$tw-clr-base-red-050: #FAEEED;
+$tw-clr-base-red-100: #F4DBD9;
+$tw-clr-base-red-200: #EBBAB7;
+$tw-clr-base-red-300: #E19893;
+$tw-clr-base-red-400: #D7756F;
+$tw-clr-base-red-500: #CB4D45;
+$tw-clr-base-red-600: #A8362F;
+$tw-clr-base-red-700: #802923;
+$tw-clr-base-red-800: #571C18;
+$tw-clr-base-yellow-050: #F5F1DC;
+$tw-clr-base-yellow-100: #EBE2B5;
+$tw-clr-base-yellow-200: #D7C76F;
+$tw-clr-base-yellow-300: #C0AB35;
+$tw-clr-base-yellow-400: #A3912D;
+$tw-clr-base-yellow-500: #867725;
+$tw-clr-base-yellow-600: #6A5E1D;
+$tw-clr-base-yellow-700: #504716;
+$tw-clr-base-yellow-800: #36300F;
+$tw-clr-bg: #FFFFFF;
+$tw-clr-bg-active: #F1F0EC;
+$tw-clr-bg-ghost: rgba(#FFFFFF, 0);
+$tw-clr-bg-ghost-active: rgba(#B2AB93, 0.4);
+$tw-clr-bg-ghost-hover: rgba(#B2AB93, 0.2);
+$tw-clr-bg-hover: #F9F8F7;
+$tw-clr-bg-inverse: #333025;
+$tw-clr-bg-secondary: #F1F0EC;
+$tw-clr-bg-secondary-active: #E3E1D9;
+$tw-clr-bg-secondary-hover: #EBEAE4;
+$tw-clr-bg-tertiary: #CBC6B7;
+$tw-clr-bg-tertiary-active: #B2AB93;
+$tw-clr-bg-tertiary-hover: linear-gradient(rgba(#B2AB93, 0.5), rgba(#B2AB93, 0.5)), linear-gradient(#CBC6B7, #CBC6B7);
+$tw-clr-brdr: #333025;
+$tw-clr-brdr-active: mix(#4658AA, #6172BE, 50%);
+$tw-clr-brdr-focus: #4658AA;
+$tw-clr-brdr-hover: #6172BE;
+$tw-clr-brdr-secondary: #7F775B;
+$tw-clr-brdr-tertiary: #B2AB93;
+$tw-clr-icn: #333025;
+$tw-clr-icn-inverse: #FFFFFF;
+$tw-clr-icn-secondary: #7F775B;
+$tw-clr-shdw: #333025;
+$tw-clr-txt: #333025;
+$tw-clr-txt-inverse: #FFFFFF;
+$tw-clr-txt-secondary: #7F775B;
+$tw-clr-txt-tertiary: #B2AB93;
+$tw-clr-bg-brand: #2C8658;
+$tw-clr-bg-brand-active: #236A46;
+$tw-clr-bg-brand-ghost: rgba(#2C8658, 0);
+$tw-clr-bg-brand-ghost-active: rgba(#2C8658, 0.2);
+$tw-clr-bg-brand-ghost-hover: rgba(#2C8658, 0.1);
+$tw-clr-bg-brand-hover: linear-gradient(rgba(#236A46, 0.5), rgba(#236A46, 0.5)), linear-gradient(#2C8658, #2C8658);
+$tw-clr-bg-brand-tertiary: #E2F6EC;
+$tw-clr-brdr-brand: #2C8658;
+$tw-clr-icn-brand: #2C8658;
+$tw-clr-icn-on-brand: #FFFFFF;
+$tw-clr-txt-brand: #2C8658;
+$tw-clr-txt-on-brand: #FFFFFF;
+$tw-clr-bg-danger: #CB4D45;
+$tw-clr-bg-danger-active: #A8362F;
+$tw-clr-bg-danger-ghost: rgba(#CB4D45, 0);
+$tw-clr-bg-danger-ghost-active: rgba(#CB4D45, 0.2);
+$tw-clr-bg-danger-ghost-hover: rgba(#CB4D45, 0.1);
+$tw-clr-bg-danger-hover: linear-gradient(rgba(#A8362F, 0.5), rgba(#A8362F, 0.5)), linear-gradient(#CB4D45, #CB4D45);
+$tw-clr-bg-danger-tertiary: #FAEEED;
+$tw-clr-brdr-danger: #CB4D45;
+$tw-clr-brdr-danger-active: #A8362F;
+$tw-clr-brdr-danger-hover: linear-gradient(rgba(#A8362F, 0.5), rgba(#A8362F, 0.5)), linear-gradient(#CB4D45, #CB4D45);
+$tw-clr-icn-danger: #CB4D45;
+$tw-clr-icn-on-danger: #FFFFFF;
+$tw-clr-txt-danger: #CB4D45;
+$tw-clr-txt-on-danger: #FFFFFF;
+$tw-clr-bg-info: #7F775B;
+$tw-clr-bg-info-tertiary: #F1F0EC;
+$tw-clr-brdr-info: #7F775B;
+$tw-clr-icn-info: #7F775B;
+$tw-clr-icn-on-info: #FFFFFF;
+$tw-clr-txt-info: #645E48;
+$tw-clr-txt-on-info: #FFFFFF;
+$tw-clr-bg-selected: #6172BE;
+$tw-clr-bg-selected-tertiary: #EFF1F8;
+$tw-clr-bg-selected-ghost: rgba(#6172BE, 0);
+$tw-clr-bg-selected-ghost-active: rgba(#6172BE, 0.2);
+$tw-clr-bg-selected-ghost-hover: rgba(#6172BE, 0.1);
+$tw-clr-brdr-selected: #6172BE;
+$tw-clr-icn-on-selected: #FFFFFF;
+$tw-clr-icn-selected: #6172BE;
+$tw-clr-txt-on-selected: #FFFFFF;
+$tw-clr-txt-selected: #6172BE;
+$tw-clr-bg-success: #5D822B;
+$tw-clr-bg-success-tertiary: #EAF3DC;
+$tw-clr-bg-success-active: #496622;
+$tw-clr-bg-success-hover: linear-gradient(rgba(#496622, 0.5), rgba(#496622, 0.5)), linear-gradient(#5D822B, #5D822B);
+$tw-clr-brdr-success: #5D822B;
+$tw-clr-icn-on-success: #FFFFFF;
+$tw-clr-icn-success: #5D822B;
+$tw-clr-txt-on-success: #FFFFFF;
+$tw-clr-txt-success: #5D822B;
+$tw-clr-bg-warning: #A36A2D;
+$tw-clr-bg-warning-active: #815424;
+$tw-clr-bg-warning-hover: linear-gradient(rgba(#815424, 0.5), rgba(#815424, 0.5)), linear-gradient(#A36A2D, #A36A2D);
+$tw-clr-bg-warning-tertiary: #F8EFE5;
+$tw-clr-brdr-warning: #A36A2D;
+$tw-clr-brdr-warning-active: #815424;
+$tw-clr-brdr-warning-hover: linear-gradient(rgba(#815424, 0.5), rgba(#815424, 0.5)), linear-gradient(#A36A2D, #A36A2D);
+$tw-clr-icn-on-warning: #FFFFFF;
+$tw-clr-icn-warning: #A36A2D;
+$tw-clr-txt-on-warning: #FFFFFF;
+$tw-clr-txt-warning: #A36A2D;
+$tw-clr-bg-accent: #EF7047;
+$tw-clr-txt-accent: #EF7047;
+$tw-clr-txt-on-accent: #FFFFFF;
+$tw-clr-bg-accent-aux: #7473BA;
+$tw-clr-txt-accent-aux: #7473BA;
+$tw-elvtn-base-200: 0 2px 4px 0 rgba(51, 48, 37, 0.2);
+$tw-elvtn-base-400: 0 4px 8px 0 rgba(51, 48, 37, 0.2);
+$tw-elvtn-base-600: 0 8px 16px 0 rgba(51, 48, 37, 0.2);
+$tw-elvtn-base-800: 0 16px 32px 0 rgba(51, 48, 37, 0.2);
+$tw-fnt-dlg-bx-message-font-family: 'Inter', sans-serif;
+$tw-fnt-dlg-bx-message-font-size: 16px;
+$tw-fnt-dlg-bx-message-font-weight: 400;
+$tw-fnt-dlg-bx-message-line-height: 24px;
+$tw-fnt-dlg-bx-title-font-family: 'Inter', sans-serif;
+$tw-fnt-dlg-bx-title-font-size: 20px;
+$tw-fnt-dlg-bx-title-font-weight: 600;
+$tw-fnt-dlg-bx-title-line-height: 28px;
+$tw-fnt-mssg-body-font-family: 'Inter', sans-serif;
+$tw-fnt-mssg-body-font-size: 16px;
+$tw-fnt-mssg-body-font-weight: 400;
+$tw-fnt-mssg-body-line-height: 24px;
+$tw-fnt-mssg-title-font-family: 'Inter', sans-serif;
+$tw-fnt-mssg-title-font-size: 16px;
+$tw-fnt-mssg-title-font-weight: 600;
+$tw-fnt-mssg-title-line-height: 24px;
+$tw-sz-nvgtn-side-nav-item-indicator: 4px;
+$tw-sz-nvgtn-side-nav-width: 200px;
+$tw-fnt-nvgtn-side-nav-item-label-font-family: 'Inter', sans-serif;
+$tw-fnt-nvgtn-side-nav-item-label-font-size: 14px;
+$tw-fnt-nvgtn-side-nav-item-label-font-weight: 500;
+$tw-fnt-nvgtn-side-nav-item-label-line-height: 16px;
+$tw-fnt-nvgtn-side-nav-section-title-font-family: 'Inter', sans-serif;
+$tw-fnt-nvgtn-side-nav-section-title-font-size: 12px;
+$tw-fnt-nvgtn-side-nav-section-title-font-weight: 400;
+$tw-fnt-nvgtn-side-nav-section-title-line-height: 16px;
+$tw-fnt-nvgtn-side-nav-section-title-text-transform: uppercase;
+$tw-fnt-prgrss-circle-value-large-font-family: 'Inter', sans-serif;
+$tw-fnt-prgrss-circle-value-large-font-size: 48px;
+$tw-fnt-prgrss-circle-value-large-font-weight: 400;
+$tw-fnt-prgrss-circle-value-large-line-height: 60px;
+$tw-fnt-prgrss-circle-value-medium-font-family: 'Inter', sans-serif;
+$tw-fnt-prgrss-circle-value-medium-font-size: 24px;
+$tw-fnt-prgrss-circle-value-medium-font-weight: 400;
+$tw-fnt-prgrss-circle-value-medium-line-height: 32px;
+$tw-fnt-prgrss-circle-value-small-font-family: 'Inter', sans-serif;
+$tw-fnt-prgrss-circle-value-small-font-size: 12px;
+$tw-fnt-prgrss-circle-value-small-font-weight: 400;
+$tw-fnt-prgrss-circle-value-small-line-height: 16px;
+$tw-opcty-base-000: 0;
+$tw-opcty-base-010: 0.1;
+$tw-opcty-base-020: 0.2;
+$tw-opcty-base-030: 0.3;
+$tw-opcty-base-040: 0.4;
+$tw-opcty-base-050: 0.5;
+$tw-opcty-base-060: 0.6;
+$tw-opcty-base-070: 0.7;
+$tw-opcty-base-080: 0.8;
+$tw-opcty-base-090: 0.9;
+$tw-opcty-base-100: 1;
+$tw-opcty-semantic-off: 0.5;
+$tw-spc-base-large: 32px;
+$tw-spc-base-medium: 24px;
+$tw-spc-base-none: 0;
+$tw-spc-base-small: 16px;
+$tw-spc-base-x-large: 48px;
+$tw-spc-base-x-small: 8px;
+$tw-spc-base-xx-large: 64px;
+$tw-spc-base-xx-small: 4px;
+$tw-sz-base-large: 32px;
+$tw-sz-base-medium: 24px;
+$tw-sz-base-none: 0;
+$tw-sz-base-small: 16px;
+$tw-sz-base-x-large: 48px;
+$tw-sz-base-x-small: 8px;
+$tw-sz-base-xx-large: 64px;
+$tw-sz-base-xx-small: 4px;
+$tw-sz-icon-large: 32px;
+$tw-sz-icon-medium: 24px;
+$tw-sz-icon-small: 16px;
+$tw-sz-icon-x-large: 48px;
+$tw-fnt-base-body-01-regular-font-family: 'Inter', sans-serif;
+$tw-fnt-base-body-01-regular-font-size: 20px;
+$tw-fnt-base-body-01-regular-font-weight: 400;
+$tw-fnt-base-body-01-regular-line-height: 28px;
+$tw-fnt-base-body-02-regular-font-family: 'Inter', sans-serif;
+$tw-fnt-base-body-02-regular-font-size: 16px;
+$tw-fnt-base-body-02-regular-font-weight: 400;
+$tw-fnt-base-body-02-regular-line-height: 24px;
+$tw-fnt-base-body-03-regular-font-family: 'Inter', sans-serif;
+$tw-fnt-base-body-03-regular-font-size: 14px;
+$tw-fnt-base-body-03-regular-font-weight: 400;
+$tw-fnt-base-body-03-regular-line-height: 20px;
+$tw-fnt-base-body-04-regular-font-family: 'Inter', sans-serif;
+$tw-fnt-base-body-04-regular-font-size: 12px;
+$tw-fnt-base-body-04-regular-font-weight: 400;
+$tw-fnt-base-body-04-regular-line-height: 16px;
+$tw-fnt-base-display-01-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-display-01-bold-font-size: 84px;
+$tw-fnt-base-display-01-bold-font-weight: 700;
+$tw-fnt-base-display-01-bold-line-height: 108px;
+$tw-fnt-base-display-02-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-display-02-bold-font-size: 72px;
+$tw-fnt-base-display-02-bold-font-weight: 700;
+$tw-fnt-base-display-02-bold-line-height: 92px;
+$tw-fnt-base-display-03-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-display-03-bold-font-size: 60px;
+$tw-fnt-base-display-03-bold-font-weight: 700;
+$tw-fnt-base-display-03-bold-line-height: 76px;
+$tw-fnt-base-display-04-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-display-04-bold-font-size: 48px;
+$tw-fnt-base-display-04-bold-font-weight: 700;
+$tw-fnt-base-display-04-bold-line-height: 60px;
+$tw-fnt-base-headline-01-semi-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-headline-01-semi-bold-font-size: 48px;
+$tw-fnt-base-headline-01-semi-bold-font-weight: 600;
+$tw-fnt-base-headline-01-semi-bold-line-height: 60px;
+$tw-fnt-base-headline-02-semi-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-headline-02-semi-bold-font-size: 40px;
+$tw-fnt-base-headline-02-semi-bold-font-weight: 600;
+$tw-fnt-base-headline-02-semi-bold-line-height: 52px;
+$tw-fnt-base-headline-03-semi-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-headline-03-semi-bold-font-size: 34px;
+$tw-fnt-base-headline-03-semi-bold-font-weight: 600;
+$tw-fnt-base-headline-03-semi-bold-line-height: 44px;
+$tw-fnt-base-headline-04-semi-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-headline-04-semi-bold-font-size: 28px;
+$tw-fnt-base-headline-04-semi-bold-font-weight: 600;
+$tw-fnt-base-headline-04-semi-bold-line-height: 36px;
+$tw-fnt-base-headline-05-semi-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-headline-05-semi-bold-font-size: 24px;
+$tw-fnt-base-headline-05-semi-bold-font-weight: 600;
+$tw-fnt-base-headline-05-semi-bold-line-height: 32px;
+$tw-fnt-base-headline-06-semi-bold-font-family: 'Inter', sans-serif;
+$tw-fnt-base-headline-06-semi-bold-font-size: 20px;
+$tw-fnt-base-headline-06-semi-bold-font-weight: 600;
+$tw-fnt-base-headline-06-semi-bold-line-height: 28px;
+$tw-fnt-base-font-family: 'Inter', sans-serif;
+$tw-fnt-base-font-size-body-01: 20px;
+$tw-fnt-base-font-size-body-02: 16px;
+$tw-fnt-base-font-size-body-03: 14px;
+$tw-fnt-base-font-size-body-04: 12px;
+$tw-fnt-base-font-size-display-01: 84px;
+$tw-fnt-base-font-size-display-02: 72px;
+$tw-fnt-base-font-size-display-03: 60px;
+$tw-fnt-base-font-size-display-04: 48px;
+$tw-fnt-base-font-size-headline-01: 48px;
+$tw-fnt-base-font-size-headline-02: 40px;
+$tw-fnt-base-font-size-headline-03: 34px;
+$tw-fnt-base-font-size-headline-04: 28px;
+$tw-fnt-base-font-size-headline-05: 24px;
+$tw-fnt-base-font-size-headline-06: 20px;
+$tw-fnt-base-font-weight: 400;
+$tw-fnt-base-font-weight-bold: 700;
+$tw-fnt-base-font-weight-medium: 500;
+$tw-fnt-base-font-weight-semi-bold: 600;
+$tw-fnt-base-line-height-body-01: 28px;
+$tw-fnt-base-line-height-body-02: 24px;
+$tw-fnt-base-line-height-body-03: 20px;
+$tw-fnt-base-line-height-body-04: 16px;
+$tw-fnt-base-line-height-display-01: 108px;
+$tw-fnt-base-line-height-display-02: 92px;
+$tw-fnt-base-line-height-display-03: 76px;
+$tw-fnt-base-line-height-display-04: 60px;
+$tw-fnt-base-line-height-headline-01: 60px;
+$tw-fnt-base-line-height-headline-02: 52px;
+$tw-fnt-base-line-height-headline-03: 44px;
+$tw-fnt-base-line-height-headline-04: 36px;
+$tw-fnt-base-line-height-headline-05: 32px;
+$tw-fnt-base-line-height-headline-06: 28px;
+$tw-rds-frm-fld-text-input: 4px;
+$tw-sz-frm-fld-text-input-stroke: 1px;
+$tw-sz-frm-fld-text-input-stroke-active: 2px;
+$tw-sz-frm-fld-textarea-input-height: 24px * 2.5;
+$tw-fnt-frm-fld-error-text-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-error-text-font-size: 14px;
+$tw-fnt-frm-fld-error-text-font-weight: 500;
+$tw-fnt-frm-fld-error-text-line-height: 20px;
+$tw-fnt-frm-fld-help-text-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-help-text-font-size: 14px;
+$tw-fnt-frm-fld-help-text-font-weight: 400;
+$tw-fnt-frm-fld-help-text-line-height: 20px;
+$tw-fnt-frm-fld-label-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-label-font-size: 14px;
+$tw-fnt-frm-fld-label-font-weight: 400;
+$tw-fnt-frm-fld-label-line-height: 20px;
+$tw-fnt-frm-fld-radio-button-checkbox-selection-label-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-radio-button-checkbox-selection-label-font-size: 16px;
+$tw-fnt-frm-fld-radio-button-checkbox-selection-label-font-weight: 500;
+$tw-fnt-frm-fld-radio-button-checkbox-selection-label-line-height: 24px;
+$tw-fnt-frm-fld-select-value-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-select-value-font-size: 16px;
+$tw-fnt-frm-fld-select-value-font-weight: 500;
+$tw-fnt-frm-fld-select-value-line-height: 24px;
+$tw-fnt-frm-fld-text-placeholder-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-text-placeholder-font-size: 16px;
+$tw-fnt-frm-fld-text-placeholder-font-weight: 500;
+$tw-fnt-frm-fld-text-placeholder-line-height: 24px;
+$tw-fnt-frm-fld-text-value-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-text-value-font-size: 16px;
+$tw-fnt-frm-fld-text-value-font-weight: 500;
+$tw-fnt-frm-fld-text-value-line-height: 24px;
+$tw-fnt-frm-fld-warning-text-font-family: 'Inter', sans-serif;
+$tw-fnt-frm-fld-warning-text-font-size: 14px;
+$tw-fnt-frm-fld-warning-text-font-weight: 500;
+$tw-fnt-frm-fld-warning-text-line-height: 20px;

package/theme.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _TerrawareTheme = _interopRequireDefault(require("./style-dictionary-dist/TerrawareTheme"));
+const defaultTheme = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1400 // custom xl to transition background on Home page
+    }
+  },
+  typography: {
+    fontFamily: 'Inter'
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '*::-webkit-scrollbar': {
+          WebkitAppearance: 'none',
+          width: '4px',
+          height: '7px',
+          backgroundColor: '#B2AB9340'
+        },
+        '*::-webkit-scrollbar-thumb': {
+          borderRadius: '4px',
+          backgroundColor: '#6C757D'
+        },
+        body: {
+          color: '#3a4445'
+        }
+      }
+    }
+  },
+  palette: {
+    primary: {
+      main: '#0067C8'
+    },
+    secondary: {
+      main: '#D40002'
+    },
+    state: {
+      5: '#CD5B38'
+    },
+    accent: {
+      1: '#315CAF',
+      2: '#EF9644',
+      3: '#CD5B38',
+      4: '#3F96E6'
+    },
+    neutral: {
+      50: '#F8F9FA',
+      100: '#F3F4F6',
+      200: '#E9ECEF',
+      400: '#CED4DA',
+      500: '#ADB5BD',
+      600: '#6C757D',
+      700: '#495057',
+      800: '#343A40'
+    },
+    blue: {
+      600: '#0067C8'
+    },
+    red: {
+      50: '#FFF1F1',
+      600: '#D40002'
+    },
+    green: {
+      50: '#D6FDE5',
+      600: '#27764E'
+    },
+    gray: {
+      200: '#CAD2D3',
+      800: '#3A4445'
+    }
+  }
+};
+var _default = exports.default = (0, _styles.createTheme)((0, _utils.deepmerge)(defaultTheme, _TerrawareTheme.default));

package/utils/date.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tz = exports.isInTheFuture = exports.getTodaysDateFormatted = exports.getShortDate = exports.getDate = exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _luxon = require("luxon");
+/**
+ * Accepted date types for input are:
+ * - string for any date ISO string representation
+ * - number for timestamp
+ * - JS Date
+ * - luxon DateTime
+ */
+
+/**
+ * Helper util that returns default time zone as a fallback.
+ */
+const tz = timeZoneId => timeZoneId || 'Etc/UTC';
+
+/**
+ * Parse a date ISO string with zone implied.
+ * eg. '2023-01-10 in 'America/Los_Angeles'
+ */
+exports.tz = tz;
+const getDateFromISOString = (date, timeZoneId) => {
+  return _luxon.DateTime.fromISO(date, {
+    zone: tz(timeZoneId)
+  });
+};
+
+/**
+ * Parse a date from milliseconds, with time zone implied.
+ */
+const getDateFromMillis = (date, timeZoneId) => {
+  const millis = new Date(date).getTime();
+  return _luxon.DateTime.fromMillis(millis, {
+    zone: tz(timeZoneId)
+  });
+};
+
+/**
+ * Return the display value for a date in ISO 8601 format.
+ */
+const getDisplayValue = date => {
+  if (date.isValid) {
+    return date.toFormat('yyyy-MM-dd');
+  }
+  return date.toString();
+};
+
+/**
+ * Returns <Month> <Year> (eg. July 2023).
+ */
+const getShortDate = date => {
+  if (date.isValid) {
+    return date.toFormat('LLLL yyyy');
+  }
+  return date.toString();
+};
+
+/**
+ * Utility that constructs a valid DateTime object from
+ * any DateType value passed in (ISO string or epoch milliseconds or DateTime object).
+ * Note: the DateTime object input support is mostly for ease of use and will essentially be a pass-through.
+ */
+exports.getShortDate = getShortDate;
+const getDate = (date, timeZoneId) => {
+  if (typeof date === 'string') {
+    const fromString = getDateFromISOString(date, timeZoneId);
+    if (fromString.isValid) {
+      return fromString;
+    }
+  }
+  if (typeof date === 'number') {
+    const fromMillis = getDateFromMillis(date, timeZoneId);
+    if (fromMillis.isValid) {
+      return fromMillis;
+    }
+  }
+  if (_lodash.default.isDate(date) || typeof date === 'string' || typeof date === 'number') {
+    return _luxon.DateTime.fromJSDate(new Date(date), {
+      zone: tz(timeZoneId)
+    });
+  }
+  return date.setZone(tz(timeZoneId));
+};
+
+/**
+ * Default export function that provides a display value for a date
+ * with optional implied time zone.
+ */
+exports.getDate = getDate;
+const getDateDisplayValue = (date, timeZoneId) => {
+  if (typeof date === 'string' && date.match(/^\d\d\d\d-\d\d-\d\d$/)) {
+    // if already in display format, return as-is, do not apply time zone
+    return date;
+  }
+  const dateObj = getDate(date, timeZoneId);
+  return getDisplayValue(dateObj);
+};
+
+/**
+ * Exported function that returns todays date in a specific (optional) time zone.
+ */
+const getTodaysDateFormatted = timeZoneId => {
+  return getDisplayValue(_luxon.DateTime.now().setZone(tz(timeZoneId)));
+};
+
+/**
+ * Checks if a date is in the future, time zone for date is optional.
+ */
+exports.getTodaysDateFormatted = getTodaysDateFormatted;
+const isInTheFuture = (date, timeZoneId) => {
+  const d = getDate(date, timeZoneId);
+  if (d.isValid) {
+    return d.toMillis() > Date.now();
+  }
+  return false;
+};
+exports.isInTheFuture = isInTheFuture;
+var _default = exports.default = getDateDisplayValue;