Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 514cc0f

Browse files
codebender828codebender828
committed
chore: use color mode
1 parent a7b4d03 commit 514cc0f

25 files changed

+1214
-130
lines changed

‎.storybook/config.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { configure, addDecorator, addParameters } from '@storybook/vue';
22
import Vue from 'vue'
33
import VueLive from 'vue-live'
44
import Lorem from 'vue-lorem-ipsum'
5-
import Chakra from '../packages/chakra-ui-core/src'
5+
import Chakra, { mode } from '../packages/chakra-ui-core/src'
66
import Canvas from './components/Canvas.vue'
77
import storyBookTheme from './theme'
88

@@ -29,16 +29,15 @@ import {
2929
feSend,
3030
feServer
3131
} from 'feather-icons-paths'
32-
import { mode } from '../packages/chakra-ui-core/src/utils/color-mode-observer';
3332

3433
Vue.use(Chakra, {
3534
extendTheme: {
36-
baseStyle: {
37-
CButton: ({ colorMode, theme }) => ({
38-
bg: mode('tomato', 'hotpink'),
39-
borderRadius: "lg",
40-
shadow: 'xl'
41-
})
35+
baseStyles: {
36+
// CButton: ({ colorMode, theme }) => ({
37+
// bg: mode('tomato', 'hotpink'),
38+
// borderRadius: "lg",
39+
// shadow: 'xl'
40+
// })
4241
}
4342
},
4443
icons: {

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,10 @@
107107
"@babel/cli": "^7.8.4",
108108
"@babel/core": "^7.9.0",
109109
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
110+
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
110111
"@babel/plugin-transform-modules-commonjs": "^7.7.4",
111112
"@babel/plugin-transform-parameters": "^7.7.4",
112-
"@babel/preset-env": "^7.9.5",
113+
"@babel/preset-env": "^7.15.0",
113114
"@babel/runtime-corejs2": "^7.8.7",
114115
"@changesets/changelog-github": "^0.2.7",
115116
"@changesets/cli": "^2.7.1",
@@ -159,7 +160,6 @@
159160
"eslint-plugin-prettier": "^3.1.2",
160161
"eslint-plugin-testing-library": "^3.3.1",
161162
"jest": "^25.1.0",
162-
"node-sass": "4.13",
163163
"prettier": "^1.19.1",
164164
"rimraf": "^3.0.2",
165165
"rollup": "^1.31.1",

‎packages/chakra-ui-core/src/CColorModeProvider/CColorModeProvider.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CColorModePovider/CColorModePovider.js
1717
*/
1818

19-
import { colorModeObserver } from '../utils/color-mode-observer'
19+
import { colorModeObserverEventBus } from '../utils/color-mode-observer'
2020

2121
/**
2222
* CColorModeProvider component
@@ -51,16 +51,16 @@ const CColorModeProvider = {
5151
}
5252
}
5353
},
54-
watch: {
55-
_colorMode: {
56-
immediate: true,
57-
handler (newVal) {
58-
colorModeObserver.colorMode = newVal
59-
}
60-
}
54+
created () {
55+
colorModeObserverEventBus.$emit('change:colorMode', this._colorMode)
56+
this.$watch(() => this._colorMode, (newColorMode) => {
57+
colorModeObserverEventBus.$emit('change:colorMode', newColorMode)
58+
})
59+
colorModeObserverEventBus.$on('command:toggleColorMode', this.toggleColorMode)
6160
},
6261
methods: {
6362
toggleColorMode () {
63+
/** Toggles colorMode */
6464
this._colorMode = this._colorMode === 'light' ? 'dark' : 'light'
6565
}
6666
},

‎packages/chakra-ui-core/src/CToast/CToast.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ interface ChakraToastOptions {
99
isClosable?: boolean
1010
}
1111

12-
function useToast(): (options: ChakraToastOptions) => void
12+
export type ToastFactory = (options: ChakraToastOptions) => void
13+
14+
export function useToast(): ToastFactory
1315

1416
export default useToast

‎packages/chakra-ui-core/src/Chakra/index.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,17 @@ import { parsePackIcons } from '../utils/icons'
77
import internalIcons from '../lib/internal-icons'
88
import { createClientDirective } from '../directives'
99
import useToast from '../CToast'
10+
import { colorModeObserver, mode } from '../utils'
1011

1112
/**
1213
* Chakra-ui Component library plugin
13-
* @type {import("../../types").default}
14+
* @type {import("../../types").ChakraPlugin}
1415
*/
1516
const Chakra = {
1617
/**
1718
*
1819
* @param {Vue} Vue
19-
* @param {Options} options
20+
* @param {import("../../types").Options} options
2021
*/
2122
install (Vue, options = {}) {
2223
let packIcons = {}
@@ -48,7 +49,23 @@ const Chakra = {
4849

4950
/** Install dependent plugins */
5051
Vue.use(VScrollLock)
52+
53+
Vue.mixin({
54+
computed: {
55+
chakraColorMode () {
56+
return colorModeObserver.colorMode
57+
},
58+
chakraTheme () {
59+
return colorModeObserver.theme
60+
},
61+
chakraToggleColorMode () {
62+
return colorModeObserver.toggleColorMode
63+
},
64+
$mode: vm => (lightValue, darkValue) => mode(lightValue, darkValue, colorModeObserver)
65+
}
66+
})
5167
}
5268
}
5369

5470
export default Chakra
71+
export { mode } from '../utils/color-mode-observer'

‎packages/chakra-ui-core/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export { default as defaultTheme } from '@chakra-ui/theme-vue'
124124

125125
// Internal icons
126126
export { parsePackIcons } from './utils/icons'
127+
export { mode, defineColorModeObserver } from './utils/color-mode-observer'
127128
export { default as internalIcons } from './lib/internal-icons'
128129

129130
// Directives

‎packages/chakra-ui-core/src/utils/__snapshots__/color-mode-observer.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`colorModeObserver \`colorModeObserver\` should provide and observe values 1`] = `
44
Object {
5-
"baseStyle": Object {
5+
"baseStyles": Object {
66
"CButton": Object {
77
"bg": "success",
88
"borderRadius": "200px",

‎packages/chakra-ui-core/src/utils/__snapshots__/component.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 1`] = `
3+
exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 1`] = `
44
<DocumentFragment>
55
.emotion-0 {
66
background: var(--colors-blue-200);
@@ -17,7 +17,7 @@ exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function
1717
</DocumentFragment>
1818
`;
1919

