@volverjs/style 0.1.12-beta.2 → 0.1.12-beta.20

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 (145) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +5 -5
  3. package/dist/base.css +1 -1
  4. package/dist/components/vv-accordion-group.css +1 -1
  5. package/dist/components/vv-accordion.css +1 -1
  6. package/dist/components/vv-alert-group.css +1 -1
  7. package/dist/components/vv-alert.css +1 -1
  8. package/dist/components/vv-avatar-group.css +1 -1
  9. package/dist/components/vv-avatar.css +1 -1
  10. package/dist/components/vv-badge.css +1 -1
  11. package/dist/components/vv-breadcrumb.css +1 -1
  12. package/dist/components/vv-button-group.css +1 -1
  13. package/dist/components/vv-button.css +1 -1
  14. package/dist/components/vv-card.css +1 -1
  15. package/dist/components/vv-checkbox-group.css +1 -1
  16. package/dist/components/vv-checkbox.css +1 -1
  17. package/dist/components/vv-dialog.css +1 -1
  18. package/dist/components/vv-dropdown-action.css +1 -1
  19. package/dist/components/vv-dropdown-optgroup.css +1 -1
  20. package/dist/components/vv-dropdown-option.css +1 -1
  21. package/dist/components/vv-dropdown.css +1 -1
  22. package/dist/components/vv-input-file.css +1 -0
  23. package/dist/components/vv-input-text.css +1 -1
  24. package/dist/components/vv-nav.css +1 -1
  25. package/dist/components/vv-progress.css +1 -1
  26. package/dist/components/vv-radio-group.css +1 -1
  27. package/dist/components/vv-radio.css +1 -1
  28. package/dist/components/vv-select.css +1 -1
  29. package/dist/components/vv-skeleton.css +1 -1
  30. package/dist/components/vv-tab.css +1 -1
  31. package/dist/components/vv-table.css +1 -1
  32. package/dist/components/vv-text.css +1 -1
  33. package/dist/components/vv-textarea.css +1 -1
  34. package/dist/components/vv-tooltip.css +1 -1
  35. package/dist/components.css +1 -1
  36. package/dist/export.css +1 -1
  37. package/dist/props/background.css +1 -1
  38. package/dist/props/colors.css +1 -1
  39. package/dist/props/filters.css +1 -1
  40. package/dist/props/input.css +1 -1
  41. package/dist/props/layout.css +1 -1
  42. package/dist/props/spacing.css +1 -1
  43. package/dist/props/transitions.css +1 -1
  44. package/dist/props/typography.css +1 -1
  45. package/dist/props.css +1 -1
  46. package/dist/reset.css +1 -1
  47. package/dist/themes/dark/components.css +1 -1
  48. package/dist/themes/dark/props.css +1 -1
  49. package/dist/themes/dark/volver.css +1 -1
  50. package/dist/utilities/backgrounds.css +1 -1
  51. package/dist/utilities/colors.css +1 -1
  52. package/dist/utilities/effects.css +1 -1
  53. package/dist/utilities/filters.css +1 -1
  54. package/dist/utilities/interactivity.css +1 -1
  55. package/dist/utilities/layout.css +1 -1
  56. package/dist/utilities/sizing.css +1 -1
  57. package/dist/utilities/transforms.css +1 -1
  58. package/dist/utilities/typography.css +1 -1
  59. package/dist/utilities.css +1 -1
  60. package/dist/volver.css +1 -1
  61. package/package.json +44 -44
  62. package/src/_config.scss +10 -9
  63. package/src/_preflight.scss +35 -1
  64. package/src/components/index.scss +1 -0
  65. package/src/components/vv-button-group.scss +6 -6
  66. package/src/components/vv-button.scss +1 -12
  67. package/src/components/vv-input-file.scss +93 -0
  68. package/src/components/vv-input-text.scss +54 -11
  69. package/src/components/vv-select.scss +53 -10
  70. package/src/components/vv-textarea.scss +53 -10
  71. package/src/components/vv-tooltip.scss +1 -1
  72. package/src/export.scss +33 -59
  73. package/src/props/background.scss +1 -0
  74. package/src/props/breakpoints.scss +5 -4
  75. package/src/props/index.scss +0 -1
  76. package/src/props/spacing.scss +2 -2
  77. package/src/props/transitions.scss +19 -0
  78. package/src/props/typography.scss +3 -2
  79. package/src/settings/_background.scss +228 -0
  80. package/src/settings/_colors.scss +16 -53
  81. package/src/settings/_effects.scss +0 -18
  82. package/src/settings/_filters.scss +15 -0
  83. package/src/settings/_index.scss +1 -1
  84. package/src/settings/_input.scss +4 -3
  85. package/src/settings/_interactivity.scss +14 -0
  86. package/src/settings/_layout.scss +1 -0
  87. package/src/settings/_transitions.scss +1 -0
  88. package/src/settings/_typography.scss +9 -1
  89. package/src/settings/components/_vv-accordion-group.scss +2 -2
  90. package/src/settings/components/_vv-accordion.scss +6 -5
  91. package/src/settings/components/_vv-alert-group.scss +14 -4
  92. package/src/settings/components/_vv-alert.scss +9 -9
  93. package/src/settings/components/_vv-avatar-group.scss +1 -0
  94. package/src/settings/components/_vv-avatar.scss +54 -52
  95. package/src/settings/components/_vv-badge.scss +67 -27
  96. package/src/settings/components/_vv-breadcrumb.scss +1 -0
  97. package/src/settings/components/_vv-button.scss +11 -5
  98. package/src/settings/components/_vv-card.scss +2 -0
  99. package/src/settings/components/_vv-checkbox-group.scss +3 -0
  100. package/src/settings/components/_vv-checkbox.scss +1 -0
  101. package/src/settings/components/_vv-dialog.scss +4 -0
  102. package/src/settings/components/_vv-dropdown-option.scss +2 -2
  103. package/src/settings/components/_vv-dropdown.scss +93 -7
  104. package/src/settings/components/_vv-input-file.scss +503 -0
  105. package/src/settings/components/_vv-input-text.scss +5 -1
  106. package/src/settings/components/_vv-nav.scss +10 -9
  107. package/src/settings/components/_vv-progress.scss +2 -0
  108. package/src/settings/components/_vv-radio.scss +3 -2
  109. package/src/settings/components/_vv-select.scss +6 -1
  110. package/src/settings/components/_vv-table.scss +19 -1
  111. package/src/settings/components/_vv-text.scss +1 -0
  112. package/src/settings/components/_vv-textarea.scss +6 -1
  113. package/src/themes/dark/components/_vv-avatar.scss +22 -0
  114. package/src/themes/dark/components/_vv-badge.scss +22 -0
  115. package/src/themes/dark/components/_vv-dropdown-action.scss +22 -0
  116. package/src/themes/dark/components/_vv-dropdown-option.scss +22 -0
  117. package/src/themes/dark/components/_vv-nav.scss +22 -0
  118. package/src/themes/dark/components/index.scss +6 -1
  119. package/src/themes/dark/settings/_background.scss +2 -0
  120. package/src/themes/dark/settings/_colors.scss +4 -38
  121. package/src/themes/dark/settings/_index.scss +6 -1
  122. package/src/themes/dark/settings/components/_vv-alert.scss +1 -1
  123. package/src/themes/dark/settings/components/_vv-avatar.scss +27 -0
  124. package/src/themes/dark/settings/components/_vv-badge.scss +50 -0
  125. package/src/themes/dark/settings/components/_vv-button.scss +13 -8
  126. package/src/themes/dark/settings/components/_vv-dropdown-action.scss +3 -0
  127. package/src/themes/dark/settings/components/_vv-dropdown-option.scss +19 -0
  128. package/src/themes/dark/settings/components/_vv-nav.scss +15 -0
  129. package/src/tools/_breakpoints.scss +13 -4
  130. package/src/tools/_functions.scss +26 -13
  131. package/src/tools/_mixins.scss +97 -26
  132. package/src/utilities/backgrounds.scss +14 -4
  133. package/src/utilities/flexbox.scss +6 -1
  134. package/src/utilities/index.scss +0 -1
  135. package/src/utilities/interactivity.scss +17 -1
  136. package/src/utilities/layout.scss +9 -3
  137. package/src/utilities/sizing.scss +10 -2
  138. package/src/utilities/spacing.scss +10 -1
  139. package/src/utilities/transforms.scss +2 -2
  140. package/src/utilities/typography.scss +21 -0
  141. package/dist/props/gradient.css +0 -1
  142. package/dist/utilities/gradients.css +0 -1
  143. package/src/props/gradient.scss +0 -7
  144. package/src/settings/_gradient.scss +0 -201
  145. package/src/utilities/gradients.scss +0 -11
