mm

packages/css/src/recipes/brandRecipe.ts

@@ -0,0 +1,13 @@
+import { cvr } from "../styles/utils/cvr";
+
+export const brandRecipe = cvr({
+  variants: {
+    brand: {
+      success: "brand--success",
+      danger: "brand--danger",
+      info: "brand--info",
+      warning: "brand--warning",
+      emphasize: "brand--emphasize",
+    },
+  },
+});

packages/css/src/recipes/inlineSizeRecipe.ts

@@ -0,0 +1,15 @@
+import { cvr } from "../styles/utils/cvr";
+
+export const inlineSizeRecipe = cvr({
+  base: "display--flex flex--nowrap justify--center items--center",
+  variants: {
+    size: {
+      xs: "text--xs h--inline-xs gap--xs",
+      sm: "text--sm h--inline-sm gap--sm",
+      md: "text--md h--inline-md gap--md",
+      lg: "text--lg h--inline-lg gap--lg",
+      xl: "text--xl h--inline-xl gap--xl",
+      "2xl": "text--2xl h--inline-2xl gap--2xl",
+    },
+  },
+});

packages/css/src/recipes/itemSizeRecipe.ts

@@ -0,0 +1,46 @@
+import { cvr } from "../styles/utils/cvr";
+
+export const itemSizeRecipe = cvr({
+  base: "select--none display--flex flex--nowrap justify--center items--center",
+  variants: {
+    size: {
+      xs: "text--xs h--item-xs gap--xs px--xs",
+      sm: "text--sm h--item-sm gap-sm px--sm",
+      md: "text--md h--item-md gap-md px--md",
+      lg: "text--lg h--item-lg gap-lg px--lg",
+      xl: "text--xl h--item-xl gap-xl px--xl",
+      "2xl": "text--2xl h--item-2xl gap--2xl px--2xl",
+    },
+    shape: {
+      square: "rounded--none",
+      rounded: "",
+      circle: "rounded--full",
+    },
+    iconOnly: {
+      true: "px--none",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    { iconOnly: false, size: "xs", class: "px--xs" },
+    { iconOnly: false, size: "sm", class: "px--sm" },
+    { iconOnly: false, size: "md", class: "px--md" },
+    { iconOnly: false, size: "lg", class: "px--lg" },
+    { iconOnly: false, size: "xl", class: "px--xl" },
+    { iconOnly: false, size: "2xl", class: "px--2xl" },
+    // ==================================================
+    { shape: "rounded", size: "xs", class: "rounded--sm" },
+    { shape: "rounded", size: "sm", class: "rounded--md" },
+    { shape: "rounded", size: "md", class: "rounded--lg" },
+    { shape: "rounded", size: "lg", class: "rounded--xl" },
+    { shape: "rounded", size: "xl", class: "rounded--2xl" },
+    { shape: "rounded", size: "2xl", class: "rounded--3xl" },
+    // ==================================================
+    { iconOnly: true, size: "xs", class: "w--item-xs" },
+    { iconOnly: true, size: "sm", class: "w--item-sm" },
+    { iconOnly: true, size: "md", class: "w--item-md" },
+    { iconOnly: true, size: "lg", class: "w--item-lg" },
+    { iconOnly: true, size: "xl", class: "w--item-xl" },
+    { iconOnly: true, size: "2xl", class: "w--item-2xl" },
+  ],
+});

packages/css/src/recipes/variantRecipe.ts

@@ -0,0 +1,58 @@
+import { cvr } from "../styles/utils/cvr";
+
+export const variantRecipe = cvr({
+  variants: {
+    variant: {
+      filled: "",
+      outline: "",
+      subtle: "",
+      ghost: "",
+    },
+    disabled: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      variant: "filled",
+      class: "variant--filled",
+    },
+    {
+      disabled: false,
+      variant: "outline",
+      class: "variant--outline",
+    },
+    {
+      disabled: false,
+      variant: "subtle",
+      class: "variant--subtle",
+    },
+    {
+      disabled: false,
+      variant: "ghost",
+      class: "variant--ghost",
+    },
+    {
+      disabled: true,
+      variant: "filled",
+      class: "variant--filled-disabled",
+    },
+    {
+      disabled: true,
+      variant: "outline",
+      class: "variant--outline-disabled",
+    },
+    {
+      disabled: true,
+      variant: "subtle",
+      class: "variant--subtle-disabled",
+    },
+    {
+      disabled: true,
+      variant: "ghost",
+      class: "variant--ghost-disabled",
+    },
+  ],
+});