@aquera/nile-elements 0.1.5 → 0.1.7

package/README.md

@@ -79,6 +79,15 @@ 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.7
+- Nile Css tokens updates
+- Dependency nile 0.3.52
+
+#### Version 0.1.6
+- Nile Select - Required indicator color fix
+- Nile Icon - Icons added play_pause, restart_alt, step_over, step_into, step_out
+- Dependency nile 0.3.51
+
 #### Version 0.1.5
 - Nile Form Help Text - Slot content passing fixes
 

package/demo/filenames.txt

@@ -1 +1 @@
-api,accessreview,action,actionworkflow,address,agent,agents,aggregation,alert,allapplication,allsearch,application,applications-2,applications,apply-filter,approve,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,basic,bell,block-02,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cancel,cases,caution,certification,chevron-down,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componentblock,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,continuous,copy,cor-analysis,correlation,create,createuser,custom,dashboard,data-type-array,data-type-boolean,data-type-expression,data-type-json,data-type-null,data-type-number,data-type-persistent-variable,data-type-string,data-type-unknown,data-type-variable,database-1,database,databaseview,default-1,default-cursor,default,delegate,delete,deleteuser,deligateduser,directory,disabled,dowhileloop,document,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,downarrow,download,drag,draglist,droparrow,dropdown,edit-write,edit-1,edit-pencil,else,email,enable,enabled,entities,entitlement,error,escalate,event,every,exactmatch,execute,expand-2,expand-1,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow-h,flow,flowmap-cancel,flowmap-drag,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-aquera,flowmap-block,flowmap-colorpalatte,flowmap-ellipsis,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-hand,flowmap-redo,flowmap-section,flowmap-text,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,form,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-actions,header-child-workflow,header-flows,header-functions,header-tasks,header-variable,helpsupport,help-1,help,helpandsupport,history,identitygraph,identityledger,if,ifelse,image,immutable,info-icon,info-icon1,info,info2,inprogress,itemplaceholder,js,kill,leftarrow,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,manageduser,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,multiple-user,mute,next-down,next,nomatch,not,notscheduled,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palette,palletemenu,partner,partners,pause,pen,pencil,peopletask,persistent-variable,persistentdata,personaldetails,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,prev-up,prev,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,refresh,reminder,resize,resource,returnvalue,revocationcycle,revokation-cycle,rightarrow,role,rolemanager,run,save,schedule,schema,script,search,section-02,section,select,selectapplication,selectattributes,selectuser,send,sendemail,sendescalation,sendprompt,sendreminder,setting,settings-1,settings,shape,share,smalltick,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop-circle,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,themes,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trash,trigger,undo-02,undo-1,undo,unmute,uparrow,updown,update,updateuser,upgrade,upload,user-group,user-analysis-icon,user-inactive,user-selection,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove-1,userremove-2,userremove,userremovegroup,userupdate,users,validationexpression,variable-new-1,variable-new,variable-global,variable-local-1,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,while,whileloop,workflow-application,workflow-orchestration,workflow-section,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,anomaly,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-square-03,bar-chart,bargraph,bell-icon,book-closed,border_all,box,bubble-chart,calendar-01,cell-loader,check-circle,check-done-01,check-done-02,check,chevron-left-double,chevron-selector-vertical,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,dotpoints-02,dots-grid,dots-vertical,downgrade,download-01,download-02,edit-01,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,flow-01,folder-01,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,help-circle,helpers,info-circle,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-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,nightingale-chart,nlp,no-anomaly,operators,orchestration-solid,ou-analysis-icon,paperclip,phone,pie,placeholder-wf,play-circle,plus-icon,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh-cw-03,right-join,right-union,rocket-02,sankey,scatter-plot,search-lg,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,stacked-bar-chart,storybook,swap,switch,table-1,trash-01,trash-03,trash-no-fill,trend-up-02,union,user-01,user-03,user-circle,user-square,users-01,users-02,users-plus,users-up,virtualservergroup,warning-01,workflow-01,workflow-solid,x-circle
+api,accessreview,action,actionworkflow,address,agent,agents,aggregation,alert,allapplication,allsearch,application,applications-2,applications,apply-filter,approve,apps,aquera,aquerasupport,array,arrayofobject,arrow,arrowdown,arrowdropdown,arrowdropup,arrowleft,arrowright,arrowup,attribute-map-analysis-icon,attributemap,basic,bell,block-02,block,bluedot,boolean,bulk-sync,button-loading-black,button-loading-blue-animated,button-loading-blue,button-loading-white,calendar,cancel,cases,caution,certification,chevron-down,chevron-up,close,collapse-1,collapse,color,compact,compare-tiles,component-menu,component,componentblock,componenttext,condition,conditions,connect,connectivitymap,connectorrightarrow,continuous,copy,cor-analysis,correlation,create,createuser,custom,dashboard,data-type-array,data-type-boolean,data-type-expression,data-type-json,data-type-null,data-type-number,data-type-persistent-variable,data-type-string,data-type-unknown,data-type-variable,database-1,database,databaseview,default-1,default-cursor,default,delegate,delete,deleteuser,deligateduser,directory,disabled,dowhileloop,document,done-02,done,dontmap,donut,doublearrowleft,doublearrowright,downarrow,download,drag,draglist,droparrow,dropdown,edit-write,edit-1,edit-pencil,else,email,enable,enabled,entities,entitlement,error,escalate,event,every,exactmatch,execute,expand-2,expand-1,expand,eye,eyeclosed,featured-icon,file-type-icon,filter-1,filter,firewallagent,firewall,flow-h,flow,flowmap-cancel,flowmap-drag,flowmap-orchestration,flowmap-agent,flowmap-application,flowmap-aquera,flowmap-block,flowmap-colorpalatte,flowmap-ellipsis,flowmap-firewall-agent,flowmap-firewall,flowmap-gateway,flowmap-hand,flowmap-redo,flowmap-section,flowmap-text,flowmap-undo,flowmap-workflow,flowmap,folder,foreach,form,frequency,fullscreen,fullscreenexit,fullscreenshrink,gateway,general,generationphase,global-search,goto,greendot,greydot,greylightdot,group-analysis-icon,group,groupby,groups,guide,handtool,header-actions,header-child-workflow,header-flows,header-functions,header-tasks,header-variable,helpsupport,help-1,help,helpandsupport,history,identitygraph,identityledger,if,ifelse,image,immutable,info-icon,info-icon1,info,info2,inprogress,itemplaceholder,js,kill,leftarrow,leftpointarrow,line,link,list-attribute,loader,loading,loading2,lock,log-info,log,logo-white,logout,logs,loop,manage,manageduser,map,mapcreate,mapdont,mapupdate,maponcreate,maponupdate,maximize,menu,minus,moveleft,moveright,multiple-user,mute,next-down,next,nomatch,not,notscheduled,note,notification,notificationadd,notificationadded,null,number,numberinput,numbers,object,options,orchestration,organization,other,otherdetails,override,palette,palletemenu,partner,partners,pause,pen,pencil,peopletask,persistent-variable,persistentdata,personaldetails,pin,play,plus,pluscircle,plussquare,policy,potentialmatch,poweron,predefined,prev-up,prev,preview,privilage,privilege,privilegeobject,process,professionaldetails,question,radio,radioactive,radiodone,read,readexpression,readonlyuser,readuser,readonly,reddot,redo-02,redo,refresh,reminder,resize,resource,returnvalue,revocationcycle,revokation-cycle,rightarrow,role,rolemanager,run,save,schedule,schema,script,search,section-02,section,select,selectapplication,selectattributes,selectuser,send,sendemail,sendescalation,sendprompt,sendreminder,setting,settings-1,settings,shape,share,smalltick,smartcode,sort,sortascending,sortdescending,sortdown,sortup,stop-circle,stop,string,stringinput,stringletters,support,sync,table,tag,test,text-02,text,textarea-expander,themes,thumbsdown,thumbsup,thumsup,tick,timeupdate,timezone,trash,trigger,undo-02,undo-1,undo,unmute,uparrow,updown,update,updateuser,upgrade,upload,user-group,user-analysis-icon,user-inactive,user-selection,user,useractive,useradd,useraddgroup,userfind,userimport,userimportgroup,usermixed,userremove-1,userremove-2,userremove,userremovegroup,userupdate,users,validationexpression,variable-new-1,variable-new,variable-global,variable-local-1,variable-local,variable,video,view,virtualserver,visibility,visibilityoff,wait,warning,while,whileloop,workflow-application,workflow-orchestration,workflow-section,workflow-text,workflow,writeexpression,access-request,activity-logs,admin-users,alert-circle,analytics,anomaly,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-square-03,bar-chart,bargraph,bell-icon,book-closed,border_all,box,bubble-chart,calendar-01,cell-loader,check-circle,check-done-01,check-done-02,check,chevron-left-double,chevron-selector-vertical,clock-check,clock-rewind,clock,cloud-01,code-generator,column-02,columns-03,combo1,compare,components-icon,copy-06,cost-analytics,data-insight,dataflow-03,dataflow-04,dock-to-right,dotpoints-02,dots-grid,dots-vertical,downgrade,download-01,download-02,edit-01,expand-03,expand-06,eye-off,file-06,file-check-02,file-shield-01,file-shield-02,file,fingerprint-03,flow-01,folder-01,full-union,funnel-02,funnel,gauge,globe-03,globe,graph,graphedit,grid-01,guide-01,headphones-01,help-circle,helpers,info-circle,inner-union,insert-at-cursor,integer,intersection,key-performance-indicator,keyboard-01,laptop-01,layers-three-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,nightingale-chart,nlp,no-anomaly,operators,orchestration-solid,ou-analysis-icon,paperclip,phone,pie,placeholder-wf,play-circle,play_pause,plus-icon,printer,priority-high,priority-highest,priority-low,priority-medium,radar,refresh-cw-03,restart_alt,right-join,right-union,rocket-02,sankey,scatter-plot,search-lg,search-steps-icon,select-02,semi-circle-donut-chart,server-03,settings-02,shield-01,stacked-bar-chart,step_into,step_out,step_over,storybook,swap,switch,table-1,trash-01,trash-03,trash-no-fill,trend-up-02,union,user-01,user-03,user-circle,user-square,users-01,users-02,users-plus,users-up,virtualservergroup,warning-01,workflow-01,workflow-solid,x-circle

