mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #50 from TuSimple/freestyle

Browse Source 
Freestyle
This commit is contained in:
07akioni 2020-02-24 10:27:35 +08:00 committed by GitHub Enterprise
commit 45ed78d8f0
47 changed files with 929 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/button/enUS/debug.md
View File

@ -1,7 +1,7 @@
# Pretend You Didn't See It
List all buttons here for debug usage.
```html
<n-config-consumer transparent>
<n-config-consumer abstract>
<template v-slot="{ theme }">
<div
class="debug-zone"

4
demo/documentation/components/configProvider/enUS/index.md
View File

@ -13,8 +13,8 @@ transparent
|Name|Type|Default|Description|
|-|-|-|-|
|as|`string`|`'div'`|What tag n-config-provider will be rendered as|
|language|`string`|`en-US`|Language of components inside n-config-provider|
|language|`string`|`'en-US'`|Language of components inside n-config-provider|
|namespace|`string`|`null`|Class name of detached parts of components inside n-config-provider|
|theme|`string`|`null`|Theme name of components inside n-config-provider|
|theme-environment|`object`|`null`|An object with some value which can be accessed by n-config-consumer or n-element inside n-config-provider|
|transparent|`boolean`|`false`|If n-config-provider has no wrapper DOM|
|abstract|`boolean`|`false`|If n-config-provider has no wrapper DOM|

4
demo/documentation/components/configProvider/enUS/transparent.md
View File

@ -1,11 +1,11 @@
# No Wrapper DOM
If you don't need wrapper DOM, set `transparent` on it. (Note, in this case it can only take one child node.)
If you don't need wrapper DOM, set `abstract` on it. (Note, in this case it can only take one child node.)
```html
<div>
<n-button @click="theme = 'dark'">Dark Theme</n-button>
<n-button @click="theme = 'light'">Light Theme</n-button>
</div>
<n-config-provider :theme="theme" :theme-environment="env" transparent>
<n-config-provider :theme="theme" :theme-environment="env" abstract>
<n-config-consumer>
<template v-slot="{ themeEnvironment }">
<n-tag>No Wrapper DOM: {{ themeEnvironment }}</n-tag>

4
demo/documentation/components/configProvider/zhCN/index.md
View File

@ -13,9 +13,9 @@ transparent
|名称|类型|默认值|说明|
|-|-|-|-|
|as|`string`|`'div'`|Config Provider 被渲染成什么元素|
|language|`string`|`en-US`|Config Provider 内部的组件语言|
|language|`string`|`'en-US'`|Config Provider 内部的组件语言|
|namespace|`string`|`null`|Config Provider 内部组件被卸载于其他位置的 DOM 的类名|
|theme|`string`|`null`|Config Provider 内部组件的主题|
|theme-environment|`object`|`null`|一个可以被 Config Consumer 或 Element 获取到的主题环境变量|
|transparent|`boolean`|`false`|是否不存在 DOM 包裹|
|abstract|`boolean`|`false`|是否不存在 DOM 包裹|

4
demo/documentation/components/configProvider/zhCN/transparent.md
View File

@ -1,11 +1,11 @@
# 无包裹 DOM
如果不需要包裹 DOM，设置 `transparent`。(注意，这种情况下只接受一个子节点)
如果不需要包裹 DOM，设置 `abstract`。(注意，这种情况下只接受一个子节点)
```html
<div>
<n-button @click="theme = 'dark'">深色主题</n-button>
<n-button @click="theme = 'light'">浅色主题</n-button>
</div>
<n-config-provider :theme="theme" :theme-environment="env" transparent>
<n-config-provider :theme="theme" :theme-environment="env" abstract>
<n-config-consumer>
<template v-slot="{ themeEnvironment }">
<n-tag>无包裹 DOM：{{ themeEnvironment }}</n-tag>

2
demo/documentation/components/dataTable/enUS/controlledSorter.md
View File

@ -1,5 +1,5 @@
# Controlled Sorter
If property `sortOrder` of one of column objects is set to `'ascend'`, `'descend'` or `false`. The sorter of table will be in controlled mode. If multiple columns' `sortOrder` are set to `'ascend'` or `'descend'`, only first column of them will be applied.
If one of the column objects' `sortOrder` is set to `'ascend'`, `'descend'` or `false`. The sorting behavior the table will be in a controlled manner. If multiple columns' `sortOrder` are set to `'ascend'` or `'descend'`, only first column of them will be applied.
```html
<n-button @click="sortName('ascend')">Sort By Name (Ascend)</n-button>
<n-button @click="sortName('descend')">Sort By Name (Descend)</n-button>

2
demo/documentation/components/log/enUS/scroll.md
View File

