@nova-design-system/nova-base 3.1.0 → 3.3.0

package/dist/js/mccs_light.d.ts

@@ -159,6 +159,7 @@ export const ColorFocusBrand : string;
 export const ColorFocusBackground : string;
 export const ColorFocusBackgroundInverted : string;
 export const ColorFocusDestructive : string;
+export const ColorFocusDestructiveInField : string;
 export const ColorFocusSuccess : string;
 export const ColorRainbow1Background : string;
 export const ColorRainbow1Border : string;
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground : string;
 export const ComponentsPopoverBorder : string;
 export const ComponentsPopoverText : string;
 export const ComponentsPopoverSupportingText : string;
+export const ComponentsSliderTrackBackground : string;
+export const ComponentsSliderTrackFilledDefault : string;
+export const ComponentsSliderTrackFilledHover : string;
+export const ComponentsSliderTrackFilledFocus : string;
+export const ComponentsSliderTrackFilledError : string;
+export const ComponentsSliderTrackFilledDisabled : string;
+export const ComponentsSliderTrackFilledReadonly : string;
+export const ComponentsSliderHandlerBackgroundDefault : string;
+export const ComponentsSliderHandlerBackgroundHover : string;
+export const ComponentsSliderHandlerBackgroundFocus : string;
+export const ComponentsSliderHandlerBackgroundError : string;
+export const ComponentsSliderHandlerBackgroundDisabled : string;
+export const ComponentsSliderHandlerBackgroundReadonly : string;
+export const ComponentsSliderHandlerBorderDefault : string;
+export const ComponentsSliderHandlerBorderHover : string;
+export const ComponentsSliderHandlerBorderFocus : string;
+export const ComponentsSliderHandlerBorderError : string;
+export const ComponentsSliderHandlerBorderDisabled : string;
+export const ComponentsSliderHandlerBorderReadonly : string;
 export const ComponentsTooltipBackground : string;
 export const ComponentsTooltipBorder : string;
 export const ComponentsTooltipText : string;

package/dist/js/mccs_light.js

@@ -159,6 +159,7 @@ export const ColorFocusBrand = "#258998";
 export const ColorFocusBackground = "#ffffff";
 export const ColorFocusBackgroundInverted = "#0b0f11";
 export const ColorFocusDestructive = "#da2424";
+export const ColorFocusDestructiveInField = "#da2424";
 export const ColorFocusSuccess = "#34ae3b";
 export const ColorRainbow1Background = "#fdefe2";
 export const ColorRainbow1Border = "#c66a15";
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground = "#ffffff";
 export const ComponentsPopoverBorder = "#e1e4e6";
 export const ComponentsPopoverText = "#34464d";
 export const ComponentsPopoverSupportingText = "#617177";
+export const ComponentsSliderTrackBackground = "#e1e4e6";
+export const ComponentsSliderTrackFilledDefault = "#bac1c4";
+export const ComponentsSliderTrackFilledHover = "#889499";
+export const ComponentsSliderTrackFilledFocus = "#258998";
+export const ComponentsSliderTrackFilledError = "#da2424";
+export const ComponentsSliderTrackFilledDisabled = "#bac1c4";
+export const ComponentsSliderTrackFilledReadonly = "#e1e4e6";
+export const ComponentsSliderHandlerBackgroundDefault = "#ffffff";
+export const ComponentsSliderHandlerBackgroundHover = "#fafbfb";
+export const ComponentsSliderHandlerBackgroundFocus = "#1f717d";
+export const ComponentsSliderHandlerBackgroundError = "#da2424";
+export const ComponentsSliderHandlerBackgroundDisabled = "#f5f6f7";
+export const ComponentsSliderHandlerBackgroundReadonly = "#fafbfb";
+export const ComponentsSliderHandlerBorderDefault = "#ffffff";
+export const ComponentsSliderHandlerBorderHover = "#fafbfb";
+export const ComponentsSliderHandlerBorderFocus = "#1f717d";
+export const ComponentsSliderHandlerBorderError = "#da2424";
+export const ComponentsSliderHandlerBorderDisabled = "#f5f6f7";
+export const ComponentsSliderHandlerBorderReadonly = "#fafbfb";
 export const ComponentsTooltipBackground = "#0b0f11";
 export const ComponentsTooltipBorder = "#0b0f11";
 export const ComponentsTooltipText = "#f5f6f7";

package/dist/js/ocean_dark.d.ts

@@ -159,6 +159,7 @@ export const ColorFocusBrand : string;
 export const ColorFocusBackground : string;
 export const ColorFocusBackgroundInverted : string;
 export const ColorFocusDestructive : string;
+export const ColorFocusDestructiveInField : string;
 export const ColorFocusSuccess : string;
 export const ColorRainbow1Background : string;
 export const ColorRainbow1Border : string;
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground : string;
 export const ComponentsPopoverBorder : string;
 export const ComponentsPopoverText : string;
 export const ComponentsPopoverSupportingText : string;
+export const ComponentsSliderTrackBackground : string;
+export const ComponentsSliderTrackFilledDefault : string;
+export const ComponentsSliderTrackFilledHover : string;
+export const ComponentsSliderTrackFilledFocus : string;
+export const ComponentsSliderTrackFilledError : string;
+export const ComponentsSliderTrackFilledDisabled : string;
+export const ComponentsSliderTrackFilledReadonly : string;
+export const ComponentsSliderHandlerBackgroundDefault : string;
+export const ComponentsSliderHandlerBackgroundHover : string;
+export const ComponentsSliderHandlerBackgroundFocus : string;
+export const ComponentsSliderHandlerBackgroundError : string;
+export const ComponentsSliderHandlerBackgroundDisabled : string;
+export const ComponentsSliderHandlerBackgroundReadonly : string;
+export const ComponentsSliderHandlerBorderDefault : string;
+export const ComponentsSliderHandlerBorderHover : string;
+export const ComponentsSliderHandlerBorderFocus : string;
+export const ComponentsSliderHandlerBorderError : string;
+export const ComponentsSliderHandlerBorderDisabled : string;
+export const ComponentsSliderHandlerBorderReadonly : string;
 export const ComponentsTooltipBackground : string;
 export const ComponentsTooltipBorder : string;
 export const ComponentsTooltipText : string;

package/dist/js/ocean_dark.js

@@ -159,6 +159,7 @@ export const ColorFocusBrand = "#258998";
 export const ColorFocusBackground = "#0b0f11";
 export const ColorFocusBackgroundInverted = "#ffffff";
 export const ColorFocusDestructive = "#ff6161";
+export const ColorFocusDestructiveInField = "#ff6161";
 export const ColorFocusSuccess = "#45d24d";
 export const ColorRainbow1Background = "#432306";
 export const ColorRainbow1Border = "#f0801a";
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground = "#0b0f11";
 export const ComponentsPopoverBorder = "#394d55";
 export const ComponentsPopoverText = "#27353b";
 export const ComponentsPopoverSupportingText = "#889499";
+export const ComponentsSliderTrackBackground = "#394d55";
+export const ComponentsSliderTrackFilledDefault = "#617177";
+export const ComponentsSliderTrackFilledHover = "#889499";
+export const ComponentsSliderTrackFilledFocus = "#258998";
+export const ComponentsSliderTrackFilledError = "#ff6161";
+export const ComponentsSliderTrackFilledDisabled = "#617177";
+export const ComponentsSliderTrackFilledReadonly = "#394d55";
+export const ComponentsSliderHandlerBackgroundDefault = "#0b0f11";
+export const ComponentsSliderHandlerBackgroundHover = "#11171a";
+export const ComponentsSliderHandlerBackgroundFocus = "#258998";
+export const ComponentsSliderHandlerBackgroundError = "#ff6161";
+export const ComponentsSliderHandlerBackgroundDisabled = "#171f22";
+export const ComponentsSliderHandlerBackgroundReadonly = "#11171a";
+export const ComponentsSliderHandlerBorderDefault = "#0b0f11";
+export const ComponentsSliderHandlerBorderHover = "#11171a";
+export const ComponentsSliderHandlerBorderFocus = "#258998";
+export const ComponentsSliderHandlerBorderError = "#ff6161";
+export const ComponentsSliderHandlerBorderDisabled = "#171f22";
+export const ComponentsSliderHandlerBorderReadonly = "#11171a";
 export const ComponentsTooltipBackground = "#f5f6f7";
 export const ComponentsTooltipBorder = "#f5f6f7";
 export const ComponentsTooltipText = "#0b0f11";

