feat(3000): Added link specific styles (#17867)

PostHog · Oct 11, 2023 · e6c5221 · e6c5221
1 parent 9ca3bd3
commit e6c5221
Show file tree

Hide file tree

Showing 27 changed files with 33 additions and 27 deletions.
diff --git a/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png b/frontend/__snapshots__/components-hogqleditor--hog-ql-editor.png
diff --git a/frontend/__snapshots__/components-hogqleditor--no-value.png b/frontend/__snapshots__/components-hogqleditor--no-value.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-label--basic.png b/frontend/__snapshots__/lemon-ui-lemon-label--basic.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-label--overview.png b/frontend/__snapshots__/lemon-ui-lemon-label--overview.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-tabs--lemon-tabs.png b/frontend/__snapshots__/lemon-ui-lemon-tabs--lemon-tabs.png
diff --git a/frontend/__snapshots__/lemon-ui-link--default.png b/frontend/__snapshots__/lemon-ui-link--default.png
diff --git a/frontend/__snapshots__/lemon-ui-link--disabled-with-reason.png b/frontend/__snapshots__/lemon-ui-link--disabled-with-reason.png
diff --git a/frontend/__snapshots__/lemon-ui-link--to-link.png b/frontend/__snapshots__/lemon-ui-link--to-link.png
diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -190,7 +190,7 @@ function InstanceSettings(): JSX.Element | null {
 
     return (
         <Link to={urls.instanceSettings()}>
-            <LemonButton icon={<IconCorporate className="text-primary" />} onClick={closeSitePopover} fullWidth>
+            <LemonButton icon={<IconCorporate className="text-link" />} onClick={closeSitePopover} fullWidth>
                 Instance settings
             </LemonButton>
         </Link>

diff --git a/frontend/src/lib/components/HoqQLPropertyInfo.tsx b/frontend/src/lib/components/HoqQLPropertyInfo.tsx
@@ -6,7 +6,7 @@ type HoqQLPropertyInfoProps = {
 
 export const HoqQLPropertyInfo = ({ value }: HoqQLPropertyInfoProps): JSX.Element => {
     return (
-        <span title={value} className="font-mono text-primary text-xs">
+        <span title={value} className="font-mono text-link text-xs">
             {midEllipsis(value, 60)}
         </span>
     )

diff --git a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
@@ -46,7 +46,7 @@ export function SubscriptionListItem({ subscription, onClick, onDelete }: Subscr
         >
             <div className="flex justify-between flex-auto items-center p-2">
                 <div>
-                    <div className="text-primary font-medium">{subscription.title}</div>
+                    <div className="text-link font-medium">{subscription.title}</div>
                     <div className="text-sm text-default">{capitalizeFirstLetter(subscription.summary)}</div>
                 </div>
                 {subscription.target_type === 'email' ? (

diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
@@ -45,7 +45,7 @@
             margin-right: 2px;
             margin-bottom: 2px;
             cursor: pointer;
-            color: var(--primary);
+            color: var(--link);
             background: var(--side);
             border-color: var(--side);
             &.taxonomic-count-zero {
@@ -54,8 +54,8 @@
             }
             &.taxonomic-pill-active {
                 color: #fff;
-                background: var(--primary);
-                border-color: var(--primary);
+                background: var(--link);
+                border-color: var(--link);
             }
         }
     }

diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
@@ -33,7 +33,7 @@
         height: 0.125rem;
         width: var(--lemon-tabs-slider-width);
         transform: translateX(var(--lemon-tabs-slider-offset));
-        background: var(--primary);
+        background: var(--link);
         .LemonTabs--transitioning & {
             transition: width 200ms ease, transform 200ms ease;
         }
@@ -48,13 +48,13 @@
         margin-right: 2rem;
     }
     &:hover {
-        color: var(--primary);
+        color: var(--link);
     }
     &:active {
         color: var(--primary-dark);
     }
     &.LemonTabs__tab--active {
-        color: var(--primary);
+        color: var(--link);
         text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
     }
     a {

diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss
@@ -1,7 +1,7 @@
 .Link {
     transition: color 200ms ease, opacity 200ms ease;
     background: none;
-    color: var(--primary);
+    color: var(--link);
     border: none;
     outline: none;
     padding: 0;

diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
@@ -71,7 +71,7 @@ export function ColumnConfigurator({ query, setQuery }: ColumnConfiguratorProps)
             <LemonButton
                 type="secondary"
                 data-attr="events-table-column-selector"
-                icon={<IconTuning style={{ color: 'var(--primary)' }} />}
+                icon={<IconTuning />}
                 onClick={showModal}
             >
                 Configure columns

diff --git a/frontend/src/scenes/authentication/signup/SignupContainer.tsx b/frontend/src/scenes/authentication/signup/SignupContainer.tsx
@@ -100,7 +100,7 @@ export function SignupLeftContainer(): JSX.Element {
                 {productBenefits.map((benefit, i) => (
                     <div className="flex flex-row gap-4 mb-4" key={i}>
                         <div>
-                            <IconCheckCircleOutline className="mt-2 w-4 h-4 text-primary" />
+                            <IconCheckCircleOutline className="mt-2 w-4 h-4 text-link" />
                         </div>
                         <div>
                             <h3 className="mb-1 font-bold leading-6">{benefit.benefit}</h3>

diff --git a/frontend/src/scenes/billing/BillingLimitInput.tsx b/frontend/src/scenes/billing/BillingLimitInput.tsx
@@ -82,7 +82,7 @@ export const BillingLimitInput = ({ product }: { product: BillingProductV2Type }
                     {!isEditingBillingLimit ? (
                         <>
                             <div
-                                className={clsx('cursor-pointer', customLimitUsd && 'text-primary')}
+                                className={clsx('cursor-pointer', customLimitUsd && 'text-link')}
                                 onClick={() => setIsEditingBillingLimit(true)}
                             >
                                 ${customLimitUsd}

diff --git a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx
@@ -90,7 +90,7 @@ export function DashboardsTable({
                             </Link>
                             {is_shared && (
                                 <Tooltip title="This dashboard is shared publicly.">
-                                    <IconShare className="ml-1 text-base text-primary" />
+                                    <IconShare className="ml-1 text-base text-link" />
                                 </Tooltip>
                             )}
                             {!canEditDashboard && (

diff --git a/frontend/src/scenes/data-management/events/DefinitionHeader.tsx b/frontend/src/scenes/data-management/events/DefinitionHeader.tsx
@@ -108,7 +108,7 @@ function RawDefinitionHeader({
     const isLink = asLink && fullDetailUrl
 
     const innerContent = (
-        <span className={clsx('definition-column-name-content-title', asLink && 'text-primary cursor-pointer')}>
+        <span className={clsx('definition-column-name-content-title', asLink && 'text-link cursor-pointer')}>
             <PropertyKeyInfo value={definition.name ?? ''} disablePopover disableIcon />
         </span>
     )

diff --git a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
@@ -23,7 +23,7 @@ export function Roles({ isRestricted }: RestrictedComponentProps): JSX.Element {
             render: function RoleNameRender(_, role) {
                 return (
                     <div
-                        className="row-name text-primary cursor-pointer"
+                        className="row-name text-link cursor-pointer"
                         onClick={() => {
                             setRoleInFocus(role)
                         }}

diff --git a/frontend/src/scenes/paths/PathNodeCardButton.tsx b/frontend/src/scenes/paths/PathNodeCardButton.tsx
@@ -53,7 +53,7 @@ export function PathNodeCardButton({
             </div>
             <div className="flex flex-nowrap">
                 <LemonButton size="small" status="stealth">
-                    <span className="text-primary text-xs pr-1 font-medium" onClick={openModal}>
+                    <span className="text-link text-xs pr-1 font-medium" onClick={openModal}>
                         {count}
                     </span>
                 </LemonButton>

diff --git a/frontend/src/scenes/project-homepage/ProjectHomePageCompactListItem.tsx b/frontend/src/scenes/project-homepage/ProjectHomePageCompactListItem.tsx
@@ -22,7 +22,7 @@ export function ProjectHomePageCompactListItem({
                 {prefix ? <span className="shrink-0">{prefix}</span> : null}
 
                 <div className="truncate space-y-1 flex-1">
-                    <div className="text-primary font-semibold truncate">{title}</div>
+                    <div className="text-link font-semibold truncate">{title}</div>
                     <div className="truncate text-default font-normal">{subtitle}</div>
                 </div>
 

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -93,10 +93,7 @@ export function PlayerController(): JSX.Element {
                             }}
                         >
                             <IconSkipInactivity
-                                className={clsx(
-                                    'text-2xl',
-                                    skipInactivitySetting ? 'text-primary' : 'text-primary-alt'
-                                )}
+                                className={clsx('text-2xl', skipInactivitySetting ? 'text-link' : 'text-primary-alt')}
                                 enabled={skipInactivitySetting}
                             />
                         </LemonButton>
@@ -110,7 +107,7 @@ export function PlayerController(): JSX.Element {
                             }}
                         >
                             <IconFullScreen
-                                className={clsx('text-2xl', isFullScreen ? 'text-primary' : 'text-primary-alt')}
+                                className={clsx('text-2xl', isFullScreen ? 'text-link' : 'text-primary-alt')}
                             />
                         </LemonButton>
                     </Tooltip>

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
@@ -196,7 +196,7 @@ export function SessionRecordingPreview({
                 <div className="grow overflow-hidden space-y-px">
                     <div className="flex items-center justify-between gap-2">
                         <div className="flex items-center gap-1 shrink overflow-hidden">
-                            <div className="truncate font-medium text-primary ph-no-capture">
+                            <div className="truncate font-medium text-link ph-no-capture">
                                 {asDisplay(recording.person)}
                             </div>
                         </div>

diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
@@ -571,6 +571,7 @@ body {
     --glass-bg-3000: var(--bg-light);
     --glass-border-3000: var(--border);
     --bg-light: #fff;
+    --link: var(--primary);
 
     &.posthog-3000[theme='light'] {
         --text-3000: var(--text-3000-light);
@@ -587,6 +588,7 @@ body {
         --glass-bg-3000: var(--glass-bg-3000-light);
         --glass-border-3000: var(--glass-border-3000-light);
         --bg-light: #fff;
+        --link: var(--link-3000-light);
     }
 
     &.posthog-3000[theme='dark'] {
@@ -605,6 +607,7 @@ body {
         --glass-border-3000: var(--glass-border-3000-dark);
         --bg-light: var(--accent-3000);
         --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast
+        --link: var(--link-3000-dark);
     }
 
     &.posthog-3000 {
@@ -661,6 +664,10 @@ body {
         font-family: var(--font-mono);
     }
 
+    a {
+        color: var(--link);
+    }
+
     // AntD uses its own border color for the bottom of tab lists, but we want to use `var(--border)`
     .ant-tabs-top,
     .ant-tabs-bottom {

diff --git a/frontend/src/styles/utilities.stories.tsx b/frontend/src/styles/utilities.stories.tsx
@@ -16,7 +16,7 @@ export const Overview = (): JSX.Element => {
                     <div className="text-lg font-bold">Hello there!</div>
                     <div className="text-sm">
                         I'm an example of how you can use utility classes to build a{' '}
-                        <span className="text-primary">complex component</span> without any custom CSS...
+                        <span className="text-link">complex component</span> without any custom CSS...
                     </div>
                 </div>
 

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -101,7 +101,7 @@ $colors: (
     'border-bold': rgba(0, 0, 0, 0.24),
     'border-active': rgba(0, 0, 0, 0.36),
     'transparent': transparent,
-
+    'link': var(--link),
     // Colors of the PostHog logo
     'brand-blue': #1d4aff,
     'brand-red': #f54e00,
@@ -123,7 +123,7 @@ $colors: (
     'border-bold-3000-light': #c1c2b9,
     'glass-bg-3000-light': #e4e5deb3,
     'glass-border-3000-light': #e4e5de,
-
+    'link-3000-light': var(--primary),
     'text-3000-dark': #fff,
     'muted-3000-dark': rgba(#fff, 0.5),
     'trace-3000-dark': rgba(#fff, 0.25),
@@ -137,6 +137,7 @@ $colors: (
     'border-bold-3000-dark': #3f4046,
     'glass-bg-3000-dark': #1d1f27b3,
     'glass-border-3000-dark': var(--border-3000-dark),
+    'link-3000-dark': rgb(47, 129, 247),
     // The derived colors
     'text-3000': var(--text-3000),
     'muted-3000': var(--muted-3000),
@@ -151,6 +152,7 @@ $colors: (
     'border-bold-3000': var(--border-bold-3000),
     'glass-bg-3000': var(--glass-bg-3000),
     'glass-border-3000': var(--glass-border-3000),
+    'link-3000': var(--link-3000),
     // 'bg-light': var(--accent-3000),
 );