Define layerStyles for ease of use downstream (#202)

* feat(layer-styles): add base for layer styles in aniref preset

* chore: add 950 for brand.secondary color palette

* chore: add TODO comment for layerStyles

* ci(changeset): add changeset for layerStyles addition

* chore: remove unnecessary comment

* chore: add TODO comment for layerStyles

* refactor: update layerStyles and Button recipe

* ci(changesets): add changeset for button recipe update

* chore: remove unnecessary button layer style from preset

* chore: remove incorrect TODO comment about layer style implementation

* feat: add accent gradient to layer styles

* ci(changesets): add changeset for banner recipe update

* chore: update layer style naming conventions

* fix: update descriptions for layer styles

* chore: update layer style naming conventions

* fix(Button): update recipe for ghost variant disabled styles

* chore(Banner): remove unnecessary variants from recipe

* build(deps): update framer-motion dep

.changeset/chatty-bobcats-film.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+Defined `layerStyles` in aniref preset to allow for prop use downstream

.changeset/friendly-windows-vanish.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Updated `Button` recipe styles for consistent sizing across variants

.changeset/ten-coins-complain.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Remove variants from `Banner` recipe in favor of `defaultGradient` layer style

package.json

@@ -98,7 +98,7 @@
     "eslint-plugin-testing-library": "^6.2.0",
     "eslint-plugin-typescript-sort-keys": "^3.1.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "framer-motion": "^10.16.16",
+    "framer-motion": "^10.17.4",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jsonfile": "^6.1.0",

src/components/core/Banner/Banner.recipe.ts

@@ -18,13 +18,4 @@ export const bannerRecipe = defineRecipe({
     background: "accent.default",
     color: "accent.fg",
   },
-  variants: {
-    variant: {
-      gradient: {
-        bgGradient: "to-r",
-        gradientFrom: "brand.secondary.500",
-        gradientTo: "accent.default",
-      },
-    },
-  },
 });

src/components/core/Banner/Banner.stories.tsx

@@ -25,7 +25,7 @@ export const Closeable: Story = {
 export const Gradient: Story = {
   render: () => (
     <VStack position="absolute" inset={0}>
-      <Banner closable variant="gradient">
+      <Banner closable layerStyle="defaultGradient">
         Banner
       </Banner>
     </VStack>
@@ -35,7 +35,7 @@ export const Gradient: Story = {
 export const Stacked: Story = {
   render: () => (
     <VStack gap={0} position="absolute" inset={0}>
-      <Banner variant="gradient">Banner</Banner>
+      <Banner layerStyle="defaultGradient">Banner</Banner>
       <Banner>Banner</Banner>
     </VStack>
   ),

src/components/core/Button/Button.recipe.ts

@@ -4,6 +4,7 @@ export const buttonRecipe = defineRecipe({
   className: "button",
   description: "The styles for the Button component",
   base: {
+    borderWidth: "1px",
     cursor: "pointer",
     fontWeight: "bold",
     borderRadius: "md",
@@ -27,21 +28,24 @@ export const buttonRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
+        borderColor: "accent.default",
         color: "accent.fg",
         bgColor: "accent.default",
         _hover: {
           bgColor: "accent.emphasized",
+          borderColor: "accent.emphasized",
         },
         _disabled: {
+          borderColor: "border.disabled",
           bgColor: "bg.disabled",
           cursor: "not-allowed",
           _hover: {
+            borderColor: "border.disabled",
             bgColor: "bg.disabled",
           },
         },
       },
       secondary: {
-        borderWidth: "1px",
         borderColor: "border.emphasized",
         bgColor: "bg.default",
         color: "fg.emphasized",
@@ -53,40 +57,48 @@ export const buttonRecipe = defineRecipe({
           color: "fg.disabled",
           cursor: "not-allowed",
           _hover: {
-            background: "transparent",
+            background: "bg.default",
             borderColor: "border.disabled",
             color: "fg.disabled",
           },
         },
       },
       ghost: {
         bgColor: "transparent",
+        borderColor: "transparent",
         color: "fg.emphasized",
         _hover: {
           color: "fg.default",
           background: "accent.subtle",
+          borderColor: "accent.subtle",
         },
         _disabled: {
+          borderColor: "transparent",
           color: "fg.disabled",
           cursor: "not-allowed",
           _hover: {
             background: "transparent",
             color: "fg.disabled",
+            borderColor: "transparent",
           },
         },
       },
       round: {
         borderRadius: "full !important",
         color: "accent.fg",
         bgColor: "accent.default",
+        borderColor: "accent.default",
         _hover: {
           bgColor: "accent.emphasized",
+          borderColor: "accent.emphasized",
         },
         _disabled: {
+          borderColor: "border.disabled",
           bgColor: "bg.disabled",
           cursor: "not-allowed",
           _hover: {
             bgColor: "bg.disabled",
+            borderColor: "border.disabled",
           },
         },
       },

src/lib/panda/aniref.preset.ts

@@ -9,6 +9,7 @@ import {
   fonts,
   globalCss,
   keyframes,
+  layerStyles,
   recipes,
   semanticTokens,
   slotRecipes,
@@ -33,6 +34,7 @@ const anirefPreset = definePreset({
     extend: {
       breakpoints,
       keyframes,
+      layerStyles,
       recipes,
       semanticTokens,
       slotRecipes,

src/lib/panda/colors.ts

@@ -27,6 +27,7 @@ const colors = defineTokens.colors({
       700: { value: "#45d290" },
       800: { value: "#31cd84" },
       900: { value: "#28a369" },
+      950: { value: "#05291d" },
     },
     tertiary: {
       50: { value: "#ffdddf" },

src/lib/panda/index.ts

@@ -6,6 +6,7 @@ export { default as easings } from "./easings";
 export { default as fonts } from "./fonts";
 export { default as globalCss } from "./globalCss";
 export { default as keyframes } from "./keyframes";
+export { default as layerStyles } from "./layerStyles";
 export { recipes, slotRecipes } from "./recipes";
 export { default as semanticTokens } from "./semanticTokens";
 export { default as zIndex } from "./zIndex";

src/lib/panda/layerStyles.ts

@@ -0,0 +1,24 @@
+import { defineLayerStyles } from "@pandacss/dev";
+
+const layerStyles = defineLayerStyles({
+  defaultGradient: {
+    description: "layer styles for accent gradient",
+    value: {
+      background:
+        // TODO update when colorPalette composition strategy is implemented
+        "linear-gradient(to right, token(colors.brand.secondary.500), token(colors.accent.default))",
+    },
+  },
+  subtleGradient: {
+    description: "layer styles for subtle gradient",
+    value: {
+      background: {
+        base: "linear-gradient(to right, token(colors.brand.secondary.50), token(colors.brand.primary.50))",
+        _dark:
+          "linear-gradient(to right, token(colors.brand.secondary.950), token(colors.brand.primary.950))",
+      },
+    },
+  },
+});
+
+export default layerStyles;