gaesup-world 0.0.1

package/src/styles/constants/translate.css.ts

@@ -0,0 +1,129 @@
+export const translate = {
+  center: {
+    transform: "translate(-50%, -50%)",
+  },
+  left: {
+    transform: "translate(-100%, -50%)",
+  },
+  right: {
+    transform: "translate(0, -50%)",
+  },
+  top: {
+    transform: "translate(-50%, -100%)",
+  },
+  bottom: {
+    transform: "translate(-50%, 0)",
+  },
+  top_left: {
+    transform: "translate(-100%, -100%)",
+  },
+  top_right: {
+    transform: "translate(0, -100%)",
+  },
+  bottom_left: {
+    transform: "translate(-100%, 0)",
+  },
+  bottom_right: {
+    transform: "translate(0, 0)",
+  },
+};
+
+export const translateX = {
+  left: { transform: "translateX(-100%)" },
+  right: { transform: "translateX(100%)" },
+  zero: { transform: "translateX(0)" },
+  left_10: { transform: "translateX(-10%)" },
+  right_10: { transform: "translateX(10%)" },
+  left_20: { transform: "translateX(-20%)" },
+  right_20: { transform: "translateX(20%)" },
+  left_30: { transform: "translateX(-30%)" },
+  right_30: { transform: "translateX(30%)" },
+  left_40: { transform: "translateX(-40%)" },
+  right_40: { transform: "translateX(40%)" },
+  left_50: { transform: "translateX(-50%)" },
+  right_50: { transform: "translateX(50%)" },
+  left_60: { transform: "translateX(-60%)" },
+  right_60: { transform: "translateX(60%)" },
+  left_70: { transform: "translateX(-70%)" },
+  right_70: { transform: "translateX(70%)" },
+  left_80: { transform: "translateX(-80%)" },
+  right_80: { transform: "translateX(80%)" },
+  left_90: { transform: "translateX(-90%)" },
+  right_90: { transform: "translateX(90%)" },
+  left_100: { transform: "translateX(-100%)" },
+  right_100: { transform: "translateX(100%)" },
+  left_1rem: { transform: "translateX(-1rem)" },
+
+  right_1rem: { transform: "translateX(1rem)" },
+  left_2rem: { transform: "translateX(-2rem)" },
+  right_2rem: { transform: "translateX(2rem)" },
+  left_3rem: { transform: "translateX(-3rem)" },
+  right_3rem: { transform: "translateX(3rem)" },
+  left_4rem: { transform: "translateX(-4rem)" },
+  right_4rem: { transform: "translateX(4rem)" },
+  left_5rem: { transform: "translateX(-5rem)" },
+  right_5rem: { transform: "translateX(5rem)" },
+  left_6rem: { transform: "translateX(-6rem)" },
+  right_6rem: { transform: "translateX(6rem)" },
+  left_7rem: { transform: "translateX(-7rem)" },
+  right_7rem: { transform: "translateX(7rem)" },
+  left_8rem: { transform: "translateX(-8rem)" },
+  right_8rem: { transform: "translateX(8rem)" },
+  left_9rem: { transform: "translateX(-9rem)" },
+  right_9rem: { transform: "translateX(9rem)" },
+  left_10rem: { transform: "translateX(-10rem)" },
+  right_10rem: { transform: "translateX(10rem)" },
+};
+
+export const translateY = {
+  top: { transform: "translateY(-100%)" },
+  bottom: { transform: "translateY(100%)" },
+  zero: { transform: "translateY(0)" },
+  top_10: { transform: "translateY(-10%)" },
+  bottom_10: { transform: "translateY(10%)" },
+  top_20: { transform: "translateY(-20%)" },
+  bottom_20: { transform: "translateY(20%)" },
+  top_30: { transform: "translateY(-30%)" },
+  bottom_30: { transform: "translateY(30%)" },
+  top_40: { transform: "translateY(-40%)" },
+  bottom_40: { transform: "translateY(40%)" },
+  top_50: { transform: "translateY(-50%)" },
+  bottom_50: { transform: "translateY(50%)" },
+  top_60: { transform: "translateY(-60%)" },
+  bottom_60: { transform: "translateY(60%)" },
+  top_70: { transform: "translateY(-70%)" },
+  bottom_70: { transform: "translateY(70%)" },
+  top_80: { transform: "translateY(-80%)" },
+  bottom_80: { transform: "translateY(80%)" },
+  top_90: { transform: "translateY(-90%)" },
+  bottom_90: { transform: "translateY(90%)" },
+  top_100: { transform: "translateY(-100%)" },
+  bottom_100: { transform: "translateY(100%)" },
+
+  top_1rem: { transform: "translateY(-1rem)" },
+  bottom_1rem: { transform: "translateY(1rem)" },
+  top_2rem: { transform: "translateY(-2rem)" },
+  bottom_2rem: { transform: "translateY(2rem)" },
+  top_3rem: { transform: "translateY(-3rem)" },
+  bottom_3rem: { transform: "translateY(3rem)" },
+  top_4rem: { transform: "translateY(-4rem)" },
+  bottom_4rem: { transform: "translateY(4rem)" },
+  top_5rem: { transform: "translateY(-5rem)" },
+  bottom_5rem: { transform: "translateY(5rem)" },
+  top_6rem: { transform: "translateY(-6rem)" },
+  bottom_6rem: { transform: "translateY(6rem)" },
+  top_7rem: { transform: "translateY(-7rem)" },
+  bottom_7rem: { transform: "translateY(7rem)" },
+  top_8rem: { transform: "translateY(-8rem)" },
+  bottom_8rem: { transform: "translateY(8rem)" },
+  top_9rem: { transform: "translateY(-9rem)" },
+  bottom_9rem: { transform: "translateY(9rem)" },
+  top_10rem: { transform: "translateY(-10rem)" },
+  bottom_10rem: { transform: "translateY(10rem)" },
+};
+
+export const translateAll = {
+  ...translate,
+  ...translateX,
+  ...translateY,
+};

