contain-css-svelte 0.0.1

package/dist/typography/TextLayout.svelte

@@ -0,0 +1,46 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    max-width: var(--line-width);
+    line-height: var(--line-height);
+    font-family: var(--body-font-family);
+    margin: auto;
+    font-size: var(--text-size);
+  }
+  div :global(h1),
+  div :global(h2),
+  div :global(h3),
+  div :global(h4),
+  div :global(h5),
+  div :global(h6) {
+    font-family: var(--heading-font-family);
+    margin: var(--heading-margin);
+    color: var(--heading-fg);
+    background-color: var(--heading-bg);
+    padding: var(--heading-pad);
+  }
+  div :global(h1:first-child),
+  div :global(h2:first-child),
+  div :global(h3:first-child),
+  div :global(h4:first-child),
+  div :global(h5:first-child),
+  div :global(h6:first-child),
+  div :global(p:first-of-type),
+  div :global(h1 + p),
+  div :global(h2 + p),
+  div :global(h3 + p),
+  div :global(h4 + p),
+  div :global(h5 + p),
+  div :global(h6 + p) {
+    margin: var(--first-heading-margin);
+  }
+
+  div :global(code) {
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+    text-wrap: nowrap;
+  }
+</style>

package/dist/typography/TextLayout.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TextLayoutProps */
+/** @typedef {typeof __propDef.events}  TextLayoutEvents */
+/** @typedef {typeof __propDef.slots}  TextLayoutSlots */
+export default class TextLayout extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TextLayoutProps = typeof __propDef.props;
+export type TextLayoutEvents = typeof __propDef.events;
+export type TextLayoutSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/util.d.ts

@@ -0,0 +1,3 @@
+export declare function injectVars(props: {
+    [key: string]: string;
+}, prefix: string, varList: string[]): string;

package/dist/util.js

@@ -0,0 +1,13 @@
+export function injectVars(props, prefix, varList) {
+    let cssVars = "";
+    varList.forEach((v) => {
+        if (props[v]) {
+            const cssVarName = toKebabCase(v);
+            cssVars += `--${prefix}-${cssVarName}: ${props[v]};`;
+        }
+    });
+    return cssVars;
+}
+function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}

package/dist/vars/affordances.css

