@edu-tosel/design 0.1.2 → 0.1.4

package/tailwind.config.js

@@ -1,245 +1,319 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./node_modules/tw-elements/dist/js/**/*.js", "./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {
-      fontFamily: {
-        "pretendard-medium": ["pretendard-medium"],
-      },
-      screens: {
-        xxxs: "332px",
-        xxs: "393px",
-        xs: "480px",
-        sm: "640px",
-        md: "768px", // IPad Mini
-        ml: "964px", // IPad Air, IPad Pro 11.
-        lg: "1024px", // IPad Mini Horizontal Viewport
-        xl: "1280px",
-        "2xl": "1536px",
-      },
-      colors: {
-        "off-white": "#F5F5F5",
-        burgundy: "#933652",
-        "pale-silver": "#DFD8CA",
-        "cosmic-latte": "#FBF3E4",
-        "pale-lavender": "#E7E9F2",
-        "gray-light": "#F0F0F0",
-        "navy-blue": "#173A8B",
-        "pastel-blue": "#CED6E6",
-        "deep-red": "#760023",
-        "rose-velvet": "#AC647A",
-        "dark-shade-of-cyan": "#105652",
-        "dim-gray": "#4C4C4C",
-        "medium-gray": "#7F7F7F",
-
-        // Brabd Colors
-        "ps-pink": "#E3006E",
-        "ps-pink-light": "#FFBADB",
-        "st-orange": "#ED6A00",
-        "st-orange-light": "#F5D2B6",
-        "ba-yellow": "#FCCE30",
-        "ba-yellow-light": "#FFEFB7",
-        "jr-blue": "#52A2DA",
-        "jr-blue-light": "#D6EEFF",
-        "hj-blue": "#385EAB",
-        "hj-blue-light": "#A8BFE5",
-      },
-      width: {
-        "2/3": "66.6666667%",
-        "1/7": "14.2857143%",
-        "2/7": "28.5714286%",
-        "3/7": "42.8571429%",
-        "4/7": "57.1428571%",
-        "1/8": "12.5%",
-        "3/10": "30%",
-        "1/10": "10%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-        "12/100": "12%",
-        "15/100": "15%",
-        "35/100": "35%",
-        "45/100": "45%",
-        "55/100": "55%",
-        "65/100": "65%",
-        "85/100": "85%",
-        176: "44rem",
-        478: "478px",
-      },
-      height: {
-        "4/7": "57.1428571%",
-        "3/7": "42.8571429%",
-        "5/12": "41.6666667%",
-        "1/10": "10%",
-        "3/10": "30%",
-        "4/10": "40%",
-        "6/10": "60%",
-        "7/10": "70%",
-        "9/10": "90%",
-      },
-      spacing: {
-        1: "0.25rem",
-        7: "1.75rem",
-        11: "2.75rem",
-        12: "3rem",
-        15: "3.75rem",
-        18: "4.5rem",
-        19: "4.75rem",
-        22: "5.5rem",
-        25: "6.25rem",
-        27: "6.75rem",
-        30: "7.5rem",
-        34: "8.5rem",
-        38: "9.5rem",
-        40: "10rem",
-        42: "10.5rem",
-        49: "12.25rem",
-        50: "12.5rem",
-        52: "13rem",
-        56: "14rem",
-        64: "16rem",
-        68: "17rem",
-        69: "17.25rem",
-        72: "18rem",
-        73: "18.25rem",
-        76: "19rem",
-        78: "20rem",
-        84: "21rem",
-        85: "21.25rem",
-        88: "22rem",
-        90: "22.5rem",
-        92: "23rem",
-        96: "24rem",
-        98: "24.5rem",
-        100: "25rem",
-        104: "26rem",
-        106: "26.5rem",
-        108: "27rem",
-        110: "27.5rem",
-        112: "28rem",
-        116: "29rem",
-        120: "30rem",
-        122: "30.5rem",
-        124: "31rem",
-        126: "31.5rem",
-        128: "32rem",
-        132: "33rem",
-        136: "34rem",
-        140: "35rem",
-        144: "36rem",
-        148: "37rem",
-        160: "40rem",
-        164: "41rem",
-        168: "42rem",
-        172: "43rem",
-        176: "44rem",
-        180: "45rem",
-        182: "45.5rem",
-        186: "46.5rem",
-        200: "50rem",
-        220: "55rem",
-        228: "57rem",
-        232: "58rem",
-        240: "60rem",
-        248: "62rem",
-        255: "63.75rem",
-        256: "64rem",
-        260: "65rem",
-        272: "68rem",
-        280: "70rem",
-        288: "72rem",
-        300: "75rem",
-        312: "78rem",
-        320: "80rem",
-        360: "90rem",
-        386: "96.5rem",
-        480: "120rem",
-        520: "140rem",
-      },
-      backgroundSize: {
-        auto: "auto",
-        cover: "cover",
-        contain: "contain",
-        16: "4rem",
-        64: "16rem",
-        80: "20rem",
-        88: "22rem",
-        92: "23rem",
-        96: "24rem",
-        100: "25rem",
-        128: "32rem",
-      },
-      scale: {
-        101: "1.01",
-        200: "2",
-      },
-      skew: {
-        20: "20deg",
-        30: "30deg",
-        39: "39deg",
-        45: "45deg",
-        60: "60deg",
-      },
-      brightness: {
-        10: ".1",
-        20: ".2",
-        30: ".3",
-        40: ".4",
-      },
-    },
-  },
-  safelist: [
-    {
-      pattern: /col-.*/,
-    },
-    {
-      pattern: /row-.*/,
-    },
-    {
-      pattern: /flex-.*/,
-      variants: ["md", "hover", "focus"],
-    },
-    {
-      pattern: /justify-.*/,
-    },
-    {
-      pattern: /items-.*/,
-    },
-    {
-      pattern: /grid-.*/,
-    },
-    {
-      pattern: /gap-.*/,
-      variants: ["md", "hover", "focus"],
-    },
-    {
-      pattern: /border-.*/,
-    },
-    { pattern: /w-.*/ },
-    { pattern: /h-.*/ },
-    {
-      pattern: /top*.*/,
-    },
-    {
-      pattern: /bottom*.*/,
-    },
-    {
-      pattern: /left*.*/,
-    },
-    {
-      pattern: /right*.*/,
-    },
-    { pattern: /bg-.*/ },
-    { pattern: /text-.*/ },
-    {
-      pattern: /p-.*/,
-    },
-  ],
-  plugins: [
-    require("tailwind-scrollbar-hide"),
-    require("tailwindcss-animate"),
-    require("tw-elements/dist/plugin"),
-    require("tailwindcss-directional-shadows"),
-  ],
-};
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./node_modules/tw-elements/dist/js/**/*.js", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        "pretendard-medium": ["pretendard-medium"],
+        kostar: ["kostar"],
+        nicomoji: ["nicomoji"],
+        megrim: ["megrim"],
+      },
+      backgroundImage: {
+        "image-space": "url('/public/images/home/space.png')",
+      },
+      keyframes: {
+        slideBackground: {
+          "0%, 100%": { backgroundPosition: "left center" },
+          "50%": { backgroundPosition: "right center" },
+        },
+      },
+      colors: {
+        "white-off": "#F5F5F5",
+        "red-burgundy": "#933652",
+        "red-crimson": "#760023",
+        "red-velvet": "#AC647A",
+        "green-dark": "#105652",
+        "blue-sky": "#44C5F3",
+        "blue-navy": "#173A8B",
+        "blue-pastel": "#CED6E6",
+        "violet-light": "#9979F6",
+        "gray-light": "#F0F0F0",
+        "gray-medium": "#7F7F7F",
+        "gray-dim": "#4C4C4C",
+        "silver-lavender": "#E7E9F2",
+        "silver-latte": "#FBF3E4",
+        "silver-pale": "#DFD8CA",
+
+        // Brand Colors
+        "ps-pink": "#E3006E",
+        "ps-pink-light": "#FFBADB",
+        "st-orange": "#ED6A00",
+        "st-orange-light": "#F5D2B6",
+        "ba-yellow": "#FCCE30",
+        "ba-yellow-light": "#FFEFB7",
+        "jr-blue": "#52A2DA",
+        "jr-blue-light": "#D6EEFF",
+        "hj-blue": "#385EAB",
+        "hj-blue-light": "#A8BFE5",
+      },
+      inset: {
+        "1/20": "5%",
+        "1/10": "10%",
+        "2/10": "5%",
+        "1/5": "20%",
+        "2/5": "40%",
+        "1/4": "25%",
+        "1/3": "33.3333333%",
+        "5/100": "5%",
+        "10/100": "10%",
+        "15/100": "15%",
+        "43/100": "43%",
+        "46/100": "46%",
+      },
+      width: {
+        "2/3": "66.6666667%",
+        "1/7": "14.2857143%",
+        "2/7": "28.5714286%",
+        "3/7": "42.8571429%",
+        "4/7": "57.1428571%",
+        "1/8": "12.5%",
+        "3/10": "30%",
+        "1/10": "10%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+        "10/100": "10%",
+        "12/100": "12%",
+        "15/100": "15%",
+        "35/100": "35%",
+        "45/100": "45%",
+        "55/100": "55%",
+        "65/100": "65%",
+        "85/100": "85%",
+        176: "44rem",
+        478: "478px",
+      },
+      height: {
+        "4/7": "57.1428571%",
+        "3/7": "42.8571429%",
+        "5/12": "41.6666667%",
+        "1/10": "10%",
+        "3/10": "30%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+      },
+      spacing: {
+        "sun-calc": "calc(50% - 6rem)",
+        1: "0.25rem",
+        7: "1.75rem",
+        11: "2.75rem",
+        12: "3rem",
+        15: "3.75rem",
+        18: "4.5rem",
+        19: "4.75rem",
+        22: "5.5rem",
+        25: "6.25rem",
+        26: "6.5rem",
+        27: "6.75rem",
+        30: "7.5rem",
+        34: "8.5rem",
+        38: "9.5rem",
+        40: "10rem",
+        42: "10.5rem",
+        49: "12.25rem",
+        50: "12.5rem",
+        52: "13rem",
+        56: "14rem",
+        62: "15.5rem",
+        64: "16rem",
+        68: "17rem",
+        69: "17.25rem",
+        70: "17.5rem",
+        72: "18rem",
+        73: "18.25rem",
+        75: "18.75rem",
+        76: "19rem",
+        78: "20rem",
+        84: "21rem",
+        85: "21.25rem",
+        88: "22rem",
+        90: "22.5rem",
+        92: "23rem",
+        96: "24rem",
+        98: "24.5rem",
+        100: "25rem",
+        104: "26rem",
+        106: "26.5rem",
+        108: "27rem",
+        110: "27.5rem",
+        112: "28rem",
+        116: "29rem",
+        120: "30rem",
+        122: "30.5rem",
+        124: "31rem",
+        126: "31.5rem",
+        128: "32rem",
+        132: "33rem",
+        136: "34rem",
+        140: "35rem",
+        144: "36rem",
+        148: "37rem",
+        160: "40rem",
+        164: "41rem",
+        168: "42rem",
+        172: "43rem",
+        176: "44rem",
+        180: "45rem",
+        182: "45.5rem",
+        186: "46.5rem",
+        200: "50rem",
+        216: "54rem",
+        220: "55rem",
+        228: "57rem",
+        232: "58rem",
+        240: "60rem",
+        248: "62rem",
+        255: "63.75rem",
+        256: "64rem",
+        260: "65rem",
+        272: "68rem",
+        280: "70rem",
+        288: "72rem",
+        300: "75rem",
+        312: "78rem",
+        320: "80rem",
+        360: "90rem",
+        386: "96.5rem",
+        480: "120rem",
+        500: "125rem",
+        520: "140rem",
+      },
+      backgroundSize: {
+        auto: "auto",
+        cover: "cover",
+        contain: "contain",
+        16: "4rem",
+        64: "16rem",
+        80: "20rem",
+        88: "22rem",
+        92: "23rem",
+        96: "24rem",
+        100: "25rem",
+        128: "32rem",
+      },
+      transitionDelay: {
+        1000: "1000ms",
+        1500: "1500ms",
+        2000: "2000ms",
+        2500: "2500ms",
+        3000: "3000ms",
+        4000: "4000ms",
+        5000: "5000ms",
+      },
+      transitionDuration: {
+        2000: "2000ms",
+        60000: "60000ms",
+        300000: "300000ms",
+      },
+      opacity: {
+        32: ".32",
+      },
+      scale: {
+        101: "1.01",
+        110: "1.1",
+        120: "1.2",
+        200: "2",
+      },
+      skew: {
+        20: "20deg",
+        30: "30deg",
+        39: "39deg",
+        45: "45deg",
+        60: "60deg",
+      },
+      brightness: {
+        10: ".1",
+        20: ".2",
+        30: ".3",
+        40: ".4",
+      },
+      screens: {
+        xxxs: "332px",
+        xxs: "393px",
+        xs: "480px",
+        sm: "640px",
+        md: "768px", // IPad Mini
+        ml: "964px", // IPad Air, IPad Pro 11.
+        lg: "1024px", // IPad Mini Horizontal Viewport
+        xl: "1280px",
+        "2xl": "1536px",
+      },
+    },
+  },
+  safelist: [
+    {
+      pattern: /overflow-*./,
+    },
+    {
+      pattern: /col-.*/,
+    },
+    {
+      pattern: /row-.*/,
+    },
+    {
+      pattern: /flex-.*/,
+    },
+    {
+      pattern: /justify-.*/,
+    },
+    {
+      pattern: /items-.*/,
+    },
+    {
+      pattern: /grid-.*/,
+    },
+    {
+      pattern: /gap-.*/,
+    },
+    {
+      pattern: /border-.*/,
+    },
+    {
+      pattern: /min-.*/,
+    },
+    { pattern: /w-.*/ },
+    { pattern: /h-.*/ },
+    {
+      pattern: /top-.*/,
+    },
+    {
+      pattern: /-top-.*/,
+    },
+    {
+      pattern: /bottom*.*/,
+    },
+    {
+      pattern: /left-.*/,
+    },
+    {
+      pattern: /right*.*/,
+    },
+    { pattern: /bg-.*/ },
+    { pattern: /text-.*/ },
+    {
+      pattern: /p-.*/,
+    },
+    {
+      pattern: /from-.*/,
+    },
+    {
+      pattern: /to-.*/,
+    },
+    {
+      pattern: /via-.*/,
+    },
+    {
+      pattern: /delay-.*/,
+    },
+  ],
+  plugins: [
+    require("tailwind-scrollbar-hide"),
+    require("tailwindcss-animate"),
+    require("tw-elements/dist/plugin"),
+    require("tailwindcss-directional-shadows"),
+  ],
+};

