Add product icons (see #11)

piousdeer · Dec 1, 2022 · 3d3061f · 3d3061f
1 parent 487849e
commit 3d3061f
Show file tree

Hide file tree

Showing 19 changed files with 276 additions and 5 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,31 @@
+# Contributing
+
+## Color themes
+
+Requirements: Python 3, npm
+
+Run `npm run build:color-themes`. Alternatively, `cd` into `src` and run `build.py`. Open this project in VS Code and hit F5 to test out your changes.
+
+Adwaita syntax highlighting rules are translated from a GtkSourceView style scheme. This is far from perfect, but I've tried to make sure most popular languages look good. If something seems too off, open an issue.
+
+## Product icons
+
+Requirements: Python 3, npm, [nanoemoji](https://github.com/googlefonts/nanoemoji)
+
+Adding a new icon:
+
+1. Obtain a .svg icon in the [Icon Library](https://flathub.org/apps/details/org.gnome.design.IconLibrary) app
+2. Put it into [icons/svg/](icons/svg/), incrementing the name in hexadecimal
+3. Open it with a text editor, replace the hardcoded color with `currentColor` and apply `style="transform:scale(0.8)translate(2,2)"` as the icons are too big by default for some reason
+4. Edit the icon if needed
+5. Add it to [adwaita.json](icons/adwaita.json)
+6. Build the .ttf file with `npm run build:product-icons`
+
+This process should be automated in the future.
+
+List of icons edited in step 3:
+
+- All window controls got a background circle with opacity 0.1
+- `layout` is `grid-symbolic` modified in Inkscape
+
+The menu bar icon must have the code point of U+EB94. It's [!important](https://github.com/microsoft/vscode/blob/2a16bdb4677649893126816d2e22fce76288eeb7/src/vs/base/browser/ui/menu/menubar.css#L102) for some reason.
diff --git a/README.md b/README.md
@@ -40,11 +40,9 @@ Installing [adw-gtk3](https://github.com/lassekongo83/adw-gtk3) will get you a m
 
 ## Contributing
 
-Requirements: Python 3.
+See [CONTRIBUTING.md](CONTRIBUTING.md).
 
-cd into `src` and run `build.py` to build the JSON files (if you have npm, `npm run build` is an alias for that). Open this project in VS Code and hit F5 to test out your changes.
-
-Adwaita syntax highlighting rules are translated from a GtkSourceView style scheme. This is far from perfect, but I've tried to make sure most popular languages look good. If something seems too off, open an issue.
+<hr>
 
 This project is not affiliated with GNOME Foundation.
 

diff --git a/package.json b/package.json
@@ -68,10 +68,18 @@
         "uiTheme": "vs",
         "path": "./themes/adwaita-light-default-syntax-highlighting-colorful-status-bar.json"
       }
+    ],
+    "productIconThemes": [
+      {
+        "id": "adwaita",
+        "label": "Adwaita",
+        "path": "./product-icons/adwaita.json"
+      }
     ]
   },
   "scripts": {
-    "build": "cd src && python3 build.py"
+    "build:color-themes": "cd src && python3 build.py",
+    "build:product-icons": "nanoemoji --color_format glyf_colr_1 --family adwaita-icons --output_file product-icons/adwaita-icons.ttf product-icons/scalable/*.svg"
   },
   "__metadata": {
     "id": "93fbc635-4a9a-4ff1-88ba-bf017484c602",

diff --git a/product-icons/adwaita-icons.ttf b/product-icons/adwaita-icons.ttf
diff --git a/product-icons/adwaita.json b/product-icons/adwaita.json
@@ -0,0 +1,73 @@
+{
+  "fonts": [
+    {
+      "id": "adwaita-icons",
+      "src": [
+        {
+          "path": "./adwaita-icons.ttf",
+          "format": "woff"
+        }
+      ],
+      "weight": "normal",
+      "style": "normal"
+    }
+  ],
+  "iconDefinitions": {
+    "chrome-close": {
+      "fontCharacter": "\\ea01",
+      "fontId": "adwaita-icons"
+    },
+    "chrome-maximize": {
+      "fontCharacter": "\\ea02",
+      "fontId": "adwaita-icons"
+    },
+    "chrome-minimize": {
+      "fontCharacter": "\\ea03",
+      "fontId": "adwaita-icons"
+    },
+    "chrome-restore": {
+      "fontCharacter": "\\ea04",
+      "fontId": "adwaita-icons"
+    },
+    "menubar-more": {
+      "fontCharacter": "\\eb94",
+      "fontId": "adwaita-icons"
+    },
+    "layout-sidebar-left": {
+      "fontCharacter": "\\ea05",
+      "fontId": "adwaita-icons"
+    },
+    "layout-sidebar-left-off": {
+      "fontCharacter": "\\ea06",
+      "fontId": "adwaita-icons"
+    },
+    "layout-panel": {
+      "fontCharacter": "\\ea07",
+      "fontId": "adwaita-icons"
+    },
+    "layout-panel-off": {
+      "fontCharacter": "\\ea08",
+      "fontId": "adwaita-icons"
+    },
+    "layout-sidebar-right": {
+      "fontCharacter": "\\ea09",
+      "fontId": "adwaita-icons"
+    },
+    "layout-sidebar-right-off": {
+      "fontCharacter": "\\ea0a",
+      "fontId": "adwaita-icons"
+    },
+    "layout": {
+      "fontCharacter": "\\ea0b",
+      "fontId": "adwaita-icons"
+    },
+    "arrow-left": {
+      "fontCharacter": "\\ea0c",
+      "fontId": "adwaita-icons"
+    },
+    "arrow-right": {
+      "fontCharacter": "\\ea0d",
+      "fontId": "adwaita-icons"
+    }
+  }
+}
diff --git a/product-icons/scalable/ea01.svg b/product-icons/scalable/ea01.svg
diff --git a/product-icons/scalable/ea02.svg b/product-icons/scalable/ea02.svg
diff --git a/product-icons/scalable/ea03.svg b/product-icons/scalable/ea03.svg
diff --git a/product-icons/scalable/ea04.svg b/product-icons/scalable/ea04.svg
diff --git a/product-icons/scalable/ea05.svg b/product-icons/scalable/ea05.svg
diff --git a/product-icons/scalable/ea06.svg b/product-icons/scalable/ea06.svg
diff --git a/product-icons/scalable/ea07.svg b/product-icons/scalable/ea07.svg
diff --git a/product-icons/scalable/ea08.svg b/product-icons/scalable/ea08.svg
diff --git a/product-icons/scalable/ea09.svg b/product-icons/scalable/ea09.svg
diff --git a/product-icons/scalable/ea0a.svg b/product-icons/scalable/ea0a.svg
diff --git a/product-icons/scalable/ea0b.svg b/product-icons/scalable/ea0b.svg
diff --git a/product-icons/scalable/ea0c.svg b/product-icons/scalable/ea0c.svg
diff --git a/product-icons/scalable/ea0d.svg b/product-icons/scalable/ea0d.svg
diff --git a/product-icons/scalable/eb94.svg b/product-icons/scalable/eb94.svg