package/demo/variables.css

@@ -32,79 +32,79 @@
   --nile-transition-duration-default: 250ms;
   --nile-transition-curve-base: cubic-bezier(0.17, 0.67, 0.83, 0.67);
   --nile-transition-base: 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
-  --nile-tooltip-padding-y: 3px;
-  --nile-tooltip-padding-x: 6px;
+  --nile-tooltip-padding-y: var(--nile-spacing-2-x);
+  --nile-tooltip-padding-x: var(--nile-spacing-1-x);
   --nile-tooltip-line-height-sm: 10.24px;
   --nile-tooltip-line-height-lg: 12px;
-  --nile-tooltip-font-weight-sm: 400;
-  --nile-tooltip-font-weight-lg: 600;
+  --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: 10.24px;
   --nile-tooltip-font-size-lg: 12px;
-  --nile-tooltip-color-background: #000;
-  --nile-toolbar-text-color: rgba(0, 0, 0, 0.87);
+  --nile-tooltip-color-background: var(--nile-colors-dark-900);
+  --nile-toolbar-text-color: #43ff64d9;
   --nile-toolbar-line-height: 30px;
   --nile-toolbar-font-weight: 500;
   --nile-toolbar-font-size: 20px;
-  --nile-toolbar-color: #000000;
-  --nile-toolbar-background-color: #FFFFFF;
-  --nile-toast-color-icon-color-warning: #fff;
-  --nile-toast-color-icon-color-success: #fff;
-  --nile-toast-color-icon-color-info: #fff;
-  --nile-toast-color-icon-color-gray: #667085;
-  --nile-toast-color-icon-color-error: #fff;
+  --nile-toolbar-color: var(--nile-colors-dark-900);
+  --nile-toolbar-background-color: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-warning: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-success: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-info: var(--nile-colors-white-base);
+  --nile-toast-color-icon-color-gray: var(--nile-colors-neutral-700);
+  --nile-toast-color-icon-color-error: var(--nile-colors-white-base);
   --nile-toast-color-icon-color-black: #344054;