20-
exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function 2`] = `
20+
exports[`createStyledAttrsMixin baseStyles should accept baseStyles as a function 2`] = `
2121
<DocumentFragment>
2222
.emotion-0 {
2323
background: var(--colors-vue-200);
@@ -34,7 +34,7 @@ exports[`createStyledAttrsMixin baseStyle should accept baseStyle as a function
3434
</DocumentFragment>
3535
`;
3636

37-
exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
37+
exports[`createStyledAttrsMixin baseStyles should be overiden by props 1`] = `
3838
<DocumentFragment>
3939
.emotion-0 {
4040
background: var(--colors-blue-200);
@@ -50,7 +50,7 @@ exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
5050
</DocumentFragment>
5151
`;
5252

53-
exports[`createStyledAttrsMixin baseStyle should use theme.baseStyle if given 1`] = `
53+
exports[`createStyledAttrsMixin baseStyles should use theme.baseStyles if given 1`] = `
5454
<DocumentFragment>
5555
.emotion-0 {
5656
background: var(--colors-red-400);

‎packages/chakra-ui-core/src/utils/color-mode-observer.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import Vue from 'vue'
22

3-
export const defineColorModeObserver = ({ colorMode, theme, icons } = {}) => Vue.observable({
3+
export const defineColorModeObserver = ({ colorMode, theme, icons, toggleColorMode } = {}) => Vue.observable({
44
colorMode,
55
theme,
6-
icons
6+
icons,
7+
toggleColorMode
78
})
89

910
/**
1011
* This observed store object observed the colorMode and stores it in an
1112
* observed object that other components can consume.
1213
*/
13-
export const colorModeObserver = defineColorModeObserver()
14+
export const colorModeObserver = defineColorModeObserver({
15+
toggleColorMode: emitToggleColorMode
16+
})
1417

1518
/**
1619
* Utility function that returns a value based on the colorMode
@@ -23,3 +26,18 @@ export const mode = (lightValue, darkValue, observer) => {
2326
const { colorMode } = observer || colorModeObserver
2427
return colorMode === 'dark' ? darkValue : lightValue
2528
}
29+
30+
const changeColorModeListeners = []
31+
32+
export const colorModeObserverEventBus = new Vue()
33+
34+
colorModeObserverEventBus.$on('change:colorMode', (newVal) => {
35+
colorModeObserver.colorMode = newVal
36+
changeColorModeListeners.forEach(handler => handler(newVal))
37+
})
38+
39+
export function emitToggleColorMode () {
40+
colorModeObserverEventBus.$emit('command:toggleColorMode')
41+
}
42+
43+
export const onUpdateColorMode = fn => changeColorModeListeners.push(fn)

‎packages/chakra-ui-core/src/utils/color-mode-observer.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('colorModeObserver', () => {
1212
outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
1313
inner: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)'
1414
},
15-
baseStyle: {
15+
baseStyles: {
1616
CButton: {
1717
bg: 'success',
1818
borderRadius: '200px',

0 commit comments

Comments
 (0)