diff --git a/web/components/checkbox.css b/web/components/checkbox.css --- a/web/components/checkbox.css +++ b/web/components/checkbox.css @@ -3,7 +3,7 @@ background-color: transparent; width: 24px; height: 24px; - border: 1px solid var(--radio-border); + border: 1px solid var(--enumOption-input-primary-default); border-radius: 3.6px; display: flex; align-items: center; @@ -17,7 +17,7 @@ border-radius: 2.4px; transform: scale(0); transition: 120ms transform ease-in-out; - background-color: var(--radio-color); + background-color: var(--enumOption-input-primary-selected); } .checkbox:checked::before { diff --git a/web/components/enum-settings-option.css b/web/components/enum-settings-option.css --- a/web/components/enum-settings-option.css +++ b/web/components/enum-settings-option.css @@ -7,7 +7,7 @@ } div.optionContainerSelected { - background: var(--notification-settings-option-selected-bg); + background: var(--enumOption-background-primary-selected); } div.optionIcon { @@ -37,13 +37,13 @@ div.optionTitle { font-size: var(--m-font-16); font-weight: var(--semi-bold); - color: var(--notification-settings-option-title-color); + color: var(--enumOption-title-primary-default); margin-bottom: 4px; } div.optionDescription { font-size: var(--xs-font-12); - color: var(--notification-settings-option-color); + color: var(--enumOption-description-primary-default); display: flex; flex-direction: column; row-gap: 4px; diff --git a/web/sidebar/community-creation/community-creation-keyserver-label.css b/web/sidebar/community-creation/community-creation-keyserver-label.css --- a/web/sidebar/community-creation/community-creation-keyserver-label.css +++ b/web/sidebar/community-creation/community-creation-keyserver-label.css @@ -3,11 +3,11 @@ justify-content: center; align-items: center; height: 40px; - background-color: var(--community-creation-ancestry-bg); + background-color: var(--panel-background-tertiary-default); margin-top: 20px; } div.ancestryContainer p { - color: var(--community-creation-ancestry-text); + color: var(--text-background-tertiary-default); margin-right: 6px; } diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css --- a/web/sidebar/community-creation/community-creation-modal.css +++ b/web/sidebar/community-creation/community-creation-modal.css @@ -21,22 +21,19 @@ font-size: 14px; font-weight: 600; vertical-align: top; - color: var(--fg); + color: var(--text-background-primary-default); } div.formContent { display: flex; font-family: var(--font-stack); - color: var(--fg); margin-top: 8px; margin-bottom: 12px; } div.formContent textarea { padding: 12px; - background: var(--modal-bg); - color: var(--fg); - border: 1px solid var(--border-color); + border: 1px solid var(--separator-background-primary-default); font-size: var(--m-font-16); border-radius: 4px; width: 100%; @@ -45,7 +42,7 @@ } div.formNotice { - color: var(--community-creation-form-notice); + color: var(--text-background-secondary-default); font-size: var(--xs-font-12); text-align: center; } @@ -58,11 +55,11 @@ } div.optionalSettingsContainer { - color: var(--enum-option-icon-color); + color: var(--enumOption-icon-primary-default); } div.optionalSettingsLabel { - color: var(--compose-subchannel-label-color); + color: var(--text-background-tertiary-default); padding-bottom: 20px; } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -92,7 +92,6 @@ --community-creation-btn-bg: var(--shades-black-75); --community-creation-ancestry-bg: var(--shades-black-75); --community-creation-ancestry-text: var(--shades-black-50); - --community-creation-form-notice: var(--shades-white-60); --community-creation-keyserver-container: var(--shades-black-95); --modal-bg: var(--shades-black-85); --modal-fg: var(--shades-white-60); @@ -257,6 +256,7 @@ :root { /* Panel */ --panel-background-primary-default: var(--shades-black-95); + --panel-background-tertiary-default: var(--shades-black-75); /* Text */ --text-background-primary-default: var(--shades-white-100); @@ -304,12 +304,21 @@ --statusIndicator-background-outer-inactive: var(--error-dark-90); --statusIndicator-background-inner-active: var(--success-primary); --statusIndicator-background-inner-inactive: var(--error-primary); + + /* Enum Option */ + --enumOption-background-primary-selected: var(--shades-black-75); + --enumOption-icon-primary-default: var(--violet-dark-100); + --enumOption-title-primary-default: var(--shades-white-90); + --enumOption-description-primary-default: var(--shades-white-60); + --enumOption-input-primary-default: var(--shades-black-60); + --enumOption-input-primary-selected: var(--shades-white-60); } /* Light theme */ [data-theme='light'] { /* Panel */ --panel-background-primary-default: var(--shades-white-100); + --panel-background-tertiary-default: var(--shades-white-60); /* Text */ --text-background-primary-default: var(--shades-black-95); @@ -357,4 +366,12 @@ --statusIndicator-background-outer-inactive: var(--error-dark-50); --statusIndicator-background-inner-active: var(--success-primary); --statusIndicator-background-inner-inactive: var(--error-primary); + + /* Enum Option */ + --enumOption-background-primary-selected: var(--shades-white-70); + --enumOption-icon-primary-default: var(--violet-dark-100); + --enumOption-title-primary-default: var(--shades-black-85); + --enumOption-description-primary-default: var(--shades-black-60); + --enumOption-input-primary-default: var(--shades-black-50); + --enumOption-input-primary-selected: var(--shades-black-60); }