|
| 1 | +/* ========================== |
| 2 | + BRAND TOKENS |
| 3 | +========================== */ |
| 4 | +:root { |
| 5 | + |
| 6 | +/* Company Colors */ |
| 7 | +--cyberark-navy: #082233; /* 30% Bkg, Highlight Bkg, Workmark, Headlines, Subtitles, Body Copy, Eyebrow Copy, logo, Mark, infographics, iconography, badges, CTAs, section dividers */ |
| 8 | +--cyberark-white: #FFFFFF; /* 30% Background */ |
| 9 | +--primary-white: var(--cyberark-white); /* Generic white */ |
| 10 | +--cyberark-electric-cyan: #29B5E8; /* 13% Highlight Bkg, Mark, Headline (on dark), Subtitles (on dark), Border accents, infographics, iconography, Badges, CTAs, Section dividers */ |
| 11 | +--cyberark-bright-chartreuse: #D6F77A; /* 12% Border accents, Headline Accents (on dark), Subtitle highlights (on Dark), infographics, Iconography, Badges */ |
| 12 | +--cyberark-amethyst: #8874FF; /* 5% Infographics, Iconography, Quote Graphic device, Infographics, Eyebrow Underlines, Badges */ |
| 13 | +--cyberark-sand: #E8E8E3; /* 5% Highlight backgrounds, Backgrounds, Section Divders */ |
| 14 | +--cyberark-slate: #5383A2; /* 5% Headlines, subtitles, Callouts, Section Dividers */ |
| 15 | + |
| 16 | +/* Foreground colors (light scheme) */ |
| 17 | +--primary-color: var(--cyberark-navy); |
| 18 | +--secondary-color: var(--cyberark-electric-cyan); |
| 19 | +--third-color: var(--cyberark-bright-chartreuse); |
| 20 | +--fourth-color: var(--cyberark-amethyst); |
| 21 | +--fifth-color: var(--cyberark-slate); |
| 22 | + |
| 23 | +/* Background colors (light scheme) */ |
| 24 | +--primary-background: var(--primary-white); |
| 25 | +--secondary-background: var(--cyberark-sand); |
| 26 | +--third-background: color-mix(in oklch, var(--cyberark-electric-cyan), var(--primary-white) 95%); |
| 27 | + |
| 28 | +/* Define variants of core colors using math */ |
| 29 | +--lighten-step: 20%; /* Determines the step size for the color lightening math below */ |
| 30 | + |
| 31 | +--primary-80: color-mix(in oklch, var(--primary-color), var(--primary-white) var(--lighten-step)); |
| 32 | +--primary-60: color-mix(in oklch, var(--primary-color), var(--primary-white) calc(var(--lighten-step) * 2)); |
| 33 | +--primary-40: color-mix(in oklch, var(--primary-color), var(--primary-white) calc(var(--lighten-step) * 3)); |
| 34 | +--primary-20: color-mix(in oklch, var(--primary-color), var(--primary-white) calc(var(--lighten-step) * 4)); |
| 35 | + |
| 36 | +--secondary-80: color-mix(in oklch, var(--secondary-color), var(--primary-white) var(--lighten-step)); |
| 37 | +--secondary-60: color-mix(in oklch, var(--secondary-color), var(--primary-white) calc(var(--lighten-step) * 2)); |
| 38 | +--secondary-40: color-mix(in oklch, var(--secondary-color), var(--primary-white) calc(var(--lighten-step) * 3)); |
| 39 | +--secondary-20: color-mix(in oklch, var(--secondary-color), var(--primary-white) calc(var(--lighten-step) * 4)); |
| 40 | + |
| 41 | +--third-80: color-mix(in oklch, var(--third-color), var(--primary-white) var(--lighten-step)); |
| 42 | +--third-60: color-mix(in oklch, var(--third-color), var(--primary-white) calc(var(--lighten-step) * 2)); |
| 43 | +--third-40: color-mix(in oklch, var(--third-color), var(--primary-white) calc(var(--lighten-step) * 3)); |
| 44 | +--third-20: color-mix(in oklch, var(--third-color), var(--primary-white) calc(var(--lighten-step) * 4)); |
| 45 | + |
| 46 | +--fourth-80: color-mix(in oklch, var(--fourth-color), var(--primary-white) var(--lighten-step)); |
| 47 | +--fourth-60: color-mix(in oklch, var(--fourth-color), var(--primary-white) calc(var(--lighten-step) * 2)); |
| 48 | +--fourth-40: color-mix(in oklch, var(--fourth-color), var(--primary-white) calc(var(--lighten-step) * 3)); |
| 49 | +--fourth-20: color-mix(in oklch, var(--fourth-color), var(--primary-white) calc(var(--lighten-step) * 4)); |
| 50 | + |
| 51 | + |
| 52 | +--fifth-80: color-mix(in oklch, var(--fifth-color), var(--primary-white) var(--lighten-step)); |
| 53 | +--fifth-60: color-mix(in oklch, var(--fifth-color), var(--primary-white) calc(var(--lighten-step) * 2)); |
| 54 | +--fifth-40: color-mix(in oklch, var(--fifth-color), var(--primary-white) calc(var(--lighten-step) * 3)); |
| 55 | +--fifth-20: color-mix(in oklch, var(--fifth-color), var(--primary-white) calc(var(--lighten-step) * 4)); |
| 56 | + |
| 57 | +/* CyberArk Docs colors - These aren't official, but I found them used on their docs site. */ |
| 58 | +/* START - Don't use, as they are for reference */ |
| 59 | + |
| 60 | +--alternate-background: #FCFCFC; |
| 61 | +--cyberark-menu-blue: #3165BD; |
| 62 | +--cyberark-menu-gray: #333333; |
| 63 | +--cyberark-link-blue: #047AD4; |
| 64 | +--cyberark-text-black: #000000; |
| 65 | +--cyberark-table-header-background: #F3F6F9; |
| 66 | +--cyberark-table-header-border: #DDD; |
| 67 | +/* END - Don't use */ |
| 68 | +} |
0 commit comments