@aquera/nile-elements 0.1.40-beta-1.6 → 0.1.40-beta-1.8

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -13,16 +13,12 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   * {
-    padding: var(--nile-spacing-none, var(--ng-spacing-none));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0px;
+    margin: 0px;
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
 
   .wrapper {
@@ -39,19 +35,18 @@ export const styles = css`
   }
 
   .horizontal-div {
-    height: var(--nile-height-60px, var(--ng-height-60px));
-    max-width: 648px;
-    width: max(648px, 100%);
+    max-height: 62px;
+    width: 648px;
     min-width: 230px;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-white-base);
   }
   
   .hover-state {
@@ -95,7 +90,7 @@ export const styles = css`
 
   .icons-container {
     display: flex;
-    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    gap: 4px;
   }
 
   .general-icon {
@@ -116,41 +111,33 @@ export const styles = css`
   .uploading {
     height: 62px;
     width: 648px;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: 12px;
     min-width: 230px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1)) 
-      var(--nile-border-style-solid, var(--ng-border-style-solid)) 
-      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
+    border: 1px solid var(--nile-colors-neutral-400)
   }
   
   .uploading:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .progress-bar-container {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 0px;
+    gap: 6px;
   }
 
   .progress-bar-percent {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
-  }
-
-  nile-progress-bar li span {
-    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .progress-bar-container p {
@@ -158,21 +145,17 @@ export const styles = css`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
   }
 
   /* PREVIEW STATE */
   .preview {
-    height: 62px;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .preview-inner {
@@ -181,19 +164,16 @@ export const styles = css`
   }
 
   .preview-image-container {
-    height: var(--nile-height-42px, var(--ng-height-42px));
-    width: var(--nile-width-42px, 42px);
+    height: 42px;
+    width: 42px;
   }
 
   .preview-image-container img, iframe {
-    height: var(--nile-height-42px, var(--ng-height-42px));
-    width: var(--nile-width-42px, 42px); // check it once
+    height: 42px;
+    width: 42px;
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
   }
   
   .preview-file-info {
@@ -202,20 +182,19 @@ export const styles = css`
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    gap: 8px;
   }
 
   .preview-file-info p {
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .preview-file-info p:last-of-type{
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .preview nile-icon:hover {
@@ -224,15 +203,11 @@ export const styles = css`
 
   /* NO PREVIEW STATE */
   .no-preview {
-    height: 62px;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .no-preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .no-preview-container {
@@ -241,23 +216,20 @@ export const styles = css`
   }
 
   .document-icon {
-    height: var(--nile-height-40px, var(--ng-height-40px));
-    width: var(--nile-width-40px, var(--ng-width-10));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-blue-400, var(--ng-componentcolors-utility-brand-600));
-    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
   }
 
   .document-icon nile-icon {
-    height: var(--nile-height-40px, var(--ng-height-40px));
-    width: var(--nile-width-40px, var(--ng-width-10));
+    height: 40px;
+    width: 40px;
   }
   
   .preview-file-info {
@@ -270,15 +242,15 @@ export const styles = css`
   }
 
   .preview-file-info p {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .preview-file-info p:last-of-type{
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .no-preview > nile-icon:hover {
@@ -287,11 +259,11 @@ export const styles = css`
 
   /* ERROR STATE */
   .error {
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .error:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .error-container {
@@ -301,23 +273,20 @@ export const styles = css`
   }
 
   .error-icon {
-    height: var(--nile-height-40px, var(--ng-height-40px));
-    width: var(--nile-width-40px, var(--ng-width-10));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
+    height: 40px;
+    width: 40px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-red-400, var(--ng-colors-border-error));
-    background-color: var(--nile-colors-red-100, var(--ng-componentcolors-utility-orange-dark-100));
+    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100);
   }
 
   .error-icon nile-icon {
-    height: var(--nile-height-40px, var(--ng-height-40px));
-    width: var(--nile-width-40px, var(--ng-width-10));
+    height: 40px;
+    width: 40px;
   }
   
   .file-info {
@@ -331,16 +300,17 @@ export const styles = css`
   }
 
   .file-info p {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    /* padding-bottom: 6px; */
     text-align: center;
   }
   
   .file-info > nile-tooltip > p {
-    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
     text-align: center;
   }
 
@@ -368,20 +338,20 @@ export const styles = css`
   }
 
   .content-container h4 {
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .content-container p:first-child {
     margin: 0px;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .content-container p:last-child {
     margin: 0px;
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700);
   }
 
   /* Drag State */
@@ -391,10 +361,10 @@ export const styles = css`
     justify-content: center;
     align-items: center;
     gap:18px;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-blue-700), var(--ng-colors-fg-primary-900);
-    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-primary));
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-blue-700);
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-blue-500);
   }
 
   /* Uploading State */
