pds-dev-kit-web 0.5.21 → 0.6.2

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 (27) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +3 -2
  3. package/dist/src/common/index.d.ts +2 -2
  4. package/dist/src/common/index.js +2 -1
  5. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
  6. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
  7. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  8. package/dist/src/common/styles/colorSet/index.d.ts +130 -127
  9. package/dist/src/common/styles/colorSet/index.js +3 -3
  10. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  11. package/dist/src/common/styles/theme.js +1 -1
  12. package/dist/src/common/styles/ui-colors.d.ts +6 -0
  13. package/dist/src/common/styles/ui-colors.js +14 -5
  14. package/dist/src/desktop/components/IconButton/IconButton.js +6 -2
  15. package/dist/src/desktop/components/TextField/TextField.js +29 -16
  16. package/dist/src/desktop/components/TextLabel/TextLabel.js +1 -1
  17. package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js +6 -2
  18. package/dist/src/hybrid/components/Divider/Divider.d.ts +2 -1
  19. package/dist/src/hybrid/components/Divider/Divider.js +9 -5
  20. package/dist/src/hybrid/components/Icon/Icon.d.ts +1 -6
  21. package/dist/src/hybrid/components/Icon/Icon.js +2 -2
  22. package/dist/src/mobile/components/IconButton/IconButton.js +6 -2
  23. package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js +1 -1
  24. package/dist/src/mobile/components/TextField/TextField.js +29 -16
  25. package/dist/src/mobile/components/TextLabel/TextLabel.js +1 -1
  26. package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js +6 -2
  27. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, theme, Form } from './src/common';
1
+ import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form } from './src/common';
2
2
  export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors };
3
- export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors };
3
+ export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
4
4
  export { theme };
5
5
  export { Form };
6
6
  import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
- exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BlogTextField = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
3
+ exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
+ exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BlogTextField = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_UserDesktopTabBar = void 0;
5
5
  /* eslint-disable import/order */
6
6
  /* eslint-disable import/first */
7
7
  // common
@@ -14,6 +14,7 @@ Object.defineProperty(exports, "mobileLineHeight", { enumerable: true, get: func
14
14
  Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function () { return common_1.boxShadow; } });
15
15
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return common_1.spacing; } });
16
16
  Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return common_1.uiColors; } });
17
+ Object.defineProperty(exports, "customTheme", { enumerable: true, get: function () { return common_1.customTheme; } });
17
18
  Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return common_1.theme; } });
18
19
  Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return common_1.Form; } });
19
20
  // hybrid
package/dist/src/common/index.d.ts CHANGED
@@ -2,8 +2,8 @@ import { UITheme } from './styles/colorSet/ui-type';
2
2
  import { IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors } from './types';
3
3
  export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors };
4
4
  import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
5
- import { uiColors } from './styles/ui-colors';
6
- export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors };
5
+ import { uiColors, customTheme } from './styles/ui-colors';
6
+ export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
7
7
  import { theme } from './styles';
8
8
  export { theme };
9
9
  import { Form } from './components';
package/dist/src/common/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  /* eslint-disable import/order */
3
3
  /* eslint-disable import/first */
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.Form = exports.theme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
5
+ exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
6
6
  // theme
7
7
  var theme_1 = require("./styles/theme");
8
8
  Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return theme_1.fontWeight; } });
@@ -14,6 +14,7 @@ Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function ()
14
14
  Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return theme_1.spacing; } });
15
15
  var ui_colors_1 = require("./styles/ui-colors");
16
16
  Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return ui_colors_1.uiColors; } });
17
+ Object.defineProperty(exports, "customTheme", { enumerable: true, get: function () { return ui_colors_1.customTheme; } });
17
18
  // all theme
18
19
  var styles_1 = require("./styles");
19
20
  Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return styles_1.theme; } });
package/dist/src/common/styles/colorSet/PaletteColor_Dark.json CHANGED
@@ -123,5 +123,6 @@
123
123
  "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
124
124
  "sys_widget_green_01": "darkgreen500",
125
125
  "sys_component_base_black_opacity30": "black/opacity30",
126
- "sys_area_background": "darkgrey50/opacity65"
126
+ "sys_area_background": "darkgrey50/opacity65",
127
+ "sys_border_white_opacity30": "white/opacity30"
127
128
  }
package/dist/src/common/styles/colorSet/PaletteColor_light.json CHANGED
@@ -123,5 +123,6 @@
123
123
  "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
124
124
  "sys_widget_green_01": "green500",
125
125
  "sys_component_base_black_opacity30": "black/opacity30",
