This file tests _config.scss’s variables, mixins, and functions.

See also: _config.scss’s entry in the SassDoc reference.

Note: bc-body is included in this testfile’s styling.

Variables

Color variables are separate section, located at the bottom of the page.

Font stacks

Tests the font stack variables.

display two strings styled with monospaced and system fonts respectively, followed by the actual stack used.

monospace: The quick brown fox jumps over the lazy dog.

system: The quick brown fox jumps over the lazy dog.

Font sizes

Tests the font size variables.

display six paragraphs for each font-size variable, with the output matching the variable.

extra small handgloves

small handgloves

default handgloves

large handgloves

extra large handgloves

Line measure cap (max width)

Tests the $bc-measure variable.

display a paragraph with a max-width, set in ems.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium at voluptas voluptate, minus accusamus doloremque repellat molestias id, iusto cum adipisci distinctio tempore blanditiis dolor hic vero omnis laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta distinctio fuga adipisci aliquid ut rerum mollitia commodi eligendi, asperiores nostrum unde blanditiis eveniet impedit labore, temporibus exercitationem, provident ab fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur est vitae repudiandae sequi illum, odio officiis? Quo nesciunt ipsam recusandae odit, dolores fuga incidunt repudiandae reprehenderit, amet numquam necessitatibus doloremque.

‘Borderize’

Tests $bc-borderize variable.

display a [horizontal rule] styled as a thin (1px) light grey line.


Border radii

Tests our various $bc-border-radius variables.

(1) display four boxes with rounded corners (borders), (2) each box’s text should correspond to its border-radius.

Mixins

Media query breakpoints

Tests the breakpoint variables and bc-media() mixin.

display the correct breakpoint keyword for breakpoints larger than xs.

Currently breakpoint: XS SM MD LG XL

Screen reader only

Tests the bc-sronly mixin.

(1) visually hide the following paragraph and it’s link, (2) remain accessible to assistive technologies like screen readers.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do hi there, I’m an anchor inside a visually-hidden paragaph ut labore et dolore magna aliqua.

Faux outline

Tests the bc-outline mixin.

(1) display a faux outline style, (2) hide the style on-click (:active).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do elit ut labore et dolore magna aliqua.

True outline

Tests the bc-outline-true mixin.

(1) display an outline style, (2) hide the style on-click (:active).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do elit ut labore et dolore magna aliqua.

Clearfix

This test of the bc-clearfix mixin is intentionally omitted.

Disabled form styles

Tests bc-form-disabled mixin.

(1) display a not-allowed cursor on hover, (2) visually darken the border and background color.

Form label styles

Tests bc-form-label mixin (label is for the above textarea).

display small, light-grey label.

Functions

bc-space()

Tests the rem-based space function.

display a series of bars with a width that matches in pixels the integer given to the function.

bc-space(4)
bc-space(6)
bc-space(8)
bc-space(12)
bc-space(16)
bc-space(24)
bc-space(32)
bc-space(40)
bc-space(48)

bc-line-space()

Tests the em-based leading space function.

display a series of bars with a width in ems that equals the value given to the function multiplied by 1.6 (the leading; $bc-leading).

bc-line-space(0.25)
bc-line-space(0.5)
bc-line-space(1)
bc-line-space(1.5)
bc-line-space(2)
bc-line-space(3)
bc-line-space(4)
bc-line-space(8)
bc-line-space(12)

bc-color-luminance()

Tests the color luminance function.

display in purple, the calculated luminance for each of the below colors, matching the pre-calculated values.

Luminance of #000000 = 0: Luminance of #663399 = 0.07492: Luminance of #ff69b4 = 0.34658: Luminance of #ffffff = 1:

bc-color-contrast()

Tests the color contrast function.

display in purple, the calculated color contrast ratios for each of the below pairings, matching the pre-calculated values.

#fff on #000 = 21:1 — #fff on #f00 = 4:1 — #000 on #ff0 = 19.6:1 — #fff on #663399 = 8.4:1 — #fff on #ff0 = 1.1:1 —

bc-replace()

Tests the string replacement function.

display a purple string that notes we prefer spaces for indentation.

bc-replace('We prefer tabs for indentation.', 'tabs', 'spaces'):

bc-svguri()

Tests the bc-svguri() function.

display the bugcrowd logo in SVG via background-image.

Colors

This section is split into three sections

  1. the (three) color palettes
  2. the foreground–background color contrast ratio tests for all master colors
  3. the available tints and shades of all master colors

The text color variables $bc-color-text and $bc-color-text--inverse are tied to the $bc-black and $bc-white respectively.

Also note that all HSL values have been rounded to the nearest whole number.

Primary palette

$bc-bugOrange
$bc-horizon
$bc-black
$bc-white

Secondary palette

$bc-persianRed
$bc-casablanca
$bc-limeade
$bc-blueLagoon

Tertiary palette

$bc-sanMarino
$bc-carribeanGreen
$bc-dustyGrey
$bc-deepSea
$bc-purpleHeart
$bc-pomegranate
$bc-mineShaft
$bc-smoke
$bc-dustyGrey
$bc-alabaster
$bc-sandcastle

Palette contrast tests

Foreground to background color contrast checks for all three palettes.
white black bugOrange horizon persianRed casablanca limeade blueLagoon sanMarino carribeanGreen deepSea purpleHeart pomegranate mineShaft smoke dustyGrey alabaster sandcastle
white
N/A
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
black
white
N/A
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
bugOrange
white
black
N/A
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
horizon
white
Black
bugOrange
N/A
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
persianRed
white
black
bugOrange
horizon
N/A
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
casablanca
white
black
bugOrange
horizon
persianRed
N/A
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
limeade
white
black
bugOrange
horizon
persianRed
casablanca
N/A
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
blueLagoon
white
black
bugOrange
horizon
persianRed
casablanca
limeade
N/A
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
sanMarino
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
N/A
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
carribeanGreen
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
N/A
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
deepSea
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
N/A
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
purpleHeart
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
N/A
pomegranate
mineShaft
smoke
dustyGrey
alabaster
sandcastle
pomegranate
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
N/A
mineShaft
smoke
dustyGrey
alabaster
sandcastle
mineShaft
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
N/A
smoke
dustyGrey
alabaster
sandcastle
smoke
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
N/A
dustyGrey
alabaster
sandcastle
dustyGrey
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
N/A
alabaster
sandcastle
alabaster
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
N/A
sandcastle
sandcastle
white
black
bugOrange
horizon
persianRed
casablanca
limeade
blueLagoon
sanMarino
carribeanGreen
deepSea
purpleHeart
pomegranate
mineShaft
smoke
dustyGrey
alabaster
N/A

Colors, refactored

This is a work in progress.

Light theme [default]

Main palette

Abc

Abc

Abc


Abc

Abc

Abc


Abc

Abc

Abc



Main palette, contrasts (dark theme)

Abc

Abc

Abc


Abc

Abc

Abc


Abc

Abc

Abc