From: Jeremy Thomas Date: Sat, 29 Jul 2017 16:58:13 +0000 (+0100) Subject: Add colors page X-Git-Tag: 0.5.0~7 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8b36d5ad3d153de22e56686ad09418059f04d8b4;p=thirdparty%2Fbulma.git Add colors page --- diff --git a/docs/_includes/color/black-bis.html b/docs/_includes/color/black-bis.html index c0031bdf7..cd5ce8197 100644 --- a/docs/_includes/color/black-bis.html +++ b/docs/_includes/color/black-bis.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 7%) +hsl(0, 0%, 7%) diff --git a/docs/_includes/color/black-ter.html b/docs/_includes/color/black-ter.html index 9a393cb52..b17714370 100644 --- a/docs/_includes/color/black-ter.html +++ b/docs/_includes/color/black-ter.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 14%) +hsl(0, 0%, 14%) diff --git a/docs/_includes/color/black.html b/docs/_includes/color/black.html index 8061f018e..09588cb0a 100644 --- a/docs/_includes/color/black.html +++ b/docs/_includes/color/black.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 4%) +hsl(0, 0%, 4%) diff --git a/docs/_includes/color/blue.html b/docs/_includes/color/blue.html index c93395792..cce7f4279 100644 --- a/docs/_includes/color/blue.html +++ b/docs/_includes/color/blue.html @@ -1,2 +1,2 @@ -hsl(217, 71%, 53%) +hsl(217, 71%, 53%) diff --git a/docs/_includes/color/green.html b/docs/_includes/color/green.html index 52c079bab..bce2f227d 100644 --- a/docs/_includes/color/green.html +++ b/docs/_includes/color/green.html @@ -1,2 +1,2 @@ -hsl(141, 71%, 48%) +hsl(141, 71%, 48%) diff --git a/docs/_includes/color/grey-dark.html b/docs/_includes/color/grey-dark.html index 44b930239..08601190a 100644 --- a/docs/_includes/color/grey-dark.html +++ b/docs/_includes/color/grey-dark.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 29%) +hsl(0, 0%, 29%) diff --git a/docs/_includes/color/grey-darker.html b/docs/_includes/color/grey-darker.html index 51fa5f761..9dc0d4f71 100644 --- a/docs/_includes/color/grey-darker.html +++ b/docs/_includes/color/grey-darker.html @@ -1,2 +1,2 @@ - hsl(0, 0%, 21%) +hsl(0, 0%, 21%) diff --git a/docs/_includes/color/grey-light.html b/docs/_includes/color/grey-light.html index 68730ea61..d1782f94e 100644 --- a/docs/_includes/color/grey-light.html +++ b/docs/_includes/color/grey-light.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 71%) +hsl(0, 0%, 71%) diff --git a/docs/_includes/color/grey-lighter.html b/docs/_includes/color/grey-lighter.html index 96e1d3d36..a95468c4e 100644 --- a/docs/_includes/color/grey-lighter.html +++ b/docs/_includes/color/grey-lighter.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 86%) +hsl(0, 0%, 86%) diff --git a/docs/_includes/color/grey.html b/docs/_includes/color/grey.html index e4b4bf56b..6ef9ec6d4 100644 --- a/docs/_includes/color/grey.html +++ b/docs/_includes/color/grey.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 48%) +hsl(0, 0%, 48%) diff --git a/docs/_includes/color/orange.html b/docs/_includes/color/orange.html index 038d5a1bd..afa19bce6 100644 --- a/docs/_includes/color/orange.html +++ b/docs/_includes/color/orange.html @@ -1,2 +1,2 @@ -hsl(14, 100%, 53%) +hsl(14, 100%, 53%) diff --git a/docs/_includes/color/purple.html b/docs/_includes/color/purple.html index 4da5f0c04..b54a9f0b7 100644 --- a/docs/_includes/color/purple.html +++ b/docs/_includes/color/purple.html @@ -1,2 +1,2 @@ -hsl(271, 100%, 71%) +hsl(271, 100%, 71%) diff --git a/docs/_includes/color/red.html b/docs/_includes/color/red.html index 371589cd6..24d136b3a 100644 --- a/docs/_includes/color/red.html +++ b/docs/_includes/color/red.html @@ -1,2 +1,2 @@ -hsl(348, 100%, 61%) +hsl(348, 100%, 61%) diff --git a/docs/_includes/color/turquoise.html b/docs/_includes/color/turquoise.html index dcce471ed..9e0a87d18 100644 --- a/docs/_includes/color/turquoise.html +++ b/docs/_includes/color/turquoise.html @@ -1,2 +1,2 @@ -hsl(171, 100%, 41%) +hsl(171, 100%, 41%) diff --git a/docs/_includes/color/white-bis.html b/docs/_includes/color/white-bis.html index e07e5bb3d..b78f0795a 100644 --- a/docs/_includes/color/white-bis.html +++ b/docs/_includes/color/white-bis.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 98%) +hsl(0, 0%, 98%) diff --git a/docs/_includes/color/white-ter.html b/docs/_includes/color/white-ter.html index 9f2880748..a355e4046 100644 --- a/docs/_includes/color/white-ter.html +++ b/docs/_includes/color/white-ter.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 96%) +hsl(0, 0%, 96%) diff --git a/docs/_includes/color/white.html b/docs/_includes/color/white.html index eb12ab8c4..0ede4d1be 100644 --- a/docs/_includes/color/white.html +++ b/docs/_includes/color/white.html @@ -1,2 +1,2 @@ -hsl(0, 0%, 100%) +hsl(0, 0%, 100%) diff --git a/docs/_includes/color/yellow.html b/docs/_includes/color/yellow.html index 916ff569e..51dccfec8 100644 --- a/docs/_includes/color/yellow.html +++ b/docs/_includes/color/yellow.html @@ -1,2 +1,2 @@ -hsl(48, 100%, 67%) +hsl(48, 100%, 67%) diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 49b60ba4b..7d3eb2780 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -63,7 +63,9 @@
-

