feat(PPDSC-2798): expose css variables

lib/codemod/README.md

@@ -139,7 +139,6 @@ Run this codemod if you would like to apply logical props instead.
 + <Block stylePreset="inkContrast" paddingBlock="space020" paddingInline="space020">Block</Block>
 ```
 
-
 ## Development
 
 ### Setup

site/pages/_app.tsx

@@ -13,7 +13,6 @@ import {HeadNextSeo} from '../components/head-next-seo/head-next-seo';
 import {PageLoadInstrumentation} from '../components/page-load-instrumentation';
 import {ThemeMode} from '../context';
 import {docsThemeLight, docsThemeDark} from '../theme/doc-theme';
-import {ThemeProviderSite} from '../components/theme-provider-site';
 import {transformEventObject} from '../utils/instrumentation';
 
 const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
@@ -156,6 +155,7 @@ export default class MyApp extends App<Props, State> {
 
         <NewsKitProvider
           theme={theme}
+          themeOptions={{exposeCssVariables: true}}
           layer={{zIndex: 1000}}
           instrumentation={createEventInstrumentation(handlers, {
             ...pageProps,
@@ -165,14 +165,12 @@ export default class MyApp extends App<Props, State> {
         >
           <ThemeMode.Provider value={themeMode}>
             <PageLoadInstrumentation />
-            <ThemeProviderSite theme={theme}>
-              <Component
-                {...pageProps}
-                path={path}
-                toggleTheme={this.toggleTheme}
-                themeMode={themeMode}
-              />
-            </ThemeProviderSite>
+            <Component
+              {...pageProps}
+              path={path}
+              toggleTheme={this.toggleTheme}
+              themeMode={themeMode}
+            />
           </ThemeMode.Provider>
         </NewsKitProvider>
       </>

site/pages/patterns/overview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Grid} from 'newskit';
+import {Grid, ThemeProvider} from 'newskit';
 import {routes} from '../../routes';
 import Layout, {LayoutProps} from '../../components/layout';
 import {Item} from '../../components/sidebar/types';
@@ -16,7 +16,6 @@ import {
   ContentPrimary,
   ContentSection,
 } from '../../components/content-structure';
-import {ThemeProviderSite} from '../../components/theme-provider-site';
 
 const patternsRouteList: Item[] =
   routes.filter(route => route.title === 'Patterns')[0].subNav || [];
@@ -55,7 +54,8 @@ const HeaderImage = () => (
 const Overview = (layoutProps: LayoutProps) => (
   <Layout {...layoutProps} newPage>
     {({themeMode}) => (
-      <ThemeProviderSite
+      <ThemeProvider
+        exposeCssVariables
         theme={themeMode === 'light' ? patternsThemeLight : patternsThemeDark}
       >
         <HeadNextSeo
@@ -90,7 +90,7 @@ const Overview = (layoutProps: LayoutProps) => (
             </ContentSection>
           </ComponentPageCell>
         </Grid>
-      </ThemeProviderSite>
+      </ThemeProvider>
     )}
   </Layout>
 );

site/pages/theme/overview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Grid} from 'newskit';
+import {Grid, ThemeProvider} from 'newskit';
 import {
   ContentPrimary,
   ContentSection,
@@ -15,7 +15,6 @@ import {
 } from '../../components/illustrations/illustration-loader';
 import {Item} from '../../components/sidebar/types';
 import {HeadNextSeo} from '../../components/head-next-seo';
-import {ThemeProviderSite} from '../../components/theme-provider-site';
 import {
   foundationsThemeLight,
   foundationsThemeDark,
@@ -61,7 +60,8 @@ enabling brands to retain a unique identity while building consistent, accessibl
 const Overview = (layoutProps: LayoutProps) => (
   <Layout {...layoutProps} newPage>
     {({themeMode}) => (
-      <ThemeProviderSite
+      <ThemeProvider
+        exposeCssVariables
         theme={
           themeMode === 'light' ? foundationsThemeLight : foundationsThemeDark
         }
@@ -118,7 +118,7 @@ const Overview = (layoutProps: LayoutProps) => (
             </ContentSection>
           </ComponentPageCell>
         </Grid>
-      </ThemeProviderSite>
+      </ThemeProvider>
     )}
   </Layout>
 );

site/pages/theme/theming/using-a-theme.mdx

@@ -15,7 +15,7 @@ To render NewsKit components you must have a theme available for them to utilise
 
 ### NewsKitProvider & ThemeProvider components
 
-NewsKitProvider provides a single wrapper to configure your application which includes ThemeProvider, <Link href="/components/utils/hooks/#usemediaqueryobject">MediaQueryProvider</Link>, <Link href="/getting-started/code/instrumentation/">InstrumentationProvider</Link> and LayerOrganizer.
+NewsKitProvider provides a single wrapper to configure your application which includes ThemeProvider, <Link href="/components/utils/hooks/#usemediaqueryobject">MediaQueryProvider</Link>, <Link href="/getting-started/code/instrumentation/">InstrumentationProvider</Link> and <Link href="/components/layer/">LayerOrganizer</Link>.
 
 A ThemeProvider utilises a React Context to provide a theme to all NewsKit components descended under it. You pass your theme (or a NewsKit default) to the `theme` prop. This will typically be an uncompiled theme, but you can pass a pre-compiled theme if you wish.
 
@@ -54,3 +54,28 @@ By wrapping your component in `withTheme`, the theme object will be passed into
 The `useTheme` hook also allows you to access the theme, but helps avoid the extra "wrapper hell" that higher-order components bring.
 
 <CodeFromFile path="examples/theming/use-theme.tsx" />
+
+## Using CSS custom properties (variables)
+
+NewsKit provides a way to expose the following tokens as CSS variables: `borders`, `colors`, `overlays`, `motions`, `shadows`, `sizing`, `spacePresets` and `fonts`.
+
+Color tokens have prefix of `color` for example `inkBase` is `--color-inkBase`, the rest of the tokens are keeping their names like `sizing020` is `--sizing020`.
+
+In order to enable that functionality to your project, you need to add a prop `exposeCssVariables` to ThemeProvider, or pass it as themeOptions to NewsKitProvider as the example bellow:
+
+<Code>
+{`<NewsKitProvider theme={yourTheme} themeOptions={{exposeCssVariables: true}}>
+  Main theme context
+
+  <ThemeProvider theme={yourSubTheme} exposeCssVariables>Sub-theme context</ThemeProvider>
+</NewsKitProvider>`}
+</Code>
+
+<InlineMessage
+  overrides={{marginBlockStart: 'space030'}}
+  role="region"
+  aria-label="css variables"
+>
+  Exposing CSS variables will add aditional <strong>div</strong> element to your
+  HTML
+</InlineMessage>