@brightlayer-ui/colors 3.2.0-alpha.0 → 3.2.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## v3.2.0 (Unreleased)
4
+
5
+ ### Added
6
+
7
+ - Added new color token `highlight` and `highlightBlue`.
8
+
9
+ ### Changed
10
+
11
+ - Updated palette color values for blue, white, gray, black, and darkBlack.
12
+
3
13
  ## v3.1.1 (June 20, 2022)
4
14
 
5
15
  ### Changed
@@ -19,3 +19,5 @@ export declare const yellow: BLUIColor;
19
19
  export declare const green: BLUIColor;
20
20
  export declare const lightBlue: BLUIColor;
21
21
  export declare const purple: BLUIColor;
22
+ export declare const highlight: string;
23
+ export declare const highlightBlue: string;
@@ -1,69 +1,69 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ exports.highlightBlue = exports.highlight = 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;
4
4
  /* Primary Colors / User Interface Colors */
5
5
  exports.blue = {
6
- 50: '#e0eff8',
7
- 100: '#b3d7ec',
8
- 200: '#80bde0',
9
- 300: '#4da3d4',
10
- 400: '#268fca',
11
- 500: '#007bc1',
12
- 600: '#0073bb',
13
- 700: '#0068b3',
14
- 800: '#005eab',
15
- 900: '#004b9e',
6
+ 50: '#ecf0ff',
7
+ 100: '#d7e2ff',
8
+ 200: '#abc7ff',
9
+ 300: '#5590ef',
10
+ 400: '#3776d3',
11
+ 500: '#005eb8',
12
+ 600: '#0050a5',
13
+ 700: '#00458f',
14
+ 800: '#003a7a',
15
+ 900: '#002f66',
16
16
  contrastDefaultColor: 'light',
17
17
  };
18
18
  exports.white = {
19
19
  50: '#ffffff',
20
- 100: '#fbfbfb',
20
+ 100: '#fcfcfd',
21
21
  200: '#f7f8f8',
22
- 300: '#f3f5f5',
23
- 400: '#f1f2f2',
24
- 500: '#eef0f0',
25
- 600: '#eceeee',
26
- 700: '#e9ecec',
27
- 800: '#e7e9e9',
28
- 900: '#e2e5e5',
22
+ 300: '#f4f4f5',
23
+ 400: '#f1f2f3',
24
+ 500: '#f2f2f3',
25
+ 600: '#ededee',
26
+ 700: '#e8e9ea',
27
+ 800: '#e2e4e5',
28
+ 900: '#dddfe0',
29
29
  contrastDefaultColor: 'dark',
30
30
  };
31
31
  exports.gray = {
32
- 50: '#eef0f0',
33
- 100: '#d5d8da',
34
- 200: '#b9bfc2',
35
- 300: '#9ca5a9',
36
- 400: '#879196',
37
- 500: '#727e84',
38
- 600: '#6a767c',
39
- 700: '#5f6b71',
40
- 800: '#556167',
41
- 900: '#424e54',
32
+ 50: '#ededee',
33
+ 100: '#d4d6d8',
34
+ 200: '#bbbec2',
35
+ 300: '#a2a7ad',
36
+ 400: '#898f97',
37
+ 500: '#646b74',
38
+ 600: '#616972',
39
+ 700: '#535a63',
40
+ 800: '#444b53',
41
+ 900: '#353c44',
42
42
  contrastDefaultColor: 'light',
43
43
  };
44
44
  exports.black = {
45
- 50: '#e8eaea',
46
- 100: '#c6cacc',
47
- 200: '#a1a7aa',
48
- 300: '#7b8387',
49
- 400: '#5e696e',
50
- 500: '#424e54',
51
- 600: '#3c474d',
52
- 700: '#333d43',
53
- 800: '#2b353a',
54
- 900: '#1d2529',
45
+ 50: '#f2f2f3',
46
+ 100: '#dddfe0',
47
+ 200: '#a4acb6',
48
+ 300: '#727989',
49
+ 400: '#565c64',
50
+ 500: '#353c44',
51
+ 600: '#30363f',
52
+ 700: '#2b303a',
53
+ 800: '#1b2028',
54
+ 900: '#11171d',
55
55
  contrastDefaultColor: 'light',
56
56
  };
57
57
  exports.darkBlack = {
58
- 50: '#202224',
59
- 100: '#182022',
60
- 200: '#182022',
61
- 300: '#13181b',
62
- 400: '#101417',
63
- 500: '#0b0e10',
64
- 600: '#0b0e10',
65
- 700: '#08090a',
66
- 800: '#08090a',
58
+ 50: '#2d313c',
59
+ 100: '#282d37',
60
+ 200: '#242933',
61
+ 300: '#1b2028',
62
+ 400: '#1a2129',
63
+ 500: '#11171d',
64
+ 600: '#0e151b',
65
+ 700: '#0c1118',
66
+ 800: '#091016',
67
67
  900: '#000000',
68
68
  contrastDefaultColor: 'light',
69
69
  };
