@repobuddy/storybook 2.4.0 → 2.5.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 (8) hide show
  1. package/esm/index.d.ts +17 -12
  2. package/esm/index.js +24 -12
  3. package/package.json +1 -1
  4. package/readme.md +10 -0
  5. package/src/components/story_card.tsx +21 -18
  6. package/src/decorators/show_doc_source.tsx +32 -5
  7. package/src/decorators/with_story_card.tsx +1 -1
  8. package/styles.css +149 -182
package/esm/index.d.ts CHANGED
@@ -28,15 +28,6 @@ declare function ShowHtml({
28
28
  ...props
29
29
  }: ShowHtmlProps): react_jsx_runtime0.JSX.Element;
30
30
  //#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
31
  //#region src/components/story_card.d.ts
41
32
  type StoryCardProps = {
42
33
  /**
@@ -46,9 +37,9 @@ type StoryCardProps = {
46
37
  title?: ReactNode | undefined;
47
38
  /**
48
39
  * 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
40
+ * - `'error'`: Red background (rbsb:bg-red-100 rbsb:dark:bg-red-900)
41
+ * - `'warn'`: Yellow background (rbsb:bg-yellow-100 rbsb:dark:bg-yellow-900)
42
+ * - `'info'`: Blue background (rbsb:bg-sky-100 rbsb:dark:bg-sky-900) - default
52
43
  */
53
44
  status?: 'error' | 'warn' | 'info' | undefined;
54
45
  /**
@@ -68,6 +59,20 @@ type StoryCardProps = {
68
59
  children?: ReactNode | undefined;
69
60
  };
70
61
  //#endregion
62
+ //#region src/decorators/show_doc_source.d.ts
63
+ /**
64
+ * A decorator that shows the source code of a story above the rendered story.
65
+ * The source code is taken from the story's `parameters.docs.source.code`.
66
+ *
67
+ * @param options - Options for the showDocSource decorator
68
+ * @param options.showOriginalSource - Whether to show the original source code in a card
69
+ * @param options.className - Class name to apply to the card
70
+ * @returns A decorator function that shows the source code of a story above the rendered story
71
+ */
72
+ declare function showDocSource<TRenderer extends Renderer = Renderer, TArgs = Args>(options?: Pick<StoryCardProps, 'className'> & {
73
+ showOriginalSource?: boolean | undefined;
74
+ }): DecoratorFunction<TRenderer, TArgs>;
75
+ //#endregion
71
76
  //#region src/decorators/with_story_card.d.ts
72
77
  type WithStoryCardProps = Omit<StoryCardProps, 'children' | 'className'> & {
73
78
  /**
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.5.0",
4
4
  "description": "Storybook repo buddy",
5
5
  "keywords": [
6
6
  "storybook",
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/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/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;