@e280/shiny 0.1.0-10 → 0.1.0-11

package/x/shiny.d.ts

@@ -1,6 +1,10 @@
 import { ShinyContext } from "./components/framework.js";
 export declare function shiny(context: ShinyContext): {
     components: {
+        ShinyButton: {
+            new (): import("./components/button/component.js").ShinyButton;
+            view: import("@e280/sly").View<[]>;
+        } & typeof import("./components/button/component.js").ShinyButton;
         ShinyCopy: {
             new (): import("./index.js").ShinyCopy;
             view: import("@e280/sly").View<[text: string | undefined, ms?: any]>;
@@ -23,6 +27,7 @@ export declare function shiny(context: ShinyContext): {
         } & typeof import("./index.js").ShinyTabs;
     };
     views: {
+        ShinyButton: import("@e280/sly").View<[]> & import("@e280/sly").View<[context: ShinyContext]>;
         ShinyCopy: import("@e280/sly").View<[text: string | undefined, ms?: any]> & import("@e280/sly").View<[context: ShinyContext, text: string | undefined, ms?: any]>;
         ShinyDrawer: import("@e280/sly").View<[options: {
             button: boolean;

package/x/themes/aura.css.js

@@ -3,13 +3,59 @@ import { defaultCssVars, renderCssVars } from "./infra/css-vars.js";
 export const aura = css `@layer overlay {
 
 :host {
-	display: block;
-
 	${renderCssVars({
     ...defaultCssVars(),
 })}
 }
 
+:host([view="shiny-button"]:not([plain])) {
+	position: relative;
+
+	--buttoncolor: var(--calm);
+	--padding: 0.3em 0.7em;
+
+	color: white;
+	border-radius: 2em;
+	background: var(--buttoncolor);
+	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"][lame]) { --buttoncolor: var(--lame); }
+:host([view="shiny-button"][angry]) { --buttoncolor: var(--angry); }
+:host([view="shiny-button"][zesty]) { --buttoncolor: var(--zesty); }
+:host([view="shiny-button"][happy]) { --buttoncolor: var(--happy); }
+:host([view="shiny-button"][calm]) { --buttoncolor: var(--calm); }
+:host([view="shiny-button"][sad]) { --buttoncolor: var(--sad); }
+:host([view="shiny-button"][quirky]) { --buttoncolor: var(--quirky); }
+
+:host([view="shiny-button"][gradient]:not([plain])) {
+	border: none;
+	background: linear-gradient(
+		to bottom right,
+		color-mix(in oklab, var(--buttoncolor), white 40%),
+		color-mix(in oklab, var(--buttoncolor), black 20%)
+	);
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 0;
+		inset: 0.15em;
+		border-radius: inherit;
+		background: color-mix(in oklab, var(--buttoncolor), #0004 50%);
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
 :host([view="shiny-drawer"]) {
 	display: block;
 
@@ -35,13 +81,5 @@ export const aura = css `@layer overlay {
 	}
 }
 
-:host([view="shiny-tabs"]) {
-	display: block;
-
-	&::part(tabs) {
-		display: flex;
-	}
-}
-
 }`;
 //# sourceMappingURL=aura.css.js.map

package/x/themes/aura.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"aura.css.js","sourceRoot":"","sources":["../../s/themes/aura.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjE,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;GAKpB,aAAa,CAAC;IACf,GAAG,cAAc,EAAE;CACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCD,CAAA"}
+{"version":3,"file":"aura.css.js","sourceRoot":"","sources":["../../s/themes/aura.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjE,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;GAGpB,aAAa,CAAC;IACf,GAAG,cAAc,EAAE;CACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4ED,CAAA"}

package/x/themes/infra/css-vars.d.ts

@@ -1,11 +1,14 @@
 export type CssVars = {
     "bg": string;
     "alpha": string;
-    "happy": string;
-    "sad": string;
-    "angry": string;
     "lame": string;
     "inactive-opacity": string;
+    "angry": string;
+    "zesty": string;
+    "happy": string;
+    "calm": string;
+    "sad": string;
+    "quirky": string;
 };
 export declare function defaultCssVars(): CssVars;
 export declare function renderCssVars(vars: CssVars): import("lit").CSSResult;

package/x/themes/infra/css-vars.js

@@ -2,12 +2,15 @@ import { unsafeCSS } from "lit";
 export function defaultCssVars() {
     return {
         "bg": "#111",
-        "alpha": "#afa",
+        "alpha": "#def",
+        "inactive-opacity": "0.5",
+        "lame": "#8888",
+        "angry": "#f50",
+        "zesty": "#cf0",
         "happy": "#0fa",
+        "calm": "#0af",
         "sad": "#74f",
-        "angry": "#f50",
-        "lame": "#8888",
-        "inactive-opacity": "0.5",
+        "quirky": "#f49",
     };
 }
 export function renderCssVars(vars) {

package/x/themes/infra/css-vars.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-vars.js","sourceRoot":"","sources":["../../../s/themes/infra/css-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;AAY7B,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,OAAO;QACf,kBAAkB,EAAE,KAAK;KACzB,CAAA;AACF,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAa;IAC1C,OAAO,SAAS,CACf,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,iBAAiB,GAAG,KAAK,KAAK,IAAI,CAAC;SACjE,IAAI,CAAC,IAAI,CAAC,CACZ,CAAA;AACF,CAAC"}
+{"version":3,"file":"css-vars.js","sourceRoot":"","sources":["../../../s/themes/infra/css-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;AAiB7B,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;QACf,kBAAkB,EAAE,KAAK;QACzB,MAAM,EAAE,OAAO;QACf,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;KAChB,CAAA;AACF,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,IAAa;IAC1C,OAAO,SAAS,CACf,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,iBAAiB,GAAG,KAAK,KAAK,IAAI,CAAC;SACjE,IAAI,CAAC,IAAI,CAAC,CACZ,CAAA;AACF,CAAC"}

package/x/themes/plain.css.js

@@ -3,7 +3,6 @@ import { defaultCssVars, renderCssVars } from "./infra/css-vars.js";
 export const plain = css `@layer overlay {
 
 :host {
-	display: block;
 	${renderCssVars(defaultCssVars())}
 }
 

package/x/themes/plain.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"plain.css.js","sourceRoot":"","sources":["../../s/themes/plain.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjE,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;GAIrB,aAAa,CAAC,cAAc,EAAE,CAAC;;;EAGhC,CAAA"}
+{"version":3,"file":"plain.css.js","sourceRoot":"","sources":["../../s/themes/plain.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjE,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;GAGrB,aAAa,CAAC,cAAc,EAAE,CAAC;;;EAGhC,CAAA"}