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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## v4.0.0 (Unreleased)
+
+### Changed
+
+-   Move Branding colors under `@brightlayer-ui/colors` 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.
+
 ## v3.1.1 (June 20, 2022)
 
 ### Changed
@@ -14,7 +22,7 @@
 
 ### Changed
 
--   Changed build module from `commonjs` to `es2015` ([#47](https://github.com/brightlayer-ui/colors/issues/47)).
+-   Changed build module from `commonjs` to `es2015` ([#47](https://github.com/etn-ccis/blui-colors/issues/47)).
 
 ## Package Migration Notice
 

package/README.md

@@ -1,25 +1,46 @@
 # 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
+
 ```
-blue / $blui-blue
-white / $blui-white
-gray / $blui-gray
-black / $blui-black
-darkBlack / $blui-darkBlack
-red / $blui-red
+primary / $blui-primary
+neutral / $blui-neutral
+neutralVariant / $blui-neutralVariant
+error / $blui-error
+warning / $blui-warning
+success / $blui-success
 orange / $blui-orange
-gold / $blui-gold
-yellow / $blui-yellow
-green / $blui-green
-lightBlue / $blui-lightBlue
 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
 
@@ -39,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/commonjs/branding-palette.d.ts

@@ -0,0 +1,30 @@
+/**
+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/branding-palette.js

@@ -0,0 +1,45 @@
+"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 = exports.BrandingColors = void 0;
+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 || (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/colorType.d.ts

@@ -0,0 +1,62 @@
+/**
+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/commonjs/colorType.js

@@ -0,0 +1,9 @@
+"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 });

package/dist/commonjs/index.d.ts

@@ -1,9 +1,2 @@
-/**
-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';
+export { BrandingColors, chartColors as ChartColors } from './branding-palette';

package/dist/commonjs/index.js

@@ -1,11 +1,4 @@
 "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);
@@ -21,6 +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.BLUIColors = void 0;
+exports.ChartColors = exports.BrandingColors = void 0;
 __exportStar(require("./palette"), exports);
-exports.BLUIColors = require("./palette");
+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/commonjs/palette.d.ts

@@ -5,17 +5,12 @@ 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 { BLUIColor } from '@brightlayer-ui/types';
-export declare const blue: BLUIColor;
-export declare const white: BLUIColor;
-export declare const gray: BLUIColor;
-export declare const black: BLUIColor;
-export declare const darkBlack: BLUIColor;
-export declare const vantaBlack: BLUIColor;
-export declare const red: BLUIColor;
-export declare const orange: BLUIColor;
-export declare const gold: BLUIColor;
-export declare const yellow: BLUIColor;
-export declare const green: BLUIColor;
-export declare const lightBlue: BLUIColor;
-export declare const purple: BLUIColor;
+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/commonjs/palette.js

@@ -1,163 +1,135 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.purple = exports.lightBlue = exports.green = exports.yellow = exports.gold = exports.orange = exports.red = exports.vantaBlack = exports.darkBlack = exports.black = exports.gray = exports.white = exports.blue = void 0;
+exports.purple = exports.orange = exports.success = exports.warning = exports.error = exports.neutralVariant = exports.neutral = exports.primary = void 0;
 /* Primary Colors / User Interface Colors */
-exports.blue = {
-    50: '#e0eff8',
-    100: '#b3d7ec',
-    200: '#80bde0',
-    300: '#4da3d4',
-    400: '#268fca',
-    500: '#007bc1',
-    600: '#0073bb',
-    700: '#0068b3',
-    800: '#005eab',
-    900: '#004b9e',
-    contrastDefaultColor: 'light',
+exports.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',
 };
-exports.white = {
-    50: '#ffffff',
-    100: '#fbfbfb',
-    200: '#f7f8f8',
-    300: '#f3f5f5',
-    400: '#f1f2f2',
-    500: '#eef0f0',
-    600: '#eceeee',
-    700: '#e9ecec',
-    800: '#e7e9e9',
-    900: '#e2e5e5',
-    contrastDefaultColor: 'dark',
+exports.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',
 };
-exports.gray = {
-    50: '#eef0f0',
-    100: '#d5d8da',
-    200: '#b9bfc2',
-    300: '#9ca5a9',
-    400: '#879196',
-    500: '#727e84',
-    600: '#6a767c',
-    700: '#5f6b71',
-    800: '#556167',
-    900: '#424e54',
-    contrastDefaultColor: 'light',
+exports.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',
 };
-exports.black = {
-    50: '#e8eaea',
-    100: '#c6cacc',
-    200: '#a1a7aa',
-    300: '#7b8387',
-    400: '#5e696e',
-    500: '#424e54',
-    600: '#3c474d',
-    700: '#333d43',
-    800: '#2b353a',
-    900: '#1d2529',
-    contrastDefaultColor: 'light',
-};
-exports.darkBlack = {
-    50: '#202224',
-    100: '#182022',
-    200: '#182022',
-    300: '#13181b',
-    400: '#101417',
-    500: '#0b0e10',
-    600: '#0b0e10',
-    700: '#08090a',
-    800: '#08090a',
-    900: '#000000',
-    contrastDefaultColor: 'light',
-};
-// alias
-exports.vantaBlack = exports.darkBlack;
 /* Status Colors */
-exports.red = {
-    50: '#f9e8e8',
-    100: '#efc5c5',
-    200: '#e59e9e',
-    300: '#da7777',
-    400: '#d2595a',
-    500: '#ca3c3d',
-    600: '#c53637',
-    700: '#bd2e2f',
-    800: '#b72727',
-    900: '#ab1a1a',
-    contrastDefaultColor: 'light',
-};
-exports.orange = {
-    50: '#feefe4',
-    100: '#fcd6bc',
-    200: '#fabb90',
-    300: '#f7a064',
-    400: '#f68b42',
-    500: '#f47721',
-    600: '#f36f1d',
-    700: '#f16418',
-    800: '#ef5a14',
-    900: '#ec470b',
-    contrastDefaultColor: 'light',
-};
-exports.gold = {
-    50: '#fdf5e4',
-    100: '#fbe6bc',
-    200: '#f8d58f',
-    300: '#f5c462',
-    400: '#f2b741',
-    500: '#f0aa1f',
-    600: '#eea31b',
-    700: '#ec9917',
-    800: '#e99012',
-    900: '#e57f0a',
-    contrastDefaultColor: 'dark',
+exports.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',
 };
-exports.yellow = {
-    50: '#fdf9e6',
-    100: '#fbefc1',
-    200: '#f8e597',
-    300: '#f5db6d',
-    400: '#f2d34e',
-    500: '#f0cb2f',
-    600: '#eec62a',
-    700: '#ecbe23',
-    800: '#e9b81d',
-    900: '#e5ac12',
-    contrastDefaultColor: 'dark',
+exports.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',
 };
-exports.green = {
-    50: '#e7f6e4',
-    100: '#c4e9bc',
-    200: '#9cdb90',
-    300: '#74cc63',
-    400: '#57c141',
-    500: '#39b620',
-    600: '#33af1c',
-    700: '#2ca618',
-    800: '#249e13',
-    900: '#178e0b',
-    contrastDefaultColor: 'light',
+exports.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',
 };
-exports.lightBlue = {
-    50: '#e0f1fd',
-    100: '#b3dbfb',
-    200: '#80c4f9',
-    300: '#4dacf6',
-    400: '#269af4',
-    500: '#0088f2',
-    600: '#0080f0',
-    700: '#0075ee',
-    800: '#006bec',
-    900: '#0058e8',
-    contrastDefaultColor: 'dark',
+exports.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',
 };
 exports.purple = {
-    50: '#f3e8fd',
-    100: '#e0c5fa',
-    200: '#cc9ff7',
-    300: '#b779f4',
-    400: '#a75cf1',
-    500: '#983fef',
-    600: '#9039ed',
-    700: '#8531eb',
-    800: '#7b29e8',
-    900: '#6a1be4',
-    contrastDefaultColor: 'light',
+    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',
 };