From aaef0fd25c213fcb4a64ed686a407a61ee29f044 Mon Sep 17 00:00:00 2001 From: Rodrigo Nader Date: Wed, 14 Jun 2023 20:39:22 -0300 Subject: [PATCH] Add colorcode comments to CSS variables Added comments to CSS variables to make it easier to read and understand the purpose of each color code for future code maintainability. --- src/frontend/src/index.css | 76 +++++++++++++++++++------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 2c00dbc22..0ee2e3d38 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -71,48 +71,48 @@ } :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 98%; - --muted-foreground: 215.4 16.3% 46.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --primary: 222.2 47.4% 18%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; - --ring: 215 20.2% 65.1%; + --background: 0 0% 100%; /* hsl(0 0% 100%) */ + --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ + --muted: 210 40% 98%; /* hsl(210 40% 98%) */ + --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */ + --popover: 0 0% 100%; /* hsl(0 0% 100%) */ + --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ + --card: 0 0% 100%; /* hsl(0 0% 100%) */ + --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ + --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */ + --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */ + --primary: 222.2 47.4% 18%; /* hsl(222 47% 18%) */ + --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */ + --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */ + --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ + --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */ + --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ + --destructive: 0 100% 50%; /* hsl(0 100% 50%) */ + --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */ + --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */ --radius: 0.5rem; } .dark { - -background: 224 71% 4%; - -foreground: 213 31% 91%; - -muted: 223 47% 11%; - -muted-foreground: 215.4 16.3% 56.9%; - -popover: 224 71% 4%; - -popover-foreground: 215 20.2% 65.1%; - -card: 224 71% 4%; - -card-foreground: 213 31% 91%; - -border: 216 34% 17%; - -input: 216 34% 17%; - -primary: 210 40% 98%; - -primary-foreground: 222.2 47.4% 1.2%; - -secondary: 222.2 47.4% 11.2%; - -secondary-foreground: 210 40% 98%; - -accent: 216 34% 17%; - -accent-foreground: 210 40% 98%; - -destructive: 0 63% 31%; - -destructive-foreground: 210 40% 98%; - -ring: 216 34% 17%; + -background: 224 71% 4%; /* hsl(224 71% 4%) */ + -foreground: 213 31% 91%; /* hsl(213 31% 91%) */ + -muted: 223 47% 11%; /* hsl(223 47% 11%) */ + -muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */ + -popover: 224 71% 4%; /* hsl(224 71% 4%) */ + -popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */ + -card: 224 71% 4%; /* hsl(224 71% 4%) */ + -card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */ + -border: 216 34% 17%; /* hsl(216 34% 17%) */ + -input: 216 34% 17%; /* hsl(216 34% 17%) */ + -primary: 210 40% 98%; /* hsl(210 40% 98%) */ + -primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */ + -secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */ + -secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */ + -accent: 216 34% 17%; /* hsl(216 34% 17%) */ + -accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */ + -destructive: 0 63% 31%; /* hsl(0 63% 31%) */ + -destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */ + -ring: 216 34% 17%; /* hsl(216 34% 17%) */ -radius: 0.5rem; }