@aquera/nile-elements 0.1.38-beta-1.5 → 0.1.39-beta-1.0

package/README.md

@@ -79,6 +79,42 @@ 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.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.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,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,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,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,8 +1,11 @@
 body {
-  background: #fafafa;
-  font-family: colfax-regular, sans-serif;
-  margin:0px;
+  font-family: var(--ng-font-family-body);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
 }
+
 #demo {
   max-width: 40ch;
   padding: 48px;
@@ -37,7 +40,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')
@@ -62,7 +65,7 @@ body {
   font-display: auto;
   font-style: normal;
   font-weight: bold;
-}
+} */
 
 .stack {
   display: flex;
@@ -115,4 +118,4 @@ nile-drawer {
 
 .body {
   display: flex;
-}
+}

package/demo/index.html

@@ -1,39 +1,22 @@
 <!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" />
 
-<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>
-
+    <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>
 </html>

package/{dist → demo}/nxtgen.css

@@ -385,6 +385,7 @@
   --ng-spacing-4: 16px;
   --ng-spacing-5: 20px;
   --ng-spacing-6: 24px;
+  --ng-spacing-7: 28px;
   --ng-spacing-8: 32px;
   --ng-spacing-10: 40px;
   --ng-spacing-12: 48px;
@@ -411,6 +412,9 @@
   --ng-spacing-2-5: 10px;
   --ng-spacing-3-5: 14px;
   --ng-spacing-4-5: 18px;
+}
+
+:root {
   --ng-colors-text-primary-900: var(--ng-color-graylightmode-900);
   --ng-colors-text-primary-on-brand: var(--ng-color-base-white);
   --ng-colors-text-secondary-700: var(--ng-color-graylightmode-700);
@@ -714,7 +718,12 @@
   --ng-componentcolors-utility-yellow-400: var(--ng-color-yellow-400);
   --ng-componentcolors-utility-yellow-500: var(--ng-color-yellow-500);
   --ng-componentcolors-utility-yellow-600: var(--ng-color-yellow-600);
-  --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-700);
+  --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-700);  
+}
+
+/* 2. Radius - Mode 1 */
+
+:root {
   --ng-radius-none: 0px;
   --ng-radius-xxs: 2px;
   --ng-radius-xs: 4px;
@@ -726,6 +735,9 @@
   --ng-radius-3xl: 20px;
   --ng-radius-4xl: 24px;
   --ng-radius-full: 9999px;
+}
+
+:root {
   --ng-spacing-none: var(--ng-spacing-0);
   --ng-spacing-xxs: var(--ng-spacing-0-5);
   --ng-spacing-xs: var(--ng-spacing-1);
@@ -747,6 +759,11 @@
   --ng-spacing-lg-alt: var(--ng-spacing-3-5);
   --ng-spacing-xl-alt: var(--ng-spacing-4-5);
   --ng-spacing-4xl-alt: var(--ng-spacing-9);
+}
+
+/* 6. Typography - Value */
+
+:root {
   --ng-font-family-display: Inter;
   --ng-font-family-body: Inter;
   --ng-font-weight-regular: Regular;
@@ -807,6 +824,12 @@
   --ng-text-decoration-double: double;
   --ng-text-decoration-thin: thin;
   --ng-text-decoration-thick: thick;
+
+}
+
+/* 4. Widths - Mode 1 */
+
+:root {
   --ng-width-auto: auto;
   --ng-width-0: var(--ng-spacing-0);
   --ng-width-0-5: var(--ng-spacing-0-5);
@@ -843,6 +866,9 @@
   --ng-width-360: var(--ng-spacing-360);
   --ng-width-400: var(--ng-spacing-400);
   --ng-width-480: var(--ng-spacing-480);
+}
+
+:root {
   /* Border Width Tokens (0-10px) */
   --ng-border-width-0: 0px;
   --ng-border-width-1: 1px;
@@ -867,6 +893,11 @@
   --ng-border-style-inset: inset;
   --ng-border-style-outset: outset;
   --ng-border-style-hidden: hidden;
+
+
+}
+
+:root{
 --ng-display-none: none;
 --ng-display-block: block;
 --ng-display-inline: inline;
@@ -882,6 +913,73 @@
 --ng-display-list-item: list-item;
 --ng-display-contents: contents;
 --ng-display-flow-root: flow-root;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-SemiBoldItalic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: auto;
+}
+
+:root{
 --ng-height-auto:auto;
 --ng-height-1px: 1px;
 --ng-height-2px: 2px;
@@ -948,6 +1046,9 @@
 --ng-height-180px: 180px;
 --ng-height-190px: 190px;
 --ng-height-200px: 200px;
+}
+
+:root{
 --ng-opacity-0: 0;
 --ng-opacity-5: 0.05;
 --ng-opacity-10: 0.1;
@@ -969,6 +1070,9 @@
 --ng-opacity-90: 0.9;
 --ng-opacity-95: 0.95;
 --ng-opacity-100: 1;
+}
+
+:root{
 --ng-stroke-width-0: 0;
 --ng-stroke-width-1: 1px;
 --ng-stroke-width-2: 2px;
@@ -980,6 +1084,9 @@
 --ng-stroke-width-8: 8px;
 --ng-stroke-width-9: 9px;
 --ng-stroke-width-10: 10px;
+}
+
+:root{
     --ng-shadow-none: none;
     --ng-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
     --ng-shadow-sm: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
@@ -989,6 +1096,9 @@
     --ng-shadow-2xl: 0px 24px 48px -12px var(--ng-colors-effects-shadow-2xl-01), 0px 4px 4px -2px var(--ng-colors-effects-shadow-2xl-02);
     --ng-shadow-3xl: 0px 32px 64px -12px var(--ng-colors-effects-shadow-3xl-01), 0px 5px 5px -2.5px var(--ng-colors-effects-shadow-3xl-02);
     --ng-shadow-xs-skeuomorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+}
