Skip to content

feat(claude): add missing css variables#2164

Open
scarcekoi wants to merge 8 commits intocatppuccin:mainfrom
scarcekoi:fix-claude
Open

feat(claude): add missing css variables#2164
scarcekoi wants to merge 8 commits intocatppuccin:mainfrom
scarcekoi:fix-claude

Conversation

@scarcekoi
Copy link
Copy Markdown
Member

@scarcekoi scarcekoi commented Mar 11, 2026

🔧 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 🗒

@github-actions github-actions bot added the claude Claude label Mar 11, 2026
@scarcekoi
Copy link
Copy Markdown
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.

@WalkQuackBack WalkQuackBack added the 0.kind: bug Bug (i.e. unthemed components) label Mar 12, 2026
@scarcekoi scarcekoi changed the title fix(claude): add missing css variables feat(claude): add missing css variables Mar 13, 2026
There does not seem to be a way to theme the charts and graphs right
now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

0.kind: bug Bug (i.e. unthemed components) claude Claude

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Claude: Send Button Unthemed

4 participants