Add global colors to docs

.storybook/preview.tsx

@@ -6,6 +6,9 @@ import '../dist/storybook/css/main.css';
 
 const preview: Preview = {
 	parameters: {
+		storySort: {
+			order: ['Global', 'Atoms', 'Molecules', 'Organisms'],
+		},
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,

package.json

@@ -2,7 +2,7 @@
   "name": "frontend-boilerplate",
   "version": "0.0.1",
   "scripts": {
-    "build:css": "./node_modules/.bin/postcss src/styles/main.scss -o dist/css/main.css --verbose",
+    "build:css": "./node_modules/.bin/postcss src/styles/main.scss -o dist/storybook/css/main.css --verbose",
     "copy:assets": "cp -Rf ./src/assets/* ./dist/assets/",
     "watch:css": "chokidar 'src/styles/**/*.scss' --command 'npm run build:css'",
     "storybook": "npm run build-storybook && storybook dev -p 6006",

src/stories/global/colors/colors.mdx

@@ -0,0 +1,22 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Global/Colors" />
+
+<ColorPalette>
+  <ColorItem
+    title="Neutral"
+    subtitle="--color-neutral"
+    colors={{ 
+        '000': '#fff',
+        '100': '#f2f2f2',
+        '200': '#d2d2d2',
+        '300': '#b4b4b4',
+        '400': '#969696',
+        '500': '#787878',
+        '600': '#5a5a5a',
+        '700': '#3c3c3c',
+        '800': '#1e1e1e',
+        '900': '#000',        
+    }}
+  />
+</ColorPalette>

src/styles/atoms/_container.scss

@@ -15,7 +15,7 @@
 	.container {
 		--container-gap: clamp(var(--spacing-4), 6vw, var(--spacing-8));
 		--container-max-width: minmax(var(--container-gap), 1fr);
-		--content-max-width: min(120ch, 100% - var(--container-gap) * 2);
+		--content-max-width: min(140ch, 100% - var(--container-gap) * 2);
 		--breakout: minmax(0, var(--spacing-9));
 
 		display: grid;