Audit the theme, remove unused, update used (WIP)

addons/a11y/src/components/Report/Tags.js

@@ -12,8 +12,8 @@ const Wrapper = styled.div({
 const Item = styled.div(({ theme }) => ({
   margin: '0 6px',
   padding: '5px',
-  border: theme.mainBorder,
+  border: `1px solid ${theme.mainBorderColor}`,
-  borderRadius: theme.mainBorderRadius,
+  borderRadius: 4,
 }));
 
 function Tags({ tags }) {

addons/a11y/src/components/Tabs.js

@@ -10,7 +10,7 @@ const Container = styled.div({
 });
 
 const List = styled.div(({ theme }) => ({
-  boxShadow: `${theme.color.border} 0 -1px 0 0 inset`,
+  boxShadow: `${theme.mainBorderColor} 0 -1px 0 0 inset`,
   background: '#f8f8fc',
   flexWrap: 'wrap',
   display: 'flex',

lib/components/src/bar/button.js

@@ -41,7 +41,7 @@ export const TabButton = styled.button(
           borderBottomColor: theme.barSelectedColor,
         }
       : {
-          color: theme.dimmedTextColor,
+          opacity: 0.4,
           borderBottomColor: 'transparent',
         }
 );

lib/components/src/bar/separator.js

@@ -21,7 +21,7 @@ export const Separator = styled.span(
   ({ theme }) => ({
     width: 1,
     height: 24,
-    background: theme.color.border,
+    background: theme.mainBorderColor,
     marginTop: 8,
   }),
   ({ force }) =>

lib/components/src/form/field/field.js

@@ -7,7 +7,7 @@ const Wrapper = styled.label(({ theme }) => ({
   boxSizing: 'border-box',
   display: 'flex',
   margin: '8px 0',
-  borderBottom: theme.mainBorder,
+  borderBottom: `1px solid ${theme.mainBorderColor}`,
   padding: '0 8px 8px 8px',
 
   '&:last-child': {

lib/components/src/syntaxhighlighter/syntaxhighlighter.js

@@ -30,8 +30,8 @@ const Wrapper = styled.div(
   ({ theme, bordered }) =>
     bordered
       ? {
-          border: theme.mainBorder,
+          border: `1px solid ${theme.mainBorderColor}`,
-          borderRadius: theme.mainBorderRadius,
+          borderRadius: 4,
           background: theme.barFill,
         }
       : {}

lib/components/src/tabs/tabs.js

@@ -10,10 +10,9 @@ const Wrapper = styled.div(
   ({ theme, bordered }) =>
     bordered
       ? {
-          background: theme.mainFill,
           backgroundClip: 'padding-box',
-          borderRadius: theme.mainBorderRadius,
+          borderRadius: 4,
-          border: theme.mainBorder,
+          border: `1px solid ${theme.mainBorderColor}`,
         }
       : {},
   ({ absolute }) =>

lib/components/src/typography/DocumentFormatting.js

@@ -14,7 +14,7 @@ const Wrapper = styled.div(
 
     h2 {
       font-size: ${props.theme.typography.size.m2}px;
-      border-bottom: 1px solid ${props.theme.color.border};
+      border-bottom: 1px solid ${props.theme.mainBorderColor};
     }
 
     h3 {
@@ -181,7 +181,7 @@ const Wrapper = styled.div(
 
     hr {
       border: 0 none;
-      color: ${props.theme.color.border};
+      color: ${props.theme.mainBorderColor};
       height: 4px;
       padding: 0;
     }
@@ -303,7 +303,7 @@ const Wrapper = styled.div(
       border-collapse: collapse;
     }
     table tr {
-      border-top: 1px solid ${props.theme.color.border};
+      border-top: 1px solid ${props.theme.mainBorderColor};
       background-color: white;
       margin: 0;
       padding: 0;
@@ -315,14 +315,14 @@ const Wrapper = styled.div(
 
     table tr th {
       font-weight: bold;
-      border: 1px solid ${props.theme.color.border};
+      border: 1px solid ${props.theme.mainBorderColor};
       text-align: left;
       margin: 0;
       padding: 6px 13px;
     }
 
     table tr td {
-      border: 1px solid ${props.theme.color.border};
+      border: 1px solid ${props.theme.mainBorderColor};
       text-align: left;
       margin: 0;
       padding: 6px 13px;

lib/theming/src/base.ts

@@ -62,8 +62,8 @@ export const color = {
 
   // Status
   positive: '#66BF3C',
-  danger: '#FC521F',
   negative: '#FF4400',
+  warning: '#E69D00',
 };
 
 export const background = {

lib/theming/src/themes/light.ts

@@ -5,18 +5,19 @@ import { baseFonts, monoFonts, color, background, typography, Theme } from '../b
 import { easing, animation } from '../animation';
 
 const main = {
-  mainBackground: '#f6f9fc linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1))',
+  // Typography
-  mainBorder: '1px solid rgba(0,0,0,0.1)',
-  mainBorderColor: 'rgba(0,0,0,0.1)',
-  mainBorderRadius: 4,
-  mainFill: 'rgba(255,255,255,0.89)',
   mainTextFace: baseFonts.fontFamily,
   mainTextColor: baseFonts.color,
   mainTextSize: 14,
+
+  // Layout
+  mainBorderColor: color.border,
+  monoTextFace: monoFonts.fontFamily,
 };
 
 const bar = {
-  barFill: 'rgba(255,255,255,1)',
+  // Toolbars, ActionBars, and other bars
+  barFill: color.lightest,
   barTextColor: color.mediumdark,
   barSelectedColor: color.secondary,
 };
@@ -25,57 +26,33 @@ const layout = {
   layoutMargin: 10,
 };
 
-const aside = {
+const form = {
-  asideFill: 'transparent',
+  // Style Inputs/Textareas
-  asideSelected: {
+  inputFill: color.lightest,
-    background: color.secondary,
+  inputBorder: color.border,
-    color: color.lightest,
-  },
-  asideHover: {
-    background: '#EAF3FC',
-  },
 };
 
-const mono = {
+const sidebar = {
-  monoTextFace: monoFonts.fontFamily,
+  // Sidebar states
 };
 
 const light: Theme = {
   ...main,
   ...bar,
   ...layout,
-  ...mono,
+  ...form,
-  ...aside,
+  ...sidebar,
 
-  // DOM: official global style vars
+  // Official global style vars
+  // Used in themed components
   color,
   background,
   typography,
   easing,
   animation,
 
-  inputFill: 'rgba(0,0,0,0.1)',
-  dimmedTextColor: 'rgba(0,0,0,0.4)',
-  menuHighlightColor: '#199EFF',
-  monoTextFace: monoFonts.fontFamily,
-
   brand: null,
 
-  code: createSyntax({
-    colors: {
-      green1: '#008000',
-      red1: '#A31515',
-      red2: '#9a050f',
-      red3: '#800000',
-      red4: '#ff0000',
-      gray1: '#393A34',
-      cyan1: '#36acaa',
-      cyan2: '#2B91AF',
-      blue1: '#0000ff',
-      blue2: '#00009f',
-    },
-    mono,
-  }),
   addonActionsTheme: {
     ...chromeLight,
     BASE_FONT_FAMILY: monoFonts.fontFamily,

lib/ui/src/components/sidebar/SidebarSearch.js

@@ -37,7 +37,7 @@ const CancelButton = styled.button(({ theme }) => ({
   padding: 4,
   textDecoration: 'none',
 
-  background: theme.color.border,
+  background: theme.mainBorderColor,
   borderRadius: '1em',
   cursor: 'pointer',
   opacity: 1,
@@ -57,7 +57,7 @@ const CancelButton = styled.button(({ theme }) => ({
   },
 
   '&:hover': {
-    background: opacify(0.1, theme.color.border),
+    background: opacify(0.1, theme.mainBorderColor),
     '> svg': {
       color: theme.color.darker,
     },
@@ -67,7 +67,7 @@ const CancelButton = styled.button(({ theme }) => ({
 const FilterForm = styled.form(({ theme, focussed }) => ({
   transition: 'all 150ms ease-out',
   borderBottom: focussed ? `1px solid transparent` : '1px solid transparent',
-  borderBottomColor: focussed ? theme.color.dark : opacify(0.1, theme.color.border),
+  borderBottomColor: focussed ? theme.color.dark : opacify(0.1, theme.mainBorderColor),
   outline: 0,
   position: 'relative',
 

lib/ui/src/settings/SettingsFooter.js

@@ -7,7 +7,7 @@ const Footer = styled.div(({ theme }) => ({
   display: 'flex',
   paddingTop: 20,
   marginTop: 20,
-  borderTop: `1px solid ${theme.color.border}`,
+  borderTop: `1px solid ${theme.mainBorderColor}`,
   fontSize: `${theme.typography.size.s2}px`,
   fontWeight: `${theme.typography.weight.bold}`,
 

lib/ui/src/settings/about.js

@@ -71,7 +71,7 @@ const UpdateMessage = styled.div(
     padding: '10px 20px',
     marginBottom: 24,
     borderRadius: 4,
-    border: `1px solid ${theme.color.border}`,
+    border: `1px solid ${theme.mainBorderColor}`,
     textAlign: 'center',
   })
 );
@@ -85,7 +85,7 @@ const ErrorMessage = styled.div(({ theme }) => ({
 const Upgrade = styled.div(({ theme }) => ({
   marginTop: 20,
   paddingBottom: 20,
-  borderTop: `1px solid ${theme.color.border}`,
+  borderTop: `1px solid ${theme.mainBorderColor}`,
 
   fontSize: `${theme.typography.size.s2}px`,
 }));

lib/ui/src/settings/shortcuts.js

@@ -36,7 +36,7 @@ export const GridHeaderRow = styled.div({
 
 export const Row = styled.div(({ theme }) => ({
   padding: '6px 0',
-  borderTop: `1px solid ${theme.color.border}`,
+  borderTop: `1px solid ${theme.mainBorderColor}`,
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 0px',
 }));
@@ -90,10 +90,10 @@ export const TextInput = styled.input(
       color: theme.color.mediumdark,
     },
 
-    boxShadow: `${theme.color.border} 0 0 0 1px inset`,
+    boxShadow: `${theme.mainBorderColor} 0 0 0 1px inset`,
 
     '&:hover': {
-      boxShadow: `${opacify(0.1, theme.color.border)} 0 0 0 1px inset`,
+      boxShadow: `${opacify(0.1, theme.mainBorderColor)} 0 0 0 1px inset`,
     },
 
     '&:focus': {