style(3000): Align border radius to 6px in 3000 (#18866)

* style: Align border radius to 6px in 3000 * Only affect .posthog-3000 * Also tune some non-4px radii * Add radius comment Co-authored-by: David Newell <[email protected]> * Fix missing warehouse mocks and strictly prevent toasts * Don't affect utility classes --------- Co-authored-by: David Newell <[email protected]>
PostHog · Nov 27, 2023 · 2bb1234 · 2bb1234
1 parent f95e3c1
commit 2bb1234
Show file tree

Hide file tree

Showing 24 changed files with 56 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,9 +13,11 @@ debug.log
 node_modules/
 *.code-workspace
 node_modules
-frontend/.cache/
 .mypy_cache
+frontend/.cache/
 frontend/dist/
+# Paid font
+frontend/public/Matter*.woff*
 frontend/types/
 frontend/__snapshots__/__diff_output__/
 frontend/__snapshots__/__failures__/

diff --git a/frontend/src/layout.ejs b/frontend/src/layout.ejs
@@ -56,7 +56,7 @@
                 margin-bottom: -1px;
             }
             .form-signin-inputs input:first-child {
-                border-radius: 0.25rem 0.25rem 0 0;
+                border-radius: var(--radius) 0.25rem 0 0;
             }
             .form-signin input:last-child {
                 border-radius: 0 0 0.25rem 0.25rem;

diff --git a/frontend/src/layout.html b/frontend/src/layout.html
@@ -54,7 +54,7 @@
                 margin-bottom: -1px;
             }
             .form-signin-inputs input:first-child {
-                border-radius: 0.25rem 0.25rem 0 0;
+                border-radius: var(--radius) 0.25rem 0 0;
             }
             .form-signin input:last-child {
                 border-radius: 0 0 0.25rem 0.25rem;

diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
@@ -14,14 +14,13 @@
     user-select: none;
     background: var(--accent-3000);
     border-width: 1px;
-    border-radius: 0.125rem;
+    border-radius: 0.25rem;
 
     .posthog-3000 & {
         padding: 0.125rem 0.25rem;
         font-size: 0.625rem;
         border-color: var(--secondary-3000-button-border-hover);
         border-bottom-width: 2px;
-        border-radius: 0.25rem;
     }
 
     .KeyboardShortcut--muted > & {

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
@@ -164,7 +164,7 @@
             color: var(--bg-light);
             text-align: center;
             background: var(--primary-3000);
-            border-radius: 0.25rem;
+            border-radius: var(--radius);
         }
     }
 

diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -43,7 +43,7 @@
     line-height: 1.25rem;
     background-color: var(--bg-light);
     border: 1px solid var(--border);
