mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-23 01:10:18 +03:00
33a017b528
* Add hook to get the theme * Adapt subsection settings to new ui * WIP new theme subsection * Add theme selection * Fix test types * Disabled theme selector when system theme is used * Update compound to `4.4.1` * Add custom theme support * Remove old ThemChoicePanel * Fix QuickThemeSwitcher-test.tsx * Fix AppearanceUserSettingsTab-test.tsx * Update i18n * Fix ThemeChoicePanel-test.tsx * Update `@vector-im/compound-web` * Small tweaks * Fix CSS comments and use compound variable * Remove custom theme title * i18n: update * test: add tests to theme selection * test: update AppearanceUserSettingsTab-test snapshot * test: rework custom theme * playwright: fix audio-player.spec.ts * playwright: appearance tab * test: update snapshot * playright: add custom theme * i18n: use correct char for ellipsis * a11y: add missing aria-label to delete button * dialog: update close button tooltip * theme: remove local state and handle custom delete * theme: don't add twice the same custom theme * test: update snapshot * playwright: update snapshot * custom theme: add background to custom theme list * update compound web * Use new destructive property on `IconButton` of theme panel * test: update snapshots * rename new ui into legacy * remove wrong constructor doc * fix theme selector padding * theme selector: fix key * test: fix e2e
774 lines
21 KiB
Text
774 lines
21 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="themePanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Theme
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_148br_24"
|
|
>
|
|
<div
|
|
class="_inline-field_148br_40"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_qnvru_18"
|
|
>
|
|
<input
|
|
class="_input_qnvru_32"
|
|
id="radix-42"
|
|
name="systemTheme"
|
|
title=""
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="_ui_qnvru_42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67"
|
|
for="radix-42"
|
|
>
|
|
Match system theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
|
|
>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1vw5h_26"
|
|
id="radix-43"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-43"
|
|
>
|
|
Light
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-44"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="dark"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-44"
|
|
>
|
|
Dark
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-45"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light-high-contrast"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-45"
|
|
>
|
|
High contrast
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-46"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="custom-Alice theme"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-46"
|
|
>
|
|
Alice theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div
|
|
class="mx_ThemeChoicePanel_CustomTheme"
|
|
>
|
|
<form
|
|
class="_container_zfn7i_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
|
|
id=":r7:"
|
|
>
|
|
<div
|
|
class="_label_zfn7i_21"
|
|
id=":r8:"
|
|
>
|
|
Add custom theme
|
|
</div>
|
|
<div
|
|
class="_controls_zfn7i_27"
|
|
>
|
|
<input
|
|
aria-invalid="false"
|
|
aria-labelledby=":r8:"
|
|
class="_control_9gon8_18 _control_zfn7i_27"
|
|
value=""
|
|
/>
|
|
<div
|
|
class="_button-group_zfn7i_32"
|
|
>
|
|
<button
|
|
aria-controls=":r7:"
|
|
aria-label="Add custom theme"
|
|
class="_button_zfn7i_32 _primary-button_zfn7i_51"
|
|
type="submit"
|
|
>
|
|
<svg
|
|
class="cpd-icon"
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
aria-controls=":r7:"
|
|
class="_button_zfn7i_32"
|
|
role="button"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="cpd-icon"
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="_caption-line_zfn7i_92 _caption-text_zfn7i_130 _caption-text-help_zfn7i_147"
|
|
>
|
|
Enter the URL of a custom theme you want to apply.
|
|
</span>
|
|
</form>
|
|
<ul
|
|
class="mx_ThemeChoicePanel_CustomThemeList"
|
|
>
|
|
<li
|
|
aria-label="Alice theme"
|
|
class="mx_ThemeChoicePanel_CustomThemeList_theme"
|
|
>
|
|
<span
|
|
class="mx_ThemeChoicePanel_CustomThemeList_name"
|
|
>
|
|
Alice theme
|
|
</span>
|
|
<button
|
|
aria-label="Delete"
|
|
class="_icon-button_rijzz_17 _destructive_rijzz_78"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_separator_144s5_17"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|
|
|
|
exports[`<ThemeChoicePanel /> custom theme should render the custom theme section 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="themePanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Theme
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_148br_24"
|
|
>
|
|
<div
|
|
class="_inline-field_148br_40"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_qnvru_18"
|
|
>
|
|
<input
|
|
class="_input_qnvru_32"
|
|
id="radix-32"
|
|
name="systemTheme"
|
|
title=""
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="_ui_qnvru_42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67"
|
|
for="radix-32"
|
|
>
|
|
Match system theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
|
|
>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1vw5h_26"
|
|
id="radix-33"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-33"
|
|
>
|
|
Light
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-34"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="dark"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-34"
|
|
>
|
|
Dark
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-35"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light-high-contrast"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-35"
|
|
>
|
|
High contrast
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-36"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="custom-Alice theme"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-36"
|
|
>
|
|
Alice theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div
|
|
class="mx_ThemeChoicePanel_CustomTheme"
|
|
>
|
|
<form
|
|
class="_container_zfn7i_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
|
|
id=":r1:"
|
|
>
|
|
<div
|
|
class="_label_zfn7i_21"
|
|
id=":r2:"
|
|
>
|
|
Add custom theme
|
|
</div>
|
|
<div
|
|
class="_controls_zfn7i_27"
|
|
>
|
|
<input
|
|
aria-invalid="false"
|
|
aria-labelledby=":r2:"
|
|
class="_control_9gon8_18 _control_zfn7i_27"
|
|
value=""
|
|
/>
|
|
<div
|
|
class="_button-group_zfn7i_32"
|
|
>
|
|
<button
|
|
aria-controls=":r1:"
|
|
aria-label="Add custom theme"
|
|
class="_button_zfn7i_32 _primary-button_zfn7i_51"
|
|
type="submit"
|
|
>
|
|
<svg
|
|
class="cpd-icon"
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
aria-controls=":r1:"
|
|
class="_button_zfn7i_32"
|
|
role="button"
|
|
type="button"
|
|
>
|
|
<svg
|
|
class="cpd-icon"
|
|
fill="currentColor"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="_caption-line_zfn7i_92 _caption-text_zfn7i_130 _caption-text-help_zfn7i_147"
|
|
>
|
|
Enter the URL of a custom theme you want to apply.
|
|
</span>
|
|
</form>
|
|
<ul
|
|
class="mx_ThemeChoicePanel_CustomThemeList"
|
|
>
|
|
<li
|
|
aria-label="Alice theme"
|
|
class="mx_ThemeChoicePanel_CustomThemeList_theme"
|
|
>
|
|
<span
|
|
class="mx_ThemeChoicePanel_CustomThemeList_name"
|
|
>
|
|
Alice theme
|
|
</span>
|
|
<button
|
|
aria-label="Delete"
|
|
class="_icon-button_rijzz_17 _destructive_rijzz_78"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_separator_144s5_17"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|
|
|
|
exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="themePanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Theme
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_148br_24"
|
|
>
|
|
<div
|
|
class="_inline-field_148br_40"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_qnvru_18"
|
|
>
|
|
<input
|
|
class="_input_qnvru_32"
|
|
id="radix-0"
|
|
name="systemTheme"
|
|
title=""
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="_ui_qnvru_42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67"
|
|
for="radix-0"
|
|
>
|
|
Match system theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
|
|
>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1vw5h_26"
|
|
id="radix-1"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-1"
|
|
>
|
|
Light
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-2"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="dark"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-2"
|
|
>
|
|
Dark
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_148br_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-3"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light-high-contrast"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_148br_46"
|
|
>
|
|
<label
|
|
class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-3"
|
|
>
|
|
High contrast
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="_separator_144s5_17"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|