@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Tag/index.css

@@ -2,29 +2,73 @@
 .lib-xplat-tag {
   display: inline-flex;
   align-items: center;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   line-height: 1.5;
   border: 1px solid;
 }
 .lib-xplat-tag.sm {
-  gap: 3px;
-  padding: 0.0625rem 0.375rem;
+  gap: var(--spacing-space-1);
+  padding: 1px var(--spacing-space-2);
   font-size: 11px;
 }
 .lib-xplat-tag.md {
-  gap: 4px;
-  padding: 0.125rem 0.5rem;
+  gap: var(--spacing-space-1);
+  padding: 2px var(--spacing-space-2);
   font-size: 12px;
 }
 .lib-xplat-tag.lg {
-  gap: 5px;
-  padding: 0.25rem 0.625rem;
+  gap: var(--spacing-space-1);
+  padding: var(--spacing-space-1) var(--spacing-space-2);
   font-size: 14px;
 }
-.lib-xplat-tag {
-  color: var(--ds-color);
-  border-color: var(--ds-color);
-  background-color: color-mix(in srgb, var(--ds-color) 8%, white);
+.lib-xplat-tag.neutral {
+  color: var(--semantic-text-muted);
+  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-tag.categorical.cat-1 {
+  color: var(--semantic-categorical-1-text);
+  background-color: var(--semantic-categorical-1-bg);
+  border-color: var(--semantic-categorical-1-area);
+}
+.lib-xplat-tag.categorical.cat-2 {
+  color: var(--semantic-categorical-2-text);
+  background-color: var(--semantic-categorical-2-bg);
+  border-color: var(--semantic-categorical-2-area);
+}
+.lib-xplat-tag.categorical.cat-3 {
+  color: var(--semantic-categorical-3-text);
+  background-color: var(--semantic-categorical-3-bg);
+  border-color: var(--semantic-categorical-3-area);
+}
+.lib-xplat-tag.categorical.cat-4 {
+  color: var(--semantic-categorical-4-text);
+  background-color: var(--semantic-categorical-4-bg);
+  border-color: var(--semantic-categorical-4-area);
+}
+.lib-xplat-tag.categorical.cat-5 {
+  color: var(--semantic-categorical-5-text);
+  background-color: var(--semantic-categorical-5-bg);
+  border-color: var(--semantic-categorical-5-area);
+}
+.lib-xplat-tag.categorical.cat-6 {
+  color: var(--semantic-categorical-6-text);
+  background-color: var(--semantic-categorical-6-bg);
+  border-color: var(--semantic-categorical-6-area);
+}
+.lib-xplat-tag.categorical.cat-7 {
+  color: var(--semantic-categorical-7-text);
+  background-color: var(--semantic-categorical-7-bg);
+  border-color: var(--semantic-categorical-7-area);
+}
+.lib-xplat-tag.categorical.cat-8 {
+  color: var(--semantic-categorical-8-text);
+  background-color: var(--semantic-categorical-8-bg);
+  border-color: var(--semantic-categorical-8-area);
+}
+.lib-xplat-tag.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
 .lib-xplat-tag .tag-label {
   white-space: nowrap;
@@ -45,14 +89,11 @@
   opacity: 1;
 }
 .lib-xplat-tag.sm .tag-close svg {
-  width: 10px;
-  height: 10px;
+  font-size: 10px;
 }
 .lib-xplat-tag.md .tag-close svg {
-  width: 12px;
-  height: 12px;
+  font-size: 12px;
 }
 .lib-xplat-tag.lg .tag-close svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }

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

@@ -1,13 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
+type TagType = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
-interface TagProps extends ColorProps {
+interface TagProps {
     children: React.ReactNode;
+    type?: TagType;
     onClose?: () => void;
     size?: TagSize;
-    className?: string;
+    disabled?: boolean;
+    colorIndex?: number;
 }
 declare const Tag: {
     (props: TagProps): react_jsx_runtime.JSX.Element;

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

@@ -1,13 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
+type TagType = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
-interface TagProps extends ColorProps {
+interface TagProps {
     children: React.ReactNode;
+    type?: TagType;
     onClose?: () => void;
     size?: TagSize;
-    className?: string;
+    disabled?: boolean;
+    colorIndex?: number;
 }
 declare const Tag: {
     (props: TagProps): react_jsx_runtime.JSX.Element;