@@ -403,22 +373,18 @@ export const styles = css`
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
-    /* border: 1px solid var(--nile-colors-neutral-400); */
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .vertical-uploading:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .loading {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
+    padding-top: 40px;
   }
 
   .corner-icon {
@@ -429,63 +395,54 @@ export const styles = css`
 
   /* Preview State */
   .vertical-preview {
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .vertical-preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .image-preview {
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
     object-fit: cover;
-    width: var(--nile-width-80px, var(--ng-spacing-8xl));
-    height: var(--nile-height-80px, var(--ng-height-80px));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
+    width: 80px;
+    height: 80px;
+    border-radius: var(--nile-radius-radius-xs);
   }
 
   /* Vertical No Preview State */
   .vertical-no-preview {
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .vertical-no-preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .vertical-document-icon {
-    height: var(--nile-height-80px, var(--ng-height-80px));
-    width: var(--nile-width-80px, var(--ng-spacing-8xl));
-    padding: var(--nile-spacing-2px, var(--ng-spacing-xxs)) var(--nile-spacing-3px, var(--ng-spacing-1));
+    height: 80px;
+    width: 80px;
+    padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: var(--nile-radius-radius-xs);
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-blue-400, var(--ng-colors-border-brand-alt));
-    background-color: var(--nile-colors-blue-100, var(--ng-colors-border-brand));
+    border: 1px solid var(--nile-colors-blue-400);
+    background-color: var(--nile-colors-blue-100);
   }
 
   /* Veritcal Error State */
   .vertical-error {
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .vertical-error:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-error));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .error-bg {
-    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-primary));
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-red-400, var(--ng-colors-border-error));
+    background-color: var(--nile-colors-red-100);
+    border: 1px solid var(--nile-colors-red-400);
   }
 
   .file-info-vertical-state {
@@ -494,17 +451,17 @@ export const styles = css`
   }
 
   .file-info-vertical-state p {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
     padding-bottom: 6px;
     text-align: center;
   }
   
   .file-info-vertical-state > nile-tooltip > p {
     color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
     text-align: center;
   }
 
@@ -514,15 +471,15 @@ export const styles = css`
     justify-content: center;
     align-items: center;
     gap: 8px;
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
     text-align: center
   }
 
   .error-p {
-    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2);
     width: 216px;
     white-space: nowrap;
     overflow: hidden;
@@ -534,7 +491,7 @@ export const styles = css`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: 0;
   }
 
 
@@ -549,13 +506,10 @@ export const styles = css`
     min-width: 230px;
     max-height: 200px;
     overflow-y: auto;
-    border: 
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))  
-      var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-neutral-700);
+    border-radius: var(--nile-radius-radius-xs);
     scrollbar-width: none;
-    padding: var(--nile-radius-lg, var(--ng-spacing-lg));
+    padding: 12px;
   }
 
   ul, li {

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -75,7 +75,7 @@ export function getHorizontalNoPreviewState(
     <div class="no-preview horizontal-div">
       <div class="no-preview-container">
         <div class="document-icon">
-          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
@@ -105,7 +105,7 @@ export function getHorizontalErrorState(
     <div class="error horizontal-div">
       <div class="error-container">
         <div class="error-icon">
-          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
         </div>
         <div class="file-info">
           <p>${file.name}</p>
@@ -198,7 +198,7 @@ export function getVerticalNoPreviewState(
   return html`
     <div class="vertical-div vertical-no-preview">
       <div class="vertical-document-icon">
-        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
       </div>
 
       <div class="content-container">
@@ -226,7 +226,7 @@ export function getVerticalErrorState(
   return html`
     <div class="vertical-div vertical-error">
       <div class="vertical-document-icon error-bg">
-        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
       </div>
 
       <div class="file-info-vertical-state">

package/src/nile-file-preview/nile-file-preview.ts

@@ -71,7 +71,7 @@ export class NileFilePreview extends NileElement {
       }
 
     } else if (changedProperties.has('inputFile') && this.inputFile) {
-      this.createState(this.inputFile);
+      this.createState(this.inputFile); 
       this.emit(FilePreviewEvent.NILE_RECEIVE);
 
     } else if (changedProperties.has('fileUrl') && this.fileUrl) {