diff --git a/manifest.json b/manifest.json index 6b90f07..26cb640 100644 --- a/manifest.json +++ b/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" diff --git a/theme.css b/theme.css index 63fe801..9e9e8dc 100644 --- a/theme.css +++ b/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,14 +562,79 @@ 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); @@ -553,44 +642,35 @@ body { /* 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);