@commercetools/nimbus 0.0.1

package/src/theme/keyframes.ts

@@ -0,0 +1,192 @@
+export const keyframes = {
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)",
+    },
+    "100%": {
+      transform: "rotate(360deg)",
+    },
+  },
+  pulse: {
+    "50%": {
+      opacity: "0.5",
+    },
+  },
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: "0",
+    },
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8,0,1,1)",
+    },
+    "50%": {
+      transform: "none",
+      animationTimingFunction: "cubic-bezier(0,0,0.2,1)",
+    },
+  },
+
+  "fade-in": {
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+  },
+  "fade-out": {
+    from: {
+      opacity: 1,
+    },
+    to: {
+      opacity: 0,
+    },
+  },
+  "slide-from-left-full": {
+    from: {
+      translate: "-100% 0",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-from-right-full": {
+    from: {
+      translate: "100% 0",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-from-top-full": {
+    from: {
+      translate: "0 -100%",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-from-bottom-full": {
+    from: {
+      translate: "0 100%",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-to-left-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "-100% 0",
+    },
+  },
+  "slide-to-right-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "100% 0",
+    },
+  },
+  "slide-to-top-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "0 -100%",
+    },
+  },
+  "slide-to-bottom-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "0 100%",
+    },
+  },
+  "slide-from-top": {
+    "0%": {
+      translate: "0 -0.5rem",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-from-bottom": {
+    "0%": {
+      translate: "0 0.5rem",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-from-left": {
+    "0%": {
+      translate: "-0.5rem 0",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-from-right": {
+    "0%": {
+      translate: "0.5rem 0",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-to-top": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "0 -0.5rem",
+    },
+  },
+  "slide-to-bottom": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "0 0.5rem",
+    },
+  },
+  "slide-to-left": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "-0.5rem 0",
+    },
+  },
+  "slide-to-right": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "0.5rem 0",
+    },
+  },
+  "scale-in": {
+    from: {
+      scale: "0.95",
+    },
+    to: {
+      scale: "1",
+    },
+  },
+  "scale-out": {
+    from: {
+      scale: "1",
+    },
+    to: {
+      scale: "0.95",
+    },
+  },
+};

package/src/theme/layer-styles.ts

@@ -0,0 +1,12 @@
+import { defineLayerStyles } from "@chakra-ui/react";
+
+type LayerStylesType = ReturnType<typeof defineLayerStyles>;
+
+export const layerStyles: LayerStylesType = defineLayerStyles({
+  disabled: {
+    value: {
+      opacity: "0.5",
+      cursor: "not-allowed",
+    },
+  },
+});

package/src/theme/recipes/index.ts

@@ -0,0 +1,21 @@
+import { avatarRecipe } from "@/components/avatar/avatar.recipe";
+import { buttonRecipe } from "@/components/button/button.recipe";
+import { codeRecipe } from "@/components/code/code.recipe";
+import { headingRecipe } from "@/components/heading/heading.recipe";
+import { inputRecipe } from "@/components/input/input.recipe";
+import { kbdRecipe } from "@/components/kbd/kbd.recipe";
+import { linkRecipe } from "@/components/link/link.recipe";
+import { tooltipRecipe } from "@/components/tooltip/tooltip.recipe";
+import { textInputRecipe } from "@/components/text-input/text-input.recipe";
+
+export const recipes = {
+  avatar: avatarRecipe,
+  button: buttonRecipe,
+  code: codeRecipe,
+  heading: headingRecipe,
+  input: inputRecipe,
+  kbd: kbdRecipe,
+  link: linkRecipe,
+  tooltip: tooltipRecipe,
+  textInput: textInputRecipe,
+};

package/src/theme/semantic-tokens/colors.ts

@@ -0,0 +1,55 @@
+import { defineSemanticTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const colors = defineSemanticTokens.colors({
+  bg: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.neutral.1}",
+        _dark: "{colors.neutral.1}",
+      },
+    },
+  },
+  fg: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.neutral.12}",
+        _dark: "{colors.neutral.12}",
+      },
+    },
+  },
+  border: {
+    DEFAULT: {
+      value: "{colors.neutral.6}",
+    },
+    muted: {
+      value: "{colors.neutral.7}",
+    },
+    subtle: {
+      value: "{colors.neutral.6}",
+    },
+    emphasized: {
+      value: "{colors.neutral.8}",
+    },
+    inverted: {
+      value: "{colors.neutral.9}",
+    },
+    error: {
+      value: "{colors.error.8}",
+    },
+    warning: {
+      value: "{colors.danger.8}",
+    },
+    success: {
+      value: "{colors.success.8}",
+    },
+    info: {
+      value: "{colors.ingo.8}",
+    },
+  },
+  ...themeTokens.color["system-palettes"],
+  ...themeTokens.color["brand-palettes"],
+  ...themeTokens.color["semantic-palettes"],
+});
+
+export const darkColors = colors;

package/src/theme/semantic-tokens/index.ts