{{ site.version }}

+

+ {{ site.version }} +

{{#unless site.deprecated}} View all versions diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html index 683152d73..790d336c2 100644 --- a/docs/_includes/subnav-overview.html +++ b/docs/_includes/subnav-overview.html @@ -16,12 +16,15 @@ Responsiveness - - Functions - Variables + + Colors + + + Functions + Mixins diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index d5b422222..05e3693c0 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -65,7 +65,7 @@ route: documentation
-

+

This page is open source. Noticed a typo? Or something unclear? diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html new file mode 100644 index 000000000..350715802 --- /dev/null +++ b/docs/documentation/overview/colors.html @@ -0,0 +1,181 @@ +--- +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 %} + +

+
+

Colors

+

The colors that style all Bulma elements and components

+ +
+ +
+

+ Most elements and components have color variations thanks to modifiers with syntax .is-$color, like is-primary or is-dark. +

+

+ This is thanks to the $colors Sass map, through which Bulma cycles to grab all the colors and their inverts. +

+
+ + + + + + + + + + + + + + {% for color in page.colors %} + {% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %} + + + + + + + + + {% endfor %} + +
ColorVariableValueActual valueInvert variableActual invert value
+ {{ color.id | capitalize }} + + {{ color.variable }} + + {{ color.value }} + + {% include {{ includePath }} %} + + {{ color.invert }} + + {% if color.invert_hex == "black" %} + + rgba(0, 0, 0, 0.7) + {% else %} + + #fff + {% endif %} +
+
+
\ No newline at end of file diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index 1f66d8265..783a6e9a1 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -35,9 +35,9 @@ doc-subtab: responsiveness
  • mobile: up to 768px
  • tablet: from 769px
    • -
  • desktop: from 1000px
    • -
  • widescreen: from 1192px
    • -
  • New! fullhd: from 1384px
    • +
  • desktop: from 1008px
    • +
  • widescreen: from 1200px
    • +
  • New! fullhd: from 1392px

Bulma uses 9 responsive mixins:

    @@ -51,32 +51,32 @@ doc-subtab: responsiveness
  • =tablet-only
    - from 769px and until 999px + from 769px and until 1007px
  • =touch
    - until 999px + until 1007px
  • =desktop
    - from 1000px + from 1008px
  • =desktop-only
    - from 1000px and until 1191px + from 1008px and until 1199px
  • =widescreen
    - from 1192px + from 1200px
  • =widescreen-only
    - from 1192px and until 1383px + from 1200px and until 1391px
  • New! =fullhd
    - from 1384px + from 1392px
@@ -90,19 +90,19 @@ doc-subtab: responsiveness Tablet
- Between 769px and 999px + Between 769px and 1007px Desktop
- Between 1000px and 1191px + Between 1008px and 1199px Widescreen
- Between 1192px and 1383px + Between 1200px and 1391px FullHD
- 1384px and above + 1392px and above diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 1e9e63228..a2df4d6a0 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -3,6 +3,195 @@ title: Variables layout: documentation doc-tab: overview doc-subtab: variables +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%) +initial_variables: +- name: $family-sans-serif + value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif +- name: $family-monospace + value: monospace +- name: $render-mode + value: optimizeLegibility +- name: $size-1 + value: 3rem +- name: $size-2 + value: 2.5rem +- name: $size-3 + value: 2rem +- name: $size-4 + value: 1.5rem +- name: $size-5 + value: 1.25rem +- name: $size-6 + value: 1rem +- name: $size-7 + value: 0.75rem +- name: $weight-light + value: 300 +- name: $weight-normal + value: 400 +- name: $weight-medium + value: 500 +- name: $weight-semibold + value: 600 +- name: $weight-bold + value: 700 +- name: $gap + value: 24px +- name: $tablet + value: 769px +- name: $desktop + value: 960px + (2 * $gap) +- name: $widescreen + value: 1152px + (2 * $gap) +- name: $fullhd + value: 1344px + (2 * $gap) +- name: $easing + value: ease-out +- name: $radius-small + value: 2px +- name: $radius + value: 3px +- name: $radius-large + value: 5px +- name: $speed + value: 86ms +derived_variables: +- name: $primary + value: $turquoise +- name: $info + value: $blue +- name: $success + value: $green +- name: $warning + value: $yellow +- name: $danger + value: $red +- name: $light + value: $white-ter +- name: $dark + value: $grey-darker +- name: $orange-invert + value: findColorInvert($orange) +- name: $yellow-invert + value: findColorInvert($yellow) +- name: $green-invert + value: findColorInvert($green) +- name: $turquoise-invert + value: findColorInvert($turquoise) +- name: $blue-invert + value: findColorInvert($blue) +- name: $purple-invert + value: findColorInvert($purple) +- name: $red-invert + value: findColorInvert($red) +- name: $primary-invert + value: $turquoise-invert +- name: $info-invert + value: $blue-invert +- name: $success-invert + value: $green-invert +- name: $warning-invert + value: $yellow-invert +- name: $danger-invert + value: $red-invert +- name: $light-invert + value: $dark +- name: $dark-invert + value: $light +- name: $background + value: $white-ter +- name: $border + value: $grey-lighter +- name: $border-hover + value: $grey-light +- name: $text + value: $grey-dark +- name: $text-invert + value: findColorInvert($text) +- name: $text-light + value: $grey +- name: $text-strong + value: $grey-darker +- name: $code + value: $red +- name: $code-background + value: $background +- name: $pre + value: $text +- name: $pre-background + value: $background +- name: $link + value: $primary +- name: $link-invert + value: $primary-invert +- name: $link-visited + value: $purple +- name: $link-hover + value: $grey-darker +- name: $link-hover-border + value: $grey-light +- name: $link-focus + value: $grey-darker +- name: $link-focus-border + value: $primary +- name: $link-active + value: $grey-darker +- name: $link-active-border + value: $grey-dark +- name: $family-primary + value: $family-sans-serif +- name: $family-code + value: $family-monospace +- name: $size-small + value: $size-7 +- name: $size-normal + value: $size-6 +- name: $size-medium + value: $size-5 +- 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))' +- 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 + value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 --- {% include subnav-overview.html %} @@ -15,486 +204,102 @@ doc-subtab: variables
-

