From 47cdc409b9e6db6b4a858ab4ef9f7e462a5c0b4d Mon Sep 17 00:00:00 2001 From: Kyle Knight Date: Thu, 21 May 2020 12:55:16 -0500 Subject: [PATCH] theme.color` to `theme.colors #8176 --- .../AuthenticationComponent.jsx | 6 +- .../common/ControlledTableListHeader.jsx | 2 +- .../src/components/common/EntityListItem.jsx | 2 +- .../components/common/ExpandableListItem.jsx | 8 +- .../components/common/InteractableModal.jsx | 10 +- .../components/common/ReactGridContainer.jsx | 2 +- .../src/components/common/Scratchpad.jsx | 10 +- .../src/components/common/ScrollButton.jsx | 4 +- .../src/components/common/SortableList.jsx | 2 +- .../components/common/SourceCodeEditor.jsx | 6 +- .../src/components/common/Wizard.jsx | 2 +- .../content-packs/ContentPackConstraints.jsx | 2 +- .../content-packs/ContentPackStatus.jsx | 2 +- .../src/components/errors/ErrorJumbotron.jsx | 2 +- .../EventDefinitionForm.jsx | 12 +- .../src/components/events/events/Events.jsx | 8 +- .../src/components/graylog/ControlLabel.jsx | 2 +- .../components/graylog/DropdownSubmenu.jsx | 4 +- .../src/components/graylog/FormControl.jsx | 14 +-- .../src/components/graylog/FormGroup.jsx | 6 +- .../src/components/graylog/HelpBlock.jsx | 2 +- .../src/components/graylog/InputGroup.jsx | 6 +- .../src/components/graylog/Jumbotron.jsx | 4 +- .../src/components/graylog/ListGroupItem.jsx | 44 ++++---- .../graylog/MessageDetailsDefinitionList.jsx | 2 +- .../src/components/graylog/Modal.jsx | 8 +- .../src/components/graylog/Nav.jsx | 14 +-- .../src/components/graylog/Navbar.jsx | 106 +++++++++--------- .../src/components/graylog/Pagination.jsx | 24 ++-- .../src/components/graylog/Panel.jsx | 28 ++--- .../src/components/graylog/Popover.jsx | 14 +-- .../src/components/graylog/ProgressBar.jsx | 8 +- .../src/components/graylog/Tab.jsx | 4 +- .../src/components/graylog/Table.jsx | 38 +++---- .../src/components/graylog/Tooltip.jsx | 14 +-- .../src/components/graylog/Well.jsx | 4 +- .../components/graylog/styles/buttonStyles.js | 24 ++-- .../src/components/graylog/styles/menuItem.js | 20 ++-- .../src/components/graylog/styles/nav-tabs.js | 22 ++-- .../components/graylog/variants/bsStyle.js | 16 +-- .../indices/ShardRoutingOverview.jsx | 10 +- .../src/components/inputs/InputThroughput.jsx | 2 +- .../src/components/layout/Footer.jsx | 2 +- .../src/components/ldap/TestLdapLogin.jsx | 2 +- .../src/components/login/LoginBox.jsx | 4 +- .../src/components/metrics/MetricsList.jsx | 2 +- .../navigation/Navigation.styles.jsx | 2 +- .../src/components/nodes/JvmHeapUsage.jsx | 14 +-- .../components/notifications/Notification.jsx | 2 +- .../src/components/outputs/Output.jsx | 2 +- .../pipelines/ProcessingTimelineComponent.jsx | 4 +- .../components/search/MessageDetailsTitle.jsx | 2 +- .../sidecars/common/CloneMenuItem.jsx | 6 +- .../components/sidecars/common/ColorLabel.jsx | 4 +- .../sidecars/sidecars/SidecarRow.jsx | 4 +- .../simulator/SimulationChanges.jsx | 2 +- .../src/components/streams/Stream.jsx | 2 +- .../components/systemjobs/SystemJobsList.jsx | 2 +- .../systemmessages/SystemMessagesList.jsx | 2 +- .../throughput/GlobalThroughput.jsx | 4 +- .../src/components/users/UserList.jsx | 2 +- graylog2-web-interface/src/routing/App.jsx | 4 +- .../src/theme/GlobalThemeStyles.jsx | 52 ++++----- .../src/theme/GraylogThemeProvider.jsx | 6 +- graylog2-web-interface/src/theme/colors.js | 91 ++++++++++++++- .../src/theme/docs/Colors.md | 4 +- .../src/theme/docs/ThemeProvider.md | 8 +- graylog2-web-interface/src/theme/index.js | 61 +--------- .../src/theme/styles/authStyles.jsx | 2 +- .../src/views/components/OverlayDropdown.jsx | 2 +- .../src/views/components/Query.jsx | 2 +- .../src/views/components/QueryTabs.jsx | 2 +- .../src/views/components/WidgetGrid.jsx | 6 +- .../views/components/actions/FieldActions.jsx | 2 +- .../aggregationbuilder/DescriptionBox.jsx | 2 +- .../components/common/ActionDropdown.jsx | 2 +- .../components/datatable/MessagesTable.jsx | 16 +-- .../components/messagelist/MessageField.jsx | 2 +- .../components/messagelist/MessageFields.jsx | 4 +- .../components/searchbar/SearchButton.jsx | 2 +- .../searchbar/TimerangeSelector.jsx | 2 +- .../searchbar/queryinput/StyledAceEditor.jsx | 56 ++++----- .../saved-search/SavedSearchControls.jsx | 4 +- .../saved-search/SavedSearchList.jsx | 2 +- .../SavedSearchForm.test.jsx.snap | 6 +- .../components/sidebar/NavItem.styles.jsx | 12 +- .../components/sidebar/Sidebar.styles.jsx | 6 +- .../sidebar/highlighting/HighlightingRule.jsx | 2 +- .../components/visualizations/GenericPlot.jsx | 4 +- .../visualizations/number/Trend.jsx | 2 +- .../components/widgets/FieldSortIcon.jsx | 2 +- .../views/components/widgets/MessageTable.jsx | 16 +-- .../views/components/widgets/WidgetFrame.jsx | 6 +- 93 files changed, 504 insertions(+), 470 deletions(-) diff --git a/graylog2-web-interface/src/components/authentication/AuthenticationComponent.jsx b/graylog2-web-interface/src/components/authentication/AuthenticationComponent.jsx index b15e65d676f7..63cbcb5c5efc 100644 --- a/graylog2-web-interface/src/components/authentication/AuthenticationComponent.jsx +++ b/graylog2-web-interface/src/components/authentication/AuthenticationComponent.jsx @@ -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({ diff --git a/graylog2-web-interface/src/components/common/ControlledTableListHeader.jsx b/graylog2-web-interface/src/components/common/ControlledTableListHeader.jsx index ad7538b99984..940b87c5b17b 100644 --- a/graylog2-web-interface/src/components/common/ControlledTableListHeader.jsx +++ b/graylog2-web-interface/src/components/common/ControlledTableListHeader.jsx @@ -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; diff --git a/graylog2-web-interface/src/components/common/EntityListItem.jsx b/graylog2-web-interface/src/components/common/EntityListItem.jsx index 6caa75bc9270..9e21384a2a43 100644 --- a/graylog2-web-interface/src/components/common/EntityListItem.jsx +++ b/graylog2-web-interface/src/components/common/EntityListItem.jsx @@ -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}; } `); diff --git a/graylog2-web-interface/src/components/common/ExpandableListItem.jsx b/graylog2-web-interface/src/components/common/ExpandableListItem.jsx index 1468b361e1ae..a2159b836242 100644 --- a/graylog2-web-interface/src/components/common/ExpandableListItem.jsx +++ b/graylog2-web-interface/src/components/common/ExpandableListItem.jsx @@ -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; } } @@ -49,7 +49,7 @@ const IconStack = styled.div(({ theme }) => ` opacity: 0; ~ [class*="fa-"]:hover { - color: ${theme.color.global.contentBackground}; + color: ${theme.colors.global.contentBackground}; } } `); @@ -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; diff --git a/graylog2-web-interface/src/components/common/InteractableModal.jsx b/graylog2-web-interface/src/components/common/InteractableModal.jsx index a647754c10f7..eb5a9fc9565a 100644 --- a/graylog2-web-interface/src/components/common/InteractableModal.jsx +++ b/graylog2-web-interface/src/components/common/InteractableModal.jsx @@ -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; @@ -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; `); diff --git a/graylog2-web-interface/src/components/common/ReactGridContainer.jsx b/graylog2-web-interface/src/components/common/ReactGridContainer.jsx index 24c8e78ac706..79ffb3a29f2a 100644 --- a/graylog2-web-interface/src/components/common/ReactGridContainer.jsx +++ b/graylog2-web-interface/src/components/common/ReactGridContainer.jsx @@ -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 { diff --git a/graylog2-web-interface/src/components/common/Scratchpad.jsx b/graylog2-web-interface/src/components/common/Scratchpad.jsx index 2b5b0f02273e..a44641f415e7 100644 --- a/graylog2-web-interface/src/components/common/Scratchpad.jsx +++ b/graylog2-web-interface/src/components/common/Scratchpad.jsx @@ -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; `); @@ -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: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; :focus { - border-color: ${theme.color.variant.light.info}; + border-color: ${theme.colors.variant.light.info}; outline: none; } `); @@ -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; diff --git a/graylog2-web-interface/src/components/common/ScrollButton.jsx b/graylog2-web-interface/src/components/common/ScrollButton.jsx index 771d9c6f08df..c7ad88c186af 100644 --- a/graylog2-web-interface/src/components/common/ScrollButton.jsx +++ b/graylog2-web-interface/src/components/common/ScrollButton.jsx @@ -7,7 +7,7 @@ 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; @@ -26,7 +26,7 @@ const ScrollBtn = styled.button(({ theme }) => ` `); const ArrowUpIcon = styled(Icon)(({ theme }) => ` - color: ${util.readableColor(theme.color.variant.primary)}; + color: ${util.readableColor(theme.colors.variant.primary)}; position: absolute; top: 50%; left: 50%; diff --git a/graylog2-web-interface/src/components/common/SortableList.jsx b/graylog2-web-interface/src/components/common/SortableList.jsx index 1cda66a8543c..d775c8771a5f 100644 --- a/graylog2-web-interface/src/components/common/SortableList.jsx +++ b/graylog2-web-interface/src/components/common/SortableList.jsx @@ -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 { diff --git a/graylog2-web-interface/src/components/common/SourceCodeEditor.jsx b/graylog2-web-interface/src/components/common/SourceCodeEditor.jsx index 4080e22fafbc..9b2b1269c26c 100644 --- a/graylog2-web-interface/src/components/common/SourceCodeEditor.jsx +++ b/graylog2-web-interface/src/components/common/SourceCodeEditor.jsx @@ -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; } @@ -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; diff --git a/graylog2-web-interface/src/components/common/Wizard.jsx b/graylog2-web-interface/src/components/common/Wizard.jsx index 861fd8803513..1472eaf66b1f 100644 --- a/graylog2-web-interface/src/components/common/Wizard.jsx +++ b/graylog2-web-interface/src/components/common/Wizard.jsx @@ -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)` diff --git a/graylog2-web-interface/src/components/content-packs/ContentPackConstraints.jsx b/graylog2-web-interface/src/components/content-packs/ContentPackConstraints.jsx index 9fcd811e696b..c1c14e27dc94 100644 --- a/graylog2-web-interface/src/components/content-packs/ContentPackConstraints.jsx +++ b/graylog2-web-interface/src/components/content-packs/ContentPackConstraints.jsx @@ -7,7 +7,7 @@ import { DataTable, Icon } from 'components/common'; import { Badge } from 'components/graylog'; const StyledBadge = styled(({ isFulfilled, theme, ...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 { diff --git a/graylog2-web-interface/src/components/content-packs/ContentPackStatus.jsx b/graylog2-web-interface/src/components/content-packs/ContentPackStatus.jsx index 1ce0ce20c346..5ca1cc93a40f 100644 --- a/graylog2-web-interface/src/components/content-packs/ContentPackStatus.jsx +++ b/graylog2-web-interface/src/components/content-packs/ContentPackStatus.jsx @@ -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, diff --git a/graylog2-web-interface/src/components/errors/ErrorJumbotron.jsx b/graylog2-web-interface/src/components/errors/ErrorJumbotron.jsx index e4147d7f4749..402450323384 100644 --- a/graylog2-web-interface/src/components/errors/ErrorJumbotron.jsx +++ b/graylog2-web-interface/src/components/errors/ErrorJumbotron.jsx @@ -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; `); diff --git a/graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.jsx b/graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.jsx index 83fd04859e81..08f3781d3342 100644 --- a/graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.jsx +++ b/graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.jsx @@ -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 { @@ -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: ''; @@ -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 { diff --git a/graylog2-web-interface/src/components/events/events/Events.jsx b/graylog2-web-interface/src/components/events/events/Events.jsx index 1604444ae69e..c4eff722c089 100644 --- a/graylog2-web-interface/src/components/events/events/Events.jsx +++ b/graylog2-web-interface/src/components/events/events/Events.jsx @@ -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; } @@ -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'}; `); @@ -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} } } } diff --git a/graylog2-web-interface/src/components/graylog/ControlLabel.jsx b/graylog2-web-interface/src/components/graylog/ControlLabel.jsx index fc35d12f2574..68eac24eba30 100644 --- a/graylog2-web-interface/src/components/graylog/ControlLabel.jsx +++ b/graylog2-web-interface/src/components/graylog/ControlLabel.jsx @@ -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; diff --git a/graylog2-web-interface/src/components/graylog/DropdownSubmenu.jsx b/graylog2-web-interface/src/components/graylog/DropdownSubmenu.jsx index b364848bb034..766fda8078ad 100644 --- a/graylog2-web-interface/src/components/graylog/DropdownSubmenu.jsx +++ b/graylog2-web-interface/src/components/graylog/DropdownSubmenu.jsx @@ -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; } @@ -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]}; } `); diff --git a/graylog2-web-interface/src/components/graylog/FormControl.jsx b/graylog2-web-interface/src/components/graylog/FormControl.jsx index 225fc20a923e..e925cde9b108 100644 --- a/graylog2-web-interface/src/components/graylog/FormControl.jsx +++ b/graylog2-web-interface/src/components/graylog/FormControl.jsx @@ -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 { diff --git a/graylog2-web-interface/src/components/graylog/FormGroup.jsx b/graylog2-web-interface/src/components/graylog/FormGroup.jsx index bcacc67f69f3..fa74597f77c6 100644 --- a/graylog2-web-interface/src/components/graylog/FormGroup.jsx +++ b/graylog2-web-interface/src/components/graylog/FormGroup.jsx @@ -14,9 +14,9 @@ const VALID_STATES = ['error', 'warning', 'success']; const createCss = (validationState) => css(({ theme }) => { const variant = validationState === 'error' ? 'danger' : validationState; - const text = theme.utils.colorLevel(theme.color.variant[variant], 6); - const border = theme.color.variant[variant]; - const background = theme.utils.colorLevel(theme.color.variant[variant], -6); + const text = theme.utils.colorLevel(theme.colors.variant[variant], 6); + const border = theme.colors.variant[variant]; + const background = theme.utils.colorLevel(theme.colors.variant[variant], -6); return css` &.has-${validationState} { diff --git a/graylog2-web-interface/src/components/graylog/HelpBlock.jsx b/graylog2-web-interface/src/components/graylog/HelpBlock.jsx index a2eb2ae9c9b0..2716e0839739 100644 --- a/graylog2-web-interface/src/components/graylog/HelpBlock.jsx +++ b/graylog2-web-interface/src/components/graylog/HelpBlock.jsx @@ -6,7 +6,7 @@ const HelpBlock = styled(BootstrapHelpBlock)(({ theme }) => css` display: block; margin-top: 5px; margin-bottom: 10px; - color: ${theme.color.gray[50]}; + color: ${theme.colors.gray[50]}; `); /** @component */ diff --git a/graylog2-web-interface/src/components/graylog/InputGroup.jsx b/graylog2-web-interface/src/components/graylog/InputGroup.jsx index ae349367e199..20d77ce10726 100644 --- a/graylog2-web-interface/src/components/graylog/InputGroup.jsx +++ b/graylog2-web-interface/src/components/graylog/InputGroup.jsx @@ -10,9 +10,9 @@ const StyledBootstrapInputAddon = ({ className, ...rest }) => { }; export const StyledAddon = styled(StyledBootstrapInputAddon)(({ theme }) => css` - color: ${theme.color.gray[30]}; - background-color: ${theme.color.global.contentBackground}; - border-color: ${theme.color.gray[80]}; + color: ${theme.colors.gray[30]}; + background-color: ${theme.colors.global.contentBackground}; + border-color: ${theme.colors.gray[80]}; `); const Addon = ({ bsClass, className, ...addonProps }) => { diff --git a/graylog2-web-interface/src/components/graylog/Jumbotron.jsx b/graylog2-web-interface/src/components/graylog/Jumbotron.jsx index 8f9e6cda0e23..f33f8c7b088e 100644 --- a/graylog2-web-interface/src/components/graylog/Jumbotron.jsx +++ b/graylog2-web-interface/src/components/graylog/Jumbotron.jsx @@ -4,8 +4,8 @@ import styled, { css } from 'styled-components'; import { Jumbotron as BootstrapJumbotron } from 'react-bootstrap'; export const StyledJumbotron = styled(BootstrapJumbotron)(({ theme }) => css` - color: ${theme.color.global.textDefault}; - background-color: ${theme.color.global.contentBackground}; + color: ${theme.colors.global.textDefault}; + background-color: ${theme.colors.global.contentBackground}; `); const Jumbotron = forwardRef((props, ref) => { diff --git a/graylog2-web-interface/src/components/graylog/ListGroupItem.jsx b/graylog2-web-interface/src/components/graylog/ListGroupItem.jsx index b0ae78310257..c0e3b5401e7f 100644 --- a/graylog2-web-interface/src/components/graylog/ListGroupItem.jsx +++ b/graylog2-web-interface/src/components/graylog/ListGroupItem.jsx @@ -7,7 +7,7 @@ import { ListGroupItem as BootstrapListGroupItem } from 'react-bootstrap'; import bsStyleThemeVariant from './variants/bsStyle'; const listGroupItemStyles = (hex, variant) => css(({ theme }) => { - const backgroundColor = theme.utils.colorLevel(theme.color.variant.light[variant], -5); + const backgroundColor = theme.utils.colorLevel(theme.colors.variant.light[variant], -5); const textColor = theme.utils.readableColor(backgroundColor); return css` @@ -27,15 +27,15 @@ const listGroupItemStyles = (hex, variant) => css(({ theme }) => { &:hover, &:focus { color: ${textColor}; - background-color: ${theme.color.variant.light[variant]}; + background-color: ${theme.colors.variant.light[variant]}; } &.active, &.active:hover, &.active:focus { - color: ${theme.utils.readableColor(theme.color.variant.light[variant])}; - background-color: ${theme.color.variant.light[variant]}; - border-color: ${theme.color.variant.light[variant]}; + color: ${theme.utils.readableColor(theme.colors.variant.light[variant])}; + background-color: ${theme.colors.variant.light[variant]}; + border-color: ${theme.colors.variant.light[variant]}; } } } @@ -43,8 +43,8 @@ const listGroupItemStyles = (hex, variant) => css(({ theme }) => { }); const StyledListGroupItem = styled(BootstrapListGroupItem)(({ theme }) => css` - background-color: ${theme.color.global.contentBackground}; - border-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.global.contentBackground}; + border-color: ${theme.colors.gray[80]}; .list-group-item-heading { font-weight: bold; @@ -53,8 +53,8 @@ const StyledListGroupItem = styled(BootstrapListGroupItem)(({ theme }) => css` &.disabled, &.disabled:hover, &.disabled:focus { - color: ${theme.color.gray[60]}; - background-color: ${theme.color.gray[90]}; + color: ${theme.colors.gray[60]}; + background-color: ${theme.colors.gray[90]}; .list-group-item-heading { color: inherit; @@ -62,16 +62,16 @@ const StyledListGroupItem = styled(BootstrapListGroupItem)(({ theme }) => css` } .list-group-item-text { - color: ${theme.color.gray[60]}; + color: ${theme.colors.gray[60]}; } } &.active, &.active:hover, &.active:focus { - color: ${theme.color.gray[100]}; - background-color: ${theme.color.variant.light.primary}; - border-color: ${theme.color.variant.light.primary}; + color: ${theme.colors.gray[100]}; + background-color: ${theme.colors.variant.light.primary}; + border-color: ${theme.colors.variant.light.primary}; z-index: auto; .list-group-item-heading, @@ -82,32 +82,32 @@ const StyledListGroupItem = styled(BootstrapListGroupItem)(({ theme }) => css` } .list-group-item-text { - color: ${theme.color.variant.light.primary}; + color: ${theme.colors.variant.light.primary}; } } a&, button& { - color: ${theme.color.global.link}; + color: ${theme.colors.global.link}; .list-group-item-heading { - color: ${theme.color.gray[20]}; + color: ${theme.colors.gray[20]}; font-weight: bold; } &:hover:not(.disabled), &:focus:not(.disabled) { - background-color: ${theme.color.gray[40]}; - color: ${theme.utils.readableColor(theme.color.gray[40])}; + background-color: ${theme.colors.gray[40]}; + color: ${theme.utils.readableColor(theme.colors.gray[40])}; &.active { - color: ${theme.utils.readableColor(theme.color.variant.primary)}; - border-color: ${theme.color.variant.primary}; - background-color: ${theme.color.variant.primary}; + color: ${theme.utils.readableColor(theme.colors.variant.primary)}; + border-color: ${theme.colors.variant.primary}; + background-color: ${theme.colors.variant.primary}; } .list-group-item-heading { - color: ${theme.utils.readableColor(theme.color.gray[40])}; + color: ${theme.utils.readableColor(theme.colors.gray[40])}; } } } diff --git a/graylog2-web-interface/src/components/graylog/MessageDetailsDefinitionList.jsx b/graylog2-web-interface/src/components/graylog/MessageDetailsDefinitionList.jsx index 52415bb81533..3ecbcf512f63 100644 --- a/graylog2-web-interface/src/components/graylog/MessageDetailsDefinitionList.jsx +++ b/graylog2-web-interface/src/components/graylog/MessageDetailsDefinitionList.jsx @@ -31,7 +31,7 @@ const MessageDetailsDefinitionList = styled.dl(({ theme }) => ` } &.message-details-fields span:not(:last-child) dd { - border-bottom: 1px solid ${theme.color.gray[90]}; + border-bottom: 1px solid ${theme.colors.gray[90]}; } &.message-details-fields dd { diff --git a/graylog2-web-interface/src/components/graylog/Modal.jsx b/graylog2-web-interface/src/components/graylog/Modal.jsx index d7967a4fbe53..19d25a19549c 100644 --- a/graylog2-web-interface/src/components/graylog/Modal.jsx +++ b/graylog2-web-interface/src/components/graylog/Modal.jsx @@ -5,15 +5,15 @@ import chroma from 'chroma-js'; const Modal = styled(BootstrapModal)(({ theme }) => css` .modal-content { - background-color: ${theme.color.global.contentBackground}; - border-color: ${chroma(theme.color.gray[10]).alpha(0.2).css()}; + background-color: ${theme.colors.global.contentBackground}; + border-color: ${chroma(theme.colors.gray[10]).alpha(0.2).css()}; .modal-header { - border-bottom-color: ${theme.color.gray[90]}; + border-bottom-color: ${theme.colors.gray[90]}; } .modal-footer { - border-top-color: ${theme.color.gray[90]}; + border-top-color: ${theme.colors.gray[90]}; } } diff --git a/graylog2-web-interface/src/components/graylog/Nav.jsx b/graylog2-web-interface/src/components/graylog/Nav.jsx index b9c83fe09ae9..9f8fe5e3e247 100644 --- a/graylog2-web-interface/src/components/graylog/Nav.jsx +++ b/graylog2-web-interface/src/components/graylog/Nav.jsx @@ -10,16 +10,16 @@ const Nav = styled(BootstrapNav)(({ theme }) => css` > a { &:hover, &:focus { - background-color: ${theme.color.gray[90]}; + background-color: ${theme.colors.gray[90]}; } } &.disabled > a { - color: ${theme.color.gray[60]}; + color: ${theme.colors.gray[60]}; &:hover, &:focus { - color: ${theme.color.gray[60]}; + color: ${theme.colors.gray[60]}; } } } @@ -28,8 +28,8 @@ const Nav = styled(BootstrapNav)(({ theme }) => css` &, &:hover, &:focus { - background-color: ${theme.color.gray[90]}; - border-color: ${theme.color.variant.primary}; + background-color: ${theme.colors.gray[90]}; + border-color: ${theme.colors.variant.primary}; } } @@ -39,8 +39,8 @@ const Nav = styled(BootstrapNav)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.global.textAlt}; - background-color: ${theme.color.variant.primary}; + color: ${theme.colors.global.textAlt}; + background-color: ${theme.colors.variant.primary}; } } } diff --git a/graylog2-web-interface/src/components/graylog/Navbar.jsx b/graylog2-web-interface/src/components/graylog/Navbar.jsx index d733bfe9e157..0fd9defeec8f 100644 --- a/graylog2-web-interface/src/components/graylog/Navbar.jsx +++ b/graylog2-web-interface/src/components/graylog/Navbar.jsx @@ -7,32 +7,32 @@ import { breakpoint } from 'theme'; const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &.navbar-default { - background-color: ${theme.color.gray[90]}; - border-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.gray[90]}; + border-color: ${theme.colors.gray[80]}; .navbar-brand { - color: ${theme.color.variant.info}; + color: ${theme.colors.variant.info}; padding: 12px 15px 0 15px; &:hover, &:focus { - color: ${theme.color.variant.dark.info}; + color: ${theme.colors.variant.dark.info}; background-color: transparent; } } .navbar-text { - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; } .navbar-nav { > li > a, > li > .btn-link { - color: ${theme.color.variant.info}; + color: ${theme.colors.variant.info}; &:hover, &:focus { - color: ${theme.color.variant.dark.info}; + color: ${theme.colors.variant.dark.info}; background-color: transparent; } } @@ -41,8 +41,8 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.utils.readableColor(theme.color.gray[80])}; - background-color: ${theme.color.gray[80]}; + color: ${theme.utils.readableColor(theme.colors.gray[80])}; + background-color: ${theme.colors.gray[80]}; } } @@ -50,7 +50,7 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.gray[70]}; + color: ${theme.colors.gray[70]}; background-color: transparent; } } @@ -59,8 +59,8 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${chroma(theme.color.variant.info).darken(0.15)}; - background-color: ${chroma(theme.color.gray[90]).darken(0.065)}; + color: ${chroma(theme.colors.variant.info).darken(0.15)}; + background-color: ${chroma(theme.colors.gray[90]).darken(0.065)}; } } @@ -68,11 +68,11 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` .open .dropdown-menu { > li > a, > li > .btn-link { - color: ${theme.color.variant.info}; + color: ${theme.colors.variant.info}; &:hover, &:focus { - color: ${chroma(theme.color.variant.info).darken(0.25)}; + color: ${chroma(theme.colors.variant.info).darken(0.25)}; background-color: transparent; } } @@ -81,8 +81,8 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${chroma(theme.color.variant.info).darken(0.15)}; - background-color: ${chroma(theme.color.gray[90]).darken(0.065)}; + color: ${chroma(theme.colors.variant.info).darken(0.15)}; + background-color: ${chroma(theme.colors.gray[90]).darken(0.065)}; } } @@ -90,7 +90,7 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.gray[80]}; + color: ${theme.colors.gray[80]}; background-color: transparent; } } @@ -99,76 +99,76 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` } .navbar-toggle { - border-color: ${theme.color.gray[80]}; + border-color: ${theme.colors.gray[80]}; &:hover, &:focus { - background-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.gray[80]}; } .icon-bar { - background-color: ${chroma(theme.color.gray[80]).darken(0.25)}; + background-color: ${chroma(theme.colors.gray[80]).darken(0.25)}; } } .navbar-collapse, .navbar-form { - border-color: ${chroma(theme.color.gray[90]).darken(0.065)}; + border-color: ${chroma(theme.colors.gray[90]).darken(0.065)}; } .navbar-link { - color: ${theme.color.variant.info}; + color: ${theme.colors.variant.info}; &:hover { - color: ${chroma(theme.color.variant.info).darken(0.25)}; + color: ${chroma(theme.colors.variant.info).darken(0.25)}; } } .btn-link { - color: ${theme.color.variant.info}; + color: ${theme.colors.variant.info}; &:hover, &:focus { - color: ${theme.color.variant.dark.info}; + color: ${theme.colors.variant.dark.info}; } &[disabled], fieldset[disabled] & { &:hover, &:focus { - color: ${theme.color.gray[80]}; + color: ${theme.colors.gray[80]}; } } } } &.navbar-inverse { - background-color: ${theme.color.gray[10]}; + background-color: ${theme.colors.gray[10]}; border: 0; .navbar-brand { - color: ${chroma(theme.color.variant.info).brighten(0.15)}; + color: ${chroma(theme.colors.variant.info).brighten(0.15)}; padding: 12px 15px 0 15px; &:hover, &:focus { - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; background-color: transparent; } } .navbar-text { - color: ${chroma(theme.color.global.textDefault).brighten(0.15)}; + color: ${chroma(theme.colors.global.textDefault).brighten(0.15)}; } .navbar-nav { > li > a, > li > .btn-link { - color: ${theme.color.gray[90]}; + color: ${theme.colors.gray[90]}; &:hover, &:focus { - color: ${theme.color.variant.light.info}; + color: ${theme.colors.variant.light.info}; background-color: transparent; } } @@ -177,8 +177,8 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.global.textAlt}; - background-color: ${theme.color.gray[20]}; + color: ${theme.colors.global.textAlt}; + background-color: ${theme.colors.gray[20]}; } } @@ -186,7 +186,7 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${chroma(theme.color.global.textDefault).brighten(0.50)}; + color: ${chroma(theme.colors.global.textDefault).brighten(0.50)}; background-color: transparent; } } @@ -195,28 +195,28 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.global.textAlt}; - background-color: ${theme.color.gray[20]}; + color: ${theme.colors.global.textAlt}; + background-color: ${theme.colors.gray[20]}; } } @media (max-width: ${breakpoint.max.sm}) { .open .dropdown-menu { > .dropdown-header { - border-color: ${theme.color.gray[10]}; + border-color: ${theme.colors.gray[10]}; } .divider { - background-color: ${theme.color.gray[20]}; + background-color: ${theme.colors.gray[20]}; } > li > a, > li > .btn-link { - color: ${theme.color.gray[90]}; + color: ${theme.colors.gray[90]}; &:hover, &:focus { - color: ${theme.color.variant.light.info}; + color: ${theme.colors.variant.light.info}; background-color: transparent; } } @@ -225,8 +225,8 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.global.textAlt}; - background-color: ${theme.color.gray[20]}; + color: ${theme.colors.global.textAlt}; + background-color: ${theme.colors.gray[20]}; } } @@ -234,7 +234,7 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` &, &:hover, &:focus { - color: ${chroma(theme.color.global.textDefault).brighten(0.50)}; + color: ${chroma(theme.colors.global.textDefault).brighten(0.50)}; background-color: transparent; } } @@ -243,44 +243,44 @@ const Navbar = styled(BootstrapNavbar)(({ theme }) => css` } .navbar-toggle { - border-color: ${theme.color.gray[70]}; + border-color: ${theme.colors.gray[70]}; &:hover, &:focus { - background-color: ${theme.color.gray[70]}; + background-color: ${theme.colors.gray[70]}; } .icon-bar { - background-color: ${theme.color.global.textAlt}; + background-color: ${theme.colors.global.textAlt}; } } .navbar-collapse, .navbar-form { - border-color: ${theme.color.gray[70]}; + border-color: ${theme.colors.gray[70]}; } .navbar-link { - color: ${chroma(theme.color.variant.info).brighten(0.15)}; + color: ${chroma(theme.colors.variant.info).brighten(0.15)}; &:hover { - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; } } .btn-link { - color: ${chroma(theme.color.variant.info).brighten(0.15)}; + color: ${chroma(theme.colors.variant.info).brighten(0.15)}; &:hover, &:focus { - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; } &[disabled], fieldset[disabled] & { &:hover, &:focus { - color: ${chroma(theme.color.global.textDefault).brighten(0.50)}; + color: ${chroma(theme.colors.global.textDefault).brighten(0.50)}; } } } diff --git a/graylog2-web-interface/src/components/graylog/Pagination.jsx b/graylog2-web-interface/src/components/graylog/Pagination.jsx index a5541ee1fcd4..fda6e3513543 100644 --- a/graylog2-web-interface/src/components/graylog/Pagination.jsx +++ b/graylog2-web-interface/src/components/graylog/Pagination.jsx @@ -12,15 +12,15 @@ export const paginationStyles = css(({ theme }) => css` > li { > a, > span { - color: ${theme.utils.readableColor(theme.color.global.contentBackground)}; - background-color: ${theme.color.global.contentBackground}; - border-color: ${theme.color.gray[80]}; + color: ${theme.utils.readableColor(theme.colors.global.contentBackground)}; + background-color: ${theme.colors.global.contentBackground}; + border-color: ${theme.colors.gray[80]}; &:hover, &:focus { - color: ${theme.color.variant.dark.primary}; - background-color: ${theme.color.gray[90]}; - border-color: ${theme.color.gray[80]}; + color: ${theme.colors.variant.dark.primary}; + background-color: ${theme.colors.gray[90]}; + border-color: ${theme.colors.gray[80]}; } } } @@ -30,9 +30,9 @@ export const paginationStyles = css(({ theme }) => css` &, &:hover, &:focus { - color: ${theme.color.variant.dark.primary}; - background-color: ${theme.color.gray[90]}; - border-color: ${theme.color.gray[80]}; + color: ${theme.colors.variant.dark.primary}; + background-color: ${theme.colors.gray[90]}; + border-color: ${theme.colors.gray[80]}; } } @@ -43,9 +43,9 @@ export const paginationStyles = css(({ theme }) => css` > a, > a:hover, > a:focus { - color: ${theme.color.gray[60]}; - background-color: ${theme.color.gray[80]}; - border-color: ${theme.color.gray[80]}; + color: ${theme.colors.gray[60]}; + background-color: ${theme.colors.gray[80]}; + border-color: ${theme.colors.gray[80]}; } } } diff --git a/graylog2-web-interface/src/components/graylog/Panel.jsx b/graylog2-web-interface/src/components/graylog/Panel.jsx index d687e0522959..fa7a30016db3 100644 --- a/graylog2-web-interface/src/components/graylog/Panel.jsx +++ b/graylog2-web-interface/src/components/graylog/Panel.jsx @@ -10,13 +10,13 @@ import bsStyleThemeVariant from './variants/bsStyle'; const PanelHeading = styled(BootstrapPanel.Heading)``; const PanelFooter = styled(BootstrapPanel.Footer)(({ theme }) => css` - background-color: ${theme.color.gray[90]}; - border-top-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.gray[90]}; + border-top-color: ${theme.colors.gray[80]}; `); const panelVariantStyles = (hex, variant) => css(({ theme }) => { - const backgroundColor = theme.utils.colorLevel(theme.color.variant.light[variant], -10); - const borderColor = theme.utils.colorLevel(theme.color.variant.light[variant], 10); + const backgroundColor = theme.utils.colorLevel(theme.colors.variant.light[variant], -10); + const borderColor = theme.utils.colorLevel(theme.colors.variant.light[variant], 10); return css` border-color: ${borderColor}; @@ -45,7 +45,7 @@ const panelVariantStyles = (hex, variant) => css(({ theme }) => { }); const StyledPanel = styled(BootstrapPanel)(({ theme }) => css` - background-color: ${theme.utils.colorLevel(theme.color.global.background, -4)}; + background-color: ${theme.utils.colorLevel(theme.colors.global.background, -4)}; > ${PanelHeading} { .panel-title, @@ -58,13 +58,13 @@ const StyledPanel = styled(BootstrapPanel)(({ theme }) => css` > ${PanelHeading} { + .panel-collapse > .panel-body, + .panel-collapse > .list-group { - border-top-color: ${theme.color.gray[90]}; + border-top-color: ${theme.colors.gray[90]}; } } > ${PanelFooter} { + .panel-collapse .panel-body { - border-bottom-color: ${theme.color.gray[90]}; + border-bottom-color: ${theme.colors.gray[90]}; } } } @@ -73,8 +73,8 @@ const StyledPanel = styled(BootstrapPanel)(({ theme }) => css` `); const deprecatedVariantStyles = (hex, variant) => css(({ theme }) => { - const backgroundColor = theme.utils.colorLevel(theme.color.variant.light[variant], -10); - const borderColor = theme.utils.colorLevel(theme.color.variant.light[variant], 10); + const backgroundColor = theme.utils.colorLevel(theme.colors.variant.light[variant], -10); + const borderColor = theme.utils.colorLevel(theme.colors.variant.light[variant], 10); return css` /** NOTE: Deprecated & should be removed in 4.0 */ @@ -110,24 +110,24 @@ const deprecatedVariantStyles = (hex, variant) => css(({ theme }) => { const DeprecatedStyledPanel = styled(BootstrapPanel)(({ theme }) => css` /** NOTE: Deprecated & should be removed in 4.0 */ - background-color: ${theme.utils.colorLevel(theme.color.global.background, -4)}; + background-color: ${theme.utils.colorLevel(theme.colors.global.background, -4)}; .panel-footer { - background-color: ${theme.color.gray[90]}; - border-top-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.gray[90]}; + border-top-color: ${theme.colors.gray[80]}; } .panel-group { .panel-heading { + .panel-collapse > .panel-body, + .panel-collapse > .list-group { - border-top-color: ${theme.color.gray[90]}; + border-top-color: ${theme.colors.gray[90]}; } } .panel-footer { + .panel-collapse .panel-body { - border-bottom-color: ${theme.color.gray[90]}; + border-bottom-color: ${theme.colors.gray[90]}; } } } diff --git a/graylog2-web-interface/src/components/graylog/Popover.jsx b/graylog2-web-interface/src/components/graylog/Popover.jsx index 3c46cd84ec53..63b5bd76972d 100644 --- a/graylog2-web-interface/src/components/graylog/Popover.jsx +++ b/graylog2-web-interface/src/components/graylog/Popover.jsx @@ -7,17 +7,17 @@ import chroma from 'chroma-js'; import GraylogThemeProvider from 'theme/GraylogThemeProvider'; const StyledPopover = styled(BoostrapPopover)(({ theme }) => { - const borderColor = chroma(theme.color.gray[10]).alpha(0.2).css(); + const borderColor = chroma(theme.colors.gray[10]).alpha(0.2).css(); return css` - background-color: ${theme.color.global.contentBackground}; + background-color: ${theme.colors.global.contentBackground}; border-color: ${borderColor}; &.top > .arrow { border-top-color: ${theme.utils.opacify(borderColor, 0.05)}; &::after { - border-top-color: ${theme.color.gray[100]}; + border-top-color: ${theme.colors.gray[100]}; } } @@ -25,7 +25,7 @@ const StyledPopover = styled(BoostrapPopover)(({ theme }) => { border-right-color: ${theme.utils.opacify(borderColor, 0.05)}; &::after { - border-right-color: ${theme.color.gray[100]}; + border-right-color: ${theme.colors.gray[100]}; } } @@ -33,7 +33,7 @@ const StyledPopover = styled(BoostrapPopover)(({ theme }) => { border-bottom-color: ${theme.utils.opacify(borderColor, 0.05)}; &::after { - border-bottom-color: ${theme.color.gray[100]}; + border-bottom-color: ${theme.colors.gray[100]}; } } @@ -41,12 +41,12 @@ const StyledPopover = styled(BoostrapPopover)(({ theme }) => { border-left-color: ${theme.utils.opacify(borderColor, 0.05)}; &::after { - border-left-color: ${theme.color.gray[100]}; + border-left-color: ${theme.colors.gray[100]}; } } .popover-title { - background-color: ${theme.color.gray[90]}; + background-color: ${theme.colors.gray[90]}; } `; }); diff --git a/graylog2-web-interface/src/components/graylog/ProgressBar.jsx b/graylog2-web-interface/src/components/graylog/ProgressBar.jsx index 42b40023eebd..6017b37ff478 100644 --- a/graylog2-web-interface/src/components/graylog/ProgressBar.jsx +++ b/graylog2-web-interface/src/components/graylog/ProgressBar.jsx @@ -34,7 +34,7 @@ const DEFAULT_BAR = { }; const boxShadow = (meta) => css` - box-shadow: ${meta} ${({ theme }) => chroma(theme.color.brand.secondary).alpha(0.1).css()}; + box-shadow: ${meta} ${({ theme }) => chroma(theme.colors.brand.secondary).alpha(0.1).css()}; `; const animatedStripes = keyframes` @@ -56,7 +56,7 @@ const ProgressWrap: StyledComponent<{}, ThemeInterface, HTMLDivElement> = styled height: 20px; margin-bottom: 20px; overflow: hidden; - background-color: ${theme.color.gray[90]}; + background-color: ${theme.colors.gray[90]}; border-radius: 4px; ${boxShadow('inset 0 1px 2px')}; display: flex; @@ -64,7 +64,7 @@ const ProgressWrap: StyledComponent<{}, ThemeInterface, HTMLDivElement> = styled `); const Bar: StyledComponent = styled.div(({ animated, striped, theme, value }) => { - const defaultStripColor = chroma(theme.color.global.contentBackground).alpha(0.25).css(); + const defaultStripColor = chroma(theme.colors.global.contentBackground).alpha(0.25).css(); return css` height: 100%; @@ -75,7 +75,7 @@ const Bar: StyledComponent = styled.di transition: width 500ms ease-in-out; width: ${value}%; max-width: 100%; - text-shadow: 0 1px 2px ${chroma(theme.color.gray[10]).alpha(0.4).css()}, 2px -1px 3px ${chroma(theme.color.gray[100]).alpha(0.5).css()}; + text-shadow: 0 1px 2px ${chroma(theme.colors.gray[10]).alpha(0.4).css()}, 2px -1px 3px ${chroma(theme.colors.gray[100]).alpha(0.5).css()}; ${(animated || striped) && css` background-image: linear-gradient( 45deg, diff --git a/graylog2-web-interface/src/components/graylog/Tab.jsx b/graylog2-web-interface/src/components/graylog/Tab.jsx index f4fe2fc6b380..c2f8a4c210e6 100644 --- a/graylog2-web-interface/src/components/graylog/Tab.jsx +++ b/graylog2-web-interface/src/components/graylog/Tab.jsx @@ -3,8 +3,8 @@ import { Tab as BootstrapTab } from 'react-bootstrap'; import styled, { css } from 'styled-components'; const Tab = styled(BootstrapTab)(({ theme }) => css` - background-color: ${theme.color.global.contentBackground}; - border: 1px solid ${theme.utils.colorLevel(theme.color.variant.info, -5)}; + background-color: ${theme.colors.global.contentBackground}; + border: 1px solid ${theme.utils.colorLevel(theme.colors.variant.info, -5)}; border-top: 0; border-radius: 0 0 4px 4px; padding: 9px; diff --git a/graylog2-web-interface/src/components/graylog/Table.jsx b/graylog2-web-interface/src/components/graylog/Table.jsx index 5fb594e77880..adb552590c0a 100644 --- a/graylog2-web-interface/src/components/graylog/Table.jsx +++ b/graylog2-web-interface/src/components/graylog/Table.jsx @@ -7,24 +7,24 @@ const variantRowStyles = css(({ theme }) => { const variants = { active: { - background: theme.utils.colorLevel(theme.color.global.tableBackgroundAlt, -10), - hover: theme.utils.colorLevel(theme.color.global.tableBackgroundAlt, -9), + background: theme.utils.colorLevel(theme.colors.global.tableBackgroundAlt, -10), + hover: theme.utils.colorLevel(theme.colors.global.tableBackgroundAlt, -9), }, success: { - background: theme.utils.colorLevel(theme.color.variant.success, -10), - hover: theme.utils.colorLevel(theme.color.variant.success, -9), + background: theme.utils.colorLevel(theme.colors.variant.success, -10), + hover: theme.utils.colorLevel(theme.colors.variant.success, -9), }, info: { - background: theme.utils.colorLevel(theme.color.variant.info, -10), - hover: theme.utils.colorLevel(theme.color.variant.info, -9), + background: theme.utils.colorLevel(theme.colors.variant.info, -10), + hover: theme.utils.colorLevel(theme.colors.variant.info, -9), }, warning: { - background: theme.utils.colorLevel(theme.color.variant.warning, -10), - hover: theme.utils.colorLevel(theme.color.variant.warning, -9), + background: theme.utils.colorLevel(theme.colors.variant.warning, -10), + hover: theme.utils.colorLevel(theme.colors.variant.warning, -9), }, danger: { - background: theme.utils.colorLevel(theme.color.variant.danger, -10), - hover: theme.utils.colorLevel(theme.color.variant.danger, -9), + background: theme.utils.colorLevel(theme.colors.variant.danger, -10), + hover: theme.utils.colorLevel(theme.colors.variant.danger, -9), }, }; @@ -64,7 +64,7 @@ const variantRowStyles = css(({ theme }) => { const Table = styled(BootstrapTable)(({ theme }) => { return css` - background-color: ${theme.color.global.tableBackground}; + background-color: ${theme.colors.global.tableBackground}; &.table > thead > tr > th, &.table > tbody > tr > th, @@ -72,23 +72,23 @@ const Table = styled(BootstrapTable)(({ theme }) => { &.table > thead > tr > td, &.table > tbody > tr > td, &.table > tfoot > tr > td { - border-top-color: ${theme.color.global.tableBackgroundAlt}; + border-top-color: ${theme.colors.global.tableBackgroundAlt}; } &.table > thead > tr > th { - border-bottom-color: ${theme.color.global.tableBackgroundAlt}; + border-bottom-color: ${theme.colors.global.tableBackgroundAlt}; } &.table > tbody + tbody { - border-top-color: ${theme.color.global.tableBackgroundAlt}; + border-top-color: ${theme.colors.global.tableBackgroundAlt}; } .table .table { - background-color: ${theme.color.gray[100]}; + background-color: ${theme.colors.gray[100]}; } &.table-bordered { - border-color: ${theme.color.global.tableBackgroundAlt}; + border-color: ${theme.colors.global.tableBackgroundAlt}; } &.table-bordered > thead > tr > th, @@ -97,15 +97,15 @@ const Table = styled(BootstrapTable)(({ theme }) => { &.table-bordered > thead > tr > td, &.table-bordered > tbody > tr > td, &.table-bordered > tfoot > tr > td { - border-color: ${theme.color.global.tableBackgroundAlt}; + border-color: ${theme.colors.global.tableBackgroundAlt}; } &.table-striped > tbody > tr:nth-of-type(odd) { - background-color: ${theme.color.gray[90]}; + background-color: ${theme.colors.gray[90]}; } &.table-hover > tbody > tr:hover { - background-color: ${theme.color.global.tableBackgroundAlt}; + background-color: ${theme.colors.global.tableBackgroundAlt}; } ${variantRowStyles}; diff --git a/graylog2-web-interface/src/components/graylog/Tooltip.jsx b/graylog2-web-interface/src/components/graylog/Tooltip.jsx index c159d3e5ec8d..d55559307982 100644 --- a/graylog2-web-interface/src/components/graylog/Tooltip.jsx +++ b/graylog2-web-interface/src/components/graylog/Tooltip.jsx @@ -14,33 +14,33 @@ const StyledTooltip = styled(BootstrapTooltip)(({ theme }) => css` &.top .tooltip-arrow, &.top-left .tooltip-arrow, &.top-right .tooltip-arrow { - border-top-color: ${theme.color.gray[10]}; + border-top-color: ${theme.colors.gray[10]}; } &.right .tooltip-arrow { - border-right-color: ${theme.color.gray[10]}; + border-right-color: ${theme.colors.gray[10]}; } &.left .tooltip-arrow { - border-left-color: ${theme.color.gray[10]}; + border-left-color: ${theme.colors.gray[10]}; } &.bottom .tooltip-arrow, &.bottom-left .tooltip-arrow, &.bottom-right .tooltip-arrow { - border-bottom-color: ${theme.color.gray[10]}; + border-bottom-color: ${theme.colors.gray[10]}; } .tooltip-inner { - color: ${theme.utils.readableColor(theme.color.gray[10])}; - background-color: ${theme.color.gray[10]}; + color: ${theme.utils.readableColor(theme.colors.gray[10])}; + background-color: ${theme.colors.gray[10]}; max-width: 300px; .datapoint-info { text-align: left; .date { - color: ${theme.color.gray[90]}; + color: ${theme.colors.gray[90]}; } } } diff --git a/graylog2-web-interface/src/components/graylog/Well.jsx b/graylog2-web-interface/src/components/graylog/Well.jsx index 469d2275747e..2523f690aab8 100644 --- a/graylog2-web-interface/src/components/graylog/Well.jsx +++ b/graylog2-web-interface/src/components/graylog/Well.jsx @@ -3,8 +3,8 @@ import { Well as BootstrapWell } from 'react-bootstrap'; import styled, { css } from 'styled-components'; const Well = styled(BootstrapWell)(({ theme }) => css` - background-color: ${theme.color.gray[90]}; - border-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.gray[90]}; + border-color: ${theme.colors.gray[80]}; `); /** @component */ diff --git a/graylog2-web-interface/src/components/graylog/styles/buttonStyles.js b/graylog2-web-interface/src/components/graylog/styles/buttonStyles.js index 6884d286321b..d7d37988b001 100644 --- a/graylog2-web-interface/src/components/graylog/styles/buttonStyles.js +++ b/graylog2-web-interface/src/components/graylog/styles/buttonStyles.js @@ -1,36 +1,36 @@ import chroma from 'chroma-js'; import { css } from 'styled-components'; -const buttonStyles = ({ color }) => { +const buttonStyles = ({ colors }) => { const variants = { - danger: color.variant.danger, - default: color.gray[90], - info: color.variant.info, + danger: colors.variant.danger, + default: colors.gray[90], + info: colors.variant.info, link: 'rgba(255, 255, 255, 0)', - primary: color.variant.primary, - success: color.variant.success, - warning: color.variant.warning, + primary: colors.variant.primary, + success: colors.variant.success, + warning: colors.variant.warning, }; - const mixColor = (originalColor) => chroma.mix(originalColor, color.global.textDefault, 0.15); + const mixColor = (originalColor) => chroma.mix(originalColor, colors.global.textDefault, 0.15); return Object.keys(variants).map((variant) => css(({ theme }) => { const variantColor = variants[variant]; const isLink = variant === 'link'; - const buttonAdjustColor = chroma(variantColor).luminance() > 0.5 ? color.global.textDefault : color.global.textAlt; + const buttonAdjustColor = chroma(variantColor).luminance() > 0.5 ? colors.global.textDefault : colors.global.textAlt; const defaultBackground = variantColor; const defaultBorder = isLink ? variants.link : chroma.mix(variantColor, buttonAdjustColor, 0.05); - const defaultColor = isLink ? color.global.link : theme.utils.contrastingColor(defaultBackground); + const defaultColor = isLink ? colors.global.link : theme.utils.contrastingColor(defaultBackground); const activeBackground = isLink ? variants.link : chroma.mix(variantColor, buttonAdjustColor, 0.10); const activeBorder = isLink ? variants.link : chroma.mix(variantColor, buttonAdjustColor, 0.15); - const activeColor = isLink ? color.global.linkHover : theme.utils.contrastingColor(activeBackground); + const activeColor = isLink ? colors.global.linkHover : theme.utils.contrastingColor(activeBackground); const disabledBackground = isLink ? variants.link : chroma.mix(variantColor, buttonAdjustColor, 0.20); const disabledBorder = isLink ? variants.link : chroma.mix(variantColor, buttonAdjustColor, 0.15); - const disabledColor = isLink ? color.global.link : theme.utils.contrastingColor(disabledBackground, 'AA'); + const disabledColor = isLink ? colors.global.link : theme.utils.contrastingColor(disabledBackground, 'AA'); return css` &.btn-${variant} { diff --git a/graylog2-web-interface/src/components/graylog/styles/menuItem.js b/graylog2-web-interface/src/components/graylog/styles/menuItem.js index 587a07931045..e952d06dc8b7 100644 --- a/graylog2-web-interface/src/components/graylog/styles/menuItem.js +++ b/graylog2-web-interface/src/components/graylog/styles/menuItem.js @@ -3,33 +3,33 @@ import { css } from 'styled-components'; const menuItemStyles = css(({ theme }) => css` .dropdown-menu { > li > a { - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; :hover, :focus { - color: ${theme.utils.contrastingColor(theme.color.gray[90])}; - background-color: ${theme.color.gray[90]}; + color: ${theme.utils.contrastingColor(theme.colors.gray[90])}; + background-color: ${theme.colors.gray[90]}; } } > .active > a { - color: ${theme.utils.contrastingColor(theme.color.variant.light.info)}; - background-color: ${theme.color.variant.light.info}; + color: ${theme.utils.contrastingColor(theme.colors.variant.light.info)}; + background-color: ${theme.colors.variant.light.info}; :hover, :focus { - color: ${theme.utils.contrastingColor(theme.color.variant.info)}; - background-color: ${theme.color.variant.info}; + color: ${theme.utils.contrastingColor(theme.colors.variant.info)}; + background-color: ${theme.colors.variant.info}; } } > .disabled > a { - color: ${theme.utils.contrastingColor(theme.color.gray[90], 'AA')}; - background-color: ${theme.color.gray[90]}; + color: ${theme.utils.contrastingColor(theme.colors.gray[90], 'AA')}; + background-color: ${theme.colors.gray[90]}; :hover, :focus { - color: ${theme.utils.contrastingColor(theme.color.gray[90], 'AA')}; + color: ${theme.utils.contrastingColor(theme.colors.gray[90], 'AA')}; } } } diff --git a/graylog2-web-interface/src/components/graylog/styles/nav-tabs.js b/graylog2-web-interface/src/components/graylog/styles/nav-tabs.js index beb927be355c..acfbe6113e2c 100644 --- a/graylog2-web-interface/src/components/graylog/styles/nav-tabs.js +++ b/graylog2-web-interface/src/components/graylog/styles/nav-tabs.js @@ -2,7 +2,7 @@ import { css } from 'styled-components'; import { breakpoint } from 'theme'; const navTabsStyles = css(({ theme }) => { - const borderColor = theme.utils.colorLevel(theme.color.variant.info, -5); + const borderColor = theme.utils.colorLevel(theme.colors.variant.info, -5); return css` .nav-tabs { @@ -11,12 +11,12 @@ const navTabsStyles = css(({ theme }) => { > li { > a { transition: background-color 150ms ease-in-out; - color: ${theme.color.global.textDefault}; - border-color: ${theme.color.gray[80]} ${theme.color.gray[80]} ${borderColor}; + color: ${theme.colors.global.textDefault}; + border-color: ${theme.colors.gray[80]} ${theme.colors.gray[80]} ${borderColor}; &:hover { - background-color: ${theme.color.gray[80]}; - color: ${theme.utils.contrastingColor(theme.color.gray[80])}; + background-color: ${theme.colors.gray[80]}; + color: ${theme.utils.contrastingColor(theme.colors.gray[80])}; } } @@ -24,8 +24,8 @@ const navTabsStyles = css(({ theme }) => { &, &:hover, &:focus { - color: ${theme.color.gray[10]}; - background-color: ${theme.color.gray[100]}; + color: ${theme.colors.gray[10]}; + background-color: ${theme.colors.gray[100]}; border-color: ${borderColor}; border-bottom-color: transparent; } @@ -35,9 +35,9 @@ const navTabsStyles = css(({ theme }) => { &, &:hover, &:focus { - color: ${theme.color.gray[60]}; - background-color: ${theme.color.gray[100]}; - border-color: ${theme.color.gray[100]} ${theme.color.gray[100]} ${borderColor}; + color: ${theme.colors.gray[60]}; + background-color: ${theme.colors.gray[100]}; + border-color: ${theme.colors.gray[100]} ${theme.colors.gray[100]} ${borderColor}; cursor: not-allowed; } } @@ -61,7 +61,7 @@ const navTabsStyles = css(({ theme }) => { > .active > a, > .active > a:hover, > .active > a:focus { - border-bottom-color: ${theme.color.gray[100]}; + border-bottom-color: ${theme.colors.gray[100]}; } } } diff --git a/graylog2-web-interface/src/components/graylog/variants/bsStyle.js b/graylog2-web-interface/src/components/graylog/variants/bsStyle.js index 5387e1e33aac..c51ad0d97cf6 100644 --- a/graylog2-web-interface/src/components/graylog/variants/bsStyle.js +++ b/graylog2-web-interface/src/components/graylog/variants/bsStyle.js @@ -1,14 +1,14 @@ import theme from 'styled-theming'; -import { color, themeModes } from 'theme'; +import { colors, themeModes } from 'theme'; -const variantColors = (mode) => { +const variantColors = () => { return { - danger: color[mode].variant.danger, - default: color[mode].variant.default, - info: color[mode].variant.info, - primary: color[mode].variant.primary, - success: color[mode].variant.success, - warning: color[mode].variant.warning, + danger: colors.variant.danger, + default: colors.variant.default, + info: colors.variant.info, + primary: colors.variant.primary, + success: colors.variant.success, + warning: colors.variant.warning, }; }; diff --git a/graylog2-web-interface/src/components/indices/ShardRoutingOverview.jsx b/graylog2-web-interface/src/components/indices/ShardRoutingOverview.jsx index 697797b66644..611049af0de5 100644 --- a/graylog2-web-interface/src/components/indices/ShardRoutingOverview.jsx +++ b/graylog2-web-interface/src/components/indices/ShardRoutingOverview.jsx @@ -16,25 +16,25 @@ const ShardRoutingWrap = styled.div(({ theme }) => ` } .shard-started { - background-color: ${theme.utils.colorLevel(theme.color.variant.light.success, -2)}; + background-color: ${theme.utils.colorLevel(theme.colors.variant.light.success, -2)}; } .shard-relocating { - background-color: ${theme.utils.colorLevel(theme.color.variant.light.primary, -2)}; + background-color: ${theme.utils.colorLevel(theme.colors.variant.light.primary, -2)}; } .shard-initializing { - background-color: ${theme.utils.colorLevel(theme.color.variant.light.warning, -5)}; + background-color: ${theme.utils.colorLevel(theme.colors.variant.light.warning, -5)}; } .shard-unassigned { - background-color: ${theme.utils.colorLevel(theme.color.variant.light.default, -2)}; + background-color: ${theme.utils.colorLevel(theme.colors.variant.light.default, -2)}; } .shard-primary .id { font-weight: bold; margin-bottom: 3px; - border-bottom: 1px solid ${theme.color.gray[10]}; + border-bottom: 1px solid ${theme.colors.gray[10]}; } } diff --git a/graylog2-web-interface/src/components/inputs/InputThroughput.jsx b/graylog2-web-interface/src/components/inputs/InputThroughput.jsx index 91ef9d865c19..0a27c859515c 100644 --- a/graylog2-web-interface/src/components/inputs/InputThroughput.jsx +++ b/graylog2-web-interface/src/components/inputs/InputThroughput.jsx @@ -17,7 +17,7 @@ import { Icon, LinkToNode, Spinner } from 'components/common'; const InputIO = styled.span(({ theme }) => ` .total { - color: ${theme.color.gray[70]}; + color: ${theme.colors.gray[70]}; } .value { diff --git a/graylog2-web-interface/src/components/layout/Footer.jsx b/graylog2-web-interface/src/components/layout/Footer.jsx index 8fa2f01da2e5..9e84f09fea8d 100644 --- a/graylog2-web-interface/src/components/layout/Footer.jsx +++ b/graylog2-web-interface/src/components/layout/Footer.jsx @@ -21,7 +21,7 @@ type Props = { const StyledFooter: StyledComponent<{}, ThemeInterface, HTMLElement> = styled.footer(({ theme }) => css` text-align: center; font-size: 11px; - color: ${theme.color.gray[70]}; + color: ${theme.colors.gray[70]}; margin-bottom: 15px; height: 20px; diff --git a/graylog2-web-interface/src/components/ldap/TestLdapLogin.jsx b/graylog2-web-interface/src/components/ldap/TestLdapLogin.jsx index 7eac5f32f655..65d73e439895 100644 --- a/graylog2-web-interface/src/components/ldap/TestLdapLogin.jsx +++ b/graylog2-web-interface/src/components/ldap/TestLdapLogin.jsx @@ -27,7 +27,7 @@ const LoginResultPanel = styled(Panel)` `; const StatusIcon = styled(Icon)(({ status, theme }) => ` - color: ${theme.color.variant[status]}; + color: ${theme.colors.variant[status]}; `); diff --git a/graylog2-web-interface/src/components/login/LoginBox.jsx b/graylog2-web-interface/src/components/login/LoginBox.jsx index 3b7371ef2088..73fc19a2410b 100644 --- a/graylog2-web-interface/src/components/login/LoginBox.jsx +++ b/graylog2-web-interface/src/components/login/LoginBox.jsx @@ -6,8 +6,8 @@ import { Col, Row } from 'components/graylog'; const LoginCol = styled(Col)(({ theme }) => css` padding: 15px; - background-color: ${theme.color.global.contentBackground}; - border: 1px solid ${theme.color.gray[80]}; + background-color: ${theme.colors.global.contentBackground}; + border: 1px solid ${theme.colors.gray[80]}; border-radius: 4px; box-shadow: 0 0 21px rgba(0, 0, 0, 0.75); margin-top: 120px; diff --git a/graylog2-web-interface/src/components/metrics/MetricsList.jsx b/graylog2-web-interface/src/components/metrics/MetricsList.jsx index 40f51ae43987..68074ca33672 100644 --- a/graylog2-web-interface/src/components/metrics/MetricsList.jsx +++ b/graylog2-web-interface/src/components/metrics/MetricsList.jsx @@ -11,7 +11,7 @@ const MetricListWrap = styled.ul(({ theme }) => ` margin-bottom: 5px; .prefix { - color: ${theme.color.gray[70]}; + color: ${theme.colors.gray[70]}; } .name { diff --git a/graylog2-web-interface/src/components/navigation/Navigation.styles.jsx b/graylog2-web-interface/src/components/navigation/Navigation.styles.jsx index 664456cdfb34..f4d37df781eb 100644 --- a/graylog2-web-interface/src/components/navigation/Navigation.styles.jsx +++ b/graylog2-web-interface/src/components/navigation/Navigation.styles.jsx @@ -19,7 +19,7 @@ const StyledNavbar = styled(Navbar)(({ theme }) => ` } .header-meta-nav { - border-top: 1px solid ${theme.color.gray[50]}; + border-top: 1px solid ${theme.colors.gray[50]}; padding-top: 7.5px; #scratchpad-toggle { diff --git a/graylog2-web-interface/src/components/nodes/JvmHeapUsage.jsx b/graylog2-web-interface/src/components/nodes/JvmHeapUsage.jsx index 5fa2ceb6f647..03a90183fa57 100644 --- a/graylog2-web-interface/src/components/nodes/JvmHeapUsage.jsx +++ b/graylog2-web-interface/src/components/nodes/JvmHeapUsage.jsx @@ -33,18 +33,18 @@ const Blob = styled.span(({ theme }) => css` border: 1px solid; &.used-memory { - background-color: ${theme.color.variant.primary}; - border-color: ${theme.color.variant.dark.primary}; + background-color: ${theme.colors.variant.primary}; + border-color: ${theme.colors.variant.dark.primary}; } &.committed-memory { - background-color: ${theme.color.variant.warning}; - border-color: ${theme.color.variant.dark.warning}; + background-color: ${theme.colors.variant.warning}; + border-color: ${theme.colors.variant.dark.warning}; } &.max-memory { - background-color: ${theme.color.global.background}; - border-color: ${theme.color.gray[80]}; + background-color: ${theme.colors.global.background}; + border-color: ${theme.colors.gray[80]}; } `); @@ -66,7 +66,7 @@ const JvmHeapUsage = createReactClass({ mixins: [Reflux.connect(MetricsStore)], - componentWillMount() { + UNSAFE_componentWillMount() { const { nodeId } = this.props; this.metricNames = { diff --git a/graylog2-web-interface/src/components/notifications/Notification.jsx b/graylog2-web-interface/src/components/notifications/Notification.jsx index 696f94a356ed..680823b26f2f 100644 --- a/graylog2-web-interface/src/components/notifications/Notification.jsx +++ b/graylog2-web-interface/src/components/notifications/Notification.jsx @@ -15,7 +15,7 @@ const StyledAlert = styled(Alert)(({ theme }) => ` margin-top: 10px; i { - color: ${theme.color.gray[10]}; + color: ${theme.colors.gray[10]}; } form { diff --git a/graylog2-web-interface/src/components/outputs/Output.jsx b/graylog2-web-interface/src/components/outputs/Output.jsx index fd1ba11b95d8..21de8a1696b8 100644 --- a/graylog2-web-interface/src/components/outputs/Output.jsx +++ b/graylog2-web-interface/src/components/outputs/Output.jsx @@ -8,7 +8,7 @@ import { ConfigurationWell } from 'components/configurationforms'; import { IfPermitted, Spinner, Icon } from 'components/common'; const NodeRow = styled.div(({ theme }) => ` - border-bottom: 1px solid ${theme.color.gray[80]}; + border-bottom: 1px solid ${theme.colors.gray[80]}; padding-bottom: 8px; margin-bottom: 8px; margin-top: 0; diff --git a/graylog2-web-interface/src/components/pipelines/ProcessingTimelineComponent.jsx b/graylog2-web-interface/src/components/pipelines/ProcessingTimelineComponent.jsx index 1bb4df82f884..12a3960dd1d6 100644 --- a/graylog2-web-interface/src/components/pipelines/ProcessingTimelineComponent.jsx +++ b/graylog2-web-interface/src/components/pipelines/ProcessingTimelineComponent.jsx @@ -28,14 +28,14 @@ const StyledAlert = styled(Alert)` `; const PipelineStage = styled.div(({ idle, theme }) => ` - border: 1px solid ${theme.color.gray[idle ? 50 : 70]}; + border: 1px solid ${theme.colors.gray[idle ? 50 : 70]}; border-radius: 4px; display: inline-block; margin-right: 15px; padding: 20px; text-align: center; width: 120px; - background-color: ${idle ? theme.utils.colorLevel(theme.color.global.contentBackground, 10) : theme.color.global.contentBackground}; + background-color: ${idle ? theme.utils.colorLevel(theme.colors.global.contentBackground, 10) : theme.colors.global.contentBackground}; `); const PipelineNameTD = styled.td` diff --git a/graylog2-web-interface/src/components/search/MessageDetailsTitle.jsx b/graylog2-web-interface/src/components/search/MessageDetailsTitle.jsx index f5bf74147052..26d51d0a0a50 100644 --- a/graylog2-web-interface/src/components/search/MessageDetailsTitle.jsx +++ b/graylog2-web-interface/src/components/search/MessageDetailsTitle.jsx @@ -5,7 +5,7 @@ const Title = styled.h3(({ theme }) => ` height: 30px; a { - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; } .label { diff --git a/graylog2-web-interface/src/components/sidecars/common/CloneMenuItem.jsx b/graylog2-web-interface/src/components/sidecars/common/CloneMenuItem.jsx index e059910d0067..923c7bb1348d 100644 --- a/graylog2-web-interface/src/components/sidecars/common/CloneMenuItem.jsx +++ b/graylog2-web-interface/src/components/sidecars/common/CloneMenuItem.jsx @@ -16,14 +16,14 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ` clear: both; font-weight: normal; line-height: 1.42857143; - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; white-space: nowrap; &:hover, &:focus { text-decoration: none; - color: ${theme.utils.contrastingColor(theme.color.gray[90])}; - background-color: ${theme.color.gray[90]}; + color: ${theme.utils.contrastingColor(theme.colors.gray[90])}; + background-color: ${theme.colors.gray[90]}; } } `); diff --git a/graylog2-web-interface/src/components/sidecars/common/ColorLabel.jsx b/graylog2-web-interface/src/components/sidecars/common/ColorLabel.jsx index 4ba58fe0f702..1257fdb5eff4 100644 --- a/graylog2-web-interface/src/components/sidecars/common/ColorLabel.jsx +++ b/graylog2-web-interface/src/components/sidecars/common/ColorLabel.jsx @@ -18,7 +18,7 @@ const ColorLabel = ({ color, size, text, theme }) => { const backgroundColor = d3.hsl(color); const borderColor = backgroundColor.darker(); // Use dark font on brighter backgrounds and light font in darker backgrounds - const textColor = backgroundColor.l > 0.6 ? d3.rgb(theme.color.global.textDefault) : d3.rgb(theme.color.global.textAlt); + const textColor = backgroundColor.l > 0.6 ? d3.rgb(theme.colors.global.textDefault) : d3.rgb(theme.colors.global.textAlt); return ( @@ -38,7 +38,7 @@ ColorLabel.propTypes = { text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), size: PropTypes.oneOf(['normal', 'small', 'xsmall']), theme: PropTypes.shape({ - color: PropTypes.object, + colors: PropTypes.object, }).isRequired, }; diff --git a/graylog2-web-interface/src/components/sidecars/sidecars/SidecarRow.jsx b/graylog2-web-interface/src/components/sidecars/sidecars/SidecarRow.jsx index 136829b2f2ac..0f894e15e9b8 100644 --- a/graylog2-web-interface/src/components/sidecars/sidecars/SidecarRow.jsx +++ b/graylog2-web-interface/src/components/sidecars/sidecars/SidecarRow.jsx @@ -14,11 +14,11 @@ import SidecarStatusEnum from 'logic/sidecar/SidecarStatusEnum'; import style from './SidecarRow.css'; const SidecarTR = styled.tr(({ inactive, theme }) => ` - color: ${inactive ? theme.utils.contrastingColor(theme.color.global.tableBackground, 'AA') : 'currentColor'}; + color: ${inactive ? theme.utils.contrastingColor(theme.colors.global.tableBackground, 'AA') : 'currentColor'}; opacity: ${inactive ? 0.9 : 1}; &:nth-of-type(2n+1) { - color: ${inactive ? theme.utils.contrastingColor(theme.color.global.tableBackgroundAlt, 'AA') : 'currentColor'}; + color: ${inactive ? theme.utils.contrastingColor(theme.colors.global.tableBackgroundAlt, 'AA') : 'currentColor'}; } td:not(:last-child) { diff --git a/graylog2-web-interface/src/components/simulator/SimulationChanges.jsx b/graylog2-web-interface/src/components/simulator/SimulationChanges.jsx index 6aa245850604..505107e0aa01 100644 --- a/graylog2-web-interface/src/components/simulator/SimulationChanges.jsx +++ b/graylog2-web-interface/src/components/simulator/SimulationChanges.jsx @@ -42,7 +42,7 @@ const OriginalChanges = styled.div` `; const FieldResultWrap = styled.div(({ resultType, theme }) => { - const { success, danger, info } = theme.color.variant.light; + const { success, danger, info } = theme.colors.variant.light; const types = { added: success, removed: danger, diff --git a/graylog2-web-interface/src/components/streams/Stream.jsx b/graylog2-web-interface/src/components/streams/Stream.jsx index 67e6b8b64d22..e235e580708c 100644 --- a/graylog2-web-interface/src/components/streams/Stream.jsx +++ b/graylog2-web-interface/src/components/streams/Stream.jsx @@ -25,7 +25,7 @@ const StreamListItem = styled.li(({ theme }) => ` padding: 15px 0; &:not(:last-child) { - border-bottom: 1px solid ${theme.color.variant.light.info}; + border-bottom: 1px solid ${theme.colors.variant.light.info}; } .stream-data { diff --git a/graylog2-web-interface/src/components/systemjobs/SystemJobsList.jsx b/graylog2-web-interface/src/components/systemjobs/SystemJobsList.jsx index 68c5a5bc2efe..050b1efccf40 100644 --- a/graylog2-web-interface/src/components/systemjobs/SystemJobsList.jsx +++ b/graylog2-web-interface/src/components/systemjobs/SystemJobsList.jsx @@ -8,7 +8,7 @@ import { SystemJob } from 'components/systemjobs'; const SystemJobWrap = styled.div(({ theme }) => ` margin-top: 10px; - border-bottom: 1px solid ${theme.color.gray[80]}; + border-bottom: 1px solid ${theme.colors.gray[80]}; .progress { margin-top: 2px; diff --git a/graylog2-web-interface/src/components/systemmessages/SystemMessagesList.jsx b/graylog2-web-interface/src/components/systemmessages/SystemMessagesList.jsx index 13f4a624260d..9041dc4375ad 100644 --- a/graylog2-web-interface/src/components/systemmessages/SystemMessagesList.jsx +++ b/graylog2-web-interface/src/components/systemmessages/SystemMessagesList.jsx @@ -9,7 +9,7 @@ const SystemMessagesTable = styled(Table)(({ theme }) => ` font-size: 12px; a { - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; } `); diff --git a/graylog2-web-interface/src/components/throughput/GlobalThroughput.jsx b/graylog2-web-interface/src/components/throughput/GlobalThroughput.jsx index 37eda11e4ef7..f160e2753a26 100644 --- a/graylog2-web-interface/src/components/throughput/GlobalThroughput.jsx +++ b/graylog2-web-interface/src/components/throughput/GlobalThroughput.jsx @@ -56,7 +56,7 @@ const ThroughputData = styled.span(({ dataIn, theme }) => ` grid-template-rows: 1fr 1px; grid-column-gap: 3px; grid-row-gap: 0; - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; > span { grid-area: 1 / 1 / 2 / 2; @@ -73,7 +73,7 @@ const ThroughputData = styled.span(({ dataIn, theme }) => ` ${dataIn && ` content: ' '; min-height: 1px; - background-color: ${theme.color.global.contentBackground}; + background-color: ${theme.colors.global.contentBackground}; display: block; grid-area: 2 / 1 / 3 / 3; `} diff --git a/graylog2-web-interface/src/components/users/UserList.jsx b/graylog2-web-interface/src/components/users/UserList.jsx index 367da21c6870..d0315e6db50c 100644 --- a/graylog2-web-interface/src/components/users/UserList.jsx +++ b/graylog2-web-interface/src/components/users/UserList.jsx @@ -20,7 +20,7 @@ const UsersStore = StoreProvider.getStore('Users'); const RolesStore = StoreProvider.getStore('Roles'); const ActiveIcon = styled(Icon)(({ theme }) => ` - color: ${theme.color.variant.success}; + color: ${theme.colors.variant.success}; `); const UserList = createReactClass({ diff --git a/graylog2-web-interface/src/routing/App.jsx b/graylog2-web-interface/src/routing/App.jsx index bb54f86bd3e2..be59db627ea1 100644 --- a/graylog2-web-interface/src/routing/App.jsx +++ b/graylog2-web-interface/src/routing/App.jsx @@ -21,7 +21,7 @@ const ScrollToHint = styled.div(({ theme }) => css` left: 50%; margin-left: -125px; top: 50px; - color: ${theme.utils.readableColor(chroma(theme.color.brand.tertiary).alpha(0.8).css())}; + color: ${theme.utils.readableColor(chroma(theme.colors.brand.tertiary).alpha(0.8).css())}; font-size: 80px; padding: 25px; z-index: 2000; @@ -30,7 +30,7 @@ const ScrollToHint = styled.div(({ theme }) => css` cursor: pointer; border-radius: 10px; display: none; - background: ${chroma(theme.color.brand.tertiary).alpha(0.8).css()}; + background: ${chroma(theme.colors.brand.tertiary).alpha(0.8).css()}; `); const App = ({ children, currentUser, location }) => { diff --git a/graylog2-web-interface/src/theme/GlobalThemeStyles.jsx b/graylog2-web-interface/src/theme/GlobalThemeStyles.jsx index 89da4d197cf0..76729dea04a2 100644 --- a/graylog2-web-interface/src/theme/GlobalThemeStyles.jsx +++ b/graylog2-web-interface/src/theme/GlobalThemeStyles.jsx @@ -12,8 +12,8 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } body { - background-color: ${theme.color.global.background}; - color: ${theme.color.global.textDefault}; + background-color: ${theme.colors.global.background}; + color: ${theme.colors.global.textDefault}; font-family: ${fontFamily}; font-size: 12px; overflow-x: hidden; @@ -31,7 +31,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } hr { - border-top: 1px solid ${theme.color.global.background}; + border-top: 1px solid ${theme.colors.global.background}; } h1, @@ -43,7 +43,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` font-weight: normal; padding: 0; margin: 0; - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; } h1 { @@ -64,11 +64,11 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } a { - color: ${theme.color.global.link}; + color: ${theme.colors.global.link}; } a:hover { - color: ${theme.color.global.linkHover}; + color: ${theme.colors.global.linkHover}; } /* Remove boostrap outline */ @@ -85,7 +85,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` input.form-control, select.form-control, textarea.form-control { - color: ${theme.color.gray[30]}; + color: ${theme.colors.gray[30]}; font-family: ${fontFamily}; &:hover { @@ -98,7 +98,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } legend small { - color: ${theme.color.gray[60]}; + color: ${theme.colors.gray[60]}; margin-left: 5px; } @@ -110,13 +110,13 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` .content { padding-top: 15px; padding-bottom: 15px; - background-color: ${theme.color.global.contentBackground}; - border: 1px solid ${theme.color.gray[80]}; + background-color: ${theme.colors.global.contentBackground}; + border: 1px solid ${theme.colors.gray[80]}; margin-bottom: 10px; p.description { margin-top: 3px; - color: ${theme.color.gray[50]}; + color: ${theme.colors.gray[50]}; } } @@ -160,7 +160,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .u-light { - border-bottom: 1px dotted ${theme.color.gray[70]}; + border-bottom: 1px dotted ${theme.colors.gray[70]}; margin-bottom: 5px; padding-bottom: 5px; } @@ -178,7 +178,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .master-node { - color: ${theme.color.variant.dark.warning}; + color: ${theme.colors.variant.dark.warning}; } .loglevel-metrics-row { @@ -202,7 +202,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .sources.overlay { - background-color: ${theme.color.gray[60]}; + background-color: ${theme.colors.gray[60]}; height: 200px; line-height: 200px; opacity: 0.2; @@ -366,8 +366,8 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .sources th { - background-color: ${theme.color.gray[20]}; - color: ${theme.utils.readableColor(theme.color.gray[20])}; + background-color: ${theme.colors.gray[20]}; + color: ${theme.utils.readableColor(theme.colors.gray[20])}; font-weight: normal; } @@ -377,8 +377,8 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .parse-error { - background-color: ${theme.color.variant.light.danger}; - color: ${theme.utils.contrastingColor(theme.color.variant.light.danger)}; + background-color: ${theme.colors.variant.light.danger}; + color: ${theme.utils.contrastingColor(theme.colors.variant.light.danger)}; padding-left: 2px; padding-right: 2px; } @@ -396,8 +396,8 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .alerts th { - background-color: ${theme.color.gray[10]}; - color: ${theme.color.global.textAlt}; + background-color: ${theme.colors.gray[10]}; + color: ${theme.colors.global.textAlt}; font-weight: normal; } @@ -406,11 +406,11 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .alerts th a:focus { - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; } .result-highlight-colored { - background-color: ${theme.color.variant.warning}; + background-color: ${theme.colors.variant.warning}; } .annotation .content { @@ -570,7 +570,7 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` .alarm-callbacks li:not(:last-child) { margin-bottom: 10px; padding-bottom: 10px; - border-bottom: 1px solid ${theme.color.gray[90]}; + border-bottom: 1px solid ${theme.colors.gray[90]}; } .threaddump { @@ -627,14 +627,14 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` } .pill { - color: ${theme.color.global.textDefault}; - background-color: ${theme.color.gray[90]}; + color: ${theme.colors.global.textDefault}; + background-color: ${theme.colors.gray[90]}; padding: 6px 12px; } .tag-remove, .pill-remove { - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; cursor: pointer; margin-left: 5px; } diff --git a/graylog2-web-interface/src/theme/GraylogThemeProvider.jsx b/graylog2-web-interface/src/theme/GraylogThemeProvider.jsx index c70d0cf33e50..1985e03c9202 100644 --- a/graylog2-web-interface/src/theme/GraylogThemeProvider.jsx +++ b/graylog2-web-interface/src/theme/GraylogThemeProvider.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ThemeProvider } from 'styled-components'; -import { color, utils } from 'theme'; +import { colors, utils } from 'theme'; import buttonStyles from 'components/graylog/styles/buttonStyles'; /* NOTE: mode will eventually need to come from User Preferences */ @@ -12,9 +12,9 @@ const GraylogThemeProvider = ({ children }) => { return ( diff --git a/graylog2-web-interface/src/theme/colors.js b/graylog2-web-interface/src/theme/colors.js index c001ae406c56..ca82443423b0 100644 --- a/graylog2-web-interface/src/theme/colors.js +++ b/graylog2-web-interface/src/theme/colors.js @@ -1,8 +1,95 @@ +// @flow strict import teinte from './variants/teinte'; -// TODO: Create more themes + +export type Colors = { + brand: { + primary: string, + secondary: string, + tertiary: string, + }, + global: { + background: string, + contentBackground: string, + link: string, + linkHover: string, + textAlt: string, + textDefault: string, + tableBackground: string, + tableBackgroundAlt: string, + inputBackground: string, + }, + gray: { + "10": string, + "20": string, + "30": string, + "40": string, + "50": string, + "60": string, + "70": string, + "80": string, + "90": string, + "100": string, + }, + variant: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + light: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + }, + lighter: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + }, + lightest: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + }, + dark: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + }, + darker: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + }, + darkest: { + danger: string, + default: string, + info: string, + primary: string, + success: string, + warning: string, + }, + }, +}; const colors = { - teinte, + ...teinte, }; export default colors; diff --git a/graylog2-web-interface/src/theme/docs/Colors.md b/graylog2-web-interface/src/theme/docs/Colors.md index 6e1dbf7edb8d..b956a0ee7814 100644 --- a/graylog2-web-interface/src/theme/docs/Colors.md +++ b/graylog2-web-interface/src/theme/docs/Colors.md @@ -56,7 +56,7 @@ const SectionWrap = (mode, section) => { + copyText={`theme.colors.${copyTextName}`} /> ) } })} @@ -73,7 +73,7 @@ const SectionWrap = (mode, section) => { + copyText={`theme.colors.${section}.${name}.${subname}`} /> ))} diff --git a/graylog2-web-interface/src/theme/docs/ThemeProvider.md b/graylog2-web-interface/src/theme/docs/ThemeProvider.md index 8c9b3ebc1a7b..9f58e1db1e71 100644 --- a/graylog2-web-interface/src/theme/docs/ThemeProvider.md +++ b/graylog2-web-interface/src/theme/docs/ThemeProvider.md @@ -4,7 +4,7 @@ This will allow developers to access all `theme` props in each component. In mos ```jsx static const StyledElement = styled.div(({ theme }) => ` - background-color: ${theme.color.global.contentBackground}; + background-color: ${theme.colors.global.contentBackground}; `); ``` @@ -15,7 +15,7 @@ import styled, { type StyledComponent } from 'styled-components'; import { type ThemeInterface } from 'theme'; const StyledElement: StyledComponent<{}, ThemeInterface, HTMLDivElement> = styled.div(({ theme }) => ` - background-color: ${theme.color.global.contentBackground}; + background-color: ${theme.colors.global.contentBackground}; `); ``` @@ -23,12 +23,12 @@ If you need to base some styles off of props, you can access them as well. ```jsx static const StyledElement = styled.div(({ wide, theme }) => ` - background-color: ${theme.color.global.contentBackground}; + background-color: ${theme.colors.global.contentBackground}; width: ${wide ? '100%' : '50%'}; `); // or const StyledElement: StyledComponent<{wide: boolean}, ThemeInterface, HTMLDivElement> = styled.div(({ wide, theme }) => ` - background-color: ${theme.color.global.contentBackground}; + background-color: ${theme.colors.global.contentBackground}; width: ${wide ? '100%' : '50%'}; `); diff --git a/graylog2-web-interface/src/theme/index.js b/graylog2-web-interface/src/theme/index.js index 9110da707031..9b4756028497 100644 --- a/graylog2-web-interface/src/theme/index.js +++ b/graylog2-web-interface/src/theme/index.js @@ -1,68 +1,15 @@ // @flow strict -import colors from './colors'; +import colors, { type Colors } from './colors'; import breakpoints from './breakpoints'; import utils, { type Utils } from './utils'; export type ThemeInterface = { - color: { - brand: { - primary: string, - secondary: string, - tertiary: string, - }, - global: { - textDefault: string, - textAlt: string, - background: string, - contentBackground: string, - link: string, - linkHover: string, - }, - gray: { - "0": string, - "10": string, - "20": string, - "30": string, - "40": string, - "50": string, - "60": string, - "70": string, - "80": string, - "90": string, - "100": string, - }, - variant: { - danger: string, - default: string, - info: string, - primary: string, - success: string, - warning: string, - light: { - danger: string, - default: string, - info: string, - primary: string, - success: string, - warning: string, - }, - dark: { - danger: string, - default: string, - info: string, - primary: string, - success: string, - warning: string, - }, - }, - }, + colors: Colors, utils: Utils, }; const theme: ThemeInterface = { - color: { - ...colors, - }, + colors, breakpoint: { ...breakpoints, }, @@ -73,7 +20,7 @@ const themeModes: Array = Object.keys(colors); export { breakpoints as breakpoint, - colors as color, + colors, utils, themeModes, }; diff --git a/graylog2-web-interface/src/theme/styles/authStyles.jsx b/graylog2-web-interface/src/theme/styles/authStyles.jsx index cde8dd646c29..d8146b101fd5 100644 --- a/graylog2-web-interface/src/theme/styles/authStyles.jsx +++ b/graylog2-web-interface/src/theme/styles/authStyles.jsx @@ -5,7 +5,7 @@ import bgImage from 'images/auth/loginbg.jpg'; const AuthThemeStyles = createGlobalStyle(({ theme }) => css` body { /* we love science */ - background: url(${bgImage}) no-repeat center center fixed ${theme.color.global.background}; + background: url(${bgImage}) no-repeat center center fixed ${theme.colors.global.background}; background-size: cover; } `); diff --git a/graylog2-web-interface/src/views/components/OverlayDropdown.jsx b/graylog2-web-interface/src/views/components/OverlayDropdown.jsx index 0bc55953c22b..f95cf64b6c81 100644 --- a/graylog2-web-interface/src/views/components/OverlayDropdown.jsx +++ b/graylog2-web-interface/src/views/components/OverlayDropdown.jsx @@ -9,7 +9,7 @@ import styles from './OverlayDropdown.css'; const StyledList = styled.ul(({ show, theme }) => ` padding-left: 5px; padding-right: 5px; - color: ${theme.color.gray[40]}; + color: ${theme.colors.gray[40]}; z-index: 1050; min-width: 'max-content'; display: ${show ? 'block' : 'none'}; diff --git a/graylog2-web-interface/src/views/components/Query.jsx b/graylog2-web-interface/src/views/components/Query.jsx index 226a83d4f3d9..d39d37381375 100644 --- a/graylog2-web-interface/src/views/components/Query.jsx +++ b/graylog2-web-interface/src/views/components/Query.jsx @@ -18,7 +18,7 @@ import InteractiveContext from './contexts/InteractiveContext'; const StyledJumbotron = styled(Jumbotron)(({ theme }) => ` .container-fluid & { - border: 1px solid ${theme.color.gray[80]}; + border: 1px solid ${theme.colors.gray[80]}; border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 0; diff --git a/graylog2-web-interface/src/views/components/QueryTabs.jsx b/graylog2-web-interface/src/views/components/QueryTabs.jsx index e98b2dcb4660..1b940f97b34d 100644 --- a/graylog2-web-interface/src/views/components/QueryTabs.jsx +++ b/graylog2-web-interface/src/views/components/QueryTabs.jsx @@ -23,7 +23,7 @@ const StyledQueryTabs = styled(Tabs)(({ theme }) => ` > li { > a { - border-color: ${theme.color.gray[80]}; + border-color: ${theme.colors.gray[80]}; } } diff --git a/graylog2-web-interface/src/views/components/WidgetGrid.jsx b/graylog2-web-interface/src/views/components/WidgetGrid.jsx index 445632f42f98..f0ecf5e5eeab 100644 --- a/graylog2-web-interface/src/views/components/WidgetGrid.jsx +++ b/graylog2-web-interface/src/views/components/WidgetGrid.jsx @@ -19,14 +19,14 @@ import { PositionsMap, WidgetDataMap, WidgetErrorsMap, WidgetsMap } from './widg import DrilldownContextProvider from './contexts/DrilldownContextProvider'; const DashboardWrap = styled.div(({ theme }) => css` - color: ${theme.color.global.textDefault}; + color: ${theme.colors.global.textDefault}; margin: 0; width: 100%; `); const WidgetContainer = styled.div(({ theme }) => css` - background-color: ${theme.color.global.contentBackground}; - border: 1px solid ${theme.color.gray[80]}; + background-color: ${theme.colors.global.contentBackground}; + border: 1px solid ${theme.colors.gray[80]}; z-index: auto; `); diff --git a/graylog2-web-interface/src/views/components/actions/FieldActions.jsx b/graylog2-web-interface/src/views/components/actions/FieldActions.jsx index 4acc1055eae4..52b18a9bab1e 100644 --- a/graylog2-web-interface/src/views/components/actions/FieldActions.jsx +++ b/graylog2-web-interface/src/views/components/actions/FieldActions.jsx @@ -36,7 +36,7 @@ type FieldElementProps = { const FieldElement: StyledComponent = styled.span.attrs({ className: 'field-element', })(({ active, disabled, theme }) => ` - color: ${active ? theme.color.variant.info : 'currentColor'}; + color: ${active ? theme.colors.variant.info : 'currentColor'}; opacity: ${disabled ? '0.3' : '1'}; `); diff --git a/graylog2-web-interface/src/views/components/aggregationbuilder/DescriptionBox.jsx b/graylog2-web-interface/src/views/components/aggregationbuilder/DescriptionBox.jsx index 7aa2dfc6a09c..6106ccb366b8 100644 --- a/graylog2-web-interface/src/views/components/aggregationbuilder/DescriptionBox.jsx +++ b/graylog2-web-interface/src/views/components/aggregationbuilder/DescriptionBox.jsx @@ -10,7 +10,7 @@ import { Icon } from 'components/common'; import HoverForHelp from './HoverForHelp'; const StyledDescriptionBox = styled.div(({ theme }) => ` - background-color: ${theme.color.gray[90]}; + background-color: ${theme.colors.gray[90]}; padding: 10px; margin: 5px; border-radius: 6px; diff --git a/graylog2-web-interface/src/views/components/common/ActionDropdown.jsx b/graylog2-web-interface/src/views/components/common/ActionDropdown.jsx index 08e00b970dc1..067907f829c8 100644 --- a/graylog2-web-interface/src/views/components/common/ActionDropdown.jsx +++ b/graylog2-web-interface/src/views/components/common/ActionDropdown.jsx @@ -36,7 +36,7 @@ type ActionDropdownProps = { const StyledDropdownMenu: StyledComponent = styled.ul(({ show, theme }) => ` display: ${show ? 'block' : 'none'}; min-width: max-content; - color: ${theme.color.gray[40]}; + color: ${theme.colors.gray[40]}; `); const ActionToggle = ({ children, onClick }: ActionToggleProps) => { diff --git a/graylog2-web-interface/src/views/components/datatable/MessagesTable.jsx b/graylog2-web-interface/src/views/components/datatable/MessagesTable.jsx index e9b93f22f809..3ff39aa865d0 100644 --- a/graylog2-web-interface/src/views/components/datatable/MessagesTable.jsx +++ b/graylog2-web-interface/src/views/components/datatable/MessagesTable.jsx @@ -21,7 +21,7 @@ const StyledTable = styled(Table)(({ theme }) => ` word-break: break-all; thead > tr { - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; } td, @@ -34,7 +34,7 @@ const StyledTable = styled(Table)(({ theme }) => ` border: 0; font-size: 11px; font-weight: normal; - background-color: ${theme.color.gray[10]}; + background-color: ${theme.colors.gray[10]}; white-space: nowrap; } @@ -47,11 +47,11 @@ const StyledTable = styled(Table)(({ theme }) => ` } tbody.message-group-toggled { - border-left: 7px solid ${theme.color.variant.light.info}; + border-left: 7px solid ${theme.colors.variant.light.info}; } tbody.message-highlight { - border-left: 7px solid ${theme.color.variant.light.success}; + border-left: 7px solid ${theme.colors.variant.light.success}; } tr.fields-row { @@ -67,7 +67,7 @@ const StyledTable = styled(Table)(({ theme }) => ` padding-top: 0; padding-bottom: 5px; font-family: monospace; - color: ${theme.color.variant.dark.info}; + color: ${theme.colors.variant.dark.info}; } tr.message-row { @@ -88,7 +88,7 @@ const StyledTable = styled(Table)(({ theme }) => ` left: 5px; top: 4.5em; height: 1.5em; - background: linear-gradient(to bottom, ${chroma(theme.color.global.contentBackground).alpha(0).css()}, ${chroma(theme.color.global.contentBackground).alpha(1).css()} 95%); + background: linear-gradient(to bottom, ${chroma(theme.colors.global.contentBackground).alpha(0).css()}, ${chroma(theme.colors.global.contentBackground).alpha(1).css()} 95%); } } } @@ -117,13 +117,13 @@ const StyledTable = styled(Table)(({ theme }) => ` th i.sort-order-item { margin-right: 2px; - color: ${theme.color.gray[10]}; + color: ${theme.colors.gray[10]}; visiblity: hidden; } th i.sort-order-active, th:hover i.sort-order-item { - color: ${theme.color.global.textAlt}; + color: ${theme.colors.global.textAlt}; } `); diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageField.jsx b/graylog2-web-interface/src/views/components/messagelist/MessageField.jsx index 0715a0c1500b..a6583548adb4 100644 --- a/graylog2-web-interface/src/views/components/messagelist/MessageField.jsx +++ b/graylog2-web-interface/src/views/components/messagelist/MessageField.jsx @@ -28,7 +28,7 @@ type Props = { }; const DecoratedField: StyledComponent<{}, ThemeInterface, HTMLElement> = styled.small(({ theme }) => ` - color: ${theme.color.gray[70]}; + color: ${theme.colors.gray[70]}; font-weight: normal; `); diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageFields.jsx b/graylog2-web-interface/src/views/components/messagelist/MessageFields.jsx index 1cbf0a3aef57..0c24005e5c3c 100644 --- a/graylog2-web-interface/src/views/components/messagelist/MessageFields.jsx +++ b/graylog2-web-interface/src/views/components/messagelist/MessageFields.jsx @@ -19,13 +19,13 @@ type Props = { }; const MessageDetailsDL: StyledComponent<{}, ThemeInterface, HTMLDListElement> = styled(MessageDetailsDefinitionList)(({ theme }) => ` - color: ${theme.color.gray[40]}; + color: ${theme.colors.gray[40]}; dd { font-family: monospace; &:not(:last-child) { - border-bottom: 1px solid ${theme.color.gray[90]}; + border-bottom: 1px solid ${theme.colors.gray[90]}; } } `); diff --git a/graylog2-web-interface/src/views/components/searchbar/SearchButton.jsx b/graylog2-web-interface/src/views/components/searchbar/SearchButton.jsx index 5264510c2b17..eb2a1d4cf22d 100644 --- a/graylog2-web-interface/src/views/components/searchbar/SearchButton.jsx +++ b/graylog2-web-interface/src/views/components/searchbar/SearchButton.jsx @@ -22,7 +22,7 @@ const DirtyButton: StyledComponent<{}, ThemeInterface, Button> = styled(StyledBu top: -5px; right: -6px; border-radius: 50%; - background-color: ${theme.color.variant.warning}; + background-color: ${theme.colors.variant.warning}; } `); diff --git a/graylog2-web-interface/src/views/components/searchbar/TimerangeSelector.jsx b/graylog2-web-interface/src/views/components/searchbar/TimerangeSelector.jsx index 19a17b989646..8837b03974ef 100644 --- a/graylog2-web-interface/src/views/components/searchbar/TimerangeSelector.jsx +++ b/graylog2-web-interface/src/views/components/searchbar/TimerangeSelector.jsx @@ -8,7 +8,7 @@ const TimerangeWrap = styled.div(({ theme }) => ` } .relative { - color: ${theme.color.gray[40]}; + color: ${theme.colors.gray[40]}; } .absolute { diff --git a/graylog2-web-interface/src/views/components/searchbar/queryinput/StyledAceEditor.jsx b/graylog2-web-interface/src/views/components/searchbar/queryinput/StyledAceEditor.jsx index a84c3e6b7c2d..48b4eb0f43c6 100644 --- a/graylog2-web-interface/src/views/components/searchbar/queryinput/StyledAceEditor.jsx +++ b/graylog2-web-interface/src/views/components/searchbar/queryinput/StyledAceEditor.jsx @@ -10,33 +10,33 @@ const StyledAceEditor = styled(AceEditor).attrs(({ aceTheme, theme }) => ({ &.ace-queryinput { height: 34px !important; width: 100% !important; - background-color: ${scTheme.color.global.inputBackground}; - color: ${scTheme.utils.contrastingColor(scTheme.color.global.inputBackground, 'AAA')}; + background-color: ${scTheme.colors.global.inputBackground}; + color: ${scTheme.utils.contrastingColor(scTheme.colors.global.inputBackground, 'AAA')}; &.ace_multiselect .ace_selection.ace_start { - box-shadow: 0 0 3px 0 ${scTheme.color.global.inputBackground}; + box-shadow: 0 0 3px 0 ${scTheme.colors.global.inputBackground}; } .ace_gutter { - background: ${scTheme.color.global.inputBackground}; - color: ${scTheme.utils.contrastingColor(scTheme.color.global.inputBackground, 'AAA')}; + background: ${scTheme.colors.global.inputBackground}; + color: ${scTheme.utils.contrastingColor(scTheme.colors.global.inputBackground, 'AAA')}; } .ace_print-margin { width: 1px; - background: ${scTheme.color.global.inputBackground}; + background: ${scTheme.colors.global.inputBackground}; } .ace_cursor { - color: ${scTheme.color.gray[50]}; + color: ${scTheme.colors.gray[50]}; } .ace_marker-layer .ace_selection { - background: ${scTheme.color.variant.lightest.default}; + background: ${scTheme.colors.variant.lightest.default}; } .ace_marker-layer .ace_step { - background: ${scTheme.color.variant.warning}; + background: ${scTheme.colors.variant.warning}; } .ace_marker-layer .ace_bracket { @@ -45,19 +45,19 @@ const StyledAceEditor = styled(AceEditor).attrs(({ aceTheme, theme }) => ({ } .ace_marker-layer .ace_active-line { - background: ${scTheme.color.global.inputBackground}; + background: ${scTheme.colors.global.inputBackground}; } .ace_gutter-active-line { - background-color: ${scTheme.color.global.inputBackground}; + background-color: ${scTheme.colors.global.inputBackground}; } .ace_marker-layer .ace_selected-word { - border: 1px solid ${scTheme.color.gray[80]}; + border: 1px solid ${scTheme.colors.gray[80]}; } .ace_invisible { - color: ${scTheme.color.global.inputBackground}; + color: ${scTheme.colors.global.inputBackground}; } .ace_keyword, @@ -65,11 +65,11 @@ const StyledAceEditor = styled(AceEditor).attrs(({ aceTheme, theme }) => ({ .ace_storage, .ace_storage.ace_type, .ace_support.ace_type { - color: ${scTheme.color.variant.primary}; + color: ${scTheme.colors.variant.primary}; } .ace_keyword.ace_operator { - color: ${scTheme.color.variant.darker.info}; + color: ${scTheme.colors.variant.darker.info}; } .ace_constant.ace_character, @@ -78,44 +78,44 @@ const StyledAceEditor = styled(AceEditor).attrs(({ aceTheme, theme }) => ({ .ace_keyword.ace_other.ace_unit, .ace_support.ace_constant, .ace_variable.ace_parameter { - color: ${scTheme.color.variant.dark.danger}; + color: ${scTheme.colors.variant.dark.danger}; } .ace_constant.ace_other { - color: ${scTheme.color.variant.default}; + color: ${scTheme.colors.variant.default}; } .ace_invalid { - color: ${scTheme.utils.readableColor(scTheme.color.brand.primary)}; - background-color: ${scTheme.color.brand.primary}; + color: ${scTheme.utils.readableColor(scTheme.colors.brand.primary)}; + background-color: ${scTheme.colors.brand.primary}; } .ace_invalid.ace_deprecated { - color: ${scTheme.utils.readableColor(scTheme.color.brand.primary)}; - background-color: ${scTheme.color.variant.dark.primary}; + color: ${scTheme.utils.readableColor(scTheme.colors.brand.primary)}; + background-color: ${scTheme.colors.variant.dark.primary}; } .ace_fold { - background-color: ${scTheme.color.variant.info}; - border-color: ${scTheme.utils.contrastingColor(scTheme.color.global.inputBackground, 'AAA')}; + background-color: ${scTheme.colors.variant.info}; + border-color: ${scTheme.utils.contrastingColor(scTheme.colors.global.inputBackground, 'AAA')}; } .ace_entity.ace_name.ace_function, .ace_support.ace_function, .ace_variable, .ace_term { - color: ${scTheme.color.variant.info}; + color: ${scTheme.colors.variant.info}; } .ace_support.ace_class, .ace_support.ace_type { - color: ${scTheme.color.variant.dark.warning}; + color: ${scTheme.colors.variant.dark.warning}; } .ace_heading, .ace_markup.ace_heading, .ace_string { - color: ${scTheme.color.variant.dark.success}; + color: ${scTheme.colors.variant.dark.success}; } .ace_entity.ace_name.ace_tag, @@ -123,11 +123,11 @@ const StyledAceEditor = styled(AceEditor).attrs(({ aceTheme, theme }) => ({ .ace_meta.ace_tag, .ace_string.ace_regexp, .ace_variable { - color: ${scTheme.color.brand.primary}; + color: ${scTheme.colors.brand.primary}; } .ace_comment { - color: ${scTheme.color.gray[60]}; + color: ${scTheme.colors.gray[60]}; } .ace_indent-guide { diff --git a/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchControls.jsx b/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchControls.jsx index ff55e03bd7f9..f3879a72f6d7 100644 --- a/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchControls.jsx +++ b/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchControls.jsx @@ -57,7 +57,7 @@ class SavedSearchControls extends React.Component { username: PropTypes.string.isRequired, }).isRequired, theme: PropTypes.shape({ - color: PropTypes.object, + colors: PropTypes.object, }).isRequired, }; @@ -210,7 +210,7 @@ class SavedSearchControls extends React.Component { const savedSearchStyle = loaded ? 'star' : 'star-o'; let savedSearchColor: string = ''; if (loaded) { - savedSearchColor = dirty ? theme.color.variant.warning : theme.color.variant.info; + savedSearchColor = dirty ? theme.colors.variant.warning : theme.colors.variant.info; } const disableReset = !(dirty || loaded); diff --git a/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchList.jsx b/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchList.jsx index 4e1d8eeb9bfa..499e54d14030 100644 --- a/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchList.jsx +++ b/graylog2-web-interface/src/views/components/searchbar/saved-search/SavedSearchList.jsx @@ -31,7 +31,7 @@ type State = { const AlertIcon: StyledComponent<{}, ThemeInterface, *> = styled(Icon)(({ theme }) => css` margin-right: 6px; - color: ${theme.color.variant.primary}; + color: ${theme.colors.variant.primary}; `); const NoSavedSearches: StyledComponent<{}, ThemeInterface, *> = styled(Alert)` diff --git a/graylog2-web-interface/src/views/components/searchbar/saved-search/__snapshots__/SavedSearchForm.test.jsx.snap b/graylog2-web-interface/src/views/components/searchbar/saved-search/__snapshots__/SavedSearchForm.test.jsx.snap index 1476f85db0ed..6c746d23969d 100644 --- a/graylog2-web-interface/src/views/components/searchbar/saved-search/__snapshots__/SavedSearchForm.test.jsx.snap +++ b/graylog2-web-interface/src/views/components/searchbar/saved-search/__snapshots__/SavedSearchForm.test.jsx.snap @@ -31,7 +31,7 @@ exports[`SavedSearchForm render the SavedSearchForm should render create new 1`] align-items: center; cursor: pointer; position: relative; - color: ${isSelected ? theme.color.variant.light.danger : 'inherit'}; - background: ${isSelected ? theme.color.gray[10] : 'tranparent'}; + color: ${isSelected ? theme.colors.variant.light.danger : 'inherit'}; + background: ${isSelected ? theme.colors.gray[10] : 'tranparent'}; ${((isSelected && expandRight) && css` &::after { @@ -47,11 +47,11 @@ export const TitleIcon: StyledComponent<{}, {}, HTMLDivElement> = styled.div` `; export const Content: StyledComponent = styled.div(({ isSelected, expandRight, theme }) => css` - color: ${theme.utils.readableColor(theme.color.global.contentBackground)}; - background: ${theme.color.global.contentBackground}; + color: ${theme.utils.readableColor(theme.colors.global.contentBackground)}; + background: ${theme.colors.global.contentBackground}; box-shadow: - inset 0 13px 5px -10px ${theme.color.gray[80]}, - inset 0 -13px 5px -10px ${theme.color.gray[80]}; + inset 0 13px 5px -10px ${theme.colors.gray[80]}, + inset 0 -13px 5px -10px ${theme.colors.gray[80]}; ${(isSelected ? css` padding: 20px; ` : css` diff --git a/graylog2-web-interface/src/views/components/sidebar/Sidebar.styles.jsx b/graylog2-web-interface/src/views/components/sidebar/Sidebar.styles.jsx index d7ee978a1a5c..c0259f0e8a6f 100644 --- a/graylog2-web-interface/src/views/components/sidebar/Sidebar.styles.jsx +++ b/graylog2-web-interface/src/views/components/sidebar/Sidebar.styles.jsx @@ -14,8 +14,8 @@ export const Container: StyledComponent<{ open: boolean }, ThemeInterface, HTMLD -ms-grid-row: 1; grid-column: 1; -ms-grid-column: 1; - background: ${theme.color.gray[10]}; - color: ${theme.utils.contrastingColor(theme.color.gray[10], 'AA')}; + background: ${theme.colors.gray[10]}; + color: ${theme.utils.contrastingColor(theme.colors.gray[10], 'AA')}; height: calc(100vh - 50px); padding-top: 20px; position: ${open ? 'fixed' : 'static'}; @@ -33,7 +33,7 @@ export const ContentOverlay: StyledComponent<{}, ThemeInterface, HTMLDivElement> bottom: 0; left: ${sidebarWidth.open}; right: 0; - background: ${chroma(theme.color.brand.tertiary).alpha(0.25).css()}; + background: ${chroma(theme.colors.brand.tertiary).alpha(0.25).css()}; `); export const SidebarHeader: StyledComponent<{open: boolean, hasTitle: boolean}, {}, typeof NavItemTitle> = styled(NavItemTitle)(({ hasTitle, open }) => { diff --git a/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingRule.jsx b/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingRule.jsx index d52e7d59a79f..6063877c0a3a 100644 --- a/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingRule.jsx +++ b/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingRule.jsx @@ -45,7 +45,7 @@ const DeleteIcon: StyledComponent<{}, ThemeInterface, HTMLSpanElement> = styled. justify-content: center; :active { - background-color: ${theme.color.gray[90]} + background-color: ${theme.colors.gray[90]} } `); diff --git a/graylog2-web-interface/src/views/components/visualizations/GenericPlot.jsx b/graylog2-web-interface/src/views/components/visualizations/GenericPlot.jsx index 46edbb21fbf9..c05c708ab129 100644 --- a/graylog2-web-interface/src/views/components/visualizations/GenericPlot.jsx +++ b/graylog2-web-interface/src/views/components/visualizations/GenericPlot.jsx @@ -146,13 +146,13 @@ class GenericPlot extends React.Component { yaxis: { automargin: true, tickfont: { - color: theme.color.gray[50], + color: theme.colors.gray[50], }, }, xaxis: { automargin: true, tickfont: { - color: theme.color.gray[50], + color: theme.colors.gray[50], }, }, }; diff --git a/graylog2-web-interface/src/views/components/visualizations/number/Trend.jsx b/graylog2-web-interface/src/views/components/visualizations/number/Trend.jsx index 9cc4312a70b7..f2163b22c4fc 100644 --- a/graylog2-web-interface/src/views/components/visualizations/number/Trend.jsx +++ b/graylog2-web-interface/src/views/components/visualizations/number/Trend.jsx @@ -19,7 +19,7 @@ type Props = { }; const Background: StyledComponent<{trend: ?string}, ThemeInterface, HTMLDivElement> = styled.div(({ theme, trend }) => { - const { variant } = theme.color; + const { variant } = theme.colors; const bgColor = trend && trend === TREND_GOOD ? variant.success : variant.primary; return css` diff --git a/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.jsx b/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.jsx index 79642100ea0c..013346f46d94 100644 --- a/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.jsx +++ b/graylog2-web-interface/src/views/components/widgets/FieldSortIcon.jsx @@ -26,7 +26,7 @@ type DirectionStrategy = { }; const SortIcon: StyledComponent<{sortActive: boolean}, ThemeInterface, HTMLButtonElement> = styled.button(({ sortActive, theme }) => { - const color = sortActive ? theme.color.gray[20] : theme.color.gray[70]; + const color = sortActive ? theme.colors.gray[20] : theme.colors.gray[70]; return css` border: 0; diff --git a/graylog2-web-interface/src/views/components/widgets/MessageTable.jsx b/graylog2-web-interface/src/views/components/widgets/MessageTable.jsx index b3fe1aebeb7a..ecb235c3e686 100644 --- a/graylog2-web-interface/src/views/components/widgets/MessageTable.jsx +++ b/graylog2-web-interface/src/views/components/widgets/MessageTable.jsx @@ -68,7 +68,7 @@ const Table: StyledComponent<{}, ThemeInterface, HTMLTableElement> = styled.tabl padding-top: 0; padding-bottom: 5px; font-family: monospace; - color: ${theme.color.variant.dark.info}; + color: ${theme.colors.variant.dark.info}; } .message-wrapper { @@ -103,11 +103,11 @@ const Table: StyledComponent<{}, ThemeInterface, HTMLTableElement> = styled.tabl } &.message-group-toggled { - border-left: 7px solid ${theme.color.variant.light.info}; + border-left: 7px solid ${theme.colors.variant.light.info}; } &.message-highlight { - border-left: 7px solid ${theme.color.variant.light.success}; + border-left: 7px solid ${theme.colors.variant.light.success}; } } @@ -123,7 +123,7 @@ const Table: StyledComponent<{}, ThemeInterface, HTMLTableElement> = styled.tabl th, td { - border: 1px ${theme.color.gray[80]} solid !important; + border: 1px ${theme.colors.gray[80]} solid !important; left: 0; padding: 5px; position: static; @@ -132,16 +132,16 @@ const Table: StyledComponent<{}, ThemeInterface, HTMLTableElement> = styled.tabl `); const TableHead: StyledComponent<{}, ThemeInterface, HTMLTableSectionElement> = styled.thead(({ theme }) => ` - background-color: ${theme.color.gray[90]}; - color: ${theme.utils.readableColor(theme.color.gray[90])}; + background-color: ${theme.colors.gray[90]}; + color: ${theme.utils.readableColor(theme.colors.gray[90])}; th { border: 0; font-size: 11px; font-weight: normal; white-space: nowrap; - background-color: ${theme.color.gray[90]}; - color: ${theme.utils.readableColor(theme.color.gray[90])}; + background-color: ${theme.colors.gray[90]}; + color: ${theme.utils.readableColor(theme.colors.gray[90])}; } `); diff --git a/graylog2-web-interface/src/views/components/widgets/WidgetFrame.jsx b/graylog2-web-interface/src/views/components/widgets/WidgetFrame.jsx index 4200be0df1b5..63dde59b5346 100644 --- a/graylog2-web-interface/src/views/components/widgets/WidgetFrame.jsx +++ b/graylog2-web-interface/src/views/components/widgets/WidgetFrame.jsx @@ -33,12 +33,12 @@ const WidgetWrap = styled.div(({ theme }) => css` .reloading { margin-right: 2px; font-weight: bold; - color: ${theme.color.variant.dark.info}; + color: ${theme.colors.variant.dark.info}; display: none; } .loading-failed { - color: ${theme.color.variant.danger} !important; + color: ${theme.colors.variant.danger} !important; } .widget-title { @@ -50,7 +50,7 @@ const WidgetWrap = styled.div(({ theme }) => css` } .load-error { - color: ${theme.color.variant.danger}; + color: ${theme.colors.variant.danger}; margin-right: 5px; }