@phila/phila-ui-core 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +52 -0
  2. package/dist/styles/button.css +48 -18
  3. package/dist/styles/light-mode.css +25 -4
  4. package/dist/styles/utilities.css +27 -0
  5. package/dist/styles/variables.css +7 -0
  6. package/package.json +4 -2
package/README.md CHANGED
@@ -17,6 +17,58 @@ pnpm add @phila/phila-ui-core
17
17
 
18
18
  ## Usage
19
19
 
20
+ ### Icons
21
+
22
+ 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.
23
+
24
+ ```bash
25
+ pnpm install @fortawesome/fontawesome-pro
26
+ ```
27
+
28
+ In a Vue project, you can import the CSS in your main entry file:
29
+
30
+ ```typescript
31
+ import "@fortawesome/fontawesome-pro/css/fontawesome.min.css";
32
+ import "@fortawesome/fontawesome-pro/css/solid.min.css";
33
+ ```
34
+
35
+ If using nuxt, add the following to your `nuxt.config.ts`:
36
+
37
+ ```typescript
38
+ import { defineNuxtConfig } from "nuxt";
39
+
40
+ export default defineNuxtConfig({
41
+ css: ["@fortawesome/fontawesome-pro/css/fontawesome.min.css", "@fortawesome/fontawesome-pro/css/solid.min.css"],
42
+ });
43
+ ```
44
+
45
+ In your project folder, create a `.npmrc` file with the following content:
46
+
47
+ ```
48
+ @fortawesome:registry=https://npm.fontawesome.com/
49
+ //npm.fontawesome.com/:_authToken=${NPM_FONTAWESOME_SECRET}
50
+ ```
51
+
52
+ ### Building components with icons
53
+
54
+ 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.
55
+
56
+ ```bash
57
+ pnpm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/pro-regular-svg-icons @fortawesome/vue-fontawesome
58
+ ```
59
+
60
+ ```vue
61
+ <script lang="ts" setup>
62
+ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
63
+ import { faUser } from "@fortawesome/pro-solid-svg-icons";
64
+ </script>
65
+ <template>
66
+ ...
67
+ <FontAwesomeIcon :icon="faUser" />
68
+ ...
69
+ </template>
70
+ ```
71
+
20
72
  ### Design Tokens
21
73
 
