pds-dev-kit-web 0.6.8 → 0.6.11

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.
package/README.md CHANGED
@@ -8,5 +8,5 @@ publ design system 프로젝트
8
8
 
9
9
  ## 참고 문서
10
10
 
11
- 해당 패키지 버전은 PDS 문서 1.1 버전을 따르고 있음
11
+ 해당 패키지 버전은 PDS 문서 1.2 버전을 따르고 있음
12
12
  [PDS 1.1 문서 링크](https://design.docs.publ.biz/pds-project/)
@@ -127,5 +127,7 @@
127
127
  "sys_border_white_opacity30": "white/opacity30",
128
128
  "sys_container_background_wt": "grey950",
129
129
  "sys_channeldesc_grey_03": "darkgrey400",
130
- "sys_channeldesc_border_grey_03": "darkgrey100"
130
+ "sys_channeldesc_border_grey_03": "darkgrey100",
131
+ "sys_gradient_base_01": "grey950",
132
+ "sys_gradient_base_01_opacity00": "grey950/opacity00"
131
133
  }
@@ -127,5 +127,7 @@
127
127
  "sys_border_white_opacity30": "white/opacity30",
128
128
  "sys_container_background_wt": "grey30",
129
129
  "sys_channeldesc_grey_03": "darkgrey400",
130
- "sys_channeldesc_border_grey_03": "darkgrey100"
130
+ "sys_channeldesc_border_grey_03": "darkgrey100",
131
+ "sys_gradient_base_01": "white",
132
+ "sys_gradient_base_01_opacity00": "white/opacity00"
131
133
  }
@@ -457,7 +457,7 @@
457
457
  "ui_channeldesc_grey_03": "sys_channeldesc_grey_03",
458
458
  "ui_channeldesc_border_grey_03": "sys_channeldesc_border_grey_03",
459
459
  "ui_cpnt_bottomsheet_border": "sys_border_line_01",
460
- "ui_cpnt_pg_gradient_01": "sys_component_base_white",
461
- "ui_cpnt_pg_gradient_02": "sys_component_base_white_opacity00",
462
- "ui_cpnt_userdesktopsidetab_base_area": "sys_component_base_white_opacity00"
460
+ "ui_cpnt_userdesktopsidetab_base_area": "sys_component_base_white_opacity00",
461
+ "ui_cpnt_pg_gradient_01": "sys_gradient_base_01",
462
+ "ui_cpnt_pg_gradient_02": "sys_gradient_base_01_opacity00"
463
463
  }
