refactor: improve stage-web color palette settings readability by drHuangMHT · Pull Request #1671 · moeru-ai/airi

drHuangMHT · 2026-04-16T17:59:07Z

Description

Improve code readability:

compute primary, secondary, and tertiary color in CSS instead of JavaScript. also handles dark mode with media query
improve StageTransition component prop readability with prop destructing and defaults
improve readability when setting CSS variables in transition components, using useCssVariables composable(with proper tests, and some features!)

packages introduced:

@vue/test-utils and jsdom for running tests(dev dependency)

Linked Issues

Additional Context

…ionGroup

…web-color-palette

gemini-code-assist

Code Review

This pull request centralizes transition colors using CSS variables and introduces a useCssVariables composable with accompanying unit tests. Feedback highlights a reactivity bug in App.vue where colors may become stale when the theme hue changes. Significant logic and compatibility issues were identified in the useCssVariables composable regarding target cleanup and ES2024 features, and corrections to the JSDoc examples were suggested to ensure type safety and maintain reactivity.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d02ab3a7ea

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c025a503b1

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-04-16T18:46:33Z

+    getCSSVar('--primary-color'),
+    getCSSVar('--secondary-color'),
+    getCSSVar('--tertiary-color'),


Keep transition colors reactive during dynamic hue animation

This computed now snapshots resolved CSS colors via getComputedStyle(...), so it only updates when tracked refs change; however dynamic hue mode animates --chromatic-hue in CSS (.dynamic-hue) without changing settings.themeColorsHue. As a result, when dynamic hue is enabled, transitions use stale sampled colors instead of tracking the live hue animation that the previous color-expression approach provided.

Useful? React with 👍 / 👎.

who would ever want an interface with flashy RGB effects🤦 does the original code also watch this change? @codex

the css variable returns what's in colors.css as raw value that is not mixed into RGB value, which is static. this is not an issue as long as the variable is used in styles. CSS engine will handle the update automatically.

nekomeowww · 2026-04-17T07:10:50Z

What is the purpose of this PR?

If you need to adjust the color, perhaps reading https://proj-airi-chromatic.netlify.app/

nekomeowww · 2026-04-17T07:11:15Z

If possible, submit more screenshots, explaining why this is necessary, then re-open another PR if needed.

drHuangMHT · 2026-04-17T07:36:06Z

If possible, submit more screenshots, explaining why this is necessary, then re-open another PR if needed.

I don't think screenshots are necessary because the code does not involve changes to the visual appearance of the application. I'm just trying to organize the code for readability. It's about the program code, about the developer experience, not the appearance of the application, not the color-mixing algorithms.

drHuangMHT · 2026-04-17T12:49:54Z

@nekomeowww not re-opening this one?

nekomeowww · 2026-04-18T10:13:52Z

+:root {
+  /* Light mode defaults */
+  --chromatic-hue: 0;
+  --chromatic-chroma-900: 0.15;


This is controlled and injected by https://github.com/proj-airi/chromatic. We should not define this here.

nekomeowww · 2026-04-18T10:14:49Z

-const primaryColor = computed(() => {
-  return isDark.value
-    ? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 70%, oklch(50% 0 360))`
-    : `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 90%, oklch(90% 0 360))`
-})
-
-const secondaryColor = computed(() => {
-  return isDark.value
-    ? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${180})) 70%, oklch(50% 0 360))`
-    : `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${180})) 90%, oklch(90% 0 360))`
-})
-
-const tertiaryColor = computed(() => {
-  return isDark.value
-    ? `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${60})) 70%, oklch(50% 0 360))`
-    : `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${60})) 90%, oklch(90% 0 360))`
-})


This should be replaced with the new https://github.com/proj-airi/chromatic/blob/3be1f5990069fa5dd006ae314c979ef54906d1e5/packages/chromatic/src/index.ts#L148-L198

nekomeowww · 2026-04-18T10:16:35Z

