mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-11-21 01:13:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

styles: remove exported light theme, since it is builtin theme

Browse Source
This commit is contained in:
07akioni 2021-02-02 11:50:58 +08:00
parent b70f06e5e2
commit 15e52e675f
16 changed files with 44 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo/pages/doc/theme/enUS/element.demo.md vendored
View File

@ -6,7 +6,7 @@ Naive UI has `n-element` component. See [Element](n-element).
<n-space vertical>
<n-space>
<n-button @click="theme = darkTheme">Dark</n-button>
<n-button @click="theme = lightTheme">Light</n-button>
<n-button @click="theme = undefined">Light</n-button>
</n-space>
<n-config-provider :unstable-theme="theme">
<n-card>
@ -23,14 +23,13 @@ Naive UI has `n-element` component. See [Element](n-element).
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

7
demo/pages/doc/theme/enUS/provide-theme.demo.md vendored
View File

@ -7,7 +7,7 @@ Use `n-config-provider` to set the theme of all its descedant components.
<n-card>
<n-space>
<n-button @click="theme = darkTheme">Dark</n-button>
<n-button @click="theme = lightTheme">Light</n-button>
<n-button @click="theme = undefined">Light</n-button>
</n-space>
</n-card>
</n-config-provider>
@ -15,14 +15,13 @@ Use `n-config-provider` to set the theme of all its descedant components.
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

7
demo/pages/doc/theme/zhCN/element.demo.md vendored
View File

@ -6,7 +6,7 @@ Naive UI 提供 `n-element` 组件，参考 [Element](n-element)。
<n-space vertical>
<n-space>
<n-button @click="theme = darkTheme">深色</n-button>
<n-button @click="theme = lightTheme">浅色</n-button>
<n-button @click="theme = undefined">浅色</n-button>
</n-space>
<n-config-provider :unstable-theme="theme">
<n-card>
@ -23,14 +23,13 @@ Naive UI 提供 `n-element` 组件，参考 [Element](n-element)。
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

7
demo/pages/doc/theme/zhCN/provide-theme.demo.md vendored
View File

@ -7,7 +7,7 @@
<n-card>
<n-space>
<n-button @click="theme = darkTheme">深色</n-button>
<n-button @click="theme = lightTheme">浅色</n-button>
<n-button @click="theme = undefined">浅色</n-button>
</n-space>
</n-card>
</n-config-provider>
@ -15,14 +15,13 @@
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

6
src/config-provider/demos/enUS/os-theme.demo.md
View File

@ -3,21 +3,21 @@
Naive UI provides `useOsTheme` to get the current theme of your OS.
```html
<n-config-provider :unstable-theme="theme">
<n-config-provider :theme="theme">
<n-card> Your current system theme is {{ osTheme }}. </n-card>
</n-config-provider>
```
```js
import { computed } from 'vue'
import { useOsTheme, lightTheme, darkTheme } from 'naive-ui'
import { useOsTheme, darkTheme } from 'naive-ui'
export default {
setup () {
const osThemeRef = useOsTheme()
return {
theme: computed(() =>
osThemeRef.value === 'dark' ? darkTheme : lightTheme
osThemeRef.value === 'dark' ? darkTheme : undefined
),
osTheme: osThemeRef
}

9
src/config-provider/demos/enUS/theme.demo.md
View File

@ -3,11 +3,11 @@
Set theme of inner components of `n-config-provider`.
```html
<n-config-provider :unstable-theme="theme">
<n-config-provider :theme="theme">
<n-card>
<n-space>
<n-button @click="theme = darkTheme">Dark</n-button>
<n-button @click="theme = lightTheme">Light</n-button>
<n-button @click="theme = undefined">Light</n-button>
</n-space>
</n-card>
</n-config-provider>
@ -15,14 +15,13 @@ Set theme of inner components of `n-config-provider`.
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

6
src/config-provider/demos/zhCN/os-theme.demo.md
View File

