@rarui/components 1.2.0-rc.2 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/custom-elements.json +110 -110
- package/package.json +4 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
`@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
|
|
4
4
|
|
|
5
|
+
## 2024-05-27 `1.2.0`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added the `custom-elements.json` file to the package for automatic documentation tools and web component support editors. ([#110](https://git.rarolabs.com.br/frontend/rarui/pull/110) by [@junior](https://git.rarolabs.com.br/junior))
|
|
10
|
+
|
|
5
11
|
## 2025-05-23 `1.1.0`
|
|
6
12
|
|
|
7
13
|
#### 🎉 New features
|
package/custom-elements.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.
|
|
2
|
+
"version": "1.1.0-rc.3",
|
|
3
3
|
"tags": [
|
|
4
4
|
{
|
|
5
5
|
"name": "rarui-avatar",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"attributes": [
|
|
100
100
|
{
|
|
101
101
|
"name": "color",
|
|
102
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n
|
|
102
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$brand\",\n\"md\": \"$brand-alt\",\n\"lg\": \"$currentColor\",\n\"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
103
103
|
"values": [
|
|
104
104
|
{
|
|
105
105
|
"name": "$brand"
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
},
|
|
163
163
|
{
|
|
164
164
|
"name": "font-weight",
|
|
165
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n
|
|
165
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
|
|
166
166
|
"values": [
|
|
167
167
|
{
|
|
168
168
|
"name": "$bold"
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
},
|
|
182
182
|
{
|
|
183
183
|
"name": "line-height",
|
|
184
|
-
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\nOr an object like:\n```\n{\n
|
|
184
|
+
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$l\",\n\"md\": \"$m\",\n\"lg\": \"$s\",\n\"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
|
|
185
185
|
"values": [
|
|
186
186
|
{
|
|
187
187
|
"name": "$l"
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
},
|
|
206
206
|
{
|
|
207
207
|
"name": "font-size",
|
|
208
|
-
"description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\nOr an object like:\n```\n{\n
|
|
208
|
+
"description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$l\",\n\"md\": \"$m\",\n\"lg\": \"$s\",\n\"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
|
|
209
209
|
"values": [
|
|
210
210
|
{
|
|
211
211
|
"name": "$l"
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
},
|
|
230
230
|
{
|
|
231
231
|
"name": "text-align",
|
|
232
|
-
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n
|
|
232
|
+
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"center\",\n\"md\": \"end\",\n\"lg\": \"justify\",\n\"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
|
|
233
233
|
"values": [
|
|
234
234
|
{
|
|
235
235
|
"name": "center"
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
},
|
|
257
257
|
{
|
|
258
258
|
"name": "word-break",
|
|
259
|
-
"description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\nOr an object like:\n```\n{\n
|
|
259
|
+
"description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"break-all\",\n\"md\": \"break-word\",\n\"lg\": \"keep-all\",\n\"xl\": \"normal\"\n}\n```\n\n- break-all\n- break-word\n- keep-all\n- normal",
|
|
260
260
|
"values": [
|
|
261
261
|
{
|
|
262
262
|
"name": "break-all"
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
},
|
|
275
275
|
{
|
|
276
276
|
"name": "text-transform",
|
|
277
|
-
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\nOr an object like:\n```\n{\n
|
|
277
|
+
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"capitalize\",\n\"md\": \"full-size-kana\",\n\"lg\": \"full-width\",\n\"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
|
|
278
278
|
"values": [
|
|
279
279
|
{
|
|
280
280
|
"name": "capitalize"
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
},
|
|
299
299
|
{
|
|
300
300
|
"name": "text-decoration",
|
|
301
|
-
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
301
|
+
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"blink\",\n\"lg\": \"dashed\",\n\"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
|
|
302
302
|
"values": [
|
|
303
303
|
{
|
|
304
304
|
"name": "auto"
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
},
|
|
347
347
|
{
|
|
348
348
|
"name": "text-overflow",
|
|
349
|
-
"description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\nOr an object like:\n```\n{\n
|
|
349
|
+
"description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"clip\",\n\"md\": \"ellipsis\",\n\"lg\": \"clip\",\n\"xl\": \"ellipsis\"\n}\n```\n\n- clip\n- ellipsis",
|
|
350
350
|
"values": [
|
|
351
351
|
{
|
|
352
352
|
"name": "clip"
|
|
@@ -358,7 +358,7 @@
|
|
|
358
358
|
},
|
|
359
359
|
{
|
|
360
360
|
"name": "width",
|
|
361
|
-
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
361
|
+
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"fit-content\",\n\"lg\": \"intrinsic\",\n\"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
362
362
|
"values": [
|
|
363
363
|
{
|
|
364
364
|
"name": "auto"
|
|
@@ -385,7 +385,7 @@
|
|
|
385
385
|
},
|
|
386
386
|
{
|
|
387
387
|
"name": "overflow",
|
|
388
|
-
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
388
|
+
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"clip\",\n\"lg\": \"hidden\",\n\"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
389
389
|
"values": [
|
|
390
390
|
{
|
|
391
391
|
"name": "auto"
|
|
@@ -406,7 +406,7 @@
|
|
|
406
406
|
},
|
|
407
407
|
{
|
|
408
408
|
"name": "white-space",
|
|
409
|
-
"description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\nOr an object like:\n```\n{\n
|
|
409
|
+
"description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"break-spaces\",\n\"md\": \"normal\",\n\"lg\": \"nowrap\",\n\"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
|
|
410
410
|
"values": [
|
|
411
411
|
{
|
|
412
412
|
"name": "break-spaces"
|
|
@@ -467,7 +467,7 @@
|
|
|
467
467
|
},
|
|
468
468
|
{
|
|
469
469
|
"name": "color",
|
|
470
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n
|
|
470
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$brand\",\n\"md\": \"$brand-alt\",\n\"lg\": \"$currentColor\",\n\"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
471
471
|
"values": [
|
|
472
472
|
{
|
|
473
473
|
"name": "$brand"
|
|
@@ -530,7 +530,7 @@
|
|
|
530
530
|
},
|
|
531
531
|
{
|
|
532
532
|
"name": "font-weight",
|
|
533
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n
|
|
533
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
|
|
534
534
|
"values": [
|
|
535
535
|
{
|
|
536
536
|
"name": "$bold"
|
|
@@ -549,7 +549,7 @@
|
|
|
549
549
|
},
|
|
550
550
|
{
|
|
551
551
|
"name": "font-size",
|
|
552
|
-
"description": "The fontSize property sets the size of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\nOr an object like:\n```\n{\n
|
|
552
|
+
"description": "The fontSize property sets the size of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$hero\",\n\"md\": \"$l\",\n\"lg\": \"$m\",\n\"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
|
|
553
553
|
"values": [
|
|
554
554
|
{
|
|
555
555
|
"name": "$hero"
|
|
@@ -573,7 +573,7 @@
|
|
|
573
573
|
},
|
|
574
574
|
{
|
|
575
575
|
"name": "line-height",
|
|
576
|
-
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\nOr an object like:\n```\n{\n
|
|
576
|
+
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$hero\",\n\"md\": \"$l\",\n\"lg\": \"$m\",\n\"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
|
|
577
577
|
"values": [
|
|
578
578
|
{
|
|
579
579
|
"name": "$hero"
|
|
@@ -597,7 +597,7 @@
|
|
|
597
597
|
},
|
|
598
598
|
{
|
|
599
599
|
"name": "text-align",
|
|
600
|
-
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n
|
|
600
|
+
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"center\",\n\"md\": \"end\",\n\"lg\": \"justify\",\n\"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
|
|
601
601
|
"values": [
|
|
602
602
|
{
|
|
603
603
|
"name": "center"
|
|
@@ -624,7 +624,7 @@
|
|
|
624
624
|
},
|
|
625
625
|
{
|
|
626
626
|
"name": "text-transform",
|
|
627
|
-
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\nOr an object like:\n```\n{\n
|
|
627
|
+
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"capitalize\",\n\"md\": \"full-size-kana\",\n\"lg\": \"full-width\",\n\"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
|
|
628
628
|
"values": [
|
|
629
629
|
{
|
|
630
630
|
"name": "capitalize"
|
|
@@ -648,7 +648,7 @@
|
|
|
648
648
|
},
|
|
649
649
|
{
|
|
650
650
|
"name": "text-decoration",
|
|
651
|
-
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
651
|
+
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"blink\",\n\"lg\": \"dashed\",\n\"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
|
|
652
652
|
"values": [
|
|
653
653
|
{
|
|
654
654
|
"name": "auto"
|
|
@@ -774,11 +774,11 @@
|
|
|
774
774
|
},
|
|
775
775
|
{
|
|
776
776
|
"name": "rarui-box",
|
|
777
|
-
"description": "## Rarui Box\n---\nA low-level utility component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/layout/box) for more details.",
|
|
777
|
+
"description": "## Rarui Box\n---\nA low-level `utility` component that provides stylized system accessories to allow for custom styling with theme reconfection.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/layout/box) for more details.",
|
|
778
778
|
"attributes": [
|
|
779
779
|
{
|
|
780
780
|
"name": "color",
|
|
781
|
-
"description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n
|
|
781
|
+
"description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$brand\",\n\"md\": \"$brand-alt\",\n\"lg\": \"$currentColor\",\n\"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
782
782
|
"values": [
|
|
783
783
|
{
|
|
784
784
|
"name": "$brand"
|
|
@@ -841,7 +841,7 @@
|
|
|
841
841
|
},
|
|
842
842
|
{
|
|
843
843
|
"name": "font-weight",
|
|
844
|
-
"description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n
|
|
844
|
+
"description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
|
|
845
845
|
"values": [
|
|
846
846
|
{
|
|
847
847
|
"name": "$bold"
|
|
@@ -859,7 +859,7 @@
|
|
|
859
859
|
},
|
|
860
860
|
{
|
|
861
861
|
"name": "line-height",
|
|
862
|
-
"description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\nOr an object like:\n```\n{\n
|
|
862
|
+
"description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$body-l\",\n\"md\": \"$body-m\",\n\"lg\": \"$body-s\",\n\"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
|
|
863
863
|
"values": [
|
|
864
864
|
{
|
|
865
865
|
"name": "$body-l"
|
|
@@ -919,7 +919,7 @@
|
|
|
919
919
|
},
|
|
920
920
|
{
|
|
921
921
|
"name": "m",
|
|
922
|
-
"description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
922
|
+
"description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
923
923
|
"values": [
|
|
924
924
|
{
|
|
925
925
|
"name": "$2xl"
|
|
@@ -976,7 +976,7 @@
|
|
|
976
976
|
},
|
|
977
977
|
{
|
|
978
978
|
"name": "font-size",
|
|
979
|
-
"description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\nOr an object like:\n```\n{\n
|
|
979
|
+
"description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$body-l\",\n\"md\": \"$body-m\",\n\"lg\": \"$body-s\",\n\"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
|
|
980
980
|
"values": [
|
|
981
981
|
{
|
|
982
982
|
"name": "$body-l"
|
|
@@ -1036,7 +1036,7 @@
|
|
|
1036
1036
|
},
|
|
1037
1037
|
{
|
|
1038
1038
|
"name": "text-align",
|
|
1039
|
-
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n
|
|
1039
|
+
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"center\",\n\"md\": \"end\",\n\"lg\": \"justify\",\n\"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
|
|
1040
1040
|
"values": [
|
|
1041
1041
|
{
|
|
1042
1042
|
"name": "center"
|
|
@@ -1063,7 +1063,7 @@
|
|
|
1063
1063
|
},
|
|
1064
1064
|
{
|
|
1065
1065
|
"name": "text-decoration",
|
|
1066
|
-
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
1066
|
+
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"blink\",\n\"lg\": \"dashed\",\n\"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
|
|
1067
1067
|
"values": [
|
|
1068
1068
|
{
|
|
1069
1069
|
"name": "auto"
|
|
@@ -1111,7 +1111,7 @@
|
|
|
1111
1111
|
},
|
|
1112
1112
|
{
|
|
1113
1113
|
"name": "width",
|
|
1114
|
-
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
1114
|
+
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"fit-content\",\n\"lg\": \"intrinsic\",\n\"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
1115
1115
|
"values": [
|
|
1116
1116
|
{
|
|
1117
1117
|
"name": "auto"
|
|
@@ -1138,7 +1138,7 @@
|
|
|
1138
1138
|
},
|
|
1139
1139
|
{
|
|
1140
1140
|
"name": "overflow",
|
|
1141
|
-
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
1141
|
+
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"clip\",\n\"lg\": \"hidden\",\n\"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
1142
1142
|
"values": [
|
|
1143
1143
|
{
|
|
1144
1144
|
"name": "auto"
|
|
@@ -1169,7 +1169,7 @@
|
|
|
1169
1169
|
},
|
|
1170
1170
|
{
|
|
1171
1171
|
"name": "align-content",
|
|
1172
|
-
"description": "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.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\nOr an object like:\n```\n{\n
|
|
1172
|
+
"description": "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.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"baseline\",\n\"md\": \"center\",\n\"lg\": \"end\",\n\"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
|
|
1173
1173
|
"values": [
|
|
1174
1174
|
{
|
|
1175
1175
|
"name": "baseline"
|
|
@@ -1208,7 +1208,7 @@
|
|
|
1208
1208
|
},
|
|
1209
1209
|
{
|
|
1210
1210
|
"name": "align-items",
|
|
1211
|
-
"description": "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.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\nOr an object like:\n```\n{\n
|
|
1211
|
+
"description": "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.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"baseline\",\n\"md\": \"center\",\n\"lg\": \"end\",\n\"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
|
|
1212
1212
|
"values": [
|
|
1213
1213
|
{
|
|
1214
1214
|
"name": "baseline"
|
|
@@ -1244,7 +1244,7 @@
|
|
|
1244
1244
|
},
|
|
1245
1245
|
{
|
|
1246
1246
|
"name": "align-self",
|
|
1247
|
-
"description": "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.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
1247
|
+
"description": "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.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"baseline\",\n\"lg\": \"center\",\n\"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
|
|
1248
1248
|
"values": [
|
|
1249
1249
|
{
|
|
1250
1250
|
"name": "auto"
|
|
@@ -1283,7 +1283,7 @@
|
|
|
1283
1283
|
},
|
|
1284
1284
|
{
|
|
1285
1285
|
"name": "background-blend-mode",
|
|
1286
|
-
"description": "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.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\nOr an object like:\n```\n{\n
|
|
1286
|
+
"description": "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.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"color\",\n\"md\": \"color-burn\",\n\"lg\": \"color-dodge\",\n\"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
|
|
1287
1287
|
"values": [
|
|
1288
1288
|
{
|
|
1289
1289
|
"name": "color"
|
|
@@ -1337,7 +1337,7 @@
|
|
|
1337
1337
|
},
|
|
1338
1338
|
{
|
|
1339
1339
|
"name": "background-color",
|
|
1340
|
-
"description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n
|
|
1340
|
+
"description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$background\",\n\"md\": \"$brand\",\n\"lg\": \"$brand-hover\",\n\"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
|
|
1341
1341
|
"values": [
|
|
1342
1342
|
{
|
|
1343
1343
|
"name": "$background"
|
|
@@ -1447,7 +1447,7 @@
|
|
|
1447
1447
|
},
|
|
1448
1448
|
{
|
|
1449
1449
|
"name": "background-position-x",
|
|
1450
|
-
"description": "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`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n
|
|
1450
|
+
"description": "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`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"center\",\n\"md\": \"left\",\n\"lg\": \"right\",\n\"xl\": \"x-end\"\n}\n```\n\n- center\n- left\n- right\n- x-end\n- x-start",
|
|
1451
1451
|
"values": [
|
|
1452
1452
|
{
|
|
1453
1453
|
"name": "center"
|
|
@@ -1468,7 +1468,7 @@
|
|
|
1468
1468
|
},
|
|
1469
1469
|
{
|
|
1470
1470
|
"name": "background-position-y",
|
|
1471
|
-
"description": "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`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\nOr an object like:\n```\n{\n
|
|
1471
|
+
"description": "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`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"bottom\",\n\"md\": \"center\",\n\"lg\": \"top\",\n\"xl\": \"y-end\"\n}\n```\n\n- bottom\n- center\n- top\n- y-end\n- y-start",
|
|
1472
1472
|
"values": [
|
|
1473
1473
|
{
|
|
1474
1474
|
"name": "bottom"
|
|
@@ -1489,7 +1489,7 @@
|
|
|
1489
1489
|
},
|
|
1490
1490
|
{
|
|
1491
1491
|
"name": "background-repeat",
|
|
1492
|
-
"description": "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.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\nOr an object like:\n```\n{\n
|
|
1492
|
+
"description": "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.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"no-repeat\",\n\"md\": \"repeat\",\n\"lg\": \"repeat-x\",\n\"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
|
|
1493
1493
|
"values": [
|
|
1494
1494
|
{
|
|
1495
1495
|
"name": "no-repeat"
|
|
@@ -1513,7 +1513,7 @@
|
|
|
1513
1513
|
},
|
|
1514
1514
|
{
|
|
1515
1515
|
"name": "background-size",
|
|
1516
|
-
"description": "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.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
1516
|
+
"description": "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.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"contain\",\n\"lg\": \"cover\",\n\"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
|
|
1517
1517
|
"values": [
|
|
1518
1518
|
{
|
|
1519
1519
|
"name": "auto"
|
|
@@ -1528,7 +1528,7 @@
|
|
|
1528
1528
|
},
|
|
1529
1529
|
{
|
|
1530
1530
|
"name": "border-bottom-left-radius",
|
|
1531
|
-
"description": "The borderBottomLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
1531
|
+
"description": "The borderBottomLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
1532
1532
|
"values": [
|
|
1533
1533
|
{
|
|
1534
1534
|
"name": "$2xl"
|
|
@@ -1567,7 +1567,7 @@
|
|
|
1567
1567
|
},
|
|
1568
1568
|
{
|
|
1569
1569
|
"name": "border-bottom-right-radius",
|
|
1570
|
-
"description": "The borderBottomRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
1570
|
+
"description": "The borderBottomRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
1571
1571
|
"values": [
|
|
1572
1572
|
{
|
|
1573
1573
|
"name": "$2xl"
|
|
@@ -1606,7 +1606,7 @@
|
|
|
1606
1606
|
},
|
|
1607
1607
|
{
|
|
1608
1608
|
"name": "border-bottom-width",
|
|
1609
|
-
"description": "The borderBottomWidth property defines the width of the border at the bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
1609
|
+
"description": "The borderBottomWidth property defines the width of the border at the bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
1610
1610
|
"values": [
|
|
1611
1611
|
{
|
|
1612
1612
|
"name": "$1"
|
|
@@ -1630,7 +1630,7 @@
|
|
|
1630
1630
|
},
|
|
1631
1631
|
{
|
|
1632
1632
|
"name": "border-left-width",
|
|
1633
|
-
"description": "The borderLeftWidth property defines the width of the border at the left of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
1633
|
+
"description": "The borderLeftWidth property defines the width of the border at the left of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
1634
1634
|
"values": [
|
|
1635
1635
|
{
|
|
1636
1636
|
"name": "$1"
|
|
@@ -1654,7 +1654,7 @@
|
|
|
1654
1654
|
},
|
|
1655
1655
|
{
|
|
1656
1656
|
"name": "border-right-width",
|
|
1657
|
-
"description": "The borderRightWidth property defines the width of the border at the right of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
1657
|
+
"description": "The borderRightWidth property defines the width of the border at the right of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
1658
1658
|
"values": [
|
|
1659
1659
|
{
|
|
1660
1660
|
"name": "$1"
|
|
@@ -1678,7 +1678,7 @@
|
|
|
1678
1678
|
},
|
|
1679
1679
|
{
|
|
1680
1680
|
"name": "border-top-left-radius",
|
|
1681
|
-
"description": "The borderTopLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
1681
|
+
"description": "The borderTopLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
1682
1682
|
"values": [
|
|
1683
1683
|
{
|
|
1684
1684
|
"name": "$2xl"
|
|
@@ -1717,7 +1717,7 @@
|
|
|
1717
1717
|
},
|
|
1718
1718
|
{
|
|
1719
1719
|
"name": "border-top-right-radius",
|
|
1720
|
-
"description": "The borderTopRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
1720
|
+
"description": "The borderTopRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
1721
1721
|
"values": [
|
|
1722
1722
|
{
|
|
1723
1723
|
"name": "$2xl"
|
|
@@ -1756,7 +1756,7 @@
|
|
|
1756
1756
|
},
|
|
1757
1757
|
{
|
|
1758
1758
|
"name": "border-top-width",
|
|
1759
|
-
"description": "The borderTopWidth property defines the width of the border at the top of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
1759
|
+
"description": "The borderTopWidth property defines the width of the border at the top of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
1760
1760
|
"values": [
|
|
1761
1761
|
{
|
|
1762
1762
|
"name": "$1"
|
|
@@ -1785,7 +1785,7 @@
|
|
|
1785
1785
|
},
|
|
1786
1786
|
{
|
|
1787
1787
|
"name": "box-shadow",
|
|
1788
|
-
"description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\nOr an object like:\n```\n{\n
|
|
1788
|
+
"description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bottom-1\",\n\"md\": \"$bottom-2\",\n\"lg\": \"$bottom-3\",\n\"xl\": \"$bottom-4\"\n}\n```\n\n- $bottom-1\n- $bottom-2\n- $bottom-3\n- $bottom-4\n- $bottom-5\n- $none\n- $top-1\n- $top-2\n- $top-3\n- $top-4\n- $top-5",
|
|
1789
1789
|
"values": [
|
|
1790
1790
|
{
|
|
1791
1791
|
"name": "$bottom-1"
|
|
@@ -1824,7 +1824,7 @@
|
|
|
1824
1824
|
},
|
|
1825
1825
|
{
|
|
1826
1826
|
"name": "box-sizing",
|
|
1827
|
-
"description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\nOr an object like:\n```\n{\n
|
|
1827
|
+
"description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"border-box\",\n\"md\": \"content-box\",\n\"lg\": \"border-box\",\n\"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
|
|
1828
1828
|
"values": [
|
|
1829
1829
|
{
|
|
1830
1830
|
"name": "border-box"
|
|
@@ -1836,7 +1836,7 @@
|
|
|
1836
1836
|
},
|
|
1837
1837
|
{
|
|
1838
1838
|
"name": "cursor",
|
|
1839
|
-
"description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\nOr an object like:\n```\n{\n
|
|
1839
|
+
"description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"alias\",\n\"md\": \"all-scroll\",\n\"lg\": \"auto\",\n\"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
|
|
1840
1840
|
"values": [
|
|
1841
1841
|
{
|
|
1842
1842
|
"name": "alias"
|
|
@@ -1950,7 +1950,7 @@
|
|
|
1950
1950
|
},
|
|
1951
1951
|
{
|
|
1952
1952
|
"name": "display",
|
|
1953
|
-
"description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\nOr an object like:\n```\n{\n
|
|
1953
|
+
"description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"block\",\n\"md\": \"contents\",\n\"lg\": \"flex\",\n\"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
|
|
1954
1954
|
"values": [
|
|
1955
1955
|
{
|
|
1956
1956
|
"name": "block"
|
|
@@ -2043,7 +2043,7 @@
|
|
|
2043
2043
|
},
|
|
2044
2044
|
{
|
|
2045
2045
|
"name": "flex-basis",
|
|
2046
|
-
"description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2046
|
+
"description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"content\",\n\"lg\": \"fit-content\",\n\"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
|
|
2047
2047
|
"values": [
|
|
2048
2048
|
{
|
|
2049
2049
|
"name": "auto"
|
|
@@ -2067,7 +2067,7 @@
|
|
|
2067
2067
|
},
|
|
2068
2068
|
{
|
|
2069
2069
|
"name": "flex-direction",
|
|
2070
|
-
"description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\nOr an object like:\n```\n{\n
|
|
2070
|
+
"description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"column\",\n\"md\": \"column-reverse\",\n\"lg\": \"row\",\n\"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
|
|
2071
2071
|
"values": [
|
|
2072
2072
|
{
|
|
2073
2073
|
"name": "column"
|
|
@@ -2095,7 +2095,7 @@
|
|
|
2095
2095
|
},
|
|
2096
2096
|
{
|
|
2097
2097
|
"name": "flex-wrap",
|
|
2098
|
-
"description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\nOr an object like:\n```\n{\n
|
|
2098
|
+
"description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"nowrap\",\n\"md\": \"wrap\",\n\"lg\": \"wrap-reverse\",\n\"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
|
|
2099
2099
|
"values": [
|
|
2100
2100
|
{
|
|
2101
2101
|
"name": "nowrap"
|
|
@@ -2110,7 +2110,7 @@
|
|
|
2110
2110
|
},
|
|
2111
2111
|
{
|
|
2112
2112
|
"name": "font-family",
|
|
2113
|
-
"description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\nOr an object like:\n```\n{\n
|
|
2113
|
+
"description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$body\",\n\"md\": \"$button\",\n\"lg\": \"$heading\",\n\"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
|
|
2114
2114
|
"values": [
|
|
2115
2115
|
{
|
|
2116
2116
|
"name": "$body"
|
|
@@ -2130,7 +2130,7 @@
|
|
|
2130
2130
|
},
|
|
2131
2131
|
{
|
|
2132
2132
|
"name": "grid-template-columns",
|
|
2133
|
-
"description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2133
|
+
"description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"max-content\",\n\"lg\": \"min-content\",\n\"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
|
|
2134
2134
|
"values": [
|
|
2135
2135
|
{
|
|
2136
2136
|
"name": "auto"
|
|
@@ -2151,7 +2151,7 @@
|
|
|
2151
2151
|
},
|
|
2152
2152
|
{
|
|
2153
2153
|
"name": "grid-template-rows",
|
|
2154
|
-
"description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2154
|
+
"description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"max-content\",\n\"lg\": \"min-content\",\n\"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
|
|
2155
2155
|
"values": [
|
|
2156
2156
|
{
|
|
2157
2157
|
"name": "auto"
|
|
@@ -2172,7 +2172,7 @@
|
|
|
2172
2172
|
},
|
|
2173
2173
|
{
|
|
2174
2174
|
"name": "height",
|
|
2175
|
-
"description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2175
|
+
"description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"fit-content\",\n\"lg\": \"max-content\",\n\"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
|
|
2176
2176
|
"values": [
|
|
2177
2177
|
{
|
|
2178
2178
|
"name": "auto"
|
|
@@ -2193,7 +2193,7 @@
|
|
|
2193
2193
|
},
|
|
2194
2194
|
{
|
|
2195
2195
|
"name": "justify-content",
|
|
2196
|
-
"description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n
|
|
2196
|
+
"description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"center\",\n\"md\": \"end\",\n\"lg\": \"flex-end\",\n\"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
|
|
2197
2197
|
"values": [
|
|
2198
2198
|
{
|
|
2199
2199
|
"name": "center"
|
|
@@ -2235,7 +2235,7 @@
|
|
|
2235
2235
|
},
|
|
2236
2236
|
{
|
|
2237
2237
|
"name": "justify-items",
|
|
2238
|
-
"description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\nOr an object like:\n```\n{\n
|
|
2238
|
+
"description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"baseline\",\n\"md\": \"center\",\n\"lg\": \"end\",\n\"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
|
|
2239
2239
|
"values": [
|
|
2240
2240
|
{
|
|
2241
2241
|
"name": "baseline"
|
|
@@ -2280,7 +2280,7 @@
|
|
|
2280
2280
|
},
|
|
2281
2281
|
{
|
|
2282
2282
|
"name": "margin-bottom",
|
|
2283
|
-
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2283
|
+
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2284
2284
|
"values": [
|
|
2285
2285
|
{
|
|
2286
2286
|
"name": "$2xl"
|
|
@@ -2337,7 +2337,7 @@
|
|
|
2337
2337
|
},
|
|
2338
2338
|
{
|
|
2339
2339
|
"name": "margin-left",
|
|
2340
|
-
"description": "The marginLeft property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2340
|
+
"description": "The marginLeft property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2341
2341
|
"values": [
|
|
2342
2342
|
{
|
|
2343
2343
|
"name": "$2xl"
|
|
@@ -2394,7 +2394,7 @@
|
|
|
2394
2394
|
},
|
|
2395
2395
|
{
|
|
2396
2396
|
"name": "margin-right",
|
|
2397
|
-
"description": "The marginRight property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2397
|
+
"description": "The marginRight property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2398
2398
|
"values": [
|
|
2399
2399
|
{
|
|
2400
2400
|
"name": "$2xl"
|
|
@@ -2451,7 +2451,7 @@
|
|
|
2451
2451
|
},
|
|
2452
2452
|
{
|
|
2453
2453
|
"name": "margin-top",
|
|
2454
|
-
"description": "The marginTop property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2454
|
+
"description": "The marginTop property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2455
2455
|
"values": [
|
|
2456
2456
|
{
|
|
2457
2457
|
"name": "$2xl"
|
|
@@ -2508,7 +2508,7 @@
|
|
|
2508
2508
|
},
|
|
2509
2509
|
{
|
|
2510
2510
|
"name": "max-height",
|
|
2511
|
-
"description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\nOr an object like:\n```\n{\n
|
|
2511
|
+
"description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"fit-content\",\n\"md\": \"intrinsic\",\n\"lg\": \"max-content\",\n\"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
|
|
2512
2512
|
"values": [
|
|
2513
2513
|
{
|
|
2514
2514
|
"name": "fit-content"
|
|
@@ -2532,7 +2532,7 @@
|
|
|
2532
2532
|
},
|
|
2533
2533
|
{
|
|
2534
2534
|
"name": "max-width",
|
|
2535
|
-
"description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\nOr an object like:\n```\n{\n
|
|
2535
|
+
"description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"fit-content\",\n\"md\": \"intrinsic\",\n\"lg\": \"max-content\",\n\"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
|
|
2536
2536
|
"values": [
|
|
2537
2537
|
{
|
|
2538
2538
|
"name": "fit-content"
|
|
@@ -2556,7 +2556,7 @@
|
|
|
2556
2556
|
},
|
|
2557
2557
|
{
|
|
2558
2558
|
"name": "min-height",
|
|
2559
|
-
"description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2559
|
+
"description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"fit-content\",\n\"lg\": \"intrinsic\",\n\"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
|
|
2560
2560
|
"values": [
|
|
2561
2561
|
{
|
|
2562
2562
|
"name": "auto"
|
|
@@ -2580,7 +2580,7 @@
|
|
|
2580
2580
|
},
|
|
2581
2581
|
{
|
|
2582
2582
|
"name": "min-width",
|
|
2583
|
-
"description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2583
|
+
"description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"fit-content\",\n\"lg\": \"intrinsic\",\n\"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
2584
2584
|
"values": [
|
|
2585
2585
|
{
|
|
2586
2586
|
"name": "auto"
|
|
@@ -2617,7 +2617,7 @@
|
|
|
2617
2617
|
},
|
|
2618
2618
|
{
|
|
2619
2619
|
"name": "overflow-x",
|
|
2620
|
-
"description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2620
|
+
"description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"clip\",\n\"lg\": \"hidden\",\n\"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
2621
2621
|
"values": [
|
|
2622
2622
|
{
|
|
2623
2623
|
"name": "auto"
|
|
@@ -2638,7 +2638,7 @@
|
|
|
2638
2638
|
},
|
|
2639
2639
|
{
|
|
2640
2640
|
"name": "overflow-y",
|
|
2641
|
-
"description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
2641
|
+
"description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"clip\",\n\"lg\": \"hidden\",\n\"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
2642
2642
|
"values": [
|
|
2643
2643
|
{
|
|
2644
2644
|
"name": "auto"
|
|
@@ -2659,7 +2659,7 @@
|
|
|
2659
2659
|
},
|
|
2660
2660
|
{
|
|
2661
2661
|
"name": "padding-bottom",
|
|
2662
|
-
"description": "The paddingBottom property sets the height of the padding area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2662
|
+
"description": "The paddingBottom property sets the height of the padding area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2663
2663
|
"values": [
|
|
2664
2664
|
{
|
|
2665
2665
|
"name": "$2xl"
|
|
@@ -2713,7 +2713,7 @@
|
|
|
2713
2713
|
},
|
|
2714
2714
|
{
|
|
2715
2715
|
"name": "padding-left",
|
|
2716
|
-
"description": "The paddingLeft property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2716
|
+
"description": "The paddingLeft property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2717
2717
|
"values": [
|
|
2718
2718
|
{
|
|
2719
2719
|
"name": "$2xl"
|
|
@@ -2767,7 +2767,7 @@
|
|
|
2767
2767
|
},
|
|
2768
2768
|
{
|
|
2769
2769
|
"name": "padding-right",
|
|
2770
|
-
"description": "The paddingLeft property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2770
|
+
"description": "The paddingLeft property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2771
2771
|
"values": [
|
|
2772
2772
|
{
|
|
2773
2773
|
"name": "$2xl"
|
|
@@ -2821,7 +2821,7 @@
|
|
|
2821
2821
|
},
|
|
2822
2822
|
{
|
|
2823
2823
|
"name": "padding-top",
|
|
2824
|
-
"description": "The paddingTop property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
2824
|
+
"description": "The paddingTop property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
2825
2825
|
"values": [
|
|
2826
2826
|
{
|
|
2827
2827
|
"name": "$2xl"
|
|
@@ -2875,7 +2875,7 @@
|
|
|
2875
2875
|
},
|
|
2876
2876
|
{
|
|
2877
2877
|
"name": "pointer-events",
|
|
2878
|
-
"description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\nOr an object like:\n```\n{\n
|
|
2878
|
+
"description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"all\",\n\"md\": \"auto\",\n\"lg\": \"fill\",\n\"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
|
|
2879
2879
|
"values": [
|
|
2880
2880
|
{
|
|
2881
2881
|
"name": "all"
|
|
@@ -2914,7 +2914,7 @@
|
|
|
2914
2914
|
},
|
|
2915
2915
|
{
|
|
2916
2916
|
"name": "position",
|
|
2917
|
-
"description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\nOr an object like:\n```\n{\n
|
|
2917
|
+
"description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"absolute\",\n\"md\": \"fixed\",\n\"lg\": \"relative\",\n\"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
|
|
2918
2918
|
"values": [
|
|
2919
2919
|
{
|
|
2920
2920
|
"name": "absolute"
|
|
@@ -2945,7 +2945,7 @@
|
|
|
2945
2945
|
},
|
|
2946
2946
|
{
|
|
2947
2947
|
"name": "transition-property",
|
|
2948
|
-
"description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\nOr an object like:\n```\n{\n
|
|
2948
|
+
"description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"all\",\n\"md\": \"none\",\n\"lg\": \"all\",\n\"xl\": \"none\"\n}\n```\n\n- all\n- none",
|
|
2949
2949
|
"values": [
|
|
2950
2950
|
{
|
|
2951
2951
|
"name": "all"
|
|
@@ -2957,7 +2957,7 @@
|
|
|
2957
2957
|
},
|
|
2958
2958
|
{
|
|
2959
2959
|
"name": "transition-timing-function",
|
|
2960
|
-
"description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\nOr an object like:\n```\n{\n
|
|
2960
|
+
"description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"ease\",\n\"md\": \"ease-in\",\n\"lg\": \"ease-in-out\",\n\"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
|
|
2961
2961
|
"values": [
|
|
2962
2962
|
{
|
|
2963
2963
|
"name": "ease"
|
|
@@ -2984,7 +2984,7 @@
|
|
|
2984
2984
|
},
|
|
2985
2985
|
{
|
|
2986
2986
|
"name": "z-index",
|
|
2987
|
-
"description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\nOr an object like:\n```\n{\n
|
|
2987
|
+
"description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$100\",\n\"md\": \"$200\",\n\"lg\": \"$300\",\n\"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
|
|
2988
2988
|
"values": [
|
|
2989
2989
|
{
|
|
2990
2990
|
"name": "$100"
|
|
@@ -3017,7 +3017,7 @@
|
|
|
3017
3017
|
},
|
|
3018
3018
|
{
|
|
3019
3019
|
"name": "background-position",
|
|
3020
|
-
"description": "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`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\nOr an object like:\n```\n{\n
|
|
3020
|
+
"description": "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`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"bottom\",\n\"md\": \"center\",\n\"lg\": \"left\",\n\"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
|
|
3021
3021
|
"values": [
|
|
3022
3022
|
{
|
|
3023
3023
|
"name": "bottom"
|
|
@@ -3038,7 +3038,7 @@
|
|
|
3038
3038
|
},
|
|
3039
3039
|
{
|
|
3040
3040
|
"name": "border-color",
|
|
3041
|
-
"description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n
|
|
3041
|
+
"description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$brand\",\n\"md\": \"$brand-alt\",\n\"lg\": \"$disabled\",\n\"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
|
|
3042
3042
|
"values": [
|
|
3043
3043
|
{
|
|
3044
3044
|
"name": "$brand"
|
|
@@ -3086,7 +3086,7 @@
|
|
|
3086
3086
|
},
|
|
3087
3087
|
{
|
|
3088
3088
|
"name": "border-radius",
|
|
3089
|
-
"description": "The borderRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3089
|
+
"description": "The borderRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$button\",\n\"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
3090
3090
|
"values": [
|
|
3091
3091
|
{
|
|
3092
3092
|
"name": "$2xl"
|
|
@@ -3125,7 +3125,7 @@
|
|
|
3125
3125
|
},
|
|
3126
3126
|
{
|
|
3127
3127
|
"name": "border-style",
|
|
3128
|
-
"description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\nOr an object like:\n```\n{\n
|
|
3128
|
+
"description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"dashed\",\n\"md\": \"dotted\",\n\"lg\": \"double\",\n\"xl\": \"groove\"\n}\n```\n\n- dashed\n- dotted\n- double\n- groove\n- hidden\n- inset\n- none\n- outset\n- ridge\n- solid",
|
|
3129
3129
|
"values": [
|
|
3130
3130
|
{
|
|
3131
3131
|
"name": "dashed"
|
|
@@ -3161,7 +3161,7 @@
|
|
|
3161
3161
|
},
|
|
3162
3162
|
{
|
|
3163
3163
|
"name": "border-width",
|
|
3164
|
-
"description": "The borderWidth property sets the width of an box's border.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
3164
|
+
"description": "The borderWidth property sets the width of an box's border.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3165
3165
|
"values": [
|
|
3166
3166
|
{
|
|
3167
3167
|
"name": "$1"
|
|
@@ -3185,7 +3185,7 @@
|
|
|
3185
3185
|
},
|
|
3186
3186
|
{
|
|
3187
3187
|
"name": "flex",
|
|
3188
|
-
"description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n
|
|
3188
|
+
"description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"auto\",\n\"md\": \"content\",\n\"lg\": \"fit-content\",\n\"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
|
|
3189
3189
|
"values": [
|
|
3190
3190
|
{
|
|
3191
3191
|
"name": "auto"
|
|
@@ -3212,7 +3212,7 @@
|
|
|
3212
3212
|
},
|
|
3213
3213
|
{
|
|
3214
3214
|
"name": "flex-flow",
|
|
3215
|
-
"description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\nOr an object like:\n```\n{\n
|
|
3215
|
+
"description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"column\",\n\"md\": \"column-reverse\",\n\"lg\": \"nowrap\",\n\"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
|
|
3216
3216
|
"values": [
|
|
3217
3217
|
{
|
|
3218
3218
|
"name": "column"
|
|
@@ -3239,7 +3239,7 @@
|
|
|
3239
3239
|
},
|
|
3240
3240
|
{
|
|
3241
3241
|
"name": "gap",
|
|
3242
|
-
"description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3242
|
+
"description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3243
3243
|
"values": [
|
|
3244
3244
|
{
|
|
3245
3245
|
"name": "$2xl"
|
|
@@ -3298,7 +3298,7 @@
|
|
|
3298
3298
|
},
|
|
3299
3299
|
{
|
|
3300
3300
|
"name": "margin",
|
|
3301
|
-
"description": "The margin shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3301
|
+
"description": "The margin shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3302
3302
|
"values": [
|
|
3303
3303
|
{
|
|
3304
3304
|
"name": "$2xl"
|
|
@@ -3355,7 +3355,7 @@
|
|
|
3355
3355
|
},
|
|
3356
3356
|
{
|
|
3357
3357
|
"name": "padding",
|
|
3358
|
-
"description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3358
|
+
"description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3359
3359
|
"values": [
|
|
3360
3360
|
{
|
|
3361
3361
|
"name": "$2xl"
|
|
@@ -3409,7 +3409,7 @@
|
|
|
3409
3409
|
},
|
|
3410
3410
|
{
|
|
3411
3411
|
"name": "fill",
|
|
3412
|
-
"description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n
|
|
3412
|
+
"description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$background\",\n\"md\": \"$brand\",\n\"lg\": \"$brand-hover\",\n\"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $currentColor\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
|
|
3413
3413
|
"values": [
|
|
3414
3414
|
{
|
|
3415
3415
|
"name": "$background"
|
|
@@ -3517,7 +3517,7 @@
|
|
|
3517
3517
|
},
|
|
3518
3518
|
{
|
|
3519
3519
|
"name": "grid-gap",
|
|
3520
|
-
"description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3520
|
+
"description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3521
3521
|
"values": [
|
|
3522
3522
|
{
|
|
3523
3523
|
"name": "$2xl"
|
|
@@ -3571,7 +3571,7 @@
|
|
|
3571
3571
|
},
|
|
3572
3572
|
{
|
|
3573
3573
|
"name": "border-width-x",
|
|
3574
|
-
"description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
3574
|
+
"description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3575
3575
|
"values": [
|
|
3576
3576
|
{
|
|
3577
3577
|
"name": "$1"
|
|
@@ -3595,7 +3595,7 @@
|
|
|
3595
3595
|
},
|
|
3596
3596
|
{
|
|
3597
3597
|
"name": "border-width-y",
|
|
3598
|
-
"description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n
|
|
3598
|
+
"description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$3\",\n\"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3599
3599
|
"values": [
|
|
3600
3600
|
{
|
|
3601
3601
|
"name": "$1"
|
|
@@ -3619,7 +3619,7 @@
|
|
|
3619
3619
|
},
|
|
3620
3620
|
{
|
|
3621
3621
|
"name": "padding-x",
|
|
3622
|
-
"description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3622
|
+
"description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3623
3623
|
"values": [
|
|
3624
3624
|
{
|
|
3625
3625
|
"name": "$2xl"
|
|
@@ -3673,7 +3673,7 @@
|
|
|
3673
3673
|
},
|
|
3674
3674
|
{
|
|
3675
3675
|
"name": "padding-y",
|
|
3676
|
-
"description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3676
|
+
"description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3677
3677
|
"values": [
|
|
3678
3678
|
{
|
|
3679
3679
|
"name": "$2xl"
|
|
@@ -3727,7 +3727,7 @@
|
|
|
3727
3727
|
},
|
|
3728
3728
|
{
|
|
3729
3729
|
"name": "p",
|
|
3730
|
-
"description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3730
|
+
"description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3731
3731
|
"values": [
|
|
3732
3732
|
{
|
|
3733
3733
|
"name": "$2xl"
|
|
@@ -3781,7 +3781,7 @@
|
|
|
3781
3781
|
},
|
|
3782
3782
|
{
|
|
3783
3783
|
"name": "pl",
|
|
3784
|
-
"description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3784
|
+
"description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3785
3785
|
"values": [
|
|
3786
3786
|
{
|
|
3787
3787
|
"name": "$2xl"
|
|
@@ -3835,7 +3835,7 @@
|
|
|
3835
3835
|
},
|
|
3836
3836
|
{
|
|
3837
3837
|
"name": "pr",
|
|
3838
|
-
"description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3838
|
+
"description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3839
3839
|
"values": [
|
|
3840
3840
|
{
|
|
3841
3841
|
"name": "$2xl"
|
|
@@ -3889,7 +3889,7 @@
|
|
|
3889
3889
|
},
|
|
3890
3890
|
{
|
|
3891
3891
|
"name": "pt",
|
|
3892
|
-
"description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3892
|
+
"description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3893
3893
|
"values": [
|
|
3894
3894
|
{
|
|
3895
3895
|
"name": "$2xl"
|
|
@@ -3943,7 +3943,7 @@
|
|
|
3943
3943
|
},
|
|
3944
3944
|
{
|
|
3945
3945
|
"name": "pb",
|
|
3946
|
-
"description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
3946
|
+
"description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3947
3947
|
"values": [
|
|
3948
3948
|
{
|
|
3949
3949
|
"name": "$2xl"
|
|
@@ -3997,7 +3997,7 @@
|
|
|
3997
3997
|
},
|
|
3998
3998
|
{
|
|
3999
3999
|
"name": "px",
|
|
4000
|
-
"description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4000
|
+
"description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4001
4001
|
"values": [
|
|
4002
4002
|
{
|
|
4003
4003
|
"name": "$2xl"
|
|
@@ -4051,7 +4051,7 @@
|
|
|
4051
4051
|
},
|
|
4052
4052
|
{
|
|
4053
4053
|
"name": "py",
|
|
4054
|
-
"description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4054
|
+
"description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4055
4055
|
"values": [
|
|
4056
4056
|
{
|
|
4057
4057
|
"name": "$2xl"
|
|
@@ -4105,7 +4105,7 @@
|
|
|
4105
4105
|
},
|
|
4106
4106
|
{
|
|
4107
4107
|
"name": "margin-x",
|
|
4108
|
-
"description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4108
|
+
"description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4109
4109
|
"values": [
|
|
4110
4110
|
{
|
|
4111
4111
|
"name": "$2xl"
|
|
@@ -4162,7 +4162,7 @@
|
|
|
4162
4162
|
},
|
|
4163
4163
|
{
|
|
4164
4164
|
"name": "margin-y",
|
|
4165
|
-
"description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4165
|
+
"description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4166
4166
|
"values": [
|
|
4167
4167
|
{
|
|
4168
4168
|
"name": "$2xl"
|
|
@@ -4219,7 +4219,7 @@
|
|
|
4219
4219
|
},
|
|
4220
4220
|
{
|
|
4221
4221
|
"name": "mr",
|
|
4222
|
-
"description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4222
|
+
"description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4223
4223
|
"values": [
|
|
4224
4224
|
{
|
|
4225
4225
|
"name": "$2xl"
|
|
@@ -4276,7 +4276,7 @@
|
|
|
4276
4276
|
},
|
|
4277
4277
|
{
|
|
4278
4278
|
"name": "ml",
|
|
4279
|
-
"description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4279
|
+
"description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4280
4280
|
"values": [
|
|
4281
4281
|
{
|
|
4282
4282
|
"name": "$2xl"
|
|
@@ -4333,7 +4333,7 @@
|
|
|
4333
4333
|
},
|
|
4334
4334
|
{
|
|
4335
4335
|
"name": "mt",
|
|
4336
|
-
"description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4336
|
+
"description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4337
4337
|
"values": [
|
|
4338
4338
|
{
|
|
4339
4339
|
"name": "$2xl"
|
|
@@ -4390,7 +4390,7 @@
|
|
|
4390
4390
|
},
|
|
4391
4391
|
{
|
|
4392
4392
|
"name": "mb",
|
|
4393
|
-
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4393
|
+
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4394
4394
|
"values": [
|
|
4395
4395
|
{
|
|
4396
4396
|
"name": "$2xl"
|
|
@@ -4447,7 +4447,7 @@
|
|
|
4447
4447
|
},
|
|
4448
4448
|
{
|
|
4449
4449
|
"name": "mx",
|
|
4450
|
-
"description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4450
|
+
"description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4451
4451
|
"values": [
|
|
4452
4452
|
{
|
|
4453
4453
|
"name": "$2xl"
|
|
@@ -4504,7 +4504,7 @@
|
|
|
4504
4504
|
},
|
|
4505
4505
|
{
|
|
4506
4506
|
"name": "my",
|
|
4507
|
-
"description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n
|
|
4507
|
+
"description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$2xl\",\n\"md\": \"$2xs\",\n\"lg\": \"$3xl\",\n\"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
4508
4508
|
"values": [
|
|
4509
4509
|
{
|
|
4510
4510
|
"name": "$2xl"
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rarui/components",
|
|
3
|
-
"version": "1.2.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"
|
|
8
|
-
"collection:main": "dist/collection/index.js",
|
|
7
|
+
"customElements": "./custom-elements.json",
|
|
9
8
|
"files": [
|
|
10
9
|
"dist",
|
|
11
10
|
"README.md",
|
|
@@ -14,7 +13,7 @@
|
|
|
14
13
|
],
|
|
15
14
|
"sideEffects": false,
|
|
16
15
|
"scripts": {
|
|
17
|
-
"build": "rm -rf dist && yarn g:rollup packages/implementations/web-components",
|
|
16
|
+
"build": "rm -rf dist && yarn analyze && yarn g:rollup packages/implementations/web-components",
|
|
18
17
|
"clean": "rm -rf dist && rm -rf storybook-static",
|
|
19
18
|
"version": "yarn version",
|
|
20
19
|
"analyze": "yarn g:generate:manifest .",
|
|
@@ -33,6 +32,5 @@
|
|
|
33
32
|
"devDependencies": {
|
|
34
33
|
"@rarui/rollup": "workspace:^",
|
|
35
34
|
"@rarui/styles": "workspace:^"
|
|
36
|
-
}
|
|
37
|
-
"stableVersion": "1.1.0"
|
|
35
|
+
}
|
|
38
36
|
}
|