v0.1.3

CHANGELOG.md

@@ -6,6 +6,16 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [Unreleased]
 
+## [0.1.3] - 2020-08-04
+
+### Change
+
+- Update default dark color - more neutral (...possible)
+
+### Added
+
+- Dark color flavors - Grape and Pumpkin
+
 ## [0.1.2] - 2020-08-03
 
 ### Change

README.md

@@ -7,6 +7,7 @@
 ### ROADMAP:
 
 - [x] Better syntax colors
+- [x] Dark color variants (flavors)
 - [ ] Light Themes
 
 ---
@@ -17,6 +18,14 @@
 
 ![taru-vscode-theme-html](images/scrsht.png)
 
+#### Yaru Dark Grape
+
+![taru-vscode-theme-html](images/scrsht-dark-grape.png)
+
+#### Yaru Pumpkin
+
+![taru-vscode-theme-html](images/scrsht-dark-pumpkin.png)
+
 #### Yaru Light [ SOON ]
 
 ---

package.json

@@ -2,7 +2,7 @@
 	"name": "yaru-vscode",
 	"displayName": "Yaru VS Code Theme",
 	"description": "Yaru VS Code Theme based on Official Ubuntu System Colors.",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"publisher": "AdsonCicilioti",
 	"license": "MIT",
 	"author": "Adson Cicilioti",
@@ -46,9 +46,19 @@
 	"contributes": {
 		"themes": [
 			{
-				"label": "Yaru dark",
+				"label": "Yaru Dark",
 				"uiTheme": "vs-dark",
-				"path": "./theme/yaru.json"
+				"path": "./theme/yaru-dark.json"
+			},
+			{
+				"label": "Yaru Dark Grape",
+				"uiTheme": "vs-dark",
+				"path": "./theme/yaru-dark-grape.json"
+			},
+			{
+				"label": "Yaru Dark Pumpkin",
+				"uiTheme": "vs-dark",
+				"path": "./theme/yaru-dark-pumpkin.json"
 			}
 		]
 	},

scripts/build.js

@@ -5,24 +5,28 @@ const generate = require('./generate');
 const THEME_DIR = path.join(__dirname, '..', 'theme');
 
 if (!fs.existsSync(THEME_DIR)) {
-    fs.mkdirSync(THEME_DIR);
+  fs.mkdirSync(THEME_DIR);
 }
 
 module.exports = async () => {
-    const { base, soft } = await generate();
+  const { dark, darkGrape, darkPumpkin } = await generate();
 
-    return Promise.all([
-        fs.promises.writeFile(
-            path.join(THEME_DIR, 'yaru.json'),
-            JSON.stringify(base, null, 4)
-        ),
-        fs.promises.writeFile(
-            path.join(THEME_DIR, 'yaru-soft.json'),
-            JSON.stringify(soft, null, 4)
-        ),
-    ]);
+  return Promise.all([
+    fs.promises.writeFile(
+      path.join(THEME_DIR, 'yaru-dark.json'),
+      JSON.stringify(dark, null, 4)
+    ),
+    fs.promises.writeFile(
+      path.join(THEME_DIR, 'yaru-dark-grape.json'),
+      JSON.stringify(darkGrape, null, 4)
+    ),
+    fs.promises.writeFile(
+      path.join(THEME_DIR, 'yaru-dark-pumpkin.json'),
+      JSON.stringify(darkPumpkin, null, 4)
+    ),
+  ]);
 };
 
 if (require.main === module) {
-    module.exports();
+  module.exports();
 }

scripts/generate.js

@@ -23,48 +23,52 @@ const tinycolor = require('tinycolor2');
  */
 
 const withAlphaType = new Type('!alpha', {
-    kind: 'sequence',
-    construct: ([hexRGB, alpha]) => hexRGB + alpha,
-    represent: ([hexRGB, alpha]) => hexRGB + alpha,
+  kind: 'sequence',
+  construct: ([hexRGB, alpha]) => hexRGB + alpha,
+  represent: ([hexRGB, alpha]) => hexRGB + alpha,
 });
 
 const schema = Schema.create([withAlphaType]);
 
