@spark-ui/theme-utils 1.2.0 → 2.0.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.1](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@2.0.0...@spark-ui/theme-utils@2.0.1) (2023-02-17)
+
+**Note:** Version bump only for package @spark-ui/theme-utils
+
+# [2.0.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@1.2.0...@spark-ui/theme-utils@2.0.0) (2023-02-14)
+
+### Features
+
+- split the theme utils package into two distinct packages ([77def01](https://github.com/adevinta/spark/commit/77def01abd8b2ccf4f234093133294071e407231)), closes [#235](https://github.com/adevinta/spark/issues/235)
+
+### BREAKING CHANGES
+
+- Split the theme utils package into two distinct packages
+
 # [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@1.1.1...@spark-ui/theme-utils@1.2.0) (2023-02-13)
 
 ### Features

package/dist/index.d.ts

@@ -1,5 +1,3 @@
 export { createTheme } from './createTheme';
-export { createTailwindThemeConfigFile } from './createTailwindThemeConfigFile';
-export { createCSSTokensFile } from './createCSSTokensFile';
 export { defaultTheme } from './defaultTheme';
 export type { Theme } from './types';

package/dist/index.js

@@ -1,6 +1 @@
-"use strict";var M=Object.defineProperty,P=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var y=(e,r,t)=>r in e?M(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,$=(e,r)=>{for(var t in r||(r={}))g.call(r,t)&&y(e,t,r[t]);if(m)for(var t of m(r))b.call(r,t)&&y(e,t,r[t]);return e},h=(e,r)=>P(e,z(r));var S=(e,r)=>{var t={};for(var n in e)g.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&m)for(var n of m(e))r.indexOf(n)<0&&b.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("deepmerge"),c=require("fs"),j=require("parent-module"),w=require("path"),U=require("hex-rgb"),d={screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},borderWidth:{none:"0",xs:"0.1rem",s:"0.2rem",m:"0.4rem"},colors:{transparent:"transparent",bg:{primary:"#f28133",primaryAccent:"#ad4c07",primarySubtle:"#fba56c",secondary:"#3481f2",secondaryAccent:"#074aad",secondarySubtle:"#4c93f7",body:"#fff"},bd:{primary:"#f28133",secondary:"#3481f2"},fg:{default:"#334155",accent:"#1161d7",cta:"#000",ctaInverse:"#fff"}},fontFamily:{openSans:'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"'},fontSize:{xs:"1rem",s:"1.2rem",m:"1.4rem",l:"1.6rem",xl:"1.8rem","2xl":"2rem","3xl":"2.4rem"},fontWeight:{regular:400,semibold:600,bold:700},lineHeight:{xs:"1.4rem",s:"1.7rem",m:"1.9rem",l:"2.2rem",xl:"2.4rem","2xl":"2.6rem","3xl":"2.8rem"},width:{pageMin:"320px",pageMax:"1066px"},borderRadius:{none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",full:"100%"},boxShadow:{none:"none",normal:"0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)",highlighted:"0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)"},spacing:{auto:"auto",none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",xl:"3.2rem",xxl:"4rem"},zIndex:{hide:-1,base:0,raised:1,dropdown:1e3,sticky:1100,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800}};function N(e){return Object.entries(e)}function l(e){return e.replace(/[A-Z]/g,r=>`-${r.toLocaleLowerCase()}`)}function O(e){return typeof e=="number"?!1:/^#[0-9a-fA-F]+$/.test(e)}function A(e){return typeof e=="string"||typeof e=="number"}function C(e,r=1){const t={};for(const n in e){const o=typeof e[n]=="object"?C(e[n],r+1):e[n];t[r>1?n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase():n]=o}return t}function k(e){let r=function(n){var i;const o=n.slice(n.indexOf(":")+1);return o.replace(((i=o.match(/\/([^/]+)\.(jsx|js|tsx|ts|mjs|mts|cjs|cts)(?!$)/g))==null?void 0:i.at(0))||"","")}(e).replace(/\\/g,"/"),t="";return r[0]==="/"?(t="/",r=r.slice(1)):r[1]===":"&&(t=r.slice(0,3),r=r.slice(3)),{filepath:r,rootPath:t}}function H(e){const r=JSON.parse(JSON.stringify(e));return function t(n,o){N(n).forEach(([i,a])=>{if(a===null||typeof a!="object"){if(A(a)){const f=/--colors/.test(o||"")&&O(a)?`rgb(var(${o}-${l(i)}) / <alpha-value>)`:`var(${o}-${l(i)})`;n[i]=f}}else t(a,l((o?`--${o}-${i}`:`--${i}`).replace(/-{3,}/,"--")))})}(r),C(r)}const v=e=>Object.entries(e).map(([r,t])=>`${r}:${t}`).join(";"),R=e=>{return(r=e,Object.keys(r)).map(t=>{const i=function(a,f){const x={};return function F(T,u){N(T).forEach(([p,s])=>{if(s===null||typeof s!="object"){if(A(s)){const q=()=>{if(O(s)){const{red:E,green:I,blue:L}=U(s);return`${E} ${I} ${L}`}return s};x[`${u}-${l(p)}`]=q()}}else F(s,l((u?`--${u}-${p}`:`--${p}`).replace(/-{3,}/,"--")))})}(a),h($({},x),{className:f})}(e[t],t),{className:n}=i,o=S(i,["className"]);return t==="default"?`:root{${v(o)}}`:`.${n}{${v(o)}}`});var r};exports.createCSSTokensFile=function(e,r){const{filepath:t,rootPath:n}=k(w.join(j()||"",e));t.split("/").slice(0,-1).reduce((o,i)=>{const a=o+i+"/";return c.existsSync(a)||c.mkdirSync(a),a},n);try{c.appendFileSync(n+t,`
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @layer base {${R(r).join("")}}
-        `,{flag:"w"}),console.log(`✨ CSS tokens file has been created 👉 ${e}`)}catch(o){console.error(o)}},exports.createTailwindThemeConfigFile=function(e){const{filepath:r,rootPath:t}=k(w.join(j()||"",e));r.split("/").slice(0,-1).reduce((n,o)=>{const i=n+o+"/";return c.existsSync(i)||c.mkdirSync(i),i},t);try{c.writeFileSync(t+r,`module.exports = ${JSON.stringify(H(d))}`,{flag:"w"}),console.log(`✨ Tailwind theme config file has been created 👉 ${e}`)}catch(n){console.error(n)}},exports.createTheme=function(e={}){return J(d,e)},exports.defaultTheme=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("deepmerge"),e={screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},borderWidth:{none:"0",xs:"0.1rem",s:"0.2rem",m:"0.4rem"},colors:{transparent:"transparent",bg:{primary:"#f28133",primaryAccent:"#ad4c07",primarySubtle:"#fba56c",secondary:"#3481f2",secondaryAccent:"#074aad",secondarySubtle:"#4c93f7",body:"#fff"},bd:{primary:"#f28133",secondary:"#3481f2"},fg:{default:"#334155",accent:"#1161d7",cta:"#000",ctaInverse:"#fff"}},fontFamily:{openSans:'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"'},fontSize:{xs:"1rem",s:"1.2rem",m:"1.4rem",l:"1.6rem",xl:"1.8rem","2xl":"2rem","3xl":"2.4rem"},fontWeight:{regular:400,semibold:600,bold:700},lineHeight:{xs:"1.4rem",s:"1.7rem",m:"1.9rem",l:"2.2rem",xl:"2.4rem","2xl":"2.6rem","3xl":"2.8rem"},width:{pageMin:"320px",pageMax:"1066px"},borderRadius:{none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",full:"100%"},boxShadow:{none:"none",normal:"0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)",highlighted:"0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)"},spacing:{auto:"auto",none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",xl:"3.2rem",xxl:"4rem"},zIndex:{hide:-1,base:0,raised:1,dropdown:1e3,sticky:1100,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800}};exports.createTheme=function(r={}){return o(e,r)},exports.defaultTheme=e;

package/dist/index.mjs

@@ -1,133 +1,9 @@
-var M = Object.defineProperty, P = Object.defineProperties;
-var U = Object.getOwnPropertyDescriptors;
-var l = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
-var d = (e, r, t) => r in e ? M(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, b = (e, r) => {
-  for (var t in r || (r = {}))
-    x.call(r, t) && d(e, t, r[t]);
-  if (l)
-    for (var t of l(r))
-      g.call(r, t) && d(e, t, r[t]);
-  return e;
-}, y = (e, r) => P(e, U(r));
-var $ = (e, r) => {
-  var t = {};
-  for (var o in e)
-    x.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
-  if (e != null && l)
-    for (var o of l(e))
-      r.indexOf(o) < 0 && g.call(e, o) && (t[o] = e[o]);
-  return t;
-};
-import H from "deepmerge";
-import { existsSync as S, mkdirSync as j, writeFileSync as R, appendFileSync as W } from "fs";
-import w from "parent-module";
-import { join as k } from "path";
-import Z from "hex-rgb";
-const v = { screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }, borderWidth: { none: "0", xs: "0.1rem", s: "0.2rem", m: "0.4rem" }, colors: { transparent: "transparent", bg: { primary: "#f28133", primaryAccent: "#ad4c07", primarySubtle: "#fba56c", secondary: "#3481f2", secondaryAccent: "#074aad", secondarySubtle: "#4c93f7", body: "#fff" }, bd: { primary: "#f28133", secondary: "#3481f2" }, fg: { default: "#334155", accent: "#1161d7", cta: "#000", ctaInverse: "#fff" } }, fontFamily: { openSans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"' }, fontSize: { xs: "1rem", s: "1.2rem", m: "1.4rem", l: "1.6rem", xl: "1.8rem", "2xl": "2rem", "3xl": "2.4rem" }, fontWeight: { regular: 400, semibold: 600, bold: 700 }, lineHeight: { xs: "1.4rem", s: "1.7rem", m: "1.9rem", l: "2.2rem", xl: "2.4rem", "2xl": "2.6rem", "3xl": "2.8rem" }, width: { pageMin: "320px", pageMax: "1066px" }, borderRadius: { none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", full: "100%" }, boxShadow: { none: "none", normal: "0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)", highlighted: "0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)" }, spacing: { auto: "auto", none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", xl: "3.2rem", xxl: "4rem" }, zIndex: { hide: -1, base: 0, raised: 1, dropdown: 1e3, sticky: 1100, overlay: 1300, modal: 1400, popover: 1500, skipLink: 1600, toast: 1700, tooltip: 1800 } };
-function Y(e = {}) {
-  return H(v, e);
-}
-function N(e) {
-  return Object.entries(e);
-}
-function c(e) {
-  return e.replace(/[A-Z]/g, (r) => `-${r.toLocaleLowerCase()}`);
-}
-function A(e) {
-  return typeof e == "number" ? !1 : /^#[0-9a-fA-F]+$/.test(e);
-}
-function C(e) {
-  return typeof e == "string" || typeof e == "number";
-}
-function F(e, r = 1) {
-  const t = {};
-  for (const o in e) {
-    const n = typeof e[o] == "object" ? F(e[o], r + 1) : e[o];
-    t[r > 1 ? o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() : o] = n;
-  }
-  return t;
-}
-function O(e) {
-  let r = function(o) {
-    var s;
-    const n = o.slice(o.indexOf(":") + 1);
-    return n.replace(((s = n.match(/\/([^/]+)\.(jsx|js|tsx|ts|mjs|mts|cjs|cts)(?!$)/g)) == null ? void 0 : s.at(0)) || "", "");
-  }(e).replace(/\\/g, "/"), t = "";
-  return r[0] === "/" ? (t = "/", r = r.slice(1)) : r[1] === ":" && (t = r.slice(0, 3), r = r.slice(3)), { filepath: r, rootPath: t };
-}
-function B(e) {
-  const r = JSON.parse(JSON.stringify(e));
-  return function t(o, n) {
-    N(o).forEach(([s, a]) => {
-      if (a === null || typeof a != "object") {
-        if (C(a)) {
-          const m = /--colors/.test(n || "") && A(a) ? `rgb(var(${n}-${c(s)}) / <alpha-value>)` : `var(${n}-${c(s)})`;
-          o[s] = m;
-        }
-      } else
-        t(a, c((n ? `--${n}-${s}` : `--${s}`).replace(/-{3,}/, "--")));
-    });
-  }(r), F(r);
-}
-function _(e) {
-  const { filepath: r, rootPath: t } = O(k(w() || "", e));
-  r.split("/").slice(0, -1).reduce((o, n) => {
-    const s = o + n + "/";
-    return S(s) || j(s), s;
-  }, t);
-  try {
-    R(t + r, `module.exports = ${JSON.stringify(B(v))}`, { flag: "w" }), console.log(`✨ Tailwind theme config file has been created 👉 ${e}`);
-  } catch (o) {
-    console.error(o);
-  }
-}
-const h = (e) => Object.entries(e).map(([r, t]) => `${r}:${t}`).join(";"), q = (e) => {
-  return (r = e, Object.keys(r)).map((t) => {
-    const s = function(a, m) {
-      const u = {};
-      return function T(E, f) {
-        N(E).forEach(([p, i]) => {
-          if (i === null || typeof i != "object") {
-            if (C(i)) {
-              const I = () => {
-                if (A(i)) {
-                  const { red: L, green: z, blue: J } = Z(i);
-                  return `${L} ${z} ${J}`;
-                }
-                return i;
-              };
-              u[`${f}-${c(p)}`] = I();
-            }
-          } else
-            T(i, c((f ? `--${f}-${p}` : `--${p}`).replace(/-{3,}/, "--")));
-        });
-      }(a), y(b({}, u), { className: m });
-    }(e[t], t), { className: o } = s, n = $(s, ["className"]);
-    return t === "default" ? `:root{${h(n)}}` : `.${o}{${h(n)}}`;
-  });
-  var r;
-};
-function ee(e, r) {
-  const { filepath: t, rootPath: o } = O(k(w() || "", e));
-  t.split("/").slice(0, -1).reduce((n, s) => {
-    const a = n + s + "/";
-    return S(a) || j(a), a;
-  }, o);
-  try {
-    W(o + t, `
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @layer base {${q(r).join("")}}
-        `, { flag: "w" }), console.log(`✨ CSS tokens file has been created 👉 ${e}`);
-  } catch (n) {
-    console.error(n);
-  }
+import r from "deepmerge";
+const o = { screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }, borderWidth: { none: "0", xs: "0.1rem", s: "0.2rem", m: "0.4rem" }, colors: { transparent: "transparent", bg: { primary: "#f28133", primaryAccent: "#ad4c07", primarySubtle: "#fba56c", secondary: "#3481f2", secondaryAccent: "#074aad", secondarySubtle: "#4c93f7", body: "#fff" }, bd: { primary: "#f28133", secondary: "#3481f2" }, fg: { default: "#334155", accent: "#1161d7", cta: "#000", ctaInverse: "#fff" } }, fontFamily: { openSans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"' }, fontSize: { xs: "1rem", s: "1.2rem", m: "1.4rem", l: "1.6rem", xl: "1.8rem", "2xl": "2rem", "3xl": "2.4rem" }, fontWeight: { regular: 400, semibold: 600, bold: 700 }, lineHeight: { xs: "1.4rem", s: "1.7rem", m: "1.9rem", l: "2.2rem", xl: "2.4rem", "2xl": "2.6rem", "3xl": "2.8rem" }, width: { pageMin: "320px", pageMax: "1066px" }, borderRadius: { none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", full: "100%" }, boxShadow: { none: "none", normal: "0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)", highlighted: "0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)" }, spacing: { auto: "auto", none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", xl: "3.2rem", xxl: "4rem" }, zIndex: { hide: -1, base: 0, raised: 1, dropdown: 1e3, sticky: 1100, overlay: 1300, modal: 1400, popover: 1500, skipLink: 1600, toast: 1700, tooltip: 1800 } };
+function a(e = {}) {
+  return r(o, e);
 }
 export {
-  ee as createCSSTokensFile,
-  _ as createTailwindThemeConfigFile,
-  Y as createTheme,
-  v as defaultTheme
+  a as createTheme,
+  o as defaultTheme
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@spark-ui/theme-utils",
-  "version": "1.2.0",
-  "description": "Theme configuration",
+  "version": "2.0.1",
+  "description": "package for managing Spark theme configuration",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./dist/index.mjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
@@ -13,9 +13,7 @@
   },
   "devDependencies": {
     "deepmerge": "4.3.0",
-    "hex-rgb": "5.0.0",
-    "parent-module": "3.0.0",
     "type-fest": "3.5.6"
   },
-  "gitHead": "a854685e736add2fe4854ecd6bef7272ea4ab82f"
+  "gitHead": "51c01c9355b193d22f17eb7cc3f84aebbd2e3eeb"
 }

package/vite.config.ts

@@ -16,7 +16,7 @@ export default {
       fileName: 'index',
     },
     rollupOptions: {
-      external: [...deps, ...devDeps, 'path', 'fs'],
+      external: [...deps, ...devDeps],
       plugins: [terser()],
     },
   },

package/dist/createCSSTokensFile.d.ts

@@ -1,25 +0,0 @@
-import type { RequireAtLeastOne } from 'type-fest';
-import type { Theme } from './types';
-/**
- * Creates a CSS file containing theme tokens represented as CSS custom properties
- *
- * @param {string} path - The file path where the CSS file will be created.
- * @param {Record<string, Theme>} themeRecord - A record (with a required key of "default") of themes that will be included in the CSS Tokens file.
- *
- * @returns {void}
- *
- * @example
- *
- * const defaultTheme: Theme = { ... }
- * const darkTheme: Theme = { ... }
- * const otherTheme: Theme = { ... }
- *
- * const themes = {
- *   default: defaultTheme,
- *   dark: darkTheme
- *   other: otherTheme
- * }
- *
- * createCSSTokensFile('somePath.css', themes)
- */
-export declare function createCSSTokensFile(path: string, themeRecord: RequireAtLeastOne<Record<string, Theme>, 'default'>): void;

package/dist/createTailwindThemeConfigFile.d.ts

@@ -1,12 +0,0 @@
-/**
- * Creates a Tailwind config file that links the [theme options](https://tailwindcss.com/docs/theme#configuration-reference) provided by Tailwind with the CSS custom property values generated using the "createCSSTokensFile" function
- *
- * @param {string} path - The file path where the Tailwind config file will be created.
- *
- * @returns {void}
- *
- * @example
- *
- * createTailwindThemeConfigFile('tailwind.theme.js')
- */
-export declare function createTailwindThemeConfigFile(path: string): void;

package/dist/utils.d.ts

@@ -1,11 +0,0 @@
-declare function objectKeys<T extends Record<string | number, unknown>>(obj: T): (keyof T)[];
-declare function objectEntries<T extends Record<string | number, unknown>>(obj: T): [keyof T, T[keyof T]][];
-declare function toKebabCase(v: string): string;
-declare function isHex(value: string | number): value is string;
-declare function isStringOrNumber(value: unknown): value is string | number;
-declare function toKebabCaseKeys<T extends Object>(obj: T, level?: number): Record<string, T[keyof T]>;
-declare function buildFilePath(path: string): {
-    filepath: string;
-    rootPath: string;
-};
-export { objectKeys, objectEntries, toKebabCase, isHex, toKebabCaseKeys, buildFilePath, isStringOrNumber, };