@@ -0,0 +1,26 @@
+:root {
+  --hover-filter: brightness(1.2)
+    drop-shadow(var(--space) var(--space) var(--shadow-color));
+  --active-filter: brightness(0.9);
+  /* --hover-transform: translate(var(--space), var(--space)); */
+  /* --button-hover-filter: var(--hover-filter); */
+  --menu-hover-filter: var(--hover-filter);
+  --menu-hover-transform: var(--hover-transform);
+  /* --button-hover-transform: var(var(--button-hover-transform));
+  --button-hover-filter: var(var(--button-hover-filter)); */
+  --transition: 300ms;
+  --menu-transition: var(--transition);
+  --button-transition: var(--transition);
+  --sidebar-transition: var(--transition);
+  --checkbox-hover-filter: var(--hover-filter);
+  --checkbox-hover-transform: rotateY(-5deg);
+  --checkbox-active-filter: var(--active-filter);
+  --checkbox-active-transform: rotateY(5deg);
+  --checkbox-transition: 400ms;
+  --checked-weight: var(--bold);
+  --grab-bar-hover-bg: #fff2;
+  --grab-bar-active-bg: #fff4;
+  --grab-bar-hover-filter: drop-shadow(0 0 2px #fff);
+  --grab-bar-active-filter: drop-shdaow(0 0 4px #fff);
+  --greyed-out-filter: blur(2px) grayscale(0.5);
+}

package/dist/vars/colors.css

@@ -0,0 +1,345 @@
+:root {
+  --white: #fff;
+  --black: #222;
+  --primary-bg: var(--material-color-light-blue-400);
+  --primary-fg: var(--white);
+  --secondary-bg: var(--material-color-amber-100);
+  --secondary-fg: var(--material-color-grey-800);
+  --inactive-bg: var(--material-color-grey-400);
+  --inactive-fg: var(--material-color-grey-900);
+  --bg: #1a1a1a;
+  --fg: #fffcfe;
+  --stripe-fg: #eaeaea;
+  --stripe-bg: #3a3a3a;
+  --shadow-color: #eeeeee0f;
+  --border-color: #e9e9e9;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+}
+
+/* Color definitions */
+
+:root {
+  --material-color-red: #f44336;
+  --material-color-red-50: #ffebee;
+  --material-color-red-100: #ffcdd2;
+  --material-color-red-200: #ef9a9a;
+  --material-color-red-300: #e57373;
+  --material-color-red-400: #ef5350;
+  --material-color-red-500: var(--material-color-red);
+  --material-color-red-600: #e53935;
+  --material-color-red-700: #d32f2f;
+  --material-color-red-800: #c62828;
+  --material-color-red-900: #b71c1c;
+  --material-color-red-a100: #ff8a80;
+  --material-color-red-a200: #ff5252;
+  --material-color-red-a400: #ff1744;
+  --material-color-red-a700: #d50000;
+
+  --material-color-pink: #e91e63;
+  --material-color-pink-50: #fce4ec;
+  --material-color-pink-100: #f8bbd0;
+  --material-color-pink-200: #f48fb1;
+  --material-color-pink-300: #f06292;
+  --material-color-pink-400: #ec407a;
+  --material-color-pink-500: var(--material-color-pink);
+  --material-color-pink-600: #d81b60;
+  --material-color-pink-700: #c2185b;
+  --material-color-pink-800: #ad1457;
+  --material-color-pink-900: #880e4f;
+  --material-color-pink-a100: #ff80ab;
+  --material-color-pink-a200: #ff4081;
+  --material-color-pink-a400: #f50057;
+  --material-color-pink-a700: #c51162;
+
+  --material-color-purple: #9c27b0;
+  --material-color-purple-50: #f3e5f5;
+  --material-color-purple-100: #e1bee7;
+  --material-color-purple-200: #ce93d8;
+  --material-color-purple-300: #ba68c8;
+  --material-color-purple-400: #ab47bc;
+  --material-color-purple-500: var(--material-color-purple);
+  --material-color-purple-600: #8e24aa;
+  --material-color-purple-700: #7b1fa2;
+  --material-color-purple-800: #6a1b9a;
+  --material-color-purple-900: #4a148c;
+  --material-color-purple-a100: #ea80fc;
+  --material-color-purple-a200: #e040fb;
+  --material-color-purple-a400: #d500f9;
+  --material-color-purple-a700: #a0f;
+
+  --material-color-deep-purple: #673ab7;
+  --material-color-deep-purple-50: #ede7f6;
+  --material-color-deep-purple-100: #d1c4e9;
+  --material-color-deep-purple-200: #b39ddb;
+  --material-color-deep-purple-300: #9575cd;
+  --material-color-deep-purple-400: #7e57c2;
+  --material-color-deep-purple-500: var(--material-color-deep-purple);
+  --material-color-deep-purple-600: #5e35b1;
+  --material-color-deep-purple-700: #512da8;
+  --material-color-deep-purple-800: #4527a0;
+  --material-color-deep-purple-900: #311b92;
+  --material-color-deep-purple-a100: #b388ff;
+  --material-color-deep-purple-a200: #7c4dff;
+  --material-color-deep-purple-a400: #651fff;
+  --material-color-deep-purple-a700: #6200ea;
+
+  --material-color-indigo: #3f51b5;
+  --material-color-indigo-50: #e8eaf6;
+  --material-color-indigo-100: #c5cae9;
+  --material-color-indigo-200: #9fa8da;
+  --material-color-indigo-300: #7986cb;
+  --material-color-indigo-400: #5c6bc0;
+  --material-color-indigo-500: var(--material-color-indigo);
+  --material-color-indigo-600: #3949ab;
+  --material-color-indigo-700: #303f9f;
+  --material-color-indigo-800: #283593;
+  --material-color-indigo-900: #1a237e;
+  --material-color-indigo-a100: #8c9eff;
+  --material-color-indigo-a200: #536dfe;
+  --material-color-indigo-a400: #3d5afe;
+  --material-color-indigo-a700: #304ffe;
+
+  --material-color-blue: #2196f3;
+  --material-color-blue-50: #e3f2fd;
+  --material-color-blue-100: #bbdefb;
+  --material-color-blue-200: #90caf9;
+  --material-color-blue-300: #64b5f6;
+  --material-color-blue-400: #42a5f5;
+  --material-color-blue-500: var(--material-color-blue);
+  --material-color-blue-600: #1e88e5;
+  --material-color-blue-700: #1976d2;
+  --material-color-blue-800: #1565c0;
+  --material-color-blue-900: #0d47a1;
+  --material-color-blue-a100: #82b1ff;
+  --material-color-blue-a200: #448aff;
+  --material-color-blue-a400: #2979ff;
+  --material-color-blue-a700: #2962ff;
+
+  --material-color-light-blue: #03a9f4;
+  --material-color-light-blue-50: #e1f5fe;
+  --material-color-light-blue-100: #b3e5fc;
+  --material-color-light-blue-200: #81d4fa;
+  --material-color-light-blue-300: #4fc3f7;
+  --material-color-light-blue-400: #29b6f6;
+  --material-color-light-blue-500: var(--material-color-light-blue);
+  --material-color-light-blue-600: #039be5;
+  --material-color-light-blue-700: #0288d1;
+  --material-color-light-blue-800: #0277bd;
+  --material-color-light-blue-900: #01579b;
+  --material-color-light-blue-a100: #80d8ff;
+  --material-color-light-blue-a200: #40c4ff;
+  --material-color-light-blue-a400: #00b0ff;
+  --material-color-light-blue-a700: #0091ea;
+
+  --material-color-cyan: #00bcd4;
+  --material-color-cyan-50: #e0f7fa;
+  --material-color-cyan-100: #b2ebf2;
+  --material-color-cyan-200: #80deea;
+  --material-color-cyan-300: #4dd0e1;
+  --material-color-cyan-400: #26c6da;
+  --material-color-cyan-500: var(--material-color-cyan);
+  --material-color-cyan-600: #00acc1;
+  --material-color-cyan-700: #0097a7;
+  --material-color-cyan-800: #00838f;
+  --material-color-cyan-900: #006064;
+  --material-color-cyan-a100: #84ffff;
+  --material-color-cyan-a200: #18ffff;
+  --material-color-cyan-a400: #00e5ff;
+  --material-color-cyan-a700: #00b8d4;
+
+  --material-color-teal: #009688;
+  --material-color-teal-50: #e0f2f1;
+  --material-color-teal-100: #b2dfdb;
+  --material-color-teal-200: #80cbc4;
+  --material-color-teal-300: #4db6ac;
+  --material-color-teal-400: #26a69a;
+  --material-color-teal-500: var(--material-color-teal);
+  --material-color-teal-600: #00897b;
+  --material-color-teal-700: #00796b;
+  --material-color-teal-800: #00695c;
+  --material-color-teal-900: #004d40;
+  --material-color-teal-a100: #a7ffeb;
+  --material-color-teal-a200: #64ffda;
+  --material-color-teal-a400: #1de9b6;
+  --material-color-teal-a700: #00bfa5;
+
+  --material-color-green: #4caf50;
+  --material-color-green-50: #e8f5e9;
+  --material-color-green-100: #c8e6c9;
+  --material-color-green-200: #a5d6a7;
+  --material-color-green-300: #81c784;
+  --material-color-green-400: #66bb6a;
+  --material-color-green-500: var(--material-color-green);
+  --material-color-green-600: #43a047;
+  --material-color-green-700: #388e3c;
+  --material-color-green-800: #2e7d32;
+  --material-color-green-900: #1b5e20;
+  --material-color-green-a100: #b9f6ca;
+  --material-color-green-a200: #69f0ae;
+  --material-color-green-a400: #00e676;
+  --material-color-green-a700: #00c853;
+
+  --material-color-light-green: #8bc34a;
+  --material-color-light-green-50: #f1f8e9;
+  --material-color-light-green-100: #dcedc8;
+  --material-color-light-green-200: #c5e1a5;
+  --material-color-light-green-300: #aed581;
+  --material-color-light-green-400: #9ccc65;
+  --material-color-light-green-500: var(--material-color-light-green);
+  --material-color-light-green-600: #7cb342;
+  --material-color-light-green-700: #689f38;
+  --material-color-light-green-800: #558b2f;
+  --material-color-light-green-900: #33691e;
+  --material-color-light-green-a100: #ccff90;
+  --material-color-light-green-a200: #b2ff59;
+  --material-color-light-green-a400: #76ff03;
+  --material-color-light-green-a700: #64dd17;
+
+  --material-color-lime: #cddc39;
+  --material-color-lime-50: #f9fbe7;
+  --material-color-lime-100: #f0f4c3;
+  --material-color-lime-200: #e6ee9c;
+  --material-color-lime-300: #dce775;
+  --material-color-lime-400: #d4e157;
+  --material-color-lime-500: var(--material-color-lime);
+  --material-color-lime-600: #c0ca33;
+  --material-color-lime-700: #afb42b;
+  --material-color-lime-800: #9e9d24;
+  --material-color-lime-900: #827717;
+  --material-color-lime-a100: #f4ff81;
+  --material-color-lime-a200: #eeff41;
+  --material-color-lime-a400: #c6ff00;
+  --material-color-lime-a700: #aeea00;
+
+  --material-color-yellow: #ffeb3b;
+  --material-color-yellow-50: #fffde7;
+  --material-color-yellow-100: #fff9c4;
+  --material-color-yellow-200: #fff59d;
+  --material-color-yellow-300: #fff176;
+  --material-color-yellow-400: #ffee58;
+  --material-color-yellow-500: var(--material-color-yellow);
+  --material-color-yellow-600: #fdd835;
+  --material-color-yellow-700: #fbc02d;
+  --material-color-yellow-800: #f9a825;
+  --material-color-yellow-900: #f57f17;
+  --material-color-yellow-a100: #ffff8d;
+  --material-color-yellow-a200: #ff0;
+  --material-color-yellow-a400: #ffea00;
+  --material-color-yellow-a700: #ffd600;
+
+  --material-color-amber: #ffc107;
+  --material-color-amber-50: #fff8e1;
+  --material-color-amber-100: #ffecb3;
+  --material-color-amber-200: #ffe082;
+  --material-color-amber-300: #ffd54f;
+  --material-color-amber-400: #ffca28;
+  --material-color-amber-500: var(--material-color-amber);
+  --material-color-amber-600: #ffb300;
+  --material-color-amber-700: #ffa000;
+  --material-color-amber-800: #ff8f00;
+  --material-color-amber-900: #ff6f00;
+  --material-color-amber-a100: #ffe57f;
+  --material-color-amber-a200: #ffd740;
+  --material-color-amber-a400: #ffc400;
+  --material-color-amber-a700: #ffab00;
+
+  --material-color-orange: #ff9800;
+  --material-color-orange-50: #fff3e0;
+  --material-color-orange-100: #ffe0b2;
+  --material-color-orange-200: #ffcc80;
+  --material-color-orange-300: #ffb74d;
+  --material-color-orange-400: #ffa726;
+  --material-color-orange-500: var(--material-color-orange);
+  --material-color-orange-600: #fb8c00;
+  --material-color-orange-700: #f57c00;
+  --material-color-orange-800: #ef6c00;
+  --material-color-orange-900: #e65100;
+  --material-color-orange-a100: #ffd180;
+  --material-color-orange-a200: #ffab40;
+  --material-color-orange-a400: #ff9100;
+  --material-color-orange-a700: #ff6d00;
+
+  --material-color-deep-orange: #ff5722;
+  --material-color-deep-orange-50: #fbe9e7;
+  --material-color-deep-orange-100: #ffccbc;
+  --material-color-deep-orange-200: #ffab91;
+  --material-color-deep-orange-300: #ff8a65;
+  --material-color-deep-orange-400: #ff7043;
+  --material-color-deep-orange-500: var(--material-color-deep-orange);
+  --material-color-deep-orange-600: #f4511e;
+  --material-color-deep-orange-700: #e64a19;
+  --material-color-deep-orange-800: #d84315;
+  --material-color-deep-orange-900: #bf360c;
+  --material-color-deep-orange-a100: #ff9e80;
+  --material-color-deep-orange-a200: #ff6e40;
+  --material-color-deep-orange-a400: #ff3d00;
+  --material-color-deep-orange-a700: #dd2c00;
+
+  --material-color-brown: #795548;
+  --material-color-brown-50: #efebe9;
+  --material-color-brown-100: #d7ccc8;
+  --material-color-brown-200: #bcaaa4;
+  --material-color-brown-300: #a1887f;
+  --material-color-brown-400: #8d6e63;
+  --material-color-brown-500: var(--material-color-brown);
+  --material-color-brown-600: #6d4c41;
+  --material-color-brown-700: #5d4037;
+  --material-color-brown-800: #4e342e;
+  --material-color-brown-900: #3e2723;
+
+  --material-color-grey: #9e9e9e;
+  --material-color-grey-50: #fafafa;
+  --material-color-grey-100: #f5f5f5;
+  --material-color-grey-200: #eee;
+  --material-color-grey-300: #e0e0e0;
+  --material-color-grey-400: #bdbdbd;
+  --material-color-grey-500: var(--material-color-grey);
+  --material-color-grey-600: #757575;
+  --material-color-grey-700: #616161;
+  --material-color-grey-800: #424242;
+  --material-color-grey-900: #212121;
+
+  --material-color-blue-grey: #607d8b;
+  --material-color-blue-grey-50: #eceff1;
+  --material-color-blue-grey-100: #cfd8dc;
+  --material-color-blue-grey-200: #b0bec5;
+  --material-color-blue-grey-300: #90a4ae;
+  --material-color-blue-grey-400: #78909c;
+  --material-color-blue-grey-500: var(--material-color-blue-grey);
+  --material-color-blue-grey-600: #546e7a;
+  --material-color-blue-grey-700: #455a64;
+  --material-color-blue-grey-800: #37474f;
+  --material-color-blue-grey-900: #263238;
+}
+
+:root {
+  --material-color-red-light: var(--material-color-red-100);
+  --material-color-pink-light: var(--material-color-pink-100);
+  --material-color-purple-light: var(--material-color-purple-100);
+  --material-color-deep-purple-light: var(--material-color-deep-purple-100);
+  --material-color-indigo-light: var(--material-color-indigo-100);
+  --material-color-cyan-light: var(--material-color-cyan-100);
+  --material-color-blue-light: var(--material-color-blue-100);
+  --material-color-teal-light: var(--material-color-teal-100);
+  --material-color-light-blue-light: var(--material-color-light-blue-100);
+  --material-color-light-green-light: var(--material-color-green-100);
+  --material-color-green-light: var(--material-color-green-100);
+  --material-color-lime-light: var(--material-color-lime-100);
+  --material-color-yellow-light: var(--material-color-yellow-100);
+  --material-color-amber-light: var(--material-color-amber-100);
+  --material-color-orange-light: var(--material-color-orange-100);
+  --material-color-deep-orange-light: var(--material-color-deep-orange-100);
+  --material-color-brown-light: var(--material-color-brown-100);
+  --material-color-grey-light: var(--material-color-grey-100);
+  --material-color-blue-grey-light: var(--material-color-blue-grey-100);
+}
+
+:root {
+  /* shorthands... */
+  --red: var(--material-color-red);
+  --deep-orange: var(var(--material-color-deep-orange));
+}

package/dist/vars/defaults.css

@@ -0,0 +1,14 @@
+@import url("./typography.css");
+@import url("./colors.css");
+@import url("./affordances.css");
+@import url("./layout.css");
+
+:root {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+}
+body {
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  scroll-behavior: smooth;
+}

package/dist/vars/layout.css

@@ -0,0 +1,39 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  /* Basic spacing */
+  --space: 2px;
+  --space-md: calc(var(--space) * 2);
+  --space-lg: calc(var(--space-md) * 2);
+  --space-xl: calc(var(--space-xl) * 2);
+  --padding: calc(var(--space) * 4);
+  --gap: calc(var(--padding) * 2);  
+  --column-gap: var(--gap);
+  --row-gap: var(--gap);
+  --grab-bar-width: var(--padding);
+  --border-radius: 8px;
+  --border-style: solid;
+  --border-width: 1px;
+  /* Simple icon sizes and such */
+  --icon-size: 32px;
+  /* Cards */
+  --card-width: 420px;
+  --card-width-small: 250px;
+  --card-width-large: 600px;
+  --card-height: 300px;
+  --card-height-small: 150px;
+  --card-height-large: 450px;
+  --min-card-height: 200px;
+  /* header and footer heights in em so they scale with 
+   typography changes that happen in media queries */
+  --card-header-height: 2em;
+  --card-footer-height: 1.5em;
+  --card-footer-border: 1px solid #1113;
+}
+
+:root {
+  --sidebar-width: 256px;
+}

package/dist/vars/themes/lightordark.css

@@ -0,0 +1,39 @@
+/* light mode */
+@media (prefers-color-scheme: light) {
+  :root {
+    --fg: var(--material-color-grey-800);
+    --bg: var(--material-color-grey-300);
+    --container-bg: var(--material-color-grey-100);
+    --container-fg: var(--material-color-grey-800);
+    --sidebar-bg: var(--material-color-grey-100);
+    --sidebar-fg: var(--material-color-grey-900);
+    --menu-bg: var(--material-color-grey-100);
+    --menu-fg: var(--material-color-grey-900);
+    --primary-bg: var(--material-color-blue-500);
+    --primary-fg: var(--material-color-grey-100);
+    --secondary-bg: var(--material-color-grey-400);
+    --secondary-fg: var(--material-color-grey-900);
+    --stripe-bg: var(--material-color-grey-900);
+    --stripe-fg: var(--material-color-grey-100);
+    --control-bg: var(--material-color-grey-300);
+    --control-fg: var(--material-color-grey-900);
+    --border-color: var(--material-color-grey-400);
+    --input-bg: #fefefe;
+    --input-fg: var(--material-color-grey-900);
+    --hover-filter: brightness(0.9) contrast(1.5);
+  }
+}
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fg: var(--material-color-grey-900);
+    --bg: var(--material-color-grey-100);
+    --container-bg: var(--material-color-grey-900);
+    --container-fg: var(--material-color-grey-100);
+    --primary-bg: var(--material-color-light-blue-500);
+    --primary-fg: var(--material-color-grey-100);
+    --secondary-bg: var(--material-color-grey-300);
+    --secondary-fg: var(--material-color-grey-900);
+    --hover-filter: brightness(1.1) contrast(1.5);
+  }
+}

