@bcc-code/design-tokens 1.0.3 → 1.0.4
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 +212 -57
- 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/primevue-preset.js +0 -5
- package/dist/tailwind.css +0 -799
- package/dist/variables.css +0 -750
package/README.md
CHANGED
|
@@ -1,101 +1,256 @@
|
|
|
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.
|
|
8
7
|
|
|
9
|
-
##
|
|
8
|
+
## 🚀 Features
|
|
10
9
|
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
## 📦 Installation & Usage
|
|
21
|
-
|
|
22
|
-
### ▶️ Install via NPM (for Vue/PrimeVue)
|
|
17
|
+
## 📦 Installation
|
|
23
18
|
|
|
24
19
|
```bash
|
|
25
20
|
npm install @bcc-code/design-tokens
|
|
26
21
|
```
|
|
27
22
|
|
|
28
|
-
|
|
23
|
+
## 📁 Package Structure
|
|
29
24
|
|
|
30
|
-
|
|
31
|
-
import "@bcc-code/design-tokens/dist/variables.css"; // Injects all CSS variables
|
|
32
|
-
import { primeVuePreset } from "@bcc-code/design-tokens";
|
|
25
|
+
Understanding the import paths:
|
|
33
26
|
|
|
34
|
-
app.use(PrimeVue, {
|
|
35
|
-
theme: {
|
|
36
|
-
preset: primeVuePreset,
|
|
37
|
-
darkModeSelector: ".dark-mode", // You toggle this class manually or via script
|
|
38
|
-
},
|
|
39
|
-
});
|
|
40
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.)
|
|
41
34
|
|
|
42
|
-
|
|
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
|
|
43
39
|
|
|
40
|
+
## 🎯 Usage
|
|
41
|
+
|
|
42
|
+
### CSS Variables (WordPress, Static Sites)
|
|
43
|
+
|
|
44
|
+
**CDN (Recommended):**
|
|
44
45
|
```html
|
|
45
|
-
<link
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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';
|
|
52
|
+
```
|
|
53
|
+
|
|
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
|
+
}
|
|
49
67
|
```
|
|
50
68
|
|
|
51
|
-
|
|
69
|
+
### Tailwind CSS v4
|
|
52
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:**
|
|
53
82
|
```html
|
|
54
|
-
<
|
|
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>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### PrimeVue Integration
|
|
93
|
+
|
|
94
|
+
**1. Install dependencies:**
|
|
95
|
+
```bash
|
|
96
|
+
npm install primevue @primevue/themes
|
|
97
|
+
```
|
|
98
|
+
|
|
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';
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
**3. Configure PrimeVue:**
|
|
106
|
+
```javascript
|
|
107
|
+
import { createApp } from 'vue';
|
|
108
|
+
import PrimeVue from 'primevue/config';
|
|
109
|
+
|
|
110
|
+
const app = createApp(App);
|
|
111
|
+
|
|
112
|
+
app.use(PrimeVue, {
|
|
113
|
+
theme: {
|
|
114
|
+
preset: BCCPreset,
|
|
115
|
+
options: {
|
|
116
|
+
darkModeSelector: '.dark' // or 'system' for auto-detection
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
```
|
|
121
|
+
|
|
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>
|
|
55
134
|
```
|
|
56
135
|
|
|
57
|
-
|
|
136
|
+
## 🌙 Dark Mode
|
|
58
137
|
|
|
59
|
-
###
|
|
138
|
+
### Automatic (CSS Media Query)
|
|
139
|
+
Works out of the box with user's system preferences:
|
|
60
140
|
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
141
|
+
```css
|
|
142
|
+
/* Light mode */
|
|
143
|
+
:root {
|
|
144
|
+
--color-text-default: #1e242d;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Dark mode - automatically applied */
|
|
148
|
+
@media (prefers-color-scheme: dark) {
|
|
149
|
+
:root {
|
|
150
|
+
--color-text-default: #dee4ea;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
68
153
|
```
|
|
69
154
|
|
|
70
|
-
###
|
|
155
|
+
### Manual (Class-based)
|
|
156
|
+
Control dark mode programmatically:
|
|
157
|
+
|
|
158
|
+
```javascript
|
|
159
|
+
// Toggle dark mode
|
|
160
|
+
document.documentElement.classList.toggle('dark');
|
|
71
161
|
|
|
72
|
-
|
|
162
|
+
// Enable dark mode
|
|
163
|
+
document.documentElement.classList.add('dark');
|
|
73
164
|
|
|
74
|
-
|
|
165
|
+
// Disable dark mode
|
|
166
|
+
document.documentElement.classList.remove('dark');
|
|
167
|
+
```
|
|
75
168
|
|
|
76
|
-
|
|
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
|
+
```
|
|
77
182
|
|
|
78
|
-
|
|
79
|
-
- `primevue-preset.js`: an override object usable in PrimeVue
|
|
183
|
+
## 📋 Available Tokens
|
|
80
184
|
|
|
81
|
-
|
|
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-*`
|
|
82
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
|
|
83
221
|
```bash
|
|
222
|
+
git clone https://github.com/bcc-code/bcc-tokens.git
|
|
223
|
+
npm install
|
|
84
224
|
npm run build
|
|
85
225
|
```
|
|
86
226
|
|
|
87
|
-
###
|
|
88
|
-
|
|
89
|
-
|
|
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
|
+
```
|
|
90
242
|
|
|
91
|
-
|
|
243
|
+
### Build System Flow
|
|
92
244
|
|
|
93
|
-
|
|
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)
|
|
94
249
|
|
|
95
|
-
|
|
250
|
+
## 📄 License
|
|
96
251
|
|
|
97
|
-
|
|
252
|
+
MIT © BCC Code
|
|
98
253
|
|
|
99
|
-
|
|
254
|
+
---
|
|
100
255
|
|
|
101
|
-
|
|
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
|
+
}
|