@aquera/nile-elements 0.1.39-beta-1.1 → 0.1.39

package/README.md

@@ -79,42 +79,13 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
-#### Version 0.1.38-beta-1.4
-- Nile Tokenization: New Design Tokens added
-- Dependency Nile 0.3.64-beta-1.2
+#### Version 0.1.39
+- Nile Chip, Icon: Bugfix for [UIF-571] & [UIF-693]
+- Dependency Nile 0.3.65
 
-#### Version 0.1.35-beta-1.2
-- Nile Select: Help text property updated
-
-#### Version 0.1.35-beta-1.1
-- Nile Filter Chip : New Component
-- Dependency Nile 0.3.61-beta-1.1
-
-#### Version 0.1.35-beta-1.0
-- Nile Code Editor: Bugfix for autocomplete dialog
-
-#### Version 0.1.34-beta-1.1
-- Nile Code Editor: Bugfix for search section one cmd+f
-
-#### Version 0.1.34-beta-1.0
-- Nile Error Message: Ux updated & maxHeight, maxWidth properties added
-
-
-#### Version 0.1.33-beta-1.1
-- Nile Menu: Property added allowSpaceKey
-
-#### Version 0.1.33-beta-1.0
-- Nile Menu: Bugfix for using space key in nile input inside nile-menu
-
-#### Version 0.1.32-beta-1.5
-- Nile Tokens: Spacing tokens updated
-- Dependency Nile 0.3.61-beta-1.0
-
-#### Version 0.1.32-beta-1.4
--  Nile Tooltip: Bug Fixes
-
-#### Version 0.1.32-beta-1.3
-- Nile Input: Safari's AutoFill icon defect fix
+#### Version 0.1.38
+- Nile Filter Chip: UIF-772 New Icon Released: Savings
+- Dependency Nile 0.3.64
 
 #### Version 0.1.37
 - Nile Filter Chip: UIF-516 Added Nile Filter Chip Component

package/demo/filenames.txt

