From 40b8ed8e938c9009a03c938e4c708752c42a2828 Mon Sep 17 00:00:00 2001
From: Chris Zuber <shgysk8zer0@gmail.com>
Date: Tue, 8 Oct 2024 10:28:45 -0700
Subject: [PATCH] Update button styles

### Added
- Add `.btn-outline-*` styles

### Fixed
- Give disabled buttons more proper styling
---
 CHANGELOG.md      |   8 ++
 button.js         | 264 +++++++++++++++++++++++++++++++++++++++-------
 consts.js         |   3 +
 package-lock.json |   4 +-
 package.json      |   2 +-
 properties.js     |   5 +
 test/index.js     |  12 ++-
 utils.js          |  25 +++--
 8 files changed, 269 insertions(+), 54 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c1710de..67c9366 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.2.3] - 2024-10-08
+
+### Added
+- Add `.btn-outline-*` styles
+
+### Fixed
+- Give disabled buttons more proper styling
+
 ## [v0.2.2] - 2024-10-04
 
 ### Added
diff --git a/button.js b/button.js
index e242fa7..17745f8 100644
--- a/button.js
+++ b/button.js
@@ -38,210 +38,394 @@ export const btn = css`.btn:not([hidden]) {
 .btn.btn-block {
 	display: block;
 	width: 100%;
+}
+
+.btn:disabled, .btn.disabled {
+	cursor: not-allowed;
+	opacity: var(--aegis-btn-disabled-opacity, 0.65);
+	filter: saturate(var(--aegis-btn-disabled-saturation, 50%)) brightness(var(--aegis-btn-disabled-brightness, 90%));
+}
+
+.btn.disabled {
+	pointer-events: none;
 }`;
 
-const primary = css`.btn.btn-primary:not(:disabled):not(.disabled) {
+const primary = css`.btn.btn-primary {
 	background-color: var(--aegis-btn-primary, ${btnPrimary});
 	color: var(--aegis-color-dark, ${colorDark});
 	border-color: ${blue[6]};
 }
 
