gyeol 0.1.5 → 0.1.6

package/README.md

@@ -18,8 +18,8 @@ npm install gyeol
 
 ```html
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;500;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gyeol@0.1.4/gyeol.css">
-<!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.4/gyeol.css"> -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gyeol@0.1.5/gyeol.css">
+<!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.5/gyeol.css"> -->
 
 <html data-palette="meok" data-theme="dark">
 <body class="gy">
@@ -34,8 +34,8 @@ CDN은 jsDelivr와 unpkg 중 하나를 쓰면 돼요. 버전을 빼고 `gyeol/gy
 
 | CDN | 주소 |
 | --- | --- |
-| jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.4/gyeol.css` |
-| unpkg | `https://unpkg.com/gyeol@0.1.4/gyeol.css` |
+| jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.5/gyeol.css` |
+| unpkg | `https://unpkg.com/gyeol@0.1.5/gyeol.css` |
 
 번들러(Vite, Next.js 등)를 쓰면 CSS를 이렇게 불러와요.
 

package/gyeol.css

@@ -1,151 +1,151 @@
-/*!
- * 결 gyeol — layered-paper design system
- * 사용법: <html data-palette="meok" data-theme="dark">
- *   data-palette: meok | jjok | cheongja | songhwa | yeonji | jaju |
- *                 chija | hwangto | oksaek | haneul | odi           (기본 meok)
- *   data-theme:   dark | light | system                              (기본 dark)
- * 화면 일부만 다른 팔레트·테마로: <section data-palette="yeonji" data-theme="light"> (0.1.2+)
- * 모든 컴포넌트 클래스는 gy- 접두사를 써서 다른 CSS와 충돌하지 않아요.
- * 글꼴: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;500;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap
- */
-
-/* ---------- tokens ---------- */
-:root{
-  --h:255; --c:.012; --ah:265; --ac:.14; --ad:0%;   /* 기본 팔레트: 먹 + 쪽빛 강조 */
-  --f-display: "Hahmlet", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
-  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
-  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
-
-  --pun-1:4px; --pun-2:8px; --pun-3:12px; --pun-4:16px; --pun-6:24px; --pun-8:32px; --pun-12:48px; --pun-16:64px;
-  --r-1:6px; --r-2:12px; --r-3:20px; --r-4:28px; --r-pill:999px;
-  --ease-bleed: cubic-bezier(.2,.7,.2,1);
-  --t-1:120ms; --t-2:220ms; --t-3:420ms;
-
-}
-/* 색 토큰: 루트와, 팔레트·테마를 따로 지정한 모든 요소에서 다시 계산돼요 */
-:root, [data-palette], [data-theme]{
-  --bg:      oklch(96.5% calc(var(--c)*.12) var(--h));
-  --bg-2:    oklch(92.5% calc(var(--c)*.22) var(--h));
-  --ink:     oklch(23% calc(var(--c)*.35) var(--h));
-  --ink-2:   oklch(43% calc(var(--c)*.25) var(--h));
-  --ink-3:   oklch(50% calc(var(--c)*.18) var(--h));
-  --line:    oklch(84% calc(var(--c)*.22) var(--h));
-  --paper:   oklch(99.2% calc(var(--c)*.05) var(--h));
-  --accent:  oklch(calc(49% + var(--ad)) var(--ac) var(--ah));
-  --accent-soft: oklch(90% calc(var(--ac)*.45) var(--ah));
-  --on-accent: oklch(99% 0 0);
-  --stain:   oklch(80% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
-  --ok: oklch(50% .13 150); --warn: oklch(54% .13 65); --err: oklch(52% .19 25);
-  --shadow: 0 1px 0 oklch(100% 0 0 / .7) inset, 0 18px 40px -22px oklch(25% .06 var(--h) / .35), 0 2px 6px -2px oklch(25% .04 var(--h) / .12);
-  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 -.42'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
-  --grain-o: .4;
-
-  color-scheme: light;
-}
-@media (prefers-color-scheme: dark){ :root[data-theme="system"], :root[data-theme="system"] [data-palette]:not([data-theme]):not([data-theme="light"] *){
-  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
-  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
-  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
-  --accent: oklch(calc(76% + var(--ad)) var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
-  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
-  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
-  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
-  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
-  --grain-o: .35; color-scheme: dark;
-}}
-:root:not([data-theme="light"]):not([data-theme="system"]), [data-theme="dark"],
-:root:not([data-theme="light"]):not([data-theme="system"]) [data-palette]:not([data-theme]):not([data-theme="light"] *){
-  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
-  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
-  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
-  --accent: oklch(calc(76% + var(--ad)) var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
-  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
-  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
-  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
-  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
-  --grain-o: .35; color-scheme: dark;
-}
-[data-palette="meok"]    {--h:255;--c:.012;--ah:265;--ac:.14;--ad:0%}
-[data-palette="jjok"]    {--h:265;--c:.14; --ah:265;--ac:.14;--ad:0%}
-[data-palette="cheongja"]{--h:178;--c:.08;--ah:178;--ac:.08;--ad:4%}
-[data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12;--ad:0%}
-[data-palette="yeonji"]  {--h:16; --c:.16; --ah:16; --ac:.16;--ad:0%}
-[data-palette="jaju"]    {--h:330;--c:.13; --ah:330;--ac:.13;--ad:0%}
-[data-palette="chija"]    {--h:70;--c:0.14;--ah:70;--ac:0.14;--ad:0%}
-[data-palette="hwangto"]  {--h:48;--c:.065;--ah:48;--ac:.065;--ad:0%}
-[data-palette="oksaek"]   {--h:195;--c:.10;--ah:195;--ac:.10;--ad:-5%}
-[data-palette="haneul"]   {--h:235;--c:0.11;--ah:235;--ac:0.11;--ad:0%}
-[data-palette="odi"]      {--h:300;--c:0.12;--ah:300;--ac:0.12;--ad:0%}
-/* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
-:where([data-palette], [data-theme]):not(:root){color:var(--ink)}
-
-/* ---------- base (opt-in: add class="gy" to <body>) ---------- */
-.gy{margin:0;color:var(--ink);background:var(--bg);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
-.gy :focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 7px color-mix(in oklch, var(--accent) 22%, transparent)}
-
-/* ---------- material: 겹 ---------- */
-.gy-gyeop{position:relative;isolation:isolate;background:color-mix(in oklch, var(--paper) var(--thick,74%), transparent);-webkit-backdrop-filter:blur(var(--blur,14px)) saturate(1.2);backdrop-filter:blur(var(--blur,14px)) saturate(1.2);border:1px solid color-mix(in oklch, var(--paper) 50%, var(--line));border-radius:var(--r-3);box-shadow:var(--shadow)}
-.gy-gyeop::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);opacity:var(--grain-o);pointer-events:none;z-index:-1}
-.gy-hol{--thick:46%;--blur:6px}
-.gy-du {--thick:72%;--blur:14px}
-.gy-se {--thick:90%;--blur:24px}
-
-/* ---------- button ---------- */
-.gy-btn{--bg-b:var(--accent);--fg-b:var(--on-accent);appearance:none;border:0;cursor:pointer;font:600 15px/1 var(--f-body);color:var(--fg-b);background:var(--bg-b);padding:13px 20px;border-radius:var(--r-2);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform var(--t-1) var(--ease-bleed), box-shadow var(--t-3) var(--ease-bleed)}
-.gy-btn:hover{box-shadow:0 0 0 1px var(--bg-b), 0 6px 22px -4px color-mix(in oklch, var(--bg-b) 60%, transparent)}
-.gy-btn:active{transform:translateY(1px) scale(.985)}
-.gy-btn--ink{--bg-b:var(--ink);--fg-b:var(--bg)}
-.gy-btn--paper{--fg-b:var(--ink);background:color-mix(in oklch, var(--paper) 74%, transparent);border:1px solid var(--line);backdrop-filter:blur(12px)}
-.gy-btn--paper:hover{box-shadow:0 6px 22px -8px color-mix(in oklch, var(--ink) 40%, transparent)}
-.gy-btn--ghost{--fg-b:var(--accent);background:transparent}
-.gy-btn--ghost:hover{background:color-mix(in oklch, var(--accent) 10%, transparent);box-shadow:none}
-.gy-btn--danger{--bg-b:var(--err);--fg-b:oklch(99% 0 0)}
-.gy-btn--sm{padding:9px 14px;font-size:14px;border-radius:10px}
-.gy-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
-
-/* ---------- switch: <button class="gy-switch" role="switch" aria-checked="true"> ---------- */
-.gy-switch{appearance:none;border:0;cursor:pointer;width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background var(--t-2) var(--ease-bleed);flex:none}
-.gy-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:0 2px 6px oklch(0% 0 0 / .25);transition:transform var(--t-2) var(--ease-bleed)}
-.gy-switch[aria-checked="true"]{background:var(--accent)}
-.gy-switch[aria-checked="true"]::after{transform:translateX(20px);background:oklch(99% 0 0)}
-
-/* ---------- segmented: buttons with aria-pressed ---------- */
-.gy-seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 7%, transparent);gap:2px}
-.gy-seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 14px;border-radius:var(--r-pill);cursor:pointer}
-.gy-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px oklch(0% 0 0 / .14)}
-
-/* ---------- chip ---------- */
-.gy-chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 13px;border-radius:var(--r-pill)}
-.gy-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
-
-/* ---------- field ---------- */
-.gy-field{display:flex;flex-direction:column;gap:6px}
-.gy-field label{font-size:13px;font-weight:500;color:var(--ink-2)}
-.gy-field input,.gy-field textarea,.gy-field select{font:400 15px var(--f-body);color:var(--ink);background:color-mix(in oklch, var(--paper) 80%, transparent);border:1px solid var(--line);border-radius:var(--r-2);padding:11px 13px;transition:border-color var(--t-2), box-shadow var(--t-3) var(--ease-bleed)}
-.gy-field :is(input,textarea,select):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in oklch, var(--accent) 18%, transparent), 0 0 18px 2px color-mix(in oklch, var(--accent) 22%, transparent)}
-.gy-field small{font-size:13px;color:var(--ink-3)}
-.gy-field--error :is(input,textarea,select){border-color:var(--err)}
-.gy-field--error small{color:var(--err)}
-
-/* ---------- checkbox: <label class="gy-check"><input type="checkbox"> 텍스트</label> ---------- */
-.gy-check{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
-.gy-check input{appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--ink-3);display:grid;place-items:center;margin:0;cursor:pointer}
-.gy-check input:checked{background:var(--accent);border-color:var(--accent)}
-.gy-check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
-
-/* ---------- badge ---------- */
-.gy-badge{font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;color:var(--accent);background:color-mix(in oklch, var(--accent) 13%, transparent)}
-.gy-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
-.gy-badge--ok{color:var(--ok);background:color-mix(in oklch, var(--ok) 14%, transparent)}
-.gy-badge--warn{color:var(--warn);background:color-mix(in oklch, var(--warn) 16%, transparent)}
-.gy-badge--err{color:var(--err);background:color-mix(in oklch, var(--err) 14%, transparent)}
-
-/* ---------- progress: <div class="gy-progress" style="--p:60%"><i></i></div> ---------- */
-.gy-progress{height:8px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 9%, transparent);overflow:hidden}
-.gy-progress > i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg, color-mix(in oklch, var(--accent) 50%, transparent), var(--accent))}
-
-/* ---------- toast / tooltip ---------- */
-.gy-toast{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14.5px}
-.gy-tooltip{font-size:13px;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg)}
-
-@media (prefers-reduced-motion: reduce){.gy *,.gy *::before,.gy *::after{transition:none!important;animation:none!important}}
+/*!
+ * 결 gyeol — layered-paper design system
+ * 사용법: <html data-palette="meok" data-theme="dark">
+ *   data-palette: meok | jjok | cheongja | songhwa | yeonji | jaju |
+ *                 chija | hwangto | oksaek | haneul | odi           (기본 meok)
+ *   data-theme:   dark | light | system                              (기본 dark)
+ * 화면 일부만 다른 팔레트·테마로: <section data-palette="yeonji" data-theme="light"> (0.1.2+)
+ * 모든 컴포넌트 클래스는 gy- 접두사를 써서 다른 CSS와 충돌하지 않아요.
+ * 글꼴: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;500;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap
+ */
+
+/* ---------- tokens ---------- */
+:root{
+  --h:255; --c:.012; --ah:265; --ac:.14; --ad:0%;   /* 기본 팔레트: 먹 + 쪽빛 강조 */
+  --f-display: "Hahmlet", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
+  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
+
+  --pun-1:4px; --pun-2:8px; --pun-3:12px; --pun-4:16px; --pun-6:24px; --pun-8:32px; --pun-12:48px; --pun-16:64px;
+  --r-1:6px; --r-2:12px; --r-3:20px; --r-4:28px; --r-pill:999px;
+  --ease-bleed: cubic-bezier(.2,.7,.2,1);
+  --t-1:120ms; --t-2:220ms; --t-3:420ms;
+
+}
+/* 색 토큰: 루트와, 팔레트·테마를 따로 지정한 모든 요소에서 다시 계산돼요 */
+:root, [data-palette], [data-theme]{
+  --bg:      oklch(96.5% calc(var(--c)*.12) var(--h));
+  --bg-2:    oklch(92.5% calc(var(--c)*.22) var(--h));
+  --ink:     oklch(23% calc(var(--c)*.35) var(--h));
+  --ink-2:   oklch(43% calc(var(--c)*.25) var(--h));
+  --ink-3:   oklch(50% calc(var(--c)*.18) var(--h));
+  --line:    oklch(84% calc(var(--c)*.22) var(--h));
+  --paper:   oklch(99.2% calc(var(--c)*.05) var(--h));
+  --accent:  oklch(calc(49% + var(--ad)) var(--ac) var(--ah));
+  --accent-soft: oklch(90% calc(var(--ac)*.45) var(--ah));
+  --on-accent: oklch(99% 0 0);
+  --stain:   oklch(80% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
+  --ok: oklch(50% .13 150); --warn: oklch(54% .13 65); --err: oklch(52% .19 25);
+  --shadow: 0 1px 0 oklch(100% 0 0 / .7) inset, 0 18px 40px -22px oklch(25% .06 var(--h) / .35), 0 2px 6px -2px oklch(25% .04 var(--h) / .12);
+  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 -.42'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
+  --grain-o: .4;
+
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark){ :root[data-theme="system"], :root[data-theme="system"] [data-palette]:not([data-theme]):not([data-theme="light"] *){
+  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
+  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
+  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
+  --accent: oklch(calc(76% + var(--ad)) var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
+  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
+  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
+  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
+  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
+  --grain-o: .35; color-scheme: dark;
+}}
+:root:not([data-theme="light"]):not([data-theme="system"]), [data-theme="dark"],
+:root:not([data-theme="light"]):not([data-theme="system"]) [data-palette]:not([data-theme]):not([data-theme="light"] *){
+  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
+  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
+  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
+  --accent: oklch(calc(76% + var(--ad)) var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
+  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
+  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
+  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
+  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
+  --grain-o: .35; color-scheme: dark;
+}
+[data-palette="meok"]    {--h:255;--c:.012;--ah:265;--ac:.14;--ad:0%}
+[data-palette="jjok"]    {--h:265;--c:.14; --ah:265;--ac:.14;--ad:0%}
+[data-palette="cheongja"]{--h:178;--c:.08;--ah:178;--ac:.08;--ad:4%}
+[data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12;--ad:0%}
+[data-palette="yeonji"]  {--h:16; --c:.16; --ah:16; --ac:.16;--ad:0%}
+[data-palette="jaju"]    {--h:330;--c:.13; --ah:330;--ac:.13;--ad:0%}
+[data-palette="chija"]    {--h:70;--c:0.14;--ah:70;--ac:0.14;--ad:0%}
+[data-palette="hwangto"]  {--h:48;--c:.065;--ah:48;--ac:.065;--ad:0%}
+[data-palette="oksaek"]   {--h:195;--c:.10;--ah:195;--ac:.10;--ad:-5%}
+[data-palette="haneul"]   {--h:235;--c:.14;--ah:235;--ac:.14;--ad:-5%}
+[data-palette="odi"]      {--h:300;--c:.15;--ah:300;--ac:.15;--ad:-5%}
+/* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
+:where([data-palette], [data-theme]):not(:root){color:var(--ink)}
+
+/* ---------- base (opt-in: add class="gy" to <body>) ---------- */
+.gy{margin:0;color:var(--ink);background:var(--bg);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
+.gy :focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 7px color-mix(in oklch, var(--accent) 22%, transparent)}
+
+/* ---------- material: 겹 ---------- */
+.gy-gyeop{position:relative;isolation:isolate;background:color-mix(in oklch, var(--paper) var(--thick,74%), transparent);-webkit-backdrop-filter:blur(var(--blur,14px)) saturate(1.2);backdrop-filter:blur(var(--blur,14px)) saturate(1.2);border:1px solid color-mix(in oklch, var(--paper) 50%, var(--line));border-radius:var(--r-3);box-shadow:var(--shadow)}
+.gy-gyeop::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);opacity:var(--grain-o);pointer-events:none;z-index:-1}
+.gy-hol{--thick:46%;--blur:6px}
+.gy-du {--thick:72%;--blur:14px}
+.gy-se {--thick:90%;--blur:24px}
+
+/* ---------- button ---------- */
+.gy-btn{--bg-b:var(--accent);--fg-b:var(--on-accent);appearance:none;border:0;cursor:pointer;font:600 15px/1 var(--f-body);color:var(--fg-b);background:var(--bg-b);padding:13px 20px;border-radius:var(--r-2);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform var(--t-1) var(--ease-bleed), box-shadow var(--t-3) var(--ease-bleed)}
+.gy-btn:hover{box-shadow:0 0 0 1px var(--bg-b), 0 6px 22px -4px color-mix(in oklch, var(--bg-b) 60%, transparent)}
+.gy-btn:active{transform:translateY(1px) scale(.985)}
+.gy-btn--ink{--bg-b:var(--ink);--fg-b:var(--bg)}
+.gy-btn--paper{--fg-b:var(--ink);background:color-mix(in oklch, var(--paper) 74%, transparent);border:1px solid var(--line);backdrop-filter:blur(12px)}
+.gy-btn--paper:hover{box-shadow:0 6px 22px -8px color-mix(in oklch, var(--ink) 40%, transparent)}
+.gy-btn--ghost{--fg-b:var(--accent);background:transparent}
+.gy-btn--ghost:hover{background:color-mix(in oklch, var(--accent) 10%, transparent);box-shadow:none}
+.gy-btn--danger{--bg-b:var(--err);--fg-b:oklch(99% 0 0)}
+.gy-btn--sm{padding:9px 14px;font-size:14px;border-radius:10px}
+.gy-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
+
+/* ---------- switch: <button class="gy-switch" role="switch" aria-checked="true"> ---------- */
+.gy-switch{appearance:none;border:0;cursor:pointer;width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background var(--t-2) var(--ease-bleed);flex:none}
+.gy-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:0 2px 6px oklch(0% 0 0 / .25);transition:transform var(--t-2) var(--ease-bleed)}
+.gy-switch[aria-checked="true"]{background:var(--accent)}
+.gy-switch[aria-checked="true"]::after{transform:translateX(20px);background:oklch(99% 0 0)}
+
+/* ---------- segmented: buttons with aria-pressed ---------- */
+.gy-seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 7%, transparent);gap:2px}
+.gy-seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 14px;border-radius:var(--r-pill);cursor:pointer}
+.gy-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px oklch(0% 0 0 / .14)}
+
+/* ---------- chip ---------- */
+.gy-chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 13px;border-radius:var(--r-pill)}
+.gy-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
+
+/* ---------- field ---------- */
+.gy-field{display:flex;flex-direction:column;gap:6px}
+.gy-field label{font-size:13px;font-weight:500;color:var(--ink-2)}
+.gy-field input,.gy-field textarea,.gy-field select{font:400 15px var(--f-body);color:var(--ink);background:color-mix(in oklch, var(--paper) 80%, transparent);border:1px solid var(--line);border-radius:var(--r-2);padding:11px 13px;transition:border-color var(--t-2), box-shadow var(--t-3) var(--ease-bleed)}
+.gy-field :is(input,textarea,select):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in oklch, var(--accent) 18%, transparent), 0 0 18px 2px color-mix(in oklch, var(--accent) 22%, transparent)}
+.gy-field small{font-size:13px;color:var(--ink-3)}
+.gy-field--error :is(input,textarea,select){border-color:var(--err)}
+.gy-field--error small{color:var(--err)}
+
+/* ---------- checkbox: <label class="gy-check"><input type="checkbox"> 텍스트</label> ---------- */
+.gy-check{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
+.gy-check input{appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--ink-3);display:grid;place-items:center;margin:0;cursor:pointer}
+.gy-check input:checked{background:var(--accent);border-color:var(--accent)}
+.gy-check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
+
+/* ---------- badge ---------- */
+.gy-badge{font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;color:var(--accent);background:color-mix(in oklch, var(--accent) 13%, transparent)}
+.gy-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
+.gy-badge--ok{color:var(--ok);background:color-mix(in oklch, var(--ok) 14%, transparent)}
+.gy-badge--warn{color:var(--warn);background:color-mix(in oklch, var(--warn) 16%, transparent)}
+.gy-badge--err{color:var(--err);background:color-mix(in oklch, var(--err) 14%, transparent)}
+
+/* ---------- progress: <div class="gy-progress" style="--p:60%"><i></i></div> ---------- */
+.gy-progress{height:8px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 9%, transparent);overflow:hidden}
+.gy-progress > i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg, color-mix(in oklch, var(--accent) 50%, transparent), var(--accent))}
+
+/* ---------- toast / tooltip ---------- */
+.gy-toast{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14.5px}
+.gy-tooltip{font-size:13px;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg)}
+
+@media (prefers-reduced-motion: reduce){.gy *,.gy *::before,.gy *::after{transition:none!important;animation:none!important}}