@@ -34,6 +34,7 @@
34
34
  %italic {
35
35
  font-style: italic;
36
36
  }
37
+
37
38
  @include wrap-with-where(
38
39
  $selector: '.italic',
39
40
  $enabled: $zero-specificity-for-utilities
@@ -44,6 +45,7 @@
44
45
  %non-italic {
45
46
  font-style: normal;
46
47
  }
48
+
47
49
  @include wrap-with-where(
48
50
  $selector: '.non-italic',
49
51
  $enabled: $zero-specificity-for-utilities
@@ -56,6 +58,7 @@
56
58
  -webkit-font-smoothing: antialiased;
57
59
  -moz-osx-font-smoothing: grayscale;
58
60
  }
61
+
59
62
  @include wrap-with-where(
60
63
  $selector: '.antialiased',
61
64
  $enabled: $zero-specificity-for-utilities
@@ -67,6 +70,7 @@
67
70
  -webkit-font-smoothing: auto;
68
71
  -moz-osx-font-smoothing: auto;
69
72
  }
73
+
70
74
  @include wrap-with-where(
71
75
  $selector: '.subpixel-antialiased',
72
76
  $enabled: $zero-specificity-for-utilities
@@ -168,6 +172,7 @@
168
172
  text-overflow: ellipsis;
169
173
  white-space: nowrap;
170
174
  }
175
+
171
176
  @include wrap-with-where(
172
177
  $selector: '.truncate',
173
178
  $enabled: $zero-specificity-for-utilities
@@ -178,6 +183,7 @@
178
183
  %text-ellipsis {
179
184
  text-overflow: ellipsis;
180
185
  }
186
+
181
187
  @include wrap-with-where(
182
188
  $selector: '.text-ellipsis',
183
189
  $enabled: $zero-specificity-for-utilities
@@ -188,6 +194,7 @@
188
194
  %text-clip {
189
195
  text-overflow: clip;
190
196
  }
197
+
191
198
  @include wrap-with-where(
192
199
  $selector: '.text-clip',
193
200
  $enabled: $zero-specificity-for-utilities
@@ -195,11 +202,23 @@
195
202
  @extend %text-clip;
196
203
  }
197
204
 
205
+ %text-balance {
206
+ text-wrap: balance;
207
+ }
208
+
209
+ @include wrap-with-where(
210
+ $selector: '.text-balance',
211
+ $enabled: $zero-specificity-for-utilities
212
+ ) {
213
+ @extend %text-balance;
214
+ }
215
+
198
216
  // word break
199
217
  %break-normal {
200
218
  overflow-wrap: normal;
201
219
  word-break: normal;
202
220
  }
221
+
203
222
  @include wrap-with-where(
204
223
  $selector: '.break-normal',
205
224
  $enabled: $zero-specificity-for-utilities
@@ -210,6 +229,7 @@
210
229
  %break-words {
211
230
  overflow-wrap: break-word;
212
231
  }
232
+
213
233
  @include wrap-with-where(
214
234
  $selector: '.break-words',
215
235
  $enabled: $zero-specificity-for-utilities
@@ -220,6 +240,7 @@
220
240
  %break-all {
221
241
  word-break: break-all;
222
242
  }
243
+
223
244
  @include wrap-with-where(
224
245
  $selector: '.break-all',
225
246
  $enabled: $zero-specificity-for-utilities
@@ -1 +0,0 @@
1
- :where(:host,:root,.theme){--gradient-brand: linear-gradient(to bottom right, var(--color-brand-darken-3), var(--color-brand), var(--color-brand-lighten-3));--gradient-accent: linear-gradient(to bottom right, var(--color-accent-darken-3), var(--color-accent), var(--color-accent-lighten-3));--gradient-1: linear-gradient(to bottom right, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);--gradient-2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff);--gradient-3: radial-gradient(circle at top right, hsl(180, 100%, 50%), hsla(180, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(328, 100%, 54%), hsla(328, 100%, 54%, 0));--gradient-4: linear-gradient(to bottom right, #00f5a0, #00d9f5);--gradient-5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite);--gradient-6: conic-gradient(from -90deg at top left, black, white);--gradient-7: linear-gradient(to bottom right, #72c6ef, #004e8f);--gradient-8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);--gradient-9: conic-gradient(from .5turn at bottom center, lightblue, white);--gradient-10: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);--gradient-11: conic-gradient(at bottom left, deeppink, cyan);--gradient-12: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);--gradient-13: radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);--gradient-14: conic-gradient(at top right, lime, cyan);--gradient-15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7);--gradient-16: radial-gradient(circle at 50% -250%, #374151, #111827, #000);--gradient-17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet);--gradient-18: linear-gradient(0deg, hsla(0, 100%, 50%, .8), hsla(0, 100%, 50%, 0) 75%), linear-gradient(60deg, hsla(60, 100%, 50%, .8), hsla(60, 100%, 50%, 0) 75%), linear-gradient(120deg, hsla(120, 100%, 50%, .8), hsla(120, 100%, 50%, 0) 75%), linear-gradient(180deg, hsla(180, 100%, 50%, .8), hsla(180, 100%, 50%, 0) 75%), linear-gradient(240deg, hsla(240, 100%, 50%, .8), hsla(240, 100%, 50%, 0) 75%), linear-gradient(300deg, hsla(300, 100%, 50%, .8), hsla(300, 100%, 50%, 0) 75%);--gradient-19: linear-gradient(to bottom right, #ffe259, #ffa751);--gradient-20: conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);--gradient-21: conic-gradient(from -90deg at 25% 115%, #f00, #f06, #f0c, #c0f, #60f, #00f, #00f, #00f, #00f);--gradient-22: linear-gradient(to bottom right, #acb6e5, #86fde8);--gradient-23: linear-gradient(to bottom right, #536976, #292e49);--gradient-24: conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476);--gradient-25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);--gradient-26: linear-gradient(to bottom right, #9796f0, #fbc7d4);--gradient-27: conic-gradient(from .5turn at bottom left, deeppink, #639);--gradient-28: conic-gradient(from -90deg at 50% 105%, white, orchid);--gradient-29: radial-gradient(circle at top right, hsl(250, 100%, 85%), hsla(250, 100%, 85%, 0)), radial-gradient(circle at bottom left, hsl(220, 90%, 75%), hsla(220, 90%, 75%, 0));--gradient-30: radial-gradient(circle at top right, hsl(150, 100%, 50%), hsla(150, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(150, 100%, 84%), hsla(150, 100%, 84%, 0));--noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");--noise-filter-1: contrast(300%) brightness(100%);--noise-filter-2: contrast(200%) brightness(150%);--noise-filter-3: contrast(200%) brightness(250%);--noise-filter-4: contrast(200%) brightness(500%);--noise-filter-5: contrast(200%) brightness(1000%)}
@@ -1 +0,0 @@
1
- :where(.bg-gradient-brand){background:var(--gradient-brand, linear-gradient(to bottom right, var(--color-brand-darken-3), var(--color-brand), var(--color-brand-lighten-3)))}:where(.bg-gradient-accent){background:var(--gradient-accent, linear-gradient(to bottom right, var(--color-accent-darken-3), var(--color-accent), var(--color-accent-lighten-3)))}:where(.bg-gradient-1){background:var(--gradient-1, linear-gradient(to bottom right, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b))}:where(.bg-gradient-2){background:var(--gradient-2, linear-gradient(to bottom right, #48005c, #8300e2, #a269ff))}:where(.bg-gradient-3){background:var(--gradient-3, radial-gradient(circle at top right, hsl(180, 100%, 50%), hsla(180, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(328, 100%, 54%), hsla(328, 100%, 54%, 0)))}:where(.bg-gradient-4){background:var(--gradient-4, linear-gradient(to bottom right, #00f5a0, #00d9f5))}:where(.bg-gradient-5){background:var(--gradient-5, conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite))}:where(.bg-gradient-6){background:var(--gradient-6, conic-gradient(from -90deg at top left, black, white))}:where(.bg-gradient-7){background:var(--gradient-7, linear-gradient(to bottom right, #72c6ef, #004e8f))}:where(.bg-gradient-8){background:var(--gradient-8, conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111))}:where(.bg-gradient-9){background:var(--gradient-9, conic-gradient(from .5turn at bottom center, lightblue, white))}:where(.bg-gradient-10){background:var(--gradient-10, conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700))}:where(.bg-gradient-11){background:var(--gradient-11, conic-gradient(at bottom left, deeppink, cyan))}:where(.bg-gradient-12){background:var(--gradient-12, conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85))}:where(.bg-gradient-13){background:var(--gradient-13, radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7))}:where(.bg-gradient-14){background:var(--gradient-14, conic-gradient(at top right, lime, cyan))}:where(.bg-gradient-15){background:var(--gradient-15, linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7))}:where(.bg-gradient-16){background:var(--gradient-16, radial-gradient(circle at 50% -250%, #374151, #111827, #000))}:where(.bg-gradient-17){background:var(--gradient-17, conic-gradient(from -90deg at 50% -25%, blue, blueviolet))}:where(.bg-gradient-18){background:var(--gradient-18, linear-gradient(0deg, hsla(0, 100%, 50%, .8), hsla(0, 100%, 50%, 0) 75%), linear-gradient(60deg, hsla(60, 100%, 50%, .8), hsla(60, 100%, 50%, 0) 75%), linear-gradient(120deg, hsla(120, 100%, 50%, .8), hsla(120, 100%, 50%, 0) 75%), linear-gradient(180deg, hsla(180, 100%, 50%, .8), hsla(180, 100%, 50%, 0) 75%), linear-gradient(240deg, hsla(240, 100%, 50%, .8), hsla(240, 100%, 50%, 0) 75%), linear-gradient(300deg, hsla(300, 100%, 50%, .8), hsla(300, 100%, 50%, 0) 75%))}:where(.bg-gradient-19){background:var(--gradient-19, linear-gradient(to bottom right, #ffe259, #ffa751))}:where(.bg-gradient-20){background:var(--gradient-20, conic-gradient(from -135deg at -10% center, #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4))}:where(.bg-gradient-21){background:var(--gradient-21, conic-gradient(from -90deg at 25% 115%, #f00, #f06, #f0c, #c0f, #60f, #00f, #00f, #00f, #00f))}:where(.bg-gradient-22){background:var(--gradient-22, linear-gradient(to bottom right, #acb6e5, #86fde8))}:where(.bg-gradient-23){background:var(--gradient-23, linear-gradient(to bottom right, #536976, #292e49))}:where(.bg-gradient-24){background:var(--gradient-24, conic-gradient(from .5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476))}:where(.bg-gradient-25){background:var(--gradient-25, conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7))}:where(.bg-gradient-26){background:var(--gradient-26, linear-gradient(to bottom right, #9796f0, #fbc7d4))}:where(.bg-gradient-27){background:var(--gradient-27, conic-gradient(from .5turn at bottom left, deeppink, #639))}:where(.bg-gradient-28){background:var(--gradient-28, conic-gradient(from -90deg at 50% 105%, white, orchid))}:where(.bg-gradient-29){background:var(--gradient-29, radial-gradient(circle at top right, hsl(250, 100%, 85%), hsla(250, 100%, 85%, 0)), radial-gradient(circle at bottom left, hsl(220, 90%, 75%), hsla(220, 90%, 75%, 0)))}:where(.bg-gradient-30){background:var(--gradient-30, radial-gradient(circle at top right, hsl(150, 100%, 50%), hsla(150, 100%, 50%, 0)), radial-gradient(circle at bottom left, hsl(150, 100%, 84%), hsla(150, 100%, 84%, 0)))}
@@ -1,7 +0,0 @@
1
- @use '../context' as *;
2
-
3
- :where(:host, :root, .theme) {
4
- @include spread-map-into-props($gradient, $prefix: gradient);
5
- @include spread-map-into-props($noise, $prefix: noise);
6
- @include spread-map-into-props($noise-filter, $prefix: noise-filter);
7
- }
@@ -1,201 +0,0 @@
1
- // Noise
2
- $noise: (
3
- 1:
4
- url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
5
- 2:
6
- url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
7
- 3:
8
- url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
9
- 4:
10
- url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
11
- 5:
12
- url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
13
- ) !default;
14
-
15
- // Noise filter
16
- $noise-filter: (
17
- 1: contrast(300%) brightness(100%),
18
- 2: contrast(200%) brightness(150%),
19
- 3: contrast(200%) brightness(250%),
20
- 4: contrast(200%) brightness(500%),
21
- 5: contrast(200%) brightness(1000%),
22
- ) !default;
23
- $gradient: (
24
- brand:
25
- linear-gradient(
26
- to bottom right,
27
- var(--color-brand-darken-3),
28
- var(--color-brand),
29
- var(--color-brand-lighten-3)
30
- ),
31
- accent:
32
- linear-gradient(
33
- to bottom right,
34
- var(--color-accent-darken-3),
35
- var(--color-accent),
36
- var(--color-accent-lighten-3)
37
- ),
38
- 1:
39
- linear-gradient(
40
- to bottom right,
41
- #1f005c,
42
- #5b0060,
43
- #870160,
44
- #ac255e,
45
- #ca485c,
46
- #e16b5c,
47
- #f39060,
48
- #ffb56b
49
- ),
50
- 2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff),
51
- 3: #{radial-gradient(
52
- circle at top right,
53
- hsl(180deg 100% 50%),
54
- hsl(180deg 100% 50% / 0%)
55
- ),
56
- radial-gradient(
57
- circle at bottom left,
58
- hsl(328deg 100% 54%),
59
- hsl(328deg 100% 54% / 0%)
60
- )},
61
- 4: linear-gradient(to bottom right, #00f5a0, #00d9f5),
62
- 5: conic-gradient(from -270deg at 75% 110%, fuchsia, floralwhite),
63
- 6: conic-gradient(from -90deg at top left, black, white),
64
- 7: linear-gradient(to bottom right, #72c6ef, #004e8f),
65
- 8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111),
66
- 9: conic-gradient(from 0.5turn at bottom center, lightblue, white),
67
- 10:
68
- conic-gradient(
69
- from 90deg at 40% -25%,
70
- #ffd700,
71
- #f79d03,
72
- #ee6907,
73
- #e6390a,
74
- #de0d0d,
75
- #d61039,
76
- #cf1261,
77
- #c71585,
78
- #cf1261,
79
- #d61039,
80
- #de0d0d,
81
- #ee6907,
82
- #f79d03,
83
- #ffd700,
84
- #ffd700,
85
- #ffd700
86
- ),
87
- 11: conic-gradient(at bottom left, deeppink, cyan),
88
- 12:
89
- conic-gradient(
90
- from 90deg at 25% -10%,
91
- #ff4500,
92
- #d3f340,
93
- #7bee85,
94
- #afeeee,
95
- #7bee85
96
- ),
97
- 13:
98
- radial-gradient(
99
- circle at 50% 200%,
100
- #000142,
101
- #3b0083,
102
- #b300c3,
103
- #ff059f,
104
- #ff4661,
105
- #ffad86,
106
- #fff3c7
107
- ),
108
- 14: conic-gradient(at top right, lime, cyan),
109
- 15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7),
110
- 16: radial-gradient(circle at 50% -250%, #374151, #111827, #000),
111
- 17: conic-gradient(from -90deg at 50% -25%, blue, blueviolet),
112
- 18: #{linear-gradient(
113
- 0deg,
114
- hsla(0deg 100% 50% / 80%),
115
- hsla(0deg 100% 50% / 0%) 75%
116
- ),
117
- linear-gradient(
118
- 60deg,
119
- hsla(60deg 100% 50% / 80%),
120
- hsla(60deg 100% 50% / 0%) 75%,
121
- ),
122
- linear-gradient(
123
- 120deg,
124
- hsla(120deg 100% 50% / 80%),
125
- hsla(120deg 100% 50% / 0%) 75%,
126
- ),
127
- linear-gradient(
128
- 180deg,
129
- hsla(180deg 100% 50% / 80%),
130
- hsla(180deg 100% 50% / 0%) 75%,
131
- ),
132
- linear-gradient(
133
- 240deg,
134
- hsla(240deg 100% 50% / 80%),
135
- hsla(240deg 100% 50% / 0%) 75%,
136
- ),
137
- linear-gradient(
138
- 300deg,
139
- hsla(300deg 100% 50% / 80%),
140
- hsla(300deg 100% 50% / 0%) 75%
141
- )},
142
- 19: linear-gradient(to bottom right, #ffe259, #ffa751),
143
- 20:
144
- conic-gradient(
145
- from -135deg at -10% center,
146
- #ffa500,
147
- #ff7715,
148
- #ff522a,
149
- #ff3f47,
150
- #ff5482,
151
- #ff69b4
152
- ),
153
- 21:
154
- conic-gradient(
155
- from -90deg at 25% 115%,
156
- #f00,
157
- #f06,
158
- #f0c,
159
- #c0f,
160
- #60f,
161
- #00f,
162
- #00f,
163
- #00f,
164
- #00f
165
- ),
166
- 22: linear-gradient(to bottom right, #acb6e5, #86fde8),
167
- 23: linear-gradient(to bottom right, #536976, #292e49),
168
- 24:
169
- conic-gradient(
170
- from 0.5turn at 0% 0%,
171
- #00c476,
172
- 10%,
173
- #82b0ff,
174
- 90%,
175
- #00c476
176
- ),
177
- 25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7),
178
- 26: linear-gradient(to bottom right, #9796f0, #fbc7d4),
179
- 27: conic-gradient(from 0.5turn at bottom left, deeppink, rebeccapurple),
180
- 28: conic-gradient(from -90deg at 50% 105%, white, orchid),
181
- 29: #{radial-gradient(
182
- circle at top right,
183
- hsl(250deg 100% 85%),
184
- hsl(250deg 100% 85% / 0%)
185
- ),
186
- radial-gradient(
187
- circle at bottom left,
188
- hsl(220deg 90% 75%),
189
- hsl(220deg 90% 75% / 0%)
190
- )},
191
- 30: #{radial-gradient(
192
- circle at top right,
193
- hsl(150deg 100% 50%),
194
- hsl(150deg 100% 50% / 0%)
195
- ),
196
- radial-gradient(
197
- circle at bottom left,
198
- hsl(150deg 100% 84%),
199
- hsl(150deg 100% 84% / 0%)
200
- )},
201
- ) !default;
@@ -1,11 +0,0 @@
1
- @use 'sass:map';
2
- @use '../context' as *;
3
-
4
- // background gradients
5
- @include spread-map-into-utilities(
6
- $map: $gradient,
7
- $class: bg-gradient,
8
- $attribute: background,
9
- $prop: gradient,
10
- $zero-specificity: $zero-specificity-for-utilities
11
- );