gyeol 0.1.5 → 0.1.7

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 +141 -128
  2. package/gyeol.css +10 -3
  3. package/index.mjs +40 -40
  4. package/package.json +1 -1
  5. package/tokens.json +40 -40
package/README.md CHANGED
@@ -1,128 +1,141 @@
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
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;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.6/gyeol.css">
22
+ <!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.6/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.6/gyeol.css` |
38
+ | unpkg | `https://unpkg.com/gyeol@0.1.6/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
+ **접근성 메모**
90
+
91
+ - 터치 화면에서는 작은 버튼, 칩, 세그먼트, 체크박스가 40px 이상으로 커지고 스위치는 누르는 범위가 넓어져요(0.1.7부터).
92
+ - 토스트는 화면 낭독기가 읽을 수 있게 늘 존재하는 알림 영역 안에 넣어 주세요.
93
+
94
+ ```html
95
+ <div role="status" aria-live="polite">
96
+ <div class="gy-toast gy-gyeop gy-se" hidden>저장했어요</div>
97
+ </div>
98
+ ```
99
+
100
+ - 다이얼로그를 띄울 때는 뒤쪽 내용에 `inert`를 걸고, 닫으면 다이얼로그를 연 버튼으로 포커스를 돌려주세요.
101
+
102
+ ## 2. Tailwind
103
+
104
+ ```js
105
+ // tailwind.config.js
106
+ module.exports = {
107
+ presets: [require('gyeol/tailwind')],
108
+ };
109
+ ```
110
+
111
+ `gyeol.css`를 함께 불러와야 색이 정의돼요. 그다음 `bg-paper`, `text-ink-2`, `bg-accent`, `p-pun-4`, `rounded-r-3`, `font-display`, `gyeop gyeop-du`처럼 써요.
112
+
113
+ ## 3. 디자인 토큰 JSON (Figma, iOS, Android)
114
+
115
+ `tokens.json`은 [DTCG](https://tr.designtokens.org/format/) 형식이고, 색은 팔레트·테마별로 계산된 HEX 값이에요.
116
+
117
+ ```
118
+ gyeol.color.<팔레트>.<light|dark>.<역할> 예) gyeol.color.meok.dark.accent = #85aeff
119
+ gyeol.space.pun-4 = 16px
120
+ gyeol.radius.r-3 = 20px
121
+ gyeol.material.du.thickness = 0.72
122
+ ```
123
+
124
+ - **JS에서 바로**: `import tokens from 'gyeol'` 또는 `import tokens from 'gyeol/tokens.json'`
125
+ - **Figma**: Tokens Studio 플러그인에서 `tokens.json`을 불러오세요.
126
+ - **iOS / Android**: Style Dictionary로 `tokens.json`을 Swift, Kotlin, XML 리소스로 변환하세요.
127
+
128
+ HEX 값은 화면용 sRGB로 변환한 근사치예요. 웹에서는 `gyeol.css`의 oklch 원본을 쓰는 게 더 정확해요.
129
+
130
+ ## 패키지 경로
131
+
132
+ | 경로 | 내용 |
133
+ | --- | --- |
134
+ | `gyeol` | 토큰 객체와 `setPalette`, `setTheme`, `color` 함수 (ESM·CommonJS·TypeScript 타입 포함) |
135
+ | `gyeol/gyeol.css` (또는 `gyeol/css`) | 전체 CSS |
136
+ | `gyeol/tailwind` | Tailwind 프리셋 |
137
+ | `gyeol/tokens.json` | DTCG 토큰 원본 |
138
+
139
+ ## 라이선스
140
+
141
+ MIT
package/gyeol.css CHANGED
@@ -6,7 +6,7 @@
6
6
  * data-theme: dark | light | system (기본 dark)
7
7
  * 화면 일부만 다른 팔레트·테마로: <section data-palette="yeonji" data-theme="light"> (0.1.2+)
8
8
  * 모든 컴포넌트 클래스는 gy- 접두사를 써서 다른 CSS와 충돌하지 않아요.
9
- * 글꼴: 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
9
+ * 글꼴: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap
10
10
  */
11
11
 
12
12
  /* ---------- tokens ---------- */
@@ -74,8 +74,8 @@
74
74
  [data-palette="chija"] {--h:70;--c:0.14;--ah:70;--ac:0.14;--ad:0%}
75
75
  [data-palette="hwangto"] {--h:48;--c:.065;--ah:48;--ac:.065;--ad:0%}
76
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%}
77
+ [data-palette="haneul"] {--h:235;--c:.14;--ah:235;--ac:.14;--ad:-5%}
78
+ [data-palette="odi"] {--h:300;--c:.15;--ah:300;--ac:.15;--ad:-5%}
79
79
  /* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
80
80
  :where([data-palette], [data-theme]):not(:root){color:var(--ink)}
81
81
 
@@ -148,4 +148,11 @@
148
148
  .gy-toast{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14.5px}
149
149
  .gy-tooltip{font-size:13px;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg)}
150
150
 
151
+ /* ---------- 터치 화면: 누르는 곳은 40px 이상 (0.1.7+) ---------- */
152
+ @media (pointer:coarse){
153
+ .gy-btn--sm,.gy-chip,.gy-seg button{min-height:40px}
154
+ .gy-check{min-height:40px}
155
+ .gy-switch::before{content:"";position:absolute;inset:-6px -4px}
156
+ }
157
+
151
158
  @media (prefers-reduced-motion: reduce){.gy *,.gy *::before,.gy *::after{transition:none!important;animation:none!important}}
