From 727993ee8cff61c49979f058638767eba71be8a8 Mon Sep 17 00:00:00 2001 From: eliot-akira Date: Fri, 27 Sep 2024 14:52:55 +0200 Subject: [PATCH] Start Atoms page; Improving Colors page --- docs/lib/colors.module.scss | 20 +++- docs/pages/atoms.mdx | 209 ++++++++++++++++++++++++++++++++++++ docs/pages/colors.mdx | 2 +- docs/pages/index.md | 4 +- global.scss | 4 + readme.md | 6 +- reset.scss | 5 + variables.scss | 2 +- 8 files changed, 242 insertions(+), 10 deletions(-) create mode 100644 docs/pages/atoms.mdx diff --git a/docs/lib/colors.module.scss b/docs/lib/colors.module.scss index 2e398db..68aee94 100644 --- a/docs/lib/colors.module.scss +++ b/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; } \ No newline at end of file diff --git a/docs/pages/atoms.mdx b/docs/pages/atoms.mdx new file mode 100644 index 0000000..20835b3 --- /dev/null +++ b/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 + + diff --git a/docs/pages/colors.mdx b/docs/pages/colors.mdx index 6102d1b..c3723cb 100644 --- a/docs/pages/colors.mdx +++ b/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. diff --git a/docs/pages/index.md b/docs/pages/index.md index 35d61de..fcd9efc 100644 --- a/docs/pages/index.md +++ b/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 diff --git a/global.scss b/global.scss index bbd72e7..f64c7ee 100644 --- a/global.scss +++ b/global.scss @@ -9,4 +9,8 @@ html { @extend %reset; } +body { + @extend %body; +} + @import "index"; diff --git a/readme.md b/readme.md index 0e21e4f..8916582 100644 --- a/readme.md +++ b/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 diff --git a/reset.scss b/reset.scss index cee409a..71bfa5f 100644 --- a/reset.scss +++ b/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)); diff --git a/variables.scss b/variables.scss index dbddba5..2f62370 100644 --- a/variables.scss +++ b/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;