@lunit/design-system 1.0.0-a.1 → 1.0.0-a.3

package/src/foundation/Typography/tokens.ts

@@ -0,0 +1,162 @@
+import type { TypographyStyleOptions } from "@mui/material/styles/createTypography";
+
+const fontWeights = {
+  "--font-weight-bold": 700,
+  "--font-weight-semibold": 600,
+  "--font-weight-medium": 500,
+  "--font-weight-regular": 400,
+} as const;
+
+const headline = {
+  "--headline1-font-weight": "var(--font-weight-semibold)",
+  "--headline1-font-size": "52px",
+  "--headline1-line-height": "68px",
+  "--headline2-font-weight": "var(--font-weight-bold)",
+  "--headline2-font-size": "38px",
+  "--headline2-line-height": "48px",
+  "--headline3-font-weight": "var(--font-weight-semibold)",
+  "--headline3-font-size": "24px",
+  "--headline3-line-height": "36px",
+  "--headline4-font-weight": "var(--font-weight-semibold)",
+  "--headline4-font-size": "20px",
+  "--headline4-line-height": "28px",
+  "--headline5-font-weight": "var(--font-weight-semibold)",
+  "--headline5-font-size": "16px",
+  "--headline5-line-height": "24px",
+} as const;
+
+const body = {
+  "--body1-16-semibold-font-weight": "var(--font-weight-semibold)",
+  "--body1-16-semibold-font-size": "16px",
+  "--body1-16-semibold-line-height": "24px",
+  "--body1-16-regular-font-weight": "var(--font-weight-regular)",
+  "--body1-16-regular-font-size": "16px",
+  "--body1-16-regular-line-height": "24px",
+  "--body2-14-bold-font-weight": "var(--font-weight-bold)",
+  "--body2-14-bold-font-size": "14px",
+  "--body2-14-bold-line-height": "20px",
+  "--body2-14-medium-font-weight": "var(--font-weight-medium)",
+  "--body2-14-medium-font-size": "14px",
+  "--body2-14-medium-line-height": "20px",
+  "--body2-14-regular-font-weight": "var(--font-weight-regular)",
+  "--body2-14-regular-font-size": "14px",
+  "--body2-14-regular-line-height": "20px",
+  "--body3-12-semibold-font-weight": "var(--font-weight-semibold)",
+  "--body3-12-semibold-font-size": "12.4px",
+  "--body3-12-semibold-line-height": "16px",
+  "--body3-12-regular-font-weight": "var(--font-weight-regular)",
+  "--body3-12-regular-font-size": "12.4px",
+  "--body3-12-regular-line-height": "16px",
+} as const;
+
+const etc = {
+  "--overline-font-weight": "var(--font-weight-medium)",
+  "--overline-font-size": "14px",
+  "--overline-line-height": "20px",
+  "--button1-font-weight": "var(--font-weight-medium)",
+  "--button1-font-size": "16px",
+  "--button1-line-height": "22px",
+  "--button2-font-weight": "var(--font-weight-medium)",
+  "--button2-font-size": "14px",
+  "--button2-line-height": "20px",
+  "--caption-font-weight": "var(--font-weight-medium)",
+  "--caption-font-size": "12px",
+  "--caption-line-height": "16px",
+} as const;
+
+const fontVariants: Record<string, TypographyStyleOptions> = {
+  headline1: {
+    fontWeight: "var(--headline1-font-weight)",
+    fontSize: "var(--headline1-font-size)",
+    lineHeight: "var(--headline1-line-height)",
+  },
+  headline2: {
+    fontWeight: "var(--headline2-font-weight)",
+    fontSize: "var(--headline2-font-size)",
+    lineHeight: "var(--headline2-line-height)",
+  },
+  headline3: {
+    fontWeight: "var(--headline3-font-weight)",
+    fontSize: "var(--headline3-font-size)",
+    lineHeight: "var(--headline3-line-height)",
+  },
+  headline4: {
+    fontWeight: "var(--headline4-font-weight)",
+    fontSize: "var(--headline4-font-size)",
+    lineHeight: "var(--headline4-line-height)",
+  },
+  headline5: {
+    fontWeight: "var(--headline5-font-weight)",
+    fontSize: "var(--headline5-font-size)",
+    lineHeight: "var(--headline5-line-height)",
+  },
+  body1_16_semibold: {
+    fontWeight: "var(--body1-16-semibold-font-weight)",
+    fontSize: "var(--body1-16-semibold-font-size)",
+    lineHeight: "var(--body1-16-semibold-line-height)",
+  },
+  body1_16_regular: {
+    fontWeight: "var(--body1-16-regular-font-weight)",
+    fontSize: "var(--body1-16-regular-font-size)",
+    lineHeight: "var(--body1-16-regular-line-height)",
+  },
+  body2_14_bold: {
+    fontWeight: "var(--body2-14-bold-font-weight)",
+    fontSize: "var(--body2-14-bold-font-size)",
+    lineHeight: "var(--body2-14-bold-line-height)",
+  },
+  body2_14_medium: {
+    fontWeight: "var(--body2-14-medium-font-weight)",
+    fontSize: "var(--body2-14-medium-font-size)",
+    lineHeight: "var(--body2-14-medium-line-height)",
+  },
+  body2_14_regular: {
+    fontWeight: "var(--body2-14-regular-font-weight)",
+    fontSize: "var(--body2-14-regular-font-size)",
+    lineHeight: "var(--body2-14-regular-line-height)",
+  },
+  body3_12_semibold: {
+    fontWeight: "var(--body3-12-semibold-font-weight)",
+    fontSize: "var(--body3-12-semibold-font-size)",
+    lineHeight: "var(--body3-12-semibold-line-height)",
+  },
+  body3_12_regular: {
+    fontWeight: "var(--body3-12-regular-font-weight)",
+    fontSize: "var(--body3-12-regular-font-size)",
+    lineHeight: "var(--body3-12-regular-line-height)",
+  },
+  overline: {
+    fontWeight: "var(--overline-font-weight)",
+    fontSize: "var(--overline-font-size)",
+    lineHeight: "var(--overline-line-height)",
+    letterSpacing: "1px",
+    textTransform: "uppercase",
+  },
+  button1: {
+    fontWeight: "var(--button1-font-weight)",
+    fontSize: "var(--button1-font-size)",
+    lineHeight: "var(--button1-line-height)",
+    textTransform: "capitalize",
+  },
+  button2: {
+    fontWeight: "var(--button2-font-weight)",
+    fontSize: "var(--button2-font-size)",
+    lineHeight: "var(--button2-line-height)",
+    letterSpacing: "0.2px",
+    textTransform: "capitalize",
+  },
+  caption: {
+    fontWeight: "var(--caption-font-weight)",
+    fontSize: "var(--caption-font-size)",
+    lineHeight: "var(--caption-line-height)",
+  },
+};
+
+export const cssVariables = {
+  ...fontWeights,
+  ...headline,
+  ...body,
+  ...etc,
+};
+
+export { fontVariants };

