wip: aura button styles

Author: chase-moskal

s/components/button/style.css.ts

@@ -41,6 +41,7 @@ button {
 	color: inherit;
 	cursor: inherit;
 	outline: inherit;
+	text-shadow: inherit;
 
 	display: inline-flex;
 	justify-content: center;

s/demo/demo.bundle.ts

@@ -132,12 +132,23 @@ dom.register({ShinyDemo: view.component(use => {
 					}
 				`],
 			],
-			content: (
+			content: [
 				views.ShinyButton
 					.props()
 					.children("hello")
-					.render()
-			),
+					.render(),
+				views.ShinyButton
+					.props()
+					.attr("border-gradient", true)
+					.children("hello")
+					.render(),
+				views.ShinyButton
+					.props()
+					.attr("angry", true)
+					.attr("border-gradient", true)
+					.children("hello")
+					.render(),
+			],
 			style: css`
 				.content sly-view {
 					font-size: 2em;

s/themes/aura.css.ts

@@ -9,26 +9,49 @@ export const aura = css`@layer overlay {
 	})}
 }
 
-xxx:host([view="shiny-button"]) {
+:host([view="shiny-button"]) {
 	position: relative;
 
+	--b-bg: var(--calm);
 	--padding: 0.3em 0.7em;
+
+	color: white;
 	border-radius: 2em;
+	background: var(--b-bg);
+	border: none;
+
+	font-weight: medium;
+	text-shadow: 0.1em 0.1em 0.1em #0004;
+	box-shadow: 0.1em 0.2em 0.3em #0002;
+}
+
+:host([view="shiny-button"][angry]) {
+	--b-bg: var(--angry);
+}
+
+:host([view="shiny-button"][border-gradient]) {
+	border: none;
 	background: linear-gradient(
 		to bottom right,
-		cyan,
-		blue
+		color-mix(in oklab, var(--b-bg), white 80%),
+		color-mix(in oklab, var(--b-bg), black 40%)
 	);
-	border: none;
-	box-shadow: 0.1em 0.2em 0.3em #0004;
 
 	&::before {
 		content: "";
 		display: block;
 		position: absolute;
-		inset: 0;
-		background: red;
+		z-index: 0;
+		inset: 0.15em;
+		border-radius: inherit;
+		background: color-mix(in oklab, var(--b-bg), #0004 50%);
 	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+
 }
 
 :host([view="shiny-drawer"]) {