start work on the overlay theme system

This commit is contained in:
core 2025-03-14 23:52:40 -04:00
parent 9d52414e1c
commit 664809b3ad
Signed by: core
GPG key ID: FDBF740DADDCEECF
13 changed files with 613 additions and 4 deletions

1
Cargo.lock generated
View file

@ -5244,6 +5244,7 @@ dependencies = [
"nalgebra-glm",
"poll-promise",
"serde",
"toml",
"tracing",
"tracing-subscriber",
"tracing-web",

View file

@ -16,6 +16,7 @@ image = "0.25"
bytemuck = "1.22"
nalgebra-glm = "0.19"
serde = { version = "1", features = ["derive"] }
toml = "0.8"
[target.'cfg(target_arch = "wasm32")'.dependencies]
tracing-web = "0.1"

View file

@ -94,7 +94,7 @@
}
}
</style>
<link rel="modulepreload" href="/wxbox-client-40d7f27bc801e5b5.js" crossorigin="anonymous" integrity="sha384-oYA73N98ZvnrEW7rteu1EMRcA53r0xqE9v6V6ZanQxVf7/BiI4bPBBy2yweJVrxA"><link rel="preload" href="/wxbox-client-40d7f27bc801e5b5_bg.wasm" crossorigin="anonymous" integrity="sha384-aSt+2C6Y+rSmNQnRCHLsU1cgWsKdpolGpCdrwQORLiy2sn0z44b3buaTImC+y05j" as="fetch" type="application/wasm"></head>
<link rel="modulepreload" href="/wxbox-client-4effb42822f9eb2b.js" crossorigin="anonymous" integrity="sha384-oYA73N98ZvnrEW7rteu1EMRcA53r0xqE9v6V6ZanQxVf7/BiI4bPBBy2yweJVrxA"><link rel="preload" href="/wxbox-client-4effb42822f9eb2b_bg.wasm" crossorigin="anonymous" integrity="sha384-aSt+2C6Y+rSmNQnRCHLsU1cgWsKdpolGpCdrwQORLiy2sn0z44b3buaTImC+y05j" as="fetch" type="application/wasm"></head>
<body>
<!-- The WASM code will resize the canvas dynamically -->
@ -111,8 +111,8 @@
<script type="module">
import init, * as bindings from '/wxbox-client-40d7f27bc801e5b5.js';
const wasm = await init({ module_or_path: '/wxbox-client-40d7f27bc801e5b5_bg.wasm' });
import init, * as bindings from '/wxbox-client-4effb42822f9eb2b.js';
const wasm = await init({ module_or_path: '/wxbox-client-4effb42822f9eb2b_bg.wasm' });
window.wasmBindings = bindings;

View file

