Skip to content

Commit 2a4da3d

Browse files
andresin87andresin87
committed
feat(components/documentation/library): light and dark mode
1 parent 16f1784 commit 2a4da3d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+308
-1451
lines changed

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
16

‎.sui/cache/client-local-development/0.pack.gz

11.5 MB
Binary file not shown.

‎.sui/cache/client-local-development/1.pack.gz

25.2 KB
Binary file not shown.

‎.sui/cache/client-local-development/10.pack.gz

89 KB
Binary file not shown.

‎.sui/cache/client-local-development/2.pack.gz

460 KB
Binary file not shown.

‎.sui/cache/client-local-development/3.pack.gz

2.64 MB
Binary file not shown.

‎.sui/cache/client-local-development/4.pack.gz

3.41 KB
Binary file not shown.

‎.sui/cache/client-local-development/5.pack.gz

1.3 KB
Binary file not shown.

‎.sui/cache/client-local-development/6.pack.gz

3.26 MB
Binary file not shown.

‎.sui/cache/client-local-development/7.pack.gz

1.79 MB
Binary file not shown.

‎.sui/cache/client-local-development/8.pack.gz

2.37 MB
Binary file not shown.

‎.sui/cache/client-local-development/9.pack.gz

71.3 KB
Binary file not shown.

‎.sui/cache/client-local-development/index.pack.gz

104 KB
Binary file not shown.

‎.sui/cache/client-local-development/index.pack.gz.old

180 KB
Binary file not shown.

