Shadows & Borders

Three styles each for shadows, borders, and corner radii.

Shadow Styles

Apply shadows using data-style-guide-shadow:

Style	Attribute
Style 1 (Light)	`data-style-guide-shadow="style1"`
Style 2 (Medium)	`data-style-guide-shadow="style2"`
Style 3 (Heavy)	`data-style-guide-shadow="style3"`

Shadow JSON Structure

JSON

{
  "params": {
    "--style-box-shadow-distance-x": 0,
    "--style-box-shadow-distance-y": 4,
    "--style-box-shadow-blur": 12,
    "--style-box-shadow-spread": 0,
    "--style-box-shadow-color": "rgba(0, 0, 0, 0.1)",
    "--style-box-shadow-distance-x--unit": "px",
    "--style-box-shadow-distance-y--unit": "px",
    "--style-box-shadow-blur--unit": "px",
    "--style-box-shadow-spread--unit": "px"
  },
  "attrs": {
    "data-skip-shadow-settings": "false"
  }
}

Property	Description
`--style-box-shadow-distance-x`	Horizontal offset
`--style-box-shadow-distance-y`	Vertical offset
`--style-box-shadow-blur`	Blur radius
`--style-box-shadow-spread`	Spread radius
`--style-box-shadow-color`	Shadow color (with alpha)

Border Styles

Apply borders using data-style-guide-border:

Style	Attribute
Style 1	`data-style-guide-border="style1"`
Style 2	`data-style-guide-border="style2"`
Style 3	`data-style-guide-border="style3"`

Border JSON Structure

JSON

{
  "params": {
    "--style-border-style": "solid",
    "--style-border-width": 1,
    "--style-border-width--unit": "px",
    "--style-border-color": "#e2e8f0"
  }
}

Border Style Values

Value	Description
`solid`	Solid line
`dashed`	Dashed line
`dotted`	Dotted line

Corner Styles

Apply corner radius using data-style-guide-corner:

Style	Attribute	Typical Use
Style 1 (Small)	`data-style-guide-corner="style1"`	4-6px radius
Style 2 (Medium)	`data-style-guide-corner="style2"`	8-12px radius
Style 3 (Large)	`data-style-guide-corner="style3"`	16-24px radius

Corner JSON Structure

JSON

{
  "attrs": {
    "style": { "border-radius": 8 },
    "data-skip-corners-settings": "false"
  },
  "params": {
    "border-radius--unit": "px"
  }
}

Separate Corner Radii

JSON

{
  "attrs": {
    "style": {
      "border-top-left-radius": 16,
      "border-top-right-radius": 16,
      "border-bottom-left-radius": 0,
      "border-bottom-right-radius": 0
    }
  },
  "params": {
    "separate-corners": true,
    "border-top-left-radius--unit": "px",
    "border-top-right-radius--unit": "px",
    "border-bottom-left-radius--unit": "px",
    "border-bottom-right-radius--unit": "px"
  }
}

data-skip-* Attributes

Set these to "false" to enable CF editor panels:

Attribute	Purpose
`data-skip-shadow-settings`	Enable shadow settings panel
`data-skip-corners-settings`	Enable corner radius panel
`data-skip-background-settings`	Enable background panel