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

2025-04-05 16:11:33 +08:00 · 2019-02-07 12:38:29 -05:00 · 2019-02-07 12:38:29 -05:00 · b57180c7aa
commit b57180c7aa
parent c943926f12
14 changed files with 42 additions and 66 deletions
--- a/addons/a11y/src/components/Report/Tags.js
+++ b/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,
-  borderRadius: theme.mainBorderRadius,
+  border: `1px solid ${theme.mainBorderColor}`,
+  borderRadius: 4,
 }));

 function Tags({ tags }) {
--- a/addons/a11y/src/components/Tabs.js
+++ b/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',
--- a/lib/components/src/bar/button.js
+++ b/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',
        }
 );
--- a/lib/components/src/bar/separator.js
+++ b/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 }) =>
--- a/lib/components/src/form/field/field.js
+++ b/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': {
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.js
@ -30,8 +30,8 @@ const Wrapper = styled.div(
  ({ theme, bordered }) =>
    bordered
      ? {
-          border: theme.mainBorder,
-          borderRadius: theme.mainBorderRadius,
+          border: `1px solid ${theme.mainBorderColor}`,
+          borderRadius: 4,
          background: theme.barFill,
        }
      : {}
--- a/lib/components/src/tabs/tabs.js
+++ b/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,
-          border: theme.mainBorder,
+          borderRadius: 4,
+          border: `1px solid ${theme.mainBorderColor}`,
        }
      : {},
  ({ absolute }) =>
--- a/lib/components/src/typography/DocumentFormatting.js
+++ b/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;
--- a/lib/theming/src/base.ts
+++ b/lib/theming/src/base.ts
@ -62,8 +62,8 @@ export const color = {

  // Status
  positive: '#66BF3C',
-  danger: '#FC521F',
  negative: '#FF4400',
+  warning: '#E69D00',
 };

 export const background = {
--- a/lib/theming/src/themes/light.ts
+++ b/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))',
-  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)',
+  // Typography
  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 = {
-  asideFill: 'transparent',
-  asideSelected: {
-    background: color.secondary,
-    color: color.lightest,
-  },
-  asideHover: {
-    background: '#EAF3FC',
-  },
+const form = {
+  // Style Inputs/Textareas
+  inputFill: color.lightest,
+  inputBorder: color.border,
 };

-const mono = {
-  monoTextFace: monoFonts.fontFamily,
+const sidebar = {
+  // Sidebar states
 };

 const light: Theme = {
  ...main,
  ...bar,
  ...layout,
-  ...mono,
-  ...aside,
+  ...form,
+  ...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,
--- a/lib/ui/src/components/sidebar/SidebarSearch.js
+++ b/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',

--- a/lib/ui/src/settings/SettingsFooter.js
+++ b/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}`,

--- a/lib/ui/src/settings/about.js
+++ b/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`,
 }));
--- a/lib/ui/src/settings/shortcuts.js
+++ b/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': {