-/**
- * Soft variant transform.
- * @type {ThemeTransform}
- */
-const transformSoft = (yamlContent, yamlObj) => {
-    const brightColors = [...yamlObj.yaru.ansi, ...yamlObj.yaru.brightOther];
-    return load(
-        yamlContent.replace(/#[0-9A-F]{6}/g, (color) => {
-            if (brightColors.includes(color)) {
-                return tinycolor(color).desaturate(20).toHexString();
-            }
-            return color;
-        }),
-        { schema }
-    );
-};
-
 module.exports = async () => {
-    const yamlFile = await readFile(
-        join(__dirname, '..', 'src', 'yaru.yml'),
-        'utf-8'
-    );
+  const darkYml = await readFile(
+    join(__dirname, '..', 'src', 'yaru-dark.yml'),
+    'utf-8'
+  );
+  const grapeYml = await readFile(
+    join(__dirname, '..', 'src', 'yaru-dark grape.yml'),
+    'utf-8'
+  );
+  const pumpkinYml = await readFile(
+    join(__dirname, '..', 'src', 'yaru-dark-pumpkin.yml'),
+    'utf-8'
+  );
 
-    /** @type {Theme} */
-    const base = load(yamlFile, { schema });
+  /** @type {Theme} */
+  const dark = load(darkYml, { schema });
+  const darkGrape = load(grapeYml, { schema });
+  const darkPumpkin = load(pumpkinYml, { schema });
 
-    // Remove nulls and other falsey values from colors
-    for (const key of Object.keys(base.colors)) {
-        if (!base.colors[key]) {
-            delete base.colors[key];
-        }
+  // Remove nulls and other falsey values from colors
+  for (const key of Object.keys(dark.colors)) {
+    if (!dark.colors[key]) {
+      delete dark.colors[key];
+    }
+  }
+  for (const key of Object.keys(darkGrape.colors)) {
+    if (!darkGrape.colors[key]) {
+      delete darkGrape.colors[key];
+    }
+  }
+  for (const key of Object.keys(darkPumpkin.colors)) {
+    if (!darkPumpkin.colors[key]) {
+      delete darkPumpkin.colors[key];
     }
+  }
 
-    return {
-        base,
-        soft: transformSoft(yamlFile, base),
-    };
+  return {
+    dark,
+    darkGrape,
+    darkPumpkin,
+  };
 };

src/yaru.yml → src/yaru-dark grape.yml

@@ -1,7 +1,7 @@
-name: Yaru
-author: Zeno Rocha
+name: Yaru Dark Grape
+author: Adson CIcilioti
 maintainers:
-  - Derek P Sifford <dereksifford@gmail.com>
+  - Adson Cicilioti <adson.ciciliotid@live.com>
 semanticClass: theme.yaru
 semanticHighlighting: true
 yaru:
@@ -92,7 +92,7 @@ colors:
   # Button Control
   button.background: *UI_BTN # Button background color
   button.foreground: *FG # Button foreground color
-  button.hoverBackground: *YARU_ORG # Button background color when hovering
+  button.hoverBackground: *YARU_GRN # Button background color when hovering
   button.secondaryBackground: *YARU_ORG
   button.secondaryForeground:
 
@@ -161,13 +161,13 @@ colors:
   sideBar.foreground: *TXT_FADED # Side Bar foreground color. The Side Bar is the container for views like Explorer and Search
   sideBar.border: # Side Bar border color on the side separating the editor
   sideBarTitle.foreground: *FG # Side Bar title foreground color
-  sideBarSectionHeader.background: !alpha [*BGLight, 30] # Side Bar section header background color
+  sideBarSectionHeader.background: !alpha [*BGLight, 50] # Side Bar section header background color
   sideBarSectionHeader.foreground: *TXT_FADED # Side Bar section header foreground color
   sideBarSectionHeader.border: *BGDarker # Side bar section header border color
 
   # Editor Group & Tabs
   editorGroup.background: # Background color of an editor group. The background color shows up when dragging editor groups around
-  editorGroup.border: *YARU_ORG # Color to separate multiple editor groups from each other
+  editorGroup.border: *BGLighter # Color to separate multiple editor groups from each other
   editorGroup.dropBackground: *TAB_DROP_BG # Background color when dragging editors around
   editorGroupHeader.noTabsBackground: # Background color of the editor group title header when Tabs are disabled
   editorGroupHeader.tabsBackground: *BGLight # Background color of the Tabs container
@@ -206,7 +206,7 @@ colors:
   editor.hoverHighlightBackground: !alpha [*CYAN, 50] # Highlight below the word for which a hover is shown
 
   editor.lineHighlightBackground: *BGLighter # Background color for the highlight of line at the cursor position
-  editor.lineHighlightBorder: # Background color for the border around the line at the cursor position
+  editor.lineHighlightBorder: *BGLighter # Background color for the border around the line at the cursor position
 
   editorLink.activeForeground: *CYAN # Color of active links
   editor.rangeHighlightBackground: !alpha [*YARU_PRP, 15] # Background color of highlighted ranges, like by Quick Open and Find features
@@ -311,14 +311,14 @@ colors:
 
   # Panel Colors
   panel.background: *BG # Panel background color
-  panel.border: *BGDarker # Panel border color on the top separating to the editor
+  panel.border: *YARU_PRP # Panel border color on the top separating to the editor
   panelTitle.activeBorder: *YARU_ORG # Border color for the active panel title
   panelTitle.activeForeground: *FG # Title color for the active panel
   panelTitle.inactiveForeground: *TXT_FADED # Title color for the inactive panel
 
   # Status Bar Colors
-  statusBar.background: *YARU_ORG # Standard Status Bar background color
-  statusBar.foreground: *FG # Status Bar foreground color
+  statusBar.background: *YARU_PRP # Standard Status Bar background color
+  statusBar.foreground: *COLOR15 # Status Bar foreground color
   statusBar.debuggingBackground: # Status Bar background color when a program is being debugged
   statusBar.debuggingForeground: # Status Bar foreground color when a program is being debugged
   statusBar.noFolderBackground: *BGDarker # Status Bar foreground color when no folder is opened
@@ -352,11 +352,11 @@ colors:
 
   # Extensions
   extensionButton.prominentForeground: *FG # Extension view button foreground color (for example Install button)
-  extensionButton.prominentBackground: !alpha [*GREEN, 90] # Extension view button background color
-  extensionButton.prominentHoverBackground: !alpha [*GREEN, 60] # Extension view button background hover color
+  extensionButton.prominentBackground: *YARU_GRN # Extension view button background color
+  extensionButton.prominentHoverBackground: !alpha [*YARU_GRN, 90] # Extension view button background hover color
 
   # Quick Picker
-  pickerGroup.border: *YARU_ORG # Quick picker (Quick Open) color for grouping borders
+  pickerGroup.border: *UI_BTN # Quick picker (Quick Open) color for grouping borders
   pickerGroup.foreground: *CYAN # Quick picker (Quick Open) color for grouping labels
 
   # Debug