@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/src/styles/color.ts

@@ -1,272 +0,0 @@
-/* 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

@@ -1,200 +0,0 @@
-/* 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

@@ -1,72 +0,0 @@
-# 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");
-}
-```