Basic SCSS Variables (basic_scss)

JSON Schema

{
  "$id": "https://platen.io/modules/platen/config/site/theme/variables/basic_scss/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Simple variables that don't rely on anything else.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/",
  "properties": {
    "body-font-weight": {
      "default": "normal",
      "description": "Defines the base font weight for all body text.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#body-font-weight",
      "enum": [
        "normal",
        "100",
        "200",
        "300",
        "400",
        "500",
        "600",
        "700",
        "800",
        "900"
      ],
      "title": "Body Font Weight",
      "type": "string"
    },
    "body-min-width": {
      "default": "20rem",
      "description": "Defines the minimum width of the body container for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#body-min-width",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Minimum Body Width",
      "type": "string"
    },
    "container-max-width": {
      "default": "80rem",
      "description": "Defines the maximum width of containers for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#container-max-width",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Maximum Container Width",
      "type": "string"
    },
    "details-colors": {
      "description": "Defines colors for details elements.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#details-colors",
      "patternProperties": {
        ".": {
          "description": "Specify a valid color. For more info, see the MDN docs:\n\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/color_value\n",
          "title": "Color for a hint blockquote",
          "type": "string"
        }
      },
      "title": "Details Colors",
      "type": "object"
    },
    "font-size-base": {
      "default": "16px",
      "description": "Defines the base font size for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#font-size-base",
      "pattern": "^[0-9]+px$",
      "title": "Base Font Size",
      "type": "string"
    },
    "font-size-full": {
      "default": "1rem",
      "description": "Defines the full font size for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#font-size-full",
      "pattern": "^[0-9]+\\.?[0-9]*rem$",
      "title": "Full Font Size",
      "type": "string"
    },
    "font-size-medium": {
      "default": "0.875rem",
      "description": "Defines the medium font size for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#font-size-medium",
      "pattern": "^[0-9]+\\.?[0-9]*rem$",
      "title": "Medium Font Size",
      "type": "string"
    },
    "font-size-small": {
      "default": "0.75rem",
      "description": "Defines the small font size for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#font-size-small",
      "pattern": "^[0-9]+\\.?[0-9]*rem$",
      "title": "Small Font Size",
      "type": "string"
    },
    "header-height": {
      "default": "3.5rem",
      "description": "Defines the height for header elements in the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#header-height",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Header Height",
      "type": "string"
    },
    "menu-width": {
      "default": "16rem",
      "description": "Defines the width of the site menu.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#menu-width",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Menu Width",
      "type": "string"
    },
    "padding-large": {
      "default": "1rem",
      "description": "Defines large padding for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#padding-large",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Large Padding",
      "type": "string"
    },
    "padding-medium": {
      "default": "0.5rem",
      "description": "Defines medium padding for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#padding-medium",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Medium Padding",
      "type": "string"
    },
    "padding-minimal": {
      "default": "1px",
      "description": "Defines the smallest possible padding for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#padding-minimal",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Minimal Padding",
      "type": "string"
    },
    "padding-small": {
      "default": "0.25rem",
      "description": "Defines small padding for the theme.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#padding-small",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Small Padding",
      "type": "string"
    },
    "toc-width": {
      "default": "16rem",
      "description": "Defines the width of the table of contents.\n\nhttps://platen.io/modules/platen/config/site/theme/variables/basic_scss/#toc-width",
      "pattern": "^[0-9]+\\.?[0-9]*(px|em|rem)$",
      "title": "Table of Contents Width",
      "type": "string"
    }
  },
  "title": "Basic SCSS Variables",
  "type": "object"
}

Minimal Padding (padding-minimal)

Defines the smallest possible padding for the theme. It defaults to 1px. You can specify any single valid size, such as 3px, 1rem, or 0.1em.

This value is used for:

• The border of the details element
• The height of the hr element
• The border for th and td elements
• The border for the search box
• The border for buttons
• The borders for the tabs

For more information on valid values, see length in the MDN documentation.

Small Padding (padding-small)

Defines small padding for the theme, used to create space between items meant to be very close together. It defaults to 0.25rem.

You can specify any single valid size, such as 3px, 1rem, or 0.1em.

This value is used for:

• The padding to the left and right of code blocks
• The margin after items in the TOC

For more information on valid values, see length in the MDN documentation.

Medium Padding (padding-medium)

Defines medium padding for the theme, used for most elements. It defaults to 0.5rem. This gives twice as much space between elements as padding-small.

You can specify any single valid size, such as 3px, 1rem, or 0.1em.

This value is used for:

• The horizontal padding for blockquotes
• The vertical padding for table cells
• The shadow beneath the menu in mobile view
• The margin after the brand image in the menu
• The margin after images in the footer
• The padding around the search input box
• The margin around the search spinner, when visible
• The width of scrollbars, when visible
• The vertical padding for tab labels added by the tabs markup

