From 25ce135f2a3f1f567746580ea821a835c81bcd6c Mon Sep 17 00:00:00 2001
From: Ofer Shaal <oshaal@phase2technology.com>
Date: Tue, 27 Jun 2023 12:23:51 +0000
Subject: [PATCH 1/7] feat: initial outline-core-heading

---
 packages/outline-core-heading/CHANGELOG.md    |  13 ++
 packages/outline-core-heading/README.md       |  17 ++
 packages/outline-core-heading/index.ts        |   6 +
 packages/outline-core-heading/package.json    |  40 +++++
 packages/outline-core-heading/src/config.ts   |  33 ++++
 .../src/outline-core-heading.css              | 147 ++++++++++++++++++
 .../src/outline-core-heading.ts               |  93 +++++++++++
 .../src/test/outline-core-heading.test.ts     |  26 ++++
 .../outline-core-heading/tsconfig.build.json  |   9 ++
 9 files changed, 384 insertions(+)
 create mode 100644 packages/outline-core-heading/CHANGELOG.md
 create mode 100644 packages/outline-core-heading/README.md
 create mode 100644 packages/outline-core-heading/index.ts
 create mode 100644 packages/outline-core-heading/package.json
 create mode 100644 packages/outline-core-heading/src/config.ts
 create mode 100644 packages/outline-core-heading/src/outline-core-heading.css
 create mode 100644 packages/outline-core-heading/src/outline-core-heading.ts
 create mode 100644 packages/outline-core-heading/src/test/outline-core-heading.test.ts
 create mode 100644 packages/outline-core-heading/tsconfig.build.json

