@j2-health/design-system 0.4.0 → 0.5.0

package/src/stylesheets/base.css

@@ -0,0 +1,322 @@
+:root {
+  --j2-blue-1: #fcfdff;
+  --j2-blue-2: #f6f9fe;
+  --j2-blue-3: #edf2fd;
+  --j2-blue-4: #e1eaff;
+  --j2-blue-5: #d2e0fd;
+  --j2-blue-6: #c1d2f8;
+  --j2-blue-7: #aac0ef;
+  --j2-blue-8: #8ba8e6;
+  --j2-blue-9: #253761;
+  --j2-blue-10: #364975;
+  --j2-blue-11: #5670aa;
+  --j2-blue-12: #20315b;
+
+  --j2-gray-1: #fdfdfb;
+  --j2-gray-2: #f9f9f7;
+  --j2-gray-3: #f0f0ed;
+  --j2-gray-4: #e9e9e4;
+  --j2-gray-5: #e2e2dc;
+  --j2-gray-6: #dadad2;
+  --j2-gray-7: #cfcfc8;
+  --j2-gray-8: #bcbcb4;
+  --j2-gray-9: #8d8d86;
+  --j2-gray-10: #82827c;
+  --j2-gray-11: #63635d;
+  --j2-gray-12: #20201b;
+
+  --j2-green-1: #fafefb;
+  --j2-green-2: #f5fbf5;
+  --j2-green-3: #e7f7e7;
+  --j2-green-4: #d7f2d8;
+  --j2-green-5: #c5eac6;
+  --j2-green-6: #ade0af;
+  --j2-green-7: #8dd191;
+  --j2-green-8: #6bb971;
+  --j2-green-9: #57a45e;
+  --j2-green-10: #4b9852;
+  --j2-green-11: #307e3a;
+  --j2-green-12: #1d3d20;
+
+  --j2-gold-1: #fefdfa;
+  --j2-gold-2: #fffae6;
+  --j2-gold-3: #fff2be;
+  --j2-gold-4: #ffe9a4;
+  --j2-gold-5: #ffdd81;
+  --j2-gold-6: #ffce57;
+  --j2-gold-7: #f3be4e;
+  --j2-gold-8: #e2a600;
+  --j2-gold-9: #ffcc39;
+  --j2-gold-10: #ffbf00;
+  --j2-gold-11: #9e6e00;
+  --j2-gold-12: #493918;
+
+  --j2-red-1: #fffcfc;
+  --j2-red-2: #fff7f7;
+  --j2-red-3: #feebeb;
+  --j2-red-4: #ffdcdc;
+  --j2-red-5: #ffcece;
+  --j2-red-6: #fbbebe;
+  --j2-red-7: #f2aaab;
+  --j2-red-8: #e89092;
+  --j2-red-9: #bf6c6f;
+  --j2-red-10: #b26063;
+  --j2-red-11: #a9585b;
+  --j2-red-12: #631a22;
+
+  --j2-color-text: var(--j2-gray-12);
+  --j2-color-text-secondary: var(--j2-gray-11);
+  --j2-color-text-tertiary: var(--j2-gray-11);
+  --j2-color-text-quaternary: var(--j2-gray-10);
+  --j2-color-text-heading: var(--j2-gray-12);
+  --j2-color-text-label: var(--j2-gray-11);
+  --j2-color-text-description: var(--j2-gray-11);
+  --j2-color-text-disabled: var(--j2-gray-10);
+  --j2-color-text-placeholder: var(--j2-gray-10);
+  --j2-color-icon: var(--j2-gray-11);
+  --j2-color-icon-hover: var(--j2-gray-12);
+  --j2-color-bg-layout: var(--j2-gray-2);
+  --j2-color-border: var(--j2-gray-7);
+  --j2-color-border-secondary: var(--j2-gray-6);
+  --j2-color-primary: var(--j2-blue-9);
+  --j2-color-success: var(--j2-green-9);
+  --j2-color-warning: var(--j2-gold-9);
+  --j2-color-info: var(--j2-blue-9);
+  --j2-color-error: var(--j2-red-9);
+  --j2-color-link: var(--j2-blue-9);
+  --j2-color-error-bg: var(--j2-red-2);
+  --j2-color-error-bg-hover: var(--j2-red-3);
+  --j2-color-error-border: var(--j2-red-7);
+  --j2-color-error-border-hover: var(--j2-red-8);
+  --j2-color-error-hover: var(--j2-red-10);
+  --j2-color-error-active: var(--j2-red-10);
+  --j2-color-error-text-hover: var(--j2-red-12);
+  --j2-color-error-text: var(--j2-red-11);
+  --j2-color-error-text-active: var(--j2-red-12);
+  --j2-color-link-hover: var(--j2-blue-10);
+  --j2-color-info-bg: var(--j2-blue-1);
+  --j2-color-info-bg-hover: var(--j2-blue-4);
+  --j2-color-info-border: var(--j2-blue-7);
+  --j2-color-info-border-hover: var(--j2-blue-8);
+  --j2-color-info-hover: var(--j2-blue-10);
+  --j2-color-info-active: var(--j2-blue-10);
+  --j2-color-info-text-hover: var(--j2-blue-11);
+  --j2-color-info-text: var(--j2-blue-12);
+  --j2-color-info-text-active: var(--j2-blue-11);
+  --j2-color-link-active: var(--j2-blue-10);
+  --j2-color-primary-bg: var(--j2-blue-1);
+  --j2-color-primary-bg-hover: var(--j2-blue-4);
+  --j2-color-primary-border: var(--j2-blue-7);
+  --j2-color-primary-border-hover: var(--j2-blue-8);
+  --j2-color-primary-hover: var(--j2-blue-10);
+  --j2-color-primary-active: var(--j2-blue-10);
+  --j2-color-primary-text-hover: var(--j2-blue-11);
+  --j2-color-primary-text: var(--j2-blue-12);
+  --j2-color-primary-text-active: var(--j2-blue-11);
+  --j2-color-success-bg: var(--j2-green-2);
+  --j2-color-success-bg-hover: var(--j2-green-3);
+  --j2-color-success-border: var(--j2-green-7);
+  --j2-color-success-border-hover: var(--j2-green-8);
+  --j2-color-success-hover: var(--j2-green-10);
+  --j2-color-success-active: var(--j2-green-10);
+  --j2-color-success-text-hover: var(--j2-green-12);
+  --j2-color-success-text: var(--j2-green-11);
+  --j2-color-success-text-active: var(--j2-green-12);
+  --j2-color-warning-bg: var(--j2-gold-2);
+  --j2-color-warning-bg-hover: var(--j2-gold-3);
+  --j2-color-warning-border: var(--j2-gold-7);
+  --j2-color-warning-border-hover: var(--j2-gold-8);
+  --j2-color-warning-hover: var(--j2-gold-10);
+  --j2-color-warning-active: var(--j2-gold-10);
+  --j2-color-warning-text-hover: var(--j2-gold-12);
+  --j2-color-warning-text: var(--j2-gold-11);
+  --j2-color-warning-text-active: var(--j2-gold-12);
+  --j2-control-item-bg-active: var(--j2-blue-1);
+  --j2-control-item-bg-active-hover: var(--j2-blue-4);
+  --j2-color-fill: rgba(0, 0, 0, 0.15);
+  --j2-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-tertiary: rgba(0, 0, 0, 0.04);
+  --j2-color-fill-quaternary: rgba(0, 0, 0, 0.02);
+  --j2-color-fill-content: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-content-hover: rgba(0, 0, 0, 0.15);
+  --j2-color-bg-mask: rgba(32, 32, 27, 0.45);
+  --j2-color-bg-spotlight: rgba(32, 32, 27, 0.85);
+  --j2-color-bg-container-disabled: rgba(0, 0, 0, 0.04);
+  --j2-color-bg-text-active: rgba(0, 0, 0, 0.15);
+  --j2-color-bg-text-hover: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-alter: rgba(0, 0, 0, 0.02);
+  --j2-color-split: rgba(0, 0, 0, 0.06);
+  --j2-color-error-outline: rgba(255, 38, 6, 0.06);
+  --j2-color-warning-outline: rgba(255, 215, 5, 0.1);
+  --j2-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+  --j2-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+  --j2-control-outline: rgba(37, 55, 97, 0.1);
+  --j2-control-tmp-outline: rgba(0, 0, 0, 0.02);
+
+  --j2-font-family: Rubik, Roboto, sans-serif;
+  --j2-font-family-code: Rubik, Roboto, sans-serif;
+  --j2-font-size: 14px;
+  --j2-font-size-lg: 16px;
+  --j2-font-size-sm: 12px;
+  --j2-font-size-xs: 10px;
+  --j2-font-size-xl: 20px;
+  --j2-font-size-heading-1: 38px;
+  --j2-font-size-heading-2: 30px;
+  --j2-font-size-heading-3: 24px;
+  --j2-font-size-heading-4: 20px;
+  --j2-font-size-heading-5: 16px;
+  --j2-line-height: 1.5714285714285714;
+  --j2-line-height-xs: 1.6;
+  --j2-line-height-heading-1: 1.2105263157894737;
+  --j2-line-height-heading-2: 1.2666666666666666;
+  --j2-line-height-heading-3: 1.3333333333333333;
+  --j2-line-height-heading-4: 1.4;
+  --j2-line-height-heading-5: 1.5;
+  --j2-line-height-lg: 1.5;
+  --j2-line-height-sm: 1.6666666666666667;
+  --j2-font-size-icon: 12px;
+  --j2-font-weight-normal: 400;
+  --j2-font-weight-strong: 600;
+
+  --j2-border-radius: 8px;
+  --j2-border-radius-lg: 10px;
+  --j2-border-radius-sm: 6px;
+  --j2-border-radius-xs: 2px;
+
+  --j2-size-step: 4px;
+  --j2-size-unit: 4px;
+  --j2-control-interactive-size: 16px;
+  --j2-size: 16px;
+  --j2-size-lg: 24px;
+  --j2-size-md: 20px;
+  --j2-size-ms: 16px;
+  --j2-size-sm: 12px;
+  --j2-size-xl: 32px;
+  --j2-size-xs: 8px;
+  --j2-size-xxl: 48px;
+  --j2-control-height: 32px;
+  --j2-size-xxs: 4px;
+  --j2-control-height-lg: 40px;
+  --j2-control-height-sm: 24px;
+  --j2-control-height-xs: 16px;
+  --j2-line-width: 1px;
+  --j2-line-width-bold: 2px;
+  --j2-line-width-focus: 4px;
+  --j2-control-outline-width: 2px;
+  --j2-screen-lg: 992px;
+  --j2-screen-lg-max: 1199px;
+  --j2-screen-lg-min: 992px;
+  --j2-screen-md: 768px;
+  --j2-screen-md-max: 991px;
+  --j2-screen-md-min: 768px;
+  --j2-screen-sm: 576px;
+  --j2-screen-sm-max: 767px;
+  --j2-screen-sm-min: 576px;
+  --j2-screen-xl: 1200px;
+  --j2-screen-xl-max: 1599px;
+  --j2-screen-xl-min: 1200px;
+  --j2-screen-xs: 480px;
+  --j2-screen-xs-max: 575px;
+  --j2-screen-xs-min: 480px;
+  --j2-screen-xxl: 1600px;
+  --j2-screen-xxl-min: 1600px;
+  --j2-size-popup-arrow: 16px;
+  --j2-margin: 16px;
+  --j2-margin-lg: 24px;
+  --j2-margin-md: 20px;
+  --j2-margin-sm: 12px;
+  --j2-margin-xl: 32px;
+  --j2-margin-xs: 8px;
+  --j2-margin-xxl: 48px;
+  --j2-margin-xxs: 4px;
+  --j2-padding: 16px;
+  --j2-padding-lg: 24px;
+  --j2-padding-md: 20px;
+  --j2-padding-sm: 12px;
+  --j2-padding-xl: 32px;
+  --j2-padding-xs: 8px;
+  --j2-padding-xxs: 4px;
+  --j2-padding-content-horizontal: 16px;
+  --j2-padding-content-horizontal-lg: 24px;
+  --j2-padding-content-horizontal-sm: 16px;
+  --j2-padding-content-vertical: 12px;
+  --j2-padding-content-vertical-lg: 16px;
+  --j2-padding-content-vertical-sm: 8px;
+  --j2-control-padding-horizontal: 12px;
+  --j2-control-padding-horizontal-sm: 8px;
+
+  --j2-color-bg-elevated: #ffffff;
+
+  --j2-box-shadow: var(--ant-box-shadow);
+  --j2-box-shadow-secondary: var(--ant-box-shadow-secondary);
+  --j2-box-shadow-tertiary: var(--ant-box-shadow-tertiary);
+
+  font-family: var(--j2-font-family);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: var(--j2-font-family);
+}
+
+@layer base {
+  h1 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-1);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-1);
+    margin: 0;
+    color: var(--j2-color-primary);
+  }
+
+  h2 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-2);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-2);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h3 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-3);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-3);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h4 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-4);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-4);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h5 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-5);
+    font-weight: 500;
+    line-height: var(--j2-line-height-heading-5);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/stylesheets/fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

