guise-ui 1.5.2

A component library for gpui, Zed's GPU-accelerated UI framework: a themed palette, sizing tokens, 130+ composable components, a reactive state layer, and an in-app Safari-style inspector.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//! `Kbd` — a keyboard-key cap.

use gpui::prelude::*;
use gpui::{div, px, App, FontWeight, IntoElement, SharedString, Window};

use crate::devtools::Probed;
use crate::theme::{theme, ColorName, Size};

/// A keyboard key.
#[derive(IntoElement)]
pub struct Kbd {
  key: SharedString,
}

impl Kbd {
  pub fn new(key: impl Into<SharedString>) -> Self {
    Kbd { key: key.into() }
  }
}

impl RenderOnce for Kbd {
  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
    let t = theme(cx);
    let bg = t
      .color(ColorName::Gray, if t.scheme.is_dark() { 7 } else { 0 })
      .hsla();
    let border = t
      .color(ColorName::Gray, if t.scheme.is_dark() { 6 } else { 3 })
      .hsla();

    div()
      .px(px(7.0))
      .py(px(2.0))
      .rounded(px(t.radius(Size::Sm)))
      .border_1()
      .border_color(border)
      .bg(bg)
      .text_color(t.text().hsla())
      .text_size(px(t.font_size(Size::Xs)))
      .font_weight(FontWeight::SEMIBOLD)
      .child(self.key)
      .probe("Kbd")
  }
}