Easier code to manage + port values to new primitives #244

maximedegreve · 2021-12-14T08:28:29Z

The theme.js file had a lot of repetition and started to become slightly unreadable because of the ever growing themes.

Before we use the primitives I now convert them all to hex values with alpha support first. That way it's less prone to mistakes if we forget to convert them. The hex(color) format is therefore not needed anymore.

I've also introduced a few helper methods to make the code look less heavy:

onlyDark(color): Target only dark modes without having to write the whole dictionary. This should scale better when new themes are introduced.
lightDark(lightColor, darkColor): Target all light and dark modes without having to write the whole dictionary. This should scale better when new themes are introduced.
alpha(color, alpha): Adds/changes the alpha value of a hex color.
onlyDarkHighContrast(color): Needs often separate adjustments so I've added this one as well.

I've also started with moving hardcoded values to our primitives as well. I need to still test them all throughout.

changeset-bot · 2021-12-14T08:28:31Z

🦋 Changeset detected

Latest commit: d318d0e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
github-vscode-theme	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2021-12-17T11:51:12Z

Colors changed

--- base/themes/dark-colorblind.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/dark-colorblind.json	2022-02-08 08:31:51.387989996 +0000
@@ -111,15 +111,14 @@
     "editorCursor.foreground": "#58a6ff",
-    "editor.findMatchBackground": "#ffd33d44",
-    "editor.findMatchHighlightBackground": "#ffd33d22",
-    "editor.linkedEditingBackground": "#3392FF22",
-    "editor.inactiveSelectionBackground": "#3392FF22",
-    "editor.selectionBackground": "#3392FF44",
-    "editor.selectionHighlightBackground": "#17E5E633",
-    "editor.selectionHighlightBorder": "#17E5E600",
-    "editor.wordHighlightBackground": "#17E5E600",
-    "editor.wordHighlightStrongBackground": "#17E5E600",
-    "editor.wordHighlightBorder": "#17E5E699",
-    "editor.wordHighlightStrongBorder": "#17E5E666",
-    "editorBracketMatch.background": "#17E5E650",
-    "editorBracketMatch.border": "#17E5E600",
+    "editor.findMatchBackground": "#9e6a03",
+    "editor.findMatchHighlightBackground": "#f2cc6080",
+    "editor.linkedEditingBackground": "#58a6ff12",
+    "editor.inactiveSelectionBackground": "#58a6ff12",
+    "editor.selectionBackground": "#58a6ff33",
+    "editor.selectionHighlightBackground": "#42a0ff40",
+    "editor.wordHighlightBackground": "#6e768180",
+    "editor.wordHighlightBorder": "#6e768199",
+    "editor.wordHighlightStrongBackground": "#6e76814d",
+    "editor.wordHighlightStrongBorder": "#6e768199",
+    "editorBracketMatch.background": "#42a0ff40",
+    "editorBracketMatch.border": "#42a0ff99",
     "editorGutter.modifiedBackground": "#bb800966",
@@ -129,6 +128,6 @@
     "diffEditor.removedTextBackground": "#c3800026",
-    "scrollbar.shadow": "#0008",
-    "scrollbarSlider.background": "#484F5833",
-    "scrollbarSlider.hoverBackground": "#484F5844",
-    "scrollbarSlider.activeBackground": "#484F5888",
+    "scrollbar.shadow": "#484f5833",
+    "scrollbarSlider.background": "#6e768133",
+    "scrollbarSlider.hoverBackground": "#6e768145",
+    "scrollbarSlider.activeBackground": "#6e768187",
     "editorOverviewRuler.border": "#010409",
@@ -165,7 +164,7 @@
     "debugToolBar.background": "#161b22",
-    "editor.stackFrameHighlightBackground": "#D2992225",
-    "editor.focusedStackFrameHighlightBackground": "#3FB95025",
-    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
-    "peekViewResult.matchHighlightBackground": "#ffd33d33",
-    "peekViewEditor.background": "#0d111788",
+    "editor.stackFrameHighlightBackground": "#bb800966",
+    "editor.focusedStackFrameHighlightBackground": "#1585fd66",
+    "peekViewEditor.matchHighlightBackground": "#bb800966",
+    "peekViewResult.matchHighlightBackground": "#bb800966",
+    "peekViewEditor.background": "#6e76811a",
     "peekViewResult.background": "#0d1117",
