mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(alert): support light theme

Browse Source
This commit is contained in:
07akioni 2019-10-12 14:23:40 +08:00
parent bbae67caa1
commit 5079a4055c
43 changed files with 691 additions and 594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/styles/ComponentDemo.scss
View File

@ -30,6 +30,7 @@
cursor: pointer;
}
@include e(title) {
transition: color .3s $default-cubic-bezier;
position: relative;
margin: 0 24px;
font-size: 18px;

16
demo/styles/markdown.scss
View File

@ -9,6 +9,7 @@
font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
transition: color .3s $default-cubic-bezier;
margin: 0;
font-weight: 700;
}
@ -34,22 +35,27 @@
ul, ol {
padding-left: 0;
li {
transition: color .3s $default-cubic-bezier;
line-height: 1.875;
margin-bottom: 0px;
font-size: 14px;
color: $--n-secondary-text-color;
}
}
p {
transition: color .3s $default-cubic-bezier;
margin: 8px 0 0 0;
font-size: 14px;
line-height: 1.875;
color: $--n-secondary-text-color;
}
a {
color: $primary-6;
transition: color .3s $default-cubic-bezier;
color: $--primary-6;
font-size: 14px;
}
code {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
}
pre {
width: 100%;
@ -66,6 +72,7 @@
box-sizing: border-box;
border-radius: 3px;
background-color: rgba(255, 255, 255, .12);
color: $--n-secondary-text-color;
padding: 0em .4em .1em .4em;
font-size: 14px;
font-family: 'Lato';
@ -112,8 +119,11 @@
}
} @else {
.n-app--light-theme .markdown {
p, li, code {
color: $--n-secondary-text-color;
}
a {
color: $primary-6;
color: $--primary-6;
}
pre {
& > code {

15
packages/common/Alert/src/main.vue
View File

@ -2,8 +2,9 @@
<div
class="n-alert"
:class="{
[`n-alert--${type}`]: true,
'n-alert--no-icon': noIcon
[`n-alert--${type}-type`]: true,
'n-alert--no-icon': noIcon,
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
}"
>
<div
@ -35,14 +36,14 @@
:type="'ios-close-circle'"
/>
</div>
<div class="n-alert__body-wrapper">
<div class="n-alert-body">
<div
v-if="title !== null"
class="n-alert__title"
class="n-alert-body__title"
>
{{ title }}
</div>
<div class="n-alert__content">
<div class="n-alert-body__content">
<slot />
</div>
</div>
@ -51,11 +52,15 @@
<script>
import NIcon from '../../Icon'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NAlert',
components: {
NIcon
},
mixins: [withapp, themeable],
props: {
icon: {
type: String,

137
styles/Alert.scss
View File

@ -1,81 +1,72 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(alert) {
// color: rgba(255, 146, 164, 1);
border-radius: 6px;
position: relative;
.n-alert__icon {
position: absolute;
left: 15px;
top: 15px;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
.n-icon {
margin-left: -2px;
margin-top: -2px;
font-size: 23px;
@mixin alert-type-mixin ($type) {
@include m($type + '-type') {
background-color: map-get($--alert-background-color, $type);
box-shadow: inset 0 0 0 1.2px map-get($--alert-border-color, $type);
@include e(icon) {
@include b(icon) {
color: map-get($--alert-icon-color, $type);
}
}
@include b(alert-body) {
@include e(title) {
color: map-get($--alert-title-text-color, $type);
}
@include e(content) {
color: map-get($--alert-content-text-color, $type);
}
}
}
.n-alert__body-wrapper {
padding: 15px 19px 15px 47px;
.n-alert__title {
font-size: 16px;
line-height: 19px;
margin-bottom: 9px;
font-weight: 700;
}
.n-alert__content {
font-size: 14px;
// color: rgba(255, 255, 255, 0.8);
}
@include themes-mixin {
@include b(alert) {
@include once {
border-radius: 6px;
position: relative;
transition: background-color .3s $default-cubic-bezier;
@include e(icon) {
position: absolute;
left: 15px;
top: 15px;
align-items: center;
justify-content: center;
width: 19px;
height: 19px;
@include b(icon) {
transition: color .3s $default-cubic-bezier;
margin-left: -2px;
margin-top: -2px;
font-size: 23px;
}
}
@include b(alert-body) {
padding: 15px 19px 15px 47px;
@include e(title) {
transition: color .3s $default-cubic-bezier;
font-size: 16px;
line-height: 19px;
margin-bottom: 9px;
font-weight: 700;
}
@include e(content) {
transition: color .3s $default-cubic-bezier;
font-size: 14px;
}
}
@include m(no-icon) {
@include b(alert-body) {
padding-left: 19px;
}
}
}
@include alert-type-mixin('default');
@include alert-type-mixin('success');
@include alert-type-mixin('info');
@include alert-type-mixin('error');
@include alert-type-mixin('warning');
}
&.n-alert--no-icon {
.n-alert__body-wrapper {
padding-left: 19px;
}
}
&.n-alert--success {
background-color: rgba(99, 226, 183, 0.2);
box-shadow: inset 0 0 0 1.2px rgba(99, 226, 183, .5);
.n-icon {
color: rgba(99, 226, 183, 1);
}
.n-alert__title {
color: rgba(99, 226, 183, 1);
}
}
&.n-alert--info {
background-color: rgba(98,187,252,0.2);
box-shadow: inset 0 0 0 1.2px rgba(98,187,252, .5);
.n-icon {
color: rgba(98, 187, 252, 1);
}
.n-alert__title {
color: rgba(98, 187, 252, 1);
}
}
&.n-alert--warning {
background-color: rgba(245, 166, 35, 0.2);
box-shadow: inset 0 0 0 1.2px rgba(245, 166, 35, .5);
.n-icon {
color: rgba(245, 166, 35, 1);
}
.n-alert__title {
color:rgba(245, 166, 35, 1);
}
}
&.n-alert--error {
background-color: rgba(255, 146, 164, 0.2);
box-shadow: inset 0 0 0 1.2px rgba(255, 146, 164, 0.5);
.n-icon {
color:rgba(255, 146, 164, 1);
}
.n-alert__title {
color:rgba(255, 146, 164, 1);
}
}
}

2
styles/Button.scss
View File

@ -185,6 +185,7 @@
}
@include e(icon) {
@include fade-in-width-expand-transition();
transition: color .3s $default-cubic-bezier;
}
@include e(content-aligner) {
display: inline-block;
@ -197,6 +198,7 @@
}
@include e(content) {
white-space: nowrap;
transition: color .3s $default-cubic-bezier;
}
@include m(left-icon) {
@include e(icon) {

6
styles/Confirm.scss
View File

@ -41,13 +41,13 @@
}
@include b(confirm-title-icon) {
@include m(confirm-type) {
color: $warning-6;
color: $--warning-6;
}
@include m(success-type) {
color: $success-6;
color: $--success-6;
}
@include m(error-type) {
color: $error-6;
color: $--error-6;
}
}
color: $--confirm-title-color;

2
styles/Table.scss
View File

@ -99,7 +99,7 @@
// width: 100%;
// thead {
// background-color: $table-header-background-color;
// color: $primary-text-color;
// color: $--primary-text-color;
// tr {
// th {
// padding: 16px 6px 16px 6px;

4
styles/base.scss
View File

@ -21,11 +21,11 @@ body {
font-family: $default-font-family;
min-width: 1280px;
// background: $body-background-color;
// color: $primary-text-color;
// color: $--primary-text-color;
}
a {
color: $primary-text-color;
color: $--primary-text-color;
}
input {

2
styles/themes/dark/components/AdvanceTable.scss
View File

@ -1,4 +1,4 @@
@mixin setup-dark-advance-table {
$--table-header-icon-color: $primary-6 !global;
$--table-header-icon-color: $--primary-6 !global;
$--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
}

37
styles/themes/dark/components/Alert.scss Normal file
View File

@ -0,0 +1,37 @@
@mixin setup-dark-alert {
$--alert-border-color: (
'default': white,
'success': change-color($--success-hs, $alpha: .3),
'info': change-color($--info-hs, $alpha: .3),
'warning': change-color($--warning-hs, $alpha: .3),
'error': change-color($--error-hs, $alpha: .3)
) !global;
$--alert-background-color: (
'default': white,
'success': change-color($--success-hs, $alpha: .15),
'info': change-color($--info-hs, $alpha: .15),
'warning': change-color($--warning-hs, $alpha: .15),
'error': change-color($--error-hs, $alpha: .15)
) !global;
$--alert-title-text-color: (
'default': $--n-text-color,
'success': $--n-text-color,
'info': $--n-text-color,
'warning': $--n-text-color,
'error': $--n-text-color
) !global;
$--alert-icon-color: (
'default': $--success-hs,
'success': $--success-hs,
'info': $--info-hs,
'warning': $--warning-hs,
'error': $--error-hs
) !global;
$--alert-content-text-color: (
'default': $--n-secondary-text-color,
'success': $--n-secondary-text-color,
'info': $--n-secondary-text-color,
'warning': $--n-secondary-text-color,
'error': $--n-secondary-text-color
) !global;
}

3
styles/themes/dark/components/Anchor.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin setup-dark-anchor {
}

6
styles/themes/dark/components/BaseCancelMark.scss
View File

@ -1,11 +1,11 @@
@mixin setup-dark-base-cancel-mark {
$--base-cancel-mark-cross-color: (
"default": rgba(255, 255, 255, .3),
"hover": $primary-6,
"active": $primary-5
"hover": $--primary-6,
"active": $--primary-5
) !global;
$--base-cancel-mark-arrow-color: (
"default": rgba(255, 255, 255, .3),
"active": $primary-6
"active": $--primary-6
) !global;
}

6
styles/themes/dark/components/BasePicker.scss
View File

@ -3,7 +3,7 @@
$--base-picker-background-color: (
"default": rgba(255, 255, 255, .1),
"disabled": rgba(255, 255, 255, .06),
"active": change-color($primary-6, $alpha: 0.1)
"active": change-color($--primary-6, $alpha: 0.1)
) !global;
$--base-picker-placeholder-color: (
"default": rgba(255, 255, 255, .4),
@ -11,8 +11,8 @@
) !global;
$--base-picker-box-shadow: (
"default": none,
"hover": 0 0 0 1px $primary-6,
'focus': (inset 0 0 0px 1px $primary-6, 0 0 8px 0px change-color($primary-6, $alpha: .3)),
"hover": 0 0 0 1px $--primary-6,
'focus': (inset 0 0 0px 1px $--primary-6, 0 0 8px 0px change-color($--primary-6, $alpha: .3)),
"disabled": none
) !global;
$--base-picker-caret-color: $--n-primary-color !global;

2
styles/themes/dark/components/BaseSelectMenu.scss
View File

@ -6,5 +6,5 @@
) !global;
$--base-select-menu-background-color: $--n-popover-color !global;
$--base-select-menu-box-shadow: none !global;
$--base-select-menu-light-bar-background-color: change-color($primary-6, $alpha: .3) !global;
$--base-select-menu-light-bar-background-color: change-color($--primary-6, $alpha: .3) !global;
}

122
styles/themes/dark/components/Button.scss
View File

@ -32,12 +32,12 @@
"large": 20px
) !global;
$button-border-color: (
"default": $primary-6,
"primary": $primary-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
"default": $--primary-6,
"primary": $--primary-6,
"info": $--info-6,
"success": $--success-6,
"warning": $--warning-6,
"error": $--error-6
) !global;
$button-box-shadow-spread: 0px !global;
$button-box-shadow-ripple-spread: 4px !global;
@ -79,67 +79,67 @@
$button-ghost-active-alpha: .3;
$button-ghost-focus-alpha: .2;
$button-background-color: (
"default": change-color($primary-6, $alpha: $button-ghost-alpha),
"default-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
"primary": $primary-6,
"primary-focus": $primary-5,
"primary-hover": $primary-5,
"primary-active": $primary-7,
"info": $info-6,
"info-focus": $info-5,
"info-hover": $info-5,
"info-active": $info-7,
"success": $success-6,
"success-focus": $success-5,
"success-hover": $success-5,
"success-active": $success-7,
"warning": $warning-6,
"warning-focus": $warning-5,
"warning-hover": $warning-5,
"warning-active": $warning-7,
"error": $error-6,
"error-focus": $error-5,
"error-hover": $error-5,
"error-active": $error-7,
"default": change-color($--primary-6, $alpha: $button-ghost-alpha),
"default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
"primary": $--primary-6,
"primary-focus": $--primary-5,
"primary-hover": $--primary-5,
"primary-active": $--primary-7,
"info": $--info-6,
"info-focus": $--info-5,
"info-hover": $--info-5,
"info-active": $--info-7,
"success": $--success-6,
"success-focus": $--success-5,
"success-hover": $--success-5,
"success-active": $--success-7,
"warning": $--warning-6,
"warning-focus": $--warning-5,
"warning-hover": $--warning-5,
"warning-active": $--warning-7,
"error": $--error-6,
"error-focus": $--error-5,
"error-hover": $--error-5,
"error-active": $--error-7,
) !global;
$ghost-button-background-color: (
"default": change-color($primary-6, $alpha: $button-ghost-alpha),
"default-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
"primary": change-color($primary-6, $alpha: $button-ghost-alpha),
"primary-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
"primary-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
"info": change-color($info-6, $alpha: $button-ghost-alpha),
"info-focus": change-color($info-6, $alpha: $button-ghost-focus-alpha),
"info-hover": change-color($info-6, $alpha: $button-ghost-hover-alpha),
"info-active": change-color($info-6, $alpha: $button-ghost-active-alpha),
"success": change-color($success-6, $alpha: $button-ghost-alpha),
"success-focus": change-color($success-6, $alpha: $button-ghost-focus-alpha),
"success-hover": change-color($success-6, $alpha: $button-ghost-hover-alpha),
"success-active": change-color($success-6, $alpha: $button-ghost-active-alpha),
"error": change-color($error-6, $alpha: $button-ghost-alpha),
"error-focus": change-color($error-6, $alpha: $button-ghost-focus-alpha),
"error-hover": change-color($error-6, $alpha: $button-ghost-hover-alpha),
"error-active": change-color($error-6, $alpha: $button-ghost-active-alpha),
"warning": change-color($warning-6, $alpha: $button-ghost-alpha),
"warning-focus": change-color($warning-6, $alpha: $button-ghost-focus-alpha),
"warning-hover": change-color($warning-6, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($warning-6, $alpha: $button-ghost-active-alpha),
"default": change-color($--primary-6, $alpha: $button-ghost-alpha),
"default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
"primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
"primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
"primary-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
"info": change-color($--info-6, $alpha: $button-ghost-alpha),
"info-focus": change-color($--info-6, $alpha: $button-ghost-focus-alpha),
"info-hover": change-color($--info-6, $alpha: $button-ghost-hover-alpha),
"info-active": change-color($--info-6, $alpha: $button-ghost-active-alpha),
"success": change-color($--success-6, $alpha: $button-ghost-alpha),
"success-focus": change-color($--success-6, $alpha: $button-ghost-focus-alpha),
"success-hover": change-color($--success-6, $alpha: $button-ghost-hover-alpha),
"success-active": change-color($--success-6, $alpha: $button-ghost-active-alpha),
"error": change-color($--error-6, $alpha: $button-ghost-alpha),
"error-focus": change-color($--error-6, $alpha: $button-ghost-focus-alpha),
"error-hover": change-color($--error-6, $alpha: $button-ghost-hover-alpha),
"error-active": change-color($--error-6, $alpha: $button-ghost-active-alpha),
"warning": change-color($--warning-6, $alpha: $button-ghost-alpha),
"warning-focus": change-color($--warning-6, $alpha: $button-ghost-focus-alpha),
"warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
) !global;
$ghost-button-color: (
"default": $primary-6,
"primary": $primary-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
"default": $--primary-6,
"primary": $--primary-6,
"info": $--info-6,
"success": $--success-6,
"warning": $--warning-6,
"error": $--error-6
)!global;
$button-color: (
"default": $primary-6,
"default": $--primary-6,
"primary": white,
"info": white,
"success": white,

2
styles/themes/dark/components/CheckBox.scss
View File

@ -2,7 +2,7 @@
$border-color: rgba(255, 255, 255, 0.4);
$--checkbox-font-color: $--neutral-3 !global;
$--checkbox-border-color: $border-color !global;
$--checkbox-border-color--active: $primary-6 !global;
$--checkbox-border-color--active: $--primary-6 !global;
$--checkbox-indeterminate-color: $--neutral-10 !global;
$--checkbox-disabled: $border-color !global;
$--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;

8
styles/themes/dark/components/Input.scss
View File

@ -3,7 +3,7 @@
'default': $--n-secondary-text-color,
'disabled': rgba(255, 255, 255, .2)
) !global;
$--input-caret-color: $primary-6 !global;
$--input-caret-color: $--primary-6 !global;
$--input-placeholder-color: (
'default': rgba(255, 255, 255, .3),
'disabled': rgba(255, 255, 255, .2)
@ -11,13 +11,13 @@
$--input-background-color: (
"default": rgba(255, 255, 255, .1),
"disabled": rgba(255, 255, 255, .06),
"focus": change-color($primary-6, $alpha: 0.1)
"focus": change-color($--primary-6, $alpha: 0.1)
) !global;
$--input-icon-color: rgba(255, 255, 255, 0.2) !global;
$--input-box-shadow: (
'default': inset 0 0 0 0 transparent,
'hover': inset 0 0 0px 1px $primary-6,
'focus': (inset 0 0 0px 1px $primary-6, 0 0 8px 0px change-color($primary-6, $alpha: .3)),
'hover': inset 0 0 0px 1px $--primary-6,
'focus': (inset 0 0 0px 1px $--primary-6, 0 0 8px 0px change-color($--primary-6, $alpha: .3)),
"disabled": inset 0 0 0 1px transparent
) !global;
}

2
styles/themes/dark/components/LoadingBar.scss
View File

@ -1,7 +1,7 @@
@mixin setup-dark-loading-bar {
$--loading-bar-background-color: (
"error": red,
"loading": $success-6
"loading": $--success-6
) !global;
$--loading-bar-height: 2px !global;
}

2
styles/themes/dark/components/NimbusServiceLayout.scss
View File

@ -6,5 +6,5 @@
$service-layout-border-color: $--n-divider-color !global;
$service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
$service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
$--service-kayout-item-active-color: $primary-6 !global;
$--service-kayout-item-active-color: $--primary-6 !global;
}

110
styles/themes/dark/components/Tag.scss
View File

@ -1,75 +1,75 @@
@mixin setup-dark-tag {
$--tag-color: (
'default': $primary-6,
'default-disabled': change-color($primary-6, $alpha: .3),
'success': $success-6,
'success-disabled': change-color($success-6, $alpha: .3),
'warning': $warning-6,
'warning-disabled': change-color($warning-6, $alpha: .3),
'info': $info-6,
'info-disabled': change-color($info-6, $alpha: .3),
'error': $error-6,
'error-disabled': change-color($error-6, $alpha: .3),
'default': $--primary-6,
'default-disabled': change-color($--primary-6, $alpha: .3),
'success': $--success-6,
'success-disabled': change-color($--success-6, $alpha: .3),
'warning': $--warning-6,
'warning-disabled': change-color($--warning-6, $alpha: .3),
'info': $--info-6,
'info-disabled': change-color($--info-6, $alpha: .3),
'error': $--error-6,
'error-disabled': change-color($--error-6, $alpha: .3),
) !global;
$--tag-background-color: (
'default': transparent,
'default-hover': change-color($primary-6, $alpha: .2),
'default-active': change-color($primary-6, $alpha: .2),
'default-hover': change-color($--primary-6, $alpha: .2),
'default-active': change-color($--primary-6, $alpha: .2),
'default-disabled': transparent,
'success': transparent,
'success-hover': change-color($success-6, $alpha: .2),
'success-active': change-color($success-6, $alpha: .2),
'success-hover': change-color($--success-6, $alpha: .2),
'success-active': change-color($--success-6, $alpha: .2),
'success-disabled': transparent,
'warning': transparent,
'warning-hover': change-color($warning-6, $alpha: .2),
'warning-active': change-color($warning-6, $alpha: .2),
'warning-hover': change-color($--warning-6, $alpha: .2),
'warning-active': change-color($--warning-6, $alpha: .2),
'warning-disabled': transparent,
'info': transparent,
'info-hover': change-color($info-6, $alpha: .2),
'info-active': change-color($info-6, $alpha: .2),
'info-hover': change-color($--info-6, $alpha: .2),
'info-active': change-color($--info-6, $alpha: .2),
'info-disabled': transparent,
'error': transparent,
'error-hover': change-color($error-6, $alpha: .2),
'error-active': change-color($error-6, $alpha: .2),
'error-hover': change-color($--error-6, $alpha: .2),
'error-active': change-color($--error-6, $alpha: .2),
'error-disabled': transparent,
) !global;
$--tag-border-color: (
'default': $primary-6,
'default-hover': $primary-6,
'default-active': $primary-6,
'success': $success-6,
'success-hover': $success-6,
'success-active': $success-6,
'warning': $warning-6,
'warning-hover': $warning-6,
'warning-active': $warning-6,
'info': $info-6,
'info-hover': $info-6,
'info-active': $info-6,
'error': $error-6,
'error-hover': $error-6,
'error-active': $error-6,
'default': $--primary-6,
'default-hover': $--primary-6,
'default-active': $--primary-6,
'success': $--success-6,
'success-hover': $--success-6,
'success-active': $--success-6,
'warning': $--warning-6,
'warning-hover': $--warning-6,
'warning-active': $--warning-6,
'info': $--info-6,
'info-hover': $--info-6,
'info-active': $--info-6,
'error': $--error-6,
'error-hover': $--error-6,
'error-active': $--error-6,
) !global;
$--tag-close-mark-color: (
'default': change-color($primary-6, $alpha: .5),
'default-hover': change-color($primary-6, $alpha: 1),
'default-active': change-color($primary-6, $alpha: .75),
'default-disabled': change-color($primary-6, $alpha: .25),
'success': change-color($success-6, $alpha: .5),
'success-hover': change-color($success-6, $alpha: 1),
'success-active': change-color($success-6, $alpha: .75),
'success-disabled': change-color($success-6, $alpha: .25),
'warning': change-color($warning-6, $alpha: .5),
'warning-hover': change-color($warning-6, $alpha: 1),
'warning-active': change-color($warning-6, $alpha: .75),
'warning-disabled': change-color($warning-6, $alpha: .25),
'info': change-color($info-6, $alpha: .5),
'info-hover': change-color($info-6, $alpha: 1),
'info-active': change-color($info-6, $alpha: .75),
'info-disabled': change-color($info-6, $alpha: .25),
'error': change-color($error-6, $alpha: .5),
'error-hover': change-color($error-6, $alpha: 1),
'error-active': change-color($error-6, $alpha: .75),
'error-disabled': change-color($error-6, $alpha: .25),
'default': change-color($--primary-6, $alpha: .5),
'default-hover': change-color($--primary-6, $alpha: 1),
'default-active': change-color($--primary-6, $alpha: .75),
'default-disabled': change-color($--primary-6, $alpha: .25),
'success': change-color($--success-6, $alpha: .5),
'success-hover': change-color($--success-6, $alpha: 1),
'success-active': change-color($--success-6, $alpha: .75),
'success-disabled': change-color($--success-6, $alpha: .25),
'warning': change-color($--warning-6, $alpha: .5),
'warning-hover': change-color($--warning-6, $alpha: 1),
'warning-active': change-color($--warning-6, $alpha: .75),
'warning-disabled': change-color($--warning-6, $alpha: .25),
'info': change-color($--info-6, $alpha: .5),
'info-hover': change-color($--info-6, $alpha: 1),
'info-active': change-color($--info-6, $alpha: .75),
'info-disabled': change-color($--info-6, $alpha: .25),
'error': change-color($--error-6, $alpha: .5),
'error-hover': change-color($--error-6, $alpha: 1),
'error-active': change-color($--error-6, $alpha: .75),
'error-disabled': change-color($--error-6, $alpha: .25),
) !global;
}

100
styles/themes/dark/darkColors.hs.scss
View File

@ -9,54 +9,54 @@
$--neutral-8: #171D33 !global;
$--neutral-9: #10142C !global;
$--neutral-10: rgb(0, 0, 0) !global;
$primary-1: #e6ffee !global;
$primary-2: #9bf2bb !global;
$primary-3: #6ee69e !global;
$primary-4: #45d985 !global;
$primary-5: rgb(103, 235, 190) !global;
$primary-6: rgb(99, 226, 183) !global;
$primary-7: rgb(97, 218, 177) !global;
$primary-8: #007341 !global;
$primary-9: #004d2e !global;
$primary-10: #002618 !global;
$success-1: #e6ffee !global;
$success-2: #9bf2bb !global;
$success-3: #00E572 !global;
$success-4: #45d985 !global;
$success-5: #21cc71 !global;
$success-6: #00c060 !global;
$success-7: #009952 !global;
$success-8: #007341 !global;
$success-9: #004d2e !global;
$success-10: #002618 !global;
$info-1: #edfaff !global;
$info-2: #c4ebff !global;
$info-3: #0082E5 !global;
$info-4: #73c7ff !global;
$info-5: #49affc !global;
$info-6: #3080d0 !global;
$info-7: #106dc9 !global;
$info-8: #054fa3 !global;
$info-9: #00367d !global;
$info-10: #002357 !global;
$warning-1: #fff8f0 !global;
$warning-2: #ffead4 !global;
$warning-3: #E8C517 !global;
$warning-4: #ffba82 !global;
$warning-5: #ff9e59 !global;
$warning-6: #ff8030 !global;
$warning-7: #d9601e !global;
$warning-8: #b34410 !global;
$warning-9: #8c2c06 !global;
$warning-10: #661c03 !global;
$error-1: #fff0f0 !global;
$error-2: #ffdee0 !global;
$error-3: #ED4A3B !global;
$error-4: #eb818f !global;
$error-5: #de576d !global;
$error-6: #d03050 !global;
$error-7: #ab1f3f !global;
$error-8: #851130 !global;
$error-9: #5e0822 !global;
$error-10: #380415 !global;
$--primary-1: #e6ffee !global;
$--primary-2: #9bf2bb !global;
$--primary-3: #6ee69e !global;
$--primary-4: #45d985 !global;
$--primary-5: rgb(103, 235, 190) !global;
$--primary-6: rgb(99, 226, 183) !global;
$--primary-7: rgb(97, 218, 177) !global;
$--primary-8: #007341 !global;
$--primary-9: #004d2e !global;
$--primary-10: #002618 !global;
$--success-1: #e6ffee !global;
$--success-2: #9bf2bb !global;
$--success-3: #00E572 !global;
$--success-4: #45d985 !global;
$--success-5: #21cc71 !global;
$--success-6: #00c060 !global;
$--success-7: #009952 !global;
$--success-8: #007341 !global;
$--success-9: #004d2e !global;
$--success-10: #002618 !global;
$--info-1: #edfaff !global;
$--info-2: #c4ebff !global;
$--info-3: #0082E5 !global;
$--info-4: #73c7ff !global;
$--info-5: #49affc !global;
$--info-6: #3080d0 !global;
$--info-7: #106dc9 !global;
$--info-8: #054fa3 !global;
$--info-9: #00367d !global;
$--info-10: #002357 !global;
$--warning-1: #fff8f0 !global;
$--warning-2: #ffead4 !global;
$--warning-3: #E8C517 !global;
$--warning-4: #ffba82 !global;
$--warning-5: #ff9e59 !global;
$--warning-6: #ff8030 !global;
$--warning-7: #d9601e !global;
$--warning-8: #b34410 !global;
$--warning-9: #8c2c06 !global;
$--warning-10: #661c03 !global;
$--error-1: #fff0f0 !global;
$--error-2: #ffdee0 !global;
$--error-3: #ED4A3B !global;
$--error-4: #eb818f !global;
$--error-5: #de576d !global;
$--error-6: #d03050 !global;
$--error-7: #ab1f3f !global;
$--error-8: #851130 !global;
$--error-9: #5e0822 !global;
$--error-10: #380415 !global;
}

100
styles/themes/dark/darkColors.ls.scss
View File

@ -9,54 +9,54 @@
$--neutral-8: #171D33 !global;
$--neutral-9: #10142C !global;
$--neutral-10: rgb(0, 0, 0) !global;
$primary-1: #e6ffee !global;
$primary-2: #9bf2bb !global;
$primary-3: #6ee69e !global;
$primary-4: #45d985 !global;
$primary-5: rgb(103, 235, 190) !global;
$primary-6: rgb(99, 226, 183) !global;
$primary-7: rgb(97, 218, 177) !global;
$primary-8: #007341 !global;
$primary-9: #004d2e !global;
$primary-10: #002618 !global;
$success-1: #e6ffee !global;
$success-2: #9bf2bb !global;
$success-3: #5BE5AE !global;
$success-4: #45d985 !global;
$success-5: #21cc71 !global;
$success-6: #00c060 !global;
$success-7: #009952 !global;
$success-8: #007341 !global;
$success-9: #004d2e !global;
$success-10: #002618 !global;
$info-1: #edfaff !global;
$info-2: #c4ebff !global;
$info-3: #50A4E5 !global;
$info-4: #73c7ff !global;
$info-5: #49affc !global;
$info-6: #3080d0 !global;
$info-7: #106dc9 !global;
$info-8: #054fa3 !global;
$info-9: #00367d !global;
$info-10: #002357 !global;
$warning-1: #fff8f0 !global;
$warning-2: #ffead4 !global;
$warning-3: #E8D05C !global;
$warning-4: #ffba82 !global;
$warning-5: #ff9e59 !global;
$warning-6: #ff8030 !global;
$warning-7: #d9601e !global;
$warning-8: #b34410 !global;
$warning-9: #8c2c06 !global;
$warning-10: #661c03 !global;
$error-1: #fff0f0 !global;
$error-2: #ffdee0 !global;
$error-3: #EE6C6C !global;
$error-4: #eb818f !global;
$error-5: #de576d !global;
$error-6: #d03050 !global;
$error-7: #ab1f3f !global;
$error-8: #851130 !global;
$error-9: #5e0822 !global;
$error-10: #380415 !global;
$--primary-1: #e6ffee !global;
$--primary-2: #9bf2bb !global;
$--primary-3: #6ee69e !global;
$--primary-4: #45d985 !global;
$--primary-5: rgb(103, 235, 190) !global;
$--primary-6: rgb(99, 226, 183) !global;
$--primary-7: rgb(97, 218, 177) !global;
$--primary-8: #007341 !global;
$--primary-9: #004d2e !global;
$--primary-10: #002618 !global;
$--success-1: #e6ffee !global;
$--success-2: #9bf2bb !global;
$--success-3: #5BE5AE !global;
$--success-4: #45d985 !global;
$--success-5: #21cc71 !global;
$--success-6: #00c060 !global;
$--success-7: #009952 !global;
$--success-8: #007341 !global;
$--success-9: #004d2e !global;
$--success-10: #002618 !global;
$--info-1: #edfaff !global;
$--info-2: #c4ebff !global;
$--info-3: #50A4E5 !global;
$--info-4: #73c7ff !global;
$--info-5: #49affc !global;
$--info-6: #3080d0 !global;
$--info-7: #106dc9 !global;
$--info-8: #054fa3 !global;
$--info-9: #00367d !global;
$--info-10: #002357 !global;
$--warning-1: #fff8f0 !global;
$--warning-2: #ffead4 !global;
$--warning-3: #E8D05C !global;
$--warning-4: #ffba82 !global;
$--warning-5: #ff9e59 !global;
$--warning-6: #ff8030 !global;
$--warning-7: #d9601e !global;
$--warning-8: #b34410 !global;
$--warning-9: #8c2c06 !global;
$--warning-10: #661c03 !global;
$--error-1: #fff0f0 !global;
$--error-2: #ffdee0 !global;
$--error-3: #EE6C6C !global;
$--error-4: #eb818f !global;
$--error-5: #de576d !global;
$--error-6: #d03050 !global;
$--error-7: #ab1f3f !global;
$--error-8: #851130 !global;
$--error-9: #5e0822 !global;
$--error-10: #380415 !global;
}

100
styles/themes/dark/darkColors.scss
View File

@ -25,54 +25,54 @@
$--success-hs: rgb(42, 148, 125) !global;
$--error-hs: rgb(208, 58, 82) !global;
$--warning-hs: rgb(240, 138, 0) !global;
$primary-1: #f0fcf8 !global;
$primary-2: #d4f7eb !global;
$primary-3: #b8f1de !global;
$primary-4: #9becd1 !global;
$primary-5: #7fe7c4 !global;
$primary-6: #63e2b7 !global;
$primary-7: #5acea7 !global;
$primary-8: #52b996 !global;
$primary-9: #49A586 !global;
$primary-10: #409058 !global;
$success-1: #f0fcf8 !global;
$success-2: #d4f7eb !global;
$success-3: #b8f1de !global;
$success-4: #9becd1 !global;
$success-5: hsl(160, 68%, 70%) !global;
$success-6: hsl(160, 69%, 64%) !global;
$success-7: #5acea7 !global;
$success-8: #52b996 !global;
$success-9: #49A586 !global;
$success-10: #409058 !global;
$info-5: #d8edf8 !global;
$info-2: #b1dcf2 !global;
$info-3: #a4d6f0 !global;
$info-4: #97d1ee !global;
$info-5: #8acbec !global;
$info-6: #70C0E8 !global;
$info-7: #66afd3 !global;
$info-8: #5c9ebe !global;
$info-9: #528ca9 !global;
$info-10: #487b94 !global;
$warning-1: #fff8f0 !global;
$warning-2: #ffead4 !global;
$warning-3: #e0e090 !global;
$warning-4: #ffba82 !global;
$warning-5: hsl(39, 82%, 78%) !global;
$warning-6: hsl(39, 82%, 72%) !global;
$warning-7: hsl(44, 73%, 64%) !global;
$warning-8: #b34410 !global;
$warning-9: #8c2c06 !global;
$warning-10: #661c03 !global;
$error-1: #fff0f0 !global;
$error-2: #ffdee0 !global;
$error-3: #e88080 !global;
$error-4: #E26363 !global;
$error-5: #e98b8b !global;
$error-6: #e88080 !global;
$error-7: #e57272 !global;
$error-8: #851130 !global;
$error-9: #5e0822 !global;
$error-10: #380415 !global;
$--primary-1: #f0fcf8 !global;
$--primary-2: #d4f7eb !global;
$--primary-3: #b8f1de !global;
$--primary-4: #9becd1 !global;
$--primary-5: #7fe7c4 !global;
$--primary-6: #63e2b7 !global;
$--primary-7: #5acea7 !global;
$--primary-8: #52b996 !global;
$--primary-9: #49A586 !global;
$--primary-10: #409058 !global;
$--success-1: #f0fcf8 !global;
$--success-2: #d4f7eb !global;
$--success-3: #b8f1de !global;
$--success-4: #9becd1 !global;
$--success-5: hsl(160, 68%, 70%) !global;
$--success-6: hsl(160, 69%, 64%) !global;
$--success-7: #5acea7 !global;
$--success-8: #52b996 !global;
$--success-9: #49A586 !global;
$--success-10: #409058 !global;
$--info-5: #d8edf8 !global;
$--info-2: #b1dcf2 !global;
$--info-3: #a4d6f0 !global;
$--info-4: #97d1ee !global;
$--info-5: #8acbec !global;
$--info-6: #70C0E8 !global;
$--info-7: #66afd3 !global;
$--info-8: #5c9ebe !global;
$--info-9: #528ca9 !global;
$--info-10: #487b94 !global;
$--warning-1: #fff8f0 !global;
$--warning-2: #ffead4 !global;
$--warning-3: #e0e090 !global;
$--warning-4: #ffba82 !global;
$--warning-5: hsl(39, 82%, 78%) !global;
$--warning-6: hsl(39, 82%, 72%) !global;
$--warning-7: hsl(44, 73%, 64%) !global;
$--warning-8: #b34410 !global;
$--warning-9: #8c2c06 !global;
$--warning-10: #661c03 !global;
$--error-1: #fff0f0 !global;
$--error-2: #ffdee0 !global;
$--error-3: #e88080 !global;
$--error-4: #E26363 !global;
$--error-5: #e98b8b !global;
$--error-6: #e88080 !global;
$--error-7: #e57272 !global;
$--error-8: #851130 !global;
$--error-9: #5e0822 !global;
$--error-10: #380415 !global;
}

18
styles/themes/dark/index.scss
View File

@ -19,16 +19,18 @@
@import "components/Badge.scss";
@import "components/Dropdown.scss";
@import "components/Input.scss";
@import "components/Alert.scss";
@import "components/Anchor.scss";
@mixin setup-dark-theme () {
@include setup-dark-colors();
$--n-primary-color: $primary-6 !global;
$--n-primary-hover-color: $primary-5 !global;
$--n-primary-active-color: $primary-7 !global;
$--n-info-color: $info-6 !global;
$--n-success-color: $success-6 !global;
$--n-warning-color: $warning-6 !global;
$--n-error-color: $error-6 !global;
$--n-primary-color: $--primary-6 !global;
$--n-primary-hover-color: $--primary-5 !global;
$--n-primary-active-color: $--primary-7 !global;
$--n-info-color: $--info-6 !global;
$--n-success-color: $--success-6 !global;
$--n-warning-color: $--warning-6 !global;
$--n-error-color: $--error-6 !global;
$--n-text-color: $--text-1 !global;
$--n-popover-color: $--neutral-1 !global;
@ -65,4 +67,6 @@
@include setup-dark-badge;
@include setup-dark-dropdown;
@include setup-dark-input;
@include setup-dark-anchor;
@include setup-dark-alert;
}

2
styles/themes/light/components/AdvanceTable.scss
View File

@ -1,4 +1,4 @@
@mixin setup-light-advance-table {
$--table-header-icon-color: $primary-6 !global;
$--table-header-icon-color: $--primary-6 !global;
$--table-scrollbar-color: #ababab !global;
}

37
styles/themes/light/components/Alert.scss Normal file
View File

@ -0,0 +1,37 @@
@mixin setup-light-alert {
$--alert-border-color: (
'default': white,
'success': change-color($--success-6, $alpha: .3),
'info': change-color($--info-6, $alpha: .3),
'warning': change-color($--warning-6, $alpha: .3),
'error': change-color($--error-6, $alpha: .3)
) !global;
$--alert-background-color: (
'default': white,
'success': change-color($--success-6, $alpha: .15),
'info': change-color($--info-6, $alpha: .15),
'warning': change-color($--warning-6, $alpha: .15),
'error': change-color($--error-6, $alpha: .15)
) !global;
$--alert-title-text-color: (
'default': $--n-text-color,
'success': $--n-text-color,
'info': $--n-text-color,
'warning': $--n-text-color,
'error': $--n-text-color
) !global;
$--alert-icon-color: (
'default': $--success-6,
'success': $--success-6,
'info': $--info-6,
'warning': $--warning-6,
'error': $--error-6
) !global;
$--alert-content-text-color: (
'default': $--n-secondary-text-color,
'success': $--n-secondary-text-color,
'info': $--n-secondary-text-color,
'warning': $--n-secondary-text-color,
'error': $--n-secondary-text-color,
) !global;
}

3
styles/themes/light/components/Anchor.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin setup-light-anchor {
}

20
styles/themes/light/components/Badge.scss
View File

@ -1,17 +1,17 @@
@mixin setup-light-badge {
$--badge-background-color: (
"default": $error-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
"default": $--error-6,
"info": $--info-6,
"success": $--success-6,
"warning": $--warning-6,
"error": $--error-6
) !global;
$--badge-rippling-color: (
"default": $error-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
"default": $--error-6,
"info": $--info-6,
"success": $--success-6,
"warning": $--warning-6,
"error": $--error-6
) !global;
$--badge-rippling-start-opacity: .4 !global;
}

6
styles/themes/light/components/BaseCancelMark.scss
View File

@ -1,11 +1,11 @@
@mixin setup-light-base-cancel-mark {
$--base-cancel-mark-cross-color: (
"default": $--n-border-color,
"hover": $primary-5,
"active": $primary-7
"hover": $--primary-5,
"active": $--primary-7
) !global;
$--base-cancel-mark-arrow-color: (
"default": $--n-border-color,
"active": $primary-6
"active": $--primary-6
) !global;
}

6
styles/themes/light/components/BasePicker.scss
View File

@ -11,9 +11,9 @@
) !global;
$--base-picker-box-shadow: (
"default": inset 0 0 0 1px $--n-border-color,
"hover": inset 0 0 0 1px $primary-5,
"active": inset 0 0 0 1px $primary-5,
"focus": (inset 0 0 0 1px $primary-5, 0 0 0 2px change-color($primary-5, $alpha: .3)),
"hover": inset 0 0 0 1px $--primary-5,
"active": inset 0 0 0 1px $--primary-5,
"focus": (inset 0 0 0 1px $--primary-5, 0 0 0 2px change-color($--primary-5, $alpha: .3)),
"disabled": inset 0 0 0 1px $--n-border-color
) !global;
$--base-picker-caret-color: unset !global;

2
styles/themes/light/components/BaseSelectMenu.scss
View File

@ -6,5 +6,5 @@
) !global;
$--base-select-menu-background-color: white !global;
$--base-select-menu-box-shadow: none !global;
$--base-select-menu-light-bar-background-color: change-color($primary-6, $alpha: .15) !global;
$--base-select-menu-light-bar-background-color: change-color($--primary-6, $alpha: .15) !global;
}

100
styles/themes/light/components/Button.scss
View File

@ -33,11 +33,11 @@
) !global;
$button-border-color: (
"default": $--n-border-color,
"primary": $primary-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
"primary": $--primary-6,
"info": $--info-6,
"success": $--success-6,
"warning": $--warning-6,
"error": $--error-6
) !global;
$button-box-shadow-spread: 0px !global;
$button-box-shadow-ripple-spread: 4px !global;
@ -87,60 +87,60 @@
"default-focus": mix($--n-border-color, white, $button-ghost-focus-weight),
"default-hover": mix($--n-border-color, white, $button-ghost-hover-weight),
"default-active": mix($--n-border-color, white, $button-ghost-active-weight),
"primary": $primary-6,
"primary-focus": $primary-5,
"primary-hover": $primary-5,
"primary-active": $primary-7,
"info": $info-6,
"info-focus": $info-5,
"info-hover": $info-5,
"info-active": $info-7,
"success": $success-6,
"success-focus": $success-5,
"success-hover": $success-5,
"success-active": $success-7,
"warning": $warning-6,
"warning-focus": $warning-5,
"warning-hover": $warning-5,
"warning-active": $warning-7,
"error": $error-6,
"error-focus": $error-5,
"error-hover": $error-5,
"error-active": $error-7,
"primary": $--primary-6,
"primary-focus": $--primary-5,
"primary-hover": $--primary-5,
"primary-active": $--primary-7,
"info": $--info-6,
"info-focus": $--info-5,
"info-hover": $--info-5,
"info-active": $--info-7,
"success": $--success-6,
"success-focus": $--success-5,
"success-hover": $--success-5,
"success-active": $--success-7,
"warning": $--warning-6,
"warning-focus": $--warning-5,
"warning-hover": $--warning-5,
"warning-active": $--warning-7,
"error": $--error-6,
"error-focus": $--error-5,
"error-hover": $--error-5,
"error-active": $--error-7,
) !global;
$ghost-button-background-color: (
"default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha),
"default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($--n-secondary-text-color, $alpha: $button-ghost-active-alpha),
"primary": change-color($primary-6, $alpha: $button-ghost-alpha),
"primary-focus": change-color($primary-6, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($primary-6, $alpha: $button-ghost-hover-alpha),
"primary-active": change-color($primary-6, $alpha: $button-ghost-active-alpha),
"info": change-color($info-6, $alpha: $button-ghost-alpha),
"info-focus": change-color($info-6, $alpha: $button-ghost-focus-alpha),
"info-hover": change-color($info-6, $alpha: $button-ghost-hover-alpha),
"info-active": change-color($info-6, $alpha: $button-ghost-active-alpha),
"success": change-color($success-6, $alpha: $button-ghost-alpha),
"success-focus": change-color($success-6, $alpha: $button-ghost-focus-alpha),
"success-hover": change-color($success-6, $alpha: $button-ghost-hover-alpha),
"success-active": change-color($success-6, $alpha: $button-ghost-active-alpha),
"error": change-color($error-6, $alpha: $button-ghost-alpha),
"error-focus": change-color($error-6, $alpha: $button-ghost-focus-alpha),
"error-hover": change-color($error-6, $alpha: $button-ghost-hover-alpha),
"error-active": change-color($error-6, $alpha: $button-ghost-active-alpha),
"warning": change-color($warning-6, $alpha: $button-ghost-alpha),
"warning-focus": change-color($warning-6, $alpha: $button-ghost-focus-alpha),
"warning-hover": change-color($warning-6, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($warning-6, $alpha: $button-ghost-active-alpha),
"primary": change-color($--primary-6, $alpha: $button-ghost-alpha),
"primary-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
"primary-active": change-color($--primary-6, $alpha: $button-ghost-active-alpha),
"info": change-color($--info-6, $alpha: $button-ghost-alpha),
"info-focus": change-color($--info-6, $alpha: $button-ghost-focus-alpha),
"info-hover": change-color($--info-6, $alpha: $button-ghost-hover-alpha),
"info-active": change-color($--info-6, $alpha: $button-ghost-active-alpha),
"success": change-color($--success-6, $alpha: $button-ghost-alpha),
"success-focus": change-color($--success-6, $alpha: $button-ghost-focus-alpha),
"success-hover": change-color($--success-6, $alpha: $button-ghost-hover-alpha),
"success-active": change-color($--success-6, $alpha: $button-ghost-active-alpha),
"error": change-color($--error-6, $alpha: $button-ghost-alpha),
"error-focus": change-color($--error-6, $alpha: $button-ghost-focus-alpha),
"error-hover": change-color($--error-6, $alpha: $button-ghost-hover-alpha),
"error-active": change-color($--error-6, $alpha: $button-ghost-active-alpha),
"warning": change-color($--warning-6, $alpha: $button-ghost-alpha),
"warning-focus": change-color($--warning-6, $alpha: $button-ghost-focus-alpha),
"warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
) !global;
$ghost-button-color: (
"default": $--n-secondary-text-color,
"primary": $primary-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
"primary": $--primary-6,
"info": $--info-6,
"success": $--success-6,
"warning": $--warning-6,
"error": $--error-6
)!global;
$button-color: (
"default": $--n-secondary-text-color,

2
styles/themes/light/components/CheckBox.scss
View File

@ -1,7 +1,7 @@
@mixin setup-light-checkbox {
$--checkbox-font-color: $neutral-3 !global;
$--checkbox-border-color: $neutral-5 !global;
$--checkbox-border-color--active: $primary-6 !global;
$--checkbox-border-color--active: $--primary-6 !global;
$--checkbox-indeterminate-color: $neutral-10 !global;
$--checkbox-disabled: $neutral-5 !global;
$--checkbox-disabled-bg-color: $neutral-8 !global;

2
styles/themes/light/components/Dropdown.scss
View File

@ -1,5 +1,5 @@
@mixin setup-light-dropdown {
$--dropdown-menu-bg-color: #fff !global;
$--dropdown-item-hover-bg-color: #E8E8E8 !global;
$--dropdown-item-hover-font-color: $primary-6 !global;
$--dropdown-item-hover-font-color: $--primary-6 !global;
}

4
styles/themes/light/components/Input.scss
View File

@ -16,8 +16,8 @@
$--input-icon-color: $--n-disabled-text-color !global;
$--input-box-shadow: (
"default": inset 0 0 0 1px $--n-border-color,
"hover": inset 0 0 0 1px $primary-5,
"focus": (inset 0 0 0 1px $primary-5, 0 0 0 2px change-color($primary-5, $alpha: .3)),
"hover": inset 0 0 0 1px $--primary-5,
"focus": (inset 0 0 0 1px $--primary-5, 0 0 0 2px change-color($--primary-5, $alpha: .3)),
"disabled": inset 0 0 0 1px $--n-border-color
) !global;
}

4
styles/themes/light/components/LoadingBar.scss
View File

@ -1,7 +1,7 @@
@mixin setup-light-loading-bar {
$--loading-bar-background-color: (
"error": $error-6,
"loading": $success-6
"error": $--error-6,
"loading": $--success-6
) !global;
$--loading-bar-height: 2px !global;
}

8
styles/themes/light/components/Message.scss
View File

@ -2,10 +2,10 @@
$--message-text-color: white !global;
$--message-icon-color: rgba(255, 255, 255, .45) !global;
$--message-background-color: (
"info": $info-6,
"success": $success-6,
"error": $error-6,
"warning": $warning-6
"info": $--info-6,
"success": $--success-6,
"error": $--error-6,
"warning": $--warning-6
) !global;
$--message-box-shadow: (
"info": 0px 2px 20px 0px rgba(0, 0, 0, .3),

2
styles/themes/light/components/NimbusServiceLayout.scss
View File

@ -6,5 +6,5 @@
$service-layout-border-color: $--n-divider-color !global;
$service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
$service-layout-item-background-image: linear-gradient(47deg, $neutral-7, $neutral-7) !global;
$--service-kayout-item-active-color: $primary-6 !global;
$--service-kayout-item-active-color: $--primary-6 !global;
}

64
styles/themes/light/components/Tag.scss
View File

@ -2,13 +2,13 @@
$--tag-color: (
'default': $--n-secondary-text-color,
'default-disabled': $--n-disabled-text-color,
'success': $success-6,
'success': $--success-6,
'success-disabled': $--n-disabled-text-color,
'warning': $warning-6,
'warning': $--warning-6,
'warning-disabled': $--n-disabled-text-color,
'info': $info-6,
'info': $--info-6,
'info-disabled': $--n-disabled-text-color,
'error': $error-6,
'error': $--error-6,
'error-disabled': $--n-disabled-text-color,
) !global;
$--tag-background-color: (
@ -16,21 +16,21 @@
'default-hover': $neutral-9,
'default-active': $neutral-9,
'default-disabled': $neutral-9,
'success': change-color($success-6, $alpha: .1),
'success-hover': change-color($success-6, $alpha: .1),
'success-active': change-color($success-6, $alpha: .1),
'success': change-color($--success-6, $alpha: .1),
'success-hover': change-color($--success-6, $alpha: .1),
'success-active': change-color($--success-6, $alpha: .1),
'success-disabled': $neutral-9,
'warning': change-color($warning-6, $alpha: .1),
'warning-hover': change-color($warning-6, $alpha: .1),
'warning-active': change-color($warning-6, $alpha: .1),
'warning': change-color($--warning-6, $alpha: .1),
'warning-hover': change-color($--warning-6, $alpha: .1),
'warning-active': change-color($--warning-6, $alpha: .1),
'warning-disabled': $neutral-9,
'info': change-color($info-6, $alpha: .1),
'info-hover': change-color($info-6, $alpha: .1),
'info-active': change-color($info-6, $alpha: .1),
'info': change-color($--info-6, $alpha: .1),
'info-hover': change-color($--info-6, $alpha: .1),
'info-active': change-color($--info-6, $alpha: .1),
'info-disabled': $neutral-9,
'error': change-color($error-6, $alpha: .1),
'error-hover': change-color($error-6, $alpha: .1),
'error-active': change-color($error-6, $alpha: .1),
'error': change-color($--error-6, $alpha: .1),
'error-hover': change-color($--error-6, $alpha: .1),
'error-active': change-color($--error-6, $alpha: .1),
'error-disabled': $neutral-9,
) !global;
$--tag-border-color: (
@ -38,19 +38,19 @@
'default-hover': transparent,
'default-active': transparent,
'default-disabled': $--n-border-color,
'success': $success-3,
'success': $--success-3,
'success-hover': transparent,
'success-active': transparent,
'success-disabled': $--n-border-color,
'warning': $warning-3,
'warning': $--warning-3,
'warning-hover': transparent,
'warning-active': transparent,
'warning-disabled': $--n-border-color,
'info': $info-3,
'info': $--info-3,
'info-hover': transparent,
'info-active': transparent,
'info-disabled': $--n-border-color,
'error': $error-3,
'error': $--error-3,
'error-hover': transparent,
'error-active': transparent,
'error-disabled': $--n-border-color,
@ -60,21 +60,21 @@
'default-hover': change-color($--n-secondary-text-color, $alpha: 1),
'default-active': change-color($--n-secondary-text-color, $alpha: .75),
'default-disabled': change-color($--n-disabled-text-color, $alpha: .5),
'success': change-color($success-6, $alpha: .5),
'success-hover': change-color($success-6, $alpha: 1),
'success-active': change-color($success-6, $alpha: .75),
'success': change-color($--success-6, $alpha: .5),
'success-hover': change-color($--success-6, $alpha: 1),
'success-active': change-color($--success-6, $alpha: .75),
'success-disabled': change-color($--n-disabled-text-color, $alpha: .5),
'warning': change-color($warning-6, $alpha: .5),
'warning-hover': change-color($warning-6, $alpha: 1),
'warning-active': change-color($warning-6, $alpha: .75),
'warning': change-color($--warning-6, $alpha: .5),
'warning-hover': change-color($--warning-6, $alpha: 1),
'warning-active': change-color($--warning-6, $alpha: .75),
'warning-disabled':change-color($--n-disabled-text-color, $alpha: .5),
'info': change-color($info-6, $alpha: .5),
'info-hover': change-color($info-6, $alpha: 1),
'info-active': change-color($info-6, $alpha: .75),
'info': change-color($--info-6, $alpha: .5),
'info-hover': change-color($--info-6, $alpha: 1),
'info-active': change-color($--info-6, $alpha: .75),
'info-disabled': change-color($--n-disabled-text-color, $alpha: .5),
'error': change-color($error-6, $alpha: .5),
'error-hover': change-color($error-6, $alpha: 1),
'error-active': change-color($error-6, $alpha: .75),
'error': change-color($--error-6, $alpha: .5),
'error-hover': change-color($--error-6, $alpha: 1),
'error-active': change-color($--error-6, $alpha: .75),
'error-disabled': change-color($--n-disabled-text-color, $alpha: .5),
) !global;
}

18
styles/themes/light/index.scss
View File

@ -19,16 +19,18 @@
@import "components/Badge.scss";
@import "components/Dropdown.scss";
@import "components/Input.scss";
@import "components/Alert.scss";
@import "components/Anchor.scss";
@mixin setup-light-theme () {
@include setup-light-colors();
$--n-primary-color: $primary-6 !global;
$--n-primary-hover-color: $primary-5 !global;
$--n-primary-active-color: $primary-7 !global;
$--n-info-color: $info-6 !global;
$--n-success-color: $success-6 !global;
$--n-warning-color: $warning-6 !global;
$--n-error-color: $error-6 !global;
$--n-primary-color: $--primary-6 !global;
$--n-primary-hover-color: $--primary-5 !global;
$--n-primary-active-color: $--primary-7 !global;
$--n-info-color: $--info-6 !global;
$--n-success-color: $--success-6 !global;
$--n-warning-color: $--warning-6 !global;
$--n-error-color: $--error-6 !global;
$n-selected-color: $neutral-7 !global;
$--n-divider-color: $neutral-7 !global;
@ -61,4 +63,6 @@
@include setup-light-badge;
@include setup-light-dropdown;
@include setup-light-input;
@include setup-light-anchor;
@include setup-light-alert;
}

100
styles/themes/light/lightColors.bak.scss
View File

@ -11,54 +11,54 @@
$neutral-3: rgba(0, 0, 0, 1) !global;
$neutral-3: rgba(0, 0, 0, 1) !global;
$neutral-3: rgba(0, 0, 0, 1) !global;
$primary-1: #e6ffee !global;
$primary-2: #9bf2bb !global;
$primary-3: #6ee69e !global;
$primary-4: #45d985 !global;
$primary-5: #21cc71 !global;
$primary-6: #00c060 !global;
$primary-7: #009952 !global;
$primary-8: #007341 !global;
$primary-9: #004d2e !global;
$primary-10: #002618 !global;
$success-1: #e6ffee !global;
$success-2: #9bf2bb !global;
$success-3: #6ee69e !global;
$success-4: #45d985 !global;
$success-5: #21cc71 !global;
$success-6: #00c060 !global;
$success-7: #009952 !global;
$success-8: #007341 !global;
$success-9: #004d2e !global;
$success-10: #002618 !global;
$info-1: #edfaff !global;
$info-2: #c4ebff !global;
$info-3: #9cdbff !global;
$info-4: #73c7ff !global;
$info-5: #49affc !global;
$info-6: #2090f0 !global;
$info-7: #106dc9 !global;
$info-8: #054fa3 !global;
$info-9: #00367d !global;
$info-10: #002357 !global;
$warning-1: #fff8f0 !global;
$warning-2: #ffead4 !global;
$warning-3: #ffd4ab !global;
$warning-4: #ffba82 !global;
$warning-5: #ff9e59 !global;
$warning-6: #ff8030 !global;
$warning-7: #d9601e !global;
$warning-8: #b34410 !global;
$warning-9: #8c2c06 !global;
$warning-10: #661c03 !global;
$error-1: #fff0f0 !global;
$error-2: #ffc7cb !global;
$error-3: #ff9ea8 !global;
$error-4: #fa7385 !global;
$error-5: #ed4763 !global;
$error-6: #e02048 !global;
$error-7: #ba1138 !global;
$error-8: #94062c !global;
$error-9: #6e0021 !global;
$error-10: #470018 !global;
$--primary-1: #e6ffee !global;
$--primary-2: #9bf2bb !global;
$--primary-3: #6ee69e !global;
$--primary-4: #45d985 !global;
$--primary-5: #21cc71 !global;
$--primary-6: #00c060 !global;
$--primary-7: #009952 !global;
$--primary-8: #007341 !global;
$--primary-9: #004d2e !global;
$--primary-10: #002618 !global;
$--success-1: #e6ffee !global;
$--success-2: #9bf2bb !global;
$--success-3: #6ee69e !global;
$--success-4: #45d985 !global;
$--success-5: #21cc71 !global;
$--success-6: #00c060 !global;
$--success-7: #009952 !global;
$--success-8: #007341 !global;
$--success-9: #004d2e !global;
$--success-10: #002618 !global;
$--info-1: #edfaff !global;
$--info-2: #c4ebff !global;
$--info-3: #9cdbff !global;
$--info-4: #73c7ff !global;
$--info-5: #49affc !global;
$--info-6: #2090f0 !global;
$--info-7: #106dc9 !global;
$--info-8: #054fa3 !global;
$--info-9: #00367d !global;
$--info-10: #002357 !global;
$--warning-1: #fff8f0 !global;
$--warning-2: #ffead4 !global;
$--warning-3: #ffd4ab !global;
$--warning-4: #ffba82 !global;
$--warning-5: #ff9e59 !global;
$--warning-6: #ff8030 !global;
$--warning-7: #d9601e !global;
$--warning-8: #b34410 !global;
$--warning-9: #8c2c06 !global;
$--warning-10: #661c03 !global;
$--error-1: #fff0f0 !global;
$--error-2: #ffc7cb !global;
$--error-3: #ff9ea8 !global;
$--error-4: #fa7385 !global;
$--error-5: #ed4763 !global;
$--error-6: #e02048 !global;
$--error-7: #ba1138 !global;
$--error-8: #94062c !global;
$--error-9: #6e0021 !global;
$--error-10: #470018 !global;
}

100
styles/themes/light/lightColors.scss
View File

@ -19,54 +19,54 @@
$neutral-8: rgb(244, 244, 244) !global;
$neutral-9: rgb(250, 250, 250) !global;
$neutral-10: rgb(255, 255, 255) !global;
$primary-1: #d9f1e1 !global;
$primary-2: #a7d4b6 !global;
$primary-3: #7dc798 !global;
$primary-4: #57ba7f !global;
$primary-5: #36ad6a !global;
$primary-6: #18a058 !global;
$primary-7: #0c7a43 !global;
$primary-8: #04542f !global;
$primary-9: #002e1a !global;
$primary-10: #000805 !global;
$success-1: #d3e0d7 !global;
$success-2: #a7d4b6 !global;
$success-3: #7dc798 !global;
$success-4: #57ba7f !global;
$success-5: #36b46a !global;
$success-6: #18a058 !global;
$success-7: #0c7a43 !global;
$success-8: #04542f !global;
$success-9: #002e1a !global;
$success-10: #000805 !global;
$info-1: #edfaff !global;
$info-2: #c4e8ff !global;
$info-3: #9cd4ff !global;
$info-4: #73beff !global;
$info-5: #4098fc !global;
$info-6: #2080f0 !global;
$info-7: #1060c9 !global;
$info-8: #0544a3 !global;
$info-9: #002e7d !global;
$info-10: #001d57 !global;
$warning-1: #fffbed !global;
$warning-2: #fff0c4 !global;
$warning-3: #ffe39c !global;
$warning-4: #ffd373 !global;
$warning-5: #fcb040 !global;
$warning-6: #f0a020 !global;
$warning-7: #c97c10 !global;
$warning-8: #a35c05 !global;
$warning-9: #7d4100 !global;
$warning-10: #572a00 !global;
$error-1: #fff0f0 !global;
$error-2: #ffdee0 !global;
$error-3: #f7b0b7 !global;
$error-4: #eb818f !global;
$error-5: #de576d !global;
$error-6: #d03050 !global;
$error-7: #ab1f3f !global;
$error-8: #851130 !global;
$error-9: #5e0822 !global;
$error-10: #380415 !global;
$--primary-1: #d9f1e1 !global;
$--primary-2: #a7d4b6 !global;
$--primary-3: #7dc798 !global;
$--primary-4: #57ba7f !global;
$--primary-5: #36ad6a !global;
$--primary-6: #18a058 !global;
$--primary-7: #0c7a43 !global;
$--primary-8: #04542f !global;
$--primary-9: #002e1a !global;
$--primary-10: #000805 !global;
$--success-1: #d3e0d7 !global;
$--success-2: #a7d4b6 !global;
$--success-3: #7dc798 !global;
$--success-4: #57ba7f !global;
$--success-5: #36b46a !global;
$--success-6: #18a058 !global;
$--success-7: #0c7a43 !global;
$--success-8: #04542f !global;
$--success-9: #002e1a !global;
$--success-10: #000805 !global;
$--info-1: #edfaff !global;
$--info-2: #c4e8ff !global;
$--info-3: #9cd4ff !global;
$--info-4: #73beff !global;
$--info-5: #4098fc !global;
$--info-6: #2080f0 !global;
$--info-7: #1060c9 !global;
$--info-8: #0544a3 !global;
$--info-9: #002e7d !global;
$--info-10: #001d57 !global;
$--warning-1: #fffbed !global;
$--warning-2: #fff0c4 !global;
$--warning-3: #ffe39c !global;
$--warning-4: #ffd373 !global;
$--warning-5: #fcb040 !global;
$--warning-6: #f0a020 !global;
$--warning-7: #c97c10 !global;
$--warning-8: #a35c05 !global;
$--warning-9: #7d4100 !global;
$--warning-10: #572a00 !global;
$--error-1: #fff0f0 !global;
$--error-2: #ffdee0 !global;
$--error-3: #f7b0b7 !global;
$--error-4: #eb818f !global;
$--error-5: #de576d !global;
$--error-6: #d03050 !global;
$--error-7: #ab1f3f !global;
$--error-8: #851130 !global;
$--error-9: #5e0822 !global;
$--error-10: #380415 !global;
}

2
styles/themes/vars.scss
View File

@ -172,7 +172,7 @@ $small-font-size: 12px;
$normal-font-size: $regular-font-size;
$meta-font-size: $small-font-size;
$primary-text-color: rgba(255, 255, 255, .8);
$--primary-text-color: rgba(255, 255, 255, .8);
$regular-text-color: rgba(255, 255, 255, .6);
$secondary-text-color: rgba(255, 255, 255, .4);