@seed-design/tailwind4-theme 1.1.19 → 2.0.0

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 (2) hide show
  1. package/index.css +235 -30
  2. package/package.json +2 -1
package/index.css CHANGED
@@ -125,7 +125,6 @@
125
125
  --color-bg-layer-basement: var(--seed-color-bg-layer-basement);
126
126
  --color-bg-layer-default: var(--seed-color-bg-layer-default);
127
127
  --color-bg-layer-default-pressed: var(--seed-color-bg-layer-default-pressed);
128
- --color-bg-layer-fill: var(--seed-color-bg-layer-fill);
129
128
  --color-bg-layer-floating: var(--seed-color-bg-layer-floating);
130
129
  --color-bg-layer-floating-pressed: var(--seed-color-bg-layer-floating-pressed);
131
130
  --color-bg-magic-weak: var(--seed-color-bg-magic-weak);
@@ -146,6 +145,8 @@
146
145
  --color-bg-positive-weak-pressed: var(--seed-color-bg-positive-weak-pressed);
147
146
  --color-bg-transparent: var(--seed-color-bg-transparent);
148
147
  --color-bg-transparent-pressed: var(--seed-color-bg-transparent-pressed);
148
+ --color-bg-transparent-selected: var(--seed-color-bg-transparent-selected);
149
+ --color-bg-transparent-selected-pressed: var(--seed-color-bg-transparent-selected-pressed);
149
150
  --color-bg-warning-solid: var(--seed-color-bg-warning-solid);
150
151
  --color-bg-warning-solid-pressed: var(--seed-color-bg-warning-solid-pressed);
151
152
  --color-bg-warning-weak: var(--seed-color-bg-warning-weak);
@@ -154,6 +155,7 @@
154
155
  --color-stroke-brand-weak: var(--seed-color-stroke-brand-weak);
155
156
  --color-stroke-critical-solid: var(--seed-color-stroke-critical-solid);
156
157
  --color-stroke-critical-weak: var(--seed-color-stroke-critical-weak);
158
+ --color-stroke-focus-ring: var(--seed-color-stroke-focus-ring);
157
159
  --color-stroke-informative-solid: var(--seed-color-stroke-informative-solid);
158
160
  --color-stroke-informative-weak: var(--seed-color-stroke-informative-weak);
159
161
  --color-stroke-neutral-contrast: var(--seed-color-stroke-neutral-contrast);
@@ -165,7 +167,6 @@
165
167
  --color-stroke-positive-weak: var(--seed-color-stroke-positive-weak);
166
168
  --color-stroke-warning-solid: var(--seed-color-stroke-warning-solid);
167
169
  --color-stroke-warning-weak: var(--seed-color-stroke-warning-weak);
168
- --color-stroke-focus-ring: var(--seed-color-stroke-focus-ring);
169
170
  --color-manner-temp-l1-bg: var(--seed-color-manner-temp-l1-bg);
170
171
  --color-manner-temp-l1-text: var(--seed-color-manner-temp-l1-text);
171
172
  --color-manner-temp-l10-bg: var(--seed-color-manner-temp-l10-bg);
@@ -239,6 +240,10 @@
239
240
  --font-size-t8: var(--seed-font-size-t8);
240
241
  --font-size-t9: var(--seed-font-size-t9);
241
242
  --font-size-t10: var(--seed-font-size-t10);
243
+ --font-size-t11: var(--seed-font-size-t11);
244
+ --font-size-t12: var(--seed-font-size-t12);
245
+ --font-size-t13: var(--seed-font-size-t13);
246
+ --font-size-t14: var(--seed-font-size-t14);
242
247
  --font-size-t1-static: var(--seed-font-size-t1-static);
243
248
  --font-size-t2-static: var(--seed-font-size-t2-static);
244
249
  --font-size-t3-static: var(--seed-font-size-t3-static);
@@ -249,11 +254,13 @@
249
254
  --font-size-t8-static: var(--seed-font-size-t8-static);
250
255
  --font-size-t9-static: var(--seed-font-size-t9-static);
251
256
  --font-size-t10-static: var(--seed-font-size-t10-static);
257
+ --font-size-t11-static: var(--seed-font-size-t11-static);
258
+ --font-size-t12-static: var(--seed-font-size-t12-static);
259
+ --font-size-t13-static: var(--seed-font-size-t13-static);
260
+ --font-size-t14-static: var(--seed-font-size-t14-static);
252
261
  --font-weight-regular: var(--seed-font-weight-regular);
