@plumeria/core 0.10.0 → 0.10.1

package/README.md

@@ -35,7 +35,7 @@ import '@plumeria/core/stylesheet.css';
 Define a set of styles:
 
 ```ts
-import { css } from '@plumeria/core';
+import { css, cx, ps, px } from '@plumeria/core';
 
 const styles = css.create({
   box: {
@@ -59,7 +59,7 @@ const styles = css.create({
   },
   text: {
     color: '#333',
-    [css.pseudo.hover]: {
+    [ps.hover]: {
       color: 'skyblue',
       opacity: 0.9,
     },
@@ -82,13 +82,13 @@ const styles = css.create({
 
 const composed = css.createComposite(styles.flexBox, {
   hover: {
-    [css.pseudo.hover]: {
+    [ps.hover]: {
       scale: 1.5,
     },
   },
   active: {
-    [css.pseudo.active]: {
-      color: css.color.gray,
+    [ps.active]: {
+      color: color.gray,
     },
   },
 });
@@ -214,7 +214,7 @@ const themes = css.defineTheme({
 
 ### `css.color`
 
-Color utilities:
+Color utility:
 
 ```ts
 color: css.color.darken('skyblue', 0.12),
@@ -230,7 +230,7 @@ color: css.color.aqua,
 Classname merging helper:
 
 ```tsx
-cx(css.pseudo.hover, css.pseudo.after);
+px(ps.hover, ps.after);
 // => ":hover::after"
 cx(styles.text, styles.box);
 // => "text_hash box_hash"

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnType } from "zss-engine";
-import { color, ps } from "zss-utils";
+import { ps } from "zss-utils";
 
 //#region src/css.d.ts
 declare class css {
@@ -26,9 +26,165 @@ declare class css {
     minWidth: <V extends string | number>(value: V) => V extends number ? `@container (min-width: ${V}px)` : `@container (min-width: ${V})`;
     minHeight: <V extends string | number>(value: V) => V extends number ? `@container (min-height: ${V}px)` : `@container (min-height: ${V})`;
   };
-}
-
-//#endregion
+  static color: {
+    lighten: (color: string, amount: string | number) => `color-mix(in srgb, ${string}, white ${number}%)`;
+    darken: (color: string, amount: string | number) => `color-mix(in srgb, ${string}, black ${number}%)`;
+    primary: "#0070f3";
+    secondary: "#ff4081";
+    success: "#2e7d32";
+    warning: "#ed6c02";
+    error: "#d32f2f";
+    aliceblue: "aliceblue";
+    antiquewhite: "antiquewhite";
+    aqua: "aqua";
+    aquamarine: "aquamarine";
+    azure: "azure";
+    beige: "beige";
+    bisque: "bisque";
+    black: "black";
+    blanchedalmond: "blanchedalmond";
+    blue: "blue";
+    blueviolet: "blueviolet";
+    brown: "brown";
+    burlywood: "burlywood";
+    cadetblue: "cadetblue";
+    chartreuse: "chartreuse";
+    chocolate: "chocolate";
+    coral: "coral";
+    cornflowerblue: "cornflowerblue";
+    cornsilk: "cornsilk";
+    crimson: "crimson";
+    cyan: "cyan";
+    darkblue: "darkblue";
+    darkcyan: "darkcyan";
+    darkgoldenrod: "darkgoldenrod";
+    darkgray: "darkgray";
+    darkgreen: "darkgreen";
+    darkgrey: "darkgrey";
+    darkkhaki: "darkkhaki";
+    darkmagenta: "darkmagenta";
+    darkolivegreen: "darkolivegreen";
+    darkorange: "darkorange";
+    darkorchid: "darkorchid";
+    darkred: "darkred";
+    darksalmon: "darksalmon";
+    darkseagreen: "darkseagreen";
+    darkslateblue: "darkslateblue";
+    darkslategray: "darkslategray";
+    darkslategrey: "darkslategrey";
+    darkturquoise: "darkturquoise";
+    darkviolet: "darkviolet";
+    deeppink: "deeppink";
+    deepskyblue: "deepskyblue";
+    dimgray: "dimgray";
+    dimgrey: "dimgrey";
+    dodgerblue: "dodgerblue";
+    firebrick: "firebrick";
+    floralwhite: "floralwhite";
+    forestgreen: "forestgreen";
+    fuchsia: "fuchsia";
+    gainsboro: "gainsboro";
+    ghostwhite: "ghostwhite";
+    gold: "gold";
+    goldenrod: "goldenrod";
+    gray: "gray";
+    green: "green";
+    greenyellow: "greenyellow";
+    grey: "grey";
+    honeydew: "honeydew";
+    hotpink: "hotpink";
+    indianred: "indianred";
+    indigo: "indigo";
+    ivory: "ivory";
+    khaki: "khaki";
+    lavender: "lavender";
+    lavenderblush: "lavenderblush";
+    lawngreen: "lawngreen";
+    lemonchiffon: "lemonchiffon";
+    lightblue: "lightblue";
+    lightcoral: "lightcoral";
+    lightcyan: "lightcyan";
+    lightgoldenrodyellow: "lightgoldenrodyellow";
+    lightgray: "lightgray";
+    lightgreen: "lightgreen";
+    lightgrey: "lightgrey";
+    lightpink: "lightpink";
+    lightsalmon: "lightsalmon";
+    lightseagreen: "lightseagreen";
+    lightskyblue: "lightskyblue";
+    lightslategray: "lightslategray";
+    lightslategrey: "lightslategrey";
+    lightsteelblue: "lightsteelblue";
+    lightyellow: "lightyellow";
+    lime: "lime";
+    limegreen: "limegreen";
+    linen: "linen";
+    magenta: "magenta";
+    maroon: "maroon";
+    mediumaquamarine: "mediumaquamarine";
+    mediumblue: "mediumblue";
+    mediumorchid: "mediumorchid";
+    mediumpurple: "mediumpurple";
+    mediumseagreen: "mediumseagreen";
+    mediumslateblue: "mediumslateblue";
+    mediumspringgreen: "mediumspringgreen";
+    mediumturquoise: "mediumturquoise";
+    mediumvioletred: "mediumvioletred";
+    midnightblue: "midnightblue";
+    mintcream: "mintcream";
+    mistyrose: "mistyrose";
+    moccasin: "moccasin";
+    navajowhite: "navajowhite";
+    navy: "navy";
+    oldlace: "oldlace";
+    olive: "olive";
+    olivedrab: "olivedrab";
+    orange: "orange";
+    orangered: "orangered";
+    orchid: "orchid";
+    palegoldenrod: "palegoldenrod";
+    palegreen: "palegreen";
+    paleturquoise: "paleturquoise";
+    palevioletred: "palevioletred";
+    papayawhip: "papayawhip";
+    peachpuff: "peachpuff";
+    peru: "peru";
+    pink: "pink";
+    plum: "plum";
+    powderblue: "powderblue";
+    purple: "purple";
+    rebeccapurple: "rebeccapurple";
+    red: "red";
+    rosybrown: "rosybrown";
+    royalblue: "royalblue";
+    saddlebrown: "saddlebrown";
+    salmon: "salmon";
+    sandybrown: "sandybrown";
+    seagreen: "seagreen";
+    seashell: "seashell";
+    sienna: "sienna";
+    silver: "silver";
+    skyblue: "skyblue";
+    slateblue: "slateblue";
+    slategray: "slategray";
+    slategrey: "slategrey";
+    snow: "snow";
+    springgreen: "springgreen";
+    steelblue: "steelblue";
+    tan: "tan";
+    teal: "teal";
+    thistle: "thistle";
+    tomato: "tomato";
+    transparent: "transparent";
+    turquoise: "turquoise";
+    violet: "violet";
+    wheat: "wheat";
+    white: "white";
+    whitesmoke: "whitesmoke";
+    yellow: "yellow";
+    yellowgreen: "yellowgreen";
+  };
+} //#endregion
 //#region src/cx.d.ts
 declare const cx: (...classes: Array<string | null | undefined | false>) => string;
 
@@ -48,4 +204,4 @@ declare const rx: (className: string, varSet: {
 };
 
 //#endregion
-export { CSSHTML, CSSProperties, CreateStyle, color, css, cx, ps, px, rx };
+export { CSSHTML, CSSProperties, CreateStyle, css, cx, ps, px, rx };

package/dist/index.js

@@ -96,6 +96,7 @@ var css = class {
 	}
 	static media = zss_utils.media;
 	static container = zss_utils.container;
+	static color = zss_utils.color;
 };
 var css_default = css;
 
@@ -104,6 +105,10 @@ var css_default = css;
 const cx = (...classes) => classes.filter(Boolean).join(" ");
 var cx_default = cx;
 
+//#endregion
+//#region src/ps.ts
+var ps_default = zss_utils.ps;
+
 //#endregion
 //#region src/px.ts
 const px = (...pseudos) => {
@@ -120,19 +125,8 @@ const rx = (className, varSet) => ({
 var rx_default = rx;
 
 //#endregion
-Object.defineProperty(exports, 'color', {
-  enumerable: true,
-  get: function () {
-    return zss_utils.color;
-  }
-});
 exports.css = css_default;
 exports.cx = cx_default;
-Object.defineProperty(exports, 'ps', {
-  enumerable: true,
-  get: function () {
-    return zss_utils.ps;
-  }
-});
+exports.ps = ps_default;
 exports.px = px_default;
 exports.rx = rx_default;

package/dist/index.mjs

@@ -95,6 +95,7 @@ var css = class {
 	}
 	static media = media;
 	static container = container;
+	static color = color;
 };
 var css_default = css;
 
@@ -103,6 +104,10 @@ var css_default = css;
 const cx = (...classes) => classes.filter(Boolean).join(" ");
 var cx_default = cx;
 
+//#endregion
+//#region src/ps.ts
+var ps_default = ps;
+
 //#endregion
 //#region src/px.ts
 const px = (...pseudos) => {
@@ -119,4 +124,4 @@ const rx = (className, varSet) => ({
 var rx_default = rx;
 
 //#endregion
-export { color, css_default as css, cx_default as cx, ps, px_default as px, rx_default as rx };
+export { css_default as css, cx_default as cx, ps_default as ps, px_default as px, rx_default as rx };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Zero-runtime, expressive CSS-in-JS library for TypeScript.",
   "keywords": [
     "css",