A color scheme for you to love. ♡ https://love.holllo.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

228 lines
8.6 KiB

  1. import {promises as fsp} from 'fs';
  2. import {join} from 'path';
  3. import cpy from 'cpy';
  4. import {generateLove, LoveVariant} from './love';
  5. export async function main(): Promise<void> {
  6. const atomDirectory: string = join(__dirname, '../atom/');
  7. const packageTemplate: any = JSON.parse(
  8. await fsp.readFile(join(atomDirectory, 'package.json'), 'utf8')
  9. );
  10. const syntaxTemplate: string = await fsp.readFile(
  11. join(atomDirectory, 'syntax-template.less'),
  12. 'utf8'
  13. );
  14. const love: LoveVariant[] = generateLove();
  15. for (const variant of love) {
  16. // Add the `@variable` colors to the top of the template.
  17. const lessVariables = `
  18. @foreground-1: ${variant.colors.foreground1};
  19. @foreground-2: ${variant.colors.foreground2};
  20. @background-1: ${variant.colors.background1};
  21. @background-2: ${variant.colors.background2};
  22. ${variant.colors.accents
  23. .map((value, index) => `@accent-${index + 1}: ${value};`)
  24. .join('\n')}
  25. ${variant.colors.grays
  26. .map((value, index) => `@gray-${index + 1}: ${value};`)
  27. .join('\n')}`.trim();
  28. let syntaxTheme: string = syntaxTemplate;
  29. syntaxTheme = syntaxTheme.replace(
  30. /\/\* @variables-insert \*\//,
  31. lessVariables
  32. );
  33. const uiFiles: string[] = await fsp.readdir(
  34. join(atomDirectory, 'ui-template')
  35. );
  36. const uiTheme =
  37. '@import "styles/ui-variables";\n' +
  38. uiFiles.map((value) => `@import "styles/${value}";`).join('\n');
  39. const syntaxDirectory: string = join(
  40. atomDirectory,
  41. `love-${variant.name}-syntax`
  42. );
  43. const uiDirectory: string = join(atomDirectory, `love-${variant.name}-ui`);
  44. // Create all the necessary directories we'll be writing to.
  45. await fsp.mkdir(join(syntaxDirectory, 'styles/'), {recursive: true});
  46. await fsp.mkdir(join(uiDirectory, 'styles/'), {recursive: true});
  47. await fsp.mkdir(join(syntaxDirectory, 'images/'), {recursive: true});
  48. await fsp.mkdir(join(uiDirectory, 'images/'), {recursive: true});
  49. // Write formatted templates to each directory.
  50. await fsp.writeFile(join(syntaxDirectory, 'index.less'), syntaxTheme);
  51. await fsp.writeFile(join(uiDirectory, 'index.less'), uiTheme);
  52. // Write all the UI template files with the Less variables.
  53. for (const uiFile of uiFiles) {
  54. const uiCSS = `${lessVariables}\n${await fsp.readFile(
  55. join(atomDirectory, 'ui-template', uiFile),
  56. 'utf8'
  57. )}`;
  58. await fsp.writeFile(join(uiDirectory, 'styles', uiFile), uiCSS);
  59. }
  60. // Format the `package.json` and write them to the appropriate directories.
  61. const syntaxPackage: any = {...packageTemplate};
  62. syntaxPackage.name = `love-${variant.name}-syntax`;
  63. syntaxPackage.theme = 'syntax';
  64. syntaxPackage.keywords = syntaxPackage.keywords.concat(
  65. 'syntax',
  66. variant.name
  67. );
  68. syntaxPackage.repository = `git@github.com:Holllo/love-${variant.name}-syntax.git`;
  69. const uiPackage: any = {...packageTemplate};
  70. uiPackage.name = `love-${variant.name}-ui`;
  71. uiPackage.theme = 'ui';
  72. uiPackage.keywords = uiPackage.keywords.concat('ui', variant.name);
  73. uiPackage.repository = `git@github.com:Holllo/love-${variant.name}-ui.git`;
  74. await fsp.writeFile(
  75. join(syntaxDirectory, 'package.json'),
  76. JSON.stringify(syntaxPackage, null, 2)
  77. );
  78. await fsp.writeFile(
  79. join(uiDirectory, 'package.json'),
  80. JSON.stringify(uiPackage, null, 2)
  81. );
  82. // Write the syntax and UI variables.
  83. await fsp.writeFile(
  84. join(syntaxDirectory, 'styles/syntax-variables.less'),
  85. generateLessSyntaxVariables(variant)
  86. );
  87. await fsp.writeFile(
  88. join(uiDirectory, 'styles/ui-variables.less'),
  89. generateLessUIVariables(variant)
  90. );
  91. // Copy the LICENSE, README and images.
  92. await fsp.copyFile(
  93. join(__dirname, '../../LICENSE'),
  94. join(syntaxDirectory, 'LICENSE')
  95. );
  96. await fsp.copyFile(
  97. join(__dirname, '../../LICENSE'),
  98. join(uiDirectory, 'LICENSE')
  99. );
  100. await fsp.copyFile(
  101. join(atomDirectory, 'README.md'),
  102. join(syntaxDirectory, 'README.md')
  103. );
  104. await fsp.copyFile(
  105. join(atomDirectory, 'README.md'),
  106. join(uiDirectory, 'README.md')
  107. );
  108. await cpy(join(atomDirectory, 'images'), join(syntaxDirectory, 'images'));
  109. await cpy(join(atomDirectory, 'images'), join(uiDirectory, 'images'));
  110. }
  111. }
  112. export function generateLessSyntaxVariables(love: LoveVariant): string {
  113. return `
  114. @syntax-text-color: ${love.colors.foreground1};
  115. @syntax-cursor-color: ${love.colors.foreground1};
  116. @syntax-selection-color: fade(${love.colors.foreground1}, 20%);
  117. @syntax-selection-flash-color: ${love.colors.accents[6]};
  118. @syntax-background-color: ${love.colors.background1};
  119. @syntax-wrap-guide-color: ${love.colors.background2};
  120. @syntax-indent-guide-color: ${love.colors.grays[1]};
  121. @syntax-invisible-character-color: ${love.colors.grays[1]};
  122. @syntax-result-marker-color: ${love.colors.foreground2};
  123. @syntax-result-marker-color-selected: ${love.colors.foreground1};
  124. @syntax-gutter-text-color: ${love.colors.foreground1};
  125. @syntax-gutter-text-color-selected: ${love.colors.foreground1};
  126. @syntax-gutter-background-color: ${love.colors.background2};
  127. @syntax-gutter-background-color-selected: ${love.colors.grays[1]};
  128. @syntax-color-added: ${love.colors.accents[4]};
  129. @syntax-color-modified: ${love.colors.accents[1]};
  130. @syntax-color-removed: ${love.colors.accents[0]};
  131. @syntax-color-renamed: ${love.colors.accents[6]};
  132. @syntax-color-variable: ${love.colors.accents[0]};
  133. @syntax-color-constant: ${love.colors.accents[0]};
  134. @syntax-color-property: ${love.colors.accents[0]};
  135. @syntax-color-value: ${love.colors.accents[1]};
  136. @syntax-color-function: ${love.colors.accents[6]};
  137. @syntax-color-method: ${love.colors.accents[6]};
  138. @syntax-color-class: ${love.colors.accents[2]};
  139. @syntax-color-keyword: ${love.colors.accents[9]};
  140. @syntax-color-tag: ${love.colors.accents[0]};
  141. @syntax-color-attribute: ${love.colors.accents[1]};
  142. @syntax-color-import: ${love.colors.accents[4]};
  143. @syntax-color-snippet: ${love.colors.accents[4]};
  144. `.trim();
  145. }
  146. export function generateLessUIVariables(love: LoveVariant): string {
  147. return `
  148. @text-color: ${love.colors.foreground1};
  149. @text-color-subtle: ${love.colors.foreground2};
  150. @text-color-highlight: ${love.colors.foreground1};
  151. @text-color-selected: @text-color-highlight;
  152. @text-color-info: ${love.colors.accents[6]};
  153. @text-color-success: ${love.colors.accents[4]};
  154. @text-color-warning: ${love.colors.accents[1]};
  155. @text-color-error: ${love.colors.accents[0]};
  156. @background-color-info: ${love.colors.accents[6]};
  157. @background-color-success: ${love.colors.accents[4]};
  158. @background-color-warning: ${love.colors.accents[1]};
  159. @background-color-error: ${love.colors.accents[0]};
  160. @background-color-highlight: fade(${love.colors.foreground1}, 20%);
  161. @background-color-selected: @background-color-highlight;
  162. @app-background-color: ${love.colors.background1};
  163. @base-background-color: ${love.colors.background1};
  164. @base-border-color: ${love.colors.foreground1};
  165. @pane-item-background-color: ${love.colors.background1};
  166. @pane-item-border-color: @base-border-color;
  167. @input-background-color: ${love.colors.background2};
  168. @input-border-color: @base-border-color;
  169. @tool-panel-background-color: ${love.colors.background1};
  170. @tool-panel-border-color: @base-border-color;
  171. @inset-panel-background-color: ${love.colors.background2};
  172. @inset-panel-border-color: @base-border-color;
  173. @panel-heading-background-color: ${love.colors.background2};
  174. @panel-heading-border-color: transparent;
  175. @overlay-background-color: ${love.colors.background2};
  176. @overlay-border-color: @base-border-color;
  177. @button-background-color: ${love.colors.accents[6]};
  178. @button-background-color-hover: ${love.colors.accents[4]};
  179. @button-background-color-selected: ${love.colors.accents[9]};
  180. @button-border-color: ${love.colors.accents[6]};
  181. @tab-bar-background-color: ${love.colors.background2};
  182. @tab-bar-border-color: ${love.colors.background2};
  183. @tab-background-color: @tool-panel-background-color;
  184. @tab-background-color-active: ${love.colors.background1};
  185. @tab-border-color: @base-border-color;
  186. @tree-view-background-color: @tool-panel-background-color;
  187. @tree-view-border-color: @tool-panel-border-color;
  188. @ui-site-color-1: ${love.colors.accents[4]};
  189. @ui-site-color-2: ${love.colors.accents[6]};
  190. @ui-site-color-3: ${love.colors.accents[1]};
  191. @ui-site-color-4: ${love.colors.accents[9]};
  192. @ui-site-color-5: ${love.colors.accents[2]};
  193. @font-size: 13px;
  194. @input-font-size: 14px;
  195. @disclosure-arrow-size: 12px;
  196. @component-padding: 10px;
  197. @component-icon-padding: 5px;
  198. @component-icon-size: 16px;
  199. @component-line-height: 25px;
  200. @component-border-radius: 0;
  201. @tab-height: 40px;
  202. @font-family: system-ui;
  203. @use-custom-controls: true; // false uses native controls
  204. `.trim();
  205. }
  206. if (require.main === module) {
  207. void main();
  208. }