Merge remote-tracking branch 'origin/main' into js

Author: na-trium-144

app/globals.css

@@ -56,17 +56,17 @@ mycdark:
   default: false;
   prefersdark: true;
   color-scheme: "dark";
-  --color-base-100: oklch(23.0% 0.020 61.15);
-  --color-base-200: oklch(19.0% 0.020 61.15);
-  --color-base-300: oklch(10.0% 0.020 61.15);
+  --color-base-100: oklch(23% 0.02 61.15);
+  --color-base-200: oklch(19% 0.02 61.15);
+  --color-base-300: oklch(10% 0.02 61.15);
   --color-base-content: oklch(85% 0.01 61.15);
   --color-primary: oklch(70% 0.139 61.15);
   --color-primary-content: oklch(26% 0.07 61.15);
   --color-secondary: oklch(65% 0.262 315);
   --color-secondary-content: oklch(18% 0.191 315);
   --color-accent: oklch(61% 0.181 190);
   --color-accent-content: oklch(18% 0.152 190);
-  --color-neutral: oklch(33.0% 0.070 61.15);
+  --color-neutral: oklch(33% 0.07 61.15);
   --color-neutral-content: oklch(85% 0.01 61.15);
   --color-info: oklch(54.615% 0.215 262.88);
   --color-info-content: oklch(90.923% 0.043 262.88);
@@ -90,58 +90,48 @@ mycdark:
 
 /* Aceの背景色と文字色を上書き */
 .ace_editor {
-  background-color: var(--color-base-300) !important;
-  color: var(--color-base-content) !important;
+  @apply bg-base-300! text-base-content!;
 }
 .ace_gutter {
   /* editorと同じにする */
-  background: inherit !important;
-  color: inherit !important;
+  @apply bg-inherit! text-inherit!;
 }
 .ace_active-line {
-  /* bg-base-content/10 このdivにはテキストが入らないので、opacity:0.1で代用可能 */
-  background: var(--color-base-content) !important;
-  opacity: 0.1;
+  @apply bg-base-content/10!;
 }
 .ace_gutter-active-line {
-  /* bg-base-content/20 --color-base-contentにa=0.2を追加する方法がなさそうなのでcolor-mixで代用する */
-  background-color: color-mix(in oklch, var(--color-base-content) 20%, var(--color-base-300)) !important;
+  @apply bg-base-content/20!;
 }
 .ace_bracket {
-  border: 1px solid var(--color-primary) !important;
+  @apply border-primary!;
 }
 .ace_cursor {
-  color: var(--color-primary) !important;
+  @apply border-primary!;
 }
 .ace_selection {
-  background: var(--color-primary) !important;
-  opacity: 0.4;
+  @apply bg-primary/40!;
 }
 .ace_selected-word {
-  border: 1px solid var(--color-primary) !important;
+  @apply border-primary!;
 }
 
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
   /*
-  Variable がついているほうはlayout.tsxでインポートしているwebフォント、
-  それ以外はフォールバック (インストールされていればwebフォントをダウンロードする必要はないため)
+  Inconsolata Variable はlayout.tsxでインポートしているwebフォント
 
-  UbuntuでシステムにインストールされたInconsolataには、太字がなかったので、Inconsolataは除外
+  UbuntuでシステムにインストールされたInconsolataには、太字がなかったので、Inconsolata は使用しない
   それに加えて、 "Inconsolata", "Inconsolata Variable" という指定にしたとしても
   terminal.tsxで Inconsolata Variable をloadしているので意味ない...
 
-  NotoSansJPの指定は正直なくても良い気はするが、
+  日本語フォントは正直なんでもいいが、
   あまり変なフォントが選ばれるとxtermやaceエディターの表示が崩れる可能性があるので、
-  確実にフォントを統一するために適当に指定している
+  確実にフォントを統一するためにRoundedM+を指定することにした
+  以前NotoSansJPを指定していたが、xterm.jsで全角の（）の幅がバグった
   */
   --font-mono:
-    "Inconsolata Variable",
-    /* Inconsolataのfallbackとしての欧文フォント */ "Inconsolata",
-    "Noto Sans Mono", "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco",
-    "Consolas", "Liberation Mono", "Courier New",
-    /* 日本語用にNotoSans */ "Noto Sans Mono CJK JP", "Noto Sans JP",
-    "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans JP Variable", monospace;
+    "Inconsolata Variable", "Rounded M+ 1c", "Rounded M+ 1p",
+    "M PLUS Rounded 1c", monospace;
   /*
   本家のフォント名は Rounded M+ 1c 、または1pでもいいかも
   layout.tsxでインポートしているwebフォントが M PLUS Rounded 1c

app/layout.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import "@fontsource-variable/noto-sans-jp";
 import "@fontsource-variable/inconsolata";
 import "@fontsource/m-plus-rounded-1c/400.css";
 import "@fontsource/m-plus-rounded-1c/700.css";

app/terminal/highlight.ts

@@ -1,4 +1,5 @@
 import chalk from "chalk";
+chalk.level = 3;
 import { RuntimeLang } from "./runtime";
 
 export async function importPrism() {

app/terminal/repl.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { highlightCodeToAnsi, importPrism } from "./highlight";
 import chalk from "chalk";
+chalk.level = 3;
 import {
   clearTerminal,
   getRows,

app/terminal/terminal.tsx

@@ -5,6 +5,7 @@ import type { Terminal } from "@xterm/xterm";
 import type { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import chalk from "chalk";
+chalk.level = 3;
 import { useChangeTheme } from "../[docs_id]/themeToggle";
 
 /**
@@ -133,7 +134,7 @@ export function useTerminal(props: TerminalProps) {
             lineHeight: 1.2,
             letterSpacing: 0,
             fontFamily:
-              "'Inconsolata Variable', 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', '源ノ角ゴシック', 'Noto Sans JP Variable', monospace",
+              "'Inconsolata Variable', 'Rounded M+ 1c', 'Rounded M+ 1p', 'M PLUS Rounded 1c', monospace",
             theme: computeTerminalTheme(),
           });
           terminalInstanceRef.current = term;

package-lock.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@fontsource-variable/inconsolata": "^5.2.7",
-    "@fontsource-variable/noto-sans-jp": "^5.2.6",
     "@fontsource/m-plus-rounded-1c": "^5.2.9",
     "@google/genai": "^1.21.0",
     "@opennextjs/cloudflare": "^1.7.1",