@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Chip/index.cjs

@@ -45,13 +45,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
-    color = "xplat-black",
     type = "primary",
-    size = "md",
-    className
+    size = "md"
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size, colorClass, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;

package/dist/components/Chip/index.css

@@ -1,39 +1,51 @@
 /* src/components/Chip/chip.scss */
 .lib-xplat-chip {
-  border-radius: 10rem;
+  border-radius: var(--spacing-radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-chip.sm {
-  padding: 0.0625rem 0.5rem;
+  padding: 1px var(--spacing-space-2);
   font-size: 12px;
 }
 .lib-xplat-chip.md {
-  padding: 0.125rem 0.75rem;
+  padding: 2px var(--spacing-space-3);
   font-size: 14px;
 }
 .lib-xplat-chip.lg {
-  padding: 0.25rem 1rem;
+  padding: var(--spacing-space-1) var(--spacing-space-4);
   font-size: 16px;
 }
-.lib-xplat-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
 .lib-xplat-chip.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
-}
-.lib-xplat-chip.primary:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-chip.secondary {
-  background-color: var(--xplat-white);
-  border: 1px solid;
-  color: var(--ds-color);
-  border-color: var(--ds-color);
-}
-.lib-xplat-chip.secondary:hover {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chip.neutral {
+  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-subtle);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chip.success {
+  color: var(--semantic-text-success);
+  background-color: var(--semantic-surface-success-subtle);
+}
+.lib-xplat-chip.error {
+  color: var(--semantic-text-error);
+  background-color: var(--semantic-surface-error-subtle);
+}
+.lib-xplat-chip.warning {
+  color: var(--semantic-text-warning);
+  background-color: var(--semantic-surface-warning-subtle);
+}
+.lib-xplat-chip.info {
+  color: var(--semantic-text-info);
+  background-color: var(--semantic-surface-info-subtle);
 }

package/dist/components/Chip/index.d.cts

@@ -1,14 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
-type ChipType = "primary" | "secondary";
+type ChipType = "primary" | "secondary" | "neutral" | "success" | "error" | "warning" | "info";
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends ColorProps {
+interface ChipProps {
     children: React.ReactNode;
     type?: ChipType;
     size?: ChipSize;
-    className?: string;
 }
 declare const Chip: {
     (props: ChipProps): react_jsx_runtime.JSX.Element;

package/dist/components/Chip/index.d.ts

@@ -1,14 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
-type ChipType = "primary" | "secondary";
+type ChipType = "primary" | "secondary" | "neutral" | "success" | "error" | "warning" | "info";
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends ColorProps {
+interface ChipProps {
     children: React.ReactNode;
     type?: ChipType;
     size?: ChipSize;
-    className?: string;
 }
 declare const Chip: {
     (props: ChipProps): react_jsx_runtime.JSX.Element;

package/dist/components/Chip/index.js

@@ -19,13 +19,10 @@ import { jsx } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
-    color = "xplat-black",
     type = "primary",
-    size = "md",
-    className
+    size = "md"
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-chip", type, size, colorClass, className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;