package/index.mjs CHANGED
@@ -1079,39 +1079,39 @@ const tokens = {
1079
1079
  "light": {
1080
1080
  "bg": {
1081
1081
  "$type": "color",
1082
- "$value": "#ebf5fb"
1082
+ "$value": "#e9f6fd"
1083
1083
  },
1084
1084
  "bg-2": {
1085
1085
  "$type": "color",
1086
- "$value": "#d8e9f4"
1086
+ "$value": "#d3eaf8"
1087
1087
  },
1088
1088
  "ink": {
1089
1089
  "$type": "color",
1090
- "$value": "#08202c"
1090
+ "$value": "#002030"
1091
1091
  },
1092
1092
  "ink-2": {
1093
1093
  "$type": "color",
1094
- "$value": "#41535d"
1094
+ "$value": "#3d5360"
1095
1095
  },
1096
1096
  "ink-3": {
1097
1097
  "$type": "color",
1098
- "$value": "#59656d"
1098
+ "$value": "#566670"
1099
1099
  },
1100
1100
  "line": {
1101
1101
  "$type": "color",
1102
- "$value": "#bccdd8"
1102
+ "$value": "#b8cedc"
1103
1103
  },
1104
1104
  "paper": {
1105
1105
  "$type": "color",
1106
- "$value": "#f9fdff"
1106
+ "$value": "#f8fdff"
1107
1107
  },
1108
1108
  "accent": {
1109
1109
  "$type": "color",
1110
- "$value": "#006995"
1110
+ "$value": "#005b93"
1111
1111
  },
1112
1112
  "accent-soft": {
1113
1113
  "$type": "color",
1114
- "$value": "#bfe4fb"
1114
+ "$value": "#b6e6ff"
1115
1115
  },
1116
1116
  "on-accent": {
1117
1117
  "$type": "color",
@@ -1119,7 +1119,7 @@ const tokens = {
1119
1119
  },
1120
1120
  "stain": {
1121
1121
  "$type": "color",
1122
- "$value": "#d1a8ff"
1122
+ "$value": "#d5a2ff"
1123
1123
  },
1124
1124
  "ok": {
1125
1125
  "$type": "color",
@@ -1137,39 +1137,39 @@ const tokens = {
1137
1137
  "dark": {
1138
1138
  "bg": {
1139
1139
  "$type": "color",
1140
- "$value": "#051118"
1140
+ "$value": "#02111b"
1141
1141
  },
1142
1142
  "bg-2": {
1143
1143
  "$type": "color",
1144
- "$value": "#071b25"
1144
+ "$value": "#021b29"
1145
1145
  },
1146
1146
  "ink": {
1147
1147
  "$type": "color",
1148
- "$value": "#e9f0f4"
1148
+ "$value": "#e8f0f5"
1149
1149
  },
1150
1150
  "ink-2": {
1151
1151
  "$type": "color",
1152
- "$value": "#b1bdc4"
1152
+ "$value": "#aebdc6"
1153
1153
  },
1154
1154
  "ink-3": {
1155
1155
  "$type": "color",
1156
- "$value": "#95a0a7"
1156
+ "$value": "#92a1aa"
1157
1157
  },
1158
1158
  "line": {
1159
1159
  "$type": "color",
1160
- "$value": "#283842"
1160
+ "$value": "#233845"
1161
1161
  },
1162
1162
  "paper": {
1163
1163
  "$type": "color",
1164
- "$value": "#1e2e37"
1164
+ "$value": "#192e3a"
1165
1165
  },
1166
1166
  "accent": {
1167
1167
  "$type": "color",
1168
- "$value": "#64bced"
1168
+ "$value": "#29aeec"
1169
1169
  },
1170
1170
  "accent-soft": {
1171
1171
  "$type": "color",
1172
- "$value": "#0e3a50"
1172
+ "$value": "#003b57"
1173
1173
  },
1174
1174
  "on-accent": {
1175
1175
  "$type": "color",
@@ -1177,7 +1177,7 @@ const tokens = {
1177
1177
  },
1178
1178
  "stain": {
1179
1179
  "$type": "color",
1180
- "$value": "#6f4797"
1180
+ "$value": "#7340a3"
1181
1181
  },
1182
1182
  "ok": {
1183
1183
  "$type": "color",
@@ -1198,39 +1198,39 @@ const tokens = {
1198
1198
  "light": {
1199
1199
  "bg": {
1200
1200
  "$type": "color",
1201
- "$value": "#f5f1fc"
1201
+ "$value": "#f5f1fe"
1202
1202
  },
1203
1203
  "bg-2": {
1204
1204
  "$type": "color",
1205
- "$value": "#e9e3f6"
1205
+ "$value": "#e9e2fa"
1206
1206
  },
1207
1207
  "ink": {
1208
1208
  "$type": "color",
1209
- "$value": "#20182e"
1209
+ "$value": "#211632"
1210
1210
  },
1211
1211
  "ink-2": {
1212
1212
  "$type": "color",
1213
- "$value": "#524c5e"
1213
+ "$value": "#534b62"
1214
1214
  },
1215
1215
  "ink-3": {
1216
1216
  "$type": "color",
1217
- "$value": "#65616e"
1217
+ "$value": "#656071"
1218
1218
  },
1219
1219
  "line": {
1220
1220
  "$type": "color",
1221
- "$value": "#cdc7da"
1221
+ "$value": "#cdc6dd"
1222
1222
  },
1223
1223
  "paper": {
1224
1224
  "$type": "color",
1225
- "$value": "#fdfcff"
1225
+ "$value": "#fdfbff"
1226
1226
  },
1227
1227
  "accent": {
1228
1228
  "$type": "color",
1229
- "$value": "#6b4e9a"
1229
+ "$value": "#613897"
1230
1230
  },
1231
1231
  "accent-soft": {
1232
1232
  "$type": "color",
1233
- "$value": "#e3d7fd"
1233
+ "$value": "#e4d5ff"
1234
1234
  },
1235
1235
  "on-accent": {
1236
1236
  "$type": "color",
@@ -1238,7 +1238,7 @@ const tokens = {
1238
1238
  },
1239
1239
  "stain": {
1240
1240
  "$type": "color",
1241
- "$value": "#ff96a9"
1241
+ "$value": "#ff8ca5"
1242
1242
  },
1243
1243
  "ok": {
1244
1244
  "$type": "color",
@@ -1256,39 +1256,39 @@ const tokens = {
1256
1256
  "dark": {
1257
1257
  "bg": {
1258
1258
  "$type": "color",
1259
- "$value": "#110d19"
1259
+ "$value": "#120c1c"
1260
1260
  },
1261
1261
  "bg-2": {
1262
1262
  "$type": "color",
1263
- "$value": "#1b1426"
1263
+ "$value": "#1c132a"
1264
1264
  },
1265
1265
  "ink": {
1266
1266
  "$type": "color",
1267
- "$value": "#efedf4"
1267
+ "$value": "#efedf6"
1268
1268
  },
1269
1269
  "ink-2": {
1270
1270
  "$type": "color",
1271
- "$value": "#bcb8c5"
1271
+ "$value": "#bcb8c7"
1272
1272
  },
1273
1273
  "ink-3": {
1274
1274
  "$type": "color",
1275
- "$value": "#a09ca8"
1275
+ "$value": "#a09cab"
1276
1276
  },
1277
1277
  "line": {
1278
1278
  "$type": "color",
1279
- "$value": "#383243"
1279
+ "$value": "#383146"
1280
1280
  },
1281
1281
  "paper": {
1282
1282
  "$type": "color",
1283
- "$value": "#2d2838"
1283
+ "$value": "#2e273b"
1284
1284
  },
1285
1285
  "accent": {
1286
1286
  "$type": "color",
1287
- "$value": "#bd9ff2"
1287
+ "$value": "#b08af0"
1288
1288
  },
1289
1289
  "accent-soft": {
1290
1290
  "$type": "color",
1291
- "$value": "#3b2d52"
1291
+ "$value": "#3c2a59"
1292
1292
  },
1293
1293
  "on-accent": {
1294
1294
  "$type": "color",
@@ -1296,7 +1296,7 @@ const tokens = {
1296
1296
  },
1297
1297
  "stain": {
1298
1298
  "$type": "color",
1299
- "$value": "#9b344c"
1299
+ "$value": "#a52348"
1300
1300
  },
1301
1301
  "ok": {
1302
1302
  "$type": "color",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gyeol",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "결 gyeol — 한지를 겹겹이 올리는 디자인 시스템. CSS, Tailwind preset, DTCG design tokens.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens.json CHANGED
@@ -1078,39 +1078,39 @@
1078
1078
  "light": {
1079
1079
  "bg": {
1080
1080
  "$type": "color",
1081
- "$value": "#ebf5fb"
1081
+ "$value": "#e9f6fd"
1082
1082
  },
1083
1083
  "bg-2": {
1084
1084
  "$type": "color",
1085
- "$value": "#d8e9f4"
1085
+ "$value": "#d3eaf8"
1086
1086
  },
1087
1087
  "ink": {
1088
1088
  "$type": "color",
1089
- "$value": "#08202c"
1089
+ "$value": "#002030"
1090
1090
  },
1091
1091
  "ink-2": {
1092
1092
  "$type": "color",
1093
- "$value": "#41535d"
1093
+ "$value": "#3d5360"
1094
1094
  },
1095
1095
  "ink-3": {
1096
1096
  "$type": "color",
1097
- "$value": "#59656d"
1097
+ "$value": "#566670"
1098
1098
  },
1099
1099
  "line": {
1100
1100
  "$type": "color",
1101
- "$value": "#bccdd8"
1101
+ "$value": "#b8cedc"
1102
1102
  },
1103
1103
  "paper": {
1104
1104
  "$type": "color",
1105
- "$value": "#f9fdff"
1105
+ "$value": "#f8fdff"
1106
1106
  },
1107
1107
  "accent": {
1108
1108
  "$type": "color",
1109
- "$value": "#006995"
1109
+ "$value": "#005b93"
1110
1110
  },
1111
1111
  "accent-soft": {
1112
1112
  "$type": "color",
1113
- "$value": "#bfe4fb"
1113
+ "$value": "#b6e6ff"
1114
1114
  },
1115
1115
  "on-accent": {
1116
1116
  "$type": "color",
@@ -1118,7 +1118,7 @@
1118
1118
  },
1119
1119
  "stain": {
1120
1120
  "$type": "color",
1121
- "$value": "#d1a8ff"
1121
+ "$value": "#d5a2ff"
1122
1122
  },
1123
1123
  "ok": {
1124
1124
  "$type": "color",
@@ -1136,39 +1136,39 @@
1136
1136
  "dark": {
1137
1137
  "bg": {
1138
1138
  "$type": "color",
1139
- "$value": "#051118"
1139
+ "$value": "#02111b"
1140
1140
  },
1141
1141
  "bg-2": {
1142
1142
  "$type": "color",
1143
- "$value": "#071b25"
1143
+ "$value": "#021b29"
1144
1144
  },
1145
1145
  "ink": {
1146
1146
  "$type": "color",
1147
- "$value": "#e9f0f4"
1147
+ "$value": "#e8f0f5"
1148
1148
  },
1149
1149
  "ink-2": {
1150
1150
  "$type": "color",
1151
- "$value": "#b1bdc4"
1151
+ "$value": "#aebdc6"
1152
1152
  },
1153
1153
  "ink-3": {
1154
1154
  "$type": "color",
1155
- "$value": "#95a0a7"
1155
+ "$value": "#92a1aa"
1156
1156
  },
1157
1157
  "line": {
1158
1158
  "$type": "color",
1159
- "$value": "#283842"
1159
+ "$value": "#233845"
1160
1160
  },
1161
1161
  "paper": {
1162
1162
  "$type": "color",
1163
- "$value": "#1e2e37"
1163
+ "$value": "#192e3a"
1164
1164
  },
1165
1165
  "accent": {
1166
1166
  "$type": "color",
1167
- "$value": "#64bced"
1167
+ "$value": "#29aeec"
1168
1168
  },
1169
1169
  "accent-soft": {
1170
1170
  "$type": "color",
1171
- "$value": "#0e3a50"
1171
+ "$value": "#003b57"
1172
1172
  },
1173
1173
  "on-accent": {
1174
1174
  "$type": "color",
@@ -1176,7 +1176,7 @@
1176
1176
  },
1177
1177
  "stain": {
1178
1178
  "$type": "color",
1179
- "$value": "#6f4797"
1179
+ "$value": "#7340a3"
1180
1180
  },
1181
1181
  "ok": {
1182
1182
  "$type": "color",
@@ -1197,39 +1197,39 @@
1197
1197
  "light": {
1198
1198
  "bg": {
1199
1199
  "$type": "color",
1200
- "$value": "#f5f1fc"
1200
+ "$value": "#f5f1fe"
1201
1201
  },
1202
1202
  "bg-2": {
1203
1203
  "$type": "color",
1204
- "$value": "#e9e3f6"
1204
+ "$value": "#e9e2fa"
1205
1205
  },
1206
1206
  "ink": {
1207
1207
  "$type": "color",
1208
- "$value": "#20182e"
1208
+ "$value": "#211632"
1209
1209
  },
1210
1210
  "ink-2": {
1211
1211
  "$type": "color",
1212
- "$value": "#524c5e"
1212
+ "$value": "#534b62"
1213
1213
  },
1214
1214
  "ink-3": {
1215
1215
  "$type": "color",
1216
- "$value": "#65616e"
1216
+ "$value": "#656071"
1217
1217
  },
1218
1218
  "line": {
1219
1219
  "$type": "color",
1220
- "$value": "#cdc7da"
1220
+ "$value": "#cdc6dd"
1221
1221
  },
1222
1222
  "paper": {
1223
1223
  "$type": "color",
1224
- "$value": "#fdfcff"
1224
+ "$value": "#fdfbff"
1225
1225
  },
1226
1226
  "accent": {
1227
1227
  "$type": "color",
1228
- "$value": "#6b4e9a"
1228
+ "$value": "#613897"
1229
1229
  },
1230
1230
  "accent-soft": {
1231
1231
  "$type": "color",
1232
- "$value": "#e3d7fd"
1232
+ "$value": "#e4d5ff"
1233
1233
  },
1234
1234
  "on-accent": {
1235
1235
  "$type": "color",
@@ -1237,7 +1237,7 @@
1237
1237
  },
1238
1238
  "stain": {
1239
1239
  "$type": "color",
1240
- "$value": "#ff96a9"
1240
+ "$value": "#ff8ca5"
1241
1241
  },
1242
1242
  "ok": {
1243
1243
  "$type": "color",
@@ -1255,39 +1255,39 @@
1255
1255
  "dark": {
1256
1256
  "bg": {
1257
1257
  "$type": "color",
1258
- "$value": "#110d19"
1258
+ "$value": "#120c1c"
1259
1259
  },
1260
1260
  "bg-2": {
1261
1261
  "$type": "color",
1262
- "$value": "#1b1426"
1262
+ "$value": "#1c132a"
1263
1263
  },
1264
1264
  "ink": {
1265
1265
  "$type": "color",
1266
- "$value": "#efedf4"
1266
+ "$value": "#efedf6"
1267
1267
  },
1268
1268
  "ink-2": {
1269
1269
  "$type": "color",
1270
- "$value": "#bcb8c5"
1270
+ "$value": "#bcb8c7"
1271
1271
  },
1272
1272
  "ink-3": {
1273
1273
  "$type": "color",
1274
- "$value": "#a09ca8"
1274
+ "$value": "#a09cab"
1275
1275
  },
1276
1276
  "line": {
1277
1277
  "$type": "color",
1278
- "$value": "#383243"
1278
+ "$value": "#383146"
1279
1279
  },
1280
1280
  "paper": {
1281
1281
  "$type": "color",
1282
- "$value": "#2d2838"
1282
+ "$value": "#2e273b"
1283
1283
  },
1284
1284
  "accent": {
1285
1285
  "$type": "color",
1286
- "$value": "#bd9ff2"
1286
+ "$value": "#b08af0"
1287
1287
  },
1288
1288
  "accent-soft": {
1289
1289
  "$type": "color",
1290
- "$value": "#3b2d52"
1290
+ "$value": "#3c2a59"
1291
1291
  },
1292
1292
  "on-accent": {
1293
1293
  "$type": "color",
@@ -1295,7 +1295,7 @@
1295
1295
  },
1296
1296
  "stain": {
1297
1297
  "$type": "color",
1298
- "$value": "#9b344c"
1298
+ "$value": "#a52348"
1299
1299
  },
1300
1300
  "ok": {
1301
1301
  "$type": "color",