chore: icon variants and demo state polishments

.storybook/preview.css

@@ -38,7 +38,7 @@ html, body, #storybook-root, #wrapper {
   .hide-controls-column > div > table  {
     & > thead > tr > th:last-child,
     & > tbody > tr:not(:first-child) > td:last-child {
-      display: none !important;
+      display: none;
     }
 
     & > thead > tr th:nth-child(1),

index.html

@@ -6,26 +6,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
     <title>Title</title>
     <style id="dev-style">
-        :root {
-            --pa-font-family: Tahoma, Verdana, sans-serif;
-            --pa-fs-p: 16px;
-            --pa-fs-h1: 22px;
-            --pa-fs-h2: 14px;
-            --pa-fw-p: 400;
-            --pa-fw-h1: 500;
-            --pa-fw-h2: 400;
-            --pa-align-p: start;
-            --pa-align-h1: center;
-            --pa-align-h2: center;
-            --pa-input-radius: 12px;
-            --pa-input-border-w: 1px;
-            --pa-main-radius: 8px;
-            --pa-main-border-w: 1px;
-            --pa-main-border-c: #e2e8f0;
-            --pa-main-bg: #ffffff;
-            --pa-widget-align: center;
-            --pa-logo-align: center;
+        :root{
+        --pa-fs-p: 16px;
+        --pa-fs-h1: 20px;
+        --pa-fs-h2: 18px;
+        --pa-fw-p: 400;
+        --pa-fw-h1: 400;
+        --pa-fw-h2: 400;
+        --pa-align-p: start;
+        --pa-align-h1: center;
+        --pa-align-h2: center;
+        --pa-input-radius: 0px;
+        --pa-input-border-w: 1px;
+        --pa-main-radius: 0px;
+        --pa-main-border-w: 1px;
+        --pa-main-border-c: #e2e8f0;
+        --pa-main-bg: white;
+        --pa-widget-align: center;
+        --pa-widget-state: 0;
+        --pa-input-variant: 0;
+        --pa-button-variant: 0;
+        --pa-logo-align: center;
+        --pa-icon-variant: 1;
         }
+
         html, body {
             margin: 0;
             height: 100%;

src/index.ts

@@ -16,25 +16,24 @@ export default class PlusAuthWidget {
     settings: Partial<IWidgetSettings> = {},
     context: Partial<IPlusAuthContext>
   ) {
+    this.http = createFetchWrapper(settings.apiUrl);
 
-    this.http = createFetchWrapper(settings.apiUrl)
+    const reactiveSettings = reactive(settings);
 
-    const reactiveSettings = reactive(settings)
-
-    this.i18n = new Translator(reactiveSettings.locale)
-    if(context.params?.ui_locales){
-      const userPreferredLocales = context.params?.ui_locales?.split(' ') || []
+    this.i18n = new Translator(reactiveSettings.locale);
+    if (context.params?.ui_locales) {
+      const userPreferredLocales = context.params?.ui_locales?.split(' ') || [];
       for (let contextLocale of userPreferredLocales) {
-        if(this.i18n.locales[contextLocale]){
-          this.i18n.locale = contextLocale
+        if (this.i18n.locales[contextLocale]) {
+          this.i18n.locale = contextLocale;
           break;
         }
       }
     }
     this._view = createWidget(container || document.body, reactiveSettings as any, context, {
       i18n: this.i18n,
       http: this.http,
-    })
+    });
   }
   get view(): IWidgetSettings {
     // expose settings rather than vue app

src/ui/components/PAlert/PAlert.css

@@ -12,7 +12,7 @@
         }
 
         &.alert--text {
-            background-color: transparent !important;
+            background-color: transparent;
             color: inherit;
         }
 
@@ -25,8 +25,7 @@
             font-size: 32px;
 
             &:hover,
-            .hover--demo
-            {
+            &.input--hovered {
                 background-color: rgba(184, 184, 184, 0.30);
                 cursor: pointer;
             }
@@ -39,6 +38,6 @@
     }
 
     .input:not(.input--error) + .alert {
-        @apply mt-0 !important;
+        @apply mt-0;
     }
 }

src/ui/components/PBtn/PBtn.css

@@ -12,16 +12,16 @@
         background-color: var(--pa-btn-color, rgb(var(--pa-color-primary)));
         border-radius: var(--pa-input-radius);
         color: var(--pa-btn-text-color, #fff);
-        transition-property: background-color, border-color, box-shadow, color, opacity, transform;
-        transition-duration: 150ms;
+        transition: none;
 
         &:hover,
-        &.hover--demo {
+        &.btn--hovered {
             opacity: 0.8;
+            transition-property: background-color, border-color, box-shadow, color, opacity, transform;
+            transition-duration: 150ms;
         }
 
-        &:focus,
-        &.focus--demo {
+        &:focus {
             --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
             --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
             box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
@@ -35,7 +35,7 @@
             color: #5f6368;
             display: flex;
             flex: 1 0 auto;
-            min-width: 100% !important;
+            min-width: 100%;
         }
 
         &--variant-flat {
@@ -50,7 +50,7 @@
             box-shadow: 0 3px 6px rgb(0 0 0 / 0.16), 0 3px 6px rgb(0 0 0 / 0.23);
 
             &:hover,
-            &.hover--demo {
+            &.btn--hovered {
                 box-shadow: 0 5px 10px rgb(0 0 0 / 0.18), 0 4px 6px rgb(0 0 0 / 0.22);
             }
         }
@@ -76,9 +76,8 @@
             opacity: 0.72;
 
             &:hover,
-            &.hover--demo,
-            &:focus,
-            &.focus--demo {
+            &.btn--hovered,
+            &:focus {
                 opacity: 1;
             }
         }

src/ui/components/PCheckBox/PCheckBox.css

@@ -7,7 +7,6 @@
                 @apply ring-0 border-0 items-center outline-none;
 
                 &:focus,
-                .focus--demo,
                 &:focus-within {
                     @apply ring-0 outline-none;
                 }
@@ -38,8 +37,8 @@
                 &:focus,
                 &:focus-visible,
                 &:active {
-                    outline: none !important;
-                    box-shadow: none !important;
+                    outline: none;
+                    box-shadow: none;
                 }
             }
 

src/ui/components/PCodeInput/PCodeInput.css

@@ -6,7 +6,7 @@
             @apply border-0 ring-0 flex flex-row justify-between;
 
             &:hover,
-            &.hover--demo {
+            &.input--hovered {
                 background-color: transparent;
                 border-color: transparent;
             }

src/ui/components/PSelect/PSelect.css

@@ -95,8 +95,8 @@
                 &:-webkit-autofill:hover,
                 &:-webkit-autofill:focus,
                 &:-webkit-autofill:active {
-                    font-family: var(--pa-font-family) !important;
-                    -webkit-box-shadow: 0 0 0 30px white inset !important;
+                    font-family: var(--pa-font-family);
+                    -webkit-box-shadow: 0 0 0 30px white inset;
                 }
             }
         }
@@ -106,13 +106,13 @@
         .input {
             &-select {
                 &-item {
-                    font-size: 12px !important;
-                    min-height: 16px !important;
+                    font-size: 12px;
+                    min-height: 16px;
                     padding: 0px 8px;
                 }
 
                 &-value {
-                    font-size: 12px !important;
+                    font-size: 12px;
                     min-height: 24px;
                     padding-left: 8px;
                 }

src/ui/components/PSelect/PSelect.vue

@@ -137,7 +137,7 @@ function onBlur(e: FocusEvent) {
 
   if (
     pointerDownInside.value ||
-    (relatedTarget && inputRef.value?.contains(relatedTarget))
+    relatedTarget && inputRef.value?.contains(relatedTarget)
   ) {
     return;
   }