change theme #152

NilFoundation · Sep 18, 2023 · 939058d · 939058d
1 parent 5cd3642
commit 939058d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/src/components/codefield/CodeField.stories.mdx b/src/components/codefield/CodeField.stories.mdx
@@ -13,13 +13,7 @@ export const Template = (args) => {
 <Canvas isColumn>
   <Story
     name="Basic usage"
-    args={{
-      code:
-      `#include <iostream>
-      
-      using namespace std;
-      `,
-    }}
+    args={{ code: `const { useState } = require("react");` }}
     parameters={getFigmaParameters(
       "https://www.figma.com/file/YjE625ScDMf2ILjWB1sTMc/System?type=design&node-id=223-8049&mode=design&t=P3rN3pHdOl7FkE44-0"
     )}
@@ -51,7 +45,7 @@ To use, import the component `CodeField` from `@nilfoundation/ui-kit`.
         import {CodeField} from "@nilfoundation/ui-kit";
         ...
         <CodeField
-          code="console.log("Hello World")"
+          code="console.log('Hello World')"
           displayCopy={false}
           onBeforeCopy={str => "Copied message: " + str}
           onCopy={() => console.log("Copied!")}

diff --git a/src/components/codefield/codeMirrorTheme.ts b/src/components/codefield/codeMirrorTheme.ts
@@ -8,26 +8,31 @@ const defaultSettings = {
   lineHighlight: PRIMITIVE_COLORS.gray900,
   selection: PRIMITIVE_COLORS.gray700,
   selectionMatch: PRIMITIVE_COLORS.gray700,
-};
+  fontFamily: "Roboto Mono, monospace",
+} satisfies CreateThemeOptions["settings"];
 
 const defaultStyles = [
-  { tag: t.comment, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.variableName, color: PRIMITIVE_COLORS.blue300 },
-  { tag: [t.string, t.special(t.brace)], color: PRIMITIVE_COLORS.blue300 },
-  { tag: t.number, color: PRIMITIVE_COLORS.green300 },
-  { tag: t.bool, color: PRIMITIVE_COLORS.red300 },
-  { tag: t.null, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.keyword, color: PRIMITIVE_COLORS.yellow300 },
-  { tag: t.operator, color: PRIMITIVE_COLORS.gray700 },
-  { tag: t.className, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.definition(t.typeName), color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.typeName, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.angleBracket, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.tagName, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.attributeName, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.meta, color: PRIMITIVE_COLORS.gray500 },
-  { tag: t.name, color: PRIMITIVE_COLORS.gray500 },
-];
+  { tag: t.keyword, color: PRIMITIVE_COLORS.purple300 },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: PRIMITIVE_COLORS.gray500 },
+  { tag: [t.propertyName], color: PRIMITIVE_COLORS.yellow300 },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: PRIMITIVE_COLORS.green300 },
+  { tag: [t.function(t.variableName), t.labelName], color: PRIMITIVE_COLORS.yellow300 },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: PRIMITIVE_COLORS.green300 },
+  { tag: [t.definition(t.name), t.separator], color: PRIMITIVE_COLORS.gray500 },
+  { tag: [t.className], color: PRIMITIVE_COLORS.purple300 },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: PRIMITIVE_COLORS.blue300 },
+  { tag: [t.typeName], color: PRIMITIVE_COLORS.green300 },
+  { tag: [t.operator, t.operatorKeyword], color: PRIMITIVE_COLORS.purple300 },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: PRIMITIVE_COLORS.green300 },
+  { tag: [t.meta, t.comment], color: PRIMITIVE_COLORS.gray500 },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.link, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: PRIMITIVE_COLORS.purple300 },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: PRIMITIVE_COLORS.blue300 },
+  { tag: t.invalid, color: PRIMITIVE_COLORS.red300 },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+] satisfies CreateThemeOptions["styles"];
 
 export const getCodeMirrorTheme = ({
   theme = "dark",

diff --git a/src/components/codefield/styles.ts b/src/components/codefield/styles.ts
@@ -6,12 +6,13 @@ const containerStyles: StyleObject = {
   position: "relative",
   overflow: "hidden",
   background: PRIMITIVE_COLORS.gray900,
-  ...expandProperty("borderRaduis", "4px"),
+  borderRadius: "4px",
   ...expandProperty("padding", "24px"),
   display: "flex",
   justifyContent: "space-between",
   alignItems: "flex-start",
   gap: "12px",
+  color: PRIMITIVE_COLORS.gray100,
 };
 
 export const styles = {

diff --git a/src/shared/theme/colors.ts b/src/shared/theme/colors.ts
@@ -39,7 +39,7 @@ export const PRIMITIVE_COLORS = {
   yellow50: "#FCF2E2",
   yellow100: "#f7e3c8",
   yellow200: "#f5b447",
-  yellow300: "E79301",
+  yellow300: "#E79301",
   yellow400: "#bc8932",
   yellow500: "#9d7229",
   yellow600: "#855400",