From be140a90d84ae564aca024551d72190217840972 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Oct 2017 23:30:58 +0100 Subject: [PATCH] Update colors table --- docs/_data/variables.json | 179 ++++++++++++++++-- docs/_includes/elements/color-square.html | 2 + docs/documentation/components/message.html | 74 +------- docs/documentation/elements/notification.html | 4 +- docs/documentation/overview/colors.html | 144 +++----------- docs/documentation/overview/variables.html | 12 +- 6 files changed, 201 insertions(+), 214 deletions(-) create mode 100644 docs/_includes/elements/color-square.html diff --git a/docs/_data/variables.json b/docs/_data/variables.json index 71f3e35d..48995f89 100644 --- a/docs/_data/variables.json +++ b/docs/_data/variables.json @@ -1,22 +1,161 @@ { - "colors": [ - { - "name": "primary" - }, - { - "name": "link" - }, - { - "name": "info" - }, - { - "name": "success" - }, - { - "name": "warning" - }, - { - "name": "danger" - } - ] + "initial": { + "colors": [ + { + "id":"black", + "name":"Black", + "value": "hsl(0, 0%, 4%)" + }, + { + "id":"black-bis", + "name":"Black bis", + "value": "hsl(0, 0%, 7%)" + }, + { + "id":"black-ter", + "name":"Black ter", + "value": "hsl(0, 0%, 14%)" + }, + { + "id":"grey-darker", + "name":"Grey darker", + "value": "hsl(0, 0%, 21%)" + }, + { + "id":"grey-dark", + "name":"Grey dark", + "value": "hsl(0, 0%, 29%)" + }, + { + "id":"grey", + "name":"Grey", + "value": "hsl(0, 0%, 48%)" + }, + { + "id":"grey-light", + "name":"Grey light", + "value": "hsl(0, 0%, 71%)" + }, + { + "id":"grey-lighter", + "name":"Grey lighter", + "value": "hsl(0, 0%, 86%)" + }, + { + "id":"white-ter", + "name":"White ter", + "value": "hsl(0, 0%, 96%)" + }, + { + "id":"white-bis", + "name":"White bis", + "value": "hsl(0, 0%, 98%)" + }, + { + "id":"white", + "name":"White", + "value": "hsl(0, 0%, 100%)" + }, + { + "id":"orange", + "name":"Orange", + "value": "hsl(14, 100%, 53%)" + }, + { + "id":"yellow", + "name":"Yellow", + "value": "hsl(48, 100%, 67%)" + }, + { + "id":"green", + "name":"Green", + "value": "hsl(141, 71%, 48%)" + }, + { + "id":"turquoise", + "name":"Turquoise", + "value": "hsl(171, 100%, 41%)" + }, + { + "id":"cyan", + "name":"Cyan", + "value": "hsl(204, 86%, 53%)" + }, + { + "id":"blue", + "name":"Blue", + "value": "hsl(217, 71%, 53%)" + }, + { + "id":"purple", + "name":"Purple", + "value": "hsl(271, 100%, 71%)" + }, + { + "id":"red", + "name":"red", + "value": "hsl(348, 100%, 61%)" + } + ], + }, + "derived": { + "colors": [ + { + "id": "white", + "valueId": "white", + "invertId": "black" + }, + { + "id": "black", + "valueId": "black", + "invertId": "white" + }, + { + "id": "light", + "valueId": "white-ter", + "invertId": "grey-darker" + }, + { + "id": "dark", + "valueId": "grey-darker", + "invertId": "white-ter" + }, + { + "id": "primary", + "valueId": "turquoise", + "invertValue": "#fff" + }, + { + "id": "primary", + "valueId": "turquoise", + "invertValue": "#fff" + }, + { + "id": "link", + "valueId": "blue", + "invertValue": "#fff" + }, + { + "id": "info", + "valueId": "cyan", + "invertValue": "#fff" + }, + { + "id": "success", + "valueId": "green", + "invertValue": "#fff" + }, + { + "id": "warning", + "valueId": "yellow", + "invertValue": "rgba(0, 0, 0, 0.7)" + }, + { + "id": "danger", + "valueId": "red", + "invertValue": "#fff" + } + ] + }, + "justColors": ["primary", "link", "info", "success", "warning", "danger"] } \ No newline at end of file diff --git a/docs/_includes/elements/color-square.html b/docs/_includes/elements/color-square.html new file mode 100644 index 00000000..1e4a48ba --- /dev/null +++ b/docs/_includes/elements/color-square.html @@ -0,0 +1,2 @@ + +{{ include.value }} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index ddae61e3..215c0136 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -51,59 +51,17 @@ variables: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
+{% for color in site.data.variables.justColors %} +
-

Primary

- -
-
Black -Dark -Light -White -Primary -Info -Success -Warning -Danger - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
-

Info

- -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
-

Success

- -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
-

Warning

- -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
-

Danger! Learn more

+

