Borders — SXL Studio Docs

Overview

`$type`	Экспортируется как	Значение одной строкой
`border`	Внутренний (apply)	Композитный объект: color + width + style
`borderWidth`	Переменная (`FLOAT`)	Число или строка с единицей
`borderRadius`	Переменная (`FLOAT`)	Число или строка с единицей
`strokeStyle`	Внутренний (apply)	Описание dash/cap/join (строка, объект или массив)

border и strokeStyle применяются к нодам напрямую (не экспортируются как отдельная переменная/стиль). borderWidth и borderRadius — обычные переменные FLOAT.

Border

Композитный контракт обводки. Частичные объекты допустимы — плагин дополнит остальное.

Ключ	Тип / значения	Значение
`color`	строка цвета или алиас	Цвет обводки
`width`	число / строка с единицей или алиас	Толщина обводки
`style`	`solid`, `dashed`, `dotted`; `none` / `hidden` очищает обводку	Стиль линии
`strokeAlign`	`inside`, `center`, `outside`	Положение обводки (алиасы: `position`, `borderAlign`)
`strokeStyle`	алиас на токен `strokeStyle` или инлайновый объект/строка stroke-style	Паттерн dash + caps/joins

JSON
{
  "border": {
    "$type": "border",
    "default": {
      "$value": { "color": "{color.neutral.300}", "width": "{borderWidth.sm}", "style": "solid", "strokeAlign": "inside" }
    }
  }
}

Пунктирный border — детали dash кладите в strokeStyle (инлайновый объект или ссылка на токен strokeStyle):

JSON
{
  "border": {
    "$type": "border",
    "focus": {
      "$value": {
        "color": "#FF6600",
        "width": "2px",
        "style": "dashed",
        "strokeStyle": { "dash": 6, "gap": 4, "strokeCap": "round" }
      }
    }
  }
}

Border Width

Экспортируется как переменная FLOAT со scope STROKE_FLOAT.

Принимаемое `$value`	Пример
Число	`1`
Строка с единицей	`"1px"`, `"0.5rem"`
Алиас / математика	`"{borderWidth.md}"`

JSON
{ "borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } } }

Border Radius

Экспортируется как переменная FLOAT со scope CORNER_RADIUS.

Принимаемое `$value`	Пример
Число	`8`
Строка с единицей	`"8px"`, `"1rem"`
Алиас / математика	`"{borderRadius.lg} * 2"`

JSON
{ "borderRadius": { "$type": "borderRadius", "sm": { "$value": "4px" }, "pill": { "$value": "999px" } } }

Stroke Style

Описывает паттерн dash и caps/joins. Применяется напрямую (не отдельный экспорт), можно ссылаться из border.strokeStyle.

Принимаемое `$value`	Пример
Строка стиля	`"solid"`, `"dashed"`
Массив dash	`[4, 4]` (dash, gap, …)
Объект	см. ключи ниже
Алиас	`"{strokeStyle.dashed}"`

Ключи объекта stroke-style:

Ключ	Значения
`style`	`solid`, `dashed`, `dotted`
`dash`	Длина штриха (число / строка)
`gap`	Длина пропуска (число / строка)
`dashCap`	Cap для штриха
`strokeCap` / `endCap`	`butt` / `none`, `round`, `square`
`strokeJoin` / `join`	`miter`, `bevel`, `round`

JSON
{
  "strokeStyle": {
    "$type": "strokeStyle",
    "dashed": { "$value": { "style": "dashed", "dash": 6, "gap": 4, "strokeCap": "round" } }
  }
}

Полный пример

JSON
{
  "borderWidth": { "$type": "borderWidth", "sm": { "$value": "1px" }, "md": { "$value": "2px" } },
  "borderRadius": { "$type": "borderRadius", "md": { "$value": "8px" } },
  "border": {
    "$type": "border",
    "default": { "$value": { "color": "{color.neutral.300}", "width": "{borderWidth.sm}", "style": "solid", "strokeAlign": "inside" } },
    "focus": { "$value": { "color": "{color.brand.primary}", "width": "{borderWidth.md}", "style": "dashed", "strokeStyle": { "dash": 6, "gap": 4 } } }
  }
}

#Overview

#Border

#Border Width

#Border Radius

#Stroke Style

#Полный пример