430 lines
18 KiB
SCSS
430 lines
18 KiB
SCSS
.tiptap-button {
|
|
/**************************************************
|
|
Default button background color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-bg-color: var(--tt-gray-light-a-100);
|
|
--tt-button-hover-bg-color: var(--tt-gray-light-200);
|
|
--tt-button-active-bg-color: var(--tt-gray-light-a-200);
|
|
--tt-button-active-bg-color-emphasized: var(
|
|
--tt-brand-color-100
|
|
); //more important active state
|
|
--tt-button-active-bg-color-subdued: var(
|
|
--tt-gray-light-a-200
|
|
); //less important active state
|
|
--tt-button-active-hover-bg-color: var(--tt-gray-light-300);
|
|
--tt-button-active-hover-bg-color-emphasized: var(
|
|
--tt-brand-color-200
|
|
); //more important active state hover
|
|
--tt-button-active-hover-bg-color-subdued: var(
|
|
--tt-gray-light-a-300
|
|
); //less important active state hover
|
|
--tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-bg-color: var(--tt-gray-dark-a-100);
|
|
--tt-button-hover-bg-color: var(--tt-gray-dark-200);
|
|
--tt-button-active-bg-color: var(--tt-gray-dark-a-200);
|
|
--tt-button-active-bg-color-emphasized: var(
|
|
--tt-brand-color-900
|
|
); //more important active state
|
|
--tt-button-active-bg-color-subdued: var(
|
|
--tt-gray-dark-a-200
|
|
); //less important active state
|
|
--tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
|
|
--tt-button-active-hover-bg-color-emphasized: var(
|
|
--tt-brand-color-800
|
|
); //more important active state hover
|
|
--tt-button-active-hover-bg-color-subdued: var(
|
|
--tt-gray-dark-a-300
|
|
); //less important active state hover
|
|
--tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
|
|
}
|
|
|
|
/**************************************************
|
|
Default button text color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-text-color: var(--tt-gray-light-a-600);
|
|
--tt-button-hover-text-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
|
|
--tt-button-disabled-text-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-text-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-hover-text-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
|
|
--tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
|
|
}
|
|
|
|
/**************************************************
|
|
Default button icon color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-icon-color: var(--tt-gray-light-a-600);
|
|
--tt-button-hover-icon-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-icon-color: var(--tt-brand-color-500);
|
|
--tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
|
|
--tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
|
|
--tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-icon-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-icon-color: var(--tt-brand-color-400);
|
|
--tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
|
|
--tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
|
|
--tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
|
|
}
|
|
|
|
/**************************************************
|
|
Default button subicon color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
|
|
--tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
|
|
--tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
|
|
--tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
|
|
--tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
|
|
--tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
|
|
--tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
|
|
--tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
|
|
--tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
|
|
--tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
|
|
--tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
|
|
}
|
|
|
|
/**************************************************
|
|
Default button dropdown / arrows color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
|
|
--tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
|
|
--tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
|
|
--tt-button-active-dropdown-arrows-color-emphasized: var(
|
|
--tt-gray-light-a-700
|
|
);
|
|
--tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
|
|
--tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
|
|
--tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-active-dropdown-arrows-color-emphasized: var(
|
|
--tt-gray-dark-a-700
|
|
);
|
|
--tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
|
|
--tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
|
|
}
|
|
|
|
/* ----------------------------------------------------------------
|
|
--------------------------- GHOST BUTTON --------------------------
|
|
---------------------------------------------------------------- */
|
|
|
|
&[data-style="ghost"] {
|
|
/**************************************************
|
|
Ghost button background color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-bg-color: var(--transparent);
|
|
--tt-button-hover-bg-color: var(--tt-gray-light-200);
|
|
--tt-button-active-bg-color: var(--tt-gray-light-a-100);
|
|
--tt-button-active-bg-color-emphasized: var(
|
|
--tt-brand-color-100
|
|
); //more important active state
|
|
--tt-button-active-bg-color-subdued: var(
|
|
--tt-gray-light-a-100
|
|
); //less important active state
|
|
--tt-button-active-hover-bg-color: var(--tt-gray-light-200);
|
|
--tt-button-active-hover-bg-color-emphasized: var(
|
|
--tt-brand-color-200
|
|
); //more important active state hover
|
|
--tt-button-active-hover-bg-color-subdued: var(
|
|
--tt-gray-light-a-200
|
|
); //less important active state hover
|
|
--tt-button-disabled-bg-color: var(--transparent);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-bg-color: var(--transparent);
|
|
--tt-button-hover-bg-color: var(--tt-gray-dark-200);
|
|
--tt-button-active-bg-color: var(--tt-gray-dark-a-100);
|
|
--tt-button-active-bg-color-emphasized: var(
|
|
--tt-brand-color-900
|
|
); //more important active state
|
|
--tt-button-active-bg-color-subdued: var(
|
|
--tt-gray-dark-a-100
|
|
); //less important active state
|
|
--tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
|
|
--tt-button-active-hover-bg-color-emphasized: var(
|
|
--tt-brand-color-800
|
|
); //more important active state hover
|
|
--tt-button-active-hover-bg-color-subdued: var(
|
|
--tt-gray-dark-a-200
|
|
); //less important active state hover
|
|
--tt-button-disabled-bg-color: var(--transparent);
|
|
}
|
|
|
|
/**************************************************
|
|
Ghost button text color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-text-color: var(--tt-gray-light-a-600);
|
|
--tt-button-hover-text-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
|
|
--tt-button-disabled-text-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-text-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-hover-text-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
|
|
--tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
|
|
}
|
|
|
|
/**************************************************
|
|
Ghost button icon color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-icon-color: var(--tt-gray-light-a-600);
|
|
--tt-button-hover-icon-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-icon-color: var(--tt-brand-color-500);
|
|
--tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
|
|
--tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
|
|
--tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-icon-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-icon-color: var(--tt-brand-color-400);
|
|
--tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
|
|
--tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
|
|
--tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
|
|
}
|
|
|
|
/**************************************************
|
|
Ghost button subicon color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
|
|
--tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
|
|
--tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
|
|
--tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
|
|
--tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
|
|
--tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
|
|
--tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
|
|
--tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
|
|
--tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
|
|
--tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
|
|
--tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
|
|
}
|
|
|
|
/**************************************************
|
|
Ghost button dropdown / arrows color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
|
|
--tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
|
|
--tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
|
|
--tt-button-active-dropdown-arrows-color-emphasized: var(
|
|
--tt-gray-light-a-700
|
|
);
|
|
--tt-button-active-dropdown-arrows-color-subdued: var(
|
|
--tt-gray-light-a-600
|
|
);
|
|
--tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
|
|
--tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-active-dropdown-arrows-color-emphasized: var(
|
|
--tt-gray-dark-a-700
|
|
);
|
|
--tt-button-active-dropdown-arrows-color-subdued: var(
|
|
--tt-gray-dark-a-600
|
|
);
|
|
--tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------------------------------
|
|
-------------------------- PRIMARY BUTTON -------------------------
|
|
---------------------------------------------------------------- */
|
|
|
|
&[data-style="primary"] {
|
|
/**************************************************
|
|
Primary button background color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-bg-color: var(--tt-brand-color-500);
|
|
--tt-button-hover-bg-color: var(--tt-brand-color-600);
|
|
--tt-button-active-bg-color: var(--tt-brand-color-100);
|
|
--tt-button-active-bg-color-emphasized: var(
|
|
--tt-brand-color-100
|
|
); //more important active state
|
|
--tt-button-active-bg-color-subdued: var(
|
|
--tt-brand-color-100
|
|
); //less important active state
|
|
--tt-button-active-hover-bg-color: var(--tt-brand-color-200);
|
|
--tt-button-active-hover-bg-color-emphasized: var(
|
|
--tt-brand-color-200
|
|
); //more important active state hover
|
|
--tt-button-active-hover-bg-color-subdued: var(
|
|
--tt-brand-color-200
|
|
); //less important active state hover
|
|
--tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-bg-color: var(--tt-brand-color-500);
|
|
--tt-button-hover-bg-color: var(--tt-brand-color-600);
|
|
--tt-button-active-bg-color: var(--tt-brand-color-900);
|
|
--tt-button-active-bg-color-emphasized: var(
|
|
--tt-brand-color-900
|
|
); //more important active state
|
|
--tt-button-active-bg-color-subdued: var(
|
|
--tt-brand-color-900
|
|
); //less important active state
|
|
--tt-button-active-hover-bg-color: var(--tt-brand-color-800);
|
|
--tt-button-active-hover-bg-color-emphasized: var(
|
|
--tt-brand-color-800
|
|
); //more important active state hover
|
|
--tt-button-active-hover-bg-color-subdued: var(
|
|
--tt-brand-color-800
|
|
); //less important active state hover
|
|
--tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
|
|
}
|
|
|
|
/**************************************************
|
|
Primary button text color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-text-color: var(--white);
|
|
--tt-button-hover-text-color: var(--white);
|
|
--tt-button-active-text-color: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
|
|
--tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
|
|
--tt-button-disabled-text-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-text-color: var(--white);
|
|
--tt-button-hover-text-color: var(--white);
|
|
--tt-button-active-text-color: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
|
|
--tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
|
|
--tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
|
|
}
|
|
|
|
/**************************************************
|
|
Primary button icon color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-icon-color: var(--white);
|
|
--tt-button-hover-icon-color: var(--white);
|
|
--tt-button-active-icon-color: var(--tt-brand-color-600);
|
|
--tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
|
|
--tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
|
|
--tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-icon-color: var(--white);
|
|
--tt-button-hover-icon-color: var(--white);
|
|
--tt-button-active-icon-color: var(--tt-brand-color-400);
|
|
--tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
|
|
--tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
|
|
--tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
|
|
}
|
|
|
|
/**************************************************
|
|
Primary button subicon color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
|
|
--tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
|
|
--tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
|
|
--tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
|
|
--tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
|
|
--tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
|
|
--tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
|
|
--tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
|
|
--tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
|
|
--tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
|
|
--tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
|
|
}
|
|
|
|
/**************************************************
|
|
Primary button dropdown / arrows color
|
|
**************************************************/
|
|
|
|
/* Light mode */
|
|
--tt-button-default-dropdown-arrows-color: var(--white);
|
|
--tt-button-hover-dropdown-arrows-color: var(--white);
|
|
--tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
|
|
--tt-button-active-dropdown-arrows-color-emphasized: var(
|
|
--tt-gray-light-a-700
|
|
);
|
|
--tt-button-active-dropdown-arrows-color-subdued: var(
|
|
--tt-gray-light-a-700
|
|
);
|
|
--tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
|
|
|
|
/* Dark mode */
|
|
.dark & {
|
|
--tt-button-default-dropdown-arrows-color: var(--white);
|
|
--tt-button-hover-dropdown-arrows-color: var(--white);
|
|
--tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
|
|
--tt-button-active-dropdown-arrows-color-emphasized: var(
|
|
--tt-gray-dark-a-600
|
|
);
|
|
--tt-button-active-dropdown-arrows-color-subdued: var(
|
|
--tt-gray-dark-a-600
|
|
);
|
|
--tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
|
|
}
|
|
}
|
|
}
|