pds-dev-kit-web 0.4.1 → 0.4.2

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import { UITheme, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, theme } from './src/common';
+import { UITheme, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, setTone, getTone, theme } from './src/common';
 export { UITheme, PdsDevKitTheme };
+export { setTone, getTone };
 export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors };
 export { theme };
 import { Divider, Icon, ImageView, Spacing } from './src/hybrid';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_TextLabel = exports.M_StatusBlock = exports.M_IconButton = 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_TextLabel = exports.D_StatusBlock = exports.D_IconButton = exports.D_Hero = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.theme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
+exports.M_TextLabel = exports.M_StatusBlock = exports.M_IconButton = 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_TextLabel = exports.D_StatusBlock = exports.D_IconButton = exports.D_Hero = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.theme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = exports.getTone = exports.setTone = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -13,6 +13,8 @@ Object.defineProperty(exports, "mobileLineHeight", { enumerable: true, get: func
 Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function () { return common_1.boxShadow; } });
 Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return common_1.spacing; } });
 Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return common_1.uiColors; } });
+Object.defineProperty(exports, "setTone", { enumerable: true, get: function () { return common_1.setTone; } });
+Object.defineProperty(exports, "getTone", { enumerable: true, get: function () { return common_1.getTone; } });
 Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return common_1.theme; } });
 // hybrid
 var hybrid_1 = require("./src/hybrid");

package/dist/src/common/index.d.ts

@@ -2,7 +2,8 @@ import { UITheme } from './styles/colorSet/ui-type';
 import { PdsDevKitTheme } from './types/styled-components';
 export { UITheme, PdsDevKitTheme };
 import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
-import { uiColors } from './styles/ui-colors';
+import { uiColors, setTone, getTone } from './styles/ui-colors';
 export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors };
+export { setTone, getTone };
 import { theme } from './styles';
 export { theme };

package/dist/src/common/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.theme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
+exports.theme = exports.getTone = exports.setTone = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
 // theme
 var theme_1 = require("./styles/theme");
 Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return theme_1.fontWeight; } });
@@ -14,6 +14,8 @@ Object.defineProperty(exports, "boxShadow", { enumerable: true, get: function ()
 Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return theme_1.spacing; } });
 var ui_colors_1 = require("./styles/ui-colors");
 Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return ui_colors_1.uiColors; } });
+Object.defineProperty(exports, "setTone", { enumerable: true, get: function () { return ui_colors_1.setTone; } });
+Object.defineProperty(exports, "getTone", { enumerable: true, get: function () { return ui_colors_1.getTone; } });
 // all theme
 var styles_1 = require("./styles");
 Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return styles_1.theme; } });

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

@@ -1,2 +1,4 @@
 import { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
+export declare const setTone: (tone: 'dark' | 'light') => void;
+export declare const getTone: () => "dark" | "light";

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

@@ -3,25 +3,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uiColors = void 0;
+exports.getTone = exports.setTone = exports.uiColors = void 0;
 var colorSet_1 = __importDefault(require("./colorSet"));
 function buildCascadedColors(lowLevel, highLevel, override) {
     if (override === void 0) { override = {}; }
     return Object.keys(highLevel).reduce(function (acc, key) {
+        console.log('highLevel', highLevel);
         var keyInLowLevelColors = highLevel[key];
+        console.log('keyInLowLevelColors', keyInLowLevelColors);
         var colorValue;
         if (keyInLowLevelColors.indexOf('/') !== -1) {
             colorValue = override[key]
                 ? override[key]
                 : lowLevel[keyInLowLevelColors.split('/')[0]] + lowLevel[keyInLowLevelColors.split('/')[1]];
+            // console.log('colorValue1', colorValue);
         }
         else {
             colorValue = override[key] ? override[key] : lowLevel[keyInLowLevelColors];
+            console.log('colorValue2', colorValue);
         }
         acc[key] = colorValue;
+        console.log('acc : ', acc);
         return acc;
     }, {});
 }
+var colorSetting = {
+    tone: 'dark',
+    customPalette: {}
+};
 // fetch-palette-phase
 // 서버로부터 해당 채널이 라이트 톤을 사용하는지, 다크 톤을 사용하는지 가져오기
 // 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
@@ -32,7 +41,16 @@ var channelSettings = {
         usr_good_job: '#999999'
     }
 };
-var phaseTwoJSON = channelSettings.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
+var phaseTwoJSON = colorSetting.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
 // ui-color-build-phase
-var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, channelSettings.customPalette);
+var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
+var setTone = function (tone) {
+    colorSetting.tone = tone; // light
+};
+exports.setTone = setTone;
+var getTone = function () {
+    console.log('colorSetting', colorSetting);
+    return colorSetting.tone;
+};
+exports.getTone = getTone;

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

@@ -4,12 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var ui_colors_1 = require("../../../common/styles/ui-colors");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Hero(_a) {
     var heroText = _a.heroText, leadText = _a.leadText, _b = _a.leadTextColorTheme, leadTextColorTheme = _b === void 0 ? 'normal' : _b;
+    (0, ui_colors_1.getTone)();
+    (0, ui_colors_1.setTone)('light');
+    (0, ui_colors_1.getTone)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_h" }),
+        (0, ui_colors_1.getTone)() === 'dark' ? react_1.default.createElement("div", null, "dark") : react_1.default.createElement("div", null, "light"),
         react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "displayBold", colorTheme: "sysTextPrimary", text: heroText }),
         leadText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f" }),

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

@@ -53,6 +53,7 @@ function IconButton(_a) {
         return iconStateColorObj[fillType];
     };
     return (react_1.default.createElement(S_IconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: onClick, onMouseDown: onMouseDown },
+        (0, ui_colors_1.getTone)() === 'dark' ? react_1.default.createElement("div", null, "dark") : react_1.default.createElement("div", null, "light"),
         react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {

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

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var ui_colors_1 = require("../../../common/styles/ui-colors");
 var TextLabel_1 = require("../TextLabel");
 function StatusBlock(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'basic' : _c, _d = _a.width, width = _d === void 0 ? 'responsive' : _d;
@@ -36,6 +37,7 @@ function StatusBlock(_a) {
         medium: 'body1Bold',
         small: 'body2Bold'
     };
+    (0, ui_colors_1.setTone)('dark');
     return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
 }

package/package.json

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