pds-dev-kit-web 0.6.1 → 0.6.2

package/dist/src/common/styles/theme.js

@@ -97,5 +97,5 @@ exports.spacing = {
     spacingM: '288px',
     spacingN: '320px'
 };
-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);
+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'));
 exports.default = theme;

package/dist/src/common/styles/ui-colors.d.ts

@@ -1,3 +1,8 @@
 import { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
+declare global {
+    interface Window {
+        PdsUtils: any;
+    }
+}
 export declare const customTheme: (tone: string) => any;

package/dist/src/common/styles/ui-colors.js

@@ -36,7 +36,11 @@ var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteCol
 // ui-color-build-phase
 var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
+window.PdsUtils = {
+    tone: 'DARK'
+};
 var customTheme = function (tone) {
+    window.PdsUtils.tone = tone;
     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);
     return buildedColors;
 };

package/dist/src/desktop/components/IconButton/IconButton.js

@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 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) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -100,7 +102,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

package/dist/src/desktop/components/TextLabel/TextLabel.js

@@ -245,7 +245,7 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
 });
 var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var colorOverride = _a.colorOverride;
-    return colorOverride && common_1.uiColors[colorOverride];
+    return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
 });
 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) {
     var lineLimit = _a.lineLimit;

package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js

@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 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) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -97,7 +99,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

package/dist/src/hybrid/components/Icon/Icon.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
-import fillIcons from '../../../common/assets/icons/fill';
-import lineIcons from '../../../common/assets/icons/line';
-import { uiColors } from '../../../common/styles/ui-colors';
-export declare type FillIconNameKeys = keyof typeof fillIcons;
-export declare type LineIconNameKeys = keyof typeof lineIcons;
-export declare type UiColors = keyof typeof uiColors;
+import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconProps = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;

package/dist/src/hybrid/components/Icon/Icon.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var common_1 = require("../../../common");
 var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../../common/assets/icons/line"));
-var ui_colors_1 = require("../../../common/styles/ui-colors");
 var Icon = function (_a) {
     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;
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return react_1.default.createElement(SelectedIcon, { color: ui_colors_1.uiColors[colorKey], size: size });
+    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorKey], size: size }));
 };
 exports.default = Icon;

package/dist/src/mobile/components/IconButton/IconButton.js

@@ -73,7 +73,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 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) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? ui_colors_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -95,7 +97,9 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? ui_colors_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -47,7 +47,7 @@ function MobileHeaderBar(_a) {
             return react_1.default.createElement("div", null);
         }
         return (react_1.default.createElement(S_LeftButtonBox, null,
-            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" })));
+            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" })));
     };
     var title = function () {
         switch (titleType) {

package/dist/src/mobile/components/TextLabel/TextLabel.js

@@ -245,7 +245,7 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_27 || (t
 });
 var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var colorOverride = _a.colorOverride;
-    return colorOverride && common_1.uiColors[colorOverride];
+    return colorOverride && (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorOverride];
 });
 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) {
     var lineLimit = _a.lineLimit;

package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js

@@ -62,7 +62,9 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 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) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[baseColorKey]
+        : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -92,7 +94,9 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey
+        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[borderColorKey]
+        : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",