mirror of https://github.com/hrfee/jfa-go
instead of adding dark: variants to each element, a preprocessor script adds them. still needs to be implemented to typescript.tailwind
Harvey Tindall
3 years ago
parent
57e6469564
commit
18ae03554f
@ -0,0 +1,351 @@
|
||||
var c = {
|
||||
inherit: 'inherit',
|
||||
current: 'currentColor',
|
||||
transparent: 'transparent',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
d_neutral: {
|
||||
900: "rgba(255, 255, 255, 0.87)",
|
||||
800: "rgba(255, 255, 255, 0.8)",
|
||||
700: "rgba(255, 255, 255, 0.73)",
|
||||
600: "rgba(255, 255, 255, 0.66)",
|
||||
500: "rgb(153, 153, 153)",
|
||||
400: "#383838",
|
||||
300: "#303030",
|
||||
200: "#292929",
|
||||
100: "#242424",
|
||||
50: "#202020",
|
||||
000: "#101010"
|
||||
},
|
||||
d_critical: {
|
||||
900: "#fef2f2",
|
||||
800: "#fee2e2",
|
||||
700: "#fecaca",
|
||||
600: "#fca5a5",
|
||||
500: "#f87171",
|
||||
400: "#ef4444",
|
||||
300: "#dc2626",
|
||||
200: "#b91c1c",
|
||||
100: "#991b1b",
|
||||
50: "#7f1d1d",
|
||||
000: "#441313"
|
||||
},
|
||||
d_warning: {
|
||||
900: "#fffbeb",
|
||||
800: "#fef3c7",
|
||||
700: "#fde68a",
|
||||
600: "#fcd34d",
|
||||
500: "#fbbf24",
|
||||
400: "#f59e0b",
|
||||
300: "#d97706",
|
||||
200: "#b45309",
|
||||
100: "#92400e",
|
||||
50: "#783900",
|
||||
000: "#411e01"
|
||||
},
|
||||
d_positive: {
|
||||
900: "#f0fdf4",
|
||||
800: "#dcfce7",
|
||||
700: "#bbf7d0",
|
||||
600: "#86efac",
|
||||
500: "#4ade80",
|
||||
400: "#22c55e",
|
||||
300: "#16a34a",
|
||||
200: "#15803d",
|
||||
100: "#166534",
|
||||
50: "#14532d",
|
||||
000: "#0f2e1b"
|
||||
},
|
||||
d_urge: {
|
||||
900: "#e0ffff",
|
||||
800: "#c0fbff",
|
||||
700: "#a0f4ff",
|
||||
600: "#80e9ff",
|
||||
500: "#60dbfb",
|
||||
400: "#40cbf3",
|
||||
300: "#20b9e9",
|
||||
200: "#00a4dc",
|
||||
100: "#0054bc",
|
||||
50: "#00169a",
|
||||
000: "#050076"
|
||||
},
|
||||
d_info: {
|
||||
900: "#f5f3ff",
|
||||
800: "#ede9fe",
|
||||
700: "#ddd6fe",
|
||||
600: "#c4b5fd",
|
||||
500: "#a78bfa",
|
||||
400: "#8b5cf6",
|
||||
300: "#7c3aed",
|
||||
200: "#6d28d9",
|
||||
100: "#5b21b6",
|
||||
50: "#4c1d95",
|
||||
000: "#240e44"
|
||||
},
|
||||
slate: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a'
|
||||
},
|
||||
gray: {
|
||||
50: '#f9fafb',
|
||||
100: '#f3f4f6',
|
||||
200: '#e5e7eb',
|
||||
300: '#d1d5db',
|
||||
400: '#9ca3af',
|
||||
500: '#6b7280',
|
||||
600: '#4b5563',
|
||||
700: '#374151',
|
||||
800: '#1f2937',
|
||||
900: '#111827'
|
||||
},
|
||||
zinc: {
|
||||
50: '#fafafa',
|
||||
100: '#f4f4f5',
|
||||
200: '#e4e4e7',
|
||||
300: '#d4d4d8',
|
||||
400: '#a1a1aa',
|
||||
500: '#71717a',
|
||||
600: '#52525b',
|
||||
700: '#3f3f46',
|
||||
800: '#27272a',
|
||||
900: '#18181b'
|
||||
},
|
||||
neutral: {
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5',
|
||||
200: '#e5e5e5',
|
||||
300: '#d4d4d4',
|
||||
400: '#a3a3a3',
|
||||
500: '#737373',
|
||||
600: '#525252',
|
||||
700: '#404040',
|
||||
800: '#262626',
|
||||
900: '#171717'
|
||||
},
|
||||
stone: {
|
||||
50: '#fafaf9',
|
||||
100: '#f5f5f4',
|
||||
200: '#e7e5e4',
|
||||
300: '#d6d3d1',
|
||||
400: '#a8a29e',
|
||||
500: '#78716c',
|
||||
600: '#57534e',
|
||||
700: '#44403c',
|
||||
800: '#292524',
|
||||
900: '#1c1917'
|
||||
},
|
||||
red: {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d'
|
||||
},
|
||||
orange: {
|
||||
50: '#fff7ed',
|
||||
100: '#ffedd5',
|
||||
200: '#fed7aa',
|
||||
300: '#fdba74',
|
||||
400: '#fb923c',
|
||||
500: '#f97316',
|
||||
600: '#ea580c',
|
||||
700: '#c2410c',
|
||||
800: '#9a3412',
|
||||
900: '#7c2d12'
|
||||
},
|
||||
amber: {
|
||||
50: '#fffbeb',
|
||||
100: '#fef3c7',
|
||||
200: '#fde68a',
|
||||
300: '#fcd34d',
|
||||
400: '#fbbf24',
|
||||
500: '#f59e0b',
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
800: '#92400e',
|
||||
900: '#78350f'
|
||||
},
|
||||
yellow: {
|
||||
50: '#fefce8',
|
||||
100: '#fef9c3',
|
||||
200: '#fef08a',
|
||||
300: '#fde047',
|
||||
400: '#facc15',
|
||||
500: '#eab308',
|
||||
600: '#ca8a04',
|
||||
700: '#a16207',
|
||||
800: '#854d0e',
|
||||
900: '#713f12'
|
||||
},
|
||||
lime: {
|
||||
50: '#f7fee7',
|
||||
100: '#ecfccb',
|
||||
200: '#d9f99d',
|
||||
300: '#bef264',
|
||||
400: '#a3e635',
|
||||
500: '#84cc16',
|
||||
600: '#65a30d',
|
||||
700: '#4d7c0f',
|
||||
800: '#3f6212',
|
||||
900: '#365314'
|
||||
},
|
||||
green: {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
800: '#166534',
|
||||
900: '#14532d'
|
||||
},
|
||||
emerald: {
|
||||
50: '#ecfdf5',
|
||||
100: '#d1fae5',
|
||||
200: '#a7f3d0',
|
||||
300: '#6ee7b7',
|
||||
400: '#34d399',
|
||||
500: '#10b981',
|
||||
600: '#059669',
|
||||
700: '#047857',
|
||||
800: '#065f46',
|
||||
900: '#064e3b'
|
||||
},
|
||||
teal: {
|
||||
50: '#f0fdfa',
|
||||
100: '#ccfbf1',
|
||||
200: '#99f6e4',
|
||||
300: '#5eead4',
|
||||
400: '#2dd4bf',
|
||||
500: '#14b8a6',
|
||||
600: '#0d9488',
|
||||
700: '#0f766e',
|
||||
800: '#115e59',
|
||||
900: '#134e4a'
|
||||
},
|
||||
cyan: {
|
||||
50: '#ecfeff',
|
||||
100: '#cffafe',
|
||||
200: '#a5f3fc',
|
||||
300: '#67e8f9',
|
||||
400: '#22d3ee',
|
||||
500: '#06b6d4',
|
||||
600: '#0891b2',
|
||||
700: '#0e7490',
|
||||
800: '#155e75',
|
||||
900: '#164e63'
|
||||
},
|
||||
sky: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e'
|
||||
},
|
||||
blue: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a'
|
||||
},
|
||||
indigo: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81'
|
||||
},
|
||||
violet: {
|
||||
50: '#f5f3ff',
|
||||
100: '#ede9fe',
|
||||
200: '#ddd6fe',
|
||||
300: '#c4b5fd',
|
||||
400: '#a78bfa',
|
||||
500: '#8b5cf6',
|
||||
600: '#7c3aed',
|
||||
700: '#6d28d9',
|
||||
800: '#5b21b6',
|
||||
900: '#4c1d95'
|
||||
},
|
||||
purple: {
|
||||
50: '#faf5ff',
|
||||
100: '#f3e8ff',
|
||||
200: '#e9d5ff',
|
||||
300: '#d8b4fe',
|
||||
400: '#c084fc',
|
||||
500: '#a855f7',
|
||||
600: '#9333ea',
|
||||
700: '#7e22ce',
|
||||
800: '#6b21a8',
|
||||
900: '#581c87'
|
||||
},
|
||||
fuchsia: {
|
||||
50: '#fdf4ff',
|
||||
100: '#fae8ff',
|
||||
200: '#f5d0fe',
|
||||
300: '#f0abfc',
|
||||
400: '#e879f9',
|
||||
500: '#d946ef',
|
||||
600: '#c026d3',
|
||||
700: '#a21caf',
|
||||
800: '#86198f',
|
||||
900: '#701a75'
|
||||
},
|
||||
pink: {
|
||||
50: '#fdf2f8',
|
||||
100: '#fce7f3',
|
||||
200: '#fbcfe8',
|
||||
300: '#f9a8d4',
|
||||
400: '#f472b6',
|
||||
500: '#ec4899',
|
||||
600: '#db2777',
|
||||
700: '#be185d',
|
||||
800: '#9d174d',
|
||||
900: '#831843'
|
||||
},
|
||||
rose: {
|
||||
50: '#fff1f2',
|
||||
100: '#ffe4e6',
|
||||
200: '#fecdd3',
|
||||
300: '#fda4af',
|
||||
400: '#fb7185',
|
||||
500: '#f43f5e',
|
||||
600: '#e11d48',
|
||||
700: '#be123c',
|
||||
800: '#9f1239',
|
||||
900: '#881337'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = c;
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,7 @@
|
||||
#!/bin/bash
|
||||
|
||||
for f in $1/*.html; do
|
||||
for color in neutral positive urge warning info critical; do
|
||||
sed -i "s/~${color}/~${color} dark:~d_${color}/g" $f
|
||||
done
|
||||
done
|
||||
@ -0,0 +1,26 @@
|
||||
let colors = require("tailwindcss/colors")
|
||||
let dark = require("./css/dark");
|
||||
|
||||
module.exports = {
|
||||
content: ["./data/html/*.html", "./build/data/html/*.html", "./ts/*.ts", "./ts/modules/*.ts"],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
neutral: colors.slate,
|
||||
positive: colors.green,
|
||||
urge: colors.violet,
|
||||
warning: colors.yellow,
|
||||
info: colors.blue,
|
||||
critical: colors.red,
|
||||
d_neutral: dark.d_neutral,
|
||||
d_positive: dark.d_positive,
|
||||
d_urge: dark.d_urge,
|
||||
d_warning: dark.d_warning,
|
||||
d_info: dark.d_info,
|
||||
d_critical: dark.d_critical
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [require("a17t")],
|
||||
}
|
||||
@ -1,19 +1,19 @@
|
||||
export function toggleTheme() {
|
||||
document.documentElement.classList.toggle('dark-theme');
|
||||
document.documentElement.classList.toggle('light-theme');
|
||||
localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? "dark" : "light");
|
||||
document.documentElement.classList.toggle('dark');
|
||||
document.documentElement.classList.toggle('light');
|
||||
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
|
||||
}
|
||||
|
||||
export function loadTheme() {
|
||||
const theme = localStorage.getItem("theme");
|
||||
if (theme == "dark") {
|
||||
document.documentElement.classList.add('dark-theme');
|
||||
document.documentElement.classList.remove('light-theme');
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
} else if (theme == "light") {
|
||||
document.documentElement.classList.add('light-theme');
|
||||
document.documentElement.classList.remove('dark-theme');
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
|
||||
document.documentElement.classList.add('dark-theme');
|
||||
document.documentElement.classList.remove('light-theme');
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue