@nova-design-system/nova-base 3.15.0 → 3.17.0

package/dist/generated/nova-tailwind-components.js

@@ -4,6 +4,208 @@
  * @ref generate-tailwind-components.ts
  */
 export const NOVA_TAILWIND_COMPONENTS = {
+    'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range': {
+        'background': 'var(--components-slider-track-filled-hover)'
+    },
+    'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb': {
+        'borderColor': 'var(--components-slider-track-filled-hover)'
+    },
+    'nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range': {
+        'background': 'var(--components-slider-track-filled-focus)'
+    },
+    'nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb': {
+        'borderColor': 'var(--components-slider-track-filled-focus)'
+    },
+    'nv-fieldslider[error] .slider-container .track-container .track .track-range': {
+        'background': 'var(--components-slider-track-filled-error)'
+    },
+    'nv-fieldslider[error] .slider-container .track-container .track .thumb': {
+        'borderColor': 'var(--components-slider-track-filled-error)'
+    },
+    'nv-fieldslider[error] .slider-container .track-container .track .thumb:hover': {
+        'borderColor': 'var(--components-slider-track-filled-error)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
+        'backgroundColor': 'var(--components-slider-handler-background-error)'
+    },
+    'nv-fieldslider[error] .slider-container .track-container .track .thumb:focus': {
+        'borderColor': 'var(--components-slider-track-filled-error)',
+        'outline': 'calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error)',
+        'outlineOffset': 'calc(var(--focus-outline-offset) * 1)',
+        'backgroundColor': 'var(--components-slider-track-filled-error)'
+    },
+    'nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range': {
+        'background': 'var(--components-slider-track-filled-error)'
+    },
+    'nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb': {
+        'borderColor': 'var(--components-slider-track-filled-error)'
+    },
+    '.nv-fieldtext': {
+        '--nv-field-border-default': 'var(--components-form-field-border-default)',
+        '--nv-field-border-hover': 'var(--components-form-field-border-hover)',
+        '--nv-field-border-focus': 'var(--components-form-field-border-focus)',
+        '--nv-field-border-disabled': 'var(--components-form-field-border-default)',
+        '--nv-field-border-readonly': 'var(--components-form-field-border-default)',
+        '--nv-field-focus-box-shadow': 'var(--color-focus-brand)',
+        '--nv-field-background': 'var(--components-form-field-background-default)',
+        'display': 'flex',
+        'flexDirection': 'column',
+        'alignItems': 'flex-start',
+        'gap': 'var(--form-gap-y)',
+        'boxSizing': 'border-box',
+        'maxWidth': '480px'
+    },
+    '.nv-fieldtext.fluid': {
+        'maxWidth': 'unset'
+    },
+    '.nv-fieldtext.readonly': {
+        '--nv-field-border-default': 'var(--components-form-field-border-readonly)',
+        '--nv-field-border-hover': 'var(--nv-field-border-default)',
+        '--nv-field-border-focus': 'var(--components-form-field-border-focus)',
+        '--nv-field-border-disabled': 'var(--nv-field-border-default)',
+        '--nv-field-border-readonly': 'var(--nv-field-border-default)',
+        '--nv-field-background': 'var(--components-form-field-background-readonly)'
+    },
+    '.nv-fieldtext.error': {
+        '--nv-field-border-default': 'var(--components-form-field-border-error)',
+        '--nv-field-border-hover': 'var(--nv-field-border-default)',
+        '--nv-field-border-focus': 'var(--nv-field-border-default)',
+        '--nv-field-border-disabled': 'var(--nv-field-border-default)',
+        '--nv-field-border-readonly': 'var(--nv-field-border-default)',
+        '--nv-field-focus-box-shadow': 'var(--color-focus-destructive-in-field)'
+    },
+    '.nv-fieldtext.success': {
+        '--nv-field-border-default': 'var(--components-form-field-border-success)',
+        '--nv-field-border-hover': 'var(--nv-field-border-default)',
+        '--nv-field-border-focus': 'var(--nv-field-border-default)',
+        '--nv-field-border-disabled': 'var(--nv-field-border-default)',
+        '--nv-field-border-readonly': 'var(--nv-field-border-default)',
+        '--nv-field-focus-box-shadow': 'var(--color-focus-success)'
+    },
+    '.nv-fieldtext.required label::after': {
+        'content': '\'*\'',
+        'color': 'var(--components-form-text-required)',
+        'fontWeight': 'var(--font-weight-high-emphasis)'
+    },
+    '.nv-fieldtext > label': {
+        'display': 'flex',
+        'alignItems': 'center',
+        'gap': 'var(--form-label-gap)',
+        'alignSelf': 'stretch',
+        'color': 'var(--components-form-text-label-default)',
+        'fontFamily': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
+        'fontSize': 'var(--form-label-font-size)',
+        'fontStyle': 'normal',
+        'fontWeight': 'var(--font-weight-medium-emphasis)',
+        'lineHeight': 'var(--form-label-line-height)'
+    },
+    '.nv-fieldtext > .input-wrapper': {
+        'display': 'flex',
+        'flexWrap': 'wrap',
+        'gap': 'var(--form-gap-x)',
+        'alignItems': 'stretch',
+        'alignSelf': 'stretch'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container': {
+        'display': 'flex',
+        'flexGrow': '1',
+        'justifyContent': 'center',
+        'alignItems': 'center',
+        'alignSelf': 'stretch',
+        'borderRadius': 'var(--form-field-radius)',
+        'borderWidth': '1px',
+        'borderStyle': 'solid',
+        'borderColor': 'var(--nv-field-border-default)',
+        'opacity': 'var(--components-form-opacity-default, 1)',
+        'background': 'var(--nv-field-background)',
+        'transition': 'all 150ms ease-out'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container:hover': {
+        'borderColor': 'var(--nv-field-border-hover)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container:focus-within, .nv-fieldtext > .input-wrapper .input-container:focus-within:hover, .nv-fieldtext > .input-wrapper .input-container:focus, .nv-fieldtext > .input-wrapper .input-container:focus:hover': {
+        'borderColor': 'var(--nv-field-border-focus)',
+        'boxShadow': '0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container:has(input:read-only)': {
+        'opacity': '0.5',
+        'backgroundColor': 'var(--components-form-field-background-readonly)',
+        'borderColor': 'var(--nv-field-border-readonly)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container:has(input:disabled)': {
+        'opacity': '0.5',
+        'backgroundColor': 'var(--components-form-field-background-disabled)',
+        'borderColor': 'var(--nv-field-border-disabled)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container > .leading-input': {
+        'display': 'block',
+        'marginLeft': 'var(--form-field-padding-x)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container input': {
+        'display': 'flex',
+        'alignItems': 'center',
+        'flex': '1 0 0',
+        'overflow': 'hidden',
+        'backgroundColor': 'transparent',
+        'color': 'var(--components-form-field-content-text)',
+        'padding': 'var(--form-field-padding-y) var(--form-field-padding-x)',
+        'fontSize': 'var(--form-field-font-size)',
+        'fontStyle': 'normal',
+        'fontWeight': 'var(--font-weight-medium-emphasis)',
+        'lineHeight': 'var(--form-field-line-height)',
+        'width': '100%'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container input:focus': {
+        'outline': 'none'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container input::placeholder': {
+        'overflow': 'hidden',
+        'color': 'var(--components-form-field-content-placeholder)',
+        'textOverflow': 'ellipsis',
+        'fontFamily': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
+        'fontSize': 'var(--form-field-font-size)',
+        'fontStyle': 'normal',
+        'fontWeight': 'var(--font-weight-low-emphasis)',
+        'lineHeight': 'var(--form-field-line-height)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container input[type=password]::-ms-clear, .nv-fieldtext > .input-wrapper .input-container input[type=password]::-ms-reveal': {
+        'display': 'none',
+        'width': '0',
+        'height': '0'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container nv-icon.validation': {
+        'color': 'var(--nv-field-border-default)',
+        'marginRight': 'var(--form-gap-x)'
+    },
+    '.nv-fieldtext > .input-wrapper .input-container > .trailing-input': {
+        'display': 'block',
+        'marginRight': 'var(--form-field-padding-x)'
+    },
+    '.nv-fieldtext > .description': {
+        'display': 'flex',
+        'alignItems': 'center',
+        'alignSelf': 'stretch',
+        'gap': 'var(--spacing-1)',
+        'color': 'var(--components-form-text-description-default)',
+        'fontFamily': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
+        'fontSize': 'var(--form-description-font-size)',
+        'fontStyle': 'normal',
+        'lineHeight': 'var(--form-description-line-height)'
+    },
+    '.nv-fieldtext > .error-description': {
+        'display': 'flex',
+        'alignItems': 'center',
+        'alignSelf': 'stretch',
+        'gap': 'var(--spacing-1)',
+        'color': [
+            'var(--components-form-text-description-default)',
+            'var(--components-form-text-description-error)'
+        ],
+        'fontFamily': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
+        'fontSize': 'var(--form-description-font-size)',
+        'fontStyle': 'normal',
+        'lineHeight': 'var(--form-description-line-height)'
+    },
     '.nv-button': {
         'textDecoration': 'none',
         'display': 'inline-flex',
@@ -11,7 +213,7 @@ export const NOVA_TAILWIND_COMPONENTS = {
         'alignItems': 'center',
         'fontStyle': 'normal',
         'fontWeight': 'var(--font-weight-medium-emphasis)',
-        'fontFamily': '\'TT Norms Pro\', sans-serif',
+        'fontFamily': 'var(--font-family-default), var(--font-family-fallback), sans-serif',
         'transition': 'background-color 150ms ease-out',
         'userSelect': 'none',
         'cursor': 'pointer',
@@ -324,7 +526,7 @@ export const NOVA_TAILWIND_COMPONENTS = {
     },
     '.nv-link, .nv-link-low, .nv-link-high': {
         'color': 'var(--color-interaction-link-high-text)',
-        'fontWeight': '500',
+        'fontWeight': 'var(--font-weight-medium-emphasis)',
         'textDecoration': 'none'
     },
     '.nv-link:hover, .nv-link-low:hover, .nv-link-high:hover': {
@@ -364,7 +566,7 @@ export const NOVA_TAILWIND_COMPONENTS = {
         'color': 'var(--color-interaction-container-neutral-text)',
         'backgroundColor': 'var(--color-interaction-container-neutral-background)',
         'textDecoration': 'none',
-        'fontWeight': '500',
+        'fontWeight': 'var(--font-weight-medium-emphasis)',
         'padding': 'var(--spacing-2) var(--spacing-3)',
         'columnGap': 'var(--spacing-2)'
     },

package/dist/js/ocean_dark.d.ts

@@ -105,6 +105,16 @@ export const ColorAccent600 : string;
 export const ColorAccent700 : string;
 export const ColorAccent800 : string;
 export const ColorAccent900 : string;
+export const ColorBrand50 : string;
+export const ColorBrand100 : string;
+export const ColorBrand200 : string;
+export const ColorBrand300 : string;
+export const ColorBrand400 : string;
+export const ColorBrand500 : string;
+export const ColorBrand600 : string;
+export const ColorBrand700 : string;
+export const ColorBrand800 : string;
+export const ColorBrand900 : string;
 export const ColorChart1 : string;
 export const ColorChart2 : string;
 export const ColorChart3 : string;

package/dist/js/ocean_dark.js

@@ -105,6 +105,16 @@ export const ColorAccent600 = "#ef906e";
 export const ColorAccent700 = "#f4ae95";
 export const ColorAccent800 = "#f8ccbc";
 export const ColorAccent900 = "#fceae3";
+export const ColorBrand50 = "#0b292e";
+export const ColorBrand100 = "#124148";
+export const ColorBrand200 = "#185963";
+export const ColorBrand300 = "#1f717d";
+export const ColorBrand400 = "#258998";
+export const ColorBrand500 = "#4b9eaa";
+export const ColorBrand600 = "#71b2bc";
+export const ColorBrand700 = "#97c7ce";
+export const ColorBrand800 = "#bedce0";
+export const ColorBrand900 = "#e4f0f2";
 export const ColorChart1 = "#f0801a";
 export const ColorChart2 = "#394d55";
 export const ColorChart3 = "#258998";

package/dist/js/ocean_light.d.ts

@@ -105,6 +105,16 @@ export const ColorAccent600 : string;
 export const ColorAccent700 : string;
 export const ColorAccent800 : string;
 export const ColorAccent900 : string;
+export const ColorBrand50 : string;
+export const ColorBrand100 : string;
+export const ColorBrand200 : string;
+export const ColorBrand300 : string;
+export const ColorBrand400 : string;
+export const ColorBrand500 : string;
+export const ColorBrand600 : string;
+export const ColorBrand700 : string;
+export const ColorBrand800 : string;
+export const ColorBrand900 : string;
 export const ColorChart1 : string;
 export const ColorChart2 : string;
 export const ColorChart3 : string;

package/dist/js/ocean_light.js

@@ -105,6 +105,16 @@ export const ColorAccent600 = "#bf451a";
 export const ColorAccent700 = "#963715";
 export const ColorAccent800 = "#6e280f";
 export const ColorAccent900 = "#45190a";
+export const ColorBrand50 = "#bedce0";
+export const ColorBrand100 = "#bedce0";
+export const ColorBrand200 = "#97c7ce";
+export const ColorBrand300 = "#71b2bc";
+export const ColorBrand400 = "#4b9eaa";
+export const ColorBrand500 = "#258998";
+export const ColorBrand600 = "#1f717d";
+export const ColorBrand700 = "#185963";
+export const ColorBrand800 = "#124148";
+export const ColorBrand900 = "#0b292e";
 export const ColorChart1 = "#f0801a";
 export const ColorChart2 = "#394d55";
 export const ColorChart3 = "#258998";
@@ -348,7 +358,7 @@ export const ComponentsFormShapeBackgroundDefault = "#eaeef0";
 export const ComponentsFormShapeBackgroundHover = "#e1e4e6";
 export const ComponentsFormShapeBackgroundDisabled = "#eaeef0";
 export const ComponentsFormShapeBackgroundSelected = "#1f717d";
-export const ComponentsFormShapeBackgroundError = "#ff6161";
+export const ComponentsFormShapeBackgroundError = "#bb1919";
 export const ComponentsFormShapeBorderDefault = "#bac1c4";
 export const ComponentsFormShapeBorderHover = "#889499";
 export const ComponentsFormShapeBorderFocus = "#1f717d";
@@ -357,7 +367,7 @@ export const ComponentsFormShapeBorderSuccess = "#008207";
 export const ComponentsFormShapeForegroundDefault = "#ffffff";
 export const ComponentsFormShapeForegroundSwitchDot = "#bac1c4";
 export const ComponentsFormShapeForegroundDisabled = "#bac1c4";
-export const ComponentsFormShapeForegroundDisabledError = "#ff6161";
+export const ComponentsFormShapeForegroundDisabledError = "#bb1919";
 export const ComponentsListNativeBackground = "#565558";
 export const ComponentsListNativeItemTitleContent = "#ffffff";
 export const ComponentsListNativeSeparator = "#838086";

package/dist/js/primitives.d.ts

@@ -180,6 +180,9 @@ export const ColorYellow600 : string;
 export const ColorYellow700 : string;
 export const ColorYellow800 : string;
 export const ColorYellow900 : string;
+export const FontFamilyDefault : string;
+export const FontFamilyMono : string;
+export const FontFamilyFallback : string;
 export const FontSizeXs : string;
 export const FontSizeSm : string;
 export const FontSizeMd : string;
@@ -196,6 +199,9 @@ export const FontSize9xl : string;
 export const FontWeightHighEmphasis : string;
 export const FontWeightMediumEmphasis : string;
 export const FontWeightLowEmphasis : string;
+export const FontWeightLowEmphasis400 : string;
+export const FontWeightMediumEmphasis500 : string;
+export const FontWeightHighEmphasis700 : string;
 export const LeadingPx3 : string;
 export const LeadingPx4 : string;
 export const LeadingPx5 : string;

package/dist/js/primitives.js

@@ -180,6 +180,9 @@ export const ColorYellow600 = "#d29f00";
 export const ColorYellow700 = "#a67d00";
 export const ColorYellow800 = "#795c00";
 export const ColorYellow900 = "#4d3a00";
+export const FontFamilyDefault = "TT Norms Pro";
+export const FontFamilyMono = "TT Norms Pro Mono";
+export const FontFamilyFallback = "Arial";
 export const FontSizeXs = "12.0000px";
 export const FontSizeSm = "14.0000px";
 export const FontSizeMd = "16.0000px";
@@ -196,6 +199,9 @@ export const FontSize9xl = "128.0000px";
 export const FontWeightHighEmphasis = "700";
 export const FontWeightMediumEmphasis = "500";
 export const FontWeightLowEmphasis = "400";
+export const FontWeightLowEmphasis400 = "Regular";
+export const FontWeightMediumEmphasis500 = "Medium";
+export const FontWeightHighEmphasis700 = "Bold";
 export const LeadingPx3 = "12.0000px";
 export const LeadingPx4 = "16.0000px";
 export const LeadingPx5 = "20.0000px";

package/dist/js/spark_dark.d.ts

@@ -105,6 +105,16 @@ export const ColorAccent600 : string;
 export const ColorAccent700 : string;
 export const ColorAccent800 : string;
 export const ColorAccent900 : string;
+export const ColorBrand50 : string;
+export const ColorBrand100 : string;
+export const ColorBrand200 : string;
+export const ColorBrand300 : string;
+export const ColorBrand400 : string;
+export const ColorBrand500 : string;
+export const ColorBrand600 : string;
+export const ColorBrand700 : string;
+export const ColorBrand800 : string;
+export const ColorBrand900 : string;
 export const ColorChart1 : string;
 export const ColorChart2 : string;
 export const ColorChart3 : string;

package/dist/js/spark_dark.js

@@ -105,6 +105,16 @@ export const ColorAccent600 = "#71b2bc";
 export const ColorAccent700 = "#97c7ce";
 export const ColorAccent800 = "#bedce0";
 export const ColorAccent900 = "#e4f0f2";
+export const ColorBrand50 = "#432306";
+export const ColorBrand100 = "#723d0c";
+export const ColorBrand200 = "#9c5311";
+export const ColorBrand300 = "#c66a15";
+export const ColorBrand400 = "#f0801a";
+export const ColorBrand500 = "#f39642";
+export const ColorBrand600 = "#f5ac6a";
+export const ColorBrand700 = "#f8c392";
+export const ColorBrand800 = "#fbd9ba";
+export const ColorBrand900 = "#fdefe2";
 export const ColorChart1 = "#f0801a";
 export const ColorChart2 = "#394d55";
 export const ColorChart3 = "#258998";

package/dist/js/spark_light.d.ts

@@ -105,6 +105,16 @@ export const ColorAccent600 : string;
 export const ColorAccent700 : string;
 export const ColorAccent800 : string;
 export const ColorAccent900 : string;
+export const ColorBrand50 : string;
+export const ColorBrand100 : string;
+export const ColorBrand200 : string;
+export const ColorBrand300 : string;
+export const ColorBrand400 : string;
+export const ColorBrand500 : string;
+export const ColorBrand600 : string;
+export const ColorBrand700 : string;
+export const ColorBrand800 : string;
+export const ColorBrand900 : string;
 export const ColorChart1 : string;
 export const ColorChart2 : string;
 export const ColorChart3 : string;

package/dist/js/spark_light.js

@@ -105,6 +105,16 @@ export const ColorAccent600 = "#1f717d";
 export const ColorAccent700 = "#185963";
 export const ColorAccent800 = "#124148";
 export const ColorAccent900 = "#0b292e";
+export const ColorBrand50 = "#fdefe2";
+export const ColorBrand100 = "#fbd9ba";
+export const ColorBrand200 = "#f8c392";
+export const ColorBrand300 = "#f5ac6a";
+export const ColorBrand400 = "#f39642";
+export const ColorBrand500 = "#f0801a";
+export const ColorBrand600 = "#c66a15";
+export const ColorBrand700 = "#9c5311";
+export const ColorBrand800 = "#723d0c";
+export const ColorBrand900 = "#432306";
 export const ColorChart1 = "#f0801a";
 export const ColorChart2 = "#394d55";
 export const ColorChart3 = "#258998";
@@ -348,7 +358,7 @@ export const ComponentsFormShapeBackgroundDefault = "#ededed";
 export const ComponentsFormShapeBackgroundHover = "#e3e3e3";
 export const ComponentsFormShapeBackgroundDisabled = "#ededed";
 export const ComponentsFormShapeBackgroundSelected = "#e75420";
-export const ComponentsFormShapeBackgroundError = "#ff6161";
+export const ComponentsFormShapeBackgroundError = "#bb1919";
 export const ComponentsFormShapeBorderDefault = "#bfbfbf";
 export const ComponentsFormShapeBorderHover = "#919191";
 export const ComponentsFormShapeBorderFocus = "#e75420";
@@ -357,7 +367,7 @@ export const ComponentsFormShapeBorderSuccess = "#008207";
 export const ComponentsFormShapeForegroundDefault = "#ffffff";
 export const ComponentsFormShapeForegroundSwitchDot = "#bfbfbf";
 export const ComponentsFormShapeForegroundDisabled = "#bfbfbf";
-export const ComponentsFormShapeForegroundDisabledError = "#ff6161";
+export const ComponentsFormShapeForegroundDisabledError = "#bb1919";
 export const ComponentsListNativeBackground = "#565558";
 export const ComponentsListNativeItemTitleContent = "#ffffff";
 export const ComponentsListNativeSeparator = "#838086";