diff --git a/src/app/globals.css b/src/app/globals.css
index 7935008..6baea5d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,7 +27,8 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
- --radius: 0.5rem}
+ --radius: 0.5rem;
+ }
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
@@ -52,7 +53,8 @@
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
- --chart-5: 340 75% 55%}
+ --chart-5: 340 75% 55%;
+ }
}
@layer base {
* {
diff --git a/src/components/ThemeControls.tsx b/src/components/ThemeControls.tsx
index 07ddca3..8ef2018 100644
--- a/src/components/ThemeControls.tsx
+++ b/src/components/ThemeControls.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import { ColorScheme } from "@/lib/utils/colorUtils";
-import { useTheme } from "@/contexts/ThemeContext";
+import React, { use, useEffect } from 'react'
+import { ColorScheme } from '@/lib/utils/colorUtils'
+import { useTheme } from '@/contexts/ThemeContext'
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Slider } from "@/components/ui/slider";
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Slider } from '@/components/ui/slider'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
+} from '@/components/ui/select'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
const ThemeControls: React.FC = () => {
const {
@@ -35,24 +35,28 @@ const ThemeControls: React.FC = () => {
generateColors,
lockedColors,
regenerateAnsiColors,
- } = useTheme();
+ } = useTheme()
+
+ useEffect(() => {
+ handleRandomize()
+ }, [])
const handleRandomize = () => {
- const newBaseHue = Math.floor(Math.random() * 360);
- const newUiSaturation = Math.floor(Math.random() * 100);
- const newSyntaxSaturation = Math.floor(Math.random() * 100);
+ const newBaseHue = Math.floor(Math.random() * 360)
+ const newUiSaturation = Math.floor(Math.random() * 100)
+ const newSyntaxSaturation = Math.floor(Math.random() * 100)
const schemeValues = Object.values(ColorScheme).filter(
- (value) => typeof value === "number"
- ) as number[];
+ (value) => typeof value === 'number'
+ ) as number[]
const newScheme = schemeValues[
Math.floor(Math.random() * schemeValues.length)
- ] as ColorScheme;
+ ] as ColorScheme
// Update the state values immediately
- setBaseHue(newBaseHue);
- setUiSaturation(newUiSaturation);
- setSyntaxSaturation(newSyntaxSaturation);
- setScheme(newScheme);
+ setBaseHue(newBaseHue)
+ setUiSaturation(newUiSaturation)
+ setSyntaxSaturation(newSyntaxSaturation)
+ setScheme(newScheme)
// Then generate colors with these new values
generateColors({
@@ -63,14 +67,15 @@ const ThemeControls: React.FC = () => {
scheme: newScheme,
lockedColors: Array.from(lockedColors),
forceRegenerate: true,
- });
- };
+ })
+ }
const handleRegenerateUnlockedColors = () => {
// Add small random variations to the current values
- const hueVariation = Math.floor(Math.random() * 30) - 15; // -15 to +15
- const saturationVariation = Math.floor(Math.random() * 20) - 10; // -10 to +10
+ const hueVariation = Math.floor(Math.random() * 30) - 15 // -15 to +15
+ const saturationVariation = Math.floor(Math.random() * 20) - 10 // -10 to +10
+ console.log('Scheme Regenerate: ', scheme)
generateColors({
isDark,
baseHue: (baseHue + hueVariation + 360) % 360, // Ensure it stays within 0-359
@@ -85,23 +90,23 @@ const ThemeControls: React.FC = () => {
scheme,
lockedColors: Array.from(lockedColors),
forceRegenerate: true, // Add this flag to force regeneration
- });
- };
+ })
+ }
const getSaturationGradient = (baseHue: number) => `
linear-gradient(to right,
hsl(${baseHue}, 0%, 50%),
hsl(${baseHue}, 100%, 50%)
)
- `;
+ `
const handleSchemeChange = (newScheme: ColorScheme) => {
- setScheme(newScheme);
+ setScheme(newScheme)
generateColors({
scheme: newScheme,
forceRegenerate: true,
- });
- };
+ })
+ }
return (
@@ -302,7 +307,7 @@ const ThemeControls: React.FC = () => {
- );
-};
+ )
+}
-export default ThemeControls;
+export default ThemeControls
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index 36f8076..69614af 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -6,7 +6,11 @@ import React, {
useRef,
useEffect,
} from 'react'
-import { ColorScheme, ThemeGenerationOptions } from '@/lib/utils/colorUtils'
+import {
+ ColorScheme,
+ generateSchemeColors,
+ ThemeGenerationOptions,
+} from '@/lib/utils/colorUtils'
import {
ColorAliases,
generateThemeColors,
@@ -19,7 +23,6 @@ import {
} from '@/lib/utils/syntaxColors'
import { AnsiColors, generateAnsiColors } from '@/lib/utils/ansiColors'
import { initialColors, initialSyntaxColors } from '@/lib/utils/exportTheme'
-import { generateAdditionalHues } from '@/lib/utils/colorUtils'
interface ThemeContextType {
isDark: boolean
@@ -104,8 +107,6 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
const {
colors: newColors,
schemeHues: newSchemeHues,
- ac1Hue,
- ac2Hue,
scheme: newScheme,
} = generateThemeColors(
fullOptions,
@@ -114,23 +115,15 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
) as Partial,
options.forceRegenerate
)
-
- // Generate additional hues based on AC1 and AC2, respecting the color scheme
- const ac1AdditionalHues = generateAdditionalHues(ac1Hue, newScheme)
- const ac2AdditionalHues = generateAdditionalHues(ac2Hue, newScheme)
-
- // Extend schemeHues with hues derived from AC1 and AC2
- const extendedSchemeHues = [
- ...newSchemeHues,
- ac1Hue,
- ...ac1AdditionalHues,
- ac2Hue,
- ...ac2AdditionalHues,
- ]
+ console.log('Scheme returned from generateThemeColors: ', newScheme)
+ console.log(
+ 'Scheme hues returned from generateThemeColors: ',
+ newSchemeHues
+ )
const newSyntaxColors = generateSyntaxColors(
newColors.BG1,
- extendedSchemeHues,
+ newSchemeHues,
fullOptions.syntaxSaturation,
Object.fromEntries(
Object.entries(syntaxColors).filter(([key]) =>
diff --git a/src/lib/utils/colorUtils.ts b/src/lib/utils/colorUtils.ts
index 6b6e6ca..127fbf9 100644
--- a/src/lib/utils/colorUtils.ts
+++ b/src/lib/utils/colorUtils.ts
@@ -75,11 +75,11 @@ export function adjustCommentColor(
if (contrast > maxContrast) {
comment = comment.darken(0.2)
comment = comment.desaturate(0.5)
- console.log('Escureceu ')
+ // console.log('Escureceu ')
} else if (contrast < minContrast) {
comment = comment.lighten(0.2)
comment = comment.saturate(0.2)
- console.log('Clareou ')
+ // console.log('Clareou ')
}
} else {
break
@@ -90,11 +90,11 @@ export function adjustCommentColor(
if (contrast < minContrast) {
comment = comment.darken(0.2)
comment = comment.saturate(0.2)
- console.log('Escureceu ')
+ // console.log('Escureceu ')
} else if (contrast > maxContrast) {
comment = comment.lighten(0.2)
comment = comment.desaturate(0.5)
- console.log('Clareou ')
+ // console.log('Clareou ')
}
} else {
break
@@ -171,119 +171,134 @@ export function generateSchemeColors(
case ColorScheme.Analogous:
result = [
baseHue,
- (baseHue + 30) % 360,
- (baseHue + 60) % 360,
- (baseHue - 30 + 360) % 360,
+ Math.abs(baseHue + 30) % 360,
+ Math.abs(baseHue + 60) % 360,
+ Math.abs(baseHue - 30 + 360) % 360,
+ Math.abs(baseHue - 60 + 360) % 360,
]
break
case ColorScheme.Complementary:
- result = [
- baseHue,
- (baseHue + 180) % 360,
- (baseHue + 30) % 360,
- (baseHue + 210) % 360,
- ]
+ result = [baseHue, Math.abs(baseHue + 180) % 360]
break
case ColorScheme.SplitComplementary:
result = [
baseHue,
- (baseHue + 150) % 360,
- (baseHue + 210) % 360,
- (baseHue + 30) % 360,
+ Math.abs(baseHue + 150) % 360,
+ Math.abs(baseHue + 210) % 360,
]
break
case ColorScheme.Triadic:
result = [
baseHue,
- (baseHue + 120) % 360,
- (baseHue + 240) % 360,
- (baseHue + 60) % 360,
+ Math.abs(baseHue + 60) % 360,
+ Math.abs(baseHue + 120) % 360,
]
break
case ColorScheme.Tetradic:
result = [
baseHue,
- (baseHue + 90) % 360,
- (baseHue + 180) % 360,
- (baseHue + 270) % 360,
+ Math.abs(baseHue + 90) % 360,
+ Math.abs(baseHue + 180) % 360,
+ Math.abs(baseHue + 270) % 360,
]
break
case ColorScheme.GoldenRatio:
const goldenRatio = 0.618033988749895
result = [
baseHue,
- (baseHue + 360 * goldenRatio) % 360,
- (baseHue + 360 * goldenRatio * 2) % 360,
- (baseHue + 360 * goldenRatio * 3) % 360,
+ Math.abs(baseHue + 360 * goldenRatio) % 360,
+ Math.abs(baseHue + 360 * goldenRatio * 2) % 360,
+ Math.abs(baseHue + 360 * goldenRatio * 3) % 360,
+ Math.abs(baseHue + 360 * goldenRatio * 4) % 360,
+ Math.abs(baseHue + 360 * goldenRatio * 5) % 360,
+ Math.abs(baseHue + 360 * goldenRatio * 6) % 360,
+ Math.abs(baseHue + 360 * goldenRatio * 7) % 360,
]
break
case ColorScheme.Fibonacci:
result = [
baseHue,
- (baseHue + 360 / 13) % 360,
- (baseHue + 360 / 8) % 360,
- (baseHue + 360 / 5) % 360,
+ Math.abs(baseHue + 360 / 2) % 360,
+ Math.abs(baseHue + 360 / 3) % 360,
+ Math.abs(baseHue + 360 / 5) % 360,
+ Math.abs(baseHue + 360 / 8) % 360,
+ Math.abs(baseHue + 360 / 13) % 360,
+ Math.abs(baseHue + 360 / 21) % 360,
+ Math.abs(baseHue + 360 / 34) % 360,
+ Math.abs(baseHue + 360 / 55) % 360,
]
break
case ColorScheme.PentagramStar:
result = [
baseHue,
- (baseHue + 72) % 360,
- (baseHue + 144) % 360,
- (baseHue + 216) % 360,
- (baseHue + 288) % 360,
+ Math.abs(baseHue + 72) % 360,
+ Math.abs(baseHue + 144) % 360,
+ Math.abs(baseHue + 216) % 360,
+ Math.abs(baseHue + 288) % 360,
]
break
case ColorScheme.VesicaPiscis:
- result = [(baseHue + 33) % 360, (baseHue + 66) % 360]
+ result = [
+ baseHue,
+ Math.abs(baseHue + 33) % 360,
+ Math.abs(baseHue + 66) % 360,
+ ]
break
case ColorScheme.FlowerOfLife:
result = [
- (baseHue + 60) % 360,
- (baseHue + 120) % 360,
- (baseHue + 180) % 360,
- (baseHue + 240) % 360,
- (baseHue + 300) % 360,
+ baseHue,
+ Math.abs(baseHue + 60) % 360,
+ Math.abs(baseHue + 120) % 360,
+ Math.abs(baseHue + 180) % 360,
+ Math.abs(baseHue + 240) % 360,
+ Math.abs(baseHue + 300) % 360,
]
break
case ColorScheme.PlatonicSolids:
result = [
- (baseHue + 72) % 360,
- (baseHue + 144) % 360,
- (baseHue + 216) % 360,
- (baseHue + 288) % 360,
+ baseHue,
+ Math.abs(baseHue + 72) % 360,
+ Math.abs(baseHue + 144) % 360,
+ Math.abs(baseHue + 216) % 360,
+ Math.abs(baseHue + 288) % 360,
]
break
case ColorScheme.SpiralOfTheodorus:
result = [
- (baseHue + Math.sqrt(2) * 180) % 360,
- (baseHue + Math.sqrt(3) * 180) % 360,
- (baseHue + Math.sqrt(4) * 180) % 360,
+ baseHue,
+ Math.abs(baseHue + Math.sqrt(2) * 180) % 360,
+ Math.abs(baseHue + Math.sqrt(3) * 180) % 360,
+ Math.abs(baseHue + Math.sqrt(5) * 180) % 360,
+ Math.abs(baseHue + Math.sqrt(6) * 180) % 360,
+ Math.abs(baseHue + Math.sqrt(7) * 180) % 360,
+ Math.abs(baseHue + Math.sqrt(8) * 180) % 360,
]
break
case ColorScheme.MetatronsCube:
result = [
- (baseHue + 60) % 360,
- (baseHue + 120) % 360,
- (baseHue + 180) % 360,
- (baseHue + 240) % 360,
- (baseHue + 300) % 360,
- (baseHue + 30) % 360,
- (baseHue + 90) % 360,
- (baseHue + 150) % 360,
- (baseHue + 210) % 360,
- (baseHue + 270) % 360,
- (baseHue + 330) % 360,
+ baseHue,
+ Math.abs(baseHue + 60) % 360,
+ Math.abs(baseHue + 120) % 360,
+ Math.abs(baseHue + 180) % 360,
+ Math.abs(baseHue + 240) % 360,
+ Math.abs(baseHue + 300) % 360,
+ Math.abs(baseHue + 30) % 360,
+ Math.abs(baseHue + 90) % 360,
+ Math.abs(baseHue + 150) % 360,
+ Math.abs(baseHue + 210) % 360,
+ Math.abs(baseHue + 270) % 360,
+ Math.abs(baseHue + 330) % 360,
]
break
case ColorScheme.SeedOfLife:
result = [
- (baseHue + 51.4) % 360,
- (baseHue + 102.8) % 360,
- (baseHue + 154.2) % 360,
- (baseHue + 205.6) % 360,
- (baseHue + 257) % 360,
- (baseHue + 308.4) % 360,
+ baseHue,
+ Math.abs(baseHue + 51.4) % 360,
+ Math.abs(baseHue + 102.8) % 360,
+ Math.abs(baseHue + 154.2) % 360,
+ Math.abs(baseHue + 205.6) % 360,
+ Math.abs(baseHue + 257) % 360,
+ Math.abs(baseHue + 308.4) % 360,
]
break
default:
@@ -416,6 +431,7 @@ export function generateAdditionalHues(
return [(baseHue + 120) % 360, (baseHue + 240) % 360]
case ColorScheme.Tetradic:
return [
+ baseHue,
(baseHue + 90) % 360,
(baseHue + 180) % 360,
(baseHue + 270) % 360,
@@ -423,18 +439,29 @@ export function generateAdditionalHues(
case ColorScheme.GoldenRatio:
const goldenRatio = 0.618033988749895
return [
+ baseHue,
(baseHue + 360 * goldenRatio) % 360,
(baseHue + 360 * goldenRatio * 2) % 360,
(baseHue + 360 * goldenRatio * 3) % 360,
+ (baseHue + 360 * goldenRatio * 4) % 360,
+ (baseHue + 360 * goldenRatio * 5) % 360,
+ (baseHue + 360 * goldenRatio * 6) % 360,
]
case ColorScheme.Fibonacci:
return [
- (baseHue + 360 / 13) % 360,
- (baseHue + 360 / 8) % 360,
+ baseHue,
+ (baseHue + 360 / 2) % 360,
+ (baseHue + 360 / 3) % 360,
(baseHue + 360 / 5) % 360,
+ (baseHue + 360 / 8) % 360,
+ (baseHue + 360 / 13) % 360,
+ (baseHue + 360 / 21) % 360,
+ (baseHue + 360 / 34) % 360,
+ (baseHue + 360 / 55) % 360,
]
case ColorScheme.PentagramStar:
return [
+ baseHue,
(baseHue + 72) % 360,
(baseHue + 144) % 360,
(baseHue + 216) % 360,
diff --git a/src/lib/utils/exportTheme.ts b/src/lib/utils/exportTheme.ts
index a8bb39d..5e8e45e 100644
--- a/src/lib/utils/exportTheme.ts
+++ b/src/lib/utils/exportTheme.ts
@@ -988,7 +988,6 @@ export function generateThemeJSON(
{
scope: [
'entity.name.class',
- 'entity.name.type',
'entity.name.type.class',
'entity.other.inherited-class',
'entity.name.fragment.graphql',
@@ -1036,8 +1035,7 @@ export function generateThemeJSON(
},
{
scope: [
- 'source.css',
- 'entity.other.attribute-name.class.css',
+ // "source.css",
'entity.name.variable.parameter',
'meta.selector.css',
'meta.at-rule.function variable',
@@ -1050,11 +1048,13 @@ export function generateThemeJSON(
},
},
{
- scope: [
- 'support',
- 'entity.other.attribute-name.pseudo-class.css',
- 'entity.other.attribute-name.pseudo-element.css',
- ],
+ scope: ['entity.other.attribute-name.class.css'],
+ settings: {
+ foreground: colors.AC1,
+ },
+ },
+ {
+ scope: ['support'],
settings: {
foreground: syntaxColors.support,
// fontStyle: "bold",
@@ -1071,8 +1071,15 @@ export function generateThemeJSON(
foreground: colors.AC1,
},
},
+ {
+ scope: ['entity.name.type'],
+ settings: {
+ foreground: syntaxColors.type,
+ },
+ },
{
scope: [
+ 'entity.name.type.module',
'entity.name.type.type-parameter',
'meta.indexer.mappedtype.declaration entity.name.type',
'meta.type.parameters entity.name.type',
@@ -1082,7 +1089,11 @@ export function generateThemeJSON(
},
},
{
- scope: ['entity.other.attribute-name', 'meta.object-literal.key.js'],
+ scope: [
+ 'entity.other.attribute-name',
+ 'meta.object-literal.key.js',
+ 'entity.other.attribute-name.pseudo-class.css',
+ ],
settings: {
foreground: syntaxColors.attribute,
// fontStyle: "bold",
@@ -1102,7 +1113,7 @@ export function generateThemeJSON(
'source.postcss support.type.property-name',
],
settings: {
- foreground: syntaxColors.property,
+ foreground: colors.AC2,
},
},
@@ -1112,7 +1123,6 @@ export function generateThemeJSON(
{
scope: [
- 'entity.name.type',
'keyword.primitive-datatypes.swift',
'keyword.type.cs',
'meta.protocol-list.objc',
@@ -1281,7 +1291,11 @@ export function generateThemeJSON(
},
},
{
- scope: ['keyword.control.new', 'keyword.operator.new'],
+ scope: [
+ 'keyword.control.new',
+ 'keyword.operator.new',
+ 'keyword.other.important.css',
+ ],
settings: {
foreground: colors.AC2,
// fontStyle: "bold"
@@ -1296,7 +1310,6 @@ export function generateThemeJSON(
},
{
scope: [
- 'keyword.other.important.css',
'keyword.control.flow',
'keyword.control.loop',
'keyword.control.conditional',
@@ -1310,24 +1323,61 @@ export function generateThemeJSON(
// fontStyle: "bold",
},
},
+ {
+ name: 'Tag names in Stylesheets',
+ scope: [
+ 'entity.name.tag.css',
+ 'entity.name.tag.less',
+ 'entity.name.tag.custom.css',
+ ],
+ settings: {
+ foreground: syntaxColors.tag,
+ fontStyle: '',
+ },
+ },
+ {
+ name: 'Wildcard(*) selector in Stylesheets',
+ scope: [
+ 'entity.name.tag.wildcard.css',
+ 'entity.name.tag.wildcard.less',
+ 'entity.name.tag.wildcard.scss',
+ 'entity.name.tag.wildcard.sass',
+ ],
+ settings: {
+ foreground: syntaxColors.tagPunctuation,
+ },
+ },
+ {
+ name: 'Constant property values in Stylesheets',
+ scope: ['support.constant.property-value.css', 'constant.numeric.css'],
+ settings: {
+ foreground: colors.FG2,
+ fontStyle: '',
+ },
+ },
{
scope: ['keyword.control.at-rule.apply.tailwind'],
settings: {
- foreground: syntaxColors.control,
+ foreground: syntaxColors.controlImport,
// fontStyle: "bold",
},
},
{
- scope: ['meta.selector'],
+ scope: ['keyword.control.at-rule.tailwind.tailwind'],
settings: {
- foreground: syntaxColors.selector,
+ foreground: syntaxColors.control,
},
},
-
{
- scope: ['meta.at-rule.apply.tailwind'],
+ scope: ['keyword.control.at-rule.layer.tailwind'],
settings: {
- foreground: syntaxColors.class,
+ foreground: syntaxColors.controlFlow,
+ },
+ },
+ {
+ scope: ['meta.selector'],
+ settings: {
+ foreground: syntaxColors.selector,
},
},
{
@@ -1369,9 +1419,13 @@ export function generateThemeJSON(
},
},
{
- scope: ['punctuation.definition.keyword.css'],
+ scope: [
+ 'punctuation.definition.keyword.css',
+ 'punctuation.section.property-list.begin.bracket.curly.css',
+ 'punctuation.section.property-list.end.bracket.curly.css',
+ ],
settings: {
- foreground: syntaxColors.other,
+ foreground: syntaxColors.punctuation,
// fontStyle: "bold",
},
},
@@ -1500,12 +1554,12 @@ export function generateThemeJSON(
//--------------------------------------------------------------------
// VARIABLES
//--------------------------------------------------------------------
- // {
- // scope: ["variable.parameter"],
- // settings: {
- // foreground: "#99B999"
- // }
- // },
+ {
+ scope: ['variable'],
+ settings: {
+ foreground: syntaxColors.variable,
+ },
+ },
{
scope: ['variable.other.alias.yaml'],
settings: {
@@ -1532,7 +1586,7 @@ export function generateThemeJSON(
},
},
{
- scope: [],
+ scope: ['variable.other.readwrite'],
settings: {
foreground: syntaxColors.variableDeclaration,
},
@@ -1544,7 +1598,6 @@ export function generateThemeJSON(
'meta.export variable.other.readwrite.alias',
'meta.object-binding-pattern-variable variable.object.property',
'meta.variable.assignment.destructured.object.coffee variable',
- 'variable.other.readwrite.js',
'variable.other.constant',
],
settings: {
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index bd0c391..6a780a9 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,6 +1,10 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
+
+export function randomInteger(min: number, max: number) {
+ return Math.floor(Math.random() * (max - min + 1)) + min
+}
diff --git a/src/lib/utils/syntaxColors.ts b/src/lib/utils/syntaxColors.ts
index 3e31406..fb0f96e 100644
--- a/src/lib/utils/syntaxColors.ts
+++ b/src/lib/utils/syntaxColors.ts
@@ -1,3 +1,4 @@
+import { randomInteger } from './index'
import {
adjustCommentColor,
ensureReadability,
@@ -52,6 +53,8 @@ export function generateSyntaxColors(
const baseLightness = isDark ? 70 : 40
const inverseBaseLightness = isDark ? 20 : 90
+ console.log('Syntax Hues: ', schemeHues)
+
const generateColor = (
hueIndex: number,
saturationMultiplier: number = 1,
@@ -71,87 +74,257 @@ export function generateSyntaxColors(
)
)
- if (!forceRegenerate) {
- const randomHueShift = Math.random() * 10 - 5
- const randomSaturationShift = Math.random() * 5 - 2.5
- const randomLightnessShift = Math.random() * 5 - 2.5
+ // if (!forceRegenerate) {
+ // const randomHueShift = Math.random() * 10 - 5
+ // const randomSaturationShift = Math.random() * 5 - 2.5
+ // const randomLightnessShift = Math.random() * 5 - 2.5
- return Color.hsl(
- (hue + randomHueShift + 360) % 360,
- Math.max(0, Math.min(100, saturation + randomSaturationShift)),
- Math.max(0, Math.min(100, lightness + randomLightnessShift))
- ).hex()
- }
+ // return Color.hsl(
+ // (hue + randomHueShift + 360) % 360,
+ // Math.max(0, Math.min(100, saturation + randomSaturationShift)),
+ // Math.max(0, Math.min(100, lightness + randomLightnessShift))
+ // ).hex()
+ // }
return Color.hsl(hue, saturation, lightness).hex()
}
+ const functionHueIndex = randomInteger(0, schemeHues.length - 1)
+ const variableHueIndex = randomInteger(0, schemeHues.length - 1)
+ const typeHueIndex = randomInteger(0, schemeHues.length - 1)
+ const punctuationHueIndex = randomInteger(0, schemeHues.length - 1)
+ const tagHueIndex = randomInteger(0, schemeHues.length - 1)
+ const controlHueIndex = randomInteger(0, schemeHues.length - 1)
+
const syntaxColors: SyntaxColors = {
- keyword: lockedColors.keyword || generateColor(0, 1.1, 5),
- comment: lockedColors.comment || generateColor(1, 0.5, 0, 0, false),
- function: lockedColors.function || generateColor(2, 1.05, 10),
- functionCall: lockedColors.functionCall || generateColor(2, 1, 8),
- variable: lockedColors.variable || generateColor(3, 0.9, 5),
+ keyword:
+ lockedColors.keyword ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.1,
+ randomInteger(0, 13)
+ ),
+ comment:
+ lockedColors.comment ||
+ generateColor(randomInteger(0, schemeHues.length - 1), 0.5, 0, 0, false),
+ function:
+ lockedColors.function ||
+ generateColor(functionHueIndex, 1.05, randomInteger(0, 7)),
+ functionCall:
+ lockedColors.functionCall ||
+ generateColor(
+ functionHueIndex,
+ 1,
+ randomInteger(5, 13),
+ randomInteger(13, 26)
+ ),
+ variable:
+ lockedColors.variable ||
+ generateColor(variableHueIndex, 0.9, randomInteger(0, 3)),
variableDeclaration:
- lockedColors.variableDeclaration || generateColor(3, 0.95, 7),
+ lockedColors.variableDeclaration ||
+ generateColor(
+ variableHueIndex,
+ 0.95,
+ randomInteger(0, 9),
+ randomInteger(13, 26)
+ ),
variableProperty:
- lockedColors.variableProperty || generateColor(3, 0.85, 3),
- type: lockedColors.type || generateColor(1, 1.05, 0),
- typeParameter: lockedColors.typeParameter || generateColor(1, 1, -2),
- constant: lockedColors.constant || generateColor(0, 1.15, 5),
- class: lockedColors.class || generateColor(2, 1.1, 0),
- parameter: lockedColors.parameter || generateColor(1, 0.9, 5),
- property: lockedColors.property || generateColor(3, 0.95, 5),
- operator: lockedColors.operator || generateColor(0, 0.7, 10),
- storage: lockedColors.storage || generateColor(1, 1.05, 0),
- punctuation: lockedColors.punctuation || generateColor(0, 0.5, 15),
+ lockedColors.variableProperty ||
+ generateColor(
+ variableHueIndex,
+ 0.85,
+ randomInteger(0, 6),
+ randomInteger(17, 39)
+ ),
+ type:
+ lockedColors.type ||
+ generateColor(typeHueIndex, 1.05, randomInteger(0, 5)),
+ typeParameter:
+ lockedColors.typeParameter ||
+ generateColor(
+ typeHueIndex,
+ 1,
+ -randomInteger(0, 5),
+ randomInteger(15, 27)
+ ),
+ constant:
+ lockedColors.constant ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.15,
+ randomInteger(0, 9)
+ ),
+ class:
+ lockedColors.class ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.1,
+ randomInteger(0, 3)
+ ),
+ parameter:
+ lockedColors.parameter ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 0.9,
+ randomInteger(0, 7)
+ ),
+ property:
+ lockedColors.property ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 0.95,
+ randomInteger(3, 9)
+ ),
+ operator:
+ lockedColors.operator ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 0.7,
+ randomInteger(0, 13)
+ ),
+ storage:
+ lockedColors.storage ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.05,
+ randomInteger(0, 5)
+ ),
+ punctuation:
+ lockedColors.punctuation ||
+ generateColor(punctuationHueIndex, 0.5, randomInteger(10, 20)),
punctuationQuote:
- lockedColors.punctuationQuote || generateColor(0, 0.45, 17),
+ lockedColors.punctuationQuote ||
+ generateColor(
+ punctuationHueIndex,
+ 0.45,
+ randomInteger(13, 21),
+ randomInteger(9, 17)
+ ),
punctuationBrace:
- lockedColors.punctuationBrace || generateColor(0, 0.55, 12),
+ lockedColors.punctuationBrace ||
+ generateColor(
+ punctuationHueIndex,
+ 0.55,
+ randomInteger(6, 17),
+ randomInteger(13, 21)
+ ),
punctuationComma:
- lockedColors.punctuationComma || generateColor(0, 0.4, 10),
- selector: lockedColors.selector || generateColor(2, 1.05, 0),
- modifier: lockedColors.modifier || generateColor(1, 1, 5),
- other: lockedColors.other || generateColor(3, 1.1, -1),
- language: lockedColors.language || generateColor(0, 1.2, -7),
- control: lockedColors.control || generateColor(2, 1.15, -10),
- controlFlow: lockedColors.controlFlow || generateColor(2, 1.1, -5),
- controlImport: lockedColors.controlImport || generateColor(2, 1.05, -7),
- tag: lockedColors.tag || generateColor(1, 1.1, 5),
- tagPunctuation: lockedColors.tagPunctuation || generateColor(1, 1, 3),
- attribute: lockedColors.attribute || generateColor(3, 0.95, 10),
- support: lockedColors.support || generateColor(0, 1.15, -5),
- unit: lockedColors.unit || generateColor(1, 1.1, -5),
- datetime: lockedColors.datetime || generateColor(3, 1.05, 0),
+ lockedColors.punctuationComma ||
+ generateColor(
+ punctuationHueIndex,
+ 0.4,
+ randomInteger(0, 10),
+ randomInteger(6, 15)
+ ),
+ selector:
+ lockedColors.selector ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.05,
+ randomInteger(0, 7)
+ ),
+ modifier:
+ lockedColors.modifier ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1,
+ randomInteger(0, 5)
+ ),
+ other:
+ lockedColors.other ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.1,
+ -randomInteger(0, 6)
+ ),
+ language:
+ lockedColors.language ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.2,
+ -randomInteger(0, 9)
+ ),
+ control:
+ lockedColors.control ||
+ generateColor(controlHueIndex, 1.15, -randomInteger(0, 13)),
+ controlFlow:
+ lockedColors.controlFlow ||
+ generateColor(
+ controlHueIndex,
+ 1.1,
+ -randomInteger(0, 5),
+ randomInteger(15, 27)
+ ),
+ controlImport:
+ lockedColors.controlImport ||
+ generateColor(
+ controlHueIndex,
+ 1.05,
+ -randomInteger(0, 7),
+ randomInteger(9, 17)
+ ),
+ tag:
+ lockedColors.tag || generateColor(tagHueIndex, 1.1, randomInteger(3, 9)),
+ tagPunctuation:
+ lockedColors.tagPunctuation ||
+ generateColor(tagHueIndex, 1, randomInteger(0, 6), randomInteger(9, 17)),
+ attribute:
+ lockedColors.attribute ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 0.95,
+ randomInteger(0, 10)
+ ),
+ support:
+ lockedColors.support ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.15,
+ -randomInteger(0, 7)
+ ),
+ unit:
+ lockedColors.unit ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.1,
+ -randomInteger(0, 5)
+ ),
+ datetime:
+ lockedColors.datetime ||
+ generateColor(
+ randomInteger(0, schemeHues.length - 1),
+ 1.05,
+ randomInteger(0, 5)
+ ),
}
- // Apply color harmony and blending
- syntaxColors.functionCall = blendColors(
- syntaxColors.function,
- syntaxColors.functionCall,
- 0.3
- )
- syntaxColors.variableProperty = blendColors(
- syntaxColors.variable,
- syntaxColors.property,
- 0.5
- )
- syntaxColors.typeParameter = blendColors(
- syntaxColors.type,
- syntaxColors.parameter,
- 0.5
- )
- syntaxColors.controlFlow = blendColors(
- syntaxColors.control,
- syntaxColors.keyword,
- 0.3
- )
- syntaxColors.controlImport = blendColors(
- syntaxColors.control,
- syntaxColors.keyword,
- 0.6
- )
+ // // Apply color harmony and blending
+ // syntaxColors.functionCall = blendColors(
+ // syntaxColors.function,
+ // syntaxColors.functionCall,
+ // 0.3
+ // )
+ // syntaxColors.variableProperty = blendColors(
+ // syntaxColors.variable,
+ // syntaxColors.property,
+ // 0.5
+ // )
+ // syntaxColors.typeParameter = blendColors(
+ // syntaxColors.type,
+ // syntaxColors.parameter,
+ // 0.5
+ // )
+ // syntaxColors.controlFlow = blendColors(
+ // syntaxColors.control,
+ // syntaxColors.keyword,
+ // 0.3
+ // )
+ // syntaxColors.controlImport = blendColors(
+ // syntaxColors.control,
+ // syntaxColors.keyword,
+ // 0.6
+ // )
// Ensure readability and harmony
Object.keys(syntaxColors).forEach((key) => {
diff --git a/src/lib/utils/themeColors.ts b/src/lib/utils/themeColors.ts
index cd0542e..0041da2 100644
--- a/src/lib/utils/themeColors.ts
+++ b/src/lib/utils/themeColors.ts
@@ -1,3 +1,4 @@
+import { randomInteger } from '.'
import {
ColorScheme,
ThemeGenerationOptions,
@@ -32,21 +33,21 @@ export function generateThemeColors(
): {
colors: ColorAliases
schemeHues: number[]
- ac1Hue: number
- ac2Hue: number
scheme: ColorScheme
} {
const {
isDark,
baseHue = Math.random() * 360,
- uiSaturation = isDark ? 30 : 70,
+ uiSaturation = isDark ? randomInteger(15, 45) : randomInteger(45, 75),
scheme = ColorScheme.Analogous,
} = options
const schemeHues = generateSchemeColors(baseHue, scheme)
- const bgBase = isDark ? 12 : 97
- const fgBase = isDark ? 90 : 10
+ console.log('schemeHues GT: ', schemeHues)
+
+ const bgBase = isDark ? randomInteger(0, 7) : randomInteger(93, 100)
+ const fgBase = isDark ? randomInteger(85, 100) : randomInteger(0, 15)
const generateColor = (
hue: number,
@@ -74,48 +75,64 @@ export function generateThemeColors(
const colors: ColorAliases = {
BG1:
initialColors.BG1 ||
- generateColor(schemeHues[0], uiSaturation * 0.1, bgBase),
+ generateColor(
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
+ uiSaturation * 0.1,
+ isDark ? bgBase + randomInteger(0, 5) : bgBase - randomInteger(0, 2)
+ ),
BG2:
initialColors.BG2 ||
generateColor(
- schemeHues[0],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.15,
- isDark ? bgBase + 3 : bgBase - 3
+ isDark ? bgBase + randomInteger(0, 9) : bgBase - randomInteger(0, 5)
),
BG3:
initialColors.BG3 ||
generateColor(
- schemeHues[0],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.2,
- isDark ? bgBase + 6 : bgBase - 6
+ isDark ? bgBase + randomInteger(0, 13) : bgBase - randomInteger(0, 7)
),
FG1:
initialColors.FG1 ||
- generateColor(schemeHues[0], uiSaturation * 0.05, fgBase),
+ generateColor(
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
+ uiSaturation * 0.45,
+ isDark ? fgBase - randomInteger(0, 7) : fgBase + randomInteger(0, 9)
+ ),
FG2:
initialColors.FG2 ||
generateColor(
- schemeHues[0],
- uiSaturation * 0.1,
- isDark ? fgBase - 15 : fgBase + 15
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
+ uiSaturation * 0.45,
+ isDark ? fgBase - randomInteger(3, 15) : fgBase + randomInteger(3, 15)
),
FG3:
initialColors.FG3 ||
generateColor(
- schemeHues[0],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.05,
- isDark ? bgBase : bgBase
+ isDark ? bgBase + randomInteger(0, 5) : bgBase - randomInteger(0, 5)
),
AC1:
initialColors.AC1 ||
- generateColor(schemeHues[1], uiSaturation * 1.2, isDark ? 60 : 40),
+ generateColor(
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
+ uiSaturation * 1.2,
+ isDark ? 60 : 40
+ ),
AC2:
initialColors.AC2 ||
- generateColor(schemeHues[2], uiSaturation * 1.1, isDark ? 65 : 45),
+ generateColor(
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
+ uiSaturation * 1.1,
+ isDark ? 65 : 45
+ ),
BORDER:
initialColors.BORDER ||
generateColor(
- schemeHues[0],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.2,
isDark ? bgBase + 10 : bgBase - 10
),
@@ -134,7 +151,7 @@ export function generateThemeColors(
initialColors.lineHighlight ||
Color(
generateColor(
- schemeHues[0],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.3,
isDark ? bgBase + 5 : bgBase - 5
)
@@ -143,7 +160,7 @@ export function generateThemeColors(
initialColors.selection ||
Color(
generateColor(
- schemeHues[3],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.4,
isDark ? bgBase + 15 : bgBase - 15
)
@@ -152,7 +169,7 @@ export function generateThemeColors(
initialColors.findMatch ||
Color(
generateColor(
- schemeHues[1],
+ schemeHues[randomInteger(0, schemeHues.length - 1)],
uiSaturation * 0.6,
isDark ? bgBase + 20 : bgBase - 20
)
@@ -183,7 +200,18 @@ export function generateThemeColors(
const ac1Hue = Color(colors.AC1).hue()
const ac2Hue = Color(colors.AC2).hue()
- return { colors, schemeHues, ac1Hue, ac2Hue, scheme }
+ const ac1AdditionalHues = generateSchemeColors(ac1Hue, scheme)
+ const ac2AdditionalHues = generateSchemeColors(ac2Hue, scheme)
+
+ const updatedSchemeHues = [
+ ...schemeHues,
+ ...ac1AdditionalHues,
+ ...ac2AdditionalHues,
+ ]
+
+ console.log('Updated scheme hues: ', updatedSchemeHues)
+
+ return { colors, schemeHues: updatedSchemeHues, scheme }
}
export function updateThemeColorsWithSaturation(