@washingtonpost/wpds-theme - npm Package Compare versions

Comparing version 0.3.0-experimental.0 to 0.3.0-experimental.1

dist/index.js

@@ -33,2 +33,3 @@ var $1f5Vm$stitchesreact = require("@stitches/react");
 $parcel$export($a82f880a1b90df0f$exports, "reset", () => $a82f880a1b90df0f$export$aad8462122ac592b);
+$parcel$export($a82f880a1b90df0f$exports, "utils", () => $a82f880a1b90df0f$export$eab97d15b1788b8d);
 $parcel$export($a82f880a1b90df0f$exports, "darkTheme", () => $a82f880a1b90df0f$export$3e936a8db52a10a0);
@@ -276,3 +277,3 @@ $parcel$export($a82f880a1b90df0f$exports, "globalStyles", () => $a82f880a1b90df0f$export$aa0e86c7c0d2f400);
 const $a82f880a1b90df0f$var$prefix = "wpds";
-const { styled: $a82f880a1b90df0f$export$3817b7a54a07cec7 , css: $a82f880a1b90df0f$export$dbf350e5966cf602 , globalCss: $a82f880a1b90df0f$export$db53682eef82cc11 , keyframes: $a82f880a1b90df0f$export$d25ddfdf17c3ad3e , getCssText: $a82f880a1b90df0f$export$681e449128971c74 , theme: $a82f880a1b90df0f$export$bca14c5b3b88a9c9 , createTheme: $a82f880a1b90df0f$export$25d302a5b900a763 , config: $a82f880a1b90df0f$export$e506a1d27d1eaa20 , reset: $a82f880a1b90df0f$export$aad8462122ac592b  } = $1f5Vm$stitchesreact.createStitches({
+const $a82f880a1b90df0f$var$WPDS = $1f5Vm$stitchesreact.createStitches({
     prefix: $a82f880a1b90df0f$var$prefix,
@@ -320,2 +321,5 @@ theme: {
         notSm: "(min-width: 768px)",
+        notMd: "(min-width: 900px)",
+        notLg: "(min-width: 1024px)",
+        notXl: "(min-width: 1440px)",
         motion: "(prefers-reduced-motion)",
@@ -353,2 +357,4 @@ hover: "(any-hover: hover)",
 });
+const { styled: $a82f880a1b90df0f$export$3817b7a54a07cec7 , css: $a82f880a1b90df0f$export$dbf350e5966cf602 , globalCss: $a82f880a1b90df0f$export$db53682eef82cc11 , keyframes: $a82f880a1b90df0f$export$d25ddfdf17c3ad3e , getCssText: $a82f880a1b90df0f$export$681e449128971c74 , theme: $a82f880a1b90df0f$export$bca14c5b3b88a9c9 , createTheme: $a82f880a1b90df0f$export$25d302a5b900a763 , config: $a82f880a1b90df0f$export$e506a1d27d1eaa20 , reset: $a82f880a1b90df0f$export$aad8462122ac592b  } = $a82f880a1b90df0f$var$WPDS;
+const $a82f880a1b90df0f$export$eab97d15b1788b8d = $a82f880a1b90df0f$export$e506a1d27d1eaa20.utils;
 const $a82f880a1b90df0f$export$3e936a8db52a10a0 = $a82f880a1b90df0f$export$25d302a5b900a763(`${$a82f880a1b90df0f$var$prefix}-dark`, {
@@ -408,3 +414,3 @@ colors: {
         }
-    ] // "@dark": {
+    ]
 });
@@ -411,0 +417,0 @@ const $a82f880a1b90df0f$export$8539662ef1940416 = $a82f880a1b90df0f$export$db53682eef82cc11({

dist/index.module.js

@@ -17,2 +17,3 @@ import {createStitches as $iv3zZ$createStitches} from "@stitches/react";
 $parcel$export($c0d8ebfa0704f2fb$exports, "reset", () => $c0d8ebfa0704f2fb$export$aad8462122ac592b);
+$parcel$export($c0d8ebfa0704f2fb$exports, "utils", () => $c0d8ebfa0704f2fb$export$eab97d15b1788b8d);
 $parcel$export($c0d8ebfa0704f2fb$exports, "darkTheme", () => $c0d8ebfa0704f2fb$export$3e936a8db52a10a0);
@@ -260,3 +261,3 @@ $parcel$export($c0d8ebfa0704f2fb$exports, "globalStyles", () => $c0d8ebfa0704f2fb$export$aa0e86c7c0d2f400);
 const $c0d8ebfa0704f2fb$var$prefix = "wpds";
-const { styled: $c0d8ebfa0704f2fb$export$3817b7a54a07cec7 , css: $c0d8ebfa0704f2fb$export$dbf350e5966cf602 , globalCss: $c0d8ebfa0704f2fb$export$db53682eef82cc11 , keyframes: $c0d8ebfa0704f2fb$export$d25ddfdf17c3ad3e , getCssText: $c0d8ebfa0704f2fb$export$681e449128971c74 , theme: $c0d8ebfa0704f2fb$export$bca14c5b3b88a9c9 , createTheme: $c0d8ebfa0704f2fb$export$25d302a5b900a763 , config: $c0d8ebfa0704f2fb$export$e506a1d27d1eaa20 , reset: $c0d8ebfa0704f2fb$export$aad8462122ac592b  } = $iv3zZ$createStitches({
+const $c0d8ebfa0704f2fb$var$WPDS = $iv3zZ$createStitches({
     prefix: $c0d8ebfa0704f2fb$var$prefix,
@@ -304,2 +305,5 @@ theme: {
         notSm: "(min-width: 768px)",
+        notMd: "(min-width: 900px)",
+        notLg: "(min-width: 1024px)",
+        notXl: "(min-width: 1440px)",
         motion: "(prefers-reduced-motion)",
@@ -337,2 +341,4 @@ hover: "(any-hover: hover)",
 });
+const { styled: $c0d8ebfa0704f2fb$export$3817b7a54a07cec7 , css: $c0d8ebfa0704f2fb$export$dbf350e5966cf602 , globalCss: $c0d8ebfa0704f2fb$export$db53682eef82cc11 , keyframes: $c0d8ebfa0704f2fb$export$d25ddfdf17c3ad3e , getCssText: $c0d8ebfa0704f2fb$export$681e449128971c74 , theme: $c0d8ebfa0704f2fb$export$bca14c5b3b88a9c9 , createTheme: $c0d8ebfa0704f2fb$export$25d302a5b900a763 , config: $c0d8ebfa0704f2fb$export$e506a1d27d1eaa20 , reset: $c0d8ebfa0704f2fb$export$aad8462122ac592b  } = $c0d8ebfa0704f2fb$var$WPDS;
+const $c0d8ebfa0704f2fb$export$eab97d15b1788b8d = $c0d8ebfa0704f2fb$export$e506a1d27d1eaa20.utils;
 const $c0d8ebfa0704f2fb$export$3e936a8db52a10a0 = $c0d8ebfa0704f2fb$export$25d302a5b900a763(`${$c0d8ebfa0704f2fb$var$prefix}-dark`, {
@@ -392,3 +398,3 @@ colors: {
         }
-    ] // "@dark": {
+    ]
 });
@@ -412,3 +418,3 @@ const $c0d8ebfa0704f2fb$export$8539662ef1940416 = $c0d8ebfa0704f2fb$export$db53682eef82cc11({
 
-export {$c0d8ebfa0704f2fb$export$3817b7a54a07cec7 as styled, $c0d8ebfa0704f2fb$export$dbf350e5966cf602 as css, $c0d8ebfa0704f2fb$export$db53682eef82cc11 as globalCss, $c0d8ebfa0704f2fb$export$d25ddfdf17c3ad3e as keyframes, $c0d8ebfa0704f2fb$export$681e449128971c74 as getCssText, $c0d8ebfa0704f2fb$export$bca14c5b3b88a9c9 as theme, $c0d8ebfa0704f2fb$export$25d302a5b900a763 as createTheme, $c0d8ebfa0704f2fb$export$e506a1d27d1eaa20 as config, $c0d8ebfa0704f2fb$export$aad8462122ac592b as reset, $c0d8ebfa0704f2fb$export$3e936a8db52a10a0 as darkTheme, $c0d8ebfa0704f2fb$export$aa0e86c7c0d2f400 as globalStyles, $c0d8ebfa0704f2fb$export$8539662ef1940416 as darkModeGlobalStyles};
+export {$c0d8ebfa0704f2fb$export$3817b7a54a07cec7 as styled, $c0d8ebfa0704f2fb$export$dbf350e5966cf602 as css, $c0d8ebfa0704f2fb$export$db53682eef82cc11 as globalCss, $c0d8ebfa0704f2fb$export$d25ddfdf17c3ad3e as keyframes, $c0d8ebfa0704f2fb$export$681e449128971c74 as getCssText, $c0d8ebfa0704f2fb$export$bca14c5b3b88a9c9 as theme, $c0d8ebfa0704f2fb$export$25d302a5b900a763 as createTheme, $c0d8ebfa0704f2fb$export$e506a1d27d1eaa20 as config, $c0d8ebfa0704f2fb$export$aad8462122ac592b as reset, $c0d8ebfa0704f2fb$export$eab97d15b1788b8d as utils, $c0d8ebfa0704f2fb$export$3e936a8db52a10a0 as darkTheme, $c0d8ebfa0704f2fb$export$aa0e86c7c0d2f400 as globalStyles, $c0d8ebfa0704f2fb$export$8539662ef1940416 as darkModeGlobalStyles};
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "@washingtonpost/wpds-theme",
-  "version": "0.3.0-experimental.0",
+  "version": "0.3.0-experimental.1",
   "description": "> TODO: description",
@@ -29,2 +29,3 @@ "author": "artmsilva <[e-mail]>",
     "build": "npm run build:transform && npx parcel build --log-level verbose --no-cache",
+    "watch": "npx parcel watch --log-level verbose --no-cache",
     "test": "echo \"Error: run tests from root\" && exit 1"
@@ -45,3 +46,3 @@ },
   },
-  "gitHead": "1ea2dbb530d5262ded5fa57023a17cd1c386aa6f"
+  "gitHead": "ac529aaa59b7b33b0fc90e76357175cb1b4ac6ca"
 }

src/stitches.config.ts

 import * as stitches from "@stitches/react";
 import * as tokens from "./tokens";
+export type { VariantProps } from "@stitches/react";
 
 const prefix = "wpds";
 
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-  reset,
-} = stitches.createStitches({
+const WPDS = stitches.createStitches({
   prefix,
@@ -56,2 +47,5 @@ theme: {
     notSm: "(min-width: 768px)",
+    notMd: "(min-width: 900px)",
+    notLg: "(min-width: 1024px)",
+    notXl: "(min-width: 1440px)",
     motion: "(prefers-reduced-motion)",
@@ -86,2 +80,16 @@ hover: "(any-hover: hover)",
 
+export type CSS = stitches.CSS<typeof WPDS>;
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+  reset,
+} = WPDS;
+export const utils = config.utils;
+
 export const darkTheme = createTheme(`${prefix}-dark`, {
@@ -143,21 +151,2 @@ colors: {
   ],
-  // "@dark": {
-  // 	":root:not(.light)": {
-  // 		...tokens.Object.keys(darkTheme.colors).reduce(
-  // 			(varSet, currentColorKey) => {
-  // 				const currentColor = darkTheme.colors[currentColorKey];
-  // 				const currentColorValue =
-  // 					currentColor.value.substring(0, 1) === "$"
-  // 						? `$colors${currentColor.value}`
-  // 						: currentColor.value;
-
-  // 				return {
-  // 					[currentColor.variable]: currentColorValue,
-  // 					...tokens.varSet,
-  // 				};
-  // 			},
-  // 			{}
-  // 		),
-  // 	},
-  // },
 });
@@ -164,0 +153,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207744

increased by4.19%

Lines of code

4511

increased by6.97%

No dependency changes