-  --nile-toast-color-icon-background-color-warning: #E5BF43;
-  --nile-toast-color-icon-background-color-success: #16b364;
-  --nile-toast-color-icon-background-color-info: #42A3E5;
-  --nile-toast-color-icon-background-color-gray: #fff;
-  --nile-toast-color-icon-background-color-error: #f3a5aa;
-  --nile-toast-color-icon-background-color-black: #fff;
+  --nile-toast-color-icon-background-color-warning: var(--nile-colors-yellow-500);
+  --nile-toast-color-icon-background-color-success: var(--nile-colors-green-700);
+  --nile-toast-color-icon-background-color-info: var(--nile-colors-blue-500);
+  --nile-toast-color-icon-background-color-gray: var(--nile-colors-white-base);
+  --nile-toast-color-icon-background-color-error: var(--nile-colors-red-400);
+  --nile-toast-color-icon-background-color-black: var(--nile-colors-white-base);
   --nile-toast-color-box-shadow:  0px 14px 28px 0px rgba(119, 125, 130, 0.15);
-  --nile-toast-color-border-warning: #E5BF43;
-  --nile-toast-color-border-success: #43E5C0;
-  --nile-toast-color-border-info: #2e90fa;
-  --nile-toast-color-border-gray: #d0d5dd;
-  --nile-toast-color-border-error: #E5434D;
-  --nile-toast-color-border-black: #d0d5dd;
-  --nile-toast-color-background-warning: #FEFCF6;
-  --nile-toast-color-background-success: #F6FEFC;
-  --nile-toast-color-background-info: #d1e9ff;
-  --nile-toast-color-background-gray: #fff;
-  --nile-toast-color-background-error: #FEF6F7;
-  --nile-toast-color-background-black: #fff;
-  --nile-textarea-standard-hover-border-color: #000000;
+  --nile-toast-color-border-warning: var(--nile-colors-yellow-500);
+  --nile-toast-color-border-success: var(--nile-colors-green-500);
+  --nile-toast-color-border-info: var(--nile-colors-blue-500);
+  --nile-toast-color-border-gray: var(--nile-colors-neutral-500);
+  --nile-toast-color-border-error: var(--nile-colors-red-500);
+  --nile-toast-color-border-black: var(--nile-colors-neutral-500);
+  --nile-toast-color-background-warning: var(--nile-colors-yellow-100);
+  --nile-toast-color-background-success: var(--nile-colors-green-100);
+  --nile-toast-color-background-info: var(--nile-colors-blue-400);
+  --nile-toast-color-background-gray: var(--nile-colors-white-base);
+  --nile-toast-color-background-error: var(--nile-colors-red-100);
+  --nile-toast-color-background-black: var(--nile-colors-white-base);
+  --nile-textarea-standard-hover-border-color: var(--nile-colors-dark-900);
   --nile-textarea-standard-focused-box-shadow: 0px;
