From cca45589858b2c9560f92de6d8b2bc431c698a94 Mon Sep 17 00:00:00 2001 From: sheaf Date: Sun, 8 Jan 2023 21:12:00 +0100 Subject: [PATCH] put all colours into a separate CSS file --- MetaBrush.cabal | 1 + assets/colours.css | 42 ++++++ assets/theme.css | 206 ++++++++++++++------------- src/app/MetaBrush/Asset/Colours.hs | 4 +- src/app/MetaBrush/Render/Document.hs | 6 +- 5 files changed, 156 insertions(+), 103 deletions(-) create mode 100644 assets/colours.css diff --git a/MetaBrush.cabal b/MetaBrush.cabal index d7df970..b2262e3 100644 --- a/MetaBrush.cabal +++ b/MetaBrush.cabal @@ -10,6 +10,7 @@ data-dir: assets data-files: theme.css + colours.css icons/* description: diff --git a/assets/colours.css b/assets/colours.css new file mode 100644 index 0000000..26d9249 --- /dev/null +++ b/assets/colours.css @@ -0,0 +1,42 @@ +/* Colours */ + +@define-color bg rgb( 41, 40, 40); +@define-color border rgb( 28, 25, 25); +@define-color active rgb( 72, 70, 61); +@define-color disabled rgb( 149, 149, 149); +@define-color highlight rgb( 234, 223, 204); +@define-color contrast rgb( 247, 244, 239); +@define-color cursor rgb( 247, 244, 239); +@define-color cursorStroke rgb( 0, 0, 0); +@define-color cursorIndicator rgba( 199, 40, 29, 0.9); +@define-color plain rgb( 212, 190, 152); +@define-color base rgb( 234, 223, 204); +@define-color splash rgb( 245, 136, 27); +@define-color pathPoint rgb( 129, 131, 241); +@define-color pathPointStroke rgb( 0, 0, 0); +@define-color controlPoint rgb( 161, 221, 233); +@define-color controlPointLine rgb( 161, 221, 233); +@define-color controlPointStroke rgb( 0, 0, 0); +@define-color path rgb( 184, 80, 80); +@define-color brush rgb( 106, 63, 222); +@define-color brushStroke rgba( 235, 118, 219, 0.66); +@define-color brushCenter rgb( 0, 0, 0); +@define-color pointHover rgb( 231, 172, 83); +@define-color pointSelected rgb( 252, 237, 120); +@define-color scrollBar rgba( 45, 39, 39, 0.66); +@define-color ruler rgb( 237, 226, 154); +@define-color rulerBorder rgb( 0, 0, 0); +@define-color rulerTick rgb( 0, 0, 0); +@define-color guide rgba( 28, 196, 79, 0.75); +@define-color magnifier rgb( 236, 223, 210); +@define-color glass rgba( 156, 231, 255, 0.5); +@define-color selected rgba( 161, 201, 236, 0.5); +@define-color selectedOutline rgb( 74, 150, 218); +@define-color shortcutKey rgb( 112, 109, 96 ); + +@define-color windowButtonHover rgb( 34, 131, 186); +@define-color windowButtonActive rgb( 23, 108, 156); +@define-color closeButtonHover rgb( 181, 43, 43); +@define-color closeButtonActive rgb( 160, 37, 37); +@define-color newFileButton rgb( 72, 70, 61); +@define-color newFileButtonActive rgb( 160, 225, 54); diff --git a/assets/theme.css b/assets/theme.css index 304ae09..beb248f 100644 --- a/assets/theme.css +++ b/assets/theme.css @@ -3,111 +3,115 @@ all: unset; } +@import url("colours.css"); -/* Colors parsed by application */ +/* Colours parsed by application */ .bg { - background-color: rgb(41, 40, 40); - color: rgb(41, 40, 40); + background-color: @bg; + color: @bg; } .active { - background-color: rgb(72,70,61); - color: rgb(72,70,61); + background-color: @active; + color: @active; } .close { - color: rgb(181,43,43); + color: @closeButtonHover; } .highlight { - color: rgb(234,223,204); + color: @highlight; } .cursor { - color:rgb(234,223,204); + color: @cursor; } .cursorStroke { - color: black; + color: @cursorStroke; } .cursorIndicator { - color: rgba(199, 40, 29, 0.9); + color: @cursorIndicator; } .plain { - color: rgb(212, 190, 152); + color: @plain; } .base { - color: rgb(234, 223, 204); + color: @base; } .splash { - color: rgb(245, 136, 27); + color: @splash; } .pathPoint { - color: rgb(129, 131, 241); + color: @pathPoint; } .pathPointStroke { - color: black; + color: @pathPointStroke; } .controlPoint { - color: rgb(161,221,233); + color: @controlPoint; +} +.controlPointLine { + color: @controlPointLine; } .controlPointStroke { - color: black; + color: @controlPointStroke; } .path { - color: rgb(184,80,80); + color: @path; } .brush { - color: rgb(106,63,222); + color: @brush; } .brushStroke { - color: rgba(235,118,219,0.66); + color: @brushStroke; } .brushCenter { - color: rgb(0,0,0); + color: @brushCenter; } .pointHover { - color: rgb(231, 172, 83); + color: @pointHover; } .pointSelected { - color: rgb(252,237,120); + color: @pointSelected; } .viewport { - background-color: rgb(236, 223, 210); - color: rgb(236, 223, 210); + background-color: @base; + color: @base; min-width: 120px; min-height: 90px; } .viewportScrollbar { - background-color: rgba(45, 39, 39, 0.66); - color: rgba(45, 39, 39, 0.66); + background-color: @scrollbar; + color: @scrollbar; margin: 4px; min-width: 8px; min-height: 8px; } .tabScrollbar { - background-color: rgba(48, 45, 38, 0.66); - color: rgba(48, 45, 38, 0.66); + background-color: @scrollbar; + color: @scrollbar; } .ruler { - background-color: rgb(237, 226, 154); - color: rgb(237, 226, 154); + background-color: @ruler; + color: @ruler; min-width: 16px; min-height: 16px; background-size: 16px 16px; } .rulerTick { - color: black; + color: @rulerTick; } .guide { - color: rgba(28, 196, 79, 0.75); + color: @guide; } .magnifier { - color: rgb(236, 223, 210); + color: @magnifier; } .glass { - color: rgba(156, 231, 255, 0.5); + color: @glass; } .selected { - color: rgba(161,201,236,0.5); + color: @selected; } .selectedOutline { - color: rgb(74,150,218); + color: @selectedOutline; } @@ -115,15 +119,15 @@ /* GTK tooltips */ tooltip { - color: rgb(212, 190, 152); - background-color: rgb(41, 40, 40); - border: 1px solid rgb(28,25,25); + color: @plain; + background-color: @bg; + border: 1px solid @border; } .window, .dialog { border-radius: 0px; - border-color: rgb(28,25,25); + border-color: @border; box-shadow: 0px 3px 9px 1px rgba(0,0,0,0), 0px 2px 6px 2px rgba(0,0,0,0.2), @@ -145,12 +149,12 @@ tooltip { /* High-constrast text colour */ .contrast { - color: rgb(247, 244, 239); + color: @contrast; } /* Active (highlighting) colour */ .highlight { - color: #eadfcc; + color: @highlight; } /* Logo area */ @@ -161,53 +165,53 @@ tooltip { /* Logo base colour */ .logo_base { - color: rgb(234, 223, 204); + color: @highlight; } /* Logo highlight colour */ .logo_highlight { - color: rgb(245, 136, 27); + color: @splash; } /* Rulers */ .leftRuler { - border-right: 1px solid black; + border-right: 1px solid @rulerBorder; min-width: 16px; } .topRuler { - border-bottom: 1px solid black; + border-bottom: 1px solid @rulerBorder; min-height: 16px; } .rulerCorner { min-width: 8px; min-height: 8px; - border-bottom: 1px solid black; - border-right: 1px solid black; + border-bottom: 1px solid @rulerBorder; + border-right: 1px solid @rulerBorder; } /* Cursor colour */ .cursor { - color: rgb(247, 244, 239); + color: @cursor; } /* Bézier path point colour */ .point { - color: rgb(129, 131, 241); + color: @pathPoint; } /* Bézier control point colour */ .control { - color: rgb(161, 221, 233); + color: @controlPoint; } /* Title bar */ .titleBar { min-height: 24px; font-size: 12px; - background-color: rgb(41, 40, 40); + background-color: @bg; } /* @@ -217,62 +221,62 @@ tooltip { */ .title { - border-top: 2px solid rgb(41, 40, 40); + border-top: 2px solid @bg; } .dialog { - border: 1px solid black; + border: 1px solid @border; border-radius: 6px; } /* dialog button */ .dialogButton { - background-color: rgb(72,70,61); - border: 1px solid black; + background-color: @active; + border: 1px solid @border; border-radius: 4px; margin: 6px; padding: 2px 10px 2px 10px; } .dialogButton:hover { - border-color:rgb(212, 190, 152); + border-color: @plain; } .dialogButton:active, .dialogButton:checked { - color: rgb(72,70,61); - border-color: black; - background-color: #eadfcc; + color: @active; + border-color: @border; + background-color: @highlight; } /* Menu bar */ .menu label { - color:rgb(212, 190, 152); + color:@plain; } .menu :disabled { - color:rgb(149,149,149); + color: @disabled; } .menu :focus-within { - border-color: rgb(212, 190, 152); + border-color: @plain; } .menu :focus{ - border-color: rgb(72,70,61); - background-color: rgb(41, 40, 40); + border-color: @active; + background-color: @bg; } .menu item { padding-left: 8px; padding-right: 8px; - color: rgb(212, 190, 152); - border-top: 2px solid rgb(41, 40, 40); + color: @plain; + border-top: 2px solid @bg; } .menu item > * :hover { - border-color: rgb(212, 190, 152); - background-color: rgb(72,70,61); + border-color: @plain; + background-color: @active; } /* Top-level menu items */ @@ -290,23 +294,23 @@ To specify it in CSS, set the box-shadow of the contents node." .menu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton, .menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton { - background-color: rgb(41, 40, 40); - color: rgb(72,70,61); + background-color: @bg; + color: @active; border-top: 0px; - border-left: 2px solid rgb(41, 40, 40); + border-left: 2px solid @bg; padding: 6px 10px 6px 10px; } .menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator, .menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > separator :hover { - background-color: rgb(72,70,61); + background-color: @active; padding: 1px 0px 0px 1px; } .menu item > popover > contents > scrolledwindow > viewport > stack > box > box > modelbutton > accelerator, .menu item > popover > contents > scrolledwindow > viewport > stack > box > box > box > box > modelbutton > accelerator { font-size: 10px; - color: rgb(112, 109, 96); + color: @shortcutKey; padding-left: 10px; } @@ -315,19 +319,19 @@ To specify it in CSS, set the box-shadow of the contents node." } .windowIcon:hover { - background-color: rgb(34,131,186); + background-color: @windowButtonHover; } .windowIcon:active, .windowIcon:checked { - background-color: rgb(23,108,156); + background-color: @windowButtonActive; } .closeWindowIcon:hover { - background-color: rgb(181,43,43); + background-color: @closeButtonHover; } .closeWindowIcon:active, .closeWindowIcon:checked { - background-color: rgb(160,37,37); + background-color: @closeButtonActive; } /* Tool bar */ @@ -342,11 +346,11 @@ To specify it in CSS, set the box-shadow of the contents node." margin-right: 10px; margin-top: 4px; margin-bottom: 4px; - background-color: rgb(72,70,61); + background-color: @active; } .toolItem { - border-left: 2px solid rgb(41, 40, 40); + border-left: 2px solid @bg; min-height: 40px; min-width: 40px; padding-top: 8px; @@ -356,12 +360,12 @@ To specify it in CSS, set the box-shadow of the contents node." } .toolItem:hover { - border-color: rgb(72,70,61); + border-color: @active; } .toolItem:active, .toolItem:checked { - border-color: rgb(234,223,204); - background-color: rgb(72,70,61); + border-color: @base; + background-color: @active; } /* File bar */ @@ -372,16 +376,16 @@ To specify it in CSS, set the box-shadow of the contents node." } .fileBarTab { - border-top: 2px solid rgb(41, 40, 40); + border-top: 2px solid @bg; } .fileBarTab:hover { - border-color: rgb(72,70,61); + border-color: @active; } .fileBarTab:active, .fileBarTab:checked { - border-color: rgb(234,223,204); - background-color: rgb(72,70,61); + border-color: @base; + background-color: @active; } .fileBarTabButton { @@ -396,29 +400,33 @@ To specify it in CSS, set the box-shadow of the contents node." padding-left: 1px; padding-right: 5px; margin: 0px; - color: rgba(212, 190, 152,0.2); + color: @plain; } .fileBarCloseButton:hover { - color: rgba(213,19,36,0.9); + color: @closeButtonHover; +} + +.fileBarCloseButton:active, .fileBarCloseButton:checked { + color: @closeButtonActive; } .newFileButton { - color: rgb(72,70,61); + color: @newFileButton; font-size: 16px; font-weight: bold; font-family: "Sans"; padding: 0px 5px 0px 4px; margin: 3px 0px 3px 0px; - border-left: 1px solid rgb(41, 40, 40); + border-left: 1px solid @bg; } -.newFileButton:hover, .newFileButton:active, .newFileButton:checked { - color: rgb(160,225,54); +.newFileButton:hover, .newFileButton:active, newFileButton:checked { + color: @newFileButtonActive; } .newFileButton:active, .newFileButton:checked { - border-color: rgb(160,225,54); + border-color: @newFileButtonActive; } @@ -431,20 +439,20 @@ To specify it in CSS, set the box-shadow of the contents node." .panels tab { padding-left: 6px; padding-right: 6px; - border-top: 2px solid rgb(41, 40, 40); + border-top: 2px solid @bg; } .panels tab:hover { - border-color: rgb(72,70,61); + border-color: @active; } .panels tab:active, .panels tab:checked { - background-color: rgb(72,70,61); + background-color: @active; border-color: rgb(234,223,204); } .panel { - background-color: rgb(72,70,61); + background-color: @active; min-height: 20px; } diff --git a/src/app/MetaBrush/Asset/Colours.hs b/src/app/MetaBrush/Asset/Colours.hs index ad5e189..b2e8c13 100644 --- a/src/app/MetaBrush/Asset/Colours.hs +++ b/src/app/MetaBrush/Asset/Colours.hs @@ -29,7 +29,8 @@ data ColourRecord a { bg, active, close, highlight , cursor, cursorOutline, cursorIndicator , plain, base, splash - , pathPoint, pathPointOutline, controlPoint, controlPointOutline + , pathPoint, pathPointOutline + , controlPoint, controlPointLine, controlPointOutline , path, brush, brushStroke, brushCenter , pointHover, pointSelected , viewport, viewportScrollbar, tabScrollbar @@ -57,6 +58,7 @@ colourNames = Colours , pathPoint = ColourName "pathPoint" , pathPointOutline = ColourName "pathPointStroke" , controlPoint = ColourName "controlPoint" + , controlPointLine = ColourName "controlPointLine" , controlPointOutline = ColourName "controlPointStroke" , path = ColourName "path" , brush = ColourName "brush" diff --git a/src/app/MetaBrush/Render/Document.hs b/src/app/MetaBrush/Render/Document.hs index fffea85..108af4e 100644 --- a/src/app/MetaBrush/Render/Document.hs +++ b/src/app/MetaBrush/Render/Document.hs @@ -113,7 +113,7 @@ import MetaBrush.GTK.Util data Renders a = Renders - { renderPath, renderStrokes, renderBrushes + { renderStrokes, renderPath, renderBrushes , renderCLines, renderCPts, renderPPts :: a } deriving stock ( Show, Functor, Foldable, Traversable, Generic, Generic1 ) @@ -490,7 +490,7 @@ drawPoint ( Colours {..} ) mbHover zoom ControlPoint pt Cairo.restore drawLine :: Colours -> Double -> PointType -> PointData b -> PointData b -> Cairo.Render () -drawLine ( Colours { path, controlPoint } ) zoom pointType p1 p2 = do +drawLine ( Colours { path, controlPointLine } ) zoom pointType p1 p2 = do let x1, y1, x2, y2 :: Double Point2D x1 y1 = coords p1 @@ -506,7 +506,7 @@ drawLine ( Colours { path, controlPoint } ) zoom pointType p1 p2 = do withRGBA path Cairo.setSourceRGBA ControlPoint -> do Cairo.setLineWidth ( 3 / zoom ) - withRGBA controlPoint Cairo.setSourceRGBA + withRGBA controlPointLine Cairo.setSourceRGBA Cairo.stroke Cairo.restore