@phila/phila-ui-core 2.0.1 → 2.1.0

package/README.md

@@ -17,6 +17,58 @@ pnpm add @phila/phila-ui-core
 
 ## Usage
 
+### 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 "@fortawesome/fontawesome-pro/css/fontawesome.min.css";
+import "@fortawesome/fontawesome-pro/css/solid.min.css";
+```
+
+If using nuxt, add the following to your `nuxt.config.ts`:
+
+```typescript
+import { defineNuxtConfig } from "nuxt";
+
+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>
+```
+
 ### Design Tokens
 
 ```typescript

package/dist/styles/button.css

@@ -30,6 +30,7 @@
   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);
@@ -40,7 +41,7 @@
     padding: var(--spacing-s) var(--spacing-l);
     gap: var(--spacing-s);
   }
-  &.is-extra-small {
+  &.is-extra-small:not(.icon-button) {
     color: var(--Schemes-Primary-Container);
     height: var(--spacing-xxl);
     padding: var(--spacing-xxs);
@@ -57,10 +58,11 @@
     box-sizing: border-box;
     border-left: none;
     border-right: none;
-    &:focus,
+    &:focus:not(:disabled),
     &:hover:not(:disabled) {
-      --Schemes-On-Primary-Container: var(--Schemes-Inverse-Surface);
-      border-bottom-color: var(--Schemes-Inverse-Surface);
+      --Schemes-On-Primary-Container: --Schemes-Inverse-Surface;
+      color: var(--Schemes-Inverse-Surface) !important;
+      border-bottom-color: var(--Schemes-Inverse-Surface) !important;
     }
     &:active:not(:disabled) {
       color: var(--Schemes-Secondary-Container) !important;
@@ -71,27 +73,25 @@
       color: var(--Schemes-Surface-Container-High);
     }
     &.phila-button--destructive:not(:active) {
-      color: var(--Schemes-Error-Container) !important;
-    }
-    &.span-icon {
+      color: var(--Schemes-Error-Container);
     }
   }
   /* ---  States --- */
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
-    &:not(:active):not(.phila-button--secondary) {
+  &:hover:not(:disabled):not(.is-extra-small),
+  &:focus:not(:disabled):not(.is-extra-small),
+  &.icon-button:hover:not(:disabled),
+  &.icon-button:focus:not(:disabled) {
+    &:not(:active):not(.phila-button--secondary):not(.icon-button--standard) {
+      background: var(--Schemes-Inverse-Surface) !important;
       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);
+    background: var(--Schemes-Surface-Container-High) !important;
     cursor: not-allowed;
   }
 
@@ -101,18 +101,19 @@
   }
 
   &.phila-button--secondary:not(:disabled) {
-    color: var(--Schemes-Primary, #003282);
+    color: var(--Schemes-Primary);
     background: var(--Schemes-Surface-Container-Lowest);
-    &:not(:active):not(.is-extra-small) {
+    &:not(:active) {
       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 {
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
       color: var(--Schemes-On-Primary-Container);
+      background: var(--Schemes-Inverse-Surface);
     }
   }
 
@@ -162,11 +163,40 @@
         font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
       }
     }
+    &.is-extra-small {
+      width: 1.5rem;
+      height: 1.5rem;
+      padding: var(--scale-xsmall);
+      gap: var(--scale-small);
+      span.icon {
+        font-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
+      }
+    }
     &.icon-button--standard:not(:disabled) {
       color: var(--Schemes-Primary, #003282);
       background: var(--Schemes-Surface-Container-Lowest);
     }
+    &.phila-button--destructive:not(:disabled) {
+      color: var(--Schemes-On-Error-Container) !important;
+      background: var(--Schemes-Error-Container);
+    }
+    &:active:not(:disabled) {
+      color: var(--Schemes-On-Secondary-Container) !important;
+      background: var(--Schemes-Secondary-Container) !important;
+      box-sizing: border-box;
+      border: none;
+    }
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
+      &.phila-button--secondary,
+      &.icon-button--standard {
+        color: var(--Schemes-Primary);
+        background: var(--Schemes-Surface-Container);
+        border-color: transparent;
+      }
+    }
   }
+
   span.icon {
     height: auto;
     width: auto;

package/dist/styles/light-mode.css

@@ -4,13 +4,16 @@ 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;
 
@@ -40,6 +43,7 @@ body {
   --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;
+  --Icon-Solid-XXSmall-font-icon-solid-xxs-size: 0.75rem;
 
   --scale-xxsmall: 0.125rem;
   --scale-xsmall: 0.25rem;

package/dist/styles/utilities.css

@@ -41,29 +41,3 @@
   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);
-}

package/dist/styles/variables.css

@@ -62,6 +62,13 @@ 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-xsmall: 0.25rem;
+  --scale-small: 0.5rem;
+  --scale-medium: 0.75rem;
+  --scale-large: 1rem;
+  --scale-xlarge: 1.125rem;
+  --scale-xxlarge: 1.5rem;
   /* Primitives/Mode 1 > border widths */
   --border-width-xl: 1.125rem;
   --border-width-l: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-core",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Core utilities and styles for Phila UI library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -57,6 +57,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",