@charcoal-ui/styled 3.11.0 → 3.12.0

package/dist/{index.story.d.ts → addThemeUtils.story.d.ts}

@@ -8,4 +8,4 @@ declare module 'styled-components' {
     }
 }
 export declare const Example: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map
+//# sourceMappingURL=addThemeUtils.story.d.ts.map

package/dist/addThemeUtils.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addThemeUtils.story.d.ts","sourceRoot":"","sources":["../src/addThemeUtils.story.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAW,MAAM,eAAe,CAAA;;;;AAEhD,wBAEC;AAED,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,OAAO;KAAG;CACjD;AAED,eAAO,MAAM,OAAO,mBAiCnB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/styled",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "license": "Apache-2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs.js",
@@ -34,9 +34,9 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^3.11.0",
-    "@charcoal-ui/theme": "^3.11.0",
-    "@charcoal-ui/utils": "^3.11.0",
+    "@charcoal-ui/foundation": "^3.12.0",
+    "@charcoal-ui/theme": "^3.12.0",
+    "@charcoal-ui/utils": "^3.12.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -55,5 +55,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/styled"
   },
-  "gitHead": "503ef7c22e3eb46b39b8ddd93e8389025afdd411"
+  "gitHead": "817a068941a10855b03ca57f380412e54f8bdf4b"
 }

package/src/README.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story } from '@storybook/addon-docs'
+
+<Meta title="styled/README" />
+
+# Install
+
+## yarn
+
+```
+yarn add @charcoal-ui/styled
+```
+
+# Usage
+
+```tsx
+import { FC, ReactNode } from 'react'
+import { light, dark } from '@charcoal-ui/theme'
+import {
+  TokenInjector,
+  useTheme,
+  useThemeSetter,
+  themeSelector,
+  prefersColorScheme,
+} from '@charcoal-ui/styled'
+
+const ExampleProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [theme] = useTheme()
+  useThemeSetter()
+  return (
+    <ThemeProvider theme={theme === 'dark' ? dark : light}>
+      <TokenInjector
+        theme={{
+          ':root': light,
+          [themeSelector('light')]: light,
+          [themeSelector('dark')]: dark,
+          [prefersColorScheme('dark')]: dark,
+        }}
+        background="background1"
+      />
+      {children}
+    </ThemeProvider>
+  )
+}
+```

package/src/__snapshots__/{index.story.storyshot → addThemeUtils.story.storyshot}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests styled/example Example 1`] = `
+exports[`Storybook Tests styled/addThemeUtils Example 1`] = `
 .c0 {
   gap: 40px;
   color: #1f1f1f;

package/src/{themeUtils.mdx → addThemeUtils.mdx}

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as CheckboxStories from './index.story'
+import * as Stories from './addThemeUtils.story'
 
 <Meta title="styled/addThemeUtils" />
 
@@ -41,4 +41,4 @@ const AssertiveRingDiv = styled.div`
 
 ### Example
 
-<Canvas of={CheckboxStories.Example} />
+<Canvas of={Stories.Example} />

package/src/{index.story.tsx → addThemeUtils.story.tsx}

@@ -2,7 +2,7 @@ import styled, { ThemeProvider } from 'styled-components'
 import { MyTheme, myTheme } from './storyHelper'
 
 export default {
-  title: 'styled/example',
+  title: 'styled/addThemeUtils',
 }
 
 declare module 'styled-components' {

package/src/createTheme.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+<Meta title="styled/createTheme" />
+
+# `createTheme`(`deprecated`)
+
+The helper function for styled-components has a performance issue.
+
+```tsx
+import styled from 'styled-components'
+import { createTheme } from '@charcoal-ui/styled'
+
+export const theme = createTheme(styled)
+
+export const Preview = () => {
+  return (
+    <>
+      <Ex>brand</Ex>
+      <Ex2>hover or press me</Ex2>
+    </>
+  )
+}
+const Ex = styled.p`
+  ${theme((o) => [o.bg.brand, o.font.text5, o.width.px(104), o.height.px(104)])}
+`
+
+const Ex2 = styled.p`
+  ${theme((o) => [
+    o.bg.success.hover.press,
+    o.font.text5,
+    o.width.px(104),
+    o.height.px(104),
+  ])}
+`
+```

package/src/index.test.tsx

@@ -3,7 +3,7 @@ import 'jest-styled-components'
 
 import renderer from 'react-test-renderer'
 import styled, { ThemeProvider } from 'styled-components'
-import { Example } from './index.story'
+import { Example } from './addThemeUtils.story'
 import { MyTheme, myTheme } from './storyHelper'
 
 function render(children: JSX.Element) {

package/dist/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../src/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAW,MAAM,eAAe,CAAA;;;;AAEhD,wBAEC;AAED,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,OAAO;KAAG;CACjD;AAED,eAAO,MAAM,OAAO,mBAiCnB,CAAA"}