package/dist/js/ocean_light.d.ts

@@ -159,6 +159,7 @@ export const ColorFocusBrand : string;
 export const ColorFocusBackground : string;
 export const ColorFocusBackgroundInverted : string;
 export const ColorFocusDestructive : string;
+export const ColorFocusDestructiveInField : string;
 export const ColorFocusSuccess : string;
 export const ColorRainbow1Background : string;
 export const ColorRainbow1Border : string;
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground : string;
 export const ComponentsPopoverBorder : string;
 export const ComponentsPopoverText : string;
 export const ComponentsPopoverSupportingText : string;
+export const ComponentsSliderTrackBackground : string;
+export const ComponentsSliderTrackFilledDefault : string;
+export const ComponentsSliderTrackFilledHover : string;
+export const ComponentsSliderTrackFilledFocus : string;
+export const ComponentsSliderTrackFilledError : string;
+export const ComponentsSliderTrackFilledDisabled : string;
+export const ComponentsSliderTrackFilledReadonly : string;
+export const ComponentsSliderHandlerBackgroundDefault : string;
+export const ComponentsSliderHandlerBackgroundHover : string;
+export const ComponentsSliderHandlerBackgroundFocus : string;
+export const ComponentsSliderHandlerBackgroundError : string;
+export const ComponentsSliderHandlerBackgroundDisabled : string;
+export const ComponentsSliderHandlerBackgroundReadonly : string;
+export const ComponentsSliderHandlerBorderDefault : string;
+export const ComponentsSliderHandlerBorderHover : string;
+export const ComponentsSliderHandlerBorderFocus : string;
+export const ComponentsSliderHandlerBorderError : string;
+export const ComponentsSliderHandlerBorderDisabled : string;
+export const ComponentsSliderHandlerBorderReadonly : string;
 export const ComponentsTooltipBackground : string;
 export const ComponentsTooltipBorder : string;
 export const ComponentsTooltipText : string;

package/dist/js/ocean_light.js

@@ -159,6 +159,7 @@ export const ColorFocusBrand = "#1f717d";
 export const ColorFocusBackground = "#ffffff";
 export const ColorFocusBackgroundInverted = "#0b0f11";
 export const ColorFocusDestructive = "#ff6161";
+export const ColorFocusDestructiveInField = "#bb1919";
 export const ColorFocusSuccess = "#008207";
 export const ColorRainbow1Background = "#fdefe2";
 export const ColorRainbow1Border = "#9c5311";
@@ -305,7 +306,7 @@ export const ComponentsFormFieldBackgroundFocus = "#ffffff";
 export const ComponentsFormFieldBackgroundHover = "#fafbfb";
 export const ComponentsFormFieldBackgroundDisabled = "#f5f6f7";
 export const ComponentsFormFieldBackgroundChecked = "#1f717d";
-export const ComponentsFormFieldBackgroundError = "#ff6161";
+export const ComponentsFormFieldBackgroundError = "#bb1919";
 export const ComponentsFormFieldBackgroundReadonly = "#fafbfb";
 export const ComponentsFormFieldBorderDefault = "#bac1c4";
 export const ComponentsFormFieldBorderDisabled = "#bac1c4";
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground = "#ffffff";
 export const ComponentsPopoverBorder = "#e1e4e6";
 export const ComponentsPopoverText = "#34464d";
 export const ComponentsPopoverSupportingText = "#617177";
