@gitlab/ui/dist/tokens/tailwind/tokens.cjs

GitLab UI Components

/**
 * Do not edit directly, this file was auto-generated.
 */


  const baseColors = {"blue-50":"var(--blue-50, #e9f3fc)","blue-100":"var(--blue-100, #cbe2f9)","blue-200":"var(--blue-200, #9dc7f1)","blue-300":"var(--blue-300, #63a6e9)","blue-400":"var(--blue-400, #428fdc)","blue-500":"var(--blue-500, #1f75cb)","blue-600":"var(--blue-600, #2f68b4)","blue-700":"var(--blue-700, #2f5ca0)","blue-800":"var(--blue-800, #284779)","blue-900":"var(--blue-900, #213454)","blue-950":"var(--blue-950, #1d283e)","gray-10":"var(--gray-10, #fbfafd)","gray-50":"var(--gray-50, #ececef)","gray-100":"var(--gray-100, #dcdcde)","gray-200":"var(--gray-200, #bfbfc3)","gray-300":"var(--gray-300, #a4a3a8)","gray-400":"var(--gray-400, #89888d)","gray-500":"var(--gray-500, #737278)","gray-600":"var(--gray-600, #626168)","gray-700":"var(--gray-700, #4c4b51)","gray-800":"var(--gray-800, #3a383f)","gray-900":"var(--gray-900, #28272d)","gray-950":"var(--gray-950, #18171d)","green-50":"var(--green-50, #ecf4ee)","green-100":"var(--green-100, #c3e6cd)","green-200":"var(--green-200, #91d4a8)","green-300":"var(--green-300, #52b87a)","green-400":"var(--green-400, #2da160)","green-500":"var(--green-500, #108548)","green-600":"var(--green-600, #2f7549)","green-700":"var(--green-700, #306440)","green-800":"var(--green-800, #225131)","green-900":"var(--green-900, #1e3e28)","green-950":"var(--green-950, #17291c)","orange-50":"var(--orange-50, #fdf1dd)","orange-100":"var(--orange-100, #f5d9a8)","orange-200":"var(--orange-200, #e9be74)","orange-300":"var(--orange-300, #d99530)","orange-400":"var(--orange-400, #c17d10)","orange-500":"var(--orange-500, #ab6100)","orange-600":"var(--orange-600, #995715)","orange-700":"var(--orange-700, #894b16)","orange-800":"var(--orange-800, #693c14)","orange-900":"var(--orange-900, #532e16)","orange-950":"var(--orange-950, #382315)","purple-50":"var(--purple-50, #f4f0ff)","purple-100":"var(--purple-100, #e1d8f9)","purple-200":"var(--purple-200, #cbbbf2)","purple-300":"var(--purple-300, #ac93e6)","purple-400":"var(--purple-400, #9475db)","purple-500":"var(--purple-500, #7b58cf)","purple-600":"var(--purple-600, #6a4fb4)","purple-700":"var(--purple-700, #5c47a6)","purple-800":"var(--purple-800, #493c83)","purple-900":"var(--purple-900, #342d59)","purple-950":"var(--purple-950, #27243e)","red-50":"var(--red-50, #fcf1ef)","red-100":"var(--red-100, #fdd4cd)","red-200":"var(--red-200, #fcb5aa)","red-300":"var(--red-300, #f57f6c)","red-400":"var(--red-400, #ec5941)","red-500":"var(--red-500, #dd2b0e)","red-600":"var(--red-600, #c02f12)","red-700":"var(--red-700, #a32c12)","red-800":"var(--red-800, #812713)","red-900":"var(--red-900, #582014)","red-950":"var(--red-950, #3e1a14)"};
  const themeColors = {"theme-indigo-10":"var(--theme-indigo-10, #f8f8ff)","theme-indigo-50":"var(--theme-indigo-50, #f1f1ff)","theme-indigo-100":"var(--theme-indigo-100, #dbdbf8)","theme-indigo-200":"var(--theme-indigo-200, #c7c7f2)","theme-indigo-300":"var(--theme-indigo-300, #a2a2e6)","theme-indigo-400":"var(--theme-indigo-400, #8181d7)","theme-indigo-500":"var(--theme-indigo-500, #6666c4)","theme-indigo-600":"var(--theme-indigo-600, #5252b5)","theme-indigo-700":"var(--theme-indigo-700, #41419f)","theme-indigo-800":"var(--theme-indigo-800, #303083)","theme-indigo-900":"var(--theme-indigo-900, #222261)","theme-indigo-950":"var(--theme-indigo-950, #14143d)","theme-blue-10":"var(--theme-blue-10, #e6ecf0)","theme-blue-50":"var(--theme-blue-50, #cdd8e3)","theme-blue-100":"var(--theme-blue-100, #b9cadc)","theme-blue-200":"var(--theme-blue-200, #a6bdd5)","theme-blue-300":"var(--theme-blue-300, #81a5c9)","theme-blue-400":"var(--theme-blue-400, #628eb9)","theme-blue-500":"var(--theme-blue-500, #4977a5)","theme-blue-600":"var(--theme-blue-600, #346596)","theme-blue-700":"var(--theme-blue-700, #235180)","theme-blue-800":"var(--theme-blue-800, #153c63)","theme-blue-900":"var(--theme-blue-900, #0b2640)","theme-blue-950":"var(--theme-blue-950, #04101c)","theme-light-blue-10":"var(--theme-light-blue-10, #eef3f7)","theme-light-blue-50":"var(--theme-light-blue-50, #dde6ee)","theme-light-blue-100":"var(--theme-light-blue-100, #c1d4e6)","theme-light-blue-200":"var(--theme-light-blue-200, #a0bedc)","theme-light-blue-300":"var(--theme-light-blue-300, #74a3d3)","theme-light-blue-400":"var(--theme-light-blue-400, #4f8bc7)","theme-light-blue-500":"var(--theme-light-blue-500, #3476b9)","theme-light-blue-600":"var(--theme-light-blue-600, #2268ae)","theme-light-blue-700":"var(--theme-light-blue-700, #145aa1)","theme-light-blue-800":"var(--theme-light-blue-800, #0e4d8d)","theme-light-blue-900":"var(--theme-light-blue-900, #0c4277)","theme-light-blue-950":"var(--theme-light-blue-950, #0a3764)","theme-green-10":"var(--theme-green-10, #eef4ef)","theme-green-50":"var(--theme-green-50, #dde9de)","theme-green-100":"var(--theme-green-100, #b1d6b5)","theme-green-200":"var(--theme-green-200, #8cc497)","theme-green-300":"var(--theme-green-300, #69af7d)","theme-green-400":"var(--theme-green-400, #499767)","theme-green-500":"var(--theme-green-500, #308258)","theme-green-600":"var(--theme-green-600, #25744c)","theme-green-700":"var(--theme-green-700, #1b653f)","theme-green-800":"var(--theme-green-800, #155635)","theme-green-900":"var(--theme-green-900, #0e4328)","theme-green-950":"var(--theme-green-950, #052e19)","theme-red-10":"var(--theme-red-10, #faf4f3)","theme-red-50":"var(--theme-red-50, #f4e9e7)","theme-red-100":"var(--theme-red-100, #ecd3d0)","theme-red-200":"var(--theme-red-200, #e3bab5)","theme-red-300":"var(--theme-red-300, #d59086)","theme-red-400":"var(--theme-red-400, #c66e60)","theme-red-500":"var(--theme-red-500, #ad4a3b)","theme-red-600":"var(--theme-red-600, #a13322)","theme-red-700":"var(--theme-red-700, #8f2110)","theme-red-800":"var(--theme-red-800, #761405)","theme-red-900":"var(--theme-red-900, #580d02)","theme-red-950":"var(--theme-red-950, #380700)","theme-light-red-10":"var(--theme-light-red-10, #fdf9f8)","theme-light-red-50":"var(--theme-light-red-50, #faf2f1)","theme-light-red-100":"var(--theme-light-red-100, #f6d9d5)","theme-light-red-200":"var(--theme-light-red-200, #ebada2)","theme-light-red-300":"var(--theme-light-red-300, #e07f6f)","theme-light-red-400":"var(--theme-light-red-400, #d36250)","theme-light-red-500":"var(--theme-light-red-500, #c24b38)","theme-light-red-600":"var(--theme-light-red-600, #b53a26)","theme-light-red-700":"var(--theme-light-red-700, #a02e1c)","theme-light-red-800":"var(--theme-light-red-800, #8b2212)","theme-light-red-900":"var(--theme-light-red-900, #751709)","theme-light-red-950":"var(--theme-light-red-950, #5c1105)"};
  const dataVizColors = {"data-viz-green-50":"var(--data-viz-green-50, #ddfab7)","data-viz-green-100":"var(--data-viz-green-100, #c6ed94)","data-viz-green-200":"var(--data-viz-green-200, #b0d97b)","data-viz-green-300":"var(--data-viz-green-300, #94c25e)","data-viz-green-400":"var(--data-viz-green-400, #81ac41)","data-viz-green-500":"var(--data-viz-green-500, #619025)","data-viz-green-600":"var(--data-viz-green-600, #4e7f0e)","data-viz-green-700":"var(--data-viz-green-700, #366800)","data-viz-green-800":"var(--data-viz-green-800, #275600)","data-viz-green-900":"var(--data-viz-green-900, #1a4500)","data-viz-green-950":"var(--data-viz-green-950, #133a03)","data-viz-aqua-50":"var(--data-viz-aqua-50, #b5fefd)","data-viz-aqua-100":"var(--data-viz-aqua-100, #93f2ef)","data-viz-aqua-200":"var(--data-viz-aqua-200, #5edee3)","data-viz-aqua-300":"var(--data-viz-aqua-300, #32c5d2)","data-viz-aqua-400":"var(--data-viz-aqua-400, #00acc4)","data-viz-aqua-500":"var(--data-viz-aqua-500, #0090b1)","data-viz-aqua-600":"var(--data-viz-aqua-600, #007b9b)","data-viz-aqua-700":"var(--data-viz-aqua-700, #006381)","data-viz-aqua-800":"var(--data-viz-aqua-800, #00516c)","data-viz-aqua-900":"var(--data-viz-aqua-900, #004059)","data-viz-aqua-950":"var(--data-viz-aqua-950, #00344b)","data-viz-blue-50":"var(--data-viz-blue-50, #e9ebff)","data-viz-blue-100":"var(--data-viz-blue-100, #d2dcff)","data-viz-blue-200":"var(--data-viz-blue-200, #b7c6ff)","data-viz-blue-300":"var(--data-viz-blue-300, #97acff)","data-viz-blue-400":"var(--data-viz-blue-400, #7992f5)","data-viz-blue-500":"var(--data-viz-blue-500, #617ae2)","data-viz-blue-600":"var(--data-viz-blue-600, #4e65cd)","data-viz-blue-700":"var(--data-viz-blue-700, #3f51ae)","data-viz-blue-800":"var(--data-viz-blue-800, #374291)","data-viz-blue-900":"var(--data-viz-blue-900, #303470)","data-viz-blue-950":"var(--data-viz-blue-950, #2a2b59)","data-viz-magenta-50":"var(--data-viz-magenta-50, #ffe3eb)","data-viz-magenta-100":"var(--data-viz-magenta-100, #ffccdb)","data-viz-magenta-200":"var(--data-viz-magenta-200, #fcacc5)","data-viz-magenta-300":"var(--data-viz-magenta-300, #f88aaf)","data-viz-magenta-400":"var(--data-viz-magenta-400, #e86e9a)","data-viz-magenta-500":"var(--data-viz-magenta-500, #cf4d81)","data-viz-magenta-600":"var(--data-viz-magenta-600, #b93d71)","data-viz-magenta-700":"var(--data-viz-magenta-700, #9a2e5d)","data-viz-magenta-800":"var(--data-viz-magenta-800, #7c214f)","data-viz-magenta-900":"var(--data-viz-magenta-900, #661e3a)","data-viz-magenta-950":"var(--data-viz-magenta-950, #541d31)","data-viz-orange-50":"var(--data-viz-orange-50, #fae8d1)","data-viz-orange-100":"var(--data-viz-orange-100, #f5d6b3)","data-viz-orange-200":"var(--data-viz-orange-200, #eebd8c)","data-viz-orange-300":"var(--data-viz-orange-300, #e99b60)","data-viz-orange-400":"var(--data-viz-orange-400, #e07e41)","data-viz-orange-500":"var(--data-viz-orange-500, #c95d2e)","data-viz-orange-600":"var(--data-viz-orange-600, #b14f18)","data-viz-orange-700":"var(--data-viz-orange-700, #92430a)","data-viz-orange-800":"var(--data-viz-orange-800, #6f3500)","data-viz-orange-900":"var(--data-viz-orange-900, #5e2f05)","data-viz-orange-950":"var(--data-viz-orange-950, #4b2707)"};
  const neutralColors = {"neutral-0":"var(--gl-color-neutral-0, #fff)","neutral-10":"var(--gl-color-neutral-10, #fbfafd)","neutral-50":"var(--gl-color-neutral-50, #ececef)","neutral-100":"var(--gl-color-neutral-100, #dcdcde)","neutral-200":"var(--gl-color-neutral-200, #bfbfc3)","neutral-300":"var(--gl-color-neutral-300, #a4a3a8)","neutral-400":"var(--gl-color-neutral-400, #89888d)","neutral-500":"var(--gl-color-neutral-500, #737278)","neutral-600":"var(--gl-color-neutral-600, #626168)","neutral-700":"var(--gl-color-neutral-700, #4c4b51)","neutral-800":"var(--gl-color-neutral-800, #3a383f)","neutral-900":"var(--gl-color-neutral-900, #28272d)","neutral-950":"var(--gl-color-neutral-950, #18171d)","neutral-1000":"var(--gl-color-neutral-1000, #050506)"};
  const textColors = {"default":"var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383f))","subtle":"var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168))","strong":"var(--gl-text-color-strong, var(--gl-color-neutral-950, #18171d))","heading":"var(--gl-text-color-heading, var(--gl-color-neutral-950, #18171d))","link":"var(--gl-text-color-link, var(--gl-color-blue-700, #2f5ca0))","warning":"var(--gl-text-color-warning, var(--gl-color-orange-600, #995715))","danger":"var(--gl-text-color-danger, var(--gl-color-red-600, #c02f12))","success":"var(--gl-text-color-success, var(--gl-color-green-600, #2f7549))","disabled":"var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))"};
  const backgroundColors = {"default":"var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))","subtle":"var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))","strong":"var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))","disabled":"var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))","overlap":"var(--gl-background-color-overlap, var(--gl-color-neutral-0, #fff))","section":"var(--gl-background-color-section, var(--gl-color-neutral-0, #fff))","overlay":"var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24)))"};
  const borderColors = {"default":"var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))","subtle":"var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))","strong":"var(--gl-border-color-strong, var(--gl-color-neutral-200, #bfbfc3))","section":"var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))","transparent":"var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))"};
  const iconColors = {"default":"var(--gl-icon-color-default, var(--gl-text-color-default, #3a383f))","subtle":"var(--gl-icon-color-subtle, var(--gl-text-color-subtle, #626168))","strong":"var(--gl-icon-color-strong, var(--gl-text-color-strong, #18171d))","disabled":"var(--gl-icon-color-disabled, var(--gl-text-color-disabled, #89888d))","link":"var(--gl-icon-color-link, var(--gl-text-color-link, #2f5ca0))","info":"var(--gl-icon-color-info, var(--gl-color-blue-700, #2f5ca0))","warning":"var(--gl-icon-color-warning, var(--gl-text-color-warning, #995715))","danger":"var(--gl-icon-color-danger, var(--gl-text-color-danger, #c02f12))","success":"var(--gl-icon-color-success, var(--gl-text-color-success, #2f7549))"};
  const alphaDarkColors = {"2":"var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02))","4":"var(--gl-color-alpha-dark-4, rgba(05, 05, 06, 0.04))","6":"var(--gl-color-alpha-dark-6, rgba(05, 05, 06, 0.06))","8":"var(--gl-color-alpha-dark-8, rgba(05, 05, 06, 0.08))","16":"var(--gl-color-alpha-dark-16, rgba(05, 05, 06, 0.16))","24":"var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24))","40":"var(--gl-color-alpha-dark-40, rgba(05, 05, 06, 0.4))"};
  const alphaLightColors = {"2":"var(--gl-color-alpha-light-2, rgba(255, 255, 255, 0.02))","4":"var(--gl-color-alpha-light-4, rgba(255, 255, 255, 0.04))","6":"var(--gl-color-alpha-light-6, rgba(255, 255, 255, 0.06))","8":"var(--gl-color-alpha-light-8, rgba(255, 255, 255, 0.08))","16":"var(--gl-color-alpha-light-16, rgba(255, 255, 255, 0.16))","24":"var(--gl-color-alpha-light-24, rgba(255, 255, 255, 0.24))","36":"var(--gl-color-alpha-light-36, rgba(255, 255, 255, 0.36))"};
  const brandColors = {"brand-white":"var(--gl-color-brand-white, #fff)","brand-charcoal":"var(--gl-color-brand-charcoal, #171321)","brand-orange":{"01g":"var(--gl-color-brand-orange-01g, #ffd1bf)","01p":"var(--gl-color-brand-orange-01p, #fca326)","02p":"var(--gl-color-brand-orange-02p, #fc6d26)","03p":"var(--gl-color-brand-orange-03p, #e24329)"},"brand-purple":{"01g":"var(--gl-color-brand-purple-01g, #ceb3ef)","01p":"var(--gl-color-brand-purple-01p, #a989f5)","02p":"var(--gl-color-brand-purple-02p, #7759c2)"},"brand-gray":{"01":"var(--gl-color-brand-gray-01, #d1d0d3)","02":"var(--gl-color-brand-gray-02, #a2a1a6)","03":"var(--gl-color-brand-gray-03, #74717a)","04":"var(--gl-color-brand-gray-04, #45424d)","05":"var(--gl-color-brand-gray-05, #2b2838)"},"brand-pink":{"01g":"var(--gl-color-brand-pink-01g, #ffb9c9)"}};
  const statusBackgroundColors = {"status-neutral":"var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))","status-info":"var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))","status-success":"var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))","status-warning":"var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))","status-danger":"var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))","status-brand":"var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))"};
  const statusTextColors = {"status-neutral":"var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))","status-info":"var(--gl-status-info-text-color, var(--gl-color-blue-700, #2f5ca0))","status-success":"var(--gl-status-success-text-color, var(--gl-color-green-700, #306440))","status-warning":"var(--gl-status-warning-text-color, var(--gl-color-orange-700, #894b16))","status-danger":"var(--gl-status-danger-text-color, var(--gl-color-red-700, #a32c12))","status-brand":"var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5c47a6))"};
  const statusIconColors = {"status-neutral":"var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))","status-info":"var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))","status-success":"var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))","status-warning":"var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))","status-danger":"var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))","status-brand":"var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))"};
  const feedbackBackgroundColors = {"feedback-strong":"var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))","feedback-neutral":"var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))","feedback-info":"var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))","feedback-success":"var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))","feedback-warning":"var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))","feedback-danger":"var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))"};
  const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))","feedback-info":"var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #2f5ca0))","feedback-success":"var(--gl-feedback-success-text-color, var(--gl-color-green-700, #306440))","feedback-warning":"var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #894b16))","feedback-danger":"var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #a32c12))"};
  const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))","feedback-neutral":"var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))","feedback-info":"var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #2f68b4))","feedback-success":"var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #2f7549))","feedback-warning":"var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #995715))","feedback-danger":"var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c02f12))"};

  const colors = {
    inherit: 'inherit',
    current: 'currentColor',
    transparent: 'transparent',
    white: 'var(--white, #fff)',
    black: 'var(--black, #050506)',
    alpha: {
      dark: {...alphaDarkColors},
      light: {...alphaLightColors},
    },
    ...baseColors,
    ...themeColors,
    ...dataVizColors,
    ...neutralColors,
    ...brandColors,
  };

  const backgroundColor = {
    ...colors,
    ...backgroundColors,
    ...statusBackgroundColors,
    ...feedbackBackgroundColors,
    dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
  };

  const borderColor  = {
    ...colors,
    ...borderColors,
    dropdown: 'var(--gl-dropdown-border-color, var(--gl-border-color-strong, #bfbfc3))',
    'dropdown-divider': 'var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))',
  };

  const outlineColor = {
    focus: 'var(--gl-focus-ring-outer-color, var(--gl-color-blue-500, #1f75cb))',
  };

  const fill = {
    ...colors,
    ...statusIconColors,
    ...feedbackIconColors,
    icon: {
      ...iconColors,
    },
  };

  const textColor = {
    ...colors,
    ...textColors,
    ...statusTextColors,
    ...feedbackTextColors,
    primary: 'var(--gl-text-primary, #28272d)',
    secondary: 'var(--gl-text-secondary, #737278)',
    tertiary: 'var(--gl-text-tertiary, #89888d)',
  };

  module.exports = {
    colors,
    backgroundColor,
    borderColor,
    outlineColor,
    textColor,
    fill,
  }