1 | import React, { ReactNode } from 'react';
|
2 | import Lozenge from '@kalamazoo/lozenge';
|
3 | import { md, Example, Props } from '@kalamazoo/docs';
|
4 | import SectionMessage from '@kalamazoo/section-message';
|
5 |
|
6 | const Experimental = ({ children }: { children: ReactNode }) => (
|
7 | <h2>
|
8 | {children} <Lozenge appearance="moved">experimental</Lozenge>
|
9 | </h2>
|
10 | );
|
11 |
|
12 | export default md`
|
13 | ${(
|
14 | <SectionMessage appearance="warning" title="Experimental">
|
15 | Theming isn't currently stable, if you use it you do so at your own risk.
|
16 | Really need to get it prioritized? Please raise a ticket on our{' '}
|
17 | <a
|
18 | target="_blank"
|
19 | href="https://ecosystem.atlassian.net/servicedesk/customer/portal/24"
|
20 | >
|
21 | Service Desk
|
22 | </a>
|
23 | .
|
24 | </SectionMessage>
|
25 | )}
|
26 |
|
27 | ${(<Experimental>Creating themes</Experimental>)}
|
28 |
|
29 | The \`createTheme\` function is at the heart of the theming API and is used in the global theme and reset theme. Much like React's \`createContext\`, the \`createTheme\` function returns you a \`Consumer\` and \`Provider\` that you use to get and set a theme, respectively.
|
30 |
|
31 | ${(
|
32 | <Example
|
33 | packageName="@kalamazoo/theme"
|
34 | Component={require('../examples/creating-themes').default}
|
35 | source={require('!!raw-loader!../examples/creating-themes')}
|
36 | title="Creating themes"
|
37 | />
|
38 | )}
|
39 |
|
40 | ${(<Experimental>Theming components</Experimental>)}
|
41 |
|
42 | Whenever you create a new theme, it provides you a context specific to that theme. When theming a component, you use this context to provide a theme for your component. It is recommended that you, at the very least, export the provider for your theme so consumers can customise the look and feel of your component.
|
43 |
|
44 | ${(
|
45 | <Example
|
46 | packageName="@kalamazoo/theme"
|
47 | Component={require('../examples/theming-components').default}
|
48 | source={require('!!raw-loader!../examples/theming-components')}
|
49 | title="Creating themes"
|
50 | />
|
51 | )}
|
52 |
|
53 | ${(<Experimental>The global theme</Experimental>)}
|
54 |
|
55 | The global theme is the \`default\` export of the theme package. It is defined by using the \`createTheme\` function, so it will give you both a \`Consumer\` and \`Provider\` for you to use or customise as you see fit.
|
56 |
|
57 | ${(
|
58 | <Example
|
59 | packageName="@kalamazoo/theme"
|
60 | Component={require('../examples/global-theme').default}
|
61 | source={require('!!raw-loader!../examples/global-theme')}
|
62 | title="Creating themes"
|
63 | />
|
64 | )}
|
65 |
|
66 | ${(<Experimental>Reset</Experimental>)}
|
67 |
|
68 | The \`Reset\` component applies CSS reset styles to select descendant nodes according to the ADG.
|
69 |
|
70 | ${(
|
71 | <Example
|
72 | packageName="@kalamazoo/theme"
|
73 | Component={require('../examples/reset').default}
|
74 | source={require('!!raw-loader!../examples/reset')}
|
75 | title="Reset"
|
76 | />
|
77 | )}
|
78 |
|
79 | As shown above, the \`Reset\` comes with defaults based on the ADG, but it also allows you to customise it via a theme.
|
80 |
|
81 | ${(
|
82 | <Example
|
83 | packageName="@kalamazoo/theme"
|
84 | Component={require('../examples/themed-reset').default}
|
85 | source={require('!!raw-loader!../examples/themed-reset')}
|
86 | title="Themed reset"
|
87 | />
|
88 | )}
|
89 |
|
90 | ${(
|
91 | <Props
|
92 | props={require('!!extract-react-types-loader!../src/components/Reset')}
|
93 | />
|
94 | )}
|
95 |
|
96 | ___Unlike in the deprecated \`AtlaskitThemeProvider\`, this is not applied automatically - or globally - so it is up to you to put this in your app where appropriate.___
|
97 | `;
|