gyeol 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +128 -128
  2. package/gyeol.css +15 -15
  3. package/index.mjs +52 -52
  4. package/package.json +1 -1
  5. package/tokens.json +52 -52
package/README.md CHANGED
@@ -1,128 +1,128 @@
1
- # 결 gyeol
2
-
3
- 한지를 겹겹이 올리듯 화면을 쌓는 디자인 시스템이에요. 다른 프로젝트나 도구에서 쓸 수 있게 세 가지 형식으로 나눠 두었어요.
4
-
5
- ```bash
6
- npm install gyeol
7
- ```
8
-
9
- 소개 사이트: https://minjaek111.github.io/gyeol/
10
-
11
- | 파일 | 쓰는 곳 |
12
- | --- | --- |
13
- | `gyeol.css` | 아무 웹 프로젝트(HTML, React, Vue, Svelte 등). 토큰, 팔레트, 테마, 겹 소재, 컴포넌트 클래스가 모두 들어 있어요. |
14
- | `tailwind.preset.cjs` | Tailwind CSS 프로젝트. `gyeol.css`의 CSS 변수를 Tailwind 클래스로 연결해요. |
15
- | `tokens.json` | 디자인 토큰 표준(DTCG) 형식. Figma Tokens Studio, Style Dictionary, iOS·Android 변환에 써요. |
16
-
17
- ## 1. 웹 (CSS)
18
-
19
- ```html
20
- <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">
21
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gyeol@0.1.2/gyeol.css">
22
- <!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.2/gyeol.css"> -->
23
-
24
- <html data-palette="meok" data-theme="dark">
25
- <body class="gy">
26
- <div class="gy-gyeop gy-du">
27
- <button class="gy-btn">저장하기</button>
28
- <button class="gy-btn gy-btn--paper">취소</button>
29
- </div>
30
- </body>
31
- ```
32
-
33
- CDN은 jsDelivr와 unpkg 중 하나를 쓰면 돼요. 버전을 빼고 `gyeol/gyeol.css`로 쓰면 항상 최신 버전을 불러오지만, 실제 서비스에서는 버전을 고정하는 게 안전해요.
34
-
35
- | CDN | 주소 |
36
- | --- | --- |
37
- | jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.2/gyeol.css` |
38
- | unpkg | `https://unpkg.com/gyeol@0.1.2/gyeol.css` |
39
-
40
- 번들러(Vite, Next.js 등)를 쓰면 CSS를 이렇게 불러와요.
41
-
42
- ```js
43
- import 'gyeol/gyeol.css';
44
- import { setPalette, setTheme, color, tokens } from 'gyeol';
45
-
46
- setPalette('cheongja');
47
- setTheme('light');
48
- color('meok', 'dark', 'accent'); // '#85aeff'
49
- ```
50
-
51
- - `data-palette`: `meok`(기본) · `jjok` · `cheongja` · `songhwa` · `yeonji` · `jaju` · `chija` · `hwangto` · `oksaek` · `haneul` · `odi`
52
-
53
- | 팔레트 | 키 | 팔레트 | 키 |
54
- | --- | --- | --- | --- |
55
- | 먹 | `meok` | 치자 | `chija` |
56
- | 쪽빛 | `jjok` | 황토 | `hwangto` |
57
- | 청자 | `cheongja` | 옥색 | `oksaek` |
58
- | 송화 | `songhwa` | 하늘 | `haneul` |
59
- | 연지 | `yeonji` | 오디 | `odi` |
60
- | 자주 | `jaju` | | |
61
- - `data-theme`: `dark`(기본) · `light` · `system`
62
- - 컴포넌트 클래스는 모두 `gy-` 접두사를 써서 기존 CSS와 겹치지 않아요.
63
- - 화면 일부만 다른 팔레트나 테마로 바꿀 수 있어요(0.1.2부터). 그 범위 안의 색과 글자색이 모두 다시 계산돼요.
64
-
65
- ```html
66
- <html data-palette="meok" data-theme="dark">
67
- <section data-palette="yeonji" data-theme="light">이 영역만 연지 · 라이트</section>
68
- <section data-palette="cheongja">테마를 빼면 바깥 테마(다크)를 따라가요</section>
69
- </html>
70
- ```
71
-
72
- ```js
73
- setPalette('jaju', document.querySelector('#promo')); // 특정 요소에만 적용
74
- ```
75
-
76
- | 컴포넌트 | 클래스 |
77
- | --- | --- |
78
- | 겹 소재 | `gy-gyeop` + `gy-hol` / `gy-du` / `gy-se` |
79
- | 버튼 | `gy-btn` + `--ink` / `--paper` / `--ghost` / `--danger` / `--sm` |
80
- | 스위치 | `<button class="gy-switch" role="switch" aria-checked="true">` |
81
- | 세그먼트 | `gy-seg` 안에 `aria-pressed` 버튼 |
82
- | 칩 | `gy-chip` + `aria-pressed` |
83
- | 입력 필드 | `gy-field` (오류는 `gy-field--error`) |
84
- | 체크박스 | `<label class="gy-check"><input type="checkbox"> 텍스트</label>` |
85
- | 배지 | `gy-badge` + `--ok` / `--warn` / `--err` |
86
- | 진행 막대 | `<div class="gy-progress" style="--p:60%"><i></i></div>` |
87
- | 토스트·툴팁 | `gy-toast`(겹과 함께), `gy-tooltip` |
88
-
89
- ## 2. Tailwind
90
-
91
- ```js
92
- // tailwind.config.js
93
- module.exports = {
94
- presets: [require('gyeol/tailwind')],
95
- };
96
- ```
97
-
98
- `gyeol.css`를 함께 불러와야 색이 정의돼요. 그다음 `bg-paper`, `text-ink-2`, `bg-accent`, `p-pun-4`, `rounded-r-3`, `font-display`, `gyeop gyeop-du`처럼 써요.
99
-
100
- ## 3. 디자인 토큰 JSON (Figma, iOS, Android)
101
-
102
- `tokens.json`은 [DTCG](https://tr.designtokens.org/format/) 형식이고, 색은 팔레트·테마별로 계산된 HEX 값이에요.
103
-
104
- ```
105
- gyeol.color.<팔레트>.<light|dark>.<역할> 예) gyeol.color.meok.dark.accent = #85aeff
106
- gyeol.space.pun-4 = 16px
107
- gyeol.radius.r-3 = 20px
108
- gyeol.material.du.thickness = 0.72
109
- ```
110
-
111
- - **JS에서 바로**: `import tokens from 'gyeol'` 또는 `import tokens from 'gyeol/tokens.json'`
112
- - **Figma**: Tokens Studio 플러그인에서 `tokens.json`을 불러오세요.
113
- - **iOS / Android**: Style Dictionary로 `tokens.json`을 Swift, Kotlin, XML 리소스로 변환하세요.
114
-
115
- HEX 값은 화면용 sRGB로 변환한 근사치예요. 웹에서는 `gyeol.css`의 oklch 원본을 쓰는 게 더 정확해요.
116
-
117
- ## 패키지 경로
118
-
119
- | 경로 | 내용 |
120
- | --- | --- |
121
- | `gyeol` | 토큰 객체와 `setPalette`, `setTheme`, `color` 함수 (ESM·CommonJS·TypeScript 타입 포함) |
122
- | `gyeol/gyeol.css` (또는 `gyeol/css`) | 전체 CSS |
123
- | `gyeol/tailwind` | Tailwind 프리셋 |
124
- | `gyeol/tokens.json` | DTCG 토큰 원본 |
125
-
126
- ## 라이선스
127
-
128
- MIT
1
+ # 결 gyeol
2
+
3
+ 한지를 겹겹이 올리듯 화면을 쌓는 디자인 시스템이에요. 다른 프로젝트나 도구에서 쓸 수 있게 세 가지 형식으로 나눠 두었어요.
4
+
5
+ ```bash
6
+ npm install gyeol
7
+ ```
8
+
9
+ 소개 사이트: https://minjaek111.github.io/gyeol/
10
+
11
+ | 파일 | 쓰는 곳 |
12
+ | --- | --- |
13
+ | `gyeol.css` | 아무 웹 프로젝트(HTML, React, Vue, Svelte 등). 토큰, 팔레트, 테마, 겹 소재, 컴포넌트 클래스가 모두 들어 있어요. |
14
+ | `tailwind.preset.cjs` | Tailwind CSS 프로젝트. `gyeol.css`의 CSS 변수를 Tailwind 클래스로 연결해요. |
15
+ | `tokens.json` | 디자인 토큰 표준(DTCG) 형식. Figma Tokens Studio, Style Dictionary, iOS·Android 변환에 써요. |
16
+
17
+ ## 1. 웹 (CSS)
18
+
19
+ ```html
20
+ <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">
21
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gyeol@0.1.4/gyeol.css">
22
+ <!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.4/gyeol.css"> -->
23
+
24
+ <html data-palette="meok" data-theme="dark">
25
+ <body class="gy">
26
+ <div class="gy-gyeop gy-du">
27
+ <button class="gy-btn">저장하기</button>
28
+ <button class="gy-btn gy-btn--paper">취소</button>
29
+ </div>
30
+ </body>
31
+ ```
32
+
33
+ CDN은 jsDelivr와 unpkg 중 하나를 쓰면 돼요. 버전을 빼고 `gyeol/gyeol.css`로 쓰면 항상 최신 버전을 불러오지만, 실제 서비스에서는 버전을 고정하는 게 안전해요.
34
+
35
+ | CDN | 주소 |
36
+ | --- | --- |
37
+ | jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.4/gyeol.css` |
38
+ | unpkg | `https://unpkg.com/gyeol@0.1.4/gyeol.css` |
39
+
40
+ 번들러(Vite, Next.js 등)를 쓰면 CSS를 이렇게 불러와요.
41
+
42
+ ```js
43
+ import 'gyeol/gyeol.css';
44
+ import { setPalette, setTheme, color, tokens } from 'gyeol';
45
+
46
+ setPalette('cheongja');
47
+ setTheme('light');
48
+ color('meok', 'dark', 'accent'); // '#85aeff'
49
+ ```
50
+
51
+ - `data-palette`: `meok`(기본) · `jjok` · `cheongja` · `songhwa` · `yeonji` · `jaju` · `chija` · `hwangto` · `oksaek` · `haneul` · `odi`
52
+
53
+ | 팔레트 | 키 | 팔레트 | 키 |
54
+ | --- | --- | --- | --- |
55
+ | 먹 | `meok` | 치자 | `chija` |
56
+ | 쪽빛 | `jjok` | 황토 | `hwangto` |
57
+ | 청자 | `cheongja` | 옥색 | `oksaek` |
58
+ | 송화 | `songhwa` | 하늘 | `haneul` |
59
+ | 연지 | `yeonji` | 오디 | `odi` |
60
+ | 자주 | `jaju` | | |
61
+ - `data-theme`: `dark`(기본) · `light` · `system`
62
+ - 컴포넌트 클래스는 모두 `gy-` 접두사를 써서 기존 CSS와 겹치지 않아요.
63
+ - 화면 일부만 다른 팔레트나 테마로 바꿀 수 있어요(0.1.2부터). 그 범위 안의 색과 글자색이 모두 다시 계산돼요.
64
+
65
+ ```html
66
+ <html data-palette="meok" data-theme="dark">
67
+ <section data-palette="yeonji" data-theme="light">이 영역만 연지 · 라이트</section>
68
+ <section data-palette="cheongja">테마를 빼면 바깥 테마(다크)를 따라가요</section>
69
+ </html>
70
+ ```
71
+
72
+ ```js
73
+ setPalette('jaju', document.querySelector('#promo')); // 특정 요소에만 적용
74
+ ```
75
+
76
+ | 컴포넌트 | 클래스 |
77
+ | --- | --- |
78
+ | 겹 소재 | `gy-gyeop` + `gy-hol` / `gy-du` / `gy-se` |
79
+ | 버튼 | `gy-btn` + `--ink` / `--paper` / `--ghost` / `--danger` / `--sm` |
80
+ | 스위치 | `<button class="gy-switch" role="switch" aria-checked="true">` |
81
+ | 세그먼트 | `gy-seg` 안에 `aria-pressed` 버튼 |
82
+ | 칩 | `gy-chip` + `aria-pressed` |
83
+ | 입력 필드 | `gy-field` (오류는 `gy-field--error`) |
84
+ | 체크박스 | `<label class="gy-check"><input type="checkbox"> 텍스트</label>` |
85
+ | 배지 | `gy-badge` + `--ok` / `--warn` / `--err` |
86
+ | 진행 막대 | `<div class="gy-progress" style="--p:60%"><i></i></div>` |
87
+ | 토스트·툴팁 | `gy-toast`(겹과 함께), `gy-tooltip` |
88
+
89
+ ## 2. Tailwind
90
+
91
+ ```js
92
+ // tailwind.config.js
93
+ module.exports = {
94
+ presets: [require('gyeol/tailwind')],
95
+ };
96
+ ```
97
+
98
+ `gyeol.css`를 함께 불러와야 색이 정의돼요. 그다음 `bg-paper`, `text-ink-2`, `bg-accent`, `p-pun-4`, `rounded-r-3`, `font-display`, `gyeop gyeop-du`처럼 써요.
99
+
100
+ ## 3. 디자인 토큰 JSON (Figma, iOS, Android)
101
+
102
+ `tokens.json`은 [DTCG](https://tr.designtokens.org/format/) 형식이고, 색은 팔레트·테마별로 계산된 HEX 값이에요.
103
+
104
+ ```
105
+ gyeol.color.<팔레트>.<light|dark>.<역할> 예) gyeol.color.meok.dark.accent = #85aeff
106
+ gyeol.space.pun-4 = 16px
107
+ gyeol.radius.r-3 = 20px
108
+ gyeol.material.du.thickness = 0.72
109
+ ```
110
+
111
+ - **JS에서 바로**: `import tokens from 'gyeol'` 또는 `import tokens from 'gyeol/tokens.json'`
112
+ - **Figma**: Tokens Studio 플러그인에서 `tokens.json`을 불러오세요.
113
+ - **iOS / Android**: Style Dictionary로 `tokens.json`을 Swift, Kotlin, XML 리소스로 변환하세요.
114
+
115
+ HEX 값은 화면용 sRGB로 변환한 근사치예요. 웹에서는 `gyeol.css`의 oklch 원본을 쓰는 게 더 정확해요.
116
+
117
+ ## 패키지 경로
118
+
119
+ | 경로 | 내용 |
120
+ | --- | --- |
121
+ | `gyeol` | 토큰 객체와 `setPalette`, `setTheme`, `color` 함수 (ESM·CommonJS·TypeScript 타입 포함) |
122
+ | `gyeol/gyeol.css` (또는 `gyeol/css`) | 전체 CSS |
123
+ | `gyeol/tailwind` | Tailwind 프리셋 |
124
+ | `gyeol/tokens.json` | DTCG 토큰 원본 |
125
+
126
+ ## 라이선스
127
+
128
+ MIT
package/gyeol.css CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  /* ---------- tokens ---------- */
13
13
  :root{
14
- --h:255; --c:.012; --ah:265; --ac:.14; /* 기본 팔레트: 먹 + 쪽빛 강조 */
14
+ --h:255; --c:.012; --ah:265; --ac:.14; --ad:0%; /* 기본 팔레트: 먹 + 쪽빛 강조 */
15
15
  --f-display: "Hahmlet", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
16
16
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
17
17
  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
@@ -31,7 +31,7 @@
31
31
  --ink-3: oklch(50% calc(var(--c)*.18) var(--h));
32
32
  --line: oklch(84% calc(var(--c)*.22) var(--h));
33
33
  --paper: oklch(99.2% calc(var(--c)*.05) var(--h));
34
- --accent: oklch(49% var(--ac) var(--ah));
34
+ --accent: oklch(calc(49% + var(--ad)) var(--ac) var(--ah));
35
35
  --accent-soft: oklch(90% calc(var(--ac)*.45) var(--ah));
36
36
  --on-accent: oklch(99% 0 0);
37
37
  --stain: oklch(80% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
@@ -46,7 +46,7 @@
46
46
  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
47
47
  --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));
48
48
  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
49
- --accent: oklch(76% var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
49
+ --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));
50
50
  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
51
51
  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
52
52
  --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);
