@breadstone/mosaik-themes 0.0.173 → 0.0.174

package/Themes/joy-tokens.scss

@@ -0,0 +1,498 @@
+$name: "joy";
+$font-family: Nunito, sans-serif;
+$layout-radius: 12px;
+$layout-space: 8px;
+$layout-thickness: 2px;
+$scheme-light-background: #eaeaea;
+$scheme-light-foreground: #3c454f;
+$scheme-light-highlight: #d1d1d1;
+$scheme-light-middlelight: #8a8a8a;
+$scheme-light-lowlight: #5c5c5c;
+$scheme-light-transparent: rgba(255, 255, 255, 0);
+$scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
+$scheme-light-disabled: #686868;
+$scheme-light-contrast: #ffffff;
+$scheme-light-selection: rgba(204, 204, 204, 0.44);
+$scheme-dark-background: #151515;
+$scheme-dark-foreground: #c3bab0;
+$scheme-dark-highlight: #2e2e2e;
+$scheme-dark-middlelight: #757575;
+$scheme-dark-lowlight: #a3a3a3;
+$scheme-dark-transparent: rgba(255, 255, 255, 0);
+$scheme-dark-semi-transparent: rgba(255, 255, 255, 0.03);
+$scheme-dark-disabled: #474747;
+$scheme-dark-contrast: #000000;
+$scheme-dark-selection: rgba(204, 204, 204, 0.44);
+$color-light-primary-0: #ffffff;
+$color-light-primary-50: #fce4ec;
+$color-light-primary-100: #f8bcd0;
+$color-light-primary-200: #f48fb1;
+$color-light-primary-300: #f06292;
+$color-light-primary-400: #ec407a;
+$color-light-primary-500: #e91e63;
+$color-light-primary-600: #cb1a56;
+$color-light-primary-700: #a31545;
+$color-light-primary-800: #7e1035;
+$color-light-primary-900: #3a0819;
+$color-light-secondary-0: #ffffff;
+$color-light-secondary-50: #e6f6e9;
+$color-light-secondary-100: #c3e8c9;
+$color-light-secondary-200: #9bd9a7;
+$color-light-secondary-300: #70cb83;
+$color-light-secondary-400: #4dbf68;
+$color-light-secondary-500: #21b34d;
+$color-light-secondary-600: #16a444;
+$color-light-secondary-700: #009238;
+$color-light-secondary-800: #00812d;
+$color-light-secondary-900: #006218;
+$color-light-tertiary-0: #ffffff;
+$color-light-tertiary-50: #e1f5fc;
+$color-light-tertiary-100: #b4e6f7;
+$color-light-tertiary-200: #84d5f3;
+$color-light-tertiary-300: #56c5ee;
+$color-light-tertiary-400: #35b8eb;
+$color-light-tertiary-500: #19ace9;
+$color-light-tertiary-600: #139edb;
+$color-light-tertiary-700: #098bc7;
+$color-light-tertiary-800: #087ab4;
+$color-light-tertiary-900: #005a92;
+$color-light-info-0: #ffffff;
+$color-light-info-50: #f4faff;
+$color-light-info-100: #ddf1ff;
+$color-light-info-200: #addbff;
+$color-light-info-300: #6fb6ff;
+$color-light-info-400: #3990ff;
+$color-light-info-500: #096bde;
+$color-light-info-600: #054da7;
+$color-light-info-700: #02367d;
+$color-light-info-800: #072859;
+$color-light-info-900: #00153c;
+$color-light-warning-0: #ffffff;
+$color-light-warning-50: #fff8c5;
+$color-light-warning-100: #fae17d;
+$color-light-warning-200: #eac54f;
+$color-light-warning-300: #d4a72c;
+$color-light-warning-400: #bf8700;
+$color-light-warning-500: #9a6700;
+$color-light-warning-600: #7d4e00;
+$color-light-warning-700: #633c01;
+$color-light-warning-800: #4d2d00;
+$color-light-warning-900: #3b2300;
+$color-light-danger-0: #ffffff;
+$color-light-danger-50: #fff8f6;
+$color-light-danger-100: #ffe9e8;
+$color-light-danger-200: #ffc7c5;
+$color-light-danger-300: #ff9192;
+$color-light-danger-400: #fa5255;
+$color-light-danger-500: #d3232f;
+$color-light-danger-600: #a10e25;
+$color-light-danger-700: #77061b;
+$color-light-danger-800: #580013;
+$color-light-danger-900: #39000d;
+$color-light-success-0: #ffffff;
+$color-light-success-50: #f3fef5;
+$color-light-success-100: #d7f5dd;
+$color-light-success-200: #77ec95;
+$color-light-success-300: #4cc76e;
+$color-light-success-400: #2ca24d;
+$color-light-success-500: #1a7d36;
+$color-light-success-600: #0f5d26;
+$color-light-success-700: #034318;
+$color-light-success-800: #002f0f;
+$color-light-success-900: #001d09;
+$color-light-highlight-0: #ffffff;
+$color-light-highlight-50: #fdf7ff;
+$color-light-highlight-100: #f4eaff;
+$color-light-highlight-200: #e1cbff;
+$color-light-highlight-300: #c69eff;
+$color-light-highlight-400: #a374f9;
+$color-light-highlight-500: #814dde;
+$color-light-highlight-600: #5f35ae;
+$color-light-highlight-700: #452382;
+$color-light-highlight-800: #301761;
+$color-light-highlight-900: #1d0a42;
+$color-light-neutral-0: #ffffff;
+$color-light-neutral-50: #f7f7f8;
+$color-light-neutral-100: #ebebef;
+$color-light-neutral-200: #d8d8df;
+$color-light-neutral-300: #b9b9c6;
+$color-light-neutral-400: #8f8fa3;
+$color-light-neutral-500: #73738c;
+$color-light-neutral-600: #5a5a72;
+$color-light-neutral-700: #434356;
+$color-light-neutral-800: #25252d;
+$color-light-neutral-900: #131318;
+$color-dark-primary-0: #000000;
+$color-dark-primary-50: #3a0819;
+$color-dark-primary-100: #7e1035;
+$color-dark-primary-200: #a31545;
+$color-dark-primary-300: #cb1a56;
+$color-dark-primary-400: #e91e63;
+$color-dark-primary-500: #ec407a;
+$color-dark-primary-600: #f06292;
+$color-dark-primary-700: #f48fb1;
+$color-dark-primary-800: #f8bcd0;
+$color-dark-primary-900: #fce4ec;
+$color-dark-secondary-0: #000000;
+$color-dark-secondary-50: #006218;
+$color-dark-secondary-100: #00812d;
+$color-dark-secondary-200: #009238;
+$color-dark-secondary-300: #16a444;
+$color-dark-secondary-400: #21b34d;
+$color-dark-secondary-500: #4dbf68;
+$color-dark-secondary-600: #70cb83;
+$color-dark-secondary-700: #9bd9a7;
+$color-dark-secondary-800: #c3e8c9;
+$color-dark-secondary-900: #e6f6e9;
+$color-dark-tertiary-0: #000000;
+$color-dark-tertiary-50: #005a92;
+$color-dark-tertiary-100: #087ab4;
+$color-dark-tertiary-200: #098bc7;
+$color-dark-tertiary-300: #139edb;
+$color-dark-tertiary-400: #19ace9;
+$color-dark-tertiary-500: #35b8eb;
+$color-dark-tertiary-600: #56c5ee;
+$color-dark-tertiary-700: #84d5f3;
+$color-dark-tertiary-800: #b4e6f7;
+$color-dark-tertiary-900: #e1f5fc;
+$color-dark-info-0: #000000;
+$color-dark-info-50: #00153c;
+$color-dark-info-100: #072859;
+$color-dark-info-200: #02367d;
+$color-dark-info-300: #054da7;
+$color-dark-info-400: #096bde;
+$color-dark-info-500: #3990ff;
+$color-dark-info-600: #6fb6ff;
+$color-dark-info-700: #addbff;
+$color-dark-info-800: #ddf1ff;
+$color-dark-info-900: #f4faff;
+$color-dark-warning-0: #000000;
+$color-dark-warning-50: #3b2300;
+$color-dark-warning-100: #4d2d00;
+$color-dark-warning-200: #633c01;
+$color-dark-warning-300: #7d4e00;
+$color-dark-warning-400: #9a6700;
+$color-dark-warning-500: #bf8700;
+$color-dark-warning-600: #d4a72c;
+$color-dark-warning-700: #eac54f;
+$color-dark-warning-800: #fae17d;
+$color-dark-warning-900: #fff8c5;
+$color-dark-danger-0: #000000;
+$color-dark-danger-50: #39000d;
+$color-dark-danger-100: #580013;
+$color-dark-danger-200: #77061b;
+$color-dark-danger-300: #a10e25;
+$color-dark-danger-400: #d3232f;
+$color-dark-danger-500: #fa5255;
+$color-dark-danger-600: #ff9192;
+$color-dark-danger-700: #ffc7c5;
+$color-dark-danger-800: #ffe9e8;
+$color-dark-danger-900: #fff8f6;
+$color-dark-success-0: #000000;
+$color-dark-success-50: #001d09;
+$color-dark-success-100: #002f0f;
+$color-dark-success-200: #034318;
+$color-dark-success-300: #0f5d26;
+$color-dark-success-400: #1a7d36;
+$color-dark-success-500: #2ca24d;
+$color-dark-success-600: #4cc76e;
+$color-dark-success-700: #77ec95;
+$color-dark-success-800: #d7f5dd;
+$color-dark-success-900: #f3fef5;
+$color-dark-highlight-0: #000000;
+$color-dark-highlight-50: #1d0a42;
+$color-dark-highlight-100: #301761;
+$color-dark-highlight-200: #452382;
+$color-dark-highlight-300: #5f35ae;
+$color-dark-highlight-400: #814dde;
+$color-dark-highlight-500: #a374f9;
+$color-dark-highlight-600: #c69eff;
+$color-dark-highlight-700: #e1cbff;
+$color-dark-highlight-800: #f4eaff;
+$color-dark-highlight-900: #fdf7ff;
+$color-dark-neutral-0: #000000;
+$color-dark-neutral-50: #131318;
+$color-dark-neutral-100: #25252d;
+$color-dark-neutral-200: #434356;
+$color-dark-neutral-300: #5a5a72;
+$color-dark-neutral-400: #73738c;
+$color-dark-neutral-500: #8f8fa3;
+$color-dark-neutral-600: #b9b9c6;
+$color-dark-neutral-700: #d8d8df;
+$color-dark-neutral-800: #ebebef;
+$color-dark-neutral-900: #f7f7f8;
+$typography-headline1-font-size: 96px;
+$typography-headline1-line-height: 100px;
+$typography-headline1-font-weight: 300;
+$typography-headline1-letter-spacing: -0.25px;
+$typography-headline1-text-decoration: none;
+$typography-headline1-text-transform: none;
+$typography-headline2-font-size: 60px;
+$typography-headline2-line-height: 64px;
+$typography-headline2-font-weight: 300;
+$typography-headline2-letter-spacing: -0.13333333333333333px;
+$typography-headline2-text-decoration: none;
+$typography-headline2-text-transform: none;
+$typography-headline3-font-size: 48px;
+$typography-headline3-line-height: 52px;
+$typography-headline3-font-weight: 400;
+$typography-headline3-letter-spacing: normal;
+$typography-headline3-text-decoration: none;
+$typography-headline3-text-transform: none;
+$typography-headline4-font-size: 34px;
+$typography-headline4-line-height: 38px;
+$typography-headline4-font-weight: 400;
+$typography-headline4-letter-spacing: 0.11764705882352941px;
+$typography-headline4-text-decoration: none;
+$typography-headline4-text-transform: none;
+$typography-headline5-font-size: 24px;
+$typography-headline5-line-height: 28px;
+$typography-headline5-font-weight: 400;
+$typography-headline5-letter-spacing: normal;
+$typography-headline5-text-decoration: none;
+$typography-headline5-text-transform: none;
+$typography-headline6-font-size: 20px;
+$typography-headline6-line-height: 24px;
+$typography-headline6-font-weight: 500;
+$typography-headline6-letter-spacing: 0.2px;
+$typography-headline6-text-decoration: none;
+$typography-headline6-text-transform: none;
+$typography-subtitle1-font-size: 16px;
+$typography-subtitle1-line-height: 20px;
+$typography-subtitle1-font-weight: 400;
+$typography-subtitle1-letter-spacing: 0.15px;
+$typography-subtitle1-text-decoration: none;
+$typography-subtitle1-text-transform: none;
+$typography-subtitle2-font-size: 14px;
+$typography-subtitle2-line-height: 18px;
+$typography-subtitle2-font-weight: 500;
+$typography-subtitle2-letter-spacing: 0.1142857142857143px;
+$typography-subtitle2-text-decoration: none;
+$typography-subtitle2-text-transform: none;
+$typography-body1-font-size: 16px;
+$typography-body1-line-height: 20px;
+$typography-body1-font-weight: 400;
+$typography-body1-letter-spacing: 0.5px;
+$typography-body1-text-decoration: none;
+$typography-body1-text-transform: none;
+$typography-body2-font-size: 14px;
+$typography-body2-line-height: 18px;
+$typography-body2-font-weight: 400;
+$typography-body2-letter-spacing: 0.2857142857142857px;
+$typography-body2-text-decoration: none;
+$typography-body2-text-transform: none;
+$typography-caption-font-size: 12px;
+$typography-caption-line-height: 16px;
+$typography-caption-font-weight: 400;
+$typography-caption-letter-spacing: 0.5333333333333333px;
+$typography-caption-text-decoration: none;
+$typography-caption-text-transform: none;
+$typography-button-font-size: 14px;
+$typography-button-line-height: 18px;
+$typography-button-font-weight: 700;
+$typography-button-letter-spacing: 1.4285714285714286px;
+$typography-button-text-decoration: none;
+$typography-button-text-transform: none;
+$typography-overline-font-size: 12px;
+$typography-overline-line-height: 16px;
+$typography-overline-font-weight: 500;
+$typography-overline-letter-spacing: 2.6666666666666665px;
+$typography-overline-text-decoration: none;
+$typography-overline-text-transform: none;
+$elevation-none: none;
+$elevation-light-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-light-offset-x-0: 0px;
+$elevation-light-light-offset-x-1: 0px;
+$elevation-light-light-offset-y-0: 0px;
+$elevation-light-light-offset-y-1: 1px;
+$elevation-light-light-blur-0: 2px;
+$elevation-light-light-blur-1: 2px;
+$elevation-light-light-spread-0: 0px;
+$elevation-light-light-spread-1: 0px;
+$elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-semilight-offset-x-0: 0px;
+$elevation-light-semilight-offset-x-1: 0px;
+$elevation-light-semilight-offset-y-0: 0px;
+$elevation-light-semilight-offset-y-1: 2px;
+$elevation-light-semilight-blur-0: 2px;
+$elevation-light-semilight-blur-1: 4px;
+$elevation-light-semilight-spread-0: 0px;
+$elevation-light-semilight-spread-1: 0px;
+$elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-regular-offset-x-0: 0px;
+$elevation-light-regular-offset-x-1: 0px;
+$elevation-light-regular-offset-y-0: 0px;
+$elevation-light-regular-offset-y-1: 4px;
+$elevation-light-regular-blur-0: 2px;
+$elevation-light-regular-blur-1: 8px;
+$elevation-light-regular-spread-0: 0px;
+$elevation-light-regular-spread-1: 0px;
+$elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-semibold-offset-x-0: 0px;
+$elevation-light-semibold-offset-x-1: 0px;
+$elevation-light-semibold-offset-y-0: 0px;
+$elevation-light-semibold-offset-y-1: 8px;
+$elevation-light-semibold-blur-0: 2px;
+$elevation-light-semibold-blur-1: 16px;
+$elevation-light-semibold-spread-0: 0px;
+$elevation-light-semibold-spread-1: 0px;
+$elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-bold-offset-x-0: 0px;
+$elevation-light-bold-offset-x-1: 0px;
+$elevation-light-bold-offset-y-0: 0px;
+$elevation-light-bold-offset-y-1: 14px;
+$elevation-light-bold-blur-0: 8px;
+$elevation-light-bold-blur-1: 28px;
+$elevation-light-bold-spread-0: 0px;
+$elevation-light-bold-spread-1: 0px;
+$elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
+$elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
+$elevation-light-extrabold-offset-x-0: 0px;
+$elevation-light-extrabold-offset-x-1: 0px;
+$elevation-light-extrabold-offset-y-0: 0px;
+$elevation-light-extrabold-offset-y-1: 32px;
+$elevation-light-extrabold-blur-0: 8px;
+$elevation-light-extrabold-blur-1: 64px;
+$elevation-light-extrabold-spread-0: 0px;
+$elevation-light-extrabold-spread-1: 0px;
+$elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
+$elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
+$elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-light-offset-x-0: 0px;
+$elevation-dark-light-offset-x-1: 0px;
+$elevation-dark-light-offset-y-0: 0px;
+$elevation-dark-light-offset-y-1: 1px;
+$elevation-dark-light-blur-0: 2px;
+$elevation-dark-light-blur-1: 2px;
+$elevation-dark-light-spread-0: 0px;
+$elevation-dark-light-spread-1: 0px;
+$elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-light-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-semilight-offset-x-0: 0px;
+$elevation-dark-semilight-offset-x-1: 0px;
+$elevation-dark-semilight-offset-y-0: 0px;
+$elevation-dark-semilight-offset-y-1: 2px;
+$elevation-dark-semilight-blur-0: 2px;
+$elevation-dark-semilight-blur-1: 4px;
+$elevation-dark-semilight-spread-0: 0px;
+$elevation-dark-semilight-spread-1: 0px;
+$elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-semilight-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-regular-offset-x-0: 0px;
+$elevation-dark-regular-offset-x-1: 0px;
+$elevation-dark-regular-offset-y-0: 0px;
+$elevation-dark-regular-offset-y-1: 4px;
+$elevation-dark-regular-blur-0: 2px;
+$elevation-dark-regular-blur-1: 8px;
+$elevation-dark-regular-spread-0: 0px;
+$elevation-dark-regular-spread-1: 0px;
+$elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-regular-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-semibold-offset-x-0: 0px;
+$elevation-dark-semibold-offset-x-1: 0px;
+$elevation-dark-semibold-offset-y-0: 0px;
+$elevation-dark-semibold-offset-y-1: 8px;
+$elevation-dark-semibold-blur-0: 2px;
+$elevation-dark-semibold-blur-1: 16px;
+$elevation-dark-semibold-spread-0: 0px;
+$elevation-dark-semibold-spread-1: 0px;
+$elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-semibold-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-bold-offset-x-0: 0px;
+$elevation-dark-bold-offset-x-1: 0px;
+$elevation-dark-bold-offset-y-0: 0px;
+$elevation-dark-bold-offset-y-1: 14px;
+$elevation-dark-bold-blur-0: 8px;
+$elevation-dark-bold-blur-1: 28px;
+$elevation-dark-bold-spread-0: 0px;
+$elevation-dark-bold-spread-1: 0px;
+$elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-bold-color-1: rgba(0, 0, 0, 0.28);
+$elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
+$elevation-dark-extrabold-offset-x-0: 0px;
+$elevation-dark-extrabold-offset-x-1: 0px;
+$elevation-dark-extrabold-offset-y-0: 0px;
+$elevation-dark-extrabold-offset-y-1: 32px;
+$elevation-dark-extrabold-blur-0: 8px;
+$elevation-dark-extrabold-blur-1: 64px;
+$elevation-dark-extrabold-spread-0: 0px;
+$elevation-dark-extrabold-spread-1: 0px;
+$elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
+$elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
+$typography-key-headline1: "headline1";
+$typography-key-headline2: "headline2";
+$typography-key-headline3: "headline3";
+$typography-key-headline4: "headline4";
+$typography-key-headline5: "headline5";
+$typography-key-headline6: "headline6";
+$typography-key-subtitle1: "subtitle1";
+$typography-key-subtitle2: "subtitle2";
+$typography-key-body1: "body1";
+$typography-key-body2: "body2";
+$typography-key-caption: "caption";
+$typography-key-button: "button";
+$typography-key-overline: "overline";
+$elevation-key-light: "light";
+$elevation-key-semilight: "semilight";
+$elevation-key-regular: "regular";
+$elevation-key-semibold: "semibold";
+$elevation-key-bold: "bold";
+$elevation-key-extrabold: "extrabold";
+$appearance-default: "default";
+$appearance-outline: "outline";
+$appearance-plain: "plain";
+$appearance-soft: "soft";
+$appearance-solid: "solid";
+$variant-primary: "primary";
+$variant-secondary: "secondary";
+$variant-tertiary: "tertiary";
+$variant-danger: "danger";
+$variant-warning: "warning";
+$variant-success: "success";
+$variant-info: "info";
+$variant-highlight: "highlight";
+$variant-neutral: "neutral";
+$duration-short: 200ms;
+$duration-medium: 400ms;
+$duration-long: 600ms;
+$typography-headline1-font-family: $font-family;
+$typography-headline2-font-family: $font-family;
+$typography-headline3-font-family: $font-family;
+$typography-headline4-font-family: $font-family;
+$typography-headline5-font-family: $font-family;
+$typography-headline6-font-family: $font-family;
+$typography-subtitle1-font-family: $font-family;
+$typography-subtitle2-font-family: $font-family;
+$typography-body1-font-family: $font-family;
+$typography-body2-font-family: $font-family;
+$typography-caption-font-family: $font-family;
+$typography-button-font-family: $font-family;
+$typography-overline-font-family: $font-family;
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
+$elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
+$appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
+$variant: $variant-primary $variant-secondary $variant-tertiary $variant-danger $variant-warning $variant-success $variant-info $variant-highlight $variant-neutral;
+$duration: $duration-short $duration-medium $duration-long;

