Light Theme Usability (#61)

doki-theme · Apr 11, 2022 · 99784ed · 99784ed
1 parent d55b687
commit 99784ed
Show file tree

Hide file tree

Showing 82 changed files with 1,838 additions and 869 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 Changelog
 ---
 
+# 78.0-1.0.1 [Light Theme Enhancements]
+
+- Made the light themes a bit more usable (Now that I am actually using them).
+
 # 78.0-1.0.0 [The Boys]
 
 I'm trying to bring in a bit of inclusion.

diff --git a/buildSrc/assets/templates/tempCss.css.txt b/buildSrc/assets/templates/tempCss.css.txt
@@ -49,7 +49,6 @@
       --color-avatar-border: #00000000 !important;
       --color-bg-canvas: {{baseBackground}} !important;
       --color-canvas-inset: {{baseBackground}} !important;
-      --color-canvas-inset: {{baseBackground}} !important;
       --color-canvas-overlay: {{secondaryBackground}} !important;
       --color-bg-primary: {{baseBackground}} !important;
       --color-calendar-graph-day-bg: {{codeBlock}} !important;
@@ -89,8 +88,20 @@
       --color-input-disabled-border: {{borderColor}} !important;
       --color-text-secondary: {{infoForeground}} !important;
       --color-text-tertiary: {{lineNumberColor}} !important;
+      --color-primer-fg-disabled: {{disabledColor}} !important;
+      --lightness-threshold: 0.453 !important;
     }
 
+    [data-color-mode="light"][data-light-theme*="dark"] .hx_IssueLabel, [data-color-mode="dark"][data-dark-theme*="dark"] .hx_IssueLabel {
+            --lightness-threshold: {{lightnessThreshold}} !important;
+  --background-alpha: 0.18;
+  --border-alpha: 0.3;
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  color: {{issueLabelColor}};
+  background: {{issueLabelBackground}};
+  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
+}
+
     .suggester li:hover .octicon,
     .suggester li[aria-selected="true"] .octicon {
       fill: {{defaultButtonColor|selectionForeground}};
@@ -160,6 +171,10 @@
       fill: {{baseIconColor}};
     }
 
+    .octicon .octicon-git-merge {
+      fill: {{baseBackground}} !important;
+    }
+
     .btn-primary .octicon {
       fill: {{defaultButtonColor|selectionForeground}} !important;
     }
@@ -13654,21 +13669,18 @@
   .Label--orange {
     background-color: #f3582c;
   }
-  /* source #9: "#6a737d" */
-  .state, .State {
-    background-color: #444;
-  }
+
   /* source #9: "#2cbe4e" */
   .State--green {
-    background-color: #373;
+    background-color: {{breakpointActiveColor}};
   }
   /* source #9: "#6f42c1" */
   .State--purple {
-    background-color: #8368aa;
+    background-color: {{filePurple}};
   }
   /* source #9: "#cb2431" */
   .State--red {
-    background-color: #911;
+    background-color: {{diff.conflict}};
   }
   /* source #9: "color: #586069", "rgba(27,31,35,.08)" */
   .Counter {
@@ -14688,7 +14700,7 @@
   }
   /* source #14: "color: rgba(36,41,46,.4)", "#eff3f6", "none", "rgba(27,31,35,0.2)", "box-shadow: none" */
   .btn.disabled, .btn:disabled, .btn[aria-disabled="true"] {
-    color: rgba(210, 210, 210, 0.4);
+    color: {{disabledColor}};
     background-color: {{selectionInactive}};
     background-image: none;
     border-color: rgba(200, 200, 200, 0.15);
@@ -17878,7 +17890,7 @@ div[style*="background-color: #044d6e"],
     background: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .6) 100%) !important;
 }
 .TimelineItem-break {
-    background: linear-gradient(to bottom, rgba(25, 25, 25, .8) 1%, transparent 80%) !important;
+    background: linear-gradient(to bottom, {{lightEditorColor}} 1%, transparent 80%) !important;
 }
 /* light grey gradient */
 .signup-button:hover, a.signin:hover, .hero .textographic,