@ -7,11 +7,12 @@ use crate::map::sources::baselayers::BASELAYER_OSM;
use crate::map::tiles::LayerManager;
use crate::ui::layer_selector::{LayerSelector};
use crate::ui::set_ui;
use crate::ui::tokens::DesignTokens;
#[derive(Serialize, Deserialize)]
pub struct App {
map: Map,
layer_selector: LayerSelector
layer_selector: LayerSelector,
}
impl App {

View file

@ -1,3 +1,7 @@
use egui::Theme;
use tracing::debug;
use wxbox_client::ui::tokens::DESIGN_TOKENS;
#[cfg(not(target_arch = "wasm32"))]
fn main() -> eframe::Result {
tracing_subscriber::fmt::init();
@ -8,6 +12,9 @@ fn main() -> eframe::Result {
..Default::default()
};
debug!("{:?}", DESIGN_TOKENS.get_color("colors.accent.1", Theme::Dark));
debug!("{:?}", DESIGN_TOKENS.get_color("colors.accent.1", Theme::Light));
eframe::run_native(
"wxbox",
native_options,

View file

@ -0,0 +1,18 @@
import colors from "@radix-ui/colors";
const regexNumber = /([0-9]+)/;
console.log("# This section enerated by generate_color_tokens.ts. DO NOT EDIT");
for (let color of ["gray", "mauve", "slate", "sage", "olive", "sand", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "bronze", "gold", "brown", "orange", "amber", "yellow", "lime", "mint", "sky"]) {
console.log(`[colors.${color}]`);
for (let i = 1; i <= 12; i++) {
let dark = colors[`${color}Dark`][`${color}${i}`];
let light = colors[`${color}`][`${color}${i}`];
console.log(`${i} = { dark = "${dark}", light = "${light}" }`);
}
}
console.log("# end of generated tokens");

View file

@ -0,0 +1 @@
{"dependencies": {}}

View file

@ -0,0 +1,11 @@
# Theme overlay file
# This file will be "overlayed" upon tokens.toml to produce the final set of tokens available to the UI system
# You MUST NOT edit tokens.toml directly. Try to stay within the design system wherever possible.
# Use this file to create helpful aliases or, if absolutely needed, override a single token.
# To alias something from tokens.toml, use @alias $full.path.from.root.to.desired.thing
# for example:
# colors.accent = "@alias $colors.blue"
[colors]
# https://www.radix-ui.com/colors
accent = "@alias $colors.blue"

View file

@ -0,0 +1,405 @@
# This section enerated by generate_color_tokens.ts. DO NOT EDIT
[colors.gray]
1 = { dark = "#111111", light = "#fcfcfc" }
2 = { dark = "#191919", light = "#f9f9f9" }
3 = { dark = "#222222", light = "#f0f0f0" }
4 = { dark = "#2a2a2a", light = "#e8e8e8" }
5 = { dark = "#313131", light = "#e0e0e0" }
6 = { dark = "#3a3a3a", light = "#d9d9d9" }
7 = { dark = "#484848", light = "#cecece" }
8 = { dark = "#606060", light = "#bbbbbb" }
9 = { dark = "#6e6e6e", light = "#8d8d8d" }
10 = { dark = "#7b7b7b", light = "#838383" }
11 = { dark = "#b4b4b4", light = "#646464" }
12 = { dark = "#eeeeee", light = "#202020" }
[colors.mauve]
1 = { dark = "#121113", light = "#fdfcfd" }
2 = { dark = "#1a191b", light = "#faf9fb" }
3 = { dark = "#232225", light = "#f2eff3" }
4 = { dark = "#2b292d", light = "#eae7ec" }
5 = { dark = "#323035", light = "#e3dfe6" }
6 = { dark = "#3c393f", light = "#dbd8e0" }
7 = { dark = "#49474e", light = "#d0cdd7" }
8 = { dark = "#625f69", light = "#bcbac7" }
9 = { dark = "#6f6d78", light = "#8e8c99" }
10 = { dark = "#7c7a85", light = "#84828e" }
11 = { dark = "#b5b2bc", light = "#65636d" }
12 = { dark = "#eeeef0", light = "#211f26" }
[colors.slate]
1 = { dark = "#111113", light = "#fcfcfd" }
2 = { dark = "#18191b", light = "#f9f9fb" }
3 = { dark = "#212225", light = "#f0f0f3" }
4 = { dark = "#272a2d", light = "#e8e8ec" }
5 = { dark = "#2e3135", light = "#e0e1e6" }
6 = { dark = "#363a3f", light = "#d9d9e0" }
7 = { dark = "#43484e", light = "#cdced6" }
8 = { dark = "#5a6169", light = "#b9bbc6" }
9 = { dark = "#696e77", light = "#8b8d98" }
10 = { dark = "#777b84", light = "#80838d" }
11 = { dark = "#b0b4ba", light = "#60646c" }
12 = { dark = "#edeef0", light = "#1c2024" }
[colors.sage]
1 = { dark = "#101211", light = "#fbfdfc" }
2 = { dark = "#171918", light = "#f7f9f8" }
3 = { dark = "#202221", light = "#eef1f0" }
4 = { dark = "#272a29", light = "#e6e9e8" }
5 = { dark = "#2e3130", light = "#dfe2e0" }
6 = { dark = "#373b39", light = "#d7dad9" }
7 = { dark = "#444947", light = "#cbcfcd" }
8 = { dark = "#5b625f", light = "#b8bcba" }
9 = { dark = "#63706b", light = "#868e8b" }
10 = { dark = "#717d79", light = "#7c8481" }
11 = { dark = "#adb5b2", light = "#5f6563" }
12 = { dark = "#eceeed", light = "#1a211e" }
[colors.olive]
1 = { dark = "#111210", light = "#fcfdfc" }
2 = { dark = "#181917", light = "#f8faf8" }
3 = { dark = "#212220", light = "#eff1ef" }
4 = { dark = "#282a27", light = "#e7e9e7" }
5 = { dark = "#2f312e", light = "#dfe2df" }
6 = { dark = "#383a36", light = "#d7dad7" }
7 = { dark = "#454843", light = "#cccfcc" }
8 = { dark = "#5c625b", light = "#b9bcb8" }
9 = { dark = "#687066", light = "#898e87" }
10 = { dark = "#767d74", light = "#7f847d" }
11 = { dark = "#afb5ad", light = "#60655f" }
12 = { dark = "#eceeec", light = "#1d211c" }
[colors.sand]
1 = { dark = "#111110", light = "#fdfdfc" }
2 = { dark = "#191918", light = "#f9f9f8" }
3 = { dark = "#222221", light = "#f1f0ef" }
4 = { dark = "#2a2a28", light = "#e9e8e6" }
5 = { dark = "#31312e", light = "#e2e1de" }
6 = { dark = "#3b3a37", light = "#dad9d6" }
7 = { dark = "#494844", light = "#cfceca" }
8 = { dark = "#62605b", light = "#bcbbb5" }
9 = { dark = "#6f6d66", light = "#8d8d86" }
10 = { dark = "#7c7b74", light = "#82827c" }
11 = { dark = "#b5b3ad", light = "#63635e" }
12 = { dark = "#eeeeec", light = "#21201c" }
[colors.tomato]
1 = { dark = "#181111", light = "#fffcfc" }
2 = { dark = "#1f1513", light = "#fff8f7" }
3 = { dark = "#391714", light = "#feebe7" }
4 = { dark = "#4e1511", light = "#ffdcd3" }
5 = { dark = "#5e1c16", light = "#ffcdc2" }
6 = { dark = "#6e2920", light = "#fdbdaf" }
7 = { dark = "#853a2d", light = "#f5a898" }
8 = { dark = "#ac4d39", light = "#ec8e7b" }
9 = { dark = "#e54d2e", light = "#e54d2e" }
10 = { dark = "#ec6142", light = "#dd4425" }
11 = { dark = "#ff977d", light = "#d13415" }
12 = { dark = "#fbd3cb", light = "#5c271f" }
[colors.red]
1 = { dark = "#191111", light = "#fffcfc" }
2 = { dark = "#201314", light = "#fff7f7" }
3 = { dark = "#3b1219", light = "#feebec" }
4 = { dark = "#500f1c", light = "#ffdbdc" }
5 = { dark = "#611623", light = "#ffcdce" }
6 = { dark = "#72232d", light = "#fdbdbe" }
7 = { dark = "#8c333a", light = "#f4a9aa" }
8 = { dark = "#b54548", light = "#eb8e90" }
9 = { dark = "#e5484d", light = "#e5484d" }
10 = { dark = "#ec5d5e", light = "#dc3e42" }
11 = { dark = "#ff9592", light = "#ce2c31" }
12 = { dark = "#ffd1d9", light = "#641723" }
[colors.ruby]
1 = { dark = "#191113", light = "#fffcfd" }
2 = { dark = "#1e1517", light = "#fff7f8" }
3 = { dark = "#3a141e", light = "#feeaed" }
4 = { dark = "#4e1325", light = "#ffdce1" }
5 = { dark = "#5e1a2e", light = "#ffced6" }
6 = { dark = "#6f2539", light = "#f8bfc8" }
7 = { dark = "#883447", light = "#efacb8" }
8 = { dark = "#b3445a", light = "#e592a3" }
9 = { dark = "#e54666", light = "#e54666" }
10 = { dark = "#ec5a72", light = "#dc3b5d" }
11 = { dark = "#ff949d", light = "#ca244d" }
12 = { dark = "#fed2e1", light = "#64172b" }
[colors.crimson]
1 = { dark = "#191114", light = "#fffcfd" }
2 = { dark = "#201318", light = "#fef7f9" }
3 = { dark = "#381525", light = "#ffe9f0" }
4 = { dark = "#4d122f", light = "#fedce7" }
5 = { dark = "#5c1839", light = "#facedd" }
6 = { dark = "#6d2545", light = "#f3bed1" }
7 = { dark = "#873356", light = "#eaacc3" }
8 = { dark = "#b0436e", light = "#e093b2" }
9 = { dark = "#e93d82", light = "#e93d82" }
10 = { dark = "#ee518a", light = "#df3478" }
11 = { dark = "#ff92ad", light = "#cb1d63" }
12 = { dark = "#fdd3e8", light = "#621639" }
[colors.pink]
1 = { dark = "#191117", light = "#fffcfe" }
2 = { dark = "#21121d", light = "#fef7fb" }
3 = { dark = "#37172f", light = "#fee9f5" }
4 = { dark = "#4b143d", light = "#fbdcef" }
5 = { dark = "#591c47", light = "#f6cee7" }
6 = { dark = "#692955", light = "#efbfdd" }
7 = { dark = "#833869", light = "#e7acd0" }
8 = { dark = "#a84885", light = "#dd93c2" }
9 = { dark = "#d6409f", light = "#d6409f" }
10 = { dark = "#de51a8", light = "#cf3897" }
11 = { dark = "#ff8dcc", light = "#c2298a" }
12 = { dark = "#fdd1ea", light = "#651249" }
[colors.plum]
1 = { dark = "#181118", light = "#fefcff" }
2 = { dark = "#201320", light = "#fdf7fd" }
3 = { dark = "#351a35", light = "#fbebfb" }
4 = { dark = "#451d47", light = "#f7def8" }
5 = { dark = "#512454", light = "#f2d1f3" }
6 = { dark = "#5e3061", light = "#e9c2ec" }
7 = { dark = "#734079", light = "#deade3" }
8 = { dark = "#92549c", light = "#cf91d8" }
9 = { dark = "#ab4aba", light = "#ab4aba" }
10 = { dark = "#b658c4", light = "#a144af" }
11 = { dark = "#e796f3", light = "#953ea3" }
12 = { dark = "#f4d4f4", light = "#53195d" }
[colors.purple]
1 = { dark = "#18111b", light = "#fefcfe" }
2 = { dark = "#1e1523", light = "#fbf7fe" }
3 = { dark = "#301c3b", light = "#f7edfe" }
4 = { dark = "#3d224e", light = "#f2e2fc" }
5 = { dark = "#48295c", light = "#ead5f9" }
6 = { dark = "#54346b", light = "#e0c4f4" }
7 = { dark = "#664282", light = "#d1afec" }
8 = { dark = "#8457aa", light = "#be93e4" }
9 = { dark = "#8e4ec6", light = "#8e4ec6" }
10 = { dark = "#9a5cd0", light = "#8347b9" }
11 = { dark = "#d19dff", light = "#8145b5" }
12 = { dark = "#ecd9fa", light = "#402060" }
[colors.violet]
1 = { dark = "#14121f", light = "#fdfcfe" }
2 = { dark = "#1b1525", light = "#faf8ff" }
3 = { dark = "#291f43", light = "#f4f0fe" }
4 = { dark = "#33255b", light = "#ebe4ff" }
5 = { dark = "#3c2e69", light = "#e1d9ff" }
6 = { dark = "#473876", light = "#d4cafe" }
7 = { dark = "#56468b", light = "#c2b5f5" }
8 = { dark = "#6958ad", light = "#aa99ec" }
9 = { dark = "#6e56cf", light = "#6e56cf" }
10 = { dark = "#7d66d9", light = "#654dc4" }
11 = { dark = "#baa7ff", light = "#6550b9" }
12 = { dark = "#e2ddfe", light = "#2f265f" }
[colors.iris]
1 = { dark = "#13131e", light = "#fdfdff" }
2 = { dark = "#171625", light = "#f8f8ff" }
3 = { dark = "#202248", light = "#f0f1fe" }
4 = { dark = "#262a65", light = "#e6e7ff" }
5 = { dark = "#303374", light = "#dadcff" }
6 = { dark = "#3d3e82", light = "#cbcdff" }
7 = { dark = "#4a4a95", light = "#b8baf8" }
8 = { dark = "#5958b1", light = "#9b9ef0" }
9 = { dark = "#5b5bd6", light = "#5b5bd6" }
10 = { dark = "#6e6ade", light = "#5151cd" }
11 = { dark = "#b1a9ff", light = "#5753c6" }
12 = { dark = "#e0dffe", light = "#272962" }
[colors.indigo]
1 = { dark = "#11131f", light = "#fdfdfe" }
2 = { dark = "#141726", light = "#f7f9ff" }
3 = { dark = "#182449", light = "#edf2fe" }
4 = { dark = "#1d2e62", light = "#e1e9ff" }
5 = { dark = "#253974", light = "#d2deff" }
6 = { dark = "#304384", light = "#c1d0ff" }
7 = { dark = "#3a4f97", light = "#abbdf9" }
8 = { dark = "#435db1", light = "#8da4ef" }
9 = { dark = "#3e63dd", light = "#3e63dd" }
10 = { dark = "#5472e4", light = "#3358d4" }
11 = { dark = "#9eb1ff", light = "#3a5bc7" }
12 = { dark = "#d6e1ff", light = "#1f2d5c" }
[colors.blue]
1 = { dark = "#0d1520", light = "#fbfdff" }
2 = { dark = "#111927", light = "#f4faff" }
3 = { dark = "#0d2847", light = "#e6f4fe" }
4 = { dark = "#003362", light = "#d5efff" }
5 = { dark = "#004074", light = "#c2e5ff" }
6 = { dark = "#104d87", light = "#acd8fc" }
7 = { dark = "#205d9e", light = "#8ec8f6" }
8 = { dark = "#2870bd", light = "#5eb1ef" }
9 = { dark = "#0090ff", light = "#0090ff" }
10 = { dark = "#3b9eff", light = "#0588f0" }
11 = { dark = "#70b8ff", light = "#0d74ce" }
12 = { dark = "#c2e6ff", light = "#113264" }
[colors.cyan]
1 = { dark = "#0b161a", light = "#fafdfe" }
2 = { dark = "#101b20", light = "#f2fafb" }
3 = { dark = "#082c36", light = "#def7f9" }
4 = { dark = "#003848", light = "#caf1f6" }
5 = { dark = "#004558", light = "#b5e9f0" }
6 = { dark = "#045468", light = "#9ddde7" }
7 = { dark = "#12677e", light = "#7dcedc" }
8 = { dark = "#11809c", light = "#3db9cf" }
9 = { dark = "#00a2c7", light = "#00a2c7" }
10 = { dark = "#23afd0", light = "#0797b9" }
11 = { dark = "#4ccce6", light = "#107d98" }
12 = { dark = "#b6ecf7", light = "#0d3c48" }
[colors.teal]
1 = { dark = "#0d1514", light = "#fafefd" }
2 = { dark = "#111c1b", light = "#f3fbf9" }
3 = { dark = "#0d2d2a", light = "#e0f8f3" }
4 = { dark = "#023b37", light = "#ccf3ea" }
5 = { dark = "#084843", light = "#b8eae0" }
6 = { dark = "#145750", light = "#a1ded2" }
7 = { dark = "#1c6961", light = "#83cdc1" }
8 = { dark = "#207e73", light = "#53b9ab" }
9 = { dark = "#12a594", light = "#12a594" }
10 = { dark = "#0eb39e", light = "#0d9b8a" }
11 = { dark = "#0bd8b6", light = "#008573" }
12 = { dark = "#adf0dd", light = "#0d3d38" }
[colors.jade]
1 = { dark = "#0d1512", light = "#fbfefd" }
2 = { dark = "#121c18", light = "#f4fbf7" }
3 = { dark = "#0f2e22", light = "#e6f7ed" }
4 = { dark = "#0b3b2c", light = "#d6f1e3" }
5 = { dark = "#114837", light = "#c3e9d7" }
6 = { dark = "#1b5745", light = "#acdec8" }
7 = { dark = "#246854", light = "#8bceb6" }
8 = { dark = "#2a7e68", light = "#56ba9f" }
9 = { dark = "#29a383", light = "#29a383" }
10 = { dark = "#27b08b", light = "#26997b" }
11 = { dark = "#1fd8a4", light = "#208368" }
12 = { dark = "#adf0d4", light = "#1d3b31" }
[colors.green]
1 = { dark = "#0e1512", light = "#fbfefc" }
2 = { dark = "#121b17", light = "#f4fbf6" }
3 = { dark = "#132d21", light = "#e6f6eb" }
4 = { dark = "#113b29", light = "#d6f1df" }
5 = { dark = "#174933", light = "#c4e8d1" }
6 = { dark = "#20573e", light = "#adddc0" }
7 = { dark = "#28684a", light = "#8eceaa" }
8 = { dark = "#2f7c57", light = "#5bb98b" }
9 = { dark = "#30a46c", light = "#30a46c" }
10 = { dark = "#33b074", light = "#2b9a66" }
11 = { dark = "#3dd68c", light = "#218358" }
12 = { dark = "#b1f1cb", light = "#193b2d" }
[colors.grass]
1 = { dark = "#0e1511", light = "#fbfefb" }
2 = { dark = "#141a15", light = "#f5fbf5" }
3 = { dark = "#1b2a1e", light = "#e9f6e9" }
4 = { dark = "#1d3a24", light = "#daf1db" }
5 = { dark = "#25482d", light = "#c9e8ca" }
6 = { dark = "#2d5736", light = "#b2ddb5" }
7 = { dark = "#366740", light = "#94ce9a" }
8 = { dark = "#3e7949", light = "#65ba74" }
9 = { dark = "#46a758", light = "#46a758" }
10 = { dark = "#53b365", light = "#3e9b4f" }
11 = { dark = "#71d083", light = "#2a7e3b" }
12 = { dark = "#c2f0c2", light = "#203c25" }
[colors.bronze]
1 = { dark = "#141110", light = "#fdfcfc" }
2 = { dark = "#1c1917", light = "#fdf7f5" }
3 = { dark = "#262220", light = "#f6edea" }
4 = { dark = "#302a27", light = "#efe4df" }
5 = { dark = "#3b3330", light = "#e7d9d3" }
6 = { dark = "#493e3a", light = "#dfcdc5" }
7 = { dark = "#5a4c47", light = "#d3bcb3" }
8 = { dark = "#6f5f58", light = "#c2a499" }
9 = { dark = "#a18072", light = "#a18072" }
10 = { dark = "#ae8c7e", light = "#957468" }
11 = { dark = "#d4b3a5", light = "#7d5e54" }
12 = { dark = "#ede0d9", light = "#43302b" }
[colors.gold]
1 = { dark = "#121211", light = "#fdfdfc" }
2 = { dark = "#1b1a17", light = "#faf9f2" }
3 = { dark = "#24231f", light = "#f2f0e7" }
4 = { dark = "#2d2b26", light = "#eae6db" }
5 = { dark = "#38352e", light = "#e1dccf" }
6 = { dark = "#444039", light = "#d8d0bf" }
7 = { dark = "#544f46", light = "#cbc0aa" }
8 = { dark = "#696256", light = "#b9a88d" }
9 = { dark = "#978365", light = "#978365" }
10 = { dark = "#a39073", light = "#8c7a5e" }
11 = { dark = "#cbb99f", light = "#71624b" }
12 = { dark = "#e8e2d9", light = "#3b352b" }
[colors.brown]
1 = { dark = "#12110f", light = "#fefdfc" }
2 = { dark = "#1c1816", light = "#fcf9f6" }
3 = { dark = "#28211d", light = "#f6eee7" }
4 = { dark = "#322922", light = "#f0e4d9" }
5 = { dark = "#3e3128", light = "#ebdaca" }
6 = { dark = "#4d3c2f", light = "#e4cdb7" }
7 = { dark = "#614a39", light = "#dcbc9f" }
8 = { dark = "#7c5f46", light = "#cea37e" }
9 = { dark = "#ad7f58", light = "#ad7f58" }
10 = { dark = "#b88c67", light = "#a07553" }
11 = { dark = "#dbb594", light = "#815e46" }
12 = { dark = "#f2e1ca", light = "#3e332e" }
[colors.orange]
1 = { dark = "#17120e", light = "#fefcfb" }
2 = { dark = "#1e160f", light = "#fff7ed" }
3 = { dark = "#331e0b", light = "#ffefd6" }
4 = { dark = "#462100", light = "#ffdfb5" }
5 = { dark = "#562800", light = "#ffd19a" }
6 = { dark = "#66350c", light = "#ffc182" }
7 = { dark = "#7e451d", light = "#f5ae73" }
8 = { dark = "#a35829", light = "#ec9455" }
9 = { dark = "#f76b15", light = "#f76b15" }
10 = { dark = "#ff801f", light = "#ef5f00" }
11 = { dark = "#ffa057", light = "#cc4e00" }
12 = { dark = "#ffe0c2", light = "#582d1d" }
[colors.amber]
1 = { dark = "#16120c", light = "#fefdfb" }
2 = { dark = "#1d180f", light = "#fefbe9" }
3 = { dark = "#302008", light = "#fff7c2" }
4 = { dark = "#3f2700", light = "#ffee9c" }
5 = { dark = "#4d3000", light = "#fbe577" }
6 = { dark = "#5c3d05", light = "#f3d673" }
7 = { dark = "#714f19", light = "#e9c162" }
8 = { dark = "#8f6424", light = "#e2a336" }
9 = { dark = "#ffc53d", light = "#ffc53d" }
10 = { dark = "#ffd60a", light = "#ffba18" }
11 = { dark = "#ffca16", light = "#ab6400" }
12 = { dark = "#ffe7b3", light = "#4f3422" }
[colors.yellow]
1 = { dark = "#14120b", light = "#fdfdf9" }
2 = { dark = "#1b180f", light = "#fefce9" }
3 = { dark = "#2d2305", light = "#fffab8" }
4 = { dark = "#362b00", light = "#fff394" }
5 = { dark = "#433500", light = "#ffe770" }
6 = { dark = "#524202", light = "#f3d768" }
7 = { dark = "#665417", light = "#e4c767" }
8 = { dark = "#836a21", light = "#d5ae39" }
9 = { dark = "#ffe629", light = "#ffe629" }
10 = { dark = "#ffff57", light = "#ffdc00" }
11 = { dark = "#f5e147", light = "#9e6c00" }
12 = { dark = "#f6eeb4", light = "#473b1f" }
[colors.lime]
1 = { dark = "#11130c", light = "#fcfdfa" }
2 = { dark = "#151a10", light = "#f8faf3" }
3 = { dark = "#1f2917", light = "#eef6d6" }
4 = { dark = "#29371d", light = "#e2f0bd" }
5 = { dark = "#334423", light = "#d3e7a6" }
6 = { dark = "#3d522a", light = "#c2da91" }
7 = { dark = "#496231", light = "#abc978" }
8 = { dark = "#577538", light = "#8db654" }
9 = { dark = "#bdee63", light = "#bdee63" }
10 = { dark = "#d4ff70", light = "#b0e64c" }
11 = { dark = "#bde56c", light = "#5c7c2f" }
12 = { dark = "#e3f7ba", light = "#37401c" }
[colors.mint]
1 = { dark = "#0e1515", light = "#f9fefd" }
2 = { dark = "#0f1b1b", light = "#f2fbf9" }
3 = { dark = "#092c2b", light = "#ddf9f2" }
4 = { dark = "#003a38", light = "#c8f4e9" }
5 = { dark = "#004744", light = "#b3ecde" }
6 = { dark = "#105650", light = "#9ce0d0" }
7 = { dark = "#1e685f", light = "#7ecfbd" }
8 = { dark = "#277f70", light = "#4cbba5" }
9 = { dark = "#86ead4", light = "#86ead4" }
10 = { dark = "#a8f5e5", light = "#7de0cb" }
11 = { dark = "#58d5ba", light = "#027864" }
12 = { dark = "#c4f5e1", light = "#16433c" }
[colors.sky]
1 = { dark = "#0d141f", light = "#f9feff" }
2 = { dark = "#111a27", light = "#f1fafd" }
3 = { dark = "#112840", light = "#e1f6fd" }
4 = { dark = "#113555", light = "#d1f0fa" }
5 = { dark = "#154467", light = "#bee7f5" }
6 = { dark = "#1b537b", light = "#a9daed" }
7 = { dark = "#1f6692", light = "#8dcae3" }
8 = { dark = "#197cae", light = "#60b3d7" }
9 = { dark = "#7ce2fe", light = "#7ce2fe" }
10 = { dark = "#a8eeff", light = "#74daf8" }
11 = { dark = "#75c7f0", light = "#00749e" }
12 = { dark = "#c2f3ff", light = "#1d3e56" }
# end of generated tokens

View file

@ -3,6 +3,7 @@ use crate::ui::fonts::set_fonts;
mod fonts;
pub mod layer_selector;
pub mod tokens;
pub fn set_ui(ctx: &egui::Context) {
set_fonts(ctx);

View file

@ -0,0 +1,163 @@
use std::sync::LazyLock;
use egui::{Color32, Theme};
use serde::{Deserialize, Serialize};
use toml::{Table, Value};
use toml::value::Datetime;
use tracing::debug;
const TOKENS_STR: &'static str = include_str!("../data/tokens.toml");
const THEME_STR: &'static str = include_str!("../data/theme.toml");
pub struct DesignTokens {
merged_table: Table
}
fn recursive_toml_merge(src: &mut Table, dst: &mut Table) {
for (key, val) in src {
match val {
Value::Table(tbl) => {
if dst.contains_key(key) {
recursive_toml_merge(tbl, dst.get_mut(key).unwrap().as_table_mut().unwrap());
} else {
dst.insert(key.clone(), val.clone());
}
},
_ => {
dst.insert(key.clone(), val.clone());
}
}
}
}
fn recursive_toml_resolve(into: &mut Table, root: &Table) {
for (_, val) in into {
match val {
Value::String(s) => {
if s.starts_with("@alias $") {
let key = s.strip_prefix("@alias $").unwrap();
*val = get_key(root, key).unwrap().clone();
}
},
Value::Table(t) => {
recursive_toml_resolve(t, root);
}
_ => {}
}
}
}
fn get_key<'a>(table: &'a Table, key: &str) -> Option<&'a Value> {
let segments = key.split(".").enumerate();
let segment_count = key.split(".").collect::<Vec<_>>().len();
let mut table: &Table = table;
for (num, segment) in segments {
let last_segment = num == segment_count-1;
let val = table.get(segment)?;
if last_segment { return Some(val); }
match val {
Value::Table(t) => {
table = t;
continue;
},
_ => {
return None;
}
}
}
None
}
impl DesignTokens {
pub fn new() -> Self {
let mut base_tokens = TOKENS_STR.parse::<Table>().unwrap();
let mut theme_tokens = THEME_STR.parse::<Table>().unwrap();
recursive_toml_merge(&mut theme_tokens, &mut base_tokens);
let base_memoized = base_tokens.clone();
recursive_toml_resolve(&mut base_tokens, &base_memoized);
Self {
merged_table: base_tokens
}
}
pub fn get_value(&self, key: &str) -> Option<&Value> {
let segments = key.split(".").enumerate();
let segment_count = key.split(".").collect::<Vec<_>>().len();
let mut table: &Table = &self.merged_table;
for (num, segment) in segments {
let last_segment = num == segment_count-1;
let val = table.get(segment)?;
match val {
Value::Table(t) => {
table = t;
continue;
},
_ => {
return if last_segment {
Some(val)
} else {
None
}
}
}
}
None
}
pub fn get_string(&self, key: &str) -> Option<&String> {
let val = self.get_value(key)?;
match val {
Value::String(s) => Some(s),
_ => None
}
}
pub fn get_integer(&self, key: &str) -> Option<&i64> {
let val = self.get_value(key)?;
match val {
Value::Integer(s) => Some(s),
_ => None
}
}
pub fn get_float(&self, key: &str) -> Option<&f64> {
let val = self.get_value(key)?;
match val {
Value::Float(s) => Some(s),
_ => None
}
}
pub fn get_boolean(&self, key: &str) -> Option<&bool> {
let val = self.get_value(key)?;
match val {
Value::Boolean(s) => Some(s),
_ => None
}
}
pub fn get_datetime(&self, key: &str) -> Option<&Datetime> {
let val = self.get_value(key)?;
match val {
Value::Datetime(s) => Some(s),
_ => None
}
}
pub fn get_color32(&self, key: &str) -> Option<Color32> {
let val = self.get_string(key)?;
Color32::from_hex(val).ok()
}
pub fn get_color(&self, key: &str, theme: Theme) -> Option<Color32> {
match theme {
Theme::Dark => self.get_color32(&format!("{key}.dark")),
Theme::Light => self.get_color32(&format!("{key}.light")),
}
}
}
pub const DESIGN_TOKENS: LazyLock<DesignTokens> = LazyLock::new(|| {
DesignTokens::new()
});