bh 6.2.0 → 6.3.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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +12 -0
- data/README.md +30 -14
- data/app/stylesheets/theme/bootstrap.css +10 -0
- data/app/stylesheets/theme/dawn.css +189 -0
- data/app/stylesheets/theme/dracula.css +189 -0
- data/app/stylesheets/theme/gruvbox.css +189 -0
- data/app/stylesheets/theme/monokai.css +190 -0
- data/app/stylesheets/theme/nord.css +189 -0
- data/app/stylesheets/theme/one_dark.css +189 -0
- data/app/stylesheets/theme/solarized.css +188 -0
- data/app/stylesheets/theme/tokyo_night.css +189 -0
- data/build.mjs +6 -0
- data/lib/bh/version.rb +1 -1
- data/package.json +2 -14
- data/public/bh/theme/bootstrap.css +10 -0
- data/public/bh/theme/dawn.css +189 -0
- data/public/bh/theme/dracula.css +189 -0
- data/public/bh/theme/gruvbox.css +189 -0
- data/public/bh/theme/monokai.css +190 -0
- data/public/bh/theme/nord.css +189 -0
- data/public/bh/theme/one_dark.css +189 -0
- data/public/bh/theme/solarized.css +188 -0
- data/public/bh/theme/tokyo_night.css +189 -0
- metadata +19 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8e8820e04b1b71fbfacf44696b6fec712f77987c217dbedf5c2314867600bf42
|
|
4
|
+
data.tar.gz: 761251633d36f3e62dd92d9784c71d44a2306bc6c3358d24b3420f3347cebff6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 84be37f63354fe89c52d6532cb55a5c2db53127a568c228d58acc53d7d3a0ff3cbb98cad224b7bdd76138a3a02ffcf2b3a338cacda2ec0f12427e26fd10db361
|
|
7
|
+
data.tar.gz: bd2d39d1d0377f5e5730f90ad6400edf736b1cc281b63e2a491c8c6cf7bf922e3822a6f1525e5f7ae775f3ff48de3f089f2c526d9a09b992f6c53a875b9d9eb7
|
data/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,18 @@ For more information about changelogs, check
|
|
|
8
8
|
|
|
9
9
|
## [Unreleased]
|
|
10
10
|
|
|
11
|
+
## 6.3.0 - 2026-09-18
|
|
12
|
+
|
|
13
|
+
* [FEATURE] The nine palettes, served at `/bh/theme/<name>.css`
|
|
14
|
+
|
|
15
|
+
`bootstrap`, `dawn`, `dracula`, `gruvbox`, `monokai`, `nord`, `one_dark`, `solarized` and
|
|
16
|
+
`tokyo_night`, each restating all thirteen steps of every Bootstrap family it repaints. They
|
|
17
|
+
arrived with the `scheme` controller in 6.2.0 and the controller had nothing to swap: it
|
|
18
|
+
reads `${path}/${theme}.css`, and no such file shipped. Now it does.
|
|
19
|
+
|
|
20
|
+
They are copied beside the stylesheet rather than bundled into it, because a page links one
|
|
21
|
+
at a time and swaps it for another, which is the whole point of them.
|
|
22
|
+
|
|
11
23
|
## 6.2.0 - 2026-09-18
|
|
12
24
|
|
|
13
25
|
A breaking change that keeps its major on purpose. 6.0 through 6.1.4 were an alpha in
|
data/README.md
CHANGED
|
@@ -21,10 +21,10 @@ gem install bh
|
|
|
21
21
|
|
|
22
22
|
```ruby
|
|
23
23
|
# Gemfile
|
|
24
|
-
gem 'bh', '~> 6.
|
|
24
|
+
gem 'bh', '~> 6.3.0'
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
`~> 6.
|
|
27
|
+
`~> 6.3.0` stops short of `6.4`, and that is the pin to hold: **until this line settles it
|
|
28
28
|
breaks on a minor, not on a major.** Rails 8.1 and Ruby 3.2 are the minimum.
|
|
29
29
|
|
|
30
30
|
6.2.0 breaks everything before it and keeps its major anyway. 6.0 through 6.1.4 were an alpha
|
|
@@ -40,6 +40,33 @@ puts both in the head, along with everything Bootstrap and Turbo read:
|
|
|
40
40
|
<%= bh_head_tags %>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
## The palettes
|
|
44
|
+
|
|
45
|
+
Nine of them, served at `/bh/theme/<name>.css` and linked one at a time, after the stylesheet:
|
|
46
|
+
`bootstrap`, `dawn`, `dracula`, `gruvbox`, `monokai`, `nord`, `one_dark`, `solarized`,
|
|
47
|
+
`tokyo_night`. Each restates all thirteen steps of every Bootstrap family it repaints, plus
|
|
48
|
+
`--bs-white`, `--bs-black` and the three text tones. Every accent clears 3:1 against its label
|
|
49
|
+
and every text tone 4:1, in both modes.
|
|
50
|
+
|
|
51
|
+
`bootstrap` declares nothing: upstream's palette comes back by dropping the others' block
|
|
52
|
+
rather than by writing one, and it is named so a toggle can reach it — a reader who rotates
|
|
53
|
+
through nine and never finds the one the pages started in has been shown a door with no handle
|
|
54
|
+
on the inside.
|
|
55
|
+
|
|
56
|
+
The `scheme` controller does the swapping, and the choice belongs to the reader:
|
|
57
|
+
|
|
58
|
+
```erb
|
|
59
|
+
<button type='button' data-controller='scheme' data-action='scheme#rotate'
|
|
60
|
+
data-scheme-themes-value='["bootstrap","dawn","dracula","gruvbox","monokai","nord","one_dark","solarized","tokyo_night"]'
|
|
61
|
+
data-scheme-path-value='/bh/theme' data-scheme-storage-value='scheme'>
|
|
62
|
+
Another palette
|
|
63
|
+
</button>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
A click moves to another palette and into the mode it is not in. Put the stored choice back
|
|
67
|
+
before the first paint, from the layout's own script: a controller connects far too late for
|
|
68
|
+
that, and the page would otherwise flash the palette the server chose.
|
|
69
|
+
|
|
43
70
|
## What you get
|
|
44
71
|
|
|
45
72
|
```ruby
|
|
@@ -60,6 +87,7 @@ end
|
|
|
60
87
|
| `chat_with` | a thread of bubbles, and the field that posts the next one |
|
|
61
88
|
| `flow` | the page of a signup flow: a header, a title, one card, a footer |
|
|
62
89
|
| 22 Stimulus controllers | registered by the bundle, called by `data-controller` |
|
|
90
|
+
| 9 palettes | served at `/bh/theme/`, swapped by the `scheme` controller |
|
|
63
91
|
|
|
64
92
|
The page above draws every one of them beside the line of Ruby that produces it.
|
|
65
93
|
|
|
@@ -76,18 +104,6 @@ rails s
|
|
|
76
104
|
`localhost:3000` is every component at once, `?flash=1` adds the toasts, and `/flow` is the
|
|
77
105
|
signup page.
|
|
78
106
|
|
|
79
|
-
## From npm
|
|
80
|
-
|
|
81
|
-
For a host that bundles the sources itself rather than serving the built tree. The package is
|
|
82
|
-
`bh6`, since `bh` on npm is somebody else's.
|
|
83
|
-
|
|
84
|
-
```bash
|
|
85
|
-
npm install bh6
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
Bootstrap 6 is not on npm at all, so its bundle ships inside the package and a bundler has to
|
|
89
|
-
send the bare `bootstrap` specifier there — `alias: { bootstrap: 'bh6/bootstrap' }`.
|
|
90
|
-
|
|
91
107
|
## Elsewhere
|
|
92
108
|
|
|
93
109
|
- [The page](https://claudiob.github.io/bh/) — every component, and how to reach it
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* Bootstrap's own palette, and the only file here that declares nothing.
|
|
2
|
+
|
|
3
|
+
The eight beside it work by overriding upstream's `:root`, so having upstream's
|
|
4
|
+
palette back is a matter of dropping their block rather than of writing one — and
|
|
5
|
+
swapping this link in is how a toggle drops it. Linking no palette at all and linking
|
|
6
|
+
this one are the same look by two routes.
|
|
7
|
+
|
|
8
|
+
It is named so the toggle can reach it. A reader who rotates through nine palettes
|
|
9
|
+
and never finds the one the pages started in has been shown a door with no handle
|
|
10
|
+
on the inside. */
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
/* Rose Pine Dawn, Rose Pine — https://rosepinetheme.com/palette/
|
|
2
|
+
Dawn is the light page and Rose Pine's own base the dark one. pine
|
|
3
|
+
serves blue, foam cyan, rose pink, love red, iris purple, gold yellow,
|
|
4
|
+
orange and brown. green is derived: Rose Pine carries none.
|
|
5
|
+
|
|
6
|
+
Bootstrap builds a family by mixing one base toward `--bs-white` below
|
|
7
|
+
the 500 step and toward `--bs-black` above it, and inlines that base
|
|
8
|
+
into all thirteen — so a palette restates the thirteen rather than the
|
|
9
|
+
one. Upstream's order and upstream's shapes with only the base swapped,
|
|
10
|
+
so a later Bootstrap diffs against this file. */
|
|
11
|
+
:root {
|
|
12
|
+
/* The page, and the two colors every ramp below is mixed with.
|
|
13
|
+
`--bs-bg-body` reads `--bs-white` in light mode and `--bs-gray-975` in
|
|
14
|
+
dark, so repainting these two is what moves the page itself. */
|
|
15
|
+
--bs-white: #faf4ed;
|
|
16
|
+
--bs-black: #191724;
|
|
17
|
+
|
|
18
|
+
/* The neutrals, which every surface, border and text token Bootstrap ships
|
|
19
|
+
derives from. */
|
|
20
|
+
--bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #9893a5);
|
|
21
|
+
--bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #9893a5);
|
|
22
|
+
--bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #9893a5);
|
|
23
|
+
--bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #9893a5);
|
|
24
|
+
--bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #9893a5);
|
|
25
|
+
--bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #9893a5);
|
|
26
|
+
--bs-gray-500: #9893a5;
|
|
27
|
+
--bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #9893a5);
|
|
28
|
+
--bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #9893a5);
|
|
29
|
+
--bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #9893a5);
|
|
30
|
+
--bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #9893a5);
|
|
31
|
+
--bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #9893a5);
|
|
32
|
+
--bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #9893a5);
|
|
33
|
+
|
|
34
|
+
--bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #286983);
|
|
35
|
+
--bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #286983);
|
|
36
|
+
--bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #286983);
|
|
37
|
+
--bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #286983);
|
|
38
|
+
--bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #286983);
|
|
39
|
+
--bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #286983);
|
|
40
|
+
--bs-blue-500: #286983;
|
|
41
|
+
--bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #286983);
|
|
42
|
+
--bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #286983);
|
|
43
|
+
--bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #286983);
|
|
44
|
+
--bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #286983);
|
|
45
|
+
--bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #286983);
|
|
46
|
+
--bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #286983);
|
|
47
|
+
|
|
48
|
+
--bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #ea9d34);
|
|
49
|
+
--bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #ea9d34);
|
|
50
|
+
--bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #ea9d34);
|
|
51
|
+
--bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #ea9d34);
|
|
52
|
+
--bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #ea9d34);
|
|
53
|
+
--bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #ea9d34);
|
|
54
|
+
--bs-brown-500: #ea9d34;
|
|
55
|
+
--bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #ea9d34);
|
|
56
|
+
--bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #ea9d34);
|
|
57
|
+
--bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #ea9d34);
|
|
58
|
+
--bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #ea9d34);
|
|
59
|
+
--bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #ea9d34);
|
|
60
|
+
--bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #ea9d34);
|
|
61
|
+
|
|
62
|
+
--bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #56949f);
|
|
63
|
+
--bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #56949f);
|
|
64
|
+
--bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #56949f);
|
|
65
|
+
--bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #56949f);
|
|
66
|
+
--bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #56949f);
|
|
67
|
+
--bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #56949f);
|
|
68
|
+
--bs-cyan-500: #56949f;
|
|
69
|
+
--bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #56949f);
|
|
70
|
+
--bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #56949f);
|
|
71
|
+
--bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #56949f);
|
|
72
|
+
--bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #56949f);
|
|
73
|
+
--bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #56949f);
|
|
74
|
+
--bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #56949f);
|
|
75
|
+
|
|
76
|
+
--bs-green-025: color-mix(in lab, var(--bs-white) 94%, #4f8a63);
|
|
77
|
+
--bs-green-050: color-mix(in lab, var(--bs-white) 90%, #4f8a63);
|
|
78
|
+
--bs-green-100: color-mix(in lab, var(--bs-white) 80%, #4f8a63);
|
|
79
|
+
--bs-green-200: color-mix(in lab, var(--bs-white) 60%, #4f8a63);
|
|
80
|
+
--bs-green-300: color-mix(in lab, var(--bs-white) 40%, #4f8a63);
|
|
81
|
+
--bs-green-400: color-mix(in lab, var(--bs-white) 20%, #4f8a63);
|
|
82
|
+
--bs-green-500: #4f8a63;
|
|
83
|
+
--bs-green-600: color-mix(in lab, var(--bs-black) 16%, #4f8a63);
|
|
84
|
+
--bs-green-700: color-mix(in lab, var(--bs-black) 32%, #4f8a63);
|
|
85
|
+
--bs-green-800: color-mix(in lab, var(--bs-black) 48%, #4f8a63);
|
|
86
|
+
--bs-green-900: color-mix(in lab, var(--bs-black) 64%, #4f8a63);
|
|
87
|
+
--bs-green-950: color-mix(in lab, var(--bs-black) 76%, #4f8a63);
|
|
88
|
+
--bs-green-975: color-mix(in lab, var(--bs-black) 88%, #4f8a63);
|
|
89
|
+
|
|
90
|
+
--bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #ea9d34);
|
|
91
|
+
--bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #ea9d34);
|
|
92
|
+
--bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #ea9d34);
|
|
93
|
+
--bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #ea9d34);
|
|
94
|
+
--bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #ea9d34);
|
|
95
|
+
--bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #ea9d34);
|
|
96
|
+
--bs-orange-500: #ea9d34;
|
|
97
|
+
--bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #ea9d34);
|
|
98
|
+
--bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #ea9d34);
|
|
99
|
+
--bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #ea9d34);
|
|
100
|
+
--bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #ea9d34);
|
|
101
|
+
--bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #ea9d34);
|
|
102
|
+
--bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #ea9d34);
|
|
103
|
+
|
|
104
|
+
--bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #d7827e);
|
|
105
|
+
--bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #d7827e);
|
|
106
|
+
--bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #d7827e);
|
|
107
|
+
--bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #d7827e);
|
|
108
|
+
--bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #d7827e);
|
|
109
|
+
--bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #d7827e);
|
|
110
|
+
--bs-pink-500: #d7827e;
|
|
111
|
+
--bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #d7827e);
|
|
112
|
+
--bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #d7827e);
|
|
113
|
+
--bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #d7827e);
|
|
114
|
+
--bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #d7827e);
|
|
115
|
+
--bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #d7827e);
|
|
116
|
+
--bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #d7827e);
|
|
117
|
+
|
|
118
|
+
--bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #907aa9);
|
|
119
|
+
--bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #907aa9);
|
|
120
|
+
--bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #907aa9);
|
|
121
|
+
--bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #907aa9);
|
|
122
|
+
--bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #907aa9);
|
|
123
|
+
--bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #907aa9);
|
|
124
|
+
--bs-purple-500: #907aa9;
|
|
125
|
+
--bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #907aa9);
|
|
126
|
+
--bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #907aa9);
|
|
127
|
+
--bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #907aa9);
|
|
128
|
+
--bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #907aa9);
|
|
129
|
+
--bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #907aa9);
|
|
130
|
+
--bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #907aa9);
|
|
131
|
+
|
|
132
|
+
--bs-red-025: color-mix(in lab, var(--bs-white) 94%, #b4637a);
|
|
133
|
+
--bs-red-050: color-mix(in lab, var(--bs-white) 90%, #b4637a);
|
|
134
|
+
--bs-red-100: color-mix(in lab, var(--bs-white) 80%, #b4637a);
|
|
135
|
+
--bs-red-200: color-mix(in lab, var(--bs-white) 60%, #b4637a);
|
|
136
|
+
--bs-red-300: color-mix(in lab, var(--bs-white) 40%, #b4637a);
|
|
137
|
+
--bs-red-400: color-mix(in lab, var(--bs-white) 20%, #b4637a);
|
|
138
|
+
--bs-red-500: #b4637a;
|
|
139
|
+
--bs-red-600: color-mix(in lab, var(--bs-black) 16%, #b4637a);
|
|
140
|
+
--bs-red-700: color-mix(in lab, var(--bs-black) 32%, #b4637a);
|
|
141
|
+
--bs-red-800: color-mix(in lab, var(--bs-black) 48%, #b4637a);
|
|
142
|
+
--bs-red-900: color-mix(in lab, var(--bs-black) 64%, #b4637a);
|
|
143
|
+
--bs-red-950: color-mix(in lab, var(--bs-black) 76%, #b4637a);
|
|
144
|
+
--bs-red-975: color-mix(in lab, var(--bs-black) 88%, #b4637a);
|
|
145
|
+
|
|
146
|
+
--bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #ea9d34);
|
|
147
|
+
--bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #ea9d34);
|
|
148
|
+
--bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #ea9d34);
|
|
149
|
+
--bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #ea9d34);
|
|
150
|
+
--bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #ea9d34);
|
|
151
|
+
--bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #ea9d34);
|
|
152
|
+
--bs-yellow-500: #ea9d34;
|
|
153
|
+
--bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #ea9d34);
|
|
154
|
+
--bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #ea9d34);
|
|
155
|
+
--bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #ea9d34);
|
|
156
|
+
--bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #ea9d34);
|
|
157
|
+
--bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #ea9d34);
|
|
158
|
+
--bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #ea9d34);
|
|
159
|
+
|
|
160
|
+
/* Text, stated rather than left to the ramp. Bootstrap pairs a low step as
|
|
161
|
+
a light surface with that same step as dark-mode text, which a palette
|
|
162
|
+
built for its own contrast does not agree with. */
|
|
163
|
+
--bs-fg-1: light-dark(#575279, #e0def4);
|
|
164
|
+
--bs-fg-body: light-dark(#575279, #c8c3dd);
|
|
165
|
+
--bs-fg-2: light-dark(#797593, #908caa);
|
|
166
|
+
|
|
167
|
+
/* The label a solid fill carries, for the four families Bootstrap has
|
|
168
|
+
spent on a meaning and this palette has repainted. Upstream's own shape:
|
|
169
|
+
it gives warning and info a dark label for the same reason. */
|
|
170
|
+
--bs-danger-contrast: var(--bs-white);
|
|
171
|
+
--bs-success-contrast: var(--bs-white);
|
|
172
|
+
--bs-warning-contrast: var(--bs-gray-975);
|
|
173
|
+
--bs-info-contrast: var(--bs-gray-975);
|
|
174
|
+
|
|
175
|
+
/* The accent this palette leads with, as the primary color: the same nine
|
|
176
|
+
`_color.html.erb` writes, from blue and the label that reads on it. Here
|
|
177
|
+
rather than only in the page because a reader may swap this file for
|
|
178
|
+
another one, and the primary has to travel with it. A host naming its
|
|
179
|
+
own color still wins, its block coming after this file. */
|
|
180
|
+
--bs-primary-base: var(--bs-blue-500);
|
|
181
|
+
--bs-primary-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400));
|
|
182
|
+
--bs-primary-fg-emphasis: light-dark(var(--bs-blue-800), var(--bs-blue-200));
|
|
183
|
+
--bs-primary-bg: var(--bs-blue-500);
|
|
184
|
+
--bs-primary-bg-subtle: light-dark(var(--bs-blue-100), var(--bs-blue-900));
|
|
185
|
+
--bs-primary-bg-muted: light-dark(var(--bs-blue-200), var(--bs-blue-800));
|
|
186
|
+
--bs-primary-border: light-dark(var(--bs-blue-300), var(--bs-blue-600));
|
|
187
|
+
--bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-blue-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-blue-500) 75%, var(--bs-bg-body)));
|
|
188
|
+
--bs-primary-contrast: var(--bs-white);
|
|
189
|
+
}
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
/* Dracula, Zeno Rocha — https://draculatheme.com/
|
|
2
|
+
Dracula's own foreground is the light page and its background the dark
|
|
3
|
+
one. its cyan serves blue and cyan, its orange serves brown. Dracula
|
|
4
|
+
leads with purple: it publishes no blue.
|
|
5
|
+
|
|
6
|
+
Bootstrap builds a family by mixing one base toward `--bs-white` below
|
|
7
|
+
the 500 step and toward `--bs-black` above it, and inlines that base
|
|
8
|
+
into all thirteen — so a palette restates the thirteen rather than the
|
|
9
|
+
one. Upstream's order and upstream's shapes with only the base swapped,
|
|
10
|
+
so a later Bootstrap diffs against this file. */
|
|
11
|
+
:root {
|
|
12
|
+
/* The page, and the two colors every ramp below is mixed with.
|
|
13
|
+
`--bs-bg-body` reads `--bs-white` in light mode and `--bs-gray-975` in
|
|
14
|
+
dark, so repainting these two is what moves the page itself. */
|
|
15
|
+
--bs-white: #f8f8f2;
|
|
16
|
+
--bs-black: #282a36;
|
|
17
|
+
|
|
18
|
+
/* The neutrals, which every surface, border and text token Bootstrap ships
|
|
19
|
+
derives from. */
|
|
20
|
+
--bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #6272a4);
|
|
21
|
+
--bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #6272a4);
|
|
22
|
+
--bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #6272a4);
|
|
23
|
+
--bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #6272a4);
|
|
24
|
+
--bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #6272a4);
|
|
25
|
+
--bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #6272a4);
|
|
26
|
+
--bs-gray-500: #6272a4;
|
|
27
|
+
--bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #6272a4);
|
|
28
|
+
--bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #6272a4);
|
|
29
|
+
--bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #6272a4);
|
|
30
|
+
--bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #6272a4);
|
|
31
|
+
--bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #6272a4);
|
|
32
|
+
--bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #6272a4);
|
|
33
|
+
|
|
34
|
+
--bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #8be9fd);
|
|
35
|
+
--bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #8be9fd);
|
|
36
|
+
--bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #8be9fd);
|
|
37
|
+
--bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #8be9fd);
|
|
38
|
+
--bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #8be9fd);
|
|
39
|
+
--bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #8be9fd);
|
|
40
|
+
--bs-blue-500: #8be9fd;
|
|
41
|
+
--bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #8be9fd);
|
|
42
|
+
--bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #8be9fd);
|
|
43
|
+
--bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #8be9fd);
|
|
44
|
+
--bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #8be9fd);
|
|
45
|
+
--bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #8be9fd);
|
|
46
|
+
--bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #8be9fd);
|
|
47
|
+
|
|
48
|
+
--bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #ffb86c);
|
|
49
|
+
--bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #ffb86c);
|
|
50
|
+
--bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #ffb86c);
|
|
51
|
+
--bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #ffb86c);
|
|
52
|
+
--bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #ffb86c);
|
|
53
|
+
--bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #ffb86c);
|
|
54
|
+
--bs-brown-500: #ffb86c;
|
|
55
|
+
--bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #ffb86c);
|
|
56
|
+
--bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #ffb86c);
|
|
57
|
+
--bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #ffb86c);
|
|
58
|
+
--bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #ffb86c);
|
|
59
|
+
--bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #ffb86c);
|
|
60
|
+
--bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #ffb86c);
|
|
61
|
+
|
|
62
|
+
--bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #8be9fd);
|
|
63
|
+
--bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #8be9fd);
|
|
64
|
+
--bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #8be9fd);
|
|
65
|
+
--bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #8be9fd);
|
|
66
|
+
--bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #8be9fd);
|
|
67
|
+
--bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #8be9fd);
|
|
68
|
+
--bs-cyan-500: #8be9fd;
|
|
69
|
+
--bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #8be9fd);
|
|
70
|
+
--bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #8be9fd);
|
|
71
|
+
--bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #8be9fd);
|
|
72
|
+
--bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #8be9fd);
|
|
73
|
+
--bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #8be9fd);
|
|
74
|
+
--bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #8be9fd);
|
|
75
|
+
|
|
76
|
+
--bs-green-025: color-mix(in lab, var(--bs-white) 94%, #50fa7b);
|
|
77
|
+
--bs-green-050: color-mix(in lab, var(--bs-white) 90%, #50fa7b);
|
|
78
|
+
--bs-green-100: color-mix(in lab, var(--bs-white) 80%, #50fa7b);
|
|
79
|
+
--bs-green-200: color-mix(in lab, var(--bs-white) 60%, #50fa7b);
|
|
80
|
+
--bs-green-300: color-mix(in lab, var(--bs-white) 40%, #50fa7b);
|
|
81
|
+
--bs-green-400: color-mix(in lab, var(--bs-white) 20%, #50fa7b);
|
|
82
|
+
--bs-green-500: #50fa7b;
|
|
83
|
+
--bs-green-600: color-mix(in lab, var(--bs-black) 16%, #50fa7b);
|
|
84
|
+
--bs-green-700: color-mix(in lab, var(--bs-black) 32%, #50fa7b);
|
|
85
|
+
--bs-green-800: color-mix(in lab, var(--bs-black) 48%, #50fa7b);
|
|
86
|
+
--bs-green-900: color-mix(in lab, var(--bs-black) 64%, #50fa7b);
|
|
87
|
+
--bs-green-950: color-mix(in lab, var(--bs-black) 76%, #50fa7b);
|
|
88
|
+
--bs-green-975: color-mix(in lab, var(--bs-black) 88%, #50fa7b);
|
|
89
|
+
|
|
90
|
+
--bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #ffb86c);
|
|
91
|
+
--bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #ffb86c);
|
|
92
|
+
--bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #ffb86c);
|
|
93
|
+
--bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #ffb86c);
|
|
94
|
+
--bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #ffb86c);
|
|
95
|
+
--bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #ffb86c);
|
|
96
|
+
--bs-orange-500: #ffb86c;
|
|
97
|
+
--bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #ffb86c);
|
|
98
|
+
--bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #ffb86c);
|
|
99
|
+
--bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #ffb86c);
|
|
100
|
+
--bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #ffb86c);
|
|
101
|
+
--bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #ffb86c);
|
|
102
|
+
--bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #ffb86c);
|
|
103
|
+
|
|
104
|
+
--bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #ff79c6);
|
|
105
|
+
--bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #ff79c6);
|
|
106
|
+
--bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #ff79c6);
|
|
107
|
+
--bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #ff79c6);
|
|
108
|
+
--bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #ff79c6);
|
|
109
|
+
--bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #ff79c6);
|
|
110
|
+
--bs-pink-500: #ff79c6;
|
|
111
|
+
--bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #ff79c6);
|
|
112
|
+
--bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #ff79c6);
|
|
113
|
+
--bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #ff79c6);
|
|
114
|
+
--bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #ff79c6);
|
|
115
|
+
--bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #ff79c6);
|
|
116
|
+
--bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #ff79c6);
|
|
117
|
+
|
|
118
|
+
--bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #bd93f9);
|
|
119
|
+
--bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #bd93f9);
|
|
120
|
+
--bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #bd93f9);
|
|
121
|
+
--bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #bd93f9);
|
|
122
|
+
--bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #bd93f9);
|
|
123
|
+
--bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #bd93f9);
|
|
124
|
+
--bs-purple-500: #bd93f9;
|
|
125
|
+
--bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #bd93f9);
|
|
126
|
+
--bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #bd93f9);
|
|
127
|
+
--bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #bd93f9);
|
|
128
|
+
--bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #bd93f9);
|
|
129
|
+
--bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #bd93f9);
|
|
130
|
+
--bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #bd93f9);
|
|
131
|
+
|
|
132
|
+
--bs-red-025: color-mix(in lab, var(--bs-white) 94%, #ff5555);
|
|
133
|
+
--bs-red-050: color-mix(in lab, var(--bs-white) 90%, #ff5555);
|
|
134
|
+
--bs-red-100: color-mix(in lab, var(--bs-white) 80%, #ff5555);
|
|
135
|
+
--bs-red-200: color-mix(in lab, var(--bs-white) 60%, #ff5555);
|
|
136
|
+
--bs-red-300: color-mix(in lab, var(--bs-white) 40%, #ff5555);
|
|
137
|
+
--bs-red-400: color-mix(in lab, var(--bs-white) 20%, #ff5555);
|
|
138
|
+
--bs-red-500: #ff5555;
|
|
139
|
+
--bs-red-600: color-mix(in lab, var(--bs-black) 16%, #ff5555);
|
|
140
|
+
--bs-red-700: color-mix(in lab, var(--bs-black) 32%, #ff5555);
|
|
141
|
+
--bs-red-800: color-mix(in lab, var(--bs-black) 48%, #ff5555);
|
|
142
|
+
--bs-red-900: color-mix(in lab, var(--bs-black) 64%, #ff5555);
|
|
143
|
+
--bs-red-950: color-mix(in lab, var(--bs-black) 76%, #ff5555);
|
|
144
|
+
--bs-red-975: color-mix(in lab, var(--bs-black) 88%, #ff5555);
|
|
145
|
+
|
|
146
|
+
--bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #f1fa8c);
|
|
147
|
+
--bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #f1fa8c);
|
|
148
|
+
--bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #f1fa8c);
|
|
149
|
+
--bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #f1fa8c);
|
|
150
|
+
--bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #f1fa8c);
|
|
151
|
+
--bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #f1fa8c);
|
|
152
|
+
--bs-yellow-500: #f1fa8c;
|
|
153
|
+
--bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #f1fa8c);
|
|
154
|
+
--bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #f1fa8c);
|
|
155
|
+
--bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #f1fa8c);
|
|
156
|
+
--bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #f1fa8c);
|
|
157
|
+
--bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #f1fa8c);
|
|
158
|
+
--bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #f1fa8c);
|
|
159
|
+
|
|
160
|
+
/* Text, stated rather than left to the ramp. Bootstrap pairs a low step as
|
|
161
|
+
a light surface with that same step as dark-mode text, which a palette
|
|
162
|
+
built for its own contrast does not agree with. */
|
|
163
|
+
--bs-fg-1: light-dark(#282a36, #ffffff);
|
|
164
|
+
--bs-fg-body: light-dark(#21222c, #f8f8f2);
|
|
165
|
+
--bs-fg-2: light-dark(#4a5480, #bcc2de);
|
|
166
|
+
|
|
167
|
+
/* The label a solid fill carries, for the four families Bootstrap has
|
|
168
|
+
spent on a meaning and this palette has repainted. Upstream's own shape:
|
|
169
|
+
it gives warning and info a dark label for the same reason. */
|
|
170
|
+
--bs-danger-contrast: var(--bs-gray-975);
|
|
171
|
+
--bs-success-contrast: var(--bs-gray-975);
|
|
172
|
+
--bs-warning-contrast: var(--bs-gray-975);
|
|
173
|
+
--bs-info-contrast: var(--bs-gray-975);
|
|
174
|
+
|
|
175
|
+
/* The accent this palette leads with, as the primary color: the same nine
|
|
176
|
+
`_color.html.erb` writes, from purple and the label that reads on it.
|
|
177
|
+
Here rather than only in the page because a reader may swap this file
|
|
178
|
+
for another one, and the primary has to travel with it. A host naming
|
|
179
|
+
its own color still wins, its block coming after this file. */
|
|
180
|
+
--bs-primary-base: var(--bs-purple-500);
|
|
181
|
+
--bs-primary-fg: light-dark(var(--bs-purple-600), var(--bs-purple-400));
|
|
182
|
+
--bs-primary-fg-emphasis: light-dark(var(--bs-purple-800), var(--bs-purple-200));
|
|
183
|
+
--bs-primary-bg: var(--bs-purple-500);
|
|
184
|
+
--bs-primary-bg-subtle: light-dark(var(--bs-purple-100), var(--bs-purple-900));
|
|
185
|
+
--bs-primary-bg-muted: light-dark(var(--bs-purple-200), var(--bs-purple-800));
|
|
186
|
+
--bs-primary-border: light-dark(var(--bs-purple-300), var(--bs-purple-600));
|
|
187
|
+
--bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-purple-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-purple-500) 75%, var(--bs-bg-body)));
|
|
188
|
+
--bs-primary-contrast: var(--bs-gray-975);
|
|
189
|
+
}
|