From: Jeremy Thomas Date: Mon, 9 Oct 2017 22:30:58 +0000 (+0100) Subject: Update colors table X-Git-Tag: 0.6.0~30 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=be140a90d84ae564aca024551d72190217840972;p=thirdparty%2Fbulma.git Update colors table --- diff --git a/docs/_data/variables.json b/docs/_data/variables.json index 71f3e35da..48995f898 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 000000000..1e4a48ba3 --- /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 ddae61e34..215c01364 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 380b52fe7..e64321ec4 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 43ade4b7a..a11db8e55 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 49bec6f6b..d33eb6e33 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