theme.scss

@use 'sass:map';
@import 'carbon-components/scss/globals/scss/vendor/@carbon/themes/scss';
@import './colors.scss';

$parliament-watch--theme: (
	// Core
	ui-background: $white,
	interactive-01: $blue-60,
	interactive-02: $gray-80,
	interactive-03: $blue-60,
	interactive-04: $blue-60,
	danger-01: $red-60,
	danger-02: $red-60,
	ui-01: $gray-10,
	ui-02: $white,
	ui-03: $gray-20,
	ui-04: $gray-50,
	ui-05: $gray-100,
	button-separator: $gray-20,
	decorative-01: $gray-20,
	text-01: $gray-100,
	text-02: $gray-60,
	text-03: $gray-40,
	text-04: $white,
	text-05: $gray-60,
	text-error: $red-60,
	link-01: $blue-60,
	link-02: $blue-70,
	inverse-link: $blue-40,
	icon-01: $gray-100,
	icon-02: $gray-70,
	icon-03: $white,
	field-01: $gray-10,
	field-02: $white,
	inverse-01: $white,
	inverse-02: $gray-80,
	support-01: $red-60,
	support-02: $teal-60,
	support-03: $yellow-30,
	support-04: $blue-70,
	inverse-support-01: $red-50,
	inverse-support-02: $teal-40,
	inverse-support-03: $yellow-30,
	inverse-support-04: $blue-50,
	overlay-01: rgba(23, 23, 23, 0.5),
	// Interactive
	focus: $blue-60,
	inverse-focus-ui: $white,
	hover-primary: $blue-70,
	hover-primary-text: $blue-80,
	hover-secondary: $gray-70,
	hover-tertiary: $blue-60,
	hover-ui: $gray-10,
	hover-light-ui: $gray-10,
	hover-selected-ui: $gray-20,
	hover-danger: $red-60,
	hover-row: $gray-10,
	inverse-hover-ui: $gray-80,
	active-primary: $blue-80,
	active-secondary: $gray-60,
	active-tertiary: $blue-80,
	active-ui: $gray-30,
	active-light-ui: $gray-30,
	active-danger: $red-80,
	selected-ui: $gray-20,
	selected-light-ui: $gray-20,
	highlight: $blue-20,
	skeleton-01: $gray-10,
	skeleton-02: $gray-30,
	visited-link: $purple-60,
	disabled-01: $gray-10,
	disabled-02: $gray-30,
	disabled-03: $gray-50
) !default;

$carbon--theme: map.merge($carbon--theme--white, $parliament-watch--theme);
@include carbon--theme();