Merge pull request #17034 from richorrichard/16937-theming-change-normal-theme-to-light-theme

(Theming) Replace references to `themes.normal` with `themes.light`

Author: ndelangen

addons/a11y/src/components/A11yContext.tsx

@@ -22,9 +22,9 @@ interface A11yContextStore {
 }
 
 const colorsByType = [
-  convert(themes.normal).color.negative, // VIOLATION,
-  convert(themes.normal).color.positive, // PASS,
-  convert(themes.normal).color.warning, // INCOMPLETION,
+  convert(themes.light).color.negative, // VIOLATION,
+  convert(themes.light).color.positive, // PASS,
+  convert(themes.light).color.warning, // INCOMPLETION,
 ];
 
 export const A11yContext = React.createContext<A11yContextStore>({

addons/interactions/src/components/List.tsx

@@ -12,26 +12,26 @@ const ListWrapper = styled.ul({
 const Wrapper = styled.div({
   display: 'flex',
   width: '100%',
-  borderBottom: `1px solid ${convert(themes.normal).appBorderColor}`,
+  borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
   '&:hover': {
-    background: convert(themes.normal).background.hoverable,
+    background: convert(themes.light).background.hoverable,
   },
 });
 
 const Icon = styled(Icons)<IconsProps>({
   height: 10,
   width: 10,
   minWidth: 10,
-  color: convert(themes.normal).color.mediumdark,
+  color: convert(themes.light).color.mediumdark,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   alignSelf: 'center',
   display: 'inline-flex',
 });
 
 const HeaderBar = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  paddingLeft: convert(themes.normal).layoutMargin - 3,
+  padding: convert(themes.light).layoutMargin,
+  paddingLeft: convert(themes.light).layoutMargin - 3,
   background: 'none',
   color: 'inherit',
   textAlign: 'left',
@@ -41,13 +41,13 @@ const HeaderBar = styled.div({
 
   '&:focus': {
     outline: '0 none',
-    borderLeft: `3px solid ${convert(themes.normal).color.secondary}`,
+    borderLeft: `3px solid ${convert(themes.light).color.secondary}`,
   },
 });
 
 const Description = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  marginBottom: convert(themes.normal).layoutMargin,
+  padding: convert(themes.light).layoutMargin,
+  marginBottom: convert(themes.light).layoutMargin,
   fontStyle: 'italic',
 });
 
@@ -69,7 +69,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
             icon="chevrondown"
-            color={convert(themes.normal).appBorderColor}
+            color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}

addons/jest/src/components/Panel.tsx

@@ -99,13 +99,13 @@ const getColorByType = (type: string) => {
   // using switch to allow for new types to be added
   switch (type) {
     case StatusTypes.PASSED_TYPE:
-      return convert(themes.normal).color.positive;
+      return convert(themes.light).color.positive;
     case StatusTypes.FAILED_TYPE:
-      return convert(themes.normal).color.negative;
+      return convert(themes.light).color.negative;
     case StatusTypes.PENDING_TYPE:
-      return convert(themes.normal).color.warning;
+      return convert(themes.light).color.warning;
     case StatusTypes.TODO_TYPE:
-      return convert(themes.normal).color.purple;
+      return convert(themes.light).color.purple;
     default:
       return null;
   }
@@ -154,7 +154,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
                 </SuiteHead>
                 <TabsState
                   initial="failing-tests"
-                  backgroundColor={convert(themes.normal).background.hoverable}
+                  backgroundColor={convert(themes.light).background.hoverable}
                 >
                   <div
                     id="failing-tests"

addons/jest/src/components/Result.tsx

@@ -67,7 +67,7 @@ export function Result(props: ResultProps) {
             <Icon
               icon="chevrondown"
               size={10}
-              color={convert(themes.normal).color.mediumdark}
+              color={convert(themes.light).color.mediumdark}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,
               }}

examples/official-storybook/stories/addon-a11y/highlight.stories.js

@@ -15,9 +15,9 @@ export default {
   decorators: [(storyFn) => <div style={{ padding: 10 }}>{storyFn()}</div>],
 };
 
-const PassesHighlight = styled.div(highlightObject(convert(themes.normal).color.positive));
-const IncompleteHighlight = styled.div(highlightObject(convert(themes.normal).color.warning));
-const ViolationsHighlight = styled.div(highlightObject(convert(themes.normal).color.negative));
+const PassesHighlight = styled.div(highlightObject(convert(themes.light).color.positive));
+const IncompleteHighlight = styled.div(highlightObject(convert(themes.light).color.warning));
+const ViolationsHighlight = styled.div(highlightObject(convert(themes.light).color.negative));
 
 export const Passes = () => <PassesHighlight>{text}</PassesHighlight>;
 export const Incomplete = () => <IncompleteHighlight>{text}</IncompleteHighlight>;