@likec4/styles 1.47.0 → 1.49.0

package/dist/types/{style-props.d.ts → style-props.d.mts}

@@ -1,14 +1,14 @@
 /* eslint-disable */
-import type { ConditionalValue } from './conditions';
-import type { OnlyKnown, UtilityValues, WithEscapeHatch } from './prop-type';
-import type { CssProperties } from './system-types';
-import type { Token } from '../tokens/index';
+import type { ConditionalValue } from './conditions.d.mts';
+import type { OnlyKnown, UtilityValues, WithEscapeHatch } from './prop-type.d.mts';
+import type { CssProperties } from './system-types.d.mts';
+import type { Token } from '../tokens/index.d.mts';
 
 type AnyString = (string & {})
-type CssVars = "var(--likec4-text-size)" | "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--mantine-scale)" | "var(--likec4-palette-outline)" | "var(--likec4-spacing)" | "var(--text-fz)" | "var(--likec4-icon-size)"
+type CssVars = "var(--likec4-app-font)" | "var(--likec4-spacing)" | "var(--likec4-text-size)" | "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--likec4-palette-relation-stroke-selected)" | "var(--mantine-scale)" | "var(--likec4-palette-outline)" | "var(--text-fz)" | "var(--likec4-icon-color)" | "var(--likec4-icon-size)"
 type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
-type CssVarKeys = "--likec4-text-size" | "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--mantine-scale" | "--likec4-palette-outline" | "--likec4-spacing" | "--text-fz" | "--likec4-icon-size" | `--${string}` & {}
+type CssVarKeys = "--likec4-app-font" | "--likec4-spacing" | "--likec4-text-size" | "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--likec4-palette-relation-stroke-selected" | "--mantine-scale" | "--likec4-palette-outline" | "--text-fz" | "--likec4-icon-color" | "--likec4-icon-size" | `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue
@@ -854,7 +854,7 @@ borderBlockEndStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-width
    */
-borderBlockEndWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderBlockEndWidth"]>>
+borderBlockEndWidth?: ConditionalValue<UtilityValues["borderBlockEndWidth"] | CssVars | CssProperties["borderBlockEndWidth"]>
  /**
    * 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<WithEscapeHatch<CssVars | CssProperties
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-width
    */
-borderBlockStartWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderBlockStartWidth"]>>
+borderBlockStartWidth?: ConditionalValue<UtilityValues["borderBlockStartWidth"] | CssVars | CssProperties["borderBlockStartWidth"]>
  /**
    * 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<WithEscapeHatch<CssVars | CssProperties["bor
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
    */
-borderBlockWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderBlockWidth"]>>
+borderBlockWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"]>
  /**
    * 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`.
    *
@@ -977,7 +977,7 @@ borderBottomColor?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottom
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius
    */
-borderBottomLeftRadius?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssVars | CssProperties["borderBottomLeftRadius"]>
+borderBottomLeftRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottomLeftRadius"] | CssVars>>
  /**
    * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -992,7 +992,7 @@ borderBottomLeftRadius?: ConditionalValue<UtilityValues["borderBottomLeftRadius"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius
    */
-borderBottomRightRadius?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssVars | CssProperties["borderBottomRightRadius"]>
+borderBottomRightRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottomRightRadius"] | CssVars>>
  /**
    * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
    *
@@ -1020,7 +1020,7 @@ borderBottomStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["bo
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-width
    */
-borderBottomWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderBottomWidth"]>>
+borderBottomWidth?: ConditionalValue<UtilityValues["borderBottomWidth"] | CssVars | CssProperties["borderBottomWidth"]>
  /**
    * The **`border-collapse`** CSS property sets whether cells inside a `<table>` have shared or separate borders.
    *
@@ -1060,7 +1060,7 @@ borderColor?: ConditionalValue<WithEscapeHatch<UtilityValues["borderColor"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius
    */
