Tokens v1.3.0

Getting started

To install @igloo-ui/tokens in your project, you will need to run the following command using npm:

npm install @igloo-ui/tokens

If you prefer Yarn,

yarn add @igloo-ui/tokens

Usage

In Sass, you can import the files by doing:

// Fonts
@import '@igloo-ui/tokens/dist/_fonts.scss';
// SCSS
@import '@igloo-ui/tokens/dist/_variables.scss';
// CSS
@import '@igloo-ui/tokens/dist/_colors.scss';

Base 10 support

If your project uses the mathematical trick of basing the value of 1rem equals 10px, there is also an base10 output within the dist folder of this package.

In CSS, you can import the files by doing:

@import '~@igloo-ui/tokens/dist/base10/variables.css';

Options

color

TokenValuePreview
$electric-blue-50#EDF3FE
Ag
$electric-blue-100#C1D3FE
Ag
$electric-blue-200#95B3FE
Ag
$electric-blue-300#6893FF
Ag
$electric-blue-400#3C73FF
Ag
$electric-blue-500#1053FF
Ag
$electric-blue-600#0C46D0
Ag
$electric-blue-700#0939A2
Ag
$electric-blue-800#052C73
Ag
$electric-blue-900#011F44
Ag
$sky-50#E5F4FB
Ag
$sky-100#B2DDF2
Ag
$sky-200#7FC6EA
Ag
$dandelion-50#FEF8E2
Ag
$dandelion-100#FDEBB6
Ag
$dandelion-200#FDDE88
Ag
$dandelion-300#FCD35A
Ag
$dandelion-400#FBC73B
Ag
$dandelion-500#FABF2C
Ag
$dandelion-600#F9B127
Ag
$coral-50#F9EEEF
Ag
$coral-100#FFD8D2
Ag
$coral-200#FFC3BA
Ag
$coral-300#FF988B
Ag
$coral-400#FF7160
Ag
$coral-500#F96155
Ag
$coral-600#E24D48
Ag
$coral-700#BD494A
Ag
$coral-800#9A3842
Ag
$coral-900#6B2837
Ag
$coral-950#422439
Ag
$seaweed-50#D6F9F3
Ag
$seaweed-200#9FE9DC
Ag
$seaweed-300#85D9C9
Ag
$seaweed-400#30C9AD
Ag
$seaweed-500#0CBA9D
Ag
$seaweed-600#00A587
Ag
$seaweed-700#00977A
Ag
$seaweed-800#00765B
Ag
$seaweed-900#00593F
Ag
$strawberry-fields-50#F9E4E6
Ag
$strawberry-fields-100#F1BBC1
Ag
$strawberry-fields-200#E7919A
Ag
$strawberry-fields-300#DB6A74
Ag
$creamsicle-25#F9F7F6
Ag
$creamsicle-50#FFF6EB
Ag
$creamsicle-75#FFF0DF
Ag
$creamsicle-100#FFE3C2
Ag
$creamsicle-150#FFCB96
Ag
$creamsicle-200#FFA878
Ag
$creamsicle-300#FA8742
Ag
$grey-95#F8F8F8
Ag
$grey-100#F7F9FA
Ag
$grey-200#EFF1F5
Ag
$grey-250#E8EBEF
Ag
$grey-300#D5D9DE
Ag
$grey-400#BDC6D0
Ag
$grey-500#838B95
Ag
$grey-600#606B79
Ag
$grey-700#32455B
Ag
$grey-800#233043
Ag
$grey-900#19222F
Ag
$black#000000
Ag
$samoyed#ffffff
Ag

fontFamily

TokenValuePreview
$primary-font-familyInter
Ag
$secondary-font-familyGT-Walsheim
Ag

fontWeight

TokenValuePreview
$font-weight-regularnormal
Ag
$font-weight-medium500
Ag
$font-weight-semi-bold600
Ag
$font-weight-bold700
Ag

fontSize

TokenValuePreview
$font-size-11rem
Ag
$font-size-21.2rem
Ag
$font-size-31.4rem
Ag
$font-size-41.6rem
Ag
$font-size-51.8rem
Ag
$font-size-62.2rem
Ag
$font-size-72.4rem
Ag
$font-size-83rem
Ag
$font-size-93.2rem
Ag
$font-size-104.8rem
Ag

lineHeight

TokenValuePreview
$line-height-xxxl1.5
Ag
$line-height-xxl1.4285
Ag
$line-height-xl1.33
Ag
$line-height-lg1.27
Ag
$line-height-md1.25
Ag
$line-height-sm1.2
Ag
$line-height-xs1.166
Ag
$line-height-xxs1.14
Ag
$line-height-xxxs1.125
Ag

mediaQuery

TokenValuePreview
$breakpoints-sm600px
Ag
$breakpoints-md768px
Ag
$breakpoints-lg992px
Ag
$breakpoints-xl1200px
Ag
$breakpoints-xxl1440px
Ag

borderRadius

TokenValuePreview
$border-radius-none0
Ag
$border-radius-xs0.2rem
Ag
$border-radius-sm0.4rem
Ag
$border-radius-md0.6rem
Ag
$border-radius-xl1.6rem
Ag
$border-radius-card0.4rem
Ag

shadow

TokenValuePreview
$shadow-60 0.1rem 0.6rem 0 rgba(35, 48, 67, 0.1)
Ag
$shadow-120 0.4rem 1rem 0.4rem rgba(35, 48, 67, 0.1)
Ag
$shadow-240 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1)
Ag

focus

TokenValuePreview
$focus0 0 0 2px #ffffff, 0 0 0 3.5px #0C46D0
Ag

spacing

TokenValuePreview
$space-00
Ag
$space-10.4rem
Ag
$space-20.8rem
Ag
$space-31.6rem
Ag
$space-42.4rem
Ag
$space-53.2rem
Ag
$space-64rem
Ag
$space-74.8rem
Ag
$space-86.4rem
Ag
$space-98rem
Ag
$space-109.6rem
Ag

zIndex

TokenValuePreview
$z-index-00
Ag
$z-index-1010
Ag
$z-index-2020
Ag
$z-index-3030
Ag
$z-index-4040
Ag
$z-index-5050
Ag
$z-index-6060
Ag
$z-index-7070
Ag
$z-index-8080
Ag
$z-index-9090
Ag
$z-index-100100
Ag
$z-index-min-1
Ag
$z-index-max999
Ag
$z-index-autoauto
Ag