hipstersmoothie.com / hip-ui
A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

animation improvements

Andrew Lisowski 468864ca 07310583

+65 -67
+1 -1
apps/docs/src/components/badge/index.tsx
··· 33 33 default: radius["sm"], 34 34 [mediaQueries.supportsSquircle]: radius["3xl"], 35 35 }, 36 - gap: spacing["1.5"], 36 + gap: spacing["1"], 37 37 fontSize: fontSize["xs"], 38 38 height: spacing["5"], 39 39 paddingLeft: spacing["1.5"],
+1 -1
apps/docs/src/components/radio/index.tsx
··· 61 61 62 62 transitionDuration: animationDuration.fast, 63 63 transitionProperty: { 64 - default: "background-color, border-color, color", 64 + default: "background-color, color", 65 65 [mediaQueries.reducedMotion]: "none", 66 66 }, 67 67 transitionTimingFunction: "ease-in-out",
+25 -25
apps/docs/src/components/theme/semantic-color.stylex.tsx
··· 39 39 borderWidth: 1, 40 40 41 41 transitionDuration: animationDuration.fast, 42 - transitionProperty: "background-color, border-color", 42 + transitionProperty: "background-color", 43 43 transitionTimingFunction: "ease-in-out", 44 44 }, 45 45 bgSolid: { backgroundColor: uiColor.solid1 }, ··· 56 56 ":disabled": "transparent", 57 57 }, 58 58 transitionDuration: animationDuration.fast, 59 - transitionProperty: "background-color, border-color", 59 + transitionProperty: "background-color", 60 60 transitionTimingFunction: "ease-in-out", 61 61 }, 62 62 bgUi: { ··· 67 67 ":disabled": uiColor.component1, 68 68 }, 69 69 transitionDuration: animationDuration.fast, 70 - transitionProperty: "background-color, border-color", 70 + transitionProperty: "background-color", 71 71 transitionTimingFunction: "ease-in-out", 72 72 }, 73 73 bgAction: { ··· 78 78 ":disabled": uiColor.component1, 79 79 }, 80 80 transitionDuration: animationDuration.fast, 81 - transitionProperty: "background-color, border-color", 81 + transitionProperty: "background-color", 82 82 transitionTimingFunction: "ease-in-out", 83 83 }, 84 84 bgSolidAction: { ··· 88 88 ":disabled": uiColor.component1, 89 89 }, 90 90 transitionDuration: animationDuration.fast, 91 - transitionProperty: "background-color, border-color", 91 + transitionProperty: "background-color", 92 92 transitionTimingFunction: "ease-in-out", 93 93 }, 94 94 }); ··· 118 118 borderStyle: "solid", 119 119 borderWidth: 1, 120 120 121 - transitionDuration: animationDuration.fast, 122 - transitionProperty: "background-color, border-color", 121 + transitionDuration: animationDuration.slow, 122 + transitionProperty: "background-color", 123 123 transitionTimingFunction: "ease-in-out", 124 124 }, 125 125 bgSolid: { backgroundColor: primaryColor.solid1 }, ··· 138 138 ":disabled": primaryColor.component1, 139 139 }, 140 140 transitionDuration: animationDuration.fast, 141 - transitionProperty: "background-color, border-color", 141 + transitionProperty: "background-color", 142 142 transitionTimingFunction: "ease-in-out", 143 143 }, 144 144 bgUi: { ··· 150 150 ":disabled": primaryColor.component1, 151 151 }, 152 152 transitionDuration: animationDuration.fast, 153 - transitionProperty: "background-color, border-color", 153 + transitionProperty: "background-color", 154 154 transitionTimingFunction: "ease-in-out", 155 155 }, 156 156 bgAction: { ··· 163 163 ":disabled": primaryColor.component1, 164 164 }, 165 165 transitionDuration: animationDuration.fast, 166 - transitionProperty: "background-color, border-color", 166 + transitionProperty: "background-color", 167 167 transitionTimingFunction: "ease-in-out", 168 168 }, 169 169 bgSolidAction: { ··· 173 173 ":disabled": primaryColor.component1, 174 174 }, 175 175 transitionDuration: animationDuration.fast, 176 - transitionProperty: "background-color, border-color", 176 + transitionProperty: "background-color", 177 177 transitionTimingFunction: "ease-in-out", 178 178 }, 179 179 }); ··· 203 203 borderStyle: "solid", 204 204 borderWidth: 1, 205 205 transitionDuration: animationDuration.fast, 206 - transitionProperty: "background-color, border-color", 206 + transitionProperty: "background-color", 207 207 transitionTimingFunction: "ease-in-out", 208 208 }, 209 209 bgSolid: { backgroundColor: criticalColor.solid1 }, ··· 222 222 ":disabled": criticalColor.component1, 223 223 }, 224 224 transitionDuration: animationDuration.fast, 225 - transitionProperty: "background-color, border-color", 225 + transitionProperty: "background-color", 226 226 transitionTimingFunction: "ease-in-out", 227 227 }, 228 228 bgUi: { ··· 235 235 ":disabled": criticalColor.component1, 236 236 }, 237 237 transitionDuration: animationDuration.fast, 238 - transitionProperty: "background-color, border-color", 238 + transitionProperty: "background-color", 239 239 transitionTimingFunction: "ease-in-out", 240 240 }, 241 241 bgAction: { ··· 248 248 ":disabled": criticalColor.component1, 249 249 }, 250 250 transitionDuration: animationDuration.fast, 251 - transitionProperty: "background-color, border-color", 251 + transitionProperty: "background-color", 252 252 transitionTimingFunction: "ease-in-out", 253 253 }, 254 254 bgSolidAction: { ··· 258 258 ":disabled": criticalColor.component1, 259 259 }, 260 260 transitionDuration: animationDuration.fast, 261 - transitionProperty: "background-color, border-color", 261 + transitionProperty: "background-color", 262 262 transitionTimingFunction: "ease-in-out", 263 263 }, 264 264 }); ··· 302 302 ":disabled": warningColor.component1, 303 303 }, 304 304 transitionDuration: animationDuration.fast, 305 - transitionProperty: "background-color, border-color", 305 + transitionProperty: "background-color", 306 306 transitionTimingFunction: "ease-in-out", 307 307 }, 308 308 bgUi: { ··· 314 314 ":disabled": warningColor.component1, 315 315 }, 316 316 transitionDuration: animationDuration.fast, 317 - transitionProperty: "background-color, border-color", 317 + transitionProperty: "background-color", 318 318 transitionTimingFunction: "ease-in-out", 319 319 }, 320 320 bgAction: { ··· 327 327 ":disabled": warningColor.component1, 328 328 }, 329 329 transitionDuration: animationDuration.fast, 330 - transitionProperty: "background-color, border-color", 330 + transitionProperty: "background-color", 331 331 transitionTimingFunction: "ease-in-out", 332 332 }, 333 333 bgSolidAction: { ··· 337 337 ":disabled": warningColor.component1, 338 338 }, 339 339 transitionDuration: animationDuration.fast, 340 - transitionProperty: "background-color, border-color", 340 + transitionProperty: "background-color", 341 341 transitionTimingFunction: "ease-in-out", 342 342 }, 343 343 }); ··· 367 367 borderStyle: "solid", 368 368 borderWidth: 1, 369 369 transitionDuration: animationDuration.fast, 370 - transitionProperty: "background-color, border-color", 370 + transitionProperty: "background-color", 371 371 transitionTimingFunction: "ease-in-out", 372 372 }, 373 373 bgSolid: { backgroundColor: successColor.solid1 }, ··· 386 386 ":disabled": successColor.component1, 387 387 }, 388 388 transitionDuration: animationDuration.fast, 389 - transitionProperty: "background-color, border-color", 389 + transitionProperty: "background-color", 390 390 transitionTimingFunction: "ease-in-out", 391 391 }, 392 392 bgUi: { ··· 399 399 ":disabled": successColor.component1, 400 400 }, 401 401 transitionDuration: animationDuration.fast, 402 - transitionProperty: "background-color, border-color", 402 + transitionProperty: "background-color", 403 403 transitionTimingFunction: "ease-in-out", 404 404 }, 405 405 bgAction: { ··· 412 412 ":disabled": successColor.component1, 413 413 }, 414 414 transitionDuration: animationDuration.fast, 415 - transitionProperty: "background-color, border-color", 415 + transitionProperty: "background-color", 416 416 transitionTimingFunction: "ease-in-out", 417 417 }, 418 418 bgSolidAction: { ··· 422 422 ":disabled": successColor.component1, 423 423 }, 424 424 transitionDuration: animationDuration.fast, 425 - transitionProperty: "background-color, border-color", 425 + transitionProperty: "background-color", 426 426 transitionTimingFunction: "ease-in-out", 427 427 }, 428 428 });
+1 -1
apps/docs/src/components/theme/useButtonStyles.ts
··· 48 48 ":disabled": "none", 49 49 }, 50 50 transitionDuration: animationDuration.fast, 51 - transitionProperty: "all", 51 + transitionProperty: "background-color, color", 52 52 transitionTimingFunction: "ease-in-out", 53 53 userSelect: "none", 54 54 whiteSpace: "nowrap",
+3 -3
apps/docs/src/components/theme/useInputStyles.ts
··· 128 128 ":has([data-invalid])": `0 0 0 2px ${criticalColor.component1}`, 129 129 }, 130 130 transitionDuration: animationDuration.fast, 131 - transitionProperty: "background-color, border-color", 131 + transitionProperty: "background-color", 132 132 transitionTimingFunction: "ease-in-out", 133 133 }, 134 134 primaryInvalid: { ··· 192 192 ":disabled": uiColor.component1, 193 193 }, 194 194 transitionDuration: animationDuration.fast, 195 - transitionProperty: "background-color, border-color", 195 + transitionProperty: "background-color", 196 196 transitionTimingFunction: "ease-in-out", 197 197 }, 198 198 secondaryInvalid: { ··· 249 249 ":disabled": "transparent", 250 250 }, 251 251 transitionDuration: animationDuration.fast, 252 - transitionProperty: "background-color, border-color", 252 + transitionProperty: "background-color", 253 253 transitionTimingFunction: "ease-in-out", 254 254 }, 255 255 tertiaryInvalid: {
+1 -1
apps/docs/src/components/theme/usePopoverStyles.ts
··· 45 45 "scale(0.95) translate(var(--origin-x, 0), var(--origin-y, 0))", 46 46 }, 47 47 transitionDuration: animationDuration.verySlow, 48 - transitionTimingFunction: animationTimingFunction.easeSpring, 49 48 transitionProperty: "transform, opacity", 49 + transitionTimingFunction: animationTimingFunction.easeSpring, 50 50 willChange: "transform, opacity", 51 51 }, 52 52 });
+1 -1
apps/docs/src/docs/components/overlays/popover.mdx
··· 21 21 22 22 This component is built using the [React Aria Popover](https://react-spectrum.adobe.com/react-aria/Popover.html). 23 23 24 - <PropDocs components={["Popover"]} /> 24 + {/* <PropDocs components={["Popover"]} /> */} 25 25 26 26 ## Related Components 27 27
+1 -3
apps/docs/stylex.css
··· 925 925 .xndv0t3:not(#\#):not(#\#):not(#\#){transition-duration:150ms} 926 926 .x151xuh8:not(#\#):not(#\#):not(#\#){transition-duration:200ms} 927 927 .x1xavoji:not(#\#):not(#\#):not(#\#){transition-duration:300ms} 928 - .xfagghw:not(#\#):not(#\#):not(#\#){transition-property:all} 929 - .x1eaenvl:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color,color} 930 - .xts7igz:not(#\#):not(#\#):not(#\#){transition-property:background-color,border-color} 928 + .xs2xxs2:not(#\#):not(#\#):not(#\#){transition-property:background-color,color} 931 929 .x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color} 932 930 .xghmlwh:not(#\#):not(#\#):not(#\#){transition-property:color,border-left-color} 933 931 .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
+1 -1
packages/hip-ui/src/components/badge/index.tsx
··· 33 33 default: radius["sm"], 34 34 [mediaQueries.supportsSquircle]: radius["3xl"], 35 35 }, 36 - gap: spacing["1.5"], 36 + gap: spacing["1"], 37 37 fontSize: fontSize["xs"], 38 38 height: spacing["5"], 39 39 paddingLeft: spacing["1.5"],
+1 -1
packages/hip-ui/src/components/radio/index.tsx
··· 61 61 62 62 transitionDuration: animationDuration.fast, 63 63 transitionProperty: { 64 - default: "background-color, border-color, color", 64 + default: "background-color, color", 65 65 [mediaQueries.reducedMotion]: "none", 66 66 }, 67 67 transitionTimingFunction: "ease-in-out",
+25 -25
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
··· 39 39 borderWidth: 1, 40 40 41 41 transitionDuration: animationDuration.fast, 42 - transitionProperty: "background-color, border-color", 42 + transitionProperty: "background-color", 43 43 transitionTimingFunction: "ease-in-out", 44 44 }, 45 45 bgSolid: { backgroundColor: uiColor.solid1 }, ··· 56 56 ":disabled": "transparent", 57 57 }, 58 58 transitionDuration: animationDuration.fast, 59 - transitionProperty: "background-color, border-color", 59 + transitionProperty: "background-color", 60 60 transitionTimingFunction: "ease-in-out", 61 61 }, 62 62 bgUi: { ··· 67 67 ":disabled": uiColor.component1, 68 68 }, 69 69 transitionDuration: animationDuration.fast, 70 - transitionProperty: "background-color, border-color", 70 + transitionProperty: "background-color", 71 71 transitionTimingFunction: "ease-in-out", 72 72 }, 73 73 bgAction: { ··· 78 78 ":disabled": uiColor.component1, 79 79 }, 80 80 transitionDuration: animationDuration.fast, 81 - transitionProperty: "background-color, border-color", 81 + transitionProperty: "background-color", 82 82 transitionTimingFunction: "ease-in-out", 83 83 }, 84 84 bgSolidAction: { ··· 88 88 ":disabled": uiColor.component1, 89 89 }, 90 90 transitionDuration: animationDuration.fast, 91 - transitionProperty: "background-color, border-color", 91 + transitionProperty: "background-color", 92 92 transitionTimingFunction: "ease-in-out", 93 93 }, 94 94 }); ··· 118 118 borderStyle: "solid", 119 119 borderWidth: 1, 120 120 121 - transitionDuration: animationDuration.fast, 122 - transitionProperty: "background-color, border-color", 121 + transitionDuration: animationDuration.slow, 122 + transitionProperty: "background-color", 123 123 transitionTimingFunction: "ease-in-out", 124 124 }, 125 125 bgSolid: { backgroundColor: primaryColor.solid1 }, ··· 138 138 ":disabled": primaryColor.component1, 139 139 }, 140 140 transitionDuration: animationDuration.fast, 141 - transitionProperty: "background-color, border-color", 141 + transitionProperty: "background-color", 142 142 transitionTimingFunction: "ease-in-out", 143 143 }, 144 144 bgUi: { ··· 150 150 ":disabled": primaryColor.component1, 151 151 }, 152 152 transitionDuration: animationDuration.fast, 153 - transitionProperty: "background-color, border-color", 153 + transitionProperty: "background-color", 154 154 transitionTimingFunction: "ease-in-out", 155 155 }, 156 156 bgAction: { ··· 163 163 ":disabled": primaryColor.component1, 164 164 }, 165 165 transitionDuration: animationDuration.fast, 166 - transitionProperty: "background-color, border-color", 166 + transitionProperty: "background-color", 167 167 transitionTimingFunction: "ease-in-out", 168 168 }, 169 169 bgSolidAction: { ··· 173 173 ":disabled": primaryColor.component1, 174 174 }, 175 175 transitionDuration: animationDuration.fast, 176 - transitionProperty: "background-color, border-color", 176 + transitionProperty: "background-color", 177 177 transitionTimingFunction: "ease-in-out", 178 178 }, 179 179 }); ··· 203 203 borderStyle: "solid", 204 204 borderWidth: 1, 205 205 transitionDuration: animationDuration.fast, 206 - transitionProperty: "background-color, border-color", 206 + transitionProperty: "background-color", 207 207 transitionTimingFunction: "ease-in-out", 208 208 }, 209 209 bgSolid: { backgroundColor: criticalColor.solid1 }, ··· 222 222 ":disabled": criticalColor.component1, 223 223 }, 224 224 transitionDuration: animationDuration.fast, 225 - transitionProperty: "background-color, border-color", 225 + transitionProperty: "background-color", 226 226 transitionTimingFunction: "ease-in-out", 227 227 }, 228 228 bgUi: { ··· 235 235 ":disabled": criticalColor.component1, 236 236 }, 237 237 transitionDuration: animationDuration.fast, 238 - transitionProperty: "background-color, border-color", 238 + transitionProperty: "background-color", 239 239 transitionTimingFunction: "ease-in-out", 240 240 }, 241 241 bgAction: { ··· 248 248 ":disabled": criticalColor.component1, 249 249 }, 250 250 transitionDuration: animationDuration.fast, 251 - transitionProperty: "background-color, border-color", 251 + transitionProperty: "background-color", 252 252 transitionTimingFunction: "ease-in-out", 253 253 }, 254 254 bgSolidAction: { ··· 258 258 ":disabled": criticalColor.component1, 259 259 }, 260 260 transitionDuration: animationDuration.fast, 261 - transitionProperty: "background-color, border-color", 261 + transitionProperty: "background-color", 262 262 transitionTimingFunction: "ease-in-out", 263 263 }, 264 264 }); ··· 302 302 ":disabled": warningColor.component1, 303 303 }, 304 304 transitionDuration: animationDuration.fast, 305 - transitionProperty: "background-color, border-color", 305 + transitionProperty: "background-color", 306 306 transitionTimingFunction: "ease-in-out", 307 307 }, 308 308 bgUi: { ··· 314 314 ":disabled": warningColor.component1, 315 315 }, 316 316 transitionDuration: animationDuration.fast, 317 - transitionProperty: "background-color, border-color", 317 + transitionProperty: "background-color", 318 318 transitionTimingFunction: "ease-in-out", 319 319 }, 320 320 bgAction: { ··· 327 327 ":disabled": warningColor.component1, 328 328 }, 329 329 transitionDuration: animationDuration.fast, 330 - transitionProperty: "background-color, border-color", 330 + transitionProperty: "background-color", 331 331 transitionTimingFunction: "ease-in-out", 332 332 }, 333 333 bgSolidAction: { ··· 337 337 ":disabled": warningColor.component1, 338 338 }, 339 339 transitionDuration: animationDuration.fast, 340 - transitionProperty: "background-color, border-color", 340 + transitionProperty: "background-color", 341 341 transitionTimingFunction: "ease-in-out", 342 342 }, 343 343 }); ··· 367 367 borderStyle: "solid", 368 368 borderWidth: 1, 369 369 transitionDuration: animationDuration.fast, 370 - transitionProperty: "background-color, border-color", 370 + transitionProperty: "background-color", 371 371 transitionTimingFunction: "ease-in-out", 372 372 }, 373 373 bgSolid: { backgroundColor: successColor.solid1 }, ··· 386 386 ":disabled": successColor.component1, 387 387 }, 388 388 transitionDuration: animationDuration.fast, 389 - transitionProperty: "background-color, border-color", 389 + transitionProperty: "background-color", 390 390 transitionTimingFunction: "ease-in-out", 391 391 }, 392 392 bgUi: { ··· 399 399 ":disabled": successColor.component1, 400 400 }, 401 401 transitionDuration: animationDuration.fast, 402 - transitionProperty: "background-color, border-color", 402 + transitionProperty: "background-color", 403 403 transitionTimingFunction: "ease-in-out", 404 404 }, 405 405 bgAction: { ··· 412 412 ":disabled": successColor.component1, 413 413 }, 414 414 transitionDuration: animationDuration.fast, 415 - transitionProperty: "background-color, border-color", 415 + transitionProperty: "background-color", 416 416 transitionTimingFunction: "ease-in-out", 417 417 }, 418 418 bgSolidAction: { ··· 422 422 ":disabled": successColor.component1, 423 423 }, 424 424 transitionDuration: animationDuration.fast, 425 - transitionProperty: "background-color, border-color", 425 + transitionProperty: "background-color", 426 426 transitionTimingFunction: "ease-in-out", 427 427 }, 428 428 });
+1 -1
packages/hip-ui/src/components/theme/useButtonStyles.ts
··· 48 48 ":disabled": "none", 49 49 }, 50 50 transitionDuration: animationDuration.fast, 51 - transitionProperty: "all", 51 + transitionProperty: "background-color, color", 52 52 transitionTimingFunction: "ease-in-out", 53 53 userSelect: "none", 54 54 whiteSpace: "nowrap",
+3 -3
packages/hip-ui/src/components/theme/useInputStyles.ts
··· 128 128 ":has([data-invalid])": `0 0 0 2px ${criticalColor.component1}`, 129 129 }, 130 130 transitionDuration: animationDuration.fast, 131 - transitionProperty: "background-color, border-color", 131 + transitionProperty: "background-color", 132 132 transitionTimingFunction: "ease-in-out", 133 133 }, 134 134 primaryInvalid: { ··· 192 192 ":disabled": uiColor.component1, 193 193 }, 194 194 transitionDuration: animationDuration.fast, 195 - transitionProperty: "background-color, border-color", 195 + transitionProperty: "background-color", 196 196 transitionTimingFunction: "ease-in-out", 197 197 }, 198 198 secondaryInvalid: { ··· 249 249 ":disabled": "transparent", 250 250 }, 251 251 transitionDuration: animationDuration.fast, 252 - transitionProperty: "background-color, border-color", 252 + transitionProperty: "background-color", 253 253 transitionTimingFunction: "ease-in-out", 254 254 }, 255 255 tertiaryInvalid: {