+
+:root{
     --ng-focus-ring:  0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
     --ng-focus-ring-error: 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
     --ng-focus-ring-shadow-xs : 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
@@ -996,6 +1106,16 @@
     --ng-focus-ring-error-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
     --ng-focus-ring-shadow-xs-skeumorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
     --ng-focus-ring-error-shadow-xs-skeumorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+ 
+
+
+
+ 
+
+
+}
+
+:root{
     --nile-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graylightmode-600) 0%, var(--ng-color-graylightmode-500) 100%);
     --nile-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graylightmode-700) 0%, var(--ng-color-graylightmode-600) 100%);
     --nile-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graylightmode-800) 0%, var(--ng-color-graylightmode-600) 100%);
@@ -1012,6 +1132,12 @@
     --nile-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-600) 100%);
     --nile-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-700) 100%);
     --nile-primary-standard: linear-gradient(180deg, var(--ng-colors-fg-white) 0%, var(--ng-colors-bg-brand-primary) 100%);
+
+
+
+}
+
+:root {
   --ng-transition-duration-instant: 0ms;
   --ng-transition-duration-ultra-fast: 50ms;        
   --ng-transition-duration-fast: 100ms;
@@ -1019,7 +1145,10 @@
   --ng-transition-duration-medium: 300ms;
   --ng-transition-duration-slow: 500ms;
   --ng-transition-duration-slower: 700ms;
-  --ng-transition-duration-long: 1000ms;
+  --ng-transition-duration-long: 1000ms;           
+}
+
+:root {
     --ng-outline-none: none;
     --ng-outline-0-5px: 0.5px;
     --ng-outline-1px: 1px;
@@ -1050,74 +1179,5 @@
     --ng-outline-dotted: dotted;
     --ng-outline-double: double;
     --ng-outline-inset: inset;
-}
-
-/* 2. Radius - Mode 1 */
-
-/* 6. Typography - Value */
-
-/* 4. Widths - Mode 1 */
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: auto;
-}
 
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-Italic.woff2') format('woff2');
-  font-weight: 400;
-  font-style: italic;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-MediumItalic.woff2') format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-SemiBoldItalic.woff2') format('woff2');
-  font-weight: 600;
-  font-style: italic;
-  font-display: auto;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('../fonts/Inter-BoldItalic.woff2') format('woff2');
-  font-weight: 700;
-  font-style: italic;
-  font-display: auto;
 }