diff --git a/frontend/__snapshots__/components-command-bar--actions--dark.png b/frontend/__snapshots__/components-command-bar--actions--dark.png index 55ff12cdf7a64..e15ffa5164b1b 100644 Binary files a/frontend/__snapshots__/components-command-bar--actions--dark.png and b/frontend/__snapshots__/components-command-bar--actions--dark.png differ diff --git a/frontend/__snapshots__/components-command-bar--actions--light.png b/frontend/__snapshots__/components-command-bar--actions--light.png index 3b8e1b2efd516..a886435fba6b1 100644 Binary files a/frontend/__snapshots__/components-command-bar--actions--light.png and b/frontend/__snapshots__/components-command-bar--actions--light.png differ diff --git a/frontend/__snapshots__/components-command-bar--search--dark.png b/frontend/__snapshots__/components-command-bar--search--dark.png index c5d76efb38fcd..4546e3221a8b2 100644 Binary files a/frontend/__snapshots__/components-command-bar--search--dark.png and b/frontend/__snapshots__/components-command-bar--search--dark.png differ diff --git a/frontend/__snapshots__/components-command-bar--search--light.png b/frontend/__snapshots__/components-command-bar--search--light.png index b8791bfc9ce45..fbcf9433f8f5f 100644 Binary files a/frontend/__snapshots__/components-command-bar--search--light.png and b/frontend/__snapshots__/components-command-bar--search--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled--light.png b/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled--light.png index 4d1e6546cad32..b953663cb43ea 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled--light.png and b/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled-with-reason--light.png b/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled-with-reason--light.png index 4d1e6546cad32..b953663cb43ea 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled-with-reason--light.png and b/frontend/__snapshots__/lemon-ui-lemon-checkbox--disabled-with-reason--light.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--dark.png b/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--dark.png index 6672835b2b74f..d56bb3b8b5951 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--dark.png differ diff --git a/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--light.png b/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--light.png index cff1760f7f6d3..e4ff4460dcf2e 100644 Binary files a/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--light.png and b/frontend/__snapshots__/lemon-ui-lemon-checkbox--no-label--light.png differ diff --git a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--dark.png b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--dark.png index 87a76f1653c40..5ba95095f4a18 100644 Binary files a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--dark.png and b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--light.png b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--light.png index ea13f3250e585..43981441292e7 100644 Binary files a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--light.png and b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag--light.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png index d2643fc390633..e6507b0269eff 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--dark.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--dark.png index 36a0466e6c1f7..76d4b7bc85b67 100644 Binary files a/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--dark.png and b/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--light.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--light.png index 897331d9aaf6f..f173b278ad65f 100644 Binary files a/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--light.png and b/frontend/__snapshots__/scenes-app-pipeline--pipeline-destinations-page--light.png differ diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--dark.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--dark.png index cfa99376fa2e2..9afb43cee1fdb 100644 Binary files a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--dark.png and b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--light.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--light.png index 31cb858d40508..b21fdc8a2fe88 100644 Binary files a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--light.png and b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page--light.png differ diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--dark.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--dark.png index cfa99376fa2e2..9afb43cee1fdb 100644 Binary files a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--dark.png and b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--light.png b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--light.png index 78bf1462dc8b8..e6dd3b53ae662 100644 Binary files a/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--light.png and b/frontend/__snapshots__/scenes-app-pipeline--pipeline-transformations-page-empty--light.png differ diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--dark.png index 8af57a632597d..441e34109f7a1 100644 Binary files a/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--dark.png and b/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--light.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--light.png index 57711a72c77c7..709cceb9886a7 100644 Binary files a/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--light.png and b/frontend/__snapshots__/scenes-other-billing-v2--billing-unsubscribe-modal-data-pipelines--light.png differ diff --git a/frontend/src/exporter/Exporter.scss b/frontend/src/exporter/Exporter.scss index df0d456df55d7..76f92199f5689 100644 --- a/frontend/src/exporter/Exporter.scss +++ b/frontend/src/exporter/Exporter.scss @@ -1,9 +1,7 @@ @import '../styles/mixins'; body.ExporterBody { - &.posthog-3000 { - overflow: initial; - } + overflow: initial; } .Exporter { diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss index f2796b41f109e..74965e73091cc 100644 --- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss +++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss @@ -8,21 +8,17 @@ justify-content: center; min-width: 1.25rem; height: 1.25rem; - padding: 0 0.1875rem; + padding: 0.125rem 0.25rem; + font-size: 0.75rem; color: var(--default); text-transform: capitalize; user-select: none; background: var(--accent-3000); + border-color: var(--secondary-3000-button-border-hover); border-width: 1px; + border-bottom-width: 2px; border-radius: 0.25rem; - .posthog-3000 & { - padding: 0.125rem 0.25rem; - font-size: 0.75rem; - border-color: var(--secondary-3000-button-border-hover); - border-bottom-width: 2px; - } - .KeyboardShortcut--muted > & { color: var(--muted); background: none; diff --git a/frontend/src/lib/components/CommandBar/index.scss b/frontend/src/lib/components/CommandBar/index.scss index c42b01543f804..85e6f6422f177 100644 --- a/frontend/src/lib/components/CommandBar/index.scss +++ b/frontend/src/lib/components/CommandBar/index.scss @@ -1,4 +1,4 @@ -.CommandBar__input { +.LemonInput.CommandBar__input { height: 2.75rem; padding-right: 0.375rem; padding-left: 0.75rem; diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx index 71cac99c617fc..6a56553aae0d1 100644 --- a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx +++ b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx @@ -157,7 +157,6 @@ function DebugCHQueries(): JSX.Element { dataSource={filteredQueries} loading={queriesLoading} loadingSkeletonRows={5} - size="small" pagination={undefined} /> diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss index 244d3ccc5c711..6ccb132efdc5f 100644 --- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss +++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss @@ -1,7 +1,7 @@ .RollingDateRangeFilter { display: flex; align-items: center; - height: 2rem; + height: 1.6875rem; min-height: 2rem; padding: 1.25rem 0.5rem; font-size: 0.875rem; @@ -11,10 +11,6 @@ cursor: pointer; transition: background 0.3s ease; - .posthog-3000 & { - height: 1.6875rem; - } - &:hover { background-color: var(--mid); } @@ -40,69 +36,47 @@ box-sizing: border-box; display: flex; align-items: center; - height: 2rem; + height: 1.6875rem; margin: 0; margin-right: 0.25rem; margin-left: 0.25rem; - line-height: 1.25rem; + line-height: 1.5rem; background-color: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); - .posthog-3000 & { - height: 1.6875rem; - line-height: 1.5rem; - } - .LemonInput { width: 3rem; + height: unset; min-height: 0; padding: 0; border: none; - .posthog-3000 & { - height: unset; - } - input { text-align: center; } } .RollingDateRangeFilter__counter__step { - padding: 0.25rem; - margin: 0 0.25rem; - border-radius: var(--radius); + width: 1.25rem; + height: 100%; + padding: 0; + margin: 0; + text-align: center; + border-radius: calc(var(--radius) - 1px); &:first-child { - .posthog-3000 & { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + border-top-right-radius: 0; + border-bottom-right-radius: 0; } &:last-child { - .posthog-3000 & { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - - .posthog-3000 & { - width: 1.25rem; - height: 100%; - padding: 0; - margin: 0; - text-align: center; - border-radius: calc(var(--radius) - 1px); + border-top-left-radius: 0; + border-bottom-left-radius: 0; } &:hover { - background-color: var(--primary-highlight); - - .posthog-3000 & { - background-color: var(--accent-3000); - } + background-color: var(--accent-3000); } } } diff --git a/frontend/src/lib/components/DatePicker.scss b/frontend/src/lib/components/DatePicker.scss index 083127c9dff86..43ecd38624633 100644 --- a/frontend/src/lib/components/DatePicker.scss +++ b/frontend/src/lib/components/DatePicker.scss @@ -1,130 +1,101 @@ .ant-picker { + color: var(--default); + background: var(--lemon-button-bg-color); + border-color: var(--secondary-3000-button-border); box-shadow: none !important; -} -.posthog-3000 { - .ant-picker { + .ant-picker-suffix { color: var(--default); - background: var(--lemon-button-bg-color); - border-color: var(--secondary-3000-button-border); - - .ant-picker-suffix { - color: var(--default); - } } - .ant-picker:hover { + &:hover { border-color: var(--secondary-3000-button-border-hover); } +} - .ant-picker-panel-container { - color: var(--default); - background: var(--bg-3000); - border: 1px solid var(--border); +.ant-picker-panel-container { + color: var(--default); + background: var(--bg-3000); + border: 1px solid var(--border); - * { - border-color: var(--border); - } + * { + border-color: var(--border); } +} - .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner { - background: var(--primary-highlight); - } +.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner { + background: var(--primary-highlight); - .ant-picker-time-panel .ant-picker-time-panel-column:nth-child(3)::after { - // :HACKY: fix to keep the whole am/pm section in view - display: none; + [theme='dark'] & { + background: rgba(#f7a503, 0.4); } +} - .ant-picker-cell .ant-picker-cell-inner { - border-radius: var(--radius); - } +.ant-picker-time-panel .ant-picker-time-panel-column:nth-child(3)::after { + // :HACKY: fix to keep the whole am/pm section in view + display: none; +} - .ant-picker-cell.ant-picker-cell-selected .ant-picker-cell-inner { - color: var(--default); - background: var(--primary-highlight); - } +.ant-picker-cell .ant-picker-cell-inner { + border-radius: var(--radius); +} - .ant-picker-cell.ant-picker-cell-today .ant-picker-cell-inner::before { - background: none; - border-color: var(--text-secondary-3000); - } +.ant-picker-cell.ant-picker-cell-selected .ant-picker-cell-inner { + color: var(--default); + background: var(--primary-highlight); - .ant-picker-cell:hover:not( - .ant-picker-cell-selected, - .ant-picker-cell-range-start, - .ant-picker-cell-range-end, - .ant-picker-cell-range-hover-start, - .ant-picker-cell-range-hover-end - ) - .ant-picker-cell-inner { - background: var(--secondary-3000); + [theme='dark'] & { + color: var(--default); + background: rgba(#f7a503, 0.4); } +} - .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, - .ant-picker-cell:hover:not( - .ant-picker-cell-today, - .ant-picker-cell-selected, - .ant-picker-cell-range-start, - .ant-picker-cell-range-end, - .ant-picker-cell-range-hover-start, - .ant-picker-cell-range-hover-end - ) - .ant-picker-cell-inner, - .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover { - background: var(--secondary-3000); - } +.ant-picker-cell.ant-picker-cell-today .ant-picker-cell-inner::before { + background: none; + border-color: var(--text-secondary-3000); - .ant-picker-footer .ant-btn-primary { - color: var(--primary); - text-shadow: none; + [theme='dark'] & { background: none; - border-color: var(--primary); - border-radius: 0.25rem; - box-shadow: none; - } - - .ant-picker-footer .ant-btn-primary:not(:disabled):hover { - color: #fff; - background: var(--primary); - } - - .ant-picker-footer .ant-picker-now-btn:hover { - color: var(--primary); - } - - .ant-picker-ok .ant-btn-primary span { - text-transform: uppercase; + border-color: var(--text-secondary-3000); } } -.posthog-3000[theme='dark'] { - .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner { - background: rgba(#f7a503, 0.4); - } - - .ant-picker-cell:hover:not( - .ant-picker-cell-selected, - .ant-picker-cell-range-start, - .ant-picker-cell-range-end, - .ant-picker-cell-range-hover-start, - .ant-picker-cell-range-hover-end - ) - .ant-picker-cell-inner { +.ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, +.ant-picker-cell:hover:not( + .ant-picker-cell-today, + .ant-picker-cell-selected, + .ant-picker-cell-range-start, + .ant-picker-cell-range-end, + .ant-picker-cell-range-hover-start, + .ant-picker-cell-range-hover-end + ) + .ant-picker-cell-inner, +.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover { + background: var(--secondary-3000); + + [theme='dark'] & { background: var(--muted-3000-dark); } +} - .ant-picker-cell.ant-picker-cell-selected .ant-picker-cell-inner { - color: var(--default); - background: rgba(#f7a503, 0.4); - } +.ant-picker-footer .ant-btn-primary { + color: var(--primary); + text-shadow: none; + background: none; + border-color: var(--primary); + border-radius: 0.25rem; + box-shadow: none; +} - .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover { - background: var(--muted-3000-dark); - } +.ant-picker-footer .ant-btn-primary:not(:disabled):hover { + color: #fff; + background: var(--primary); +} - .ant-picker-cell.ant-picker-cell-today .ant-picker-cell-inner::before { - background: none; - border-color: var(--text-secondary-3000); - } +.ant-picker-footer .ant-picker-now-btn:hover { + color: var(--primary); +} + +.ant-picker-ok .ant-btn-primary span { + text-transform: uppercase; } diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss b/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss index d219c76b01c8f..d1f0ae7c48181 100644 --- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss +++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss @@ -22,21 +22,15 @@ } .editable { - text-decoration: underline dotted; - text-decoration-color: var(--primary-3000); + padding: 0.125rem 0.25rem; + margin-left: -0.25rem; cursor: pointer; + border: 1px solid transparent; + border-radius: calc(var(--radius) * 0.75); - .posthog-3000 & { - padding: 0.125rem 0.25rem; - margin-left: -0.25rem; - text-decoration: none; - border: 1px solid transparent; - border-radius: calc(var(--radius) * 0.75); - - &:hover { - background: var(--bg-light); - border: 1px solid var(--border-light); - } + &:hover { + background: var(--bg-light); + border: 1px solid var(--border-light); } } } diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx index 021a9eca39145..563ab6b8f370a 100644 --- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx +++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx @@ -402,7 +402,6 @@ export function PropertiesTable({ .LemonCheckbox__box { flex-shrink: 0; width: 1rem; height: 1rem; background: var(--bg-light); border: 1.5px solid var(--border-bold); - border-radius: 0.1875rem; // Intentionally a bit smaller than --radius + border-radius: 0.25rem; // 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/lib/lemon-ui/LemonCollapse/LemonCollapse.scss b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss index 72c00bb67513a..f5b6972d48465 100644 --- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss +++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss @@ -24,7 +24,7 @@ font-weight: 500 !important; // Override status="stealth"'s font-weight border-radius: 0 !important; - .posthog-3000 &.LemonButton:active { + &.LemonButton:active { transform: inherit; } } @@ -33,12 +33,9 @@ box-sizing: content-box; height: 0; overflow: hidden; + background: var(--bg-light); border-top-width: 1px; transition: height 200ms ease; - - .posthog-3000 & { - background: var(--bg-light); - } } .LemonCollapsePanel__content { diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss index 6018b10f41bb7..28a84357dadeb 100644 --- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss +++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss @@ -3,7 +3,7 @@ gap: 0.25rem; align-items: center; justify-content: center; - height: 2.5rem; + height: calc(2.125rem + 3px); // Medium size button height + button shadow height padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; @@ -15,24 +15,12 @@ border: 1px solid var(--border); border-radius: var(--radius); - .posthog-3000 & { - height: calc(2.125rem + 3px); // Medium size button height + button shadow height - } - &:hover:not([aria-disabled='true']) { - border-color: var(--primary-3000-hover); - - .posthog-3000 & { - border-color: var(--border-bold); - } + border-color: var(--border-bold); } &.LemonInput--focused:not([aria-disabled='true']) { - border-color: var(--primary-3000); - - .posthog-3000 & { - border-color: var(--border-active); - } + border-color: var(--border-active); } &.LemonInput--transparent-background { diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss index d7c3b21b6ba00..a10cc87433af0 100644 --- a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss +++ b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss @@ -33,7 +33,7 @@ max-height: 90%; margin: 1rem auto; background-color: var(--bg-light); - border: 1px solid var(--border-3000); + border: 1px solid var(--secondary-3000-button-border); border-radius: var(--radius); box-shadow: var(--modal-shadow-elevation); opacity: 0; @@ -91,10 +91,6 @@ height: 100%; overflow: hidden; } - - .posthog-3000 & { - border-color: var(--secondary-3000-button-border); - } } .LemonModal__header { diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss index 087aa0f39c5d8..67200ac17bdf3 100644 --- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss +++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss @@ -4,7 +4,7 @@ .ant-select-selector, &.ant-select-single .ant-select-selector { - min-height: 2.5rem; + min-height: 2.125rem; padding: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; @@ -13,10 +13,6 @@ border: 1px solid var(--border); border-radius: var(--radius); - .posthog-3000 & { - min-height: 2.125rem; - } - .ant-select-selection-overflow { gap: 0.25rem; } @@ -71,13 +67,9 @@ padding: 0.5rem; margin: -4px 0; // Counteract antd wrapper background: var(--bg-light); - border: 1px solid var(--primary); + border: 1px solid var(--primary-3000); border-radius: var(--radius); - .posthog-3000 & { - border: 1px solid var(--primary-3000); - } - .ant-select-item { padding: 0; padding-bottom: 0.2rem; diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss index eccd270e72e1f..a63c3e5fdc63c 100644 --- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss +++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss @@ -1,6 +1,6 @@ .LemonSwitch { - --lemon-switch-height: 1.25rem; - --lemon-switch-width: 2.25rem; + --lemon-switch-height: 1.125rem; + --lemon-switch-width: calc(11 / 6 * var(--lemon-switch-height)); // Same proportion as in IconToggle display: flex; gap: 0.5rem; @@ -23,17 +23,13 @@ } &.LemonSwitch--bordered { - min-height: 2.5rem; + min-height: calc(2.125rem + 3px); // Medium size button height + button shadow height padding: 0 0.75rem; line-height: 1.4; background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); - .posthog-3000 & { - min-height: calc(2.125rem + 3px); // Medium size button height + button shadow height - } - &.LemonSwitch--small { gap: 0.5rem; min-height: 2rem; @@ -54,11 +50,6 @@ cursor: not-allowed; // A label with for=* also toggles the switch, so it shouldn't have the text select cursor } } - - .posthog-3000 & { - --lemon-switch-height: 1.125rem; - --lemon-switch-width: calc(11 / 6 * var(--lemon-switch-height)); // Same proportion as in IconToggle - } } .LemonSwitch__button { @@ -79,91 +70,57 @@ .LemonSwitch__slider { position: absolute; - top: 5px; + top: 0; left: 0; display: inline-block; - width: 2.25rem; - height: 0.625rem; - background-color: var(--border); - border-radius: 0.625rem; + width: 100%; + height: 100%; + pointer-events: none; + background-color: var(--border-bold); + border-radius: var(--lemon-switch-height); transition: background-color 100ms ease; - .posthog-3000 & { - top: 0; - width: 100%; - height: 100%; - pointer-events: none; - background-color: var(--border-bold); - border-radius: var(--lemon-switch-height); - } - .LemonSwitch--checked & { - background-color: var(--primary-highlight); - - .posthog-3000 & { - background-color: var(--primary-3000); - } + background-color: var(--primary-3000); } } .LemonSwitch__handle { + --lemon-switch-handle-ratio: calc(3 / 4); // Same proportion as in IconToggle + --lemon-switch-handle-gutter: calc(var(--lemon-switch-height) * calc(1 - var(--lemon-switch-handle-ratio)) / 2); + --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio)); + --lemon-switch-active-translate: translateX( + calc(var(--lemon-switch-width) - var(--lemon-switch-handle-width) - var(--lemon-switch-handle-gutter) * 2) + ); + position: absolute; - top: 0; - left: 0; + top: var(--lemon-switch-handle-gutter); + left: var(--lemon-switch-handle-gutter); display: flex; align-items: center; justify-content: center; - width: 1.25rem; - height: 1.25rem; + width: var(--lemon-switch-handle-width); + height: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio)); + pointer-events: none; cursor: inherit; background-color: #fff; - border: 2px solid var(--border); + border: none; border-radius: 0.625rem; transition: background-color 100ms ease, transform 100ms ease, width 100ms ease, border-color 100ms ease; - .posthog-3000 & { - --lemon-switch-handle-ratio: calc(3 / 4); // Same proportion as in IconToggle - --lemon-switch-handle-gutter: calc(var(--lemon-switch-height) * calc(1 - var(--lemon-switch-handle-ratio)) / 2); - --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio)); - --lemon-switch-active-translate: translateX( - calc(var(--lemon-switch-width) - var(--lemon-switch-handle-width) - var(--lemon-switch-handle-gutter) * 2) - ); - - top: var(--lemon-switch-handle-gutter); - left: var(--lemon-switch-handle-gutter); - width: var(--lemon-switch-handle-width); - height: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio)); - pointer-events: none; - background-color: #fff; - border: none; - } - .LemonSwitch--checked & { - background-color: var(--primary-3000); + background-color: #fff; border-color: var(--primary-3000); - transform: translateX(1rem); - - .posthog-3000 & { - background-color: #fff; - transform: var(--lemon-switch-active-translate); - } + transform: var(--lemon-switch-active-translate); } .LemonSwitch--active & { - transform: scale(1.1); - - .posthog-3000 & { - --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio) * 1.2); + --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio) * 1.2); - transform: none; - } + transform: none; } .LemonSwitch--active.LemonSwitch--checked & { - transform: translateX(1rem) scale(1.1); - - .posthog-3000 & { - transform: var(--lemon-switch-active-translate); - } + transform: var(--lemon-switch-active-translate); } } diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss index 2bf5449f0b4aa..b944d2f17635e 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss +++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss @@ -1,5 +1,5 @@ .LemonTable { - --row-base-height: 3rem; + --row-base-height: auto; --row-horizontal-padding: 1rem; --lemon-table-background-color: var(--bg-table); @@ -7,6 +7,7 @@ flex: 1; width: 100%; overflow: hidden; + font-size: 13px; background: var(--lemon-table-background-color); border: 1px solid var(--border); border-radius: var(--radius); @@ -24,12 +25,6 @@ border: none; } - .posthog-3000 & { - --row-base-height: auto; - - font-size: 13px; - } - &.LemonTable--with-ribbon { --row-ribbon-width: 0.25rem; @@ -49,18 +44,12 @@ } &--xs { - --row-base-height: 2rem; - .LemonTable__content > table > tbody > tr > td { padding-top: 0.25rem; padding-bottom: 0.25rem; } } - &--small { - --row-base-height: 2.5rem; - } - &--embedded { background: none; border: none; @@ -72,11 +61,8 @@ .LemonTable__content > table { > thead { + background: none; border-bottom: none; - - .posthog-3000 & { - background: none; - } } > thead, @@ -127,12 +113,10 @@ } a.Link { - .posthog-3000 & { - color: var(--default); + color: var(--default); - &:not(:disabled):hover { - color: var(--primary-3000-hover); - } + &:not(:disabled):hover { + color: var(--primary-3000-hover); } } } @@ -147,14 +131,12 @@ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03125rem; - background: var(--mid); - - .posthog-3000 & { - background: var(--lemon-table-background-color); - } + background: var(--lemon-table-background-color); > tr { > th { + padding-top: 0.5rem; + padding-bottom: 0.5rem; font-weight: 700; text-align: left; @@ -162,15 +144,8 @@ // Also it needs to be on the th - any higher and safari will not render the shadow box-shadow: inset 0 -1px var(--border); - .posthog-3000 & { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - } - .LemonButton { - .posthog-3000 & { - margin: -0.5rem 0; - } + margin: -0.5rem 0; } } @@ -293,30 +268,26 @@ .LemonTable__header { cursor: default; - .posthog-3000 & { - .LemonTable__header-content { - color: var(--text-secondary); - } + .LemonTable__header-content { + color: var(--text-secondary); } &.LemonTable__header--actionable { cursor: pointer; - .posthog-3000 & { - &:hover { - &:not(:has(.LemonTable__header--no-hover:hover)) { - .LemonTable__header-content { - color: var(--default); - } - } - } - - &:active { + &:hover { + &:not(:has(.LemonTable__header--no-hover:hover)) { .LemonTable__header-content { color: var(--default); } } } + + &:active { + .LemonTable__header-content { + color: var(--default); + } + } } } @@ -346,11 +317,7 @@ } .LemonTable__header--sticky::before { - background: var(--mid); - - .posthog-3000 & { - background: var(--lemon-table-background-color); - } + background: var(--lemon-table-background-color); } // Stickiness is disabled in snapshots due to flakiness diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx index b0c604b5e2cf7..a9c360b431cfb 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx @@ -176,9 +176,6 @@ WithExpandableRows.args = { export const Small: Story = BasicTemplate.bind({}) Small.args = { size: 'small' } -export const XSmall: Story = BasicTemplate.bind({}) -XSmall.args = { size: 'xs' } - export const Embedded: Story = BasicTemplate.bind({}) Embedded.args = { embedded: true } diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx index 7cba42509ac08..8fb3ee58a65ae 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx +++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx @@ -47,7 +47,7 @@ export interface LemonTableProps> { /** Function that for each row determines what props should its `tr` element have based on the row's record. */ onRow?: (record: T) => Omit, 'key'> /** How tall should rows be. The default value is `"middle"`. */ - size?: 'xs' | 'small' | 'middle' + size?: 'small' | 'middle' /** Whether this table already is inset, meaning it needs reduced horizontal padding (0.5rem instead of 1rem). */ inset?: boolean /** An embedded table has no border around it and no background. This way it blends better into other components. */ diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss index c75c739b37653..49a382f7bd061 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss +++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss @@ -7,14 +7,10 @@ height: 0; padding: 0.05rem !important; overflow: hidden; - background: var(--primary-bg-active); + background: var(--primary-3000-highlight); border: none !important; transition: height 200ms ease, top 200ms ease; - .posthog-3000 & { - background: var(--primary-3000-highlight); - } - &::after { position: absolute; top: 0; @@ -22,12 +18,8 @@ width: 50%; height: 100%; content: ''; - background: var(--primary); + background: var(--primary-3000); animation: LemonTableLoader__swooping 1.5s linear infinite; - - .posthog-3000 & { - background: var(--primary-3000); - } } &.LemonTableLoader--enter-active, diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss index 93f2d8a133165..807b7765e3420 100644 --- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss +++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss @@ -25,14 +25,9 @@ } &.LemonTag--primary { - color: #fff; - background-color: var(--primary-3000); - - .posthog-3000 & { - color: var(--primary-3000); - background: none; - border-color: var(--primary-3000); - } + color: var(--primary-3000); + background: none; + border-color: var(--primary-3000); } &.LemonTag--option { @@ -41,69 +36,39 @@ } &.LemonTag--highlight { - color: var(--bg-charcoal); - background-color: var(--mark); - - .posthog-3000 & { - color: var(--highlight); - background: none; - border-color: var(--highlight); - } + color: var(--highlight); + background: none; + border-color: var(--highlight); } &.LemonTag--warning { - color: var(--bg-charcoal); - background-color: var(--warning); - - .posthog-3000 & { - color: var(--warning); - background: none; - border-color: var(--warning); - } + color: var(--warning); + background-color: none; + border-color: var(--warning); } &.LemonTag--danger { - color: #fff; - background-color: var(--danger); - - .posthog-3000 & { - color: var(--danger); - background: none; - border-color: var(--danger); - } + color: var(--danger); + background: none; + border-color: var(--danger); } &.LemonTag--success { - color: #fff; - background-color: var(--success); - - .posthog-3000 & { - color: var(--success); - background: none; - border-color: var(--success); - } + color: var(--success); + background: none; + border-color: var(--success); } &.LemonTag--completion { - color: var(--bg-charcoal); - background-color: var(--purple-light); - - .posthog-3000 & { - color: var(--purple); - background: none; - border-color: var(--purple); - } + color: var(--purple); + background: none; + border-color: var(--purple); } &.LemonTag--caution { - color: var(--bg-charcoal); - background-color: var(--danger-lighter); - - .posthog-3000 & { - color: var(--danger-lighter); - background: none; - border-color: var(--danger-lighter); - } + color: var(--danger-lighter); + background: none; + border-color: var(--danger-lighter); } &.LemonTag--muted { diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss index 3c24f908503e9..9c89b575b4a0b 100644 --- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss +++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss @@ -17,11 +17,7 @@ transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease; &:not(:disabled):hover { - border: 1px solid var(--primary-3000-hover); - - .posthog-3000 & { - border-color: var(--border-bold); - } + border: 1px solid var(--border-bold); } &:disabled { @@ -30,11 +26,7 @@ } &:focus:not(:disabled) { - border: 1px solid var(--primary-3000); - - .posthog-3000 & { - border-color: var(--border-active); - } + border: 1px solid var(--border-active); } .Field--error & { diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss index 13969c9df18b1..24a0bf5f65522 100644 --- a/frontend/src/lib/lemon-ui/Link/Link.scss +++ b/frontend/src/lib/lemon-ui/Link/Link.scss @@ -28,12 +28,10 @@ } &--subtle { - .posthog-3000 & { - color: var(--default); + color: var(--default); - &:not(:disabled):hover { - color: var(--primary-3000-hover); - } + &:not(:disabled):hover { + color: var(--primary-3000-hover); } } } diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss index e5ddf2a3cb175..3ab31c08e9be6 100644 --- a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss +++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss @@ -78,7 +78,7 @@ position: relative; } - .posthog-3000 &.SpinnerOverlay--scene-level::before { + &.SpinnerOverlay--scene-level::before { background: var(--bg-3000); } } diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx index 0e5066658245e..a7c5e4d9237f7 100644 --- a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx +++ b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx @@ -203,7 +203,6 @@ export const LineGraph = (): JSX.Element => { }, }, ]} - size="small" uppercaseHeader={false} rowRibbonColor={(_datum, index) => getSeriesColor(index)} showHeader diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss index 618d3c39bca1f..8eface52ec75f 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss @@ -2,11 +2,8 @@ .property-group { padding: 0.5rem; background-color: var(--side); + border-width: 1px; border-radius: var(--radius); - - .posthog-3000 & { - border-width: 1px; - } } .property-group-and-or-separator { diff --git a/frontend/src/scenes/batch_exports/BatchExportScene.tsx b/frontend/src/scenes/batch_exports/BatchExportScene.tsx index c3c0bb68228f0..039a47a104354 100644 --- a/frontend/src/scenes/batch_exports/BatchExportScene.tsx +++ b/frontend/src/scenes/batch_exports/BatchExportScene.tsx @@ -125,7 +125,6 @@ export function RunsTab(): JSX.Element { diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx index 088fc2a11a2ea..25a6d6dcaefba 100644 --- a/frontend/src/scenes/billing/BillingProduct.tsx +++ b/frontend/src/scenes/billing/BillingProduct.tsx @@ -536,7 +536,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }): } /> -
diff --git a/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss b/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss index b8e3359b89362..a96eade91b6d6 100644 --- a/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss +++ b/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss @@ -11,13 +11,11 @@ overflow: hidden; &::after { + --bg-light: var(--bg-3000); // Make the fade blend in with the 3000 background smoothly + width: 100%; height: 150px; - .posthog-3000 & { - --bg-light: var(--bg-3000); // Make the fade blend in with the 3000 background smoothly - } - @extend %mixin-gradient-overlay; } } diff --git a/frontend/src/scenes/data-management/database/DatabaseTable.tsx b/frontend/src/scenes/data-management/database/DatabaseTable.tsx index bbf5c67db647e..83b70c8abb41c 100644 --- a/frontend/src/scenes/data-management/database/DatabaseTable.tsx +++ b/frontend/src/scenes/data-management/database/DatabaseTable.tsx @@ -13,7 +13,6 @@ interface DatabaseTableProps { export function DatabaseTable({ table, tables }: DatabaseTableProps): JSX.Element { return ( name === table)?.columns ?? []} columns={[ { diff --git a/frontend/src/scenes/data-management/ingestion-warnings/IngestionWarningsView.tsx b/frontend/src/scenes/data-management/ingestion-warnings/IngestionWarningsView.tsx index bb635d6e8fd55..f9dd1830383b8 100644 --- a/frontend/src/scenes/data-management/ingestion-warnings/IngestionWarningsView.tsx +++ b/frontend/src/scenes/data-management/ingestion-warnings/IngestionWarningsView.tsx @@ -239,7 +239,6 @@ function RenderNestedWarnings(warningSummary: IngestionWarningSummary): JSX.Elem }, ]} embedded - size="small" showHeader={false} /> ) diff --git a/frontend/src/scenes/events/Events.tsx b/frontend/src/scenes/events/Events.tsx index ae21bad463961..4ae39dc817fa1 100644 --- a/frontend/src/scenes/events/Events.tsx +++ b/frontend/src/scenes/events/Events.tsx @@ -14,7 +14,6 @@ export function Events(): JSX.Element { return ( <> -
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx index 7aeee10e75204..ee658db1b2061 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx @@ -275,7 +275,6 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
} /> - {featureFlag.experiment_set && featureFlag.experiment_set?.length > 0 && ( This feature flag is linked to an experiment. Edit settings here only for advanced @@ -285,7 +284,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element { )} -
+
datum.color || null} showHeader={showHeader} @@ -239,7 +238,6 @@ export function InsightTooltip({ dataSource={dataSource.slice(0, rowCutoff)} columns={columns} rowKey="id" - size="small" className="ph-no-capture" uppercaseHeader={false} rowRibbonColor={hideColorCol ? undefined : (datum: SeriesDatum) => datum.color || null} diff --git a/frontend/src/scenes/pipeline/Destinations.tsx b/frontend/src/scenes/pipeline/Destinations.tsx index 9f251fe942d1e..149f8a2cc60fb 100644 --- a/frontend/src/scenes/pipeline/Destinations.tsx +++ b/frontend/src/scenes/pipeline/Destinations.tsx @@ -52,7 +52,7 @@ function DestinationsTable(): JSX.Element { <> { + ::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; } - * > { - ::-webkit-scrollbar { - width: 0.5rem; - height: 0.5rem; - } - - ::-webkit-scrollbar-track { - background: var(--accent-3000); - } + ::-webkit-scrollbar-track { + background: var(--accent-3000); + } - ::-webkit-scrollbar-thumb { - background: var(--trace-3000); - border-radius: var(--radius); + ::-webkit-scrollbar-thumb { + background: var(--trace-3000); + border-radius: var(--radius); - &:hover { - background: var(--muted-3000); - } + &:hover { + background: var(--muted-3000); } } + } - h1, - h2, - h3, - h4, - h5 { - font-family: var(--font-title); - } - - @include posthog-3000-variables; + h1, + h2, + h3, + h4, + h5 { + font-family: var(--font-title); } h1, @@ -589,6 +565,19 @@ body { color: var(--link); } + .LemonButton, + .Link { + .text-link { + color: var(--text-3000); + } + + &:hover { + .text-link { + color: var(--primary-3000); + } + } + } + // 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 { @@ -707,6 +696,8 @@ body { .ant-table-tbody > tr.ant-table-placeholder:hover > td { background: inherit; } + + @include posthog-3000-variables; } .storybook-test-runner { @@ -721,7 +712,7 @@ body { } // Hide some parts of the UI that were causing flakiness - ::-webkit-scrollbar, // Scrollbar in WebKit/Blink browsers + ::-webkit-scrollbar, * > ::-webkit-scrollbar, // Scrollbar in WebKit/Blink browsers .LemonTabs__bar::after, // Active tab slider .scrollable::after, // Scrollability indicators .scrollable::before { @@ -729,21 +720,9 @@ body { } } -.posthog-3000 { - .ant-radio-button-wrapper { - background: var(--secondary-3000); - border-color: transparent; - } -} - -.posthog-3000[theme='dark'] { - .ant-empty-img-simple-path { - fill: var(--border-3000); - } - - .ant-empty-img-simple-ellipse { - fill: var(--border-3000); - } +.ant-radio-button-wrapper { + background: var(--secondary-3000); + border-color: transparent; } .ligatures-none {