smoothly 0.3.38 → 1.0.0-alpha.10

package/dist/collection/components/app/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQlD,MAAM,OAAO,WAAW;;;;EAEvB,MAAM;IACL,OAAO,CACN;MACC,eAAa,CACM,CACpB,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop() color: Color\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-notifier>\n\t\t\t\t<slot></slot>\n\t\t\t</smoothly-notifier>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/app-demo/index.js

@@ -47,3 +47,4 @@ export class SmoothlyAppDemo {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/app-demo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app-demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAK5B,MAAM,OAAO,eAAe;;;;EAE3B,MAAM;IACL,OAAO,CACN,EAAC,GAAG,IAAC,KAAK,EAAC,eAAe;MACzB,SAAG,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,cAE9B;MACJ,SAAG,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,oBAAoB,eAEzC;MACJ,qBAAe,IAAI,EAAC,EAAE;QACrB,sBAAgB,IAAI,EAAC,MAAM,cAAyB;QACpD,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;UAC/C,uBAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,WAEpD;UAClB,uBACC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,yEAAyE,EAC9E,QAAQ,EAAE,IAAI,eAEG;UAClB,uBAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAE1D;UAClB,uBAAiB,QAAQ,QAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAEnE;UAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,kBAEtE,CACb,CACS;MAChB,qBAAe,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO;QACxC,8BAAuB,CACR;MAChB,qBAAe,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ;QAC1C,+BAAwB,CACT;MAChB,qBAAe,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,aAAa;QAC/D,gCAAyB,CACV;MAChB,qBAAe,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO;QACxC,8BAAuB,CACR;MAChB,qBAAe,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ;QAC1C,+BAAwB,CACT;MAChB,qBAAe,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM;QACtC,6BAAsB,CACP;MAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,UAAU;QAC/C,uBACC,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE;YACb,QAAQ,CAAC,yBAAyB,CAAC,CAAA;UACpC,CAAC,eAEgB;QAClB,uBACC,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE;YACb,QAAQ,CAAC,oBAAoB,CAAC,CAAA;UAC/B,CAAC,eAEgB,CACH;MAChB,qBAAe,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAC,WAAW;QAC3D,8BAAsB,CACP;MAChB,qBAAe,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,GAAiB;MAClE,YAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE;QAC9D,uBACC,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5B,YAAY,EAAC,MAAM,sBACF,8BAA8B,gBACpC,MAAM,EACjB,QAAQ,EAAE,IAAI,sBACG,YAAY,EAC7B,OAAO,EAAE;YACR,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE;YACpD,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE;YACzE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE;YAC/C,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE;YACvC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE;YACvC,EAAE,IAAI,EAAE,2BAA2B,EAAE,KAAK,EAAE,SAAS,EAAE;YACvD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE;YACtC,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE;YAC1C,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,QAAQ,EAAE;YAClD,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC1C,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;WACzC,GAAoB,CAChB;MACP,wBAAkB,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ;QACxD,qBAAe,OAAO,EAAE,SAAS,EAAE,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,GAAiB,CAC9D,CACd,CACN,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { redirect } from \"../../index\"\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { App } from \"../App\"\n\n@Component({\n\ttag: \"smoothly-app-demo\",\n})\nexport class SmoothlyAppDemo {\n\t@Prop() baseUrl: string\n\trender() {\n\t\treturn (\n\t\t\t<App label=\"Smoothly Demo\">\n\t\t\t\t<a slot=\"nav-start\" href=\"display\">\n\t\t\t\t\tDisplay\n\t\t\t\t</a>\n\t\t\t\t<a slot=\"nav-start\" href=\"https://google.com\">\n\t\t\t\t\tExternal\n\t\t\t\t</a>\n\t\t\t\t<smoothly-room path=\"\">\n\t\t\t\t\t<smoothly-input type=\"text\">Default</smoothly-input>\n\t\t\t\t\t<div style={{ padding: \"1em\", maxWidth: \"12em\" }}>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" link=\"https://google.com\">\n\t\t\t\t\t\t\topen\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\t\tlink=\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"\n\t\t\t\t\t\t\tdownload={true}>\n\t\t\t\t\t\t\tdownload\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button type=\"link\" fill=\"clear\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction link\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"input\" label=\"Input\">\n\t\t\t\t\t<smoothly-input-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"dialog\" label=\"Dialog\">\n\t\t\t\t\t<smoothly-dialog-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"display\" label=\"Display\" icon=\"eye-outline\">\n\t\t\t\t\t<smoothly-display-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"table\" label=\"Table\">\n\t\t\t\t\t<smoothly-table-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"select\" label=\"Select\">\n\t\t\t\t\t<smoothly-select-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"icon\" label=\"Icon\">\n\t\t\t\t\t<smoothly-icon-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"/redirect\" label=\"Redirect\">\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tstyle={{ \"max-width\": \"300px\" }}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tredirect(\"/routing/pathParameter1\")\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tInternal\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tstyle={{ \"max-width\": \"300px\" }}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tredirect(\"https://google.com\")\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tExternal\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path={/^\\/routing\\/\\w+\\/?/} label=\"No effect\">\n\t\t\t\t\t<h2>Regex routing</h2>\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"old\" label=\"Old\" to=\"select\"></smoothly-room>\n\t\t\t\t<span slot=\"header\" style={{ width: \"100%\", maxWidth: \"500px\" }}>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tlabel=\"All Animals Selected\"\n\t\t\t\t\t\tstyle={{ minWidth: \"100px\" }}\n\t\t\t\t\t\tlabelSetting=\"hide\"\n\t\t\t\t\t\tempty-menu-label=\"Sorry, we're out of options.\"\n\t\t\t\t\t\tmax-height=\"58px\"\n\t\t\t\t\t\tmultiple={true}\n\t\t\t\t\t\tselect-none-name=\"Select All\"\n\t\t\t\t\t\toptions={[\n\t\t\t\t\t\t\t{ name: \"Big Dog\", value: \"dog\", aliases: [\"WOFF\"] },\n\t\t\t\t\t\t\t{ name: \"Cat Stevens\", value: \"cat\", aliases: [\"moew\"], hint: \"moew 🐈\" },\n\t\t\t\t\t\t\t{ name: \"Noble Pig\", value: \"pig\", hint: \"🐷\" },\n\t\t\t\t\t\t\t{ name: \"Turtle Wax\", value: \"turtle\" },\n\t\t\t\t\t\t\t{ name: \"Spider Man\", value: \"spider\" },\n\t\t\t\t\t\t\t{ name: \"Phoenix Order Long Wooord\", value: \"phoenix\" },\n\t\t\t\t\t\t\t{ name: \"Horse Back\", value: \"horse\" },\n\t\t\t\t\t\t\t{ name: \"Unicorn Horn\", value: \"unicorn\" },\n\t\t\t\t\t\t\t{ name: \"Talking Parrot Parrot\", value: \"parrot\" },\n\t\t\t\t\t\t\t{ name: \"Hidden Dragon\", value: \"dragon\" },\n\t\t\t\t\t\t\t{ name: \"Scary Kraken\", value: \"kraken\" },\n\t\t\t\t\t\t]}></smoothly-picker>\n\t\t\t\t</span>\n\t\t\t\t<smoothly-trigger slot=\"header\" type=\"link\" name=\"logout\">\n\t\t\t\t\t<smoothly-icon toolTip={\"Log out\"} name=\"log-out\" size=\"medium\"></smoothly-icon>\n\t\t\t\t</smoothly-trigger>\n\t\t\t</App>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/backtotop/index.js

@@ -100,3 +100,4 @@ export class SmoothlyBacktotop {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/backtotop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/backtotop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO/D,MAAM,OAAO,iBAAiB;;mBACX,KAAK;kBACN,MAAM;iBACP,MAAM;;;EAEtB,iBAAiB;IAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,GAAG,EAAE,CAAA;IACvF,CAAC,CAAC,CAAA;EACH,CAAC;EACD,MAAM;IACL,MAAM,YAAY,GAAG;MACpB,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;MAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MAClD,UAAU,EAAE,IAAI,CAAC,MAAM;MACvB,SAAS,EAAE,IAAI,CAAC,KAAK;KACrB,CAAA;IACD,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE,CACb,MAAM,CAAC,QAAQ,CAAC;QACf,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OAClB,CAAC;MAEH,qBAAe,IAAI,EAAC,oBAAoB,GAAiB,CACnD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-backtotop\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyBacktotop {\n\t@Prop() opacity = \"0.5\"\n\t@Prop() bottom = \"1rem\"\n\t@Prop() right = \"1rem\"\n\t@State() visible: boolean\n\tcomponentWillLoad() {\n\t\twindow.addEventListener(\"scroll\", () => {\n\t\t\tthis.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20\n\t\t})\n\t}\n\trender() {\n\t\tconst cssVariables = {\n\t\t\t\"--opacity\": this.visible ? this.opacity : \"0\",\n\t\t\t\"--pointer-events\": this.visible ? \"auto\" : \"none\",\n\t\t\t\"--bottom\": this.bottom,\n\t\t\t\"--right\": this.right,\n\t\t}\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={cssVariables}\n\t\t\t\tonClick={() =>\n\t\t\t\t\twindow.scrollTo({\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\t})\n\t\t\t\t}>\n\t\t\t\t<smoothly-icon name=\"chevron-up-outline\"></smoothly-icon>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/button/index.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { Button } from "../Button";
 export class SmoothlyButton {
   constructor() {
     this.color = undefined;
@@ -6,31 +7,24 @@ export class SmoothlyButton {
     this.fill = undefined;
     this.disabled = false;
     this.type = "button";
+    this.size = undefined;
+    this.shape = undefined;
     this.link = undefined;
     this.download = undefined;
   }
   render() {
-    let result;
-    switch (this.type) {
-      case "link":
-        result = this.disabled ? (h("slot", null)) : (h("a", { href: this.link }, h("slot", null)));
-        break;
-      case "button":
-        result = this.link ? (this.disabled ? (h("slot", null)) : (h("a", { href: this.link, target: "_blank", download: this.download }, h("slot", null)))) : (h("button", { disabled: this.disabled }, h("slot", null)));
-        break;
-    }
-    return result;
+    return h(Button, { disabled: this.disabled, type: this.type, link: this.link, download: this.download });
   }
   static get is() { return "smoothly-button"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["style.css"]
+      "$": ["../button/style.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["style.css"]
+      "$": ["../button/style.css"]
     };
   }
   static get properties() {
@@ -39,7 +33,7 @@ export class SmoothlyButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Color | undefined",
+          "original": "Color",
           "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
           "references": {
             "Color": {
@@ -49,7 +43,7 @@ export class SmoothlyButton {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -61,17 +55,12 @@ export class SmoothlyButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Expand",
-          "resolved": "\"block\" | \"full\"",
-          "references": {
-            "Expand": {
-              "location": "import",
-              "path": "../../model"
-            }
-          }
+          "original": "\"block\" | \"full\"",
+          "resolved": "\"block\" | \"full\" | undefined",
+          "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -84,7 +73,7 @@ export class SmoothlyButton {
         "mutable": false,
         "complexType": {
           "original": "Fill",
-          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\"",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
           "references": {
             "Fill": {
               "location": "import",
@@ -93,7 +82,7 @@ export class SmoothlyButton {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -137,6 +126,40 @@ export class SmoothlyButton {
         "reflect": true,
         "defaultValue": "\"button\""
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"large\" | \"icon\"",
+          "resolved": "\"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      },
       "link": {
         "type": "string",
         "mutable": false,
@@ -174,3 +197,4 @@ export class SmoothlyButton {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;;;;oBAIU,KAAK;gBACU,QAAQ;;;;;;EAM3D,MAAM;IACL,OAAO,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAW,CAAA;EAC7G,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-button\",\n\tstyleUrl: \"../button/style.css\",\n\tshadow: true,\n})\nexport class SmoothlyButton {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() link?: string\n\t@Prop() download?: boolean\n\n\trender() {\n\t\treturn <Button disabled={this.disabled} type={this.type} link={this.link} download={this.download}></Button>\n\t}\n}\n"]}

package/dist/collection/components/button/style.css

@@ -1,53 +1,206 @@
-:host[type=link] {
-	display: inline;
-	border: none;
+[color=default] {
+	--smoothly-color: var(--smoothly-default-color);
+	--smoothly-color-contrast: var(--smoothly-default-contrast);
+	--smoothly-color-shade: var(--smoothly-default-shade);
+	--smoothly-color-tint: var(--smoothly-default-tint);
 }
-:host:not([type=link]) {
-	display: flex;
-	align-items: center;
-	justify-content: center;
+
+[color=primary] {
+	--smoothly-color: var(--smoothly-primary-color);
+	--smoothly-color-contrast: var(--smoothly-primary-contrast);
+	--smoothly-color-shade: var(--smoothly-primary-shade);
+	--smoothly-color-tint: var(--smoothly-primary-tint);
+}
+
+[color=secondary] {
+	--smoothly-color: var(--smoothly-secondary-color);
+	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
+	--smoothly-color-shade: var(--smoothly-secondary-shade);
+	--smoothly-color-tint: var(--smoothly-secondary-tint);
+}
+
+[color=tertiary] {
+	--smoothly-color: var(--smoothly-tertiary-color);
+	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
+	--smoothly-color-shade: var(--smoothly-tertiary-shade);
+	--smoothly-color-tint: var(--smoothly-tertiary-tint);
+}
+
+[color=success] {
+	--smoothly-color: var(--smoothly-success-color);
+	--smoothly-color-contrast: var(--smoothly-success-color);
+	--smoothly-color-shade: var(--smoothly-success-shade);
+	--smoothly-color-tint: var(--smoothly-success-tint);
 }
-:host {
+
+[color=warning] {
+	--smoothly-color: var(--smoothly-warning-color);
+	--smoothly-color-contrast: var(--smoothly-warning-contrast);
+	--smoothly-color-shade: var(--smoothly-warning-shade);
+	--smoothly-color-tint: var(--smoothly-warning-tint);
+}
+
+[color=danger] {
+	--smoothly-color: var(--smoothly-danger-color);
+	--smoothly-color-contrast: var(--smoothly-danger-contrast);
+	--smoothly-color-shade: var(--smoothly-danger-shade);
+	--smoothly-color-tint: var(--smoothly-danger-tint);
+}
+
+[color=light] {
+	--smoothly-color: var(--smoothly-light-color);
+	--smoothly-color-contrast: var(--smoothly-light-contrast);
+	--smoothly-color-shade: var(--smoothly-light-shade);
+	--smoothly-color-tint: var(--smoothly-light-tint);
+}
+
+[color=medium] {
+	--smoothly-color: var(--smoothly-medium-color);
+	--smoothly-color-contrast: var(--smoothly-medium-contrast);
+	--smoothly-color-shade: var(--smoothly-medium-shade);
+	--smoothly-color-tint: var(--smoothly-medium-tint);
+}
+
+[color=dark] {
+	--smoothly-color: var(--smoothly-dark-color);
+	--smoothly-color-contrast: var(--smoothly-dark-contrast);
+	--smoothly-color-shade: var(--smoothly-dark-shade);
+	--smoothly-color-tint: var(--smoothly-dark-tint);
+}
+
+
+:host{
+	display: inline-block;
 	margin: 1em;
-	border-style: solid;
-	border-width: 1px;
-	border-radius: 3px;
+	box-sizing: border-box;
+	border-radius: 0.5rem;
+	border: solid 1px;
+	transition: background 150ms ease-in-out;
 }
-:host[hidden] {
-	display: none;
+:host([type=link]){
+	display: inline;
+	border: none;
 }
-:host[disabled] {
+:host([disabled]){
 	opacity: 0.5;
 	pointer-events: none;
 }
 a,
-button {
-	display: block;
-	border-color: transparent;
-	background-color: transparent;
-	padding: 0.2em 0.3em;
+button{
 	font-size: 110%;
 	font-weight: 400;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+	display: inline-flex;
+	gap: 0.5rem;
+}
+button {
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	border-radius: 0.5rem;
+	min-width: 8em;
+	align-items: center;
 }
-:host:not([disabled]):hover,
-:host:not([disabled]):focus,
-:host:not([disabled]):active {
-	border-color: var(--smoothly-button-border);
+:host(:not([size=icon])) > button {
+	padding: 0.8em;
 }
-:host[type=button] > a {
-	display: block;
+:host([size=icon]) > button{
+	padding: 0.5em;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]){
+	border-radius: 2rem;
+}
+:host([type=button]) > a {
 	text-align: center;
 	text-decoration: inherit;
-}
-:host[type=button] > a {
 	width: calc(100% - 0.6em);
 }
-:host > button {
-	height: 100%;
-	width: 100%;
+:host([size=small]) > button{
+	font-size: 100%;
+}
+:host([size=large]) > button{
+	font-size: 130%;
+}
+:host(:not([size=icon])){
+	min-width: 8em;
 }
-:host[expand=fill] {
+:host([expand]) {
 	width: 100%;
+}
+:host([expand=full]) {
 	border-left: none;
 	border-right: none;
+	border-radius: 0;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]){
+	border-radius: 2rem;
+}
+:host(:not([fill=clear]):hover),
+:host(:not([fill=clear]):focus),	
+:host(:not([fill=clear]):active){
+	border-color: rgb(var(--smoothly-color-tint)) !important;
+	background: rgb(var(--smoothly-color-tint)) !important;
+}
+:host(:not([fill=clear]):hover) > button,
+:host(:not([fill=clear]):focus) > button,
+:host(:not([fill=clear]):active) > button{
+	color: rgb(var(--smoothly-color-contrast)) !important;
+	stroke: rgb(var(--smoothly-color-contrast)) !important;
+	fill: rgb(var(--smoothly-color-contrast)) !important;
+}
+:host([fill=clear]:hover) > button,
+:host([fill=clear]:focus) > button,
+:host([fill=clear]:active) > button{
+	color: rgb(var(--smoothly-color-tint)) !important;
+	stroke: rgb(var(--smoothly-color-tint)) !important;
+	fill: rgb(var(--smoothly-color-tint)) !important;
+}
+:host([disabled]){
+	opacity: 0.5;
+	pointer-events: none;
+}
+:host(:not([fill])),
+:host([fill=default]) {
+	color: rgb(var(--smoothly-color-contrast));
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
+	background: rgb(var(--smoothly-color));
+	border-color: transparent;
+}
+:host([fill=solid]) {
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
+	background: rgb(var(--smoothly-color));
+	border-color: rgb(var(--smoothly-color-shade));
+}
+:host([fill=solid]) > button,
+:host([fill=default]) > button{
+	color: rgb(var(--smoothly-color-contrast));
+}
+:host([fill=outline]) {
+	stroke: rgb(var(--smoothly-color));
+	fill: rgb(var(--smoothly-color));
+	background: transparent;
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=clear]) {
+	stroke: rgb(var(--smoothly-color));
+	fill: rgb(var(--smoothly-color));
+	background: transparent;
+	border-color: transparent;
+}
+:host([fill=outline]) > button,
+:host([fill=clear]) > button{
+	color: rgb(var(--smoothly-color));
+}
+::slotted(smoothly-icon[slot=start]),
+::slotted(smoothly-icon[slot=end]){
+	font-size: 0.65em;
+}
+:host([hidden]){
+	display: none;
 }

package/dist/collection/components/calendar/generate.js

@@ -56,3 +56,4 @@ export function years(current) {
   }
   return result;
 }
+//# sourceMappingURL=generate.js.map

package/dist/collection/components/calendar/generate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate.js","sourceRoot":"","sources":["../../../src/components/calendar/generate.ts"],"names":[],"mappings":"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","sourcesContent":["import * as isoly from \"isoly\"\n\nexport function month(date: isoly.Date): isoly.Date[][] {\n\tconst d = new Date(date)\n\td.setDate(1)\n\tlet day = -((d.getDay() + 6) % 7) + 1\n\tconst result: string[][] = []\n\tfor (let row = 0; row < 6; row++) {\n\t\tconst r = []\n\t\tfor (let column = 0; column < 7; column++) {\n\t\t\tconst d = new Date(date)\n\t\t\td.setDate(day++)\n\t\t\tr.push(isoly.Date.create(d))\n\t\t}\n\t\tif (row < 5 || isoly.Date.firstOfMonth(r[0]) == isoly.Date.firstOfMonth(date))\n\t\t\tresult.push(r)\n\t}\n\treturn result\n}\n\nexport function weekdays(): string[] {\n\tconst day = new globalThis.Date()\n\tday.setDate(day.getDate() - day.getDay() + 1)\n\tconst result: string[] = []\n\tfor (let i = 0; i < 7; i++) {\n\t\tresult.push(day.toLocaleString(undefined, { weekday: \"short\" }))\n\t\tday.setDate(day.getDate() + 1)\n\t}\n\treturn result\n}\n\nexport function months(current: isoly.Date): { date: isoly.Date; name: string; selected?: boolean }[] {\n\tconst day = new globalThis.Date(current)\n\tconst result: { date: isoly.Date; name: string; selected?: boolean }[] = []\n\tfor (let i = 0; i < 12; i++) {\n\t\tday.setMonth(i, 28)\n\t\tconst date = isoly.Date.create(day)\n\t\tresult.push({\n\t\t\tdate,\n\t\t\tname: day.toLocaleString(undefined, { month: \"long\" }),\n\t\t\tselected: date.substr(0, 7) == current.substr(0, 7),\n\t\t})\n\t}\n\treturn result\n}\nexport function years(current: isoly.Date): { date: isoly.Date; name: string; selected?: boolean }[] {\n\tconst day = new globalThis.Date(current)\n\tconst start = new Date().getFullYear() - 10\n\tconst end = new Date().getFullYear() + 10\n\tconst result: { date: isoly.Date; name: string; selected?: boolean }[] = []\n\tfor (let i = start; i <= end; i++) {\n\t\tday.setFullYear(i)\n\t\tconst date = isoly.Date.create(day)\n\t\tresult.push({\n\t\t\tdate,\n\t\t\tname: day.toLocaleString(undefined, { year: \"numeric\" }),\n\t\t\tselected: date == current,\n\t\t})\n\t}\n\treturn result\n}\n"]}

package/dist/collection/components/calendar/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Date } from "isoly";
 import * as generate from "./generate";
 export class Calendar {
@@ -11,7 +11,6 @@ export class Calendar {
     this.max = undefined;
     this.min = undefined;
     this.doubleInput = undefined;
-    this.color = undefined;
     this.firstSelected = undefined;
   }
   onStart(next) {
@@ -54,28 +53,29 @@ export class Calendar {
   }
   render() {
     var _a, _b;
-    return (h(Host, null, h("smoothly-input-month", { value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, onValueChanged: event => {
-        this.month = event.detail;
-        event.stopPropagation();
-      } }), h("table", null, h("thead", null, h("tr", null, generate.weekdays().map(day => (h("th", null, day))))), generate.month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (h("tr", null, week.map(date => {
-      var _a, _b, _c;
-      return (h("td", { tabindex: 1, onMouseOver: () => {
-          !this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)
-            ? undefined
-            : this.onHover(date);
-        }, onClick: (this.min || this.max) && (date < this.min || date > this.max)
-          ? undefined
-          : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
-          .concat(...(date == Date.now() ? ["today"] : []), Date.firstOfMonth((_a = this.month) !== null && _a !== void 0 ? _a : this.value) == Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
-          ? this.start == date || this.end == date
-            ? ["selected"]
-            : date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
-              ? ["dateRange"]
-              : []
-          : "")
-          .concat(...(this.min || this.max ? (date < this.min || date > this.max ? ["disable"] : []) : ""))
-          .join(" ") }, date.substring(8, 10)));
-    })))))));
+    return [
+      h("smoothly-input-month", { value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, onValueChanged: event => {
+          this.month = event.detail;
+          event.stopPropagation();
+        } }),
+      h("table", null, h("thead", null, h("tr", null, generate.weekdays().map(day => (h("th", null, day))))), generate.month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (h("tr", null, week.map(date => {
+        var _a, _b, _c;
+        return (h("td", { tabindex: 1, onMouseOver: () => {
+            !this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)
+              ? undefined
+              : this.onHover(date);
+          }, onClick: (this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
+            .concat(...(date == Date.now() ? ["today"] : []), Date.firstOfMonth((_a = this.month) !== null && _a !== void 0 ? _a : this.value) == Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
+            ? this.start == date || this.end == date
+              ? ["selected"]
+              : date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
+                ? ["dateRange"]
+                : []
+            : "")
+            .concat(...(this.min || this.max ? (date < this.min || date > this.max ? ["disable"] : []) : ""))
+            .join(" ") }, date.substring(8, 10)));
+      }))))),
+    ];
   }
   static get is() { return "smoothly-calendar"; }
   static get encapsulation() { return "scoped"; }
@@ -240,28 +240,6 @@ export class Calendar {
         },
         "attribute": "double-input",
         "reflect": true
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color",
-          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "../../model"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": true
       }
     };
   }
@@ -384,3 +362,4 @@ export class Calendar {
       }];
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from \"@stencil/core\"\nimport { Date, DateRange } from \"isoly\"\nimport * as generate from \"./generate\"\n\n@Component({\n\ttag: \"smoothly-calendar\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Calendar {\n\t@Element() element: HTMLTableRowElement\n\t@Prop({ mutable: true }) month?: Date\n\t@Prop({ mutable: true }) value: Date = Date.now()\n\t@Prop({ mutable: true }) start?: Date\n\t@Prop({ mutable: true }) end?: Date\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) doubleInput: boolean\n\t@Event() valueChanged: EventEmitter<Date>\n\t@Event() startChanged: EventEmitter<Date>\n\t@Event() endChanged: EventEmitter<Date>\n\t@Event() dateSet: EventEmitter<Date>\n\t@Event() dateRangeSet: EventEmitter<DateRange>\n\tprivate frozenDate: Date\n\t@State() firstSelected: boolean\n\t@Watch(\"start\")\n\tonStart(next: Date) {\n\t\tthis.startChanged.emit(next)\n\t}\n\t@Watch(\"end\")\n\tonEnd(next: Date) {\n\t\tthis.endChanged.emit(next)\n\t}\n\tprivate clickCounter = 0\n\tprivate onClick(date: Date) {\n\t\tthis.valueChanged.emit((this.value = date))\n\t\tthis.clickCounter += 1\n\t\tif (this.doubleInput) {\n\t\t\tif (this.clickCounter % 2 == 1)\n\t\t\t\tthis.start = this.end = this.frozenDate = date\n\t\t\telse {\n\t\t\t\tif (this.start && date > this.start)\n\t\t\t\t\tthis.end = date\n\t\t\t\telse\n\t\t\t\t\tthis.start = date\n\t\t\t}\n\t\t}\n\t\t!this.doubleInput && this.dateSet.emit(this.value)\n\t\tthis.doubleInput &&\n\t\t\tthis.clickCounter % 2 == 0 &&\n\t\t\tthis.start &&\n\t\t\tthis.end &&\n\t\t\tthis.dateRangeSet.emit({ start: this.start, end: this.end })\n\t}\n\tprivate onHover(date: Date) {\n\t\tif (this.doubleInput && this.clickCounter % 2 == 1) {\n\t\t\tif (date < this.frozenDate) {\n\t\t\t\tthis.start = date\n\t\t\t\tthis.end = this.frozenDate\n\t\t\t} else {\n\t\t\t\tthis.start = this.frozenDate\n\t\t\t\tthis.end = date\n\t\t\t}\n\t\t}\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input-month\n\t\t\t\tvalue={this.month ?? this.value}\n\t\t\t\tonValueChanged={event => {\n\t\t\t\t\tthis.month = event.detail\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t}}></smoothly-input-month>,\n\t\t\t<table>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t{generate.weekdays().map(day => (\n\t\t\t\t\t\t\t<th>{day}</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t{generate.month(this.month ?? this.value).map(week => (\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t{week.map(date => (\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\ttabindex={1}\n\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t!this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: this.onHover(date)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t(this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclass={(date == this.value ? [\"selected\"] : [])\n\t\t\t\t\t\t\t\t\t.concat(\n\t\t\t\t\t\t\t\t\t\t...(date == Date.now() ? [\"today\"] : []),\n\t\t\t\t\t\t\t\t\t\tDate.firstOfMonth(this.month ?? this.value) == Date.firstOfMonth(date) ? [\"currentMonth\"] : [],\n\t\t\t\t\t\t\t\t\t\tthis.doubleInput\n\t\t\t\t\t\t\t\t\t\t\t? this.start == date || this.end == date\n\t\t\t\t\t\t\t\t\t\t\t\t? [\"selected\"]\n\t\t\t\t\t\t\t\t\t\t\t\t: date >= (this.start ?? \"\") && date <= (this.end ?? \"\")\n\t\t\t\t\t\t\t\t\t\t\t\t? [\"dateRange\"]\n\t\t\t\t\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t.concat(...(this.min || this.max ? (date < this.min || date > this.max ? [\"disable\"] : []) : \"\"))\n\t\t\t\t\t\t\t\t\t.join(\" \")}>\n\t\t\t\t\t\t\t\t{date.substring(8, 10)}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t))}\n\t\t\t</table>,\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/calendar/style.css

@@ -1,15 +1,11 @@
-html smoothly-notifier :host {
+:host {
 	display: block;
 	--other-month-opacity: 0.5;
-	padding-bottom: 1rem;
-}
-html smoothly-notifier :host[color] {
-	background-color: rgb(var(--smoothly-color-shade));
+	margin-bottom: 1rem;
 }
 :host > smoothly-input-month {
 	width: calc(100% - 1em);
 	padding: 0.5em 0.5em 0 0.5em;
-	background-color: rgb(var(--smoothly-color-shade));
 }
 :host > table {
 	table-layout: fixed;
@@ -20,21 +16,21 @@ td {
 	text-align: center;
 	padding: 0.5em;
 	min-width: 2em;
-	background-color: rgb(var(--smoothly-color-shade));
+	background-color: rgb(var(--smoothly-default-shade));
 	cursor: pointer;
 	user-select: none;
 }
 td.currentMonth {
-	color: rgb(var(--smoothly-color-contrast));
+	color: rgb(var(--smoothly-default-contrast));
 }
 td:not(.currentMonth) {
-	color: rgba(var(--smoothly-color-contrast), var(--other-month-opacity));
+	color: rgba(var(--smoothly-default-contrast), var(--other-month-opacity));
 }
 td:nth-child(6):not(.currentMonth).selected,
 td:nth-child(6):not(.currentMonth).dateRange,
 td:nth-child(7):not(.currentMonth).selected,
 td:nth-child(7):not(.currentMonth).dateRange {
-	color: rgba(var(--smoothly-color-contrast));
+	color: rgba(var(--smoothly-default-contrast));
 }
 td:nth-child(6),
 td:nth-child(7) {
@@ -62,6 +58,6 @@ td.dateRange {
 }
 td.disable {
 	cursor: not-allowed;
-	background-color: rgb(var(--smoothly-color-tint), 0.5);
-	color: rgb(var(--smoothly-color-contrast), 0.5);
+	background-color: rgb(var(--smoothly-default-tint), 0.5);
+	color: rgb(var(--smoothly-default-contrast), 0.5);
 }