gyeol 0.1.2 → 0.1.3

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 (7) hide show
  1. package/README.md +14 -5
  2. package/gyeol.css +7 -1
  3. package/index.cjs +22 -22
  4. package/index.d.ts +31 -29
  5. package/index.mjs +618 -23
  6. package/package.json +1 -1
  7. package/tokens.json +595 -0
package/README.md CHANGED
@@ -18,8 +18,8 @@ npm install gyeol
18
18
 
19
19
  ```html
20
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.1/gyeol.css">
22
- <!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.1/gyeol.css"> -->
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
23
 
24
24
  <html data-palette="meok" data-theme="dark">
25
25
  <body class="gy">
@@ -34,8 +34,8 @@ CDN은 jsDelivr와 unpkg 중 하나를 쓰면 돼요. 버전을 빼고 `gyeol/gy
34
34
 
35
35
  | CDN | 주소 |
36
36
  | --- | --- |
37
- | jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.1/gyeol.css` |
38
- | unpkg | `https://unpkg.com/gyeol@0.1.1/gyeol.css` |
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
39
 
40
40
  번들러(Vite, Next.js 등)를 쓰면 CSS를 이렇게 불러와요.
41
41
 
@@ -48,7 +48,16 @@ setTheme('light');
48
48
  color('meok', 'dark', 'accent'); // '#85aeff'
49
49
  ```
50
50
 
51
- - `data-palette`: `meok`(기본) · `jjok` · `cheongja` · `songhwa` · `yeonji` · `jaju`
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` | | |
52
61
  - `data-theme`: `dark`(기본) · `light` · `system`
53
62
  - 컴포넌트 클래스는 모두 `gy-` 접두사를 써서 기존 CSS와 겹치지 않아요.
54
63
  - 화면 일부만 다른 팔레트나 테마로 바꿀 수 있어요(0.1.2부터). 그 범위 안의 색과 글자색이 모두 다시 계산돼요.