package/src/styles/global.css.ts

@@ -0,0 +1,91 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { vars } from "./theme.css";
+
+globalStyle(":root", {
+  background: vars.themes.background,
+  color: vars.themes.text.normal,
+});
+
+globalStyle("html", {
+  boxSizing: "border-box",
+  fontSize: "62.5%",
+  overflowX: "hidden",
+  padding: 0,
+});
+
+globalStyle("body", {
+  position: "relative",
+  margin: 0,
+});
+
+globalStyle("*, *::before, *::after", {
+  boxSizing: "border-box",
+});
+
+globalStyle("a", {
+  cursor: "pointer",
+  textDecoration: "none",
+  color: "inherit",
+});
+
+globalStyle("input, input:focus", {
+  border: "none",
+  borderRight: "0px",
+  borderTop: "0px",
+  borderLeft: "0px",
+  borderBottom: "0px",
+  outline: "none",
+  WebkitAppearance: "none",
+  MozAppearance: "none",
+  appearance: "none",
+});
+
+globalStyle("button, button:focus", {
+  border: "none",
+  outline: "none",
+});
+
+globalStyle("input::-ms-clear", {
+  display: "none",
+});
+
+globalStyle(
+  'input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button',
+  {
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    appearance: "none",
+  }
+);
+
+globalStyle(
+  'input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear',
+  {
+    display: "none",
+  }
+);
+// 스크롤
+
+globalStyle("::-webkit-scrollbar", {
+  width: "1.8rem",
+});
+
+globalStyle("::-webkit-scrollbar-thumb", {
+  background: vars.gradient.purple,
+  borderRadius: "1rem",
+  border: "0.4rem solid transparent",
+  backgroundClip: "padding-box",
+});
+
+globalStyle("::-webkit-scrollbar-track", {
+  WebkitBackdropFilter: "blur(10px)",
+  backdropFilter: "blur(10px)",
+});
+
+globalStyle(
+  "input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active",
+  {
+    transition: "background-color 10000s",
+    WebkitTextFillColor: "black !important",
+  }
+);

