@commercetools/nimbus 0.0.1 → 0.0.3-alpha.2

package/src/theme/keyframes.ts

@@ -1,192 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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

package/src/utils/extractStyleProps.ts

@@ -1,26 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;
-};