@engie-group/fluid-design-tokens
Version:
Fluid Design Tokens
771 lines (770 loc) • 137 kB
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: ["./src/**/*.{ts,tsx}"],
darkMode: "class",
theme: {
extend: {
semantic: {
color: {
background: {
neutral: {
primary: {
default: "var(--nj-semantic-color-background-neutral-primary-default)",
hovered: "var(--nj-semantic-color-background-neutral-primary-hovered)",
focused: "var(--nj-semantic-color-background-neutral-primary-focused)",
pressed: "var(--nj-semantic-color-background-neutral-primary-pressed)",
selected: "var(--nj-semantic-color-background-neutral-primary-selected)",
translucent: {
default: "var(--nj-semantic-color-background-neutral-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-neutral-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-neutral-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-neutral-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-neutral-primary-translucent-selected)"
}
},
secondary: {
default: "var(--nj-semantic-color-background-neutral-secondary-default)",
hovered: "var(--nj-semantic-color-background-neutral-secondary-hovered)",
focused: "var(--nj-semantic-color-background-neutral-secondary-focused)",
pressed: "var(--nj-semantic-color-background-neutral-secondary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-neutral-secondary-translucent-default)",
hovered: "var(--nj-semantic-color-background-neutral-secondary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-neutral-secondary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-neutral-secondary-translucent-pressed)"
}
},
tertiary: {
default: "var(--nj-semantic-color-background-neutral-tertiary-default)",
hovered: "var(--nj-semantic-color-background-neutral-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-neutral-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-neutral-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-neutral-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-neutral-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-neutral-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-neutral-tertiary-translucent-pressed)"
}
},
solid: {
default: "var(--nj-semantic-color-background-neutral-solid-default)",
hovered: "var(--nj-semantic-color-background-neutral-solid-hovered)",
focused: "var(--nj-semantic-color-background-neutral-solid-focused)",
pressed: "var(--nj-semantic-color-background-neutral-solid-pressed)"
},
inverse: {
default: "var(--nj-semantic-color-background-neutral-inverse-default)",
hovered: "var(--nj-semantic-color-background-neutral-inverse-hovered)",
focused: "var(--nj-semantic-color-background-neutral-inverse-focused)",
pressed: "var(--nj-semantic-color-background-neutral-inverse-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-neutral-inverse-translucent-default)",
hovered: "var(--nj-semantic-color-background-neutral-inverse-translucent-hovered)",
focused: "var(--nj-semantic-color-background-neutral-inverse-translucent-focused)",
pressed: "var(--nj-semantic-color-background-neutral-inverse-translucent-pressed)"
}
},
spotlight: {
default: "var(--nj-semantic-color-background-neutral-spotlight-default)"
}
},
brand: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-brand-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-brand-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-brand-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-brand-primary-translucent-pressed)"
}
},
secondary: {
default: "var(--nj-semantic-color-background-brand-secondary-default)",
hovered: "var(--nj-semantic-color-background-brand-secondary-hovered)",
focused: "var(--nj-semantic-color-background-brand-secondary-focused)",
pressed: "var(--nj-semantic-color-background-brand-secondary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-brand-secondary-translucent-default)",
hovered: "var(--nj-semantic-color-background-brand-secondary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-brand-secondary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-brand-secondary-translucent-pressed)"
}
},
tertiary: {
default: "var(--nj-semantic-color-background-brand-tertiary-default)",
hovered: "var(--nj-semantic-color-background-brand-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-brand-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-brand-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-brand-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-brand-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-brand-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-brand-tertiary-translucent-pressed)"
}
},
solid: {
default: "var(--nj-semantic-color-background-brand-solid-default)",
hovered: "var(--nj-semantic-color-background-brand-solid-hovered)",
focused: "var(--nj-semantic-color-background-brand-solid-focused)",
pressed: "var(--nj-semantic-color-background-brand-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-brand-spotlight-default)"
}
},
status: {
danger: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-status-danger-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-danger-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-danger-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-danger-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-status-danger-primary-translucent-selected)"
}
},
secondary: {
default: "var(--nj-semantic-color-background-status-danger-secondary-default)",
hovered: "var(--nj-semantic-color-background-status-danger-secondary-hovered)",
focused: "var(--nj-semantic-color-background-status-danger-secondary-focused)",
pressed: "var(--nj-semantic-color-background-status-danger-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-status-danger-tertiary-default)",
hovered: "var(--nj-semantic-color-background-status-danger-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-status-danger-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-status-danger-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-status-danger-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-danger-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-danger-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-danger-tertiary-translucent-pressed)"
}
},
solid: {
default: "var(--nj-semantic-color-background-status-danger-solid-default)",
hovered: "var(--nj-semantic-color-background-status-danger-solid-hovered)",
pressed: "var(--nj-semantic-color-background-status-danger-solid-pressed)",
focused: "var(--nj-semantic-color-background-status-danger-solid-focused)"
},
spotlight: {
default: "var(--nj-semantic-color-background-status-danger-spotlight-default)"
}
},
success: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-status-success-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-success-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-success-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-success-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-status-success-primary-translucent-selected)"
}
},
secondary: {
default: "var(--nj-semantic-color-background-status-success-secondary-default)",
hovered: "var(--nj-semantic-color-background-status-success-secondary-hovered)",
focused: "var(--nj-semantic-color-background-status-success-secondary-focused)",
pressed: "var(--nj-semantic-color-background-status-success-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-status-success-tertiary-default)",
hovered: "var(--nj-semantic-color-background-status-success-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-status-success-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-status-success-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-status-success-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-success-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-success-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-success-tertiary-translucent-pressed)"
}
},
solid: {
default: "var(--nj-semantic-color-background-status-success-solid-default)",
hovered: "var(--nj-semantic-color-background-status-success-solid-hovered)",
focused: "var(--nj-semantic-color-background-status-success-solid-focused)",
pressed: "var(--nj-semantic-color-background-status-success-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-status-success-spotlight-default)"
}
},
warning: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-status-warning-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-warning-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-warning-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-warning-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-status-warning-primary-translucent-selected)"
}
},
secondary: {
default: "var(--nj-semantic-color-background-status-warning-secondary-default)",
hovered: "var(--nj-semantic-color-background-status-warning-secondary-hovered)",
focused: "var(--nj-semantic-color-background-status-warning-secondary-focused)",
pressed: "var(--nj-semantic-color-background-status-warning-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-status-warning-tertiary-default)",
hovered: "var(--nj-semantic-color-background-status-warning-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-status-warning-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-status-warning-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-status-warning-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-warning-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-warning-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-warning-tertiary-translucent-pressed)"
}
},
solid: {
default: "var(--nj-semantic-color-background-status-warning-solid-default)",
hovered: "var(--nj-semantic-color-background-status-warning-solid-hovered)",
focused: "var(--nj-semantic-color-background-status-warning-solid-focused)",
pressed: "var(--nj-semantic-color-background-status-warning-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-status-warning-spotlight-default)"
}
},
discovery: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-status-discovery-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-discovery-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-discovery-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-discovery-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-status-discovery-primary-translucent-selected)"
}
},
secondary: {
default: "var(--nj-semantic-color-background-status-discovery-secondary-default)",
hovered: "var(--nj-semantic-color-background-status-discovery-secondary-hovered)",
focused: "var(--nj-semantic-color-background-status-discovery-secondary-focused)",
pressed: "var(--nj-semantic-color-background-status-discovery-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-status-discovery-tertiary-default)",
hovered: "var(--nj-semantic-color-background-status-discovery-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-status-discovery-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-status-discovery-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-status-discovery-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-discovery-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-discovery-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-discovery-tertiary-translucent-pressed)"
}
},
solid: {
default: "var(--nj-semantic-color-background-status-discovery-solid-default)",
hovered: "var(--nj-semantic-color-background-status-discovery-solid-hovered)",
focused: "var(--nj-semantic-color-background-status-discovery-solid-focused)",
pressed: "var(--nj-semantic-color-background-status-discovery-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-status-discovery-spotlight-default)"
}
},
information: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-status-information-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-information-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-information-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-information-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-status-information-primary-translucent-selected)"
}
},
solid: {
default: "var(--nj-semantic-color-background-status-information-solid-default)",
hovered: "var(--nj-semantic-color-background-status-information-solid-hovered)",
focused: "var(--nj-semantic-color-background-status-information-solid-focused)",
pressed: "var(--nj-semantic-color-background-status-information-solid-pressed)"
},
secondary: {
default: "var(--nj-semantic-color-background-status-information-secondary-default)",
hovered: "var(--nj-semantic-color-background-status-information-secondary-hovered)",
focused: "var(--nj-semantic-color-background-status-information-secondary-focused)",
pressed: "var(--nj-semantic-color-background-status-information-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-status-information-tertiary-default)",
hovered: "var(--nj-semantic-color-background-status-information-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-status-information-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-status-information-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-status-information-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-information-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-information-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-information-tertiary-translucent-pressed)"
}
},
spotlight: {
default: "var(--nj-semantic-color-background-status-information-spotlight-default)"
}
},
planet: {
primary: {
translucent: {
default: "var(--nj-semantic-color-background-status-planet-primary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-planet-primary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-planet-primary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-planet-primary-translucent-pressed)",
selected: "var(--nj-semantic-color-background-status-planet-primary-translucent-selected)"
}
},
solid: {
default: "var(--nj-semantic-color-background-status-planet-solid-default)",
hovered: "var(--nj-semantic-color-background-status-planet-solid-hovered)",
pressed: "var(--nj-semantic-color-background-status-planet-solid-pressed)",
focused: "var(--nj-semantic-color-background-status-planet-solid-focused)"
},
secondary: {
default: "var(--nj-semantic-color-background-status-planet-secondary-default)",
hovered: "var(--nj-semantic-color-background-status-planet-secondary-hovered)",
focused: "var(--nj-semantic-color-background-status-planet-secondary-focused)",
pressed: "var(--nj-semantic-color-background-status-planet-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-status-planet-tertiary-default)",
hovered: "var(--nj-semantic-color-background-status-planet-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-status-planet-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-status-planet-tertiary-pressed)",
translucent: {
default: "var(--nj-semantic-color-background-status-planet-tertiary-translucent-default)",
hovered: "var(--nj-semantic-color-background-status-planet-tertiary-translucent-hovered)",
focused: "var(--nj-semantic-color-background-status-planet-tertiary-translucent-focused)",
pressed: "var(--nj-semantic-color-background-status-planet-tertiary-translucent-pressed)"
}
},
spotlight: {
default: "var(--nj-semantic-color-background-status-planet-spotlight-default)"
}
}
},
accent: {
pink: {
secondary: {
default: "var(--nj-semantic-color-background-accent-pink-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-pink-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-pink-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-pink-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-pink-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-pink-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-pink-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-pink-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-pink-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-pink-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-pink-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-pink-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-pink-spotlight-default)"
}
},
red: {
secondary: {
default: "var(--nj-semantic-color-background-accent-red-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-red-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-red-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-red-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-red-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-red-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-red-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-red-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-red-solid-default)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-red-spotlight-default)"
}
},
orange: {
secondary: {
default: "var(--nj-semantic-color-background-accent-orange-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-orange-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-orange-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-orange-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-orange-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-orange-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-orange-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-orange-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-orange-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-orange-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-orange-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-orange-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-orange-spotlight-default)"
}
},
yellow: {
secondary: {
default: "var(--nj-semantic-color-background-accent-yellow-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-yellow-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-yellow-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-yellow-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-yellow-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-yellow-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-yellow-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-yellow-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-yellow-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-yellow-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-yellow-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-yellow-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-yellow-spotlight-default)"
}
},
green: {
secondary: {
default: "var(--nj-semantic-color-background-accent-green-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-green-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-green-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-green-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-green-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-green-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-green-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-green-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-green-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-green-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-green-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-green-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-green-spotlight-default)"
}
},
grey: {
secondary: {
default: "var(--nj-semantic-color-background-accent-grey-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-grey-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-grey-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-grey-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-grey-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-grey-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-grey-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-grey-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-grey-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-grey-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-grey-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-grey-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-grey-spotlight-default)"
}
},
blue: {
secondary: {
default: "var(--nj-semantic-color-background-accent-blue-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-blue-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-blue-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-blue-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-blue-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-blue-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-blue-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-blue-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-blue-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-blue-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-blue-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-blue-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-blue-spotlight-default)"
}
},
ultramarine: {
secondary: {
default: "var(--nj-semantic-color-background-accent-ultramarine-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-ultramarine-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-ultramarine-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-ultramarine-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-ultramarine-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-ultramarine-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-ultramarine-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-ultramarine-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-ultramarine-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-ultramarine-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-ultramarine-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-ultramarine-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-ultramarine-spotlight-default)"
}
},
purple: {
secondary: {
default: "var(--nj-semantic-color-background-accent-purple-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-purple-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-purple-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-purple-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-purple-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-purple-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-purple-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-purple-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-purple-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-purple-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-purple-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-purple-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-purple-spotlight-default)"
}
},
teal: {
secondary: {
default: "var(--nj-semantic-color-background-accent-teal-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-teal-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-teal-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-teal-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-teal-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-teal-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-teal-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-teal-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-teal-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-teal-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-teal-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-teal-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-teal-spotlight-default)"
}
},
lime: {
secondary: {
default: "var(--nj-semantic-color-background-accent-lime-secondary-default)",
hovered: "var(--nj-semantic-color-background-accent-lime-secondary-hovered)",
focused: "var(--nj-semantic-color-background-accent-lime-secondary-focused)",
pressed: "var(--nj-semantic-color-background-accent-lime-secondary-pressed)"
},
tertiary: {
default: "var(--nj-semantic-color-background-accent-lime-tertiary-default)",
hovered: "var(--nj-semantic-color-background-accent-lime-tertiary-hovered)",
focused: "var(--nj-semantic-color-background-accent-lime-tertiary-focused)",
pressed: "var(--nj-semantic-color-background-accent-lime-tertiary-pressed)"
},
solid: {
default: "var(--nj-semantic-color-background-accent-lime-solid-default)",
hovered: "var(--nj-semantic-color-background-accent-lime-solid-hovered)",
focused: "var(--nj-semantic-color-background-accent-lime-solid-focused)",
pressed: "var(--nj-semantic-color-background-accent-lime-solid-pressed)"
},
spotlight: {
default: "var(--nj-semantic-color-background-accent-lime-spotlight-default)"
}
}
},
additional: {
engieRay: {
default: "var(--nj-semantic-color-background-additional-engie-ray-default)"
},
signature: {
default: "var(--nj-semantic-color-background-additional-signature-default)"
},
ai: {
default: "var(--nj-semantic-color-background-additional-ai-default)"
}
}
},
border: {
neutral: {
minimal: {
default: "var(--nj-semantic-color-border-neutral-minimal-default)",
hovered: "var(--nj-semantic-color-border-neutral-minimal-hovered)",
focused: "var(--nj-semantic-color-border-neutral-minimal-focused)",
pressed: "var(--nj-semantic-color-border-neutral-minimal-pressed)",
selected: "var(--nj-semantic-color-border-neutral-minimal-selected)"
},
subtle: {
default: "var(--nj-semantic-color-border-neutral-subtle-default)",
hovered: "var(--nj-semantic-color-border-neutral-subtle-hovered)",
focused: "var(--nj-semantic-color-border-neutral-subtle-focused)",
pressed: "var(--nj-semantic-color-border-neutral-subtle-pressed)",
selected: "var(--nj-semantic-color-border-neutral-subtle-selected)"
},
moderate: {
default: "var(--nj-semantic-color-border-neutral-moderate-default)",
hovered: "var(--nj-semantic-color-border-neutral-moderate-hovered)",
focused: "var(--nj-semantic-color-border-neutral-moderate-focused)",
pressed: "var(--nj-semantic-color-border-neutral-moderate-pressed)",
selected: "var(--nj-semantic-color-border-neutral-moderate-selected)"
},
strong: {
default: "var(--nj-semantic-color-border-neutral-strong-default)",
hovered: "var(--nj-semantic-color-border-neutral-strong-hovered)",
focused: "var(--nj-semantic-color-border-neutral-strong-focused)",
pressed: "var(--nj-semantic-color-border-neutral-strong-pressed)",
selected: "var(--nj-semantic-color-border-neutral-strong-selected)"
},
heavy: {
default: "var(--nj-semantic-color-border-neutral-heavy-default)"
},
inverse: {
default: "var(--nj-semantic-color-border-neutral-inverse-default)",
hovered: "var(--nj-semantic-color-border-neutral-inverse-hovered)",
focused: "var(--nj-semantic-color-border-neutral-inverse-focused)",
pressed: "var(--nj-semantic-color-border-neutral-inverse-pressed)",
selected: "var(--nj-semantic-color-border-neutral-inverse-selected)"
}
},
brand: {
subtle: {
default: "var(--nj-semantic-color-border-brand-subtle-default)",
hovered: "var(--nj-semantic-color-border-brand-subtle-hovered)",
focused: "var(--nj-semantic-color-border-brand-subtle-focused)",
pressed: "var(--nj-semantic-color-border-brand-subtle-pressed)",
selected: "var(--nj-semantic-color-border-brand-subtle-selected)"
},
moderate: {
default: "var(--nj-semantic-color-border-brand-moderate-default)",
hovered: "var(--nj-semantic-color-border-brand-moderate-hovered)",
focused: "var(--nj-semantic-color-border-brand-moderate-focused)",
pressed: "var(--nj-semantic-color-border-brand-moderate-pressed)",
selected: "var(--nj-semantic-color-border-brand-moderate-selected)"
},
strong: {
default: "var(--nj-semantic-color-border-brand-strong-default)",
hovered: "var(--nj-semantic-color-border-brand-strong-hovered)",
focused: "var(--nj-semantic-color-border-brand-strong-focused)",
pressed: "var(--nj-semantic-color-border-brand-strong-pressed)",
selected: "var(--nj-semantic-color-border-brand-strong-selected)"
}
},
status: {
danger: {
subtle: {
default: "var(--nj-semantic-color-border-status-danger-subtle-default)",
hovered: "var(--nj-semantic-color-border-status-danger-subtle-hovered)",
focused: "var(--nj-semantic-color-border-status-danger-subtle-focused)",
pressed: "var(--nj-semantic-color-border-status-danger-subtle-pressed)",
selected: "var(--nj-semantic-color-border-status-danger-subtle-selected)"
},
moderate: {
default: "var(--nj-semantic-color-border-status-danger-moderate-default)",
hovered: "var(--nj-semantic-color-border-status-danger-moderate-hovered)",
focused: "var(--nj-semantic-color-border-status-danger-moderate-focused)",
pressed: "var(--nj-semantic-color-border-status-danger-moderate-pressed)",
selected: "var(--nj-semantic-color-border-status-danger-moderate-selected)"
},
strong: {
default: "var(--nj-semantic-color-border-status-danger-strong-default)",
hovered: "var(--nj-semantic-color-border-status-danger-strong-hovered)",
focused: "var(--nj-semantic-color-border-status-danger-strong-focused)",
pressed: "var(--nj-semantic-color-border-status-danger-strong-pressed)",
selected: "var(--nj-semantic-color-border-status-danger-strong-selected)"
}
},
warning: {
subtle: {
default: "var(--nj-semantic-color-border-status-warning-subtle-default)",
hovered: "var(--nj-semantic-color-border-status-warning-subtle-hovered)",
focused: "var(--nj-semantic-color-border-status-warning-subtle-focused)",
pressed: "var(--nj-semantic-color-border-status-warning-subtle-pressed)",
selected: "var(--nj-semantic-color-border-status-warning-subtle-selected)"
},
moderate: {
default: "var(--nj-semantic-color-border-status-warning-moderate-default)",
hovered: "var(--nj-semantic-color-border-status-warning-moderate-hovered)",
focused: "var(--nj-semantic-color-border-status-warning-moderate-focused)",
pressed: "var(--nj-semantic-color-border-status-warning-moderate-pressed)",
selected: "var(--nj-semantic-color-border-status-warning-moderate-selected)"
},
strong: {
default: "var(--nj-semantic-color-border-status-warning-strong-default)",
hovered: "var(--nj-semantic-color-border-status-warning-strong-hovered)",
focused: "var(--nj-semantic-color-border-status-warning-strong-focused)",
pressed: "var(--nj-semantic-color-border-status-warning-strong-pressed)",
selected: "var(--nj-semantic-color-border-status-warning-strong-selected)"
}
},
success: {
subtle: {
default: "var(--nj-semantic-color-border-status-success-subtle-default)",
hovered: "var(--nj-semantic-color-border-status-success-subtle-hovered)",
focused: "var(--nj-semantic-color-border-status-success-subtle-focused)",
pressed: "var(--nj-semantic-color-border-status-success-subtle-pressed)",
selected: "var(--nj-semantic-color-border-status-success-subtle-selected)"
},
moderate: {
default: "var(--nj-semantic-color-border-status-success-moderate-default)",
hovered: "var(--nj-semantic-color-border-status-success-moderate-hovered)",
focused: "var(--nj-semantic-color-border-status-success-moderate-focused)",
pressed: "var(--nj-semantic-color-border-status-success-moderate-pressed)",
selected: "var(--nj-semantic-color-border-status-success-moderate-selected)"
},
strong: {
default: "var(--nj-semantic-color-border-status-success-strong-default)",
hovered: "var(--nj-semantic-color-border-status-success-strong-hovered)",
focused: "var(--nj-semantic-color-border-status-success-strong-focused)",
pressed: "var(--nj-semantic-color-border-status-success-strong-pressed)",
selected: "var(--nj-semantic-color-border-status-success-strong-selected)"
}
},
discovery: {
subtle: {
default: "var(--nj-semantic-color-border-status-discovery-subtle-default)",
hovered: "var(--nj-semantic-color-border-status-discovery-subtle-hovered)",
focused: "var(--nj-semantic-color-border-status-discovery-subtle-focused)",
pressed: "var(--nj-semantic-color-border-status-discovery-subtle-pressed)",
selected: "var(--nj-semantic-color-border-status-discovery-subtle-selected)"
},
moderate: {
default: "var(--nj-semantic-color-border-status-discovery-moderate-default)",
hovered: "var(--nj-semantic-color-border-status-discovery-moderate-hovered)",
focused: "var(--nj-semantic-color-border-status-discovery-moderate-focused)",
pressed: "var(--nj-semantic-color-border-status-discovery-moderate-pressed)",
selected: "var(--nj-semantic-color-border-status-discovery-moderate-selected)"
},
strong: {
default: "var(--nj-semantic-color-border-status-discovery-strong-default)",
hovered: "var(--nj-semantic-color-border-status-discovery-strong-hovered)",
focused: "var(--nj-semantic-color-border-status-discovery-strong-focused)",
pressed: "var(--nj-semantic-color-border-status-discovery-strong-pressed)",
selected: "var(--nj-semantic-color-border-status-discovery-strong-selected)"
}
},
information: {
subtle: {
default: "var(--nj-semantic-color-border-status-information-subtle-default)",
hovered: "var(--nj-semantic-color-border-status-information-subtle-hovered)",
focused: "var(--nj-semantic-color-border-status-information-subtle-focused)",