refactor(tailwind): update tailwind samples after refactoring

didimmova · didimmova · commit a5a8d836479a · 2025-09-17T10:07:06.000+03:00
diff --git a/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html b/src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html
@@ -7,7 +7,7 @@
       <div class="wrapper">
         <div>
           <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge-background-[#FF4E00] ![--border-radius:4px]"></igx-badge>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![background:#FF4E00] ![--border-radius:4px]"></igx-badge>
         </div>
         <div class="contact-container">
           <span class="contact-name">{{ member.name }}</span>
diff --git a/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html b/src/app/data-display/chip/chip-tailwind-styling/chip-tailwind-styling.component.html
@@ -1,7 +1,7 @@
 <igx-chips-area (reorder)="chipsOrderChanged($event)">
   @for (chip of chipList; track chip) {
     <igx-chip
-      class="!light-chip-color-[#99BAA6]
+      class="!light-chip ![--background:#99BAA6]
       ![--remove-icon-color:#C92828]"
       [id]="chip.id"
       [selectable]="true"
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
@@ -1 +1 @@
-<igx-icon class="!light-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>
+<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>
diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-style/button-group-tailwind-style.component.html
@@ -1,5 +1,5 @@
 <article class="sample-column">
-    <igx-buttongroup class="!light-button-group-color-[#7B9E89] ![--shadow:var(--ig-elevation-4)]">
+    <igx-buttongroup class="!light-button-group ![--item-background:#7B9E89]">
         <button igxButton igxRipple="white">Sofia</button>
         <button igxButton igxRipple="white">London</button>
         <button igxButton igxRipple="white">New York</button>
diff --git a/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html b/src/app/data-entries/buttons/buttons-tailwind-style/buttons-tailwind-style.component.html
@@ -1,14 +1,14 @@
 <div class="buttons-sample">
   <div class="button-sample">
-    <button igxButton="flat" class="!light-flat-button-color-[#7B9E89]">Flat Button</button>
+    <button igxButton="flat" class="!light-flat-button ![--foreground:#7B9E89]">Flat Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="contained" class="!light-contained-button-color-[#7B9E89] ![--active-background:#4F6A5A]">Contained Button</button>
+    <button igxButton="contained" class="!light-contained-button ![--background:#7B9E89]">Contained Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="outlined" class="!light-outlined-button-color-[#7B9E89]">Outlined Button</button>
+    <button igxButton="outlined" class="!light-outlined-button ![--foreground:#7B9E89]">Outlined Button</button>
   </div>
   <div class="button-sample">
-    <button igxButton="fab" class="!light-fab-button-color-[#7B9E89]">Fab Button</button>
+    <button igxButton="fab" class="!light-fab-button ![--background:#7B9E89]">Fab Button</button>
   </div>
 </div>
diff --git a/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html b/src/app/data-entries/checkbox/checkbox-tailwind-styling/checkbox-tailwind-styling.component.html
@@ -1,3 +1,3 @@
-<igx-checkbox class="!light-checkbox-color-[#7B9E89] ![--border-radius:4px]" [checked]="true">
+<igx-checkbox class="!light-checkbox ![--empty-color:#7B9E89] ![--fill-color:#7B9E89]" [checked]="true">
     Styled checkbox
 </igx-checkbox>
diff --git a/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html b/src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html
@@ -1,16 +1,16 @@
 <div class="wrapper">
     <div class="button-sample">
-        <button class="!light-flat-icon-button-color-[#7B9E89]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#7B9E89]" igxIconButton="flat">
             <igx-icon>home</igx-icon>
         </button>
     </div>
     <div class="button-sample">
-        <button class="!light-contained-icon-button-color-[#7B9E89] ![--active-background:#4F6A5A]" igxIconButton="contained">
+        <button class="!light-contained-icon-button ![--background:#7B9E89]" igxIconButton="contained">
             <igx-icon>home</igx-icon>
         </button>
     </div>
     <div class="button-sample">
-        <button class="!light-outlined-icon-button-color-[#7B9E89]" igxIconButton="outlined">
+        <button class="!light-outlined-icon-button ![--foreground:#7B9E89]" igxIconButton="outlined">
             <igx-icon>home</igx-icon>
         </button>
     </div>
diff --git a/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html b/src/app/data-entries/input-group/input-group-tailwind-styling/input-group-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <article class="sample-column">
-    <igx-input-group class="!light-input-box-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
+    <igx-input-group class="!light-input-group ![--box-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="box">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Phone</label>
         <input type="tel" igxInput name="phone" />
@@ -9,7 +9,7 @@
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
 
-    <igx-input-group class="!light-input-border-color-[#7B9E89]" type="border">
+    <igx-input-group class="!light-input-group ![--border-color:#7B9E89]" type="border">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Phone</label>
         <input type="tel" igxInput name="phone" />
@@ -19,7 +19,7 @@
         <igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
     </igx-input-group>
 
-    <igx-input-group class="!light-input-search-background-[#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
+    <igx-input-group class="!light-input-group ![--search-background:#A3C7B2] ![--focused-secondary-color:#3A5444]" type="search">
         <igx-prefix>+359</igx-prefix>
         <label igxLabel for="phone">Search</label>
         <input type="tel" igxInput name="phone" />
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html
@@ -1,7 +1,7 @@
 <div class="radio-wrapper">
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
-  <igx-radio class="!light-radio-color-[#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option1">New York</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option2">London</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option3">Sofia</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
+  <igx-radio class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]" [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
 </div>
diff --git a/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html b/src/app/data-entries/select/select-tailwind-styling/select-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="select-wrapper">
-  <igx-select class="!light-select-toggle-button-[#99BAA6] ![toggle-button-background-focus:#7B9E89]" [overlaySettings]="customOverlaySettings">
+  <igx-select class="!light-select ![--toggle-button-background:#99BAA6]" [overlaySettings]="customOverlaySettings">
     <label igxLabel>Select An Item</label>
     @for (item of items; track item) {
       <igx-select-item [value]="item">
diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.html
@@ -1,6 +1,6 @@
 <div class="switch-wrapper">
   @for (setting of settings; track setting) {
-    <igx-switch class="!light-switch-color-[#7B9E89] ![--label-color:#4F6A5A]" [checked]="setting.state">
+    <igx-switch class="!light-switch ![--track-off-color:#7B9E89] ![--track-on-color:#7B9E89]" [checked]="setting.state">
       {{ setting.name }}
     </igx-switch>
   }
diff --git a/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html b/src/app/interactions/query-builder/query-builder-tailwind-style/query-builder-tailwind-style.component.html
@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <igx-query-builder class="!light-query-builder-background-[#90B69F] ![--label-foreground:#121E17]" #queryBuilder
+    <igx-query-builder class="!light-query-builder ![--background:#90B69F]" #queryBuilder
         [entities]="entities">
     </igx-query-builder>
 </div>
diff --git a/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html b/src/app/interactions/slider/slider-tailwind-styling-sample/slider-tailwind-styling.component.html
@@ -1,7 +1,6 @@
 <div class="container">
     <igx-slider
-        class="!light-slider-color-[#7B9E89]
-        ![--track-step-color:#B9375D]"
+        class="!light-slider ![--thumb-color:#7B9E89]"
         [step]="10"
         [maxValue]="100"
         [primaryTicks]="3"
diff --git a/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html b/src/app/interactions/tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component.html
@@ -4,7 +4,7 @@
 </igx-avatar>
 
 <div #outlet="overlay-outlet" igxOverlayOutlet>
-    <div class="!light-tooltip-background-[#90B69F] ![--border-radius:6px]" #tooltipRef="tooltip" igxTooltip>
+    <div class="!light-tooltip ![--background:#90B69F]" #tooltipRef="tooltip" igxTooltip>
         Her name is Madelyn James
     </div>
 </div>
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-avatar class="!light-avatar-background-[#FF4E00] ![--color:#011627]" initials="DY" shape="rounded"></igx-avatar>
+<igx-avatar class="!light-avatar ![background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
@@ -1,5 +1,5 @@
 <div class="sample-column card-wrapper">
-  <igx-card class="!light-card-background-[#193625] ![--subtitle-text-color:#ECAA53]" elevated>
+  <igx-card class="!light-card ![--background:#193625] ![--subtitle-text-color:#ECAA53]" elevated>
     <igx-card-media height="180px">
       <img [src]="card.imageUrl">
     </igx-card-media>
diff --git a/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html b/src/app/layouts/expansion-panel/expansion-tailwind-styling/expansion-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="sample-holder">
-    <igx-expansion-panel class="my-expansion-panel !light-expansion-panel-header-background-[#4F6A5A] ![--body-background:#A3C7B2]">
+    <igx-expansion-panel class="my-expansion-panel !light-expansion-panel ![--header-background:#4F6A5A] ![--body-background:#A3C7B2]">
         <igx-expansion-panel-header [iconPosition]="'right'">
             <igx-expansion-panel-title>
                 Golden Retriever
diff --git a/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html b/src/app/layouts/splitter/splitter-tailwind-styling-sample/splitter-tailwind-styling-sample.component.html
@@ -1,4 +1,4 @@
-<igx-splitter class="!light-splitter-color-[#7B9E89] ![--size:7px]" style='height: 100vh;' [style.width]='"100%"'>
+<igx-splitter class="!light-splitter ![--bar-color:#7B9E89]" style='height: 100vh;' [style.width]='"100%"'>
     <igx-splitter-pane>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim.
diff --git a/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html b/src/app/layouts/stepper/stepper-tailwind-styling-sample/stepper-tailwind-styling-sample.component.html
@@ -1,4 +1,4 @@
-<igx-stepper class="!light-stepper-step-background-[#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
+<igx-stepper class="!light-stepper ![--step-background:#7B9E89] ![--border-radius-step-header:6px]" #stepper (activeStepChanging)="activeStepChanging($event)">
     <ng-template igxStepActiveIndicator>
         <igx-icon>edit</igx-icon>
     </ng-template>
diff --git a/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html b/src/app/layouts/tabbar/tabbar-tailwind-style/tabbar-tailwind-style.component.html
@@ -1,4 +1,4 @@
-<igx-bottom-nav class="!light-bottom-nav-background-[#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
+<igx-bottom-nav class="!light-bottom-nav ![--background:#011627] ![--icon-selected-color:#FF8040] ![--label-selected-color:#FF8040]">
   <igx-bottom-nav-item>
     <igx-bottom-nav-header>
       <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html
@@ -1,4 +1,4 @@
-<igx-tabs class="!light-tabs-background-[#769683] ![--item-active-icon-color:#FFD640] ![--item-active-color:#FFD640]">
+<igx-tabs class="!light-tabs ![--item-background:#011627] ![--item-active-icon-color:#FF8040] ![--item-active-color:#FF8040]">
     <igx-tab-item>
         <igx-tab-header>
             <igx-icon igxTabHeaderIcon>library_music</igx-icon>
diff --git a/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html b/src/app/lists/combo/combo-tailwind-styling/combo-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="control-wrapper">
-    <igx-combo class="!light-combo-toggle-button-[#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
+    <igx-combo class="!light-combo ![--toggle-button-background:#99BAA6] ![--clear-button-foreground:#99BAA6]" [width]="'430px'" [data]="weaponsData" [displayKey]="'field'" [valueKey]="'field'" [overlaySettings]="{outlet: elem}"
         [groupKey]="'weaponRange'" placeholder="Pick up two weapons" searchPlaceholder="Search..."
         [itemsMaxHeight]="255" (selectionChanging)="setWeaponsLimit($event)">
     </igx-combo>
diff --git a/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html b/src/app/lists/list/list-tailwind-styling/list-tailwind-styling.component.html
@@ -1,5 +1,5 @@
 <div class="list-sample">
-  <igx-list class="!light-list-background-[#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
+  <igx-list class="!light-list ![--background:#81B698] ![--item-background:#A3C7B2]" #mainIgxList>
     <igx-list-item [isHeader]="true">Contacts</igx-list-item>
     @for (contact of contacts; track contact) {
       <igx-list-item #item>
diff --git a/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html b/src/app/lists/tree/tree-tailwind-styling/tree-tailwind-styling.component.html
@@ -1,10 +1,10 @@
 <div class="sample-wrapper">
   <igx-tree class="tree-root">
     @for (type of data; track type) {
-      <igx-tree-node class="!light-tree-background-[#81B698] ![--border-color:#D07A7A]">
+      <igx-tree-node class="!light-tree ![--background:#81B698]">
         {{ type.Name }}
         @for (value of type.Children; track value) {
-          <igx-tree-node class="!light-tree-background-[#81B698] ![--border-color:#D07A7A]">
+          <igx-tree-node class="!light-tree ![--background:#81B698]">
             {{ value.Name }}
           </igx-tree-node>
         }
diff --git a/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html b/src/app/menus/navbar/navbar-tailwind-style/navbar-tailwind-style.component.html
@@ -1,18 +1,18 @@
 <div class="sample-column">
-    <igx-navbar class="!light-navbar-background-[#7B9E89] ![--text-color:#121E17]" title="Sample App">
+    <igx-navbar class="!light-navbar ![--background:#7B9E89] ![--text-color:#121E17]" title="Sample App">
         <igx-navbar-action>
-            <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+            <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
                 <igx-icon>menu</igx-icon>
             </button>
         </igx-navbar-action>
 
-        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
             <igx-icon>search</igx-icon>
         </button>
-        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
             <igx-icon>favorite</igx-icon>
         </button>
-        <button class="!light-flat-icon-button-color-[#121E17]" igxIconButton="flat">
+        <button class="!light-flat-icon-button ![--foreground:#121E17]" igxIconButton="flat">
             <igx-icon>more_vert</igx-icon>
         </button>
     </igx-navbar>
diff --git a/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html b/src/app/notifications/snackbar/snackbar-tailwind-style/snackbar-tailwind-style.component.html
@@ -1,7 +1,7 @@
 <button igxButton="contained" (click)="snackbar.open()">Send message</button>
 <div>
   <igx-snackbar
-  class="!light-snackbar-background-[#7B9E89]
+  class="!light-snackbar ![--background:#7B9E89]
   ![--button-color:#DD0D4B]"
   #snackbar
   [autoHide]="false"
diff --git a/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html b/src/app/notifications/toast/toast-tailwind-style/toast-tailwind-style.component.html
@@ -7,5 +7,5 @@
         </div>
     </article>
 
-    <igx-toast class="!light-toast-background-[#90B69F] ![--border-radius:6px]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
+    <igx-toast class="!light-toast ![--background:#90B69F]" #toast [autoHide]="false" [outlet]="elem">This is the toast message.</igx-toast>
 </div>
diff --git a/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html b/src/app/scheduling/calendar/calendar-tailwind-styling-sample/calendar-tailwind-styling-sample.component.html
@@ -1,3 +1,3 @@
 <article class="calendar-wrapper">
-    <igx-calendar class="!light-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
+    <igx-calendar class="!light-calendar ![--header-background:#4F6A5A] ![--content-background:#A3C7B2]" [weekStart]="1"></igx-calendar>
 </article>
diff --git a/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html b/src/app/scheduling/monthpicker/monthpicker-tailwind-styling/monthpicker-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-month-picker class="!light-calendar-accent-color-[#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>
+<igx-month-picker class="!light-calendar ![--header-background:#4F6A5A] ![--content-background:#A3C7B2]" [value]="date"></igx-month-picker>

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<igx-icon class="!light-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>`
	`1`	`+<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>`