package/gyeol.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /*!
2
2
  * 결 gyeol — layered-paper design system
3
3
  * 사용법: <html data-palette="meok" data-theme="dark">
4
- * data-palette: meok | jjok | cheongja | songhwa | yeonji | jaju (기본 meok)
4
+ * data-palette: meok | jjok | cheongja | songhwa | yeonji | jaju |
5
+ * chija | hwangto | oksaek | haneul | odi (기본 meok)
5
6
  * data-theme: dark | light | system (기본 dark)
6
7
  * 화면 일부만 다른 팔레트·테마로: <section data-palette="yeonji" data-theme="light"> (0.1.2+)
7
8
  * 모든 컴포넌트 클래스는 gy- 접두사를 써서 다른 CSS와 충돌하지 않아요.
@@ -70,6 +71,11 @@
70
71
  [data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12}
71
72
  [data-palette="yeonji"] {--h:16; --c:.16; --ah:16; --ac:.16}
72
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}
73
79
  /* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
74
80
  :where([data-palette], [data-theme]):not(:root){color:var(--ink)}
75
81
 
package/index.cjs CHANGED
@@ -1,22 +1,22 @@
1
- // 결 gyeol — CommonJS entry
2
- const tokens = require("./tokens.json");
3
-
4
- const palettes = ["meok", "jjok", "cheongja", "songhwa", "yeonji", "jaju"];
5
- const themes = ["dark", "light", "system"];
6
-
7
- /** <html data-palette> 값을 바꿔요. */
8
- function setPalette(palette, el = document.documentElement) {
9
- el.setAttribute("data-palette", palette);
10
- }
11
-
12
- /** <html data-theme> 값을 바꿔요. */
13
- function setTheme(theme, el = document.documentElement) {
14
- el.setAttribute("data-theme", theme);
15
- }
16
-
17
- /** 팔레트·테마·역할로 HEX 색을 돌려줘요. 예) color("meok", "dark", "accent") */
18
- function color(palette, theme, role) {
19
- return tokens.gyeol.color[palette][theme][role].$value;
20
- }
21
-
22
- module.exports = { tokens, palettes, themes, setPalette, setTheme, color, default: tokens };
1
+ // 결 gyeol — CommonJS entry
2
+ const tokens = require("./tokens.json");
3
+
4
+ const palettes = ["meok", "jjok", "cheongja", "songhwa", "yeonji", "jaju", "chija", "hwangto", "oksaek", "haneul", "odi"];
5
+ const themes = ["dark", "light", "system"];
6
+
7
+ /** <html data-palette> 값을 바꿔요. */
8
+ function setPalette(palette, el = document.documentElement) {
9
+ el.setAttribute("data-palette", palette);
10
+ }
11
+
12
+ /** <html data-theme> 값을 바꿔요. */
13
+ function setTheme(theme, el = document.documentElement) {
14
+ el.setAttribute("data-theme", theme);
15
+ }
16
+
17
+ /** 팔레트·테마·역할로 HEX 색을 돌려줘요. 예) color("meok", "dark", "accent") */
18
+ function color(palette, theme, role) {
19
+ return tokens.gyeol.color[palette][theme][role].$value;
20
+ }
21
+
22
+ module.exports = { tokens, palettes, themes, setPalette, setTheme, color, default: tokens };
package/index.d.ts CHANGED
@@ -1,29 +1,31 @@
1
- export type Palette = "meok" | "jjok" | "cheongja" | "songhwa" | "yeonji" | "jaju";
2
- export type Theme = "dark" | "light" | "system";
3
- export type ColorMode = "light" | "dark";
4
- export type ColorRole =
5
- | "bg" | "bg-2" | "ink" | "ink-2" | "ink-3" | "line" | "paper"
6
- | "accent" | "accent-soft" | "on-accent" | "stain" | "ok" | "warn" | "err";
7
-
8
- interface Token<T> { $type: string; $value: T; $description?: string }
9
-
10
- export interface GyeolTokens {
11
- gyeol: {
12
- color: Record<Palette, { $description: string } & Record<ColorMode, Record<ColorRole, Token<string>>>>;
13
- font: Record<"display" | "body" | "mono", Token<string[]>>;
14
- type: Record<"display" | "h1" | "h2" | "h3" | "body" | "label", Token<{ fontFamily: string; fontSize: string; fontWeight: number; lineHeight: number }>>;
15
- space: Record<"pun-1" | "pun-2" | "pun-3" | "pun-4" | "pun-6" | "pun-8" | "pun-12" | "pun-16", Token<string>>;
16
- radius: Record<"r-1" | "r-2" | "r-3" | "r-4" | "pill", Token<string>>;
17
- duration: Record<"t-1" | "t-2" | "t-3", Token<string>>;
18
- easing: { bleed: Token<[number, number, number, number]> };
19
- material: Record<"hol" | "du" | "se", { thickness: Token<number>; blur: Token<string> }>;
20
- };
21
- }
22
-
23
- export declare const tokens: GyeolTokens;
24
- export declare const palettes: Palette[];
25
- export declare const themes: Theme[];
26
- export declare function setPalette(palette: Palette, el?: HTMLElement): void;
27
- export declare function setTheme(theme: Theme, el?: HTMLElement): void;
28
- export declare function color(palette: Palette, theme: ColorMode, role: ColorRole): string;
29
- export default tokens;
1
+ export type Palette =
2
+ | "meok" | "jjok" | "cheongja" | "songhwa" | "yeonji" | "jaju"
3
+ | "chija" | "hwangto" | "oksaek" | "haneul" | "odi";
4
+ export type Theme = "dark" | "light" | "system";
5
+ export type ColorMode = "light" | "dark";
6
+ export type ColorRole =
7
+ | "bg" | "bg-2" | "ink" | "ink-2" | "ink-3" | "line" | "paper"
8
+ | "accent" | "accent-soft" | "on-accent" | "stain" | "ok" | "warn" | "err";
9
+
10
+ interface Token<T> { $type: string; $value: T; $description?: string }
11
+
12
+ export interface GyeolTokens {
13
+ gyeol: {
14
+ color: Record<Palette, { $description: string } & Record<ColorMode, Record<ColorRole, Token<string>>>>;
15
+ font: Record<"display" | "body" | "mono", Token<string[]>>;
16
+ type: Record<"display" | "h1" | "h2" | "h3" | "body" | "label", Token<{ fontFamily: string; fontSize: string; fontWeight: number; lineHeight: number }>>;
17
+ space: Record<"pun-1" | "pun-2" | "pun-3" | "pun-4" | "pun-6" | "pun-8" | "pun-12" | "pun-16", Token<string>>;
18
+ radius: Record<"r-1" | "r-2" | "r-3" | "r-4" | "pill", Token<string>>;
19
+ duration: Record<"t-1" | "t-2" | "t-3", Token<string>>;
20
+ easing: { bleed: Token<[number, number, number, number]> };
21
+ material: Record<"hol" | "du" | "se", { thickness: Token<number>; blur: Token<string> }>;
22
+ };
23
+ }
24
+
25
+ export declare const tokens: GyeolTokens;
26
+ export declare const palettes: Palette[];
27
+ export declare const themes: Theme[];
28
+ export declare function setPalette(palette: Palette, el?: HTMLElement): void;
29
+ export declare function setTheme(theme: Theme, el?: HTMLElement): void;
30
+ export declare function color(palette: Palette, theme: ColorMode, role: ColorRole): string;
31
+ export default tokens;