-  --nile-textarea-standard-focused-border-color: #005ea6;
+  --nile-textarea-standard-focused-border-color: var(--nile-colors-primary-600);
   --nile-textarea-standard-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --nile-textarea-standard-disabled-border-color: #d0d5dd;
+  --nile-textarea-standard-disabled-border-color: var(--nile-colors-neutral-500);
   --nile-textarea-standard-disabled-background-color: #f9fafb;
   --nile-textarea-standard-box-shadow: 0px;
-  --nile-textarea-standard-border-color: #c7ced4;
+  --nile-textarea-standard-border-color: var(--nile-colors-neutral-500);
   --nile-textarea-padding: 0.5em 10px;
   --nile-textarea-label-line-height: 14px;
   --nile-textarea-label-font-weight: 400;
-  --nile-textarea-label-color: #000000;
-  --nile-tag-gray-x-color: #98A2B3;
-  --nile-tag-gray-hover-x-color: #101828;
-  --nile-tag-gray-hover-background-color: #f2f4f7;
+  --nile-textarea-label-color: var(--nile-colors-dark-900);
+  --nile-tag-gray-x-color: var(--nile-colors-neutral-700);
+  --nile-tag-gray-hover-x-color: var(--nile-colors-primary-900);
+  --nile-tag-gray-hover-background-color: var(--nile-colors-dark-200);
   --nile-tag-gray-color: #344054;
