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.

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

Primary palette

$bc-palette-primary-bug-orange
$bc-palette-primary-horizon-blue
$bc-palette-primary-black
$bc-palette-primary-white

Secondary palette

$bc-palette-secondary-persian-red
$bc-palette-secondary-casablanca-orange
$bc-palette-secondary-limeade-green
$bc-palette-secondary-lagoon-blue

Tertiary palette

$bc-palette-tertiary-san-marino-blue
$bc-palette-tertiary-carribean-green
$bc-palette-tertiary-dusty-grey
$bc-palette-tertiary-deep-sea-green
$bc-palette-tertiary-purple-heart
$bc-palette-tertiary-pomegranate-red
$bc-palette-tertiary-mineshaft-grey
$bc-palette-tertiary-smoke-grey
$bc-palette-tertiary-dusty-grey
$bc-palette-tertiary-alabaster-white
$bc-palette-tertiary-sandcastle-yellow

Palette contrast tests

Foreground to background color contrast checks for all three palettes.
white black bug-orange horizon-blue persian-red casablanca-orange limeade-green lagoon-blue san-marino-blue carribean-green deep-sea-green purple-heart pomegranate-red mineshaft-grey smoke-grey dusty-grey alabaster-white sandcastle-yellow
white
N/A
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
black
white
N/A
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
bug-orange
white
black
N/A
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
horizon-blue
white
Black
bug-orange
N/A
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
persian-red
white
black
bug-orange
horizon-blue
N/A
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
casablanca-orange
white
black
bug-orange
horizon-blue
persian-red
N/A
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
limeade-green
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
N/A
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
lagoon-blue
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
N/A
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
san-marino-blue
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
N/A
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
carribean-green
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
N/A
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
deep-sea-green
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
N/A
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
purple-heart
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
N/A
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
pomegranate-red
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
N/A
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
mineshaft-grey
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
N/A
smoke-grey
dusty-grey
alabaster-white
sandcastle-yellow
smoke-grey
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
N/A
dusty-grey
alabaster-white
sandcastle-yellow
dusty-grey
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
N/A
alabaster-white
sandcastle-yellow
alabaster-white
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
N/A
sandcastle-yellow
sandcastle-yellow
white
black
bug-orange
horizon-blue
persian-red
casablanca-orange
limeade-green
lagoon-blue
san-marino-blue
carribean-green
deep-sea-green
purple-heart
pomegranate-red
mineshaft-grey
smoke-grey
dusty-grey
alabaster-white
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