From 2eaa38c95521dc287d899c523c5ce8aeb6dacc44 Mon Sep 17 00:00:00 2001
From: BurnyLlama <burnyllama@protonmail.com>
Date: Mon, 6 Mar 2023 10:10:42 +0100
Subject: [PATCH] Added buttons.

---
 src/_palette.scss     |  25 ++++++-
 src/buttons.scss      | 157 ++++++++++++++++++++++++++++++++++++++++++
 src/main.scss         |   1 +
 web/pages/buttons.njk |  38 ++++++++++
 web/pages/index.njk   |   9 ++-
 5 files changed, 226 insertions(+), 4 deletions(-)
 create mode 100644 src/buttons.scss
 create mode 100644 web/pages/buttons.njk

diff --git a/src/_palette.scss b/src/_palette.scss
index 1aec24b..3d89b77 100644
--- a/src/_palette.scss
+++ b/src/_palette.scss
@@ -158,9 +158,32 @@ $pink: $pink500;
 
 $surface: $grey100;
 $text: $grey800;
+
+$primary50: $sea50;
+$primary100: $sea100;
+$primary200: $sea200;
+$primary300: $sea300;
+$primary400: $sea400;
+$primary500: $sea500;
+$primary600: $sea600;
+$primary700: $sea700;
+$primary800: $sea800;
+$primary900: $sea900;
 $primary: $sea;
 
+
 $success: $sea;
 $danger: $red;
 $warning: $yellow;
