mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 10:54:29 -07:00
Update colors table
This commit is contained in:
Jeremy Thomas
@@ -51,59 +51,17 @@ variables:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-primary">
|
||||
{% for color in site.data.variables.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>Primary</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body"><span class="tag is-black">Black</span>
|
||||
<a class="tag is-dark">Dark</a>
|
||||
<a class="tag is-light">Light</a>
|
||||
<a class="tag is-white">White</a>
|
||||
<a class="tag is-primary">Primary</a>
|
||||
<a class="tag is-info">Info</a>
|
||||
<a class="tag is-success">Success</a>
|
||||
<a class="tag is-warning">Warning</a>
|
||||
<a class="tag is-danger">Danger</a>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-info">
|
||||
<div class="message-header">
|
||||
<p>Info</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-success">
|
||||
<div class="message-header">
|
||||
<p>Success</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-warning">
|
||||
<div class="message-header">
|
||||
<p>Warning</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p><strong>Danger</strong>! <a>Learn more</a></p>
|
||||
<p>{{ color | capitalize }}</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_small %}
|
||||
@@ -165,31 +123,13 @@ variables:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-primary">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-info">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-success">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-warning">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message is-danger">
|
||||
{% for color in site.data.variables.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, 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.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
|
||||
@@ -22,8 +22,8 @@ variables:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_colors %}
|
||||
{% for color in site.data.variables.colors %}
|
||||
<div class="notification is-{{ color.name }}">
|
||||
{% for color in site.data.variables.justColors %}
|
||||
<div class="notification is-{{ color }}">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
|
||||
@@ -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:
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Actual value</th>
|
||||
<th>Computed value</th>
|
||||
<th>Invert variable</th>
|
||||
<th>Actual invert value</th>
|
||||
<th>Computed invert value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% 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 %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ color.id | capitalize }}</strong>
|
||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.variable }}</code>
|
||||
<code>${{ derivedColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.value }}</code>
|
||||
<code>${{ initialColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include {{ includePath }} %}
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.invert }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% if color.invert_hex == "black" %}
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
{% else %}
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
{% endif %}
|
||||
{% include elements/color-square.html value=initialColor.value %}
|
||||
</td>
|
||||
{% if derivedColor.invertValue %}
|
||||
<td>
|
||||
<code>{{ derivedColor.invertValue }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||
</td>
|
||||
{% elsif derivedColor.invertId %}
|
||||
{% assign invertColor = site.data.variables.initial.colors | where: "id", derivedColor.invertId | first %}
|
||||
<td>
|
||||
<code>${{ derivedColor.invertId }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=invertColor.value %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user