@pairbo/ui-kit 0.2.6 → 0.3.0

package/dist/src/themes/default.css

@@ -316,10 +316,10 @@
   /*                                Border radii                                */
   /* -------------------------------------------------------------------------- */
 
-  --pbo-border-radius-small: 0.125rem;
-  --pbo-border-radius-medium: 0.25rem;
-  --pbo-border-radius-large: 0.5rem;
-  --pbo-border-radius-x-large: 1rem;
+  --pbo-border-radius-small: 2px;
+  --pbo-border-radius-medium: 4px;
+  --pbo-border-radius-large: 10px;
+  --pbo-border-radius-x-large: 16px;
 
   /* -------------------------------------------------------------------------- */
   /*                                 Elevations                                 */
@@ -333,16 +333,16 @@
   /*                                  Spacings                                  */
   /* -------------------------------------------------------------------------- */
 
-  --pbo-spacing-3x-small: 0.125rem; /* 2px */
-  --pbo-spacing-2x-small: 0.25rem; /* 4px */
-  --pbo-spacing-x-small: 0.5rem; /* 8px */
-  --pbo-spacing-small: 0.75rem; /* 12px */
-  --pbo-spacing-medium: 1rem; /* 16px */
-  --pbo-spacing-large: 1.25rem; /* 20px */
-  --pbo-spacing-x-large: 1.75rem; /* 28px */
-  --pbo-spacing-2x-large: 2.25rem; /* 36px */
-  --pbo-spacing-3x-large: 3rem; /* 48px */
-  --pbo-spacing-4x-large: 4.5rem; /* 72px */
+  --pbo-spacing-3x-small: 2px; /* 2px */
+  --pbo-spacing-2x-small: 4px; /* 4px */
+  --pbo-spacing-x-small: 8px; /* 8px */
+  --pbo-spacing-small: 12px; /* 12px */
+  --pbo-spacing-medium: 16px; /* 16px */
+  --pbo-spacing-large: 20px; /* 20px */
+  --pbo-spacing-x-large: 28px; /* 28px */
+  --pbo-spacing-2x-large: 36px; /* 36px */
+  --pbo-spacing-3x-large: 48px; /* 48px */
+  --pbo-spacing-4x-large: 72px; /* 72px */
 
   /*
    * Transitions
@@ -359,6 +359,7 @@
    */
 
   /* Fonts */
+  --pbo-font-family: inherit;
   --pbo-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
   --pbo-font-sans:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
@@ -366,15 +367,15 @@
   --pbo-font-serif: Georgia, "Times New Roman", serif;
 
   /* Font sizes */
-  --pbo-font-size-2x-small: 0.625rem; /* 10px */
-  --pbo-font-size-x-small: 0.75rem; /* 12px */
-  --pbo-font-size-small: 0.875rem; /* 14px */
-  --pbo-font-size-medium: 1rem; /* 16px */
-  --pbo-font-size-large: 1.25rem; /* 20px */
-  --pbo-font-size-x-large: 1.5rem; /* 24px */
-  --pbo-font-size-2x-large: 2.25rem; /* 36px */
-  --pbo-font-size-3x-large: 3rem; /* 48px */
-  --pbo-font-size-4x-large: 4.5rem; /* 72px */
+  --pbo-font-size-2x-small: 10px; /* 10px */
+  --pbo-font-size-x-small: 12px; /* 12px */
+  --pbo-font-size-small: 14px; /* 14px */
+  --pbo-font-size-medium: 16px; /* 16px */
+  --pbo-font-size-large: 20px; /* 20px */
+  --pbo-font-size-x-large: 24px; /* 24px */
+  --pbo-font-size-2x-large: 36px; /* 36px */
+  --pbo-font-size-3x-large: 48px; /* 48px */
+  --pbo-font-size-4x-large: 72px; /* 72px */
 
   /* Font weights */
   --pbo-font-weight-light: 300;
@@ -413,9 +414,9 @@
   --pbo-button-font-size-large: var(--pbo-font-size-medium);
 
   /* Inputs */
