Start Atoms page; Improving Colors page

docs/lib/colors.module.scss

@@ -1,8 +1,19 @@
 @import "../../functions.scss";
 @import "../../variables.scss";
 
+$card-radius: .5rem;
+
 .card {
   padding: .5rem 1rem;
+  max-width: 22rem;
+  &:first-child {
+    border-top-left-radius: $card-radius;
+    border-top-right-radius: $card-radius;
+  }
+  &:last-child {
+    border-bottom-left-radius: $card-radius;
+    border-bottom-right-radius: $card-radius;
+  }
 }
 
 .allColors {
@@ -26,16 +37,21 @@
   }
 
   section {
-    margin-bottom: 1rem;
+    display: inline-block;
+    margin: .25rem;
     padding-bottom: 1rem;
     // &:not(:last-child) {
     //   border-bottom: 1px solid $gray-600;
     // }
   }
+
+  h2 {
+    font-size: 1rem;;
+  }
 }
 
 .colorList {
   overflow: hidden;
-  border-radius: .5rem;
+  // border-radius: .5rem;
   text-align: left;
 }

docs/pages/atoms.mdx

@@ -0,0 +1,209 @@
+---
+sidebar_position: 2
+---
+# Atoms
+
+## Layout
+
+- Aspect Ratio
+- Container
+- Columns
+- Break After
+- Break Before
+- Break Inside
+- Box Decoration Break
+- Box Sizing
+- Display
+- Floats
+- Clear
+- Isolation
+- Object Fit
+- Object Position
+- Overflow
+- Overscroll Behavior
+- Position
+- Top / Right / Bottom / Left
+- Visibility
+- Z-Index
+
+
+## Flexbox & Grid
+
+- Flex Basis
+- Flex Direction
+- Flex Wrap
+- Flex
+- Flex Grow
+- Flex Shrink
+- Order
+- Grid Template Columns
+- Grid Column Start / End
+- Grid Template Rows
+- Grid Row Start / End
+- Grid Auto Flow
+- Grid Auto Columns
+- Grid Auto Rows
+- Gap
+- Justify Content
+- Justify Items
+- Justify Self
+- Align Content
+- Align Items
+- Align Self
+- Place Content
+- Place Items
+- Place Self
+
+
+## Spacing
+
+- Padding
+- Margin
+- Space Between
+
+
+## Sizing
+
+- Width
+- Min-Width
+- Max-Width
+- Height
+- Min-Height
+- Max-Height
+
+
+## Typography
+
+- Font Family
+- Font Size
+- Font Smoothing
+- Font Style
+- Font Weight
+- Font Variant Numeric
+- Letter Spacing
+- Line Height
+- List Style Type
+- List Style Position
+- Text Align
+- Text Color
+- Text Decoration
+- Text Decoration Color
+- Text Decoration Style
+- Text Decoration Thickness
+- Text Underline Offset
+- Text Transform
+- Text Overflow
+- Text Indent
+- Vertical Align
+- Whitespace
+- Word Break
+- Content
+
+
+## Backgrounds
+
+- Background Attachment
+- Background Clip
+- Background Color
+- Background Origin
+- Background Position
+- Background Repeat
+- Background Size
+- Background Image
+- Gradient Color Stops
+
+
+## Borders
+
+- Border Radius
+- Border Width
+- Border Color
+- Border Style
+- Divide Width
+- Divide Color
+- Divide Style
+- Outline Width
+- Outline Color
+- Outline Style
+- Outline Offset
+- Ring Width
+- Ring Color
+- Ring Offset Width
+- Ring Offset Color
+
+
+## Effects
+
+- Box Shadow
+- Box Shadow Color
+- Opacity
+- Mix Blend Mode
+- Background Blend Mode
+
+
+## Filters
+
+- Blur
+- Brightness
+- Contrast
+- Drop Shadow
+- Grayscale
+- Hue Rotate
+- Invert
+- Saturate
+- Sepia
+- Backdrop Blur
+- Backdrop Brightness
+- Backdrop Contrast
+- Backdrop Grayscale
+- Backdrop Hue Rotate
+- Backdrop Invert
+- Backdrop Opacity
+- Backdrop Saturate
+- Backdrop Sepia
+
+
+## Tables
+
+- Border Collapse
+- Border Spacing
+- Table Layout
+
+
+## Transitions & Animation
+
+- Transition Property
+- Transition Duration
+- Transition Timing Function
+- Transition Delay
+- Animation
+
+
+## Transforms
+
+- Scale
+- Rotate
+- Translate
+- Skew
+- Transform Origin
+
+
+## Interactivity
+
+- Accent Color
+- Appearance
+- Cursor
+- Caret Color
+- Pointer Events
+- Resize
+- Scroll Behavior
+- Scroll Margin
+- Scroll Padding
+- Scroll Snap Align
+- Scroll Snap Stop
+- Scroll Snap Type
+- Touch Action
+- User Select
+- Will Change
+
+

docs/pages/colors.mdx

@@ -6,6 +6,6 @@ import Colors from '@site/docs/lib/colors'
 
 Create a more flexible and extensible system of colors, with color groups, palettes, gradients, functions, favorites, themes.
 
-Here is the original set of colors from Bootstrap.
+Here is the original set of colors.
 
 <Colors/>

docs/pages/index.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Overview
 
-The Design library provides the building blocks for creating design systems. It's a toolbox of consistent design elements and user-interface components.
+The Design library provides building blocks for creating design systems. It's a toolbox of consistent design elements and user-interface components.
 
 It is a modular, embeddable, customizable library with **local styles and scripts**. Features can be loaded individually without affecting the global CSS styling. Suitable for use with WordPress plugins, frontend UI or admin screen, where there is already a global stylesheet. It can also be used as a full site theming solution when built with no CSS class prefix.
 
@@ -14,7 +14,7 @@ The entire design system can be represented in JSON format for use with JavaScri
 
 ## Atoms
 
-A design system is composed of a set of curated values, called atoms or design tokens.
+A design system is composed of a curated set of values, called atoms or design tokens.
 
 - Background
 - Borders

global.scss

@@ -9,4 +9,8 @@ html {
   @extend %reset;
 }
 
+body {
+  @extend %body;
+}
+
 @import "index";

readme.md

@@ -34,13 +34,11 @@ Start the Docusaurus script.
 npm run start
 ```
 
-It serves the `build` directory at http://localhost:3000/design. It also builds files (CSS/JS), then watches for changes to rebuild and reload the site.
-
-Press CTRL + C to stop.
+It serves the `build` directory at http://localhost:3000/design. It also builds files (CSS/JS), then watches for changes to rebuild and reload the site. Press CTRL + C to stop.
 
 ### Build for production
 
-Build and minify files
+Build and minify files for production.
 
 ```sh
 npm run build

reset.scss

@@ -18,6 +18,11 @@
 
 // scss-docs-start reboot-body-rules
 .#{$class-prefix}reset body, body.#{$class-prefix}reset {
+  @extend %body;
+}
+
+// Mixin to optionally apply to body with no class
+%body {
   margin: 0; // 1
   font-family: var(--#{$prefix}body-font-family);
   @include font-size(var(--#{$prefix}body-font-size));

variables.scss

@@ -625,7 +625,7 @@ $font-family-code:            var(--#{$prefix}font-monospace) !default;
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
 $font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-base:              1.1rem !default; // Assumes the browser default, typically `16px`
 $font-size-sm:                $font-size-base * .875 !default;
 $font-size-lg:                $font-size-base * 1.25 !default;