@@ -207,3 +206,3 @@
       "settings": {
-        "foreground": "#9b4215"
+        "foreground": "#ffa657"
       }
@@ -302,3 +301,3 @@
         "fontStyle": "italic",
-        "foreground": "#633e00"
+        "foreground": "#e6b716"
       }
@@ -331,3 +330,3 @@
         "background": "#d69a00",
-        "foreground": "#0d1117",
+        "foreground": "#f0f6fc",
         "content": "^M"
--- base/themes/dark-default.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/dark-default.json	2022-02-08 08:31:51.387989996 +0000
@@ -111,15 +111,14 @@
     "editorCursor.foreground": "#58a6ff",
-    "editor.findMatchBackground": "#ffd33d44",
-    "editor.findMatchHighlightBackground": "#ffd33d22",
-    "editor.linkedEditingBackground": "#3392FF22",
-    "editor.inactiveSelectionBackground": "#3392FF22",
-    "editor.selectionBackground": "#3392FF44",
-    "editor.selectionHighlightBackground": "#17E5E633",
-    "editor.selectionHighlightBorder": "#17E5E600",
-    "editor.wordHighlightBackground": "#17E5E600",
-    "editor.wordHighlightStrongBackground": "#17E5E600",
-    "editor.wordHighlightBorder": "#17E5E699",
-    "editor.wordHighlightStrongBorder": "#17E5E666",
-    "editorBracketMatch.background": "#17E5E650",
-    "editorBracketMatch.border": "#17E5E600",
+    "editor.findMatchBackground": "#9e6a03",
+    "editor.findMatchHighlightBackground": "#f2cc6080",
+    "editor.linkedEditingBackground": "#58a6ff12",
+    "editor.inactiveSelectionBackground": "#58a6ff12",
+    "editor.selectionBackground": "#58a6ff33",
+    "editor.selectionHighlightBackground": "#3fb95040",
+    "editor.wordHighlightBackground": "#6e768180",
+    "editor.wordHighlightBorder": "#6e768199",
+    "editor.wordHighlightStrongBackground": "#6e76814d",
+    "editor.wordHighlightStrongBorder": "#6e768199",
+    "editorBracketMatch.background": "#3fb95040",
+    "editorBracketMatch.border": "#3fb95099",
     "editorGutter.modifiedBackground": "#bb800966",
@@ -129,6 +128,6 @@
     "diffEditor.removedTextBackground": "#f8514926",
-    "scrollbar.shadow": "#0008",
-    "scrollbarSlider.background": "#484F5833",
-    "scrollbarSlider.hoverBackground": "#484F5844",
-    "scrollbarSlider.activeBackground": "#484F5888",
+    "scrollbar.shadow": "#484f5833",
+    "scrollbarSlider.background": "#6e768133",
+    "scrollbarSlider.hoverBackground": "#6e768145",
+    "scrollbarSlider.activeBackground": "#6e768187",
     "editorOverviewRuler.border": "#010409",
@@ -165,7 +164,7 @@
     "debugToolBar.background": "#161b22",
-    "editor.stackFrameHighlightBackground": "#D2992225",
-    "editor.focusedStackFrameHighlightBackground": "#3FB95025",
-    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
-    "peekViewResult.matchHighlightBackground": "#ffd33d33",
-    "peekViewEditor.background": "#0d111788",
+    "editor.stackFrameHighlightBackground": "#bb800966",
+    "editor.focusedStackFrameHighlightBackground": "#2ea04366",
+    "peekViewEditor.matchHighlightBackground": "#bb800966",
+    "peekViewResult.matchHighlightBackground": "#bb800966",
+    "peekViewEditor.background": "#6e76811a",
     "peekViewResult.background": "#0d1117",
@@ -331,3 +330,3 @@
         "background": "#ff7b72",
-        "foreground": "#0d1117",
+        "foreground": "#f0f6fc",
         "content": "^M"
--- base/themes/dark-dimmed.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/dark-dimmed.json	2022-02-08 08:31:51.387989996 +0000
@@ -111,15 +111,14 @@
     "editorCursor.foreground": "#539bf5",
