turbo-themes 0.12.5 → 0.12.6
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/README.md +51 -147
- data/lib/turbo-themes/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 40cb874edb0b6bcdf578f2ed25d8e426ae75cdbd3ef483986c0eea054c34af7b
|
|
4
|
+
data.tar.gz: 2b74214afeadb98021a1c4fe600a9a9c3daec1668a5c8afd0bbec9b4dcc5b831
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c77bd6fe2d7f92f778bea813df3ac8a345006f934ceec840228b48f444bf191da2ef973fb23cd865eb033e8bdd42d10bd9b24396808e1403f47d5e25e93b1730
|
|
7
|
+
data.tar.gz: 6cf638258992f473c20337bde0637019f4db158ac5082eb9ea6b811696db7940027b076f5e8758db752c3c5b151f9d440c83bd328729b34215f89849657f2d9f
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
|
@@ -16,6 +16,7 @@ Universal, accessible theme packs and a drop-in theme selector.
|
|
|
16
16
|
[](https://github.com/TurboCoder13/turbo-themes/actions/workflows/security-sbom.yml)
|
|
17
17
|
|
|
18
18
|
[](https://www.npmjs.com/package/@turbocoder13/turbo-themes)
|
|
19
|
+
[](https://pypi.org/project/turbo-themes/)
|
|
19
20
|
[](https://rubygems.org/gems/turbo-themes)
|
|
20
21
|
|
|
21
22
|
[](https://bulma.io/)
|
|
@@ -37,161 +38,76 @@ projects:
|
|
|
37
38
|
|
|
38
39
|
## Features
|
|
39
40
|
|
|
40
|
-
- **
|
|
41
|
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
- Full Bulma Sass variable integration
|
|
41
|
+
- **9 curated themes** from Catppuccin, Dracula, GitHub, and Bulma
|
|
42
|
+
- **Multi-platform**: npm, PyPI, RubyGems, Swift Package Manager
|
|
43
|
+
- **Design tokens**: Platform-agnostic JSON tokens for any framework
|
|
44
|
+
- **Accessible**: WCAG-compliant with keyboard and screen reader support
|
|
45
|
+
- **Framework-agnostic**: Works with React, Vue, Svelte, vanilla JS, or native apps
|
|
46
|
+
- **Type-safe**: Full TypeScript, Python type hints, and Swift types
|
|
47
|
+
- **Tested**: Unit tests, E2E tests, Lighthouse CI, and visual regression
|
|
48
48
|
|
|
49
49
|
## Installation
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
| Platform | Package Manager | Install Command |
|
|
52
|
+
| ------------------------- | --------------- | ------------------------------------------------------ |
|
|
53
|
+
| **JavaScript/TypeScript** | npm / bun | `npm install @turbocoder13/turbo-themes` |
|
|
54
|
+
| **Python** | pip / uv | `pip install turbo-themes` |
|
|
55
|
+
| **Ruby** | bundler | `gem "turbo-themes", "~> 0.12"` |
|
|
56
|
+
| **Swift** | SPM | Add `https://github.com/TurboCoder13/turbo-themes.git` |
|
|
57
|
+
|
|
58
|
+
### JavaScript/TypeScript
|
|
52
59
|
|
|
53
60
|
```bash
|
|
54
|
-
# Using Bun (recommended
|
|
61
|
+
# Using Bun (recommended)
|
|
55
62
|
bun add @turbocoder13/turbo-themes
|
|
56
63
|
|
|
57
64
|
# Using npm
|
|
58
65
|
npm install @turbocoder13/turbo-themes
|
|
59
66
|
```
|
|
60
67
|
|
|
61
|
-
###
|
|
68
|
+
### Python
|
|
62
69
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
70
|
+
```bash
|
|
71
|
+
pip install turbo-themes
|
|
72
|
+
# or
|
|
73
|
+
uv add turbo-themes
|
|
74
|
+
```
|
|
67
75
|
|
|
68
|
-
|
|
76
|
+
### Ruby (Jekyll)
|
|
69
77
|
|
|
70
78
|
```ruby
|
|
71
79
|
# Gemfile
|
|
72
|
-
gem "turbo-themes", "~> 0.
|
|
80
|
+
gem "turbo-themes", "~> 0.12"
|
|
73
81
|
```
|
|
74
82
|
|
|
75
|
-
|
|
76
|
-
# _config.yml
|
|
77
|
-
theme: turbo-themes
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Then run:
|
|
83
|
+
### Swift
|
|
81
84
|
|
|
82
|
-
|
|
83
|
-
bundle install
|
|
84
|
-
bundle exec jekyll serve
|
|
85
|
-
```
|
|
85
|
+
Add via Xcode: `https://github.com/TurboCoder13/turbo-themes.git` (version `0.12.0`+)
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
## Quick Start
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
### Using Design Tokens (Recommended)
|
|
90
90
|
|
|
91
|
-
|
|
91
|
+
Access theme colors as platform-agnostic JSON tokens:
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
- `global.css` (required)
|
|
96
|
-
- Flavor CSS files (e.g., `catppuccin-mocha.css`, `dracula.css`, `github-dark.css`) -
|
|
97
|
-
copy the ones you want to use
|
|
98
|
-
2. Include CSS links (adjust paths to match your project structure):
|
|
93
|
+
```ts
|
|
94
|
+
import tokens from '@turbocoder13/turbo-themes/tokens.json';
|
|
99
95
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<link id="theme-flavor-css" rel="stylesheet" href="#" />
|
|
96
|
+
const mocha = tokens.themes['catppuccin-mocha'];
|
|
97
|
+
console.log(mocha.tokens.brand.primary); // "#89b4fa"
|
|
103
98
|
```
|
|
104
99
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
```html
|
|
108
|
-
<div class="navbar-item has-dropdown is-hoverable">
|
|
109
|
-
<button
|
|
110
|
-
class="navbar-link"
|
|
111
|
-
id="theme-flavor-trigger"
|
|
112
|
-
type="button"
|
|
113
|
-
aria-haspopup="true"
|
|
114
|
-
aria-expanded="false"
|
|
115
|
-
aria-controls="theme-flavor-menu"
|
|
116
|
-
>
|
|
117
|
-
<span class="icon is-small" id="theme-flavor-trigger-icon"></span>
|
|
118
|
-
Theme
|
|
119
|
-
</button>
|
|
120
|
-
<div
|
|
121
|
-
class="navbar-dropdown"
|
|
122
|
-
id="theme-flavor-menu"
|
|
123
|
-
aria-labelledby="theme-flavor-trigger"
|
|
124
|
-
>
|
|
125
|
-
<div class="dropdown-content" id="theme-flavor-items"></div>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
<div class="select is-rounded is-small is-hidden">
|
|
129
|
-
<select id="theme-flavor-select" aria-label="Theme flavor" disabled></select>
|
|
130
|
-
</div>
|
|
131
|
-
```
|
|
100
|
+
### JavaScript/TypeScript
|
|
132
101
|
|
|
133
102
|
```ts
|
|
134
103
|
import { initTheme, wireFlavorSelector } from '@turbocoder13/turbo-themes';
|
|
135
104
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
});
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### Jekyll Sites
|
|
143
|
-
|
|
144
|
-
1. Install the gem (see above)
|
|
145
|
-
2. Include CSS links in your layout:
|
|
146
|
-
|
|
147
|
-
```html
|
|
148
|
-
<link
|
|
149
|
-
id="theme-global-css"
|
|
150
|
-
rel="stylesheet"
|
|
151
|
-
href="{{ '/assets/css/themes/global.css' | relative_url }}"
|
|
152
|
-
/>
|
|
153
|
-
<link id="theme-flavor-css" rel="stylesheet" href="#" />
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
1. Add selector markup and initialize:
|
|
157
|
-
|
|
158
|
-
```html
|
|
159
|
-
<div class="navbar-item has-dropdown is-hoverable">
|
|
160
|
-
<button
|
|
161
|
-
class="navbar-link"
|
|
162
|
-
id="theme-flavor-trigger"
|
|
163
|
-
type="button"
|
|
164
|
-
aria-haspopup="true"
|
|
165
|
-
aria-expanded="false"
|
|
166
|
-
aria-controls="theme-flavor-menu"
|
|
167
|
-
>
|
|
168
|
-
<span class="icon is-small" id="theme-flavor-trigger-icon"></span>
|
|
169
|
-
Theme
|
|
170
|
-
</button>
|
|
171
|
-
<div
|
|
172
|
-
class="navbar-dropdown"
|
|
173
|
-
id="theme-flavor-menu"
|
|
174
|
-
aria-labelledby="theme-flavor-trigger"
|
|
175
|
-
>
|
|
176
|
-
<div class="dropdown-content" id="theme-flavor-items"></div>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
<div class="select is-rounded is-small is-hidden">
|
|
180
|
-
<select id="theme-flavor-select" aria-label="Theme flavor" disabled></select>
|
|
181
|
-
</div>
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
```html
|
|
185
|
-
<script src="{{ '/assets/js/theme-selector.js' | relative_url }}"></script>
|
|
105
|
+
// Initialize theme system
|
|
106
|
+
initTheme(document, window);
|
|
107
|
+
wireFlavorSelector(document, window);
|
|
186
108
|
```
|
|
187
109
|
|
|
188
|
-
### Python
|
|
189
|
-
|
|
190
|
-
```bash
|
|
191
|
-
pip install turbo-themes
|
|
192
|
-
# or
|
|
193
|
-
uv add turbo-themes
|
|
194
|
-
```
|
|
110
|
+
### Python
|
|
195
111
|
|
|
196
112
|
```python
|
|
197
113
|
from turbo_themes import ThemeManager, THEMES
|
|
@@ -199,37 +115,24 @@ from turbo_themes import ThemeManager, THEMES
|
|
|
199
115
|
manager = ThemeManager()
|
|
200
116
|
manager.set_theme("catppuccin-mocha")
|
|
201
117
|
css_vars = manager.apply_theme_to_css_variables()
|
|
202
|
-
print(len(css_vars), "CSS variables ready to inject")
|
|
203
118
|
```
|
|
204
119
|
|
|
205
|
-
### Swift
|
|
206
|
-
|
|
207
|
-
1. In Xcode, add a package dependency:
|
|
208
|
-
URL: `https://github.com/TurboCoder13/turbo-themes.git`
|
|
209
|
-
Version: `from 0.10.8`
|
|
210
|
-
2. Add the library product **TurboThemes** to your target.
|
|
120
|
+
### Swift
|
|
211
121
|
|
|
212
122
|
```swift
|
|
213
123
|
import TurboThemes
|
|
214
124
|
|
|
215
125
|
let mocha = ThemeRegistry.themes[.catppuccinMocha]
|
|
216
|
-
// Use
|
|
126
|
+
// Use theme colors in SwiftUI views
|
|
217
127
|
```
|
|
218
128
|
|
|
219
|
-
###
|
|
220
|
-
|
|
221
|
-
- RubyGems (Jekyll theme)
|
|
222
|
-
- npm (JS/TS + CSS assets)
|
|
223
|
-
- PyPI (Python helper library)
|
|
224
|
-
- Swift Package (SwiftUI previews/helpers)
|
|
225
|
-
|
|
226
|
-
#### Available Exports
|
|
129
|
+
### Available Exports
|
|
227
130
|
|
|
228
|
-
| Import Path | Use Case
|
|
229
|
-
| ---------------------------------------- |
|
|
230
|
-
| `@turbocoder13/turbo-themes/tokens`
|
|
231
|
-
| `@turbocoder13/turbo-themes/tokens
|
|
232
|
-
| `@turbocoder13/turbo-themes/css/*` | CSS files
|
|
131
|
+
| Import Path | Use Case |
|
|
132
|
+
| ---------------------------------------- | ----------------------------- |
|
|
133
|
+
| `@turbocoder13/turbo-themes/tokens.json` | Platform-agnostic JSON tokens |
|
|
134
|
+
| `@turbocoder13/turbo-themes/tokens` | TypeScript tokens with types |
|
|
135
|
+
| `@turbocoder13/turbo-themes/css/*` | Pre-built CSS files |
|
|
233
136
|
|
|
234
137
|
## Examples
|
|
235
138
|
|
|
@@ -243,7 +146,7 @@ frameworks:
|
|
|
243
146
|
| [Vue](examples/vue) | Vue 3 | Composition API with `useTheme` composable | [StackBlitz](https://stackblitz.com/github/TurboCoder13/turbo-themes/tree/main/examples/vue) |
|
|
244
147
|
| [Tailwind](examples/tailwind) | Tailwind CSS | Preset integration with utility classes | [StackBlitz](https://stackblitz.com/github/TurboCoder13/turbo-themes/tree/main/examples/tailwind) |
|
|
245
148
|
| [Bootstrap](examples/bootstrap) | Bootstrap 5 | SCSS integration with light/dark mode | [StackBlitz](https://stackblitz.com/github/TurboCoder13/turbo-themes/tree/main/examples/bootstrap) |
|
|
246
|
-
| [Jekyll](examples/jekyll) | Jekyll | Ruby gem
|
|
149
|
+
| [Jekyll](examples/jekyll) | Jekyll | Ruby gem integration | - |
|
|
247
150
|
| [SwiftUI](examples/swift-swiftui) | SwiftUI | iOS/macOS native app | - |
|
|
248
151
|
|
|
249
152
|
Each example includes theme switching, localStorage persistence, and FOUC prevention.
|
|
@@ -281,8 +184,9 @@ For detailed E2E testing documentation, see `docs/E2E-TESTING.md`.
|
|
|
281
184
|
### Prerequisites
|
|
282
185
|
|
|
283
186
|
- **Bun** 1.3+ (recommended) - [Install Bun](https://bun.sh/docs/installation)
|
|
284
|
-
- **Node.js** 22+ (alternative)
|
|
285
|
-
- **
|
|
187
|
+
- **Node.js** 22+ (alternative to Bun)
|
|
188
|
+
- **Python** 3.11+ with uv (for Python package development)
|
|
189
|
+
- **Ruby** 3.4+ with Bundler (optional, for gem builds)
|
|
286
190
|
|
|
287
191
|
### Quick Start
|
|
288
192
|
|
data/lib/turbo-themes/version.rb
CHANGED