PxTools · PerIngeVaaje · Feb 13, 2024 · Feb 7, 2024 · Feb 6, 2024 · Feb 7, 2024
diff --git a/.gitignore b/.gitignore
@@ -43,3 +43,4 @@ Thumbs.db
 
 # Style dictionary
 custom_theme.json
+theme/variables.css
diff --git a/apps/pxweb2/index.html b/apps/pxweb2/index.html
@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="stylesheet" href="/src/styles.scss" />
+    <link rel="stylesheet" href="/theme/variables.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css
@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 06 Feb 2024 11:35:57 GMT
+ */
+
+:root {
+  --px-border-radius-none: 0;
+  --px-border-radius-xxsmall: 0.5px;
+  --px-border-radius-xsmall: 2px;
+  --px-border-radius-small: 4px;
+  --px-border-radius-medium: 8px;
+  --px-border-radius-large: 16px;
+  --px-border-radius-xlarge: 24px;
+  --px-border-radius-full: 9999px;
+  --px-color-background-default: #ffffff;
+  --px-color-background-subtle: #f0f8f9;
+  --px-color-surface-default: #ffffff;
+  --px-color-surface-subtle: #f0f8f9;
+  --px-color-surface-moderate: #c3dcdc;
+  --px-color-surface-inverted: #274247;
+  --px-color-surface-highlight: #ecfeed;
+  --px-color-surface-action: #274247;
+  --px-color-surface-action-hover: #274247;
+  --px-color-surface-action-active: #162327;
+  --px-color-surface-subtle-hover: #dbebeb;
+  --px-color-surface-subtle-active: #c3dcdc;
+  --px-color-surface-info-subtle: #d7ecfe;
+  --px-color-surface-info-moderate: #c3e6fe;
+  --px-color-surface-success-subtle: #dbf5dc;
+  --px-color-surface-success-moderate: #b6e8b8;
+  --px-color-surface-warning-subtle: #fbf1c0;
+  --px-color-surface-warning-moderate: #feeb9f;
+  --px-color-surface-error-subtle: #ffe4e0;
+  --px-color-surface-error-moderate: #ffcec7;
+  --px-color-border-default: #162327;
+  --px-color-border-subtle: #c3dcdc;
+  --px-color-border-moderate: #62919a;
+  --px-color-border-divider: #62919a;
+  --px-color-border-divider-subtle: #c3dcdc;
+  --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-focus: #9272fc;
+  --px-color-border-focus-on-inverted: #9272fc;
+  --px-color-text-default: #162327;
+  --px-color-text-subtle: #2d6975;
+  --px-color-text-on-inverted: #ffffff;
+  --px-color-text-action: #274247;
+  --px-color-text-on-action: #ffffff;
+  --px-color-text-on-action-subtle: #162327;
+  --px-color-icon-default: #162327;
+  --px-color-icon-on-inverted: #ffffff;
+  --px-color-icon-action: #274247;
+  --px-color-icon-on-action: #ffffff;
+  --px-color-icon-on-action-subtle: #162327;
+  --px-color-icon-info: #0179c8;
+  --px-color-icon-success: #00824d;
+  --px-color-icon-warning: #cb7603;
+  --px-color-icon-error: #e23822;
+}
@@ -2,7 +2,7 @@
 import styles from './app.module.scss';
 
 