@@ -1,266 +1,4 @@
1
1
  declare const colorSet: {
2
- readonly PaletteColor_light: {
3
- sys_container_background_01: string;
4
- sys_container_background_02: string;
5
- sys_container_background_03: string;
6
- sys_background_dimmed: string;
7
- sys_text_grey_01: string;
8
- sys_text_grey_02: string;
9
- sys_text_grey_03: string;
10
- sys_text_white: string;
11
- sys_text_brand_primary: string;
12
- sys_text_error_01: string;
13
- sys_widget_grey_01: string;
14
- sys_widget_grey_02: string;
15
- sys_widget_grey_03: string;
16
- sys_widget_primary_01: string;
17
- sys_widget_error_01: string;
18
- sys_widget_warning_01: string;
19
- sys_widget_success_01: string;
20
- sys_widget_white: string;
21
- sys_border_area_01: string;
22
- sys_border_line_01: string;
23
- sys_border_line_02: string;
24
- sys_border_line_03: string;
25
- sys_border_line_04: string;
26
- sys_border_line_05: string;
27
- sys_component_base_01: string;
28
- sys_component_base_02: string;
29
- sys_component_base_03: string;
30
- sys_component_base_red: string;
31
- sys_component_base_white: string;
32
- sys_component_base_white_opacity00: string;
33
- sys_on_base_white_opacity00: string;
34
- sys_on_base_white_opacity30: string;
35
- sys_on_base_black_opacity20: string;
36
- usr_brand_primary: string;
37
- usr_brand_secondary: string;
38
- usr_brand_secondary_variant: string;
39
- usr_background: string;
40
- usr_surface: string;
41
- usr_border: string;
42
- usr_on_brand_primary: string;
43
- usr_on_brand_secondary: string;
44
- usr_on_background: string;
45
- usr_on_surface: string;
46
- sys_widget_status_active_01: string;
47
- sys_text_success_01: string;
48
- sys_widget_grey_04: string;
49
- sys_text_active: string;
50
- sys_component_base_blue: string;
51
- sys_on_base_black_opacity65: string;
52
- sys_component_base_04: string;
53
- sys_component_base_black: string;
54
- sys_component_base_black_opacity00: string;
55
- usr_text_brand_secondary_variant: string;
56
- usr_text_brand_primary: string;
57
- usr_text_brand_on_primary: string;
58
- sys_text_brand_secondary_variant: string;
59
- sys_component_base_navy: string;
60
- sys_widget_lightgreen: string;
61
- sys_border_line_06: string;
62
- sys_background_dimmed_20: string;
63
- sys_widget_pink: string;
64
- sys_widget_primary_opacity20: string;
65
- sys_widget_secondary_variant_01: string;
66
- usr_component_base_brand_primary_opacity10: string;
67
- sys_temp_grey_01: string;
68
- sys_temp_grey_02: string;
69
- sys_temp_grey_03: string;
70
- sys_temp_grey_04: string;
71
- sys_temp_grey_05: string;
72
- sys_temp_white: string;
73
- sys_temp_primary_01: string;
74
- sys_temp_secondary_01: string;
75
- sys_temp_red: string;
76
- sys_temp_white_opacity_00: string;
77
- sys_temp_dimmed: string;
78
- sys_temp_black: string;
79
- sys_temp_primary_02: string;
80
- sys_temp_primary_03: string;
81
- sys_temp_secondary_02: string;
82
- sys_temp_lightgreen_01: string;
83
- sys_text_grey_04: string;
84
- sys_papp_post_social_background: string;
85
- sys_papp_post_notice_background: string;
86
- sys_papp_post_free_background: string;
87
- sys_papp_vod_background: string;
88
- sys_papp_vodplus_background: string;
89
- sys_papp_live_background: string;
90
- sys_selcontrols_base_off_disabled: string;
91
- sys_selcontrols_base_on_disabled: string;
92
- sys_component_base_blue_opacity10: string;
93
- sys_component_base_05: string;
94
- sys_background_dimmed_65: string;
95
- sys_temp_grey_06: string;
96
- sys_on_base_white_opacity10: string;
97
- sys_on_base_black_opacity10: string;
98
- sys_component_base_05_opacity00: string;
99
- sys_papp_post_notice_link: string;
100
- sys_component_base_navy_light: string;
101
- sys_component_base_orange: string;
102
- sys_component_base_grey: string;
103
- sys_component_base_black_opacity80: string;
104
- sys_text_darkgrey_02: string;
105
- sys_border_line_darktheme_01: string;
106
- sys_border_line_darktheme_02: string;
107
- sys_component_base_darktheme_01: string;
108
- sys_component_base_darktheme_02: string;
109
- sys_component_base_darktheme_03: string;
110
- sys_text_grey_darktheme_01: string;
111
- sys_text_grey_darktheme_02: string;
112
- sys_text_grey_darktheme_03: string;
113
- sys_widget_grey_darktheme_01: string;
114
- sys_widget_grey_darktheme_02: string;
115
- sys_widget_grey_darktheme_03: string;
116
- sys_component_base_green: string;
117
- sys_text_error_darktheme_01: string;
118
- sys_border_line_darktheme_03: string;
119
- sys_border_line_darktheme_04: string;
120
- usr_widget_brand_primary_darktheme_01: string;
121
- usr_text_brand_primary_darktheme_01: string;
122
- sys_component_base_black_opacity50: string;
123
- sys_component_base_card: string;
124
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
125
- sys_widget_green_01: string;
126
- sys_component_base_black_opacity30: string;
127
- sys_area_background: string;
128
- sys_border_white_opacity30: string;
129
- sys_container_background_wt: string;
130
- sys_channeldesc_grey_03: string;
131
- sys_channeldesc_border_grey_03: string;
132
- };
133
- readonly PaletteColor_Dark: {
134
- sys_container_background_01: string;
135
- sys_container_background_02: string;
136
- sys_container_background_03: string;
137
- sys_background_dimmed: string;
138
- sys_text_grey_01: string;
139
- sys_text_grey_02: string;
140
- sys_text_grey_03: string;
141
- sys_text_white: string;
142
- sys_text_brand_primary: string;
143
- sys_text_error_01: string;
144
- sys_widget_grey_01: string;
145
- sys_widget_grey_02: string;
146
- sys_widget_grey_03: string;
147
- sys_widget_primary_01: string;
148
- sys_widget_error_01: string;
149
- sys_widget_warning_01: string;
150
- sys_widget_success_01: string;
151
- sys_widget_white: string;
152
- sys_border_area_01: string;
153
- sys_border_line_01: string;
154
- sys_border_line_02: string;
155
- sys_border_line_03: string;
156
- sys_border_line_04: string;
157
- sys_border_line_05: string;
158
- sys_component_base_01: string;
159
- sys_component_base_02: string;
160
- sys_component_base_03: string;
161
- sys_component_base_red: string;
162
- sys_component_base_white: string;
163
- sys_component_base_white_opacity00: string;
164
- sys_on_base_white_opacity00: string;
165
- sys_on_base_white_opacity30: string;
166
- sys_on_base_black_opacity20: string;
167
- usr_brand_primary: string;
168
- usr_brand_secondary: string;
169
- usr_brand_secondary_variant: string;
170
- usr_background: string;
171
- usr_surface: string;
172
- usr_border: string;
173
- usr_on_brand_primary: string;
174
- usr_on_brand_secondary: string;
175
- usr_on_background: string;
176
- usr_on_surface: string;
177
- sys_widget_status_active_01: string;
178
- sys_text_success_01: string;
179
- sys_widget_grey_04: string;
180
- sys_text_active: string;
181
- sys_component_base_blue: string;
182
- sys_on_base_black_opacity65: string;
183
- sys_component_base_04: string;
184
- sys_component_base_black: string;
185
- sys_component_base_black_opacity00: string;
186
- usr_text_brand_secondary_variant: string;
187
- usr_text_brand_primary: string;
188
- usr_text_brand_on_primary: string;
189
- sys_text_brand_secondary_variant: string;
190
- sys_component_base_navy: string;
191
- sys_widget_lightgreen: string;
192
- sys_border_line_06: string;
193
- sys_background_dimmed_20: string;
194
- sys_widget_pink: string;
195
- sys_widget_primary_opacity20: string;
196
- sys_widget_secondary_variant_01: string;
197
- usr_component_base_brand_primary_opacity10: string;
198
- sys_temp_grey_01: string;
199
- sys_temp_grey_02: string;
200
- sys_temp_grey_03: string;
201
- sys_temp_grey_04: string;
202
- sys_temp_grey_05: string;
203
- sys_temp_white: string;
204
- sys_temp_primary_01: string;
205
- sys_temp_secondary_01: string;
206
- sys_temp_red: string;
207
- sys_temp_white_opacity_00: string;
208
- sys_temp_dimmed: string;
209
- sys_temp_black: string;
210
- sys_temp_primary_02: string;
211
- sys_temp_primary_03: string;
212
- sys_temp_secondary_02: string;
213
- sys_temp_lightgreen_01: string;
214
- sys_text_grey_04: string;
215
- sys_papp_post_social_background: string;
216
- sys_papp_post_notice_background: string;
217
- sys_papp_post_free_background: string;
218
- sys_papp_vod_background: string;
219
- sys_papp_vodplus_background: string;
220
- sys_papp_live_background: string;
221
- sys_selcontrols_base_off_disabled: string;
222
- sys_selcontrols_base_on_disabled: string;
223
- sys_component_base_blue_opacity10: string;
224
- sys_component_base_05: string;
225
- sys_background_dimmed_65: string;
226
- sys_temp_grey_06: string;
227
- sys_on_base_white_opacity10: string;
228
- sys_on_base_black_opacity10: string;
229
- sys_component_base_05_opacity00: string;
230
- sys_papp_post_notice_link: string;
231
- sys_component_base_navy_light: string;
232
- sys_component_base_orange: string;
233
- sys_component_base_grey: string;
234
- sys_component_base_black_opacity80: string;
235
- sys_text_darkgrey_02: string;
236
- sys_border_line_darktheme_01: string;
237
- sys_border_line_darktheme_02: string;
238
- sys_component_base_darktheme_01: string;
239
- sys_component_base_darktheme_02: string;
240
- sys_component_base_darktheme_03: string;
241
- sys_text_grey_darktheme_01: string;
242
- sys_text_grey_darktheme_02: string;
243
- sys_text_grey_darktheme_03: string;
244
- sys_widget_grey_darktheme_01: string;
245
- sys_widget_grey_darktheme_02: string;
246
- sys_widget_grey_darktheme_03: string;
247
- sys_component_base_green: string;
248
- sys_text_error_darktheme_01: string;
249
- sys_border_line_darktheme_03: string;
250
- sys_border_line_darktheme_04: string;
251
- usr_widget_brand_primary_darktheme_01: string;
252
- usr_text_brand_primary_darktheme_01: string;
253
- sys_component_base_black_opacity50: string;
254
- sys_component_base_card: string;
255
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
256
- sys_widget_green_01: string;
257
- sys_component_base_black_opacity30: string;
258
- sys_area_background: string;
259
- sys_border_white_opacity30: string;
260
- sys_container_background_wt: string;
261
- sys_channeldesc_grey_03: string;
262
- sys_channeldesc_border_grey_03: string;
263
- };
264
2
  readonly UIColor: {
265
3
  ui_cpnt_button_fill_base_primary: string;
266
4
  ui_cpnt_button_fill_base_default: string;
@@ -720,65 +458,331 @@ declare const colorSet: {
720
458
  ui_channeldesc_grey_03: string;
721
459
  ui_channeldesc_border_grey_03: string;
722
460
  ui_cpnt_bottomsheet_border: string;
461
+ ui_cpnt_userdesktopsidetab_base_area: string;
723
462
  ui_cpnt_pg_gradient_01: string;
724
463
  ui_cpnt_pg_gradient_02: string;
725
- ui_cpnt_userdesktopsidetab_base_area: string;
726
464
  };
727
- readonly SemanticColor: {
728
- blue500: string;
729
- blue700: string;
730
- blue300: string;
731
- green700: string;
732
- green500: string;
733
- green300: string;
734
- red500: string;
735
- grey900: string;
736
- grey500: string;
737
- grey400: string;
738
- grey100: string;
739
- grey50: string;
740
- white: string;
741
- black: string;
742
- darkblue500: string;
743
- grey950: string;
744
- darkgrey900: string;
745
- darkgrey500: string;
746
- darkgrey400: string;
747
- darkgrey100: string;
748
- darkgrey50: string;
749
- darkred500: string;
750
- darkgreen700: string;
751
- orange500: string;
752
- darkorange500: string;
753
- opacity00: string;
754
- opacity20: string;
755
- opacity30: string;
756
- opacity65: string;
757
- darkgreen500: string;
758
- grey70: string;
759
- navy500: string;
760
- lightgreen500: string;
761
- pink500: string;
762
- darkgrey70: string;
763
- darknavy500: string;
764
- darkpink500: string;
765
- darklightgreen500: string;
766
- opacity10: string;
767
- grey600: string;
768
- darkgrey600: string;
769
- skyblue500: string;
770
- skyblue300: string;
771
- pink300: string;
772
- lightpink500: string;
773
- darkblue300: string;
774
- darkblue700: string;
775
- darkgreen300: string;
776
- darkskyblue500: string;
777
- navy100: string;
778
- darknavy100: string;
779
- opacity80: string;
780
- opacity50: string;
781
- grey30: string;
465
+ readonly SemanticColor: {
466
+ blue500: string;
467
+ blue700: string;
468
+ blue300: string;
469
+ green700: string;
470
+ green500: string;
471
+ green300: string;
472
+ red500: string;
473
+ grey900: string;
474
+ grey500: string;
475
+ grey400: string;
476
+ grey100: string;
477
+ grey50: string;
478
+ white: string;
479
+ black: string;
480
+ darkblue500: string;
481
+ grey950: string;
482
+ darkgrey900: string;
483
+ darkgrey500: string;
484
+ darkgrey400: string;
485
+ darkgrey100: string;
486
+ darkgrey50: string;
487
+ darkred500: string;
488
+ darkgreen700: string;
489
+ orange500: string;
490
+ darkorange500: string;
491
+ opacity00: string;
492
+ opacity20: string;
493
+ opacity30: string;
494
+ opacity65: string;
495
+ darkgreen500: string;
496
+ grey70: string;
497
+ navy500: string;
498
+ lightgreen500: string;
499
+ pink500: string;
500
+ darkgrey70: string;
501
+ darknavy500: string;
502
+ darkpink500: string;
503
+ darklightgreen500: string;
504
+ opacity10: string;
505
+ grey600: string;
506
+ darkgrey600: string;
507
+ skyblue500: string;
508
+ skyblue300: string;
509
+ pink300: string;
510
+ lightpink500: string;
511
+ darkblue300: string;
512
+ darkblue700: string;
513
+ darkgreen300: string;
514
+ darkskyblue500: string;
515
+ navy100: string;
516
+ darknavy100: string;
517
+ opacity80: string;
518
+ opacity50: string;
519
+ grey30: string;
520
+ };
521
+ readonly PaletteColor_Dark: {
522
+ sys_container_background_01: string;
523
+ sys_container_background_02: string;
524
+ sys_container_background_03: string;
525
+ sys_background_dimmed: string;
526
+ sys_text_grey_01: string;
527
+ sys_text_grey_02: string;
528
+ sys_text_grey_03: string;
529
+ sys_text_white: string;
530
+ sys_text_brand_primary: string;
531
+ sys_text_error_01: string;
532
+ sys_widget_grey_01: string;
533
+ sys_widget_grey_02: string;
534
+ sys_widget_grey_03: string;
535
+ sys_widget_primary_01: string;
536
+ sys_widget_error_01: string;
537
+ sys_widget_warning_01: string;
538
+ sys_widget_success_01: string;
539
+ sys_widget_white: string;
540
+ sys_border_area_01: string;
541
+ sys_border_line_01: string;
542
+ sys_border_line_02: string;
543
+ sys_border_line_03: string;
544
+ sys_border_line_04: string;
545
+ sys_border_line_05: string;
546
+ sys_component_base_01: string;
547
+ sys_component_base_02: string;
548
+ sys_component_base_03: string;
549
+ sys_component_base_red: string;
550
+ sys_component_base_white: string;
551
+ sys_component_base_white_opacity00: string;
552
+ sys_on_base_white_opacity00: string;
553
+ sys_on_base_white_opacity30: string;
554
+ sys_on_base_black_opacity20: string;
555
+ usr_brand_primary: string;
556
+ usr_brand_secondary: string;
557
+ usr_brand_secondary_variant: string;
558
+ usr_background: string;
559
+ usr_surface: string;
560
+ usr_border: string;
561
+ usr_on_brand_primary: string;
562
+ usr_on_brand_secondary: string;
563
+ usr_on_background: string;
564
+ usr_on_surface: string;
565
+ sys_widget_status_active_01: string;
566
+ sys_text_success_01: string;
567
+ sys_widget_grey_04: string;
568
+ sys_text_active: string;
569
+ sys_component_base_blue: string;
570
+ sys_on_base_black_opacity65: string;
571
+ sys_component_base_04: string;
572
+ sys_component_base_black: string;
573
+ sys_component_base_black_opacity00: string;
574
+ usr_text_brand_secondary_variant: string;
575
+ usr_text_brand_primary: string;
576
+ usr_text_brand_on_primary: string;
577
+ sys_text_brand_secondary_variant: string;
578
+ sys_component_base_navy: string;
579
+ sys_widget_lightgreen: string;
580
+ sys_border_line_06: string;
581
+ sys_background_dimmed_20: string;
582
+ sys_widget_pink: string;
583
+ sys_widget_primary_opacity20: string;
584
+ sys_widget_secondary_variant_01: string;
585
+ usr_component_base_brand_primary_opacity10: string;
586
+ sys_temp_grey_01: string;
587
+ sys_temp_grey_02: string;
588
+ sys_temp_grey_03: string;
589
+ sys_temp_grey_04: string;
590
+ sys_temp_grey_05: string;
591
+ sys_temp_white: string;
592
+ sys_temp_primary_01: string;
593
+ sys_temp_secondary_01: string;
594
+ sys_temp_red: string;
595
+ sys_temp_white_opacity_00: string;
596
+ sys_temp_dimmed: string;
597
+ sys_temp_black: string;
598
+ sys_temp_primary_02: string;
599
+ sys_temp_primary_03: string;
600
+ sys_temp_secondary_02: string;
601
+ sys_temp_lightgreen_01: string;
602
+ sys_text_grey_04: string;
603
+ sys_papp_post_social_background: string;
604
+ sys_papp_post_notice_background: string;
605
+ sys_papp_post_free_background: string;
606
+ sys_papp_vod_background: string;
607
+ sys_papp_vodplus_background: string;
608
+ sys_papp_live_background: string;
609
+ sys_selcontrols_base_off_disabled: string;
610
+ sys_selcontrols_base_on_disabled: string;
611
+ sys_component_base_blue_opacity10: string;
612
+ sys_component_base_05: string;
613
+ sys_background_dimmed_65: string;
614
+ sys_temp_grey_06: string;
615
+ sys_on_base_white_opacity10: string;
616
+ sys_on_base_black_opacity10: string;
617
+ sys_component_base_05_opacity00: string;
618
+ sys_papp_post_notice_link: string;
619
+ sys_component_base_navy_light: string;
620
+ sys_component_base_orange: string;
621
+ sys_component_base_grey: string;
622
+ sys_component_base_black_opacity80: string;
623
+ sys_text_darkgrey_02: string;
624
+ sys_border_line_darktheme_01: string;
625
+ sys_border_line_darktheme_02: string;
626
+ sys_component_base_darktheme_01: string;
627
+ sys_component_base_darktheme_02: string;
628
+ sys_component_base_darktheme_03: string;
629
+ sys_text_grey_darktheme_01: string;
630
+ sys_text_grey_darktheme_02: string;
631
+ sys_text_grey_darktheme_03: string;
632
+ sys_widget_grey_darktheme_01: string;
633
+ sys_widget_grey_darktheme_02: string;
634
+ sys_widget_grey_darktheme_03: string;
635
+ sys_component_base_green: string;
636
+ sys_text_error_darktheme_01: string;
637
+ sys_border_line_darktheme_03: string;
638
+ sys_border_line_darktheme_04: string;
639
+ usr_widget_brand_primary_darktheme_01: string;
640
+ usr_text_brand_primary_darktheme_01: string;
641
+ sys_component_base_black_opacity50: string;
642
+ sys_component_base_card: string;
643
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
644
+ sys_widget_green_01: string;
645
+ sys_component_base_black_opacity30: string;
646
+ sys_area_background: string;
647
+ sys_border_white_opacity30: string;
648
+ sys_container_background_wt: string;
649
+ sys_channeldesc_grey_03: string;
650
+ sys_channeldesc_border_grey_03: string;
651
+ sys_gradient_base_01: string;
652
+ sys_gradient_base_01_opacity00: string;
653
+ };
654
+ readonly PaletteColor_light: {
655
+ sys_container_background_01: string;
656
+ sys_container_background_02: string;
657
+ sys_container_background_03: string;
658
+ sys_background_dimmed: string;
659
+ sys_text_grey_01: string;
660
+ sys_text_grey_02: string;
661
+ sys_text_grey_03: string;
662
+ sys_text_white: string;
663
+ sys_text_brand_primary: string;
664
+ sys_text_error_01: string;
665
+ sys_widget_grey_01: string;
666
+ sys_widget_grey_02: string;
667
+ sys_widget_grey_03: string;
668
+ sys_widget_primary_01: string;
669
+ sys_widget_error_01: string;
670
+ sys_widget_warning_01: string;
671
+ sys_widget_success_01: string;
672
+ sys_widget_white: string;
673
+ sys_border_area_01: string;
674
+ sys_border_line_01: string;
675
+ sys_border_line_02: string;
676
+ sys_border_line_03: string;
677
+ sys_border_line_04: string;
678
+ sys_border_line_05: string;
679
+ sys_component_base_01: string;
680
+ sys_component_base_02: string;
681
+ sys_component_base_03: string;
682
+ sys_component_base_red: string;
683
+ sys_component_base_white: string;
684
+ sys_component_base_white_opacity00: string;
685
+ sys_on_base_white_opacity00: string;
686
+ sys_on_base_white_opacity30: string;
687
+ sys_on_base_black_opacity20: string;
688
+ usr_brand_primary: string;
689
+ usr_brand_secondary: string;
690
+ usr_brand_secondary_variant: string;
691
+ usr_background: string;
692
+ usr_surface: string;
693
+ usr_border: string;
694
+ usr_on_brand_primary: string;
695
+ usr_on_brand_secondary: string;
696
+ usr_on_background: string;
697
+ usr_on_surface: string;
698
+ sys_widget_status_active_01: string;
699
+ sys_text_success_01: string;
700
+ sys_widget_grey_04: string;
701
+ sys_text_active: string;
702
+ sys_component_base_blue: string;
703
+ sys_on_base_black_opacity65: string;
704
+ sys_component_base_04: string;
705
+ sys_component_base_black: string;
706
+ sys_component_base_black_opacity00: string;
707
+ usr_text_brand_secondary_variant: string;
708
+ usr_text_brand_primary: string;
709
+ usr_text_brand_on_primary: string;
710
+ sys_text_brand_secondary_variant: string;
711
+ sys_component_base_navy: string;
712
+ sys_widget_lightgreen: string;
713
+ sys_border_line_06: string;
714
+ sys_background_dimmed_20: string;
715
+ sys_widget_pink: string;
716
+ sys_widget_primary_opacity20: string;
717
+ sys_widget_secondary_variant_01: string;
718
+ usr_component_base_brand_primary_opacity10: string;
719
+ sys_temp_grey_01: string;
720
+ sys_temp_grey_02: string;
721
+ sys_temp_grey_03: string;
722
+ sys_temp_grey_04: string;
723
+ sys_temp_grey_05: string;
724
+ sys_temp_white: string;
725
+ sys_temp_primary_01: string;
726
+ sys_temp_secondary_01: string;
727
+ sys_temp_red: string;
728
+ sys_temp_white_opacity_00: string;
729
+ sys_temp_dimmed: string;
730
+ sys_temp_black: string;
731
+ sys_temp_primary_02: string;
732
+ sys_temp_primary_03: string;
733
+ sys_temp_secondary_02: string;
734
+ sys_temp_lightgreen_01: string;
735
+ sys_text_grey_04: string;
736
+ sys_papp_post_social_background: string;
737
+ sys_papp_post_notice_background: string;
738
+ sys_papp_post_free_background: string;
739
+ sys_papp_vod_background: string;
740
+ sys_papp_vodplus_background: string;
741
+ sys_papp_live_background: string;
742
+ sys_selcontrols_base_off_disabled: string;
743
+ sys_selcontrols_base_on_disabled: string;
744
+ sys_component_base_blue_opacity10: string;
745
+ sys_component_base_05: string;
746
+ sys_background_dimmed_65: string;
747
+ sys_temp_grey_06: string;
748
+ sys_on_base_white_opacity10: string;
749
+ sys_on_base_black_opacity10: string;
750
+ sys_component_base_05_opacity00: string;
751
+ sys_papp_post_notice_link: string;
752
+ sys_component_base_navy_light: string;
753
+ sys_component_base_orange: string;
754
+ sys_component_base_grey: string;
755
+ sys_component_base_black_opacity80: string;
756
+ sys_text_darkgrey_02: string;
757
+ sys_border_line_darktheme_01: string;
758
+ sys_border_line_darktheme_02: string;
759
+ sys_component_base_darktheme_01: string;
760
+ sys_component_base_darktheme_02: string;
761
+ sys_component_base_darktheme_03: string;
762
+ sys_text_grey_darktheme_01: string;
763
+ sys_text_grey_darktheme_02: string;
764
+ sys_text_grey_darktheme_03: string;
765
+ sys_widget_grey_darktheme_01: string;
766
+ sys_widget_grey_darktheme_02: string;
767
+ sys_widget_grey_darktheme_03: string;
768
+ sys_component_base_green: string;
769
+ sys_text_error_darktheme_01: string;
770
+ sys_border_line_darktheme_03: string;
771
+ sys_border_line_darktheme_04: string;
772
+ usr_widget_brand_primary_darktheme_01: string;
773
+ usr_text_brand_primary_darktheme_01: string;
774
+ sys_component_base_black_opacity50: string;
775
+ sys_component_base_card: string;
776
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
777
+ sys_widget_green_01: string;
778
+ sys_component_base_black_opacity30: string;
779
+ sys_area_background: string;
780
+ sys_border_white_opacity30: string;
781
+ sys_container_background_wt: string;
782
+ sys_channeldesc_grey_03: string;
783
+ sys_channeldesc_border_grey_03: string;
784
+ sys_gradient_base_01: string;
785
+ sys_gradient_base_01_opacity00: string;
782
786
  };
783
787
  };
784
788
  export default colorSet;
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
8
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
7
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
10
8
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
9
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
11
11
  var colorSet = {
12
- PaletteColor_light: PaletteColor_light_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
12
  UIColor: UIColor_json_1.default,
15
- SemanticColor: SemanticColor_json_1.default
13
+ SemanticColor: SemanticColor_json_1.default,
14
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
+ PaletteColor_light: PaletteColor_light_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
@@ -457,7 +457,7 @@ export interface UITheme {
457
457
  ui_channeldesc_grey_03: string;
458
458
  ui_channeldesc_border_grey_03: string;
459
459
  ui_cpnt_bottomsheet_border: string;
460
+ ui_cpnt_userdesktopsidetab_base_area: string;
460
461
  ui_cpnt_pg_gradient_01: string;
461
462
  ui_cpnt_pg_gradient_02: string;
462
- ui_cpnt_userdesktopsidetab_base_area: string;
463
463
  }
@@ -38,7 +38,7 @@ var TextLabel_1 = require("../TextLabel");
38
38
  // displayType?: 'icon_only' | 'text_only' | 'icon_text';
39
39
  // state?: 'normal' | 'disabled';
40
40
  function FloatingActionButton(_a) {
41
- var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
41
+ var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.fontWeight, fontWeight = _d === void 0 ? 'bold' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
42
42
  var handleClick = function () {
43
43
  if (onClick) {
44
44
  onClick();
@@ -56,14 +56,14 @@ function FloatingActionButton(_a) {
56
56
  return 'ui_cpnt_button_icon_on_primary';
57
57
  };
58
58
  return (react_1.default.createElement(react_1.default.Fragment, null,
59
- displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
59
+ displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
60
60
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
61
- displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, fontWeight: fontWeight, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
62
- displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
61
+ displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
62
+ displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })),
63
63
  displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
64
64
  react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
66
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
66
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disabled' ? 'ui_cpnt_button_text_darktheme_disabled' : undefined })))))));
67
67
  }
68
68
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 24px;\n height: 48px;\n width: 48px;\n"], ["\n border-radius: 24px;\n height: 48px;\n width: 48px;\n"])));
69
69
  var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 32px;\n height: 64px;\n width: 64px;\n"], ["\n border-radius: 32px;\n height: 64px;\n width: 64px;\n"])));
@@ -71,7 +71,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
71
71
  var theme = _a.theme;
72
72
  return theme.ui_cpnt_button_fill_base_disabled;
73
73
  });
74
- var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n\n & > div {\n ", ";\n }\n"])), function (_a) {
74
+ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"], ["\n align-items: center;\n background-color: ", ";\n border: none;\n bottom: 24px;\n cursor: ", ";\n display: flex;\n justify-content: center;\n position: fixed;\n right: 24px;\n /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n z-index: 101;\n\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", "\n"])), function (_a) {
75
75
  var theme = _a.theme;
76
76
  return theme.ui_cpnt_button_fill_base_primary;
77
77
  }, function (_a) {
@@ -86,13 +86,6 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
86
86
  }, function (_a) {
87
87
  var state = _a.state;
88
88
  return state === 'disabled' && disabled;
89
- }, function (_a) {
90
- var theme = _a.theme, fontWeight = _a.fontWeight;
91
- return fontWeight &&
92
- {
93
- bold: "font-weight: " + theme.fontWeight.bold,
94
- regular: "font-weight: " + theme.fontWeight.normal
95
- }[fontWeight];
96
89
  });
