@seed-design/tailwind4-theme 2.3.0 → 2.4.1

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 (3) hide show
  1. package/README.md +13 -6
  2. package/index.css +14 -0
  3. package/package.json +12 -3
package/README.md CHANGED
@@ -4,23 +4,30 @@ SEED 디자인 시스템의 디자인 토큰을 Tailwind CSS 4.0에서 사용할
4
4
 
5
5
  ## 설치
6
6
 
7
+ 웹에서는 `@seed-design/css`, Lynx에서는 `@seed-design/lynx-css`를 함께 설치하세요. 두 패키지는 optional peer이므로 패키지 매니저가 둘 중 하나의 설치를 강제하지 않습니다. 플랫폼에 맞는 패키지를 직접 설치하고 토큰 CSS를 import해야 합니다.
8
+
7
9
  ```bash
8
- npm install @seed-design/tailwind4-theme
10
+ # 웹
11
+ bun add @seed-design/tailwind4-theme @seed-design/css tailwindcss@4
12
+
13
+ # Lynx
14
+ bun add @seed-design/tailwind4-theme @seed-design/lynx-css tailwindcss@4
9
15
  ```
10
16
 
11
- 또는
17
+ 웹 CSS peer 범위는 `^2.7.0`입니다. 이 버전부터 theme이 참조하는 `--seed-gradient-fade-mask` 토큰을 제공합니다.
12
18
 
13
- ```bash
14
- yarn add @seed-design/tailwind4-theme
15
- ```
19
+ Lynx peer 범위는 토큰 제공을 확인한 `@seed-design/lynx-css@^0.11.0`입니다. 더 낮은 버전의 호환성을 의미하지는 않습니다.
20
+ Lynx의 전체 설정과 제한사항은 [Lynx Tailwind 가이드](https://seed-design.io/lynx/getting-started/styling/tailwind-css-4)를 참고하세요. 아래 예제는 웹 기준입니다.
16
21
 
17
22
  ## 사용 방법
18
23
 
19
24
  1. 프로젝트에 SEED 디자인 토큰 CSS 파일이 먼저 로드되어 있어야 합니다.
20
25
  ```js
21
26
  import '@seed-design/css/base.css';
22
- // or
27
+ // 또는 컴포넌트 스타일까지 포함
23
28
  import '@seed-design/css/all.css';
29
+ // Lynx에서는 위 웹 CSS 대신 사용
30
+ // import '@seed-design/lynx-css/base.css';
24
31
  ```
25
32
 
26
33
  2. CSS 파일에 Tailwind CSS와 SEED 디자인 토큰을 가져옵니다.
package/index.css CHANGED
@@ -262,6 +262,7 @@
262
262
  --font-weight-regular: var(--seed-font-weight-regular);
263
263
  --font-weight-medium: var(--seed-font-weight-medium);
264
264
  --font-weight-bold: var(--seed-font-weight-bold);
265
+ --gradient-fade-mask: var(--seed-gradient-fade-mask);
265
266
  --gradient-glow-magic: var(--seed-gradient-glow-magic);
266
267
  --gradient-glow-magic-pressed: var(--seed-gradient-glow-magic-pressed);
267
268
  --gradient-highlight-magic: var(--seed-gradient-highlight-magic);
@@ -320,12 +321,21 @@
320
321
  --timing-function-enter-expressive: var(--seed-timing-function-enter-expressive);
321
322
  --timing-function-exit-expressive: var(--seed-timing-function-exit-expressive);
322
323
  --timing-function-pressed-scale: var(--seed-timing-function-pressed-scale);
324
+ --gradient-stops-fade-mask: #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%;
323
325
  --gradient-stops-glow-magic: #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%;
324
326
  --gradient-stops-glow-magic-pressed: #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%;
325
327
  --gradient-stops-highlight-magic: #ff6600 20.00%, #d25aca 100.00%;
326
328
  --gradient-stops-highlight-magic-pressed: #e14f00 20.00%, #ae58bf 100.00%;
327
329
  --gradient-stops-shimmer-magic: #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%;
328
330
  --gradient-stops-shimmer-neutral: #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%;
331
+ --gradient-fade-mask-to-t: linear-gradient(to top, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
332
+ --gradient-fade-mask-to-tr: linear-gradient(to top right, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
333
+ --gradient-fade-mask-to-r: linear-gradient(to right, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
334
+ --gradient-fade-mask-to-br: linear-gradient(to bottom right, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
335
+ --gradient-fade-mask-to-b: linear-gradient(to bottom, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
336
+ --gradient-fade-mask-to-bl: linear-gradient(to bottom left, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
337
+ --gradient-fade-mask-to-l: linear-gradient(to left, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
338
+ --gradient-fade-mask-to-tl: linear-gradient(to top left, #00000000 0.00%, #00000003 8.00%, #00000005 16.00%, #0000000d 22.00%, #00000014 29.00%, #00000021 35.00%, #0000002e 41.00%, #00000040 47.00%, #00000052 53.00%, #00000066 59.00%, #0000007a 65.00%, #00000094 71.00%, #000000ab 78.00%, #000000c7 84.00%, #000000e3 92.00%, #000000ff 100.00%);
329
339
  --gradient-glow-magic-to-t: linear-gradient(to top, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
330
340
  --gradient-glow-magic-to-tr: linear-gradient(to top right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
331
341
  --gradient-glow-magic-to-r: linear-gradient(to right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
@@ -1011,6 +1021,10 @@
1011
1021
  box-shadow: --value(--shadow-*);
1012
1022
  }
1013
1023
 
1024
+ @utility bg-gradient-fade-mask-* {
1025
+ background-image: linear-gradient(--value([angle]), var(--gradient-stops-fade-mask));
1026
+ }
1027
+
1014
1028
  @utility bg-gradient-glow-magic-* {
1015
1029
  background-image: linear-gradient(--value([angle]), var(--gradient-stops-glow-magic));
1016
1030
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/tailwind4-theme",
3
- "version": "2.3.0",
3
+ "version": "2.4.1",
4
4
  "description": "SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인",
5
5
  "main": "index.css",
6
6
  "repository": {
@@ -36,7 +36,16 @@
36
36
  "tailwindcss": "^4.1.4"
37
37
  },
38
38
  "peerDependencies": {
39
- "@seed-design/css": "^2.2.0",
40
- "tailwindcss": "4"
39
+ "@seed-design/css": "^2.7.0",
40
+ "tailwindcss": "4",
41
+ "@seed-design/lynx-css": "^0.11.0"
42
+ },
43
+ "peerDependenciesMeta": {
44
+ "@seed-design/css": {
45
+ "optional": true
46
+ },
47
+ "@seed-design/lynx-css": {
48
+ "optional": true
49
+ }
41
50
  }
42
51
  }