‎components/documentation/library/demo/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ export default () => (
1111
<Grid className="demo-doc-lib" cols={1} gutter={10}>
1212
<Cell>
1313
<Grid cols={2} gutter={[5, 10]}>
14-
<Cell>
14+
<Cell mode="light">
1515
<Article>
1616
<Demo />
1717
</Article>
1818
</Cell>
19-
<Cell>
20-
<Article mode="dark">
19+
<Cell mode="dark">
20+
<Article>
2121
<Demo />
2222
</Article>
2323
</Cell>

‎components/documentation/library/demo/index.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
:root {
2+
color-scheme: light dark;
3+
@media (prefers-color-scheme: light) {
4+
color-scheme: light;
5+
}
6+
@media (prefers-color-scheme: dark) {
7+
color-scheme: dark;
8+
}
9+
}
10+
111
.demo-doc-lib {
212
// eslint-disable
313
}

‎components/documentation/library/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@s-ui/documentation-library",
3-
"version": "1.24.0",
3+
"version": "2.0.0",
44
"description": "",
55
"main": "lib/main.js",
66
"scripts": {

‎components/documentation/library/src/components/Anchor/Anchor.styles.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,4 @@
22
font-weight: var(--fw-sui-studio-doc-regular);
33
text-decoration: underline;
44
color: var(--c-sui-studio-doc-link);
5-
&.sui-studio-doc-mode-dark {
6-
color: var(--c-sui-studio-doc-dark-mode-link);
7-
}
85
}

‎components/documentation/library/src/components/Article/Article.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ let Article = forwardRef(
3131
className={cx(
3232
'sui-studio-doc-article',
3333
{
34-
[`sui-studio-doc-article-mode-${mode}`]: mode,
3534
'sui-studio-doc-article-full-screen': fullScreen,
3635
'sui-studio-doc-article-outline': outline
3736
},

‎components/documentation/library/src/components/Article/Article.styles.scss

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,11 @@
55
border-width: 1px;
66
border-style: solid;
77
border-color: var(--c-sui-studio-doc-neutral0);
8-
&.sui-studio-doc-article-mode-dark {
9-
border-width: 1px;
10-
border-style: solid;
11-
border-color: var(--c-sui-studio-doc-neutral10);
12-
background: var(--c-sui-studio-doc-neutral10);
13-
}
148
&.sui-studio-doc-article-outline {
159
background: var(--c-sui-studio-doc-neutral0);
1610
border-width: 1px;
1711
border-style: solid;
1812
border-color: var(--c-sui-studio-doc-neutral10);
19-
&.sui-studio-doc-article-mode-dark {
20-
border-color: var(--c-sui-studio-doc-neutral0);
21-
background: var(--c-sui-studio-doc-neutral10);
22-
}
2313
}
2414
&-full-screen {
2515
width: 100vw;

‎components/documentation/library/src/components/Base.core.js

Lines changed: 8 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import React, {
99
} from 'react'
1010
import cx from 'classnames'
1111

12-
import Context from '../context/Mode'
13-
1412
export const MODES = {
1513
LIGHT: 'light',
1614
DARK: 'dark'
@@ -41,33 +39,9 @@ export const TEXT_DECORATION = {
4139
LINETHROUGH: 'line-through'
4240
}
4341

44-
export const DocumentationProvider = ({
45-
children,
46-
mode = MODES.LIGHT,
47-
...otherProps
48-
}) => {
49-
return (
50-
<Context.Provider value={{mode, ...otherProps}}>
51-
{Children.map(children, child => {
52-
cloneElement(child, {mode})
53-
return child
54-
})}
55-
</Context.Provider>
56-
)
57-
}
58-
5942
export const withDocumentationProvider = Component => {
60-
const Base = forwardRef(({mode, ...otherProps} = {}, forwardedRef) => {
61-
const contextProps = useContext(Context) || {}
62-
return (
63-
<DocumentationProvider mode={mode || contextProps.mode}>
64-
<Component
65-
ref={forwardedRef}
66-
mode={mode || contextProps.mode || MODES.LIGHT}
67-
{...otherProps}
68-
/>
69-
</DocumentationProvider>
70-
)
43+
const Base = forwardRef(({...otherProps} = {}, forwardedRef) => {
44+
return <Component ref={forwardedRef} {...otherProps} />
7145
})
7246
return Base
7347
}
@@ -92,6 +66,7 @@ export const transformProps = (
9266
const prefix = displayName ? `-${displayName}` : ''
9367
return {
9468
...props,
69+
...(mode && {'data-theme-mode': mode}),
9570
className: cx(
9671
`sui-studio-doc${prefix}`,
9772
{
@@ -113,10 +88,10 @@ export const transformProps = (
11388
[`sui-studio-doc${prefix}-deprecated`]: deprecated,
11489
[`sui-studio-doc${prefix}-full-screen`]: fullScreen,
11590
[`sui-studio-doc${prefix}-full-width`]: fullWidth,
116-
[`sui-studio-doc${prefix}-full-height`]: fullHeight,
117-
[`sui-studio-doc${prefix}-mode-${mode}`]: Object.entries(MODES)
118-
.flat()
119-
.includes(mode)
91+
[`sui-studio-doc${prefix}-full-height`]: fullHeight
92+
// [`sui-studio-doc${prefix}-mode-${mode}`]: Object.entries(MODES)
93+
// .flat()
94+
// .includes(mode)
12095
},
12196
className
12297
)
@@ -125,11 +100,7 @@ export const transformProps = (
125100

126101
const BaseCore = forwardRef(
127102
({children, elementType, ...otherProps}, forwardedRef) => {
128-
const contextProps = useContext(Context) || {}
129-
const ownProps = Object.assign(
130-
{},
131-
transformProps({...contextProps, ...otherProps})
132-
)
103+
const ownProps = Object.assign({}, transformProps({...otherProps}))
133104
let ownElementType = elementType
134105
if (
135106
(elementType === null ||

‎components/documentation/library/src/components/Base.scss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,5 @@
7979
&-full-height {
8080
height: 100%;
8181
}
82-
&-mode {
83-
&-light {
84-
color: var(--c-sui-studio-doc-neutral8);
85-
}
86-
&-dark {
87-
color: var(--c-sui-studio-doc-neutral2);
88-
}
89-
}
9082
}
9183
}

‎components/documentation/library/src/components/Base.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('components', () => {
7272
const element = getByText(props.children)
7373

7474
// Then
75-
expect(element.localName).toBe('span')
75+
expect(element.localName).toBe('div')
7676
expect(element.innerHTML).toBeString()
7777
expect(element.innerHTML).toBe(props.children)
7878
expect(container).toMatchSnapshot()

‎components/documentation/library/src/components/Box/Box.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ let Box = forwardRef(
3535
elementType,
3636
{
3737
...props,
38+
...(mode && {'data-theme-mode': mode}),
3839
className: cx(
3940
'sui-studio-doc-box',
4041
{
41-
[`sui-studio-doc-box-mode-${mode}`]: mode,
4242
'sui-studio-doc-box-full-screen': fullScreen,
4343
'sui-studio-doc-box-outline': outline
4444
},

‎components/documentation/library/src/components/Box/Box.styles.scss

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,11 @@
55
border-style: solid;
66
background: var(--c-sui-studio-doc-neutral0);
77
border-color: var(--c-sui-studio-doc-neutral0);
8-
&.sui-studio-doc-box-mode-dark {
9-
border-width: 1px;
10-
border-style: solid;
11-
background: var(--c-sui-studio-doc-neutral10);
12-
border-color: var(--c-sui-studio-doc-neutral10);
13-
}
148
&.sui-studio-doc-box-outline {
159
border-width: 1px;
1610
border-style: solid;
1711
background: var(--c-sui-studio-doc-neutral0);
1812
border-color: var(--c-sui-studio-doc-neutral7);
19-
&.sui-studio-doc-box-mode-dark {
20-
background: var(--c-sui-studio-doc-neutral10);
21-
border-color: var(--c-sui-studio-doc-neutral3);
22-
}
2313
}
2414
&-full-screen {
2515
width: 100vw;

‎components/documentation/library/src/components/Button/Button.styles.scss

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,8 @@
77
border-radius: 4px;
88
font-weight: var(--fw-sui-studio-doc-medium);
99
white-space: nowrap;
10-
&.sui-studio-doc-mode-light {
11-
background-color: var(--c-sui-studio-doc-neutral10);
10+
& * {
1211
color: var(--c-sui-studio-doc-neutral0);
13-
& * {
14-
color: var(--c-sui-studio-doc-neutral0);
15-
}
16-
}
17-
&.sui-studio-doc-mode-dark {
18-
background-color: var(--c-sui-studio-doc-neutral0);
19-
color: var(--c-sui-studio-doc-neutral10);
20-
& * {
21-
color: var(--c-sui-studio-doc-neutral10);
22-
}
2312
}
2413
&:hover {
2514
background-color: var(--c-sui-studio-doc-primary);
@@ -34,22 +23,7 @@
3423
& * {
3524
color: var(--c-sui-studio-doc-neutral10);
3625
}
37-
&.sui-studio-doc-mode-light {
38-
background-color: transparent;
39-
box-shadow: inset 0 0 0 1px var(--c-sui-studio-doc-neutral10);
40-
color: var(--c-sui-studio-doc-neutral10);
41-
& * {
42-
color: var(--c-sui-studio-doc-neutral10);
43-
}
44-
}
45-
&.sui-studio-doc-mode-dark {
46-
background-color: transparent;
47-
box-shadow: inset 0 0 0 1px var(--c-sui-studio-doc-neutral0);
48-
color: var(--c-sui-studio-doc-neutral0);
49-
& * {
50-
color: var(--c-sui-studio-doc-neutral0);
51-
}
52-
}
26+
5327
&:hover {
5428
background-color: transparent;
5529
box-shadow: inset 0 0 0 1px var(--c-sui-studio-doc-primary);
@@ -95,16 +69,6 @@
9569
& * {
9670
color: var(--c-sui-studio-doc-neutral10);
9771
}
98-
&.sui-studio-doc-mode-light {
99-
background-color: transparent;
100-
border-color: var(--c-sui-studio-doc-neutral10);
101-
color: var(--c-sui-studio-doc-neutral10);
102-
}
103-
&.sui-studio-doc-mode-dark {
104-
background-color: transparent;
105-
border-color: var(--c-sui-studio-doc-neutral0);
106-
color: var(--c-sui-studio-doc-neutral0);
107-
}
10872
&:last-child {
10973
border-width: 1px;
11074
}

‎components/documentation/library/src/components/Code/Code.styles.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,4 @@
77
border: solid 1px var(--c-sui-studio-doc-neutral2);
88
border-radius: 4px;
99
padding: 2px 4px;
10-
&.sui-studio-doc-mode-light {
11-
background: hsl(var(--c-palette-neutral-hue), 0%, 95%);
12-
border: solid 1px var(--c-sui-studio-doc-neutral2);
13-
color: var(--c-sui-studio-doc-secondary5);
14-
}
15-
&.sui-studio-doc-mode-dark {
16-
background: var(--c-sui-studio-doc-neutral-darkest);
17-
border: solid 1px var(--c-sui-studio-doc-neutral);
18-
}
1910
}

‎components/documentation/library/src/components/Color/BackgroundColorConsumer.js

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎components/documentation/library/src/components/Color/BackgroundColorConsumer.md

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎components/documentation/library/src/components/Color/BackgroundColorConsumer.scss

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)