+export const ComponentsSliderTrackBackground = "#e1e4e6";
+export const ComponentsSliderTrackFilledDefault = "#bac1c4";
+export const ComponentsSliderTrackFilledHover = "#889499";
+export const ComponentsSliderTrackFilledFocus = "#1f717d";
+export const ComponentsSliderTrackFilledError = "#bb1919";
+export const ComponentsSliderTrackFilledDisabled = "#bac1c4";
+export const ComponentsSliderTrackFilledReadonly = "#e1e4e6";
+export const ComponentsSliderHandlerBackgroundDefault = "#ffffff";
+export const ComponentsSliderHandlerBackgroundHover = "#fafbfb";
+export const ComponentsSliderHandlerBackgroundFocus = "#1f717d";
+export const ComponentsSliderHandlerBackgroundError = "#bb1919";
+export const ComponentsSliderHandlerBackgroundDisabled = "#f5f6f7";
+export const ComponentsSliderHandlerBackgroundReadonly = "#fafbfb";
+export const ComponentsSliderHandlerBorderDefault = "#ffffff";
+export const ComponentsSliderHandlerBorderHover = "#fafbfb";
+export const ComponentsSliderHandlerBorderFocus = "#1f717d";
+export const ComponentsSliderHandlerBorderError = "#bb1919";
+export const ComponentsSliderHandlerBorderDisabled = "#f5f6f7";
+export const ComponentsSliderHandlerBorderReadonly = "#fafbfb";
 export const ComponentsTooltipBackground = "#0b0f11";
 export const ComponentsTooltipBorder = "#0b0f11";
 export const ComponentsTooltipText = "#f5f6f7";

package/dist/js/spacings.d.ts

@@ -110,6 +110,7 @@ export const FormFieldLeadingTrailingLineHeight : string;
 export const FormFieldInnerButtonPaddingXExt : string;
 export const FormFieldInnerButtonPaddingXInt : string;
 export const FormFieldInnerButtonPaddingY : string;
+export const FormMaxWidth : string;
 export const FormGapX : string;
 export const FormGapY : string;
 export const FormDescriptionFontSize : string;
@@ -216,6 +217,16 @@ export const GlobalTypographyLegendFontStyle : string;
 export const GlobalTypographyLegendFontSize : string;
 export const GlobalTypographyLegendLineHeight : string;
 export const GlobalTypographyLegendFontWeight : string;
+export const SliderTickRadius : string;
+export const SliderTickHeight : string;
+export const SliderTickWidth : string;
+export const SliderHandlerSizeMin : string;
+export const SliderHandlerSizeMax : string;
+export const SliderHandlerSizeInner : string;
+export const SliderHandlerStroke : string;
+export const SliderTrackHeight : string;
+export const SliderTrackPaddingX : string;
+export const SliderTrackRadius : string;
 export const AlertIconSize : string;
 export const AlertGapX : string;
 export const AlertIconPositionX : string;

package/dist/js/spacings.js

@@ -110,6 +110,7 @@ export const FormFieldLeadingTrailingLineHeight = "24px";
 export const FormFieldInnerButtonPaddingXExt = "10px";
 export const FormFieldInnerButtonPaddingXInt = "6px";
 export const FormFieldInnerButtonPaddingY = "10px";
+export const FormMaxWidth = "480px";
 export const FormGapX = "12px";
 export const FormGapY = "4px";
 export const FormDescriptionFontSize = "14px";
@@ -216,6 +217,16 @@ export const GlobalTypographyLegendFontStyle = "uppercase";
 export const GlobalTypographyLegendFontSize = "12px";
 export const GlobalTypographyLegendLineHeight = "16px";
 export const GlobalTypographyLegendFontWeight = "500";
+export const SliderTickRadius = "1px";
+export const SliderTickHeight = "4px";
+export const SliderTickWidth = "2px";
+export const SliderHandlerSizeMin = "20px";
+export const SliderHandlerSizeMax = "24px";
+export const SliderHandlerSizeInner = "16px";
+export const SliderHandlerStroke = "2px";
+export const SliderTrackHeight = "4px";
+export const SliderTrackPaddingX = "12px";
+export const SliderTrackRadius = "2px";
 export const AlertIconSize = "20px";
 export const AlertGapX = "12px";
 export const AlertIconPositionX = "16px";

package/dist/js/spark_dark.d.ts

