@weing-dev/ui-kit-primitive 0.0.0

package/src/styles/color.ts

@@ -0,0 +1,272 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+type Theme = "light" | "dark";
+
+type VariableKey = keyof ColorType;
+
+type ThemedPalette = Record<
+  VariableKey,
+  string | Record<string, string | readonly string[]>
+>;
+
+export const variableLight: ColorType = {
+  gray: {
+    gray0: "#000000",
+    gray10: "#121416",
+    gray20: "#292C2E",
+    gray30: "#323436",
+    gray40: "#505254",
+    gray50: "#636567",
+    gray60: "#8A8C8F",
+    gray70: "#989B9F",
+    gray80: "#B1B3B7",
+    gray90: "#D6D7DA",
+    gray95: "#E8E8E9",
+    gray99: "#F6F8FB",
+    gray100: "#FFFFFF",
+    disabled: "#CDD1D7",
+  },
+  steelBlue: {
+    steelBlue0: "#000000",
+    steelBlue10: "#0E3160",
+    steelBlue20: "#154686",
+    steelBlue30: "#2F60A6",
+    steelBlue40: "#3E71B2",
+    steelBlue50: "#4481C1",
+    steelBlue60: "#5390D0",
+    steelBlue70: "#659FD6",
+    steelBlue80: "#7DAFDC",
+    steelBlue90: "#9EC6E7",
+    steelBlue95: "#C2DBF0",
+    steelBlue99: "#EEF7FD",
+    steelBlue100: "#FFFFFF",
+    disabled: "#CDD1D7",
+  },
+  beige: {
+    beige0: "#000000",
+    beige10: "#3A301D",
+    beige20: "#56422A",
+    beige30: "#735A3C",
+    beige40: "#937655",
+    beige50: "#B1916B",
+    beige60: "#C4A581",
+    beige70: "#D1B492",
+    beige80: "#DECBAF",
+    beige90: "#EADCC8",
+    beige95: "#F5EEE0",
+    beige99: "#F9F7F3",
+    beige100: "#FFF",
+    disabled: "#E0DAD5",
+  },
+  royalOrange: {
+    royalOrange0: "#000000",
+    royalOrange10: "#6A2F09",
+    royalOrange20: "#AC4F13",
+    royalOrange30: "#C7601E",
+    royalOrange40: "#D86A22",
+    royalOrange50: "#E87930",
+    royalOrange60: "#FD914B",
+    royalOrange70: "#FFA468",
+    royalOrange80: "#FFB98C",
+    royalOrange90: "#FFCAA8",
+    royalOrange95: "#FFDAC1",
+    royalOrange99: "#FFE9DB",
+    royalOrange100: "#FFFFFF",
+    disabled: "#EDE0D8",
+  },
+  lubyRed: {
+    lubyRed0: "#000000",
+    lubyRed10: "#43000A",
+    lubyRed20: "#590411",
+    lubyRed30: "#6A0616",
+    lubyRed40: "#7A091B",
+    lubyRed50: "#8E0B20",
+    lubyRed60: "#AD122B",
+    lubyRed70: "#C9213C",
+    lubyRed80: "#ED536C",
+    lubyRed90: "#F9A4B1",
+    lubyRed95: "#FFCED6",
+    lubyRed99: "#FFE9EC",
+    lubyRed100: "#FFFFFF",
+    disabled: "#CABCBF",
+  },
+  cyan: {
+    cyan0: "#000000",
+    cyan10: "#005353",
+    cyan20: "#007B7B",
+    cyan30: "#009797",
+    cyan40: "#00B5B5",
+    cyan50: "#00CACA",
+    cyan60: "#00DCDC",
+    cyan70: "#31EDED",
+    cyan80: "#6FFCFC",
+    cyan90: "#A5FFFF",
+    cyan95: "#D0FFFF",
+    cyan99: "#EEFFFF",
+    cyan100: "#FFFFFF",
+    disabled: "#CDD1D7",
+  },
+  mint: {
+    mint0: "#000000",
+    mint10: "#20613E",
+    mint20: "#28774C",
+    mint30: "#2C8A56",
+    mint40: "#369E65",
+    mint50: "#45B075",
+    mint60: "#54C587",
+    mint70: "#5EDA96",
+    mint80: "#72EEAA",
+    mint90: "#9FFBC8",
+    mint95: "#CAFFE2",
+    mint99: "#F1FFF7",
+    mint100: "#FFFFFF",
+    disabled: "#CDD1D7",
+  },
+  mustardYellow: {
+    mustardYellow0: "#000000",
+    mustardYellow10: "#674A00",
+    mustardYellow20: "#916800",
+    mustardYellow30: "#B28000",
+    mustardYellow40: "#C89000",
+    mustardYellow50: "#DE9F00",
+    mustardYellow60: "#E9A802",
+    mustardYellow70: "#E9B50B",
+    mustardYellow80: "#EECB4D",
+    mustardYellow90: "#F3D97F",
+    mustardYellow95: "#F8E8B1",
+    mustardYellow99: "#FFF9E4",
+    mustardYellow100: "#FFFFFF",
+    disabled: "#F0ECDF",
+  },
+  red: {
+    red0: "#000000",
+    red10: "#410E0B",
+    red20: "#601410",
+    red30: "#8C1D18",
+    red40: "#B3261E",
+    red50: "#DC362E",
+    red60: "#E46962",
+    red70: "#EC928E",
+    red80: "#F2B8B5",
+    red90: "#F9DEDC",
+    red95: "#FCEEEE",
+    red99: "#FFF5F5",
+    red100: "#FFFFFF",
+    disabled: "#E8CBCB",
+  },
+  green: {
+    green0: "#000000",
+    green10: "#06421A",
+    green20: "#00691A",
+    green30: "#007D01",
+    green40: "#01870B",
+    green50: "#0B9115",
+    green60: "#1FA529",
+    green70: "#3EC348",
+    green80: "#5CD765",
+    green90: "#8BE892",
+    green95: "#BBFCC0",
+    green99: "#DFFFE2",
+    green100: "#FFFFFF",
+    disabled: "#B6DEB9",
+  },
+} as const;
+
+const variableDark: Record<VariableKey, string | Record<string, string>> = {
+  ...variableLight,
+};
+
+const cssVariableReplace = (str: string) =>
+  str
+    .replace(/_/g, "-")
+    .replace(/^[a-z]/, (char) => `-${char}`)
+    .replace(/([A-Z])/g, (char) => `-${char.toLocaleLowerCase()}`);
+
+const themeVariableSets: Record<Theme, ThemedPalette> = {
+  light: variableLight,
+  dark: variableDark,
+};
+
+/**
+ * 
+ * 객체를 넣으면 이런형식으로 반환해줌 `
+  --text: black;
+  --background: white;
+` --socialGoogleBackground: '#f4f4f4',
+ */
+const buildCssVariables = (variables: ColorType) => {
+  const keys = Object.keys(variables) as (keyof ColorType)[];
+
+  return keys.reduce((acc, key) => {
+    if (typeof variables[key] !== "string") {
+      const str = Object.keys(variables[key]).reduce((acc, subKey) => {
+        return acc.concat(
+          `--${key}${cssVariableReplace(subKey).replace(/(\d.)/g, "-$1")}: ${
+            (variables[key] as never)[subKey]
+          };`,
+          "\n"
+        );
+      }, "");
+
+      return acc.concat(str);
+    }
+    return acc.concat(`--${key.replace(/_/g, "-")}: ${variables[key]};`, "\n");
+  }, "");
+};
+
+export const themes = {
+  light: buildCssVariables(themeVariableSets.light as ColorType),
+  dark: buildCssVariables(themeVariableSets.dark as ColorType),
+} as const;
+
+const cssVar = (name: string) => `var(--${name.replace(/_/g, "-")})`;
+
+const subCssVar = (parentKey: string, key: string) =>
+  `var(--${parentKey}${key.replace(/_/g, "-")})`;
+
+const replaceCssVar = (name: string, value: string) =>
+  `${name.replace(/_/g, "-")}, ${value})`
+    .replace(/(\))(\\,)/, "$2")
+    .replace(/(\d.)/g, "-$1");
+
+const variableKeys = Object.keys(themeVariableSets.light) as VariableKey[];
+
+export const themedPalette = variableKeys.reduce((acc, key) => {
+  const colorVal = variableLight[key];
+
+  if (typeof colorVal !== "string") {
+    const obj = Object.keys(colorVal).reduce((acc, subKey) => {
+      const subColorVal = (colorVal as any)[subKey];
+
+      acc[subKey] = Array.isArray(subColorVal)
+        ? replaceCssVar(
+            subCssVar(
+              key,
+              subKey
+                .replace(/_/g, "-")
+                .replace(/^[a-z]/, (char) => `-${char}`)
+                .replace(/([A-Z])/g, (char) => `-${char.toLocaleLowerCase()}`)
+                .replace(/(\d.)/g, "-$1")
+            ),
+            subColorVal[1]
+          )
+        : subCssVar(
+            key,
+            subKey
+              .replace(/_/g, "-")
+              .replace(/^[a-z]/, (char) => `-${char}`)
+              .replace(/([A-Z])/g, (char) => `-${char.toLocaleLowerCase()}`)
+              .replace(/(\d.)/g, "-$1")
+          );
+
+      return acc;
+    }, {} as any);
+
+    acc[key] = obj;
+    return acc;
+  }
+
+  (acc as any)[key] = cssVar(key);
+
+  return acc;
+}, {} as ColorType);

