start work on the overlay theme system
This commit is contained in:
parent
9d52414e1c
commit
664809b3ad
13 changed files with 613 additions and 4 deletions
1
Cargo.lock
generated
1
Cargo.lock
generated
|
@ -5244,6 +5244,7 @@ dependencies = [
|
|||
"nalgebra-glm",
|
||||
"poll-promise",
|
||||
"serde",
|
||||
"toml",
|
||||
"tracing",
|
||||
"tracing-subscriber",
|
||||
"tracing-web",
|
||||
|
|
|
@ -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"
|
||||
|
|
6
crates/client/dist/index.html
vendored
6
crates/client/dist/index.html
vendored
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
18
crates/client/src/ui/data/generate_color_tokens.ts
Normal file
18
crates/client/src/ui/data/generate_color_tokens.ts
Normal 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");
|
1
crates/client/src/ui/data/package.json
Normal file
1
crates/client/src/ui/data/package.json
Normal file
|
@ -0,0 +1 @@
|
|||
{"dependencies": {}}
|
11
crates/client/src/ui/data/theme.toml
Normal file
11
crates/client/src/ui/data/theme.toml
Normal 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"
|
405
crates/client/src/ui/data/tokens.toml
Normal file
405
crates/client/src/ui/data/tokens.toml
Normal 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
|
|
@ -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);
|
||||
|
|
163
crates/client/src/ui/tokens/mod.rs
Normal file
163
crates/client/src/ui/tokens/mod.rs
Normal 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()
|
||||
});
|
Loading…
Add table
Reference in a new issue