diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 618d7c0c2..054d337d5 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -236,4 +236,22 @@
  • Color
  • +
  • + Typography +
  • +
  • + Spacing +
  • +
  • + Borders +
  • +
  • + Corners +
  • +
  • + Shadows +
  • +
  • + Extras +
  • \ No newline at end of file diff --git a/docs/docs/theming/borders.md b/docs/docs/theming/borders.md new file mode 100644 index 000000000..85792e9fe --- /dev/null +++ b/docs/docs/theming/borders.md @@ -0,0 +1,7 @@ +--- +title: Borders +description: Configure border styles across your theme with Web Awesome's border properties. +layout: page.njk +--- + +coming soon! \ No newline at end of file diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index b84455df6..6384bd302 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -1,6 +1,6 @@ --- title: Color -description: Ensure consistent color usage with readable contrast with color properties. +description: Ensure consistent use of color and readable contrast with Web Awesome's color properties. layout: page.njk --- @@ -530,7 +530,7 @@ Overlays provide a backdrop to isolate content, often allowing background contex ### Shadow -Shadows indicate elevation. `--wa-color-shadow` is used in your theme's constructed shadow properties. +Shadows indicate elevation. `--wa-color-shadow` is used to construct your theme's [shadow properties](/docs/theming/shadows). | Custom Property | Preview | | ----------------------------- | ------------------------------- | @@ -540,7 +540,7 @@ Shadows indicate elevation. `--wa-color-shadow` is used in your theme's construc #### Focus -Web Awesome uses a single, consistent focus color for predictable keyboard navigation. This is used alongside your focus custom properties to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible. +Web Awesome uses a single, consistent focus color for predictable keyboard navigation. This is used alongside your [focus properties](/docs/theming/extras) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible. | Custom Property | Preview | | ----------------------------- | ------------------------------- | diff --git a/docs/docs/theming/corners.md b/docs/docs/theming/corners.md new file mode 100644 index 000000000..fb1c68290 --- /dev/null +++ b/docs/docs/theming/corners.md @@ -0,0 +1,7 @@ +--- +title: Corners +description: Sharpen or soften the appearance of your components with Web Awesome's corner properties. +layout: page.njk +--- + +coming soon! \ No newline at end of file diff --git a/docs/docs/theming/extras.md b/docs/docs/theming/extras.md new file mode 100644 index 000000000..24c7295c3 --- /dev/null +++ b/docs/docs/theming/extras.md @@ -0,0 +1,11 @@ +--- +title: Extras +description: The bonus Web Awesome properties you need to customize every nook and cranny. +layout: page.njk +--- + +## Focus + +## Links + +## Z-index \ No newline at end of file diff --git a/docs/docs/theming/shadows.md b/docs/docs/theming/shadows.md new file mode 100644 index 000000000..602193b3c --- /dev/null +++ b/docs/docs/theming/shadows.md @@ -0,0 +1,7 @@ +--- +title: Shadows +description: Elevate your components with Web Awesome's shadow properties. +layout: page.njk +--- + +coming soon! \ No newline at end of file diff --git a/docs/docs/theming/spacing.md b/docs/docs/theming/spacing.md new file mode 100644 index 000000000..35434dcb4 --- /dev/null +++ b/docs/docs/theming/spacing.md @@ -0,0 +1,7 @@ +--- +title: Spacing +description: Lock down consistent spacing Web Awesome's space properties. +layout: page.njk +--- + +coming soon! \ No newline at end of file diff --git a/docs/docs/theming/typography.md b/docs/docs/theming/typography.md new file mode 100644 index 000000000..d8510369e --- /dev/null +++ b/docs/docs/theming/typography.md @@ -0,0 +1,7 @@ +--- +title: Typography +description: Get consistent font styles and vertical rhythm with Web Awesome's typography properties. +layout: page.njk +--- + +coming soon! \ No newline at end of file