-$info: $blue;
\ No newline at end of file
+$info: $blue;
+
+$shadow50: rgba($grey50, 0.5);
+$shadow100: rgba($grey100, 0.5);
+$shadow200: rgba($grey200, 0.5);
+$shadow300: rgba($grey300, 0.5);
+$shadow400: rgba($grey400, 0.5);
+$shadow500: rgba($grey500, 0.5);
+$shadow600: rgba($grey600, 0.5);
+$shadow700: rgba($grey700, 0.5);
+$shadow800: rgba($grey800, 0.5);
+$shadow900: rgba($grey900, 0.5);
\ No newline at end of file
diff --git a/src/buttons.scss b/src/buttons.scss
new file mode 100644
index 0000000..743091b
--- /dev/null
+++ b/src/buttons.scss
@@ -0,0 +1,157 @@
+// FIXME: All secondary buttons should maybe use a secondary colour!
+
+@use "palette";
+
+.btn {
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    text-align: center;
+    margin: .5rem 1rem .5rem 0;
+    padding: .5rem 1rem;
+    border: 2px solid palette.$primary;
+
+    &.raised {
+        transform: translateY(-.3rem);
+        box-shadow: 0 .3rem 0 0 palette.$primary600;
+        transition: .3s transform, .3s box-shadow;
+
+
+        &:hover {
+            transform: translateY(0);
+            box-shadow: 0 0 0 0 palette.$primary600;
+        }
+
+        &.primary {
+            @if lightness(palette.$primary) < 50 {
+                color: palette.$grey50
+            } @else {
+                color: palette.$grey900
+            }
+            background-color: palette.$primary;
+        }
+
+        // TODO: This looks really bad. :)
+        &.secondary {
+            @if lightness(palette.$primary50) < 50 {
+                color: palette.$grey50
+            } @else {
+                color: palette.$grey900
+            }
+            background-color: palette.$primary200;
+            border-color: palette.$primary200;
+            box-shadow: 0 .3rem 0 0 palette.$primary400;
+
+            &:hover {
+                box-shadow: 0 0 0 0 palette.$primary;
+            }
+        }
+
+        &[disabled] {
+            color: palette.$grey500;
+            background-color: palette.$grey200;
+            border-color: palette.$grey200;
+            box-shadow: 0 .3rem 0 0 palette.$grey300;
+
+            &:hover {
+                transform: translateY(-.3rem);
+            }
+        }
+    }
+
+    &.filled {
+        transition: .3s color, .3s background-color;
+
+        &.primary {
+            @if lightness(palette.$primary) < 50 {
+                color: palette.$grey50
+            } @else {
+                color: palette.$grey900
+            }
+            background-color: palette.$primary;
+        }
+
+        // TODO: This looks really bad. :)
+        &.secondary {
+            @if lightness(palette.$primary200) < 50 {
+                color: palette.$grey50
+            } @else {
+                color: palette.$grey900
+            }
+            background-color: palette.$primary200;
+            border-color: palette.$primary200;
+        }
+
+        &:hover {
+            background-color: transparent;
+        }
+
+        &[disabled] {
+            color: palette.$grey500;
+            background-color: palette.$grey200;
+            border-color: palette.$grey200;
+        }
+    }
+
+    &.outline {
+        transition: .3s color, .3s background-color;
+
+        &.primary {
+            @if lightness(palette.$primary) < 50 {
+                color: palette.$grey50
+            } @else {
+                color: palette.$grey900
+            }
+            background-color: transparent;
+
+            &:hover {
+                background-color: palette.$primary;
+            }
+        }
+
+        // TODO: This looks really bad. :)
+        &.secondary {
+            @if lightness(palette.$primary200) < 50 {
+                color: palette.$grey50
+            } @else {
+                color: palette.$grey900
+            }
+            background-color: transparent;
+            border-color: palette.$primary200;
+
+            &:hover {
+                background-color: palette.$primary200;
+            }
+        }
+
+        &[disabled] {
+            color: palette.$grey500;
+            border-color: palette.$grey200;
+        }
+    }
+
+    &.textonly {
+        font-weight: bold;
+        font-family: 'Manrope';
+        padding: .5rem .3rem;
+        background-color: transparent;
+        border-color: transparent;
+        text-transform: uppercase;
+
+        &.primary {
+            color: palette.$primary;
+        }
+
+        &.secondary {
+            color: palette.$text;
+        }
+
+        &[disabled] {
+            color: palette.$grey300;
+        }
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
+}
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
index 15bd810..368f6fe 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -4,5 +4,6 @@
 @use "fonts";
 @use "headings";
 @use "text";
+@use "buttons";
 
 @use "layouts/publishing";
\ No newline at end of file
diff --git a/web/pages/buttons.njk b/web/pages/buttons.njk
new file mode 100644
index 0000000..f32de04
--- /dev/null
+++ b/web/pages/buttons.njk
@@ -0,0 +1,38 @@
+{% extends "templates/publishing.njk" %}
+
+{% block main %}
+	<header>
+		<h1>Nebulosa CSS</h1>
+		<h2>A showcase of buttons</h2>
+	</header>
+	<h1>Buttons</h1>
+
+	<h2>Raised</h2>
+	<div>
+		<button class="btn raised primary">Primary</button>
+		<button class="btn raised secondary">Secondary</button>
+		<button class="btn raised" disabled>Disabled</button>
+	</div>
+
+	<h2>Filled</h2>
+	<div>
+		<button class="btn filled primary">Primary</button>
+		<button class="btn filled secondary">Secondary</button>
+		<button class="btn filled" disabled>Disabled</button>
+	</div>
+
+	<h2>Outline</h2>
+	<div>
+		<button class="btn outline primary">Primary</button>
+		<button class="btn outline secondary">Secondary</button>
+		<button class="btn outline" disabled>Disabled</button>
+	</div>
+
+	<h2>Text only</h2>
+	<div>
+		<button class="btn textonly primary">Primary</button>
+		<button class="btn textonly secondary">Secondary</button>
+		<button class="btn textonly" disabled>Disabled</button>
+	</div>
+
+{% endblock %}
diff --git a/web/pages/index.njk b/web/pages/index.njk
index 403c100..1de71bf 100644
--- a/web/pages/index.njk
+++ b/web/pages/index.njk
@@ -1,6 +1,9 @@
-{% extends "templates/base.njk" %}
+{% extends "templates/publishing.njk" %}
 
-{% block body %}
-	<h1>Welcome to Nebulosa CSS!</h1>
+{% block main %}
+	<header>
+		<h1>Welcome to Nebulosa CSS!</h1>
+	</header>
 	<a href="/headings">Headings</a>
+	<a href="/buttons">Buttons</a>
 {% endblock %}