/** * Copyright IBM Corp. 2018, 2026 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ export const black = '#000000'; export const black100 = black; export const blackHover = '#212121'; export const white = '#ffffff'; export const white0 = white; export const whiteHover = '#e8e8e8'; export const yellow10 = '#fcf4d6'; export const yellow20 = '#fddc69'; export const yellow30 = '#f1c21b'; export const yellow40 = '#d2a106'; export const yellow50 = '#b28600'; export const yellow60 = '#8e6a00'; export const yellow70 = '#684e00'; export const yellow80 = '#483700'; export const yellow90 = '#302400'; export const yellow100 = '#1c1500'; export const yellow = { 10: yellow10, 20: yellow20, 30: yellow30, 40: yellow40, 50: yellow50, 60: yellow60, 70: yellow70, 80: yellow80, 90: yellow90, 100: yellow100, }; export const yellow10Hover = '#f8e6a0'; export const yellow20Hover = '#fccd27'; export const yellow30Hover = '#ddb00e'; export const yellow40Hover = '#bc9005'; export const yellow50Hover = '#9e7700'; export const yellow60Hover = '#755800'; export const yellow70Hover = '#806000'; export const yellow80Hover = '#5c4600'; export const yellow90Hover = '#3d2e00'; export const yellow100Hover = '#332600'; export const yellowHover = { 10: yellow10Hover, 20: yellow20Hover, 30: yellow30Hover, 40: yellow40Hover, 50: yellow50Hover, 60: yellow60Hover, 70: yellow70Hover, 80: yellow80Hover, 90: yellow90Hover, 100: yellow100Hover, }; export const orange10 = '#fff2e8'; export const orange20 = '#ffd9be'; export const orange30 = '#ffb784'; export const orange40 = '#ff832b'; export const orange50 = '#eb6200'; export const orange60 = '#ba4e00'; export const orange70 = '#8a3800'; export const orange80 = '#5e2900'; export const orange90 = '#3e1a00'; export const orange100 = '#231000'; export const orange = { 10: orange10, 20: orange20, 30: orange30, 40: orange40, 50: orange50, 60: orange60, 70: orange70, 80: orange80, 90: orange90, 100: orange100, }; export const orange10Hover = '#ffe2cc'; export const orange20Hover = '#ffc69e'; export const orange30Hover = '#ff9d57'; export const orange40Hover = '#fa6800'; export const orange50Hover = '#cc5500'; export const orange60Hover = '#9e4200'; export const orange70Hover = '#a84400'; export const orange80Hover = '#753300'; export const orange90Hover = '#522200'; export const orange100Hover = '#421e00'; export const orangeHover = { 10: orange10Hover, 20: orange20Hover, 30: orange30Hover, 40: orange40Hover, 50: orange50Hover, 60: orange60Hover, 70: orange70Hover, 80: orange80Hover, 90: orange90Hover, 100: orange100Hover, }; export const red10 = '#fff1f1'; export const red20 = '#ffd7d9'; export const red30 = '#ffb3b8'; export const red40 = '#ff8389'; export const red50 = '#fa4d56'; export const red60 = '#da1e28'; export const red70 = '#a2191f'; export const red80 = '#750e13'; export const red90 = '#520408'; export const red100 = '#2d0709'; export const red = { 10: red10, 20: red20, 30: red30, 40: red40, 50: red50, 60: red60, 70: red70, 80: red80, 90: red90, 100: red100, }; export const red100Hover = '#540d11'; export const red90Hover = '#66050a'; export const red80Hover = '#921118'; export const red70Hover = '#c21e25'; export const red60Hover = '#b81922'; export const red50Hover = '#ee0713'; export const red40Hover = '#ff6168'; export const red30Hover = '#ff99a0'; export const red20Hover = '#ffc2c5'; export const red10Hover = '#ffe0e0'; export const redHover = { 100: red100Hover, 90: red90Hover, 80: red80Hover, 70: red70Hover, 60: red60Hover, 50: red50Hover, 40: red40Hover, 30: red30Hover, 20: red20Hover, 10: red10Hover, }; export const magenta10 = '#fff0f7'; export const magenta20 = '#ffd6e8'; export const magenta30 = '#ffafd2'; export const magenta40 = '#ff7eb6'; export const magenta50 = '#ee5396'; export const magenta60 = '#d02670'; export const magenta70 = '#9f1853'; export const magenta80 = '#740937'; export const magenta90 = '#510224'; export const magenta100 = '#2a0a18'; export const magenta = { 10: magenta10, 20: magenta20, 30: magenta30, 40: magenta40, 50: magenta50, 60: magenta60, 70: magenta70, 80: magenta80, 90: magenta90, 100: magenta100, }; export const magenta100Hover = '#53142f'; export const magenta90Hover = '#68032e'; export const magenta80Hover = '#8e0b43'; export const magenta70Hover = '#bf1d63'; export const magenta60Hover = '#b0215f'; export const magenta50Hover = '#e3176f'; export const magenta40Hover = '#ff57a0'; export const magenta30Hover = '#ff94c3'; export const magenta20Hover = '#ffbdda'; export const magenta10Hover = '#ffe0ef'; export const magentaHover = { 100: magenta100Hover, 90: magenta90Hover, 80: magenta80Hover, 70: magenta70Hover, 60: magenta60Hover, 50: magenta50Hover, 40: magenta40Hover, 30: magenta30Hover, 20: magenta20Hover, 10: magenta10Hover, }; export const purple10 = '#f6f2ff'; export const purple20 = '#e8daff'; export const purple30 = '#d4bbff'; export const purple40 = '#be95ff'; export const purple50 = '#a56eff'; export const purple60 = '#8a3ffc'; export const purple70 = '#6929c4'; export const purple80 = '#491d8b'; export const purple90 = '#31135e'; export const purple100 = '#1c0f30'; export const purple = { 10: purple10, 20: purple20, 30: purple30, 40: purple40, 50: purple50, 60: purple60, 70: purple70, 80: purple80, 90: purple90, 100: purple100, }; export const purple100Hover = '#341c59'; export const purple90Hover = '#40197b'; export const purple80Hover = '#5b24ad'; export const purple70Hover = '#7c3dd6'; export const purple60Hover = '#7822fb'; export const purple50Hover = '#9352ff'; export const purple40Hover = '#ae7aff'; export const purple30Hover = '#c5a3ff'; export const purple20Hover = '#dcc7ff'; export const purple10Hover = '#ede5ff'; export const purpleHover = { 100: purple100Hover, 90: purple90Hover, 80: purple80Hover, 70: purple70Hover, 60: purple60Hover, 50: purple50Hover, 40: purple40Hover, 30: purple30Hover, 20: purple20Hover, 10: purple10Hover, }; export const blue10 = '#edf5ff'; export const blue20 = '#d0e2ff'; export const blue30 = '#a6c8ff'; export const blue40 = '#78a9ff'; export const blue50 = '#4589ff'; export const blue60 = '#0f62fe'; export const blue70 = '#0043ce'; export const blue80 = '#002d9c'; export const blue90 = '#001d6c'; export const blue100 = '#001141'; export const blue = { 10: blue10, 20: blue20, 30: blue30, 40: blue40, 50: blue50, 60: blue60, 70: blue70, 80: blue80, 90: blue90, 100: blue100, }; export const blue100Hover = '#001f75'; export const blue90Hover = '#00258a'; export const blue80Hover = '#0039c7'; export const blue70Hover = '#0053ff'; export const blue60Hover = '#0050e6'; export const blue50Hover = '#1f70ff'; export const blue40Hover = '#5c97ff'; export const blue30Hover = '#8ab6ff'; export const blue20Hover = '#b8d3ff'; export const blue10Hover = '#dbebff'; export const blueHover = { 100: blue100Hover, 90: blue90Hover, 80: blue80Hover, 70: blue70Hover, 60: blue60Hover, 50: blue50Hover, 40: blue40Hover, 30: blue30Hover, 20: blue20Hover, 10: blue10Hover, }; export const cyan10 = '#e5f6ff'; export const cyan20 = '#bae6ff'; export const cyan30 = '#82cfff'; export const cyan40 = '#33b1ff'; export const cyan50 = '#1192e8'; export const cyan60 = '#0072c3'; export const cyan70 = '#00539a'; export const cyan80 = '#003a6d'; export const cyan90 = '#012749'; export const cyan100 = '#061727'; export const cyan = { 10: cyan10, 20: cyan20, 30: cyan30, 40: cyan40, 50: cyan50, 60: cyan60, 70: cyan70, 80: cyan80, 90: cyan90, 100: cyan100, }; export const cyan10Hover = '#cceeff'; export const cyan20Hover = '#99daff'; export const cyan30Hover = '#57beff'; export const cyan40Hover = '#059fff'; export const cyan50Hover = '#0f7ec8'; export const cyan60Hover = '#005fa3'; export const cyan70Hover = '#0066bd'; export const cyan80Hover = '#00498a'; export const cyan90Hover = '#013360'; export const cyan100Hover = '#0b2947'; export const cyanHover = { 10: cyan10Hover, 20: cyan20Hover, 30: cyan30Hover, 40: cyan40Hover, 50: cyan50Hover, 60: cyan60Hover, 70: cyan70Hover, 80: cyan80Hover, 90: cyan90Hover, 100: cyan100Hover, }; export const teal10 = '#d9fbfb'; export const teal20 = '#9ef0f0'; export const teal30 = '#3ddbd9'; export const teal40 = '#08bdba'; export const teal50 = '#009d9a'; export const teal60 = '#007d79'; export const teal70 = '#005d5d'; export const teal80 = '#004144'; export const teal90 = '#022b30'; export const teal100 = '#081a1c'; export const teal = { 10: teal10, 20: teal20, 30: teal30, 40: teal40, 50: teal50, 60: teal60, 70: teal70, 80: teal80, 90: teal90, 100: teal100, }; export const teal10Hover = '#acf6f6'; export const teal20Hover = '#57e5e5'; export const teal30Hover = '#25cac8'; export const teal40Hover = '#07aba9'; export const teal50Hover = '#008a87'; export const teal60Hover = '#006b68'; export const teal70Hover = '#007070'; export const teal80Hover = '#005357'; export const teal90Hover = '#033940'; export const teal100Hover = '#0f3034'; export const tealHover = { 10: teal10Hover, 20: teal20Hover, 30: teal30Hover, 40: teal40Hover, 50: teal50Hover, 60: teal60Hover, 70: teal70Hover, 80: teal80Hover, 90: teal90Hover, 100: teal100Hover, }; export const green10 = '#defbe6'; export const green20 = '#a7f0ba'; export const green30 = '#6fdc8c'; export const green40 = '#42be65'; export const green50 = '#24a148'; export const green60 = '#198038'; export const green70 = '#0e6027'; export const green80 = '#044317'; export const green90 = '#022d0d'; export const green100 = '#071908'; export const green = { 10: green10, 20: green20, 30: green30, 40: green40, 50: green50, 60: green60, 70: green70, 80: green80, 90: green90, 100: green100, }; export const green10Hover = '#b6f6c8'; export const green20Hover = '#74e792'; export const green30Hover = '#36ce5e'; export const green40Hover = '#3bab5a'; export const green50Hover = '#208e3f'; export const green60Hover = '#166f31'; export const green70Hover = '#11742f'; export const green80Hover = '#05521c'; export const green90Hover = '#033b11'; export const green100Hover = '#0d300f'; export const greenHover = { 10: green10Hover, 20: green20Hover, 30: green30Hover, 40: green40Hover, 50: green50Hover, 60: green60Hover, 70: green70Hover, 80: green80Hover, 90: green90Hover, 100: green100Hover, }; export const coolGray10 = '#f2f4f8'; export const coolGray20 = '#dde1e6'; export const coolGray30 = '#c1c7cd'; export const coolGray40 = '#a2a9b0'; export const coolGray50 = '#878d96'; export const coolGray60 = '#697077'; export const coolGray70 = '#4d5358'; export const coolGray80 = '#343a3f'; export const coolGray90 = '#21272a'; export const coolGray100 = '#121619'; export const coolGray = { 10: coolGray10, 20: coolGray20, 30: coolGray30, 40: coolGray40, 50: coolGray50, 60: coolGray60, 70: coolGray70, 80: coolGray80, 90: coolGray90, 100: coolGray100, }; export const coolGray10Hover = '#e4e9f1'; export const coolGray20Hover = '#cdd3da'; export const coolGray30Hover = '#adb5bd'; export const coolGray40Hover = '#9199a1'; export const coolGray50Hover = '#757b85'; export const coolGray60Hover = '#585e64'; export const coolGray70Hover = '#5d646a'; export const coolGray80Hover = '#434a51'; export const coolGray90Hover = '#2b3236'; export const coolGray100Hover = '#222a2f'; export const coolGrayHover = { 10: coolGray10Hover, 20: coolGray20Hover, 30: coolGray30Hover, 40: coolGray40Hover, 50: coolGray50Hover, 60: coolGray60Hover, 70: coolGray70Hover, 80: coolGray80Hover, 90: coolGray90Hover, 100: coolGray100Hover, }; export const gray10 = '#f4f4f4'; export const gray20 = '#e0e0e0'; export const gray30 = '#c6c6c6'; export const gray40 = '#a8a8a8'; export const gray50 = '#8d8d8d'; export const gray60 = '#6f6f6f'; export const gray70 = '#525252'; export const gray80 = '#393939'; export const gray90 = '#262626'; export const gray100 = '#161616'; export const gray = { 10: gray10, 20: gray20, 30: gray30, 40: gray40, 50: gray50, 60: gray60, 70: gray70, 80: gray80, 90: gray90, 100: gray100, }; export const gray10Hover = '#e8e8e8'; export const gray20Hover = '#d1d1d1'; export const gray30Hover = '#b5b5b5'; export const gray40Hover = '#999999'; export const gray50Hover = '#7a7a7a'; export const gray60Hover = '#5e5e5e'; export const gray70Hover = '#636363'; export const gray80Hover = '#474747'; export const gray90Hover = '#333333'; export const gray100Hover = '#292929'; export const grayHover = { 10: gray10Hover, 20: gray20Hover, 30: gray30Hover, 40: gray40Hover, 50: gray50Hover, 60: gray60Hover, 70: gray70Hover, 80: gray80Hover, 90: gray90Hover, 100: gray100Hover, }; export const warmGray10 = '#f7f3f2'; export const warmGray20 = '#e5e0df'; export const warmGray30 = '#cac5c4'; export const warmGray40 = '#ada8a8'; export const warmGray50 = '#8f8b8b'; export const warmGray60 = '#726e6e'; export const warmGray70 = '#565151'; export const warmGray80 = '#3c3838'; export const warmGray90 = '#272525'; export const warmGray100 = '#171414'; export const warmGray = { 10: warmGray10, 20: warmGray20, 30: warmGray30, 40: warmGray40, 50: warmGray50, 60: warmGray60, 70: warmGray70, 80: warmGray80, 90: warmGray90, 100: warmGray100, }; export const warmGray10Hover = '#f0e8e6'; export const warmGray20Hover = '#d8d0cf'; export const warmGray30Hover = '#b9b3b1'; export const warmGray40Hover = '#9c9696'; export const warmGray50Hover = '#7f7b7b'; export const warmGray60Hover = '#605d5d'; export const warmGray70Hover = '#696363'; export const warmGray80Hover = '#4c4848'; export const warmGray90Hover = '#343232'; export const warmGray100Hover = '#2c2626'; export const warmGrayHover = { 10: warmGray10Hover, 20: warmGray20Hover, 30: warmGray30Hover, 40: warmGray40Hover, 50: warmGray50Hover, 60: warmGray60Hover, 70: warmGray70Hover, 80: warmGray80Hover, 90: warmGray90Hover, 100: warmGray100Hover, }; export type ColorScale = Record; export type ColorGroup = Record; export type HoverColorGroup = Record; export const colors: ColorGroup = { black: { 100: black, }, blue, coolGray, cyan, gray, green, magenta, orange, purple, red, teal, warmGray, white: { 0: white, }, yellow, }; export const hoverColors: HoverColorGroup = { whiteHover, blackHover, blueHover, coolGrayHover, cyanHover, grayHover, greenHover, magentaHover, orangeHover, purpleHover, redHover, tealHover, warmGrayHover, yellowHover, };