Styling and usability fixes
This commit is contained in:
@@ -4,7 +4,7 @@ import hsl2rgb from "pure-color/convert/hsl2rgb";
|
||||
import rgb2hex from "pure-color/convert/rgb2hex";
|
||||
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
|
||||
|
||||
const text_contrast = 75
|
||||
const text_contrast = 80
|
||||
const body_alpha = 0.9
|
||||
|
||||
type Style = {
|
||||
@@ -116,9 +116,9 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
|
||||
|
||||
const add_contrast = (color: string, amt: number) => {
|
||||
let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
|
||||
// If the lightness is less than 30 it is considered a dark colour. This
|
||||
// threshold is 30 instead of 50 because overall dark text is more legible
|
||||
if (hsl[2] < 30) {
|
||||
// If the lightness is less than 40 it is considered a dark colour. This
|
||||
// threshold is 40 instead of 50 because overall dark text is more legible
|
||||
if (hsl[2] < 40) {
|
||||
hsl[2] = hsl[2] + amt // Dark color, add lightness
|
||||
} else {
|
||||
hsl[2] = hsl[2] - amt // Light color, remove lightness
|
||||
|
||||
Reference in New Issue
Block a user