feat(Tag): special theme

Author: tenphi

.changeset/green-geckos-wave.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Change `note-text` to improve contrast.

.changeset/rare-baboons-bathe.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add `special` theme for components that use them.

.changeset/slimy-camels-flash.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Allow to set mods for Tag component.

src/components/content/Tag/Tag.stories.tsx

@@ -45,25 +45,55 @@ export default {
   },
 };
 
-const Template: StoryFn<CubeTagProps> = ({ label, ...props }) => (
-  <Tag {...props} onClose={() => console.log('close')}>
-    {label}
-  </Tag>
+const Template: StoryFn<CubeTagProps> = ({ ...props }) => (
+  <Tag {...props} onClose={() => console.log('! onClose')} />
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  label: 'Tag name or content',
+  children: 'Tag name or content',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: 'Tag name or content',
+  theme: 'danger',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  children: 'Tag name or content',
+  theme: 'success',
+};
+
+export const Note = Template.bind({});
+Note.args = {
+  children: 'Tag name or content',
+  theme: 'note',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Tag name or content',
+  theme: 'disabled',
+};
+
+export const Special = Template.bind({});
+Special.args = {
+  children: 'Tag name or content',
+  theme: 'special',
 };
 
 export const WithIcon = Template.bind({});
 WithIcon.args = {
+  children: 'Tag name or content',
   icon: <DollarCircleOutlined />,
   label: 'Tag name or content',
 };
 
 export const Closable = Template.bind({});
 Closable.args = {
+  children: 'Tag name or content',
   label: 'Tag name or content',
   isClosable: true,
 };

src/components/content/Tag/Tag.tsx

@@ -89,7 +89,9 @@ const CloseAction = tasty(Action, {
 });
 
 export interface CubeTagProps extends BaseProps, ContainerStyleProps {
+  /* @deprecated Use theme instead */
   type?: keyof typeof THEMES | string;
+  theme?: keyof typeof THEMES | string;
   isClosable?: boolean;
   onClose?: () => void;
   closeButtonStyles?: Styles;
@@ -99,11 +101,13 @@ export interface CubeTagProps extends BaseProps, ContainerStyleProps {
 function Tag(allProps: CubeTagProps, ref) {
   let {
     type,
+    theme,
     icon,
     isClosable,
     onClose,
     closeButtonStyles,
     children,
+    mods,
     ...props
   } = allProps;
 
@@ -114,8 +118,8 @@ function Tag(allProps: CubeTagProps, ref) {
       {...filterBaseProps(props, { eventProps: true })}
       ref={ref}
       styles={styles}
-      data-type={type}
-      mods={{ closable: isClosable }}
+      data-type={theme ?? type}
+      mods={{ ...mods, closable: isClosable }}
     >
       {icon ? <div data-element="TagIcon">{icon}</div> : null}
       <div data-element="Content">{children}</div>

src/components/layout/Panel.tsx

@@ -123,6 +123,8 @@ function Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {
   STYLES.forEach((style) => {
     if (props[style]) {
       innerStyles = { ...innerStyles, [style]: props[style] };
+
+      delete otherProps[style];
     }
   });
 

src/data/themes.ts

@@ -1,4 +1,9 @@
 export default {
+  special: {
+    fill: '#purple',
+    color: '#white',
+    border: '#purple',
+  },
   success: {
     fill: '#success-bg',
     color: '#success-text',

src/tokens.ts

@@ -24,6 +24,7 @@ const colors = {
   success: '49 195 124',
   'success-text': '48 166 102',
   note: '251 188 5',
+  'note-text': '169 125 0',
   warning: '224 86 43',
 };
 
@@ -55,7 +56,6 @@ const TOKENS = {
   'minor-color': color('dark', 0.65),
   'success-bg-color': 'rgb(41 190 110 / .1)',
   'note-bg-color': color('note', 0.1),
-  'note-text-color': color('note', 1),
   'danger-bg-color': color('danger', 0.05),
   'danger-bg-hover-color': color('danger', 0.1),
   'primary-1': color('purple', 0.9),