126
- "sys_area_background": "darkgrey50/opacity65"
126
+ "sys_area_background": "darkgrey50/opacity65",
127
+ "sys_border_white_opacity30": "white/opacity30"
127
128
  }
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -446,5 +446,6 @@
446
446
  "ui_cpnt_progressbar_02": "sys_widget_grey_04",
447
447
  "ui_36": "sys_component_base_black_opacity80",
448
448
  "ui_37": "sys_component_base_black_opacity30",
449
- "ui_39": "sys_area_background"
449
+ "ui_39": "sys_area_background",
450
+ "ui_cpnt_divider_white_opacity30": "sys_border_white_opacity30"
450
451
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -180,133 +180,7 @@ declare const colorSet: {
180
180
  sys_widget_green_01: string;
181
181
  sys_component_base_black_opacity30: string;
182
182
  sys_area_background: string;
183
- };
184
- readonly PaletteColor_light: {
185
- sys_container_background_01: string;
186
- sys_container_background_02: string;
187
- sys_container_background_03: string;
188
- sys_background_dimmed: string;
189
- sys_text_grey_01: string;
190
- sys_text_grey_02: string;
191
- sys_text_grey_03: string;
192
- sys_text_white: string;
193
- sys_text_brand_primary: string;
194
- sys_text_error_01: string;
195
- sys_widget_grey_01: string;
196
- sys_widget_grey_02: string;
197
- sys_widget_grey_03: string;
198
- sys_widget_primary_01: string;
199
- sys_widget_error_01: string;
200
- sys_widget_warning_01: string;
201
- sys_widget_success_01: string;
202
- sys_widget_white: string;
203
- sys_border_area_01: string;
204
- sys_border_line_01: string;
205
- sys_border_line_02: string;
206
- sys_border_line_03: string;
207
- sys_border_line_04: string;
208
- sys_border_line_05: string;
209
- sys_component_base_01: string;
210
- sys_component_base_02: string;
211
- sys_component_base_03: string;
212
- sys_component_base_red: string;
213
- sys_component_base_white: string;
214
- sys_component_base_white_opacity00: string;
215
- sys_on_base_white_opacity00: string;
216
- sys_on_base_white_opacity30: string;
217
- sys_on_base_black_opacity20: string;
218
- usr_brand_primary: string;
219
- usr_brand_secondary: string;
220
- usr_brand_secondary_variant: string;
221
- usr_background: string;
222
- usr_surface: string;
223
- usr_border: string;
224
- usr_on_brand_primary: string;
225
- usr_on_brand_secondary: string;
226
- usr_on_background: string;
227
- usr_on_surface: string;
228
- sys_widget_status_active_01: string;
229
- sys_text_success_01: string;
230
- sys_widget_grey_04: string;
231
- sys_text_active: string;
232
- sys_component_base_blue: string;
233
- sys_on_base_black_opacity65: string;
234
- sys_component_base_04: string;
235
- sys_component_base_black: string;
236
- sys_component_base_black_opacity00: string;
237
- usr_text_brand_secondary_variant: string;
238
- usr_text_brand_primary: string;
239
- usr_text_brand_on_primary: string;
240
- sys_text_brand_secondary_variant: string;
241
- sys_component_base_navy: string;
242
- sys_widget_lightgreen: string;
243
- sys_border_line_06: string;
244
- sys_background_dimmed_20: string;
245
- sys_widget_pink: string;
246
- sys_widget_primary_opacity20: string;
247
- sys_widget_secondary_variant_01: string;
248
- usr_component_base_brand_primary_opacity10: string;
249
- sys_temp_grey_01: string;
250
- sys_temp_grey_02: string;
251
- sys_temp_grey_03: string;
252
- sys_temp_grey_04: string;
253
- sys_temp_grey_05: string;
254
- sys_temp_white: string;
255
- sys_temp_primary_01: string;
256
- sys_temp_secondary_01: string;
257
- sys_temp_red: string;
258
- sys_temp_white_opacity_00: string;
259
- sys_temp_dimmed: string;
260
- sys_temp_black: string;
261
- sys_temp_primary_02: string;
262
- sys_temp_primary_03: string;
263
- sys_temp_secondary_02: string;
264
- sys_temp_lightgreen_01: string;
265
- sys_text_grey_04: string;
266
- sys_papp_post_social_background: string;
267
- sys_papp_post_notice_background: string;
268
- sys_papp_post_free_background: string;
269
- sys_papp_vod_background: string;
270
- sys_papp_vodplus_background: string;
271
- sys_papp_live_background: string;
272
- sys_selcontrols_base_off_disabled: string;
273
- sys_selcontrols_base_on_disabled: string;
274
- sys_component_base_blue_opacity10: string;
275
- sys_component_base_05: string;
276
- sys_background_dimmed_65: string;
277
- sys_temp_grey_06: string;
278
- sys_on_base_white_opacity10: string;
279
- sys_on_base_black_opacity10: string;
280
- sys_component_base_05_opacity00: string;
281
- sys_papp_post_notice_link: string;
282
- sys_component_base_navy_light: string;
283
- sys_component_base_orange: string;
284
- sys_component_base_grey: string;
285
- sys_component_base_black_opacity80: string;
286
- sys_text_darkgrey_02: string;
287
- sys_border_line_darktheme_01: string;
288
- sys_border_line_darktheme_02: string;
289
- sys_component_base_darktheme_01: string;
290
- sys_component_base_darktheme_02: string;
291
- sys_component_base_darktheme_03: string;
292
- sys_text_grey_darktheme_01: string;
293
- sys_text_grey_darktheme_02: string;
294
- sys_text_grey_darktheme_03: string;
295
- sys_widget_grey_darktheme_01: string;
296
- sys_widget_grey_darktheme_02: string;
297
- sys_widget_grey_darktheme_03: string;
298
- sys_component_base_green: string;
299
- sys_text_error_darktheme_01: string;
300
- sys_border_line_darktheme_03: string;
301
- sys_border_line_darktheme_04: string;
302
- usr_widget_brand_primary_darktheme_01: string;
303
- usr_text_brand_primary_darktheme_01: string;
304
- sys_component_base_black_opacity50: string;
305
- sys_component_base_card: string;
306
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
307
- sys_widget_green_01: string;
308
- sys_component_base_black_opacity30: string;
309
- sys_area_background: string;
183
+ sys_border_white_opacity30: string;
310
184
  };
