Zynh0722/rose-pine-gitea
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

feat: use context-aware lightness everywhere, replace hardcoded hex codes

Browse source
This commit is contained in:
winston 2023-03-21 08:26:49 +01:00
parent 6576ad0288
commit cc40e5733c
No known key found for this signature in database
GPG key ID: 3786770EDBC2B481
1 changed files with 67 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
src/_theme.scss
View file

@ -20,21 +20,21 @@
--color-primary: #{$accent}; --color-primary: #{$accent};
--color-primary-contrast: #{$crust}; --color-primary-contrast: #{$crust};
--color-primary-dark-1: #{color.adjust($accent, $lightness: -3%)}; --color-primary-dark-1: #{ctx_lighten($accent, 3%)};
--color-primary-dark-2: #{color.adjust($accent, $lightness: -6%)}; --color-primary-dark-2: #{ctx_lighten($accent, 6%)};
--color-primary-dark-3: #{color.adjust($accent, $lightness: -9%)}; --color-primary-dark-3: #{ctx_lighten($accent, 9%)};
--color-primary-dark-4: #{color.adjust($accent, $lightness: -12%)}; --color-primary-dark-4: #{ctx_lighten($accent, 12%)};
--color-primary-dark-5: #{color.adjust($accent, $lightness: -15%)}; --color-primary-dark-5: #{ctx_lighten($accent, 15%)};
--color-primary-dark-6: #{color.adjust($accent, $lightness: -18%)}; --color-primary-dark-6: #{ctx_lighten($accent, 18%)};
--color-primary-dark-7: #{color.adjust($accent, $lightness: -21%)}; --color-primary-dark-7: #{ctx_lighten($accent, 21%)};
--color-primary-light-1: #{color.adjust($accent, $lightness: 3%)}; --color-primary-light-1: #{ctx_lighten($accent, -3%)};
--color-primary-light-2: #{color.adjust($accent, $lightness: 6%)}; --color-primary-light-2: #{ctx_lighten($accent, -6%)};
--color-primary-light-3: #{color.adjust($accent, $lightness: 9%)}; --color-primary-light-3: #{ctx_lighten($accent, -9%)};
--color-primary-light-4: #{color.adjust($accent, $lightness: 12%)}; --color-primary-light-4: #{ctx_lighten($accent, -12%)};
--color-primary-light-5: #{color.adjust($accent, $lightness: 15%)}; --color-primary-light-5: #{ctx_lighten($accent, -15%)};
--color-primary-light-6: #{color.adjust($accent, $lightness: 18%)}; --color-primary-light-6: #{ctx_lighten($accent, -18%)};
--color-primary-light-7: #{color.adjust($accent, $lightness: 21%)}; --color-primary-light-7: #{ctx_lighten($accent, -21%)};
--color-primary-alpha-10: #{color.change($accent, $alpha: 0.1)}; --color-primary-alpha-10: #{color.change($accent, $alpha: 0.1)};
--color-primary-alpha-20: #{color.change($accent, $alpha: 0.2)}; --color-primary-alpha-20: #{color.change($accent, $alpha: 0.2)};
@ -48,34 +48,34 @@
--color-secondary: #{$surface1}; --color-secondary: #{$surface1};
--color-secondary-dark-1: #{color.adjust($surface1, $lightness: 5%)}; --color-secondary-dark-1: #{ctx_lighten($surface0, -3%)};
--color-secondary-dark-2: #{color.adjust($surface1, $lightness: 10%)}; --color-secondary-dark-2: #{ctx_lighten($surface0, -6%)};
--color-secondary-dark-3: #{color.adjust($surface1, $lightness: 15%)}; --color-secondary-dark-3: #{ctx_lighten($surface0, -9%)};
--color-secondary-dark-4: #{color.adjust($surface1, $lightness: 20%)}; --color-secondary-dark-4: #{ctx_lighten($surface0, -12%)};
--color-secondary-dark-5: #{color.adjust($surface1, $lightness: 25%)}; --color-secondary-dark-5: #{ctx_lighten($surface0, -15%)};
--color-secondary-dark-6: #{color.adjust($surface1, $lightness: 30%)}; --color-secondary-dark-6: #{ctx_lighten($surface0, -18%)};
--color-secondary-dark-7: #{color.adjust($surface1, $lightness: 35%)}; --color-secondary-dark-7: #{ctx_lighten($surface0, -21%)};
--color-secondary-dark-8: #{color.adjust($surface1, $lightness: 40%)}; --color-secondary-dark-8: #{ctx_lighten($surface0, -24%)};
--color-secondary-dark-9: #{color.adjust($surface1, $lightness: 45%)}; --color-secondary-dark-9: #{ctx_lighten($surface0, -27%)};
--color-secondary-dark-10: #{color.adjust($surface1, $lightness: 50%)}; --color-secondary-dark-10: #{ctx_lighten($surface0, -30%)};
--color-secondary-dark-11: #{color.adjust($surface1, $lightness: 55%)}; --color-secondary-dark-11: #{ctx_lighten($surface0, -33%)};
--color-secondary-dark-12: #{color.adjust($surface1, $lightness: 60%)}; --color-secondary-dark-12: #{ctx_lighten($surface0, -36%)};
--color-secondary-dark-13: #{color.adjust($surface1, $lightness: 65%)}; --color-secondary-dark-13: #{ctx_lighten($surface0, -39%)};
--color-secondary-light-1: #{color.adjust($surface1, $lightness: -5%)}; --color-secondary-light-1: #{ctx_lighten($surface0, 3%)};
--color-secondary-light-2: #{color.adjust($surface1, $lightness: -10%)}; --color-secondary-light-2: #{ctx_lighten($surface0, 6%)};
--color-secondary-light-3: #{color.adjust($surface1, $lightness: -15%)}; --color-secondary-light-3: #{ctx_lighten($surface0, 9%)};
--color-secondary-light-4: #{color.adjust($surface1, $lightness: -20%)}; --color-secondary-light-4: #{ctx_lighten($surface0, 12%)};
--color-secondary-alpha-10: #{color.change($surface1, $alpha: 0.1)}; --color-secondary-alpha-10: #{color.change($surface0, $alpha: 0.1)};
--color-secondary-alpha-20: #{color.change($surface1, $alpha: 0.2)}; --color-secondary-alpha-20: #{color.change($surface0, $alpha: 0.2)};
--color-secondary-alpha-30: #{color.change($surface1, $alpha: 0.3)}; --color-secondary-alpha-30: #{color.change($surface0, $alpha: 0.3)};
--color-secondary-alpha-40: #{color.change($surface1, $alpha: 0.4)}; --color-secondary-alpha-40: #{color.change($surface0, $alpha: 0.4)};
--color-secondary-alpha-50: #{color.change($surface1, $alpha: 0.5)}; --color-secondary-alpha-50: #{color.change($surface0, $alpha: 0.5)};
--color-secondary-alpha-60: #{color.change($surface1, $alpha: 0.6)}; --color-secondary-alpha-60: #{color.change($surface0, $alpha: 0.6)};
--color-secondary-alpha-70: #{color.change($surface1, $alpha: 0.7)}; --color-secondary-alpha-70: #{color.change($surface0, $alpha: 0.7)};
--color-secondary-alpha-80: #{color.change($surface1, $alpha: 0.8)}; --color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)};
--color-secondary-alpha-90: #{color.change($surface1, $alpha: 0.9)}; --color-secondary-alpha-90: #{color.change($surface0, $alpha: 0.9)};
/* colors */ /* colors */
--color-red: #{$red}; --color-red: #{$red};
@ -112,39 +112,39 @@
--color-white: #{$text}; --color-white: #{$text};
--color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)}; --color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)};
--color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)}; --color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)};
--color-diff-removed-row-bg: #{color.change($red, $alpha: 0.15)}; --color-diff-removed-row-bg: #{color.change($red, $alpha: 0.07)};
--color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.15)}; --color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.07)};
--color-diff-added-row-bg: #{color.change($green, $alpha: 0.15)}; --color-diff-added-row-bg: #{color.change($green, $alpha: 0.07)};
--color-diff-removed-row-border: #{color.change($red, $alpha: 0.15)}; --color-diff-removed-row-border: #{color.change($red, $alpha: 0.07)};
--color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.15)}; --color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)};
--color-diff-added-row-border: #{color.change($green, $alpha: 0.15)}; --color-diff-added-row-border: #{color.change($green, $alpha: 0.07)};
--color-diff-inactive: #{$overlay2}; --color-diff-inactive: #{$overlay2};
--color-error-border: #{$red}; --color-error-border: #{$red};
--color-error-bg: #{$red}; --color-error-bg: #{$red};
--color-error-bg-active: #{color.adjust($red, $lightness: -5%)}; --color-error-bg-active: #{ctx_lighten($red, 5%)};
--color-error-bg-hover: #{color.adjust($red, $lightness: -10%)}; --color-error-bg-hover: #{ctx_lighten($red, 10%)};
--color-error-text: #{$crust}; --color-error-text: #{$crust};
--color-success-border: #{color.adjust($green, $lightness: -10%)}; --color-success-border: #{ctx_lighten($green, 10%)};
--color-success-bg: #{$green}; --color-success-bg: #{$green};
--color-success-text: #{$crust}; --color-success-text: #{$crust};
--color-warning-border: #{color.adjust($yellow, $lightness: -10%)}; --color-warning-border: #{ctx_lighten($yellow, 10%)};
--color-warning-bg: #{$yellow}; --color-warning-bg: #{$yellow};
--color-warning-text: #{$crust}; --color-warning-text: #{$crust};
--color-info-border: #{color.adjust($blue, $lightness: -10%)}; --color-info-border: #{ctx_lighten($blue, 10%)};
--color-info-bg: #{$crust}; --color-info-bg: #{$crust};
--color-info-text: #{$crust}; --color-info-text: #{$crust};
--color-red-badge: #{color.adjust($red, $lightness: -10%)}; --color-red-badge: #{ctx_lighten($red, 10%)};
--color-red-badge-bg: #{$crust}; --color-red-badge-bg: #{$crust};
--color-red-badge-hover-bg: #{color.adjust($red, $lightness: -5%)}; --color-red-badge-hover-bg: #{ctx_lighten($red, 5%)};
--color-green-badge: #{$green}; --color-green-badge: #{$green};
--color-green-badge-bg: #{$crust}; --color-green-badge-bg: #{$crust};
--color-green-badge-hover-bg: #{color.adjust($green, $lightness: -5%)}; --color-green-badge-hover-bg: #{ctx_lighten($green, 5%)};
--color-yellow-badge: #{$yellow}; --color-yellow-badge: #{$yellow};
--color-yellow-badge-bg: #{$crust}; --color-yellow-badge-bg: #{$crust};
--color-yellow-badge-hover-bg: #{color.adjust($yellow, $lightness: -5%)}; --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)};
--color-orange-badge: #{$peach}; --color-orange-badge: #{$peach};
--color-orange-badge-bg: #{$crust}; --color-orange-badge-bg: #{$crust};
--color-orange-badge-hover-bg: #{color.adjust($peach, $lightness: -5%)}; --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)};
--color-git: #{$peach}; --color-git: #{$peach};
/* target-based colors */ /* target-based colors */
@ -167,36 +167,37 @@
--color-input-border-hover: #{$surface2}; --color-input-border-hover: #{$surface2};
--color-navbar: #{$mantle}; --color-navbar: #{$mantle};
--color-navbar-transparent: #{color.change($crust, $alpha: 0)}; --color-navbar-transparent: #{color.change($crust, $alpha: 0)};
--color-light: #{color.change($crust, $alpha: 0.1)}; --color-light: #{color.change($surface2, $alpha: 0.3)};
--color-light-mimic-enabled: rgba( --color-light-mimic-enabled: rgba(
0, 0,
0, 0,
0, 0,
calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
); );
--color-light-border: #ffffff28; --color-light-border: #{$surface2};
--color-hover: #ffffff10; --color-hover: #{color.change($overlay0, $alpha: 0.1)};
--color-active: #{color.change($text, $alpha: 0.1)}; --color-active: #{color.change($text, $alpha: 0.1)};
--color-menu: #{$surface0}; --color-menu: #{$surface0};
--color-card: #{$surface0}; --color-card: #{$surface0};
--color-markup-table-row: #ffffff06; --color-markup-table-row: #{color.change($text, $alpha: 0.02)};
--color-markup-code-block: #ffffff0d; --color-markup-code-block: #{color.change($text, $alpha: 0.05)};
--color-button: #353846; --color-button: #{$surface0};
--color-code-bg: #{$base}; --color-code-bg: #{$base};
--color-code-sidebar-bg: #2e323e; --color-code-sidebar-bg: #{$surface0};
--color-shadow: #{color.change($crust, $alpha: 0.1)}; --color-shadow: #{color.change($crust, $alpha: 0.1)};
--color-secondary-bg: #2a2e3a; --color-secondary-bg: #{$surface0};
--color-text-focus: #{$text}; --color-text-focus: #{$text};
--color-expand-button: #{$surface2}; --color-expand-button: #{$surface2};
--color-placeholder-text: #{$surface2}; --color-placeholder-text: #{$surface2};
--color-editor-line-highlight: var(--color-primary-light-5); --color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2); --color-project-board-bg: var(--color-secondary-light-2);
/* gitea source code: */
/* should ideally be --color-text-dark, see #15651 */ /* should ideally be --color-text-dark, see #15651 */
--color-caret: var(--color-text); --color-caret: var(--color-text);
--color-reaction-bg: #ffffff12; --color-reaction-bg: #{color.change($text, $alpha: 0.07)};
--color-reaction-active-bg: var(--color-primary-alpha-40); --color-reaction-active-bg: var(--color-primary-alpha-40);
--color-header-bar: #{$mantle}; --color-header-bar: #{$mantle};
--color-label-active-bg: #4c525e; --color-label-active-bg: #{$surface2};
--color-accent: var(--color-primary-light-1); --color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5); --color-small-accent: var(--color-primary-light-5);
--color-active-line: #{$surface1}; --color-active-line: #{$surface1};