@brightlayer-ui/colors 4.0.0-alpha.1 → 4.0.0-alpha.3

package/CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Changed
 
--   Move Branding colors under `@brightlayer-ui/colors` package.
+-   Move Branding colors under `@brightlayer-ui/colors/branding` package.
 -   Update UI colors and Branding colors as per new Material Design 3.
 -   Remove dependency of `@brightlayer-ui/types` and moved type in `@brightlayer-ui/colors` package.
 

package/README.md

@@ -79,8 +79,22 @@ background-color: $brand-lightGray;
 ### JSON Object
 
 ```
-import  Colors, {BrandingColors} from '@brightlayer-ui/colors';
+import Colors, {primary} from '@brightlayer-ui/colors';
+import BrandingColors, {lightGray} from '@brightlayer-ui/colors/branding';
 ...
 <div style={{background: Colors.primary[10]}}/>
-<div style={{background: BrandingColors.teal}}/>
+<div style={{background: primary[10]}}/>
+<div style={{background: BrandingColors.lightGray}}/>
+<div style={{background: lightGray}}/>
+```
+
+## Migration from v3 to v4
+
+In version 4.0.0, we have updated the UI colors and branding colors palette.
+
+We have deprecated `@brightlayer-ui/colors-branding` and `@brightlayer-ui/types` packages, as they will be part of the `@brightlayer-ui/colors` package.
+The branding colors palette and individual branding colors now can be imported from `@brightlayer-ui/colors/branding`.
+
+```
+import BrandingColors, {lightGray} from '@brightlayer-ui/colors/branding';
 ```

package/{dist/es2015 → branding}/branding-palette.d.ts

@@ -5,7 +5,7 @@ All rights reserved.
  
 This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
 **/
