Skip to content

Commit

Permalink
docs: remove references to along themed demo
Browse files Browse the repository at this point in the history
  • Loading branch information
booc0mtaco committed Jul 21, 2023
1 parent 1e1a03f commit 0fa20a2
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 4 deletions.
6 changes: 4 additions & 2 deletions .storybook/components/Docs/Guidelines/Theming.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@

# Theming overview

"Theming", in the context of EDS, is the process of overriding the default styles of EDS components to match a different brand (or "theme"). The "Theming" directory in storybook demonstrates two examples of theming — a [wireframe theme](./?path=/story/pages-theming-wireframedemo--default) (an unbranded theme that can be used for prototyping a product before it has an official visual style) and an [along theme](./?path=/story/pages-theming-alongdemo--default) that replicates the visual style of the [Along product](https://app.along.org/).
"Theming", in the context of EDS, is the process of overriding the default styles of EDS components to match a different brand (or "theme"). The "Theming" directory in storybook demonstrates examples of theming:

- A [wireframe theme](./?path=/story/pages-theming-wireframedemo--default) (an unbranded theme that can be used for prototyping a product before it has an official visual style).

## How to apply a theme in another product

In EDS, theming is implemented by overriding the values of the CSS variables representing tokens, which the EDS components use in their styles. This should update the style of the components to match the branding of a different product with minimum manual CSS styling overrides. (Some manual styling overrides will be necessary though because we don't have tokens for every little detail. In those cases, we could create a new token to make those overrides easier if it looks like something that could very well be useful for other products as well.)

These CSS variables overrides lives in the products using EDS components. This allows product teams to quickly iterate on their theme without making changes to EDS itself.

You can find the full list of CSS variables in [src/tokens-dist/css/variables.css](https://github.com/chanzuckerberg/edu-design-system/blob/main/src/tokens-dist/css/variables.css), and you can see examples of overriding them in [.storybook/pages/WireframeDemo/GlobalStyles.module.css](https://github.com/chanzuckerberg/edu-design-system/blob/main/.storybook/pages/WireframeDemo/GlobalStyles.module.css) and [.storybook/pages/AlongDemo/GlobalStyles.module.css](https://github.com/chanzuckerberg/edu-design-system/blob/main/.storybook/pages/AlongDemo/GlobalStyles.module.css).
You can find the full list of CSS variables in [src/tokens-dist/css/variables.css](https://github.com/chanzuckerberg/edu-design-system/blob/main/src/tokens-dist/css/variables.css), and you can see examples of overriding them in [.storybook/pages/WireframeDemo/GlobalStyles.module.css](https://github.com/chanzuckerberg/edu-design-system/blob/main/.storybook/pages/WireframeDemo/GlobalStyles.module.css).

If you're looking to set up a prototype using the [wireframe theme](./?path=/story/pages-theming-wireframedemo--default), you can copy and paste the variables defined in [.storybook/pages/WireframeDemo/GlobalStyles.module.css](https://github.com/chanzuckerberg/edu-design-system/blob/main/.storybook/pages/WireframeDemo/GlobalStyles.module.css). (The placeholder images will need to be added separately.)

Expand Down
4 changes: 2 additions & 2 deletions .storybook/pages/WireframeDemo/WireframeDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const LoggedOutPage = ({ onLogin }: { onLogin: () => void }) => (
src={PlaceholderImage}
/>
<div className="flex flex-col items-center gap-6">
<Heading size="h1">along</Heading>
<Heading size="h1">Application</Heading>
<Heading size="h2">Sign in</Heading>
<Text>Remember to use your school email to sign in:</Text>
</div>
Expand Down Expand Up @@ -392,7 +392,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
* See the [theming documentation](./?path=/docs/documentation-theming--theming) for more information on the purpose of this demo.
*
* Just for the purpose of demonstration, we're using the logged out homepage and
* the teacher watch page in the Along app.
* the teacher watch page in an example app.
*/
export const WireframeDemo = () => {
const [currentPage, setCurrentPage] = useState<'loggedOut' | 'watch'>(
Expand Down

0 comments on commit 0fa20a2

Please sign in to comment.