@edu-tosel/design 0.1.4 → 0.1.6

package/tailwind.config.js

@@ -1,319 +1,389 @@
-/** @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"),
-  ],
-};
+import tailwindcss from "tailwindcss";
+import tailwindScrollbarHide from "tailwind-scrollbar-hide";
+import tailwindcssAnimate from "tailwindcss-animate";
+// import twElements from "tw-elements/dist/plugin";
+// import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    // "./node_modules/tw-elements/dist/js/**/*.js",
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        "pretendard-medium": ["pretendard-medium"],
+        kostar: ["kostar"],
+        nicomoji: ["nicomoji"],
+        megrim: ["megrim"],
+      },
+      backgroundImage: {
+        "image-space": "url('/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%",
+        90: "22.5rem",
+        120: "30rem",
+        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%",
+      },
+      maxHeight: {
+        44: "11rem",
+        "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",
+        44: "11rem",
+        45: "11.25rem",
+        48: "12rem",
+        49: "12.25rem",
+        50: "12.5rem",
+        52: "13rem",
+        54: "13.5rem",
+        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",
+        135: "33.75rem",
+        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",
+        190: "47.5rem",
+        200: "50rem",
+        216: "54rem",
+        220: "55rem",
+        224: "56rem",
+        225: "56.25rem",
+        228: "57rem",
+        232: "58rem",
+        240: "60rem",
+        248: "62rem",
+        255: "63.75rem",
+        256: "64rem",
+        260: "65rem",
+        264: "66rem",
+        272: "68rem",
+        280: "70rem",
+        288: "72rem",
+        300: "75rem",
+        312: "78rem",
+        320: "80rem",
+        360: "90rem",
+        386: "96.5rem",
+        408: "102rem",
+        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: {
+        750: "750ms",
+        900: "900ms",
+        1000: "1000ms",
+        1250: "1250ms",
+        1350: "1200ms",
+        1500: "1500ms",
+        1600: "1600ms",
+        1750: "1750ms",
+        1800: "1800ms",
+        2000: "2000ms",
+        2100: "2100ms",
+        2250: "2250ms",
+        2500: "2500ms",
+        2700: "2700ms",
+        3000: "3000ms",
+        3300: "3300ms",
+        4000: "4000ms",
+        5000: "5000ms",
+      },
+      transitionDuration: {
+        300: "300ms",
+        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: /animate-.*/,
+    },
+    {
+      pattern: /shadow-.*/,
+    },
+
+    {
+      pattern: /flex-.*/,
+    },
+    {
+      pattern: /overflow-*./,
+    },
+    {
+      pattern: /col-.*/,
+    },
+    {
+      pattern: /row-.*/,
+    },
+    {
+      pattern: /flex-.*/,
+    },
+    {
+      pattern: /justify-.*/,
+    },
+    {
+      pattern: /items-.*/,
+    },
+    {
+      pattern: /grid-.*/,
+    },
+    {
+      pattern: /gap-.*/,
+    },
+    {
+      pattern: /border-.*/,
+    },
+    {
+      pattern: /min-.*/,
+    },
+    {
+      pattern: /max-.*/,
+    },
+    { pattern: /w-.*/ },
+    { pattern: /h-.*/ },
+    {
+      pattern: /top-.*/,
+    },
+    {
+      pattern: /-top-.*/,
+    },
+    {
+      pattern: /bottom*.*/,
+    },
+    {
+      pattern: /left-.*/,
+    },
+    {
+      pattern: /right*.*/,
+    },
+    { pattern: /bg-.*/ },
+    { pattern: /text-.*/ },
+    {
+      pattern: /p-.*/,
+    },
+    {
+      pattern: /px-.*/,
+    },
+    {
+      pattern: /pl-.*/,
+    },
+    {
+      pattern: /py-.*/,
+    },
+    {
+      pattern: /pb-.*/,
+    },
+    {
+      pattern: /m-.*/,
+    },
+    {
+      pattern: /mx-.*/,
+    },
+    {
+      pattern: /my-.*/,
+    },
+    {
+      pattern: /z-.*/,
+    },
+    {
+      pattern: /from-.*/,
+    },
+    {
+      pattern: /to-.*/,
+    },
+    {
+      pattern: /via-.*/,
+    },
+    {
+      pattern: /delay-.*/,
+    },
+  ],
+  plugins: [tailwindcss(), tailwindcssAnimate, tailwindScrollbarHide],
+};