introduce typography system and motion module

crates/ui/src/notification.rs

@@ -5,19 +5,19 @@ use std::time::Duration;
 
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    Anchor, Animation, AnimationExt, AnyElement, App, AppContext, ClickEvent, Context,
-    DismissEvent, ElementId, Entity, EventEmitter, InteractiveElement as _, IntoElement,
-    ParentElement as _, Render, SharedString, StatefulInteractiveElement, StyleRefinement, Styled,
-    Subscription, Window, div, px, relative,
+    Anchor, AnimationExt, AnyElement, App, AppContext, ClickEvent, Context, DismissEvent,
+    ElementId, Entity, EventEmitter, InteractiveElement as _, IntoElement, ParentElement as _,
+    Render, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Subscription,
+    Window, div, px, relative,
 };
 use gpui_base::{
     Toast as BaseToast, ToastManager, ToastMotion, ToastOptions, ToastStack, ToastStackState,
     ToastTransitionStatus,
 };
-use theme::ActiveTheme;
+use theme::{ActiveTheme, TextStyle, Typeset as _};
 
-use crate::animation::cubic_bezier;
 use crate::button::{Button, ButtonVariants as _};
+use crate::motion::NOTIFICATION_IN;
 use crate::{Icon, IconName, Sizable as _, Size, StyledExt, h_flex, v_flex};
 
 /// How often the notification lifecycle clock is sampled.
@@ -312,7 +312,7 @@ impl Render for Notification {
                 this.shadow(theme::surface_shadows())
             })
             .p_2()
-            .gap_2()
+            .gap(px(theme::SPACE))
             .justify_start()
             .items_start()
             .when(only_message, |this| this.items_center())
@@ -326,12 +326,12 @@ impl Render for Notification {
                     .gap_1()
                     .overflow_hidden()
                     .when_some(self.title.clone(), |this, title| {
-                        this.child(h_flex().h_5().text_sm().font_semibold().child(title))
+                        this.child(h_flex().h_5().text_style(TextStyle::Headline).child(title))
                     })
                     .when_some(self.message.clone(), |this, message| {
                         this.child(
                             div()
-                                .text_sm()
+                                .text_style(TextStyle::Callout)
                                 .when(has_title, |this| this.text_color(cx.theme().text_muted))
                                 .line_height(relative(1.3))
                                 .child(message),
@@ -339,7 +339,7 @@ impl Render for Notification {
                     })
                     .when_some(content, |this, content| this.child(content))
                     .when_some(action, |this, action| {
-                        this.gap_2().child(
+                        this.gap(px(theme::SPACE)).child(
                             h_flex()
                                 .mt_2()
                                 .w_full()
@@ -379,8 +379,7 @@ impl Render for Notification {
             }))
             .with_animation(
                 ElementId::NamedInteger("slide-down".into(), closing as u64),
-                Animation::new(Duration::from_secs_f64(0.25))
-                    .with_easing(cubic_bezier(0.4, 0., 0.2, 1.)),
+                NOTIFICATION_IN.animation(),
                 move |this, delta| {
                     if closing {
                         let opacity = 1. - delta;