Bulma has 1 variable file divided into 4 sections:

-
    +

    Bulma has two variable files divided into 4 sections:

    +
    1. - Initial variables: where you define variables by direct value, like: + Initial variables: where you define variables by literal value, like:
      • colors: $blue: hsl(217, 71%, 53%)
      • font sizes: $size-1: 3rem
        • +
      • dimensions: $gap: 24px
      • other values: $easing: ease-out or $radius-large: 5px
    2. - Primary colors derived from the initial variables: + Derived variables where variables are calculated from the values set in the previous file. For example, you can have:
        -
      • $primary: $turquoise
        • -
      • $info: $blue
        • -
      • $success: $green
        • -
      • $warning: $yellow
        • -
      • $danger: $red
        • -
      • $dark: $grey-darker
        • -
      • $text: $grey-dark
        • -
      -
      3. -
    3. - Generated variables where variables are calculated from the values set in the previous file. For example, you can have: -
        -
      • $body-background: $white: the main background color
        • +
      • + Primary colors derived from the initial variables: +
          +
        • $primary: $turquoise
          • +
        • $info: $blue
          • +
        • $success: $green
          • +
        • $warning: $yellow
          • +
        • $danger: $red
          • +
        • $dark: $grey-darker
          • +
        • $text: $grey-dark
          • +
        +
        • +
      • $background: $white-ter: a general background color
      • $link: $primary: the links use the primary color
      • $family-primary: $family-sans-serif: the primary font family is the sans-serif one
        • +
      • + Lists and maps which are collections so already defined variables: +
          +
        • $colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
          • +
        • $shades: ("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)
          • +
        • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
          • +
        +
      4. -
    4. - Lists and maps which are collections so already defined variables: -
        -
      • $colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
        • -
      • $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
        • -
      -
      5. -
+

To override any of these variables, just set them before importing Bulma.

-
+ {% include heading.html name="Initial variables" %} - - +
+

+ These are variables with a literal value. +

+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {% include heading.html name="Derived variables" %} - - - - +
+

+ These are variables with a value that references another variable. +

+
- - - - +
1. Initial variables
Colors
$black - - hsl(0, 0%, 4%) -
$black-bis - - hsl(0, 0%, 7%) -
$black-ter - - hsl(0, 0%, 14%) -
$grey-darker - - hsl(0, 0%, 21%) + + {% for color in page.initial_colors %} + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {% endfor %} + {% for variable in page.initial_variables %} + + + + + {% endfor %} +
+ {{ color.name }} + + + {{ color.value }}
$grey-dark - - hsl(0, 0%, 29%) -
$grey - - hsl(0, 0%, 48%) -
$grey-light - - hsl(0, 0%, 71%) -
$grey-lighter - - hsl(0, 0%, 86%) -
$white-ter - - hsl(0, 0%, 96%) -
$white-bis - - hsl(0, 0%, 98%) -
$white - - hsl(0, 0%, 100%) -
$orange - - hsl(14, 100%, 53%) -
$yellow - - hsl(48, 100%, 67%) -
$green - - hsl(141, 71%, 48%) -
$turquoise - - hsl(171, 100%, 41%) -
$blue - - hsl(217, 71%, 53%) -
$purple - - hsl(271, 100%, 71%) -
$red - - hsl(348, 100%, 61%) -
Typography
$family-sans-serif-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospacemonospace
$size-13rem
$size-22.5rem
$size-32rem
$size-41.5rem
$size-51.25rem
$size-61rem
$size-70.75rem
$weight-light300
$weight-normal400
$weight-semibold500
$weight-bold700
Body
$body-background$white
$body-size16px
Breakpoints
$gap24px
$tablet769px
$desktop1008px (960px + 2 * $gap)
$widescreen1200px (1152px+ 2 * $gap)
$fullhd1392px (1344px+ 2 * $gap)
Miscellaneous
$easingease-out
$radius3px
$speed86ms
2. Primary colors
$primary$turquoise
$info$blue
$success$green
$warning$yellow
$danger$red
$light$white-ter
$dark$grey-darker
3. Generated variables
Invert colors
$primary-invertfindColorInvert($primary)
$info-invertfindColorInvert($info)
$success-invertfindColorInvert($success)
$warning-invertfindColorInvert($warning)
$danger-invertfindColorInvert($danger)
$light-invert$dark
$dark-invert$light
General colors
$body-background$grey-lighter
$background$grey-lighter
$border$grey-light
$border-hover$grey
Text colors
$text$grey-dark
$text-invertfindColorInvert($text)
$text-light$grey
$text-strong$grey-darker
Code colors
$code$red
$code-background$background
$pre$text
$pre-background$background
Link colors
$link$primary
$link-invert$primary-invert
$link-visited$purple
$link-hover$grey-darker
$link-hover-border$grey-darker
$link-focus$grey-darker
$link-focus-border$primary
$link-active$grey-darker
$link-active-border$grey-dark
+ {{ variable.name }} + + {{ variable.value }} +
-
Typography
$family-primary$family-sans-serif
$family-code$family-monospace
$size-small$size-7
$size-normal$size-6
$size-medium$size-5
$size-large$size-4
4. Lists and maps
$colors - - 
-(
-  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)
-)
-
-
$sizes$size-1 $size-2 $size-3 $size-4 $size-5 $size-6
+ {% for variable in page.derived_variables %} + + + + + {% endfor %}
+ {{ variable.name }} + + {{ variable.value }} +