-  --nile-tag-gray-background-color: #fff;
+  --nile-tag-gray-background-color: var(--nile-colors-white-base);
   --nile-table-row-border-color: #eaecf0;
   --nile-table-row-background-color: #F9FAFB;
   --nile-table-header-background-color: #F9FAFB;
   --nile-table-body-row-odd-background-color: #F9FAFB;
-  --nile-table-body-row-even-background-color: #FFF;
+  --nile-table-body-row-even-background-color: var(--nile-colors-white-base);
   --nile-stepper-min-width: 200px;
-  --nile-stepper-color-title-selected: #005291;
+  --nile-stepper-color-title-selected: var(--nile-colors-primary-700);
   --nile-stepper-color-text-default: #475467;
-  --nile-stepper-color-subtitle-selected: #005EA6;
-  --nile-stepper-color-line-selected: #005291;
-  --nile-stepper-color-line-default: #D0D5DD;
-  --nile-stepper-color-highlight: #005EA6;
-  --nile-stepper-color-bulletin-outer-selected: #005EA6;
+  --nile-stepper-color-subtitle-selected: var(--nile-colors-primary-600);
+  --nile-stepper-color-line-selected: var(--nile-colors-primary-700);
+  --nile-stepper-color-line-default: var(--nile-colors-neutral-500);
+  --nile-stepper-color-highlight: var(--nile-colors-primary-600);
+  --nile-stepper-color-bulletin-outer-selected: var(--nile-colors-primary-600);
   --nile-stepper-color-bulletin-outer-default: #fff0;
   --nile-stepper-color-bulletin-inner-selected: #fff0;
-  --nile-stepper-color-bulletin-inner-default: #D0D5DD;
+  --nile-stepper-color-bulletin-inner-default: var(--nile-colors-neutral-500);
   --nile-spacing-spacing-xxs: 2px; /* 0.5 (2px) */
   --nile-spacing-spacing-xs: 4px; /* 1 (4px) */
   --nile-spacing-spacing-xl: 16px; /* 4 (16px) */
@@ -129,20 +129,20 @@
   --nile-spacing-3-x: 24px; /* m */
   --nile-spacing-2-x: 12px; /* s */
   --nile-spacing-1-x: 6px; /* xs */
-  --nile-slide-toggle-color-indicator: #FFFFFF;
-  --nile-slide-toggle-color-background-inactive: #C7CED4;
-  --nile-slide-toggle-color-background-active: #005EA6;
-  --nile-sidebar-wrapper-overlay-background-color: #0C111D;
-  --nile-sidebar-menu-background-color: #f2f4f7;
-  --nile-section-message-icon-background-color-warning: #b89219;
-  --nile-section-message-icon-background-color-success: #19b893;
-  --nile-section-message-icon-background-color-primary: #005EA6;
-  --nile-section-message-icon-background-color-error: #e5434d;
-  --nile-section-message-footer-color: #c7ced4;
-  --nile-section-message-background-color-warning: #fefcf6;
-  --nile-section-message-background-color-success: #f6fefc;
-  --nile-section-message-background-color-primary: #F5F7F7;
-  --nile-section-message-background-color-error: #fef6f7;
+  --nile-slide-toggle-color-indicator: var(--nile-colors-white-base);
+  --nile-slide-toggle-color-background-inactive: var(--nile-colors-neutral-500);
+  --nile-slide-toggle-color-background-active: var(--nile-colors-primary-600);
+  --nile-sidebar-wrapper-overlay-background-color: var(--nile-colors-dark-900);
+  --nile-sidebar-menu-background-color: var(--nile-colors-dark-200);
+  --nile-section-message-icon-background-color-warning: var(--nile-colors-yellow-700);
+  --nile-section-message-icon-background-color-success: var(--nile-colors-green-700);
+  --nile-section-message-icon-background-color-primary: var(--nile-colors-primary-600);
+  --nile-section-message-icon-background-color-error: var(--nile-colors-red-500);
+  --nile-section-message-footer-color: var(--nile-colors-neutral-500);
+  --nile-section-message-background-color-warning: var(--nile-colors-yellow-100);
+  --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-radius-xxs: 2px; /* xxs */
   --nile-radius-radius-xs: 4px; /* xs */
   --nile-radius-radius-xl: 8px; /* xl */
