@weing-dev/ui-kit-primitive 0.0.0

package/src/styles/_fontSize.mixin.scss

@@ -0,0 +1,57 @@
+@use "sass:map";
+
+$typography-size-map: (
+  heading: (
+    large: 48px,
+    medium: 40px,
+    small: 32px,
+  ),
+  title: (
+    large: 30px,
+    medium: 24px,
+    small: 20px,
+  ),
+  body: (
+    large: 18px,
+    medium: 16px,
+    small: 14px,
+  ),
+  caption: (
+    large: 14px,
+    medium: 12px,
+    small: 10px,
+  ),
+  label: (
+    large: 16px,
+    medium: 14px,
+    small: 12px,
+  ),
+  button: (
+    large: 16px,
+    medium: 14px,
+    small: 12px,
+  ),
+  alert: (
+    title: 14px,
+    content: 14px,
+  ),
+);
+
+@function typography-size($name, $size) {
+  // 이름과 크기가 유효한지 확인
+  @if map.has-key($typography-size-map, $name) {
+    $category-map: map.get($typography-size-map, $name);
+
+    @if map.has-key($category-map, $size) {
+      @return map.get($category-map, $size);
+    } @else {
+      @error "Invalid size '#{$size}' for '#{$name}'. Available sizes: #{map.keys($category-map)}";
+    }
+  } @else {
+    @error "Invalid name '#{$name}'. Available names: #{map.keys($typography-size-map)}";
+  }
+}
+
+@mixin typography-size($name, $size) {
+  font-size: typography-size($name, $size);
+}

package/src/styles/_fontWeight.mixin.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+$typography-font-weight-map: (
+  bold: 700,
+  medium: 500,
+  regular: 400,
+);
+
+@function typography-font-weight($name) {
+  @return map.get($typography-font-weight-map, $name);
+}
+
+@mixin typography-font-weight($name) {
+  font-weight: typography-font-weight($name);
+}

package/src/styles/_lineHeight.mixin.scss

@@ -0,0 +1,57 @@
+@use "sass:map";
+
+$typography-line-height-map: (
+  heading: (
+    large: 72px,
+    medium: 60px,
+    small: 48px,
+  ),
+  title: (
+    large: 42px,
+    medium: 36px,
+    small: 30px,
+  ),
+  body: (
+    large: 30px,
+    medium: 26px,
+    small: 24px,
+  ),
+  caption: (
+    large: 24px,
+    medium: 18px,
+    small: 14px,
+  ),
+  label: (
+    large: 24px,
+    medium: 22px,
+    small: 18px,
+  ),
+  button: (
+    large: 24px,
+    medium: 22px,
+    small: 18px,
+  ),
+  alert: (
+    title: 24px,
+    content: 24px,
+  ),
+);
+
+@function typography-line-height($name, $size) {
+  // 이름과 크기가 유효한지 확인
+  @if map.has-key($typography-line-height-map, $name) {
+    $category-map: map.get($typography-line-height-map, $name);
+
+    @if map.has-key($category-map, $size) {
+      @return map.get($category-map, $size);
+    } @else {
+      @error "Invalid size '#{$size}' for '#{$name}'. Available sizes: #{map.keys($category-map)}";
+    }
+  } @else {
+    @error "Invalid name '#{$name}'. Available names: #{map.keys($typography-line-height-map)}";
+  }
+}
+
+@mixin typography-line-height($name, $size) {
+  line-height: typography-line-height($name, $size);
+}

package/src/styles/_scrollbar.mixin.scss

@@ -0,0 +1,49 @@
+@mixin scrollbar($variant: "transparent", $type: "grey", $direction: "vertical") {
+  &::-webkit-scrollbar {
+    @if $direction == "vertical" {
+      width: 12px; // 수직 스크롤바 너비
+      height: 0;
+    } @else if $direction == "horizontal" {
+      height: 16px; // 수평 스크롤바 높이
+      width: 0;
+    }
+  }
+
+  &::-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;
+  }
+}

package/src/styles/baseColor.ts