311
185
  readonly UIColor: {
312
186
  ui_cpnt_button_fill_base_primary: string;
@@ -757,6 +631,135 @@ declare const colorSet: {
757
631
  ui_36: string;
758
632
  ui_37: string;
759
633
  ui_39: string;
634
+ ui_cpnt_divider_white_opacity30: string;
635
+ };
636
+ readonly PaletteColor_light: {
637
+ sys_container_background_01: string;
638
+ sys_container_background_02: string;
639
+ sys_container_background_03: string;
640
+ sys_background_dimmed: string;
641
+ sys_text_grey_01: string;
642
+ sys_text_grey_02: string;
643
+ sys_text_grey_03: string;
644
+ sys_text_white: string;
645
+ sys_text_brand_primary: string;
646
+ sys_text_error_01: string;
647
+ sys_widget_grey_01: string;
648
+ sys_widget_grey_02: string;
649
+ sys_widget_grey_03: string;
650
+ sys_widget_primary_01: string;
651
+ sys_widget_error_01: string;
652
+ sys_widget_warning_01: string;
653
+ sys_widget_success_01: string;
654
+ sys_widget_white: string;
655
+ sys_border_area_01: string;
656
+ sys_border_line_01: string;
657
+ sys_border_line_02: string;
658
+ sys_border_line_03: string;
659
+ sys_border_line_04: string;
660
+ sys_border_line_05: string;
661
+ sys_component_base_01: string;
662
+ sys_component_base_02: string;
663
+ sys_component_base_03: string;
664
+ sys_component_base_red: string;
665
+ sys_component_base_white: string;
666
+ sys_component_base_white_opacity00: string;
667
+ sys_on_base_white_opacity00: string;
668
+ sys_on_base_white_opacity30: string;
669
+ sys_on_base_black_opacity20: string;
670
+ usr_brand_primary: string;
671
+ usr_brand_secondary: string;
672
+ usr_brand_secondary_variant: string;
673
+ usr_background: string;
674
+ usr_surface: string;
675
+ usr_border: string;
676
+ usr_on_brand_primary: string;
677
+ usr_on_brand_secondary: string;
678
+ usr_on_background: string;
679
+ usr_on_surface: string;
680
+ sys_widget_status_active_01: string;
681
+ sys_text_success_01: string;
682
+ sys_widget_grey_04: string;
683
+ sys_text_active: string;
684
+ sys_component_base_blue: string;
685
+ sys_on_base_black_opacity65: string;
686
+ sys_component_base_04: string;
687
+ sys_component_base_black: string;
688
+ sys_component_base_black_opacity00: string;
689
+ usr_text_brand_secondary_variant: string;
690
+ usr_text_brand_primary: string;
691
+ usr_text_brand_on_primary: string;
692
+ sys_text_brand_secondary_variant: string;
693
+ sys_component_base_navy: string;
694
+ sys_widget_lightgreen: string;
695
+ sys_border_line_06: string;
696
+ sys_background_dimmed_20: string;
697
+ sys_widget_pink: string;
698
+ sys_widget_primary_opacity20: string;
699
+ sys_widget_secondary_variant_01: string;
700
+ usr_component_base_brand_primary_opacity10: string;
701
+ sys_temp_grey_01: string;
702
+ sys_temp_grey_02: string;
703
+ sys_temp_grey_03: string;
704
+ sys_temp_grey_04: string;
705
+ sys_temp_grey_05: string;
706
+ sys_temp_white: string;
707
+ sys_temp_primary_01: string;
708
+ sys_temp_secondary_01: string;
709
+ sys_temp_red: string;
710
+ sys_temp_white_opacity_00: string;
711
+ sys_temp_dimmed: string;
712
+ sys_temp_black: string;
713
+ sys_temp_primary_02: string;
714
+ sys_temp_primary_03: string;
715
+ sys_temp_secondary_02: string;
716
+ sys_temp_lightgreen_01: string;
717
+ sys_text_grey_04: string;
718
+ sys_papp_post_social_background: string;
719
+ sys_papp_post_notice_background: string;
720
+ sys_papp_post_free_background: string;
721
+ sys_papp_vod_background: string;
722
+ sys_papp_vodplus_background: string;
723
+ sys_papp_live_background: string;
724
+ sys_selcontrols_base_off_disabled: string;
725
+ sys_selcontrols_base_on_disabled: string;
726
+ sys_component_base_blue_opacity10: string;
727
+ sys_component_base_05: string;
728
+ sys_background_dimmed_65: string;
729
+ sys_temp_grey_06: string;
730
+ sys_on_base_white_opacity10: string;
731
+ sys_on_base_black_opacity10: string;
732
+ sys_component_base_05_opacity00: string;
733
+ sys_papp_post_notice_link: string;
734
+ sys_component_base_navy_light: string;
735
+ sys_component_base_orange: string;
736
+ sys_component_base_grey: string;
737
+ sys_component_base_black_opacity80: string;
738
+ sys_text_darkgrey_02: string;
739
+ sys_border_line_darktheme_01: string;
740
+ sys_border_line_darktheme_02: string;
741
+ sys_component_base_darktheme_01: string;
742
+ sys_component_base_darktheme_02: string;
743
+ sys_component_base_darktheme_03: string;
744
+ sys_text_grey_darktheme_01: string;
745
+ sys_text_grey_darktheme_02: string;
746
+ sys_text_grey_darktheme_03: string;
747
+ sys_widget_grey_darktheme_01: string;
748
+ sys_widget_grey_darktheme_02: string;
749
+ sys_widget_grey_darktheme_03: string;
750
+ sys_component_base_green: string;
751
+ sys_text_error_darktheme_01: string;
752
+ sys_border_line_darktheme_03: string;
753
+ sys_border_line_darktheme_04: string;
754
+ usr_widget_brand_primary_darktheme_01: string;
755
+ usr_text_brand_primary_darktheme_01: string;
756
+ sys_component_base_black_opacity50: string;
757
+ sys_component_base_card: string;
758
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
759
+ sys_widget_green_01: string;
760
+ sys_component_base_black_opacity30: string;
761
+ sys_area_background: string;
762
+ sys_border_white_opacity30: string;
760
763
  };
761
764
  };
