@liner-fe/prism 1.8.7 → 1.8.9

package/lib/components/Typography/Heading.d.ts

@@ -3,4 +3,4 @@ export interface IHeadingProps extends ITypographyCommon<HTMLHeadingElement> {
     type: 'answer';
     size: 1 | 2 | 3 | 4 | 5 | 6;
 }
-export declare const Heading: ({ size, children, type, className, style, color, ...rest }: IHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ size, children, type, className, color, ...rest }: IHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Typography/types.d.ts

@@ -1,6 +1,6 @@
 import { SystemKeys } from '@liner-fe/design-token';
 import { HTMLAttributes } from 'react';
-export interface ITypographyCommon<T extends HTMLElement = HTMLParagraphElement> extends HTMLAttributes<T> {
+export interface ITypographyCommon<T extends HTMLElement = HTMLParagraphElement> extends Omit<HTMLAttributes<T>, 'color'> {
     color?: SystemKeys;
 }
 export type BLACK = 'black';

package/lib/components/Typography/utils.d.ts

@@ -0,0 +1,3 @@
+import { SystemKeys } from '@liner-fe/design-token';
+import { CSSProperties } from 'react';
+export declare const getStyle: (color?: SystemKeys) => CSSProperties;

package/lib/index.mjs

@@ -4667,9 +4667,19 @@ import { useEffect, useRef, useState } from "react";
 
 // src/components/Typography/Paragraph.tsx
 import clsx3 from "clsx";
+
+// src/components/Typography/utils.ts
+import { vars } from "@liner-fe/design-token";
+var getStyle = /* @__PURE__ */ __name((color) => {
+  const style = {};
+  style.color = color ? vars.color[color] : vars.color["neutral-label-primary"];
+  return style;
+}, "getStyle");
+
+// src/components/Typography/Paragraph.tsx
 import { jsx as jsx92 } from "react/jsx-runtime";
 var Paragraph = /* @__PURE__ */ __name(({ size, type, weight, className, children, color, ...rest }) => {
-  return /* @__PURE__ */ jsx92("p", { ...rest, className: clsx3(`lp-sys-typo-paragraph${size}-${type}-${weight}`, className), style: { color }, children });
+  return /* @__PURE__ */ jsx92("p", { ...rest, className: clsx3(`lp-sys-typo-paragraph${size}-${type}-${weight}`, className), style: getStyle(color), children });
 }, "Paragraph");
 
 // src/components/Toast/index.tsx
@@ -4732,30 +4742,46 @@ var SingleToast = /* @__PURE__ */ __name((props) => {
 // src/components/Typography/Heading.tsx
 import clsx4 from "clsx";
 import { jsx as jsx94 } from "react/jsx-runtime";
-var Heading = /* @__PURE__ */ __name(({ size, children, type, className, style, color, ...rest }) => {
+var Heading = /* @__PURE__ */ __name(({ size, children, type, className, color, ...rest }) => {
   const Element = `h${size}`;
-  return /* @__PURE__ */ jsx94(Element, { ...rest, className: clsx4(`lp-sys-typo-heading${size}-${type}`, className), style: { color }, children });
+  return /* @__PURE__ */ jsx94(Element, { ...rest, className: clsx4(`lp-sys-typo-heading${size}-${type}`, className), style: getStyle(color), children });
 }, "Heading");
 
 // src/components/Typography/Display.tsx
 import clsx5 from "clsx";
 import { jsx as jsx95 } from "react/jsx-runtime";
 var Display = /* @__PURE__ */ __name(({ size, type, weight, className, children, color, ...rest }) => {
-  return /* @__PURE__ */ jsx95("p", { ...rest, className: clsx5(`lp-sys-typo-display${size}-${type}-${weight}`, className), style: { color }, children });
+  return /* @__PURE__ */ jsx95("p", { ...rest, className: clsx5(`lp-sys-typo-display${size}-${type}-${weight}`, className), style: getStyle(color), children });
 }, "Display");
 
 // src/components/Typography/Title.tsx
+import { vars as vars2 } from "@liner-fe/design-token";
 import clsx6 from "clsx";
 import { jsx as jsx96 } from "react/jsx-runtime";
 var Title2 = /* @__PURE__ */ __name(({ weight, size, type, className, children, color, ...rest }) => {
-  return /* @__PURE__ */ jsx96("p", { ...rest, className: clsx6(`lp-sys-typo-title${size}-${type}-${weight}`, className), style: { color }, children });
+  const style = (() => {
+    const style2 = {};
+    if (color) {
+      style2.color = vars2.color[color];
+    }
+    return style2;
+  })();
+  return /* @__PURE__ */ jsx96("p", { ...rest, className: clsx6(`lp-sys-typo-title${size}-${type}-${weight}`, className), style: getStyle(color), children });
 }, "Title");
 
 // src/components/Typography/Caption.tsx
 import clsx7 from "clsx";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var Caption = /* @__PURE__ */ __name(({ children, size, weight, type, className, color, ...rest }) => {
-  return /* @__PURE__ */ jsx97("caption", { ...rest, className: clsx7(`lp-sys-typo-caption${size}-${type}-${weight}`, className), style: { color }, children });
+  return /* @__PURE__ */ jsx97(
+    "caption",
+    {
+      ...rest,
+      className: clsx7(`lp-sys-typo-caption${size}-${type}-${weight}`, className),
+      style: getStyle(color),
+      children
+    }
+  );
 }, "Caption");
 
 // src/components/Popover/index.tsx