package/src/foundation/colors/base/blue.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const blue = {
+  5: "#DAECFF",
+  10: "#D0E2FF",
+  20: "#9DCEFF",
+  30: "#78A9FF",
+  40: "#4589FF",
+  50: "#0F62FE",
+  60: "#0043CE",
+  70: "#0055AB",
+  80: "#001D6C",
+  90: "#002041",
+};
+
+export const blueText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

package/src/foundation/colors/base/green.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const green = {
+  5: "#EBFFF0",
+  10: "#B4EFC4",
+  20: "#6FDC8C",
+  30: "#42BE65",
+  40: "#24A148",
+  50: "#198038",
+  60: "#0E6027",
+  70: "#044317",
+  80: "#022D0D",
+  90: "#071908",
+};
+
+export const greenText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

package/src/foundation/colors/base/grey.ts

@@ -0,0 +1,53 @@
+export const grey = {
+  0: "#FFFFFF",
+  5: "#FAFAFB",
+  10: "#F1F1F4",
+  15: "#DFDFE2",
+  20: "#C6C6C8",
+  30: "#AFAFB1",
+  40: "#99999B",
+  50: "#747477",
+  60: "#626264",
+  70: "#4E4E50",
+  75: "#404042",
+  80: "#333336",
+  85: "#2D2D2F",
+  90: "#1F1F21",
+  95: "#111113",
+  100: "#000000",
+};
+
+export const greyText = {
+  0: grey[95],
+  5: grey[95],
+  10: grey[95],
+  15: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  85: grey[5],
+  90: grey[5],
+  95: grey[5],
+  100: grey[5],
+};
+
+export const greyForMUI = {
+  50: grey[5],
+  100: grey[10],
+  200: grey[20],
+  300: grey[30],
+  400: grey[40],
+  500: grey[50],
+  600: grey[60],
+  700: grey[70],
+  800: grey[80],
+  900: grey[90],
+  A100: "#F3F3F3",
+  A200: "#C7C7C7",
+  A400: "#9A9A9A",
+  A700: "#4F4F4F",
+};