@@ -159,6 +159,7 @@ export const ColorFocusBrand : string;
 export const ColorFocusBackground : string;
 export const ColorFocusBackgroundInverted : string;
 export const ColorFocusDestructive : string;
+export const ColorFocusDestructiveInField : string;
 export const ColorFocusSuccess : string;
 export const ColorRainbow1Background : string;
 export const ColorRainbow1Border : string;
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground : string;
 export const ComponentsPopoverBorder : string;
 export const ComponentsPopoverText : string;
 export const ComponentsPopoverSupportingText : string;
+export const ComponentsSliderTrackBackground : string;
+export const ComponentsSliderTrackFilledDefault : string;
+export const ComponentsSliderTrackFilledHover : string;
+export const ComponentsSliderTrackFilledFocus : string;
+export const ComponentsSliderTrackFilledError : string;
+export const ComponentsSliderTrackFilledDisabled : string;
+export const ComponentsSliderTrackFilledReadonly : string;
+export const ComponentsSliderHandlerBackgroundDefault : string;
+export const ComponentsSliderHandlerBackgroundHover : string;
+export const ComponentsSliderHandlerBackgroundFocus : string;
+export const ComponentsSliderHandlerBackgroundError : string;
+export const ComponentsSliderHandlerBackgroundDisabled : string;
+export const ComponentsSliderHandlerBackgroundReadonly : string;
+export const ComponentsSliderHandlerBorderDefault : string;
+export const ComponentsSliderHandlerBorderHover : string;
+export const ComponentsSliderHandlerBorderFocus : string;
+export const ComponentsSliderHandlerBorderError : string;
+export const ComponentsSliderHandlerBorderDisabled : string;
+export const ComponentsSliderHandlerBorderReadonly : string;
 export const ComponentsTooltipBackground : string;
 export const ComponentsTooltipBorder : string;
 export const ComponentsTooltipText : string;

package/dist/js/spark_dark.js

@@ -159,6 +159,7 @@ export const ColorFocusBrand = "#e75420";
 export const ColorFocusBackground = "#0e0e0e";
 export const ColorFocusBackgroundInverted = "#ffffff";
 export const ColorFocusDestructive = "#ff6161";
+export const ColorFocusDestructiveInField = "#ff6161";
 export const ColorFocusSuccess = "#45d24d";
 export const ColorRainbow1Background = "#432306";
 export const ColorRainbow1Border = "#f0801a";
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground = "#0e0e0e";
 export const ComponentsPopoverBorder = "#484848";
 export const ComponentsPopoverText = "#bfbfbf";
 export const ComponentsPopoverSupportingText = "#808080";
+export const ComponentsSliderTrackBackground = "#484848";
+export const ComponentsSliderTrackFilledDefault = "#6d6d6d";
+export const ComponentsSliderTrackFilledHover = "#919191";
+export const ComponentsSliderTrackFilledFocus = "#e75420";
+export const ComponentsSliderTrackFilledError = "#ff6161";
+export const ComponentsSliderTrackFilledDisabled = "#6d6d6d";
+export const ComponentsSliderTrackFilledReadonly = "#484848";
+export const ComponentsSliderHandlerBackgroundDefault = "#0e0e0e";
+export const ComponentsSliderHandlerBackgroundHover = "#161616";
+export const ComponentsSliderHandlerBackgroundFocus = "#e75420";
+export const ComponentsSliderHandlerBackgroundError = "#ff6161";
+export const ComponentsSliderHandlerBackgroundDisabled = "#1d1d1d";
+export const ComponentsSliderHandlerBackgroundReadonly = "#161616";
+export const ComponentsSliderHandlerBorderDefault = "#0e0e0e";
+export const ComponentsSliderHandlerBorderHover = "#161616";
+export const ComponentsSliderHandlerBorderFocus = "#e75420";
+export const ComponentsSliderHandlerBorderError = "#ff6161";
+export const ComponentsSliderHandlerBorderDisabled = "#1d1d1d";
+export const ComponentsSliderHandlerBorderReadonly = "#161616";
 export const ComponentsTooltipBackground = "#f6f6f6";
 export const ComponentsTooltipBorder = "#f6f6f6";
 export const ComponentsTooltipText = "#1d1d1d";

