Skip to content

Commit

Permalink
fuck around with colors a little
Browse files Browse the repository at this point in the history
  • Loading branch information
@sphinxrave
sphinxrave committed Jul 13, 2023
1 parent d4ea5a8 commit ed4c6b6
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 46 deletions.
2 changes: 1 addition & 1 deletion packages/vue3/src/components/core/HDivider.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div
class="my-0 h-0 w-full overflow-clip border-t border-solid border-bgColor-50"
class="my-0 h-0 w-full overflow-clip border-t border-solid border-bgColor-300"
/>
</template>
25 changes: 15 additions & 10 deletions packages/vue3/src/hooks/theme-changer/daisy-utils/daisy-color-fns.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
// import Color from "color";
import { colord, extend, Colord, HslaColor } from "colord";
import mixPlugin from "colord/plugins/mix";
extend([mixPlugin]);
import harmonies from "colord/plugins/harmonies";

extend([mixPlugin, harmonies]);
import { DaisyColorConfig, DaisyColorShorthand } from "./daisy-types";

const colorNames: Record<string, string> = {
Expand Down Expand Up @@ -82,8 +84,8 @@ export function getForegroundColor(color: string | Colord, percentage = 0.8) {
// Feel free to change these values, idk what I'm doing
const darken_variants: any = {
// first value is lightness change from default (400), second value is saturation change from default.
"-950": [-0.8, -0.02], // darker
"-900": [-0.75, -0.06],
"-950": [-0.9, -0.02], // darker
"-900": [-0.8, -0.06],
"-800": [-0.6, -0.12],
"-700": [-0.45, -0.18],
"-600": [-0.3, -0.24],
Expand All @@ -103,9 +105,9 @@ const lighten_variants: any = {
"-500": [0.15, -0.3],
"-400": [0, 0],
"-300": [-0.15, -0.06],
"-200": [-0.3, -0.12],
"-100": [-0.45, -0.18],
"-50": [-0.6, -0.24], // darker
"-200": [-0.3, 0.12],
"-100": [-0.4, 0.18],
"-50": [-0.5, 0.24], // darker
};

const generateVariants = function (
Expand All @@ -114,21 +116,24 @@ const generateVariants = function (
darkMode = true,
// primaryColor?: Color,
): Record<string, string> {
console.log(color.brightness());
console.log("prefix", prefix);
const toCol = (color2: Colord, r1: number, s1: number) => {
const c = color2[r1 > 0 ? "lighten" : "darken"](Math.abs(r1))
const c = color2
.mix(r1 > 0 ? "#fff" : "#000", Math.abs(r1))
.saturate(s1)
.toHsl();
return formatHSL(c);
};

// const shades = [...color.shades(5), color, ...color.tints(5)];
// console.log(shades);
const out: Record<string, string> = {};
const variants = darkMode ? darken_variants : lighten_variants;
for (const i in variants) {
// standard variation
out[prefix + i] = toCol(color, variants[i][0], variants[i][1]);
// if(prefix == '--b1') {
// out[prefix + i] =
// }
if (prefix == "--b1") out[prefix + i] = toCol(color, variants[i][0], 0);
}
return out;
};
Expand Down
4 changes: 2 additions & 2 deletions packages/vue3/src/hooks/theme-changer/presets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const presets: Theme[] = [
colors: {
"base-100": "#222222",
primary: "#F06292",
neutral: "#070a13",
neutral: "#dea7d3",
secondary: "#3b88d5",
accent: "#F03284",
error: "#B00020",
Expand All @@ -22,7 +22,7 @@ export const presets: Theme[] = [
colors: {
"base-100": "#222222",
primary: "#62B2F0",
neutral: "#758799",
neutral: "#00b0ff",
secondary: "#3BD5C4",
accent: "#082DB6",
error: "#B00020",
Expand Down
86 changes: 53 additions & 33 deletions packages/vue3/src/views/settings/ThemeSettings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,44 +81,59 @@
<div
class="grid gap-2"
:style="{
'grid-template-columns': 'repeat(auto-fill, minmax(250px, 1fr))',
'grid-template-columns': 'repeat(auto-fill, minmax(200px, 1fr))',
}"
>
<div class="btn-group">
<div class="btn-xs btn bg-primary-700">700</div>
<div class="btn-xs btn bg-primary-600" />
<div class="btn-xs btn bg-primary-500" />
<div class="btn-xs btn bg-primary" />
<div class="btn-xs btn bg-primary-300" />
<div class="btn-xs btn bg-primary-200" />
<div class="btn-xs btn bg-primary-100">100</div>
<div class="flex flex-row gap-1">
<div class="demobox bg-primary-900" title="900" />
<div class="demobox bg-primary-800" title="800" />
<div class="demobox bg-primary-700" title="700" />
<div class="demobox bg-primary-600" title="600" />
<div class="demobox bg-primary-500" title="500" />
<div class="demobox bg-primary !w-8" title="400 (default)" />
<div class="demobox bg-primary-300" title="300" />
<div class="demobox bg-primary-200" title="200" />
<div class="demobox bg-primary-100" title="100" />
<div class="demobox bg-primary-50" title="50" />
</div>
<div class="flex flex-row gap-1">
<div class="demobox bg-secondary-900" title="900" />
<div class="demobox bg-secondary-800" title="800" />
<div class="demobox bg-secondary-700" title="700" />
<div class="demobox bg-secondary-600" title="600" />
<div class="demobox bg-secondary-500" title="500" />
<div class="demobox bg-secondary !w-8" title="400 (default)" />
<div class="demobox bg-secondary-300" title="300" />
<div class="demobox bg-secondary-200" title="200" />
<div class="demobox bg-secondary-100" title="100" />
<div class="demobox bg-secondary-50" title="50" />
</div>
<div class="btn-group">
<div class="btn-xs btn bg-secondary-700">700</div>
<div class="btn-xs btn bg-secondary-600" />
<div class="btn-xs btn bg-secondary-500" />
<div class="btn-xs btn bg-secondary" />
<div class="btn-xs btn bg-secondary-300" />
<div class="btn-xs btn bg-secondary-200" />
<div class="btn-xs btn bg-secondary-100">100</div>
<div class="flex flex-row gap-1">
<div class="demobox bg-accent-900" title="900" />
<div class="demobox bg-accent-800" title="800" />
<div class="demobox bg-accent-700" title="700" />
<div class="demobox bg-accent-600" title="600" />
<div class="demobox bg-accent-500" title="500" />
<div class="demobox bg-accent !w-8" title="400 (default)" />
<div class="demobox bg-accent-300" title="300" />
<div class="demobox bg-accent-200" title="200" />
<div class="demobox bg-accent-100" title="100" />
<div class="demobox bg-accent-50" title="50" />
</div>
<div class="btn-group">
<div class="btn-xs btn bg-accent-700">700</div>
<div class="btn-xs btn bg-accent-600" />
<div class="btn-xs btn bg-accent-500" />
<div class="btn-xs btn bg-accent" />
<div class="btn-xs btn bg-accent-300" />
<div class="btn-xs btn bg-accent-200" />
<div class="btn-xs btn bg-accent-100">100</div>
<div class="flex flex-row gap-1">
<div class="demobox bg-neutral !w-full" title="400 (default)" />
</div>
<div class="btn-group">
<div class="btn-xs btn bg-bgColor-700">700</div>
<div class="btn-xs btn bg-bgColor-600" />
<div class="btn-xs btn bg-bgColor-500" />
<div class="btn-xs btn bg-bgColor-400" />
<div class="btn-xs btn bg-bgColor-300" />
<div class="btn-xs btn bg-bgColor-200" />
<div class="btn-xs btn bg-bgColor-100">100</div>
<div class="flex flex-row gap-1">
<div class="demobox bg-bgColor-900" title="900" />
<div class="demobox bg-bgColor-800" title="800" />
<div class="demobox bg-bgColor-700" title="700" />
<div class="demobox bg-bgColor-600" title="600" />
<div class="demobox bg-bgColor-500" title="500" />
<div class="demobox bg-bgColor !w-8" title="400 (default)" />
<div class="demobox bg-bgColor-300" title="300" />
<div class="demobox bg-bgColor-200" title="200" />
<div class="demobox bg-bgColor-100" title="100" />
<div class="demobox bg-bgColor-50" title="50" />
</div>
</div>
</template>
Expand Down Expand Up @@ -166,6 +181,7 @@ export default defineComponent({
return {
presets,
colors,
gradients: ["primary", "secondary", "accent", "neutral", "bgColor"],
};
},
computed: {
Expand Down Expand Up @@ -207,4 +223,8 @@ label.label {
label.label:nth-child(even) {
@apply rounded bg-bgColor-500;
}
.demobox {
@apply h-4 w-4 rounded border border-gray-500;
}
</style>

0 comments on commit ed4c6b6

Please sign in to comment.