@bcc-code/design-tokens 2.0.16 → 2.0.17
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/build/bcc/cdn/light.css
CHANGED
|
@@ -45,52 +45,52 @@
|
|
|
45
45
|
--color-bcc-1000: #002320;
|
|
46
46
|
|
|
47
47
|
/* COLOR: ORANGE */
|
|
48
|
-
--color-orange-100: #
|
|
49
|
-
--color-orange-200: #
|
|
50
|
-
--color-orange-300: #
|
|
51
|
-
--color-orange-400: #
|
|
52
|
-
--color-orange-500: #
|
|
53
|
-
--color-orange-600: #
|
|
54
|
-
--color-orange-700: #
|
|
55
|
-
--color-orange-800: #
|
|
56
|
-
--color-orange-900: #
|
|
57
|
-
--color-orange-1000: #
|
|
48
|
+
--color-orange-100: #fcf3ef;
|
|
49
|
+
--color-orange-200: #f7dbcc;
|
|
50
|
+
--color-orange-300: #f2bda6;
|
|
51
|
+
--color-orange-400: #ed9f83;
|
|
52
|
+
--color-orange-500: #dd8263;
|
|
53
|
+
--color-orange-600: #c36e54;
|
|
54
|
+
--color-orange-700: #a55c45;
|
|
55
|
+
--color-orange-800: #864a35;
|
|
56
|
+
--color-orange-900: #683927;
|
|
57
|
+
--color-orange-1000: #4a281a;
|
|
58
58
|
|
|
59
59
|
/* COLOR: RED */
|
|
60
|
-
--color-red-100: #
|
|
61
|
-
--color-red-200: #
|
|
62
|
-
--color-red-300: #
|
|
63
|
-
--color-red-400: #
|
|
64
|
-
--color-red-500: #
|
|
65
|
-
--color-red-600: #
|
|
66
|
-
--color-red-700: #
|
|
67
|
-
--color-red-800: #
|
|
68
|
-
--color-red-900: #
|
|
69
|
-
--color-red-1000: #
|
|
60
|
+
--color-red-100: #fff1ed;
|
|
61
|
+
--color-red-200: #ffdad2;
|
|
62
|
+
--color-red-300: #f7a399;
|
|
63
|
+
--color-red-400: #ee7a69;
|
|
64
|
+
--color-red-500: #db5944;
|
|
65
|
+
--color-red-600: #c7402e;
|
|
66
|
+
--color-red-700: #a83423;
|
|
67
|
+
--color-red-800: #86291b;
|
|
68
|
+
--color-red-900: #6b1f15;
|
|
69
|
+
--color-red-1000: #4f140d;
|
|
70
70
|
|
|
71
71
|
/* COLOR: GREEN */
|
|
72
|
-
--color-green-100: #
|
|
73
|
-
--color-green-200: #
|
|
74
|
-
--color-green-300: #
|
|
75
|
-
--color-green-400: #
|
|
76
|
-
--color-green-500: #
|
|
77
|
-
--color-green-600: #
|
|
78
|
-
--color-green-700: #
|
|
79
|
-
--color-green-800: #
|
|
80
|
-
--color-green-900: #
|
|
81
|
-
--color-green-1000: #
|
|
72
|
+
--color-green-100: #e8fbed;
|
|
73
|
+
--color-green-200: #c2f0d2;
|
|
74
|
+
--color-green-300: #95e6b6;
|
|
75
|
+
--color-green-400: #62da9c;
|
|
76
|
+
--color-green-500: #37cf83;
|
|
77
|
+
--color-green-600: #1fbf71;
|
|
78
|
+
--color-green-700: #169b5a;
|
|
79
|
+
--color-green-800: #0f7744;
|
|
80
|
+
--color-green-900: #08532d;
|
|
81
|
+
--color-green-1000: #003b1c;
|
|
82
82
|
|
|
83
83
|
/* COLOR: TEAL */
|
|
84
|
-
--color-teal-100: #
|
|
85
|
-
--color-teal-200: #
|
|
86
|
-
--color-teal-300: #
|
|
87
|
-
--color-teal-400: #
|
|
88
|
-
--color-teal-500: #
|
|
89
|
-
--color-teal-600: #
|
|
90
|
-
--color-teal-700: #
|
|
91
|
-
--color-teal-800: #
|
|
92
|
-
--color-teal-900: #
|
|
93
|
-
--color-teal-1000: #
|
|
84
|
+
--color-teal-100: #e4faf8;
|
|
85
|
+
--color-teal-200: #b6f0eb;
|
|
86
|
+
--color-teal-300: #85e6de;
|
|
87
|
+
--color-teal-400: #56d6d1;
|
|
88
|
+
--color-teal-500: #2bc4c2;
|
|
89
|
+
--color-teal-600: #00b0b5;
|
|
90
|
+
--color-teal-700: #00929a;
|
|
91
|
+
--color-teal-800: #00757f;
|
|
92
|
+
--color-teal-900: #005962;
|
|
93
|
+
--color-teal-1000: #003d45;
|
|
94
94
|
|
|
95
95
|
/* COLOR: BROWN */
|
|
96
96
|
--color-brown-100: #f7f3ee;
|
|
@@ -105,40 +105,40 @@
|
|
|
105
105
|
--color-brown-1000: #3c3420;
|
|
106
106
|
|
|
107
107
|
/* COLOR: BLUE */
|
|
108
|
-
--color-blue-100: #
|
|
109
|
-
--color-blue-200: #
|
|
110
|
-
--color-blue-300: #
|
|
111
|
-
--color-blue-400: #
|
|
112
|
-
--color-blue-500: #
|
|
113
|
-
--color-blue-600: #
|
|
114
|
-
--color-blue-700: #
|
|
115
|
-
--color-blue-800: #
|
|
116
|
-
--color-blue-900: #
|
|
117
|
-
--color-blue-1000: #
|
|
108
|
+
--color-blue-100: #e8f3ff;
|
|
109
|
+
--color-blue-200: #cce0ff;
|
|
110
|
+
--color-blue-300: #99c2ff;
|
|
111
|
+
--color-blue-400: #66a6ff;
|
|
112
|
+
--color-blue-500: #338aff;
|
|
113
|
+
--color-blue-600: #0065ff;
|
|
114
|
+
--color-blue-700: #0052cc;
|
|
115
|
+
--color-blue-800: #0747a6;
|
|
116
|
+
--color-blue-900: #053e85;
|
|
117
|
+
--color-blue-1000: #092c66;
|
|
118
118
|
|
|
119
119
|
/* COLOR: PURPLE */
|
|
120
|
-
--color-purple-100: #
|
|
121
|
-
--color-purple-200: #
|
|
122
|
-
--color-purple-300: #
|
|
123
|
-
--color-purple-400: #
|
|
124
|
-
--color-purple-500: #
|
|
125
|
-
--color-purple-600: #
|
|
126
|
-
--color-purple-700: #
|
|
127
|
-
--color-purple-800: #
|
|
128
|
-
--color-purple-900: #
|
|
129
|
-
--color-purple-1000: #
|
|
120
|
+
--color-purple-100: #f3f0ff;
|
|
121
|
+
--color-purple-200: #dfd7ff;
|
|
122
|
+
--color-purple-300: #b8acff;
|
|
123
|
+
--color-purple-400: #9982ff;
|
|
124
|
+
--color-purple-500: #7a5aff;
|
|
125
|
+
--color-purple-600: #5e37ff;
|
|
126
|
+
--color-purple-700: #4722cc;
|
|
127
|
+
--color-purple-800: #3319a3;
|
|
128
|
+
--color-purple-900: #26157a;
|
|
129
|
+
--color-purple-1000: #1b0f52;
|
|
130
130
|
|
|
131
131
|
/* COLOR: MAGENTA */
|
|
132
|
-
--color-magenta-100: #
|
|
133
|
-
--color-magenta-200: #
|
|
134
|
-
--color-magenta-300: #
|
|
135
|
-
--color-magenta-400: #
|
|
136
|
-
--color-magenta-500: #
|
|
137
|
-
--color-magenta-600: #
|
|
138
|
-
--color-magenta-700: #
|
|
139
|
-
--color-magenta-800: #
|
|
140
|
-
--color-magenta-900: #
|
|
141
|
-
--color-magenta-1000: #
|
|
132
|
+
--color-magenta-100: #fff0f8;
|
|
133
|
+
--color-magenta-200: #ffd2ec;
|
|
134
|
+
--color-magenta-300: #ff94d5;
|
|
135
|
+
--color-magenta-400: #f562c8;
|
|
136
|
+
--color-magenta-500: #e037b8;
|
|
137
|
+
--color-magenta-600: #cc1bac;
|
|
138
|
+
--color-magenta-700: #a11388;
|
|
139
|
+
--color-magenta-800: #7a0d66;
|
|
140
|
+
--color-magenta-900: #550944;
|
|
141
|
+
--color-magenta-1000: #3b052e;
|
|
142
142
|
|
|
143
143
|
/* COLOR: NEUTRAL-ALPHA */
|
|
144
144
|
--color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
|
|
@@ -155,16 +155,16 @@
|
|
|
155
155
|
--color-dark-neutral-alpha-500-a: rgba(166, 197, 226, 0.5);
|
|
156
156
|
|
|
157
157
|
/* COLOR: YELLOW */
|
|
158
|
-
--color-yellow-100: #
|
|
159
|
-
--color-yellow-200: #
|
|
160
|
-
--color-yellow-300: #
|
|
161
|
-
--color-yellow-400: #
|
|
162
|
-
--color-yellow-500: #
|
|
163
|
-
--color-yellow-600: #
|
|
164
|
-
--color-yellow-700: #
|
|
165
|
-
--color-yellow-800: #
|
|
166
|
-
--color-yellow-900: #
|
|
167
|
-
--color-yellow-1000: #
|
|
158
|
+
--color-yellow-100: #fcf9ec;
|
|
159
|
+
--color-yellow-200: #f7eecb;
|
|
160
|
+
--color-yellow-300: #eddc96;
|
|
161
|
+
--color-yellow-400: #e6cf72;
|
|
162
|
+
--color-yellow-500: #e1be5d;
|
|
163
|
+
--color-yellow-600: #d7aa41;
|
|
164
|
+
--color-yellow-700: #c58c35;
|
|
165
|
+
--color-yellow-800: #b46e2d;
|
|
166
|
+
--color-yellow-900: #9f5226;
|
|
167
|
+
--color-yellow-1000: #7c331b;
|
|
168
168
|
|
|
169
169
|
/* COLOR: TEXT */
|
|
170
170
|
--color-text-default: var(--color-neutral-1100);
|
|
@@ -45,52 +45,52 @@
|
|
|
45
45
|
--color-bcc-1000: #002320;
|
|
46
46
|
|
|
47
47
|
/* COLOR: ORANGE */
|
|
48
|
-
--color-orange-100: #
|
|
49
|
-
--color-orange-200: #
|
|
50
|
-
--color-orange-300: #
|
|
51
|
-
--color-orange-400: #
|
|
52
|
-
--color-orange-500: #
|
|
53
|
-
--color-orange-600: #
|
|
54
|
-
--color-orange-700: #
|
|
55
|
-
--color-orange-800: #
|
|
56
|
-
--color-orange-900: #
|
|
57
|
-
--color-orange-1000: #
|
|
48
|
+
--color-orange-100: #fcf3ef;
|
|
49
|
+
--color-orange-200: #f7dbcc;
|
|
50
|
+
--color-orange-300: #f2bda6;
|
|
51
|
+
--color-orange-400: #ed9f83;
|
|
52
|
+
--color-orange-500: #dd8263;
|
|
53
|
+
--color-orange-600: #c36e54;
|
|
54
|
+
--color-orange-700: #a55c45;
|
|
55
|
+
--color-orange-800: #864a35;
|
|
56
|
+
--color-orange-900: #683927;
|
|
57
|
+
--color-orange-1000: #4a281a;
|
|
58
58
|
|
|
59
59
|
/* COLOR: RED */
|
|
60
|
-
--color-red-100: #
|
|
61
|
-
--color-red-200: #
|
|
62
|
-
--color-red-300: #
|
|
63
|
-
--color-red-400: #
|
|
64
|
-
--color-red-500: #
|
|
65
|
-
--color-red-600: #
|
|
66
|
-
--color-red-700: #
|
|
67
|
-
--color-red-800: #
|
|
68
|
-
--color-red-900: #
|
|
69
|
-
--color-red-1000: #
|
|
60
|
+
--color-red-100: #fff1ed;
|
|
61
|
+
--color-red-200: #ffdad2;
|
|
62
|
+
--color-red-300: #f7a399;
|
|
63
|
+
--color-red-400: #ee7a69;
|
|
64
|
+
--color-red-500: #db5944;
|
|
65
|
+
--color-red-600: #c7402e;
|
|
66
|
+
--color-red-700: #a83423;
|
|
67
|
+
--color-red-800: #86291b;
|
|
68
|
+
--color-red-900: #6b1f15;
|
|
69
|
+
--color-red-1000: #4f140d;
|
|
70
70
|
|
|
71
71
|
/* COLOR: GREEN */
|
|
72
|
-
--color-green-100: #
|
|
73
|
-
--color-green-200: #
|
|
74
|
-
--color-green-300: #
|
|
75
|
-
--color-green-400: #
|
|
76
|
-
--color-green-500: #
|
|
77
|
-
--color-green-600: #
|
|
78
|
-
--color-green-700: #
|
|
79
|
-
--color-green-800: #
|
|
80
|
-
--color-green-900: #
|
|
81
|
-
--color-green-1000: #
|
|
72
|
+
--color-green-100: #e8fbed;
|
|
73
|
+
--color-green-200: #c2f0d2;
|
|
74
|
+
--color-green-300: #95e6b6;
|
|
75
|
+
--color-green-400: #62da9c;
|
|
76
|
+
--color-green-500: #37cf83;
|
|
77
|
+
--color-green-600: #1fbf71;
|
|
78
|
+
--color-green-700: #169b5a;
|
|
79
|
+
--color-green-800: #0f7744;
|
|
80
|
+
--color-green-900: #08532d;
|
|
81
|
+
--color-green-1000: #003b1c;
|
|
82
82
|
|
|
83
83
|
/* COLOR: TEAL */
|
|
84
|
-
--color-teal-100: #
|
|
85
|
-
--color-teal-200: #
|
|
86
|
-
--color-teal-300: #
|
|
87
|
-
--color-teal-400: #
|
|
88
|
-
--color-teal-500: #
|
|
89
|
-
--color-teal-600: #
|
|
90
|
-
--color-teal-700: #
|
|
91
|
-
--color-teal-800: #
|
|
92
|
-
--color-teal-900: #
|
|
93
|
-
--color-teal-1000: #
|
|
84
|
+
--color-teal-100: #e4faf8;
|
|
85
|
+
--color-teal-200: #b6f0eb;
|
|
86
|
+
--color-teal-300: #85e6de;
|
|
87
|
+
--color-teal-400: #56d6d1;
|
|
88
|
+
--color-teal-500: #2bc4c2;
|
|
89
|
+
--color-teal-600: #00b0b5;
|
|
90
|
+
--color-teal-700: #00929a;
|
|
91
|
+
--color-teal-800: #00757f;
|
|
92
|
+
--color-teal-900: #005962;
|
|
93
|
+
--color-teal-1000: #003d45;
|
|
94
94
|
|
|
95
95
|
/* COLOR: BROWN */
|
|
96
96
|
--color-brown-100: #f7f3ee;
|
|
@@ -105,40 +105,40 @@
|
|
|
105
105
|
--color-brown-1000: #3c3420;
|
|
106
106
|
|
|
107
107
|
/* COLOR: BLUE */
|
|
108
|
-
--color-blue-100: #
|
|
109
|
-
--color-blue-200: #
|
|
110
|
-
--color-blue-300: #
|
|
111
|
-
--color-blue-400: #
|
|
112
|
-
--color-blue-500: #
|
|
113
|
-
--color-blue-600: #
|
|
114
|
-
--color-blue-700: #
|
|
115
|
-
--color-blue-800: #
|
|
116
|
-
--color-blue-900: #
|
|
117
|
-
--color-blue-1000: #
|
|
108
|
+
--color-blue-100: #e8f3ff;
|
|
109
|
+
--color-blue-200: #cce0ff;
|
|
110
|
+
--color-blue-300: #99c2ff;
|
|
111
|
+
--color-blue-400: #66a6ff;
|
|
112
|
+
--color-blue-500: #338aff;
|
|
113
|
+
--color-blue-600: #0065ff;
|
|
114
|
+
--color-blue-700: #0052cc;
|
|
115
|
+
--color-blue-800: #0747a6;
|
|
116
|
+
--color-blue-900: #053e85;
|
|
117
|
+
--color-blue-1000: #092c66;
|
|
118
118
|
|
|
119
119
|
/* COLOR: PURPLE */
|
|
120
|
-
--color-purple-100: #
|
|
121
|
-
--color-purple-200: #
|
|
122
|
-
--color-purple-300: #
|
|
123
|
-
--color-purple-400: #
|
|
124
|
-
--color-purple-500: #
|
|
125
|
-
--color-purple-600: #
|
|
126
|
-
--color-purple-700: #
|
|
127
|
-
--color-purple-800: #
|
|
128
|
-
--color-purple-900: #
|
|
129
|
-
--color-purple-1000: #
|
|
120
|
+
--color-purple-100: #f3f0ff;
|
|
121
|
+
--color-purple-200: #dfd7ff;
|
|
122
|
+
--color-purple-300: #b8acff;
|
|
123
|
+
--color-purple-400: #9982ff;
|
|
124
|
+
--color-purple-500: #7a5aff;
|
|
125
|
+
--color-purple-600: #5e37ff;
|
|
126
|
+
--color-purple-700: #4722cc;
|
|
127
|
+
--color-purple-800: #3319a3;
|
|
128
|
+
--color-purple-900: #26157a;
|
|
129
|
+
--color-purple-1000: #1b0f52;
|
|
130
130
|
|
|
131
131
|
/* COLOR: MAGENTA */
|
|
132
|
-
--color-magenta-100: #
|
|
133
|
-
--color-magenta-200: #
|
|
134
|
-
--color-magenta-300: #
|
|
135
|
-
--color-magenta-400: #
|
|
136
|
-
--color-magenta-500: #
|
|
137
|
-
--color-magenta-600: #
|
|
138
|
-
--color-magenta-700: #
|
|
139
|
-
--color-magenta-800: #
|
|
140
|
-
--color-magenta-900: #
|
|
141
|
-
--color-magenta-1000: #
|
|
132
|
+
--color-magenta-100: #fff0f8;
|
|
133
|
+
--color-magenta-200: #ffd2ec;
|
|
134
|
+
--color-magenta-300: #ff94d5;
|
|
135
|
+
--color-magenta-400: #f562c8;
|
|
136
|
+
--color-magenta-500: #e037b8;
|
|
137
|
+
--color-magenta-600: #cc1bac;
|
|
138
|
+
--color-magenta-700: #a11388;
|
|
139
|
+
--color-magenta-800: #7a0d66;
|
|
140
|
+
--color-magenta-900: #550944;
|
|
141
|
+
--color-magenta-1000: #3b052e;
|
|
142
142
|
|
|
143
143
|
/* COLOR: NEUTRAL-ALPHA */
|
|
144
144
|
--color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
|
|
@@ -155,16 +155,16 @@
|
|
|
155
155
|
--color-dark-neutral-alpha-500-a: rgba(166, 197, 226, 0.5);
|
|
156
156
|
|
|
157
157
|
/* COLOR: YELLOW */
|
|
158
|
-
--color-yellow-100: #
|
|
159
|
-
--color-yellow-200: #
|
|
160
|
-
--color-yellow-300: #
|
|
161
|
-
--color-yellow-400: #
|
|
162
|
-
--color-yellow-500: #
|
|
163
|
-
--color-yellow-600: #
|
|
164
|
-
--color-yellow-700: #
|
|
165
|
-
--color-yellow-800: #
|
|
166
|
-
--color-yellow-900: #
|
|
167
|
-
--color-yellow-1000: #
|
|
158
|
+
--color-yellow-100: #fcf9ec;
|
|
159
|
+
--color-yellow-200: #f7eecb;
|
|
160
|
+
--color-yellow-300: #eddc96;
|
|
161
|
+
--color-yellow-400: #e6cf72;
|
|
162
|
+
--color-yellow-500: #e1be5d;
|
|
163
|
+
--color-yellow-600: #d7aa41;
|
|
164
|
+
--color-yellow-700: #c58c35;
|
|
165
|
+
--color-yellow-800: #b46e2d;
|
|
166
|
+
--color-yellow-900: #9f5226;
|
|
167
|
+
--color-yellow-1000: #7c331b;
|
|
168
168
|
|
|
169
169
|
/* COLOR: TEXT */
|
|
170
170
|
--color-text-default: var(--color-neutral-1100);
|
|
@@ -1,4 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
// build/bcc/primevue/index.d.ts
|
|
2
|
+
import type { PrimeVueThemeOptions } from '@primeuix/themes';
|
|
3
|
+
|
|
4
|
+
interface BCCPresetTheme {
|
|
5
|
+
primitive: {
|
|
6
|
+
neutral: Record<string, string>;
|
|
7
|
+
red: Record<string, string>;
|
|
8
|
+
orange: Record<string, string>;
|
|
9
|
+
green: Record<string, string>;
|
|
10
|
+
teal: Record<string, string>;
|
|
11
|
+
blue: Record<string, string>;
|
|
12
|
+
purple: Record<string, string>;
|
|
13
|
+
pink: Record<string, string>;
|
|
14
|
+
yellow: Record<string, string>;
|
|
15
|
+
amber: Record<string, string>;
|
|
16
|
+
};
|
|
17
|
+
semantic: {
|
|
18
|
+
primary: Record<string, string>;
|
|
19
|
+
colorScheme: {
|
|
20
|
+
light: {
|
|
21
|
+
surface: Record<string, string>;
|
|
22
|
+
};
|
|
23
|
+
dark: {
|
|
24
|
+
surface: Record<string, string>;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare const BCCPreset: BCCPresetTheme;
|
|
31
|
+
export default BCCPreset;
|
|
32
|
+
|
|
33
|
+
// Re-export useful types for consumers
|
|
34
|
+
export type { PrimeVueThemeOptions };
|
|
35
|
+
export type BCCTheme = BCCPresetTheme;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
// build/bcc/primevue/override.js
|
|
1
2
|
const BCCAuraOverride = {
|
|
2
3
|
primitive: {
|
|
3
4
|
neutral: {
|
|
@@ -138,7 +139,7 @@ const BCCAuraOverride = {
|
|
|
138
139
|
colorScheme: {
|
|
139
140
|
light: {
|
|
140
141
|
surface: {
|
|
141
|
-
0: "var(--color-
|
|
142
|
+
0: "var(--color-elevation-surface-default)",
|
|
142
143
|
50: "var(--color-neutral-100)",
|
|
143
144
|
100: "var(--color-neutral-200)",
|
|
144
145
|
200: "var(--color-neutral-300)",
|
|
@@ -151,10 +152,27 @@ const BCCAuraOverride = {
|
|
|
151
152
|
900: "var(--color-neutral-1000)",
|
|
152
153
|
950: "var(--color-neutral-1100)",
|
|
153
154
|
},
|
|
155
|
+
// Add semantic color mappings
|
|
156
|
+
primary: {
|
|
157
|
+
color: "var(--color-text-brand)",
|
|
158
|
+
inverseColor: "var(--color-text-inverse)",
|
|
159
|
+
hoverColor: "var(--color-background-brand-hover)",
|
|
160
|
+
activeColor: "var(--color-background-brand-pressed)",
|
|
161
|
+
},
|
|
162
|
+
text: {
|
|
163
|
+
color: "var(--color-text-default)",
|
|
164
|
+
hoverColor: "var(--color-text-subtle)",
|
|
165
|
+
mutedColor: "var(--color-text-subtler)",
|
|
166
|
+
},
|
|
167
|
+
content: {
|
|
168
|
+
background: "var(--color-elevation-surface-default)",
|
|
169
|
+
hoverBackground: "var(--color-elevation-surface-hovered)",
|
|
170
|
+
borderColor: "var(--color-border-default)",
|
|
171
|
+
},
|
|
154
172
|
},
|
|
155
173
|
dark: {
|
|
156
174
|
surface: {
|
|
157
|
-
0: "var(--color-
|
|
175
|
+
0: "var(--color-elevation-surface-default)",
|
|
158
176
|
50: "var(--color-dark-neutral-100)",
|
|
159
177
|
100: "var(--color-dark-neutral-200)",
|
|
160
178
|
200: "var(--color-dark-neutral-300)",
|
|
@@ -167,6 +185,23 @@ const BCCAuraOverride = {
|
|
|
167
185
|
900: "var(--color-dark-neutral-1000)",
|
|
168
186
|
950: "var(--color-dark-neutral-1100)",
|
|
169
187
|
},
|
|
188
|
+
// Dark mode semantic mappings
|
|
189
|
+
primary: {
|
|
190
|
+
color: "var(--color-text-brand)",
|
|
191
|
+
inverseColor: "var(--color-text-inverse)",
|
|
192
|
+
hoverColor: "var(--color-background-brand-hover)",
|
|
193
|
+
activeColor: "var(--color-background-brand-pressed)",
|
|
194
|
+
},
|
|
195
|
+
text: {
|
|
196
|
+
color: "var(--color-text-default)",
|
|
197
|
+
hoverColor: "var(--color-text-subtle)",
|
|
198
|
+
mutedColor: "var(--color-text-subtler)",
|
|
199
|
+
},
|
|
200
|
+
content: {
|
|
201
|
+
background: "var(--color-elevation-surface-default)",
|
|
202
|
+
hoverBackground: "var(--color-elevation-surface-hovered)",
|
|
203
|
+
borderColor: "var(--color-border-default)",
|
|
204
|
+
},
|
|
170
205
|
},
|
|
171
206
|
},
|
|
172
207
|
},
|
|
@@ -45,52 +45,52 @@
|
|
|
45
45
|
--color-bcc-1000: #002320;
|
|
46
46
|
|
|
47
47
|
/* COLOR: ORANGE */
|
|
48
|
-
--color-orange-100: #
|
|
49
|
-
--color-orange-200: #
|
|
50
|
-
--color-orange-300: #
|
|
51
|
-
--color-orange-400: #
|
|
52
|
-
--color-orange-500: #
|
|
53
|
-
--color-orange-600: #
|
|
54
|
-
--color-orange-700: #
|
|
55
|
-
--color-orange-800: #
|
|
56
|
-
--color-orange-900: #
|
|
57
|
-
--color-orange-1000: #
|
|
48
|
+
--color-orange-100: #fcf3ef;
|
|
49
|
+
--color-orange-200: #f7dbcc;
|
|
50
|
+
--color-orange-300: #f2bda6;
|
|
51
|
+
--color-orange-400: #ed9f83;
|
|
52
|
+
--color-orange-500: #dd8263;
|
|
53
|
+
--color-orange-600: #c36e54;
|
|
54
|
+
--color-orange-700: #a55c45;
|
|
55
|
+
--color-orange-800: #864a35;
|
|
56
|
+
--color-orange-900: #683927;
|
|
57
|
+
--color-orange-1000: #4a281a;
|
|
58
58
|
|
|
59
59
|
/* COLOR: RED */
|
|
60
|
-
--color-red-100: #
|
|
61
|
-
--color-red-200: #
|
|
62
|
-
--color-red-300: #
|
|
63
|
-
--color-red-400: #
|
|
64
|
-
--color-red-500: #
|
|
65
|
-
--color-red-600: #
|
|
66
|
-
--color-red-700: #
|
|
67
|
-
--color-red-800: #
|
|
68
|
-
--color-red-900: #
|
|
69
|
-
--color-red-1000: #
|
|
60
|
+
--color-red-100: #fff1ed;
|
|
61
|
+
--color-red-200: #ffdad2;
|
|
62
|
+
--color-red-300: #f7a399;
|
|
63
|
+
--color-red-400: #ee7a69;
|
|
64
|
+
--color-red-500: #db5944;
|
|
65
|
+
--color-red-600: #c7402e;
|
|
66
|
+
--color-red-700: #a83423;
|
|
67
|
+
--color-red-800: #86291b;
|
|
68
|
+
--color-red-900: #6b1f15;
|
|
69
|
+
--color-red-1000: #4f140d;
|
|
70
70
|
|
|
71
71
|
/* COLOR: GREEN */
|
|
72
|
-
--color-green-100: #
|
|
73
|
-
--color-green-200: #
|
|
74
|
-
--color-green-300: #
|
|
75
|
-
--color-green-400: #
|
|
76
|
-
--color-green-500: #
|
|
77
|
-
--color-green-600: #
|
|
78
|
-
--color-green-700: #
|
|
79
|
-
--color-green-800: #
|
|
80
|
-
--color-green-900: #
|
|
81
|
-
--color-green-1000: #
|
|
72
|
+
--color-green-100: #e8fbed;
|
|
73
|
+
--color-green-200: #c2f0d2;
|
|
74
|
+
--color-green-300: #95e6b6;
|
|
75
|
+
--color-green-400: #62da9c;
|
|
76
|
+
--color-green-500: #37cf83;
|
|
77
|
+
--color-green-600: #1fbf71;
|
|
78
|
+
--color-green-700: #169b5a;
|
|
79
|
+
--color-green-800: #0f7744;
|
|
80
|
+
--color-green-900: #08532d;
|
|
81
|
+
--color-green-1000: #003b1c;
|
|
82
82
|
|
|
83
83
|
/* COLOR: TEAL */
|
|
84
|
-
--color-teal-100: #
|
|
85
|
-
--color-teal-200: #
|
|
86
|
-
--color-teal-300: #
|
|
87
|
-
--color-teal-400: #
|
|
88
|
-
--color-teal-500: #
|
|
89
|
-
--color-teal-600: #
|
|
90
|
-
--color-teal-700: #
|
|
91
|
-
--color-teal-800: #
|
|
92
|
-
--color-teal-900: #
|
|
93
|
-
--color-teal-1000: #
|
|
84
|
+
--color-teal-100: #e4faf8;
|
|
85
|
+
--color-teal-200: #b6f0eb;
|
|
86
|
+
--color-teal-300: #85e6de;
|
|
87
|
+
--color-teal-400: #56d6d1;
|
|
88
|
+
--color-teal-500: #2bc4c2;
|
|
89
|
+
--color-teal-600: #00b0b5;
|
|
90
|
+
--color-teal-700: #00929a;
|
|
91
|
+
--color-teal-800: #00757f;
|
|
92
|
+
--color-teal-900: #005962;
|
|
93
|
+
--color-teal-1000: #003d45;
|
|
94
94
|
|
|
95
95
|
/* COLOR: BROWN */
|
|
96
96
|
--color-brown-100: #f7f3ee;
|
|
@@ -105,40 +105,40 @@
|
|
|
105
105
|
--color-brown-1000: #3c3420;
|
|
106
106
|
|
|
107
107
|
/* COLOR: BLUE */
|
|
108
|
-
--color-blue-100: #
|
|
109
|
-
--color-blue-200: #
|
|
110
|
-
--color-blue-300: #
|
|
111
|
-
--color-blue-400: #
|
|
112
|
-
--color-blue-500: #
|
|
113
|
-
--color-blue-600: #
|
|
114
|
-
--color-blue-700: #
|
|
115
|
-
--color-blue-800: #
|
|
116
|
-
--color-blue-900: #
|
|
117
|
-
--color-blue-1000: #
|
|
108
|
+
--color-blue-100: #e8f3ff;
|
|
109
|
+
--color-blue-200: #cce0ff;
|
|
110
|
+
--color-blue-300: #99c2ff;
|
|
111
|
+
--color-blue-400: #66a6ff;
|
|
112
|
+
--color-blue-500: #338aff;
|
|
113
|
+
--color-blue-600: #0065ff;
|
|
114
|
+
--color-blue-700: #0052cc;
|
|
115
|
+
--color-blue-800: #0747a6;
|
|
116
|
+
--color-blue-900: #053e85;
|
|
117
|
+
--color-blue-1000: #092c66;
|
|
118
118
|
|
|
119
119
|
/* COLOR: PURPLE */
|
|
120
|
-
--color-purple-100: #
|
|
121
|
-
--color-purple-200: #
|
|
122
|
-
--color-purple-300: #
|
|
123
|
-
--color-purple-400: #
|
|
124
|
-
--color-purple-500: #
|
|
125
|
-
--color-purple-600: #
|
|
126
|
-
--color-purple-700: #
|
|
127
|
-
--color-purple-800: #
|
|
128
|
-
--color-purple-900: #
|
|
129
|
-
--color-purple-1000: #
|
|
120
|
+
--color-purple-100: #f3f0ff;
|
|
121
|
+
--color-purple-200: #dfd7ff;
|
|
122
|
+
--color-purple-300: #b8acff;
|
|
123
|
+
--color-purple-400: #9982ff;
|
|
124
|
+
--color-purple-500: #7a5aff;
|
|
125
|
+
--color-purple-600: #5e37ff;
|
|
126
|
+
--color-purple-700: #4722cc;
|
|
127
|
+
--color-purple-800: #3319a3;
|
|
128
|
+
--color-purple-900: #26157a;
|
|
129
|
+
--color-purple-1000: #1b0f52;
|
|
130
130
|
|
|
131
131
|
/* COLOR: MAGENTA */
|
|
132
|
-
--color-magenta-100: #
|
|
133
|
-
--color-magenta-200: #
|
|
134
|
-
--color-magenta-300: #
|
|
135
|
-
--color-magenta-400: #
|
|
136
|
-
--color-magenta-500: #
|
|
137
|
-
--color-magenta-600: #
|
|
138
|
-
--color-magenta-700: #
|
|
139
|
-
--color-magenta-800: #
|
|
140
|
-
--color-magenta-900: #
|
|
141
|
-
--color-magenta-1000: #
|
|
132
|
+
--color-magenta-100: #fff0f8;
|
|
133
|
+
--color-magenta-200: #ffd2ec;
|
|
134
|
+
--color-magenta-300: #ff94d5;
|
|
135
|
+
--color-magenta-400: #f562c8;
|
|
136
|
+
--color-magenta-500: #e037b8;
|
|
137
|
+
--color-magenta-600: #cc1bac;
|
|
138
|
+
--color-magenta-700: #a11388;
|
|
139
|
+
--color-magenta-800: #7a0d66;
|
|
140
|
+
--color-magenta-900: #550944;
|
|
141
|
+
--color-magenta-1000: #3b052e;
|
|
142
142
|
|
|
143
143
|
/* COLOR: NEUTRAL-ALPHA */
|
|
144
144
|
--color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
|
|
@@ -155,16 +155,16 @@
|
|
|
155
155
|
--color-dark-neutral-alpha-500-a: rgba(166, 197, 226, 0.5);
|
|
156
156
|
|
|
157
157
|
/* COLOR: YELLOW */
|
|
158
|
-
--color-yellow-100: #
|
|
159
|
-
--color-yellow-200: #
|
|
160
|
-
--color-yellow-300: #
|
|
161
|
-
--color-yellow-400: #
|
|
162
|
-
--color-yellow-500: #
|
|
163
|
-
--color-yellow-600: #
|
|
164
|
-
--color-yellow-700: #
|
|
165
|
-
--color-yellow-800: #
|
|
166
|
-
--color-yellow-900: #
|
|
167
|
-
--color-yellow-1000: #
|
|
158
|
+
--color-yellow-100: #fcf9ec;
|
|
159
|
+
--color-yellow-200: #f7eecb;
|
|
160
|
+
--color-yellow-300: #eddc96;
|
|
161
|
+
--color-yellow-400: #e6cf72;
|
|
162
|
+
--color-yellow-500: #e1be5d;
|
|
163
|
+
--color-yellow-600: #d7aa41;
|
|
164
|
+
--color-yellow-700: #c58c35;
|
|
165
|
+
--color-yellow-800: #b46e2d;
|
|
166
|
+
--color-yellow-900: #9f5226;
|
|
167
|
+
--color-yellow-1000: #7c331b;
|
|
168
168
|
|
|
169
169
|
/* COLOR: TEXT */
|
|
170
170
|
--color-text-default: var(--color-neutral-1100);
|