@discourser/design-system 0.2.1 → 0.3.0

package/styled-system/types/prop-type.d.ts

@@ -53,6 +53,7 @@ export interface UtilityValues {
 	marginInlineStart: "auto" | Tokens["spacing"];
 	spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
 	spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
+	outlineWidth: Tokens["borderWidths"];
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
@@ -60,8 +61,10 @@ export interface UtilityValues {
 	focusVisibleRing: "outside" | "inside" | "mixed" | "none";
 	focusRingColor: Tokens["colors"];
 	focusRingOffset: Tokens["spacing"];
-	focusRingWidth: CssProperties["outlineWidth"];
+	focusRingWidth: Tokens["borderWidths"] | CssProperties["outlineWidth"];
 	focusRingStyle: CssProperties["outlineStyle"];
+	divideX: Tokens["borderWidths"];
+	divideY: Tokens["borderWidths"];
 	divideColor: Tokens["colors"];
 	divideStyle: CssProperties["borderStyle"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -116,18 +119,29 @@ export interface UtilityValues {
 	borderEndEndRadius: Tokens["radii"];
 	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
 	border: Tokens["borders"];
+	borderWidth: Tokens["borderWidths"];
+	borderTopWidth: Tokens["borderWidths"];
+	borderLeftWidth: Tokens["borderWidths"];
+	borderRightWidth: Tokens["borderWidths"];
+	borderBottomWidth: Tokens["borderWidths"];
+	borderBlockStartWidth: Tokens["borderWidths"];
+	borderBlockEndWidth: Tokens["borderWidths"];
 	borderColor: Tokens["colors"];
 	borderInline: Tokens["borders"];
+	borderInlineWidth: Tokens["borderWidths"];
 	borderInlineColor: Tokens["colors"];
 	borderBlock: Tokens["borders"];
+	borderBlockWidth: Tokens["borderWidths"];
 	borderBlockColor: Tokens["colors"];
 	borderLeft: Tokens["borders"];
 	borderLeftColor: Tokens["colors"];
 	borderInlineStart: Tokens["borders"];
+	borderInlineStartWidth: Tokens["borderWidths"];
 	borderInlineStartColor: Tokens["colors"];
 	borderRight: Tokens["borders"];
 	borderRightColor: Tokens["colors"];
 	borderInlineEnd: Tokens["borders"];
+	borderInlineEndWidth: Tokens["borderWidths"];
 	borderInlineEndColor: Tokens["colors"];
 	borderTop: Tokens["borders"];
 	borderTopColor: Tokens["colors"];
@@ -201,6 +215,7 @@ export interface UtilityValues {
 	scrollSnapMarginRight: Tokens["spacing"];
 	fill: Tokens["colors"];
 	stroke: Tokens["colors"];
+	strokeWidth: Tokens["borderWidths"];
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];

package/styled-system/types/style-props.d.ts

@@ -854,7 +854,7 @@ borderBlockEndStyle?: ConditionalValue<CssVars | CssProperties["borderBlockEndSt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-width
    */
-borderBlockEndWidth?: ConditionalValue<CssProperties["borderBlockEndWidth"] | AnyString>
+borderBlockEndWidth?: ConditionalValue<UtilityValues["borderBlockEndWidth"] | CssVars | CssProperties["borderBlockEndWidth"] | AnyString>
  /**
    * The **`border-block-start`** CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
    *
@@ -908,7 +908,7 @@ borderBlockStartStyle?: ConditionalValue<CssVars | CssProperties["borderBlockSta
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-width
    */
-borderBlockStartWidth?: ConditionalValue<CssProperties["borderBlockStartWidth"] | AnyString>
+borderBlockStartWidth?: ConditionalValue<UtilityValues["borderBlockStartWidth"] | CssVars | CssProperties["borderBlockStartWidth"] | AnyString>
  /**
    * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -936,7 +936,7 @@ borderBlockStyle?: ConditionalValue<CssVars | CssProperties["borderBlockStyle"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
    */
-borderBlockWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyString>
+borderBlockWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"] | AnyString>
  /**
    * The **`border-bottom`** shorthand CSS property sets an element's bottom border. It sets the values of `border-bottom-width`, `border-bottom-style` and `border-bottom-color`.
    *
@@ -1020,7 +1020,7 @@ borderBottomStyle?: ConditionalValue<CssVars | CssProperties["borderBottomStyle"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-width
    */
-borderBottomWidth?: ConditionalValue<CssProperties["borderBottomWidth"] | AnyString>
+borderBottomWidth?: ConditionalValue<UtilityValues["borderBottomWidth"] | CssVars | CssProperties["borderBottomWidth"] | AnyString>
  /**
    * The **`border-collapse`** CSS property sets whether cells inside a `<table>` have shared or separate borders.
    *
@@ -1240,7 +1240,7 @@ borderInlineEndStyle?: ConditionalValue<CssVars | CssProperties["borderInlineEnd
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width
    */
-borderInlineEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] | AnyString>
+borderInlineEndWidth?: ConditionalValue<UtilityValues["borderInlineEndWidth"] | CssVars | CssProperties["borderInlineEndWidth"] | AnyString>
  /**
    * The **`border-inline-start`** CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.
    *
@@ -1296,7 +1296,7 @@ borderInlineStartStyle?: ConditionalValue<CssVars | CssProperties["borderInlineS
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
    */
-borderInlineStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"] | AnyString>
+borderInlineStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"] | AnyString>
  /**
    * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1324,7 +1324,7 @@ borderInlineStyle?: ConditionalValue<CssVars | CssProperties["borderInlineStyle"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
    */
-borderInlineWidth?: ConditionalValue<CssProperties["borderInlineWidth"] | AnyString>
+borderInlineWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"] | AnyString>
  /**
    * The **`border-left`** shorthand CSS property sets all the properties of an element's left border.
    *
@@ -1378,7 +1378,7 @@ borderLeftStyle?: ConditionalValue<CssVars | CssProperties["borderLeftStyle"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-left-width
    */
-borderLeftWidth?: ConditionalValue<CssProperties["borderLeftWidth"] | AnyString>
+borderLeftWidth?: ConditionalValue<UtilityValues["borderLeftWidth"] | CssVars | CssProperties["borderLeftWidth"] | AnyString>
  /**
    * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    *
@@ -1445,7 +1445,7 @@ borderRightStyle?: ConditionalValue<CssVars | CssProperties["borderRightStyle"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-right-width
    */
-borderRightWidth?: ConditionalValue<CssProperties["borderRightWidth"] | AnyString>
+borderRightWidth?: ConditionalValue<UtilityValues["borderRightWidth"] | CssVars | CssProperties["borderRightWidth"] | AnyString>
  /**
    * The **`border-spacing`** CSS property sets the distance between the borders of adjacent cells in a `<table>`. This property applies only when `border-collapse` is `separate`.
    *
@@ -1583,7 +1583,7 @@ borderTopStyle?: ConditionalValue<CssVars | CssProperties["borderTopStyle"] | An
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
    */
-borderTopWidth?: ConditionalValue<CssProperties["borderTopWidth"] | AnyString>
+borderTopWidth?: ConditionalValue<UtilityValues["borderTopWidth"] | CssVars | CssProperties["borderTopWidth"] | AnyString>
  /**
    * The **`border-width`** shorthand CSS property sets the width of an element's border.
    *
@@ -1595,7 +1595,7 @@ borderTopWidth?: ConditionalValue<CssProperties["borderTopWidth"] | AnyString>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-width
    */
-borderWidth?: ConditionalValue<CssProperties["borderWidth"] | AnyString>
+borderWidth?: ConditionalValue<UtilityValues["borderWidth"] | CssVars | CssProperties["borderWidth"] | AnyString>
  /**
    * The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.
    *
@@ -4187,7 +4187,7 @@ outlineStyle?: ConditionalValue<CssVars | CssProperties["outlineStyle"] | AnyStr
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-width
    */
-outlineWidth?: ConditionalValue<CssProperties["outlineWidth"] | AnyString>
+outlineWidth?: ConditionalValue<UtilityValues["outlineWidth"] | CssVars | CssProperties["outlineWidth"] | AnyString>
  /**
    * 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.
    *
@@ -5340,7 +5340,7 @@ shapeOutside?: ConditionalValue<CssProperties["shapeOutside"] | AnyString>
  strokeLinejoin?: ConditionalValue<CssProperties["strokeLinejoin"] | AnyString>
  strokeMiterlimit?: ConditionalValue<CssProperties["strokeMiterlimit"] | AnyString>
  strokeOpacity?: ConditionalValue<CssProperties["strokeOpacity"] | AnyString>
- strokeWidth?: ConditionalValue<CssProperties["strokeWidth"] | AnyString>
+ strokeWidth?: ConditionalValue<UtilityValues["strokeWidth"] | CssVars | CssProperties["strokeWidth"] | AnyString>
  /**
    * The **`tab-size`** CSS property is used to customize the width of tab characters (U+0009).
    *
@@ -6697,7 +6697,7 @@ marginStart?: ConditionalValue<UtilityValues["marginInlineStart"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-width
    */
-ringWidth?: ConditionalValue<CssProperties["outlineWidth"] | AnyString>
+ringWidth?: ConditionalValue<UtilityValues["outlineWidth"] | CssVars | CssProperties["outlineWidth"] | AnyString>
  /**
    * The **`outline-color`** CSS property sets the color of an element's outline.
    *
@@ -7155,7 +7155,7 @@ borderX?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
    */
-borderXWidth?: ConditionalValue<CssProperties["borderInlineWidth"] | AnyString>
+borderXWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"] | AnyString>
  /**
    * The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7195,7 +7195,7 @@ borderY?: ConditionalValue<UtilityValues["borderBlock"] | CssVars | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
    */
-borderYWidth?: ConditionalValue<CssProperties["borderBlockWidth"] | AnyString>
+borderYWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"] | AnyString>
  /**
    * The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7235,7 +7235,7 @@ borderStart?: ConditionalValue<UtilityValues["borderInlineStart"] | CssVars | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
    */
-borderStartWidth?: ConditionalValue<CssProperties["borderInlineStartWidth"] | AnyString>
+borderStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"] | AnyString>
  /**
    * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7277,7 +7277,7 @@ borderEnd?: ConditionalValue<UtilityValues["borderInlineEnd"] | CssVars | CssPro
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width
    */
-borderEndWidth?: ConditionalValue<CssProperties["borderInlineEndWidth"] | AnyString>
+borderEndWidth?: ConditionalValue<UtilityValues["borderInlineEndWidth"] | CssVars | CssProperties["borderInlineEndWidth"] | AnyString>
  /**
    * The **`border-inline-end-color`** CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -7368,8 +7368,8 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars
  focusRingOffset?: ConditionalValue<UtilityValues["focusRingOffset"] | CssVars | AnyString>
  focusRingWidth?: ConditionalValue<UtilityValues["focusRingWidth"] | CssVars | AnyString>
  focusRingStyle?: ConditionalValue<UtilityValues["focusRingStyle"] | CssVars | AnyString>
- divideX?: ConditionalValue<string | number | AnyString>
- divideY?: ConditionalValue<string | number | AnyString>
+ divideX?: ConditionalValue<UtilityValues["divideX"] | CssVars | AnyString>
+ divideY?: ConditionalValue<UtilityValues["divideY"] | CssVars | AnyString>
  divideColor?: ConditionalValue<UtilityValues["divideColor"] | CssVars | AnyString>
  divideStyle?: ConditionalValue<UtilityValues["divideStyle"] | CssVars | AnyString>
  boxSize?: ConditionalValue<UtilityValues["boxSize"] | CssVars | AnyString>