762
765
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
8
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
9
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
10
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
13
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
- PaletteColor_light: PaletteColor_light_json_1.default,
15
- UIColor: UIColor_json_1.default
14
+ UIColor: UIColor_json_1.default,
15
+ PaletteColor_light: PaletteColor_light_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -447,4 +447,5 @@ export interface UITheme {
447
447
  ui_36: string;
448
448
  ui_37: string;
449
449
  ui_39: string;
450
+ ui_cpnt_divider_white_opacity30: string;
450
451
  }
package/dist/src/common/styles/theme.js CHANGED
@@ -97,5 +97,5 @@ exports.spacing = {
97
97
  spacingM: '288px',
98
98
  spacingN: '320px'
99
99
  };
100
- var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, ui_colors_1.uiColors);
100
+ var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK'));
101
101
  exports.default = theme;
package/dist/src/common/styles/ui-colors.d.ts CHANGED
@@ -1,2 +1,8 @@
1
1
  import { UITheme } from './colorSet/ui-type';
2
2
  export declare const uiColors: UITheme;
3
+ declare global {
4
+ interface Window {
5
+ PdsUtils: any;
6
+ }
7
+ }
8
+ export declare const customTheme: (tone: string) => any;
package/dist/src/common/styles/ui-colors.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.uiColors = void 0;
6
+ exports.customTheme = exports.uiColors = void 0;
7
7
  var colorSet_1 = __importDefault(require("./colorSet"));
