Style fixes (#6291)

* Fix styles: CommunityCta * Fix Styles: Homepage * Stylefix: Wes CTA block * Style fixes: Why Keystone * Style fixes: Content Management * Style fixes: Developers * Style fixes: Organisations * Style fixes: Prose lite Reverts text color to default `--text` var per Figma * Style fixes: Docs Home * Stye fixes: examples CTA
keystonejs · Aug 10, 2021 · 2963ac7 · 2963ac7 · vercel · Aug 10, 2021
1 parent f97a9ca
commit 2963ac7
Show file tree

Hide file tree

Showing 10 changed files with 240 additions and 148 deletions.
diff --git a/docs/components/content/AdvancedReactCta.tsx b/docs/components/content/AdvancedReactCta.tsx
@@ -81,19 +81,19 @@ export function AdvancedReactCta(props: HTMLAttributes<HTMLElement>) {
         >
           <li>
             <Tick grad="grad2" />
-            <Type look="body16" color="var(--muted)">
+            <Type look="body18" color="var(--muted)">
               11 modules
             </Type>
           </li>
           <li>
             <Tick grad="grad2" />
-            <Type look="body16" color="var(--muted)">
+            <Type look="body18" color="var(--muted)">
               70 videos
             </Type>
           </li>
           <li>
             <Tick grad="grad2" />
-            <Type look="body16" color="var(--muted)">
+            <Type look="body18" color="var(--muted)">
               28,000 students
             </Type>
           </li>

diff --git a/docs/components/content/CommunityCta.tsx b/docs/components/content/CommunityCta.tsx
@@ -54,7 +54,7 @@ export function CommunityCta(props: HTMLAttributes<HTMLElement>) {
         <Type as="h2" look="heading30">
           Learn with others in a supportive community
         </Type>
-        <Type as="p" look="body18" margin="1rem 0">
+        <Type as="p" look="body18" color="var(--muted)" margin="1rem 0">
           Share your work and get the help you need in the Keystone community Slack: an inclusive
           space to share ideas and explore what‘s possible.
         </Type>
@@ -88,11 +88,15 @@ export function CommunityCta(props: HTMLAttributes<HTMLElement>) {
         >
           <li>
             <Tick grad="grad4" />
-            <Type look="body16">2000+ members</Type>
+            <Type look="body18" color="var(--muted)">
+              2000+ members
+            </Type>
           </li>
           <li>
             <Tick grad="grad4" />
-            <Type look="body16">Personalised support</Type>
+            <Type look="body18" color="var(--muted)">
+              Personalised support
+            </Type>
           </li>
         </ul>
       </div>

diff --git a/docs/components/docs/ExamplesList.tsx b/docs/components/docs/ExamplesList.tsx
@@ -124,6 +124,7 @@ export function Examples() {
         users rate items on a 5-star scale. Builds on the Blog starter project.
       </Well>
       <Well
+        grad="grad3"
         heading="Custom Admin UI Pages"
         href="https://github.com/keystonejs/keystone/blob/master/examples/custom-admin-ui-pages"
         target="_blank"
@@ -141,7 +142,7 @@ export function Examples() {
         Adds a custom logo component in the Admin UI. Builds on the Task Manager starter project.
       </Well>
       <Well
-        grad="grad2"
+        grad="grad3"
         heading="Custom Admin UI Navigation"
         href="/docs/guides/custom-admin-ui-navigation"
       >

diff --git a/docs/components/docs/GitHubExamplesCTA.tsx b/docs/components/docs/GitHubExamplesCTA.tsx
@@ -18,6 +18,8 @@ export function GitHubExamplesCTA() {
       </span>
       <Button
         as="a"
+        look="secondary"
+        size="small"
         href="https://github.com/keystonejs/keystone/tree/master/examples"
         target="_blank"
         rel="noopener noreferrer"

diff --git a/docs/lib/prose-lite.ts b/docs/lib/prose-lite.ts
@@ -1,5 +1,4 @@
 export const proseStyles = {
-  color: 'var(--muted)',
   'img, video': {
     maxWidth: '100%',
     height: 'auto',

diff --git a/docs/pages/for-content-management.tsx b/docs/pages/for-content-management.tsx
@@ -97,9 +97,11 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            <Link href="/docs/apis/access-control">
-              <a>Access control API →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/apis/access-control">
+                <a>Access control API →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -164,9 +166,11 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            <Link href="/docs/apis/fields">
-              <a>Fields API →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/apis/fields">
+                <a>Fields API →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -199,14 +203,18 @@ export default function ForOrganisations() {
               </Type>
               <Button
                 as="a"
+                // look="soft"
+                size="large"
                 href="/docs/guides/document-fields#try-the-demo"
                 css={{ margin: '1.5rem 1rem 1rem 0' }}
               >
                 Try the demo <ArrowR />
               </Button>
-              <Link href="/docs/guides/document-fields">
-                <a>Read the guide →</a>
-              </Link>
+              <Type look="body18">
+                <Link href="/docs/guides/document-fields">
+                  <a>Read the guide →</a>
+                </Link>
+              </Type>
             </div>
             <div>
               <Image
@@ -223,7 +231,7 @@ export default function ForOrganisations() {
               padding: 0,
               margin: 0,
               display: 'grid',
-              marginTop: '2rem',
+              marginTop: '5rem',
               gridTemplateColumns: ['1fr', '1fr 1fr', null, '1fr 1fr 1fr 1fr'],
               gap: '3rem',
               '& li': {
@@ -324,9 +332,11 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            <Link href="/docs/guides/relationships">
-              <a>Relationships guide →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/guides/relationships">
+                <a>Relationships guide →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image

diff --git a/docs/pages/for-developers.tsx b/docs/pages/for-developers.tsx
@@ -167,9 +167,11 @@ export default function ForDevelopers() {
               doesn’t limit what you can put in an API. It’s flexible by design: tell Keystone what
               you want in your schema and get the matching APIs you need in return.
             </Type>
-            <Link href="/docs/apis/schema">
-              <a>Schema API reference →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/apis/schema">
+                <a>Schema API reference →</a>
+              </Link>
+            </Type>
           </div>
           <TweetBox user="jvredbrown" img="/assets/jvredbrown.jpg" grad="grad3">
             Working with @KeystoneJS is such a pleasant experience. After hand rolling a few GraphQL
@@ -188,9 +190,11 @@ export default function ForDevelopers() {
               configurable CMS built in. Program with JavaScript, store changes in version control,
               and integrate with your preferred CI tools.
             </Type>
-            <Link href="/for-content-management">
-              <a>Keystone for content management →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/for-content-management">
+                <a>Keystone for content management →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -247,9 +251,11 @@ export default function ForDevelopers() {
                 </Type>
               </li>
             </ul>
-            <Link href="/docs/guides/document-field-demo">
-              <a>Try the demo →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/docs/guides/document-field-demo">
+                <a>Try the demo →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -293,9 +299,11 @@ export default function ForDevelopers() {
                 Build your own roles-based access controls. No limits on the amount and kind of
                 roles you can configure.
               </Type>
-              <Link href="/docs/apis/access-control">
-                <a>Access control API →</a>
-              </Link>
+              <Type as="p" look="body18">
+                <Link href="/docs/apis/access-control">
+                  <a>Access control API →</a>
+                </Link>
+              </Type>
             </li>
             <li>
               <Relational grad="grad3" />
@@ -305,9 +313,11 @@ export default function ForDevelopers() {
               <Type as="p" look="body18" color="var(--muted)" margin="1rem 0">
                 One to one. One to many. Many to many. Self-referential. It's all there.
               </Type>
-              <Link href="/docs/guides/relationships">
-                <a>Relationships guide →</a>
-              </Link>
+              <Type as="p" look="body18">
+                <Link href="/docs/guides/relationships">
+                  <a>Relationships guide →</a>
+                </Link>
+              </Type>
             </li>
             <li>
               <Cli grad="grad3" />
@@ -318,9 +328,11 @@ export default function ForDevelopers() {
                 Kick start new projects and try examples on for size from the comfort of your
                 terminal.
               </Type>
-              <Link href="/docs/guides/cli">
-                <a>CLI guide →</a>
-              </Link>
+              <Type as="p" look="body18">
+                <Link href="/docs/guides/cli">
+                  <a>CLI guide →</a>
+                </Link>
+              </Type>
             </li>
             <li>
               <Typescript grad="grad3" />

diff --git a/docs/pages/for-organisations.tsx b/docs/pages/for-organisations.tsx
@@ -109,12 +109,16 @@ export default function ForOrganisations() {
                 </Type>
               </li>
             </ul>
-            <Link href="/for-developers" passHref>
-              <a css={{ display: 'block', margin: '1rem 0' }}>Keystone for developers →</a>
-            </Link>
-            <Link href="/for-content-management">
-              <a>Keystone for content management →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/for-developers" passHref>
+                <a>Keystone for developers →</a>
+              </Link>
+            </Type>
+            <Type as="p" look="body18">
+              <Link href="/for-content-management">
+                <a>Keystone for content management →</a>
+              </Link>
+            </Type>
           </div>
           <div>
             <Image
@@ -154,9 +158,11 @@ export default function ForOrganisations() {
               don’t need a separate back-end for every site and app you run. Manage your message
               from a single source of truth and expose it to any frontend application.
             </Type>
-            <Link href="/why-keystone#solutions">
-              <a>See all solutions →</a>
-            </Link>
+            <Type as="p" look="body18">
+              <Link href="/why-keystone#solutions">
+                <a>See all solutions →</a>
+              </Link>
+            </Type>
           </div>
           <TweetBox user="jvredbrown" img="/assets/jvredbrown.jpg" grad="grad4">
             Working with @KeystoneJS is such a pleasant experience. After hand rolling a few GraphQL
@@ -210,6 +216,7 @@ export default function ForOrganisations() {
           <Type
             as="p"
             look="body20"
+            color="var(--muted)"
             css={{
               display: 'block',
               maxWidth: '40rem',