package/src/styles/recipe/base.css.ts

@@ -0,0 +1,31 @@
+export const flex_base: {
+  display: 'flex';
+  alignItems: 'center';
+  justifyContent: 'center';
+  textAlign: 'center';
+} = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center'
+};
+// grid base
+export const grid_base: {
+  display: 'grid';
+} = {
+  display: 'grid'
+};
+// relative base
+export const relative_base: { position: 'relative' } = { position: 'relative' };
+// absolute base
+export const absolute_base: { position: 'absolute' } = { position: 'absolute' };
+// fixed base
+export const fixed_base: { position: 'fixed' } = { position: 'fixed' };
+// glass base
+export const glass_base: {
+  backdropFilter: 'blur(2rem)';
+  WebkitBackdropFilter: 'blur(2rem)';
+} = {
+  backdropFilter: 'blur(2rem)',
+  WebkitBackdropFilter: 'blur(2rem)'
+};

package/src/styles/recipe/button.css.ts

@@ -0,0 +1,109 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { boxShadowHover } from "../constants/boxshadow.css";
+import { palette } from "../constants/palette.css";
+import { sprinkles } from "../sprinkles/index.css";
+import { vars } from "../theme.css";
+import { flex_relative } from "./index.css";
+
+export const button = recipe({
+  base: [
+    flex_relative({}),
+    {
+      color: "white",
+      textAlign: "center",
+      borderRadius: "1rem",
+      margin: "0.5rem",
+      width: "100%",
+      transition: "all 0.3s ease-in",
+      cursor: "pointer",
+    },
+  ],
+  variants: {
+    purple: {
+      true: {
+        background: vars.gradient.purple,
+        boxShadow: palette.purple800,
+        ":hover": {
+          boxShadow: boxShadowHover.purple800_hover,
+        },
+      },
+    },
+    gray: {
+      true: {
+        background: palette.gray800,
+        boxShadow: palette.gray800,
+        ":hover": {
+          boxShadow: boxShadowHover.slate700_hover,
+        },
+      },
+    },
+    glass: {
+      true: {
+        color: vars.themes.text.normal,
+        background: vars.themes.glass.normal,
+        boxShadow: `0 0 5px ${vars.themes.glass.normal}`,
+        ":hover": {
+          boxShadow: `0 0 10px ${vars.themes.glass.normal}`,
+        },
+      },
+    },
+    black: {
+      false: {
+        background: palette.gray200,
+      },
+      true: {
+        background: palette.gray900,
+        color: palette.gray200,
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        gray: true,
+      },
+      style: sprinkles({
+        bs: { default: "gray900", hover: "slate700_hover" },
+      }),
+    },
+  ],
+});
+
+export const mobileButton = recipe({
+  base: [
+    {
+      width: "7.5rem",
+      height: "4rem",
+      borderRadius: "1rem",
+      fontSize: "1rem",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      color: "white",
+      boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.5)",
+      cursor: "pointer",
+      transition: "all 0.3s ease-in",
+      margin: "0.5rem",
+    },
+  ],
+  variants: {
+    character: {
+      true: {
+        background: vars.gradient.lightGreen,
+        boxShadow: "0 0 1rem rgba(5,222,250,1)",
+        color: "black",
+        ":hover": {
+          boxShadow: "0 0 2rem rgba(5,222,250,1)",
+        },
+      },
+    },
+    control: {
+      true: {
+        background: vars.gradient.red,
+        boxShadow: "0 0 1rem rgba(245,177,97,1)",
+        color: "black",
+        ":hover": {
+          boxShadow: "0 0 2rem rrgba(245,177,97,1)",
+        },
+      },
+    },
+  },
+});

package/src/styles/recipe/index.css.ts