8
8
  function buildCascadedColors(lowLevel, highLevel, override) {
9
9
  if (override === void 0) { override = {}; }
@@ -26,13 +26,22 @@ function buildCascadedColors(lowLevel, highLevel, override) {
26
26
  // 서버로부터 해당 채널이 라이트 톤을 사용하는지, 다크 톤을 사용하는지 가져오기
27
27
  // 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
28
28
  // from server (원래는 비동기)
29
- var channelSettings = {
30
- tone: 'dark',
29
+ var colorSetting = {
30
+ tone: 'DARK',
31
31
  customPalette: {
32
32
  usr_good_job: '#999999'
33
33
  }
34
34
  };
35
- var phaseTwoJSON = channelSettings.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
35
+ var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
36
36
  // ui-color-build-phase
37
- var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, channelSettings.customPalette);
37
+ var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
38
38
  exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
39
+ window.PdsUtils = {
40
+ tone: 'DARK'
41
+ };
42
+ var customTheme = function (tone) {
43
+ window.PdsUtils.tone = tone;
44
+ var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, colorSetting.customPalette), colorSet_1.default.UIColor);
45
+ return buildedColors;
46
+ };
47
+ exports.customTheme = customTheme;
package/dist/src/desktop/components/IconButton/IconButton.js CHANGED
@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
73
73
  });
74
74
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
75
75
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
76
- return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
76
+ return baseColorKey
77
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
78
+ : theme.ui_cpnt_button_fill_base_primary;
77
79
  }, function (_a) {
78
80
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
79
81
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -100,7 +102,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
100
102
  return theme.ui_cpnt_button_line_base_default;
101
103
  }, function (_a) {
102
104
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
103
- return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
105
+ return borderColorKey
106
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
107
+ : theme.ui_cpnt_button_line_border_enabled;
104
108
  }, function (_a) {
105
109
  var colorTheme = _a.colorTheme;
106
110
  switch (colorTheme) {
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -117,12 +117,25 @@ function TextField(_a) {
117
117
  }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
118
118
  }
119
119
  };
120
- return (react_1.default.createElement("div", null,
120
+ return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
121
121
  react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
122
122
  ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
123
123
  }
124
- var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
125
- var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
124
+ var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), function (_a) {
125
+ var size = _a.size;
126
+ return size &&
127
+ {
128
+ small: 'width: 188px;',
129
+ medium: 'width: 188px;',
130
+ large: 'width: 432px;',
131
+ rlarge: 'width: 100%'
132
+ }[size];
133
+ }, function (_a) {
134
+ var responsiveMode = _a.responsiveMode;
135
+ return responsiveMode === 'use' && 'width: 100%';
136
+ });
137
+ var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
138
+ var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
126
139
  var theme = _a.theme;
127
140
  return (46 -
128
141
  Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
@@ -133,21 +146,21 @@ var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
133
146
  Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
134
147
  2;
135
148
  });
136
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
149
+ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
137
150
  var theme = _a.theme;
138
151
  return theme.spacing.spacingC;
139
152
  }, function (_a) {
140
153
  var theme = _a.theme;
141
154
  return theme.spacing.spacingC;
142
155
  });
143
- var medium = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
156
+ var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
144
157
  var theme = _a.theme;
145
158
  return theme.spacing.spacingC;
146
159
  }, function (_a) {
147
160
  var theme = _a.theme;
148
161
  return theme.spacing.spacingC;
149
162
  });
150
- var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
163
+ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
151
164
  var theme = _a.theme;
152
165
  return theme.spacing.spacingD;
153
166
  }, function (_a) {
@@ -163,7 +176,7 @@ var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
163
176
  var textLineType = _a.textLineType;
164
177
  return textLineType === 'auto' && auto;
165
178
  });
166
- var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
179
+ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
167
180
  var theme = _a.theme;
168
181
  return theme.ui_cpnt_textfield_base_normal;
169
182
  }, function (_a) {
@@ -174,21 +187,21 @@ var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6
174
187
  return theme.ui_cpnt_textfield_border_focus;
175
188
  return theme.ui_cpnt_textfield_border_normal;
176
189
  });
177
- var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
190
+ var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
178
191
  var theme = _a.theme;
