metadata-based-explorer1/src/styles/variables.js

Box UI Elements

// @flow
// File auto-generated

export const white = '#fff'; // white
export const black = '#000'; // black
export const bdlBoxBlue = '#0061d5'; // bdl-box-blue
export const bdlBoxBlue80 = '#3381dd'; // bdl-box-blue-80
export const bdlBoxBlue50 = '#619de5'; // bdl-box-blue-50
export const bdlBoxBlue40 = '#99c0ee'; // bdl-box-blue-40
export const bdlBoxBlue30 = '#b2cff2'; // bdl-box-blue-30
export const bdlBoxBlue20 = '#ccdff7'; // bdl-box-blue-20
export const bdlBoxBlue10 = '#e5effa'; // bdl-box-blue-10
export const bdlBoxBlue05 = '#f2f7fd'; // bdl-box-blue-05
export const bdlBoxBlue02 = '#fafcfe'; // bdl-box-blue-02
export const bdlGray = '#222'; // bdl-gray
export const bdlGray80 = '#4e4e4e'; // bdl-gray-80
export const bdlGray62 = '#767676'; // bdl-gray-62
export const bdlGray50 = '#909090'; // bdl-gray-50
export const bdlGray40 = '#a7a7a7'; // bdl-gray-40
export const bdlGray30 = '#bcbcbc'; // bdl-gray-30
export const bdlGray20 = '#d3d3d3'; // bdl-gray-20
export const bdlGray10 = '#e8e8e8'; // bdl-gray-10
export const bdlGray05 = '#f4f4f4'; // bdl-gray-05
export const bdlGray02 = '#fbfbfb'; // bdl-gray-02
export const bdlDarkBlue = '#003c84'; // bdl-dark-blue
export const bdlDarkBlue50 = '#7f9dc1'; // bdl-dark-blue-50
export const bdlDarkBlue10 = '#e5ebf2'; // bdl-dark-blue-10
export const bdlDarkBlue05 = '#f2f5f9'; // bdl-dark-blue-05
export const bdlDarkBlue02 = '#fafbfd'; // bdl-dark-blue-02
export const bdlLightBlue = '#2486fc'; // bdl-light-blue
export const bdlLightBlue50 = '#91c2fd'; // bdl-light-blue-50
export const bdlLightBlue10 = '#e9f2fe'; // bdl-light-blue-10
export const bdlLightBlue05 = '#f4f9ff'; // bdl-light-blue-05
export const bdlLightBlue02 = '#fbfdff'; // bdl-light-blue-02
export const bdlYellorange = '#f5b31b'; // bdl-yellorange
export const bdlYellorange50 = '#fad98d'; // bdl-yellorange-50
export const bdlYellorange10 = '#fef7e8'; // bdl-yellorange-10
export const bdlYellorange05 = '#fefbf3'; // bdl-yellorange-05
export const bdlYellorange02 = '#fffefb'; // bdl-yellorange-02
export const bdlYellow = '#ffd700'; // bdl-yellow
export const bdlYellow50 = '#ffeb7f'; // bdl-yellow-50
export const bdlYellow10 = '#fffbe5'; // bdl-yellow-10
export const bdlYellow05 = '#fffdf2'; // bdl-yellow-05
export const bdlYellow02 = '#fffefa'; // bdl-yellow-02
export const bdlGreenLight = '#26c281'; // bdl-green-light
export const bdlGreenLight50 = '#92e0c0'; // bdl-green-light-50
export const bdlGreenLight10 = '#e9f8f2'; // bdl-green-light-10
export const bdlGreenLight05 = '#f4fcf8'; // bdl-green-light-05
export const bdlGreenLight02 = '#fbfefd'; // bdl-green-light-02
export const bdlGrimace = '#4826c2'; // bdl-grimace
export const bdlGrimace50 = '#a392e0'; // bdl-grimace-50
export const bdlGrimace10 = '#ece9f8'; // bdl-grimace-10
export const bdlGrimace05 = '#f6f4fc'; // bdl-grimace-05
export const bdlGrimace02 = '#fbfbfe'; // bdl-grimace-02
export const bdlPurpleRain = '#9f3fed'; // bdl-purple-rain
export const bdlPurpleRain50 = '#cf9ff6'; // bdl-purple-rain-50
export const bdlPurpleRain10 = '#f5ebfd'; // bdl-purple-rain-10
export const bdlPurpleRain05 = '#faf5fe'; // bdl-purple-rain-05
export const bdlPurpleRain02 = '#fdfbff'; // bdl-purple-rain-02
export const bdlWatermelonRed = '#ed3757'; // bdl-watermelon-red
export const bdlWatermelonRed50 = '#f69bab'; // bdl-watermelon-red-50
export const bdlWatermelonRed10 = '#fdebee'; // bdl-watermelon-red-10
export const bdlWatermelonRed05 = '#fef5f6'; // bdl-watermelon-red-05
export const bdlWatermelonRed02 = '#fffbfc'; // bdl-watermelon-red-02
export const bdlSecondaryBlue = '#003c84'; // bdl-secondary-blue
export const bdlNeutral01 = '#222'; // bdl-neutral-01
export const bdlNeutral02 = '#767676'; // bdl-neutral-02
export const bdlNeutral03 = '#909090'; // bdl-neutral-03
export const bdlNeutral04 = '#e8e8e8'; // bdl-neutral-04
export const bdlNeutral05 = '#f4f4f4'; // bdl-neutral-05
export const bdlNeutral06 = '#fbfbfb'; // bdl-neutral-06
export const boxBlue = '#0061d5'; // box-blue
export const primaryColor = '#0061d5'; // primary-color
export const korayIng = '#2a62b9'; // koray-ing
export const pictonBlue = '#3392ec'; // picton-blue
export const hoverBlueBackground = '#f6fafd'; // hover-blue-background
export const hoverBlueBorder = '#d9e3e9'; // hover-blue-border
export const selectedBlueBackground = '#ecf4fc'; // selected-blue-background
export const selectedBlueBorder = '#bfd4df'; // selected-blue-border
export const babyBlue = '#bed4de'; // baby-blue
export const bluePurple = '#6d83ff'; // blue-purple
export const hoverBlue = '#48b6f3'; // hover-blue
export const dustyPlum = '#9b59b6'; // dusty-plum
export const sadSunjin = '#72388f'; // sad-sunjin
export const paleMint = '#eefbf5'; // pale-mint
export const thatsMint = '#26c281'; // thats-mint
export const shadyAcres = '#15aa61'; // shady-acres
export const wildRice = '#ede097'; // wild-rice
export const earlyDawn = '#fffbe5'; // early-dawn
export const lemonMeringue = '#ffd522'; // lemon-meringue
export const dehydrated = '#f5b31b'; // dehydrated
export const kumera = '#81721b'; // kumera
export const madMax = '#f39c12'; // mad-max
export const ayersRock = '#e06e2b'; // ayers-rock
export const amaranth = '#ed3757'; // amaranth
export const lavenderBlush = '#feeff2'; // lavender-blush
export const carissma = '#eb8b9c'; // carissma
export const greatBallsOfFire = '#ef4836'; // great-balls-of-fire
export const kingCrimson = '#c82341'; // king-crimson
export const bfive = '#b5b5b5'; // bfive
export const dtwo = '#d2d2d2'; // dtwo
export const efive = '#e5e5e5'; // efive
export const ffive = '#f5f5f5'; // ffive
export const fnine = '#f9f9f9'; // fnine
export const seesee = '#ccc'; // seesee
export const haze = '#fcfcfc'; // haze
export const offWhite = '#e8e8e8'; // off-white
export const sfFog = '#bdc3c7'; // sf-fog
export const karlFog = '#fbfbfc'; // karl-fog
export const silverChalice = '#afafaf'; // silver-chalice
export const stormsAComin = '#737f8b'; // storms-a-comin
export const blueSteel = '#2c3e50'; // blue-steel
export const betterBlack = '#494949'; // better-black
export const downtownGrey = '#999ea4'; // downtown-grey
export const twos = '#222'; // twos
export const fours = '#444'; // fours
export const sevens = '#777'; // sevens
export const eights = '#888'; // eights
export const nines = '#999'; // nines
export const eees = '#eee'; // eees
export const tendemobGrey = '#64686d'; // tendemob-grey
export const sunsetGrey = '#464a4f'; // sunset-grey
export const seventySixers = '#767676'; // seventy-sixers
export const approxMischkaGrey = '#a3adb9'; // approx-mischka-grey
export const lightestCharcoal = '#c4c4c4'; // lightest-charcoal
export const purpleRain = '#9f3fed'; // purple-rain
export const modalDialogZIndex = '160'; // modal-dialog-z-index
export const menuZIndex = '170'; // menu-z-index
export const notificationsWrapperZIndex = '180'; // notifications-wrapper-z-index
export const overlayZIndex = '190'; // overlay-z-index
export const tooltipZIndex = '190'; // tooltip-z-index
export const bdlLineHeight = '20px'; // bdl-line-height
export const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size
export const bdlTransitionDuration200Ms = '0.2s'; // bdl-transition-duration-200ms