novo-elements 13.1.0 → 13.2.0-next.2

package/elements/chips/RowChips.scss

@@ -24,7 +24,7 @@
       align-items: center;
       background: transparent !important;
       border: none;
-      border-bottom: 1px dashed lighten($dark, 30%);
+      border-bottom: 1px dashed brightenLive('--color-dark', 30);
       border-radius: 0;
       outline: none;
       height: 2em;
@@ -62,7 +62,7 @@
       }
     }
     i.bhi-delete-o {
-      color: $negative;
+      color: var(--color-negative);
     }
   }
   .novo-chip.novo-row-chip {

package/elements/chips/index.d.ts

@@ -515,6 +515,8 @@ declare class NovoChipInput implements NovoChipTextControl, OnChanges, OnDestroy
     chipEnd: EventEmitter<NovoChipInputEvent>;
     /** The input's placeholder text. */
     placeholder: string;
+    /** Setting to false prevents input from being cleared when focus is lost. */
+    clearOnBlur: boolean;
     /** Unique id for the input. */
     id: string;
     /** Whether the input is disabled. */
@@ -548,7 +550,7 @@ declare class NovoChipInput implements NovoChipTextControl, OnChanges, OnDestroy
     static readonly ngAcceptInputType_addOnBlur: BooleanInput;
     static readonly ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoChipInput, [null, null, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NovoChipInput, "input[novoChipInput]", ["novoChipInput", "novoChipInputFor"], { "addOnBlur": { "alias": "novoChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "novoChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "novoChipInputTokenEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NovoChipInput, "input[novoChipInput]", ["novoChipInput", "novoChipInputFor"], { "addOnBlur": { "alias": "novoChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "novoChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearOnBlur": { "alias": "clearOnBlur"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "novoChipInputTokenEnd"; }, never, never, false, never>;
 }
 
 declare class NovoChipsElement implements OnInit, ControlValueAccessor {

package/elements/color-picker/color-picker.component.scss

@@ -9,7 +9,7 @@
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   transform: translateY(0%);
   transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
-  border-radius: 0.4rem;
+  border-radius: var(--border-radius-sm);
   width: 18rem;
 
   .novo-color-preview {

package/elements/common/index.d.ts

@@ -230,6 +230,13 @@ declare class BorderDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<BorderDirective, "[border], [bb], [borderBottom], [bt], [borderTop], [bl], [borderLeft], [br], [borderRight], [bx], [borderX], [by], [borderY]", never, { "borderStyle": { "alias": "borderStyle"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "border": { "alias": "border"; "required": false; }; "borderLeft": { "alias": "borderLeft"; "required": false; }; "bl": { "alias": "bl"; "required": false; }; "borderRight": { "alias": "borderRight"; "required": false; }; "br": { "alias": "br"; "required": false; }; "borderTop": { "alias": "borderTop"; "required": false; }; "bt": { "alias": "bt"; "required": false; }; "borderBottom": { "alias": "borderBottom"; "required": false; }; "bb": { "alias": "bb"; "required": false; }; "borderX": { "alias": "borderX"; "required": false; }; "bx": { "alias": "bx"; "required": false; }; "borderY": { "alias": "borderY"; "required": false; }; "by": { "alias": "by"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/**
+ * Novo theme generations named `bh<year>-<mode>`
+ */
+type ThemeName = 'bh2022-light' | 'bh2022-dark' | 'bh2026-light' | 'bh2026-dark';
+declare const DEFAULT_THEME: ThemeName;
+/** Map any stored/legacy themeName onto a canonical current name. */
+declare function normalizeThemeName(stored?: string): ThemeName;
 declare class NovoThemeOptions {
     themeName: string;
 }
@@ -241,7 +248,7 @@ declare class NovoTheme {
     private _defaultTheme;
     private _currentTheme;
     onThemeChange: EventEmitter<ThemeChangeEvent>;
-    /** Name of the theme being used. defaults to `modern-light` */
+    /** Name of the theme being used. defaults to `bh2022-light`. */
     get themeName(): string;
     set themeName(value: string);
     use(options: NovoThemeOptions): Observable<any>;
@@ -249,6 +256,7 @@ declare class NovoTheme {
      * Changes the current theme
      */
     private changeTheme;
+    private applyThemeToDom;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoTheme, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NovoTheme>;
 }
@@ -741,5 +749,5 @@ type HasTabIndexCtor = Constructor<HasTabIndex>;
 /** Mixin to augment a directive with a `tabIndex` property. */
 declare function mixinTabIndex<T extends AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;
 
-export { AccentColorDirective, BackgroundColorDirective, BorderDirective, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex };
-export type { AbstractConstructor, CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanRequire, CanRequireCtor, CanSize, CanSizeCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, Constructor, ElementSize, HasElementRef, HasErrorState, HasOverlay, HasOverlayCtor, HasTabIndex, HasTabIndexCtor, NovoOptionParentComponent, NovoPseudoCheckboxShape, NovoPseudoCheckboxState, ThemeChangeEvent, ThemePalette, TypographyLength, TypographySize, TypographyWeight };
+export { AccentColorDirective, BackgroundColorDirective, BorderDirective, DEFAULT_THEME, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, normalizeThemeName };
+export type { AbstractConstructor, CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanRequire, CanRequireCtor, CanSize, CanSizeCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, Constructor, ElementSize, HasElementRef, HasErrorState, HasOverlay, HasOverlayCtor, HasTabIndex, HasTabIndexCtor, NovoOptionParentComponent, NovoPseudoCheckboxShape, NovoPseudoCheckboxState, ThemeChangeEvent, ThemeName, ThemePalette, TypographyLength, TypographySize, TypographyWeight };

package/elements/common/option/option.component.scss

@@ -1,7 +1,8 @@
 @import "../../../styles/variables.scss";
 @import "../typography/text.mixins.scss";
-
-$novo-menu-side-padding: 0.5rem;
+:root {
+  --menu-side-padding: var(--spacing-sm);
+}
 
 .novo-option {
   @include novo-body-text();
@@ -20,43 +21,43 @@ $novo-menu-side-padding: 0.5rem;
   -webkit-tap-highlight-color: transparent;
 
   &:hover:not(.novo-option-inert) {
-    background: var(--background-main, rgba($ocean, 0.1));
+    background: var(--background-main, rgb(from var(--color-positive) r g b / 0.1));
   }
 
   &:active:not(.novo-option-inert),
   &.novo-active:not(.novo-option-inert) {
-    background: rgba($ocean, 0.3);
+    background: rgb(from var(--color-positive) r g b / 0.3);
   }
 
   &.novo-selected, .add-icon {
-    color: $positive;
+    color: var(--color-positive);
   }
 
   &.disabled,
   &[aria-disabled="true"] {
     cursor: not-allowed;
-    color: $disabled;
+    color: var(--color-disabled);
     &:hover {
-      background: rgba($negative, 10%);
+      background: rgba(var(--color-negative), 10%);
     }
   }
 
   .novo-optgroup &:not(.novo-option-multiple) {
-    padding-left: $novo-menu-side-padding * 2;
+    padding-left: calc(var(--menu-side-padding) * 2);
 
     [dir="rtl"] & {
-      padding-left: $novo-menu-side-padding;
-      padding-right: $novo-menu-side-padding * 2;
+      padding-left: var(--menu-side-padding);
+      padding-right: calc(var(--menu-side-padding) * 2);
     }
   }
 
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.novo-accent-#{$name} {
-      border-left: 4px solid $color;
+      border-left: 4px solid getCssVarname($name);
     }
     &.novo-fill-#{$name}:not(.novo-option-inert) {
       color: getContrastColor($name);
-      background: $color;
+      background-color: getCssVarname($name);
       &:hover,
       &:focus {
         background: getTintColor($name);
@@ -80,11 +81,16 @@ $novo-menu-side-padding: 0.5rem;
 }
 
 .novo-option-pseudo-checkbox {
-  $margin: calc($novo-menu-side-padding / 2);
-  margin-right: $margin;
+  margin-inline-end: calc(var(--menu-side-padding) / 2);
+}
 
-  [dir="rtl"] & {
-    margin-left: $margin;
-    margin-right: 0;
+// bh2026: white dropdown bg needs explicit hover — --background-main resolves to white
+[data-theme='bh2026'] .novo-option {
+  &:hover:not(.novo-option-inert) {
+    background: var(--color-background-subtle);
+  }
+  &:active:not(.novo-option-inert),
+  &.novo-active:not(.novo-option-inert) {
+    background: var(--color-background-subtle-hover);
   }
 }

package/elements/common/selection/pseudo-checkbox/pseudo-checkbox.component.scss

@@ -23,12 +23,12 @@ $_novo-pseudo-checkmark-size: $novo-checkbox-size - (2 * $_novo-pseudo-checkbox-
 
   &.novo-pseudo-checkbox-checked,
   &.novo-pseudo-checkbox-indeterminate {
-    color: $ocean;
+    color: var(--color-positive);
     animation: iconEnter 160ms ease-in-out;
   }
 
   i {
-    font-size: 1.4rem;
+    font-size: var(--font-size-novo-default);
     line-height: 1rem;
   }
 }

package/elements/common/typography/text.mixins.scss

@@ -2,7 +2,7 @@
 
 @mixin text-disabled($property) {
   pointer-events: none;
-  color: $disabled;
+  color: var(--color-disabled);
 }
 
 @mixin base-text-rules() {
@@ -37,28 +37,28 @@
     font-size: inherit;
   }
   &.text-size-body {
-    font-size: $font-size-body;
+    font-size: var(--font-size-body);
   }
   &.text-size-xs {
-    font-size: $font-size-xs;
+    font-size: var(--font-size-xs);
   }
   &.text-size-sm {
-    font-size: $font-size-sm;
+    font-size: var(--font-size-sm);
   }
   &.text-size-md {
-    font-size: $font-size-md;
+    font-size: var(--font-size-md);
   }
   &.text-size-lg {
-    font-size: $font-size-lg;
+    font-size: var(--font-size-lg);
   }
   &.text-size-xl {
-    font-size: $font-size-xl;
+    font-size: var(--font-size-xl);
   }
   &.text-size-2xl {
-    font-size: $font-size-2xl;
+    font-size: var(--font-size-2xl);
   }
   &.text-size-3xl {
-    font-size: $font-size-3xl;
+    font-size: var(--font-size-3xl);
   }
   &.text-size-smaller {
     font-size: 0.8em;
@@ -71,31 +71,31 @@
 @mixin text-weights() {
   // Font Weight Utils
   &.text-weight-hairline {
-    font-weight: 100;
+    font-weight: var(--font-weight-hairline);
   }
   &.text-weight-thin {
-    font-weight: 200;
+    font-weight: var(--font-weight-thin);
   }
   &.text-weight-light {
-    font-weight: 300;
+    font-weight: var(--font-weight-light);
   }
   &.text-weight-normal {
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
   }
   &.text-weight-medium {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
   }
   &.text-weight-semibold {
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold);
   }
   &.text-weight-bold {
-    font-weight: 700;
+    font-weight: var(--font-weight-bold);
   }
   &.text-weight-extrabold {
-    font-weight: 800;
+    font-weight: var(--font-weight-extrabold);
   }
   &.text-weight-heavy {
-    font-weight: 900;
+    font-weight: var(--font-weight-heavy);
   }
   &.text-weight-lighter {
     font-weight: lighter;
@@ -120,7 +120,7 @@
 @mixin text-colors() {
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.text-color-#{$name} {
-      color: $color;
+      color: getCssVarname($name)
     }
   }
 }

package/elements/data-table/data-table.component.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variables.scss";
 @import "../../styles/reset";
 
-$table-bg-accent: var(--background-bright, $off-white);
+$table-bg-accent: var(--background-bright, $color-off-white);
 $novo-row-horizontal-padding: 20px;
 $table-header-font-weight: 400;
 $breakpoint: 1000px;
@@ -31,10 +31,10 @@ cdk-table {
       .novo-data-table-dropdown-cell,
       .novo-data-table-expand-cell,
       .novo-data-table-checkbox-cell {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
       + .novo-data-table-detail-row {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
     }
     + .novo-data-table-detail-row {
@@ -55,10 +55,10 @@ cdk-table {
       .novo-data-table-dropdown-cell,
       .novo-data-table-expand-cell,
       .novo-data-table-checkbox-cell {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
       + .novo-data-table-detail-row {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
     }
     + .novo-data-table-detail-row {
@@ -111,14 +111,14 @@ cdk-table {
   &.resizable {
     padding-right: 0;
     &:hover {
-      background-color: var(--background-muted, $neutral);
+      background-color: var(--background-muted, --color-neutral);
     }
     .data-table-header-resizable {
       height: 100%;
 
       span {
         cursor: ew-resize;
-        background-color: var(--border, $neutral);
+        background-color: var(--border, --color-neutral);
         width: 1px;
         margin: 0 4px;
         display: block;
@@ -169,7 +169,7 @@ cdk-table {
     color: var(--text-muted);
     background: transparent;
     pointer-events: all;
-    margin-left: 0.5rem;
+    margin-left: var(--spacing-sm);
     line-height: 1em;
     outline: none;
     &:hover {
@@ -181,18 +181,18 @@ cdk-table {
   }
 
   button.active {
-    color: $white;
-    background: $positive;
+    color: var(--color-contrast-positive);
+    background: var(--color-positive);
     &:hover,
     &:active,
     &:focus,
     &:visited {
-      background: $positive !important;
+      background: var(--color-positive) !important;
     }
   }
   &.clickable {
     cursor: pointer;
-    color: $company;
+    color: var(--color-company);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -238,7 +238,7 @@ cdk-table {
     cursor: pointer;
     font-size: 1.2em;
     padding: 0.5em;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     &.disabled {
       pointer-events: none;
       opacity: 0.7;
@@ -333,7 +333,7 @@ cdk-table {
       }
       &.bhi-box-yes,
       &.bhi-checkbox-filled {
-        color: $positive;
+        color: var(--color-positive);
       }
     }
   }
@@ -358,7 +358,7 @@ novo-data-table {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    border-bottom: 1px solid var(--border, $off-white);
+    border-bottom: 1px solid var(--border, $color-off-white);
     &.pagination-footer {
       justify-content: space-between;
     }
@@ -465,7 +465,7 @@ novo-data-table {
     display: flex;
     flex: 1;
     .novo-data-table-custom-filter {
-      border-right: 1px solid var(--border, $off-white);
+      border-right: 1px solid var(--border, $color-off-white);
       novo-date-picker {
         .calendar {
           box-shadow: none;
@@ -515,7 +515,7 @@ novo-data-table {
     align-items: center;
     > div,
     div.novo-data-table-footer-cell {
-      border-top: 1px solid var(--border, $off-white);
+      border-top: 1px solid var(--border, $color-off-white);
       flex: 1;
       min-width: 200px;
       display: flex;
@@ -553,7 +553,7 @@ novo-data-table {
     overflow-x: hidden;
   }
   .footer {
-    border-top: 1px solid var(--border, $off-white);
+    border-top: 1px solid var(--border, $color-off-white);
     padding: 5px 10px;
     display: flex;
     justify-content: flex-end;
@@ -581,10 +581,10 @@ novo-data-table {
     height: 100%;
     min-height: 200px;
     width: 100%;
-    background: #fff;
+    background: var(--background-bright);
     padding: 0 !important;
     .back-link {
-      color: $positive;
+      color: var(--color-positive);
       line-height: 3em;
       font-size: 0.9em;
       padding-left: 5px;
@@ -603,17 +603,102 @@ novo-data-table {
     }
   }
   span.error-text {
-    color: $negative;
+    color: var(--color-negative);
     position: relative;
     left: 10px;
     top: -17px;
     font-size: x-small;
   }
   .filter-null-results {
-    background-color: $white;
+    background-color: var(--background-body);
     text-align: center;
-    color: darken($light, 15%);
+    color: darkenLive('--color-light', 15);
     background: transparent;
     font-weight: 500;
   }
 }
+
+// bh2026: banded rows, horizontal borders, modern spacing
+[data-theme='bh2026'] {
+  .novo-data-table-header-cell,
+  .novo-data-table-header-cell > label {
+    font-weight: var(--typography-font-weight-600);
+    font-size: var(--font-size-caption);
+    color: var(--color-text-subtle);
+  }
+
+  .novo-data-table-row,
+  .novo-data-table-header-row {
+    border-bottom: var(--border-width-border-default) solid var(--color-border-subtle);
+  }
+
+  .novo-data-table-cell,
+  .novo-data-table-header-cell {
+    padding: var(--spacing-padding-sm) var(--spacing-padding-md);
+    color: var(--color-text-body);
+  }
+
+  // Restore zero vertical padding on action/control cells — the general rule above overrides
+  // the base .button-cell / .dropdown-cell padding: 0 5px, putting 8px above/below the button.
+  .novo-data-table-cell {
+    &.button-cell,
+    &.dropdown-cell,
+    &.expand-cell,
+    &.checkbox-cell {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .novo-data-table-cell.clickable {
+    color: var(--color-text-link);
+  }
+
+  cdk-table {
+    > .novo-data-table-row:nth-of-type(odd) {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-background-muted);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--color-background-muted);
+      }
+    }
+    > .novo-data-table-row:nth-of-type(even) {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--background-body);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--background-body);
+      }
+    }
+    > .novo-data-table-row:hover {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-background-subtle);
+      }
+    }
+    > .novo-data-table-row.active {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-utility-blue-100);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--color-utility-blue-100);
+      }
+    }
+  }
+}

package/elements/data-table/index.d.ts

@@ -47,6 +47,7 @@ interface IDataTablePreferences {
     hasUnsavedChanges?: boolean;
     unsavedChanges?: any;
     useBooleanKeywords?: boolean;
+    cardView?: boolean;
 }
 interface AutobuildEntityData {
     id: number;
@@ -662,7 +663,7 @@ type ListInteractionDictionary = {
     [key: string]: ListInteraction[];
 };
 
-type DataTablePreferenceUpdateSrc = 'columndrag' | 'input' | 'statesortchange' | 'pagination';
+type DataTablePreferenceUpdateSrc = 'columndrag' | 'input' | 'statesortchange' | 'pagination' | 'other';
 interface IDataTablePreferencesChangeEvent extends IDataTablePreferences {
     eventSrc: DataTablePreferenceUpdateSrc;
 }

package/elements/data-table/pagination/data-table-pagination.component.scss

@@ -67,7 +67,7 @@ $breakpoint: 1000px;
     }
     h5.rows {
       padding: 0;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       opacity: 0.75;
       letter-spacing: 0.1px;
     }
@@ -105,24 +105,24 @@ $breakpoint: 1000px;
         width: 2.4rem;
         height: 2.4rem;
         font-size: var(--font-size-text);
-        border-radius: 2px;
+        border-radius: var(--border-radius-xsm, 2px);
         list-style-type: none;
         cursor: pointer;
-        color: $company;
+        color: var(--color-company);
         &.disabled {
           opacity: 0.3;
           pointer-events: none;
         }
       }
       .page.active {
-        color: $company;
+        color: var(--color-company);
         background-color: rgba($black, 0.1);
         opacity: 1;
       }
     }
     .novo-data-table-of-total-amount {
-      color: $slate;
-      font-size: 12px;
+      color: var(--color-slate);
+      font-size: var(--font-size-sm);
     }
   }
 }