@stackflow/plugin-basic-ui 1.9.2-canary.0 → 1.9.2

package/src/components/AppBar.css.ts

@@ -1,7 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { globalVars } from "../basicUIPlugin.css";
+import { android, cupertino, globalVars } from "../basicUIPlugin.css";
 import { f } from "../styles";
 import {
   background,
@@ -40,18 +40,17 @@ export const appBar = recipe({
       zIndex: vars.zIndexes.appBar,
       transition: transitions(appBarCommonTransition),
       selectors: {
-        ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
+        [`${cupertino} &`]: {
           position: "absolute",
         },
-        [`:root[data-stackflow-plugin-basic-ui-theme=cupertino] ${exitActive} &`]:
-          {
-            transform: "translate3d(100%, 0, 0)",
-            transition: transitions({
-              ...appBarCommonTransition,
-              transform: "0s",
-            }),
-          },
-        ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+        [`${cupertino} ${exitActive} &`]: {
+          transform: "translate3d(100%, 0, 0)",
+          transition: transitions({
+            ...appBarCommonTransition,
+            transform: "0s",
+          }),
+        },
+        [`${android} &`]: {
           opacity: 0,
           transform: "translate3d(0, 10rem, 0)",
           transition: transitions({
@@ -61,8 +60,8 @@ export const appBar = recipe({
           }),
         },
         [`
-          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterActive} &,
-          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterDone} &
+          ${android} ${enterActive} &,
+          ${android} ${enterDone} &
         `]: {
           opacity: 1,
           transform: "translate3d(0, 0, 0)",
@@ -79,7 +78,7 @@ export const appBar = recipe({
     modalPresentationStyle: {
       fullScreen: {
         selectors: {
-          ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
+          [`${cupertino} &`]: {
             transform: "translate3d(0, 100vh, 0)",
             transition: transitions({
               ...appBarCommonTransition,
@@ -88,38 +87,36 @@ export const appBar = recipe({
             }),
           },
           [`
-            :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterActive} &,
-            :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterDone} &
+            ${cupertino} ${enterActive} &,
+            ${cupertino} ${enterDone} &
           `]: {
             transform: "translate3d(0, 0, 0)",
           },
-          [`:root[data-stackflow-plugin-basic-ui-theme=cupertino] ${exitActive} &`]:
-            {
-              transform: "translate3d(0, 100vh, 0)",
-              transition: transitions({
-                ...appBarCommonTransition,
-                transform: vars.transitionDuration,
-                opacity: vars.transitionDuration,
-              }),
-            },
+          [`${cupertino} ${exitActive} &`]: {
+            transform: "translate3d(0, 100vh, 0)",
+            transition: transitions({
+              ...appBarCommonTransition,
+              transform: vars.transitionDuration,
+              opacity: vars.transitionDuration,
+            }),
+          },
         },
       },
     },
     activityEnterStyle: {
       slideInLeft: {
         selectors: {
-          ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+          [`${android} &`]: {
             opacity: 1,
             transform: "translate3d(0, 0, 0)",
           },
-          [`:root[data-stackflow-plugin-basic-ui-theme=android] ${exitActive} &`]:
-            {
-              transform: "translate3d(100%, 0, 0)",
-              transition: transitions({
-                ...appBarCommonTransition,
-                transform: "0s",
-              }),
-            },
+          [`${android} ${exitActive} &`]: {
+            transform: "translate3d(100%, 0, 0)",
+            transition: transitions({
+              ...appBarCommonTransition,
+              transform: "0s",
+            }),
+          },
         },
       },
     },
@@ -192,7 +189,7 @@ export const centerMain = recipe({
       color: globalVars.appBar.textColorTransitionDuration,
     }),
     selectors: {
-      ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+      [`${android} &`]: {
         width: "100%",
         justifyContent: "flex-start",
         paddingLeft: "1rem",
@@ -201,7 +198,7 @@ export const centerMain = recipe({
         fontWeight: "bold",
         boxSizing: "border-box",
       },
-      ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
+      [`${cupertino} &`]: {
         position: "absolute",
         display: "flex",
         alignItems: "center",
@@ -224,7 +221,7 @@ export const centerMain = recipe({
     hasLeft: {
       true: {
         selectors: {
-          ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+          [`${android} &`]: {
             paddingLeft: "0.375rem",
           },
         },
@@ -246,7 +243,7 @@ export const centerMainEdge = style([
     display: "none",
     width: vars.appBar.center.mainWidth,
     selectors: {
-      ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
+      [`${cupertino} &`]: {
         display: "block",
       },
     },
@@ -276,7 +273,7 @@ export const right = style([
       display: "none",
     },
     selectors: {
-      ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+      [`${android} &`]: {
         padding: "0 0.5rem 0 0",
       },
     },

package/src/components/AppScreen.css.ts

@@ -1,7 +1,7 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { globalVars } from "../basicUIPlugin.css";
+import { android, cupertino, globalVars } from "../basicUIPlugin.css";
 import { f } from "../styles";
 
 export const vars = createThemeContract({
@@ -59,7 +59,7 @@ export const dim = style([
     opacity: 0,
     zIndex: vars.zIndexes.dim,
     selectors: {
-      ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+      [`${android} &`]: {
         height: "10rem",
         background: `linear-gradient(${globalVars.dimBackgroundColor}, rgba(0, 0, 0, 0))`,
       },
@@ -92,22 +92,22 @@ export const paper = recipe({
       },
       zIndex: vars.zIndexes.paper,
       selectors: {
-        ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
+        [`${cupertino} &`]: {
           transform: "translate3d(100%, 0, 0)",
         },
         [`
-          :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterActive} &,
-          :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterDone} &
+          ${cupertino} ${enterActive} &,
+          ${cupertino} ${enterDone} &
         `]: {
           transform: "translate3d(0, 0, 0)",
         },
-        ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+        [`${android} &`]: {
           opacity: 0,
           transform: "translate3d(0, 10rem, 0)",
         },
         [`
-          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterActive} &,
-          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterDone} &
+          ${android} ${enterActive} &,
+          ${android} ${enterDone} &
         `]: {
           opacity: 1,
           transform: "translate3d(0, 0, 0)",
@@ -146,7 +146,7 @@ export const paper = recipe({
     modalPresentationStyle: {
       fullScreen: {
         selectors: {
-          ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
+          [`${cupertino} &`]: {
             transform: "translate3d(0, 100%, 0)",
           },
         },
@@ -155,7 +155,7 @@ export const paper = recipe({
     activityEnterStyle: {
       slideInLeft: {
         selectors: {
-          ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
+          [`${android} &`]: {
             transform: "translate3d(50%, 0, 0)",
           },
         },

package/dist/components/RootStyles.d.ts

@@ -1,8 +0,0 @@
-export type RootStylesProps = {
-    theme: "android" | "cupertino";
-    styles: {
-        [cssVarName: string]: string | undefined;
-    };
-};
-export declare function RootStyles({ theme, styles }: RootStylesProps): null;
-//# sourceMappingURL=RootStyles.d.ts.map

package/dist/components/RootStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RootStyles.d.ts","sourceRoot":"","sources":["../../src/components/RootStyles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,MAAM,EAAE;QACN,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;KAC1C,CAAC;CACH,CAAC;AACF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,QAkB5D"}

package/src/components/RootStyles.ts

@@ -1,27 +0,0 @@
-import { useLayoutEffect } from "react";
-
-export type RootStylesProps = {
-  theme: "android" | "cupertino";
-  styles: {
-    [cssVarName: string]: string | undefined;
-  };
-};
-export function RootStyles({ theme, styles }: RootStylesProps) {
-  useLayoutEffect(() => {
-    const root = document.querySelector(":root") as HTMLHtmlElement;
-
-    if (!root) {
-      return;
-    }
-
-    for (const [key, value] of Object.entries(styles)) {
-      if (value) {
-        root.style.setProperty(key, value);
-      }
-    }
-
-    root.dataset.stackflowPluginBasicUiTheme = theme;
-  }, [styles, theme]);
-
-  return null;
-}