@bcc-code/design-tokens 1.0.21 → 2.0.0
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/README.md +226 -44
- package/build/bcc/cdn/dark.css +165 -0
- package/build/bcc/cdn/light.css +518 -0
- package/build/bcc/cdn/variables.css +685 -0
- package/build/bcc/primevue/index.d.ts +47 -0
- package/build/bcc/primevue/index.js +299 -0
- package/build/bcc/tailwind/dark.css +165 -0
- package/build/bcc/tailwind/index.css +17 -0
- package/build/bcc/tailwind/light.css +519 -0
- package/build/bcc/tailwind/utilities.css +33 -0
- package/package.json +41 -19
- package/dist/bcc-primevue-preset.d.ts +0 -4
- package/dist/bcc-primevue-preset.js +0 -339
- package/dist/tailwind.css +0 -979
- package/dist/variables.css +0 -791
package/README.md
CHANGED
|
@@ -1,86 +1,268 @@
|
|
|
1
|
-
# @bcc-code/design-tokens
|
|
1
|
+
# @bcc-code/design-tokens
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
[](https://github.com/bcc-code/design-tokens/actions/workflows/publish.yml)
|
|
6
5
|
|
|
7
|
-
A
|
|
6
|
+
A comprehensive design token package with CSS variables, Tailwind v4 integration, and framework presets for BCC projects.
|
|
7
|
+
|
|
8
|
+
## 🚀 Features
|
|
9
|
+
|
|
10
|
+
- **CSS Variables**: Ready-to-use CSS custom properties for any project
|
|
11
|
+
- **Tailwind v4 Integration**: Native support with `@theme` and custom utilities
|
|
12
|
+
- **PrimeVue Configuration**: Framework-agnostic preset configuration for PrimeVue components
|
|
13
|
+
- **TypeScript Support**: Full type definitions for better developer experience
|
|
14
|
+
- **Dark Mode**: Automatic switching via CSS media queries or class-based control
|
|
15
|
+
- **CDN Support**: Direct CSS imports for WordPress and static sites
|
|
16
|
+
- **Framework Ready**: Extensible architecture for multiple UI libraries
|
|
8
17
|
|
|
9
18
|
## 📦 Installation
|
|
10
19
|
|
|
11
20
|
```bash
|
|
12
|
-
npm install @bcc-code/design-tokens
|
|
21
|
+
npm install @bcc-code/design-tokens
|
|
13
22
|
```
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
## 📁 Package Structure
|
|
16
25
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/>
|
|
26
|
+
Understanding the import paths:
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
@bcc-code/design-tokens/{group}/{format}/{file}
|
|
22
30
|
```
|
|
23
31
|
|
|
24
|
-
|
|
32
|
+
- **`{group}`** - Design system variant (currently `bcc`, future: `events`, `members`)
|
|
33
|
+
- **`{format}`** - Distribution format (`cdn`, `tailwind`, `primevue`)
|
|
34
|
+
- **`{file}`** - Specific file (`variables.css`, `index.css`, etc.)
|
|
35
|
+
|
|
36
|
+
**Examples:**
|
|
37
|
+
- `./bcc/cdn/variables.css` - BCC brand CSS variables for CDN/WordPress
|
|
38
|
+
- `./bcc/tailwind/index.css` - BCC brand Tailwind integration
|
|
39
|
+
- `./bcc/primevue` - BCC brand PrimeVue preset configuration
|
|
25
40
|
|
|
26
|
-
|
|
41
|
+
## 🎯 Usage
|
|
27
42
|
|
|
28
|
-
|
|
43
|
+
### CSS Variables (WordPress, Static Sites)
|
|
29
44
|
|
|
45
|
+
**CDN (Recommended):**
|
|
30
46
|
```html
|
|
31
|
-
<link
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
47
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bcc-code/design-tokens@latest/build/bcc/cdn/variables.css">
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**NPM:**
|
|
51
|
+
```javascript
|
|
52
|
+
import '@bcc-code/design-tokens/bcc/cdn';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Usage in CSS:**
|
|
56
|
+
```css
|
|
57
|
+
.my-component {
|
|
58
|
+
background-color: var(--color-elevation-surface-default);
|
|
59
|
+
color: var(--color-text-default);
|
|
60
|
+
padding: var(--space-300);
|
|
61
|
+
border-radius: var(--border-radius-lg);
|
|
62
|
+
font: var(--heading-lg);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.my-button:hover {
|
|
66
|
+
background-color: var(--color-background-brand-hover);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Tailwind CSS v4
|
|
71
|
+
|
|
72
|
+
**1. Install Tailwind CSS:**
|
|
73
|
+
```bash
|
|
74
|
+
npm install tailwindcss
|
|
35
75
|
```
|
|
36
76
|
|
|
37
|
-
2.
|
|
77
|
+
**2. Import in your main CSS:**
|
|
78
|
+
```css
|
|
79
|
+
@import "@bcc-code/design-tokens/bcc/tailwind";
|
|
80
|
+
```
|
|
38
81
|
|
|
82
|
+
**3. Use in your components:**
|
|
39
83
|
```html
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
84
|
+
<div class="bg-surface p-spacing-300 rounded-lg">
|
|
85
|
+
<h2 class="heading-lg text-semantic-default mb-spacing-150">Card Title</h2>
|
|
86
|
+
<p class="body-md text-semantic-subtle">Card content with BCC design tokens.</p>
|
|
87
|
+
<button class="bg-brand hover:bg-brand-hover text-semantic-inverse px-spacing-300 py-spacing-150 rounded-md">
|
|
88
|
+
Action Button
|
|
89
|
+
</button>
|
|
90
|
+
</div>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### PrimeVue Integration
|
|
94
|
+
|
|
95
|
+
**1. Install dependencies:**
|
|
96
|
+
```bash
|
|
97
|
+
npm install primevue @primevue/themes
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**2. Import CSS and preset configuration:**
|
|
101
|
+
```javascript
|
|
102
|
+
import '@bcc-code/design-tokens/bcc/cdn';
|
|
103
|
+
import BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
|
|
44
104
|
```
|
|
45
105
|
|
|
46
|
-
|
|
106
|
+
**3. Configure PrimeVue:**
|
|
107
|
+
```javascript
|
|
108
|
+
import { createApp } from 'vue';
|
|
109
|
+
import PrimeVue from 'primevue/config';
|
|
110
|
+
import { definePreset } from '@primevue/themes';
|
|
111
|
+
import Aura from '@primevue/themes/aura';
|
|
47
112
|
|
|
48
|
-
|
|
113
|
+
// Create the preset using our configuration
|
|
114
|
+
const BCCPreset = definePreset(Aura, BCCPresetConfig);
|
|
49
115
|
|
|
50
|
-
|
|
51
|
-
import "@bcc-code/design-tokens/variables.css";
|
|
52
|
-
import { BCCPrimeVuePreset } from "@bcc-code/design-tokens/primevue-preset.js";
|
|
116
|
+
const app = createApp(App);
|
|
53
117
|
|
|
54
118
|
app.use(PrimeVue, {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
119
|
+
theme: {
|
|
120
|
+
preset: BCCPreset,
|
|
121
|
+
options: {
|
|
122
|
+
darkModeSelector: '.dark' // or 'system' for auto-detection
|
|
123
|
+
}
|
|
124
|
+
}
|
|
58
125
|
});
|
|
59
126
|
```
|
|
60
127
|
|
|
61
|
-
|
|
128
|
+
**4. Use PrimeVue components:**
|
|
129
|
+
```vue
|
|
130
|
+
<template>
|
|
131
|
+
<Card>
|
|
132
|
+
<template #title>Welcome</template>
|
|
133
|
+
<template #content>
|
|
134
|
+
<p>This card uses BCC design tokens automatically!</p>
|
|
135
|
+
<Button label="Primary Action" />
|
|
136
|
+
<Button label="Secondary" severity="secondary" />
|
|
137
|
+
</template>
|
|
138
|
+
</Card>
|
|
139
|
+
</template>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
**TypeScript Support:**
|
|
143
|
+
```typescript
|
|
144
|
+
import type BCCPresetConfig from '@bcc-code/design-tokens/bcc/primevue';
|
|
145
|
+
// Full type safety and autocomplete available
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## 🌙 Dark Mode
|
|
149
|
+
|
|
150
|
+
### Automatic (CSS Media Query)
|
|
151
|
+
Works out of the box with user's system preferences:
|
|
62
152
|
|
|
63
|
-
```
|
|
64
|
-
|
|
153
|
+
```css
|
|
154
|
+
/* Light mode */
|
|
155
|
+
:root {
|
|
156
|
+
--color-text-default: #1e242d;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Dark mode - automatically applied */
|
|
160
|
+
@media (prefers-color-scheme: dark) {
|
|
161
|
+
:root {
|
|
162
|
+
--color-text-default: #dee4ea;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
65
165
|
```
|
|
66
166
|
|
|
67
|
-
|
|
167
|
+
### Manual (Class-based)
|
|
168
|
+
Control dark mode programmatically:
|
|
169
|
+
|
|
170
|
+
```javascript
|
|
171
|
+
// Toggle dark mode
|
|
172
|
+
document.documentElement.classList.toggle('dark');
|
|
173
|
+
|
|
174
|
+
// Enable dark mode
|
|
175
|
+
document.documentElement.classList.add('dark');
|
|
68
176
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
177
|
+
// Disable dark mode
|
|
178
|
+
document.documentElement.classList.remove('dark');
|
|
179
|
+
```
|
|
72
180
|
|
|
181
|
+
For PrimeVue projects:
|
|
182
|
+
```javascript
|
|
73
183
|
app.use(PrimeVue, {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
184
|
+
theme: {
|
|
185
|
+
preset: BCCPreset,
|
|
186
|
+
options: {
|
|
187
|
+
darkModeSelector: '.dark' // Class-based
|
|
188
|
+
// or
|
|
189
|
+
darkModeSelector: 'system' // Automatic
|
|
190
|
+
}
|
|
191
|
+
}
|
|
77
192
|
});
|
|
78
193
|
```
|
|
79
194
|
|
|
80
|
-
##
|
|
195
|
+
## 📋 Available Tokens
|
|
196
|
+
|
|
197
|
+
### Colors
|
|
198
|
+
- **Brand**: `--color-bcc-*` (100-1000)
|
|
199
|
+
- **Neutral**: `--color-neutral-*` (0-1100)
|
|
200
|
+
- **Semantic**: `--color-text-*`, `--color-background-*`, `--color-border-*`
|
|
201
|
+
- **Elevation**: `--color-elevation-surface-*`
|
|
202
|
+
|
|
203
|
+
### Typography
|
|
204
|
+
- **Headings**: `--heading-xs` through `--heading-3xl`
|
|
205
|
+
- **Body**: `--body-sm`, `--body-md`, `--body-lg`
|
|
206
|
+
- **Font Properties**: `--font-size-*`, `--font-weight-*`, `--line-height-*`
|
|
207
|
+
|
|
208
|
+
### Spacing
|
|
209
|
+
- **Scale**: `--space-*` (0, 25, 50, 75, 100, 150, 200, 250, 300, 400, 500, 600, 800, 1000)
|
|
210
|
+
- **Negative**: `--space-negative-*` for negative margins
|
|
211
|
+
|
|
212
|
+
### Border Radius
|
|
213
|
+
- **Scale**: `--border-radius-*` (none, xs, sm, md, lg, xl, 2xl, full)
|
|
214
|
+
|
|
215
|
+
### Tailwind-specific
|
|
216
|
+
- **Spacing**: `--spacing-*` (mapped from space tokens)
|
|
217
|
+
- **Text Sizes**: `--text-*` (mapped from font-size tokens)
|
|
218
|
+
- **Radius**: `--radius-*` (mapped from border-radius tokens)
|
|
219
|
+
|
|
220
|
+
## 🎨 Framework Support
|
|
221
|
+
|
|
222
|
+
### Current
|
|
223
|
+
- ✅ **CSS Variables** - Universal support
|
|
224
|
+
- ✅ **Tailwind CSS v4** - Native integration
|
|
225
|
+
- ✅ **PrimeVue v4** - Configuration object with TypeScript support
|
|
226
|
+
- ✅ **TypeScript** - Full type definitions for all exports
|
|
227
|
+
|
|
228
|
+
## 🛠️ Development
|
|
229
|
+
|
|
230
|
+
### Building from Source
|
|
231
|
+
```bash
|
|
232
|
+
git clone https://github.com/bcc-code/design-tokens.git
|
|
233
|
+
npm install
|
|
234
|
+
npm run build
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### Project Structure
|
|
238
|
+
```
|
|
239
|
+
├── tokens/ # Source design tokens (from Figma Token Studio)
|
|
240
|
+
│ ├── primitives/ # Base tokens (colors, typography, spacing)
|
|
241
|
+
│ ├── semantic/ # Semantic tokens (light/dark themes)
|
|
242
|
+
│ ├── $themes.json # Theme configuration
|
|
243
|
+
│ └── $metadata.json # Token metadata
|
|
244
|
+
├── build/ # Generated CSS, Tailwind, and manual presets
|
|
245
|
+
│ └── bcc/ # BCC brand group (future: events/, members/)
|
|
246
|
+
│ ├── cdn/ # Generated: CDN-ready CSS files
|
|
247
|
+
│ ├── tailwind/ # Generated: Tailwind v4 integration
|
|
248
|
+
│ └── primevue/ # Manual: PrimeVue preset configuration
|
|
249
|
+
│ ├── index.js # Configuration object
|
|
250
|
+
│ └── index.d.ts # TypeScript definitions
|
|
251
|
+
├── demos/ # Usage examples
|
|
252
|
+
└── build.js # Build system (Style Dictionary)
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
### Build System Flow
|
|
256
|
+
|
|
257
|
+
1. **Figma Token Studio** → `tokens/` directory (JSON files)
|
|
258
|
+
2. **Style Dictionary** processes tokens via `build.js`
|
|
259
|
+
3. **Generated files** output to `build/bcc/cdn/` and `build/bcc/tailwind/`
|
|
260
|
+
4. **Manual presets** created in `build/bcc/primevue/` (protected from build clean)
|
|
261
|
+
|
|
262
|
+
## 📄 License
|
|
81
263
|
|
|
82
|
-
|
|
264
|
+
MIT © BCC Code
|
|
83
265
|
|
|
84
|
-
|
|
266
|
+
---
|
|
85
267
|
|
|
86
|
-
|
|
268
|
+
Made with ❤️ by [BCC Code](https://bcc.media)
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@media (prefers-color-scheme: dark) {
|
|
6
|
+
:root {
|
|
7
|
+
|
|
8
|
+
/* COLOR: TEXT */
|
|
9
|
+
--color-text-default: var(--color-dark-neutral-1100);
|
|
10
|
+
--color-text-subtle: var(--color-dark-neutral-600);
|
|
11
|
+
--color-text-subtler: var(--color-dark-neutral-400);
|
|
12
|
+
--color-text-disabled: var(--color-dark-neutral-alpha-400-a);
|
|
13
|
+
--color-text-selected: var(--color-bcc-400);
|
|
14
|
+
--color-text-inverse: var(--color-dark-neutral-0);
|
|
15
|
+
--color-text-brand: var(--color-bcc-400);
|
|
16
|
+
--color-text-success: var(--color-green-500);
|
|
17
|
+
--color-text-warning: var(--color-red-500);
|
|
18
|
+
--color-text-information: var(--color-neutral-0);
|
|
19
|
+
--color-text-danger: var(--color-neutral-0);
|
|
20
|
+
--color-text-accent-orange-default: var(--color-orange-400);
|
|
21
|
+
--color-text-accent-orange-bold: var(--color-orange-300);
|
|
22
|
+
--color-text-accent-yellow-default: var(--color-red-400);
|
|
23
|
+
--color-text-accent-yellow-bold: var(--color-red-300);
|
|
24
|
+
--color-text-accent-green-default: var(--color-green-400);
|
|
25
|
+
--color-text-accent-green-bold: var(--color-green-300);
|
|
26
|
+
--color-text-accent-teal-default: var(--color-teal-400);
|
|
27
|
+
--color-text-accent-teal-bold: var(--color-teal-300);
|
|
28
|
+
--color-text-accent-brown-default: var(--color-brown-400);
|
|
29
|
+
--color-text-accent-brown-bold: var(--color-brown-300);
|
|
30
|
+
--color-text-accent-blue-default: var(--color-blue-400);
|
|
31
|
+
--color-text-accent-blue-bold: var(--color-blue-300);
|
|
32
|
+
--color-text-accent-purple-default: var(--color-purple-400);
|
|
33
|
+
--color-text-accent-purple-bold: var(--color-purple-300);
|
|
34
|
+
--color-text-accent-magenta-default: var(--color-magenta-400);
|
|
35
|
+
--color-text-accent-magenta-bold: var(--color-magenta-300);
|
|
36
|
+
|
|
37
|
+
/* COLOR: LINK */
|
|
38
|
+
--color-link-default: var(--color-blue-500);
|
|
39
|
+
--color-link-hover: var(--color-blue-400);
|
|
40
|
+
--color-link-visited-default: var(--color-blue-200);
|
|
41
|
+
--color-link-visited-hover: var(--color-blue-200);
|
|
42
|
+
|
|
43
|
+
/* COLOR: BACKGROUND */
|
|
44
|
+
--color-background-brand-default: var(--color-bcc-500);
|
|
45
|
+
--color-background-brand-hover: var(--color-bcc-400);
|
|
46
|
+
--color-background-brand-pressed: var(--color-bcc-300);
|
|
47
|
+
--color-background-brand-subtler-default: var(--color-bcc-200);
|
|
48
|
+
--color-background-brand-subtler-hover: var(--color-bcc-300);
|
|
49
|
+
--color-background-brand-subtler-pressed: var(--color-bcc-400);
|
|
50
|
+
--color-background-brand-subtle-default: var(--color-bcc-400);
|
|
51
|
+
--color-background-brand-subtle-hover: var(--color-bcc-500);
|
|
52
|
+
--color-background-brand-subtle-pressed: var(--color-bcc-500);
|
|
53
|
+
--color-background-brand-bold-default: var(--color-bcc-300);
|
|
54
|
+
--color-background-brand-bold-hover: var(--color-bcc-200);
|
|
55
|
+
--color-background-brand-bold-pressed: var(--color-bcc-1000);
|
|
56
|
+
--color-background-accent-red-default: var(--color-red-500);
|
|
57
|
+
--color-background-accent-red-hover: var(--color-red-400);
|
|
58
|
+
--color-background-accent-red-pressed: var(--color-red-300);
|
|
59
|
+
--color-background-accent-red-subtler-default: var(--color-red-200);
|
|
60
|
+
--color-background-accent-red-subtler-hover: var(--color-red-300);
|
|
61
|
+
--color-background-accent-red-subtler-pressed: var(--color-red-400);
|
|
62
|
+
--color-background-accent-red-subtle-default: var(--color-red-400);
|
|
63
|
+
--color-background-accent-red-subtle-hover: var(--color-red-500);
|
|
64
|
+
--color-background-accent-red-subtle-pressed: var(--color-red-500);
|
|
65
|
+
--color-background-accent-red-bold-default: var(--color-red-300);
|
|
66
|
+
--color-background-accent-red-bold-hover: var(--color-red-400);
|
|
67
|
+
--color-background-accent-red-bold-pressed: var(--color-red-500);
|
|
68
|
+
--color-background-accent-orange-default: var(--color-orange-500);
|
|
69
|
+
--color-background-accent-orange-hover: var(--color-orange-400);
|
|
70
|
+
--color-background-accent-orange-pressed: var(--color-orange-300);
|
|
71
|
+
--color-background-accent-orange-subtler-default: var(--color-orange-200);
|
|
72
|
+
--color-background-accent-orange-subtler-hover: var(--color-orange-300);
|
|
73
|
+
--color-background-accent-orange-subtler-pressed: var(--color-orange-400);
|
|
74
|
+
--color-background-accent-orange-subtle-default: var(--color-orange-400);
|
|
75
|
+
--color-background-accent-orange-subtle-hover: var(--color-orange-500);
|
|
76
|
+
--color-background-accent-orange-subtle-pressed: var(--color-orange-500);
|
|
77
|
+
--color-background-accent-orange-bold-default: var(--color-orange-300);
|
|
78
|
+
--color-background-accent-orange-bold-hover: var(--color-orange-400);
|
|
79
|
+
--color-background-accent-orange-bold-pressed: var(--color-orange-500);
|
|
80
|
+
--color-background-accent-green-default: var(--color-green-500);
|
|
81
|
+
--color-background-accent-green-hover: var(--color-green-500);
|
|
82
|
+
--color-background-accent-green-pressed: var(--color-green-400);
|
|
83
|
+
--color-background-accent-green-subtler-default: var(--color-green-200);
|
|
84
|
+
--color-background-accent-green-subtler-hover: var(--color-green-300);
|
|
85
|
+
--color-background-accent-green-subtler-pressed: var(--color-green-400);
|
|
86
|
+
--color-background-accent-green-subtle-default: var(--color-green-400);
|
|
87
|
+
--color-background-accent-green-subtle-hover: var(--color-green-500);
|
|
88
|
+
--color-background-accent-green-subtle-pressed: var(--color-green-500);
|
|
89
|
+
--color-background-accent-green-bold-default: var(--color-green-300);
|
|
90
|
+
--color-background-accent-green-bold-hover: var(--color-green-400);
|
|
91
|
+
--color-background-accent-green-bold-pressed: var(--color-green-500);
|
|
92
|
+
--color-background-accent-teal-default: var(--color-teal-500);
|
|
93
|
+
--color-background-accent-teal-hover: var(--color-teal-400);
|
|
94
|
+
--color-background-accent-teal-pressed: var(--color-teal-300);
|
|
95
|
+
--color-background-accent-teal-subtler-default: var(--color-teal-200);
|
|
96
|
+
--color-background-accent-teal-subtler-hover: var(--color-teal-300);
|
|
97
|
+
--color-background-accent-teal-subtle-default: var(--color-teal-400);
|
|
98
|
+
--color-background-accent-teal-bold-default: var(--color-teal-300);
|
|
99
|
+
--color-background-accent-sand-default: var(--color-brown-500);
|
|
100
|
+
--color-background-accent-sand-subtler-default: var(--color-brown-200);
|
|
101
|
+
--color-background-accent-sand-subtler-hover: var(--color-brown-300);
|
|
102
|
+
--color-background-accent-sand-subtle-default: var(--color-brown-400);
|
|
103
|
+
--color-background-accent-sand-bold-default: var(--color-brown-300);
|
|
104
|
+
--color-background-accent-blue-default: var(--color-blue-500);
|
|
105
|
+
--color-background-accent-blue-subtler-default: var(--color-blue-200);
|
|
106
|
+
--color-background-accent-blue-subtle-default: var(--color-blue-400);
|
|
107
|
+
--color-background-accent-blue-bold-default: var(--color-blue-300);
|
|
108
|
+
--color-background-accent-purple-default: var(--color-purple-500);
|
|
109
|
+
--color-background-accent-purple-subtler-default: var(--color-purple-200);
|
|
110
|
+
--color-background-accent-purple-subtle-default: var(--color-purple-400);
|
|
111
|
+
--color-background-accent-purple-bold-default: var(--color-purple-300);
|
|
112
|
+
--color-background-accent-magenta-default: var(--color-magenta-500);
|
|
113
|
+
--color-background-accent-magenta-subtler-default: var(--color-magenta-200);
|
|
114
|
+
--color-background-accent-magenta-subtle-default: var(--color-magenta-400);
|
|
115
|
+
--color-background-accent-magenta-bold-default: var(--color-magenta-300);
|
|
116
|
+
--color-background-neutral-default: var(--color-neutral-alpha-300-a);
|
|
117
|
+
--color-background-neutral-hover: var(--color-neutral-alpha-400-a);
|
|
118
|
+
--color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
|
|
119
|
+
--color-background-neutral-subtle-pressed: var(--color-neutral-alpha-200-a);
|
|
120
|
+
--color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-100-a);
|
|
121
|
+
--color-background-neutral-subtle-hover: var(--color-neutral-alpha-200-a);
|
|
122
|
+
--color-background-neutral-bold-hover: var(--color-neutral-alpha-100-a);
|
|
123
|
+
--color-background-neutral-bold-pressed: var(--color-neutral-alpha-200-a);
|
|
124
|
+
|
|
125
|
+
/* COLOR: BORDER */
|
|
126
|
+
--color-border-default: var(--color-neutral-100);
|
|
127
|
+
--color-border-bold: var(--color-neutral-200);
|
|
128
|
+
--color-border-disabled: var(--color-neutral-100);
|
|
129
|
+
--color-border-selected: var(--color-bcc-500);
|
|
130
|
+
--color-border-accent-red: var(--color-red-500);
|
|
131
|
+
--color-border-accent-orange: var(--color-orange-500);
|
|
132
|
+
--color-border-accent-green: var(--color-green-500);
|
|
133
|
+
--color-border-accent-teal: var(--color-teal-500);
|
|
134
|
+
--color-border-accent-sand: var(--color-brown-500);
|
|
135
|
+
--color-border-accent-blue: var(--color-blue-500);
|
|
136
|
+
--color-border-accent-purple: var(--color-purple-500);
|
|
137
|
+
--color-border-accent-magenta: var(--color-magenta-500);
|
|
138
|
+
|
|
139
|
+
/* COLOR: ICON */
|
|
140
|
+
--color-icon-default: var(--color-neutral-100);
|
|
141
|
+
--color-icon-bold: var(--color-neutral-200);
|
|
142
|
+
--color-icon-disabled: var(--color-neutral-100);
|
|
143
|
+
--color-icon-selected: var(--color-bcc-500);
|
|
144
|
+
--color-icon-accent-red: var(--color-red-500);
|
|
145
|
+
--color-icon-accent-orage: var(--color-orange-500);
|
|
146
|
+
--color-icon-accent-green: var(--color-green-500);
|
|
147
|
+
--color-icon-accent-teal: var(--color-teal-500);
|
|
148
|
+
--color-icon-accent-sand: var(--color-brown-500);
|
|
149
|
+
--color-icon-accent-blue: var(--color-blue-500);
|
|
150
|
+
--color-icon-accent-purple: var(--color-purple-500);
|
|
151
|
+
--color-icon-accent-magenta: var(--color-magenta-500);
|
|
152
|
+
|
|
153
|
+
/* COLOR: ELEVATION */
|
|
154
|
+
--color-elevation-surface-default: var(--color-dark-neutral-100);
|
|
155
|
+
--color-elevation-surface-hovered: var(--color-dark-neutral-200);
|
|
156
|
+
--color-elevation-surface-pressed: var(--color-dark-neutral-300);
|
|
157
|
+
--color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
|
|
158
|
+
--color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
|
|
159
|
+
--color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
|
|
160
|
+
--color-elevation-surface-raised-default: var(--color-dark-neutral-200);
|
|
161
|
+
--color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
|
|
162
|
+
--color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
|
|
163
|
+
--color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
|
|
164
|
+
}
|
|
165
|
+
}
|