-    border-radius: 0.25rem;
+    border-radius: var(--radius);
 
     .LemonInput {
         width: 3rem;

diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
@@ -1,6 +1,6 @@
 .SelectableElement {
     border: 1px solid transparent;
-    border-radius: 4px;
+    border-radius: var(--radius);
     transition: background-color 200ms ease, color 200ms ease, border 200ms ease;
 
     &.SelectableElement--selected {

diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
@@ -12,7 +12,7 @@
         border-color: transparent;
         border-style: solid;
         border-width: var(--lemon-button-border-width);
-        border-radius: 6px;
+        border-radius: var(--radius);
         outline: none;
         transition: var(--transition);
 
@@ -35,7 +35,7 @@
             border-color: transparent;
             border-style: solid;
             border-width: var(--lemon-button-border-width);
-            border-radius: 6px;
+            border-radius: var(--radius);
             transition: var(--transition);
 
             .LemonButton__icon {

diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -31,9 +31,13 @@
             height: 1rem;
             background: var(--bg-light);
             border: 1.5px solid var(--border-bold);
-            border-radius: 3px; // Intentionally a bit smaller than --radius
+            border-radius: 0.1875rem; // Intentionally a bit smaller than --radius
             transition: border 200ms ease, background 200ms ease;
 
+            &.posthog-3000 {
+                border-radius: 0.25rem; // Intentionally a bit smaller than --radius
+            }
+
             path {
                 stroke: var(--bg-light);
                 stroke-dasharray: var(--tick-length);

diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -5,7 +5,7 @@
         width: 700px;
         padding: 0.5rem;
         background-color: var(--side);
-        border-radius: 0.25rem;
+        border-radius: var(--radius);
 
         @media (max-width: 960px) {
             display: block;

diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -2,7 +2,7 @@
     .property-group {
         padding: 0.5rem;
         background-color: var(--side);
-        border-radius: 4px;
+        border-radius: var(--radius);
 
         .posthog-3000 & {
             border-width: 1px;

diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss
@@ -3,7 +3,7 @@
     padding-top: 1rem;
     margin: 0.5rem 0;
     border: 1px solid var(--border);
-    border-radius: 4px;
+    border-radius: var(--radius);
 
     &.CohortCriteriaGroups__matching-group--error {
         border: 1px solid var(--danger);

diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -19,7 +19,7 @@
     margin-top: 1rem;
     background-color: transparent !important;
     border: 2px dashed var(--primary) !important;
-    border-radius: 4px !important;
+    border-radius: var(--radius) !important;
 
     &:hover {
         border-color: var(--primary-3000-hover) !important;

diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
@@ -74,7 +74,7 @@
             font-weight: 500;
             color: #fff;
             letter-spacing: 0.01em;
-            border-radius: 4px;
+            border-radius: var(--radius);
         }
     }
 
@@ -150,10 +150,10 @@
         }
 
         .ant-progress-inner {
-            border-radius: 4px;
+            border-radius: var(--radius);
 
             .ant-progress-bg {
-                border-radius: 4px;
+                border-radius: var(--radius);
             }
         }
     }
@@ -203,5 +203,5 @@
     padding: 8px 8px 8px 16px;
     margin-left: 0.5rem;
     border: 1px solid var(--border);
-    border-radius: 4px;
+    border-radius: var(--radius);
 }
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
@@ -115,7 +115,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
         height: 32px;
         margin: 4px 0;
         background-color: var(--funnel-background);
-        border-radius: 4px;
+        border-radius: var(--radius);
 
         .funnel-bar {
             position: relative;
@@ -124,15 +124,15 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
             transition: width 0.2s ease, height 0.2s ease;
 
             &.first {
-                border-radius: 4px 0 0 4px;
+                border-radius: var(--radius) 0 0 4px;
             }
 
             &.last {
                 border-radius: 0 4px 4px 0;
             }
 
             &.only {
-                border-radius: 4px;
+                border-radius: var(--radius);
             }
 
             .funnel-bar-percentage {

diff --git a/frontend/src/scenes/retention/RetentionTable.scss b/frontend/src/scenes/retention/RetentionTable.scss
@@ -41,7 +41,7 @@
         margin: 2px;
         text-align: right;
         background-color: var(--retention-table-color); // NOTE: This is usually overridden in JS
-        border-radius: 0.25rem;
+        border-radius: var(--radius);
         transition: transform 200ms ease-out;
 
         &:hover {

diff --git a/frontend/src/scenes/saved-insights/SavedInsights.scss b/frontend/src/scenes/saved-insights/SavedInsights.scss
@@ -23,7 +23,7 @@
         cursor: pointer;
         background-color: var(--primary-3000);
         border: 1px solid var(--border);
-        border-radius: 4px;
+        border-radius: var(--radius);
     }
 
     .saved-insight-empty-state {

diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
@@ -160,7 +160,7 @@
             white-space: nowrap;
             visibility: hidden;
             background-color: var(--tick-color);
-            border-radius: 0.25rem;
+            border-radius: var(--radius);
             opacity: 0;
             transition: opacity 150ms ease-in-out;
             transform: translateX(-50%);

diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -31,7 +31,7 @@
     font-size: 14px;
     color: black;
     background: white;
-    border-radius: 6px;
+    border-radius: var(--radius);
     outline: none;
 }
 
@@ -54,7 +54,7 @@
     cursor: pointer;
     user-select: none;
     border: 1.5px solid transparent;
-    border-radius: 6px;
+    border-radius: var(--radius);
     outline: 0;
     box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
 }
@@ -141,7 +141,7 @@
 .rating-options-buttons {
     display: grid;
     overflow: hidden;
-    border-radius: 6px;
+    border-radius: var(--radius);
 }
 
 .rating-options-buttons > .ratings-number {
@@ -241,7 +241,7 @@
     cursor: pointer;
     background: white;
     border: 1.5px solid rgb(0 0 0 / 25%);
-    border-radius: 4px;
+    border-radius: var(--radius);
 }
 
 .multiple-choice-options .choice-option-open label {

diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
@@ -586,7 +586,7 @@ body {
 
             ::-webkit-scrollbar-thumb {
                 background: var(--trace-3000);
-                border-radius: 0.25rem;
+                border-radius: var(--radius);
 
                 &:hover {
                     background: var(--muted-3000);

diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss
@@ -1008,27 +1008,27 @@ $decorations: underline, overline, line-through, no-underline;
 }
 
 .rounded {
-    border-radius: var(--radius); /* 4px */
+    border-radius: 0.25rem;
 }
 
 .rounded-l {
-    border-top-left-radius: var(--radius); /* 4px */
-    border-bottom-left-radius: var(--radius); /* 4px */
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
 }
 
 .rounded-r {
-    border-top-right-radius: var(--radius); /* 4px */
-    border-bottom-right-radius: var(--radius); /* 4px */
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
 }
 
 .rounded-t {
-    border-top-left-radius: var(--radius); /* 4px */
-    border-top-right-radius: var(--radius); /* 4px */
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
 }
 
 .rounded-b {
-    border-bottom-right-radius: var(--radius); /* 4px */
-    border-bottom-left-radius: var(--radius); /* 4px */
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
 }
 
 .rounded-none {
@@ -1050,27 +1050,27 @@ $decorations: underline, overline, line-through, no-underline;
 }
 
 .rounded-md {
-    border-radius: calc(var(--radius) * 1.5); /* 6px */
+    border-radius: 0.375rem;
 }
 
 .rounded-lg {
-    border-radius: calc(var(--radius) * 2); /* 8px */
+    border-radius: 0.5rem;
 }
 
 .rounded-xl {
-    border-radius: calc(var(--radius) * 3); /* 12px */
+    border-radius: 0.75rem;
 }
 
 .rounded-2xl {
-    border-radius: calc(var(--radius) * 4); /* 16px */
+    border-radius: 1rem;
 }
 
 .rounded-3xl {
-    border-radius: calc(var(--radius) * 6); /* 24px */
+    border-radius: 1.5rem;
 }
 
 .rounded-4xl {
-    border-radius: calc(var(--radius) * 8); /* 32px */
+    border-radius: 2rem;
 }
 
 .rounded-full {

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -231,7 +231,7 @@ $_lifecycle_dormant: $_danger;
     --bg-bridge: #ebece8;
 
     // Non-color vars
-    --radius: 4px;
+    --radius: 0.25rem;
     --shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
     --opacity-disabled: 0.6;
     --font-medium: 500;
@@ -469,4 +469,5 @@ $_lifecycle_dormant: $_danger;
     --primary-alt-highlight: var(--primary-alt-highlight-3000);
     --data-color-1: #1d4aff;
     --data-color-10: #35416b;
+    --radius: 0.375rem;
 }
diff --git a/frontend/src/toolbar/bar/Toolbar.scss b/frontend/src/toolbar/bar/Toolbar.scss
@@ -21,7 +21,7 @@
 
         ::-webkit-scrollbar-thumb {
             background: var(--trace-3000);
-            border-radius: 0.25rem;
+            border-radius: var(--radius);
 
             &:hover {
                 background: var(--muted-3000);

diff --git a/posthog/templates/email/styles.html b/posthog/templates/email/styles.html
@@ -118,7 +118,7 @@
         font-size: 18px;
         font-weight: 600;
         border: none;
-        border-radius: 4px;
+        border-radius: var(--radius);
     }
 
     .button {
@@ -127,11 +127,11 @@
         padding-bottom: 16px;
         padding-left: 48px;
         padding-right: 48px;
-        border-radius: 4px;
+        border-radius: var(--radius);
         background-color: #1d4aff;
         font-weight: 500;
         color: #fff;
-        border-radius: 4px;
+        border-radius: var(--radius);
         text-decoration: none;
     }