theme: get rid of tinycolor2

packages/theme/package-lock.json

@@ -18,7 +18,6 @@
         "@types/tinycolor2": "^1.4.3",
         "isomorphic-fetch": "^3.0.0",
         "react": "18.2.0",
-        "tinycolor2": "^1.6.0",
         "ts-json-schema-generator": "^1.2.0",
         "zustand": "4.4.7"
       },
@@ -28,7 +27,6 @@
         "@theme-ui/components": ">=0.16.0",
         "@theme-ui/core": ">=0.16.0",
         "react": ">=18",
-        "tinycolor2": ">=1",
         "zustand": ">=4"
       }
     },
@@ -1053,12 +1051,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "dev": true
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

packages/theme/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@notesnook/theme",
   "version": "2.1.3",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "license": "GPL-3.0-or-later",
+  "sideEffects": false,
   "exports": {
     "require": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/cjs/index.js"
     },
     "import": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
     }
   },
   "repository": {
@@ -29,7 +30,6 @@
     "@types/tinycolor2": "^1.4.3",
     "isomorphic-fetch": "^3.0.0",
     "react": "18.2.0",
-    "tinycolor2": "^1.6.0",
     "ts-json-schema-generator": "^1.2.0",
     "zustand": "4.4.7"
   },
@@ -39,13 +39,12 @@
     "@theme-ui/components": ">=0.16.0",
     "@theme-ui/core": ">=0.16.0",
     "react": ">=18",
-    "tinycolor2": ">=1",
     "zustand": ">=4"
   },
   "scripts": {
     "prebuild": "node ./scripts/prebuild.mjs",
     "generate": "node ./scripts/schema-generator.mjs",
-    "build": "tsup-node src/index.ts",
+    "build": "node ../../scripts/build.mjs",
     "prepublishOnly": "npm run build",
     "watch": "npm run build -- --watch"
   }

packages/theme/src/theme-engine/utils.ts

@@ -28,7 +28,6 @@ import {
   VariantsWithStaticColors
 } from "./types.js";
 import _ThemeLight from "./themes/default-light.json";
-import tc from "tinycolor2";
 import _ThemeDark from "./themes/default-dark.json";
 
 const ThemeLight = _ThemeLight as ThemeDefinition;
@@ -41,7 +40,7 @@ export function getPreviewColors(theme: ThemeDefinition): PreviewColors {
   return {
     navigationMenu: {
       shade: deriveShadeColor(
-        tc(navigationMenu?.primary?.accent || primary.accent)
+        navigationMenu?.primary?.accent || primary.accent
       ),
       accent: navigationMenu?.primary?.accent || primary.accent,
       background: navigationMenu?.primary?.background || primary.background,
@@ -103,11 +102,11 @@ export function buildVariants(
   const defaultThemeScope = defaultTheme.scopes[scope] || {};
 
   function getColor(variant: keyof Variants, color: keyof Colors) {
-    return tc(
+    return (
       themeScope[variant]?.[color] ||
-        theme.scopes.base[variant]?.[color] ||
-        defaultThemeScope[variant]?.[color] ||
-        defaultThemeBase[variant]?.[color]
+      theme.scopes.base[variant]?.[color] ||
+      defaultThemeScope[variant]?.[color] ||
+      defaultThemeBase[variant]?.[color]
     );
   }
 
@@ -172,6 +171,20 @@ export function colorsToCSSVariables(colors: Colors, variantKey?: string) {
   return root;
 }
 
-function deriveShadeColor(color: tc.Instance) {
-  return color.setAlpha(0.1).toHex8String();
+function deriveShadeColor(color: string) {
+  return changeColorAlpha(color, 0.1);
+}
+
+function changeColorAlpha(color: string, opacity: number) {
+  //if it has an alpha, remove it
+  if (color.length > 7) color = color.substring(0, color.length - 2);
+
+  // coerce values so ti is between 0 and 1.
+  const _opacity = Math.round(Math.min(Math.max(opacity, 0), 1) * 255);
+  let opacityHex = _opacity.toString(16).toUpperCase();
+
+  // opacities near 0 need a trailing 0
+  if (opacityHex.length == 1) opacityHex = "0" + opacityHex;
+
+  return color + opacityHex;
 }