@@ -0,0 +1,134 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { fraction, repeat } from "../constants/constant.css";
+import { clock, direction } from "../constants/direction.css";
+import { aligns } from "../constants/flex.css";
+import { gridTemplateAll } from "../constants/grid.css";
+import {
+  absolute_base,
+  fixed_base,
+  flex_base,
+  glass_base,
+  grid_base,
+  relative_base,
+} from "./base.css";
+
+export const glass = recipe({
+  base: [glass_base],
+});
+
+export const baseVarients = {
+  ...direction,
+  ...clock,
+  ...aligns,
+  fullXY: {
+    width: "full",
+    height: "full",
+  },
+};
+
+export const gridVarient = {
+  ...repeat,
+  ...gridTemplateAll,
+};
+
+export const gridVarients = {
+  gridTemplateRows: gridVarient,
+  gridTemplateColumns: gridVarient,
+  gtr: gridVarient,
+  gtc: gridVarient,
+  gr: fraction,
+  gc: fraction,
+};
+
+export const gridBaseVarients = {
+  ...baseVarients,
+  ...gridVarients,
+};
+
+// relative
+export const relative = recipe({
+  base: [relative_base],
+  variants: gridBaseVarients,
+});
+// absolute
+export const absolute = recipe({
+  base: [absolute_base],
+  variants: {
+    ...gridBaseVarients,
+    center: {
+      true: {
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+      },
+    },
+  },
+});
+// fixed 모음
+export const fixed = recipe({
+  base: [fixed_base],
+  variants: baseVarients,
+});
+
+export const flex = recipe({
+  base: [flex_base],
+  variants: { ...baseVarients, ...gridVarients },
+});
+
+export const grid = recipe({
+  base: [grid_base],
+  variants: gridBaseVarients,
+});
+// flex_relative 합치기
+export const flex_relative = recipe({
+  base: [flex_base, relative_base],
+  variants: gridBaseVarients,
+});
+// flex_absolute 합치기
+export const flex_absolute = recipe({
+  base: [flex_base, absolute_base],
+  variants: {
+    ...gridBaseVarients,
+    center: {
+      true: {
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+      },
+    },
+  },
+});
+// flex_fixed 합치기
+export const flex_fixed = recipe({
+  base: [flex_base, fixed_base],
+  variants: gridBaseVarients,
+});
+// grid_relative 합치기
+export const grid_relative = recipe({
+  base: [grid_base, relative_base],
+  variants: gridBaseVarients,
+});
+// grid_absolute 합치기
+export const grid_absolute = recipe({
+  base: [grid_base, absolute_base],
+  variants: gridBaseVarients,
+});
+// grid_fixed 합치기
+export const grid_fixed = recipe({
+  base: [grid_base, fixed_base],
+  variants: gridBaseVarients,
+});
+
+// 그라디언트 모음
+export const gradient = recipe({
+  base: {
+    background:
+      "linear-gradient(45deg, #000000, #000000) padding-box,linear-gradient(45deg, #8e2de2, #4a00e0) border-box;",
+  },
+  variants: {
+    purple: {
+      background:
+        "linear-gradient(45deg, #000000, #000000) padding-box,linear-gradient(45deg, #8e2de2, #4a00e0) border-box;",
+    },
+  },
+});

package/src/styles/recipe/input.css.ts

@@ -0,0 +1,33 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { palette } from "../constants/palette.css";
+
+export const input = recipe({
+  base: {
+    width: "100%",
+    "::-webkit-input-placeholder": {
+      color: palette.gray200,
+    },
+  },
+  variants: {
+    //glass
+    glass: {
+      true: {
+        backdropFilter: "blur(2rem)",
+        WebkitBackdropFilter: "blur(2rem)",
+        borderRadius: "1rem",
+      },
+    },
+    white: {
+      true: {
+        borderRadius: "1rem",
+        background: "rgba(255, 255, 255, 0.2)",
+        boxShadow: "0 0 10px rgba(255, 255, 255, 0.2)",
+      },
+    },
+    transparent: {
+      true: {
+        background: "transparent",
+      },
+    },
+  },
+});

