From 4a57eed5f8d727d2502bd3511df721f008bc9953 Mon Sep 17 00:00:00 2001 From: Katrin Fritz <9885028+katrinundfritz@users.noreply.github.com> Date: Wed, 5 Oct 2022 15:41:51 +0200 Subject: [PATCH] Use our own names for the ITCSS layers --- .storybook/order.json | 3 +-- src/stories/design_tokens/breakpoints.stories.mdx | 2 +- src/stories/design_tokens/colors.stories.tsx | 2 +- src/stories/design_tokens/grid.stories.mdx | 2 +- src/stories/design_tokens/introduction.stories.mdx | 2 +- src/stories/design_tokens/spacing.stories.mdx | 2 +- src/stories/design_tokens/typography.stories.mdx | 2 +- src/stories/design_tokens/ui.stories.mdx | 2 +- src/stories/guides/engineering_guide.stories.mdx | 6 +++--- src/stories/objects/introduction.stories.mdx | 10 ---------- 10 files changed, 11 insertions(+), 22 deletions(-) delete mode 100644 src/stories/objects/introduction.stories.mdx diff --git a/.storybook/order.json b/.storybook/order.json index df0aa0d7..6f439e72 100644 --- a/.storybook/order.json +++ b/.storybook/order.json @@ -3,10 +3,9 @@ ["About the Design System", "Design Principles", "Experience Values"], "Guides", ["Content Guide", "Accessibility Guide", "UX Design Guide", "Development Guide", "Testing Guide"], - "Design Tokens (Settings)", + "Tokens", ["Introduction", "Colors", "Typography", "Spacing", "Grid", "Breakpoints"], "Elements", - "Objects", "Components", "Hooks" ] diff --git a/src/stories/design_tokens/breakpoints.stories.mdx b/src/stories/design_tokens/breakpoints.stories.mdx index 37da7073..f513c18e 100644 --- a/src/stories/design_tokens/breakpoints.stories.mdx +++ b/src/stories/design_tokens/breakpoints.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Breakpoints diff --git a/src/stories/design_tokens/colors.stories.tsx b/src/stories/design_tokens/colors.stories.tsx index f3d526f5..ecdf70cf 100644 --- a/src/stories/design_tokens/colors.stories.tsx +++ b/src/stories/design_tokens/colors.stories.tsx @@ -3,7 +3,7 @@ import themeTokens from '../../../build/json/themes/org.json' import globalTokens from '../../../build/json/globals.json' export default { - title: 'Design Tokens (Settings)/Colors', + title: 'Tokens/Colors', } as ComponentMeta type ColorSwatchProps = { diff --git a/src/stories/design_tokens/grid.stories.mdx b/src/stories/design_tokens/grid.stories.mdx index 081e18d0..8460c094 100644 --- a/src/stories/design_tokens/grid.stories.mdx +++ b/src/stories/design_tokens/grid.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Grid diff --git a/src/stories/design_tokens/introduction.stories.mdx b/src/stories/design_tokens/introduction.stories.mdx index ab21bd7d..662366c6 100644 --- a/src/stories/design_tokens/introduction.stories.mdx +++ b/src/stories/design_tokens/introduction.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Introduction diff --git a/src/stories/design_tokens/spacing.stories.mdx b/src/stories/design_tokens/spacing.stories.mdx index 1b12c984..cf96bd3b 100644 --- a/src/stories/design_tokens/spacing.stories.mdx +++ b/src/stories/design_tokens/spacing.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Spacing diff --git a/src/stories/design_tokens/typography.stories.mdx b/src/stories/design_tokens/typography.stories.mdx index 80f60a31..ff01155d 100644 --- a/src/stories/design_tokens/typography.stories.mdx +++ b/src/stories/design_tokens/typography.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Typography diff --git a/src/stories/design_tokens/ui.stories.mdx b/src/stories/design_tokens/ui.stories.mdx index 7707756c..f627507f 100644 --- a/src/stories/design_tokens/ui.stories.mdx +++ b/src/stories/design_tokens/ui.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # UI (🚧 Find a better name) diff --git a/src/stories/guides/engineering_guide.stories.mdx b/src/stories/guides/engineering_guide.stories.mdx index 34824b03..b2380bb1 100644 --- a/src/stories/guides/engineering_guide.stories.mdx +++ b/src/stories/guides/engineering_guide.stories.mdx @@ -44,7 +44,7 @@ rules: [From general to specific](https://en.wikipedia.org/wiki/Hierarchy#Contai Here is, **in our own words**, and applied to our specific context, what each of these layers is about: -#### 1. Settings +#### 1. Settings (We call it Tokens.) In ITCSS _settings_ constitute the first layer. It’s the most general layer and the one with the widest reach. @@ -57,7 +57,7 @@ certain properties of the design. At _Salesforce_ they (a. k. a. CSS variables) and, if needed, as preprocessor variables. - For a reasonable implementation example of this layer see [Pollen](https://www.pollen.style/). -#### 2. Tools +#### 2. Tools (We call it Mixins.) - Globally used mix-ins and functions for CSS preprocessors. - Using PostCSS, these will probably be implemented as @apply blocks. @@ -78,7 +78,7 @@ It’s reserved for bare HTML elements. [the HTML elements reference at MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) (which is also the knowledge base [recommended by the W3C](https://www.w3.org/wiki/Open_Web_Platform#HTML_Elements)). -#### 5. Objects +#### 5. Objects (We call them Coponents. So we don't differentiate between Objects and Components.) - Common design patterns as described by [OOCSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/) - Normally represented by assigning a single classname. diff --git a/src/stories/objects/introduction.stories.mdx b/src/stories/objects/introduction.stories.mdx deleted file mode 100644 index 2fe5ae93..00000000 --- a/src/stories/objects/introduction.stories.mdx +++ /dev/null @@ -1,10 +0,0 @@ -import { Meta } from '@storybook/addon-docs' - - - -# Introduction - -🚧 **WIP!** Just a few ideas for inspiration: - -- [Every Layout](https://every-layout.dev/) -- [SmolCSS](https://smolcss.dev/)