recourse 4.4.4 → 4.6.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.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +41 -0
  3. data/README.md +6 -1
  4. data/app/javascript/recourse/density_controller.js +17 -0
  5. data/app/javascript/recourse/scheme_controller.js +64 -16
  6. data/app/stylesheets/recourse/themes/bootstrap.css +11 -0
  7. data/app/stylesheets/recourse/themes/dawn.css +189 -0
  8. data/app/stylesheets/recourse/themes/dracula.css +189 -0
  9. data/app/stylesheets/recourse/themes/gruvbox.css +189 -0
  10. data/app/stylesheets/recourse/themes/monokai.css +190 -0
  11. data/app/stylesheets/recourse/themes/nord.css +189 -0
  12. data/app/stylesheets/recourse/themes/one_dark.css +189 -0
  13. data/app/stylesheets/recourse/themes/solarized.css +188 -0
  14. data/app/stylesheets/recourse/themes/tokyo_night.css +189 -0
  15. data/app/views/layouts/recourses.html.erb +105 -83
  16. data/app/views/recourses/_footer.html.erb +3 -2
  17. data/app/views/recourses/_scheme.html.erb +18 -4
  18. data/app/views/recourses/_sidebar.html.erb +18 -1
  19. data/config/locales/recourse.en.yml +7 -2
  20. data/lib/recourse/colors.rb +7 -1
  21. data/lib/recourse/controllers.rb +31 -4
  22. data/lib/recourse/densities.rb +7 -0
  23. data/lib/recourse/engine.rb +6 -2
  24. data/lib/recourse/helpers/bookmarks.rb +3 -1
  25. data/lib/recourse/helpers/densities.rb +17 -0
  26. data/lib/recourse/helpers/formats.rb +11 -5
  27. data/lib/recourse/helpers/navigation.rb +5 -3
  28. data/lib/recourse/helpers/themes.rb +36 -0
  29. data/lib/recourse/helpers.rb +4 -3
  30. data/lib/recourse/routes/nested.rb +4 -3
  31. data/lib/recourse/themes.rb +49 -0
  32. data/lib/recourse/version.rb +1 -1
  33. data/lib/recourse.rb +2 -1
  34. metadata +17 -5
  35. data/lib/recourse/helpers/schemes.rb +0 -14
  36. data/lib/recourse/schemes.rb +0 -6
