Migrate default themes to TypeScript

.github/workflows/check.yml

@@ -5,6 +5,9 @@ on:
     paths:
         # rerun when typescript files change
       - "ts/**"
+        # rerun when theme files change
+      - "themes/gruvbox/**"
+      - "themes/dracula/**"
         # rerun when workflow is changed
       - ".github/workflows/check.yml"
         # rerun when packages change
@@ -64,6 +67,9 @@ jobs:
     -
       name: Run ESLint
       run: npm run lint
+    -
+      name: Run ESLint for themes
+      run: npm run lint:themes
 
   prettier:
 
@@ -89,6 +95,9 @@ jobs:
     -
       name: Run Prettier
       run: npm run prettier
+    -
+      name: Run Prettier for themes
+      run: npm run prettier:themes
 
   package-lock:
 

.github/workflows/fix.yml

@@ -26,9 +26,15 @@ jobs:
     -
       name: Run ESLint
       run: npm run lint:fix
+    -
+      name: Run ESLint for themes
+      run: npm run lint:themes:fix
     -
       name: Run Prettier
       run: npm run prettier:fix
+    -
+      name: Run Prettier for themes
+      run: npm run prettier:themes:fix
     -
       run: |
         git restore package-lock.json

README.md

@@ -12,6 +12,7 @@ This is a LightDM Greeter made with [Electron.js][Electron] and [node-gtk][node-
 - Themes could be simple, or very complex.
 - Battery and brightness control.
 - Multi-monitor support, thanks to [s0](https://github.com/s0)
+- TypeScript based.
 
 ## Considerations
 

package.json

@@ -6,13 +6,37 @@
   "scripts": {
     "start": "electron .",
     "rebuild": "electron-rebuild -w node-gtk",
+
+    "build": "npm run build:tsc && node make build",
+    "build:tsc": "tsc --build && npm run build:themes",
+
+    "build:theme:gruvbox": "tsc --build themes/gruvbox",
+    "build:theme:dracula": "tsc --build themes/dracula",
+
+    "build:themes": "npm run build:theme:gruvbox && npm run build:theme:dracula",
+
     "type-check": "tsc --noEmit",
-    "build": "tsc --build && node make build",
     "lint": "eslint \"ts/**\"",
     "lint:fix": "eslint \"ts/**\" --fix",
+
+    "lint:theme:gruvbox": "eslint \"themes/gruvbox/ts/**\"",
+    "lint:theme:gruvbox:fix": "eslint \"themes/gruvbox/ts/**\" --fix",
+    "lint:theme:dracula": "eslint \"themes/dracula/ts/**\"",
+    "lint:theme:dracula:fix": "eslint \"themes/dracula/ts/**\" --fix",
+
+    "lint:themes": "npm run lint:theme:gruvbox && npm run lint:theme:dracula",
+    "lint:themes:fix": "npm run lint:theme:gruvbox:fix && npm run lint:theme:dracula:fix",
+
     "prettier": "prettier --check ts/",
     "prettier:fix": "prettier --write ts/",
-    "do_install": "node install.js"
+
+    "prettier:theme:gruvbox": "prettier --check themes/gruvbox/ts/ ",
+    "prettier:theme:gruvbox:fix": "prettier --write themes/gruvbox/ts/",
+    "prettier:theme:dracula": "prettier --check themes/dracula/ts/ ",
+    "prettier:theme:dracula:fix": "prettier --write themes/dracula/ts/",
+
+    "prettier:themes": "npm run prettier:theme:gruvbox && npm run prettier:theme:dracula",
+    "prettier:themes:fix": "npm run prettier:theme:gruvbox:fix && npm run prettier:theme:dracula:fix"
   },
   "author": {
     "name": "Jezer Mejía",

themes/dracula/.gitignore

@@ -0,0 +1 @@
+js/

themes/dracula/css/style.css

@@ -49,7 +49,6 @@ html {
 html * {
   font-family: system-ui;
   font-size: inherit;
-  transition: var(--animation-duration);
   color: var(--fg0);
 }
 
@@ -59,6 +58,7 @@ body {
   margin: 0;
   overflow-x: hidden;
   background-color: var(--bg0);
+  transition: var(--animation-duration);
 }
 
 .hide {
@@ -610,10 +610,10 @@ button {
   backdrop-filter: blur(50px);
 }
 
-#layouts-list {
+#layout-list {
   padding: 0;
 }
-#layouts-button {
+#layout-list-button {
   all: unset;
   cursor: pointer;
   padding: 8px;

themes/dracula/index.html

@@ -119,8 +119,8 @@ <h2 id="date-label">20-05-2021</h2>
       </div>
 
       <div id="system-bar">
-        <div id="layouts-list">
-          <button id="layouts-button" class="">LATAM</button>
+        <div id="layout-list">
+          <button id="layout-list-button" class="">LATAM</button>
           <ul id="layouts-dropdown" class="dropdown hide">
             <li><button>Latam</button></li>
             <li><button>English</button></li>
@@ -155,17 +155,7 @@ <h3>Background selector</h3>
       </div>
     </div>
 
-    <script src="js/debug.js"></script>
-    <script src="js/accounts.js"></script>
-    <script src="js/sessions.js"></script>
-    <script src="js/authenticate.js"></script>
-    <script src="js/sidebar.js"></script>
-    <script src="js/backgrounds.js"></script>
-    <script src="js/time-date.js"></script>
-    <script src="js/layouts.js"></script>
-    <script src="js/power.js"></script>
-    <script src="js/battery.js"></script>
-    <script src="js/brightness.js"></script>
-    <script src="js/index.js"></script>
+    <!--<script src="js/debug.js"></script>-->
+    <script src="js/index.js" type="module"></script>
   </body>
 </html>