theme.color to theme.colors #8176

Graylog2 · Jun 8, 2020 · 47cdc40 · 47cdc40
1 parent 3fc0f0f
commit 47cdc40
Show file tree

Hide file tree

Showing 93 changed files with 504 additions and 470 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,7 +7,7 @@ import { DataTable, Icon } from 'components/common';
 import { Badge } from 'components/graylog';
 
 const StyledBadge = styled(({ isFulfilled, theme, ...rest }) => <Badge {...rest} />)`
-  background-color: ${({ isFulfilled, theme }) => (isFulfilled ? theme.color.variant.success : theme.color.variant.danger)};
+  background-color: ${({ isFulfilled, theme }) => (isFulfilled ? theme.colors.variant.success : theme.colors.variant.danger)};
 `;
 
 class ContentPackConstraints extends React.Component {

diff --git 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
@@ -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/...-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.jsx b/...-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }) => {