Use our own names for the ITCSS layers

betterplace · Oct 5, 2022 · 4a57eed · 4a57eed
1 parent 0565b32
commit 4a57eed
Show file tree

Hide file tree

Showing 10 changed files with 11 additions and 22 deletions.
diff --git 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
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title="Design Tokens (Settings)/Breakpoints" />
+<Meta title="Tokens/Breakpoints" />
 
 # Breakpoints
 

diff --git 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<typeof ColorSwatch>
 
 type ColorSwatchProps = {

diff --git 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'
 
-<Meta title="Design Tokens (Settings)/Grid" />
+<Meta title="Tokens/Grid" />
 
 # Grid
 

diff --git 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'
 
-<Meta title="Design Tokens (Settings)/Introduction" />
+<Meta title="Tokens/Introduction" />
 
 # Introduction
 

diff --git 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'
 
-<Meta title="Design Tokens (Settings)/Spacing" />
+<Meta title="Tokens/Spacing" />
 
 # Spacing
 

diff --git 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'
 
-<Meta title="Design Tokens (Settings)/Typography" />
+<Meta title="Tokens/Typography" />
 
 # Typography
 

diff --git 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'
 
-<Meta title="Design Tokens (Settings)/UI" />
+<Meta title="Tokens/UI" />
 
 # UI (🚧 Find a better name)
 

diff --git 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