From 30e6f64c18750bee791d78865238a0e33d18a081 Mon Sep 17 00:00:00 2001 From: Thomas Sparks <69657545+thsparks@users.noreply.github.com> Date: Wed, 26 Feb 2025 16:57:27 -0800 Subject: [PATCH] Add Themes for Arcade (and bump pxt-core) (#6732) This adds light, legacy, and dark themes for arcade, based on changes in microsoft/pxt#10391 It also bumps pxt-core to get those changes. --- package.json | 2 +- pxtarget.json | 2 + theme/blockly-toolbox.less | 4 +- theme/color-themes/arcade-dark.json | 120 ++++++++++++++++++ theme/color-themes/arcade-legacy.json | 110 ++++++++++++++++ theme/color-themes/arcade-light.json | 110 ++++++++++++++++ .../overrides/arcade-dark-overrides.css | 32 +++++ theme/site/globals/site.variables | 84 +----------- theme/site/views/card.overrides | 4 - theme/style.less | 40 +++--- 10 files changed, 406 insertions(+), 102 deletions(-) create mode 100644 theme/color-themes/arcade-dark.json create mode 100644 theme/color-themes/arcade-legacy.json create mode 100644 theme/color-themes/arcade-light.json create mode 100644 theme/color-themes/overrides/arcade-dark-overrides.css diff --git a/package.json b/package.json index f285bdafa34..24f80a6c788 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ }, "dependencies": { "pxt-common-packages": "12.2.5", - "pxt-core": "11.3.22" + "pxt-core": "11.3.26" }, "optionalDependencies": { "pxt-arcade-sim": "microsoft/pxt-arcade-sim.git#v0.11.13" diff --git a/pxtarget.json b/pxtarget.json index 538a6e20294..afc36a4acd6 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -621,6 +621,8 @@ "arrays": "#FF8F08", "functions": "#1446A0" }, + "defaultColorTheme": "arcade-light", + "highContrastColorTheme": "pxt-high-contrast", "simAnimationEnter": "fly right in", "simAnimationExit": "fly right out", "crowdinProject": "makecode", diff --git a/theme/blockly-toolbox.less b/theme/blockly-toolbox.less index 0759875375e..973c7a77351 100644 --- a/theme/blockly-toolbox.less +++ b/theme/blockly-toolbox.less @@ -7,7 +7,7 @@ div.blocklyTreeRow { margin-bottom: 0px !important; transition-property: background-color; - transition-duration: 1s; + transition-duration: 0.2s; } .blocklyToolboxDiv, .monacoToolboxDiv { @@ -26,4 +26,4 @@ div.blocklyTreeRow { .blocklyToolboxDiv, .monacoToolboxDiv { border-left: 0 !important; } -} \ No newline at end of file +} diff --git a/theme/color-themes/arcade-dark.json b/theme/color-themes/arcade-dark.json new file mode 100644 index 00000000000..28bb609881d --- /dev/null +++ b/theme/color-themes/arcade-dark.json @@ -0,0 +1,120 @@ +{ + "id": "arcade-dark", + "name": "Arcade Dark", + "weight": 60, + "monacoBaseTheme": "vs-dark", + "overrideFiles": [ + "/overrides/arcade-dark-overrides.css" + ], + "colors": { + "pxt-header-background": "#181818", + "pxt-header-foreground": "#ffffff", + "pxt-header-background-hover": "#252525", + "pxt-header-foreground-hover": "#ffffff", + "pxt-header-stencil": "#323232", + + "pxt-primary-background": "#0078D4", + "pxt-primary-foreground": "#ffffff", + "pxt-primary-background-hover": "#026EC1", + "pxt-primary-foreground-hover": "#ffffff", + "pxt-primary-accent": "#005ba1", + + "pxt-secondary-background": "#63276d", + "pxt-secondary-foreground": "#f3f2f1", + "pxt-secondary-background-hover": "#742e80", + "pxt-secondary-foreground-hover": "#f3f2f1", + "pxt-secondary-accent": "#63276d", + + "pxt-tertiary-background": "#0078d4", + "pxt-tertiary-foreground": "#ffffff", + "pxt-tertiary-background-hover": "#026EC1", + "pxt-tertiary-foreground-hover": "#ffffff", + "pxt-tertiary-accent": "#0894ff", + + "pxt-target-background1": "#1F1F1F", + "pxt-target-foreground1": "#f3f2f1", + "pxt-target-background1-hover": "#2c2c2c", + "pxt-target-foreground1-hover": "#ffffff", + "pxt-target-stencil1": "#3b3a39", + + "pxt-target-background2": "#181818", + "pxt-target-foreground2": "#ffffff", + "pxt-target-background2-hover": "#252525", + "pxt-target-foreground2-hover": "#ffffff", + "pxt-target-stencil2": "#323232", + + "pxt-target-background3": "#181818", + "pxt-target-foreground3": "#ffffff", + "pxt-target-background3-hover": "#252525", + "pxt-target-foreground3-hover": "#ffffff", + "pxt-target-stencil3": "#323232", + + "pxt-neutral-background1": "#1F1F1F", + "pxt-neutral-foreground1": "#f3f2f1", + "pxt-neutral-background1-hover": "#2c2c2c", + "pxt-neutral-foreground1-hover": "#ffffff", + "pxt-neutral-stencil1": "#3b3a39", + + "pxt-neutral-background2": "#181818", + "pxt-neutral-foreground2": "#ffffff", + "pxt-neutral-background2-hover": "#252525", + "pxt-neutral-foreground2-hover": "#ffffff", + "pxt-neutral-stencil2": "#3b3a39", + + "pxt-neutral-background3": "#1F1F1F", + "pxt-neutral-foreground3": "#f3f2f1", + "pxt-neutral-background3-hover": "#2c2c2c", + "pxt-neutral-foreground3-hover": "#ffffff", + "pxt-neutral-stencil3": "#3b3a39", + "pxt-neutral-background3-alpha90": "#3b3a39", + + "pxt-neutral-alpha0": "rgba(180, 180, 180, 0)", + "pxt-neutral-alpha10": "rgba(180, 180, 180, 0.1)", + "pxt-neutral-alpha20": "rgba(180, 180, 180, 0.2)", + "pxt-neutral-alpha50": "rgba(180, 180, 180, 0.5)", + + "pxt-link": "#479ef5", + "pxt-link-hover": "#62abf5", + "pxt-focus-border": "#5caae5", + + "pxt-colors-purple-background": "#63276d", + "pxt-colors-purple-foreground": "#f3f2f1", + "pxt-colors-purple-hover": "#742e80", + "pxt-colors-purple-alpha10": "#63276d19", + + "pxt-colors-orange-background": "#7a2101", + "pxt-colors-orange-foreground": "#ffffff", + "pxt-colors-orange-hover": "#932801", + "pxt-colors-orange-alpha10": "#7a210119", + + "pxt-colors-brown-background": "#50301a", + "pxt-colors-brown-foreground": "#ffffff", + "pxt-colors-brown-hover": "#633c20", + "pxt-colors-brown-alpha10": "#50301a19", + + "pxt-colors-blue-background": "#0078D4", + "pxt-colors-blue-foreground": "#ffffff", + "pxt-colors-blue-hover": "#026EC1", + "pxt-colors-blue-alpha10": "#0078D419", + + "pxt-colors-green-background": "#27ae60", + "pxt-colors-green-foreground": "#ffffff", + "pxt-colors-green-hover": "#1e8449", + "pxt-colors-green-alpha10": "#27ae6019", + + "pxt-colors-red-background": "#e74c3c", + "pxt-colors-red-foreground": "#ffffff", + "pxt-colors-red-hover": "#c0392b", + "pxt-colors-red-alpha10": "#e74c3c19", + + "pxt-colors-teal-background": "#1abc9c", + "pxt-colors-teal-foreground": "#ffffff", + "pxt-colors-teal-hover": "#16a085", + "pxt-colors-teal-alpha10": "#1abc9c19", + + "pxt-colors-yellow-background": "#fde300", + "pxt-colors-yellow-foreground": "#000000", + "pxt-colors-yellow-hover": "#e4cc00", + "pxt-colors-yellow-alpha10": "#fde30019" + } +} diff --git a/theme/color-themes/arcade-legacy.json b/theme/color-themes/arcade-legacy.json new file mode 100644 index 00000000000..7a6c4c7620d --- /dev/null +++ b/theme/color-themes/arcade-legacy.json @@ -0,0 +1,110 @@ +{ + "id": "arcade-legacy", + "name": "Arcade Legacy", + "weight": 20, + "overrideFiles": [], + "colors": { + "pxt-header-background": "#F76820", + "pxt-header-foreground": "#FFFFFF", + "pxt-header-background-hover": "#ab3d06", + "pxt-header-foreground-hover": "#FFFFFF", + "pxt-header-stencil": "#dc4f08", + + "pxt-primary-background": "#F76820", + "pxt-primary-foreground": "#FFFFFF", + "pxt-primary-background-hover": "#dc4f08", + "pxt-primary-foreground-hover": "#FFFFFF", + "pxt-primary-accent": "#C5561F", + + "pxt-secondary-background": "#028B9B", + "pxt-secondary-background-hover": "#015e69", + "pxt-secondary-foreground": "#FFFFFF", + "pxt-secondary-foreground-hover": "#FFFFFF", + "pxt-secondary-accent": "#58afba", + + "pxt-tertiary-background": "#028B9B", + "pxt-tertiary-foreground": "#FFFFFF", + "pxt-tertiary-background-hover": "#015e69", + "pxt-tertiary-foreground-hover": "#FFFFFF", + "pxt-tertiary-accent": "#013136", + + "pxt-target-background1": "#FEF3E0", + "pxt-target-foreground1": "#000000", + "pxt-target-background1-hover": "#fce0af", + "pxt-target-foreground1-hover": "#000000", + "pxt-target-stencil1": "#e4d9c7", + + "pxt-target-background2": "#B1E1DA", + "pxt-target-foreground2": "#000000", + "pxt-target-background2-hover": "#8cd3c9", + "pxt-target-foreground2-hover": "#000000", + "pxt-target-stencil2": "#b0b0b0", + + "pxt-target-background3": "#FEF3E0", + "pxt-target-foreground3": "#000000", + "pxt-target-background3-hover": "#E4E4E4", + "pxt-target-foreground3-hover": "#000000", + "pxt-target-stencil3": "#e4d9c7", + + "pxt-neutral-background1": "#FFFFFF", + "pxt-neutral-foreground1": "rgba(0,0,0,.85)", + "pxt-neutral-background1-hover": "#f2f2f2", + "pxt-neutral-foreground1-hover": "rgba(0,0,0,.85)", + "pxt-neutral-stencil1": "rgba(34, 36, 38, .15)", + + "pxt-neutral-background2": "#F8F8F8", + "pxt-neutral-foreground2": "rgba(0,0,0,.85)", + "pxt-neutral-background2-hover": "#ebebeb", + "pxt-neutral-foreground2-hover": "rgba(0,0,0,.85)", + "pxt-neutral-stencil2": "#e9eef2", + + "pxt-neutral-background3": "#4e5758", + "pxt-neutral-foreground3": "#FFFFFF", + "pxt-neutral-background3-hover": "#424a4a", + "pxt-neutral-foreground3-hover": "#FFFFFF", + "pxt-neutral-stencil3": "#FFFFFF", + "pxt-neutral-background3-alpha90": "#4E5758E5", + + "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)", + "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)", + "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)", + "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)", + + "pxt-link": "#3977B4", + "pxt-link-hover": "#204467", + "pxt-focus-border": "#0078D4", + + "pxt-colors-purple-background": "#6B4F76", + "pxt-colors-purple-foreground": "#FFFFFF", + "pxt-colors-purple-hover": "#4f3b57", + "pxt-colors-purple-alpha10": "#6b4f7619", + "pxt-colors-orange-background": "#ff7f50", + "pxt-colors-orange-foreground": "#FFFFFF", + "pxt-colors-orange-hover": "#ff5a1d", + "pxt-colors-orange-alpha10": "#ff7f5019", + "pxt-colors-brown-background": "#663905", + "pxt-colors-brown-foreground": "#FFFFFF", + "pxt-colors-brown-hover": "#351e03", + "pxt-colors-brown-alpha10": "#66390519", + "pxt-colors-blue-background": "#028b9b", + "pxt-colors-blue-foreground": "#FFFFFF", + "pxt-colors-blue-hover": "#015e69", + "pxt-colors-blue-alpha10": "#028b9b19", + "pxt-colors-green-background": "#2ecc71", + "pxt-colors-green-foreground": "#FFFFFF", + "pxt-colors-green-hover": "#22be64", + "pxt-colors-green-alpha10": "#2ecc7119", + "pxt-colors-red-background": "#a80000", + "pxt-colors-red-foreground": "#FFFFFF", + "pxt-colors-red-hover": "#8f0000", + "pxt-colors-red-alpha10": "#a8000019", + "pxt-colors-teal-background": "#028B9B", + "pxt-colors-teal-foreground": "#FFFFFF", + "pxt-colors-teal-hover": "#015e69", + "pxt-colors-teal-alpha10": "#028b9b19", + "pxt-colors-yellow-background": "#c0a000", + "pxt-colors-yellow-foreground": "#FFFFFF", + "pxt-colors-yellow-hover": "rgb(153, 132, 0)", + "pxt-colors-yellow-alpha10": "#c0a00019" + } +} diff --git a/theme/color-themes/arcade-light.json b/theme/color-themes/arcade-light.json new file mode 100644 index 00000000000..bce2a970006 --- /dev/null +++ b/theme/color-themes/arcade-light.json @@ -0,0 +1,110 @@ +{ + "id": "arcade-light", + "name": "Arcade Light", + "weight": 40, + "overrideFiles": [], + "colors": { + "pxt-header-background": "#116E79", + "pxt-header-foreground": "#FFFFFF", + "pxt-header-background-hover": "#041d20", + "pxt-header-foreground-hover": "#FFFFFF", + "pxt-header-stencil": "#0b454c", + + "pxt-primary-background": "#5D4FBA", + "pxt-primary-foreground": "#FFFFFF", + "pxt-primary-background-hover": "#4d3eb1", + "pxt-primary-foreground-hover": "#FFFFFF", + "pxt-primary-accent": "#403587", + + "pxt-secondary-background": "#5D4FBA", + "pxt-secondary-foreground": "#F8FAFC", + "pxt-secondary-background-hover": "#483c9a", + "pxt-secondary-foreground-hover": "#F8FAFC", + "pxt-secondary-accent": "#7569c4", + + "pxt-tertiary-background": "#116E79", + "pxt-tertiary-foreground": "#FFFFFF", + "pxt-tertiary-background-hover": "#0b454c", + "pxt-tertiary-foreground-hover": "#FFFFFF", + "pxt-tertiary-accent": "#041d20", + + "pxt-target-background1": "#F8FAFC", + "pxt-target-foreground1": "#000000", + "pxt-target-background1-hover": "#d4e0ed", + "pxt-target-foreground1-hover": "#000000", + "pxt-target-stencil1": "#e1e1e1", + + "pxt-target-background2": "#F8FAFC", + "pxt-target-foreground2": "#000000", + "pxt-target-background2-hover": "#d4e0ed", + "pxt-target-foreground2-hover": "#000000", + "pxt-target-stencil2": "#e1e1e1", + + "pxt-target-background3": "#F8FAFC", + "pxt-target-foreground3": "#000000", + "pxt-target-background3-hover": "#d4e0ed", + "pxt-target-foreground3-hover": "#000000", + "pxt-target-stencil3": "#e1e1e1", + + "pxt-neutral-background1": "#FFFFFF", + "pxt-neutral-foreground1": "rgba(0,0,0,.85)", + "pxt-neutral-background1-hover": "#f2f2f2", + "pxt-neutral-foreground1-hover": "rgba(0,0,0,.85)", + "pxt-neutral-stencil1": "rgba(34, 74, 114, 0.15)", + + "pxt-neutral-background2": "#F8F8F8", + "pxt-neutral-foreground2": "rgba(0,0,0,.85)", + "pxt-neutral-background2-hover": "#ebebeb", + "pxt-neutral-foreground2-hover": "rgba(0,0,0,.85)", + "pxt-neutral-stencil2": "#e9eef2", + + "pxt-neutral-background3": "#4e5758", + "pxt-neutral-foreground3": "#FFFFFF", + "pxt-neutral-background3-hover": "#424a4a", + "pxt-neutral-foreground3-hover": "#FFFFFF", + "pxt-neutral-stencil3": "#FFFFFF", + "pxt-neutral-background3-alpha90": "#4E5758E5", + + "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)", + "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)", + "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)", + "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)", + + "pxt-link": "#3977B4", + "pxt-link-hover": "#204467", + "pxt-focus-border": "#0078D4", + + "pxt-colors-purple-background": "#6B4F76", + "pxt-colors-purple-foreground": "#FFFFFF", + "pxt-colors-purple-hover": "#483c9a", + "pxt-colors-purple-alpha10": "#6b4f7619", + "pxt-colors-orange-background": "#F76820", + "pxt-colors-orange-foreground": "#FFFFFF", + "pxt-colors-orange-hover": "#dc4f08", + "pxt-colors-orange-alpha10": "#F7682019", + "pxt-colors-brown-background": "#663905", + "pxt-colors-brown-foreground": "#FFFFFF", + "pxt-colors-brown-hover": "#351e03", + "pxt-colors-brown-alpha10": "#66390519", + "pxt-colors-blue-background": "#116e79", + "pxt-colors-blue-foreground": "#FFFFFF", + "pxt-colors-blue-hover": "#0b454c", + "pxt-colors-blue-alpha10": "#116e7919", + "pxt-colors-green-background": "#2ecc71", + "pxt-colors-green-foreground": "#FFFFFF", + "pxt-colors-green-hover": "#22be64", + "pxt-colors-green-alpha10": "#2ecc7119", + "pxt-colors-red-background": "#a80000", + "pxt-colors-red-foreground": "#FFFFFF", + "pxt-colors-red-hover": "#8f0000", + "pxt-colors-red-alpha10": "#a8000019", + "pxt-colors-teal-background": "#116e79", + "pxt-colors-teal-foreground": "#FFFFFF", + "pxt-colors-teal-hover": "#0b454c", + "pxt-colors-teal-alpha10": "#116e7919", + "pxt-colors-yellow-background": "#f1c40f", + "pxt-colors-yellow-foreground": "#000000", + "pxt-colors-yellow-hover": "#c29d0b", + "pxt-colors-yellow-alpha10": "#f1c40f19" + } +} diff --git a/theme/color-themes/overrides/arcade-dark-overrides.css b/theme/color-themes/overrides/arcade-dark-overrides.css new file mode 100644 index 00000000000..7973e7672f6 --- /dev/null +++ b/theme/color-themes/overrides/arcade-dark-overrides.css @@ -0,0 +1,32 @@ +.image-editor-change-name .image-editor-input { + /* The textbox background matches the footer of the image editor, so add a border */ + border: 1px solid var(--pxt-neutral-stencil2); +} + +#langmodal #availablelocales .langoption .header { + /* Better contrast */ + color: var(--pxt-primary-background); +} + +.pxtToolbox span.blocklyTreeLabel, +.pxtToolbox .blocklyTreeSelected span.blocklyTreeLabel, +.pxtToolbox .blocklyTreeSelected .blocklyTreeIcon { + /* Better contrast in toolbox */ + color: var(--pxt-target-foreground3); +} + +.pxtToolbox .blocklyTreeIcon, +.tutorial-container span.docs.inlineblock { + /* Better contrast in toolbox & tutorial block colors, but try to preserve some of the icon color */ + filter: brightness(1.2) saturate(2); +} + +#mainmenu { + /* Some parts of the app use the same color as a background. This keeps the menu from blending in */ + border-bottom: 1px solid var(--pxt-header-stencil); +} + +.projectsdialog .ui.card:hover { + /* Neutral and target colors are the same in dark theme, so it helps to have a clearer border when hovering over cards. */ + border-color: var(--pxt-focus-border) !important; +} diff --git a/theme/site/globals/site.variables b/theme/site/globals/site.variables index 284d2fdfe67..8b73b24e055 100644 --- a/theme/site/globals/site.variables +++ b/theme/site/globals/site.variables @@ -2,12 +2,6 @@ User Global Variables *******************************/ -/*-------------- - Page ----------------*/ - -@pageBackground : #F9F9F9; - /*------------------- Fonts --------------------*/ @@ -37,20 +31,9 @@ /* 32 colors */ @purple : #5D4FBA; @blue : #B1E3DA; -@beige : #FEF3E0; -@salmon : #E95153; @lightGrey : #F8FAFC; -/*------------------- - Brand Colors ---------------------*/ - -@primaryColor : @teal; -@secondaryColor : @purple; - -@lightPrimaryColor : @lightBlue; -@lightSecondaryColor : @lightGrey; /******************************* PXT Variables @@ -59,18 +42,6 @@ @loaderImageUrl: "../docs/static/Micorsoft_logo_rgb_W-white_D-square.png"; @loaderImageSize: 80%; -/*------------------- - Menu ---------------------*/ - -@mainMenuInvertedBackground: @teal; -@mainMenuTutorialBackground: @teal; -@mainMenuTutorialButtons: @teal; - -@mainMenuBlocksJsToggleColor: @primaryColor; - -@tutorialSelectedMenuColor: @primaryColor; - /*------------------- Layout --------------------*/ @@ -79,67 +50,20 @@ @simulatorWidth: @sideBarWidth; @simulatorWidthSmall: @sideBarWidth; -/*------------------- - Background ---------------------*/ - -@simulatorBackground: @lightSecondaryColor; -@editorToolsBackground: @lightSecondaryColor; -@blocklySvgColor: @lightSecondaryColor; -@homeScreenBackground: @lightSecondaryColor; -@cloudCardBackground: darken(@secondaryColor, 20%); - -/*------------------- - Full screen ---------------------*/ - -@fullscreenBackgroundGradientStart: @simulatorBackground; -@fullscreenBackgroundGradientEnd: @simulatorBackground; - -/*------------------- - Editor ---------------------*/ - -@blocklyToolboxColor: @white; -@trashIconColor: @primaryColor; - /*------------------- Blockly --------------------*/ @blocklyFont: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; -/*------------------- - Flyout ---------------------*/ - -@flyoutLabelColor: white; -@blocklyFlyoutColor: @grey; -@blocklyFlyoutColorOpacity: 0.9; -@monacoFlyoutColor: fade(@blocklyFlyoutColor, 97%); -@monacoFlyoutText: @flyoutLabelColor; - /*------------------- Greenscreen --------------------*/ @greenScreenBlockColor: #20BF6B; +/*------------------- + Field Editors +--------------------*/ -@soundEffectHeaderColor: #E30FC0; -@soundPreviewBackgroundColor: #F7EEF5; - -/*--------------------------- - Cloud Status -----------------------------*/ -@cloudStatusColor: @teal; - -/*--------------------------- - Teaching Bubble -----------------------------*/ -@teachingBubbleBackgroundColor: @teal; -@teachingBubbleTextColor: @white; -@teachingBubbleStepsColor: @beige; - -@assetUnselected: #ebedef; -@DebuggerBackgroundPrimaryColor: #117955; \ No newline at end of file +@soundEffectHeaderColor: #E30FC0; // Matches block color diff --git a/theme/site/views/card.overrides b/theme/site/views/card.overrides index 13f491dc7cd..6f085f9353c 100644 --- a/theme/site/views/card.overrides +++ b/theme/site/views/card.overrides @@ -1,7 +1,3 @@ /******************************* User Variable Overrides *******************************/ - -.ui.card.link.newprojectcard { - background: @secondaryColor !important; -} \ No newline at end of file diff --git a/theme/style.less b/theme/style.less index 602282dbad0..d6854d3cf86 100644 --- a/theme/style.less +++ b/theme/style.less @@ -44,47 +44,57 @@ } .ui.primary.button.download-button { - background-color: @secondaryColor; + background-color: var(--pxt-primary-background); + color: var(--pxt-primary-foreground); } .simtoolbar .ui.button.icon, #editortools .ui.button.editortools-btn { - background-color: @secondaryColor; + background-color: var(--pxt-secondary-background); + color: var(--pxt-secondary-foreground); + + &:hover { + filter: none; + background-color: var(--pxt-secondary-background-hover); + color: var(--pxt-secondary-foreground-hover); + } } #editortools .ui.button.hw-button { - background-color: darken(@secondaryColor, 15%); + background-color: var(--pxt-primary-accent); + color: var(--pxt-primary-foreground); } #simulator .ui.button.play-button .icon.play { - color: @white!important; + color: var(--pxt-secondary-foreground)!important; } #homemenu .ui.item, #mainmenu .ui.item { - color: @white; + color: var(--pxt-header-foreground); } .common-radio-group.common-radio-buttons .common-radio-choice.selected { - color: @soundEffectHeaderColor; + color: var(--pxt-primary-background); } .draggable-graph-path { - stroke: @soundEffectHeaderColor; + stroke: var(--pxt-primary-background); } .carouselarrow { - color: @secondaryColor; + color: var(--pxt-secondary-background); } .projectsdialog .detailview .ui.grid.stackable .actions .card-action .button.approve { - background-color: @primaryColor; + background-color: var(--pxt-primary-background); + color: var(--pxt-primary-foreground); } .extensions-browser { .extension-tag.selected { - background-color: @primaryColor; - border-color: @primaryColor; - color: @white + background-color: var(--pxt-primary-background); + border-color: var(--pxt-primary-background); + color: var(--pxt-primary-foreground); } } @@ -140,8 +150,8 @@ span.blocklyTreeLabel { } .hero .hero-banner-contents .action .button { - background-color: @teal; - + background-color: var(--pxt-tertiary-background); + color: var(--pxt-tertiary-foreground); } .script-content { @@ -154,4 +164,4 @@ span.blocklyTreeLabel { #abuse { color: #324a61; } -} \ No newline at end of file +}