Skip to content

Commit

Permalink
some fixes in theme variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@RodrigoLuglio
RodrigoLuglio committed Sep 5, 2024
1 parent e86885c commit ee492eb
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 75 deletions.
91 changes: 91 additions & 0 deletions src/lib/utils/colorUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,94 @@ export const presets = {
nord: { baseHue: 220, scheme: ColorScheme.Analogous },
dracula: { baseHue: 260, scheme: ColorScheme.SplitComplementary },
};

export function hexToHSL(hex: string): { h: number; s: number; l: number } {
let r = 0,
g = 0,
b = 0;
if (hex.length === 4) {
r = parseInt(hex[1] + hex[1], 16);
g = parseInt(hex[2] + hex[2], 16);
b = parseInt(hex[3] + hex[3], 16);
} else if (hex.length === 7) {
r = parseInt(hex.slice(1, 3), 16);
g = parseInt(hex.slice(3, 5), 16);
b = parseInt(hex.slice(5, 7), 16);
}

r /= 255;
g /= 255;
b /= 255;

const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h = 0,
s,
l = (max + min) / 2;

if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}

return { h: h * 360, s: s * 100, l: l * 100 };
}

export function hslToHex(h: number, s: number, l: number): string {
h /= 360;
s /= 100;
l /= 100;
let r, g, b;

if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};

const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}

const toHex = (x: number) => {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? "0" + hex : hex;
};

return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

export function adjustHue(hue: number): number {
return (hue + 360) % 360;
}

export function adjustSaturation(saturation: number): number {
return Math.max(0, Math.min(100, saturation));
}

