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