package/src/stylesheets/index.css

@@ -1,327 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --j2-blue-1: #fcfdff;
-  --j2-blue-2: #f6f9fe;
-  --j2-blue-3: #edf2fd;
-  --j2-blue-4: #e1eaff;
-  --j2-blue-5: #d2e0fd;
-  --j2-blue-6: #c1d2f8;
-  --j2-blue-7: #aac0ef;
-  --j2-blue-8: #8ba8e6;
-  --j2-blue-9: #253761;
-  --j2-blue-10: #364975;
-  --j2-blue-11: #5670aa;
-  --j2-blue-12: #20315b;
-
-  --j2-gray-1: #fdfdfb;
-  --j2-gray-2: #f9f9f7;
-  --j2-gray-3: #f0f0ed;
-  --j2-gray-4: #e9e9e4;
-  --j2-gray-5: #e2e2dc;
-  --j2-gray-6: #dadad2;
-  --j2-gray-7: #cfcfc8;
-  --j2-gray-8: #bcbcb4;
-  --j2-gray-9: #8d8d86;
-  --j2-gray-10: #82827c;
-  --j2-gray-11: #63635d;
-  --j2-gray-12: #20201b;
-
-  --j2-green-1: #fafefb;
-  --j2-green-2: #f5fbf5;
-  --j2-green-3: #e7f7e7;
-  --j2-green-4: #d7f2d8;
-  --j2-green-5: #c5eac6;
-  --j2-green-6: #ade0af;
-  --j2-green-7: #8dd191;
-  --j2-green-8: #6bb971;
-  --j2-green-9: #57a45e;
-  --j2-green-10: #4b9852;
-  --j2-green-11: #307e3a;
-  --j2-green-12: #1d3d20;
-
-  --j2-gold-1: #fefdfa;
-  --j2-gold-2: #fffae6;
-  --j2-gold-3: #fff2be;
-  --j2-gold-4: #ffe9a4;
-  --j2-gold-5: #ffdd81;
-  --j2-gold-6: #ffce57;
-  --j2-gold-7: #f3be4e;
-  --j2-gold-8: #e2a600;
-  --j2-gold-9: #ffcc39;
-  --j2-gold-10: #ffbf00;
-  --j2-gold-11: #9e6e00;
-  --j2-gold-12: #493918;
-
-  --j2-red-1: #fffcfc;
-  --j2-red-2: #fff7f7;
-  --j2-red-3: #feebeb;
-  --j2-red-4: #ffdcdc;
-  --j2-red-5: #ffcece;
-  --j2-red-6: #fbbebe;
-  --j2-red-7: #f2aaab;
-  --j2-red-8: #e89092;
-  --j2-red-9: #bf6c6f;
-  --j2-red-10: #b26063;
-  --j2-red-11: #a9585b;
-  --j2-red-12: #631a22;
-
-  --j2-color-text: var(--j2-gray-12);
-  --j2-color-text-secondary: var(--j2-gray-11);
-  --j2-color-text-tertiary: var(--j2-gray-11);
-  --j2-color-text-quaternary: var(--j2-gray-10);
-  --j2-color-text-heading: var(--j2-gray-12);
-  --j2-color-text-label: var(--j2-gray-11);
-  --j2-color-text-description: var(--j2-gray-11);
-  --j2-color-text-disabled: var(--j2-gray-10);
-  --j2-color-text-placeholder: var(--j2-gray-10);
-  --j2-color-icon: var(--j2-gray-11);
-  --j2-color-icon-hover: var(--j2-gray-12);
-  --j2-color-bg-layout: var(--j2-gray-2);
-  --j2-color-border: var(--j2-gray-7);
-  --j2-color-border-secondary: var(--j2-gray-6);
-  --j2-color-primary: var(--j2-blue-9);
-  --j2-color-success: var(--j2-green-9);
-  --j2-color-warning: var(--j2-gold-9);
-  --j2-color-info: var(--j2-blue-9);
-  --j2-color-error: var(--j2-red-9);
-  --j2-color-link: var(--j2-blue-9);
-  --j2-color-error-bg: var(--j2-red-2);
-  --j2-color-error-bg-hover: var(--j2-red-3);
-  --j2-color-error-border: var(--j2-red-7);
-  --j2-color-error-border-hover: var(--j2-red-8);
-  --j2-color-error-hover: var(--j2-red-10);
-  --j2-color-error-active: var(--j2-red-10);
-  --j2-color-error-text-hover: var(--j2-red-12);
-  --j2-color-error-text: var(--j2-red-11);
-  --j2-color-error-text-active: var(--j2-red-12);
-  --j2-color-link-hover: var(--j2-blue-10);
-  --j2-color-info-bg: var(--j2-blue-1);
-  --j2-color-info-bg-hover: var(--j2-blue-4);
-  --j2-color-info-border: var(--j2-blue-7);
-  --j2-color-info-border-hover: var(--j2-blue-8);
-  --j2-color-info-hover: var(--j2-blue-10);
-  --j2-color-info-active: var(--j2-blue-10);
-  --j2-color-info-text-hover: var(--j2-blue-11);
-  --j2-color-info-text: var(--j2-blue-12);
-  --j2-color-info-text-active: var(--j2-blue-11);
-  --j2-color-link-active: var(--j2-blue-10);
-  --j2-color-primary-bg: var(--j2-blue-1);
-  --j2-color-primary-bg-hover: var(--j2-blue-4);
-  --j2-color-primary-border: var(--j2-blue-7);
-  --j2-color-primary-border-hover: var(--j2-blue-8);
-  --j2-color-primary-hover: var(--j2-blue-10);
-  --j2-color-primary-active: var(--j2-blue-10);
-  --j2-color-primary-text-hover: var(--j2-blue-11);
-  --j2-color-primary-text: var(--j2-blue-12);
-  --j2-color-primary-text-active: var(--j2-blue-11);
-  --j2-color-success-bg: var(--j2-green-2);
-  --j2-color-success-bg-hover: var(--j2-green-3);
-  --j2-color-success-border: var(--j2-green-7);
-  --j2-color-success-border-hover: var(--j2-green-8);
-  --j2-color-success-hover: var(--j2-green-10);
-  --j2-color-success-active: var(--j2-green-10);
-  --j2-color-success-text-hover: var(--j2-green-12);
-  --j2-color-success-text: var(--j2-green-11);
-  --j2-color-success-text-active: var(--j2-green-12);
-  --j2-color-warning-bg: var(--j2-gold-2);
-  --j2-color-warning-bg-hover: var(--j2-gold-3);
-  --j2-color-warning-border: var(--j2-gold-7);
-  --j2-color-warning-border-hover: var(--j2-gold-8);
-  --j2-color-warning-hover: var(--j2-gold-10);
-  --j2-color-warning-active: var(--j2-gold-10);
-  --j2-color-warning-text-hover: var(--j2-gold-12);
-  --j2-color-warning-text: var(--j2-gold-11);
-  --j2-color-warning-text-active: var(--j2-gold-12);
-  --j2-control-item-bg-active: var(--j2-blue-1);
-  --j2-control-item-bg-active-hover: var(--j2-blue-4);
-  --j2-color-fill: rgba(0, 0, 0, 0.15);
-  --j2-color-fill-secondary: rgba(0, 0, 0, 0.06);
-  --j2-color-fill-tertiary: rgba(0, 0, 0, 0.04);
-  --j2-color-fill-quaternary: rgba(0, 0, 0, 0.02);
-  --j2-color-fill-content: rgba(0, 0, 0, 0.06);
-  --j2-color-fill-content-hover: rgba(0, 0, 0, 0.15);
-  --j2-color-bg-mask: rgba(32, 32, 27, 0.45);
-  --j2-color-bg-spotlight: rgba(32, 32, 27, 0.85);
-  --j2-color-bg-container-disabled: rgba(0, 0, 0, 0.04);
-  --j2-color-bg-text-active: rgba(0, 0, 0, 0.15);
-  --j2-color-bg-text-hover: rgba(0, 0, 0, 0.06);
-  --j2-color-fill-alter: rgba(0, 0, 0, 0.02);
-  --j2-color-split: rgba(0, 0, 0, 0.06);
-  --j2-color-error-outline: rgba(255, 38, 6, 0.06);
-  --j2-color-warning-outline: rgba(255, 215, 5, 0.1);
-  --j2-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
-  --j2-control-item-bg-hover: rgba(0, 0, 0, 0.04);
-  --j2-control-outline: rgba(37, 55, 97, 0.1);
-  --j2-control-tmp-outline: rgba(0, 0, 0, 0.02);
-
-  --j2-font-family: Rubik, Roboto, sans-serif;
-  --j2-font-family-code: Rubik, Roboto, sans-serif;
-  --j2-font-size: 14px;
-  --j2-font-size-lg: 16px;
-  --j2-font-size-sm: 12px;
-  --j2-font-size-xs: 10px;
-  --j2-font-size-xl: 20px;
-  --j2-font-size-heading-1: 38px;
-  --j2-font-size-heading-2: 30px;
-  --j2-font-size-heading-3: 24px;
-  --j2-font-size-heading-4: 20px;
-  --j2-font-size-heading-5: 16px;
-  --j2-line-height: 1.5714285714285714;
-  --j2-line-height-xs: 1.6;
-  --j2-line-height-heading-1: 1.2105263157894737;
-  --j2-line-height-heading-2: 1.2666666666666666;
-  --j2-line-height-heading-3: 1.3333333333333333;
-  --j2-line-height-heading-4: 1.4;
-  --j2-line-height-heading-5: 1.5;
-  --j2-line-height-lg: 1.5;
-  --j2-line-height-sm: 1.6666666666666667;
-  --j2-font-size-icon: 12px;
-  --j2-font-weight-normal: 400;
-  --j2-font-weight-strong: 600;
-
-  --j2-border-radius: 8px;
-  --j2-border-radius-lg: 10px;
-  --j2-border-radius-sm: 6px;
-  --j2-border-radius-xs: 2px;
-
-  --j2-size-step: 4px;
-  --j2-size-unit: 4px;
-  --j2-control-interactive-size: 16px;
-  --j2-size: 16px;
-  --j2-size-lg: 24px;
-  --j2-size-md: 20px;
-  --j2-size-ms: 16px;
-  --j2-size-sm: 12px;
-  --j2-size-xl: 32px;
-  --j2-size-xs: 8px;
-  --j2-size-xxl: 48px;
-  --j2-control-height: 32px;
-  --j2-size-xxs: 4px;
-  --j2-control-height-lg: 40px;
-  --j2-control-height-sm: 24px;
-  --j2-control-height-xs: 16px;
-  --j2-line-width: 1px;
-  --j2-line-width-bold: 2px;
-  --j2-line-width-focus: 4px;
-  --j2-control-outline-width: 2px;
-  --j2-screen-lg: 992px;
-  --j2-screen-lg-max: 1199px;
-  --j2-screen-lg-min: 992px;
-  --j2-screen-md: 768px;
-  --j2-screen-md-max: 991px;
-  --j2-screen-md-min: 768px;
-  --j2-screen-sm: 576px;
-  --j2-screen-sm-max: 767px;
-  --j2-screen-sm-min: 576px;
-  --j2-screen-xl: 1200px;
-  --j2-screen-xl-max: 1599px;
-  --j2-screen-xl-min: 1200px;
-  --j2-screen-xs: 480px;
-  --j2-screen-xs-max: 575px;
-  --j2-screen-xs-min: 480px;
-  --j2-screen-xxl: 1600px;
-  --j2-screen-xxl-min: 1600px;
-  --j2-size-popup-arrow: 16px;
-  --j2-margin: 16px;
-  --j2-margin-lg: 24px;
-  --j2-margin-md: 20px;
-  --j2-margin-sm: 12px;
-  --j2-margin-xl: 32px;
-  --j2-margin-xs: 8px;
-  --j2-margin-xxl: 48px;
-  --j2-margin-xxs: 4px;
-  --j2-padding: 16px;
-  --j2-padding-lg: 24px;
-  --j2-padding-md: 20px;
-  --j2-padding-sm: 12px;
-  --j2-padding-xl: 32px;
-  --j2-padding-xs: 8px;
-  --j2-padding-xxs: 4px;
-  --j2-padding-content-horizontal: 16px;
-  --j2-padding-content-horizontal-lg: 24px;
-  --j2-padding-content-horizontal-sm: 16px;
-  --j2-padding-content-vertical: 12px;
-  --j2-padding-content-vertical-lg: 16px;
-  --j2-padding-content-vertical-sm: 8px;
-  --j2-control-padding-horizontal: 12px;
-  --j2-control-padding-horizontal-sm: 8px;
-
-  --j2-color-bg-elevated: #ffffff;
-
-  --j2-box-shadow: var(--ant-box-shadow);
-  --j2-box-shadow-secondary: var(--ant-box-shadow-secondary);
-  --j2-box-shadow-tertiary: var(--ant-box-shadow-tertiary);
-
-  font-family: var(--j2-font-family);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  font-family: var(--j2-font-family);
-}
-
-@layer base {
-  h1 {
-    font-family: var(--j2-font-family);
-    font-size: var(--j2-font-size-heading-1);
-    font-weight: var(--j2-font-weight-strong);
-    line-height: var(--j2-line-height-heading-1);
-    margin: 0;
-    color: var(--j2-color-primary);
-  }
-
-  h2 {
-    font-family: var(--j2-font-family);
-    font-size: var(--j2-font-size-heading-2);
-    font-weight: var(--j2-font-weight-strong);
-    line-height: var(--j2-line-height-heading-2);
-    color: var(--j2-color-primary);
-    margin: 0;
-  }
-
-  h3 {
-    font-family: var(--j2-font-family);
-    font-size: var(--j2-font-size-heading-3);
-    font-weight: var(--j2-font-weight-strong);
-    line-height: var(--j2-line-height-heading-3);
-    color: var(--j2-color-primary);
-    margin: 0;
-  }
-
-  h4 {
-    font-family: var(--j2-font-family);
-    font-size: var(--j2-font-size-heading-4);
-    font-weight: var(--j2-font-weight-strong);
-    line-height: var(--j2-line-height-heading-4);
-    color: var(--j2-color-primary);
-    margin: 0;
-  }
-
-  h5 {
-    font-family: var(--j2-font-family);
-    font-size: var(--j2-font-size-heading-5);
-    font-weight: 500;
-    line-height: var(--j2-line-height-heading-5);
-    color: var(--j2-color-primary);
-    margin: 0;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@import './fonts.css';
+@import './tailwind-v3.css';
+@import './base.css';

package/src/stylesheets/tailwind-v3.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/stylesheets/tailwind.css

@@ -0,0 +1,4 @@
+@import './fonts.css';
+@import 'tailwindcss';
+@import './base.css';
+@source '../../dist';