@bcc-code/design-tokens 3.0.16 → 3.0.18

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.
Files changed (14) hide show
  1. package/README.md +90 -15
  2. package/build/bcc/css/auto.css +38 -38
  3. package/build/bcc/css/dark.css +38 -38
  4. package/build/bcc/css/light.css +37 -37
  5. package/build/bcc/css/tailwind-auto.css +38 -38
  6. package/build/bcc/css/tailwind-dark.css +38 -38
  7. package/build/bcc/css/tailwind-light.css +37 -37
  8. package/build/bcc/js/dark.js +101 -101
  9. package/build/bcc/js/light.js +91 -91
  10. package/build/primevue/component-dark.js +1 -1
  11. package/build/primevue/primitive.js +59 -59
  12. package/build/primevue/semantic-dark.js +1 -1
  13. package/build/primevue/semantic-light.js +1 -1
  14. package/package.json +1 -2
package/README.md CHANGED
@@ -56,18 +56,31 @@ Use utility classes:
56
56
 
57
57
  ### PrimeVue
58
58
 
59
+ Install the required peer dependencies:
60
+
61
+ ```bash
62
+ npm install primevue @primeuix/themes
63
+ ```
64
+
65
+ Import the preset and overrides:
66
+
59
67
  ```javascript
60
68
  import { createApp } from 'vue'
61
69
  import PrimeVue from 'primevue/config'
62
70
  import BCCPreset from '@bcc-code/design-tokens/primevue'
71
+ import '@bcc-code/design-tokens/primevue/overrides'
72
+
73
+ const app = createApp(App)
63
74
 
64
75
  app.use(PrimeVue, {
65
76
  theme: {
66
77
  preset: BCCPreset,
67
78
  options: {
68
- prefix: 'p',
69
79
  darkModeSelector: '.dark',
70
- cssLayer: false
80
+ cssLayer: {
81
+ name: 'primevue',
82
+ order: 'theme, base, primevue, custom'
83
+ }
71
84
  }
72
85
  }
73
86
  })
@@ -76,14 +89,38 @@ app.use(PrimeVue, {
76
89
  Toggle dark mode:
77
90
 
78
91
  ```javascript
