Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

theme.color to theme.colors #8176

Merged
merged 6 commits into from Jun 9, 2020
Merged

theme.color to theme.colors #8176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fac07c3
theme.color` to `theme.colors #8176
kyleknighted May 21, 2020
ee7069d
Cleanup
kyleknighted Jun 8, 2020
42936cc
snapshots
kyleknighted Jun 8, 2020
064cde8
lint
kyleknighted Jun 8, 2020
6d70a7c
theme mode
kyleknighted Jun 9, 2020
88f2f26
snapshots
kyleknighted Jun 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions graylog2-web-interface/src/components/authentication/AuthenticationComponent.jsx
View file
Open in desktop
Expand Up @@ -21,16 +21,16 @@ const AuthenticationStore = StoreProvider.getStore('Authentication');
const CurrentUserStore = StoreProvider.getStore('CurrentUser');

const SubNavigationCol = styled(Col)(({ theme }) => `
border-right: ${theme.color.gray[80]} solid 1px;
border-right: ${theme.colors.gray[80]} solid 1px;
`);

const ContentPaneCol = styled(Col)(({ theme }) => `
border-left: ${theme.color.gray[80]} solid 1px;
border-left: ${theme.colors.gray[80]} solid 1px;
margin-left: -1px;
`);

const NavItemDivider = styled(NavItem)(({ theme }) => `
border-bottom: ${theme.color.gray[80]} solid 1px;
border-bottom: ${theme.colors.gray[80]} solid 1px;
`);

