gaesup-world 0.0.1

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

@@ -0,0 +1,22 @@
+import { createSprinkles } from "@vanilla-extract/sprinkles";
+import { colorProperties } from "./color.css";
+import { directionProperties } from "./direction.css";
+import { displayProperties } from "./display.css";
+import { fontSizeProperties } from "./fontSize.css";
+import { gridProperties } from "./grid.css";
+import { marginProperties } from "./margin.css";
+import { paddingProperties } from "./padding.css";
+import { positionProperties } from "./position.css";
+import { sizeProperties } from "./size.css";
+
+export const sprinkles = createSprinkles(
+  colorProperties,
+  directionProperties,
+  displayProperties,
+  gridProperties,
+  marginProperties,
+  paddingProperties,
+  positionProperties,
+  fontSizeProperties,
+  sizeProperties
+);

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

@@ -0,0 +1,30 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { persent, rem, size } from "../constants/constant.css";
+
+const properties = { ...persent, ...size, ...rem };
+
+export const marginProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    margin: properties,
+    marginBottom: properties,
+    marginTop: properties,
+    marginLeft: properties,
+    marginRight: properties,
+  },
+  shorthands: {
+    m: ["margin"],
+    mb: ["marginBottom"],
+    mt: ["marginTop"],
+    ml: ["marginLeft"],
+    mr: ["marginRight"],
+    mX: ["marginLeft", "marginRight"],
+    mY: ["marginTop", "marginBottom"],
+  },
+});

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

@@ -0,0 +1,30 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { persent, rem, size } from "../constants/constant.css";
+
+const properties = { ...persent, ...size, ...rem };
+
+export const paddingProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    padding: properties,
+    paddingBottom: properties,
+    paddingTop: properties,
+    paddingLeft: properties,
+    paddingRight: properties,
+  },
+  shorthands: {
+    p: ["padding"],
+    pb: ["paddingBottom"],
+    pt: ["paddingTop"],
+    pl: ["paddingLeft"],
+    pr: ["paddingRight"],
+    pX: ["paddingLeft", "paddingRight"],
+    pY: ["paddingTop", "paddingBottom"],
+  },
+});

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

@@ -0,0 +1,14 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+
+export const positionProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    position: ["static", "relative", "absolute", "fixed"],
+  },
+});

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

@@ -0,0 +1,23 @@
+import { defineProperties } from "@vanilla-extract/sprinkles";
+import { size } from "lodash";
+import { persent, rem } from "../constants/constant.css";
+
+const properties = { ...persent, ...size, ...rem };
+
+export const sizeProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { "@media": "(min-width: 768px)" },
+    laptop: { "@media": "(min-width: 1024px)" },
+    desktop: { "@media": "(min-width: 1440px)" },
+  },
+  defaultCondition: "mobile",
+  properties: {
+    width: properties,
+    height: properties,
+  },
+  shorthands: {
+    w: ["width"],
+    h: ["height"],
+  },
+});

package/src/styles/theme.css.ts

@@ -0,0 +1,98 @@
+import {
+  createGlobalTheme,
+  createTheme,
+  createThemeContract,
+} from "@vanilla-extract/css";
+
+const root = createGlobalTheme(":root", {
+  fonts: {
+    heading: "Georgia, Times, Times New Roman, serif",
+    // body: 'NanumSquareL, sans-serif'
+  },
+  gradient: {
+    purple: "linear-gradient(45deg,#8e2de2, #4a00e0)",
+    bluePurple:
+      "radial-gradient( circle farthest-corner at 11.7% 80.6%,  rgba(249,185,255,1) 0%, rgba(177,172,255,1) 49.3%, rgba(98,203,255,1) 89% );",
+    green:
+      "linear-gradient( 68.4deg,  rgba(99,251,215,1) -0.4%, rgba(5,222,250,1) 100.2% );",
+    lightGreen:
+      "linear-gradient( 68.4deg,  rgba(176,255,237,1) -0.4%, rgba(161,244,255,1) 100.2% );",
+    red: "linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );",
+    pink: "radial-gradient( circle farthest-corner at 10.2% 55.8%,  rgba(252,37,103,1) 0%, rgba(250,38,151,1) 46.2%, rgba(186,8,181,1) 90.1% );",
+  },
+});
+
+export const themes = createThemeContract<{
+  background?: string;
+  scrollBarTrack?: string;
+  comment?: string;
+  textarea?: string;
+  sunmoon?: string;
+  text: {
+    normal?: string;
+    reverse?: string;
+  };
+  tag?: string;
+  code?: string;
+  blockquote?: string;
+  placeholder?: string;
+  glass: {
+    normal?: string;
+    reverse?: string;
+  };
+  debug?: string;
+  toc: {
+    selected?: string;
+    notSelected?: string;
+  };
+}>({
+  background: null,
+  scrollBarTrack: null,
+  comment: null,
+  textarea: null,
+  sunmoon: null,
+  text: {
+    normal: null,
+    reverse: null,
+  },
+  tag: null,
+  code: null,
+  blockquote: null,
+  placeholder: null,
+  glass: {
+    normal: null,
+    reverse: null,
+  },
+  debug: null,
+  toc: {
+    selected: null,
+    notSelected: null,
+  },
+});
+
+export const darkTheme = createTheme(themes, {
+  background: "rgb(13, 17, 23)",
+  scrollBarTrack: "rgb(40, 46, 53)",
+  comment: "rgb(50, 50, 50)",
+  textarea: "rgb(50, 50, 50)",
+  sunmoon: "#ff594e",
+  text: {
+    normal: "#FFFFFF",
+    reverse: "#000000",
+  },
+  tag: "rgb(51 65 85)",
+  code: "rgb(54, 54, 54)",
+  blockquote: "rgb(50, 50, 50)",
+  placeholder: "rgb(75 85 99)",
+  glass: {
+    normal: "rgba(0, 0, 0, 0.2)",
+    reverse: "rgba(255, 255, 255, 0.8)",
+  },
+  debug: "rgba(31, 41, 55, 0.8)",
+  toc: {
+    selected: "rgb(243 244 246)",
+    notSelected: "rgb(156 163 175)",
+  },
+});
+
+export const vars = { ...root, themes };

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+
+    /* Linting */
+    // "strict": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+
+    /* Other */
+  },
+  "include": ["src", "examples"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "/gaesup-world/",
+  plugins: [react(), vanillaExtractPlugin()],
+});