fix: Improve color themeing (ory#49)

Close ory#10

src/components/adopters.module.css

@@ -5,7 +5,7 @@
 
   & h3,
   & p {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 
   & a img {

src/components/adopters.module.css.d.ts

@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "adopters": string;
-  readonly "list": string;
-  readonly "logos": string;
-  readonly "logosInner": string;
-};
-export = styles;
-
+  readonly adopters: string
+  readonly list: string
+  readonly logos: string
+  readonly logosInner: string
+}
+export = styles

src/components/announcement.module.css

@@ -12,7 +12,7 @@
     text-decoration: underline;
     &:hover,
     &:active {
-      color: var(--colors-ory-default);
+      color: var(--colors-themed-default);
     }
   }
 }

src/components/announcement.module.css.d.ts

@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "announcement": string;
-};
-export = styles;
-
+  readonly announcement: string
+}
+export = styles

src/components/blog-hero.module.css

@@ -1,7 +1,7 @@
 @import '../styles/properties.css';
 
 .title {
-  background: var(--colors-ory-dark);
+  background: var(--colors-base-dark);
 
   color: var(--colors-base-white);
 
@@ -25,13 +25,13 @@
     color: var(--colors-base-white);
 
     & .author {
-      color: var(--colors-ory-default);
+      color: var(--colors-themed-default);
     }
   }
 }
 
 .subtitle {
-  color: var(--colors-ory-default);
+  color: var(--colors-themed-default);
   font-size: 12px;
   line-height: 126%;
   letter-spacing: 0.03em;
@@ -56,12 +56,12 @@
 }
 
 .teaser {
-  background: var(--colors-ory-dark);
+  background: var(--colors-base-dark);
 
   color: var(--colors-base-white);
 
   & a:any-link {
-    color: var(--colors-ory-default);
+    color: var(--colors-themed-default);
 
     &:hover,
     &:active,

src/components/blog-hero.module.css.d.ts

@@ -1,9 +1,8 @@
 declare const styles: {
-  readonly "title": string;
-  readonly "meta": string;
-  readonly "author": string;
-  readonly "subtitle": string;
-  readonly "teaser": string;
-};
-export = styles;
-
+  readonly title: string
+  readonly meta: string
+  readonly author: string
+  readonly subtitle: string
+  readonly teaser: string
+}
+export = styles

src/components/blog-section.module.css

@@ -17,7 +17,7 @@
   & dt,
   & p {
     margin-top: 0;
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 
   & p,
@@ -89,12 +89,12 @@
   }
 
   & a:any-link {
-    color: var(--colors-ory-default);
+    color: var(--colors-themed-default);
   }
 
   & p a:hover,
   & p a:active {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
     text-decoration: underline;
   }
 
@@ -109,7 +109,7 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 168%;
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
     font-family: 'IBM Plex Mono', monospace;
   }
 
@@ -123,7 +123,7 @@
     line-height: 168%;
     padding-left: 34px;
     margin-bottom: 32px;
-    border-left: 2px solid var(--colors-ory-default);
+    border-left: 2px solid var(--colors-themed-default);
   }
 
   & figure {

src/components/blog-section.module.css.d.ts

@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "section": string;
-};
-export = styles;
-
+  readonly section: string
+}
+export = styles

src/components/codebox.module.css

@@ -7,7 +7,7 @@
 
 .editor-header {
   display: flex;
-  align-items: bottom;
+  align-items: baseline;
   color: var(--colors-base-white);
   & .tabs {
     overflow: auto;
@@ -21,18 +21,10 @@
     margin-right: 16px;
     cursor: pointer;
     display: inline;
-  }
-}
-
-:global .theme-hydra :local .tab {
-  &.selected {
-    border-bottom: 1px solid var(--colors-hydra-default);
-  }
-}
 
-:global .theme-kratos :local .tab {
-  &.selected {
-    border-bottom: 1px solid var(--colors-kratos-default);
+    &.selected {
+      border-bottom: 1px solid var(--colors-themed-default);
+    }
   }
 }
 
@@ -45,20 +37,12 @@
     width: 8px;
     height: 8px;
     border-radius: 4px;
-    background-color: var(--colors-ory-default);
+    background-color: var(--colors-themed-weak);
     margin-right: 5px;