22
74
  ```typescript
package/dist/styles/button.css CHANGED
@@ -30,6 +30,7 @@
30
30
  max-width: 18.75rem;
31
31
  padding: var(--spacing-l, 0.5rem) var(--spacing-3xl);
32
32
  gap: var(--spacing-s);
33
+
33
34
  &.is-medium {
34
35
  height: var(--spacing-5xl, 3rem);
35
36
  padding: var(--spacing-m, 0.75rem) var(--spacing-xxl);
@@ -40,7 +41,7 @@
40
41
  padding: var(--spacing-s) var(--spacing-l);
41
42
  gap: var(--spacing-s);
42
43
  }
43
- &.is-extra-small {
44
+ &.is-extra-small:not(.icon-button) {
44
45
  color: var(--Schemes-Primary-Container);
45
46
  height: var(--spacing-xxl);
46
47
  padding: var(--spacing-xxs);
@@ -57,10 +58,11 @@
57
58
  box-sizing: border-box;
58
59
  border-left: none;
59
60
  border-right: none;
60
- &:focus,
61
+ &:focus:not(:disabled),
61
62
  &:hover:not(:disabled) {
62
- --Schemes-On-Primary-Container: var(--Schemes-Inverse-Surface);
63
- border-bottom-color: var(--Schemes-Inverse-Surface);
63
+ --Schemes-On-Primary-Container: --Schemes-Inverse-Surface;
64
+ color: var(--Schemes-Inverse-Surface) !important;
65
+ border-bottom-color: var(--Schemes-Inverse-Surface) !important;
64
66
  }
65
67
  &:active:not(:disabled) {
66
68
  color: var(--Schemes-Secondary-Container) !important;
@@ -71,27 +73,25 @@
71
73
  color: var(--Schemes-Surface-Container-High);
72
74
  }
73
75
  &.phila-button--destructive:not(:active) {
74
- color: var(--Schemes-Error-Container) !important;
75
- }
76
- &.span-icon {
76
+ color: var(--Schemes-Error-Container);
77
77
  }
78
78
  }
79
79
  /* --- States --- */
80
- &:hover:not(:disabled),
81
- &:focus:not(:disabled) {
82
- &:not(:active):not(.phila-button--secondary) {
80
+ &:hover:not(:disabled):not(.is-extra-small),
81
+ &:focus:not(:disabled):not(.is-extra-small),
82
+ &.icon-button:hover:not(:disabled),
83
+ &.icon-button:focus:not(:disabled) {
84
+ &:not(:active):not(.phila-button--secondary):not(.icon-button--standard) {
85
+ background: var(--Schemes-Inverse-Surface) !important;
83
86
  color: var(--Schemes-On-Primary-Container) !important;
84
87
  }
85
- &:not(.is-extra-small) {
86
- background-color: var(--Schemes-Inverse-Surface) !important;
87
- }
88
88
  }
89
89
  &:active:not(:disabled):not(.is-extra-small) {
90
90
  color: var(--Schemes-On-Primary-Container) !important;
91
91
  background: var(--Schemes-Secondary-Container) !important;
92
92
  }
93
93
  &:disabled {
94
- background: var(--Schemes-Surface-Container-High);
94
+ background: var(--Schemes-Surface-Container-High) !important;
95
95
  cursor: not-allowed;
96
96
  }
97
97
 
@@ -101,18 +101,19 @@
101
101
  }
102
102
 
103
103
  &.phila-button--secondary:not(:disabled) {
104
- color: var(--Schemes-Primary, #003282);
104
+ color: var(--Schemes-Primary);
105
105
  background: var(--Schemes-Surface-Container-Lowest);
106
- &:not(:active):not(.is-extra-small) {
106
+ &:not(:active) {
107
107
  border: var(--spacing-xxs) solid var(--Schemes-Primary);
108
108
  }
109
109
  &:active:not(:disabled):not(.is-extra-small) {
110
110
  border-right: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
111
111
  border-left: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
112
112
  }
113
- &:hover,
114
- &:focus {
113
+ &:hover:not(:disabled),
114
+ &:focus:not(:disabled) {
115
115
  color: var(--Schemes-On-Primary-Container);
116
+ background: var(--Schemes-Inverse-Surface);
116
117
  }
117
118
  }
118
119
 
@@ -162,11 +163,40 @@
162
163
  font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
163
164
  }
164
165
  }
166
+ &.is-extra-small {
167
+ width: 1.5rem;
168
+ height: 1.5rem;
169
+ padding: var(--scale-xsmall);
170
+ gap: var(--scale-small);
171
+ span.icon {
172
+ font-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
173
+ }
174
+ }
165
175
  &.icon-button--standard:not(:disabled) {
166
176
  color: var(--Schemes-Primary, #003282);
167
177
  background: var(--Schemes-Surface-Container-Lowest);
168
178
  }
179
+ &.phila-button--destructive:not(:disabled) {
180
+ color: var(--Schemes-On-Error-Container) !important;
181
+ background: var(--Schemes-Error-Container);
182
+ }
183
+ &:active:not(:disabled) {
184
+ color: var(--Schemes-On-Secondary-Container) !important;
185
+ background: var(--Schemes-Secondary-Container) !important;
186
+ box-sizing: border-box;
187
+ border: none;
188
+ }
189
+ &:hover:not(:disabled),
190
+ &:focus:not(:disabled) {
191
+ &.phila-button--secondary,
192
+ &.icon-button--standard {
193
+ color: var(--Schemes-Primary);
194
+ background: var(--Schemes-Surface-Container);
195
+ border-color: transparent;
196
+ }
197
+ }
169
198
  }
199
+
170
200
  span.icon {
171
201
  height: auto;
172
202
  width: auto;
package/dist/styles/light-mode.css CHANGED
@@ -4,12 +4,16 @@ body {
4
4
  --Schemes-Primary: #003282;
5
5
  --Schemes-On-Primary-Container: #fff;
6
6
  --Schemes-Secondary-Container: #0086ab;
7
+ --Schemes-On-Secondary-Container: #fff;
7
8
  --Schemes-Inverse-Surface: #303030;
8
9
  --Schemes-Surface-Container-High: #c6c6c6;
10
+ --Schemes-Surface-Container-Highest: #ababab;
9
11
  --Schemes-Error-Container: #ff5c5c;
10
12
  --Schemes-Error-Container-2: #d14922;
13
+ --Schemes-On-Error-Container: #fff;
11
14
  --Schemes-Surface-Container-Lowest: #fff;
12
15
  --Schemes-Surface-Container-Low: #f1f1f1;
16
+ --Schemes-Surface-Container: #e2e2e2;
13
17
  --Schemes-Outline: #5e5e5e;
14
18
  --Schemes-On-Surface: #000;
15
19
 
@@ -17,15 +21,16 @@ body {
17
21
  --Label-Default-font-label-default-size: 1rem;
18
22
  --Label-Default-font-label-default-lineheight: 1rem;
19
23
  --Label-Small-font-label-small-size: 0.875rem;
20
-
21
- --Body-Small-font-body-small-family: "Montserrat";
22
- --Body-Small-font-body-small-size: 0.875rem;
23
- --Body-Small-font-body-small-lineheight: 1.25rem;
24
+ --Label-Small-font-label-small-lineheight: 1.25rem;
24
25
 
25
26
  --Body-Default-font-body-default-family: "Montserrat";
26
27
  --Body-Default-font-body-default-size: 1rem;
27
28
  --Body-Default-font-body-default-lineheight: 1.5rem;
28
29
 
30
+ --Body-Small-font-body-small-family: "Montserrat";
31
+ --Body-Small-font-body-small-size: 0.875rem;
32
+ --Body-Small-font-body-small-lineheight: 1.25rem;
33
+
29
34
  --Body-Large-font-body-large-family: "Montserrat";
30
35
  --Body-Large-font-body-large-size: 1.125rem;
31
36
  --Body-Large-font-body-large-lineheight: 1.75rem;
@@ -38,10 +43,26 @@ body {
38
43
  --Icon-Solid-Default-font-icon-solid-default-size: 1.5rem;
39
44
  --Icon-Solid-Large-font-icon-solid-large-size: 2.25rem;
40
45
  --Icon-Solid-ExtraLarge-font-icon-solid-xl-size: 3rem;
46
+ --Icon-Solid-XXSmall-font-icon-solid-xxs-size: 0.75rem;
47
+
48
+ --scale-xxsmall: 0.125rem;
49
+ --scale-xsmall: 0.25rem;
50
+ --scale-small: 0.5rem;
51
+ --scale-large: 1rem;
52
+ --scale-6xlarge: 3.5rem;
41
53
 
54
+ --Static-Body-Large-Font: "Roboto", sans-serif;
55
+ --Static-Body-Large-Size: 1rem;
56
+ --Static-Body-Large-Line-Height: 1.5rem;
57
+ --Static-Body-Large-Tracking: 0.03125rem;
42
58
  --Display-font-display-family: "Montserrat";
43
59
  --Display-Display-1-font-display-1-size: 4.5rem;
44
60
  --Display-Display-1-font-display-1-lineheight: 5.5rem;
61
+ --scale-xxsmall: 0.125rem;
62
+ --scale-xsmall: 0.25rem;
63
+ --scale-small: 0.5rem;
64
+ --scale-large: 1rem;
65
+ --scale-6xlarge: 3.5rem;
45
66
 
46
67
  --Display-Display-2-font-display-2-size: 3.5rem;
47
68
  --Display-Display-2-font-display-2-lineheight: 4.5rem;
package/dist/styles/utilities.css CHANGED
@@ -2,6 +2,33 @@
2
2
  .has-background-ben-franklin-blue {
3
3
  background-color: var(--dark-ben-franklin-blue);
4
4
  }
5
+
6
+ .has-label-small-text {
7
+ /* Label/Small */
8
+ font-family: var(--Label-font-label-family);
9
+ font-size: var(--Label-Small-font-label-small-size);
10
+ font-style: normal;
11
+ font-weight: 600;
12
+ line-height: var(--Label-Small-font-label-small-lineheight);
13
+ }
14
+
15
+ .has-body-default-text {
16
+ /* Body/Default */
17
+ font-family: var(--Body-Default-font-body-default-family);
18
+ font-size: var(--Body-Default-font-body-default-size);
19
+ font-style: normal;
20
+ font-weight: 400;
21
+ line-height: var(--Body-Default-font-body-default-lineheight);
22
+ }
23
+
24
+ .has-body-small-text {
25
+ /* Body/Small */
26
+ font-family: var(--Body-Small-font-body-small-family);
27
+ font-size: var(--Body-Small-font-body-small-size);
28
+ font-style: normal;
29
+ font-weight: 400;
30
+ line-height: var(--Body-Small-font-body-small-lineheight);
31
+ }
5
32
  .has-text-display-1 {
6
33
  font-family: var(--Display-font-display-family);
7
34
  font-size: var(--Display-Display-1-font-display-1-size);
package/dist/styles/variables.css CHANGED
@@ -62,6 +62,13 @@ TODO: we will need to update tokens.json to a more complete and updated version
62
62
  --spacing-5xl: 3rem;
63
63
  --spacing-6xl: 3.5rem;
64
64
  --spacing-7xl: 4rem;
65
+ /* scale, these are new from figma, assumptions made on medium -> large */
66
+ --scale-xsmall: 0.25rem;
67
+ --scale-small: 0.5rem;
68
+ --scale-medium: 0.75rem;
69
+ --scale-large: 1rem;
70
+ --scale-xlarge: 1.125rem;
71
+ --scale-xxlarge: 1.5rem;
65
72
  /* Primitives/Mode 1 > border widths */
66
73
  --border-width-xl: 1.125rem;
67
74
  --border-width-l: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-core",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "Core utilities and styles for Phila UI library",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -56,7 +56,9 @@
56
56
  },
57
57
  "scripts": {
58
58
  "build": "vite build && npm run copy-css",
59
- "copy-css": "mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
59
+ "copy-css": "mkdir dist/styles && cp src/styles/*.css dist/styles/",
60
+ "build-win": "vite build && npm run copy-css-win",
61
+ "copy-css-win": "mkdir dist\\styles && copy src\\styles\\*.css dist\\styles\\",
60
62
  "dev": "vite build --watch",
61
63
  "lint": "eslint src/**/*.{ts,vue}",
62
64
  "lint:fix": "eslint src/**/*.{ts,vue} --fix",