@@ -157,18 +157,18 @@
   --nile-radius-base-standard: 4px; /* 4px */
   --nile-radio-outer-width: 14px;
   --nile-radio-outer-height: 14px;
-  --nile-radio-outer-border-color: #777D82;
-  --nile-radio-outer-background-color: #ffff;
+  --nile-radio-outer-border-color: var(--nile-colors-neutral-700);
+  --nile-radio-outer-background-color: var(--nile-colors-white-base);
   --nile-radio-inner-width: 9px;
   --nile-radio-inner-height: 9px;
-  --nile-radio-hover-border-color: #005EA6;
-  --nile-radio-hover-background-color: rgba(0, 94, 166, 0.1);
-  --nile-radio-checked-icon-background: #005EA6;
-  --nile-radio-checked-hover-icon-background-color: #002F53;
-  --nile-radio-checked-hover-border-color: #002F53;
-  --nile-radio-checked-hover-background-color: #FFFFFF;
-  --nile-radio-checked-border-color: #005EA6;
-  --nile-radio-checked-background-color: #ffff;
+  --nile-radio-hover-border-color: var(--nile-colors-primary-600);
+  --nile-radio-hover-background-color: var(--nile-colors-primary-100);
+  --nile-radio-checked-icon-background: var(--nile-colors-primary-600);
+  --nile-radio-checked-hover-icon-background-color: var(--nile-colors-primary-900);
+  --nile-radio-checked-hover-border-color: var(--nile-colors-primary-900);
+  --nile-radio-checked-hover-background-color: var(--nile-colors-white-base);
+  --nile-radio-checked-border-color: var(--nile-colors-primary-600);
+  --nile-radio-checked-background-color: var(--nile-colors-white-base);
   --nile-page-header-subheading-line-height: 18px;
   --nile-page-header-subheading-font-weight: 400;
   --nile-page-header-subheading-font-size: 12px;
@@ -177,7 +177,7 @@
   --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: #000000;
+  --nile-page-header-heading-font-color: var(--nile-colors-dark-900);
   --nile-menu-item-background-color: #f9fafb;
   --nile-line-height-xsmall: 1rem; /* 16px */
   --nile-line-height-xlarge: 2.25rem; /* 36px */
@@ -186,9 +186,9 @@
   --nile-line-height-medium: 1.5rem; /* 24px */
   --nile-line-height-large: 1.75rem; /* 28px */
   --nile-line-height-heading-large: 1;
-  --nile-input-standard-disabled-placeholder-font-color: hsl(240 5.2% 33.9%);
-  --nile-input-standard-border-color: #c7ced4;
-  --nile-input-standard-background-color: hsl(0, 0%, 100%);
+  --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;
@@ -196,24 +196,24 @@
   --nile-input-font-size-medium: 1rem;
   --nile-inline-edit-label-font-color: #344054;
   --nile-inline-edit-hover-background-color: #f9fafb;
-  --nile-inline-edit-font-color: #667085;
+  --nile-inline-edit-font-color: var(--nile-colors-neutral-700);
   --nile-hero-text-line-height: 24px;
   --nile-hero-text-font-weight: 600;
   --nile-hero-text-font-size: 16px;
-  --nile-hero-text-color: #000;
+  --nile-hero-text-color: var(--nile-colors-dark-900);
   --nile-hero-height: 200px;
   --nile-hero-first-elements-padding: 16px 45px;