-import { Button } from '@pxweb2/pxweb2-ui';
+import { Button, Heading } from '@pxweb2/pxweb2-ui';
 
 function test(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
   event.preventDefault();
@@ -15,8 +15,7 @@ function testSubmit() {
 export function App() {
   return (
     <>
-      <h1>Welcome to pxweb2!</h1>
-
+    <Heading level='1' size="xlarge"> Welcome to pxweb2!</Heading>
       <Button variant="primary" onClick={test}>Button</Button>
       <Button variant="primary" disabled onClick={test}>Button</Button>
       <Button variant="primary" icon="Pencil" onClick={test}></Button>

diff --git a/libs/pxweb2-ui/.storybook/preview.ts b/libs/pxweb2-ui/.storybook/preview.ts
@@ -1,9 +1,10 @@
 import { Preview } from '@storybook/react';
-
+
+import './../style-dictionary/dist/css/variables.css';
 import './../src/lib/global.scss';
- 
+
 const preview: Preview = {
   parameters: {},
 };
- 
-export default preview;
+
+export default preview;
@@ -1 +1,2 @@
 export * from './lib/components/Button/Button';
+export * from './lib/components/Typography/Heading/Heading';
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -1,5 +1,3 @@
-@use '../../../../style-dictionary/dist/scss/variables.scss' as variables;
-
 .button {
   text-align: center;
 
@@ -16,78 +14,78 @@
 
     &:hover,
     &:focus {
-      border-radius: variables.$border-radius-full;
+      border-radius: var(--px-border-radius-full);
       text-decoration: none;
     }
   }
 }
 
 .primary {
-  color: variables.$color-text-on-action;
-  border-radius: variables.$border-radius-full;
-  background: variables.$color-surface-action;
+  color: var(--px-color-text-on-action);
+  border-radius: var(--px-border-radius-full);
+  background: var(--px-color-surface-action);
 
   // Override browser default styles
   border: none;
   border-style: none;
 
   &:hover {
-    border-radius: variables.$border-radius-medium;
+    border-radius: var(--px-border-radius-medium);
   }
   &:active {
-    border-radius: variables.$border-radius-medium;
-    background: variables.$color-surface-action-active;
+    border-radius: var(--px-border-radius-medium);
+    background: var(--px-color-surface-action-active);
   }
   &:disabled {
-    background: variables.$color-surface-action;
+    background: var(--px-color-surface-action);
   }
 }
 
 .secondary {
   // Override browser defaults styles
   background-color: inherit;
 
-  color: variables.$color-text-action;
-  border-radius: variables.$border-radius-full;
-  border: 1.5px solid variables.$color-border-action;
+  color: var(--px-color-text-action);
+  border-radius: var(--px-border-radius-full);
+  border: 1.5px solid var(--px-color-border-action);
 
   &:hover {
-    color: variables.$color-text-on-action-subtle;
-    border-radius: variables.$border-radius-medium;
-    background: variables.$color-surface-subtle-hover;
+    color: var(--px-color-text-on-action-subtle);
+    border-radius: var(--px-border-radius-medium);
+    background: var(--px-color-surface-subtle-hover);
   }
   &:active {
-    color: variables.$color-text-on-action;
-    border-radius: variables.$border-radius-medium;
-    background: variables.$color-surface-action-active;
+    color: var(--px-color-text-on-action);
+    border-radius: var(--px-border-radius-medium);
+    background: var(--px-color-surface-action-active);
   }
   &:disabled {
     background-color: inherit;
-    color: variables.$color-text-action;
+    color: var(--px-color-text-action);
   }
 }
 
 .tertiary {
   // Override browser defaults styles
   background-color: inherit;
 
-  color: variables.$color-text-action;
+  color: var(--px-color-text-action);
   border: none;
-  border-radius: variables.$border-radius-full;
+  border-radius: var(--px-border-radius-full);
 
   &:hover {
-    color: variables.$color-text-on-action-subtle;
-    border-radius: variables.$border-radius-medium;
-    background: variables.$color-surface-subtle-hover;
+    color: var(--px-color-text-on-action-subtle);
+    border-radius: var(--px-border-radius-medium);
+    background: var(--px-color-surface-subtle-hover);
   }
   &:active {
-    color: variables.$color-text-on-action;
-    border-radius: variables.$border-radius-medium;
-    background: variables.$color-surface-action-active;
+    color: var(--px-color-text-on-action);
+    border-radius: var(--px-border-radius-medium);
+    background: var(--px-color-surface-action-active);
   }
   &:disabled {
     background-color: inherit;
-    color: variables.$color-text-action;
+    color: var(--px-color-text-action);
   }
 }
 

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -1,14 +1,12 @@
-@use '../../../../style-dictionary/dist/scss/variables.scss' as variables;
-
 .link {
   font-family: 'Roboto', sans-serif;
-  color: variables.$color-text-action;
+  color: var(--px-color-text-action);
   &:hover {
     text-decoration: none;
   }
 
   &:focus {
-    color: variables.$color-text-on-action-subtle;
-    background-color: variables.$color-surface-subtle-active;
+    color: var(--px-color-text-on-action-subtle);
+    background-color: var(--px-color-surface-subtle-active);
   }
 }
@@ -1,40 +1,74 @@
+@use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+
 .heading {
-    font-family: PxWeb-font-700;
-  }
-
-  .xsmall {
-    font-size: 1rem;
-    line-height: 1.625rem;
-    letter-spacing: 0em;
-    text-align: left;
-
+  font-family: PxWeb-font-700;
+  color: var(--px-color-text-default);
+  margin: 0;
+}
+
+.xsmall {
+  font-size: 1rem;
+  line-height: 1.625rem;
+  letter-spacing: 0em;
+  text-align: left;
+  &.spacing {
+    margin-bottom: fixed.$spacing-1;
   }
-
-  .small {
-    font-size: 1.25rem;
-    line-height: 1.75;
-    letter-spacing: 0.005em;
-    text-align: left;
+}
+
+.small {
+  font-size: 1.25rem;
+  line-height: 1.75;
+  letter-spacing: 0.005em;
+  text-align: left;
+  &.spacing {
+    margin-bottom: fixed.$spacing-1;
   }
-
-  .medium {
-    font-size: 1.5rem;
-    line-height: 2.25rem;
-    letter-spacing: 0em;
-    text-align: left;
+}
+
+.medium {
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+  letter-spacing: 0em;
+  text-align: left;
+  &.spacing {
+    margin-bottom: fixed.$spacing-3;
   }
-
-  .large {
-    font-size: 2rem;
-    line-height: 2.75rem;
-    letter-spacing: 0em;
-    text-align: left;
+}
+
+.large {
+  font-size: 2rem;
+  line-height: 2.75rem;
+  letter-spacing: 0em;
+  text-align: left;
+  &.spacing {
+    margin-bottom: fixed.$spacing-5;
   }
-
-  .xlarge {
+}
+
+.xlarge {
   font-size: 2.5rem;
   line-height: 3.5rem;
   letter-spacing: 0em;
   text-align: left;
+  &.spacing {
+    margin-bottom: fixed.$spacing-6;
   }
-
+}
+
+.align-start {
+  text-align: start;
+}
+.align-center {
+  text-align: center;
+}
+.align-end {
+  text-align: end;
+}
+
+.text-color-default {
+  color: var(--px-color-text-default);
+}
+.text-color-subtle {
+  color: var(--px-color-text-subtle);
+}
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Heading from './Heading';
+
+describe('Heading', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Heading />);
+    expect(baseElement).toBeTruthy();
+  });
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -43,3 +43,4 @@ Thumbs.db

		# Style dictionary
		custom_theme.json
		theme/variables.css
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './lib/components/Button/Button';
		export * from './lib/components/Typography/Heading/Heading';