-.btn.btn-primary:not(:disabled):not(.disabled):hover, .btn.btn-primary:not(:disabled):not(.disabled):focus {
+.btn.btn-primary:hover, .btn.btn-primary:focus {
 	background-color: var(--aegis-btn-primary-hover, ${btnPrimaryHover});
 	border-color: ${blue[7]};
 }
 
-.btn.btn-primary:not(:disabled):not(.disabled):active {
+.btn.btn-primary:active {
 	background-color: var(--aegis-btn-primary-active, ${btnPrimaryActive});
 	border-color: ${blue[8]};
 }
 
-.btn.btn-primary:disabled, .btn.btn-primary.disabled {
+x.btn.btn-primary:disabled, .btn.btn-primary.disabled {
 	background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
-	cursor: not-allowed;
 }`;
 
-const secondary = css`.btn.btn-secondary:not(:disabled):not(.disabled) {
+export const btnOutlinePrimary = css`.btn.btn-outline-primary {
+	background-color: transparent;
+	color: var(--aegis-btn-primary, ${btnPrimary});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus {
+	background-color: var(--aegis-btn-primary-hover, ${btnPrimaryHover});
+	border-color: ${blue[7]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-primary:active {
+	background-color: var(--aegis-btn-primary-active, ${btnPrimaryActive});
+	border-color: ${blue[8]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+x.btn.btn-outline-primary:disabled, .btn.btn-outline-primary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const secondary = css`.btn.btn-secondary {
 	background-color: var(--aegis-btn-secondary, ${btnSecondary});
 	color: var(--aegis-color-dark, ${colorDark});
 	border-color: ${gray[7]};
 }
 
-.btn.btn-secondary:not(:disabled):not(.disabled):hover, .btn.btn-secondary:not(:disabled):not(.disabled):focus {
+.btn.btn-secondary:hover, .btn.btn-secondary:focus {
 	background-color: var(--aegis-btn-secondary-hover, ${btnSecondaryHover});
 	border-color: ${gray[8]};
 }
 
-.btn.btn-secondary:not(:disabled):not(.disabled):active {
+.btn.btn-secondary:active {
 	background-color: var(--aegis-btn-secondary-active, ${btnSecondaryActive});
 	border-color: ${gray[9]};
 }
 
-.btn.btn-secondary:disabled, .btn.btn-secondary.disabled {
+x.btn.btn-secondary:disabled, .btn.btn-secondary.disabled {
 	background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
-	cursor: not-allowed;
 }`;
 
-const success = css`.btn.btn-success:not(:disabled):not(.disabled) {
+export const btnOutlineSecondary = css`.btn.btn-outline-secondary {
+	background-color: transparent;
+	color: var(--aegis-btn-secondary, ${btnSecondary});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:focus {
+	background-color: var(--aegis-btn-secondary-hover, ${btnSecondaryHover});
+	border-color: ${gray[8]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-secondary:active {
+	background-color: var(--aegis-btn-secondary-active, ${btnSecondaryActive});
+	border-color: ${gray[9]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const success = css`.btn.btn-success {
 	background-color: var(--aegis-btn-success, ${btnSuccess});
 	color: var(--aegis-color-dark, ${colorDark});
 	border-color: ${green[6]};
 }
 
-.btn.btn-success:not(:disabled):not(.disabled):hover, .btn.btn-success:not(:disabled):not(.disabled):focus {
+.btn.btn-success:hover, .btn.btn-success:focus {
 	background-color: var(--aegis-btn-success-hover, ${btnSuccessHover});
 	border-color: ${green[7]};
 }
 
-.btn.btn-success:not(:disabled):not(.disabled):active {
+.btn.btn-success:active {
 	background-color: var(--aegis-btn-success-active, ${btnSuccessActive});
 	border-color: ${green[8]};
 }
 
-.btn.btn-success:disabled {
+x.btn.btn-success:disabled {
 	background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
 	cursor: not-allowed;
 }`;
 
-const info = css`.btn.btn-info:not(:disabled):not(.disabled) {
+export const btnOutlineSuccess = css`.btn.btn-outline-success {
+	background-color: transparent;
+	color: var(--aegis-btn-success, ${btnSuccess});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-success:hover, .btn.btn-outline-success:focus {
+	background-color: var(--aegis-btn-success-hover, ${btnSuccessHover});
+	border-color: ${green[7]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-success:active {
+	background-color: var(--aegis-btn-success-active, ${btnSuccessActive});
+	border-color: ${green[8]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+x.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const info = css`.btn.btn-info {
 	background-color: var(--aegis-btn-info, ${btnInfo});
 	color: var(--aegis-color-dark, ${colorDark});
 	border-color: ${cyan[6]};
 }
 
-.btn.btn-info:not(:disabled):not(.disabled):hover, .btn.btn-info:not(:disabled):not(.disabled):focus {
+.btn.btn-info:hover, .btn.btn-info:focus {
 	background-color: var(--aegis-btn-info-hover, ${btnInfoHover});
 	border-color: ${cyan[7]};
 }
 
-.btn.btn-info:not(:disabled):not(.disabled):active {
+.btn.btn-info:active {
 	background-color: var(--aegis-btn-info-active, ${btnInfoActive});
 	border-color: ${cyan[8]};
 }
 
-.btn.btn-info:disabled, .btn.btn-info.disabled {
+x.btn.btn-info:disabled, .btn.btn-info.disabled {
 	background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
 	cursor: not-allowed;
 }`;
 
-const danger = css`.btn.btn-danger:not(:disabled):not(.disabled) {
+export const btnOutlineInfo = css`.btn.btn-outline-info {
+	background-color: transparent;
+	color: var(--aegis-btn-info, ${btnInfo});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-info:hover, .btn.btn-outline-info:focus {
+	background-color: var(--aegis-btn-info-hover, ${btnInfoHover});
+	border-color: ${cyan[7]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-info:active {
+	background-color: var(--aegis-btn-info-active, ${btnInfoActive});
+	border-color: ${cyan[8]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+x.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const danger = css`.btn.btn-danger {
 	background-color: var(--aegis-btn-danger, ${btnDanger});
 	color: var(--aegis-color-dark, ${colorDark});
 	border-color: ${red[6]};
 }
 
-.btn.btn-danger:not(:disabled):not(.disabled):hover, .btn.btn-danger:not(:disabled):not(.disabled):focus {
+.btn.btn-danger:hover, .btn.btn-danger:focus {
 	background-color: var(--aegis-btn-danger-hover, ${btnDangerHover});
 	border-color: ${red[7]};
 }
 
-.btn.btn-danger:not(:disabled):not(.disabled):active {
+.btn.btn-danger:active {
 	background-color: var(--aegis-btn-danger-active, ${btnDangerActive});
 	border-color: ${red[8]};
 }
 
-.btn.btn-danger:disabled, .btn.btn-danger.disabled {
+x.btn.btn-danger:disabled, .btn.btn-danger.disabled {
 	background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
 	cursor: not-allowed;
 }`;
 
-const warning = css`.btn.btn-warning:not(:disabled):not(.disabled) {
-	background-color: var(--aegis-btn-warning, ${btnWarning});
+export const btnOutlineDanger = css`.btn.btn-outline-danger {
+	background-color: transparent;
+	color: var(--aegis-btn-danger, ${btnDanger});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-danger:hover, .btn.btn-outline-danger:focus {
+	background-color: var(--aegis-btn-danger-hover, ${btnDangerHover});
+	border-color: ${red[7]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-danger:active {
+	background-color: var(--aegis-btn-danger-active, ${btnDangerActive});
+	border-color: ${red[8]};
 	color: var(--aegis-color-dark, ${colorDark});
+}
+
+x.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const warning = css`.btn.btn-warning {
+	background-color: var(--aegis-btn-warning, ${btnWarning});
+	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${yellow[6]};
 }
 
-.btn.btn-warning:not(:disabled):not(.disabled):hover, .btn.btn-warning:not(:disabled):not(.disabled):focus {
+.btn.btn-warning:hover, .btn.btn-warning:focus {
 	background-color: var(--aegis-btn-warning-hover, ${btnWarningHover});
 	border-color: ${yellow[7]};
 }
 
-.btn.btn-warning:not(:disabled):not(.disabled):active {
+.btn.btn-warning:active {
 	background-color: var(--aegis-btn-warning-active, ${btnWarningActive});
 	border-color: ${yellow[8]};
 }
 
-.btn.btn-warning:disabled, .btn.btn-warning.disabled {
+x.btn.btn-warning:disabled, .btn.btn-warning.disabled {
 	background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
 	cursor: not-allowed;
 }`;
 
-const light = css`.btn.btn-light:not(:disabled):not(.disabled) {
+export const btnOutlineWarning = css`.btn.btn-outline-warning {
+	background-color: transparent;
+	color: var(--aegis-btn-warning, ${btnWarning});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-warning:hover, .btn.btn-outline-warning:focus {
+	background-color: var(--aegis-btn-warning-hover, ${btnWarningHover});
+	border-color: ${yellow[7]};
+	color: var(--aegis-color-light, ${colorLight});
+}
+
+.btn.btn-outline-warning:active {
+	background-color: var(--aegis-btn-warning-active, ${btnWarningActive});
+	border-color: ${yellow[8]};
+	color: var(--aegis-color-light, ${colorLight});
+}
+
+x.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const light = css`.btn.btn-light {
 	background-color: var(--aegis-btn-light, ${btnLight});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[2]};
 }
 
-.btn.btn-light:not(:disabled):not(.disabled):hover, .btn.btn-light:not(:disabled):not(.disabled):focus {
+.btn.btn-light:hover, .btn.btn-light:focus {
 	background-color: var(--aegis-btn-light-hover, ${btnLightHover});
 	border-color: ${gray[3]};
 }
 
-.btn.btn-light:not(:disabled):not(.disabled):active {
+.btn.btn-light:active {
 	background-color: var(--aegis-btn-light-active, ${btnLightActive});
 	border-color: ${gray[4]};
 }
 
-.btn.btn-light:disabled, .btn.btn-light.disabled {
+x.btn.btn-light:disabled, .btn.btn-light.disabled {
 	background-color: var(--aegis-btn-disabled, ${btnDisabled});
 	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[5]};
 	cursor: not-allowed;
 }`;
 
-const dark = css`.btn.btn-dark:not(:disabled):not(.disabled) {
+export const btnOutlineLight = css`.btn.btn-outline-light {
+	background-color: transparent;
+	color: var(--aegis-btn-light, ${btnLight});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-light:hover, .btn.btn-outline-light:focus {
+	background-color: var(--aegis-btn-light-hover, ${btnLightHover});
+	border-color: ${gray[3]};
+	color: var(--aegis-color-light, ${colorLight});
+}
+
+.btn.btn-outline-light:active {
+	background-color: var(--aegis-btn-light-active, ${btnLightActive});
+	border-color: ${gray[4]};
+	color: var(--aegis-btn-light-active, ${btnLightActive});
+}
+
+x.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-color-light, ${colorLight});
+}`;
+
+const dark = css`.btn.btn-dark {
 	background-color: var(--aegis-btn-dark, ${btnDark});
 	color: var(--aegis-color-dark, ${colorDark});
 	border-color: ${gray[7]};
 }
 
-.btn.btn-dark:not(:disabled):not(.disabled):hover, .btn.btn-dark:not(:disabled):not(.disabled):focus {
+.btn.btn-dark:hover, .btn.btn-dark:focus {
 	background-color: var(--aegis-btn-dark-hover, ${btnDarkHover});
 	border-color: ${gray[8]};
 }
 
-.btn.btn-dark:not(:disabled):not(.disabled):active {
+.btn.btn-dark:active {
 	background-color: var(--aegis-btn-dark-active, ${btnDarkActive});
 	border-color: ${gray[9]};
 }
 
-.btn.btn-dark:disabled, .btn.btn-dark.disabled {
+x.btn.btn-dark:disabled, .btn.btn-dark.disabled {
 	background-color: var(--aegis-btn-disabled, ${btnDisabled});
-	color: var(--aegis-color-dark, ${colorDark});
+	color: var(--aegis-color-light, ${colorLight});
 	border-color: ${gray[6]};
 	cursor: not-allowed;
 }`;
 
-const link = css`.btn.btn-link:not(:disabled):not(.disabled) {
+export const btnOutlineDark = css`.btn.btn-outline-dark {
+	background-color: transparent;
+	color: var(--aegis-btn-dar, ${btnDark});
+	border-color: currentColor;
+}
+
+.btn.btn-outline-dark:hover, .btn.btn-outline-dark:focus {
+	background-color: var(--aegis-btn-dark-hover, ${btnDarkHover});
+	border-color: ${gray[8]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-dark:active {
+	background-color: var(--aegis-btn-dark-active, ${btnDarkActive});
+	border-color: ${gray[9]};
+	color: var(--aegis-color-dark, ${colorDark});
+}
+
+.btn.btn-outline-secondary:disabled, .btn.btn-outline-secondary.disabled {
+	color: var(--aegis-btn-active-disabled, ${btnDisabled});
+}`;
+
+const link = css`.btn.btn-link {
 	background-color: var(--aegis-btn-link, ${btnLink});
 	color: ${linkColor};
 	border-color: transparent;
 	text-decoration: none;
 }
 
-.btn.btn-link:not(:disabled):not(.disabled):hover, .btn.btn-link:not(:disabled):not(.disabled):focus {
+.btn.btn-link:hover, .btn.btn-link:focus {
 	background-color: var(--aegis-btn-link-hover, ${btnLinkHover});
 	text-decoration: underline;
 }
 
-.btn.btn-link:not(:disabled):not(.disabled):active {
+.btn.btn-link:active {
 	background-color: var(--aegis-btn-link-active, ${btnLinkActive});
 	text-decoration: underline;
 }
 
-.btn.btn-link:disabled, .btn.btn-link.disabled {
+x.btn.btn-link:disabled, .btn.btn-link.disabled {
 	color: var(--aegis-btn-disabled, ${gray[5]});
 	cursor: not-allowed;
 }`;
diff --git a/consts.js b/consts.js
index 97c4994..d27135a 100644
--- a/consts.js
+++ b/consts.js
@@ -61,4 +61,7 @@ export const customProperties = {
 	'normal-speed': { initialValue: '600ms', syntax: '<time>' },
 	'slow-speed': { initialValue: '800ms', syntax: '<time>' },
 	'crawl-speed': { initialValue: '1200ms', syntax: '<time>' },
+	'btn-disabled-opacity': { initialValue: 0.65, syntax: '<number>' },
+	'btn-disabled-saturation': { initialValue: '50%', syntax: '<percentage>' },
+	'btn-disabled-brightness': { initialValue: '90%', syntax: '<percentage>' },
 };
diff --git a/package-lock.json b/package-lock.json
index f25621a..a9bf4c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@aegisjsproject/styles",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@aegisjsproject/styles",
-      "version": "0.2.2",
+      "version": "0.2.3",
       "funding": [
         {
           "type": "librepay",
diff --git a/package.json b/package.json
index 6960a50..d37965b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/styles",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Pre-made and reusable styles for `@aegisjsproject/core`",
   "keywords": [
     "aegis",
diff --git a/properties.js b/properties.js
index c00a0c0..d5daeaf 100644
--- a/properties.js
+++ b/properties.js
@@ -8,3 +8,8 @@ export const properties = css`${Object.entries(customProperties).map(
 		initial-value: ${initialValue};
 	}`
 ).join('\n\n')}`;
+
+
+export const propertiesLegacy = css`:root {
+	${Object.entries(customProperties).map(([name, { initialValue }]) => `--aegis-${name}: ${initialValue};\n`).join('\n')}
+}`;
diff --git a/test/index.js b/test/index.js
index 8ded7c8..2292f30 100644
--- a/test/index.js
+++ b/test/index.js
@@ -1,7 +1,9 @@
 import { css } from '@aegisjsproject/core';
-const { componentBase, componentBorder, componentDarkTheme, componentLightTheme, btn, reset, ...styles } = await import('@aegisjsproject/styles');
+const { properties, propertiesLegacy, componentBase, componentBorder, componentDarkTheme, componentLightTheme, btn, reset, sheetToLink, ...styles } = await import('@aegisjsproject/styles');
 
-document.adoptedStyleSheets = [btn, reset, ...Object.values(styles).filter(mod => mod instanceof CSSStyleSheet)];
+document.head.append(await sheetToLink(propertiesLegacy));
+
+document.adoptedStyleSheets = [btn, reset, properties, ...Object.values(styles).filter(mod => mod instanceof CSSStyleSheet)];
 
 document.getElementById('toggle').addEventListener('click', async () => {
 	switch(document.documentElement.dataset.theme) {
@@ -61,7 +63,11 @@ customElements.define('test-el', class TestElement extends HTMLElement {
 
 const btns = document.getElementById('btns');
 
-['primary', 'secondary', 'success','info', 'warning', 'danger', 'light', 'dark', 'link'].forEach(t => {
+[
+	'primary','outline-primary', 'secondary', 'outline-secondary', 'success', 'outline-success', 'info', 'outline-info',
+	'warning', 'outline-warning', 'danger', 'outline-danger', 'light', 'outline-light', 'dark',
+	'outline-dark' ,'link',
+].forEach(t => {
 	const btn = document.createElement('button');
 	btn.classList.add('btn', 'btn-lg', 'btn-block', `btn-${t}`);
 	btn.type = 'button';
diff --git a/utils.js b/utils.js
index cf59e94..1d34f0c 100644
--- a/utils.js
+++ b/utils.js
@@ -1,9 +1,19 @@
-export function sheetToFile(sheet, { filename = 'styles.css' } = {}) {
-	return new File(
-		Array.from(sheet.rules, rule => rule.cssText),
-		filename,
-		{ type: 'text/css' }
-	);
+export async function sheetToFile(sheet, { filename = 'styles.css' } = {}) {
+	const { promise, resolve, reject } = Promise.withResolvers();
+
+	requestAnimationFrame(() => {
+		try {
+			resolve(new File(
+				Array.from(sheet.rules, rule => rule.cssText),
+				filename,
+				{ type: 'text/css' }
+			));
+		} catch(err) {
+			reject(err);
+		}
+	});
+
+	return promise;
 }
 
 export async function sheetToLink(sheet, {
@@ -38,8 +48,7 @@ export async function sheetToLink(sheet, {
 		link.disabled = true;
 	}
 
-	link.href = URL.createObjectURL(sheetToFile(sheet));
-
+	link.href = URL.createObjectURL(await sheetToFile(sheet));
 	return link;
 }