@@ -111,7 +111,6 @@ public/ | |||
*.vsix | |||
# Generated theme outputs. | |||
source/atom/love-* | |||
source/kitty/love-dark.conf | |||
source/kitty/love-light.conf | |||
source/kitty/love-kitty.zip | |||
@@ -8,15 +8,6 @@ To update the version of a theme, use `yarn versioning`. | |||
The following sections assume you have previously published a version, but are starting from a completely fresh repository. | |||
### Atom | |||
Requires the [Atom Package Manager](https://github.com/atom/apm) to be installed. | |||
1. Clone all the `love-...` repositories from [the GitHub organization](https://github.com/Holllo) into `source/atom/`. The directories created will be gitignored in the current repository. | |||
2. Build the Atom theme by running `yarn build` (or `yarn build:atom`). | |||
3. Change into each directory (`cd source/atom/love-...`) and review the changes. | |||
4. When satisfied, use `apm publish major|minor|patch` to publish to the Atom Package Registry and the GitHub repositories. | |||
### Visual Studio Code | |||
1. Run `yarn build` (or `yarn build:vscode`). | |||
@@ -1,5 +1,4 @@ | |||
{ | |||
"atom": "0.1.3", | |||
"firefox": "0.1.1", | |||
"kitty": "0.1.1", | |||
"sublime-text": "0.1.1", | |||
@@ -7,15 +7,13 @@ | |||
"repository": "https://git.holllo.cc/Holllo/love", | |||
"license": "MIT", | |||
"scripts": { | |||
"build": "yarn build:atom && yarn build:images && yarn build:kitty && yarn build:pages && yarn build:sublime-text && yarn build:tauon && yarn build:vscode && yarn copy-themes", | |||
"build:atom": "ts-node 'source/scripts/atom.ts'", | |||
"build": "yarn build:images && yarn build:kitty && yarn build:pages && yarn build:sublime-text && yarn build:tauon && yarn build:vscode && yarn copy-themes", | |||
"build:images": "cpy 'source/pages/images/**' 'public/images/'", | |||
"build:pages": "ts-node 'source/scripts/pages.ts'", | |||
"build:kitty": "ts-node 'source/scripts/kitty.ts'", | |||
"build:sublime-text": "ts-node 'source/scripts/sublime-text.ts'", | |||
"build:tauon": "ts-node 'source/scripts/tauon.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'", | |||
"copy-themes": "cp 'source/kitty/love-kitty.zip' 'public/' && cp 'source/sublime-text/Love.sublime-package' 'public/' && cp 'source/tauon/love-tauon.zip' 'public/'", | |||
"versioning": "ts-node 'source/scripts/version.ts'", | |||
@@ -64,7 +62,6 @@ | |||
"stylelint-config-xo-space" | |||
], | |||
"ignoreFiles": [ | |||
"source/atom/**/*.less", | |||
"source/**/*.ts", | |||
"public/css/**" | |||
], | |||
@@ -1,14 +0,0 @@ | |||
# Love | |||
> A color scheme for you to love. ♡ https://love.holllo.cc | |||
## Preview | |||
 | |||
 | |||
 | |||
 | |||
## License | |||
Open-sourced with the [MIT license](https://git.holllo.cc/Holllo/love/src/branch/main/LICENSE). |
@@ -1,78 +0,0 @@ | |||
<section> | |||
<header class="is-light padded"> | |||
## Preview | |||
</header> | |||
</section> | |||
<section class="images-section"> | |||
<div class="is-dark"> | |||
 | |||
</div> | |||
<div class="is-light"> | |||
 | |||
</div> | |||
<div class="is-dark"> | |||
 | |||
</div> | |||
<div class="is-light"> | |||
 | |||
</div> | |||
</section> | |||
<div class="spacer"></div> | |||
<section> | |||
<header class="is-light padded"> | |||
## Installation | |||
</header> | |||
<div class="is-dark padded"> | |||
### Via Atom | |||
1. Head to your Settings by clicking on `Edit -> Preferences`. | |||
1. Head on the Install section. | |||
1. Switch the search to look for Themes. | |||
1. Search for `love-dark` or `love-light` and install the syntax and UI themes. | |||
1. Done! ♥ | |||
</div> | |||
<div class="is-light padded"> | |||
### Via the Command Line | |||
1. Install the wanted themes with `apm install`: | |||
* `apm install love-dark-syntax` | |||
* `apm install love-dark-ui` | |||
* `apm install love-light-syntax` | |||
* `apm install love-light-ui` | |||
1. Done! ♥ | |||
</div> | |||
<div class="is-dark padded"> | |||
### From Source | |||
Requires [NodeJS](https://nodejs.org) and [Yarn](https://yarnpkg.com) to be installed. | |||
With a cloned repository and your current working directory at the root of it: | |||
1. Install the dependencies with `yarn`. | |||
1. Build the theme with `yarn build:atom`. | |||
1. Link the wanted themes with `apm link`: | |||
* `apm link source/atom/love-dark-syntax` | |||
* `apm link source/atom/love-dark-ui` | |||
* `apm link source/atom/love-light-syntax` | |||
* `apm link source/atom/love-light-ui` | |||
1. Done! ♥ | |||
</div> | |||
</section> |
@@ -1,18 +0,0 @@ | |||
{ | |||
"name": "love", | |||
"description": "A color scheme for you to love. ♡", | |||
"version": "0.1.3", | |||
"author": "Holllo <helllo@holllo.cc>", | |||
"homepage": "https://love.holllo.cc", | |||
"repository": "https://git.holllo.cc/Holllo/love", | |||
"license": "MIT", | |||
"theme": "", | |||
"engines": { | |||
"atom": ">=1.0.0 <2.0.0" | |||
}, | |||
"keywords": [ | |||
"color scheme", | |||
"love", | |||
"theme" | |||
] | |||
} |
@@ -1,215 +0,0 @@ | |||
/* @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; | |||
} | |||
} |
@@ -1,10 +0,0 @@ | |||
.badge { | |||
color: @foreground-1; | |||
&.badge-info, | |||
&.badge-success, | |||
&.badge-warning, | |||
&.badge-error { | |||
color: @background-1; | |||
} | |||
} |
@@ -1,39 +0,0 @@ | |||
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; | |||
} |
@@ -1,77 +0,0 @@ | |||
.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; | |||
} |
@@ -1,17 +0,0 @@ | |||
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; | |||
} | |||
} |
@@ -1,3 +0,0 @@ | |||
.find-and-replace { | |||
border-top: 1px solid @base-border-color; | |||
} |
@@ -1,23 +0,0 @@ | |||
.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; | |||
} |
@@ -1,18 +0,0 @@ | |||
.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; | |||
} |
@@ -1,11 +0,0 @@ | |||
.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; | |||
} |
@@ -1,66 +0,0 @@ | |||
.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; | |||
} | |||
} | |||
} |
@@ -1,37 +0,0 @@ | |||
.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; | |||
} | |||
} | |||
} |
@@ -1,28 +0,0 @@ | |||
.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; | |||
} | |||
} |
@@ -1,19 +0,0 @@ | |||
.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; | |||
} |
@@ -1,6 +0,0 @@ | |||
.status-bar { | |||
color: @text-color; | |||
background-color: @tree-view-background-color; | |||
border-top: 1px solid @base-border-color; | |||
font-size: @font-size; | |||
} |
@@ -1,55 +0,0 @@ | |||
.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; | |||
} | |||
} | |||
} | |||
} |
@@ -1,59 +0,0 @@ | |||
.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; | |||
} |
@@ -1,17 +0,0 @@ | |||
.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; | |||
} | |||
} |
@@ -1,12 +0,0 @@ | |||
.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; | |||
} | |||
} |
@@ -156,9 +156,6 @@ | |||
Software | |||
</h3> | |||
<ul> | |||
<li> | |||
<a href="/get/atom">Atom</a> | |||
</li> | |||
<li> | |||
<a href="/get/firefox">Firefox</a> | |||
</li> | |||
@@ -1,227 +0,0 @@ | |||
import {promises as fsp} from 'fs'; | |||
import {join} from 'path'; | |||
import cpy from 'cpy'; | |||
import {generateLove, LoveVariant} from './love'; | |||
export async function main(): 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:Holllo/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:Holllo/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 LICENSE, README and images. | |||
await fsp.copyFile( | |||
join(__dirname, '../../LICENSE'), | |||
join(syntaxDirectory, 'LICENSE') | |||
); | |||
await fsp.copyFile( | |||
join(__dirname, '../../LICENSE'), | |||
join(uiDirectory, 'LICENSE') | |||
); | |||
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) { | |||
void main(); | |||
} |
@@ -5,7 +5,6 @@ import semver from 'semver'; | |||
export interface Versions { | |||
[index: string]: string; | |||
atom: string; | |||
firefox: string; | |||
kitty: string; | |||
'sublime-text': string; | |||
@@ -91,7 +90,7 @@ export async function main(): Promise<void> { | |||
JSON.stringify(versions, null, 2) + '\n' | |||
); | |||
if (['atom', 'vscode'].includes(selectedTheme)) { | |||
if (['vscode'].includes(selectedTheme)) { | |||
const packageLocation: string = join( | |||
__dirname, | |||
`../${selectedTheme}/package.json` | |||