feat(claude): add missing css variables#2164
Open
scarcekoi wants to merge 8 commits intocatppuccin:mainfrom
Open
feat(claude): add missing css variables#2164scarcekoi wants to merge 8 commits intocatppuccin:mainfrom
scarcekoi wants to merge 8 commits intocatppuccin:mainfrom
Conversation
Member
Author
:root {
--_brand-clay:14.8 63.1% 59.6%;
--_brand-clay-emphasized:15.1 54.2% 51.2%;
--_gray-0:0 0% 100%;
--_gray-10:60 14% 99%;
--_gray-20:60 14% 97%;
--_gray-30:60 10% 96%;
--_gray-40:60 11% 95%;
--_gray-50:45 12% 93%;
--_gray-60:48 12% 92%;
--_gray-70:50 12% 91%;
--_gray-80:50 11% 89%;
--_gray-90:51 11% 88%;
--_gray-100:53 12% 87%;
--_gray-150:55 11% 80%;
--_gray-200:55 9% 74%;
--_gray-250:55 7% 68%;
--_gray-300:55 6% 63%;
--_gray-350:48 5% 57%;
--_gray-400:45 3% 52%;
--_gray-450:43 3% 47%;
--_gray-500:40 3% 42%;
--_gray-550:48 3% 36%;
--_gray-600:45 3% 31%;
--_gray-650:40 2% 26%;
--_gray-700:60 3% 21%;
--_gray-750:60 2% 17%;
--_gray-800:60 2% 12%;
--_gray-810:60 2% 12%;
--_gray-820:60 2% 11%;
--_gray-830:60 2% 10%;
--_gray-840:60 2% 9%;
--_gray-850:0 0% 8%;
--_gray-860:0 0% 7%;
--_gray-870:0 0% 7%;
--_gray-880:0 0% 6%;
--_gray-890:0 0% 5%;
--_gray-900:0 0% 4%;
--_red-0:0 0% 100%;
--_red-10:0 100% 99%;
--_red-20:0 78% 98%;
--_red-30:0 85% 97%;
--_red-40:0 78% 96%;
--_red-50:0 67% 95%;
--_red-60:0 66% 94%;
--_red-70:0 70% 94%;
--_red-80:0 73% 93%;
--_red-90:0 76% 92%;
--_red-100:0 78% 91%;
--_red-150:0 77% 86%;
--_red-200:0 77% 81%;
--_red-250:0 75% 76%;
--_red-300:0 74% 71%;
--_red-350:0 72% 65%;
--_red-400:0 73% 59%;
--_red-450:0 61% 52%;
--_red-500:0 55% 47%;
--_red-550:0 57% 41%;
--_red-600:0 58% 35%;
--_red-650:0 60% 30%;
--_red-700:0 60% 25%;
--_red-750:0 64% 19%;
--_red-800:0 62% 15%;
--_red-810:0 62% 14%;
--_red-820:0 63% 13%;
--_red-830:0 63% 12%;
--_red-840:0 64% 11%;
--_red-850:0 60% 10%;
--_red-860:2 56% 9%;
--_red-870:3 49% 8%;
--_red-880:5 35% 7%;
--_red-890:10 21% 5%;
--_red-900:0 0% 4%;
--_orange-0:0 0% 100%;
--_orange-10:15 67% 99%;
--_orange-20:15 67% 98%;
--_orange-30:20 67% 96%;
--_orange-40:17 58% 95%;
--_orange-50:17 60% 94%;
--_orange-60:19 61% 93%;
--_orange-70:18 62% 92%;
--_orange-80:19 67% 91%;
--_orange-90:17 70% 89%;
--_orange-100:18 73% 88%;
--_orange-150:18 73% 83%;
--_orange-200:16 81% 77%;
--_orange-250:16 80% 71%;
--_orange-300:17 79% 64%;
--_orange-350:17 82% 56%;
--_orange-400:17 70% 50%;
--_orange-450:17 69% 45%;
--_orange-500:17 72% 40%;
--_orange-550:17 72% 35%;
--_orange-600:17 77% 30%;
--_orange-650:17 77% 25%;
--_orange-700:18 79% 20%;
--_orange-750:17 81% 16%;
--_orange-800:16 77% 12%;
--_orange-810:16 76% 12%;
--_orange-820:16 78% 11%;
--_orange-830:15 76% 10%;
--_orange-840:15 74% 9%;
--_orange-850:14 67% 8%;
--_orange-860:16 59% 8%;
--_orange-870:18 49% 7%;
--_orange-880:16 35% 6%;
--_orange-890:12 19% 5%;
--_orange-900:0 0% 4%;
--_yellow-0:0 0% 100%;
--_yellow-10:40 75% 98%;
--_yellow-20:38 65% 97%;
--_yellow-30:39 68% 95%;
--_yellow-40:40 64% 94%;
--_yellow-50:39 72% 92%;
--_yellow-60:40 81% 89%;
--_yellow-70:40 85% 87%;
--_yellow-80:39 87% 85%;
--_yellow-90:39 86% 83%;
--_yellow-100:40 88% 81%;
--_yellow-150:40 92% 69%;
--_yellow-200:41 96% 54%;
--_yellow-250:41 100% 46%;
--_yellow-300:40 100% 43%;
--_yellow-350:40 100% 39%;
--_yellow-400:39 100% 36%;
--_yellow-450:38 100% 33%;
--_yellow-500:38 100% 29%;
--_yellow-550:37 100% 26%;
--_yellow-600:36 100% 23%;
--_yellow-650:35 100% 19%;
--_yellow-700:34 100% 16%;
--_yellow-750:33 100% 13%;
--_yellow-800:32 100% 10%;
--_yellow-810:31 100% 9%;
--_yellow-820:32 100% 8%;
--_yellow-830:32 100% 8%;
--_yellow-840:33 89% 7%;
--_yellow-850:31 77% 7%;
--_yellow-860:31 64% 6%;
--_yellow-870:34 53% 6%;
--_yellow-880:30 36% 5%;
--_yellow-890:36 20% 5%;
--_yellow-900:0 0% 4%;
--_green-0:0 0% 100%;
--_green-10:84 56% 98%;
--_green-20:87 58% 96%;
--_green-30:86 50% 95%;
--_green-40:83 50% 93%;
--_green-50:85 48% 91%;
--_green-60:84 50% 89%;
--_green-70:83 52% 87%;
--_green-80:83 53% 85%;
--_green-90:83 55% 83%;
--_green-100:83 55% 81%;
--_green-150:83 55% 71%;
--_green-200:83 54% 61%;
--_green-250:81 54% 51%;
--_green-300:79 94% 37%;
--_green-350:79 100% 33%;
--_green-400:81 100% 30%;
--_green-450:82 100% 27%;
--_green-500:84 100% 24%;
--_green-550:86 100% 21%;
--_green-600:87 100% 18%;
--_green-650:89 100% 16%;
--_green-700:91 100% 13%;
--_green-750:92 100% 10%;
--_green-800:95 100% 8%;
--_green-810:97 100% 7%;
--_green-820:99 100% 7%;
--_green-830:98 100% 6%;
--_green-840:95 100% 6%;
--_green-850:95 86% 5%;
--_green-860:95 70% 5%;
--_green-870:97 48% 5%;
--_green-880:98 31% 5%;
--_green-890:90 17% 5%;
--_green-900:0 0% 4%;
--_aqua-0:0 0% 100%;
--_aqua-10:150 50% 98%;
--_aqua-20:158 50% 97%;
--_aqua-30:155 50% 95%;
--_aqua-40:156 48% 94%;
--_aqua-50:157 45% 92%;
--_aqua-60:158 46% 91%;
--_aqua-70:158 47% 89%;
--_aqua-80:156 51% 87%;
--_aqua-90:158 51% 85%;
--_aqua-100:158 52% 84%;
--_aqua-150:158 52% 75%;
--_aqua-200:157 54% 66%;
--_aqua-250:157 52% 57%;
--_aqua-300:157 52% 49%;
--_aqua-350:159 73% 40%;
--_aqua-400:159 73% 36%;
--_aqua-450:160 76% 32%;
--_aqua-500:162 79% 28%;
--_aqua-550:163 77% 24%;
--_aqua-600:165 88% 20%;
--_aqua-650:166 80% 17%;
--_aqua-700:168 91% 14%;
--_aqua-750:169 93% 11%;
--_aqua-800:169 90% 8%;
--_aqua-810:169 89% 7%;
--_aqua-820:169 89% 7%;
--_aqua-830:170 88% 6%;
--_aqua-840:170 81% 6%;
--_aqua-850:169 68% 6%;
--_aqua-860:165 53% 6%;
--_aqua-870:165 43% 5%;
--_aqua-880:163 26% 5%;
--_aqua-890:160 12% 5%;
--_aqua-900:0 0% 4%;
--_blue-0:0 0% 100%;
--_blue-10:216 100% 99%;
--_blue-20:213 82% 98%;
--_blue-30:210 88% 97%;
--_blue-40:208 74% 95%;
--_blue-50:210 71% 95%;
--_blue-60:210 71% 93%;
--_blue-70:211 74% 92%;
--_blue-80:211 78% 91%;
--_blue-90:211 80% 90%;
--_blue-100:213 85% 89%;
--_blue-150:213 78% 84%;
--_blue-200:213 80% 79%;
--_blue-250:213 77% 73%;
--_blue-300:213 77% 68%;
--_blue-350:212 75% 62%;
--_blue-400:213 77% 56%;
--_blue-450:213 68% 50%;
--_blue-500:213 68% 45%;
--_blue-550:213 72% 39%;
--_blue-600:214 72% 34%;
--_blue-650:213 78% 28%;
--_blue-700:214 78% 24%;
--_blue-750:213 87% 18%;
--_blue-800:212 91% 14%;
--_blue-810:212 91% 13%;
--_blue-820:212 93% 12%;
--_blue-830:212 93% 11%;
--_blue-840:212 92% 10%;
--_blue-850:212 87% 9%;
--_blue-860:213 77% 8%;
--_blue-870:213 63% 7%;
--_blue-880:212 45% 6%;
--_blue-890:214 26% 5%;
--_blue-900:0 0% 4%;
--_violet-0:0 0% 100%;
--_violet-10:255 100% 99%;
--_violet-20:240 100% 99%;
--_violet-30:245 100% 98%;
--_violet-40:244 100% 97%;
--_violet-50:247 100% 96%;
--_violet-60:243 91% 96%;
--_violet-70:245 92% 95%;
--_violet-80:247 87% 94%;
--_violet-90:246 88% 93%;
--_violet-100:247 89% 93%;
--_violet-150:246 86% 89%;
--_violet-200:246 75% 84%;
--_violet-250:247 74% 80%;
--_violet-300:247 68% 75%;
--_violet-350:247 69% 72%;
--_violet-400:248 67% 67%;
--_violet-450:248 67% 63%;
--_violet-500:248 62% 58%;
--_violet-550:248 48% 51%;
--_violet-600:249 48% 44%;
--_violet-650:248 49% 37%;
--_violet-700:248 51% 31%;
--_violet-750:248 52% 25%;
--_violet-800:248 54% 19%;
--_violet-810:248 53% 17%;
--_violet-820:248 54% 16%;
--_violet-830:247 53% 15%;
--_violet-840:248 54% 14%;
--_violet-850:247 54% 13%;
--_violet-860:246 51% 11%;
--_violet-870:243 43% 10%;
--_violet-880:244 35% 8%;
--_violet-890:240 23% 6%;
--_violet-900:0 0% 4%;
--_magenta-0:0 0% 100%;
--_magenta-10:340 60% 99%;
--_magenta-20:338 80% 98%;
--_magenta-30:338 73% 97%;
--_magenta-40:340 60% 96%;
--_magenta-50:340 60% 95%;
--_magenta-60:338 61% 94%;
--_magenta-70:337 66% 93%;
--_magenta-80:338 69% 92%;
--_magenta-90:338 73% 91%;
--_magenta-100:337 76% 90%;
--_magenta-150:338 68% 85%;
--_magenta-200:338 76% 81%;
--_magenta-250:338 71% 75%;
--_magenta-300:337 70% 70%;
--_magenta-350:338 71% 64%;
--_magenta-400:338 61% 58%;
--_magenta-450:339 49% 52%;
--_magenta-500:338 48% 46%;
--_magenta-550:339 49% 40%;
--_magenta-600:338 52% 35%;
--_magenta-650:338 53% 29%;
--_magenta-700:338 54% 24%;
--_magenta-750:338 58% 19%;
--_magenta-800:337 58% 14%;
--_magenta-810:338 61% 13%;
--_magenta-820:338 61% 12%;
--_magenta-830:338 62% 11%;
--_magenta-840:338 62% 10%;
--_magenta-850:339 59% 10%;
--_magenta-860:340 55% 9%;
--_magenta-870:339 44% 8%;
--_magenta-880:340 35% 7%;
--_magenta-890:340 21% 5%;
--_magenta-900:0 0% 4%
}
[data-color-version=v2][data-theme=claude],
[data-color-version=v2][data-theme=claude][data-mode=light] {
--accent-brand:var(--_brand-clay);
--accent-000:var(--_blue-600);
--accent-100:var(--_blue-450);
--accent-200:var(--_blue-450);
--accent-900:var(--_blue-100);
--accent-pro-000:var(--_violet-600);
--accent-pro-100:var(--_violet-450);
--accent-pro-200:var(--_violet-450);
--accent-pro-900:var(--_violet-100);
--bg-000:var(--_gray-0);
--bg-100:var(--_gray-20);
--bg-200:var(--_gray-40);
--bg-300:var(--_gray-50);
--bg-400:var(--_gray-80);
--bg-500:var(--_gray-80);
--brand-000:var(--_brand-clay-emphasized);
--brand-100:var(--_brand-clay-emphasized);
--brand-200:var(--_brand-clay);
--brand-900:var(--always-black);
--border-100:var(--_gray-810);
--border-200:var(--_gray-810);
--border-300:var(--_gray-810);
--border-400:var(--_gray-810);
--danger-000:var(--_red-600);
--danger-100:var(--_red-450);
--danger-200:var(--_red-450);
--danger-900:var(--_red-100);
--pictogram-100:var(--_gray-80);
--pictogram-200:var(--_gray-100);
--pictogram-300:var(--_gray-0);
--pictogram-400:var(--_gray-20);
--success-000:var(--_green-600);
--success-100:var(--_green-450);
--success-200:var(--_green-450);
--success-900:var(--_green-100);
--text-000:var(--_gray-860);
--text-100:var(--_gray-860);
--text-200:var(--_gray-700);
--text-300:var(--_gray-700);
--text-400:var(--_gray-450);
--text-500:var(--_gray-450);
--warning-000:var(--_yellow-600);
--warning-100:var(--_yellow-450);
--warning-200:var(--_yellow-450);
--warning-900:var(--_yellow-100)
}
[data-color-version=v2][data-theme=claude][data-mode=dark] {
--accent-brand:var(--_brand-clay);
--accent-000:var(--_blue-200);
--accent-100:var(--_blue-400);
--accent-200:var(--_blue-400);
--accent-900:var(--_blue-750);
--accent-pro-000:var(--_violet-200);
--accent-pro-100:var(--_violet-400);
--accent-pro-200:var(--_violet-400);
--accent-pro-900:var(--_violet-750);
--bg-000:var(--_gray-750);
--bg-100:var(--_gray-800);
--bg-200:var(--_gray-840);
--bg-300:var(--_gray-860);
--bg-400:var(--_gray-900);
--bg-500:var(--_gray-900);
--brand-000:var(--_brand-clay-emphasized);
--brand-100:var(--_brand-clay);
--brand-200:var(--_brand-clay);
--brand-900:var(--always-black);
--border-100:var(--_gray-100);
--border-200:var(--_gray-100);
--border-300:var(--_gray-100);
--border-400:var(--_gray-100);
--danger-000:var(--_red-200);
--danger-100:var(--_red-400);
--danger-200:var(--_red-400);
--danger-900:var(--_red-750);
--pictogram-100:var(--_gray-650);
--pictogram-200:var(--_gray-700);
--pictogram-300:var(--_gray-750);
--pictogram-400:var(--_gray-800);
--success-000:var(--_green-200);
--success-100:var(--_green-400);
--success-200:var(--_green-400);
--success-900:var(--_green-750);
--text-000:var(--_gray-20);
--text-100:var(--_gray-20);
--text-200:var(--_gray-200);
--text-300:var(--_gray-200);
--text-400:var(--_gray-350);
--text-500:var(--_gray-350);
--warning-000:var(--_yellow-200);
--warning-100:var(--_yellow-400);
--warning-200:var(--_yellow-400);
--warning-900:var(--_yellow-750)
}
@media (prefers-color-scheme:dark) {
[data-color-version=v2][data-theme=claude] {
--accent-brand:var(--_brand-clay);
--accent-000:var(--_blue-200);
--accent-100:var(--_blue-400);
--accent-200:var(--_blue-400);
--accent-900:var(--_blue-750);
--accent-pro-000:var(--_violet-200);
--accent-pro-100:var(--_violet-400);
--accent-pro-200:var(--_violet-400);
--accent-pro-900:var(--_violet-750);
--bg-000:var(--_gray-750);
--bg-100:var(--_gray-800);
--bg-200:var(--_gray-840);
--bg-300:var(--_gray-860);
--bg-400:var(--_gray-900);
--bg-500:var(--_gray-900);
--brand-000:var(--_brand-clay-emphasized);
--brand-100:var(--_brand-clay);
--brand-200:var(--_brand-clay);
--brand-900:var(--always-black);
--border-100:var(--_gray-100);
--border-200:var(--_gray-100);
--border-300:var(--_gray-100);
--border-400:var(--_gray-100);
--danger-000:var(--_red-200);
--danger-100:var(--_red-400);
--danger-200:var(--_red-400);
--danger-900:var(--_red-750);
--pictogram-100:var(--_gray-650);
--pictogram-200:var(--_gray-700);
--pictogram-300:var(--_gray-750);
--pictogram-400:var(--_gray-800);
--success-000:var(--_green-200);
--success-100:var(--_green-400);
--success-200:var(--_green-400);
--success-900:var(--_green-750);
--text-000:var(--_gray-20);
--text-100:var(--_gray-20);
--text-200:var(--_gray-200);
--text-300:var(--_gray-200);
--text-400:var(--_gray-350);
--text-500:var(--_gray-350);
--warning-000:var(--_yellow-200);
--warning-100:var(--_yellow-400);
--warning-200:var(--_yellow-400);
--warning-900:var(--_yellow-750)
}
}That is where I'm getting the CSS variables. |
1 task
uncenter
reviewed
Mar 13, 2026
There does not seem to be a way to theme the charts and graphs right now.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔧 What does this fix? 🔧
Adds missing brand CSS variables which were supposed to be added in #2163, but I forgot to add them.
Closes: #2162. (#2163 didn't actually fix it, this PR adds the CSS variable that the button uses).
🗒 Checklist 🗒