From fb090d99cf9bb4afd345c2f6314b1aee52c3d607 Mon Sep 17 00:00:00 2001 From: xenia_grib Date: Fri, 9 Oct 2026 22:48:24 +0200 Subject: [PATCH 1/4] feat: create global.css and variables.css files --- src/styles/global.css | 0 src/styles/variables.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/styles/global.css create mode 100644 src/styles/variables.css diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/variables.css b/src/styles/variables.css new file mode 100644 index 0000000..e69de29 From 7a5a5b5992d33dfdaecadf88639c6a68e15dc437 Mon Sep 17 00:00:00 2001 From: xenia_grib Date: Tue, 13 Oct 2026 14:26:45 +0200 Subject: [PATCH 2/4] style: create basic light mode css variables --- src/styles/global.css | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/styles/global.css b/src/styles/global.css index e69de29..1ff2900 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -0,0 +1,38 @@ +:root { + /* Color palette */ + --primary-color: #F0EDE7; + --secondary-color: #E0DFE4; + --accent-color: #C0D2F6; + --background-color: #ecf0f1; + --element-background-color: #F8F7F3; + + /* Text colors */ + --text-color: #101844; + --text-color-dark: #090F2F; + --text-color-light: #EAE0CF; + + /* Font settings */ + --font-family-title: 'Faustina', serif; + --font-family-text: 'Inter'; + --font-size-page-title: 42px; + --font-size-element-title: 19px; + --font-size-row-title: 15px; + + /* Box settings */ + --corner-radius: 100px; + --box-color: #F0EDE7; + --box-stroke: #888394; + --box-shadow: 0 2px 5px rgba(3, 2, 2, 0.1); + + /* D-value */ + --background-color: #BDE981; + --border-color: var(--text-color); + + /* Space settings */ + --space-xs: 0.25rem; /* 4px - micro gaps (title to subtext) */ + --space-sm: 0.5rem; /* 8px - small padding (chips, badges) */ + --space-md: 1rem; /* 16px - default padding (inputs, row heights) */ + --space-lg: 1.5rem; /* 24px - component gaps (between search & filters) */ + --space-xl: 2.5rem; /* 40px - page section margins & outer padding */ + +} \ No newline at end of file From 74c4fb8dd515dec1577b2ecb4949029380dd38cc Mon Sep 17 00:00:00 2001 From: xenia_grib Date: Tue, 13 Oct 2026 14:42:30 +0200 Subject: [PATCH 3/4] style: add spacing, dark mode variables and AI documentation --- src/styles/global.css | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 1ff2900..94f575e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -4,7 +4,7 @@ --secondary-color: #E0DFE4; --accent-color: #C0D2F6; --background-color: #ecf0f1; - --element-background-color: #F8F7F3; + --background-color-element: #F8F7F3; /* Text colors */ --text-color: #101844; @@ -28,6 +28,9 @@ --background-color: #BDE981; --border-color: var(--text-color); + /* This part was generate with the help of Gemini 2.5 Flash using the prompt: + "Create spacing variables and a dark mode colro pallette based on my previous design" */ + /* Space settings */ --space-xs: 0.25rem; /* 4px - micro gaps (title to subtext) */ --space-sm: 0.5rem; /* 8px - small padding (chips, badges) */ @@ -35,4 +38,24 @@ --space-lg: 1.5rem; /* 24px - component gaps (between search & filters) */ --space-xl: 2.5rem; /* 40px - page section margins & outer padding */ -} \ No newline at end of file + /* Dark mode colors */ + [data-theme="dark"] { + /* Main Layout Colors */ + --background-color: #090F2F; /* Dark blue background */ + --header-background: #101844; /* Slightly lighter blue for nav */ + --element-background: #18225C; /* Inputs, dropdowns, table background */ + --surface-selected: #253788; /* Row selection tint */ + + /* Text Colors */ + --text-color-primary: #EAE0CF; /* Warm light text */ + --text-color-secondary: #A0AEC0; /* Muted text for labels */ + --text-color-on-dark: #090F2F; /* Inverted text for light buttons */ + + /* UI Components & Borders */ + --border-color: #3B426B; + --border-subtle: #2A3363; + --badge-d-value-bg: #82C43C; /* Slightly deeper green for contrast */ + --badge-d-value-text: #090F2F; + + } +} \ No newline at end of file From f6df7fbc57bd91b634eec7b7cd799db15530bd44 Mon Sep 17 00:00:00 2001 From: xenia_grib Date: Tue, 13 Oct 2026 14:52:38 +0200 Subject: [PATCH 4/4] style: added imports to main.tsx so that the variables are accesible --- src/main.tsx | 2 ++ src/styles/global.css | 61 ---------------------------------------- src/styles/variables.css | 61 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 61 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index bef5202..17d5695 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,8 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' +import './styles/variables.css' +import './styles/global.css' import App from './App.tsx' createRoot(document.getElementById('root')!).render( diff --git a/src/styles/global.css b/src/styles/global.css index 94f575e..e69de29 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,61 +0,0 @@ -:root { - /* Color palette */ - --primary-color: #F0EDE7; - --secondary-color: #E0DFE4; - --accent-color: #C0D2F6; - --background-color: #ecf0f1; - --background-color-element: #F8F7F3; - - /* Text colors */ - --text-color: #101844; - --text-color-dark: #090F2F; - --text-color-light: #EAE0CF; - - /* Font settings */ - --font-family-title: 'Faustina', serif; - --font-family-text: 'Inter'; - --font-size-page-title: 42px; - --font-size-element-title: 19px; - --font-size-row-title: 15px; - - /* Box settings */ - --corner-radius: 100px; - --box-color: #F0EDE7; - --box-stroke: #888394; - --box-shadow: 0 2px 5px rgba(3, 2, 2, 0.1); - - /* D-value */ - --background-color: #BDE981; - --border-color: var(--text-color); - - /* This part was generate with the help of Gemini 2.5 Flash using the prompt: - "Create spacing variables and a dark mode colro pallette based on my previous design" */ - - /* Space settings */ - --space-xs: 0.25rem; /* 4px - micro gaps (title to subtext) */ - --space-sm: 0.5rem; /* 8px - small padding (chips, badges) */ - --space-md: 1rem; /* 16px - default padding (inputs, row heights) */ - --space-lg: 1.5rem; /* 24px - component gaps (between search & filters) */ - --space-xl: 2.5rem; /* 40px - page section margins & outer padding */ - - /* Dark mode colors */ - [data-theme="dark"] { - /* Main Layout Colors */ - --background-color: #090F2F; /* Dark blue background */ - --header-background: #101844; /* Slightly lighter blue for nav */ - --element-background: #18225C; /* Inputs, dropdowns, table background */ - --surface-selected: #253788; /* Row selection tint */ - - /* Text Colors */ - --text-color-primary: #EAE0CF; /* Warm light text */ - --text-color-secondary: #A0AEC0; /* Muted text for labels */ - --text-color-on-dark: #090F2F; /* Inverted text for light buttons */ - - /* UI Components & Borders */ - --border-color: #3B426B; - --border-subtle: #2A3363; - --badge-d-value-bg: #82C43C; /* Slightly deeper green for contrast */ - --badge-d-value-text: #090F2F; - - } -} \ No newline at end of file diff --git a/src/styles/variables.css b/src/styles/variables.css index e69de29..94f575e 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -0,0 +1,61 @@ +:root { + /* Color palette */ + --primary-color: #F0EDE7; + --secondary-color: #E0DFE4; + --accent-color: #C0D2F6; + --background-color: #ecf0f1; + --background-color-element: #F8F7F3; + + /* Text colors */ + --text-color: #101844; + --text-color-dark: #090F2F; + --text-color-light: #EAE0CF; + + /* Font settings */ + --font-family-title: 'Faustina', serif; + --font-family-text: 'Inter'; + --font-size-page-title: 42px; + --font-size-element-title: 19px; + --font-size-row-title: 15px; + + /* Box settings */ + --corner-radius: 100px; + --box-color: #F0EDE7; + --box-stroke: #888394; + --box-shadow: 0 2px 5px rgba(3, 2, 2, 0.1); + + /* D-value */ + --background-color: #BDE981; + --border-color: var(--text-color); + + /* This part was generate with the help of Gemini 2.5 Flash using the prompt: + "Create spacing variables and a dark mode colro pallette based on my previous design" */ + + /* Space settings */ + --space-xs: 0.25rem; /* 4px - micro gaps (title to subtext) */ + --space-sm: 0.5rem; /* 8px - small padding (chips, badges) */ + --space-md: 1rem; /* 16px - default padding (inputs, row heights) */ + --space-lg: 1.5rem; /* 24px - component gaps (between search & filters) */ + --space-xl: 2.5rem; /* 40px - page section margins & outer padding */ + + /* Dark mode colors */ + [data-theme="dark"] { + /* Main Layout Colors */ + --background-color: #090F2F; /* Dark blue background */ + --header-background: #101844; /* Slightly lighter blue for nav */ + --element-background: #18225C; /* Inputs, dropdowns, table background */ + --surface-selected: #253788; /* Row selection tint */ + + /* Text Colors */ + --text-color-primary: #EAE0CF; /* Warm light text */ + --text-color-secondary: #A0AEC0; /* Muted text for labels */ + --text-color-on-dark: #090F2F; /* Inverted text for light buttons */ + + /* UI Components & Borders */ + --border-color: #3B426B; + --border-subtle: #2A3363; + --badge-d-value-bg: #82C43C; /* Slightly deeper green for contrast */ + --badge-d-value-text: #090F2F; + + } +} \ No newline at end of file