1 #permalink Settings
Global variables
1.1 #1.colors Colors
Color variables and values used on the site. Local color variables should be used only in _settings.colors.scss.
Example
Brand
- Primary
- $color-brand-primary
- Secondary
- $color-brand-secondary
- Tertiary
- $color-brand-tertiary
- Quaternary
- $color-brand-quaternary
Text
- Text
- $color-text
- Weak Text
- $color-text-weak
- Strong Text
- $color-text-strong
- Invert Text
- $color-text-invert
- Weak Invert Text
- $color-text-weak-invert
- Strong Invert Text
- $color-text-strong-invert
Links
- Link
- $color-link
- Focused Link
- $color-link-focus
- Hovered Link
- $color-link-hover
- Visited Link
- $color-link-visited
Alternate links
- Alternate Link
- $color-link-alt
- Alternate focused Link
- $color-link-alt-focus
- Alternate hovered Link
- $color-link-alt-hover
- Alternate visited Link
- $color-link-alt-visited
Shades of grey
- Grey 10%
- $color-grey-10
- Grey 20%
- $color-grey-20
- Grey 30%
- $color-grey-30
- Grey 40%
- $color-grey-40
- Grey 50%
- $color-grey-50
- Grey 60%
- $color-grey-60
- Grey 70%
- $color-grey-70
- Grey 80%
- $color-grey-80
- Grey 90%
- $color-grey-90
- Grey 100%
- $color-grey-100
Borders
- Weak Border
- $color-border-weak
- Normal Border
- $color-border-normal
- Strong Border
- $color-border-strong
Forms
- Regular Input
- $color-input-regular
- Focus Input
- $color-input-focus
- Success Input
- $color-input-success
- Error Input
- $color-input-error
- Required Input
- $color-input-required
- Checkbox
- $color-input-checkbox
- Active Checkbox
- $color-input-checkbox-active
- Radio
- $color-input-radio
- Active Radio
- $color-input-radio-active
<h3 class="cc-title">Brand</h3>
<div class="cc-group">
<dl class="cc cc--var-color-brand-primary">
<dt class="cc__title">Primary</dt>
<dd class="cc__variable">$color-brand-primary</dd>
</dl>
<dl class="cc cc--var-color-brand-secondary">
<dt class="cc__title">Secondary</dt>
<dd class="cc__variable">$color-brand-secondary</dd>
</dl>
<dl class="cc cc--var-color-brand-tertiary">
<dt class="cc__title">Tertiary</dt>
<dd class="cc__variable">$color-brand-tertiary</dd>
</dl>
<dl class="cc cc--var-color-brand-quaternary">
<dt class="cc__title">Quaternary</dt>
<dd class="cc__variable">$color-brand-quaternary</dd>
</dl>
</div>
<h3 class="cc-title">Text</h3>
<div class="cc-group">
<dl class="cc cc--var-color-text">
<dt class="cc__title">Text</dt>
<dd class="cc__variable">$color-text</dd>
</dl>
<dl class="cc cc--var-color-text-weak">
<dt class="cc__title">Weak Text</dt>
<dd class="cc__variable">$color-text-weak</dd>
</dl>
<dl class="cc cc--var-color-text-strong">
<dt class="cc__title">Strong Text</dt>
<dd class="cc__variable">$color-text-strong</dd>
</dl>
<dl class="cc cc--var-color-text-invert">
<dt class="cc__title">Invert Text</dt>
<dd class="cc__variable">$color-text-invert</dd>
</dl>
<dl class="cc cc--var-color-text-weak-invert">
<dt class="cc__title">Weak Invert Text</dt>
<dd class="cc__variable">$color-text-weak-invert</dd>
</dl>
<dl class="cc cc--var-color-text-strong-invert">
<dt class="cc__title">Strong Invert Text</dt>
<dd class="cc__variable">$color-text-strong-invert</dd>
</dl>
</div>
<h3 class="cc-title">Links</h3>
<div class="cc-group">
<dl class="cc cc--var-color-link">
<dt class="cc__title">Link</dt>
<dd class="cc__variable">$color-link</dd>
</dl>
<dl class="cc cc--var-color-link-focus">
<dt class="cc__title">Focused Link</dt>
<dd class="cc__variable">$color-link-focus</dd>
</dl>
<dl class="cc cc--var-color-link-hover">
<dt class="cc__title">Hovered Link</dt>
<dd class="cc__variable">$color-link-hover</dd>
</dl>
<dl class="cc cc--var-color-link-visited">
<dt class="cc__title">Visited Link</dt>
<dd class="cc__variable">$color-link-visited</dd>
</dl>
</div>
<h3 class="cc-title">Alternate links</h3>
<div class="cc-group">
<dl class="cc cc--var-color-link-alt">
<dt class="cc__title">Alternate Link</dt>
<dd class="cc__variable">$color-link-alt</dd>
</dl>
<dl class="cc cc--var-color-link-alt-focus">
<dt class="cc__title">Alternate focused Link</dt>
<dd class="cc__variable">$color-link-alt-focus</dd>
</dl>
<dl class="cc cc--var-color-link-alt-hover">
<dt class="cc__title">Alternate hovered Link</dt>
<dd class="cc__variable">$color-link-alt-hover</dd>
</dl>
<dl class="cc cc--var-color-link-alt-visited">
<dt class="cc__title">Alternate visited Link</dt>
<dd class="cc__variable">$color-link-alt-visited</dd>
</dl>
</div>
<h3 class="cc-title">Shades of grey</h3>
<div class="cc-group">
<dl class="cc cc--var-color-grey-10">
<dt class="cc__title">Grey 10%</dt>
<dd class="cc__variable">$color-grey-10</dd>
</dl>
<dl class="cc cc--var-color-grey-20">
<dt class="cc__title">Grey 20%</dt>
<dd class="cc__variable">$color-grey-20</dd>
</dl>
<dl class="cc cc--var-color-grey-30">
<dt class="cc__title">Grey 30%</dt>
<dd class="cc__variable">$color-grey-30</dd>
</dl>
<dl class="cc cc--var-color-grey-40">
<dt class="cc__title">Grey 40%</dt>
<dd class="cc__variable">$color-grey-40</dd>
</dl>
<dl class="cc cc--var-color-grey-50">
<dt class="cc__title">Grey 50%</dt>
<dd class="cc__variable">$color-grey-50</dd>
</dl>
<dl class="cc cc--var-color-grey-60">
<dt class="cc__title">Grey 60%</dt>
<dd class="cc__variable">$color-grey-60</dd>
</dl>
<dl class="cc cc--var-color-grey-70">
<dt class="cc__title">Grey 70%</dt>
<dd class="cc__variable">$color-grey-70</dd>
</dl>
<dl class="cc cc--var-color-grey-80">
<dt class="cc__title">Grey 80%</dt>
<dd class="cc__variable">$color-grey-80</dd>
</dl>
<dl class="cc cc--var-color-grey-90">
<dt class="cc__title">Grey 90%</dt>
<dd class="cc__variable">$color-grey-90</dd>
</dl>
<dl class="cc cc--var-color-grey-100">
<dt class="cc__title">Grey 100%</dt>
<dd class="cc__variable">$color-grey-100</dd>
</dl>
</div>
<h3 class="cc-title">Borders</h3>
<div class="cc-group">
<dl class="cc cc--var-color-border-weak">
<dt class="cc__title">Weak Border</dt>
<dd class="cc__variable">$color-border-weak</dd>
</dl>
<dl class="cc cc--var-color-border-normal">
<dt class="cc__title">Normal Border</dt>
<dd class="cc__variable">$color-border-normal</dd>
</dl>
<dl class="cc cc--var-color-border-strong">
<dt class="cc__title">Strong Border</dt>
<dd class="cc__variable">$color-border-strong</dd>
</dl>
</div>
<h3 class="cc-title">Forms</h3>
<div class="cc-group">
<dl class="cc cc--var-color-input-regular">
<dt class="cc__title">Regular Input</dt>
<dd class="cc__variable">$color-input-regular</dd>
</dl>
<dl class="cc cc--var-color-input-focus">
<dt class="cc__title">Focus Input</dt>
<dd class="cc__variable">$color-input-focus</dd>
</dl>
<dl class="cc cc--var-color-input-success">
<dt class="cc__title">Success Input</dt>
<dd class="cc__variable">$color-input-success</dd>
</dl>
<dl class="cc cc--var-color-input-error">
<dt class="cc__title">Error Input</dt>
<dd class="cc__variable">$color-input-error</dd>
</dl>
<dl class="cc cc--var-color-input-required">
<dt class="cc__title">Required Input</dt>
<dd class="cc__variable">$color-input-required</dd>
</dl>
<dl class="cc cc--var-color-input-checkbox">
<dt class="cc__title">Checkbox</dt>
<dd class="cc__variable">$color-input-checkbox</dd>
</dl>
<dl class="cc cc--var-color-input-checkbox-active">
<dt class="cc__title">Active Checkbox</dt>
<dd class="cc__variable">$color-input-checkbox-active</dd>
</dl>
<dl class="cc cc--var-color-input-radio">
<dt class="cc__title">Radio</dt>
<dd class="cc__variable">$color-input-radio</dd>
</dl>
<dl class="cc cc--var-color-input-radio-active">
<dt class="cc__title">Active Radio</dt>
<dd class="cc__variable">$color-input-radio-active</dd>
</dl>
</div>1.2 #1.typography Typography
Write about your typography choices for this WordCamp.
Typeface Name is used as the font for WordCamp logo and for all headlines.
Typeface Name is used for body text, buttons, forms etc.