feat(3000): 3000 colors

cypress/e2e/early-access-management.cy.ts

@@ -6,7 +6,7 @@ describe('Early Access Management', () => {
     it('Early access feature new and list', () => {
         // load an empty early access feature page
         cy.get('h1').should('contain', 'Early Access Management')
-        cy.title().should('equal', 'Early Access Management • PostHog')
+        cy.title().should('equal', 'Early access features • PostHog')
         cy.get('h2').should('contain', 'Create your first feature')
         cy.get('[data-attr="product-introduction-docs-link"]').should(
             'contain',

cypress/e2e/insights.cy.ts

@@ -24,7 +24,7 @@ describe('Insights', () => {
 
         cy.get('[data-attr=breadcrumb-0]').should('contain', 'Hogflix')
         cy.get('[data-attr=breadcrumb-1]').should('contain', 'Hogflix Demo App')
-        cy.get('[data-attr=breadcrumb-2]').should('have.text', 'Insights')
+        cy.get('[data-attr=breadcrumb-2]').should('have.text', 'Product analytics')
         cy.get('[data-attr=breadcrumb-3]').should('have.text', 'insight name')
     })
 

frontend/src/layout/navigation-3000/components/Breadcrumbs.scss

@@ -26,7 +26,6 @@
     font-size: calc(0.75rem + 0.0625rem * var(--breadcrumbs-compaction-rate));
     line-height: 1rem;
     font-weight: 600;
-    user-select: none;
     pointer-events: auto;
 }
 

frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss

@@ -22,7 +22,7 @@
 
     &--actionable {
         cursor: pointer;
-        color: var(--primary);
+        color: var(--primary-3000);
     }
 }
 

frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts

@@ -25,8 +25,8 @@ describe('breadcrumbsLogic', () => {
 
         // test with .delay because subscriptions happen async
         router.actions.push(urls.savedInsights())
-        await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Insights • PostHog' })
-        expect(global.document.title).toEqual('Insights • PostHog')
+        await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Product analytics • PostHog' })
+        expect(global.document.title).toEqual('Product analytics • PostHog')
 
         router.actions.push(urls.dashboards())
         await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Dashboards • PostHog' })

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -201,7 +201,7 @@ function Pages(): JSX.Element {
                     <PageButton
                         icon={<IconRocketLaunch />}
                         identifier={Scene.EarlyAccessFeatures}
-                        title={'Early Access Management'}
+                        title={'Early access features'}
                         to={urls.earlyAccessFeatures()}
                     />
                     <div className="SideBar__heading">Data</div>
@@ -210,7 +210,7 @@ function Pages(): JSX.Element {
                         icon={<IconLive />}
                         identifier={Scene.Events}
                         to={urls.events()}
-                        title={'Event Explorer'}
+                        title={'Event explorer'}
                     />
                     <PageButton
                         icon={<IconUnverifiedEvent />}
@@ -230,7 +230,7 @@ function Pages(): JSX.Element {
                         <PageButton
                             icon={<IconDatabase />}
                             identifier={Scene.DataWarehouse}
-                            title={'Data Warehouse'}
+                            title={'Data warehouse'}
                             to={urls.dataWarehouse()}
                             highlight="beta"
                         />
@@ -240,7 +240,7 @@ function Pages(): JSX.Element {
                             <div className="SideBar__heading">Apps</div>
                             {canViewPlugins(currentOrganization) && (
                                 <PageButton
-                                    title="Browse Apps"
+                                    title="Browse apps"
                                     icon={<IconApps />}
                                     identifier={Scene.Apps}
                                     to={urls.projectApps()}

frontend/src/layout/navigation/TopBar/TopBar.scss

@@ -130,7 +130,7 @@
 }
 
 .SitePopover__side-link {
-    color: var(--primary);
+    color: var(--primary-3000);
     margin-left: 0.5rem;
     font-weight: 600;
     font-size: 0.8125rem;

frontend/src/lib/components/Cards/InsightCard/InsightCard.scss

@@ -12,8 +12,8 @@
     flex-direction: column;
 
     &--highlighted {
-        border-color: var(--primary);
-        outline: 1px solid var(--primary);
+        border-color: var(--primary-3000);
+        outline: 1px solid var(--primary-3000);
     }
 
     .ant-alert {
@@ -160,7 +160,7 @@
             width: 1rem;
             border-radius: 0.25rem;
             margin-right: 0.25rem;
-            background: var(--primary);
+            background: var(--primary-3000);
             color: var(--bg-light);
             line-height: 1rem;
             font-size: 0.625rem;

frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx

@@ -107,7 +107,7 @@
             samplingNotice={
                 insight.filters.sampling_factor && insight.filters.sampling_factor < 1 ? (
                     <Tooltip title={`Results calculated from ${100 * insight.filters.sampling_factor}% of users`}>
-                        <PieChartFilled className="mr-2" style={{ color: 'var(--primary-light)' }} />
+                        <PieChartFilled className="mr-2" style={{ color: 'var(--primary-3000-hover)' }} />
                     </Tooltip>
                 ) : null
             }
@@ -133,7 +133,7 @@
                         </>
                     )}
                     {editable && updateColor && (
                         <LemonButtonWithDropdown
                             status="stealth"
                             dropdown={{
                                 overlay: Object.values(InsightColor).map((availableColor) => (
@@ -165,7 +165,7 @@
                         </LemonButtonWithDropdown>
                     )}
                     {editable && moveToDashboard && otherDashboards.length > 0 && (
                         <LemonButtonWithDropdown
                             status="stealth"
                             dropdown={{
                                 overlay: otherDashboards.map((otherDashboard) => (

frontend/src/lib/components/CommandPalette/CommandPalette.scss

@@ -109,7 +109,7 @@
     cursor: pointer;
 
     &::after {
-        background: var(--primary);
+        background: var(--primary-3000);
     }
 }
 

frontend/src/lib/components/DebugNotice.tsx

@@ -29,7 +29,7 @@ export function DebugNotice(): JSX.Element | null {
 
     return (
         <div className="bg-bg-light cursor-pointer border-t" onClick={() => setNoticeHidden(true)}>
-            <div className="p-2 border-l-4 border-primary text-primary-dark  truncate flex justify-between">
+            <div className="p-2 border-l-4 border-primary text-primary-3000 truncate flex justify-between">
                 <b>DEBUG mode</b>
                 <LemonButton
                     status="primary-alt"

frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss

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

frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss

@@ -4,14 +4,14 @@
     border-radius: 4px;
 
     &.SelectableElement--selected {
-        background: var(--primary);
+        background: var(--primary-3000);
     }
 
     &:hover {
-        background: var(--primary-light);
+        background: var(--primary-3000-hover);
     }
 
     &:active {
-        background: var(--primary-dark);
+        background: var(--primary-3000-active);
     }
 }

frontend/src/lib/components/Map/Maplibre.scss

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

frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx

@@ -85,7 +85,7 @@ export const ProductIntroduction = ({
                         {action ? (
                             <LemonButton
                                 type="primary"
-                                sideIcon={<IconPlus />}
+                                icon={<IconPlus />}
                                 onClick={() => {
                                     updateHasSeenProductIntroFor(productKey, true)
                                     action && action()

frontend/src/lib/components/PropertiesTable/PropertiesTable.scss

@@ -5,32 +5,42 @@
 }
 
 .property-value-type {
-    display: flex;
     align-items: center;
-    width: fit-content;
-    height: 1.25rem;
-    padding: 0.125rem 0.25rem;
-    letter-spacing: 0.25px;
+    background: var(--mid);
     border-radius: var(--radius);
     border: 1px solid var(--border-light);
-    background: var(--mid);
     color: var(--muted-alt);
+    cursor: default;
+    display: flex;
     font-size: 0.625rem;
     font-weight: 500;
+    height: 1.25rem;
+    letter-spacing: 0.25px;
+    padding: 0.125rem 0.25rem;
     text-transform: uppercase;
     white-space: nowrap;
-    cursor: default;
+    width: fit-content;
+
+    .posthog-3000 & {
+        background: none;
+        border-radius: calc(var(--radius) * 0.75);
+        border-style: solid;
+        border-width: 1px;
+        font-family: var(--font-mono);
+        font-size: 0.688rem;
+        padding: 0.075rem 0.25rem;
+    }
 
     &:not(:first-child) {
         margin-left: 0.25rem;
     }
 }
 
 .properties-table-value {
-    min-width: 12rem;
-    max-width: fit-content;
-    display: flex;
     align-items: center;
+    display: flex;
+    max-width: fit-content;
+    min-width: 12rem;
 
     .value-link {
         > * {
@@ -45,7 +55,20 @@
 
     .editable {
         text-decoration: underline dotted;
-        text-decoration-color: var(--primary);
+        text-decoration-color: var(--primary-3000);
         cursor: pointer;
+
+        .posthog-3000 & {
+            border: 1px solid transparent;
+            border-radius: calc(var(--radius) * 0.75);
+            margin-left: -0.25rem;
+            padding: 0.125rem 0.25rem;
+            text-decoration: none;
+
+            &:hover {
+                background: var(--bg-light);
+                border: 1px solid var(--border-light);
+            }
+        }
     }
 }

frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx

@@ -15,6 +15,7 @@ import { NewProperty } from 'scenes/persons/NewProperty'
 import { LemonCheckbox, LemonInput, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { PropertyDefinitionType } from '~/types'
+import { IconPencil } from '@posthog/icons'
 
 type HandledType = 'string' | 'number' | 'bigint' | 'boolean' | 'undefined' | 'null'
 type Type = HandledType | 'symbol' | 'object' | 'function'
@@ -85,18 +86,19 @@ function ValueDisplay({
     const valueComponent = (
         <span
             className={clsx(
-                'relative inline-flex items-center flex flex-row flex-nowrap w-fit break-all',
+                'relative inline-flex gap-1 items-center flex flex-row flex-nowrap w-fit break-all',
                 canEdit ? 'editable ph-no-capture' : 'ph-no-capture'
             )}
             onClick={() => canEdit && textBasedTypes.includes(valueType) && setEditing(true)}
         >
             {!isURL(value) ? (
-                valueString
+                <span>{valueString}</span>
             ) : (
                 <Link to={value} target="_blank" className="value-link" targetBlankIcon>
                     {valueString}
                 </Link>
             )}
+            {canEdit && <IconPencil />}
         </span>
     )
 

frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss

@@ -63,7 +63,7 @@
         font-size: 12px;
 
         &.selected {
-            background-color: var(--primary);
+            background-color: var(--primary-3000);
             color: #fff;
         }
     }

frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss

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

frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss

@@ -46,6 +46,19 @@
             background: var(--side);
             border-color: var(--side);
 
+            .posthog-3000 & {
+                color: var(--default);
+                font-weight: 500;
+
+                &:not(.taxonomic-pill-active) {
+                    opacity: 0.7;
+                }
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
             &.taxonomic-count-zero {
                 color: var(--muted);
                 cursor: not-allowed;

frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss

@@ -23,14 +23,14 @@
     width: fit-content;
     padding: 0 0.25rem;
     border-radius: var(--radius);
-    background: var(--primary);
+    background: var(--primary-3000);
     color: var(--bg-light);
     line-height: 1.25rem;
     font-size: 0.75rem;
     font-weight: 500;
 
     &::selection {
-        background: var(--primary-light); // Default selection background is invisible on primary
+        background: var(--primary-3000-hover); // Default selection background is invisible on primary
     }
 
     .Spinner {
@@ -77,7 +77,7 @@
     left: 0;
     height: var(--timeline-seekbar-thickness);
     width: calc(100% - var(--timeline-seekbar-arrow-width));
-    background: var(--primary);
+    background: var(--primary-3000);
 }
 
 .TimelineSeekbar__line-start,
@@ -91,7 +91,7 @@
         display: block;
         margin: calc(var(--timeline-seekbar-thickness) + 0.125rem) 0;
         height: var(--timeline-seekbar-arrow-height);
-        background: var(--primary);
+        background: var(--primary-3000);
     }
 }
 

frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss

@@ -22,7 +22,7 @@
     }
 
     .LemonActionableTooltip__icon {
-        color: var(--primary);
+        color: var(--primary-3000);
         display: flex;
         align-items: center;
         width: 1.5rem;

frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss

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

frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss

@@ -1,6 +1,5 @@
 .posthog-3000 {
-    --transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
-        transform 200ms ease;
+    --transition: opacity 200ms ease, transform 200ms ease;
 
     .LemonButton {
         border-width: 0;