bulma-rails 0.9.4 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +48 -14
  3. data/app/assets/stylesheets/bulma.scss +4 -0
  4. data/app/assets/stylesheets/sass/_index.scss +10 -0
  5. data/app/assets/stylesheets/sass/base/_index.scss +6 -0
  6. data/app/assets/stylesheets/sass/base/animations.scss +15 -0
  7. data/app/assets/stylesheets/sass/base/generic.scss +239 -0
  8. data/app/assets/stylesheets/sass/base/minireset.scss +92 -0
  9. data/app/assets/stylesheets/sass/base/skeleton.scss +114 -0
  10. data/app/assets/stylesheets/sass/components/_index.scss +13 -0
  11. data/app/assets/stylesheets/sass/components/breadcrumb.scss +139 -0
  12. data/app/assets/stylesheets/sass/components/card.scss +162 -0
  13. data/app/assets/stylesheets/sass/components/dropdown.scss +188 -0
  14. data/app/assets/stylesheets/sass/components/menu.scss +165 -0
  15. data/app/assets/stylesheets/sass/components/message.scss +183 -0
  16. data/app/assets/stylesheets/sass/components/modal.scss +164 -0
  17. data/app/assets/stylesheets/sass/components/navbar.scss +788 -0
  18. data/app/assets/stylesheets/sass/components/pagination.scss +379 -0
  19. data/app/assets/stylesheets/sass/components/panel.scss +218 -0
  20. data/app/assets/stylesheets/sass/components/tabs.scss +273 -0
  21. data/app/assets/stylesheets/sass/elements/_index.scss +16 -0
  22. data/app/assets/stylesheets/sass/elements/block.scss +6 -0
  23. data/app/assets/stylesheets/sass/elements/box.scss +59 -0
  24. data/app/assets/stylesheets/sass/elements/button.scss +647 -0
  25. data/app/assets/stylesheets/sass/elements/content.scss +283 -0
  26. data/app/assets/stylesheets/sass/elements/delete.scss +6 -0
  27. data/app/assets/stylesheets/sass/elements/icon.scss +67 -0
  28. data/app/assets/stylesheets/sass/elements/image.scss +62 -0
  29. data/app/assets/stylesheets/sass/elements/loader.scss +15 -0
  30. data/app/assets/stylesheets/sass/elements/notification.scss +105 -0
  31. data/app/assets/stylesheets/sass/elements/progress.scss +115 -0
  32. data/app/assets/stylesheets/sass/elements/table.scss +261 -0
  33. data/app/assets/stylesheets/sass/elements/tag.scss +219 -0
  34. data/app/assets/stylesheets/sass/elements/title.scss +128 -0
  35. data/app/assets/stylesheets/sass/form/_index.scss +9 -0
  36. data/app/assets/stylesheets/sass/form/checkbox-radio.scss +32 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +123 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +144 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +172 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +341 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns-v2.scss +957 -0
  44. data/app/assets/stylesheets/sass/grid/columns.scss +877 -0
  45. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  46. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  47. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  48. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  49. data/app/assets/stylesheets/sass/helpers/color.scss +364 -0
  50. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  51. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  52. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  53. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  54. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  55. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  56. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  57. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  58. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  59. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  60. data/app/assets/stylesheets/sass/layout/container.scss +51 -0
  61. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  62. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  63. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  64. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  65. data/app/assets/stylesheets/sass/layout/section.scss +34 -0
  66. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  67. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  68. data/app/assets/stylesheets/sass/themes/light.scss +146 -0
  69. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  70. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  71. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  72. data/app/assets/stylesheets/sass/utilities/css-variables.scss +425 -0
  73. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  74. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  75. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  76. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  77. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  78. data/bulma-rails.gemspec +4 -6
  79. metadata +84 -74
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  82. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  83. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  84. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  85. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  86. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  87. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  88. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  89. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  90. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  91. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  93. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  94. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  95. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  96. data/app/assets/stylesheets/sass/components/pagination.sass +0 -167
  97. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  98. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  99. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  100. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  101. data/app/assets/stylesheets/sass/elements/button.sass +0 -357
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -162
  104. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  105. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  106. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  107. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  108. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  109. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  110. data/app/assets/stylesheets/sass/elements/table.sass +0 -134
  111. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  112. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  113. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  114. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  115. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  116. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  117. data/app/assets/stylesheets/sass/form/select.sass +0 -88
  118. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  119. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  120. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  121. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  122. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  123. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  124. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  125. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  126. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  127. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  128. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  129. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  130. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  131. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  132. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  133. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  134. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  135. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  136. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  137. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  138. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  139. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  140. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  141. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  142. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -135
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -79
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -303
@@ -0,0 +1,425 @@
1
+ @use "sass:color";
2
+ @use "sass:list";
3
+ @use "sass:map";
4
+ @use "sass:math";
5
+
6
+ @use "initial-variables" as iv;
7
+ @use "functions" as fn;
8
+
9
+ @function buildVarName($name, $prefix: "", $suffix: "") {
10
+ @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
11
+ }
12
+
13
+ @function buildHslaString($name, $l, $a: 1) {
14
+ $lightness: getVar($name, "", "-l");
15
+ @if ($l) {
16
+ $lightness: $l;
17
+ }
18
+ @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
19
+ }
20
+
21
+ @function getVar($name, $prefix: "", $suffix: "") {
22
+ $varName: buildVarName($name, $prefix, $suffix);
23
+ @return var(#{$varName});
24
+ }
25
+
26
+ @function getVarWithBackup($name, $backup, $prefix: "", $suffix: "") {
27
+ $varName: buildVarName($name, $prefix, $suffix);
28
+ $backupName: buildVarName($backup, $prefix, $suffix);
29
+ @return var(#{$varName}, var(#{$backupName}));
30
+ }
31
+
32
+ @function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") {
33
+ $varName: buildVarName($name, $prefix, $suffix);
34
+ @return unquote("rgba(var(#{$varName}), #{$alpha})");
35
+ }
36
+
37
+ @mixin register-var($name, $value, $prefix: "", $suffix: "") {
38
+ $varName: buildVarName($name, $prefix, $suffix);
39
+ #{$varName}: #{$value};
40
+ }
41
+
42
+ @mixin register-vars($vars, $prefix: "", $suffix: "") {
43
+ @each $name, $value in $vars {
44
+ @include register-var($name, $value, $prefix, $suffix);
45
+ }
46
+ }
47
+
48
+ @mixin register-rgb($name, $value) {
49
+ @include register-var(
50
+ $name,
51
+ (red($value), green($value), blue($value)),
52
+ "",
53
+ "-rgb"
54
+ );
55
+ }
56
+
57
+ @mixin register-hsl($name, $value) {
58
+ @include register-var($name, round(hue($value)), "", "-h");
59
+ @include register-var($name, round(saturation($value)), "", "-s");
60
+ @include register-var($name, round(lightness($value)), "", "-l");
61
+ }
62
+
63
+ @mixin generate-on-scheme-colors($name, $base, $scheme-main) {
64
+ // Accessibility Contrast System
65
+ $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main);
66
+ $on-scheme-color: $base;
67
+ $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
68
+ $bg-lum: fn.bulmaColorLuminance($scheme-main);
69
+ $ratio: 0;
70
+ $found-decent-color: false;
71
+
72
+ @if ($fg-lum > $bg-lum) {
73
+ @for $i from 0 through 20 {
74
+ $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
75
+
76
+ @if $ratio > 5 {
77
+ $found-decent-color: true;
78
+ } @else {
79
+ $on-scheme-color: lighten($on-scheme-color, 5%);
80
+ $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
81
+ }
82
+ }
83
+ } @else {
84
+ @for $i from 0 through 20 {
85
+ $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05));
86
+
87
+ @if $ratio > 5 {
88
+ $found-decent-color: true;
89
+ } @else {
90
+ $on-scheme-color: darken($on-scheme-color, 5%);
91
+ $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
92
+ }
93
+ }
94
+ }
95
+
96
+ $on-scheme-lightness: lightness($on-scheme-color);
97
+ @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
98
+ $on-scheme-l: getVar($name, "", "-on-scheme-l");
99
+ @include register-var(
100
+ "#{$name}-on-scheme",
101
+ buildHslaString($name, $on-scheme-l)
102
+ );
103
+ }
104
+
105
+ @mixin v1-generate-on-scheme-colors($name, $base, $scheme-main) {
106
+ // Accessibility Contrast System
107
+ $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main);
108
+ $on-scheme-color: $base;
109
+
110
+ @if ($scheme-main-brightness == "bright") {
111
+ @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
112
+ // We're on a light background, so we'll darken the test color step by step.
113
+ $on-scheme-color: darken($on-scheme-color, 5%);
114
+ }
115
+ } @else {
116
+ @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
117
+ // We're on a dark background, so we'll lighten the test color step by step.
118
+ $on-scheme-color: lighten($on-scheme-color, 5%);
119
+ }
120
+ }
121
+
122
+ $on-scheme-lightness: lightness($on-scheme-color);
123
+ @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
124
+ }
125
+
126
+ @mixin register-base-color($name, $base) {
127
+ $hsla: buildHslaString($name, getVar($name, "", "-l"));
128
+ @include register-var($name, $hsla);
129
+ @include register-var($name, $hsla, "", "-base"); // Just for reference
130
+ @include register-rgb($name, $base);
131
+ @include register-hsl($name, $base);
132
+ }
133
+
134
+ @mixin generate-basic-palette($name, $base, $invert: null) {
135
+ @include register-base-color($name, $base);
136
+
137
+ @if $invert {
138
+ @include register-var($name, lightness($invert), "", "-invert-l");
139
+ @include register-var("#{$name}-invert", $invert);
140
+ }
141
+ }
142
+
143
+ @mixin generate-color-palette(
144
+ $name,
145
+ $base,
146
+ $scheme-main-l: 100%,
147
+ $invert: null,
148
+ $light: null,
149
+ $dark: null
150
+ ) {
151
+ $h: round(hue($base)); // Hue
152
+ $s: round(saturation($base)); // Saturation
153
+ $l: round(lightness($base)); // Lightness
154
+ $base-lum: fn.bulmaColorLuminance($base);
155
+ $l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
156
+ $l-0: 0%; // 5% or less
157
+ $l-5: 5%; // More than 5%
158
+ $a: 1; // Alpha
159
+ $base-digits: "00";
160
+
161
+ // Calculate digits like "40" for the scheme-main
162
+ $scheme-l-0: 0%;
163
+ $scheme-l-base: round($scheme-main-l % 10);
164
+ $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
165
+ $pct-to-int: math.div($closest-5, 100%) * 100;
166
+ $scheme-main-digits: #{$pct-to-int};
167
+
168
+ // === STEP 1 ===
169
+ // Register the base colors
170
+ @include register-base-color($name, $base);
171
+
172
+ // === STEP 2 ===
173
+ // Generating 20 shades of the color
174
+
175
+ // 00: 0%, 1%, 2%
176
+ // 05: 3%, 4%, 5%, 6%, 7%
177
+ // 10: 8%, 9%
178
+
179
+ @if ($l-base < 3%) {
180
+ $l-0: $l-base;
181
+ $l-5: $l-base + 5%;
182
+ } @else if ($l-base < 8%) {
183
+ // $l-0: math.max($l-base - 5%, 0%);
184
+ $l-0: $l-base - 5%;
185
+ $l-5: $l-base;
186
+ } @else {
187
+ // $l-0: math.max($l-base - 10%, 0%);
188
+ $l-0: $l-base - 10%;
189
+ $l-5: $l-base - 5%;
190
+ }
191
+
192
+ $shades: ();
193
+
194
+ @for $i from 0 through 9 {
195
+ // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc.
196
+ $color-l-0: math.max($l-0 + $i * 10, 0%);
197
+
198
+ // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc.
199
+ $color-l-5: $l-5 + $i * 10;
200
+
201
+ $shades: map.set($shades, "#{$i}0", $color-l-0);
202
+ $shades: map.set($shades, "#{$i}5", $color-l-5);
203
+
204
+ @include register-var($name, $color-l-0, "", "-#{$i}0-l");
205
+ @include register-var($name, $color-l-5, "", "-#{$i}5-l");
206
+
207
+ @if $color-l-0 == $l {
208
+ $base-digits: "#{$i}0";
209
+ } @else if $color-l-5 == $l {
210
+ $base-digits: "#{$i}5";
211
+ }
212
+ }
213
+
214
+ $shades: map.set($shades, "100", 100%);
215
+ @include register-var($name, 100%, "", "-100-l");
216
+
217
+ // === STEP 3 ===
218
+ // Find accessible color combinations
219
+
220
+ $combos: ();
221
+
222
+ @each $digits-bg, $bg-l in $shades {
223
+ $background: hsl($h, $s, $bg-l);
224
+ $bg-lum: fn.bulmaColorLuminance($background);
225
+ $bg-is-light: $bg-lum > 0.55;
226
+ $candidates: ();
227
+ $found: false;
228
+
229
+ // If the background color is the base color
230
+ @if $bg-l == $l {
231
+ $base-digits: $digits-bg;
232
+
233
+ // Even if the base color as a background
234
+ // doesn't have an appropriate foreground,
235
+ // we still add to the list of "valid" contrast combos for now.
236
+ @if $bg-is-light {
237
+ $combos: map.set($combos, $base-digits, "10");
238
+ } @else {
239
+ $combos: map.set($combos, $base-digits, "100");
240
+ }
241
+ }
242
+
243
+ // We capture all contrast ratios for any given background
244
+ // using all foreground options
245
+ $current-best-digits: "00";
246
+ $current-best-ratio: 0;
247
+
248
+ @each $digits-fg, $fg-l in $shades {
249
+ $foreground: hsl($h, $s, $fg-l);
250
+ $ratio: 0;
251
+ $is-light-fg: false;
252
+
253
+ // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
254
+ $fg-lum: fn.bulmaColorLuminance($foreground);
255
+
256
+ @if (lightness($foreground) > lightness($background)) {
257
+ $is-light-fg: true;
258
+ $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
259
+ } @else {
260
+ $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05));
261
+ }
262
+
263
+ @if $ratio > 7 {
264
+ $candidates: list.append(
265
+ $candidates,
266
+ fn.bulmaStringToNumber($digits-fg)
267
+ );
268
+
269
+ @if ($is-light-fg) {
270
+ @if (not $found) {
271
+ // Store the background/foreground combination
272
+ $combos: map.set($combos, $digits-bg, $digits-fg);
273
+ $current-best-digits: $digits-fg;
274
+ $current-best-ratio: $ratio;
275
+ $found: true;
276
+ }
277
+ } @else {
278
+ $combos: map.set($combos, $digits-bg, $digits-fg);
279
+ $current-best-digits: $digits-fg;
280
+ $current-best-ratio: $ratio;
281
+ }
282
+ }
283
+ }
284
+
285
+ // We haven't found a decent ratio
286
+ @each $digits-fg, $fg-l in $shades {
287
+ @if (map.has-key($combos, $digits-bg) == false) {
288
+ @if ($bg-is-light) {
289
+ // Light background so we set a dark foreground
290
+ $combos: map.set($combos, $digits-bg, "00");
291
+ } @else {
292
+ // Dark background so we set a light foreground
293
+ $combos: map.set($combos, $digits-bg, "100");
294
+ }
295
+ }
296
+ }
297
+ }
298
+
299
+ // The output needs to be:
300
+ // --bulma-primary-invert-l: var(--bulma-primary-100-l);
301
+
302
+ @each $bg, $fg in $combos {
303
+ // Just using this loop to register all 20 digits
304
+ $bg-l: getVar($name, "", "-#{$bg}-l");
305
+ @include register-var("#{$name}-#{$bg}", buildHslaString($name, $bg-l));
306
+
307
+ // Register the lightness
308
+ @include register-var(
309
+ $name,
310
+ getVar($name, "", "-#{$fg}-l"),
311
+ "",
312
+ "-#{$bg}-invert-l"
313
+ );
314
+
315
+ // Resiter the color using that lightness
316
+ $bg-invert-l: getVar($name, "", "-#{$bg}-invert-l");
317
+ @include register-var(
318
+ "#{$name}-#{$bg}-invert",
319
+ buildHslaString($name, $bg-invert-l)
320
+ );
321
+ }
322
+
323
+ // If an invert color is provided by the user
324
+ @if $invert {
325
+ @include register-var($name, lightness($invert), "", "-invert-l");
326
+ @include register-var("#{$name}-invert", $invert);
327
+ } @else {
328
+ $base-invert-l-digits: map.get($combos, $base-digits);
329
+ @include register-var(
330
+ $name,
331
+ getVar($name, "", "-#{$base-invert-l-digits}-l"),
332
+ "",
333
+ "-invert-l"
334
+ );
335
+
336
+ $base-invert-l: getVar($name, "", "-invert-l");
337
+ @include register-var(
338
+ "#{$name}-invert",
339
+ buildHslaString($name, $base-invert-l)
340
+ );
341
+ }
342
+
343
+ // Good color on light background (90% lightness)
344
+ @if $light and $dark {
345
+ @include register-var($name, lightness($light), "", "-light-l");
346
+ @include register-var($name, lightness($light), "", "-dark-invert-l");
347
+ @include register-var("#{$name}-light", $light);
348
+ @include register-var("#{$name}-dark-invert", $light);
349
+
350
+ @include register-var($name, lightness($dark), "", "-dark-l");
351
+ @include register-var($name, lightness($dark), "", "-light-invert-l");
352
+ @include register-var("#{$name}-dark", $dark);
353
+ @include register-var("#{$name}-light-invert", $dark);
354
+ } @else {
355
+ @include register-var($name, getVar($name, "", "-90-l"), "", "-light-l");
356
+
357
+ $light-l: getVar($name, "", "-light-l");
358
+ @include register-var("#{$name}-light", buildHslaString($name, $light-l));
359
+
360
+ $light-invert-l-digits: map.get($combos, "90");
361
+ @include register-var(
362
+ $name,
363
+ getVar($name, "", "-#{$light-invert-l-digits}-l"),
364
+ "",
365
+ "-light-invert-l"
366
+ );
367
+
368
+ $light-invert-l: getVar($name, "", "-light-invert-l");
369
+ @include register-var(
370
+ "#{$name}-light-invert",
371
+ buildHslaString($name, $light-invert-l)
372
+ );
373
+
374
+ // Good color on dark background (10% lightness)
375
+ @include register-var($name, getVar($name, "", "-10-l"), "", "-dark-l");
376
+
377
+ $dark-l: getVar($name, "", "-dark-l");
378
+ @include register-var("#{$name}-dark", buildHslaString($name, $dark-l));
379
+
380
+ $dark-invert-l-digits: map.get($combos, "10");
381
+ @include register-var(
382
+ $name,
383
+ getVar($name, "", "-#{$dark-invert-l-digits}-l"),
384
+ "",
385
+ "-dark-invert-l"
386
+ );
387
+
388
+ $dark-invert-l: getVar($name, "", "-dark-invert-l");
389
+ @include register-var(
390
+ "#{$name}-dark-invert",
391
+ buildHslaString($name, $dark-invert-l)
392
+ );
393
+
394
+ // Soft and Bold colors
395
+ $soft-l: getVar("soft-l");
396
+ $soft-invert-l: getVar("soft-invert-l");
397
+ $bold-l: getVar("bold-l");
398
+ $bold-invert-l: getVar("bold-invert-l");
399
+ @include register-var("#{$name}-soft", buildHslaString($name, $soft-l));
400
+ @include register-var("#{$name}-bold", buildHslaString($name, $bold-l));
401
+ @include register-var(
402
+ "#{$name}-soft-invert",
403
+ buildHslaString($name, $soft-invert-l)
404
+ );
405
+ @include register-var(
406
+ "#{$name}-bold-invert",
407
+ buildHslaString($name, $bold-invert-l)
408
+ );
409
+ }
410
+ }
411
+
412
+ @mixin bulma-theme($name) {
413
+ [data-#{iv.$class-prefix}theme="#{$name}"],
414
+ .#{iv.$class-prefix}theme-#{$name} {
415
+ @content;
416
+ }
417
+ }
418
+
419
+ @mixin system-theme($name) {
420
+ @media (prefers-color-scheme: #{$name}) {
421
+ :root {
422
+ @content;
423
+ }
424
+ }
425
+ }
@@ -0,0 +1,112 @@
1
+ @use "initial-variables" as iv;
2
+ @use "functions" as fn;
3
+
4
+ // Scheme colors
5
+
6
+ $scheme-main: iv.$white !default;
7
+ $scheme-main-bis: iv.$white-bis !default;
8
+ $scheme-main-ter: iv.$white-ter !default;
9
+ $scheme-invert: iv.$black !default;
10
+ $scheme-invert-bis: iv.$black-bis !default;
11
+ $scheme-invert-ter: iv.$black-ter !default;
12
+
13
+ // Text colors
14
+
15
+ $text: iv.$grey-dark !default;
16
+ $text-invert: fn.bulmaFindColorInvert($text) !default;
17
+ $text-weak: iv.$grey !default;
18
+ $text-strong: iv.$grey-darker !default;
19
+
20
+ // Status colors
21
+
22
+ $primary: iv.$turquoise !default;
23
+ $info: iv.$cyan !default;
24
+ $success: iv.$green !default;
25
+ $warning: iv.$yellow !default;
26
+ $danger: iv.$red !default;
27
+ $light: iv.$white-ter !default;
28
+ $dark: iv.$grey-darker !default;
29
+
30
+ // Link colors
31
+
32
+ $link: iv.$blue !default;
33
+
34
+ // Decorative colors
35
+
36
+ $background: iv.$white-ter !default;
37
+ $border: iv.$grey-lighter !default;
38
+ $border-weak: iv.$grey-lightest !default;
39
+
40
+ // Code colors
41
+
42
+ $code: iv.$red !default;
43
+ $code-background: $background !default;
44
+
45
+ $pre: $text !default;
46
+ $pre-background: $background !default;
47
+
48
+ // Typography
49
+
50
+ $family-primary: iv.$family-sans-serif !default;
51
+ $family-secondary: iv.$family-sans-serif !default;
52
+ $family-code: iv.$family-monospace !default;
53
+
54
+ $size-small: iv.$size-7 !default;
55
+ $size-normal: iv.$size-6 !default;
56
+ $size-medium: iv.$size-5 !default;
57
+ $size-large: iv.$size-4 !default;
58
+
59
+ // Effects
60
+
61
+ $shadow-color: iv.$black !default;
62
+
63
+ // Lists and maps
64
+ $custom-colors: null !default;
65
+ $custom-shades: null !default;
66
+
67
+ $colors: fn.mergeColorMaps(
68
+ (
69
+ "white": (
70
+ iv.$white,
71
+ iv.$black,
72
+ ),
73
+ "black": (
74
+ iv.$black,
75
+ iv.$white,
76
+ ),
77
+ "light": (
78
+ $light,
79
+ $dark,
80
+ ),
81
+ "dark": (
82
+ $dark,
83
+ $light,
84
+ ),
85
+ "text": $text,
86
+ "primary": $primary,
87
+ "link": $link,
88
+ "info": $info,
89
+ "success": $success,
90
+ "warning": $warning,
91
+ "danger": $danger,
92
+ ),
93
+ $custom-colors
94
+ ) !default;
95
+
96
+ $shades: fn.mergeColorMaps(
97
+ (
98
+ "black-bis": iv.$black-bis,
99
+ "black-ter": iv.$black-ter,
100
+ "grey-darker": iv.$grey-darker,
101
+ "grey-dark": iv.$grey-dark,
102
+ "grey": iv.$grey,
103
+ "grey-light": iv.$grey-light,
104
+ "grey-lighter": iv.$grey-lighter,
105
+ "white-ter": iv.$white-ter,
106
+ "white-bis": iv.$white-bis,
107
+ ),
108
+ $custom-shades
109
+ ) !default;
110
+
111
+ $sizes: iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6
112
+ iv.$size-7 !default;
@@ -0,0 +1,34 @@
1
+ @use "controls";
2
+ @use "mixins";
3
+
4
+ %arrow {
5
+ @include mixins.arrow;
6
+ }
7
+
8
+ %block {
9
+ @include mixins.block;
10
+ }
11
+
12
+ %control {
13
+ @include controls.control;
14
+ }
15
+
16
+ %delete {
17
+ @include mixins.delete;
18
+ }
19
+
20
+ %loader {
21
+ @include mixins.loader;
22
+ }
23
+
24
+ %overlay {
25
+ @include mixins.overlay;
26
+ }
27
+
28
+ %reset {
29
+ @include mixins.reset;
30
+ }
31
+
32
+ %unselectable {
33
+ @include mixins.unselectable;
34
+ }