Update SysUI typography for Jelly.

This CL updates SysUI typography when Jelly is enabled. When Jelly is
not enabled, behavior is unchanged.

Note that this CL removes types that were created as placeholders until
proper typography tokens were available.

Tote w/o Jelly #1: http://shortn/_3S2dOHRylA
Tote w/ Jelly #1:  http://shortn/_Td7wT6U4TG
Tote w/o Jelly #2: http://shortn/_rdti9JUwfl
Tote w/ Jelly #2:  http://shortn/_5tawKjwDkg

Bug: b:273982593
Change-Id: I198c9574826963d508b0d5763601d9b414d98c1f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4346997
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Reviewed-by: Sean Kau <skau@chromium.org>
Commit-Queue: David Black <dmblack@google.com>
Cr-Commit-Position: refs/heads/main@{#1118720}

ash/app_list/views/app_list_bubble_apps_page.cc

@@ -31,6 +31,7 @@
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/icon_button.h"
+#include "ash/style/typography.h"
 #include "base/check.h"
 #include "base/functional/bind.h"
 #include "base/metrics/histogram_functions.h"
@@ -677,8 +678,7 @@ void AppListBubbleAppsPage::InitContinueLabelContainer(
   continue_label_ =
       continue_label_container_->AddChildView(std::make_unique<views::Label>(
           l10n_util::GetStringUTF16(IDS_ASH_LAUNCHER_CONTINUE_SECTION_LABEL)));
-  bubble_utils::ApplyStyle(continue_label_,
-                           bubble_utils::TypographyStyle::kAnnotation1,
+  bubble_utils::ApplyStyle(continue_label_, TypographyToken::kCrosAnnotation1,
                            kColorAshTextColorSecondary);
   continue_label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
 

ash/app_list/views/app_list_toast_view.cc

@@ -16,6 +16,7 @@
 #include "ash/style/dark_light_mode_controller_impl.h"
 #include "ash/style/icon_button.h"
 #include "ash/style/pill_button.h"
+#include "ash/style/typography.h"
 #include "components/vector_icons/vector_icons.h"
 #include "ui/color/color_id.h"
 #include "ui/compositor/layer.h"
@@ -201,7 +202,7 @@ AppListToastView::AppListToastView(const std::u16string title) {
 
   title_label_ =
       label_container_->AddChildView(std::make_unique<views::Label>(title));
-  bubble_utils::ApplyStyle(title_label_, bubble_utils::TypographyStyle::kBody2);
+  bubble_utils::ApplyStyle(title_label_, TypographyToken::kCrosBody2);
   title_label_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
   title_label_->SetMultiLine(true);
   // TODO(crbug/682266): This is a temporary fix for the issue where the multi
@@ -281,8 +282,7 @@ void AppListToastView::SetSubtitle(const std::u16string subtitle) {
 
   subtitle_label_ =
       label_container_->AddChildView(std::make_unique<views::Label>(subtitle));
-  bubble_utils::ApplyStyle(subtitle_label_,
-                           bubble_utils::TypographyStyle::kAnnotation1,
+  bubble_utils::ApplyStyle(subtitle_label_, TypographyToken::kCrosAnnotation1,
                            kColorAshTextColorSecondary);
   subtitle_label_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
 }

ash/app_list/views/continue_task_view.cc

@@ -21,6 +21,7 @@
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/style_util.h"
+#include "ash/style/typography.h"
 #include "base/functional/bind.h"
 #include "base/strings/string_util.h"
 #include "extensions/common/constants.h"
@@ -122,15 +123,14 @@ ContinueTaskView::ContinueTaskView(AppListViewDelegate* view_delegate,
 
   title_ = label_container->AddChildView(
       std::make_unique<views::Label>(std::u16string()));
-  bubble_utils::ApplyStyle(title_, bubble_utils::TypographyStyle::kBody1);
+  bubble_utils::ApplyStyle(title_, TypographyToken::kCrosBody1);
   title_->SetAccessibleName(std::u16string());
   title_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
   title_->SetElideBehavior(gfx::ElideBehavior::ELIDE_TAIL);
 
   subtitle_ = label_container->AddChildView(
       std::make_unique<views::Label>(std::u16string()));
-  bubble_utils::ApplyStyle(subtitle_,
-                           bubble_utils::TypographyStyle::kAnnotation1,
+  bubble_utils::ApplyStyle(subtitle_, TypographyToken::kCrosAnnotation1,
                            kColorAshTextColorSecondary);
   subtitle_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
   subtitle_->SetElideBehavior(gfx::ElideBehavior::ELIDE_MIDDLE);

ash/bubble/bubble_utils.cc

@@ -10,7 +10,9 @@
 #include "ash/capture_mode/capture_mode_util.h"
 #include "ash/public/cpp/shell_window_ids.h"
 #include "ash/root_window_controller.h"
+#include "ash/style/typography.h"
 #include "base/check.h"
+#include "chromeos/constants/chromeos_features.h"
 #include "ui/aura/window.h"
 #include "ui/events/event.h"
 #include "ui/events/types/event_type.h"
@@ -64,48 +66,56 @@ bool ShouldCloseBubbleForEvent(const ui::LocatedEvent& event) {
 }
 
 void ApplyStyle(views::Label* label,
-                TypographyStyle style,
+                TypographyToken style,
                 ui::ColorId text_color_id) {
   label->SetAutoColorReadabilityEnabled(false);
   label->SetEnabledColorId(text_color_id);
 
+  if (chromeos::features::IsJellyEnabled()) {
+    TypographyProvider::Get()->StyleLabel(style, *label);
+    return;
+  }
+
   switch (style) {
-    case TypographyStyle::kAnnotation1:
+    case TypographyToken::kCrosAnnotation1:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 12,
                                        gfx::Font::Weight::NORMAL));
       break;
-    case TypographyStyle::kAnnotation2:
+    case TypographyToken::kCrosAnnotation2:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 11,
                                        gfx::Font::Weight::NORMAL));
       break;
-    case TypographyStyle::kBody1:
+    case TypographyToken::kCrosBody1:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 14,
                                        gfx::Font::Weight::NORMAL));
       break;
-    case TypographyStyle::kBody2:
+    case TypographyToken::kCrosBody2:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 13,
                                        gfx::Font::Weight::NORMAL));
       break;
-    case TypographyStyle::kButton1:
+    case TypographyToken::kCrosButton1:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 14,
                                        gfx::Font::Weight::MEDIUM));
       break;