const AuthenticationComponent = createReactClass({
Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/common/ControlledTableListHeader.jsx
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ import styled from 'styled-components';
import { ListGroupItem } from 'components/graylog';

const StyledListGroupItem = styled(ListGroupItem)(({ theme }) => `
background-color: ${theme.color.gray[90]};
background-color: ${theme.colors.gray[90]};
font-size: 14px;
padding: 0 15px;

Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/common/EntityListItem.jsx
View file
Open in desktop
Expand Up @@ -28,7 +28,7 @@ const StyledListItem = styled.li(({ theme }) => `
}

&:not(:last-child) {
border-bottom: 1px solid ${theme.color.variant.light.info};
border-bottom: 1px solid ${theme.colors.variant.light.info};
}
`);

Expand Down
8 changes: 4 additions & 4 deletions graylog2-web-interface/src/components/common/ExpandableListItem.jsx
View file
Open in desktop
Expand Up @@ -40,7 +40,7 @@ const IconStack = styled.div(({ theme }) => `
vertical-align: text-top;

&:hover [class*="fa-"] {
color: ${theme.color.variant.primary};
color: ${theme.colors.variant.primary};
opacity: 1;
}
}
Expand All @@ -49,7 +49,7 @@ const IconStack = styled.div(({ theme }) => `
opacity: 0;

~ [class*="fa-"]:hover {
color: ${theme.color.global.contentBackground};
color: ${theme.colors.global.contentBackground};
}
}
`);
Expand All @@ -68,11 +68,11 @@ const Header = styled.button`
const Subheader = styled.span(({ theme }) => `
font-size: 0.95em;
margin-left: 0.5em;
color: ${theme.color.gray[70]};
color: ${theme.colors.gray[70]};
`);

const ExpandableContent = styled.div(({ theme }) => `
border-left: 1px ${theme.color.gray[90]} solid;
border-left: 1px ${theme.colors.gray[90]} solid;
margin-left: 35px;
margin-top: 10px;
padding-left: 5px;
Expand Down
8 changes: 4 additions & 4 deletions graylog2-web-interface/src/components/common/IconButton.jsx
View file
Open in desktop
Expand Up @@ -10,22 +10,22 @@ const Wrapper: StyledComponent<{}, ThemeInterface, HTMLButtonElement> = styled.b
display: inline-flex;
justify-content: center;
align-items: center;

height: 25px;
width: 25px;
border: 0

background-color: transparent;
cursor: pointer;
color: ${theme.color.gray[70]};
color: ${theme.colors.gray[70]};
font-size: 16px;

:hover {
background-color: ${theme.color.gray[90]};
background-color: ${theme.colors.gray[90]};
}

:active {
background-color: ${theme.color.gray[80]};
background-color: ${theme.colors.gray[80]};
}
`);

Expand Down
10 changes: 5 additions & 5 deletions graylog2-web-interface/src/components/common/InteractableModal.jsx
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ const StyledRnd = styled(Rnd)(({ theme }) => css`
box-shadow: 0 0 9px rgba(31, 31, 31, 0.25),
0 0 6px rgba(31, 31, 31, 0.25),
0 0 3px rgba(31, 31, 31, 0.25);
background-color: ${theme.color.gray[20]};
background-color: ${theme.colors.gray[20]};
border-radius: 3px;
flex-direction: column;
display: flex !important;
Expand All @@ -46,20 +46,20 @@ const Header = styled.header(({ theme }) => css`
padding: 6px 12px 9px;
display: flex;
align-items: center;
background-color: ${theme.color.gray[30]};
border-bottom: 1px solid ${theme.color.gray[10]};
background-color: ${theme.colors.gray[30]};
border-bottom: 1px solid ${theme.colors.gray[10]};
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
`);

const Title = styled.h3(({ theme }) => css`
color: ${theme.color.global.textAlt};
color: ${theme.colors.global.textAlt};
flex: 1;
`);

const DragBars = styled(Icon)(({ theme }) => css`
color: ${theme.color.gray[70]};
color: ${theme.colors.gray[70]};
margin-right: 9px;
`);

Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/common/ReactGridContainer.jsx
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ const StyledWidthProvidedGridLayout = styled(WidthProvidedGridLayout)(({ theme }
}

.react-grid-item.react-grid-placeholder {
background: ${theme.color.variant.info};
background: ${theme.colors.variant.info};
}

.actions {
Expand Down
10 changes: 5 additions & 5 deletions graylog2-web-interface/src/components/common/Scratchpad.jsx
View file
Open in desktop
Expand Up @@ -21,7 +21,7 @@ const ContentArea = styled.div`
`;

const Description = styled.p(({ theme }) => css`
color: ${theme.color.global.textAlt};
color: ${theme.colors.global.textAlt};
margin: 9px 0 6px;
`);

Expand All @@ -31,15 +31,15 @@ const Textarea = styled.textarea(({ copied, theme }) => css`
resize: none;
flex: 1;
margin-bottom: 15px;
border: 1px solid ${copied ? theme.color.variant.success : theme.color.gray[80]};
border: 1px solid ${copied ? theme.colors.variant.success : theme.colors.gray[80]};
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px ${chroma(copied ? theme.color.variant.success : theme.color.gray[80]).alpha(0.4).css()};
0 0 8px ${chroma(copied ? theme.colors.variant.success : theme.colors.gray[80]).alpha(0.4).css()};
transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
font-family: ${theme.fonts.family.monospace};
font-size: 14px;

:focus {
border-color: ${theme.color.variant.light.info};
border-color: ${theme.colors.variant.light.info};
outline: none;
}
`);
Expand All @@ -66,7 +66,7 @@ const Footer = styled.footer`

const SavingMessage = styled.span(({ theme, visible }) => css`
flex: 1;
color: ${theme.color.variant.success};
color: ${theme.colors.variant.success};
font-style: italic;
opacity: ${visible ? '1' : '0'};
transition: opacity 150ms ease-in-out;
Expand Down
5 changes: 2 additions & 3 deletions graylog2-web-interface/src/components/common/ScrollButton.jsx
View file
Open in desktop
Expand Up @@ -2,12 +2,11 @@ import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';

import { util } from 'theme';
import Icon from './Icon';

const ScrollBtn = styled.button(({ theme }) => `
opacity: 0.3;
background-color: ${theme.color.variant.primary};
background-color: ${theme.colors.variant.primary};
width: 40px;
height: 40px;
position: fixed;
Expand All @@ -26,7 +25,7 @@ const ScrollBtn = styled.button(({ theme }) => `
`);

const ArrowUpIcon = styled(Icon)(({ theme }) => `
color: ${util.readableColor(theme.color.variant.primary)};
color: ${theme.utils.readableColor(theme.colors.variant.primary)};
position: absolute;
top: 50%;
left: 50%;
Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/common/SortableList.jsx
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@ const SortableListGroup = styled(ListGroup)(({ disableDragging, theme }) => css`
}

.over {
border: 1px dashed ${theme.color.gray[50]};
border: 1px dashed ${theme.colors.gray[50]};
}

.list-group-item {
Expand Down
6 changes: 3 additions & 3 deletions graylog2-web-interface/src/components/common/SourceCodeEditor.jsx
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@ import './webpack-resolver';

const SourceCodeContainer = styled.div(({ darkMode, resizable, theme }) => `
.ace_editor {
border: 1px solid ${theme.color.gray[80]};
border: 1px solid ${theme.colors.gray[80]};
border-radius: 5px;
}

Expand All @@ -32,8 +32,8 @@ const SourceCodeContainer = styled.div(({ darkMode, resizable, theme }) => `
`);

const Toolbar = styled.div(({ theme }) => `
background: ${theme.color.global.contentBackground};
border: 1px solid ${theme.color.gray[80]};
background: ${theme.colors.global.contentBackground};
border: 1px solid ${theme.colors.gray[80]};
border-bottom: 0;
border-radius: 5px 5px 0 0;

Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/common/Wizard.jsx
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ import { Button, ButtonToolbar, Col, Nav, NavItem, Row } from 'components/graylo
import Icon from './Icon';

const SubnavigationCol = styled(Col)(({ theme }) => `
border-right: ${theme.color.gray[80]} solid 1px;
border-right: ${theme.colors.gray[80]} solid 1px;
`);

const HorizontalCol = styled(Col)`
Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/content-packs/ContentPackConstraints.jsx
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ import { DataTable, Icon } from 'components/common';
import { Badge } from 'components/graylog';

const StyledBadge = styled(({ isFulfilled, theme, ...rest }) => <Badge {...rest} />)`
background-color: ${({ isFulfilled, theme }) => (isFulfilled ? theme.color.variant.success : theme.color.variant.danger)};
background-color: ${({ isFulfilled, theme }) => (isFulfilled ? theme.colors.variant.success : theme.colors.variant.danger)};
`;

class ContentPackConstraints extends React.Component {
Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/content-packs/ContentPackStatus.jsx
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ import { StyledBadge } from 'components/graylog/Badge';
import Routes from 'routing/Routes';

const StatusBadge = styled(StyledBadge)(({ status, theme }) => {
const { success, info, warning, danger } = theme.color.variant.dark;
const { success, info, warning, danger } = theme.colors.variant.dark;
const statuses = {
installed: success,
updatable: info,
Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/errors/ErrorJumbotron.jsx
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@ const ContainerRow = styled(Row)`
`;

const StyledErrorJumbotron = styled(Jumbotron)(({ theme }) => css`
background-color: ${chroma(theme.color.global.contentBackground).alpha(0.8).css()};
background-color: ${chroma(theme.colors.global.contentBackground).alpha(0.8).css()};
text-align: center;
`);

Expand Down
12 changes: 6 additions & 6 deletions ...-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.jsx
View file
Open in desktop
Expand Up @@ -16,11 +16,11 @@ import EventDefinitionSummary from './EventDefinitionSummary';
const StyledNav = styled(Nav)(({ theme }) => `
&.nav {
> li {
border: 1px solid ${theme.color.gray[80]};
border: 1px solid ${theme.colors.gray[80]};
border-left: 0;

&:first-child {
border-left: 1px solid ${theme.color.gray[80]};
border-left: 1px solid ${theme.colors.gray[80]};
border-radius: 4px 0 0 4px;

> a {
Expand All @@ -37,8 +37,8 @@ const StyledNav = styled(Nav)(({ theme }) => `
}

&:not(:last-child)::after {
background-color: ${theme.color.gray[100]};
border-color: ${theme.color.gray[80]};
background-color: ${theme.colors.gray[100]};
border-color: ${theme.colors.gray[80]};
border-style: solid;
border-width: 0 1px 1px 0;
content: '';
Expand All @@ -53,11 +53,11 @@ const StyledNav = styled(Nav)(({ theme }) => `
}

&:hover::after {
background-color: ${theme.color.gray[90]};
background-color: ${theme.colors.gray[90]};
}

&.active::after {
background-color: ${theme.color.global.link};
background-color: ${theme.colors.global.link};
}

> a {
Expand Down
8 changes: 4 additions & 4 deletions graylog2-web-interface/src/components/events/events/Events.jsx
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@ const HEADERS = ['Description', 'Key', 'Type', 'Event Definition', 'Timestamp'];

const ExpandedTR = styled.tr(({ theme }) => `
> td {
border-top: 1px solid ${theme.color.gray[80]} !important;
border-top: 1px solid ${theme.colors.gray[80]} !important;
padding: 10px 8px 8px 35px !important;
}

Expand All @@ -40,7 +40,7 @@ const ExpandedTR = styled.tr(({ theme }) => `
`);

const EventsTbody = styled.tbody(({ expanded, theme }) => `
border-left: ${expanded ? `3px solid ${theme.color.variant.light.info}` : ''};
border-left: ${expanded ? `3px solid ${theme.colors.variant.light.info}` : ''};
border-collapse: ${expanded ? 'separate' : 'collapse'};
`);

Expand All @@ -51,12 +51,12 @@ const CollapsibleTr = styled.tr`
const EventsTable = styled(Table)(({ theme }) => `
tr {
&:hover {
background-color: ${theme.color.gray[90]};
background-color: ${theme.colors.gray[90]};
}

&${ExpandedTR} {
&:hover {
background-corlor: ${theme.color.global.contentBackground}
background-corlor: ${theme.colors.global.contentBackground}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion graylog2-web-interface/src/components/graylog/ControlLabel.jsx
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
import { ControlLabel as BootstrapControlLabel } from 'react-bootstrap';

const ControlLabel = styled(BootstrapControlLabel)(({ theme }) => css`
color: ${theme.color.global.textDefault};
color: ${theme.colors.global.textDefault};
font-weight: bold;
margin-bottom: 5px;
display: inline-block;
Expand Down
4 changes: 2 additions & 2 deletions graylog2-web-interface/src/components/graylog/DropdownSubmenu.jsx
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ const Toggle: StyledComponent<{}, ThemeInterface, HTMLAnchorElement> = styled.a.
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: ${theme.color.gray[80]};
border-left-color: ${theme.colors.gray[80]};
margin-top: 5px;
margin-right: -10px;
}
Expand All @@ -47,7 +47,7 @@ const StyledSubmenu: StyledComponent<{left: boolean}, ThemeInterface, HTMLLIElem
}

&:hover > ${/* sc-selector */String(Toggle)}::after {
border-left-color: ${theme.color.gray[100]};
border-left-color: ${theme.colors.gray[100]};
}
`);

Expand Down
14 changes: 7 additions & 7 deletions graylog2-web-interface/src/components/graylog/FormControl.jsx
View file
Open in desktop
Expand Up @@ -5,24 +5,24 @@ import chroma from 'chroma-js';

const FormControl = styled(BootstrapFormControl)(({ theme }) => {
return css`
color: ${theme.color.global.textDefault};
background-color: ${theme.color.global.contentBackground};
border-color: ${theme.color.gray[80]};
color: ${theme.colors.global.textDefault};
background-color: ${theme.colors.global.contentBackground};
border-color: ${theme.colors.gray[80]};

&::placeholder {
color: ${theme.color.gray[60]};
color: ${theme.colors.gray[60]};
}

&:focus {
border-color: ${theme.color.variant.light.info};
border-color: ${theme.colors.variant.light.info};
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px ${chroma(theme.color.variant.light.info).alpha(0.4).css()};
0 0 8px ${chroma(theme.colors.variant.light.info).alpha(0.4).css()};
}

&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: ${theme.color.gray[80]};
background-color: ${theme.colors.gray[80]};
}

~ .form-control-feedback.glyphicon {
Expand Down