-  --nile-hero-color-icon-bg-to-gradient: #F5F5F5;
-  --nile-hero-color-icon-bg-from-gradient: #FFF;
-  --nile-hero-color-hero-text: #000;
-  --nile-hero-color-bg-to-gradient: #E0E5EB;
-  --nile-hero-color-bg-from-gradient: #F3F5F7;
+  --nile-hero-color-icon-bg-to-gradient: var(--nile-colors-dark-200);
+  --nile-hero-color-icon-bg-from-gradient: var(--nile-colors-white-base);
+  --nile-hero-color-hero-text: var(--nile-colors-dark-900);
+  --nile-hero-color-bg-to-gradient: var(--nile-colors-dark-100);
+  --nile-hero-color-bg-from-gradient: var(--nile-colors-blue-100);
   --nile-form-help-text-line-height: 12px;
   --nile-form-help-text-font-size: 12px;
-  --nile-form-help-text-color: #7f7f7f;
+  --nile-form-help-text-color: var(--nile-colors-dark-500);
   --nile-form-error-text-line-height: 12px;
   --nile-form-error-text-font-size: 12px;
-  --nile-form-error-text-color: #A4121C;
+  --nile-form-error-text-color: var(--nile-colors-red-700);
   --nile-font-weight-semi-bold: 600;
   --nile-font-weight-regular: 400;
   --nile-font-weight-medium: 500;
@@ -264,30 +264,30 @@
   --nile-colors-blue-400: #A5D3F3;
   --nile-colors-blue-100: #F5FAFE;
   --nile-checkbox-color-outline-standard: transparent;
-  --nile-checkbox-color-border-standard: #CBD2E1;
-  --nile-checkbox-color-border-hover: #344FA3;
-  --nile-checkbox-color-border-checked-standard: #344FA3;
-  --nile-checkbox-color-border-checked-hover: #002f53;
-  --nile-checkbox-color-background-standard: #FFFFFF;
-  --nile-checkbox-color-background-hover: #F0F4FF;
-  --nile-checkbox-color-background-checked-standard: #344FA3;
-  --nile-checkbox-color-background-checked-hover: #002f53;
+  --nile-checkbox-color-border-standard: var(--nile-colors-neutral-500);
+  --nile-checkbox-color-border-hover: var(--nile-colors-primary-600);
+  --nile-checkbox-color-border-checked-standard: var(--nile-colors-primary-600);
+  --nile-checkbox-color-border-checked-hover: var(--nile-colors-primary-900);
+  --nile-checkbox-color-background-standard: var(--nile-colors-white-base);
+  --nile-checkbox-color-background-hover: var(--nile-colors-primary-100);
+  --nile-checkbox-color-background-checked-standard: var(--nile-colors-primary-600);
+  --nile-checkbox-color-background-checked-hover: var(--nile-colors-primary-900);
   --nile-card-footer-padding: 9px 18px 9px 18px;
   --nile-card-footer-border-width: 1px 1px 1px 1px;
   --nile-card-footer-border-radius: 0 0 4px 4px;
-  --nile-card-footer-border-color: #C7CED4;
-  --nile-card-footer-background-color: #fafafa;
+  --nile-card-footer-border-color: var(--nile-colors-neutral-500);
+  --nile-card-footer-background-color: var(--nile-colors-neutral-100);
   --nile-card-color-border: #475467;
   --nile-card-box-shadow: 0px 0px 0px 0px;
-  --nile-button-toggle-text-color-standard: #000;
-  --nile-button-toggle-text-color-hover: #000;
+  --nile-button-toggle-text-color-standard: var(--nile-colors-dark-900);
+  --nile-button-toggle-text-color-hover: var(--nile-colors-dark-900);
   --nile-button-toggle-color-background-non-active-standard: #e5e9eb;
