@repobuddy/storybook 2.4.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm/index.d.ts +31 -14
  2. package/esm/index.js +24 -12
  3. package/package.json +2 -2
  4. package/readme.md +10 -0
  5. package/src/arg-types/fn-to-arg-types.ts +24 -0
  6. package/src/components/story_card.tsx +21 -18
  7. package/src/decorators/show_doc_source.tsx +32 -5
  8. package/src/decorators/with_story_card.tsx +1 -1
  9. package/src/index.ts +1 -0
  10. package/styles.css +149 -182
package/esm/index.d.ts CHANGED
@@ -2,12 +2,24 @@
2
2
  import { UserConfig } from "htmlfy";
3
3
  import { ReactNode } from "react";
4
4
  import * as react_jsx_runtime0 from "react/jsx-runtime";
5
+ import { AnyFunction, CreateTuple, IsStringLiteral, Properties, Tail } from "type-plus";
5
6
  import { ClassNameProps, StyleProps } from "@just-web/css";
6
7
  import { Args, DecoratorFunction, Renderer } from "storybook/internal/csf";
7
8
  import { Decorator, Meta, StoryContext, StoryObj, StrictArgs } from "@storybook/react-vite";
8
- import { IsStringLiteral } from "type-plus";
9
9
  export * from "@repobuddy/test";
10
10
 
11
+ //#region src/arg-types/fn-to-arg-types.d.ts
12
+ /**
13
+ * Converts a function's parameter types to `Args` type for Storybook.
14
+ * Each name maps to the parameter type at the same index in F.
15
+ *
16
+ * @example
17
+ * type F = (a: number, b: string) => void
18
+ * type R = FnToArgTypes<F, ['x', 'y']> // { x: number; y: string }
19
+ */
20
+ type FnToArgTypes<F extends AnyFunction, Names extends CreateTuple<Parameters<F>['length'], string> = CreateTuple<Parameters<F>['length'], string>> = Properties<ReduceToRecord<Parameters<F>, Names>>;
21
+ type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names['length'] extends 0 ? unknown : Names['length'] extends 1 ? Names extends [infer K extends string] ? { [I in K]: Params[0] } : never : Names extends [infer K extends string, ...infer Rest] ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest> : never;
22
+ //#endregion
11
23
  //#region src/components/show_html.d.ts
12
24
  type ShowHtmlProps = ClassNameProps & StyleProps & {
13
25
  selector?: string | undefined;
@@ -28,15 +40,6 @@ declare function ShowHtml({
28
40
  ...props
29
41
  }: ShowHtmlProps): react_jsx_runtime0.JSX.Element;
30
42
  //#endregion
31
- //#region src/decorators/show_doc_source.d.ts
32
- /**
33
- * A decorator that shows the source code of a story above the rendered story.
34
- * The source code is taken from the story's `parameters.docs.source.code`.
35
- */
36
- declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: {
37
- showOriginalSource?: boolean | undefined;
38
- }): DecoratorFunction<TRenderer, TArgs>;
39
- //#endregion
40
43
  //#region src/components/story_card.d.ts
41
44
  type StoryCardProps = {
42
45
  /**
@@ -46,9 +49,9 @@ type StoryCardProps = {
46
49
  title?: ReactNode | undefined;
47
50
  /**
48
51
  * Visual status of the card, affecting its background color.
49
- * - `'error'`: Red background (bg-red-100 dark:bg-red-900)
50
- * - `'warn'`: Yellow background (bg-yellow-100 dark:bg-yellow-900)
51
- * - `'info'`: Blue background (bg-sky-100 dark:bg-sky-900) - default
52
+ * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
53
+ * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
54
+ * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
52
55
  */
53
56
  status?: 'error' | 'warn' | 'info' | undefined;
54
57
  /**
@@ -68,6 +71,20 @@ type StoryCardProps = {
68
71
  children?: ReactNode | undefined;
69
72
  };
70
73
  //#endregion
74
+ //#region src/decorators/show_doc_source.d.ts
75
+ /**
76
+ * A decorator that shows the source code of a story above the rendered story.
77
+ * The source code is taken from the story's `parameters.docs.source.code`.
78
+ *
79
+ * @param options - Options for the showDocSource decorator
80
+ * @param options.showOriginalSource - Whether to show the original source code in a card
81
+ * @param options.className - Class name to apply to the card
82
+ * @returns A decorator function that shows the source code of a story above the rendered story
83
+ */
84
+ declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: Pick<StoryCardProps, 'className'> & {
85
+ showOriginalSource?: boolean | undefined;
86
+ }): DecoratorFunction<TRenderer, TArgs>;
87
+ //#endregion
71
88
  //#region src/decorators/with_story_card.d.ts