package/dist/js/spark_light.d.ts

@@ -159,6 +159,7 @@ export const ColorFocusBrand : string;
 export const ColorFocusBackground : string;
 export const ColorFocusBackgroundInverted : string;
 export const ColorFocusDestructive : string;
+export const ColorFocusDestructiveInField : string;
 export const ColorFocusSuccess : string;
 export const ColorRainbow1Background : string;
 export const ColorRainbow1Border : string;
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground : string;
 export const ComponentsPopoverBorder : string;
 export const ComponentsPopoverText : string;
 export const ComponentsPopoverSupportingText : string;
+export const ComponentsSliderTrackBackground : string;
+export const ComponentsSliderTrackFilledDefault : string;
+export const ComponentsSliderTrackFilledHover : string;
+export const ComponentsSliderTrackFilledFocus : string;
+export const ComponentsSliderTrackFilledError : string;
+export const ComponentsSliderTrackFilledDisabled : string;
+export const ComponentsSliderTrackFilledReadonly : string;
+export const ComponentsSliderHandlerBackgroundDefault : string;
+export const ComponentsSliderHandlerBackgroundHover : string;
+export const ComponentsSliderHandlerBackgroundFocus : string;
+export const ComponentsSliderHandlerBackgroundError : string;
+export const ComponentsSliderHandlerBackgroundDisabled : string;
+export const ComponentsSliderHandlerBackgroundReadonly : string;
+export const ComponentsSliderHandlerBorderDefault : string;
+export const ComponentsSliderHandlerBorderHover : string;
+export const ComponentsSliderHandlerBorderFocus : string;
+export const ComponentsSliderHandlerBorderError : string;
+export const ComponentsSliderHandlerBorderDisabled : string;
+export const ComponentsSliderHandlerBorderReadonly : string;
 export const ComponentsTooltipBackground : string;
 export const ComponentsTooltipBorder : string;
 export const ComponentsTooltipText : string;

package/dist/js/spark_light.js

@@ -159,6 +159,7 @@ export const ColorFocusBrand = "#e75420";
 export const ColorFocusBackground = "#ffffff";
 export const ColorFocusBackgroundInverted = "#0e0e0e";
 export const ColorFocusDestructive = "#ff6161";
+export const ColorFocusDestructiveInField = "#bb1919";
 export const ColorFocusSuccess = "#008207";
 export const ColorRainbow1Background = "#fdefe2";
 export const ColorRainbow1Border = "#9c5311";
@@ -305,7 +306,7 @@ export const ComponentsFormFieldBackgroundFocus = "#ffffff";
 export const ComponentsFormFieldBackgroundHover = "#fbfbfb";
 export const ComponentsFormFieldBackgroundDisabled = "#f6f6f6";
 export const ComponentsFormFieldBackgroundChecked = "#e75420";
-export const ComponentsFormFieldBackgroundError = "#ff6161";
+export const ComponentsFormFieldBackgroundError = "#bb1919";
 export const ComponentsFormFieldBackgroundReadonly = "#fbfbfb";
 export const ComponentsFormFieldBorderDefault = "#bfbfbf";
 export const ComponentsFormFieldBorderDisabled = "#bfbfbf";
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground = "#ffffff";
 export const ComponentsPopoverBorder = "#e3e3e3";
 export const ComponentsPopoverText = "#414141";
 export const ComponentsPopoverSupportingText = "#6d6d6d";