@ -3,21 +3,21 @@
Naive UI 提供 `useOsTheme` 来获取当前操作系统的主题。
```html
<n-config-provider :unstable-theme="theme">
<n-config-provider :theme="theme">
<n-card> 当前操作系统的主题是 {{ osTheme }}。 </n-card>
</n-config-provider>
```
```js
import { computed } from 'vue'
import { useOsTheme, lightTheme, darkTheme } from 'naive-ui'
import { useOsTheme, darkTheme } from 'naive-ui'
export default {
setup () {
const osThemeRef = useOsTheme()
return {
theme: computed(() =>
osThemeRef.value === 'dark' ? darkTheme : lightTheme
osThemeRef.value === 'dark' ? darkTheme : undefined
),
osTheme: osThemeRef
}

9
src/config-provider/demos/zhCN/theme.demo.md
View File

@ -3,11 +3,11 @@
设置 `n-config-provider` 内部组件的主题。
```html
<n-config-provider :unstable-theme="theme">
<n-config-provider :theme="theme">
<n-card>
<n-space>
<n-button @click="theme = darkTheme">深色</n-button>
<n-button @click="theme = lightTheme">浅色</n-button>
<n-button @click="theme = undefined">浅色</n-button>
</n-space>
</n-card>
</n-config-provider>
@ -15,14 +15,13 @@
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

2
src/config-provider/src/interface.ts
View File

