mirror of https://github.com/Qiskit/qiskit.org.git
55 lines
2.1 KiB
SCSS
55 lines
2.1 KiB
SCSS
@use "~/assets/scss/carbon.scss";
|
|
|
|
// Semantic Carbon variables
|
|
// To be used directly in our Vue components.
|
|
// For consistent naming, we use the
|
|
// `$<component>-<state>-<property>-<size/variant>` formula.
|
|
// Ex: carbon.$text-active-color and qiskit.$text-color-light.
|
|
|
|
$background-color-white: carbon.$white-0;
|
|
$background-color-light: carbon.$cool-gray-20;
|
|
$background-color-lighter: carbon.$cool-gray-10;
|
|
$background-color-dark: carbon.$cool-gray-80;
|
|
$background-color-darker: carbon.$cool-gray-90;
|
|
$background-color-black: carbon.$gray-100;
|
|
$background-color-secondary: carbon.$purple-70;
|
|
$border-color: carbon.$cool-gray-20;
|
|
$border-active-color: carbon.$purple-70;
|
|
$border-color-secondary: carbon.$purple-70;
|
|
$border-color-tertiary: carbon.$purple-60;
|
|
$border-color-quaternary: carbon.$gray-60;
|
|
$text-color: carbon.$gray-100;
|
|
$text-color-white: carbon.$white-0;
|
|
$text-color-light: carbon.$cool-gray-80;
|
|
$text-color-lighter: carbon.$cool-gray-60;
|
|
$text-color-lighter-2: carbon.$gray-10;
|
|
$text-active-color: carbon.$purple-70;
|
|
$link-color: carbon.$blue-50;
|
|
$link-hover-color: carbon.$blue-60;
|
|
$link-visited-color: carbon.$purple-70;
|
|
$link-color-secondary: carbon.$gray-80;
|
|
$link-hover-color-secondary: carbon.$gray-80;
|
|
$link-visited-color-secondary: carbon.$gray-80;
|
|
$link-color-tertiary: carbon.$purple-70;
|
|
$link-hover-color-tertiary: carbon.$purple-80;
|
|
$link-color-quaternary: carbon.$purple-50;
|
|
$link-hover-color-quaternary: carbon.$purple-40;
|
|
$button-background-color: carbon.$purple-70;
|
|
$button-background-color-light: carbon.$purple-60;
|
|
$button-background-color-dark: carbon.$purple-80;
|
|
$button-text-color: carbon.$white-0;
|
|
$button-background-color-secondary: carbon.$cool-gray-10;
|
|
$button-background-color-secondary-dark: carbon.$purple-70;
|
|
$button-text-color-secondary: carbon.$purple-70;
|
|
$button-active-text-color-secondary: carbon.$white-0;
|
|
$button-background-color-tertiary: carbon.$cool-gray-90;
|
|
$button-background-color-tertiary-dark: carbon.$purple-70;
|
|
$button-text-color-tertiary: carbon.$purple-40;
|
|
$tag-background-color: carbon.$purple-70;
|
|
$tag-text-color: carbon.$white-0;
|
|
|
|
// Other variables
|
|
|
|
$column-size-large: 4rem;
|
|
$column-size-medium: 5rem;
|