-  }
-}
-
-:global .theme-hydra :local .window-action {
-  &.primary {
-    background-color: var(--colors-hydra-default);
-  }
-}
 
-:global .theme-kratos :local .window-action {
-  &.primary {
-    background-color: var(--colors-kratos-default);
+    &.primary {
+      background-color: var(--colors-themed-default);
+    }
   }
 }
 

src/components/codebox.module.css.d.ts

@@ -1,14 +1,13 @@
 declare const styles: {
-  readonly "box": string;
-  readonly "editorHeader": string;
-  readonly "tabs": string;
-  readonly "tab": string;
-  readonly "selected": string;
-  readonly "windowActions": string;
-  readonly "windowAction": string;
-  readonly "primary": string;
-  readonly "content": string;
-  readonly "active": string;
-};
-export = styles;
-
+  readonly box: string
+  readonly editorHeader: string
+  readonly tabs: string
+  readonly tab: string
+  readonly selected: string
+  readonly windowActions: string
+  readonly windowAction: string
+  readonly primary: string
+  readonly content: string
+  readonly active: string
+}
+export = styles

src/components/collaborator.module.css

@@ -5,7 +5,7 @@
 
   & h3,
   & p {
-    color: var(--colors-ory-dark);
+    color: var(--colors-base-dark);
   }
 }
 

src/components/collaborator.module.css.d.ts

@@ -1,6 +1,5 @@
 declare const styles: {
-  readonly "collaborator": string;
-  readonly "image": string;
-};
-export = styles;
-
+  readonly collaborator: string
+  readonly image: string
+}
+export = styles

src/components/collaborator.tsx

@@ -4,9 +4,10 @@ import styles from './collaborator.module.css'
 const collaborator = [
   {
     title: 'OpenCollective',
-    image: 'https://opencollective.com/ory/contributors.svg?avatarHeight=24&width=540&button=false',
+    image:
+      'https://opencollective.com/ory/contributors.svg?avatarHeight=24&width=540&button=false',
     url: 'https://github.com/ory',
-  }
+  },
 ]
 
 const Collaborator = () => (
@@ -25,11 +26,16 @@ const Collaborator = () => (
         </div>
         <div className="col-lg-offset-2 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">
           <div className={styles.image}>
-              {collaborator.map(({ title, image, url }) => (
-                <a href={url}>
-                  <img key={title} src={image} alt={title} className="responsive" />
-                </a>
-              ))}
+            {collaborator.map(({ title, image, url }) => (
+              <a href={url}>
+                <img
+                  key={title}
+                  src={image}
+                  alt={title}
+                  className="responsive"
+                />
+              </a>
+            ))}
           </div>
         </div>
         <div className="hidden-lg  col-lg-offset-1 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">

src/components/footer.module.css

@@ -1,36 +1,17 @@
 @import '../styles/properties.css';
 
 .footer {
-  background-color: var(--colors-ory-dark);
+  background-color: var(--colors-base-dark);
   padding: 36px 0;
-  color: var(--colors-ui-white);
+  color: var(--colors-base-white);
 }
 
 .footer a:any-link {
   color: var(--colors-base-white);
-}
-
-:global .theme-default :local .footer a:any-link {
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-ory-default);
-  }
-}
-
-:global .theme-hydra :local .footer a:any-link {
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--colors-hydra-default);
-  }
-}
-
-:global .theme-kratos :local .footer a:any-link {
   &:hover,
   &:active,
   &:focus {
-    color: var(--colors-kratos-default);
+    color: var(--colors-themed-default);
   }
 }
 

src/components/footer.module.css.d.ts

@@ -1,12 +1,11 @@
 declare const styles: {
-  readonly "footer": string;
-  readonly "contact": string;
-  readonly "copyright": string;
-  readonly "listTitle": string;
-  readonly "list": string;
-  readonly "item": string;
-  readonly "menuRow": string;
-  readonly "menuItem": string;
-};
-export = styles;
-
+  readonly footer: string
+  readonly contact: string
+  readonly copyright: string
+  readonly listTitle: string
+  readonly list: string
+  readonly item: string
+  readonly menuRow: string
+  readonly menuItem: string
+}
+export = styles