Skip to content

Commit

Permalink
refactor: improve dark mode color mapping
Browse files Browse the repository at this point in the history
  • Loading branch information
felixmosh committed Oct 14, 2024
1 parent 3cf2cb3 commit ee2991b
Show file tree
Hide file tree
Showing 17 changed files with 215 additions and 158 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
width: 1.18em;
height: 1em;
vertical-align: middle;
fill: #718096;
fill: var(--accent-color-d1);
}

.content > [role='menuitem']:hover {
color: rgba(0, 0, 0, 0.95);
background: #e2e8f0;
background: var(--separator-color);
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
height: 25px;
background-color: transparent;
border-radius: 9999px;
border: 1px solid #d1d5db;
border: 1px solid var(--input-border);
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Expand All @@ -14,23 +14,23 @@
}

.switch[data-state='checked'] {
background-color: #e2e8f0;
background-color: var(--button-default-hover-bg);
}

.switch:hover .thumb {
background-color: #909bad;
}

.switch:focus {
border-color: hsl(215, 12%, 74%);
box-shadow: 0 1px 3px hsl(215, 12%, 84%);
border-color: var(--input-focus-border);
box-shadow: var(--input-focus-shadow);
}

.thumb {
display: block;
width: 21px;
height: 21px;
background-color: #718096;
background-color: var(--accent-color-d1);
border-radius: 9999px;
/*box-shadow: 0 2px 2px hsl(0deg 0% 0% / 14%);*/
transition: transform 100ms;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Header/Header.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
display: flex;
height: var(--header-height);
box-sizing: border-box;
border-bottom: 1px solid var(--header-border);
border-bottom: 1px solid transparent;
}

.header > .logo {
Expand Down
12 changes: 4 additions & 8 deletions packages/ui/src/components/JobCard/JobCard.module.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.card {
background-color: var(--card-bg);
box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12),
0 1px 3px 0 rgba(60, 75, 100, 0.2);
box-shadow: var(--card-shadow);
border-radius: 0.25rem;
padding: 1em;
display: flex;
Expand All @@ -24,20 +23,19 @@
align-items: baseline;
justify-content: space-between;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
border-bottom: 1px solid var(--separator-color);
}

.title h5,
.sideInfo span {
font-size: 1.2rem;
font-weight: 300;
color: #4a5568;
line-height: 1;
}

.title h5 span {
margin-left: 1rem;
color: #a0aec0;
color: var(--card-text-secondary-color);
font-size: 0.833em;
}

Expand All @@ -51,7 +49,7 @@
.header h4 {
font-size: 1.2rem;
font-weight: 300;
color: #4a5568;
color: var(--card-text-color);
}

.details {
Expand All @@ -68,7 +66,6 @@
display: flex;
flex-direction: column;
text-align: right;
color: #cbd5e0;
flex-shrink: 0;
}

Expand All @@ -77,7 +74,6 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #cbd5e0;
padding-right: 1rem;
}

Expand Down
14 changes: 13 additions & 1 deletion packages/ui/src/components/JobCard/Progress/Progress.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,23 @@
.progress circle {
transition: stroke-dashoffset 500ms ease-in-out;
fill: none;

&:first-child {
stroke: var(--separator-color);
}

&.failed {
stroke: var(--failed);
}

&.success {
stroke: var(--completed);
}
}