+export const ComponentsSliderTrackBackground = "#e3e3e3";
+export const ComponentsSliderTrackFilledDefault = "#bfbfbf";
+export const ComponentsSliderTrackFilledHover = "#919191";
+export const ComponentsSliderTrackFilledFocus = "#e75420";
+export const ComponentsSliderTrackFilledError = "#bb1919";
+export const ComponentsSliderTrackFilledDisabled = "#bfbfbf";
+export const ComponentsSliderTrackFilledReadonly = "#e3e3e3";
+export const ComponentsSliderHandlerBackgroundDefault = "#ffffff";
+export const ComponentsSliderHandlerBackgroundHover = "#fbfbfb";
+export const ComponentsSliderHandlerBackgroundFocus = "#e75420";
+export const ComponentsSliderHandlerBackgroundError = "#bb1919";
+export const ComponentsSliderHandlerBackgroundDisabled = "#f6f6f6";
+export const ComponentsSliderHandlerBackgroundReadonly = "#fbfbfb";
+export const ComponentsSliderHandlerBorderDefault = "#ffffff";
+export const ComponentsSliderHandlerBorderHover = "#fbfbfb";
+export const ComponentsSliderHandlerBorderFocus = "#e75420";
+export const ComponentsSliderHandlerBorderError = "#bb1919";
+export const ComponentsSliderHandlerBorderDisabled = "#f6f6f6";
+export const ComponentsSliderHandlerBorderReadonly = "#fbfbfb";
 export const ComponentsTooltipBackground = "#0e0e0e";
 export const ComponentsTooltipBorder = "#0e0e0e";
 export const ComponentsTooltipText = "#f6f6f6";

package/dist/plugin/nova-plugin.js

