diff --git a/core/docs/ui/base/colors.mdx b/core/docs/ui/base/colors.mdx index ccb572c82..b6d1da39c 100644 --- a/core/docs/ui/base/colors.mdx +++ b/core/docs/ui/base/colors.mdx @@ -29,18 +29,18 @@ Choose one of the available colors from the basic color palette and make your de All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs. ## Gray palette diff --git a/core/docs/ui/components/avatars.mdx b/core/docs/ui/components/avatars.mdx index 5f2017d79..ca27311de 100644 --- a/core/docs/ui/components/avatars.mdx +++ b/core/docs/ui/components/avatars.mdx @@ -110,11 +110,11 @@ Besides pictures and initials, you can also use icons to make the avatars more u Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors. ```html example centered separated code -AB -CD -EF -GH -IJ +AB +CD +EF +GH +IJ ``` ## Avatar size diff --git a/core/docs/ui/components/badges.mdx b/core/docs/ui/components/badges.mdx index 847dfcf2d..b10e1e5c9 100644 --- a/core/docs/ui/components/badges.mdx +++ b/core/docs/ui/components/badges.mdx @@ -10,18 +10,18 @@ bootstrapLink: components/badge/ The default badges are square and come in the basic set of colors. ```html example centered separated -Blue -Azure -Indigo -Purple -Pink -Red -Orange -Yellow -Lime -Green -Teal -Cyan +Blue +Azure +Indigo +Purple +Pink +Red +Orange +Yellow +Lime +Green +Teal +Cyan ``` ## Headings @@ -59,18 +59,18 @@ The default badges are square and come in the basic set of colors. Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text. ```html example centered separated -1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 ``` ## Links @@ -78,18 +78,18 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners. Place the badge within an `` element if you want it to perform the function of a link and make it clickable. ```html example centered separated -Blue -Azure -Indigo -Purple -Pink -Red -Orange -Yellow -Lime -Green -Teal -Cyan +Blue +Azure +Indigo +Purple +Pink +Red +Orange +Yellow +Lime +Green +Teal +Cyan ``` ## Button with badge diff --git a/core/docs/ui/components/progress.mdx b/core/docs/ui/components/progress.mdx index cb9f6eda3..082163f83 100644 --- a/core/docs/ui/components/progress.mdx +++ b/core/docs/ui/components/progress.mdx @@ -193,7 +193,7 @@ By using a progress bar component as a background element, designers can create ```html
-
+
Poland
65%
@@ -205,35 +205,35 @@ Thanks to this you can create a nice looking statistics section: ```html example vertical separated centered columns={1} plugins="flags" height="20rem"
-
+
Poland
65%
-
+
Germany
35%
-
+
United Stated
28%
-
+
United Kingdom
20%
-
+
France
15%
diff --git a/core/docs/ui/components/timelines.mdx b/core/docs/ui/components/timelines.mdx index 04c21abd2..58968aac5 100644 --- a/core/docs/ui/components/timelines.mdx +++ b/core/docs/ui/components/timelines.mdx @@ -11,7 +11,7 @@ The available timeline design is composed of many components that will help you ```html example height="400px" scrollable background="base"
  • -
    +
  • -
    +
  • -
    +
    ...
    @@ -273,7 +273,7 @@ The available timeline design is composed of many components that will help you
  • -
    +
    ...
    @@ -357,7 +357,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca ```html example height="400px" scrollable background="base"
    • -
      +
    • -
      +
    • -
      +
      ...
      @@ -619,7 +619,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
    • -
      +
      ...
      diff --git a/core/docs/ui/utilities/margins.mdx b/core/docs/ui/utilities/margins.mdx index 90fea8fe7..903ab401c 100644 --- a/core/docs/ui/utilities/margins.mdx +++ b/core/docs/ui/utilities/margins.mdx @@ -30,17 +30,17 @@ Use the `.m-*` utilities to control the margin of an element. Margin utilities a ```html example hide-code centered separated vertical
      -
      +
      .m-0
      -
      +
      .m-4
      -
      +
      .m-8
      @@ -56,17 +56,17 @@ Start margins control the spacing to the left of an element, helping to create c ```html example hide-code centered separated vertical
      -
      +
      .ms-0
      -
      +
      .ms-4
      -
      +
      .ms-8
      @@ -82,17 +82,17 @@ End margins control the spacing on the right side of an element. These utilities ```html example hide-code centered separated vertical
      -
      +
      .me-0
      -
      +
      .me-4
      -
      +
      .me-8
      @@ -108,17 +108,17 @@ Top margins define the spacing above an element. This is useful for separating s ```html example hide-code centered separated vertical
      -
      +
      .mt-0
      -
      +
      .mt-4
      -
      +
      .mt-8
      @@ -134,17 +134,17 @@ Bottom margins control the spacing below an element, helping to create consisten ```html example hide-code centered separated vertical
      -
      +
      .mb-0
      -
      +
      .mb-4
      -
      +
      .mb-8
      @@ -160,17 +160,17 @@ Use the `mx-*` utilities to control the horizontal margin of an element. Horizon ```html example hide-code centered separated vertical
      -
      +
      .mx-0
      -
      +
      .mx-4
      -
      +
      .mx-8
      @@ -187,17 +187,17 @@ Use the `my-*` utilities to control the vertical margin of an element. Vertical ```html example hide-code centered separated vertical
      -
      +
      .my-0
      -
      +
      .my-4
      -
      +
      .my-8
      @@ -226,7 +226,7 @@ Use the `.gap-*` utilities to control the space between elements in a grid layou ``` ```html example -
      +
      Grid item 1
      Grid item 2
      Grid item 3
      diff --git a/core/scss/_props.scss b/core/scss/_props.scss index d0cc83ed3..d4ca4d3d0 100644 --- a/core/scss/_props.scss +++ b/core/scss/_props.scss @@ -9,17 +9,10 @@ --#{$prefix}font-comic: #{$font-family-comic}; /** Gray colors */ - --#{$prefix}gray-50: #{$gray-50}; - --#{$prefix}gray-100: #{$gray-100}; - --#{$prefix}gray-200: #{$gray-200}; - --#{$prefix}gray-300: #{$gray-300}; - --#{$prefix}gray-400: #{$gray-400}; - --#{$prefix}gray-500: #{$gray-500}; - --#{$prefix}gray-600: #{$gray-600}; - --#{$prefix}gray-700: #{$gray-700}; - --#{$prefix}gray-800: #{$gray-800}; - --#{$prefix}gray-900: #{$gray-900}; - --#{$prefix}gray-950: #{$gray-950}; + @each $name, $color in $gray-colors { + --#{$prefix}#{$name}: #{$color}; + --#{$prefix}#{$name}-fg: #{$color}; + } --#{$prefix}white: #{$white}; --#{$prefix}black: #{$black}; @@ -32,14 +25,10 @@ /** Theme colors */ @each $name, $color in map-merge($theme-colors, $social-colors) { --#{$prefix}#{$name}: #{$color}; - --#{$prefix}#{$name}-rgb: #{to-rgb($color)}; --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))}; - --#{$prefix}#{$name}-darken: #{theme-color-darker($color)}; - --#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%); - --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)}; - --#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent); - --#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent); - --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))}; + --#{$prefix}#{$name}-darker: #{theme-color-darker($color)}; + --#{$prefix}#{$name}-lighter: #{theme-color-lighter($color)}; + --#{$prefix}#{$name}-lightest: #{theme-color-lightest($color)}; } /** Social colors */ diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 613f34af6..090c517a7 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -278,8 +278,25 @@ $gray-colors: ( gray-700: $gray-700, gray-800: $gray-800, gray-900: $gray-900, + gray-950: $gray-950, ) !default; +$foreground-colors: ( + white: var(--#{$prefix}dark), + gray-50: var(--#{$prefix}dark), + gray-100: var(--#{$prefix}dark), + gray-200: var(--#{$prefix}dark), + gray-300: var(--#{$prefix}dark), + gray-400: var(--#{$prefix}dark), + gray-500: var(--#{$prefix}dark), + gray-600: var(--#{$prefix}light), + gray-700: var(--#{$prefix}light), + gray-800: var(--#{$prefix}light), + gray-900: var(--#{$prefix}light), + gray-950: var(--#{$prefix}light), + black: var(--#{$prefix}light), +); + $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ())); // BACKDROPS diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss index 23938ce19..e105ce4dc 100644 --- a/core/scss/layout/_root.scss +++ b/core/scss/layout/_root.scss @@ -25,7 +25,7 @@ --#{$prefix}text-inverted: var(--#{$prefix}gray-100); - --#{$prefix}body-color: var(--#{$prefix}gray-700); + --#{$prefix}body-color: var(--#{$prefix}gray-800); --#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary); --#{$prefix}link-color: var(--#{$prefix}primary); diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss index 03749ae87..008456895 100644 --- a/core/scss/mixins/_functions.scss +++ b/core/scss/mixins/_functions.scss @@ -1,9 +1,13 @@ -@function theme-color-lighter($color, $background: #fff) { - @return mix($color, $background, 10%); +@function theme-color-lightest($color) { + @return color-mix(in oklab, $color 8%, transparent); +} + +@function theme-color-lighter($color) { + @return color-mix(in oklab, $color 24%, transparent); } @function theme-color-darker($color) { - @return shade-color($color, 10%); + @return color-mix(in oklab, #{$color}, #000 20%) } // diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss index 94cd1d103..60b509791 100644 --- a/core/scss/utils/_colors.scss +++ b/core/scss/utils/_colors.scss @@ -4,9 +4,18 @@ background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important; } - .bg-#{"" + $color}-lt { + .bg-#{"" + $color}-darker { + background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-darker) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important; + } + + .bg-#{"" + $color}-lightest { color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important; - background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important; + background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lightest) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important; + } + + .bg-#{"" + $color}-lighter { + color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important; + background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lighter) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important; } .border-#{"" + $color} { @@ -79,6 +88,12 @@ } } +@each $color, $value in $foreground-colors { + .text-#{"" + $color}-fg { + color: $value !important; + } +} + .bg-inverted { --#{$prefix}bg-opacity: 1; background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important; diff --git a/preview/eleventy.config.mjs b/preview/eleventy.config.mjs index da5e17c4c..b66cf07b7 100644 --- a/preview/eleventy.config.mjs +++ b/preview/eleventy.config.mjs @@ -135,68 +135,125 @@ export default function (eleventyConfig) { buy_link: "https://r.tabler.io/buy-illustrations" }, - colors: { - "blue": { + colors: [ + { "class": "blue", "hex": "#066fd1", "title": "Blue" }, - "azure": { + { "class": "azure", "hex": "#45aaf2", "title": "Azure" }, - "indigo": { + { "class": "indigo", "hex": "#6574cd", "title": "Indigo" }, - "purple": { + { "class": "purple", "hex": "#a55eea", "title": "Purple" }, - "pink": { + { "class": "pink", "hex": "#f66d9b", "title": "Pink" }, - "red": { + { "class": "red", "hex": "#fa4654", "title": "Red" }, - "orange": { + { "class": "orange", "hex": "#fd9644", "title": "Orange" }, - "yellow": { + { "class": "yellow", "hex": "#f1c40f", "title": "Yellow" }, - "lime": { + { "class": "lime", "hex": "#7bd235", "title": "Lime" }, - "green": { + { "class": "green", "hex": "#5eba00", "title": "Green" }, - "teal": { + { "class": "teal", "hex": "#2bcbba", "title": "Teal" }, - "cyan": { + { "class": "cyan", "hex": "#17a2b8", "title": "Cyan" } - }, + ], + grayColors: [ + { + "class": "gray-50", + "value": "var(--tb-gray-50)", + "title": "Gray 50" + }, + { + "class": "gray-100", + "value": "var(--tb-gray-100)", + "title": "Gray 100" + }, + { + "class": "gray-200", + "value": "var(--tb-gray-200)", + "title": "Gray 200" + }, + { + "class": "gray-300", + "value": "var(--tb-gray-300)", + "title": "Gray 300" + }, + { + "class": "gray-400", + "value": "var(--tb-gray-400)", + "title": "Gray 400" + }, + { + "class": "gray-500", + "value": "var(--tb-gray-500)", + "title": "Gray 500" + }, + { + "class": "gray-600", + "value": "var(--tb-gray-600)", + "title": "Gray 600" + }, + { + "class": "gray-700", + "value": "var(--tb-gray-700)", + "title": "Gray 700" + }, + { + "class": "gray-800", + "value": "var(--tb-gray-800)", + "title": "Gray 800" + }, + { + "class": "gray-900", + "value": "var(--tb-gray-900)", + "title": "Gray 900" + }, + { + "class": "gray-950", + "value": "var(--tb-gray-950)", + "title": "Gray 950" + } + ], skinColors: { "rose": { "hex": "#FFCB9D", diff --git a/preview/pages/_data/colors.json b/preview/pages/_data/colors.json index 1efee367c..5b0a1f2f2 100644 --- a/preview/pages/_data/colors.json +++ b/preview/pages/_data/colors.json @@ -105,51 +105,51 @@ ], "light": [ { - "name": "blue-lt", + "name": "blue-lightest", "value": "#e9f0f9" }, { - "name": "azure-lt", + "name": "azure-lightest", "value": "#ecf5fc" }, { - "name": "indigo-lt", + "name": "indigo-lightest", "value": "#eceffd" }, { - "name": "purple-lt", + "name": "purple-lightest", "value": "#f7ecfa" }, { - "name": "pink-lt", + "name": "pink-lightest", "value": "#fbebf0" }, { - "name": "red-lt", + "name": "red-lightest", "value": "#fbebeb" }, { - "name": "orange-lt", + "name": "orange-lightest", "value": "#fef0e6" }, { - "name": "yellow-lt", + "name": "yellow-lightest", "value": "#fef5e6" }, { - "name": "lime-lt", + "name": "lime-lightest", "value": "#f1f8e8" }, { - "name": "green-lt", + "name": "green-lightest", "value": "#eaf7ec" }, { - "name": "teal-lt", + "name": "teal-lightest", "value": "#e7f6f2" }, { - "name": "cyan-lt", + "name": "cyan-lightest", "value": "#e8f6f8" } ], diff --git a/preview/pages/_includes/cards/project-summary.html b/preview/pages/_includes/cards/project-summary.html index c8dc93cca..aafd4ed42 100644 --- a/preview/pages/_includes/cards/project-summary.html +++ b/preview/pages/_includes/cards/project-summary.html @@ -4,7 +4,7 @@

      {{ include.title | default: "New website" }}

      Due to: {{ include.date | default: '28 Aug 2019' }}

      - {{ include.stage | default: 'Waiting' }} + {{ include.stage | default: 'Waiting' }}

      {% include "ui/avatar-list.html" stacked=true offset=include.avatar-offset limit=include.avatar-limit %} diff --git a/preview/pages/_includes/cards/store-list.html b/preview/pages/_includes/cards/store-list.html index 38416e66f..79ca7b213 100644 --- a/preview/pages/_includes/cards/store-list.html +++ b/preview/pages/_includes/cards/store-list.html @@ -8,7 +8,7 @@ {% assign mod = forloop.index | modulo: 2 %} {% if mod == 0 %} - New + New {% endif %} {{ forloop.index | random_number: 4, 100 }} reviews diff --git a/preview/pages/_includes/cards/tables/progressbg.html b/preview/pages/_includes/cards/tables/progressbg.html index 24b3b5923..d6d468660 100644 --- a/preview/pages/_includes/cards/tables/progressbg.html +++ b/preview/pages/_includes/cards/tables/progressbg.html @@ -14,7 +14,7 @@
      - {% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %} + {% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lightest" %}
      {{ url.uri }}
      diff --git a/preview/pages/_includes/cards/timeline.html b/preview/pages/_includes/cards/timeline.html index efaa895e8..4ffc68736 100644 --- a/preview/pages/_includes/cards/timeline.html +++ b/preview/pages/_includes/cards/timeline.html @@ -1,6 +1,6 @@
      • -
        {% include "ui/icon.html" icon="brand-x" %}
        +
        {% include "ui/icon.html" icon="brand-x" %}
        10 hrs ago
        @@ -30,7 +30,7 @@
      • -
        {% include "ui/icon.html" icon="brand-facebook" %}
        +
        {% include "ui/icon.html" icon="brand-facebook" %}
        1 day ago
        diff --git a/preview/pages/_includes/example/colors-table.html b/preview/pages/_includes/example/colors-table.html index 52b704b6e..4bd31d0f8 100644 --- a/preview/pages/_includes/example/colors-table.html +++ b/preview/pages/_includes/example/colors-table.html @@ -6,11 +6,11 @@ {% for color in colors %}
        -
        {{ color[0] | capitalize | first_letter }}
        +
        {{ color.class | capitalize | first_letter }}
        - {{ color[1].title }}
        - bg-{{ color[0] }}{% if light %}-lt{% endif %} + {{ color.title }}
        + bg-{{ color.class }}{% if light %}-lt{% endif %}
        {% endfor %} diff --git a/preview/pages/_includes/parts/form/input-color.html b/preview/pages/_includes/parts/form/input-color.html index 3f0e837e4..5e7105089 100644 --- a/preview/pages/_includes/parts/form/input-color.html +++ b/preview/pages/_includes/parts/form/input-color.html @@ -4,7 +4,7 @@ {% endunless %} {% for color in site.colors limit: 10 %} -{% assign colors = colors | push: color[0] %} +{% assign colors = colors | push: color.class %} {% endfor %}
        diff --git a/preview/pages/_includes/settings.html b/preview/pages/_includes/settings.html index a81547dc0..e14d38853 100644 --- a/preview/pages/_includes/settings.html +++ b/preview/pages/_includes/settings.html @@ -29,8 +29,8 @@ {% for color in site.colors %}
        {% endfor %} diff --git a/preview/pages/_includes/ui/chart-heatmap.html b/preview/pages/_includes/ui/chart-heatmap.html index 06839e0ea..438e49a4e 100644 --- a/preview/pages/_includes/ui/chart-heatmap.html +++ b/preview/pages/_includes/ui/chart-heatmap.html @@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () { } }, {% else %} - colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}], + colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color.class }}"), {% endfor %}{% endif %}], {% endif %} series: [ {% for i in site.monthsShort limit: 12 %} diff --git a/preview/pages/_includes/ui/colorpicker.html b/preview/pages/_includes/ui/colorpicker.html index 4d5ca5fe4..bafd7817e 100644 --- a/preview/pages/_includes/ui/colorpicker.html +++ b/preview/pages/_includes/ui/colorpicker.html @@ -19,7 +19,7 @@ {% if include['swatches-only'] %}swatchesOnly: true,{% endif %} swatches: [ {% for color in site.colors %} - "{{ color[1].hex }}", + "{{ color.hex }}", {% endfor %} ], })) diff --git a/preview/pages/_includes/ui/select.html b/preview/pages/_includes/ui/select.html index f09070e53..b3644bbe5 100644 --- a/preview/pages/_includes/ui/select.html +++ b/preview/pages/_includes/ui/select.html @@ -41,7 +41,7 @@ {% elsif include.indicator == 'label' %} {% capture indicator-html %} {% assign label = option[1].label %} - {{ label }} + {{ label }} {% endcapture %} {% endif %} diff --git a/preview/pages/badges.html b/preview/pages/badges.html index 25070859e..abf8b4e2f 100644 --- a/preview/pages/badges.html +++ b/preview/pages/badges.html @@ -6,7 +6,7 @@ layout: default permalink: badges.html --- -{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color[0] +{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color.class %} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
        @@ -105,7 +105,7 @@ permalink: badges.html

        Light badges

        {% for color in colors %} - {{ color | uc_first }} + {{ color | uc_first }} {% endfor %}
        diff --git a/preview/pages/cards.html b/preview/pages/cards.html index 2e9fbb533..6e02a61d5 100644 --- a/preview/pages/cards.html +++ b/preview/pages/cards.html @@ -100,7 +100,7 @@ permalink: cards.html
        -
        +

        Card with primary light background

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

        diff --git a/preview/pages/colorpicker.html b/preview/pages/colorpicker.html index 75eec53f6..3b3a39e32 100644 --- a/preview/pages/colorpicker.html +++ b/preview/pages/colorpicker.html @@ -13,7 +13,7 @@ permalink: colorpicker.html
        {% for color in site.colors %}
        -
        {% include "ui/colorpicker.html" value=color[1].hex id=forloop.index format="hex" %}
        +
        {% include "ui/colorpicker.html" value=color.hex id=forloop.index format="hex" %}
        {% endfor %}
        diff --git a/preview/pages/colors.html b/preview/pages/colors.html index ed077613a..8b2a63013 100644 --- a/preview/pages/colors.html +++ b/preview/pages/colors.html @@ -8,11 +8,70 @@ permalink: colors.html {% assign colors = '' | split: '' %} {% for color in site.colors %} -{% assign colors = colors | push: color[0] %} +{% assign colors = colors | push: color.class %} {% endfor %} {% assign colors = colors | push: 'dark' %}
        +
        +
        +
        +
        +
        +
        + {% for color in site.colors %} +
        +
        {{ color.class }}
        +
        + {% endfor %} +
        +
        +
        +
        + {% for color in site.colors %} +
        +
        {{ color.class }}
        +
        + {% endfor %} +
        +
        +
        +
        + {% for color in site.colors %} +
        +
        {{ color.class }}
        +
        + {% endfor %} +
        +
        +
        +
        + {% for color in site.colors %} +
        +
        {{ color.class }}
        +
        + {% endfor %} +
        +
        +
        +
        +
        +
        white
        +
        + {% for color in site.grayColors %} +
        +
        {{ color.class }}
        +
        + {% endfor %} +
        +
        black
        +
        +
        +
        +
        +
        +
        +
        @@ -29,7 +88,7 @@ permalink: colors.html {% for color in colors %} -
        {{ color | slice: 0, 2 }}
        +
        {{ color | slice: 0, 2 }}
        {% endfor %} @@ -61,7 +120,7 @@ permalink: colors.html {% for color in colors %} {% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} -
        {{ c | slice: 0, 2 }}
        +
        {{ c | slice: 0, 2 }}
        {% endfor %} diff --git a/preview/pages/illustrations.html b/preview/pages/illustrations.html index b15101f21..c44bfc304 100644 --- a/preview/pages/illustrations.html +++ b/preview/pages/illustrations.html @@ -48,8 +48,8 @@ permalink: illustrations.html {% for color in site.colors %}
        {% endfor %} @@ -60,8 +60,8 @@ permalink: illustrations.html {% for color in site.skinColors %}
        {% endfor %} @@ -142,8 +142,8 @@ permalink: illustrations.html {% capture_script %}