diff --git a/packages/outline-core-heading/CHANGELOG.md b/packages/outline-core-heading/CHANGELOG.md
new file mode 100644
index 000000000..d111d464d
--- /dev/null
+++ b/packages/outline-core-heading/CHANGELOG.md
@@ -0,0 +1,13 @@
+# @phase2/outline-heading
+
+## 0.1.2
+
+### Patch Changes
+
+- Update to @phase2/outline-core packages.
+
+## 0.1.1
+
+### Patch Changes
+
+- Bumped versions with updated package contents.
diff --git a/packages/outline-core-heading/README.md b/packages/outline-core-heading/README.md
new file mode 100644
index 000000000..4261cf280
--- /dev/null
+++ b/packages/outline-core-heading/README.md
@@ -0,0 +1,17 @@
+# outline-heading
+
+The Heading component.
+
+## Properties
+
+| Property     | Attribute     | Type                                             | Default | Description                                      |
+|--------------|---------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `level`      | `level`       | `string \| undefined`                            | "h2"    | The tag to apply: h1 \| h2 \| h3 \| h4 \| h5 \| h6 |
+| `levelSize`  | `level-size`  | `"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"` |         | The heading level size to apply. Optional override to default styles for a given level |
+| `levelStyle` | `level-style` | `"medium" \| "black" \| "thin" \| "extralight" \| "light" \| "normal" \| "semibold" \| "bold" \| "extrabold"` | "bold"  | The heading level style to apply. Optional override to default styles for a given level |
+
+## Slots
+
+| Name          |
+|---------------|
+| `defaultSlot` |
diff --git a/packages/outline-core-heading/index.ts b/packages/outline-core-heading/index.ts
new file mode 100644
index 000000000..01672284e
--- /dev/null
+++ b/packages/outline-core-heading/index.ts
@@ -0,0 +1,6 @@
+export { OutlineCoreHeading } from './src/outline-core-heading';
+export type {
+  AllowedHeadingLevels,
+  AllowedHeadingSizes,
+} from './src/config';
+export { HeadingLevels, HeadingSizes, HeadingStyles } from './src/config';
diff --git a/packages/outline-core-heading/package.json b/packages/outline-core-heading/package.json
new file mode 100644
index 000000000..50dafcf6c
--- /dev/null
+++ b/packages/outline-core-heading/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@phase2/outline-core-heading",
+  "version": "0.1.2",
+  "description": "The Outline Components for the web heading component",
+  "keywords": [
+    "outline components",
+    "outline design",
+    "heading"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-heading"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.1.9",
+    "lit": "^2.3.1",
+    "tslib": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-core-heading/src/config.ts b/packages/outline-core-heading/src/config.ts
new file mode 100644
index 000000000..d443d9ac2
--- /dev/null
+++ b/packages/outline-core-heading/src/config.ts
@@ -0,0 +1,33 @@
+export const HeadingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', undefined];
+export type AllowedHeadingLevels = typeof HeadingLevels[number];
+
+// Updated to limit the allowed values to the set we want to be selectable in Storybook.
+export const HeadingSizes = [
+  'xs',
+  'sm',
+  'base',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+  '5xl',
+  '6xl',
+  '7xl',
+  '8xl',
+  '9xl',
+] as const;
+export type AllowedHeadingSizes = typeof HeadingSizes[number];
+
+export const HeadingWeights = [
+  'thin',
+  'extralight',
+  'light',
+  'normal',
+  'medium',
+  'semibold',
+  'bold',
+  'extrabold',
+  'black',
+] as const;
+export type AllowedHeadingWeights = typeof HeadingWeights[number];
diff --git a/packages/outline-core-heading/src/outline-core-heading.css b/packages/outline-core-heading/src/outline-core-heading.css
new file mode 100644
index 000000000..0be97364f
--- /dev/null
+++ b/packages/outline-core-heading/src/outline-core-heading.css
@@ -0,0 +1,147 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  all: unset;
+}
+
+.clickable-card {
+  /* Required to allow the functionallity of full card being clickable  */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    a {
+      &:hover {
+        text-decoration: none;
+      }
+      &:after {
+        position: absolute;
+        inset: 0;
+        content: '';
+      }
+    }
+  }
+}
+
+.outline-text--base {
+  @apply text-base;
+}
+
+.outline-text--xs {
+  @apply text-xs ;
+}
+
+.outline-text--sm {
+  @apply text-sm ;
+}
+
+.outline-text--lg {
+  @apply text-lg ;
+}
+
+.outline-text--lg.mobile {
+  @apply text-base ;
+}
+
+.outline-text--xl {
+  @apply text-xl ;
+}
+
+.outline-text--xl.mobile {
+  @apply text-base ;
+}
+
+.outline-text--2xl {
+  @apply text-2xl ;
+}
+
+.outline-text--2xl.mobile {
+  @apply text-lg ;
+}
+
+.outline-text--3xl {
+  @apply text-3xl ;
+}
+
+.outline-text--3xl.mobile {
+  @apply text-lg ;
+}
+
+.outline-text--4xl {
+  @apply text-4xl ;
+}
+
+.outline-text--4xl.mobile {
+  @apply text-xl ;
+}
+
+.outline-text--5xl {
+  @apply text-5xl ;
+}
+
+.outline-text--5xl.mobile {
+  @apply text-2xl ;
+}
+
+.outline-text--6xl {
+  @apply text-6xl ;
+}
+
+.outline-text--6xl.mobile {
+  @apply text-3xl ;
+}
+
+.outline-text--7xl {
+  @apply text-7xl ;
+}
+
+.outline-text--7xl.mobile {
+  @apply text-4xl ;
+}
+
+.outline-text--8xl {
+  @apply text-8xl ;
+}
+
+.outline-text--8xl.mobile {
+  @apply text-5xl ;
+}
+
+.outline-text--9xl {
+  @apply text-9xl ;
+}
+
+.outline-text--9xl.mobile {
+  @apply text-6xl ;
+}
+
+/* Font weights */
+.outline-font--thin {
+  @apply font-thin;
+}
+.outline-font--extralight {
+  @apply font-extralight;
+}
+.outline-font--light {
+  @apply font-light;
+}
+.outline-font--normal {
+  @apply font-normal;
+}
+.outline-font--semibold {
+  @apply font-semibold;
+}
+.outline-font--bold {
+  @apply font-bold;
+}
+.outline-font--extrabold {
+  @apply font-extrabold;
+}
+.outline-font--black {
+  @apply font-black;
+}
diff --git a/packages/outline-core-heading/src/outline-core-heading.ts b/packages/outline-core-heading/src/outline-core-heading.ts
new file mode 100644
index 000000000..01aef71f7
--- /dev/null
+++ b/packages/outline-core-heading/src/outline-core-heading.ts
@@ -0,0 +1,93 @@
+/**
+ * The Heading component.
+ * @element outline-core-heading
+ * @slot defaultSlot
+ */
+import { TemplateResult } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property } from 'lit/decorators.js';
+
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-heading.css.lit';
+import {
+  AllowedHeadingLevels,
+  AllowedHeadingSizes,
+  AllowedHeadingWeights,
+} from './config';
+
+@customElement('outline-core-heading')
+export class OutlineCoreHeading extends OutlineElement {
+
+  static styles = [componentStyles];
+
+  /**
+   * The tag to apply: h1 | h2 | h3 | h4 | h5 | h6
+   */
+  @property({ type: String, reflect: true, attribute: 'level' })
+  level: AllowedHeadingLevels = 'h2';
+
+  /**
+   * The size of the heading.
+   * @type {AllowedHeadingSizes}
+   */
+  @property({ type: String, reflect: true, attribute: 'size' })
+  size: AllowedHeadingSizes;
+
+  /**
+   * The weight of the heading.
+   * @type {AllowedHeadingWeights}
+   */
+  @property({ type: String, reflect: true, attribute: 'weight' })
+  weight: AllowedHeadingWeights = 'bold';
+
+  /**
+   * Additional CSS classes to apply to the heading element.
+   * @type {string}
+   */
+  @property({ type: String, reflect: true, attribute: 'additional-classes' })
+  additionalClasses: string;
+
+  /**
+   * Whether the heading should be displayed as a clickable card.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'clickable-card' })
+  clickableCard = false;
+
+  generateHeading(classes: { [key: string]: boolean | string }): TemplateResult {
+    return html`
+      <${unsafeStatic(this.level as string)} class=${classMap(classes)}>
+        <slot></slot>
+      </${unsafeStatic(this.level as string)}>
+    `;
+  }
+
+  fullMarkupInSlot(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  render(): TemplateResult {
+    const classes = {
+      [`outline-text--${this.size}`]: this.size,
+      [`outline-font--${this.weight}`]: true,
+      [`${this.additionalClasses}`]: this.additionalClasses,
+      'clickable-card': !!this.clickableCard,
+    };
+
+    if (this.level) {
+      return this.generateHeading(classes);
+    } else {
+      return this.fullMarkupInSlot();
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'outline-core-heading': OutlineCoreHeading;
+  }
+}
diff --git a/packages/outline-core-heading/src/test/outline-core-heading.test.ts b/packages/outline-core-heading/src/test/outline-core-heading.test.ts
new file mode 100644
index 000000000..b5411c24c
--- /dev/null
+++ b/packages/outline-core-heading/src/test/outline-core-heading.test.ts
@@ -0,0 +1,26 @@
+import { OutlineCoreHeading } from '../outline-core-heading';
+import { fixture, html, assert } from '@open-wc/testing';
+
+describe('outline-heading', () => {
+  it('is defined', () => {
+    const el = document.createElement('outline-heading');
+    assert.instanceOf(el, OutlineCoreHeading);
+  });
+
+  it('renders with default values', async () => {
+    const el = await fixture(html`<outline-heading></outline-heading>`);
+    assert.shadowDom.equal(
+      el,
+      `
+      <h2 class="outline-font--bold outline-text">
+        <slot></slot>
+      </h2>
+    `
+    );
+  });
+
+  it('renders with slotted content', async () => {
+    const el = await fixture(html`<outline-heading>Test</outline-heading>`);
+    assert.lightDom.equal(el, `Test`);
+  });
+});
diff --git a/packages/outline-core-heading/tsconfig.build.json b/packages/outline-core-heading/tsconfig.build.json
new file mode 100644
index 000000000..ebc8e4b8e
--- /dev/null
+++ b/packages/outline-core-heading/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}

From 45f6b86641a0ff821e02d63b6875636d37107a28 Mon Sep 17 00:00:00 2001
From: bardleb <bjones@phase2technology.com>
Date: Tue, 25 Jul 2023 10:10:20 -0400
Subject: [PATCH 2/7] feat: Story update and bug fixes

---
 packages/outline-core-heading/index.ts        |   7 +-
 .../src/outline-core-heading.css              |  44 +++----
 .../src/outline-core-heading.ts               |  29 ++---
 .../config/storybook.main.css                 |  26 ++--
 .../components/outline-heading.stories.ts     | 121 +++++++-----------
 5 files changed, 94 insertions(+), 133 deletions(-)

diff --git a/packages/outline-core-heading/index.ts b/packages/outline-core-heading/index.ts
index 01672284e..ea7ea58a4 100644
--- a/packages/outline-core-heading/index.ts
+++ b/packages/outline-core-heading/index.ts
@@ -1,6 +1,3 @@
 export { OutlineCoreHeading } from './src/outline-core-heading';
-export type {
-  AllowedHeadingLevels,
-  AllowedHeadingSizes,
-} from './src/config';
-export { HeadingLevels, HeadingSizes, HeadingStyles } from './src/config';
+export type { AllowedHeadingLevels, AllowedHeadingSizes } from './src/config';
+export { HeadingLevels, HeadingSizes, HeadingWeights } from './src/config';
diff --git a/packages/outline-core-heading/src/outline-core-heading.css b/packages/outline-core-heading/src/outline-core-heading.css
index 0be97364f..186de38c3 100644
--- a/packages/outline-core-heading/src/outline-core-heading.css
+++ b/packages/outline-core-heading/src/outline-core-heading.css
@@ -33,91 +33,91 @@ h6 {
 }
 
 .outline-text--xs {
-  @apply text-xs ;
+  @apply text-xs;
 }
 
 .outline-text--sm {
-  @apply text-sm ;
+  @apply text-sm;
 }
 
 .outline-text--lg {
-  @apply text-lg ;
+  @apply text-lg;
 }
 
 .outline-text--lg.mobile {
-  @apply text-base ;
+  @apply text-base;
 }
 
 .outline-text--xl {
-  @apply text-xl ;
+  @apply text-xl;
 }
 
 .outline-text--xl.mobile {
-  @apply text-base ;
+  @apply text-base;
 }
 
 .outline-text--2xl {
-  @apply text-2xl ;
+  @apply text-2xl;
 }
 
 .outline-text--2xl.mobile {
-  @apply text-lg ;
+  @apply text-lg;
 }
 
 .outline-text--3xl {
-  @apply text-3xl ;
+  @apply text-3xl;
 }
 
 .outline-text--3xl.mobile {
-  @apply text-lg ;
+  @apply text-lg;
 }
 
 .outline-text--4xl {
-  @apply text-4xl ;
+  @apply text-4xl;
 }
 
 .outline-text--4xl.mobile {
-  @apply text-xl ;
+  @apply text-xl;
 }
 
 .outline-text--5xl {
-  @apply text-5xl ;
+  @apply text-5xl;
 }
 
 .outline-text--5xl.mobile {
-  @apply text-2xl ;
+  @apply text-2xl;
 }
 
 .outline-text--6xl {
-  @apply text-6xl ;
+  @apply text-6xl;
 }
 
 .outline-text--6xl.mobile {
-  @apply text-3xl ;
+  @apply text-3xl;
 }
 
 .outline-text--7xl {
-  @apply text-7xl ;
+  @apply text-7xl;
 }
 
 .outline-text--7xl.mobile {
-  @apply text-4xl ;
+  @apply text-4xl;
 }
 
 .outline-text--8xl {
-  @apply text-8xl ;
+  @apply text-8xl;
 }
 
 .outline-text--8xl.mobile {
-  @apply text-5xl ;
+  @apply text-5xl;
 }
 
 .outline-text--9xl {
-  @apply text-9xl ;
+  @apply text-9xl;
 }
 
 .outline-text--9xl.mobile {
-  @apply text-6xl ;
+  @apply text-6xl;
 }
 
 /* Font weights */
diff --git a/packages/outline-core-heading/src/outline-core-heading.ts b/packages/outline-core-heading/src/outline-core-heading.ts
index 01aef71f7..4119d2aef 100644
--- a/packages/outline-core-heading/src/outline-core-heading.ts
+++ b/packages/outline-core-heading/src/outline-core-heading.ts
@@ -19,14 +19,13 @@ import {
 
 @customElement('outline-core-heading')
 export class OutlineCoreHeading extends OutlineElement {
-
   static styles = [componentStyles];
 
   /**
    * The tag to apply: h1 | h2 | h3 | h4 | h5 | h6
    */
   @property({ type: String, reflect: true, attribute: 'level' })
-  level: AllowedHeadingLevels = 'h2';
+  level: AllowedHeadingLevels;
 
   /**
    * The size of the heading.
@@ -40,7 +39,7 @@ export class OutlineCoreHeading extends OutlineElement {
    * @type {AllowedHeadingWeights}
    */
   @property({ type: String, reflect: true, attribute: 'weight' })
-  weight: AllowedHeadingWeights = 'bold';
+  weight: AllowedHeadingWeights;
 
   /**
    * Additional CSS classes to apply to the heading element.
@@ -49,14 +48,9 @@ export class OutlineCoreHeading extends OutlineElement {
   @property({ type: String, reflect: true, attribute: 'additional-classes' })
   additionalClasses: string;
 
-  /**
-   * Whether the heading should be displayed as a clickable card.
-   * @type {boolean}
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'clickable-card' })
-  clickableCard = false;
-
-  generateHeading(classes: { [key: string]: boolean | string }): TemplateResult {
+  generateHeading(classes: {
+    [key: string]: boolean | string;
+  }): TemplateResult {
     return html`
       <${unsafeStatic(this.level as string)} class=${classMap(classes)}>
         <slot></slot>
@@ -64,24 +58,27 @@ export class OutlineCoreHeading extends OutlineElement {
     `;
   }
 
-  fullMarkupInSlot(): TemplateResult {
+  fullMarkupInSlot(classes: {
+    [key: string]: boolean | string;
+  }): TemplateResult {
     return html`
-      <slot></slot>
+      
+      <slot class=${classMap(classes)}></slot>
+      
     `;
   }
 
   render(): TemplateResult {
     const classes = {
-      [`outline-text--${this.size}`]: this.size,
+      [`outline-text--${this.size}`]: true,
       [`outline-font--${this.weight}`]: true,
       [`${this.additionalClasses}`]: this.additionalClasses,
-      'clickable-card': !!this.clickableCard,
     };
 
     if (this.level) {
       return this.generateHeading(classes);
     } else {
-      return this.fullMarkupInSlot();
+      return this.fullMarkupInSlot(classes);
     }
   }
 }
diff --git a/packages/outline-storybook/config/storybook.main.css b/packages/outline-storybook/config/storybook.main.css
index 5b9e82948..961926b1f 100644
--- a/packages/outline-storybook/config/storybook.main.css
+++ b/packages/outline-storybook/config/storybook.main.css
@@ -451,11 +451,11 @@ video{
   --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 
 }
-.border-2, .border, .border-b, .border-t-2{
+.border-2, .border, .border-t-2, .border-b{
   border-color: currentColor;
 
 }
-.shadow-xl, .shadow, .shadow-md{
+.shadow-md, .shadow-xl, .shadow{
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -701,14 +701,14 @@ video{
 .border{
   border-width: 1px;
 
-}
-.border-b{
-  border-bottom-width: 1px;
-
 }
 .border-t-2{
   border-top-width: 2px;
 
+}
+.border-b{
+  border-bottom-width: 1px;
+
 }
 .border-dashed{
   border-style: dashed;
@@ -948,6 +948,13 @@ video{
 .no-underline{
   text-decoration: none;
 
+}
+.shadow-md{
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
 }
 .shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
@@ -962,13 +969,6 @@ video{
   box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 
-}
-.shadow-md{
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-
 }
 .outline{
   outline-style: solid;
diff --git a/packages/outline-storybook/stories/components/outline-heading.stories.ts b/packages/outline-storybook/stories/components/outline-heading.stories.ts
index c8fb8cc9c..cfe8c3d92 100644
--- a/packages/outline-storybook/stories/components/outline-heading.stories.ts
+++ b/packages/outline-storybook/stories/components/outline-heading.stories.ts
@@ -6,10 +6,10 @@ import { argTypeSlotContent } from '@phase2/outline-core';
 import {
   AllowedHeadingLevels,
   HeadingSizes,
-  HeadingStyles,
-} from '@phase2/outline-heading';
+  HeadingWeights,
+} from '@phase2/outline-core-heading';
 
-import '@phase2/outline-heading';
+import '@phase2/outline-core-heading';
 import '@phase2/outline-container';
 
 const levelOptions: AllowedHeadingLevels[] = [
@@ -23,19 +23,20 @@ const levelOptions: AllowedHeadingLevels[] = [
 
 export default {
   title: 'Content/Heading',
-  component: 'outline-heading',
+  component: 'outline-core-heading',
   // Tags are a new feature coming in 7.1, that we are using to drive this behaviour.
   tags: ['docsPage'],
   argTypes: {
     level: {
-      description: 'HTML level. Used by screen readers.',
+      description:
+        'level property. Using this property means your heading will be in the shadowDOM which IS NOT RECOMMENDED.',
       options: levelOptions,
       control: {
         type: 'select',
       },
-      table: { category: 'Properties', defaultValue: { summary: 'h2' } },
+      table: { category: 'Properties', defaultValue: { summary: 'NULL' } },
     },
-    levelSize: {
+    size: {
       description: 'Presentation level. Used for styling.',
       options: HeadingSizes,
       control: {
@@ -43,9 +44,9 @@ export default {
       },
       table: { category: 'Properties', defaultValue: { summary: 'NULL' } },
     },
-    levelStyle: {
+    weight: {
       description: 'Presentation style. Font weight variation.',
-      options: HeadingStyles,
+      options: HeadingWeights,
       control: {
         type: 'select',
       },
@@ -61,108 +62,74 @@ export default {
     docs: {
       description: {
         component: `
-This component renders a heading.
-
-## Difference from \`h1\`, \`h2\`, etc elements
-
-This is rendered as various \`h1\`, etc elements, but is styled based on the \`level-size\`. This allows screen readers to properly read the structure of a page even when this diverges from the visual presentation of these headers.
-
-## Variation
-
-You can also set the font weight using the \`level-style\` attribute.
-
-        `,
-      },
-      source: {
-        code: `
-<outline-heading
-  level="{{ level }}"
-  level-size="{{ level-size }}"
-  level-style="{{ levelStyle }}"
->
-  {{ defaultSlot}
-</outline-heading>
+This component renders styles for a heading as the default. You will need to hard define the appropriate <h> tag within your slot that wraps your content. This component is intended to have the <h> tag and the content within rendered to the light DOM. If you MUST use shadowDOM you can define the level prop but you must also remove the <h> tag from your slot content. This is not recommended.
         `,
       },
     },
   },
 };
 
-const Template = ({
-  level,
-  levelSize,
-  levelStyle,
-  defaultSlot,
-}: any): TemplateResult =>
+const Template = ({ level, size, weight, defaultSlot }: any): TemplateResult =>
   html`
     <outline-container>
-      <outline-heading
+      <outline-core-heading
         level="${ifDefined(level)}"
-        level-size="${ifDefined(levelSize)}"
-        level-style="${ifDefined(levelStyle)}"
+        size="${ifDefined(size)}"
+        weight="${ifDefined(weight)}"
       >
-        ${defaultSlot}
-      </outline-heading>
+        ${level ? defaultSlot : html`<h1>${defaultSlot}</h1>`} 
+
+      </outline-core-heading>
     </outline-container>
   `;
 
 export const Heading: any = Template.bind({});
 Heading.args = {
-  level: 'h1',
-  levelSize: '3xl',
-  levelStyle: 'semibold',
+  level: null,
+  size: '3xl',
+  weight: 'semibold',
 };
 
-const StandardHeadingsTemplate = (): TemplateResult => {
+const SlottedHeadingsWithAttributesTemplate = (): TemplateResult => {
   return html`
-<outline-heading level="h1">This is a standard Heading 1.</outline-heading>
-<outline-heading level="h2">This is a standard Heading 2.</outline-heading>
-<outline-heading level="h3">This is a standard Heading 3.</outline-heading>
-<outline-heading level="h4">This is a standard Heading 4.</outline-heading>
-<outline-heading level="h5">This is a standard Heading 5.</outline-heading>
-<outline-heading level="h6">This is a standard Heading 6.</outline-heading>
+<outline-core-heading size="3xl" weight="bold"><h1>This is a standard Heading 1.</h1></outline-core-heading>
+<outline-core-heading size="2xl" weight="semibold"><h2>This is a standard Heading 2.</h2></outline-core-heading>
+<outline-core-heading size="xl" weight="semibold"><h3>This is a standard Heading 3.</h3></outline-core-heading>
+<outline-core-heading size="lg" weight="semibold"><h4>This is a standard Heading 4.</h4></outline-core-heading>
+<outline-core-heading size="base" weight="semibold"><h5>This is a standard Heading 5.</h5></outline-core-heading>
+<outline-core-heading size="base" weight="semibold"><h6>This is a standard Heading 6.</h6></outline-core-heading>
 `;
 };
 
-export const StandardHeadings = () => StandardHeadingsTemplate();
-StandardHeadings.parameters = {
+export const SlottedHeadingsWithAttributes = () =>
+  SlottedHeadingsWithAttributesTemplate();
+SlottedHeadingsWithAttributes.parameters = {
   docs: {
     description: {
-      story: `This example shows the standard heading elements. 
-      This uses only the \`level\` attribute to declare the semantic level of the heading element.
-      This also allows us to show the default shift of sizes between smaller and larger breakpoints.
+      story: `This example shows the recommended way of creating headings using slots. The size and weight attributes are optional and can be customized for each heading.
       `,
     },
-    source: {
-      code: `
-<outline-heading level="h1">This is a standard Heading 1 element.</outline-heading>
-<outline-heading level="h2">This is a standard Heading 2 element.</outline-heading>
-<outline-heading level="h3">This is a standard Heading 3 element.</outline-heading>
-<outline-heading level="h4">This is a standard Heading 4 element.</outline-heading>
-<outline-heading level="h5">This is a standard Heading 5 element.</outline-heading>
-<outline-heading level="h6">This is a standard Heading 6 element.</outline-heading>
-`,
-    },
   },
 };
 
-const DefaultHeadingTemplate = (): TemplateResult => {
+const SlottedHeadingsWithNoAttributesTemplate = (): TemplateResult => {
   return html`
-<outline-heading>Sample heading text that should take up multiple lines so we can test for proper size and leading.</outline-heading>
+<outline-core-heading><h1>This is a standard Heading 1.</h1></outline-core-heading>
+<outline-core-heading><h2>This is a standard Heading 2.</h2></outline-core-heading>
+<outline-core-heading><h3>This is a standard Heading 3.</h3></outline-core-heading>
+<outline-core-heading><h4>This is a standard Heading 4.</h4></outline-core-heading>
+<outline-core-heading><h5>This is a standard Heading 5.</h5></outline-core-heading>
+<outline-core-heading><h6>This is a standard Heading 6.</h6></outline-core-heading>
 `;
 };
-export const DefaultHeading: any = DefaultHeadingTemplate.bind({});
-DefaultHeading.args = {};
-DefaultHeading.parameters = {
+
+export const SlottedHeadingsWithNoAttributes = () =>
+  SlottedHeadingsWithNoAttributesTemplate();
+SlottedHeadingsWithNoAttributes.parameters = {
   docs: {
     description: {
-      story: `This example shows an <code>outline-heading</code> element with no attributes being rendered.
+      story: `This example shows the recommended way of creating headings using slots but with no attributes for styling.
       `,
     },
-    source: {
-      code: `
-<outline-heading>Sample heading text that should take up multiple lines so we can test for proper size and leading.</outline-heading>
-`,
-    },
   },
 };

From 0d3c73204054a10e9ae08f2c91157285c3537cdd Mon Sep 17 00:00:00 2001
From: Ofer Shaal <oshaal@phase2technology.com>
Date: Tue, 8 Aug 2023 13:25:16 +0000
Subject: [PATCH 3/7] fix: resolving PR notes

---
 packages/outline-core-heading/CHANGELOG.md | 13 ------------
 packages/outline-core-heading/README.md    | 24 +++++++++++-----------
 packages/outline-core-heading/package.json |  1 -
 3 files changed, 12 insertions(+), 26 deletions(-)
 delete mode 100644 packages/outline-core-heading/CHANGELOG.md

diff --git a/packages/outline-core-heading/CHANGELOG.md b/packages/outline-core-heading/CHANGELOG.md
deleted file mode 100644
index d111d464d..000000000
--- a/packages/outline-core-heading/CHANGELOG.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# @phase2/outline-heading
-
-## 0.1.2
-
-### Patch Changes
-
-- Update to @phase2/outline-core packages.
-
-## 0.1.1
-
-### Patch Changes
-
-- Bumped versions with updated package contents.
diff --git a/packages/outline-core-heading/README.md b/packages/outline-core-heading/README.md
index 4261cf280..57728ae46 100644
--- a/packages/outline-core-heading/README.md
+++ b/packages/outline-core-heading/README.md
@@ -1,17 +1,17 @@
-# outline-heading
-
-The Heading component.
+# outline-core-heading
 
 ## Properties
 
-| Property     | Attribute     | Type                                             | Default | Description                                      |
-|--------------|---------------|--------------------------------------------------|---------|--------------------------------------------------|
-| `level`      | `level`       | `string \| undefined`                            | "h2"    | The tag to apply: h1 \| h2 \| h3 \| h4 \| h5 \| h6 |
-| `levelSize`  | `level-size`  | `"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"` |         | The heading level size to apply. Optional override to default styles for a given level |
-| `levelStyle` | `level-style` | `"medium" \| "black" \| "thin" \| "extralight" \| "light" \| "normal" \| "semibold" \| "bold" \| "extrabold"` | "bold"  | The heading level style to apply. Optional override to default styles for a given level |
+| Property            | Attribute            | Type                    | Description                                      |
+|---------------------|----------------------|-------------------------|--------------------------------------------------|
+| `additionalClasses` | `additional-classes` | `string`                | Additional CSS classes to apply to the heading element. |
+| `level`             | `level`              | `string \| undefined`   | The tag to apply: h1 \| h2 \| h3 \| h4 \| h5 \| h6 |
+| `size`              | `size`               | `AllowedHeadingSizes`   | The size of the heading.                         |
+| `weight`            | `weight`             | `AllowedHeadingWeights` | The weight of the heading.                       |
 
-## Slots
+## Methods
 
-| Name          |
-|---------------|
-| `defaultSlot` |
+| Method             | Type                                             |
+|--------------------|--------------------------------------------------|
+| `fullMarkupInSlot` | `(classes: { [key: string]: string \| boolean; }): TemplateResult<ResultType>` |
+| `generateHeading`  | `(classes: { [key: string]: string \| boolean; }): TemplateResult<ResultType>` |
diff --git a/packages/outline-core-heading/package.json b/packages/outline-core-heading/package.json
index 50dafcf6c..c2c613f0d 100644
--- a/packages/outline-core-heading/package.json
+++ b/packages/outline-core-heading/package.json
@@ -1,6 +1,5 @@
 {
   "name": "@phase2/outline-core-heading",
-  "version": "0.1.2",
   "description": "The Outline Components for the web heading component",
   "keywords": [
     "outline components",

From e7c95358f50e93cf466239784ad3e98e8437cb3d Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Mon, 21 Aug 2023 21:44:16 -0400
Subject: [PATCH 4/7] fix(outline-core-heading): Updating package linkage.

---
 packages/outline-core-heading/package.json |  3 ++-
 packages/outline-storybook/package.json    |  3 ++-
 yarn.lock                                  | 18 +++++++++++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/outline-core-heading/package.json b/packages/outline-core-heading/package.json
index c2c613f0d..54100551b 100644
--- a/packages/outline-core-heading/package.json
+++ b/packages/outline-core-heading/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@phase2/outline-core-heading",
+  "version": "0.0.0",
   "description": "The Outline Components for the web heading component",
   "keywords": [
     "outline components",
@@ -18,7 +19,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/phase2/outline.git",
-    "directory": "packages/outline-heading"
+    "directory": "packages/outline-core-heading"
   },
   "license": "BSD-3-Clause",
   "scripts": {
diff --git a/packages/outline-storybook/package.json b/packages/outline-storybook/package.json
index 8d199cfde..54dfe6a27 100644
--- a/packages/outline-storybook/package.json
+++ b/packages/outline-storybook/package.json
@@ -16,7 +16,8 @@
     "@phase2/outline-alert": "^0.1.8",
     "@phase2/outline-code-block": "^0.1.4",
     "@phase2/outline-docs": "^0.0.17",
-    "@phase2/outline-static-assets": "^0.0.4"
+    "@phase2/outline-static-assets": "^0.0.4",
+    "@phase2/outline-core-heading": "^0.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^7.0.12",
diff --git a/yarn.lock b/yarn.lock
index 63b3f20b1..0c6c1c123 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3374,6 +3374,18 @@
     "@types/sinon-chai" "^3.2.3"
     chai-a11y-axe "^1.3.2"
 
+"@phase2/outline-config@^0.0.10":
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/@phase2/outline-config/-/outline-config-0.0.10.tgz#ddeee1a39bd2be507ce36fc9983d12cb3a8f7a03"
+  integrity sha512-pHykGIyBj6kmAcJ8CijQjmFANN6cAIdWLoZEOeF0rdo0alHuwsWVvOq9e5vKzDeaiIEU8rwRvF1QpLNtOf2kcA==
+
+"@phase2/outline-core@^0.1.9":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@phase2/outline-core/-/outline-core-0.1.12.tgz#a76a369523359b87b8b23f7986d7a6e372e8c547"
+  integrity sha512-mWbBKAl3Z3v5ZQO/CIDXXlNQfwsG8QxG3cVY6MfJziBV5elLwS+26MECfXsh2rSov1S0sh0quq6jpvbVgSeGCg==
+  dependencies:
+    "@phase2/outline-config" "^0.0.10"
+
 "@rollup/plugin-image@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-3.0.2.tgz#8a66389510517495c5d10d392140cdefa43b27c2"
@@ -6876,9 +6888,9 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001429"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz#70cdae959096756a85713b36dd9cb82e62325639"
-  integrity sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==
+  version "1.0.30001522"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz"
+  integrity sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==
 
 capital-case@^1.0.4:
   version "1.0.4"

From b0d23af2452cd54f01c21320b80053aa3b4c2ce0 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Wed, 6 Sep 2023 21:34:32 -0400
Subject: [PATCH 5/7] feat(outline-core-heading): Move to `components`
 directory.

---
 packages/{ => components}/outline-core-heading/README.md          | 0
 packages/{ => components}/outline-core-heading/index.ts           | 0
 packages/{ => components}/outline-core-heading/package.json       | 0
 packages/{ => components}/outline-core-heading/src/config.ts      | 0
 .../outline-core-heading/src/outline-core-heading.css             | 0
 .../outline-core-heading/src/outline-core-heading.ts              | 0
 .../outline-core-heading/src/test/outline-core-heading.test.ts    | 0
 .../{ => components}/outline-core-heading/tsconfig.build.json     | 0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/{ => components}/outline-core-heading/README.md (100%)
 rename packages/{ => components}/outline-core-heading/index.ts (100%)
 rename packages/{ => components}/outline-core-heading/package.json (100%)
 rename packages/{ => components}/outline-core-heading/src/config.ts (100%)
 rename packages/{ => components}/outline-core-heading/src/outline-core-heading.css (100%)
 rename packages/{ => components}/outline-core-heading/src/outline-core-heading.ts (100%)
 rename packages/{ => components}/outline-core-heading/src/test/outline-core-heading.test.ts (100%)
 rename packages/{ => components}/outline-core-heading/tsconfig.build.json (100%)

diff --git a/packages/outline-core-heading/README.md b/packages/components/outline-core-heading/README.md
similarity index 100%
rename from packages/outline-core-heading/README.md
rename to packages/components/outline-core-heading/README.md
diff --git a/packages/outline-core-heading/index.ts b/packages/components/outline-core-heading/index.ts
similarity index 100%
rename from packages/outline-core-heading/index.ts
rename to packages/components/outline-core-heading/index.ts
diff --git a/packages/outline-core-heading/package.json b/packages/components/outline-core-heading/package.json
similarity index 100%
rename from packages/outline-core-heading/package.json
rename to packages/components/outline-core-heading/package.json
diff --git a/packages/outline-core-heading/src/config.ts b/packages/components/outline-core-heading/src/config.ts
similarity index 100%
rename from packages/outline-core-heading/src/config.ts
rename to packages/components/outline-core-heading/src/config.ts
diff --git a/packages/outline-core-heading/src/outline-core-heading.css b/packages/components/outline-core-heading/src/outline-core-heading.css
similarity index 100%
rename from packages/outline-core-heading/src/outline-core-heading.css
rename to packages/components/outline-core-heading/src/outline-core-heading.css
diff --git a/packages/outline-core-heading/src/outline-core-heading.ts b/packages/components/outline-core-heading/src/outline-core-heading.ts
similarity index 100%
rename from packages/outline-core-heading/src/outline-core-heading.ts
rename to packages/components/outline-core-heading/src/outline-core-heading.ts
diff --git a/packages/outline-core-heading/src/test/outline-core-heading.test.ts b/packages/components/outline-core-heading/src/test/outline-core-heading.test.ts
similarity index 100%
rename from packages/outline-core-heading/src/test/outline-core-heading.test.ts
rename to packages/components/outline-core-heading/src/test/outline-core-heading.test.ts
diff --git a/packages/outline-core-heading/tsconfig.build.json b/packages/components/outline-core-heading/tsconfig.build.json
similarity index 100%
rename from packages/outline-core-heading/tsconfig.build.json
rename to packages/components/outline-core-heading/tsconfig.build.json

From ab228869701aba1d0fbc163d40372100b177c645 Mon Sep 17 00:00:00 2001
From: Jake Strawn <jake.strawn@gmail.com>
Date: Wed, 6 Sep 2023 21:37:45 -0400
Subject: [PATCH 6/7] feat(outline-core-heading): Build updates.

---
 .../config/storybook.main.css                 | 700 +++++++++---------
 yarn.lock                                     |  12 +
 2 files changed, 360 insertions(+), 352 deletions(-)

diff --git a/packages/documentation/outline-storybook/config/storybook.main.css b/packages/documentation/outline-storybook/config/storybook.main.css
index 70c1d8ddd..1eb20ce1a 100644
--- a/packages/documentation/outline-storybook/config/storybook.main.css
+++ b/packages/documentation/outline-storybook/config/storybook.main.css
@@ -1,385 +1,381 @@
 @import url('https://rsms.me/inter/inter.css');
-:root {
-  --brand-primary: #2563eb;
-  --brand-secondary: #059669;
-  --brand-tertiary: #dc2626;
-  --brand-quaternary: #d97706;
-  --brand-quinary: #9333ea;
-  --brand-senary: #db2777;
-  --brand-septenary: #4f46e5;
-  --brand-octonary: #525252;
-  --brand-nonary: #1e3a8a;
-  --brand-denary: #171717;
-  --status-success: #2f855a;
-  --status-warning: #b64301;
-  --status-error: #c53030;
-  --status-info: #1e3a8a;
-  --outline-phase2-blue: #0080ff;
-  --outline-karma-coral: #fa5c5c;
-  --outline-soft-black: #171717;
-  --outline-not-gray: #cfc7d4;
-  --outline-misty-teal: #73f2e5;
-  --outline-electric-violet: #9484ff;
-  --outline-dusty-blue: #7fc7ee;
-  --outline-transparent: transparent;
-  --outline-white: #fff;
-  --outline-black: #000;
+:root{
+  --brand-primary:#2563eb;
+  --brand-secondary:#059669;
+  --brand-tertiary:#dc2626;
+  --brand-quaternary:#d97706;
+  --brand-quinary:#9333ea;
+  --brand-senary:#db2777;
+  --brand-septenary:#4f46e5;
+  --brand-octonary:#525252;
+  --brand-nonary:#1e3a8a;
+  --brand-denary:#171717;
+  --status-success:#2f855a;
+  --status-warning:#b64301;
+  --status-error:#c53030;
+  --status-info:#1e3a8a;
+  --outline-phase2-blue:#0080ff;
+  --outline-karma-coral:#fa5c5c;
+  --outline-soft-black:#171717;
+  --outline-not-gray:#cfc7d4;
+  --outline-misty-teal:#73f2e5;
+  --outline-electric-violet:#9484ff;
+  --outline-dusty-blue:#7fc7ee;
+  --outline-transparent:transparent;
+  --outline-white:#fff;
+  --outline-black:#000;
+  
+  --outline-gray-50:#fafafa;
+  --outline-gray-100:#f5f5f5;
+  --outline-gray-200:#e5e5e5;
+  --outline-gray-300:#d4d4d4;
+  --outline-gray-400:#a3a3a3;
+  --outline-gray-500:#737373;
+  --outline-gray-600:#525252;
+  --outline-gray-700:#404040;
+  --outline-gray-800:#262626;
+  --outline-gray-900:#171717;
 
-  --outline-gray-50: #fafafa;
-  --outline-gray-100: #f5f5f5;
-  --outline-gray-200: #e5e5e5;
-  --outline-gray-300: #d4d4d4;
-  --outline-gray-400: #a3a3a3;
-  --outline-gray-500: #737373;
-  --outline-gray-600: #525252;
-  --outline-gray-700: #404040;
-  --outline-gray-800: #262626;
-  --outline-gray-900: #171717;
+  --outline-blue-50:#eff6ff;
+  --outline-blue-100:#dbeafe;
+  --outline-blue-200:#bfdbfe;
+  --outline-blue-300:#93c5fd;
+  --outline-blue-400:#60a5fa;
+  --outline-blue-500:#3b82f6;
+  --outline-blue-600:#2563eb;
+  --outline-blue-700:#1d4ed8;
+  --outline-blue-800:#1e40af;
+  --outline-blue-900:#1e3a8a;
 
-  --outline-blue-50: #eff6ff;
-  --outline-blue-100: #dbeafe;
-  --outline-blue-200: #bfdbfe;
-  --outline-blue-300: #93c5fd;
-  --outline-blue-400: #60a5fa;
-  --outline-blue-500: #3b82f6;
-  --outline-blue-600: #2563eb;
-  --outline-blue-700: #1d4ed8;
-  --outline-blue-800: #1e40af;
-  --outline-blue-900: #1e3a8a;
+  --red-50:#fef2f2;
+  --red-100:#fee2e2;
+  --red-200:#fecaca;
+  --red-300:#fca5a5;
+  --red-400:#f87171;
+  --red-500:#ef4444;
+  --red-600:#dc2626;
+  --red-700:#b91c1c;
+  --red-800:#991b1b;
+  --red-900:#7f1d1d;
+  --yellow-50:#fffbeb;
+  --yellow-100:#fef3c7;
+  --yellow-200:#fde68a;
+  --yellow-300:#fcd34d;
+  --yellow-400:#fbbf24;
+  --yellow-500:#f59e0b;
+  --yellow-600:#d97706;
+  --yellow-700:#b45309;
+  --yellow-800:#92400e;
+  --yellow-900:#78350f;
+  --green-50:#ecfdf5;
+  --green-100:#d1fae5;
+  --green-200:#a7f3d0;
+  --green-300:#6ee7b7;
+  --green-400:#34d399;
+  --green-500:#10b981;
+  --green-600:#059669;
+  --green-700:#047857;
+  --green-800:#065f46;
+  --green-900:#064e3b;
+  --indigo-50:#eef2ff;
+  --indigo-100:#e0e7ff;
+  --indigo-200:#c7d2fe;
+  --indigo-300:#a5b4fc;
+  --indigo-400:#818cf8;
+  --indigo-500:#6366f1;
+  --indigo-600:#4f46e5;
+  --indigo-700:#4338ca;
+  --indigo-800:#3730a3;
+  --indigo-900:#312e81;
+  --purple-50:#faf5ff;
+  --purple-100:#f3e8ff;
+  --purple-200:#e9d5ff;
+  --purple-300:#d8b4fe;
+  --purple-400:#c084fc;
+  --purple-500:#a855f7;
+  --purple-600:#9333ea;
+  --purple-700:#7e22ce;
+  --purple-800:#6b21a8;
+  --purple-900:#581c87;
+  --pink-50:#fdf2f8;
+  --pink-100:#fce7f3;
+  --pink-200:#fbcfe8;
+  --pink-300:#f9a8d4;
+  --pink-400:#f472b6;
+  --pink-500:#ec4899;
+  --pink-600:#db2777;
+  --pink-700:#be185d;
+  --pink-800:#9d174d;
+  --pink-900:#831843;
+  --screen-xs:480px;
+  --screen-sm:640px;
+  --screen-md:768px;
+  --screen-lg:1024px;
+  --screen-xl:1280px;
+  --screen-xxl:1440px;
+  --screen-xxxl:2180px;
 
-  --red-50: #fef2f2;
-  --red-100: #fee2e2;
-  --red-200: #fecaca;
-  --red-300: #fca5a5;
-  --red-400: #f87171;
-  --red-500: #ef4444;
-  --red-600: #dc2626;
-  --red-700: #b91c1c;
-  --red-800: #991b1b;
-  --red-900: #7f1d1d;
-  --yellow-50: #fffbeb;
-  --yellow-100: #fef3c7;
-  --yellow-200: #fde68a;
-  --yellow-300: #fcd34d;
-  --yellow-400: #fbbf24;
-  --yellow-500: #f59e0b;
-  --yellow-600: #d97706;
-  --yellow-700: #b45309;
-  --yellow-800: #92400e;
-  --yellow-900: #78350f;
-  --green-50: #ecfdf5;
-  --green-100: #d1fae5;
-  --green-200: #a7f3d0;
-  --green-300: #6ee7b7;
-  --green-400: #34d399;
-  --green-500: #10b981;
-  --green-600: #059669;
-  --green-700: #047857;
-  --green-800: #065f46;
-  --green-900: #064e3b;
-  --indigo-50: #eef2ff;
-  --indigo-100: #e0e7ff;
-  --indigo-200: #c7d2fe;
-  --indigo-300: #a5b4fc;
-  --indigo-400: #818cf8;
-  --indigo-500: #6366f1;
-  --indigo-600: #4f46e5;
-  --indigo-700: #4338ca;
-  --indigo-800: #3730a3;
-  --indigo-900: #312e81;
-  --purple-50: #faf5ff;
-  --purple-100: #f3e8ff;
-  --purple-200: #e9d5ff;
-  --purple-300: #d8b4fe;
-  --purple-400: #c084fc;
-  --purple-500: #a855f7;
-  --purple-600: #9333ea;
-  --purple-700: #7e22ce;
-  --purple-800: #6b21a8;
-  --purple-900: #581c87;
-  --pink-50: #fdf2f8;
-  --pink-100: #fce7f3;
-  --pink-200: #fbcfe8;
-  --pink-300: #f9a8d4;
-  --pink-400: #f472b6;
-  --pink-500: #ec4899;
-  --pink-600: #db2777;
-  --pink-700: #be185d;
-  --pink-800: #9d174d;
-  --pink-900: #831843;
-  --screen-xs: 480px;
-  --screen-sm: 640px;
-  --screen-md: 768px;
-  --screen-lg: 1024px;
-  --screen-xl: 1280px;
-  --screen-xxl: 1440px;
-  --screen-xxxl: 2180px;
+  --spacing-0:0px;
+  --spacing-1:0.25rem;
+  --spacing-2:0.5rem;
+  --spacing-3:0.75rem;
+  --spacing-4:1rem;
+  --spacing-5:1.25rem;
+  --spacing-6:1.5rem;
+  --spacing-7:1.75rem;
+  --spacing-8:2rem;
+  --spacing-9:2.25rem;
+  --spacing-10:2.5rem;
+  --spacing-11:2.75rem;
+  --spacing-12:3rem;
+  --spacing-14:3.5rem;
+  --spacing-16:4rem;
+  --spacing-20:5rem;
+  --spacing-24:6rem;
+  --spacing-28:7rem;
+  --spacing-32:8rem;
+  --spacing-36:9rem;
+  --spacing-40:10rem;
+  --spacing-44:11rem;
+  --spacing-48:12rem;
+  --spacing-52:13rem;
+  --spacing-56:14rem;
+  --spacing-60:15rem;
+  --spacing-64:16rem;
+  --spacing-72:18rem;
+  --spacing-80:20rem;
+  --spacing-96:24rem;
+  --spacing-px:1px;
 
-  --spacing-0: 0px;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-14: 3.5rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-28: 7rem;
-  --spacing-32: 8rem;
-  --spacing-36: 9rem;
-  --spacing-40: 10rem;
-  --spacing-44: 11rem;
-  --spacing-48: 12rem;
-  --spacing-52: 13rem;
-  --spacing-56: 14rem;
-  --spacing-60: 15rem;
-  --spacing-64: 16rem;
-  --spacing-72: 18rem;
-  --spacing-80: 20rem;
-  --spacing-96: 24rem;
-  --spacing-px: 1px;
+  --fs-xs:0.75rem;
+  --fs-sm:0.875rem;
+  --fs-base:1rem;
+  --fs-lg:1.125rem;
+  --fs-xl:1.25rem;
+  --fs-2xl:1.5rem;
+  --fs-3xl:1.875rem;
+  --fs-4xl:2.25rem;
+  --fs-5xl:3.5rem;
+  --fs-6xl:4.5rem;
+  --fs-7xl:5.5rem;
+  --fs-8xl:6.5rem;
+  --fs-9xl:7.5rem;
 
-  --fs-xs: 0.75rem;
-  --fs-sm: 0.875rem;
-  --fs-base: 1rem;
-  --fs-lg: 1.125rem;
-  --fs-xl: 1.25rem;
-  --fs-2xl: 1.5rem;
-  --fs-3xl: 1.875rem;
-  --fs-4xl: 2.25rem;
-  --fs-5xl: 3.5rem;
-  --fs-6xl: 4.5rem;
-  --fs-7xl: 5.5rem;
-  --fs-8xl: 6.5rem;
-  --fs-9xl: 7.5rem;
+  --lh-xs:1rem;
+  --lh-sm:1.25rem;
+  --lh-base:1.5rem;
+  --lh-lg:1.75rem;
+  --lh-xl:1.75rem;
+  --lh-2xl:2rem;
+  --lh-3xl:2.25rem;
+  --lh-4xl:2.5rem;
+  --lh-5xl:3.75rem;
+  --lh-6xl:4.75rem;
+  --lh-7xl:5.75rem;
+  --lh-8xl:6.75rem;
+  --lh-9xl:7.75rem;
 
-  --lh-xs: 1rem;
-  --lh-sm: 1.25rem;
-  --lh-base: 1.5rem;
-  --lh-lg: 1.75rem;
-  --lh-xl: 1.75rem;
-  --lh-2xl: 2rem;
-  --lh-3xl: 2.25rem;
-  --lh-4xl: 2.5rem;
-  --lh-5xl: 3.75rem;
-  --lh-6xl: 4.75rem;
-  --lh-7xl: 5.75rem;
-  --lh-8xl: 6.75rem;
-  --lh-9xl: 7.75rem;
+  --ff-display:'Inter var', 'Helvetica', 'Arial', 'sans-serif';
+  --ff-body:'Inter var', 'Helvetica', 'Arial', 'sans-serif';
+  --ff-demo:'Inter var', 'Helvetica', 'Arial', 'sans-serif';
 
-  --ff-display: 'Inter var', 'Helvetica', 'Arial', 'sans-serif';
-  --ff-body: 'Inter var', 'Helvetica', 'Arial', 'sans-serif';
-  --ff-demo: 'Inter var', 'Helvetica', 'Arial', 'sans-serif';
+  --fw-thin:100;
+  --fw-extralight:200;
+  --fw-light:300;
+  --fw-normal:400;
+  --fw-medium:500;
+  --fw-semibold:600;
+  --fw-bold:700;
+  --fw-extrabold:800;
+  --fw-black:900;
 
-  --fw-thin: 100;
-  --fw-extralight: 200;
-  --fw-light: 300;
-  --fw-normal: 400;
-  --fw-medium: 500;
-  --fw-semibold: 600;
-  --fw-bold: 700;
-  --fw-extrabold: 800;
-  --fw-black: 900;
+  --fs-h1:4rem;
+  --fs-h1-medium:3rem;
+  --fs-h1-small:2.5rem;
+  
+  --lh-h1:3rem;
+  --lh-h1-medium:3.75rem;
+  --lh-h1-small:2rem;
 
-  --fs-h1: 4rem;
-  --fs-h1-medium: 3rem;
-  --fs-h1-small: 2.5rem;
+  --fs-h2:2.75rem;
+  --fs-h2-medium:2.5rem;
+  --fs-h2-small:2rem;
+  
+  --lh-h2:3.5rem;
+  --lh-h2-medium:3rem;
+  --lh-h2-small:2.5rem;
+  
 
-  --lh-h1: 3rem;
-  --lh-h1-medium: 3.75rem;
-  --lh-h1-small: 2rem;
-
-  --fs-h2: 2.75rem;
-  --fs-h2-medium: 2.5rem;
-  --fs-h2-small: 2rem;
-
-  --lh-h2: 3.5rem;
-  --lh-h2-medium: 3rem;
-  --lh-h2-small: 2.5rem;
-
-  --fs-h3: 2rem;
-  --fs-h3-medium: 1.75rem;
-  --fs-h3-small: 1.5rem;
-
-  --lh-h3: 2.25rem;
-  --lh-h3-medium: 2rem;
-  --lh-h3-small: 1.75rem;
-
-  --fs-h4: 1.5rem;
-  --fs-h4-medium: 1.5rem;
-  --fs-h4-small: 1.375rem;
-
-  --lh-h4: 2rem;
-  --lh-h4-medium: 1.75rem;
-  --lh-h4-small: 1.75rem;
-
-  --fs-h5: 1.375rem;
-  --fs-h5-medium: 1.25rem;
-  --fs-h5-small: 1.125rem;
-
-  --lh-h5: 1.75rem;
-  --lh-h5-medium: 1.5rem;
-  --lh-h5-small: 1.375rem;
-
-  --fs-h6: 1.125rem;
-  --fs-h6-medium: 1.125rem;
-  --fs-h6-small: 1rem;
-
-  --lh-h6: 1.5rem;
-  --lh-h6-medium: 1.375rem;
-  --lh-h6-small: 1.25rem;
-  --outline-ring-width: 2px;
+  --fs-h3:2rem;
+  --fs-h3-medium:1.75rem;
+  --fs-h3-small:1.5rem;
+  
+  --lh-h3:2.25rem;
+  --lh-h3-medium:2rem;
+  --lh-h3-small:1.75rem;
+  
+  --fs-h4:1.5rem;
+  --fs-h4-medium:1.5rem;
+  --fs-h4-small:1.375rem;
+  
+  --lh-h4:2rem;
+  --lh-h4-medium:1.75rem;
+  --lh-h4-small:1.75rem;
+  
+  --fs-h5:1.375rem;
+  --fs-h5-medium:1.25rem;
+  --fs-h5-small:1.125rem;
+  
+  --lh-h5:1.75rem;
+  --lh-h5-medium:1.5rem;
+  --lh-h5-small:1.375rem;
+  
+  --fs-h6:1.125rem;
+  --fs-h6-medium:1.125rem;
+  --fs-h6-small:1rem;
+  
+  --lh-h6:1.5rem;
+  --lh-h6-medium:1.375rem;
+  --lh-h6-small:1.25rem;
+  --outline-ring-width:2px;
   --outline-ring-inset: ;
-  --outline-ring-offset-width: 2px;
-  --outline-ring-offset-color: var(--outline-gray-100);
-  --outline-ring-color: var(--outline-soft-black);
-  --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0
-    var(--outline-ring-offset-width) var(--outline-ring-offset-color);
-  --outline-ring-shadow: var(--outline-ring-inset) 0 0 0
-    calc(var(--outline-ring-width) + var(--outline-ring-offset-width))
-    var(--outline-ring-color);
+  --outline-ring-offset-width:2px;
+  --outline-ring-offset-color:var(--outline-gray-100);
+  --outline-ring-color:var(--outline-soft-black);
+  --outline-ring-offset-shadow:var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-ring-offset-color);
+  --outline-ring-shadow:var(--outline-ring-inset) 0 0 0 calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) var(--outline-ring-color);
+
+  --outline-shadow:0 0 rgba(0, 0, 0, 0);
+  --outline-shadow-colored:0 0 rgba(0, 0, 0, 0);
 
-  --outline-shadow: 0 0 rgba(0, 0, 0, 0);
-  --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0);
 }
 /* ! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com */
 *,
 ::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
+::after{
+  box-sizing:border-box;
+  border-width:0;
+  border-style:solid;
+  border-color:currentColor;
 }
 ::before,
-::after {
-  --tw-content: '';
-}
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  tab-size: 4;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-body {
-  margin: 0;
-  line-height: inherit;
-}
-hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
-abbr[title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+::after{
+  --tw-content:'';
+}
+html{
+  line-height:1.5;
+  -webkit-text-size-adjust:100%;
+  tab-size:4;
+  font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+body{
+  margin:0;
+  line-height:inherit;
+}
+hr{
+  height:0;
+  color:inherit;
+  border-top-width:1px;
+}
+abbr[title]{
+  -webkit-text-decoration:underline dotted;
+          text-decoration:underline dotted;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
+h6{
+  font-size:inherit;
+  font-weight:inherit;
 }
-a {
-  color: inherit;
-  text-decoration: inherit;
+a{
+  color:inherit;
+  text-decoration:inherit;
 }
 b,
-strong {
-  font-weight: bolder;
+strong{
+  font-weight:bolder;
 }
 code,
 kbd,
 samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    'Liberation Mono', 'Courier New', monospace;
-  font-size: 1em;
+pre{
+  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size:1em;
 }
-small {
-  font-size: 80%;
+small{
+  font-size:80%;
 }
 sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+sup{
+  font-size:75%;
+  line-height:0;
+  position:relative;
+  vertical-align:baseline;
 }
-sub {
-  bottom: -0.25em;
+sub{
+  bottom:-0.25em;
 }
-sup {
-  top: -0.5em;
+sup{
+  top:-0.5em;
 }
-table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
+table{
+  text-indent:0;
+  border-color:inherit;
+  border-collapse:collapse;
 }
 button,
 input,
 optgroup,
 select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
+textarea{
+  font-family:inherit;
+  font-size:100%;
+  line-height:inherit;
+  color:inherit;
+  margin:0;
+  padding:0;
 }
 button,
-select {
-  text-transform: none;
+select{
+  text-transform:none;
 }
 button,
 [type='button'],
 [type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
+[type='submit']{
+  -webkit-appearance:button;
+  background-color:transparent;
+  background-image:none;
 }
-:-moz-focusring {
-  outline: auto;
+:-moz-focusring{
+  outline:auto;
 }
-:-moz-ui-invalid {
-  box-shadow: none;
+:-moz-ui-invalid{
+  box-shadow:none;
 }
-progress {
-  vertical-align: baseline;
+progress{
+  vertical-align:baseline;
 }
 ::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
+::-webkit-outer-spin-button{
+  height:auto;
 }
-[type='search'] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
+[type='search']{
+  -webkit-appearance:textfield;
+  outline-offset:-2px;
 }
-::-webkit-search-decoration {
-  -webkit-appearance: none;
+::-webkit-search-decoration{
+  -webkit-appearance:none;
 }
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
+::-webkit-file-upload-button{
+  -webkit-appearance:button;
+  font:inherit;
 }
-summary {
-  display: list-item;
+summary{
+  display:list-item;
 }
 blockquote,
 dl,
@@ -393,37 +389,37 @@ h6,
 hr,
 figure,
 p,
-pre {
-  margin: 0;
+pre{
+  margin:0;
 }
-fieldset {
-  margin: 0;
-  padding: 0;
+fieldset{
+  margin:0;
+  padding:0;
 }
-legend {
-  padding: 0;
+legend{
+  padding:0;
 }
 ol,
 ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+menu{
+  list-style:none;
+  margin:0;
+  padding:0;
 }
-textarea {
-  resize: vertical;
+textarea{
+  resize:vertical;
 }
 input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
+textarea::placeholder{
+  opacity:1;
+  color:#9ca3af;
 }
 button,
-[role='button'] {
-  cursor: pointer;
+[role="button"]{
+  cursor:pointer;
 }
-:disabled {
-  cursor: default;
+:disabled{
+  cursor:default;
 }
 img,
 svg,
@@ -432,15 +428,15 @@ canvas,
 audio,
 iframe,
 embed,
-object {
-  display: block;
-  vertical-align: middle;
+object{
+  display:block;
+  vertical-align:middle;
 }
 img,
-video {
-  max-width: 100%;
-  height: auto;
+video{
+  max-width:100%;
+  height:auto;
 }
-[hidden] {
-  display: none;
+[hidden]{
+  display:none;
 }
diff --git a/yarn.lock b/yarn.lock
index dbd127dd7..043b33485 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2859,6 +2859,18 @@
     "@types/sinon-chai" "^3.2.3"
     chai-a11y-axe "^1.5.0"
 
+"@phase2/outline-config@^0.0.10":
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/@phase2/outline-config/-/outline-config-0.0.10.tgz#ddeee1a39bd2be507ce36fc9983d12cb3a8f7a03"
+  integrity sha512-pHykGIyBj6kmAcJ8CijQjmFANN6cAIdWLoZEOeF0rdo0alHuwsWVvOq9e5vKzDeaiIEU8rwRvF1QpLNtOf2kcA==
+
+"@phase2/outline-core@^0.1.9":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@phase2/outline-core/-/outline-core-0.1.12.tgz#a76a369523359b87b8b23f7986d7a6e372e8c547"
+  integrity sha512-mWbBKAl3Z3v5ZQO/CIDXXlNQfwsG8QxG3cVY6MfJziBV5elLwS+26MECfXsh2rSov1S0sh0quq6jpvbVgSeGCg==
+  dependencies:
+    "@phase2/outline-config" "^0.0.10"
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"

From 42cb7909d2f88098213a1b5fddedfae4cae31635 Mon Sep 17 00:00:00 2001
From: bardleb <bjones@phase2technology.com>
Date: Tue, 5 Dec 2023 10:47:24 -0500
Subject: [PATCH 7/7] fix: added new patterns from button and adopted
 stylesheets

---
 .../components/outline-heading.stories.ts     | 32 ++++++-
 packages/outline-core-heading/src/config.ts   | 18 ++--
 .../src/outline-core-heading.css              | 95 ++++---------------
 .../src/outline-core-heading.lightdom.css     | 90 ++++++++++++++++++
 .../src/outline-core-heading.ts               | 95 +++++++++++++++----
 .../sample/outline-extended-button/index.ts   |  1 +
 .../outline-extended-button.css               |  3 +
 .../outline-extended-button.ts                | 14 +++
 .../outline-extended-button/package.json      | 41 ++++++++
 .../tsconfig.build.json                       |  9 ++
 10 files changed, 287 insertions(+), 111 deletions(-)
 create mode 100644 packages/outline-core-heading/src/outline-core-heading.lightdom.css
 create mode 100644 packages/outline-templates/default/src/components/sample/outline-extended-button/index.ts
 create mode 100644 packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.css
 create mode 100644 packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.ts
 create mode 100644 packages/outline-templates/default/src/components/sample/outline-extended-button/package.json
 create mode 100644 packages/outline-templates/default/src/components/sample/outline-extended-button/tsconfig.build.json

diff --git a/packages/documentation/outline-storybook/stories/components/outline-heading.stories.ts b/packages/documentation/outline-storybook/stories/components/outline-heading.stories.ts
index cfe8c3d92..670072a29 100644
--- a/packages/documentation/outline-storybook/stories/components/outline-heading.stories.ts
+++ b/packages/documentation/outline-storybook/stories/components/outline-heading.stories.ts
@@ -86,18 +86,18 @@ const Template = ({ level, size, weight, defaultSlot }: any): TemplateResult =>
 export const Heading: any = Template.bind({});
 Heading.args = {
   level: null,
-  size: '3xl',
+  size: 'xxxl',
   weight: 'semibold',
 };
 
 const SlottedHeadingsWithAttributesTemplate = (): TemplateResult => {
   return html`
-<outline-core-heading size="3xl" weight="bold"><h1>This is a standard Heading 1.</h1></outline-core-heading>
-<outline-core-heading size="2xl" weight="semibold"><h2>This is a standard Heading 2.</h2></outline-core-heading>
+<outline-core-heading size="xxxl" weight="bold"><h1>This is a standard Heading 1.</h1></outline-core-heading>
+<outline-core-heading size="xxl" weight="semibold"><h2>This is a standard Heading 2.</h2></outline-core-heading>
 <outline-core-heading size="xl" weight="semibold"><h3>This is a standard Heading 3.</h3></outline-core-heading>
 <outline-core-heading size="lg" weight="semibold"><h4>This is a standard Heading 4.</h4></outline-core-heading>
-<outline-core-heading size="base" weight="semibold"><h5>This is a standard Heading 5.</h5></outline-core-heading>
-<outline-core-heading size="base" weight="semibold"><h6>This is a standard Heading 6.</h6></outline-core-heading>
+<outline-core-heading size="md" weight="semibold"><h5>This is a standard Heading 5.</h5></outline-core-heading>
+<outline-core-heading size="md" weight="semibold"><h6>This is a standard Heading 6.</h6></outline-core-heading>
 `;
 };
 
@@ -133,3 +133,25 @@ SlottedHeadingsWithNoAttributes.parameters = {
     },
   },
 };
+
+const ShadowDomHeadingsWithAttributesTemplate = (): TemplateResult => {
+  return html`
+<outline-core-heading level="h1" size="xxxl" weight="bold">This is a standard Heading 1.</outline-core-heading>
+<outline-core-heading level="h2" size="xxl" weight="semibold">This is a standard Heading 2.</outline-core-heading>
+<outline-core-heading level="h3" size="xl" weight="semibold">This is a standard Heading 3.</outline-core-heading>
+<outline-core-heading level="h4" size="lg" weight="semibold">This is a standard Heading 4.</outline-core-heading>
+<outline-core-heading level="h5" size="md" weight="semibold">This is a standard Heading 5.</outline-core-heading>
+<outline-core-heading level="h6" size="md" weight="semibold">This is a standard Heading 6.</outline-core-heading>
+`;
+};
+
+export const ShadowDomHeadingsWithAttributes = () =>
+ShadowDomHeadingsWithAttributesTemplate();
+ShadowDomHeadingsWithAttributes.parameters = {
+  docs: {
+    description: {
+      story: `This example shows how to use ShadowDOM if you must. Not recommended.
+      `,
+    },
+  },
+};
diff --git a/packages/outline-core-heading/src/config.ts b/packages/outline-core-heading/src/config.ts
index d443d9ac2..3ff68cc9c 100644
--- a/packages/outline-core-heading/src/config.ts
+++ b/packages/outline-core-heading/src/config.ts
@@ -1,23 +1,17 @@
 export const HeadingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', undefined];
-export type AllowedHeadingLevels = typeof HeadingLevels[number];
+export type AllowedHeadingLevels = (typeof HeadingLevels)[number];
 
 // Updated to limit the allowed values to the set we want to be selectable in Storybook.
 export const HeadingSizes = [
   'xs',
   'sm',
-  'base',
+  'md',
   'lg',
   'xl',
-  '2xl',
-  '3xl',
-  '4xl',
-  '5xl',
-  '6xl',
-  '7xl',
-  '8xl',
-  '9xl',
+  'xxl',
+  'xxxl',
 ] as const;
-export type AllowedHeadingSizes = typeof HeadingSizes[number];
+export type AllowedHeadingSizes = (typeof HeadingSizes)[number];
 
 export const HeadingWeights = [
   'thin',
@@ -30,4 +24,4 @@ export const HeadingWeights = [
   'extrabold',
   'black',
 ] as const;
-export type AllowedHeadingWeights = typeof HeadingWeights[number];
+export type AllowedHeadingWeights = (typeof HeadingWeights)[number];
diff --git a/packages/outline-core-heading/src/outline-core-heading.css b/packages/outline-core-heading/src/outline-core-heading.css
index 186de38c3..7e52c9e15 100644
--- a/packages/outline-core-heading/src/outline-core-heading.css
+++ b/packages/outline-core-heading/src/outline-core-heading.css
@@ -1,12 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  all: unset;
-}
-
 .clickable-card {
   /* Required to allow the functionallity of full card being clickable  */
   h1,
@@ -28,120 +19,72 @@ h6 {
   }
 }
 
-.outline-text--base {
+.md {
   @apply text-base;
 }
 
-.outline-text--xs {
+.xs {
   @apply text-xs;
 }
 
-.outline-text--sm {
+.sm {
   @apply text-sm;
 }
 
-.outline-text--lg {
+.lg {
   @apply text-lg;
 }
 
-.outline-text--lg.mobile {
+.lg.mobile {
   @apply text-base;
 }
 
-.outline-text--xl {
+.xl {
   @apply text-xl;
 }
 
-.outline-text--xl.mobile {
+.xl.mobile {
   @apply text-base;
 }
 
-.outline-text--2xl {
+.xxl {
   @apply text-2xl;
 }
 
-.outline-text--2xl.mobile {
+.xxl.mobile {
   @apply text-lg;
 }
 
-.outline-text--3xl {
+.xxxl {
   @apply text-3xl;
 }
 
-.outline-text--3xl.mobile {
+.xxxl.mobile {
   @apply text-lg;
 }
 
-.outline-text--4xl {
-  @apply text-4xl;
-}
-
-.outline-text--4xl.mobile {
-  @apply text-xl;
-}
-
-.outline-text--5xl {
-  @apply text-5xl;
-}
-
-.outline-text--5xl.mobile {
-  @apply text-2xl;
-}
-
-.outline-text--6xl {
-  @apply text-6xl;
-}
-
-.outline-text--6xl.mobile {
-  @apply text-3xl;
-}
-
-.outline-text--7xl {
-  @apply text-7xl;
-}
-
-.outline-text--7xl.mobile {
-  @apply text-4xl;
-}
-
-.outline-text--8xl {
-  @apply text-8xl;
-}
-
-.outline-text--8xl.mobile {
-  @apply text-5xl;
-}
-
-.outline-text--9xl {
-  @apply text-9xl;
-}
-
-.outline-text--9xl.mobile {
-  @apply text-6xl;
-}
-
 /* Font weights */
-.outline-font--thin {
+.thin {
   @apply font-thin;
 }
-.outline-font--extralight {
+.extralight {
   @apply font-extralight;
 }
-.outline-font--light {
+.light {
   @apply font-light;
 }
-.outline-font--normal {
+.normal {
   @apply font-normal;
 }
-.outline-font--semibold {
+.semibold {
   @apply font-semibold;
 }
-.outline-font--bold {
+.bold {
   @apply font-bold;
 }
-.outline-font--extrabold {
+.extrabold {
   @apply font-extrabold;
 }
-.outline-font--black {
+.black {
   @apply font-black;
 }
diff --git a/packages/outline-core-heading/src/outline-core-heading.lightdom.css b/packages/outline-core-heading/src/outline-core-heading.lightdom.css
new file mode 100644
index 000000000..7e52c9e15
--- /dev/null
+++ b/packages/outline-core-heading/src/outline-core-heading.lightdom.css
@@ -0,0 +1,90 @@
+.clickable-card {
+  /* Required to allow the functionallity of full card being clickable  */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    a {
+      &:hover {
+        text-decoration: none;
+      }
+      &:after {
+        position: absolute;
+        inset: 0;
+        content: '';
+      }
+    }
+  }
+}
+
+.md {
+  @apply text-base;
+}
+
+.xs {
+  @apply text-xs;
+}
+
+.sm {
+  @apply text-sm;
+}
+
+.lg {
+  @apply text-lg;
+}
+
+.lg.mobile {
+  @apply text-base;
+}
+
+.xl {
+  @apply text-xl;
+}
+
+.xl.mobile {
+  @apply text-base;
+}
+
+.xxl {
+  @apply text-2xl;
+}
+
+.xxl.mobile {
+  @apply text-lg;
+}
+
+.xxxl {
+  @apply text-3xl;
+}
+
+.xxxl.mobile {
+  @apply text-lg;
+}
+
+/* Font weights */
+.thin {
+  @apply font-thin;
+}
+.extralight {
+  @apply font-extralight;
+}
+.light {
+  @apply font-light;
+}
+.normal {
+  @apply font-normal;
+}
+.semibold {
+  @apply font-semibold;
+}
+.bold {
+  @apply font-bold;
+}
+.extrabold {
+  @apply font-extrabold;
+}
+.black {
+  @apply font-black;
+}
diff --git a/packages/outline-core-heading/src/outline-core-heading.ts b/packages/outline-core-heading/src/outline-core-heading.ts
index 4119d2aef..a3916c854 100644
--- a/packages/outline-core-heading/src/outline-core-heading.ts
+++ b/packages/outline-core-heading/src/outline-core-heading.ts
@@ -5,21 +5,51 @@
  */
 import { TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
+import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
+import globalStyles from './outline-core-heading.lightdom.css.lit';
 
 import { OutlineElement } from '@phase2/outline-core';
 
 import componentStyles from './outline-core-heading.css.lit';
-import {
-  AllowedHeadingLevels,
-  AllowedHeadingSizes,
-  AllowedHeadingWeights,
-} from './config';
+import { AllowedHeadingLevels } from './config';
+
+export const allowedHeadingSizes = [
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'xxl',
+  'xxxl',
+];
+export const allowedHeadingWeights = [
+  'thin',
+  'extralight',
+  'light',
+  'normal',
+  'medium',
+  'semibold',
+  'bold',
+  'extrabold',
+  'black',
+];
+
+// export type ButtonVariant = keyof typeof buttonVariantsTypes;
+export type HeadingSizes = keyof typeof allowedHeadingSizes;
+export type HeadingWeights = keyof typeof allowedHeadingWeights;
 
 @customElement('outline-core-heading')
 export class OutlineCoreHeading extends OutlineElement {
   static styles = [componentStyles];
+  AdoptedStyleSheets: AdoptedStyleSheets;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.AdoptedStyleSheets = new AdoptedStyleSheets(globalStyles);
+    this.addController(this.AdoptedStyleSheets);
+  }
 
   /**
    * The tag to apply: h1 | h2 | h3 | h4 | h5 | h6
@@ -29,17 +59,37 @@ export class OutlineCoreHeading extends OutlineElement {
 
   /**
    * The size of the heading.
-   * @type {AllowedHeadingSizes}
+   * @type {HeadingSizes}
    */
-  @property({ type: String, reflect: true, attribute: 'size' })
-  size: AllowedHeadingSizes;
+  @property({
+    type: String,
+    reflect: true,
+    attribute: 'size',
+    converter: size => {
+      if (size && !Object.values(allowedHeadingSizes).includes(size)) {
+        size = allowedHeadingSizes[0];
+      }
+      return size;
+    },
+  })
+  size: HeadingSizes;
 
   /**
    * The weight of the heading.
-   * @type {AllowedHeadingWeights}
+   * @type {HeadingWeights}
    */
-  @property({ type: String, reflect: true, attribute: 'weight' })
-  weight: AllowedHeadingWeights;
+  @property({
+    type: String,
+    reflect: true,
+    attribute: 'weight',
+    converter: weight => {
+      if (weight && !Object.values(allowedHeadingWeights).includes(weight)) {
+        weight = allowedHeadingWeights[0];
+      }
+      return weight;
+    },
+  })
+  weight: HeadingWeights;
 
   /**
    * Additional CSS classes to apply to the heading element.
@@ -61,19 +111,28 @@ export class OutlineCoreHeading extends OutlineElement {
   fullMarkupInSlot(classes: {
     [key: string]: boolean | string;
   }): TemplateResult {
-    return html`
-      
-      <slot class=${classMap(classes)}></slot>
-      
-    `;
+    return html` <slot class=${classMap(classes)}></slot> `;
   }
 
   render(): TemplateResult {
     const classes = {
-      [`outline-text--${this.size}`]: true,
-      [`outline-font--${this.weight}`]: true,
       [`${this.additionalClasses}`]: this.additionalClasses,
+      [`${String(this.size)}`]: this.size as string,
+      [`${String(this.weight)}`]: this.weight as string,
     };
+    const typedValues = allowedHeadingSizes.concat(allowedHeadingWeights);
+    const slottedHeading: HTMLElement | null =
+      this.querySelector(':is(h1, h2, h3, h4, h5, h6)') ?? null;
+    if (slottedHeading) {
+      // add classes from shadow DOM of component to light DOM of Slot
+      slottedHeading.classList.remove(...typedValues);
+      if (this.size) {
+        slottedHeading?.classList.add(this.size as string);
+      }
+      if (this.weight) {
+        slottedHeading?.classList.add(this.weight as string);
+      }
+    }
 
     if (this.level) {
       return this.generateHeading(classes);
diff --git a/packages/outline-templates/default/src/components/sample/outline-extended-button/index.ts b/packages/outline-templates/default/src/components/sample/outline-extended-button/index.ts
new file mode 100644
index 000000000..34a370776
--- /dev/null
+++ b/packages/outline-templates/default/src/components/sample/outline-extended-button/index.ts
@@ -0,0 +1 @@
+export { OutlineExtendedButton } from './outline-extended-button';
diff --git a/packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.css b/packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.css
new file mode 100644
index 000000000..74fd37e69
--- /dev/null
+++ b/packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.css
@@ -0,0 +1,3 @@
+.shiny {
+  border: 10px solid red;
+}
diff --git a/packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.ts b/packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.ts
new file mode 100644
index 000000000..707e0bf8b
--- /dev/null
+++ b/packages/outline-templates/default/src/components/sample/outline-extended-button/outline-extended-button.ts
@@ -0,0 +1,14 @@
+import { OutlineCoreButton } from '@phase2/outline-core-button';
+import { customElement } from 'lit/decorators.js';
+import '@phase2/outline-core-button';
+// Import @phase2 version breaking Storybook
+// import { buttonVariantsTypes } from "@phase2/outline-core-button/src/outline-core-button";
+import { buttonVariantsTypes } from '../outline-core-button/src/outline-core-button';
+
+buttonVariantsTypes.push('shiny');
+
+// Rewriting does not work
+// const buttonVariantsTypes = ['shiny', 'dull', 'matte'];
+
+@customElement('outline-extended-button')
+export class OutlineExtendedButton extends OutlineCoreButton {}
diff --git a/packages/outline-templates/default/src/components/sample/outline-extended-button/package.json b/packages/outline-templates/default/src/components/sample/outline-extended-button/package.json
new file mode 100644
index 000000000..4e96ca292
--- /dev/null
+++ b/packages/outline-templates/default/src/components/sample/outline-extended-button/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@phase2/outline-extended-button",
+  "version": "0.0.1",
+  "description": "The Outline Components for the web button component",
+  "keywords": [
+    "outline components",
+    "outline design",
+    "button"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-button"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.1.10",
+    "@phase2/outline-link": "^0.1.4",
+    "lit": "^2.3.1",
+    "tslib": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}
diff --git a/packages/outline-templates/default/src/components/sample/outline-extended-button/tsconfig.build.json b/packages/outline-templates/default/src/components/sample/outline-extended-button/tsconfig.build.json
new file mode 100644
index 000000000..5eac9d313
--- /dev/null
+++ b/packages/outline-templates/default/src/components/sample/outline-extended-button/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../../outline-core/tsconfig.build.json" }]
+}