🥂 Initial commit

src/themes/img/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
+  <defs>
+    <style>
+      .a {
+        fill: #e373ff;
+      }
+    </style>
+  </defs>
+  <path class="a" d="M32,0V160H0V0ZM80,0V32h48V64H80V32H48V96h80v32H72v32h88V0Z"/>
+</svg>

src/themes/img/loading.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 160">
+  <defs>
+    <style>
+      .a, .b {
+        fill: #e373ff;
+      }
+
+      .a {
+        opacity: 0.4;
+      }
+    </style>
+  </defs>
+  <path class="a" d="M432,48V80H320V48h48V0h32V48ZM48,80H80V0H48Zm96,0h32V32H144ZM0,80H32V0H0ZM224,0V32h48V64H224V32H192V80H304V0ZM352,0H320V32h32Z"/>
+  <path class="b" d="M352,160H320V80h32Zm48-32V80H368v80h80V128ZM80,80H48v48H80Zm64,0v48H80v32h96V80ZM32,80H0v80H32Zm160,0V96h80v32H216v32h88V80Z"/>
+</svg>

src/themes/img/logo.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 160">
+  <defs>
+    <style>
+      .a {
+        fill: #e373ff;
+      }
+    </style>
+  </defs>
+  <path class="a" d="M32,0V160H0V0ZM400,128V80.70135h32V48H400V0H368V48H320V160h32V80.70135h16V160h80V128ZM48,0V128H80V0Zm96,32v96H80v32h96V32ZM224,0V32h48V64H224V32H192V96h80v32H216v32h88V0ZM352,0H320V32h32Z"/>
+</svg>

src/themes/scss/dark.scss

