@e280/shiny 0.1.0-10 → 0.1.0-12

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<[content?: import("@e280/sly").Content]>;
+        } & typeof import("./components/button/component.js").ShinyButton;
         ShinyCopy: {
             new (): import("./index.js").ShinyCopy;
             view: import("@e280/sly").View<[text: string | undefined, ms?: any]>;
@@ -8,7 +12,7 @@ export declare function shiny(context: ShinyContext): {
         ShinyDrawer: {
             new (): import("./index.js").ShinyDrawer;
             view: import("@e280/sly").View<[options: {
-                button: boolean;
+                button?: boolean;
                 side?: "left" | "right";
                 control?: import("./index.js").DrawerControl;
             }]>;
@@ -23,13 +27,14 @@ export declare function shiny(context: ShinyContext): {
         } & typeof import("./index.js").ShinyTabs;
     };
     views: {
+        ShinyButton: import("@e280/sly").View<[content?: import("@e280/sly").Content]> & import("@e280/sly").View<[context: ShinyContext, content?: import("@e280/sly").Content]>;
         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;
+            button?: boolean;
             side?: "left" | "right";
             control?: import("./index.js").DrawerControl;
         }]> & import("@e280/sly").View<[context: ShinyContext, options: {
-            button: boolean;
+            button?: boolean;
             side?: "left" | "right";
             control?: import("./index.js").DrawerControl;
         }]>;

package/x/themes/aura.css.js

@@ -3,17 +3,63 @@ import { defaultCssVars, renderCssVars } from "./infra/css-vars.js";
 export const aura = css `@layer overlay {
 
 :host {
-	display: block;
-
 	${renderCssVars({
     ...defaultCssVars(),
 })}
 }
 
-:host([view="shiny-drawer"]) {
+: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"]:not([plain])) {
 	display: block;
 
-	&::part(tray) {
+	&::part(slate) {
 		padding: 1em;
 		background: linear-gradient(
 			to top right,
@@ -24,24 +70,16 @@ export const aura = css `@layer overlay {
 }
 
 :host([view="shiny-drawer"]:state(left)) {
-	&::part(tray) {
+	&::part(slate) {
 		border-bottom-right-radius: 0.5em;
 	}
 }
 
 :host([view="shiny-drawer"]:state(right)) {
-	&::part(tray) {
+	&::part(slate) {
 		border-bottom-left-radius: 0.5em;
 	}
 }
 
-: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,15 @@
 export type CssVars = {
     "bg": string;
     "alpha": string;
+    "lame": string;
+    "angry": string;
+    "zesty": string;
     "happy": string;
+    "calm": string;
     "sad": string;
-    "angry": string;
-    "lame": string;
+    "quirky": string;
     "inactive-opacity": string;
+    "anim-duration": 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,16 @@ import { unsafeCSS } from "lit";
 export function defaultCssVars() {
     return {
         "bg": "#111",
-        "alpha": "#afa",
+        "alpha": "#def",
+        "lame": "#8888",
+        "angry": "#f50",
+        "zesty": "#cf0",
         "happy": "#0fa",
+        "calm": "#0af",
         "sad": "#74f",
-        "angry": "#f50",
-        "lame": "#8888",
+        "quirky": "#f49",
         "inactive-opacity": "0.5",
+        "anim-duration": "300ms",
     };
 }
 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;AAmB7B,MAAM,UAAU,cAAc;IAC7B,OAAO;QACN,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,MAAM;QAEf,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;QAEhB,kBAAkB,EAAE,KAAK;QACzB,eAAe,EAAE,OAAO;KACxB,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"}

package/s/demo/aura-views.ts

@@ -1,6 +0,0 @@
-
-import {shiny} from "../shiny.js"
-import {aura} from "../themes/aura.css.js"
-
-export const auraViews = shiny({theme: aura}).views
-

package/x/demo/aura-views.js

@@ -1,4 +0,0 @@
-import { shiny } from "../shiny.js";
-import { aura } from "../themes/aura.css.js";
-export const auraViews = shiny({ theme: aura }).views;
-//# sourceMappingURL=aura-views.js.map

package/x/demo/aura-views.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"aura-views.js","sourceRoot":"","sources":["../../s/demo/aura-views.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,IAAI,EAAC,MAAM,uBAAuB,CAAA;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC,KAAK,CAAA"}