data/app/stylesheets/recourse/themes/gruvbox.css ADDED
@@ -0,0 +1,189 @@
1
+ /* Gruvbox, Pavel Pertsev — https://github.com/morhetz/gruvbox
2
+ light0 is the light page and dark0 the dark one; the neutral accents
3
+ are the set that reads on both. neutral_purple serves purple and pink,
4
+ neutral_aqua cyan, neutral_orange orange and brown.
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: #fbf1c7;
16
+ --bs-black: #282828;
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%, #928374);
21
+ --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #928374);
22
+ --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #928374);
23
+ --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #928374);
24
+ --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #928374);
25
+ --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #928374);
26
+ --bs-gray-500: #928374;
27
+ --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #928374);
28
+ --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #928374);
29
+ --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #928374);
30
+ --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #928374);
31
+ --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #928374);
32
+ --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #928374);
33
+
34
+ --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #458588);
35
+ --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #458588);
36
+ --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #458588);
37
+ --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #458588);
38
+ --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #458588);
39
+ --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #458588);
40
+ --bs-blue-500: #458588;
41
+ --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #458588);
42
+ --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #458588);
43
+ --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #458588);
44
+ --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #458588);
45
+ --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #458588);
46
+ --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #458588);
47
+
48
+ --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #d65d0e);
49
+ --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #d65d0e);
50
+ --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #d65d0e);
51
+ --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #d65d0e);
52
+ --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #d65d0e);
53
+ --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #d65d0e);
54
+ --bs-brown-500: #d65d0e;
55
+ --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #d65d0e);
56
+ --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #d65d0e);
57
+ --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #d65d0e);
58
+ --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #d65d0e);
59
+ --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #d65d0e);
60
+ --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #d65d0e);
61
+
62
+ --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #689d6a);
63
+ --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #689d6a);
64
+ --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #689d6a);
65
+ --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #689d6a);
66
+ --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #689d6a);
67
+ --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #689d6a);
68
+ --bs-cyan-500: #689d6a;
69
+ --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #689d6a);
70
+ --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #689d6a);
71
+ --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #689d6a);
72
+ --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #689d6a);
73
+ --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #689d6a);
74
+ --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #689d6a);
75
+
76
+ --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #98971a);
77
+ --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #98971a);
78
+ --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #98971a);
79
+ --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #98971a);
80
+ --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #98971a);
81
+ --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #98971a);
82
+ --bs-green-500: #98971a;
83
+ --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #98971a);
84
+ --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #98971a);
85
+ --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #98971a);
86
+ --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #98971a);
87
+ --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #98971a);
88
+ --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #98971a);
89
+
90
+ --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #d65d0e);
91
+ --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #d65d0e);
92
+ --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #d65d0e);
93
+ --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #d65d0e);
94
+ --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #d65d0e);
95
+ --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #d65d0e);
96
+ --bs-orange-500: #d65d0e;
97
+ --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #d65d0e);
98
+ --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #d65d0e);
99
+ --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #d65d0e);
100
+ --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #d65d0e);
101
+ --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #d65d0e);
102
+ --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #d65d0e);
103
+
104
+ --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #b16286);
105
+ --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #b16286);
106
+ --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #b16286);
107
+ --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #b16286);
108
+ --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #b16286);
109
+ --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #b16286);
110
+ --bs-pink-500: #b16286;
111
+ --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #b16286);
112
+ --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #b16286);
113
+ --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #b16286);
114
+ --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #b16286);
115
+ --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #b16286);
116
+ --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #b16286);
117
+
118
+ --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #b16286);
119
+ --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #b16286);
120
+ --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #b16286);
121
+ --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #b16286);
122
+ --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #b16286);
123
+ --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #b16286);
124
+ --bs-purple-500: #b16286;
125
+ --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #b16286);
126
+ --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #b16286);
127
+ --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #b16286);
128
+ --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #b16286);
129
+ --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #b16286);
130
+ --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #b16286);
131
+
132
+ --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #cc241d);
133
+ --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #cc241d);
134
+ --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #cc241d);
135
+ --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #cc241d);
136
+ --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #cc241d);
137
+ --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #cc241d);
138
+ --bs-red-500: #cc241d;
139
+ --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #cc241d);
140
+ --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #cc241d);
141
+ --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #cc241d);
142
+ --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #cc241d);
143
+ --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #cc241d);
144
+ --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #cc241d);
145
+
146
+ --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #d79921);
147
+ --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #d79921);
148
+ --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #d79921);
149
+ --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #d79921);
150
+ --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #d79921);
151
+ --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #d79921);
152
+ --bs-yellow-500: #d79921;
153
+ --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #d79921);
154
+ --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #d79921);
155
+ --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #d79921);
156
+ --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #d79921);
157
+ --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #d79921);
158
+ --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #d79921);
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(#282828, #fbf1c7);
164
+ --bs-fg-body: light-dark(#3c3836, #ebdbb2);
165
+ --bs-fg-2: light-dark(#665c54, #bdae93);
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-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 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
+ }
data/app/stylesheets/recourse/themes/monokai.css ADDED
@@ -0,0 +1,190 @@
1
+ /* Monokai, Wimer Hazenberg — https://monokai.pro/
2
+ Monokai's own foreground is the light page and its background the dark
3
+ one: it publishes no light variant, so the light arm is derived from
4
+ it. its pink serves pink and red, its blue serves cyan, its orange
5
+ brown. Monokai leads with pink rather than blue, which is its accent.
6
+
7
+ Bootstrap builds a family by mixing one base toward `--bs-white` below
8
+ the 500 step and toward `--bs-black` above it, and inlines that base
9
+ into all thirteen — so a palette restates the thirteen rather than the
10
+ one. Upstream's order and upstream's shapes with only the base swapped,
11
+ so a later Bootstrap diffs against this file. */
12
+ :root {
13
+ /* The page, and the two colors every ramp below is mixed with.
14
+ `--bs-bg-body` reads `--bs-white` in light mode and `--bs-gray-975` in
15
+ dark, so repainting these two is what moves the page itself. */
16
+ --bs-white: #f8f8f2;
17
+ --bs-black: #272822;
18
+
19
+ /* The neutrals, which every surface, border and text token Bootstrap ships
20
+ derives from. */
21
+ --bs-gray-025: color-mix(in lab, var(--bs-white) 94%, #75715e);
22
+ --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #75715e);
23
+ --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #75715e);
24
+ --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #75715e);
25
+ --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #75715e);
26
+ --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #75715e);
27
+ --bs-gray-500: #75715e;
28
+ --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #75715e);
29
+ --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #75715e);
30
+ --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #75715e);
31
+ --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #75715e);
32
+ --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #75715e);
33
+ --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #75715e);
34
+
35
+ --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #66d9ef);
36
+ --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #66d9ef);
37
+ --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #66d9ef);
38
+ --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #66d9ef);
39
+ --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #66d9ef);
40
+ --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #66d9ef);
41
+ --bs-blue-500: #66d9ef;
42
+ --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #66d9ef);
43
+ --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #66d9ef);
44
+ --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #66d9ef);
45
+ --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #66d9ef);
46
+ --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #66d9ef);
47
+ --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #66d9ef);
48
+
49
+ --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #fd971f);
50
+ --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #fd971f);
51
+ --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #fd971f);
52
+ --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #fd971f);
53
+ --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #fd971f);
54
+ --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #fd971f);
55
+ --bs-brown-500: #fd971f;
56
+ --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #fd971f);
57
+ --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #fd971f);
58
+ --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #fd971f);
59
+ --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #fd971f);
60
+ --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #fd971f);
61
+ --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #fd971f);
62
+
63
+ --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #66d9ef);
64
+ --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #66d9ef);
65
+ --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #66d9ef);
66
+ --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #66d9ef);
67
+ --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #66d9ef);
68
+ --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #66d9ef);
69
+ --bs-cyan-500: #66d9ef;
70
+ --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #66d9ef);
71
+ --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #66d9ef);
72
+ --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #66d9ef);
73
+ --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #66d9ef);
74
+ --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #66d9ef);
75
+ --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #66d9ef);
76
+
77
+ --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #a6e22e);
78
+ --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #a6e22e);
79
+ --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #a6e22e);
80
+ --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #a6e22e);
81
+ --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #a6e22e);
82
+ --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #a6e22e);
83
+ --bs-green-500: #a6e22e;
84
+ --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #a6e22e);
85
+ --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #a6e22e);
86
+ --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #a6e22e);
87
+ --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #a6e22e);
88
+ --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #a6e22e);
89
+ --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #a6e22e);
90
+
91
+ --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #fd971f);
92
+ --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #fd971f);
93
+ --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #fd971f);
94
+ --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #fd971f);
95
+ --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #fd971f);
96
+ --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #fd971f);
97
+ --bs-orange-500: #fd971f;
98
+ --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #fd971f);
99
+ --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #fd971f);
100
+ --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #fd971f);
101
+ --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #fd971f);
102
+ --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #fd971f);
103
+ --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #fd971f);
104
+
105
+ --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #f92672);
106
+ --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #f92672);
107
+ --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #f92672);
108
+ --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #f92672);
109
+ --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #f92672);
110
+ --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #f92672);
111
+ --bs-pink-500: #f92672;
112
+ --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #f92672);
113
+ --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #f92672);
114
+ --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #f92672);
115
+ --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #f92672);
116
+ --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #f92672);
117
+ --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #f92672);
118
+
119
+ --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #ae81ff);
120
+ --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #ae81ff);
121
+ --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #ae81ff);
122
+ --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #ae81ff);
123
+ --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #ae81ff);
124
+ --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #ae81ff);
125
+ --bs-purple-500: #ae81ff;
126
+ --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #ae81ff);
127
+ --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #ae81ff);
128
+ --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #ae81ff);
129
+ --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #ae81ff);
130
+ --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #ae81ff);
131
+ --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #ae81ff);
132
+
133
+ --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #f92672);
134
+ --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #f92672);
135
+ --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #f92672);
136
+ --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #f92672);
137
+ --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #f92672);
138
+ --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #f92672);
139
+ --bs-red-500: #f92672;
140
+ --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #f92672);
141
+ --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #f92672);
142
+ --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #f92672);
143
+ --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #f92672);
144
+ --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #f92672);
145
+ --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #f92672);
146
+
147
+ --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #e6db74);
148
+ --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #e6db74);
149
+ --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #e6db74);
150
+ --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #e6db74);
151
+ --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #e6db74);
152
+ --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #e6db74);
153
+ --bs-yellow-500: #e6db74;
154
+ --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #e6db74);
155
+ --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #e6db74);
156
+ --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #e6db74);
157
+ --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #e6db74);
158
+ --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #e6db74);
159
+ --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #e6db74);
160
+
161
+ /* Text, stated rather than left to the ramp. Bootstrap pairs a low step as
162
+ a light surface with that same step as dark-mode text, which a palette
163
+ built for its own contrast does not agree with. */
164
+ --bs-fg-1: light-dark(#272822, #f8f8f2);
165
+ --bs-fg-body: light-dark(#3b3a32, #e8e8e2);
166
+ --bs-fg-2: light-dark(#5c5a4c, #b4b0a0);
167
+
168
+ /* The label a solid fill carries, for the four families Bootstrap has
169
+ spent on a meaning and this palette has repainted. Upstream's own shape:
170
+ it gives warning and info a dark label for the same reason. */
171
+ --bs-danger-contrast: var(--bs-white);
172
+ --bs-success-contrast: var(--bs-gray-975);
173
+ --bs-warning-contrast: var(--bs-gray-975);
174
+ --bs-info-contrast: var(--bs-gray-975);
175
+
176
+ /* The accent this palette leads with, as the primary color: the same nine
177
+ `_color.html.erb` writes, from pink and the label that reads on it. Here
178
+ rather than only in the page because a reader may swap this file for
179
+ another one, and the primary has to travel with it. A host naming its
180
+ own color still wins, its block coming after this file. */
181
+ --bs-primary-base: var(--bs-pink-500);
182
+ --bs-primary-fg: light-dark(var(--bs-pink-600), var(--bs-pink-400));
183
+ --bs-primary-fg-emphasis: light-dark(var(--bs-pink-800), var(--bs-pink-200));
184
+ --bs-primary-bg: var(--bs-pink-500);
185
+ --bs-primary-bg-subtle: light-dark(var(--bs-pink-100), var(--bs-pink-900));
186
+ --bs-primary-bg-muted: light-dark(var(--bs-pink-200), var(--bs-pink-800));
187
+ --bs-primary-border: light-dark(var(--bs-pink-300), var(--bs-pink-600));
188
+ --bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-pink-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-pink-500) 75%, var(--bs-bg-body)));
189
+ --bs-primary-contrast: var(--bs-white);
190
+ }
data/app/stylesheets/recourse/themes/nord.css ADDED
@@ -0,0 +1,189 @@
1
+ /* Nord, Arctic Ice Studio — https://www.nordtheme.com/
2
+ Snow Storm is the light page and Polar Night the dark one. nord15
3
+ serves purple and pink; nord12 serves orange and brown. The mid neutral
4
+ is derived: Nord publishes none between nord3 and nord4.
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: #eceff4;
16
+ --bs-black: #2e3440;
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%, #7b8794);
21
+ --bs-gray-050: color-mix(in lab, var(--bs-white) 90%, #7b8794);
22
+ --bs-gray-100: color-mix(in lab, var(--bs-white) 80%, #7b8794);
23
+ --bs-gray-200: color-mix(in lab, var(--bs-white) 60%, #7b8794);
24
+ --bs-gray-300: color-mix(in lab, var(--bs-white) 40%, #7b8794);
25
+ --bs-gray-400: color-mix(in lab, var(--bs-white) 20%, #7b8794);
26
+ --bs-gray-500: #7b8794;
27
+ --bs-gray-600: color-mix(in lab, var(--bs-black) 16%, #7b8794);
28
+ --bs-gray-700: color-mix(in lab, var(--bs-black) 32%, #7b8794);
29
+ --bs-gray-800: color-mix(in lab, var(--bs-black) 48%, #7b8794);
30
+ --bs-gray-900: color-mix(in lab, var(--bs-black) 64%, #7b8794);
31
+ --bs-gray-950: color-mix(in lab, var(--bs-black) 76%, #7b8794);
32
+ --bs-gray-975: color-mix(in lab, var(--bs-black) 88%, #7b8794);
33
+
34
+ --bs-blue-025: color-mix(in lab, var(--bs-white) 94%, #5e81ac);
35
+ --bs-blue-050: color-mix(in lab, var(--bs-white) 90%, #5e81ac);
36
+ --bs-blue-100: color-mix(in lab, var(--bs-white) 80%, #5e81ac);
37
+ --bs-blue-200: color-mix(in lab, var(--bs-white) 60%, #5e81ac);
38
+ --bs-blue-300: color-mix(in lab, var(--bs-white) 40%, #5e81ac);
39
+ --bs-blue-400: color-mix(in lab, var(--bs-white) 20%, #5e81ac);
40
+ --bs-blue-500: #5e81ac;
41
+ --bs-blue-600: color-mix(in lab, var(--bs-black) 16%, #5e81ac);
42
+ --bs-blue-700: color-mix(in lab, var(--bs-black) 32%, #5e81ac);
43
+ --bs-blue-800: color-mix(in lab, var(--bs-black) 48%, #5e81ac);
44
+ --bs-blue-900: color-mix(in lab, var(--bs-black) 64%, #5e81ac);
45
+ --bs-blue-950: color-mix(in lab, var(--bs-black) 76%, #5e81ac);
46
+ --bs-blue-975: color-mix(in lab, var(--bs-black) 88%, #5e81ac);
47
+
48
+ --bs-brown-025: color-mix(in lab, var(--bs-white) 94%, #d08770);
49
+ --bs-brown-050: color-mix(in lab, var(--bs-white) 90%, #d08770);
50
+ --bs-brown-100: color-mix(in lab, var(--bs-white) 80%, #d08770);
51
+ --bs-brown-200: color-mix(in lab, var(--bs-white) 60%, #d08770);
52
+ --bs-brown-300: color-mix(in lab, var(--bs-white) 40%, #d08770);
53
+ --bs-brown-400: color-mix(in lab, var(--bs-white) 20%, #d08770);
54
+ --bs-brown-500: #d08770;
55
+ --bs-brown-600: color-mix(in lab, var(--bs-black) 16%, #d08770);
56
+ --bs-brown-700: color-mix(in lab, var(--bs-black) 32%, #d08770);
57
+ --bs-brown-800: color-mix(in lab, var(--bs-black) 48%, #d08770);
58
+ --bs-brown-900: color-mix(in lab, var(--bs-black) 64%, #d08770);
59
+ --bs-brown-950: color-mix(in lab, var(--bs-black) 76%, #d08770);
60
+ --bs-brown-975: color-mix(in lab, var(--bs-black) 88%, #d08770);
61
+
62
+ --bs-cyan-025: color-mix(in lab, var(--bs-white) 94%, #88c0d0);
63
+ --bs-cyan-050: color-mix(in lab, var(--bs-white) 90%, #88c0d0);
64
+ --bs-cyan-100: color-mix(in lab, var(--bs-white) 80%, #88c0d0);
65
+ --bs-cyan-200: color-mix(in lab, var(--bs-white) 60%, #88c0d0);
66
+ --bs-cyan-300: color-mix(in lab, var(--bs-white) 40%, #88c0d0);
67
+ --bs-cyan-400: color-mix(in lab, var(--bs-white) 20%, #88c0d0);
68
+ --bs-cyan-500: #88c0d0;
69
+ --bs-cyan-600: color-mix(in lab, var(--bs-black) 16%, #88c0d0);
70
+ --bs-cyan-700: color-mix(in lab, var(--bs-black) 32%, #88c0d0);
71
+ --bs-cyan-800: color-mix(in lab, var(--bs-black) 48%, #88c0d0);
72
+ --bs-cyan-900: color-mix(in lab, var(--bs-black) 64%, #88c0d0);
73
+ --bs-cyan-950: color-mix(in lab, var(--bs-black) 76%, #88c0d0);
74
+ --bs-cyan-975: color-mix(in lab, var(--bs-black) 88%, #88c0d0);
75
+
76
+ --bs-green-025: color-mix(in lab, var(--bs-white) 94%, #a3be8c);
77
+ --bs-green-050: color-mix(in lab, var(--bs-white) 90%, #a3be8c);
78
+ --bs-green-100: color-mix(in lab, var(--bs-white) 80%, #a3be8c);
79
+ --bs-green-200: color-mix(in lab, var(--bs-white) 60%, #a3be8c);
80
+ --bs-green-300: color-mix(in lab, var(--bs-white) 40%, #a3be8c);
81
+ --bs-green-400: color-mix(in lab, var(--bs-white) 20%, #a3be8c);
82
+ --bs-green-500: #a3be8c;
83
+ --bs-green-600: color-mix(in lab, var(--bs-black) 16%, #a3be8c);
84
+ --bs-green-700: color-mix(in lab, var(--bs-black) 32%, #a3be8c);
85
+ --bs-green-800: color-mix(in lab, var(--bs-black) 48%, #a3be8c);
86
+ --bs-green-900: color-mix(in lab, var(--bs-black) 64%, #a3be8c);
87
+ --bs-green-950: color-mix(in lab, var(--bs-black) 76%, #a3be8c);
88
+ --bs-green-975: color-mix(in lab, var(--bs-black) 88%, #a3be8c);
89
+
90
+ --bs-orange-025: color-mix(in lab, var(--bs-white) 94%, #d08770);
91
+ --bs-orange-050: color-mix(in lab, var(--bs-white) 90%, #d08770);
92
+ --bs-orange-100: color-mix(in lab, var(--bs-white) 80%, #d08770);
93
+ --bs-orange-200: color-mix(in lab, var(--bs-white) 60%, #d08770);
94
+ --bs-orange-300: color-mix(in lab, var(--bs-white) 40%, #d08770);
95
+ --bs-orange-400: color-mix(in lab, var(--bs-white) 20%, #d08770);
96
+ --bs-orange-500: #d08770;
97
+ --bs-orange-600: color-mix(in lab, var(--bs-black) 16%, #d08770);
98
+ --bs-orange-700: color-mix(in lab, var(--bs-black) 32%, #d08770);
99
+ --bs-orange-800: color-mix(in lab, var(--bs-black) 48%, #d08770);
100
+ --bs-orange-900: color-mix(in lab, var(--bs-black) 64%, #d08770);
101
+ --bs-orange-950: color-mix(in lab, var(--bs-black) 76%, #d08770);
102
+ --bs-orange-975: color-mix(in lab, var(--bs-black) 88%, #d08770);
103
+
104
+ --bs-pink-025: color-mix(in lab, var(--bs-white) 94%, #b48ead);
105
+ --bs-pink-050: color-mix(in lab, var(--bs-white) 90%, #b48ead);
106
+ --bs-pink-100: color-mix(in lab, var(--bs-white) 80%, #b48ead);
107
+ --bs-pink-200: color-mix(in lab, var(--bs-white) 60%, #b48ead);
108
+ --bs-pink-300: color-mix(in lab, var(--bs-white) 40%, #b48ead);
109
+ --bs-pink-400: color-mix(in lab, var(--bs-white) 20%, #b48ead);
110
+ --bs-pink-500: #b48ead;
111
+ --bs-pink-600: color-mix(in lab, var(--bs-black) 16%, #b48ead);
112
+ --bs-pink-700: color-mix(in lab, var(--bs-black) 32%, #b48ead);
113
+ --bs-pink-800: color-mix(in lab, var(--bs-black) 48%, #b48ead);
114
+ --bs-pink-900: color-mix(in lab, var(--bs-black) 64%, #b48ead);
115
+ --bs-pink-950: color-mix(in lab, var(--bs-black) 76%, #b48ead);
116
+ --bs-pink-975: color-mix(in lab, var(--bs-black) 88%, #b48ead);
117
+
118
+ --bs-purple-025: color-mix(in lab, var(--bs-white) 94%, #b48ead);
119
+ --bs-purple-050: color-mix(in lab, var(--bs-white) 90%, #b48ead);
120
+ --bs-purple-100: color-mix(in lab, var(--bs-white) 80%, #b48ead);
121
+ --bs-purple-200: color-mix(in lab, var(--bs-white) 60%, #b48ead);
122
+ --bs-purple-300: color-mix(in lab, var(--bs-white) 40%, #b48ead);
123
+ --bs-purple-400: color-mix(in lab, var(--bs-white) 20%, #b48ead);
124
+ --bs-purple-500: #b48ead;
125
+ --bs-purple-600: color-mix(in lab, var(--bs-black) 16%, #b48ead);
126
+ --bs-purple-700: color-mix(in lab, var(--bs-black) 32%, #b48ead);
127
+ --bs-purple-800: color-mix(in lab, var(--bs-black) 48%, #b48ead);
128
+ --bs-purple-900: color-mix(in lab, var(--bs-black) 64%, #b48ead);
129
+ --bs-purple-950: color-mix(in lab, var(--bs-black) 76%, #b48ead);
130
+ --bs-purple-975: color-mix(in lab, var(--bs-black) 88%, #b48ead);
131
+
132
+ --bs-red-025: color-mix(in lab, var(--bs-white) 94%, #bf616a);
133
+ --bs-red-050: color-mix(in lab, var(--bs-white) 90%, #bf616a);
134
+ --bs-red-100: color-mix(in lab, var(--bs-white) 80%, #bf616a);
135
+ --bs-red-200: color-mix(in lab, var(--bs-white) 60%, #bf616a);
136
+ --bs-red-300: color-mix(in lab, var(--bs-white) 40%, #bf616a);
137
+ --bs-red-400: color-mix(in lab, var(--bs-white) 20%, #bf616a);
138
+ --bs-red-500: #bf616a;
139
+ --bs-red-600: color-mix(in lab, var(--bs-black) 16%, #bf616a);
140
+ --bs-red-700: color-mix(in lab, var(--bs-black) 32%, #bf616a);
141
+ --bs-red-800: color-mix(in lab, var(--bs-black) 48%, #bf616a);
142
+ --bs-red-900: color-mix(in lab, var(--bs-black) 64%, #bf616a);
143
+ --bs-red-950: color-mix(in lab, var(--bs-black) 76%, #bf616a);
144
+ --bs-red-975: color-mix(in lab, var(--bs-black) 88%, #bf616a);
145
+
146
+ --bs-yellow-025: color-mix(in lab, var(--bs-white) 94%, #ebcb8b);
147
+ --bs-yellow-050: color-mix(in lab, var(--bs-white) 90%, #ebcb8b);
148
+ --bs-yellow-100: color-mix(in lab, var(--bs-white) 80%, #ebcb8b);
149
+ --bs-yellow-200: color-mix(in lab, var(--bs-white) 60%, #ebcb8b);
150
+ --bs-yellow-300: color-mix(in lab, var(--bs-white) 40%, #ebcb8b);
151
+ --bs-yellow-400: color-mix(in lab, var(--bs-white) 20%, #ebcb8b);
152
+ --bs-yellow-500: #ebcb8b;
153
+ --bs-yellow-600: color-mix(in lab, var(--bs-black) 16%, #ebcb8b);
154
+ --bs-yellow-700: color-mix(in lab, var(--bs-black) 32%, #ebcb8b);
155
+ --bs-yellow-800: color-mix(in lab, var(--bs-black) 48%, #ebcb8b);
156
+ --bs-yellow-900: color-mix(in lab, var(--bs-black) 64%, #ebcb8b);
157
+ --bs-yellow-950: color-mix(in lab, var(--bs-black) 76%, #ebcb8b);
158
+ --bs-yellow-975: color-mix(in lab, var(--bs-black) 88%, #ebcb8b);
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(#2e3440, #eceff4);
164
+ --bs-fg-body: light-dark(#3b4252, #d8dee9);
165
+ --bs-fg-2: light-dark(#4c566a, #a7b0c0);
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-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 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
+ }