From 45c765a6bc8c5810db42eb32a19237ca76c51051 Mon Sep 17 00:00:00 2001
From: conzer <vaporvault04@gmail.com>
Date: Thu, 5 Dec 2024 02:22:09 -0500
Subject: [PATCH] Add boxes and sidebar

---
 example.html            |  2 +-
 exampledark.html        | 21 ++++++++---
 scss/_colors-light.scss | 80 +++++++++++++++++++++++++++++++++++++++++
 scss/yaru-dark.scss     | 10 ++++++
 4 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 scss/_colors-light.scss

diff --git a/example.html b/example.html
index cf0f7f0..351d7eb 100644
--- a/example.html
+++ b/example.html
@@ -29,7 +29,7 @@
                         <h1>Hello again yaru!</h1>
                         <h2>Hello again yaru!</h2>
                         <h3>Hello again yaru!</h3>
-                        <p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own.</p>
+                        <p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>
                         <button>Test again</button>
                     </div>
                 </div>               
diff --git a/exampledark.html b/exampledark.html
index a6b4503..2d6690e 100644
--- a/exampledark.html
+++ b/exampledark.html
@@ -17,11 +17,22 @@
                 <button class="sb_button">dolor sit amet</button>
             </div>
             <div class="box-content-1">
-                <h1>Hello yaru!</h1>
-                <h2>Hello yaru!</h2>
-                <h3>Hello yaru!</h3>
-                <p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>
-                <button>Test</button>
+                <div class="box-v">
+                    <div class="box-content-1">
+                        <h1>Hello yaru!</h1>
+                        <h2>Hello yaru!</h2>
+                        <h3>Hello yaru!</h3>
+                        <p>yaru.css is a css library attempting to recreate the Ubuntu Yaru style in a web format. it also works as it's own implementation of something like bootstrap with built in GTK style elements like Boxes and Popovers. This is a simple test page showing the different elements.</p>
+                        <button>Test</button>
+                    </div>
+                    <div class="box-content-1">
+                        <h1>Hello again yaru!</h1>
+                        <h2>Hello again yaru!</h2>
+                        <h3>Hello again yaru!</h3>
+                        <p>You may have noticed this is a different item. yaru.css has the "box-v" div class for stacking different "box-content-1"s ontop of eachother, as long as the box-v is wrapped inside a box-content-1 of it's own. If you do not want this centering, just use two individual "box-content-1" classes.</p>
+                        <button>Test again</button>
+                    </div>
+                </div>               
             </div>
         </div>
     </body>
diff --git a/scss/_colors-light.scss b/scss/_colors-light.scss
new file mode 100644
index 0000000..4585f2a
--- /dev/null
+++ b/scss/_colors-light.scss
@@ -0,0 +1,80 @@
+// When col def diffs for dark and light variant
+// it gets @if ed depending on $variant
+
+$variant: 'light';
+
+@import 'palette';
+
+$base_color: if($variant == 'light', #ffffff, lighten($jet, 6%));
+$text_color: if($variant == 'light', black, white);
+$bg_color: if($variant == 'light', #FAFAFA, lighten($jet, 8%));
+$fg_color: if($variant == 'light', $inkstone, $porcelain);
+
+$selected_fg_color: $accent_fg_color;
+$selected_bg_color: $accent_bg_color;
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
+$selected_text_bg_color: if($variant == 'light', transparentize($selected_bg_color, 0.7), transparentize($selected_bg_color, 0.2));
+$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
+$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
+$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
+$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
+$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
+$top_hilight: $borders_edge;
+$dark_fill: mix($borders_color, $bg_color, 50%);
+$headerbar_bg_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
+$menu_color: if($variant == 'light', $bg_color, lighten($jet, 2%));
+$menu_selected_color: if($variant =='light', darken($bg_color, 6%), lighten($bg_color, 6%)); // Yaru change: use lighter color in dark theme (mimic Libadwaita)
+
+$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
+$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
+$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
+$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
+
+$warning_color: $yellow;
+$error_color: $red;
+$success_color: lighten($green, 5%);
+$destructive_color: if($variant == 'light', $red, darken($red, 10%));
+
+$osd_fg_color: #eeeeec;
+$osd_text_color: white;
+$osd_bg_color: transparentize(lighten($jet, 2%),0.025);
+$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
+$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_borders_color: transparentize(black, 0.3);
+
+$sidebar_bg_color: mix($bg_color, $base_color, 50%);
+
+$tooltip_borders_color: transparentize(white, 0.9);
+$shadow_color: transparentize(black, 0.9);
+
+$drop_target_color: $success_color;
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main colors.
+$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 3%));
+$backdrop_text_color: if($variant == 'light', transparentize($text_color, 0.31), transparentize(white, 0.45));
+$backdrop_bg_color: if($variant == 'light', $bg_color, lighten($bg_color, 3%));
+$backdrop_fg_color: if($variant == 'light', mix($fg_color, $backdrop_bg_color, 80%), transparentize(white, 0.35));
+$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
+$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
+$backdrop_selected_bg_color: transparentize(desaturate($selected_bg_color,100%),0.5);
+$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
+$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
+
+//special cased widget colors
+$suggested_bg_color: if($accent_bg_color == $orange, if($variant == 'light', lighten($green, 5%), darken($green, 5%)), $accent_bg_color);
+$suggested_border_color: if($variant=='light', darken($suggested_bg_color, 5%), darken($suggested_bg_color, 10%));
+$progress_bg_color: if($variant== 'light', lighten($accent_bg_color, 10%), lighten($accent_bg_color, 5%));
+$progress_border_color: $progress_bg_color;
+$checkradio_bg_color: if($variant=='light', lighten($accent_bg_color, 5%), $accent_bg_color);
+$checkradio_fg_color: $accent_fg_color;
+$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color, 40%));
+$switch_bg_color: $selected_bg_color;
+$switch_borders_color: if($variant == 'light', darken($checkradio_bg_color, 10%), darken($checkradio_bg_color,40%));
+$focus_border_color: transparentize(lighten($accent_bg_color, 14%), 0.3);
+$alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
+$dim_label_opacity: 0.55;
diff --git a/scss/yaru-dark.scss b/scss/yaru-dark.scss
index 1083252..a33d3a4 100644
--- a/scss/yaru-dark.scss
+++ b/scss/yaru-dark.scss
@@ -111,3 +111,13 @@ button:hover {
     overflow-y: auto;
 }
 
+.box-v {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: flex-start;
+    padding: 20px;
+    background-color: $bg_color;
+    max-width: 400px;
+    margin: auto;
+}