97
90
  var S_ButtonIconOnly = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: none;\n ", ";\n ", ";\n"], ["\n padding: none;\n ", ";\n ", ";\n"])), floatingActionButtonStyle, function (_a) {
98
91
  var size = _a.size;
@@ -3,12 +3,31 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
6
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
27
  };
9
28
  Object.defineProperty(exports, "__esModule", { value: true });
10
29
  var react_1 = __importDefault(require("react"));
11
- var styled_components_1 = __importDefault(require("styled-components"));
30
+ var styled_components_1 = __importStar(require("styled-components"));
12
31
  var Containers_1 = require("../Containers");
13
32
  var ContainersBox = function (_a) {
14
33
  var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor;
@@ -167,12 +186,13 @@ var ContainersBox = function (_a) {
167
186
  };
168
187
  var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n height: 100%;\n"], ["\n align-items: flex-start;\n display: flex;\n height: 100%;\n"])));
169
188
  var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex: 1;\n flex-direction: column;\n height: 100%;\n"])));
170
- var S_BottomWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n background-color: ", ";\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"], ["\n // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n background-color: ", ";\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"])), function (_a) {
189
+ var centerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n background-color: ", ";\n"], ["\n display: flex;\n justify-content: center;\n // TODO: WTO_1\uC640 WTP_1\uC720\uD615\uC744 \uC704\uD574 \uC784\uC2DC\uB85C backgroundColor\uB97C \uBD80\uC5EC\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uBD80\uBD84 \uAE30\uD68D \uCCA0\uD559 \uAC1C\uC120\uC774 \uB418\uBA74 \uBCC0\uACBD\uB418\uC5B4\uC57C \uD568.\n background-color: ", ";\n"])), function (_a) {
171
190
  var theme = _a.theme;
172
191
  return theme.ui_contentscontainer01_background;
173
- }, function (_a) {
192
+ });
193
+ var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"], ["\n flex: 1;\n height: 100%;\n overflow: hidden;\n ", ";\n"])), function (_a) {
174
194
  var layoutType = _a.layoutType;
