feat: add border-x-x-radius, outline-style, outline-width support

styled-components · Feb 24, 2020 · 693dc5d · 693dc5d
1 parent 83f54a3
commit 693dc5d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/core/src/propGetters.js b/packages/core/src/propGetters.js
@@ -71,6 +71,10 @@ export const propGetters = {
 
   // getRadius
   'border-radius': getMultiValues(getNumber(getRadius)),
+  'border-top-left-radius': getMultiValues(getNumber(getRadius)),
+  'border-top-right-radius': getMultiValues(getNumber(getRadius)),
+  'border-bottom-right-radius': getMultiValues(getNumber(getRadius)),
+  'border-bottom-left-radius': getMultiValues(getNumber(getRadius)),
 
   // getBorder
   border: getNumberBorder,
@@ -85,13 +89,15 @@ export const propGetters = {
   'border-right-width': getNumberBorderWidth,
   'border-bottom-width': getNumberBorderWidth,
   'border-left-width': getNumberBorderWidth,
+  'outline-width': getNumberBorderWidth,
 
   // getBorderStyle
   'border-style': getMultiBorderStyle,
   'border-top-style': getBorderStyle,
   'border-right-style': getBorderStyle,
   'border-bottom-style': getBorderStyle,
   'border-left-style': getBorderStyle,
+  'outline-style': getBorderStyle,
 
   // getShadow
   'box-shadow': getShadow,

diff --git a/website/src/pages/docs/theme-specification.mdx b/website/src/pages/docs/theme-specification.mdx
@@ -13,16 +13,16 @@ xstyled follows [system-ui specification](https://system-ui.com/theme/). It make
 | Theme Key      | CSS Properties                                                                                                                                                           |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | borders        | border, border-top, border-right, border-bottom, border-left                                                                                                             |
-| borderStyles   | border-style                                                                                                                                                             |
-| borderWidths   | border-width                                                                                                                                                             |
-| colors         | color, background-color, border-color                                                                                                                                    |
+| borderStyles   | border-style, border-top-style, border-right-style, border-bottom-style, border-left-style, outline-style                                                                |
+| borderWidths   | border-width, border-top-width, border-right-width, border-bottom-width, border-left-width, outline-width                                                                |
+| colors         | color, background-color, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, outline-color, fill                                 |
 | fonts          | font-family                                                                                                                                                              |
 | fontSizes      | font-size                                                                                                                                                                |
 | fontWeights    | font-weight                                                                                                                                                              |
 | letterSpacings | letter-spacing                                                                                                                                                           |
 | lineHeights    | line-height                                                                                                                                                              |
 | sizes          | width, height, min-width, max-width, min-height, max-height                                                                                                              |
-| radii          | border-radius                                                                                                                                                            |
+| radii          | border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius                                                    |
 | shadows        | box-shadow, text-shadow                                                                                                                                                  |
 | space          | margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap |
 | transitions    | transition                                                                                                                                                               |