fade without transparency
parent
1405c958eb
commit
db31f66923
|
|
@ -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)
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue