Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish device code flow for copilot

Browse source
This commit is contained in:
Mikayla Maki 2023-03-30 16:50:33 -07:00
parent f5d4bcd934
commit afc9b832c8
4 changed files with 442 additions and 479 deletions
Download patch file Download diff file Expand all files Collapse all files

584
crates/copilot/src/sign_in.rs
View file

@ -4,6 +4,7 @@ use gpui::{
ViewContext, ViewHandle, WindowKind, WindowOptions, ViewContext, ViewHandle, WindowKind, WindowOptions,
}; };
use settings::Settings; use settings::Settings;
use theme::ui::modal;
#[derive(PartialEq, Eq, Debug, Clone)] #[derive(PartialEq, Eq, Debug, Clone)]
struct CopyUserCode; struct CopyUserCode;
@ -11,7 +12,7 @@ struct CopyUserCode;
#[derive(PartialEq, Eq, Debug, Clone)] #[derive(PartialEq, Eq, Debug, Clone)]
struct OpenGithub; struct OpenGithub;
const _COPILOT_SIGN_UP_URL: &'static str = "https://github.com/features/copilot"; const COPILOT_SIGN_UP_URL: &'static str = "https://github.com/features/copilot";
pub fn init(cx: &mut MutableAppContext) { pub fn init(cx: &mut MutableAppContext) {
let copilot = Copilot::global(cx).unwrap(); let copilot = Copilot::global(cx).unwrap();
@ -66,53 +67,60 @@ pub fn init(cx: &mut MutableAppContext) {
.detach(); .detach();
// Modal theming test: // Modal theming test:
// use gpui::geometry::vector::vec2f; use gpui::geometry::vector::vec2f;
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
// let window_options = WindowOptions {
// bounds: gpui::WindowBounds::Fixed(RectF::new(Default::default(), window_size)),
// titlebar: None,
// center: false,
// focus: false,
// kind: WindowKind::PopUp,
// is_movable: true,
// screen: None,
// };
// let (_, _view) = cx.add_window(window_options, |_cx| {
// CopilotCodeVerification::new(Status::SigningIn {
// prompt: Some(PromptUserDeviceFlow {
// user_code: "ABCD-1234".to_string(),
// verification_uri: "https://github.com/login/device".to_string(),
// }),
// })
// });
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions(); let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
// let window_options = WindowOptions { let window_options = WindowOptions {
// bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(window_size.x(), 0.), window_size)), bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(0., 0.), window_size)),
// titlebar: None, titlebar: None,
// center: false, center: false,
// focus: false, focus: false,
// kind: WindowKind::PopUp, kind: WindowKind::PopUp,
// is_movable: true, is_movable: true,
// screen: None, screen: None,
// }; };
// let (_, _view) = cx.add_window(window_options, |_cx| { let (_, _view) = cx.add_window(window_options, |_cx| {
// CopilotCodeVerification::new(Status::Authorized) CopilotCodeVerification::new(Status::Authorized)
// }); });
// let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions(); let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
// let window_options = WindowOptions { let window_options = WindowOptions {
// bounds: gpui::WindowBounds::Fixed(RectF::new(vec2f(0., window_size.y()), window_size)), bounds: gpui::WindowBounds::Fixed(RectF::new(
// titlebar: None, vec2f(window_size.x() + 10., 0.),
// center: false, window_size,
// focus: false, )),
// kind: WindowKind::PopUp, titlebar: None,
// is_movable: true, center: false,
// screen: None, focus: false,
// }; kind: WindowKind::PopUp,
// let (_, _view) = cx.add_window(window_options, |_cx| { is_movable: true,
// CopilotCodeVerification::new(Status::Unauthorized) screen: None,
// }); };
let (_, _view) = cx.add_window(window_options, |_cx| {
CopilotCodeVerification::new(Status::SigningIn {
prompt: Some(PromptUserDeviceFlow {
user_code: "ABCD-1234".to_string(),
verification_uri: "https://github.com/login/device".to_string(),
}),
})
});
let window_size = cx.global::<Settings>().theme.copilot.modal.dimensions();
let window_options = WindowOptions {
bounds: gpui::WindowBounds::Fixed(RectF::new(
vec2f((window_size.x() + 10.) * 2., 0.),
window_size,
)),
titlebar: None,
center: false,
focus: false,
kind: WindowKind::PopUp,
is_movable: true,
screen: None,
};
let (_, _view) = cx.add_window(window_options, |_cx| {
CopilotCodeVerification::new(Status::Unauthorized)
});
} }
pub struct CopilotCodeVerification { pub struct CopilotCodeVerification {
@ -139,151 +147,43 @@ impl CopilotCodeVerification {
.map(|item| item.text() == &data.user_code) .map(|item| item.text() == &data.user_code)
.unwrap_or(false); .unwrap_or(false);
Flex::column() let device_code_style = &style.auth.prompting.device_code;
.with_children([
MouseEventHandler::<Self>::new(0, cx, |state, _cx| { MouseEventHandler::<Self>::new(0, cx, |state, _cx| {
Flex::row() Flex::row()
.with_children([ .with_children([
Label::new(data.user_code.clone(), style.auth.device_code.clone()) Label::new(data.user_code.clone(), device_code_style.text.clone())
.aligned() .aligned()
.contained()
.with_style(style.auth.device_code_left_container)
.constrained()
.with_width(style.auth.device_code_left)
.boxed(),
Empty::new()
.constrained()
.with_width(1.)
.with_height(style.auth.device_code_seperator_height)
.contained()
.with_background_color(
style
.auth
.cta_button
.style_for(state, false)
.container
.border
.color,
)
.boxed(),
Label::new(
if copied { "Copied!" } else { "Copy" },
style.auth.cta_button.style_for(state, false).text.clone(),
)
.aligned()
.contained()
.with_style(style.auth.device_code_right_container)
.constrained()
.with_width(style.auth.device_code_right)
.boxed(),
])
.contained() .contained()
.with_style(style.auth.device_code_cta.style_for(state, false).container) .with_style(device_code_style.left_container)
.constrained() .constrained()
.with_width(style.auth.content_width) .with_width(device_code_style.left)
.boxed()
})
.on_click(gpui::MouseButton::Left, {
let user_code = data.user_code.clone();
move |_, cx| {
cx.platform()
.write_to_clipboard(ClipboardItem::new(user_code.clone()));
cx.notify();
}
})
.with_cursor_style(gpui::CursorStyle::PointingHand)
.boxed(),
Flex::column()
.with_children([
Label::new(
"Paste this code into GitHub after",
style.auth.hint.text.clone(),
)
.boxed(), .boxed(),
Label::new("clicking the button below.", style.auth.hint.text.clone()) Label::new(
.boxed(), if copied { "Copied!" } else { "Copy" },
]) device_code_style.cta.style_for(state, false).text.clone(),
.align_children_center() )
.contained()
.with_style(style.auth.hint.container.clone())
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.device_code_group)
.aligned()
.boxed()
}
fn render_not_authorized_warning(style: &theme::Copilot) -> ElementBox {
Flex::column()
.with_children([
Flex::column()
.with_children([
Label::new(
"You must have an active copilot",
style.auth.warning.text.to_owned(),
)
.aligned()
.boxed(),
Label::new(
"license to use it in Zed.",
style.auth.warning.text.to_owned(),
)
.aligned()
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.warning.container)
.boxed(),
Flex::column()
.with_children([
Label::new(
"Try connecting again once you",
style.auth.hint.text.to_owned(),
)
.aligned()
.boxed(),
Label::new(
"have activated a Copilot license.",
style.auth.hint.text.to_owned(),
)
.aligned()
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.not_authorized_hint)
.boxed(),
])
.align_children_center()
.boxed()
}
fn render_copilot_enabled(style: &theme::Copilot) -> ElementBox {
Flex::column()
.with_children([
Label::new(
"You can update your settings or",
style.auth.hint.text.clone(),
)
.aligned()
.boxed(),
Label::new(
"sign out from the Copilot menu in",
style.auth.hint.text.clone(),
)
.aligned()
.boxed(),
Label::new("the status bar.", style.auth.hint.text.clone())
.aligned() .aligned()
.contained()
.with_style(*device_code_style.right_container.style_for(state, false))
.constrained()
.with_width(device_code_style.right)
.boxed(), .boxed(),
]) ])
.align_children_center() .contained()
.contained() .with_style(device_code_style.cta.style_for(state, false).container)
.with_style(style.auth.enabled_hint) .boxed()
.boxed() })
.on_click(gpui::MouseButton::Left, {
let user_code = data.user_code.clone();
move |_, cx| {
cx.platform()
.write_to_clipboard(ClipboardItem::new(user_code.clone()));
cx.notify();
}
})
.with_cursor_style(gpui::CursorStyle::PointingHand)
.boxed()
} }
fn render_prompting_modal( fn render_prompting_modal(
@ -291,171 +191,172 @@ impl CopilotCodeVerification {
style: &theme::Copilot, style: &theme::Copilot,
cx: &mut gpui::RenderContext<Self>, cx: &mut gpui::RenderContext<Self>,
) -> ElementBox { ) -> ElementBox {
theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| { Flex::column()
Flex::column() .with_children([
.with_children([ Flex::column()
Flex::column() .with_children([
.with_children([ Label::new(
Flex::row() "Enable Copilot by connecting",
.with_children([ style.auth.prompting.subheading.text.clone(),
theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed() )
])
.boxed(),
Flex::column()
.with_children([
Label::new(
"Enable Copilot by connecting",
style.auth.enable_text.clone(),
)
.boxed(),
Label::new(
"your existing license.",
style.auth.enable_text.clone(),
)
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.enable_group.clone())
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.header_group)
.aligned() .aligned()
.boxed(), .boxed(),
Self::render_device_code(data, &style, cx), Label::new(
Flex::column() "your existing license.",
.with_child(theme::ui::cta_button_with_click( style.auth.prompting.subheading.text.clone(),
"Connect to GitHub", )
style.auth.content_width,
&style.auth.cta_button,
cx,
{
let verification_uri = data.verification_uri.clone();
move |_, cx| cx.platform().open_url(&verification_uri)
},
))
.align_children_center()
.contained()
.with_style(style.auth.github_group)
.aligned() .aligned()
.boxed(), .boxed(),
]) ])
.align_children_center() .align_children_center()
.constrained() .contained()
.with_width(style.auth.content_width) .with_style(style.auth.prompting.subheading.container)
.aligned() .boxed(),
.boxed() Self::render_device_code(data, &style, cx),
}) Flex::column()
.with_children([
Label::new(
"Paste this code into GitHub after",
style.auth.prompting.hint.text.clone(),
)
.aligned()
.boxed(),
Label::new(
"clicking the button below.",
style.auth.prompting.hint.text.clone(),
)
.aligned()
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.prompting.hint.container.clone())
.boxed(),
theme::ui::cta_button_with_click(
"Connect to GitHub",
style.auth.content_width,
&style.auth.cta_button,
cx,
{
let verification_uri = data.verification_uri.clone();
move |_, cx| cx.platform().open_url(&verification_uri)
},
)
.boxed(),
])
.align_children_center()
.boxed()
} }
fn render_enabled_modal( fn render_enabled_modal(
style: &theme::Copilot, style: &theme::Copilot,
cx: &mut gpui::RenderContext<Self>, cx: &mut gpui::RenderContext<Self>,
) -> ElementBox { ) -> ElementBox {
theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| { let enabled_style = &style.auth.authorized;
Flex::column() Flex::column()
.with_children([ .with_children([
Flex::column() Label::new("Copilot Enabled!", enabled_style.subheading.text.clone())
.with_children([ .contained()
Flex::row() .with_style(enabled_style.subheading.container)
.with_children([ .aligned()
theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed() .boxed(),
]) Flex::column()
.boxed(), .with_children([
Label::new("Copilot Enabled!", style.auth.enable_text.clone()).boxed(), Label::new(
]) "You can update your settings or",
.align_children_center() enabled_style.hint.text.clone(),
.contained() )
.with_style(style.auth.header_group)
.aligned() .aligned()
.boxed(), .boxed(),
Self::render_copilot_enabled(&style), Label::new(
Flex::column() "sign out from the Copilot menu in",
.with_child(theme::ui::cta_button_with_click( enabled_style.hint.text.clone(),
"Close", )
style.auth.content_width,
&style.auth.cta_button,
cx,
|_, cx| {
let window_id = cx.window_id();
cx.remove_window(window_id)
},
))
.align_children_center()
.contained()
.with_style(style.auth.github_group)
.aligned() .aligned()
.boxed(), .boxed(),
]) Label::new("the status bar.", enabled_style.hint.text.clone())
.align_children_center() .aligned()
.constrained() .boxed(),
.with_width(style.auth.content_width) ])
.aligned() .align_children_center()
.boxed() .contained()
}) .with_style(enabled_style.hint.container)
.boxed(),
theme::ui::cta_button_with_click(
"Done",
style.auth.content_width,
&style.auth.cta_button,
cx,
|_, cx| {
let window_id = cx.window_id();
cx.remove_window(window_id)
},
)
.boxed(),
])
.align_children_center()
.boxed()
} }
fn render_unauthorized_modal( fn render_unauthorized_modal(
style: &theme::Copilot, style: &theme::Copilot,
cx: &mut gpui::RenderContext<Self>, cx: &mut gpui::RenderContext<Self>,
) -> ElementBox { ) -> ElementBox {
theme::ui::modal("Connect Copilot to Zed", &style.modal, cx, |cx| { let unauthorized_style = &style.auth.not_authorized;
Flex::column()
.with_children([ Flex::column()
Flex::column() .with_children([
.with_children([ Flex::column()
Flex::row() .with_children([
.with_children([ Label::new(
theme::ui::svg(&style.auth.copilot_plus_zed_icon).boxed() "Enable Copilot by connecting",
]) unauthorized_style.subheading.text.clone(),
.boxed(), )
Flex::column()
.with_children([
Label::new(
"Enable Copilot by connecting",
style.auth.enable_text.clone(),
)
.boxed(),
Label::new(
"your existing license.",
style.auth.enable_text.clone(),
)
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.enable_group.clone())
.boxed(),
])
.align_children_center()
.contained()
.with_style(style.auth.header_group)
.aligned() .aligned()
.boxed(), .boxed(),
Self::render_not_authorized_warning(&style), Label::new(
Flex::column() "your existing license.",
.with_child(theme::ui::cta_button_with_click( unauthorized_style.subheading.text.clone(),
"Close", )
style.auth.content_width,
&style.auth.cta_button,
cx,
|_, cx| {
let window_id = cx.window_id();
cx.remove_window(window_id)
},
))
.align_children_center()
.contained()
.with_style(style.auth.github_group)
.aligned() .aligned()
.boxed(), .boxed(),
]) ])
.align_children_center() .align_children_center()
.constrained() .contained()
.with_width(style.auth.content_width) .with_style(unauthorized_style.subheading.container)
.aligned() .boxed(),
.boxed() Flex::column()
}) .with_children([
Label::new(
"You must have an active copilot",
unauthorized_style.warning.text.clone(),
)
.aligned()
.boxed(),
Label::new(
"license to use it in Zed.",
unauthorized_style.warning.text.clone(),
)
.aligned()
.boxed(),
])
.align_children_center()
.contained()
.with_style(unauthorized_style.warning.container)
.boxed(),
theme::ui::cta_button_with_click(
"Subscribe on GitHub",
style.auth.content_width,
&style.auth.cta_button,
cx,
|_, cx| {
let window_id = cx.window_id();
cx.remove_window(window_id);
cx.platform().open_url(COPILOT_SIGN_UP_URL)
},
)
.boxed(),
])
.align_children_center()
.boxed()
} }
} }
@ -478,13 +379,22 @@ impl View for CopilotCodeVerification {
fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox { fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox {
let style = cx.global::<Settings>().theme.clone(); let style = cx.global::<Settings>().theme.clone();
match &self.status {
Status::SigningIn { modal("Connect Copilot to Zed", &style.copilot.modal, cx, |cx| {
prompt: Some(prompt), Flex::column()
} => Self::render_prompting_modal(&prompt, &style.copilot, cx), .with_children([
Status::Unauthorized => Self::render_unauthorized_modal(&style.copilot, cx), theme::ui::icon(&style.copilot.auth.header).boxed(),
Status::Authorized => Self::render_enabled_modal(&style.copilot, cx), match &self.status {
_ => Empty::new().boxed(), Status::SigningIn {
} prompt: Some(prompt),
} => Self::render_prompting_modal(&prompt, &style.copilot, cx),
Status::Unauthorized => Self::render_unauthorized_modal(&style.copilot, cx),
Status::Authorized => Self::render_enabled_modal(&style.copilot, cx),
_ => Empty::new().boxed(),
},
])
.align_children_center()
.boxed()
})
} }
} }

49
crates/theme/src/theme.rs
View file

@ -126,28 +126,43 @@ pub struct Copilot {
#[derive(Deserialize, Default, Clone)] #[derive(Deserialize, Default, Clone)]
pub struct CopilotAuth { pub struct CopilotAuth {
pub enable_group: ContainerStyle,
pub enable_text: TextStyle,
pub instruction_text: TextStyle,
pub cta_button: ButtonStyle,
pub content_width: f32, pub content_width: f32,
pub copilot_plus_zed_icon: SvgStyle, pub prompting: CopilotAuthPrompting,
pub device_code_group: ContainerStyle, pub not_authorized: CopilotAuthNotAuthorized,
pub github_group: ContainerStyle, pub authorized: CopilotAuthAuthorized,
pub header_group: ContainerStyle, pub cta_button: ButtonStyle,
pub device_code: TextStyle, pub header: IconStyle,
pub device_code_cta: ButtonStyle, }
pub device_code_left: f32,
pub device_code_left_container: ContainerStyle, #[derive(Deserialize, Default, Clone)]
pub device_code_right: f32, pub struct CopilotAuthPrompting {
pub device_code_right_container: ContainerStyle, pub subheading: ContainedText,
pub device_code_seperator_height: f32,
pub hint: ContainedText, pub hint: ContainedText,
pub enabled_hint: ContainerStyle, pub device_code: DeviceCode,
pub not_authorized_hint: ContainerStyle, }
#[derive(Deserialize, Default, Clone)]
pub struct DeviceCode {
pub text: TextStyle,
pub cta: ButtonStyle,
pub left: f32,
pub left_container: ContainerStyle,
pub right: f32,
pub right_container: Interactive<ContainerStyle>,
}
#[derive(Deserialize, Default, Clone)]
pub struct CopilotAuthNotAuthorized {
pub subheading: ContainedText,
pub warning: ContainedText, pub warning: ContainedText,
} }
#[derive(Deserialize, Default, Clone)]
pub struct CopilotAuthAuthorized {
pub subheading: ContainedText,
pub hint: ContainedText,
}
#[derive(Deserialize, Default)] #[derive(Deserialize, Default)]
pub struct ContactsPopover { pub struct ContactsPopover {
#[serde(flatten)] #[serde(flatten)]

24
crates/theme/src/ui.rs
View file

@ -186,6 +186,7 @@ where
cta_button_with_click(label, max_width, style, cx, move |_, cx| { cta_button_with_click(label, max_width, style, cx, move |_, cx| {
cx.dispatch_action(action.clone()) cx.dispatch_action(action.clone())
}) })
.boxed()
} }
pub fn cta_button_with_click<L, V, F>( pub fn cta_button_with_click<L, V, F>(
@ -194,7 +195,7 @@ pub fn cta_button_with_click<L, V, F>(
style: &ButtonStyle, style: &ButtonStyle,
cx: &mut RenderContext<V>, cx: &mut RenderContext<V>,
f: F, f: F,
) -> ElementBox ) -> MouseEventHandler<F>
where where
L: Into<Cow<'static, str>>, L: Into<Cow<'static, str>>,
V: View, V: View,
@ -212,7 +213,6 @@ where
}) })
.on_click(MouseButton::Left, f) .on_click(MouseButton::Left, f)
.with_cursor_style(gpui::CursorStyle::PointingHand) .with_cursor_style(gpui::CursorStyle::PointingHand)
.boxed()
} }
#[derive(Clone, Deserialize, Default)] #[derive(Clone, Deserialize, Default)]
@ -241,7 +241,8 @@ where
I: Into<Cow<'static, str>>, I: Into<Cow<'static, str>>,
F: FnOnce(&mut gpui::RenderContext<V>) -> ElementBox, F: FnOnce(&mut gpui::RenderContext<V>) -> ElementBox,
{ {
let active = cx.window_is_active(cx.window_id()); const TITLEBAR_HEIGHT: f32 = 28.;
// let active = cx.window_is_active(cx.window_id());
Flex::column() Flex::column()
.with_child( .with_child(
@ -251,13 +252,13 @@ where
title, title,
style style
.title_text .title_text
.style_for(&mut MouseState::default(), active) .style_for(&mut MouseState::default(), false)
.clone(), .clone(),
) )
.boxed(), .boxed(),
// FIXME: Get a better tag type // FIXME: Get a better tag type
MouseEventHandler::<V>::new(999999, cx, |state, _cx| { MouseEventHandler::<V>::new(999999, cx, |state, _cx| {
let style = style.close_icon.style_for(state, active); let style = style.close_icon.style_for(state, false);
icon(style).boxed() icon(style).boxed()
}) })
.on_click(gpui::MouseButton::Left, move |_, cx| { .on_click(gpui::MouseButton::Left, move |_, cx| {
@ -271,11 +272,18 @@ where
]) ])
.contained() .contained()
.with_style(style.titlebar) .with_style(style.titlebar)
.constrained()
.with_height(TITLEBAR_HEIGHT)
.boxed(),
)
.with_child(
Container::new(build_modal(cx))
.with_style(style.container)
.constrained()
.with_width(style.dimensions().x())
.with_height(style.dimensions().y() - TITLEBAR_HEIGHT)
.boxed(), .boxed(),
) )
.with_child(build_modal(cx))
.contained()
.with_style(style.container)
.constrained() .constrained()
.with_height(style.dimensions().y()) .with_height(style.dimensions().y())
.boxed() .boxed()

264
styles/src/styleTree/copilot.ts
View file

@ -3,17 +3,19 @@ import { background, border, foreground, svg, text } from "./components";
export default function copilot(colorScheme: ColorScheme) { export default function copilot(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.middle;
let content_width = 304; let content_width = 264;
let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
background: background(layer), background: background(layer),
border: border(layer, "active"), border: border(layer, "default"),
cornerRadius: 4, cornerRadius: 4,
margin: { margin: {
top: 4, top: 4,
bottom: 4, bottom: 4,
left: 8,
right: 8
}, },
padding: { padding: {
top: 3, top: 3,
@ -42,155 +44,183 @@ export default function copilot(colorScheme: ColorScheme) {
}, },
modal: { modal: {
titleText: { titleText: {
...text(layer, "sans", { size: "md", color: background(layer, "default") }), ...text(layer, "sans", { size: "xs", "weight": "bold" })
active: {
...text(layer, "sans", { size: "md" }),
}
}, },
titlebar: { titlebar: {
background: background(colorScheme.lowest),
border: border(layer, "active"), border: border(layer, "active"),
padding: { padding: {
top: 8, top: 4,
bottom: 8, bottom: 4,
left: 8, left: 8,
right: 8, right: 8,
},
margin: {
top: 0,
left: 0,
right: 0,
bottom: 16
} }
}, },
container: { container: {
background: background(colorScheme.highest), background: background(colorScheme.lowest),
padding: {
top: 0,
left: 0,
right: 0,
bottom: 8,
}
}, },
closeIcon: { closeIcon: {
icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16), icon: svg(foreground(layer, "variant"), "icons/x_mark_8.svg", 8, 8),
container: { container: {
cornerRadius: 2, cornerRadius: 2,
padding: { padding: {
top: 3, top: 4,
bottom: 3, bottom: 4,
left: 7, left: 4,
right: 0, right: 4,
},
margin: {
right: 0
} }
}, },
active: { hover: {
icon: svg(foreground(colorScheme.lowest, "warning"), "icons/x_mark_16.svg", 16, 16), icon: svg(foreground(layer, "on"), "icons/x_mark_8.svg", 8, 8),
}, },
hoverAndActive: { clicked: {
icon: svg(foreground(layer, "on", "hovered"), "icons/x_mark_16.svg", 16, 16), icon: svg(foreground(layer, "base"), "icons/x_mark_8.svg", 8, 8),
},
clickedAndactive: {
icon: svg(foreground(layer, "on", "pressed"), "icons/x_mark_16.svg", 16, 16),
} }
}, },
dimensions: { dimensions: {
width: 400, width: 280,
height: 500, height: 280,
}, },
}, },
auth: { auth: {
content_width, content_width,
headerGroup: { ctaButton,
margin: {
top: 5,
bottom: 5,
left: 0,
right: 0
}
},
copilotPlusZedIcon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 32, 92),
enableText: text(layer, "sans", { size: "md" }),
enableGroup: {
margin: {
top: 5,
bottom: 5,
left: 0,
right: 0
}
},
instructionText: text(layer, "sans"), header: {
icon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 92, 32),
deviceCodeGroup: { container: {
margin: { margin: {
top: 20, top: 35,
bottom: 20, bottom: 5,
left: 0, left: 0,
right: 0 right: 0
} }
},
deviceCode:
text(layer, "mono", { size: "md" }),
deviceCodeCta: {
...ctaButton,
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0,
}, },
}, },
deviceCodeLeft: content_width * 2 / 3,
deviceCodeLeftContainer: { prompting: {
padding: { subheading: {
top: 3, ...text(layer, "sans", { size: "xs" }),
bottom: 3, margin: {
left: 0, top: 6,
right: 0, bottom: 12,
left: 0,
right: 0
}
},
hint: {
...text(layer, "sans", { size: "xs", color: "#838994" }),
margin: {
top: 6,
bottom: 2
}
},
deviceCode: {
text:
text(layer, "mono", { size: "sm" }),
cta: {
...ctaButton,
background: background(colorScheme.lowest),
border: border(colorScheme.lowest, "inverted"),
padding: {
top: 0,
bottom: 0,
left: 16,
right: 16,
},
margin: {
left: 16,
right: 16,
}
},
left: content_width / 2,
leftContainer: {
padding: {
top: 3,
bottom: 3,
left: 0,
right: 6,
},
},
right: content_width * 1 / 3,
rightContainer: {
border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }),
padding: {
top: 3,
bottom: 5,
left: 8,
right: 0,
},
hover: {
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
},
}
}, },
}, },
deviceCodeRight: content_width * 1 / 3,
deviceCodeRightContainer: { notAuthorized: {
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }), subheading: {
padding: { ...text(layer, "sans", { size: "xs" }),
top: 3,
bottom: 5, margin: {
left: 0, top: 16,
right: 0, bottom: 16,
left: 0,
right: 0
}
},
warning: {
...text(layer, "sans", { size: "xs", color: foreground(layer, "warning") }),
border: border(layer, "warning"),
background: background(layer, "warning"),
cornerRadius: 2,
padding: {
top: 4,
left: 4,
bottom: 4,
right: 4,
},
margin: {
bottom: 16,
left: 8,
right: 8
}
}, },
}, },
deviceCodeSeperatorHeight: 0,
hint: {
...text(layer, "sans", { size: "xs" }),
margin: {
top: -5,
}
},
enabledHint: {
margin: {
top: 10,
bottom: 10
}
},
notAuthorizedHint: {
margin: {
top: 10,
bottom: 10
}
},
warning: { authorized: {
...text(layer, "sans", { size: "md", color: foreground(layer, "warning") }), subheading: {
border: border(layer, "warning"), ...text(layer, "sans", { size: "xs" }),
background_color: background(layer, "warning"),
cornerRadius: 2,
},
githubGroup: { margin: {
margin: { top: 16,
top: 3, bottom: 16
bottom: 3, }
left: 0, },
right: 0
}
},
ctaButton hint: {
...text(layer, "sans", { size: "xs", color: "#838994" }),
margin: {
top: 24,
bottom: 4
}
},
},
} }
} }
} }