Merge pull request #69 from streamich/update

Update

Author: streamich

.github/workflows/gh-pages.yml

@@ -2,7 +2,7 @@ name: Node CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   gh-pages:

CHANGELOG.md

@@ -1,16 +1,14 @@
 # [3.4.0](https://github.com/streamich/code-colors-react/compare/v3.3.0...v3.4.0) (2025-08-30)
 
-
 ### Features
 
-* update deps ([e1da41a](https://github.com/streamich/code-colors-react/commit/e1da41a4f86d5d52fbe01da6e74e1de400430c53))
+- update deps ([e1da41a](https://github.com/streamich/code-colors-react/commit/e1da41a4f86d5d52fbe01da6e74e1de400430c53))
 
 # [3.3.0](https://github.com/streamich/code-colors-react/compare/v3.2.1...v3.3.0) (2024-12-07)
 
-
 ### Features
 
-* 🎸 remove bold class decorations and make red bg lighter ([e389fc4](https://github.com/streamich/code-colors-react/commit/e389fc462c11caa97893e7993ecca01c443dad08))
+- 🎸 remove bold class decorations and make red bg lighter ([e389fc4](https://github.com/streamich/code-colors-react/commit/e389fc462c11caa97893e7993ecca01c443dad08))
 
 ## [3.2.1](https://github.com/streamich/code-colors-react/compare/v3.2.0...v3.2.1) (2024-10-10)
 

README.md

@@ -1,6 +1,6 @@
 # code-colors-react
 
-React component for code syntax highlighting. [__Preview 📕__][storybook]
+React component for code syntax highlighting. [**Preview 📕**][storybook]
 
 [storybook]: https://streamich.github.io/code-colors-react/?path=/story/stories-colortokens--hello-world
 
@@ -72,4 +72,3 @@ Nested languages: JavaScript and CSS inside HTML:
 ![image](https://github.com/user-attachments/assets/68f296f7-994b-4ddd-b7ce-401cb536a607)
 
 [See more examples][storybook].
-

package.json

@@ -44,7 +44,7 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "code-colors": "^2.4.0"
+    "code-colors": "^2.5.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.25.7",
@@ -59,13 +59,13 @@
     "@storybook/react": "^8.3.5",
     "@storybook/react-webpack5": "^8.3.5",
     "@storybook/test": "^8.3.5",
-    "nano-theme": "^1.4.3",
+    "nano-theme": "^1.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
     "storybook": "^8.3.5",
-    "thingies": "^2.4.0",
+    "thingies": "^2.6.0",
     "typescript": "^5.6.3"
   },
   "release": {

src/Markup.ts

@@ -100,7 +100,7 @@ export const Markup: React.FC<MarkupProps> = (props) => {
     return () => {
       cancelled = true;
     };
-  }, [code, decorate]);
+  }, [code, decorate, lang]);
 
   rest.children =
     node ||

src/index.ts

@@ -2,3 +2,4 @@ export * from "./style";
 export * from "./palettes";
 export * from "./ColorTokens";
 export * from "./Markup";
+export * from "./util";

src/palettes.ts

@@ -11,7 +11,6 @@ export const light: ColorPalette = {
   boolean: "#411888",
   nil: theme.g(0, 0.45),
   undef: theme.g(0, 0.25),
-  selection: theme.g(0, 0.08),
 };
 
 export const dark: ColorPalette = {
@@ -30,5 +29,4 @@ export const dark: ColorPalette = {
   boolean: "#9168c8",
   nil: darkTheme.g(0, 0.45),
   undef: darkTheme.g(0, 0.25),
-  selection: darkTheme.g(0, 0.1),
 };

src/style.ts

@@ -30,7 +30,6 @@ export interface ColorPalette {
   col6?: string;
   negative?: string;
   positive?: string;
-  selection: string;
   string?: string;
   keyword?: string;
   builtin?: string;
@@ -78,24 +77,6 @@ export const palette: ColorPalette = {
   negative: theme.color.sem.negative[2],
   // positive: theme.color.sem.positive[1],
   positive: "#718C00",
-  selection: "hsl(230, 1%, 90%)",
-};
-
-const redSquiggly: CssLikeObject = {
-  marb: "-2px",
-  bdb: "2px dotted rgba(255,0,0,.6)",
-  d: "inline-block",
-  pos: "relative",
-  "&:after": {
-    d: "block",
-    content: '""',
-    w: "100%",
-    h: "4px",
-    bdb: "2px dotted rgba(255,0,0,.6)",
-    pos: "absolute",
-    t: "calc(1em - 1px)",
-    l: "-2px",
-  },
 };
 
 const backgroundPadding: CssLikeObject = {
@@ -105,11 +86,6 @@ const backgroundPadding: CssLikeObject = {
   pad: ".1em",
 };
 
-const redBackground: CssLikeObject = {
-  ...backgroundPadding,
-  bg: "rgba(255,0,0,.05)",
-};
-
 export const css = ({
   mono1,
   mono2 = mono1,
@@ -122,7 +98,6 @@ export const css = ({
   col6 = mono3,
   negative = col5,
   positive = col4,
-  selection,
 
   string: str = col4,
   keyword = col3,
@@ -154,11 +129,6 @@ export const css = ({
 
   return {
     col: mono1,
-    "::selection": {
-      bg: selection,
-      col: "inherit",
-      bdrad: ".2em",
-    },
     ".token": {
       "&.comment,&.prolog,&.cdata": {
         col: mono3,
@@ -188,35 +158,22 @@ export const css = ({
       },
       "&.important": {
         col: important,
-        ...redSquiggly,
       },
       "&.function": {
         col: func,
       },
       "&.boolean": {
         col: boolean,
-        "&[text=false]": redBackground,
       },
       "&.number": {
         ...backgroundPadding,
         col: number,
-        "&:hover": {
-          bg: lightBg,
-        },
-        '&[text="0"],&[text="0.0"]': redBackground,
         '&[text*="."]': {
           col: float,
         },
       },
       "&.string": {
         col: str,
-        "&[text=\"''\"],&[text='\"\"']": redBackground,
-        "&:hover": {
-          td: "underline",
-        },
-        "&.template-punctuation:hover": {
-          td: "none",
-        },
       },
       "&.char": {
         col: char,
@@ -226,12 +183,10 @@ export const css = ({
       },
       "&.regex": {
         col: regex,
-        "&:hover": {
-          td: "underline",
-        },
       },
       "&.url.string": {
         td: "underline",
+        textUnderlineOffset: "3px",
       },
       "&.operator": {
         col: operator,
@@ -244,11 +199,6 @@ export const css = ({
       },
       "&.property": {
         col: property,
-        "&:hover": {
-          // td: 'underline',
-          ...backgroundPadding,
-          bg: lightBg,
-        },
       },
       "&.punctuation": {
         col: punctuation,
@@ -309,17 +259,6 @@ export const css = ({
       },
     },
 
-    ".language-js,.language-javascript": {
-      ".token": {
-        "&.keyword": {
-          "&[text=var],&[text=with],&[text=debugger]": redSquiggly,
-        },
-        "&.function": {
-          "&[text=eval],&[text=alert]": redSquiggly,
-        },
-      },
-    },
-
     ".language-json": {
       ".token": {
         "&.property": {

src/util.ts

@@ -1,6 +1,6 @@
 import { CodeColors } from "code-colors/lib/CodeColors";
 
-const bundle = "https://unpkg.com/code-colors@2.2.0/dist/bundle.js";
+const bundle = "https://cdn.jsdelivr.net/npm/code-colors@2.5.0/dist/bundle.js";
 
 let __colors: CodeColors | null = null;
 export const colors = (): CodeColors => {

yarn.lock

@@ -2219,10 +2219,10 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
-code-colors@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/code-colors/-/code-colors-2.4.0.tgz#993955bca93ce08bdfd2ecc20e17772a40eba5fb"
-  integrity sha512-6FhZx+bFu0iMwwwVsAfuY9SSmHhMze53Ybjd+sd20v2ocRZzRd2+Uo1dH2Rh9x86qc9wbLCOq6cPXYAi9KVMKw==
+code-colors@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/code-colors/-/code-colors-2.5.0.tgz#132b0380f43cadb3429b485b993767c89ca92147"
+  integrity sha512-61KEODKoBlS9yWvLTVQjnoFv4HjNSQ41qoJ44K+dz4P7fivwaYJ3GrNi50k6tygi2gVCPkda9CvCC7qVEyLOEw==
   dependencies:
     prismjs "^1.30.0"
     thingies "^2.5.0"
@@ -3392,7 +3392,7 @@ nano-css@^5.6.2:
     stacktrace-js "^2.0.2"
     stylis "^4.3.0"
 
-nano-theme@^1.4.3:
+nano-theme@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/nano-theme/-/nano-theme-1.5.0.tgz#faa3a0b26dc6cfb3f2cc0ef70e207ca26f06ddb3"
   integrity sha512-lOSUW1IqKDKfeOdwHdwTCCo49BngV83KXRPMI9GDk7Fha6fjhzv2ozNPbrm+h+uh9CCIhM9fkvDtspGfb46bpw==
@@ -4305,11 +4305,16 @@ terser@^5.10.0, terser@^5.31.1:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
-thingies@^2.4.0, thingies@^2.5.0:
+thingies@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/thingies/-/thingies-2.5.0.tgz#5f7b882c933b85989f8466b528a6247a6881e04f"
   integrity sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==
 
+thingies@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/thingies/-/thingies-2.6.0.tgz#e09b98b9e6f6caf8a759eca8481fea1de974d2b1"
+  integrity sha512-rMHRjmlFLM1R96UYPvpmnc3LYtdFrT33JIB7L9hetGue1qAPfn1N2LJeEjxUSidu1Iku+haLZXDuEXUHNGO/lg==
+
 throttle-debounce@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"