@@ -1 +1 @@
-api,accessreview,action,address,agent,aggregation,alert,allapplication,allsearch,applications-2,apply-filter,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cases,certification,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,copy,cor-analysis,correlation,create,createuser,dashboard,data-type-array,data-type-boolean,data-type-json,data-type-null,data-type-number,data-type-string,data-type-unknown,database,databaseview,default-cursor,default,delegate,delete,deligateduser,directory,disabled,dowhileloop,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,download,drag,edit-write,else,email,enable,entities,entitlement,error,escalate,exactmatch,execute,expand-2,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-colorpalatte,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-child-workflow,header-flows,header-tasks,helpsupport,help,helpandsupport,history,identitygraph,identityledger,ifelse,image,immutable,info-icon,info,inprogress,js,kill,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,mute,nomatch,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pencil,peopletask,persistent-variable,persistentdata,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,reminder,resize,resource,revocation-cycle,role,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,send,sendemail,sendescalation,sendreminder,settings,share,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trigger,undo-02,undo,unmute,updown,update,upgrade,upload,user-group,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove,userremovegroup,userupdate,users,validationexpression,variable-new,variable-global,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,whileloop,workflow-application,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,automation-details,back,bar-and-line-chart,bar-chart-square-02,bar-chart,bargraph,book-closed,border_all,box,bubble-chart,cell-loader,check-circle,check-done-01,check-done-02,chevron-left-double,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,comment,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,document-new,dotpoints-02,dots-grid,downgrade,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,helpers,ifelsenew,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,left-union,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,monitor-01,mouse,move-application,my-integration,new-calendar,ng-dropdown,ng-activity,ng-align-center,ng-annotation-x,ng-bell-01,ng-bell-ringing-04,ng-bold-01,ng-calendar-plus-02,ng-calendar,ng-check-circle,ng-check-square-broken,ng-chevron-down,ng-chevron-left,ng-chevron-right,ng-chevron-selector-vertical,ng-chevron-up-double,ng-chevron-up,ng-copy-03,ng-dots-grid,ng-dots-vertical,ng-download-01,ng-edit-02,ng-edit-05,ng-expand-06,ng-file-check-02,ng-file-question-03,ng-filter-lines,ng-grid-01,ng-help-circle,ng-image-user-left,ng-info-circle,ng-italic-01,ng-list,ng-mail-01,ng-mail-04,ng-menu-05,ng-minimize-02,ng-plus,ng-rocket-02,ng-search-lg,ng-send-01,ng-settings-01,ng-share-06,ng-stars-02,ng-trash-01,ng-trash-03,ng-trend-up-01,ng-underline-01,ng-upload-01,ng-user-01,ng-user-check-02-1,ng-user-check-02,ng-user-plus-02,ng-user-right-01,ng-x-close,ng-x-square,nightingale-chart,nlp,operators,orchestration-solid,paperclip,phone,pie,play_pause,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh,resource_analysis,resource_graph,restart_alt,right-join,right-union,rocket-02,sankey,savings,scatter-plot,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,sort_ascending,sort_descending,stacked-bar-chart,step_into,step_out,step_over,storybook,swap,switch,transaction_monitor,trend-up-02,union,users-plus,users-up,virtualservergroup,warning-01
+api,accessreview,action,address,agent,aggregation,alert,allapplication,allsearch,applications-2,apply-filter,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cases,certification,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,copy,cor-analysis,correlation,create,createuser,dashboard,data-type-array,data-type-boolean,data-type-json,data-type-null,data-type-number,data-type-string,data-type-unknown,database,databaseview,default-cursor,default,delegate,delete,deligateduser,directory,disabled,dowhileloop,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,download,drag,edit-write,else,email,enable,entities,entitlement,error,escalate,exactmatch,execute,expand-2,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-colorpalatte,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-child-workflow,header-flows,header-tasks,helpsupport,help,helpandsupport,history,identitygraph,identityledger,ifelse,image,immutable,info-icon,info,inprogress,js,kill,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,mute,nomatch,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palletemenu,partner,partners,pause,pencil,peopletask,persistent-variable,persistentdata,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,reminder,resize,resource,revocation-cycle,role,run,save,schedule,schema,script,search,section,select,selectapplication,selectattributes,send,sendemail,sendescalation,sendreminder,settings,share,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trigger,undo-02,undo,unmute,updown,update,upgrade,upload,user-group,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove,userremovegroup,userupdate,users,validationexpression,variable-new,variable-global,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,whileloop,workflow-application,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,array-loop,array-of-boolean,array-of-integer,array-of-string,arrow-narrow-left,automation-details,back,bar-and-line-chart,bar-chart-square-02,bar-chart,bargraph,book-closed,border_all,box,bubble-chart,cell-loader,check-circle,check-done-01,check-done-02,chevron-left-double,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,comment,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,document-new,dotpoints-02,dots-grid,downgrade,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,helpers,ifelsenew,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-02,layout-alt-02,layout-alt-03,left-join,left-union,life-buoy-01,list,mapper,marker-pin-01,message-notification-square,monitor-01,mouse,move-application,my-integration,new-calendar,nightingale-chart,nlp,operators,orchestration-solid,paperclip,phone,pie,play_pause,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh,resource_analysis,resource_graph,restart_alt,right-join,right-union,rocket-02,sankey,savings,scatter-plot,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,sort_ascending,sort_descending,stacked-bar-chart,step_into,step_out,step_over,storybook,swap,switch,transaction_monitor,trend-up-02,union,users-plus,users-up,virtualservergroup,warning-01

package/demo/index.css

@@ -1,11 +1,8 @@
 body {
-  font-family: var(--ng-font-family-body);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  height: 100vh;
+  background: #fafafa;
+  font-family: colfax-regular, sans-serif;
+  margin:0px;
 }