@@ -0,0 +1,297 @@
+export const BaseColor = {
+  red: {
+    Red1: "#fff1f0",
+    Red2: "#ffdbd8",
+    Red3: "#ffbbbc",
+    Red4: "#ff8587",
+    Red5: "#ff4d56",
+    Red6: "#f5222d",
+    Red7: "#d6231d",
+    Red8: "#b71d18",
+    Red9: "#7a0916",
+    Red10: "#5c0011",
+  },
+  lightGreen: {
+    LightGreen1: "#e3ffe2",
+    LightGreen2: "#d3fcd2",
+    LightGreen3: "#a4f6a2",
+    LightGreen4: "#77ed8b",
+    LightGreen5: "#32d970",
+    LightGreen6: "#1cc95c",
+    LightGreen7: "#10a564",
+    LightGreen8: "#118d57",
+    LightGreen9: "#065e49",
+    LightGreen10: "#04503e",
+  },
+  cyanBlue: {
+    CyanBlue1: "#e2fffa",
+    CyanBlue2: "#cafdf5",
+    CyanBlue3: "#9ff6f6",
+    CyanBlue4: "#61f3f3",
+    CyanBlue5: "#3bdff2",
+    CyanBlue6: "#00b8d9",
+    CyanBlue7: "#1c87b6",
+    CyanBlue8: "#006c9c",
+    CyanBlue9: "#003768",
+    CyanBlue10: "#00284c",
+  },
+  purple: {
+    Purple1: "#f9f0ff",
+    Purple2: "#efd6ff",
+    Purple3: "#d7a8ff",
+    Purple4: "#c684ff",
+    Purple5: "#a65dff",
+    Purple6: "#8e33ff",
+    Purple7: "#642ac1",
+    Purple8: "#5119b7",
+    Purple9: "#27097a",
+    Purple10: "#120338",
+  },
+  gold: {
+    Gold1: "#fffbe6",
+    Gold2: "#fff5cc",
+    Gold3: "#ffe99e",
+    Gold4: "#ffd666",
+    Gold5: "#ffc53d",
+    Gold6: "#ffab00",
+    Gold7: "#d48806",
+    Gold8: "#b76e00",
+    Gold9: "#7a4100",
+    Gold10: "#623501",
+  },
+  blue: {
+    Blue1: "#e6f7ff",
+    Blue2: "#cde9fd",
+    Blue3: "#a1d3f7",
+    Blue4: "#6bb1f8",
+    Blue5: "#3592f0",
+    Blue6: "#0c68e9",
+    Blue7: "#075bd1",
+    Blue8: "#063ba7",
+    Blue9: "#021d6f",
+    Blue10: "#001941",
+  },
+  grey: {
+    Grey1: "#fdfeff",
+    Grey2: "#f9fafb",
+    Grey3: "#f4f6f8",
+    Grey4: "#dfe3e8",
+    Grey5: "#c4cdd5",
+    Grey6: "#919eab",
+    Grey7: "#637381",
+    Grey8: "#454f5b",
+    Grey9: "#1c252e",
+    Grey10: "#141a21",
+  },
+  deepGreen: {
+    DeepGreen1: "#ebfff0",
+    DeepGreen2: "#c8fad6",
+    DeepGreen3: "#92f1ad",
+    DeepGreen4: "#5be49b",
+    DeepGreen5: "#14c489",
+    DeepGreen6: "#00a76f",
+    DeepGreen7: "#019362",
+    DeepGreen8: "#007867",
+    DeepGreen9: "#004b50",
+    DeepGreen10: "#00373b",
+  },
+
+  blackBlack: "#000000",
+  whiteWhite: "#ffffff",
+} as const;
+
+export const SimenticColor = {
+  red: {
+    Lighter: BaseColor.red.Red2,
+    Light: BaseColor.red.Red4,
+    Main: BaseColor.red.Red6,
+    Dark: BaseColor.red.Red8,
+    Darker: BaseColor.red.Red10,
+  },
+  lightGreen: {
+    Lighter: BaseColor.lightGreen.LightGreen2,
+    Light: BaseColor.lightGreen.LightGreen4,
+    Main: BaseColor.lightGreen.LightGreen6,
+    Dark: BaseColor.lightGreen.LightGreen8,
+    Darker: BaseColor.lightGreen.LightGreen10,
+  },
+  cyanBlue: {
+    Lighter: BaseColor.cyanBlue.CyanBlue2,
+    Light: BaseColor.cyanBlue.CyanBlue4,
+    Main: BaseColor.cyanBlue.CyanBlue6,
+    Dark: BaseColor.cyanBlue.CyanBlue8,
+    Darker: BaseColor.cyanBlue.CyanBlue10,
+  },
+  purple: {
+    Lighter: BaseColor.purple.Purple2,
+    Light: BaseColor.purple.Purple4,
+    Main: BaseColor.purple.Purple6,
+    Dark: BaseColor.purple.Purple8,
+    Darker: BaseColor.purple.Purple10,
+  },
+  gold: {
+    Lighter: BaseColor.gold.Gold2,
+    Light: BaseColor.gold.Gold4,
+    Main: BaseColor.gold.Gold6,
+    Dark: BaseColor.gold.Gold8,
+    Darker: BaseColor.gold.Gold10,
+  },
+  blue: {
+    Lighter: BaseColor.blue.Blue2,
+    Light: BaseColor.blue.Blue4,
+    Main: BaseColor.blue.Blue6,
+    Dark: BaseColor.blue.Blue8,
+    Darker: BaseColor.blue.Blue10,
+  },
+  deepGreen: {
+    Lighter: BaseColor.deepGreen.DeepGreen2,
+    Light: BaseColor.deepGreen.DeepGreen4,
+    Main: BaseColor.deepGreen.DeepGreen6,
+    Dark: BaseColor.deepGreen.DeepGreen8,
+    Darker: BaseColor.deepGreen.DeepGreen10,
+  },
+  whiteMain: BaseColor.whiteWhite,
+  blackMain: BaseColor.blackBlack,
+};
+
+export const Transparent = {
+  red4: "#f5222d0a",
+  red8: "#f5222d14",
+  red12: "#f5222d1e",
+  red16: "#f5222d28",
+  red20: "#f5222d33",
+  red24: "#f5222d3d",
+  red32: "#f5222d51",
+  red40: "#f5222d66",
+  red48: "#f5222d7a",
+
+  lightGreen4: "#1cc95c0a",
+  lightGreen8: "#1cc95c14",
+  lightGreen12: "#1cc95c1e",
+  lightGreen16: "#1cc95c28",
+  lightGreen20: "#1cc95c33",
+  lightGreen24: "#1cc95c3d",
+  lightGreen32: "#1cc95c51",
+  lightGreen40: "#1cc95c66",
+  lightGreen48: "#1cc95c7a",
+
+  cyanBlue4: "#00b8d90a",
+  cyanBlue8: "#00b8d914",
+  cyanBlue12: "#00b8d91e",
+  cyanBlue16: "#00b8d928",
+  cyanBlue20: "#00b8d933",
+  cyanBlue24: "#00b8d93d",
+  cyanBlue32: "#00b8d951",
+  cyanBlue40: "#00b8d966",
+  cyanBlue48: "#00b8d97a",
+
+  purple4: "#8e33ff0a",
+  purple8: "#8e33ff14",
+  purple12: "#8e33ff1e",
+  purple16: "#8e33ff28",
+  purple20: "#8e33ff33",
+  purple24: "#8e33ff3d",
+  purple32: "#8e33ff51",
+  purple40: "#8e33ff66",
+  purple48: "#8e33ff7a",
+
+  gold4: "#ffab000a",
+  gold8: "#ffab0014",
+  gold12: "#ffab001e",
+  gold16: "#ffab0028",
+  gold20: "#ffab0033",
+  gold24: "#ffab003d",
+  gold32: "#ffab0051",
+  gold40: "#ffab0066",
+  gold48: "#ffab007a",
+
+  blue4: "#0c68e90a",
+  blue8: "#0c68e914",
+  blue12: "#0c68e91e",
+  blue16: "#0c68e928",
+  blue20: "#0c68e933",
+  blue24: "#0c68e93d",
+  blue32: "#0c68e951",
+  blue40: "#0c68e966",
+  blue48: "#0c68e97a",
+
+  grey4: "#919eab0a",
+  grey8: "#919eab14",
+  grey12: "#919eab1e",
+  grey16: "#919eab28",
+  grey20: "#919eab33",
+  grey24: "#919eab3d",
+  grey32: "#919eab51",
+  grey40: "#919eab66",
+  grey48: "#919eab7a",
+  grey56: "#919eab8e",
+  grey64: "#919eaba3",
+  grey72: "#919eabb7",
+  grey80: "#919eabcc",
+
+  black8: "#00000014",
+  black12: "#0000001e",
+  black16: "#00000028",
+  black20: "#00000033",
+  black24: "#0000003d",
+  black32: "#00000051",
+  black40: "#00000066",
+  black48: "#0000007a",
+  black56: "#0000008e",
+  black64: "#000000a3",
+  black72: "#000000b7",
+  black80: "#000000cc",
+
+  white8: "#ffffff14",
+  white12: "#ffffff1e",
+  white16: "#ffffff28",
+  white20: "#ffffff33",
+  white24: "#ffffff3d",
+  white32: "#ffffff51",
+  white40: "#ffffff66",
+  white48: "#ffffff7a",
+  white56: "#ffffff8e",
+  white64: "#ffffffa3",
+  white72: "#ffffffb7",
+  white80: "#ffffffcc",
+
+  deepGreen4: "#00a76f0a",
+  deepGreen8: "#00a76f14",
+  deepGreen12: "#00a76f1e",
+  deepGreen16: "#00a76f28",
+  deepGreen20: "#00a76f33",
+  deepGreen24: "#00a76f3d",
+  deepGreen32: "#00a76f51",
+  deepGreen40: "#00a76f66",
+  deepGreen48: "#00a76f7a",
+
+  primary4: "#00a76f0a",
+  primary8: "#00a76f14",
+  primary12: "#00a76f1e",
+  primary16: "#00a76f28",
+  primary20: "#00a76f33",
+  primary24: "#00a76f3d",
+  primary32: "#00a76f51",
+  primary40: "#00a76f66",
+  primary48: "#00a76f7a",
+};
+
+// const a = {
+//   component: {
+//     light: {dimmedLight: '#00000033', dimmedDark: '#0000007a'},
+//     dark: {dimmedLight: '#00000033', dimmedDark: '#0000007a'},
+//   },
+//   shadow: {
+//     mode1: {
+//       dialogColor: '#919eab33',
+//       dropdownColor: '#919eab33',
+//       z4Color: '#919eab33',
+//       z8Color: '#919eab33',
+//       z12Color: '#919eab33',
+//       z16Color: '#919eab33',
+//       z20Color: '#919eab33',
+//       z24Color: '#919eab33',
+//       cardColor: '#919eab33',
+//     },
+//   },
+// };