binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

regression: replace old css vars with the new design system tokens (#8354)

Browse source 
* chore: replace old css vars

* fix: replace shadow and primary colors

* chore: remove hardcoded colors
This commit is contained in:
Aaryan Khandelwal 2025-12-17 16:28:22 +05:30 • committed by GitHub
parent 1338e9d2a4
commit 1f06b67c66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
111 changed files with 180 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/web/styles/emoji.css
View file

@ -6,7 +6,7 @@
--epr-picker-border-radius: 0.25rem !important;
--epr-horizontal-padding: 0.5rem !important;
--epr-emoji-padding: 0.5rem !important;
background-color: rgba(var(--color-background-100)) !important;
@apply bg-surface-1!;
}
.epr-main {
@ -16,8 +16,7 @@
.epr-emoji-category-label {
font-size: 0.7875rem !important;
background-color: rgba(var(--color-background-100), 0.8) !important;
@apply text-tertiary!;
@apply bg-surface-1/80! text-tertiary!;
}
.epr-category-nav,
@ -27,7 +26,7 @@
button.epr-emoji:hover > *,
button.epr-emoji:focus > * {
background-color: rgba(var(--color-background-80)) !important;
@apply bg-layer-2!;
}
input.epr-search {
@ -43,12 +42,12 @@
}
button.epr-btn-clear-search:hover {
background-color: rgba(var(--color-background-80)) !important;
@apply bg-layer-2!;
@apply text-tertiary!;
}
.epr-emoji-variation-picker {
background-color: rgba(var(--color-background-100)) !important;
@apply bg-surface-1!;
@apply border-subtle-1!;
}
}

68
apps/web/styles/globals.css
View file

@ -5,62 +5,6 @@
@import "./emoji.css";
@plugin "@tailwindcss/typography";
:root {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
--color-subscription-one-200: 101, 42, 14;
--color-subscription-one-400: 90, 37, 12;
--color-subscription-pro-200: 32, 128, 138;
--color-subscription-pro-400: 24, 96, 104;
--color-subscription-business-200: 142, 33, 87;
--color-subscription-business-400: 103, 24, 63;
--color-subscription-enterprise-200: 86, 5, 145;
--color-subscription-enterprise-400: 73, 4, 123;
}
[data-theme="light"],
[data-theme="light-contrast"] {
/* Plane subscriptions */
--color-subscription-free-200: 69, 80, 104;
--color-subscription-free-400: 51, 59, 77;
--color-subscription-one-200: 101, 42, 14;
--color-subscription-one-400: 90, 37, 12;
--color-subscription-pro-200: 32, 128, 138;
--color-subscription-pro-400: 24, 96, 104;
--color-subscription-business-200: 142, 33, 87;
--color-subscription-business-400: 103, 24, 63;
--color-subscription-enterprise-200: 86, 5, 145;
--color-subscription-enterprise-400: 73, 4, 123;
}
[data-theme="dark"],
[data-theme="dark-contrast"] {
/* Plane subscriptions */
--color-subscription-free-200: 206, 213, 232;
--color-subscription-free-400: 152, 166, 206;
--color-subscription-one-200: 255, 148, 153;
--color-subscription-one-400: 200, 118, 121;
--color-subscription-pro-200: 12, 170, 192;
--color-subscription-pro-400: 9, 130, 154;
--color-subscription-business-200: 206, 34, 119;
--color-subscription-business-400: 140, 23, 81;
--color-subscription-enterprise-200: 182, 71, 255;
--color-subscription-enterprise-400: 134, 11, 203;
}
/* stickies and editor colors */
:root {
/* text colors */
@ -219,7 +163,7 @@
@keyframes highlight {
0% {
background-color: rgba(var(--color-background-90), 1);
background-color: var(--background-color-layer-2);
border-radius: 4px;
}
100% {
@ -230,7 +174,7 @@
/* Progress Bar Styles */
:root {
--bprogress-color: rgb(var(--color-primary-100)) !important;
--bprogress-color: var(--background-color-accent-primary);
--bprogress-height: 2.5px !important;
}
@ -241,8 +185,8 @@
.bprogress .bar {
background: linear-gradient(
90deg,
rgba(var(--color-primary-100), 0.8) 0%,
rgba(var(--color-primary-100), 1) 100%
--alpha(var(--background-color-accent-primary) / 80%) 0%,
--alpha(var(--background-color-accent-primary) / 100%) 100%
) !important;
will-change: width, opacity;
}
@ -250,7 +194,7 @@
.bprogress .peg {
display: block;
box-shadow:
0 0 8px rgba(var(--color-primary-100), 0.6),
0 0 4px rgba(var(--color-primary-100), 0.4) !important;
0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
will-change: transform, opacity;
}