@@ -161,3 +161,5 @@ exports.purple = {
161
161
  900: '#6a1be4',
162
162
  contrastDefaultColor: 'light',
163
163
  };
164
+ exports.highlight = '#5590EF';
165
+ exports.highlightBlue = '#7BABFF';
@@ -19,3 +19,5 @@ export declare const yellow: BLUIColor;
19
19
  export declare const green: BLUIColor;
20
20
  export declare const lightBlue: BLUIColor;
21
21
  export declare const purple: BLUIColor;
22
+ export declare const highlight: string;
23
+ export declare const highlightBlue: string;
@@ -1,66 +1,66 @@
1
1
  /* Primary Colors / User Interface Colors */
2
2
  export var blue = {
3
- 50: '#e0eff8',
4
- 100: '#b3d7ec',
5
- 200: '#80bde0',
6
- 300: '#4da3d4',
7
- 400: '#268fca',
8
- 500: '#007bc1',
9
- 600: '#0073bb',
10
- 700: '#0068b3',
11
- 800: '#005eab',
12
- 900: '#004b9e',
3
+ 50: '#ecf0ff',
4
+ 100: '#d7e2ff',
5
+ 200: '#abc7ff',
6
+ 300: '#5590ef',
7
+ 400: '#3776d3',
8
+ 500: '#005eb8',
9
+ 600: '#0050a5',
10
+ 700: '#00458f',
11
+ 800: '#003a7a',
12
+ 900: '#002f66',
13
13
  contrastDefaultColor: 'light',
14
14
  };
15
15
  export var white = {
16
16
  50: '#ffffff',
17
- 100: '#fbfbfb',
17
+ 100: '#fcfcfd',
18
18
  200: '#f7f8f8',
19
- 300: '#f3f5f5',
20
- 400: '#f1f2f2',
21
- 500: '#eef0f0',
22
- 600: '#eceeee',
23
- 700: '#e9ecec',
24
- 800: '#e7e9e9',
25
- 900: '#e2e5e5',
19
+ 300: '#f4f4f5',
20
+ 400: '#f1f2f3',
21
+ 500: '#f2f2f3',
22
+ 600: '#ededee',
23
+ 700: '#e8e9ea',
24
+ 800: '#e2e4e5',
25
+ 900: '#dddfe0',
26
26
  contrastDefaultColor: 'dark',
27
27
  };
28
28
  export var gray = {
29
- 50: '#eef0f0',
30
- 100: '#d5d8da',
31
- 200: '#b9bfc2',
32
- 300: '#9ca5a9',
33
- 400: '#879196',
34
- 500: '#727e84',
35
- 600: '#6a767c',
36
- 700: '#5f6b71',
37
- 800: '#556167',
38
- 900: '#424e54',
29
+ 50: '#ededee',
30
+ 100: '#d4d6d8',
31
+ 200: '#bbbec2',
32
+ 300: '#a2a7ad',
33
+ 400: '#898f97',
34
+ 500: '#646b74',
35
+ 600: '#616972',
36
+ 700: '#535a63',
37
+ 800: '#444b53',
38
+ 900: '#353c44',
39
39
  contrastDefaultColor: 'light',
40
40
  };
41
41
  export var black = {
42
- 50: '#e8eaea',
43
- 100: '#c6cacc',
44
- 200: '#a1a7aa',
45
- 300: '#7b8387',
46
- 400: '#5e696e',
47
- 500: '#424e54',
48
- 600: '#3c474d',
49
- 700: '#333d43',
50
- 800: '#2b353a',
51
- 900: '#1d2529',
42
+ 50: '#f2f2f3',
43
+ 100: '#dddfe0',
44
+ 200: '#a4acb6',
45
+ 300: '#727989',
46
+ 400: '#565c64',
47
+ 500: '#353c44',
48
+ 600: '#30363f',
49
+ 700: '#2b303a',
50
+ 800: '#1b2028',
51
+ 900: '#11171d',
52
52
  contrastDefaultColor: 'light',
53
53
  };
54
54
  export var darkBlack = {
55
- 50: '#202224',
56
- 100: '#182022',
57
- 200: '#182022',
58
- 300: '#13181b',
59
- 400: '#101417',
60
- 500: '#0b0e10',
61
- 600: '#0b0e10',
62
- 700: '#08090a',
63
- 800: '#08090a',
55
+ 50: '#2d313c',
56
+ 100: '#282d37',
57
+ 200: '#242933',
58
+ 300: '#1b2028',
59
+ 400: '#1a2129',
60
+ 500: '#11171d',
61
+ 600: '#0e151b',
62
+ 700: '#0c1118',
63
+ 800: '#091016',
64
64
  900: '#000000',
65
65
  contrastDefaultColor: 'light',
66
66
  };
@@ -158,3 +158,5 @@ export var purple = {
158
158
  900: '#6a1be4',
159
159
  contrastDefaultColor: 'light',
160
160
  };
