@gitlab/ui
Version:
GitLab UI Components
339 lines • 14.9 kB
JavaScript
export const gridSize = '0.5rem'
export const glSpacingScale1 = '0.125rem'
export const glSpacingScale2 = '0.25rem'
export const glSpacingScale3 = '0.5rem'
export const glSpacingScale4 = '0.75rem'
export const glSpacingScale5 = '1rem'
export const glSpacingScale6 = '1.5rem'
export const glSpacingScale7 = '2rem'
export const glSpacingScale8 = '2.5rem'
export const glSpacingScale9 = '3rem'
export const glSpacingScale10 = '3.5rem'
export const glSpacingScale11 = '4rem'
export const glSpacingScale115 = '4.5rem'
export const glSpacingScale12 = '5rem'
export const glSpacingScale13 = '6rem'
export const glSpacingScale15 = '7.5rem'
export const glSpacingScale20 = '10rem'
export const breakpointSm = '576px'
export const breakpointMd = '768px'
export const breakpointLg = '992px'
export const breakpointXl = '1200px'
export const breakpoints = '(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)'
export const limitedLayoutWidth = '990px'
export const black = '#000'
export const blackNormal = '#333'
export const white = '#fff'
export const whiteNormal = '#f0f0f0'
export const whiteDark = '#eaeaea'
export const whiteTransparent = 'rgba(255, 255, 255, 0.8)'
export const transparentRgba = 'rgba(255, 255, 255, 0)'
export const green50 = '#ecf4ee'
export const green100 = '#c3e6cd'
export const green200 = '#91d4a8'
export const green300 = '#52b87a'
export const green400 = '#2da160'
export const green500 = '#108548'
export const green600 = '#217645'
export const green700 = '#24663b'
export const green800 = '#0d532a'
export const green900 = '#0a4020'
export const green950 = '#072b15'
export const blue50 = '#e9f3fc'
export const blue100 = '#cbe2f9'
export const blue200 = '#9dc7f1'
export const blue300 = '#63a6e9'
export const blue400 = '#428fdc'
export const blue500 = '#1f75cb'
export const blue600 = '#1068bf'
export const blue700 = '#0b5cad'
export const blue800 = '#064787'
export const blue900 = '#033464'
export const blue950 = '#002850'
export const orange50 = '#fdf1dd'
export const orange100 = '#f5d9a8'
export const orange200 = '#e9be74'
export const orange300 = '#d99530'
export const orange400 = '#c17d10'
export const orange500 = '#ab6100'
export const orange600 = '#9e5400'
export const orange700 = '#8f4700'
export const orange800 = '#703800'
export const orange900 = '#5c2900'
export const orange950 = '#421f00'
export const red50 = '#fcf1ef'
export const red100 = '#fdd4cd'
export const red200 = '#fcb5aa'
export const red300 = '#f57f6c'
export const red400 = '#ec5941'
export const red500 = '#dd2b0e'
export const red600 = '#c91c00'
export const red700 = '#ae1800'
export const red800 = '#8d1300'
export const red900 = '#660e00'
export const red950 = '#4d0a00'
export const purple50 = '#f4f0ff'
export const purple100 = '#e1d8f9'
export const purple200 = '#cbbbf2'
export const purple300 = '#ac93e6'
export const purple400 = '#9475db'
export const purple500 = '#7b58cf'
export const purple600 = '#694cc0'
export const purple700 = '#5943b6'
export const purple800 = '#453894'
export const purple900 = '#2f2a6b'
export const purple950 = '#232150'
export const gray10 = '#fafafa'
export const gray50 = '#f0f0f0'
export const gray100 = '#dbdbdb'
export const gray200 = '#bfbfbf'
export const gray300 = '#999'
export const gray400 = '#868686'
export const gray500 = '#666'
export const gray600 = '#5e5e5e'
export const gray700 = '#525252'
export const gray800 = '#404040'
export const gray900 = '#303030'
export const gray950 = '#1f1f1f'
export const glThemes = 'indigo , blue , light-blue , green , red , light-red'
export const themeIndigo50 = '#f1f1ff'
export const themeIndigo100 = '#dbdbf8'
export const themeIndigo200 = '#c7c7f2'
export const themeIndigo300 = '#a2a2e6'
export const themeIndigo400 = '#8181d7'
export const themeIndigo500 = '#6666c4'
export const themeIndigo600 = '#5252b5'
export const themeIndigo700 = '#41419f'
export const themeIndigo800 = '#303083'
export const themeIndigo900 = '#222261'
export const themeIndigo950 = '#14143d'
export const themeBlue50 = '#cdd8e3'
export const themeBlue100 = '#b9cadc'
export const themeBlue200 = '#a6bdd5'
export const themeBlue300 = '#81a5c9'
export const themeBlue400 = '#628eb9'
export const themeBlue500 = '#4977a5'
export const themeBlue600 = '#346596'
export const themeBlue700 = '#235180'
export const themeBlue800 = '#153c63'
export const themeBlue900 = '#0b2640'
export const themeBlue950 = '#04101c'
export const themeLightBlue50 = '#dde6ee'
export const themeLightBlue100 = '#c1d4e6'
export const themeLightBlue200 = '#a0bedc'
export const themeLightBlue300 = '#74a3d3'
export const themeLightBlue400 = '#4f8bc7'
export const themeLightBlue500 = '#3476b9'
export const themeLightBlue600 = '#2268ae'
export const themeLightBlue700 = '#145aa1'
export const themeLightBlue800 = '#0e4d8d'
export const themeLightBlue900 = '#0c4277'
export const themeLightBlue950 = '#0a3764'
export const themeGreen50 = '#dde9de'
export const themeGreen100 = '#b1d6b5'
export const themeGreen200 = '#8cc497'
export const themeGreen300 = '#69af7d'
export const themeGreen400 = '#499767'
export const themeGreen500 = '#308258'
export const themeGreen600 = '#25744c'
export const themeGreen700 = '#1b653f'
export const themeGreen800 = '#155635'
export const themeGreen900 = '#0e4328'
export const themeGreen950 = '#052e19'
export const themeRed50 = '#f4e9e7'
export const themeRed100 = '#ecd3d0'
export const themeRed200 = '#e3bab5'
export const themeRed300 = '#d59086'
export const themeRed400 = '#c66e60'
export const themeRed500 = '#ad4a3b'
export const themeRed600 = '#a13322'
export const themeRed700 = '#8f2110'
export const themeRed800 = '#761405'
export const themeRed900 = '#580d02'
export const themeRed950 = '#380700'
export const themeLightRed50 = '#faf2f1'
export const themeLightRed100 = '#f6d9d5'
export const themeLightRed200 = '#ebada2'
export const themeLightRed300 = '#e07f6f'
export const themeLightRed400 = '#d36250'
export const themeLightRed500 = '#c24b38'
export const themeLightRed600 = '#b53a26'
export const themeLightRed700 = '#a02e1c'
export const themeLightRed800 = '#8b2212'
export const themeLightRed900 = '#751709'
export const themeLightRed950 = '#5c1105'
export const dataVizGreen50 = '#ddfab7'
export const dataVizGreen100 = '#c9f097'
export const dataVizGreen200 = '#b0de73'
export const dataVizGreen300 = '#94c25e'
export const dataVizGreen400 = '#83ab4a'
export const dataVizGreen500 = '#608b2f'
export const dataVizGreen600 = '#487900'
export const dataVizGreen700 = '#366800'
export const dataVizGreen800 = '#275600'
export const dataVizGreen900 = '#1a4500'
export const dataVizGreen950 = '#0f3300'
export const dataVizAqua50 = '#b8fff2'
export const dataVizAqua100 = '#93fae7'
export const dataVizAqua200 = '#5eebdf'
export const dataVizAqua300 = '#25d2d2'
export const dataVizAqua400 = '#0bb6c6'
export const dataVizAqua500 = '#0094b6'
export const dataVizAqua600 = '#0080a1'
export const dataVizAqua700 = '#006887'
export const dataVizAqua800 = '#004d67'
export const dataVizAqua900 = '#003f57'
export const dataVizAqua950 = '#00293d'
export const dataVizBlue50 = '#e9ebff'
export const dataVizBlue100 = '#d4dcfa'
export const dataVizBlue200 = '#b7c6ff'
export const dataVizBlue300 = '#97acff'
export const dataVizBlue400 = '#748eff'
export const dataVizBlue500 = '#5772ff'
export const dataVizBlue600 = '#445cf2'
export const dataVizBlue700 = '#3547de'
export const dataVizBlue800 = '#232fcf'
export const dataVizBlue900 = '#1e23a8'
export const dataVizBlue950 = '#11118a'
export const dataVizMagenta50 = '#ffe3eb'
export const dataVizMagenta100 = '#ffc9d9'
export const dataVizMagenta200 = '#fcacc5'
export const dataVizMagenta300 = '#ff85af'
export const dataVizMagenta400 = '#f2639a'
export const dataVizMagenta500 = '#d84280'
export const dataVizMagenta600 = '#c52c6b'
export const dataVizMagenta700 = '#b31756'
export const dataVizMagenta800 = '#950943'
export const dataVizMagenta900 = '#7a0033'
export const dataVizMagenta950 = '#570028'
export const dataVizOrange50 = '#fae8d1'
export const dataVizOrange100 = '#f7d8b5'
export const dataVizOrange200 = '#f3c291'
export const dataVizOrange300 = '#eb9a5c'
export const dataVizOrange400 = '#e17223'
export const dataVizOrange500 = '#d14e00'
export const dataVizOrange600 = '#b24800'
export const dataVizOrange700 = '#944100'
export const dataVizOrange800 = '#6f3500'
export const dataVizOrange900 = '#5c2b00'
export const dataVizOrange950 = '#421e00'
export const darkenNormalFactor = '7%'
export const darkenDarkFactor = '10%'
export const darkenBorderFactor = '5%'
export const darkenBorderDashedFactor = '25%'
export const tGrayA02 = 'rgba(0, 0, 0, 0.02)'
export const tGrayA04 = 'rgba(0, 0, 0, 0.04)'
export const tGrayA06 = 'rgba(0, 0, 0, 0.06)'
export const tGrayA08 = 'rgba(0, 0, 0, 0.08)'
export const tGrayA24 = 'rgba(0, 0, 0, 0.24)'
export const glTextColor = '#303030'
export const glTextColorSecondary = '#666'
export const glFontWeightLight = '300'
export const glFontWeightNormal = '400'
export const glFontWeightBold = '600'
export const glFontWeights = '("normal": 400, "bold": 600)'
export const glLineHeight16 = '1rem'
export const glLineHeight20 = '1.25rem'
export const glLineHeight24 = '1.5rem'
export const glLineHeight28 = '1.75rem'
export const glLineHeight32 = '2rem'
export const glLineHeight36 = '2.25rem'
export const glLineHeight44 = '2.75rem'
export const glLineHeight52 = '3.25rem'
export const glFontSize = '0.875rem'
export const glFontSizeSm = '0.75rem'
export const glFontSizeLg = '1rem'
export const glFontSizeHDisplay = '1.75rem'
export const glFontSizeH1 = '1.4375rem'
export const glFontSizeH2 = '1.1875rem'
export const glFontSizeHDisplayMd = '1.9375rem'
export const glFontSizeH1Md = '1.5625rem'
export const glFontSizeH2Md = '1.25rem'
export const glFontSizeHDisplayXl = '2.8125rem'
export const glFontSizeH1Xl = '2rem'
export const glFontSizeH2Xl = '1.4375rem'
export const glFontSizeMarkdown = '1rem'
export const glFontSizeMarkdownSm = '0.875rem'
export const glFontSizeMarkdownH1 = '1.75rem'
export const glFontSizeMarkdownH2 = '1.4375rem'
export const glFontSizeMarkdownH3 = '1.1875rem'
export const glFontSizeMarkdownH1Md = '1.9375rem'
export const glFontSizeMarkdownH2Md = '1.5625rem'
export const glFontSizeMarkdownH3Md = '1.25rem'
export const glFontSizeMarkdownH1Xl = '2.8125rem'
export const glFontSizeMarkdownH2Xl = '2rem'
export const glFontSizeMarkdownH3Xl = '1.4375rem'
export const glFontSizeCompactMarkdownH1 = '1.1875rem'
export const glFontSizeCompactMarkdownH1Md = '1.25rem'
export const glFontSizeCompactMarkdownH1Xl = '1.4375rem'
export const glFontSizeMonospace = '0.8125rem'
export const glFontSizeMonospaceLg = '0.9375rem'
export const glFontSizeMonospaceSm = '0.6875rem'
export const glMonospaceFont = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
export const glRegularFont = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
export const glFonts = '("monospace": "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace, "regular": -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")'
export const glBorderSize1 = '1px'
export const glBorderSize2 = '2px'
export const glBorderSize3 = '3px'
export const glBorderSize4 = '4px'
export const glBorderSize5 = '5px'
export const glBorderSize8 = '8px'
export const glBorderRadiusSmall = '0.125rem'
export const glBorderRadiusBase = '0.25rem'
export const glBorderRadiusLarge = '0.5rem'
export const glBorderRadius6 = '1.5rem'
export const glBorderRadius7 = '2rem'
export const glBorderRadiusFull = '50%'
export const glTransitionDurationSlow = '0.4s'
export const glTransitionDurationMedium = '0.2s'
export const focusRing = '0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48)'
export const focusRingInset = 'inset 0 0 0 3px rgba(31, 117, 203, 0.48), inset 0 0 0 4px rgba(255, 255, 255, 0.4)'
export const toastMaxWidth = '36.625rem'
export const toastPaddingRight = '2.625rem'
export const toastBackgroundColor = '#303030'
export const chartTooltipMaxWidth = '32rem'
export const glIconChevronLeft = '#{'data:image/svg+xml}'
export const glIconChevronRight = '#{'data:image/svg+xml}'
export const glIconChevronDown = '#{'data:image/svg+xml}'
export const defaultIconSize = '1rem'
export const glIconSizes = '8 12 14 16 24 32 48 72'
export const glDropdownWidth = '15rem'
export const glDropdownWidthNarrow = '10rem'
export const glDropdownWidthWide = '25rem'
export const glMaxDropdownMaxHeight = '19.5rem'
export const glBroadcastMessageTextMaxWidth = '58.375rem'
export const glModalSmallWidth = '32rem'
export const glModalMediumWidth = '48rem'
export const glModalLargeWidth = '61.875rem'
export const modalHeaderBorderColor = '#bfbfbf'
export const modalFooterBorderColor = '#bfbfbf'
export const modalTitleLineHeight = '1.25rem'
export const modalBackdrop = '#000'
export const modalBackdropOpacity = '0.64'
export const bodyColor = '#303030'
export const secondary = '#f0f0f0'
export const success = '#108548'
export const info = '#1f75cb'
export const warning = '#ab6100'
export const danger = '#dd2b0e'
export const fontWeightBold = '600'
export const fontFamilySansSerif = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
export const fontFamilyMonospace = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
export const h1FontSize = '2.1875rem'
export const h2FontSize = '1.75rem'
export const h3FontSize = '1.53125rem'
export const h4FontSize = '1.3125rem'
export const h5FontSize = '1.09375rem'
export const h6FontSize = '0.875rem'
export const spacer = '0.5rem'
export const spacers = '(1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2rem, 6: 2.5rem, 7: 3rem, 8: 3.5rem, 9: 4rem)'
export const tableAccentBg = '#f0f0f0'
export const cardBorderColor = '#dbdbdb'
export const cardCapBg = '#fafafa'
export const glFormInputSizes = '(xs: 5rem, sm: 10rem, md: 15rem, lg: 20rem, xl: 35rem)'
export const popoverBg = '#fff'
export const popoverArrowWidth = '0.5rem'
export const popoverArrowHeight = '0.25rem'
export const popoverArrowColor = '#fff'
export const popoverArrowOuterColor = '#dbdbdb'
export const tooltipOpacity = '1'