Updated AppBar. Added Content component. Added display prop to Link. …

…Added experimental typography styling update (wip). (#19)

* Updated AppBar. Added Content component. Added display prop to Link. Added experimental typography styling update (wip).

* Recreate package-lock

* Added missing postcss dependency

* Updated CHANGELOG

.storybook/preview.css

@@ -31,15 +31,15 @@ div:has(> .docblock-code-toggle) {
   box-shadow: none;
 }
 
-slate-app-nav-content {
+/* slate-app-nav-content {
   padding-block: var(--spacing-sm);
   padding-inline: var(--spacing-sm);
   flex-direction: row;
   align-items: center;
   position: relative;
   border-inline-end: none;
   translate: 0 0;
-}
+} */
 
 slate-app-nav-content a {
   text-decoration: none;
@@ -52,6 +52,45 @@ slate-app-nav-content a {
   background-color: hsl(var(--color-neutral-700));
 }
 
+.em-box {
+  display: inline-block;
+  block-size: 1em;
+  inline-size: var(--spacing-3xs);
+  background-color: red;
+}
+
+.lh-box {
+  display: inline-block;
+  block-size: 1lh;
+  inline-size: var(--spacing-3xs);
+  background-color: red;
+}
+
+.cap-box {
+  display: inline-block;
+  block-size: 1cap;
+  inline-size: var(--spacing-3xs);
+  background-color: red;
+}
+
+.ex-box {
+  display: inline-block;
+  block-size: 1ex;
+  inline-size: var(--spacing-3xs);
+  background-color: red;
+}
+
+.desc-box {
+  display: inline-block;
+  block-size: 100%;
+  inline-size: var(--spacing-3xs);
+  background-color: red;
+}
+
+slate-text {
+  background-color: hsl(var(--color-background-secondary));
+}
+
 @media (prefers-color-scheme: light) {
   .story-box {
     background-color: hsl(var(--color-neutral-200));

.storybook/preview.js

@@ -24,9 +24,9 @@ const defaultStyles = {
 const preview = {
   decorators: [
     (story, { parameters }) => {
-      const { styles = defaultStyles } = parameters
+      const { styles = {} } = parameters
       console.log({ styles })
-      const style = Object.entries(styles)
+      const style = Object.entries({ ...defaultStyles, ...styles })
         .map(
           ([key, value]) => console.log({ key, value }) || `${key}: ${value}`,
         )

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## v2.1.0 (July 20, 2024)
+
+- Updated `<slate-app-bar>`
+- Added `<slate-content>` component
+- Added `display` prop to `<slate-link>`
+- Added experimental typography styling update (wip)
+
 ## v2.0.1 (January 8, 2024)
 
 - Fixed Storybook build