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