AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: make colors configurable

Browse Source
This commit is contained in:
Mathias Schopmans
2024-03-04 15:16:47 +01:00
committed by Mathias Schopmans
parent f7e36ddc9d
commit e1386c0385
9 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
data/config.json
View File

@@ -1,4 +1,13 @@
{ {
"colors": {
"foreground": "#fff",
"background": "#173d7a",
"content": "#fff",
"text": "#575757",
"highlight": "#029df7",
"border": "rgba(255, 255, 255, 0.1)",
"tag": "rgba(255, 255, 255, 0.1)"
},
"quadrants": [ "quadrants": [
{ {
"id": "languages-and-frameworks", "id": "languages-and-frameworks",

4
src/components/ItemDetail/ItemDetail.module.css
View File

@@ -44,14 +44,14 @@
} }
.content { .content {
background: var(--foreground); background: var(--content);
color: var(--text); color: var(--text);
border-radius: 6px; border-radius: 6px;
padding: 30px 15px; padding: 30px 15px;
} }
.content a { .content a {
color: var(--highlight); color: var(--link);
} }
@media (min-width: 768px) { @media (min-width: 768px) {

2
src/components/Layout/Layout.tsx
View File

@@ -1,5 +1,5 @@
import { Roboto } from "next/font/google"; import { Roboto } from "next/font/google";
import type { FC, ReactNode } from "react"; import { FC, ReactNode } from "react";
import styles from "./Layout.module.css"; import styles from "./Layout.module.css";

2
src/icons/blip_changed.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="12" height="12" x="2" y="2" fill="#FFF" rx="3" transform="rotate(-45 8 8)"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="12" height="12" x="2" y="2" rx="3" transform="rotate(-45 8 8)"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 155 B

After

Width:  |  Height:  |  Size: 143 B

2
src/icons/blip_default.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#FFF"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 107 B

After

Width:  |  Height:  |  Size: 95 B

2
src/icons/blip_new.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="m.247 10.212 5.02-8.697a2 2 0 0 1 3.465 0l5.021 8.697a2 2 0 0 1-1.732 3H1.98a2 2 0 0 1-1.732-3z"/></svg> <svg xmlns="http://www.w3.org/2000/svg"><path d="m.247 10.212 5.02-8.697a2 2 0 0 1 3.465 0l5.021 8.697a2 2 0 0 1-1.732 3H1.98a2 2 0 0 1-1.732-3z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 165 B

After

Width:  |  Height:  |  Size: 153 B

4
src/lib/data.ts
View File

@@ -15,6 +15,10 @@ export function getChartConfig() {
return config.chart; return config.chart;
} }
export function getColors() {
return config.colors;
}
export function getFlags() { export function getFlags() {
return config.flags; return config.flags;
} }

16
src/pages/_document.tsx
View File

@@ -1,8 +1,22 @@
import { Head, Html, Main, NextScript } from "next/document"; import { Head, Html, Main, NextScript } from "next/document";
import { CSSProperties, useMemo } from "react";
import { getColors } from "@/lib/data";
export default function Document() { export default function Document() {
const style = useMemo(() => {
const cssVariables: Record<string, any> = {};
const colors = getColors();
Object.entries(colors).forEach(([key, value]) => {
cssVariables[`--${key}`] = value;
});
return cssVariables as CSSProperties;
}, []);
return ( return (
<Html lang="en"> <Html lang="en" style={style}>
<Head /> <Head />
<body> <body>
<Main /> <Main />

7
src/styles/globals.css
View File

@@ -7,15 +7,12 @@
--foreground: #fff; --foreground: #fff;
--background: #173d7a; --background: #173d7a;
--content: #fff;
--text: #575757; --text: #575757;
--link: #029df7;
--highlight: #029df7; --highlight: #029df7;
--border: rgba(255, 255, 255, 0.1); --border: rgba(255, 255, 255, 0.1);
--tag: rgba(255, 255, 255, 0.1); --tag: rgba(255, 255, 255, 0.1);
--overlay: #081a37b5;
--dialog-bg: #173d7a;
--badge: #333; /* local color which get's overridden by the element */
} }
* { * {