Create the Atom theme.

.gitignore

@@ -109,3 +109,8 @@ public/
 
 # Packaged VSCode extensions.
 *.vsix
+
+# Generated theme outputs.
+source/atom/love-*
+source/vscode/themes/love-dark.color-theme.json
+source/vscode/themes/love-light.color-theme.json

package.json

@@ -6,9 +6,12 @@
   "homepage": "https://love.holllo.cc",
   "repository": "https://gitlab.com/holllo/love",
   "scripts": {
-    "build": "yarn ts-node source/scripts/pages.ts && yarn build:images && yarn build:vscode",
+    "build": "yarn build:atom && yarn build:images && yarn build:pages && yarn build:vscode",
+    "build:atom": "ts-node 'source/scripts/atom.ts'",
     "build:images": "cpy 'source/pages/images/**' 'public/images/'",
-    "build:vscode": "yarn ts-node source/scripts/vscode.ts",
+    "build:pages": "ts-node 'source/scripts/pages.ts'",
+    "build:vscode": "ts-node 'source/scripts/vscode.ts'",
+    "watch:atom": "chokidar 'source/atom/*.less' 'source/atom/ui-template/*.less' -c 'yarn build:atom'",
     "watch:vscode": "chokidar 'source/vscode/themes/love-template.color-theme.json' -c 'yarn build:vscode'",
     "test": "xo && stylelint 'source/pages/scss/**'"
   },
@@ -20,6 +23,7 @@
     "@types/sass": "^1.16.0",
     "@types/tar": "^4.0.3",
     "chokidar-cli": "^2.1.0",
+    "cpy": "^8.1.0",
     "cpy-cli": "^3.1.0",
     "hsluv": "^0.1.0",
     "hsluv-sass": "^1.0.0",
@@ -41,12 +45,14 @@
       "stylelint-config-xo-space"
     ],
     "ignoreFiles": [
+      "source/atom/**/*.less",
       "public/css/**"
     ],
     "rules": {
       "at-rule-empty-line-before": null,
       "at-rule-no-unknown": null,
-      "no-descending-specificity": null
+      "no-descending-specificity": null,
+      "selector-type-no-unknown": null
     }
   },
   "xo": {

source/atom/ReadMe.md

@@ -0,0 +1,14 @@
+# Love
+
+> A color scheme for you to love. ♡ https://love.holllo.cc
+
+## Preview
+
+![Love Dark Preview Image 1](images/love-dark-01.png)
+![Love Light Preview Image 1](images/love-light-01.png)
+![Love Dark Preview Image 2](images/love-dark-02.png)
+![Love Light Preview Image 2](images/love-light-02.png)
+
+## License
+
+Open-sourced with [the MIT License](https://gitlab.com/holllo/love/-/blob/master/License).

source/atom/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "love",
+  "description": "A color scheme for you to love. ♡",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Holllo <helllo@holllo.cc>",
+  "homepage": "https://love.holllo.cc",
+  "repository": "https://gitlab.com/holllo/love",
+  "theme": "",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  },
+  "keywords": [
+    "color scheme",
+    "love",
+    "theme"
+  ]
+}

source/atom/syntax-template.less

@@ -0,0 +1,215 @@
+/* @variables-insert */
+
+@import "styles/syntax-variables.less";
+
+atom-text-editor {
+  background-color: @syntax-background-color;
+  color: @syntax-text-color;
+
+  .wrap-guide {
+    background-color: @syntax-wrap-guide-color;
+  }
+
+  .indent-guide {
+    color: @syntax-indent-guide-color;
+  }
+
+  .invisible-character {
+    color: @syntax-invisible-character-color;
+  }
+
+  .gutter {
+    background-color: @syntax-gutter-background-color;
+    color: @syntax-gutter-text-color;
+
+    .line-number {
+      &.cursor-line {
+        background-color: @foreground-1;
+        color: @background-1;
+      }
+
+      &.cursor-line-no-selection {
+        color: @background-1;
+      }
+    }
+  }
+
+  .gutter .line-number.folded,
+  .gutter .line-number::after,
+  .fold-marker::after {
+    color: @foreground-2;
+  }
+
+  .invisible {
+    color: @syntax-text-color;
+  }
+
+  .cursor {
+    color: @syntax-cursor-color;
+  }
+
+  .selection .region {
+    background-color: @syntax-selection-color;
+  }
+}
+
+// Syntax styles
+
+.syntax--comment {
+  color: fade(@foreground-1, 40%);
+}
+
+.syntax--keyword {
+  color: @accent-10;
+
+  &.syntax--control {
+    color: @accent-5;
+  }
+
+  &.syntax--operator {
+    color: @accent-9;
+  }
+
+  &.syntax--other.syntax--unit {
+    color: @accent-3;
+  }
+}
+
+.syntax--storage {
+  color: @accent-10;
+}
+
+.syntax--constant {
+  color: @accent-3;
+
+  &.syntax--character.syntax--escape {
+    color: @accent-5;
+  }
+
+  &.syntax--numeric {
+    color: @accent-3;
+  }
+}
+
+.syntax--variable {
+  color: @foreground-1;
+
+  &.syntax--interpolation {
+    color: @accent-5;
+  }
+
+  &.syntax--parameter.syntax--function {
+    color: @accent-2;
+  }
+}
+
+.syntax--invalid.syntax--illegal {
+  background-color: @accent-1;
+  color: @background-1;
+}
+
+.syntax--string {
+  color: @accent-4;
+}
+
+.syntax--punctuation {
+  &.syntax--definition {
+    &.syntax--comment {
+      color: fade(@foreground-1, 40%);
+    }
+
+    &.syntax--string,
+    &.syntax--variable,
+    &.syntax--parameters,
+    &.syntax--array {
+      color: @foreground-1;
+    }
+  }
+}
+
+.syntax--support {
+  &.syntax--function {
+    color: @foreground-1;
+  }
+}
+
+.syntax--entity {
+  &.syntax--name.syntax--function {
+    color: @accent-6;
+  }
+
+  &.syntax--name.syntax--tag {
+    color: @accent-2;
+    text-decoration: underline;
+  }
+
+  &.syntax--other.syntax--attribute-name {
+    color: @accent-9;
+  }
+}
+
+.syntax--meta {
+  &.syntax--class {
+    color: @foreground-1;
+  }
+
+  &.syntax--link {
+    color: @foreground-1;
+  }
+
+  &.syntax--require {
+    color: @foreground-1;
+  }
+}
+
+.syntax--none {
+  color: @foreground-1;
+}
+
+.syntax--markup {
+  &.syntax--bold {
+    color: @accent-2;
+    font-weight: bold;
+  }
+
+  &.syntax--changed {
+    color: @accent-7;
+  }
+
+  &.syntax--deleted {
+    color: @accent-1;
+  }
+
+  &.syntax--italic {
+    color: @accent-2;
+    font-style: italic;
+  }
+
+  &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
+    color: @accent-7;
+  }
+
+  &.syntax--inserted {
+    color: @accent-5;
+  }
+
+  &.syntax--list {
+    color: @accent-1;
+  }
+
+  &.syntax--quote {
+    color: @accent-2;
+  }
+
+  &.syntax--raw.syntax--inline {
+    color: @accent-5;
+  }
+}
+
+.syntax--source.syntax--gfm .syntax--markup {
+  -webkit-font-smoothing: auto;
+
+  &.syntax--heading {
+    color: @accent-5;
+  }
+}

source/atom/ui-template/badges.less

@@ -0,0 +1,10 @@
+.badge {
+  color: @foreground-1;
+
+  &.badge-info,
+  &.badge-success,
+  &.badge-warning,
+  &.badge-error {
+    color: @background-1;
+  }
+}

source/atom/ui-template/base.less