package/src/foundation/colors/base/index.ts

@@ -0,0 +1,11 @@
+export * from "./blue";
+export * from "./green";
+export * from "./grey";
+export * from "./lunitGreen";
+export * from "./lunitTeal";
+export * from "./magenta";
+export * from "./orange";
+export * from "./red";
+export * from "./yellow";
+export * from "./purple";
+export * from "./opacity";

package/src/foundation/colors/base/lunitGreen.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const lunit_green = {
+  5: "#F5FBE7",
+  10: "#EFF8BC",
+  20: "#E5F39E",
+  30: "#E1EE91",
+  40: "#DCEB7A",
+  50: "#D2EA60",
+  60: "#CEE559",
+  70: "#CADE5C",
+  80: "#BED358",
+  90: "#B1C953",
+};
+
+export const lunit_greenText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[95],
+  60: grey[95],
+  70: grey[95],
+  80: grey[95],
+  90: grey[95],
+};

package/src/foundation/colors/base/lunitTeal.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const lunit_teal = {
+  5: "#EAFAFF",
+  10: "#D1F7FF",
+  20: "#96EDFF",
+  30: "#30DFFC",
+  40: "#00C9EA",
+  50: "#01AED4",
+  60: "#048AB4",
+  70: "#016D8F",
+  80: "#05495F",
+  90: "#002930",
+};
+
+export const lunit_tealText = {
+  5: lunit_teal[90],
+  10: lunit_teal[90],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: lunit_teal[5],
+};

package/src/foundation/colors/base/magenta.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const magenta = {
+  5: "#FFF0F7",
+  10: "#FFD6E8",
+  20: "#FAB2D3",
+  30: "#F681B7",
+  40: "#FF50A0",
+  50: "#E41976",
+  60: "#9F1853",
+  70: "#740937",
+  80: "#57042A",
+  90: "#2A0A18",
+};
+
+export const magentaText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

package/src/foundation/colors/base/opacity.ts

@@ -0,0 +1,6 @@
+export const opacity = {
+  1: "rgba(0, 0, 0, 0.12)",
+  2: "rgba(0, 0, 0, 0.65)",
+  3: "rgba(255, 255, 255, 0.12)",
+  4: "rgba(255, 255, 255, 0.65)",
+};

package/src/foundation/colors/base/orange.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const orange = {
+  5: "#FFF2E8",
+  10: "#FFD9BE",
+  20: "#FFB784",
+  30: "#FF9B54",
+  40: "#F58636",
+  50: "#D36210",
+  60: "#AB4800",
+  70: "#6F3209",
+  80: "#3E1A00",
+  90: "#231000",
+};
+
+export const orangeText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

package/src/foundation/colors/base/purple.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const purple = {
+  5: "#F6F2FF",
+  10: "#E6D7FF",
+  20: "#D4BBFF",
+  30: "#BE95FF",
+  40: "#9E6BF0",
+  50: "#7E41DA",
+  60: "#6B2FC1",
+  70: "#5D22B1",
+  80: "#441C7E",
+  90: "#1D0345",
+};
+
+export const purpleText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

package/src/foundation/colors/base/red.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const red = {
+  5: "#FFF1F1",
+  10: "#FFD7D9",
+  20: "#FFB3B8",
+  30: "#FF7077",
+  40: "#FA464F",
+  50: "#DA1E28",
+  60: "#A2191F",
+  70: "#750E13",
+  80: "#520408",
+  90: "#3E0600",
+};
+
+export const redText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};

package/src/foundation/colors/base/yellow.ts

@@ -0,0 +1,27 @@
+import { grey } from "./grey";
+
+export const yellow = {
+  5: "#FCF4D6",
+  10: "#FFF9C7",
+  20: "#FFF296",
+  30: "#FFEA5D",
+  40: "#FFDE03",
+  50: "#E1B000",
+  60: "#A67B0E",
+  70: "#6E5002",
+  80: "#584106",
+  90: "#3B2B00",
+};
+
+export const yellowText = {
+  5: grey[95],
+  10: grey[95],
+  20: grey[95],
+  30: grey[95],
+  40: grey[95],
+  50: grey[5],
+  60: grey[5],
+  70: grey[5],
+  80: grey[5],
+  90: grey[5],
+};