@@ -0,0 +1,66 @@
+@use '@lucas-labs/lui-micro' as lui;
+@use './utils/color-utils' as c;
+@use './gitea';
+
+$is-dark: true;
+
+$colors: (
+    theme: (
+        'rosewater':  c.variants(#f5e0dc, $is-dark, $dark: false),
+        'flamingo':   c.variants(#f2cdcd, $is-dark, $dark: false),
+        'pink':       c.variants(#f5c2e7, $is-dark, $dark: false),
+        'mauve':      c.variants(#cba6f7, $is-dark, $dark: false),
+        'red':        c.variants(#f38ba8, $is-dark, $dark: false),
+        'maroon':     c.variants(#eba0ac, $is-dark, $dark: false),
+        'peach':      c.variants(#fab387, $is-dark, $dark: false),
+        'yellow':     c.variants(#f9e2af, $is-dark, $dark: false),
+        'green':      c.variants(#a6e3a1, $is-dark, $dark: false),
+        'teal':       c.variants(#94e2d5, $is-dark, $dark: false),
+        'sky':        c.variants(#89dceb, $is-dark, $dark: false),
+        'sapphire':   c.variants(#74c7ec, $is-dark, $dark: false),
+        'blue':       c.variants(#89b4fa, $is-dark, $dark: false),
+        'lavender':   c.variants(#b4befe, $is-dark, $dark: false),
+        'black':      c.variants(#181825, $is-dark, $dark: false),
+        'white':      c.variants(#cdd6f4, $is-dark, $dark: false),
+    ),    
+    text: #cdd6f4,
+    primary: c.variants(#cba6f7, $is-dark),
+    secondary: c.variants(#313244, $is-dark),
+    elevation: (
+        '1': #11111b,  // crust
+        '2': #181825,  // mantle
+        '3': #1e1e2e,  // base
+        '4': #313244,  // surface0
+        '5': #45475a,  // surface1
+        '6': #585b70,  // surface2
+        '7': #6c7086,  // overlay0
+        '8': #7f849c,  // overlay1
+        '9': #9399b2,  // overlay2
+        '10': #a6adc8, // subtext0
+        '11': #bac2de, // subtext1
+        '12': #cdd6f4, // text
+    )
+);
+
+// init lui-micro, css-vars only (no reboot, no basic)
+@include lui.init(
+    $theme: (
+        colors: $colors,
+        variables: (
+            'base-font-size': 16px,
+            'font-family': 'Inter, Roboto, sans-serif',
+            'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
+        ),
+    ),
+    
+    $options: (
+        reboot: false,
+        basic: false,
+        fg-var-name: 'text',
+        bg-var-name: 'elevation/1',
+    ),
+);
+
+@include gitea.make-theme(
+    $is-dark: $is-dark,
+);

src/themes/scss/gitea/index.scss

@@ -0,0 +1,295 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use './modules/chroma' as chroma;
+@use './modules/codemirror' as codemirror;
+
+@use '@lucas-labs/lui-micro/var' as var;
+
+@mixin make-theme($is-dark: true) {
+    $lvl1: if($is-dark, #{color.get('elevation/1')}, #{color.get('elevation/3')});
+    $lvl1-rgb: if($is-dark, #{color.get('elevation/1', 'rgb')}, #{color.get('elevation/3', 'rgb')});
+    $lvl2: #{color.get('elevation/2')};
+    $lvl2-rgb: #{color.get('elevation/2', 'rgb')};
+    $lvl3: if($is-dark, #{color.get('elevation/3')}, #{color.get('elevation/1')});
+    $lvl3-rgb: if($is-dark, #{color.get('elevation/3', 'rgb')}, #{color.get('elevation/1', 'rgb')});
+
+    :root {
+        * {
+            --fonts-regular: #{var.get('font-family')};
+            --fonts-monospace: #{var.get('code-font-family')};
+        }
+
+        @if $is-dark {
+            color-scheme: dark;
+            --is-dark-theme: true;
+        } @else {
+            color-scheme: light;
+            --is-dark-theme: false;
+        }
+
+        accent-color: #{color.get('primary/base')};
+
+        --color-primary: #{color.get('primary/base')};
+        --color-primary-contrast: #{color.get('primary/base', 'contrast')};
+
+        --color-primary-dark-1: #{color.get('primary/dark/3%')};
+        --color-primary-dark-2: #{color.get('primary/dark/6%')};
+        --color-primary-dark-3: #{color.get('primary/dark/9%')};
+        --color-primary-dark-4: #{color.get('primary/dark/12%')};
+        --color-primary-dark-5: #{color.get('primary/dark/15%')};
+        --color-primary-dark-6: #{color.get('primary/dark/18%')};
+        --color-primary-dark-7: #{color.get('primary/dark/21%')};
+
+        --color-primary-light-1: #{color.get('primary/light/3%')};
+        --color-primary-light-2: #{color.get('primary/light/6%')};
+        --color-primary-light-3: #{color.get('primary/light/9%')};
+        --color-primary-light-4: #{color.get('primary/light/12%')};
+        --color-primary-light-5: #{color.get('primary/light/15%')};
+        --color-primary-light-6: #{color.get('primary/light/18%')};
+        --color-primary-light-7: #{color.get('primary/light/21%')};
+
+        --color-primary-alpha-10: rgba(#{color.get('primary/base', 'rgb')}, 0.1);
+        --color-primary-alpha-20: rgba(#{color.get('primary/base', 'rgb')}, 0.2);
+        --color-primary-alpha-30: rgba(#{color.get('primary/base', 'rgb')}, 0.3);
+        --color-primary-alpha-40: rgba(#{color.get('primary/base', 'rgb')}, 0.4);
+        --color-primary-alpha-50: rgba(#{color.get('primary/base', 'rgb')}, 0.5);
+        --color-primary-alpha-60: rgba(#{color.get('primary/base', 'rgb')}, 0.6);
+        --color-primary-alpha-70: rgba(#{color.get('primary/base', 'rgb')}, 0.7);
+        --color-primary-alpha-80: rgba(#{color.get('primary/base', 'rgb')}, 0.8);
+        --color-primary-alpha-90: rgba(#{color.get('primary/base', 'rgb')}, 0.9);
+
+        --color-secondary: #{color.get('elevation/5')};
+
+        --color-secondary-dark-1: #{color.get('secondary/light/3%')};
+        --color-secondary-dark-2: #{color.get('secondary/light/6%')};
+        --color-secondary-dark-3: #{color.get('secondary/light/9%')};
+        --color-secondary-dark-4: #{color.get('secondary/light/12%')};
+        --color-secondary-dark-5: #{color.get('secondary/light/15%')};
+        --color-secondary-dark-6: #{color.get('secondary/light/18%')};
+        --color-secondary-dark-7: #{color.get('secondary/light/21%')};
+        --color-secondary-dark-8: #{color.get('secondary/light/24%')};
+        --color-secondary-dark-9: #{color.get('secondary/light/27%')};
+        --color-secondary-dark-10: #{color.get('secondary/light/30%')};
+        --color-secondary-dark-11: #{color.get('secondary/light/33%')};
+        --color-secondary-dark-12: #{color.get('secondary/light/36%')};
+        --color-secondary-dark-13: #{color.get('secondary/light/39%')};
+
+        --color-secondary-light-1: #{color.get('secondary/dark/3%')};
+        --color-secondary-light-2: #{color.get('secondary/dark/6%')};
+        --color-secondary-light-3: #{color.get('secondary/dark/9%')};
+        --color-secondary-light-4: #{color.get('secondary/dark/12%')};
+
+        --color-secondary-alpha-10: rgba(#{color.get('secondary/base', 'rgb')}, 0.1);
+        --color-secondary-alpha-20: rgba(#{color.get('secondary/base', 'rgb')}, 0.2);
+        --color-secondary-alpha-30: rgba(#{color.get('secondary/base', 'rgb')}, 0.3);
+        --color-secondary-alpha-40: rgba(#{color.get('secondary/base', 'rgb')}, 0.4);
+        --color-secondary-alpha-50: rgba(#{color.get('secondary/base', 'rgb')}, 0.5);
+        --color-secondary-alpha-60: rgba(#{color.get('secondary/base', 'rgb')}, 0.6);
+        --color-secondary-alpha-70: rgba(#{color.get('secondary/base', 'rgb')}, 0.7);
+        --color-secondary-alpha-80: rgba(#{color.get('secondary/base', 'rgb')}, 0.8);
+        --color-secondary-alpha-90: rgba(#{color.get('secondary/base', 'rgb')}, 0.9);
+
+        /* colors */
+        --color-red: #{color.get('theme/red/base')};
+        --color-orange: #{color.get('theme/peach/base')};
+        --color-yellow: #{color.get('theme/yellow/base')};
+        --color-olive: #{color.get('theme/green/base')};
+        --color-green: #{color.get('theme/green/base')};
+        --color-teal: #{color.get('theme/teal/base')};
+        --color-blue: #{color.get('theme/blue/base')};
+        --color-violet: #{color.get('theme/lavender/base')};
+        --color-purple: #{color.get('theme/mauve/base')};
+        --color-pink: #{color.get('theme/pink/base')};
+        --color-brown: #{color.get('theme/flamingo/base')};
+        --color-grey: #{color.get('elevation/9')};
+        --color-black: #{color.get('elevation/1')};
+
+        /* light variants  */
+        --color-red-light: #{color.get('theme/red/light/12%')};
+        --color-orange-light: #{color.get('theme/peach/light/12%')};
+        --color-yellow-light: #{color.get('theme/yellow/light/12%')};
+        --color-olive-light: #{color.get('theme/green/light/12%')};
+        --color-green-light: #{color.get('theme/green/light/12%')};
+        --color-teal-light: #{color.get('theme/teal/light/12%')};
+        --color-blue-light: #{color.get('theme/blue/light/12%')};
+        --color-violet-light: #{color.get('theme/lavender/light/12%')};
+        --color-purple-light: #{color.get('theme/mauve/light/12%')};
+        --color-pink-light: #{color.get('theme/pink/light/12%')};
+        --color-brown-light: #{color.get('theme/flamingo/light/12%')};
+        --color-grey-light: #{color.get('elevation/11')};
+        --color-black-light: #{if(
+                is-dark,
+                color.get('theme/black/light/12%'),
+                color.get('theme/white/light/12%')
+            )};
+
+        /* other colors */
+        --color-gold: #{color.get('theme/rosewater/base')};
+        --color-white: #{color.get('text')};
+        --color-diff-removed-word-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
+        --color-diff-added-word-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
+        --color-diff-removed-row-bg: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
+        --color-diff-moved-row-bg: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
+        --color-diff-added-row-bg: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
+        --color-diff-removed-row-border: rgba(#{color.get('theme/red/base', 'rgb')}, 0.07);
+        --color-diff-moved-row-border: rgba(#{color.get('theme/yellow/base', 'rgb')}, 0.07);
+        --color-diff-added-row-border: rgba(#{color.get('theme/green/base', 'rgb')}, 0.07);
+        --color-diff-inactive: #{color.get('elevation/9')};
+        --color-error-border: #{color.get('theme/red/base')};
+        --color-error-bg: #{color.get('theme/red/base')};
+        --color-error-bg-active: #{color.get('theme/red/light/6%')};
+        --color-error-bg-hover: #{color.get('theme/red/light/12%')};
+        --color-error-text: #{$lvl1};
+        --color-success-border: #{color.get('theme/green/light/12%')};
+        --color-success-bg: #{color.get('theme/green/base')};
+        --color-success-text: #{$lvl1};
+        --color-warning-border: #{color.get('theme/yellow/light/12%')};
+        --color-warning-bg: #{color.get('theme/yellow/base')};
+        --color-warning-text: #{$lvl1};
+        --color-info-border: #{color.get('theme/blue/light/12%')};
+        --color-info-bg: #{$lvl1};
+        --color-info-text: #{color.get('text')};
+        --color-red-badge: #{color.get('theme/red/light/12%')};
+        --color-red-badge-bg: #{$lvl1};
+        --color-red-badge-hover-bg: #{color.get('theme/red/light/6%')};
+        --color-green-badge: #{color.get('theme/green/base')};
+        --color-green-badge-bg: #{$lvl1};
+        --color-green-badge-hover-bg: #{color.get('theme/green/light/6%')};
+        --color-yellow-badge: #{color.get('theme/yellow/base')};
+        --color-yellow-badge-bg: #{$lvl1};
+        --color-yellow-badge-hover-bg: #{color.get('theme/yellow/light/6%')};
+        --color-orange-badge: #{color.get('theme/peach/base')};
+        --color-orange-badge-bg: #{$lvl1};
+        --color-orange-badge-hover-bg: #{color.get('theme/peach/light/6%')};
+        --color-git: #{color.get('theme/peach/base')};
+
+        /* target-based colors */
+        --color-body: #{$lvl1};
+        --color-box-header: #{$lvl2};
+        --color-box-body: #{$lvl2};
+        --color-box-body-highlight: #{color.get('elevation/4')};
+        --color-text-dark: #{color.get('elevation/10')};
+        --color-text: #{color.get('text')};
+        --color-text-light: #{color.get('elevation/11')};
+        --color-text-light-1: #{color.get('elevation/11')};
+        --color-text-light-2: #{color.get('elevation/11')};
+        --color-text-light-3: #{color.get('elevation/11')};
+        --color-footer: #{$lvl2};
+        --color-timeline: #{color.get('elevation/4')};
+        --color-input-text: #{color.get('text')};
+        --color-input-background: #{color.get('elevation/4')};
+        --color-input-toggle-background: #{color.get('elevation/4')};
+        --color-input-border: #{color.get('elevation/5')};
+        --color-input-border-hover: #{color.get('elevation/6')};
+        --color-header-wrapper: #{$lvl2};
+        --color-header-wrapper-transparent: #00000000;
+        --color-light: #{color.get('elevation/6')};
+        --color-light-mimic-enabled: rgba(
+            0,
+            0,
+            0,
+            calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
+        );
+        --color-light-border: #{color.get('elevation/6')};
+        --color-hover: rgba(#{color.get('elevation/6', 'rgb')}, 0.1);
+        --color-active: rgba(#{color.get('text', 'rgb')}, 0.1);
+        --color-menu: #{color.get('elevation/4')};
+        --color-card: #{color.get('elevation/4')};
+        --color-markup-table-row: rgba(#{color.get('text', 'rgb')}, 0.02);
+        --color-markup-code-block: rgba(#{color.get('text', 'rgb')}, 0.05);
+        --color-button: #{color.get('elevation/4')};
+        --color-code-bg: #{color.get('elevation/3')};
+        --color-code-sidebar-bg: #{color.get('elevation/4')};
+        --color-shadow: rgba(#{$lvl1-rgb}, 0.1);
+        --color-secondary-bg: #{color.get('elevation/4')};
+        --color-text-focus: #{color.get('text')};
+        --color-expand-button: #{color.get('elevation/6')};
+        --color-placeholder-text: #{color.get('elevation/6')};
+        --color-editor-line-highlight: var(--color-primary-light-5);
+        --color-project-board-bg: var(--color-secondary-light-2);
+        --color-caret: var(--color-text);
+        --color-reaction-bg: rgba(#{color.get('text', 'rgb')}, 0.07);
+        --color-reaction-active-bg: var(--color-primary-alpha-40);
+        --color-nav-bg: #{$lvl2};
+        --color-nav-hover-bg: #{color.get('elevation/6')};
+        --color-label-active-bg: #{color.get('elevation/6')};
+        --color-accent: var(--color-primary-light-1);
+        --color-small-accent: var(--color-primary-light-5);
+        --color-active-line: #{color.get('elevation/5')};
+    }
+
+    @if $is-dark {
+        /* invert emojis that are hard to read otherwise */
+        .emoji[aria-label='check mark'],
+        .emoji[aria-label='currency exchange'],
+        .emoji[aria-label='TOP arrow'],
+        .emoji[aria-label='END arrow'],
+        .emoji[aria-label='ON! arrow'],
+        .emoji[aria-label='SOON arrow'],
+        .emoji[aria-label='heavy dollar sign'],
+        .emoji[aria-label='copyright'],
+        .emoji[aria-label='registered'],
+        .emoji[aria-label='trade mark'],
+        .emoji[aria-label='multiply'],
+        .emoji[aria-label='plus'],
+        .emoji[aria-label='minus'],
+        .emoji[aria-label='divide'],
+        .emoji[aria-label='curly loop'],
+        .emoji[aria-label='double curly loop'],
+        .emoji[aria-label='wavy dash'],
+        .emoji[aria-label='paw prints'],
+        .emoji[aria-label='musical note'],
+        .emoji[aria-label='musical notes'] {
+            filter: invert(100%) hue-rotate(180deg);
+        }
+    }
+
+    .ui.ui.ui.button:not(.inverted, .basic),
+    .ui.ui.ui.label:not(.inverted, .basic) {
+        &.primary,
+        &.green,
+        &.red,
+        &.teal {
+            color: $lvl1;
+            &:hover {
+                color: $lvl3;
+            }
+        }
+    }
+
+    .ui.basic.modal {
+        background-color: $lvl3;
+    }
+
+    // link color for signed commits
+    .ui.commit-header-row .svg.gitea-lock ~ a {
+        color: $lvl1;
+    }
+
+    // most recent commit hover when signed
+    .ui.sha.isSigned.isVerified:hover {
+        .shortsha {
+            color: $lvl1;
+        }
+        svg.gitea-lock {
+            fill: $lvl1;
+        }
+    }
+
+    // modal text color for the "Remove GPG Key" modal
+    .ui.basic.modal,
+    .ui.basic.modal > .header,
+    .ui.inverted.button {
+        color: color.get('text') !important;
+    }
+
+    ::selection {
+        background: rgba(#{color.get('theme/rosewater/base', 'rgb')}, 0.3) !important;
+    }
+
+    body {
+        font-size: var.get('base-font-size');
+    }
+
+    @include chroma.make-chroma-styles;
+    @include codemirror.make-code-mirror-styles;
+}

src/themes/scss/gitea/modules/_chroma.scss

@@ -0,0 +1,310 @@
+@use '@lucas-labs/lui-micro/color' as color;
+@use '@lucas-labs/lui-micro/var' as var;
+
+
+// variables: (
+//     'base-font-size': 16px,
+//     'font-family': 'Roboto, sans-serif',
+//     'code-font-family': '"Source Code Pro", "Roboto Mono", Consolas, monospace',
+// ),
+
+@mixin make-chroma-styles {
+    .chroma .code-inner{
+        font: 14px var.get('code-font-family');
+    }
+
+    /* NameBuiltinPseudo */
+    .chroma .bp {
+        color: color.get('theme/peach/base');
+    }
+    /* Comment */
+    .chroma .c {
+        color: color.get('elevated/7');
+    }
+    /* CommentSingle */
+    .chroma .c1 {
+        color: color.get('elevated/7');
+    }
+    /* CommentHashbang */
+    .chroma .ch {
+        color: color.get('elevated/7');
+    }
+    /* CommentMultiline */
+    .chroma .cm {
+        color: color.get('elevated/7');
+    }
+    /* CommentPreproc */
+    .chroma .cp {
+        color: color.get('theme/blue/base');
+    }
+    /* CommentPreprocFile */
+    .chroma .cpf {
+        color: color.get('theme/blue/base');
+    }
+    /* CommentSpecial */
+    .chroma .cs {
+        color: color.get('elevated/7');
+    }
+    /* LiteralStringDelimiter */
+    .chroma .dl {
+        color: color.get('theme/blue/base');
+    }
+    /* NameFunctionMagic */
+    .chroma .fm {
+    }
+    /* Generic */
+    .chroma .g {
+    }
+    /* GenericDeleted */
+    .chroma .gd {
+        color: color.get('theme');
+        background-color: rgba(#{color.get('theme/red/base', 'rgb')}, 0.15);
+    }
+    /* GenericEmph */
+    .chroma .ge {
+        font-style: italic;
+    }
+    /* GenericHeading */
+    .chroma .gh {
+        color: color.get('theme/sky/base');
+    }
+    /* GenericInserted */
+    .chroma .gi {
+        color: color.get('theme');
+        background-color: rgba(#{color.get('theme/green/base', 'rgb')}, 0.15);
+    }
+    /* GenericUnderline */
+    .chroma .gl {
+    }
+    /* GenericOutput */
+    .chroma .go {
+        color: color.get('theme/peach/base');
+    }
+    /* GenericPrompt */
+    .chroma .gp {
+        color: color.get('elevated/7');
+        font-weight: bold;
+    }
+    /* GenericError */
+    .chroma .gr {
+        color: color.get('theme/maroon/base');
+    }
+    /* GenericStrong */
+    .chroma .gs {
+        font-weight: bold;
+    }
+    /* GenericTraceback */
+    .chroma .gt {
+        color: color.get('theme/maroon/base');
+    }
+    /* GenericSubheading */
+    .chroma .gu {
+        color: color.get('theme/sky/base');
+    }
+    /* LiteralNumberIntegerLong */
+    .chroma .il {
+        color: color.get('theme/peach/base');
+    }
+    /* Keyword */
+    .chroma .k {
+        color: color.get('theme/mauve/base');
+    }
+    /* KeywordConstant */
+    .chroma .kc {
+        color: color.get('theme/yellow/base');
+    }
+    /* KeywordDeclaration */
+    .chroma .kd {
+        color: color.get('theme/mauve/base');
+    }
+    /* KeywordNamespace */
+    .chroma .kn {
+        color: color.get('theme/yellow/base');
+    }
+    /* KeywordPseudo */
+    .chroma .kp {
+        color: color.get('theme/mauve/base');
+        font-weight: bold;
+    }
+    /* KeywordReserved */
+    .chroma .kr {
+        color: color.get('theme/mauve/base');
+    }
+    /* KeywordType */
+    .chroma .kt {
+        color: color.get('theme/yellow/base');
+    }
+    /* Literal */
+    .chroma .l {
+    }
+    /* LiteralDate */
+    .chroma .ld {
+    }
+    /* LiteralNumber */
+    .chroma .m {
+        color: color.get('theme/peach/base');
+    }
+    /* LiteralNumberBin */
+    .chroma .mb {
+        color: color.get('theme/peach/base');
+    }
+    /* LiteralNumberFloat */
+    .chroma .mf {
+        color: color.get('theme/peach/base');
+    }
+    /* LiteralNumberHex */
+    .chroma .mh {
+        color: color.get('theme/peach/base');
+    }
+    /* LiteralNumberInteger */
+    .chroma .mi {
+        color: color.get('theme/peach/base');
+    }
+    /* LiteralNumberOct */
+    .chroma .mo {
+        color: color.get('theme/peach/base');
+    }
+    /* Name */
+    .chroma .n {
+        color: color.get('theme/lavender/base');
+    }
+    /* NameAttribute */
+    .chroma .na {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameBuiltin */
+    .chroma .nb {
+        color: color.get('theme/peach/base');
+    }
+    /* NameClass */
+    .chroma .nc {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameDecorator */
+    .chroma .nd {
+        color: color.get('theme/pink/base');
+    }
+    /* NameException */
+    .chroma .ne {
+        color: color.get('theme/maroon/base');
+    }
+    /* NameFunction */
+    .chroma .nf {
+        color: color.get('theme/blue/base');
+    }
+    /* NameEntity */
+    .chroma .ni {
+        color: color.get('theme/pink/base');
+    }
+    /* NameLabel */
+    .chroma .nl {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameNamespace */
+    .chroma .nn {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameConstant */
+    .chroma .no {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameTag */
+    .chroma .nt {
+        color: color.get('theme/mauve/base');
+    }
+    /* NameVariable */
+    .chroma .nv {
+        color: color.get('theme/peach/base');
+    }
+    /* NameOther */
+    .chroma .nx {
+        color: color.get('theme/peach/base');
+    }
+    /* Operator */
+    .chroma .o {
+        color: color.get('theme/sky/base');
+    }
+    /* OperatorWord */
+    .chroma .ow {
+        color: color.get('theme/sky/base');
+        font-weight: bold;
+    }
+    /* Punctuation */
+    .chroma .p {
+        color: color.get('elevated/9');
+    }
+    /* NameProperty */
+    .chroma .py {
+    }
+    /* LiteralString */
+    .chroma .s {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringSingle */
+    .chroma .s1 {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringDouble */
+    .chroma .s2 {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringAffix */
+    .chroma .sa {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringBacktick */
+    .chroma .sb {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringChar */
+    .chroma .sc {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringDoc */
+    .chroma .sd {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringEscape */
+    .chroma .se {
+        color: color.get('theme/blue/base');
+    }
+    /* LiteralStringHeredoc */
+    .chroma .sh {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringInterpol */
+    .chroma .si {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringRegex */
+    .chroma .sr {
+        color: color.get('theme/blue/base');
+    }
+    /* LiteralStringSymbol */
+    .chroma .ss {
+        color: color.get('theme/green/base');
+    }
+    /* LiteralStringOther */
+    .chroma .sx {
+        color: color.get('theme/green/base');
+    }
+    /* NameVariableClass */
+    .chroma .vc {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameVariableGlobal */
+    .chroma .vg {
+        color: color.get('theme/peach/base');
+    }
+    /* NameVariableInstance */
+    .chroma .vi {
+        color: color.get('theme/yellow/base');
+    }
+    /* NameVariableMagic */
+    .chroma .vm {
+    }
+    /* TextWhitespace */
+    .chroma .w {
+        color: color.get('elevated/4');
+    }
+}

src/themes/scss/gitea/modules/_codemirror.scss

@@ -0,0 +1,95 @@
+@use '@lucas-labs/lui-micro/color' as color;
+
+@mixin make-code-mirror-styles {
+    .CodeMirror,
+    .CodeMirror.cm-s-default,
+    .CodeMirror.cm-s-paper {
+        .cm-property {
+            color: color.get('text')
+        }
+
+        .cm-header {
+            color: color.get('text')
+        }
+
+        .cm-quote {
+            color: color.get('theme/green/base')
+        }
+
+        .cm-keyword {
+            color: color.get('theme/mauve/base');
+        }
+
+        .cm-atom {
+            color: color.get('theme/red/base');
+        }
+
+        .cm-number {
+            color: color.get('theme/peach/base');
+        }
+
+        .cm-def {
+            color: color.get('text')
+        }
+
+        .cm-variable-2 {
+            color: color.get('theme/sky/base');
+        }
+
+        .cm-variable-3 {
+            color: color.get('theme/teal/base');
+        }
+
+        .cm-comment {
+            color: color.get('elevation/6')
+        }
+
+        .cm-string {
+            color: color.get('theme/green')
+        }
+
+        .cm-string-2 {
+            color: color.get('theme/green')
+        }
+
+        .cm-meta {
+            color: color.get('theme/peach/base');
+        }
+
+        .cm-qualifier {
+            color: color.get('theme/peach/base');
+        }
+
+        .cm-builtin {
+            color: color.get('theme/peach/base');
+        }
+
+        .cm-bracket {
+            color: color.get('text')
+        }
+
+        .cm-tag {
+            color: color.get('theme/yellow/base');
+        }
+
+        .cm-attribute {
+            color: color.get('theme/yellow/base');
+        }
+
+        .cm-hr {
+            color: color.get('elevation/9');
+        }
+
+        .cm-url {
+            color: color.get('theme/blue/base');
+        }
+
+        .cm-link {
+            color: color.get('theme/blue/base');
+        }
+
+        .cm-error {
+            color: color.get('theme/red/base');
+        }
+    }
+}

src/themes/scss/utils/_color-utils.scss

@@ -0,0 +1,85 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@function light-change($color, $amount, $isDark) {
+    $multiplier: if($isDark, -1, 1);
+    @return color.adjust($color, $lightness: $amount * $multiplier);
+}
+
+@function alpha-change($color, $alpha) {
+    @return color.change($color, $alpha: $alpha);
+}
+
+@function color-variants-light($color, $is-dark, $with-base: false) {
+    $set: (
+        '3%':  light-change($color, -3%, $is-dark),
+        '6%':  light-change($color, -6%, $is-dark),
+        '9%':  light-change($color, -9%, $is-dark),
+        '12%': light-change($color, -12%, $is-dark),
+        '15%': light-change($color, -15%, $is-dark),
+        '18%': light-change($color, -18%, $is-dark),
+        '21%': light-change($color, -21%, $is-dark),
+        '24%': light-change($color, -24%, $is-dark),
+        '27%': light-change($color, -27%, $is-dark),
+        '30%': light-change($color, -30%, $is-dark),
+        '33%': light-change($color, -33%, $is-dark),
+        '36%': light-change($color, -36%, $is-dark),
+        '39%': light-change($color, -39%, $is-dark)
+    );
+
+    @if $with-base {
+        $set: map.merge((base: $color), $set);
+    }
+
+    @return $set;  
+}
+
+@function color-variants-dark($color, $is-dark, $with-base: false) {
+    $set: (
+        '3%':  light-change($color, 3%, $is-dark),
+        '6%':  light-change($color, 6%, $is-dark),
+        '9%':  light-change($color, 9%, $is-dark),
+        '12%': light-change($color, 12%, $is-dark),
+        '15%': light-change($color, 15%, $is-dark),
+        '18%': light-change($color, 18%, $is-dark),
+        '21%': light-change($color, 21%, $is-dark),
+        '24%': light-change($color, 24%, $is-dark),
+        '27%': light-change($color, 27%, $is-dark),
+        '30%': light-change($color, 30%, $is-dark),
+        '33%': light-change($color, 33%, $is-dark),
+        '36%': light-change($color, 36%, $is-dark),
+        '39%': light-change($color, 39%, $is-dark),
+    );
+
+    @if $with-base {
+        $set: map.merge((base: $color), $set);
+    }
+
+    @return $set;    
+}
+
+@function variants($color, $is-dark, $light: true, $dark: true, $base: true, $override-base-with: null) {
+    $set: ();
+
+    // base: $color,
+    // light: color-variants-light($color, $is-dark),
+    // dark: color-variants-dark($color, $is-dark),
+
+    @if $light {
+        $set: map.merge($set, (light: color-variants-light($color, $is-dark)));
+    }
+
+    @if $dark {
+        $set: map.merge($set, (dark: color-variants-dark($color, $is-dark)));
+    }
+
+    @if $base {
+        @if $override-base-with {
+            $set: map.merge($set, (base: $override-base-with));
+        } @else {
+            $set: map.merge($set, (base: $color));
+        }
+    }
+
+    @return $set;
+}