-borderEndEndRadius?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssVars | CssProperties["borderEndEndRadius"]>
+borderEndEndRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderEndEndRadius"] | CssVars>>
  /**
    * The **`border-end-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -1074,7 +1074,7 @@ borderEndEndRadius?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius
    */
-borderEndStartRadius?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssVars | CssProperties["borderEndStartRadius"]>
+borderEndStartRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderEndStartRadius"] | CssVars>>
  /**
    * The **`border-image`** CSS property draws an image around a given element. It replaces the element's regular border.
    *
@@ -1240,7 +1240,7 @@ borderInlineEndStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties[
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width
    */
-borderInlineEndWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderInlineEndWidth"]>>
+borderInlineEndWidth?: ConditionalValue<UtilityValues["borderInlineEndWidth"] | CssVars | CssProperties["borderInlineEndWidth"]>
  /**
    * 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<WithEscapeHatch<CssVars | CssPropertie
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
    */
-borderInlineStartWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderInlineStartWidth"]>>
+borderInlineStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"]>
  /**
    * 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<WithEscapeHatch<CssVars | CssProperties["bo
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
    */
-borderInlineWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderInlineWidth"]>>
+borderInlineWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"]>
  /**
    * The **`border-left`** shorthand CSS property sets all the properties of an element's left border.
    *
@@ -1378,7 +1378,7 @@ borderLeftStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["bord
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-left-width
    */
-borderLeftWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderLeftWidth"]>>
+borderLeftWidth?: ConditionalValue<UtilityValues["borderLeftWidth"] | CssVars | CssProperties["borderLeftWidth"]>
  /**
    * 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.
    *
@@ -1391,7 +1391,7 @@ borderLeftWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderLeftWidt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
    */
-borderRadius?: ConditionalValue<UtilityValues["borderRadius"] | CssVars | CssProperties["borderRadius"]>
+borderRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderRadius"] | CssVars>>
  /**
    * The **`border-right`** shorthand CSS property sets all the properties of an element's right border.
    *
@@ -1445,7 +1445,7 @@ borderRightStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["bor
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-right-width
    */
-borderRightWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderRightWidth"]>>
+borderRightWidth?: ConditionalValue<UtilityValues["borderRightWidth"] | CssVars | CssProperties["borderRightWidth"]>
  /**
    * 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`.
    *
@@ -1473,7 +1473,7 @@ borderSpacing?: ConditionalValue<WithEscapeHatch<UtilityValues["borderSpacing"]
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius
    */
-borderStartEndRadius?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssVars | CssProperties["borderStartEndRadius"]>
+borderStartEndRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderStartEndRadius"] | CssVars>>
  /**
    * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -1487,7 +1487,7 @@ borderStartEndRadius?: ConditionalValue<UtilityValues["borderStartEndRadius"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius
    */
-borderStartStartRadius?: ConditionalValue<UtilityValues["borderStartStartRadius"] | CssVars | CssProperties["borderStartStartRadius"]>
+borderStartStartRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderStartStartRadius"] | CssVars>>
  /**
    * The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.
    *
@@ -1540,7 +1540,7 @@ borderTopColor?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopColor"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius
    */
-borderTopLeftRadius?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssVars | CssProperties["borderTopLeftRadius"]>
+borderTopLeftRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopLeftRadius"] | CssVars>>
  /**
    * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -1555,7 +1555,7 @@ borderTopLeftRadius?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | Cs
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius
    */
-borderTopRightRadius?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssVars | CssProperties["borderTopRightRadius"]>
+borderTopRightRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopRightRadius"] | CssVars>>
  /**
    * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
    *
@@ -1583,7 +1583,7 @@ borderTopStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["borde
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
    */
-borderTopWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderTopWidth"]>>
+borderTopWidth?: ConditionalValue<UtilityValues["borderTopWidth"] | CssVars | CssProperties["borderTopWidth"]>
  /**
    * The **`border-width`** shorthand CSS property sets the width of an element's border.
    *
@@ -1595,7 +1595,7 @@ borderTopWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderTopWidth"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-width
    */
-borderWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderWidth"]>>
+borderWidth?: ConditionalValue<UtilityValues["borderWidth"] | CssVars | CssProperties["borderWidth"]>
  /**
    * The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.
    *
@@ -2708,7 +2708,7 @@ fontVariationSettings?: ConditionalValue<WithEscapeHatch<CssProperties["fontVari
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
    */
-fontWeight?: ConditionalValue<UtilityValues["fontWeight"] | CssVars | CssProperties["fontWeight"]>
+fontWeight?: ConditionalValue<WithEscapeHatch<UtilityValues["fontWeight"] | CssVars>>
  /**
    * The **`forced-color-adjust`** CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.
    *
@@ -4187,7 +4187,7 @@ outlineStyle?: ConditionalValue<WithEscapeHatch<CssVars | CssProperties["outline
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-width
    */
-outlineWidth?: ConditionalValue<WithEscapeHatch<CssProperties["outlineWidth"]>>
+outlineWidth?: ConditionalValue<UtilityValues["outlineWidth"] | CssVars | CssProperties["outlineWidth"]>
  /**
    * 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<WithEscapeHatch<CssProperties["shapeOutside"]>>
  strokeLinejoin?: ConditionalValue<WithEscapeHatch<CssProperties["strokeLinejoin"]>>
  strokeMiterlimit?: ConditionalValue<WithEscapeHatch<CssProperties["strokeMiterlimit"]>>
  strokeOpacity?: ConditionalValue<WithEscapeHatch<CssProperties["strokeOpacity"]>>
- strokeWidth?: ConditionalValue<WithEscapeHatch<CssProperties["strokeWidth"]>>
+ strokeWidth?: ConditionalValue<UtilityValues["strokeWidth"] | CssVars | CssProperties["strokeWidth"]>
  /**
    * The **`tab-size`** CSS property is used to customize the width of tab characters (U+0009).
    *
@@ -6697,7 +6697,7 @@ marginStart?: ConditionalValue<WithEscapeHatch<UtilityValues["marginInlineStart"
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/outline-width
    */
-ringWidth?: ConditionalValue<WithEscapeHatch<CssProperties["outlineWidth"]>>
+ringWidth?: ConditionalValue<UtilityValues["outlineWidth"] | CssVars | CssProperties["outlineWidth"]>
  /**
    * The **`outline-color`** CSS property sets the color of an element's outline.
    *
@@ -7007,7 +7007,7 @@ bgSize?: ConditionalValue<WithEscapeHatch<CssProperties["backgroundSize"]>>
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
    */
-rounded?: ConditionalValue<UtilityValues["borderRadius"] | CssVars | CssProperties["borderRadius"]>
+rounded?: ConditionalValue<WithEscapeHatch<UtilityValues["borderRadius"] | CssVars>>
  /**
    * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7022,7 +7022,7 @@ rounded?: ConditionalValue<UtilityValues["borderRadius"] | CssVars | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius
    */
-roundedTopLeft?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssVars | CssProperties["borderTopLeftRadius"]>
+roundedTopLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopLeftRadius"] | CssVars>>
  /**
    * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7037,7 +7037,7 @@ roundedTopLeft?: ConditionalValue<UtilityValues["borderTopLeftRadius"] | CssVars
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius
    */
-roundedTopRight?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssVars | CssProperties["borderTopRightRadius"]>
+roundedTopRight?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopRightRadius"] | CssVars>>
  /**
    * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7052,7 +7052,7 @@ roundedTopRight?: ConditionalValue<UtilityValues["borderTopRightRadius"] | CssVa
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius
    */
