Draft: rough-ish draft of proposed color theme changes (#2067)
* color experimentation and troubleshooting * create color scheme, assign colors, more ant overrides * fun selection color * Prettified Code! * Correctly import opensans * Prettified Code! * Organize+standardize colors/names and update the app to use them * Prettified Code! * Use css var references instead of resolving value of vars in css files * Prettified Code! Co-authored-by: gingervitis <gingervitis@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
gingervitis
@@ -4,36 +4,65 @@
|
||||
|
||||
.ant-btn {
|
||||
height: 2rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background-color: var(--theme-unknown);
|
||||
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
border-width: 2px;
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
border-color: transparent;
|
||||
color: var(--theme-unknown-2);
|
||||
color: var(--theme-color-components-primary-button-text);
|
||||
border-color: var(--theme-color-action);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--theme-primary);
|
||||
border-color: transparent;
|
||||
color: var(--theme-unknown-2);
|
||||
border-color: var(--theme-color-action-hover);
|
||||
color: var(--theme-color-action-hover);
|
||||
background-color: var(--theme-color-components-secondary-button-background);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--theme-unknown-2);
|
||||
border-color: var(--theme-color-components-secondary-button-text);
|
||||
}
|
||||
&[ant-click-animating-without-extra-node]:after {
|
||||
animation: 0s !important;
|
||||
}
|
||||
}
|
||||
.ant-btn[disabled] {
|
||||
background-color: var(--theme-color-components-secondary-button-background-disabled);
|
||||
color: var(--theme-color-components-secondary-button-text-disabled);
|
||||
border-color: var(--theme-color-components-secondary-button-border-disabled);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--theme-color-components-secondary-button-background-disabled);
|
||||
color: var(--theme-color-components-secondary-button-text-disabled);
|
||||
border-color: var(--theme-color-components-secondary-button-border-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: var(--theme-unknown);
|
||||
background-color: var(--theme-color-components-primary-button-background);
|
||||
color: var(--theme-color-components-primary-button-text);
|
||||
border-color: var(--theme-color-components-primary-button-background);
|
||||
&:hover {
|
||||
background-color: var(--theme-color-action-hover);
|
||||
color: var(--theme-color-components-primary-button-text);
|
||||
border-color: var(--theme-color-action-hover);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--theme-color-action-hover);
|
||||
color: var(--theme-color-components-primary-button-text);
|
||||
border-color: var(--theme-color-components-primary-button-text);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-primary[disabled] {
|
||||
background-color: var(--theme-unknown);
|
||||
color: var(--theme-unknown-2);
|
||||
&:hover {
|
||||
background-color: var(--theme-unknown);
|
||||
background-color: var(--theme-color-components-primary-button-background-disabled);
|
||||
border-color: var(--theme-color-components-primary-button-border-disabled);
|
||||
color: var(--theme-color-components-primary-button-text-disabled);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--theme-color-components-primary-button-background-disabled);
|
||||
border-color: var(--theme-color-components-primary-button-border-disabled);
|
||||
color: var(--theme-color-components-primary-button-text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,5 +81,68 @@
|
||||
|
||||
.ant-dropdown-menu {
|
||||
border-radius: var(--theme-rounded-corners);
|
||||
background-color: var(--theme-background-secondary);
|
||||
background-color: var(--theme-color-components-menu-background);
|
||||
}
|
||||
.ant-dropdown-menu-item {
|
||||
color: var(--theme-color-components-menu-item-text);
|
||||
&:hover {
|
||||
background-color: var(--theme-color-components-menu-item-hover-bg);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--theme-color-components-menu-item-focus-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
color: var(--theme-color-components-modal-header-text);
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: var(--theme-color-components-modal-header-text);
|
||||
}
|
||||
|
||||
.ant-modal {
|
||||
color: var(--theme-color-components-text-on-light);
|
||||
h1 {
|
||||
color: var(--theme-color-components-text-on-light);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
background-color: var(--theme-color-components-form-field-background);
|
||||
color: var(--theme-color-components-form-field-text);
|
||||
border-color: var(--theme-color-components-form-field-border);
|
||||
&::placeholder {
|
||||
color: var(--theme-color-components-form-field-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-alert-error {
|
||||
.ant-alert-icon {
|
||||
color: var(--theme-color-palette-error);
|
||||
}
|
||||
.ant-alert-message {
|
||||
color: var(--theme-color-palette-error);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
padding: var(--content-padding);
|
||||
background-color: transparent;
|
||||
border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
|
||||
font-weight: bold;
|
||||
& + .ant-tabs-tab {
|
||||
margin-left: var(--module-spacing);
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
background-color: var(--theme-color-palette-4);
|
||||
.ant-tabs-tab-btn {
|
||||
color: var(--theme-color-action);
|
||||
&:hover {
|
||||
color: var(--theme-color-action-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-tabs-ink-bar {
|
||||
background-color: var(--theme-color-action);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user