package/src/styles/color2.ts

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { BaseColor, SimenticColor, Transparent } from "./baseColor";
+
+export const colorThemes = {
+  light: {
+    textPrimary: BaseColor.grey.Grey9,
+    textSecondary: BaseColor.grey.Grey7,
+    textTertiary: BaseColor.grey.Grey6,
+    textDisabled: BaseColor.grey.Grey5,
+    backgroundDefault: BaseColor.whiteWhite,
+    backgroundPaper: BaseColor.whiteWhite,
+    backgroundSecond: Transparent.grey8,
+    backgroundNeutral: BaseColor.grey.Grey2,
+    shadow8: Transparent.grey8,
+    shadow12: Transparent.grey12,
+    shadow20: Transparent.grey20,
+    componentTextfieldFilled: Transparent.grey8,
+    componentTextfieldUnderline: Transparent.grey40,
+    componentTextfieldOutline: Transparent.grey24,
+    actionHover: Transparent.grey16,
+    actionDisabled: Transparent.grey40,
+    actionDisabledBackground: Transparent.grey16,
+    actionSelected: Transparent.grey16,
+    actionFocus: Transparent.grey48,
+    textError: BaseColor.red.Red6,
+    textSuccess: BaseColor.lightGreen.LightGreen6,
+    actionAction: BaseColor.grey.Grey6,
+    textWarning: BaseColor.gold.Gold6,
+    textContrast: BaseColor.whiteWhite,
+    inheritColor: BaseColor.whiteWhite,
+    inheritBgcolor: BaseColor.grey.Grey9,
+    inheritHover: BaseColor.grey.Grey8,
+    swapDarkLightRed: BaseColor.red.Red8,
+    swapDarkLightLightGreen: BaseColor.lightGreen.LightGreen8,
+    swapDarkLightDeepGreen: BaseColor.deepGreen.DeepGreen8,
+    swapDarkLightCyanBlue: BaseColor.cyanBlue.CyanBlue8,
+    swapDarkLightPurple: BaseColor.purple.Purple8,
+    swapDarkLightGold: BaseColor.gold.Gold8,
+    swapDarkLightBlue: BaseColor.blue.Blue8,
+    swapDarkLightPrimary: BaseColor.deepGreen.DeepGreen8,
+  },
+  dark: {
+    textPrimary: BaseColor.whiteWhite,
+    textSecondary: BaseColor.grey.Grey5,
+    textTertiary: BaseColor.grey.Grey6,
+    textDisabled: BaseColor.grey.Grey7,
+    backgroundDefault: BaseColor.grey.Grey10,
+    backgroundPaper: BaseColor.grey.Grey9,
+    backgroundSecond: BaseColor.grey.Grey8,
+    backgroundNeutral: Transparent.grey12,
+    shadow8: Transparent.black8,
+    shadow12: Transparent.black12,
+    shadow20: Transparent.black20,
+    componentTextfieldFilled: Transparent.grey8,
+    componentTextfieldUnderline: Transparent.grey40,
+    componentTextfieldOutline: Transparent.grey24,
+    actionHover: Transparent.grey16,
+    actionDisabled: Transparent.grey40,
+    actionDisabledBackground: Transparent.grey20,
+    actionSelected: Transparent.grey16,
+    actionFocus: Transparent.grey8,
+    textError: BaseColor.red.Red6,
+    textSuccess: BaseColor.lightGreen.LightGreen6,
+    actionAction: BaseColor.grey.Grey5,
+    textWarning: BaseColor.gold.Gold6,
+    textContrast: BaseColor.blackBlack,
+    inheritColor: BaseColor.grey.Grey9,
+    inheritBgcolor: BaseColor.whiteWhite,
+    inheritHover: BaseColor.grey.Grey5,
+    swapDarkLightRed: BaseColor.red.Red4,
+    swapDarkLightLightGreen: BaseColor.lightGreen.LightGreen4,
+    swapDarkLightDeepGreen: BaseColor.deepGreen.DeepGreen4,
+    swapDarkLightCyanBlue: BaseColor.cyanBlue.CyanBlue4,
+    swapDarkLightPurple: BaseColor.purple.Purple4,
+    swapDarkLightGold: BaseColor.gold.Gold4,
+    swapDarkLightBlue: BaseColor.blue.Blue4,
+    swapDarkLightPrimary: BaseColor.deepGreen.DeepGreen4,
+  },
+  primary: {
+    pLighter: SimenticColor.deepGreen.Lighter,
+    pLight: SimenticColor.deepGreen.Light,
+    pMain: SimenticColor.deepGreen.Main,
+    pDark: SimenticColor.deepGreen.Dark,
+    pDarker: SimenticColor.deepGreen.Darker,
+    p4: Transparent.deepGreen4,
+    p8: Transparent.deepGreen8,
+    p12: Transparent.deepGreen12,
+    p16: Transparent.deepGreen16,
+    p20: Transparent.deepGreen20,
+    p24: Transparent.deepGreen24,
+    p32: Transparent.deepGreen32,
+    p40: Transparent.deepGreen40,
+    p48: Transparent.deepGreen48,
+    pContrastText: SimenticColor.whiteMain,
+  },
+};
+
+type ThemedPalette = Record<
+  any,
+  string | Record<string, string | Record<string, string>>
+>;
+
+/**
+ * 
+ * 객체를 넣으면 이런형식으로 반환해줌 `
+  --text: black;
+  --background: white;
+` --socialGoogleBackground: '#f4f4f4',
+ */
+const buildCssVariables = (variables: ThemedPalette) => {
+  const keys = Object.keys(variables) as (keyof ThemedPalette)[];
+
+  const processNestedObject = (
+    obj: Record<
+      string,
+      string | Record<string, string | Record<string, string>>
+    >,
+    prefix: string
+  ): string => {
+    return Object.keys(obj).reduce((acc, subKey) => {
+      const value = obj[subKey];
+      if (typeof value === "object") {
+        return acc.concat(processNestedObject(value, `${prefix}${subKey}`));
+      }
+      return acc.concat(`--${prefix}${subKey}: ${value};\n`);
+    }, "");
+  };
+
+  return keys.reduce((acc, key) => {
+    const value = variables[key];
+    if (typeof value === "object") {
+      return acc.concat(processNestedObject(value, key as string));
+    }
+    return acc.concat(`--${key.replace(/_/g, "-")}: ${value};\n`);
+  }, "");
+};
+
+export const themes = {
+  light: buildCssVariables(colorThemes.light),
+  dark: buildCssVariables(colorThemes.dark),
+  primary: buildCssVariables(colorThemes.primary),
+  base: buildCssVariables(BaseColor),
+  simentic: buildCssVariables(SimenticColor),
+  transparent: buildCssVariables(Transparent),
+} as const;
+
+const cssVar = (name: string) => `var(--${name.replace(/_/g, "-")})`;
+
+const subCssVar = (parentKey: string, key: string) =>
+  `var(--${parentKey}${key.replace(/_/g, "-")})`;
+
+const replaceCssVar = (name: string, value: string) =>
+  `${name.replace(/_/g, "-")}, ${value})`
+    .replace(/(\))(\\,)/, "$2")
+    .replace(/(\d.)/g, "-$1");
+
+const variableKeys = Object.keys(
+  colorThemes.light
+) as (keyof typeof colorThemes.light)[];
+
+export const themedPalette = variableKeys.reduce((acc, key) => {
+  const colorVal = colorThemes.light[key];
+
+  if (typeof colorVal !== "string") {
+    const obj = Object.keys(colorVal).reduce((acc, subKey) => {
+      const subColorVal = (colorVal as any)[subKey];
+
+      acc[subKey] = Array.isArray(subColorVal)
+        ? replaceCssVar(
+            subCssVar(
+              key,
+              subKey
+                .replace(/_/g, "-")
+                .replace(/^[a-z]/, (char) => `-${char}`)
+                .replace(/([A-Z])/g, (char) => `-${char.toLocaleLowerCase()}`)
+                .replace(/(\d.)/g, "-$1")
+            ),
+            subColorVal[1]
+          )
+        : subCssVar(
+            key,
+            subKey
+              .replace(/_/g, "-")
+              .replace(/^[a-z]/, (char) => `-${char}`)
+              .replace(/([A-Z])/g, (char) => `-${char.toLocaleLowerCase()}`)
+              .replace(/(\d.)/g, "-$1")
+          );
+
+      return acc;
+    }, {} as any);
+
+    acc[key] = obj;
+    return acc;
+  }
+
+  (acc as any)[key] = cssVar(key);
+
+  return acc;
+}, {} as any);