package/Themes/joy-tokens.tailwind.js

@@ -0,0 +1,52 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'SCHEME_LIGHT_BACKGROUND': '#eaeaea',
+        'SCHEME_LIGHT_FOREGROUND': '#3c454f',
+        'SCHEME_LIGHT_HIGHLIGHT': '#d1d1d1',
+        'SCHEME_LIGHT_MIDDLELIGHT': '#8a8a8a',
+        'SCHEME_LIGHT_LOWLIGHT': '#5c5c5c',
+        'SCHEME_LIGHT_TRANSPARENT': 'rgba(255, 255, 255, 0)',
+        'SCHEME_LIGHT_SEMI_TRANSPARENT': 'rgba(255, 255, 255, 0.67)',
+        'SCHEME_LIGHT_DISABLED': '#686868',
+        'SCHEME_LIGHT_CONTRAST': '#ffffff',
+        'SCHEME_LIGHT_SELECTION': 'rgba(204, 204, 204, 0.44)',
+        'SCHEME_DARK_BACKGROUND': '#151515',
+        'SCHEME_DARK_FOREGROUND': '#c3bab0',
+        'SCHEME_DARK_HIGHLIGHT': '#2e2e2e',
+        'SCHEME_DARK_MIDDLELIGHT': '#757575',
+        'SCHEME_DARK_LOWLIGHT': '#a3a3a3',
+        'SCHEME_DARK_TRANSPARENT': 'rgba(255, 255, 255, 0)',
+        'SCHEME_DARK_SEMI_TRANSPARENT': 'rgba(255, 255, 255, 0.03)',
+        'SCHEME_DARK_DISABLED': '#474747',
+        'SCHEME_DARK_CONTRAST': '#000000',
+        'SCHEME_DARK_SELECTION': 'rgba(204, 204, 204, 0.44)',
+        'ELEVATION_LIGHT_LIGHT_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_LIGHT_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_SEMILIGHT_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_SEMILIGHT_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_REGULAR_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_REGULAR_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_SEMIBOLD_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_SEMIBOLD_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_BOLD_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_BOLD_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_LIGHT_EXTRABOLD_COLOR_0': 'rgba(0, 0, 0, 0.12)',
+        'ELEVATION_LIGHT_EXTRABOLD_COLOR_1': 'rgba(0, 0, 0, 0.14)',
+        'ELEVATION_DARK_LIGHT_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_LIGHT_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_SEMILIGHT_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_SEMILIGHT_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_REGULAR_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_REGULAR_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_SEMIBOLD_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_SEMIBOLD_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_BOLD_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_BOLD_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+        'ELEVATION_DARK_EXTRABOLD_COLOR_0': 'rgba(0, 0, 0, 0.24)',
+        'ELEVATION_DARK_EXTRABOLD_COLOR_1': 'rgba(0, 0, 0, 0.28)',
+      }
+    }
+  }
+};

