Theme · Importing: VS Code themes read into Ely's palette, code palettes to choose

settings::read_vscode_theme reads a VS Code color theme, comments and
trailing commas and all: its type picks the mode, its colors and token
scopes name what they give, and the rest keep Ely's palette of that mode.
settings::ThemeImporter takes one dropped or browsed for, shows its name,
mode and count, and hands it over on Apply; a file that does not read
says why. theme::syntax_themes offers Ely's code colors, Quiet and Paper,
chosen through settings::SyntaxThemePicker, radio cards with a line of
code in each palette. A card's words now shrink as a plain block, so a
preview wraps inside the card at 280px.

src/forms/card.rs

@@ -18,10 +18,11 @@ use crate::{
     theme::{ActiveTheme, IconSize, Radius, TextSize},
 };
 
-/// What a card says: a title, a line under it, and an icon at its end.
+/// What a card says: a title, a line under it, a preview under them, and an icon at its end.
 struct Face {
     title: SharedString,
     description: Option<SharedString>,
+    preview: Option<AnyElement>,
     icon: Option<IconName>,
     disabled: bool,
     on: bool,
@@ -32,6 +33,7 @@ impl Face {
         Self {
             title,
             description: None,
+            preview: None,
             icon: None,
             disabled: false,
             on,
@@ -86,9 +88,7 @@ fn card(
         .child(
             div()
                 .flex_1()
-                .flex()
-                .flex_col()
-                .gap_0p5()
+                .min_w_0()
                 .child(
                     div()
                         .text_size(theme.text_size(TextSize::Base))
@@ -99,10 +99,14 @@ fn card(
                 .when_some(face.description, |words, description| {
                     words.child(
                         div()
+                            .mt_0p5()
                             .text_size(theme.text_size(TextSize::Sm))
                             .text_color(colors.fg_muted)
                             .child(description),
                     )
+                })
+                .when_some(face.preview, |words, preview| {
+                    words.child(div().pt_2().child(preview))
                 }),
         )
         .when_some(face.icon, |card, icon| {
@@ -201,6 +205,12 @@ impl RadioCard {
         self
     }
 
+    /// Shows `element` under the words, such as what the choice looks like.
+    pub fn preview(mut self, element: impl IntoElement) -> Self {
+        self.face.preview = Some(element.into_any_element());
+        self
+    }
+
     pub fn icon(mut self, icon: IconName) -> Self {
         self.face.icon = Some(icon);
         self

src/forms/mod.rs

@@ -56,8 +56,8 @@ pub use checked::{EmailInput, UrlInput, is_email, is_url};
 pub use chips::ChoiceChips;
 pub use code::{CodeInput, JsonInput, code_highlights, json_highlights};
 pub(crate) use code::{Kind, lex};
-pub(crate) use color::hex;
 pub use color::{ColorPalette, ColorPicker, ColorSwatch, EyeDropper, GradientEditor, GradientStop};
+pub(crate) use color::{hex, parse_hex};
 pub use combobox::Combobox;
 pub use date::{
     Calendar, CronEditor, CronRule, DatePicker, DateRangePicker, DateTimePicker, DurationPicker,