-roundedBottomRight?: ConditionalValue<UtilityValues["borderBottomRightRadius"] | CssVars | CssProperties["borderBottomRightRadius"]>
+roundedBottomRight?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottomRightRadius"] | CssVars>>
  /**
    * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
    *
@@ -7067,11 +7067,11 @@ roundedBottomRight?: ConditionalValue<UtilityValues["borderBottomRightRadius"] |
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius
    */
-roundedBottomLeft?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | CssVars | CssProperties["borderBottomLeftRadius"]>
- roundedTop?: ConditionalValue<UtilityValues["borderTopRadius"] | CssVars | CssProperties["borderTopRadius"]>
- roundedRight?: ConditionalValue<UtilityValues["borderRightRadius"] | CssVars | CssProperties["borderRightRadius"]>
- roundedBottom?: ConditionalValue<UtilityValues["borderBottomRadius"] | CssVars | CssProperties["borderBottomRadius"]>
- roundedLeft?: ConditionalValue<UtilityValues["borderLeftRadius"] | CssVars | CssProperties["borderLeftRadius"]>
+roundedBottomLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottomLeftRadius"] | CssVars>>
+ roundedTop?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopRadius"] | CssVars>>
+ roundedRight?: ConditionalValue<WithEscapeHatch<UtilityValues["borderRightRadius"] | CssVars>>
+ roundedBottom?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottomRadius"] | CssVars>>
+ roundedLeft?: ConditionalValue<WithEscapeHatch<UtilityValues["borderLeftRadius"] | CssVars>>
  /**
    * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -7085,7 +7085,7 @@ roundedBottomLeft?: ConditionalValue<UtilityValues["borderBottomLeftRadius"] | C
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius
    */
-roundedStartStart?: ConditionalValue<UtilityValues["borderStartStartRadius"] | CssVars | CssProperties["borderStartStartRadius"]>
+roundedStartStart?: ConditionalValue<WithEscapeHatch<UtilityValues["borderStartStartRadius"] | CssVars>>
  /**
    * The **`border-start-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -7099,8 +7099,8 @@ roundedStartStart?: ConditionalValue<UtilityValues["borderStartStartRadius"] | C
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius
    */
-roundedStartEnd?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssVars | CssProperties["borderStartEndRadius"]>
- roundedStart?: ConditionalValue<UtilityValues["borderStartRadius"] | CssVars | CssProperties["borderStartRadius"]>
+roundedStartEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["borderStartEndRadius"] | CssVars>>
+ roundedStart?: ConditionalValue<WithEscapeHatch<UtilityValues["borderStartRadius"] | CssVars>>
  /**
    * The **`border-end-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -7114,7 +7114,7 @@ roundedStartEnd?: ConditionalValue<UtilityValues["borderStartEndRadius"] | CssVa
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius
    */
-roundedEndStart?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssVars | CssProperties["borderEndStartRadius"]>
+roundedEndStart?: ConditionalValue<WithEscapeHatch<UtilityValues["borderEndStartRadius"] | CssVars>>
  /**
    * The **`border-end-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.
    *
@@ -7128,8 +7128,8 @@ roundedEndStart?: ConditionalValue<UtilityValues["borderEndStartRadius"] | CssVa
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius
    */
-roundedEndEnd?: ConditionalValue<UtilityValues["borderEndEndRadius"] | CssVars | CssProperties["borderEndEndRadius"]>
- roundedEnd?: ConditionalValue<UtilityValues["borderEndRadius"] | CssVars | CssProperties["borderEndRadius"]>
+roundedEndEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["borderEndEndRadius"] | CssVars>>
+ roundedEnd?: ConditionalValue<WithEscapeHatch<UtilityValues["borderEndRadius"] | CssVars>>
  /**
    * The **`border-inline`** CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
    *
@@ -7155,7 +7155,7 @@ borderX?: ConditionalValue<UtilityValues["borderInline"] | CssVars | CssProperti
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
    */
