Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark mode theme #4853

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Dark mode theme #4853

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
280aa97
refactor(ui): Rename space vars
vio Nov 21, 2024
c5c4ddc
refactor(ui): Rename light/dark color vars
vio Nov 21, 2024
cbf8f4c
refactor(ui): Rename color-muted/intense
vio Nov 22, 2024
dd892ef
feat(ui): Add light/dark radix colorschemes
vio Nov 23, 2024
0d181a4
fix(ui): Theme - use color vars
vio Nov 23, 2024
e347161
fix(ui): Styleguide - color schemes new names
vio Nov 23, 2024
cfea4bc
reactor(ui): Remove ultra-insense vars
vio Nov 23, 2024
c39b5ac
fix(ui): Vars - use functional names
vio Nov 23, 2024
96e7fe5
refactor(ui): Theme - remove color-NAME vars
vio Nov 23, 2024
5884d78
build(ui): Storybook - add theme support
vio Nov 23, 2024
bb92b1e
enhance(ui): Theme - improve contrast
vio Nov 23, 2024
750612f
fix(ui): Vars - adjust styles
vio Nov 23, 2024
43c8f64
feat(ui): Icon - new glyphs
vio Nov 23, 2024
0f1e1a7
feat(ui): ThemeProvider
vio Nov 23, 2024
dcd8953
feat(ui): Header - add theme switcher
vio Nov 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/ui/src/app/app.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.empty {
padding-top: var(--space-large);
padding-top: var(--space-8x);
min-height: 80vh;
text-align: center;
}
Expand All @@ -18,13 +18,13 @@
}

.summaryContainer {
padding-top: var(--space-small);
padding-bottom: var(--space-xxsmall);
padding-top: var(--space-4x);
padding-bottom: var(--space-2x);
}

.tabsContainer {
border-bottom: 1px solid var(--color-outline);
background: var(--color-light);
background: var(--color-muted);
}

.tabs {
Expand All @@ -40,8 +40,8 @@
}

.tabsContent {
padding-top: var(--space-medium);
padding-bottom: var(--space-medium);
padding-top: var(--space-6x);
padding-bottom: var(--space-6x);
min-height: 480px;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/app/header/header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
display: block;
border-radius: 50%;
opacity: 0.8;
color: var(--color-text-ultra-dark);
color: var(--color-text-ultra-intense);
transition: var(--transition-out);
}

Expand All @@ -33,6 +33,6 @@
height: var(--header-height);
display: flex;
align-items: center;
padding: 0 var(--space-small);
padding: 0 var(--space-4x);
}
}
6 changes: 3 additions & 3 deletions packages/ui/src/components/asset-info/asset-info.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
}

.assetNameTagEntry {
background: var(--color-info-dark);
background: var(--color-info-intense);
}

.assetNameTagInitial {
background: var(--color-info);
}

.assetNameTagChunk {
background: var(--color-info-light);
background: var(--color-info-muted);
}