-    "editor.findMatchBackground": "#ffd33d44",
-    "editor.findMatchHighlightBackground": "#ffd33d22",
-    "editor.linkedEditingBackground": "#3392FF22",
-    "editor.inactiveSelectionBackground": "#3392FF22",
-    "editor.selectionBackground": "#3392FF44",
-    "editor.selectionHighlightBackground": "#17E5E633",
-    "editor.selectionHighlightBorder": "#17E5E600",
-    "editor.wordHighlightBackground": "#17E5E600",
-    "editor.wordHighlightStrongBackground": "#17E5E600",
-    "editor.wordHighlightBorder": "#17E5E699",
-    "editor.wordHighlightStrongBorder": "#17E5E666",
-    "editorBracketMatch.background": "#17E5E650",
-    "editorBracketMatch.border": "#17E5E600",
+    "editor.findMatchBackground": "#966600",
+    "editor.findMatchHighlightBackground": "#eac55f80",
+    "editor.linkedEditingBackground": "#539bf512",
+    "editor.inactiveSelectionBackground": "#539bf512",
+    "editor.selectionBackground": "#539bf533",
+    "editor.selectionHighlightBackground": "#57ab5a40",
+    "editor.wordHighlightBackground": "#636e7b80",
+    "editor.wordHighlightBorder": "#636e7b99",
+    "editor.wordHighlightStrongBackground": "#636e7b4d",
+    "editor.wordHighlightStrongBorder": "#636e7b99",
+    "editorBracketMatch.background": "#57ab5a40",
+    "editorBracketMatch.border": "#57ab5a99",
     "editorGutter.modifiedBackground": "#ae7c1466",
@@ -129,6 +128,6 @@
     "diffEditor.removedTextBackground": "#e5534b26",
-    "scrollbar.shadow": "#0008",
-    "scrollbarSlider.background": "#484F5833",
-    "scrollbarSlider.hoverBackground": "#484F5844",
-    "scrollbarSlider.activeBackground": "#484F5888",
+    "scrollbar.shadow": "#545d6833",
+    "scrollbarSlider.background": "#636e7b33",
+    "scrollbarSlider.hoverBackground": "#636e7b45",
+    "scrollbarSlider.activeBackground": "#636e7b87",
     "editorOverviewRuler.border": "#1c2128",
@@ -165,7 +164,7 @@
     "debugToolBar.background": "#2d333b",
-    "editor.stackFrameHighlightBackground": "#C6902625",
-    "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
-    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
-    "peekViewResult.matchHighlightBackground": "#ffd33d33",
-    "peekViewEditor.background": "#0d111788",
+    "editor.stackFrameHighlightBackground": "#ae7c1466",
+    "editor.focusedStackFrameHighlightBackground": "#46954a66",
+    "peekViewEditor.matchHighlightBackground": "#ae7c1466",
+    "peekViewResult.matchHighlightBackground": "#ae7c1466",
+    "peekViewEditor.background": "#636e7b1a",
     "peekViewResult.background": "#22272e",
@@ -331,3 +330,3 @@
         "background": "#f47067",
-        "foreground": "#22272e",
+        "foreground": "#cdd9e5",
         "content": "^M"