-  --pbo-input-height-small: 1.875rem; /* 30px */
-  --pbo-input-height-medium: 2.5rem; /* 40px */
-  --pbo-input-height-large: 3.125rem; /* 50px */
+  --pbo-input-height-small: 30px; /* 30px */
+  --pbo-input-height-medium: 40px; /* 40px */
+  --pbo-input-height-large: 50px; /* 50px */
 
   --pbo-input-background-color: var(--pbo-color-neutral-0);
   --pbo-input-background-color-hover: var(--pbo-input-background-color);
@@ -430,11 +431,11 @@
   --pbo-input-required-content-offset: -2px;
   --pbo-input-required-content-color: var(--pbo-input-label-color);
 
-  --pbo-input-border-radius-small: var(--pbo-border-radius-medium);
-  --pbo-input-border-radius-medium: var(--pbo-border-radius-medium);
-  --pbo-input-border-radius-large: var(--pbo-border-radius-medium);
+  --pbo-input-border-radius-small: var(--pbo-border-radius-large);
+  --pbo-input-border-radius-medium: var(--pbo-border-radius-large);
+  --pbo-input-border-radius-large: var(--pbo-border-radius-large);
 
-  --pbo-input-font-family: var(--pbo-font-sans);
+  --pbo-input-font-family: var(--pbo-font-family);
   --pbo-input-font-weight: var(--pbo-font-weight-normal);
   --pbo-input-font-size-small: var(--pbo-font-size-small);
   --pbo-input-font-size-medium: var(--pbo-font-size-medium);
@@ -479,9 +480,9 @@
   --pbo-input-help-text-color: var(--pbo-color-neutral-500);
 
   /* Toggles (checkboxes, radios, switches) */
-  --pbo-toggle-size-small: 0.875rem; /* 14px */
-  --pbo-toggle-size-medium: 1.125rem; /* 18px */
-  --pbo-toggle-size-large: 1.375rem; /* 22px */
+  --pbo-toggle-size-small: 14px; /* 14px */
+  --pbo-toggle-size-medium: 18px; /* 18px */
+  --pbo-toggle-size-large: 22px; /* 22px */
 
   /*
    * Overlays
@@ -497,20 +498,6 @@
   --pbo-panel-border-color: var(--pbo-color-neutral-200);
   --pbo-panel-border-width: 1px;
 
-  /*
-   * Tooltips
-   */
-
-  --pbo-tooltip-border-radius: var(--pbo-border-radius-medium);
-  --pbo-tooltip-background-color: var(--pbo-color-neutral-800);
-  --pbo-tooltip-color: var(--pbo-color-neutral-0);
-  --pbo-tooltip-font-family: var(--pbo-font-sans);
-  --pbo-tooltip-font-weight: var(--pbo-font-weight-normal);
-  --pbo-tooltip-font-size: var(--pbo-font-size-small);
-  --pbo-tooltip-line-height: var(--pbo-line-height-dense);
-  --pbo-tooltip-padding: var(--pbo-spacing-2x-small) var(--pbo-spacing-x-small);
-  --pbo-tooltip-arrow-size: 6px;
-
   /*
    * Z-indexes
    */
@@ -520,6 +507,9 @@
   --pbo-z-index-dropdown: 900;
   --pbo-z-index-toast: 950;
   --pbo-z-index-tooltip: 1000;
+
+  /* ------------------------------- Pbo drawer ------------------------------- */
+  --pbo-drawer-header-height: 40px;
 }
 
 /* _utility.css */

package/dist/src/utilities/index.d.ts

@@ -2,3 +2,4 @@ export declare const isMobileDevice: () => boolean;
 export declare const isNullOrUndefined: (...values: any[]) => boolean;
 export declare const isValid: <T>(value: T) => value is NonNullable<T>;
 export declare const removeNullUndefined: <T extends Object>(obj: T) => Partial<T>;
+export declare function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): (this: any, ...args: Parameters<T>) => void;