diff --git a/core/scss/_utilities.scss b/core/scss/_utilities.scss index 6eb9b1ad2..d28281a1c 100644 --- a/core/scss/_utilities.scss +++ b/core/scss/_utilities.scss @@ -102,5 +102,34 @@ $utilities: ( '' )} repeat center/16px 16px, ) - ) + ), + "bg-gradient": ( + property: background, + class: bg-gradient, + values: ( + null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat, + ), + ), + "bg-gradient-direction": ( + property: --#{$prefix}gradient-direction, + class: bg-gradient, + values: ( + to-t: to top, + to-te: to top right, + to-e: to right, + to-be: to bottom right, + to-b: to bottom, + to-bs: to bottom left, + to-s: to left, + to-ts: to top left, + ), + ), + "table-layout": ( + property: table-layout, + class: table, + values: ( + auto: auto, + fixed: fixed, + ), + ), ) !default; diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss index b653d51cd..5c065b79f 100644 --- a/core/scss/utils/_colors.scss +++ b/core/scss/utils/_colors.scss @@ -16,6 +16,19 @@ --#{$prefix}border-opacity: 1; border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important; } + + .bg-gradient-from-#{"" + $color} { + --#{$prefix}gradient-from: var(--#{$prefix}#{$color}); + } + + .bg-gradient-to-#{"" + $color} { + --#{$prefix}gradient-to: var(--#{$prefix}#{$color}); + } + + .bg-gradient-via-#{"" + $color} { + --#{$prefix}gradient-via: var(--#{$prefix}#{$color}); + --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent); + } } @each $color, $value in $theme-colors { diff --git a/preview/pages/colors.html b/preview/pages/colors.html index c20bd9bc6..ed077613a 100644 --- a/preview/pages/colors.html +++ b/preview/pages/colors.html @@ -11,59 +11,196 @@ permalink: colors.html {% assign colors = colors | push: color[0] %} {% endfor %} {% assign colors = colors | push: 'dark' %} -{% assign colors = colors | push: 'muted' %} -
-
-
- - - {% for color in colors %} - - {% endfor %} - - - {% for color in colors %} - - {% endfor %} - - - {% for color in colors %} - - {% endfor %} - - - {% for color in colors %} - - {% endfor %} - - - {% for color in colors %} - - {% endfor %} - - - {% for color in colors %} - - {% endfor %} - -
-
{{ color | slice: 0, 2 }} +
+
+
+
+
+ + + {% for color in colors %} + + {% endfor %} + + + {% for color in colors %} + + {% endfor %} + + + {% for color in colors %} + + {% endfor %} + + + {% for color in colors %} + + {% endfor %} + + + {% for color in colors %} + + {% endfor %} + + + {% for color in colors %} + + {% endfor %} + +
+
{{ color | slice: 0, 2 }} +
+
+
{{ color | slice: 0, 2 }}
+
+
{{ color | slice: 0, 2 }} +
+
+
{{ color | slice: 0, 2 }} +
+
+ {% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} +
{{ c | slice: 0, 2 }}
+
+ {% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} +
{{ c | slice: 0, 2 }}
+
+
+
+
+
+
+
+ {% assign colors = colors | push: 'inverted' %} + {% assign colors = colors | push: 'white' %} + {% assign colors = colors | push: 'transparent' %} +
+
+
+
+

+ Gradient +

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% for color in colors %} +
+
+ {% endfor %} +
+
+
+
+ {% for color in colors %} +
+
+ {% endfor %} +
+
-
-
{{ color | slice: 0, 2 }}
-
-
{{ color | slice: 0, 2 }}
-
-
{{ color | slice: 0, 2 }}
-
- {% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} -
{{ c | slice: 0, 2 }}
-
- {% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} -
{{ c | slice: 0, 2 }}
-
-
+
+
+
+ + \ No newline at end of file