179
192
  return theme.ui_cpnt_textfield_base_disabled;
180
193
  }, function (_a) {
181
194
  var theme = _a.theme;
182
195
  return theme.ui_cpnt_textfield_border_normal;
183
196
  });
184
- var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
197
+ var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
185
198
  var theme = _a.theme;
186
199
  return theme.ui_cpnt_textfield_base_disabled;
187
200
  }, function (_a) {
188
201
  var theme = _a.theme;
189
202
  return theme.ui_cpnt_textfield_border_normal;
190
203
  });
191
- var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
204
+ var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
192
205
  var theme = _a.theme;
193
206
  return theme.ui_cpnt_textfield_base_normal;
194
207
  }, function (_a) {
@@ -199,21 +212,21 @@ var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObje
199
212
  return theme.ui_cpnt_textfield_border_darktheme_focus;
200
213
  return theme.ui_cpnt_textfield_border_darktheme_normal;
201
214
  });
202
- var dark_read_only = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
215
+ var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
203
216
  var theme = _a.theme;
204
217
  return theme.ui_cpnt_textfield_base_darktheme_disabled;
205
218
  }, function (_a) {
206
219
  var theme = _a.theme;
207
220
  return theme.ui_cpnt_textfield_border_darktheme_normal;
208
221
  });
209
- var dark_disabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
222
+ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
210
223
  var theme = _a.theme;
211
224
  return theme.ui_cpnt_textfield_base_darktheme_disabled;
212
225
  }, function (_a) {
213
226
  var theme = _a.theme;
214
227
  return theme.ui_cpnt_textfield_border_darktheme_normal;
215
228
  });
216
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
229
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
217
230
  var size = _a.size;
218
231
  return size &&
219
232
  {
@@ -244,8 +257,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
244
257
  var responsiveMode = _a.responsiveMode;
245
258
  return responsiveMode === 'use' && 'width: 100%';
246
259
  });
247
- var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
248
- var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
260
+ var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
261
+ var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
249
262
  var theme = _a.theme, colorTheme = _a.colorTheme;
250
263
  return colorTheme === 'none'
251
264
  ? theme.ui_cpnt_textfield_text_error
@@ -264,4 +277,4 @@ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObje
264
277
  return theme.spacing.spacingA;
265
278
  });
266
279
  exports.default = TextField;
267
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
280
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -245,7 +245,7 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
245
245
  });
246
246
  var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
247
247
  var colorOverride = _a.colorOverride;
248
- return colorOverride && common_1.uiColors[colorOverride];
248
+ return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
249
249
  });
250
250
  var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
251
251
  var lineLimit = _a.lineLimit;
package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
62
62
  });
63
63
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n ", "\n }\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
64
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
65
- return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
65
+ return baseColorKey
66
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
67
+ : theme.ui_cpnt_button_fill_base_primary;
66
68
  }, function (_a) {
67
69
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
68
70
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -97,7 +99,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
97
99
  return theme.ui_cpnt_button_line_base_default;
98
100
  }, function (_a) {
99
101
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
100
- return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
102
+ return borderColorKey
103
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
104
+ : theme.ui_cpnt_button_line_border_enabled;
101
105
  }, function (_a) {
102
106
  var colorTheme = _a.colorTheme;
103
107
  switch (colorTheme) {
package/dist/src/hybrid/components/Divider/Divider.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare type DividerProps = {
3
3
  displayType?: 'line' | 'area';
4
4
  direction?: 'vertical' | 'horizontal';
5
5
  height?: number;
6
+ colorTheme?: 'none' | 'divider1';
6
7
  };
7
- declare function Divider({ displayType, direction, height }: DividerProps): JSX.Element;
8
+ declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
8
9
  export default Divider;
package/dist/src/hybrid/components/Divider/Divider.js CHANGED
@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  function Divider(_a) {
32
- var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height;
33
- return react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction });
32
+ var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
33
+ return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
34
34
  }
35
35
  var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: 100%;\n"], ["\n height: ", ";\n width: 100%;\n"])), function (_a) {
36
36
  var displayType = _a.displayType;
@@ -44,9 +44,13 @@ var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_
44
44
  var $height = _a.$height;
45
45
  return ($height ? $height + "px" : '100%');
46
46
  });