@ -1,6 +1,6 @@
# Scroll
You can easily make log scroll to top or bottom. Also you can make the scroll action silent (don't trigger events of Log of this scroll action).
You can easily make log scroll to top or bottom. Also you can make the scroll action silent (don't trigger events of Log in this scroll action).
```html
<n-button-group>

2
demo/documentation/components/notification/enUS/index.md
View File

@ -43,7 +43,7 @@ duration
### NotificationEnvironment API
#### NotificationEnvironment Properties
Properties of Instance of NofiticationEnvironment can be dynamically set.
Properties of NofiticationEnvironment Instance can be dynamically set.
|Name|Type|Description|
|-|-|-|

2
demo/documentation/components/select/enUS/customOption.md
View File

@ -13,7 +13,7 @@ function render (h, option, selected) {
return [
h('n-config-consumer', {
props: {
transparent: true
abstract: true
},
scopedSlots: {
default ({ styleScheme }) {

2
demo/documentation/components/select/zhCN/customOption.md
View File

@ -13,7 +13,7 @@ function render (h, option, selected) {
return [
h('n-config-consumer', {
props: {
transparent: true
abstract: true
},
scopedSlots: {
default ({ styleScheme }) {

33
demo/documentation/components/table/enUS/basic.md
View File

@ -1,19 +1,30 @@
# Basic
```html
<n-table>
<n-table :bordered="false" :single-line="false">
<n-thead>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

30
demo/documentation/components/table/enUS/bordered.md Normal file
View File

@ -0,0 +1,30 @@
# Bordered
```html
<n-table :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

12
demo/documentation/components/table/enUS/index.md
View File

@ -5,7 +5,19 @@ If you only want to render some basic table, use it. If you want to render struc
## Demos
```demo
basic
bordered
single-column
single-line
```
## Components
You can use `n-table`, `n-thead`, `n-tbody`, `n-tr`, `n-th` and `n-td`.
## Props
### Table Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`true`||
|single-line|`boolean`|`true`||
|single-column|`boolean`|`false`||

30
demo/documentation/components/table/enUS/singleColumn.md Normal file
View File

@ -0,0 +1,30 @@
# Single Column
```html
<n-table single-column :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

30
demo/documentation/components/table/enUS/singleLine.md Normal file
View File

@ -0,0 +1,30 @@
# Single Line
```html
<n-table>
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

33
demo/documentation/components/table/zhCN/basic.md
View File

@ -1,19 +1,30 @@
# 基础用法
```html
<n-table>
<n-table :bordered="false" :single-line="false">
<n-thead>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

30
demo/documentation/components/table/zhCN/bordered.md Normal file
View File

@ -0,0 +1,30 @@
# 边框
```html
<n-table :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

12
demo/documentation/components/table/zhCN/index.md
View File

@ -5,7 +5,19 @@
## 演示
```demo
basic
bordered
single-column
single-line
```
## Components
你可以使用 `n-table`、`n-thead`、`n-tbody`、`n-tr`、`n-th` 和 `n-td`。
## Props
### Table Props
|名称|类型|默认值|说明|
|-|-|-|-|
|bordered|`boolean`|`true`||
|single-line|`boolean`|`true`||
|single-column|`boolean`|`false`||

30
demo/documentation/components/table/zhCN/singleColumn.md Normal file
View File

@ -0,0 +1,30 @@
# 单列
```html
<n-table single-column :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

30
demo/documentation/components/table/zhCN/singleLine.md Normal file
View File

@ -0,0 +1,30 @@
# 单行
```html
<n-table>
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```

2
demo/documentation/components/tag/enUS/disabled.md
View File

@ -10,7 +10,7 @@
<n-tag
type="success"
closable
disabled
:disabled="disabled"
@close="handleClose"
>
Yes It Is

2
demo/documentation/components/time/enUS/format.md
View File

@ -1,5 +1,5 @@
# Format
Format time. Specs see <a href="https://date-fns.org/v2.6.0/docs/format">date-fns format</a>.
Format time. Specs see <n-a href="https://date-fns.org/v2.6.0/docs/format">date-fns format</n-a>.
```html
<n-time :time="0" format="yyyy-MM-dd"/>
<br>

3
demo/documentation/components/time/enUS/index.md
View File

@ -15,5 +15,4 @@ unix
|type|`'relative' \| 'date' \| 'datetime'`|`'relative'`||
|to|`number \| Date`|`new Date()`||
|unix|`boolean`|`false`||
|format|`string`|`null`||
|transparent|`boolean`|`false`||
|format|`string`|`null`||

2
demo/documentation/components/time/zhCN/format.md
View File

@ -1,5 +1,5 @@
# 格式化
格式化时间， 详尽文档请查看 <a href="https://date-fns.org/v2.6.0/docs/format">date-fns format</a>.
格式化时间， 详尽文档请查看 <n-a href="https://date-fns.org/v2.6.0/docs/format">date-fns format</n-a>.
```html
<n-time :time="0" format="yyyy-MM-dd"/>
<br>

3
demo/documentation/components/time/zhCN/index.md
View File

@ -15,5 +15,4 @@ unix
|type|`'relative' \| 'date' \| 'datetime'`|`'relative'`||
|to|`number \| Date`|`new Date()`||
|unix|`boolean`|`false`||
|format|`string`|`null`||
|transparent|`boolean`|`false`||
|format|`string`|`null`||

4
demo/loaders/mdRenderer.js
View File

@ -6,7 +6,7 @@ function createRenderer (wrapCodeWithCard = true) {
const overrides = {
table (header, body) {
if (body) body = '<tbody class="n-table__tbody">' + body + '</tbody>'
return '<n-table>\n' +
return '<n-table single-column>\n' +
'<thead class="n-table__thead">\n' +
header +
'</thead>\n' +
@ -32,7 +32,7 @@ function createRenderer (wrapCodeWithCard = true) {
throw new Error(`MdRendererError: ${language} is not valid for code`)
}
const highlighted = hljs.highlight(language, code).value
return `${wrapCodeWithCard ? '<n-card size="small">' : ''}<n-config-consumer transparent>
return `${wrapCodeWithCard ? '<n-card size="small">' : ''}<n-config-consumer abstract>
<template v-slot="{ theme }">
<pre class="n-code" :class="'n-' + theme + '-theme'"><code v-pre>${highlighted}</code></pre>
</template>

2
demo/menuOptions.js
View File

@ -10,7 +10,7 @@ const appendCounts = item => {
item.title = h => {
return h('n-config-consumer', {
props: {
transparent: true
abstract: true
},
scopedSlots: {
default: ({ styleScheme }) => {

8
src/ConfigProvider/src/main.vue
View File

@ -19,7 +19,7 @@ export default {
type: String,
default: 'div'
},
transparent: {
abstract: {
type: Boolean,
default: false
},
@ -58,14 +58,14 @@ export default {
},
render (h) {
const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default() : []
if (this.transparent) {
if (this.abstract) {
if (defaultSlot.length > 1) {
console.error(
'[naive-ui/config-provider]: `n-config-provider` only takes single child node when `transparent` prop is `true`. If multiple child nodes are set, only the first one will be rendered.'
'[naive-ui/config-provider]: `n-config-provider` only takes single child node when `abstract` prop is `true`. If multiple child nodes are set, only the first one will be rendered.'
)
}
}
return !this.transparent ? h(this.as, {
return !this.abstract ? h(this.as, {
staticClass: 'n-config-provider',
class: {
[`n-${this.theme}-theme`]: this.theme

21
src/Table/src/Table.vue
View File

@ -2,7 +2,10 @@
<table
class="n-table"
:class="{
[`n-${syntheticTheme}-theme`]: syntheticTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-table--bordered': bordered,
'n-table--single-line': singleLine,
'n-table--single-column': singleColumn
}"
>
<slot />
@ -15,6 +18,20 @@ import themeable from '../../_mixins/themeable'
export default {
name: 'NTable',
mixins: [withapp, themeable]
mixins: [withapp, themeable],
props: {
bordered: {
type: Boolean,
default: true
},
singleLine: {
type: Boolean,
default: true
},
singleColumn: {
type: Boolean,
default: false
}
}
}
</script>

11
src/Time/src/main.js
View File

@ -3,6 +3,7 @@ import formatDistance from 'date-fns/formatDistance'
import fromUnixTime from 'date-fns/fromUnixTime'
import zhCN from 'date-fns/locale/zh-CN'
import enUS from 'date-fns/locale/en-US'
import render from '../../_utils/vue/render'
import locale from '../../_mixins/locale'
@ -34,9 +35,9 @@ export default {
type: String,
default: null
},
transparent: {
text: {
type: Boolean,
default: true
default: false
}
},
computed: {
@ -84,6 +85,10 @@ export default {
}
},
render (h) {
return this.transparent ? this._v(this.renderedTime) : h('time', this.renderedTime)
return this.text ? h(render, {
props: {
render: this.renderedTime
}
}) : h('time', this.renderedTime)
}
}

6
src/_base/Loading/src/main.vue
View File

@ -2,6 +2,9 @@
<div
:class="{[`n-${theme}-theme`]: theme}"
class="n-base-loading"
:style="{
stroke
}"
>
<svg
class="n-base-loading-circular"
@ -9,8 +12,7 @@
>
<circle
:style="{
strokeWidth,
stroke
strokeWidth
}"
class="n-base-loading-circular-path"
:cx="radius"

2
src/_deprecated/NimbusServiceLayout/src/main.vue
View File

@ -191,7 +191,7 @@ export default {
this.$slots['drawer-header-icon'] ? h(
'NConfigConsumer', {
props: {
transparent: true
abstract: true
},
scopedSlots: {
default: ({ styleScheme }) => {

4
styles/BaseLoading.scss
View File

@ -28,6 +28,8 @@
@include once {
line-height: 1;
}
stroke: $--base-loading-stroke;
transition: stroke .3s $--n-ease-in-out-cubic-bezier;
@include b(base-loading-circular) {
@include once {
height: 100%;
@ -36,10 +38,8 @@
transform-origin: center;
}
@include b(base-loading-circular-path) {
stroke: $--base-loading-stroke;
@include once {
transform-origin: center;
transition: stroke .3s $--n-ease-in-out-cubic-bezier;
animation: n-base-loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: $--n-base-loading-stroke-dashoffset;
stroke-dashoffset: 0;

176
styles/Button.scss
View File

@ -1,7 +1,7 @@
@import './mixins/mixins.scss';
@mixin button-size-mixin($size) {
@include m($size + "-size") {
@include m($size + '-size') {
$height: map-get($--n-height, $size);
$font-size: map-get($--n-button-font-size, $size);
border-radius: $--n-button-border-radius;
@ -76,14 +76,14 @@
}
@mixin button-type-mixin ($type) {
@include m($type + "-type") {
color: map-get($--button-color, $type);
@include m($type + '-type') {
color: map-get($--button-text-color, $type);
background-color: map-get($--button-background-color, $type);
box-shadow: map-get($--button-box-shadow, $type);
@include m(text) {
box-shadow: none;
box-shadow: none !important;
background-color: transparent;
color: map-get($--text-button-color, $type);
color: map-get($--button-text-typed-text-color, $type);
@include not-m(disabled) {
@include m(rippling) {
&::after {
@ -92,73 +92,132 @@
}
@include m(enter-pressed) {
background-color: transparent;
color: map-get($--text-button-color, $type + '-active');
color: map-get($--button-text-typed-text-color, $type + '-active');
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: transparent;
color: map-get($--text-button-color, $type + '-focus');
color: map-get($--button-text-typed-text-color, $type + '-focus');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: transparent;
color: map-get($--text-button-color, $type + '-hover');
color: map-get($--button-text-typed-text-color, $type + '-hover');
}
&:active {
background-color: transparent;
color: map-get($--text-button-color, $type + '-active');
color: map-get($--button-text-typed-text-color, $type + '-active');
}
}
}
}
@include m(ghost) {
background-color: map-get($--ghost-button-background-color, $type);
color: map-get($--ghost-button-color, $type);
box-shadow: map-get($--button-box-shadow, $type + '-ghost');
background-color: map-get($--button-ghost-typed-background-color, $type);
color: map-get($--button-ghost-typed-text-color, $type);
box-shadow: map-get($--button-ghost-typed-box-shadow, $type);
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($--ghost-button-background-color, $type + '-active');
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
color: map-get($--button-ghost-typed-text-color, $type + '-active');
box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-active');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
}
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: map-get($--ghost-button-background-color, $type + '-hover');
color: map-get($--button-ghost-typed-text-color, $type + '-focus');
background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-focus');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
}
}
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($--ghost-button-background-color, $type + '-hover');
background-color: map-get($--button-ghost-typed-background-color, $type + '-hover');
color: map-get($--button-ghost-typed-text-color, $type + '-hover');
box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-hover');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
}
}
}
&:active {
background-color: map-get($--ghost-button-background-color, $type + '-active');
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
color: map-get($--button-ghost-typed-text-color, $type + '-active');
box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-active');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
stroke: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
}
}
}
}
}
@include e(icon) {
@include b(icon) {
fill: map-get($--ghost-button-color, $type) !important;
stroke: map-get($--ghost-button-color, $type) !important;
fill: map-get($--button-ghost-typed-text-color, $type) !important;
stroke: map-get($--button-ghost-typed-text-color, $type) !important;
}
circle {
stroke: map-get($--ghost-button-color, $type) !important;
@include b(base-loading) {
fill: map-get($--button-ghost-typed-text-color, $type) !important;
stroke: map-get($--button-ghost-typed-text-color, $type) !important;
}
}
}
@if $type == 'default' {
@include e(icon) {
@include b(icon) {
fill: map-get($--ghost-button-color, $type) !important;
stroke: map-get($--ghost-button-color, $type) !important;
}
circle {
stroke: map-get($--ghost-button-color, $type) !important;
}
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type) !important;
stroke: map-get($--button-text-color, $type) !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type) !important;
stroke: map-get($--button-text-color, $type) !important;
}
}
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($--button-background-color, $type + '-active');
color: map-get($--button-text-color, $type + '-active');
box-shadow: map-get($--button-box-shadow, $type + '-active');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type + '-active') !important;
stroke: map-get($--button-text-color, $type + '-active') !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type + '-active') !important;
stroke: map-get($--button-text-color, $type + '-active') !important;
}
}
}
@include m(rippling) {
&::after {
@ -170,29 +229,64 @@
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: map-get($--button-background-color, $type + '-hover');
background-color: map-get($--button-background-color, $type + '-focus');
color: map-get($--button-text-color, $type + '-focus');
box-shadow: map-get($--button-box-shadow, $type + '-focus');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type + '-focus') !important;
stroke: map-get($--button-text-color, $type + '-focus') !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type + '-focus') !important;
stroke: map-get($--button-text-color, $type + '-focus') !important;
}
}
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($--button-background-color, $type + '-hover');
color: map-get($--button-text-color, $type + '-hover');
box-shadow: map-get($--button-box-shadow, $type + '-hover');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type + '-hover') !important;
stroke: map-get($--button-text-color, $type + '-hover') !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type + '-hover') !important;
stroke: map-get($--button-text-color, $type + '-hover') !important;
}
}
}
&:active {
background-color: map-get($--button-background-color, $type + '-active');
color: map-get($--button-text-color, $type + '-active');
box-shadow: map-get($--button-box-shadow, $type + '-active');
@include e(icon) {
@include b(icon) {
fill: map-get($--button-text-color, $type + '-active') !important;
stroke: map-get($--button-text-color, $type + '-active') !important;
}
@include b(base-loading) {
fill: map-get($--button-text-color, $type + '-active') !important;
stroke: map-get($--button-text-color, $type + '-active') !important;
}
}
}
}
}
@content;
}
}
@mixin ripple-mixin($type) {
@mixin button-ripple-mixin($type) {
@keyframes #{$theme}-#{$type}-button-ripple--spread {
from {
box-shadow: map-get($--button-box-shadow, $type + '-focus-ripple-start');
box-shadow: map-get($--button-ripple-box-shadow, $type + '-start');
}
to {
box-shadow: map-get($--button-box-shadow, $type + '-focus-ripple-end');
box-shadow: map-get($--button-ripple-box-shadow, $type + '-end');
}
}
@keyframes #{$theme}-#{$type}-button-ripple--opacity {
@ -206,12 +300,12 @@
}
@include themes-mixin() {
@include ripple-mixin('default');
@include ripple-mixin('primary');
@include ripple-mixin('error');
@include ripple-mixin('success');
@include ripple-mixin('warning');
@include ripple-mixin('info');
@include button-ripple-mixin('default');
@include button-ripple-mixin('primary');
@include button-ripple-mixin('error');
@include button-ripple-mixin('success');
@include button-ripple-mixin('warning');
@include button-ripple-mixin('info');
@include b(button) {
@include once {
outline: none;

2
styles/DataTable.scss
View File

@ -14,7 +14,7 @@
border-top-left-radius: 6px;
border-top-right-radius: 6px;
overflow: hidden;
line-height: 1.75;
line-height: 1.5;
}
@include b(data-table-table-wrapper) {
@include once {

1
styles/Log.scss
View File

@ -22,6 +22,7 @@
@include b(log-loader) {
@include once {
@include fade-in-width-expand-transition($duration: .3s, $delay: 0s);
font-family: $--n-font-family;
transition:
color .3s $--n-ease-in-out-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier;

2
styles/Notification.scss
View File

@ -161,7 +161,7 @@
}
@include e(content) {
@include once {
line-height: 1.25;
line-height: 1.75;
margin: 12px 0 0 0;
font-family: inherit;
&:first-child {

1
styles/Select.scss
View File

@ -42,6 +42,7 @@
}
}
@include b(select-menu) {
transform: $--n-transform-debounce-scale;
@include fade-in-scale-up-transition(
select-menu,
$original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier)

38
styles/Table.scss
View File

@ -3,9 +3,10 @@
@include themes-mixin {
@include b(table) {
@include once {
line-height: 1.75;
font-size: 14px;
width: 100%;
border-radius: 6px;
border-radius: 6px 6px 0 0;
text-align: left;
border-collapse: separate;
border-spacing: 0;
@ -15,7 +16,6 @@
border-color .3s $--n-ease-in-out-cubic-bezier,
color .3s $--n-ease-in-out-cubic-bezier;
}
border: 1px solid $--table-border-color;
background: $--table-body-background-color;
@include e(th) {
@include once {
@ -28,7 +28,6 @@
text-align: inherit;
padding: 14px 12px;
vertical-align: inherit;
font-style: none;
text-transform: none;
border: none;
font-weight: 500;
@ -37,6 +36,10 @@
background-color: $--table-header-background-color;
border-color: $--table-border-color;
border-bottom: 1px solid $--table-border-color;
border-right: 1px solid $--table-border-color;
&:last-child {
border-right: none;
}
}
@include e(td) {
@include once {
@ -48,6 +51,35 @@
}
color: $--table-body-text-color;
background-color: $--n-table-body-background-color;
border-right: 1px solid $--table-border-color;
border-bottom: 1px solid $--table-border-color;
&:last-child {
border-right: none;
}
}
@include m(bordered) {
border: 1px solid $--table-border-color;
border-radius: 6px;
@include e(tr) {
&:last-child {
@include e(td) {
border-bottom: none;
}
}
}
}
@include m(single-line) {
@include e(th) {
border-right: none;
}
@include e(td) {
border-right: none;
}
}
@include m(single-column) {
@include e(td) {
border-bottom: none;
}
}
}
}

10
styles/Tag.scss
View File

@ -28,12 +28,14 @@
@mixin tag-type-mixin($type) {
@include m($type + '-type') {
@include not-m(checkable) {
box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type);
color: map-get($--tag-text-color, $type);
background-color: map-get($--tag-background-color, $type);
@include e(close) {
fill: map-get($--tag-close-color, $type);
}
@include not-m(disabled) {
box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type);
color: map-get($--tag-text-color, $type);
background-color: map-get($--tag-background-color, $type);
@include e(close) {
fill: map-get($--tag-close-color, $type);
&:hover {
fill: map-get($--tag-close-color, $type + '-hover');
}

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

@ -1,144 +1,200 @@
@mixin setup-dark-button {
$--button-border-color: (
"default": $--n-primary-color,
"primary": $--n-primary-color,
"info": $--n-info-color,
"success": $--n-success-color,
"warning": $--n-warning-color,
"error": $--n-error-color
$--button-box-shadow-ripple-spread: 4px;
$--button-ripple-box-shadow: (
'default-start': (0 0 0 0 $--n-primary-color),
'default-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
'primary-start': (0 0 0 0 $--n-primary-color),
'primary-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
'success-start': (0 0 0 0 $--n-success-color),
'success-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-success-color),
'info-start': (0 0 0 0 $--n-info-color),
'info-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-info-color),
'warning-start': (0 0 0 0 $--n-warning-color),
'warning-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-warning-color),
'error-start': (0 0 0 0 $--n-error-color),
'error-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-error-color)
) !global;
$--button-box-shadow-spread: 0px !global;
$--button-box-shadow-ripple-spread: 4px !global;
$--button-box-shadow-spread-alpha: .3 !global;
$--button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'default')),
'default': inset 0 0 0 1px $--n-border-color,
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
'default-active': inset 0 0 0 1px $--n-primary-active-color,
'default-focus': (inset 0 0 0 1px $--n-primary-color),
'primary': none,
'primary-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'primary'),
'primary-hover': none,
'primary-active': none,
'primary-focus': none,
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'primary')),
'success': none,
'success-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'success'),
'success-hover': none,
'success-active': none,
'success-focus': none,
'success-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'success')),
'success-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'success')),
'info': none,
'info-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'info'),
'info-hover': none,
'info-active': none,
'info-focus': none,
'info-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'info')),
'info-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'info')),
'warning': none,
'warning-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'warning'),
'warning-hover': none,
'warning-active': none,
'warning-focus': none,
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'warning')),
'warning-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'warning')),
'error': none,
'error-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'error'),
'error-focus': none,
'error-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'error'))
'error-hover': none,
'error-active': none,
'error-focus': none
) !global;
$--button-ghost-typed-box-shadow: (
'default': inset 0 0 0 1px $--n-border-color,
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
'default-active': inset 0 0 0 1px $--n-primary-active-color,
'default-focus': inset 0 0 0 1px $--n-primary-hover-color,
'primary': inset 0 0 0 1px change-color($--n-primary-color, $alpha: $--n-tertiary-opacity),
'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
'primary-active': inset 0 0 0 1px $--n-primary-active-color,
'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
'success': inset 0 0 0 1px change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-hover': inset 0 0 0 1px $--n-success-hover-color,
'success-active': inset 0 0 0 1px $--n-success-active-color,
'success-focus': inset 0 0 0 1px $--n-success-hover-color,
'info': inset 0 0 0 1px change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-hover': inset 0 0 0 1px $--n-info-hover-color,
'info-active': inset 0 0 0 1px $--n-info-active-color,
'info-focus': inset 0 0 0 1px $--n-info-hover-color,
'warning': inset 0 0 0 1px change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
'warning-active': inset 0 0 0 1px $--n-warning-active-color,
'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
'error': inset 0 0 0 1px change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-hover': inset 0 0 0 1px $--n-error-hover-color,
'error-active': inset 0 0 0 1px $--n-error-active-color,
'error-focus': inset 0 0 0 1px $--n-error-hover-color
) !global;
$button-ghost-alpha: 0;
$button-ghost-hover-alpha: .2;
$button-ghost-active-alpha: .3;
$button-ghost-focus-alpha: .2;
$--button-background-color: (
"default": change-color($--n-primary-color, $alpha: $button-ghost-alpha),
"default-focus": change-color($--n-primary-color, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--n-primary-color, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($--n-primary-color, $alpha: $button-ghost-active-alpha),
"primary": $--n-primary-color,
"primary-focus": $--n-primary-hover-color,
"primary-hover": $--n-primary-hover-color,
"primary-active": $--n-primary-active-color,
"info": $--n-info-color,
"info-focus": $--n-info-hover-color,
"info-hover": $--n-info-hover-color,
"info-active": $--n-info-active-color,
"success": $--n-success-color,
"success-focus": $--n-success-hover-color,
"success-hover": $--n-success-hover-color,
"success-active": $--n-success-active-color,
"warning": $--n-warning-color,
"warning-focus": $--n-warning-hover-color,
"warning-hover": $--n-warning-hover-color,
"warning-active": $--n-warning-active-color,
"error": $--n-error-color,
"error-focus": $--n-error-hover-color,
"error-hover": $--n-error-hover-color,
"error-active": $--n-error-active-color,
'default': transparent,
'default-focus': transparent,
'default-hover': transparent,
'default-active': transparent,
'primary': $--n-primary-color,
'primary-focus': $--n-primary-hover-color,
'primary-hover': $--n-primary-hover-color,
'primary-active': $--n-primary-active-color,
'info': $--n-info-color,
'info-focus': $--n-info-hover-color,
'info-hover': $--n-info-hover-color,
'info-active': $--n-info-active-color,
'success': $--n-success-color,
'success-focus': $--n-success-hover-color,
'success-hover': $--n-success-hover-color,
'success-active': $--n-success-active-color,
'warning': $--n-warning-color,
'warning-focus': $--n-warning-hover-color,
'warning-hover': $--n-warning-hover-color,
'warning-active': $--n-warning-active-color,
'error': $--n-error-color,
'error-focus': $--n-error-hover-color,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-active-color,
) !global;
$--ghost-button-background-color: (
"default": change-color($--n-primary-color, $alpha: $button-ghost-alpha),
"default-focus": change-color($--n-primary-color, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--n-primary-color, $alpha: $button-ghost-hover-alpha),
"default-active": change-color($--n-primary-color, $alpha: $button-ghost-active-alpha),
"primary": change-color($--n-primary-color, $alpha: $button-ghost-alpha),
"primary-focus": change-color($--n-primary-color, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($--n-primary-color, $alpha: $button-ghost-hover-alpha),
"primary-active": change-color($--n-primary-color, $alpha: $button-ghost-active-alpha),
"info": change-color($--n-info-color, $alpha: $button-ghost-alpha),
"info-focus": change-color($--n-info-color, $alpha: $button-ghost-focus-alpha),
"info-hover": change-color($--n-info-color, $alpha: $button-ghost-hover-alpha),
"info-active": change-color($--n-info-color, $alpha: $button-ghost-active-alpha),
"success": change-color($--n-success-color, $alpha: $button-ghost-alpha),
"success-focus": change-color($--n-success-color, $alpha: $button-ghost-focus-alpha),
"success-hover": change-color($--n-success-color, $alpha: $button-ghost-hover-alpha),
"success-active": change-color($--n-success-color, $alpha: $button-ghost-active-alpha),
"error": change-color($--n-error-color, $alpha: $button-ghost-alpha),
"error-focus": change-color($--n-error-color, $alpha: $button-ghost-focus-alpha),
"error-hover": change-color($--n-error-color, $alpha: $button-ghost-hover-alpha),
"error-active": change-color($--n-error-color, $alpha: $button-ghost-active-alpha),
"warning": change-color($--n-warning-color, $alpha: $button-ghost-alpha),
"warning-focus": change-color($--n-warning-color, $alpha: $button-ghost-focus-alpha),
"warning-hover": change-color($--n-warning-color, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($--n-warning-color, $alpha: $button-ghost-active-alpha),
) !global;
$--ghost-button-color: (
"default": $--n-primary-color,
"primary": $--n-primary-color,
"info": $--n-info-color,
"success": $--n-success-color,
"warning": $--n-warning-color,
"error": $--n-error-color
$--button-ghost-typed-background-color: (
'default': transparent,
'default-focus': transparent,
'default-hover': transparent,
'default-active': transparent,
'primary': transparent,
'primary-focus': transparent,
'primary-hover': transparent,
'primary-active': transparent,
'info': transparent,
'info-focus': transparent,
'info-hover': transparent,
'info-active': transparent,
'success': transparent,
'success-focus': transparent,
'success-hover': transparent,
'success-active': transparent,
'error': transparent,
'error-focus': transparent,
'error-hover': transparent,
'error-active': transparent,
'warning': transparent,
'warning-focus': transparent,
'warning-hover': transparent,
'warning-active': transparent
)!global;
$--button-color: (
"default": $--n-primary-color,
"primary": black,
"info": black,
"success": black,
"warning": black,
"error": black
$--button-ghost-typed-text-color: (
'default': $--n-secondary-text-color,
'default-focus': $--n-primary-hover-color,
'default-hover': $--n-primary-hover-color,
'default-active': $--n-primary-active-color,
'primary': $--n-primary-color,
'primary-focus': $--n-primary-hover-color,
'primary-hover': $--n-primary-hover-color,
'primary-active': $--n-primary-active-color,
'info': $--n-info-color,
'info-focus': $--n-info-hover-color,
'info-hover': $--n-info-hover-color,
'info-active': $--n-info-active-color,
'success': $--n-success-color,
'success-focus': $--n-success-hover-color,
'success-hover': $--n-success-hover-color,
'success-active': $--n-success-active-color,
'warning': $--n-warning-color,
'warning-focus': $--n-warning-hover-color,
'warning-hover': $--n-warning-hover-color,
'warning-active': $--n-warning-active-color,
'error': $--n-error-color,
'error-focus': $--n-error-hover-color,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-active-color,
) !global;
$--text-button-color: (
"default": $--n-secondary-text-color,
"default-hover": $--n-secondary-text-color,
"default-active": $--n-secondary-text-color,
"default-focus": $--n-secondary-text-color,
"primary": $--n-primary-color,
"primary-hover": $--n-primary-hover-color,
"primary-active": $--n-primary-active-color,
"primary-focus": $--n-primary-hover-color,
"info": $--n-info-color,
"info-hover": $--n-info-hover-color,
"info-active": $--n-info-active-color,
"info-focus": $--n-info-hover-color,
"success": $--n-success-color,
"success-hover": $--n-success-hover-color,
"success-active": $--n-success-active-color,
"success-focus": $--n-success-hover-color,
"warning": $--n-warning-color,
"warning-hover": $--n-warning-hover-color,
"warning-active": $--n-warning-active-color,
"warning-focus": $--n-warning-hover-color,
"error": $--n-error-color,
"error-hover": $--n-error-hover-color,
"error-active": $--n-error-active-color,
"error-focus": $--n-error-hover-color
$--button-text-color: (
'default': $--n-secondary-text-color,
'default-focus': $--n-primary-hover-color,
'default-hover': $--n-primary-hover-color,
'default-active': $--n-primary-active-color,
'primary': $--n-base-background-color,
'primary-focus': $--n-base-background-color,
'primary-hover': $--n-base-background-color,
'primary-active': $--n-base-background-color,
'info': $--n-base-background-color,
'info-focus': $--n-base-background-color,
'info-hover': $--n-base-background-color,
'info-active': $--n-base-background-color,
'success': $--n-base-background-color,
'success-focus':$--n-base-background-color,
'success-hover': $--n-base-background-color,
'success-active': $--n-base-background-color,
'warning': $--n-base-background-color,
'warning-focus': $--n-base-background-color,
'warning-hover': $--n-base-background-color,
'warning-active': $--n-base-background-color,
'error': $--n-base-background-color,
'error-focus': $--n-base-background-color,
'error-hover': $--n-base-background-color,
'error-active': $--n-base-background-color
) !global;
$--button-text-typed-text-color: (
'default': $--n-secondary-text-color,
'default-hover': $--n-primary-hover-color,
'default-active': $--n-primary-active-color,
'default-focus': $--n-primary-hover-color,
'primary': $--n-primary-color,
'primary-hover': $--n-primary-hover-color,
'primary-active': $--n-primary-active-color,
'primary-focus': $--n-primary-hover-color,
'info': $--n-info-color,
'info-hover': $--n-info-hover-color,
'info-active': $--n-info-active-color,
'info-focus': $--n-info-hover-color,
'success': $--n-success-color,
'success-hover': $--n-success-hover-color,
'success-active': $--n-success-active-color,
'success-focus': $--n-success-hover-color,
'warning': $--n-warning-color,
'warning-hover': $--n-warning-hover-color,
'warning-active': $--n-warning-active-color,
'warning-focus': $--n-warning-hover-color,
'error': $--n-error-color,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-active-color,
'error-focus': $--n-error-hover-color
) !global;
$--button-disabled-opacity: $--n-disabled-opacity !global;
}

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

@ -3,8 +3,8 @@
'checkable-default': $--n-secondary-text-color,
'checkable-hover': $--n-primary-color,
'checkable-active': $--n-base-background-color,
'default': $--n-primary-color,
'default-disabled': change-color($--n-primary-color, $alpha: .3),
'default': $--n-secondary-text-color,
'default-disabled': $--n-disabled-text-color,
'success': $--n-success-color,
'success-disabled': change-color($--n-success-color, $alpha: .3),
'warning': $--n-warning-color,
@ -21,63 +21,68 @@
'checkable-checked-hover': $--n-primary-hover-color,
'checkable-checked-active': $--n-primary-active-color,
'default': transparent,
'default-hover': change-color($--n-primary-color, $alpha: .2),
'default-active': change-color($--n-primary-color, $alpha: .2),
'default-disabled': transparent,
'default-hover': $--n-pending-overlay-color,
'default-active': $--n-pending-overlay-color,
'default-disabled': $--n-disabled-background-color,
'success': transparent,
'success-hover': change-color($--n-success-color, $alpha: .2),
'success-active': change-color($--n-success-color, $alpha: .2),
'success-disabled': transparent,
'success-hover': change-color($--n-success-color, $alpha: $--n-pending-opacity),
'success-active': change-color($--n-success-color, $alpha: $--n-pending-opacity),
'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-fill-opacity),
'warning': transparent,
'warning-hover': change-color($--n-warning-color, $alpha: .2),
'warning-active': change-color($--n-warning-color, $alpha: .2),
'warning-disabled': transparent,
'warning-hover': change-color($--n-warning-color, $alpha: $--n-pending-opacity),
'warning-active': change-color($--n-warning-color, $alpha: $--n-pending-opacity),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-fill-opacity),
'info': transparent,
'info-hover': change-color($--n-info-color, $alpha: .2),
'info-active': change-color($--n-info-color, $alpha: .2),
'info-disabled': transparent,
'info-hover': change-color($--n-info-color, $alpha: $--n-pending-opacity),
'info-active': change-color($--n-info-color, $alpha: $--n-pending-opacity),
'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-fill-opacity),
'error': transparent,
'error-hover': change-color($--n-error-color, $alpha: .2),
'error-active': change-color($--n-error-color, $alpha: .2),
'error-disabled': transparent,
'error-hover': change-color($--n-error-color, $alpha: $--n-pending-opacity),
'error-active': change-color($--n-error-color, $alpha: $--n-pending-opacity),
'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-fill-opacity)
) !global;
$--tag-border-color: (
'default': $--n-primary-color,
'default-hover': $--n-primary-color,
'default-active': $--n-primary-color,
'success': $--n-success-color,
'success-hover': $--n-success-color,
'success-active': $--n-success-color,
'warning': $--n-warning-color,
'warning-hover': $--n-warning-color,
'warning-active': $--n-warning-color,
'info': $--n-info-color,
'info-hover': $--n-info-color,
'info-active': $--n-info-color,
'error': $--n-error-color,
'error-hover': $--n-error-color,
'error-active': $--n-error-color,
'default': $--n-border-color,
'default-hover': $--n-border-color,
'default-active': $--n-border-color,
'default-disabled': $--n-border-color,
'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-hover': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-active': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity),
'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-hover': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-active': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity),
'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-hover': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-active': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity),
'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-hover': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-active': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity)
) !global;
$--tag-close-color: (
'default': change-color($--n-primary-color, $alpha: .5),
'default-hover': change-color($--n-primary-color, $alpha: 1),
'default-active': change-color($--n-primary-color, $alpha: .75),
'default-disabled': change-color($--n-primary-color, $alpha: .25),
'success': change-color($--n-success-color, $alpha: .5),
'success-hover': change-color($--n-success-color, $alpha: 1),
'success-active': change-color($--n-success-color, $alpha: .75),
'success-disabled': change-color($--n-success-color, $alpha: .25),
'warning': change-color($--n-warning-color, $alpha: .5),
'warning-hover': change-color($--n-warning-color, $alpha: 1),
'warning-active': change-color($--n-warning-color, $alpha: .75),
'warning-disabled': change-color($--n-warning-color, $alpha: .25),
'info': change-color($--n-info-color, $alpha: .5),
'info-hover': change-color($--n-info-color, $alpha: 1),
'info-active': change-color($--n-info-color, $alpha: .75),
'info-disabled': change-color($--n-info-color, $alpha: .25),
'error': change-color($--n-error-color, $alpha: .5),
'error-hover': change-color($--n-error-color, $alpha: 1),
'error-active': change-color($--n-error-color, $alpha: .75),
'error-disabled': change-color($--n-error-color, $alpha: .25),
'default': $--n-close-color,
'default-hover': $--n-close-color,
'default-active': $--n-close-color,
'default-disabled': change-color($--n-close-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity),
'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
'success-hover': change-color($--n-success-color, $alpha: .8),
'success-active': change-color($--n-success-color, $alpha: .6),
'success-disabled': change-color($--n-success-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity),
'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
'warning-hover': change-color($--n-warning-color, $alpha: .8),
'warning-active': change-color($--n-warning-color, $alpha: .6),
'warning-disabled': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity),
'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
'info-hover': change-color($--n-info-color, $alpha: .8),
'info-active': change-color($--n-info-color, $alpha: .6),
'info-disabled': change-color($--n-info-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity),
'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
'error-hover': change-color($--n-error-color, $alpha: .8),
'error-active': change-color($--n-error-color, $alpha: .6),
'error-disabled': change-color($--n-error-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity)
) !global;
}

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

@ -3,10 +3,11 @@
$--alpha-1: .92 !global;
$--alpha-2: .84 !global;
$--alpha-3: .50 !global;
$--alpha-4: .35 !global;
$--alpha-3: .52 !global;
$--alpha-4: .38 !global;
$--alpha-disabled: .5 !global;
$--alpha-disabled: .6 !global;
$--alpha-pending: .05 !global;
// overlay-text
$--overlay-text-1: rgba(255, 255, 255, $--alpha-1) !global;
@ -17,25 +18,28 @@
// overlay
$--overlay-avatar: rgba(255, 255, 255, .16) !global;
$--overlay-rail: rgba(255, 255, 255, .18) !global;
$--overlay-border: rgba(255, 255, 255, .13) !global;
$--overlay-border: rgba(255, 255, 255, .24) !global;
$--overlay-divider: rgba(255, 255, 255, .10) !global;
$--overlay-input: rgba(255, 255, 255, .1) !global;
$--overlay-action: rgba(255, 255, 255, .05) !global;
$--overlay-tab: rgba(255, 255, 255, .08) !global;
$--overlay-scrollbar: rgba(255, 255, 255, .2) !global;
$--overlay-scrollbar-hover: rgba(255, 255, 255, .3) !global;
$--overlay-disabled: rgba(255, 255, 255, alpha($--overlay-input) * $--alpha-disabled) !global;
$--overlay-pending: rgba(255, 255, 255, .05) !global;
$--alpha-disabled-fill: alpha($--overlay-input) * $--alpha-disabled !global;
$--overlay-disabled: rgba(255, 255, 255, $--alpha-disabled-fill) !global;
$--overlay-pending: rgba(255, 255, 255, $--alpha-pending) !global;
$--overlay-active: rgba(255, 255, 255, .03) !global;
$--overlay-code: rgba(255, 255, 255, .12) !global;
$--overlay-tag: null !global;
// neutral
$--neutral-base: black !global;
$--neutral-popover: rgb(89, 93, 119) !global;
$--neutral-modal: rgb(70, 75, 99) !global;
$--neutral-card: rgb(30, 36, 55) !global;
$--neutral-body: rgb(18, 24, 42) !global;
$--neutral-popover: rgb(96, 96, 104) !global;
$--neutral-modal: rgb(76, 76, 84) !global;
$--neutral-card: rgb(32, 32, 36) !global;
$--neutral-body: rgb(24, 24, 28) !global;
$--neutral-disabled: null !global;
$--neutral-border: null !global;
$--neutral-divider: null !global;

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

@ -101,6 +101,8 @@
$--n-primary-opacity: $--alpha-1 !global;
$--n-secondary-opacity: $--alpha-2 !global;
$--n-tertiary-opacity: $--alpha-3 !global;
$--n-pending-opacity: $--alpha-pending !global;
$--n-disabled-fill-opacity: $--alpha-disabled-fill !global;
$--n-icon-color: $--overlay-text-4 !global;

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

@ -1,144 +1,200 @@
@mixin setup-light-button {
$--button-border-color: (
"default": $--n-border-color,
"primary": $--n-primary-color,
"info": $--n-info-color,
"success": $--n-success-color,
"warning": $--n-warning-color,
"error": $--n-error-color
$--button-box-shadow-ripple-spread: 4px;
$--button-ripple-box-shadow: (
'default-start': (0 0 0 0 $--n-primary-color),
'default-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
'primary-start': (0 0 0 0 $--n-primary-color),
'primary-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
'success-start': (0 0 0 0 $--n-success-color),
'success-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-success-color),
'info-start': (0 0 0 0 $--n-info-color),
'info-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-info-color),
'warning-start': (0 0 0 0 $--n-warning-color),
'warning-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-warning-color),
'error-start': (0 0 0 0 $--n-error-color),
'error-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-error-color)
) !global;
$--button-box-shadow-spread: 0px !global;
$--button-box-shadow-ripple-spread: 4px !global;
$--button-box-shadow-spread-alpha: .3 !global;
$--button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'default')),
'default': inset 0 0 0 1px $--n-border-color,
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
'default-active': inset 0 0 0 1px $--n-primary-active-color,
'default-focus': (inset 0 0 0 1px $--n-primary-color),
'primary': none,
'primary-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'primary'),
'primary-hover': none,
'primary-active': none,
'primary-focus': none,
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'primary')),
'success': none,
'success-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'success'),
'success-hover': none,
'success-active': none,
'success-focus': none,
'success-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'success')),
'success-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'success')),
'info': none,
'info-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'info'),
'info-hover': none,
'info-active': none,
'info-focus': none,
'info-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'info')),
'info-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'info')),
'warning': none,
'warning-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'warning'),
'warning-hover': none,
'warning-active': none,
'warning-focus': none,
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'warning')),
'warning-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'warning')),
'error': none,
'error-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'error'),
'error-focus': none,
'error-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'error'))
'error-hover': none,
'error-active': none,
'error-focus': none
) !global;
$--button-ghost-typed-box-shadow: (
'default': inset 0 0 0 1px $--n-border-color,
'default-hover': (inset 0 0 0 1px $--n-primary-hover-color),
'default-active': (inset 0 0 0 1px $--n-primary-active-color),
'default-focus': (inset 0 0 0 1px $--n-primary-hover-color),
'primary': inset 0 0 0 1px $--n-primary-color,
'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
'primary-active': inset 0 0 0 1px $--n-primary-active-color,
'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
'success': inset 0 0 0 1px $--n-success-color,
'success-hover': inset 0 0 0 1px $--n-success-hover-color,
'success-active': inset 0 0 0 1px $--n-success-active-color,
'success-focus': inset 0 0 0 1px $--n-success-hover-color,
'info': inset 0 0 0 1px $--n-info-color,
'info-hover': inset 0 0 0 1px $--n-info-hover-color,
'info-active': inset 0 0 0 1px $--n-info-active-color,
'info-focus': inset 0 0 0 1px $--n-info-hover-color,
'warning': inset 0 0 0 1px $--n-warning-color,
'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
'warning-active': inset 0 0 0 1px $--n-warning-active-color,
'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
'error': inset 0 0 0 1px $--n-error-color,
'error-hover': inset 0 0 0 1px $--n-error-hover-color,
'error-active': inset 0 0 0 1px $--n-error-active-color,
'error-focus': inset 0 0 0 1px $--n-error-hover-color
) !global;
$--button-background-color: (
"default": mix($--n-secondary-text-color, $--n-base-background-color, 0),
"default-focus": mix($--n-secondary-text-color, $--n-base-background-color, 8%),
"default-hover": mix($--n-secondary-text-color, $--n-base-background-color, 8%),
"default-active": mix($--n-secondary-text-color, $--n-base-background-color, 12%),
"primary": $--n-primary-color,
"primary-focus": $--n-primary-hover-color,
"primary-hover": $--n-primary-hover-color,
"primary-active": $--n-primary-active-color,
"info": $--n-info-color,
"info-focus": $--n-info-hover-color,
"info-hover": $--n-info-hover-color,
"info-active": $--n-info-active-color,
"success": $--n-success-color,
"success-focus": $--n-success-hover-color,
"success-hover": $--n-success-hover-color,
"success-active": $--n-success-active-color,
"warning": $--n-warning-color,
"warning-focus": $--n-warning-hover-color,
"warning-hover": $--n-warning-hover-color,
"warning-active": $--n-warning-active-color,
"error": $--n-error-color,
"error-focus": $--n-error-hover-color,
"error-hover": $--n-error-hover-color,
"error-active": $--n-error-active-color,
'default': $--n-base-background-color,
'default-focus': $--n-base-background-color,
'default-hover': $--n-base-background-color,
'default-active': $--n-base-background-color,
'primary': $--n-primary-color,
'primary-focus': $--n-primary-hover-color,
'primary-hover': $--n-primary-hover-color,
'primary-active': $--n-primary-active-color,
'info': $--n-info-color,
'info-focus': $--n-info-hover-color,
'info-hover': $--n-info-hover-color,
'info-active': $--n-info-active-color,
'success': $--n-success-color,
'success-focus': $--n-success-hover-color,
'success-hover': $--n-success-hover-color,
'success-active': $--n-success-active-color,
'warning': $--n-warning-color,
'warning-focus': $--n-warning-hover-color,
'warning-hover': $--n-warning-hover-color,
'warning-active': $--n-warning-active-color,
'error': $--n-error-color,
'error-focus': $--n-error-hover-color,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-active-color,
) !global;
$button-ghost-alpha: 0;
$button-ghost-hover-alpha: .1;
$button-ghost-active-alpha: .15;
$button-ghost-focus-alpha: .1;
$--ghost-button-background-color: (
"default": change-color($--n-secondary-text-color, $alpha: 0),
"default-focus": change-color($--n-secondary-text-color, $alpha: .08),
"default-hover": change-color($--n-secondary-text-color, $alpha: .08),
"default-active": change-color($--n-secondary-text-color, $alpha: .12),
"primary": change-color($--n-primary-color, $alpha: $button-ghost-alpha),
"primary-focus": change-color($--n-primary-color, $alpha: $button-ghost-focus-alpha),
"primary-hover": change-color($--n-primary-color, $alpha: $button-ghost-hover-alpha),
"primary-active": change-color($--n-primary-color, $alpha: $button-ghost-active-alpha),
"info": change-color($--n-info-color, $alpha: $button-ghost-alpha),
"info-focus": change-color($--n-info-color, $alpha: $button-ghost-focus-alpha),
"info-hover": change-color($--n-info-color, $alpha: $button-ghost-hover-alpha),
"info-active": change-color($--n-info-color, $alpha: $button-ghost-active-alpha),
"success": change-color($--n-success-color, $alpha: $button-ghost-alpha),
"success-focus": change-color($--n-success-color, $alpha: $button-ghost-focus-alpha),
"success-hover": change-color($--n-success-color, $alpha: $button-ghost-hover-alpha),
"success-active": change-color($--n-success-color, $alpha: $button-ghost-active-alpha),
"error": change-color($--n-error-color, $alpha: $button-ghost-alpha),
"error-focus": change-color($--n-error-color, $alpha: $button-ghost-focus-alpha),
"error-hover": change-color($--n-error-color, $alpha: $button-ghost-hover-alpha),
"error-active": change-color($--n-error-color, $alpha: $button-ghost-active-alpha),
"warning": change-color($--n-warning-color, $alpha: $button-ghost-alpha),
"warning-focus": change-color($--n-warning-color, $alpha: $button-ghost-focus-alpha),
"warning-hover": change-color($--n-warning-color, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($--n-warning-color, $alpha: $button-ghost-active-alpha),
) !global;
$--ghost-button-color: (
"default": $--n-secondary-text-color,
"primary": $--n-primary-color,
"info": $--n-info-color,
"success": $--n-success-color,
"warning": $--n-warning-color,
"error": $--n-error-color
$--button-ghost-typed-background-color: (
'default': transparent,
'default-focus': transparent,
'default-hover': transparent,
'default-active': transparent,
'primary': transparent,
'primary-focus': transparent,
'primary-hover': transparent,
'primary-active': transparent,
'info': transparent,
'info-focus': transparent,
'info-hover': transparent,
'info-active': transparent,
'success': transparent,
'success-focus': transparent,
'success-hover': transparent,
'success-active': transparent,
'error': transparent,
'error-focus': transparent,
'error-hover': transparent,
'error-active': transparent,
'warning': transparent,
'warning-focus': transparent,
'warning-hover': transparent,
'warning-active': transparent
)!global;
$--button-color: (
"default": $--n-secondary-text-color,
"primary": $--n-base-background-color,
"info": $--n-base-background-color,
"success": $--n-base-background-color,
"warning": $--n-base-background-color,
"error": $--n-base-background-color
$--button-ghost-typed-text-color: (
'default': $--n-secondary-text-color,
'default-focus': $--n-primary-hover-color,
'default-hover': $--n-primary-hover-color,
'default-active': $--n-primary-active-color,
'primary': $--n-primary-color,
'primary-focus': $--n-primary-hover-color,
'primary-hover': $--n-primary-hover-color,
'primary-active': $--n-primary-active-color,
'info': $--n-info-color,
'info-focus': $--n-info-hover-color,
'info-hover': $--n-info-hover-color,
'info-active': $--n-info-active-color,
'success': $--n-success-color,
'success-focus': $--n-success-hover-color,
'success-hover': $--n-success-hover-color,
'success-active': $--n-success-active-color,
'warning': $--n-warning-color,
'warning-focus': $--n-warning-hover-color,
'warning-hover': $--n-warning-hover-color,
'warning-active': $--n-warning-active-color,
'error': $--n-error-color,
'error-focus': $--n-error-hover-color,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-active-color,
) !global;
$--text-button-color: (
"default": $--n-secondary-text-color,
"default-hover": $--n-secondary-text-color,
"default-active": $--n-secondary-text-color,
"default-focus": $--n-secondary-text-color,
"primary": $--n-primary-color,
"primary-hover": $--n-primary-hover-color,
"primary-active": $--n-primary-active-color,
"primary-focus": $--n-primary-hover-color,
"info": $--n-info-color,
"info-hover": $--n-info-hover-color,
"info-active": $--n-info-active-color,
"info-focus": $--n-info-hover-color,
"success": $--n-success-color,
"success-hover": $--n-success-hover-color,
"success-active": $--n-success-active-color,
"success-focus": $--n-success-hover-color,
"warning": $--n-warning-color,
"warning-hover": $--n-warning-hover-color,
"warning-active": $--n-warning-active-color,
"warning-focus": $--n-warning-hover-color,
"error": $--n-error-color,
"error-hover": $--n-error-hover-color,
"error-active": $--n-error-active-color,
"error-focus": $--n-error-hover-color,
$--button-text-color: (
'default': $--n-secondary-text-color,
'default-focus': $--n-primary-hover-color,
'default-hover': $--n-primary-hover-color,
'default-active': $--n-primary-active-color,
'primary': $--n-base-background-color,
'primary-focus': $--n-base-background-color,
'primary-hover': $--n-base-background-color,
'primary-active': $--n-base-background-color,
'info': $--n-base-background-color,
'info-focus': $--n-base-background-color,
'info-hover': $--n-base-background-color,
'info-active': $--n-base-background-color,
'success': $--n-base-background-color,
'success-focus':$--n-base-background-color,
'success-hover': $--n-base-background-color,
'success-active': $--n-base-background-color,
'warning': $--n-base-background-color,
'warning-focus': $--n-base-background-color,
'warning-hover': $--n-base-background-color,
'warning-active': $--n-base-background-color,
'error': $--n-base-background-color,
'error-focus': $--n-base-background-color,
'error-hover': $--n-base-background-color,
'error-active': $--n-base-background-color
) !global;
$--button-text-typed-text-color: (
'default': $--n-secondary-text-color,
'default-hover': $--n-primary-hover-color,
'default-active': $--n-primary-active-color,
'default-focus': $--n-primary-hover-color,
'primary': $--n-primary-color,
'primary-hover': $--n-primary-hover-color,
'primary-active': $--n-primary-active-color,
'primary-focus': $--n-primary-hover-color,
'info': $--n-info-color,
'info-hover': $--n-info-hover-color,
'info-active': $--n-info-active-color,
'info-focus': $--n-info-hover-color,
'success': $--n-success-color,
'success-hover': $--n-success-hover-color,
'success-active': $--n-success-active-color,
'success-focus': $--n-success-hover-color,
'warning': $--n-warning-color,
'warning-hover': $--n-warning-hover-color,
'warning-active': $--n-warning-active-color,
'warning-focus': $--n-warning-hover-color,
'error': $--n-error-color,
'error-hover': $--n-error-hover-color,
'error-active': $--n-error-active-color,
'error-focus': $--n-error-hover-color,
) !global;
$--button-disabled-opacity: $--n-disabled-opacity !global;
}

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

@ -101,6 +101,8 @@
$--n-primary-opacity: $--alpha-1 !global;
$--n-secondary-opacity: $--alpha-2 !global;
$--n-tertiary-opacity: $--alpha-3 !global;
$--n-pending-opacity: $--alpha-pending !global;
$--n-disabled-fill-opacity: $--alpha-disabled-fill !global;
$--n-icon-color: $--overlay-text-4 !global;

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

@ -7,6 +7,7 @@
$--alpha-4: .24 !global;
$--alpha-disabled: .5 !global;
$--alpha-pending: .04 !global;
// overlay-text
$--overlay-text-1: rgba(0, 0, 0, $--alpha-1) !global;
@ -24,8 +25,11 @@
$--overlay-tab: rgba(0, 0, 0, .04) !global;
$--overlay-scrollbar: rgba(0, 0, 0, .25) !global;
$--overlay-scrollbar-hover: rgba(0, 0, 0, .4) !global;
$--overlay-disabled: rgba(0, 0, 0, .04) !global;
$--overlay-pending: rgba(0, 0, 0, .04) !global;
$--alpha-disabled-fill: .04 !global;
$--overlay-disabled: rgba(0, 0, 0, $--alpha-disabled-fill) !global;
$--overlay-pending: rgba(0, 0, 0, $--alpha-pending) !global;
$--overlay-active: rgba(0, 0, 0, .06) !global;
$--overlay-code: rgba(0, 0, 0, .025) !global;
$--overlay-tag: rgba(0, 0, 0, .025) !global;