@gitlab/ui
Version:
GitLab UI Components
389 lines • 17.2 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 glSpacingScale26 = '13rem'
export const glSpacingScale28 = '14rem'
export const glSpacingScale30 = '15rem'
export const glSpacingScale31 = '15.5rem'
export const glSpacingScale34 = '17rem'
export const glSpacingScale48 = '24rem'
export const glSpacingScale62 = '31rem'
export const glSpacingScale75 = '37.5rem'
export const glSpacingScale80 = '40rem'
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 containerXl = '1280px'
export const black = '#000'
export const blackNormal = '#333'
export const white = '#fff'
export const whiteContrast = '#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 = '#fbfafd'
export const gray50 = '#ececef'
export const gray100 = '#dcdcde'
export const gray200 = '#bfbfc3'
export const gray300 = '#a4a3a8'
export const gray400 = '#89888d'
export const gray500 = '#737278'
export const gray600 = '#626168'
export const gray700 = '#535158'
export const gray800 = '#434248'
export const gray900 = '#333238'
export const gray950 = '#1f1e24'
export const brandCharcoal = '#171321'
export const brandOrange01 = '#fca326'
export const brandOrange02 = '#fc6d26'
export const brandOrange03 = '#e24329'
export const brandPurple01 = '#a989f5'
export const brandPurple02 = '#7759c2'
export const brandGray01 = '#d1d0d3'
export const brandGray02 = '#a2a1a6'
export const brandGray03 = '#74717a'
export const brandGray04 = '#45424d'
export const brandGray05 = '#2b2838'
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 = '#c6ed94'
export const dataVizGreen200 = '#b0d97b'
export const dataVizGreen300 = '#94c25e'
export const dataVizGreen400 = '#81ac41'
export const dataVizGreen500 = '#619025'
export const dataVizGreen600 = '#4e7f0e'
export const dataVizGreen700 = '#366800'
export const dataVizGreen800 = '#275600'
export const dataVizGreen900 = '#1a4500'
export const dataVizGreen950 = '#133a03'
export const dataVizAqua50 = '#b5fefd'
export const dataVizAqua100 = '#93f2ef'
export const dataVizAqua200 = '#5edee3'
export const dataVizAqua300 = '#32c5d2'
export const dataVizAqua400 = '#00acc4'
export const dataVizAqua500 = '#0090b1'
export const dataVizAqua600 = '#007b9b'
export const dataVizAqua700 = '#006381'
export const dataVizAqua800 = '#00516c'
export const dataVizAqua900 = '#004059'
export const dataVizAqua950 = '#00344b'
export const dataVizBlue50 = '#e9ebff'
export const dataVizBlue100 = '#d2dcff'
export const dataVizBlue200 = '#b7c6ff'
export const dataVizBlue300 = '#97acff'
export const dataVizBlue400 = '#7992f5'
export const dataVizBlue500 = '#617ae2'
export const dataVizBlue600 = '#4e65cd'
export const dataVizBlue700 = '#3f51ae'
export const dataVizBlue800 = '#374291'
export const dataVizBlue900 = '#303470'
export const dataVizBlue950 = '#2a2b59'
export const dataVizMagenta50 = '#ffe3eb'
export const dataVizMagenta100 = '#ffccdb'
export const dataVizMagenta200 = '#fcacc5'
export const dataVizMagenta300 = '#f88aaf'
export const dataVizMagenta400 = '#e86e9a'
export const dataVizMagenta500 = '#cf4d81'
export const dataVizMagenta600 = '#b93d71'
export const dataVizMagenta700 = '#9a2e5d'
export const dataVizMagenta800 = '#7c214f'
export const dataVizMagenta900 = '#661e3a'
export const dataVizMagenta950 = '#541d31'
export const dataVizOrange50 = '#fae8d1'
export const dataVizOrange100 = '#f5d6b3'
export const dataVizOrange200 = '#eebd8c'
export const dataVizOrange300 = '#e99b60'
export const dataVizOrange400 = '#e07e41'
export const dataVizOrange500 = '#c95d2e'
export const dataVizOrange600 = '#b14f18'
export const dataVizOrange700 = '#92430a'
export const dataVizOrange800 = '#6f3500'
export const dataVizOrange900 = '#5e2f05'
export const dataVizOrange950 = '#4b2707'
export const tGrayA02 = 'rgba(31, 30, 36, 0.02)'
export const tGrayA04 = 'rgba(31, 30, 36, 0.04)'
export const tGrayA06 = 'rgba(31, 30, 36, 0.06)'
export const tGrayA08 = 'rgba(31, 30, 36, 0.08)'
export const tGrayA16 = 'rgba(31, 30, 36, 0.16)'
export const tGrayA24 = 'rgba(31, 30, 36, 0.24)'
export const glTextColor = '#333238'
export const glTextColorSecondary = '#737278'
export const glTextColorDisabled = '#89888d'
export const glFontWeightLight = '300'
export const glFontWeightNormal = '400'
export const glFontWeightSemibold = '500'
export const glFontWeightBold = '600'
export const glFontWeights = '("normal": 400, "bold": 600)'
export const glLineHeight12 = '0.75rem'
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 glLineHeight42 = '2.625rem'
export const glLineHeight44 = '2.75rem'
export const glLineHeight52 = '3.25rem'
export const glFontSize100Fixed = '0.75rem'
export const glFontSize200Fixed = '0.8125rem'
export const glFontSize300Fixed = '0.875rem'
export const glFontSize400Fixed = '1rem'
export const glFontSize500Fixed = '1.125rem'
export const glFontSize600Fixed = '1.3125rem'
export const glFontSize700Fixed = '1.5rem'
export const glFontSize800Fixed = '1.75rem'
export const glFontSize100 = '0.75rem'
export const glFontSize200 = '0.8125rem'
export const glFontSize300 = '0.875rem'
export const glFontSize400 = '1rem'
export const glFontSize500 = 'clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem)'
export const glFontSize600 = 'clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem)'
export const glFontSize700 = 'clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem)'
export const glFontSize800 = 'clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem)'
export const glFontSize = '0.875rem'
export const glFontSizeXs = '0.625rem'
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 glMonospaceFont = ''
export const glRegularFont = 'GitLab Sans ", -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": ("GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": ("GitLab Sans", -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 borderColor = '#dcdcde'
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 glTransitionDurationFast = '0.1s'
export const outlineOffset = '1px'
export const outlineWidth = '2px'
export const outline = '3px'
export const focusRing = ''
export const focusRingInset = ''
export const focusRingDark = ''
export const focusRingOutline = '2px solid #428fdc'
export const toastMaxWidth = '36.625rem'
export const toastPaddingRight = '2.625rem'
export const toastBackgroundColor = '#303030'
export const chartTooltipMaxWidth = '32rem'
export const glIconChevronLeft = ''
export const glIconChevronRight = ''
export const glIconChevronDown = ''
export const glIconSelectChevronDown = ''
export const glIconCheck = ''
export const glIconIndeterminate = ''
export const glIconRadio = ''
export const defaultIconSize = '1rem'
export const glIconSizes = '8 12 14 16 24 32 48 72'
export const glDropdownWidth = '15rem'
export const glNewDropdownMinWidth = '15.5rem'
export const glNewDropdownMaxWidth = '28.5rem'
export const glDropdownWidthNarrow = '10rem'
export const glDropdownWidthWide = '25rem'
export const glMaxDropdownMaxHeight = '19.5rem'
export const glBroadcastMessageNotificationMaxWidth = '18.75rem'
export const glModalSmallWidth = '32rem'
export const glModalMediumWidth = '48rem'
export const glModalLargeWidth = '61.875rem'
export const modalHeaderBorderColor = '#bfbfc3'
export const modalFooterBorderColor = '#bfbfc3'
export const modalTitleLineHeight = '1.25rem'
export const modalBackdropBg = '#000'
export const modalBackdropOpacity = '0.64'
export const bodyColor = '#333238'
export const enableValidationIcons = 'false'
export const secondary = '#ececef'
export const success = '#108548'
export const info = '#1f75cb'
export const warning = '#ab6100'
export const danger = '#dd2b0e'
export const fontWeightBold = '600'
export const fontFamilySansSerif = '"GitLab Sans", -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 = '"GitLab Mono", "JetBrains Mono", "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 = '#ececef'
export const cardBorderColor = '#dcdcde'
export const cardCapBg = '#fbfafd'
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 = '#dcdcde'
export const tooltipOpacity = '1'