@visa/nova-styles/themes/default-dark/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              Copyright (c) 2025 Visa, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer overrides{:root,::backdrop,.v-alternate{--v-logo-color: var(--color-lightest);--v-logo-hc-background: #000;--v-tabs-suffix-icon-color: var(--color-secondary-70) }}@layer overrides{.v-alternate.v-nav,.v-alternate .v-nav{--v-badge-number-foreground: var(--palette-default-surface-1)}@media(forced-colors: active){svg.v-icon{--v-icon-primary:currentColor !important;--v-icon-secondary:currentColor !important}}}@layer theme{:root,::backdrop{--color-transparent: rgba(255, 255, 255, 0);--color-primary: #dddddd;--color-secondary: #303033;--color-lightest: #ffffff;--color-darkest: #000000;--color-positive: #148a0a;--color-warning: #cca002;--color-negative: #b80600;--color-info: #1e78a8;--color-primary-10: hsl(0 0% 8%);--color-primary-20: hsl(0 0% 17%);--color-primary-30: hsl(0 0% 25%);--color-primary-40: hsl(0 0% 33%);--color-primary-50: hsl(0 0% 42%);--color-primary-60: hsl(0 0% 50%);--color-primary-70: hsl(0 0% 58%);--color-primary-80: hsl(0 0% 67%);--color-primary-90: hsl(0 0% 75%);--color-primary-100: hsl(0 0% 83%);--color-primary-110: hsl(0 0% 92%);--color-secondary-10: hsl(240 1% 8%);--color-secondary-20: hsl(240 1% 17%);--color-secondary-30: hsl(240 1% 25%);--color-secondary-40: hsl(240 1% 33%);--color-secondary-50: hsl(240 1% 42%);--color-secondary-60: hsl(240 1% 50%);--color-secondary-70: hsl(240 1% 58%);--color-secondary-80: hsl(240 1% 67%);--color-secondary-90: hsl(240 1% 75%);--color-secondary-100: hsl(240 1% 83%);--color-secondary-110: hsl(240 1% 92%);--color-grayscale-0: hsl(0 0% 0%);--color-grayscale-10: hsl(0 0% 10%);--color-grayscale-20: hsl(0 0% 20%);--color-grayscale-30: hsl(0 0% 30%);--color-grayscale-40: hsl(0 0% 40%);--color-grayscale-50: hsl(0 0% 50%);--color-grayscale-60: hsl(0 0% 60%);--color-grayscale-70: hsl(0 0% 70%);--color-grayscale-80: hsl(0 0% 80%);--color-grayscale-90: hsl(0 0% 90%);--color-grayscale-100: hsl(0 0% 100%);--color-positive-10: hsl(115 35% 8%);--color-positive-20: hsl(115 35% 17%);--color-positive-30: hsl(115 35% 25%);--color-positive-40: hsl(115 35% 33%);--color-positive-50: hsl(115 35% 42%);--color-positive-60: hsl(115 35% 50%);--color-positive-70: hsl(115 35% 58%);--color-positive-80: hsl(115 35% 67%);--color-positive-90: hsl(115 35% 75%);--color-positive-100: hsl(115 35% 83%);--color-positive-110: hsl(115 35% 92%);--color-warning-10: hsl(47 66% 8%);--color-warning-20: hsl(47 66% 17%);--color-warning-30: hsl(47 66% 25%);--color-warning-40: hsl(47 66% 33%);--color-warning-50: hsl(47 66% 42%);--color-warning-60: hsl(47 66% 50%);--color-warning-70: hsl(47 66% 58%);--color-warning-80: hsl(47 66% 67%);--color-warning-90: hsl(47 66% 75%);--color-warning-100: hsl(47 66% 83%);--color-warning-110: hsl(47 66% 92%);--color-negative-10: hsl(2 56% 8%);--color-negative-20: hsl(2 56% 17%);--color-negative-30: hsl(2 56% 25%);--color-negative-40: hsl(2 56% 33%);--color-negative-50: hsl(2 56% 42%);--color-negative-60: hsl(2 56% 50%);--color-negative-70: hsl(2 56% 58%);--color-negative-80: hsl(2 56% 67%);--color-negative-90: hsl(2 56% 75%);--color-negative-100: hsl(2 56% 83%);--color-negative-110: hsl(2 56% 92%);--color-info-10: hsl(201 44% 8%);--color-info-20: hsl(201 44% 17%);--color-info-30: hsl(201 44% 25%);--color-info-40: hsl(201 44% 33%);--color-info-50: hsl(201 44% 42%);--color-info-60: hsl(201 44% 50%);--color-info-70: hsl(201 44% 58%);--color-info-80: hsl(201 44% 67%);--color-info-90: hsl(201 44% 75%);--color-info-100: hsl(201 44% 83%);--color-info-110: hsl(201 44% 92%)}}@layer theme{:root,::backdrop{--palette-default-active: var(--color-primary);--palette-default-active-hover: var(--color-primary-100);--palette-default-active-pressed: var(--color-primary-60);--palette-default-active-subtle: var(--color-grayscale-70);--palette-default-active-accent: var(--color-secondary);--palette-default-surface-1: var(--color-darkest);--palette-default-surface-2: var(--color-grayscale-10);--palette-default-surface-3: var(--color-grayscale-20);--palette-default-surface-highlight: var(--color-primary-20);--palette-default-surface-lowlight: var(--color-primary-30);--palette-default-text: var(--color-lightest);--palette-default-text-subtle: var(--color-grayscale-70);--palette-default-text-on-active: var(--color-grayscale-20);--palette-default-border: var(--color-grayscale-30);--palette-default-disabled: var(--color-grayscale-20);--palette-default-overlay: var(--color-grayscale-70);--palette-default-transparent: var(--color-transparent);--palette-alternate-active: var(--color-lightest);--palette-alternate-active-hover: var(--color-grayscale-90);--palette-alternate-active-pressed: var(--color-grayscale-80);--palette-alternate-active-subtle: var(--color-secondary-30);--palette-alternate-active-accent: var(--color-lightest);--palette-alternate-surface-1: var(--color-darkest);--palette-alternate-surface-2: var(--color-primary-50);--palette-alternate-surface-3: var(--color-primary-40);--palette-alternate-surface-highlight: var(--color-primary-60);--palette-alternate-surface-lowlight: var(--color-primary-40);--palette-alternate-text: var(--color-lightest);--palette-alternate-text-subtle: var(--color-grayscale-110);--palette-alternate-text-on-active: var(--color-primary-30);--palette-alternate-border: var(--color-primary-70);--palette-alternate-disabled: var(--color-primary-80);--palette-alternate-overlay: var(--color-grayscale-70);--palette-alternate-transparent: var(--color-transparent);--palette-messaging-highlight-positive: var(--color-positive-110);--palette-messaging-lowlight-positive: var(--color-positive-100);--palette-messaging-surface-positive: var(--color-positive-50);--palette-messaging-graphics-positive: var(--color-positive);--palette-messaging-text-hover-positive: var(--color-positive-60);--palette-messaging-text-positive: var(--color-positive-90);--palette-messaging-text-pressed-positive: var(--color-positive-40);--palette-messaging-highlight-warning: var(--color-warning-40);--palette-messaging-graphics-warning: var(--color-warning);--palette-messaging-text-warning: var(--color-warning-90);--palette-messaging-highlight-negative: var(--color-negative-110);--palette-messaging-lowlight-negative: var(--color-negative-100);--palette-messaging-surface-negative: var(--color-negative-40);--palette-messaging-graphics-negative: var(--color-negative);--palette-messaging-text-hover-negative: var(--color-negative-90);--palette-messaging-text-negative: var(--color-negative-80);--palette-messaging-text-pressed-negative: var(--color-negative-90);--palette-messaging-highlight-info: var(--color-info-40);--palette-messaging-graphics-info: var(--color-info);--palette-messaging-text-info: var(--color-info-90);--palette-accent-app-name: var(--color-primary)}.v-alternate{--palette-default-active: var(--palette-alternate-active);--palette-default-active-hover: var(--palette-alternate-active-hover);--palette-default-active-pressed: var(--palette-alternate-active-pressed);--palette-default-active-subtle: var(--palette-alternate-active-subtle);--palette-default-active-accent: var(--palette-alternate-active-accent);--palette-default-surface-1: var(--palette-alternate-surface-1);--palette-default-surface-2: var(--palette-alternate-surface-2);--palette-default-surface-3: var(--palette-alternate-surface-3);--palette-default-surface-highlight: var(--palette-alternate-surface-highlight);--palette-default-surface-lowlight: var(--palette-alternate-surface-lowlight);--palette-default-text: var(--palette-alternate-text);--palette-default-text-subtle: var(--palette-alternate-text-subtle);--palette-default-text-on-active: var(--palette-alternate-text-on-active);--palette-default-border: var(--palette-alternate-border);--palette-default-disabled: var(--palette-alternate-disabled);--palette-default-overlay: var(--palette-alternate-overlay);--palette-default-transparent: var(--palette-alternate-transparent)}}@layer theme{:root,::backdrop,.v-alternate{--theme-primary: #dddddd;--theme-secondary: #303033;--theme-lightest: #ffffff;--theme-darkest: #000000;--theme-success: #148a0a;--theme-warning: #cca002;--theme-error: #b80600;--theme-info: #1e78a8;--theme-font-size: 12px;--theme-focus-outline-size: 1px;--theme-focus-outline-offset: 1px;--theme-border-size: 1px;--theme-border-radius: 4px;--theme-responsive-factor: 1.25;--theme-scale-factor: 1}}@layer theme{:root,::backdrop{--typography-display-1-font-family: sans-serif;--typography-display-1-font-size: 5rem;--typography-display-1-font-weight: 600;--typography-display-1-letter-spacing: 0rem;--typography-display-1-line-height: 6.5rem;--typography-display-1-text-decoration: none;--typography-display-1-text-transform: none;--typography-display-2-font-family: sans-serif;--typography-display-2-font-size: 4.0833333333rem;--typography-display-2-font-weight: 600;--typography-display-2-letter-spacing: 0rem;--typography-display-2-line-height: 5.1666666667rem;--typography-display-2-text-decoration: none;--typography-display-2-text-transform: none;--typography-headline-1-font-family: sans-serif;--typography-headline-1-font-size: 2.6666666667rem;--typography-headline-1-font-weight: 600;--typography-headline-1-letter-spacing: 0.0416666667rem;--typography-headline-1-line-height: 3.5rem;--typography-headline-1-text-decoration: none;--typography-headline-1-text-transform: none;--typography-headline-2-font-family: sans-serif;--typography-headline-2-font-size: 2.0833333333rem;--typography-headline-2-font-weight: 500;--typography-headline-2-letter-spacing: 0rem;--typography-headline-2-line-height: 2.75rem;--typography-headline-2-text-decoration: none;--typography-headline-2-text-transform: none;--typography-headline-3-font-family: sans-serif;--typography-headline-3-font-size: 1.6666666667rem;--typography-headline-3-font-weight: 600;--typography-headline-3-letter-spacing: 0rem;--typography-headline-3-line-height: 2.1666666667rem;--typography-headline-3-text-decoration: none;--typography-headline-3-text-transform: none;--typography-headline-4-font-family: sans-serif;--typography-headline-4-font-size: 1.5rem;--typography-headline-4-font-weight: 600;--typography-headline-4-letter-spacing: 0rem;--typography-headline-4-line-height: 2rem;--typography-headline-4-text-decoration: none;--typography-headline-4-text-transform: none;--typography-subtitle-1-font-family: sans-serif;--typography-subtitle-1-font-size: 1.3333333333rem;--typography-subtitle-1-font-weight: 600;--typography-subtitle-1-letter-spacing: 0rem;--typography-subtitle-1-line-height: 1.75rem;--typography-subtitle-1-text-decoration: none;--typography-subtitle-1-text-transform: none;--typography-subtitle-2-font-family: sans-serif;--typography-subtitle-2-font-size: 1.3333333333rem;--typography-subtitle-2-font-weight: 500;--typography-subtitle-2-letter-spacing: 0rem;--typography-subtitle-2-line-height: 1.75rem;--typography-subtitle-2-text-decoration: none;--typography-subtitle-2-text-transform: none;--typography-subtitle-3-font-family: sans-serif;--typography-subtitle-3-font-size: 1.1666666667rem;--typography-subtitle-3-font-weight: 600;--typography-subtitle-3-letter-spacing: 0rem;--typography-subtitle-3-line-height: 1.5rem;--typography-subtitle-3-text-decoration: none;--typography-subtitle-3-text-transform: none;--typography-overline-font-family: sans-serif;--typography-overline-font-size: 0.8333333333rem;--typography-overline-font-weight: 600;--typography-overline-letter-spacing: 0.0833333333rem;--typography-overline-line-height: 1.0833333333rem;--typography-overline-text-decoration: none;--typography-overline-text-transform: uppercase;--typography-body-1-font-family: sans-serif;--typography-body-1-font-size: 1.3333333333rem;--typography-body-1-font-weight: 400;--typography-body-1-letter-spacing: 0rem;--typography-body-1-line-height: 2rem;--typography-body-1-text-decoration: none;--typography-body-1-text-transform: none;--typography-body-2-font-family: sans-serif;--typography-body-2-font-size: 1.1666666667rem;--typography-body-2-font-weight: 400;--typography-body-2-letter-spacing: 0rem;--typography-body-2-line-height: 1.8333333333rem;--typography-body-2-text-decoration: none;--typography-body-2-text-transform: none;--typography-body-2-bold-font-family: sans-serif;--typography-body-2-bold-font-size: 1.1666666667rem;--typography-body-2-bold-font-weight: 600;--typography-body-2-bold-letter-spacing: 0rem;--typography-body-2-bold-line-height: 1.8333333333rem;--typography-body-2-bold-text-decoration: none;--typography-body-2-bold-text-transform: none;--typography-body-2-link-font-family: sans-serif;--typography-body-2-link-font-size: 1.1666666667rem;--typography-body-2-link-font-weight: 500;--typography-body-2-link-letter-spacing: 0rem;--typography-body-2-link-line-height: 1.8333333333rem;--typography-body-2-link-text-decoration: underline;--typography-body-2-link-text-transform: none;--typography-body-2-medium-font-family: sans-serif;--typography-body-2-medium-font-size: 1.1666666667rem;--typography-body-2-medium-font-weight: 500;--typography-body-2-medium-letter-spacing: 0rem;--typography-body-2-medium-line-height: 1.8333333333rem;--typography-body-2-medium-text-decoration: none;--typography-body-2-medium-text-transform: none;--typography-body-3-font-family: sans-serif;--typography-body-3-font-size: 1rem;--typography-body-3-font-weight: 400;--typography-body-3-letter-spacing: 0rem;--typography-body-3-line-height: 1.5rem;--typography-body-3-text-decoration: none;--typography-body-3-text-transform: none;--typography-button-large-font-family: sans-serif;--typography-button-large-font-size: 1.1666666667rem;--typography-button-large-font-weight: 600;--typography-button-large-letter-spacing: 0.0208333333rem;--typography-button-large-line-height: 1.5rem;--typography-button-large-text-decoration: none;--typography-button-large-text-transform: none;--typography-button-medium-font-family: sans-serif;--typography-button-medium-font-size: 1rem;--typography-button-medium-font-weight: 600;--typography-button-medium-letter-spacing: 0.0208333333rem;--typography-button-medium-line-height: 1.3333333333rem;--typography-button-medium-text-decoration: none;--typography-button-medium-text-transform: none;--typography-button-small-font-family: sans-serif;--typography-button-small-font-size: 1rem;--typography-button-small-font-weight: 500;--typography-button-small-letter-spacing: 0.0208333333rem;--typography-button-small-line-height: 1.3333333333rem;--typography-button-small-text-decoration: none;--typography-button-small-text-transform: none;--typography-label-large-font-family: sans-serif;--typography-label-large-font-size: 1.1666666667rem;--typography-label-large-font-weight: 400;--typography-label-large-letter-spacing: 0rem;--typography-label-large-line-height: 1.5rem;--typography-label-large-text-decoration: none;--typography-label-large-text-transform: none;--typography-label-large-active-font-family: sans-serif;--typography-label-large-active-font-size: 1.1666666667rem;--typography-label-large-active-font-weight: 500;--typography-label-large-active-letter-spacing: 0rem;--typography-label-large-active-line-height: 1.5rem;--typography-label-large-active-text-decoration: none;--typography-label-large-active-text-transform: none;--typography-label-font-family: sans-serif;--typography-label-font-size: 1rem;--typography-label-font-weight: 400;--typography-label-letter-spacing: 0rem;--typography-label-line-height: 16px;--typography-label-text-decoration: none;--typography-label-text-transform: none;--typography-label-active-font-family: sans-serif;--typography-label-active-font-size: 1rem;--typography-label-active-font-weight: 500;--typography-label-active-letter-spacing: 0rem;--typography-label-active-line-height: 1.3333333333rem;--typography-label-active-text-decoration: none;--typography-label-active-text-transform: none;--typography-label-small-font-family: sans-serif;--typography-label-small-font-size: 0.9166666667rem;--typography-label-small-font-weight: 400;--typography-label-small-letter-spacing: 0rem;--typography-label-small-line-height: 1.1666666667rem;--typography-label-small-text-decoration: none;--typography-label-small-text-transform: none}}