Mini Kabibi Habibi
{
"version": 1,
"disable_skins": true,
"high_contrast": true,
"patch_update": "22 AUG 2025: BG-Layer-1 updated (for grids and lists). Expanded blues and negatives for more button states. Notes for incoming Picker borders fix.",
"colors": {
"GLOBAL_COLOR_TOKENS": "main set of token overrides, many of these are called in various combinations from Alias tokens",
"Gray900": {
"comment": "Text-input focus, hover content",
"original": "22",
"light": "00",
"medium": "ff",
"dark": "ec",
"replace":"all"
},
"Gray800": {
"comment": "Main texts. Values from UIColor",
"original": "29",
"light": "0f",
"medium": "f0",
"dark": "e1",
"replace":"all"
},
"Gray700": {
"comment": "Check border hover. Should also be secondary labels and icons as Subdued but they're all Gray800 >> to fix",
"original": "46",
"light": "38",
"medium": "d6",
"dark": "b3",
"replace":"all"
},
"Gray600": {
"comment": "Focus/active borders, static check & radio border. >> currently NOT working for PICKER HOVER border, fix coming soon. was 89, 59, 9c, 79",
"original": "89",
"light": "59",
"medium": "a0",
"dark": "8d",
"replace":"all"
},
"Gray500": {
"comment": "Resting borders for text inputs & combos. Should be for Picker too, but there's a Drover bug, fix coming soon. Keep Gray400 close or the same. Values from UIColor",
"original": "ad",
"light": "80",
"medium": "7a",
"dark": "66",
"replace":"all"
},
"Gray400": {
"comment": "Action button border, Secondary button Hover borders. (Also Picker on account of the Drover bug.) Want to keep close to or match Gray500. DisabledContent alias was Gray400 now separated to its own value set for more nuanced contrast... except for the disabled elements which are apparently hard-coded to Gray400 (maybe another Drover bug?). Was 66, 7a, 80, ad",
"original": "b0",
"light": "99",
"medium": "7a",
"dark": "59",
"replace":"all"
},
"Gray300": {
"comment": "Secondary pill-button border, but also pill-button hover fills and dividers. Was (lightest) bf, 92, 66, 4c (darkest)",
"original": "ba",
"light": "99",
"medium": "73",
"dark": "59",
"replace":"all"
},
"Gray200": {
"comment": "Hovers. Picker fill hover, action button fill hover. Significant change from Spectrum for light-theme highlights. Values tuned from UIColor",
"IMPORTANT": "Picker-menu-list-item hover is using the 'DroverMix' token not these",
"original": "fa",
"light": "c9",
"medium": "45",
"dark": "29",
"replace":"all"
},
"Gray100": {
"comment": "Dialog & ctb backgrounds. generally want to match BG-Layer2 for main workspace backgrounds ",
"original": "f0",
"light": "b8",
"medium": "53",
"dark": "32",
"replace":"all"
},
"Gray75": {
"comment": "Picker Widget fill, Action button fill, disabled check fill. Matched to BG2 & G100 backgrounds for a flatter 'quiet' theme",
"original": "f0",
"light": "b8",
"medium": "53",
"dark": "32",
"replace":"all"
},
"Gray50": {
"comment": "Text-input & combo fills. Values derived from UIColor original fa, c9, 45, 29. tried 42, 28 as well (darks)",
"original": "fc",
"light": "cb",
"medium": "45",
"dark": "29",
"replace":"all"
},
"Blue1100": {
"comment": "DOWN state for selected-widget accent, hyperlink text",
"original": "004491",
"light": "004491",
"medium": "72B7F9",
"dark":"5EAAF7",
"replace":"all"
},
"Blue1000": {
"comment": "Text-selection at opacties of 20%, (20%), 50%, 55%. Also HOVER & FOCUS state for selected-widget accent, hyperlink text. ",
"original": "0054B6",
"light": "0265dc",
"medium": "5EAAF7",
"dark":"46A0F5",
"replace":"all"
},
"Blue900": {
"comment": "DEFAULT state for selected-widget accent. Also Accent Content (hyperlink)",
"original": "0265dc",
"light": "0265dc",
"medium": "43A0F8",
"dark":"3798F3",
"replace":"all"
},
"Blue800": {
"comment": "Focus Borders via FocusIndicator, List-borders as ContentInformative. Values from UIColor.",
"original": "1e76e3",
"light": "1473e6",
"medium": "0f64d2",
"dark":"0f64d2",
"replace":"all",
"comment-test":"doing lots of tuning here"
},
"Blue700": {
"original": "3892F3",
"light": "3892F3",
"medium": "348FF4",
"dark":"1D80F5",
"replace":"all"
},
"Blue600": {
"comment": "derived from hybrid of Spectrum (medium) an Ps (light)",
"light": "1473e6",
"medium": "348FF4",
"replace":"all"
},
"comment": "blues 500 > 100 via Spectrum until we need to change them. Generally not used in widget states",
"SEMANTIC_ALIAS_TOKENS": "Values defined here will override a global color's [ Replace : All ] declaration",
"BackgroundLayer2Color" : {
"comment-global" : "Opened menu-list surface. Also should be primary ui surfaces (eg panels) with Token Hops for Dark and Light. Matched to MacApp along with Gray100 for surfaces",
"original": "f0",
"light": "b8",
"medium": "53",
"dark": "32"
},
"BackgroundLayer1Color" : {
"comment" : "Is for mid-ui surfaces like non-selected tabs. New colors sampled from UIColor. Previously token-hopped: Darks share with Gray75, Lights with Gray100.",
"original": "e8",
"light": "b0",
"medium": "4a",
"dark": "2b"
},
"BackgroundBaseColor" : {
"comment" : "For deep furthest-back ui areas. Values from UIColor. Token-hops: Darks drop below G50, Lights share with Gray200. ",
"original": "db",
"light": "a3",
"medium": "42",
"dark": "26"
},
"NeutralBackgroundColorSelectedDefault": {
"comment": "Filled active checks & switches. Mapped to Gray700",
"original": "46",
"light": "38",
"medium": "d6",
"dark": "b3"
},
"NeutralBackgroundColorDefault": {
"comment": "Primary button fill. Mapped to Gray400 darks, Gray800 lights"
},
"NeutralBackgroundColorHover": {
"comment": "Primary button fill. Mapped to Gray300 darks, Gray900 lights",
"medium": "66",
"dark": "4c"
},
"NeutralBackgroundColorKeyFocus": {
"comment": "Primary button fill. Mapped to Gray200 darks, Gray900 lights",
"medium": "66",
"dark": "4c"
},
"NeutralBackgroundColorDown": {
"comment": "Primary button fill. Previously mapped to Gray200 darks, Gray 900 lights. Global Gray200 now reserved for hovers so we're correcting the Darks here",
"medium": "61",
"dark": "3e"
},
"DroverMixMenuBackgroundHoverDownOrFocus": {
"comment": "Drover's picker-menu-list-item hovers. Lights derived from BGBase by way of Gray200, darks from BGL1",
"original": "db",
"light": "a3",
"medium": "61",
"dark": "3e"
},
"DisabledContentColor": {
"comment": "Disabled contents, check and radio fills and borders; needs some contrast off boder and background. Pulled off of Gray400 to more align with UIColor: a8, 80, 87, 73",
"original": "a8",
"light": "80",
"medium": "87",
"dark": "73"
},
"DisabledBorderColor": {
"comment": "Disabled borders; now matching fills ok? pulled off of Gray300 to allow for less contrast",
"original": "db",
"light": "a9",
"medium": "61",
"dark": "3e"
},
"DisabledBackgroundColor": {
"comment": "Disabled fills",
"original": "db",
"light": "a9",
"medium": "61",
"dark": "3e"
},
"comment": "Negatives for errors, mix of new and Spectrum values for our funky contrasts.",
"NegativeColor1100": {
"comment": "Down error border & content",
"original": "930000",
"light": "b40000",
"medium": "ffc9bd",
"dark":"ffb7a9"
},
"NegativeColor1000": {
"comment": "Focus, hover error border & content... will be bumping these to 900 in our widget code",
"original": "b40000",
"light": "C40706",
"medium": "FF8673",
"dark":"ff9d8c"
},
"NegativeColor900": {
"comment": "Content and Default error border (WHICH IS NEVER ACTUALLY USED given Ps' input states. Brandon's updates were d31510, ff9581, ff816b",
"original": "D31510",
"light": "E24938",
"medium": "E85D41",
"dark":"F9634C"
},
"NegativeColor800": {
"comment": "Lights Content negative error (warning icon). Not used for darks",
"original": "ea3829",
"light": "E02117",
"medium": "F66649",
"dark":"F75C46"
},
"NegativeColor700": {
"comment": "Darks Content negative error (warning icon). Not used for lights",
"original": "F75C46",
"light": "F75C46",
"medium": "F6503A",
"dark":"EB372A"
},
"NegativeColor600": {
"comment": "darkest default. Not used dark or lights",
"original": "ea3829",
"light": "ea3829",
"medium": "eb372a",
"dark":"D31510"
},
"NegativeColor500": {
"comment": "darkest bg hover, dark default. Not used lights",
"original": "FF9B88",
"light": "FF9B88",
"medium": "D71913",
"dark":"BF0B0A"
},
"NegativeColor400": {
"comment": "darkest bg down, dark hover. spectrum values. Not used lights"
},
"NegativeColor300": {
"comment": "dark, down. spectrum values. Not used lights"
},
"NegativeContentColorDefault": {
"comment": "NegativeColor900",
"original": "D31510",
"light": "D5130D",
"medium": "E85D41",
"dark":"F9634C"
},
"NegativeContentColorDown": {
"comment": "NegativeColor1100",
"original": "930000",
"light": "b40000",
"medium": "ffc9bd",
"dark":"ffb7a9"
},
"NegativeContentColorHover": {
"comment": "NegativeColor1000",
"original": "b40000",
"light": "C40706",
"medium": "FF8673",
"dark":"FF9D8C"
},
"NegativeContentColorKeyFocus": {
"comment": "is 900, was 1000",
"original": "D31510",
"light": "D5130D",
"medium": "E85D41",
"dark":"F9634C"
},
"NegativeBorderColorDefault": {
"comment": "NegativeColor900",
"original": "D31510",
"light": "D5130D",
"medium": "E85D41",
"dark": "F9634C"
},
"NegativeBorderColorDown": {
"comment": "NegativeColor1100",
"original": "930000",
"light": "b40000",
"medium": "ffc9bd",
"dark": "ffb7a9"
},
"NegativeBorderColorFocus": {
"comment": "is now 900, was 1000",
"original": "D31510",
"light": "D5130D",
"medium": "E85D41",
"dark": "F9634C"
},
"NegativeBorderColorFocusHover": {
"comment": "is now 1000, was 1100",
"original": "b40000",
"light": "C40706",
"medium": "FF8673",
"dark": "FF9D8C"
},
"NegativeBorderColorHover": {
"comment": "NegativeColor1000",
"original": "b40000",
"light": "C40706",
"medium": "FF8673",
"dark": "FF9D8C"
},
"NegativeBorderColorKeyFocus": {
"comment": "is now 900, was 1000",
"original": "D31510",
"light": "D5130D",
"medium": "E85D41",
"dark": "F9634C"
},
"comment": "These aliases token-hop; darks go one way, lights go the other. See comment notes for source tokens.",
"NegativeVisualColor": {
"comment": "TOKEN HOPS: NegativeColor800 lights, 700 darks, for warning icon/badge",
"original": "ea3829",
"light": "E02117",
"medium": "F6503A",
"dark": "EB372A"
},
"NegativeBackgroundColorDefault": {
"comment": "TOKEN HOPS: 600 darkest, 500 dark, 900 lights ",
"original": "D31510",
"light": "E24938",
"medium": "D71913",
"dark": "D31510"
},
"NegativeBackgroundColorHover": {
"comment": "TOKEN HOPS: 500 darkest, 400 dark, 1000 lights ",
"original": "b40000",
"light": "C40706",
"medium": "BE0303",
"dark": "BF0B0A"
},
"NegativeBackgroundColorKeyFocus": {
"comment": "TOKEN HOPS: 500 darkest, 400 dark, 1000 lights ",
"original": "b40000",
"light": "C40706",
"medium": "BE0303",
"dark": "BF0B0A"
},
"NegativeBackgroundColorDown": {
"comment": "TOKEN HOPS: 400 darkest, 300 dark, 1100 lights ",
"original": "930000",
"light": "B40000",
"medium": "A70000",
"dark": "A70000"
}
}
}