package/index.mjs

@@ -1079,39 +1079,39 @@ const tokens = {
         "light": {
           "bg": {
             "$type": "color",
-            "$value": "#ebf5fb"
+            "$value": "#e9f6fd"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#d8e9f4"
+            "$value": "#d3eaf8"
           },
           "ink": {
             "$type": "color",
-            "$value": "#08202c"
+            "$value": "#002030"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#41535d"
+            "$value": "#3d5360"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#59656d"
+            "$value": "#566670"
           },
           "line": {
             "$type": "color",
-            "$value": "#bccdd8"
+            "$value": "#b8cedc"
           },
           "paper": {
             "$type": "color",
-            "$value": "#f9fdff"
+            "$value": "#f8fdff"
           },
           "accent": {
             "$type": "color",
-            "$value": "#006995"
+            "$value": "#005b93"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#bfe4fb"
+            "$value": "#b6e6ff"
           },
           "on-accent": {
             "$type": "color",
@@ -1119,7 +1119,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#d1a8ff"
+            "$value": "#d5a2ff"
           },
           "ok": {
             "$type": "color",
@@ -1137,39 +1137,39 @@ const tokens = {
         "dark": {
           "bg": {
             "$type": "color",
-            "$value": "#051118"
+            "$value": "#02111b"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#071b25"
+            "$value": "#021b29"
           },
           "ink": {
             "$type": "color",
-            "$value": "#e9f0f4"
+            "$value": "#e8f0f5"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#b1bdc4"
+            "$value": "#aebdc6"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#95a0a7"
+            "$value": "#92a1aa"
           },
           "line": {
             "$type": "color",
-            "$value": "#283842"
+            "$value": "#233845"
           },
           "paper": {
             "$type": "color",
-            "$value": "#1e2e37"
+            "$value": "#192e3a"
           },
           "accent": {
             "$type": "color",
-            "$value": "#64bced"
+            "$value": "#29aeec"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#0e3a50"
+            "$value": "#003b57"
           },
           "on-accent": {
             "$type": "color",
@@ -1177,7 +1177,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#6f4797"
+            "$value": "#7340a3"
           },
           "ok": {
             "$type": "color",
@@ -1198,39 +1198,39 @@ const tokens = {
         "light": {
           "bg": {
             "$type": "color",
-            "$value": "#f5f1fc"
+            "$value": "#f5f1fe"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#e9e3f6"
+            "$value": "#e9e2fa"
           },
           "ink": {
             "$type": "color",
-            "$value": "#20182e"
+            "$value": "#211632"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#524c5e"
+            "$value": "#534b62"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#65616e"
+            "$value": "#656071"
           },
           "line": {
             "$type": "color",
-            "$value": "#cdc7da"
+            "$value": "#cdc6dd"
           },
           "paper": {
             "$type": "color",
-            "$value": "#fdfcff"
+            "$value": "#fdfbff"
           },
           "accent": {
             "$type": "color",
-            "$value": "#6b4e9a"
+            "$value": "#613897"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#e3d7fd"
+            "$value": "#e4d5ff"
           },
           "on-accent": {
             "$type": "color",
@@ -1238,7 +1238,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#ff96a9"
+            "$value": "#ff8ca5"
           },
           "ok": {
             "$type": "color",
@@ -1256,39 +1256,39 @@ const tokens = {
         "dark": {
           "bg": {
             "$type": "color",
-            "$value": "#110d19"
+            "$value": "#120c1c"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#1b1426"
+            "$value": "#1c132a"
           },
           "ink": {
             "$type": "color",
-            "$value": "#efedf4"
+            "$value": "#efedf6"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#bcb8c5"
+            "$value": "#bcb8c7"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#a09ca8"
+            "$value": "#a09cab"
           },
           "line": {
             "$type": "color",
-            "$value": "#383243"
+            "$value": "#383146"
           },
           "paper": {
             "$type": "color",
-            "$value": "#2d2838"
+            "$value": "#2e273b"
           },
           "accent": {
             "$type": "color",
-            "$value": "#bd9ff2"
+            "$value": "#b08af0"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#3b2d52"
+            "$value": "#3c2a59"
           },
           "on-accent": {
             "$type": "color",
@@ -1296,7 +1296,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#9b344c"
+            "$value": "#a52348"
           },
           "ok": {
             "$type": "color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyeol",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "결 gyeol — 한지를 겹겹이 올리는 디자인 시스템. CSS, Tailwind preset, DTCG design tokens.",
   "license": "MIT",
   "repository": {

package/tokens.json

@@ -1078,39 +1078,39 @@
         "light": {
           "bg": {
             "$type": "color",
-            "$value": "#ebf5fb"
+            "$value": "#e9f6fd"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#d8e9f4"
+            "$value": "#d3eaf8"
           },
           "ink": {
             "$type": "color",
-            "$value": "#08202c"
+            "$value": "#002030"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#41535d"
+            "$value": "#3d5360"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#59656d"
+            "$value": "#566670"
           },
           "line": {
             "$type": "color",
-            "$value": "#bccdd8"
+            "$value": "#b8cedc"
           },
           "paper": {
             "$type": "color",
-            "$value": "#f9fdff"
+            "$value": "#f8fdff"
           },
           "accent": {
             "$type": "color",
-            "$value": "#006995"
+            "$value": "#005b93"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#bfe4fb"
+            "$value": "#b6e6ff"
           },
           "on-accent": {
             "$type": "color",
@@ -1118,7 +1118,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#d1a8ff"
+            "$value": "#d5a2ff"
           },
           "ok": {
             "$type": "color",
@@ -1136,39 +1136,39 @@
         "dark": {
           "bg": {
             "$type": "color",
-            "$value": "#051118"
+            "$value": "#02111b"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#071b25"
+            "$value": "#021b29"
           },
           "ink": {
             "$type": "color",
-            "$value": "#e9f0f4"
+            "$value": "#e8f0f5"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#b1bdc4"
+            "$value": "#aebdc6"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#95a0a7"
+            "$value": "#92a1aa"
           },
           "line": {
             "$type": "color",
-            "$value": "#283842"
+            "$value": "#233845"
           },
           "paper": {
             "$type": "color",
-            "$value": "#1e2e37"
+            "$value": "#192e3a"
           },
           "accent": {
             "$type": "color",
-            "$value": "#64bced"
+            "$value": "#29aeec"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#0e3a50"
+            "$value": "#003b57"
           },
           "on-accent": {
             "$type": "color",
@@ -1176,7 +1176,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#6f4797"
+            "$value": "#7340a3"
           },
           "ok": {
             "$type": "color",
@@ -1197,39 +1197,39 @@
         "light": {
           "bg": {
             "$type": "color",
-            "$value": "#f5f1fc"
+            "$value": "#f5f1fe"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#e9e3f6"
+            "$value": "#e9e2fa"
           },
           "ink": {
             "$type": "color",
-            "$value": "#20182e"
+            "$value": "#211632"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#524c5e"
+            "$value": "#534b62"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#65616e"
+            "$value": "#656071"
           },
           "line": {
             "$type": "color",
-            "$value": "#cdc7da"
+            "$value": "#cdc6dd"
           },
           "paper": {
             "$type": "color",
-            "$value": "#fdfcff"
+            "$value": "#fdfbff"
           },
           "accent": {
             "$type": "color",
-            "$value": "#6b4e9a"
+            "$value": "#613897"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#e3d7fd"
+            "$value": "#e4d5ff"
           },
           "on-accent": {
             "$type": "color",
@@ -1237,7 +1237,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#ff96a9"
+            "$value": "#ff8ca5"
           },
           "ok": {
             "$type": "color",
@@ -1255,39 +1255,39 @@
         "dark": {
           "bg": {
             "$type": "color",
-            "$value": "#110d19"
+            "$value": "#120c1c"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#1b1426"
+            "$value": "#1c132a"
           },
           "ink": {
             "$type": "color",
-            "$value": "#efedf4"
+            "$value": "#efedf6"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#bcb8c5"
+            "$value": "#bcb8c7"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#a09ca8"
+            "$value": "#a09cab"
           },
           "line": {
             "$type": "color",
-            "$value": "#383243"
+            "$value": "#383146"
           },
           "paper": {
             "$type": "color",
-            "$value": "#2d2838"
+            "$value": "#2e273b"
           },
           "accent": {
             "$type": "color",
-            "$value": "#bd9ff2"
+            "$value": "#b08af0"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#3b2d52"
+            "$value": "#3c2a59"
           },
           "on-accent": {
             "$type": "color",
@@ -1295,7 +1295,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#9b344c"
+            "$value": "#a52348"
           },
           "ok": {
             "$type": "color",