Merge pull request #698 from Atom-Learning/feat/new-brand-theme

Feature: New Atom brand
Atom-Learning · Oct 4, 2024 · c712e97 · c712e97
2 parents ac0d278 + d08483a
commit c712e97
Show file tree

Hide file tree

Showing 152 changed files with 4,730 additions and 4,663 deletions.
diff --git a/documentation/components/app/Header.tsx b/documentation/components/app/Header.tsx
@@ -8,7 +8,8 @@ import {
   Flex,
   Drawer
 } from '@atom-learning/components'
-import logo from '@atom-learning/theme/lib/assets/atom/logo.svg'
+import logoAtom from '@atom-learning/theme/lib/assets/logos/atom/atom-learning-logotype-primary.svg'
+import logoQuest from '@atom-learning/theme/lib/assets/logos/quest/logo.svg'
 import * as React from 'react'
 
 import buildConstants from '~/lib/build/constants.json'
@@ -17,24 +18,32 @@ import { Navigation } from '~/components/app'
 import { Hamburger } from '@atom-learning/icons'
 import { useTheme } from '~/utilities/hooks/useTheme'
 
-const NavigationHeader = () => (
-  <SideBar.Brand href="/">
-    <SideBar.BrandLogo src={logo.src} css={{ width: 80 }} />
-    <Badge
-      theme="neutral"
-      size="xs"
-      css={{ position: 'absolute', right: '$3', top: '$4' }}
-    >
-      {buildConstants['version']}
-    </Badge>
-  </SideBar.Brand>
-)
+const NavigationHeader = () => {
+  const { theme } = useTheme()
+  return (
+    <SideBar.Brand href="/">
+      {theme === 'atom' && (
+        <SideBar.BrandLogo src={logoAtom.src} css={{ width: 140 }} />
+      )}
+      {theme === 'quest' && (
+        <SideBar.BrandLogo src={logoQuest.src} css={{ width: 120 }} />
+      )}
+      <Badge
+        theme="neutral"
+        size="xs"
+        css={{ position: 'absolute', right: '$3', top: '$4' }}
+      >
+        {buildConstants['version']}
+      </Badge>
+    </SideBar.Brand>
+  )
+}
 
 const BrandSwitch = () => {
   const { theme, updateTheme } = useTheme()
   return (
     <Flex gap="3" align="center" justify="center">
-      <Text size="sm" css={{ fontWeight: '600' }}>
+      <Text size="sm" weight="bold">
         Brand
       </Text>
       <ToggleGroup.Root

diff --git a/documentation/components/markdown/editor-component/CodeBlock.tsx b/documentation/components/markdown/editor-component/CodeBlock.tsx
@@ -33,7 +33,7 @@ const StyledLivePreview = styled(LivePreview, {
   flexWrap: 'wrap',
   justifyContent: 'center',
   overflow: 'visible',
-  my: '$5',
+  my: '$7 !important',
   whiteSpace: 'initial'
 })
 const StyledLiveEditor = styled(LiveEditor)

diff --git a/documentation/components/markdown/editor-component/ColorTokenList.tsx b/documentation/components/markdown/editor-component/ColorTokenList.tsx
@@ -15,7 +15,7 @@ const ColorExample: typeof TokenList.Item = ({ token, value, ...rest }) => {
     <Flex align="center" {...rest}>
       <Box css={{ borderRadius: '$round', bg: `$${token}`, size: '$6' }} />
       <Flex direction="column" css={{ pl: '$3' }}>
-        <Text css={{ fontWeight: 600, mb: '$3' }}>{`$${token}`}</Text>
+        <Text weight="bold" css={{ mb: '$3' }}>{`$${token}`}</Text>
         <Text size="sm" css={{ color: '$base8', mb: !hasAlpha ? '$3' : 0 }}>
           {value}
         </Text>

diff --git a/documentation/components/markdown/editor-component/ComponentProps.tsx b/documentation/components/markdown/editor-component/ComponentProps.tsx
@@ -106,7 +106,7 @@ export const ComponentProps: React.FC<{ component }> = ({ component }) => {
 
   return (
     <Box as="figure" css={{ width: '100%', p: 0, m: 0 }}>
-      <Text as="figcaption" size="xs" css={{ mb: '$2', fontWeight: 'bold' }}>
+      <Text weight="bold" as="figcaption" size="xs" css={{ mb: '$2' }}>
         {component}
       </Text>
       <Box css={{ width: '100%', overflow: 'auto' }}>

diff --git a/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx b/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx
@@ -2,13 +2,7 @@ import { Flex, Box, styled, Text } from '@atom-learning/components'
 import * as React from 'react'
 
 const TokenListItemToken = ({ token }: { token: string }) => (
-  <Text
-    size="md"
-    css={{
-      color: '$base10',
-      fontWeight: 600
-    }}
-  >
+  <Text size="md" weight="bold" css={{ color: '$base10' }}>
     {`$${token}`}
   </Text>
 )

diff --git a/documentation/components/markdown/index.tsx b/documentation/components/markdown/index.tsx
@@ -26,9 +26,7 @@ import { DosAndDonts } from './editor-component/DosAndDonts'
 import { Cards } from './editor-component/Cards'
 
 export const components = {
-  h2: (props) => (
-    <Heading {...props} size="md" as="h2" css={{ fontWeight: 600 }} />
-  ),
+  h2: (props) => <Heading {...props} as="h2" size="sm" />,
   h3: (props) => <Heading {...props} as="h3" size="sm" />,
   h4: (props) => <Heading {...props} as="h4" size="xs" />,
   h5: (props) => <Heading {...props} as="h5" size="xs" />,

diff --git a/documentation/components/page/Layout.tsx b/documentation/components/page/Layout.tsx
@@ -44,7 +44,7 @@ export const Layout: React.FC<TDynamicPage> = (props) => {
       >
         <Header>
           <StackContent>
-            <Heading as="h1" size="lg">
+            <Heading as="h1" size="xl">
               {removeStartingNumber(title)}
             </Heading>
             <Links {...links} />

diff --git a/documentation/content/components.badge.md b/documentation/content/components.badge.md
@@ -37,7 +37,7 @@ tabs:
       The following semantic themes are available: `success`, `warning`, `danger`, `neutral`, `info`.
 
 
-      The following non-semantic themes are available `grey`, `blue`, `purple`, `cyan`,  `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`.
+      The following non-semantic themes are available `grey`, `blue`, `pink`, `purple`, `cyan`,  `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`.
 
 
       If no theme is passed in. The badge theme defaults to "info".
@@ -55,6 +55,7 @@ tabs:
         <Flex gap="3">
           <Badge theme="grey">Grey</Badge>
           <Badge theme="blue">Blue</Badge>
+          <Badge theme="pink">Pink</Badge>
           <Badge theme="purple">Purple</Badge>
           <Badge theme="cyan">Cyan</Badge>
           <Badge theme="green">Green</Badge>
@@ -77,6 +78,7 @@ tabs:
         <Flex gap="3">
           <Badge theme="grey" emphasis="bold">Grey</Badge>
           <Badge theme="blue" emphasis="bold">Blue</Badge>
+          <Badge theme="pink" emphasis="bold">Pink</Badge>
           <Badge theme="purple" emphasis="bold">Purple</Badge>
           <Badge theme="cyan" emphasis="bold">Cyan</Badge>
           <Badge theme="green" emphasis="bold">Green</Badge>

diff --git a/documentation/content/components.box.md b/documentation/content/components.box.md
@@ -28,7 +28,7 @@ tabs:
       <CodeBlock live={true} preview={true} code={`<Box
         as="article"
         css={{
-          border: '1px solid $tonal100',
+          border: '1px solid $grey200',
           borderRadius: '$1',
           overflow: 'hidden',
           width: '320px'

diff --git a/documentation/content/components.heading.md b/documentation/content/components.heading.md
@@ -14,7 +14,7 @@ tabs:
       `Heading`’s `as` prop defaults to `h2` but also accepts `h1`, `h3`, `h4`, `h5`, `h6`. Follow [semantic HTML guidelines](https://webaim.org/techniques/semanticstructure/) when deciding which element to use. Also note that the size of a heading is controlled separately to which element is used. The sizes available are: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`.
 
 
-      <CodeBlock live={true} preview={true} code={`<Heading as="h2" size="xs">This is a heading</Heading>`} language={"tsx"} />
+      <CodeBlock live={true} preview={true} code={`<Heading as="h2" size="lg">This is a heading</Heading>`} language={"tsx"} />
 
 
       ## API Reference

diff --git a/documentation/content/components.overview.styling.md b/documentation/content/components.overview.styling.md
@@ -58,7 +58,7 @@ tabs:
 
       <Text
         css={{
-          color: '$tonal300',
+          color: '$grey700',
           '@md': { color: '$primary800' },
           '@lg': { color: '$primary1000' }
         }}

diff --git a/documentation/content/components.radio-card.md b/documentation/content/components.radio-card.md
@@ -16,19 +16,19 @@ tabs:
       <CodeBlock live={true} preview={true} code={`<RadioCardGroup>
         <RadioCard value="1">
           <Text css={{ mb: '$2' }}>This is a radio card option</Text>
-          <Text size="sm" css={{ color: '$tonal300' }}>
+          <Text size="sm" css={{ color: '$grey700' }}>
             With some additional text
           </Text>
         </RadioCard>
         <RadioCard value="2">
           <Text css={{ mb: '$2' }}>This is another radio card option</Text>
-          <Text size="sm" css={{ color: '$tonal300' }}>
+          <Text size="sm" css={{ color: '$grey700' }}>
             With some additional text
           </Text>
         </RadioCard>
         <RadioCard value="3">
           <Text css={{ mb: '$2' }}>And a further radio card option</Text>
-          <Text size="sm" css={{ color: '$tonal300' }}>
+          <Text size="sm" css={{ color: '$grey700' }}>
             With some additional text
           </Text>
         </RadioCard>

diff --git a/documentation/content/components.slider.md b/documentation/content/components.slider.md
@@ -125,7 +125,7 @@ tabs:
       Depending on the background of your page, you can change the theme of the track to be either light or tonal using `theme="light"`. Default is `theme="tonal"`.
 
 
-      <CodeBlock live={true} preview={true} code={`<Box css={{ p: '$5', bg: '$tonal100' }}>
+      <CodeBlock live={true} preview={true} code={`<Box css={{ p: '$5', bg: '$grey200' }}>
         <Slider theme="light" defaultValue={[50]} css={{ width: '320px' }} />
       </Box>`} language={"tsx"} />
 

diff --git a/documentation/content/components.tabs.md b/documentation/content/components.tabs.md
@@ -202,9 +202,9 @@ tabs:
 
       | Active tab bottom line      | $primary800  | \#0F67F5 |
 
-      | Not active tab font-color   | $tonal500    | \#333333 |
+      | Not active tab font-color   | $grey900    | \#333333 |
 
-      | Not active tabs bottom line | $tonal100    | \#EEEEEE |
+      | Not active tabs bottom line | $grey200    | \#EEEEEE |
 
 
 

diff --git a/documentation/content/components.textarea-field.md b/documentation/content/components.textarea-field.md
@@ -97,13 +97,13 @@ tabs:
 
       | Bg color               | $white    | \#ffffff |
 
-      | Border-color           | $tonal400 | \#545454 |
+      | Border-color           | $grey800 | \#545454 |
 
-      | Label font-color       | $tonal500 | \#333333 |
+      | Label font-color       | $grey900 | \#333333 |
 
-      | Description font-color | $tonal300 | \#757575 |
+      | Description font-color | $grey700 | \#757575 |
 
-      | Text font-color        | $tonal600 | \#1F1F1F |
+      | Text font-color        | $grey1000 | \#1F1F1F |
 
 
       ![textarea placeholder variant](/assets/images/textarea-variant-2.svg "textarea placeholder variant")
@@ -118,13 +118,13 @@ tabs:
 
       | Bg color               | $white    | \#ffffff |
 
-      | Border-color           | $tonal400 | \#545454 |
+      | Border-color           | $grey800 | \#545454 |
 
-      | Label font-color       | $tonal500 | \#333333 |
+      | Label font-color       | $grey900 | \#333333 |
 
-      | Description font-color | $tonal300 | \#757575 |
+      | Description font-color | $grey700 | \#757575 |
 
-      | Placeholder font-color | $tonal300 | \#757575 |
+      | Placeholder font-color | $grey700 | \#757575 |
 
 
       ![textarea focus variant](/assets/images/textarea-variant-3.svg "textarea focus variant")
@@ -140,9 +140,9 @@ tabs:
 
       | Border-color     | $primary800  | \#0F67F5 |
 
-      | Label font-color | $tonal500    | \#333333 |
+      | Label font-color | $grey900    | \#333333 |
 
-      | Text font-color  | $tonal600    | \#1F1F1F |
+      | Text font-color  | $grey1000    | \#1F1F1F |
 
 
       ![textarea disabled variant](/assets/images/textarea-variant-4.svg "textarea disabled variant")
@@ -154,13 +154,13 @@ tabs:
 
       | ---------------- | --------- | -------- |
 
-      | Bg color         | $tonal100 | \#EEEEEE |
+      | Bg color         | $grey200 | \#EEEEEE |
 
-      | Border-color     | $tonal400 | \#545454 |
+      | Border-color     | $grey800 | \#545454 |
 
-      | Label font-color | $tonal500 | \#333333 |
+      | Label font-color | $grey900 | \#333333 |
 
-      | Text font-color  | $tonal600 | \#1F1F1F |
+      | Text font-color  | $grey1000 | \#1F1F1F |
 
 
       ![textarea error variant](/assets/images/textarea-variant-5.svg "textarea error variant")
@@ -172,11 +172,11 @@ tabs:
 
       | ------------------------ | --------- | -------- |
 
-      | Bg color                 | $tonal100 | \#EEEEEE |
+      | Bg color                 | $grey200 | \#EEEEEE |
 
       | Border-color             | $danger   | \#EE0505 |
 
-      | Label font-color         | $tonal500 | \#333333 |
+      | Label font-color         | $grey900 | \#333333 |
 
       | Text font-color          | $danger   | \#EE0505 |
 

diff --git a/documentation/content/components.textarea.md b/documentation/content/components.textarea.md
@@ -87,13 +87,13 @@ tabs:
 
       | Bg color               | $white    | \#ffffff |
 
-      | Border-color           | $tonal400 | \#545454 |
+      | Border-color           | $grey800 | \#545454 |
 
-      | Label font-color       | $tonal500 | \#333333 |
+      | Label font-color       | $grey900 | \#333333 |
 
-      | Description font-color | $tonal300 | \#757575 |
+      | Description font-color | $grey700 | \#757575 |
 
-      | Text font-color        | $tonal600 | \#1F1F1F |
+      | Text font-color        | $grey1000 | \#1F1F1F |
 
 
       ![textarea placeholder variant](/assets/images/textarea-variant-2.svg "textarea placeholder variant")
@@ -108,13 +108,13 @@ tabs:
 
       | Bg color               | $white    | \#ffffff |
 
-      | Border-color           | $tonal400 | \#545454 |
+      | Border-color           | $grey800 | \#545454 |
 
-      | Label font-color       | $tonal500 | \#333333 |
+      | Label font-color       | $grey900 | \#333333 |
 
-      | Description font-color | $tonal300 | \#757575 |
+      | Description font-color | $grey700 | \#757575 |
 
-      | Placeholder font-color | $tonal300 | \#757575 |
+      | Placeholder font-color | $grey700 | \#757575 |
 
 
       ![textarea focus variant](/assets/images/textarea-variant-3.svg "textarea focus variant")
@@ -130,9 +130,9 @@ tabs:
 
       | Border-color     | $primary800  | \#0F67F5 |
 
-      | Label font-color | $tonal500    | \#333333 |
+      | Label font-color | $grey900    | \#333333 |
 
-      | Text font-color  | $tonal600    | \#1F1F1F |
+      | Text font-color  | $grey1000    | \#1F1F1F |
 
 
       ![textarea disabled variant](/assets/images/textarea-variant-4.svg "textarea disabled variant")
@@ -144,13 +144,13 @@ tabs:
 
       | ---------------- | --------- | -------- |
 
-      | Bg color         | $tonal100 | \#EEEEEE |
+      | Bg color         | $grey200 | \#EEEEEE |
 
-      | Border-color     | $tonal400 | \#545454 |
+      | Border-color     | $grey800 | \#545454 |
 
-      | Label font-color | $tonal500 | \#333333 |
+      | Label font-color | $grey900 | \#333333 |
 
-      | Text font-color  | $tonal600 | \#1F1F1F |
+      | Text font-color  | $grey1000 | \#1F1F1F |
 
 
       ![textarea error variant](/assets/images/textarea-variant-5.svg "textarea error variant")
@@ -162,11 +162,11 @@ tabs:
 
       | ------------------------ | --------- | -------- |
 
-      | Bg color                 | $tonal100 | \#EEEEEE |
+      | Bg color                 | $grey200 | \#EEEEEE |
 
       | Border-color             | $danger   | \#EE0505 |
 
-      | Label font-color         | $tonal500 | \#333333 |
+      | Label font-color         | $grey900 | \#333333 |
 
       | Text font-color          | $danger   | \#EE0505 |