11import { describe , expect , it } from "vitest" ;
2- import { CSS , DARK_COLORS , LIGHT_COLORS } from "../src/styles" ;
2+ import { buildThemeCSS , CSS , DARK_COLORS , LIGHT_COLORS } from "../src/styles" ;
33
44describe ( "LIGHT_COLORS" , ( ) => {
55 it ( "ライトテーマの背景色を含む" , ( ) => {
@@ -45,6 +45,10 @@ describe("LIGHT_COLORS", () => {
4545 expect ( LIGHT_COLORS ) . toContain ( "color: #0550ae" ) ;
4646 } ) ;
4747
48+ it ( "ライトテーマの基本テキスト色を含む" , ( ) => {
49+ expect ( LIGHT_COLORS ) . toContain ( "--gce-code-text: #24292f" ) ;
50+ } ) ;
51+
4852 it ( "ライトテーマのスクロールバー thumb 色を含む" , ( ) => {
4953 expect ( LIGHT_COLORS ) . toContain ( "--gce-scrollbar-thumb: #afb8c1" ) ;
5054 } ) ;
@@ -94,11 +98,56 @@ describe("DARK_COLORS", () => {
9498 expect ( DARK_COLORS ) . toContain ( "color: #79c0ff" ) ;
9599 } ) ;
96100
101+ it ( "ダークテーマの基本テキスト色を含む" , ( ) => {
102+ expect ( DARK_COLORS ) . toContain ( "--gce-code-text: #e6edf3" ) ;
103+ } ) ;
104+
97105 it ( "ダークテーマのスクロールバー thumb 色を含む" , ( ) => {
98106 expect ( DARK_COLORS ) . toContain ( "--gce-scrollbar-thumb: #484f58" ) ;
99107 } ) ;
100108} ) ;
101109
110+ describe ( "buildThemeCSS" , ( ) => {
111+ it ( '"light" → LIGHT_COLORS のみ返す' , ( ) => {
112+ expect ( buildThemeCSS ( "light" ) ) . toBe ( LIGHT_COLORS ) ;
113+ } ) ;
114+
115+ it ( '"dark" → DARK_COLORS のみ返す' , ( ) => {
116+ expect ( buildThemeCSS ( "dark" ) ) . toBe ( DARK_COLORS ) ;
117+ } ) ;
118+
119+ it ( '"auto" → LIGHT_COLORS を含む' , ( ) => {
120+ expect ( buildThemeCSS ( "auto" ) ) . toContain ( LIGHT_COLORS ) ;
121+ } ) ;
122+
123+ it ( '"auto" → DARK_COLORS が @media (prefers-color-scheme: dark) で囲まれている' , ( ) => {
124+ const css = buildThemeCSS ( "auto" ) ;
125+ const mediaStart = css . indexOf ( "@media (prefers-color-scheme: dark)" ) ;
126+ expect ( mediaStart ) . toBeGreaterThan ( - 1 ) ;
127+ // DARK_COLORS はメディアクエリブロック内に含まれる
128+ const afterMedia = css . slice ( mediaStart ) ;
129+ expect ( afterMedia ) . toContain ( DARK_COLORS ) ;
130+ } ) ;
131+
132+ it ( '"auto" → ダーク側の --gce-code-text が @media ブロック内に現れる' , ( ) => {
133+ const css = buildThemeCSS ( "auto" ) ;
134+ const mediaStart = css . indexOf ( "@media (prefers-color-scheme: dark)" ) ;
135+ expect ( mediaStart ) . toBeGreaterThan ( - 1 ) ;
136+ const afterMedia = css . slice ( mediaStart ) ;
137+ expect ( afterMedia ) . toContain ( "--gce-code-text: #e6edf3" ) ;
138+ } ) ;
139+
140+ it ( '"auto" → LIGHT_COLORS が DARK_COLORS より前に現れる' , ( ) => {
141+ const css = buildThemeCSS ( "auto" ) ;
142+ expect ( css . indexOf ( LIGHT_COLORS ) ) . toBeLessThan ( css . indexOf ( DARK_COLORS ) ) ;
143+ } ) ;
144+
145+ it ( '不明な値 → LIGHT_COLORS にフォールバック' , ( ) => {
146+ expect ( buildThemeCSS ( "unknown" ) ) . toBe ( LIGHT_COLORS ) ;
147+ expect ( buildThemeCSS ( "" ) ) . toBe ( LIGHT_COLORS ) ;
148+ } ) ;
149+ } ) ;
150+
102151describe ( "CSS (テーマ: light)" , ( ) => {
103152 it ( "テーマ非依存の font-family 変数を含む" , ( ) => {
104153 expect ( CSS ) . toContain ( "--gce-font-family:" ) ;
@@ -120,6 +169,12 @@ describe("CSS (テーマ: light)", () => {
120169 expect ( CSS ) . toContain ( "display: flex" ) ;
121170 } ) ;
122171
172+ it ( "td.gce-code に基本テキスト色の CSS 変数を含む" , ( ) => {
173+ const match = CSS . match ( / \. g c e - c o n t a i n e r \. g c e - t a b l e t d \. g c e - c o d e \{ ( [ ^ } ] * ) \} / ) ;
174+ expect ( match ) . not . toBeNull ( ) ;
175+ expect ( match ! [ 1 ] ) . toContain ( "color: var(--gce-code-text)" ) ;
176+ } ) ;
177+
123178 it ( "scrollbar-color サポートブラウザ向けの @supports ブロックを含む" , ( ) => {
124179 expect ( CSS ) . toContain ( "@supports (scrollbar-color: auto)" ) ;
125180 expect ( CSS ) . toContain ( "scrollbar-color: var(--gce-scrollbar-thumb) var(--gce-code-bg)" ) ;
0 commit comments