For more information on valid values, see length in the MDN documentation.

Large Padding (padding-large)

Defines large padding for the theme, used to create a full space between elements. It defaults to 1rem. This gives twice as much space between elements as padding-medium.

You can specify any single valid size, such as 3px, 1rem, or 0.1em.

This value is used for:

• The margin before starting an unordered list in the site menu
• The padding around pagination links
• The vertical margin and bottom padding for blockquotes
• The padding for code blocks
• The padding for the details element and the padding and margin for the summary element
• The vertical margin for figure elements
• The bottom margin for heading elements
• The padding before lists in markdown
• The top margin for dt elements and bottom margin for dd elements in a definition list
• The vertical margin for table elements and the horizontal padding for th and td elements in those tables
• The bottom margin for the brand section in the site menu
• The margin above comments, if added to a page
• The padding at the top of the site footer
• The margin beneath the page header
• The margin after the languages menu, if it exists
• The padding around entries in the site menu
• The vertical margin for flat sections in the site menu
• The padding around the container for a page’s content
• The margin beneath the content of a blog post
• The margin around the search section of the site menu
• The height and width of the search spinner when visible
• The padding around the main TOC content
• The height and horizontal padding for buttons
• The horizontal margins for [columns]
• The vertical margin for tabs, the horizontal padding for their labels, and the padding around their contents
• The padding for containers in wide view mode

For more information on valid values, see length in the MDN documentation

Base Font Size (font-size-base)

Defines the base font size for the theme. Any values that use root em units (rem) for size are relative to this value. The default is 16px. This value must be defined in px.

This value is set as the font size in the root html element and for the site menu in mobile view.

For more information, see font-size in the MDN documentation

Small Font Size (font-size-small)

Defines the small font size for the theme. The default is 0.75rem, which is defined by the value of the font-size-base variable. This value must be defined in rem.

This value is used for the text in the table of contents.

For more information, see font-size in the MDN documentation.

Medium Font Size (font-size-medium)

Defines the medium font size for the theme. The default is 0.875rem, which is defined by the value of the font-size-base variable. This value must be defined in rem.

This value is used for the text in the site menu, page footers, and buttons.

For more information, see font-size in the MDN documentation.

Full Font Size (font-size-full)

Defines the full font size for the theme. The default is 1rem, which is defined by the value of the font-size-base variable. This value must be defined in rem.

This value isn’t used by the theme directly, but provides a shorthand way for you to override inheritied font sizes back to the default.

For more information, see font-size in the MDN documentation.

Body Font Weight (body-font-weight)

Defines the base font weight for all body text. The default is normal, which is the same as 400. For more information, see font-weight in the MDN documentation.

This value isn’t used by the theme directly, but provides a shorthand way for you to override inheritied font sizes back to the default.

Minimum Body Width (body-min-width)

Defines the minimum width of the body container for the theme. The default is 20rem, which is defined by the value of the font-size-base variable.

This value is used to set the min-width value for the the body element, the platen-page container, and columns.

While this variable can be set to any valid length, we recommend you use rem to keep it relative to the base font size.

For more information on valid values, see length in the MDN documentation.

Maximum Container Width (container-max-width)

Defines the maximum width of containers for the theme. The default is 80rem, which is defined by the value of the font-size-base variable.

This value is used to set the max-width value for the the container class, which the theme adds to the main element, and as the size boundary for the wide view.

While this variable can be set to any valid length, we recommend you use rem to keep it relative to the base font size.

For more information on valid values, see length in the MDN documentation.

Header Height (header-height)

Defines the height for header elements in the theme. The default is 3.5rem, which is defined by the value of the font-size-base variable.

This value isn’t directly used by the theme but provides a shorthand for shortcode authors and theme developers to use in their own work.

While this variable can be set to any valid length, we recommend you use rem to keep it relative to the base font size.

For more information on valid values, see length in the MDN documentation.

Menu Width (menu-width)

Defines the width of the site menu. The default is 16rem, which is defined by the value of the font-size-base variable.

While this variable can be set to any valid length, we recommend you use rem to keep it relative to the base font size.

For more information on valid values, see length in the MDN documentation.

Table of Contents Width (toc-width)

Defines the width of the table of contents. The default is 16rem, which is defined by the value of the font-size-base variable.

While this variable can be set to any valid length, we recommend you use rem to keep it relative to the base font size.

For more information on valid values, see length in the MDN documentation.

params:
  platen:
    theme:
      variables:
        basic_scss:
          details-colors:
            info: pink
            example: "#ee82ee"