Merge pull request #8 from krios2146/develop

Add Light theme & variables

Author: krios2146

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "GitHub theme",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"minAppVersion": "1.0.0",
 	"author": "@krios2146",
 	"authorUrl": "https://github.com/krios2146"

theme.css

@@ -124,12 +124,12 @@ body {
     --graph-node-attachment: var(--color-yellow);
     /* Headings */
     --heading-formatting: var(--text-faint);
-    --h1-color: #7ee787;
-    --h2-color: #7ee787;
-    --h3-color: #7ee787;
-    --h4-color: #7ee787;
-    --h5-color: #7ee787;
-    --h6-color: #7ee787;
+    --h1-color: var(--h1-color-theme);
+    --h2-color: var(--h2-color-theme);
+    --h3-color: var(--h3-color-theme);
+    --h4-color: var(--h4-color-theme);
+    --h5-color: var(--h5-color-theme);
+    --h6-color: var(--h6-color-theme);
     --h1-font: inherit;
     --h2-font: inherit;
     --h3-font: inherit;
@@ -192,8 +192,8 @@ body {
     --clickable-icon-radius: var(--radius-s);
     /* Indentation guide */
     --indentation-guide-width: 1px;
-    --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12);
-    --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3);
+    --indentation-guide-color: rgba(var(--mono-rgb-0), 0.12);
+    --indentation-guide-color-active: rgba(var(--mono-rgb-0), 0.3);
     /* Inline title */
     --inline-title-color: var(--h1-color);
     --inline-title-font: var(--h1-font);
@@ -242,7 +242,7 @@ body {
     /* Lists */
     --list-indent: 2em;
     --list-spacing: 0.075em;
-    --list-marker-color: var(--text-faint);
+    --list-marker-color: var(--text-normal);
     --list-marker-color-hover: var(--text-muted);
     --list-marker-color-collapsed: var(--text-accent);
     --list-bullet-border: none;
@@ -303,9 +303,9 @@ body {
     --ribbon-width: 44px;
     --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3);
     /* Scrollbars */
-    --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2);
-    --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05);
-    --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1);
+    --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-0), 0.2);
+    --scrollbar-bg: rgba(var(--mono-rgb-0), 0.05);
+    --scrollbar-thumb-bg: rgba(var(--mono-rgb-0), 0.1);
     /* Search */
     --search-clear-button-color: var(--text-muted);
     --search-clear-button-size: 13px;
@@ -389,9 +389,9 @@ body {
     --table-header-border-width: var(--table-border-width);
     --table-header-border-color: var(--table-border-color);
     --table-header-font: inherit;
-    --table-header-size: var(--font-smaller);
-    --table-header-weight: var(--font-normal);
-    --table-header-color: var(--text-muted);
+    --table-header-size: inherit;
+    --table-header-weight: var(--font-semibold);
+    --table-header-color: var(--text-normal);
     --table-text-size: inherit;
     --table-text-color: inherit;
     --table-column-max-width: none;
@@ -444,14 +444,14 @@ body {
     --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6);
     /* Color mappings ------------------------ */
     /* Accent HSL values */
-    --accent-h: 212;
-    --accent-s: 100%;
-    --accent-l: 67%;
+    --accent-h: var(--accent-h-theme);
+    --accent-s: var(--accent-s-theme);
+    --accent-l: var(--accent-l-theme);
     /* Backgrounds */
     --background-primary: var(--color-base-00);
     --background-primary-alt: var(--color-base-10);
     --background-secondary: var(--color-base-20);
-    --background-modifier-hover: rgba(var(--mono-rgb-100), 0.12);
+    --background-modifier-hover: rgba(var(--mono-rgb-100), var(--background-modifier-hover-alpha));
     --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15);
     --background-modifier-border: var(--color-base-30);
     --background-modifier-border-hover: var(--color-base-30);
