opui-css 5.4.2 → 6.0.0-rc.1

package/skills/opui/references/typography.md

@@ -0,0 +1,159 @@
+# Typography
+
+Styles for headings, body text, and other text content. Use util classes anywhere or wrap content in .ui-rich-text.
+
+- CSS: `opui-css/css/components/typography.css` and `opui-css/css/components/link.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/typography.md), [Astro](https://open-props-ui.netlify.app/astro/components/typography.md), [React](https://open-props-ui.netlify.app/react/components/typography.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/typography.md), [Vue](https://open-props-ui.netlify.app/vue/components/typography.md).
+
+## Typography (CSS only)
+
+### Parts
+
+- `.ui-rich-text` (root): Classless typography for uncontrolled child markup.
+
+### Classes
+
+- Blockquote: `.ui-blockquote`. Quoted block with a start border.
+- Caption: `.ui-caption`. Muted supporting text.
+- Code block: `pre.ui-code-block`. Monospace preformatted block.
+- Colors: `critical` (`.ui-critical`), `info` (`.ui-info`), `neutral` (`.ui-neutral`), `success` (`.ui-success`), `warning` (`.ui-warning`). Tone of `.ui-swatch`. Without it, the swatch takes the palette accent of the scope it sits in.
+- Heading: `h1` (`.ui-h1`), `h2` (`.ui-h2`), `h3` (`.ui-h3`), `h4` (`.ui-h4`), `h5` (`.ui-h5`), `h6` (`.ui-h6`). Heading styles for any element.
+- Heading group: `.ui-hgroup`. Groups an overline, heading, and optional body copy.
+- Icon: `.ui-icon`. Sizes an inline `svg` to `--ui-icon-size` and keeps it from shrinking in a flex row.
+- Inline: `abbr` (`.ui-abbr`), `cite` (`.ui-cite`), `del` (`.ui-del`), `dfn` (`.ui-dfn`), `ins` (`.ui-ins`), `kbd` (`.ui-kbd`), `mark` (`.ui-mark`), `s` (`.ui-s`), `samp` (`.ui-samp`), `small` (`.ui-small`), `sub` (`.ui-sub`), `sup` (`.ui-sup`), `u` (`.ui-u`), `var` (`.ui-var`). Inline text element utilities.
+- Link: `.ui-link`. Link styles outside `.ui-rich-text`. On hover and focus, the underline gets thicker. The color gets darker in light mode and lighter in dark mode.
+- Not rich text: `.ui-not-rich-text`. Ends the `.ui-rich-text` styles inside it.
+- Overline: `.ui-overline`. Small uppercase label text.
+- Paragraph: `.ui-p`. Body paragraph styling.
+- Sizes: `large` (`.ui-large`), `medium` (default), `small` (`.ui-small`). Size modifiers on `.ui-p` and `.ui-icon`. An icon reads `--ui-icon-size-small` and `--ui-icon-size-large`.
+- Swatch: `.ui-swatch`. A small colored dot for a legend, in `--_swatch-bg-color`, the palette accent of its tone or scope.
+
+### Notes
+
+- Astro and Vue: Add the classes to elements in your templates.
+- React and Svelte: Add the classes to elements in your markup.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### typography.css
+
+- `--_flow-gap`: Space between blocks in `.ui-rich-text`. Heading, `hr` and `figure` margins are multiples of it.
+- `--_swatch-bg-color`: Fill of `.ui-swatch`. Defaults to `--ui-palette-accent`, the accent of the color class on the swatch or of the surrounding severity scope.
+
+Outputs: `--_count-digits`, `--_font-scale` and `--_start-digits`.
+
+### link.css
+
+- `--_text-color`: Text and underline color of `.ui-link` and of links without a `ui-` class in `.ui-rich-text`. Defaults to `--ui-primary-text`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-width`, `--ui-border-width-thick`, `--ui-code-bg-color`, `--ui-code-block-bg-color`, `--ui-code-block-text-color`, `--ui-critical-text`, `--ui-font-body`, `--ui-font-code`, `--ui-font-heading`, `--ui-font-size-caption`, `--ui-font-size-h1`, `--ui-font-size-h2`, `--ui-font-size-h3`, `--ui-font-size-h4`, `--ui-font-size-h5`, `--ui-font-size-h6`, `--ui-font-size-large`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-medium`, `--ui-icon-size`, `--ui-icon-size-large`, `--ui-icon-size-small`, `--ui-info`, `--ui-letter-spacing-caps`, `--ui-letter-spacing-display`, `--ui-letter-spacing-heading`, `--ui-line-height`, `--ui-on-inverse`, `--ui-palette-accent`, `--ui-primary-text`, `--ui-radius`, `--ui-radius-round`, `--ui-radius-small`, `--ui-rhythm-step`, `--ui-space-2`, `--ui-space-3`, `--ui-space-4`, `--ui-success-text`, `--ui-surface-inverse`, `--ui-text`, `--ui-text-strong`, `--ui-text-subtle`, `--ui-underline-offset`, `--ui-underline-offset-small` and `--ui-underline-thickness-hover`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Variants
+
+```html
+<h1 class="ui-h1">Heading 1</h1>
+<h2 class="ui-h2">Heading 2</h2>
+<h3 class="ui-h3">Heading 3</h3>
+<h4 class="ui-h4">Heading 4</h4>
+<h5 class="ui-h5">Heading 5</h5>
+<h6 class="ui-h6">Heading 6</h6>
+<p class="ui-p ui-large">Body Large</p>
+<p class="ui-p">Body</p>
+<p class="ui-p ui-small">Body Small</p>
+<p class="ui-overline">Overline</p>
+<p class="ui-caption">Caption</p>
+```
+
+## Astro
+
+There is no Astro component. Use the classes in your markup.
+
+### Example: Variants
+
+```astro
+<h1 class="ui-h1">Heading 1</h1>
+<h2 class="ui-h2">Heading 2</h2>
+<h3 class="ui-h3">Heading 3</h3>
+<h4 class="ui-h4">Heading 4</h4>
+<h5 class="ui-h5">Heading 5</h5>
+<h6 class="ui-h6">Heading 6</h6>
+<p class="ui-p ui-large">Body Large</p>
+<p class="ui-p">Body</p>
+<p class="ui-p ui-small">Body Small</p>
+<p class="ui-overline">Overline</p>
+<p class="ui-caption">Caption</p>
+```
+
+## React
+
+There is no React component. Use the classes in your markup.
+
+### Example: Variants
+
+```tsx
+export default function Variants() {
+  return (
+    <>
+      <h1 className="ui-h1">Heading 1</h1>
+      <h2 className="ui-h2">Heading 2</h2>
+      <h3 className="ui-h3">Heading 3</h3>
+      <h4 className="ui-h4">Heading 4</h4>
+      <h5 className="ui-h5">Heading 5</h5>
+      <h6 className="ui-h6">Heading 6</h6>
+      <p className="ui-p ui-large">Body Large</p>
+      <p className="ui-p">Body</p>
+      <p className="ui-p ui-small">Body Small</p>
+      <p className="ui-overline">Overline</p>
+      <p className="ui-caption">Caption</p>
+    </>
+  )
+}
+```
+
+## Svelte
+
+There is no Svelte component. Use the classes in your markup.
+
+### Example: Variants
+
+```svelte
+<h1 class="ui-h1">Heading 1</h1>
+<h2 class="ui-h2">Heading 2</h2>
+<h3 class="ui-h3">Heading 3</h3>
+<h4 class="ui-h4">Heading 4</h4>
+<h5 class="ui-h5">Heading 5</h5>
+<h6 class="ui-h6">Heading 6</h6>
+<p class="ui-p ui-large">Body Large</p>
+<p class="ui-p">Body</p>
+<p class="ui-p ui-small">Body Small</p>
+<p class="ui-overline">Overline</p>
+<p class="ui-caption">Caption</p>
+```
+
+## Vue
+
+There is no Vue component. Use the classes in your markup.
+
+### Example: Variants
+
+```vue
+<template>
+  <h1 class="ui-h1">Heading 1</h1>
+  <h2 class="ui-h2">Heading 2</h2>
+  <h3 class="ui-h3">Heading 3</h3>
+  <h4 class="ui-h4">Heading 4</h4>
+  <h5 class="ui-h5">Heading 5</h5>
+  <h6 class="ui-h6">Heading 6</h6>
+  <p class="ui-p ui-large">Body Large</p>
+  <p class="ui-p">Body</p>
+  <p class="ui-p ui-small">Body Small</p>
+  <p class="ui-overline">Overline</p>
+  <p class="ui-caption">Caption</p>
+</template>
+```

package/svelte/elements.ts

@@ -0,0 +1,7 @@
+declare module "svelte/elements" {
+  interface HTMLAttributes<T extends EventTarget> {
+    interestfor?: string | undefined | null
+  }
+}
+
+export {}

package/svelte/index.ts

@@ -0,0 +1,177 @@
+import type {} from "./elements"
+
+export { default as Accordion } from "../components/Accordion/Accordion.svelte"
+export { default as AccordionActions } from "../components/Accordion/AccordionActions.svelte"
+export { default as AccordionContent } from "../components/Accordion/AccordionContent.svelte"
+export { default as AccordionSummary } from "../components/Accordion/AccordionSummary.svelte"
+export { default as Anchor } from "../components/Anchor/Anchor.svelte"
+export { default as AnchorContent } from "../components/Anchor/AnchorContent.svelte"
+export { default as Avatar } from "../components/Avatar/Avatar.svelte"
+export { default as AvatarGroup } from "../components/Avatar/AvatarGroup.svelte"
+export { default as Badge } from "../components/Badge/Badge.svelte"
+export { default as Button } from "../components/Button/Button.svelte"
+export { default as ButtonGroup } from "../components/ButtonGroup/ButtonGroup.svelte"
+export { default as Callout } from "../components/Callout/Callout.svelte"
+export { default as CalloutContent } from "../components/Callout/CalloutContent.svelte"
+export { default as CalloutIcon } from "../components/Callout/CalloutIcon.svelte"
+export { default as Card } from "../components/Card/Card.svelte"
+export { default as CardActions } from "../components/Card/CardActions.svelte"
+export { default as CardContent } from "../components/Card/CardContent.svelte"
+export { default as CardHeader } from "../components/Card/CardHeader.svelte"
+export { default as Carousel } from "../components/Carousel/Carousel.svelte"
+export { default as Checkbox } from "../components/Checkbox/Checkbox.svelte"
+export { default as CheckboxInput } from "../components/Checkbox/CheckboxInput.svelte"
+export { default as Chip } from "../components/Chip/Chip.svelte"
+export { default as DescriptionList } from "../components/DescriptionList/DescriptionList.svelte"
+export { default as DescriptionListDescription } from "../components/DescriptionList/DescriptionListDescription.svelte"
+export { default as DescriptionListItem } from "../components/DescriptionList/DescriptionListItem.svelte"
+export { default as DescriptionListTerm } from "../components/DescriptionList/DescriptionListTerm.svelte"
+export { default as Dialog } from "../components/Dialog/Dialog.svelte"
+export { default as DialogContent } from "../components/Dialog/DialogContent.svelte"
+export { default as DialogFooter } from "../components/Dialog/DialogFooter.svelte"
+export { default as DialogHeader } from "../components/Dialog/DialogHeader.svelte"
+export { default as DialogTitle } from "../components/Dialog/DialogTitle.svelte"
+export { default as Divider } from "../components/Divider/Divider.svelte"
+export { default as Drawer } from "../components/Drawer/Drawer.svelte"
+export { default as DrawerContent } from "../components/Drawer/DrawerContent.svelte"
+export { default as DrawerFooter } from "../components/Drawer/DrawerFooter.svelte"
+export { default as DrawerHeader } from "../components/Drawer/DrawerHeader.svelte"
+export { default as DrawerTitle } from "../components/Drawer/DrawerTitle.svelte"
+export { default as FieldDescription } from "../components/FieldDescription/FieldDescription.svelte"
+export { default as FieldGroup } from "../components/FieldGroup/FieldGroup.svelte"
+export { default as FieldLegend } from "../components/FieldLegend/FieldLegend.svelte"
+export { default as Fieldset } from "../components/Fieldset/Fieldset.svelte"
+export { default as Form } from "../components/Form/Form.svelte"
+export { default as List } from "../components/List/List.svelte"
+export { default as ListItem } from "../components/ListItem/ListItem.svelte"
+export { default as Menu } from "../components/Menu/Menu.svelte"
+export { default as Progress } from "../components/Progress/Progress.svelte"
+export { default as Radio } from "../components/Radio/Radio.svelte"
+export { default as RadioInput } from "../components/Radio/RadioInput.svelte"
+export { default as Range } from "../components/Range/Range.svelte"
+export { default as Select } from "../components/Select/Select.svelte"
+export { default as Switch } from "../components/Switch/Switch.svelte"
+export { default as SwitchInput } from "../components/Switch/SwitchInput.svelte"
+export { default as Table } from "../components/Table/Table.svelte"
+export { default as TableBody } from "../components/Table/TableBody.svelte"
+export { default as TableCaption } from "../components/Table/TableCaption.svelte"
+export { default as TableCell } from "../components/Table/TableCell.svelte"
+export { default as TableColumn } from "../components/Table/TableColumn.svelte"
+export { default as TableColumnGroup } from "../components/Table/TableColumnGroup.svelte"
+export { default as TableFoot } from "../components/Table/TableFoot.svelte"
+export { default as TableHead } from "../components/Table/TableHead.svelte"
+export { default as TableHeaderCell } from "../components/Table/TableHeaderCell.svelte"
+export { default as TableRow } from "../components/Table/TableRow.svelte"
+export { default as Tabs } from "../components/Tabs/Tabs.svelte"
+export { default as TabsItem } from "../components/Tabs/TabsItem.svelte"
+export { default as TabsLabel } from "../components/Tabs/TabsLabel.svelte"
+export { default as TabsPanel } from "../components/Tabs/TabsPanel.svelte"
+export { default as Textarea } from "../components/Textarea/Textarea.svelte"
+export { default as TextField } from "../components/TextField/TextField.svelte"
+export { default as ToggleButton } from "../components/ToggleButton/ToggleButton.svelte"
+export { default as ToggleGroup } from "../components/ToggleGroup/ToggleGroup.svelte"
+export { default as Tooltip } from "../components/Tooltip/Tooltip.svelte"
+export { default as TooltipContent } from "../components/Anchor/AnchorContent.svelte"
+export type {
+  AccordionActionsProps,
+  AccordionContentProps,
+  Props as AccordionProps,
+  AccordionSummaryProps,
+} from "../components/Accordion/types.svelte"
+export type {
+  AnchorContentProps,
+  Props as AnchorProps,
+  AnchorContentProps as TooltipContentProps,
+} from "../components/Anchor/types.svelte"
+export type {
+  AvatarGroupProps,
+  Props as AvatarProps,
+} from "../components/Avatar/types.svelte"
+export type { Props as BadgeProps } from "../components/Badge/types.svelte"
+export type { Props as ButtonProps } from "../components/Button/types.svelte"
+export type { Props as ButtonGroupProps } from "../components/ButtonGroup/types.svelte"
+export type {
+  CalloutContentProps,
+  CalloutIconProps,
+  Props as CalloutProps,
+} from "../components/Callout/types.svelte"
+export type {
+  CardActionsProps,
+  CardContentProps,
+  CardHeaderProps,
+  Props as CardProps,
+} from "../components/Card/types.svelte"
+export type { Props as CarouselProps } from "../components/Carousel/types.svelte"
+export type {
+  CheckboxInputProps,
+  Props as CheckboxProps,
+} from "../components/Checkbox/types.svelte"
+export type { Props as ChipProps } from "../components/Chip/types.svelte"
+export type {
+  DescriptionListDescriptionProps,
+  DescriptionListItemProps,
+  Props as DescriptionListProps,
+  DescriptionListTermProps,
+} from "../components/DescriptionList/types.svelte"
+export type {
+  DialogContentProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  Props as DialogProps,
+  DialogTitleProps,
+} from "../components/Dialog/types.svelte"
+export type { Props as DividerProps } from "../components/Divider/types.svelte"
+export type {
+  DrawerContentProps,
+  DrawerFooterProps,
+  DrawerHeaderProps,
+  Props as DrawerProps,
+  DrawerTitleProps,
+} from "../components/Drawer/types.svelte"
+export type { Props as FieldDescriptionProps } from "../components/FieldDescription/types.svelte"
+export type { Props as FieldGroupProps } from "../components/FieldGroup/types.svelte"
+export type { Props as FieldLegendProps } from "../components/FieldLegend/types.svelte"
+export type { Props as FieldsetProps } from "../components/Fieldset/types.svelte"
+export type { Props as FormProps } from "../components/Form/types.svelte"
+export type { Props as ListProps } from "../components/List/types.svelte"
+export type { Props as ListItemProps } from "../components/ListItem/types.svelte"
+export type {
+  MenuItem,
+  Props as MenuProps,
+} from "../components/Menu/types.svelte"
+export type { Props as ProgressProps } from "../components/Progress/types.svelte"
+export type {
+  RadioInputProps,
+  Props as RadioProps,
+} from "../components/Radio/types.svelte"
+export type { RangeItem } from "../components/Range/types"
+export type { Props as RangeProps } from "../components/Range/types.svelte"
+export type { SelectItem } from "../components/Select/types"
+export type { Props as SelectProps } from "../components/Select/types.svelte"
+export type {
+  SwitchInputProps,
+  Props as SwitchProps,
+} from "../components/Switch/types.svelte"
+export type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableColumnGroupProps,
+  TableColumnProps,
+  TableFootProps,
+  TableHeaderCellProps,
+  TableHeadProps,
+  Props as TableProps,
+  TableRowProps,
+} from "../components/Table/types.svelte"
+export type {
+  TabsItemProps,
+  TabsLabelProps,
+  TabsPanelProps,
+  Props as TabsProps,
+} from "../components/Tabs/types.svelte"
+export type { Props as TextareaProps } from "../components/Textarea/types.svelte"
+export type { Props as TextFieldProps } from "../components/TextField/types.svelte"
+export type { Props as ToggleButtonProps } from "../components/ToggleButton/types.svelte"
+export type { Props as ToggleGroupProps } from "../components/ToggleGroup/types.svelte"
+export type { Props as TooltipProps } from "../components/Tooltip/types.svelte"

package/themes/bootstrap.css

@@ -0,0 +1,223 @@
+@layer openprops, theme, normalize, components.prose, components.root, components.extended, components.compat, utils;
+@layer theme.palette, theme.base, theme.custom, theme.severity;
+
+@layer theme.custom {
+  :where(html, .ui-palette, .ui-contrast-more) {
+    --ui-backdrop-blur: 0px;
+    --ui-border-color: light-dark(
+      oklch(0.91 0.007 248),
+      oklch(0.428 0.015 248)
+    );
+    --ui-border-color-on-filled: var(--ui-border-color);
+    --ui-border-color-raised: var(--ui-border-color);
+    --ui-radius: 0.375rem;
+    --ui-radius-small: 0.375rem;
+    --ui-radius-x-small: 0.25rem;
+    --ui-button-accent: light-dark(
+      oklch(0.525 0.017 245),
+      oklch(0.77 0.014 248)
+    );
+    --ui-button-on-accent: light-dark(oklch(1 0 0), oklch(0 0 0));
+    --ui-button-font-weight: 400;
+    --ui-button-padding-inline: 0.75rem;
+    --ui-button-padding-inline-large: 1rem;
+    --ui-button-padding-inline-small: 0.5rem;
+    --ui-button-padding-inline-x-small: 0.5rem;
+    --ui-choice-ripple-bg-color: transparent;
+    --ui-choice-size: 1rem;
+    --ui-code-bg-color: transparent;
+    --ui-critical: oklch(0.592 0.202 21.2);
+    --ui-density: 0.95;
+    --ui-dialog-radius: 0.5rem;
+    --ui-disabled-opacity: 0.65;
+    --ui-field-border-color: light-dark(
+      oklch(0.91 0.007 248),
+      oklch(0.428 0.015 248)
+    );
+    --ui-field-border-color-on-filled: var(--ui-field-border-color);
+    --ui-field-helper-font-size: 0.875rem;
+    --ui-field-helper-text-color: light-dark(
+      oklch(0.262 0.01 248 / 0.75),
+      oklch(0.91 0.007 248 / 0.75)
+    );
+    --ui-field-label-text-color: var(--ui-text);
+    --ui-field-label-font-size: 1rem;
+    --ui-field-label-font-weight: 400;
+    --ui-field-padding-inline: 0.75rem;
+    --ui-focus-ring-color: oklch(0.578 0.228 260 / 0.25);
+    --ui-focus-ring-offset: 0px;
+    --ui-focus-ring-width: 0.25rem;
+    --ui-font-body:
+      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+      "Noto Sans", "Liberation Sans", Arial, sans-serif;
+    --ui-font-size-h1: min(calc(1.375rem + 1.5vi), 2.5rem);
+    --ui-font-size-h2: min(calc(1.325rem + 0.9vi), 2rem);
+    --ui-font-size-h3: min(calc(1.3rem + 0.6vi), 1.75rem);
+    --ui-font-size-h4: min(calc(1.275rem + 0.3vi), 1.5rem);
+    --ui-font-size-h5: 1.25rem;
+    --ui-font-size-h6: 1rem;
+    --ui-font-weight-bold: 500;
+    --ui-font-weight-semibold: 700;
+    --ui-gray-chroma: 0.012;
+    --ui-gray-hue: 250;
+    --ui-info: oklch(0.775 0.1379 218);
+    --ui-letter-spacing-display: 0;
+    --ui-letter-spacing-heading: 0;
+    --ui-line-height: 1.5;
+    --ui-line-height-relaxed: 1.5;
+    --ui-neutral: oklch(0.558 0.016 245);
+    --ui-on-inverse: light-dark(oklch(1 0 0), oklch(0.262 0.01 248));
+    --ui-palette-source: oklch(0.578 0.228 260);
+    --ui-primary-source: oklch(0.578 0.228 260);
+    --ui-selected: var(--ui-primary);
+    --ui-on-selected: var(--ui-on-primary);
+    --ui-shadow-overlay: none;
+    --ui-shadow-elevated: 0 0.125rem 0.25rem oklch(0 0 0 / 0.075);
+    --ui-shadow-scroll: 0 0.125rem 0.25rem oklch(0 0 0 / 0.075);
+    --ui-shadow-selected: none;
+    --ui-success: oklch(0.552 0.1234 157);
+    --ui-surface: light-dark(oklch(1 0 0), oklch(0.262 0.01 248));
+    --ui-surface-elevated: light-dark(oklch(1 0 0), oklch(0.306 0.011 248));
+    --ui-surface-filled: light-dark(
+      oklch(0.942 0.005 248),
+      oklch(0.345 0.013 248)
+    );
+    --ui-surface-inverse: light-dark(oklch(0 0 0), oklch(1 0 0));
+    --ui-surface-tonal: light-dark(
+      oklch(0.982 0.002 249),
+      oklch(0.306 0.011 248)
+    );
+    --ui-switch-thumb-bg-color: light-dark(
+      oklch(0 0 0 / 0.25),
+      oklch(1 0 0 / 0.25)
+    );
+    --ui-switch-thumb-size: 0.75rem;
+    --ui-switch-track-bg-color: light-dark(oklch(1 0 0), oklch(0.262 0.01 248));
+    --ui-switch-track-block-size: 1rem;
+    --ui-switch-track-inline-size: 2rem;
+    --ui-text: light-dark(oklch(0.262 0.01 248), oklch(0.91 0.007 248));
+    --ui-text-strong: light-dark(oklch(0.262 0.01 248), oklch(1 0 0));
+    --ui-text-subtle: light-dark(
+      oklch(0.473 0.006 248),
+      oklch(0.765 0.007 248)
+    );
+    --ui-underline-offset: auto;
+    --ui-underline-thickness-hover: auto;
+    --ui-warning: oklch(0.844 0.17217 85);
+  }
+
+  :where(.ui-critical) {
+    --ui-palette-accent: oklch(0.592 0.202 21.2);
+    --ui-palette-border: light-dark(oklch(0.815 0.08 12), oklch(0.41 0.134 21));
+    --ui-palette-strong: light-dark(
+      oklch(0.312 0.098 19),
+      oklch(0.73 0.123 15)
+    );
+    --ui-palette-text: light-dark(oklch(0.312 0.098 19), oklch(0.73 0.123 15));
+    --ui-palette-tint-subtle: light-dark(
+      oklch(0.907 0.037 12),
+      oklch(0.207 0.055 18)
+    );
+  }
+
+  :where(.ui-info) {
+    --ui-palette-accent: oklch(0.775 0.1379 218);
+    --ui-palette-border: light-dark(
+      oklch(0.893 0.077 211),
+      oklch(0.5321 0.094 218)
+    );
+    --ui-palette-strong: light-dark(
+      oklch(0.401 0.0695 216),
+      oklch(0.846 0.1074 213)
+    );
+    --ui-palette-text: light-dark(
+      oklch(0.401 0.0695 216),
+      oklch(0.846 0.1074 213)
+    );
+    --ui-palette-tint-subtle: light-dark(
+      oklch(0.943 0.04 212),
+      oklch(0.256 0.043 216)
+    );
+  }
+
+  :where(.ui-neutral) {
+    --ui-palette-accent: oklch(0.558 0.016 245);
+    --ui-palette-border: light-dark(
+      oklch(0.83 0.006 240),
+      oklch(0.39 0.011 248)
+    );
+    --ui-palette-strong: light-dark(
+      oklch(0.302 0.008 240),
+      oklch(0.742 0.009 248)
+    );
+    --ui-palette-text: light-dark(
+      oklch(0.302 0.008 240),
+      oklch(0.742 0.009 248)
+    );
+    --ui-palette-tint-subtle: light-dark(
+      oklch(0.916 0.003 265),
+      oklch(0.204 0.004 265)
+    );
+  }
+
+  :where(.ui-success) {
+    --ui-palette-accent: oklch(0.552 0.1234 157);
+    --ui-palette-border: light-dark(
+      oklch(0.817 0.054 166),
+      oklch(0.386 0.083 157.5)
+    );
+    --ui-palette-strong: light-dark(
+      oklch(0.297 0.06 159),
+      oklch(0.726 0.082 163)
+    );
+    --ui-palette-text: light-dark(
+      oklch(0.297 0.06 159),
+      oklch(0.726 0.082 163)
+    );
+    --ui-palette-tint-subtle: light-dark(
+      oklch(0.91 0.027 167),
+      oklch(0.2 0.035 162)
+    );
+  }
+
+  :where(.ui-warning) {
+    --ui-palette-accent: oklch(0.844 0.17217 85);
+    --ui-palette-border: light-dark(
+      oklch(0.929 0.097 92),
+      oklch(0.58 0.1176 86)
+    );
+    --ui-palette-strong: light-dark(
+      oklch(0.435 0.0876 87),
+      oklch(0.898 0.1366 91)
+    );
+    --ui-palette-text: light-dark(
+      oklch(0.435 0.0876 87),
+      oklch(0.898 0.1366 91)
+    );
+    --ui-palette-tint-subtle: light-dark(
+      oklch(0.964 0.051 93),
+      oklch(0.28 0.056 91)
+    );
+  }
+
+  @media (prefers-contrast: more) {
+    :where(
+      html:not(.ui-contrast-normal),
+      html:not(.ui-contrast-normal) .ui-palette
+    ) {
+      --ui-border-color: revert-layer;
+      --ui-field-border-color: revert-layer;
+      --ui-field-helper-text-color: revert-layer;
+      --ui-focus-ring-color: revert-layer;
+      --ui-text-subtle: revert-layer;
+    }
+  }
+
+  :where(.ui-contrast-more, .ui-contrast-more .ui-palette) {
+    --ui-border-color: revert-layer;
+    --ui-field-border-color: revert-layer;
+    --ui-field-helper-text-color: revert-layer;
+    --ui-focus-ring-color: revert-layer;
+    --ui-text-subtle: revert-layer;
+  }
+}

package/themes/brutalist.css

@@ -0,0 +1,105 @@
+@layer openprops, theme, normalize, components.prose, components.root, components.extended, components.compat, utils;
+@layer theme.palette, theme.base, theme.custom, theme.severity;
+
+@layer theme.custom {
+  :where(html, .ui-palette, .ui-contrast-more) {
+    --ui-backdrop-bg-color: oklch(0 0 0 / 0.8);
+    --ui-backdrop-blur: 0px;
+    --ui-border-color: oklch(0 0 0);
+    --ui-border-color-on-filled: var(--ui-border-color);
+    --ui-radius: 5px;
+    --ui-radius-x-small: var(--ui-radius);
+    --ui-border-width: 2px;
+    --ui-control-border-color: var(--ui-border-color);
+    --ui-control-border-color-filled: var(--ui-border-color);
+    --ui-control-size-large: calc(44px * var(--ui-density));
+    --ui-control-size-small: calc(36px * var(--ui-density));
+    --ui-button-accent-filled: var(--ui-primary);
+    --ui-button-on-accent-filled: var(--ui-on-primary);
+    --ui-button-font-weight: 500;
+    --ui-button-hover: layer;
+    --ui-button-hover-shadow: none;
+    --ui-button-hover-translate: 4px 4px;
+    --ui-button-padding-inline: 1rem;
+    --ui-button-padding-inline-large: 2rem;
+    --ui-button-padding-inline-small: 0.75rem;
+    --ui-button-padding-inline-x-small: 0.5rem;
+    --ui-card-padding: 1.5rem;
+    --ui-choice-accent: var(--ui-primary);
+    --ui-choice-on-accent: var(--ui-on-primary);
+    --ui-choice-ripple-bg-color: transparent;
+    --ui-choice-size: calc(16px * var(--ui-density));
+    --ui-disabled-opacity: 0.5;
+    --ui-duration-fast: 0.15s;
+    --ui-field-bg-color: var(--ui-surface-elevated);
+    --ui-field-border-color: var(--ui-border-color);
+    --ui-field-border-color-on-filled: var(--ui-border-color);
+    --ui-field-border-width: 2px;
+    --ui-field-padding-inline: 0.75rem;
+    --ui-field-placeholder-text-color: color-mix(
+      in oklch,
+      var(--ui-text) 60%,
+      transparent
+    );
+    --ui-field-label-font-weight: 700;
+    --ui-focus-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0));
+    --ui-font-body:
+      "DM Sans", Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro,
+      sans-serif;
+    --ui-font-size-control: 0.875rem;
+    --ui-font-weight-bold: 700;
+    --ui-font-weight-normal: 500;
+    --ui-font-weight-semibold: 700;
+    --ui-gray-chroma: 0.03;
+    --ui-gray-hue: 260;
+    --ui-letter-spacing-display: 0;
+    --ui-letter-spacing-heading: 0;
+    --ui-line-height: 1.5;
+    --ui-line-height-relaxed: 1.5;
+    --ui-list-item-padding-inline: 0.5rem;
+    --ui-on-inverse: var(--ui-on-primary);
+    --ui-palette-source: oklch(0.675 0.1725 259.5);
+    --ui-primary-source: oklch(0.675 0.1725 259.5);
+    --ui-primary-text: var(--ui-text);
+    --ui-selected: var(--ui-primary);
+    --ui-on-selected: var(--ui-on-primary);
+    --ui-shadow-control: 4px 4px 0 0 oklch(0 0 0);
+    --ui-shadow-field: none;
+    --ui-shadow-overlay: var(--ui-shadow-control);
+    --ui-shadow-elevated: var(--ui-shadow-control);
+    --ui-shadow-scroll: 0 2px 0 0 oklch(0 0 0);
+    --ui-shadow-surface: var(--ui-shadow-control);
+    --ui-shadow-selected: none;
+    --ui-border-color-raised: var(--ui-border-color);
+    --ui-surface: light-dark(oklch(0.92 0.019 266), oklch(0.283 0.019 276));
+    --ui-surface-elevated: light-dark(oklch(1 0 0), oklch(0.248 0 0));
+    --ui-surface-filled: light-dark(oklch(1 0 0), oklch(0.248 0 0));
+    --ui-surface-inverse: var(--ui-primary);
+    --ui-surface-tonal: light-dark(
+      oklch(0.852 0.073 260),
+      oklch(0.34 0.04 270)
+    );
+    --ui-switch-thumb-bg-color: var(--ui-text);
+    --ui-text: light-dark(oklch(0 0 0), oklch(0.925 0 0));
+    --ui-text-strong: var(--ui-text);
+    --ui-track-bg-color: var(--ui-surface-elevated);
+    --ui-underline-thickness-hover: auto;
+  }
+
+  :where(.ui-critical, .ui-info, .ui-neutral, .ui-success, .ui-warning) {
+    --ui-palette-border: var(--ui-border-color);
+  }
+
+  @media (prefers-contrast: more) {
+    :where(
+      html:not(.ui-contrast-normal),
+      html:not(.ui-contrast-normal) .ui-palette
+    ) {
+      --ui-border-color: var(--ui-text);
+    }
+  }
+
+  :where(.ui-contrast-more, .ui-contrast-more .ui-palette) {
+    --ui-border-color: var(--ui-text);
+  }
+}