@marigold/theme-docs 3.1.12 → 4.0.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 (7) hide show
  1. package/dist/index.js +35 -39
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +35 -39
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +96 -12
  6. package/dist/theme.css +7 -3
  7. package/package.json +11 -8
package/dist/index.js CHANGED
@@ -73,7 +73,6 @@ const CloseButton = (0, __marigold_system.cva)([
73
73
  "flex items-center justify-center whitespace-nowrap",
74
74
  "cursor-pointer",
75
75
  "transition-[color,box-shadow]",
76
- "mixin-ring-focus-visible",
77
76
  "rounded",
78
77
  "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
79
78
  ]);
@@ -166,39 +165,36 @@ const inputHover = "";
166
165
 
167
166
  //#endregion
168
167
  //#region src/components/Label.styles.ts
169
- const Label = {
170
- container: (0, __marigold_system.cva)("", {
171
- variants: {
172
- variant: {
173
- default: "",
174
- floating: [
175
- "z-10 col-start-1 row-start-1",
176
- "pointer-events-none",
177
- "text-secondary-400 text-nowrap",
178
- "after:content-[\":\"]"
179
- ]
180
- },
181
- size: {
182
- default: "text-sm",
183
- small: "text-xs"
184
- }
185
- },
186
- defaultVariants: {
187
- variant: "default",
188
- size: "default"
168
+ const Label = (0, __marigold_system.cva)("", {
169
+ variants: {
170
+ variant: {
171
+ default: "",
172
+ floating: [
173
+ "z-10 col-start-1 row-start-1",
174
+ "pointer-events-none",
175
+ "text-secondary-400 text-nowrap",
176
+ "after:content-[\":\"]"
177
+ ]
189
178
  },
190
- compoundVariants: [{
191
- variant: "floating",
192
- size: "default",
193
- className: "pl-4"
194
- }, {
195
- variant: "floating",
196
- size: "small",
197
- className: "pl-3"
198
- }]
199
- }),
200
- indicator: (0, __marigold_system.cva)()
201
- };
179
+ size: {
180
+ default: "text-sm",
181
+ small: "text-xs"
182
+ }
183
+ },
184
+ defaultVariants: {
185
+ variant: "default",
186
+ size: "default"
187
+ },
188
+ compoundVariants: [{
189
+ variant: "floating",
190
+ size: "default",
191
+ className: "pl-4"
192
+ }, {
193
+ variant: "floating",
194
+ size: "small",
195
+ className: "pl-3"
196
+ }]
197
+ });
202
198
 
203
199
  //#endregion
204
200
  //#region src/components/Link.styles.ts
@@ -251,7 +247,7 @@ const ListBox = {
251
247
  item: (0, __marigold_system.cva)([
252
248
  "text-text-primary",
253
249
  "cursor-pointer rounded-xs outline-hidden",
254
- "rac-hover:bg-bg-hover rac-focus:bg-bg-hover",
250
+ "hover:bg-bg-hover focus:bg-bg-hover",
255
251
  "aria-selected:bg-bg-hover"
256
252
  ], {
257
253
  variants: { size: {
@@ -280,7 +276,7 @@ const Modal = (0, __marigold_system.cva)();
280
276
  //#endregion
281
277
  //#region src/components/SectionMessage.styles.ts
282
278
  const SectionMessage = {
283
- container: (0, __marigold_system.cva)(["not-prose items-center rounded-lg p-4", "grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title'none_content_content']"], { variants: { variant: {
279
+ container: (0, __marigold_system.cva)(["not-prose items-center rounded-lg p-4", "grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']"], { variants: { variant: {
284
280
  info: "bg-bg-info text-text-info",
285
281
  warning: "bg-bg-warning text-text-warning"
286
282
  } } }),
@@ -294,10 +290,10 @@ const SectionMessage = {
294
290
  //#region src/components/Popover.styles.ts
295
291
  const Popover = (0, __marigold_system.cva)([
296
292
  "animate-in",
297
- "placement-t:-translate-y-1",
298
- "placement-b:translate-y-1",
299
- "placement-r:-translate-x-1",
300
- "placement-l:translate-x-1"
293
+ "placement-top:-translate-y-1",
294
+ "placement-bottom:translate-y-1",
295
+ "placement-right:-translate-x-1",
296
+ "placement-left:translate-x-1"
301
297
  ]);
302
298
 
303
299
  //#endregion
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'mixin-ring-focus-visible',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = {\n container: cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n }),\n indicator: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'rac-hover:bg-bg-hover rac-focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title'none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-t:-translate-y-1',\n 'placement-b:translate-y-1',\n 'placement-r:-translate-x-1',\n 'placement-l:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-star-1 *:col-start-2 *:text-left',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:outline',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(\n ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'hover:bg-bg-hover focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-top:-translate-y-1',\n 'placement-bottom:translate-y-1',\n 'placement-right:-translate-x-1',\n 'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-star-1 *:col-start-2 *:text-left',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:outline',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(\n ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}
package/dist/index.mjs CHANGED
@@ -52,7 +52,6 @@ const CloseButton = cva([
52
52
  "flex items-center justify-center whitespace-nowrap",
53
53
  "cursor-pointer",
54
54
  "transition-[color,box-shadow]",
55
- "mixin-ring-focus-visible",
56
55
  "rounded",
57
56
  "[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
58
57
  ]);
@@ -145,39 +144,36 @@ const inputHover = "";
145
144
 
146
145
  //#endregion
147
146
  //#region src/components/Label.styles.ts
148
- const Label = {
149
- container: cva("", {
150
- variants: {
151
- variant: {
152
- default: "",
153
- floating: [
154
- "z-10 col-start-1 row-start-1",
155
- "pointer-events-none",
156
- "text-secondary-400 text-nowrap",
157
- "after:content-[\":\"]"
158
- ]
159
- },
160
- size: {
161
- default: "text-sm",
162
- small: "text-xs"
163
- }
164
- },
165
- defaultVariants: {
166
- variant: "default",
167
- size: "default"
147
+ const Label = cva("", {
148
+ variants: {
149
+ variant: {
150
+ default: "",
151
+ floating: [
152
+ "z-10 col-start-1 row-start-1",
153
+ "pointer-events-none",
154
+ "text-secondary-400 text-nowrap",
155
+ "after:content-[\":\"]"
156
+ ]
168
157
  },
169
- compoundVariants: [{
170
- variant: "floating",
171
- size: "default",
172
- className: "pl-4"
173
- }, {
174
- variant: "floating",
175
- size: "small",
176
- className: "pl-3"
177
- }]
178
- }),
179
- indicator: cva()
180
- };
158
+ size: {
159
+ default: "text-sm",
160
+ small: "text-xs"
161
+ }
162
+ },
163
+ defaultVariants: {
164
+ variant: "default",
165
+ size: "default"
166
+ },
167
+ compoundVariants: [{
168
+ variant: "floating",
169
+ size: "default",
170
+ className: "pl-4"
171
+ }, {
172
+ variant: "floating",
173
+ size: "small",
174
+ className: "pl-3"
175
+ }]
176
+ });
181
177
 
182
178
  //#endregion
183
179
  //#region src/components/Link.styles.ts
@@ -230,7 +226,7 @@ const ListBox = {
230
226
  item: cva([
231
227
  "text-text-primary",
232
228
  "cursor-pointer rounded-xs outline-hidden",
233
- "rac-hover:bg-bg-hover rac-focus:bg-bg-hover",
229
+ "hover:bg-bg-hover focus:bg-bg-hover",
234
230
  "aria-selected:bg-bg-hover"
235
231
  ], {
236
232
  variants: { size: {
@@ -259,7 +255,7 @@ const Modal = cva();
259
255
  //#endregion
260
256
  //#region src/components/SectionMessage.styles.ts
261
257
  const SectionMessage = {
262
- container: cva(["not-prose items-center rounded-lg p-4", "grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title'none_content_content']"], { variants: { variant: {
258
+ container: cva(["not-prose items-center rounded-lg p-4", "grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']"], { variants: { variant: {
263
259
  info: "bg-bg-info text-text-info",
264
260
  warning: "bg-bg-warning text-text-warning"
265
261
  } } }),
@@ -273,10 +269,10 @@ const SectionMessage = {
273
269
  //#region src/components/Popover.styles.ts
274
270
  const Popover = cva([
275
271
  "animate-in",
276
- "placement-t:-translate-y-1",
277
- "placement-b:translate-y-1",
278
- "placement-r:-translate-x-1",
279
- "placement-l:translate-x-1"
272
+ "placement-top:-translate-y-1",
273
+ "placement-bottom:translate-y-1",
274
+ "placement-right:-translate-x-1",
275
+ "placement-left:translate-x-1"
280
276
  ]);
281
277
 
282
278
  //#endregion
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'mixin-ring-focus-visible',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = {\n container: cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n }),\n indicator: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'rac-hover:bg-bg-hover rac-focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title'none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-t:-translate-y-1',\n 'placement-b:translate-y-1',\n 'placement-r:-translate-x-1',\n 'placement-l:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-star-1 *:col-start-2 *:text-left',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:outline',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(\n ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'hover:bg-bg-hover focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-top:-translate-y-1',\n 'placement-bottom:translate-y-1',\n 'placement-right:-translate-x-1',\n 'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-star-1 *:col-start-2 *:text-left',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:outline',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(\n ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}
package/dist/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
@@ -383,6 +383,27 @@
383
383
  .ml-4 {
384
384
  margin-left: calc(var(--spacing) * 4);
385
385
  }
386
+ .scrollbar-thin {
387
+ &::-webkit-scrollbar-track {
388
+ background-color: var(--scrollbar-track);
389
+ border-radius: var(--scrollbar-track-radius);
390
+ }
391
+ &::-webkit-scrollbar-thumb {
392
+ background-color: var(--scrollbar-thumb);
393
+ border-radius: var(--scrollbar-thumb-radius);
394
+ }
395
+ &::-webkit-scrollbar-corner {
396
+ background-color: var(--scrollbar-corner);
397
+ border-radius: var(--scrollbar-corner-radius);
398
+ }
399
+ scrollbar-width: thin;
400
+ scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
401
+ &::-webkit-scrollbar {
402
+ display: block;
403
+ width: 8px;
404
+ height: 8px;
405
+ }
406
+ }
386
407
  .flex {
387
408
  display: flex;
388
409
  }
@@ -2424,10 +2445,31 @@
2424
2445
  --tw-ease: var(--ease-in);
2425
2446
  transition-timing-function: var(--ease-in);
2426
2447
  }
2448
+ .animate-in {
2449
+ animation-name: enter;
2450
+ animation-duration: 150ms;
2451
+ --tw-enter-opacity: initial;
2452
+ --tw-enter-scale: initial;
2453
+ --tw-enter-rotate: initial;
2454
+ --tw-enter-translate-x: initial;
2455
+ --tw-enter-translate-y: initial;
2456
+ }
2427
2457
  .outline-none {
2428
2458
  --tw-outline-style: none;
2429
2459
  outline-style: none;
2430
2460
  }
2461
+ .\[grid-template-areas\:\'icon_title_title\'\'none_content_content\'\] {
2462
+ grid-template-areas: 'icon title title''none content content';
2463
+ }
2464
+ .ease-in {
2465
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
2466
+ }
2467
+ .scrollbar-thumb-code-500 {
2468
+ --scrollbar-thumb: #606e97;
2469
+ }
2470
+ .scrollbar-track-transparent {
2471
+ --scrollbar-track: transparent;
2472
+ }
2431
2473
  .\*\:col-start-2 {
2432
2474
  :is(& > *) {
2433
2475
  grid-column-start: 2;
@@ -2459,6 +2501,20 @@
2459
2501
  content: var(--tw-content);
2460
2502
  }
2461
2503
  }
2504
+ .group-required\/field\:after\:content-\[\"\*\"\] {
2505
+ &:is(:where(.group\/field):where([data-rac])[data-required] *) {
2506
+ &::after {
2507
+ --tw-content: "*";
2508
+ content: var(--tw-content);
2509
+ }
2510
+ }
2511
+ &:is(:where(.group\/field):where(:not([data-rac])):required *) {
2512
+ &::after {
2513
+ --tw-content: "*";
2514
+ content: var(--tw-content);
2515
+ }
2516
+ }
2517
+ }
2462
2518
  .first\:mt-0 {
2463
2519
  &:first-child {
2464
2520
  margin-top: calc(var(--spacing) * 0);
@@ -2474,6 +2530,16 @@
2474
2530
  }
2475
2531
  }
2476
2532
  }
2533
+ .hover\:bg-bg-hover {
2534
+ &:where([data-rac])[data-hovered] {
2535
+ background-color: var(--color-bg-hover);
2536
+ }
2537
+ @media (hover: hover) {
2538
+ &:where(:not([data-rac])):hover {
2539
+ background-color: var(--color-bg-hover);
2540
+ }
2541
+ }
2542
+ }
2477
2543
  .hover\:bg-neutral-100\/80 {
2478
2544
  &:where([data-rac])[data-hovered] {
2479
2545
  background-color: color-mix(in srgb, #f5f5f5 80%, transparent);
@@ -2710,27 +2776,27 @@
2710
2776
  line-height: var(--tw-leading, var(--text-6xl--line-height));
2711
2777
  }
2712
2778
  }
2713
- .placement-t\:-translate-y-1 {
2714
- &[data-placement=top] {
2715
- --tw-translate-y: calc(var(--spacing) * -1);
2779
+ .placement-left\:translate-x-1 {
2780
+ &[data-placement="left"] {
2781
+ --tw-translate-x: calc(var(--spacing) * 1);
2716
2782
  translate: var(--tw-translate-x) var(--tw-translate-y);
2717
2783
  }
2718
2784
  }
2719
- .placement-r\:-translate-x-1 {
2720
- &[data-placement=right] {
2785
+ .placement-right\:-translate-x-1 {
2786
+ &[data-placement="right"] {
2721
2787
  --tw-translate-x: calc(var(--spacing) * -1);
2722
2788
  translate: var(--tw-translate-x) var(--tw-translate-y);
2723
2789
  }
2724
2790
  }
2725
- .placement-b\:translate-y-1 {
2726
- &[data-placement=bottom] {
2727
- --tw-translate-y: calc(var(--spacing) * 1);
2791
+ .placement-top\:-translate-y-1 {
2792
+ &[data-placement="top"] {
2793
+ --tw-translate-y: calc(var(--spacing) * -1);
2728
2794
  translate: var(--tw-translate-x) var(--tw-translate-y);
2729
2795
  }
2730
2796
  }
2731
- .placement-l\:translate-x-1 {
2732
- &[data-placement=left] {
2733
- --tw-translate-x: calc(var(--spacing) * 1);
2797
+ .placement-bottom\:translate-y-1 {
2798
+ &[data-placement="bottom"] {
2799
+ --tw-translate-y: calc(var(--spacing) * 1);
2734
2800
  translate: var(--tw-translate-x) var(--tw-translate-y);
2735
2801
  }
2736
2802
  }
@@ -2855,6 +2921,24 @@
2855
2921
  border-color: var(--color-gray-200, currentColor);
2856
2922
  }
2857
2923
  }
2924
+ @keyframes enter {
2925
+ from {
2926
+ opacity: var(--tw-enter-opacity, 1);
2927
+ transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
2928
+ }
2929
+ }
2930
+ @keyframes exit {
2931
+ to {
2932
+ opacity: var(--tw-exit-opacity, 1);
2933
+ transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
2934
+ }
2935
+ }
2936
+ @layer base {
2937
+ * {
2938
+ scrollbar-color: initial;
2939
+ scrollbar-width: initial;
2940
+ }
2941
+ }
2858
2942
  @property --tw-border-spacing-x {
2859
2943
  syntax: "<length>";
2860
2944
  inherits: false;
package/dist/theme.css CHANGED
@@ -166,8 +166,12 @@
166
166
 
167
167
  --color-border-success: var(--color-lime-500);
168
168
  --color-border-error: var(--color-red-400);
169
+
170
+ /* focus colors */
171
+ --color-ring: var(--color-amber-400);
169
172
  }
170
173
 
171
- @plugin "@marigold/theme-plugins/src/tw-rac-plugins";
172
- @plugin "@marigold/theme-plugins/src/tw-custom-placement-plugin";
173
- @plugin "@marigold/theme-plugins/src/tw-custom-aria-variants-plugin";
174
+ @plugin 'tailwindcss-react-aria-components';
175
+ @plugin '@tailwindcss/typography';
176
+ @plugin 'tailwindcss-animate';
177
+ @plugin 'tailwind-scrollbar';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/theme-docs",
3
- "version": "3.1.12",
3
+ "version": "4.0.0",
4
4
  "description": "Marigold Docs Theme",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -41,18 +41,21 @@
41
41
  "directory": "themes/theme-docs"
42
42
  },
43
43
  "devDependencies": {
44
- "@tailwindcss/postcss": "4.1.14",
45
- "cssnano": "7.1.1",
44
+ "@tailwindcss/postcss": "4.1.17",
45
+ "cssnano": "7.1.2",
46
46
  "postcss-cli": "11.0.1",
47
47
  "postcss-prefix-selector": "2.1.1",
48
- "tailwindcss": "4.1.14",
49
- "tsdown": "0.15.6",
48
+ "tailwindcss": "4.1.17",
49
+ "tsdown": "0.15.9",
50
50
  "@marigold/tsconfig": "0.4.1"
51
51
  },
52
52
  "dependencies": {
53
- "@marigold/components": "15.4.2",
54
- "@marigold/system": "15.4.2",
55
- "@marigold/theme-plugins": "1.0.2"
53
+ "@tailwindcss/typography": "0.5.19",
54
+ "tailwind-scrollbar": "4.0.2",
55
+ "tailwindcss-animate": "1.0.7",
56
+ "tailwindcss-react-aria-components": "2.0.1",
57
+ "@marigold/components": "16.0.0",
58
+ "@marigold/system": "16.0.0"
56
59
  },
57
60
  "scripts": {
58
61
  "build": "NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && cp src/theme.css dist/theme.css"