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

package/CHANGELOG.md

@@ -5,11 +5,9 @@
 ### Changed
 
 -   Move Branding colors under `@brightlayer-ui/colors` package.
--   Update UI colors and Branding colors as per new Material You designs.
+-   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.
 
-## v3.1.0 (April 15, 2022)
-
 ## v3.1.1 (June 20, 2022)
 
 ### Changed

package/README.md

@@ -1,9 +1,11 @@
 # Brightlayer UI Colors
 
-This package contains Brightlayer UI color definitions. These are intended for use as primary UI colors.
+This repository contains definitions for various colors used throughout Brightlayer UI applications.
 
 It contains the following color defintions:
 
+## UI Colors
+
 ```
 primary / $blui-primary
 neutral / $blui-neutral
@@ -15,7 +17,30 @@ orange / $blui-orange
 purple / $blui-purple
 ```
 
-These all have color definitions for the following values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
+## Branding Colors
+
+```
+lightGray / $brand-lightGray
+gray / $brand-gray
+darkGray / $brand-darkGray
+sky / $brand-sky
+eatonBlue / $brand-eatonBlue
+navy / $brand-navy
+ash / $brand-ash
+teal / $brand-teal
+pine / $brand-pine
+sage / $brand-sage
+citrus / $brand-citrus
+emerald / $brand-emerald
+butter / $brand-butter
+goldenrod / $brand-goldenrod
+toad / $brand-toad
+trophy / $brand-trophy
+sunset / $brand-sunset
+rust / $brand-rust
+crimson / $brand-crimson
+wine / $brand-wine
+```
 
 ## Installation
 
@@ -35,19 +60,27 @@ yarn add @brightlayer-ui/colors
 
 Incorporating these colors into your project is handled differently depending on the framework that you are using.
 
-### Angular or Ionic
+### CSS variables
+
+```
+// For UI Colors in styles.scss or your top-level sass file
+@import '~@brightlayer-ui/colors/palette.scss';
+...
+background-color: map-get($blui-primary, 10);
+```
 
 ```
-// in styles.scss or your top-level sass file
-@import '~@brightlayer-ui/colors/palette.scss'
+// For Branding Colors in styles.scss or your top-level sass file
+@import '~@brightlayer-ui/colors/branding-palette.scss';
 ...
-background-color: map-get($blui-blue, 500)
+background-color: $brand-lightGray;
 ```
 
-### React or React Native
+### JSON Object
 
 ```
-import * as Colors from '@brightlayer-ui/colors';
+import  Colors, {BrandingColors} from '@brightlayer-ui/colors';
 ...
-<div style={{background: Colors.blue['500']}}/>
+<div style={{background: Colors.primary[10]}}/>
+<div style={{background: BrandingColors.teal}}/>
 ```

package/branding-pallete.scss

@@ -0,0 +1,28 @@
+/**
+Copyright (c) 2021-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.
+**/
+
+$brand-lightGray: #98a4ae;
+$brand-gray: #5b6770;
+$brand-darkGray: #333f48;
+$brand-sky: #71b2c9;
+$brand-eatonBlue: #005eb8;
+$brand-navy: #003865;
+$brand-ash: #a3b2a4;
+$brand-teal: #00b2a9;
+$brand-pine: #43695b;
+$brand-sage: #b7ce95;
+$brand-citrus: #b5bd00;
+$brand-emerald: #4c8d2b;
+$brand-butter: #f3dd6d;
+$brand-goldenrod: #ffc72c;
+$brand-toad: #ad841f;
+$brand-trophy: #f0b323;
+$brand-sunset: #ed8b00;
+$brand-rust: #b94700;
+$brand-crimson: #d22730;
+$brand-wine: #9d2235;

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

@@ -27,3 +27,4 @@ export declare enum BrandingColors {
     crimson = "#D22730",
     wine = "#9D2235"
 }
+export declare const chartColors: BrandingColors[];

