Back to Variables

Variables

A list of CSS and Javascript variables used to style that can be used outside of Preshape for custom CSS.

Accessing the variables

CSS variables (also known as custom properties) will be automatically added to the document as soon as something has been imported from the Preshape library.
.MyComponent {
  color: var(--color-accent--shade-1);
  padding: var(--size--x4);
  transition-duration: var(--transition-time--fast);
}
Javascript variables are top level exports, along with the components. These can be imported in the standard way.
import {
  colorAccent1Shade1,
  sizeX4,
  themes,
  transitionTimeFast,
} from 'preshape';

Colours

ColourCSS VariableJS VariableValue
Dark (Shade 1)var(--color-dark--shade-1)colorDarkShade1#212529
Dark (Shade 2)var(--color-dark--shade-2)colorDarkShade2#343a40
Dark (Shade 3)var(--color-dark--shade-3)colorDarkShade3#495057
Light (Shade 1)var(--color-light--shade-1)colorLightShade1#f8f9fa
Light (Shade 2)var(--color-light--shade-2)colorLightShade2#f1f3f5
Light (Shade 3)var(--color-light--shade-3)colorLightShade3#e9ecef
Accent 1 (Shade 1)var(--color-accent-1--shade-1)colorAccent1Shade1#4dabf7
Accent 1 (Shade 2)var(--color-accent-1--shade-2)colorAccent1Shade2#339af0
Accent 1 (Shade 3)var(--color-accent-1--shade-3)colorAccent1Shade3#228be6
Accent 2 (Shade 1)var(--color-accent-2--shade-1)colorAccent2Shade1#9775fa
Accent 2 (Shade 2)var(--color-accent-2--shade-2)colorAccent2Shade2#845ef7
Accent 2 (Shade 3)var(--color-accent-2--shade-3)colorAccent2Shade3#7950f2
Positive (Shade 1)var(--color-positive--shade-1)colorPositiveShade1#69db7c
Positive (Shade 2)var(--color-positive--shade-2)colorPositiveShade2#51cf66
Positive (Shade 3)var(--color-positive--shade-3)colorPositiveShade3#40c057
Negative (Shade 1)var(--color-negative--shade-1)colorNegativeShade1#ff8787
Negative (Shade 2)var(--color-negative--shade-2)colorNegativeShade2#ff6b6b
Negative (Shade 3)var(--color-negative--shade-3)colorNegativeShade3#fa5252

Themes

The CSS theme variables will take their value from the nearest element containing a theme class (.Theme--day or .Theme--night). This class can be applied by giving any Preshape Component the theme="" prop.
Theme Day
ColourCSS VariableJS VariableValue
Background (Shade 1)var(--color-background--shade-1)themes.day.colorBackgroundShade1#f8f9fa
Background (Shade 2)var(--color-background--shade-2)themes.day.colorBackgroundShade2#f1f3f5
Background (Shade 3)var(--color-background--shade-3)themes.day.colorBackgroundShade3#e9ecef
Text (Shade 1)var(--color-text--shade-1)themes.day.colorTextShade1#212529
Text (Shade 2)var(--color-text--shade-2)themes.day.colorTextShade2#343a40
Text (Shade 3)var(--color-text--shade-3)themes.day.colorTextShade3#495057
Accent (Shade 1)var(--color-accent--shade-1)themes.day.colorAccentShade1#4dabf7
Accent (Shade 2)var(--color-accent--shade-2)themes.day.colorAccentShade2#339af0
Accent (Shade 3)var(--color-accent--shade-3)themes.day.colorAccentShade3#228be6
Theme Night
ColourCSS VariableJS VariableValue
Background (Shade 1)var(--color-background--shade-1)themes.night.colorBackgroundShade1#212529
Background (Shade 2)var(--color-background--shade-2)themes.night.colorBackgroundShade2#343a40
Background (Shade 3)var(--color-background--shade-3)themes.night.colorBackgroundShade3#495057
Text (Shade 1)var(--color-text--shade-1)themes.night.colorTextShade1#f8f9fa
Text (Shade 2)var(--color-text--shade-2)themes.night.colorTextShade2#f1f3f5
Text (Shade 3)var(--color-text--shade-3)themes.night.colorTextShade3#e9ecef
Accent (Shade 1)var(--color-accent--shade-1)themes.night.colorAccentShade1#9775fa
Accent (Shade 2)var(--color-accent--shade-2)themes.night.colorAccentShade2#845ef7
Accent (Shade 3)var(--color-accent--shade-3)themes.night.colorAccentShade3#7950f2

Sizing

General Sizing
NameCSS Custom PropertyJS VariableValue
x1var(--size--x1)sizeX1Px / sizeX1Rem4px / 0.25rem
x2var(--size--x2)sizeX2Px / sizeX2Rem8px / 0.5rem
x3var(--size--x3)sizeX3Px / sizeX3Rem12px / 0.75rem
x4var(--size--x4)sizeX4Px / sizeX4Rem16px / 1rem
x6var(--size--x6)sizeX6Px / sizeX6Rem24px / 1.5rem
x8var(--size--x8)sizeX8Px / sizeX8Rem32px / 2rem
x10var(--size--x10)sizeX10Px / sizeX10Rem40px / 2.5rem
x12var(--size--x12)sizeX12Px / sizeX12Rem48px / 3rem
x16var(--size--x16)sizeX16Px / sizeX16Rem64px / 4rem
Border Sizing
NameCSS Custom PropertyJS VariableValue
x1var(--border-size--x1)borderSizeX1Px / borderSizeX1Rem1px / 0.0625rem
x2var(--border-size--x2)borderSizeX2Px / borderSizeX2Rem2px / 0.125rem
  • Check out this project on Github