@@ -92,6 +92,230 @@ export const novaTailwindPlugin = plugin(({ addUtilities, addComponents, addBase
         '.w-unset': {
             width: 'unset',
         },
+        // Typography utilities
+        // .typo-{type}-{size}-{weight}
+        // Headings
+        '.typo-heading-xl-regular': {
+            'font-size': 'var(--font-size-4xl)',
+            'font-weight': '400',
+            'line-height': 'var(--leading-px-10)',
+            'letter-spacing': 'var(--letter-spacing-heading-xl)',
+        },
+        '.typo-heading-xl-medium': {
+            'font-size': 'var(--font-size-4xl)',
+            'font-weight': '500',
+            'line-height': 'var(--leading-px-10)',
+            'letter-spacing': 'var(--letter-spacing-heading-xl)',
+        },
+        '.typo-heading-xl-bold': {
+            'font-size': 'var(--font-size-4xl)',
+            'font-weight': '700',
+            'line-height': 'var(--leading-px-10)',
+            'letter-spacing': 'var(--letter-spacing-heading-xl)',
+        },
+        '.typo-heading-lg-regular': {
+            'font-size': 'var(--font-size-3xl)',
+            'font-weight': '400',
+            'line-height': 'var(--leading-px-8)',
+            'letter-spacing': 'var(--letter-spacing-heading-lg)',
+        },
+        '.typo-heading-lg-medium': {
+            'font-size': 'var(--font-size-3xl)',
+            'font-weight': '500',
+            'line-height': 'var(--leading-px-8)',
+            'letter-spacing': 'var(--letter-spacing-heading-lg)',
+        },
+        '.typo-heading-lg-bold': {
+            'font-size': 'var(--font-size-3xl)',
+            'font-weight': '700',
+            'line-height': 'var(--leading-px-8)',
+            'letter-spacing': 'var(--letter-spacing-heading-lg)',
+        },
+        '.typo-heading-md-regular': {
+            'font-size': 'var(--font-size-2xl)',
+            'font-weight': '400',
+            'line-height': 'var(--leading-px-7)',
+            'letter-spacing': 'var(--letter-spacing-heading-md)',
+        },
+        '.typo-heading-md-medium': {
+            'font-size': 'var(--font-size-2xl)',
+            'font-weight': '500',
+            'line-height': 'var(--leading-px-7)',
+            'letter-spacing': 'var(--letter-spacing-heading-md)',
+        },
+        '.typo-heading-md-bold': {
+            'font-size': 'var(--font-size-2xl)',
+            'font-weight': '700',
+            'line-height': 'var(--leading-px-7)',
+            'letter-spacing': 'var(--letter-spacing-heading-md)',
+        },
+        '.typo-heading-sm-regular': {
+            'font-size': 'var(--font-size-xl)',
+            'font-weight': '400',
+            'line-height': 'var(--leading-px-6)',
+            'letter-spacing': 'var(--letter-spacing-heading-sm)',
+        },
+        '.typo-heading-sm-medium': {
+            'font-size': 'var(--font-size-xl)',
+            'font-weight': '500',
+            'line-height': 'var(--leading-px-6)',
+            'letter-spacing': 'var(--letter-spacing-heading-sm)',
+        },
+        '.typo-heading-sm-bold': {
+            'font-size': 'var(--font-size-xl)',
+            'font-weight': '700',
+            'line-height': 'var(--leading-px-6)',
+            'letter-spacing': 'var(--letter-spacing-heading-sm)',
+        },
+        '.typo-heading-xs-regular': {
+            'font-size': 'var(--font-size-lg)',
+            'font-weight': '400',
+            'line-height': 'var(--leading-px-6)',
+            'letter-spacing': 'var(--letter-spacing-heading-xs)',
+        },
+        '.typo-heading-xs-medium': {
+            'font-size': 'var(--font-size-lg)',
+            'font-weight': '500',
+            'line-height': 'var(--leading-px-6)',
+            'letter-spacing': 'var(--letter-spacing-heading-xs)',
+        },
+        '.typo-heading-xs-bold': {
+            'font-size': 'var(--font-size-lg)',
+            'font-weight': '700',
+            'line-height': 'var(--leading-px-6)',
+            'letter-spacing': 'var(--letter-spacing-heading-xs)',
+        },
+        // Text
+        '.typo-text-xl-regular': {
+            'font-size': 'var(--font-size-xl)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-xl)',
+        },
+        '.typo-text-xl-medium': {
+            'font-size': 'var(--font-size-xl)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-xl)',
+        },
+        '.typo-text-xl-bold': {
+            'font-size': 'var(--font-size-xl)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-xl)',
+        },
+        '.typo-text-lg-regular': {
+            'font-size': 'var(--font-size-lg)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-lg)',
+        },
+        '.typo-text-lg-medium': {
+            'font-size': 'var(--font-size-lg)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-lg)',
+        },
+        '.typo-text-lg-bold': {
+            'font-size': 'var(--font-size-lg)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-lg)',
+        },
+        '.typo-text-md-regular': {
+            'font-size': 'var(--font-size-md)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-b ase)',
+        },
+        '.typo-text-md-medium': {
+            'font-size': 'var(--font-size-md)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-base)',
+        },
+        '.typo-text-md-bold': {
+            'font-size': 'var(--font-size-md)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-base)',
+        },
+        '.typo-text-sm-regular': {
+            'font-size': 'var(--font-size-sm)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-sm)',
+        },
+        '.typo-text-sm-medium': {
+            'font-size': 'var(--font-size-sm)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-sm)',
+        },
+        '.typo-text-sm-bold': {
+            'font-size': 'var(--font-size-sm)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-sm)',
+        },
+        '.typo-text-xs-regular': {
+            'font-size': 'var(--font-size-xs)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-xs)',
+        },
+        '.typo-text-xs-medium': {
+            'font-size': 'var(--font-size-xs)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-xs)',
+        },
+        '.typo-text-xs-bold': {
+            'font-size': 'var(--font-size-xs)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-xs)',
+        },
+        // Mono
+        '.typo-mono-md-regular': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-md)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-base)',
+        },
+        '.typo-mono-md-medium': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-md)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-base)',
+        },
+        '.typo-mono-md-bold': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-md)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-base)',
+        },
+        '.typo-mono-sm-regular': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-sm)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-sm)',
+        },
+        '.typo-mono-sm-medium': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-sm)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-sm)',
+        },
+        '.typo-mono-sm-bold': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-sm)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-sm)',
+        },
+        '.typo-mono-xs-regular': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-xs)',
+            'font-weight': '400',
+            'line-height': 'var(--line-height-xs)',
+        },
+        '.typo-mono-xs-medium': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-xs)',
+            'font-weight': '500',
+            'line-height': 'var(--line-height-xs)',
+        },
+        '.typo-mono-xs-bold': {
+            'font-family': 'TT Norms Pro Mono',
+            'font-size': 'var(--font-size-xs)',
+            'font-weight': '700',
+            'line-height': 'var(--line-height-xs)',
+        },
     });
 });
 export default novaTailwindPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-base",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",