-borderXWidth?: ConditionalValue<WithEscapeHatch<CssProperties["borderInlineWidth"]>>
+borderXWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"]>
  /**
    * 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<WithEscapeHatch<CssProperties["borderBlockWidth"]>>
+borderYWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"]>
  /**
    * 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<WithEscapeHatch<CssProperties["borderInlineStartWidth"]>>
+borderStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"]>
  /**
    * 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<WithEscapeHatch<CssProperties["borderInlineEndWidth"]>>
+borderEndWidth?: ConditionalValue<UtilityValues["borderInlineEndWidth"] | CssVars | CssProperties["borderInlineEndWidth"]>
  /**
    * 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`.
    *
@@ -7366,10 +7366,10 @@ scrollPaddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingIn
  focusVisibleRing?: ConditionalValue<UtilityValues["focusVisibleRing"] | CssVars | CssProperties["focusVisibleRing"]>
  focusRingColor?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRingColor"] | CssVars>>
  focusRingOffset?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRingOffset"] | CssVars>>
- focusRingWidth?: ConditionalValue<string | number | CssProperties["focusRingWidth"]>
+ focusRingWidth?: ConditionalValue<UtilityValues["focusRingWidth"] | CssVars | CssProperties["focusRingWidth"]>
  focusRingStyle?: ConditionalValue<string | number | CssProperties["focusRingStyle"]>
- divideX?: ConditionalValue<string | number | CssProperties["divideX"]>
- divideY?: ConditionalValue<string | number | CssProperties["divideY"]>
+ divideX?: ConditionalValue<UtilityValues["divideX"] | CssVars | CssProperties["divideX"]>
+ divideY?: ConditionalValue<UtilityValues["divideY"] | CssVars | CssProperties["divideY"]>
  divideColor?: ConditionalValue<WithEscapeHatch<UtilityValues["divideColor"] | CssVars>>
  divideStyle?: ConditionalValue<string | number | CssProperties["divideStyle"]>
  boxSize?: ConditionalValue<UtilityValues["boxSize"] | CssVars | CssProperties["boxSize"]>
@@ -7386,12 +7386,12 @@ scrollPaddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingIn
  gradientTo?: ConditionalValue<WithEscapeHatch<UtilityValues["gradientTo"] | CssVars>>
  gradientVia?: ConditionalValue<WithEscapeHatch<UtilityValues["gradientVia"] | CssVars>>
  gradientViaPosition?: ConditionalValue<string | number | CssProperties["gradientViaPosition"]>
- borderTopRadius?: ConditionalValue<UtilityValues["borderTopRadius"] | CssVars | CssProperties["borderTopRadius"]>
- borderRightRadius?: ConditionalValue<UtilityValues["borderRightRadius"] | CssVars | CssProperties["borderRightRadius"]>
- borderBottomRadius?: ConditionalValue<UtilityValues["borderBottomRadius"] | CssVars | CssProperties["borderBottomRadius"]>
- borderLeftRadius?: ConditionalValue<UtilityValues["borderLeftRadius"] | CssVars | CssProperties["borderLeftRadius"]>
- borderStartRadius?: ConditionalValue<UtilityValues["borderStartRadius"] | CssVars | CssProperties["borderStartRadius"]>
- borderEndRadius?: ConditionalValue<UtilityValues["borderEndRadius"] | CssVars | CssProperties["borderEndRadius"]>
+ borderTopRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderTopRadius"] | CssVars>>
+ borderRightRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderRightRadius"] | CssVars>>
+ borderBottomRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderBottomRadius"] | CssVars>>
+ borderLeftRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderLeftRadius"] | CssVars>>
+ borderStartRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderStartRadius"] | CssVars>>
+ borderEndRadius?: ConditionalValue<WithEscapeHatch<UtilityValues["borderEndRadius"] | CssVars>>
  boxShadowColor?: ConditionalValue<WithEscapeHatch<UtilityValues["boxShadowColor"] | CssVars>>
  brightness?: ConditionalValue<string | number | CssProperties["brightness"]>
  contrast?: ConditionalValue<string | number | CssProperties["contrast"]>
@@ -7505,6 +7505,6 @@ scrollSnapMarginRight?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSn
  animationStyle?: ConditionalValue<UtilityValues["animationStyle"] | CssVars | CssProperties["animationStyle"]>
 }
 
-type StrictTokenProps = "top" | "left" | "inset" | "insetInline" | "insetX" | "insetBlock" | "insetY" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetEnd" | "end" | "insetInlineStart" | "insetStart" | "start" | "right" | "bottom" | "gap" | "gridGap" | "gridRowGap" | "gridColumnGap" | "rowGap" | "columnGap" | "padding" | "p" | "paddingLeft" | "pl" | "paddingRight" | "pr" | "paddingTop" | "pt" | "paddingBottom" | "pb" | "paddingBlock" | "py" | "paddingY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInline" | "paddingX" | "px" | "paddingInlineEnd" | "pe" | "paddingEnd" | "paddingInlineStart" | "ps" | "paddingStart" | "marginLeft" | "ml" | "marginRight" | "mr" | "marginTop" | "mt" | "marginBottom" | "mb" | "margin" | "m" | "marginBlock" | "my" | "marginY" | "marginBlockEnd" | "marginBlockStart" | "marginInline" | "mx" | "marginX" | "marginInlineEnd" | "me" | "marginEnd" | "marginInlineStart" | "ms" | "marginStart" | "spaceX" | "spaceY" | "outlineColor" | "ringColor" | "outlineOffset" | "ringOffset" | "focusRingColor" | "focusRingOffset" | "divideColor" | "color" | "fontFamily" | "textDecorationColor" | "textEmphasisColor" | "textIndent" | "textShadowColor" | "WebkitTextFillColor" | "background" | "bg" | "backgroundColor" | "bgColor" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderColor" | "borderInlineColor" | "borderXColor" | "borderBlockColor" | "borderYColor" | "borderLeftColor" | "borderInlineStartColor" | "borderStartColor" | "borderRightColor" | "borderInlineEndColor" | "borderEndColor" | "borderTopColor" | "borderBottomColor" | "borderBlockEndColor" | "borderBlockStartColor" | "boxShadowColor" | "shadowColor" | "borderSpacing" | "borderSpacingX" | "borderSpacingY" | "transitionTimingFunction" | "animationTimingFunction" | "translateX" | "x" | "translateY" | "y" | "translateZ" | "z" | "accentColor" | "caretColor" | "scrollbarColor" | "scrollMargin" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollMarginBottom" | "scrollMarginBlock" | "scrollMarginY" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInline" | "scrollMarginX" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingY" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingInline" | "scrollPaddingX" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollPaddingBottom" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "fill" | "stroke"
+type StrictTokenProps = "top" | "left" | "inset" | "insetInline" | "insetX" | "insetBlock" | "insetY" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetEnd" | "end" | "insetInlineStart" | "insetStart" | "start" | "right" | "bottom" | "gap" | "gridGap" | "gridRowGap" | "gridColumnGap" | "rowGap" | "columnGap" | "padding" | "p" | "paddingLeft" | "pl" | "paddingRight" | "pr" | "paddingTop" | "pt" | "paddingBottom" | "pb" | "paddingBlock" | "py" | "paddingY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInline" | "paddingX" | "px" | "paddingInlineEnd" | "pe" | "paddingEnd" | "paddingInlineStart" | "ps" | "paddingStart" | "marginLeft" | "ml" | "marginRight" | "mr" | "marginTop" | "mt" | "marginBottom" | "mb" | "margin" | "m" | "marginBlock" | "my" | "marginY" | "marginBlockEnd" | "marginBlockStart" | "marginInline" | "mx" | "marginX" | "marginInlineEnd" | "me" | "marginEnd" | "marginInlineStart" | "ms" | "marginStart" | "spaceX" | "spaceY" | "outlineColor" | "ringColor" | "outlineOffset" | "ringOffset" | "focusRingColor" | "focusRingOffset" | "divideColor" | "color" | "fontFamily" | "fontWeight" | "textDecorationColor" | "textEmphasisColor" | "textIndent" | "textShadowColor" | "WebkitTextFillColor" | "background" | "bg" | "backgroundColor" | "bgColor" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderRadius" | "rounded" | "borderTopLeftRadius" | "roundedTopLeft" | "borderTopRightRadius" | "roundedTopRight" | "borderBottomRightRadius" | "roundedBottomRight" | "borderBottomLeftRadius" | "roundedBottomLeft" | "borderTopRadius" | "roundedTop" | "borderRightRadius" | "roundedRight" | "borderBottomRadius" | "roundedBottom" | "borderLeftRadius" | "roundedLeft" | "borderStartStartRadius" | "roundedStartStart" | "borderStartEndRadius" | "roundedStartEnd" | "borderStartRadius" | "roundedStart" | "borderEndStartRadius" | "roundedEndStart" | "borderEndEndRadius" | "roundedEndEnd" | "borderEndRadius" | "roundedEnd" | "borderColor" | "borderInlineColor" | "borderXColor" | "borderBlockColor" | "borderYColor" | "borderLeftColor" | "borderInlineStartColor" | "borderStartColor" | "borderRightColor" | "borderInlineEndColor" | "borderEndColor" | "borderTopColor" | "borderBottomColor" | "borderBlockEndColor" | "borderBlockStartColor" | "boxShadowColor" | "shadowColor" | "borderSpacing" | "borderSpacingX" | "borderSpacingY" | "transitionTimingFunction" | "animationTimingFunction" | "translateX" | "x" | "translateY" | "y" | "translateZ" | "z" | "accentColor" | "caretColor" | "scrollbarColor" | "scrollMargin" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollMarginBottom" | "scrollMarginBlock" | "scrollMarginY" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInline" | "scrollMarginX" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingY" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingInline" | "scrollPaddingX" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollPaddingBottom" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "fill" | "stroke"
 
 type Restrict<Key, Value, Fallback> = Key extends StrictTokenProps ? Value : Value | Fallback

package/dist/types/{system-types.d.ts → system-types.d.mts}

@@ -1,7 +1,7 @@
 /* eslint-disable */
