Calculated SCSS Variables (calculated_scss)

JSON Schema

{
  "$id": "https://platen.io/schemas/platen/site/theme/variables/calculated_scss/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Variables that depend on others\n\nhttps://platen.io/schemas/platen/site/theme/variables/calculated_scss/",
  "properties": {
    "border-radius": {
      "default": "$padding-small",
      "description": "Defines the default border radius for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/calculated_scss/#border-radius",
      "title": "Border Radius",
      "type": "string"
    },
    "mobile-breakpoint": {
      "default": "$menu-width + $body-min-width * 1.2 + $toc-width",
      "description": "Defines the maximum width of a screen to display in mobile view.\n\nhttps://platen.io/schemas/platen/site/theme/variables/calculated_scss/#mobile-breakpoint",
      "title": "Mobile Breakpoint",
      "type": "string"
    }
  },
  "title": "Calculated SCSS Variables",
  "type": "object"
}

Border Radius (border-radius)

Defines the default border radius for the theme. It defaults to the value of $padding-small. You can specify any single valid size, such as 3px, 1rem, or 0.1em, or reference any value defined in theme.variables.basic_scss.

This value is used for the border-radius of the following elements:

• blockquote
• code
• pre
• details
• The input for the site search
• The a added by Platen’s buttons markup
• The container for tabs

For more information, see border-radius in the MDN documentation.

Mobile Breakpoint (mobile-breakpoint)

Defines the maximum width of a screen to display in mobile view. It defaults to $menu-width + $body-min-width * 1.2 + $toc-width. This ensures the view switches from the condensed view for mobile into the standard desktop view only when there’s enough space to display the site menu, body, and table of contents containers together.

You can specify any single valid size, such as 768px, 100rem, or 120em, or reference any values in theme.variables.basic_scss as part of an equation.

This value is used for controlling the display of the following elements:

• The site menu
• The page header
• The table of contents for a page