@phila/phila-ui-core 2.0.1 → 2.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @phila/phila-ui-core
 
-Core utilities and styles for the Phila UI library. This package provides shared TypeScript utilities and design tokens for testing purposes.
+Core utilities and styles for the Phila UI library. This package provides shared TypeScript utilities and design tokens used in the Phila UI components.
 
 ## Features
 
@@ -13,46 +13,113 @@ Core utilities and styles for the Phila UI library. This package provides shared
 
 ```bash
 pnpm add @phila/phila-ui-core
+# or
+npm install @phila/phila-ui-core
 ```
 
 ## Usage
 
-### Design Tokens
+### Icons
+
+The Phila UI design system uses [FontAwesome Pro](https://fontawesome.com/) for icons. Some components are bundled with static icons (FontAwesome Pro, version 7.0.1). To use additional icons throughout your application, you need to install FontAwesome and set the required NPM tokens in your environment.
+
+```bash
+pnpm install @fortawesome/fontawesome-pro
+```
+
+In a Vue project, you can import the CSS in your main entry file:
 
 ```typescript
-import { colors, spacing, typography, borderRadius } from "@phila/phila-ui-core";
-
-// Use design tokens in your styles
-const buttonStyles = {
-  backgroundColor: colors.primary[500],
-  padding: spacing[4],
-  fontSize: typography.fontSizes.base,
-  borderRadius: borderRadius.md,
-};
+import "@fortawesome/fontawesome-pro/css/fontawesome.min.css";
+import "@fortawesome/fontawesome-pro/css/solid.min.css";
 ```
 
-### Class Name Utilities
+If using nuxt, add the following to your `nuxt.config.ts`:
 
 ```typescript
-import { cn } from "@phila/phila-ui-core";
+import { defineNuxtConfig } from "nuxt";
 
-// Combine class names efficiently
-const buttonClass = cn("base-button", "active", className);
+export default defineNuxtConfig({
+  css: ["@fortawesome/fontawesome-pro/css/fontawesome.min.css", "@fortawesome/fontawesome-pro/css/solid.min.css"],
+});
+```
+
+In your project folder, create a `.npmrc` file with the following content:
+
+```
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${NPM_FONTAWESOME_SECRET}
+```
+
+### Building components with icons
+
+When building a component that uses a specific icon, you need to import the icon from the FontAwesome svg package and set it as a prop to the FontAwesome vue component.
+
+```bash
+pnpm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/pro-regular-svg-icons @fortawesome/vue-fontawesome
+```
+
+```vue
+<script lang="ts" setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faUser } from "@fortawesome/pro-solid-svg-icons";
+</script>
+<template>
+  ...
+  <FontAwesomeIcon :icon="faUser" />
+  ...
+</template>
 ```
 
-### Type Definitions
+Additionally, you will need to configure vite.config.ts to treat the FontAwesome packages as external dependencies:
+
+In packages/your-component/vite.config.ts:
 
 ```typescript
-import type { Size, Color, Variant, StyledProps } from "@phila/phila-ui-core";
+export default defineConfig({
+  ...
+  build: {
+    ...
+    rollupOptions: {
+      external: ["other dependencies...", "@fortawesome/vue-fontawesome"],
+      ...
+    },
+   ...
+  },
+});
+```
 
-interface ButtonProps extends StyledProps {
-  children: React.ReactNode;
-  onClick?: () => void;
+And add vue-fontawesome as a peer dependency in your component's package.json:
+
+```json
+"peerDependencies": {
+  ...
+  "@fortawesome/vue-fontawesome": "^3.1.2",
+  ...
 }
 ```
 
+### Phila UI Core Styles (Light mode):
+
+In your main.ts file, import the core styles:
+
+```typescript
+import "@phila/phila-ui-core/styles/template-light.css";
+```
+
+### Class Name Utilities
+
+```typescript
+import { cn } from "@phila/phila-ui-core";
+
+// Combine class names efficiently
+const buttonClass = cn("base-button", "active", className);
+```
+
 ## Design Tokens
 
+The package includes essential design tokens for consistent styling across components. These tokens are defined in CSS variables and can be used directly in your styles.
+
 ### Colors
 
 - **Primary**: Blue shades for main actions

package/dist/components.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components.css');const e=require("./index-DkaNsoLU.js"),y={key:0,class:"input-errors"},k=e.defineComponent({__name:"ErrorList",props:{errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},required:{type:Boolean}},setup(o){const{errors:a,isValid:r}=e.useValidation(),n=o,t=e.computed(()=>Object.assign([],a.value,n.errors||[]));return(l,c)=>!e.unref(r)&&t.value?.length?(e.openBlock(),e.createElementBlock("div",y,[e.createBaseVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(u,i)=>(e.openBlock(),e.createElementBlock("li",{key:i},e.toDisplayString(u),1))),128))])])):e.createCommentVNode("",!0)}}),d=(o,a)=>{const r=o.__vccOpts||o;for(const[n,t]of a)r[n]=t;return r},p=d(k,[["__scopeId","data-v-caba8dd2"]]),O=["for"],I={key:0,class:"required"},b=e.defineComponent({__name:"InputLabel",props:{id:{},required:{type:Boolean}},setup(o){return(a,r)=>(e.openBlock(),e.createElementBlock("label",{class:"input-label",for:a.id},[e.renderSlot(a.$slots,"default",{},void 0),a.required?(e.openBlock(),e.createElementBlock("span",I,"*")):e.createCommentVNode("",!0)],8,O))}}),v=d(b,[["__scopeId","data-v-00c91174"]]),h=e.defineComponent({inheritAttrs:!1,__name:"InputWrap",props:{id:{},name:{},placeholder:{},label:{},icon:{},required:{type:Boolean},errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},className:{}},emits:["update:modelValue","input","change","focus","blur","keydown","keyup","keypress","error"],setup(o,{emit:a}){const{setInputValue:r}=e.useInput(),n=e.ref(""),t=o,l=a,{init:c,isValid:u,validation:i}=e.useValidation({validateOnMount:t.validateOnMount??!0,validateOnInput:t.validateOnInput??!0,validateOnBlur:t.validateOnBlur??!0,validateOnChange:t.validateOnChange??!0,required:t.required??!1,errors:t.errors||[],validate:t.validate},l),m=e.computed(()=>({invalid:!u.value})),B=s=>(n.value=s.target.value,l("update:modelValue",n.value),l("input",n.value),r(n.value),t.validateOnInput&&i(),n.value),_=()=>{t.validateOnBlur&&i(),l("blur")},f=()=>{l("focus")};return e.onBeforeMount(()=>{c()}),e.onMounted(()=>{t.validateOnMount&&i()}),(s,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap",{hasError:!e.unref(u)}])},[t.label?(e.openBlock(),e.createBlock(v,{key:0,id:t.id,required:t.required},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),_:1},8,["id","required"])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default",e.normalizeProps(e.guardReactiveProps({inputValue:n.value,onBlur:_,onFocus:f,onInput:B,isValid:e.unref(u),inputClasses:m.value})),void 0),e.createVNode(p)],2))}}),V=d(h,[["__scopeId","data-v-751bf20e"]]);exports.ErrorList=p;exports.InputLabel=v;exports.InputWrap=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components.css');const e=require("./index-DkaNsoLU.cjs"),y={key:0,class:"input-errors"},k=e.defineComponent({__name:"ErrorList",props:{errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},required:{type:Boolean}},setup(o){const{errors:a,isValid:r}=e.useValidation(),n=o,t=e.computed(()=>Object.assign([],a.value,n.errors||[]));return(l,c)=>!e.unref(r)&&t.value?.length?(e.openBlock(),e.createElementBlock("div",y,[e.createBaseVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(u,i)=>(e.openBlock(),e.createElementBlock("li",{key:i},e.toDisplayString(u),1))),128))])])):e.createCommentVNode("",!0)}}),d=(o,a)=>{const r=o.__vccOpts||o;for(const[n,t]of a)r[n]=t;return r},p=d(k,[["__scopeId","data-v-caba8dd2"]]),O=["for"],I={key:0,class:"required"},b=e.defineComponent({__name:"InputLabel",props:{id:{},required:{type:Boolean}},setup(o){return(a,r)=>(e.openBlock(),e.createElementBlock("label",{class:"input-label",for:a.id},[e.renderSlot(a.$slots,"default",{},void 0),a.required?(e.openBlock(),e.createElementBlock("span",I,"*")):e.createCommentVNode("",!0)],8,O))}}),v=d(b,[["__scopeId","data-v-00c91174"]]),h=e.defineComponent({inheritAttrs:!1,__name:"InputWrap",props:{id:{},name:{},placeholder:{},label:{},icon:{},required:{type:Boolean},errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},className:{}},emits:["update:modelValue","input","change","focus","blur","keydown","keyup","keypress","error"],setup(o,{emit:a}){const{setInputValue:r}=e.useInput(),n=e.ref(""),t=o,l=a,{init:c,isValid:u,validation:i}=e.useValidation({validateOnMount:t.validateOnMount??!0,validateOnInput:t.validateOnInput??!0,validateOnBlur:t.validateOnBlur??!0,validateOnChange:t.validateOnChange??!0,required:t.required??!1,errors:t.errors||[],validate:t.validate},l),m=e.computed(()=>({invalid:!u.value})),B=s=>(n.value=s.target.value,l("update:modelValue",n.value),l("input",n.value),r(n.value),t.validateOnInput&&i(),n.value),_=()=>{t.validateOnBlur&&i(),l("blur")},f=()=>{l("focus")};return e.onBeforeMount(()=>{c()}),e.onMounted(()=>{t.validateOnMount&&i()}),(s,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap",{hasError:!e.unref(u)}])},[t.label?(e.openBlock(),e.createBlock(v,{key:0,id:t.id,required:t.required},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),_:1},8,["id","required"])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"default",e.normalizeProps(e.guardReactiveProps({inputValue:n.value,onBlur:_,onFocus:f,onInput:B,isValid:e.unref(u),inputClasses:m.value})),void 0),e.createVNode(p)],2))}}),V=d(h,[["__scopeId","data-v-751bf20e"]]);exports.ErrorList=p;exports.InputLabel=v;exports.InputWrap=V;

package/dist/components.mjs

@@ -1,4 +1,4 @@
-import { d as c, u as m, c as y, a as l, b as v, e as p, o, f as V, F as k, r as q, t as B, g as O, h as C, i as M, j as E, k as F, l as L, m as N, n as $, p as w, q as x, w as j, s as z } from "./index-dajx1Lu4.mjs";
+import { d as c, u as m, c as y, a as l, b as v, e as p, o, f as V, F as k, r as q, t as B, g as O, h as C, i as M, j as E, k as F, l as L, m as N, n as $, p as w, q as x, w as j, s as z } from "./index-dajx1Lu4.js";
 import './components.css';const P = {
   key: 0,
   class: "input-errors"

package/dist/composables.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DkaNsoLU.js");exports.useInput=e.useInput;exports.useValidation=e.useValidation;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DkaNsoLU.cjs");exports.useInput=e.useInput;exports.useValidation=e.useValidation;

package/dist/composables.mjs

@@ -1,4 +1,4 @@
-import { h as u, u as e } from "./index-dajx1Lu4.mjs";
+import { h as u, u as e } from "./index-dajx1Lu4.js";
 export {
   u as useInput,
   e as useValidation

package/dist/styles/light-mode.css

@@ -4,63 +4,103 @@ body {
   --Schemes-Primary: #003282;
   --Schemes-On-Primary-Container: #fff;
   --Schemes-Secondary-Container: #0086ab;
+  --Schemes-On-Secondary-Container: #fff;
   --Schemes-Inverse-Surface: #303030;
   --Schemes-Surface-Container-High: #c6c6c6;
   --Schemes-Surface-Container-Highest: #ababab;
   --Schemes-Error-Container: #ff5c5c;
   --Schemes-Error-Container-2: #d14922;
+  --Schemes-On-Error-Container: #fff;
   --Schemes-Surface-Container-Lowest: #fff;
   --Schemes-Surface-Container-Low: #f1f1f1;
+  --Schemes-Surface-Container: #e2e2e2;
   --Schemes-Outline: #5e5e5e;
   --Schemes-On-Surface: #000;
 
-  --Label-font-label-family: "Montserrat", sans-serif;
+  /* label */
+  --Label-ExtraSmall-font-label-xs-family: "Montserrat", sans-serif;
+  --Label-ExtraSmall-font-label-xs-size: 0.75rem;
+  --Label-ExtraSmall-font-label-xs-lineheight: 1rem;
+
+  --Label-Default-font-label-default-family: "Montserrat", sans-serif;
   --Label-Default-font-label-default-size: 1rem;
-  --Label-Default-font-label-default-lineheight: 1rem;
+  --Label-Default-font-label-default-lineheight: 1.5rem;
+
+  --Label-Large-font-label-large-family: "Montserrat", sans-serif;
+  --Label-Large-font-label-large-size: 1.125rem;
+  --Label-Large-font-label-large-lineheight: 1.75rem;
+
   --Label-Small-font-label-small-size: 0.875rem;
   --Label-Small-font-label-small-lineheight: 1.25rem;
-
-  --Body-Default-font-body-default-family: "Montserrat";
+  /* Body */
+  --Body-Default-font-body-default-family: "Montserrat", sans-serif;
   --Body-Default-font-body-default-size: 1rem;
   --Body-Default-font-body-default-lineheight: 1.5rem;
 
-  --Body-Small-font-body-small-family: "Montserrat";
+  --Body-Small-font-body-small-family: "Montserrat", sans-serif;
   --Body-Small-font-body-small-size: 0.875rem;
   --Body-Small-font-body-small-lineheight: 1.25rem;
 
-  --Body-Large-font-body-large-family: "Montserrat";
+  --Body-Large-font-body-large-family: "Montserrat", sans-serif;
   --Body-Large-font-body-large-size: 1.125rem;
   --Body-Large-font-body-large-lineheight: 1.75rem;
 
-  --Body-ExtraLarge-font-body-xlarge-family: "Montserrat";
+  --Body-ExtraLarge-font-body-xlarge-family: "Montserrat", sans-serif;
   --Body-ExtraLarge-font-body-xlarge-size: 1.5rem;
   --Body-ExtraLarge-font-body-xlarge-lineheight: 2.25rem;
+  /* Headings */
+  --Heading-H1-font-heading-1-family: "Montserrat", sans-serif;
+  --Heading-H1-font-heading-1-size: 3rem;
+  --Heading-H1-font-header-1-lineheight: 4rem;
+
+  --Heading-H2-font-heading-2-family: "Montserrat", sans-serif;
+  --Heading-H2-font-heading-2-size: 2.25rem;
+  --Heading-H2-font-heading-2-lineheight: 3rem;
+
+  --Heading-H3-font-heading-3-family: "Montserrat", sans-serif;
+  --Heading-H3-font-heading-3-size: 2rem;
+  --Heading-H3-font-heading-3-lineheight: 2.5rem;
+
+  --Heading-H4-font-heading-4-family: "Montserrat", sans-serif;
+  --Heading-H4-font-heading-4-size: 1.5rem;
+  --Heading-H4-font-heading-4-lineheight: 2.25rem;
+
+  --Heading-H5-font-heading-5-family: "Montserrat", sans-serif;
+  --Heading-H5-font-heading-5-size: 1.25rem;
+  --Heading-H5-font-heading-5-lineheight: 1.75rem;
+
+  --Heading-H6-font-heading-6-family: "Montserrat", sans-serif;
+  --Heading-H6-font-heading-6-size: 1rem;
+  --Heading-H6-font-heading-6-lineheight: 1.5rem;
+  /* Subtitles */
+  --Subtitle-font-subtitle-family: "Montserrat", sans-serif;
+  --Subtitle-Subtitle-1-font-subtitle-1-size: 1.5rem;
+  --Subtitle-Subtitle-1-font-subtitle-1-lineheight: 2.25rem;
+
+  --Subtitle-Subtitle-2-font-subtitle-2-size: 1.25rem;
+  --Subtitle-Subtitle-2-font-subtitle-2-lineheight: 1.75rem;
+  /* Display */
+  --Display-font-display-family: Montserrat, sans-serif;
+  --Display-Display-1-font-display-1-size: 4.5rem;
+  --Display-Display-1-font-display-1-lineheight: 5.5rem;
+
+  --Display-Display-2-font-display-2-size: 3.5rem;
+  --Display-Display-2-font-display-2-lineheight: 4.5rem;
+
+  /* Quotes */
+  --Quote-font-quote-family: "Times New Roman", serif;
+  --Quote-font-quote-size: 1.5rem;
+  --Quote-font-quote-lineheight: 2.25rem;
 
+  /* Icons */
   --Icon-Solid-Small-font-icon-solid-small-size: 1rem;
   --Icon-Solid-Default-font-icon-solid-default-size: 1.5rem;
   --Icon-Solid-Large-font-icon-solid-large-size: 2.25rem;
   --Icon-Solid-ExtraLarge-font-icon-solid-xl-size: 3rem;
-
-  --scale-xxsmall: 0.125rem;
-  --scale-xsmall: 0.25rem;
-  --scale-small: 0.5rem;
-  --scale-large: 1rem;
-  --scale-6xlarge: 3.5rem;
+  --Icon-Solid-XXSmall-font-icon-solid-xxs-size: 0.75rem;
 
   --Static-Body-Large-Font: "Roboto", sans-serif;
   --Static-Body-Large-Size: 1rem;
   --Static-Body-Large-Line-Height: 1.5rem;
   --Static-Body-Large-Tracking: 0.03125rem;
-  --Display-font-display-family: "Montserrat";
-  --Display-Display-1-font-display-1-size: 4.5rem;
-  --Display-Display-1-font-display-1-lineheight: 5.5rem;
-  --scale-xxsmall: 0.125rem;
-  --scale-xsmall: 0.25rem;
-  --scale-small: 0.5rem;
-  --scale-large: 1rem;
-  --scale-6xlarge: 3.5rem;
-
-  --Display-Display-2-font-display-2-size: 3.5rem;
-  --Display-Display-2-font-display-2-lineheight: 4.5rem;
-  --Display-Display-3-font-display-3-size: 2.5rem;
 }

package/dist/styles/main.css

@@ -1,4 +1,4 @@
-*:focus {
-  outline-offset: var(--spacing-xs);
-  outline: var(--stroke-stroke-thin, 2px) solid var(--Schemes-Primary-Container);
+body {
+  font-size: 100%;
+  text-rendering: optimizeLegibility;
 }

package/dist/styles/template-light.css

@@ -2,5 +2,5 @@
 @import "./light-mode.css";
 @import "./typography.css";
 @import "./main.css";
-@import "./utilities.css";
-@import "./button.css";
+@import "./utilities/index.css";
+@import "./elements/index.css";

package/dist/styles/typography.css

@@ -1,24 +1,22 @@
-@font-face {
-  font-family: "Montserrat";
-  src:
-    local("Montserrat Regular"),
-    local("Montserrat-Regular"),
-    url("https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff2") format("woff2"),
-    url("https://www.phila.gov/assets/fonts/Montserrat/Montserrat-Regular.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,699;1,400;1,600&display=swap");
 
-.default-font,
-.content {
-  font-family: var(--Body-Default-font-body-default-family);
-  font-size: var(--Body-Default-font-body-default-size);
-  font-style: normal;
-}
 /** 
 TODO: figma not clear on margins between headings / paragraphs, or how these elements interact with each other 
 **/
 .content {
+  /* Reset, based on https://www.joshwcomeau.com/css/custom-css-reset */
+  line-height: 1.5rem;
+  -webkit-font-smoothing: antialiased;
+  color: var(--Schemes-On-Surface);
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  * {
+    margin: 0;
+  }
+
   p,
   h1,
   h2,
@@ -26,8 +24,123 @@ TODO: figma not clear on margins between headings / paragraphs, or how these ele
   h4,
   h5,
   h6 {
-    color: var(--Schemes-On-Surface);
+    overflow-wrap: break-word;
+    font-style: normal;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  /* Body text */
+
+  p {
+    font-family: var(--Body-Default-font-body-default-family);
+    font-weight: 400;
+    line-height: var(--Body-Default-font-body-default-lineheight);
+    &:not([class^="has-text-"]):not([class*=" has-text-"]),
+    &.has-text-body-small {
+      margin: 0 0 var(--spacing-l) 0;
+    }
+    &.has-text-body-large {
+      margin: 0 0 var(--spacing-xl) 0;
+    }
+    &.has-text-body-extra-large {
+      margin: 0 0 var(--spacing-xxl) 0;
+    }
+  }
+
+  /* Headings */
+  h1 {
+    font-family: var(--Heading-H1-font-heading-1-family);
+    font-size: var(--Heading-H1-font-heading-1-size);
     font-weight: 600;
-    margin: 0;
+    line-height: var(--Heading-H1-font-header-1-lineheight);
+    margin: var(--spacing-xxl) 0;
+  }
+
+  h2 {
+    font-family: var(--Heading-H2-font-heading-2-family);
+    font-size: var(--Heading-H2-font-heading-2-size);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--Heading-H2-font-heading-2-lineheight);
+    margin: var(--spacing-l) 0 var(--spacing-xxl) 0;
+  }
+  h3 {
+    font-family: var(--Heading-H3-font-heading-3-family);
+    font-size: var(--Heading-H3-font-heading-3-size);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--Heading-H3-font-heading-3-lineheight);
+    margin: var(--spacing-l) 0 var(--spacing-xxl) 0;
+  }
+  h4 {
+    font-family: var(--Heading-H4-font-heading-4-family);
+    font-size: var(--Heading-H4-font-heading-4-size);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--Heading-H4-font-heading-4-lineheight);
+    margin: var(--spacing-l) 0;
+  }
+  h5 {
+    font-family: var(--Heading-H5-font-heading-5-family);
+    font-size: var(--Heading-H5-font-heading-5-size);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--Heading-H5-font-heading-5-lineheight);
+    margin: var(--spacing-l) 0;
+  }
+  h6 {
+    font-family: var(--Heading-H6-font-heading-6-family);
+    font-size: var(--Heading-H6-font-heading-6-size);
+    font-style: normal;
+    font-weight: 600;
+    line-height: var(--Heading-H6-font-heading-6-lineheight);
+    margin: var(--spacing-l) 0;
+  }
+
+  /* Quotes */
+
+  blockquote {
+    font-family: var(--Quote-font-quote-family);
+    font-size: var(--Quote-font-quote-size);
+    font-style: italic;
+    font-weight: 700;
+    line-height: var(--Quote-font-quote-lineheight);
+    margin: 0 0 var(--spacing-l) 0;
+  }
+
+  /* lists */
+
+  ul,
+  ol {
+    margin: var(--spacing-l) 0 0 0;
+    padding: 0 0 0 var(--spacing-3xl);
+    li {
+      margin: 0 0 var(--spacing-l) 0;
+      padding: 0 0 0 var(--spacing-s);
+    }
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-l);
+    }
+  }
+
+  /* Others */
+  b,
+  strong {
+    font-weight: 600;
+  }
+  em,
+  cite {
+    font-style: italic;
   }
 }

package/dist/styles/variables.css

@@ -50,8 +50,8 @@ TODO: we will need to update tokens.json to a more complete and updated version
   /* Colors/Mode 1 > Status */
   --status-green-light: #05ff47;
   /* Primitives/Mode 1 > spacing */
-  --spacing-xs: 0.25rem;
   --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
   --spacing-s: 0.5rem;
   --spacing-m: 0.75rem;
   --spacing-l: 1rem;
@@ -62,6 +62,16 @@ TODO: we will need to update tokens.json to a more complete and updated version
   --spacing-5xl: 3rem;
   --spacing-6xl: 3.5rem;
   --spacing-7xl: 4rem;
+  /* scale, these are new from figma, assumptions made on medium -> large */
+  --scale-xxsmall: 0.125rem;
+  --scale-xsmall: 0.25rem;
+  --scale-small: 0.5rem;
+  --scale-medium: 0.75rem;
+  --scale-large: 1rem;
+  --scale-xlarge: 1.125rem;
+  --scale-xxlarge: 1.5rem;
+  --scale-3xlarge: 2rem;
+  --scale-6xlarge: 3.5rem;
   /* Primitives/Mode 1 > border widths */
   --border-width-xl: 1.125rem;
   --border-width-l: 1rem;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@phila/phila-ui-core",
-  "version": "2.0.1",
+  "version": "2.1.1",
+  "type": "module",
   "description": "Core utilities and styles for Phila UI library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -57,6 +58,8 @@
   "scripts": {
     "build": "vite build && npm run copy-css",
     "copy-css": "mkdir dist/styles && cp src/styles/*.css dist/styles/",
+    "build-win": "vite build && npm run copy-css-win",
+    "copy-css-win": "mkdir dist\\styles && copy src\\styles\\*.css dist\\styles\\",
     "dev": "vite build --watch",
     "lint": "eslint src/**/*.{ts,vue}",
     "lint:fix": "eslint src/**/*.{ts,vue} --fix",

package/dist/styles/button.css

@@ -1,203 +0,0 @@
-.phila-button {
-  /* --- Base styles --- */
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  cursor: pointer;
-  overflow: hidden;
-  white-space: nowrap;
-
-  /* --- Text styles --- */
-  color: var(--Schemes-On-Primary-Container);
-  font-family: var(--Label-font-label-family, Montserrat);
-  font-size: var(--Label-Default-font-label-default-size, 1rem);
-  font-style: normal;
-  font-weight: 600;
-  line-height: var(--Label-Default-font-label-default-lineheight);
-
-  /* --- Reset button --- */
-  border: none;
-  /* Corrects font smoothing for webkit */
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  /* Corrects inability to style clickable `input` types in iOS */
-  appearance: none;
-  -webkit-appearance: none;
-
-  /* ---  Sizing --- */
-  height: var(--spacing-6xl, 3.25rem);
-  max-width: 18.75rem;
-  padding: var(--spacing-l, 0.5rem) var(--spacing-3xl);
-  gap: var(--spacing-s);
-  &.is-medium {
-    height: var(--spacing-5xl, 3rem);
-    padding: var(--spacing-m, 0.75rem) var(--spacing-xxl);
-    gap: var(--spacing-s);
-  }
-  &.is-small {
-    height: var(--spacing-3xl);
-    padding: var(--spacing-s) var(--spacing-l);
-    gap: var(--spacing-s);
-  }
-  &.is-extra-small {
-    color: var(--Schemes-Primary-Container);
-    height: var(--spacing-xxl);
-    padding: var(--spacing-xxs);
-    gap: var(--spacing-xxs);
-    background-color: var(--Schemes-Surface-Container-Lowest) !important;
-    font-family: var(--Label-font-label-family, Montserrat);
-    font-size: var(--Label-Small-font-label-small-size);
-    font-style: normal;
-    font-weight: 600;
-    line-height: var(--Label-Small-font-label-small-lineheight);
-    border-color: var(--Schemes-Surface-Container-Lowest);
-    border-width: var(--spacing-xxs);
-    border-style: solid;
-    box-sizing: border-box;
-    border-left: none;
-    border-right: none;
-    &:focus,
-    &:hover:not(:disabled) {
-      --Schemes-On-Primary-Container: var(--Schemes-Inverse-Surface);
-      border-bottom-color: var(--Schemes-Inverse-Surface);
-    }
-    &:active:not(:disabled) {
-      color: var(--Schemes-Secondary-Container) !important;
-      box-sizing: border-box;
-      border: none;
-    }
-    &:disabled {
-      color: var(--Schemes-Surface-Container-High);
-    }
-    &.phila-button--destructive:not(:active) {
-      color: var(--Schemes-Error-Container) !important;
-    }
-    &.span-icon {
-    }
-  }
-  /* ---  States --- */
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
-    &:not(:active):not(.phila-button--secondary) {
-      color: var(--Schemes-On-Primary-Container) !important;
-    }
-    &:not(.is-extra-small) {
-      background-color: var(--Schemes-Inverse-Surface) !important;
-    }
-  }
-  &:active:not(:disabled):not(.is-extra-small) {
-    color: var(--Schemes-On-Primary-Container) !important;
-    background: var(--Schemes-Secondary-Container) !important;
-  }
-  &:disabled {
-    background: var(--Schemes-Surface-Container-High);
-    cursor: not-allowed;
-  }
-
-  /* ---  Variants --- */
-  &.phila-button--primary:not(:disabled) {
-    background: var(--Schemes-Primary-Container);
-  }
-
-  &.phila-button--secondary:not(:disabled) {
-    color: var(--Schemes-Primary, #003282);
-    background: var(--Schemes-Surface-Container-Lowest);
-    &:not(:active):not(.is-extra-small) {
-      border: var(--spacing-xxs) solid var(--Schemes-Primary);
-    }
-    &:active:not(:disabled):not(.is-extra-small) {
-      border-right: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
-      border-left: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
-    }
-    &:hover,
-    &:focus {
-      color: var(--Schemes-On-Primary-Container);
-    }
-  }
-
-  &.phila-button--destructive:not(:disabled) {
-    &:not(.is-extra-small) {
-      background: var(--Schemes-Error-Container);
-    }
-  }
-
-  /* ---  Icons --- */
-  /* TODO: break out to separate class for use outside of buttons */
-  &.icon-button {
-    padding: var(--spacing-xl);
-    height: 5rem;
-    width: 5rem;
-    span.icon {
-      font-size: var(--Icon-Solid-ExtraLarge-font-icon-solid-xl-size);
-      font-style: normal;
-      font-weight: 900;
-      line-height: normal;
-    }
-
-    &.is-large {
-      height: 3.75rem;
-      width: 3.75rem;
-      padding: var(--spacing-m);
-      gap: var(--spacing-s);
-      span.icon {
-        font-size: var(--Icon-Solid-Large-font-icon-solid-large-size);
-      }
-    }
-    &.is-medium {
-      height: 3rem;
-      width: 3rem;
-      padding: var(--spacing-m);
-      gap: var(--spacing-s);
-      span.icon {
-        font-size: var(--Icon-Solid-Default-font-icon-solid-default-size);
-      }
-    }
-    &.is-small {
-      height: 2rem;
-      width: 2rem;
-      padding: var(--spacing-s);
-      gap: var(--spacing-s);
-      span.icon {
-        font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
-      }
-    }
-    &.icon-button--standard:not(:disabled) {
-      color: var(--Schemes-Primary, #003282);
-      background: var(--Schemes-Surface-Container-Lowest);
-    }
-  }
-  span.icon {
-    height: auto;
-    width: auto;
-    font-style: normal;
-    font-weight: 900;
-    line-height: normal;
-    font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
-  }
-
-  span.icon:first-child:not(:last-child) {
-    margin-left: 0;
-    margin-right: var(--spacing-s);
-    + span {
-      padding-right: var(--spacing-s);
-    }
-  }
-  span.icon:last-child:not(:first-child) {
-    margin: 0;
-    padding: 0;
-  }
-  span:not([class="icon"]:only-child) {
-    padding: 0 !important;
-  }
-  span:first-child:not([class="icon"]) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    padding-left: var(--spacing-s);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    + span {
-      margin-left: var(--spacing-s) !important;
-    }
-  }
-}

package/dist/styles/utilities.css

@@ -1,69 +0,0 @@
-/* TODO: create rest of color utility classes */
-.has-background-ben-franklin-blue {
-  background-color: var(--dark-ben-franklin-blue);
-}
-
-.has-label-small-text {
-  /* Label/Small */
-  font-family: var(--Label-font-label-family);
-  font-size: var(--Label-Small-font-label-small-size);
-  font-style: normal;
-  font-weight: 600;
-  line-height: var(--Label-Small-font-label-small-lineheight);
-}
-
-.has-body-default-text {
-  /* Body/Default */
-  font-family: var(--Body-Default-font-body-default-family);
-  font-size: var(--Body-Default-font-body-default-size);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Body-Default-font-body-default-lineheight);
-}
-
-.has-body-small-text {
-  /* Body/Small */
-  font-family: var(--Body-Small-font-body-small-family);
-  font-size: var(--Body-Small-font-body-small-size);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Body-Small-font-body-small-lineheight);
-}
-.has-text-display-1 {
-  font-family: var(--Display-font-display-family);
-  font-size: var(--Display-Display-1-font-display-1-size);
-  font-weight: 600;
-  line-height: var(--Display-Display-1-font-display-1-lineheight);
-}
-.has-text-display-2 {
-  font-family: var(--Display-font-display-family, Montserrat);
-  font-size: var(--Display-Display-2-font-display-2-size);
-  font-weight: 600;
-  line-height: var(--Display-Display-2-font-display-2-lineheight);
-}
-.has-label-small-text {
-  /* Label/Small */
-  font-family: var(--Label-font-label-family);
-  font-size: var(--Label-Small-font-label-small-size);
-  font-style: normal;
-  font-weight: 600;
-  line-height: var(--Label-Small-font-label-small-lineheight);
-}
-
-.has-body-default-text {
-  /* Body/Default */
-  font-family: var(--Body-Default-font-body-default-family);
-  font-size: var(--Body-Default-font-body-default-size);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Body-Default-font-body-default-lineheight);
-}
-
-.has-body-small-text {
-  /* Body/Small */
-  font-family: var(--Body-Small-font-body-small-family);
-  font-size: var(--Body-Small-font-body-small-size);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Body-Small-font-body-small-lineheight);
-}