@gitlab/ui
Version:
GitLab UI Components
246 lines • 10.6 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 glSpacingScale12 = '5rem'
export const glSpacingScale13 = '6rem'
export const breakpointSm = '36rem'
export const breakpointMd = '48rem'
export const breakpointLg = '62rem'
export const breakpointXl = '75rem'
export const transparent = 'transparent'
export const black = '#000'
export const blackNormal = '#333'
export const white = '#fff'
export const whiteLight = '#fff'
export const whiteNormal = '#f0f0f0'
export const whiteDark = '#eaeaea'
export const whiteTransparent = 'rgba(255, 255, 255, 0.8)'
export const green50 = '#f1fdf6'
export const green100 = '#dcf5e7'
export const green200 = '#b3e6c8'
export const green300 = '#75d09b'
export const green400 = '#37b96d'
export const green500 = '#1aaa55'
export const green600 = '#168f48'
export const green700 = '#12753a'
export const green800 = '#0e5a2d'
export const green900 = '#0a4020'
export const green950 = '#072b15'
export const blue50 = '#f6fafe'
export const blue100 = '#e4f0fb'
export const blue200 = '#b8d6f4'
export const blue300 = '#73afea'
export const blue400 = '#418cd8'
export const blue500 = '#1f78d1'
export const blue600 = '#1b69b6'
export const blue700 = '#17599c'
export const blue800 = '#134a81'
export const blue900 = '#0f3b66'
export const blue950 = '#0a2744'
export const orange50 = '#fffaf4'
export const orange100 = '#fff1de'
export const orange200 = '#fed69f'
export const orange300 = '#fdbc60'
export const orange400 = '#fca429'
export const orange500 = '#fc9403'
export const orange600 = '#de7e00'
export const orange700 = '#c26700'
export const orange800 = '#a35200'
export const orange900 = '#853c00'
export const orange950 = '#592800'
export const red50 = '#fef6f5'
export const red100 = '#fbe5e1'
export const red200 = '#f2b4a9'
export const red300 = '#ea8271'
export const red400 = '#e05842'
export const red500 = '#db3b21'
export const red600 = '#c0341d'
export const red700 = '#a62d19'
export const red800 = '#8b2615'
export const red900 = '#711e11'
export const red950 = '#4b140b'
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 = '#6b51b8'
export const purple700 = '#5943b6'
export const purple800 = '#453894'
export const purple900 = '#2f2a6b'
export const purple950 = '#232150'
export const gray50 = '#fafafa'
export const gray100 = '#f2f2f2'
export const gray200 = '#dfdfdf'
export const gray300 = '#ccc'
export const gray400 = '#bababa'
export const gray500 = '#a7a7a7'
export const gray600 = '#919191'
export const gray700 = '#707070'
export const gray800 = '#4f4f4f'
export const gray900 = '#2e2e2e'
export const gray950 = '#1f1f1f'
export const glThemes = 'indigo , blue , light-blue , green , red , light-red'
export const themeIndigo50 = '#f7f7ff'
export const themeIndigo100 = '#ebebfa'
export const themeIndigo200 = '#d1d1f0'
export const themeIndigo300 = '#a6a6de'
export const themeIndigo400 = '#7c7ccc'
export const themeIndigo500 = '#6666c4'
export const themeIndigo600 = '#5b5bbd'
export const themeIndigo700 = '#4b4ba3'
export const themeIndigo800 = '#393982'
export const themeIndigo900 = '#292961'
export const themeIndigo950 = '#1a1a40'
export const themeBlue50 = '#f4f8fc'
export const themeBlue100 = '#e6edf5'
export const themeBlue200 = '#c8d7e6'
export const themeBlue300 = '#97b3cf'
export const themeBlue400 = '#648cb4'
export const themeBlue500 = '#4a79a8'
export const themeBlue600 = '#3e6fa0'
export const themeBlue700 = '#305c88'
export const themeBlue800 = '#25496e'
export const themeBlue900 = '#1a3652'
export const themeBlue950 = '#0f2235'
export const themeLightBlue50 = '#f2f7fc'
export const themeLightBlue100 = '#ebf1f7'
export const themeLightBlue200 = '#c9dcf2'
export const themeLightBlue300 = '#83abd4'
export const themeLightBlue400 = '#4d86bf'
export const themeLightBlue500 = '#367cc2'
export const themeLightBlue600 = '#3771ab'
export const themeLightBlue700 = '#2261a1'
export const themeLightBlue800 = '#25496e'
export const themeLightBlue900 = '#1a3652'
export const themeLightBlue950 = '#0f2235'
export const themeGreen50 = '#f2faf6'
export const themeGreen100 = '#e4f3ea'
export const themeGreen200 = '#c0dfcd'
export const themeGreen300 = '#8ac2a1'
export const themeGreen400 = '#52a274'
export const themeGreen500 = '#35935c'
export const themeGreen600 = '#288a50'
export const themeGreen700 = '#1c7441'
export const themeGreen800 = '#145d33'
export const themeGreen900 = '#0d4524'
export const themeGreen950 = '#072d16'
export const themeRed50 = '#fcf4f2'
export const themeRed100 = '#fae9e6'
export const themeRed200 = '#ebcac5'
export const themeRed300 = '#d99b91'
export const themeRed400 = '#b0655a'
export const themeRed500 = '#ad4a3b'
export const themeRed600 = '#9e4133'
export const themeRed700 = '#912f20'
export const themeRed800 = '#78291d'
export const themeRed900 = '#691a16'
export const themeRed950 = '#36140f'
export const themeLightRed50 = '#fff6f5'
export const themeLightRed100 = '#fae2de'
export const themeLightRed200 = '#f7d5d0'
export const themeLightRed300 = '#d9796a'
export const themeLightRed400 = '#cf604e'
export const themeLightRed500 = '#c24b38'
export const themeLightRed600 = '#b03927'
export const themeLightRed700 = '#a62e21'
export const themeLightRed800 = '#78291d'
export const themeLightRed900 = '#691a16'
export const themeLightRed950 = '#36140f'
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 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.4375rem'
export const glFontSizeMarkdownH2 = '1.1875rem'
export const glFontSizeMarkdownH3 = '1rem'
export const glFontSizeMarkdownH4 = '1rem'
export const glFontSizeMarkdownHn = '0.875rem'
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 glFontSizeCompactMarkdown = '0.875rem'
export const glFontSizeCompactMarkdownSm = '0.75rem'
export const glFontSizeCompactMarkdownH1 = '1.1875rem'
export const glFontSizeCompactMarkdownH2 = '1rem'
export const glFontSizeCompactMarkdownHn = '0.875rem'
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 = '0.0625rem'
export const glBorderSize2 = '0.125rem'
export const glBorderSize3 = '0.1875rem'
export const glBorderSize4 = '0.25rem'
export const glBorderSize5 = '0.3125rem'
export const glBorderSize8 = '0.5rem'
export const glBorderRadiusSmall = '0.125rem'
export const glBorderRadiusBase = '0.25rem'
export const glBorderRadiusLarge = '0.5rem'
export const glBorderRadiusFull = '50%'
export const glTransitionDurationSlow = '0.4s'
export const glTransitionDurationMedium = '0.2s'
export const toastMaxWidth = '36.625rem'
export const toastPaddingRight = '2.625rem'
export const toastBackgroundOpacity = '0.95'
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 = '1.125rem'
export const glIconSizes = '8 10 12 14 16 18 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'