@syscore/ui-library 1.1.9 → 1.1.10

package/client/global.css

@@ -6,6 +6,145 @@ layer(base);
 
 @import "tailwindcss";
 
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-black.otf");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-blackitalic.otf");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-extrabold.otf");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-extrabolditalic.otf");
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-bold.otf");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-bolditalic.otf");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-semibold.otf");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-semibolditalic.otf");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-medium.otf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-mediumitalic.otf");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-regular.otf");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-italic.otf");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-light.otf");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-lightitalic.otf");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-extralight.otf");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-extralightitalic.otf");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-thin.otf");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mazzard Soft M";
+  src: url("/fonts/Mazzard-M/mazzardsoftm-thinitalic.otf");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "FtMade";
+  src:
+    url("/fonts/FT-Made/FTMade-Regular.woff2") format("woff2"),
+    url("/fonts/FT-Made/FTMade-Regular.woff") format("woff"),
+    url("/fonts/FT-Made/FTMade-Regular.otf") format("opentype"),
+    url("/fonts/FT-Made/FTMade-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 @plugin 'tailwindcss-animate';
 
 @custom-variant dark (&:is(.dark *));
@@ -21,6 +160,16 @@ layer(base);
   }
 }
 
+@utility btn-primary-gradient {
+  background-image:
+    linear-gradient(
+      0deg,
+      rgba(15, 116, 138, 0.6) 0%,
+      rgba(15, 116, 138, 0.6) 100%
+    ),
+    linear-gradient(99deg, #41d5f6 3.39%, #3eecd1 57.86%, #66fcd9 112.32%);
+}
+
 @theme {
   --color-inherit: inherit;
   --color-current: currentColor;
@@ -382,6 +531,196 @@ layer(base);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
 
+  /* Figma Design System Colors */
+  --color-white: #fff;
+  --color-black: #000;
+
+  --color-gray-50: #f9f9fa;
+  --color-gray-100: #eff1f2;
+  --color-gray-200: #dedfe3;
+  --color-gray-300: #cbcdd2;
+  --color-gray-400: #9fa2ab;
+  --color-gray-500: #71747d;
+  --color-gray-600: #52545d;
+  --color-gray-700: #3e4049;
+  --color-gray-800: #282a31;
+  --color-gray-900: #171820;
+
+  --color-blue-50: #fbfdfe;
+  --color-blue-100: #eff5fb;
+  --color-blue-200: #cbe0f1;
+  --color-blue-300: #a3c8e6;
+  --color-blue-400: #72abd9;
+  --color-blue-500: #3481c1;
+  --color-blue-600: #2e74ad;
+  --color-blue-700: #286495;
+  --color-blue-800: #22547d;
+  --color-blue-900: #183b58;
+
+  --color-cyan-50: #fafeff;
+  --color-cyan-100: #d6f4fb;
+  --color-cyan-200: #95e2f4;
+  --color-cyan-300: #39c9ea;
+  --color-cyan-400: #18bde2;
+  --color-cyan-500: #16adcf;
+  --color-cyan-600: #149ebd;
+  --color-cyan-700: #128ba6;
+  --color-cyan-800: #0f748a;
+  --color-cyan-900: #0a5161;
+
+  --color-emerald-50: #fbfefe;
+  --color-emerald-100: #e0fbf5;
+  --color-emerald-200: #bcf6ea;
+  --color-emerald-300: #8aefdb;
+  --color-emerald-400: #50e7ca;
+  --color-emerald-500: #1dd7b2;
+  --color-emerald-600: #1bc5a3;
+  --color-emerald-700: #17aa8d;
+  --color-emerald-800: #138b73;
+  --color-emerald-900: #0e6352;
+
+  --color-plum-50: #fdfcfd;
+  --color-plum-100: #f7f2f6;
+  --color-plum-200: #f0e1ed;
+  --color-plum-300: #e8cae1;
+  --color-plum-400: #dcadd2;
+  --color-plum-500: #bf78ae;
+  --color-plum-600: #aa6a9b;
+  --color-plum-700: #905c84;
+  --color-plum-800: #7f5075;
+  --color-plum-900: #633e5a;
+
+  --color-coral-50: #fefcfb;
+  --color-coral-100: #fcf4f2;
+  --color-coral-200: #f8dfd8;
+  --color-coral-300: #f4c9be;
+  --color-coral-400: #f0aa99;
+  --color-coral-500: #ed896f;
+  --color-coral-600: #e67357;
+  --color-coral-700: #dc5432;
+  --color-coral-800: #bc4324;
+  --color-coral-900: #81311d;
+
+  --color-pink-50: #fefbfb;
+  --color-pink-100: #fceeef;
+  --color-pink-200: #f7d4d8;
+  --color-pink-300: #f2b4bb;
+  --color-pink-400: #efa4ad;
+  --color-pink-500: #eb8e99;
+  --color-pink-600: #e77481;
+  --color-pink-700: #e25566;
+  --color-pink-800: #c92e3f;
+  --color-pink-900: #9d1b2a;
+
+  --color-bronze-50: #fefdfb;
+  --color-bronze-100: #fbf8f3;
+  --color-bronze-200: #f8f1e8;
+  --color-bronze-300: #f3e7d8;
+  --color-bronze-400: #eedec9;
+  --color-bronze-500: #e8d2b5;
+  --color-bronze-600: #dcba8e;
+  --color-bronze-700: #d0a367;
+  --color-bronze-800: #bb833a;
+  --color-bronze-900: #845d29;
+
+  --color-silver-50: #fcfcfd;
+  --color-silver-100: #f6f7f8;
+  --color-silver-200: #edf0f2;
+  --color-silver-300: #e2e5e9;
+  --color-silver-400: #d6dbe0;
+  --color-silver-500: #c8ced6;
+  --color-silver-600: #bcc4cd;
+  --color-silver-700: #a2adb9;
+  --color-silver-800: #8190a1;
+  --color-silver-900: #5c6a7b;
+
+  --color-gold-50: #fefdfb;
+  --color-gold-100: #fdfcf6;
+  --color-gold-200: #f9f5e1;
+  --color-gold-300: #f6efd0;
+  --color-gold-400: #f2e8bb;
+  --color-gold-500: #eee2aa;
+  --color-gold-600: #eada94;
+  --color-gold-700: #e5d27b;
+  --color-gold-800: #cdae28;
+  --color-gold-900: #917c1d;
+
+  --color-platinum-50: #fcfcfd;
+  --color-platinum-100: #f7f7f8;
+  --color-platinum-200: #ececee;
+  --color-platinum-300: #e2e1e5;
+  --color-platinum-400: #d2d1d6;
+  --color-platinum-500: #c6c5cc;
+  --color-platinum-600: #b4b3bc;
+  --color-platinum-700: #9f9da9;
+  --color-platinum-800: #848291;
+  --color-platinum-900: #5d5b67;
+
+  --color-beige-50: #fdfcfc;
+  --color-beige-100: #fbfaf9;
+  --color-beige-200: #efeae6;
+  --color-beige-300: #e2d7d0;
+  --color-beige-400: #d2c2b6;
+  --color-beige-500: #c1aa9a;
+  --color-beige-600: #b59a87;
+  --color-beige-700: #a5856e;
+  --color-beige-800: #8b6c56;
+  --color-beige-900: #685140;
+
+  --color-mind: #0a5161;
+  --color-community: #0f748a;
+  --color-movement: #149ebd;
+  --color-water: #39c9ea;
+  --color-air: #87dff2;
+
+  --color-btn-hover: #00000014;
+
+  --color-light: #8aefdb;
+  --color-thermalcomfort: #3eddbf;
+  --color-nourishment: #17aa8d;
+  --color-sound: #0c705c;
+  --color-materials: #0a4f41;
+
+  --color-healthsafety: #72abd9;
+  --color-performance: #0f748a;
+  --color-equity: #17aa8d;
+  --color-coworking: #9a608c;
+
+  --gradient-0: 99deg, #41d5f6 3.39%, #3eecd1 57.86%, #66fcd9 112.32%;
+  --gradient-1: 58deg, #8aefdb 2.8%, #d4bace 41.67%, #cbe0f1 80.55%;
+  --gradient-performance:
+    180deg, #1dd7b2 0%, #18bde2 50%, #bf78ae 75%, #e67357 100%;
+
+  --blur-xs: 2px;
+  --blur-sm: 4px;
+  --blur-md: 8px;
+  --blur-lg: 12px;
+  --blur-xl: 20px;
+
+  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  --shadow-sm:
+    0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
+  --shadow-md:
+    0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -4px rgba(16, 24, 40, 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgba(16, 24, 40, 0.1),
+    0 8px 10px -6px rgba(16, 24, 40, 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgba(16, 24, 40, 0.25);
+
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-dm-sans:
+    "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mazzard:
+    "Mazzard Soft M", ui-serif, Georgia, Cambria, "Times New Roman", Times,
+    serif;
+  --font-ftmade:
+    "FtMade", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
 
@@ -458,64 +797,6 @@ layer(base);
 
     --radius: 0.625rem;
 
-    /* Figma Design System Colors */
-    /* Cyan colors */
-    --cyan-800: 188 93% 31%;
-    --cyan-700: 191 80% 36%;
-    --cyan-600: 191 75% 42%;
-    --cyan-500: 194 80% 50%;
-    --cyan-400: 194 90% 65%;
-    --cyan-300: 194 88% 58%;
-    --cyan-200: 194 95% 80%;
-    --cyan-100: 194 100% 95%;
-    --cyan-50: 194 100% 98%;
-
-    /* Cyan gradient colors (for primary-gradient button) */
-    --cyan-gradient-from: 191 85% 68%;
-    --cyan-gradient-via: 174 75% 73%;
-    --cyan-gradient-to: 166 65% 82%;
-    --cyan-dark: 188 80% 26%;
-
-    /* Blue colors */
-    --blue-600: 208 60% 43%;
-    --blue-500: 208 70% 50%;
-    --blue-400: 208 75% 58%;
-    --blue-300: 208 80% 68%;
-    --blue-200: 209 56% 84%;
-    --blue-100: 209 70% 92%;
-    --blue-50: 210 100% 98%;
-
-    /* Gray colors */
-    --gray-900: 225 15% 15%;
-    --gray-800: 225 12% 20%;
-    --gray-700: 225 10% 25%;
-    --gray-600: 225 6% 33%;
-    --gray-500: 222 6% 46%;
-    --gray-400: 225 8% 55%;
-    --gray-300: 225 12% 70%;
-    --gray-200: 225 18% 88%;
-    --gray-100: 210 20% 94%;
-    --gray-50: 210 25% 97%;
-
-    /* Slate colors */
-    --slate-900: 222 47% 11%;
-    --slate-800: 213 27% 17%;
-    --slate-700: 215 25% 27%;
-    --slate-600: 215 20% 35%;
-    --slate-500: 215 16% 47%;
-    --slate-400: 215 14% 59%;
-    --slate-300: 215 12% 71%;
-    --slate-200: 214 13% 84%;
-    --slate-100: 210 40% 96%;
-    --slate-50: 210 40% 98%;
-
-    /* Violet colors */
-    --violet-700: 258 90% 66%;
-    --violet-600: 258 85% 70%;
-    --violet-500: 258 80% 75%;
-    --violet-200: 258 80% 90%;
-    --violet-100: 258 95% 95%;
-
     /* Utility colors */
     --white: 0 0% 100%;
     --black: 0 0% 0%;
@@ -578,4 +859,300 @@ layer(base);
       "ss03" on,
       "cv01" on;
   }
+
+  .container-lg {
+    max-width: calc(1440px + 64px);
+    width: 100%;
+    padding-inline: 32px;
+    margin-inline: auto;
+  }
+
+  .container-sm {
+    max-width: calc(1072px + 64px);
+    width: 100%;
+    padding-inline: 32px;
+    margin-inline: auto;
+  }
+}
+
+/* Typography Utilities */
+
+/* Heading Utilities  */
+@utility heading-large {
+  font-family: var(--font-ftmade);
+  font-size: 38px;
+  line-height: 40px;
+  letter-spacing: -0.38px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2703em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1023em;
+    display: table;
+  }
+}
+
+@utility heading-medium {
+  font-family: var(--font-ftmade);
+  font-size: 34px;
+  line-height: 36px;
+  letter-spacing: -0.34px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2734em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1054em;
+    display: table;
+  }
+}
+
+@utility heading-small {
+  font-family: var(--font-ftmade);
+  font-size: 30px;
+  line-height: 32px;
+  letter-spacing: -0.3px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2773em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1093em;
+    display: table;
+  }
+}
+
+@utility heading-xsmall {
+  font-family: var(--font-ftmade);
+  font-size: 22px;
+  line-height: 24px;
+  letter-spacing: -0.22px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2895em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1215em;
+    display: table;
+  }
+}
+
+@utility heading-xxsmall {
+  font-family: var(--font-ftmade);
+  font-size: 20px;
+  line-height: 22px;
+  letter-spacing: -0.22px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2895em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1215em;
+    display: table;
+  }
+}
+
+/* Body Utilities */
+@utility body-large {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25.2px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2694em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4444em;
+    display: table;
+  }
+}
+
+@utility body-base {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22.4px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2625em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4375em;
+    display: table;
+  }
+}
+@utility body-small {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19.6px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2536em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4286em;
+    display: table;
+  }
+}
+
+/* Overline Utilities */
+@utility overline-large {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.075em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.25em;
+    display: table;
+  }
+}
+@utility overline-medium {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 12px; /* 100% */
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.075em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.25em;
+    display: table;
+  }
+}
+@utility overline-small {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 10px; /* 100% */
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.075em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.25em;
+    display: table;
+  }
+}
+
+/* Number Utilities */
+@utility number-large {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25.2px;
+  font-variant-numeric: lining-nums tabular-nums;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2694em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4444em;
+    display: table;
+  }
+}
+
+@utility number-base {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22.4px;
+  font-variant-numeric: lining-nums tabular-nums;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2625em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4375em;
+    display: table;
+  }
+}
+
+@utility number-small {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19.6px;
+  font-variant-numeric: lining-nums tabular-nums;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2536em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4286em;
+    display: table;
+  }
+}
+@utility number-xsmall {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16.8px;
+  font-variant-numeric: lining-nums tabular-nums;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2417em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4167em;
+    display: table;
+  }
 }