{{ color | capitalize }}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+{% endfor %} {% endcapture %} {% capture message_small %} @@ -165,31 +123,13 @@ variables: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. -
-
-
+{% for color in site.data.variables.justColors %} +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+{% endfor %} {% endcapture %} {% include subnav-components.html %} diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index 380b52fe..e64321ec 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -22,8 +22,8 @@ variables: {% endcapture %} {% capture notification_colors %} -{% for color in site.data.variables.colors %} -
+{% for color in site.data.variables.justColors %} +
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html index 43ade4b7..a11db8e5 100644 --- a/docs/documentation/overview/colors.html +++ b/docs/documentation/overview/colors.html @@ -3,117 +3,16 @@ title: Colors layout: documentation doc-tab: overview doc-subtab: colors -initial_colors: -- name: "$black" - value: hsl(0, 0%, 4%) -- name: "$black-bis" - value: hsl(0, 0%, 7%) -- name: "$black-ter" - value: hsl(0, 0%, 14%) -- name: "$grey-darker" - value: hsl(0, 0%, 21%) -- name: "$grey-dark" - value: hsl(0, 0%, 29%) -- name: "$grey" - value: hsl(0, 0%, 48%) -- name: "$grey-light" - value: hsl(0, 0%, 71%) -- name: "$grey-lighter" - value: hsl(0, 0%, 86%) -- name: "$white-ter" - value: hsl(0, 0%, 96%) -- name: "$white-bis" - value: hsl(0, 0%, 98%) -- name: "$white" - value: hsl(0, 0%, 100%) -- name: "$orange" - value: hsl(14, 100%, 53%) -- name: "$yellow" - value: hsl(48, 100%, 67%) -- name: "$green" - value: hsl(141, 71%, 48%) -- name: "$turquoise" - value: hsl(171, 100%, 41%) -- name: "$blue" - value: hsl(217, 71%, 53%) -- name: "$purple" - value: hsl(271, 100%, 71%) -- name: "$red" - value: hsl(348, 100%, 61%) colors: - id: "white" - variable: "$white" - value: "$white" - value_hex: white - invert: "$black" - invert_hex: black - id: "black" - variable: "$black" - value: "$black" - value_hex: black - invert: "$white" - invert_hex: white - id: "light" - variable: "$light" - value: "$white-ter" - value_hex: white-ter - invert: "$light-invert" - invert_hex: black - id: "dark" - variable: "$dark" - value: "$grey-darker" - value_hex: grey-darker - invert: "$dark-invert" - invert_hex: white - id: "primary" - variable: "$primary" - value: "$turquoise" - value_hex: turquoise - invert: "$primary-invert" - invert_hex: white - id: "info" - variable: "$info" - value: "$blue" - value_hex: blue - invert: "$info-invert" - invert_hex: white - id: "success" - variable: "$success" - value: "$green" - value_hex: green - invert: "$success-invert" - invert_hex: white - id: "warning" - variable: "$warning" - value: "$yellow" - value_hex: yellow - invert: "$warning-invert" - invert_hex: black - id: "danger" - variable: "$danger" - value: "$red" - value_hex: red - invert: "$danger-invert" - invert_hex: white -shades: -- id: "black-bis" - value: "$black-bis" -- id: "black-ter" - value: "$black-ter" -- id: "grey-darker" - value: "$grey-darker" -- id: "grey-dark" - value: "$grey-dark" -- id: "grey" - value: "$grey" -- id: "grey-light" - value: "$grey-light" -- id: "grey-lighter" - value: "$grey-lighter" -- id: "white-ter" - value: "$white-ter" -- id: "white-bis" - value: "$white-bis" --- {% include subnav-overview.html %} @@ -140,39 +39,44 @@ shades: Color Variable Value - Actual value + Computed value Invert variable - Actual invert value + Computed invert value {% for color in page.colors %} - {% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %} + {% assign derivedColor = site.data.variables.derived.colors | where: "id", color.id | first %} + {% assign initialColor = site.data.variables.initial.colors | where: "id", derivedColor.valueId | first %} - {{ color.id | capitalize }} + {{ derivedColor.id | capitalize }} - {{ color.variable }} + ${{ derivedColor.id }} - {{ color.value }} + ${{ initialColor.id }} - {% include {{ includePath }} %} - - - {{ color.invert }} - - - {% if color.invert_hex == "black" %} - - rgba(0, 0, 0, 0.7) - {% else %} - - #fff - {% endif %} + {% include elements/color-square.html value=initialColor.value %} + {% if derivedColor.invertValue %} + + {{ derivedColor.invertValue }} + + + {% include elements/color-square.html value=derivedColor.invertValue %} + + {% elsif derivedColor.invertId %} + {% assign invertColor = site.data.variables.initial.colors | where: "id", derivedColor.invertId | first %} + + ${{ derivedColor.invertId }} + + + {% include elements/color-square.html value=invertColor.value %} + + {% endif %} {% endfor %} diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 49bec6f6..d33eb6e3 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -34,6 +34,8 @@ initial_colors: value: hsl(141, 71%, 48%) - name: $turquoise value: hsl(171, 100%, 41%) +- name: $cyan + value: hsl(204, 86%, 53%) - name: $blue value: hsl(217, 71%, 53%) - name: $purple @@ -95,7 +97,7 @@ derived_variables: - name: $primary value: $turquoise - name: $info - value: $blue + value: $cyan - name: $success value: $green - name: $warning @@ -157,9 +159,9 @@ derived_variables: - name: $pre-background value: $background - name: $link - value: $primary + value: $blue - name: $link-invert - value: $primary-invert + value: $blue-invert - name: $link-visited value: $purple - name: $link-hover @@ -169,7 +171,7 @@ derived_variables: - name: $link-focus value: $grey-darker - name: $link-focus-border - value: $primary + value: $blue - name: $link-active value: $grey-darker - name: $link-active-border @@ -187,7 +189,7 @@ derived_variables: - name: $size-large value: $size-4 - name: $colors - value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))' + value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))' - name: $shades value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)' - name: $sizes