package/Themes/joy.scss

@@ -564,7 +564,6 @@ $typography-caption-font-family: $font-family;
 $typography-button-font-family: $font-family;
 $typography-overline-font-family: $font-family;
 $size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
-$elevation2-light-light: $elevation-light-light-offset-x-0 $elevation-light-light-offset-y-0 $elevation-light-light-blur-0 $elevation-light-light-spread-0 $elevation-light-light-color-0, $elevation-light-light-offset-x-1 $elevation-light-light-offset-y-1 $elevation-light-light-blur-1 $elevation-light-light-spread-1 $elevation-light-light-color-1;
 $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
 $appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
 $variant: $variant-primary $variant-secondary $variant-tertiary $variant-danger $variant-warning $variant-success $variant-info $variant-highlight $variant-neutral;

package/Themes/material-tokens.scss

@@ -0,0 +1,20 @@
+$name: "material";
+$font-family: 'Inter', Roboto, Helvetica, sans-serif;
+$layout-radius: 12px;
+$layout-space: 8px;
+$layout-thickness: 2px;
+$color-light-primary: #6200EE;
+$color-light-secondary: #3700B3;
+$color-light-tertiary: #03DAC6;
+$elevation-none: none;
+$size-tiny: 2px;
+$size-small: 4px;
+$size-medium: 8px;
+$size-large: 16px;
+$size-giant: 32px;
+$size-key-tiny: "tiny";
+$size-key-small: "small";
+$size-key-medium: "medium";
+$size-key-large: "large";
+$size-key-giant: "giant";
+$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;

package/Themes/material-tokens.tailwind.js

@@ -0,0 +1,8 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+      }
+    }
+  }
+};