diff --git a/buildSrc/src/BuildThemes.ts b/buildSrc/src/BuildThemes.ts
@@ -4,7 +4,9 @@ import {
   DokiThemeDefinitions,
   evaluateTemplates,
   fillInTemplateScript,
+  getColorFromTemplate,
   MasterDokiThemeDefinition,
+  resolveColor,
   resolvePaths,
 } from 'doki-build-source';
 
@@ -95,6 +97,21 @@ function evaluateTemplate(
         ),
         accentColorEditor: dokiThemeDefinition.overrides?.editorScheme?.colors?.accentColor ||
           dokiThemeDefinition.colors.accentColor,
+        lightnessThreshold: dokiThemeDefinition.dark ? 0.6 : 0.453,
+        issueLabelColor: dokiThemeDefinition.dark ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))' : 'hsl(0deg, 0%, calc(var(--lightness-switch) * 100%))',
+        issueLabelBackground: dokiThemeDefinition.dark ? 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))' : 'rgb(var(--label-r), var(--label-g), var(--label-b));',
+      },
+      (templateVariable, templateVariables) => {
+        const colorFromTemplate = getColorFromTemplate(templateVariables, templateVariable);
+        if(typeof colorFromTemplate === 'number') {
+          return colorFromTemplate;
+        }
+
+        const hexColor = resolveColor(
+          colorFromTemplate,
+          templateVariables
+        );
+        return hexColor;
       }
     );
   } catch (e) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "doki-theme-github",
-  "version": "78.1.0",
+  "version": "78.1.1",
   "dependencies": {
   }
 }