-
 #demo {
   max-width: 40ch;
   padding: 48px;
@@ -40,7 +37,7 @@ body {
   width:100%;
   word-wrap: break-word;
 }
-/* 
+
 @font-face {
   font-family: 'colfax-regular';
   src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
@@ -65,7 +62,7 @@ body {
   font-display: auto;
   font-style: normal;
   font-weight: bold;
-} */
+}
 
 .stack {
   display: flex;
@@ -118,4 +115,4 @@ nile-drawer {
 
 .body {
   display: flex;
-}
+}

package/demo/index.html

@@ -1,22 +1,39 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="nxtgen.css" id="stylesheet" />
-    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
-    <link rel="stylesheet" href="index.css" />
 
-    <style>
-      
-    </style>
-    <script type="module" src="index.js"></script>
-  </head>
-  <body>
-    <nile-tag removable>
-      Info
-    </nile-tag>
-    <nile-icon name="ng-file-question-03" method="stroke"></nile-icon>
-     <nile-icon name="user"></nile-icon>
-     <nile-button>Button CTA</nile-button>
-  </body>
+<head>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
+  <link rel="stylesheet" href="index.css" />
+  <script type="module" src="index.js"></script>
+</head>
+<style>
+  .flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    padding: 0;
+    margin: 0;
+    border: 1px solid silver;
+    height: 900px;
+  }
+
+  nile-button {
+    flex: 0 0 auto;
+    height: 38px;
+  }
+</style>
+
+<body>
+    <div style="padding: 30px;"> 
+        <nile-progress-bar value="80"></nile-progress-bar>
+    </div>
+    <div style="padding: 30px;">
+        <nile-circular-progressbar content="text"></nile-circular-progressbar>
+<nile-circular-progressbar value="80" size="60"></nile-circular-progressbar>
+<nile-circular-progressbar></nile-circular-progressbar>
+<nile-circular-progressbar value="30" content=" "></nile-circular-progressbar>
+    </div>
+</body>
+
 </html>

package/demo/variables.css

@@ -34,12 +34,12 @@
   --nile-transition-base: 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
   --nile-tooltip-padding-y: var(--nile-spacing-2-x);
   --nile-tooltip-padding-x: var(--nile-spacing-1-x);
-  --nile-tooltip-line-height-sm: var(--nile-type-scale-1);
-  --nile-tooltip-line-height-lg: var(--nile-type-scale-2);
+  --nile-tooltip-line-height-sm: 10.24px;
+  --nile-tooltip-line-height-lg: 12px;
   --nile-tooltip-font-weight-sm: var(--nile-font-weight-regular);
   --nile-tooltip-font-weight-lg: var(--nile-font-weight-semi-bold);
-  --nile-tooltip-font-size-sm: var(--nile-type-scale-1);
-  --nile-tooltip-font-size-lg: var(--nile-type-scale-2);
+  --nile-tooltip-font-size-sm: 10.24px;
+  --nile-tooltip-font-size-lg: 12px;
   --nile-tooltip-color-background: var(--nile-colors-dark-900);
   --nile-toolbar-text-color: var(--nile-colors-dark-900);
   --nile-toolbar-line-height: 30px;
@@ -171,9 +171,6 @@
   --nile-section-message-background-color-success: var(--nile-colors-green-100);
   --nile-section-message-background-color-primary: var(--nile-colors-dark-200);
   --nile-section-message-background-color-error: var(--nile-colors-red-100);
-  --nile-radius-xxs: 1px; /* 1px */
-  --nile-radius-xl: 16px; /* 16px */
-  --nile-radius-sm: 4px; /* 4px */
   --nile-radius-radius-xxs: 2px; /* xxs */
   --nile-radius-radius-xs: 4px; /* xs */
   --nile-radius-radius-xl: 8px; /* xl */
