@banyan_cloud/roots 1.0.17 → 1.0.19

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@banyan_cloud/roots",
3
- "version": "1.0.17",
3
+ "version": "1.0.19",
4
4
  "description": "Design System Library which drives the Banyan Cloud products",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -0,0 +1,94 @@
1
+ :root {
2
+ &[data-theme='dark'] {
3
+ }
4
+
5
+ &[data-theme='light'] {
6
+ }
7
+ // Monochromatic
8
+ --white: #ffffff;
9
+ --black: #000000;
10
+
11
+ --dark-grey: #333333;
12
+ --dark-grey-o-85: rgba(51, 51, 51, 0.85);
13
+ --grey: #737373;
14
+ --grey1: #888888;
15
+ --grey2: #a6a6a6;
16
+ --grey3: #bbbbbb;
17
+ --grey4: #c4c4c4;
18
+ --grey5: #dddddd;
19
+ --grey6: #e8e8e8;
20
+ --grey7: #eeeeee;
21
+ --grey8: #f2f2f2;
22
+ --grey9: #eff0f0;
23
+ --grey10: #f7f7f7;
24
+
25
+ //Base colors
26
+ --highlight: #0f62fe;
27
+ --dark-blue: #001833;
28
+ --background: #d0e2ff;
29
+
30
+ --banyan-blue: #00037c;
31
+ --banyan-orange: #ff892a;
32
+ --banyan-pink: #ff1597;
33
+ --banyan-gradient: linear-gradient(
34
+ 84.71deg,
35
+ var(--banyan-pink) 0.48%,
36
+ var(--banyan-orange) 99.57%
37
+ );
38
+
39
+ // Alert colors
40
+ --error: #da1e28;
41
+ --error-bg: #fff1f1;
42
+ --error-outline: rgba(218, 30, 40, 0.08);
43
+ --success: #24a148;
44
+ --success-bg: #defbe6;
45
+ --success-outline: rgba(36, 161, 72, 0.08);
46
+ --warning: #f1c21b;
47
+ --warning-bg: #fff8e1;
48
+ --warning-outline: rgba(203, 160, 6, 0.08);
49
+ --info: #0043ce;
50
+ --info-bg: #edf5ff;
51
+ --info-outline: #2864db98;
52
+ }
53
+
54
+ :export {
55
+ white: --white;
56
+ black: --black;
57
+
58
+ dark-grey: --dark-grey;
59
+ dark-grey-o-85: --dark-grey-o-85;
60
+ grey: --grey;
61
+ grey1: --grey1;
62
+ grey2: --grey2;
63
+ grey3: --grey3;
64
+ grey4: --grey4;
65
+ grey5: --grey5;
66
+ grey6: --grey6;
67
+ grey7: --grey7;
68
+ grey8: --grey8;
69
+ grey9: --grey9;
70
+ grey10: --grey10;
71
+ // Base colors
72
+ highlight: --highlight;
73
+ dark-blue: --dark-blue;
74
+ background: --background;
75
+
76
+ banyan-blue: --banyan-blue;
77
+ banyan-orange: --banyan-orange;
78
+ banyan-pink: --banyan-pink;
79
+ banyan-gradient: --banyan-gradient;
80
+
81
+ // Alert colors
82
+ error: --error;
83
+ error-bg: --error-bg;
84
+ error-outline: --error-outline;
85
+ success: --success;
86
+ success-bg: --success-bg;
87
+ success-outline: --success-outline;
88
+ warning: --warning;
89
+ warning-bg: --warning-bg;
90
+ warning-outline: --warning-outline;
91
+ info: --info;
92
+ info-bg: --info-bg;
93
+ info-outline: --info-outline;
94
+ }
@@ -1,56 +1,3 @@
1
- :root {
2
- &[data-theme='dark'] {
3
- }
4
-
5
- &[data-theme='light'] {
6
- }
7
- // Monochromatic
8
- --white: #ffffff;
9
- --black: #000000;
10
-
11
- --dark-grey: #333333;
12
- --dark-grey-o-85: rgba(51, 51, 51, 0.85);
13
- --grey: #737373;
14
- --grey1: #888888;
15
- --grey2: #a6a6a6;
16
- --grey3: #bbbbbb;
17
- --grey4: #c4c4c4;
18
- --grey5: #dddddd;
19
- --grey6: #e8e8e8;
20
- --grey7: #eeeeee;
21
- --grey8: #f2f2f2;
22
- --grey9: #eff0f0;
23
- --grey10: #f7f7f7;
24
-
25
- //Base colors
26
- --highlight: #0f62fe;
27
- --dark-blue: #001833;
28
- --background: #d0e2ff;
29
-
30
- --banyan-blue: #00037c;
31
- --banyan-orange: #ff892a;
32
- --banyan-pink: #ff1597;
33
- --banyan-gradient: linear-gradient(
34
- 84.71deg,
35
- var(--banyan-pink) 0.48%,
36
- var(--banyan-orange) 99.57%
37
- );
38
-
39
- // Alert colors
40
- --error: #da1e28;
41
- --error-bg: #fff1f1;
42
- --error-outline: rgba(218, 30, 40, 0.08);
43
- --success: #24a148;
44
- --success-bg: #defbe6;
45
- --success-outline: rgba(36, 161, 72, 0.08);
46
- --warning: #f1c21b;
47
- --warning-bg: #fff8e1;
48
- --warning-outline: rgba(203, 160, 6, 0.08);
49
- --info: #0043ce;
50
- --info-bg: #edf5ff;
51
- --info-outline: #2864db98;
52
- }
53
-
54
1
  // Monochromatic
55
2
  $white: var(--white);
56
3
  $black: var(--black);
@@ -92,45 +39,3 @@ $warning-outline: var(--warning-outline);
92
39
  $info: var(--info);
93
40
  $info-bg: var(--info-bg);
94
41
  $info-outline: var(--info-outline);
95
-
96
- :export {
97
- white: $white;
98
- black: $black;
99
-
100
- dark-grey: $dark-grey;
101
- dark-grey-o-85: $dark-grey-o-85;
102
- grey: $grey;
103
- grey1: $grey1;
104
- grey2: $grey2;
105
- grey3: $grey3;
106
- grey4: $grey4;
107
- grey5: $grey5;
108
- grey6: $grey6;
109
- grey7: $grey7;
110
- grey8: $grey8;
111
- grey9: $grey9;
112
- grey10: $grey10;
113
- // Base colors
114
- highlight: $highlight;
115
- dark-blue: $dark-blue;
116
- background: $background;
117
-
118
- banyan-blue: $banyan-blue;
119
- banyan-orange: $banyan-orange;
120
- banyan-pink: $banyan-pink;
121
- banyan-gradient: $banyan-gradient;
122
-
123
- // Alert colors
124
- error: $error;
125
- error-bg: $error-bg;
126
- error-outline: $error-outline;
127
- success: $success;
128
- success-bg: $success-bg;
129
- success-outline: $success-outline;
130
- warning: $warning;
131
- warning-bg: $warning-bg;
132
- warning-outline: $warning-outline;
133
- info: $info;
134
- info-bg: $info-bg;
135
- info-outline: $info-outline;
136
- }
@@ -0,0 +1,9 @@
1
+ import { getCSSVariableValue } from '../utils';
2
+ import CSS_COLORS from './_colors.exports.scss';
3
+
4
+ const COLORS = Object.keys(CSS_COLORS).reduce((acc, curr) => {
5
+ acc[curr] = getCSSVariableValue(CSS_COLORS[curr]);
6
+ return acc;
7
+ }, {});
8
+
9
+ export { COLORS };