175
- return (layoutType === 'WTO_1' || 'WTP_1') && 'display: flex; justify-content: center;';
195
+ return (layoutType === 'WTO_1' || layoutType === 'WTP_1' ? centerStyle : '');
176
196
  });
177
197
  exports.default = ContainersBox;
178
- var templateObject_1, templateObject_2, templateObject_3;
198
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -79,6 +79,7 @@ function MobileHeaderBar(_a) {
79
79
  react_1.default.createElement(S_ButtonWrapper, null,
80
80
  titleType === 'profile' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
81
81
  leftIcon()),
82
+ displayType === 'ibtn_amount2' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }),
82
83
  react_1.default.createElement(S_Title, null, title()),
83
84
  react_1.default.createElement(S_ButtonWrapper, null,
84
85
  titleType === 'profile' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "0.6.8",
3
+ "version": "0.6.11",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,13 +1,8 @@
1
1
  # UW Release Notes
2
- ## [v0.6.8]
2
+ ## [v0.6.11]
3
3
 
4
- ### Layout
5
- * WT
6
- * WTA에 무한 스크롤 임시 대응 관련 주석 추가
7
- * WTH_3 생성
8
- * WTO_1 생성
9
- * WTP_1 생성
10
- * 새로운 유형을 위한 SubMenuContainer 생성
11
-
12
- ### Color
13
- * 컬러 키 값 22.03.24 오전 11시 25분 기준 싱크
4
+ ### Component
5
+ * FloatingActionButton
6
+ * fontWeight의 default value를 bold로 부여 (기획서와 싱크 맞춤)
7
+ * MobileHeaderBar
8
+ * displayType이 ibtn_amount2일때, 좌측에 빈공간을 하나 더 추가 (MobileHeaderBar에서 우측에 버튼이 2개일때 title이 중앙에 위치하지 않고 좌측으로 치우치는 문제를 해결)