diff --git a/src/components/adopters.module.css.d.ts b/src/components/adopters.module.css.d.ts index 4765bb6a53..47e2526c95 100644 --- a/src/components/adopters.module.css.d.ts +++ b/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 diff --git a/src/components/announcement.module.css.d.ts b/src/components/announcement.module.css.d.ts index b003d1dcfe..80b07a61db 100644 --- a/src/components/announcement.module.css.d.ts +++ b/src/components/announcement.module.css.d.ts @@ -1,5 +1,4 @@ declare const styles: { - readonly "announcement": string; -}; -export = styles; - + readonly announcement: string +} +export = styles diff --git a/src/components/blog-hero.module.css.d.ts b/src/components/blog-hero.module.css.d.ts index bc3575e675..f42afebabe 100644 --- a/src/components/blog-hero.module.css.d.ts +++ b/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 diff --git a/src/components/blog-section.module.css.d.ts b/src/components/blog-section.module.css.d.ts index a09ec68fc5..b0222e05fb 100644 --- a/src/components/blog-section.module.css.d.ts +++ b/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 diff --git a/src/components/codebox.module.css b/src/components/codebox.module.css index 58d16e7b3c..98f71620e8 100644 --- a/src/components/codebox.module.css +++ b/src/components/codebox.module.css @@ -1,45 +1,64 @@ .box { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - background-color: var(--colors-ory-dark); - border-radius: 15px; + background-color: var(--colors-base-black); + border-radius: 4px; padding: 8px 16px; min-height: 360px; } -.tabs { +.editor-header { display: flex; - align-items: center; + align-items: bottom; color: var(--colors-base-white); + & .tabs { + overflow: auto; + } & .tab { font-family: 'IBM Plex Mono', monospace; font-style: normal; font-weight: 500; font-size: 11px; - line-height: 168%; + line-height: 250%; margin-right: 16px; - padding: 0 8px; cursor: pointer; - &.selected { - border-bottom: 1px solid var(--colors-hydra-default); + 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); + } } .window-actions { display: flex; align-items: center; height: 20px; - margin-right: 5px; + margin-right: 16px; & .window-action { width: 8px; height: 8px; border-radius: 4px; - background-color: var(--colors-ory-dark); + background-color: var(--colors-ory-default); margin-right: 5px; + } +} - &.primary { - background-color: var(--colors-hydra-default); - } +: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); } } @@ -62,7 +81,7 @@ font-weight: 500; font-size: 11px; line-height: 175%; - background-color: var(--colors-ory-dark); + background-color: var(--colors-base-black); word-wrap: break-word; white-space: pre-wrap; @@ -70,6 +89,6 @@ & pre code :global .token.operator { color: var(--colors-base-white); - background-color: var(--colors-ory-dark); + background-color: var(--colors-base-black); } } diff --git a/src/components/codebox.module.css.d.ts b/src/components/codebox.module.css.d.ts index b79dc78f96..d334dcceda 100644 --- a/src/components/codebox.module.css.d.ts +++ b/src/components/codebox.module.css.d.ts @@ -1,13 +1,13 @@ declare const styles: { - readonly "box": 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 diff --git a/src/components/codebox.tsx b/src/components/codebox.tsx index aa4f3c9e54..358332a051 100644 --- a/src/components/codebox.tsx +++ b/src/components/codebox.tsx @@ -35,13 +35,13 @@ class CodeBox extends Component { const { tabs } = this.props return (
-
+
- {tabs.map(({ filename }, index) => ( +
{tabs.map(({ filename }, index) => (
{ > {filename}
- ))} + ))}
{tabs.map(({ filename, code, language }, index) => ( diff --git a/src/components/footer.module.css b/src/components/footer.module.css index 6830efe6f4..8635175eda 100644 --- a/src/components/footer.module.css +++ b/src/components/footer.module.css @@ -26,6 +26,14 @@ } } +:global .theme-kratos :local .footer a:any-link { + &:hover, + &:active, + &:focus { + color: var(--colors-kratos-default); + } +} + .footer .contact { margin-top: 16px; margin-bottom: 2px; diff --git a/src/components/footer.module.css.d.ts b/src/components/footer.module.css.d.ts index 4543b2ef9e..c455c87397 100644 --- a/src/components/footer.module.css.d.ts +++ b/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 diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 8f5990e80d..96b5e1bca3 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -44,6 +44,10 @@ const menu = [ { title: 'GitHub', items: [ + { + title: `${brandPrefix}Kratos`, + href: 'https://github.com/ory/kratos', + }, { title: `${brandPrefix}Hydra`, href: 'https://github.com/ory/hydra', @@ -56,10 +60,6 @@ const menu = [ title: `${brandPrefix}Keto`, href: 'https://github.com/ory/keto', }, - { - title: `${brandPrefix}Hive`, - href: 'https://github.com/ory/hive', - }, ], }, ] @@ -81,7 +81,10 @@ const Footer = () => ( {'ORY )} -

+

© Copyright 2020 Ory Corp

diff --git a/src/components/header.module.css b/src/components/header.module.css index 06d28c739e..329717f0f8 100644 --- a/src/components/header.module.css +++ b/src/components/header.module.css @@ -44,6 +44,21 @@ } } +:global .theme-kratos :local .header { + & a, + & a:visited { + &:hover, + &:focus, + &:active { + color: var(--colors-kratos-default); + } + } + + & .logo { + color: var(--colors-kratos-default); + } +} + .project-name { font-family: 'Open Sans', sans-serif; font-style: normal; diff --git a/src/components/header.module.css.d.ts b/src/components/header.module.css.d.ts index e6c6fd6877..39e5aeeda7 100644 --- a/src/components/header.module.css.d.ts +++ b/src/components/header.module.css.d.ts @@ -1,12 +1,11 @@ declare const styles: { - readonly "header": string; - readonly "logo": string; - readonly "projectName": string; - readonly "projectNameTiny": string; - readonly "menu": string; - readonly "leftMenu": string; - readonly "rightMenu": string; - readonly "iconMenu": string; -}; -export = styles; - + readonly header: string + readonly logo: string + readonly projectName: string + readonly projectNameTiny: string + readonly menu: string + readonly leftMenu: string + readonly rightMenu: string + readonly iconMenu: string +} +export = styles diff --git a/src/components/header.tsx b/src/components/header.tsx index 0df7c191e1..097d092a58 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -18,7 +18,6 @@ export type MenuItem = { export type IconMenuItem = { title: string href: string - image: string } export type Menu = MenuItem[] @@ -67,7 +66,7 @@ const Header = ({ menu = [], icons = [], appendix }: PropTypes) => (