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