diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js index a05fa44587..cc1624d10e 100644 --- a/src/components/AggregationPanel/AggregationPanel.js +++ b/src/components/AggregationPanel/AggregationPanel.js @@ -223,7 +223,7 @@ const AggregationPanel = ({ onClick={handleReload} className={styles.reloadButton} > - + )} @@ -268,7 +268,7 @@ const AggregationPanel = ({ onClick={handleReload} className={styles.reloadButton} > - + )} diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss index c5c362bbae..ece5bb62b2 100644 --- a/src/components/AggregationPanel/AggregationPanel.scss +++ b/src/components/AggregationPanel/AggregationPanel.scss @@ -1,212 +1,227 @@ @import 'stylesheets/globals.scss'; .heading { - font-size: 14px; - margin-top: 0; - padding: 8px; - padding-left: 10px; - background-color: $blue; - color: $white; + @include HeadingFont; + font-size: var(--text-base); + margin-top: 0; + padding: var(--space-2); + padding-left: var(--space-3); + background-color: var(--color-accent-blue); + color: var(--color-text-on-dark); + border-radius: var(--radius-md) var(--radius-md) 0 0; } .segmentItems { - font-size: 14px; - padding: 10px; - display: flex; - flex-direction: column; - gap: 10px; - } + @include UIFont; + font-size: var(--text-base); + padding: var(--space-3); + display: flex; + flex-direction: column; + gap: var(--space-3); +} .keyValue { - font-size: 14px; - display: flex; - gap: 10px; - align-items: center; - - .copyIcon { - display: none; - cursor: pointer; - margin-left: 4px; - color: inherit; - opacity: 0.6; - } + font-size: var(--text-base); + display: flex; + gap: var(--space-3); + align-items: center; + + .copyIcon { + display: none; + cursor: pointer; + margin-left: var(--space-1); + color: inherit; + opacity: 0.6; + transition: opacity var(--transition-fast); - &:hover .copyIcon { - display: inline-block; + &:hover { + opacity: 1; } + } + + &:hover .copyIcon { + display: inline-block; + } } .video { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .image { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .audio { - width: 100%; + width: 100%; } .segmentItems table, .segmentItems th, .segmentItems td { - font-size: 14px; - border: 1px solid #ddd; + font-size: var(--text-base); + border: 1px solid var(--color-border-primary); } .segmentItems th, .segmentItems td { - padding: 4px; - text-align: left; + padding: var(--space-1); + text-align: left; } .buttonContainer { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .button { - width: auto; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; - margin-bottom: 15px; - background-color: $blue; - padding: 3px 13px; - border: none; - color: $white; - line-height: 28px; - outline: 0; - text-decoration: none; - text-align: center; - border-radius: 5px; - font-size: 14px; - - &:hover, - &:focus { - background-color: $darkBlue; - } + @include UIFont; + width: auto; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + margin-bottom: var(--space-4); + background-color: var(--color-accent-blue); + padding: var(--space-1) var(--space-3); + border: none; + color: var(--color-text-on-dark); + line-height: 28px; + outline: 0; + text-decoration: none; + text-align: center; + border-radius: var(--radius-md); + font-size: var(--text-base); + transition: background-color var(--transition-fast); + + &:hover, + &:focus { + background-color: var(--color-accent-blue-hover); + } } .loading { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; } .center { - position: absolute; - text-align: center; - top: 50%; - left: 50%; - @include transform(translate(-50%, -50%)); + position: absolute; + text-align: center; + top: 50%; + left: 50%; + @include transform(translate(-50%, -50%)); } .nestedPanel { - margin-right: -10px; - transition: all 0.3s ease; + margin-right: -10px; + transition: all 0.3s ease; } .nestedPanelHeader { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - border-left: 1px solid transparent; - background-color: $blue; - color: $white; - cursor: pointer; - padding-right: 4px; - - &.expanded { - border-left-color: #e3e3ea; - } + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + border-left: 1px solid transparent; + background-color: var(--color-accent-blue); + color: var(--color-text-on-dark); + cursor: pointer; + padding-right: var(--space-1); + transition: border-color var(--transition-fast); + + &.expanded { + border-left-color: var(--color-border-primary); } +} .expandButton { - display: inline; - padding: 8px; - font-weight: 500; + @include UIFont; + display: inline; + padding: var(--space-2); + font-weight: var(--font-weight-medium); - &.expanded { - font-weight: 600; - } + &.expanded { + font-weight: var(--font-weight-semibold); + } } .refreshButton { - background: none; - border: none; - padding: 4px; - cursor: pointer; - color: #666; - font-size: 16px; - - &:hover { - color: #333; - } + background: none; + border: none; + padding: var(--space-1); + cursor: pointer; + color: var(--color-text-secondary); + font-size: var(--text-lg); + transition: color var(--transition-fast); + + &:hover { + color: var(--color-text-primary); + } - &:disabled { - color: #ccc; - cursor: not-allowed; - } + &:disabled { + color: var(--color-text-tertiary); + cursor: not-allowed; + } } .nestedPanelContent { - padding: 0 0 8px 0; + padding: 0 0 var(--space-2) 0; } .loader { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .reloadControls { - position: absolute; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - margin-top: 6px; - animation: fadeIn 0.5s ease-in; + position: absolute; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + margin-top: var(--space-2); + animation: fadeIn 0.5s ease-in; } .elapsedTimer { - color: #999; - font-size: 12px; + color: var(--color-text-tertiary); + font-size: var(--text-xs); } .reloadButton { - background: none; - border: none; - padding: 8px 12px; - cursor: pointer; - color: $blue; - font-size: 13px; - margin-top: 10px; - - &:hover { - color: $darkBlue; - } + @include UIFont; + background: none; + border: none; + padding: var(--space-2) var(--space-3); + cursor: pointer; + color: var(--color-accent-blue); + font-size: var(--text-sm); + margin-top: var(--space-3); + transition: color var(--transition-fast); + + &:hover { + color: var(--color-accent-blue-hover); + } } @keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } + from { opacity: 0; } + to { opacity: 1; } } .segmentContainer { - border-left: 1px solid #e3e3ea; - border-bottom: 1px solid #e3e3ea; - margin-bottom: 16px; - } \ No newline at end of file + border-left: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); + margin-bottom: var(--space-4); +} diff --git a/src/components/AppBadge/AppBadge.scss b/src/components/AppBadge/AppBadge.scss index 0bd41413cc..deac9c0a88 100644 --- a/src/components/AppBadge/AppBadge.scss +++ b/src/components/AppBadge/AppBadge.scss @@ -8,16 +8,16 @@ @import 'stylesheets/globals.scss'; .badge { - @include DosisFont; + @include HeadingFont; display: inline-block; height: 26px; line-height: 26px; vertical-align: middle; text-align: center; - border: 1px solid #768C97; - color: #768C97; - border-radius: 5px; - font-size: 10px; + border: 1px solid var(--color-text-on-dark-muted); + color: var(--color-text-on-dark-muted); + border-radius: var(--radius-md); + font-size: var(--text-xs); letter-spacing: 4px; width: 60px; padding-left: 3px; @@ -25,6 +25,6 @@ } .prod { - color: #00dc7c; - border-color: #00dc7c; + color: var(--color-accent-green); + border-color: var(--color-accent-green); } diff --git a/src/components/Autocomplete/Autocomplete.scss b/src/components/Autocomplete/Autocomplete.scss index a2e2d3ad60..b22e32488a 100644 --- a/src/components/Autocomplete/Autocomplete.scss +++ b/src/components/Autocomplete/Autocomplete.scss @@ -5,24 +5,24 @@ * This source code is licensed under the license found in the LICENSE file in * the root directory of this source tree. */ - @import "stylesheets/globals.scss"; +@import 'stylesheets/globals.scss'; .field { width: 100%; height: 56px; - border-radius: 4px; + border-radius: var(--radius-sm); position: relative; - transition: 0.3s background-color ease-in-out, 0.3s box-shadow ease-in-out; + transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } -.field.dropdown input{ - border-radius: 5px 5px 0px 0px; +.field.dropdown input { + border-radius: var(--radius-md) var(--radius-md) 0 0; } .field.active input + label { opacity: 1; font-size: 0.5em; - color: #0e69a1; + color: var(--color-accent-blue); } .field.locked { @@ -31,33 +31,37 @@ .field input { height: 40px; - - border: 1px solid $mainTextColor; - border-radius: 5px; - font-size: 14px; + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); + font-size: var(--text-base); outline: none; vertical-align: top; line-height: normal; position: relative; font-weight: 400; - transition: 0.3s background-color ease-in-out, 0.3s box-shadow ease-in-out, - 0.1s padding ease-in-out; + transition: background-color var(--transition-fast), box-shadow var(--transition-fast), + padding 0.1s ease-in-out; -webkit-appearance: none; + + &:focus { + border-color: var(--color-border-focus); + box-shadow: 0 0 0 2px var(--color-accent-blue-light); + } } .field input + label { position: absolute; top: 6px; left: 26px; - font-family: "Gotham SSm A", "Gotham SSm B", sans-serif; - font-size: 14px; - font-weight: 600; + @include UIFont; + font-size: var(--text-base); + font-weight: var(--font-weight-semibold); line-height: 24px; opacity: 0; pointer-events: none; - transition: 0.1s all ease-in-out; + transition: all 0.1s ease-in-out; } .field input + label.error { - color: #ec392f; -} \ No newline at end of file + color: var(--color-accent-red); +} diff --git a/src/components/BooleanEditor/BooleanEditor.scss b/src/components/BooleanEditor/BooleanEditor.scss index f7ac24aed9..2cd38c9a7c 100644 --- a/src/components/BooleanEditor/BooleanEditor.scss +++ b/src/components/BooleanEditor/BooleanEditor.scss @@ -5,12 +5,14 @@ * This source code is licensed under the license found in the LICENSE file in * the root directory of this source tree. */ +@import 'stylesheets/globals.scss'; + .editor { - background: white; + background: var(--color-bg-elevated); white-space: nowrap; - box-shadow: 0 1px 4px rgba(0,0,0,0.4); + box-shadow: var(--shadow-md); > *:first-child { - margin: 6px 0; + margin: var(--space-2) 0; } -} \ No newline at end of file +} diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js index 74cbe7ca04..ef268f616c 100644 --- a/src/components/BrowserCell/BrowserCell.react.js +++ b/src/components/BrowserCell/BrowserCell.react.js @@ -725,7 +725,7 @@ export default class BrowserCell extends Component { style.left = this.props.stickyLeft; style.zIndex = 1; style.background = this.props.rowBackground; - style.borderBottom = '1px solid #e3e3ea'; + style.borderBottom = '1px solid var(--color-border-secondary)'; } return ( diff --git a/src/components/BrowserCell/BrowserCell.scss b/src/components/BrowserCell/BrowserCell.scss index bb37ca6531..94f4538630 100644 --- a/src/components/BrowserCell/BrowserCell.scss +++ b/src/components/BrowserCell/BrowserCell.scss @@ -10,15 +10,15 @@ overflow: hidden; text-overflow: ellipsis; cursor: default; - color: #0E69A1; + color: var(--color-cell-text); height: 30px; line-height: 20px; - padding: 5px; - border-right: 1px solid #e3e3ea; + padding: var(--data-cell-padding); + border-right: 1px solid var(--color-cell-border); } .empty { - color: #7D929F; + color: var(--color-text-tertiary); } .current { @@ -28,7 +28,7 @@ position: absolute; pointer-events: none; content: ''; - border: 2px solid #555572; + border: 2px solid var(--color-text-primary); top: 0; left: 0; right: 0; @@ -43,7 +43,7 @@ position: absolute; pointer-events: none; content: ''; - border-left: 2px solid #555572; + border-left: 2px solid var(--color-text-primary); top: 0; left: 0; right: 0; @@ -58,7 +58,7 @@ position: absolute; pointer-events: none; content: ''; - border-right: 2px solid #555572; + border-right: 2px solid var(--color-text-primary); top: 0; left: 0; right: 0; @@ -73,7 +73,7 @@ position: absolute; pointer-events: none; content: ''; - border-top: 2px solid #555572; + border-top: 2px solid var(--color-text-primary); top: 0; left: 0; right: 0; @@ -88,7 +88,7 @@ position: absolute; pointer-events: none; content: ''; - border-bottom: 2px solid #555572; + border-bottom: 2px solid var(--color-text-primary); top: 0; left: 0; right: 0; @@ -97,7 +97,7 @@ } .selected { - background-color: #e3effd; + background-color: var(--color-accent-blue-light); } .pointerList { @@ -154,7 +154,7 @@ position: absolute; pointer-events: none; content: ''; - border: 2px solid #ff395e; + border: 2px solid var(--color-accent-red); top: 0; left: 0; right: 0; @@ -163,7 +163,7 @@ } .readonly { - color: #04263bd1; + color: var(--color-text-secondary); } .action { diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js index 3e33b7d21c..857a5fd73d 100644 --- a/src/components/BrowserFilter/BrowserFilter.react.js +++ b/src/components/BrowserFilter/BrowserFilter.react.js @@ -857,7 +857,6 @@ export default class BrowserFilter extends React.Component { {this.state.confirmDelete && (
{optionsDropdown} @@ -252,7 +252,7 @@ function compareValue( return ( onChangeCompareTo(val === 'True')} @@ -342,15 +342,16 @@ const FilterRow = ({ maxHeight: '360px', overflowY: 'auto', fontSize: '14px', - background: '#343445', - borderBottomLeftRadius: '5px', - borderBottomRightRadius: '5px', - color: 'white', + background: 'var(--color-bg-elevated)', + border: '1px solid var(--color-border-secondary)', + borderRadius: '0 0 var(--radius-md) var(--radius-md)', + color: 'var(--color-text-primary)', cursor: 'pointer', + boxShadow: 'var(--shadow-md)', }} suggestionsItemStyle={{ - background: '#343445', - color: 'white', + background: 'var(--color-bg-elevated)', + color: 'var(--color-text-primary)', height: '30px', lineHeight: '30px', borderBottom: '0px', @@ -377,15 +378,16 @@ const FilterRow = ({ maxHeight: '360px', overflowY: 'auto', fontSize: '14px', - background: '#343445', - borderBottomLeftRadius: '5px', - borderBottomRightRadius: '5px', - color: 'white', + background: 'var(--color-bg-elevated)', + border: '1px solid var(--color-border-secondary)', + borderRadius: '0 0 var(--radius-md) var(--radius-md)', + color: 'var(--color-text-primary)', cursor: 'pointer', + boxShadow: 'var(--shadow-md)', }} suggestionsItemStyle={{ - background: '#343445', - color: 'white', + background: 'var(--color-bg-elevated)', + color: 'var(--color-text-primary)', height: '30px', lineHeight: '30px', borderBottom: '0px', @@ -405,7 +407,7 @@ const FilterRow = ({ />
Constraints[c].name)} onChange={c => onChangeConstraint(constraintLookup[c], compareTo)} @@ -424,7 +426,7 @@ const FilterRow = ({ onChangeModifiers )}
); diff --git a/src/components/BrowserMenu/BrowserMenu.scss b/src/components/BrowserMenu/BrowserMenu.scss index 299d82165a..5924e75ae8 100644 --- a/src/components/BrowserMenu/BrowserMenu.scss +++ b/src/components/BrowserMenu/BrowserMenu.scss @@ -16,6 +16,7 @@ } // Make submenu entries stretch to full width within menu bodies +// Override dark-toolbar colors with light-bg colors when inside dropdown .body, .subMenuBody, .subMenuBodyLeft { > .wrap { display: block; @@ -24,146 +25,215 @@ display: flex; align-items: center; justify-content: space-between; - padding: 4px 14px; + padding: var(--space-1) var(--space-3); white-space: nowrap; + color: var(--color-text-primary); + + svg { + fill: var(--color-text-tertiary); + } + + &:hover { + background: var(--color-interactive-hover); + color: var(--color-text-primary); + + svg { + fill: var(--color-text-primary); + } + } + + &.disabled { + color: var(--color-text-tertiary); + + &:hover svg { + fill: var(--color-text-tertiary); + } + } + + &.active { + background: var(--color-accent-blue-light); + color: var(--color-accent-blue); + + svg { + fill: var(--color-accent-blue); + } + } + } + } + + // Title inside dropdown body also needs light colors + .title { + color: var(--color-text-primary); + + svg { + fill: var(--color-text-secondary); + } + + &:hover { + background: var(--color-interactive-hover); + color: var(--color-text-primary); + + svg { + fill: var(--color-text-primary); + } } } } .entry { - height: 30px; - padding: 8px; + display: inline-flex; + align-items: center; + padding: var(--space-1) var(--space-2); svg { - fill: #66637A; + fill: var(--color-text-on-dark-muted); + transition: fill var(--transition-fast); } &:hover { svg { - fill: white; + fill: var(--color-text-on-dark); } } &.disabled { cursor: not-allowed; - color: #66637A; + color: var(--color-text-on-dark-muted); + opacity: 0.4; &:hover svg { - fill: #66637A; + fill: var(--color-text-on-dark-muted); } } &.active { - background: $orange; - border-radius: 5px; + background: var(--color-accent-orange); + border-radius: var(--radius-md); svg { - fill: white; + fill: var(--color-text-on-dark); } } } .title { - background: #797592; - padding: 8px; - border-radius: 5px 5px 0 0; + display: inline-flex; + align-items: center; + background: var(--color-interactive-hover); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-md) var(--radius-md) 0 0; svg { - fill: white; + fill: var(--color-text-secondary); } &.active { - background: $orange; - border-radius: 5px; + background: var(--color-accent-orange); + border-radius: var(--radius-md); + + svg { + fill: var(--color-text-on-dark); + } } } .entry, .title { - @include NotoSansFont; - position: relative; - bottom: -4px; - font-size: 14px; - color: #ffffff; + @include UIFont; + font-size: var(--text-sm); + color: var(--color-text-on-dark-muted); cursor: pointer; + border-radius: var(--radius-md); + transition: background var(--transition-fast), color var(--transition-fast); svg { - vertical-align: top; - margin-right: 4px; + vertical-align: middle; + margin-right: var(--space-1); + fill: var(--color-text-on-dark-muted); } span { - vertical-align: top; + vertical-align: middle; height: 14px; line-height: 14px; } + + &:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--color-text-on-dark); + + svg { + fill: var(--color-text-on-dark); + } + } } .body { position: absolute; - top: 30px; + top: 34px; right: 0; - border-radius: 5px 0 5px 5px; - background: #797592; - padding: 8px 0; - font-size: 14px; + border-radius: var(--radius-lg); + background: var(--color-bg-elevated); + padding: var(--space-1) 0; + font-size: var(--text-sm); + box-shadow: var(--shadow-overlay); + border: 1px solid var(--color-border-secondary); + z-index: 10; } - .subMenuBody { position: absolute; top: 0; - border-radius: 0 5px 5px 5px; - background: #797592; - padding: 8px 0; - font-size: 14px; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); + border-radius: var(--radius-lg); + background: var(--color-bg-elevated); + padding: var(--space-1) 0; + font-size: var(--text-sm); + border: 1px solid var(--color-border-secondary); + box-shadow: var(--shadow-lg); + z-index: 11; } .subMenuBodyLeft { position: absolute; top: 0; - border-radius: 5px 0 5px 5px; - background: #797592; - padding: 8px 0; - font-size: 14px; - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); + border-radius: var(--radius-lg); + background: var(--color-bg-elevated); + padding: var(--space-1) 0; + font-size: var(--text-sm); + border: 1px solid var(--color-border-secondary); + box-shadow: var(--shadow-lg); + z-index: 11; } .submenuArrow { - margin-left: 12px; + margin-left: var(--space-3); flex-shrink: 0; font-size: 18px; line-height: 1; - color: rgba(255, 255, 255, 0.5); + color: var(--color-text-tertiary); &::after { - content: '›'; + content: '\203A'; } } .entry:hover .submenuArrow { - color: white; + color: var(--color-text-primary); } .item { position: relative; - padding: 4px 14px; + padding: var(--space-1) var(--space-3); white-space: nowrap; cursor: pointer; - color: white; + color: var(--color-text-primary); + transition: background var(--transition-fast); &:hover { - background: $blue; - - .submenuArrow { - border-left-color: white; - } + background: var(--color-interactive-hover); } &.disabled { - color: rgba(0,0,0,0.2); + color: var(--color-text-tertiary); cursor: not-allowed; &:hover { @@ -173,7 +243,7 @@ } .separator { - background: rgba(0,0,0,0.1); + background: var(--color-border-secondary); height: 1px; - margin: 4px 0; + margin: var(--space-1) 0; } diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js index bdc133a471..10fe839c02 100644 --- a/src/components/BrowserRow/BrowserRow.react.js +++ b/src/components/BrowserRow/BrowserRow.react.js @@ -74,7 +74,7 @@ export default class BrowserRow extends Component { } else if (obj.className === '_User' && obj.get('authData') !== undefined) { requiredCols = ['authData']; } - const rowBackground = row % 2 ? '#F4F5F7' : '#fdfafb'; + const rowBackground = row % 2 ? 'var(--color-bg-secondary)' : 'var(--color-bg-primary)'; const rowStyle = { minWidth: rowWidth }; return (
onMouseOverRow(obj.id)}> @@ -87,7 +87,7 @@ export default class BrowserRow extends Component { left: 0, zIndex: 1, background: rowBackground, - borderBottom: '1px solid #e3e3ea', + borderBottom: '1px solid var(--color-border-secondary)', }} > diff --git a/src/components/Button/Button.react.js b/src/components/Button/Button.react.js index 5b878fe903..f6bc29db9e 100644 --- a/src/components/Button/Button.react.js +++ b/src/components/Button/Button.react.js @@ -74,7 +74,7 @@ Button.propTypes = { 'Determines whether a button can be clicked. Disabled buttons will ' + 'appear grayed out, and will not fire onClick events.' ), - color: PropTypes.oneOf(['blue', 'green', 'red', 'white']).describe('The color of the button.'), + color: PropTypes.oneOf(['blue', 'green', 'red', 'white', 'ghost']).describe('The color of the button.'), onClick: PropTypes.func.describe('A function to be called when the button is clicked.'), value: PropTypes.string.isRequired.describe( 'The content of the button. This can be any renderable content.' diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 1b37c76540..4503cb9dd6 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -8,95 +8,125 @@ @import 'stylesheets/globals.scss'; .button { - @include DosisFont; - @include buttonReset($bg: none, $border: 1px solid $blue, $padding: 0 16px); + @include UIFont; + @include buttonReset($bg: var(--btn-bg), $border: var(--btn-border), $padding: 0 16px); display: inline-block; - height: 30px; - line-height: 28px; + height: 36px; + line-height: 36px; outline: 0; text-decoration: none; text-align: center; - border-radius: 5px; - font-size: 14px; - - color: $blue; + border-radius: var(--btn-radius); + font-size: var(--text-base); + font-weight: var(--font-weight-medium); + color: var(--btn-color); + transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); &:hover, &:focus { - background-color: $blue; - color: white; + background: var(--btn-hover-bg); + color: var(--btn-hover-color); + border-color: var(--color-border-primary); } } .primary { - background-color: $blue; - color: $white; + background: var(--btn-primary-bg); + color: var(--btn-primary-color); + border: var(--btn-primary-border); &:hover, &:focus { - background-color: $darkBlue; + background: var(--btn-primary-hover-bg); + border-color: var(--btn-primary-hover-bg); + color: var(--btn-primary-color); } } .green { - color: $green; - border-color: $green; + color: var(--color-accent-green); + background: var(--color-accent-green-light); + border-color: transparent; &:hover, &:focus { - background-color: $lightGreen; + background: var(--color-accent-green); + color: var(--color-text-on-dark); + border-color: transparent; } &.primary { - background-color: $green; - color: $white; + background: var(--color-accent-green); + color: var(--color-text-on-dark); + border-color: transparent; &:hover, &:focus { - background-color: $darkGreen; + background: var(--color-accent-green); + filter: brightness(0.9); } } } .red { - color: $red; - border-color: $red; + color: var(--color-accent-red); + background: var(--color-accent-red-light); + border-color: transparent; &:hover, &:focus { - background-color: $lightRed; + background: var(--color-accent-red); + color: var(--color-text-on-dark); + border-color: transparent; } &.primary { - background-color: $red; - color: $white; + background: var(--color-accent-red); + color: var(--color-text-on-dark); + border-color: transparent; &:hover, &:focus { - background-color: $darkRed; + background: var(--color-accent-red); + filter: brightness(0.9); } } } +// Ghost: transparent bg, subtle hover — for Cancel / tertiary actions +.ghost { + color: var(--color-text-secondary); + background: transparent; + border-color: transparent; + + &:hover, &:focus { + background: var(--color-interactive-hover); + color: var(--color-text-primary); + border-color: transparent; + } +} + .white { - color: $white; - border-color: $white; - line-height: 28px; + color: var(--color-text-on-dark); + border-color: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.1); &:hover, &:focus { - background-color: $white; - color: $blue; + background: rgba(255, 255, 255, 0.2); + color: var(--color-text-on-dark); + border-color: rgba(255, 255, 255, 0.4); } &.primary { - background-color: $white; - color: $blue; + background: var(--color-text-on-dark); + color: var(--color-accent-blue); + border-color: transparent; &:hover, &:focus { - background-color: $blue; - border-color: $blue; - color: white; + background: rgba(255, 255, 255, 0.9); + border-color: transparent; + color: var(--color-accent-blue); } } &.disabled { - background-color: transparent; - border-color: white; - opacity: 0.2; + background: transparent; + border-color: rgba(255, 255, 255, 0.15); + opacity: 0.3; } } @@ -109,14 +139,15 @@ } .disabled, .disabled.primary { - background-color: #e0e0ea; - border-color: #e0e0ea; - color: white; + background: var(--color-bg-tertiary); + border-color: transparent; + color: var(--color-text-tertiary); cursor: default; - &:hover{ - background-color: #e0e0ea; - border-color: #e0e0ea; - color: white; + + &:hover { + background: var(--color-bg-tertiary); + border-color: transparent; + color: var(--color-text-tertiary); } } @@ -128,4 +159,3 @@ background-position: 150% 0; } } - diff --git a/src/components/Calendar/Calendar.scss b/src/components/Calendar/Calendar.scss index f178332267..3eb4bf9ff9 100644 --- a/src/components/Calendar/Calendar.scss +++ b/src/components/Calendar/Calendar.scss @@ -8,24 +8,25 @@ @import 'stylesheets/globals.scss'; .calendar { - background: white; - color: $blue; + background: var(--color-bg-elevated); + color: var(--color-accent-blue); width: 182px; height: auto; } .month { - margin-bottom: 10px; + margin-bottom: var(--space-3); button { - @include buttonReset($border: 1px solid $blue); + @include buttonReset($border: 1px solid var(--color-accent-blue)); position: relative; display: inline-block; width: 14px; height: 14px; - border-radius: 100%; + border-radius: var(--radius-full); opacity: 0.5; - margin: 0 6px; + margin: 0 var(--space-2); + transition: opacity var(--transition-fast); &:hover { opacity: 1; @@ -37,7 +38,7 @@ &:before { content: ''; position: absolute; - @include arrow('left', 8px, 4px, $blue); + @include arrow('left', 8px, 4px, var(--color-accent-blue)); top: 2px; left: 4px; } @@ -45,7 +46,7 @@ &:after { content: ''; position: absolute; - @include arrow('left', 8px, 4px, white); + @include arrow('left', 8px, 4px, var(--color-bg-elevated)); top: 2px; left: 5px; } @@ -57,7 +58,7 @@ &:before { content: ''; position: absolute; - @include arrow('right', 8px, 4px, $blue); + @include arrow('right', 8px, 4px, var(--color-accent-blue)); top: 2px; left: 4px; } @@ -65,7 +66,7 @@ &:after { content: ''; position: absolute; - @include arrow('right', 8px, 4px, white); + @include arrow('right', 8px, 4px, var(--color-bg-elevated)); top: 2px; left: 3px; } @@ -73,22 +74,22 @@ } div { - font-size: 14px; + font-size: var(--text-base); text-align: center; } } .weekdays { opacity: 0.5; - font-size: 12px; - margin-bottom: 8px; + font-size: var(--text-xs); + margin-bottom: var(--space-2); span { display: inline-block; width: 26px; height: 13px; line-height: 13px; - font-size: 13px; + font-size: var(--text-sm); text-align: center; } } @@ -101,34 +102,44 @@ width: 26px; height: 20px; line-height: 20px; - font-size: 12px; + font-size: var(--text-xs); text-align: center; margin: 0; - color: $blue; + color: var(--color-accent-blue); + border-radius: var(--radius-sm); + transition: background var(--transition-fast), color var(--transition-fast); + + &:hover { + background: var(--color-interactive-hover); + } } .selected { - color: white; - background: $darkBlue; + color: var(--color-text-on-dark); + background: var(--color-accent-blue-hover); + + &:hover { + background: var(--color-accent-blue); + } } } .shadeBefore { a { - background: #efeff1; + background: var(--color-bg-tertiary); } .selected { - background: $darkBlue; + background: var(--color-accent-blue-hover); } .selected ~ button { - background: white; + background: var(--color-bg-elevated); } } .shadeAfter { .selected ~ button { - background: #efeff1; + background: var(--color-bg-tertiary); } } diff --git a/src/components/CascadingView/CascadingView.scss b/src/components/CascadingView/CascadingView.scss index ab55ff1050..356e0f422b 100644 --- a/src/components/CascadingView/CascadingView.scss +++ b/src/components/CascadingView/CascadingView.scss @@ -7,7 +7,7 @@ */ @import 'stylesheets/globals.scss'; -$arrowColor: #343445; +$arrowColor: var(--color-accent-purple); .cascadingView, .contentContainer { position: relative; @@ -29,6 +29,11 @@ $arrowColor: #343445; .arrow { @include buttonReset; + transition: opacity var(--transition-fast); + + &:hover { + opacity: 0.8; + } } .expanded { @@ -43,11 +48,11 @@ $arrowColor: #343445; .childrenContainer { position: relative; - padding: 15px 0px 15px 18px; - background-color: $inputBackgroundColor; + padding: var(--space-4) 0 var(--space-4) var(--space-4); + background-color: var(--color-bg-tertiary); .children { - border-left: 1px solid rgba(52, 52, 69, 0.2); - padding-left: 14px; + border-left: 1px solid var(--color-border-secondary); + padding-left: var(--space-3); } } diff --git a/src/components/CategoryList/CategoryList.react.js b/src/components/CategoryList/CategoryList.react.js index 931e300ef9..e909008b10 100644 --- a/src/components/CategoryList/CategoryList.react.js +++ b/src/components/CategoryList/CategoryList.react.js @@ -17,7 +17,6 @@ export default class CategoryList extends React.Component { static contextType = CurrentApp; constructor() { super(); - this.listWrapperRef = React.createRef(); this.state = { openClasses: [], hoveredFilter: null, @@ -26,14 +25,7 @@ export default class CategoryList extends React.Component { } componentDidMount() { - const listWrapper = this.listWrapperRef.current; - if (listWrapper) { - this.highlight = document.createElement('div'); - this.highlight.className = styles.highlight; - listWrapper.appendChild(this.highlight); - this._autoExpandForSelectedFilter(); - this._updateHighlight(); - } + this._autoExpandForSelectedFilter(); } componentDidUpdate(prevProps) { @@ -42,13 +34,6 @@ export default class CategoryList extends React.Component { if (prevProps.params !== this.props.params || prevProps.categories !== this.props.categories) { this._autoExpandForSelectedFilter(); } - this._updateHighlight(); - } - - componentWillUnmount() { - if (this.highlight) { - this.highlight.parentNode.removeChild(this.highlight); - } } _findMatchingFilterIndex(filters, queryFilter, queryFilterId) { @@ -98,40 +83,6 @@ export default class CategoryList extends React.Component { } } - _updateHighlight() { - if (this.highlight) { - let height = 0; - for (let i = 0; i < this.props.categories.length; i++) { - const c = this.props.categories[i]; - const id = c.id || c.name; - if (id === this.props.current) { - if (this.state.openClasses.includes(id)) { - const query = new URLSearchParams(this.props.params); - if (query.has('filters')) { - const queryFilter = query.get('filters'); - const filterId = query.get('filterId'); - const matchIndex = this._findMatchingFilterIndex(c.filters, queryFilter, filterId); - if (matchIndex !== -1) { - height += (matchIndex + 1) * 20; - } - } - } - this.highlight.style.display = 'block'; - this.highlight.style.top = height + 'px'; - return; - } - if (id === 'classSeparator') { - height += 13; - } else if (this.state.openClasses.includes(id)) { - height = height + 20 * (c.filters.length + 1); - } else { - height += 20; - } - } - this.highlight.style.display = 'none'; - } - } - toggleDropdown(e, id) { e.preventDefault(); const openClasses = [...this.state.openClasses]; @@ -149,12 +100,15 @@ export default class CategoryList extends React.Component { return null; } return ( -
+
{this.props.categories.map(c => { const id = c.id || c.name; if (c.type === 'separator') { return
; } + if (c.type === 'sectionHeader') { + return
{c.name}
; + } const count = c.count; let className = id === this.props.current ? styles.active : ''; let selectedFilter = null; diff --git a/src/components/CategoryList/CategoryList.scss b/src/components/CategoryList/CategoryList.scss index f5a1e65961..6ba73db56c 100644 --- a/src/components/CategoryList/CategoryList.scss +++ b/src/components/CategoryList/CategoryList.scss @@ -10,29 +10,32 @@ .class_list { position: relative; margin-bottom: 5px; - border-left: 1px solid #3e87b2; + margin-left: 8px; a { display: block; - padding-left: 12px; - height: 20px; - line-height: 20px; - color: #8fb9cf; - font-size: 12px; + padding-left: 8px; + height: 24px; + line-height: 24px; + color: var(--color-text-on-dark-muted); + font-size: var(--text-sm); + border-radius: var(--radius-md); + transition: color var(--transition-fast); &.active { - color: white; + color: var(--color-text-on-dark); + font-weight: var(--font-weight-medium); } - &:hover{ - color: white; + &:hover { + color: var(--color-text-on-dark); } span { display: block; &:first-of-type { - @include DosisFont; + @include UIFont; float: right; width: 50px; text-align: right; @@ -47,17 +50,26 @@ } } -.highlight { - position: absolute; - width: 1px; - height: 20px; - background: white; - transition: top 0.2s cubic-bezier(1, 0, 0, 1); + +.sectionHeader { + @include UIFont; + font-size: 10px; + font-weight: var(--font-weight-medium); + text-transform: uppercase; + letter-spacing: 1px; + color: var(--color-text-on-dark-muted); + padding: 12px 8px 4px; + line-height: 1; + opacity: 0.6; + + &:first-child { + padding-top: 4px; + } } .separator { margin: 6px 0 6px 12px; - background-color: #3e87b2; + background-color: rgba(255, 255, 255, 0.1); border: 0; height: 1px; } @@ -74,26 +86,40 @@ margin-right: 20px; padding-left: 0px !important; &:after { - @include arrow('down', 10px, 7px, #8fb9cf); + @include arrow('down', 10px, 7px, var(--color-text-on-dark-muted)); content: ''; margin-left: 6px; } } .link { display: flex; + align-items: center; + border-radius: var(--radius-md); + transition: background var(--transition-fast); + + &:has(a.active) { + background: rgba(255, 255, 255, 0.08); + } + + &:hover { + background: rgba(255, 255, 255, 0.04); + } + a { &:first-of-type { flex-grow: 1 } } .count { - @include DosisFont; - color: #8fb9cf; - font-size: 12px; + @include UIFont; + color: var(--color-text-on-dark-muted); + font-size: 11px; margin-left: auto; margin-right: 4px; min-width: 20px; text-align: right; + opacity: 0.6; + line-height: 24px; } .edit { display: flex; @@ -101,11 +127,11 @@ padding-top: 2px; cursor: pointer; svg { - fill: #8fb9cf; + fill: var(--color-text-on-dark-muted); } &:hover { svg { - fill: white; + fill: var(--color-text-on-dark); } } } @@ -123,7 +149,7 @@ text-align: left !important; margin-left: 14px; margin-right: 0px !important; - font-family: Dosis, "Helvetica Neue", Helvetica, Arial, sans-serif; + @include UIFont; flex-grow: 1; } } @@ -133,11 +159,11 @@ padding-top: 2px; cursor: pointer; svg { - fill: #8fb9cf; + fill: var(--color-text-on-dark-muted); } &:hover { svg { - fill: white; + fill: var(--color-text-on-dark); } } } diff --git a/src/components/Chart/Chart.scss b/src/components/Chart/Chart.scss index cfb9db67bb..bef041c433 100644 --- a/src/components/Chart/Chart.scss +++ b/src/components/Chart/Chart.scss @@ -9,7 +9,7 @@ .chart { position: relative; - background: white; + background: var(--color-bg-primary); padding: 0 0 40px 40px; } @@ -23,25 +23,25 @@ .label { position: absolute; - right: 10px; - font-size: 10px; + right: var(--space-2); + font-size: var(--text-xs); margin-top: -6px; + color: var(--color-text-secondary); } .tick { @include transform(translateX(-50%)); position: absolute; bottom: 14px; - font-size: 10px; + font-size: var(--text-xs); + color: var(--color-text-secondary); } .grow { @include transform(scale(1)); - transition: transform 0.2s ease-out; - -webkit-transition: -webkit-transform 0.2s ease-out; + transition: transform var(--transition-fast); transform-origin: 50% 50%; - -webkit-transform-origin: 50% 50%; &:hover { @include transform(scale(2)); @@ -55,10 +55,11 @@ .popup { @include transform(translateY(-50%)); position: absolute; - border-radius: 5px; - border: 1px solid $blue; - background: white; - padding: 8px 8px; + border-radius: var(--radius-md); + border: 1px solid var(--color-accent-blue); + background: var(--color-bg-elevated); + box-shadow: var(--shadow-md); + padding: var(--space-2); text-align: center; min-width: 140px; } @@ -76,7 +77,7 @@ } &:after { - @include arrow('right', 12px, 8px, white); + @include arrow('right', 12px, 8px, var(--color-bg-elevated)); content: ''; position: absolute; right: -7px; @@ -98,7 +99,7 @@ } &:after { - @include arrow('left', 12px, 8px, white); + @include arrow('left', 12px, 8px, var(--color-bg-elevated)); content: ''; position: absolute; left: -7px; @@ -109,10 +110,13 @@ .popupTime { white-space: nowrap; - font-size: 10px; - margin-bottom: 4px; + font-size: var(--text-xs); + margin-bottom: var(--space-1); + color: var(--color-text-secondary); } .popupValue { - font-size: 12px; + font-size: var(--text-xs); + font-weight: var(--font-weight-medium); + color: var(--color-text-primary); } diff --git a/src/components/Checkbox/Checkbox.react.js b/src/components/Checkbox/Checkbox.react.js index 69251749de..bda2909ed4 100644 --- a/src/components/Checkbox/Checkbox.react.js +++ b/src/components/Checkbox/Checkbox.react.js @@ -18,7 +18,7 @@ const Checkbox = ({ label, checked, indeterminate, onChange }) => { } let inner = null; if (checked) { - inner = ; + inner = ; } else if (indeterminate) { inner = ; } diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 2e2b23a4d8..93d9a5b450 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -15,14 +15,16 @@ } .checkbox { - display: inline-block; - height: 20px; - width: 20px; - padding: 3px; - border-radius: 4px; - background: white; + display: inline-flex; + align-items: center; + justify-content: center; + height: 18px; + width: 18px; + border-radius: var(--radius-sm); + background: var(--color-bg-primary); vertical-align: middle; - border: 1px solid $mainTextColor; + border: 1px solid var(--color-border-primary); + transition: border-color var(--transition-fast), background var(--transition-fast); svg { vertical-align: top; @@ -31,27 +33,27 @@ .minus { display: block; - width: 12px; - height: 4px; - background: $blue; - margin-top: 4px; - border-radius: 2px; + width: 10px; + height: 2px; + background: var(--color-bg-primary); + border-radius: 1px; } .label { - @include DosisFont; - color: $mainTextColor; - font-size: 14px; + @include UIFont; + color: var(--color-text-secondary); + font-size: var(--text-base); vertical-align: middle; margin-right: 6px; } .checked, .indeterminate { .checkbox { - border-color: $blue; + background: var(--color-accent-blue); + border-color: var(--color-accent-blue); } .label { - color: $blue; + color: var(--color-text-primary); } } diff --git a/src/components/Chip/Chip.scss b/src/components/Chip/Chip.scss index 7d28e421a1..8bcd9fee7c 100644 --- a/src/components/Chip/Chip.scss +++ b/src/components/Chip/Chip.scss @@ -9,22 +9,28 @@ .chip { display: inline-flex; flex-direction: row; - background-color: #d5e5f2; - border: none; + background-color: var(--color-bg-tertiary); + border: 1px solid var(--color-border-secondary); cursor: pointer; - height: 32px; + height: 28px; outline: none; - padding: 4px; - margin: 4px; - font-size: 14px; - color: #0e69a1; - font-family: "Open Sans", sans-serif; + padding: 2px; + margin: 3px; + font-size: var(--text-xs); + color: var(--color-text-secondary); + font-family: var(--font-sans); white-space: nowrap; align-items: center; - border-radius: 8px; + border-radius: var(--radius-md); vertical-align: middle; text-decoration: none; justify-content: center; + transition: background var(--transition-fast), border-color var(--transition-fast); + + &:hover { + background-color: var(--color-interactive-hover); + border-color: var(--color-border-primary); + } } .content { @@ -39,20 +45,18 @@ .chip { svg { - color: #999999; + color: var(--color-text-tertiary); cursor: pointer; - height: auto; - margin: 20px 6px 0 -8px; + margin: 0 4px 0 -4px; fill: currentColor; - width: 1em; - height: 1em; + width: 14px; + height: 14px; display: inline-block; - font-size: 16px; - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: color var(--transition-fast); user-select: none; flex-shrink: 0; } svg:hover { - color: red; + color: var(--color-accent-red); } } diff --git a/src/components/ChromeDatePicker/ChromeDatePicker.react.js b/src/components/ChromeDatePicker/ChromeDatePicker.react.js index 83b15aa4db..c473bd9b80 100644 --- a/src/components/ChromeDatePicker/ChromeDatePicker.react.js +++ b/src/components/ChromeDatePicker/ChromeDatePicker.react.js @@ -74,7 +74,7 @@ export default class ChromeDatePicker extends React.Component {
{`${monthDayStringUTC(this.props.value)}`} - +
@@ -83,7 +83,7 @@ export default class ChromeDatePicker extends React.Component { content = (
{`${monthDayStringUTC(this.props.value)}`} - +
); } diff --git a/src/components/ChromeDatePicker/ChromeDatePicker.scss b/src/components/ChromeDatePicker/ChromeDatePicker.scss index 284561f397..b41aeaa290 100644 --- a/src/components/ChromeDatePicker/ChromeDatePicker.scss +++ b/src/components/ChromeDatePicker/ChromeDatePicker.scss @@ -19,12 +19,13 @@ $pickerHeight: 30px; display: inline-block; white-space: nowrap; cursor: pointer; - font-size: 14px; + font-size: var(--text-base); height: $pickerHeight; - border: 1px solid $blue; - border-radius: 5px; - padding: 6px 12px; - color: $blue; + border: 1px solid var(--color-accent-blue); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + color: var(--color-accent-blue); + transition: background-color var(--transition-fast), color var(--transition-fast); span { display: inline-block; @@ -33,28 +34,33 @@ $pickerHeight: 30px; svg { vertical-align: top; - margin-left: 10px; + margin-left: var(--space-2); + } + + &:hover { + background: var(--color-accent-blue-light); } } .open .chrome { position: relative; - background: white; + background: var(--color-bg-elevated); border-top: none; padding-top: 7px; - border-radius: 0 0 5px 5px; + border-radius: 0 0 var(--radius-md) var(--radius-md); } .calendar { position: absolute; - background: white; - border: 1px solid $blue; + background: var(--color-bg-elevated); + border: 1px solid var(--color-accent-blue); + box-shadow: var(--shadow-overlay); bottom: 29px; left: 0; width: 204px; height: 192px; - padding: 10px; - border-radius: 5px 5px 5px 0; + padding: var(--space-2); + border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0; } .right { @@ -66,6 +72,6 @@ $pickerHeight: 30px; .calendar { left: auto; right: 0; - border-radius: 5px 5px 0 5px; + border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md); } } diff --git a/src/components/ChromeDropdown/ChromeDropdown.scss b/src/components/ChromeDropdown/ChromeDropdown.scss index 0e94a195bd..2ba1402edc 100644 --- a/src/components/ChromeDropdown/ChromeDropdown.scss +++ b/src/components/ChromeDropdown/ChromeDropdown.scss @@ -6,24 +6,33 @@ * the root directory of this source tree. */ @import 'stylesheets/globals.scss'; - + .dropdown { display: inline-block; vertical-align: top; height: 30px; text-align: left; white-space: nowrap; - font-size: 14px; + font-size: var(--text-base); } .current, .menu { - background: $purple; - border-radius: 5px; - color: white; + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-secondary); + border-radius: var(--radius-md); + color: var(--color-text-primary); cursor: pointer; + transition: var(--transition-fast); &.blue { - background: $darkBlue; + background: var(--color-accent-blue); + border-color: var(--color-accent-blue); + color: var(--color-text-on-dark); + + &:hover { + background: var(--color-accent-blue-hover); + border-color: var(--color-accent-blue-hover); + } } } @@ -31,34 +40,43 @@ position: relative; height: 30px; line-height: 30px; - padding: 0 30px 0 10px; + padding: 0 30px 0 var(--space-3); div { overflow-x: hidden; text-overflow: ellipsis; } + &:hover { + border-color: var(--color-border-focus); + } + &:after { - @include arrow('down', 12px, 8px, rgba(255,255,255,0.3)); + @include arrow('down', 12px, 8px, var(--color-text-tertiary)); position: absolute; content: ''; top: 12px; - right: 10px; + right: var(--space-3); } } .menu { max-height: 360px; overflow-y: auto; - font-size: 14px; + font-size: var(--text-base); + box-shadow: var(--shadow-md); + padding: var(--space-1) 0; div { height: 30px; line-height: 30px; - padding: 0 10px; + padding: 0 var(--space-3); + border-radius: var(--radius-sm); + margin: 0 var(--space-1); + transition: var(--transition-fast); &:hover { - background: rgba(255, 255, 255, 0.1); + background: var(--color-interactive-hover); } } } diff --git a/src/components/CodeSnippet/CodeSnippet.css b/src/components/CodeSnippet/CodeSnippet.css index 780ecb0981..1e907b50f9 100644 --- a/src/components/CodeSnippet/CodeSnippet.css +++ b/src/components/CodeSnippet/CodeSnippet.css @@ -6,46 +6,29 @@ * the root directory of this source tree. */ /** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou + * Code snippet theme — uses CSS custom properties for theme support */ code[class*="language-"], pre[class*="language-"] { - color: #555572; - font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 13px; + color: var(--color-text-primary); + font-family: var(--font-mono); + font-size: var(--text-sm); direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; - line-height: 22px; - -moz-tab-size: 4; - -o-tab-size: 4; + line-height: 1.6; tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; hyphens: none; } -pre[class*="language-"]::-moz-selection, -pre[class*="language-"]::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"]::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, pre[class*="language-"]::selection, -code[class*="language-"]::selection, code[class*="language-"]::selection { text-shadow: none; - background: #b3d4fc; + background: var(--color-accent-blue-light); } @media print { @@ -55,37 +38,34 @@ code[class*="language-"]::selection { } } - /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: .5em 0; + padding: var(--space-4); + margin: 0; overflow: auto; + border-radius: var(--radius-md); } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #FDFAFB; + background: var(--color-bg-secondary); } - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; + padding: 2px 6px; + border-radius: var(--radius-sm); } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #a3a3c2; + color: var(--color-text-tertiary); } .token.punctuation { - color: #555572; + color: var(--color-text-secondary); } .namespace { @@ -99,7 +79,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #FF395E; + color: var(--color-accent-red); } .token.selector, @@ -108,7 +88,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #00D275; + color: var(--color-accent-green); } .token.operator, @@ -116,28 +96,28 @@ pre[class*="language-"] { .token.url, .language-css .token.string, .style .token.string { - color: #555572; + color: var(--color-text-secondary); } .token.atrule, .token.attr-value, .token.keyword { - color: #169CEE; + color: var(--color-accent-blue); } .token.function { - color: #FF395E; + color: var(--color-accent-red); } .token.regex, .token.important, .token.variable { - color: #F45530; + color: var(--color-accent-orange); } .token.important, .token.bold { - font-weight: bold; + font-weight: var(--font-weight-semibold); } .token.italic { @@ -153,13 +133,13 @@ pre.line-numbers { padding-left: 3.5em; counter-reset: linenumber; padding-top: 0px; - padding-bottom: 20px; + padding-bottom: var(--space-5); } pre.line-numbers:before { display: block; content: ''; - background: #66637A; + background: var(--color-bg-tertiary); height: 100%; width: 33px; position: absolute; @@ -178,12 +158,8 @@ pre.line-numbers > code { font-size: 100%; left: -3.8em; width: 3em; - /* works for line-numbers below 1000 lines */ padding-top: 10px; margin-bottom: 100px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -195,10 +171,10 @@ pre.line-numbers > code { .line-numbers-rows > span:before { content: counter(linenumber); - color: #343445; + color: var(--color-text-tertiary); display: block; - font-size: 10px; - font-family: 'Dosis'; + font-size: var(--text-xs); + font-family: var(--font-mono); padding-right: 0; text-align: center; } diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js index d4b0f5d70a..8a0c1cea2d 100644 --- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js +++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js @@ -29,7 +29,7 @@ export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible }) style={{ opacity: isDragging ? 0.5 : 1, cursor: isDragging ? 'grabbing' : null, - backgroundColor: isOver && canDrop ? '#208aec' : null, + backgroundColor: isOver && canDrop ? 'var(--color-accent-blue-light)' : null, }} onClick={() => onChangeVisible(!visible)} > @@ -38,14 +38,14 @@ export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible }) name={visible ? 'visibility' : 'visibility_off'} width={18} height={18} - fill={visible ? 'white' : 'rgba(0,0,0,0.4)'} + fill={visible ? 'var(--color-accent-blue)' : 'var(--color-text-tertiary)'} />
{name}
- +
) diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss index bd0bf9347b..ed3848dcc0 100644 --- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss +++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss @@ -1,8 +1,26 @@ +/* + * Copyright (c) 2016-present, Parse, LLC + * All rights reserved. + * + * This source code is licensed under the license found in the LICENSE file in + * the root directory of this source tree. + */ +@import 'stylesheets/globals.scss'; + .columnConfigItem { - padding: 8px 10px; + padding: var(--space-2) var(--space-2); display: flex; - border-radius: 5px; + border-radius: var(--radius-md); cursor: grab; + transition: background-color var(--transition-fast); + + &:hover { + background-color: var(--color-interactive-hover); + } + + &:active { + cursor: grabbing; + } } .icon { @@ -14,16 +32,22 @@ .visibilityIcon { cursor: pointer; width: 30px; + transition: opacity var(--transition-fast); + + &:hover { + opacity: 0.7; + } } .columnConfigItemName { text-overflow: ellipsis; overflow: hidden; line-height: 24px; + color: var(--color-text-primary); } .columnIcon { width: auto; flex-grow: 1; justify-content: end; -} \ No newline at end of file +} diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js index bf60423956..b3ce68deed 100644 --- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js +++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js @@ -150,9 +150,9 @@ export default class ColumnsConfiguration extends React.Component {
-
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss index c22e03aa48..5ddd592e3e 100644 --- a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss +++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss @@ -1,44 +1,65 @@ @import 'stylesheets/globals.scss'; .entry { - display: inline-block; - height: 14px; - padding: 0 8px; + display: inline-flex; + align-items: center; + padding: var(--space-1) var(--space-2); svg { - fill: #66637A; + fill: var(--color-text-on-dark-muted); } &:hover svg { - fill: white; + fill: var(--color-text-on-dark); } &.disabled { cursor: not-allowed; - color: #66637A; + color: rgba(255, 255, 255, 0.3); + opacity: 0.5; &:hover svg { - fill: #66637A; + fill: rgba(255, 255, 255, 0.3); } } } .title { - margin-top: -4px; - background: #797691; + background: rgba(255, 255, 255, 0.1); padding: 4px 8px; - border-radius: 5px 5px 0 0; + border-radius: var(--radius-md) var(--radius-md) 0 0; svg { - fill: white; + fill: var(--color-text-on-dark); + } +} + +// When title is inside the popover dropdown, use light-bg styling +.popover { + .title { + background: var(--color-bg-tertiary); + color: var(--color-text-primary); + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + font-weight: var(--font-weight-semibold); + + svg { + fill: var(--color-text-secondary); + } + + &:hover { + color: var(--color-text-primary); + background: var(--color-bg-tertiary); + } } } .entry, .title { - @include NotoSansFont; - font-size: 14px; - color: #ffffff; + @include UIFont; + font-size: var(--text-sm); + color: var(--color-text-on-dark-muted); cursor: pointer; + transition: background var(--transition-fast), color var(--transition-fast); svg { vertical-align: middle; @@ -49,23 +70,29 @@ vertical-align: middle; line-height: 14px; } + + &:hover { + color: var(--color-text-on-dark); + } } .objectPickerContent { .entry svg { - fill: rgba(0, 0, 0, 0.3); + fill: var(--color-text-tertiary); } } .body { - color: white; + color: var(--color-text-primary); position: absolute; top: 22px; right: 0; - border-radius: 5px 0 5px 5px; - background: #797691; + border-radius: var(--radius-lg); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-secondary); + box-shadow: var(--shadow-overlay); width: 320px; - font-size: 14px; + font-size: var(--text-sm); .columnConfigContainer { max-height: calc(100vh - 180px); @@ -75,10 +102,12 @@ } .footer { - background: rgba(0,0,0,0.2); - padding: 15px 20px; + background: var(--color-bg-tertiary); + padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; + border-top: 1px solid var(--color-border-secondary); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); > a { margin-right: 10px; diff --git a/src/components/ContextMenu/ContextMenu.scss b/src/components/ContextMenu/ContextMenu.scss index 08538004c6..a43ddf0a54 100644 --- a/src/components/ContextMenu/ContextMenu.scss +++ b/src/components/ContextMenu/ContextMenu.scss @@ -1,43 +1,57 @@ +/* + * Copyright (c) 2016-present, Parse, LLC + * All rights reserved. + * + * This source code is licensed under the license found in the LICENSE file in + * the root directory of this source tree. + */ @import 'stylesheets/globals.scss'; .menu { position: absolute; - font-size: 14px; + font-size: var(--text-sm); ul { - background: $purple; - @include animation('fade-in .2s linear'); + background: var(--color-bg-elevated); + @include animation('fade-in .15s ease-out'); opacity: 0; - border: 1px solid rgba(255, 255, 255, 0.15); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + border: 1px solid var(--color-border-secondary); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-overlay); + padding: var(--space-1) 0; + min-width: 180px; } li { - height: 30px; - line-height: 30px; - color: $white; + height: 32px; + line-height: 32px; + color: var(--color-text-primary); cursor: pointer; white-space: nowrap; - padding: 0 30px 0 10px; + padding: 0 var(--space-6) 0 var(--space-3); + transition: background var(--transition-fast), color var(--transition-fast); + border-radius: 0; + span { - color: #A2A6B1 + color: var(--color-text-tertiary); + font-size: var(--text-xs); } } li:hover { - background: rgba(255, 255, 255, 0.1); + background: var(--color-interactive-hover); } .separator { height: 1px; padding: 0; - margin: 5px 10px; - background: rgba(255, 255, 255, 0.2); + margin: var(--space-1) var(--space-2); + background: var(--color-border-secondary); cursor: default; pointer-events: none; &:hover { - background: rgba(255, 255, 255, 0.2); + background: var(--color-border-secondary); } } @@ -48,12 +62,15 @@ .item { width: 100%; + position: relative; + &:after { - @include arrow('right', 12px, 8px, rgba(255,255,255,0.3)); + content: '\203A'; position: absolute; - content: ''; - margin-top: 10px; - right: 10px; + right: var(--space-3); + top: 0; + color: var(--color-text-tertiary); + font-size: var(--text-lg); } } @@ -61,17 +78,14 @@ left: 100%; position: absolute; } - } } @include keyframes(fade-in) { 0% { - // @include transform(scale(0.9)); opacity: 0; } 100% { - // @include transform(scale(1)); opacity: 1; } } diff --git a/src/components/CreditCardInput/CreditCardInput.scss b/src/components/CreditCardInput/CreditCardInput.scss index 590bdce1df..e3a78c014c 100644 --- a/src/components/CreditCardInput/CreditCardInput.scss +++ b/src/components/CreditCardInput/CreditCardInput.scss @@ -8,19 +8,22 @@ @import 'stylesheets/globals.scss'; .input { - @include NotoSansFont; + @include UIFont; border: 0; outline: 0; - background: $inputBackgroundColor; - font-size: 16px; + background: var(--color-bg-secondary); + font-size: var(--text-lg); width: 100%; height: 80px; - padding: 6px; + padding: var(--space-2); text-align: center; vertical-align: top; resize: none; + transition: background var(--transition-fast); &:focus { + background: var(--color-bg-tertiary); + @include placeholder { opacity: 0; } diff --git a/src/components/DataBrowserHeader/DataBrowserHeader.scss b/src/components/DataBrowserHeader/DataBrowserHeader.scss index 4f1b78cd96..eca29889e8 100644 --- a/src/components/DataBrowserHeader/DataBrowserHeader.scss +++ b/src/components/DataBrowserHeader/DataBrowserHeader.scss @@ -8,22 +8,31 @@ @import 'stylesheets/globals.scss'; .header { - @include MonospaceFont; + @include UIFont; position: relative; display: block; white-space: nowrap; overflow: hidden; height: 30px; - padding: 4px 6px 4px 2px; - border-left: 4px solid transparent; + padding: 4px 6px 4px 6px; + border-right: 1px solid var(--data-header-border-color); + background: var(--data-header-bg); + transition: background var(--transition-fast); + + &:hover { + background: var(--data-header-hover-bg); + } } .name { - color: white; - font-size: 12px; + color: var(--data-header-color); + font-size: var(--data-header-size); + font-weight: var(--font-weight-semibold); + text-transform: var(--data-header-transform); + letter-spacing: var(--data-header-tracking); height: 22px; line-height: 22px; - margin-right: 8px; + margin-right: 6px; float: left; max-width: 100%; overflow: hidden; @@ -31,8 +40,9 @@ } .type { - color: #A2A6B1; + color: var(--data-header-type-color); font-size: 10px; + font-weight: var(--font-weight-normal); height: 22px; line-height: 22px; overflow: hidden; @@ -43,7 +53,7 @@ padding-right: 20px; &:after { - @include arrow('up', 12px, 8px, #A2A6B1); + @include arrow('up', 12px, 8px, var(--color-accent-blue)); content: ''; position: absolute; top: 11px; @@ -55,7 +65,7 @@ padding-right: 20px; &:after { - @include arrow('down', 12px, 8px, #A2A6B1); + @include arrow('down', 12px, 8px, var(--color-accent-blue)); content: ''; position: absolute; top: 11px; @@ -64,9 +74,9 @@ } .over { - border-left-color: $white; + border-left-color: var(--color-accent-blue); } .dragging { - background: $blue; + background: var(--color-accent-blue-light); } diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js index 8117c6933b..148bf68d46 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js @@ -97,11 +97,7 @@ export default class DataBrowserHeaderBar extends React.Component { wrapStyle.left = stickyLefts[i]; wrapStyle.zIndex = 11; } - if (i % 2) { - wrapStyle.background = '#726F85'; - } else { - wrapStyle.background = '#66637A'; - } + wrapStyle.background = 'var(--color-bg-tertiary)'; let onClick = null; if ( !preventSort && @@ -151,16 +147,9 @@ export default class DataBrowserHeaderBar extends React.Component { }); if (onAddColumn) { - const finalStyle = {}; - if (headers.length % 2) { - finalStyle.background = '#726F85'; - } else { - finalStyle.background = '#66637A'; - } - elements.push( readonly || preventSchemaEdits ? null : ( -
+
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss index c23d8ccbd4..8b90fa983d 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss @@ -12,10 +12,9 @@ z-index: 10; top: 0; left: 0; - height: 0; - background: #66637a; + height: 30px; + background: var(--data-header-bg); white-space: nowrap; - display: block; min-width: 100%; width: max-content; } @@ -31,21 +30,30 @@ display: inline-block; height: 30px; vertical-align: top; - padding: 0 25px; + padding: 0 16px; + background: var(--data-header-bg); } .addColumnButton { - @include buttonReset($bg: #343445); + @include buttonReset($bg: var(--data-add-col-bg)); + @include UIFont; display: inline-block; height: 20px; - width: 130px; - text-align: center; + padding: 0 12px; line-height: 20px; margin-top: 5px; - color: white; - border-radius: 5px; - vertical-align: top; + color: var(--data-add-col-color); + border: var(--data-add-col-border); + border-radius: var(--radius-md); font-size: 12px; + font-weight: var(--font-weight-medium); + vertical-align: top; + white-space: nowrap; + transition: opacity var(--transition-fast); + + &:hover { + opacity: 0.85; + } } .check { @@ -54,7 +62,8 @@ vertical-align: top; text-align: center; width: 30px; - background: rgb(114, 111, 133); + background: var(--data-check-bg); + border-right: 1px solid var(--data-header-border-color); } .rowNumber { @@ -62,11 +71,12 @@ height: 30px; vertical-align: top; text-align: center; - background: rgb(114, 111, 133); - color: #A2A6B1; + background: var(--data-header-bg); + color: var(--data-header-type-color); font-size: 12px; padding: 0 4px; box-sizing: border-box; + border-right: 1px solid var(--data-header-border-color); } .handle { @@ -77,11 +87,11 @@ height: 30px; z-index: 2; cursor: col-resize; - background: rgba(255, 255, 255, 0); + background: rgba(0, 0, 0, 0); transition: background 0.15s ease; &:hover { - background: rgba(255, 255, 255, 0.15); + background: var(--color-accent-blue-light); } } @@ -112,8 +122,8 @@ } .skeletonRow { - border-top: 1px solid #e3e3ea; - border-bottom: 1px solid #e3e3ea; + border-top: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--color-border-primary); height: 30px; width: 100%; vertical-align: middle; @@ -125,9 +135,9 @@ @keyframes skeleton-loading { 0% { - background-color: #ffffff; + background-color: var(--color-bg-primary); } 100% { - background-color: #e3e3ea; + background-color: var(--color-border-primary); } } diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index 6ea06810d8..c68db88ade 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -12,16 +12,18 @@ height: 80px; line-height: 80px; text-align: center; - background: $inputBackgroundColor; + background: var(--color-bg-secondary); } .placeholder { - color: $secondaryTextColor; + color: var(--color-text-secondary); } .picker { - border: 1px solid $blue; - background: white; + border: 1px solid var(--color-accent-blue); + border-radius: var(--radius-md); + background: var(--color-bg-elevated); + box-shadow: var(--shadow-sm); > * { margin: 10% auto 4% auto; @@ -29,5 +31,5 @@ } .value { - color: $blue; -} \ No newline at end of file + color: var(--color-accent-blue); +} diff --git a/src/components/DateRange/DateRange.react.js b/src/components/DateRange/DateRange.react.js index c6439aa3bb..4559a07c25 100644 --- a/src/components/DateRange/DateRange.react.js +++ b/src/components/DateRange/DateRange.react.js @@ -106,7 +106,7 @@ export default class DateRange extends React.Component {
{this.rangeString()} - +
@@ -115,7 +115,7 @@ export default class DateRange extends React.Component { content = (
{this.rangeString()} - +
); } diff --git a/src/components/DateRange/DateRange.scss b/src/components/DateRange/DateRange.scss index f51cc0562a..6bbe3a2015 100644 --- a/src/components/DateRange/DateRange.scss +++ b/src/components/DateRange/DateRange.scss @@ -19,12 +19,18 @@ $dateRangeHeight: 30px; display: inline-block; white-space: nowrap; cursor: pointer; - font-size: 14px; + font-size: var(--text-base); height: $dateRangeHeight; - border: 1px solid $blue; - border-radius: 5px; - padding: 6px 12px; - color: $blue; + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + color: var(--color-accent-blue); + background: var(--color-bg-primary); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); + + &:hover { + border-color: var(--color-border-focus); + } span { display: inline-block; @@ -33,35 +39,36 @@ $dateRangeHeight: 30px; svg { vertical-align: top; - margin-left: 10px; + margin-left: var(--space-3); } } .open .range { position: relative; - background: white; + background: var(--color-bg-elevated); border-top: none; padding-top: 7px; - border-radius: 0 0 5px 5px; + border-radius: 0 0 var(--radius-md) var(--radius-md); } .calendars { position: absolute; - background: white; - border: 1px solid $blue; + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); bottom: 29px; left: 0; width: 406px; height: 192px; - padding: 10px; - border-radius: 5px 5px 5px 0; + padding: var(--space-3); + border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0; + box-shadow: var(--shadow-lg); > * { display: inline-block; vertical-align: top; &:first-child { - margin-right: 20px; + margin-right: var(--space-5); } } } @@ -75,6 +82,6 @@ $dateRangeHeight: 30px; .calendars { left: auto; right: 0; - border-radius: 5px 5px 0 5px; + border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md); } } diff --git a/src/components/DateTimeEditor/DateTimeEditor.scss b/src/components/DateTimeEditor/DateTimeEditor.scss index 86033493f5..ed6ec57cfa 100644 --- a/src/components/DateTimeEditor/DateTimeEditor.scss +++ b/src/components/DateTimeEditor/DateTimeEditor.scss @@ -8,7 +8,7 @@ @import 'stylesheets/globals.scss'; .editor { - box-shadow: 0 1px 4px rgba(0,0,0,0.4); + box-shadow: var(--shadow-md); > input { @include MonospaceFont; @@ -16,7 +16,14 @@ height: 30px; border: none; outline: none; - padding: 0 4px; - font-size: 12px; + padding: 0 var(--space-1); + font-size: var(--text-xs); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + transition: background var(--transition-fast); + + &:focus { + background: var(--color-bg-primary); + } } } diff --git a/src/components/DateTimeInput/DateTimeInput.scss b/src/components/DateTimeInput/DateTimeInput.scss index 3e1e8c55ce..470abe0831 100644 --- a/src/components/DateTimeInput/DateTimeInput.scss +++ b/src/components/DateTimeInput/DateTimeInput.scss @@ -7,14 +7,29 @@ */ @import 'stylesheets/globals.scss'; +// Modern: compact, left-aligned .input { width: 100%; - height: 80px; - line-height: 80px; - text-align: center; - background: $inputBackgroundColor; + min-height: 36px; + line-height: 36px; + text-align: left; + background: transparent; } .placeholder { - color: $secondaryTextColor; + color: var(--color-text-tertiary); +} + +// Classic: tall, centered, gray bg +:global([data-theme="classic"]) { + .input { + height: 80px; + line-height: 80px; + text-align: center; + background: var(--color-bg-secondary); + } + + .placeholder { + color: var(--color-text-secondary); + } } diff --git a/src/components/DateTimePicker/DateTimePicker.scss b/src/components/DateTimePicker/DateTimePicker.scss index a6ebf54b64..9546039706 100644 --- a/src/components/DateTimePicker/DateTimePicker.scss +++ b/src/components/DateTimePicker/DateTimePicker.scss @@ -8,8 +8,10 @@ @import 'stylesheets/globals.scss'; .picker { - border: 1px solid $blue; - background: white; + border: 1px solid var(--color-border-primary); + background: var(--color-bg-elevated); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); > *:first-child { margin: 10% auto 4% auto; @@ -17,30 +19,37 @@ } .value { - color: $lightBlue; + color: var(--color-text-secondary); strong { - color: $blue; + color: var(--color-accent-blue); } } .time { margin: 0; - padding: 12px; - color: $blue; - border-top: 1px solid $borderGrey; + padding: var(--space-3); + color: var(--color-accent-blue); + border-top: 1px solid var(--color-border-secondary); text-align: right; input { display: inline-block; width: 40px; height: 30px; - border: 1px solid $blue; - color: $blue; - border-radius: 5px; + border: 1px solid var(--color-border-primary); + color: var(--color-text-primary); + border-radius: var(--radius-md); outline: none; text-align: center; - font-size: 12px; + font-size: var(--text-xs); padding: 0; + background: var(--color-bg-primary); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); + + &:focus { + border-color: var(--color-border-focus); + box-shadow: 0 0 0 2px var(--color-accent-blue-light); + } } -} \ No newline at end of file +} diff --git a/src/components/DonutChart/DonutChart.scss b/src/components/DonutChart/DonutChart.scss index b63a361870..2a4303de03 100644 --- a/src/components/DonutChart/DonutChart.scss +++ b/src/components/DonutChart/DonutChart.scss @@ -8,18 +8,16 @@ @import 'stylesheets/globals.scss'; .donutCenter { - fill: $pushDetailsHeaderBackground; + fill: var(--color-bg-secondary); } .path { - -webkit-transform: scale(1.0); transform: scale(1.0); - transition: all 0.3s; + transition: transform var(--transition-fast); &:hover { - -webkit-transform: scale(1.1); transform: scale(1.1); - transition: all 0.3s; + transition: transform var(--transition-fast); } &:first-of-type { @@ -61,16 +59,16 @@ .donutValue { opacity: 0; - transition: opacity 0.2s ease; - @include DosisFont; + transition: opacity var(--transition-fast); + @include HeadingFont; font-size: 22px; - font-weight: 500; + font-weight: var(--font-weight-medium); &:first-of-type { opacity: 1; } } -.donutLabel{ +.donutLabel { opacity: 0.5; - font-weight: 500; + font-weight: var(--font-weight-medium); } diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 369990f4ac..e7056ed840 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -7,13 +7,15 @@ */ @import 'stylesheets/globals.scss'; +// Modern: compact select trigger, no outer chrome .dropdown { position: relative; - background: $inputBackgroundColor; - font-size: 16px; - height: 80px; + background: transparent; + font-size: var(--text-base); width: 100%; - overflow: hidden; + overflow: visible; + display: flex; + align-items: center; } .dropdown, .menu { @@ -24,10 +26,13 @@ .menu { max-height: 215px; - border: 1px solid $blue; - background: white; + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-lg); + background: var(--color-bg-elevated); + box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: none; + padding: var(--space-1) 0; button { @include buttonReset; @@ -36,11 +41,14 @@ } .option { - color: $blue; - border-bottom: 1px solid $borderGrey; + color: var(--color-text-primary); + border-bottom: none; + transition: background var(--transition-fast); + line-height: 36px; + padding: 0 var(--space-3); &:hover { - background: rgba(0,0,0,0.1); + background: var(--color-interactive-hover); } } @@ -50,44 +58,86 @@ } .current { - text-align: center; - height: 80px; + text-align: left; + height: auto; + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + min-height: 36px; + width: 100%; + transition: border-color var(--transition-fast); + + &:hover { + border-color: var(--color-border-focus); + } &:not(.hideArrow){ + padding-right: 32px; + &:after { - @include arrow('down', 12px, 8px, rgba(0,0,0,0.3)); + @include arrow('down', 10px, 6px, $grey); position: absolute; content: ''; - top: 36px; - right: 20px; + right: 12px; + top: 50%; + margin-top: -3px; } } .option, .placeHolder { - height: 80px; - line-height: 80px; + height: 36px; + line-height: 36px; + color: var(--color-text-primary); + font-weight: var(--font-weight-medium); + font-size: var(--text-sm); } .placeHolder { - color: $secondaryTextColor + color: var(--color-text-tertiary); + font-weight: normal; } } .option { - line-height: 50px; - padding: 0 14px 0 14px; + line-height: 40px; + padding: 0 var(--space-4); overflow: hidden; text-overflow: ellipsis; + font-size: var(--text-sm); } .disabled { cursor: default; - .current:after { - display: none; + .current { + background: var(--color-bg-secondary); + border-color: var(--color-border-secondary); + + &:after { + display: none; + } } .option { - padding: 0 14px; + padding: 0 var(--space-4); + color: var(--color-text-tertiary); + } +} + +// Classic: centered dropdown in 80px row +:global([data-theme="classic"]) { + .dropdown { + height: 80px; + justify-content: center; + overflow: hidden; + } + + .current { + text-align: center; + width: auto; } } diff --git a/src/components/EmptyState/EmptyState.react.js b/src/components/EmptyState/EmptyState.react.js index b2178388db..b58634a9b5 100644 --- a/src/components/EmptyState/EmptyState.react.js +++ b/src/components/EmptyState/EmptyState.react.js @@ -49,14 +49,17 @@ const EmptyState = ({ return (
-
- -
+ {icon && ( +
+ +
+ )}
{title}
-
{description}
- {ctaButton(cta, action)} - {secondaryCta && ' '} - {ctaButton(secondaryCta, secondaryAction)} + {description &&
{description}
} +
+ {ctaButton(cta, action)} + {ctaButton(secondaryCta, secondaryAction)} +
{customContent &&
{customContent}
}
diff --git a/src/components/EmptyState/EmptyState.scss b/src/components/EmptyState/EmptyState.scss index 122a52213c..084a57c8de 100644 --- a/src/components/EmptyState/EmptyState.scss +++ b/src/components/EmptyState/EmptyState.scss @@ -12,7 +12,7 @@ flex-direction: column; align-items: center; text-align: center; - gap: 32px; + gap: var(--space-6); } .content { @@ -20,7 +20,8 @@ flex-direction: column; align-items: center; text-align: center; - max-width: 600px; + max-width: 360px; + padding: var(--space-10) var(--space-6); } .customContent { @@ -29,27 +30,37 @@ } .title { - font-size: 46px; - font-weight: 100; - line-height: 55px; - white-space: nowrap; - margin-bottom: 45px; + @include UIFont; + font-size: var(--text-base); + font-weight: var(--font-weight-medium); + color: var(--color-text-primary); + line-height: 1.4; + margin-bottom: var(--space-1); } .description { - @include DosisFont; - font-size: 16px; - letter-spacing: 0.72px; - line-height: 17px; - margin-bottom: 12px; + @include UIFont; + font-size: var(--text-sm); + color: var(--color-text-tertiary); + line-height: 1.5; + margin-bottom: var(--space-4); } .icon { - width: 170px; - height: 170px; - margin: 0 auto 24px auto; - border-radius: 100%; - background: #f3f0f2; - text-align: center; - padding-top: 45px; + width: 48px; + height: 48px; + margin: 0 auto var(--space-4) auto; + border-radius: var(--radius-lg); + background: var(--color-bg-secondary); + color: var(--color-text-tertiary); + display: flex; + align-items: center; + justify-content: center; +} + +.actions { + display: flex; + gap: var(--space-2); + flex-wrap: wrap; + justify-content: center; } diff --git a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss index cf6c870e8f..d983de2439 100644 --- a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss +++ b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss @@ -23,20 +23,25 @@ display: inline-block; height: 20px; width: 20px; - padding: 3px; - border-radius: 4px; + padding: var(--space-1); + border-radius: var(--radius-md); vertical-align: middle; cursor: pointer; + transition: background var(--transition-fast); svg { vertical-align: top; } + + &:hover { + background: var(--color-interactive-hover); + } } .rightArrow { - @include arrow('down', 12px, 8px, $greyArrowColor); + @include arrow('down', 12px, 8px, var(--color-text-secondary)); position: absolute; - right: 0px; + right: 0; cursor: pointer; } @@ -46,6 +51,8 @@ max-width: 200px; left: 30px; top: 8px; + color: var(--color-text-primary); + font-size: var(--text-sm); } .composerContainer { @@ -54,7 +61,7 @@ } .callout { - @include arrow('up', 20px, 10px, $explorerQueryBackgroundColor); + @include arrow('up', 20px, 10px, var(--color-accent-blue)); width: 20px; height: 10px; } @@ -65,11 +72,10 @@ .button { margin-left: auto; - margin-right: 0px; + margin-right: 0; } .callout { margin-left: auto; } } - diff --git a/src/components/ExplorerMenuButton/ExplorerMenuButton.scss b/src/components/ExplorerMenuButton/ExplorerMenuButton.scss index f7b1ac73f1..465542a420 100644 --- a/src/components/ExplorerMenuButton/ExplorerMenuButton.scss +++ b/src/components/ExplorerMenuButton/ExplorerMenuButton.scss @@ -22,16 +22,25 @@ display: inline-block; height: 30px; width: 111px; - border: 1px solid $mainTextColor; - border-radius: 5px; + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); line-height: 30px; text-align: center; - padding: 0 16px; + padding: 0 var(--space-4); cursor: pointer; + color: var(--color-text-primary); + background: var(--color-bg-primary); + font-size: var(--text-sm); + transition: background var(--transition-fast), border-color var(--transition-fast); + + &:hover { + background: var(--color-interactive-hover); + border-color: var(--color-accent-blue); + } } .callout { - @include arrow('up', 20px, 10px, $explorerQueryBackgroundColor); + @include arrow('up', 20px, 10px, var(--color-accent-blue)); width: 20px; height: 10px; } @@ -43,11 +52,10 @@ .button { display: block; margin-left: auto; - margin-right: 0px; + margin-right: 0; } .callout { margin-left: auto; } } - diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss index 9f72899e2c..0ae7ca33e9 100644 --- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss +++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss @@ -8,24 +8,24 @@ @import 'stylesheets/globals.scss'; $labelWidth: 100px; -$placeholderColor: rgba(255, 255, 255, 0.5); +$placeholderColor: var(--color-text-on-dark-muted); .queryComposer { - background-color: $explorerQueryBackgroundColor; - border: 1px solid $explorerQueryBackgroundColor; - border-radius: 5px; - color: white; + background-color: var(--color-accent-blue); + border: 1px solid var(--color-accent-blue); + border-radius: var(--radius-md); + color: var(--color-text-on-dark); .queryComposerBox { - border: 1px solid $explorerQueryBackgroundColor; + border: 1px solid var(--color-accent-blue); width: 100%; - padding: 10px 0; + padding: var(--space-3) 0; position: relative; - background-color: $blue; + background-color: var(--color-accent-blue); .queryComposerLabel { height: 100%; - background-color: $blue; + background-color: var(--color-accent-blue); } } @@ -35,7 +35,7 @@ $placeholderColor: rgba(255, 255, 255, 0.5); } .footer { - padding-top: 15px; + padding-top: var(--space-4); height: 60px; position: relative; } @@ -44,7 +44,7 @@ $placeholderColor: rgba(255, 255, 255, 0.5); .headerView { display: table; width: 95%; - padding-top: 10px; + padding-top: var(--space-3); .headerLabel { display: table-cell; @@ -53,9 +53,9 @@ $placeholderColor: rgba(255, 255, 255, 0.5); &.textInput { background: none; - border: none; + border: none; font-size: 1.3em; - color: white; + color: var(--color-text-on-dark); @include placeholder { color: $placeholderColor; @@ -66,12 +66,17 @@ $placeholderColor: rgba(255, 255, 255, 0.5); .headerButtonCell { display: table-cell; width: 40px; - padding-left: 30px; + padding-left: var(--space-7); } .headerButton { @include buttonReset; - color: white; + color: var(--color-text-on-dark); + transition: opacity var(--transition-fast); + + &:hover { + opacity: 0.8; + } &.secondaryColor { color: $placeholderColor; @@ -93,7 +98,7 @@ $placeholderColor: rgba(255, 255, 255, 0.5); .filterInputStyle { width: 47%; - margin-left: 2% + margin-left: 2%; } .halfBox { @@ -112,14 +117,19 @@ $placeholderColor: rgba(255, 255, 255, 0.5); display: table-cell; vertical-align: middle; width: 24px; - padding-left: 10px; + padding-left: var(--space-3); } .del { @include buttonReset; - color: #d8d8d8; + color: var(--color-text-on-dark-muted); font-size: 18px; line-height: 18px; + transition: color var(--transition-fast); + + &:hover { + color: var(--color-text-on-dark); + } } .twoButton { @@ -146,16 +156,16 @@ $placeholderColor: rgba(255, 255, 255, 0.5); .formLabel { text-align: left; - color: #fdfafb; + color: var(--color-bg-primary); } .formInput, .formInput > input { text-align: left; - color: white; - background-color: $darkBlue; + color: var(--color-text-on-dark); + background-color: var(--color-explorer-input-bg, #0e69a1); height: 30px; border-color: transparent; - border-radius: 5px; - padding: 0 30px 0 10px; + border-radius: var(--radius-md); + padding: 0 var(--space-7) 0 var(--space-3); overflow: hidden; } diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss index d546a85b6c..c8b02aa972 100644 --- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss +++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss @@ -8,29 +8,33 @@ @import 'stylesheets/globals.scss'; .queryPicker { - background-color: $explorerQueryBackgroundColor; - border: 1px solid $explorerQueryBackgroundColor; - border-radius: 5px; - - color: white; + background-color: var(--color-accent-blue); + border: 1px solid var(--color-accent-blue); + border-radius: var(--radius-md); + color: var(--color-text-on-dark); .queryContainer { - background-color: white; - color: black; + background-color: var(--color-bg-elevated); + color: var(--color-text-primary); .queryGroup { - padding: 15px 0px 15px 15px; - border: 1px solid #efefef; + padding: var(--space-4) 0 var(--space-4) var(--space-4); + border: 1px solid var(--color-border-secondary); } .queryItem { - padding-top: 8px; - padding-bottom: 8px; + padding-top: var(--space-2); + padding-bottom: var(--space-2); } .queryLabel { @include buttonReset; - color: $mainTextColor; + color: var(--color-text-primary); + transition: color var(--transition-fast); + + &:hover { + color: var(--color-accent-blue); + } } } @@ -38,13 +42,18 @@ @include buttonReset; position: absolute; right: 24px; - color: #d8d8d8; + color: var(--color-text-tertiary); font-size: 18px; line-height: 18px; + transition: color var(--transition-fast); + + &:hover { + color: var(--color-accent-red); + } } .header { - padding: 15px; + padding: var(--space-4); height: 60px; position: relative; } diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss index fca7c94b64..b81308b530 100644 --- a/src/components/Field/Field.scss +++ b/src/components/Field/Field.scss @@ -7,55 +7,133 @@ */ @import 'stylesheets/globals.scss'; +// ============================================================================= +// Modern layout (light / dark) — stacked label-above-input like shadcn +// ============================================================================= + .field { position: relative; - border-style: solid; - border-color: $borderGrey; - border-width: 1px 1px 0 1px; - min-height: 80px; - background: white; + border: none; + background: transparent; display: flex; - - &:last-of-type { - border-bottom-width: 1px; - } + flex-direction: column; + min-height: auto; + padding: 0; + gap: 6px; > pre[class*="language-"] { - border-radius: 5px; + border-radius: var(--radius-md); } } .left { display: flex; - align-items: center; + align-items: flex-start; flex-shrink: 0; - width: calc(var(--modal-min-width, 540px) * var(--modal-label-ratio, 0.5)); - max-width: calc(var(--modal-min-width, 540px) * var(--modal-label-ratio, 0.5)); + width: 100%; + max-width: 100%; + padding: 0; } .right { - --modal-row-min-height: 80px; position: relative; - min-height: var(--modal-row-min-height); - text-align: right; + text-align: left; padding: 0; - background: #f6fafb; + background: transparent; display: flex; - justify-content: center; align-items: center; flex: 1; + width: 100%; + min-height: 36px; } - .header { min-height: 56px; height: 56px; + flex-direction: row; + padding: 0; + border-bottom: 1px solid var(--color-border-secondary); .right { min-height: 56px; } & ~ .field { - background: #f5f5f7; + background: transparent; + } +} + +// ============================================================================= +// Classic layout — side-by-side label | input (original Parse Dashboard look) +// ============================================================================= + +:global([data-theme="classic"]) { + .field { + flex-direction: row; + min-height: 80px; + padding: 0; + gap: 0; + background: var(--color-bg-primary); + border-style: solid; + border-color: var(--color-border-secondary); + border-width: 1px 0 0 0; + + &:first-of-type { + border-top: none; + } + } + + .left { + display: flex; + align-items: center; + flex-shrink: 0; + width: calc(var(--modal-min-width, 540px) * var(--modal-label-ratio, 0.5)); + max-width: calc(var(--modal-min-width, 540px) * var(--modal-label-ratio, 0.5)); + padding: var(--space-3) var(--space-4); + } + + .right { + --modal-row-min-height: 80px; + min-height: var(--modal-row-min-height); + text-align: right; + justify-content: center; + background: var(--color-bg-primary); + width: auto; + } +} + +// ============================================================================= +// Responsive — stacks on mobile for all themes +// ============================================================================= + +@media (max-width: $bp-md - 1) { + .field { + flex-direction: column; + min-height: auto; + padding: 0; + gap: 6px; + } + + .left { + width: 100%; + max-width: 100%; + padding: 0; + flex-shrink: 1; + } + + .right { + text-align: left; + width: 100%; + min-height: 36px; + padding: 0; + } + + .header { + height: auto; + min-height: auto; + + .right { + min-height: auto; + } } } diff --git a/src/components/Fieldset/Fieldset.scss b/src/components/Fieldset/Fieldset.scss index ec322d4f90..0573ceca99 100644 --- a/src/components/Fieldset/Fieldset.scss +++ b/src/components/Fieldset/Fieldset.scss @@ -7,40 +7,86 @@ */ @import 'stylesheets/globals.scss'; +// ============================================================================= +// Modern (light / dark) — clean open form, no boxing +// ============================================================================= + .fieldset { - margin: 40px 0; + margin: var(--space-8) 0; } .legend { - text-align: center; - font-size: 22px; - line-height: 26px; - font-weight: 700; - color: $blue; - margin-bottom: 4px; + @include UIFont; + text-align: left; + font-size: var(--text-lg); + line-height: 1.4; + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-1); } .description { - @include DosisFont; - text-align: center; - font-size: 14px; - line-height: 16px; - color: $mainTextColor; - width: 500px; - margin: 0 auto 16px auto; + @include UIFont; + text-align: left; + font-size: var(--text-sm); + line-height: 1.5; + color: var(--color-text-secondary); + max-width: 500px; + margin: 0 0 var(--space-6) 0; } .fields { - width: 650px; - margin: 0 auto; + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + gap: var(--space-6); + + // No borders, no card — just clean stacked fields + & > div { + border: none; + } +} + +// ============================================================================= +// Classic — centered legend, bordered card, original look +// ============================================================================= - & > div:first-of-type { - border-top-left-radius: 5px; - border-top-right-radius: 5px; +:global([data-theme="classic"]) { + .fieldset { + margin: var(--space-10) 0; } - & > div:last-of-type { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + .legend { + text-align: center; + font-size: 20px; + line-height: 26px; + } + + .description { + text-align: center; + width: 500px; + max-width: none; + margin: 0 auto var(--space-5) auto; + } + + .fields { + width: 650px; + margin: 0 auto; + display: block; + gap: 0; + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-lg); + overflow: hidden; + background: var(--color-bg-primary); + box-shadow: var(--shadow-sm); + + & > div:first-of-type { + border-top: none; + } + + & > div { + border-top: 1px solid var(--color-border-secondary); + } } } diff --git a/src/components/FileEditor/FileEditor.scss b/src/components/FileEditor/FileEditor.scss index 5a2faf2c3b..c2d199e288 100644 --- a/src/components/FileEditor/FileEditor.scss +++ b/src/components/FileEditor/FileEditor.scss @@ -8,33 +8,42 @@ @import 'stylesheets/globals.scss'; .editor { - background: white; + background: var(--color-bg-elevated); white-space: nowrap; - box-shadow: 0 1px 4px rgba(0,0,0,0.4); - padding: 6px; + box-shadow: var(--shadow-overlay); + padding: var(--space-2); } .delete, .upload, .download { - @include DosisFont; + @include HeadingFont; display: block; cursor: pointer; - color: white; + color: var(--color-text-on-dark); height: 20px; line-height: 20px; - font-size: 14px; + font-size: var(--text-base); text-align: center; - border-radius: 5px; + border-radius: var(--radius-md); + transition: background var(--transition-fast), opacity var(--transition-fast); + + &:hover { + opacity: 0.9; + } } .delete { - background: $red; + background: var(--color-accent-red); } .upload, .download { position: relative; overflow: hidden; - background: $blue; - margin-bottom: 6px; + background: var(--color-accent-blue); + margin-bottom: var(--space-2); + + &:hover { + background: var(--color-accent-blue-hover); + } input { position: absolute; diff --git a/src/components/FileInput/FileInput.scss b/src/components/FileInput/FileInput.scss index 76984eb8e9..3e2ccbe239 100644 --- a/src/components/FileInput/FileInput.scss +++ b/src/components/FileInput/FileInput.scss @@ -11,7 +11,7 @@ width: 100%; height: 80px; padding: 0 10%; - background: $inputBackgroundColor; + background: var(--color-bg-secondary); text-align: center; overflow: hidden; white-space: nowrap; @@ -20,18 +20,21 @@ .button { position: relative; display: inline-block; - height: 30px; - margin-top: 25px; + height: 32px; + margin-top: 24px; padding: 0 16px; - border: 1px solid $blue; - border-radius: 5px; + background: var(--btn-bg); + border: var(--btn-border); + border-radius: var(--btn-radius); overflow: hidden; - color: $blue; - transition: background 0.5s, color 0.5s; + color: var(--btn-color); + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + transition: background var(--transition-fast), color var(--transition-fast); &:hover { - background: $blue; - color: white; + background: var(--btn-hover-bg); + color: var(--btn-hover-color); } input { @@ -45,7 +48,7 @@ } > span { - line-height: 30px; + line-height: 32px; } } @@ -53,7 +56,7 @@ display: inline-block; width: 20px; height: 20px; - border: .15em solid $blue; + border: .15em solid var(--color-accent-blue); vertical-align: bottom; border-right-color: transparent; border-radius: 50%; @@ -61,10 +64,10 @@ } .disabled, .disabled:hover { - background: #e0e0ea; - border-color: #e0e0ea; - color: white; - + background: var(--color-bg-tertiary); + border-color: transparent; + color: var(--color-text-tertiary); + input { cursor: default; } @@ -77,19 +80,19 @@ .label { display: block; - line-height: 30px; - color: $mainTextColor; - margin-top: 25px; + line-height: 32px; + color: var(--color-text-primary); + margin-top: 24px; overflow: hidden; text-overflow: ellipsis; } a.label { - color: $blue; + color: var(--color-accent-blue); } @include keyframes(spinner-border) { 100% { @include transform(rotate(360deg)); } -} \ No newline at end of file +} diff --git a/src/components/FileTree/FileTree.react.js b/src/components/FileTree/FileTree.react.js index fbfe0970c5..e5c21bd2cc 100644 --- a/src/components/FileTree/FileTree.react.js +++ b/src/components/FileTree/FileTree.react.js @@ -39,7 +39,7 @@ export default class FileTree extends React.Component { width={14} height={14} name={this.state.open ? 'folder-outline' : 'folder-solid'} - fill="#ffffff" + fill="var(--color-text-on-dark)" /> {this.props.name} diff --git a/src/components/FileTree/FileTree.scss b/src/components/FileTree/FileTree.scss index 13bc60823c..285eb50de4 100644 --- a/src/components/FileTree/FileTree.scss +++ b/src/components/FileTree/FileTree.scss @@ -5,19 +5,23 @@ * This source code is licensed under the license found in the LICENSE file in * the root directory of this source tree. */ +@import 'stylesheets/globals.scss'; + .directory, .file { - color: #8fb9cf; + color: var(--color-text-on-dark-muted); height: 20px; line-height: 20px; - font-size: 12px; + font-size: var(--text-xs); cursor: pointer; + transition: color var(--transition-fast); } .directory { svg { vertical-align: middle; - fill: #8fb9cf; - margin-right: 6px; + fill: var(--color-text-on-dark-muted); + margin-right: var(--space-2); + transition: fill var(--transition-fast); } > span { @@ -25,26 +29,26 @@ } &:hover { - color: white; + color: var(--color-text-on-dark); svg { - fill: white; + fill: var(--color-text-on-dark); } } } .contents { - padding-left: 12px; + padding-left: var(--space-3); } .file { display: block; - + &:hover { - color: white; + color: var(--color-text-on-dark); } } .current { - color: white; + color: var(--color-text-on-dark); } diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js index d5ea25c948..d4be1a9797 100644 --- a/src/components/Filter/Filter.react.js +++ b/src/components/Filter/Filter.react.js @@ -128,7 +128,7 @@ const Filter = ({ display: 'flex', gap: '10px', padding: '12px 15px 0px 15px', - color: '#343445', + color: 'var(--color-text-primary)', fontWeight: '600', }} > diff --git a/src/components/FlowFooter/FlowFooter.scss b/src/components/FlowFooter/FlowFooter.scss index 98f670110e..c2bfb4145e 100644 --- a/src/components/FlowFooter/FlowFooter.scss +++ b/src/components/FlowFooter/FlowFooter.scss @@ -10,11 +10,11 @@ .footer { @include animation('footer-enter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)'); position: fixed; - left: 300px; + left: $sidebar-width; right: 0; bottom: 0; - background: #fbfbfc; - border-top: 1px solid #555572; + background: var(--color-bg-elevated); + border-top: 1px solid var(--color-border-primary); min-height: 49px; padding: 9px 11px; transition: left 0.5s ease-in; @@ -35,8 +35,8 @@ } .content { - color: $mainTextColor; - font-size: 13px; + color: var(--color-text-primary); + font-size: var(--text-sm); line-height: 22px; vertical-align: bottom; margin: 5px 0 3px 0; @@ -46,11 +46,11 @@ } &.error { - color: $red; + color: var(--color-accent-red); strong { font-weight: 700; - color: $red; + color: var(--color-accent-red); } } } diff --git a/src/components/FormButton/FormButton.scss b/src/components/FormButton/FormButton.scss index d8eda95931..39ee181c94 100644 --- a/src/components/FormButton/FormButton.scss +++ b/src/components/FormButton/FormButton.scss @@ -7,10 +7,20 @@ */ @import 'stylesheets/globals.scss'; +// Modern: compact, transparent .input { width: 100%; - height: 80px; - text-align: center; - padding-top: 25px; - background: $inputBackgroundColor; -} \ No newline at end of file + text-align: left; + padding: var(--space-2) 0; + background: transparent; +} + +// Classic: centered, gray bg, tall +:global([data-theme="classic"]) { + .input { + height: 80px; + text-align: center; + padding-top: var(--space-6); + background: var(--color-bg-tertiary); + } +} diff --git a/src/components/FormNote/FormNote.scss b/src/components/FormNote/FormNote.scss index 73e028eaaf..1158c62168 100644 --- a/src/components/FormNote/FormNote.scss +++ b/src/components/FormNote/FormNote.scss @@ -8,22 +8,27 @@ @import 'stylesheets/globals.scss'; .note { - color: white; - font-size: 12px; + @include UIFont; + font-size: var(--text-xs); text-align: center; line-height: 30px; min-height: 30px; + border-radius: 0; } .blue { - background: $blue; + background: var(--color-accent-blue-light); + color: var(--color-accent-blue); } .green { - background: $green; + background: var(--color-accent-green-light); + color: var(--color-accent-green); } .orange { - background: $orange; + background: var(--color-accent-orange-light); + color: var(--color-accent-orange); } .red { - background: $red; + background: var(--color-accent-red-light); + color: var(--color-accent-red); } diff --git a/src/components/FormTable/FormTable.scss b/src/components/FormTable/FormTable.scss index fcd5e21204..897ace921c 100644 --- a/src/components/FormTable/FormTable.scss +++ b/src/components/FormTable/FormTable.scss @@ -11,30 +11,30 @@ text-align: left; white-space: nowrap; min-height: 80px; - background: $formTableGrey; + background: var(--color-bg-tertiary); } .row { - background: $formTableGrey; - font-size: 12px; - padding-bottom: 4px; + background: var(--color-bg-tertiary); + font-size: var(--text-xs); + padding-bottom: var(--space-1); } .title { @include ellipsis(); display: inline-block; width: 100%; - padding-right: 20px; + padding-right: var(--space-5); } .header { position: relative; height: 30px; - background: #e3ebef; + background: var(--color-bg-tertiary); line-height: 14px; - font-size: 12px; - padding: 9px 32px 9px 6px; - margin-bottom: 4px; + font-size: var(--text-xs); + padding: 9px var(--space-8) 9px var(--space-2); + margin-bottom: var(--space-1); span { vertical-align: top; @@ -45,21 +45,21 @@ display: inline-block; width: 12px; height: 12px; - border-radius: 100%; - margin-right: 10px; + border-radius: var(--radius-full); + margin-right: var(--space-3); vertical-align: middle; &.blue { - background: $blue; + background: var(--color-accent-blue); } &.green { - background: $green; + background: var(--color-accent-green); } &.orange { - background: $orange; + background: var(--color-accent-orange); } &.red { - background: $red; + background: var(--color-accent-red); } } @@ -68,38 +68,43 @@ position: absolute; top: 7px; right: 7px; - color: $secondaryTextColor; + color: var(--color-text-secondary); font-size: 22px; line-height: 22px; + transition: color var(--transition-fast); + + &:hover { + color: var(--color-accent-red); + } } .info { @include ellipsis(); - padding: 4px 6px; + padding: var(--space-1) var(--space-2); } .label { - @include DosisFont; + @include UIFont; display: inline-block; text-transform: uppercase; - color: $secondaryTextColor; + color: var(--color-text-secondary); letter-spacing: 0.1em; font-size: 10px; &.blue { - color: $blue; + color: var(--color-accent-blue); } &.green { - color: $green; + color: var(--color-accent-green); } &.orange { - color: $orange; + color: var(--color-accent-orange); } &.red { - color: $red; + color: var(--color-accent-red); } } .din { - @include DosisFont; + @include UIFont; } diff --git a/src/components/FourOhFour/FourOhFour.scss b/src/components/FourOhFour/FourOhFour.scss index 209001b87c..bc50ad3f57 100644 --- a/src/components/FourOhFour/FourOhFour.scss +++ b/src/components/FourOhFour/FourOhFour.scss @@ -9,8 +9,8 @@ .fourOhFour { height: 100vh; - background: #06283d; - color: white; + background: var(--color-bg-sidebar); + color: var(--color-text-on-dark); text-align: center; } @@ -18,12 +18,11 @@ position: absolute; width: 100%; top: 50%; - -webkit-transform: translateY(-50%); transform: translateY(-50%); } .error { - @include DosisFont; + @include HeadingFont; font-size: 240px; } @@ -43,10 +42,15 @@ } .back { - margin-top: 40px; + margin-top: var(--space-8); button { @include buttonReset; - color: #fff; + color: var(--color-text-on-dark); + transition: opacity var(--transition-fast); + + &:hover { + opacity: 0.8; + } } } diff --git a/src/components/GeoPointEditor/GeoPointEditor.scss b/src/components/GeoPointEditor/GeoPointEditor.scss index e4d8613a44..631004043f 100644 --- a/src/components/GeoPointEditor/GeoPointEditor.scss +++ b/src/components/GeoPointEditor/GeoPointEditor.scss @@ -11,7 +11,7 @@ position: absolute; top: 0; left: 0; - box-shadow: 0 1px 4px rgba(0,0,0,0.4); + box-shadow: var(--shadow-overlay); input { @include MonospaceFont; @@ -19,11 +19,18 @@ height: 30px; border: none; outline: none; - padding: 0 4px; - font-size: 12px; + padding: 0 var(--space-1); + font-size: var(--text-xs); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + transition: background var(--transition-fast); &:first-child { - border-right: 1px solid #e3e3ea; + border-right: 1px solid var(--color-border-primary); + } + + &:focus { + background: var(--color-bg-primary); } } -} \ No newline at end of file +} diff --git a/src/components/GeoPointInput/GeoPointInput.scss b/src/components/GeoPointInput/GeoPointInput.scss index 3a38dd3447..c93ed0b7e1 100644 --- a/src/components/GeoPointInput/GeoPointInput.scss +++ b/src/components/GeoPointInput/GeoPointInput.scss @@ -9,7 +9,7 @@ .geopoint { width: 100%; - background: $inputBackgroundColor; + background: var(--color-bg-tertiary); height: 80px; } @@ -22,8 +22,8 @@ height: 30px; line-height: 30px; text-align: center; - color: $secondaryTextColor; - font-size: 14px; + color: var(--color-text-secondary); + font-size: var(--text-base); } } @@ -36,7 +36,13 @@ background: none; height: 50px; width: 50%; - font-size: 16px; + font-size: var(--text-lg); text-align: center; + color: var(--color-text-primary); + transition: background var(--transition-fast); + + &:focus { + background: var(--color-interactive-hover); + } } -} \ No newline at end of file +} diff --git a/src/components/GraphPanel/GraphPanel.react.js b/src/components/GraphPanel/GraphPanel.react.js index 6c45015107..475b7b8824 100644 --- a/src/components/GraphPanel/GraphPanel.react.js +++ b/src/components/GraphPanel/GraphPanel.react.js @@ -491,7 +491,7 @@ const GraphPanel = ({ if (validationError) { return (
- +

Configuration Error

{validationError}

@@ -501,7 +501,7 @@ const GraphPanel = ({ if (!graphConfig) { return (
- +

No graph configured.

{onNewGraph && ( <> @@ -520,7 +520,7 @@ const GraphPanel = ({ if (!processedData) { return (
- +

No graph data available

Configure your graph settings and select data to visualize.

@@ -550,7 +550,7 @@ const GraphPanel = ({ default: return (
- +

Unsupported chart type

); @@ -560,7 +560,7 @@ const GraphPanel = ({ if (error) { return (
- +

Error loading graph data

{error.message || 'Unknown error occurred'}

{onRefresh && ( @@ -570,7 +570,7 @@ const GraphPanel = ({ className={styles.retryButton} aria-label="Retry loading graph data" > - + Retry )} @@ -611,7 +611,7 @@ const GraphPanel = ({ aria-label="Select graph" title="Select graph" > - + {showGraphDropdown && (
@@ -649,7 +649,7 @@ const GraphPanel = ({ aria-label="Edit graph configuration" title="Edit graph" > - + )} {hasActiveGraph && onRefresh && ( @@ -660,7 +660,7 @@ const GraphPanel = ({ aria-label="Refresh graph data" title="Refresh graph" > - + )} {onClose && ( @@ -671,7 +671,7 @@ const GraphPanel = ({ aria-label="Close graph panel" title="Close graph" > - + )}
@@ -681,7 +681,7 @@ const GraphPanel = ({
{isLoading ? (
- +

Loading graph data...

) : ( diff --git a/src/components/GraphPanel/GraphPanel.scss b/src/components/GraphPanel/GraphPanel.scss index cae2a11a8f..0ccae4428c 100644 --- a/src/components/GraphPanel/GraphPanel.scss +++ b/src/components/GraphPanel/GraphPanel.scss @@ -1,18 +1,20 @@ +@import 'stylesheets/globals.scss'; + .container { height: 100%; display: flex; flex-direction: column; - border-radius: 4px; + border-radius: var(--radius-md); } .header { height: 30px; - font-size: 14px; + font-size: var(--text-base); margin: 0; padding: 0; - padding-left: 10px; - background-color: #169cee; - color: white; + padding-left: var(--space-3); + background-color: var(--color-accent-blue); + color: var(--color-text-on-dark); display: flex; align-items: center; justify-content: space-between; @@ -21,10 +23,11 @@ } .title { + @include HeadingFont; margin: 0; - padding: 0 8px; - font-size: 14px; - color: white; + padding: 0 var(--space-2); + font-size: var(--text-base); + color: var(--color-text-on-dark); flex: 1; line-height: 1; vertical-align: middle; @@ -39,20 +42,21 @@ background: none; border: none; cursor: pointer; - padding: 4px; - border-radius: 3px; - color: white; + padding: var(--space-1); + border-radius: var(--radius-sm); + color: var(--color-text-on-dark); opacity: 0.8; vertical-align: middle; + transition: background var(--transition-fast), opacity var(--transition-fast); &:hover { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.15); opacity: 1; } &:focus { outline: none; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); + box-shadow: 0 0 0 2px var(--color-border-focus); } } @@ -60,11 +64,11 @@ position: absolute; top: 100%; right: 0; - margin-top: 4px; - background: white; - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + margin-top: var(--space-1); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); + box-shadow: var(--shadow-overlay); min-width: 220px; max-width: 300px; max-height: 400px; @@ -73,33 +77,35 @@ } .dropdownItem { + @include UIFont; width: 100%; background: none; border: none; - padding: 8px 12px; + padding: var(--space-2) var(--space-3); text-align: left; cursor: pointer; - color: #333; - font-size: 13px; + color: var(--color-text-primary); + font-size: var(--text-sm); display: flex; align-items: center; - gap: 8px; + gap: var(--space-2); + transition: background var(--transition-fast); &:hover { - background: #f5f5f5; + background: var(--color-interactive-hover); } &:focus { outline: none; - background: #e8e8e8; + background: var(--color-interactive-hover); } } .dropdownItemActive { - background: #e3f2fd; + background: var(--color-accent-blue-light); &:hover { - background: #bbdefb; + background: var(--color-accent-blue-light); } } @@ -108,27 +114,27 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-weight: 500; + font-weight: var(--font-weight-medium); } .dropdownItemType { - font-size: 11px; - color: #666; + font-size: var(--text-xs); + color: var(--color-text-secondary); text-transform: capitalize; - background: #f0f0f0; - padding: 2px 6px; - border-radius: 3px; + background: var(--color-bg-tertiary); + padding: 2px var(--space-2); + border-radius: var(--radius-sm); } .dropdownSeparator { height: 1px; - background: #e0e0e0; - margin: 4px 0; + background: var(--color-border-primary); + margin: var(--space-1) 0; } .headerButtons { - gap: 8px; - padding-right: 8px; + gap: var(--space-2); + padding-right: var(--space-2); } .editButton, @@ -137,27 +143,28 @@ background: none; border: none; cursor: pointer; - padding: 4px; - border-radius: 3px; - color: white; + padding: var(--space-1); + border-radius: var(--radius-sm); + color: var(--color-text-on-dark); opacity: 0.8; vertical-align: middle; + transition: background var(--transition-fast), opacity var(--transition-fast); &:hover { - background: rgba(255, 255, 255, 0.1); - color: white; + background: rgba(255, 255, 255, 0.15); + color: var(--color-text-on-dark); opacity: 1; } &:focus { outline: none; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); + box-shadow: 0 0 0 2px var(--color-border-focus); } } .chartContainer { flex: 1; - padding: 16px; + padding: var(--space-4); min-height: 100px; position: relative; } @@ -180,106 +187,109 @@ justify-content: center; height: 100%; text-align: center; - color: #666; + color: var(--color-text-secondary); svg { - margin-bottom: 12px; + margin-bottom: var(--space-3); opacity: 0.5; } p { - margin: 4px 0; - font-size: 14px; + margin: var(--space-1) 0; + font-size: var(--text-base); &:first-of-type { - font-weight: 500; + font-weight: var(--font-weight-medium); } &:last-of-type { - font-size: 12px; + font-size: var(--text-xs); opacity: 0.7; } } } .error { - color: #d32f2f; + color: var(--color-accent-red); svg { - color: #d32f2f; + color: var(--color-accent-red); opacity: 0.8; } } .noData { svg { - color: #666; + color: var(--color-text-secondary); } } .retryButton { + @include UIFont; display: flex; align-items: center; - gap: 6px; - margin-top: 12px; - padding: 6px 12px; - background: #f5f5f5; - border: 1px solid #ddd; - border-radius: 4px; + gap: var(--space-2); + margin-top: var(--space-3); + padding: var(--space-2) var(--space-3); + background: var(--color-bg-tertiary); + border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); cursor: pointer; - font-size: 12px; - color: #333; + font-size: var(--text-xs); + color: var(--color-text-primary); + transition: background var(--transition-fast); &:hover { - background: #e8e8e8; + background: var(--color-bg-secondary); } &:focus { outline: none; - box-shadow: 0 0 0 2px rgba(54, 162, 235, 0.3); + box-shadow: 0 0 0 2px var(--color-border-focus); } } .createGraphButton { - margin-top: 16px; - padding: 10px 20px; - background: #169cee; + @include UIFont; + margin-top: var(--space-4); + padding: var(--space-3) var(--space-5); + background: var(--color-accent-blue); border: none; - border-radius: 4px; + border-radius: var(--radius-md); cursor: pointer; - font-size: 14px; - font-weight: 500; - color: white; - transition: background 0.2s; + font-size: var(--text-base); + font-weight: var(--font-weight-medium); + color: var(--color-text-on-dark); + transition: background var(--transition-fast); &:hover { - background: #147abd; + background: var(--color-accent-blue-hover); } &:focus { outline: none; - box-shadow: 0 0 0 3px rgba(22, 156, 238, 0.3); + box-shadow: 0 0 0 3px var(--color-border-focus); } &:active { - background: #0f5a8e; + background: var(--color-accent-blue-hover); } } .previewNotice { - margin-top: 24px !important; - padding-top: 4px; - font-size: 11px; - color: #999; + margin-top: var(--space-6) !important; + padding-top: var(--space-1); + font-size: var(--text-xs); + color: var(--color-text-tertiary); max-width: 400px; line-height: 1.4; } .configInfo { - padding: 8px 16px; - background: #f8f8f8; - border-top: 1px solid #e8e8e8; - font-size: 11px; - color: #666; + padding: var(--space-2) var(--space-4); + background: var(--color-bg-secondary); + border-top: 1px solid var(--color-border-secondary); + font-size: var(--text-xs); + color: var(--color-text-secondary); text-align: center; -} \ No newline at end of file +} diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.scss b/src/components/InlineSubmitInput/InlineSubmitInput.scss index 10f39b6472..01d47aa74d 100644 --- a/src/components/InlineSubmitInput/InlineSubmitInput.scss +++ b/src/components/InlineSubmitInput/InlineSubmitInput.scss @@ -8,7 +8,7 @@ @import 'stylesheets/globals.scss'; .wrapper { - background: $inputBackgroundColor; + background: var(--color-bg-primary); padding: 0px 5px; } @@ -17,17 +17,24 @@ } .button { - @include buttonReset($border: 1px solid #159cee, $padding: 0px 7px); + @include buttonReset($bg: var(--btn-bg), $border: var(--btn-border), $padding: 0px 7px); position: absolute; top: 30px; right: 15px; - height: 20px; - line-height: 20px; + height: 22px; + line-height: 22px; outline: 0; text-decoration: none; text-align: center; - border-radius: 5px; + border-radius: var(--btn-radius); cursor: pointer; font-size: 10px; - color: #159cee; + color: var(--btn-color); + font-weight: var(--font-weight-medium); + transition: background var(--transition-fast), color var(--transition-fast); + + &:hover { + background: var(--btn-hover-bg); + color: var(--btn-hover-color); + } } diff --git a/src/components/JsonEditor/JsonEditor.scss b/src/components/JsonEditor/JsonEditor.scss index df5f06835e..08ecec7df2 100644 --- a/src/components/JsonEditor/JsonEditor.scss +++ b/src/components/JsonEditor/JsonEditor.scss @@ -11,16 +11,16 @@ position: relative; display: inline-block; width: 100%; - font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + @include MonospaceFont; font-size: 15px; line-height: 1.5; - background: $inputBackgroundColor; + background: var(--color-bg-primary); } // Shared text styles .highlightLayer, .inputLayer { - padding: 10px; + padding: var(--space-3); margin: 0; border: none; font-family: inherit; @@ -41,7 +41,7 @@ bottom: 0; pointer-events: none; background: transparent; - color: #555572; + color: var(--color-text-primary); overflow: hidden; code { @@ -57,31 +57,31 @@ // Prism token colors (GitHub light theme) :global { .token.property { - color: #005cc5; // Blue - JSON keys + color: var(--color-accent-blue); } .token.string { - color: #000000; // Black - string values + color: var(--color-text-primary); } .token.number { - color: #098658; // Dark green - numbers + color: var(--color-accent-green); } .token.boolean { - color: #d73a49; // Red - true/false + color: var(--color-accent-red); } .token.null { - color: #d73a49; // Red - null + color: var(--color-accent-red); } .token.punctuation { - color: #24292e; // Dark gray - brackets, commas + color: var(--color-text-secondary); } .token.operator { - color: #24292e; // Dark gray - colons + color: var(--color-text-secondary); } } } @@ -93,7 +93,7 @@ min-width: calc(var(--modal-min-width) * (1 - var(--modal-label-ratio))); background: transparent; color: transparent; - caret-color: #333; + caret-color: var(--color-text-primary); resize: both; outline: none; min-height: 80px; @@ -101,6 +101,6 @@ overflow: auto; &::placeholder { - color: #bbb; + color: var(--color-text-tertiary); } } diff --git a/src/components/KeyField/KeyField.scss b/src/components/KeyField/KeyField.scss index e1d325cfd6..299cbd8286 100644 --- a/src/components/KeyField/KeyField.scss +++ b/src/components/KeyField/KeyField.scss @@ -9,10 +9,10 @@ .key { @include MonospaceFont; - background: $inputBackgroundColor; + background: var(--color-bg-primary); width: 100%; height: 80px; line-height: 80px; - font-size: 12px; + font-size: var(--text-xs); text-align: center; -} \ No newline at end of file +} diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index 2441ba42c0..8c0f8dcbd1 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -8,15 +8,30 @@ @import 'stylesheets/globals.scss'; .label { - font-size: 13px; + @include UIFont; + font-size: var(--text-sm); } .text { - font-weight: 700; + font-weight: var(--font-weight-medium); + color: var(--color-text-primary); + font-size: var(--text-sm); + line-height: 1; } .description { margin-top: 2px; - color: $secondaryTextColor; - line-height: 13px; + color: var(--color-text-tertiary); + line-height: 1.4; + font-size: var(--text-xs); + font-weight: normal; + + a { + color: var(--color-accent-blue); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } } diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.scss index f22dd5a7cb..b22b8166c5 100644 --- a/src/components/Loader/Loader.scss +++ b/src/components/Loader/Loader.scss @@ -21,13 +21,13 @@ transform: translate(-50%, -50%); &:nth-child(3n) { - background: $red; + background: var(--color-accent-red); } &:nth-child(3n + 1) { - background: $green; + background: var(--color-accent-green); } &:nth-child(3n + 2) { - background: $blue; + background: var(--color-accent-blue); } } } diff --git a/src/components/LoaderContainer/LoaderContainer.scss b/src/components/LoaderContainer/LoaderContainer.scss index 5d94d9c6d5..5c307c900f 100644 --- a/src/components/LoaderContainer/LoaderContainer.scss +++ b/src/components/LoaderContainer/LoaderContainer.scss @@ -9,7 +9,7 @@ position: relative; .loaderParent { visibility: hidden; - background: rgba(255, 255, 255, 0.7); + background: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent); position: absolute; width: 100%; height: 100%; @@ -19,7 +19,7 @@ visibility: visible; } &.solid { - background: white; + background: var(--color-bg-elevated); } } } diff --git a/src/components/LoaderDots/LoaderDots.scss b/src/components/LoaderDots/LoaderDots.scss index 46051982f4..ef6adeb47b 100644 --- a/src/components/LoaderDots/LoaderDots.scss +++ b/src/components/LoaderDots/LoaderDots.scss @@ -20,7 +20,7 @@ $dotSize: 8px; width: $dotSize; height: $dotSize; border-radius: $dotSize; - background-color: black; + background-color: var(--color-text-primary); margin: 4px; &:nth-child(2) { diff --git a/src/components/LogView/LogView.scss b/src/components/LogView/LogView.scss index 6b3c6e6db6..d67d0bca22 100644 --- a/src/components/LogView/LogView.scss +++ b/src/components/LogView/LogView.scss @@ -8,5 +8,5 @@ @import 'stylesheets/globals.scss'; .view { - background: $logViewBackgroundColor; + background: var(--color-bg-primary); } diff --git a/src/components/LogView/LogViewEntry.scss b/src/components/LogView/LogViewEntry.scss index f9a12b41a9..e40fc91a29 100644 --- a/src/components/LogView/LogViewEntry.scss +++ b/src/components/LogView/LogViewEntry.scss @@ -8,13 +8,13 @@ @import 'stylesheets/globals.scss'; .entry { - @include MonospaceFont; - font-size: 14px; + @include MonospaceFont; + font-size: var(--text-base); list-style: none; - margin-bottom: 15px; + margin-bottom: var(--space-4); &.error { - color: red; + color: var(--color-accent-red); } .content { @@ -22,26 +22,26 @@ } .time { - color: green; + color: var(--color-accent-green); } //TODO: handle keywords that should be highlighted - use global vars for colors .highlight { &.error { - color: red; + color: var(--color-accent-red); } &.info { - color: purple; + color: var(--color-accent-blue); } &.warning { - color: orange; + color: var(--color-accent-orange); } &.success { - color: green; + color: var(--color-accent-green); } } } diff --git a/src/components/LoginForm/LoginForm.react.js b/src/components/LoginForm/LoginForm.react.js index bc897fa745..7e1f696412 100644 --- a/src/components/LoginForm/LoginForm.react.js +++ b/src/components/LoginForm/LoginForm.react.js @@ -20,7 +20,7 @@ export default class LoginForm extends React.Component { render() { return (
- +
{this.props.header}
diff --git a/src/components/LoginForm/LoginForm.scss b/src/components/LoginForm/LoginForm.scss index 1481175028..5f420f6fd2 100644 --- a/src/components/LoginForm/LoginForm.scss +++ b/src/components/LoginForm/LoginForm.scss @@ -11,69 +11,79 @@ position: absolute; top: 50%; left: 50%; - margin-left: -175px; + margin-left: -190px; text-align: center; - width: 350px; + width: 380px; } .form { - margin-top: 30px; + margin-top: var(--space-6); + background: var(--color-bg-elevated); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + border: 1px solid var(--color-border-secondary); + overflow: hidden; } .header { height: 50px; line-height: 50px; - border-radius: 5px 5px 0 0; - color: $blue; - font-size: 16px; - font-weight: 700; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + color: var(--color-accent-blue); + font-size: var(--text-lg); + font-weight: var(--font-weight-semibold); text-align: center; - background: white; - border-bottom: 1px solid #e0e0e1; + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border-secondary); } .footer { - @include NotoSansFont; + @include UIFont; position: relative; height: 40px; padding: 10px 0; width: 100%; - background: white; - border-radius: 0 0 5px 5px; - color: #c1c0c9; - font-size: 12px; + background: var(--color-bg-secondary); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); + color: var(--color-text-tertiary); + font-size: var(--text-xs); text-align: center; + border-top: 1px solid var(--color-border-secondary); a { - color: #c1c0c9; + color: var(--color-text-tertiary); + transition: color var(--transition-fast); &:hover { - color: $mainTextColor; + color: var(--color-text-primary); } } } .submit { - @include NotoSansFont; + @include UIFont; display: block; - background: $green; + background: var(--color-accent-blue); height: 42px; width: 100%; - font-size: 16px; + font-size: var(--text-base); + font-weight: var(--font-weight-medium); line-height: 42px; - border-radius: 5px; - color: white; - margin-top: 15px; + border-radius: var(--radius-md); + color: var(--color-text-on-dark); + margin-top: var(--space-4); outline: none; border: none; cursor: pointer; + transition: background var(--transition-fast); &:hover, &:focus { - background: $darkGreen; + background: var(--color-accent-blue-hover); } &:disabled { - background: #dadada; + background: var(--color-bg-tertiary); + color: var(--color-text-tertiary); cursor: default; } } diff --git a/src/components/LoginRow/LoginRow.scss b/src/components/LoginRow/LoginRow.scss index efa339ad99..95bb179718 100644 --- a/src/components/LoginRow/LoginRow.scss +++ b/src/components/LoginRow/LoginRow.scss @@ -9,12 +9,12 @@ display: block; position: relative; height: 50px; - border-bottom: 1px solid #e0e0e1; + border-bottom: 1px solid var(--color-border-primary); } .label { width: 110px; - background: #f9f9fa; + background: var(--color-bg-secondary); font-size: 13px; font-weight: 700; height: 49px; @@ -27,7 +27,7 @@ .input { margin-left: 110px; height: 49px; - background: #f0f4f6; + background: var(--color-bg-tertiary); input { display: block; @@ -41,7 +41,7 @@ font-size: 13px; &:focus { - background: rgba(6,40,61,0.1); + background: var(--color-interactive-hover); } } } diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js index aacb6c15d8..cf0731d730 100644 --- a/src/components/Modal/Modal.react.js +++ b/src/components/Modal/Modal.react.js @@ -15,16 +15,11 @@ import PropTypes from 'lib/PropTypes'; import styles from 'components/Modal/Modal.scss'; const origin = new Position(0, 0); -const buttonColors = { - danger: 'red', - info: 'blue', - valid: 'green', -}; const Modal = ({ type = Modal.Types.INFO, icon, - iconSize = 36, + iconSize = 30, children, title, subtitle, @@ -154,20 +149,25 @@ const Modal = ({ if (children) { children = React.Children.map(children, c => { if (c && c.type === Field && c.props.label) { - return React.cloneElement(c, { ...c.props, labelPadding: 24 }); + return React.cloneElement(c, { ...c.props, labelPadding: 0 }); } return c; }); } + // Button color mapping for type-specific primary actions + const buttonColors = { + danger: 'red', + info: undefined, // default primary style + valid: 'green', + }; + const footer = customFooter || (
- {showCancel && + {appName || 'Parse Dashboard'} +
+ {isOpen &&
} + + ); +}; + +export default MobileNav; diff --git a/src/components/Sidebar/MobileNav.scss b/src/components/Sidebar/MobileNav.scss new file mode 100644 index 0000000000..3b023ced2f --- /dev/null +++ b/src/components/Sidebar/MobileNav.scss @@ -0,0 +1,70 @@ +@import 'stylesheets/globals.scss'; + +.mobileHeader { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + height: $mobile-header-height; + background: var(--color-bg-toolbar); + border-bottom: 1px solid var(--color-border-primary); + z-index: 101; + align-items: center; + padding: 0 var(--space-3); + gap: var(--space-3); +} + +@media (max-width: $bp-md - 1) { + .mobileHeader { + display: flex; + } +} + +.hamburger { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border: none; + background: none; + cursor: pointer; + border-radius: var(--radius-md); + color: var(--color-text-primary); + transition: background var(--transition-fast); + flex-shrink: 0; + padding: 0; + + &:hover { + background: var(--color-interactive-hover); + } +} + +.appName { + @include UIFont; + font-size: var(--text-lg); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 99; + backdrop-filter: blur(2px); +} + +@media (max-width: $bp-md - 1) { + .overlay { + display: block; + } +} diff --git a/src/components/Sidebar/Sidebar.react.js b/src/components/Sidebar/Sidebar.react.js index d504f2934a..af79d0178e 100644 --- a/src/components/Sidebar/Sidebar.react.js +++ b/src/components/Sidebar/Sidebar.react.js @@ -10,15 +10,18 @@ import AppsMenu from 'components/Sidebar/AppsMenu.react'; import AppName from 'components/Sidebar/AppName.react'; import isInsidePopover from 'lib/isInsidePopover'; import Pin from 'components/Sidebar/Pin.react'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useEffect, useState, useContext, useRef } from 'react'; import SidebarHeader from 'components/Sidebar/SidebarHeader.react'; import SidebarSection from 'components/Sidebar/SidebarSection.react'; import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react'; import styles from 'components/Sidebar/Sidebar.scss'; +import ThemeSelector from 'components/Sidebar/ThemeSelector.react'; import { CurrentApp } from 'context/currentApp'; import Icon from 'components/Icon/Icon.react'; const mountPath = window.PARSE_DASHBOARD_PATH; +const COLLAPSE_WIDTH = 1024; + const Sidebar = ({ prefix, action, @@ -30,50 +33,50 @@ const Sidebar = ({ appSelector, primaryBackgroundColor, secondaryBackgroundColor, + mobileOpen, + onMobileClose, }) => { const currentApp = useContext(CurrentApp); - const collapseWidth = 980; const [appsMenuOpen, setAppsMenuOpen] = useState(false); - const [collapsed, setCollapsed] = useState(false); - const [fixed, setFixed] = useState(true); + const [collapsed, setCollapsed] = useState(window.innerWidth <= COLLAPSE_WIDTH); + const [fixed, setFixed] = useState(window.innerWidth > COLLAPSE_WIDTH); const [dashboardUser, setDashboardUser] = useState(''); - fetch(mountPath).then(response => { - setDashboardUser(response.headers.get('username')); - }); - let currentWidth = window.innerWidth; + const prevWidth = useRef(window.innerWidth); + + useEffect(() => { + fetch(mountPath).then(response => { + setDashboardUser(response.headers.get('username')); + }); + }, []); const windowResizeHandler = () => { - if (window.innerWidth <= collapseWidth && currentWidth > collapseWidth) { - if (document.body.className.indexOf(' expanded') === -1) { - document.body.className += ' expanded'; - } + const w = window.innerWidth; + if (w <= COLLAPSE_WIDTH && prevWidth.current > COLLAPSE_WIDTH) { + document.body.classList.add('expanded'); setCollapsed(true); setFixed(false); - } else if (window.innerWidth > collapseWidth && currentWidth <= collapseWidth) { - document.body.className = document.body.className.replace(' expanded', ''); + } else if (w > COLLAPSE_WIDTH && prevWidth.current <= COLLAPSE_WIDTH) { + document.body.classList.remove('expanded'); setCollapsed(false); setFixed(true); } - // Update window width - currentWidth = window.innerWidth; + prevWidth.current = w; }; useEffect(() => { window.addEventListener('resize', windowResizeHandler); - - return () => { - window.removeEventListener('resize', windowResizeHandler); - }; + return () => window.removeEventListener('resize', windowResizeHandler); }); const sidebarClasses = [styles.sidebar]; if (fixed) { - document.body.className = document.body.className.replace(' expanded', ''); + document.body.classList.remove('expanded'); } else if (!fixed && collapsed) { sidebarClasses.push(styles.collapsed); - if (document.body.className.indexOf(' expanded') === -1) { - document.body.className += ' expanded'; - } + document.body.classList.add('expanded'); + } + if (mobileOpen) { + sidebarClasses.push(styles.mobileOpen); } const _subMenu = subsections => { @@ -93,6 +96,7 @@ const Sidebar = ({ actionHandler={active ? actionHandler : null} active={active} icon={icon} + onNavigate={onMobileClose} > {active ? children : null} @@ -156,8 +160,7 @@ const Sidebar = ({ style={style} link={prefix + link} active={active} - primaryBackgroundColor={primaryBackgroundColor} - secondaryBackgroundColor={secondaryBackgroundColor} + onNavigate={onMobileClose} > {!collapsed && active ? _subMenu(subsections) : null} @@ -185,14 +188,15 @@ const Sidebar = ({ > {sidebarContent} - {dashboardUser && ( -
+
+ + {dashboardUser && ( Logout -
- )} + )} +
); }; diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss index c73033aa73..54fe4eab0f 100644 --- a/src/components/Sidebar/Sidebar.scss +++ b/src/components/Sidebar/Sidebar.scss @@ -9,107 +9,136 @@ $headerHeight: 48px; $menuSectionHeight: 24px; -$sidebarMenuItemHeight: 48px; -$footerHeight: 36px; +$sidebarMenuItemHeight: 36px; +$footerHeight: 44px; + +// ============================================ +// Sidebar Shell +// ============================================ .sidebar { position: fixed; - width: 300px; + width: $sidebar-width; top: 0; left: 0; bottom: 0; - background: #0c5582; - color: #fff; + background: linear-gradient(180deg, var(--color-bg-sidebar) 0%, var(--color-bg-sidebar-bottom) 100%); + color: var(--color-text-on-dark); z-index: 100; + transition: width var(--transition-normal); + display: flex; + flex-direction: column; + border-right: 1px solid rgba(255, 255, 255, 0.06); &.collapsed { - left: 0; - width: 54px; + width: $sidebar-collapsed-width; .section_header > svg { margin: 0; } .pinContainer > svg { - fill: white; + fill: var(--color-text-on-dark); + } + } +} + +@media (max-width: $bp-md - 1) { + .sidebar { + transform: translateX(-100%) !important; + transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; + z-index: 200; + width: 280px !important; + + &.mobileOpen { + transform: translateX(0) !important; } } } +// ============================================ +// Content Area (scrollable sections) +// ============================================ + .content { - position: absolute; + position: relative; overflow-y: auto; - top: $headerHeight; - right: 0; - bottom: 36px; - left: 0; + flex: 1; + padding: 4px 0; } .apps + .content { - top: $headerHeight + $sidebarMenuItemHeight; + // flex handles spacing } +// ============================================ +// Footer +// ============================================ + .footer { - @include DosisFont; - position: absolute; - background: #05283c; - padding: 10px 0; - text-align: center; - bottom: 0; - left: 0; - right: 0; + @include UIFont; + position: relative; + padding: 10px 12px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid rgba(255, 255, 255, 0.08); a { - color: white; + color: var(--color-text-on-dark-muted); text-decoration: none; - border-right: 1px solid #385261; - font-size: 13px; - padding: 0 12px; - vertical-align: top; - + font-size: var(--text-xs); + transition: color var(--transition-fast); - &:first-child { - padding-left: 0; - } - &:last-child { - padding-right: 0; - border: none; + &:hover { + color: var(--color-text-on-dark); } } } +// ============================================ +// Header (logo + version) +// ============================================ + .header { - background: #05283c; height: $headerHeight; - padding: 10px 14px; + padding: 0 14px; + flex-shrink: 0; + display: flex; + align-items: center; + overflow: hidden; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); :global(.icon) { - width: 28px; - height: 28px; - float: left; + width: 24px; + height: 24px; + flex-shrink: 0; } } +// ============================================ +// App Name / Selector +// ============================================ + .currentApp, .menuRow { @include ellipsis(); display: block; - background: #094162; - height: $sidebarMenuItemHeight; - padding: 10px 14px; - - color: white; - font-size: 18px; - font-weight: 700; - line-height: 30px; + height: $sidebarMenuItemHeight + 8px; + padding: 8px 12px; + color: var(--color-text-on-dark); + font-size: var(--text-base); + font-weight: var(--font-weight-semibold); + line-height: 28px; } .menuRow { cursor: pointer; - border-bottom: 1px solid #0c5582; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); > *:first-child { display: inline-block; - max-width: 200px; + max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -118,6 +147,10 @@ $footerHeight: 36px; > *:not(:first-child) { float: right; } + + &:hover { + background: rgba(255, 255, 255, 0.06); + } } .currentApp { @@ -134,18 +167,18 @@ $footerHeight: 36px; .currentAppName { overflow: hidden; text-overflow: ellipsis; - max-width: 215px; + max-width: 170px; } &:after { - @include arrow('down', 10px, 7px, #132B39); + @include arrow('down', 10px, 7px, rgba(255, 255, 255, 0.2)); content: ''; margin-left: 10px; } &:hover { &:after { - border-top-color: white; + border-top-color: var(--color-text-on-dark); } } } @@ -158,24 +191,23 @@ $footerHeight: 36px; padding: 6px; } +// ============================================ +// Apps Menu (dropdown) +// ============================================ + .appsMenu { overflow: auto; - background: #094162; - width: 300px; - - .menuRow:hover { - background: #0c5582; - } + width: $sidebar-width; .currentApp { .currentAppName { &:after { - @include arrow('up', 10px, 7px, #132B39); + @include arrow('up', 10px, 7px, rgba(255, 255, 255, 0.2)); } &:hover { &:after { - border-bottom-color: white; + border-bottom-color: var(--color-text-on-dark); } } } @@ -183,187 +215,235 @@ $footerHeight: 36px; .appListContainer { overflow-y: auto; - height: calc(100vh - #{$headerHeight} - #{$menuSectionHeight} - #{$sidebarMenuItemHeight} - #{$footerHeight}); + height: calc(100vh - #{$headerHeight} - #{$menuSectionHeight} - #{$sidebarMenuItemHeight + 8px} - #{$footerHeight}); } } .menuSection { - @include DosisFont; + @include HeadingFont; height: $menuSectionHeight; line-height: 24px; - background: #0c5582; - color: #84A5BC; + color: var(--color-text-on-dark-muted); text-transform: uppercase; - letter-spacing: 2px; - font-size: 8px; + letter-spacing: 1.5px; + font-size: 10px; + font-weight: var(--font-weight-medium); padding: 0 14px; - border-bottom: 1px solid #094162; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .createApp { - @include DosisFont; + @include UIFont; display: block; - background: $blue; + background: var(--color-accent-blue); color: white; - width: 91%; - height: 30px; - line-height: 30px; - border-radius: 5px; + width: calc(100% - 24px); + height: 32px; + line-height: 32px; + border-radius: var(--radius-md); text-align: center; margin: 12px auto; - font-size: 12px; + font-size: var(--text-xs); + font-weight: var(--font-weight-medium); + transition: background var(--transition-fast); &:hover { - background: #0c5582; + background: var(--color-accent-blue-hover); } } +// ============================================ +// Section (nav item) +// ============================================ + .section { - background: #0c5582; + padding: 0 8px; :global(.icon) { - margin-right: 14px; + margin-right: 10px; } } +// Active section — clean Tailwind-style rounded highlight .active { - background: #159cee; - - .section_header{ - font-weight: 700; - &:hover{ - background: #159cee; + .section_header { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + font-weight: var(--font-weight-semibold); + border-radius: var(--radius-md); + + > svg { + opacity: 1; } } } .section_header { - display: block; + display: flex; + align-items: center; height: $sidebarMenuItemHeight; - font-size: 18px; - line-height: 28px; - padding: 12px 14px; - color: white; + font-size: var(--text-sm); + line-height: 20px; + padding: 0 10px; + color: var(--color-text-on-dark-muted); + border-radius: var(--radius-md); + transition: background var(--transition-fast), color var(--transition-fast); - &:hover{ - background-color: #0D5E91; + &:hover { + background: rgba(255, 255, 255, 0.06); + color: var(--color-text-on-dark); } > span { vertical-align: top; - @include DosisFont; + @include UIFont; + font-weight: var(--font-weight-medium); } > svg { - margin-right: 14px; + margin-right: 10px; + flex-shrink: 0; + opacity: 0.5; } } +// ============================================ +// Sub-items (expanded under active section) +// ============================================ + .section_contents { - background: #0e69a0; - padding: 16px 14px 16px 50px; + padding: 2px 0 6px 14px; } +// Active sub-item — just white text, bold .subitem { position: relative; height: 28px; line-height: 28px; - font-size: 16px; - font-weight: 700; - color: white; + font-size: var(--text-sm); + font-weight: var(--font-weight-medium); + color: #ffffff; display: flex; align-items: center; + padding: 0 8px; + border-radius: var(--radius-md); } +// Inactive sub-item (link) — muted, brightens on hover a.subitem { - color: #8fb9cf; - font-weight: 400; + color: var(--color-text-on-dark-muted); + font-weight: var(--font-weight-normal); display: flex; align-items: center; width: 100%; + transition: color var(--transition-fast); &:hover { - color: white; + color: var(--color-text-on-dark); } svg { &:hover { - fill: white; + fill: var(--color-text-on-dark); } } } +// ============================================ +// Action (button inside sub-item) +// ============================================ + .action { - @include DosisFont; + @include UIFont; position: absolute; - font-size: 12px; - font-weight: 400; + font-size: var(--text-xs); + font-weight: var(--font-weight-normal); padding: 0 8px; line-height: 20px; - top: 4px; + top: 5px; right: 0px; - background: #0c5987; - color: white; - border-radius: 3px; + background: rgba(255, 255, 255, 0.1); + color: var(--color-text-on-dark); + border-radius: var(--radius-sm); + transition: background var(--transition-fast); &:hover { - background: #094162; + background: rgba(255, 255, 255, 0.2); } } +// ============================================ +// Logo & Version +// ============================================ + .logo { - float: left; + flex-shrink: 0; } .version { - @include DosisFont; + @include UIFont; position: relative; - width: 75px; height: 100%; font-size: 10px; display: flex; align-items: center; - float: left; - margin-left: 6px; - white-space: nowrap; - color: white; - - > *:first-child { - position: absolute; - letter-spacing: 2px; - line-height: 12px; - text-transform: uppercase; - } + margin-left: 10px; + color: var(--color-text-on-dark-muted); + overflow: hidden; + flex: 1; + min-width: 0; > *:first-child { + letter-spacing: 0.5px; + line-height: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; transition: all 0.4s 0.16s cubic-bezier(0.77, 0, 0.175, 1); } } +// ============================================ +// More / Logout +// ============================================ + .more { display: flex; - justify-content: center; align-items: center; + gap: 6px; + padding: 4px 8px; + border-radius: var(--radius-sm); + font-size: var(--text-xs); + color: var(--color-text-on-dark-muted); + transition: color var(--transition-fast), background var(--transition-fast); + svg { - fill: #0C5582; - transition: fill 0.2s ease-in; - margin-right: 4px; + fill: var(--color-text-on-dark-muted); + transition: fill var(--transition-fast); } &:hover { + color: var(--color-text-on-dark); + background: rgba(255, 255, 255, 0.06); + svg { - fill: $blue; + fill: var(--color-text-on-dark); } } } +// ============================================ +// Popup (legacy menu) +// ============================================ + .popup { position: absolute; bottom: 4px; left: -183px; - background: white; + background: var(--color-bg-elevated); width: 200px; - border-radius: 5px; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-overlay); &:after { @include arrow('down', 12px, 6px, #ffffff); @@ -374,51 +454,58 @@ a.subitem { } a { - @include NotoSansFont; + @include UIFont; display: block; height: 40px; line-height: 41px; - font-size: 13px; + font-size: var(--text-sm); text-align: center; - border-bottom: 1px solid #e0e0ea; - color: $mainTextColor; + border-bottom: 1px solid var(--color-border-secondary); + color: var(--color-text-primary); padding-right: 8px; - &:hover{ - background-color: darken(white,4%) + + &:hover { + background-color: var(--color-interactive-hover); } &:first-child { - border-radius: 5px 5px 5px 5px; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; } &:last-child { border-bottom: 0; - border-radius: 5px 5px 5px 5px; + border-radius: 0 0 var(--radius-lg) var(--radius-lg); } - .emoji{ + .emoji { padding-left: 4px; padding-right: 2px; } } } +// ============================================ +// Pin Container (collapsed state) +// ============================================ + .pinContainer { - height: 48px; + height: $sidebarMenuItemHeight + 8px; display: flex; justify-content: center; align-items: center; - background-color: #094162; svg { cursor: pointer; - height: 40px; - width: 40px; - padding: 10px 10px 10px 10px; - fill: #132B39; + height: 36px; + width: 36px; + padding: 8px; + fill: rgba(255, 255, 255, 0.3); + border-radius: var(--radius-md); + transition: fill var(--transition-fast), background var(--transition-fast); &:hover { - fill: white; + fill: var(--color-text-on-dark); + background: rgba(255, 255, 255, 0.06); } } -} \ No newline at end of file +} diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js index c609ff1cff..b02bf6af21 100644 --- a/src/components/Sidebar/SidebarHeader.react.js +++ b/src/components/Sidebar/SidebarHeader.react.js @@ -12,6 +12,18 @@ import styles from 'components/Sidebar/Sidebar.scss'; // get the package.json environment variable const version = process.env.version; +// Modern Parse logo — just the infinity path without the circle background +const ParseLogo = ({ size = 22 }) => ( + + + +); + +// Classic Parse logo — full circle with infinity symbol +const ClassicParseLogo = ({ size = 28 }) => ( + +); + export default class SidebarHeader extends React.Component { constructor() { super(); @@ -19,14 +31,18 @@ export default class SidebarHeader extends React.Component { } render() { const { isCollapsed = false, dashboardUser } = this.props; + const isClassic = typeof document !== 'undefined' && + document.documentElement.getAttribute('data-theme') === 'classic'; + const Logo = isClassic ? ClassicParseLogo : ParseLogo; + const headerContent = isCollapsed ? (
- +
) : ( <> - +
diff --git a/src/components/Sidebar/SidebarSection.react.js b/src/components/Sidebar/SidebarSection.react.js index 5744d74266..28dc92dd49 100644 --- a/src/components/Sidebar/SidebarSection.react.js +++ b/src/components/Sidebar/SidebarSection.react.js @@ -17,9 +17,8 @@ const SidebarSection = ({ link, icon, style, - primaryBackgroundColor, - secondaryBackgroundColor, isCollapsed, + onNavigate, }) => { const classes = [styles.section]; if (active) { @@ -27,14 +26,14 @@ const SidebarSection = ({ } let iconContent = null; if (icon) { - iconContent = ; + iconContent = ; } if (isCollapsed) { classes.push(styles.collapsed); return (
{iconContent} @@ -46,21 +45,21 @@ const SidebarSection = ({
{active ? (
{iconContent} {name}
) : ( - + {iconContent} {name} )} {children ? ( -
+
{children}
) : null} diff --git a/src/components/Sidebar/SidebarSubItem.react.js b/src/components/Sidebar/SidebarSubItem.react.js index 214889a5ec..7d01ce35c6 100644 --- a/src/components/Sidebar/SidebarSubItem.react.js +++ b/src/components/Sidebar/SidebarSubItem.react.js @@ -10,13 +10,13 @@ import React from 'react'; import styles from 'components/Sidebar/Sidebar.scss'; import Icon from 'components/Icon/Icon.react'; -const SidebarSubItem = ({ active, name, action, link, children, icon }) => { +const SidebarSubItem = ({ active, name, action, link, children, icon, onNavigate }) => { if (active) { return (
{name} - {icon && } + {icon && } {action ? action.renderButton() : null}
{children}
@@ -26,9 +26,9 @@ const SidebarSubItem = ({ active, name, action, link, children, icon }) => { return (
- + {name} - {icon && } + {icon && }
); diff --git a/src/components/Sidebar/ThemeSelector.react.js b/src/components/Sidebar/ThemeSelector.react.js new file mode 100644 index 0000000000..e6d6da128c --- /dev/null +++ b/src/components/Sidebar/ThemeSelector.react.js @@ -0,0 +1,82 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { getSavedTheme, setTheme } from 'lib/theme'; +import styles from 'components/Sidebar/ThemeSelector.scss'; + +const THEMES = [ + { value: 'light', label: 'Light' }, + { value: 'dark', label: 'Dark' }, + { value: 'classic', label: 'Classic' }, + { value: 'auto', label: 'Auto' }, +]; + +const ThemeSelector = () => { + const [current, setCurrent] = useState(getSavedTheme); + const [open, setOpen] = useState(false); + const ref = useRef(null); + + useEffect(() => { + const handleClickOutside = (e) => { + if (ref.current && !ref.current.contains(e.target)) { + setOpen(false); + } + }; + if (open) { + document.addEventListener('mousedown', handleClickOutside); + } + return () => document.removeEventListener('mousedown', handleClickOutside); + }, [open]); + + // Listen for system theme changes when in auto mode + useEffect(() => { + if (current !== 'auto' || !window.matchMedia) { + return; + } + const mql = window.matchMedia('(prefers-color-scheme: dark)'); + const handler = () => setTheme('auto'); + mql.addEventListener('change', handler); + return () => mql.removeEventListener('change', handler); + }, [current]); + + const handleSelect = (value) => { + setCurrent(value); + setTheme(value); + setOpen(false); + }; + + const currentLabel = THEMES.find(t => t.value === current)?.label || 'Light'; + + return ( +
+ + {open && ( +
+ {THEMES.map(({ value, label }) => ( + + ))} +
+ )} +
+ ); +}; + +export default ThemeSelector; diff --git a/src/components/Sidebar/ThemeSelector.scss b/src/components/Sidebar/ThemeSelector.scss new file mode 100644 index 0000000000..1f3230400e --- /dev/null +++ b/src/components/Sidebar/ThemeSelector.scss @@ -0,0 +1,72 @@ +@import 'stylesheets/globals.scss'; + +.themeSelector { + position: relative; +} + +.trigger { + @include UIFont; + display: flex; + align-items: center; + gap: 6px; + background: none; + border: none; + cursor: pointer; + color: var(--color-text-on-dark-muted); + font-size: var(--text-xs); + padding: 4px 8px; + border-radius: var(--radius-sm); + transition: color var(--transition-fast), background var(--transition-fast); + + svg { + flex-shrink: 0; + } + + &:hover { + color: var(--color-text-on-dark); + background: rgba(255, 255, 255, 0.1); + } +} + +.menu { + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border-secondary); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-overlay); + padding: var(--space-1) 0; + min-width: 120px; + z-index: 200; +} + +.option { + @include UIFont; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background: none; + border: none; + cursor: pointer; + padding: var(--space-1) var(--space-3); + font-size: var(--text-sm); + color: var(--color-text-primary); + transition: background var(--transition-fast); + + &:hover { + background: var(--color-interactive-hover); + } + + &.active { + color: var(--color-accent-blue); + font-weight: var(--font-weight-medium); + } + + svg { + margin-left: var(--space-2); + flex-shrink: 0; + } +} diff --git a/src/components/SlowQueriesFilter/SlowQueriesFilter.scss b/src/components/SlowQueriesFilter/SlowQueriesFilter.scss index 11dd19436a..aff01522c8 100644 --- a/src/components/SlowQueriesFilter/SlowQueriesFilter.scss +++ b/src/components/SlowQueriesFilter/SlowQueriesFilter.scss @@ -13,51 +13,53 @@ .entry { height: 30px; - padding: 8px; + padding: var(--space-2); + transition: background var(--transition-fast); svg { - fill: #66637A; + fill: var(--color-text-secondary); + transition: fill var(--transition-fast); } &:hover svg { - fill: white; + fill: var(--color-text-on-dark); } } .entry.active { - background: $blue; - border-radius: 5px; + background: var(--color-accent-blue); + border-radius: var(--radius-md); svg { - fill: white; + fill: var(--color-text-on-dark); } } .active .title, .active .body { - background: $blue; + background: var(--color-accent-blue); } .title { - background: #797691; - padding: 8px; - border-radius: 5px 5px 0 0; + background: var(--color-bg-tertiary); + padding: var(--space-2); + border-radius: var(--radius-md) var(--radius-md) 0 0; svg { - fill: white; + fill: var(--color-text-on-dark); } } .entry, .title { - @include DosisFont; + @include HeadingFont; position: relative; bottom: -4px; - font-size: 14px; - color: #ffffff; + font-size: var(--text-base); + color: var(--color-text-on-dark); cursor: pointer; svg { vertical-align: top; - margin-right: 6px; + margin-right: var(--space-2); } span { @@ -72,17 +74,18 @@ position: absolute; top: 30px; right: 0; - border-radius: 5px 0 5px 5px; - background: #797691; + border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md); + background: var(--color-bg-tertiary); width: 470px; - font-size: 14px; + font-size: var(--text-base); + box-shadow: var(--shadow-md); } .row { - padding: 8px 15px; + padding: var(--space-2) var(--space-4); > * { - margin-right: 10px; + margin-right: var(--space-2); &:nth-last-child(1) { margin-right: 0; @@ -93,17 +96,22 @@ @include MonospaceFont; height: 30px; width: 140px; - background: #343445; + background: var(--color-bg-sidebar); border: none; outline: none; - border-radius: 5px; + border-radius: var(--radius-md); vertical-align: top; - padding: 0 8px; - color: white; - font-size: 14px; + padding: 0 var(--space-2); + color: var(--color-text-on-dark); + font-size: var(--text-base); + transition: background var(--transition-fast); + + &:focus { + background: var(--color-accent-blue-hover); + } } } .active .row input { - background: #0E69A1; + background: var(--color-accent-blue-hover); } diff --git a/src/components/StatusIndicator/StatusIndicator.scss b/src/components/StatusIndicator/StatusIndicator.scss index 0a19b982da..b1ad7c3a53 100644 --- a/src/components/StatusIndicator/StatusIndicator.scss +++ b/src/components/StatusIndicator/StatusIndicator.scss @@ -8,9 +8,9 @@ @import 'stylesheets/globals.scss'; .status { - @include DosisFont; + @include HeadingFont; display: inline-block; - font-size: 14px; + font-size: var(--text-base); letter-spacing: 0.1em; text-transform: uppercase; @@ -19,31 +19,31 @@ display: inline-block; width: 11px; height: 11px; - border-radius: 100%; - margin-right: 8px; + border-radius: var(--radius-full); + margin-right: var(--space-2); } } .blue { - color: $blue; + color: var(--color-accent-blue); &:before { - background: $blue; + background: var(--color-accent-blue); } } .red { - color: $red; + color: var(--color-accent-red); &:before { - background: $red; + background: var(--color-accent-red); } } .green { - color: $green; + color: var(--color-accent-green); &:before { - background: $green; + background: var(--color-accent-green); } } diff --git a/src/components/StringEditor/StringEditor.scss b/src/components/StringEditor/StringEditor.scss index 680f0ab6f8..a2d48bc3c3 100644 --- a/src/components/StringEditor/StringEditor.scss +++ b/src/components/StringEditor/StringEditor.scss @@ -11,7 +11,7 @@ position: absolute; top: 0; left: 0; - box-shadow: 0 1px 4px rgba(0,0,0,0.4); + box-shadow: var(--shadow-md); input { @include MonospaceFont; @@ -19,27 +19,41 @@ height: 30px; border: none; outline: none; - padding: 0 4px; - font-size: 12px; + padding: 0 var(--space-1); + font-size: var(--text-xs); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + transition: background var(--transition-fast); + + &:focus { + background: var(--color-bg-primary); + } } &.readonly { - box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 20%); + box-shadow: var(--shadow-sm); } input:disabled { - background-color: #f2f2f2; - color: #666; + background-color: var(--color-bg-tertiary); + color: var(--color-text-secondary); } textarea { @include MonospaceFont; width: 200px; height: 93px; - font-size: 12px; - padding: 4px; + font-size: var(--text-xs); + padding: var(--space-1); resize: none; border: none; outline: none; + background: var(--color-bg-elevated); + color: var(--color-text-primary); + transition: background var(--transition-fast); + + &:focus { + background: var(--color-bg-primary); + } } -} \ No newline at end of file +} diff --git a/src/components/SuggestionsList/SuggestionsList.scss b/src/components/SuggestionsList/SuggestionsList.scss index b0662a7f3f..d4132136a2 100644 --- a/src/components/SuggestionsList/SuggestionsList.scss +++ b/src/components/SuggestionsList/SuggestionsList.scss @@ -8,30 +8,31 @@ @import 'stylesheets/globals.scss'; .suggestions { - border: 1px solid $mainTextColor; + border: 1px solid var(--color-border-primary); border-top-width: 0; list-style: none; max-height: 143px; overflow-y: auto; - -moz-box-shadow: 0px 0px 0px #666, 0px 4px 8px #666; - -webkit-box-shadow: 0px 0px 0px #666, 0px 4px 8px #666; - box-shadow:0px 0px 0px #666, 0px 4px 8px #666; + box-shadow: var(--shadow-md); + border-radius: 0 0 var(--radius-md) var(--radius-md); } .suggestions li { - background: white; - padding-left: 10px; - font-family:"Open Sans", sans-serif; + @include UIFont; + background: var(--color-bg-elevated); + padding: var(--space-2) var(--space-3); + font-size: var(--text-base); + transition: background-color var(--transition-fast), color var(--transition-fast); } .active, .suggestions li:hover { - color: #0e69a1; + color: var(--color-accent-blue); cursor: pointer; - font-weight: 500; - background: rgba(255, 255, 255, 0.1) !important; + font-weight: var(--font-weight-medium); + background: var(--color-interactive-hover) !important; } .suggestions li:not(:last-of-type) { - border-bottom: 1px solid #999; -} \ No newline at end of file + border-bottom: 1px solid var(--color-border-secondary); +} diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss index 9b67b7a142..1651ced73d 100644 --- a/src/components/Table/Table.scss +++ b/src/components/Table/Table.scss @@ -9,43 +9,48 @@ .header { display: inline-block; - color: white; - font-size: 14px; - line-height: 30px; + color: var(--color-text-secondary); + font-size: 12px; + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 36px; padding: 0 16px; - background: #66637A; - height: 30px; + background: var(--color-bg-tertiary); + height: 36px; } - -//common table styles that can be imported - .table { - background: #fdfafb; + background: var(--color-bg-primary); width: 100%; text-align: left; } .head { - color: white; - font-size: 14px; - line-height: 30px; + color: var(--color-text-secondary); + font-size: 12px; + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 36px; padding: 0 16px; - background: #66637A; - height: 30px; + background: var(--color-bg-tertiary); + height: 36px; } .tr { - background: #fdfafb; - border-bottom: 1px solid $borderGrey; + background: var(--color-bg-primary); + border-bottom: 1px solid var(--color-border-secondary); + transition: background var(--transition-fast); - &:nth-child(2n) { - background: #f4f5f7; + &:hover { + background: var(--color-interactive-hover); } } .td { - line-height: 30px; - padding: 10px 16px; + line-height: 20px; + padding: var(--space-2) 16px; max-width: 0; + color: var(--color-text-primary); } diff --git a/src/components/TextInput/TextInput.react.js b/src/components/TextInput/TextInput.react.js index 17ca4d6597..5b1cfb06a7 100644 --- a/src/components/TextInput/TextInput.react.js +++ b/src/components/TextInput/TextInput.react.js @@ -34,11 +34,23 @@ class TextInput extends React.Component { } } + getHeight() { + if (this.props.height) { + return this.props.height; + } + // Classic theme uses 80px default; modern themes use auto-sizing + const isClassic = + typeof document !== 'undefined' && + document.documentElement.getAttribute('data-theme') === 'classic'; + return isClassic ? 80 : undefined; + } + render() { const classes = [styles.text_input]; if (this.props.monospace) { classes.push(styles.monospace); } + const height = this.getHeight(); if (this.props.multiline) { return (