.progress text {
font-size: 1.5rem;
font-family: inherit;
font-weight: 300;
fill: #a0aec0;
fill: var(--card-text-secondary-color);
}
7 changes: 5 additions & 2 deletions packages/ui/src/components/JobCard/Progress/Progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,12 @@ export const Progress = ({ progress, status, className, strokeWidth = 6 }: Progr

return (
<svg className={cn(s.progress, className)} width="100%" height="100%">
<circle stroke="#E5E7EB" {...commonProps} />
<circle {...commonProps} />
<circle
stroke={status === STATUSES.failed ? '#F56565' : '#48BB78'}
className={cn({
[s.failed]: status === STATUSES.failed,
[s.success]: status !== STATUSES.failed,
})}
pathLength={100}
strokeDasharray={100}
strokeDashoffset={100 - percentage}
Expand Down
65 changes: 36 additions & 29 deletions packages/ui/src/components/JobCard/Timeline/Timeline.module.css
Original file line number Diff line number Diff line change
@@ -1,52 +1,59 @@
.timeline {
padding: 1.5rem 1rem 1.5rem 0;
margin: 0;
list-style: none;
border: 0;
border-right-width: 2px;
border-right-style: solid;
border-image: linear-gradient(to bottom, #fff, #e2e8f0 10%, #e2e8f0 90%, #fff) 1 100%;
color: #a0aec0;
font-weight: 300;
height: 100%;
padding: 1.5rem 1rem 1.5rem 0;
margin: 0;
list-style: none;
border: 0;
border-right-width: 2px;
border-right-style: solid;
border-image: linear-gradient(
to bottom,
var(--card-bg),
var(--separator-color) 10%,
var(--separator-color) 90%,
var(--card-bg)
)
1 100%;
color: var(--card-text-secondary-color);
font-weight: 300;
height: 100%;
}

.timeline li {
display: block;
display: block;
}

.timeline li + li {
margin-top: 1.5rem;
margin-top: 1.5rem;
}

.timeline li > time {
position: relative;
color: #718096;
position: relative;
color: var(--accent-color-d1);
}

.timeline li > time:before {
content: '';
width: 0.5rem;
height: 0.5rem;
position: absolute;
right: -1.5rem;
top: 50%;
margin-top: -0.5rem;
background-color: #cbd5e0;
border-radius: 100%;
border: 3px solid #fff;
content: '';
width: 0.5rem;
height: 0.5rem;
position: absolute;
right: -1.5rem;
top: 50%;
margin-top: -0.5rem;
background-color: var(--card-text-secondary-color);
border-radius: 100%;
border: 3px solid var(--card-bg);
}

.timeline li > small {
display: block;
line-height: 1;
display: block;
line-height: 1;
}

.timeline li > small + small {
margin-top: 1.5rem;
margin-top: 1.5rem;
}

.timelineWrapper {
position: relative;
flex: 1;
position: relative;
flex: 1;
}
12 changes: 6 additions & 6 deletions packages/ui/src/components/JsonEditor/JsonEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,16 @@ const customStyle = HighlightStyle.define([
{ tag: tags.bool, color: '#990073' },
{ tag: tags.string, color: '#d14' },
{ tag: tags.number, color: 'teal' },
{ tag: tags.brace, color: '#718096' },
{ tag: tags.punctuation, color: '#718096' },
{ tag: tags.brace, color: 'var(--accent-color-d1)' },
{ tag: tags.punctuation, color: 'var(--accent-color-d1)' },
{ tag: tags.propertyName, color: '#458' },
]);

const theme = EditorView.theme({
'&': {
height: '200px',
backgroundColor: '#fff',
border: '1px #d1d5db solid',
backgroundColor: 'var(--input-bg)',
border: '1px var(--input-border) solid',
borderRadius: '0.375rem',
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
marginTop: '0.25rem',
Expand All @@ -52,8 +52,8 @@ const theme = EditorView.theme({
},
'&.cm-focused': {
outline: 'none',
borderColor: 'hsl(215, 12%, 74%)',
boxShadow: '0 1px 3px hsl(215, 12%, 84%)',
borderColor: 'var(--input-focus-border)',
boxShadow: 'var(--input-focus-shadow)',
},
'.cm-gutters': { borderRadius: '0.375rem 0 0 0.375rem' },
'.cm-scroller': { overflow: 'auto' },
Expand Down
5 changes: 3 additions & 2 deletions packages/ui/src/components/Modal/Modal.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
text-align: center;
vertical-align: middle;
padding: 1em;
background-color: var(--modal-overlay-bg);
background-color: rgba(0, 0, 0, 0.85);
user-select: none;
will-change: opacity;
z-index: 1000;
Expand All @@ -85,7 +85,8 @@

.content {
width: 100%;
background-color: var(--modal-content-bg);
background-color: var(--card-bg);
box-shadow: var(--card-shadow);
border-radius: 0.5rem;
padding: 1rem;
max-height: 100%;
Expand Down
42 changes: 21 additions & 21 deletions packages/ui/src/components/Pagination/Pagination.module.css
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
.pagination {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
}

.pagination li + li {
margin-left: 0.25em;
margin-left: 0.25em;
}

.pagination li {
line-height: normal;
line-height: normal;
}

.pagination a {
border-radius: 0.28571429rem;
padding: 0.6em 0.92857143em;
color: inherit;
text-decoration: none;
display: flex;
line-height: 1;
border-radius: 0.28571429rem;
padding: 0.6em 0.92857143em;
color: inherit;
text-decoration: none;
display: flex;
line-height: 1;
}

.pagination a:hover,
.pagination a:focus {
background-color: #e2e8f0;
background-color: #e2e8f0;
}

.pagination a:active,
.pagination li.isActive a {
background-color: #cbd5e0;
background-color: var(--text-secondary-color);
}

.pagination a svg {
height: 1em;
vertical-align: middle;
display: inline-block;
fill: currentColor;
height: 1em;
vertical-align: middle;
display: inline-block;
fill: currentColor;
}

.pagination li.disabled {
opacity: 0.45;
pointer-events: none;
opacity: 0.45;
pointer-events: none;
}
16 changes: 8 additions & 8 deletions packages/ui/src/components/QueueActions/QueueActions.module.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.queueActions {
margin: 0;
padding: 0;
list-style: none;
display: flex;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}

.queueActions > li + li {
margin-left: 0.25rem;
margin-left: 0.25rem;
}

.queueActions .button > svg {
fill: #a0aec0;
margin: -0.25em 0.5em 0 0;
fill: var(--card-text-secondary-color);
margin: -0.25em 0.5em 0 0;
}

.queueActions .button:hover > svg,
.queueActions .button:focus > svg {
fill: #718096;
fill: var(--accent-color-d1);
}
Loading

0 comments on commit ee2991b

Please sign in to comment.