mirror of https://github.com/Qiskit/qiskit.org.git
103 lines
2.6 KiB
SCSS
103 lines
2.6 KiB
SCSS
// Variables
|
|
//
|
|
// Variables are used to customize our Carbon theme and are also made available
|
|
// to Vue components via the `@nuxtjs/style-resources` module.
|
|
|
|
|
|
// Carbon imports
|
|
|
|
@import '~@carbon/colors/scss/colors';
|
|
|
|
$active-color: $purple-70;
|
|
$focus-color: $purple-60;
|
|
|
|
|
|
// Semantic Carbon variables
|
|
//
|
|
// To be used directly in our Vue components.
|
|
// For consistent naming, we use the
|
|
// `$<component>-<state>-<property>-<size/variant>` formula.
|
|
// Ex: $text-active-color and $text-color-light.
|
|
|
|
$background-color-white: $white-0;
|
|
$background-color-light: $cool-gray-20;
|
|
$background-color-light-2: $cool-gray-30;
|
|
$background-color-lighter: $cool-gray-10;
|
|
$background-color-dark: $cool-gray-80;
|
|
$background-color-darker: $cool-gray-90;
|
|
$background-color-black: $gray-100;
|
|
|
|
$background-color-highlight: $purple-20;
|
|
|
|
$background-color-secondary: $purple-70;
|
|
|
|
$background-color-tertiary: $purple-60;
|
|
|
|
$border-color: $cool-gray-20;
|
|
$border-active-color: $purple-70;
|
|
|
|
$border-color-secondary: $purple-70;
|
|
|
|
$border-color-tertiary: $purple-60;
|
|
|
|
$border-color-quaternary: $gray-60;
|
|
|
|
$shadow-color: $gray-100;
|
|
|
|
$text-color: $gray-100;
|
|
$text-color-white: $white-0;
|
|
$text-color-light: $cool-gray-80;
|
|
$text-color-lighter: $cool-gray-60;
|
|
$text-color-lighter-2: $gray-10;
|
|
$text-active-color: $purple-70;
|
|
|
|
$link-color: $blue-50;
|
|
$link-hover-color: $blue-60;
|
|
$link-visited-color: $purple-70;
|
|
|
|
$link-color-secondary: $gray-80;
|
|
$link-hover-color-secondary: $gray-80;
|
|
$link-visited-color-secondary: $gray-80;
|
|
|
|
$link-color-tertiary: $purple-70;
|
|
$link-hover-color-tertiary: $purple-80;
|
|
|
|
$link-color-quaternary: $purple-50;
|
|
$link-hover-color-quaternary: $purple-40;
|
|
|
|
$button-background-color: $purple-70;
|
|
$button-background-color-light: $purple-60;
|
|
$button-background-color-dark: $purple-80;
|
|
$button-text-color: $white-0;
|
|
|
|
$button-background-color-secondary: $cool-gray-10;
|
|
$button-background-color-secondary-dark: $purple-70;
|
|
$button-text-color-secondary: $purple-70;
|
|
$button-active-text-color-secondary: $white-0;
|
|
|
|
$button-background-color-tertiary: $cool-gray-90;
|
|
$button-background-color-tertiary-dark: $purple-70;
|
|
$button-text-color-tertiary: $purple-40;
|
|
|
|
$tag-background-color: $purple-70;
|
|
$tag-text-color: $white-0;
|
|
|
|
$code-text-color: $purple-10;
|
|
|
|
$blockquote-text-color: $purple-70;
|
|
|
|
|
|
// All Carbon variables
|
|
|
|
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
|
|
@import '~carbon-components/scss/globals/scss/_vars.scss';
|
|
|
|
|
|
// Other variables
|
|
|
|
$column-size-large: 4rem;
|
|
$column-size-medium: 5rem;
|
|
$column-size-small: 5rem;
|
|
|
|
$ibm-blue: #0a1d8f; // TODO: These are colors with special meanings, we should decide if we want them or not.
|