47
- var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n ", ";\n ", ";\n"], ["\n background-color: ", ";\n ", ";\n ", ";\n"])), function (_a) {
48
- var theme = _a.theme;
49
- return theme.ui_cpnt_divider;
47
+ var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
48
+ var colorTheme = _a.colorTheme, theme = _a.theme;
49
+ return colorTheme &&
50
+ {
51
+ none: "background-color: " + theme.ui_cpnt_divider + ";",
52
+ divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
53
+ }[colorTheme];
50
54
  }, function (_a) {
51
55
  var $direction = _a.$direction;
52
56
  return $direction === 'horizontal' && horizontal;
package/dist/src/hybrid/components/Icon/Icon.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  /// <reference types="react" />
2
- import fillIcons from '../../../common/assets/icons/fill';
3
- import lineIcons from '../../../common/assets/icons/line';
4
- import { uiColors } from '../../../common/styles/ui-colors';
5
- export declare type FillIconNameKeys = keyof typeof fillIcons;
6
- export declare type LineIconNameKeys = keyof typeof lineIcons;
7
- export declare type UiColors = keyof typeof uiColors;
2
+ import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
8
3
  export declare type IconProps = {
9
4
  iconName?: FillIconNameKeys | LineIconNameKeys;
10
5
  size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
package/dist/src/hybrid/components/Icon/Icon.js CHANGED
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
+ var common_1 = require("../../../common");
7
8
  var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
8
9
  var line_1 = __importDefault(require("../../../common/assets/icons/line"));
9
- var ui_colors_1 = require("../../../common/styles/ui-colors");
10
10
  var Icon = function (_a) {
11
11
  var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
12
12
  var SelectedIcon = fillType === 'line'
13
13
  ? line_1.default[iconName] || fill_1.default[iconName]
14
14
  : fill_1.default[iconName] || line_1.default[iconName];
15
- return react_1.default.createElement(SelectedIcon, { color: ui_colors_1.uiColors[colorKey], size: size });
15
+ return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorKey], size: size }));
16
16
  };
17
17
  exports.default = Icon;
package/dist/src/mobile/components/IconButton/IconButton.js CHANGED
@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
73
73
  });
74
74
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:active:enabled {\n ", "\n }\n\n ", ";\n"])), function (_a) {
75
75
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
76
- return baseColorKey ? ui_colors_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
76
+ return baseColorKey
77
+ ? (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
78
+ : theme.ui_cpnt_button_fill_base_primary;
77
79
  }, function (_a) {
78
80
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
79
81
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -95,7 +97,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
95
97
  return theme.ui_cpnt_button_line_base_default;
96
98
  }, function (_a) {
97
99
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
98
- return borderColorKey ? ui_colors_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
100
+ return borderColorKey
101
+ ? (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
102
+ : theme.ui_cpnt_button_line_border_enabled;
99
103
  }, function (_a) {
100
104
  var colorTheme = _a.colorTheme;
101
105
  switch (colorTheme) {
package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js CHANGED
@@ -47,7 +47,7 @@ function MobileHeaderBar(_a) {
47
47
  return react_1.default.createElement("div", null);
48
48
  }
49
49
  return (react_1.default.createElement(S_LeftButtonBox, null,
50
- react_1.default.createElement(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, baseColorKey: "ui_cpnt_button_fill_base_transparent" })));
50
+ react_1.default.createElement(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" })));
51
51
  };
52
52
  var title = function () {
53
53
  switch (titleType) {
package/dist/src/mobile/components/TextField/TextField.js CHANGED
@@ -117,12 +117,25 @@ function TextField(_a) {
117
117
  }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
118
118
  }
119
119
  };
120
- return (react_1.default.createElement("div", null,
120
+ return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
121
121
  react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
122
122
  ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
123
123
  }
124
- var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
125
- var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
124
+ var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), function (_a) {
125
+ var size = _a.size;
126
+ return size &&
127
+ {
128
+ small: 'width: 188px;',
129
+ medium: 'width: 188px;',
130
+ large: 'width: 432px;',
131
+ rlarge: 'width: 100%'
132
+ }[size];
133
+ }, function (_a) {
134
+ var responsiveMode = _a.responsiveMode;
135
+ return responsiveMode === 'use' && 'width: 100%';
136
+ });
137
+ var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
138
+ var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
126
139
  var theme = _a.theme;
127
140
  return (46 -
128
141
  Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
@@ -133,21 +146,21 @@ var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
133
146
  Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
134
147
  2;
135
148
  });
136
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
149
+ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
137
150
  var theme = _a.theme;
138
151
  return theme.spacing.spacingC;
139
152
  }, function (_a) {
140
153
  var theme = _a.theme;
141
154
  return theme.spacing.spacingC;
142
155
  });
143
- var medium = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
156
+ var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
144
157
  var theme = _a.theme;
145
158
  return theme.spacing.spacingC;
