feat(box): add css props and interactive conditions (#1081)

* feat(box): add css props * chore: add changeset * feat(box): add interactive conditions * fix: move selectors into single group
launchdarkly · Nov 17, 2023 · 17cec67 · 17cec67
1 parent 58477f8
commit 17cec67
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/.changeset/short-rabbits-film.md b/.changeset/short-rabbits-film.md
@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/box': patch
+---
+
+Add CSS props and interactive conditions
diff --git a/packages/box/src/styles/rainbow-sprinkles.css.ts b/packages/box/src/styles/rainbow-sprinkles.css.ts
@@ -45,6 +45,7 @@ const responsiveProperties = defineProperties({
     left: vars.spacing,
     right: vars.spacing,
     bottom: vars.spacing,
+    inset: vars.spacing,
     margin: vars.spacing,
     marginTop: vars.spacing,
     marginLeft: vars.spacing,
@@ -56,17 +57,28 @@ const responsiveProperties = defineProperties({
     fontSize: vars.font.size,
     fontWeight: vars.font.weight,
     lineHeight: vars['line-height'],
-    zIndex: vars['z-index'],
     width: vars.size,
     height: vars.size,
+    maxHeight: vars.size,
+    maxWidth: vars.size,
+    minHeight: vars.size,
+    minWidth: vars.size,
     // Will work with any CSS value
     display: true,
     textAlign: true,
+    flex: true,
+    flexBasis: true,
     flexDirection: true,
+    flexGrow: true,
+    flexShrink: true,
+    flexWrap: true,
     justifyContent: true,
+    justifySelf: true,
     alignItems: true,
+    alignSelf: true,
     position: true,
     verticalAlign: true,
+    overflow: true,
   },
   staticProperties: {
     // Build out utility classes that don't use CSS variables
@@ -79,6 +91,9 @@ const themedProperties = defineProperties({
   conditions: {
     default: { selector: ':root &, [data-theme="default"] &' },
     dark: { selector: '[data-theme="dark"] &' },
+    active: { selector: '&:active' },
+    hover: { selector: '&:hover' },
+    focusVisible: { selector: '&:focus-visible' },
   },
   defaultCondition: 'default',
   dynamicProperties: {
@@ -88,10 +103,36 @@ const themedProperties = defineProperties({
     borderColor: { ...colors, ...borders },
     fill: { ...colors, ...fills },
     borderStyle: true,
+    boxShadow: true,
+    textDecoration: true,
+  },
+  shorthands: {},
+});
+
+const unconditionalProperties = defineProperties({
+  dynamicProperties: {
+    cursor: true,
+    opacity: true,
+    textTransform: true,
+    transform: true,
+    transition: true,
+    transitionProperty: true,
+    transitionDelay: true,
+    transitionDuration: vars.duration,
+    transitionTimingFunction: true,
+    visibility: true,
+    whiteSpace: true,
+    wordBreak: true,
+    wordWrap: true,
+    zIndex: vars['z-index'],
   },
   shorthands: {},
 });
 
-export const rainbowSprinkles = createRainbowSprinkles(responsiveProperties, themedProperties);
+export const rainbowSprinkles = createRainbowSprinkles(
+  responsiveProperties,
+  themedProperties,
+  unconditionalProperties
+);
 
 export type Sprinkles = Parameters<typeof rainbowSprinkles>[0];