253
262
  --font-weight-medium: var(--seed-font-weight-medium);
254
263
  --font-weight-bold: var(--seed-font-weight-bold);
255
- --gradient-fade-layer-floating: var(--seed-gradient-fade-layer-floating);
256
- --gradient-fade-layer-default: var(--seed-gradient-fade-layer-default);
257
264
  --gradient-glow-magic: var(--seed-gradient-glow-magic);
258
265
  --gradient-glow-magic-pressed: var(--seed-gradient-glow-magic-pressed);
259
266
  --gradient-highlight-magic: var(--seed-gradient-highlight-magic);
@@ -270,6 +277,10 @@
270
277
  --line-height-t8: var(--seed-line-height-t8);
271
278
  --line-height-t9: var(--seed-line-height-t9);
272
279
  --line-height-t10: var(--seed-line-height-t10);
280
+ --line-height-t11: var(--seed-line-height-t11);
281
+ --line-height-t12: var(--seed-line-height-t12);
282
+ --line-height-t13: var(--seed-line-height-t13);
283
+ --line-height-t14: var(--seed-line-height-t14);
273
284
  --line-height-t1-static: var(--seed-line-height-t1-static);
274
285
  --line-height-t2-static: var(--seed-line-height-t2-static);
275
286
  --line-height-t3-static: var(--seed-line-height-t3-static);
@@ -280,6 +291,10 @@
280
291
  --line-height-t8-static: var(--seed-line-height-t8-static);
281
292
  --line-height-t9-static: var(--seed-line-height-t9-static);
282
293
  --line-height-t10-static: var(--seed-line-height-t10-static);
294
+ --line-height-t11-static: var(--seed-line-height-t11-static);
295
+ --line-height-t12-static: var(--seed-line-height-t12-static);
296
+ --line-height-t13-static: var(--seed-line-height-t13-static);
297
+ --line-height-t14-static: var(--seed-line-height-t14-static);
283
298
  --radius-r0_5: var(--seed-radius-r0_5);
284
299
  --radius-r1: var(--seed-radius-r1);
285
300
  --radius-r1_5: var(--seed-radius-r1_5);
@@ -301,30 +316,12 @@
301
316
  --timing-function-enter-expressive: var(--seed-timing-function-enter-expressive);
302
317
  --timing-function-exit-expressive: var(--seed-timing-function-exit-expressive);
303
318
  --timing-function-pressed-scale: var(--seed-timing-function-pressed-scale);
304
- --gradient-stops-fade-layer-floating: #ffffff00 0.00%, #000000 100.00%;
305
- --gradient-stops-fade-layer-default: #000000 0.00%, #ffffff00 100.00%;
306
319
  --gradient-stops-glow-magic: #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%;
307
320
  --gradient-stops-glow-magic-pressed: #fbf0f2 0.00%, #ffe8db 80.00%, #f5f2ef 100.00%;
308
321
  --gradient-stops-highlight-magic: #ff6600 20.00%, #d25aca 100.00%;
309
322
  --gradient-stops-highlight-magic-pressed: #e14f00 20.00%, #ae58bf 100.00%;
310
323
  --gradient-stops-shimmer-magic: #fff9f500 0.00%, #fff9f5cc 46.00%, #fff9f5cc 54.00%, #fff9f500 100.00%;
311
324
  --gradient-stops-shimmer-neutral: #ffffff00 0.00%, #ffffffab 46.00%, #ffffffab 54.00%, #ffffff00 100.00%;
