From d9946027266ea8d3cd283bd1b0115d5b9f5985bc Mon Sep 17 00:00:00 2001 From: Ken Kunz Date: Thu, 16 Nov 2023 20:14:35 -0600 Subject: [PATCH 1/7] remove deprecated colors-v1.css NOTE: still have multiple versions of design system colors (colors.css, theme/*, colors-new.css); need to whittle down to single color set. --- src/lib/components/Dialog.svelte | 2 +- src/lib/components/MoneyInput.svelte | 2 +- src/lib/components/NavPanel.svelte | 2 +- src/lib/components/PageHeader.svelte | 2 +- src/lib/components/SourceCode.svelte | 2 +- src/lib/components/TextInput.svelte | 2 +- src/lib/components/css/color-v1.css | 75 ------------------- src/lib/components/css/color.css | 25 ------- src/lib/components/css/index.css | 1 - src/lib/components/css/shadows.css | 10 ++- src/lib/components/css/terminal.css | 40 +++++++--- src/lib/components/css/themes/index.css | 1 - src/lib/components/css/typography.css | 3 +- src/lib/header/ColorModePicker.svelte | 20 ++--- src/lib/search/components/Search.svelte | 47 +++++++----- src/lib/search/components/SearchHit.svelte | 44 +++++------ src/routes/+error.svelte | 7 +- src/routes/+layout.svelte | 5 +- src/routes/+page.svelte | 4 +- src/routes/blog/README.md | 4 +- src/routes/blog/[slug]/+page.svelte | 7 +- .../blog/{ => [slug]}/BlogPostContent.svelte | 29 ++++--- .../blog/{ => [slug]}/TableOfContents.svelte | 0 src/routes/diagnostics/+page.svelte | 8 +- src/routes/search/Filter.svelte | 4 +- src/routes/search/FilterPanel.svelte | 7 +- src/routes/search/SearchPanel.svelte | 18 ++--- .../(nav)/logs/LogEntriesList.svelte | 5 +- .../[strategy]/(nav)/logs/LogEntry.svelte | 45 +++++------ .../trading-view/[chain]/BlockInfoTile.svelte | 6 +- .../[chain]/SummaryDataTile.svelte | 2 +- .../[chain]/[exchange]/[pair]/+page.svelte | 2 +- .../[exchange]/[pair]/ChartSection.svelte | 5 +- .../[exchange]/[pair]/TimePeriodPicker.svelte | 27 ++++--- .../[pair]/TimePeriodSummaryTable.svelte | 4 +- .../APIExamples.svelte | 14 +--- .../[exchange]/export-data/+page.svelte | 22 ++---- src/routes/trading-view/api/+page.svelte | 2 +- 38 files changed, 207 insertions(+), 298 deletions(-) delete mode 100644 src/lib/components/css/color-v1.css rename src/routes/blog/{ => [slug]}/BlogPostContent.svelte (82%) rename src/routes/blog/{ => [slug]}/TableOfContents.svelte (100%) diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte index 860102526..556443f36 100644 --- a/src/lib/components/Dialog.svelte +++ b/src/lib/components/Dialog.svelte @@ -97,7 +97,7 @@ Modal dialog component. Dispatches `open` and `close` events when state changes gap: var(--space-ss); align-items: center; margin-bottom: var(--space-ss); - color: var(--c-text-4-v1); + color: hsl(var(--hsl-text-extra-light)); h5 { font: var(--f-ui-lg-medium); diff --git a/src/lib/components/MoneyInput.svelte b/src/lib/components/MoneyInput.svelte index 246a81c91..509e1b9fc 100644 --- a/src/lib/components/MoneyInput.svelte +++ b/src/lib/components/MoneyInput.svelte @@ -125,7 +125,7 @@ retained to avoid rounding errors and allow for conversion to `BigInt`. input { background: transparent; border: none; - color: var(--c-text-1-v1); + color: inherit; font: var(--f-ui-xxl-medium); height: var(--text-input-height, var(--height)); letter-spacing: var(--text-input-letter-spacing, var(--letter-spacing, normal)); diff --git a/src/lib/components/NavPanel.svelte b/src/lib/components/NavPanel.svelte index 3886b9d5f..3aeb33fc1 100644 --- a/src/lib/components/NavPanel.svelte +++ b/src/lib/components/NavPanel.svelte @@ -41,7 +41,7 @@ gap: var(--space-lg); grid-auto-rows: min-content; background: hsla(var(--hsl-body)); - box-shadow: -0.25rem 0 2rem var(--c-shadow-1-v1); + box-shadow: var(--shadow-1); transform: translateX(calc(100% + var(--space-xl))); transition: transform 0.25s; diff --git a/src/lib/components/PageHeader.svelte b/src/lib/components/PageHeader.svelte index fb909f26d..270a80e07 100644 --- a/src/lib/components/PageHeader.svelte +++ b/src/lib/components/PageHeader.svelte @@ -47,7 +47,7 @@ strings) or named slots (for nested markup); `description` can be a prop or defa small { font: var(--f-h4-medium); - color: var(--c-text-2-v1); + color: hsl(var(--hsl-text-extra-light)); } } diff --git a/src/lib/components/SourceCode.svelte b/src/lib/components/SourceCode.svelte index cfbcc8288..9e1743f9e 100644 --- a/src/lib/components/SourceCode.svelte +++ b/src/lib/components/SourceCode.svelte @@ -27,7 +27,7 @@ See: https://github.com/metonym/svelte-highlight display: grid; padding: var(--space-xxs); border-radius: var(--radius-md); - background-color: var(--c-ink); + background: hsl(var(--hsl-terminal-bg)); :global(.hljs) { background-color: transparent; diff --git a/src/lib/components/TextInput.svelte b/src/lib/components/TextInput.svelte index 1f73b49c5..cca6840b5 100644 --- a/src/lib/components/TextInput.svelte +++ b/src/lib/components/TextInput.svelte @@ -152,7 +152,7 @@ unknown props through to HTML input element. background: hsla(var(--input-background)); font: inherit; letter-spacing: inherit; - color: var(--c-text-1-v1); + color: inherit; transition: background var(--time-sm) ease-out; &::placeholder { diff --git a/src/lib/components/css/color-v1.css b/src/lib/components/css/color-v1.css deleted file mode 100644 index 92d7f8009..000000000 --- a/src/lib/components/css/color-v1.css +++ /dev/null @@ -1,75 +0,0 @@ -/* - HSL Values - Theme 0.1 -*/ - -:root { - /* Brand */ - --hsl-ink: 239, 31%, 6%; - --hsl-ink-light: 239, 6%, 12%; - - --hsl-parchment: 36, 72%, 97%; - --hsl-parchment-dark: 36, 78%, 91%; - --hsl-parchment-extra-dark: 36, 61%, 86%; - --hsl-parchment-super-dark: 36, 21%, 54%; - - /* UI */ - --hsl-bullish: 140, 68%, 42%; - --hsl-bullish-dark: 140, 68%, 36%; - --hsl-bullish-extra-dark: 140, 68%, 28%; - --hsl-bullish-light: 140, 68%, 52%; - --hsl-bullish-extra-light: 140, 68%, 72%; - - --hsl-bearish: 360, 92%, 57%; - --hsl-bearish-dark: 360, 92%, 45%; - --hsl-bearish-extra-dark: 360, 92%, 37%; - --hsl-bearish-light: 360, 100%, 70%; - --hsl-bearish-extra-light: 360, 100%, 78%; - - /* Grayscale */ - --hsl-gray: 239, 6%, 49%; - --hsl-gray-light: 239, 6%, 68%; - --hsl-gray-extra-light: 239, 6%, 82%; - --hsl-gray-dark: 239, 6%, 36%; - --hsl-gray-extra-dark: 239, 6%, 28%; - - /* Accent */ - --hsl-wood: 36, 68%, 35%; -} - -/* - Colors - Theme 0.1 -*/ - -:root { - /* Brand */ - --c-ink: hsla(var(--hsl-ink), 1); - --c-ink-light: hsla(var(--hsl-ink-light), 1); - - --c-parchment: hsla(var(--hsl-parchment), 1); - --c-parchment-dark: hsla(var(--hsl-parchment-dark), 1); - --c-parchment-extra-dark: hsla(var(--hsl-parchment-extra-dark), 1); - --c-parchment-super-dark: hsla(var(--hsl-parchment-super-dark), 1); - - /* UI */ - --c-bullish: hsla(var(--hsl-bullish), 1); - --c-bullish-dark: hsla(var(--hsl-bullish-dark), 1); - --c-bullish-extra-dark: hsla(var(--hsl-bullish-extra-dark), 1); - --c-bullish-light: hsla(var(--hsl-bullish-light), 1); - --c-bullish-extra-light: hsla(var(--hsl-bullish-extra-light), 1); - - --c-bearish: hsla(var(--hsl-bearish), 1); - --c-bearish-dark: hsla(var(--hsl-bearish-dark), 1); - --c-bearish-extra-dark: hsla(var(--hsl-bearish-extra-dark), 1); - --c-bearish-light: hsla(var(--hsl-bearish-light), 1); - --c-bearish-extra-light: hsla(var(--hsl-bearish-extra-light), 1); - - /* Grayscale */ - --c-gray: hsla(var(--hsl-gray), 1); - --c-gray-light: hsla(var(--hsl-gray-light), 1); - --c-gray-extra-light: hsla(var(--hsl-gray-extra-light), 1); - --c-gray-dark: hsla(var(--hsl-gray-dark), 1); - --c-gray-extra-dark: hsla(var(--hsl-gray-extra-dark), 1); - - /* Accent */ - --c-wood: hsla(var(--hsl-wood), 1); -} diff --git a/src/lib/components/css/color.css b/src/lib/components/css/color.css index 2a520391d..9e8b9de6c 100644 --- a/src/lib/components/css/color.css +++ b/src/lib/components/css/color.css @@ -81,31 +81,6 @@ body[data-color-mode='dark'] { see: https://stackoverflow.com/questions/70845195#answer-70934827 */ body { - /* Color pairs - Theme 0.1 */ - --c-body-v1: var(--cm-light, var(--c-parchment)) var(--cm-dark, var(--c-ink-light)); - - --c-background-1-v1: var(--cm-light, var(--c-parchment-dark)) var(--cm-dark, var(--c-ink)); - --c-background-2-v1: var(--cm-light, var(--c-gray-extra-light)) var(--cm-dark, var(--c-gray-extra-dark)); - --c-background-3-v1: var(--cm-light, var(--c-ink)) var(--cm-dark, var(--c-parchment-dark)); - --c-background-4-v1: var(--cm-light, var(--c-parchment-extra-dark)) var(--cm-dark, var(--c-gray-dark)); - --c-background-5-v1: var(--cm-light, var(--c-parchment)) var(--cm-dark, var(--c-ink-light)); - --c-background-6-v1: var(--cm-light, var(--c-parchment-extra-dark)) var(--cm-dark, var(--c-gray-extra-dark)); - --c-background-7-v1: var(--cm-light, var(--c-ink-light)) var(--cm-dark, var(--c-ink)); - - --c-text-1-v1: var(--cm-light, var(--c-ink)) var(--cm-dark, var(--c-parchment)); - --c-text-2-v1: var(--cm-light, var(--c-gray-dark)) var(--cm-dark, var(--c-gray-extra-light)); - --c-text-3-v1: var(--cm-light, var(--c-ink-light)) var(--cm-dark, var(--c-gray-extra-light)); - --c-text-4-v1: var(--cm-light, var(--c-gray-extra-dark)) var(--cm-dark, var(--c-parchment-dark)); - --c-text-5-v1: var(--cm-light, var(--c-ink-light)) var(--cm-dark, var(--c-gray-light)); - --c-text-6-v1: var(--cm-light, var(--c-parchment)) var(--cm-dark, var(--c-ink-light)); - --c-text-7-v1: var(--cm-light, var(--c-gray)) var(--cm-dark, var(--c-gray-light)); - - --c-border-1-v1: var(--cm-light, var(--c-gray-dark)) var(--cm-dark, var(--c-gray)); - --c-border-2-v1: var(--cm-light, var(--c-ink)) var(--cm-dark, var(--c-parchment)); - - --c-shadow-1-v1: var(--cm-light, rgba(0, 0, 0, 0.2)) var(--cm-dark, rgba(255, 255, 255, 0.2)); - - /* Color pairs - Theme 0.2 */ --c-body: var(--cm-light, var(--c-body-day)) var(--cm-dark, var(--c-body-night)); --c-text-default: var(--cm-light, var(--c-text-default-day)) var(--cm-dark, var(--c-text-default-night)); diff --git a/src/lib/components/css/index.css b/src/lib/components/css/index.css index 0b6a0c538..ea7c55b6a 100644 --- a/src/lib/components/css/index.css +++ b/src/lib/components/css/index.css @@ -1,6 +1,5 @@ @import './animations.css'; @import './reset.css'; -@import './color-v1.css'; @import './color.css'; @import './colors-new.css'; @import './input.css'; diff --git a/src/lib/components/css/shadows.css b/src/lib/components/css/shadows.css index 992b1bed2..05615f0b8 100644 --- a/src/lib/components/css/shadows.css +++ b/src/lib/components/css/shadows.css @@ -1,5 +1,7 @@ -:root { - --shadow-1: 0 0 4px 0 hsla(var(--hsl-black), 0.2); - --shadow-2: 0 0 6px 0 hsla(var(--hsl-black), 0.1); - --shadow-3: 0 0 6px 0 hsla(var(--hsl-black), 0.05); +body { + --hsl-shadow: var(--cm-light, var(--hsl-black)) var(--cm-dark, var(--hsl-white)); + + --shadow-1: 0 0 4px 0 hsla(var(--hsl-shadow), 0.2); + --shadow-2: 0 0 6px 0 hsla(var(--hsl-shadow), 0.1); + --shadow-3: 0 0 6px 0 hsla(var(--hsl-shadow), 0.05); } diff --git a/src/lib/components/css/terminal.css b/src/lib/components/css/terminal.css index 628f49224..ffba18850 100644 --- a/src/lib/components/css/terminal.css +++ b/src/lib/components/css/terminal.css @@ -1,15 +1,33 @@ -.terminal-viewport { - background-color: var(--c-ink) !important; - border-radius: var(--radius-md); - display: grid; - padding: var(--space-ss) var(--space-sl); +body { + --hsl-terminal-bg: 239, 31%, 6%; + --hsl-terminal: var(--hue-1), 4%, 86%; + --hsl-terminal-light: var(--hue-1), 3%, 72%; } -.terminal-viewport .hljs { - background-color: transparent; -} +:where(.terminal-viewport) { + border-radius: var(--radius-md); + padding: var(--space-md) var(--space-lg); + background: hsl(var(--hsl-terminal-bg)); + color: hsl(var(--hsl-terminal)); + font: var(--f-mono-md-regular); + letter-spacing: var(--f-mono-md-spacing, normal); + + &.sm { + border-radius: var(--radius-sm); + padding: var(--space-ms) var(--space-ls); + font: var(--f-mono-sm-regular); + letter-spacing: var(--f-mono-sm-spacing, normal); + } + + &.xs { + border-radius: var(--radius-sm); + padding: var(--space-sl) var(--space-md); + font: var(--f-mono-xs-regular); + letter-spacing: var(--f-mono-xs-spacing, normal); + } -.terminal-viewport code, -.terminal-viewport code span { - font: var(--f-mono-sm-regular) !important; + code { + font: inherit; + letter-spacing: inherit; + } } diff --git a/src/lib/components/css/themes/index.css b/src/lib/components/css/themes/index.css index 831737e86..bd677f003 100644 --- a/src/lib/components/css/themes/index.css +++ b/src/lib/components/css/themes/index.css @@ -10,7 +10,6 @@ body { --hsl-black: 0, 0%, 0%; --hsl-white: var(--hue-1), 100%, 100%; --hsl-white-dark: var(--hue-1), 100%, 97%; - --c-text-1: hsla(var(--hsl-text)); /* temp fix until there still is some legacy code from bootstrap theme */ color: hsla(var(--hsl-text)); background-color: hsla(var(--hsl-body)); transition-property: background-color, color; diff --git a/src/lib/components/css/typography.css b/src/lib/components/css/typography.css index 3c4921b7e..30cf7b26b 100644 --- a/src/lib/components/css/typography.css +++ b/src/lib/components/css/typography.css @@ -255,8 +255,7 @@ body { margin: 0; } -.ds-container pre, -.ds-container code { +:where(.ds-container) :where(pre, code) { font: var(--f-mono-md-regular); letter-spacing: var(--f-mono-md-spacing, normal); } diff --git a/src/lib/header/ColorModePicker.svelte b/src/lib/header/ColorModePicker.svelte index eabd35c18..da7b4116e 100644 --- a/src/lib/header/ColorModePicker.svelte +++ b/src/lib/header/ColorModePicker.svelte @@ -55,36 +55,36 @@ padding-block: var(--space-ss); font: var(--f-ui-lg-medium); letter-spacing: var(--f-ui-lg-spacing, normal); - color: var(--c-text-1-v1); + color: hsl(var(--hsl-text)); text-align: center; cursor: pointer; } li.active { - background: var(--c-background-2-v1); + background: hsla(var(--hsl-box), var(--a-box-c)); } li.light:hover { - background: var(--c-parchment-dark); - color: var(--c-ink); + background: var(--c-background-2-day); + color: var(--c-text-default-day); } li.dark:hover { - background: var(--c-ink); - color: var(--c-parchment); + background: var(--c-background-2-night); + color: var(--c-text-default-night); } @media (prefers-color-scheme: light) { li.system:hover { - background: var(--c-parchment-dark); - color: var(--c-ink); + background: var(--c-background-2-day); + color: var(--c-text-default-day); } } @media (prefers-color-scheme: dark) { li.system:hover { - background: var(--c-ink); - color: var(--c-parchment); + background: var(--c-background-2-night); + color: var(--c-text-default-night); } } diff --git a/src/lib/search/components/Search.svelte b/src/lib/search/components/Search.svelte index f115a0106..94ba04fb5 100644 --- a/src/lib/search/components/Search.svelte +++ b/src/lib/search/components/Search.svelte @@ -106,12 +106,18 @@ Display site-wide search box for use in top-nav. {/if} @@ -215,20 +221,27 @@ Display site-wide search box for use in top-nav. } footer { - display: grid; - gap: var(--space-sl) var(--space-sm); - font: var(--f-ui-md-medium); - letter-spacing: var(--f-ui-md-spacing, normal); - color: var(--c-text-7-v1); - text-align: center; - - @media (--search-layout-mobile) { - font: var(--f-ui-sm-medium); - --button-font: var(--f-ui-sm-medium); + .prompt { + margin-bottom: var(--space-sl); + font: var(--f-ui-md-medium); + letter-spacing: var(--f-ui-md-spacing, normal); + color: hsl(var(--hsl-text-extra-light)); + text-align: center; + + @media (--search-layout-mobile) { + font: var(--f-ui-sm-medium); + } } - .hasQuery & { - grid-template-columns: 1fr 1fr; + .ctas { + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + gap: var(--space-sm); + + @media (--search-layout-mobile) { + --button-font: var(--f-ui-sm-medium); + } } } diff --git a/src/lib/search/components/SearchHit.svelte b/src/lib/search/components/SearchHit.svelte index d528d9059..359eeacf3 100644 --- a/src/lib/search/components/SearchHit.svelte +++ b/src/lib/search/components/SearchHit.svelte @@ -78,23 +78,12 @@ props. diff --git a/src/routes/trading-view/[chain]/BlockInfoTile.svelte b/src/routes/trading-view/[chain]/BlockInfoTile.svelte index d26b15556..b844203b7 100644 --- a/src/routes/trading-view/[chain]/BlockInfoTile.svelte +++ b/src/routes/trading-view/[chain]/BlockInfoTile.svelte @@ -34,13 +34,13 @@ time { margin-bottom: var(--space-sm); font: var(--f-ui-large-medium); - color: var(--c-text-4-v1); + color: hsl(var(--hsl-text-light)); @media (--viewport-md-down) { margin-bottom: var(--space-xxs); font: var(--f-ui-body-medium); letter-spacing: 0.01em; - color: var(--c-text-1-v1); + color: hsl(var(--hsl-text)); } } @@ -50,7 +50,7 @@ @media (--viewport-md-down) { font: var(--f-h4-bold); - color: var(--c-text-2-v1); + color: hsl(var(--hsl-text-light)); } } diff --git a/src/routes/trading-view/[chain]/SummaryDataTile.svelte b/src/routes/trading-view/[chain]/SummaryDataTile.svelte index 43b8560e2..7e9d2359f 100644 --- a/src/routes/trading-view/[chain]/SummaryDataTile.svelte +++ b/src/routes/trading-view/[chain]/SummaryDataTile.svelte @@ -45,7 +45,7 @@ @media (--viewport-md-down) { margin-block: 0; font: var(--f-h5-medium); - color: var(--c-text-2-v1); + color: hsl(var(--hsl-text-light)); } } diff --git a/src/routes/trading-view/[chain]/[exchange]/[pair]/+page.svelte b/src/routes/trading-view/[chain]/[exchange]/[pair]/+page.svelte index fa8989eb3..65c898c3a 100644 --- a/src/routes/trading-view/[chain]/[exchange]/[pair]/+page.svelte +++ b/src/routes/trading-view/[chain]/[exchange]/[pair]/+page.svelte @@ -171,7 +171,7 @@ Render the pair trading page .pool-swap-fee { margin-left: var(--space-xxs); - color: var(--c-text-2-v1); + color: hsl(var(--hsl-text-extra-light)); } .info { diff --git a/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte b/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte index ebfba8301..f909137b3 100644 --- a/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte +++ b/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte @@ -167,7 +167,8 @@ for the same hovered date. Also displays a time-bucket selector. .help { font: var(--f-ui-small-roman); - color: var(--c-text-2-v1); + color: hsl(var(--hsl-text-light)); + text-align: right; white-space: nowrap; @@ -175,7 +176,7 @@ for the same hovered date. Also displays a time-bucket selector. text-overflow: ellipsis; a:hover { - color: var(--c-text-1-v1); + color: hsl(var(--hsl-text)); } .prefix { diff --git a/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte b/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte index 016154913..79249e46f 100644 --- a/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte +++ b/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte @@ -16,7 +16,7 @@ Radio button options to select a time period.
{#each periods as period} {/each} @@ -25,30 +25,39 @@ Radio button options to select a time period. diff --git a/src/routes/trading-view/[chain]/[exchange]/export-data/+page.svelte b/src/routes/trading-view/[chain]/[exchange]/export-data/+page.svelte index f541e4843..3692ee804 100644 --- a/src/routes/trading-view/[chain]/[exchange]/export-data/+page.svelte +++ b/src/routes/trading-view/[chain]/[exchange]/export-data/+page.svelte @@ -1,7 +1,7 @@ {#await data} - + {:then { symbol, formatted }} {formatNumber(formatted, 2, 4)} {symbol} {:catch error} diff --git a/src/lib/wallet/WalletBalance.svelte b/src/lib/wallet/WalletBalance.svelte index 30212d8fd..262beff39 100644 --- a/src/lib/wallet/WalletBalance.svelte +++ b/src/lib/wallet/WalletBalance.svelte @@ -45,7 +45,7 @@ {#await fetchNativeCurrency(address)} - + {:then balance} {formatNumber(balance.formatted, 2, 4)} {/await} @@ -54,7 +54,7 @@ {#await fetchDenominationToken(address)} - + {:then balance} {formatNumber(balance.formatted, 2, 4)} {:catch} diff --git a/src/lib/wallet/WalletSummary.svelte b/src/lib/wallet/WalletSummary.svelte index ddbf325d5..c110cb1eb 100644 --- a/src/lib/wallet/WalletSummary.svelte +++ b/src/lib/wallet/WalletSummary.svelte @@ -58,13 +58,13 @@ margin-left: var(--space-sm); padding: var(--space-xs) var(--space-sl); border-radius: var(--space-md); - background: hsla(var(--hsl-success), 0.2); + background: hsl(var(--hsl-success) / 20%); font: var(--f-ui-sm-medium); - color: hsla(var(--hsl-success)); + color: hsl(var(--hsl-success)); .dot { animation: pulse-opacity 1.5s ease-out infinite; - background: hsla(var(--hsl-success)); + background: hsl(var(--hsl-success)); border-radius: 100%; height: 0.625rem; width: 0.625rem; diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index 77d815f48..4c1e85797 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -68,7 +68,7 @@ left: 0; right: 0; min-height: 100vh; - background: hsla(var(--hsl-body)); + background: hsl(var(--hsl-body)); display: grid; grid-template-rows: 1fr auto 1fr; gap: var(--space-4xl); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d1a730eb6..b2077e0b5 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -61,11 +61,11 @@ /* Price action and candle colors */ .bullish { - color: hsla(var(--hsl-bullish)); + color: hsl(var(--hsl-bullish)); } .bearish { - color: hsla(var(--hsl-bearish)); + color: hsl(var(--hsl-bearish)); } /* global skeleton class */ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 402090c2e..d26e21668 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -73,7 +73,7 @@ {/if} -
+

Strategies

Coming soon
diff --git a/src/routes/HomeHeroBanner.svelte b/src/routes/HomeHeroBanner.svelte index 1e885b649..f03d87a1d 100644 --- a/src/routes/HomeHeroBanner.svelte +++ b/src/routes/HomeHeroBanner.svelte @@ -38,7 +38,7 @@ Home page hero banner. diff --git a/src/routes/about/Feature.svelte b/src/routes/about/Feature.svelte index b160b7bc9..eee0483ba 100644 --- a/src/routes/about/Feature.svelte +++ b/src/routes/about/Feature.svelte @@ -94,7 +94,7 @@ } .bg { - fill: hsla(var(--hsl-body)); + fill: hsl(var(--hsl-body)); } :not(.bg) { diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index 14c624479..3c60debae 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -50,7 +50,7 @@
{#if page.loading}
- +
{:else if page.error} diff --git a/src/routes/blog/[slug]/BlogPostContent.svelte b/src/routes/blog/[slug]/BlogPostContent.svelte index 6d3dc6862..a806d467a 100644 --- a/src/routes/blog/[slug]/BlogPostContent.svelte +++ b/src/routes/blog/[slug]/BlogPostContent.svelte @@ -173,8 +173,8 @@ :is(td, th) { vertical-align: top; padding: var(--space-ss); - border-top: 1px solid hsla(var(--hsl-text-extra-light)); - border-bottom: 1px solid hsla(var(--hsl-text-extra-light)); + border-top: 1px solid hsl(var(--hsl-text-extra-light)); + border-bottom: 1px solid hsl(var(--hsl-text-extra-light)); &:first-child { padding-left: 0; diff --git a/src/routes/glossary/+page.svelte b/src/routes/glossary/+page.svelte index c654cfd23..de4a5b146 100644 --- a/src/routes/glossary/+page.svelte +++ b/src/routes/glossary/+page.svelte @@ -105,7 +105,7 @@ hr { margin: var(--space-lg) 0; - border: 1px solid hsla(var(--hsl-text)); + border: 1px solid hsl(var(--hsl-text)); @media (--viewport-lg-down) { margin: var(--space-lg) 0 var(--space-xl); diff --git a/src/routes/newsletter/+page.svelte b/src/routes/newsletter/+page.svelte index ea4ee565e..aaab36919 100644 --- a/src/routes/newsletter/+page.svelte +++ b/src/routes/newsletter/+page.svelte @@ -11,6 +11,6 @@ diff --git a/src/routes/search/Filter.svelte b/src/routes/search/Filter.svelte index 1489a0e3f..6e9d86786 100644 --- a/src/routes/search/Filter.svelte +++ b/src/routes/search/Filter.svelte @@ -105,9 +105,9 @@ Display filter options as checkboxes search queries. appearance: none; width: 1.5rem; height: 1.5rem; - border: 2px solid hsla(var(--hsl-text)); + border: 2px solid hsl(var(--hsl-text)); border-radius: var(--radius-xxs); - background: hsla(var(--hsl-body)); + background: hsl(var(--hsl-body)); outline: none; } diff --git a/src/routes/search/FilterPanel.svelte b/src/routes/search/FilterPanel.svelte index 0eda18b63..295fab586 100644 --- a/src/routes/search/FilterPanel.svelte +++ b/src/routes/search/FilterPanel.svelte @@ -117,7 +117,7 @@ bottom: 0; z-index: 10; overflow-y: scroll; - background: hsla(var(--hsl-body)); + background: hsl(var(--hsl-body)); box-shadow: var(--shadow-1); transition: transform var(--time-xl); @@ -168,7 +168,7 @@ bottom: 0; padding: var(--space-sl); display: grid; - background: hsla(var(--hsl-body)); + background: hsl(var(--hsl-body)); box-shadow: var(--shadow-1); @media (--viewport-lg-up) { diff --git a/src/routes/strategies/ChartThumbnail.svelte b/src/routes/strategies/ChartThumbnail.svelte index 4732ae51d..f56582f75 100644 --- a/src/routes/strategies/ChartThumbnail.svelte +++ b/src/routes/strategies/ChartThumbnail.svelte @@ -88,7 +88,7 @@ text-align: center; font: var(--f-ui-md-roman); letter-spacing: var(--f-ui-md-spacing, normal); - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); opacity: 0; transition: var(--transition-1); @@ -106,7 +106,7 @@ transform: translate(-50%, calc(-100% - var(--space-md))); :global(time) { - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); } .value { diff --git a/src/routes/strategies/KeyMetric.svelte b/src/routes/strategies/KeyMetric.svelte index 73217649c..b9882b404 100644 --- a/src/routes/strategies/KeyMetric.svelte +++ b/src/routes/strategies/KeyMetric.svelte @@ -60,7 +60,7 @@ Display one key metric in a strategy tile. margin-bottom: 0.375rem; font: var(--f-ui-sm-medium); letter-spacing: var(--f-ui-sm-spacing); - color: hsla(var(--hsl-text-light)); + color: hsl(var(--hsl-text-light)); --icon-size: 1.25em; @media (--viewport-sm-down) { diff --git a/src/routes/strategies/StrategyTile.svelte b/src/routes/strategies/StrategyTile.svelte index 590081eeb..5e5fe7f41 100644 --- a/src/routes/strategies/StrategyTile.svelte +++ b/src/routes/strategies/StrategyTile.svelte @@ -96,15 +96,15 @@ .strategy-tile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(90vw, 28rem), 1fr)); - background: hsla(var(--hsla-box-1)); - border: 1px hsla(var(--hsla-box-3)) solid; + background: hsl(var(--hsla-box-1)); + border: 1px hsl(var(--hsla-box-3)) solid; border-radius: var(--radius-lg); - color: hsla(var(--hsl-text)); + color: hsl(var(--hsl-text)); cursor: pointer; transition: var(--transition-1); &:hover { - background: hsla(var(--hsla-box-2)); + background: hsl(var(--hsla-box-2)); z-index: 2; } @@ -185,7 +185,7 @@ } .avatar { - background: hsla(var(--hsla-box-3)); + background: hsl(var(--hsla-box-3)); border-radius: 100%; font: var(--f-ui-sm-roman); text-align: center; @@ -249,7 +249,7 @@ p { font: var(--f-ui-md-medium); - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); } } @@ -260,7 +260,7 @@ .backtest-data-badge { align-items: center; border-radius: var(--radius-sl); - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); display: inline-flex; font: var(--f-ui-xs-bold); gap: 0.625rem; @@ -276,8 +276,8 @@ &:is(:hover, :focus) { .actions :global(.button) { - background: hsla(var(--hsl-text), 1); - color: hsla(var(--hsl-text-inverted)); + background: hsl(var(--hsl-text)); + color: hsl(var(--hsl-text-inverted)); } .chart :global(figcaption) { diff --git a/src/routes/strategies/[strategy]/(nav)/+layout.svelte b/src/routes/strategies/[strategy]/(nav)/+layout.svelte index 60fe0cffd..8648fd693 100644 --- a/src/routes/strategies/[strategy]/(nav)/+layout.svelte +++ b/src/routes/strategies/[strategy]/(nav)/+layout.svelte @@ -66,7 +66,7 @@ .beta-notice { margin: var(--space-xl) 0; - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); } .error-wrapper { diff --git a/src/routes/strategies/[strategy]/(nav)/StrategyNav.svelte b/src/routes/strategies/[strategy]/(nav)/StrategyNav.svelte index fd87d74c4..c4970a5be 100644 --- a/src/routes/strategies/[strategy]/(nav)/StrategyNav.svelte +++ b/src/routes/strategies/[strategy]/(nav)/StrategyNav.svelte @@ -147,7 +147,7 @@ .strategy-nav { --menu-gap: var(--space-sl); --menu-item-active-color: hsl(var(--hsl-text)); - --menu-item-color: hsla(var(--hsl-text-extra-light)); + --menu-item-color: hsl(var(--hsl-text-extra-light)); --menu-item-border-radius: var(--radius-md); --menu-item-padding: 0 var(--space-md); diff --git a/src/routes/strategies/[strategy]/(nav)/[status=positionStatus]-positions/FrozenStatus.svelte b/src/routes/strategies/[strategy]/(nav)/[status=positionStatus]-positions/FrozenStatus.svelte index fc8914828..d48506d18 100644 --- a/src/routes/strategies/[strategy]/(nav)/[status=positionStatus]-positions/FrozenStatus.svelte +++ b/src/routes/strategies/[strategy]/(nav)/[status=positionStatus]-positions/FrozenStatus.svelte @@ -15,7 +15,7 @@ } .buy { - color: hsla(var(--hsl-bullish)); + color: hsl(var(--hsl-bullish)); &::before { content: '▲'; @@ -23,7 +23,7 @@ } .sell { - color: hsla(var(--hsl-bearish)); + color: hsl(var(--hsl-bearish)); &::before { content: '▼'; diff --git a/src/routes/strategies/[strategy]/(nav)/backtest/+page.svelte b/src/routes/strategies/[strategy]/(nav)/backtest/+page.svelte index 09723a8c2..f9e0655f7 100644 --- a/src/routes/strategies/[strategy]/(nav)/backtest/+page.svelte +++ b/src/routes/strategies/[strategy]/(nav)/backtest/+page.svelte @@ -67,7 +67,7 @@ Page to display the strategy backtest results. {#if !iframeLoaded} {/if} diff --git a/src/routes/strategies/[strategy]/(nav)/logs/LogEntry.svelte b/src/routes/strategies/[strategy]/(nav)/logs/LogEntry.svelte index 314c17b23..d34e09a58 100644 --- a/src/routes/strategies/[strategy]/(nav)/logs/LogEntry.svelte +++ b/src/routes/strategies/[strategy]/(nav)/logs/LogEntry.svelte @@ -36,7 +36,7 @@ } &:not(:first-of-type) { - border-bottom: 1px solid hsla(var(--hsl-terminal-light), 0.15); + border-bottom: 1px solid hsl(var(--hsl-terminal-light) / 15%); } .message { @@ -73,17 +73,20 @@ } &.trade { - color: palegreen; + color: hsl(var(--hsl-success)); } + &.warning { - color: lightyellow; + color: hsl(var(--hsl-warning)); } + &.error { - color: lightcoral; + color: hsl(var(--hsl-error)); } + &.critical { - background: red; - color: white; + background: hsl(var(--hsl-error) / 65%); + color: hsl(var(--hsl-white)); } } diff --git a/src/routes/strategies/[strategy]/(nav)/netflow/+page.svelte b/src/routes/strategies/[strategy]/(nav)/netflow/+page.svelte index 80d7ac6fc..e01fa2f38 100644 --- a/src/routes/strategies/[strategy]/(nav)/netflow/+page.svelte +++ b/src/routes/strategies/[strategy]/(nav)/netflow/+page.svelte @@ -88,7 +88,7 @@ padding: 0; font: var(--f-heading-xs-medium); letter-spacing: var(--f-heading-xs-spacing, normal); - color: hsla(var(--hsl-text-light)); + color: hsl(var(--hsl-text-light)); text-transform: none; box-shadow: none; diff --git a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/+page.svelte b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/+page.svelte index 2777104d6..c863c6522 100644 --- a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/+page.svelte +++ b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/+page.svelte @@ -184,7 +184,7 @@ .trading-pair { font-weight: bold; & .swap-fee { - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); } } @@ -229,7 +229,7 @@ &:first-child { padding-left: var(--space-sl); - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); } &:last-child { diff --git a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/TransactionStatus.svelte b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/TransactionStatus.svelte index 662d2068d..2372c0f91 100644 --- a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/TransactionStatus.svelte +++ b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/TransactionStatus.svelte @@ -13,6 +13,6 @@ diff --git a/src/routes/trading-view/[chain]/TopEntities.svelte b/src/routes/trading-view/[chain]/TopEntities.svelte index f4b4d6d5e..a962ddd69 100644 --- a/src/routes/trading-view/[chain]/TopEntities.svelte +++ b/src/routes/trading-view/[chain]/TopEntities.svelte @@ -50,7 +50,7 @@ padding: 0 var(--space-md) var(--space-xxs) 0; font: var(--f-ui-md-bold); letter-spacing: var(--f-ui-md-spacing); - color: hsla(var(--hsl-text-light)); + color: hsl(var(--hsl-text-light)); @media (--viewport-md-down) { font: var(--f-ui-sm-bold); diff --git a/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte b/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte index a9c5e8bea..8ab2fa794 100644 --- a/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte +++ b/src/routes/trading-view/[chain]/[exchange]/[pair]/TimePeriodPicker.svelte @@ -56,8 +56,8 @@ Radio button options to select a time period. } &.selected { - background: hsla(var(--hsl-text), 1); - color: hsla(var(--hsl-text-inverted)); + background: hsl(var(--hsl-text)); + color: hsl(var(--hsl-text-inverted)); } } diff --git a/src/routes/trading-view/top-list/+page.svelte b/src/routes/trading-view/top-list/+page.svelte index 6dae1a9bd..a70e72576 100644 --- a/src/routes/trading-view/top-list/+page.svelte +++ b/src/routes/trading-view/top-list/+page.svelte @@ -20,7 +20,7 @@ ctaLabel="View daily up" href="/trading-view/top-list/daily-up" icon="trend-up" - --icon-color="hsla(var(--hsl-bullish))" + --icon-color="hsl(var(--hsl-bullish))" >

Top daily up

@@ -33,7 +33,7 @@ ctaLabel="View daily down" href="/trading-view/top-list/daily-down" icon="trend-down" - --icon-color="hsla(var(--hsl-bearish))" + --icon-color="hsl(var(--hsl-bearish))" >

Top daily down

diff --git a/src/routes/wizard/WizardNavItem.svelte b/src/routes/wizard/WizardNavItem.svelte index 7b09ecd48..1cc2aa059 100644 --- a/src/routes/wizard/WizardNavItem.svelte +++ b/src/routes/wizard/WizardNavItem.svelte @@ -38,7 +38,7 @@ } &.disabled { - color: hsla(var(--hsl-text-extra-light)); + color: hsl(var(--hsl-text-extra-light)); cursor: not-allowed; &:hover { background: hsl(var(--hsla-box-2)); @@ -46,8 +46,8 @@ } &.completed { - background: hsla(var(--hsl-success), 0.1); - color: hsla(var(--hsl-success)); + background: hsl(var(--hsl-success) / 10%); + color: hsl(var(--hsl-success)); } } } diff --git a/src/routes/wizard/deposit/payment/+page.svelte b/src/routes/wizard/deposit/payment/+page.svelte index 8d8cc75ce..aecfe4c28 100644 --- a/src/routes/wizard/deposit/payment/+page.svelte +++ b/src/routes/wizard/deposit/payment/+page.svelte @@ -315,7 +315,7 @@ } h3 { - color: hsla(var(--hsl-text-light)); + color: hsl(var(--hsl-text-light)); font: var(--f-ui-lg-medium); margin: 0; } diff --git a/src/routes/wizard/redeem/deposit-status/+page.svelte b/src/routes/wizard/redeem/deposit-status/+page.svelte index 11f82dda0..d84a3772b 100644 --- a/src/routes/wizard/redeem/deposit-status/+page.svelte +++ b/src/routes/wizard/redeem/deposit-status/+page.svelte @@ -36,7 +36,7 @@ {#await getNativeCurrency(address)} - + {:then balance} {formatNumber(balance.formatted, 2, 4)} {/await} @@ -71,7 +71,7 @@ diff --git a/src/routes/wizard/redeem/shares-redemption/+page.svelte b/src/routes/wizard/redeem/shares-redemption/+page.svelte index 73306c916..81240cc42 100644 --- a/src/routes/wizard/redeem/shares-redemption/+page.svelte +++ b/src/routes/wizard/redeem/shares-redemption/+page.svelte @@ -253,7 +253,7 @@ } h3 { - color: hsla(var(--hsl-text-light)); + color: hsl(var(--hsl-text-light)); font: var(--f-ui-lg-medium); margin: 0; } diff --git a/src/routes/wizard/redeem/success/+page.svelte b/src/routes/wizard/redeem/success/+page.svelte index fda6a2830..89c2318a2 100644 --- a/src/routes/wizard/redeem/success/+page.svelte +++ b/src/routes/wizard/redeem/success/+page.svelte @@ -39,7 +39,7 @@ } h3 { - color: hsla(var(--hsl-text-light)); + color: hsl(var(--hsl-text-light)); font: var(--f-ui-lg-medium); } From c77d4d3a5dfb3abc1a9676b1bcb6edba30affd12 Mon Sep 17 00:00:00 2001 From: Ken Kunz Date: Sun, 19 Nov 2023 23:25:18 -0600 Subject: [PATCH 7/7] fix failing test --- src/routes/search/SearchPanel.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/search/SearchPanel.test.ts b/src/routes/search/SearchPanel.test.ts index 2aa18ab2c..1497fd979 100644 --- a/src/routes/search/SearchPanel.test.ts +++ b/src/routes/search/SearchPanel.test.ts @@ -15,7 +15,7 @@ const defaultProps = { describe('SearchPanel component', () => { test('should display "search for" fallback when no search criteria', async () => { const { getByText, queryAllByRole } = render(SearchPanel, defaultProps); - getByText('Search exchanges, tokens and trading pairs.'); + getByText('Search exchanges, tokens, trading pairs and lending reserves.'); expect(queryAllByRole('listitem')).toHaveLength(0); });