-import type {  ConditionalValue, Nested  } from './conditions';
-import type {  AtRule, Globals, PropertiesFallback  } from './csstype';
-import type {  SystemProperties, CssVarProperties  } from './style-props';
+import type {  ConditionalValue, Nested  } from './conditions.d.mts';
+import type {  AtRule, Globals, PropertiesFallback  } from './csstype.d.mts';
+import type {  SystemProperties, CssVarProperties  } from './style-props.d.mts';
 
 type String = string & {}
 type Number = number & {}

package/jsx/package.json

@@ -1,4 +1,4 @@
 {
-  "types": "../dist/jsx/index.d.ts",
+  "types": "../dist/jsx/index.d.mts",
   "module": "../dist/jsx/index.mjs"
 }

package/package.json

@@ -2,15 +2,14 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.47.0",
+  "version": "1.49.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
   "files": [
     "dist",
-    "*.mts",
-    "*.mjs",
-    "*.ts",
+    "**/*.mts",
+    "**/*.mjs",
     "**/package.json",
     "!build.config.ts"
   ],
@@ -24,32 +23,30 @@
     "access": "public"
   },
   "type": "module",
-  "types": "dist/types/index.d.ts",
-  "module": "dist/types/index.mjs",
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
+      "types": "./dist/types/index.d.mts",
       "default": "./dist/types/index.mjs"
     },
     "./css": {
-      "types": "./dist/css/index.d.ts",
+      "types": "./dist/css/index.d.mts",
       "default": "./dist/css/index.mjs"
     },
     "./tokens": {
-      "types": "./dist/tokens/index.d.ts",
+      "types": "./dist/tokens/index.d.mts",
       "default": "./dist/tokens/index.mjs"
     },
     "./types": {
-      "types": "./dist/types/index.d.ts",
+      "types": "./dist/types/index.d.mts",
       "default": "./dist/types/index.mjs"
     },
     "./patterns": {
-      "types": "./dist/patterns/index.d.ts",
+      "types": "./dist/patterns/index.d.mts",
       "default": "./dist/patterns/index.mjs"
     },
     "./jsx": {
-      "types": "./dist/jsx/index.d.ts",
+      "types": "./dist/jsx/index.d.mts",
       "default": "./dist/jsx/index.mjs"
     },
     "./postcss": {
@@ -57,57 +54,68 @@
       "default": "./postcss.mjs"
     },
     "./recipes": {
-      "types": "./dist/recipes/index.d.ts",
+      "types": "./dist/recipes/index.d.mts",
       "default": "./dist/recipes/index.mjs"
     },
     "./preset": {
       "sources": "./preset.ts",
       "default": {
-        "types": "./dist/preset.d.mts",
-        "import": "./dist/preset.mjs",
-        "default": "./dist/preset.mjs"
+        "types": "./preset/preset.d.mts",
+        "default": "./preset/preset.mjs"
       }
     },
