From 9cd25721409549942e8e9613ce8dcb3ecf90ec5b Mon Sep 17 00:00:00 2001 From: runningonsideprojects Date: Tue, 2 Jun 2026 23:35:33 -0400 Subject: [PATCH 1/4] implemente all features --- client/modules/IDE/components/Header/Nav.jsx | 2 +- client/styles/abstracts/_variables.scss | 99 ++++++++-------- client/styles/components/_nav.scss | 117 +++++++++++-------- 3 files changed, 119 insertions(+), 99 deletions(-) diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx index cc53134bbe..92e884992d 100644 --- a/client/modules/IDE/components/Header/Nav.jsx +++ b/client/modules/IDE/components/Header/Nav.jsx @@ -185,7 +185,7 @@ const ProjectMenu = () => { isDisabled={ !user.authenticated || !isLoginEnabled || - (!!project?.owner && !isUserOwner) + (!project?.owner && !isUserOwner) } tooltipContent={ !user.authenticated || !isLoginEnabled diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 46bdd7bc1b..4a55f9c14d 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -6,33 +6,33 @@ $p5js-pink-opacity: #ed225d80; $p5js-active-pink: #f10046; $white: #fff; $black: #000; -$yellow: #F5DC23; -$dodgerblue: #1E90FF; -$p5-contrast-pink: #FFA9D9; +$yellow: #f5dc23; +$dodgerblue: #1e90ff; +$p5-contrast-pink: #ffa9d9; -$outline-color: #0F9DD7; +$outline-color: #0f9dd7; // Grayscale values -$lightest: #FFF; // primary -$lighter: #FBFBFB; +$lightest: #fff; // primary +$lighter: #fbfbfb; -$light: #F0F0F0; // primary -$medium-light: #D9D9D9; -$middle-light: #A6A6A6; +$light: #f0f0f0; // primary +$medium-light: #d9d9d9; +$middle-light: #a6a6a6; // $middle-gray: #7D7D7D; // primary $middle-gray: #747474; // primary $middle-dark: #666; -$medium-dark: #4D4D4D; +$medium-dark: #4d4d4d; $dark: #333; // primary -$darker: #1C1C1C; +$darker: #1c1c1c; $darkest: #000; $themes: ( light: ( - admonition-background: #E4F8FF, - admonition-border: #22C8ED, + admonition-background: #e4f8ff, + admonition-border: #22c8ed, admonition-text: #075769, background-color: $lighter, button-active-color: $lightest, @@ -42,11 +42,12 @@ $themes: ( button-border-color: $middle-light, button-color: $black, button-hover-color: $lightest, - button-nav-inactive-color: $middle-gray, + button-nav-active-color: $darker, + button-nav-inactive-color: $middle-dark, button-secondary-background-color: $medium-light, - codefold-icon-closed: url("../images/triangle-arrow-right.svg?byUrl"), - codefold-icon-open: url("../images/triangle-arrow-down.svg?byUrl"), - console-active-arrow-color: #0071AD, + codefold-icon-closed: url('../images/triangle-arrow-right.svg?byUrl'), + codefold-icon-open: url('../images/triangle-arrow-down.svg?byUrl'), + console-active-arrow-color: #0071ad, console-arrow-color: $middle-gray, console-background-color: $light, console-color: $darker, @@ -68,8 +69,8 @@ $themes: ( hint-arrow-color: $lightest, hint-arrow-focus-outline-color: $middle-dark, hint-background-color: $white, - hint-fun-active-border-bottom-color: #0B7CA9, - hint-fun-text-color: #0B7CA9, + hint-fun-active-border-bottom-color: #0b7ca9, + hint-fun-text-color: #0b7ca9, hint-inline-text-color-light: $middle-light, hint-inline-text-color: $middle-gray, hint-item-active-background-color: $middle-gray, @@ -79,12 +80,12 @@ $themes: ( hint-item-active-type-text-color: $white, hint-item-border-bottom-color: $white, hint-item-hover-background-color: #f4f4f4, - hint-keyword-text-color: #7A5A3A, + hint-keyword-text-color: #7a5a3a, hint-no-link-background-color: $medium-light, hint-text-color: $dark, hint-type-text-color: $medium-dark, - hint-var-active-border-bottom-color: #D52889, - hint-var-text-color: #D52889, + hint-var-active-border-bottom-color: #d52889, + hint-var-text-color: #d52889, icon-color: $middle-gray, icon-hover-color: $darker, icon-toast-hover-color: $lightest, @@ -117,7 +118,7 @@ $themes: ( secondary-text-color: $medium-dark, shadow-color: rgba(0, 0, 0, 0.16), table-button-active-color: $lightest, - table-button-background-active-color: #00A1D3, + table-button-background-active-color: #00a1d3, table-button-background-color: $middle-gray, table-button-background-hover-color: $p5js-pink, table-button-color: $lightest, @@ -127,12 +128,12 @@ $themes: ( toast-background-color: $medium-dark, toast-text-color: $lightest, toolbar-button-background-color: $medium-light, - toolbar-button-color: $dark, + toolbar-button-color: $dark ), dark: ( - admonition-background: #105A7F, - admonition-border: #22C8ED, - admonition-text: #FFFFFF, + admonition-background: #105a7f, + admonition-border: #22c8ed, + admonition-text: #ffffff, background-color: $darker, button-active-color: $lightest, button-background-active-color: $p5js-active-pink, @@ -141,11 +142,12 @@ $themes: ( button-border-color: $middle-dark, button-color: $light, button-hover-color: $lightest, + button-nav-active-color: $lightest, button-nav-inactive-color: $middle-light, button-secondary-background-color: $medium-dark, - codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"), - codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"), - console-active-arrow-color: #097BB3, + codefold-icon-closed: url('../images/triangle-arrow-right-white.svg?byUrl'), + codefold-icon-open: url('../images/triangle-arrow-down-white.svg?byUrl'), + console-active-arrow-color: #097bb3, console-arrow-color: $medium-light, console-background-color: $dark, console-color: $lightest, @@ -166,8 +168,8 @@ $themes: ( hint-arrow-color: $lightest, hint-arrow-focus-outline-color: #cfcfcf, hint-background-color: $darker, - hint-fun-active-border-bottom-color: #0F9DD7, - hint-fun-text-color: #0F9DD7, + hint-fun-active-border-bottom-color: #0f9dd7, + hint-fun-text-color: #0f9dd7, hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, hint-item-active-background-color: #cfcfcf, @@ -177,12 +179,12 @@ $themes: ( hint-item-active-type-text-color: $darker, hint-item-border-bottom-color: $darker, hint-item-hover-background-color: $medium-dark, - hint-keyword-text-color: #B58318, + hint-keyword-text-color: #b58318, hint-no-link-background-color: $medium-dark, hint-text-color: $light, hint-type-text-color: $light, - hint-var-active-border-bottom-color: #DE4A9B, - hint-var-text-color: #DE4A9B, + hint-var-active-border-bottom-color: #de4a9b, + hint-var-text-color: #de4a9b, icon-color: $middle-light, icon-hover-color: $lightest, icon-toast-hover-color: $lightest, @@ -215,7 +217,7 @@ $themes: ( secondary-text-color: $medium-light, shadow-color: rgba(0, 0, 0, 0.16), table-button-active-color: $lightest, - table-button-background-active-color: #00A1D3, + table-button-background-active-color: #00a1d3, table-button-background-color: $middle-gray, table-button-background-hover-color: $p5js-pink, table-button-color: $lightest, @@ -225,11 +227,11 @@ $themes: ( toast-background-color: $medium-light, toast-text-color: $dark, toolbar-button-background-color: $medium-dark, - toolbar-button-color: $lightest, + toolbar-button-color: $lightest ), contrast: ( admonition-background: #000000, - admonition-border: #22C8ED, + admonition-border: #22c8ed, admonition-text: #ffffff, background-color: $darker, button-active-color: $dark, @@ -239,10 +241,11 @@ $themes: ( button-border-color: $middle-dark, button-color: $light, button-hover-color: $dark, - button-nav-inactive-color: $light, + button-nav-active-color: $lightest, + button-nav-inactive-color: $middle-light, button-secondary-background-color: $medium-dark, - codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"), - codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"), + codefold-icon-closed: url('../images/triangle-arrow-right-white.svg?byUrl'), + codefold-icon-open: url('../images/triangle-arrow-down-white.svg?byUrl'), console-active-arrow-color: $dodgerblue, console-arrow-color: $lightest, console-background-color: $dark, @@ -258,13 +261,13 @@ $themes: ( form-secondary-title-color: $medium-light, form-title-color: $lightest, heavy-text-color: $yellow, - hint-arrow-background-active-color: #F5DC23, - hint-arrow-background-color: #F5DC23DD, + hint-arrow-background-active-color: #f5dc23, + hint-arrow-background-color: #f5dc23dd, hint-arrow-color: $darker, hint-arrow-focus-outline-color: $lighter, hint-background-color: $darkest, hint-fun-active-border-bottom-color: none, - hint-fun-text-color: #00FFFF, + hint-fun-text-color: #00ffff, hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, hint-item-active-background-color: unset, @@ -274,12 +277,12 @@ $themes: ( hint-item-active-type-text-color: $lighter, hint-item-border-bottom-color: $medium-dark, hint-item-hover-background-color: $dark, - hint-keyword-text-color: #F5DC23, + hint-keyword-text-color: #f5dc23, hint-no-link-background-color: $medium-dark, hint-text-color: $medium-light, hint-type-text-color: $middle-light, hint-var-active-border-bottom-color: none, - hint-var-text-color: #FFA9D9, + hint-var-text-color: #ffa9d9, icon-color: $medium-light, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, @@ -312,7 +315,7 @@ $themes: ( secondary-text-color: $lighter, shadow-color: rgba(0, 0, 0, 0.16), table-button-active-color: $dark, - table-button-background-active-color: #00FFFF, + table-button-background-active-color: #00ffff, table-button-background-color: $middle-gray, table-button-background-hover-color: $yellow, table-button-color: $dark, @@ -322,6 +325,6 @@ $themes: ( toast-background-color: $medium-light, toast-text-color: $darker, toolbar-button-background-color: $medium-light, - toolbar-button-color: $dark, + toolbar-button-color: $dark ) ); diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index 02bf0d0567..005c279d8e 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -27,7 +27,7 @@ .nav__menubar { display: flex; flex-direction: row; - width:100%; + width: 100%; justify-content: space-between; } @@ -57,11 +57,11 @@ } // base focus styles -.nav__item button:focus { +.nav__item button:focus { @include themify() { background-color: getThemifyVariable('nav-hover-color'); } - + .nav__item-header { @include themify() { color: getThemifyVariable('button-hover-color'); @@ -73,11 +73,13 @@ @include themify() { fill: getThemifyVariable('button-hover-color'); } - } + } } - .nav__dropdown-item { + @include themify() { + color: getThemifyVariable('button-nav-active-color'); + } & button:focus, & a:focus { @include themify() { @@ -93,18 +95,52 @@ } &.nav__dropdown-item--disabled { - & button, - & a, - & button:hover, - & a:hover { + &:hover { @include themify() { + background-color: transparent; color: getThemifyVariable('button-nav-inactive-color'); + cursor: not-allowed; } + } - & .nav__keyboard-shortcut { - @include themify() { - color: getThemifyVariable('button-nav-inactive-color'); - } + & .tooltip-wrapper button, + & .tooltip-wrapper a, + &:hover .tooltip-wrapper button, + &:hover .tooltip-wrapper a, + & .tooltip-wrapper button:active, + & .tooltip-wrapper a:active { + @include themify() { + color: getThemifyVariable('button-nav-inactive-color'); + background-color: transparent; + cursor: not-allowed; + } + } + + & .nav__keyboard-shortcut, + &:hover .nav__keyboard-shortcut, + & .tooltip-wrapper button:hover .nav__keyboard-shortcut, + & .tooltip-wrapper button:focus .nav__keyboard-shortcut { + @include themify() { + color: getThemifyVariable('button-nav-inactive-color'); + } + } + } + & button, + & a, + & .tooltip-wrapper button, + & .tooltip-wrapper a { + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + &:hover { + & .tooltip-wrapper button, + & .tooltip-wrapper a { + @include themify() { + color: getThemifyVariable('button-hover-color'); } } } @@ -135,8 +171,9 @@ color: getThemifyVariable('button-hover-color'); } } - - & g, & path { + + & g, + & path { @include themify() { fill: getThemifyVariable('nav-hover-color'); } @@ -154,7 +191,8 @@ @include themify() { color: getThemifyVariable('nav-hover-color'); } - & g, & path { + & g, + & path { @include themify() { fill: getThemifyVariable('nav-hover-color'); } @@ -162,17 +200,17 @@ } .nav__item-header-triangle { - margin-left: #{math.div(5, $base-font-size)}rem; + margin-left: #{math.div(5, $base-font-size)}rem; } .nav__dropdown { @include themify() { - color: getThemifyVariable('nav-hover-color'); - } + color: getThemifyVariable('nav-hover-color'); + } } .nav__item-header-triangle { - margin-left: #{math.div(5, $base-font-size)}rem; + margin-left: #{math.div(5, $base-font-size)}rem; } .nav__dropdown { @@ -183,6 +221,11 @@ .nav__item--open & { display: flex; } + // & li.nav__dropdown-item--disabled:hover { + // @include themify() { + // color: getThemifyVariable('button-nav-inactive-color'); + // } + // } } .nav__items-right { @@ -214,28 +257,6 @@ // padding: 0; // } -.nav__dropdown-item { - & button, - & a, - & .tooltip-wrapper button, - & .tooltip-wrapper a { - width: 100%; - height: 100%; - display: flex; - justify-content: space-between; - align-items: center; - } - - &:hover { - & .tooltip-wrapper button, - & .tooltip-wrapper a { - @include themify() { - color: getThemifyVariable('button-hover-color'); - } - } - } -} - .nav__item-logo { position: relative; height: #{math.div(42, $base-font-size)}rem; @@ -247,24 +268,19 @@ } .svg__logo { - @include themify() { // Set background color of the logo background-color: getThemifyVariable('logo-color'); } - } -.svg__logo g path{ - +.svg__logo g path { @include themify() { // Set internal color of the logo; fill: getThemifyVariable('logo-background-color'); } - } - .nav__keyboard-shortcut { font-size: #{math.div(12, $base-font-size)}rem; font-family: Inconsololata, monospace; @@ -282,7 +298,8 @@ } .nav__back-icon { - & g, & path { + & g, + & path { opacity: 1; @include themify() { fill: getThemifyVariable('inactive-text-color'); @@ -297,4 +314,4 @@ width: 100%; height: 100%; text-decoration: none; -} \ No newline at end of file +} From 85bccc65951738da9551168bb0faf1747d9667d9 Mon Sep 17 00:00:00 2001 From: runningonsideprojects Date: Thu, 4 Jun 2026 12:31:08 -0400 Subject: [PATCH 2/4] deleted commented line --- client/styles/components/_nav.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index 005c279d8e..ec33949652 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -221,11 +221,6 @@ .nav__item--open & { display: flex; } - // & li.nav__dropdown-item--disabled:hover { - // @include themify() { - // color: getThemifyVariable('button-nav-inactive-color'); - // } - // } } .nav__items-right { From a39b17f11c59418d039327c5f595bdd41f77310d Mon Sep 17 00:00:00 2001 From: runningonsideprojects Date: Thu, 4 Jun 2026 12:51:20 -0400 Subject: [PATCH 3/4] before swiviling --- client/modules/IDE/components/Header/Nav.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx index 92e884992d..cc53134bbe 100644 --- a/client/modules/IDE/components/Header/Nav.jsx +++ b/client/modules/IDE/components/Header/Nav.jsx @@ -185,7 +185,7 @@ const ProjectMenu = () => { isDisabled={ !user.authenticated || !isLoginEnabled || - (!project?.owner && !isUserOwner) + (!!project?.owner && !isUserOwner) } tooltipContent={ !user.authenticated || !isLoginEnabled From cf0cb2adaa17a54b6dc8cda989bdd9fca8f4e4bd Mon Sep 17 00:00:00 2001 From: runningonsideprojects Date: Thu, 4 Jun 2026 13:32:39 -0400 Subject: [PATCH 4/4] got rid of linting / formattting conflicts --- client/styles/abstracts/_variables.scss | 92 ++++++++++++------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 4a55f9c14d..21082114d9 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -6,33 +6,33 @@ $p5js-pink-opacity: #ed225d80; $p5js-active-pink: #f10046; $white: #fff; $black: #000; -$yellow: #f5dc23; -$dodgerblue: #1e90ff; -$p5-contrast-pink: #ffa9d9; +$yellow: #F5DC23; +$dodgerblue: #1E90FF; +$p5-contrast-pink: #FFA9D9; -$outline-color: #0f9dd7; +$outline-color: #0F9DD7; // Grayscale values -$lightest: #fff; // primary -$lighter: #fbfbfb; +$lightest: #FFF; // primary +$lighter: #FBFBFB; -$light: #f0f0f0; // primary -$medium-light: #d9d9d9; -$middle-light: #a6a6a6; +$light: #F0F0F0; // primary +$medium-light: #D9D9D9; +$middle-light: #A6A6A6; // $middle-gray: #7D7D7D; // primary $middle-gray: #747474; // primary $middle-dark: #666; -$medium-dark: #4d4d4d; +$medium-dark: #4D4D4D; $dark: #333; // primary -$darker: #1c1c1c; +$darker: #1C1C1C; $darkest: #000; $themes: ( light: ( - admonition-background: #e4f8ff, - admonition-border: #22c8ed, + admonition-background: #E4F8FF, + admonition-border: #22C8ED, admonition-text: #075769, background-color: $lighter, button-active-color: $lightest, @@ -45,9 +45,9 @@ $themes: ( button-nav-active-color: $darker, button-nav-inactive-color: $middle-dark, button-secondary-background-color: $medium-light, - codefold-icon-closed: url('../images/triangle-arrow-right.svg?byUrl'), - codefold-icon-open: url('../images/triangle-arrow-down.svg?byUrl'), - console-active-arrow-color: #0071ad, + codefold-icon-closed: url("../images/triangle-arrow-right.svg?byUrl"), + codefold-icon-open: url("../images/triangle-arrow-down.svg?byUrl"), + console-active-arrow-color: #0071AD, console-arrow-color: $middle-gray, console-background-color: $light, console-color: $darker, @@ -69,8 +69,8 @@ $themes: ( hint-arrow-color: $lightest, hint-arrow-focus-outline-color: $middle-dark, hint-background-color: $white, - hint-fun-active-border-bottom-color: #0b7ca9, - hint-fun-text-color: #0b7ca9, + hint-fun-active-border-bottom-color: #0B7CA9, + hint-fun-text-color: #0B7CA9, hint-inline-text-color-light: $middle-light, hint-inline-text-color: $middle-gray, hint-item-active-background-color: $middle-gray, @@ -80,12 +80,12 @@ $themes: ( hint-item-active-type-text-color: $white, hint-item-border-bottom-color: $white, hint-item-hover-background-color: #f4f4f4, - hint-keyword-text-color: #7a5a3a, + hint-keyword-text-color: #7A5A3A, hint-no-link-background-color: $medium-light, hint-text-color: $dark, hint-type-text-color: $medium-dark, - hint-var-active-border-bottom-color: #d52889, - hint-var-text-color: #d52889, + hint-var-active-border-bottom-color: #D52889, + hint-var-text-color: #D52889, icon-color: $middle-gray, icon-hover-color: $darker, icon-toast-hover-color: $lightest, @@ -118,7 +118,7 @@ $themes: ( secondary-text-color: $medium-dark, shadow-color: rgba(0, 0, 0, 0.16), table-button-active-color: $lightest, - table-button-background-active-color: #00a1d3, + table-button-background-active-color: #00A1D3, table-button-background-color: $middle-gray, table-button-background-hover-color: $p5js-pink, table-button-color: $lightest, @@ -128,12 +128,12 @@ $themes: ( toast-background-color: $medium-dark, toast-text-color: $lightest, toolbar-button-background-color: $medium-light, - toolbar-button-color: $dark + toolbar-button-color: $dark, ), dark: ( - admonition-background: #105a7f, - admonition-border: #22c8ed, - admonition-text: #ffffff, + admonition-background: #105A7F, + admonition-border: #22C8ED, + admonition-text: #FFFFFF, background-color: $darker, button-active-color: $lightest, button-background-active-color: $p5js-active-pink, @@ -145,9 +145,9 @@ $themes: ( button-nav-active-color: $lightest, button-nav-inactive-color: $middle-light, button-secondary-background-color: $medium-dark, - codefold-icon-closed: url('../images/triangle-arrow-right-white.svg?byUrl'), - codefold-icon-open: url('../images/triangle-arrow-down-white.svg?byUrl'), - console-active-arrow-color: #097bb3, + codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"), + codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"), + console-active-arrow-color: #097BB3, console-arrow-color: $medium-light, console-background-color: $dark, console-color: $lightest, @@ -168,8 +168,8 @@ $themes: ( hint-arrow-color: $lightest, hint-arrow-focus-outline-color: #cfcfcf, hint-background-color: $darker, - hint-fun-active-border-bottom-color: #0f9dd7, - hint-fun-text-color: #0f9dd7, + hint-fun-active-border-bottom-color: #0F9DD7, + hint-fun-text-color: #0F9DD7, hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, hint-item-active-background-color: #cfcfcf, @@ -179,12 +179,12 @@ $themes: ( hint-item-active-type-text-color: $darker, hint-item-border-bottom-color: $darker, hint-item-hover-background-color: $medium-dark, - hint-keyword-text-color: #b58318, + hint-keyword-text-color: #B58318, hint-no-link-background-color: $medium-dark, hint-text-color: $light, hint-type-text-color: $light, - hint-var-active-border-bottom-color: #de4a9b, - hint-var-text-color: #de4a9b, + hint-var-active-border-bottom-color: #DE4A9B, + hint-var-text-color: #DE4A9B, icon-color: $middle-light, icon-hover-color: $lightest, icon-toast-hover-color: $lightest, @@ -217,7 +217,7 @@ $themes: ( secondary-text-color: $medium-light, shadow-color: rgba(0, 0, 0, 0.16), table-button-active-color: $lightest, - table-button-background-active-color: #00a1d3, + table-button-background-active-color: #00A1D3, table-button-background-color: $middle-gray, table-button-background-hover-color: $p5js-pink, table-button-color: $lightest, @@ -227,11 +227,11 @@ $themes: ( toast-background-color: $medium-light, toast-text-color: $dark, toolbar-button-background-color: $medium-dark, - toolbar-button-color: $lightest + toolbar-button-color: $lightest, ), contrast: ( admonition-background: #000000, - admonition-border: #22c8ed, + admonition-border: #22C8ED, admonition-text: #ffffff, background-color: $darker, button-active-color: $dark, @@ -244,8 +244,8 @@ $themes: ( button-nav-active-color: $lightest, button-nav-inactive-color: $middle-light, button-secondary-background-color: $medium-dark, - codefold-icon-closed: url('../images/triangle-arrow-right-white.svg?byUrl'), - codefold-icon-open: url('../images/triangle-arrow-down-white.svg?byUrl'), + codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"), + codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"), console-active-arrow-color: $dodgerblue, console-arrow-color: $lightest, console-background-color: $dark, @@ -261,13 +261,13 @@ $themes: ( form-secondary-title-color: $medium-light, form-title-color: $lightest, heavy-text-color: $yellow, - hint-arrow-background-active-color: #f5dc23, - hint-arrow-background-color: #f5dc23dd, + hint-arrow-background-active-color: #F5DC23, + hint-arrow-background-color: #F5DC23DD, hint-arrow-color: $darker, hint-arrow-focus-outline-color: $lighter, hint-background-color: $darkest, hint-fun-active-border-bottom-color: none, - hint-fun-text-color: #00ffff, + hint-fun-text-color: #00FFFF, hint-inline-text-color-light: $middle-gray, hint-inline-text-color: #cfcfcf, hint-item-active-background-color: unset, @@ -277,12 +277,12 @@ $themes: ( hint-item-active-type-text-color: $lighter, hint-item-border-bottom-color: $medium-dark, hint-item-hover-background-color: $dark, - hint-keyword-text-color: #f5dc23, + hint-keyword-text-color: #F5DC23, hint-no-link-background-color: $medium-dark, hint-text-color: $medium-light, hint-type-text-color: $middle-light, hint-var-active-border-bottom-color: none, - hint-var-text-color: #ffa9d9, + hint-var-text-color: #FFA9D9, icon-color: $medium-light, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, @@ -315,7 +315,7 @@ $themes: ( secondary-text-color: $lighter, shadow-color: rgba(0, 0, 0, 0.16), table-button-active-color: $dark, - table-button-background-active-color: #00ffff, + table-button-background-active-color: #00FFFF, table-button-background-color: $middle-gray, table-button-background-hover-color: $yellow, table-button-color: $dark, @@ -325,6 +325,6 @@ $themes: ( toast-background-color: $medium-light, toast-text-color: $darker, toolbar-button-background-color: $medium-light, - toolbar-button-color: $dark + toolbar-button-color: $dark, ) );