chore: icon variants and demo state polishments

.storybook/preview.css

@@ -1,4 +1,5 @@
 :root, #storybook-root {
+  --pa-font-family: sans-serif;
   --pa-fs-p: 16px;
   --pa-fs-h1: 20px;
   --pa-fs-h2: 18px;
@@ -38,7 +39,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,6 @@
     <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;
-        }
         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/Footer.vue

@@ -43,10 +43,10 @@ const policyUri = computed(() => client.value.policyUri);
             width="16"
             height="16"
             viewBox="0 0 256 256"
-            style="margin: auto 0; margin-left: 8px;"
+            style="margin: auto 0; margin-left: 8px; color: #000;"
           >
             <path
-              fill="currentColor"
+              fill="#000"
               d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24m87.62 96h-39.83c-1.79-36.51-15.85-62.33-27.38-77.6a88.19 88.19 0 0 1 67.22 77.6ZM96.23 136h63.54c-2.31 41.61-22.23 67.11-31.77 77c-9.55-9.9-29.46-35.4-31.77-77m0-16c2.31-41.61 22.23-67.11 31.77-77c9.55 9.93 29.46 35.43 31.77 77Zm11.36-77.6C96.06 57.67 82 83.49 80.21 120H40.37a88.19 88.19 0 0 1 67.22-77.6M40.37 136h39.84c1.82 36.51 15.85 62.33 27.38 77.6A88.19 88.19 0 0 1 40.37 136m108 77.6c11.53-15.27 25.56-41.09 27.38-77.6h39.84a88.19 88.19 0 0 1-67.18 77.6Z"
             />
           </svg>

src/ui/components/PAlert/PAlert.css

@@ -5,14 +5,14 @@
         padding: 6px 12px;
         position: relative;
         text-align: start;
-        border-radius: var(--pa-input-radius);
+        border-radius: var(--pa-input-radius, 0px);
 
         &--tile {
             border-radius: 0;
         }
 
         &.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

@@ -9,19 +9,19 @@
         hover:opacity-80
         focus:ring-2 ring-primary/30 focus:outline-none;
 
-        background-color: var(--pa-btn-color, rgb(var(--pa-color-primary)));
-        border-radius: var(--pa-input-radius);
+        background-color: var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6)));
+        border-radius: var(--pa-input-radius, 0px);
         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,50 +35,49 @@
             color: #5f6368;
             display: flex;
             flex: 1 0 auto;
-            min-width: 100% !important;
+            min-width: 100%;
         }
 
         &--variant-flat {
-            background-color: var(--pa-btn-color, rgb(var(--pa-color-primary)));
+            background-color: var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6)));
             color: var(--pa-btn-text-color, #fff);
             box-shadow: none;
         }
 
         &--variant-elevated {
-            background-color: var(--pa-btn-color, rgb(var(--pa-color-primary)));
+            background-color: var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6)));
             color: var(--pa-btn-text-color, #fff);
             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);
             }
         }
 
         &--variant-tonal {
-            background-color: color-mix(in srgb, var(--pa-btn-color, rgb(var(--pa-color-primary))) 13%, transparent);
-            color: var(--pa-btn-color, rgb(var(--pa-color-primary)));
+            background-color: color-mix(in srgb, var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6))) 13%, transparent);
+            color: var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6)));
         }
 
         &--variant-outlined {
             background-color: transparent;
-            border: 1px solid color-mix(in srgb, var(--pa-btn-color, rgb(var(--pa-color-primary))) 70%, transparent);
-            color: var(--pa-btn-text-color, var(--pa-btn-color, rgb(var(--pa-color-primary))));
+            border: 1px solid color-mix(in srgb, var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6))) 70%, transparent);
+            color: var(--pa-btn-text-color, var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6))));
         }
 
         &--variant-text,
         &--variant-plain {
             background-color: transparent;
-            color: var(--pa-btn-text-color, var(--pa-btn-color, rgb(var(--pa-color-primary))));
+            color: var(--pa-btn-text-color, var(--pa-btn-color, rgb(var(--pa-color-primary, 227 112 6))));
         }
 
         &--variant-plain {
             opacity: 0.72;
 
             &:hover,
-            &.hover--demo,
-            &:focus,
-            &.focus--demo {
+            &.btn--hovered,
+            &:focus {
                 opacity: 1;
             }
         }
@@ -98,7 +97,7 @@
         position: absolute;
         top: 0;
         width: 100%;
-        border-radius: var(--pa-input-radius);
+        border-radius: var(--pa-input-radius, 0px);
     }
 
     .btn--disabled {

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;
                 }
@@ -19,8 +18,8 @@
                 top: unset;
                 left: unset;
                 transform: unset;
-                font-size: var(--pa-fs-p);
-                font-weight: var(--pa-fw-p);
+                font-size: var(--pa-fs-p, 16px);
+                font-weight: var(--pa-fw-p, 400);
                 &:focus,
                 &:focus-within {
                     color: #5f6368;
@@ -29,7 +28,7 @@
 
             input[type=checkbox] {
                 @apply border-gray-300 relative mr-2 w-6 h-6 cursor-pointer block outline-none ring-0 ring-offset-0;
-                border-radius: var(--pa-input-radius);
+                border-radius: var(--pa-input-radius, 0px);
                 appearance: none;
                 font-variation-settings: inherit;
                 font-weight: inherit;
@@ -38,8 +37,8 @@
                 &:focus,
                 &:focus-visible,
                 &:active {
-                    outline: none !important;
-                    box-shadow: none !important;
+                    outline: none;
+                    box-shadow: none;
                 }
             }
 
@@ -49,8 +48,8 @@
                 position: absolute;
                 width: 100%;
                 height: 100%;
-                border: var(--pa-input-border-w) solid gray;
-                border-radius: var(--pa-input-radius);
+                border: var(--pa-input-border-w, 1px) solid gray;
+                border-radius: var(--pa-input-radius, 0px);
                 background-color: white;
             }
 

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;
             }
@@ -16,8 +16,8 @@
         .input--label {
             @apply relative left-0;
             top: unset;
-            font-size: var(--pa-fs-p);
-            font-weight: var(--pa-fw-p);
+            font-size: var(--pa-fs-p, 16px);
+            font-weight: var(--pa-fw-p, 400);
         }
 
         &--digit-box {
@@ -32,8 +32,8 @@
                     min-width: 24px;
                     max-width: 60px;
                     padding: 4px;
-                    border-radius: var(--pa-input-radius);
-                    border-width: var(--pa-input-border-w);
+                    border-radius: var(--pa-input-radius, 0px);
+                    border-width: var(--pa-input-border-w, 1px);
                 }
 
                 &.input-focused {
@@ -48,7 +48,7 @@
                     min-width: 24px;
                     text-align: center;
                     padding: 0;
-                    font-family: var(--pa-font-family);
+                    font-family: var(--pa-font-family, sans-serif);
                 }
             }
         }

src/ui/components/PMessage/PMessage.css

@@ -11,8 +11,8 @@
             word-break: break-word;
             overflow-wrap: break-word;
             word-wrap: break-word;
-            font-family: var(--pa-font-family);
-            font-weight: var(--pa-fw-p);
+            font-family: var(--pa-font-family, sans-serif);
+            font-weight: var(--pa-fw-p, 400);
         }
     }