@charcoal-ui/tailwind-config 3.3.0 → 3.5.0

package/dist/docs/colors/TextBgColor.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    textColorClass: string;
+    bgColorClass: string;
+};
+export declare const TextBgColor: React.FC<Props>;
+export {};
+//# sourceMappingURL=TextBgColor.d.ts.map

package/dist/docs/colors/TextBgColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextBgColor.d.ts","sourceRoot":"","sources":["../../../src/docs/colors/TextBgColor.tsx"],"names":[],"mappings":"AAAA,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AACD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAevC,CAAA"}

package/dist/docs/colors/TextBgColor.story.d.ts

@@ -1,27 +1,7 @@
-import type { Story } from '../../_lib/compat';
-declare const _default: {
-    title: string;
-    argTypes: {
-        textColorClass: {
-            control: {
-                type: string;
-                options: string[];
-            };
-            defaultValue: string;
-        };
-        bgColorClass: {
-            control: {
-                type: string;
-                options: string[];
-            };
-            defaultValue: string;
-        };
-    };
-};
-export default _default;
-type Props = Readonly<{
-    textColorClass: string;
-    bgColorClass: string;
-}>;
-export declare const Playground: Story<Props>;
+import type { StoryObj, Meta } from '@storybook/react';
+import { TextBgColor } from './TextBgColor';
+declare const meta: Meta<typeof TextBgColor>;
+export default meta;
+type Story = StoryObj<typeof TextBgColor>;
+export declare const Playground: Story;
 //# sourceMappingURL=TextBgColor.story.d.ts.map

package/dist/docs/colors/TextBgColor.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextBgColor.story.d.ts","sourceRoot":"","sources":["../../../src/docs/colors/TextBgColor.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;AAI9C,wBAkBC;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC;IACpB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAC,CAAA;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CAUnC,CAAA"}
+{"version":3,"file":"TextBgColor.story.d.ts","sourceRoot":"","sources":["../../../src/docs/colors/TextBgColor.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAalC,CAAA;AACD,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-config",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -27,9 +27,9 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^3.3.0",
-    "@charcoal-ui/theme": "^3.3.0",
-    "@charcoal-ui/utils": "^3.3.0"
+    "@charcoal-ui/foundation": "^3.5.0",
+    "@charcoal-ui/theme": "^3.5.0",
+    "@charcoal-ui/utils": "^3.5.0"
   },
   "peerDependencies": {
     "csstype": ">=3.0.0",
@@ -48,5 +48,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/tailwind-config"
   },
-  "gitHead": "60cfc06dc31206cb629f762f263be3fe46a13808"
+  "gitHead": "73956af8afa8f49bb016dd17d3539a7512ad0c42"
 }

package/src/docs/colors/TextBgColor.story.tsx

@@ -1,40 +1,31 @@
-import type { Story } from '../../_lib/compat'
-
+import type { StoryObj, Meta } from '@storybook/react'
 import { colors } from '.'
+import { TextBgColor } from './TextBgColor'
 
-export default {
+const meta: Meta<typeof TextBgColor> = {
   title: 'tailwind-config/Colors/Text bg color',
+  component: TextBgColor,
   argTypes: {
     textColorClass: {
-      control: {
-        type: 'select',
-        options: Object.keys(colors).map((color) => `text-${color}`),
-      },
-      defaultValue: 'text-text1',
+      options: Object.keys(colors).map((color) => `text-${color}`),
+      control: { type: 'select' },
     },
     bgColorClass: {
-      control: {
-        type: 'select',
-        options: Object.keys(colors).map((color) => `bg-${color}`),
-      },
-      defaultValue: 'bg-background1',
+      options: Object.keys(colors).map((color) => `bg-${color}`),
+      control: { type: 'select' },
     },
   },
 }
+export default meta
 
-type Props = Readonly<{
-  textColorClass: string
-  bgColorClass: string
-}>
+type Story = StoryObj<typeof TextBgColor>
 
-export const Playground: Story<Props> = ({ textColorClass, bgColorClass }) => (
-  <div className={`${bgColorClass} p-64 max-w-2xl`}>
-    <p className={`typography-20 ${textColorClass}`}>
-      charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
-      フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem ipsum
-      dolor sit amet, consectetur adipiscing elit. Aliquam at odio bibendum nisl
-      mollis eleifend et quis turpis. Quisque dignissim porta justo ut
-      convallis.dipiscing elit.
-    </p>
-  </div>
-)
+export const Playground: Story = {
+  args: {
+    textColorClass: 'text-text1',
+    bgColorClass: 'bg-background1',
+  },
+  render: ({ bgColorClass, textColorClass }) => (
+    <TextBgColor bgColorClass={bgColorClass} textColorClass={textColorClass} />
+  ),
+}

package/src/docs/colors/TextBgColor.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  textColorClass: string
+  bgColorClass: string
+}
+export const TextBgColor: React.FC<Props> = ({
+  textColorClass,
+  bgColorClass,
+}) => {
+  return (
+    <div className={`${bgColorClass} p-64 max-w-2xl`}>
+      <p className={`typography-20 ${textColorClass}`}>
+        charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+        フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at odio
+        bibendum nisl mollis eleifend et quis turpis. Quisque dignissim porta
+        justo ut convallis.dipiscing elit.
+      </p>
+    </div>
+  )
+}

package/src/docs/colors/__snapshots__/TextBgColor.story.storyshot

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots tailwind-config/Colors/Text bg color Playground 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="bg-background1 p-64 max-w-2xl"
+  >
+    <p
+      className="typography-20 text-text1"
+    >
+      charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at odio bibendum nisl mollis eleifend et quis turpis. Quisque dignissim porta justo ut convallis.dipiscing elit.
+    </p>
+  </div>
+</div>
+`;

package/src/docs/colors/{index.story.mdx → index.mdx}

@@ -11,9 +11,7 @@ import { Colors, TextColors } from '.'
 
 <br />
 
-<Story name="Colors">
-  <Colors />
-</Story>
+<Colors />
 
 <br />
 <br />
@@ -22,6 +20,4 @@ import { Colors, TextColors } from '.'
 
 <br />
 
-<Story name="Text colors">
-  <TextColors />
-</Story>
+<TextColors />

package/src/docs/gradient/{index.story.mdx → index.mdx}

@@ -7,6 +7,4 @@ import { Gradients } from '.'
 
 <br />
 
-<Story name="Gradients">
-  <Gradients />
-</Story>
+<Gradients />

package/src/docs/typography/{index.story.mdx → index.mdx}

@@ -11,9 +11,7 @@ import { Sizes, HalfLeading } from '.'
 
 <br />
 
-<Story name="Sizes">
-  <Sizes />
-</Story>
+<Sizes />
 
 <br />
 
@@ -21,6 +19,4 @@ import { Sizes, HalfLeading } from '.'
 
 <br />
 
-<Story name="Half leading">
-  <HalfLeading />
-</Story>
+<HalfLeading />