-    case TypographyStyle::kButton2:
+    case TypographyToken::kCrosButton2:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 13,
                                        gfx::Font::Weight::MEDIUM));
       break;
-    case TypographyStyle::kLabel1:
+    case TypographyToken::kCrosLabel1:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 10,
                                        gfx::Font::Weight::MEDIUM));
       break;
-    case TypographyStyle::kTitle1:
+    case TypographyToken::kCrosTitle1:
       label->SetFontList(gfx::FontList({"Roboto"}, gfx::Font::NORMAL, 16,
                                        gfx::Font::Weight::MEDIUM));
       break;
+    default:
+      NOTREACHED();
+      break;
   }
 }
 
-std::unique_ptr<views::Label> CreateLabel(TypographyStyle style,
+std::unique_ptr<views::Label> CreateLabel(TypographyToken style,
                                           const std::u16string& text,
                                           ui::ColorId text_color_id) {
   auto label = std::make_unique<views::Label>(text);

ash/bubble/bubble_utils.h

@@ -22,7 +22,11 @@ namespace views {
 class Label;
 }  // namespace views
 
-namespace ash::bubble_utils {
+namespace ash {
+
+enum class TypographyToken;
+
+namespace bubble_utils {
 
 // Returns false if `event` should not close a bubble. Returns true if `event`
 // should close a bubble, or if more processing is required. Callers may also
@@ -30,33 +34,21 @@ namespace ash::bubble_utils {
 // bubble will close and immediately reopen).
 ASH_EXPORT bool ShouldCloseBubbleForEvent(const ui::LocatedEvent& event);
 
-// Enumeration of supported typography styles.
-// See "Typography" tab in go/cros-tokens.
-enum class TypographyStyle {
-  kAnnotation1,
-  kAnnotation2,
-  kBody1,
-  kBody2,
-  kButton1,
-  kButton2,
-  kLabel1,
-  kTitle1,
-};
-
 // Applies the specified `style` and `text_color` to the given `label`.
 ASH_EXPORT void ApplyStyle(
     views::Label* label,
-    TypographyStyle style,
+    TypographyToken style,
     ui::ColorId text_color_id = kColorAshTextColorPrimary);
 
 // Creates a label with optional `text` and `text_color` matching the specified
 // `style`. The label will paint correctly even if it is not added to the view
 // hierarchy.
 std::unique_ptr<views::Label> CreateLabel(
-    TypographyStyle style,
+    TypographyToken style,
     const std::u16string& text = std::u16string(),
     ui::ColorId text_color_id = kColorAshTextColorPrimary);
 
-}  // namespace ash::bubble_utils
+}  // namespace bubble_utils
+}  // namespace ash
 
 #endif  // ASH_BUBBLE_BUBBLE_UTILS_H_

ash/system/bluetooth/bluetooth_detailed_view_impl.cc

@@ -13,6 +13,7 @@
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/rounded_container.h"
+#include "ash/style/typography.h"
 #include "ash/system/bluetooth/bluetooth_device_list_item_view.h"
 #include "ash/system/model/system_tray_model.h"
 #include "ash/system/tray/detailed_view_delegate.h"
@@ -112,7 +113,7 @@ views::View* BluetoothDetailedViewImpl::AddDeviceListSubHeader(
   auto header = std::make_unique<views::BoxLayoutView>();
   header->SetInsideBorderInsets(kSubHeaderInsets);
   std::unique_ptr<views::Label> label = bubble_utils::CreateLabel(
-      bubble_utils::TypographyStyle::kBody2, l10n_util::GetStringUTF16(text_id),
+      TypographyToken::kCrosBody2, l10n_util::GetStringUTF16(text_id),
       cros_tokens::kColorSecondary);
   label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   label->SetSubpixelRenderingEnabled(false);

ash/system/cast/cast_zero_state_view.cc

@@ -11,6 +11,7 @@
 #include "ash/public/cpp/style/dark_light_mode_controller.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/rounded_container.h"
+#include "ash/style/typography.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/models/image_model.h"
 #include "ui/chromeos/styles/cros_tokens_color_mappings.h"
@@ -52,14 +53,14 @@ CastZeroStateView::CastZeroStateView() {
 
   Label* title = container->AddChildView(std::make_unique<Label>(
       l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_CAST_ZERO_STATE_TITLE)));
-  bubble_utils::ApplyStyle(title, bubble_utils::TypographyStyle::kTitle1);
+  bubble_utils::ApplyStyle(title, TypographyToken::kCrosTitle1);
   title->SetEnabledColorId(cros_tokens::kCrosSysOnSurface);
   title->SetProperty(views::kMarginsKey, gfx::Insets::TLBR(32, 0, 0, 0));
 
   Label* subtitle = container->AddChildView(std::make_unique<Label>(
       l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_CAST_ZERO_STATE_SUBTITLE)));
   subtitle->SetMultiLine(true);
-  bubble_utils::ApplyStyle(subtitle, bubble_utils::TypographyStyle::kBody1);
+  bubble_utils::ApplyStyle(subtitle, TypographyToken::kCrosBody1);
   subtitle->SetEnabledColorId(cros_tokens::kTextColorSecondary);
   subtitle->SetProperty(views::kMarginsKey, gfx::Insets::TLBR(8, 0, 0, 0));
 }

ash/system/holding_space/holding_space_drag_util.cc

@@ -14,6 +14,7 @@
 #include "ash/public/cpp/style/scoped_light_mode_as_default.h"
 #include "ash/style/ash_color_id.h"
 #include "ash/style/dark_light_mode_controller_impl.h"
+#include "ash/style/typography.h"
 #include "ash/system/holding_space/holding_space_item_view.h"
 #include "base/containers/adapters.h"
 #include "base/i18n/rtl.h"
@@ -230,7 +231,7 @@ class DragImageItemChipView : public DragImageItemView {
     // Label.
     ScopedLightModeAsDefault scoped_light_mode;
     auto* label = AddChildView(bubble_utils::CreateLabel(
-        bubble_utils::TypographyStyle::kBody2, item->GetText()));
+        TypographyToken::kCrosBody2, item->GetText()));
     // Label created via `bubble_utils::CreateLabel()` has an enabled color id,
     // which is resolved when the label is added to the views hierarchy. But
     // `this` is never added to widget, enabled color id will never be resolved.
@@ -328,8 +329,8 @@ class DragImageOverflowBadge : public views::View {
         views::BoxLayout::MainAxisAlignment::kCenter);
 
     // Label.
-    auto* label = AddChildView(
-        bubble_utils::CreateLabel(bubble_utils::TypographyStyle::kButton1));
+    auto* label =
+        AddChildView(bubble_utils::CreateLabel(TypographyToken::kCrosButton1));
     // `this` is never added to widget, enabled color id will never be resolved.
     // Thus we need to manually resolve it and set the color as the enabled
     // color for the label.

ash/system/holding_space/holding_space_item_chip_view.cc

@@ -19,6 +19,7 @@
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_id.h"
 #include "ash/style/dark_light_mode_controller_impl.h"
+#include "ash/style/typography.h"
 #include "ash/system/holding_space/holding_space_item_view.h"
 #include "ash/system/holding_space/holding_space_progress_indicator_util.h"
 #include "ash/system/holding_space/holding_space_view_delegate.h"
@@ -120,7 +121,7 @@ class PaintCallbackLabel : public views::Label {
     layer()->SetFillsBoundsOpaquely(fills_bounds_opaquely);
   }
 
-  void SetStyle(bubble_utils::TypographyStyle style) {
+  void SetStyle(TypographyToken style) {
     bubble_utils::ApplyStyle(this, style);
   }
 
@@ -141,7 +142,7 @@ class PaintCallbackLabel : public views::Label {
 
 BEGIN_VIEW_BUILDER(/*no export*/, PaintCallbackLabel, views::Label)
 VIEW_BUILDER_PROPERTY(PaintCallbackLabel::Callback, Callback)
-VIEW_BUILDER_PROPERTY(bubble_utils::TypographyStyle, Style)
+VIEW_BUILDER_PROPERTY(TypographyToken, Style)
 VIEW_BUILDER_PROPERTY(bool, PaintToLayer)
 VIEW_BUILDER_PROPERTY(bool, ViewAccessibilityIsIgnored)
 END_VIEW_BUILDER
@@ -317,18 +318,17 @@ HoldingSpaceItemChipView::HoldingSpaceItemChipView(
                       .SetMainAxisAlignment(MainAxisAlignment::kCenter)
                       .SetCrossAxisAlignment(CrossAxisAlignment::kStretch)
                       .SetInsideBorderInsets(kLabelMargins)
-                      .AddChild(
-                          CreateLabelBuilder()
-                              .CopyAddressTo(&primary_label_)
-                              .SetID(kHoldingSpaceItemPrimaryChipLabelId)
-                              .SetStyle(bubble_utils::TypographyStyle::kBody2)
-                              .SetElideBehavior(gfx::ELIDE_MIDDLE)
-                              .SetCallback(paint_label_mask_callback))
+                      .AddChild(CreateLabelBuilder()
+                                    .CopyAddressTo(&primary_label_)
+                                    .SetID(kHoldingSpaceItemPrimaryChipLabelId)
+                                    .SetStyle(TypographyToken::kCrosBody2)
+                                    .SetElideBehavior(gfx::ELIDE_MIDDLE)
+                                    .SetCallback(paint_label_mask_callback))
                       .AddChild(
                           CreateLabelBuilder()
                               .CopyAddressTo(&secondary_label_)
                               .SetID(kHoldingSpaceItemSecondaryChipLabelId)
-                              .SetStyle(bubble_utils::TypographyStyle::kLabel1)
+                              .SetStyle(TypographyToken::kCrosLabel1)
                               .SetElideBehavior(gfx::FADE_TAIL)
                               .SetCallback(paint_label_mask_callback)))
               .AddChild(views::Builder<views::BoxLayoutView>()

ash/system/holding_space/holding_space_ui.cc

@@ -7,41 +7,40 @@
 #include "ash/bubble/bubble_utils.h"
 #include "ash/constants/ash_features.h"
 #include "ash/style/ash_color_id.h"
+#include "ash/style/typography.h"
 #include "ui/base/l10n/l10n_util.h"
 
 namespace ash::holding_space_ui {
 
 views::Builder<views::Label> CreateTopLevelBubbleHeaderLabel(int message_id) {
-  return views::Builder<views::Label>(
-      bubble_utils::CreateLabel(bubble_utils::TypographyStyle::kTitle1,
-                                l10n_util::GetStringUTF16(message_id)));
+  return views::Builder<views::Label>(bubble_utils::CreateLabel(
+      TypographyToken::kCrosTitle1, l10n_util::GetStringUTF16(message_id)));
 }
 
 views::Builder<views::Label> CreateSectionHeaderLabel(int message_id) {
-  return views::Builder<views::Label>(
-      bubble_utils::CreateLabel(features::IsHoldingSpaceRefreshEnabled()
-                                    ? bubble_utils::TypographyStyle::kButton1
-                                    : bubble_utils::TypographyStyle::kTitle1,
-                                l10n_util::GetStringUTF16(message_id)));
+  return views::Builder<views::Label>(bubble_utils::CreateLabel(
+      features::IsHoldingSpaceRefreshEnabled() ? TypographyToken::kCrosButton1
+                                               : TypographyToken::kCrosTitle1,
+      l10n_util::GetStringUTF16(message_id)));
 }
 
 views::Builder<views::Label> CreateSuggestionsSectionHeaderLabel(
     int message_id) {
   return views::Builder<views::Label>(bubble_utils::CreateLabel(
-      bubble_utils::TypographyStyle::kButton2,
-      l10n_util::GetStringUTF16(message_id), kColorAshTextColorSecondary));
+      TypographyToken::kCrosButton2, l10n_util::GetStringUTF16(message_id),
+      kColorAshTextColorSecondary));
 }
 
 views::Builder<views::Label> CreateBubblePlaceholderLabel(int message_id) {
   return views::Builder<views::Label>(bubble_utils::CreateLabel(
-      bubble_utils::TypographyStyle::kTitle1,
-      l10n_util::GetStringUTF16(message_id), kColorAshTextColorSecondary));
+      TypographyToken::kCrosTitle1, l10n_util::GetStringUTF16(message_id),
+      kColorAshTextColorSecondary));
 }
 
 views::Builder<views::Label> CreateSectionPlaceholderLabel(
     const std::u16string& text) {
   return views::Builder<views::Label>(
-      bubble_utils::CreateLabel(bubble_utils::TypographyStyle::kBody1, text,
+      bubble_utils::CreateLabel(TypographyToken::kCrosBody1, text,
                                 features::IsHoldingSpaceSuggestionsEnabled()
                                     ? kColorAshTextColorSecondary
                                     : kColorAshTextColorPrimary));

ash/system/holding_space/pinned_files_section.cc

@@ -19,6 +19,7 @@
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/style_util.h"
+#include "ash/style/typography.h"
 #include "ash/system/holding_space/holding_space_item_chip_view.h"
 #include "ash/system/holding_space/holding_space_ui.h"
 #include "ash/system/holding_space/holding_space_view_delegate.h"
@@ -149,8 +150,8 @@ class FilesAppChip : public views::Button {
                                          gfx::kPlaceholderColor));
 
     // Label.
-    auto* label = AddChildView(
-        bubble_utils::CreateLabel(bubble_utils::TypographyStyle::kBody2));
+    auto* label =
+        AddChildView(bubble_utils::CreateLabel(TypographyToken::kCrosBody2));
     label->SetText(l10n_util::GetStringUTF16(
         IDS_ASH_HOLDING_SPACE_PINNED_FILES_APP_CHIP_TEXT));
     layout->SetFlexForView(label, 1);

ash/system/time/calendar_event_list_item_view_jelly.cc

@@ -14,6 +14,7 @@
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/pill_button.h"
 #include "ash/style/style_util.h"
+#include "ash/style/typography.h"
 #include "ash/system/model/system_tray_model.h"
 #include "ash/system/time/calendar_metrics.h"
 #include "ash/system/time/calendar_utils.h"
@@ -100,7 +101,7 @@ views::Builder<views::Label> CreateSummaryLabel(
     const int& fixed_width) {
   return views::Builder<views::Label>(
              bubble_utils::CreateLabel(
-                 bubble_utils::TypographyStyle::kAnnotation1,
+                 TypographyToken::kCrosAnnotation1,
                  event_summary.empty()
                      ? l10n_util::GetStringUTF16(IDS_ASH_CALENDAR_NO_TITLE)
                      : base::UTF8ToUTF16(event_summary)))
@@ -121,9 +122,8 @@ views::Builder<views::Label> CreateTimeLabel(
     const std::u16string& title,
     const std::u16string& tooltip_text) {
   return views::Builder<views::Label>(
-             bubble_utils::CreateLabel(
-                 bubble_utils::TypographyStyle::kAnnotation2, title,
-                 cros_tokens::kColorSecondary))
+             bubble_utils::CreateLabel(TypographyToken::kCrosAnnotation2, title,
+                                       cros_tokens::kColorSecondary))
       .SetID(kTimeLabelID)
       .SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT)
       .SetAutoColorReadabilityEnabled(false)

ash/system/time/calendar_up_next_view.cc

@@ -11,6 +11,7 @@
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/icon_button.h"
+#include "ash/style/typography.h"
 #include "ash/system/time/calendar_event_list_item_view_jelly.h"
 #include "ash/system/time/calendar_metrics.h"
 #include "ash/system/time/calendar_up_next_view_background_painter.h"
@@ -117,7 +118,7 @@ std::unique_ptr<views::Button> CreateTodaysEventsButton(
 std::unique_ptr<views::Label> CreateHeaderLabel() {
   return views::Builder<views::Label>(
              bubble_utils::CreateLabel(
-                 bubble_utils::TypographyStyle::kButton2,
+                 TypographyToken::kCrosButton2,
                  l10n_util::GetStringUTF16(IDS_ASH_CALENDAR_UP_NEXT)))
       .SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT)
       .Build();