@brightlayer-ui/colors 3.1.1-beta.2 → 4.0.0-alpha.0

package/palette.scss

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

package/dist/commonjs/palette.d.ts

@@ -1,21 +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 { 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;

package/dist/commonjs/palette.js

@@ -1,163 +0,0 @@
-"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;
-/* 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.white = {
-    50: '#ffffff',
-    100: '#fbfbfb',
-    200: '#f7f8f8',
-    300: '#f3f5f5',
-    400: '#f1f2f2',
-    500: '#eef0f0',
-    600: '#eceeee',
-    700: '#e9ecec',
-    800: '#e7e9e9',
-    900: '#e2e5e5',
-    contrastDefaultColor: 'dark',
-};
-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.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.yellow = {
-    50: '#fdf9e6',
-    100: '#fbefc1',
-    200: '#f8e597',
-    300: '#f5db6d',
-    400: '#f2d34e',
-    500: '#f0cb2f',
-    600: '#eec62a',
-    700: '#ecbe23',
-    800: '#e9b81d',
-    900: '#e5ac12',
-    contrastDefaultColor: 'dark',
-};
-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.lightBlue = {
-    50: '#e0f1fd',
-    100: '#b3dbfb',
-    200: '#80c4f9',
-    300: '#4dacf6',
-    400: '#269af4',
-    500: '#0088f2',
-    600: '#0080f0',
-    700: '#0075ee',
-    800: '#006bec',
-    900: '#0058e8',
-    contrastDefaultColor: 'dark',
-};
-exports.purple = {
-    50: '#f3e8fd',
-    100: '#e0c5fa',
-    200: '#cc9ff7',
-    300: '#b779f4',
-    400: '#a75cf1',
-    500: '#983fef',
-    600: '#9039ed',
-    700: '#8531eb',
-    800: '#7b29e8',
-    900: '#6a1be4',
-    contrastDefaultColor: 'light',
-};

package/dist/es2015/palette.d.ts

@@ -1,21 +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 { 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;