@@ -0,0 +1,39 @@
+body {
+  background-color: @background-1;
+  color: @foreground-1;
+  font-size: 14px;
+}
+
+atom-pane {
+  border-right: 1px solid @foreground-1;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.atom-dock-resize-handle.left,
+.atom-dock-resize-handle.right {
+  background-color: @foreground-1;
+  width: 1px;
+}
+
+.styleguide .example .example-rendered,
+.styleguide .example .example-code {
+  border-radius: 0;
+}
+
+
+pre,
+code {
+  background-color: @background-2;
+  border-radius: 0;
+  padding: @component-padding / 2;
+}
+
+kbd {
+  background-color: @background-2 !important;
+  border: 1px solid @foreground-1 !important;
+  box-shadow: none !important;
+  padding: @component-padding / 2 !important;
+}

source/atom/ui-template/buttons.less

@@ -0,0 +1,77 @@
+.btn {
+  background-color: @button-background-color;
+  color: @background-1;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: @button-background-color-hover;
+    color: @background-1;
+  }
+
+  &:focus,
+  &:focus:active {
+    outline: none;
+  }
+
+  &.selected {
+    background-color: @button-background-color-selected;
+    color: @background-1;
+
+    &:hover {
+      color: @background-1;
+    }
+  }
+}
+
+.btn.btn-primary {
+  .btn-color(@background-color-info);
+}
+
+.btn.btn-info {
+  .btn-color(@background-color-info);
+}
+
+.btn.btn-success {
+  .btn-color(@background-color-success);
+}
+
+.btn.btn-warning {
+  .btn-color(@background-color-warning);
+}
+
+.btn.btn-error {
+  .btn-color(@background-color-error);
+}
+
+.btn-color(@bg) {
+  background-color: @bg;
+  color: @background-1;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: lighten(@bg, 4%);
+    color: @background-1;
+  }
+
+  &.selected {
+    background-color: lighten(@bg, 4%);
+    color: @background-1;
+
+    &:focus,
+    &:hover,
+    &:active {
+      background-color: lighten(@bg, 8%);
+      color: @background-1;
+    }
+  }
+}
+
+.btn-group > .btn {
+  border-color: @background-1;
+}
+
+.settings-view .config-menu .button-area > .btn {
+  padding: 0;
+}

source/atom/ui-template/editor.less

@@ -0,0 +1,17 @@
+atom-text-editor[mini] {
+  background-color: @input-background-color;
+  border-radius: @component-border-radius;
+  color: @text-color;
+  padding-left: @component-padding / 2;
+
+  &.is-focused {
+    background-color: darken(@input-background-color, 5%);
+  }
+
+  .placeholder-text {
+    color: @text-color-subtle;
+  }
+  .selection .region {
+    background-color: @background-color-selected;
+  }
+}

source/atom/ui-template/find-and-replace.less

@@ -0,0 +1,3 @@
+.find-and-replace {
+  border-top: 1px solid @base-border-color;
+}

source/atom/ui-template/git.less

@@ -0,0 +1,23 @@
+.status {
+  color: @text-color;
+}
+
+.status-added {
+  color: @text-color-success;
+}
+
+.status-ignored {
+  color: @text-color-subtle;
+}
+
+.status-modified {
+  color: @text-color-warning;
+}
+
+.status-removed {
+  color: @text-color-error;
+}
+
+.status-renamed {
+  color: @text-color-info;
+}

source/atom/ui-template/inputs.less

