yindo/posthog
1
0
Fork 0
mirror of https://github.com/BillyOutlast/posthog.git synced 2026-02-04 03:01:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(devex): rename CSS var accents to a better naming convention (#30394)

Browse Source
This commit is contained in:
Adam Leith
2025-03-26 14:48:03 +00:00
committed by GitHub
parent 0985b8cdb8
commit dd72166323
110 changed files with 243 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
common/tailwind/tailwind.config.js
View File

@@ -5,14 +5,11 @@ const commonColors = {
'inherit': 'inherit',
'current': 'currentColor',
'transparent': 'transparent',
'accent-primary': 'var(--accent-primary)',
'accent-primary-hover': 'var(--accent-primary-hover)',
'accent-primary-active': 'var(--accent-primary-active)',
'accent-primary-highlight': 'var(--accent-primary-highlight)',
'accent-secondary': 'var(--accent-secondary)',
'accent-secondary-hover': 'var(--accent-secondary-hover)',
'accent-secondary-active': 'var(--accent-secondary-active)',
'accent-secondary-highlight': 'var(--accent-secondary-highlight)',
'accent': 'var(--accent)',
'accent-hover': 'var(--accent-hover)',
'accent-active': 'var(--accent-active)',
'accent-highlight-primary': 'var(--accent-highlight-primary)',
'accent-highlight-secondary': 'var(--accent-highlight-secondary)',
}
const deprecatedColors = {
@@ -273,10 +270,10 @@ const deprecatedColors = {
'text-secondary-3000': 'var(--text-secondary-3000)',
'muted-3000': 'var(--muted-3000)',
'trace-3000': 'var(--trace-3000)',
'primary-3000': 'var(--accent-primary)',
'primary-3000': 'var(--accent)',
'primary-3000-hover': 'var(--accent-primary-hover)',
'primary-3000-active': 'var(--accent-primary-active)',
'primary-3000-hover': 'var(--accent-hover)',
'primary-3000-active': 'var(--accent-active)',
'secondary-3000': 'var(--secondary-3000)',
'secondary-3000-hover': 'var(--secondary-3000-hover)',
'accent-3000': 'var(--bg-surface-primary)',

2
cypress/e2e/dashboard.cy.ts
View File

@@ -97,7 +97,7 @@ describe('Dashboard', () => {
cy.contains('span', 'Last 14 days').click()
cy.contains('span', 'Save').click()
cy.contains('span[class="text-accent-primary text-sm font-medium"]', 'Refreshing').should('not.exist')
cy.contains('span[class="text-accent text-sm font-medium"]', 'Refreshing').should('not.exist')
cy.get('span').contains('Refreshing').should('not.exist')
})

BIN
frontend/__snapshots__/ui-colors--brand-accent-colors--dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
frontend/__snapshots__/ui-colors--brand-accent-colors--light.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

2
frontend/src/layout.ejs
View File

@@ -115,7 +115,7 @@
input:focus + label {
transform: translate(0, 0) scale(1);
cursor: pointer;
color: var(--accent-primary);
color: var(--accent);
}
</style>
{% block head %} {% endblock %}

2
frontend/src/layout.html
View File

@@ -154,7 +154,7 @@
input:focus+label {
transform: translate(0, 0) scale(1);
cursor: pointer;
color: var(--accent-primary);
color: var(--accent);
}
h2 {

4
frontend/src/layout/navigation-3000/components/SearchHighlight.tsx
View File

@@ -18,7 +18,7 @@ export function SearchHighlight({ string, substring, className }: Props): JSX.El
<span
key={index}
className={`text-xs ${
part.toLowerCase() === substring.toLowerCase() ? 'bg-accent-primary bg-opacity-60' : ''
part.toLowerCase() === substring.toLowerCase() ? 'bg-accent bg-opacity-60' : ''
}`}
>
{part}
@@ -115,7 +115,7 @@ export function SearchHighlightMultiple({ string, substring, className }: Props)
return (
<div className={`truncate ${className}`}>
{highlightedParts.map((part, index) => (
<span key={index} className={`text-xs ${part.highlight ? 'bg-highlight' : ''}`}>
<span key={index} className={`text-xs ${part.highlight ? 'bg-accent-highlight-primary' : ''}`}>
{part.text}
</span>
))}

2
frontend/src/layout/navigation-3000/sidepanel/panels/activation/SidePanelActivation.tsx
View File

@@ -95,7 +95,7 @@ export const SidePanelActivationIcon = ({ className }: { className?: LemonIconPr
progress={completionPercent / 100}
strokePercentage={0.15}
size={20}
className={clsx(activeTasks.length > 0 ? 'text-accent-primary' : 'text-muted-alt', className)}
className={clsx(activeTasks.length > 0 ? 'text-accent' : 'text-muted-alt', className)}
>
<span className="text-xs font-semibold">{activeTasks.length}</span>
</LemonProgressCircle>

2
frontend/src/layout/navigation-3000/sidepanel/panels/activation/activationLogic.tsx
View File

@@ -463,7 +463,7 @@ export enum ActivationSection {
export const ACTIVATION_SECTIONS: Record<ActivationSection, { title: string; icon: ReactNode }> = {
[ActivationSection.QuickStart]: {
title: 'Get Started',
icon: <IconFeatures className="h-5 w-5 text-accent-primary" />,
icon: <IconFeatures className="h-5 w-5 text-accent" />,
},
[ActivationSection.ProductAnalytics]: {
title: 'Product analytics',

2
frontend/src/layout/navigation/TopBar/AccountPopover.scss
View File

@@ -9,7 +9,7 @@
margin-left: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--accent-primary);
color: var(--accent);
text-align: right;
}

2
frontend/src/lib/components/ActivityLog/ActivityLog.scss
View File

@@ -33,7 +33,7 @@
overflow-wrap: anywhere;
&--unread {
background-color: var(--accent-primary-highlight);
background-color: var(--accent-highlight-secondary);
border-radius: var(--radius);
}

8
frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
View File

@@ -12,8 +12,8 @@
transition: border 200ms ease;
&--highlighted {
border-color: var(--accent-primary);
outline: 1px solid var(--accent-primary);
border-color: var(--accent);
outline: 1px solid var(--accent);
}
.ErrorBoundary {
@@ -134,7 +134,7 @@
line-height: 1rem;
color: var(--text-secondary);
vertical-align: middle;
background: var(--accent-primary-highlight);
background: var(--accent-highlight-secondary);
border-radius: var(--radius);
&.SeriesDisplay__raw-name--action,
@@ -151,7 +151,7 @@
line-height: 1rem;
color: var(--bg-surface-primary);
text-align: center;
background: var(--accent-primary);
background: var(--accent);
border-radius: var(--radius);
}
}

2
frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx
View File

@@ -289,7 +289,7 @@ export function InsightMetaContent({
title="This insight is queued to check for newer results. It will be updated soon."
placement="top-end"
>
<span className="text-accent-primary text-sm font-medium ml-1.5">
<span className="text-accent text-sm font-medium ml-1.5">
<Spinner className="mr-1.5 text-base" />
Refreshing
</span>

4
frontend/src/lib/components/Cards/handles.tsx
View File

@@ -6,7 +6,7 @@ export function ResizeHandle1D({ orientation }: { orientation: 'horizontal' | 'v
<div className={clsx('handle', orientation)}>
<svg fill="none" height="24" viewBox="0 0 16 24" width="16" xmlns="http://www.w3.org/2000/svg">
<rect fill="var(--bg-surface-primary)" height="23" rx="3.5" width="15" x=".5" y=".5" />
<g fill="var(--accent-primary)">
<g fill="var(--accent)">
<rect height="2" rx=".25" width="2" x="5" y="5" />
<rect height="2" rx=".25" width="2" x="9" y="5" />
<rect height="2" rx=".25" width="2" x="5" y="9" />
@@ -28,7 +28,7 @@ export function ResizeHandle2D(): JSX.Element {
<div className="handle corner">
<svg fill="none" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
<rect fill="var(--bg-surface-primary)" height="17" rx="3.5" width="17" x=".5" y=".5" />
<g fill="var(--accent-primary)">
<g fill="var(--accent)">
<rect height="2" rx=".25" width="2" x="8" y="8" />
<rect height="2" rx=".25" width="2" x="8" y="12" />
<rect height="2" rx=".25" width="2" x="12" y="4" />

7
frontend/src/lib/components/CommandBar/ActionResult.tsx
View File

@@ -23,12 +23,7 @@ export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Elemen
}, [focused])
return (
<div
className={clsx(
'border-l-4',
focused ? 'border-accent-primary' : !isExecutable ? 'border-transparent' : null
)}
>
<div className={clsx('border-l-4', focused ? 'border-accent' : !isExecutable ? 'border-transparent' : null)}>
<div
className={`flex items-center w-full px-2 hover:bg-surface-secondary ${
focused ? 'bg-surface-secondary' : 'bg-surface-primary'

2
frontend/src/lib/components/CommandBar/SearchBarTab.tsx
View File

@@ -20,7 +20,7 @@ export const SearchBarTab = ({ tab, inputRef }: SearchBarTabProps): JSX.Element
return (
<div
className={`SearchBarTab flex items-center px-4 py-2 cursor-pointer text-xs whitespace-nowrap border-l-2 ${
isActive ? 'SearchBarTab__active font-bold border-accent-primary' : 'border-transparent'
isActive ? 'SearchBarTab__active font-bold border-accent' : 'border-transparent'
} ${tab === Tab.All ? 'h-9' : ''}`}
onClick={() => {
setActiveTab(tab)

2
frontend/src/lib/components/CommandBar/SearchResult.tsx
View File

@@ -49,7 +49,7 @@ export const SearchResult = ({ result, resultIndex, focused }: SearchResultProps
<div
className={clsx(
'w-full px-2 hover:bg-primary border-l-4 border-b cursor-pointer',
focused ? 'bg-surface-secondary border-l-accent-primary' : 'bg-surface-primary'
focused ? 'bg-surface-secondary border-l-accent' : 'bg-surface-primary'
)}
onClick={() => {
if (mobileLayout) {

2
frontend/src/lib/components/CommandBar/index.scss
View File

@@ -13,7 +13,7 @@
}
&.SearchBarTab__active {
border-color: var(--accent-primary);
border-color: var(--accent);
}
}

4
frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx
View File

@@ -112,10 +112,10 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow, dropdownOverl
return ''
}
const getIconColor = (): 'text-accent-primary' | 'text-danger' | 'text-warning' | 'text-success' => {
const getIconColor = (): 'text-accent' | 'text-danger' | 'text-warning' | 'text-success' => {
if (item.table?.type === 'materialized_view') {
if (item.table.status === 'Running') {
return 'text-accent-primary'
return 'text-accent'
}
if (item.table.status === 'Failed') {
return 'text-danger'

2
frontend/src/lib/components/DebugNotice.tsx
View File

@@ -38,7 +38,7 @@ export function DebugNotice(): JSX.Element | null {
return (
<NavbarButton
identifier="debug-notice"
icon={<IconBranch className="text-accent-primary" />}
icon={<IconBranch className="text-accent" />}
title={
<div className="font-mono">
<div>

2
frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
View File

@@ -63,7 +63,7 @@
}
&.taxonomy-icon-built-in {
color: var(--accent-primary);
color: var(--accent);
}
}
}

6
frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
View File

@@ -6,7 +6,7 @@
&.SelectableElement--selected {
color: var(--text-primary);
text-decoration: underline;
background: var(--accent-primary);
background: var(--accent);
[theme='dark'] & {
color: var(--text-primary-inverse);
@@ -15,7 +15,7 @@
&:hover {
color: var(--text-primary);
background: var(--accent-primary-hover);
background: var(--accent-hover);
[theme='dark'] & {
color: var(--text-primary-inverse);
@@ -24,7 +24,7 @@
&:active {
color: var(--text-primary);
background: var(--accent-primary-active);
background: var(--accent-active);
[theme='dark'] & {
color: var(--text-primary-inverse);

8
frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx
View File

@@ -19,7 +19,7 @@ export function TagPart({
}): JSX.Element {
const hoverSelector = readonly ? '' : 'hover:underline'
const htmlElementsSelector = clsx(
'decoration-accent-primary-highlight',
'decoration-accent-highlight-secondary',
!readonly && 'cursor-pointer SelectableElement'
)
const isSelected = !readonly && !!selectedParts.tag
@@ -50,7 +50,7 @@ function IdPart({
}): JSX.Element | null {
const hoverSelector = readonly ? '' : 'hover:underline'
const htmlElementsSelector = clsx(
'decoration-accent-primary-highlight',
'decoration-accent-highlight-secondary',
!readonly && 'cursor-pointer SelectableElement'
)
const isSelected = !readonly && !!selectedParts.id
@@ -184,7 +184,7 @@ function WithSelectedText({
return (
<>
{text.slice(0, index)}
<span className="bg-accent-primary/30 text-primary">{text.slice(index, index + selectedText.length)}</span>
<span className="bg-accent/30 text-primary">{text.slice(index, index + selectedText.length)}</span>
{text.slice(index + selectedText.length)}
</>
)
@@ -221,7 +221,7 @@ export function SelectableElement({
<pre
className={clsx(
'!p-0 !m-0 rounded whitespace-pre-wrap break-all text-primary',
isDeepestChild && highlight ? 'bg-accent-primary/30 text-primary' : 'bg-transparent',
isDeepestChild && highlight ? 'bg-accent/30 text-primary' : 'bg-transparent',
size === 'xsmall' ? 'text-xs' : 'text-sm'
)}
>

6
frontend/src/lib/components/HedgehogBuddy/HedgehogOptions.tsx
View File

@@ -135,7 +135,7 @@ function HedgehogAccessories(): JSX.Element {
key={acc}
className={clsx(
'border-2',
accessories.includes(acc) ? 'border-accent-primary' : 'border-transparent'
accessories.includes(acc) ? 'border-accent' : 'border-transparent'
)}
size="small"
onClick={() => onClick(acc)}
@@ -170,7 +170,7 @@ function HedgehogColor(): JSX.Element {
className={clsx(
'border-2',
!hedgehogConfig.color && hedgehogConfig.skin === option
? 'border-accent-primary'
? 'border-accent'
: 'border-transparent'
)}
size="small"
@@ -186,7 +186,7 @@ function HedgehogColor(): JSX.Element {
key={option}
className={clsx(
'border-2',
hedgehogConfig.color === option ? 'border-accent-primary' : 'border-transparent'
hedgehogConfig.color === option ? 'border-accent' : 'border-transparent'
)}
size="small"
onClick={() => patchHedgehogConfig({ color: option as any, skin: 'default' })}

2
frontend/src/lib/components/HoqQLPropertyInfo.tsx
View File

@@ -6,7 +6,7 @@ type HoqQLPropertyInfoProps = {
export const HoqQLPropertyInfo = ({ value }: HoqQLPropertyInfoProps): JSX.Element => {
return (
<span title={value} className="font-mono text-accent-primary text-xs">
<span title={value} className="font-mono text-accent text-xs">
{midEllipsis(value, 60)}
</span>
)

2
frontend/src/lib/components/Map/Maplibre.scss
View File

@@ -1,6 +1,6 @@
.maplibregl-ctrl-attrib-button:focus,
.maplibregl-ctrl-group button:focus {
box-shadow: 0 0 2px 2px var(--accent-primary);
box-shadow: 0 0 2px 2px var(--accent);
}
@media screen {

6
frontend/src/lib/components/PathCleanFilters/PathCleanFilterItem.tsx
View File

@@ -50,10 +50,10 @@ export function PathCleanFilterItem({ filter, onChange, onRemove }: PathCleanFil
onClick={() => setVisible(!visible)}
onClose={onRemove}
title={`${filter.regex} is mapped to ${filter.alias}`}
className={clsx({ 'border border-accent-primary': isInvalidRegex })}
className={clsx({ 'border border-accent': isInvalidRegex })}
>
<span className="inline-flex items-center">
<span className="font-mono text-accent-primary text-xs">{filter.regex ?? '(Empty)'}</span>
<span className="font-mono text-accent text-xs">{filter.regex ?? '(Empty)'}</span>
<IconArrowCircleRight className="mx-2" />
<span className="font-mono text-xs">{parseAliasToReadable(filter.alias ?? '(Empty)')}</span>
</span>
@@ -77,7 +77,7 @@ export const parseAliasToReadable = (alias: string): JSX.Element[] => {
if ((part.startsWith('<') && part.endsWith('>')) || part.startsWith(':')) {
return (
<span key={index}>
<span className="rounded bg-accent-primary-highlight px-1">{part}</span>
<span className="rounded bg-accent-highlight-secondary px-1">{part}</span>
<span>{includeSlash ? '/' : ''}</span>
</span>
)

6
frontend/src/lib/components/PathCleanFilters/PathRegexModal.tsx
View File

@@ -65,10 +65,8 @@ export function PathRegexModal({ filter, isOpen, onSave, onClose }: PathRegexMod
<p className="text-secondary">
<span>
Example:{' '}
<span className="font-mono text-accent-primary text-xs">
/merchant/\d+/dashboard$
</span>{' '}
(no need to escape slashes)
<span className="font-mono text-accent text-xs">/merchant/\d+/dashboard$</span> (no
need to escape slashes)
</span>{' '}
<br />
<span>

2
frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx
View File

@@ -62,7 +62,7 @@ export function PathItemFilters({
className="new-prop-filter"
data-attr={'new-prop-filter-' + pageKey}
type="secondary"
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
sideIcon={null}
>
Add exclusion

2
frontend/src/lib/components/Resizer/Resizer.scss
View File

@@ -91,7 +91,7 @@
&:hover .Resizer__handle::after,
&--resizing .Resizer__handle::after {
outline: 3px solid var(--accent-primary);
outline: 3px solid var(--accent);
opacity: 0.25;
}

4
frontend/src/lib/components/ScrollableShadows/ScrollableShadows.stories.tsx
View File

@@ -24,7 +24,7 @@ export const Horizontal = (): JSX.Element => {
>
<div className="flex gap-2 items-center">
{Array.from({ length: 100 }).map((_, index) => (
<div key={index} className="w-24 h-24 shrink-0 bg-accent-primary rounded" />
<div key={index} className="w-24 h-24 shrink-0 bg-accent rounded" />
))}
</div>
</ScrollableShadows>
@@ -61,7 +61,7 @@ export const Vertical = (): JSX.Element => {
>
<div className="flex flex-col gap-2 items-center">
{Array.from({ length: 100 }).map((_, index) => (
<div key={index} className="w-24 h-24 shrink-0 bg-accent-primary rounded" />
<div key={index} className="w-24 h-24 shrink-0 bg-accent rounded" />
))}
</div>
</ScrollableShadows>

4
frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
View File

@@ -48,7 +48,7 @@
}
&.taxonomy-icon-built-in {
color: var(--accent-primary);
color: var(--accent);
}
}
}
@@ -75,7 +75,7 @@
}
&.expand-row {
color: var(--accent-primary);
color: var(--accent);
}
}
}

6
frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
View File

@@ -26,7 +26,7 @@
font-weight: 500;
line-height: 1.25rem;
color: var(--bg-surface-primary);
background: var(--accent-primary);
background: var(--accent);
border-radius: var(--radius);
&::selection {
@@ -78,7 +78,7 @@
left: 0;
width: calc(100% - var(--timeline-seekbar-arrow-width));
height: var(--timeline-seekbar-thickness);
background: var(--accent-primary);
background: var(--accent);
}
.TimelineSeekbar__line-start,
@@ -92,7 +92,7 @@
height: var(--timeline-seekbar-arrow-height);
margin: calc(var(--timeline-seekbar-thickness) + 0.125rem) 0;
content: '';
background: var(--accent-primary);
background: var(--accent);
}
}

4
frontend/src/lib/components/TitledSnack.tsx
View File

@@ -19,7 +19,7 @@ export function TitledSnack({
'border-r',
'rounded-l rounded-r-none',
'overflow-hidden text-ellipsis',
type === 'success' ? 'bg-success-highlight' : 'bg-accent-primary-highlight'
type === 'success' ? 'bg-success-highlight' : 'bg-accent-highlight-secondary'
)}
>
<strong>
@@ -32,7 +32,7 @@ export function TitledSnack({
'pr-1.5 pl-1 py-1 max-w-full',
'rounded-r rounded-l-none',
'overflow-hidden text-ellipsis',
type === 'success' ? 'bg-success-highlight' : 'bg-accent-primary-highlight',
type === 'success' ? 'bg-success-highlight' : 'bg-accent-highlight-secondary',
'flex flex-1 items-center'
)}
>

2
frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
View File

@@ -26,7 +26,7 @@
align-items: center;
width: 1.5rem;
height: 1.5rem;
color: var(--accent-primary);
color: var(--accent);
> svg {
width: 100%;

2
frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
View File

@@ -1,5 +1,5 @@
.LemonBadge {
--lemon-badge-color: var(--accent-primary);
--lemon-badge-color: var(--accent);
--lemon-badge-size: 1.5rem;
--lemon-badge-font-size: 0.75rem;
--lemon-badge-position-offset: 0.5rem;

2
frontend/src/lib/lemon-ui/LemonCard/LemonCard.tsx
View File

@@ -28,7 +28,7 @@ export function LemonCard({
return (
<div
className={`LemonCard ${hoverEffect && 'LemonCard--hoverEffect'} border ${
focused ? 'border-2 border-accent-primary' : 'border-primary'
focused ? 'border-2 border-accent' : 'border-primary'
} rounded p-6 bg-surface-primary relative ${onClick && !focused ? 'cursor-pointer' : ''} ${className}`}
onClick={onClick}
{...props}

6
frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
View File

@@ -21,7 +21,7 @@
label {
--tick-length: 12.73; // Approximation of tick length, which is (3 + 6) * sqrt(2)
--box-color: var(--accent-primary);
--box-color: var(--accent);
display: flex;
gap: 0.5rem;
@@ -67,7 +67,7 @@
&.LemonCheckbox:not(.LemonCheckbox--disabled):hover,
&.LemonCheckbox:not(.LemonCheckbox--disabled):active {
label {
--box-color: var(--accent-primary-hover);
--box-color: var(--accent-hover);
.LemonCheckbox__box {
border-color: var(--box-color);
@@ -76,7 +76,7 @@
}
&.LemonCheckbox:not(.LemonCheckbox--disabled):active label {
--box-color: var(--accent-primary-hover);
--box-color: var(--accent-hover);
}
&.LemonCheckbox--checked {

2
frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
View File

@@ -11,6 +11,6 @@
width: calc(100% + var(--file-drop-target-padding) * 2);
height: calc(100% + var(--file-drop-target-padding) * 2);
content: '';
border: 3px dashed var(--accent-primary);
border: 3px dashed var(--accent);
border-radius: var(--radius);
}

2
frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
View File

@@ -90,7 +90,7 @@
&.LemonInput--has-content {
> .LemonIcon {
color: var(--accent-primary);
color: var(--accent);
}
}

4
frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
View File

@@ -17,10 +17,10 @@
&.LemonRow--status-highlighted {
font-weight: 600;
color: var(--text-3000);
background: var(--accent-primary-highlight);
background: var(--accent-highlight-secondary);
.LemonRow__icon {
color: var(--accent-primary);
color: var(--accent);
}
}

4
frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx
View File

@@ -118,13 +118,13 @@ export function LemonSlider({ value = 0, onChange, min, max, step = 1, className
<div className="w-full bg-fill-slider-rail rounded-full h-[6px]" />
</div>
<div
className="absolute h-[6px] bg-accent-primary rounded-full pointer-events-none"
className="absolute h-[6px] bg-accent rounded-full pointer-events-none"
// eslint-disable-next-line react/forbid-dom-props
style={{ width: `${proportion * 100}%` }}
/>
<button
className={clsx(
'absolute size-3 box-content border-2 border-primary rounded-full cursor-pointer bg-accent-primary transition-shadow duration-75',
'absolute size-3 box-content border-2 border-primary rounded-full cursor-pointer bg-accent transition-shadow duration-75',
dragging ? 'ring-2 scale-90' : 'ring-0 hover:ring-2 focus:ring-2'
)}
// eslint-disable-next-line react/forbid-dom-props

2
frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.tsx
View File

@@ -26,7 +26,7 @@ export const LemonSnack: React.FunctionComponent<LemonSnackProps & React.RefAttr
'inline-flex text-primary-alt max-w-full overflow-hidden break-all items-center py-1 leading-5',
!wrap && 'whitespace-nowrap',
isRegular
? 'bg-accent-primary-highlight px-1.5 rounded'
? 'bg-accent-highlight-secondary px-1.5 rounded'
: 'bg-primary-alt-highlight px-4 rounded-full h-8',
isClickable && 'cursor-pointer',
className

4
frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
View File

@@ -117,7 +117,7 @@
transition: background-color 100ms ease;
.LemonSwitch--checked & {
background-color: var(--accent-primary);
background-color: var(--accent);
}
}
@@ -146,7 +146,7 @@
.LemonSwitch--checked & {
background-color: var(--bg-surface-primary);
border-color: var(--accent-primary);
border-color: var(--accent);
transform: var(--lemon-switch-active-translate);
}

4
frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
View File

@@ -159,7 +159,7 @@
color: var(--text-3000);
> td:not(.LemonTable__cell--sticky) {
background: var(--accent-primary-highlight);
background: var(--accent-highlight-secondary);
}
}
@@ -300,7 +300,7 @@
background: var(--lemon-table-background-color);
.LemonTable__row--status-highlighted &::before {
background: var(--accent-primary-highlight);
background: var(--accent-highlight-secondary);
}
}

4
frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
View File

@@ -6,7 +6,7 @@
height: 0;
padding: 0.05rem !important;
overflow: hidden;
background: var(--accent-primary-highlight);
background: var(--accent-highlight-secondary);
border: none !important;
transition: height 200ms ease, top 200ms ease;
@@ -17,7 +17,7 @@
width: 50%;
height: 100%;
content: '';
background: var(--accent-primary);
background: var(--accent);
animation: LemonTableLoader__swooping 1.5s linear infinite;
}

2
frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
View File

@@ -58,7 +58,7 @@ function TableRowRaw<T extends Record<string, any>>({
rowClassNameDetermined,
rowStatusDetermined && `LemonTable__row--status-${rowStatusDetermined}`,
extraProps?.onClick
? 'hover:underline cursor-pointer hover:bg-accent-primary-highlight'
? 'hover:underline cursor-pointer hover:bg-accent-highlight-secondary'
: undefined,
className
)}

8
frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
View File

@@ -52,7 +52,7 @@
// The active tab slider
content: '';
background: var(--accent-primary);
background: var(--accent);
transform: translateX(var(--lemon-tabs-slider-offset));
.LemonTabs--transitioning & {
@@ -66,15 +66,15 @@
}
&:hover {
color: var(--accent-primary);
color: var(--accent);
}
&:active {
color: var(--accent-primary);
color: var(--accent);
}
&.LemonTabs__tab--active {
color: var(--accent-primary);
color: var(--accent);
text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
}

12
frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
View File

@@ -25,20 +25,20 @@
}
&.LemonTag--primary {
color: var(--accent-primary);
color: var(--accent);
background: none;
border-color: var(--accent-primary);
border-color: var(--accent);
}
&.LemonTag--option {
color: var(--accent-primary);
color: var(--accent);
background-color: var(--bg-surface-primary);
}
&.LemonTag--highlight {
color: var(--accent-primary);
color: var(--accent);
background: none;
border-color: var(--accent-primary);
border-color: var(--accent);
}
&.LemonTag--warning {
@@ -87,7 +87,7 @@
line-height: 16px;
color: var(--primary-alt);
vertical-align: bottom;
background-color: var(--accent-primary-highlight);
background-color: var(--accent-highlight-secondary);
border-radius: 40px;
}

2
frontend/src/lib/lemon-ui/LemonTree/LemonTree.stories.tsx
View File

@@ -218,7 +218,7 @@ const BasicTemplate: StoryFn<typeof LemonTree> = (props: LemonTreeProps) => {
<div className="w-full h-full grid grid-cols-[250px_1fr]">
<LemonTree {...props} contentRef={ref} />
<main
className="p-4 focus-visible:ring-2 ring-accent-primary ring-offset-1"
className="p-4 focus-visible:ring-2 ring-accent ring-offset-1"
ref={ref}
role="main"
tabIndex={-1}

2
frontend/src/lib/lemon-ui/LemonTree/LemonTree.tsx
View File

@@ -219,7 +219,7 @@ const LemonTreeNode = forwardRef<HTMLDivElement, LemonTreeNodeProps>(
className={cn(
'group/lemon-tree-button flex-1 flex items-center gap-2 font-normal cursor-pointer z-1',
{
'ring-2 ring-inset ring-offset-[-1px] ring-accent-primary':
'ring-2 ring-inset ring-offset-[-1px] ring-accent':
focusedId === item.id ||
isContextMenuOpenForItem === item.id,
'bg-fill-button-tertiary-active': getItemActiveState(item),

2
frontend/src/lib/lemon-ui/LemonTree/LemonTreeUtils.tsx
View File

@@ -140,7 +140,7 @@ export const TreeNodeDroppable = (props: DroppableProps): JSX.Element => {
className={cn(
'transition-all duration-150 rounded',
props.className,
props.isDroppable && isOver && 'ring-2 ring-inset ring-accent-primary bg-accent-primary-highlight'
props.isDroppable && isOver && 'ring-2 ring-inset ring-accent bg-accent-highlight-secondary'
)}
>
{props.children}

2
frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.scss
View File

@@ -10,6 +10,6 @@
padding: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary, var(--accent-primary));
color: var(--text-secondary, var(--accent));
}
}

8
frontend/src/lib/lemon-ui/Link/Link.scss
View File

@@ -1,7 +1,7 @@
.Link {
padding: 0;
line-height: inherit;
color: var(--accent-primary);
color: var(--accent);
text-align: left;
cursor: pointer;
background: none;
@@ -10,11 +10,11 @@
&:not(:disabled) {
&:hover {
color: var(--accent-primary-hover);
color: var(--accent-hover);
}
&:active {
color: var(--accent-primary-active);
color: var(--accent-active);
}
}
@@ -31,7 +31,7 @@
color: var(--text-3000);
&:not(:disabled):hover {
color: var(--accent-primary-hover);
color: var(--accent-hover);
}
}
}

2
frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
View File

@@ -97,6 +97,6 @@
color: #fff;
letter-spacing: -0.05em;
user-select: none;
background: var(--accent-primary);
background: var(--accent);
border-radius: 50%;
}

2
frontend/src/lib/lemon-ui/Spinner/Spinner.scss
View File

@@ -1,6 +1,6 @@
.Spinner {
--spinner-speed: 1s;
--spinner-color: var(--accent-primary);
--spinner-color: var(--accent);
display: inline-block; // Same as .LemonIcon
flex-shrink: 0;

2
frontend/src/lib/lemon-ui/Spinner/Spinner.tsx
View File

@@ -46,7 +46,7 @@ export function SpinnerOverlay({
return (
<div className={twJoin('SpinnerOverlay', sceneLevel && 'SpinnerOverlay--scene-level')} aria-hidden={!visible}>
{mode === 'editing' ? (
<IconPencil className="text-5xl text-accent-primary z-10 drop-shadow-xl" />
<IconPencil className="text-5xl text-accent z-10 drop-shadow-xl" />
) : (
<Spinner className={twMerge('text-5xl', className)} {...spinnerProps} />
)}

8
frontend/src/lib/lemon-ui/icons/icons.stories.tsx
View File

@@ -194,7 +194,7 @@ ShelfOther.parameters = { testOptions: { snapshotTargetSelector: '.LemonTable tb
export function IconWithCountBubble(): JSX.Element {
return (
<span className="inline-flex text-2xl border border-accent-primary p-1">
<span className="inline-flex text-2xl border border-accent p-1">
<IconWithCount count={7}>
<IconDashboard />
</IconWithCount>
@@ -204,7 +204,7 @@ export function IconWithCountBubble(): JSX.Element {
export function IconWithCountHidingZero(): JSX.Element {
return (
<span className="inline-flex text-2xl border border-accent-primary p-1">
<span className="inline-flex text-2xl border border-accent p-1">
<IconWithCount count={0} showZero={false}>
<IconDashboard />
</IconWithCount>
@@ -214,7 +214,7 @@ export function IconWithCountHidingZero(): JSX.Element {
export function IconWithCountShowingZero(): JSX.Element {
return (
<span className="inline-flex text-2xl border border-accent-primary p-1">
<span className="inline-flex text-2xl border border-accent p-1">
<IconWithCount count={0} showZero={true}>
<IconDashboard />
</IconWithCount>
@@ -224,7 +224,7 @@ export function IconWithCountShowingZero(): JSX.Element {
export function IconWithCountOverflowing(): JSX.Element {
return (
<span className="inline-flex text-2xl border border-accent-primary p-1">
<span className="inline-flex text-2xl border border-accent p-1">
<IconWithCount count={11} showZero={true}>
<IconDashboard />
</IconWithCount>

60
frontend/src/lib/ui/Colors/Colors.stories.tsx
View File

@@ -81,26 +81,14 @@ export function BrandAccentColors(): JSX.Element {
const [primarySaturation, setPrimarySaturation] = useState<number>(isDarkModeOn ? 94 : 100)
const [primaryLightness, setPrimaryLightness] = useState<number>(isDarkModeOn ? 57 : 48)
const [secondaryHue, setSecondaryHue] = useState<number>(228)
const [secondarySaturation, setSecondarySaturation] = useState<number>(100)
const [secondaryLightness, setSecondaryLightness] = useState<number>(56)
useEffect(() => {
document.body.style.setProperty(
'--accent-primary',
`hsl(${primaryHue}deg ${primarySaturation}% ${primaryLightness}%)`
)
document.body.style.setProperty(
'--accent-secondary',
`hsl(${secondaryHue}deg ${secondarySaturation}% ${secondaryLightness}%)`
)
}, [primaryHue, primarySaturation, primaryLightness, secondaryHue, secondarySaturation, secondaryLightness])
document.body.style.setProperty('--accent', `hsl(${primaryHue}deg ${primarySaturation}% ${primaryLightness}%)`)
}, [primaryHue, primarySaturation, primaryLightness])
return (
<div className="flex flex-col gap-4">
<div className="border border-primary flex flex-col gap-2 p-4 items-start">
<p className="text-accent-primary">Accent primary</p>
<p className="text-accent-secondary">Accent secondary</p>
<p className="text-accent">Accent</p>
</div>
<div className="flex flex-col gap-2 border border-primary rounded-md p-2">
@@ -122,31 +110,7 @@ export function BrandAccentColors(): JSX.Element {
<div
// eslint-disable-next-line react/forbid-dom-props
style={{ backgroundColor: `var(--accent-primary)` }}
className="w-12 h-12 rounded border border-primary"
/>
</div>
</div>
<div className="flex flex-col gap-2 border border-primary rounded-md p-2">
<div className="text-primary font-medium">Secondary accent color</div>
<div className="flex gap-2">
<label className="flex flex-col gap-1 flex-1">
<label htmlFor="secondary-hue">Hue</label>
<LemonSlider value={secondaryHue} onChange={setSecondaryHue} min={0} max={360} />
</label>
<label className="flex flex-col gap-1 flex-1">
<label htmlFor="secondary-saturation">Saturation</label>
<LemonSlider value={secondarySaturation} onChange={setSecondarySaturation} min={0} max={100} />
</label>
<label className="flex flex-col gap-1 flex-1">
<label htmlFor="secondary-lightness">Lightness</label>
<LemonSlider value={secondaryLightness} onChange={setSecondaryLightness} min={0} max={100} />
</label>
<div
// eslint-disable-next-line react/forbid-dom-props
style={{ backgroundColor: `var(--accent-secondary)` }}
style={{ backgroundColor: `var(--accent)` }}
className="w-12 h-12 rounded border border-primary"
/>
</div>
@@ -211,24 +175,24 @@ export function SemanticColors(): JSX.Element {
name: '--text-tertiary',
},
// {
// tailwindClass: 'text-accent-primary',
// tailwindClass: 'text-accent',
// description: 'the main accent text color',
// variableName: '--accent-primary'
// variableName: '--accent'
// },
// {
// tailwindClass: 'text-accent-primary-hover',
// tailwindClass: 'text-accent-hover',
// description: 'the main accent text color on hover',
// variableName: '--accent-primary-hover'
// variableName: '--accent-hover'
// },
// {
// tailwindClass: 'text-accent-primary-active',
// tailwindClass: 'text-accent-active',
// description: 'the main accent text color on active',
// variableName: '--accent-primary-active'
// variableName: '--accent-active'
// },
// {
// tailwindClass: 'text-accent-primary-highlight',
// tailwindClass: 'text-accent-highlight-secondary',
// description: 'the main accent text color on highlight',
// variableName: '--accent-primary-highlight'
// variableName: '--accent-highlight-secondary'
// },
// {
// tailwindClass: 'text-accent-secondary',

2
frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
View File

@@ -28,7 +28,7 @@
padding: 0 0.5rem;
margin: calc(var(--radius) / 2) 0;
overflow: hidden;
background-color: var(--accent-primary-highlight);
background-color: var(--accent-highlight-secondary);
border-radius: var(--radius);
}

4
frontend/src/queries/nodes/DataTable/renderColumn.tsx
View File

@@ -275,7 +275,7 @@ export function renderColumn(
return (
<CopyToClipboardInline
explicitValue={String(value)}
iconStyle={{ color: 'var(--accent-primary)' }}
iconStyle={{ color: 'var(--accent)' }}
description="person id"
>
{String(value)}
@@ -285,7 +285,7 @@ export function renderColumn(
return (
<CopyToClipboardInline
explicitValue={String(value)}
iconStyle={{ color: 'var(--accent-primary)' }}
iconStyle={{ color: 'var(--accent)' }}
description="group id"
>
{String(value)}

2
frontend/src/queries/nodes/InsightViz/InsightViz.scss
View File

@@ -188,7 +188,7 @@
.funnel-significance-highlight {
display: inline-flex;
color: var(--bg-surface-primary);
background: var(--accent-primary);
background: var(--accent);
.LemonIcon {
color: var(--bg-surface-primary);

2
frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
View File

@@ -76,7 +76,7 @@ const SelectOption = ({ title, description, value, selectedValue }: SelectOption
<div
className={`flex shrink-0 font-bold w-10 h-10 mr-3 justify-center items-center rounded text-xs ${
value === selectedValue
? 'bg-accent-primary text-primary-inverse [text-shadow:0_0_1px_black]'
? 'bg-accent text-primary-inverse [text-shadow:0_0_1px_black]'
: 'bg-surface-secondary text-primary'
}`}
>

4
frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
View File

@@ -68,7 +68,7 @@ export function PropertyGroupFilters({
data-attr={`${pageKey}-add-filter-group-inline`}
type="secondary"
onClick={addFilterGroup}
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
sideIcon={null}
disabledReason={disabledReason}
className="PropertyGroupFilters__add-filter-group-inline"
@@ -155,7 +155,7 @@ export function PropertyGroupFilters({
data-attr={`${pageKey}-add-filter-group`}
type="secondary"
onClick={addFilterGroup}
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
sideIcon={null}
disabledReason={disabledReason}
// This class hides this button in some situations to improve layout

2
frontend/src/queries/nodes/WebVitals/WebVitalsTab.tsx
View File

@@ -25,7 +25,7 @@ export function WebVitalsTab({ value, metric, isActive, setTab }: WebVitalsTabPr
onClick={setTab}
className={clsx(
'flex-1 gap-2 border p-2 bg-surface-primary rounded items-center sm:items-start flex flex-col justify-between cursor-pointer',
isActive && 'border-accent-primary border-2'
isActive && 'border-accent border-2'
)}
>
<div className="text-sm hidden sm:flex w-full flex-row justify-between">

2
frontend/src/scenes/PreflightCheck/PreflightCheck.scss
View File

@@ -81,7 +81,7 @@
svg,
.Preflight__status-text {
color: var(--accent-primary);
color: var(--accent);
}
}

2
frontend/src/scenes/PreflightCheck/PreflightCheck.tsx
View File

@@ -22,7 +22,7 @@ export const scene: SceneExport = {
function PreflightCheckIcon({ status, loading }: { status: PreflightCheckStatus; loading?: boolean }): JSX.Element {
if (loading) {
return <Spinner textColored className="text-accent-primary" />
return <Spinner textColored className="text-accent" />
}
if (status === 'validated') {
return <IconCheckCircle />

2
frontend/src/scenes/billing/CreditCTAHero.tsx
View File

@@ -26,7 +26,7 @@ export const CreditCTAHero = (): JSX.Element | null => {
return (
<div className="absolute top-0 right-0 z-10">
<div
className="cursor-pointer border border-accent-primary rounded-lg pr-3 pl-2 py-1 hover:bg-accent-primary-highlight transition-colors group"
className="cursor-pointer border border-accent rounded-lg pr-3 pl-2 py-1 hover:bg-accent-highlight-secondary transition-colors group"
onClick={() => toggleCreditCTAHeroDismissed(false)}
>
<span className="flex items-center gap-1.5">

2
frontend/src/scenes/billing/InitialBillingLimitNotice.tsx
View File

@@ -25,7 +25,7 @@ const InitialBillingLimitNoticeContents = ({ product }: { product: BillingProduc
dismissKey={`initial-billing-limit-notice-${product.type}`}
>
<p className="flex-1 min-w-full sm:min-w-0">
Default initial billing limit of <b className="text-accent-primary">${initialBillingLimit}</b> active.
Default initial billing limit of <b className="text-accent">${initialBillingLimit}</b> active.
</p>
<p className="font-normal">
This protects you from accidentally incurring large unexpected charges. Some features may stop working

4
frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
View File

@@ -91,7 +91,7 @@ export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element
data-attr="cohort-add-filter-group-criteria"
type="secondary"
onClick={() => addFilter(groupIndex)}
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
>
Add criteria
</LemonButton>
@@ -110,7 +110,7 @@ export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element
className="mb-4 mt-4"
type="secondary"
onClick={() => addFilter()}
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
fullWidth
>
Add criteria group

2
frontend/src/scenes/cohorts/Cohorts.scss
View File

@@ -8,7 +8,7 @@
.cohort-csv-dragger {
height: 155px !important;
margin-top: 1rem;
border-color: var(--accent-primary);
border-color: var(--accent);
border-style: dashed;
border-width: 2px;
border-radius: var(--radius);

2
frontend/src/scenes/comments/Comment.tsx
View File

@@ -32,7 +32,7 @@ const Comment = ({ comment }: { comment: CommentType }): JSX.Element => {
return (
<div
ref={ref}
className={clsx('Comment border rounded-lg bg-surface-primary', isHighlighted && 'border-accent-primary')}
className={clsx('Comment border rounded-lg bg-surface-primary', isHighlighted && 'border-accent')}
data-comment-id={comment.id}
>
<div className="flex-1 flex justify-start p-2 gap-2">

4
frontend/src/scenes/dashboard/DashboardItems.scss
View File

@@ -45,9 +45,9 @@
z-index: 2;
max-width: 100%;
user-select: none;
border: 1px solid var(--accent-primary);
border: 1px solid var(--accent);
border-radius: var(--radius);
outline: 1px solid var(--accent-primary);
outline: 1px solid var(--accent);
transition: 100ms ease;
}

2
frontend/src/scenes/error-tracking/ErrorTrackingIssueScene.tsx
View File

@@ -101,7 +101,7 @@ export function ErrorTrackingIssueScene(): JSX.Element {
content: (
<div className="space-y-2">
<ErrorTrackingFilters />
<div className="border-1 overflow-hidden border-accent-primary border-primary rounded bg-surface-primary relative">
<div className="border-1 overflow-hidden border-accent border-primary rounded bg-surface-primary relative">
<EventsTab />
</div>
</div>

8
frontend/src/scenes/experiments/ExperimentView/ExposureCriteria.tsx
View File

@@ -56,7 +56,7 @@ export function ExposureCriteriaModal(): JSX.Element {
<LemonButton
className={`trends-metric-form__exposure-button flex-1 cursor-pointer p-4 rounded border ${
!experiment.exposure_criteria?.exposure_config
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -68,7 +68,7 @@ export function ExposureCriteriaModal(): JSX.Element {
<div className="font-semibold flex justify-between items-center">
<span>Default</span>
{!experiment.exposure_criteria?.exposure_config && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed mt-1">
@@ -80,7 +80,7 @@ export function ExposureCriteriaModal(): JSX.Element {
<LemonButton
className={`trends-metric-form__exposure-button flex-1 cursor-pointer p-4 rounded border ${
experiment.exposure_criteria?.exposure_config
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -96,7 +96,7 @@ export function ExposureCriteriaModal(): JSX.Element {
<div className="font-semibold flex justify-between items-center">
<span>Custom</span>
{experiment.exposure_criteria?.exposure_config && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed mt-1">

2
frontend/src/scenes/experiments/ExperimentView/VariantScreenshot.tsx
View File

@@ -138,7 +138,7 @@ export function VariantScreenshot({
loading={uploading}
value={filesToUpload}
callToAction={
<div className="flex items-center justify-center w-full h-16 border border-dashed rounded cursor-pointer hover:border-accent-primary">
<div className="flex items-center justify-center w-full h-16 border border-dashed rounded cursor-pointer hover:border-accent">
<span className="text-2xl text-secondary">+</span>
</div>
}

4
frontend/src/scenes/experiments/Metrics/MetricSourceModal.tsx
View File

@@ -35,7 +35,7 @@ export function MetricSourceModal({
<LemonModal isOpen={isOpen} onClose={closeCurrentModal} width={1000} title="Choose metric source">
<div className="flex gap-4 mb-4">
<div
className="flex-1 cursor-pointer p-4 rounded border hover:border-accent-primary"
className="flex-1 cursor-pointer p-4 rounded border hover:border-accent"
onClick={() => {
closeCurrentModal()
@@ -57,7 +57,7 @@ export function MetricSourceModal({
</div>
</div>
<div
className="flex-1 cursor-pointer p-4 rounded border hover:border-accent-primary"
className="flex-1 cursor-pointer p-4 rounded border hover:border-accent"
onClick={() => {
closeCurrentModal()
openSharedMetricModal(null)

8
frontend/src/scenes/experiments/Metrics/TrendsMetricForm.tsx
View File

@@ -145,7 +145,7 @@ export function TrendsMetricForm({ isSecondary = false }: { isSecondary?: boolea
<LemonButton
className={`trends-metric-form__exposure-button flex-1 cursor-pointer p-4 rounded border ${
!currentMetric.exposure_query
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -163,7 +163,7 @@ export function TrendsMetricForm({ isSecondary = false }: { isSecondary?: boolea
<div className="font-semibold flex justify-between items-center">
<span>Default</span>
{!currentMetric.exposure_query && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed mt-1">
@@ -176,7 +176,7 @@ export function TrendsMetricForm({ isSecondary = false }: { isSecondary?: boolea
<LemonButton
className={`trends-metric-form__exposure-button flex-1 cursor-pointer p-4 rounded border ${
currentMetric.exposure_query
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
disabledReason={
@@ -226,7 +226,7 @@ export function TrendsMetricForm({ isSecondary = false }: { isSecondary?: boolea
<div className="font-semibold flex justify-between items-center">
<span>Custom</span>
{currentMetric.exposure_query && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed mt-1">

8
frontend/src/scenes/experiments/SharedMetrics/LegacySharedTrendsMetricForm.tsx
View File

@@ -118,7 +118,7 @@ export function LegacySharedTrendsMetricForm(): JSX.Element {
<div
className={`flex-1 cursor-pointer p-4 rounded border ${
!sharedMetricQuery.exposure_query
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -133,7 +133,7 @@ export function LegacySharedTrendsMetricForm(): JSX.Element {
<div className="font-semibold flex justify-between items-center">
<span>Default</span>
{!sharedMetricQuery.exposure_query && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed">
@@ -146,7 +146,7 @@ export function LegacySharedTrendsMetricForm(): JSX.Element {
<div
className={`flex-1 cursor-pointer p-4 rounded border ${
sharedMetricQuery.exposure_query
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -183,7 +183,7 @@ export function LegacySharedTrendsMetricForm(): JSX.Element {
<div className="font-semibold flex justify-between items-center">
<span>Custom</span>
{sharedMetricQuery.exposure_query && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed">

8
frontend/src/scenes/experiments/SharedMetrics/SharedMetric.tsx
View File

@@ -47,7 +47,7 @@ export function SharedMetric(): JSX.Element {
<div
className={`flex-1 cursor-pointer p-4 rounded border ${
sharedMetric.query.kind === NodeKind.ExperimentTrendsQuery
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -59,7 +59,7 @@ export function SharedMetric(): JSX.Element {
<div className="font-semibold flex justify-between items-center">
<span>Trend</span>
{sharedMetric.query.kind === NodeKind.ExperimentTrendsQuery && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed">
@@ -69,7 +69,7 @@ export function SharedMetric(): JSX.Element {
<div
className={`flex-1 cursor-pointer p-4 rounded border ${
sharedMetric.query.kind === NodeKind.ExperimentFunnelsQuery
? 'border-accent-primary bg-accent-primary-highlight'
? 'border-accent bg-accent-highlight-secondary'
: 'border-primary'
}`}
onClick={() => {
@@ -81,7 +81,7 @@ export function SharedMetric(): JSX.Element {
<div className="font-semibold flex justify-between items-center">
<span>Funnel</span>
{sharedMetric.query.kind === NodeKind.ExperimentFunnelsQuery && (
<IconCheckCircle fontSize={18} color="var(--accent-primary)" />
<IconCheckCircle fontSize={18} color="var(--accent)" />
)}
</div>
<div className="text-secondary text-sm leading-relaxed">

2
frontend/src/scenes/funnels/FunnelBarHorizontal/FunnelBarHorizontal.scss
View File

@@ -121,7 +121,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
.funnel-bar {
position: relative;
height: 100%;
background: var(--accent-primary);
background: var(--accent);
transition: width 0.2s ease, height 0.2s ease;
&.first {

2
frontend/src/scenes/insights/EditorFilters/GoalLines.tsx
View File

@@ -60,7 +60,7 @@ export function GoalLines({ insightProps }: GoalLinesProps): JSX.Element {
<LemonButton
type="secondary"
onClick={addGoalLine}
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
sideIcon={null}
>
Add goal line

2
frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx
View File

@@ -24,7 +24,7 @@ export function TaxonomicBreakdownButton({
<TaxonomicBreakdownPopover open={open} setOpen={setOpen}>
<LemonButton
type="secondary"
icon={<IconPlusSmall color="var(--accent-primary)" />}
icon={<IconPlusSmall color="var(--accent)" />}
data-attr="add-breakdown-button"
onClick={() => setOpen(!open)}
sideIcon={null}

4
frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
View File

@@ -4,7 +4,7 @@
.edit-icon {
font-size: 1rem;
color: var(--accent-primary);
color: var(--accent);
cursor: pointer;
}
@@ -14,7 +14,7 @@
.EntityFilterInfo:not(.text-muted) {
font-weight: 500;
color: var(--accent-primary);
color: var(--accent);
}
}
}

2
frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
View File

@@ -3,7 +3,7 @@
&--dragging {
background-color: var(--bg-surface-primary);
outline: 1px solid var(--accent-primary);
outline: 1px solid var(--accent);
// Weird hack - this fixes chrome from not correctly identifying the bounds of the component for the drag preview
// https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628

2
frontend/src/scenes/notebooks/Nodes/NotebookNodeMap.tsx
View File

@@ -40,7 +40,7 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodeMapAttributes>)
return (
<Map
center={personCoordinates}
markers={[new Marker({ color: 'var(--accent-primary)' }).setLngLat(personCoordinates)]}
markers={[new Marker({ color: 'var(--accent)' }).setLngLat(personCoordinates)]}
className="h-full"
/>
)

8
frontend/src/scenes/notebooks/Notebook/Notebook.scss
View File

@@ -130,13 +130,13 @@
}
&.Backlink--selected {
border-color: var(--accent-primary);
border-color: var(--accent);
}
&.Backlink--active {
color: var(--white);
background: var(--accent-primary);
border: 1px solid var(--accent-primary);
background: var(--accent);
border: 1px solid var(--accent);
& .Backlink__label,
& svg {
@@ -292,7 +292,7 @@
inset: 0;
z-index: -1;
content: '';
background: var(--accent-primary);
background: var(--accent);
opacity: var(--notebook-comment-background-opacity);
}
}

2
frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
View File

@@ -39,7 +39,7 @@
&--active {
height: 8rem;
border-color: var(--accent-primary);
border-color: var(--accent);
.NotebookPanelDropzone__message {
opacity: 1;

4
frontend/src/scenes/onboarding/billing/PlanCards.tsx
View File

@@ -100,11 +100,11 @@ export const PlanCard: React.FC<PlanCardProps> = ({ planData, product, highlight
<div
className={clsx(
'relative flex flex-col h-full p-6 bg-bg-light dark:bg-bg-depth rounded-xs border transition-transform transform hover:scale-[1.02] hover:shadow-lg',
highlight ? 'border-2 border-accent-primary-active' : 'border-gray-200 dark:border-gray-700'
highlight ? 'border-2 border-accent-active' : 'border-gray-200 dark:border-gray-700'
)}
>
{planData.plan === Plan.RIDICULOUSLY_CHEAP && (
<div className="absolute top-0 right-0 -mt-4 -mr-4 px-3 py-1 bg-bg-light dark:bg-bg-depth rounded-xs text-xs text-accent-primary-active font-semibold shadow-md border-accent-primary-active border-2">
<div className="absolute top-0 right-0 -mt-4 -mr-4 px-3 py-1 bg-bg-light dark:bg-bg-depth rounded-xs text-xs text-accent-active font-semibold shadow-md border-accent-active border-2">
Free tier included!
</div>
)}

8
frontend/src/scenes/onboarding/sdks/RealtimeCheckIndicator.tsx
View File

@@ -27,12 +27,12 @@ export function RealtimeCheckIndicator({
) : (
<div className="flex flex-row gap-3 items-center">
<div className="font-medium">Verify Installation</div>
<div className="flex items-center gap-2 px-2 py-1 border border-accent-primary rounded-sm">
<div className="flex items-center gap-2 px-2 py-1 border border-accent rounded-sm">
<div className="relative flex items-center justify-center">
<div className="absolute w-3 h-3 border-2 border-accent-primary rounded-full animate-ping" />
<div className="w-2 h-2 bg-accent-primary rounded-full" />
<div className="absolute w-3 h-3 border-2 border-accent rounded-full animate-ping" />
<div className="w-2 h-2 bg-accent rounded-full" />
</div>
<span className="text-sm text-accent-primary">Waiting for {listeningForName}s</span>
<span className="text-sm text-accent">Waiting for {listeningForName}s</span>
</div>
</div>
)}

6
frontend/src/scenes/pipeline/BatchExportBackfills.tsx
View File

@@ -90,7 +90,7 @@ function BatchExportLatestBackfills({ id }: BatchExportBackfillsLogicProps): JSX
const color = colorForStatus(status)
const statusStyles = {
success: 'border-success text-success-dark',
'accent-primary': 'border-accent-primary text-primary-dark',
accent: 'border-accent text-primary-dark',
warning: 'border-warning text-warning-dark',
danger: 'border-danger text-danger-dark',
default: 'border-default text-default-dark',
@@ -248,14 +248,14 @@ function BackfillCancelButton({
const colorForStatus = (
status: BatchExportBackfill['status']
): 'success' | 'accent-primary' | 'warning' | 'danger' | 'default' => {
): 'success' | 'accent' | 'warning' | 'danger' | 'default' => {
switch (status) {
case 'Completed':
return 'success'
case 'ContinuedAsNew':
case 'Running':
case 'Starting':
return 'accent-primary'
return 'accent'
case 'Cancelled':
case 'Terminated':
case 'TimedOut':

2
frontend/src/scenes/pipeline/utils.tsx
View File

@@ -201,7 +201,7 @@ export function LogLevelDisplay(level: LogEntryLevel): JSX.Element {
color = 'text-text-3000'
break
case 'INFO':
color = 'text-accent-primary'
color = 'text-accent'
break
case 'WARNING':
case 'WARN':

2
frontend/src/scenes/project-homepage/ProjectHomepage.scss
View File

@@ -16,7 +16,7 @@
color: var(--text-3000);
&:hover {
color: var(--accent-primary);
color: var(--accent);
}
}
}

2
frontend/src/scenes/saved-insights/SavedInsights.scss
View File

@@ -7,7 +7,7 @@
padding: 8px 12px 8px 16px;
color: white;
cursor: pointer;
background-color: var(--accent-primary);
background-color: var(--accent);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
}

2
frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
View File

@@ -187,7 +187,7 @@ export function ItemPerformanceEvent({ item, finalTimestamp }: ItemPerformanceEv
<div data-attr="item-performance-event" className="font-light w-full">
<div className="flex-1 overflow-hidden">
<div
className="absolute bg-accent-primary rounded-xs opacity-75 h-1 bottom-0.5"
className="absolute bg-accent rounded-xs opacity-75 h-1 bottom-0.5"
// eslint-disable-next-line react/forbid-dom-props
style={{
left: `${(startTime / contextLengthMs) * 100}%`,

6
frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
View File

@@ -47,7 +47,7 @@
.PlayerSeekbar__currentbar {
z-index: 3;
background-color: var(--accent-primary);
background-color: var(--accent);
border-radius: var(--bar-height) 0 0 var(--bar-height);
}
@@ -76,7 +76,7 @@
width: var(--thumb-size);
height: var(--thumb-size);
margin-top: calc(var(--thumb-size) / 2 * -1);
background-color: var(--accent-primary);
background-color: var(--accent);
border: 2px solid var(--bg-surface-primary);
border-radius: 50%;
transition: top 150ms ease-in-out;
@@ -136,7 +136,7 @@
}
&--primary {
--tick-color: var(--accent-primary);
--tick-color: var(--accent);
}
.PlayerSeekbarTick__line {

2
frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.scss
View File

@@ -7,7 +7,7 @@
height: 0.5rem;
margin-top: 0.25rem;
pointer-events: none;
background-color: var(--accent-primary);
background-color: var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
transition: transform 200ms linear;
will-change: transform;

2
frontend/src/scenes/session-recordings/player/inspector/components/ItemConsoleLog.tsx
View File

@@ -19,7 +19,7 @@ export function ItemConsoleLog({ item }: ItemConsoleLogProps): JSX.Element {
'rounded-lg px-1 mx-2 text-white text-xs font-semibold',
item.highlightColor === 'danger' && `bg-fill-error-highlight`,
item.highlightColor === 'warning' && `bg-fill-warning-highlight`,
item.highlightColor === 'primary' && `bg-fill-accent-primary-highlight`
item.highlightColor === 'primary' && `bg-fill-accent-highlight-secondary`
)}
>
{item.data.count}

4
frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
View File

@@ -244,7 +244,7 @@ export function PlayerInspectorListItem({
ref={ref}
className={clsx(
'ml-1 flex flex-col items-center',
isExpanded && 'border border-accent-primary',
isExpanded && 'border border-accent',
isExpanded && item.highlightColor && `border border-${item.highlightColor}-dark`,
isHovering && 'bg-surface-primary'
)}
@@ -300,7 +300,7 @@ export function PlayerInspectorListItem({
'flex-1 overflow-hidden',
item.highlightColor === 'danger' && `bg-fill-error-highlight`,
item.highlightColor === 'warning' && `bg-fill-warning-highlight`,
item.highlightColor === 'primary' && `bg-fill-accent-primary-highlight`
item.highlightColor === 'primary' && `bg-fill-accent-highlight-secondary`
)}
>
<RowItemTitle item={item} finalTimestamp={end} />

2
frontend/src/scenes/session-recordings/player/player-meta/PlayerMeta.scss
View File

@@ -78,7 +78,7 @@
color: var(--text-3000);
&:hover {
color: var(--accent-primary);
color: var(--accent);
}
}
}

Some files were not shown because too many files have changed in this diff Show More