Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-27 18:54:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Light mode

Browse Source
This commit is contained in:
barsdeveloper
2025-01-26 19:29:56 +02:00
parent c5f57dd3ef
commit 9985071d61
11 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -34,7 +34,7 @@ npx http-server
You can check `index.html` for a working example, the main steps are the following:
1. Make the `dist` directory available in your website by copying it or installing through npm `npm i ueblueprint`.
2. Include `dist/css/ueb-style.css` stylesheet in your page.
2. Include `dist/css/ueb-style.min.css` stylesheet in your page.
3. Define eventual CSS variables.
```HTML
<style>
@@ -50,6 +50,7 @@ You can check `index.html` for a working example, the main steps are the followi
</script>
```
5. Define your blueprint by writing the code inside a `template`, inside a `ueb-blueprint` element.
It can have light background using the following CSS class: `<ueb-blueprint class="ueb-light-mode">`
```HTML
<ueb-blueprint>
<template>

27
dist/css/ueb-style.css vendored
View File

@@ -11,6 +11,9 @@
ueb-blueprint {
--ueb-scale: 1;
--ueb-grid-actual-size: var(--ueb-grid-size);
--ueb-grid-line-color: #353535;
--ueb-grid-set-line-color: #161616;
--ueb-grid-axis-line-color: #000;
display: block;
position: relative;
font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
@@ -174,6 +177,30 @@ ueb-selector > * {
backdrop-filter: blur(4px);
}
/* Light mode */
ueb-blueprint.ueb-light-mode {
--ueb-grid-line-color: #ddd;
--ueb-grid-set-line-color: #c0c0c0;
--ueb-grid-axis-line-color: #a0a0a0;
}
ueb-blueprint.ueb-light-mode .ueb-grid {
background-color: #f6f6f6;
}
ueb-blueprint.ueb-light-mode ueb-node.ueb-node-style-glass .ueb-node-wrapper {
background-color: rgba(0, 0, 0, 0.5647058824);
}
ueb-blueprint.ueb-light-mode ueb-link .ueb-link-path {
filter: saturate(200%) brightness(0.6);
}
ueb-blueprint.ueb-light-mode .ueb-viewport-header {
background: rgba(0, 0, 0, 0.3);
color: #101010;
}
ueb-node.ueb-node-style-minimal {
box-shadow: none;
}

2
dist/css/ueb-style.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueb-style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueb-style.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

6
dist/ueblueprint.js vendored
View File

@@ -62,12 +62,9 @@ class Configuration {
end: "blueprint-unfocus",
}
static fontSize = i$5`13px`
static gridAxisLineColor = i$5`black`
static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
static gridLineColor = i$5`#353535`
static gridLineWidth = 1 // px
static gridSet = 8
static gridSetLineColor = i$5`#161616`
static gridShrinkThreshold = 4 // exceding size factor threshold to cause a shrink event
static gridSize = 16 // px
static hexColorRegex = /^\s*#(?<r>[0-9a-fA-F]{2})(?<g>[0-9a-fA-F]{2})(?<b>[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?<rs>[0-9a-fA-F])(?<gs>[0-9a-fA-F])(?<bs>[0-9a-fA-F])\s*$/
@@ -11040,11 +11037,8 @@ class BlueprintTemplate extends ITemplate {
static styleVariables = {
"--ueb-font-size": `${Configuration.fontSize}`,
"--ueb-grid-axis-line-color": `${Configuration.gridAxisLineColor}`,
"--ueb-grid-expand": `${Configuration.expandGridSize}px`,
"--ueb-grid-line-color": `${Configuration.gridLineColor}`,
"--ueb-grid-line-width": `${Configuration.gridLineWidth}px`,
"--ueb-grid-set-line-color": `${Configuration.gridSetLineColor}`,
"--ueb-grid-set": `${Configuration.gridSet}`,
"--ueb-grid-size": `${Configuration.gridSize}px`,
"--ueb-link-min-width": `${Configuration.linkMinWidth}`,

2
dist/ueblueprint.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<title>UE Blueprint</title>
<link rel="stylesheet" href="dist/css/ueb-style.css">
<link rel="stylesheet" href="dist/css/ueb-style.min.css">
<style>
body {
margin: 0;

3
js/Configuration.js
View File

@@ -38,12 +38,9 @@ export default class Configuration {
end: "blueprint-unfocus",
}
static fontSize = css`13px`
static gridAxisLineColor = css`black`
static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
static gridLineColor = css`#353535`
static gridLineWidth = 1 // px
static gridSet = 8
static gridSetLineColor = css`#161616`
static gridShrinkThreshold = 4 // exceding size factor threshold to cause a shrink event
static gridSize = 16 // px
static hexColorRegex = /^\s*#(?<r>[0-9a-fA-F]{2})(?<g>[0-9a-fA-F]{2})(?<b>[0-9a-fA-F]{2})([0-9a-fA-F]{2})?|#(?<rs>[0-9a-fA-F])(?<gs>[0-9a-fA-F])(?<bs>[0-9a-fA-F])\s*$/

3
js/template/BlueprintTemplate.js
View File

@@ -19,11 +19,8 @@ export default class BlueprintTemplate extends ITemplate {
static styleVariables = {
"--ueb-font-size": `${Configuration.fontSize}`,
"--ueb-grid-axis-line-color": `${Configuration.gridAxisLineColor}`,
"--ueb-grid-expand": `${Configuration.expandGridSize}px`,
"--ueb-grid-line-color": `${Configuration.gridLineColor}`,
"--ueb-grid-line-width": `${Configuration.gridLineWidth}px`,
"--ueb-grid-set-line-color": `${Configuration.gridSetLineColor}`,
"--ueb-grid-set": `${Configuration.gridSet}`,
"--ueb-grid-size": `${Configuration.gridSize}px`,
"--ueb-link-min-width": `${Configuration.linkMinWidth}`,

28
scss/style.scss
View File

@@ -13,6 +13,9 @@
ueb-blueprint {
--ueb-scale: 1;
--ueb-grid-actual-size: var(--ueb-grid-size);
--ueb-grid-line-color: #353535;
--ueb-grid-set-line-color: #161616;
--ueb-grid-axis-line-color: #000;
display: block;
position: relative;
font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
@@ -287,3 +290,28 @@ ueb-selector>* {
background-color: #000000a0;
backdrop-filter: blur(4px);
}
/* Light mode */
ueb-blueprint.ueb-light-mode {
--ueb-grid-line-color: #ddd;
--ueb-grid-set-line-color: #c0c0c0;
--ueb-grid-axis-line-color: #a0a0a0;
}
ueb-blueprint.ueb-light-mode .ueb-grid {
background-color: #f6f6f6;
}
ueb-blueprint.ueb-light-mode ueb-node.ueb-node-style-glass .ueb-node-wrapper {
background-color: #00000090;
}
ueb-blueprint.ueb-light-mode ueb-link .ueb-link-path {
filter: saturate(200%) brightness(0.6);
}
ueb-blueprint.ueb-light-mode .ueb-viewport-header {
background: rgba(0, 0, 0, .3);
color: #101010;
}