@@ -0,0 +1,9 @@
+import { colors } from "./colors";
+import { shadows } from "./shadows";
+import { radii } from "./radii";
+
+export const semanticTokens = {
+  colors,
+  shadows,
+  radii,
+};

package/src/theme/semantic-tokens/radii.ts

@@ -0,0 +1,3 @@
+import { defineSemanticTokens } from "@chakra-ui/react";
+
+export const radii = defineSemanticTokens.radii({});

package/src/theme/semantic-tokens/shadows.ts

@@ -0,0 +1,4 @@
+import { defineSemanticTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const shadows = defineSemanticTokens.shadows(themeTokens.shadow);

package/src/theme/slot-recipes/index.ts

@@ -0,0 +1,15 @@
+import { dialogSlotRecipe } from "@/components/dialog/dialog.recipe";
+import { listSlotRecipe } from "@/components/list/list.recipe";
+import { tableSlotRecipe } from "@/components/table/table.recipe";
+import { checkboxSlotRecipe } from "@/components/checkbox/checkbox.recipe";
+import { selectSlotRecipe } from "@/components/select/select.recipe";
+import { accordionSlotRecipe } from "@/components/accordion/accordion.recipe";
+
+export const slotRecipes = {
+  dialog: dialogSlotRecipe,
+  list: listSlotRecipe,
+  table: tableSlotRecipe,
+  checkbox: checkboxSlotRecipe,
+  select: selectSlotRecipe,
+  accordion: accordionSlotRecipe,
+};

package/src/theme/text-styles.ts

@@ -0,0 +1,8 @@
+import { defineTextStyles } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+type TextStylesType = ReturnType<typeof defineTextStyles>;
+
+export const textStyles: TextStylesType = defineTextStyles(
+  themeTokens.textStyle
+);

package/src/theme/tokens/animations.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const animations = defineTokens.animations(themeTokens.animation);

package/src/theme/tokens/aspect-ratios.ts

@@ -0,0 +1,5 @@
+import { defineTokens } from "@chakra-ui/react";
+
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const aspectRatios = defineTokens.durations(themeTokens.aspectRatio);

package/src/theme/tokens/blurs.ts

@@ -0,0 +1,5 @@
+import { defineTokens } from "@chakra-ui/react";
+
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const blurs = defineTokens.blurs(themeTokens.blur);

package/src/theme/tokens/borders.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const borders = defineTokens.borders(themeTokens.border);

package/src/theme/tokens/colors.ts

@@ -0,0 +1,8 @@
+import { themeTokens } from "@commercetools/nimbus-tokens";
+import { defineTokens } from "@chakra-ui/react";
+
+export const colors = defineTokens.colors({
+  ...themeTokens.color["blacks-and-whites"],
+});
+
+export const darkColors = colors;

package/src/theme/tokens/cursor.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const cursor = defineTokens.cursor(themeTokens.cursor);

package/src/theme/tokens/durations.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const durations = defineTokens.durations(themeTokens.duration);

package/src/theme/tokens/easings.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const easings = defineTokens.easings(themeTokens.easing);

package/src/theme/tokens/font-sizes.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const fontSizes = defineTokens.fontSizes(themeTokens.fontSize);

package/src/theme/tokens/font-weights.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const fontWeights = defineTokens.fontWeights(themeTokens.fontWeight);

package/src/theme/tokens/fonts.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const fonts = defineTokens.fonts(themeTokens.fontFamily);

package/src/theme/tokens/index.ts

@@ -0,0 +1,57 @@
+import { aspectRatios } from "./aspect-ratios";
+import { animations } from "./animations";
+import { blurs } from "./blurs";
+import { borders } from "./borders";
+import { colors, darkColors } from "./colors";
+import { durations } from "./durations";
+import { easings } from "./easings";
+import { fonts } from "./fonts";
+import { fontSizes } from "./font-sizes";
+import { fontWeights } from "./font-weights";
+import { letterSpacings } from "./letter-spacings";
+import { lineHeights } from "./line-heights";
+import { radii } from "./radii";
+import { spacing } from "./spacing";
+import { sizes } from "./sizes";
+import { zIndex } from "./z-index";
+import { cursor } from "./cursor";
+
+export const tokens = {
+  aspectRatios,
+  animations,
+  blurs,
+  borders,
+  colors,
+  durations,
+  easings,
+  fonts,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+  radii,
+  spacing,
+  sizes,
+  zIndex,
+  cursor,
+};
+
+export const darkTokens = {
+  aspectRatios,
+  animations,
+  blurs,
+  borders,
+  colors: darkColors,
+  durations,
+  easings,
+  fonts,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+  radii,
+  spacing,
+  sizes,
+  zIndex,
+  cursor,
+};

package/src/theme/tokens/letter-spacings.ts

@@ -0,0 +1,24 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+// convert token percentage values (needed by figma) to em values (needded by code)
+// todo: fix this in the token build process
+const convertPercentToEm = (
+  obj: Record<string, { value: string }>
+): Record<string, { value: string }> => {
+  return Object.keys(obj).reduce(
+    (acc, key) => {
+      // Remove '%' and divide by 100 to convert to em
+      const percentage = parseFloat(obj[key].value);
+      const emValue = percentage / 100; // 1% = 0.01em, 100% = 1em
+      // Update the object with the new em value
+      acc[key] = { value: `${emValue}em` };
+      return acc;
+    },
+    {} as Record<string, { value: string }>
+  );
+};
+
+export const letterSpacings = defineTokens.letterSpacings(
+  convertPercentToEm(themeTokens.letterSpacing)
+);

package/src/theme/tokens/line-heights.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const lineHeights = defineTokens.lineHeights(themeTokens.lineHeight);

package/src/theme/tokens/radii.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const radii = defineTokens.radii(themeTokens.borderRadius);

package/src/theme/tokens/sizes.ts

@@ -0,0 +1,120 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const sizes = defineTokens.sizes({
+  ...themeTokens.size,
+  "1/2": {
+    value: "50%",
+  },
+  "1/3": {
+    value: "33.333333%",
+  },
+  "2/3": {
+    value: "66.666667%",
+  },
+  "1/4": {
+    value: "25%",
+  },
+  "3/4": {
+    value: "75%",
+  },
+  "1/5": {
+    value: "20%",
+  },
+  "2/5": {
+    value: "40%",
+  },
+  "3/5": {
+    value: "60%",
+  },
+  "4/5": {
+    value: "80%",
+  },
+  "1/6": {
+    value: "16.666667%",
+  },
+  "2/6": {
+    value: "33.333333%",
+  },
+  "3/6": {
+    value: "50%",
+  },
+  "4/6": {
+    value: "66.666667%",
+  },
+  "5/6": {
+    value: "83.333333%",
+  },
+  "1/12": {
+    value: "8.333333%",
+  },
+  "2/12": {
+    value: "16.666667%",
+  },
+  "3/12": {
+    value: "25%",
+  },
+  "4/12": {
+    value: "33.333333%",
+  },
+  "5/12": {
+    value: "41.666667%",
+  },
+  "6/12": {
+    value: "50%",
+  },
+  "7/12": {
+    value: "58.333333%",
+  },
+  "8/12": {
+    value: "66.666667%",
+  },
+  "9/12": {
+    value: "75%",
+  },
+  "10/12": {
+    value: "83.333333%",
+  },
+  "11/12": {
+    value: "91.666667%",
+  },
+  max: {
+    value: "max-content",
+  },
+  min: {
+    value: "min-content",
+  },
+  fit: {
+    value: "fit-content",
+  },
+  prose: {
+    value: "60ch",
+  },
+  full: {
+    value: "100%",
+  },
+  dvh: {
+    value: "100dvh",
+  },
+  svh: {
+    value: "100svh",
+  },
+  lvh: {
+    value: "100lvh",
+  },
+  dvw: {
+    value: "100dvw",
+  },
+  svw: {
+    value: "100svw",
+  },
+  lvw: {
+    value: "100lvw",
+  },
+  vw: {
+    value: "100vw",
+  },
+  vh: {
+    value: "100vh",
+  },
+});

package/src/theme/tokens/spacing.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const spacing = defineTokens.spacing(themeTokens.spacing);

package/src/theme/tokens/z-index.ts

@@ -0,0 +1,4 @@
+import { defineTokens } from "@chakra-ui/react";
+import { themeTokens } from "@commercetools/nimbus-tokens";
+
+export const zIndex = defineTokens.zIndex(themeTokens.zIndex);

package/src/utils/extractStyleProps.ts

@@ -0,0 +1,26 @@
+import { defaultSystem } from "@chakra-ui/react";
+
+/**
+ * Extracts chakra-ui style-props from an object, separating them from other props
+ * @param props The props object to separate
+ * @returns A tuple containing [styleProps, otherProps]
+ */
+export function extractStyleProps<T extends object>(
+  props: T
+): [Record<string, unknown>, Omit<T, string>] {
+  const styleProps: Record<string, unknown> = {};
+  const otherProps = { ...props } as Record<string, unknown>;
+
+  // Process only own properties
+  Object.keys(props).forEach((key) => {
+    if (
+      Object.prototype.hasOwnProperty.call(props, key) &&
+      defaultSystem.isValidProperty(key)
+    ) {
+      styleProps[key] = props[key as keyof T];
+      delete otherProps[key];
+    }
+  });
+
+  return [styleProps, otherProps as Omit<T, string>];
+}

package/src/utils/fixedForwardRef.ts

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+
+/**
+ * This is a workaround to fix the type of `forwardRef`.
+ * The issue is that the type of `forwardRef` is not correct when using generics.
+ *
+ * While not ideal from a type-safety perspective, it's necessary because
+ * TypeScript cannot properly express the transformation that happens when
+ * combining generics with `forwardRef`.
+ */
+export const fixedForwardRef = <T, P extends object>(
+  render: (props: P, ref: React.Ref<T>) => JSX.Element
+): ((props: P & React.RefAttributes<T>) => JSX.Element) => {
+  // @ts-expect-error - This tells TypeScript to "trust us" about the resulting type.
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
+  return forwardRef(render) as any;
+};