chore: remove more colors (#22882)
David Newell
GitHub
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 229 B After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
@ -140,13 +140,13 @@
|
||||
left: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 0.5625rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
text-align: center;
|
||||
content: '•';
|
||||
}
|
||||
|
||||
.LemonButton__icon {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
}
|
||||
@ -183,7 +183,7 @@
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
line-height: inherit;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@ -524,7 +524,7 @@
|
||||
inset: 0 0 -1px;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
border: 1px solid var(--default);
|
||||
border: 1px solid var(--border-3000);
|
||||
}
|
||||
}
|
||||
|
||||
@ -546,7 +546,7 @@
|
||||
height: 100%;
|
||||
padding: 0 calc(var(--sidebar-horizontal-padding) + 2.5rem) 0 var(--sidebar-list-item-inset);
|
||||
font-size: 0.75rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
@ -556,7 +556,7 @@
|
||||
inset: 0 0 -1px;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
border: 1px solid var(--default);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
.SidebarListItem[aria-invalid='true'] & {
|
||||
border-color: var(--danger);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
height: 1.25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
background: var(--accent-3000);
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
white-space: pre;
|
||||
cursor: default;
|
||||
|
||||
|
||||
@ -168,12 +168,12 @@ export const SidePanelSupport = (): JSX.Element => {
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{product.icon}
|
||||
<span className="text-default opacity-75 group-hover:opacity-100">
|
||||
<span className="text-text-3000 opacity-75 group-hover:opacity-100">
|
||||
{product.name}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<IconChevronDown className="text-default h-6 w-6 opacity-60 -rotate-90 group-hover:opacity-90" />
|
||||
<IconChevronDown className="text-text-3000 h-6 w-6 opacity-60 -rotate-90 group-hover:opacity-90" />
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -163,7 +163,7 @@ export function AddToDashboardModal({
|
||||
onChange={(newValue) => setSearchQuery(newValue)}
|
||||
/>
|
||||
<div className="text-muted-alt">
|
||||
This insight is referenced on <strong className="text-default">{currentDashboards.length}</strong>{' '}
|
||||
This insight is referenced on <strong className="text-text-3000">{currentDashboards.length}</strong>{' '}
|
||||
{pluralize(currentDashboards.length, 'dashboard', 'dashboards', false)}
|
||||
</div>
|
||||
{/* eslint-disable-next-line react/forbid-dom-props */}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
padding: 2rem;
|
||||
background-color: white;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
@ -88,7 +88,7 @@
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: var(--default);
|
||||
background-color: var(--text-3000);
|
||||
border-radius: 0.75rem;
|
||||
opacity: 0;
|
||||
transition-timing-function: cubic-bezier(0.455, 0.03, 0.31, 1.585);
|
||||
@ -100,7 +100,7 @@
|
||||
margin-top: -10px;
|
||||
content: ' ';
|
||||
border: 10px solid transparent;
|
||||
border-left-color: var(--default);
|
||||
border-left-color: var(--text-3000);
|
||||
}
|
||||
|
||||
&.BridgePage__left__message--enter {
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
&.CardMeta--details-shown {
|
||||
.CardMeta__details {
|
||||
margin-top: 0;
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
|
||||
.CardMeta__details__content {
|
||||
pointer-events: all;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
font-size: 0.875rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.375em;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
@ -28,7 +28,7 @@ function CloseAllTags({ elements }: { elements: ElementType[] }): JSX.Element {
|
||||
}}
|
||||
>
|
||||
<pre
|
||||
className="whitespace-pre-wrap break-all p-0 m-0 rounded-none text-default text-sm"
|
||||
className="whitespace-pre-wrap break-all p-0 m-0 rounded-none text-text-3000 text-sm"
|
||||
key={index}
|
||||
>
|
||||
{indent(elements.length - index - 2)}
|
||||
@ -161,7 +161,7 @@ export function HTMLElementsDisplay({
|
||||
<>
|
||||
{elementsToShowDepth ? (
|
||||
<pre
|
||||
className="p-1 m-0 opacity-50 text-default text-sm cursor-pointer"
|
||||
className="p-1 m-0 opacity-50 text-text-3000 text-sm cursor-pointer"
|
||||
data-attr="elements-display-show-more-of-chain"
|
||||
onClick={showAdditionalElements}
|
||||
>
|
||||
|
||||
@ -212,7 +212,7 @@ export function SelectableElement({
|
||||
return (
|
||||
<pre
|
||||
className={clsx(
|
||||
'p-0 m-0 rounded whitespace-pre-wrap break-all text-default text-sm',
|
||||
'p-0 m-0 rounded whitespace-pre-wrap break-all text-text-3000 text-sm',
|
||||
isDeepestChild && highlight ? 'bg-brand-red' : 'bg-transparent'
|
||||
)}
|
||||
>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
height: 2rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
overflow: hidden;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
background: var(--border);
|
||||
|
||||
@ -60,7 +60,7 @@ export function SceneDashboardChoiceModal({ scene }: SceneDashboardChoiceModalPr
|
||||
<div className="flex flex-1 items-center justify-between overflow-hidden">
|
||||
<div className="flex-1 flex flex-col justify-center overflow-hidden">
|
||||
<strong>{dashboard.name}</strong>
|
||||
<span className="text-default font-normal text-ellipsis">
|
||||
<span className="text-text-3000 font-normal text-ellipsis">
|
||||
{dashboard.description}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -44,7 +44,7 @@ export function SeriesLetter({ className, hasBreakdown, seriesIndex, seriesColor
|
||||
: hexToRGBA(color, 0.2),
|
||||
}
|
||||
: {
|
||||
color: 'var(--default)',
|
||||
color: 'var(--text-3000)',
|
||||
}
|
||||
}
|
||||
>
|
||||
|
||||
@ -52,7 +52,7 @@ export function SocialLoginButton({ provider, extraQueryParams }: SocialLoginBut
|
||||
return (
|
||||
<SocialLoginLink provider={provider} extraQueryParams={extraQueryParams}>
|
||||
<LemonButton size="medium" icon={<SocialLoginIcon provider={provider} />}>
|
||||
<span className="text-default">{SSO_PROVIDER_NAMES[provider]}</span>
|
||||
<span className="text-text-3000">{SSO_PROVIDER_NAMES[provider]}</span>
|
||||
</LemonButton>
|
||||
</SocialLoginLink>
|
||||
)
|
||||
|
||||
@ -49,7 +49,7 @@ export function SubscriptionListItem({ subscription, onClick, onDelete }: Subscr
|
||||
<div className="flex justify-between flex-auto items-center p-2">
|
||||
<div>
|
||||
<div className="text-link font-medium">{subscription.title}</div>
|
||||
<div className="text-sm text-default">{capitalizeFirstLetter(subscription.summary)}</div>
|
||||
<div className="text-sm text-text-3000">{capitalizeFirstLetter(subscription.summary)}</div>
|
||||
</div>
|
||||
{subscription.target_type === 'email' ? (
|
||||
<ProfileBubbles
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 12px;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
height: 2rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
overflow: hidden;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
background: var(--border);
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
--lemon-button-gap: 0.5rem;
|
||||
--lemon-button-icon-opacity: 0.8;
|
||||
--lemon-button-profile-picture-opacity: 0.9; // Profile pictures must be more prominent than icons
|
||||
--lemon-button-color: var(--default);
|
||||
--lemon-button-color: var(--text-3000);
|
||||
|
||||
// column-gap: 4px;
|
||||
// flex-direction: row;
|
||||
@ -232,7 +232,7 @@
|
||||
|
||||
&.LemonButton--active,
|
||||
&:hover:not([aria-disabled='true']) {
|
||||
--lemon-button-color: var(--default);
|
||||
--lemon-button-color: var(--text-3000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
&.LemonCard--hoverEffect {
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
text-align: left;
|
||||
cursor: text;
|
||||
background: none;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
&.LemonRow--status-highlighted {
|
||||
font-weight: 600;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
background: var(--primary-bg-hover);
|
||||
|
||||
.LemonRow__icon {
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
}
|
||||
|
||||
a.Link {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
color: var(--primary-3000-hover);
|
||||
@ -156,7 +156,7 @@
|
||||
|
||||
&.LemonTable__row--status-highlighted {
|
||||
font-weight: 600;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
|
||||
> td:not(.LemonTable__cell--sticky) {
|
||||
background: var(--primary-bg-hover);
|
||||
@ -166,7 +166,7 @@
|
||||
> td {
|
||||
padding-top: 0.3125rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary-3000);
|
||||
|
||||
// Make spacing of buttons tighter in tables by adding negative vertical margin
|
||||
.LemonButton {
|
||||
@ -253,7 +253,7 @@
|
||||
cursor: default;
|
||||
|
||||
.LemonTable__header-content {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary-3000);
|
||||
}
|
||||
|
||||
&.LemonTable__header--actionable {
|
||||
@ -262,14 +262,14 @@
|
||||
&:hover {
|
||||
&:not(:has(.LemonTable__header--no-hover:hover)) {
|
||||
.LemonTable__header-content {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.LemonTable__header-content {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ export function LemonTableLink({
|
||||
<div className="flex flex-row items-center font-semibold text-sm gap-1">{title}</div>
|
||||
|
||||
{description ? (
|
||||
<div className="text-default text-xs text-text-secondary-3000 mt-1">
|
||||
<div className="text-text-3000 text-xs text-text-secondary-3000 mt-1">
|
||||
{typeof description === 'string' ? (
|
||||
<LemonMarkdown className="max-w-[30rem]" lowKeyHeadings>
|
||||
{description}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
font-size: 0.75rem;
|
||||
font-weight: var(--font-medium);
|
||||
line-height: 1rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
white-space: nowrap;
|
||||
background: var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
cursor: text;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
&.Lettermark--variant-gray {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
&--subtle {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
color: var(--primary-3000-hover);
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
background: var(--bg-light);
|
||||
border: 1px solid var(--secondary-3000-button-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
opacity: 0;
|
||||
transition: opacity 50ms ease, transform 50ms ease;
|
||||
transform-origin: top;
|
||||
|
||||
@ -18,30 +18,27 @@ const meta: Meta = {
|
||||
export default meta
|
||||
|
||||
const colorGroups = {
|
||||
primary: ['primary-highlight', 'primary-light', 'primary', 'primary-dark'],
|
||||
primary: ['primary-highlight', 'primary'],
|
||||
danger: ['danger-highlight', 'danger-light', 'danger', 'danger-dark'],
|
||||
warning: ['warning-highlight', 'warning-light', 'warning', 'warning-dark'],
|
||||
warning: ['warning-highlight', 'warning', 'warning-dark'],
|
||||
success: ['success-highlight', 'success-light', 'success', 'success-dark'],
|
||||
'primary-alt': ['primary-alt-highlight', 'primary-alt', 'primary-alt-dark'],
|
||||
'primary-alt': ['primary-alt-highlight', 'primary-alt'],
|
||||
'default (primary text)': ['default', 'default-dark'],
|
||||
'muted (secondary text)': ['muted', 'muted-dark'],
|
||||
'muted-alt ': ['muted-alt', 'muted-alt-dark'],
|
||||
'muted-alt ': ['muted-alt'],
|
||||
border: ['border', 'border-light', 'border-bold', 'border-active'],
|
||||
light: ['white', 'light'],
|
||||
}
|
||||
|
||||
const preThousand = [
|
||||
'primary-highlight',
|
||||
'primary-light',
|
||||
'primary',
|
||||
'primary-dark',
|
||||
'danger-highlight',
|
||||
'danger-lighter',
|
||||
'danger-light',
|
||||
'danger',
|
||||
'danger-dark',
|
||||
'warning-highlight',
|
||||
'warning-light',
|
||||
'warning',
|
||||
'warning-dark',
|
||||
'success-highlight',
|
||||
@ -50,13 +47,11 @@ const preThousand = [
|
||||
'success-dark',
|
||||
'primary-alt-highlight',
|
||||
'primary-alt',
|
||||
'primary-alt-dark',
|
||||
'default',
|
||||
'default-dark',
|
||||
'muted',
|
||||
'muted-dark',
|
||||
'muted-alt',
|
||||
'muted-alt-dark',
|
||||
'mark',
|
||||
'white',
|
||||
'bg-light',
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
.drag-handle {
|
||||
padding-right: 0.25rem;
|
||||
font-size: 1.2em;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
cursor: move;
|
||||
|
||||
svg {
|
||||
|
||||
@ -121,7 +121,7 @@ function BatchExportLogEntryLevelDisplay(type: PipelineLogLevel): JSX.Element {
|
||||
color = 'var(--muted)'
|
||||
break
|
||||
case PipelineLogLevel.Log:
|
||||
color = 'var(--default)'
|
||||
color = 'var(--text-3000)'
|
||||
break
|
||||
case PipelineLogLevel.Info:
|
||||
color = 'var(--blue)'
|
||||
|
||||
@ -35,7 +35,9 @@ export const BillingProductPricingTable = ({
|
||||
{
|
||||
title: 'Total',
|
||||
dataIndex: 'total',
|
||||
render: (_, item: BillingTableTierRow) => <span className="font-bold mb-0 text-default">{item.total}</span>,
|
||||
render: (_, item: BillingTableTierRow) => (
|
||||
<span className="font-bold mb-0 text-text-3000">{item.total}</span>
|
||||
),
|
||||
},
|
||||
{ title: 'Projected Total', dataIndex: 'projectedTotal' },
|
||||
]
|
||||
|
||||
@ -213,7 +213,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
|
||||
onChange={(files) => onChange(files[0])}
|
||||
showUploadedFiles={false}
|
||||
callToAction={
|
||||
<div className="flex flex-col items-center justify-center flex-1 cohort-csv-dragger text-default space-y-1">
|
||||
<div className="flex flex-col items-center justify-center flex-1 cohort-csv-dragger text-text-3000 space-y-1">
|
||||
{cohort.csv ? (
|
||||
<>
|
||||
<IconUploadFile
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
background: var(--bg-light);
|
||||
border-width: 1px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -149,7 +149,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
|
||||
|
||||
&.outside {
|
||||
left: calc(100% + #{$label_position_offset});
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
background: var(--bg-light);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
|
||||
&--embedded {
|
||||
border: none;
|
||||
@ -92,7 +92,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
.ActionFilterRowDragHandle {
|
||||
font-size: 1.2em;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
cursor: move;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ export function FunnelCorrelationTable(): JSX.Element | null {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="font-semibold text-default">
|
||||
<div className="font-semibold text-text-3000">
|
||||
{is_success ? (
|
||||
<IconTrending className="text-success" />
|
||||
) : (
|
||||
|
||||
@ -102,7 +102,7 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="font-semibold text-default">
|
||||
<div className="font-semibold text-text-3000">
|
||||
{is_success ? (
|
||||
<IconTrending style={{ color: 'green' }} />
|
||||
) : (
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
fill: var(--default);
|
||||
fill: var(--text-3000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.AggregationColumn__title {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary-3000);
|
||||
|
||||
&:hover {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ function ChangeRow({ metricKey, oldValue, value, isSecret }: ChangeRowInterface)
|
||||
{!isSecret && (
|
||||
<>
|
||||
{' from '}
|
||||
<span className="font-bold text-default">
|
||||
<span className="font-bold text-text-3000">
|
||||
{RenderMetricValue(null, {
|
||||
key: metricKey,
|
||||
value: oldValue,
|
||||
@ -40,7 +40,7 @@ function ChangeRow({ metricKey, oldValue, value, isSecret }: ChangeRowInterface)
|
||||
</>
|
||||
)}
|
||||
{' to '}
|
||||
<span className="font-bold text-default">
|
||||
<span className="font-bold text-text-3000">
|
||||
{RenderMetricValue(null, { key: metricKey, value, emptyNullLabel: 'Unset' })}
|
||||
</span>
|
||||
{isSecret && (
|
||||
|
||||
@ -140,7 +140,7 @@ export function PipelinePluginConfiguration({
|
||||
{plugin.name}
|
||||
</div>
|
||||
{plugin.description ? (
|
||||
<div className="text-default text-xs text-text-secondary-3000 mt-1">
|
||||
<div className="text-text-3000 text-xs text-text-secondary-3000 mt-1">
|
||||
<LemonMarkdown className="max-w-[30rem]" lowKeyHeadings>
|
||||
{plugin.description}
|
||||
</LemonMarkdown>
|
||||
|
||||
@ -235,7 +235,7 @@ export function LogLevelDisplay(level: PipelineLogLevel): JSX.Element {
|
||||
color = 'text-muted'
|
||||
break
|
||||
case PipelineLogLevel.Log:
|
||||
color = 'text-default'
|
||||
color = 'text-text-3000'
|
||||
break
|
||||
case PipelineLogLevel.Info:
|
||||
color = 'text-primary'
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-3000);
|
||||
|
||||
@ -97,7 +97,7 @@ function HomeDashboard({ dashboardLogicProps }: { dashboardLogicProps: Dashboard
|
||||
{!dashboard && <LemonSkeleton className="w-20 h-4" />}
|
||||
{dashboard?.name && (
|
||||
<>
|
||||
<Link className="font-semibold text-xl text-default" to={urls.dashboard(dashboard.id)}>
|
||||
<Link className="font-semibold text-xl text-text-3000" to={urls.dashboard(dashboard.id)}>
|
||||
<IconHome className="mr-2 text-2xl opacity-50" />
|
||||
{dashboard?.name}
|
||||
</Link>
|
||||
|
||||
@ -32,7 +32,7 @@ export function RecordingRow({ recording }: RecordingRowProps): JSX.Element {
|
||||
subtitle={`Recorded ${dayjs(recording.start_time).fromNow()}`}
|
||||
prefix={<ProfilePicture name={asDisplay(recording.person)} />}
|
||||
suffix={
|
||||
<div className="flex items-center justify-end text-default">
|
||||
<div className="flex items-center justify-end text-text-3000">
|
||||
<span>{humanFriendlyDuration(recording.recording_duration)}</span>
|
||||
<IconPlayCircle className="text-2xl ml-2" />
|
||||
</div>
|
||||
|
||||
@ -109,7 +109,7 @@ function CohortDay({
|
||||
}): JSX.Element {
|
||||
const backgroundColorSaturation = percentage / 100
|
||||
const saturatedBackgroundColor = gradateColor(backgroundColor || BRAND_BLUE_HSL, backgroundColorSaturation, 0.1)
|
||||
const textColor = backgroundColorSaturation > 0.4 ? '#fff' : 'var(--default)' // Ensure text contrast
|
||||
const textColor = backgroundColorSaturation > 0.4 ? '#fff' : 'var(--text-3000)' // Ensure text contrast
|
||||
|
||||
const numberCell = (
|
||||
<div
|
||||
|
||||
@ -32,7 +32,7 @@ export function overlayForNewInsightMenu(dataAttr: string): ReactNode[] {
|
||||
}}
|
||||
fullWidth
|
||||
>
|
||||
<div className="text-default flex flex-col text-sm py-1">
|
||||
<div className="text-text-3000 flex flex-col text-sm py-1">
|
||||
<strong>{listedInsightTypeMetadata.name}</strong>
|
||||
<span className="text-xs font-sans">{listedInsightTypeMetadata.description}</span>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ export function SessionRecordingErrors(): JSX.Element {
|
||||
render: (_, cluster) => {
|
||||
const displayTitle = parseTitle(cluster.sample)
|
||||
return (
|
||||
<div title={displayTitle} className="font-semibold text-sm text-default line-clamp-1">
|
||||
<div title={displayTitle} className="font-semibold text-sm text-text-3000 line-clamp-1">
|
||||
{displayTitle}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -26,7 +26,7 @@ const PlayerFrameOverlayContent = (): JSX.Element | null => {
|
||||
content = (
|
||||
<div className="flex flex-col justify-center items-center p-6 bg-bg-light rounded m-6 gap-2 max-w-120 shadow">
|
||||
<IconErrorOutline className="text-danger text-5xl" />
|
||||
<div className="font-bold text-default text-lg">We're unable to play this recording</div>
|
||||
<div className="font-bold text-text-3000 text-lg">We're unable to play this recording</div>
|
||||
<div className="text-muted text-sm text-center">
|
||||
An error occurred that is preventing this recording from being played. You can refresh the page to
|
||||
reload the recording.
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
.Link {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-3000);
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
backdrop-filter: blur(5px);
|
||||
border: 1px solid rgb(0 0 0 / 50%);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
|
||||
.PlayerUpNextButtonBackground {
|
||||
position: absolute;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
overflow: hidden;
|
||||
background-color: var(--default);
|
||||
background-color: var(--text-3000);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
.SessionRecordingPlayerExplorer__iframe {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
.SurveyQuestionDragHandle {
|
||||
font-size: 1.2em;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
cursor: move;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ with SASS, leading to duplicated config. When changing any variable here, please
|
||||
@import 'antd/lib/style/themes/default.less';
|
||||
@import 'antd/dist/antd.less';
|
||||
|
||||
@text-color: var(--default);
|
||||
@text-color: var(--text-3000);
|
||||
@text-muted: #5f5f5f;
|
||||
@primary-color: #1d4aff;
|
||||
@link-color: #1d4aff;
|
||||
|
||||
@ -175,7 +175,7 @@ input::-ms-clear {
|
||||
cursor: unset;
|
||||
border: 1px solid var(--secondary-3000-button-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@ -188,7 +188,7 @@ input::-ms-clear {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
|
||||
b,
|
||||
strong {
|
||||
@ -263,7 +263,7 @@ input::-ms-clear {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
border: 2px solid var(--default);
|
||||
border: 2px solid var(--text-3000);
|
||||
border-radius: 50%;
|
||||
|
||||
// variants
|
||||
@ -404,29 +404,7 @@ input::-ms-clear {
|
||||
// AntD overrrides, placed inside `body` to increase specifity (nicely avoiding the need for !important)
|
||||
body {
|
||||
// Until we have 3000 rolled out we fallback to standard colors
|
||||
--text-3000: var(--default);
|
||||
--text-secondary-3000: var(--text-secondary);
|
||||
--muted-3000: var(--muted);
|
||||
--trace-3000: var(--trace-3000-light);
|
||||
--primary-3000: var(--primary);
|
||||
--primary-3000-highlight: var(--primary-highlight);
|
||||
--primary-3000-hover: var(--primary-light);
|
||||
--primary-3000-active: var(--primary-dark);
|
||||
--secondary-3000: var(--secondary);
|
||||
--secondary-3000-hover: var(--secondary-light);
|
||||
--accent-3000: var(--side);
|
||||
--bg-3000: var(--bg-light);
|
||||
--border-3000: var(--border);
|
||||
--border-bold-3000: var(--border);
|
||||
--glass-bg-3000: var(--bg-light);
|
||||
--glass-border-3000: var(--border);
|
||||
--bg-light: #fff;
|
||||
--bg-table: var(--bg-light);
|
||||
--link: var(--primary-3000);
|
||||
--tooltip-bg: var(--bg-charcoal);
|
||||
--data-color-1-hover: #1d4affe5;
|
||||
--shadow-elevation: var(--shadow-elevation-3000);
|
||||
--primary: var(--primary-3000);
|
||||
--primary-highlight: var(--primary-3000-highlight);
|
||||
|
||||
// Remove below once we're using Tailwind's base
|
||||
@ -450,14 +428,6 @@ body {
|
||||
}
|
||||
|
||||
&[theme='dark'] {
|
||||
.ant-empty-img-simple-path {
|
||||
fill: var(--border-3000);
|
||||
}
|
||||
|
||||
.ant-empty-img-simple-ellipse {
|
||||
fill: var(--border-3000);
|
||||
}
|
||||
|
||||
@include dark-mode-3000-variables;
|
||||
}
|
||||
|
||||
@ -493,7 +463,7 @@ body {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -542,7 +512,7 @@ body {
|
||||
}
|
||||
|
||||
.ant-dropdown {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@ -551,7 +521,7 @@ body {
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
box-shadow: var(--shadow-elevation);
|
||||
box-shadow: var(--shadow-elevation-3000);
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
@ -619,19 +589,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltip styles
|
||||
.ant-tooltip-inner {
|
||||
background-color: var(--tooltip-bg);
|
||||
}
|
||||
|
||||
.ant-tooltip-arrow-content {
|
||||
background-color: var(--tooltip-bg);
|
||||
}
|
||||
|
||||
.ant-tooltip {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
@include common-variables;
|
||||
}
|
||||
|
||||
|
||||
@ -9,33 +9,25 @@ $xl: 1200px;
|
||||
$xxl: 1600px;
|
||||
$colors: (
|
||||
'primary-highlight': rgba(#1d4aff, 0.1),
|
||||
'primary-light': #345cff,
|
||||
'primary': #1d4aff,
|
||||
'primary-dark': #1330a6,
|
||||
'danger-highlight': rgba(#db3707, 0.1),
|
||||
'danger-lighter': #ffa599,
|
||||
'danger-light': #df4b20,
|
||||
'danger': #db3707,
|
||||
'danger-dark': #992705,
|
||||
'warning-highlight': rgba(#f7a501, 0.1),
|
||||
'warning-light': #f8b633,
|
||||
'warning': #f7a501,
|
||||
'warning-dark': #e09423,
|
||||
'highlight': #e49f2c,
|
||||
'highlight-dark': #ffbd4f,
|
||||
'success-highlight': rgba(#388600, 0.1),
|
||||
'success-light': #5f9d32,
|
||||
'success': #388600,
|
||||
'success-dark': #245700,
|
||||
'primary-alt-highlight': rgba(#35416b, 0.1),
|
||||
'primary-alt': #35416b,
|
||||
'primary-alt-dark': #222a46,
|
||||
'default': #2d2d2d,
|
||||
'default-dark': #050505,
|
||||
'muted': #5f5f5f,
|
||||
'muted-dark': #403939,
|
||||
'muted-alt': #747ea1,
|
||||
'muted-alt-dark': #515871,
|
||||
'mark': hsl(42deg 93% 86% / 80%),
|
||||
'white': #fff,
|
||||
'bg-light': #fff,
|
||||
@ -53,8 +45,8 @@ $colors: (
|
||||
'brand-yellow': #f9bd2b,
|
||||
'brand-key': #000,
|
||||
|
||||
// This becomes white in dark mode
|
||||
// PostHog 3000
|
||||
'default-light': #111,
|
||||
'text-3000-light': #111,
|
||||
'text-secondary-3000-light': rgba(#111, 0.7),
|
||||
'muted-3000-light': rgba(#111, 0.6),
|
||||
@ -91,6 +83,7 @@ $colors: (
|
||||
'shadow-elevation-3000-light': 0 3px 0 var(--border-3000-light),
|
||||
'shadow-elevation-3000-dark': 0 3px 0 var(--border-3000-dark),
|
||||
'text-3000-dark': #fff,
|
||||
'default-dark': #050505,
|
||||
'text-secondary-3000-dark': rgba(#fff, 0.7),
|
||||
'muted-3000-dark': rgba(#fff, 0.5),
|
||||
'trace-3000-dark': rgba(#fff, 0.25),
|
||||
@ -126,6 +119,7 @@ $colors: (
|
||||
'danger-3000-button-border-hover-dark': #f54e00,
|
||||
|
||||
// The derived colors
|
||||
'default': var(--default),
|
||||
'text-3000': var(--text-3000),
|
||||
'text-secondary-3000': var(--text-secondary-3000),
|
||||
'muted-3000': var(--muted-3000),
|
||||
@ -154,11 +148,8 @@ $colors: (
|
||||
);
|
||||
|
||||
// These vars are modified via SCSS for legacy reasons (e.g. darken/lighten), so keeping as SCSS vars for now.
|
||||
$_primary: map.get($colors, 'primary');
|
||||
$_success: map.get($colors, 'success');
|
||||
$_primary_bg_active: rgba($_primary, 0.2);
|
||||
$_lifecycle_new: $_primary;
|
||||
$_lifecycle_returning: $_success;
|
||||
$_lifecycle_new: map.get($colors, 'primary');
|
||||
$_lifecycle_returning: map.get($colors, 'success');
|
||||
$_lifecycle_resurrecting: #a56eff; // --data-lilac
|
||||
$_lifecycle_dormant: map.get($colors, 'danger');
|
||||
|
||||
@ -167,14 +158,11 @@ $_lifecycle_dormant: map.get($colors, 'danger');
|
||||
@mixin root-variables {
|
||||
// TODO: Remove the primary-bg...
|
||||
--primary-bg-hover: var(--primary-highlight);
|
||||
--primary-bg-active: #{$_primary_bg_active};
|
||||
--bg-charcoal: #2d2d2d;
|
||||
--bg-bridge: #ebece8;
|
||||
|
||||
// Non-color vars
|
||||
--radius: 0.375rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
|
||||
--modal-shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
|
||||
--opacity-disabled: 0.6;
|
||||
--font-medium: 500;
|
||||
@ -189,7 +177,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
|
||||
--blue: #597dce;
|
||||
--purple: #c278cf;
|
||||
--green: var(--success);
|
||||
--black: var(--default);
|
||||
--black: var(--text-3000);
|
||||
|
||||
//// Data colors (e.g. insight series). Note: colors.ts relies on these values being hexadecimal
|
||||
--data-color-1: #1d4aff;
|
||||
@ -293,7 +281,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
|
||||
--modal-transition-time: 200ms;
|
||||
|
||||
// Tooltips
|
||||
--tooltip-bg-light: var(--bg-charcoal);
|
||||
--tooltip-bg-light: #2d2d2d;
|
||||
--tooltip-bg-dark: #656d81;
|
||||
|
||||
// Notebooks
|
||||
@ -309,6 +297,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
|
||||
|
||||
// defined here so that they can be shared with the toolbar
|
||||
@mixin light-mode-3000-variables {
|
||||
--default: var(--default-light);
|
||||
--text-3000: var(--text-3000-light);
|
||||
--text-secondary-3000: var(--text-secondary-3000-light);
|
||||
--muted-3000: var(--muted-3000-light);
|
||||
@ -347,6 +336,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
|
||||
|
||||
// defined here so that they can be shared with the toolbar
|
||||
@mixin dark-mode-3000-variables {
|
||||
--default: var(--default-dark);
|
||||
--text-3000: var(--text-3000-dark);
|
||||
--text-secondary-3000: var(--text-secondary-3000-dark);
|
||||
--muted-3000: var(--muted-3000-dark);
|
||||
@ -392,7 +382,7 @@ $_lifecycle_dormant: map.get($colors, 'danger');
|
||||
|
||||
// defined here so that they can be shared with the toolbar
|
||||
@mixin common-variables {
|
||||
--default: var(--text-3000);
|
||||
--primary: var(--primary-3000);
|
||||
--text-secondary: var(--text-secondary-3000);
|
||||
--muted: var(--muted-3000);
|
||||
--muted-alt: var(--muted-3000);
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
&:not([aria-disabled='true']):hover,
|
||||
&--active {
|
||||
button {
|
||||
color: var(--default);
|
||||
color: var(--text-3000);
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@ const config = {
|
||||
'1/2': '50%',
|
||||
},
|
||||
boxShadow: {
|
||||
DEFAULT: 'var(--shadow-elevation)',
|
||||
DEFAULT: 'var(--shadow-elevation-3000)',
|
||||
},
|
||||
flex: {
|
||||
2: '2 2 0%',
|
||||
|
||||