Adjust theme

Set colors for dark and light theme.

packages/react-common-docs/public/theme/dark.css

@@ -49,6 +49,7 @@
 }
 
 :root {
+  --color-shade: #000;
   --color-active: #f90;
   --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
   --font-stretch-base: semi-expanded;
@@ -66,6 +67,19 @@
   --opacity-light: 0.25;
   --opacity-lighter: 0.5;
   --opacity-lightest: 0.75;
+
+  --color-code-number: #74f95e;
+  --color-code-keyword: #ff4389;
+  --color-code-type: #5097D2;
+  --color-code-instance-attribute: #76a7d2;
+  --color-code-function: #67c252;
+  --color-code-parameter: #915ec2;
+  --color-code-property: #ffa1c9;
+  --color-code-string: #eed371;
+  --color-code-variable: #8bc275;
+  --color-code-regexp: #74A72B;
+  --color-code-url: #0099CC;
+  --color-code-global: #C28050;
 }
 
 :root {

packages/react-common-docs/public/theme/light.css

@@ -49,8 +49,9 @@
 }
 
 :root {
-  --color-negative: #eee;
-  --color-positive: #222;
+  --color-shade: #fff;
+  --color-negative: #f8f8f8;
+  --color-positive: #333;
   --color-accent: #ba6a9c;
   --color-active: #f90;
   --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
@@ -66,6 +67,19 @@
   --opacity-light: 0.5;
   --opacity-lighter: 0.75;
   --opacity-lightest: 0.875;
+
+  --color-code-number: #72b507;
+  --color-code-keyword: #ee5189;
+  --color-code-type: #427fb1;
+  --color-code-instance-attribute: #76a7d2;
+  --color-code-function: #5a984a;
+  --color-code-parameter: #915ec2;
+  --color-code-property: #b76e8d;
+  --color-code-string: #b59e36;
+  --color-code-variable: #61864e;
+  --color-code-regexp: #4f7e03;
+  --color-code-url: #0099CC;
+  --color-code-global: #C28050;
 }
 
 /*@media (prefers-color-scheme: dark) {*/

packages/react-common-docs/src/components/Playground/Playground.tsx

@@ -17,7 +17,7 @@ const Figure = styled('figure')({
     position: 'absolute',
     content: "''",
     zIndex: -1,
-    backgroundColor: 'black',
+    backgroundColor: 'var(--color-shade)',
     opacity: 0.125,
     top: 0,
     left: 0,

packages/react-common-docs/src/utilities/prism-themes/dark.ts

@@ -2,139 +2,131 @@ import { PrismTheme } from 'prism-react-renderer'
 
 const theme: PrismTheme = {
   plain: {
-    backgroundColor: "transparent",
-      color: "#ffffff"
+    backgroundColor: 'transparent',
+    color: 'currentColor',
   },
   styles: [
     {
-      types: ["comment", "prolog", "doctype", "cdata"],
+      types: ['comment', 'prolog', 'doctype', 'cdata'],
       style: {
-        // color: "#6c6783"
+        // color: '#6c6783'
         opacity: 0.3,
         fontStyle: 'italic',
       }
     },
     {
-      types: ["namespace"],
+      types: ['namespace'],
       style: {
         opacity: 0.7
       }
     },
     {
-      types: ["number", "boolean", "hexcode"],
+      types: ['number', 'boolean', 'hexcode'],
       style: {
-        color: "#74f95e",
+        color: 'var(--color-code-number)',
         fontWeight: 'bold',
       }
     },
     {
-      types: ["tag", "operator", "keyword", "atrule", "selector"],
+      types: ['tag', 'operator', 'keyword', 'atrule', 'selector', 'important'],
       style: {
-        color: "#ff4389",
+        color: 'var(--color-code-keyword)',
         fontWeight: 'bold',
       }
     },
     {
-      types: ["type", "class"],
+      types: ['type'],
       style: {
-        color: "#5097D2",
+        color: 'var(--color-code-type)',
         fontWeight: 'bold',
       }
     },
     {
-      types: ["punctuation"],
+      types: ['punctuation'],
       style: {
-        color: "#ffffff"
+        color: 'currentColor'
       }
     },
     {
-      types: ["function"],
+      types: ['function'],
       style: {
-        color: "#67c252",
+        color: 'var(--color-code-function)',
         fontStyle: 'italic',
       }
     },
     {
-      types: ["parameter"],
+      types: ['parameter'],
       style: {
-        color: "#915ec2"
+        color: 'var(--color-code-parameter)'
       }
     },
     {
-      types: ["property"],
+      types: ['property', 'attr-name'],
       style: {
-        color: "#ffa1c9"
+        color: 'var(--color-code-property)'
       }
     },
     {
-      types: ["tag-id", "atrule-id"],
+      types: ['string', 'attr-value', 'unit'],
       style: {
-        color: "#eeebff"
+        color: 'var(--color-code-string)'
       }
     },
     {
-      types: ["attr-name"],
+      types: ['variable'],
       style: {
-        color: "#ffa1c9"
+        color: 'var(--color-code-variable)'
       }
     },
     {
-      types: ["string", "attr-value", 'unit'],
+      types: [
+        'regex',
+      ],
       style: {
-        color: "#eed371"
+        color: 'var(--color-code-regexp)'
       }
     },
     {
-      types: ["variable"],
+      types: [
+        'entity',
+      ],
       style: {
-        color: "#8bc275"
-      }
+        fontWeight: 'bold',
+      },
     },
     {
       types: [
-        "entity",
-        "url",
-        "control",
-        "directive",
-        "statement",
-        "regex",
-
-        "placeholder",
+        'url',
       ],
       style: {
-        color: "#ffcc99"
+        color: 'var(--color-code-url)',
+        textDecorationLine: 'underline',
       }
     },
     {
-      types: ["deleted"],
+      types: ['deleted'],
       style: {
-        textDecorationLine: "line-through"
+        textDecorationLine: 'line-through'
       }
     },
     {
-      types: ["inserted"],
+      types: ['inserted'],
       style: {
-        textDecorationLine: "underline"
+        textDecorationLine: 'underline'
       }
     },
     {
-      types: ["italic"],
+      types: ['italic'],
       style: {
-        fontStyle: "italic"
+        fontStyle: 'italic'
       }
     },
     {
-      types: ["important", "bold"],
+      types: ['bold'],
       style: {
-        fontWeight: "bold"
+        fontWeight: 'bold'
       }
     },
-    {
-      types: ["important"],
-      style: {
-        color: "#c4b9fe"
-      }
-    }
   ]
 }