Theme
This site’s palette and motion, for your terminal and compositor. Every value is read from the site’s own tokens when it is built, so these stay in step with what you see here.
Palette
- void background
- raised raised surfaces
- line rules
- line-2 underlines, the scrollbar
- soul text
- ash secondary text
- dust meta text
- cloak-deep the ribbon, fills
- cloak accent text, focus
base16
In tinted-theming’s scheme format, so its builder can render it for most terminals and editors.
system: "base16"
name: "taz"
author: "Moetez Zouari (https://taz.tn)"
variant: "dark"
palette:
base00: "#07070a" # void: background
base01: "#101116" # raised: raised surfaces, status bars
base02: "#23252d" # line: selection
base03: "#7a828f" # dust: comments
base04: "#9aa3ae" # ash: secondary text
base05: "#d2d8e0" # code-text: text
base06: "#e6ebf1" # soul: bright text
base07: "#f4f6f9" # code-strong: brightest text
base08: "#c68e58" # cloak: errors, deletions
base09: "#d8c6a0" # code-literal: numbers, constants
base0A: "#f4f6f9" # code-strong: types, search
base0B: "#d8c6a0" # code-literal: strings, insertions
base0C: "#9aa3ae" # ash: escapes, regular expressions
base0D: "#f4f6f9" # code-strong: functions, headings
base0E: "#e6ebf1" # soul: keywords
base0F: "#c68e58" # cloak: deprecatedkitty
The cursor and the focused window’s border take the accent amber, as focus does here.
# taz, for kitty.conf
foreground #d2d8e0
background #07070a
selection_foreground #e6ebf1
selection_background #23252d
cursor #c68e58
cursor_text_color #07070a
url_color #f4f6f9
active_border_color #c68e58
inactive_border_color #23252d
color0 #07070a
color1 #c68e58
color2 #d8c6a0
color3 #f4f6f9
color4 #f4f6f9
color5 #e6ebf1
color6 #9aa3ae
color7 #d2d8e0
color8 #7a828f
color9 #c68e58
color10 #d8c6a0
color11 #f4f6f9
color12 #f4f6f9
color13 #e6ebf1
color14 #9aa3ae
color15 #f4f6f9Hyprland
The site’s spring and curves as Hyprland curves: windows move on the same critically damped spring, and close faster than they open.
-- taz, for hyprland.lua. Durations are in deciseconds (Hyprland's speed).
hl.curve("taz", { type = "spring", mass = 1, stiffness = 800, damping = 56.57 }) -- critically damped: no bounce
hl.curve("tazDecel", { type = "bezier", points = { {0.05, 0.7}, {0.1, 1} } })
hl.curve("tazAccel", { type = "bezier", points = { {0.3, 0}, {0.8, 0.15} } })
hl.curve("tazStandard", { type = "bezier", points = { {0.2, 0}, {0, 1} } })
hl.animation({ leaf = "windows", enabled = true, speed = 3.27, spring = "taz" })
hl.animation({ leaf = "windowsIn", enabled = true, speed = 3.27, spring = "taz", style = "popin 98%" })
hl.animation({ leaf = "windowsOut", enabled = true, speed = 1.2, bezier = "tazAccel", style = "popin 98%" })
hl.animation({ leaf = "layersIn", enabled = true, speed = 3, bezier = "tazDecel", style = "fade" })
hl.animation({ leaf = "layersOut", enabled = true, speed = 1.2, bezier = "tazAccel", style = "fade" })
hl.animation({ leaf = "fade", enabled = true, speed = 1.5, bezier = "tazStandard" })
hl.animation({ leaf = "border", enabled = true, speed = 1.5, bezier = "tazStandard" })
hl.animation({ leaf = "workspaces", enabled = true, speed = 3.27, spring = "taz", style = "slide" })
hl.config({
general = {
border_size = 2,
col = {
active_border = "rgba(c68e58ff)",
inactive_border = "rgba(23252dff)",
},
},
})niri
niri’s own springs are already critically damped; these use the site’s stiffness and curves.
// taz, for niri's config.kdl
layout {
focus-ring {
width 2
active-color "#c68e58"
inactive-color "#23252d"
}
}
animations {
workspace-switch { spring damping-ratio=1.0 stiffness=800 epsilon=0.0001; }
horizontal-view-movement { spring damping-ratio=1.0 stiffness=800 epsilon=0.0001; }
window-movement { spring damping-ratio=1.0 stiffness=800 epsilon=0.0001; }
window-resize { spring damping-ratio=1.0 stiffness=800 epsilon=0.0001; }
window-open {
duration-ms 327
curve "cubic-bezier" 0.05 0.7 0.1 1
}
window-close {
duration-ms 120
curve "cubic-bezier" 0.3 0 0.8 0.15
}
}