From a13ef6e15d62b7842e78fa094a7fadea7f06c796 Mon Sep 17 00:00:00 2001 From: Jarrod Doyle Date: Wed, 10 Apr 2024 11:34:47 +0100 Subject: [PATCH] Add theme palettes and rename Theme to Metrics --- ui/appwindow.slint | 4 +- ui/editor_bar.slint | 10 ++--- ui/object_tool_panel.slint | 80 +++++++++++++++++++------------------- ui/status_bar.slint | 14 +++---- ui/theme.slint | 65 +++++++++++++++++++------------ ui/tool_bar.slint | 14 +++---- ui/widgets/panel.slint | 16 ++++---- 7 files changed, 110 insertions(+), 93 deletions(-) diff --git a/ui/appwindow.slint b/ui/appwindow.slint index 953cca1..ba2def7 100644 --- a/ui/appwindow.slint +++ b/ui/appwindow.slint @@ -1,4 +1,4 @@ -import { Theme } from "theme.slint"; +import { Metrics } from "theme.slint"; import { EditorBar } from "editor_bar.slint"; import { StatusBar } from "status_bar.slint"; import { ToolBar } from "tool_bar.slint"; @@ -18,7 +18,7 @@ export component AppWindow inherits Window { Rectangle { Text { - font-size: Theme.font-lg; + font-size: Metrics.font-lg; text: "INSERT VIEWPORT HERE"; vertical-alignment: center; horizontal-alignment: center; diff --git a/ui/editor_bar.slint b/ui/editor_bar.slint index 44f6360..396a92a 100644 --- a/ui/editor_bar.slint +++ b/ui/editor_bar.slint @@ -1,16 +1,16 @@ -import { Theme } from "theme.slint"; +import { Metrics } from "theme.slint"; export component EditorBar inherits Rectangle { - height: Theme.size-xl; + height: Metrics.size-xl; border-color: black; border-width: 1px; HorizontalLayout { alignment: start; - padding: Theme.padding-md; - spacing: Theme.padding-xl; + padding: Metrics.padding-md; + spacing: Metrics.padding-xl; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; vertical-alignment: center; text: "Damn look at all the options and shit here it's like Hammer 2!!"; } diff --git a/ui/object_tool_panel.slint b/ui/object_tool_panel.slint index f862e98..b5fe134 100644 --- a/ui/object_tool_panel.slint +++ b/ui/object_tool_panel.slint @@ -1,4 +1,4 @@ -import { Theme } from "theme.slint"; +import { Metrics } from "theme.slint"; import { Panel } from "widgets/panel.slint"; export component ObjectToolPanel inherits Rectangle { @@ -7,13 +7,13 @@ export component ObjectToolPanel inherits Rectangle { border-width: 1px; VerticalLayout { - padding: Theme.padding-md; - spacing: Theme.spacing-md; + padding: Metrics.padding-md; + spacing: Metrics.spacing-md; HorizontalLayout { - height: Theme.size-md; + height: Metrics.size-md; Text { - font-size: Theme.font-lg; + font-size: Metrics.font-lg; text: @tr("Object Tool"); vertical-alignment: center; } @@ -28,33 +28,33 @@ export component ObjectToolPanel inherits Rectangle { content-padding: 0px; content-spacing: 0px; HorizontalLayout { - height: Theme.size-md; - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + height: Metrics.size-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: "Object Name"; vertical-alignment: center; } } HorizontalLayout { - height: Theme.size-md; - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + height: Metrics.size-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: "Object Name"; vertical-alignment: center; } } HorizontalLayout { - height: Theme.size-md; - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + height: Metrics.size-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: "Object Name"; vertical-alignment: center; } @@ -67,33 +67,33 @@ export component ObjectToolPanel inherits Rectangle { content-padding: 0px; content-spacing: 0px; HorizontalLayout { - height: Theme.size-md; - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + height: Metrics.size-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: "Object Name"; vertical-alignment: center; } } HorizontalLayout { - height: Theme.size-md; - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + height: Metrics.size-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: "Object Name"; vertical-alignment: center; } } HorizontalLayout { - height: Theme.size-md; - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + height: Metrics.size-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: "Object Name"; vertical-alignment: center; } @@ -104,10 +104,10 @@ export component ObjectToolPanel inherits Rectangle { Panel { title: @tr("Hierarchy"); HorizontalLayout { - spacing: Theme.spacing-md; - height: Theme.size-md; + spacing: Metrics.spacing-md; + height: Metrics.size-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; vertical-alignment: center; text: @tr("Name:"); } @@ -115,10 +115,10 @@ export component ObjectToolPanel inherits Rectangle { Rectangle { border-color: black; border-width: 1px; - border-radius: Theme.radius-md; + border-radius: Metrics.radius-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; vertical-alignment: center; horizontal-alignment: left; text: "VicHutch (-514)"; @@ -128,28 +128,28 @@ export component ObjectToolPanel inherits Rectangle { Rectangle { border-color: black; border-width: 1px; - border-radius: Theme.radius-md; + border-radius: Metrics.radius-md; - width: Theme.size-md; + width: Metrics.size-md; } Rectangle { border-color: black; border-width: 1px; - border-radius: Theme.radius-md; + border-radius: Metrics.radius-md; - width: Theme.size-md; + width: Metrics.size-md; } } Rectangle { border-color: black; border-width: 1px; - border-radius: Theme.radius-md; + border-radius: Metrics.radius-md; clip: true; Text { - font-size: Theme.font-lg; + font-size: Metrics.font-lg; text: "INSERT TREE VIEW HERE"; vertical-alignment: center; horizontal-alignment: center; diff --git a/ui/status_bar.slint b/ui/status_bar.slint index 640289e..041a80d 100644 --- a/ui/status_bar.slint +++ b/ui/status_bar.slint @@ -1,17 +1,17 @@ -import { Theme } from "theme.slint"; +import { Metrics } from "theme.slint"; import { VerticalSeparator } from "widgets/separator.slint"; export component StatusBar inherits Rectangle { border-color: black; border-width: 1px; - height: Theme.size-lg; + height: Metrics.size-lg; HorizontalLayout { alignment: start; - padding-left: Theme.padding-lg; - padding-right: Theme.padding-lg; - spacing: Theme.padding-lg; + padding-left: Metrics.padding-lg; + padding-right: Metrics.padding-lg; + spacing: Metrics.padding-lg; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; vertical-alignment: center; text: "Last saved: 18:50"; } @@ -19,7 +19,7 @@ export component StatusBar inherits Rectangle { VerticalSeparator { } Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; vertical-alignment: center; text: "Saved by: Jayrude"; } diff --git a/ui/theme.slint b/ui/theme.slint index 2e30aa0..1ed7844 100644 --- a/ui/theme.slint +++ b/ui/theme.slint @@ -1,26 +1,43 @@ -export global Theme { - in-out property padding-sm: 4px; - in-out property padding-md: 8px; - in-out property padding-lg: 16px; - in-out property padding-xl: 24px; - in-out property spacing-sm: 4px; - in-out property spacing-md: 8px; - in-out property spacing-lg: 16px; - in-out property spacing-xl: 24px; - - in-out property size-sm: 16px; - in-out property size-md: 24px; - in-out property size-lg: 32px; - in-out property size-xl: 48px; - - in-out property radius-sm: 4px; - in-out property radius-md: 8px; - in-out property radius-lg: 16px; - in-out property radius-xl: 32px; - - in-out property font-sm: 10px; - in-out property font-md: 12px; - in-out property font-lg: 16px; - in-out property font-xl: 24px; +export global DarkPalette { + out property <[brush]> text: [#090d10, #263340, #4b6681, #7e99b4, #bfccd9, #eff2f6]; + out property <[brush]> background: [#090c10, #252e41, #4a5d82, #7d90b5, #bec7da, #eff1f6]; + out property <[brush]> primary: [#080d12, #203446, #3f678d, #729ac0, #b9cddf, #edf2f7]; + out property <[brush]> secondary: [#070d12, #1d3349, #396693, #6c99c6, #b6cce2, #edf2f8]; + out property <[brush]> accent: [#150e05, #523714, #a46e28, #d7a15b, #ebd0ad, #faf3ea]; +} + +export global LightPalette { + out property <[brush]> text: [#eff3f6, #bfcdd9, #7e9cb4, #4b6981, #263440, #090d10]; + out property <[brush]> background: [#f0f0f5, #c2c2d6, #8585ad, #52527a, #29293d, #0a0a0f]; + out property <[brush]> primary: [#edf2f7, #b9cddf, #729ac0, #3f678d, #203446, #080d12]; + out property <[brush]> secondary: [#edf2f8, #b6cce2, #6c99c6, #396693, #1d3349, #070d12]; + out property <[brush]> accent: [#faf3ea, #ebd0ad, #d7a15b, #a46e28, #523714, #150e05]; +} + +export global Metrics { + out property padding-sm: 4px; + out property padding-md: 8px; + out property padding-lg: 16px; + out property padding-xl: 24px; + + out property spacing-sm: 4px; + out property spacing-md: 8px; + out property spacing-lg: 16px; + out property spacing-xl: 24px; + + out property size-sm: 16px; + out property size-md: 24px; + out property size-lg: 32px; + out property size-xl: 48px; + + out property radius-sm: 4px; + out property radius-md: 8px; + out property radius-lg: 16px; + out property radius-xl: 32px; + + out property font-sm: 10px; + out property font-md: 12px; + out property font-lg: 16px; + out property font-xl: 24px; } diff --git a/ui/tool_bar.slint b/ui/tool_bar.slint index cb082db..9994769 100644 --- a/ui/tool_bar.slint +++ b/ui/tool_bar.slint @@ -1,24 +1,24 @@ -import { Theme } from "theme.slint"; +import { Metrics } from "theme.slint"; import { Button } from "std-widgets.slint"; import { HorizontalSeparator } from "widgets/separator.slint"; component ToolBarItem inherits Rectangle { - width: Theme.size-lg; - height: Theme.size-lg; + width: Metrics.size-lg; + height: Metrics.size-lg; border-color: black; border-width: 1px; - border-radius: Theme.radius-md; + border-radius: Metrics.radius-md; } export component ToolBar inherits Rectangle { - width: Theme.size-xl; + width: Metrics.size-xl; border-color: black; border-width: 1px; VerticalLayout { alignment: start; - padding: Theme.padding-md; - spacing: Theme.padding-md; + padding: Metrics.padding-md; + spacing: Metrics.padding-md; Button { checkable: true; diff --git a/ui/widgets/panel.slint b/ui/widgets/panel.slint index bcbe8cf..1445ffa 100644 --- a/ui/widgets/panel.slint +++ b/ui/widgets/panel.slint @@ -1,26 +1,26 @@ -import { Theme } from "../theme.slint"; +import { Metrics } from "../theme.slint"; export component Panel inherits Rectangle { in property title: "Title"; in property title-alignment: left; - in property content-padding: Theme.padding-md; - in property content-spacing: Theme.spacing-md; + in property content-padding: Metrics.padding-md; + in property content-spacing: Metrics.spacing-md; border-color: black; border-width: 1px; - border-radius: Theme.radius-md; + border-radius: Metrics.radius-md; clip: true; VerticalLayout { Rectangle { - height: Theme.size-md; + height: Metrics.size-md; border-color: black; border-width: 1px; HorizontalLayout { - padding-left: Theme.padding-md; - padding-right: Theme.padding-md; + padding-left: Metrics.padding-md; + padding-right: Metrics.padding-md; Text { - font-size: Theme.font-md; + font-size: Metrics.font-md; text: title; vertical-alignment: center; horizontal-alignment: title-alignment;