UNPKG

@gitlab/ui

Version:
543 lines (534 loc) • 20 kB
/** * Do not edit directly, this file was auto-generated. */ const baseColors = { 'blue-50': 'var(--blue-50)', 'blue-100': 'var(--blue-100)', 'blue-200': 'var(--blue-200)', 'blue-300': 'var(--blue-300)', 'blue-400': 'var(--blue-400)', 'blue-500': 'var(--blue-500)', 'blue-600': 'var(--blue-600)', 'blue-700': 'var(--blue-700)', 'blue-800': 'var(--blue-800)', 'blue-900': 'var(--blue-900)', 'blue-950': 'var(--blue-950)', 'gray-10': 'var(--gray-10)', 'gray-50': 'var(--gray-50)', 'gray-100': 'var(--gray-100)', 'gray-200': 'var(--gray-200)', 'gray-300': 'var(--gray-300)', 'gray-400': 'var(--gray-400)', 'gray-500': 'var(--gray-500)', 'gray-600': 'var(--gray-600)', 'gray-700': 'var(--gray-700)', 'gray-800': 'var(--gray-800)', 'gray-900': 'var(--gray-900)', 'gray-950': 'var(--gray-950)', 'green-50': 'var(--green-50)', 'green-100': 'var(--green-100)', 'green-200': 'var(--green-200)', 'green-300': 'var(--green-300)', 'green-400': 'var(--green-400)', 'green-500': 'var(--green-500)', 'green-600': 'var(--green-600)', 'green-700': 'var(--green-700)', 'green-800': 'var(--green-800)', 'green-900': 'var(--green-900)', 'green-950': 'var(--green-950)', 'orange-50': 'var(--orange-50)', 'orange-100': 'var(--orange-100)', 'orange-200': 'var(--orange-200)', 'orange-300': 'var(--orange-300)', 'orange-400': 'var(--orange-400)', 'orange-500': 'var(--orange-500)', 'orange-600': 'var(--orange-600)', 'orange-700': 'var(--orange-700)', 'orange-800': 'var(--orange-800)', 'orange-900': 'var(--orange-900)', 'orange-950': 'var(--orange-950)', 'purple-50': 'var(--purple-50)', 'purple-100': 'var(--purple-100)', 'purple-200': 'var(--purple-200)', 'purple-300': 'var(--purple-300)', 'purple-400': 'var(--purple-400)', 'purple-500': 'var(--purple-500)', 'purple-600': 'var(--purple-600)', 'purple-700': 'var(--purple-700)', 'purple-800': 'var(--purple-800)', 'purple-900': 'var(--purple-900)', 'purple-950': 'var(--purple-950)', 'red-50': 'var(--red-50)', 'red-100': 'var(--red-100)', 'red-200': 'var(--red-200)', 'red-300': 'var(--red-300)', 'red-400': 'var(--red-400)', 'red-500': 'var(--red-500)', 'red-600': 'var(--red-600)', 'red-700': 'var(--red-700)', 'red-800': 'var(--red-800)', 'red-900': 'var(--red-900)', 'red-950': 'var(--red-950)', }; const themeColors = { 'theme-indigo-10': 'var(--theme-indigo-10)', 'theme-indigo-50': 'var(--theme-indigo-50)', 'theme-indigo-100': 'var(--theme-indigo-100)', 'theme-indigo-200': 'var(--theme-indigo-200)', 'theme-indigo-300': 'var(--theme-indigo-300)', 'theme-indigo-400': 'var(--theme-indigo-400)', 'theme-indigo-500': 'var(--theme-indigo-500)', 'theme-indigo-600': 'var(--theme-indigo-600)', 'theme-indigo-700': 'var(--theme-indigo-700)', 'theme-indigo-800': 'var(--theme-indigo-800)', 'theme-indigo-900': 'var(--theme-indigo-900)', 'theme-indigo-950': 'var(--theme-indigo-950)', 'theme-blue-10': 'var(--theme-blue-10)', 'theme-blue-50': 'var(--theme-blue-50)', 'theme-blue-100': 'var(--theme-blue-100)', 'theme-blue-200': 'var(--theme-blue-200)', 'theme-blue-300': 'var(--theme-blue-300)', 'theme-blue-400': 'var(--theme-blue-400)', 'theme-blue-500': 'var(--theme-blue-500)', 'theme-blue-600': 'var(--theme-blue-600)', 'theme-blue-700': 'var(--theme-blue-700)', 'theme-blue-800': 'var(--theme-blue-800)', 'theme-blue-900': 'var(--theme-blue-900)', 'theme-blue-950': 'var(--theme-blue-950)', 'theme-light-blue-10': 'var(--theme-light-blue-10)', 'theme-light-blue-50': 'var(--theme-light-blue-50)', 'theme-light-blue-100': 'var(--theme-light-blue-100)', 'theme-light-blue-200': 'var(--theme-light-blue-200)', 'theme-light-blue-300': 'var(--theme-light-blue-300)', 'theme-light-blue-400': 'var(--theme-light-blue-400)', 'theme-light-blue-500': 'var(--theme-light-blue-500)', 'theme-light-blue-600': 'var(--theme-light-blue-600)', 'theme-light-blue-700': 'var(--theme-light-blue-700)', 'theme-light-blue-800': 'var(--theme-light-blue-800)', 'theme-light-blue-900': 'var(--theme-light-blue-900)', 'theme-light-blue-950': 'var(--theme-light-blue-950)', 'theme-green-10': 'var(--theme-green-10)', 'theme-green-50': 'var(--theme-green-50)', 'theme-green-100': 'var(--theme-green-100)', 'theme-green-200': 'var(--theme-green-200)', 'theme-green-300': 'var(--theme-green-300)', 'theme-green-400': 'var(--theme-green-400)', 'theme-green-500': 'var(--theme-green-500)', 'theme-green-600': 'var(--theme-green-600)', 'theme-green-700': 'var(--theme-green-700)', 'theme-green-800': 'var(--theme-green-800)', 'theme-green-900': 'var(--theme-green-900)', 'theme-green-950': 'var(--theme-green-950)', 'theme-red-10': 'var(--theme-red-10)', 'theme-red-50': 'var(--theme-red-50)', 'theme-red-100': 'var(--theme-red-100)', 'theme-red-200': 'var(--theme-red-200)', 'theme-red-300': 'var(--theme-red-300)', 'theme-red-400': 'var(--theme-red-400)', 'theme-red-500': 'var(--theme-red-500)', 'theme-red-600': 'var(--theme-red-600)', 'theme-red-700': 'var(--theme-red-700)', 'theme-red-800': 'var(--theme-red-800)', 'theme-red-900': 'var(--theme-red-900)', 'theme-red-950': 'var(--theme-red-950)', 'theme-light-red-10': 'var(--theme-light-red-10)', 'theme-light-red-50': 'var(--theme-light-red-50)', 'theme-light-red-100': 'var(--theme-light-red-100)', 'theme-light-red-200': 'var(--theme-light-red-200)', 'theme-light-red-300': 'var(--theme-light-red-300)', 'theme-light-red-400': 'var(--theme-light-red-400)', 'theme-light-red-500': 'var(--theme-light-red-500)', 'theme-light-red-600': 'var(--theme-light-red-600)', 'theme-light-red-700': 'var(--theme-light-red-700)', 'theme-light-red-800': 'var(--theme-light-red-800)', 'theme-light-red-900': 'var(--theme-light-red-900)', 'theme-light-red-950': 'var(--theme-light-red-950)', }; const dataVizColors = { 'data-viz-green-50': 'var(--data-viz-green-50)', 'data-viz-green-100': 'var(--data-viz-green-100)', 'data-viz-green-200': 'var(--data-viz-green-200)', 'data-viz-green-300': 'var(--data-viz-green-300)', 'data-viz-green-400': 'var(--data-viz-green-400)', 'data-viz-green-500': 'var(--data-viz-green-500)', 'data-viz-green-600': 'var(--data-viz-green-600)', 'data-viz-green-700': 'var(--data-viz-green-700)', 'data-viz-green-800': 'var(--data-viz-green-800)', 'data-viz-green-900': 'var(--data-viz-green-900)', 'data-viz-green-950': 'var(--data-viz-green-950)', 'data-viz-aqua-50': 'var(--data-viz-aqua-50)', 'data-viz-aqua-100': 'var(--data-viz-aqua-100)', 'data-viz-aqua-200': 'var(--data-viz-aqua-200)', 'data-viz-aqua-300': 'var(--data-viz-aqua-300)', 'data-viz-aqua-400': 'var(--data-viz-aqua-400)', 'data-viz-aqua-500': 'var(--data-viz-aqua-500)', 'data-viz-aqua-600': 'var(--data-viz-aqua-600)', 'data-viz-aqua-700': 'var(--data-viz-aqua-700)', 'data-viz-aqua-800': 'var(--data-viz-aqua-800)', 'data-viz-aqua-900': 'var(--data-viz-aqua-900)', 'data-viz-aqua-950': 'var(--data-viz-aqua-950)', 'data-viz-blue-50': 'var(--data-viz-blue-50)', 'data-viz-blue-100': 'var(--data-viz-blue-100)', 'data-viz-blue-200': 'var(--data-viz-blue-200)', 'data-viz-blue-300': 'var(--data-viz-blue-300)', 'data-viz-blue-400': 'var(--data-viz-blue-400)', 'data-viz-blue-500': 'var(--data-viz-blue-500)', 'data-viz-blue-600': 'var(--data-viz-blue-600)', 'data-viz-blue-700': 'var(--data-viz-blue-700)', 'data-viz-blue-800': 'var(--data-viz-blue-800)', 'data-viz-blue-900': 'var(--data-viz-blue-900)', 'data-viz-blue-950': 'var(--data-viz-blue-950)', 'data-viz-magenta-50': 'var(--data-viz-magenta-50)', 'data-viz-magenta-100': 'var(--data-viz-magenta-100)', 'data-viz-magenta-200': 'var(--data-viz-magenta-200)', 'data-viz-magenta-300': 'var(--data-viz-magenta-300)', 'data-viz-magenta-400': 'var(--data-viz-magenta-400)', 'data-viz-magenta-500': 'var(--data-viz-magenta-500)', 'data-viz-magenta-600': 'var(--data-viz-magenta-600)', 'data-viz-magenta-700': 'var(--data-viz-magenta-700)', 'data-viz-magenta-800': 'var(--data-viz-magenta-800)', 'data-viz-magenta-900': 'var(--data-viz-magenta-900)', 'data-viz-magenta-950': 'var(--data-viz-magenta-950)', 'data-viz-orange-50': 'var(--data-viz-orange-50)', 'data-viz-orange-100': 'var(--data-viz-orange-100)', 'data-viz-orange-200': 'var(--data-viz-orange-200)', 'data-viz-orange-300': 'var(--data-viz-orange-300)', 'data-viz-orange-400': 'var(--data-viz-orange-400)', 'data-viz-orange-500': 'var(--data-viz-orange-500)', 'data-viz-orange-600': 'var(--data-viz-orange-600)', 'data-viz-orange-700': 'var(--data-viz-orange-700)', 'data-viz-orange-800': 'var(--data-viz-orange-800)', 'data-viz-orange-900': 'var(--data-viz-orange-900)', 'data-viz-orange-950': 'var(--data-viz-orange-950)', }; const neutralColors = { 'neutral-0': 'var(--gl-color-neutral-0)', 'neutral-10': 'var(--gl-color-neutral-10)', 'neutral-50': 'var(--gl-color-neutral-50)', 'neutral-100': 'var(--gl-color-neutral-100)', 'neutral-200': 'var(--gl-color-neutral-200)', 'neutral-300': 'var(--gl-color-neutral-300)', 'neutral-400': 'var(--gl-color-neutral-400)', 'neutral-500': 'var(--gl-color-neutral-500)', 'neutral-600': 'var(--gl-color-neutral-600)', 'neutral-700': 'var(--gl-color-neutral-700)', 'neutral-800': 'var(--gl-color-neutral-800)', 'neutral-900': 'var(--gl-color-neutral-900)', 'neutral-950': 'var(--gl-color-neutral-950)', 'neutral-1000': 'var(--gl-color-neutral-1000)', }; const textColors = { default: 'var(--gl-text-color-default)', subtle: 'var(--gl-text-color-subtle)', strong: 'var(--gl-text-color-strong)', heading: 'var(--gl-text-color-heading)', link: 'var(--gl-text-color-link)', warning: 'var(--gl-text-color-warning)', danger: 'var(--gl-text-color-danger)', success: 'var(--gl-text-color-success)', disabled: 'var(--gl-text-color-disabled)', }; const backgroundColors = { default: 'var(--gl-background-color-default)', subtle: 'var(--gl-background-color-subtle)', strong: 'var(--gl-background-color-strong)', disabled: 'var(--gl-background-color-disabled)', overlap: 'var(--gl-background-color-overlap)', section: 'var(--gl-background-color-section)', overlay: 'var(--gl-background-color-overlay)', }; const borderColors = { transparent: 'var(--gl-border-color-transparent)', default: 'var(--gl-border-color-default)', subtle: 'var(--gl-border-color-subtle)', strong: 'var(--gl-border-color-strong)', section: 'var(--gl-border-color-section)', }; const iconColors = { default: 'var(--gl-icon-color-default)', subtle: 'var(--gl-icon-color-subtle)', strong: 'var(--gl-icon-color-strong)', disabled: 'var(--gl-icon-color-disabled)', link: 'var(--gl-icon-color-link)', info: 'var(--gl-icon-color-info)', warning: 'var(--gl-icon-color-warning)', danger: 'var(--gl-icon-color-danger)', success: 'var(--gl-icon-color-success)', }; const alphaDarkColors = { 2: 'var(--gl-color-alpha-dark-2)', 4: 'var(--gl-color-alpha-dark-4)', 6: 'var(--gl-color-alpha-dark-6)', 8: 'var(--gl-color-alpha-dark-8)', 16: 'var(--gl-color-alpha-dark-16)', 24: 'var(--gl-color-alpha-dark-24)', 40: 'var(--gl-color-alpha-dark-40)', }; const alphaLightColors = { 2: 'var(--gl-color-alpha-light-2)', 4: 'var(--gl-color-alpha-light-4)', 6: 'var(--gl-color-alpha-light-6)', 8: 'var(--gl-color-alpha-light-8)', 16: 'var(--gl-color-alpha-light-16)', 24: 'var(--gl-color-alpha-light-24)', 36: 'var(--gl-color-alpha-light-36)', }; const brandColors = { 'brand-white': 'var(--gl-color-brand-white)', 'brand-charcoal': 'var(--gl-color-brand-charcoal)', 'brand-orange': { '01g': 'var(--gl-color-brand-orange-01g)', '01p': 'var(--gl-color-brand-orange-01p)', '02p': 'var(--gl-color-brand-orange-02p)', '03p': 'var(--gl-color-brand-orange-03p)', }, 'brand-purple': { '01g': 'var(--gl-color-brand-purple-01g)', '01p': 'var(--gl-color-brand-purple-01p)', '02p': 'var(--gl-color-brand-purple-02p)', }, 'brand-gray': { '01': 'var(--gl-color-brand-gray-01)', '02': 'var(--gl-color-brand-gray-02)', '03': 'var(--gl-color-brand-gray-03)', '04': 'var(--gl-color-brand-gray-04)', '05': 'var(--gl-color-brand-gray-05)', }, 'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g)' }, }; const statusBackgroundColors = { 'status-neutral': 'var(--gl-status-neutral-background-color)', 'status-info': 'var(--gl-status-info-background-color)', 'status-success': 'var(--gl-status-success-background-color)', 'status-warning': 'var(--gl-status-warning-background-color)', 'status-danger': 'var(--gl-status-danger-background-color)', 'status-brand': 'var(--gl-status-brand-background-color)', }; const statusTextColors = { 'status-neutral': 'var(--gl-status-neutral-text-color)', 'status-info': 'var(--gl-status-info-text-color)', 'status-success': 'var(--gl-status-success-text-color)', 'status-warning': 'var(--gl-status-warning-text-color)', 'status-danger': 'var(--gl-status-danger-text-color)', 'status-brand': 'var(--gl-status-brand-text-color)', }; const statusIconColors = { 'status-neutral': 'var(--gl-status-neutral-icon-color)', 'status-info': 'var(--gl-status-info-icon-color)', 'status-success': 'var(--gl-status-success-icon-color)', 'status-warning': 'var(--gl-status-warning-icon-color)', 'status-danger': 'var(--gl-status-danger-icon-color)', 'status-brand': 'var(--gl-status-brand-icon-color)', }; const feedbackBackgroundColors = { 'feedback-strong': 'var(--gl-feedback-strong-background-color)', 'feedback-neutral': 'var(--gl-feedback-neutral-background-color)', 'feedback-info': 'var(--gl-feedback-info-background-color)', 'feedback-success': 'var(--gl-feedback-success-background-color)', 'feedback-warning': 'var(--gl-feedback-warning-background-color)', 'feedback-danger': 'var(--gl-feedback-danger-background-color)', }; const feedbackTextColors = { 'feedback-strong': 'var(--gl-feedback-strong-text-color)', 'feedback-neutral': 'var(--gl-feedback-neutral-text-color)', 'feedback-info': 'var(--gl-feedback-info-text-color)', 'feedback-success': 'var(--gl-feedback-success-text-color)', 'feedback-warning': 'var(--gl-feedback-warning-text-color)', 'feedback-danger': 'var(--gl-feedback-danger-text-color)', }; const feedbackIconColors = { 'feedback-strong': 'var(--gl-feedback-strong-icon-color)', 'feedback-neutral': 'var(--gl-feedback-neutral-icon-color)', 'feedback-info': 'var(--gl-feedback-info-icon-color)', 'feedback-success': 'var(--gl-feedback-success-icon-color)', 'feedback-warning': 'var(--gl-feedback-warning-icon-color)', 'feedback-danger': 'var(--gl-feedback-danger-icon-color)', }; const spacingScale = { 0: 'var(--gl-spacing-scale-0)', 1: 'var(--gl-spacing-scale-1)', 2: 'var(--gl-spacing-scale-2)', 3: 'var(--gl-spacing-scale-3)', 4: 'var(--gl-spacing-scale-4)', 5: 'var(--gl-spacing-scale-5)', 6: 'var(--gl-spacing-scale-6)', 7: 'var(--gl-spacing-scale-7)', 8: 'var(--gl-spacing-scale-8)', 9: 'var(--gl-spacing-scale-9)', 10: 'var(--gl-spacing-scale-10)', 11: 'var(--gl-spacing-scale-11)', 12: 'var(--gl-spacing-scale-12)', 13: 'var(--gl-spacing-scale-13)', 15: 'var(--gl-spacing-scale-15)', 18: 'var(--gl-spacing-scale-18)', 20: 'var(--gl-spacing-scale-20)', 26: 'var(--gl-spacing-scale-26)', 28: 'var(--gl-spacing-scale-28)', 30: 'var(--gl-spacing-scale-30)', 31: 'var(--gl-spacing-scale-31)', 33: 'var(--gl-spacing-scale-33)', 34: 'var(--gl-spacing-scale-34)', 37: 'var(--gl-spacing-scale-37)', 48: 'var(--gl-spacing-scale-48)', 62: 'var(--gl-spacing-scale-62)', 75: 'var(--gl-spacing-scale-75)', 80: 'var(--gl-spacing-scale-80)', 88: 'var(--gl-spacing-scale-88)', px: 'var(--gl-spacing-scale-px)', '2-5': 'var(--gl-spacing-scale-2-5)', '11-5': 'var(--gl-spacing-scale-11-5)', }; const borderRadius = { none: 'var(--gl-border-radius-none)', xs: 'var(--gl-border-radius-xs)', sm: 'var(--gl-border-radius-sm)', md: 'var(--gl-border-radius-md)', lg: 'var(--gl-border-radius-lg)', xl: 'var(--gl-border-radius-xl)', '2xl': 'var(--gl-border-radius-2xl)', '3xl': 'var(--gl-border-radius-3xl)', full: 'var(--gl-border-radius-full)', default: 'var(--gl-border-radius-default)', action: 'var(--gl-action-border-radius)', control: 'var(--gl-control-border-radius)', feedback: 'var(--gl-feedback-border-radius)', }; const opacity = { 0: 'var(--gl-opacity-0)', 1: 'var(--gl-opacity-1)', 2: 'var(--gl-opacity-2)', 3: 'var(--gl-opacity-3)', 4: 'var(--gl-opacity-4)', 5: 'var(--gl-opacity-5)', 6: 'var(--gl-opacity-6)', 7: 'var(--gl-opacity-7)', 8: 'var(--gl-opacity-8)', 9: 'var(--gl-opacity-9)', 10: 'var(--gl-opacity-10)', }; const zindexes = { 0: 'var(--gl-zindex-0)', 1: 'var(--gl-zindex-1)', 2: 'var(--gl-zindex-2)', 3: 'var(--gl-zindex-3)', 4: 'var(--gl-zindex-4)', 200: 'var(--gl-zindex-200)', 9999: 'var(--gl-zindex-9999)', }; const boxShadow = { sm: 'var(--gl-shadow-sm)', md: 'var(--gl-shadow-md)', lg: 'var(--gl-shadow-lg)', }; const lineHeight = { 12: 'var(--gl-line-height-12)', 16: 'var(--gl-line-height-16)', 20: 'var(--gl-line-height-20)', 24: 'var(--gl-line-height-24)', 28: 'var(--gl-line-height-28)', 32: 'var(--gl-line-height-32)', 36: 'var(--gl-line-height-36)', 42: 'var(--gl-line-height-42)', 44: 'var(--gl-line-height-44)', 52: 'var(--gl-line-height-52)', }; const fontFamily = { regular: 'var(--gl-font-family-regular)', monospace: 'var(--gl-font-family-monospace)', }; const fontSize = { xs: 'var(--gl-font-size-xs)', sm: 'var(--gl-font-size-sm)', md: 'var(--gl-font-size-md)', lg: 'var(--gl-font-size-lg)', base: 'var(--gl-font-size-base)', }; const fontWeight = { 100: 'var(--gl-font-weight-100)', 300: 'var(--gl-font-weight-300)', normal: 'var(--gl-font-weight-normal)', semibold: 'var(--gl-font-weight-semibold)', bold: 'var(--gl-font-weight-bold)', }; const colors = { inherit: 'inherit', current: 'currentColor', transparent: 'transparent', white: 'var(--white)', black: 'var(--black)', alpha: { dark: { ...alphaDarkColors }, light: { ...alphaLightColors }, }, ...baseColors, ...themeColors, ...dataVizColors, ...neutralColors, ...brandColors, }; const backgroundColor = { ...colors, ...backgroundColors, ...statusBackgroundColors, ...feedbackBackgroundColors, dropdown: 'var(--gl-dropdown-background-color)', control: { default: 'var(--gl-control-background-color-default)', disabled: 'var(--gl-control-background-color-disabled)', concatenation: 'var(--gl-control-background-color-concatenation)', readonly: 'var(--gl-control-background-color-readonly)', }, }; const borderColor = { ...colors, ...borderColors, dropdown: 'var(--gl-dropdown-border-color)', 'dropdown-divider': 'var(--gl-dropdown-divider-color)', control: { default: 'var(--gl-control-border-color-default)', disabled: 'var(--gl-control-border-color-disabled)', error: 'var(--gl-control-border-color-error)', }, }; const outlineColor = { focus: 'var(--gl-focus-ring-outer-color)', }; const fill = { ...colors, ...statusIconColors, ...feedbackIconColors, icon: { ...iconColors, }, }; const textColor = { ...colors, ...textColors, ...statusTextColors, ...feedbackTextColors, primary: 'var(--gl-text-primary)', secondary: 'var(--gl-text-secondary)', tertiary: 'var(--gl-text-tertiary)', control: { placeholder: 'var(--gl-control-placeholder-color)', error: 'var(--gl-control-text-color-error)', valid: 'var(--gl-control-text-color-valid)', }, }; module.exports = { colors, backgroundColor, borderColor, outlineColor, textColor, fill, spacing: spacingScale, borderRadius, opacity, zIndex: zindexes, boxShadow, lineHeight, fontFamily, fontSize, fontWeight, };