diff --git a/themes/aqua.user.css b/themes/aqua.user.css
@@ -1,7 +1,7 @@
 /* ==UserStyle==
 @name           Doki-Theme: Aqua
 @namespace      github.com/doki-theme
-@version        78.1.0
+@version        78.1.1
 @description    Cute anime themes for GitHub
 @author         Unthrottled
 @license        MIT
@@ -49,7 +49,6 @@
       --color-avatar-border: #00000000 !important;
       --color-bg-canvas: #282b42 !important;
       --color-canvas-inset: #282b42 !important;
-      --color-canvas-inset: #282b42 !important;
       --color-canvas-overlay: #242942 !important;
       --color-bg-primary: #282b42 !important;
       --color-calendar-graph-day-bg: #2e3149 !important;
@@ -89,8 +88,20 @@
       --color-input-disabled-border: #2a334b !important;
       --color-text-secondary: #7b8bab !important;
       --color-text-tertiary: #61647b !important;
+      --color-primer-fg-disabled: #585F6F !important;
+      --lightness-threshold: 0.453 !important;
     }
 
+    [data-color-mode="light"][data-light-theme*="dark"] .hx_IssueLabel, [data-color-mode="dark"][data-dark-theme*="dark"] .hx_IssueLabel {
+            --lightness-threshold: 0.6 !important;
+  --background-alpha: 0.18;
+  --border-alpha: 0.3;
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
+}
+
     .suggester li:hover .octicon,
     .suggester li[aria-selected="true"] .octicon {
       fill: #fbfbfb;
@@ -160,6 +171,10 @@
       fill: #717981;
     }
 
+    .octicon .octicon-git-merge {
+      fill: #282b42 !important;
+    }
+
     .btn-primary .octicon {
       fill: #fbfbfb !important;
     }
@@ -13654,21 +13669,18 @@
   .Label--orange {
     background-color: #f3582c;
   }
-  /* source #9: "#6a737d" */
-  .state, .State {
-    background-color: #444;
-  }
+
   /* source #9: "#2cbe4e" */
   .State--green {
-    background-color: #373;
+    background-color: #2b503c;
   }
   /* source #9: "#6f42c1" */
   .State--purple {
-    background-color: #8368aa;
+    background-color: #342b58;
   }
   /* source #9: "#cb2431" */
   .State--red {
-    background-color: #911;
+    background-color: #5d323f;
   }
   /* source #9: "color: #586069", "rgba(27,31,35,.08)" */
   .Counter {
@@ -14688,7 +14700,7 @@
   }
   /* source #14: "color: rgba(36,41,46,.4)", "#eff3f6", "none", "rgba(27,31,35,0.2)", "box-shadow: none" */
   .btn.disabled, .btn:disabled, .btn[aria-disabled="true"] {
-    color: rgba(210, 210, 210, 0.4);
+    color: #585F6F;
     background-color: #31344b;
     background-image: none;
     border-color: rgba(200, 200, 200, 0.15);
@@ -17878,7 +17890,7 @@ div[style*="background-color: #044d6e"],
     background: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .6) 100%) !important;
 }
 .TimelineItem-break {
-    background: linear-gradient(to bottom, rgba(25, 25, 25, .8) 1%, transparent 80%) !important;
+    background: linear-gradient(to bottom, #2a2d44 1%, transparent 80%) !important;
 }
 /* light grey gradient */
 .signup-button:hover, a.signin:hover, .hero .textographic,

diff --git a/themes/astolfo.user.css b/themes/astolfo.user.css
@@ -1,7 +1,7 @@
 /* ==UserStyle==
 @name           Doki-Theme: Astolfo
 @namespace      github.com/doki-theme
-@version        78.1.0
+@version        78.1.1
 @description    Cute anime themes for GitHub
 @author         Unthrottled
 @license        MIT
@@ -49,7 +49,6 @@
       --color-avatar-border: #00000000 !important;
       --color-bg-canvas: #171816 !important;
       --color-canvas-inset: #171816 !important;
-      --color-canvas-inset: #171816 !important;
       --color-canvas-overlay: #141513 !important;
       --color-bg-primary: #171816 !important;
       --color-calendar-graph-day-bg: #201d1d !important;
@@ -89,8 +88,20 @@
       --color-input-disabled-border: #212220 !important;
       --color-text-secondary: #957a4d !important;
       --color-text-tertiary: #8e856e !important;
+      --color-primer-fg-disabled: #6f6f6f !important;
+      --lightness-threshold: 0.453 !important;
     }
 
+    [data-color-mode="light"][data-light-theme*="dark"] .hx_IssueLabel, [data-color-mode="dark"][data-dark-theme*="dark"] .hx_IssueLabel {
+            --lightness-threshold: 0.6 !important;
+  --background-alpha: 0.18;
+  --border-alpha: 0.3;
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+  border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha));
+}
+
     .suggester li:hover .octicon,
     .suggester li[aria-selected="true"] .octicon {
       fill: #fbfbfb;
@@ -160,6 +171,10 @@
       fill: #837e6f;
     }
 
+    .octicon .octicon-git-merge {
+      fill: #171816 !important;
+    }
+
     .btn-primary .octicon {
       fill: #fbfbfb !important;
     }
@@ -13654,21 +13669,18 @@
   .Label--orange {
     background-color: #f3582c;
   }
-  /* source #9: "#6a737d" */
-  .state, .State {
-    background-color: #444;
-  }
+
   /* source #9: "#2cbe4e" */
   .State--green {
-    background-color: #373;
+    background-color: #21461c;
   }
   /* source #9: "#6f42c1" */
   .State--purple {
-    background-color: #8368aa;
+    background-color: #251a32;
   }
   /* source #9: "#cb2431" */
   .State--red {
-    background-color: #911;
+    background-color: #422121;
   }
   /* source #9: "color: #586069", "rgba(27,31,35,.08)" */
   .Counter {
@@ -14688,7 +14700,7 @@
   }
   /* source #14: "color: rgba(36,41,46,.4)", "#eff3f6", "none", "rgba(27,31,35,0.2)", "box-shadow: none" */
   .btn.disabled, .btn:disabled, .btn[aria-disabled="true"] {
-    color: rgba(210, 210, 210, 0.4);
+    color: #6f6f6f;
     background-color: #261c20;
     background-image: none;
     border-color: rgba(200, 200, 200, 0.15);
@@ -17878,7 +17890,7 @@ div[style*="background-color: #044d6e"],
     background: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .6) 100%) !important;
 }
 .TimelineItem-break {
-    background: linear-gradient(to bottom, rgba(25, 25, 25, .8) 1%, transparent 80%) !important;
+    background: linear-gradient(to bottom, #1e201d 1%, transparent 80%) !important;
 }
 /* light grey gradient */
 .signup-button:hover, a.signin:hover, .hero .textographic,