312
- --gradient-fade-layer-floating-to-t: linear-gradient(to top, #ffffff00 0.00%, #000000 100.00%);
313
- --gradient-fade-layer-floating-to-tr: linear-gradient(to top right, #ffffff00 0.00%, #000000 100.00%);
314
- --gradient-fade-layer-floating-to-r: linear-gradient(to right, #ffffff00 0.00%, #000000 100.00%);
315
- --gradient-fade-layer-floating-to-br: linear-gradient(to bottom right, #ffffff00 0.00%, #000000 100.00%);
316
- --gradient-fade-layer-floating-to-b: linear-gradient(to bottom, #ffffff00 0.00%, #000000 100.00%);
317
- --gradient-fade-layer-floating-to-bl: linear-gradient(to bottom left, #ffffff00 0.00%, #000000 100.00%);
318
- --gradient-fade-layer-floating-to-l: linear-gradient(to left, #ffffff00 0.00%, #000000 100.00%);
319
- --gradient-fade-layer-floating-to-tl: linear-gradient(to top left, #ffffff00 0.00%, #000000 100.00%);
320
- --gradient-fade-layer-default-to-t: linear-gradient(to top, #000000 0.00%, #ffffff00 100.00%);
321
- --gradient-fade-layer-default-to-tr: linear-gradient(to top right, #000000 0.00%, #ffffff00 100.00%);
322
- --gradient-fade-layer-default-to-r: linear-gradient(to right, #000000 0.00%, #ffffff00 100.00%);
323
- --gradient-fade-layer-default-to-br: linear-gradient(to bottom right, #000000 0.00%, #ffffff00 100.00%);
324
- --gradient-fade-layer-default-to-b: linear-gradient(to bottom, #000000 0.00%, #ffffff00 100.00%);
325
- --gradient-fade-layer-default-to-bl: linear-gradient(to bottom left, #000000 0.00%, #ffffff00 100.00%);
326
- --gradient-fade-layer-default-to-l: linear-gradient(to left, #000000 0.00%, #ffffff00 100.00%);
327
- --gradient-fade-layer-default-to-tl: linear-gradient(to top left, #000000 0.00%, #ffffff00 100.00%);
328
325
  --gradient-glow-magic-to-t: linear-gradient(to top, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
329
326
  --gradient-glow-magic-to-tr: linear-gradient(to top right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
330
327
  --gradient-glow-magic-to-r: linear-gradient(to right, #fef6f7 0.00%, #fef0e7 80.00%, #f9f7f5 100.00%);
@@ -519,24 +516,132 @@
519
516
  font-weight: var(--seed-font-weight-bold);
520
517
  }
521
518
 
519
+ @utility t8-regular {
520
+ font-size: var(--seed-font-size-t8);
521
+ line-height: var(--seed-line-height-t8);
522
+ font-weight: var(--seed-font-weight-regular);
523
+ }
524
+
525
+ @utility t8-medium {
526
+ font-size: var(--seed-font-size-t8);
527
+ line-height: var(--seed-line-height-t8);
528
+ font-weight: var(--seed-font-weight-medium);
529
+ }
530
+
522
531
  @utility t8-bold {
523
532
  font-size: var(--seed-font-size-t8);
524
533
  line-height: var(--seed-line-height-t8);
525
534
  font-weight: var(--seed-font-weight-bold);
526
535
  }
527
536
 
537
+ @utility t9-regular {
538
+ font-size: var(--seed-font-size-t9);
539
+ line-height: var(--seed-line-height-t9);
540
+ font-weight: var(--seed-font-weight-regular);
541
+ }
542
+
543
+ @utility t9-medium {
544
+ font-size: var(--seed-font-size-t9);
545
+ line-height: var(--seed-line-height-t9);
546
+ font-weight: var(--seed-font-weight-medium);
547
+ }
548
+
528
549
  @utility t9-bold {
529
550
  font-size: var(--seed-font-size-t9);
530
551
  line-height: var(--seed-line-height-t9);
531
552
  font-weight: var(--seed-font-weight-bold);
532
553
  }
533
554
 
555
+ @utility t10-regular {
556
+ font-size: var(--seed-font-size-t10);
557
+ line-height: var(--seed-line-height-t10);
558
+ font-weight: var(--seed-font-weight-regular);
559
+ }
560
+
561
+ @utility t10-medium {
562
+ font-size: var(--seed-font-size-t10);
563
+ line-height: var(--seed-line-height-t10);
564
+ font-weight: var(--seed-font-weight-medium);
565
+ }
566
+
534
567
  @utility t10-bold {
535
568
  font-size: var(--seed-font-size-t10);
536
569
  line-height: var(--seed-line-height-t10);
537
570
  font-weight: var(--seed-font-weight-bold);
538
571
  }
539
572
 
573
+ @utility t11-regular {
574
+ font-size: var(--seed-font-size-t11);
575
+ line-height: var(--seed-line-height-t11);
576
+ font-weight: var(--seed-font-weight-regular);
577
+ }
578
+
579
+ @utility t11-medium {
580
+ font-size: var(--seed-font-size-t11);
581
+ line-height: var(--seed-line-height-t11);
582
+ font-weight: var(--seed-font-weight-medium);
583
+ }
584
+
585
+ @utility t11-bold {
586
+ font-size: var(--seed-font-size-t11);
587
+ line-height: var(--seed-line-height-t11);
588
+ font-weight: var(--seed-font-weight-bold);
589
+ }
590
+
591
+ @utility t12-regular {
592
+ font-size: var(--seed-font-size-t12);
593
+ line-height: var(--seed-line-height-t12);
594
+ font-weight: var(--seed-font-weight-regular);
595
+ }
596
+
597
+ @utility t12-medium {
598
+ font-size: var(--seed-font-size-t12);
599
+ line-height: var(--seed-line-height-t12);
600
+ font-weight: var(--seed-font-weight-medium);
601
+ }
602
+
603
+ @utility t12-bold {
604
+ font-size: var(--seed-font-size-t12);
605
+ line-height: var(--seed-line-height-t12);
606
+ font-weight: var(--seed-font-weight-bold);
607
+ }
608
+
609
+ @utility t13-regular {
610
+ font-size: var(--seed-font-size-t13);
611
+ line-height: var(--seed-line-height-t13);
612
+ font-weight: var(--seed-font-weight-regular);
613
+ }
614
+
615
+ @utility t13-medium {
616
+ font-size: var(--seed-font-size-t13);
617
+ line-height: var(--seed-line-height-t13);
618
+ font-weight: var(--seed-font-weight-medium);
619
+ }
620
+
621
+ @utility t13-bold {
622
+ font-size: var(--seed-font-size-t13);
623
+ line-height: var(--seed-line-height-t13);
624
+ font-weight: var(--seed-font-weight-bold);
625
+ }
626
+
627
+ @utility t14-regular {
628
+ font-size: var(--seed-font-size-t14);
629
+ line-height: var(--seed-line-height-t14);
630
+ font-weight: var(--seed-font-weight-regular);
631
+ }
632
+
633
+ @utility t14-medium {
634
+ font-size: var(--seed-font-size-t14);
635
+ line-height: var(--seed-line-height-t14);
636
+ font-weight: var(--seed-font-weight-medium);
637
+ }
638
+
639
+ @utility t14-bold {
640
+ font-size: var(--seed-font-size-t14);
641
+ line-height: var(--seed-line-height-t14);
642
+ font-weight: var(--seed-font-weight-bold);
643
+ }
644
+
540
645
  @utility t1-static-regular {
541
646
  font-size: var(--seed-font-size-t1-static);
542
647
  line-height: var(--seed-line-height-t1-static);
@@ -663,24 +768,132 @@
663
768
  font-weight: var(--seed-font-weight-bold);
664
769
  }
665
770
 
771
+ @utility t8-static-regular {
772
+ font-size: var(--seed-font-size-t8-static);
773
+ line-height: var(--seed-line-height-t8-static);
774
+ font-weight: var(--seed-font-weight-regular);
775
+ }
776
+
777
+ @utility t8-static-medium {
778
+ font-size: var(--seed-font-size-t8-static);
779
+ line-height: var(--seed-line-height-t8-static);
780
+ font-weight: var(--seed-font-weight-medium);
781
+ }
782
+
666
783
  @utility t8-static-bold {
667
784
  font-size: var(--seed-font-size-t8-static);
668
785
  line-height: var(--seed-line-height-t8-static);
669
786
  font-weight: var(--seed-font-weight-bold);
670
787
  }
671
788
 
789
+ @utility t9-static-regular {
790
+ font-size: var(--seed-font-size-t9-static);
791
+ line-height: var(--seed-line-height-t9-static);
792
+ font-weight: var(--seed-font-weight-regular);
793
+ }
794
+
795
+ @utility t9-static-medium {
796
+ font-size: var(--seed-font-size-t9-static);
797
+ line-height: var(--seed-line-height-t9-static);
798
+ font-weight: var(--seed-font-weight-medium);
799
+ }
800
+
672
801
  @utility t9-static-bold {
673
802
  font-size: var(--seed-font-size-t9-static);
674
803
  line-height: var(--seed-line-height-t9-static);
675
804
  font-weight: var(--seed-font-weight-bold);
676
805
  }
677
806
 
807
+ @utility t10-static-regular {
808
+ font-size: var(--seed-font-size-t10-static);
809
+ line-height: var(--seed-line-height-t10-static);
810
+ font-weight: var(--seed-font-weight-regular);
811
+ }
812
+
813
+ @utility t10-static-medium {
814
+ font-size: var(--seed-font-size-t10-static);
815
+ line-height: var(--seed-line-height-t10-static);
816
+ font-weight: var(--seed-font-weight-medium);
817
+ }
818
+
678
819
  @utility t10-static-bold {
679
820
  font-size: var(--seed-font-size-t10-static);
680
821
  line-height: var(--seed-line-height-t10-static);
681
822
  font-weight: var(--seed-font-weight-bold);
682
823
  }
683
824
 
825
+ @utility t11-static-regular {
826
+ font-size: var(--seed-font-size-t11-static);
827
+ line-height: var(--seed-line-height-t11-static);
828
+ font-weight: var(--seed-font-weight-regular);
829
+ }
830
+
831
+ @utility t11-static-medium {
832
+ font-size: var(--seed-font-size-t11-static);
833
+ line-height: var(--seed-line-height-t11-static);
834
+ font-weight: var(--seed-font-weight-medium);
835
+ }
836
+
837
+ @utility t11-static-bold {
838
+ font-size: var(--seed-font-size-t11-static);
839
+ line-height: var(--seed-line-height-t11-static);
840
+ font-weight: var(--seed-font-weight-bold);
841
+ }
842
+
843
+ @utility t12-static-regular {
844
+ font-size: var(--seed-font-size-t12-static);
845
+ line-height: var(--seed-line-height-t12-static);
846
+ font-weight: var(--seed-font-weight-regular);
847
+ }
848
+
849
+ @utility t12-static-medium {
850
+ font-size: var(--seed-font-size-t12-static);
851
+ line-height: var(--seed-line-height-t12-static);
852
+ font-weight: var(--seed-font-weight-medium);
853
+ }
854
+
855
+ @utility t12-static-bold {
856
+ font-size: var(--seed-font-size-t12-static);
857
+ line-height: var(--seed-line-height-t12-static);
858
+ font-weight: var(--seed-font-weight-bold);
859
+ }
860
+
861
+ @utility t13-static-regular {
862
+ font-size: var(--seed-font-size-t13-static);
863
+ line-height: var(--seed-line-height-t13-static);
864
+ font-weight: var(--seed-font-weight-regular);
865
+ }
866
+
867
+ @utility t13-static-medium {
868
+ font-size: var(--seed-font-size-t13-static);
869
+ line-height: var(--seed-line-height-t13-static);
870
+ font-weight: var(--seed-font-weight-medium);
871
+ }
872
+
873
+ @utility t13-static-bold {
874
+ font-size: var(--seed-font-size-t13-static);
875
+ line-height: var(--seed-line-height-t13-static);
876
+ font-weight: var(--seed-font-weight-bold);
877
+ }
878
+
879
+ @utility t14-static-regular {
880
+ font-size: var(--seed-font-size-t14-static);
881
+ line-height: var(--seed-line-height-t14-static);
882
+ font-weight: var(--seed-font-weight-regular);
883
+ }
884
+
885
+ @utility t14-static-medium {
886
+ font-size: var(--seed-font-size-t14-static);
887
+ line-height: var(--seed-line-height-t14-static);
888
+ font-weight: var(--seed-font-weight-medium);
889
+ }
890
+
891
+ @utility t14-static-bold {
892
+ font-size: var(--seed-font-size-t14-static);
893
+ line-height: var(--seed-line-height-t14-static);
894
+ font-weight: var(--seed-font-weight-bold);
895
+ }
896
+
684
897
  @utility size-* {
685
898
  width: --value(--dimension-*);
686
899
  height: --value(--dimension-*);
@@ -794,14 +1007,6 @@
794
1007
  box-shadow: --value(--shadow-*);
795
1008
  }
796
1009
 
797
- @utility bg-gradient-fade-layer-floating-* {
798
- background-image: linear-gradient(--value([angle]), var(--gradient-stops-fade-layer-floating));
799
- }
800
-
801
- @utility bg-gradient-fade-layer-default-* {
802
- background-image: linear-gradient(--value([angle]), var(--gradient-stops-fade-layer-default));
803
- }
804
-
805
1010
  @utility bg-gradient-glow-magic-* {
806
1011
  background-image: linear-gradient(--value([angle]), var(--gradient-stops-glow-magic));
807
1012
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/tailwind4-theme",
3
- "version": "1.1.19",
3
+ "version": "2.0.0",
4
4
  "description": "SEED 디자인 토큰을 Tailwind CSS 4.0에서 사용하기 위한 플러그인",
5
5
  "main": "index.css",
6
6
  "repository": {
@@ -34,6 +34,7 @@
34
34
  "tailwindcss": "^4.1.4"
35
35
  },
36
36
  "peerDependencies": {
37
+ "@seed-design/css": "^2.0.0",
37
38
  "tailwindcss": "4"
38
39
  }
39
40
  }