146
159
  }, function (_a) {
147
160
  var theme = _a.theme;
148
161
  return theme.spacing.spacingC;
149
162
  });
150
- var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
163
+ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
151
164
  var theme = _a.theme;
152
165
  return theme.spacing.spacingD;
153
166
  }, function (_a) {
@@ -163,7 +176,7 @@ var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
163
176
  var textLineType = _a.textLineType;
164
177
  return textLineType === 'auto' && auto;
165
178
  });
166
- var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
179
+ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
167
180
  var theme = _a.theme;
168
181
  return theme.ui_cpnt_textfield_base_normal;
169
182
  }, function (_a) {
@@ -174,21 +187,21 @@ var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6
174
187
  return theme.ui_cpnt_textfield_border_focus;
175
188
  return theme.ui_cpnt_textfield_border_normal;
176
189
  });
177
- var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
190
+ var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
178
191
  var theme = _a.theme;
179
192
  return theme.ui_cpnt_textfield_base_disabled;
180
193
  }, function (_a) {
181
194
  var theme = _a.theme;
182
195
  return theme.ui_cpnt_textfield_border_normal;
183
196
  });
184
- var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
197
+ var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
185
198
  var theme = _a.theme;
186
199
  return theme.ui_cpnt_textfield_base_disabled;
187
200
  }, function (_a) {
188
201
  var theme = _a.theme;
189
202
  return theme.ui_cpnt_textfield_border_normal;
190
203
  });
191
- var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
204
+ var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
192
205
  var theme = _a.theme;
193
206
  return theme.ui_cpnt_textfield_base_normal;
194
207
  }, function (_a) {
@@ -199,21 +212,21 @@ var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObje
199
212
  return theme.ui_cpnt_textfield_border_darktheme_focus;
200
213
  return theme.ui_cpnt_textfield_border_darktheme_normal;
201
214
  });
202
- var dark_read_only = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
215
+ var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
203
216
  var theme = _a.theme;
204
217
  return theme.ui_cpnt_textfield_base_darktheme_disabled;
205
218
  }, function (_a) {
206
219
  var theme = _a.theme;
207
220
  return theme.ui_cpnt_textfield_border_darktheme_normal;
208
221
  });
209
- var dark_disabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
222
+ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
210
223
  var theme = _a.theme;
211
224
  return theme.ui_cpnt_textfield_base_darktheme_disabled;
212
225
  }, function (_a) {
213
226
  var theme = _a.theme;
214
227
  return theme.ui_cpnt_textfield_border_darktheme_normal;
215
228
  });
216
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
229
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
217
230
  var size = _a.size;
218
231
  return size &&
219
232
  {
@@ -244,8 +257,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
244
257
  var responsiveMode = _a.responsiveMode;
245
258
  return responsiveMode === 'use' && 'width: 100%';
246
259
  });
247
- var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
248
- var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
260
+ var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
261
+ var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
249
262
  var theme = _a.theme, colorTheme = _a.colorTheme;
250
263
  return colorTheme === 'none'
251
264
  ? theme.ui_cpnt_textfield_text_error
@@ -264,4 +277,4 @@ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObje
264
277
  return theme.spacing.spacingA;
265
278
  });
266
279
  exports.default = TextField;
267
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
280
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
package/dist/src/mobile/components/TextLabel/TextLabel.js CHANGED
@@ -245,7 +245,7 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
245
245
  });
246
246
  var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
247
247
  var colorOverride = _a.colorOverride;
248
- return colorOverride && common_1.uiColors[colorOverride];
248
+ return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
249
249
  });
250
250
  var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
251
251
  var lineLimit = _a.lineLimit;
package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js CHANGED
@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
62
62
  });
63
63
  var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"], ["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-image: ", ";\n }\n\n ", ";\n"])), function (_a) {
64
64
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
65
- return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
65
+ return baseColorKey
66
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
67
+ : theme.ui_cpnt_button_fill_base_primary;
66
68
  }, function (_a) {
67
69
  var theme = _a.theme, baseColorKey = _a.baseColorKey;
68
70
  return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -92,7 +94,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
92
94
  return theme.ui_cpnt_button_line_base_default;
93
95
  }, function (_a) {
94
96
  var theme = _a.theme, borderColorKey = _a.borderColorKey;
95
- return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
97
+ return borderColorKey
98
+ ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
99
+ : theme.ui_cpnt_button_line_border_enabled;
96
100
  }, function (_a) {
97
101
  var colorTheme = _a.colorTheme;
98
102
  switch (colorTheme) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "0.5.21",
3
+ "version": "0.6.2",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",