@@ -185,14 +182,7 @@
   --nile-radius-radius-4xl: 16px; /* 4xl */
   --nile-radius-radius-3xl: 12px; /* 3xl */
   --nile-radius-radius-2xl: 10px; /* 2xl */
-  --nile-radius-none: 0px; /* 0px */
-  --nile-radius-md: 8px; /* 8px */
-  --nile-radius-lg: 12px; /* 12px */
-  --nile-radius-full: 9999px; /* 9999px */
   --nile-radius-base-standard: 4px; /* 4px */
-  --nile-radius-4xl: 48px; /* 48px */
-  --nile-radius-3xl: 32px; /* 32px */
-  --nile-radius-2xl: 24px; /* 24px */
   --nile-radio-outer-width: 14px;
   --nile-radio-outer-height: 14px;
   --nile-radio-outer-border-color: var(--nile-colors-neutral-700);
@@ -209,14 +199,14 @@
   --nile-radio-checked-background-color: var(--nile-colors-white-base);
   --nile-progress-bar-track-color-stroke: var(--nile-colors-neutral-400);
   --nile-progress-bar-progress-color-stroke: var(--nile-colors-primary-600);
-  --nile-page-header-subheading-line-height: var(--nile-line-height-xsmall);
-  --nile-page-header-subheading-font-weight: var(--nile-font-weight-regular);
-  --nile-page-header-subheading-font-size: var(--nile-type-scale-2);
+  --nile-page-header-subheading-line-height: 18px;
+  --nile-page-header-subheading-font-weight: 400;
+  --nile-page-header-subheading-font-size: 12px;
   --nile-page-header-subheading-font-color: var(--nile-colors-dark-900);
   --nile-page-header-line-border-color: var(--nile-colors-neutral-400);
-  --nile-page-header-heading-line-height: var(--nile-line-height-large);
-  --nile-page-header-heading-font-weight: var(--nile-font-weight-medium);
-  --nile-page-header-heading-font-size: var(--nile-type-scale-6);
+  --nile-page-header-heading-line-height: 30px;
+  --nile-page-header-heading-font-weight: 500;
+  --nile-page-header-heading-font-size: 20px;
   --nile-page-header-heading-font-color: var(--nile-colors-dark-900);
   --nile-menu-item-background-color: var(--nile-colors-neutral-100);
   --nile-line-height-xsmall: 1rem; /* 16px */
@@ -225,15 +215,15 @@
   --nile-line-height-small: 1.25rem; /* 20px */
   --nile-line-height-medium: 1.5rem; /* 24px */
   --nile-line-height-large: 1.75rem; /* 28px */
-  --nile-line-height-heading-large: 1rem;
+  --nile-line-height-heading-large: 1;
   --nile-input-standard-disabled-placeholder-font-color: var(--nile-colors-neutral-700);
   --nile-input-standard-border-color: var(--nile-colors-neutral-500);
   --nile-input-standard-background-color: var(--nile-colors-white-base);
   --nile-input-shadow-standard-focused-not-disabled: 0px;
   --nile-input-shadow-standard: 0px;
   --nile-input-shadow-destructive-active: 0px;
-  --nile-input-font-size-small: var(--nile-type-scale-3);
-  --nile-input-font-size-medium: var(--nile-type-scale-4);
+  --nile-input-font-size-small: 0.875rem;
+  --nile-input-font-size-medium: 1rem;
   --nile-inline-edit-label-font-color: var(--nile-colors-dark-900);
   --nile-inline-edit-hover-background-color: var(--nile-colors-neutral-100);
   --nile-inline-edit-font-color: var(--nile-colors-neutral-700);
@@ -349,17 +339,6 @@
   --nile-breakpoint-medium: 48rem; /* 768px */
   --nile-breakpoint-max: 99rem; /* 1584px */
   --nile-breakpoint-large: 66rem; /* 1056px */