package/dist/commonjs/{branding/palette.js → 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.BrandingColors = void 0;
+exports.chartColors = exports.BrandingColors = void 0;
 var BrandingColors;
 (function (BrandingColors) {
     BrandingColors["lightGray"] = "#98A4AE";
@@ -31,3 +31,15 @@ var BrandingColors;
     BrandingColors["crimson"] = "#D22730";
     BrandingColors["wine"] = "#9D2235";
 })(BrandingColors || (exports.BrandingColors = BrandingColors = {}));
+exports.chartColors = [
+    BrandingColors.teal,
+    BrandingColors.citrus,
+    BrandingColors.pine,
+    BrandingColors.emerald,
+    BrandingColors.wine,
+    BrandingColors.crimson,
+    BrandingColors.sunset,
+    BrandingColors.rust,
+    BrandingColors.navy,
+    BrandingColors.sky,
+];

package/dist/commonjs/index.d.ts

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

package/dist/commonjs/index.js

@@ -14,8 +14,8 @@ 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.Colors = exports.BLUIColors = void 0;
-__exportStar(require("./colors/palette"), exports);
-exports.BLUIColors = require("./colors/palette");
-__exportStar(require("./branding/palette"), exports);
-exports.Colors = require("./branding/palette");
+exports.ChartColors = exports.BrandingColors = void 0;
+__exportStar(require("./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; } });

package/dist/{es2015/colors → commonjs}/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.
 **/
-import { Error, Neutral, NeutralVariant, Orange, Primary, Purple, Success, Warning } from '../types/colorType';
+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;

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

@@ -27,3 +27,4 @@ export declare enum BrandingColors {
     crimson = "#D22730",
     wine = "#9D2235"
 }
+export declare const chartColors: BrandingColors[];

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

@@ -28,3 +28,15 @@ export var BrandingColors;
     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/index.d.ts

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

package/dist/es2015/index.js

@@ -1,6 +1,2 @@
-export * from './colors/palette';
-import * as BLUIColors_1 from './colors/palette';
-export { BLUIColors_1 as BLUIColors };
-export * from './branding/palette';
-import * as Colors_1 from './branding/palette';
-export { Colors_1 as Colors };
+export * from './palette';
+export { BrandingColors, chartColors as ChartColors } from './branding-palette';

package/dist/{commonjs/colors → es2015}/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.
 **/
-import { Error, Neutral, NeutralVariant, Orange, Primary, Purple, Success, Warning } from '../types/colorType';
+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;

package/package.json

@@ -1,12 +1,14 @@
 {
     "name": "@brightlayer-ui/colors",
-    "version": "4.0.0-alpha.0",
+    "version": "4.0.0-alpha.1",
     "description": "Brightlayer UI colors for Eaton applications",
     "main": "./dist/commonjs/index.js",
     "types": "./dist/commonjs/index.d.ts",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "./buildTest.sh",
         "build": "yarn && tsc --module commonjs --outDir dist/commonjs && tsc --module ES2015 --outDir dist/es2015",
+        "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",
         "tag:package": "npx -p @brightlayer-ui/tag blui-tag"
     },
@@ -15,11 +17,12 @@
         "url": "git+https://github.com/etn-ccis/blui-colors.git"
     },
     "keywords": [
-        "Brightlayer-UI",
-        "colors",
+        "Brightlayer UI",
+        "Branding",
+        "Colors",
         "Eaton",
-        "quality",
-        "lighting"
+        "Quality",
+        "Lighting"
     ],
     "author": "Brightlayer UI <brightlayer-ui@eaton.com>",
     "license": "BSD-3-Clause",
@@ -27,19 +30,19 @@
         "url": "https://github.com/etn-ccis/blui-colors/issues"
     },
     "homepage": "https://github.com/etn-ccis/blui-colors#readme",
-    "dependencies": {
-        "@brightlayer-ui/types": "^2.0.0"
-    },
+    "prettier": "@brightlayer-ui/prettier-config",
     "devDependencies": {
-        "typescript": "^5.0.3"
+        "typescript": "^5.0.3",
+        "@brightlayer-ui/prettier-config": "^1.0.2",
+        "prettier": "^3.0.3"
     },
     "files": [
         "package.json",
         "README.md",
         "LICENSE",
-        "LICENSES.json",
         "CHANGELOG.md",
         "dist/",
+        "branding-pallete.scss",
         "palette.scss"
     ]
 }

package/LICENSES.json

@@ -1,8 +0,0 @@
-{
-    "@brightlayer-ui/types@2.0.0": {
-        "licenses": "BSD-3-Clause",
-        "repository": "https://github.com/brightlayer-ui/types",
-        "licenseUrl": "https://github.com/brightlayer-ui/types/raw/master/LICENSE",
-        "parents": "@brightlayer-ui/colors"
-    }
-}

package/dist/commonjs/branding/index.d.ts

@@ -1,9 +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 { BrandingColors } from './palette';
-export declare const chartColors: BrandingColors[];

package/dist/commonjs/branding/index.js

@@ -1,25 +0,0 @@
-"use strict";
-/**
- 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.
- **/
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.chartColors = void 0;
-// export * from './palette';
-// import * as Colors from './palette';
-var palette_1 = require("./palette");
-exports.chartColors = [
-    palette_1.BrandingColors.teal,
-    palette_1.BrandingColors.citrus,
-    palette_1.BrandingColors.pine,
-    palette_1.BrandingColors.emerald,
-    palette_1.BrandingColors.wine,
-    palette_1.BrandingColors.crimson,
-    palette_1.BrandingColors.sunset,
-    palette_1.BrandingColors.rust,
-    palette_1.BrandingColors.navy,
-    palette_1.BrandingColors.sky,
-];

package/dist/commonjs/colors/index.d.ts

@@ -1,9 +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 * from './palette';
-export * as BLUIColors from './palette';

package/dist/commonjs/colors/index.js

@@ -1,26 +0,0 @@
-"use strict";
-/**
-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.
-**/
-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 });
-exports.BLUIColors = void 0;
-__exportStar(require("./palette"), exports);
-exports.BLUIColors = require("./palette");

package/dist/commonjs/types/index.d.ts

@@ -1,6 +0,0 @@
-/**
- Copyright (c) 2021-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 * from './colorType';

package/dist/commonjs/types/index.js

@@ -1,22 +0,0 @@
-"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 });
-/**
- Copyright (c) 2021-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.
- **/
-__exportStar(require("./colorType"), exports);

package/dist/es2015/branding/index.d.ts

@@ -1,9 +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 { BrandingColors } from './palette';
-export declare const chartColors: BrandingColors[];

package/dist/es2015/branding/index.js

@@ -1,22 +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 * from './palette';
-// import * as Colors from './palette';
-import { BrandingColors } from './palette';
-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/colors/index.d.ts

@@ -1,9 +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 * from './palette';
-export * as BLUIColors from './palette';

package/dist/es2015/colors/index.js

@@ -1,10 +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 * from './palette';
-import * as BLUIColors_1 from './palette';
-export { BLUIColors_1 as BLUIColors };

package/dist/es2015/types/index.d.ts

@@ -1,6 +0,0 @@
-/**
- Copyright (c) 2021-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 * from './colorType';

package/dist/es2015/types/index.js

@@ -1,6 +0,0 @@
-/**
- Copyright (c) 2021-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 * from './colorType';