From 026dc1739196cef1920b4492244b0aa9264ee97f Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 26 Oct 2023 13:43:48 +0200 Subject: [PATCH 01/12] Implemented everything I made a huge mistake and merge comitted the branch linked to issue #50 into my original CSS branch. This included every individual commits from the other branch into my CSS branch. I tried to revert it but failed and was therefore forced to use this solution. --- src/lib/GlobalCssProperties.json | 319 ++++++++++++++++++ .../classes/styling/GlobalCssSchemesLoader.ts | 229 +++++++++++++ .../AttributeSchemas/BorderAttribute.ts | 17 + .../AttributeSchemas/ColorAttribute.ts | 9 + .../AttributeSchemas/FontSizeAttribute.ts | 9 + .../ZodSchemas/GenericSchemas/ColorValue.ts | 22 ++ .../ZodSchemas/GenericSchemas/SizeValue.ts | 13 + .../classes/styling/ZodSchemas/MediaScheme.ts | 21 ++ .../styling/ZodSchemas/MediaSchemes.ts | 8 + src/lib/components/console/Console.svelte | 46 +-- src/lib/components/console/ConsoleLine.svelte | 1 + .../project/component/Component.svelte | 4 +- .../components/project/system/System.svelte | 5 +- src/lib/components/query/Queries.svelte | 8 +- src/lib/components/query/Query.svelte | 23 +- src/lib/components/query/QueryNav.svelte | 6 +- src/routes/+layout.svelte | 6 + src/routes/+page.svelte | 53 +-- 18 files changed, 734 insertions(+), 65 deletions(-) create mode 100644 src/lib/GlobalCssProperties.json create mode 100644 src/lib/classes/styling/GlobalCssSchemesLoader.ts create mode 100644 src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts create mode 100644 src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts create mode 100644 src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts create mode 100644 src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts create mode 100644 src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts create mode 100644 src/lib/classes/styling/ZodSchemas/MediaScheme.ts create mode 100644 src/lib/classes/styling/ZodSchemas/MediaSchemes.ts diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json new file mode 100644 index 00000000..5511ae82 --- /dev/null +++ b/src/lib/GlobalCssProperties.json @@ -0,0 +1,319 @@ +{ + "mediaSchemes": [ + { + "mediaFeature": "standard", + "color": [ + { + "attributeName": "--navigationbar-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } + }, + { + "attributeName": "--console-scrollbar-thumb-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.22745098039, + "valueTwo": 0.27450980392, + "valueThree": 0.30588235294 + } + }, + { + "attributeName": "--console-scrollbar-thumbhover-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.2862745098, + "valueTwo": 0.34901960784, + "valueThree": 0.38823529411 + } + }, + { + "attributeName": "--query-success-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.31372549019, + "valueTwo": 0.54901960784, + "valueThree": 0.27450980392 + } + }, + { + "attributeName": "--query-warning-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.98431372549, + "valueTwo": 0.75294117647, + "valueThree": 0.17647058823 + } + }, + { + "attributeName": "--query-error-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.82745098039, + "valueTwo": 0.18431372549, + "valueThree": 0.18431372549 + } + } + ], + "border": [ + { + "attributeName": "--main-navigationbar-border", + "style": "solid", + "width": { + "size": 0.1, + "unit": "em" + }, + "color": { + "colorGamut": "display-p3", + "valueOne": 0.18823529411, + "valueTwo": 0.22745098039, + "valueThree": 0.25098039215 + } + }, + { + "attributeName": "--main-innernavigationbar-border", + "style": "none solid solid solid", + "width": { + "size": 0.1, + "unit": "em" + }, + "color": { + "colorGamut": "display-p3", + "valueOne": 0.18823529411, + "valueTwo": 0.22745098039, + "valueThree": 0.25098039215 + } + } + ] + }, + { + "mediaFeature": "prefers-color-scheme: light", + "color": [ + { + "attributeName": "--main-navigationbar-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.22745098039, + "valueTwo": 0.27450980392, + "valueThree": 0.30588235294 + } + }, + { + "attributeName": "--canvas-topbar-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.2862745098, + "valueTwo": 0.34901960784, + "valueThree": 0.38823529411 + } + }, + { + "attributeName": "--canvas-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0, + "valueTwo": 0, + "valueThree": 0 + } + }, + { + "attributeName": "--sidebar-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0, + "valueTwo": 0, + "valueThree": 0 + } + }, + { + "attributeName": "--background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.95686274509, + "valueTwo": 0.95686274509, + "valueThree": 0.95686274509 + } + }, + { + "attributeName": "--console-selectedtab-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.2862745098, + "valueTwo": 0.34901960784, + "valueThree": 0.38823529411 + } + }, + { + "attributeName": "--console-unselectedtab-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.22745098039, + "valueTwo": 0.27450980392, + "valueThree": 0.30588235294 + } + }, + { + "attributeName": "--console-topbar-background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.22745098039, + "valueTwo": 0.27450980392, + "valueThree": 0.30588235294 + } + }, + { + "attributeName": "--console-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0, + "valueTwo": 0, + "valueThree": 0 + } + }, + { + "attributeName": "--sidebar-element-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.93333333333, + "valueTwo": 0.93333333333, + "valueThree": 0.93333333333 + } + }, + { + "attributeName": "--sidebar-element-hover-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.81176470588, + "valueTwo": 0.84705882352, + "valueThree": 0.86274509803 + } + }, + { + "attributeName": "--queries-input-background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } + } + ] + }, + { + "mediaFeature": "prefers-color-scheme: dark", + "color": [ + { + "attributeName": "--main-navigationbar-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.0156862745, + "valueTwo": 0.02352941176, + "valueThree": 0.03529411764 + } + }, + { + "attributeName": "--canvas-topbar-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.05490196078, + "valueTwo": 0.06666666666, + "valueThree": 0.09019607843 + } + }, + { + "attributeName": "--canvas-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } + }, + { + "attributeName": "--sidebar-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } + }, + { + "attributeName": "--background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.09019607843, + "valueTwo": 0.10196078431, + "valueThree": 0.13333333333 + } + }, + { + "attributeName": "--console-selectedtab-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.05490196078, + "valueTwo": 0.06666666666, + "valueThree": 0.09019607843 + } + }, + { + "attributeName": "--console-unselectedtab-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.0156862745, + "valueTwo": 0.02352941176, + "valueThree": 0.03529411764 + } + }, + { + "attributeName": "--console-topbar-background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.0156862745, + "valueTwo": 0.02352941176, + "valueThree": 0.03529411764 + } + }, + { + "attributeName": "--console-text-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } + }, + { + "attributeName": "--sidebar-element-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.19215686274, + "valueTwo": 0.21176470588, + "valueThree": 0.23529411764 + } + }, + { + "attributeName": "--sidebar-element-hover-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.12215686274, + "valueTwo": 0.23176470588, + "valueThree": 0.25529411764 + } + }, + { + "attributeName": "--queries-input-background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.05490196078, + "valueTwo": 0.06666666666, + "valueThree": 0.09019607843 + } + } + ] + } + ] +} diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts new file mode 100644 index 00000000..6613ee15 --- /dev/null +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -0,0 +1,229 @@ +import type ColorValue from "./ZodSchemas/GenericSchemas/ColorValue"; +import type MediaScheme from "./ZodSchemas/MediaScheme"; + +import MediaSchemes from "./ZodSchemas/MediaSchemes"; +import GlobalCssProperties from "../../GlobalCssProperties.json"; + +import type { z } from "zod"; + +/** + * Class for handling the loading of different properties based on active media features + */ +class GlobalCssSchemesLoader { + private _window: Window; + private _mediaSchemes: z.infer[]; + private _propertyNames: string[] = []; + + // SUPPORTED MEDIA FEATURES + private _supportedMediaFeatures: string[] = [ + "prefers-color-scheme: dark", + "prefers-color-scheme: light", + "prefers-reduced-motion", + "prefers-reduced-transparency", + ]; + + constructor(window: Window) { + this._window = window; + + // Parse and apply the different properties + this._mediaSchemes = this.parseMediaFeatures(); + this.applyMediaFeatures(); + + // Add event listeners to supported features + this.addEventListeners(); + + // Gather the property names + this.gatherPropertyNames(); + } + + /** + * Method for applying the specified styles + */ + applyMediaFeatures() { + // Apply each of the mediafeatures in the order in which they are specified in the .json file + this._mediaSchemes.forEach((scheme) => { + // Return early if the medie feature does not match + if ( + !this._window.matchMedia(`(${scheme.mediaFeature})`).matches && + scheme.mediaFeature !== "standard" + ) { + return; + } + + // Set color properties + if (scheme.color) { + scheme.color.forEach((attribute) => { + this._window.document.documentElement.style.setProperty( + attribute.attributeName, + this.createCssColor(attribute.color), + ); + }); + } + + // Set fontSize properties + if (scheme.fontSize) { + scheme.fontSize.forEach((attribute) => { + this._window.document.documentElement.style.setProperty( + attribute.attributeName, + attribute.size.size + attribute.size.unit, //TODO: Check the font size number + ); + }); + } + + // Set border properties + if (scheme.border) { + scheme.border.forEach((attribute) => { + this._window.document.documentElement.style.setProperty( + attribute.attributeName, + this.createCssColor(attribute.color) + + " " + + attribute.style + + " " + + attribute.width.size + + attribute.width.unit, + ); + }); + } + }); + } + + /** + * Method for clearing the applied styles + */ + private clearAppliedProperties() { + this._propertyNames.forEach((attribute) => { + this._window.document.documentElement.style.removeProperty( + attribute, + ); + }); + } + + /** + * Method for re-applying the specified styles + */ + reapplyMediaFeatures() { + this.clearAppliedProperties(); + this.applyMediaFeatures(); + } + + /** + * Method that gathers all property names from the config to be able to remove them later + */ + gatherPropertyNames() { + this._mediaSchemes.forEach((scheme) => { + // Check and add color attribute names + if (scheme.color) { + scheme.color.forEach((attr) => { + if (!this._propertyNames.includes(attr.attributeName)) { + this._propertyNames.push(attr.attributeName); + } + }); + } + + // Check and add fontSize attribute names + if (scheme.fontSize) { + scheme.fontSize.forEach((attr) => { + if (!this._propertyNames.includes(attr.attributeName)) { + this._propertyNames.push(attr.attributeName); + } + }); + } + + // Check and add border attribute names + if (scheme.border) { + scheme.border.forEach((attr) => { + if (!this._propertyNames.includes(attr.attributeName)) { + this._propertyNames.push(attr.attributeName); + } + }); + } + }); + } + + /** + * Method for loading the ColorSchemes.json file + */ + private parseMediaFeatures(): z.infer[] { + // Parsing media features + const parsedMediaFeatures = MediaSchemes.safeParse(GlobalCssProperties); + + // Throwing error if the parsing failed + if (!parsedMediaFeatures.success) { + throw new Error(parsedMediaFeatures.error.message); + } + + return parsedMediaFeatures.data.mediaSchemes; + } + + /** + * Method for adding appropriate event listeners + */ + private addEventListeners() { + this._supportedMediaFeatures.forEach((feature) => { + this._window + .matchMedia(`(${feature})`) + .addEventListener("change", () => { + this.reapplyMediaFeatures(); + }); + }); + } + + /** + * Method for checking and creating CSS color string + * @param color + * @returns CSS color string + */ + private createCssColor(color: z.infer): string { + const supportedGamuts: string[] = [ + "srgb", + "srgb-linear", + "display-p3", + "a98-rgb", + "prophoto-rgb", + "rec2020", + "xyz", + "xyz-d50", + "xyz-d65", + ]; + let cssColor: string; + + // Check if color gamut is supported + if (!supportedGamuts.includes(color.colorGamut)) { + throw new Error( + `Color gamut "${color.colorGamut}" specified in parsed global css styles, is not supported."`, + ); + } + + // Check if values are within range (0.0 - 1.0) + if ( + this.outOfColorRange(color.valueOne) || + this.outOfColorRange(color.valueTwo) || + this.outOfColorRange(color.valueThree) || + (color.alpha && this.outOfColorRange(color.alpha)) + ) { + throw new Error( + "Color value in parsed global css styles out of range (0.0 - 1.0).", + ); + } + + // Create CSS color string + if (color.alpha) { + cssColor = `color(${color.colorGamut} ${color.valueOne} ${color.valueTwo} ${color.valueThree} / ${color.alpha})`; + } else { + cssColor = `color(${color.colorGamut} ${color.valueOne} ${color.valueTwo} ${color.valueThree})`; + } + + return cssColor; + } + + /** + * Support method for checking if color is within range + * @param value + * @returns Boolean value representing if value is out of range + */ + private outOfColorRange(value: number): boolean { + return value > 1 || value < 0; + } +} + +export default GlobalCssSchemesLoader; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts new file mode 100644 index 00000000..09124759 --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts @@ -0,0 +1,17 @@ +import { z } from "zod"; +import ColorValue from "../GenericSchemas/ColorValue"; +import Size from "../GenericSchemas/SizeValue"; + +/** + * Represents a border in CSS. + * A border has a string containing the styles of the border, a width representing the thickness of the border and a color. + */ + +const BorderAttribute = z.object({ + attributeName: z.string(), + style: z.string(), + width: Size, + color: ColorValue, +}); + +export default BorderAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts new file mode 100644 index 00000000..52702a85 --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts @@ -0,0 +1,9 @@ +import { z } from "zod"; +import ColorValue from "../GenericSchemas/ColorValue"; + +const ColorAttribute = z.object({ + attributeName: z.string(), + color: ColorValue, +}); + +export default ColorAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts new file mode 100644 index 00000000..46bcbbec --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts @@ -0,0 +1,9 @@ +import { z } from "zod"; +import SizeValue from "../GenericSchemas/SizeValue"; + +const FontSizeAttribute = z.object({ + attributeName: z.string(), + size: SizeValue, +}); + +export default FontSizeAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts b/src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts new file mode 100644 index 00000000..20077279 --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts @@ -0,0 +1,22 @@ +import { z } from "zod"; + +/** + * The values for the colors must be within the range of 0-1 as the implementation is based on the color() css function. + * See information about the color function on: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color. + * The alpha value is optional, and is also a number within the range 0-1. + * + * Example: + * To represent the color "rgb(255 0 0)"" it is writen as "color(srgb 1 0 0)". + * To convert the individual RGB values from the range 0-255 to the range 0-1 one simply has to use the following formula: + * (old value)/255 = new value + */ + +const ColorValue = z.object({ + colorGamut: z.string(), + valueOne: z.number(), + valueTwo: z.number(), + valueThree: z.number(), + alpha: z.number().optional(), +}); + +export default ColorValue; diff --git a/src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts b/src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts new file mode 100644 index 00000000..57e5b693 --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts @@ -0,0 +1,13 @@ +import { z } from "zod"; + +/** + * A size is represented using a number and a string. + * Example: "3em" would be represented as "size: 3" and "unit: 'em'" + */ + +const SizeValue = z.object({ + size: z.number(), + unit: z.string(), +}); + +export default SizeValue; diff --git a/src/lib/classes/styling/ZodSchemas/MediaScheme.ts b/src/lib/classes/styling/ZodSchemas/MediaScheme.ts new file mode 100644 index 00000000..8d28d991 --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/MediaScheme.ts @@ -0,0 +1,21 @@ +import { z } from "zod"; +import ColorAttribute from "./AttributeSchemas/ColorAttribute"; +import BorderAttribute from "./AttributeSchemas/BorderAttribute"; +import FontSizeAttribute from "./AttributeSchemas/FontSizeAttribute"; + +/** + * A MediaScheme represents one of the many media queries. + * The different attributes of the specific mediascheme are added if that specific media feature is currently active. + * + * A complete list of the different supported media queries can be seen on the following website: + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries + */ + +const MediaScheme = z.object({ + mediaFeature: z.string(), + color: z.array(ColorAttribute).optional(), + fontSize: z.array(FontSizeAttribute).optional(), + border: z.array(BorderAttribute).optional(), +}); + +export default MediaScheme; diff --git a/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts b/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts new file mode 100644 index 00000000..19be698a --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts @@ -0,0 +1,8 @@ +import { z } from "zod"; +import MediaScheme from "./MediaScheme"; + +const MediaSchemes = z.object({ + mediaSchemes: z.array(MediaScheme), +}); + +export default MediaSchemes; diff --git a/src/lib/components/console/Console.svelte b/src/lib/components/console/Console.svelte index 888eda24..c83dc85a 100644 --- a/src/lib/components/console/Console.svelte +++ b/src/lib/components/console/Console.svelte @@ -14,13 +14,13 @@ let frontEndErrors: string[] = []; let backEndErrors: string[] = []; - const consoleInitialSize: string = "20em"; - let consoleExtendedSize: string = consoleInitialSize; - let consoleCollapsedSize: string = "3.25em"; + const consoleInitialSize: number = 300; + let consoleExtendedSize: number = consoleInitialSize; + let consoleCollapsedSize: number = 0; let consoleSize = consoleCollapsedSize; - let consoleButtonColorOff: string = "slategrey"; - let consoleButtonColorOn: string = "rgb(159, 174, 189)"; + let consoleButtonColorOff: string = "var(--console-unselectedtab-color)"; + let consoleButtonColorOn: string = "var(--console-selectedtab-color)"; /** * Function for resizing the console @@ -28,7 +28,7 @@ */ function resizeConsolePanel(event: PointerEvent) { event.preventDefault(); - consoleSize = (window.innerHeight - event.y).toString() + "px"; + consoleSize = window.innerHeight - event.y - consoleBar.offsetHeight; if (window.innerHeight - event.y < consoleBar.clientHeight) { consoleSize = consoleInitialSize; stopResizingConsolePanel(event); @@ -120,12 +120,8 @@ } -
-
+
+
{#if currentlyCollapsed} - + {:else} - + {/if} @@ -173,7 +169,7 @@ Backend
-
+
{#if currentTab == Tabs.Frontend} {#each frontEndErrors as error} @@ -188,16 +184,19 @@ diff --git a/src/lib/components/query/QueryNav.svelte b/src/lib/components/query/QueryNav.svelte index 1b43fdf6..7921b0e3 100644 --- a/src/lib/components/query/QueryNav.svelte +++ b/src/lib/components/query/QueryNav.svelte @@ -7,9 +7,9 @@

Queries

- - - + + +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 78ccdb98..4103c974 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,11 @@ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c85a536c..01d1acfc 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,8 +2,6 @@ import { project } from "$lib/globalState/activeProject"; import StartScreen from "$lib/components/startScreen/StartScreen.svelte"; import Console from "$lib/components/console/Console.svelte"; - import DropDownMenu from "$lib/components/samplesImplementations/DropDownMenu.svelte"; - import LocationsWithContextMenu from "$lib/components/samplesImplementations/LocationsWithContextMenu.svelte"; import Components from "$lib/components/project/component/Components.svelte"; import Systems from "$lib/components/project/system/Systems.svelte"; import ProjectNav from "$lib/components/project/ProjectNav.svelte"; @@ -50,7 +48,7 @@ } /** - * Function for stopping resizing a sid panel + * Function for stopping resizing a side panel * @param event */ function stopResizingSidePanel(event: PointerEvent) { @@ -66,7 +64,9 @@ - +
{#if $project === undefined} @@ -75,7 +75,10 @@
-
+
@@ -100,9 +103,6 @@
-

Canvas

- -
nav { height: 5em; - background-color: slategrey; + border: var(--main-navigationbar-border); flex-shrink: 0; } #main-nav { + color: var(--navigationbar-text-color); + background-color: var(--main-navigationbar-color); height: 2.5em; min-height: 2.5em; } @@ -148,13 +150,19 @@ .inner-nav1, .inner-nav3 { - background-color: slategrey; - box-shadow: lightslategray 0px 0px 1em; + background-color: var(--main-navigationbar-color); + border: var(--main-innernavigationbar-border); } .inner-nav2 { - background-color: lightslategrey; - box-shadow: slategrey 0px 0px 1em; + background-color: var(--canvas-topbar-color); + border: none; + } + + .inner-nav1, + .inner-nav2, + .inner-nav3 { + color: var(--navigationbar-text-color); } .global-dec { @@ -183,14 +191,13 @@ } .sidePanel { - background-color: whitesmoke; flex-basis: 10em; overflow: hidden; - display: flex; - flex-direction: column; + background-color: var(--background-color); } .sidePanelContent { + color: var(--sidebar-text-color); height: 100%; width: 100%; overflow-y: auto; @@ -200,13 +207,19 @@ .resizer { background-color: black; - flex-basis: 0.3em; + flex-basis: 0.1em; cursor: col-resize; } .canvas { - background-color: whitesmoke; - flex: 1; - width: 0; + color: var(--canvas-text-color); + background-color: var(--background-color); + flex-grow: 1; + } + + .canvas, + .sidePanel { + display: flex; + flex-direction: column; } From 8097be1f6d2dc2f97f39cbf38cae0c1078b49bcf Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 26 Oct 2023 14:17:10 +0200 Subject: [PATCH 02/12] Added dark mode color to edges --- src/lib/GlobalCssProperties.json | 18 ++++++++++++++++++ src/lib/components/svg-view/Edge.svelte | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json index 5511ae82..b3058209 100644 --- a/src/lib/GlobalCssProperties.json +++ b/src/lib/GlobalCssProperties.json @@ -199,6 +199,15 @@ "valueTwo": 1, "valueThree": 1 } + }, + { + "attributeName": "--canvas-action-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0, + "valueTwo": 0, + "valueThree": 0 + } } ] }, @@ -312,6 +321,15 @@ "valueTwo": 0.06666666666, "valueThree": 0.09019607843 } + }, + { + "attributeName": "--canvas-action-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } } ] } diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte index 79a415b9..a01b2c6a 100644 --- a/src/lib/components/svg-view/Edge.svelte +++ b/src/lib/components/svg-view/Edge.svelte @@ -92,7 +92,7 @@ From 963a6e127276f27840c3dbdabfb94497ac4fb472 Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 12:00:20 +0100 Subject: [PATCH 03/12] Created a CSS variable support check This makes sure that no unsupported CSS variables are used. The supported CSS variables are specified in CSSVariables.ts --- src/lib/GlobalCssProperties.json | 502 ++++++------------ .../classes/styling/GlobalCssSchemesLoader.ts | 153 +++--- .../AttributeSchemas/BorderAttribute.ts | 15 +- .../AttributeSchemas/ColorAttribute.ts | 31 +- .../AttributeSchemas/FontSizeAttribute.ts | 9 - .../SizeAttribute.ts} | 10 +- .../styling/ZodSchemas/CSSVariables.ts | 43 ++ .../ZodSchemas/GenericSchemas/ColorValue.ts | 22 - .../classes/styling/ZodSchemas/MediaScheme.ts | 14 +- .../styling/ZodSchemas/MediaSchemes.ts | 3 +- src/lib/components/console/Console.svelte | 2 +- src/routes/+layout.svelte | 7 +- src/routes/+page.svelte | 2 + 13 files changed, 342 insertions(+), 471 deletions(-) delete mode 100644 src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts rename src/lib/classes/styling/ZodSchemas/{GenericSchemas/SizeValue.ts => AttributeSchemas/SizeAttribute.ts} (53%) create mode 100644 src/lib/classes/styling/ZodSchemas/CSSVariables.ts delete mode 100644 src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json index b3058209..ca8e7bc1 100644 --- a/src/lib/GlobalCssProperties.json +++ b/src/lib/GlobalCssProperties.json @@ -1,337 +1,189 @@ { - "mediaSchemes": [ - { - "mediaFeature": "standard", - "color": [ - { - "attributeName": "--navigationbar-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 1, - "valueTwo": 1, - "valueThree": 1 - } - }, - { - "attributeName": "--console-scrollbar-thumb-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.22745098039, - "valueTwo": 0.27450980392, - "valueThree": 0.30588235294 - } - }, - { - "attributeName": "--console-scrollbar-thumbhover-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.2862745098, - "valueTwo": 0.34901960784, - "valueThree": 0.38823529411 - } - }, - { - "attributeName": "--query-success-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.31372549019, - "valueTwo": 0.54901960784, - "valueThree": 0.27450980392 - } - }, - { - "attributeName": "--query-warning-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.98431372549, - "valueTwo": 0.75294117647, - "valueThree": 0.17647058823 - } - }, - { - "attributeName": "--query-error-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.82745098039, - "valueTwo": 0.18431372549, - "valueThree": 0.18431372549 - } - } + "default": { + "mediaFeature": "default", + "color": { + "--navigationbar-text-color": ["display-p3", 1, 1, 1, 0], + "--console-scrollbar-thumb-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--console-scrollbar-thumbhover-color": [ + "display-p3", + 0.2862745098, + 0.34901960784, + 0.38823529411 + ], + "--query-success-color": [ + "display-p3", + 0.31372549019, + 0.54901960784, + 0.27450980392 ], - "border": [ - { - "attributeName": "--main-navigationbar-border", - "style": "solid", - "width": { - "size": 0.1, - "unit": "em" - }, - "color": { - "colorGamut": "display-p3", - "valueOne": 0.18823529411, - "valueTwo": 0.22745098039, - "valueThree": 0.25098039215 - } - }, - { - "attributeName": "--main-innernavigationbar-border", - "style": "none solid solid solid", - "width": { - "size": 0.1, - "unit": "em" - }, - "color": { - "colorGamut": "display-p3", - "valueOne": 0.18823529411, - "valueTwo": 0.22745098039, - "valueThree": 0.25098039215 - } - } + "--query-warning-color": [ + "display-p3", + 0.98431372549, + 0.75294117647, + 0.17647058823 + ], + "--query-error-color": [ + "display-p3", + 0.82745098039, + 0.18431372549, + 0.18431372549 ] }, + "fontSize": { + "--sidebar-fontsize": [1, "rem"], + "--sidebar-navigationbar-fontsize": [1, "rem"] + }, + "border": { + "--main-navigationbar-border": [ + "solid", + [0.1, "em"], + ["display-p3", 0.18823529411, 0.22745098039, 0.25098039215] + ], + "--main-innernavigationbar-border": [ + "none solid solid solid", + [0.1, "em"], + ["display-p3", 0.18823529411, 0.22745098039, 0.25098039215] + ] + } + }, + "schemes": [ { "mediaFeature": "prefers-color-scheme: light", - "color": [ - { - "attributeName": "--main-navigationbar-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.22745098039, - "valueTwo": 0.27450980392, - "valueThree": 0.30588235294 - } - }, - { - "attributeName": "--canvas-topbar-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.2862745098, - "valueTwo": 0.34901960784, - "valueThree": 0.38823529411 - } - }, - { - "attributeName": "--canvas-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0, - "valueTwo": 0, - "valueThree": 0 - } - }, - { - "attributeName": "--sidebar-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0, - "valueTwo": 0, - "valueThree": 0 - } - }, - { - "attributeName": "--background-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.95686274509, - "valueTwo": 0.95686274509, - "valueThree": 0.95686274509 - } - }, - { - "attributeName": "--console-selectedtab-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.2862745098, - "valueTwo": 0.34901960784, - "valueThree": 0.38823529411 - } - }, - { - "attributeName": "--console-unselectedtab-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.22745098039, - "valueTwo": 0.27450980392, - "valueThree": 0.30588235294 - } - }, - { - "attributeName": "--console-topbar-background-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.22745098039, - "valueTwo": 0.27450980392, - "valueThree": 0.30588235294 - } - }, - { - "attributeName": "--console-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0, - "valueTwo": 0, - "valueThree": 0 - } - }, - { - "attributeName": "--sidebar-element-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.93333333333, - "valueTwo": 0.93333333333, - "valueThree": 0.93333333333 - } - }, - { - "attributeName": "--sidebar-element-hover-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.81176470588, - "valueTwo": 0.84705882352, - "valueThree": 0.86274509803 - } - }, - { - "attributeName": "--queries-input-background-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 1, - "valueTwo": 1, - "valueThree": 1 - } - }, - { - "attributeName": "--canvas-action-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0, - "valueTwo": 0, - "valueThree": 0 - } - } - ] + "color": { + "--main-navigationbar-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--canvas-topbar-color": [ + "display-p3", + 0.2862745098, + 0.34901960784, + 0.38823529411 + ], + "--canvas-text-color": ["display-p3", 0, 0, 0], + "--sidebar-text-color": ["display-p3", 0, 0, 0], + "--background-color": [ + "display-p3", + 0.95686274509, + 0.95686274509, + 0.95686274509 + ], + "--console-selectedtab-color": [ + "display-p3", + 0.2862745098, + 0.34901960784, + 0.38823529411 + ], + "--console-unselectedtab-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--console-topbar-background-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--console-text-color": ["display-p3", 0, 0, 0], + "--sidebar-element-color": [ + "display-p3", + 0.93333333333, + 0.93333333333, + 0.93333333333 + ], + "--sidebar-element-hover-color": [ + "display-p3", + 0.81176470588, + 0.84705882352, + 0.86274509803 + ], + "--queries-input-background-color": ["display-p3", 1, 1, 1], + "--canvas-action-color": ["display-p3", 0, 0, 0], + "--console-tab-hover-color": [ + "display-p3", + 0.3362745098, + 0.39901960784, + 0.43823529411 + ] + } }, { "mediaFeature": "prefers-color-scheme: dark", - "color": [ - { - "attributeName": "--main-navigationbar-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.0156862745, - "valueTwo": 0.02352941176, - "valueThree": 0.03529411764 - } - }, - { - "attributeName": "--canvas-topbar-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.05490196078, - "valueTwo": 0.06666666666, - "valueThree": 0.09019607843 - } - }, - { - "attributeName": "--canvas-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 1, - "valueTwo": 1, - "valueThree": 1 - } - }, - { - "attributeName": "--sidebar-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 1, - "valueTwo": 1, - "valueThree": 1 - } - }, - { - "attributeName": "--background-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.09019607843, - "valueTwo": 0.10196078431, - "valueThree": 0.13333333333 - } - }, - { - "attributeName": "--console-selectedtab-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.05490196078, - "valueTwo": 0.06666666666, - "valueThree": 0.09019607843 - } - }, - { - "attributeName": "--console-unselectedtab-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.0156862745, - "valueTwo": 0.02352941176, - "valueThree": 0.03529411764 - } - }, - { - "attributeName": "--console-topbar-background-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.0156862745, - "valueTwo": 0.02352941176, - "valueThree": 0.03529411764 - } - }, - { - "attributeName": "--console-text-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 1, - "valueTwo": 1, - "valueThree": 1 - } - }, - { - "attributeName": "--sidebar-element-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.19215686274, - "valueTwo": 0.21176470588, - "valueThree": 0.23529411764 - } - }, - { - "attributeName": "--sidebar-element-hover-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.12215686274, - "valueTwo": 0.23176470588, - "valueThree": 0.25529411764 - } - }, - { - "attributeName": "--queries-input-background-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 0.05490196078, - "valueTwo": 0.06666666666, - "valueThree": 0.09019607843 - } - }, - { - "attributeName": "--canvas-action-color", - "color": { - "colorGamut": "display-p3", - "valueOne": 1, - "valueTwo": 1, - "valueThree": 1 - } - } - ] + "color": { + "--main-navigationbar-color": [ + "display-p3", + 0.0156862745, + 0.02352941176, + 0.03529411764 + ], + "--canvas-topbar-color": [ + "display-p3", + 0.05490196078, + 0.06666666666, + 0.09019607843 + ], + "--canvas-text-color": ["display-p3", 1, 1, 1], + "--sidebar-text-color": ["display-p3", 1, 1, 1], + "--background-color": [ + "display-p3", + 0.09019607843, + 0.10196078431, + 0.13333333333 + ], + "--console-selectedtab-color": [ + "display-p3", + 0.08490196078, + 0.09666666666, + 0.12019607843 + ], + "--console-unselectedtab-color": [ + "display-p3", + 0.0156862745, + 0.02352941176, + 0.03529411764 + ], + "--console-topbar-background-color": [ + "display-p3", + 0.0156862745, + 0.02352941176, + 0.03529411764 + ], + "--console-text-color": ["display-p3", 1, 1, 1], + "--sidebar-element-color": [ + "display-p3", + 0.19215686274, + 0.21176470588, + 0.23529411764 + ], + "--sidebar-element-hover-color": [ + "display-p3", + 0.12215686274, + 0.23176470588, + 0.25529411764 + ], + "--queries-input-background-color": [ + "display-p3", + 0.05490196078, + 0.06666666666, + 0.09019607843 + ], + "--canvas-action-color": ["display-p3", 1, 1, 1], + "--console-tab-hover-color": [ + "display-p3", + 0.13490196078, + 0.14666666666, + 0.17019607843 + ] + } } ] } diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index 6613ee15..229a3dae 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -1,4 +1,4 @@ -import type ColorValue from "./ZodSchemas/GenericSchemas/ColorValue"; +import type ColorValue from "./ZodSchemas/AttributeSchemas/ColorAttribute"; import type MediaScheme from "./ZodSchemas/MediaScheme"; import MediaSchemes from "./ZodSchemas/MediaSchemes"; @@ -11,7 +11,7 @@ import type { z } from "zod"; */ class GlobalCssSchemesLoader { private _window: Window; - private _mediaSchemes: z.infer[]; + private _mediaSchemes: z.infer; private _propertyNames: string[] = []; // SUPPORTED MEDIA FEATURES @@ -27,64 +27,73 @@ class GlobalCssSchemesLoader { // Parse and apply the different properties this._mediaSchemes = this.parseMediaFeatures(); - this.applyMediaFeatures(); + this.applySchemes(); // Add event listeners to supported features this.addEventListeners(); - - // Gather the property names - this.gatherPropertyNames(); } /** * Method for applying the specified styles */ - applyMediaFeatures() { + applySchemes() { + // Apply standard css variables + this.applyCssVariables(this._mediaSchemes.default); + // Apply each of the mediafeatures in the order in which they are specified in the .json file - this._mediaSchemes.forEach((scheme) => { + this._mediaSchemes.schemes.forEach((scheme) => { // Return early if the medie feature does not match if ( - !this._window.matchMedia(`(${scheme.mediaFeature})`).matches && - scheme.mediaFeature !== "standard" + this._supportedMediaFeatures.includes(scheme.mediaFeature) && + this._window.matchMedia(`(${scheme.mediaFeature})`).matches ) { - return; + this.applyCssVariables(scheme); } + }); + } - // Set color properties - if (scheme.color) { - scheme.color.forEach((attribute) => { - this._window.document.documentElement.style.setProperty( - attribute.attributeName, - this.createCssColor(attribute.color), - ); - }); + /** + * Method for applying CSS variabels for a specific mediafeature + * @param feature + */ + applyCssVariables(feature: z.infer) { + // Apply color variables + if (feature.color) { + for (const [key, val] of Object.entries(feature.color)) { + this._window.document.documentElement.style.setProperty( + key, + this.createCssColor(val), + ); + this._propertyNames.push(key); } + } - // Set fontSize properties - if (scheme.fontSize) { - scheme.fontSize.forEach((attribute) => { - this._window.document.documentElement.style.setProperty( - attribute.attributeName, - attribute.size.size + attribute.size.unit, //TODO: Check the font size number - ); - }); + // Apply font size variables + if (feature.fontSize) { + for (const [key, val] of Object.entries(feature.fontSize)) { + this._window.document.documentElement.style.setProperty( + key, + val[0] + val[1], //TODO: Check the font size number + ); + this._propertyNames.push(key); } + } - // Set border properties - if (scheme.border) { - scheme.border.forEach((attribute) => { - this._window.document.documentElement.style.setProperty( - attribute.attributeName, - this.createCssColor(attribute.color) + - " " + - attribute.style + - " " + - attribute.width.size + - attribute.width.unit, - ); - }); + // Apply border variables + if (feature.border) { + for (const [key, val] of Object.entries(feature.border)) { + this._window.document.documentElement.style.setProperty( + key, + this.createCssColor(val[2]) /* Border color */ + + " " + + val[0] /* Border style */ + + " " + + val[1][0] /* Border size */ + + val[1][1] /* Border size unit */, + ); + this._propertyNames.push(key); } - }); + } } /** @@ -96,6 +105,8 @@ class GlobalCssSchemesLoader { attribute, ); }); + + this._propertyNames = []; } /** @@ -103,47 +114,13 @@ class GlobalCssSchemesLoader { */ reapplyMediaFeatures() { this.clearAppliedProperties(); - this.applyMediaFeatures(); - } - - /** - * Method that gathers all property names from the config to be able to remove them later - */ - gatherPropertyNames() { - this._mediaSchemes.forEach((scheme) => { - // Check and add color attribute names - if (scheme.color) { - scheme.color.forEach((attr) => { - if (!this._propertyNames.includes(attr.attributeName)) { - this._propertyNames.push(attr.attributeName); - } - }); - } - - // Check and add fontSize attribute names - if (scheme.fontSize) { - scheme.fontSize.forEach((attr) => { - if (!this._propertyNames.includes(attr.attributeName)) { - this._propertyNames.push(attr.attributeName); - } - }); - } - - // Check and add border attribute names - if (scheme.border) { - scheme.border.forEach((attr) => { - if (!this._propertyNames.includes(attr.attributeName)) { - this._propertyNames.push(attr.attributeName); - } - }); - } - }); + this.applySchemes(); } /** - * Method for loading the ColorSchemes.json file + * Method for loading the GlobalCssProperties.json file */ - private parseMediaFeatures(): z.infer[] { + private parseMediaFeatures(): z.infer { // Parsing media features const parsedMediaFeatures = MediaSchemes.safeParse(GlobalCssProperties); @@ -152,7 +129,7 @@ class GlobalCssSchemesLoader { throw new Error(parsedMediaFeatures.error.message); } - return parsedMediaFeatures.data.mediaSchemes; + return parsedMediaFeatures.data; } /** @@ -188,18 +165,18 @@ class GlobalCssSchemesLoader { let cssColor: string; // Check if color gamut is supported - if (!supportedGamuts.includes(color.colorGamut)) { + if (!supportedGamuts.includes(color[0])) { throw new Error( - `Color gamut "${color.colorGamut}" specified in parsed global css styles, is not supported."`, + `Color gamut "${color[0]}" specified in parsed global css styles, is not supported."`, ); } // Check if values are within range (0.0 - 1.0) if ( - this.outOfColorRange(color.valueOne) || - this.outOfColorRange(color.valueTwo) || - this.outOfColorRange(color.valueThree) || - (color.alpha && this.outOfColorRange(color.alpha)) + this.outOfColorRange(color[1]) || + this.outOfColorRange(color[2]) || + this.outOfColorRange(color[3]) || + (color[4] && this.outOfColorRange(color[4])) ) { throw new Error( "Color value in parsed global css styles out of range (0.0 - 1.0).", @@ -207,10 +184,10 @@ class GlobalCssSchemesLoader { } // Create CSS color string - if (color.alpha) { - cssColor = `color(${color.colorGamut} ${color.valueOne} ${color.valueTwo} ${color.valueThree} / ${color.alpha})`; + if (color[4]) { + cssColor = `color(${color[0]} ${color[1]} ${color[2]} ${color[3]} / ${color[4]})`; } else { - cssColor = `color(${color.colorGamut} ${color.valueOne} ${color.valueTwo} ${color.valueThree})`; + cssColor = `color(${color[0]} ${color[1]} ${color[2]} ${color[3]})`; } return cssColor; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts index 09124759..90a53d19 100644 --- a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/BorderAttribute.ts @@ -1,17 +1,16 @@ import { z } from "zod"; -import ColorValue from "../GenericSchemas/ColorValue"; -import Size from "../GenericSchemas/SizeValue"; +import ColorAttribute from "./ColorAttribute"; +import SizeAttribute from "./SizeAttribute"; /** * Represents a border in CSS. * A border has a string containing the styles of the border, a width representing the thickness of the border and a color. */ -const BorderAttribute = z.object({ - attributeName: z.string(), - style: z.string(), - width: Size, - color: ColorValue, -}); +const BorderAttribute = z.tuple([ + z.string(), // Border style string + SizeAttribute, // Thickness of the border + ColorAttribute, // The color of the border +]); export default BorderAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts index 52702a85..64c58e4f 100644 --- a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts @@ -1,9 +1,30 @@ import { z } from "zod"; -import ColorValue from "../GenericSchemas/ColorValue"; -const ColorAttribute = z.object({ - attributeName: z.string(), - color: ColorValue, -}); +/** + * The values for the colors must be within the range of 0-1 as the implementation is based on the color() css function. + * See information about the color function on: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color. + * The alpha value is optional, and is also a number within the range 0-1. + * + * Example: + * To represent the color "rgb(255 0 0)"" it is writen as "color(srgb 1 0 0)". + * To convert the individual RGB values from the range 0-255 to the range 0-1 one simply has to use the following formula: + * (old value)/255 = new value + */ +const ColorWithAlpha = z.tuple([ + z.string(), // The Color Gamut + z.number(), // Red value (Range 0-1) + z.number(), // Green value (Range 0-1) + z.number(), // Blue value (Range 0-1) + z.number().optional(), // Optional alpha value +]); + +const ColorWithoutAlpha = z.tuple([ + z.string(), // The Color Gamut + z.number(), // Red value (Range 0-1) + z.number(), // Green value (Range 0-1) + z.number(), // Blue value (Range 0-1) +]); + +const ColorAttribute = z.union([ColorWithoutAlpha, ColorWithAlpha]); export default ColorAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts deleted file mode 100644 index 46bcbbec..00000000 --- a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/FontSizeAttribute.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { z } from "zod"; -import SizeValue from "../GenericSchemas/SizeValue"; - -const FontSizeAttribute = z.object({ - attributeName: z.string(), - size: SizeValue, -}); - -export default FontSizeAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/SizeAttribute.ts similarity index 53% rename from src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts rename to src/lib/classes/styling/ZodSchemas/AttributeSchemas/SizeAttribute.ts index 57e5b693..bfea1164 100644 --- a/src/lib/classes/styling/ZodSchemas/GenericSchemas/SizeValue.ts +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/SizeAttribute.ts @@ -5,9 +5,9 @@ import { z } from "zod"; * Example: "3em" would be represented as "size: 3" and "unit: 'em'" */ -const SizeValue = z.object({ - size: z.number(), - unit: z.string(), -}); +const SizeAttribute = z.tuple([ + z.number(), // The numerical size + z.string(), // The unit of the size +]); -export default SizeValue; +export default SizeAttribute; diff --git a/src/lib/classes/styling/ZodSchemas/CSSVariables.ts b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts new file mode 100644 index 00000000..bf168129 --- /dev/null +++ b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts @@ -0,0 +1,43 @@ +/** + * Document for specifying supported variables + */ +import { z } from "zod"; +import ColorAttribute from "./AttributeSchemas/ColorAttribute"; +import BorderAttribute from "./AttributeSchemas/BorderAttribute"; +import SizeValue from "./AttributeSchemas/SizeAttribute"; + +// Supported CSS color variables +export const ColorVariables = z.object({ + "--navigationbar-text-color": ColorAttribute.optional(), + "--console-scrollbar-thumb-color": ColorAttribute.optional(), + "--console-scrollbar-thumbhover-color": ColorAttribute.optional(), + "--query-success-color": ColorAttribute.optional(), + "--query-warning-color": ColorAttribute.optional(), + "--query-error-color": ColorAttribute.optional(), + "--main-navigationbar-color": ColorAttribute.optional(), + "--canvas-topbar-color": ColorAttribute.optional(), + "--canvas-text-color": ColorAttribute.optional(), + "--sidebar-text-color": ColorAttribute.optional(), + "--background-color": ColorAttribute.optional(), + "--console-selectedtab-color": ColorAttribute.optional(), + "--console-unselectedtab-color": ColorAttribute.optional(), + "--console-topbar-background-color": ColorAttribute.optional(), + "--console-text-color": ColorAttribute.optional(), + "--sidebar-element-color": ColorAttribute.optional(), + "--sidebar-element-hover-color": ColorAttribute.optional(), + "--queries-input-background-color": ColorAttribute.optional(), + "--canvas-action-color": ColorAttribute.optional(), + "--console-tab-hover-color": ColorAttribute.optional(), +}); + +// Supported CSS font size variables +export const FontSizeVariables = z.object({ + "--sidebar-fontsize": SizeValue.optional(), + "--sidebar-navigationbar-fontsize": SizeValue.optional(), +}); + +// Supported CSS border variables +export const BorderVariables = z.object({ + "--main-navigationbar-border": BorderAttribute.optional(), + "--main-innernavigationbar-border": BorderAttribute.optional(), +}); diff --git a/src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts b/src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts deleted file mode 100644 index 20077279..00000000 --- a/src/lib/classes/styling/ZodSchemas/GenericSchemas/ColorValue.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { z } from "zod"; - -/** - * The values for the colors must be within the range of 0-1 as the implementation is based on the color() css function. - * See information about the color function on: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color. - * The alpha value is optional, and is also a number within the range 0-1. - * - * Example: - * To represent the color "rgb(255 0 0)"" it is writen as "color(srgb 1 0 0)". - * To convert the individual RGB values from the range 0-255 to the range 0-1 one simply has to use the following formula: - * (old value)/255 = new value - */ - -const ColorValue = z.object({ - colorGamut: z.string(), - valueOne: z.number(), - valueTwo: z.number(), - valueThree: z.number(), - alpha: z.number().optional(), -}); - -export default ColorValue; diff --git a/src/lib/classes/styling/ZodSchemas/MediaScheme.ts b/src/lib/classes/styling/ZodSchemas/MediaScheme.ts index 8d28d991..3885e706 100644 --- a/src/lib/classes/styling/ZodSchemas/MediaScheme.ts +++ b/src/lib/classes/styling/ZodSchemas/MediaScheme.ts @@ -1,7 +1,9 @@ import { z } from "zod"; -import ColorAttribute from "./AttributeSchemas/ColorAttribute"; -import BorderAttribute from "./AttributeSchemas/BorderAttribute"; -import FontSizeAttribute from "./AttributeSchemas/FontSizeAttribute"; +import { + ColorVariables, + FontSizeVariables, + BorderVariables, +} from "./CSSVariables"; /** * A MediaScheme represents one of the many media queries. @@ -13,9 +15,9 @@ import FontSizeAttribute from "./AttributeSchemas/FontSizeAttribute"; const MediaScheme = z.object({ mediaFeature: z.string(), - color: z.array(ColorAttribute).optional(), - fontSize: z.array(FontSizeAttribute).optional(), - border: z.array(BorderAttribute).optional(), + color: ColorVariables.optional(), + fontSize: FontSizeVariables.optional(), + border: BorderVariables.optional(), }); export default MediaScheme; diff --git a/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts b/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts index 19be698a..633d2dc6 100644 --- a/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts +++ b/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts @@ -2,7 +2,8 @@ import { z } from "zod"; import MediaScheme from "./MediaScheme"; const MediaSchemes = z.object({ - mediaSchemes: z.array(MediaScheme), + default: MediaScheme, + schemes: z.array(MediaScheme), }); export default MediaSchemes; diff --git a/src/lib/components/console/Console.svelte b/src/lib/components/console/Console.svelte index c83dc85a..3ef4c3a1 100644 --- a/src/lib/components/console/Console.svelte +++ b/src/lib/components/console/Console.svelte @@ -255,7 +255,7 @@ } .consoleTab:hover { - filter: brightness(0.9); + background-color: var(--console-tab-hover-color) !important; } .frontEndButton { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4103c974..1d8df68c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,7 +4,12 @@ import { browser } from "$app/environment"; if (browser) { - new GlobalCssSchemesLoader(window); + // Catch errors here and show error popup + try { + new GlobalCssSchemesLoader(window); + } catch (e) { + console.log(e); + } } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f7f243ce..02d64796 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -154,6 +154,7 @@ .inner-nav3 { background-color: var(--main-navigationbar-color); border: var(--main-innernavigationbar-border); + font-size: var(--sidebar-navigationbar-fontsize); } .inner-nav2 { @@ -200,6 +201,7 @@ .sidePanelContent { color: var(--sidebar-text-color); + font-size: var(--sidebar-standard-fontsize); height: 100%; width: 100%; overflow-y: auto; From 3cc50d56ae667561633eaed67cfc9b111233920b Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 12:18:42 +0100 Subject: [PATCH 04/12] Changed resizer size --- src/lib/components/console/Console.svelte | 2 +- src/routes/+page.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/console/Console.svelte b/src/lib/components/console/Console.svelte index 3ef4c3a1..569862db 100644 --- a/src/lib/components/console/Console.svelte +++ b/src/lib/components/console/Console.svelte @@ -196,7 +196,7 @@ #consoleResizer { background-color: black; - height: 0.1em; + height: 0.2em; } .console::-webkit-scrollbar { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 02d64796..c9be898a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -211,7 +211,7 @@ .resizer { background-color: black; - flex-basis: 0.1em; + flex-basis: 0.2em; cursor: col-resize; } From 3d385d92b49793e92c81235cfcb14be567d666c8 Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 13:32:11 +0100 Subject: [PATCH 05/12] Removed unnecessary media schemes --- src/lib/GlobalCssProperties.json | 123 +++++++++--------- .../classes/styling/GlobalCssSchemesLoader.ts | 7 +- 2 files changed, 60 insertions(+), 70 deletions(-) diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json index ca8e7bc1..4dd30eed 100644 --- a/src/lib/GlobalCssProperties.json +++ b/src/lib/GlobalCssProperties.json @@ -32,6 +32,65 @@ 0.82745098039, 0.18431372549, 0.18431372549 + ], + "--main-navigationbar-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--canvas-topbar-color": [ + "display-p3", + 0.2862745098, + 0.34901960784, + 0.38823529411 + ], + "--canvas-text-color": ["display-p3", 0, 0, 0], + "--sidebar-text-color": ["display-p3", 0, 0, 0], + "--background-color": [ + "display-p3", + 0.95686274509, + 0.95686274509, + 0.95686274509 + ], + "--console-selectedtab-color": [ + "display-p3", + 0.2862745098, + 0.34901960784, + 0.38823529411 + ], + "--console-unselectedtab-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--console-topbar-background-color": [ + "display-p3", + 0.22745098039, + 0.27450980392, + 0.30588235294 + ], + "--console-text-color": ["display-p3", 0, 0, 0], + "--sidebar-element-color": [ + "display-p3", + 0.93333333333, + 0.93333333333, + 0.93333333333 + ], + "--sidebar-element-hover-color": [ + "display-p3", + 0.81176470588, + 0.84705882352, + 0.86274509803 + ], + "--queries-input-background-color": ["display-p3", 1, 1, 1], + "--canvas-action-color": ["display-p3", 0, 0, 0], + "--console-tab-hover-color": [ + "display-p3", + 0.3362745098, + 0.39901960784, + 0.43823529411 ] }, "fontSize": { @@ -52,70 +111,6 @@ } }, "schemes": [ - { - "mediaFeature": "prefers-color-scheme: light", - "color": { - "--main-navigationbar-color": [ - "display-p3", - 0.22745098039, - 0.27450980392, - 0.30588235294 - ], - "--canvas-topbar-color": [ - "display-p3", - 0.2862745098, - 0.34901960784, - 0.38823529411 - ], - "--canvas-text-color": ["display-p3", 0, 0, 0], - "--sidebar-text-color": ["display-p3", 0, 0, 0], - "--background-color": [ - "display-p3", - 0.95686274509, - 0.95686274509, - 0.95686274509 - ], - "--console-selectedtab-color": [ - "display-p3", - 0.2862745098, - 0.34901960784, - 0.38823529411 - ], - "--console-unselectedtab-color": [ - "display-p3", - 0.22745098039, - 0.27450980392, - 0.30588235294 - ], - "--console-topbar-background-color": [ - "display-p3", - 0.22745098039, - 0.27450980392, - 0.30588235294 - ], - "--console-text-color": ["display-p3", 0, 0, 0], - "--sidebar-element-color": [ - "display-p3", - 0.93333333333, - 0.93333333333, - 0.93333333333 - ], - "--sidebar-element-hover-color": [ - "display-p3", - 0.81176470588, - 0.84705882352, - 0.86274509803 - ], - "--queries-input-background-color": ["display-p3", 1, 1, 1], - "--canvas-action-color": ["display-p3", 0, 0, 0], - "--console-tab-hover-color": [ - "display-p3", - 0.3362745098, - 0.39901960784, - 0.43823529411 - ] - } - }, { "mediaFeature": "prefers-color-scheme: dark", "color": { diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index 229a3dae..131c867e 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -15,12 +15,7 @@ class GlobalCssSchemesLoader { private _propertyNames: string[] = []; // SUPPORTED MEDIA FEATURES - private _supportedMediaFeatures: string[] = [ - "prefers-color-scheme: dark", - "prefers-color-scheme: light", - "prefers-reduced-motion", - "prefers-reduced-transparency", - ]; + private _supportedMediaFeatures: string[] = ["prefers-color-scheme: dark"]; constructor(window: Window) { this._window = window; From 95fb9e7404e6560547b3431105d107457bd9e92d Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 13:58:55 +0100 Subject: [PATCH 06/12] Removed mediaFeature check --- src/lib/classes/styling/GlobalCssSchemesLoader.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index 131c867e..052f5979 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -14,9 +14,6 @@ class GlobalCssSchemesLoader { private _mediaSchemes: z.infer; private _propertyNames: string[] = []; - // SUPPORTED MEDIA FEATURES - private _supportedMediaFeatures: string[] = ["prefers-color-scheme: dark"]; - constructor(window: Window) { this._window = window; @@ -38,10 +35,7 @@ class GlobalCssSchemesLoader { // Apply each of the mediafeatures in the order in which they are specified in the .json file this._mediaSchemes.schemes.forEach((scheme) => { // Return early if the medie feature does not match - if ( - this._supportedMediaFeatures.includes(scheme.mediaFeature) && - this._window.matchMedia(`(${scheme.mediaFeature})`).matches - ) { + if (this._window.matchMedia(`(${scheme.mediaFeature})`).matches) { this.applyCssVariables(scheme); } }); @@ -131,9 +125,9 @@ class GlobalCssSchemesLoader { * Method for adding appropriate event listeners */ private addEventListeners() { - this._supportedMediaFeatures.forEach((feature) => { + this._mediaSchemes.schemes.forEach((scheme) => { this._window - .matchMedia(`(${feature})`) + .matchMedia(`(${scheme.mediaFeature})`) .addEventListener("change", () => { this.reapplyMediaFeatures(); }); From e7e73dc83d1ed3421fb9de825f7572dcdc90b244 Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 14:02:17 +0100 Subject: [PATCH 07/12] Corrrect the parsed error type --- src/lib/classes/styling/GlobalCssSchemesLoader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index 052f5979..b45f5c4c 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -115,7 +115,7 @@ class GlobalCssSchemesLoader { // Throwing error if the parsing failed if (!parsedMediaFeatures.success) { - throw new Error(parsedMediaFeatures.error.message); + throw new TypeError(parsedMediaFeatures.error.message); } return parsedMediaFeatures.data; From 53836447ae98d00c3d7e3f8ef5ae7f226c3f6ca9 Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 14:08:39 +0100 Subject: [PATCH 08/12] Removed the passing of the global window variable --- .../classes/styling/GlobalCssSchemesLoader.ts | 22 +++++++++---------- src/routes/+layout.svelte | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index b45f5c4c..aa92fe9c 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -10,12 +10,14 @@ import type { z } from "zod"; * Class for handling the loading of different properties based on active media features */ class GlobalCssSchemesLoader { - private _window: Window; private _mediaSchemes: z.infer; private _propertyNames: string[] = []; - constructor(window: Window) { - this._window = window; + constructor() { + if (!("window" in globalThis)) + throw new Error( + "The CSS loader needs access to the window and DOM elements", + ); // Parse and apply the different properties this._mediaSchemes = this.parseMediaFeatures(); @@ -35,7 +37,7 @@ class GlobalCssSchemesLoader { // Apply each of the mediafeatures in the order in which they are specified in the .json file this._mediaSchemes.schemes.forEach((scheme) => { // Return early if the medie feature does not match - if (this._window.matchMedia(`(${scheme.mediaFeature})`).matches) { + if (window.matchMedia(`(${scheme.mediaFeature})`).matches) { this.applyCssVariables(scheme); } }); @@ -49,7 +51,7 @@ class GlobalCssSchemesLoader { // Apply color variables if (feature.color) { for (const [key, val] of Object.entries(feature.color)) { - this._window.document.documentElement.style.setProperty( + window.document.documentElement.style.setProperty( key, this.createCssColor(val), ); @@ -60,7 +62,7 @@ class GlobalCssSchemesLoader { // Apply font size variables if (feature.fontSize) { for (const [key, val] of Object.entries(feature.fontSize)) { - this._window.document.documentElement.style.setProperty( + window.document.documentElement.style.setProperty( key, val[0] + val[1], //TODO: Check the font size number ); @@ -71,7 +73,7 @@ class GlobalCssSchemesLoader { // Apply border variables if (feature.border) { for (const [key, val] of Object.entries(feature.border)) { - this._window.document.documentElement.style.setProperty( + window.document.documentElement.style.setProperty( key, this.createCssColor(val[2]) /* Border color */ + " " + @@ -90,9 +92,7 @@ class GlobalCssSchemesLoader { */ private clearAppliedProperties() { this._propertyNames.forEach((attribute) => { - this._window.document.documentElement.style.removeProperty( - attribute, - ); + window.document.documentElement.style.removeProperty(attribute); }); this._propertyNames = []; @@ -126,7 +126,7 @@ class GlobalCssSchemesLoader { */ private addEventListeners() { this._mediaSchemes.schemes.forEach((scheme) => { - this._window + window .matchMedia(`(${scheme.mediaFeature})`) .addEventListener("change", () => { this.reapplyMediaFeatures(); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1d8df68c..203cce1f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,7 +6,7 @@ if (browser) { // Catch errors here and show error popup try { - new GlobalCssSchemesLoader(window); + new GlobalCssSchemesLoader(); } catch (e) { console.log(e); } From 99067423e4d94aa84ea21e77d9c6f28406e9064c Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 14:14:55 +0100 Subject: [PATCH 09/12] Removed the need for range checking by using zod --- .../classes/styling/GlobalCssSchemesLoader.ts | 21 ------------------- .../AttributeSchemas/ColorAttribute.ts | 14 ++++++------- 2 files changed, 7 insertions(+), 28 deletions(-) diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index aa92fe9c..46316087 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -160,18 +160,6 @@ class GlobalCssSchemesLoader { ); } - // Check if values are within range (0.0 - 1.0) - if ( - this.outOfColorRange(color[1]) || - this.outOfColorRange(color[2]) || - this.outOfColorRange(color[3]) || - (color[4] && this.outOfColorRange(color[4])) - ) { - throw new Error( - "Color value in parsed global css styles out of range (0.0 - 1.0).", - ); - } - // Create CSS color string if (color[4]) { cssColor = `color(${color[0]} ${color[1]} ${color[2]} ${color[3]} / ${color[4]})`; @@ -181,15 +169,6 @@ class GlobalCssSchemesLoader { return cssColor; } - - /** - * Support method for checking if color is within range - * @param value - * @returns Boolean value representing if value is out of range - */ - private outOfColorRange(value: number): boolean { - return value > 1 || value < 0; - } } export default GlobalCssSchemesLoader; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts index 64c58e4f..58563513 100644 --- a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts @@ -12,17 +12,17 @@ import { z } from "zod"; */ const ColorWithAlpha = z.tuple([ z.string(), // The Color Gamut - z.number(), // Red value (Range 0-1) - z.number(), // Green value (Range 0-1) - z.number(), // Blue value (Range 0-1) - z.number().optional(), // Optional alpha value + z.number().min(0).max(1), // Red value (Range 0-1) + z.number().min(0).max(1), // Green value (Range 0-1) + z.number().min(0).max(1), // Blue value (Range 0-1) + z.number().min(0).max(1), // Optional alpha value ]); const ColorWithoutAlpha = z.tuple([ z.string(), // The Color Gamut - z.number(), // Red value (Range 0-1) - z.number(), // Green value (Range 0-1) - z.number(), // Blue value (Range 0-1) + z.number().min(0).max(1), // Red value (Range 0-1) + z.number().min(0).max(1), // Green value (Range 0-1) + z.number().min(0).max(1), // Blue value (Range 0-1) ]); const ColorAttribute = z.union([ColorWithoutAlpha, ColorWithAlpha]); From 61b56a5ef19d1ba9dde9072ed3a3594f16ade8ac Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 2 Nov 2023 15:51:19 +0100 Subject: [PATCH 10/12] Improved the zod schemes The zos schemes now enforce: - The color value range - That the "default" mediascheme contains a specification of all specified CSS variables and more... --- .../classes/styling/GlobalCssSchemesLoader.ts | 18 ----- .../AttributeSchemas/ColorAttribute.ts | 17 ++++- .../styling/ZodSchemas/CSSVariables.ts | 66 ++++++++++--------- .../classes/styling/ZodSchemas/MediaScheme.ts | 23 +++++-- .../styling/ZodSchemas/MediaSchemes.ts | 13 ++-- 5 files changed, 75 insertions(+), 62 deletions(-) diff --git a/src/lib/classes/styling/GlobalCssSchemesLoader.ts b/src/lib/classes/styling/GlobalCssSchemesLoader.ts index 46316087..dc2c5244 100644 --- a/src/lib/classes/styling/GlobalCssSchemesLoader.ts +++ b/src/lib/classes/styling/GlobalCssSchemesLoader.ts @@ -140,26 +140,8 @@ class GlobalCssSchemesLoader { * @returns CSS color string */ private createCssColor(color: z.infer): string { - const supportedGamuts: string[] = [ - "srgb", - "srgb-linear", - "display-p3", - "a98-rgb", - "prophoto-rgb", - "rec2020", - "xyz", - "xyz-d50", - "xyz-d65", - ]; let cssColor: string; - // Check if color gamut is supported - if (!supportedGamuts.includes(color[0])) { - throw new Error( - `Color gamut "${color[0]}" specified in parsed global css styles, is not supported."`, - ); - } - // Create CSS color string if (color[4]) { cssColor = `color(${color[0]} ${color[1]} ${color[2]} ${color[3]} / ${color[4]})`; diff --git a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts index 58563513..819a16a1 100644 --- a/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts +++ b/src/lib/classes/styling/ZodSchemas/AttributeSchemas/ColorAttribute.ts @@ -10,8 +10,21 @@ import { z } from "zod"; * To convert the individual RGB values from the range 0-255 to the range 0-1 one simply has to use the following formula: * (old value)/255 = new value */ + +const SupportedGamuts = z.enum([ + "srgb", + "srgb-linear", + "display-p3", + "a98-rgb", + "prophoto-rgb", + "rec2020", + "xyz", + "xyz-d50", + "xyz-d65", +]); + const ColorWithAlpha = z.tuple([ - z.string(), // The Color Gamut + SupportedGamuts, // The Color Gamut z.number().min(0).max(1), // Red value (Range 0-1) z.number().min(0).max(1), // Green value (Range 0-1) z.number().min(0).max(1), // Blue value (Range 0-1) @@ -19,7 +32,7 @@ const ColorWithAlpha = z.tuple([ ]); const ColorWithoutAlpha = z.tuple([ - z.string(), // The Color Gamut + SupportedGamuts, // The Color Gamut z.number().min(0).max(1), // Red value (Range 0-1) z.number().min(0).max(1), // Green value (Range 0-1) z.number().min(0).max(1), // Blue value (Range 0-1) diff --git a/src/lib/classes/styling/ZodSchemas/CSSVariables.ts b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts index bf168129..3faedb2c 100644 --- a/src/lib/classes/styling/ZodSchemas/CSSVariables.ts +++ b/src/lib/classes/styling/ZodSchemas/CSSVariables.ts @@ -7,37 +7,43 @@ import BorderAttribute from "./AttributeSchemas/BorderAttribute"; import SizeValue from "./AttributeSchemas/SizeAttribute"; // Supported CSS color variables -export const ColorVariables = z.object({ - "--navigationbar-text-color": ColorAttribute.optional(), - "--console-scrollbar-thumb-color": ColorAttribute.optional(), - "--console-scrollbar-thumbhover-color": ColorAttribute.optional(), - "--query-success-color": ColorAttribute.optional(), - "--query-warning-color": ColorAttribute.optional(), - "--query-error-color": ColorAttribute.optional(), - "--main-navigationbar-color": ColorAttribute.optional(), - "--canvas-topbar-color": ColorAttribute.optional(), - "--canvas-text-color": ColorAttribute.optional(), - "--sidebar-text-color": ColorAttribute.optional(), - "--background-color": ColorAttribute.optional(), - "--console-selectedtab-color": ColorAttribute.optional(), - "--console-unselectedtab-color": ColorAttribute.optional(), - "--console-topbar-background-color": ColorAttribute.optional(), - "--console-text-color": ColorAttribute.optional(), - "--sidebar-element-color": ColorAttribute.optional(), - "--sidebar-element-hover-color": ColorAttribute.optional(), - "--queries-input-background-color": ColorAttribute.optional(), - "--canvas-action-color": ColorAttribute.optional(), - "--console-tab-hover-color": ColorAttribute.optional(), -}); +export const ColorVariables = z + .object({ + "--navigationbar-text-color": ColorAttribute, + "--console-scrollbar-thumb-color": ColorAttribute, + "--console-scrollbar-thumbhover-color": ColorAttribute, + "--query-success-color": ColorAttribute, + "--query-warning-color": ColorAttribute, + "--query-error-color": ColorAttribute, + "--main-navigationbar-color": ColorAttribute, + "--canvas-topbar-color": ColorAttribute, + "--canvas-text-color": ColorAttribute, + "--sidebar-text-color": ColorAttribute, + "--background-color": ColorAttribute, + "--console-selectedtab-color": ColorAttribute, + "--console-unselectedtab-color": ColorAttribute, + "--console-topbar-background-color": ColorAttribute, + "--console-text-color": ColorAttribute, + "--sidebar-element-color": ColorAttribute, + "--sidebar-element-hover-color": ColorAttribute, + "--queries-input-background-color": ColorAttribute, + "--canvas-action-color": ColorAttribute, + "--console-tab-hover-color": ColorAttribute, + }) + .strict(); // Supported CSS font size variables -export const FontSizeVariables = z.object({ - "--sidebar-fontsize": SizeValue.optional(), - "--sidebar-navigationbar-fontsize": SizeValue.optional(), -}); +export const FontSizeVariables = z + .object({ + "--sidebar-fontsize": SizeValue, + "--sidebar-navigationbar-fontsize": SizeValue, + }) + .strict(); // Supported CSS border variables -export const BorderVariables = z.object({ - "--main-navigationbar-border": BorderAttribute.optional(), - "--main-innernavigationbar-border": BorderAttribute.optional(), -}); +export const BorderVariables = z + .object({ + "--main-navigationbar-border": BorderAttribute, + "--main-innernavigationbar-border": BorderAttribute, + }) + .strict(); diff --git a/src/lib/classes/styling/ZodSchemas/MediaScheme.ts b/src/lib/classes/styling/ZodSchemas/MediaScheme.ts index 3885e706..ec66c980 100644 --- a/src/lib/classes/styling/ZodSchemas/MediaScheme.ts +++ b/src/lib/classes/styling/ZodSchemas/MediaScheme.ts @@ -13,11 +13,22 @@ import { * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries */ -const MediaScheme = z.object({ - mediaFeature: z.string(), - color: ColorVariables.optional(), - fontSize: FontSizeVariables.optional(), - border: BorderVariables.optional(), -}); +export const RequiredMediaScheme = z + .object({ + mediaFeature: z.string(), + color: ColorVariables.required(), + fontSize: FontSizeVariables.required(), + border: BorderVariables.required(), + }) + .strict(); + +const MediaScheme = z + .object({ + mediaFeature: z.string(), + color: ColorVariables.partial().optional(), + fontSize: FontSizeVariables.partial().optional(), + border: BorderVariables.partial().optional(), + }) + .strict(); export default MediaScheme; diff --git a/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts b/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts index 633d2dc6..c6da0176 100644 --- a/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts +++ b/src/lib/classes/styling/ZodSchemas/MediaSchemes.ts @@ -1,9 +1,10 @@ import { z } from "zod"; -import MediaScheme from "./MediaScheme"; - -const MediaSchemes = z.object({ - default: MediaScheme, - schemes: z.array(MediaScheme), -}); +import MediaScheme, { RequiredMediaScheme } from "./MediaScheme"; +const MediaSchemes = z + .object({ + default: RequiredMediaScheme.required(), + schemes: z.array(MediaScheme), + }) + .strict(); export default MediaSchemes; From 0e7817f50ccd63aff72b9898ab90093f2793adab Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Wed, 8 Nov 2023 10:50:24 +0100 Subject: [PATCH 11/12] Fix typo --- src/lib/components/query/Query.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/query/Query.svelte b/src/lib/components/query/Query.svelte index 67f1c5d5..616e772e 100644 --- a/src/lib/components/query/Query.svelte +++ b/src/lib/components/query/Query.svelte @@ -28,7 +28,7 @@ {:else if color === "var(--query-error-color)"} {:else} - + {/if}