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

@@ -1,55 +1,65 @@
 .widget {
     .input {
         &-select {
-            @apply relative outline-none
-            focus:ring-2 ring-primary/30 focus:outline-none;
+            @apply relative outline-none;
 
             &-arrow {
                 position: absolute;
                 top: 50%;
-                right: 10px;
+                right: 12px;
                 transform: translateY(-50%);
-                transition: transform .2s linear;
-                fill: #767676;
+                transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
+                color: #6b7280;
                 pointer-events: none;
             }
 
             .input--wrap {
                 @apply cursor-pointer outline-none;
                 border-radius: var(--pa-input-radius);
                 border-width: var(--pa-input-border-w);
+                transition: border-color 0.15s ease, box-shadow 0.15s ease;
             }
 
             .input-select-items {
-                @apply hidden absolute overflow-auto max-h-64 ring-1 ring-gray-300 bg-white;
+                @apply hidden absolute overflow-auto max-h-60 bg-white border border-gray-200/80 shadow-lg p-1;
+                border-radius: var(--pa-input-radius);
                 left: 0;
                 right: 0;
-                top: calc(100% + 4px);
+                top: calc(100% + 6px);
                 min-width: 100%;
                 z-index: 10000;
 
                 .input-select-item {
-                    @apply relative flex flex-1 items-center
+                    @apply relative flex items-center justify-between
                     tracking-normal
-                    min-h-10 p-1
-                    outline-none whitespace-nowrap overflow-hidden text-ellipsis select-none cursor-pointer
-                    bg-white;
+                    min-h-9 px-3 py-1.5
+                    outline-none select-none cursor-pointer
+                    bg-white text-gray-700;
+                    border-radius: calc(var(--pa-input-radius) - 2px);
                     text-decoration: none;
                     font-family: var(--pa-font-family);
-                    font-size: var(--pa-fs-p);
-                    font-weight: var(--pa-fw-p);
+                    font-size: 14px;
+                    font-weight: 400;
+                    transition: background-color 0.15s ease, color 0.15s ease;
+
+                    &-text {
+                        @apply truncate flex-1;
+                    }
+
+                    &-check {
+                        @apply ms-2 text-primary flex-shrink-0;
+                    }
 
-                    &:focus:not(&--selected){
-                        @apply bg-gray-300/60;
-                        box-shadow: inset 0px 0px 2px 0px gray;
+                    &:focus:not(&--selected) {
+                        @apply bg-gray-100/80 text-gray-900;
                     }
 
                     &--selected {
-                        @apply bg-primary/50;
+                        @apply bg-primary/10 text-primary font-medium;
                     }
 
                     &:hover:not(.input-select-item--selected) {
-                        @apply bg-gray-200
+                        @apply bg-gray-100/70 text-gray-900;
                     }
                 }
             }
@@ -60,26 +70,27 @@
                 }
 
                 .input-select-arrow {
-                    transform: translateY(-50%) rotate(-180deg);
+                    transform: translateY(-50%) rotate(180deg);
+                    color: rgb(var(--pa-color-primary));
                 }
             }
 
             &--open-up {
                 .input-select-items {
                     top: auto;
-                    bottom: calc(100% + 4px);
+                    bottom: calc(100% + 6px);
                 }
             }
 
             &-value {
-                @apply flex flex-1 bg-transparent text-gray-600 items-center select-none;
+                @apply flex flex-1 bg-transparent text-gray-700 items-center select-none;
                 line-height: 1.2;
-                padding: 0 24px 0 12px;
+                padding: 0 32px 0 12px;
                 min-height: 42px;
-                transition: all 0.3s;
+                transition: all 0.2s ease;
                 font-family: var(--pa-font-family);
-                font-size: var(--pa-fs-p);
-                font-weight: var(--pa-fw-p);
+                font-size: 14px;
+                font-weight: 400;
 
                 &:focus::-webkit-input-placeholder {
                     color: transparent;
@@ -95,8 +106,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;
                 }
             }
         }
@@ -105,16 +116,21 @@
     .input-select.input-dense {
         .input {
             &-select {
+                &-arrow {
+                    right: 8px;
+                }
+
                 &-item {
-                    font-size: 12px !important;
-                    min-height: 16px !important;
-                    padding: 0px 8px;
+                    font-size: 13px;
+                    min-height: 28px;
+                    padding: 4px 8px;
                 }
 
                 &-value {
-                    font-size: 12px !important;
-                    min-height: 24px;
+                    font-size: 13px;
+                    min-height: 32px;
                     padding-left: 8px;
+                    padding-right: 24px;
                 }
             }
         }