package/dist/vars/themes/purple.css

@@ -0,0 +1,18 @@
+:root {
+  --fg: var(--material-color-grey-900);
+  --bg: var(--material-color-purple-100);
+  --container-bg: #ffefff;
+  --menu-item-bg: #ffefff;
+  --hero-bg: var(--material-color-purple-500);
+  --hero-fg: var(--material-color-grey-100);
+  --primary-bg: var(--material-color-purple-500);
+  --primary-fg: var(--material-color-grey-100);
+  --bar-bg: var(--material-color-purple-800);
+  --bar-fg: #ffefff;
+  --secondary-bg: var(--material-color-purple-200);
+  --secondary-fg: var(--material-color-purple-800);
+  --shadow-color: #7773;
+  --border-color: var(--material-color-purple-200);
+  --tab-bar-bg: #ffefff;
+  --tab-bar-fg: var(--material-color-grey-900);
+}

package/dist/vars/themes/typography-airy.css

@@ -0,0 +1,13 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&Inconsolata:wght@300&display=swap");
+
+:root {
+  --font-family: "Nunito", sans-serif;
+  --line-height: 1.8;
+  --heading-line-height: 1;
+  --bold: 400;
+  --line-width: 30em;
+  --normal: 200;
+  --ui-font-weight: 400;
+  --code-font-size: 1em;
+  --code-font-family: Inconsolata, monospace;
+}