@@ -0,0 +1,18 @@
+.input-select {
+  color: @background-1;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.settings-view select.form-control {
+  border: none;
+  border-radius: 0;
+  color: @background-1;
+  cursor: pointer;
+}
+
+.settings-view .themes-picker-item .btn {
+  height: 32px;
+}

source/atom/ui-template/key-binding.less

@@ -0,0 +1,11 @@
+.key-binding {
+  background-color: @app-background-color;
+  border-radius: @component-border-radius;
+  display: inline-block;
+  font-family: system-ui;
+  font-size: 0.8em;
+  letter-spacing: 1px;
+  line-height: 2;
+  margin-left: 1px;
+  padding: 0 @component-padding / 2;
+}

source/atom/ui-template/lists.less

@@ -0,0 +1,66 @@
+.list-group {
+  li {
+    padding-left: @component-padding / 2;
+
+    &.selected {
+      background-color: @background-2;
+      color: @text-color-selected;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
+}
+
+.list-item {
+  &:hover {
+    background-color: @background-2;
+    color: @foreground-1;
+    cursor: pointer;
+  }
+
+  &.selected {
+    background-color: @background-2;
+
+    &::before {
+      content: unset;
+    }
+  }
+}
+
+.list-tree {
+  color: @text-color;
+
+  .selected {
+    background-color: @background-2;
+    color: @foreground-1;
+  }
+}
+
+.select-list {
+  li {
+    padding: @component-padding / 2 @component-padding;
+  }
+
+  .status {
+    float: right;
+  }
+}
+
+.select-list.popover-list {
+  @popover-list-padding: @component-padding / 2;
+
+  background-color: @overlay-background-color;
+  border-radius: @component-border-radius;
+  box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
+  padding: @popover-list-padding;
+
+  .list-group {
+    margin-top: @popover-list-padding;
+
+    li {
+      padding-left: @popover-list-padding;
+    }
+  }
+}

source/atom/ui-template/panels.less

@@ -0,0 +1,37 @@
+.panel-heading {
+  background-color: @panel-heading-background-color;
+  border-bottom: 1px solid @panel-heading-border-color;
+}
+
+.inset-panel {
+  background-color: @inset-panel-background-color;
+
+  .panel-heading {
+    background-color: lighten(@inset-panel-background-color, 4%);
+  }
+}
+
+atom-panel.modal {
+  border: 1px solid @overlay-border-color;
+}
+
+.settings-view .config-menu .nav > li {
+  &.active {
+    > a {
+      background-color: @foreground-1;
+      color: @background-1;
+
+      &:hover {
+        background-color: @foreground-1;
+        color: @background-1;
+      }
+    }
+  }
+
+  > a {
+    &:hover {
+      background-color: @accent-7;
+      color: @background-1;
+    }
+  }
+}

source/atom/ui-template/progress.less

@@ -0,0 +1,28 @@
+.loading-spinner-large {
+  .loading-spinner(64px);
+}
+
+.loading-spinner-medium {
+  .loading-spinner(48px);
+}
+
+.loading-spinner-small {
+  .loading-spinner(32px);
+}
+
+.loading-spinner-tiny {
+  .loading-spinner(16px);
+}
+
+.loading-spinner(@size) {
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: @size @size;
+  display: block;
+  height: @size;
+  width: @size;
+
+  &.inline-block {
+    display: inline-block;
+  }
+}

source/atom/ui-template/sites.less

@@ -0,0 +1,19 @@
+.ui-site-1 {
+  background-color: @ui-site-color-1;
+}
+
+.ui-site-2 {
+  background-color: @ui-site-color-2;
+}
+
+.ui-site-3 {
+  background-color: @ui-site-color-3;
+}
+
+.ui-site-4 {
+  background-color: @ui-site-color-4;
+}
+
+.ui-site-5 {
+  background-color: @ui-site-color-5;
+}

source/atom/ui-template/status-bar.less

@@ -0,0 +1,6 @@
+.status-bar {
+  color: @text-color;
+  background-color: @tree-view-background-color;
+  border-top: 1px solid @base-border-color;
+  font-size: @font-size;
+}

source/atom/ui-template/tabs.less

@@ -0,0 +1,55 @@
+.tab-bar {
+  background-color: @tab-bar-background-color;
+
+  .tab {
+    background-color: @background-2;
+    color: @text-color;
+    font-size: @font-size;
+    height: @tab-height;
+    line-height: @tab-height;
+    margin-right: 1px;
+
+    &:hover {
+      background-color: @background-1;
+      border-bottom: 1px solid @accent-5;
+      color: @accent-5;
+      cursor: pointer;
+    }
+
+    &.active {
+      background-color: @background-1;
+      border-bottom: 1px solid @accent-7;
+      color: @accent-7;
+    }
+
+    &.modified:not(:hover) .close-icon {
+      top: 50%;
+      right: @component-padding + 4px;
+      margin-top: -3px;
+      border-color: @text-color-info;
+    }
+
+    &.modified:hover .close-icon {
+      color: currentColor;
+    }
+
+    .close-icon:hover {
+      color: @text-color-selected;
+      cursor: pointer;
+    }
+
+    &.active .close-icon:hover {
+      color: @text-color;
+    }
+
+    &.is-dragging {
+      background: darken(@tab-background-color, 10%);
+      border-color: transparent;
+      opacity: .5;
+
+      & .close-icon {
+        visibility: hidden;
+      }
+    }
+  }
+}

source/atom/ui-template/text.less

@@ -0,0 +1,59 @@
+.text-smaller {
+  font-size: smaller;
+}
+
+.text-subtle {
+  color: @text-color-subtle;
+}
+
+.text-highlight {
+  color: @text-color-highlight;
+}
+
+.text-info {
+  color: @text-color-info;
+}
+
+.text-success {
+  color: @text-color-success;
+}
+
+.text-warning {
+  color: @text-color-warning;
+}
+
+.text-error {
+  color: @text-color-error;
+}
+
+.highlight {
+  .highlight-mixin(@background-color-highlight);
+}
+
+.highlight-info {
+  .highlight-mixin(@background-color-info);
+}
+
+.highlight-warning {
+  .highlight-mixin(@background-color-warning);
+}
+
+.highlight-error {
+  .highlight-mixin(@background-color-error);
+}
+
+.highlight-success {
+  .highlight-mixin(@background-color-success);
+}
+
+.highlight-mixin(@color) {
+  background-color: @color;
+  border-radius: @component-border-radius;
+  color: @text-color-highlight;
+  padding: 1px 4px;
+}
+
+.background-message {
+  color: @text-color-subtle;
+  font-weight: bold;
+}

source/atom/ui-template/tooltips.less

@@ -0,0 +1,17 @@
+.tooltip {
+  .tooltip-inner {
+    background-color: @accent-7;
+    color: @background-1;
+    line-height: 1;
+    max-width: none;
+    padding: .75em;
+    white-space: nowrap;
+  }
+
+  .keystroke {
+    background: @background-2;
+    color: @foreground-1;
+    margin: 0 -.3em 0 .25em;
+    padding: .15em .4em;
+  }
+}

source/atom/ui-template/tree-view.less

@@ -0,0 +1,12 @@
+.tree-view-resizer {
+  border-right: 1px solid @base-border-color;
+}
+
+.tree-view {
+  background-color: @tree-view-background-color;
+  color: @text-color;
+
+  .list-item.selected {
+    color: @text-color-selected;
+  }
+}

source/scripts/atom.ts

@@ -0,0 +1,218 @@
+import {promises as fsp} from 'fs';
+import {join} from 'path';
+import cpy from 'cpy';
+import {generateLove, LoveVariant} from './love';
+
+export async function entry(): Promise<void> {
+  const atomDirectory: string = join(__dirname, '../atom/');
+
+  const packageTemplate: any = JSON.parse(
+    await fsp.readFile(join(atomDirectory, 'package.json'), 'utf8')
+  );
+  const syntaxTemplate: string = await fsp.readFile(
+    join(atomDirectory, 'syntax-template.less'),
+    'utf8'
+  );
+
+  const love: LoveVariant[] = generateLove();
+  for (const variant of love) {
+    // Add the `@variable` colors to the top of the template.
+    const lessVariables = `
+@foreground-1: ${variant.colors.foreground1};
+@foreground-2: ${variant.colors.foreground2};
+@background-1: ${variant.colors.background1};
+@background-2: ${variant.colors.background2};
+${variant.colors.accents
+  .map((value, index) => `@accent-${index + 1}: ${value};`)
+  .join('\n')}
+${variant.colors.grays
+  .map((value, index) => `@gray-${index + 1}: ${value};`)
+  .join('\n')}`.trim();
+
+    let syntaxTheme: string = syntaxTemplate;
+    syntaxTheme = syntaxTheme.replace(
+      /\/\* @variables-insert \*\//,
+      lessVariables
+    );
+
+    const uiFiles: string[] = await fsp.readdir(
+      join(atomDirectory, 'ui-template')
+    );
+    const uiTheme =
+      '@import "styles/ui-variables";\n' +
+      uiFiles.map(value => `@import "styles/${value}";`).join('\n');
+
+    const syntaxDirectory: string = join(
+      atomDirectory,
+      `love-${variant.name}-syntax`
+    );
+    const uiDirectory: string = join(atomDirectory, `love-${variant.name}-ui`);
+
+    // Create all the necessary directories we'll be writing to.
+    await fsp.mkdir(join(syntaxDirectory, 'styles/'), {recursive: true});
+    await fsp.mkdir(join(uiDirectory, 'styles/'), {recursive: true});
+    await fsp.mkdir(join(syntaxDirectory, 'images/'), {recursive: true});
+    await fsp.mkdir(join(uiDirectory, 'images/'), {recursive: true});
+
+    // Write formatted templates to each directory.
+    await fsp.writeFile(join(syntaxDirectory, 'index.less'), syntaxTheme);
+    await fsp.writeFile(join(uiDirectory, 'index.less'), uiTheme);
+
+    // Write all the UI template files with the Less variables.
+    for (const uiFile of uiFiles) {
+      const uiCSS = `${lessVariables}\n${await fsp.readFile(
+        join(atomDirectory, 'ui-template', uiFile),
+        'utf8'
+      )}`;
+      await fsp.writeFile(join(uiDirectory, 'styles', uiFile), uiCSS);
+    }
+
+    // Format the `package.json` and write them to the appropriate directories.
+    const syntaxPackage: any = {...packageTemplate};
+    syntaxPackage.name = `love-${variant.name}-syntax`;
+    syntaxPackage.theme = 'syntax';
+    syntaxPackage.keywords = syntaxPackage.keywords.concat(
+      'syntax',
+      variant.name
+    );
+    syntaxPackage.repository = `git@github.com:HollloCC/love-${variant.name}-syntax.git`;
+
+    const uiPackage: any = {...packageTemplate};
+    uiPackage.name = `love-${variant.name}-ui`;
+    uiPackage.theme = 'ui';
+    uiPackage.keywords = uiPackage.keywords.concat('ui', variant.name);
+    uiPackage.repository = `git@github.com:HollloCC/love-${variant.name}-ui.git`;
+
+    await fsp.writeFile(
+      join(syntaxDirectory, 'package.json'),
+      JSON.stringify(syntaxPackage, null, 2)
+    );
+    await fsp.writeFile(
+      join(uiDirectory, 'package.json'),
+      JSON.stringify(uiPackage, null, 2)
+    );
+
+    // Write the syntax and UI variables.
+    await fsp.writeFile(
+      join(syntaxDirectory, 'styles/syntax-variables.less'),
+      generateLessSyntaxVariables(variant)
+    );
+    await fsp.writeFile(
+      join(uiDirectory, 'styles/ui-variables.less'),
+      generateLessUIVariables(variant)
+    );
+
+    // Copy the ReadMe and images.
+    await fsp.copyFile(
+      join(atomDirectory, 'ReadMe.md'),
+      join(syntaxDirectory, 'ReadMe.md')
+    );
+    await fsp.copyFile(
+      join(atomDirectory, 'ReadMe.md'),
+      join(uiDirectory, 'ReadMe.md')
+    );
+
+    await cpy(join(atomDirectory, 'images'), join(syntaxDirectory, 'images'));
+    await cpy(join(atomDirectory, 'images'), join(uiDirectory, 'images'));
+  }
+}
+
+export function generateLessSyntaxVariables(love: LoveVariant): string {
+  return `
+@syntax-text-color: ${love.colors.foreground1};
+@syntax-cursor-color: ${love.colors.foreground1};
+@syntax-selection-color: fade(${love.colors.foreground1}, 20%);
+@syntax-selection-flash-color: ${love.colors.accents[6]};
+@syntax-background-color: ${love.colors.background1};
+@syntax-wrap-guide-color: ${love.colors.background2};
+@syntax-indent-guide-color: ${love.colors.grays[1]};
+@syntax-invisible-character-color: ${love.colors.grays[1]};
+@syntax-result-marker-color: ${love.colors.foreground2};
+@syntax-result-marker-color-selected: ${love.colors.foreground1};
+@syntax-gutter-text-color: ${love.colors.foreground1};
+@syntax-gutter-text-color-selected: ${love.colors.foreground1};
+@syntax-gutter-background-color: ${love.colors.background2};
+@syntax-gutter-background-color-selected: ${love.colors.grays[1]};
+@syntax-color-added: ${love.colors.accents[4]};
+@syntax-color-modified: ${love.colors.accents[1]};
+@syntax-color-removed: ${love.colors.accents[0]};
+@syntax-color-renamed: ${love.colors.accents[6]};
+@syntax-color-variable: ${love.colors.accents[0]};
+@syntax-color-constant: ${love.colors.accents[0]};
+@syntax-color-property: ${love.colors.accents[0]};
+@syntax-color-value: ${love.colors.accents[1]};
+@syntax-color-function: ${love.colors.accents[6]};
+@syntax-color-method: ${love.colors.accents[6]};
+@syntax-color-class: ${love.colors.accents[2]};
+@syntax-color-keyword: ${love.colors.accents[9]};
+@syntax-color-tag: ${love.colors.accents[0]};
+@syntax-color-attribute: ${love.colors.accents[1]};
+@syntax-color-import: ${love.colors.accents[4]};
+@syntax-color-snippet: ${love.colors.accents[4]};
+`.trim();
+}
+
+export function generateLessUIVariables(love: LoveVariant): string {
+  return `
+@text-color: ${love.colors.foreground1};
+@text-color-subtle: ${love.colors.foreground2};
+@text-color-highlight: ${love.colors.foreground1};
+@text-color-selected: @text-color-highlight;
+@text-color-info: ${love.colors.accents[6]};
+@text-color-success: ${love.colors.accents[4]};
+@text-color-warning: ${love.colors.accents[1]};
+@text-color-error: ${love.colors.accents[0]};
+@background-color-info: ${love.colors.accents[6]};
+@background-color-success: ${love.colors.accents[4]};
+@background-color-warning: ${love.colors.accents[1]};
+@background-color-error: ${love.colors.accents[0]};
+@background-color-highlight: fade(${love.colors.foreground1}, 20%);
+@background-color-selected: @background-color-highlight;
+@app-background-color: ${love.colors.background1};
+@base-background-color: ${love.colors.background1};
+@base-border-color: ${love.colors.foreground1};
+@pane-item-background-color: ${love.colors.background1};
+@pane-item-border-color: @base-border-color;
+@input-background-color: ${love.colors.background2};
+@input-border-color: @base-border-color;
+@tool-panel-background-color: ${love.colors.background1};
+@tool-panel-border-color: @base-border-color;
+@inset-panel-background-color: ${love.colors.background2};
+@inset-panel-border-color: @base-border-color;
+@panel-heading-background-color: ${love.colors.background2};
+@panel-heading-border-color: transparent;
+@overlay-background-color: ${love.colors.background2};
+@overlay-border-color: @base-border-color;
+@button-background-color: ${love.colors.accents[6]};
+@button-background-color-hover: ${love.colors.accents[4]};
+@button-background-color-selected: ${love.colors.accents[9]};
+@button-border-color: ${love.colors.accents[6]};
+@tab-bar-background-color: ${love.colors.background2};
+@tab-bar-border-color: ${love.colors.background2};
+@tab-background-color: @tool-panel-background-color;
+@tab-background-color-active: ${love.colors.background1};
+@tab-border-color: @base-border-color;
+@tree-view-background-color: @tool-panel-background-color;
+@tree-view-border-color: @tool-panel-border-color;
+@ui-site-color-1: ${love.colors.accents[4]};
+@ui-site-color-2: ${love.colors.accents[6]};
+@ui-site-color-3: ${love.colors.accents[1]};
+@ui-site-color-4: ${love.colors.accents[9]};
+@ui-site-color-5: ${love.colors.accents[2]};
+@font-size: 13px;
+@input-font-size: 14px;
+@disclosure-arrow-size: 12px;
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+@component-border-radius: 0;
+@tab-height: 40px;
+@font-family: system-ui;
+@use-custom-controls: true; // false uses native controls
+`.trim();
+}
+
+if (require.main === module) {
+  entry();
+}

yarn.lock

@@ -1084,7 +1084,7 @@ cpy-cli@^3.1.0:
     cpy "^8.0.0"
     meow "^5.0.0"
 
-cpy@^8.0.0:
+cpy@^8.0.0, cpy@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/cpy/-/cpy-8.1.0.tgz#e8ac07f3caeb0113bd55326e5cda052c19fa6c60"
   integrity sha512-XwlImkjPxMr01qXqC564VD4rfcDQ2eKtYmFlCy0ixsLRJ1cwYVUBh+v47jsQTO1IrmvdjqO813VpDQ0JiTuOdA==