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