package/src/styles/sprinkles/color.css.ts

@@ -0,0 +1,62 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { boxShadow, boxShadowHover } from "../constants/boxshadow.css";
+import {
+  gradient,
+  palette,
+  rgba,
+  theme,
+  themeShadow,
+  themeShadowHover,
+} from "../constants/palette.css";
+
+const paletteTheme = { ...palette, ...theme, ...rgba };
+const paletteThemeGradient = { ...palette, ...theme, ...gradient, ...rgba };
+const boxShadows = {
+  ...boxShadow,
+  ...boxShadowHover,
+  ...themeShadow,
+  ...themeShadowHover,
+};
+
+export const colorProperties = defineProperties({
+  conditions: {
+    default: {},
+    hover: { selector: "&:hover" },
+    active: { selector: "&:active" },
+    focus: { selector: "&:focus" },
+  },
+  defaultCondition: "default",
+  properties: {
+    color: paletteTheme,
+    backgroundColor: paletteThemeGradient,
+    background: paletteThemeGradient,
+    boxShadow: boxShadows,
+    tranCursor: {
+      true: {
+        transition: "all 0.3s ease-in",
+        cursor: "pointer",
+      },
+    },
+    opacity: [
+      "0",
+      "0.1",
+      "0.2",
+      "0.3",
+      "0.4",
+      "0.5",
+      "0.6",
+      "0.7",
+      "0.8",
+      "0.9",
+      "1",
+    ],
+  },
+  shorthands: {
+    bg: ["background"],
+    bgc: ["backgroundColor"],
+    c: ["color"],
+    bs: ["boxShadow"],
+    tc: ["tranCursor"],
+    op: ["opacity"],
+  },
+});

package/src/styles/sprinkles/direction.css.ts

@@ -0,0 +1,26 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { persent, size } from "../constants/constant.css";
+
+const properties = { ...persent, ...size };
+
+export const directionProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    top: properties,
+    left: properties,
+    right: properties,
+    bottom: properties,
+  },
+  shorthands: {
+    t: ["top"],
+    l: ["left"],
+    r: ["right"],
+    b: ["bottom"],
+  },
+});

package/src/styles/sprinkles/display.css.ts

@@ -0,0 +1,25 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+export const displayProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    display: ["none", "flex", "block", "inline", "grid"],
+    flexDirection: ["row", "column"],
+    justifyContent: [
+      "stretch",
+      "flex-start",
+      "center",
+      "flex-end",
+      "space-around",
+      "space-between",
+    ],
+    alignItems: ["stretch", "flex-start", "center", "flex-end"],
+    textAlign: ["left", "center", "right"],
+  },
+});

package/src/styles/sprinkles/fontSize.css.ts

@@ -0,0 +1,25 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { persent, size } from "../constants/constant.css";
+
+const persentSizeRem = {
+  ...persent,
+  ...size,
+};
+
+export const fontSizeProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    fontSize: persentSizeRem,
+    lineHeight: persentSizeRem,
+  },
+  shorthands: {
+    fs: ["fontSize"],
+    lh: ["lineHeight"],
+  },
+});

package/src/styles/sprinkles/grid.css.ts

@@ -0,0 +1,25 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { fraction } from "../constants/constant.css";
+import { gridTemplateColumns, gridTemplateRows } from "../constants/grid.css";
+
+export const gridProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    gridTemplateColumns: gridTemplateColumns,
+    gridTemplateRows: gridTemplateRows,
+    gridColumn: fraction,
+    gridRow: fraction,
+  },
+  shorthands: {
+    gtc: ["gridTemplateColumns"],
+    gtr: ["gridTemplateRows"],
+    gc: ["gridColumn"],
+    gr: ["gridRow"],
+  },
+});