-  --nile-box-shadow-1: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);; /* 1 */
-  --nile-border-size-9: 9px; /* 9px */
-  --nile-border-size-8: 8px; /* 8px */
-  --nile-border-size-7: 7px; /* 7px */
-  --nile-border-size-6: 6px; /* 6px */
-  --nile-border-size-5: 5px; /* 5px */
-  --nile-border-size-4: 4px; /* 4px */
-  --nile-border-size-3: 3px; /* 3px */
-  --nile-border-size-2: 2px; /* 2px */
-  --nile-border-size-10: 10px; /* 10px */
-  --nile-border-size-1: 1px; /* 1px */
   --nile-badge-color-pill-outline-warning: #dc6803;
   --nile-badge-color-pill-outline-success: #079455;
   --nile-badge-color-pill-outline-purple: #6938ef;
@@ -493,319 +472,4 @@
   --nile-colors-link-hover: var(--nile-colors-primary-900);
   --nile-colors-link-visited: var(--nile-colors-blue-500);
   /*--------------------------------------------------------------*/
-
-  --nile-color-dark-blue:#18181b;
-
-  /* Box-Shadow */
-  --nile-box-shadow-none : none;
-  --nile-box-shadow-1: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);  
-  --nile-box-shadow-2: 0 4px 16px rgba(113, 113, 122, 0.12);
-  --nile-box-shadow-3: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
-                       0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-  --nile-box-shadow-4: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
-  --nile-box-shadow-5: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24);
-  --nile-box-shadow-6: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
-      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
-  --nile-box-shadow-7: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  --nile-box-shadow-8: 0 4px 16px rgb(0 0 0 / 24%);
-  --nile-box-shadow-9: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-  --nile-box-shadow-10: 0 0 0 1px rgba(14, 165, 233, 0.4);
-
-    /* Border Radius */
- 
---nile-border-size-1: 1px; /* 1px */
---nile-border-size-2: 2px; /* 2px */
---nile-border-size-3: 3px; /* 3px */
---nile-border-size-4: 4px; /* 4px */
---nile-border-size-5: 5px; /* 5px */
---nile-border-size-6: 6px; /* 6px */
---nile-border-size-7: 7px; /* 7px */
---nile-border-size-8: 8px; /* 8px */
---nile-border-size-9: 9px; /* 9px */
---nile-border-size-10: 10px; /* 10px */
-
-
-  /* Spacing */
-
---nile-spacing-1px: 1px;
---nile-spacing-2px: 2px;
---nile-spacing-3px: 3px;
---nile-spacing-4px: 4px;
---nile-spacing-5px: 5px;
---nile-spacing-6px: 6px;
---nile-spacing-7px: 7px;
---nile-spacing-8px: 8px;
---nile-spacing-9px: 9px;
---nile-spacing-10px: 10px;
---nile-spacing-14px: 14px;
-
-
-  /* Width */
-
---ng-width-auto:auto;
---nile-width-1px: 1px;
---nile-width-2px: 2px;
---nile-width-3px: 3px;
---nile-width-4px: 4px;
---nile-width-5px: 5px;
---nile-width-6px: 6px;
---nile-width-7px: 7px;
---nile-width-8px: 8px;
---nile-width-9px: 9px;
---nile-width-10px: 10px;
---nile-width-11px: 11px;
---nile-width-12px: 12px;
---nile-width-13px: 13px;
---nile-width-14px: 14px;
---nile-width-15px: 15px;
---nile-width-16px: 16px;
---nile-width-17px: 17px;
---nile-width-18px: 18px;
---nile-width-19px: 19px;
---nile-width-20px: 20px;
---nile-width-21px: 21px;
---nile-width-22px: 22px;
---nile-width-23px: 23px;
---nile-width-24px: 24px;
---nile-width-25px: 25px;
---nile-width-26px: 26px;
---nile-width-27px: 27px;
---nile-width-28px: 28px;
---nile-width-29px: 29px;
---nile-width-30px: 30px;
---nile-width-31px: 31px;
---nile-width-32px: 32px;
---nile-width-33px: 33px;
---nile-width-34px: 34px;
---nile-width-35px: 35px;
---nile-width-36px: 36px;
---nile-width-37px: 37px;
---nile-width-38px: 38px;
---nile-width-39px: 39px;
---nile-width-40px: 40px;
---nile-width-41px: 41px;
---nile-width-42px: 42px;
---nile-width-43px: 43px;
---nile-width-44px: 44px;
---nile-width-45px: 45px;
---nile-width-46px: 46px;
---nile-width-47px: 47px;
---nile-width-48px: 48px;
---nile-width-49px: 49px;
---nile-width-50px: 50px;
---nile-width-60px: 60px;
---nile-width-70px: 70px;
---nile-width-80px: 80px;
---nile-width-90px: 90px;
---nile-width-100px: 100px;
---nile-width-110px: 110px;
---nile-width-120px: 120px;
---nile-width-130px: 130px;
---nile-width-140px: 140px;
---nile-width-150px: 150px;
---nile-width-160px: 160px;
---nile-width-170px: 170px;
---nile-width-180px: 180px;
---nile-width-190px: 190px;
---nile-width-200px: 200px;
---nile-width-535px: 535px;
---nile-width-352px: 352px;
-
-/* Height */
-
---ng-height-auto:auto;
---nile-height-1px: 1px;
---nile-height-2px: 2px;
---nile-height-3px: 3px;
---nile-height-4px: 4px;
---nile-height-5px: 5px;
---nile-height-6px: 6px;
---nile-height-7px: 7px;
---nile-height-8px: 8px;
---nile-height-9px: 9px;
---nile-height-10px: 10px;
---nile-height-11px: 11px;
---nile-height-12px: 12px;
---nile-height-13px: 13px;
---nile-height-14px: 14px;
---nile-height-15px: 15px;
---nile-height-16px: 16px;
---nile-height-17px: 17px;
---nile-height-18px: 18px;
---nile-height-19px: 19px;
---nile-height-20px: 20px;
---nile-height-21px: 21px;
---nile-height-22px: 22px;
---nile-height-23px: 23px;
---nile-height-24px: 24px;
---nile-height-25px: 25px;
---nile-height-26px: 26px;
---nile-height-27px: 27px;
---nile-height-28px: 28px;
---nile-height-29px: 29px;
---nile-height-30px: 30px;
---nile-height-31px: 31px;
---nile-height-32px: 32px;
---nile-height-33px: 33px;
---nile-height-34px: 34px;
---nile-height-35px: 35px;
---nile-height-36px: 36px;
---nile-height-37px: 37px;
---nile-height-38px: 38px;
---nile-height-39px: 39px;
---nile-height-40px: 40px;
---nile-height-41px: 41px;
---nile-height-42px: 42px;
---nile-height-43px: 43px;
---nile-height-44px: 44px;
---nile-height-45px: 45px;
---nile-height-46px: 46px;
---nile-height-47px: 47px;
---nile-height-48px: 48px;
---nile-height-49px: 49px;
---nile-height-50px: 50px;
---nile-height-60px: 60px;
---nile-height-70px: 70px;
---nile-height-80px: 80px;
---nile-height-90px: 90px;
---nile-height-100px: 100px;
---nile-height-110px: 110px;
---nile-height-120px: 120px;
---nile-height-130px: 130px;
---nile-height-140px: 140px;
---nile-height-150px: 150px;
---nile-height-160px: 160px;
---nile-height-170px: 170px;
---nile-height-180px: 180px;
---nile-height-190px: 190px;
---nile-height-200px: 200px;
-
-
- /* Outline */
-
-  --nile-outline-none: none;
-  --nile-outline-1px: 1px;
-  --nile-outline-2px: 2px;
-  --nile-outline-3px: 3px;
-  --nile-outline-4px: 4px;
-  --nile-outline-5px: 5px;
-  --nile-outline-6px: 6px;
-
-
- /*  Line Height */
---nile-line-height-normal: normal;
-
-
-/* Display */
-
-
---nile-display-none: none;
---nile-display-block: block;
---nile-display-inline: inline;
---nile-display-inline-block: inline-block;
---nile-display-flex: flex;
---nile-display-inline-flex: inline-flex;
---nile-display-grid: grid;
---nile-display-inline-grid: inline-grid;
---nile-display-table: table;
---nile-display-inline-table: inline-table;
---nile-display-table-row: table-row;
---nile-display-table-cell: table-cell;
---nile-display-list-item: list-item;
---nile-display-contents: contents;
---nile-display-flow-root: flow-root;
-
-/* Stroke Width */
-
---nile-stroke-width-0: 0;
---nile-stroke-width-1: 1px;
---nile-stroke-width-2: 2px;
---nile-stroke-width-3: 3px;
---nile-stroke-width-4: 4px;
---nile-stroke-width-5: 5px;
---nile-stroke-width-6: 6px;
---nile-stroke-width-7: 7px;
---nile-stroke-width-8: 8px;
---nile-stroke-width-9: 9px;
---nile-stroke-width-10: 10px;
-
-/* Opacity */
-
---nile-opacity-0: 0;
---nile-opacity-5: 0.05;
---nile-opacity-10: 0.1;
---nile-opacity-15: 0.15;
---nile-opacity-20: 0.2;
---nile-opacity-25: 0.25;
---nile-opacity-30: 0.3;
---nile-opacity-35: 0.35;
---nile-opacity-40: 0.4;
---nile-opacity-45: 0.45;
---nile-opacity-50: 0.5;
---nile-opacity-55: 0.55;
---nile-opacity-60: 0.6;
---nile-opacity-65: 0.65;
---nile-opacity-70: 0.7;
---nile-opacity-75: 0.75;
---nile-opacity-80: 0.8;
---nile-opacity-85: 0.85;
---nile-opacity-90: 0.9;
---nile-opacity-95: 0.95;
---nile-opacity-100: 1;
-
-
- 
-
-
-
-  /* Border Width Tokens (0-10px) */
-  --nile-border-width-0: 0px;
-  --nile-border-width-1: 1px;
-  --nile-border-width-2: 2px;
-  --nile-border-width-3: 3px;
-  --nile-border-width-4: 4px;
-  --nile-border-width-5: 5px;
-  --nile-border-width-6: 6px;
-  --nile-border-width-7: 7px;
-  --nile-border-width-8: 8px;
-  --nile-border-width-9: 9px;
-  --nile-border-width-10: 10px;
-
-  /* Border Style Tokens */
-  --nile-border-style-none: none;
-  --nile-border-style-solid: solid;
-  --nile-border-style-dashed: dashed;
-  --nile-border-style-dotted: dotted;
-  --nile-border-style-double: double;
-  --nile-border-style-groove: groove;
-  --nile-border-style-ridge: ridge;
-  --nile-border-style-inset: inset;
-  --nile-border-style-outset: outset;
-  --nile-border-style-hidden: hidden;
-
-
-  /* Colors */
-  --nile-colors-primary-600-alt: #005ea680;
-  --nile-bg-color-dialog: #0000006e;
-
-
-  /* Text Decoration */
-
---nile-text-decoration-underline: underline;
---nile-text-decoration-overline: overline;
---nile-text-decoration-line-through: line-through;
---nile-text-decoration-none: none;
---nile-text-decoration-solid: solid;
---nile-text-decoration-dotted: dotted;
---nile-text-decoration-dashed: dashed;
---nile-text-decoration-wavy: wavy;
---nile-text-decoration-double: double;
---nile-text-decoration-thin: thin;
---nile-text-decoration-thick: thick;
-
-/* Font Size */
-
---nile-font-size-6-7: 6.516px;
---nile-font-family-inherit:inherit
 }