/* 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 type CssVarKeys = `--${string}` & {} export type CssVarProperties = { [key in CssVarKeys]?: CssVarValue } export interface SystemProperties { /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022. * * **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 /** * 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'> || ` */ WebkitBorderBefore?: ConditionalValue /** * **Syntax**: `` * * **Initial value**: `currentcolor` */ WebkitBorderBeforeColor?: ConditionalValue /** * **Syntax**: `<'border-style'>` * * **Initial value**: `none` */ WebkitBorderBeforeStyle?: ConditionalValue /** * **Syntax**: `<'border-width'>` * * **Initial value**: `medium` */ WebkitBorderBeforeWidth?: ConditionalValue /** * The **`-webkit-box-reflect`** CSS property lets you reflect the content of an element in one specific direction. * * **Syntax**: `[ above | below | right | left ]? ? ?` * * **Initial value**: `none` */ WebkitBoxReflect?: ConditionalValue /** * This feature is not Baseline because it does not work in some of the most widely-used browsers. * * **Syntax**: `none | ` * * **Initial value**: `none` */ WebkitLineClamp?: ConditionalValue /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `[ || [ / ]? || || [ | border | padding | content | text ] || [ | border | padding | content ] ]#` */ WebkitMask?: ConditionalValue /** * **Syntax**: `#` * * **Initial value**: `scroll` */ WebkitMaskAttachment?: ConditionalValue /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `[ | no-clip | border | padding | content | text ]#` * * **Initial value**: `border` */ WebkitMaskClip?: ConditionalValue /** * 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**: `#` * * **Initial value**: `source-over` */ WebkitMaskComposite?: ConditionalValue /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `#` * * **Initial value**: `none` */ WebkitMaskImage?: ConditionalValue /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `[ | border | padding | content ]#` * * **Initial value**: `padding` */ WebkitMaskOrigin?: ConditionalValue /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `#` * * **Initial value**: `0% 0%` */ WebkitMaskPosition?: ConditionalValue /** * The `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image. * * **Syntax**: `[ | left | center | right ]#` * * **Initial value**: `0%` */ WebkitMaskPositionX?: ConditionalValue /** * The `-webkit-mask-position-y` CSS property sets the initial vertical position of a mask image. * * **Syntax**: `[ | top | center | bottom ]#` * * **Initial value**: `0%` */ WebkitMaskPositionY?: ConditionalValue /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `#` * * **Initial value**: `repeat` */ WebkitMaskRepeat?: ConditionalValue /** * 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 /** * 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 /** * Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `#` * * **Initial value**: `auto auto` */ WebkitMaskSize?: ConditionalValue /** * **Syntax**: `auto | touch` * * **Initial value**: `auto` */ WebkitOverflowScrolling?: ConditionalValue /** * **`-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**: `` * * **Initial value**: `black` */ WebkitTapHighlightColor?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016. * * **Syntax**: `` * * **Initial value**: `currentcolor` */ WebkitTextFillColor?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. * * **Syntax**: ` || ` */ WebkitTextStroke?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. * * **Syntax**: `` * * **Initial value**: `currentcolor` */ WebkitTextStrokeColor?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. * * **Syntax**: `` * * **Initial value**: `0` */ WebkitTextStrokeWidth?: ConditionalValue /** * 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 /** * **Syntax**: `read-only | read-write | read-write-plaintext-only` * * **Initial value**: `read-only` */ WebkitUserModify?: ConditionalValue /** * This feature is not Baseline because it does not work in some of the most widely-used browsers. * * **Syntax**: `auto | text | none | all` * * **Initial value**: `auto` */ WebkitUserSelect?: ConditionalValue /** * This feature is not Baseline because it does not work in some of the most widely-used browsers. * * **Syntax**: `auto | ` * * **Initial value**: `auto` * * | Chrome | Firefox | Safari | Edge | IE | * | :----: | :-----: | :------: | :----: | :-: | * | **93** | **92** | **15.4** | **93** | No | * * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/accent-color */ accentColor?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * * **Syntax**: `normal | | | ? ` * * **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/Reference/Properties/align-content */ alignContent?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * * **Syntax**: `normal | stretch | | [ ? ] | anchor-center` * * **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/Reference/Properties/align-items */ alignItems?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * * **Syntax**: `auto | normal | stretch | | ? | anchor-center` * * **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/Reference/Properties/align-self */ alignSelf?: ConditionalValue /** * **Syntax**: `[ normal | | | ? ]#` * * **Initial value**: `normal` */ alignTracks?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020. * * **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** | **79** | No | * * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/all */ all?: ConditionalValue /** * This feature is not Baseline because it does not work in some of the most widely-used browsers. * * **Syntax**: `none | #` * * **Initial value**: `none` * * | Chrome | Firefox | Safari | Edge | IE | * | :-----: | :---------: | :----: | :-----: | :-: | * | **125** | **preview** | **26** | **125** | No | * * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/anchor-name */ anchorName?: ConditionalValue /** * **Syntax**: `none | all | #` * * **Initial value**: `none` * * | Chrome | Firefox | Safari | Edge | IE | * | :-----: | :---------: | :----: | :-----: | :-: | * | **131** | **preview** | **26** | **131** | No | */ anchorScope?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * * **Syntax**: `#` * * | Chrome | Firefox | Safari | Edge | IE | * | :-----: | :-----: | :-----: | :----: | :----: | * | **43** | **16** | **9** | **12** | **10** | * | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | | * * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation */ animation?: ConditionalValue /** * Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. * * **Syntax**: `#` * * **Initial value**: `replace` * * | Chrome | Firefox | Safari | Edge | IE | * | :-----: | :-----: | :----: | :-----: | :-: | * | **112** | **115** | **16** | **112** | No | * * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-composition */ animationComposition?: ConditionalValue /** * This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. * * **Syntax**: `