72
89
  type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {
73
90
  /**
@@ -781,4 +798,4 @@ type ExtendsStoryObj<S extends {
781
798
  tags?: ExtractStringLiterals<NonNullable<S['tags']>[number]> extends infer MT ? IsStringLiteral<MT> extends true ? Array<(string & {}) | MT | E['tag']> | undefined : Array<(string & {}) | E['tag']> | undefined : never;
782
799
  };
783
800
  //#endregion
784
- export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };
801
+ export { ActionsParam, BackgroundsParam, DocsParam, ExtendMeta, ExtendStoryObj, ExtendsMeta, ExtendsStoryObj, FnToArgTypes, GlobalApiBackgroundsParam, GlobalApiViewportParam, LayoutParam, ShowHtml, ShowHtmlProps, SourceProps, StorySortParam, StorybookBuiltInParams, TestParam, Viewport, ViewportParam, WithStoryCardProps, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineTestParam, defineViewportParam, showDocSource, whenRunningInTest, withStoryCard };
package/esm/index.js CHANGED
@@ -6,8 +6,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
6
6
  import { SyntaxHighlighter } from "storybook/internal/components";
7
7
  import { addons } from "storybook/preview-api";
8
8
  import { ThemeProvider, convert, themes } from "storybook/theming";
9
+ import { twJoin, twMerge } from "tailwind-merge";
9
10
  import { cva } from "class-variance-authority";
10
- import { twMerge } from "tailwind-merge";
11
11
 
12
12
  export * from "@repobuddy/test"
13
13
 
@@ -42,16 +42,16 @@ function ShowHtml({ selector = "[data-testid=\"subject\"]", config, ...props })
42
42
  function storyCardTheme(state, className) {
43
43
  const defaultClassName = storyCardVariants(state);
44
44
  if (!className) return defaultClassName;
45
- return typeof className === "function" ? className({
45
+ return twMerge(typeof className === "function" ? className({
46
46
  ...state,
47
47
  defaultClassName
48
- }) : twMerge(defaultClassName, className);
48
+ }) : twJoin(defaultClassName, className));
49
49
  }
50
- const storyCardVariants = cva("flex flex-col gap-1 py-3 px-4 rounded text-black dark:text-gray-100", {
50
+ const storyCardVariants = cva("rbsb:flex rbsb:flex-col rbsb:gap-1 rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:text-black rbsb:dark:text-gray-100", {
51
51
  variants: { status: {
52
- error: "bg-red-100 dark:bg-red-900",
53
- warn: "bg-yellow-100 dark:bg-yellow-900",
54
- info: "bg-sky-100 dark:bg-sky-900"
52
+ error: "rbsb:bg-red-100 rbsb:dark:bg-red-900",
53
+ warn: "rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900",
54
+ info: "rbsb:bg-sky-100 rbsb:dark:bg-sky-900"
55
55
  } },
56
56
  defaultVariants: { status: "info" }
57
57
  });
@@ -65,7 +65,7 @@ function StoryCard({ status, className, children, title }) {
65
65
  return /* @__PURE__ */ jsxs("section", {
66
66
  className: storyCardTheme({ status }, className),
67
67
  children: [title && /* @__PURE__ */ jsx("h2", {
68
- className: "text-lg font-bold",
68
+ className: "rbsb:text-lg rbsb:font-bold",
69
69
  children: title
70
70
  }), children]
71
71
  });
@@ -77,6 +77,11 @@ const channel = addons.getChannel();
77
77
  /**
78
78
  * A decorator that shows the source code of a story above the rendered story.
79
79
  * The source code is taken from the story's `parameters.docs.source.code`.
80
+ *
81
+ * @param options - Options for the showDocSource decorator
82
+ * @param options.showOriginalSource - Whether to show the original source code in a card
83
+ * @param options.className - Class name to apply to the card
84
+ * @returns A decorator function that shows the source code of a story above the rendered story
80
85
  */
81
86
  function showDocSource(options) {
82
87
  return (Story, { parameters: { docs, darkMode } }) => {
@@ -102,10 +107,17 @@ function showDocSource(options) {
102
107
  flexDirection: "column",
103
108
  gap: "1rem"
104
109
  },
105
- children: [/* @__PURE__ */ jsx(Story, {}), isOriginalSource ? /* @__PURE__ */ jsx(StoryCard, {
106
- className: "bg-gray-100 dark:bg-gray-900",
110
+ children: [/* @__PURE__ */ jsx(Story, {}), /* @__PURE__ */ jsx(StoryCard, {
111
+ className: (state) => {
112
+ const modifiedState = {
113
+ ...state,
114
+ defaultClassName: twJoin(state.defaultClassName, isOriginalSource ? "rbsb:bg-transparent rbsb:dark:bg-transparent" : "rbsb:bg-gray-100 rbsb:dark:bg-gray-900")
115
+ };
116
+ const className = options?.className;
117
+ return typeof className === "function" ? className(modifiedState) : twJoin(modifiedState.defaultClassName, className);
118
+ },
107
119
  children: content
108
- }) : content]
120
+ })]
109
121
  })
110
122
  });