package/src/styles/scrollbar.README.md

@@ -0,0 +1,72 @@
+# Scrollbar Mixin
+
+`_scrollbar.mixin.scss`에서 다음과 같이 정의되어 있습니다.
+
+```scss
+@mixin scrollbar(
+  $variant: "transparent",
+  $type: "grey",
+  $direction: "vertical"
+) {
+  &::-webkit-scrollbar {
+    @if $direction == "vertical" {
+      width: 12px; // 수직 스크롤바 너비
+    } @else if $direction == "horizontal" {
+      height: 16px; // 수평 스크롤바 높이
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #fbfbfc;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    min-height: 60px;
+    @if $direction == "vertical" {
+      border: 2px solid #fbfbfc;
+    } @else if $direction == "horizontal" {
+      border: 4px solid #fbfbfc;
+    }
+
+    @if $variant == "transparent" {
+      @if $type == "grey" {
+        background: var(--grey16, #919eab29);
+      } @else if $type == "primary" {
+        background: var(--p16, #00a76f29);
+      }
+    } @else if $variant == "color" {
+      @if $type == "grey" {
+        background: var(--greyGrey4, #dfe3e8);
+      } @else if $type == "primary" {
+        background: var(--pMain, #00a76f);
+      }
+    }
+  }
+
+  &::-webkit-scrollbar-button:vertical:start:decrement {
+    display: block;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-button:vertical:end:increment {
+    display: block;
+    height: 8px;
+  }
+}
+```
+
+위의 믹스를 사용하여 스크롤바의 색상, 방향 및 스타일을 조정할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:
+
+```scss
+body {
+  @include scrollbar("color", "primary");
+}
+
+.Parent {
+  // @include scrollbar("transparent", "grey", "horizontal");
+  // @include scrollbar("transparent", "primary", "vertical");
+  // @include scrollbar("color", "grey", "vertical");
+  @include scrollbar("color", "primary", "vertical");
+}
+```