fade without transparency

oc-run
Simon Klee 2026-04-07 09:19:45 +02:00
parent 1405c958eb
commit db31f66923
No known key found for this signature in database
GPG Key ID: B91696044D47BEA3
2 changed files with 17 additions and 6 deletions

View File

@ -29,7 +29,7 @@ import {
type PermissionOption, type PermissionOption,
} from "./permission.shared" } from "./permission.shared"
import { toolDiffView, toolFiletype } from "./tool" import { toolDiffView, toolFiletype } from "./tool"
import type { RunBlockTheme, RunFooterTheme } from "./theme" import { transparent, type RunBlockTheme, type RunFooterTheme } from "./theme"
import type { PermissionReply, RunDiffStyle } from "./types" import type { PermissionReply, RunDiffStyle } from "./types"
type RejectArea = { type RejectArea = {
@ -55,7 +55,7 @@ function buttons(
<box <box
paddingLeft={1} paddingLeft={1}
paddingRight={1} paddingRight={1}
backgroundColor={option === selected ? theme.highlight : theme.surface} backgroundColor={option === selected ? theme.highlight : transparent}
onMouseOver={() => { onMouseOver={() => {
if (!disabled) onHover(option) if (!disabled) onHover(option)
}} }}

View File

@ -54,6 +54,8 @@ export type RunTheme = {
block: RunBlockTheme block: RunBlockTheme
} }
export const transparent = RGBA.fromValues(0, 0, 0, 0)
function alpha(color: RGBA, value: number): RGBA { function alpha(color: RGBA, value: number): RGBA {
const a = Math.max(0, Math.min(1, value)) const a = Math.max(0, Math.min(1, value))
return RGBA.fromValues(color.r, color.g, color.b, a) return RGBA.fromValues(color.r, color.g, color.b, a)
@ -77,18 +79,27 @@ function mode(bg: RGBA): "dark" | "light" {
return "dark" return "dark"
} }
function fade(color: RGBA, fallback: number, scale: number, limit: number): RGBA { function fade(color: RGBA, base: RGBA, fallback: number, scale: number, limit: number): RGBA {
if (color.a === 0) { if (color.a === 0) {
return alpha(color, fallback) return alpha(color, fallback)
} }
return alpha(color, Math.min(limit, color.a * scale)) const target = Math.min(limit, color.a * scale)
const mix = Math.min(1, target / color.a)
return RGBA.fromValues(
base.r + (color.r - base.r) * mix,
base.g + (color.g - base.g) * mix,
base.b + (color.b - base.b) * mix,
color.a,
)
} }
function map(theme: TuiThemeCurrent, syntax?: SyntaxStyle): RunTheme { function map(theme: TuiThemeCurrent, syntax?: SyntaxStyle): RunTheme {
const bg = theme.background
const pane = theme.backgroundElement const pane = theme.backgroundElement
const surface = fade(pane, 0.18, 0.76, 0.9) const surface = fade(pane, bg, 0.18, 0.76, 0.9)
const line = fade(pane, 0.24, 0.90, 0.98) const line = fade(pane, bg, 0.24, 0.9, 0.98)
return { return {
background: theme.background, background: theme.background,