export function adjustLightness(lightness: number): number {
return Math.max(0, Math.min(100, lightness));
}
54 changes: 24 additions & 30 deletions src/lib/utils/exportTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,14 @@ export function generateThemeJSON(

// # Button Control
// # A set of colors for button widgets such as Open Folder button in the Explorer of a new window.
"button.background": colors.AC2, // Button background color
"button.background": colors.AC2 + "db", // Button background color
"button.foreground": colors.FG3, // Button foreground color
// "button.border": //# Button border color
// "button.separator": colors.FG2, // Button separator color.
"button.hoverBackground": colors.lineHighlight, // Button background color when hovering
"button.secondaryBackground": colors.AC1, // Secondary button background color.
"button.hoverBackground": colors.AC2, // Button background color when hovering
"button.secondaryBackground": colors.AC1 + "db", // Secondary button background color.
"button.secondaryForeground": colors.FG3, // Secondary button foreground color.
"button.secondaryHoverBackground": colors.lineHighlight, // Secondary button background color when hovering.
"button.secondaryHoverBackground": colors.AC1, // Secondary button background color when hovering.
"checkbox.background": colors.BG1, // Background color of checkbox widget.
"checkbox.foreground": colors.FG1, // Foreground color of checkbox widget.
// "checkbox.border": // # Border color of checkbox widget.
Expand Down Expand Up @@ -160,7 +160,7 @@ export function generateThemeJSON(
// "list.focusOutline": colors.BORDER, //# List/Tree outline color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
// "list.focusAndSelectionOutline": colors.BORDER, //# List/Tree outline color for the focused item when the list/tree is active and selected. An active list/tree has keyboard focus, an inactive does not.
// "list.focusHighlightForeground": colors.FG1, //# List/Tree foreground color of the match highlights on actively focused items when searching inside the list/tree.
"list.highlightForeground": colors.lineHighlight, // List/Tree foreground color of the match highlights when searching inside the list/tree
"list.highlightForeground": colors.AC1, // List/Tree foreground color of the match highlights when searching inside the list/tree
"list.hoverBackground": colors.BG2 + "50", // List/Tree background when hovering over items using the mouse
"list.hoverForeground": colors.FG1, // List/Tree foreground when hovering over items using the mouse
"list.warningForeground": colors.WARNING, // Color of warning decorations in the explorer
Expand Down Expand Up @@ -252,15 +252,15 @@ export function generateThemeJSON(
"editorGroupHeader.tabsBackground": colors.BG2, //# Background color of the Tabs container
"editorGroupHeader.tabsBorder": colors.BORDER, //# Border color of the editor group title header when tabs are enabled. Editor groups are the containers of editors
"editorGroupHeader.border": colors.BORDER, //# Border color between editor group header and editor (below breadcrumbs if enabled).
"tab.activeBackground": colors.lineHighlight, //# Active Tab background color
"tab.activeBackground": colors.BG1, //# Active Tab background color
"tab.activeForeground": colors.FG1, //# Active Tab foreground color in an active group
"tab.border": colors.BORDER, //# Border to separate Tabs from each other
"tab.activeBorderTop": colors.AC1, //# A border drawn to the top of the active tab
// "tab.activeBorder": colors.AC1, //# A border drawn to the bottom of the active tab
"tab.selectedBackground": colors.lineHighlight, //# Background of a selected tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
// tab.selectedForeground: //# Foreground of a selected tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
// tab.dragAndDropBorder: //# Border between tabs to indicate that a tab can be inserted between two tabs. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.
"tab.inactiveBackground": colors.BG1, //# Inactive Tab background color
"tab.inactiveBackground": colors.BG2, //# Inactive Tab background color
"tab.inactiveForeground": syntaxColors.comment, //# Inactive Tab foreground color in an active group
// "tab.unfocusedActiveBorder": colors.BORDER, //# A border drawn to the bottom of the active tab in an editor group that is not focused
// "tab.unfocusedActiveForeground": colors.FG1, //# Active tab foreground color in an inactive editor group
Expand Down Expand Up @@ -741,9 +741,9 @@ export function generateThemeJSON(

// # SETTINGS
"settings.headerForeground": colors.FG1, // The foreground color for a section header or active title
"settings.modifiedItemIndicator": colors.WARNING, // The color of the line that indicates a modified setting
"settings.modifiedItemIndicator": colors.INFO, // The color of the line that indicates a modified setting
"settings.inactiveSelectedItemBorder": syntaxColors.comment, // The color of the selected setting row border, when the settings list does not have focus
"settings.dropdownBackground": colors.BG2, // Dropdown background
"settings.dropdownBackground": colors.BG1, // Dropdown background
"settings.dropdownForeground": colors.FG1, // Dropdown foreground
"settings.dropdownBorder": colors.BORDER, // Dropdown border
"settings.checkboxBackground": colors.BG1, // Checkbox background
Expand Down Expand Up @@ -1276,7 +1276,6 @@ export function generateThemeJSON(
{
scope: [
"keyword.other.important.css",
"support.variable.property",
"keyword.control.flow",
"keyword.control.loop",
"keyword.control.conditional",
Expand Down Expand Up @@ -1489,7 +1488,7 @@ export function generateThemeJSON(
{
scope: ["variable.other.alias.yaml"],
settings: {
foreground: syntaxColors.constant,
foreground: syntaxColors.variable,
fontStyle: "underline",
},
},
Expand All @@ -1499,17 +1498,9 @@ export function generateThemeJSON(
"variable.language punctuation.definition.variable.php",
"variable.other.readwrite.instance.ruby",
"variable.parameter.function.language.special",
"variable.other.constant",
],
settings: {
foreground: syntaxColors.constant,
},
},

{
scope: ["variable.object.property", "variable.other.object.property"],
settings: {
foreground: syntaxColors.variableProperty,
foreground: syntaxColors.variable,
},
},
{
Expand All @@ -1520,21 +1511,20 @@ export function generateThemeJSON(
},
},
{
scope: [
"meta.import variable.other.readwrite",
"meta.object-binding-pattern-variable variable.object.property",
"meta.variable.assignment.destructured.object.coffee variable",
],
scope: [],
settings: {
foreground: syntaxColors.variableDeclaration,
},
},
{
scope: [
"meta.import variable.other.readwrite",
"meta.import variable.other.readwrite.alias",
"meta.export variable.other.readwrite.alias",
"meta.variable.assignment.destructured.object.coffee variable variable",
"meta.object-binding-pattern-variable variable.object.property",
"meta.variable.assignment.destructured.object.coffee variable",
"variable.other.readwrite.js",
"variable.other.constant",
],
settings: {
foreground: syntaxColors.variableDeclaration,
Expand All @@ -1547,13 +1537,19 @@ export function generateThemeJSON(
},
},
{
scope: ["variable.graphql"],
scope: ["variable.graphql", "support.variable"],
settings: {
foreground: syntaxColors.variable,
},
},
{
scope: ["support.variable.property", "keyword.operation.graphql"],
scope: [
"support.variable.property",
"support.variable.property.js",
"variable.object.property",
"variable.other.object.property",
"keyword.operation.graphql",
],
settings: {
foreground: syntaxColors.variableProperty,
//fontStyle: "bold"
Expand All @@ -1571,7 +1567,6 @@ export function generateThemeJSON(
{
scope: [
"support.function.magic",
"support.variable",
"variable.other.predefined",
"storage.modifier.async",
],
Expand All @@ -1592,7 +1587,6 @@ export function generateThemeJSON(
"meta.implementation storage.type.objc",
"meta.interface-or-protocol storage.type.objc",
"source.groovy storage.type.def",
"support.variable.property.js",
],
settings: {
foreground: syntaxColors.storage,
Expand Down
Loading

0 comments on commit ee492eb

Please sign in to comment.