79
- document.documentElement.classList.toggle('dark');
92
+ document.documentElement.classList.toggle('dark')
80
93
  ```
81
94
 
95
+ **What's Included:**
96
+ - `@bcc-code/design-tokens/primevue` - PrimeVue Aura preset with BCC tokens
97
+ - `@bcc-code/design-tokens/primevue/overrides` - CSS overrides for component styling
98
+
99
+ ## Available Exports
100
+
101
+ ### CSS
102
+ - `@bcc-code/design-tokens/css` - Auto-switching theme (prefers-color-scheme)
103
+ - `@bcc-code/design-tokens/css/light` - Light theme only
104
+ - `@bcc-code/design-tokens/css/dark` - Dark theme only
105
+
106
+ ### Tailwind CSS
107
+ - `@bcc-code/design-tokens/tailwind` - Auto-switching utilities
108
+ - `@bcc-code/design-tokens/tailwind/light` - Light utilities only
109
+ - `@bcc-code/design-tokens/tailwind/dark` - Dark utilities only
110
+
111
+ ### JavaScript
112
+ - `@bcc-code/design-tokens/js/light` - Light theme tokens as JS objects
113
+ - `@bcc-code/design-tokens/js/dark` - Dark theme tokens as JS objects
114
+
115
+ ### PrimeVue
116
+ - `@bcc-code/design-tokens/primevue` - Aura preset configuration
117
+ - `@bcc-code/design-tokens/primevue/overrides` - Component CSS overrides
118
+
82
119
  ## Token Categories
83
120
 
84
121
  - **Colors**: Text, backgrounds, borders, states
85
122
  - **Typography**: Font families, sizes, weights, line heights
86
- - **Spacing**: Margins, padding, gaps
123
+ - **Spacing**: Margins, padding, gaps (50-1000 scale)
87
124
  - **Border Radius**: Corner rounding
88
125
  - **Elevation**: Surface levels
89
126
 
@@ -133,18 +170,56 @@ demo/ # Demo application
133
170
 
134
171
  ## Publishing
135
172
 
136
- Automated via GitHub Actions when you push a version tag:
173
+ Releases are managed through GitHub Actions with automated validation and publishing.
137
174
 
138
- ```bash
139
- # Update version in package.json
140
- git add package.json
141
- git commit -m "Bump version to X.X.X"
142
- git push
143
-
144
- # Create and push tag
145
- git tag vX.X.X
146
- git push origin vX.X.X
147
- ```
175
+ ### For Maintainers
176
+
177
+ 1. **Make your changes** to tokens or config files
178
+ ```bash
179
+ git add .
180
+ git commit -m "Update design tokens"
181
+ git push origin design # or main
182
+ ```
183
+
184
+ 2. **Go to GitHub Actions**
185
+ - Navigate to the [Actions tab](../../actions/workflows/release.yml)
186
+ - Click on **"Release and Publish"**
187
+ - Click **"Run workflow"** button
188
+
189
+ 3. **Configure release**
190
+ - **Branch**: Select your branch (usually `design` or `main`)
191
+ - **Version bump**:
192
+ - `patch` - Bug fixes, small changes (3.0.17 → 3.0.18)
193
+ - `minor` - New features, new tokens (3.0.17 → 3.1.0)
194
+ - `major` - Breaking changes (3.0.17 → 4.0.0)
195
+ - **Dry run**: Enable to test without publishing
196
+
197
+ 4. **Run the workflow**
198
+ - Click **"Run workflow"**
199
+ - Wait 2-3 minutes for completion
200
+ - Package is published to NPM with `latest` tag
201
+
202
+ ### What Happens Automatically
203
+
204
+ The workflow performs these steps:
205
+ - ✅ Validates all dependencies
206
+ - ✅ Bumps version in package.json
207
+ - ✅ Builds tokens and verifies output
208
+ - ✅ Checks version doesn't exist on NPM
209
+ - ✅ Runs dry-run publish test
210
+ - ✅ Creates git commit and tag
211
+ - ✅ Creates GitHub Release with changelog
212
+ - ✅ Publishes to NPM
213
+ - ✅ Verifies package is live
214
+ - 🔄 Rolls back on any failure
215
+
216
+ ### Testing Before Publishing
217
+
218
+ Enable **"Run in dry-run mode"** to test the entire process without actually publishing to NPM.
219
+
220
+ ### For Complete Documentation
221
+
222
+ See [.github/workflows/README.md](.github/workflows/README.md) for detailed instructions, troubleshooting, and FAQ.
148
223
 
149
224
  ## Contributing
150
225
 
package/build/bcc/css/auto.css CHANGED
@@ -5,43 +5,43 @@
5
5
 
6
6
  :root {
7
7
  --color-neutral-0: #ffffff;
8
- --color-neutral-100: #f7f8f9;
9
- --color-neutral-200: #f1f2f4;
10
- --color-neutral-300: #dcdfe4;
11
- --color-neutral-400: #b3b9c4;
12
- --color-neutral-500: #8590a2;
13
- --color-neutral-600: #758195;
14
- --color-neutral-700: #626f86;
15
- --color-neutral-800: #44546f;
16
- --color-neutral-900: #2c3e5d;
17
- --color-neutral-1000: #172b4d;
18
- --color-neutral-1100: #091e42;
19
- --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
20
- --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
21
- --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
22
- --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
23
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
24
- --color-dark-neutral-0: #161a1d;
25
- --color-dark-neutral-100: #101214;
26
- --color-dark-neutral-200: #22272b;
27
- --color-dark-neutral-250: #282e33;
28
- --color-dark-neutral-300: #2c333a;
29
- --color-dark-neutral-350: #38414a;
30
- --color-dark-neutral-400: #454f59;
31
- --color-dark-neutral-500: #596773;
32
- --color-dark-neutral-600: #738496;
33
- --color-dark-neutral-700: #8c9bab;
34
- --color-dark-neutral-800: #9fadbc;
35
- --color-dark-neutral-900: #b6c2cf;
36
- --color-dark-neutral-1000: #c7d1db;
37
- --color-dark-neutral-1100: #dee4ea;
38
- --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
39
- --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
40
- --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
41
- --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
42
- --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
43
- --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
44
- --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
8
+ --color-neutral-100: #f8f8f8;
9
+ --color-neutral-200: #f0f1f2;
10
+ --color-neutral-300: #dddee1;
11
+ --color-neutral-400: #b7b9be;
12
+ --color-neutral-500: #8c8f97;
13
+ --color-neutral-600: #7d818a;
14
+ --color-neutral-700: #6b6e76;
15
+ --color-neutral-800: #505258;
16
+ --color-neutral-900: #3b3d42;
17
+ --color-neutral-1000: #292a2e;
18
+ --color-neutral-1100: #1e1f21;
19
+ --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
20
+ --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
21
+ --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
22
+ --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
23
+ --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
24
+ --color-dark-neutral-0: #18191a;
25
+ --color-dark-neutral-100: #1f1f21;
26
+ --color-dark-neutral-200: #242528;
27
+ --color-dark-neutral-250: #2b2c2f;
28
+ --color-dark-neutral-300: #303134;
29
+ --color-dark-neutral-350: #3d3f43;
30
+ --color-dark-neutral-400: #4b4d51;
31
+ --color-dark-neutral-500: #63666b;
32
+ --color-dark-neutral-600: #7e8188;
33
+ --color-dark-neutral-700: #96999e;
34
+ --color-dark-neutral-800: #a9abaf;
35
+ --color-dark-neutral-900: #bfc1c4;
36
+ --color-dark-neutral-1000: #cecfd2;
37
+ --color-dark-neutral-1100: #e2e3e4;
38
+ --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
39
+ --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
40
+ --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
41
+ --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
42
+ --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
43
+ --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
44
+ --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
45
45
  --color-blue-100: #f6fbff;
46
46
  --color-blue-200: #d9ecff;
47
47
  --color-blue-300: #a6cdfd;
@@ -530,7 +530,7 @@
530
530
  --color-blanket-danger: rgba(227, 73, 53, 0.08);
531
531
  --color-interaction-hovered: rgba(255, 255, 255, 0.2);
532
532
  --color-interaction-pressed: rgba(255, 255, 255, 0.36);
533
- --color-text-default: var(--color-dark-neutral-900);
533
+ --color-text-default: var(--color-dark-neutral-1100);
534
534
  --color-text-subtle: var(--color-dark-neutral-800);
535
535
  --color-text-subtlest: var(--color-dark-neutral-700);
536
536
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
package/build/bcc/css/dark.css CHANGED
@@ -6,43 +6,43 @@
6
6
  @media (prefers-color-scheme: dark) {
7
7
  :root {
8
8
  --color-neutral-0: #ffffff;
9
- --color-neutral-100: #f7f8f9;
10
- --color-neutral-200: #f1f2f4;
11
- --color-neutral-300: #dcdfe4;
12
- --color-neutral-400: #b3b9c4;
13
- --color-neutral-500: #8590a2;
14
- --color-neutral-600: #758195;
15
- --color-neutral-700: #626f86;
16
- --color-neutral-800: #44546f;
17
- --color-neutral-900: #2c3e5d;
18
- --color-neutral-1000: #172b4d;
19
- --color-neutral-1100: #091e42;
20
- --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
21
- --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
22
- --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
23
- --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
24
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
25
- --color-dark-neutral-0: #161a1d;
26
- --color-dark-neutral-100: #101214;
27
- --color-dark-neutral-200: #22272b;
28
- --color-dark-neutral-250: #282e33;
29
- --color-dark-neutral-300: #2c333a;
30
- --color-dark-neutral-350: #38414a;
31
- --color-dark-neutral-400: #454f59;
32
- --color-dark-neutral-500: #596773;
33
- --color-dark-neutral-600: #738496;
34
- --color-dark-neutral-700: #8c9bab;
35
- --color-dark-neutral-800: #9fadbc;
36
- --color-dark-neutral-900: #b6c2cf;
37
- --color-dark-neutral-1000: #c7d1db;
38
- --color-dark-neutral-1100: #dee4ea;
39
- --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
40
- --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
41
- --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
42
- --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
43
- --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
44
- --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
45
- --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
9
+ --color-neutral-100: #f8f8f8;
10
+ --color-neutral-200: #f0f1f2;
11
+ --color-neutral-300: #dddee1;
12
+ --color-neutral-400: #b7b9be;
13
+ --color-neutral-500: #8c8f97;
14
+ --color-neutral-600: #7d818a;
15
+ --color-neutral-700: #6b6e76;
16
+ --color-neutral-800: #505258;
17
+ --color-neutral-900: #3b3d42;
18
+ --color-neutral-1000: #292a2e;
19
+ --color-neutral-1100: #1e1f21;
20
+ --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
21
+ --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
22
+ --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
23
+ --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
24
+ --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
25
+ --color-dark-neutral-0: #18191a;
26
+ --color-dark-neutral-100: #1f1f21;
27
+ --color-dark-neutral-200: #242528;
28
+ --color-dark-neutral-250: #2b2c2f;
29
+ --color-dark-neutral-300: #303134;
30
+ --color-dark-neutral-350: #3d3f43;
31
+ --color-dark-neutral-400: #4b4d51;
32
+ --color-dark-neutral-500: #63666b;
33
+ --color-dark-neutral-600: #7e8188;
34
+ --color-dark-neutral-700: #96999e;
35
+ --color-dark-neutral-800: #a9abaf;
36
+ --color-dark-neutral-900: #bfc1c4;
37
+ --color-dark-neutral-1000: #cecfd2;
38
+ --color-dark-neutral-1100: #e2e3e4;
39
+ --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
40
+ --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
41
+ --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
42
+ --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
43
+ --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
44
+ --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
45
+ --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
46
46
  --color-blue-100: #f6fbff;
47
47
  --color-blue-200: #d9ecff;
48
48
  --color-blue-300: #a6cdfd;
@@ -215,7 +215,7 @@
215
215
  --elevation-shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
216
216
  --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
217
217
  --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
218
- --color-text-default: var(--color-dark-neutral-900);
218
+ --color-text-default: var(--color-dark-neutral-1100);
219
219
  --color-text-subtle: var(--color-dark-neutral-800);
220
220
  --color-text-subtlest: var(--color-dark-neutral-700);
221
221
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
package/build/bcc/css/light.css CHANGED
@@ -5,43 +5,43 @@
5
5
 
6
6
  :root {
7
7
  --color-neutral-0: #ffffff;
8
- --color-neutral-100: #f7f8f9;
9
- --color-neutral-200: #f1f2f4;
10
- --color-neutral-300: #dcdfe4;
11
- --color-neutral-400: #b3b9c4;
12
- --color-neutral-500: #8590a2;
13
- --color-neutral-600: #758195;
14
- --color-neutral-700: #626f86;
15
- --color-neutral-800: #44546f;
16
- --color-neutral-900: #2c3e5d;
17
- --color-neutral-1000: #172b4d;
18
- --color-neutral-1100: #091e42;
19
- --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
20
- --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
21
- --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
22
- --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
23
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
24
- --color-dark-neutral-0: #161a1d;
25
- --color-dark-neutral-100: #101214;
26
- --color-dark-neutral-200: #22272b;
27
- --color-dark-neutral-250: #282e33;
28
- --color-dark-neutral-300: #2c333a;
29
- --color-dark-neutral-350: #38414a;
30
- --color-dark-neutral-400: #454f59;
31
- --color-dark-neutral-500: #596773;
32
- --color-dark-neutral-600: #738496;
33
- --color-dark-neutral-700: #8c9bab;
34
- --color-dark-neutral-800: #9fadbc;
35
- --color-dark-neutral-900: #b6c2cf;
36
- --color-dark-neutral-1000: #c7d1db;
37
- --color-dark-neutral-1100: #dee4ea;
38
- --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
39
- --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
40
- --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
41
- --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
42
- --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
43
- --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
44
- --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
8
+ --color-neutral-100: #f8f8f8;
9
+ --color-neutral-200: #f0f1f2;
10
+ --color-neutral-300: #dddee1;
11
+ --color-neutral-400: #b7b9be;
12
+ --color-neutral-500: #8c8f97;
13
+ --color-neutral-600: #7d818a;
14
+ --color-neutral-700: #6b6e76;
15
+ --color-neutral-800: #505258;
16
+ --color-neutral-900: #3b3d42;
17
+ --color-neutral-1000: #292a2e;
18
+ --color-neutral-1100: #1e1f21;
19
+ --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
20
+ --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
21
+ --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
22
+ --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
23
+ --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
24
+ --color-dark-neutral-0: #18191a;
25
+ --color-dark-neutral-100: #1f1f21;
26
+ --color-dark-neutral-200: #242528;
27
+ --color-dark-neutral-250: #2b2c2f;
28
+ --color-dark-neutral-300: #303134;
29
+ --color-dark-neutral-350: #3d3f43;
30
+ --color-dark-neutral-400: #4b4d51;
31
+ --color-dark-neutral-500: #63666b;
32
+ --color-dark-neutral-600: #7e8188;
33
+ --color-dark-neutral-700: #96999e;
34
+ --color-dark-neutral-800: #a9abaf;
35
+ --color-dark-neutral-900: #bfc1c4;
36
+ --color-dark-neutral-1000: #cecfd2;
37
+ --color-dark-neutral-1100: #e2e3e4;
38
+ --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
39
+ --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
40
+ --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
41
+ --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
42
+ --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
43
+ --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
44
+ --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
45
45
  --color-blue-100: #f6fbff;
46
46
  --color-blue-200: #d9ecff;
47
47
  --color-blue-300: #a6cdfd;
package/build/bcc/css/tailwind-auto.css CHANGED
@@ -7,43 +7,43 @@
7
7
 
8
8
  @theme {
9
9
  --color-neutral-0: #ffffff;
10
- --color-neutral-100: #f7f8f9;
11
- --color-neutral-200: #f1f2f4;
12
- --color-neutral-300: #dcdfe4;
13
- --color-neutral-400: #b3b9c4;
14
- --color-neutral-500: #8590a2;
15
- --color-neutral-600: #758195;
16
- --color-neutral-700: #626f86;
17
- --color-neutral-800: #44546f;
18
- --color-neutral-900: #2c3e5d;
19
- --color-neutral-1000: #172b4d;
20
- --color-neutral-1100: #091e42;
21
- --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
22
- --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
23
- --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
24
- --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
25
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
26
- --color-dark-neutral-0: #161a1d;
27
- --color-dark-neutral-100: #101214;
28
- --color-dark-neutral-200: #22272b;
29
- --color-dark-neutral-250: #282e33;
30
- --color-dark-neutral-300: #2c333a;
31
- --color-dark-neutral-350: #38414a;
32
- --color-dark-neutral-400: #454f59;
33
- --color-dark-neutral-500: #596773;
34
- --color-dark-neutral-600: #738496;
35
- --color-dark-neutral-700: #8c9bab;
36
- --color-dark-neutral-800: #9fadbc;
37
- --color-dark-neutral-900: #b6c2cf;
38
- --color-dark-neutral-1000: #c7d1db;
39
- --color-dark-neutral-1100: #dee4ea;
40
- --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
41
- --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
42
- --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
43
- --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
44
- --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
45
- --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
46
- --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
10
+ --color-neutral-100: #f8f8f8;
11
+ --color-neutral-200: #f0f1f2;
12
+ --color-neutral-300: #dddee1;
13
+ --color-neutral-400: #b7b9be;
14
+ --color-neutral-500: #8c8f97;
15
+ --color-neutral-600: #7d818a;
16
+ --color-neutral-700: #6b6e76;
17
+ --color-neutral-800: #505258;
18
+ --color-neutral-900: #3b3d42;
19
+ --color-neutral-1000: #292a2e;
20
+ --color-neutral-1100: #1e1f21;
21
+ --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
22
+ --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
23
+ --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
24
+ --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
25
+ --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
26
+ --color-dark-neutral-0: #18191a;
27
+ --color-dark-neutral-100: #1f1f21;
28
+ --color-dark-neutral-200: #242528;
29
+ --color-dark-neutral-250: #2b2c2f;
30
+ --color-dark-neutral-300: #303134;
31
+ --color-dark-neutral-350: #3d3f43;
32
+ --color-dark-neutral-400: #4b4d51;
33
+ --color-dark-neutral-500: #63666b;
34
+ --color-dark-neutral-600: #7e8188;
35
+ --color-dark-neutral-700: #96999e;
36
+ --color-dark-neutral-800: #a9abaf;
37
+ --color-dark-neutral-900: #bfc1c4;
38
+ --color-dark-neutral-1000: #cecfd2;
39
+ --color-dark-neutral-1100: #e2e3e4;
40
+ --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
41
+ --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
42
+ --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
43
+ --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
44
+ --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
45
+ --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
46
+ --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
47
47
  --color-blue-100: #f6fbff;
48
48
  --color-blue-200: #d9ecff;
49
49
  --color-blue-300: #a6cdfd;
@@ -533,7 +533,7 @@
533
533
  --color-blanket-danger: rgba(227, 73, 53, 0.08);
534
534
  --color-interaction-hovered: rgba(255, 255, 255, 0.2);
535
535
  --color-interaction-pressed: rgba(255, 255, 255, 0.36);
536
- --color-text-default: var(--color-dark-neutral-900);
536
+ --color-text-default: var(--color-dark-neutral-1100);
537
537
  --color-text-subtle: var(--color-dark-neutral-800);
538
538
  --color-text-subtlest: var(--color-dark-neutral-700);
539
539
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
package/build/bcc/css/tailwind-dark.css CHANGED
@@ -5,43 +5,43 @@
5
5
 
6
6
  @theme {
7
7
  --color-neutral-0: #ffffff;
8
- --color-neutral-100: #f7f8f9;
9
- --color-neutral-200: #f1f2f4;
10
- --color-neutral-300: #dcdfe4;
11
- --color-neutral-400: #b3b9c4;
12
- --color-neutral-500: #8590a2;
13
- --color-neutral-600: #758195;
14
- --color-neutral-700: #626f86;
15
- --color-neutral-800: #44546f;
16
- --color-neutral-900: #2c3e5d;
17
- --color-neutral-1000: #172b4d;
18
- --color-neutral-1100: #091e42;
19
- --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
20
- --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
21
- --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
22
- --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
23
- --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
24
- --color-dark-neutral-0: #161a1d;
25
- --color-dark-neutral-100: #101214;
26
- --color-dark-neutral-200: #22272b;
27
- --color-dark-neutral-250: #282e33;
28
- --color-dark-neutral-300: #2c333a;
29
- --color-dark-neutral-350: #38414a;
30
- --color-dark-neutral-400: #454f59;
31
- --color-dark-neutral-500: #596773;
32
- --color-dark-neutral-600: #738496;
33
- --color-dark-neutral-700: #8c9bab;
34
- --color-dark-neutral-800: #9fadbc;
35
- --color-dark-neutral-900: #b6c2cf;
36
- --color-dark-neutral-1000: #c7d1db;
37
- --color-dark-neutral-1100: #dee4ea;
38
- --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
39
- --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
40
- --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
41
- --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
42
- --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
43
- --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
44
- --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
8
+ --color-neutral-100: #f8f8f8;
9
+ --color-neutral-200: #f0f1f2;
10
+ --color-neutral-300: #dddee1;
11
+ --color-neutral-400: #b7b9be;
12
+ --color-neutral-500: #8c8f97;
13
+ --color-neutral-600: #7d818a;
14
+ --color-neutral-700: #6b6e76;
15
+ --color-neutral-800: #505258;
16
+ --color-neutral-900: #3b3d42;
17
+ --color-neutral-1000: #292a2e;
18
+ --color-neutral-1100: #1e1f21;
19
+ --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
20
+ --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
21
+ --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
22
+ --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
23
+ --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
24
+ --color-dark-neutral-0: #18191a;
25
+ --color-dark-neutral-100: #1f1f21;
26
+ --color-dark-neutral-200: #242528;
27
+ --color-dark-neutral-250: #2b2c2f;
28
+ --color-dark-neutral-300: #303134;
29
+ --color-dark-neutral-350: #3d3f43;
30
+ --color-dark-neutral-400: #4b4d51;
31
+ --color-dark-neutral-500: #63666b;
32
+ --color-dark-neutral-600: #7e8188;
33
+ --color-dark-neutral-700: #96999e;
34
+ --color-dark-neutral-800: #a9abaf;
35
+ --color-dark-neutral-900: #bfc1c4;
36
+ --color-dark-neutral-1000: #cecfd2;
37
+ --color-dark-neutral-1100: #e2e3e4;
38
+ --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
39
+ --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
40
+ --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
41
+ --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
42
+ --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
43
+ --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
44
+ --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
45
45
  --color-blue-100: #f6fbff;
46
46
  --color-blue-200: #d9ecff;
47
47
  --color-blue-300: #a6cdfd;
@@ -215,7 +215,7 @@
215
215
  --shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
216
216
  --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
217
217
  --shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
218
- --color-text-default: var(--color-dark-neutral-900);
218
+ --color-text-default: var(--color-dark-neutral-1100);
219
219
  --color-text-subtle: var(--color-dark-neutral-800);
220
220
  --color-text-subtlest: var(--color-dark-neutral-700);
221
221
  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);