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

package/src/styles/_fontSize.mixin.scss

@@ -1,57 +0,0 @@
-@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

@@ -1,15 +0,0 @@
-@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

@@ -1,57 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-@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

@@ -1,297 +0,0 @@
-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',
-//     },
-//   },
-// };