@ -70,7 +70,7 @@ import type { ExtractThemeOverrides } from '../../_mixins/use-theme'
import type { Hljs } from '../../_mixins'
export interface GlobalTheme {
common: ThemeCommonVars
common?: ThemeCommonVars
Alert?: AlertTheme
Anchor?: AnchorTheme
AutoComplete?: AutoCompleteTheme

9
src/element/demos/enUS/basic.demo.md
View File

@ -6,9 +6,9 @@ It is very useful to create themed component.
<n-space vertical>
<n-space>
<n-button @click="theme = darkTheme">Dark</n-button>
<n-button @click="theme = lightTheme">Light</n-button>
<n-button @click="theme = undefined">Light</n-button>
</n-space>
<n-config-provider :unstable-theme="theme">
<n-config-provider :theme="theme">
<n-card>
<n-el
tag="span"
@ -23,14 +23,13 @@ It is very useful to create themed component.
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

9
src/element/demos/zhCN/basic.demo.md
View File

@ -6,9 +6,9 @@
<n-space vertical>
<n-space>
<n-button @click="theme = darkTheme">深色</n-button>
<n-button @click="theme = lightTheme">浅色</n-button>
<n-button @click="theme = undefined">浅色</n-button>
</n-space>
<n-config-provider :unstable-theme="theme">
<n-config-provider :theme="theme">
<n-card>
<n-el
tag="span"
@ -23,14 +23,13 @@
```js
import { ref } from 'vue'
import { darkTheme, lightTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
export default {
setup () {
return {
darkTheme,
lightTheme,
theme: ref(lightTheme)
theme: ref()
}
}
}

2
src/index.ts
View File

@ -8,4 +8,4 @@ export * from './locales'
export * from './components'
export * from './styles'
export { darkTheme, lightTheme } from './themes'
export { darkTheme } from './themes'

3
src/themes/dark.ts
View File

@ -63,8 +63,9 @@ import { typographyDark } from '../typography/styles'
import { treeDark } from '../tree/styles'
import { uploadDark } from '../upload/styles'
import { selectDark } from '../select/styles'
import type { BuiltInGlobalTheme } from './interface'
export const darkTheme = {
export const darkTheme: BuiltInGlobalTheme = {
common: commonDark,
Alert: alertDark,
Anchor: anchorDark,

1
src/themes/index.ts
View File

@ -1,2 +1 @@
export { darkTheme } from './dark'
export { lightTheme } from './light'

6
src/themes/interface.ts Normal file
View File

@ -0,0 +1,6 @@
import { GlobalTheme } from '../config-provider'
export type BuiltInGlobalTheme = Omit<
Required<GlobalTheme>,
'InternalSelectMenu' | 'InternalSelection'
>

133
src/themes/light.ts
View File

@ -1,133 +0,0 @@
import { commonLight } from '../_styles/common'
import { alertLight } from '../alert/styles'
import { anchorLight } from '../anchor/styles'
import { autoCompleteLight } from '../auto-complete/styles'
import { avatarLight } from '../avatar/styles'
import { backTopLight } from '../back-top/styles'
import { badgeLight } from '../badge/styles'
import { breadcrumbLight } from '../breadcrumb/styles'
import { buttonLight } from '../button/styles'
import { cardLight } from '../card/styles'
import { cascaderLight } from '../cascader/styles'
import { checkboxLight } from '../checkbox/styles'
import { codeLight } from '../code/styles'
import { collapseLight } from '../collapse/styles'
import { dataTableLight } from '../data-table/styles'
import { datePickerLight } from '../date-picker/styles'
import { descriptionsLight } from '../descriptions/styles'
import { dialogLight } from '../dialog/styles'
import { dividerLight } from '../divider/styles'
import { drawerLight } from '../drawer/styles'
import { dropdownLight } from '../dropdown/styles'
import { dynamicInputLight } from '../dynamic-input/styles'
import { dynamicTagsLight } from '../dynamic-tags/styles'
import { elementLight } from '../element/styles'
import { emptyLight } from '../empty/styles'
import { formLight } from '../form/styles'
import { gradientTextLight } from '../gradient-text/styles'
import { iconLight } from '../icon/styles'
import { inputLight } from '../input/styles'
import { inputNumberLight } from '../input-number/styles'
import { layoutLight } from '../layout/styles'
import { listLight } from '../list/styles'
import { loadingBarLight } from '../loading-bar/styles'
import { logLight } from '../log/styles'
import { menuLight } from '../menu/styles'
import { messageLight } from '../message/styles'
import { modalLight } from '../modal/styles'
import { notificationLight } from '../notification/styles'
import { paginationLight } from '../pagination/styles'
import { popconfirmLight } from '../popconfirm/styles'
import { popoverLight } from '../popover/styles'
import { popselectLight } from '../popselect/styles'
import { progressLight } from '../progress/styles'
import { radioLight } from '../radio/styles'
import { rateLight } from '../rate/styles'
import { resultLight } from '../result/styles'
import { scrollbarLight } from '../scrollbar/styles'
import { sliderLight } from '../slider/styles'
import { spaceLight } from '../space/styles'
import { spinLight } from '../spin/styles'
import { statisticLight } from '../statistic/styles'
import { stepsLight } from '../steps/styles'
import { switchLight } from '../switch/styles'
import { tableLight } from '../table/styles'
import { tabsLight } from '../tabs/styles'
import { tagLight } from '../tag/styles'
import { thingLight } from '../thing/styles'
import { timePickerLight } from '../time-picker/styles'
import { timelineLight } from '../timeline/styles'
import { tooltipLight } from '../tooltip/styles'
import { transferLight } from '../transfer/styles'
import { typographyLight } from '../typography/styles'
import { treeLight } from '../tree/styles'
import { uploadLight } from '../upload/styles'
import { selectLight } from '../select/styles'
export const lightTheme = {
common: commonLight,
Alert: alertLight,
Anchor: anchorLight,
AutoComplete: autoCompleteLight,
Avatar: avatarLight,
BackTop: backTopLight,
Badge: badgeLight,
Breadcrumb: breadcrumbLight,
Button: buttonLight,
Card: cardLight,
Cascader: cascaderLight,
Checkbox: checkboxLight,
Code: codeLight,
Collapse: collapseLight,
DataTable: dataTableLight,
DatePicker: datePickerLight,
Descriptions: descriptionsLight,
Dialog: dialogLight,
Divider: dividerLight,
Drawer: drawerLight,
Dropdown: dropdownLight,
DynamicInput: dynamicInputLight,
DynamicTags: dynamicTagsLight,
Element: elementLight,
Empty: emptyLight,
Form: formLight,
GradientText: gradientTextLight,
Icon: iconLight,
Input: inputLight,
InputNumber: inputNumberLight,
Layout: layoutLight,
List: listLight,
LoadingBar: loadingBarLight,
Log: logLight,
Menu: menuLight,
Message: messageLight,
Modal: modalLight,
Notification: notificationLight,
Pagination: paginationLight,
Popconfirm: popconfirmLight,
Popover: popoverLight,
Popselect: popselectLight,
Progress: progressLight,
Radio: radioLight,
Rate: rateLight,
Result: resultLight,
Scrollbar: scrollbarLight,
Select: selectLight,
Slider: sliderLight,
Space: spaceLight,
Spin: spinLight,
Statistic: statisticLight,
Steps: stepsLight,
Switch: switchLight,
Table: tableLight,
Tabs: tabsLight,
Tag: tagLight,
Thing: thingLight,
TimePicker: timePickerLight,
Timeline: timelineLight,
Tooltip: tooltipLight,
Transfer: transferLight,
Tree: treeLight,
Typography: typographyLight,
Upload: uploadLight
}