@blockle/blocks 0.3.9 → 0.4.1

package/dist/styles/components/Dialog/dialog.css.cjs

@@ -0,0 +1,83 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/Dialog/dialog.css.ts?used", "blocks");
+const backdropEnterAnimation = css.keyframes({
+  "0%": {
+    opacity: 0
+  },
+  "100%": {
+    opacity: 1
+  }
+}, "backdropEnterAnimation");
+const backdropLeaveAnimation = css.keyframes({
+  "0%": {
+    opacity: 1
+  },
+  "100%": {
+    opacity: 0
+  }
+}, "backdropLeaveAnimation");
+const dialogEnterAnimation = css.keyframes({
+  "0%": {
+    transform: "translateY(-34px)"
+  },
+  "100%": {
+    transform: "translateY(0)"
+  }
+}, "dialogEnterAnimation");
+const dialogLeaveAnimation = css.keyframes({
+  "0%": {
+    transform: "translateY(0)"
+  },
+  "100%": {
+    transform: "translateY(-34px)"
+  }
+}, "dialogLeaveAnimation");
+const backdrop = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      contain: "layout",
+      position: "fixed",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      overflow: "hidden",
+      opacity: "0",
+      animationName: backdropEnterAnimation,
+      animationDuration: "100ms",
+      animationFillMode: "both"
+    }
+  }
+}, "backdrop");
+const backdropLeave = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      animationName: backdropLeaveAnimation
+    }
+  }
+}, "backdropLeave");
+const dialog = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      animationName: dialogEnterAnimation,
+      animationDuration: "160ms",
+      animationFillMode: "both"
+    }
+  }
+}, "dialog");
+const dialogLeave = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      animationName: dialogLeaveAnimation
+    }
+  }
+}, "dialogLeave");
+fileScope.endFileScope();
+exports.backdrop = backdrop;
+exports.backdropLeave = backdropLeave;
+exports.backdropLeaveAnimation = backdropLeaveAnimation;
+exports.dialog = dialog;
+exports.dialogLeave = dialogLeave;

package/dist/styles/components/Dialog/dialog.css.mjs

@@ -0,0 +1,84 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Dialog/dialog.css.ts?used", "blocks");
+const backdropEnterAnimation = keyframes({
+  "0%": {
+    opacity: 0
+  },
+  "100%": {
+    opacity: 1
+  }
+}, "backdropEnterAnimation");
+const backdropLeaveAnimation = keyframes({
+  "0%": {
+    opacity: 1
+  },
+  "100%": {
+    opacity: 0
+  }
+}, "backdropLeaveAnimation");
+const dialogEnterAnimation = keyframes({
+  "0%": {
+    transform: "translateY(-34px)"
+  },
+  "100%": {
+    transform: "translateY(0)"
+  }
+}, "dialogEnterAnimation");
+const dialogLeaveAnimation = keyframes({
+  "0%": {
+    transform: "translateY(0)"
+  },
+  "100%": {
+    transform: "translateY(-34px)"
+  }
+}, "dialogLeaveAnimation");
+const backdrop = style({
+  "@layer": {
+    [blocksLayer]: {
+      contain: "layout",
+      position: "fixed",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      overflow: "hidden",
+      opacity: "0",
+      animationName: backdropEnterAnimation,
+      animationDuration: "100ms",
+      animationFillMode: "both"
+    }
+  }
+}, "backdrop");
+const backdropLeave = style({
+  "@layer": {
+    [blocksLayer]: {
+      animationName: backdropLeaveAnimation
+    }
+  }
+}, "backdropLeave");
+const dialog = style({
+  "@layer": {
+    [blocksLayer]: {
+      animationName: dialogEnterAnimation,
+      animationDuration: "160ms",
+      animationFillMode: "both"
+    }
+  }
+}, "dialog");
+const dialogLeave = style({
+  "@layer": {
+    [blocksLayer]: {
+      animationName: dialogLeaveAnimation
+    }
+  }
+}, "dialogLeave");
+endFileScope();
+export {
+  backdrop,
+  backdropLeave,
+  backdropLeaveAnimation,
+  dialog,
+  dialogLeave
+};

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -5,6 +5,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: styles_lib_css_theme_vars_css_cjs.vars.borderRadius,
+  border: ["none"],
   bottom: [0],
   boxShadow: styles_lib_css_theme_vars_css_cjs.vars.shadow,
   color: colorWithCurrentColor,

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -4,6 +4,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: vars.borderRadius,
+  border: ["none"],
   bottom: [0],
   boxShadow: vars.shadow,
   color: colorWithCurrentColor,

package/dist/styles/themes/momotaro/components/dialog.css.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
+const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "dialog",
+  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "column",
+    padding: "gutter",
+    border: "none",
+    overflow: "auto"
+  }), {
+    minWidth: "300px"
+  }], "dialog_base"),
+  variants: {
+    backdrop: css.style({
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }, "dialog_variants_backdrop")
+  }
+});
+fileScope.endFileScope();
+exports.dialog = dialog;

package/dist/styles/themes/momotaro/components/dialog.css.mjs

@@ -0,0 +1,26 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
+const dialog = makeComponentTheme({
+  type: "dialog",
+  base: style([atoms({
+    display: "flex",
+    flexDirection: "column",
+    padding: "gutter",
+    border: "none",
+    overflow: "auto"
+  }), {
+    minWidth: "300px"
+  }], "dialog_base"),
+  variants: {
+    backdrop: style({
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }, "dialog_variants_backdrop")
+  }
+});
+endFileScope();
+export {
+  dialog
+};

package/dist/styles/themes/momotaro/components/index.cjs

@@ -3,10 +3,12 @@ const styles_themes_momotaro_components_button_css_cjs = require("./button.css.c
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
+const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   link: styles_themes_momotaro_components_link_css_cjs.link,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
-  divider: styles_themes_momotaro_components_divider_css_cjs.divider
+  divider: styles_themes_momotaro_components_divider_css_cjs.divider,
+  dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -2,11 +2,13 @@ import { button } from "./button.css.mjs";
 import { link } from "./link.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 import { divider } from "./divider.css.mjs";
+import { dialog } from "./dialog.css.mjs";
 const components = {
   button,
   link,
   spinner,
-  divider
+  divider,
+  dialog
 };
 export {
   components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.3.9",
+  "version": "0.4.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",