mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update colors table
This commit is contained in:
Jeremy Thomas
parent
f83c9bf768
commit
be140a90d8
@ -1,22 +1,161 @@
|
||||
{
|
||||
"initial": {
|
||||
"colors": [
|
||||
{
|
||||
"name": "primary"
|
||||
"id":"black",
|
||||
"name":"Black",
|
||||
"value": "hsl(0, 0%, 4%)"
|
||||
},
|
||||
{
|
||||
"name": "link"
|
||||
"id":"black-bis",
|
||||
"name":"Black bis",
|
||||
"value": "hsl(0, 0%, 7%)"
|
||||
},
|
||||
{
|
||||
"name": "info"
|
||||
"id":"black-ter",
|
||||
"name":"Black ter",
|
||||
"value": "hsl(0, 0%, 14%)"
|
||||
},
|
||||
{
|
||||
"name": "success"
|
||||
"id":"grey-darker",
|
||||
"name":"Grey darker",
|
||||
"value": "hsl(0, 0%, 21%)"
|
||||
},
|
||||
{
|
||||
"name": "warning"
|
||||
"id":"grey-dark",
|
||||
"name":"Grey dark",
|
||||
"value": "hsl(0, 0%, 29%)"
|
||||
},
|
||||
{
|
||||
"name": "danger"
|
||||
"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"]
|
||||
}
|
||||
2
docs/_includes/elements/color-square.html
Normal file
2
docs/_includes/elements/color-square.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: {{ include.value }};"></span>
|
||||
<code>{{ include.value }}</code>
|
||||
@ -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 }} %}
|
||||
{% include elements/color-square.html value=initialColor.value %}
|
||||
</td>
|
||||
{% if derivedColor.invertValue %}
|
||||
<td>
|
||||
<code>{{ derivedColor.invertValue }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ color.invert }}</code>
|
||||
{% 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>
|
||||
{% 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>
|
||||
{% include elements/color-square.html value=invertColor.value %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</td>
|
||||
</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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user