@lemmo-lab/tokens 1.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 +109 -0
- package/dist/css/themes/index.css +6 -0
- package/dist/css/themes/light.css +117 -0
- package/dist/css/themes/midnight.css +117 -0
- package/dist/css/themes/neon.css +117 -0
- package/dist/css/variables.css +411 -0
- package/dist/js/tokens.d.ts +21 -0
- package/dist/js/tokens.js +872 -0
- package/dist/tailwind/preset.js +38 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# @lemmo-lab/tokens
|
|
2
|
+
|
|
3
|
+
> The **Single Source of Truth** design tokens package for the Lemmo ecosystem. Authored in W3C DTCG format, strictly governed by CI validators, and built for multi-theme consumption.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 🌟 Architecture & Multi-Theme System
|
|
8
|
+
|
|
9
|
+
Lemu adopts a **Three-Tier Token Model**:
|
|
10
|
+
1. **Tier 1 — Core Primitives (`packages/tokens/src/core/`)**: Raw palettes, 4px spacing ladder, typography scales, radius, elevation, motion, breakpoints.
|
|
11
|
+
2. **Tier 2 — Semantic Contract (`packages/tokens/src/semantic/`)**: Named component roles (`--surface-primary`, `--text-primary`, `--border-default`, etc.) that alias Tier 1 primitives.
|
|
12
|
+
3. **Tier 3 — Themes (`packages/tokens/src/themes/`)**:
|
|
13
|
+
- **Default (Dark Theme)**: The default dark theme (`#131517` page, dark elevated surfaces, AA contrast text).
|
|
14
|
+
- **Light (Day Theme)**: Fully derived from the dark theme with inverted luminosities, clean off-white canvas (`#f8f9fa`), crisp white cards (`#ffffff`), and dark accessible text (`#131517`).
|
|
15
|
+
- **Neon Preset**: High-energy cyberpunk contrast with electric green, neon cyan, and hot magenta accents.
|
|
16
|
+
- **Midnight Preset**: OLED minimal pure-black (`#000000`) theme.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 📦 Installation & Consumption
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
pnpm add @lemmo-lab/tokens
|
|
24
|
+
# or
|
|
25
|
+
npm install @lemmo-lab/tokens
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 1. CSS Variables (Default Dark Theme)
|
|
29
|
+
Import the core variables in your app's global stylesheet or root entry:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
/* Loads default dark theme and all base tokens */
|
|
33
|
+
@import "@lemmo-lab/tokens/css/variables.css";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### 2. Multi-Theme Switching (Light / Neon / Midnight)
|
|
37
|
+
|
|
38
|
+
You can import specific themes or the entire theme index:
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
/* Option A: Import individual themes */
|
|
42
|
+
@import "@lemmo-lab/tokens/css/themes/light.css";
|
|
43
|
+
@import "@lemmo-lab/tokens/css/themes/neon.css";
|
|
44
|
+
@import "@lemmo-lab/tokens/css/themes/midnight.css";
|
|
45
|
+
|
|
46
|
+
/* Option B: Import all themes at once */
|
|
47
|
+
@import "@lemmo-lab/tokens/css/themes";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
To activate a theme, simply set `data-theme` or a class on `<html>` or any container:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!-- Default (Dark) -->
|
|
54
|
+
<html lang="en">
|
|
55
|
+
|
|
56
|
+
<!-- Day / Light Theme -->
|
|
57
|
+
<html lang="en" data-theme="light">
|
|
58
|
+
|
|
59
|
+
<!-- Neon Theme -->
|
|
60
|
+
<html lang="en" data-theme="neon">
|
|
61
|
+
|
|
62
|
+
<!-- Midnight OLED Theme -->
|
|
63
|
+
<html lang="en" data-theme="midnight">
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 3. JavaScript / TypeScript
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { tokens, themes } from '@lemmo-lab/tokens';
|
|
70
|
+
|
|
71
|
+
// Access themes
|
|
72
|
+
const darkTheme = themes.default;
|
|
73
|
+
const lightTheme = themes.light;
|
|
74
|
+
|
|
75
|
+
// Access primitives directly
|
|
76
|
+
console.log(tokens.core.spacing[200]); // ".5rem"
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 4. Tailwind CSS v4 Preset
|
|
80
|
+
|
|
81
|
+
```javascript
|
|
82
|
+
// tailwind.config.js
|
|
83
|
+
import lemmoPreset from '@lemmo-lab/tokens/tailwind';
|
|
84
|
+
|
|
85
|
+
export default {
|
|
86
|
+
presets: [lemmoPreset],
|
|
87
|
+
// ...
|
|
88
|
+
};
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## 🛡️ CI Governance Rules (AGENTS.md)
|
|
94
|
+
|
|
95
|
+
1. **Cosmetics vs. Geometry**: Themes may only override visual styles (colors, radius base, shadow, fonts). They may **never** touch geometry/spacing.
|
|
96
|
+
2. **Mandatory Paired Tokens**: Every `*-background` token must have a paired `*-foreground` token.
|
|
97
|
+
3. **Relative Radius**: Only `--radius-base` may be set by themes; `--radius-control`, `--radius-card`, etc. are strictly derived via `calc()`.
|
|
98
|
+
4. **No Orphan Tokens**: Every semantic contract key must exist across all shipped themes.
|
|
99
|
+
5. **DTCG Standard**: All source tokens follow W3C DTCG format (`$type`, `$value`).
|
|
100
|
+
|
|
101
|
+
To validate all rules locally:
|
|
102
|
+
```bash
|
|
103
|
+
pnpm validate
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
To build output tokens:
|
|
107
|
+
```bash
|
|
108
|
+
pnpm build
|
|
109
|
+
```
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @lemmo-lab/tokens - LIGHT Theme Preset
|
|
3
|
+
* Auto-generated by Style Dictionary pipeline. DO NOT EDIT DIRECTLY.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
[data-theme='light'],
|
|
7
|
+
:root[data-theme='light'],
|
|
8
|
+
.theme-light {
|
|
9
|
+
--lemmo-page-background: #f8f9fa;
|
|
10
|
+
--lemu-page-background: #f8f9fa;
|
|
11
|
+
--lemmo-page-foreground: #131517;
|
|
12
|
+
--lemu-page-foreground: #131517;
|
|
13
|
+
--lemmo-surface-primary-background: #ffffff;
|
|
14
|
+
--lemu-surface-primary-background: #ffffff;
|
|
15
|
+
--lemmo-surface-primary-foreground: #131517;
|
|
16
|
+
--lemu-surface-primary-foreground: #131517;
|
|
17
|
+
--lemmo-surface-secondary-background: #e9ecef;
|
|
18
|
+
--lemu-surface-secondary-background: #e9ecef;
|
|
19
|
+
--lemmo-surface-secondary-foreground: #495057;
|
|
20
|
+
--lemu-surface-secondary-foreground: #495057;
|
|
21
|
+
--lemmo-surface-tertiary-background: #ffffff;
|
|
22
|
+
--lemu-surface-tertiary-background: #ffffff;
|
|
23
|
+
--lemmo-surface-tertiary-foreground: #131517;
|
|
24
|
+
--lemu-surface-tertiary-foreground: #131517;
|
|
25
|
+
--lemmo-surface-elevated-background: #ffffff;
|
|
26
|
+
--lemu-surface-elevated-background: #ffffff;
|
|
27
|
+
--lemmo-surface-elevated-foreground: #131517;
|
|
28
|
+
--lemu-surface-elevated-foreground: #131517;
|
|
29
|
+
--lemmo-surface-glass-background: rgba(255, 255, 255, 0.88);
|
|
30
|
+
--lemu-surface-glass-background: rgba(255, 255, 255, 0.88);
|
|
31
|
+
--lemmo-surface-glass-foreground: #131517;
|
|
32
|
+
--lemu-surface-glass-foreground: #131517;
|
|
33
|
+
--lemmo-surface-brand-background: #d1fe17;
|
|
34
|
+
--lemu-surface-brand-background: #d1fe17;
|
|
35
|
+
--lemmo-surface-brand-foreground: #131517;
|
|
36
|
+
--lemu-surface-brand-foreground: #131517;
|
|
37
|
+
--lemmo-text-primary: #131517;
|
|
38
|
+
--lemu-text-primary: #131517;
|
|
39
|
+
--lemmo-text-secondary: #495057;
|
|
40
|
+
--lemu-text-secondary: #495057;
|
|
41
|
+
--lemmo-text-muted: #6c757d;
|
|
42
|
+
--lemu-text-muted: #6c757d;
|
|
43
|
+
--lemmo-text-faint: #adb5bd;
|
|
44
|
+
--lemu-text-faint: #adb5bd;
|
|
45
|
+
--lemmo-text-onBrand: #131517;
|
|
46
|
+
--lemu-text-onBrand: #131517;
|
|
47
|
+
--lemmo-text-reverted: #ffffff;
|
|
48
|
+
--lemu-text-reverted: #ffffff;
|
|
49
|
+
--lemmo-text-danger: #b7094c;
|
|
50
|
+
--lemu-text-danger: #b7094c;
|
|
51
|
+
--lemmo-text-warning: #d00000;
|
|
52
|
+
--lemu-text-warning: #d00000;
|
|
53
|
+
--lemmo-text-success: #1b4332;
|
|
54
|
+
--lemu-text-success: #1b4332;
|
|
55
|
+
--lemmo-text-info: #03045e;
|
|
56
|
+
--lemu-text-info: #03045e;
|
|
57
|
+
--lemmo-border-default: rgba(0, 0, 0, 0.18);
|
|
58
|
+
--lemu-border-default: rgba(0, 0, 0, 0.18);
|
|
59
|
+
--lemmo-border-subtle: rgba(0, 0, 0, 0.08);
|
|
60
|
+
--lemu-border-subtle: rgba(0, 0, 0, 0.08);
|
|
61
|
+
--lemmo-border-mid: rgba(0, 0, 0, 0.12);
|
|
62
|
+
--lemu-border-mid: rgba(0, 0, 0, 0.12);
|
|
63
|
+
--lemmo-border-danger: #d90429;
|
|
64
|
+
--lemu-border-danger: #d90429;
|
|
65
|
+
--lemmo-border-warning: #e85d04;
|
|
66
|
+
--lemu-border-warning: #e85d04;
|
|
67
|
+
--lemmo-border-success: #2b9348;
|
|
68
|
+
--lemu-border-success: #2b9348;
|
|
69
|
+
--lemmo-border-info: #0077b6;
|
|
70
|
+
--lemu-border-info: #0077b6;
|
|
71
|
+
--lemmo-interactive-primary-background: #d1fe17;
|
|
72
|
+
--lemu-interactive-primary-background: #d1fe17;
|
|
73
|
+
--lemmo-interactive-primary-foreground: #131517;
|
|
74
|
+
--lemu-interactive-primary-foreground: #131517;
|
|
75
|
+
--lemmo-interactive-primary-hover: #c4ee0b;
|
|
76
|
+
--lemu-interactive-primary-hover: #c4ee0b;
|
|
77
|
+
--lemmo-interactive-secondary-background: #0256fe;
|
|
78
|
+
--lemu-interactive-secondary-background: #0256fe;
|
|
79
|
+
--lemmo-interactive-secondary-foreground: #ffffff;
|
|
80
|
+
--lemu-interactive-secondary-foreground: #ffffff;
|
|
81
|
+
--lemmo-interactive-secondary-hover: #1544ed;
|
|
82
|
+
--lemu-interactive-secondary-hover: #1544ed;
|
|
83
|
+
--lemmo-status-danger-background: #ffe3e3;
|
|
84
|
+
--lemu-status-danger-background: #ffe3e3;
|
|
85
|
+
--lemmo-status-danger-foreground: #b7094c;
|
|
86
|
+
--lemu-status-danger-foreground: #b7094c;
|
|
87
|
+
--lemmo-status-danger-border: #d90429;
|
|
88
|
+
--lemu-status-danger-border: #d90429;
|
|
89
|
+
--lemmo-status-danger-glow: #ff8787;
|
|
90
|
+
--lemu-status-danger-glow: #ff8787;
|
|
91
|
+
--lemmo-status-warning-background: #fff3bf;
|
|
92
|
+
--lemu-status-warning-background: #fff3bf;
|
|
93
|
+
--lemmo-status-warning-foreground: #d00000;
|
|
94
|
+
--lemu-status-warning-foreground: #d00000;
|
|
95
|
+
--lemmo-status-warning-border: #e85d04;
|
|
96
|
+
--lemu-status-warning-border: #e85d04;
|
|
97
|
+
--lemmo-status-warning-glow: #ffe066;
|
|
98
|
+
--lemu-status-warning-glow: #ffe066;
|
|
99
|
+
--lemmo-status-success-background: #d3f9d8;
|
|
100
|
+
--lemu-status-success-background: #d3f9d8;
|
|
101
|
+
--lemmo-status-success-foreground: #1b4332;
|
|
102
|
+
--lemu-status-success-foreground: #1b4332;
|
|
103
|
+
--lemmo-status-success-border: #2b9348;
|
|
104
|
+
--lemu-status-success-border: #2b9348;
|
|
105
|
+
--lemmo-status-success-glow: #8ce99a;
|
|
106
|
+
--lemu-status-success-glow: #8ce99a;
|
|
107
|
+
--lemmo-status-info-background: #e7f5ff;
|
|
108
|
+
--lemu-status-info-background: #e7f5ff;
|
|
109
|
+
--lemmo-status-info-foreground: #03045e;
|
|
110
|
+
--lemu-status-info-foreground: #03045e;
|
|
111
|
+
--lemmo-status-info-border: #0077b6;
|
|
112
|
+
--lemu-status-info-border: #0077b6;
|
|
113
|
+
--lemmo-status-info-glow: #74c0fc;
|
|
114
|
+
--lemu-status-info-glow: #74c0fc;
|
|
115
|
+
--lemmo-radius-base: {radius.base};
|
|
116
|
+
--lemu-radius-base: {radius.base};
|
|
117
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @lemmo-lab/tokens - MIDNIGHT Theme Preset
|
|
3
|
+
* Auto-generated by Style Dictionary pipeline. DO NOT EDIT DIRECTLY.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
[data-theme='midnight'],
|
|
7
|
+
:root[data-theme='midnight'],
|
|
8
|
+
.theme-midnight {
|
|
9
|
+
--lemmo-page-background: #000000;
|
|
10
|
+
--lemu-page-background: #000000;
|
|
11
|
+
--lemmo-page-foreground: #ffffff;
|
|
12
|
+
--lemu-page-foreground: #ffffff;
|
|
13
|
+
--lemmo-surface-primary-background: #0c0c0c;
|
|
14
|
+
--lemu-surface-primary-background: #0c0c0c;
|
|
15
|
+
--lemmo-surface-primary-foreground: #ffffff;
|
|
16
|
+
--lemu-surface-primary-foreground: #ffffff;
|
|
17
|
+
--lemmo-surface-secondary-background: #161616;
|
|
18
|
+
--lemu-surface-secondary-background: #161616;
|
|
19
|
+
--lemmo-surface-secondary-foreground: #999999;
|
|
20
|
+
--lemu-surface-secondary-foreground: #999999;
|
|
21
|
+
--lemmo-surface-tertiary-background: #050505;
|
|
22
|
+
--lemu-surface-tertiary-background: #050505;
|
|
23
|
+
--lemmo-surface-tertiary-foreground: #ffffff;
|
|
24
|
+
--lemu-surface-tertiary-foreground: #ffffff;
|
|
25
|
+
--lemmo-surface-elevated-background: #1e1e1e;
|
|
26
|
+
--lemu-surface-elevated-background: #1e1e1e;
|
|
27
|
+
--lemmo-surface-elevated-foreground: #ffffff;
|
|
28
|
+
--lemu-surface-elevated-foreground: #ffffff;
|
|
29
|
+
--lemmo-surface-glass-background: rgba(0, 0, 0, 0.92);
|
|
30
|
+
--lemu-surface-glass-background: rgba(0, 0, 0, 0.92);
|
|
31
|
+
--lemmo-surface-glass-foreground: #ffffff;
|
|
32
|
+
--lemu-surface-glass-foreground: #ffffff;
|
|
33
|
+
--lemmo-surface-brand-background: #ffffff;
|
|
34
|
+
--lemu-surface-brand-background: #ffffff;
|
|
35
|
+
--lemmo-surface-brand-foreground: #000000;
|
|
36
|
+
--lemu-surface-brand-foreground: #000000;
|
|
37
|
+
--lemmo-text-primary: #ffffff;
|
|
38
|
+
--lemu-text-primary: #ffffff;
|
|
39
|
+
--lemmo-text-secondary: #999999;
|
|
40
|
+
--lemu-text-secondary: #999999;
|
|
41
|
+
--lemmo-text-muted: #666666;
|
|
42
|
+
--lemu-text-muted: #666666;
|
|
43
|
+
--lemmo-text-faint: #444444;
|
|
44
|
+
--lemu-text-faint: #444444;
|
|
45
|
+
--lemmo-text-onBrand: #000000;
|
|
46
|
+
--lemu-text-onBrand: #000000;
|
|
47
|
+
--lemmo-text-reverted: #000000;
|
|
48
|
+
--lemu-text-reverted: #000000;
|
|
49
|
+
--lemmo-text-danger: #ff4d4f;
|
|
50
|
+
--lemu-text-danger: #ff4d4f;
|
|
51
|
+
--lemmo-text-warning: #faad14;
|
|
52
|
+
--lemu-text-warning: #faad14;
|
|
53
|
+
--lemmo-text-success: #52c41a;
|
|
54
|
+
--lemu-text-success: #52c41a;
|
|
55
|
+
--lemmo-text-info: #1890ff;
|
|
56
|
+
--lemu-text-info: #1890ff;
|
|
57
|
+
--lemmo-border-default: rgba(255, 255, 255, 0.2);
|
|
58
|
+
--lemu-border-default: rgba(255, 255, 255, 0.2);
|
|
59
|
+
--lemmo-border-subtle: rgba(255, 255, 255, 0.08);
|
|
60
|
+
--lemu-border-subtle: rgba(255, 255, 255, 0.08);
|
|
61
|
+
--lemmo-border-mid: rgba(255, 255, 255, 0.12);
|
|
62
|
+
--lemu-border-mid: rgba(255, 255, 255, 0.12);
|
|
63
|
+
--lemmo-border-danger: #ff4d4f;
|
|
64
|
+
--lemu-border-danger: #ff4d4f;
|
|
65
|
+
--lemmo-border-warning: #faad14;
|
|
66
|
+
--lemu-border-warning: #faad14;
|
|
67
|
+
--lemmo-border-success: #52c41a;
|
|
68
|
+
--lemu-border-success: #52c41a;
|
|
69
|
+
--lemmo-border-info: #1890ff;
|
|
70
|
+
--lemu-border-info: #1890ff;
|
|
71
|
+
--lemmo-interactive-primary-background: #ffffff;
|
|
72
|
+
--lemu-interactive-primary-background: #ffffff;
|
|
73
|
+
--lemmo-interactive-primary-foreground: #000000;
|
|
74
|
+
--lemu-interactive-primary-foreground: #000000;
|
|
75
|
+
--lemmo-interactive-primary-hover: #e6e6e6;
|
|
76
|
+
--lemu-interactive-primary-hover: #e6e6e6;
|
|
77
|
+
--lemmo-interactive-secondary-background: #1f1f1f;
|
|
78
|
+
--lemu-interactive-secondary-background: #1f1f1f;
|
|
79
|
+
--lemmo-interactive-secondary-foreground: #ffffff;
|
|
80
|
+
--lemu-interactive-secondary-foreground: #ffffff;
|
|
81
|
+
--lemmo-interactive-secondary-hover: #2a2a2a;
|
|
82
|
+
--lemu-interactive-secondary-hover: #2a2a2a;
|
|
83
|
+
--lemmo-status-danger-background: #2a0a0a;
|
|
84
|
+
--lemu-status-danger-background: #2a0a0a;
|
|
85
|
+
--lemmo-status-danger-foreground: #ff7875;
|
|
86
|
+
--lemu-status-danger-foreground: #ff7875;
|
|
87
|
+
--lemmo-status-danger-border: #ff4d4f;
|
|
88
|
+
--lemu-status-danger-border: #ff4d4f;
|
|
89
|
+
--lemmo-status-danger-glow: #ff4d4f;
|
|
90
|
+
--lemu-status-danger-glow: #ff4d4f;
|
|
91
|
+
--lemmo-status-warning-background: #2b1d00;
|
|
92
|
+
--lemu-status-warning-background: #2b1d00;
|
|
93
|
+
--lemmo-status-warning-foreground: #ffc53d;
|
|
94
|
+
--lemu-status-warning-foreground: #ffc53d;
|
|
95
|
+
--lemmo-status-warning-border: #faad14;
|
|
96
|
+
--lemu-status-warning-border: #faad14;
|
|
97
|
+
--lemmo-status-warning-glow: #faad14;
|
|
98
|
+
--lemu-status-warning-glow: #faad14;
|
|
99
|
+
--lemmo-status-success-background: #092b00;
|
|
100
|
+
--lemu-status-success-background: #092b00;
|
|
101
|
+
--lemmo-status-success-foreground: #73d13d;
|
|
102
|
+
--lemu-status-success-foreground: #73d13d;
|
|
103
|
+
--lemmo-status-success-border: #52c41a;
|
|
104
|
+
--lemu-status-success-border: #52c41a;
|
|
105
|
+
--lemmo-status-success-glow: #52c41a;
|
|
106
|
+
--lemu-status-success-glow: #52c41a;
|
|
107
|
+
--lemmo-status-info-background: #001d40;
|
|
108
|
+
--lemu-status-info-background: #001d40;
|
|
109
|
+
--lemmo-status-info-foreground: #40a9ff;
|
|
110
|
+
--lemu-status-info-foreground: #40a9ff;
|
|
111
|
+
--lemmo-status-info-border: #1890ff;
|
|
112
|
+
--lemu-status-info-border: #1890ff;
|
|
113
|
+
--lemmo-status-info-glow: #1890ff;
|
|
114
|
+
--lemu-status-info-glow: #1890ff;
|
|
115
|
+
--lemmo-radius-base: 0px;
|
|
116
|
+
--lemu-radius-base: 0px;
|
|
117
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @lemmo-lab/tokens - NEON Theme Preset
|
|
3
|
+
* Auto-generated by Style Dictionary pipeline. DO NOT EDIT DIRECTLY.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
[data-theme='neon'],
|
|
7
|
+
:root[data-theme='neon'],
|
|
8
|
+
.theme-neon {
|
|
9
|
+
--lemmo-page-background: #08090a;
|
|
10
|
+
--lemu-page-background: #08090a;
|
|
11
|
+
--lemmo-page-foreground: #f0f6fc;
|
|
12
|
+
--lemu-page-foreground: #f0f6fc;
|
|
13
|
+
--lemmo-surface-primary-background: #12151a;
|
|
14
|
+
--lemu-surface-primary-background: #12151a;
|
|
15
|
+
--lemmo-surface-primary-foreground: #f0f6fc;
|
|
16
|
+
--lemu-surface-primary-foreground: #f0f6fc;
|
|
17
|
+
--lemmo-surface-secondary-background: #181c24;
|
|
18
|
+
--lemu-surface-secondary-background: #181c24;
|
|
19
|
+
--lemmo-surface-secondary-foreground: #9db1c5;
|
|
20
|
+
--lemu-surface-secondary-foreground: #9db1c5;
|
|
21
|
+
--lemmo-surface-tertiary-background: #060708;
|
|
22
|
+
--lemu-surface-tertiary-background: #060708;
|
|
23
|
+
--lemmo-surface-tertiary-foreground: #f0f6fc;
|
|
24
|
+
--lemu-surface-tertiary-foreground: #f0f6fc;
|
|
25
|
+
--lemmo-surface-elevated-background: #1c212b;
|
|
26
|
+
--lemu-surface-elevated-background: #1c212b;
|
|
27
|
+
--lemmo-surface-elevated-foreground: #f0f6fc;
|
|
28
|
+
--lemu-surface-elevated-foreground: #f0f6fc;
|
|
29
|
+
--lemmo-surface-glass-background: rgba(8, 9, 10, 0.9);
|
|
30
|
+
--lemu-surface-glass-background: rgba(8, 9, 10, 0.9);
|
|
31
|
+
--lemmo-surface-glass-foreground: #f0f6fc;
|
|
32
|
+
--lemu-surface-glass-foreground: #f0f6fc;
|
|
33
|
+
--lemmo-surface-brand-background: #00ff66;
|
|
34
|
+
--lemu-surface-brand-background: #00ff66;
|
|
35
|
+
--lemmo-surface-brand-foreground: #000000;
|
|
36
|
+
--lemu-surface-brand-foreground: #000000;
|
|
37
|
+
--lemmo-text-primary: #f0f6fc;
|
|
38
|
+
--lemu-text-primary: #f0f6fc;
|
|
39
|
+
--lemmo-text-secondary: #9db1c5;
|
|
40
|
+
--lemu-text-secondary: #9db1c5;
|
|
41
|
+
--lemmo-text-muted: #697e94;
|
|
42
|
+
--lemu-text-muted: #697e94;
|
|
43
|
+
--lemmo-text-faint: #465668;
|
|
44
|
+
--lemu-text-faint: #465668;
|
|
45
|
+
--lemmo-text-onBrand: #000000;
|
|
46
|
+
--lemu-text-onBrand: #000000;
|
|
47
|
+
--lemmo-text-reverted: #000000;
|
|
48
|
+
--lemu-text-reverted: #000000;
|
|
49
|
+
--lemmo-text-danger: #ff0055;
|
|
50
|
+
--lemu-text-danger: #ff0055;
|
|
51
|
+
--lemmo-text-warning: #ffcc00;
|
|
52
|
+
--lemu-text-warning: #ffcc00;
|
|
53
|
+
--lemmo-text-success: #00ff88;
|
|
54
|
+
--lemu-text-success: #00ff88;
|
|
55
|
+
--lemmo-text-info: #00f0ff;
|
|
56
|
+
--lemu-text-info: #00f0ff;
|
|
57
|
+
--lemmo-border-default: rgba(0, 240, 255, 0.45);
|
|
58
|
+
--lemu-border-default: rgba(0, 240, 255, 0.45);
|
|
59
|
+
--lemmo-border-subtle: rgba(0, 240, 255, 0.15);
|
|
60
|
+
--lemu-border-subtle: rgba(0, 240, 255, 0.15);
|
|
61
|
+
--lemmo-border-mid: rgba(0, 240, 255, 0.25);
|
|
62
|
+
--lemu-border-mid: rgba(0, 240, 255, 0.25);
|
|
63
|
+
--lemmo-border-danger: #ff0055;
|
|
64
|
+
--lemu-border-danger: #ff0055;
|
|
65
|
+
--lemmo-border-warning: #ffcc00;
|
|
66
|
+
--lemu-border-warning: #ffcc00;
|
|
67
|
+
--lemmo-border-success: #00ff88;
|
|
68
|
+
--lemu-border-success: #00ff88;
|
|
69
|
+
--lemmo-border-info: #00f0ff;
|
|
70
|
+
--lemu-border-info: #00f0ff;
|
|
71
|
+
--lemmo-interactive-primary-background: #00ff66;
|
|
72
|
+
--lemu-interactive-primary-background: #00ff66;
|
|
73
|
+
--lemmo-interactive-primary-foreground: #000000;
|
|
74
|
+
--lemu-interactive-primary-foreground: #000000;
|
|
75
|
+
--lemmo-interactive-primary-hover: #33ff85;
|
|
76
|
+
--lemu-interactive-primary-hover: #33ff85;
|
|
77
|
+
--lemmo-interactive-secondary-background: #00f0ff;
|
|
78
|
+
--lemu-interactive-secondary-background: #00f0ff;
|
|
79
|
+
--lemmo-interactive-secondary-foreground: #000000;
|
|
80
|
+
--lemu-interactive-secondary-foreground: #000000;
|
|
81
|
+
--lemmo-interactive-secondary-hover: #4df4ff;
|
|
82
|
+
--lemu-interactive-secondary-hover: #4df4ff;
|
|
83
|
+
--lemmo-status-danger-background: rgba(255, 0, 85, 0.15);
|
|
84
|
+
--lemu-status-danger-background: rgba(255, 0, 85, 0.15);
|
|
85
|
+
--lemmo-status-danger-foreground: #ff3377;
|
|
86
|
+
--lemu-status-danger-foreground: #ff3377;
|
|
87
|
+
--lemmo-status-danger-border: #ff0055;
|
|
88
|
+
--lemu-status-danger-border: #ff0055;
|
|
89
|
+
--lemmo-status-danger-glow: #ff0055;
|
|
90
|
+
--lemu-status-danger-glow: #ff0055;
|
|
91
|
+
--lemmo-status-warning-background: rgba(255, 204, 0, 0.15);
|
|
92
|
+
--lemu-status-warning-background: rgba(255, 204, 0, 0.15);
|
|
93
|
+
--lemmo-status-warning-foreground: #ffdd33;
|
|
94
|
+
--lemu-status-warning-foreground: #ffdd33;
|
|
95
|
+
--lemmo-status-warning-border: #ffcc00;
|
|
96
|
+
--lemu-status-warning-border: #ffcc00;
|
|
97
|
+
--lemmo-status-warning-glow: #ffcc00;
|
|
98
|
+
--lemu-status-warning-glow: #ffcc00;
|
|
99
|
+
--lemmo-status-success-background: rgba(0, 255, 136, 0.15);
|
|
100
|
+
--lemu-status-success-background: rgba(0, 255, 136, 0.15);
|
|
101
|
+
--lemmo-status-success-foreground: #33ffa3;
|
|
102
|
+
--lemu-status-success-foreground: #33ffa3;
|
|
103
|
+
--lemmo-status-success-border: #00ff88;
|
|
104
|
+
--lemu-status-success-border: #00ff88;
|
|
105
|
+
--lemmo-status-success-glow: #00ff88;
|
|
106
|
+
--lemu-status-success-glow: #00ff88;
|
|
107
|
+
--lemmo-status-info-background: rgba(0, 240, 255, 0.15);
|
|
108
|
+
--lemu-status-info-background: rgba(0, 240, 255, 0.15);
|
|
109
|
+
--lemmo-status-info-foreground: #4df4ff;
|
|
110
|
+
--lemu-status-info-foreground: #4df4ff;
|
|
111
|
+
--lemmo-status-info-border: #00f0ff;
|
|
112
|
+
--lemu-status-info-border: #00f0ff;
|
|
113
|
+
--lemmo-status-info-glow: #00f0ff;
|
|
114
|
+
--lemu-status-info-glow: #00f0ff;
|
|
115
|
+
--lemmo-radius-base: .25rem;
|
|
116
|
+
--lemu-radius-base: .25rem;
|
|
117
|
+
}
|