.label {
Expand All @@ -32,7 +32,7 @@
.runNameTags {
display: flex;
align-items: center;
gap: calc(var(--space-xxxsmall) / 2);
gap: calc(var(--space) / 2);
}

.runNameTags:empty {
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/components/asset-meta-tag/asset-meta-tag.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

/* tag */
.entry {
--background-color: var(--color-info-dark);
--background-color: var(--color-info-intense);
}

.entry:empty::before {
Expand All @@ -38,7 +38,7 @@
}

.chunk {
--background-color: var(--color-info-light);
--background-color: var(--color-info-muted);
}

.chunk:empty::before {
Expand All @@ -47,10 +47,10 @@

/* status */
.added {
background: linear-gradient(-45deg, var(--color-danger-light) 50%, var(--background-color) 50%) !important;
background: linear-gradient(-45deg, var(--color-danger-muted) 50%, var(--background-color) 50%) !important;
}

.removed {
background: linear-gradient(135deg, var(--color-danger-light) 50%, var(--background-color) 50%) !important;
background: linear-gradient(135deg, var(--color-danger-muted) 50%, var(--background-color) 50%) !important;
}

12 changes: 6 additions & 6 deletions packages/ui/src/components/asset-name/asset-name.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.notPredictive {
margin-right: var(--space-xxsmall);
margin-right: var(--space-2x);
display: inline-block;
width: var(--space-small);
height: var(--space-small);
width: var(--space-4x);
height: var(--space-4x);
}

.notPredictiveIcon {
color: var(--color-warning-dark);
color: var(--color-warning-intense);
}

.notPredictiveHoverCard {
Expand All @@ -15,11 +15,11 @@

.metaTags {
display: inline;
margin-right: var(--space-xxxsmall);
margin-right: var(--space);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Spacing scale is inconsistent with the proposed changes

The codebase consistently uses a multiplier-based spacing scale (2x, 3x, 4x, etc.) while the changes in asset-name.module.css use the base unit var(--space) directly. This creates an inconsistency with the established spacing system.

Key findings from the codebase:

  • Most spacing variables follow the pattern var(--space-{N}x) where N is a multiplier (2x, 3x, 4x, etc.)
  • The base unit var(--space) is rarely used directly, appearing only in a few places for minimal spacing
  • Similar UI components like tags use multiplier-based spacing: var(--space-2x)
🔗 Analysis chain

Verify spacing scale consistency

The spacing has been simplified to use the base unit var(--space):

  • Removed size description (xxxsmall)
  • Maintained proportional relationship in calculations

These changes significantly increase the spacing between meta tags.

Let's check if this spacing scale is consistently applied:

Also applies to: 22-22

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other space variable usage to verify naming consistency
rg "var\(--space-[^)]*\)" --type css

Length of output: 14299

}

.metaTag + .metaTag {
margin-left: calc(var(--space-xxxsmall) / 2);
margin-left: calc(var(--space) / 2);
}

.metaTags:empty {
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/bundle-modules/bundle-modules.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.title {
color: var(--color-text-light);
color: var(--color-text-muted);
}

.toolbarSearch {
Expand All @@ -12,7 +12,7 @@
}

.nameTagDuplicated {
margin-right: var(--space-xxxsmall);
margin-right: var(--space);
vertical-align: baseline;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/ui/src/components/bundle-packages/bundle-packages.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.title {
color: var(--color-text-light);
color: var(--color-text-muted);
}

.toolbarSearch {
Expand All @@ -13,7 +13,7 @@

.packageName {
display: inline-block;
color: var(--color-text-light);
color: var(--color-text-muted);
}

.packageName:last-child {
Expand All @@ -22,13 +22,13 @@

.packageName + .packageName::before {
display: inline-block;
margin: 0 var(--space-xxxsmall);
margin: 0 var(--space);
content: '/';
color: var(--color-text-ultra-light);
color: var(--color-text-ultra-muted);
}

.packageNameTagDuplicate {
margin-right: var(--space-xxxsmall);
margin-right: var(--space);
vertical-align: middle;
}

Expand Down
32 changes: 16 additions & 16 deletions packages/ui/src/components/delta/delta.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.root {
color: var(--color-gray-ultra-light);
color: var(--color-gray-ultra-muted);
font-family: var(--font-family-fixed);
white-space: nowrap;
}
Expand All @@ -9,60 +9,60 @@
}

.HIGH_NEGATIVE {
color: var(--color-red-dark);
color: var(--color-red-intense);
}

.NEGATIVE {
color: var(--color-red-dark);
color: var(--color-red-intense);
}

.LOW_NEGATIVE {
color: var(--color-red-light);
color: var(--color-red-muted);
}

.LOW_POSITIVE {
color: var(--color-green-light);
color: var(--color-green-muted);
}

.POSITIVE {
color: var(--color-green-dark);
color: var(--color-green-intense);
}

.HIGH_POSITIVE {
color: var(--color-green-dark);
color: var(--color-green-intense);
}

.inverted {
padding: 0 2px;
border-radius: var(--radius-xsmall);
background-color: var(--color-gray-ultra-light);
color: var(--color-light);
background-color: var(--color-gray-ultra-muted);
color: var(--color-muted);
}

.inverted.CHANGE {
background: var(--color-info-light);
background: var(--color-info-muted);
}

.inverted.HIGH_NEGATIVE {
background: var(--color-red-dark);
background: var(--color-red-intense);
}

.inverted.NEGATIVE {
background: var(--color-red-dark);
background: var(--color-red-intense);
}

.inverted.LOW_NEGATIVE {
background: var(--color-red-light);
background: var(--color-red-muted);
}

.inverted.LOW_POSITIVE {
background: var(--color-green-light);
background: var(--color-green-muted);
}

.inverted.POSITIVE {
background: var(--color-green-dark);
background: var(--color-green-intense);
}

.inverted.HIGH_POSITIVE {
background: var(--color-green-dark);
background: var(--color-green-intense);
}
24 changes: 12 additions & 12 deletions packages/ui/src/components/entry-info/entry-info.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,21 @@
/** header */
.header {
/** space for close icon */
padding-right: calc(var(--space-xlarge) + var(--space-xxxsmall) + var(--space-xsmall));
padding-right: calc(var(--space-10x) + var(--space) + var(--space-3x));
border-bottom: 1px solid var(--color-outline);
}

.headerClose {
position: absolute;
right: calc(var(--space-small) - var(--space-xxxsmall));
top: calc(var(--space-small) - var(--space-xxxsmall));
color: var(--color-text-ultra-light);
right: calc(var(--space-4x) - var(--space));
top: calc(var(--space-4x) - var(--space));
color: var(--color-text-ultra-muted);
}

.headerClose:hover,
.headerClose:active,
.headerClose:focus {
color: var(--color-text-light);
color: var(--color-text-muted);
}

/** comon components */
Expand Down Expand Up @@ -84,15 +84,15 @@
.meta {}

.metaLabel {
margin-right: var(--space-xxxsmall);
margin-right: var(--space);
min-width: 8em;
flex: 0 1 6em;
color: var(--color-text-light);
color: var(--color-text-muted);
}

.metaLabelTooltip {
margin-left: var(--space-xxxsmall);
color: var(--color-text-ultra-light);
margin-left: var(--space);
color: var(--color-text-ultra-muted);
}

.metaContent {
Expand All @@ -101,7 +101,7 @@
}

.metaLink {
padding: 1px var(--space-xxxsmall);
padding: 1px var(--space);
display: inline-block;
line-height: var(--line-height-heading);
border-radius: var(--radius-small);
Expand All @@ -118,14 +118,14 @@
}

.metaLink {
margin-right: var(--space-xxxsmall);
margin-right: var(--space);
}

.metaLink:hover,
.metaLink:active,
.metaLink:focus {
background: var(--color-outline);
color: var(--color-primary-dark);
color: var(--color-primary-intense);
}

@media (min-width: 640px) {
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/insight-icon/insight-icon.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.root {
width: calc(var(--space-small) + 6px);
height: calc(var(--space-small) + 6px);
width: calc(var(--space-4x) + 6px);
height: calc(var(--space-4x) + 6px);
padding: 3px;
border-radius: 50%;
background: var(--color-highlight);
Expand Down
Loading