box-ui-elements/src/styles/variables.ts

Box UI Elements

/* File auto-generated */
export const white = '#fff'; // white
export const black = '#000'; // black
export const countBadgeBackground = '#e9163c'; // countBadgeBackground
export const bdlBoxBlue = '#0061d5'; // bdl-box-blue
export const bdlBoxBlue80 = '#3381dd'; // bdl-box-blue-80
export const bdlBoxBlue50 = '#7fb0ea'; // 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 bdlGray65 = '#6f6f6f'; // bdl-gray-65
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 bdlDarkBlue20 = '#ccd8e6'; // bdl-dark-blue-20
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 bdlLightBlue20 = '#d3e7fe'; // bdl-light-blue-20
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 bdlYellorange20 = '#fdf0d1'; // bdl-yellorange-20
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 bdlYellow20 = '#fff7cc'; // bdl-yellow-20
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 bdlGreenLight20 = '#d4f3e6'; // bdl-green-light-20
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 bdlGrimace20 = '#dad4f3'; // bdl-grimace-20
export const bdlGrimace10 = '#ece9f8'; // bdl-grimace-10
export const bdlGrimace05 = '#f6f4fc'; // bdl-grimace-05
export const bdlGrimace02 = '#fbfbfe'; // bdl-grimace-02
export const bdlOrange = '#f1811a'; // bdl-orange
export const bdlOrange50 = '#f8c08c'; // bdl-orange-50
export const bdlOrange20 = '#fce6d1'; // bdl-orange-20
export const bdlOrange10 = '#fdf2e8'; // bdl-orange-10
export const bdlOrange05 = '#fef8f3'; // bdl-orange-05
export const bdlOrange02 = '#fffdfb'; // bdl-orange-02
export const bdlPurpleRain = '#9f3fed'; // bdl-purple-rain
export const bdlPurpleRain50 = '#cf9ff6'; // bdl-purple-rain-50
export const bdlPurpleRain20 = '#ecd9fb'; // bdl-purple-rain-20
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 bdlWatermelonRed20 = '#fbd7dd'; // bdl-watermelon-red-20
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 bdlLineHeight = '20px'; // bdl-line-height
export const bdlFontSize = '13px'; // bdl-fontSize
export const bdlFontSizeMinimum = '11px'; // bdl-fontSize-minimum
export const bdlFontSizeDejaBlue = '14px'; // bdl-fontSize--dejaBlue
export const avatarColors = ['#0061d5', '#003c84', '#6f6f6f', '#222', '#4826c2', '#9f3fed']; // avatar-colors
export const modalDialogZIndex = '160'; // modal-dialog-z-index
export const menuZIndex = '170'; // menu-z-index
export const submenuZIndex = '171'; // submenu-z-index
export const overlayZIndex = '190'; // overlay-z-index
export const tooltipZIndex = '190'; // tooltip-z-index
export const notificationsWrapperZIndex = '200'; // notifications-wrapper-z-index
export const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size
export const bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med
export const bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large
export const bdlBorderRadiusSizeXlarge = '12px'; // bdl-border-radius-size-xlarge
export const bdlHeaderBoxShadow = ['0 0 10px 0 rgba(0', '0', '0', '0.05)']; // bdl-header-box-shadow
export const bdlGridUnit = '4px'; // bdl-grid-unit
export const bdlGridUnitPx = '4'; // bdl-grid-unit-px
export const bdlHeaderHeight = '64px'; // bdl-header-height
export const bdlBtnBorderWidth = '1px'; // bdl-btn-border-width
export const bdlBtnHeight = '32px'; // bdl-btn-height
export const bdlBtnHeightLarge = '40px'; // bdl-btn-height-large
export const bdlBtnIconSize = '20px'; // bdl-btn-icon-size
export const bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size
export const bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal
export const bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase
export const bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction
export const sizeSmallMediumMin = '375px'; // size-small-medium-min
export const sizeMediumMin = '461px'; // size-medium-min
export const sizeLargeMin = '768px'; // size-large-min
export const sizeSmallMax = '374px'; // size-small-max
export const sizeSmallMediumMax = '460px'; // size-small-medium-max
export const sizeMediumMax = '767px'; // size-medium-max
export const sizeLargeMax = '1023px'; // size-large-max
export const sizeXlargeMax = '1219px'; // size-xlarge-max
export const smallScreen = '(max-width: 374px)'; // small-screen
export const smallMediumScreen = '(max-width: 460px)'; // small-medium-screen
export const mediumScreen = '(max-width: 767px)'; // medium-screen
export const largeScreen = '(max-width: 1023px)'; // large-screen
export const xlargeScreen = '(max-width: 1219px)'; // xlarge-screen