From 8a3952f88664cc72fdab2c566b439972af3de2c5 Mon Sep 17 00:00:00 2001
From: MikaelNordberg <mikael.nordberg@scb.se>
Date: Tue, 27 Feb 2024 10:55:29 +0100
Subject: [PATCH 1/5] Tag component with nx migrations

---
 apps/pxweb2/public/theme/variables.css        |   2 +-
 apps/pxweb2/src/app/app.tsx                   |   3 +
 libs/pxweb2-ui/src/index.ts                   |   3 +-
 .../src/lib/components/Tag/Tag.module.scss    |  73 +++++++++++
 .../src/lib/components/Tag/Tag.spec.tsx       |  10 ++
 .../src/lib/components/Tag/Tag.stories.tsx    |  93 ++++++++++++++
 libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx |  32 +++++
 package-lock.json                             | 113 ++++++------------
 8 files changed, 250 insertions(+), 79 deletions(-)
 create mode 100644 libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
 create mode 100644 libs/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx
 create mode 100644 libs/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx
 create mode 100644 libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx

diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css
index 386e2407..04c8d88c 100644
--- a/apps/pxweb2/public/theme/variables.css
+++ b/apps/pxweb2/public/theme/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 06 Feb 2024 11:35:57 GMT
+ * Generated on Tue, 27 Feb 2024 09:42:03 GMT
  */
 
 :root {
diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx
index 7a7c8759..5ceff022 100644
--- a/apps/pxweb2/src/app/app.tsx
+++ b/apps/pxweb2/src/app/app.tsx
@@ -8,6 +8,7 @@ import {
   BodyLong,
   Ingress,
   Label,
+  Tag
 } from '@pxweb2/pxweb2-ui';
 
 function test(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
@@ -38,6 +39,8 @@ export function App() {
         her every day, every week, every month, every year. She never saw a
         wolf, no even a little fox.
       </BodyLong>
+      <Tag size="medium" variant="info" type='border'>Mandatory</Tag>&nbsp;
+      <br />  
       <form id="form1" onSubmit={testSubmit}>
         <Label htmlFor="fname" textcolor="subtle">
           First name:
diff --git a/libs/pxweb2-ui/src/index.ts b/libs/pxweb2-ui/src/index.ts
index 55969c70..a8f0c5cf 100644
--- a/libs/pxweb2-ui/src/index.ts
+++ b/libs/pxweb2-ui/src/index.ts
@@ -1,6 +1,7 @@
+export * from './lib/components/Tag/Tag';
 export * from './lib/components/Typography/Label/Label';
 export * from './lib/components/Typography/BodyShort/BodyShort';
 export * from './lib/components/Button/Button';
-export * from './lib/components/Typography/Ingress/Ingress'
+export * from './lib/components/Typography/Ingress/Ingress';
 export * from './lib/components/Typography/Heading/Heading';
 export * from './lib/components/Typography/BodyLong/BodyLong';
diff --git a/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss b/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
new file mode 100644
index 00000000..c14961ed
--- /dev/null
+++ b/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
@@ -0,0 +1,73 @@
+@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+
+.tag {
+    display: inline-block;
+    font-family: PxWeb-font-500;
+    font-weight: 500;
+    letter-spacing: 0em;
+}
+
+.medium {
+    padding: 4px 8px 4px 8px;
+    border-radius: var(--px-border-radius-small);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.small {
+    padding: 1px 6px 3px 6px;
+    border-radius: var(--px-border-radius-xsmall);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.xsmall {
+    padding: 0px 4px 0px 4px;
+    border-radius:  var(--px-border-radius-xsmall);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.neutral {
+    background-color: var(--px-color-surface-moderate);
+    &.border {
+        outline: 1px solid var(--px-color-border-moderate);
+        outline-offset: -1px;
+    }
+}
+
+.info {
+    background-color: var(--px-color-surface-info-moderate);
+    &.border {
+        outline: 1px solid var(--px-color-border-info);
+        outline-offset: -1px;
+    }
+}
+
+.success {
+    background-color: var(--px-color-surface-success-moderate);
+    &.border {
+        outline: 1px solid var(--px-color-border-success);
+        outline-offset: -1px;
+    }
+}
+
+.warning {
+    background-color: var(--px-color-surface-warning-moderate);
+    &.border {
+        outline: 1px solid var(--px-color-border-warning);
+        outline-offset: -1px;
+    }
+}
+
+.error {
+    background-color: var(--px-color-surface-error-moderate);
+    &.border {
+        outline: 1px solid var(--px-color-border-error);
+        outline-offset: -1px;
+    }
+}
+
+.default {
+    border: none;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx b/libs/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx
new file mode 100644
index 00000000..6b9719cd
--- /dev/null
+++ b/libs/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Tag from './Tag';
+
+describe('Tag', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Tag />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/libs/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx b/libs/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx
new file mode 100644
index 00000000..fd3e43ab
--- /dev/null
+++ b/libs/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx
@@ -0,0 +1,93 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Tag } from './Tag';
+
+const meta: Meta<typeof Tag> = {
+  component: Tag,
+  title: 'Components/Tag',
+};
+export default meta;
+
+const text = 'Tag';
+
+export const Default = {
+  args: {
+    size: 'medium',
+    variant: 'neutral',
+    type: 'default',
+    children: text  
+  },
+  argTypes: {
+    size: {
+      options: ['medium', 'small', 'xsmall'],
+      control: { type: 'radio' },
+    },
+    variant: {
+      options: ['neutral', 'info', 'success', 'warning', 'error'],
+      control: { type: 'radio' },
+    },
+    type: {
+      options: ['default', 'border'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export const Size: StoryFn<typeof Tag> = () => {
+  return (
+    <>
+      <h1>Size</h1>
+
+      <h2>default:</h2>
+      <Tag>{text}</Tag>
+
+      <h2>medium:</h2>
+      <Tag size="medium">{text}</Tag>
+
+      <h2>small:</h2>
+      <Tag size="small">{text}</Tag>
+
+      <h2>xsmall:</h2>
+      <Tag size="xsmall">{text}</Tag>
+    </>
+  );
+};
+
+export const Variant: StoryFn<typeof Tag> = () => {
+  return (
+    <>
+      <h1>Variant</h1>
+
+      <h2>default:</h2>
+      <Tag>{text}</Tag>
+
+      <h2>neutral:</h2>
+      <Tag variant='neutral'>{text}</Tag>
+
+      <h2>info:</h2>
+      <Tag variant='info'>{text}</Tag>
+
+      <h2>success:</h2>
+      <Tag variant='success'>{text}</Tag>
+
+      <h2>warning:</h2>
+      <Tag variant='warning'>{text}</Tag>
+
+      <h2>error:</h2>
+      <Tag variant='error'>{text}</Tag>
+    </>
+  );
+};
+
+export const Type: StoryFn<typeof Tag> = () => {
+  return (
+    <>
+      <h1>Type</h1>
+
+      <h2>default:</h2>
+      <Tag type='default'>{text}</Tag>
+
+      <h2>border:</h2>
+      <Tag type='border'>{text}</Tag>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx b/libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx
new file mode 100644
index 00000000..05d2797b
--- /dev/null
+++ b/libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx
@@ -0,0 +1,32 @@
+import cl from 'clsx';
+import classes from './Tag.module.scss';
+
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: 'medium' | 'small' | 'xsmall';
+  variant?: 'neutral' | 'info' | 'success'| 'warning'| 'error';
+  type?: 'default' | 'border';
+  children?: React.ReactNode;
+}
+
+export function Tag({
+  size = 'medium',
+  variant = 'neutral',
+  type = 'default',
+  children,
+  ...rest
+}: TagProps) {
+  return (
+    <span 
+    className={cl(
+      classes.tag,
+      classes[size],
+      classes[variant],
+      classes[type] 
+      )}      
+      >
+      {children}
+    </span>
+  );
+}
+
+export default Tag;
diff --git a/package-lock.json b/package-lock.json
index 10698cc2..035363a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2585,12 +2585,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
     "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2616,18 +2610,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/@eslint/eslintrc/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2874,6 +2856,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -10089,6 +10084,19 @@
         "node": ">=14.15.0"
       }
     },
+    "node_modules/@yarnpkg/parsers/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@zkochan/js-yaml": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
@@ -12233,24 +12241,6 @@
         }
       }
     },
-    "node_modules/cosmiconfig/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/cosmiconfig/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -14066,12 +14056,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/eslint/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
     "node_modules/eslint/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -14134,18 +14118,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/eslint/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -20832,18 +20804,23 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
       "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       },
       "bin": {
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/js-yaml/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
@@ -22114,12 +22091,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/nx/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
     "node_modules/nx/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -22181,18 +22152,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/nx/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/nx/node_modules/jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",

From ddab7f5c7a31b403f81f60cf0ebc70d73bcac13e Mon Sep 17 00:00:00 2001
From: MikaelNordberg <mikael.nordberg@scb.se>
Date: Tue, 27 Feb 2024 11:24:43 +0100
Subject: [PATCH 2/5] Changed border colors

---
 apps/pxweb2/public/theme/variables.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css
index 04c8d88c..ba2a78d1 100644
--- a/apps/pxweb2/public/theme/variables.css
+++ b/apps/pxweb2/public/theme/variables.css
@@ -40,10 +40,10 @@
   --px-color-border-action: #274247;
   --px-color-border-hover: #62919a;
   --px-color-border-selected: #274247;
-  --px-color-border-info: #37b3f9;
-  --px-color-border-success: #4fc887;
-  --px-color-border-warning: #fcbf27;
-  --px-color-border-error: #fd7e6d;
+  --px-color-border-info: #0179c8;
+  --px-color-border-success: #00824d;
+  --px-color-border-warning: #cb7603;
+  --px-color-border-error: #e23822;
   --px-color-border-focus: #9272fc;
   --px-color-border-focus-on-inverted: #9272fc;
   --px-color-text-default: #162327;

From 456ec713ac365920782c5b56fe43abcc399eb5bb Mon Sep 17 00:00:00 2001
From: MikaelNordberg <mikael.nordberg@scb.se>
Date: Tue, 27 Feb 2024 12:26:03 +0100
Subject: [PATCH 3/5] Changed border colors again

---
 apps/pxweb2/public/theme/variables.css                 | 2 +-
 libs/pxweb2-ui/style-dictionary/src/default_theme.json | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css
index ba2a78d1..f0f0acd2 100644
--- a/apps/pxweb2/public/theme/variables.css
+++ b/apps/pxweb2/public/theme/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 09:42:03 GMT
+ * Generated on Tue, 27 Feb 2024 11:23:12 GMT
  */
 
 :root {
diff --git a/libs/pxweb2-ui/style-dictionary/src/default_theme.json b/libs/pxweb2-ui/style-dictionary/src/default_theme.json
index 3dc3bc9a..c48f15c3 100644
--- a/libs/pxweb2-ui/style-dictionary/src/default_theme.json
+++ b/libs/pxweb2-ui/style-dictionary/src/default_theme.json
@@ -111,16 +111,16 @@
       "value": "#274247"
     },
     "border-info": {
-      "value": "#37B3F9"
+      "value": "#0179C8"
     },
     "border-success": {
-      "value": "#4FC887"
+      "value": "#00824D"
     },
     "border-warning": {
-      "value": "#FCBF27"
+      "value": "#CB7603"
     },
     "border-error": {
-      "value": "#FD7E6D"
+      "value": "#E23822"
     },
     "border-focus": {
       "value": "#9272FC"

From 4f92e303881c6b92613b132defc2e530ed135ae3 Mon Sep 17 00:00:00 2001
From: MikaelNordberg <mikael.nordberg@scb.se>
Date: Fri, 1 Mar 2024 14:16:51 +0100
Subject: [PATCH 4/5] Css changes

---
 apps/pxweb2/public/theme/variables.css          |  4 ++--
 apps/pxweb2/src/app/app.tsx                     |  1 +
 .../src/lib/components/Tag/Tag.module.scss      | 17 ++++++++++++-----
 .../style-dictionary/src/default_theme.json     |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css
index f0f0acd2..c4bc1768 100644
--- a/apps/pxweb2/public/theme/variables.css
+++ b/apps/pxweb2/public/theme/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 11:23:12 GMT
+ * Generated on Fri, 01 Mar 2024 13:12:05 GMT
  */
 
 :root {
@@ -16,7 +16,7 @@
   --px-color-background-subtle: #f0f8f9;
   --px-color-surface-default: #ffffff;
   --px-color-surface-subtle: #f0f8f9;
-  --px-color-surface-moderate: #c3dcdc;
+  --px-color-surface-moderate: #dbebeb;
   --px-color-surface-inverted: #274247;
   --px-color-surface-highlight: #ecfeed;
   --px-color-surface-action: #274247;
diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx
index 5ceff022..3a933b5a 100644
--- a/apps/pxweb2/src/app/app.tsx
+++ b/apps/pxweb2/src/app/app.tsx
@@ -39,6 +39,7 @@ export function App() {
         her every day, every week, every month, every year. She never saw a
         wolf, no even a little fox.
       </BodyLong>
+      <Tag size="medium" variant="info">Mandatory</Tag>&nbsp;
       <Tag size="medium" variant="info" type='border'>Mandatory</Tag>&nbsp;
       <br />  
       <form id="form1" onSubmit={testSubmit}>
diff --git a/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss b/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
index c14961ed..ddc0d5e6 100644
--- a/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
@@ -1,28 +1,30 @@
 @use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
 
 .tag {
-    display: inline-block;
+    display: inline-flex;
     font-family: PxWeb-font-500;
     font-weight: 500;
-    letter-spacing: 0em;
+    color: var(--px-color-text-default);
+    align-items: center;
+    //letter-spacing: 0em;
 }
 
 .medium {
-    padding: 4px 8px 4px 8px;
+    padding: 4px 8px;
     border-radius: var(--px-border-radius-small);
     font-size: 16px;
     line-height: 24px;
 }
 
 .small {
-    padding: 1px 6px 3px 6px;
+    padding: 1px 6px 2px 6px;
     border-radius: var(--px-border-radius-xsmall);
     font-size: 14px;
     line-height: 20px;
 }
 
 .xsmall {
-    padding: 0px 4px 0px 4px;
+    padding: 0px 4px;
     border-radius:  var(--px-border-radius-xsmall);
     font-size: 14px;
     line-height: 20px;
@@ -31,6 +33,7 @@
 .neutral {
     background-color: var(--px-color-surface-moderate);
     &.border {
+        background-color: var(--px-color-surface-subtle);
         outline: 1px solid var(--px-color-border-moderate);
         outline-offset: -1px;
     }
@@ -39,6 +42,7 @@
 .info {
     background-color: var(--px-color-surface-info-moderate);
     &.border {
+        background-color: var(--px-color-surface-info-subtle);
         outline: 1px solid var(--px-color-border-info);
         outline-offset: -1px;
     }
@@ -47,6 +51,7 @@
 .success {
     background-color: var(--px-color-surface-success-moderate);
     &.border {
+        background-color: var(--px-color-surface-success-subtle);
         outline: 1px solid var(--px-color-border-success);
         outline-offset: -1px;
     }
@@ -55,6 +60,7 @@
 .warning {
     background-color: var(--px-color-surface-warning-moderate);
     &.border {
+        background-color: var(--px-color-surface-warning-subtle);
         outline: 1px solid var(--px-color-border-warning);
         outline-offset: -1px;
     }
@@ -63,6 +69,7 @@
 .error {
     background-color: var(--px-color-surface-error-moderate);
     &.border {
+        background-color: var(--px-color-surface-error-subtle);
         outline: 1px solid var(--px-color-border-error);
         outline-offset: -1px;
     }
diff --git a/libs/pxweb2-ui/style-dictionary/src/default_theme.json b/libs/pxweb2-ui/style-dictionary/src/default_theme.json
index c48f15c3..b12f9a8e 100644
--- a/libs/pxweb2-ui/style-dictionary/src/default_theme.json
+++ b/libs/pxweb2-ui/style-dictionary/src/default_theme.json
@@ -39,7 +39,7 @@
       "value": "#F0F8F9"
     },
     "surface-moderate": {
-      "value": "#C3DCDC"
+      "value": "#DBEBEB"
     },
     "surface-inverted": {
       "value": "#274247"

From b398315a82b62209ae0390bd02345bb64c3c8d28 Mon Sep 17 00:00:00 2001
From: MikaelNordberg <54406826+MikaelNordberg@users.noreply.github.com>
Date: Tue, 5 Mar 2024 14:59:31 +0100
Subject: [PATCH 5/5] Update Tag.module.scss

---
 libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss b/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
index ddc0d5e6..9ee5e6ea 100644
--- a/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
+++ b/libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss
@@ -6,7 +6,6 @@
     font-weight: 500;
     color: var(--px-color-text-default);
     align-items: center;
-    //letter-spacing: 0em;
 }
 
 .medium {