package/dist/vars/themes/typography-browser.css

@@ -0,0 +1,20 @@
+:root {
+  --font-size: 16px;
+  --font-size-small: 12px;
+  --heading-size: 1.5rem;
+  --text-size: 1.2rem;
+  --font-family: sans-serif;
+  --heading-font-family: var(--font-family);
+  --body-font-family: serif;
+  --ui-font-family: var(--font-family);
+  --code-font-family: monospace;
+  --code-font-size: 0.9em;
+  /* Basic typography... */
+  --line-height: 1.4;
+  --line-width: 30rem;
+  --bold: bold;
+  --heading-margin: 0.5em 0;
+  --first-heading-margin: 0;
+  --heading-bg: transparent;
+  --heading-fg: var(--primary-bg);
+}

package/dist/vars/themes/typography-carbon.css

@@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:wght@300&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap");
+
+:root {
+  --font-family: "IBM Plex Sans", sans-serif;
+  --aa-heading-font-family: "IBM Plex Serif", serif;
+  --body-font-family: "IBM Plex Sans", sans-serif;
+  --ui-font-family: "IBM Plex Sans", sans-serif;
+  --code-font-family: "IBM Plex Mono", monospace;
+  --code-font-size: 0.9em;
+  --font-size: 16px;
+  /* Basic typography... */
+  --line-height: 1.6;
+  --heading-line-height: 1.1;
+  --line-width: 30rem;
+  --bold: 500;
+  --heading-margin: 0.5em 0;
+  --first-heading-margin: 0;
+  --heading-bg: transparent;
+  --heading-fg: var(--primary-bg);
+}

package/dist/vars/typography.css

@@ -0,0 +1,16 @@
+:root {
+  --font-size: 16px;
+  --font-size-small: 12px;
+  --heading-size: 1.5rem;
+  --text-size: 1.2rem;
+  --font-family: sans-serif;
+  --code-font-size: 0.9em;
+  /* Basic typography... */
+  --line-height: 1.4;
+  --line-width: 30rem;
+  --bold: bold;
+  --heading-margin: 0.5em 0;
+  --first-heading-margin: 0;
+  --heading-bg: transparent;
+  --heading-fg: var(--primary-bg);
+}