@@ -447,3 +446,3 @@
       "settings": {
-        "background": "#5D0F12",
+        "background": "#5d0f12",
         "foreground": "#ff938a"
--- base/themes/dark-high-contrast.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/dark-high-contrast.json	2022-02-08 08:31:51.387989996 +0000
@@ -112,15 +112,14 @@
     "editorCursor.foreground": "#71b7ff",
-    "editor.findMatchBackground": "#ffd33d44",
-    "editor.findMatchHighlightBackground": "#ffd33d22",
-    "editor.linkedEditingBackground": "#3392FF22",
-    "editor.inactiveSelectionBackground": "#addcff66",
-    "editor.selectionBackground": "#addcff99",
-    "editor.selectionHighlightBackground": "#17E5E633",
-    "editor.selectionHighlightBorder": "#17E5E600",
-    "editor.wordHighlightBackground": "#17E5E600",
-    "editor.wordHighlightStrongBackground": "#17E5E600",
-    "editor.wordHighlightBorder": "#17E5E699",
-    "editor.wordHighlightStrongBorder": "#17E5E666",
-    "editorBracketMatch.background": "#17E5E650",
-    "editorBracketMatch.border": "#17E5E600",
+    "editor.findMatchBackground": "#e09b13",
+    "editor.findMatchHighlightBackground": "#fbd66980",
+    "editor.linkedEditingBackground": "#71b7ff12",
+    "editor.inactiveSelectionBackground": "#71b7ff12",
+    "editor.selectionBackground": "#71b7ff33",
+    "editor.selectionHighlightBackground": "#26cd4d40",
+    "editor.wordHighlightBackground": "#9ea7b380",
+    "editor.wordHighlightBorder": "#9ea7b399",
+    "editor.wordHighlightStrongBackground": "#9ea7b34d",
+    "editor.wordHighlightStrongBorder": "#9ea7b399",
+    "editorBracketMatch.background": "#26cd4d40",
+    "editorBracketMatch.border": "#26cd4d99",
     "editorGutter.modifiedBackground": "#e09b13",
@@ -130,5 +129,6 @@
     "diffEditor.removedTextBackground": "#ff6a6926",
-    "scrollbarSlider.background": "#484F5833",
-    "scrollbarSlider.hoverBackground": "#484F5844",
-    "scrollbarSlider.activeBackground": "#484F5888",
+    "scrollbar.shadow": "#7a828e33",
+    "scrollbarSlider.background": "#9ea7b333",
+    "scrollbarSlider.hoverBackground": "#9ea7b345",
+    "scrollbarSlider.activeBackground": "#9ea7b387",
     "editorOverviewRuler.border": "#010409",
@@ -165,7 +165,7 @@
     "debugToolBar.background": "#272b33",
-    "editor.stackFrameHighlightBackground": "#C6902625",
-    "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
-    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
-    "peekViewResult.matchHighlightBackground": "#ffd33d33",
-    "peekViewEditor.background": "#0d111788",
+    "editor.stackFrameHighlightBackground": "#e09b13",
+    "editor.focusedStackFrameHighlightBackground": "#09b43a",
+    "peekViewEditor.matchHighlightBackground": "#e09b13",
+    "peekViewResult.matchHighlightBackground": "#e09b13",
+    "peekViewEditor.background": "#9ea7b31a",
     "peekViewResult.background": "#0a0c10",
@@ -331,3 +331,3 @@
         "background": "#ff9492",
-        "foreground": "#0a0c10",
+        "foreground": "#ffffff",
         "content": "^M"
--- base/themes/light-colorblind.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/light-colorblind.json	2022-02-08 08:31:51.387989996 +0000
@@ -112,14 +112,13 @@
     "editor.findMatchBackground": "#bf8700",
-    "editor.findMatchHighlightBackground": "#ffdf5d66",
-    "editor.linkedEditingBackground": "#0366d611",
-    "editor.inactiveSelectionBackground": "#0366d611",
-    "editor.selectionBackground": "#0366d625",
-    "editor.selectionHighlightBackground": "#34d05840",
-    "editor.selectionHighlightBorder": "#34d05800",
-    "editor.wordHighlightBackground": "#34d05800",
-    "editor.wordHighlightStrongBackground": "#34d05800",
-    "editor.wordHighlightBorder": "#24943e99",
-    "editor.wordHighlightStrongBorder": "#24943e50",
-    "editorBracketMatch.background": "#34d05840",
-    "editorBracketMatch.border": "#34d05800",
+    "editor.findMatchHighlightBackground": "#fae17d80",
+    "editor.linkedEditingBackground": "#0969da12",
+    "editor.inactiveSelectionBackground": "#0969da12",
+    "editor.selectionBackground": "#0969da33",
+    "editor.selectionHighlightBackground": "#35adff40",
+    "editor.wordHighlightBackground": "#eaeef280",
+    "editor.wordHighlightBorder": "#afb8c199",
+    "editor.wordHighlightStrongBackground": "#afb8c14d",
+    "editor.wordHighlightStrongBorder": "#afb8c199",
+    "editorBracketMatch.background": "#35adff40",
+    "editorBracketMatch.border": "#35adff99",
     "editorGutter.modifiedBackground": "#d4a72c66",
@@ -129,6 +128,6 @@
     "diffEditor.removedTextBackground": "#fefe48",
-    "scrollbar.shadow": "#6a737d33",
-    "scrollbarSlider.background": "#959da533",
-    "scrollbarSlider.hoverBackground": "#959da544",
-    "scrollbarSlider.activeBackground": "#959da588",
+    "scrollbar.shadow": "#6e778133",
+    "scrollbarSlider.background": "#8c959f33",
+    "scrollbarSlider.hoverBackground": "#8c959f45",
+    "scrollbarSlider.activeBackground": "#8c959f87",
     "editorOverviewRuler.border": "#ffffff",
@@ -165,4 +164,4 @@
     "debugToolBar.background": "#ffffff",
-    "editor.stackFrameHighlightBackground": "#ffd33d33",
-    "editor.focusedStackFrameHighlightBackground": "#28a74525",
+    "editor.stackFrameHighlightBackground": "#d4a72c66",
+    "editor.focusedStackFrameHighlightBackground": "#35adff66",
     "settings.headerForeground": "#57606a",
--- base/themes/light-default.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/light-default.json	2022-02-08 08:31:51.387989996 +0000
@@ -112,14 +112,13 @@
     "editor.findMatchBackground": "#bf8700",
-    "editor.findMatchHighlightBackground": "#ffdf5d66",
-    "editor.linkedEditingBackground": "#0366d611",
-    "editor.inactiveSelectionBackground": "#0366d611",
-    "editor.selectionBackground": "#0366d625",
-    "editor.selectionHighlightBackground": "#34d05840",
-    "editor.selectionHighlightBorder": "#34d05800",
-    "editor.wordHighlightBackground": "#34d05800",
-    "editor.wordHighlightStrongBackground": "#34d05800",
-    "editor.wordHighlightBorder": "#24943e99",
-    "editor.wordHighlightStrongBorder": "#24943e50",
-    "editorBracketMatch.background": "#34d05840",
-    "editorBracketMatch.border": "#34d05800",
+    "editor.findMatchHighlightBackground": "#fae17d80",
+    "editor.linkedEditingBackground": "#0969da12",
+    "editor.inactiveSelectionBackground": "#0969da12",
+    "editor.selectionBackground": "#0969da33",
+    "editor.selectionHighlightBackground": "#4ac26b40",
+    "editor.wordHighlightBackground": "#eaeef280",
+    "editor.wordHighlightBorder": "#afb8c199",
+    "editor.wordHighlightStrongBackground": "#afb8c14d",
+    "editor.wordHighlightStrongBorder": "#afb8c199",
+    "editorBracketMatch.background": "#4ac26b40",
+    "editorBracketMatch.border": "#4ac26b99",
     "editorGutter.modifiedBackground": "#d4a72c66",
@@ -129,6 +128,6 @@
     "diffEditor.removedTextBackground": "#ffebe9",
-    "scrollbar.shadow": "#6a737d33",
-    "scrollbarSlider.background": "#959da533",
-    "scrollbarSlider.hoverBackground": "#959da544",
-    "scrollbarSlider.activeBackground": "#959da588",
+    "scrollbar.shadow": "#6e778133",
+    "scrollbarSlider.background": "#8c959f33",
+    "scrollbarSlider.hoverBackground": "#8c959f45",
+    "scrollbarSlider.activeBackground": "#8c959f87",
     "editorOverviewRuler.border": "#ffffff",
@@ -165,4 +164,4 @@
     "debugToolBar.background": "#ffffff",
-    "editor.stackFrameHighlightBackground": "#ffd33d33",
-    "editor.focusedStackFrameHighlightBackground": "#28a74525",
+    "editor.stackFrameHighlightBackground": "#d4a72c66",
+    "editor.focusedStackFrameHighlightBackground": "#4ac26b66",
     "settings.headerForeground": "#57606a",
@@ -443,3 +442,3 @@
       "settings": {
-        "background": "#FFEBE9",
+        "background": "#ffebe9",
         "foreground": "#82071e"
--- base/themes/light-high-contrast.json	2022-02-08 08:31:53.856080353 +0000
+++ themes/light-high-contrast.json	2022-02-08 08:31:51.387989996 +0000
@@ -111,15 +111,14 @@
     "editorCursor.foreground": "#0349b4",
-    "editor.findMatchBackground": "#bf8700",
-    "editor.findMatchHighlightBackground": "#ffdf5d66",
-    "editor.linkedEditingBackground": "#0366d611",
-    "editor.inactiveSelectionBackground": "#0366d611",
-    "editor.selectionBackground": "#0366d625",
-    "editor.selectionHighlightBackground": "#34d05840",
-    "editor.selectionHighlightBorder": "#34d05800",
-    "editor.wordHighlightBackground": "#34d05800",
-    "editor.wordHighlightStrongBackground": "#34d05800",
-    "editor.wordHighlightBorder": "#24943e99",
-    "editor.wordHighlightStrongBorder": "#24943e50",
-    "editorBracketMatch.background": "#34d05840",
-    "editorBracketMatch.border": "#34d05800",
+    "editor.findMatchBackground": "#744500",
+    "editor.findMatchHighlightBackground": "#f0ce5380",
+    "editor.linkedEditingBackground": "#0349b412",
+    "editor.inactiveSelectionBackground": "#0349b412",
+    "editor.selectionBackground": "#0349b433",
+    "editor.selectionHighlightBackground": "#26a14840",
+    "editor.wordHighlightBackground": "#e7ecf080",
+    "editor.wordHighlightBorder": "#acb6c099",
+    "editor.wordHighlightStrongBackground": "#acb6c04d",
+    "editor.wordHighlightStrongBorder": "#acb6c099",
+    "editorBracketMatch.background": "#26a14840",
+    "editorBracketMatch.border": "#26a14899",
     "editorGutter.modifiedBackground": "#b58407",
@@ -129,6 +128,6 @@
     "diffEditor.removedTextBackground": "#fff0ee",
-    "scrollbar.shadow": "#6a737d33",
-    "scrollbarSlider.background": "#959da533",
-    "scrollbarSlider.hoverBackground": "#959da544",
-    "scrollbarSlider.activeBackground": "#959da588",
+    "scrollbar.shadow": "#67707a33",
+    "scrollbarSlider.background": "#88929d33",
+    "scrollbarSlider.hoverBackground": "#88929d45",
+    "scrollbarSlider.activeBackground": "#88929d87",
     "editorOverviewRuler.border": "#ffffff",
@@ -165,4 +164,4 @@
     "debugToolBar.background": "#ffffff",
-    "editor.stackFrameHighlightBackground": "#ffd33d33",
-    "editor.focusedStackFrameHighlightBackground": "#28a74525",
+    "editor.stackFrameHighlightBackground": "#b58407",
+    "editor.focusedStackFrameHighlightBackground": "#26a148",
     "settings.headerForeground": "#24292f",
@@ -181,3 +180,3 @@
       "settings": {
-        "foreground": "#67707A"
+        "foreground": "#67707a"
       }
@@ -327,3 +326,3 @@
         "background": "#a0111f",
-        "foreground": "#FFFFFF",
+        "foreground": "#ffffff",
         "content": "^M"
@@ -474,3 +473,3 @@
       "settings": {
-        "foreground": "#E7ECF0",
+        "foreground": "#e7ecf0",
         "background": "#023b95"
@@ -514,3 +513,3 @@
       "settings": {
-        "foreground": "#4F5760"
+        "foreground": "#4f5760"
       }

maximedegreve · 2021-12-17T16:25:48Z

src/theme.js

+      "editor.inactiveSelectionBackground"    : color.accent.subtle,
+      "editor.selectionBackground"            : color.accent.muted,
+      "editor.selectionHighlightBackground"   : color.success.muted,
+      "editor.selectionHighlightBorder"       : null, // I need to figure this out as I think this was nothing....


@simurai Do you know what's happening here? I think those were just transparent. The 00 at the back is alpha 0% right?

Hmm.. right. These seem to be transparent. Maybe they are just a left over from playing around and then not needing them or intentionally setting them to transparent? I guess it could also just be #00000000. Will null render as transparent too?

simurai

Nice. ✨ Much simpler!

Added some comments about keeping the transparency in this theme and not rely on Primitives for that. Since it's more a happy coincidence. But we could also give it a try as is. Maybe then we could still add comments like // needs transparency so we can keep that in mind.

src/theme.js

simurai · 2021-12-20T07:44:01Z

src/theme.js

+      "editor.inactiveSelectionBackground"    : color.accent.subtle,
+      "editor.selectionBackground"            : color.accent.muted,
+      "editor.selectionHighlightBackground"   : color.success.muted,
+      "editor.selectionHighlightBorder"       : null, // I need to figure this out as I think this was nothing....


Hmm.. right. These seem to be transparent. Maybe they are just a left over from playing around and then not needing them or intentionally setting them to transparent? I guess it could also just be #00000000. Will null render as transparent too?

maximedegreve · 2022-01-24T14:37:20Z

I've moved most colors back to using the alpha helper function and further improved some small things below.

Brackets

It seems like null gives it a default grey outline this explains why we had a full alpha value there. I've created a transparent helper variable instead to make this more clear in the future.

Word highlight

In the current live version when putting your cursor inside a word the word gets a green outline. This doesn't seem right and instead I've replaced it all with our neutral colors. Removing the outline in this case won't work because it separates it from the full width selected line highlight.

maximedegreve added 3 commits December 2, 2021 11:43

WIP

8e3612a

Work in progress

9d99914

WIP

46f3592

maximedegreve added 2 commits December 17, 2021 11:01

Continue switching over values

86bd21b

Merge branch 'main' into feature/improve-code

822de05

maximedegreve added 8 commits December 17, 2021 11:59

Remove console.log

79868e5

Remove line

eb3d3a3

Add extra line

12429c5

WIP

3175ab7

Move more values over

fafb4ec

Remove the usage of hex values from now on

fe6595d

Move to muted instead

b2b3bf3

Port more values

e52b507

maximedegreve changed the title ~~WIP: Simplify code a tiny bit~~ Easier code to manage + port values to new primitives Dec 17, 2021

maximedegreve commented Dec 17, 2021

View reviewed changes

simurai reviewed Dec 20, 2021

View reviewed changes

simurai mentioned this pull request Jan 8, 2022

Update markdown inline code scope #193

Merged

maximedegreve added 4 commits January 24, 2022 11:43

Move back to alpha for now

42b5d48

Update wordHighlight styles

002b4ea

Update

1347751

Move back to alphas

19f9e35

simurai added 2 commits January 28, 2022 16:07

Merge branch 'main' into feature/improve-code

91b96a2

Fix dark dimmed

1630b22

maximedegreve marked this pull request as ready for review February 8, 2022 08:29

Create plenty-paws-wave.md

d318d0e

maximedegreve merged commit dcee465 into main Feb 8, 2022

maximedegreve deleted the feature/improve-code branch February 8, 2022 08:35

primer-css mentioned this pull request Feb 8, 2022

Release Tracking #259

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Easier code to manage + port values to new primitives #244

Easier code to manage + port values to new primitives #244

maximedegreve commented Dec 14, 2021 •

edited

changeset-bot bot commented Dec 14, 2021 •

edited

github-actions bot commented Dec 17, 2021 •

edited

maximedegreve Dec 17, 2021 •

edited

simurai Dec 20, 2021

simurai left a comment

simurai Dec 20, 2021

maximedegreve commented Jan 24, 2022 •

edited

Easier code to manage + port values to new primitives #244

Easier code to manage + port values to new primitives #244

Conversation

maximedegreve commented Dec 14, 2021 • edited

changeset-bot bot commented Dec 14, 2021 • edited

🦋 Changeset detected

github-actions bot commented Dec 17, 2021 • edited

maximedegreve Dec 17, 2021 • edited

Choose a reason for hiding this comment

simurai Dec 20, 2021

Choose a reason for hiding this comment

simurai left a comment

Choose a reason for hiding this comment

simurai Dec 20, 2021

Choose a reason for hiding this comment

maximedegreve commented Jan 24, 2022 • edited

Brackets

Word highlight

maximedegreve commented Dec 14, 2021 •

edited

changeset-bot bot commented Dec 14, 2021 •

edited

github-actions bot commented Dec 17, 2021 •

edited

maximedegreve Dec 17, 2021 •

edited

maximedegreve commented Jan 24, 2022 •

edited