From 2ac78ef5395d9b57af8c59d5d3aab3c975c20432 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@gmail.com>
Date: Mon, 27 Mar 2023 10:20:41 -0600
Subject: [PATCH] adding some variables for colors

---
 src/resources/css/variables.css | 107 +++++++++++++++++++++++++++++++-
 1 file changed, 106 insertions(+), 1 deletion(-)

diff --git a/src/resources/css/variables.css b/src/resources/css/variables.css
index e4debb3..81aae43 100644
--- a/src/resources/css/variables.css
+++ b/src/resources/css/variables.css
@@ -1,3 +1,108 @@
 :root {
-    /**/
+
+    /** ------------------------------
+     * START -- https://coolors.co/022f40-38aecc-0090c1-183446-046e8f
+     * -------------------------------**/
+    /* CSS HEX */
+    --prussian-blue: #022f40ff;
+    --pacific-cyan: #38aeccff;
+    --blue-ncs: #0090c1ff;
+    --prussian-blue-2: #183446ff;
+    --cerulean: #046e8fff;
+
+    /* CSS HSL */
+    --prussian-blue: hsla(196, 94%, 13%, 1);
+    --pacific-cyan: hsla(192, 59%, 51%, 1);
+    --blue-ncs: hsla(195, 100%, 38%, 1);
+    --prussian-blue-2: hsla(203, 49%, 18%, 1);
+    --cerulean: hsla(194, 95%, 29%, 1);
+
+    /* SCSS HEX */
+    $prussian-blue: #022f40ff;
+    $pacific-cyan: #38aeccff;
+    $blue-ncs: #0090c1ff;
+    $prussian-blue-2: #183446ff;
+    $cerulean: #046e8fff;
+
+    /* SCSS HSL */
+    $prussian-blue: hsla(196, 94%, 13%, 1);
+    $pacific-cyan: hsla(192, 59%, 51%, 1);
+    $blue-ncs: hsla(195, 100%, 38%, 1);
+    $prussian-blue-2: hsla(203, 49%, 18%, 1);
+    $cerulean: hsla(194, 95%, 29%, 1);
+
+    /* SCSS RGB */
+    $prussian-blue: rgba(2, 47, 64, 1);
+    $pacific-cyan: rgba(56, 174, 204, 1);
+    $blue-ncs: rgba(0, 144, 193, 1);
+    $prussian-blue-2: rgba(24, 52, 70, 1);
+    $cerulean: rgba(4, 110, 143, 1);
+
+    /* SCSS Gradient */
+    /*$gradient-top: linear-gradient(0deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-right: linear-gradient(90deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-bottom: linear-gradient(180deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-left: linear-gradient(270deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-top-right: linear-gradient(45deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-bottom-right: linear-gradient(135deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-top-left: linear-gradient(225deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-bottom-left: linear-gradient(315deg, #022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /*$gradient-radial: radial-gradient(#022f40ff, #38aeccff, #0090c1ff, #183446ff, #046e8fff);*/
+    /** ------------------------------
+     * END -- https://coolors.co/022f40-38aecc-0090c1-183446-046e8f
+     * -------------------------------**/
+
+
+    /** ------------------------------
+     * START -- https://coolors.co/8ac482-47783f-ffbe86-ffb5c2-3777ff
+     * -------------------------------**/
+    /* CSS HEX */
+    --pistachio: #8ac482ff;
+    --fern-green: #47783fff;
+    --peach: #ffbe86ff;
+    --cherry-blossom-pink: #ffb5c2ff;
+    --blue-crayola: #3777ffff;
+
+    /* CSS HSL */
+    --pistachio: hsla(113, 36%, 64%, 1);
+    --fern-green: hsla(112, 31%, 36%, 1);
+    --peach: hsla(28, 100%, 76%, 1);
+    --cherry-blossom-pink: hsla(349, 100%, 85%, 1);
+    --blue-crayola: hsla(221, 100%, 61%, 1);
+
+    /* SCSS HEX */
+    $pistachio: #8ac482ff;
+    $fern-green: #47783fff;
+    $peach: #ffbe86ff;
+    $cherry-blossom-pink: #ffb5c2ff;
+    $blue-crayola: #3777ffff;
+
+    /* SCSS HSL */
+    $pistachio: hsla(113, 36%, 64%, 1);
+    $fern-green: hsla(112, 31%, 36%, 1);
+    $peach: hsla(28, 100%, 76%, 1);
+    $cherry-blossom-pink: hsla(349, 100%, 85%, 1);
+    $blue-crayola: hsla(221, 100%, 61%, 1);
+
+    /* SCSS RGB */
+    $pistachio: rgba(138, 196, 130, 1);
+    $fern-green: rgba(71, 120, 63, 1);
+    $peach: rgba(255, 190, 134, 1);
+    $cherry-blossom-pink: rgba(255, 181, 194, 1);
+    $blue-crayola: rgba(55, 119, 255, 1);
+
+    /* SCSS Gradient */
+    /*$gradient-top: linear-gradient(0deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-right: linear-gradient(90deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-bottom: linear-gradient(180deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-left: linear-gradient(270deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-top-right: linear-gradient(45deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-bottom-right: linear-gradient(135deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-top-left: linear-gradient(225deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-bottom-left: linear-gradient(315deg, #8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /*$gradient-radial: radial-gradient(#8ac482ff, #47783fff, #ffbe86ff, #ffb5c2ff, #3777ffff);*/
+    /** ------------------------------
+     * END -- https://coolors.co/8ac482-47783f-ffbe86-ffb5c2-3777ff
+     * -------------------------------**/
+
 }