@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.
- package/LICENSE +1 -1
- package/README.md +5 -5
- package/dist/base.css +1 -1
- package/dist/components/vv-accordion-group.css +1 -1
- package/dist/components/vv-accordion.css +1 -1
- package/dist/components/vv-alert-group.css +1 -1
- package/dist/components/vv-alert.css +1 -1
- package/dist/components/vv-avatar-group.css +1 -1
- package/dist/components/vv-avatar.css +1 -1
- package/dist/components/vv-badge.css +1 -1
- package/dist/components/vv-breadcrumb.css +1 -1
- package/dist/components/vv-button-group.css +1 -1
- package/dist/components/vv-button.css +1 -1
- package/dist/components/vv-card.css +1 -1
- package/dist/components/vv-checkbox-group.css +1 -1
- package/dist/components/vv-checkbox.css +1 -1
- package/dist/components/vv-dialog.css +1 -1
- package/dist/components/vv-dropdown-action.css +1 -1
- package/dist/components/vv-dropdown-optgroup.css +1 -1
- package/dist/components/vv-dropdown-option.css +1 -1
- package/dist/components/vv-dropdown.css +1 -1
- package/dist/components/vv-input-file.css +1 -0
- package/dist/components/vv-input-text.css +1 -1
- package/dist/components/vv-nav.css +1 -1
- package/dist/components/vv-progress.css +1 -1
- package/dist/components/vv-radio-group.css +1 -1
- package/dist/components/vv-radio.css +1 -1
- package/dist/components/vv-select.css +1 -1
- package/dist/components/vv-skeleton.css +1 -1
- package/dist/components/vv-tab.css +1 -1
- package/dist/components/vv-table.css +1 -1
- package/dist/components/vv-text.css +1 -1
- package/dist/components/vv-textarea.css +1 -1
- package/dist/components/vv-tooltip.css +1 -1
- package/dist/components.css +1 -1
- package/dist/export.css +1 -1
- package/dist/props/background.css +1 -1
- package/dist/props/colors.css +1 -1
- package/dist/props/filters.css +1 -1
- package/dist/props/input.css +1 -1
- package/dist/props/layout.css +1 -1
- package/dist/props/spacing.css +1 -1
- package/dist/props/transitions.css +1 -1
- package/dist/props/typography.css +1 -1
- package/dist/props.css +1 -1
- package/dist/reset.css +1 -1
- package/dist/themes/dark/components.css +1 -1
- package/dist/themes/dark/props.css +1 -1
- package/dist/themes/dark/volver.css +1 -1
- package/dist/utilities/backgrounds.css +1 -1
- package/dist/utilities/colors.css +1 -1
- package/dist/utilities/effects.css +1 -1
- package/dist/utilities/filters.css +1 -1
- package/dist/utilities/interactivity.css +1 -1
- package/dist/utilities/layout.css +1 -1
- package/dist/utilities/sizing.css +1 -1
- package/dist/utilities/transforms.css +1 -1
- package/dist/utilities/typography.css +1 -1
- package/dist/utilities.css +1 -1
- package/dist/volver.css +1 -1
- package/package.json +44 -44
- package/src/_config.scss +10 -9
- package/src/_preflight.scss +35 -1
- package/src/components/index.scss +1 -0
- package/src/components/vv-button-group.scss +6 -6
- package/src/components/vv-button.scss +1 -12
- package/src/components/vv-input-file.scss +93 -0
- package/src/components/vv-input-text.scss +54 -11
- package/src/components/vv-select.scss +53 -10
- package/src/components/vv-textarea.scss +53 -10
- package/src/components/vv-tooltip.scss +1 -1
- package/src/export.scss +33 -59
- package/src/props/background.scss +1 -0
- package/src/props/breakpoints.scss +5 -4
- package/src/props/index.scss +0 -1
- package/src/props/spacing.scss +2 -2
- package/src/props/transitions.scss +19 -0
- package/src/props/typography.scss +3 -2
- package/src/settings/_background.scss +228 -0
- package/src/settings/_colors.scss +16 -53
- package/src/settings/_effects.scss +0 -18
- package/src/settings/_filters.scss +15 -0
- package/src/settings/_index.scss +1 -1
- package/src/settings/_input.scss +4 -3
- package/src/settings/_interactivity.scss +14 -0
- package/src/settings/_layout.scss +1 -0
- package/src/settings/_transitions.scss +1 -0
- package/src/settings/_typography.scss +9 -1
- package/src/settings/components/_vv-accordion-group.scss +2 -2
- package/src/settings/components/_vv-accordion.scss +6 -5
- package/src/settings/components/_vv-alert-group.scss +14 -4
- package/src/settings/components/_vv-alert.scss +9 -9
- package/src/settings/components/_vv-avatar-group.scss +1 -0
- package/src/settings/components/_vv-avatar.scss +54 -52
- package/src/settings/components/_vv-badge.scss +67 -27
- package/src/settings/components/_vv-breadcrumb.scss +1 -0
- package/src/settings/components/_vv-button.scss +11 -5
- package/src/settings/components/_vv-card.scss +2 -0
- package/src/settings/components/_vv-checkbox-group.scss +3 -0
- package/src/settings/components/_vv-checkbox.scss +1 -0
- package/src/settings/components/_vv-dialog.scss +4 -0
- package/src/settings/components/_vv-dropdown-option.scss +2 -2
- package/src/settings/components/_vv-dropdown.scss +93 -7
- package/src/settings/components/_vv-input-file.scss +503 -0
- package/src/settings/components/_vv-input-text.scss +5 -1
- package/src/settings/components/_vv-nav.scss +10 -9
- package/src/settings/components/_vv-progress.scss +2 -0
- package/src/settings/components/_vv-radio.scss +3 -2
- package/src/settings/components/_vv-select.scss +6 -1
- package/src/settings/components/_vv-table.scss +19 -1
- package/src/settings/components/_vv-text.scss +1 -0
- package/src/settings/components/_vv-textarea.scss +6 -1
- package/src/themes/dark/components/_vv-avatar.scss +22 -0
- package/src/themes/dark/components/_vv-badge.scss +22 -0
- package/src/themes/dark/components/_vv-dropdown-action.scss +22 -0
- package/src/themes/dark/components/_vv-dropdown-option.scss +22 -0
- package/src/themes/dark/components/_vv-nav.scss +22 -0
- package/src/themes/dark/components/index.scss +6 -1
- package/src/themes/dark/settings/_background.scss +2 -0
- package/src/themes/dark/settings/_colors.scss +4 -38
- package/src/themes/dark/settings/_index.scss +6 -1
- package/src/themes/dark/settings/components/_vv-alert.scss +1 -1
- package/src/themes/dark/settings/components/_vv-avatar.scss +27 -0
- package/src/themes/dark/settings/components/_vv-badge.scss +50 -0
- package/src/themes/dark/settings/components/_vv-button.scss +13 -8
- package/src/themes/dark/settings/components/_vv-dropdown-action.scss +3 -0
- package/src/themes/dark/settings/components/_vv-dropdown-option.scss +19 -0
- package/src/themes/dark/settings/components/_vv-nav.scss +15 -0
- package/src/tools/_breakpoints.scss +13 -4
- package/src/tools/_functions.scss +26 -13
- package/src/tools/_mixins.scss +97 -26
- package/src/utilities/backgrounds.scss +14 -4
- package/src/utilities/flexbox.scss +6 -1
- package/src/utilities/index.scss +0 -1
- package/src/utilities/interactivity.scss +17 -1
- package/src/utilities/layout.scss +9 -3
- package/src/utilities/sizing.scss +10 -2
- package/src/utilities/spacing.scss +10 -1
- package/src/utilities/transforms.scss +2 -2
- package/src/utilities/typography.scss +21 -0
- package/dist/props/gradient.css +0 -1
- package/dist/utilities/gradients.css +0 -1
- package/src/props/gradient.scss +0 -7
- package/src/settings/_gradient.scss +0 -201
- 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
|
package/dist/props/gradient.css
DELETED
|
@@ -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)))}
|
package/src/props/gradient.scss
DELETED
|
@@ -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;
|