origam 2.3.0 → 2.6.1

package/dist/src/components/Audio/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamAudio", {
+  enumerable: true,
+  get: function () {
+    return _OrigamAudio.default;
+  }
+});
+var _OrigamAudio = _interopRequireDefault(require("./OrigamAudio.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Audio/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamAudio } from './OrigamAudio.vue';

package/dist/src/components/Audio/index.js

@@ -0,0 +1 @@
+export { default as OrigamAudio } from "./OrigamAudio.vue";

package/dist/src/components/Avatar/OrigamAvatar.vue

@@ -45,7 +45,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamIcon, OrigamImg } from "../../components";
 import {
   useActive,
@@ -55,13 +55,12 @@ import {
   useProps,
   useSize,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { isEmpty } from "../../utils";
 import { computed, useSlots } from "vue";
 const _props = defineProps({
-  start: { type: Boolean, required: false },
-  end: { type: Boolean, required: false },
   icon: { type: null, required: false },
   image: { type: [String, Object], required: false },
   text: { type: String, required: false },
@@ -76,8 +75,8 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   size: { type: null, required: false, default: "default" },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -104,7 +103,12 @@ const _props = defineProps({
   elevation: { type: [Number, String], required: false },
   hover: { type: [Boolean, Object], required: false },
   active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false }
+  activeClass: { type: String, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 defineEmits(["update:active", "update:hover"]);
@@ -112,6 +116,7 @@ const { filterProps } = useProps(props);
 const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
 const { activeClasses, isActive, activeState, onActive: handleClick } = useActive(props);
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles, paddingClasses, paddingStyles, marginClasses, marginStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { typographyStyles } = useTypography(props, "avatar");
 const slots = useSlots();
 const hasImage = computed(() => {
   return !isEmpty(props.image) || slots.image;
@@ -124,7 +129,7 @@ const hasText = computed(() => {
 });
 const imageProps = computed(() => {
   const imgSrc = {
-    alt: "avatar",
+    alt: typeof props.image === "object" && props.image && "alt" in props.image ? props.image.alt ?? "" : "",
     aspectRatio: 1
   };
   if (typeof props.image === "string") {
@@ -145,16 +150,13 @@ const avatarStyles = computed(() => {
     sizeStyles.value,
     colorStyles.value,
     elevationStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
 const avatarClasses = computed(() => {
   return [
     "origam-avatar",
-    {
-      "origam-avatar--start": props.start,
-      "origam-avatar--end": props.end
-    },
     colorClasses.value,
     densityClasses.value,
     roundedClasses.value,

package/dist/src/components/Avatar/OrigamAvatarGroup.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-click-outside="clickOutsideArgs"
 			:class="avatarGroupClasses"
 			:style="avatarGroupStyles"
 			role="group"
@@ -19,7 +20,6 @@
 				>
 					<origam-avatar
 							:id="`avatar-${index}`"
-							ref="origamAvatarRef"
 							class="origam-avatar-group__item"
 							v-bind="avatarProps(item)"
 					/>
@@ -32,7 +32,6 @@
 						v-bind="{rest: restItems, length: restItems.length}"
 				>
 					<origam-avatar
-							ref="origamAvatarRef"
 							class="origam-avatar-group__rest"
 							v-bind="avatarProps()"
 					>
@@ -48,9 +47,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamAvatar, OrigamDefaultsProvider } from "../../components";
 import { useActive, useDensity, useHover, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
+import { vClickOutside } from "../../directives";
 import { DIRECTION } from "../../enums";
 import { computed, mergeProps, ref } from "vue";
 const props = defineProps({
@@ -70,8 +70,8 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   size: { type: null, required: false },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -105,7 +105,12 @@ const slotDefaults = computed(() => ({
     density: props.density,
     size: props.size,
     color: props.color,
-    bgColor: props.bgColor
+    bgColor: props.bgColor,
+    rounded: props.rounded,
+    elevation: props.elevation,
+    border: props.border,
+    borderColor: props.borderColor,
+    borderStyle: props.borderStyle
   }
 }));
 defineEmits(["update:active", "update:hover"]);
@@ -132,11 +137,14 @@ const displayItems = computed(() => {
 });
 const { hoverClasses, hoverState, isHover, onMouseleave, onMouseenter } = useHover(props);
 const { activeClasses, activeState, isActive, onActive } = useActive(props);
-const origamAvatarRef = ref();
+const forwardState = (state, isOn) => {
+  return state && typeof state === "object" ? { ...state, enabled: isOn } : isOn;
+};
 const avatarProps = (item = {}) => {
-  const ignoreProps = ["margin", "marginLeft", "marginTop", "marginRight", "marginBottom", "padding", "paddingLeft", "paddingTop", "paddingRight", "paddingBottom"];
-  const avatarDefaultProps = origamAvatarRef.value?.[0]?.filterProps(props, ignoreProps) || origamAvatarRef.value?.filterProps(props, ignoreProps);
-  return mergeProps(item, avatarDefaultProps, { hover: isHover.value, active: isActive.value });
+  return mergeProps(item, {
+    hover: forwardState(props.hover, isHover.value),
+    active: forwardState(props.active, isActive.value)
+  });
 };
 const handleMouseEnter = () => {
   if (props.expandOnHover) {
@@ -156,6 +164,16 @@ const handleClick = () => {
   }
   onActive();
 };
+const handleClickOutside = () => {
+  isExpanded.value = false;
+  if (isActive.value) {
+    onActive();
+  }
+};
+const clickOutsideArgs = {
+  handler: handleClickOutside,
+  closeConditional: () => Boolean(props.expandOnClick) && isActive.value
+};
 const {
   marginClasses,
   marginStyles,

package/dist/src/components/Badge/OrigamBadge.vue

@@ -14,8 +14,10 @@
         <span
 		        v-show="modelValue"
 		        :id="id"
+		        v-contrast
 		        :aria-label="t(label, content)"
 		        :class="badgeContentClasses"
+		        :style="typographyStyles"
 		        aria-atomic="true"
 		        aria-live="polite"
 		        role="status"
@@ -60,7 +62,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamFade, OrigamIcon, OrigamTransition } from "../../components";
 import {
   useActive,
@@ -70,8 +72,10 @@ import {
   useProps,
   useStateEffect,
   useStatus,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { omit, pick } from "../../utils";
 import { computed, ComputedRef, StyleValue, useAttrs } from "vue";
 const props = defineProps({
@@ -97,8 +101,8 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   location: { type: null, required: false, default: "top right" },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
@@ -111,7 +115,12 @@ const props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const { t } = useLocale();
@@ -119,6 +128,7 @@ const attrs = useAttrs();
 const { hoverClasses, isHover, hoverState, onMouseleave: handleMouseleave, onMouseenter: handleMouseenter } = useHover(props);
 const { activeClasses, isActive, activeState } = useActive(props, "modelValue");
 const { colorClasses, colorStyles, borderClasses, borderStyles, roundedClasses, roundedStyles, elevationClasses, elevationStyles } = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { typographyStyles } = useTypography(props, "badge__badge");
 const { icon, prependIcon, appendIcon, statusClasses } = useStatus(props);
 const { locationStyles } = useLocation(props, true, (side) => {
   const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;

package/dist/src/components/Blockquote/OrigamBlockquote.vue

@@ -0,0 +1,415 @@
+<template>
+	<component
+			:is="tag"
+			:cite="cite"
+			:class="blockquoteClasses"
+			:style="blockquoteStyles"
+	>
+		<span
+				v-if="showQuoteMark"
+				class="origam-blockquote__mark origam-blockquote__mark--bg"
+				aria-hidden="true"
+		>{{ openMark }}</span>
+
+		<div class="origam-blockquote__body">
+			<slot/>
+		</div>
+
+		<footer
+				v-if="hasAttribution"
+				class="origam-blockquote__attribution"
+		>
+			<span class="origam-blockquote__dash" aria-hidden="true">— </span>
+
+			<span class="origam-blockquote__author">
+				<slot name="author">{{ author }}</slot>
+			</span>
+
+			<span
+					v-if="hasSource"
+					class="origam-blockquote__separator"
+					aria-hidden="true"
+			>, </span>
+
+			<cite
+					v-if="hasSource"
+					class="origam-blockquote__source"
+			>
+				<slot name="source">{{ source }}</slot>
+			</cite>
+		</footer>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  onMounted,
+  ref,
+  StyleValue,
+  useSlots
+} from "vue";
+import {
+  useBorder,
+  useElevation,
+  useMargin,
+  usePadding,
+  useRounded,
+  useTypography
+} from "../../composables";
+import { QUOTE_MARKS_BY_LANG } from "../../consts/Blockquote/blockquote.const";
+import { isIntent } from "../../utils";
+const props = defineProps({
+  variant: { type: String, required: false, default: "default" },
+  author: { type: String, required: false },
+  source: { type: String, required: false },
+  cite: { type: String, required: false },
+  lang: { type: String, required: false, default: "auto" },
+  align: { type: String, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "blockquote" },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
+});
+const slots = useSlots();
+const resolvedLang = ref("en");
+const lookupLangFromDOM = () => {
+  if (typeof document === "undefined") return "en";
+  const raw = (document.documentElement.lang || "").toLowerCase().trim();
+  const head = raw.split("-")[0];
+  if (head === "fr" || head === "en" || head === "es" || head === "de") return head;
+  return "en";
+};
+onMounted(() => {
+  if (props.lang === "auto") {
+    resolvedLang.value = lookupLangFromDOM();
+  } else {
+    resolvedLang.value = props.lang;
+  }
+});
+const effectiveLang = computed(() => {
+  if (props.lang === "auto") return resolvedLang.value;
+  return props.lang;
+});
+const openMark = computed(() => QUOTE_MARKS_BY_LANG[effectiveLang.value].open);
+const closeMark = computed(() => QUOTE_MARKS_BY_LANG[effectiveLang.value].close);
+const showQuoteMark = computed(() => props.variant === "quoted");
+const hasAuthor = computed(() => Boolean(slots.author) || (props.author?.length ?? 0) > 0);
+const hasSource = computed(() => Boolean(slots.source) || (props.source?.length ?? 0) > 0);
+const hasAttribution = computed(() => hasAuthor.value || hasSource.value);
+const effectiveAlign = computed(() => {
+  if (props.align) return props.align;
+  return props.variant === "pull" ? "center" : "left";
+});
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { typographyStyles } = useTypography(props, "blockquote");
+const colorIsIntent = computed(() => typeof props.color === "string" && isIntent(props.color));
+const accentIsIntent = computed(() => typeof props.bgColor === "string" && isIntent(props.bgColor));
+const customColorStyles = computed(() => {
+  const styles = {};
+  if (props.color && !colorIsIntent.value) {
+    styles["--origam-blockquote---color"] = String(props.color);
+    styles["--origam-blockquote__source---color"] = String(props.color);
+  }
+  if (props.bgColor && !accentIsIntent.value) {
+    const accent = String(props.bgColor);
+    styles["--origam-blockquote---resolved-accent-color"] = accent;
+    styles["--origam-blockquote---resolved-quote-mark-color"] = accent;
+    styles["--origam-blockquote---resolved-author-color"] = accent;
+  }
+  return styles;
+});
+const blockquoteClasses = computed(() => {
+  return [
+    "origam-blockquote",
+    `origam-blockquote--variant-${props.variant}`,
+    `origam-blockquote--align-${effectiveAlign.value}`,
+    {
+      [`origam-blockquote--color-${props.color}`]: colorIsIntent.value,
+      [`origam-blockquote--accent-${props.bgColor}`]: accentIsIntent.value,
+      "origam-blockquote--has-attribution": hasAttribution.value
+    },
+    roundedClasses.value,
+    elevationClasses.value,
+    borderClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
+});
+const blockquoteStyles = computed(() => {
+  return [
+    roundedStyles.value,
+    borderStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    typographyStyles.value,
+    customColorStyles.value,
+    props.style
+  ];
+});
+defineExpose({
+  effectiveLang,
+  effectiveAlign,
+  openMark,
+  closeMark,
+  showQuoteMark,
+  hasAttribution
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-blockquote {
+		--origam-blockquote---resolved-padding-block: var(--origam-blockquote---padding-block, 16px);
+		--origam-blockquote---resolved-padding-inline: var(--origam-blockquote---padding-inline, 24px);
+		--origam-blockquote---resolved-font-family: var(--origam-blockquote---font-family, Inter, system-ui, sans-serif);
+		--origam-blockquote---resolved-font-size: var(--origam-blockquote---font-size, 1rem);
+		--origam-blockquote---resolved-font-style: var(--origam-blockquote---font-style, normal);
+		--origam-blockquote---resolved-font-weight: var(--origam-blockquote---font-weight, 400);
+		--origam-blockquote---resolved-line-height: var(--origam-blockquote---line-height, 1.625);
+		--origam-blockquote---resolved-accent-color: var(--origam-blockquote__accent---color, var(--origam-color__action--primary---bg, #7c3aed));
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-blockquote---quote-mark-color, var(--origam-color__action--primary---bg, #7c3aed));
+		--origam-blockquote---resolved-author-color: var(--origam-blockquote__author---color, var(--origam-color__text---secondary, #525252));
+
+		position: relative;
+		margin: 0;
+		padding-block: var(--origam-blockquote---resolved-padding-block);
+		padding-inline: var(--origam-blockquote---resolved-padding-inline);
+		font-family: var(--origam-blockquote---resolved-font-family);
+		font-size: var(--origam-blockquote---resolved-font-size);
+		font-style: var(--origam-blockquote---resolved-font-style);
+		font-weight: var(--origam-blockquote---resolved-font-weight);
+		line-height: var(--origam-blockquote---resolved-line-height);
+		color: var(--origam-blockquote---color, var(--origam-color__text---primary, #171717));
+		box-sizing: border-box;
+	}
+
+	.origam-blockquote__body {
+		display: block;
+	}
+
+	.origam-blockquote__attribution {
+		display: block;
+		margin-top: var(--origam-blockquote__author---margin-top, 12px);
+		font-size: var(--origam-blockquote__author---font-size, 0.875rem);
+		font-style: var(--origam-blockquote__author---font-style, normal);
+		font-weight: var(--origam-blockquote__author---font-weight, 500);
+		color: var(--origam-blockquote---resolved-author-color);
+	}
+
+	.origam-blockquote__author {
+		font-style: inherit;
+	}
+
+	.origam-blockquote__source {
+		color: var(--origam-blockquote__source---color, var(--origam-color__text---secondary, #525252));
+		font-size: var(--origam-blockquote__source---font-size, 0.875rem);
+		font-style: var(--origam-blockquote__source---font-style, italic);
+	}
+
+	.origam-blockquote__mark {
+		font-family: serif;
+		user-select: none;
+		color: var(--origam-blockquote---resolved-quote-mark-color);
+	}
+
+	.origam-blockquote__mark--bg {
+		position: absolute;
+		top: var(--origam-blockquote--quoted---glyph-offset-top, -0.1em);
+		left: var(--origam-blockquote--quoted---glyph-offset-left, -0.05em);
+		z-index: 0;
+		font-size: var(--origam-blockquote--quoted---glyph-size, 8rem);
+		line-height: 1;
+		opacity: var(--origam-blockquote--quoted---glyph-opacity, 0.08);
+		pointer-events: none;
+	}
+
+	.origam-blockquote--align-left {
+		text-align: left;
+	}
+
+	.origam-blockquote--align-center {
+		text-align: center;
+	}
+
+	.origam-blockquote--align-right {
+		text-align: right;
+	}
+
+	.origam-blockquote--variant-default {
+		border-inline-start: var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color);
+		padding-inline-start: calc(var(--origam-blockquote---resolved-padding-inline) + var(--origam-blockquote__accent---width, 4px));
+	}
+
+	.origam-blockquote--variant-elegant {
+		font-family: var(--origam-blockquote__elegant---font-family, Georgia, 'Times New Roman', serif);
+		font-size: var(--origam-blockquote__elegant---font-size, 1.125rem);
+		font-style: var(--origam-blockquote__elegant---font-style, italic);
+		line-height: var(--origam-blockquote__elegant---line-height, 2);
+		padding-block: var(--origam-blockquote__elegant---padding-block, 24px);
+		border-inline-start: var(--origam-blockquote__accent---width, 4px) solid var(--origam-blockquote---resolved-accent-color);
+		padding-inline-start: calc(var(--origam-blockquote---resolved-padding-inline) + var(--origam-blockquote__accent---width, 4px));
+	}
+
+	.origam-blockquote--variant-quoted {
+		padding-top: calc(var(--origam-blockquote---resolved-padding-block) + var(--origam-blockquote--quoted---glyph-padding-extra, 1rem));
+
+		.origam-blockquote__body {
+			position: relative;
+			z-index: 1;
+		}
+
+		.origam-blockquote__attribution {
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	.origam-blockquote--variant-minimal {
+		font-size: var(--origam-blockquote__minimal---font-size, 0.875rem);
+		font-style: var(--origam-blockquote__minimal---font-style, italic);
+		padding-inline: var(--origam-blockquote__minimal---padding-inline, 12px);
+		padding-block: 0;
+		border-inline-start: var(--origam-blockquote--minimal---accent-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+		padding-inline-start: calc(var(--origam-blockquote__minimal---padding-inline, 12px) + var(--origam-blockquote--minimal---accent-width, 2px));
+	}
+
+	.origam-blockquote--variant-pull {
+		font-family: var(--origam-blockquote__pull---font-family, Georgia, 'Times New Roman', serif);
+		font-size: var(--origam-blockquote__pull---font-size, 1.5rem);
+		font-weight: var(--origam-blockquote__pull---font-weight, 500);
+		line-height: var(--origam-blockquote__pull---line-height, 1.375);
+		padding-block: var(--origam-blockquote__pull---padding-block, 24px);
+		padding-inline: var(--origam-blockquote---resolved-padding-inline);
+		border-block-start: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+		border-block-end: var(--origam-blockquote__pull---rule-width, 2px) solid var(--origam-blockquote---resolved-accent-color);
+	}
+
+	.origam-blockquote--accent-primary {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__action--primary---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__action--primary---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__action--primary---fgSubtle);
+	}
+
+	.origam-blockquote--accent-secondary {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__action--secondary---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__action--secondary---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__action--secondary---fgSubtle);
+	}
+
+	.origam-blockquote--accent-success {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--success---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--success---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--success---fgSubtle);
+	}
+
+	.origam-blockquote--accent-warning {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--warning---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--warning---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--warning---fgSubtle);
+	}
+
+	.origam-blockquote--accent-danger {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--danger---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--danger---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--danger---fgSubtle);
+	}
+
+	.origam-blockquote--accent-info {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__feedback--info---bg);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__feedback--info---bg);
+		--origam-blockquote---resolved-author-color: var(--origam-color__feedback--info---fgSubtle);
+	}
+
+	.origam-blockquote--accent-neutral {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__text---primary);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__text---primary);
+		--origam-blockquote---resolved-author-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-blockquote--accent-ghost {
+		--origam-blockquote---resolved-accent-color: var(--origam-color__border---subtle);
+		--origam-blockquote---resolved-quote-mark-color: var(--origam-color__text---secondary);
+		--origam-blockquote---resolved-author-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-blockquote--color-primary {
+		--origam-blockquote---color: var(--origam-color__action--primary---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__action--primary---fgSubtle);
+	}
+
+	.origam-blockquote--color-secondary {
+		--origam-blockquote---color: var(--origam-color__action--secondary---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__action--secondary---fgSubtle);
+	}
+
+	.origam-blockquote--color-success {
+		--origam-blockquote---color: var(--origam-color__feedback--success---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--success---fgSubtle);
+	}
+
+	.origam-blockquote--color-warning {
+		--origam-blockquote---color: var(--origam-color__feedback--warning---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--warning---fgSubtle);
+	}
+
+	.origam-blockquote--color-danger {
+		--origam-blockquote---color: var(--origam-color__feedback--danger---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--danger---fgSubtle);
+	}
+
+	.origam-blockquote--color-info {
+		--origam-blockquote---color: var(--origam-color__feedback--info---fgSubtle);
+		--origam-blockquote__source---color: var(--origam-color__feedback--info---fgSubtle);
+	}
+
+	.origam-blockquote--color-neutral {
+		--origam-blockquote---color: var(--origam-color__text---primary);
+		--origam-blockquote__source---color: var(--origam-color__text---secondary);
+	}
+
+	.origam-blockquote--color-ghost {
+		--origam-blockquote---color: var(--origam-color__action--ghost---fg);
+		--origam-blockquote__source---color: var(--origam-color__action--ghost---fg);
+	}
+</style>