fix: allow string values in outline-offset (#128)

wayfair · Apr 10, 2023 · 4a82f2a · 4a82f2a
1 parent 7ed372f
commit 4a82f2a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/polite-bags-prove.md b/.changeset/polite-bags-prove.md
@@ -0,0 +1,5 @@
+---
+'rainbow-sprinkles': patch
+---
+
+Changed the type off `outlineOffset` from `<length>` to `<line-width>{1,4}`. This allows valid string sizes to be used such as `px` and `rem` units.
diff --git a/packages/rainbow-sprinkles/src/css.d.ts b/packages/rainbow-sprinkles/src/css.d.ts
@@ -1997,9 +1997,9 @@ export interface StandardLonghandProperties {
   /**
    * The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.
    *
-   * **Syntax**: `<length>`
+   * **Syntax**: `<line-width>{1,4}`
    *
-   * **Initial value**: `0`
+   * **Initial value**: `0px`
    *
    */
   outlineOffset?: Property.OutlineOffset;
@@ -5534,9 +5534,9 @@ export interface StandardLonghandPropertiesHyphen {
   /**
    * The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.
    *
-   * **Syntax**: `<length>`
+   * **Syntax**: `<line-width>{1,4}`
    *
-   * **Initial value**: `0`
+   * **Initial value**: `0px`
    *
    */
   'outline-offset'?: Property.OutlineOffset;
@@ -8755,7 +8755,7 @@ export namespace Property {
 
   export type OutlineColor = DataType.Color | 'invert';
 
-  export type OutlineOffset = number;
+  export type OutlineOffset = DataType.LineWidth | OnlyString;
 
   export type OutlineStyle = DataType.LineStyle | 'auto' | OnlyString;