mm

packages/css/src/recipes/badgeSizeRecipe.ts

@@ -0,0 +1,23 @@
+import { cvr } from "../utils/cvr";
+
+export const badgeSizeRecipe = cvr({
+  base: "display--flex flex--nowrap justify--center items--center select--none bg--red color--white",
+  variants: {
+    size: {
+      xs: "text--addon-xs h--addon-xs w--addon-xs px--addon-xs",
+      sm: "text--addon-sm h--addon-sm w--addon-sm px--addon-sm",
+      md: "text--addon-md h--addon-md w--addon-md px--addon-md",
+      lg: "text--addon-lg h--addon-lg w--addon-lg px--addon-lg",
+    },
+    isCircle: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      isCircle: true,
+      class: "px--none",
+    },
+  ],
+});

packages/css/src/recipes/brandRecipe.ts

@@ -0,0 +1,13 @@
+import { cvr } from "../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/dotSizeRecipe.ts

@@ -0,0 +1,13 @@
+import { cvr } from "../utils/cvr";
+
+export const dotSizeRecipe = cvr({
+  base: "display--flex flex--nowrap justify--center items--center select--none bg--red color--white",
+  variants: {
+    size: {
+      xs: "h--dot-xs w--dot-xs",
+      sm: "h--dot-sm w--dot-sm",
+      md: "h--dot-md w--dot-md",
+      lg: "h--dot-lg w--dot-lg",
+    },
+  },
+});

packages/css/src/recipes/inlineSizeRecipe.ts

@@ -0,0 +1,20 @@
+import { cvr } from "../utils/cvr";
+
+export const inlineSizeRecipe = cvr({
+  base: "display--flex flex--nowrap justify--center items--center",
+  variants: {
+    size: {
+      xs: "text--xs font-weight--xs h--inline-xs gap--xs",
+      sm: "text--sm font-weight--sm h--inline-sm gap--sm",
+      md: "text--md font-weight--md h--inline-md gap--md",
+      lg: "text--lg font-weight--lg h--inline-lg gap--lg",
+      xl: "text--xl font-weight--xl h--inline-xl gap--xl",
+      "2xl": "text--2xl font-weight--2xl h--inline-2xl gap--2xl",
+      "3xl": "text--3xl font-weight--3xl h--inline-3xl gap--3xl",
+    },
+    shape: {
+      square: "rounded--none",
+      circle: "rounded--full",
+    },
+  },
+});

packages/css/src/recipes/itemSizeRecipe.ts

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

packages/css/src/recipes/itemVariantRecipe.ts

@@ -0,0 +1,72 @@
+import { cvr } from "../utils/cvr";
+
+export const itemVariantRecipe = cvr({
+  variants: {
+    variant: {
+      filled: "",
+      outline: "",
+      subtle: "",
+      ghost: "",
+    },
+    disabled: {
+      true: "",
+      false: "",
+    },
+    clickable: {
+      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",
+    },
+    {
+      variant: "filled",
+      clickable: false,
+      class: "variant--filled-non-clickable",
+    },
+    {
+      variant: "outline",
+      clickable: false,
+      class: "variant--outline-non-clickable",
+    },
+  ],
+});

packages/css/src/recipes/tabVariantRecipe.ts

@@ -0,0 +1,14 @@
+import { cvr } from "../utils/cvr";
+
+export const tabVariantRecipe = cvr({
+  variants: {
+    variant: {
+      outline: "",
+      ghost: "",
+    },
+    isAcitve: {
+      true: "",
+      false: "",
+    },
+  },
+});