@@ -58,24 +58,24 @@
58
58
  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
59
59
  --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));
60
60
  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
61
- --accent: oklch(76% var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
61
+ --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));
62
62
  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
63
63
  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
64
64
  --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);
65
65
  --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>");
66
66
  --grain-o: .35; color-scheme: dark;
67
67
  }
68
- [data-palette="meok"] {--h:255;--c:.012;--ah:265;--ac:.14}
69
- [data-palette="jjok"] {--h:265;--c:.14; --ah:265;--ac:.14}
70
- [data-palette="cheongja"]{--h:178;--c:.075;--ah:178;--ac:.075}
71
- [data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12}
72
- [data-palette="yeonji"] {--h:16; --c:.16; --ah:16; --ac:.16}
73
- [data-palette="jaju"] {--h:330;--c:.13; --ah:330;--ac:.13}
74
- [data-palette="chija"] {--h:70;--c:0.14;--ah:70;--ac:0.14}
75
- [data-palette="hwangto"] {--h:55;--c:0.1;--ah:55;--ac:0.1}
76
- [data-palette="oksaek"] {--h:195;--c:0.08;--ah:195;--ac:0.08}
77
- [data-palette="haneul"] {--h:235;--c:0.11;--ah:235;--ac:0.11}
78
- [data-palette="odi"] {--h:300;--c:0.12;--ah:300;--ac:0.12}
68
+ [data-palette="meok"] {--h:255;--c:.012;--ah:265;--ac:.14;--ad:0%}
69
+ [data-palette="jjok"] {--h:265;--c:.14; --ah:265;--ac:.14;--ad:0%}
70
+ [data-palette="cheongja"]{--h:178;--c:.08;--ah:178;--ac:.08;--ad:4%}
71
+ [data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12;--ad:0%}
72
+ [data-palette="yeonji"] {--h:16; --c:.16; --ah:16; --ac:.16;--ad:0%}
73
+ [data-palette="jaju"] {--h:330;--c:.13; --ah:330;--ac:.13;--ad:0%}
74
+ [data-palette="chija"] {--h:70;--c:0.14;--ah:70;--ac:0.14;--ad:0%}
75
+ [data-palette="hwangto"] {--h:48;--c:.065;--ah:48;--ac:.065;--ad:0%}
76
+ [data-palette="oksaek"] {--h:195;--c:.10;--ah:195;--ac:.10;--ad:-5%}
77
+ [data-palette="haneul"] {--h:235;--c:0.11;--ah:235;--ac:0.11;--ad:0%}
78
+ [data-palette="odi"] {--h:300;--c:0.12;--ah:300;--ac:0.12;--ad:0%}
79
79
  /* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
80
80
  :where([data-palette], [data-theme]):not(:root){color:var(--ink)}
81
81
 
package/index.mjs CHANGED
@@ -254,11 +254,11 @@ const tokens = {
254
254
  },
255
255
  "ink": {
256
256
  "$type": "color",
257
- "$value": "#0e211d"
257
+ "$value": "#0d211d"
258
258
  },
259
259
  "ink-2": {
260
260
  "$type": "color",
261
- "$value": "#455350"
261
+ "$value": "#445450"
262
262
  },
263
263
  "ink-3": {
264
264
  "$type": "color",
@@ -266,7 +266,7 @@ const tokens = {
266
266
  },
267
267
  "line": {
268
268
  "$type": "color",
269
- "$value": "#c0ceca"
269
+ "$value": "#bfceca"
270
270
  },
271
271
  "paper": {
272
272
  "$type": "color",
@@ -274,11 +274,11 @@ const tokens = {
274
274
  },
275
275
  "accent": {
276
276
  "$type": "color",
277
- "$value": "#256e60"
277
+ "$value": "#2c7b6c"
278
278
  },
279
279
  "accent-soft": {
280
280
  "$type": "color",
281
- "$value": "#c7e6de"
281
+ "$value": "#c6e6de"
282
282
  },
283
283
  "on-accent": {
284
284
  "$type": "color",
@@ -286,7 +286,7 @@ const tokens = {
286
286
  },
287
287
  "stain": {
288
288
  "$type": "color",
289
- "$value": "#8bc4fa"
289
+ "$value": "#88c4fd"
290
290
  },
291
291
  "ok": {
292
292
  "$type": "color",
@@ -308,7 +308,7 @@ const tokens = {
308
308
  },
309
309
  "bg-2": {
310
310
  "$type": "color",
311
- "$value": "#0c1c18"
311
+ "$value": "#0b1c18"
312
312
  },
313
313
  "ink": {
314
314
  "$type": "color",
@@ -324,7 +324,7 @@ const tokens = {
324
324
  },
325
325
  "line": {
326
326
  "$type": "color",
327
- "$value": "#2b3935"
327
+ "$value": "#2a3935"
328
328
  },
329
329
  "paper": {
330
330
  "$type": "color",
@@ -332,11 +332,11 @@ const tokens = {
332
332
  },
333
333
  "accent": {
334
334
  "$type": "color",
335
- "$value": "#7bc1b1"
335
+ "$value": "#83cfbe"
336
336
  },
337
337
  "accent-soft": {
338
338
  "$type": "color",
339
- "$value": "#1b3c35"
339
+ "$value": "#193d35"
340
340
  },
341
341
  "on-accent": {
342
342
  "$type": "color",
@@ -344,7 +344,7 @@ const tokens = {
344
344
  },
345
345
  "stain": {
346
346
  "$type": "color",
347
- "$value": "#2a6192"
347
+ "$value": "#276194"
348
348
  },
349
349
  "ok": {
350
350
  "$type": "color",
@@ -841,39 +841,39 @@ const tokens = {
841
841
  "light": {
842
842
  "bg": {
843
843
  "$type": "color",
844
- "$value": "#faf2ec"
844
+ "$value": "#f8f2ef"
845
845
  },
846
846
  "bg-2": {
847
847
  "$type": "color",
848
- "$value": "#f3e3d9"
848
+ "$value": "#efe4de"
849
849
  },
850
850
  "ink": {
851
851
  "$type": "color",
852
- "$value": "#2a180c"
852
+ "$value": "#261a14"
853
853
  },
854
854
  "ink-2": {
855
855
  "$type": "color",
856
- "$value": "#5b4c43"
856
+ "$value": "#584d48"
857
857
  },
858
858
  "ink-3": {
859
859
  "$type": "color",
860
- "$value": "#6c615a"
860
+ "$value": "#69615e"
861
861
  },
862
862
  "line": {
863
863
  "$type": "color",
864
- "$value": "#d6c7bd"
864
+ "$value": "#d3c8c3"
865
865
  },
866
866
  "paper": {
867
867
  "$type": "color",
868
- "$value": "#fffcf9"
868
+ "$value": "#fefcfa"
869
869
  },
870
870
  "accent": {
871
871
  "$type": "color",
872
- "$value": "#8b4f21"
872
+ "$value": "#7f553f"
873
873
  },
874
874
  "accent-soft": {
875
875
  "$type": "color",
876
- "$value": "#f7d7c2"
876
+ "$value": "#efd9ce"
877
877
  },
878
878
  "on-accent": {
879
879
  "$type": "color",
@@ -881,7 +881,7 @@ const tokens = {
881
881
  },
882
882
  "stain": {
883
883
  "$type": "color",
884
- "$value": "#accb73"
884
+ "$value": "#b8c684"
885
885
  },
886
886
  "ok": {
887
887
  "$type": "color",
@@ -899,47 +899,47 @@ const tokens = {
899
899
  "dark": {
900
900
  "bg": {
901
901
  "$type": "color",
902
- "$value": "#170d06"
902
+ "$value": "#150e0a"
903
903
  },
904
904
  "bg-2": {
905
905
  "$type": "color",
906
- "$value": "#23140a"
906
+ "$value": "#201610"
907
907
  },
908
908
  "ink": {
909
909
  "$type": "color",
910
- "$value": "#f3ede9"
910
+ "$value": "#f2edeb"
911
911
  },
912
912
  "ink-2": {
913
913
  "$type": "color",
914
- "$value": "#c3b8b2"
914
+ "$value": "#c0b9b5"
915
915
  },
916
916
  "ink-3": {
917
917
  "$type": "color",
918
- "$value": "#a69c96"
918
+ "$value": "#a49d99"
919
919
  },
920
920
  "line": {
921
921
  "$type": "color",
922
- "$value": "#403229"
922
+ "$value": "#3d332e"
923
923
  },
924
924
  "paper": {
925
925
  "$type": "color",
926
- "$value": "#35281f"
926
+ "$value": "#322924"
927
927
  },
928
928
  "accent": {
929
929
  "$type": "color",
930
- "$value": "#e3a072"
930
+ "$value": "#d4a58e"
931
931
  },
932
932
  "accent-soft": {
933
933
  "$type": "color",
934
- "$value": "#4b2d18"
934
+ "$value": "#453025"
935
935
  },
936
936
  "on-accent": {
937
937
  "$type": "color",
938
- "$value": "#1c0e05"
938
+ "$value": "#1c0d06"
939
939
  },
940
940
  "stain": {
941
941
  "$type": "color",
942
- "$value": "#4e6801"
942
+ "$value": "#596424"
943
943
  },
944
944
  "ok": {
945
945
  "$type": "color",
@@ -960,39 +960,39 @@ const tokens = {
960
960
  "light": {
961
961
  "bg": {
962
962
  "$type": "color",
963
- "$value": "#edf6f5"
963
+ "$value": "#ebf6f6"
964
964
  },
965
965
  "bg-2": {
966
966
  "$type": "color",
967
- "$value": "#daeaea"
967
+ "$value": "#d6ebeb"
968
968
  },
969
969
  "ink": {
970
970
  "$type": "color",
971
- "$value": "#0b2121"
971
+ "$value": "#042222"
972
972
  },
973
973
  "ink-2": {
974
974
  "$type": "color",
975
- "$value": "#435353"
975
+ "$value": "#405454"
976
976
  },
977
977
  "ink-3": {
978
978
  "$type": "color",
979
- "$value": "#5a6666"
979
+ "$value": "#586766"
980
980
  },
981
981
  "line": {
982
982
  "$type": "color",
983
- "$value": "#becece"
983
+ "$value": "#bbcfcf"
984
984
  },
985
985
  "paper": {
986
986
  "$type": "color",
987
- "$value": "#f9fdfd"
987
+ "$value": "#f9fefd"
988
988
  },
989
989
  "accent": {
990
990
  "$type": "color",
991
- "$value": "#0f6e6e"
991
+ "$value": "#006364"
992
992
  },
993
993
  "accent-soft": {
994
994
  "$type": "color",
995
- "$value": "#c4e6e5"
995
+ "$value": "#bce8e7"
996
996
  },
997
997
  "on-accent": {
998
998
  "$type": "color",
@@ -1000,7 +1000,7 @@ const tokens = {
1000
1000
  },
1001
1001
  "stain": {
1002
1002
  "$type": "color",
1003
- "$value": "#9ebdff"
1003
+ "$value": "#98bcff"
1004
1004
  },
1005
1005
  "ok": {
1006
1006
  "$type": "color",
@@ -1018,39 +1018,39 @@ const tokens = {
1018
1018
  "dark": {
1019
1019
  "bg": {
1020
1020
  "$type": "color",
1021
- "$value": "#061212"
1021
+ "$value": "#041212"
1022
1022
  },
1023
1023
  "bg-2": {
1024
1024
  "$type": "color",
1025
- "$value": "#0a1c1c"
1025
+ "$value": "#051d1d"
1026
1026
  },
1027
1027
  "ink": {
1028
1028
  "$type": "color",
1029
- "$value": "#eaf0f0"
1029
+ "$value": "#e9f0f0"
1030
1030
  },
1031
1031
  "ink-2": {
1032
1032
  "$type": "color",
1033
- "$value": "#b2bdbd"
1033
+ "$value": "#b0bebd"
1034
1034
  },
1035
1035
  "ink-3": {
1036
1036
  "$type": "color",
1037
- "$value": "#96a1a1"
1037
+ "$value": "#94a1a1"
1038
1038
  },
1039
1039
  "line": {
1040
1040
  "$type": "color",
1041
- "$value": "#293938"
1041
+ "$value": "#263a39"
1042
1042
  },
1043
1043
  "paper": {
1044
1044
  "$type": "color",
1045
- "$value": "#202f2e"
1045
+ "$value": "#1c2f2f"
1046
1046
  },
1047
1047
  "accent": {
1048
1048
  "$type": "color",
1049
- "$value": "#70c1c1"
1049
+ "$value": "#45b5b5"
1050
1050
  },
1051
1051
  "accent-soft": {
1052
1052
  "$type": "color",
1053
- "$value": "#153c3c"
1053
+ "$value": "#033e3e"
1054
1054
  },
1055
1055
  "on-accent": {
1056
1056
  "$type": "color",
@@ -1058,7 +1058,7 @@ const tokens = {
1058
1058
  },
1059
1059
  "stain": {
1060
1060
  "$type": "color",
1061
- "$value": "#415b97"
1061
+ "$value": "#3c5aa1"
1062
1062
  },
1063
1063
  "ok": {
1064
1064
  "$type": "color",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gyeol",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "결 gyeol — 한지를 겹겹이 올리는 디자인 시스템. CSS, Tailwind preset, DTCG design tokens.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens.json CHANGED
@@ -253,11 +253,11 @@
253
253
  },
254
254
  "ink": {
255
255
  "$type": "color",
256
- "$value": "#0e211d"
256
+ "$value": "#0d211d"
257
257
  },
258
258
  "ink-2": {
259
259
  "$type": "color",
260
- "$value": "#455350"
260
+ "$value": "#445450"
261
261
  },
262
262
  "ink-3": {
263
263
  "$type": "color",
@@ -265,7 +265,7 @@
265
265
  },
266
266
  "line": {
267
267
  "$type": "color",
268
- "$value": "#c0ceca"
268
+ "$value": "#bfceca"
269
269
  },
270
270
  "paper": {
271
271
  "$type": "color",
@@ -273,11 +273,11 @@
273
273
  },
274
274
  "accent": {
275
275
  "$type": "color",
276
- "$value": "#256e60"
276
+ "$value": "#2c7b6c"
277
277
  },
278
278
  "accent-soft": {
279
279
  "$type": "color",
280
- "$value": "#c7e6de"
280
+ "$value": "#c6e6de"
281
281
  },
282
282
  "on-accent": {
283
283
  "$type": "color",
@@ -285,7 +285,7 @@
285
285
  },
286
286
  "stain": {
287
287
  "$type": "color",
288
- "$value": "#8bc4fa"
288
+ "$value": "#88c4fd"
289
289
  },
290
290
  "ok": {
291
291
  "$type": "color",
@@ -307,7 +307,7 @@
307
307
  },
308
308
  "bg-2": {
309
309
  "$type": "color",
310
- "$value": "#0c1c18"
310
+ "$value": "#0b1c18"
311
311
  },
312
312
  "ink": {
313
313
  "$type": "color",
@@ -323,7 +323,7 @@
323
323
  },
324
324
  "line": {
325
325
  "$type": "color",
326
- "$value": "#2b3935"
326
+ "$value": "#2a3935"
327
327
  },
328
328
  "paper": {
329
329
  "$type": "color",
@@ -331,11 +331,11 @@
331
331
  },
332
332
  "accent": {
333
333
  "$type": "color",
334
- "$value": "#7bc1b1"
334
+ "$value": "#83cfbe"
335
335
  },
336
336
  "accent-soft": {
337
337
  "$type": "color",
338
- "$value": "#1b3c35"
338
+ "$value": "#193d35"
339
339
  },
340
340
  "on-accent": {
341
341
  "$type": "color",
@@ -343,7 +343,7 @@
343
343
  },
344
344
  "stain": {
345
345
  "$type": "color",
346
- "$value": "#2a6192"
346
+ "$value": "#276194"
347
347
  },
348
348
  "ok": {
349
349
  "$type": "color",
@@ -840,39 +840,39 @@
840
840
  "light": {
841
841
  "bg": {
842
842
  "$type": "color",
843
- "$value": "#faf2ec"
843
+ "$value": "#f8f2ef"
844
844
  },
845
845
  "bg-2": {
846
846
  "$type": "color",
847
- "$value": "#f3e3d9"
847
+ "$value": "#efe4de"
848
848
  },
849
849
  "ink": {
850
850
  "$type": "color",
851
- "$value": "#2a180c"
851
+ "$value": "#261a14"
852
852
  },
853
853
  "ink-2": {
854
854
  "$type": "color",
855
- "$value": "#5b4c43"
855
+ "$value": "#584d48"
856
856
  },
857
857
  "ink-3": {
858
858
  "$type": "color",
859
- "$value": "#6c615a"
859
+ "$value": "#69615e"
860
860
  },
861
861
  "line": {
862
862
  "$type": "color",
863
- "$value": "#d6c7bd"
863
+ "$value": "#d3c8c3"
864
864
  },
865
865
  "paper": {
866
866
  "$type": "color",
867
- "$value": "#fffcf9"
867
+ "$value": "#fefcfa"
868
868
  },
869
869
  "accent": {
870
870
  "$type": "color",
871
- "$value": "#8b4f21"
871
+ "$value": "#7f553f"
872
872
  },
873
873
  "accent-soft": {
874
874
  "$type": "color",
875
- "$value": "#f7d7c2"
875
+ "$value": "#efd9ce"
876
876
  },
877
877
  "on-accent": {
878
878
  "$type": "color",
@@ -880,7 +880,7 @@
880
880
  },
881
881
  "stain": {
882
882
  "$type": "color",
883
- "$value": "#accb73"
883
+ "$value": "#b8c684"
884
884
  },
885
885
  "ok": {
886
886
  "$type": "color",
@@ -898,47 +898,47 @@
898
898
  "dark": {
899
899
  "bg": {
900
900
  "$type": "color",
901
- "$value": "#170d06"
901
+ "$value": "#150e0a"
902
902
  },
903
903
  "bg-2": {
904
904
  "$type": "color",
905
- "$value": "#23140a"
905
+ "$value": "#201610"
906
906
  },
907
907
  "ink": {
908
908
  "$type": "color",
909
- "$value": "#f3ede9"
909
+ "$value": "#f2edeb"
910
910
  },
911
911
  "ink-2": {
912
912
  "$type": "color",
913
- "$value": "#c3b8b2"
913
+ "$value": "#c0b9b5"
914
914
  },
915
915
  "ink-3": {
916
916
  "$type": "color",
917
- "$value": "#a69c96"
917
+ "$value": "#a49d99"
918
918
  },
919
919
  "line": {
920
920
  "$type": "color",
921
- "$value": "#403229"
921
+ "$value": "#3d332e"
922
922
  },
923
923
  "paper": {
924
924
  "$type": "color",
925
- "$value": "#35281f"
925
+ "$value": "#322924"
926
926
  },
927
927
  "accent": {
928
928
  "$type": "color",
929
- "$value": "#e3a072"
929
+ "$value": "#d4a58e"
930
930
  },
931
931
  "accent-soft": {
932
932
  "$type": "color",
933
- "$value": "#4b2d18"
933
+ "$value": "#453025"
934
934
  },
935
935
  "on-accent": {
936
936
  "$type": "color",
937
- "$value": "#1c0e05"
937
+ "$value": "#1c0d06"
938
938
  },
939
939
  "stain": {
940
940
  "$type": "color",
941
- "$value": "#4e6801"
941
+ "$value": "#596424"
942
942
  },
943
943
  "ok": {
944
944
  "$type": "color",
@@ -959,39 +959,39 @@
959
959
  "light": {
960
960
  "bg": {
961
961
  "$type": "color",
962
- "$value": "#edf6f5"
962
+ "$value": "#ebf6f6"
963
963
  },
964
964
  "bg-2": {
965
965
  "$type": "color",
966
- "$value": "#daeaea"
966
+ "$value": "#d6ebeb"
967
967
  },
968
968
  "ink": {
969
969
  "$type": "color",
970
- "$value": "#0b2121"
970
+ "$value": "#042222"
971
971
  },
972
972
  "ink-2": {
973
973
  "$type": "color",
974
- "$value": "#435353"
974
+ "$value": "#405454"
975
975
  },
976
976
  "ink-3": {
977
977
  "$type": "color",
978
- "$value": "#5a6666"
978
+ "$value": "#586766"
979
979
  },
980
980
  "line": {
981
981
  "$type": "color",
982
- "$value": "#becece"
982
+ "$value": "#bbcfcf"
983
983
  },
984
984
  "paper": {
985
985
  "$type": "color",
986
- "$value": "#f9fdfd"
986
+ "$value": "#f9fefd"
987
987
  },
988
988
  "accent": {
989
989
  "$type": "color",
990
- "$value": "#0f6e6e"
990
+ "$value": "#006364"
991
991
  },
992
992
  "accent-soft": {
993
993
  "$type": "color",
994
- "$value": "#c4e6e5"
994
+ "$value": "#bce8e7"
995
995
  },
996
996
  "on-accent": {
997
997
  "$type": "color",
@@ -999,7 +999,7 @@
999
999
  },
1000
1000
  "stain": {
1001
1001
  "$type": "color",
1002
- "$value": "#9ebdff"
1002
+ "$value": "#98bcff"
1003
1003
  },
1004
1004
  "ok": {
1005
1005
  "$type": "color",
@@ -1017,39 +1017,39 @@
1017
1017
  "dark": {
1018
1018
  "bg": {
1019
1019
  "$type": "color",
1020
- "$value": "#061212"
1020
+ "$value": "#041212"
1021
1021
  },
1022
1022
  "bg-2": {
1023
1023
  "$type": "color",
1024
- "$value": "#0a1c1c"
1024
+ "$value": "#051d1d"
1025
1025
  },
1026
1026
  "ink": {
1027
1027
  "$type": "color",
1028
- "$value": "#eaf0f0"
1028
+ "$value": "#e9f0f0"
1029
1029
  },
1030
1030
  "ink-2": {
1031
1031
  "$type": "color",
1032
- "$value": "#b2bdbd"
1032
+ "$value": "#b0bebd"
1033
1033
  },
1034
1034
  "ink-3": {
1035
1035
  "$type": "color",
1036
- "$value": "#96a1a1"
1036
+ "$value": "#94a1a1"
1037
1037
  },
1038
1038
  "line": {
1039
1039
  "$type": "color",
1040
- "$value": "#293938"
1040
+ "$value": "#263a39"
1041
1041
  },
1042
1042
  "paper": {
1043
1043
  "$type": "color",
1044
- "$value": "#202f2e"
1044
+ "$value": "#1c2f2f"
1045
1045
  },
1046
1046
  "accent": {
1047
1047
  "$type": "color",
1048
- "$value": "#70c1c1"
1048
+ "$value": "#45b5b5"
1049
1049
  },
1050
1050
  "accent-soft": {
1051
1051
  "$type": "color",
1052
- "$value": "#153c3c"
1052
+ "$value": "#033e3e"
1053
1053
  },
1054
1054
  "on-accent": {
1055
1055
  "$type": "color",
@@ -1057,7 +1057,7 @@
1057
1057
  },
1058
1058
  "stain": {
1059
1059
  "$type": "color",
1060
- "$value": "#415b97"
1060
+ "$value": "#3c5aa1"
1061
1061
  },
1062
1062
  "ok": {
1063
1063
  "$type": "color",