@gitlab/ui/dist/tokens/js/tokens.js

GitLab UI Components

/**
 * Do not edit directly
 * Generated on Wed, 01 May 2024 16:11:38 GMT
 */

export const DATA_VIZ_GREEN_50 = "#ddfab7";
export const DATA_VIZ_GREEN_100 = "#c6ed94";
export const DATA_VIZ_GREEN_200 = "#b0d97b";
export const DATA_VIZ_GREEN_300 = "#94c25e";
export const DATA_VIZ_GREEN_400 = "#81ac41";
export const DATA_VIZ_GREEN_500 = "#619025";
export const DATA_VIZ_GREEN_600 = "#4e7f0e";
export const DATA_VIZ_GREEN_700 = "#366800";
export const DATA_VIZ_GREEN_800 = "#275600";
export const DATA_VIZ_GREEN_900 = "#1a4500";
export const DATA_VIZ_GREEN_950 = "#133a03";
export const DATA_VIZ_AQUA_50 = "#b5fefd";
export const DATA_VIZ_AQUA_100 = "#93f2ef";
export const DATA_VIZ_AQUA_200 = "#5edee3";
export const DATA_VIZ_AQUA_300 = "#32c5d2";
export const DATA_VIZ_AQUA_400 = "#00acc4";
export const DATA_VIZ_AQUA_500 = "#0090b1";
export const DATA_VIZ_AQUA_600 = "#007b9b";
export const DATA_VIZ_AQUA_700 = "#006381";
export const DATA_VIZ_AQUA_800 = "#00516c";
export const DATA_VIZ_AQUA_900 = "#004059";
export const DATA_VIZ_AQUA_950 = "#00344b";
export const DATA_VIZ_BLUE_50 = "#e9ebff";
export const DATA_VIZ_BLUE_100 = "#d2dcff";
export const DATA_VIZ_BLUE_200 = "#b7c6ff";
export const DATA_VIZ_BLUE_300 = "#97acff";
export const DATA_VIZ_BLUE_400 = "#7992f5";
export const DATA_VIZ_BLUE_500 = "#617ae2";
export const DATA_VIZ_BLUE_600 = "#4e65cd";
export const DATA_VIZ_BLUE_700 = "#3f51ae";
export const DATA_VIZ_BLUE_800 = "#374291";
export const DATA_VIZ_BLUE_900 = "#303470";
export const DATA_VIZ_BLUE_950 = "#2a2b59";
export const DATA_VIZ_MAGENTA_50 = "#ffe3eb";
export const DATA_VIZ_MAGENTA_100 = "#ffccdb";
export const DATA_VIZ_MAGENTA_200 = "#fcacc5";
export const DATA_VIZ_MAGENTA_300 = "#f88aaf";
export const DATA_VIZ_MAGENTA_400 = "#e86e9a";
export const DATA_VIZ_MAGENTA_500 = "#cf4d81";
export const DATA_VIZ_MAGENTA_600 = "#b93d71";
export const DATA_VIZ_MAGENTA_700 = "#9a2e5d";
export const DATA_VIZ_MAGENTA_800 = "#7c214f";
export const DATA_VIZ_MAGENTA_900 = "#661e3a";
export const DATA_VIZ_MAGENTA_950 = "#541d31";
export const DATA_VIZ_ORANGE_50 = "#fae8d1";
export const DATA_VIZ_ORANGE_100 = "#f5d6b3";
export const DATA_VIZ_ORANGE_200 = "#eebd8c";
export const DATA_VIZ_ORANGE_300 = "#e99b60";
export const DATA_VIZ_ORANGE_400 = "#e07e41";
export const DATA_VIZ_ORANGE_500 = "#c95d2e";
export const DATA_VIZ_ORANGE_600 = "#b14f18";
export const DATA_VIZ_ORANGE_700 = "#92430a";
export const DATA_VIZ_ORANGE_800 = "#6f3500";
export const DATA_VIZ_ORANGE_900 = "#5e2f05";
export const DATA_VIZ_ORANGE_950 = "#4b2707";
export const THEME_INDIGO_10 = "#f8f8ff";
export const THEME_INDIGO_50 = "#f1f1ff";
export const THEME_INDIGO_100 = "#dbdbf8";
export const THEME_INDIGO_200 = "#c7c7f2";
export const THEME_INDIGO_300 = "#a2a2e6";
export const THEME_INDIGO_400 = "#8181d7";
export const THEME_INDIGO_500 = "#6666c4";
export const THEME_INDIGO_600 = "#5252b5";
export const THEME_INDIGO_700 = "#41419f";
export const THEME_INDIGO_800 = "#303083";
export const THEME_INDIGO_900 = "#222261";
export const THEME_INDIGO_950 = "#14143d";
export const THEME_BLUE_10 = "#e6ecf0";
export const THEME_BLUE_50 = "#cdd8e3";
export const THEME_BLUE_100 = "#b9cadc";
export const THEME_BLUE_200 = "#a6bdd5";
export const THEME_BLUE_300 = "#81a5c9";
export const THEME_BLUE_400 = "#628eb9";
export const THEME_BLUE_500 = "#4977a5";
export const THEME_BLUE_600 = "#346596";
export const THEME_BLUE_700 = "#235180";
export const THEME_BLUE_800 = "#153c63";
export const THEME_BLUE_900 = "#0b2640";
export const THEME_BLUE_950 = "#04101c";
export const THEME_LIGHT_BLUE_10 = "#eef3f7";
export const THEME_LIGHT_BLUE_50 = "#dde6ee";
export const THEME_LIGHT_BLUE_100 = "#c1d4e6";
export const THEME_LIGHT_BLUE_200 = "#a0bedc";
export const THEME_LIGHT_BLUE_300 = "#74a3d3";
export const THEME_LIGHT_BLUE_400 = "#4f8bc7";
export const THEME_LIGHT_BLUE_500 = "#3476b9";
export const THEME_LIGHT_BLUE_600 = "#2268ae";
export const THEME_LIGHT_BLUE_700 = "#145aa1";
export const THEME_LIGHT_BLUE_800 = "#0e4d8d";
export const THEME_LIGHT_BLUE_900 = "#0c4277";
export const THEME_LIGHT_BLUE_950 = "#0a3764";
export const THEME_GREEN_10 = "#eef4ef";
export const THEME_GREEN_50 = "#dde9de";
export const THEME_GREEN_100 = "#b1d6b5";
export const THEME_GREEN_200 = "#8cc497";
export const THEME_GREEN_300 = "#69af7d";
export const THEME_GREEN_400 = "#499767";
export const THEME_GREEN_500 = "#308258";
export const THEME_GREEN_600 = "#25744c";
export const THEME_GREEN_700 = "#1b653f";
export const THEME_GREEN_800 = "#155635";
export const THEME_GREEN_900 = "#0e4328";
export const THEME_GREEN_950 = "#052e19";
export const THEME_RED_10 = "#faf4f3";
export const THEME_RED_50 = "#f4e9e7";
export const THEME_RED_100 = "#ecd3d0";
export const THEME_RED_200 = "#e3bab5";
export const THEME_RED_300 = "#d59086";
export const THEME_RED_400 = "#c66e60";
export const THEME_RED_500 = "#ad4a3b";
export const THEME_RED_600 = "#a13322";
export const THEME_RED_700 = "#8f2110";
export const THEME_RED_800 = "#761405";
export const THEME_RED_900 = "#580d02";
export const THEME_RED_950 = "#380700";
export const THEME_LIGHT_RED_10 = "#fdf9f8";
export const THEME_LIGHT_RED_50 = "#faf2f1";
export const THEME_LIGHT_RED_100 = "#f6d9d5";
export const THEME_LIGHT_RED_200 = "#ebada2";
export const THEME_LIGHT_RED_300 = "#e07f6f";
export const THEME_LIGHT_RED_400 = "#d36250";
export const THEME_LIGHT_RED_500 = "#c24b38";
export const THEME_LIGHT_RED_600 = "#b53a26";
export const THEME_LIGHT_RED_700 = "#a02e1c";
export const THEME_LIGHT_RED_800 = "#8b2212";
export const THEME_LIGHT_RED_900 = "#751709";
export const THEME_LIGHT_RED_950 = "#5c1105";
export const BLACK = "#000";
export const WHITE = "#fff";
export const BLUE_50 = "#e9f3fc";
export const BLUE_100 = "#cbe2f9";
export const BLUE_200 = "#9dc7f1";
export const BLUE_300 = "#63a6e9";
export const BLUE_400 = "#428fdc";
export const BLUE_500 = "#1f75cb";
export const BLUE_600 = "#1068bf";
export const BLUE_700 = "#0b5cad";
export const BLUE_800 = "#064787";
export const BLUE_900 = "#033464";
export const BLUE_950 = "#002850";
export const GRAY_10 = "#fbfafd";
export const GRAY_50 = "#ececef";
export const GRAY_100 = "#dcdcde";
export const GRAY_200 = "#bfbfc3";
export const GRAY_300 = "#a4a3a8";
export const GRAY_400 = "#89888d";
export const GRAY_500 = "#737278";
export const GRAY_600 = "#626168";
export const GRAY_700 = "#535158";
export const GRAY_800 = "#434248";
export const GRAY_900 = "#333238";
export const GRAY_950 = "#1f1e24";
export const GREEN_50 = "#ecf4ee";
export const GREEN_100 = "#c3e6cd";
export const GREEN_200 = "#91d4a8";
export const GREEN_300 = "#52b87a";
export const GREEN_400 = "#2da160";
export const GREEN_500 = "#108548";
export const GREEN_600 = "#217645";
export const GREEN_700 = "#24663b";
export const GREEN_800 = "#0d532a";
export const GREEN_900 = "#0a4020";
export const GREEN_950 = "#072b15";
export const ORANGE_50 = "#fdf1dd";
export const ORANGE_100 = "#f5d9a8";
export const ORANGE_200 = "#e9be74";
export const ORANGE_300 = "#d99530";
export const ORANGE_400 = "#c17d10";
export const ORANGE_500 = "#ab6100";
export const ORANGE_600 = "#9e5400";
export const ORANGE_700 = "#8f4700";
export const ORANGE_800 = "#703800";
export const ORANGE_900 = "#5c2900";
export const ORANGE_950 = "#421f00";
export const PURPLE_50 = "#f4f0ff";
export const PURPLE_100 = "#e1d8f9";
export const PURPLE_200 = "#cbbbf2";
export const PURPLE_300 = "#ac93e6";
export const PURPLE_400 = "#9475db";
export const PURPLE_500 = "#7b58cf";
export const PURPLE_600 = "#694cc0";
export const PURPLE_700 = "#5943b6";
export const PURPLE_800 = "#453894";
export const PURPLE_900 = "#2f2a6b";
export const PURPLE_950 = "#232150";
export const RED_50 = "#fcf1ef";
export const RED_100 = "#fdd4cd";
export const RED_200 = "#fcb5aa";
export const RED_300 = "#f57f6c";
export const RED_400 = "#ec5941";
export const RED_500 = "#dd2b0e";
export const RED_600 = "#c91c00";
export const RED_700 = "#ae1800";
export const RED_800 = "#8d1300";
export const RED_900 = "#660e00";
export const RED_950 = "#4d0a00";
export const BRAND_CHARCOAL = "#171321";
export const BRAND_ORANGE_01 = "#fca326";
export const BRAND_ORANGE_02 = "#fc6d26";
export const BRAND_ORANGE_03 = "#e24329";
export const BRAND_PURPLE_01 = "#a989f5";
export const BRAND_PURPLE_02 = "#7759c2";
export const BRAND_GRAY_01 = "#d1d0d3";
export const BRAND_GRAY_02 = "#a2a1a6";
export const BRAND_GRAY_03 = "#74717a";
export const BRAND_GRAY_04 = "#45424d";
export const BRAND_GRAY_05 = "#2b2838";
export const T_GRAY_A_16 = "rgba(31, 30, 36, 0.16)";
export const T_GRAY_A_24 = "rgba(31, 30, 36, 0.24)";
export const T_GRAY_A_02 = "rgba(31, 30, 36, 0.02)";
export const T_GRAY_A_04 = "rgba(31, 30, 36, 0.04)";
export const T_GRAY_A_06 = "rgba(31, 30, 36, 0.06)";
export const T_GRAY_A_08 = "rgba(31, 30, 36, 0.08)";
export const T_WHITE_A_16 = "rgba(255, 255, 255, 0.16)";
export const T_WHITE_A_24 = "rgba(255, 255, 255, 0.24)";
export const T_WHITE_A_36 = "rgba(255, 255, 255, 0.36)";
export const T_WHITE_A_02 = "rgba(255, 255, 255, 0.02)";
export const T_WHITE_A_04 = "rgba(255, 255, 255, 0.04)";
export const T_WHITE_A_06 = "rgba(255, 255, 255, 0.06)";
export const T_WHITE_A_08 = "rgba(255, 255, 255, 0.08)";
export const GL_LINE_HEIGHT_12 = "0.75rem";
export const GL_LINE_HEIGHT_16 = "1rem";
export const GL_LINE_HEIGHT_20 = "1.25rem";
export const GL_LINE_HEIGHT_24 = "1.5rem";
export const GL_LINE_HEIGHT_28 = "1.75rem";
export const GL_LINE_HEIGHT_32 = "2rem";
export const GL_LINE_HEIGHT_36 = "2.25rem";
export const GL_LINE_HEIGHT_42 = "2.625rem";
export const GL_LINE_HEIGHT_44 = "2.75rem";
export const GL_LINE_HEIGHT_52 = "3.25rem";
export const GL_TEXT_PRIMARY = "#333238"; // Use text.color.default instead
export const GL_TEXT_SECONDARY = "#737278"; // Use text.color.subtle instead
export const GL_TEXT_TERTIARY = "#89888d"; // Use text.color.disabled instead
export const GL_TEXT_COLOR_DEFAULT = "#434248"; // Used for the default text color.
export const GL_TEXT_COLOR_SUBTLE = "#626168"; // Used for supplemental text that doesn't need to be as prominent as other text.
export const GL_TEXT_COLOR_STRONG = "#1f1e24"; // Used for text with the highest contrast.
export const GL_TEXT_COLOR_HEADING = "#1f1e24"; // Used for headings level 1-6.
export const GL_TEXT_COLOR_LINK = "#0b5cad"; // Used for default text links.
export const GL_TEXT_COLOR_DANGER = "#c91c00"; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
export const GL_TEXT_COLOR_SUCCESS = "#217645"; // Used for text indicating success or validity.
export const GL_TEXT_COLOR_DISABLED = "#89888d"; // Used for disabled text.