-  --nile-button-toggle-color-background-non-active-hover: #FAFAFA;
-  --nile-button-toggle-color-background-non-active-disabled: #FFFFFF;
-  --nile-button-toggle-color-background-active-standard: #c7ced4;
-  --nile-button-toggle-color-background-active-hover: #c7ced4;
+  --nile-button-toggle-color-background-non-active-hover: var(--nile-colors-neutral-100);
+  --nile-button-toggle-color-background-non-active-disabled: var(--nile-colors-white-base);
+  --nile-button-toggle-color-background-active-standard: var(--nile-colors-neutral-500);
+  --nile-button-toggle-color-background-active-hover: var(--nile-colors-neutral-500);
   --nile-button-toggle-color-background-active-disabled: #F9FAFB;
-  --nile-button-toggle-border-color: #ccc;
+  --nile-button-toggle-border-color: var(--nile-colors-neutral-500);
   --nile-breakpoint-xlarge: 85rem; /* 1360px */
   --nile-breakpoint-small: 22.5rem; /* 360px */
   --nile-breakpoint-medium: 48rem; /* 768px */
@@ -302,20 +302,20 @@
   --nile-badge-color-pill-outline-grayblue: #3e4784;
   --nile-badge-color-pill-outline-gray: #475467;
   --nile-badge-color-pill-outline-error: #d92d20;
-  --nile-badge-color-pill-outline-brand: #005ea6;
+  --nile-badge-color-pill-outline-brand: var(--nile-colors-primary-600);
   --nile-badge-color-pill-outline-bluelight: #0086c9;
   --nile-badge-color-pill-outline-blue: #1570ef;
-  --nile-badge-color-font-warning: #000;
-  --nile-badge-color-font-success: #000;
+  --nile-badge-color-font-warning: var(--nile-colors-dark-900);
+  --nile-badge-color-font-success: var(--nile-colors-dark-900);
   --nile-badge-color-font-purple: #5925dc;
-  --nile-badge-color-font-primary: #fff;
+  --nile-badge-color-font-primary: var(--nile-colors-white-base);
   --nile-badge-color-font-pink: #c11574;
   --nile-badge-color-font-orange: #b93815;
   --nile-badge-color-font-indigo: #3538cd;
   --nile-badge-color-font-grayblue: #363f72;
   --nile-badge-color-font-gray: #344054;
-  --nile-badge-color-font-error: #000;
-  --nile-badge-color-font-brand: #005291;
+  --nile-badge-color-font-error: var(--nile-colors-dark-900);
+  --nile-badge-color-font-brand: var(--nile-colors-primary-700);
   --nile-badge-color-font-bluelight: #026aa2;
   --nile-badge-color-font-blue: #175cd3;
   --nile-badge-color-border-width: 0px;
@@ -331,18 +331,18 @@
   --nile-badge-color-border-color-brand: #b5c9e0;
   --nile-badge-color-border-color-bluelight: #b9e6fe;
   --nile-badge-color-border-color-blue: #b2ddff;
-  --nile-badge-color-background-warning: #f3e0a5;
-  --nile-badge-color-background-success: #a5f3e1;
+  --nile-badge-color-background-warning: var(--nile-colors-yellow-400);
+  --nile-badge-color-background-success: var(--nile-colors-green-400);
   --nile-badge-color-background-purple: #f4f3ff;
-  --nile-badge-color-background-primary: #005ea6;
+  --nile-badge-color-background-primary: var(--nile-colors-primary-600);
   --nile-badge-color-background-pink: #fdf2fa;
   --nile-badge-color-background-orange: #fef6ee;
   --nile-badge-color-background-normal: #e5e9eb;
-  --nile-badge-color-background-info: #a5d3f3;
+  --nile-badge-color-background-info: var(--nile-colors-blue-400);
   --nile-badge-color-background-indigo: #eef4ff;
   --nile-badge-color-background-grayblue: #f8f9fc;
   --nile-badge-color-background-gray: #f9fafb;
-  --nile-badge-color-background-error: #f3a5aa;
+  --nile-badge-color-background-error: var(--nile-colors-red-400);
   --nile-badge-color-background-brand: #eaf0f8;
   --nile-badge-color-background-bluelight: #f0f9ff;
   --nile-badge-color-background-blue: #eff8ff;