package/text/index.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import "../style.css";
-import { col } from "../asset/display";
+import { col } from "../util";
 export function LineBreaks(_a) {
     var texts = _a.texts, gap = _a.gap;
     return (_jsx("div", __assign({ className: col(gap) }, { children: texts.map(function (text, index) { return (_jsx("div", { children: text }, index)); }) })));

package/util/classNames.d.ts

@@ -0,0 +1 @@
+export default function classNames(...props: string[]): string;

package/util/classNames.js

@@ -0,0 +1,8 @@
+export default function classNames() {
+    var props = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        props[_i] = arguments[_i];
+    }
+    var array = props.map(function (prop) { return prop.split(" "); });
+    return array.flat().join(" ");
+}

package/{asset → util}/colors.d.ts

@@ -5,3 +5,6 @@ export declare const colorsByLevel: {
     JR: string;
     HJ: string;
 };
+export declare const gradient: {
+    lab: string;
+};

package/{asset → util}/colors.js

@@ -5,3 +5,6 @@ export var colorsByLevel = {
     JR: "jr-blue",
     HJ: "hj-blue",
 };
+export var gradient = {
+    lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+};

package/{asset → util}/display.d.ts

@@ -9,6 +9,11 @@ export declare const center: {
     row: (gap?: number) => string;
     colO: (gap?: number) => string;
     rowO: (gap?: number) => string;
+    screen: {
+        default: string;
+        col: (gap?: number) => string;
+        row: (gap?: number) => string;
+    };
 };
 export declare const grid: {
     col: (col: number, gap?: number) => string;

package/{asset → util}/display.js

@@ -27,6 +27,17 @@ export var center = {
         if (gap === void 0) { gap = 0; }
         return "gap-".concat(gap, " flex flex-row justify-center items-center ");
     },
+    screen: {
+        default: "flex justify-center items-center min-h-screen w-full overflow-hidden min-h-screen relative ",
+        col: function (gap) {
+            if (gap === void 0) { gap = 0; }
+            return "gap-".concat(gap, " flex flex-col justify-center items-center min-h-screen w-full ");
+        },
+        row: function (gap) {
+            if (gap === void 0) { gap = 0; }
+            return "gap-".concat(gap, " flex flex-row justify-center items-center min-h-screen w-full ");
+        },
+    },
 };
 export var grid = {
     col: function (col, gap) {

package/util/index.d.ts

@@ -0,0 +1,7 @@
+export { default as cn } from "./classNames";
+export * from "./colors";
+export * from "./display";
+export * from "./displayResponsive";
+export * from "./pattern";
+export * from "./position";
+export * from "./shape";

package/util/index.js

@@ -0,0 +1,7 @@
+export { default as cn } from "./classNames";
+export * from "./colors";
+export * from "./display";
+export * from "./displayResponsive";
+export * from "./pattern";
+export * from "./position";
+export * from "./shape";