111
123
  };
@@ -232,7 +244,7 @@ function StoryCardContainer({ children }) {
232
244
  return /* @__PURE__ */ jsx(StoryCardContext.Provider, {
233
245
  value: contextValue,
234
246
  children: /* @__PURE__ */ jsxs("div", {
235
- className: "flex flex-col gap-2",
247
+ className: "rbsb:flex rbsb:flex-col rbsb:gap-2",
236
248
  children: [cards.map(({ content, key, ...rest }) => /* @__PURE__ */ jsx(StoryCard, {
237
249
  ...rest,
238
250
  children: content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobuddy/storybook",
3
- "version": "2.4.0",
3
+ "version": "2.6.0",
4
4
  "description": "Storybook repo buddy",
5
5
  "keywords": [
6
6
  "storybook",
@@ -55,7 +55,7 @@
55
55
  "class-variance-authority": "^0.7.1",
56
56
  "htmlfy": "^1.0.0",
57
57
  "tailwind-merge": "^3.4.0",
58
- "type-plus": "8.0.0-beta.7"
58
+ "type-plus": "8.0.0-beta.8"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@repobuddy/vitest": "^2.0.0",
package/readme.md CHANGED
@@ -135,6 +135,16 @@ export const preview: Preview = {
135
135
  }
136
136
  ```
137
137
 
138
+ ## Styles
139
+
140
+ [`@repobuddy/storybook`][`@repobuddy/storybook`] uses Tailwind CSS 4 and the prefix `rbsb:` to avoid conflicts with user styles.
141
+
142
+ To use the styles, import `@repobuddy/storybook/styles.css`:
143
+
144
+ ```ts
145
+ import '@repobuddy/storybook/styles.css'
146
+ ```
147
+
138
148
  [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
139
149
  [`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
140
150
  [`@storybook-community/storybook-dark-mode`]: https://github.com/repobuddy/@storybook-community/storybook-dark-mode
package/src/arg-types/fn-to-arg-types.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { AnyFunction, CreateTuple, Properties, Tail } from 'type-plus'
2
+
3
+ /**
4
+ * Converts a function's parameter types to `Args` type for Storybook.
5
+ * Each name maps to the parameter type at the same index in F.
6
+ *
7
+ * @example
8
+ * type F = (a: number, b: string) => void
9
+ * type R = FnToArgTypes<F, ['x', 'y']> // { x: number; y: string }
10
+ */
11
+ export type FnToArgTypes<
12
+ F extends AnyFunction,
13
+ Names extends CreateTuple<Parameters<F>['length'], string> = CreateTuple<Parameters<F>['length'], string>
14
+ > = Properties<ReduceToRecord<Parameters<F>, Names>>
15
+
16
+ type ReduceToRecord<Params extends Array<any>, Names extends Array<any>> = Names['length'] extends 0
17
+ ? unknown
18
+ : Names['length'] extends 1
19
+ ? Names extends [infer K extends string]
20
+ ? { [I in K]: Params[0] }
21
+ : never
22
+ : Names extends [infer K extends string, ...infer Rest]
23
+ ? { [I in K]: Params[0] } & ReduceToRecord<Tail<Params>, Rest>
24
+ : never
package/src/components/story_card.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { cva } from 'class-variance-authority'
2
2
  import type { ReactNode } from 'react'
3
- import { twMerge } from 'tailwind-merge'
3
+ import { twJoin, twMerge } from 'tailwind-merge'
4
4
 
5
5
  export type StoryCardProps = {
6
6
  /**
@@ -10,9 +10,9 @@ export type StoryCardProps = {
10
10
  title?: ReactNode | undefined
11
11
  /**
12
12
  * Visual status of the card, affecting its background color.
13
- * - `'error'`: Red background (bg-red-100 dark:bg-red-900)
14
- * - `'warn'`: Yellow background (bg-yellow-100 dark:bg-yellow-900)
15
- * - `'info'`: Blue background (bg-sky-100 dark:bg-sky-900) - default
13
+ * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
14
+ * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
15
+ * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
16
16
  */
17
17
  status?: 'error' | 'warn' | 'info' | undefined
18
18
  /**
@@ -33,23 +33,26 @@ export type StoryCardProps = {
33
33
  function storyCardTheme(state: Pick<StoryCardProps, 'status'>, className: StoryCardProps['className']) {
34
34
  const defaultClassName = storyCardVariants(state)
35
35
  if (!className) return defaultClassName
36
- return typeof className === 'function'
37
- ? className({ ...state, defaultClassName })
38
- : twMerge(defaultClassName, className)
36
+ return twMerge(
37
+ typeof className === 'function' ? className({ ...state, defaultClassName }) : twJoin(defaultClassName, className)
38
+ )
39
39
  }
40
40
 
41
- const storyCardVariants = cva('flex flex-col gap-1 py-3 px-4 rounded text-black dark:text-gray-100', {
42
- variants: {
43
- status: {
44
- error: 'bg-red-100 dark:bg-red-900',
45
- warn: 'bg-yellow-100 dark:bg-yellow-900',
46
- info: 'bg-sky-100 dark:bg-sky-900'
41
+ const storyCardVariants = cva(
42
+ 'rbsb:flex rbsb:flex-col rbsb:gap-1 rbsb:py-3 rbsb:px-4 rbsb:rounded rbsb:text-black rbsb:dark:text-gray-100',
43
+ {
44
+ variants: {
45
+ status: {
46
+ error: 'rbsb:bg-red-100 rbsb:dark:bg-red-900',
47
+ warn: 'rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900',
48
+ info: 'rbsb:bg-sky-100 rbsb:dark:bg-sky-900'
49
+ }
50
+ },
51
+ defaultVariants: {
52
+ status: 'info'
47
53
  }
48
- },
49
- defaultVariants: {
50
- status: 'info'
51
54
  }
52
- })
55
+ )
53
56
 
54
57
  /**
55
58
  * A card component that displays information with optional title and status styling.
@@ -60,7 +63,7 @@ const storyCardVariants = cva('flex flex-col gap-1 py-3 px-4 rounded text-black
60
63
  export function StoryCard({ status, className, children, title }: StoryCardProps) {
61
64
  return (
62
65
  <section className={storyCardTheme({ status }, className)}>
63
- {title && <h2 className="text-lg font-bold">{title}</h2>}
66
+ {title && <h2 className="rbsb:text-lg rbsb:font-bold">{title}</h2>}
64
67
  {children}
65
68
  </section>
66
69
  )
package/src/decorators/show_doc_source.tsx CHANGED
@@ -3,17 +3,25 @@ import { SyntaxHighlighter } from 'storybook/internal/components'
3
3
  import type { Args, DecoratorFunction, Renderer } from 'storybook/internal/csf'
4
4
  import { addons } from 'storybook/preview-api'
5
5
  import { convert, ThemeProvider, themes } from 'storybook/theming'
6
- import { StoryCard } from '../components/story_card'
6
+ import { twJoin } from 'tailwind-merge'
7
+ import { StoryCard, type StoryCardProps } from '../components/story_card'
7
8
 
8
9
  const channel = addons.getChannel()
9
10
 
10
11
  /**
11
12
  * A decorator that shows the source code of a story above the rendered story.
12
13
  * The source code is taken from the story's `parameters.docs.source.code`.
14
+ *
15
+ * @param options - Options for the showDocSource decorator
16
+ * @param options.showOriginalSource - Whether to show the original source code in a card
17
+ * @param options.className - Class name to apply to the card
18
+ * @returns A decorator function that shows the source code of a story above the rendered story
13
19
  */
14
- export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: {
15
- showOriginalSource?: boolean | undefined
16
- }): DecoratorFunction<TRenderer, TArgs> {
20
+ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(
21
+ options?: Pick<StoryCardProps, 'className'> & {
22
+ showOriginalSource?: boolean | undefined
23
+ }
24
+ ): DecoratorFunction<TRenderer, TArgs> {
17
25
  return (Story, { parameters: { docs, darkMode } }) => {
18
26
  // This is a workaround to get the current dark mode from `@storybook-community/storybook-dark-mode` without referencing it.
19
27
  const storedItem = window.localStorage.getItem('sb-addon-themes-3')
@@ -46,7 +54,26 @@ export function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Arg
46
54
  }}
47
55
  >
48
56
  <Story />
49
- {isOriginalSource ? <StoryCard className="bg-gray-100 dark:bg-gray-900">{content}</StoryCard> : content}
57
+ <StoryCard
58
+ className={(state) => {
59
+ const modifiedState = {
60
+ ...state,
61
+ defaultClassName: twJoin(
62
+ state.defaultClassName,
63
+ isOriginalSource
64
+ ? 'rbsb:bg-transparent rbsb:dark:bg-transparent'
65
+ : 'rbsb:bg-gray-100 rbsb:dark:bg-gray-900'
66
+ )
67
+ }
68
+
69
+ const className = options?.className
70
+ return typeof className === 'function'
71
+ ? className(modifiedState)
72
+ : twJoin(modifiedState.defaultClassName, className)
73
+ }}
74
+ >
75
+ {content}
76
+ </StoryCard>
50
77
  </section>
51
78
  </ThemeProvider>
52
79
  )
package/src/decorators/with_story_card.tsx CHANGED
@@ -149,7 +149,7 @@ function StoryCardContainer({ children }: { children: ReactNode }) {
149
149
 
150
150
  return (
151
151
  <StoryCardContext.Provider value={contextValue}>
152
- <div className="flex flex-col gap-2">
152
+ <div className="rbsb:flex rbsb:flex-col rbsb:gap-2">
153
153
  {cards.map(({ content, key, ...rest }) => (
154
154
  <StoryCard key={key} {...rest}>
155
155
  {content}
package/src/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from '@repobuddy/test'
2
+ export type * from './arg-types/fn-to-arg-types.ts'
2
3
  export * from './components/show_html.tsx'
3
4
  export * from './decorators/show_doc_source.tsx'
4
5
  export * from './decorators/with_story_card.tsx'
package/styles.css CHANGED
@@ -3,249 +3,221 @@
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
- --color-red-100: oklch(93.6% 0.032 17.717);
7
- --color-red-800: oklch(44.4% 0.177 26.899);
8
- --color-red-900: oklch(39.6% 0.141 25.723);
9
- --color-amber-300: oklch(87.9% 0.169 91.605);
10
- --color-amber-900: oklch(41.4% 0.112 45.904);
11
- --color-yellow-100: oklch(97.3% 0.071 103.193);
12
- --color-yellow-900: oklch(42.1% 0.095 57.708);
13
- --color-green-200: oklch(92.5% 0.084 155.995);
14
- --color-green-800: oklch(44.8% 0.119 151.328);
15
- --color-sky-100: oklch(95.1% 0.026 236.824);
16
- --color-sky-500: oklch(68.5% 0.169 237.323);
17
- --color-sky-900: oklch(39.1% 0.09 240.876);
18
- --color-blue-500: oklch(62.3% 0.214 259.815);
19
- --color-rose-400: oklch(71.2% 0.194 13.428);
20
- --color-rose-900: oklch(41% 0.159 10.272);
21
- --color-gray-100: oklch(96.7% 0.003 264.542);
22
- --color-gray-500: oklch(55.1% 0.027 264.364);
23
- --color-gray-900: oklch(21% 0.034 264.665);
24
- --color-black: #000;
25
- --color-white: #fff;
26
- --spacing: 0.25rem;
27
- --text-lg: 1.125rem;
28
- --text-lg--line-height: calc(1.75 / 1.125);
29
- --font-weight-extralight: 200;
30
- --font-weight-bold: 700;
31
- --font-weight-extrabold: 800;
6
+ --rbsb-color-red-100: oklch(93.6% 0.032 17.717);
7
+ --rbsb-color-red-800: oklch(44.4% 0.177 26.899);
8
+ --rbsb-color-red-900: oklch(39.6% 0.141 25.723);
9
+ --rbsb-color-amber-300: oklch(87.9% 0.169 91.605);
10
+ --rbsb-color-amber-900: oklch(41.4% 0.112 45.904);
11
+ --rbsb-color-yellow-100: oklch(97.3% 0.071 103.193);
12
+ --rbsb-color-yellow-900: oklch(42.1% 0.095 57.708);
13
+ --rbsb-color-green-200: oklch(92.5% 0.084 155.995);
14
+ --rbsb-color-green-800: oklch(44.8% 0.119 151.328);
15
+ --rbsb-color-sky-100: oklch(95.1% 0.026 236.824);
16
+ --rbsb-color-sky-500: oklch(68.5% 0.169 237.323);
17
+ --rbsb-color-sky-900: oklch(39.1% 0.09 240.876);
18
+ --rbsb-color-blue-200: oklch(88.2% 0.059 254.128);
19
+ --rbsb-color-blue-500: oklch(62.3% 0.214 259.815);
20
+ --rbsb-color-blue-800: oklch(42.4% 0.199 265.638);
21
+ --rbsb-color-blue-900: oklch(37.9% 0.146 265.522);
22
+ --rbsb-color-purple-500: oklch(62.7% 0.265 303.9);
23
+ --rbsb-color-rose-400: oklch(71.2% 0.194 13.428);
24
+ --rbsb-color-rose-900: oklch(41% 0.159 10.272);
25
+ --rbsb-color-gray-100: oklch(96.7% 0.003 264.542);
26
+ --rbsb-color-gray-500: oklch(55.1% 0.027 264.364);
27
+ --rbsb-color-gray-900: oklch(21% 0.034 264.665);
28
+ --rbsb-color-black: #000;
29
+ --rbsb-color-white: #fff;
30
+ --rbsb-spacing: 0.25rem;
31
+ --rbsb-text-lg: 1.125rem;
32
+ --rbsb-text-lg--line-height: calc(1.75 / 1.125);
33
+ --rbsb-font-weight-extralight: 200;
34
+ --rbsb-font-weight-bold: 700;
35
+ --rbsb-font-weight-extrabold: 800;
36
+ --rbsb-radius-lg: 0.5rem;
32
37
  }
33
38
  }
34
39
  @layer utilities {
35
- .static {
36
- position: static;
37
- }
38
- .container {
39
- width: 100%;
40
- @media (width >= 40rem) {
41
- max-width: 40rem;
42
- }
43
- @media (width >= 48rem) {
44
- max-width: 48rem;
45
- }
46
- @media (width >= 64rem) {
47
- max-width: 64rem;
48
- }
49
- @media (width >= 80rem) {
50
- max-width: 80rem;
51
- }
52
- @media (width >= 96rem) {
53
- max-width: 96rem;
54
- }
55
- }
56
- .flex {
40
+ .rbsb\:flex {
57
41
  display: flex;
58
42
  }
59
- .hidden {
60
- display: none;
61
- }
62
- .inline {
63
- display: inline;
64
- }
65
- .transform {
66
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
67
- }
68
- .flex-col {
43
+ .rbsb\:flex-col {
69
44
  flex-direction: column;
70
45
  }
71
- .gap-1 {
72
- gap: calc(var(--spacing) * 1);
46
+ .rbsb\:gap-1 {
47
+ gap: calc(var(--rbsb-spacing) * 1);
73
48
  }
74
- .gap-2 {
75
- gap: calc(var(--spacing) * 2);
49
+ .rbsb\:gap-2 {
50
+ gap: calc(var(--rbsb-spacing) * 2);
76
51
  }
77
- .gap-4 {
78
- gap: calc(var(--spacing) * 4);
52
+ .rbsb\:gap-4 {
53
+ gap: calc(var(--rbsb-spacing) * 4);
79
54
  }
80
- .rounded {
55
+ .rbsb\:rounded {
81
56
  border-radius: 0.25rem;
82
57
  }
83
- .border {
84
- border-style: var(--tw-border-style);
85
- border-width: 1px;
58
+ .rbsb\:rounded-lg {
59
+ border-radius: var(--rbsb-radius-lg);
86
60
  }
87
- .border-2 {
61
+ .rbsb\:border-2 {
88
62
  border-style: var(--tw-border-style);
89
63
  border-width: 2px;
90
64
  }
91
- .border-blue-500 {
92
- border-color: var(--color-blue-500);
65
+ .rbsb\:border-blue-500 {
66
+ border-color: var(--rbsb-color-blue-500);
67
+ }
68
+ .rbsb\:border-purple-500 {
69
+ border-color: var(--rbsb-color-purple-500);
70
+ }
71
+ .rbsb\:bg-amber-300 {
72
+ background-color: var(--rbsb-color-amber-300);
93
73
  }
94
- .bg-amber-300 {
95
- background-color: var(--color-amber-300);
74
+ .rbsb\:bg-black {
75
+ background-color: var(--rbsb-color-black);
96
76
  }
97
- .bg-black {
98
- background-color: var(--color-black);
77
+ .rbsb\:bg-blue-500 {
78
+ background-color: var(--rbsb-color-blue-500);
99
79
  }
100
- .bg-gray-100 {
101
- background-color: var(--color-gray-100);
80
+ .rbsb\:bg-gray-100 {
81
+ background-color: var(--rbsb-color-gray-100);
102
82
  }
103
- .bg-green-200 {
104
- background-color: var(--color-green-200);
83
+ .rbsb\:bg-green-200 {
84
+ background-color: var(--rbsb-color-green-200);
105
85
  }
106
- .bg-green-800 {
107
- background-color: var(--color-green-800);
86
+ .rbsb\:bg-green-800 {
87
+ background-color: var(--rbsb-color-green-800);
108
88
  }
109
- .bg-red-100 {
110
- background-color: var(--color-red-100);
89
+ .rbsb\:bg-red-100 {
90
+ background-color: var(--rbsb-color-red-100);
111
91
  }
112
- .bg-red-800 {
113
- background-color: var(--color-red-800);
92
+ .rbsb\:bg-red-800 {
93
+ background-color: var(--rbsb-color-red-800);
114
94
  }
115
- .bg-rose-400 {
116
- background-color: var(--color-rose-400);
95
+ .rbsb\:bg-rose-400 {
96
+ background-color: var(--rbsb-color-rose-400);
117
97
  }
118
- .bg-sky-100 {
119
- background-color: var(--color-sky-100);
98
+ .rbsb\:bg-sky-100 {
99
+ background-color: var(--rbsb-color-sky-100);
120
100
  }
121
- .bg-sky-500 {
122
- background-color: var(--color-sky-500);
101
+ .rbsb\:bg-sky-500 {
102
+ background-color: var(--rbsb-color-sky-500);
123
103
  }
124
- .bg-white {
125
- background-color: var(--color-white);
104
+ .rbsb\:bg-transparent {
105
+ background-color: transparent;
126
106
  }
127
- .bg-yellow-100 {
128
- background-color: var(--color-yellow-100);
107
+ .rbsb\:bg-yellow-100 {
108
+ background-color: var(--rbsb-color-yellow-100);
129
109
  }
130
- .p-2 {
131
- padding: calc(var(--spacing) * 2);
110
+ .rbsb\:p-2 {
111
+ padding: calc(var(--rbsb-spacing) * 2);
132
112
  }
133
- .p-4 {
134
- padding: calc(var(--spacing) * 4);
113
+ .rbsb\:p-4 {
114
+ padding: calc(var(--rbsb-spacing) * 4);
135
115
  }
136
- .px-4 {
137
- padding-inline: calc(var(--spacing) * 4);
116
+ .rbsb\:px-4 {
117
+ padding-inline: calc(var(--rbsb-spacing) * 4);
138
118
  }
139
- .py-3 {
140
- padding-block: calc(var(--spacing) * 3);
119
+ .rbsb\:py-3 {
120
+ padding-block: calc(var(--rbsb-spacing) * 3);
141
121
  }
142
- .text-lg {
143
- font-size: var(--text-lg);
144
- line-height: var(--tw-leading, var(--text-lg--line-height));
122
+ .rbsb\:text-lg {
123
+ font-size: var(--rbsb-text-lg);
124
+ line-height: var(--tw-leading, var(--rbsb-text-lg--line-height));
145
125
  }
146
- .font-bold {
147
- --tw-font-weight: var(--font-weight-bold);
148
- font-weight: var(--font-weight-bold);
126
+ .rbsb\:font-bold {
127
+ --tw-font-weight: var(--rbsb-font-weight-bold);
128
+ font-weight: var(--rbsb-font-weight-bold);
149
129
  }
150
- .font-extrabold {
151
- --tw-font-weight: var(--font-weight-extrabold);
152
- font-weight: var(--font-weight-extrabold);
130
+ .rbsb\:font-extrabold {
131
+ --tw-font-weight: var(--rbsb-font-weight-extrabold);
132
+ font-weight: var(--rbsb-font-weight-extrabold);
153
133
  }
154
- .font-extralight {
155
- --tw-font-weight: var(--font-weight-extralight);
156
- font-weight: var(--font-weight-extralight);
134
+ .rbsb\:font-extralight {
135
+ --tw-font-weight: var(--rbsb-font-weight-extralight);
136
+ font-weight: var(--rbsb-font-weight-extralight);
157
137
  }
158
- .text-black {
159
- color: var(--color-black);
138
+ .rbsb\:text-black {
139
+ color: var(--rbsb-color-black);
160
140
  }
161
- .text-white {
162
- color: var(--color-white);
141
+ .rbsb\:text-white {
142
+ color: var(--rbsb-color-white);
163
143
  }
164
- .shadow-lg {
144
+ .rbsb\:shadow-lg {
165
145
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
166
146
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
167
147
  }
168
- .dark\:bg-amber-900 {
169
- &:where(.dark, .dark *) {
170
- background-color: var(--color-amber-900);
148
+ .rbsb\:ring-2 {
149
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
150
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
151
+ }
152
+ .rbsb\:ring-blue-200 {
153
+ --tw-ring-color: var(--rbsb-color-blue-200);
154
+ }
155
+ .rbsb\:dark\:bg-amber-900 {
156
+ @media (prefers-color-scheme: dark) {
157
+ background-color: var(--rbsb-color-amber-900);
171
158
  }
172
159
  }
173
- .dark\:bg-black {
174
- &:where(.dark, .dark *) {
175
- background-color: var(--color-black);
160
+ .rbsb\:dark\:bg-blue-900 {
161
+ @media (prefers-color-scheme: dark) {
162
+ background-color: var(--rbsb-color-blue-900);
176
163
  }
177
164
  }
178
- .dark\:bg-gray-500 {
179
- &:where(.dark, .dark *) {
180
- background-color: var(--color-gray-500);
165
+ .rbsb\:dark\:bg-gray-500 {
166
+ @media (prefers-color-scheme: dark) {
167
+ background-color: var(--rbsb-color-gray-500);
181
168
  }
182
169
  }
183
- .dark\:bg-gray-900 {
184
- &:where(.dark, .dark *) {
185
- background-color: var(--color-gray-900);
170
+ .rbsb\:dark\:bg-gray-900 {
171
+ @media (prefers-color-scheme: dark) {
172
+ background-color: var(--rbsb-color-gray-900);
186
173
  }
187
174
  }
188
- .dark\:bg-green-800 {
189
- &:where(.dark, .dark *) {
190
- background-color: var(--color-green-800);
175
+ .rbsb\:dark\:bg-green-800 {
176
+ @media (prefers-color-scheme: dark) {
177
+ background-color: var(--rbsb-color-green-800);
191
178
  }
192
179
  }
193
- .dark\:bg-red-900 {
194
- &:where(.dark, .dark *) {
195
- background-color: var(--color-red-900);
180
+ .rbsb\:dark\:bg-red-900 {
181
+ @media (prefers-color-scheme: dark) {
182
+ background-color: var(--rbsb-color-red-900);
196
183
  }
197
184
  }
198
- .dark\:bg-rose-900 {
199
- &:where(.dark, .dark *) {
200
- background-color: var(--color-rose-900);
185
+ .rbsb\:dark\:bg-rose-900 {
186
+ @media (prefers-color-scheme: dark) {
187
+ background-color: var(--rbsb-color-rose-900);
201
188
  }
202
189
  }
203
- .dark\:bg-sky-900 {
204
- &:where(.dark, .dark *) {
205
- background-color: var(--color-sky-900);
190
+ .rbsb\:dark\:bg-sky-900 {
191
+ @media (prefers-color-scheme: dark) {
192
+ background-color: var(--rbsb-color-sky-900);
206
193
  }
207
194
  }
208
- .dark\:bg-yellow-900 {
209
- &:where(.dark, .dark *) {
210
- background-color: var(--color-yellow-900);
195
+ .rbsb\:dark\:bg-transparent {
196
+ @media (prefers-color-scheme: dark) {
197
+ background-color: transparent;
211
198
  }
212
199
  }
213
- .dark\:font-extrabold {
214
- &:where(.dark, .dark *) {
215
- --tw-font-weight: var(--font-weight-extrabold);
216
- font-weight: var(--font-weight-extrabold);
200
+ .rbsb\:dark\:bg-yellow-900 {
201
+ @media (prefers-color-scheme: dark) {
202
+ background-color: var(--rbsb-color-yellow-900);
217
203
  }
218
204
  }
219
- .dark\:text-gray-100 {
220
- &:where(.dark, .dark *) {
221
- color: var(--color-gray-100);
205
+ .rbsb\:dark\:font-extrabold {
206
+ @media (prefers-color-scheme: dark) {
207
+ --tw-font-weight: var(--rbsb-font-weight-extrabold);
208
+ font-weight: var(--rbsb-font-weight-extrabold);
222
209
  }
223
210
  }
224
- .dark\:text-white {
225
- &:where(.dark, .dark *) {
226
- color: var(--color-white);
211
+ .rbsb\:dark\:text-gray-100 {
212
+ @media (prefers-color-scheme: dark) {
213
+ color: var(--rbsb-color-gray-100);
214
+ }
215
+ }
216
+ .rbsb\:dark\:ring-blue-800 {
217
+ @media (prefers-color-scheme: dark) {
218
+ --tw-ring-color: var(--rbsb-color-blue-800);
227
219
  }
228
220
  }
229
- }
230
- @property --tw-rotate-x {
231
- syntax: "*";
232
- inherits: false;
233
- }
234
- @property --tw-rotate-y {
235
- syntax: "*";
236
- inherits: false;
237
- }
238
- @property --tw-rotate-z {
239
- syntax: "*";
240
- inherits: false;
241
- }
242
- @property --tw-skew-x {
243
- syntax: "*";
244
- inherits: false;
245
- }
246
- @property --tw-skew-y {
247
- syntax: "*";
248
- inherits: false;
249
221
  }
250
222
  @property --tw-border-style {
251
223
  syntax: "*";
@@ -324,11 +296,6 @@
324
296
  @layer properties {
325
297
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
326
298
  *, ::before, ::after, ::backdrop {
327
- --tw-rotate-x: initial;
328
- --tw-rotate-y: initial;
329
- --tw-rotate-z: initial;
330
- --tw-skew-x: initial;
331
- --tw-skew-y: initial;
332
299
  --tw-border-style: solid;
333
300
  --tw-font-weight: initial;
334
301
  --tw-shadow: 0 0 #0000;