+const {
+  primaryColor = '#666',
+  secondaryColor = '#ccc',
+  zIndex = 100,
+} = defineProps<Omit<StageTransitionCommonParams, 'name'>>()


withDefaults should be used as https://vuejs.org/guide/typescript/composition-api.html#props-default-values explained.

we are using vue ^3.5.32 according to the catalog, and reactive props destructure is available. not using it?

nekomeowww · 2026-04-18T10:17:59Z

+ */
+export function useCssVariables(
+  variableGetter: MaybeRefOrGetter<Record<string, string | undefined>>,
+  options?: { elementGetter?: MaybeRefOrGetter<HTMLElement | null>, prefix?: string },


Suggested change

options?: { elementGetter?: MaybeRefOrGetter<HTMLElement | null>, prefix?: string },

options?: { target?: MaybeRefOrGetter<HTMLElement | null>, prefix?: string },

nekomeowww · 2026-04-18T10:19:03Z

+useCssVariables(() => ({
+  'overlay-color-1': primaryColor,
+  'overlay-color-2': secondaryColor,
+}), { prefix: '--stage-transition-3-' })


What is the purpose of this?

improve code readability. useCssVariables also handles reactivity when you need it(although not needed in this case).

nekomeowww · 2026-04-18T10:19:20Z

+const {
+  colors = ['#eee', '#ebcb8b', '#c56370', '#3f3b52'],
+  delay = 0,
+  duration = 0.4,
+  zIndex = 100,
+} = defineProps<TransitionParams>()


withDefaults should be used as https://vuejs.org/guide/typescript/composition-api.html#props-default-values explained.

nekomeowww · 2026-04-18T10:19:28Z

+const {
+  direction = 'up',
+  primaryColor = '#eee',
+  duration = 0.6,
+  delay = 0,
+  borderRadius = { sm: '14rem', md: '14rem', lg: '50%' },
+  zIndex = 100,
+} = defineProps<TransitionParams>()


withDefaults should be used as https://vuejs.org/guide/typescript/composition-api.html#props-default-values explained.

drHuangMHT added 6 commits April 15, 2026 15:28

move color mixing to css, explicit override ordering for StageTransit…

84538ad

…ionGroup

Merge branch 'main' of https://github.com/drHuangMHT/airi into stage-…

c5215a4

…web-color-palette

improve code readability

79bfe79

use composable for managing css variables

d172ab5

propagate useCssVariable changes

eb5b02c

minimize diff

d02ab3a

gemini-code-assist Bot reviewed Apr 16, 2026

View reviewed changes

Comment thread apps/stage-web/src/App.vue

Comment thread packages/ui-transitions/src/components/useCssVar.ts

Comment thread packages/ui-transitions/src/components/useCssVar.ts

chatgpt-codex-connector Bot reviewed Apr 16, 2026

View reviewed changes

Comment thread apps/stage-web/src/App.vue

Comment thread apps/stage-web/src/App.vue

drHuangMHT added 4 commits April 17, 2026 02:27

proper cleanup target and test

b41af13

correct documentation

c0e7b7f

hue as color getter dependency and comment

aa57016

import the stylesheet

c025a50

chatgpt-codex-connector Bot reviewed Apr 16, 2026

View reviewed changes

nekomeowww closed this Apr 17, 2026

nekomeowww reviewed Apr 18, 2026

View reviewed changes

	options?: { elementGetter?: MaybeRefOrGetter<HTMLElement \| null>, prefix?: string },
	options?: { target?: MaybeRefOrGetter<HTMLElement \| null>, prefix?: string },

Uh oh!

Conversation

drHuangMHT commented Apr 16, 2026

Description

Linked Issues

Additional Context

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

chatgpt-codex-connector Bot Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

drHuangMHT Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nekomeowww commented Apr 17, 2026

Uh oh!

nekomeowww commented Apr 17, 2026

Uh oh!

drHuangMHT commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

drHuangMHT commented Apr 17, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

drHuangMHT Apr 16, 2026 •

edited

Loading

drHuangMHT commented Apr 17, 2026 •

edited

Loading