add more components

Author: mykalmax

web/common/src/components/Badge/Badge.css

@@ -1,4 +1,4 @@
 :root {
-  --color-badge-background: var(--color-gray-100);
+  --color-badge-background: var(--color-neutral-100);
   --color-badge-foreground: var(--color-prose);
 }

web/common/src/components/ModelName/ModelName.css

@@ -0,0 +1,17 @@
+:root {
+  --color-model-name-grayscale-link-underline: var(--color-neutral-125);
+  --color-model-name-grayscale-link-underline-hover: var(--color-neutral-500);
+  --color-model-name-link-underline: var(--color-link-underline);
+  --color-model-name-link-underline-hover: var(--color-link-hover);
+
+  --color-model-name-grayscale-catalog: var(--color-neutral-400);
+  --color-model-name-grayscale-schema: var(--color-neutral-600);
+  --color-model-name-grayscale-model: var(--color-neutral-800);
+
+  --color-model-name-catalog: var(--color-model-catalog);
+  --color-model-name-schema: var(--color-model-schema);
+  --color-model-name-model: var(--color-model-name);
+
+  --color-model-name-copy-icon: var(--color-neutral-600);
+  --color-model-name-copy-icon-hover: var(--color-neutral-100);
+}

web/common/src/components/ModelName/ModelName.stories.tsx

@@ -57,7 +57,7 @@ export const WithTooltip: Story = {
 
 export const WithoutTooltip: Story = {
   args: {
-    name: 'catalog.schema.model',
+    name: 'catalog.model',
     showTooltip: false,
   },
 }
@@ -83,6 +83,15 @@ export const Grayscale: Story = {
 }
 
 export const Link: Story = {
+  args: {
+    name: 'catalog.schema.model',
+    link: 'https://www.google.com',
+    grayscale: false,
+    showCopy: true,
+  },
+}
+
+export const LinkGrayscale: Story = {
   args: {
     name: 'catalog.schema.model',
     link: 'https://www.google.com',