mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: dark mode color

Browse Source
This commit is contained in:
07akioni 2019-09-29 17:54:20 +08:00
parent fae92d91da
commit 0453063b95
21 changed files with 189 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/modal/enUS/basic.md
View File

@ -7,7 +7,7 @@
Start Me up
</n-button>
<n-modal v-model="isActive">
<div style="background: hsl(226, 21%, 33%); padding: 24px; border-radius: 8px; color: white;">
<div style="background: rgb(46, 52, 68); padding: 24px; border-radius: 8px; color: white;">
<div>If you start me up, If you start me up, I'll never stop.</div>
<n-input v-model="inputValue" />
inputValue: {{ inputValue }}<br>

6
demo/styles/ComponentDemo.scss
View File

@ -3,9 +3,9 @@
@include themes-mixin {
@include b(code-box) {
background-color: $service-layout-drawer-background-color;
border-color: $service-layout-border-color;
box-shadow: inset 0 0 0 1px $--n-divider-color;
background-color: $--n-card-color;
border: 1px solid $--n-divider-color;
background-clip: padding-box;
@include e(code) {
border-top: 1px solid $--n-divider-color;
code {

147
demo/styles/markdown.scss
View File

@ -1,72 +1,85 @@
.n-app--light-theme .markdown {
code {
background-color: rgb(244, 244, 244);
border: 1px solid rgb(230, 230, 230);
}
table {
border: 1px solid rgba(34,36,38,.15);
th {
background: rgb(250, 250, 250);
}
td {
background-color: white;
}
}
}
@import '../../styles/mixins/config.scss';
@import '../../styles/mixins/mixins.scss';
.markdown {
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: 24px;
margin-bottom: 12px;
}
h2 {
font-size: 20px;
margin-top: 24px;
margin-bottom: 12px;
}
p {
margin: 0 0 16px 0;
font-size: 14px;
line-height: 2;
}
code {
box-sizing: border-box;
border-radius: 3px;
background-color: rgba(255, 255, 255, .09);
padding: .2em .4em;
font-size: 14px;
font-family: 'Lato';
}
table {
font-size: 14px;
width: 100%;
border: 1px solid #40465b;
border-radius: 6px;
text-align: left;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
th {
background-color: hsl(226, 27%, 25%);
text-align: inherit;
padding: 14px 12px;
vertical-align: inherit;
font-style: none;
font-weight: 400;
text-transform: none;
border-bottom: 1px solid rgba(34,36,38,.1);
border-left: none;
font-weight: bold;
@include themes-mixin {
@if $theme == 'dark' {
.markdown {
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: 24px;
margin-bottom: 12px;
}
h2 {
font-size: 20px;
margin-top: 24px;
margin-bottom: 12px;
}
p {
margin: 0 0 16px 0;
font-size: 14px;
line-height: 2;
}
code {
box-sizing: border-box;
border-radius: 3px;
background-color: $--n-alpha-table-header-color;
padding: .2em .4em;
font-size: 14px;
font-family: 'Lato';
}
table {
font-size: 14px;
width: 100%;
border: 1px solid $--n-alpha-divider-color;
border-radius: 6px;
text-align: left;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
// background-color: $--n-alpha-table-body-color;
th {
background-color: $--n-alpha-table-header-color;
background-clip: padding-box;
text-align: inherit;
padding: 14px 12px;
vertical-align: inherit;
font-style: none;
font-weight: 400;
text-transform: none;
border-left: none;
font-weight: bold;
border-bottom: 1px solid $--n-alpha-divider-color;
&:not(:last-child) {
border-right: 1px solid $--n-alpha-table-header-color;
}
}
td {
background-color: $--n-alpha-table-body-color;
background-clip: padding-box;
padding: 12px;
}
}
&.footer-part {
margin-top: 16px;
}
}
td {
padding: 12px;
background-color: #1F263E;
} @else {
.n-app--light-theme .markdown {
code {
background-color: rgb(244, 244, 244);
border: 1px solid rgb(230, 230, 230);
}
table {
border: 1px solid rgba(34,36,38,.15);
th {
background: rgb(250, 250, 250);
}
td {
background-color: white;
}
}
}
}
&.footer-part {
margin-top: 16px;
}
}

15
demo/utils/ComponentDemo.vue
View File

@ -1,3 +1,16 @@
<i18n>
{
"zh-cn": {
"show": "显示代码",
"hide": "收起代码"
},
"en-us": {
"show": "Show Code",
"hide": "Hide Code"
}
}
</i18n>
<template>
<div
class="n-code-box"
@ -23,7 +36,7 @@
@click="toggleCodeDisplay"
/>
</template>
Show Code
{{ !showCode ? $t('show') : $t('hide') }}
</n-tooltip>
</div>
<div class="n-code-box__content markdown">

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

@ -45,6 +45,11 @@
>
{{ hour }}
</div>
<div
v-for="i in [1, 2, 3, 4, 5, 6]"
:key="i"
style="height: 35px;"
/>
</n-scrollbar>
</div>
<div
@ -63,6 +68,11 @@
>
{{ minute }}
</div>
<div
v-for="i in [1, 2, 3, 4, 5, 6]"
:key="i"
style="height: 35px;"
/>
</n-scrollbar>
</div>
<div
@ -84,6 +94,11 @@
>
{{ second }}
</div>
<div
v-for="i in [1, 2, 3, 4, 5, 6]"
:key="i"
style="height: 35px;"
/>
</n-scrollbar>
</div>
</div>

5
packages/nimbus/ServiceLayout/src/main.vue
View File

@ -49,7 +49,10 @@
{{ name }}
</div>
</div>
<div class="n-nimbus-service-layout-drawer-divider" />
<div
v-if="name"
class="n-nimbus-service-layout-drawer-divider"
/>
<div
v-for="item in itemsWithCollapseStatus"
:key="item.name"

3
styles/Input.scss
View File

@ -67,7 +67,6 @@
@include m(small-size) {
font-size: $small-input-font-size;
$height: round($small-input-font-size * 1.5);
height: $small-height;
line-height: $small-height;
@include e(input) {
height: $small-height;
@ -82,7 +81,6 @@
@include m(medium-size) {
font-size: $medium-input-font-size;
$height: round($medium-input-font-size * 1.5);
height: $medium-height;
line-height: $medium-height;
@include e(input) {
height: $medium-height;
@ -97,7 +95,6 @@
@include m(large-size) {
font-size: $large-input-font-size;
$height: round($large-input-font-size * 1.5);
height: $large-height;
line-height: $large-height;
@include e(input) {
height: $large-height;

2
styles/NimbusServiceLayout.scss
View File

@ -18,7 +18,7 @@ $layout-nav-height: 64px;
right: 0;
top: 0;
background-color: $service-layout-nav-background-color;
box-shadow: border-box;
box-sizing: border-box;
border-bottom: 1px solid $service-layout-border-color;
// box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.17);
height: $layout-nav-height;

2
styles/TimePicker.scss
View File

@ -41,7 +41,7 @@
// margin will boom! I don't know why
padding: 10px 15px;
display: flex;
justify-content: space-between;
justify-content: space-around;
.n-button {
margin: 0;
}

0
styles/mixins/color.scss Normal file
View File

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

@ -1,8 +1,8 @@
@mixin setup-dark-base-picker {
$--base-picker-color: $--n-secondary-text-color !global;
$--base-picker-background-color: (
"default": rgba(255, 255, 255, .12),
"disabled": rgba(255, 255, 255, .08),
"default": rgba(255, 255, 255, .1),
"disabled": rgba(255, 255, 255, .06),
"active": change-color($primary-6, $alpha: 0.1)
) !global;
$--base-picker-placeholder-color: (

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

@ -4,7 +4,7 @@
"selected": $--n-primary-color,
"disabled": $--n-disabled-text-color
) !global;
$--base-select-menu-background-color: $neutral-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;
}

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

@ -1,6 +1,6 @@
@mixin setup-dark-confirm {
$--confirm-title-color: $--n-text-color !global;
$--confirm-color: $--n-secondary-text-color !global;
$--confirm-background-color: $neutral-6 !global;
$--confirm-background-color: $--n-dialog-color !global;
$--confirm-border-color: $--n-divider-color !global;
}

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

@ -1,8 +1,8 @@
@mixin setup-dark-nimbus-service-layout {
$service-layout-drawer-background-color: $neutral-8 !global;
$service-layout-body-background-color: $neutral-9 !global;
$service-layout-nav-background-color: $neutral-8 !global;
$service-layout-color: $--n-text-color !global;
$service-layout-drawer-background-color: $--n-card-color !global;
$service-layout-body-background-color: $--n-background-color !global;
$service-layout-nav-background-color: $--n-card-color !global;
$service-layout-color: $--n-secondary-text-color !global;
$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;

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

@ -1,4 +1,4 @@
@mixin setup-dark-popover {
$--popover-background-color: $neutral-6 !global;
$--popover-background-color: $--n-popover-color !global;
$--popover-color: $--n-secondary-text-color !global;
}

4
styles/themes/dark/components/Tooltip.scss
View File

@ -1,5 +1,5 @@
@mixin setup-dark-tooltip {
$--tooltip-background-color: $neutral-6 !global;
$--tooltip-color: $--n-text-color !global;
$--tooltip-background-color: $--n-popover-color !global;
$--tooltip-color: $--n-secondary-text-color !global;
$--tooltip-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08) !global;
}

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

@ -1,14 +1,14 @@
@mixin setup-dark-colors {
$neutral-1: rgb(255, 255, 255) !global;
$neutral-2: rgba(255, 255, 255, .85) !global;
$neutral-3: rgba(255, 255, 255, .65) !global;
$neutral-4: rgba(255, 255, 255, .45) !global;
$neutral-5: #40465b !global;
$neutral-6: #272F46 !global;
$neutral-7: #1F263E !global;
$neutral-8: #171D33 !global;
$neutral-9: #10142C !global;
$neutral-10: rgb(0, 0, 0) !global;
$--neutral-1: rgb(255, 255, 255) !global;
$--neutral-2: rgba(255, 255, 255, .85) !global;
$--neutral-3: rgba(255, 255, 255, .65) !global;
$--neutral-4: rgba(255, 255, 255, .45) !global;
$--neutral-5: #40465b !global;
$--neutral-6: #272F46 !global;
$--neutral-7: #1F263E !global;
$--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;

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

@ -1,14 +1,14 @@
@mixin setup-dark-colors {
$neutral-1: rgb(255, 255, 255) !global;
$neutral-2: rgba(255, 255, 255, .85) !global;
$neutral-3: rgba(255, 255, 255, .65) !global;
$neutral-4: rgba(255, 255, 255, .45) !global;
$neutral-5: #40465b !global;
$neutral-6: #272F46 !global;
$neutral-7: #1F263E !global;
$neutral-8: #171D33 !global;
$neutral-9: #10142C !global;
$neutral-10: rgb(0, 0, 0) !global;
$--neutral-1: rgb(255, 255, 255) !global;
$--neutral-2: rgba(255, 255, 255, .85) !global;
$--neutral-3: rgba(255, 255, 255, .65) !global;
$--neutral-4: rgba(255, 255, 255, .45) !global;
$--neutral-5: #40465b !global;
$--neutral-6: #272F46 !global;
$--neutral-7: #1F263E !global;
$--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;

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

@ -1,14 +1,26 @@
@mixin setup-dark-colors {
$neutral-1: rgb(255, 255, 255) !global;
$neutral-2: rgba(255, 255, 255, .90) !global;
$neutral-3: rgba(255, 255, 255, .80) !global;
$neutral-4: rgba(255, 255, 255, .70) !global;
$neutral-5: hsl(227, 15%, 42%) !global; // popover border
$neutral-6: hsl(226, 21%, 33%) !global; // modal divider
$neutral-7: hsl(226, 27%, 25%) !global;
$neutral-8: hsl(226, 33%, 18%) !global; // drawer & card & table header
$neutral-9: hsl(226, 39%, 12%) !global; // bg
$neutral-10: hsl(226, 46%, 7%) !global;
$--text-1: rgba(255, 255, 255, .9) !global;
$--text-2: rgba(255, 255, 255, .75) !global;
$--overlay-1: rgba(255, 255, 255, 0.3) !global; // popover
$--overlay-2: rgba(255, 255, 255, 0.26) !global; //
$--overlay-3: rgba(255, 255, 255, 0.22) !global; // dialog
$--overlay-4: rgba(255, 255, 255, 0.2) !global; //
$--overlay-5: rgba(255, 255, 255, 0.16) !global; //
$--overlay-6: rgba(255, 255, 255, 0.14) !global; // divider
$--overlay-7: rgba(255, 255, 255, 0.12) !global; // border
$--overlay-8: rgba(255, 255, 255, 0.09) !global; // table-header
$--overlay-9: rgba(255, 255, 255, 0.05) !global; // card & table-body
$--overlay-10: rgba(255, 255, 255, 0) !global; // background
$--neutral-1: rgb(89, 93, 119) !global; // popover
$--neutral-2: rgb(80, 84, 109) !global; //
$--neutral-3: rgb(70, 75, 99) !global; // dialog
$--neutral-4: rgb(65, 70, 94) !global; //
$--neutral-5: rgb(56, 61, 83) !global; //
$--neutral-6: rgb(51, 56, 78) !global; // divider
$--neutral-7: rgb(46, 52, 73) !global; // border
$--neutral-8: rgb(39, 45, 65) !global; // table-header
$--neutral-9: rgb(30, 36, 55) !global; // card & table-body
$--neutral-10: rgb(18, 24, 42) !global; // background
$primary-1: #f0fcf8 !global;
$primary-2: #d4f7eb !global;
$primary-3: #b8f1de !global;

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

@ -21,12 +21,21 @@
$--n-warning-color: $warning-6 !global;
$--n-error-color: $error-6 !global;
$--n-text-color: $neutral-2 !global;
$--n-divider-color: $neutral-7 !global;
$--n-border-color: $neutral-7 !global;
$--n-secondary-text-color: $neutral-2 !global;
$--n-table-header-color: mix($neutral-8, $neutral-9) !global;
$--n-text-color: $--text-1 !global;
$--n-popover-color: $--neutral-1 !global;
$--n-divider-color: $--neutral-6 !global;
$--n-alpha-divider-color: $--overlay-6 !global;
$--n-border-color: $--neutral-7 !global;
$--n-alpha-border-color: $--overlay-7 !global;
$--n-secondary-text-color: $--text-2 !global;
$--n-table-header-color: $--neutral-8 !global;
$--n-alpha-table-header-color: $--overlay-8 !global;
$--n-table-body-color: $--neutral-9 !global;
$--n-alpha-table-body-color: $--overlay-9 !global;
$--n-card-color: $--neutral-9 !global;
$--n-disabled-text-color: rgba(255, 255, 255, .3) !global;
$--n-dialog-color: $--neutral-3 !global;
$--n-background-color: $--neutral-10 !global;
@include setup-dark-nimbus-service-layout;
@include setup-dark-divider;
@include setup-dark-scrollbar;

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

@ -28,6 +28,9 @@
$--n-secondary-text-color: $neutral-3 !global;
$--n-text-color: $neutral-2 !global;
$--n-disabled-text-color: $neutral-5 !global;
$--n-card-color: $neutral-10 !global;
$--n-dialog-color: $neutral-10 !global;
$--n-background-color: $neutral-10 !global;
@include setup-light-nimbus-service-layout;
@include setup-light-divider;