161
+ export var highlight = '#5590EF';
162
+ export var highlightBlue = '#7BABFF';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightlayer-ui/colors",
3
- "version": "3.2.0-alpha.0",
3
+ "version": "3.2.0-alpha.2",
4
4
  "description": "Brightlayer UI colors for Eaton applications",
5
5
  "main": "./dist/commonjs/index.js",
6
6
  "types": "./dist/commonjs/index.d.ts",
package/palette.scss CHANGED
@@ -9,16 +9,16 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r
9
9
  /* Primary Colors / User Interface Colors */
10
10
 
11
11
  $blui-blue: (
12
- 50: #e0eff8,
13
- 100: #b3d7ec,
14
- 200: #80bde0,
15
- 300: #4da3d4,
16
- 400: #268fca,
17
- 500: #007bc1,
18
- 600: #0073bb,
19
- 700: #0068b3,
20
- 800: #005eab,
21
- 900: #004b9e,
12
+ 50: #ecf0ff,
13
+ 100: #d7e2ff,
14
+ 200: #abc7ff,
15
+ 300: #5590ef,
16
+ 400: #3776d3,
17
+ 500: #005eb8,
18
+ 600: #0050a5,
19
+ 700: #00458f,
20
+ 800: #003a7a,
21
+ 900: #002f66,
22
22
  contrast: (
23
23
  50: #000000,
24
24
  100: #000000,
@@ -34,15 +34,15 @@ $blui-blue: (
34
34
  );
35
35
  $blui-white: (
36
36
  50: #ffffff,
37
- 100: #fbfbfb,
37
+ 100: #fcfcfd,
38
38
  200: #f7f8f8,
39
- 300: #f3f5f5,
40
- 400: #f1f2f2,
41
- 500: #eef0f0,
42
- 600: #eceeee,
43
- 700: #e9ecec,
44
- 800: #e7e9e9,
45
- 900: #e2e5e5,
39
+ 300: #f4f4f5,
40
+ 400: #f1f2f3,
41
+ 500: #f2f2f3,
42
+ 600: #ededee,
43
+ 700: #e8e9ea,
44
+ 800: #e2e4e5,
45
+ 900: #dddfe0,
46
46
  contrast: (
47
47
  50: #000000,
48
48
  100: #000000,
@@ -57,16 +57,16 @@ $blui-white: (
57
57
  ),
58
58
  );
59
59
  $blui-gray: (
60
- 50: #eef0f0,
61
- 100: #d5d8da,
62
- 200: #b9bfc2,
63
- 300: #9ca5a9,
64
- 400: #879196,
65
- 500: #727e84,
66
- 600: #6a767c,
67
- 700: #5f6b71,
68
- 800: #556167,
69
- 900: #424e54,
60
+ 50: #ededee,
61
+ 100: #d4d6d8,
62
+ 200: #bbbec2,
63
+ 300: #a2a7ad,
64
+ 400: #898f97,
65
+ 500: #646b74,
66
+ 600: #616972,
67
+ 700: #535a63,
68
+ 800: #444b53,
69
+ 900: #353c44,
70
70
  contrast: (
71
71
  50: #000000,
72
72
  100: #000000,
@@ -81,16 +81,16 @@ $blui-gray: (
81
81
  ),
82
82
  );
83
83
  $blui-black: (
84
- 50: #e8eaea,
85
- 100: #c6cacc,
86
- 200: #a1a7aa,
87
- 300: #7b8387,
88
- 400: #5e696e,
89
- 500: #424e54,
90
- 600: #3c474d,
91
- 700: #333d43,
92
- 800: #2b353a,
93
- 900: #1d2529,
84
+ 50: #f2f2f3,
85
+ 100: #dddfe0,
86
+ 200: #a4acb6,
87
+ 300: #727989,
88
+ 400: #565c64,
89
+ 500: #353c44,
90
+ 600: #30363f,
91
+ 700: #2b303a,
92
+ 800: #1b2028,
93
+ 900: #11171d,
94
94
  contrast: (
95
95
  50: #000000,
96
96
  100: #000000,
@@ -105,15 +105,15 @@ $blui-black: (
105
105
  ),
106
106
  );
107
107
  $blui-darkBlack: (
108
- 50: #202224,
109
- 100: #182022,
110
- 200: #182022,
111
- 300: #13181b,
112
- 400: #101417,
113
- 500: #0b0e10,
114
- 600: #0b0e10,
115
- 700: #08090a,
116
- 800: #08090a,
108
+ 50: #2d313c,
109
+ 100: #282d37,
110
+ 200: #242933,
111
+ 300: #1b2028,
112
+ 400: #1a2129,
113
+ 500: #11171d,
114
+ 600: #0e151b,
115
+ 700: #0c1118,
116
+ 800: #091016,
117
117
  900: #000000,
118
118
  contrast: (
119
119
  50: #ffffff,