@@ -463,7 +463,7 @@ body {
     --background-modifier-success: var(--color-green);
     --background-modifier-message: rgba(0, 0, 0, 0.9);
     /* Inputs */
-    --background-modifier-form-field: var(--color-base-00);
+    --background-modifier-form-field: var(--color-base-25);
     /* Text */
     --text-normal: var(--color-base-100);
     --text-muted: var(--color-base-70);
@@ -484,7 +484,7 @@ body {
 .theme-dark {
     color-scheme: dark;
     --highlight-mix-blend-mode: lighten;
-    --mono-rgb-0: 0, 0, 0;
+    --mono-rgb-0: 177, 186, 196;
     --mono-rgb-100: 177, 186, 196;
     --color-red-rgb: 248, 81, 73;
     --color-red: #F47067;
@@ -496,6 +496,7 @@ body {
     --color-blue: #6CB6FF;
     --color-purple: #D2A8FF;
     --color-pink: #f778ba;
+
     --color-base-00: #0d1117;
     --color-base-10: #161b22;
     --color-base-20: #161b22;
@@ -504,26 +505,49 @@ body {
     --color-base-35: #21262d;
     --color-base-40: #30363d;
     --color-base-50: #6e7681;
-    --color-base-60: #999;
+    --color-base-60: #999; /* Unused */
     --color-base-70: #8b949e;
     --color-base-100: #c9d1d9;
+
+    --accent-h-theme: 212;
+    --accent-s-theme: 100%;
+    --accent-l-theme: 67%;
     --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
     --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
     --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
     --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));
-    --background-modifier-form-field: var(--color-base-25);
+
     --background-secondary-alt: var(--color-base-25);
-    --interactive-normal: var(--color-base-35);
-    --interactive-hover: var(--color-base-40);
+    --interactive-normal: var(--color-base-35); /*???*/
+    --interactive-hover: var(--color-base-40); /*???*/
     --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
     --background-modifier-cover: rgba(10, 10, 10, 0.4);
     --text-highlight-bg: rgba(255, 208, 0, 0.4);
     --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
     --text-selection: hsla(var(--interactive-accent-hsl), 0.4);
-    --input-shadow: none;
-    --input-shadow-hover: none;
+    --input-shadow: inset 0 0 0 1px #f0f6fc1a;
+    --input-shadow-hover: inset 0 0 0 1px var(--color-base-70);
     --shadow-s: none;
     --shadow-l: none;
+
+    --inline-code-background: #6e768166;
+    --h1-color-theme: var(--color-green);
+    --h2-color-theme: var(--color-green);
+    --h3-color-theme: var(--color-green);
+    --h4-color-theme: var(--color-green);
+    --h5-color-theme: var(--color-green);
+    --h6-color-theme: var(--color-green);
+    --background-modifier-hover-alpha: 0.12;
+    --color-btn-primary-bg: #238636;
+    --color-btn-primary-hover-bg: #2ea043;
+
+    /* Kanban colors */
+    --kanban-background: var(--background-primary);
+    --kanban-lane-background: var(--background-secondary-alt);
+    --kanban-item-background: var(--background-primary-alt);
+    --kanban-lane-border: var(--color-base-35);
+    --kanban-lane-count: var(--color-base-35);
+    --kanban-options-btn: var(--color-base-30);
 }
 .is-mobile.theme-dark {
     --color-base-00: #0d1117;
@@ -538,59 +562,115 @@ body {
     --settings-home-background: var(--background-primary);
 }
 
-/* Tables */
-.markdown-rendered th {
-    color: var(--text-normal);
-    font-weight: 600;
+.theme-light {
+    color-scheme: light;
+    --highlight-mix-blend-mode: darken;
+    --mono-rgb-0: 0, 0, 0;
+    --mono-rgb-100: 208, 215, 222;
+    --color-red-rgb: 228, 55, 75;
+    --color-red: #cf222e;
+    --color-green-rgb: 12, 181, 79;
+    --color-green: #0cb54f;
+    --color-orange: #d96c00;
+    --color-yellow: #BD8E37;
+    --color-cyan: #2db7b5;
+    --color-blue: #086DDD;
+    --color-purple: #876be0;
+    --color-pink: #C32B74;
+
+    --color-base-00: #ffffff;
+    --color-base-05: #fcfcfc;
+    --color-base-10: #f6f8fa;
+    --color-base-20: #f6f8fa;
+    --color-base-25: #f6f8fa;
+    --color-base-30: #d0d7de;
+    --color-base-35: #d4d4d4;
+    --color-base-40: #bdbdbd;
+    --color-base-50: #6e7781;
+    --color-base-60: #707070; /* Unused */
+    --color-base-70: #57606a;
+    --color-base-100: #24292f;
+
+    --accent-h-theme: 212;
+    --accent-s-theme: 92%;
+    --accent-l-theme: 45%;
+    --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
+    --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+    --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
+    --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
+    --background-secondary-alt: var(--color-base-05);
+    --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
+    --background-modifier-cover: rgba(220, 220, 220, 0.4);
+    --text-highlight-bg: rgba(255, 208, 0, 0.4);
+    --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
+    --input-shadow: inset 0 0 0 1px #1b1f2426;
+    --input-shadow-hover: inset 0 0 0 1px #1b1f2426;
+    --shadow-s: none;
+    --shadow-l: none;
+
+    --inline-code-background: #aeb8c133;
+    --h1-color-theme: var(--text-normal);
+    --h2-color-theme: var(--text-normal);
+    --h3-color-theme: var(--text-normal);
+    --h4-color-theme: var(--text-normal);
+    --h5-color-theme: var(--text-normal);
+    --h6-color-theme: var(--text-normal);
+    --background-modifier-hover-alpha: 0.32;
+    --color-btn-primary-bg: #2da44f;
+    --color-btn-primary-hover-bg: #2c964a;
+
+    /* Kanban colors */
+    --kanban-background: var(--background-primary);
+    --kanban-lane-background: var(--background-primary-alt);
+    --kanban-item-background: var(--background-primary);
+    --kanban-lane-border: #d8dee4;
+    --kanban-lane-count: #afb8c133;
+    --kanban-options-btn: var(--background-primary-alt);
 }
+
+/* Tables */
 .markdown-rendered td, 
 .markdown-rendered th {
     padding: var(--size-2-3) var(--size-4-3);
+} 
+.markdown-rendered th {
+    text-align: center;
 }
 .markdown-rendered tbody tr:nth-child(2n) {
     background-color: var(--background-secondary);
 }
 
 /* Buttons */
 button {
-    border: 1px solid #f0f6fc1a;
     transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
 }
-.theme-dark .dropdown {
-    border: 1px solid #f0f6fc1a;
-}
-.theme-dark .dropdown:hover {
-    border: 1px solid var(--color-base-70);
-}
 button:hover {
-    border: 1px solid var(--color-base-70);
-    cursor: pointer;
+    cursor: var(--cursor-link);
 }
 button.mod-cta {
-    background-color: #238636;
+    background-color: var(--color-btn-primary-bg);
     color: var(--text-on-accent);
 }
 button.mod-cta:hover {
-    border-color: #f0f6fc1a;
-    background-color: #2ea043;
+    background-color: var(--color-btn-primary-hover-bg);
 }
 
-
 /* Kanban */
 .kanban-plugin {
-    background-color: var(--background-primary);
+    background-color: var(--kanban-background);
 }
 .kanban-plugin__lane {
-    background-color: var(--background-secondary-alt);
-    border: 1px solid var(--color-base-35);
+    background-color: var(--kanban-lane-background);
+    border: 1px solid var(--kanban-lane-border);
 }
 .kanban-plugin__lane-title {
     flex-grow: 0;
     width: fit-content;
 }
 .kanban-plugin__item-content-wrapper,
-.kanban-plugin__item-title-wrapper {
-    background: var(--background-primary-alt);
+.kanban-plugin__item-title-wrapper,
+.kanban-plugin__item-metadata-wrapper:not(:empty) {
+    background: var(--kanban-item-background);
 }
 .kanban-plugin__icon>svg {
     transform: rotate(90deg);
@@ -599,7 +679,7 @@ button.mod-cta:hover {
     margin-left: auto;
 }
 div.kanban-plugin__lane-title-count {
-    background-color: var(--color-base-35);
+    background-color: var(--kanban-lane-count);
     border-radius: 1em;
     padding: 2px 5px;
 }
@@ -608,11 +688,12 @@ div.kanban-plugin__lane-title-count {
 .kanban-plugin__lane button.kanban-plugin__lane-settings-button {
     padding: 0 5px;
     height: 24px;
+    box-shadow: none;
 }
 .kanban-plugin__item button.kanban-plugin__item-prefix-button:hover, 
 .kanban-plugin__item button.kanban-plugin__item-postfix-button:hover, 
 .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover {
-    background-color: var(--color-base-30);
+    background-color: var(--kanban-options-btn);
     cursor: pointer;
 }
 button.kanban-plugin__new-item-button {
@@ -622,10 +703,14 @@ button.kanban-plugin__new-item-button {
 .kanban-plugin__new-item-button:hover {
     color: var(--text-normal);
     background-color: inherit;
+    box-shadow: none;
 }
 .kanban-plugin__lane-items {
     padding: 8px 15px;
 }
+.kanban-plugin__item-prefix-button-wrapper input[type=checkbox] {
+    filter: none;
+}
 
 /* fix: input borders */
 textarea:active, 
@@ -645,14 +730,16 @@ input[type='text']:focus-visible,
 input[type='search']:focus-visible, 
 input[type='email']:focus-visible, 
 input[type='password']:focus-visible, 
-input[type='number']:focus-visible,
-select:focus, .dropdown:focus {
+input[type='number']:focus-visible {
     box-shadow: 0 0 0 1px var(--background-modifier-border-focus);
 }
+select:focus, .dropdown:focus {
+    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+}
 
 /* inline code block */
 .markdown-rendered :not(pre) > code {
-    background-color: #6e768166;
+    background-color: var(--inline-code-background);
     padding: 0.2em 0.4em;
     border-radius: 6px;
     color: var(--color-base-100);