-export declare enum BrandingColors {
+declare enum BrandingColors {
     lightGray = "#98A4AE",
     gray = "#5B6770",
     darkGray = "#333F48",
@@ -28,3 +28,5 @@ export declare enum BrandingColors {
     wine = "#9D2235"
 }
 export declare const chartColors: BrandingColors[];
+export declare const lightGray: BrandingColors, gray: BrandingColors, darkGray: BrandingColors, sky: BrandingColors, eatonBlue: BrandingColors, navy: BrandingColors, ash: BrandingColors, teal: BrandingColors, pine: BrandingColors, sage: BrandingColors, citrus: BrandingColors, emerald: BrandingColors, butter: BrandingColors, goldenrod: BrandingColors, toad: BrandingColors, trophy: BrandingColors, sunset: BrandingColors, rust: BrandingColors, crimson: BrandingColors, wine: BrandingColors;
+export default BrandingColors;

package/{dist/commonjs → branding}/branding-palette.js

@@ -7,7 +7,7 @@ All rights reserved.
 This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chartColors = exports.BrandingColors = void 0;
+exports.wine = exports.crimson = exports.rust = exports.sunset = exports.trophy = exports.toad = exports.goldenrod = exports.butter = exports.emerald = exports.citrus = exports.sage = exports.pine = exports.teal = exports.ash = exports.navy = exports.eatonBlue = exports.sky = exports.darkGray = exports.gray = exports.lightGray = exports.chartColors = void 0;
 var BrandingColors;
 (function (BrandingColors) {
     BrandingColors["lightGray"] = "#98A4AE";
@@ -30,7 +30,7 @@ var BrandingColors;
     BrandingColors["rust"] = "#B94700";
     BrandingColors["crimson"] = "#D22730";
     BrandingColors["wine"] = "#9D2235";
-})(BrandingColors || (exports.BrandingColors = BrandingColors = {}));
+})(BrandingColors || (BrandingColors = {}));
 exports.chartColors = [
     BrandingColors.teal,
     BrandingColors.citrus,
@@ -43,3 +43,5 @@ exports.chartColors = [
     BrandingColors.navy,
     BrandingColors.sky,
 ];
+exports.lightGray = BrandingColors.lightGray, exports.gray = BrandingColors.gray, exports.darkGray = BrandingColors.darkGray, exports.sky = BrandingColors.sky, exports.eatonBlue = BrandingColors.eatonBlue, exports.navy = BrandingColors.navy, exports.ash = BrandingColors.ash, exports.teal = BrandingColors.teal, exports.pine = BrandingColors.pine, exports.sage = BrandingColors.sage, exports.citrus = BrandingColors.citrus, exports.emerald = BrandingColors.emerald, exports.butter = BrandingColors.butter, exports.goldenrod = BrandingColors.goldenrod, exports.toad = BrandingColors.toad, exports.trophy = BrandingColors.trophy, exports.sunset = BrandingColors.sunset, exports.rust = BrandingColors.rust, exports.crimson = BrandingColors.crimson, exports.wine = BrandingColors.wine;
+exports.default = BrandingColors;

package/branding/index.d.ts

@@ -0,0 +1,3 @@
+export * from './branding-palette';
+import BrandingColors from './branding-palette';
+export default BrandingColors;

package/{dist/commonjs → branding}/index.js

@@ -14,8 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartColors = exports.BrandingColors = void 0;
-__exportStar(require("./palette"), exports);
+__exportStar(require("./branding-palette"), exports);
 var branding_palette_1 = require("./branding-palette");
-Object.defineProperty(exports, "BrandingColors", { enumerable: true, get: function () { return branding_palette_1.BrandingColors; } });
-Object.defineProperty(exports, "ChartColors", { enumerable: true, get: function () { return branding_palette_1.chartColors; } });
+exports.default = branding_palette_1.default;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './palette';
+import Colors from './palette';
+export default Colors;

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./palette"), exports);
+var palette_1 = require("./palette");
+exports.default = palette_1.default;

package/dist/{es2015/palette.d.ts → palette.d.ts}

@@ -14,3 +14,14 @@ export declare const warning: Warning;
 export declare const success: Success;
 export declare const orange: Orange;
 export declare const purple: Purple;
+declare const Colors: {
+    primary: Primary;
+    neutral: Neutral;
+    neutralVariant: NeutralVariant;
+    error: Error;
+    warning: Warning;
+    success: Success;
+    orange: Orange;
+    purple: Purple;
+};
+export default Colors;

package/dist/{commonjs/palette.js → palette.js}

@@ -133,3 +133,14 @@ exports.purple = {
     98: '#FFF7FF',
     100: '#FFFFFF',
 };
+var Colors = {
+    primary: exports.primary,
+    neutral: exports.neutral,
+    neutralVariant: exports.neutralVariant,
+    error: exports.error,
+    warning: exports.warning,
+    success: exports.success,
+    orange: exports.orange,
+    purple: exports.purple,
+};
+exports.default = Colors;

package/package.json

@@ -1,12 +1,14 @@
 {
     "name": "@brightlayer-ui/colors",
-    "version": "4.0.0-alpha.1",
+    "version": "4.0.0-alpha.3",
     "description": "Brightlayer UI colors for Eaton applications",
-    "main": "./dist/commonjs/index.js",
-    "types": "./dist/commonjs/index.d.ts",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
     "scripts": {
         "test": "./buildTest.sh",
-        "build": "yarn && tsc --module commonjs --outDir dist/commonjs && tsc --module ES2015 --outDir dist/es2015",
+        "clear:build": "rm -rf dist && rm -rf branding",
+        "move:branding": "cp -r ./dist/branding branding && rm -rf ./dist/branding",
+        "build": "yarn clear:build && yarn tsc && yarn move:branding",
         "prettier": "prettier \"**/**.{ts,tsx,js,jsx,json,css,scss,html,md}\" --write",
         "precommit": "yarn && yarn prettier && yarn build && yarn test",
         "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
@@ -42,7 +44,8 @@
         "LICENSE",
         "CHANGELOG.md",
         "dist/",
-        "branding-pallete.scss",
-        "palette.scss"
+        "branding-palette.scss",
+        "palette.scss",
+        "branding/"
     ]
 }

package/dist/commonjs/branding-palette.d.ts

@@ -1,30 +0,0 @@
-/**
-Copyright (c) 2018-present, Eaton
- 
-All rights reserved.
- 
-This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
-**/
-export declare enum BrandingColors {
-    lightGray = "#98A4AE",
-    gray = "#5B6770",
-    darkGray = "#333F48",
-    sky = "#71B2C9",
-    eatonBlue = "#005EB8",
-    navy = "#003865",
-    ash = "#A3B2A4",
-    teal = "#00B2A9",
-    pine = "#43695B",
-    sage = "#B7CE95",
-    citrus = "#B5BD00",
-    emerald = "#4C8D2B",
-    butter = "#F3DD6D",
-    goldenrod = "#FFC72C",
-    toad = "#AD841F",
-    trophy = "#F0B323",
-    sunset = "#ED8B00",
-    rust = "#B94700",
-    crimson = "#D22730",
-    wine = "#9D2235"
-}
-export declare const chartColors: BrandingColors[];

package/dist/commonjs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './palette';
-export { BrandingColors, chartColors as ChartColors } from './branding-palette';

package/dist/commonjs/palette.d.ts

@@ -1,16 +0,0 @@
-/**
-Copyright (c) 2018-present, Eaton
- 
-All rights reserved.
- 
-This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
-**/
-import { Error, Neutral, NeutralVariant, Orange, Primary, Purple, Success, Warning } from './colorType';
-export declare const primary: Primary;
-export declare const neutral: Neutral;
-export declare const neutralVariant: NeutralVariant;
-export declare const error: Error;
-export declare const warning: Warning;
-export declare const success: Success;
-export declare const orange: Orange;
-export declare const purple: Purple;

package/dist/es2015/branding-palette.js

@@ -1,42 +0,0 @@
-/**
-Copyright (c) 2018-present, Eaton
- 
-All rights reserved.
- 
-This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
-**/
-export var BrandingColors;
-(function (BrandingColors) {
-    BrandingColors["lightGray"] = "#98A4AE";
-    BrandingColors["gray"] = "#5B6770";
-    BrandingColors["darkGray"] = "#333F48";
-    BrandingColors["sky"] = "#71B2C9";
-    BrandingColors["eatonBlue"] = "#005EB8";
-    BrandingColors["navy"] = "#003865";
-    BrandingColors["ash"] = "#A3B2A4";
-    BrandingColors["teal"] = "#00B2A9";
-    BrandingColors["pine"] = "#43695B";
-    BrandingColors["sage"] = "#B7CE95";
-    BrandingColors["citrus"] = "#B5BD00";
-    BrandingColors["emerald"] = "#4C8D2B";
-    BrandingColors["butter"] = "#F3DD6D";
-    BrandingColors["goldenrod"] = "#FFC72C";
-    BrandingColors["toad"] = "#AD841F";
-    BrandingColors["trophy"] = "#F0B323";
-    BrandingColors["sunset"] = "#ED8B00";
-    BrandingColors["rust"] = "#B94700";
-    BrandingColors["crimson"] = "#D22730";
-    BrandingColors["wine"] = "#9D2235";
-})(BrandingColors || (BrandingColors = {}));
-export var chartColors = [
-    BrandingColors.teal,
-    BrandingColors.citrus,
-    BrandingColors.pine,
-    BrandingColors.emerald,
-    BrandingColors.wine,
-    BrandingColors.crimson,
-    BrandingColors.sunset,
-    BrandingColors.rust,
-    BrandingColors.navy,
-    BrandingColors.sky,
-];

package/dist/es2015/colorType.d.ts

@@ -1,62 +0,0 @@
-/**
-Copyright (c) 2018-present, Eaton
- 
-All rights reserved.
- 
-This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
-**/
-export declare type BLUIColor = {
-    0: string;
-    10: string;
-    20: string;
-    30: string;
-    40: string;
-    50: string;
-    60: string;
-    70: string;
-    80: string;
-    90: string;
-    100: string;
-};
-export declare type Primary = BLUIColor & {
-    95: string;
-    99: string;
-};
-export declare type Neutral = BLUIColor & {
-    4: string;
-    6: string;
-    12: string;
-    17: string;
-    87: string;
-    92: string;
-    94: string;
-    95: string;
-    97: string;
-    98: string;
-    99: string;
-};
-export declare type NeutralVariant = BLUIColor & {
-    95: string;
-    99: string;
-};
-export declare type Error = BLUIColor & {
-    95: string;
-    99: string;
-};
-export declare type Warning = BLUIColor & {
-    95: string;
-    98: string;
-};
-export declare type Success = BLUIColor & {
-    4: string;
-    95: string;
-    98: string;
-};
-export declare type Orange = BLUIColor & {
-    95: string;
-    98: string;
-};
-export declare type Purple = BLUIColor & {
-    95: string;
-    98: string;
-};

package/dist/es2015/colorType.js

@@ -1,8 +0,0 @@
-/**
-Copyright (c) 2018-present, Eaton
- 
-All rights reserved.
- 
-This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
-**/
-export {};

package/dist/es2015/index.d.ts

@@ -1,2 +0,0 @@
-export * from './palette';
-export { BrandingColors, chartColors as ChartColors } from './branding-palette';

package/dist/es2015/index.js

@@ -1,2 +0,0 @@
-export * from './palette';
-export { BrandingColors, chartColors as ChartColors } from './branding-palette';

package/dist/es2015/palette.js

@@ -1,132 +0,0 @@
-/* Primary Colors / User Interface Colors */
-export var primary = {
-    0: '#000000',
-    10: '#001B3D',
-    20: '#003063',
-    30: '#00468C',
-    40: '#005EB8',
-    50: '#1C77CC',
-    60: '#4D9FEC',
-    70: '#79BFFF',
-    80: '#B1DAFF',
-    90: '#D0EAFD',
-    95: '#E5F5FF',
-    99: '#FDFBFF',
-    100: '#FFFFFF',
-};
-export var neutral = {
-    0: '#000000',
-    4: '#0D1317',
-    6: '#141C1F',
-    10: '#192024',
-    12: '#1E262A',
-    17: '#293338',
-    20: '#333F48',
-    30: '#414E54',
-    40: '#4F5B63',
-    50: '#5B6770',
-    60: '#737F87',
-    70: '#98A4AE',
-    80: '#BDCAD1',
-    87: '#CED8DE',
-    90: '#D7E0E5',
-    92: '#E0E7EB',
-    94: '#E5ECF0',
-    95: '#EBF1F4',
-    97: '#F2F6F8',
-    98: '#F4F8FA',
-    99: '#F8FCFC',
-    100: '#FFFFFF',
-};
-export var neutralVariant = {
-    0: '#000000',
-    10: '#181C22',
-    20: '#2D3038',
-    30: '#44474E',
-    40: '#5B5E66',
-    50: '#74777F',
-    60: '#8E9099',
-    70: '#A8ABB4',
-    80: '#C4C6CF',
-    90: '#E0E2EC',
-    95: '#EEF0FA',
-    99: '#FDFBFF',
-    100: '#FFFFFF',
-};
-/* Status Colors */
-export var error = {
-    0: '#000000',
-    10: '#410002',
-    20: '#690005',
-    30: '#93000A',
-    40: '#BA1A1A',
-    50: '#DE3730',
-    60: '#FF5449',
-    70: '#FF897D',
-    80: '#FFB4AB',
-    90: '#FFDAD6',
-    95: '#FFEDEA',
-    99: '#FFFBFF',
-    100: '#FFFFFF',
-};
-export var warning = {
-    0: '#000000',
-    10: '#211B00',
-    20: '#383000',
-    30: '#524700',
-    40: '#6C5E00',
-    50: '#887700',
-    60: '#A59116',
-    70: '#C1AB33',
-    80: '#DDC437',
-    90: '#FBE365',
-    95: '#FFF1B6',
-    98: '#FFF9EC',
-    100: '#FFFFFF',
-};
-export var success = {
-    0: '#000000',
-    4: '#022100',
-    10: '#022100',
-    20: '#053900',
-    30: '#0B5300',
-    40: '#126E00',
-    50: '#198900',
-    60: '#27A70B',
-    70: '#48C32E',
-    80: '#65E049',
-    90: '#95F77D',
-    95: '#CBFFB6',
-    98: '#EDFFE1',
-    100: '#FFFFFF',
-};
-export var orange = {
-    0: '#000000',
-    10: '#2D1600',
-    20: '#4B2800',
-    30: '#6B3B00',
-    40: '#8D4F00',
-    50: '#B06400',
-    60: '#D37B15',
-    70: '#ED8B00',
-    80: '#FFB876',
-    90: '#FFDCC0',
-    95: '#FFEEE1',
-    98: '#FFF8F5',
-    100: '#FFFFFF',
-};
-export var purple = {
-    0: '#000000',
-    10: '#2C0051',
-    20: '#480081',
-    30: '#6700B5',
-    40: '#8424DB',
-    50: '#9F45F6',
-    60: '#B56EFF',
-    70: '#C994FF',
-    80: '#DCB8FF',
-    90: '#F0DBFF',
-    95: '#F9ECFF',
-    98: '#FFF7FF',
-    100: '#FFFFFF',
-};