@pandacss/studio
Version:
The automated token documentation for Panda CSS
1,050 lines (1,046 loc) • 363 kB
TypeScript
/* eslint-disable */
import type { ConditionalValue } from './conditions';
import type { OnlyKnown, UtilityValues, WithEscapeHatch } from './prop-type';
import type { CssProperties } from './system-types';
import type { Token } from '../tokens/index';
type AnyString = (string & {})
type CssVars = `var(--${string})`
type CssVarValue = ConditionalValue<Token | AnyString | (number & {})>
type CssVarName = | AnyString
type CssVarKeys = `--${CssVarName}`
export type CssVarProperties = {
[key in CssVarKeys]?: CssVarValue
}
export interface SystemProperties {
/**
* The **`appearance`** CSS property is used to control native appearance of UI controls, that are based on operating system's theme.
*
* **Syntax**: `none | button | button-bevel | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist | menulist-button | menulist-text | menulist-textfield | meter | progress-bar | progress-bar-value | push-button | radio | searchfield | searchfield-cancel-button | searchfield-decoration | searchfield-results-button | searchfield-results-decoration | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | square-button | textarea | textfield | -apple-pay-button`
*
* **Initial value**: `none` (but this value is overridden in the user agent CSS)
*/
WebkitAppearance?: ConditionalValue<CssProperties["WebkitAppearance"] | AnyString>
/**
* The **`-webkit-border-before`** CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.
*
* **Syntax**: `<'border-width'> || <'border-style'> || <color>`
*/
WebkitBorderBefore?: ConditionalValue<CssProperties["WebkitBorderBefore"] | AnyString>
/**
* **Syntax**: `<color>`
*
* **Initial value**: `currentcolor`
*/
WebkitBorderBeforeColor?: ConditionalValue<CssProperties["WebkitBorderBeforeColor"] | AnyString>
/**
* **Syntax**: `<'border-style'>`
*
* **Initial value**: `none`
*/
WebkitBorderBeforeStyle?: ConditionalValue<CssProperties["WebkitBorderBeforeStyle"] | AnyString>
/**
* **Syntax**: `<'border-width'>`
*
* **Initial value**: `medium`
*/
WebkitBorderBeforeWidth?: ConditionalValue<CssProperties["WebkitBorderBeforeWidth"] | AnyString>
/**
* The **`-webkit-box-reflect`** CSS property lets you reflect the content of an element in one specific direction.
*
* **Syntax**: `[ above | below | right | left ]? <length>? <image>?`
*
* **Initial value**: `none`
*/
WebkitBoxReflect?: ConditionalValue<CssProperties["WebkitBoxReflect"] | AnyString>
/**
* The **`-webkit-line-clamp`** CSS property allows limiting of the contents of a block to the specified number of lines.
*
* **Syntax**: `none | <integer>`
*
* **Initial value**: `none`
*/
WebkitLineClamp?: ConditionalValue<CssProperties["WebkitLineClamp"] | AnyString>
/**
* The **`mask`** CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
*
* **Syntax**: `[ <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || [ <box> | border | padding | content | text ] || [ <box> | border | padding | content ] ]#`
*/
WebkitMask?: ConditionalValue<CssProperties["WebkitMask"] | AnyString>
/**
* If a `mask-image` is specified, `-webkit-mask-attachment` determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
*
* **Syntax**: `<attachment>#`
*
* **Initial value**: `scroll`
*/
WebkitMaskAttachment?: ConditionalValue<CssProperties["WebkitMaskAttachment"] | AnyString>
/**
* The **`mask-clip`** CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.
*
* **Syntax**: `[ <box> | border | padding | content | text ]#`
*
* **Initial value**: `border`
*/
WebkitMaskClip?: ConditionalValue<CssProperties["WebkitMaskClip"] | AnyString>
/**
* The **`-webkit-mask-composite`** property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the `-webkit-mask-image` property.
*
* **Syntax**: `<composite-style>#`
*
* **Initial value**: `source-over`
*/
WebkitMaskComposite?: ConditionalValue<CssProperties["WebkitMaskComposite"] | AnyString>
/**
* The **`mask-image`** CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the `mask-mode` property.
*
* **Syntax**: `<mask-reference>#`
*
* **Initial value**: `none`
*/
WebkitMaskImage?: ConditionalValue<CssProperties["WebkitMaskImage"] | AnyString>
/**
* The **`mask-origin`** CSS property sets the origin of a mask.
*
* **Syntax**: `[ <box> | border | padding | content ]#`
*
* **Initial value**: `padding`
*/
WebkitMaskOrigin?: ConditionalValue<CssProperties["WebkitMaskOrigin"] | AnyString>
/**
* The **`mask-position`** CSS property sets the initial position, relative to the mask position layer set by `mask-origin`, for each defined mask image.
*
* **Syntax**: `<position>#`
*
* **Initial value**: `0% 0%`
*/
WebkitMaskPosition?: ConditionalValue<CssProperties["WebkitMaskPosition"] | AnyString>
/**
* The `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image.
*
* **Syntax**: `[ <length-percentage> | left | center | right ]#`
*
* **Initial value**: `0%`
*/
WebkitMaskPositionX?: ConditionalValue<CssProperties["WebkitMaskPositionX"] | AnyString>
/**
* The `-webkit-mask-position-y` CSS property sets the initial vertical position of a mask image.
*
* **Syntax**: `[ <length-percentage> | top | center | bottom ]#`
*
* **Initial value**: `0%`
*/
WebkitMaskPositionY?: ConditionalValue<CssProperties["WebkitMaskPositionY"] | AnyString>
/**
* The **`mask-repeat`** CSS property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
*
* **Syntax**: `<repeat-style>#`
*
* **Initial value**: `repeat`
*/
WebkitMaskRepeat?: ConditionalValue<CssProperties["WebkitMaskRepeat"] | AnyString>
/**
* The `-webkit-mask-repeat-x` property specifies whether and how a mask image is repeated (tiled) horizontally.
*
* **Syntax**: `repeat | no-repeat | space | round`
*
* **Initial value**: `repeat`
*/
WebkitMaskRepeatX?: ConditionalValue<CssProperties["WebkitMaskRepeatX"] | AnyString>
/**
* The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeated (tiled) vertically.
*
* **Syntax**: `repeat | no-repeat | space | round`
*
* **Initial value**: `repeat`
*/
WebkitMaskRepeatY?: ConditionalValue<CssProperties["WebkitMaskRepeatY"] | AnyString>
/**
* The **`mask-size`** CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.
*
* **Syntax**: `<bg-size>#`
*
* **Initial value**: `auto auto`
*/
WebkitMaskSize?: ConditionalValue<CssProperties["WebkitMaskSize"] | AnyString>
/**
* The `-webkit-overflow-scrolling` CSS property controls whether or not touch devices use momentum-based scrolling for a given element.
*
* **Syntax**: `auto | touch`
*
* **Initial value**: `auto`
*/
WebkitOverflowScrolling?: ConditionalValue<CssProperties["WebkitOverflowScrolling"] | AnyString>
/**
* **`-webkit-tap-highlight-color`** is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.
*
* **Syntax**: `<color>`
*
* **Initial value**: `black`
*/
WebkitTapHighlightColor?: ConditionalValue<CssProperties["WebkitTapHighlightColor"] | AnyString>
/**
* The **`-webkit-text-fill-color`** CSS property specifies the fill color of characters of text. If this property is not set, the value of the `color` property is used.
*
* **Syntax**: `<color>`
*
* **Initial value**: `currentcolor`
*/
WebkitTextFillColor?: ConditionalValue<CssProperties["WebkitTextFillColor"] | AnyString>
/**
* The **`-webkit-text-stroke`** CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties `-webkit-text-stroke-width` and `-webkit-text-stroke-color`.
*
* **Syntax**: `<length> || <color>`
*/
WebkitTextStroke?: ConditionalValue<CssProperties["WebkitTextStroke"] | AnyString>
/**
* The **`-webkit-text-stroke-color`** CSS property specifies the stroke color of characters of text. If this property is not set, the value of the `color` property is used.
*
* **Syntax**: `<color>`
*
* **Initial value**: `currentcolor`
*/
WebkitTextStrokeColor?: ConditionalValue<CssProperties["WebkitTextStrokeColor"] | AnyString>
/**
* The **`-webkit-text-stroke-width`** CSS property specifies the width of the stroke for text.
*
* **Syntax**: `<length>`
*
* **Initial value**: `0`
*/
WebkitTextStrokeWidth?: ConditionalValue<CssProperties["WebkitTextStrokeWidth"] | AnyString>
/**
* The `-webkit-touch-callout` CSS property controls the display of the default callout shown when you touch and hold a touch target.
*
* **Syntax**: `default | none`
*
* **Initial value**: `default`
*/
WebkitTouchCallout?: ConditionalValue<CssProperties["WebkitTouchCallout"] | AnyString>
/**
* **Syntax**: `read-only | read-write | read-write-plaintext-only`
*
* **Initial value**: `read-only`
*/
WebkitUserModify?: ConditionalValue<CssProperties["WebkitUserModify"] | AnyString>
/**
* The **`user-select`** CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.
*
* **Syntax**: `auto | text | none | contain | all`
*
* **Initial value**: `auto`
*/
WebkitUserSelect?: ConditionalValue<CssProperties["WebkitUserSelect"] | AnyString>
/**
* The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.
*
* **Syntax**: `auto | <color>`
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **93** | **92** | **15.4** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/accent-color
*/
accentColor?: ConditionalValue<UtilityValues["accentColor"] | CssVars | CssProperties["accentColor"] | AnyString>
/**
* The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
*
* **Syntax**: `normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :------: | :-----: | :-----: | :----: | :----: |
* | **29** | **28** | **9** | **12** | **11** |
* | 21 _-x-_ | | 7 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-content
*/
alignContent?: ConditionalValue<CssVars | CssProperties["alignContent"] | AnyString>
/**
* The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
*
* **Syntax**: `normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :------: | :-----: | :-----: | :----: | :----: |
* | **29** | **20** | **9** | **12** | **11** |
* | 21 _-x-_ | | 7 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-items
*/
alignItems?: ConditionalValue<CssVars | CssProperties["alignItems"] | AnyString>
/**
* The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
*
* **Syntax**: `auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>`
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :------: | :-----: | :-----: | :----: | :----: |
* | **29** | **20** | **9** | **12** | **10** |
* | 21 _-x-_ | | 7 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-self
*/
alignSelf?: ConditionalValue<CssVars | CssProperties["alignSelf"] | AnyString>
/**
* The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.
*
* **Syntax**: `[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :--: | :-: |
* | No | n/a | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-tracks
*/
alignTracks?: ConditionalValue<CssProperties["alignTracks"] | AnyString>
/**
* The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
*
* **Syntax**: `initial | inherit | unset | revert | revert-layer`
*
* **Initial value**: There is no practical initial value for it.
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :-----: | :--: | :-: |
* | **37** | **27** | **9.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/all
*/
all?: ConditionalValue<CssVars | CssProperties["all"] | AnyString>
anchorName?: ConditionalValue<CssProperties["anchorName"] | AnyString>
anchorScope?: ConditionalValue<CssProperties["anchorScope"] | AnyString>
/**
* The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`.
*
* **Syntax**: `<single-animation>#`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation
*/
animation?: ConditionalValue<UtilityValues["animation"] | CssVars | CssProperties["animation"] | AnyString>
/**
* The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.
*
* **Syntax**: `<single-animation-composition>#`
*
* **Initial value**: `replace`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **112** | **115** | **16** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-composition
*/
animationComposition?: ConditionalValue<CssVars | CssProperties["animationComposition"] | AnyString>
/**
* The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
*
* **Syntax**: `<time>#`
*
* **Initial value**: `0s`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-delay
*/
animationDelay?: ConditionalValue<UtilityValues["animationDelay"] | CssVars | CssProperties["animationDelay"] | AnyString>
/**
* The **`animation-direction`** CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
*
* **Syntax**: `<single-animation-direction>#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-direction
*/
animationDirection?: ConditionalValue<CssVars | CssProperties["animationDirection"] | AnyString>
/**
* The **`animation-duration`** CSS property sets the length of time that an animation takes to complete one cycle.
*
* **Syntax**: `<time>#`
*
* **Initial value**: `0s`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-duration
*/
animationDuration?: ConditionalValue<UtilityValues["animationDuration"] | CssVars | CssProperties["animationDuration"] | AnyString>
/**
* The **`animation-fill-mode`** CSS property sets how a CSS animation applies styles to its target before and after its execution.
*
* **Syntax**: `<single-animation-fill-mode>#`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 5 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode
*/
animationFillMode?: ConditionalValue<CssVars | CssProperties["animationFillMode"] | AnyString>
/**
* The **`animation-iteration-count`** CSS property sets the number of times an animation sequence should be played before stopping.
*
* **Syntax**: `<single-animation-iteration-count>#`
*
* **Initial value**: `1`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count
*/
animationIterationCount?: ConditionalValue<CssProperties["animationIterationCount"] | AnyString>
/**
* The **`animation-name`** CSS property specifies the names of one or more `@keyframes` at-rules that describe the animation to apply to an element. Multiple `@keyframe` at-rules are specified as a comma-separated list of names. If the specified name does not match any `@keyframe` at-rule, no properties are animated.
*
* **Syntax**: `[ none | <keyframes-name> ]#`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-name
*/
animationName?: ConditionalValue<UtilityValues["animationName"] | CssVars | CssProperties["animationName"] | AnyString>
/**
* The **`animation-play-state`** CSS property sets whether an animation is running or paused.
*
* **Syntax**: `<single-animation-play-state>#`
*
* **Initial value**: `running`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-play-state
*/
animationPlayState?: ConditionalValue<CssProperties["animationPlayState"] | AnyString>
/**
* The **`animation-range`** CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start and end.
*
* **Syntax**: `[ <'animation-range-start'> <'animation-range-end'>? ]#`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | No | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-range
*/
animationRange?: ConditionalValue<CssProperties["animationRange"] | AnyString>
/**
* The **`animation-range-end`** CSS property is used to set the end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will end.
*
* **Syntax**: `[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | No | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-range-end
*/
animationRangeEnd?: ConditionalValue<CssProperties["animationRangeEnd"] | AnyString>
/**
* The **`animation-range-start`** CSS property is used to set the start of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start.
*
* **Syntax**: `[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | No | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-range-start
*/
animationRangeStart?: ConditionalValue<CssProperties["animationRangeStart"] | AnyString>
/**
* The **`animation-timeline`** CSS property specifies the timeline that is used to control the progress of an animation.
*
* **Syntax**: `<single-animation-timeline>#`
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | n/a | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-timeline
*/
animationTimeline?: ConditionalValue<CssProperties["animationTimeline"] | AnyString>
/**
* The **`animation-timing-function`** CSS property sets how an animation progresses through the duration of each cycle.
*
* **Syntax**: `<easing-function>#`
*
* **Initial value**: `ease`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-timing-function
*/
animationTimingFunction?: ConditionalValue<UtilityValues["animationTimingFunction"] | CssVars | CssProperties["animationTimingFunction"] | AnyString>
/**
* The **`appearance`** CSS property is used to control native appearance of UI controls, that are based on operating system's theme.
*
* **Syntax**: `none | auto | textfield | menulist-button | <compat-auto>`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :------: | :------: | :-: |
* | **84** | **80** | **15.4** | **84** | No |
* | 1 _-x-_ | 1 _-x-_ | 3 _-x-_ | 12 _-x-_ | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/appearance
*/
appearance?: ConditionalValue<CssVars | CssProperties["appearance"] | AnyString>
/**
* The **`aspect-ratio`** CSS property sets a **preferred aspect ratio** for the box, which will be used in the calculation of auto sizes and some other layout functions.
*
* **Syntax**: `auto | <ratio>`
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :--: | :-: |
* | **88** | **89** | **15** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
*/
aspectRatio?: ConditionalValue<UtilityValues["aspectRatio"] | CssVars | CssProperties["aspectRatio"] | AnyString>
/**
* The **`backdrop-filter`** CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything _behind_ the element, to see the effect you must make the element or its background at least partially transparent.
*
* **Syntax**: `none | <filter-function-list>`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :---------: | :----: | :-: |
* | **76** | **103** | **9** _-x-_ | **17** | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/backdrop-filter
*/
backdropFilter?: ConditionalValue<UtilityValues["backdropFilter"] | CssVars | CssProperties["backdropFilter"] | AnyString>
/**
* The **`backface-visibility`** CSS property sets whether the back face of an element is visible when turned towards the user.
*
* **Syntax**: `visible | hidden`
*
* **Initial value**: `visible`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :------: | :-----: | :-------: | :----: | :----: |
* | **36** | **16** | **15.4** | **12** | **10** |
* | 12 _-x-_ | | 5.1 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/backface-visibility
*/
backfaceVisibility?: ConditionalValue<CssVars | CssProperties["backfaceVisibility"] | AnyString>
/**
* The **`background`** shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
*
* **Syntax**: `[ <bg-layer> , ]* <final-bg-layer>`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background
*/
background?: ConditionalValue<UtilityValues["background"] | CssVars | CssProperties["background"] | AnyString>
/**
* The **`background-attachment`** CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
*
* **Syntax**: `<attachment>#`
*
* **Initial value**: `scroll`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-attachment
*/
backgroundAttachment?: ConditionalValue<CssVars | CssProperties["backgroundAttachment"] | AnyString>
/**
* The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.
*
* **Syntax**: `<blend-mode>#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :--: | :-: |
* | **35** | **30** | **8** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-blend-mode
*/
backgroundBlendMode?: ConditionalValue<CssProperties["backgroundBlendMode"] | AnyString>
/**
* The **`background-clip`** CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
*
* **Syntax**: `<box>#`
*
* **Initial value**: `border-box`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :-----: | :----: | :---: |
* | **1** | **4** | **5** | **12** | **9** |
* | | | 3 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-clip
*/
backgroundClip?: ConditionalValue<CssVars | CssProperties["backgroundClip"] | AnyString>
/**
* The **`background-color`** CSS property sets the background color of an element.
*
* **Syntax**: `<color>`
*
* **Initial value**: `transparent`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-color
*/
backgroundColor?: ConditionalValue<UtilityValues["backgroundColor"] | CssVars | CssProperties["backgroundColor"] | AnyString>
/**
* The **`background-image`** CSS property sets one or more background images on an element.
*
* **Syntax**: `<bg-image>#`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-image
*/
backgroundImage?: ConditionalValue<UtilityValues["backgroundImage"] | CssVars | CssProperties["backgroundImage"] | AnyString>
/**
* The **`background-origin`** CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
*
* **Syntax**: `<box>#`
*
* **Initial value**: `padding-box`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **4** | **3** | **12** | **9** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-origin
*/
backgroundOrigin?: ConditionalValue<CssProperties["backgroundOrigin"] | AnyString>
/**
* The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.
*
* **Syntax**: `<bg-position>#`
*
* **Initial value**: `0% 0%`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-position
*/
backgroundPosition?: ConditionalValue<CssProperties["backgroundPosition"] | AnyString>
/**
* The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.
*
* **Syntax**: `[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#`
*
* **Initial value**: `0%`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **49** | **1** | **12** | **6** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-position-x
*/
backgroundPositionX?: ConditionalValue<CssProperties["backgroundPositionX"] | AnyString>
/**
* The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.
*
* **Syntax**: `[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#`
*
* **Initial value**: `0%`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **49** | **1** | **12** | **6** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-position-y
*/
backgroundPositionY?: ConditionalValue<CssProperties["backgroundPositionY"] | AnyString>
/**
* The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
*
* **Syntax**: `<repeat-style>#`
*
* **Initial value**: `repeat`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-repeat
*/
backgroundRepeat?: ConditionalValue<CssProperties["backgroundRepeat"] | AnyString>
/**
* The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
*
* **Syntax**: `<bg-size>#`
*
* **Initial value**: `auto auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :---: |
* | **3** | **4** | **5** | **12** | **9** |
* | 1 _-x-_ | | 3 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-size
*/
backgroundSize?: ConditionalValue<CssProperties["backgroundSize"] | AnyString>
/**
* The **`block-size`** CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `width` or the `height` property, depending on the value of `writing-mode`.
*
* **Syntax**: `<'width'>`
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **57** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/block-size
*/
blockSize?: ConditionalValue<UtilityValues["blockSize"] | CssVars | CssProperties["blockSize"] | AnyString>
/**
* The **`border`** shorthand CSS property sets an element's border. It sets the values of `border-width`, `border-style`, and `border-color`.
*
* **Syntax**: `<line-width> || <line-style> || <color>`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border
*/
border?: ConditionalValue<UtilityValues["border"] | CssVars | CssProperties["border"] | AnyString>
/**
* The **`border-block`** CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
*
* **Syntax**: `<'border-top-width'> || <'border-top-style'> || <color>`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **87** | **66** | **14.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block
*/
borderBlock?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssProperties["borderBlock"] | AnyString>
/**
* The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-color'>{1,2}`
*
* **Initial value**: `currentcolor`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **87** | **66** | **14.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-color
*/
borderBlockColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssVars | CssProperties["borderBlockColor"] | AnyString>
/**
* The **`border-block-end`** CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
*
* **Syntax**: `<'border-top-width'> || <'border-top-style'> || <color>`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end
*/
borderBlockEnd?: ConditionalValue<UtilityValues["borderBlockEnd"] | CssVars | CssProperties["borderBlockEnd"] | AnyString>
/**
* The **`border-block-end-color`** CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-color'>`
*
* **Initial value**: `currentcolor`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-color
*/
borderBlockEndColor?: ConditionalValue<UtilityValues["borderBlockEndColor"] | CssVars | CssProperties["borderBlockEndColor"] | AnyString>
/**
* The **`border-block-end-style`** CSS property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-style'>`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-style
*/
borderBlockEndStyle?: ConditionalValue<CssVars | CssProperties["borderBlockEndStyle"] | AnyString>
/**
* The **`border-block-end-width`** CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-width'>`
*
* **Initial value**: `medium`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-width
*/
borderBlockEndWidth?: ConditionalValue<CssProperties["borderBlockEndWidth"] | AnyString>
/**
* The **`border-block-start`** CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
*
* **Syntax**: `<'border-top-width'> || <'border-top-style'> || <color>`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start
*/
borderBlockStart?: ConditionalValue<UtilityValues["borderBlockStart"] | CssVars | CssProperties["borderBlockStart"] | AnyString>
/**
* The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-color'>`
*
* **Initial value**: `currentcolor`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-color
*/
borderBlockStartColor?: ConditionalValue<UtilityValues["borderBlockStartColor"] | CssVars | CssProperties["borderBlockStartColor"] | AnyString>
/**
* The **`border-block-start-style`** CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-style'>`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-style
*/
borderBlockStartStyle?: ConditionalValue<CssVars | CssProperties["borderBlockStartStyle"] | AnyString>
/**
* The **`border-block-start-width`** CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-width'>`
*
* **Initial value**: `medium`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **69** | **41** | **12.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-width
*/
borderBlockStartWidth?: ConditionalValue<CssProperties["borderBlockStartWidth"] | AnyString>
/**
* The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-style'>`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **87** | **66** | **14.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-style
*/
borderBlockStyle?: ConditionalValue<CssVars | CssProperties["borderBlockStyle"] | AnyString>
/**
* The **`border-block-width`** CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
*
* **Syntax**: `<'border-top-width'>`
*
* **Initial value**: `medium`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :------: | :--: | :-: |
* | **87** | **66** | **14.1** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
*/
borderBlockWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyString>
/**
* The **`border-bottom`** shorthand CSS property sets an element's bottom border. It sets the values of `border-bottom-width`, `border-bottom-style` and `border-bottom-color`.
*
* **Syntax**: `<line-width> || <line-style> || <color>`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom
*/
borderBottom?: ConditionalValue<UtilityValues["borderBottom"] | CssVars | CssProperties["borderBottom"] | AnyString>
/**
* The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`.
*
* **Syntax**: `<'border-top-color'>`
*
* **Initial value**: `currentcolor`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-color
*/
borderBottomColor?: ConditionalValue<UtilityValues["borderBottomColor"] | CssVars | CssProperties["borderBottomColor"] | AnyString>
/**
* The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
*
* **Syntax**: `<length-percentage>{1,2}`
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :---: |
* | **4** | **4** | **5** | **12** | **9** |
* | 1 _-x-_ | | 3 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius
*/
borderBottomLeftRadius?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssVars | CssProperties["borderBottomLeftRadius"] | AnyString>
/**
* The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
*
* **Syntax**: `<length-percentage>{1,2}`
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :---: |
* | **4** | **4** | **5** | **12** | **9** |
* | 1 _-x-_ | | 3 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius
*/
borderBottomRightRadius?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssVars | CssProperties["borderBottomRightRadius"] | AnyString>
/**
* The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
*
* **Syntax**: `<line-style>`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :-----: |
* | **1** | **1** | **1** | **12** | **5.5** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
*/
borderBottomStyle?: ConditionalValue<CssVars | CssProperties["borderBottomStyle"] | AnyString>
/**
* The **`border-bottom-width`** CSS property sets the width of the bottom border of an element.
*
* **Syntax**: `<line-width>`
*
* **Initial value**: `medium`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-width
*/
borderBottomWidth?: ConditionalValue<CssProperties["borderBottomWidth"] | AnyString>
/**
* The **`border-collapse`** CSS property sets whether cells inside a `<table>` have shared or separate borders.
*
* **Syntax**: `collapse | separate`
*
* **Initial value**: `separate`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :-----: | :----: | :---: |
* | **1** | **1** | **1.2** | **12** | **5** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-collapse
*/
borderCollapse?: ConditionalValue<CssVars | CssProperties["borderCollapse"] | AnyString>
/**
* The **`border-color`** shorthand CSS property sets the color of an element's border.
*
* **Syntax**: `<color>{1,4}`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-color
*/
borderColor?: ConditionalV