-    "./dev": "./dev.ts"
+    "./vars": {
+      "sources": "./vars.ts",
+      "default": {
+        "types": "./vars/vars.d.mts",
+        "default": "./vars/vars.mjs"
+      }
+    },
+    "./dev": {
+      "types": "./dev.d.mts",
+      "default": "./dev.mjs"
+    }
+  },
+  "dependencies": {
+    "@pandacss/types": "^1.8.1"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.7.2",
-    "@pandacss/types": "^1.7.2",
-    "react": "^18.x || ^19.x",
-    "@types/react": "^18.x || ^19.x"
+    "@pandacss/dev": "^1.8.1",
+    "react": "^18.x || ^19.x"
   },
   "peerDependenciesMeta": {
-    "@pandacss/types": {
+    "@pandacss/dev": {
       "optional": true
     },
-    "@types/react": {
+    "react": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@types/node": "~22.19.3",
+    "@types/node": "~22.19.10",
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
-    "@pandacss/dev": "^1.7.2",
-    "@pandacss/types": "^1.7.2",
+    "@pandacss/dev": "^1.8.1",
     "@types/picomatch": "^4.0.2",
-    "@types/react": "19.2.7",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.13",
     "postcss": "8.5.6",
+    "remeda": "^2.33.5",
     "nano-spawn": "^2.0.0",
-    "unbuild": "3.5.0",
+    "obuild": "^0.4.27",
     "typescript": "5.9.3",
-    "@likec4/style-preset": "1.47.0",
+    "@likec4/style-preset": "1.49.0",
     "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.46.1"
+    "@likec4/tsconfig": "1.49.0"
   },
   "scripts": {
-    "typecheck": "tsc --build --verbose",
-    "generate": "unbuild",
+    "typecheck": "tsc --noEmit",
+    "generate": "obuild",
     "emit-pkg": "panda emit-pkg --base dist",
     "clean": "likec4ops clean",
     "pack": "pnpm pack",
     "lint:package": "pnpx publint ./package.tgz"
-  }
+  },
+  "types": "dist/types/index.d.mts",
+  "module": "dist/types/index.mjs"
 }

package/patterns/package.json

@@ -1,4 +1,4 @@
 {
-  "types": "../dist/patterns/index.d.ts",
+  "types": "../dist/patterns/index.d.mts",
   "module": "../dist/patterns/index.mjs"
 }