onecart-ui 1.0.6 → 2.0.0

package/src/components/Button/Button.tsx

@@ -14,6 +14,7 @@ export const Button: React.FC<ButtonProps> = ({
   icon,
   fullWidth = false,
   style,
+  ghostUnderline = true,
   accessibilityLabel,
   testID,
   onClick,
@@ -63,6 +64,7 @@ export const Button: React.FC<ButtonProps> = ({
     };
 
     // Apply styles based on type and state
+    // TODO: consider using maps
     switch (type) {
       case "primary":
         switch (buttonState) {
@@ -157,7 +159,7 @@ export const Button: React.FC<ButtonProps> = ({
             break;
         }
         break;
-      case "ghost":
+      case "ghost": {
         switch (buttonState) {
           case "default":
             textStyle.color = tokens.ACTION_TERTIARY_DEFAULT;
@@ -172,7 +174,14 @@ export const Button: React.FC<ButtonProps> = ({
             textStyle.color = tokens.ACTION_TERTIARY_DISABLE;
             break;
         }
+        // Underline ghost button text by default unless explicitly disabled
+        if (!disabled && ghostUnderline) {
+          textStyle.textDecoration = "underline";
+        } else {
+          textStyle.textDecoration = "none";
+        }
         break;
+      }
       case "destructive":
         break;
     }

package/src/components/Typography/Body.tsx

@@ -6,7 +6,6 @@ export const Body: React.FC<BodyProps> = ({
   size = "lg",
   element = "p",
   align = "left",
-  weight,
   color,
   truncate = false,
   lineClamp,
@@ -34,13 +33,7 @@ export const Body: React.FC<BodyProps> = ({
         break;
     }
 
-    let fontWeightValue = parseInt(tokenSet.fontWeight);
-    if (weight) {
-      if (weight === "normal") fontWeightValue = 400;
-      else if (weight === "medium") fontWeightValue = 500;
-      else if (weight === "semibold") fontWeightValue = 600;
-      else if (weight === "bold") fontWeightValue = 700;
-    }
+    const fontWeightValue = parseInt(tokenSet.fontWeight);
 
     const baseStyles: React.CSSProperties = {
       fontFamily: tokenSet.fontFamily,

package/src/components/Typography/Display.tsx

@@ -6,7 +6,6 @@ export const Display: React.FC<DisplayProps> = ({
   size = "2xl",
   element = "h1",
   align = "left",
-  weight,
   color,
   truncate = false,
   lineClamp,
@@ -21,13 +20,7 @@ export const Display: React.FC<DisplayProps> = ({
     const tokenSet =
       size === "2xl" ? typographyTokens.display2xl : typographyTokens.displayXl;
 
-    let fontWeightValue = parseInt(tokenSet.fontWeight);
-    if (weight) {
-      if (weight === "normal") fontWeightValue = 400;
-      else if (weight === "medium") fontWeightValue = 500;
-      else if (weight === "semibold") fontWeightValue = 600;
-      else if (weight === "bold") fontWeightValue = 700;
-    }
+    const fontWeightValue = parseInt(tokenSet.fontWeight);
 
     const baseStyles: React.CSSProperties = {
       fontFamily: tokenSet.fontFamily,

package/src/components/Typography/Heading.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 import typographyTokens from "../../styles/tokens/typography";
-import { HeadingProps, TypographyWeight } from "../../types/Typography";
+import { HeadingProps } from "../../types/Typography";
 
 type HeadingTokenKey =
   | "headingXl"
   | "headingLg"
   | "headingMd"
   | "headingSm"
-  | "headingXs";
+  | "headingXs"
+  | "heading2xs";
 
 export const Heading: React.FC<HeadingProps> = ({
   size = "xl",
   element = "h2",
   align = "left",
-  weight,
   color,
   truncate = false,
   lineClamp,
@@ -31,13 +31,12 @@ export const Heading: React.FC<HeadingProps> = ({
       md: "headingMd",
       sm: "headingSm",
       xs: "headingXs",
+      "2xs": "heading2xs",
     };
 
     const tokenSet = typographyTokens[tokenKeyMap[size]];
 
-    const fontWeightValue = weight
-      ? parseInt(typographyTokens.weights[weight])
-      : parseInt(tokenSet.fontWeight);
+    const fontWeightValue = parseInt(tokenSet.fontWeight);
 
     const baseStyles: React.CSSProperties = {
       fontFamily: tokenSet.fontFamily,
@@ -90,6 +89,7 @@ export const Heading: React.FC<HeadingProps> = ({
     md: "h3",
     sm: "h4",
     xs: "h5",
+    "2xs": "h6",
   };
 
   const defaultElement = element === "h2" ? headingElementMap[size] : element;

package/src/components/Typography/Utility.tsx

@@ -6,7 +6,6 @@ export const Utility: React.FC<UtilityProps> = ({
   variant = "button",
   element,
   align = "left",
-  weight,
   color,
   truncate = false,
   lineClamp,
@@ -46,13 +45,7 @@ export const Utility: React.FC<UtilityProps> = ({
         break;
     }
 
-    let fontWeightValue = parseInt(tokenSet.fontWeight);
-    if (weight) {
-      if (weight === "normal") fontWeightValue = 400;
-      else if (weight === "medium") fontWeightValue = 500;
-      else if (weight === "semibold") fontWeightValue = 600;
-      else if (weight === "bold") fontWeightValue = 700;
-    }
+    const fontWeightValue = parseInt(tokenSet.fontWeight);
 
     const baseStyles: React.CSSProperties = {
       fontFamily: tokenSet.fontFamily,

package/src/styles/tokens/typography.ts

@@ -61,7 +61,8 @@ export const typographyTokens = {
     fontFamily: tokens.HEADING_SM_FONT_FAMILY,
     fontSize: pxToNumber(tokens.HEADING_SM_FONT_SIZE),
     fontWeight: normalizeFontWeight(tokens.HEADING_SM_FONT_WEIGHT),
-    lineHeight: pxToNumber(tokens.LINE_HEIGHT_XL),
+    // Correct line-height to the specific Heading SM token (36px) per design spec
+    lineHeight: pxToNumber(tokens.HEADING_SM_LINE_HEIGHT),
     color: tokens.TEXT_HEADER,
     letterSpacing: tokens.HEADING_SM_LETTER_SPACING,
     textDecoration: tokens.HEADING_SM_TEXT_DECORATION,
@@ -77,6 +78,16 @@ export const typographyTokens = {
     textDecoration: tokens.HEADING_XS_TEXT_DECORATION,
     textCase: tokens.HEADING_XS_TEXT_CASE,
   },
+  heading2xs: {
+    fontFamily: tokens.HEADING_2XS_FONT_FAMILY,
+    fontSize: pxToNumber(tokens.HEADING_2XS_FONT_SIZE),
+    fontWeight: normalizeFontWeight(tokens.HEADING_2XS_FONT_WEIGHT),
+    lineHeight: pxToNumber(tokens.HEADING_2XS_LINE_HEIGHT),
+    color: tokens.TEXT_HEADER,
+    letterSpacing: tokens.HEADING_2XS_LETTER_SPACING,
+    textDecoration: tokens.HEADING_2XS_TEXT_DECORATION,
+    textCase: tokens.HEADING_2XS_TEXT_CASE,
+  },
 
   // Body text variants
   bodyXl: {
@@ -171,13 +182,7 @@ export const typographyTokens = {
     textCase: tokens.UTILITY_CAPTION_TEXT_CASE,
   },
 
-  // Weights mapping for custom weight overrides
-  weights: {
-    normal: "400", // Regular weight
-    medium: normalizeFontWeight(tokens.MEDIUM),
-    semibold: normalizeFontWeight(tokens.SEMI_BOLD),
-    bold: "700", // Bold weight (not directly defined in tokens)
-  },
+  // Removed weights mapping (font-weight locked to tokens)
 };
 
 export default typographyTokens;

package/src/types/Button.ts

@@ -16,6 +16,8 @@ export interface ButtonProps {
   icon?: string;
   fullWidth?: boolean;
   style?: React.CSSProperties;
+  /** Ghost buttons are underlined by default; set to false to remove underline */
+  ghostUnderline?: boolean;
   accessibilityLabel?: string;
   testID?: string;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;

package/src/types/Typography.ts

@@ -2,12 +2,14 @@ import React from "react";
 
 export type TypographyAlign = "left" | "center" | "right";
 
-export type TypographyWeight = "normal" | "medium" | "semibold" | "bold";
+// Removed adjustable weight overrides for Display & Heading to enforce Figma design tokens.
+// If needed in other components, reintroduce with narrower scope.
+export type TypographyWeight = never; // no external weight override
 
 export interface BaseTypographyProps {
   element?: React.ElementType;
   align?: TypographyAlign;
-  weight?: TypographyWeight;
+  // weight removed to stick to token-defined font-weight for semantic typography
   color?: string;
   truncate?: boolean;
   lineClamp?: number;
@@ -22,7 +24,7 @@ export interface DisplayProps extends BaseTypographyProps {
   size: "2xl" | "xl";
 }
 export interface HeadingProps extends BaseTypographyProps {
-  size: "xl" | "lg" | "md" | "sm" | "xs";
+  size: "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
 }
 
 export interface BodyProps extends BaseTypographyProps {