Accent Color
| Class | Properties | Color |
|---|---|---|
| gl-accent-inherit | accent-color: inherit; | |
| gl-accent-current | accent-color: currentColor; | |
| gl-accent-transparent | accent-color: transparent; | |
| gl-accent-white | accent-color: var(--white); /* #fff */ | |
| gl-accent-black | accent-color: var(--black); /* #050506 */ | |
| gl-accent-alpha-dark-2 | accent-color: var(--gl-color-alpha-dark-2); /* rgba(5, 5, 6, 0.02) */ | |
| gl-accent-alpha-dark-4 | accent-color: var(--gl-color-alpha-dark-4); /* rgba(5, 5, 6, 0.04) */ | |
| gl-accent-alpha-dark-6 | accent-color: var(--gl-color-alpha-dark-6); /* rgba(5, 5, 6, 0.06) */ | |
| gl-accent-alpha-dark-8 | accent-color: var(--gl-color-alpha-dark-8); /* rgba(5, 5, 6, 0.08) */ | |
| gl-accent-alpha-dark-16 | accent-color: var(--gl-color-alpha-dark-16); /* rgba(5, 5, 6, 0.16) */ | |
| gl-accent-alpha-dark-24 | accent-color: var(--gl-color-alpha-dark-24); /* rgba(5, 5, 6, 0.24) */ | |
| gl-accent-alpha-dark-40 | accent-color: var(--gl-color-alpha-dark-40); /* rgba(5, 5, 6, 0.4) */ | |
| gl-accent-alpha-light-2 | accent-color: var(--gl-color-alpha-light-2); /* rgba(255, 255, 255, 0.02) */ | |
| gl-accent-alpha-light-4 | accent-color: var(--gl-color-alpha-light-4); /* rgba(255, 255, 255, 0.04) */ | |
| gl-accent-alpha-light-6 | accent-color: var(--gl-color-alpha-light-6); /* rgba(255, 255, 255, 0.06) */ | |
| gl-accent-alpha-light-8 | accent-color: var(--gl-color-alpha-light-8); /* rgba(255, 255, 255, 0.08) */ | |
| gl-accent-alpha-light-16 | accent-color: var(--gl-color-alpha-light-16); /* rgba(255, 255, 255, 0.16) */ | |
| gl-accent-alpha-light-24 | accent-color: var(--gl-color-alpha-light-24); /* rgba(255, 255, 255, 0.24) */ | |
| gl-accent-alpha-light-36 | accent-color: var(--gl-color-alpha-light-36); /* rgba(255, 255, 255, 0.36) */ | |
| gl-accent-alpha-light-40 | accent-color: var(--gl-color-alpha-light-40); /* rgba(255, 255, 255, 0.4) */ | |
| gl-accent-blue-50 | accent-color: var(--blue-50); /* #e9f3fc */ | |
| gl-accent-blue-100 | accent-color: var(--blue-100); /* #cbe2f9 */ | |
| gl-accent-blue-200 | accent-color: var(--blue-200); /* #9dc7f1 */ | |
| gl-accent-blue-300 | accent-color: var(--blue-300); /* #63a6e9 */ | |
| gl-accent-blue-400 | accent-color: var(--blue-400); /* #428fdc */ | |
| gl-accent-blue-500 | accent-color: var(--blue-500); /* #1f75cb */ | |
| gl-accent-blue-600 | accent-color: var(--blue-600); /* #2f68b4 */ | |
| gl-accent-blue-700 | accent-color: var(--blue-700); /* #2f5ca0 */ | |
| gl-accent-blue-800 | accent-color: var(--blue-800); /* #284779 */ | |
| gl-accent-blue-900 | accent-color: var(--blue-900); /* #213454 */ | |
| gl-accent-blue-950 | accent-color: var(--blue-950); /* #1d283e */ | |
| gl-accent-gray-10 | accent-color: var(--gray-10); /* #fbfafd */ | |
| gl-accent-gray-50 | accent-color: var(--gray-50); /* #ececef */ | |
| gl-accent-gray-100 | accent-color: var(--gray-100); /* #dcdcde */ | |
| gl-accent-gray-200 | accent-color: var(--gray-200); /* #bfbfc3 */ | |
| gl-accent-gray-300 | accent-color: var(--gray-300); /* #a4a3a8 */ | |
| gl-accent-gray-400 | accent-color: var(--gray-400); /* #89888d */ | |
| gl-accent-gray-500 | accent-color: var(--gray-500); /* #737278 */ | |
| gl-accent-gray-600 | accent-color: var(--gray-600); /* #626168 */ | |
| gl-accent-gray-700 | accent-color: var(--gray-700); /* #4c4b51 */ | |
| gl-accent-gray-800 | accent-color: var(--gray-800); /* #3a383f */ | |
| gl-accent-gray-900 | accent-color: var(--gray-900); /* #28272d */ | |
| gl-accent-gray-950 | accent-color: var(--gray-950); /* #18171d */ | |
| gl-accent-green-50 | accent-color: var(--green-50); /* #ecf4ee */ | |
| gl-accent-green-100 | accent-color: var(--green-100); /* #c3e6cd */ | |
| gl-accent-green-200 | accent-color: var(--green-200); /* #91d4a8 */ | |
| gl-accent-green-300 | accent-color: var(--green-300); /* #52b87a */ | |
| gl-accent-green-400 | accent-color: var(--green-400); /* #2da160 */ | |
| gl-accent-green-500 | accent-color: var(--green-500); /* #108548 */ | |
| gl-accent-green-600 | accent-color: var(--green-600); /* #2f7549 */ | |
| gl-accent-green-700 | accent-color: var(--green-700); /* #306440 */ | |
| gl-accent-green-800 | accent-color: var(--green-800); /* #225131 */ | |
| gl-accent-green-900 | accent-color: var(--green-900); /* #1e3e28 */ | |
| gl-accent-green-950 | accent-color: var(--green-950); /* #17291c */ | |
| gl-accent-orange-50 | accent-color: var(--orange-50); /* #fdf1dd */ | |
| gl-accent-orange-100 | accent-color: var(--orange-100); /* #f5d9a8 */ | |
| gl-accent-orange-200 | accent-color: var(--orange-200); /* #e9be74 */ | |
| gl-accent-orange-300 | accent-color: var(--orange-300); /* #d99530 */ | |
| gl-accent-orange-400 | accent-color: var(--orange-400); /* #c17d10 */ | |
| gl-accent-orange-500 | accent-color: var(--orange-500); /* #ab6100 */ | |
| gl-accent-orange-600 | accent-color: var(--orange-600); /* #995715 */ | |
| gl-accent-orange-700 | accent-color: var(--orange-700); /* #894b16 */ | |
| gl-accent-orange-800 | accent-color: var(--orange-800); /* #693c14 */ | |
| gl-accent-orange-900 | accent-color: var(--orange-900); /* #532e16 */ | |
| gl-accent-orange-950 | accent-color: var(--orange-950); /* #382315 */ | |
| gl-accent-purple-50 | accent-color: var(--purple-50); /* #f4f0ff */ | |
| gl-accent-purple-100 | accent-color: var(--purple-100); /* #e1d8f9 */ | |
| gl-accent-purple-200 | accent-color: var(--purple-200); /* #cbbbf2 */ | |
| gl-accent-purple-300 | accent-color: var(--purple-300); /* #ac93e6 */ | |
| gl-accent-purple-400 | accent-color: var(--purple-400); /* #9475db */ | |
| gl-accent-purple-500 | accent-color: var(--purple-500); /* #7b58cf */ | |
| gl-accent-purple-600 | accent-color: var(--purple-600); /* #6a4fb4 */ | |
| gl-accent-purple-700 | accent-color: var(--purple-700); /* #5c47a6 */ | |
| gl-accent-purple-800 | accent-color: var(--purple-800); /* #493c83 */ | |
| gl-accent-purple-900 | accent-color: var(--purple-900); /* #342d59 */ | |
| gl-accent-purple-950 | accent-color: var(--purple-950); /* #27243e */ | |
| gl-accent-red-50 | accent-color: var(--red-50); /* #fcf1ef */ | |
| gl-accent-red-100 | accent-color: var(--red-100); /* #fdd4cd */ | |
| gl-accent-red-200 | accent-color: var(--red-200); /* #fcb5aa */ | |
| gl-accent-red-300 | accent-color: var(--red-300); /* #f6806d */ | |
| gl-accent-red-400 | accent-color: var(--red-400); /* #ec5941 */ | |
| gl-accent-red-500 | accent-color: var(--red-500); /* #dd2b0e */ | |
| gl-accent-red-600 | accent-color: var(--red-600); /* #c02f12 */ | |
| gl-accent-red-700 | accent-color: var(--red-700); /* #a32c12 */ | |
| gl-accent-red-800 | accent-color: var(--red-800); /* #812713 */ | |
| gl-accent-red-900 | accent-color: var(--red-900); /* #582014 */ | |
| gl-accent-red-950 | accent-color: var(--red-950); /* #3e1a14 */ | |
| gl-accent-data-viz-green-50 | accent-color: var(--data-viz-green-50); /* #ddfab7 */ | |
| gl-accent-data-viz-green-100 | accent-color: var(--data-viz-green-100); /* #c6ed94 */ | |
| gl-accent-data-viz-green-200 | accent-color: var(--data-viz-green-200); /* #b0d97b */ | |
| gl-accent-data-viz-green-300 | accent-color: var(--data-viz-green-300); /* #94c25e */ | |
| gl-accent-data-viz-green-400 | accent-color: var(--data-viz-green-400); /* #81ac41 */ | |
| gl-accent-data-viz-green-500 | accent-color: var(--data-viz-green-500); /* #619025 */ | |
| gl-accent-data-viz-green-600 | accent-color: var(--data-viz-green-600); /* #4e7f0e */ | |
| gl-accent-data-viz-green-700 | accent-color: var(--data-viz-green-700); /* #366800 */ | |
| gl-accent-data-viz-green-800 | accent-color: var(--data-viz-green-800); /* #275600 */ | |
| gl-accent-data-viz-green-900 | accent-color: var(--data-viz-green-900); /* #1a4500 */ | |
| gl-accent-data-viz-green-950 | accent-color: var(--data-viz-green-950); /* #133a03 */ | |
| gl-accent-data-viz-aqua-50 | accent-color: var(--data-viz-aqua-50); /* #b5fefd */ | |
| gl-accent-data-viz-aqua-100 | accent-color: var(--data-viz-aqua-100); /* #93f2ef */ | |
| gl-accent-data-viz-aqua-200 | accent-color: var(--data-viz-aqua-200); /* #5edee3 */ | |
| gl-accent-data-viz-aqua-300 | accent-color: var(--data-viz-aqua-300); /* #32c5d2 */ | |
| gl-accent-data-viz-aqua-400 | accent-color: var(--data-viz-aqua-400); /* #00acc4 */ | |
| gl-accent-data-viz-aqua-500 | accent-color: var(--data-viz-aqua-500); /* #0090b1 */ | |
| gl-accent-data-viz-aqua-600 | accent-color: var(--data-viz-aqua-600); /* #007b9b */ | |
| gl-accent-data-viz-aqua-700 | accent-color: var(--data-viz-aqua-700); /* #006381 */ | |
| gl-accent-data-viz-aqua-800 | accent-color: var(--data-viz-aqua-800); /* #00516c */ | |
| gl-accent-data-viz-aqua-900 | accent-color: var(--data-viz-aqua-900); /* #004059 */ | |
| gl-accent-data-viz-aqua-950 | accent-color: var(--data-viz-aqua-950); /* #00344b */ | |
| gl-accent-data-viz-blue-50 | accent-color: var(--data-viz-blue-50); /* #e9ebff */ | |
| gl-accent-data-viz-blue-100 | accent-color: var(--data-viz-blue-100); /* #d2dcff */ | |
| gl-accent-data-viz-blue-200 | accent-color: var(--data-viz-blue-200); /* #b7c6ff */ | |
| gl-accent-data-viz-blue-300 | accent-color: var(--data-viz-blue-300); /* #97acff */ | |
| gl-accent-data-viz-blue-400 | accent-color: var(--data-viz-blue-400); /* #7992f5 */ | |
| gl-accent-data-viz-blue-500 | accent-color: var(--data-viz-blue-500); /* #617ae2 */ | |
| gl-accent-data-viz-blue-600 | accent-color: var(--data-viz-blue-600); /* #4e65cd */ | |
| gl-accent-data-viz-blue-700 | accent-color: var(--data-viz-blue-700); /* #3f51ae */ | |
| gl-accent-data-viz-blue-800 | accent-color: var(--data-viz-blue-800); /* #374291 */ | |
| gl-accent-data-viz-blue-900 | accent-color: var(--data-viz-blue-900); /* #303470 */ | |
| gl-accent-data-viz-blue-950 | accent-color: var(--data-viz-blue-950); /* #2a2b59 */ | |
| gl-accent-data-viz-magenta-50 | accent-color: var(--data-viz-magenta-50); /* #ffe3eb */ | |
| gl-accent-data-viz-magenta-100 | accent-color: var(--data-viz-magenta-100); /* #ffccdb */ | |
| gl-accent-data-viz-magenta-200 | accent-color: var(--data-viz-magenta-200); /* #fcacc5 */ | |
| gl-accent-data-viz-magenta-300 | accent-color: var(--data-viz-magenta-300); /* #f88aaf */ | |
| gl-accent-data-viz-magenta-400 | accent-color: var(--data-viz-magenta-400); /* #e86e9a */ | |
| gl-accent-data-viz-magenta-500 | accent-color: var(--data-viz-magenta-500); /* #cf4d81 */ | |
| gl-accent-data-viz-magenta-600 | accent-color: var(--data-viz-magenta-600); /* #b93d71 */ | |
| gl-accent-data-viz-magenta-700 | accent-color: var(--data-viz-magenta-700); /* #9a2e5d */ | |
| gl-accent-data-viz-magenta-800 | accent-color: var(--data-viz-magenta-800); /* #7c214f */ | |
| gl-accent-data-viz-magenta-900 | accent-color: var(--data-viz-magenta-900); /* #661e3a */ | |
| gl-accent-data-viz-magenta-950 | accent-color: var(--data-viz-magenta-950); /* #541d31 */ | |
| gl-accent-data-viz-orange-50 | accent-color: var(--data-viz-orange-50); /* #fae8d1 */ | |
| gl-accent-data-viz-orange-100 | accent-color: var(--data-viz-orange-100); /* #f5d6b3 */ | |
| gl-accent-data-viz-orange-200 | accent-color: var(--data-viz-orange-200); /* #eebd8c */ | |
| gl-accent-data-viz-orange-300 | accent-color: var(--data-viz-orange-300); /* #e99b60 */ | |
| gl-accent-data-viz-orange-400 | accent-color: var(--data-viz-orange-400); /* #e07e41 */ | |
| gl-accent-data-viz-orange-500 | accent-color: var(--data-viz-orange-500); /* #c95d2e */ | |
| gl-accent-data-viz-orange-600 | accent-color: var(--data-viz-orange-600); /* #b14f18 */ | |
| gl-accent-data-viz-orange-700 | accent-color: var(--data-viz-orange-700); /* #92430a */ | |
| gl-accent-data-viz-orange-800 | accent-color: var(--data-viz-orange-800); /* #6f3500 */ | |
| gl-accent-data-viz-orange-900 | accent-color: var(--data-viz-orange-900); /* #5e2f05 */ | |
| gl-accent-data-viz-orange-950 | accent-color: var(--data-viz-orange-950); /* #4b2707 */ | |
| gl-accent-neutral-0 | accent-color: var(--gl-color-neutral-0); /* #fff */ | |
| gl-accent-neutral-10 | accent-color: var(--gl-color-neutral-10); /* #fbfafd */ | |
| gl-accent-neutral-50 | accent-color: var(--gl-color-neutral-50); /* #ececef */ | |
| gl-accent-neutral-100 | accent-color: var(--gl-color-neutral-100); /* #dcdcde */ | |
| gl-accent-neutral-200 | accent-color: var(--gl-color-neutral-200); /* #bfbfc3 */ | |
| gl-accent-neutral-300 | accent-color: var(--gl-color-neutral-300); /* #a4a3a8 */ | |
| gl-accent-neutral-400 | accent-color: var(--gl-color-neutral-400); /* #89888d */ | |
| gl-accent-neutral-500 | accent-color: var(--gl-color-neutral-500); /* #737278 */ | |
| gl-accent-neutral-600 | accent-color: var(--gl-color-neutral-600); /* #626168 */ | |
| gl-accent-neutral-700 | accent-color: var(--gl-color-neutral-700); /* #4c4b51 */ | |
| gl-accent-neutral-800 | accent-color: var(--gl-color-neutral-800); /* #3a383f */ | |
| gl-accent-neutral-900 | accent-color: var(--gl-color-neutral-900); /* #28272d */ | |
| gl-accent-neutral-950 | accent-color: var(--gl-color-neutral-950); /* #18171d */ | |
| gl-accent-neutral-1000 | accent-color: var(--gl-color-neutral-1000); /* #050506 */ | |
| gl-accent-brand-white | accent-color: var(--gl-color-brand-white); /* #fff */ | |
| gl-accent-brand-charcoal | accent-color: var(--gl-color-brand-charcoal); /* #171321 */ | |
| gl-accent-brand-orange-01g | accent-color: var(--gl-color-brand-orange-01g); /* #ffd1bf */ | |
| gl-accent-brand-orange-01p | accent-color: var(--gl-color-brand-orange-01p); /* #fca326 */ | |
| gl-accent-brand-orange-02p | accent-color: var(--gl-color-brand-orange-02p); /* #fc6d26 */ | |
| gl-accent-brand-orange-03p | accent-color: var(--gl-color-brand-orange-03p); /* #e24329 */ | |
| gl-accent-brand-purple-01g | accent-color: var(--gl-color-brand-purple-01g); /* #ceb3ef */ | |
| gl-accent-brand-purple-01p | accent-color: var(--gl-color-brand-purple-01p); /* #a989f5 */ | |
| gl-accent-brand-purple-02p | accent-color: var(--gl-color-brand-purple-02p); /* #7759c2 */ | |
| gl-accent-brand-gray-01 | accent-color: var(--gl-color-brand-gray-01); /* #d1d0d3 */ | |
| gl-accent-brand-gray-02 | accent-color: var(--gl-color-brand-gray-02); /* #a2a1a6 */ | |
| gl-accent-brand-gray-03 | accent-color: var(--gl-color-brand-gray-03); /* #74717a */ | |
| gl-accent-brand-gray-04 | accent-color: var(--gl-color-brand-gray-04); /* #45424d */ | |
| gl-accent-brand-gray-05 | accent-color: var(--gl-color-brand-gray-05); /* #2b2838 */ | |
| gl-accent-brand-pink-01g | accent-color: var(--gl-color-brand-pink-01g); /* #ffb9c9 */ | |
| gl-accent-auto | accent-color: auto; |