-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(app): ♻️ refactor code and assets
- Loading branch information
Showing
18 changed files
with
1,893 additions
and
906 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| import { Squircle } from "@squircle-js/react"; | ||
| import { t } from "lib"; | ||
|
|
||
| interface IBox { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,25 @@ | ||
| import { Squircle } from "@squircle-js/react"; | ||
| import { PropsWithChildren } from "react"; | ||
|
|
||
| interface IButton { | ||
| onClick: () => void; | ||
| } | ||
|
|
||
|
|
||
| export default function Button(props: PropsWithChildren<IButton>) { | ||
| const { children, onClick } = props; | ||
| return ( | ||
| <button | ||
| className="border-none bg-brand-100 hover:bg-brand-200 dark:bg-black-800 hover:dark:bg-black-600 p-2 rounded-xl transition duration-700 ease-in-out" | ||
| onClick={onClick} | ||
| <Squircle | ||
| cornerRadius={10} | ||
| cornerSmoothing={1} | ||
| className="p-4 bg-black text-white" | ||
| > | ||
| {children} | ||
| </button> | ||
| ); | ||
| <button | ||
| className="border-none bg-brand-100 hover:bg-brand-200 dark:bg-black-800 hover:dark:bg-black-600 p-2 rounded-xl transition duration-700 ease-in-out" | ||
| onClick={onClick} | ||
| > | ||
| {children} | ||
| </button> | ||
| </Squircle> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export declare const shades: number[] | ||
|
|
||
| export function makeVariable(args: { | ||
| fallbackValue?: string | ||
| name: string | ||
| shade: number | string | ||
| withVar?: boolean | ||
| }): string |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export const shades = [ | ||
| 50, | ||
| ...Array.from({length: 9}).map((_, i) => (i + 1) * 100), | ||
| 950, | ||
| ] | ||
|
|
||
| export const makeVariable = ({fallbackValue, name, shade, withVar}) => { | ||
| const variable = `--${name}-${shade}` | ||
| const value = fallbackValue ? variable + ', ' + fallbackValue : variable | ||
| return withVar ? `var(${value})` : variable | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { | ||
| // @ts-expect-error Old typings for this module | ||
| toGamut as _toGamut, | ||
| Color, | ||
| Oklch, | ||
| converter, | ||
| differenceEuclidean, | ||
| } from 'culori' | ||
|
|
||
| import {makeVariable, shades} from './common' | ||
|
|
||
| const toGamut = _toGamut as (...args: unknown[]) => (color: string) => Color | ||
|
|
||
| /** | ||
| * A map of CSS varable name to color | ||
| */ | ||
| type SingleVariable = [string, string] | ||
|
|
||
| export function getVariables({ | ||
| baseName, | ||
| hue, | ||
| mode = 'consistent', | ||
| }: { | ||
| baseName: string | ||
| hue: number | ||
| mode?: 'bright' | 'consistent' | ||
| }): SingleVariable[] { | ||
| const calculator = mode === 'bright' ? highestChroma : consistentChroma | ||
| return shades.map((shade, shadeIndex) => [ | ||
| makeVariable({name: baseName, shade}), | ||
| calculator(shadeIndex, hue), | ||
| ]) | ||
| } | ||
|
|
||
| export function updateVariables(variables: SingleVariable[], el?: HTMLElement) { | ||
| const target = el ?? document.documentElement | ||
|
|
||
| for (const [varName, value] of variables) { | ||
| target.style.setProperty(varName, value + '') | ||
| } | ||
| } | ||
|
|
||
| const lightnessForShade = (shade: number) => { | ||
| const highestL = 89 | ||
| const lowestL = 13 | ||
| const diffL = highestL - lowestL | ||
|
|
||
| const shadeDiff = shades[shades.length - 1] - shades[0] | ||
|
|
||
| // Maintaining the proximity of colors with a step of 50 and 100 | ||
| const multiplier = shade / shadeDiff | ||
|
|
||
| return (lowestL + (highestL - diffL * multiplier)) / 100 | ||
| } | ||
| const lightness = shades.map(lightnessForShade) | ||
|
|
||
| export const highestChroma = (shadeIndex: number, hue: number) => { | ||
| const oklch = converter('oklch') | ||
|
|
||
| // Setting an obsurdly high chroma | ||
| const color = `oklch(${lightness[shadeIndex]} 0.4 ${hue})` | ||
|
|
||
| // Clamping it to the highest chroma possible | ||
| return serializeColor( | ||
| oklch(toGamut('p3', 'oklch', differenceEuclidean('oklch'), 0)(color)) | ||
| ) | ||
| } | ||
|
|
||
| export const consistentChroma = (i: number, hue: number) => { | ||
| const oklch = converter('oklch') | ||
|
|
||
| // Using a pinned chroma | ||
| const color = `oklch(${lightness[i]} ${chromaData[i]} ${hue})` | ||
|
|
||
| return serializeColor( | ||
| oklch(toGamut('p3', 'oklch', differenceEuclidean('oklch'), 0)(color)) | ||
| ) | ||
| } | ||
|
|
||
| const chromaData: Record<number, number> = { | ||
| 0: 0.0114, | ||
| 1: 0.0331, | ||
| 2: 0.0774, | ||
| 3: 0.1275, | ||
| 4: 0.1547, | ||
| 5: 0.1355, | ||
| 6: 0.1164, | ||
| 7: 0.0974, | ||
| 8: 0.0782, | ||
| 9: 0.0588, | ||
| 10: 0.0491, | ||
| } | ||
|
|
||
| const serializeColor = (c: Oklch): string => | ||
| `${c.l.toFixed(3)} ${c.c.toFixed(3)} ${c.h?.toFixed(3)}` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import {makeVariable, shades} from './common' | ||
| import {consistentChroma} from './runtime' | ||
|
|
||
| export function dynamicTwClasses(baseName, baseHue) { | ||
| return Object.fromEntries( | ||
| shades.map((shade, i) => { | ||
| const color = consistentChroma(i, baseHue) | ||
|
|
||
| return [ | ||
| shade, | ||
| `oklch(${makeVariable({ | ||
| fallbackValue: color, | ||
| name: baseName, | ||
| shade, | ||
| withVar: true, | ||
| })} / <alpha-value>)`, | ||
| ] | ||
| }) | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.