@sikka/hawa 0.0.277 → 0.0.279

package/.github/workflows/hawa-publish-push.yml

@@ -1,7 +1,7 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 
-name: Hawa Publish Package Push
+name: Hawa Build, Deploy, and Publish on Push
 
 on:
   push:
@@ -12,10 +12,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - name: Use Node.js v16
+        uses: actions/setup-node@v2
         with:
           node-version: 16
-      - run: |
+      - name: Install dependencies
+        run: |
           if [ -e 'package-lock.json' ]; then 
            npm ci
           else 
@@ -25,24 +27,43 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
 
-  publish-npm:
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+
+  # Publishing to NPM
+  publish:
     needs: build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - name: Use Node.js v16
+        uses: actions/setup-node@v2
         with:
           node-version: 16
           registry-url: https://registry.npmjs.org/
-      - run: |
+      - name: Install dependencies
+        run: |
           if [ -e 'package-lock.json' ]; then 
            npm ci
           else 
            npm install
           fi
-      - run: npm run build-lib
-      - run: npm run build:styles
-      - run: npm run generate-css
-      - run: npm publish
+      - name: Build Library
+        run: npm run build-lib
+      - name: Build Styles
+        run: npm run build:styles
+      - name: Generate Tailwind Styles
+        run: npm run generate-css
+      - name: Publish to NPM
+        run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/dist/styles.css

@@ -398,9 +398,9 @@ video {
 
     --layout-secondary: #d2cdfa;
 
-    --button-primary-300: #6555e3;
-    --button-primary-500: #4c37eb;
-    --button-primary-700: #2e1dac;
+    --button-primary-300: 247 72% 61%;
+    --button-primary-500: 247 82% 57%;
+    --button-primary-700: 247 71% 39%;
 
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
@@ -1213,9 +1213,15 @@ video {
 .w-9 {
   width: 2.25rem;
 }
+.w-96 {
+  width: 24rem;
+}
 .w-\[12px\] {
   width: 12px;
 }
+.w-\[190px\] {
+  width: 190px;
+}
 .w-\[25px\] {
   width: 25px;
 }
@@ -1225,6 +1231,9 @@ video {
 .w-\[400px\] {
   width: 400px;
 }
+.w-\[64px\] {
+  width: 64px;
+}
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
@@ -1747,10 +1756,10 @@ video {
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 .border-buttonPrimary-500 {
-  border-color: var(--button-primary-500);
+  border-color: hsl(var(--button-primary-500));
 }
 .border-buttonPrimary-700 {
-  border-color: var(--button-primary-700);
+  border-color: hsl(var(--button-primary-700));
 }
 .border-gray-100 {
   --tw-border-opacity: 1;
@@ -1792,7 +1801,7 @@ video {
   border-color: rgb(253 224 71 / var(--tw-border-opacity));
 }
 .border-b-buttonPrimary-500 {
-  border-bottom-color: var(--button-primary-500);
+  border-bottom-color: hsl(var(--button-primary-500));
 }
 .bg-background {
   background-color: hsl(var(--background));
@@ -1822,10 +1831,10 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 .bg-buttonPrimary-300 {
-  background-color: var(--button-primary-300);
+  background-color: hsl(var(--button-primary-300));
 }
 .bg-buttonPrimary-500 {
-  background-color: var(--button-primary-500);
+  background-color: hsl(var(--button-primary-500));
 }
 .bg-buttonSecondary-500 {
   background-color: var(--button-secondary-500);
@@ -1894,6 +1903,10 @@ video {
 .bg-layoutPrimary-600 {
   background-color: var(--layout-primary-600);
 }
+.bg-orange-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1918,6 +1931,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
+.bg-red-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+}
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1955,7 +1972,7 @@ video {
   background-image: none;
 }
 .fill-buttonPrimary-500 {
-  fill: var(--button-primary-500);
+  fill: hsl(var(--button-primary-500));
 }
 .fill-gray-200 {
   fill: #e5e7eb;
@@ -2268,7 +2285,7 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 .text-buttonPrimary-500 {
-  color: var(--button-primary-500);
+  color: hsl(var(--button-primary-500));
 }
 .text-card-foreground {
   color: hsl(var(--card-foreground));
@@ -2448,7 +2465,7 @@ video {
   --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
 }
 .ring-buttonPrimary-500 {
-  --tw-ring-color: var(--button-primary-500);
+  --tw-ring-color: hsl(var(--button-primary-500));
 }
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
@@ -2651,10 +2668,6 @@ body {
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
-.hover\:bg-blue-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
 .hover\:bg-blue-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -2664,10 +2677,16 @@ body {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 .hover\:bg-buttonPrimary-500:hover {
-  background-color: var(--button-primary-500);
+  background-color: hsl(var(--button-primary-500));
+}
+.hover\:bg-buttonPrimary-500\/30:hover {
+  background-color: hsl(var(--button-primary-500) / 0.3);
+}
+.hover\:bg-buttonPrimary-500\/50:hover {
+  background-color: hsl(var(--button-primary-500) / 0.5);
 }
 .hover\:bg-buttonPrimary-700:hover {
-  background-color: var(--button-primary-700);
+  background-color: hsl(var(--button-primary-700));
 }
 .hover\:bg-buttonSecondary-700:hover {
   background-color: var(--button-secondary-700);
@@ -2729,7 +2748,7 @@ body {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 .hover\:text-buttonPrimary-500:hover {
-  color: var(--button-primary-500);
+  color: hsl(var(--button-primary-500));
 }
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
@@ -2768,7 +2787,7 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .hover\:ring-buttonPrimary-500:hover {
-  --tw-ring-color: var(--button-primary-500);
+  --tw-ring-color: hsl(var(--button-primary-500));
 }
 .hover\:brightness-90:hover {
   --tw-brightness: brightness(.9);
@@ -2836,7 +2855,7 @@ body {
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 .peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
-  background-color: var(--button-primary-500);
+  background-color: hsl(var(--button-primary-500));
 }
 .peer:checked ~ .peer-checked\:text-blue-600 {
   --tw-text-opacity: 1;
@@ -3094,6 +3113,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:text-muted-foreground) {
+  color: hsl(var(--muted-foreground));
+}
 :is(.dark .dark\:text-red-500) {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -3126,8 +3148,11 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
+:is(.dark .dark\:hover\:bg-buttonPrimary-500\/60:hover) {
+  background-color: hsl(var(--button-primary-500) / 0.6);
+}
 :is(.dark .dark\:hover\:bg-buttonPrimary-700:hover) {
-  background-color: var(--button-primary-700);
+  background-color: hsl(var(--button-primary-700));
 }
 :is(.dark .dark\:hover\:bg-gray-500:hover) {
   --tw-bg-opacity: 1;
@@ -3177,7 +3202,7 @@ body {
   --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
 }
 :is(.dark .dark\:focus\:ring-buttonPrimary-500:focus) {
-  --tw-ring-color: var(--button-primary-500);
+  --tw-ring-color: hsl(var(--button-primary-500));
 }
 :is(.dark .dark\:focus\:ring-gray-600:focus) {
   --tw-ring-opacity: 1;
@@ -3196,7 +3221,7 @@ body {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 :is(.dark .peer:focus ~ .dark\:peer-focus\:ring-buttonPrimary-700) {
-  --tw-ring-color: var(--button-primary-700);
+  --tw-ring-color: hsl(var(--button-primary-700));
 }
 @media (min-width: 440px) {