From 49f86483ca7e5d2b1b660de701c7676b3e4d644c Mon Sep 17 00:00:00 2001 From: Jens Meichler Date: Fri, 8 Mar 2024 16:06:44 +0100 Subject: [PATCH] feat: initial note color --- .../draggables/image/image.component.html | 4 ++-- .../note-list/note-list.component.html | 4 ++-- .../draggables/note/note.component.html | 4 ++-- .../task-list/task-list.component.html | 4 ++-- src/app/models/note-list.model.ts | 4 ++-- src/app/models/note.model.ts | 4 ++-- src/app/models/task-list.model.ts | 4 ++-- src/assets/screens/welcome.json | 20 +++++++++---------- src/styles.scss | 5 +++++ 9 files changed, 29 insertions(+), 24 deletions(-) diff --git a/src/app/components/draggables/image/image.component.html b/src/app/components/draggables/image/image.component.html index 7591276..b55740c 100644 --- a/src/app/components/draggables/image/image.component.html +++ b/src/app/components/draggables/image/image.component.html @@ -199,14 +199,14 @@ diff --git a/src/app/components/draggables/note-list/note-list.component.html b/src/app/components/draggables/note-list/note-list.component.html index 5b5d001..1a3f37e 100644 --- a/src/app/components/draggables/note-list/note-list.component.html +++ b/src/app/components/draggables/note-list/note-list.component.html @@ -229,14 +229,14 @@ diff --git a/src/app/components/draggables/note/note.component.html b/src/app/components/draggables/note/note.component.html index b1170cd..2ad5b44 100644 --- a/src/app/components/draggables/note/note.component.html +++ b/src/app/components/draggables/note/note.component.html @@ -250,7 +250,7 @@ @@ -258,7 +258,7 @@ diff --git a/src/app/components/draggables/task-list/task-list.component.html b/src/app/components/draggables/task-list/task-list.component.html index a500742..b69b957 100644 --- a/src/app/components/draggables/task-list/task-list.component.html +++ b/src/app/components/draggables/task-list/task-list.component.html @@ -268,14 +268,14 @@ diff --git a/src/app/models/note-list.model.ts b/src/app/models/note-list.model.ts index 7b858fe..f8612db 100644 --- a/src/app/models/note-list.model.ts +++ b/src/app/models/note-list.model.ts @@ -7,9 +7,9 @@ import {Colored} from "./colored.model"; */ export class NoteList extends DraggableNoteBase implements Colored { /** The color of the text. */ - foregroundColor: string = '#ffffff'; + foregroundColor: string = 'var(--color-note-accent)'; /** The color of the background. */ - backgroundColor: string = '#212121'; + backgroundColor: string = 'var(--color-note)'; /** The color of the background gradient if specified. */ backgroundColorGradient?: string; diff --git a/src/app/models/note.model.ts b/src/app/models/note.model.ts index 209cbdf..33b9bc5 100644 --- a/src/app/models/note.model.ts +++ b/src/app/models/note.model.ts @@ -8,9 +8,9 @@ import {Reminder} from "./reminder.model"; */ export class Note extends DraggableNoteBase implements Colored { /** The color of the text. */ - foregroundColor: string = '#ffffff'; + foregroundColor: string = 'var(--color-note-accent)'; /** The color of the background. */ - backgroundColor: string = '#212121'; + backgroundColor: string = 'var(--color-note)'; /** The color of the background gradient if specified. */ backgroundColorGradient?: string; diff --git a/src/app/models/task-list.model.ts b/src/app/models/task-list.model.ts index 54c2d6c..871004b 100644 --- a/src/app/models/task-list.model.ts +++ b/src/app/models/task-list.model.ts @@ -7,9 +7,9 @@ import {Colored} from "./colored.model"; */ export class TaskList extends DraggableNoteBase implements Colored { /** The color of the text. */ - foregroundColor: string = '#ffffff'; + foregroundColor: string = 'var(--color-note-accent)'; /** The color of the background. */ - backgroundColor: string = '#212121'; + backgroundColor: string = 'var(--color-note)'; /** The color of the background gradient if specified. */ backgroundColorGradient?: string; diff --git a/src/assets/screens/welcome.json b/src/assets/screens/welcome.json index 633a72d..548a86a 100644 --- a/src/assets/screens/welcome.json +++ b/src/assets/screens/welcome.json @@ -5,8 +5,8 @@ "notes": [ { "id": "welcome_note_1", - "foregroundColor": "#ffffff", - "backgroundColor": "#212121", + "foregroundColor": "var(--color-note-accent)", + "backgroundColor": "var(--color-note)", "posX": 0, "posY": 84, "posZ": 1, @@ -15,8 +15,8 @@ }, { "id": "welcome_note_2", - "foregroundColor": "#ffffff", - "backgroundColor": "#212121", + "foregroundColor": "var(--color-note-accent)", + "backgroundColor": "var(--color-note)", "posX": 720, "posY": 359, "posZ": 4, @@ -30,24 +30,24 @@ "notes": [ { "id": "welcome_note_3_1", - "foregroundColor": "#ffffff", - "backgroundColor": "#212121", + "foregroundColor": "var(--color-note-accent)", + "backgroundColor": "var(--color-note)", "posX": 0, "posY": 0, "content": "When you click me, I am saved to your clipboard 💥" }, { "id": "welcome_note_list_3_2", - "foregroundColor": "#ffffff", - "backgroundColor": "#212121", + "foregroundColor": "var(--color-note-accent)", + "backgroundColor": "var(--color-note)", "posX": 0, "posY": 0, "content": "You can just add new notes from your clipboard by pressing the ➕ button" }, { "id": "welcome_note_list_3_3", - "foregroundColor": "#ffffff", - "backgroundColor": "#212121", + "foregroundColor": "var(--color-note-accent)", + "backgroundColor": "var(--color-note)", "posX": 0, "posY": 0, "content": "It's also possible to order notes using drag drop ⚡" diff --git a/src/styles.scss b/src/styles.scss index 53d4337..3fb600a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,10 +1,12 @@ :root { color-scheme: dark; + --color-background: #131313; --color-transparency-light: #FFFFFF19; --color-transparency-medium: #FFFFFF4D; --color-transparency-strong: #FFFFFF90; --color-note: #212121; + --color-note-accent: white; --color-primary: #7b1ea2; --color-primary-opacity: #7B1EA267; --color-secondary: #69f0ae; @@ -20,10 +22,13 @@ &[theme="light"] { color-scheme: light; + --color-background: white; --color-transparency-light: #00000019; --color-transparency-medium: #0000004D; --color-transparency-strong: #00000090; + --color-note: white; + --color-note-accent: black; --shadow-light: 0 1px 4px 1px #2F2F2F26,0 1px 2px 0 #2F2F2F26; --shadow-strong: 0 0 12px 0 #2F2F2F50;