[OOBE] - Polymer3 - cr_card_radio_group_styles

Check-in the modularised version of cr_card_radio_group_styles.

Bug: b/250893501, b/260015687
Change-Id: I72fe6bd5fc096be9b790e4f6829a78f61df1afd4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4051189
Reviewed-by: Brahim Chikhaoui <bchikhaoui@google.com>
Commit-Queue: Renato Silva <rrsilva@google.com>
Cr-Commit-Position: refs/heads/main@{#1075230}

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -202,7 +202,6 @@ preprocess_if_expr("preprocess_unconditional_autogenerated_modules") {
     "components/dialogs/oobe_loading_dialog.m.js",
     "components/dialogs/oobe_modal_dialog.m.js",
     "components/common_styles/common_styles.m.js",
-    "components/common_styles/cr_card_radio_group_styles.m.js",
     "components/common_styles/oobe_dialog_host_styles.m.js",
     "components/common_styles/oobe_flex_layout_styles.m.js",
     "components/oobe_vars/oobe_shared_vars_css.m.js",
@@ -242,6 +241,7 @@ preprocess_if_expr("preprocess_gen_js_files") {
     "components/buttons/oobe_icon_button.js",
     "components/buttons/oobe_next_button.js",
     "components/buttons/oobe_text_button.js",
+    "components/common_styles/cr_card_radio_group_styles.css.js",
     "components/dialogs/oobe_adaptive_dialog.js",
     "components/dialogs/oobe_content_dialog.js",
     "components/gaia_button.js",
@@ -332,6 +332,7 @@ group("generate_web_components") {
     "components:web_components",
     "components/buttons:copy_js",
     "components/buttons:web_components",
+    "components/common_styles:css_wrapper_files",
     "components/dialogs:web_components",
     "screens/common:web_components",
     "screens/login:web_components",

chrome/browser/resources/chromeos/login/components/common_styles/BUILD.gn

@@ -3,13 +3,14 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
 import("//tools/polymer/polymer.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
   deps = [
     ":common_styles.m",
-    ":cr_card_radio_group_styles.m",
+    ":cr_card_radio_group_styles.css",
     ":oobe_dialog_host_styles.m",
     ":oobe_flex_layout_styles.m",
   ]
@@ -18,7 +19,6 @@ js_type_check("closure_compile") {
 group("polymer3_elements") {
   public_deps = [
     ":common_styles_module",
-    ":cr_card_radio_group_styles_module",
     ":oobe_dialog_host_styles_module",
     ":oobe_flex_layout_styles_module",
   ]
@@ -36,10 +36,12 @@ js_library("oobe_dialog_host_styles.m") {
   extra_deps = [ ":oobe_dialog_host_styles_module" ]
 }
 
-js_library("cr_card_radio_group_styles.m") {
-  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/cr_card_radio_group_styles.m.js" ]
-  deps = []
-  extra_deps = [ ":cr_card_radio_group_styles_module" ]
+js_library("cr_card_radio_group_styles.css") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/common_styles/cr_card_radio_group_styles.css.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+  extra_deps = [ ":css_wrapper_files" ]
 }
 
 js_library("oobe_flex_layout_styles.m") {
@@ -54,12 +56,6 @@ polymer_modulizer("common_styles") {
   html_type = "style-module"
 }
 
-polymer_modulizer("cr_card_radio_group_styles") {
-  js_file = "cr_card_radio_group_styles.m.js"
-  html_file = "cr_card_radio_group_styles.html"
-  html_type = "style-module"
-}
-
 polymer_modulizer("oobe_dialog_host_styles") {
   js_file = "oobe_dialog_host_styles.m.js"
   html_file = "oobe_dialog_host_styles.html"
@@ -71,3 +67,8 @@ polymer_modulizer("oobe_flex_layout_styles") {
   html_file = "oobe_flex_layout_styles.html"
   html_type = "style-module"
 }
+
+css_to_wrapper("css_wrapper_files") {
+  in_files = [ "cr_card_radio_group_styles.css" ]
+  use_js = true
+}

chrome/browser/resources/chromeos/login/components/common_styles/cr_card_radio_group_styles.css

@@ -0,0 +1,81 @@
+/* Copyright 2021 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #css_wrapper_metadata_end */
+
+:host {
+    --radio-button-height: 120px;
+}
+
+cr-radio-group {
+    display: flex;
+    flex-direction: column;
+    margin-top: 8px;
+}
+
+cr-card-radio-button {
+    /* Removes the highlight that appears on tap. It has sharp
+    * corners, which don't match the rounded corners of the card. */
+    -webkit-tap-highlight-color: transparent;
+    border-radius: 16px;
+    height: var(--radio-button-height);
+    margin-bottom: 0;
+    --cr-button-edge-spacing: 0;
+    --cr-card-radio-button-checkmark-right: 24px;
+
+    --cr-card-radio-button-checkmark-top:
+        calc(var(--radio-button-height) / 2 - 12px);
+    --cr-card-radio-button-height: var(--radio-button-height);
+    --cr-card-radio-button-margin: 0;
+    --cr-card-radio-button-padding: 0;
+    --cr-card-radio-button-width: 100%;
+    /* TODO(https://crbug.com/1320715) Revise the color
+    --cr-checked-color: var(--google-blue-500);
+    */
+    --cr-radio-button-ink-size: 0;
+    --cr-radio-group-item-padding: 0;
+}
+
+cr-card-radio-button:not(:last-child) {
+    margin-bottom: 16px;
+}
+
+.card-container {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    /* Same height to center button content in vertical dimension. */
+    height: var(--radio-button-height);
+    padding-bottom: 0;
+    padding-inline-end: 48px;
+    padding-inline-start: 24px;
+    padding-top: 0;
+    text-align: start;
+}
+
+.card-icon {
+    --iron-icon-height: 48px;
+    --iron-icon-width: 48px;
+}
+
+.card-content {
+    padding-inline-end: 24px;
+    padding-inline-start: 24px;
+}
+
+.card-label {
+    color: var(--oobe-header-text-color);
+    font-family: var(--oobe-header-font-family);
+    font-size: var(--oobe-radio-card-label-font-size);
+    font-weight: 500;
+    line-height: var(--oobe-radio-card-label-line-height);
+}
+
+.card-text {
+    color: var(--oobe-text-color);
+    line-height: 20px;
+}

chrome/browser/resources/chromeos/login/screens/common/os_trial.js

@@ -12,7 +12,7 @@ import '//resources/cr_elements/cr_shared_vars.css.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '../../components/oobe_icons.m.js';
 import '../../components/common_styles/common_styles.m.js';
-import '../../components/common_styles/cr_card_radio_group_styles.m.js';
+import '../../components/common_styles/cr_card_radio_group_styles.css.js';
 import '../../components/common_styles/oobe_dialog_host_styles.m.js';
 import '../../components/dialogs/oobe_adaptive_dialog.js';
 import '../../components/hd_iron_icon.js';

chrome/browser/resources/chromeos/login/screens/common/theme_selection.js

@@ -11,6 +11,7 @@ import '//resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
 import '../../components/buttons/oobe_next_button.js';
 import '../../components/oobe_icons.m.js';
 import '../../components/common_styles/common_styles.m.js';
+import '../../components/common_styles/cr_card_radio_group_styles.css.js';
 import '../../components/common_styles/oobe_dialog_host_styles.m.js';
 import '../../components/dialogs/oobe_adaptive_dialog.js';
 

chrome/browser/resources/chromeos/login/screens/common/user_creation.js

@@ -10,7 +10,7 @@ import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '../../components/hd_iron_icon.js';
 import '../../components/oobe_icons.m.js';
 import '../../components/common_styles/common_styles.m.js';
-import '../../components/common_styles/cr_card_radio_group_styles.m.js';
+import '../../components/common_styles/cr_card_radio_group_styles.css.js';
 import '../../components/common_styles/oobe_dialog_host_styles.m.js';
 import '../../components/dialogs/oobe_adaptive_dialog.js';
 import '../../components/dialogs/oobe_modal_dialog.m.js';