Create the Atom theme.
This commit is contained in:
parent
d2c1094810
commit
7efa0e9bab
GPG Key ID:
C1C0F29952BCF558
|
|
@ -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
|
||||
|
|
|
|||
12
package.json
12
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": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
# Love
|
||||
|
||||
> A color scheme for you to love. ♡ https://love.holllo.cc
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
Open-sourced with [the MIT License](https://gitlab.com/holllo/love/-/blob/master/License).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.badge {
|
||||
color: @foreground-1;
|
||||
|
||||
&.badge-info,
|
||||
&.badge-success,
|
||||
&.badge-warning,
|
||||
&.badge-error {
|
||||
color: @background-1;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.find-and-replace {
|
||||
border-top: 1px solid @base-border-color;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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==
|
||||
|
|
|
|||
Loading…
Reference in New Issue