mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update button vars

Browse source
This commit is contained in:
Mutasem 2021-08-12 16:46:38 +02:00
parent 19f71c187e
commit cc81ff21f4
2 changed files with 23 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
packages/design-system/theme/src/button.scss
View file

@ -4,29 +4,6 @@
@use 'mixins/function'; @use 'mixins/function';
@use 'common/var'; @use 'common/var';
$active-shade-percent: 10%;
$color-primary-shade: function.lightness(
--color-primary-h,
--color-primary-s,
--color-primary-l,
-($active-shade-percent)
);
$color: var(--button-color, var(--color-text-xlight));
$background-color: var(--button-background-color, var(--color-primary));
$active-color: var(--button-active-color, var(--color-text-xlight));
$active-border-color: var(--button-active-border-color, $color-primary-shade);
$active-background-color: var(
--button-active-background-color,
$color-primary-shade
);
$disabled-color: var(--color-text-light);
$disabled-background-color: var(
--button-disabled-background-color,
var(--color-foreground-base)
);
$disabled-border-color: var(--color-foreground-base); $disabled-border-color: var(--color-foreground-base);
$loading-overlay-background-color: rgba(255, 255, 255, 0.35); $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
@ -38,8 +15,8 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
cursor: pointer; cursor: pointer;
border: var(--border-width-base) var.$button-border-color var(--border-style-base); border: var(--border-width-base) var.$button-border-color var(--border-style-base);
color: $color; color: var.$button-font-color;
background-color: $background-color; background-color: var.$button-background-color;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
border-radius: var.$button-border-radius; border-radius: var.$button-border-radius;
padding: var.$button-padding-vertical var.$button-padding-horizontal; padding: var.$button-padding-vertical var.$button-padding-horizontal;
@ -55,9 +32,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
@include utils.utils-user-select(none); @include utils.utils-user-select(none);
&:active { &:active {
color: $active-color; color: var.$button-active-color;
border-color: $active-border-color; border-color: var.$button-active-border-color;
background-color: $active-background-color; background-color: var.$button-active-background-color;
outline: none; outline: none;
} }
@ -89,9 +66,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
&:focus { &:focus {
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
color: $disabled-color; color: var.$button-disabled-font-color;
background-color: $disabled-background-color; background-color: var.$button-disabled-background-color;
border-color: $disabled-border-color; border-color: var.$button-disabled-border-color;
} }
} }

18
packages/design-system/theme/src/common/var.scss
View file

@ -665,6 +665,15 @@ $button-mini-padding-vertical: 7px;
/// padding||Spacing|3 /// padding||Spacing|3
$button-mini-padding-horizontal: 15px; $button-mini-padding-horizontal: 15px;
$button-font-color: var(--button-color, var(--color-text-xlight));
$button-background-color: var(--button-background-color, var(--color-primary));
$button-active-color: var(--button-active-color, var(--color-text-xlight));
$button-active-border-color: var(--button-active-border-color, $color-primary-shade-1);
$button-active-background-color: var(
--button-active-background-color,
$color-primary-shade-1
);
/// color||Color|0 /// color||Color|0
$button-default-font-color: var(--color-text-dark); $button-default-font-color: var(--color-text-dark);
/// color||Color|0 /// color||Color|0
@ -673,11 +682,14 @@ $button-default-background-color: $color-white;
$button-default-border-color: var(--border-color-base); $button-default-border-color: var(--border-color-base);
/// color||Color|0 /// color||Color|0
$button-disabled-font-color: var(--color-text-lighter); $button-disabled-font-color: var(--color-text-light);
/// color||Color|0 /// color||Color|0
$button-disabled-background-color: $color-white; $button-disabled-background-color: var(
--button-disabled-background-color,
var(--color-foreground-base)
);
/// color||Color|0 /// color||Color|0
$button-disabled-border-color: var(--border-color-light); $button-disabled-border-color: var(--border-color-base);
/// color||Color|0 /// color||Color|0
$button-primary-border-color: var(--color-primary); $button-primary-border-color: var(--color-primary);