origam 2.3.0 → 2.6.1

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -18,7 +18,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamDefaultsProvider } from "../../components";
 import {
@@ -45,8 +45,8 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, 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 },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },

package/dist/src/components/TextField/OrigamTextField.vue

@@ -89,6 +89,8 @@
 									:name="name"
 									:placeholder="placeholder"
 									:readonly="isReadonly"
+									:required="required || undefined"
+									:aria-required="required ? 'true' : undefined"
 									:size="1"
 									:type="resolvedInputType"
 									:value="displayValue"
@@ -182,7 +184,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, toRef, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
 import {
@@ -214,7 +216,7 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -229,10 +231,12 @@ const _props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -271,6 +275,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { 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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },

package/dist/src/components/TextMask/OrigamTextMask.vue

@@ -0,0 +1,147 @@
+<template>
+	<component
+			:is="tag"
+			:class="textMaskClasses"
+			:style="textMaskStyles"
+			data-cy="origam-text-mask"
+	>
+		<slot v-if="hasSlot"/>
+		<template v-else>{{ text }}</template>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  useSlots
+} from "vue";
+import { resolveGradient } from "../../utils/Commons/gradient.util";
+import { useTypography } from "../../composables";
+const props = defineProps({
+  text: { type: String, required: false },
+  background: { type: [String, Object], required: true },
+  animated: { type: Boolean, required: false, default: false },
+  animationDuration: { type: String, required: false, default: "3s" },
+  animationType: { type: String, required: false, default: "pan" },
+  align: { type: String, required: false, default: "left" },
+  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: "span" },
+  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 resolvedBackground = computed(() => {
+  const fromGradient = resolveGradient(props.background);
+  if (fromGradient) return fromGradient;
+  return typeof props.background === "string" ? props.background : "";
+});
+const { typographyStyles } = useTypography(props, "text-mask");
+const hasSlot = computed(() => Boolean(slots.default));
+const textMaskClasses = computed(() => {
+  return [
+    "origam-text-mask",
+    `origam-text-mask--align-${props.align}`,
+    `origam-text-mask--${props.animationType}`,
+    {
+      "origam-text-mask--animated": props.animated
+    },
+    props.class
+  ];
+});
+const textMaskStyles = computed(() => {
+  return [
+    {
+      "--origam-text-mask---bg": resolvedBackground.value,
+      "--origam-text-mask---duration": props.animationDuration
+    },
+    typographyStyles.value,
+    props.style
+  ];
+});
+defineExpose({
+  resolvedBackground,
+  hasSlot
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-text-mask {
+		display: inline-block;
+		background-image: var(--origam-text-mask---bg);
+		background-repeat: no-repeat;
+		background-position: 0% 50%;
+		background-size: cover;
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+		color: transparent;
+		font-size:      var(--origam-text-mask---font-size, var(--origam-text-mask---font-size-default));
+		font-weight:    var(--origam-text-mask---font-weight, var(--origam-text-mask---font-weight-default));
+		font-family:    var(--origam-text-mask---font-family, inherit);
+		line-height:    var(--origam-text-mask---line-height, var(--origam-text-mask---line-height-default));
+		letter-spacing: var(--origam-text-mask---letter-spacing, normal);
+	}
+
+	.origam-text-mask--align-left {
+		text-align: left;
+	}
+
+	.origam-text-mask--align-center {
+		text-align: center;
+	}
+
+	.origam-text-mask--align-right {
+		text-align: right;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--pan {
+		background-size: 200% 100%;
+		animation: origam-text-mask-pan var(--origam-text-mask---duration) linear infinite;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--rotate {
+		animation: origam-text-mask-rotate var(--origam-text-mask---duration) linear infinite;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--pulse {
+		animation: origam-text-mask-pulse var(--origam-text-mask---duration) ease-in-out infinite;
+	}
+
+	.origam-text-mask--animated.origam-text-mask--zoom {
+		background-size: 200% 200%;
+		animation: origam-text-mask-zoom var(--origam-text-mask---duration) ease-in-out infinite alternate;
+	}
+
+	@keyframes origam-text-mask-pan {
+		0%   { background-position: 0% 50%; }
+		100% { background-position: 100% 50%; }
+	}
+
+	@keyframes origam-text-mask-rotate {
+		0%   { filter: hue-rotate(0deg); }
+		100% { filter: hue-rotate(360deg); }
+	}
+
+	@keyframes origam-text-mask-pulse {
+		0%, 100% { background-size: 100% 100%; }
+		50%      { background-size: 140% 140%; }
+	}
+
+	@keyframes origam-text-mask-zoom {
+		0%   { background-size: 100% 100%; }
+		100% { background-size: 220% 220%; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-text-mask--animated {
+			animation: none !important;
+			background-size: cover;
+			filter: none;
+		}
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/TextareaField/OrigamRichToolbar.vue

@@ -10,12 +10,14 @@
 				v-for="item in items"
 				:key="item"
 		>
-			<button
+			<origam-btn
 					v-if="!isLink(item)"
-					type="button"
+					variant="text"
+					:icon="true"
 					class="origam-rich-toolbar__btn"
 					:class="btnClassFor(item)"
 					:disabled="disabled || undefined"
+					:active="isActive(item)"
 					:aria-label="labelFor(item)"
 					:aria-pressed="isActive(item) ? 'true' : 'false'"
 					:data-command="item"
@@ -24,16 +26,18 @@
 					@click="emit('format', item)"
 			>
 				<origam-icon :name="iconFor(item)"/>
-			</button>
+			</origam-btn>
 			<div
 					v-else
 					class="origam-rich-toolbar__link-host"
 			>
-				<button
-						type="button"
+				<origam-btn
+						variant="text"
+						:icon="true"
 						class="origam-rich-toolbar__btn"
 						:class="btnClassFor(item)"
 						:disabled="disabled || undefined"
+						:active="isActive(item)"
 						:aria-label="labelFor(item)"
 						:aria-pressed="isActive(item) ? 'true' : 'false'"
 						:aria-expanded="linkPopoverOpen ? 'true' : 'false'"
@@ -43,7 +47,7 @@
 						@click="openLinkPopover"
 				>
 					<origam-icon :name="iconFor(item)"/>
-				</button>
+				</origam-btn>
 				<div
 						v-if="linkPopoverOpen"
 						class="origam-rich-toolbar__link-popover"
@@ -60,8 +64,8 @@
 							@keydown.enter.prevent="applyLink"
 							@keydown.escape.prevent="closeLinkPopover"
 					>
-					<button
-							type="button"
+					<origam-btn
+							variant="text"
 							class="origam-rich-toolbar__btn origam-rich-toolbar__link-apply"
 							:aria-label="linkApplyLabel"
 							data-cy="origam-rich-toolbar-link-apply"
@@ -69,16 +73,16 @@
 							@click="applyLink"
 					>
 						{{ linkApplyLabel }}
-					</button>
+					</origam-btn>
 				</div>
 			</div>
 		</template>
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref } from "vue";
-import { OrigamIcon } from "../../components";
+import { OrigamBtn, OrigamIcon } from "../../components";
 import { useLocale } from "../../composables";
 import { MDI_ICONS, TEXTAREA_TOOLBAR_COMMAND, TEXTAREA_TOOLBAR_POSITION } from "../../enums";
 const props = defineProps({

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -97,6 +97,7 @@
 							<div
 									ref="richHostRef"
 									class="origam-textarea-field__rich"
+									:style="typographyStyles"
 									role="textbox"
 									aria-multiline="true"
 									:aria-disabled="isDisabled || undefined"
@@ -136,6 +137,8 @@
 								:name="name"
 								:placeholder="placeholder"
 								:readonly="isReadonly"
+								:required="required || undefined"
+								:aria-required="required ? 'true' : undefined"
 								:rows="rows"
 								:value="model"
 								v-bind="{ ...fieldSlotProps, ...inputAttrs }"
@@ -246,7 +249,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   nextTick,
@@ -272,6 +275,7 @@ import {
   useProps,
   useStyle,
   useTextareaRich,
+  useTypography,
   useVModel
 } from "../../composables";
 import { DEFAULT_TOOLBAR } from "../../consts";
@@ -307,7 +311,7 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
@@ -319,10 +323,12 @@ const _props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -361,6 +367,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { 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 },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -655,6 +666,7 @@ const textareaFieldFieldStyles = computed(() => {
     "--origam-textarea-field__control---height": convertToUnit(controlHeight.value)
   };
 });
+const { typographyStyles } = useTypography(props, "textarea-field__rich-content");
 const { filterProps } = useProps(props);
 const { id, css, load, isLoaded, unload } = useStyle(textareaFieldStyles);
 defineExpose(forwardRefs({

package/dist/src/components/ThemeProvider/OrigamThemeProvider.vue

@@ -3,20 +3,23 @@
 			:is="tag"
 			:class="themeProviderClasses"
 			:data-theme="dataTheme"
+			:data-mode="dataMode"
 	>
 		<slot/>
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, useAttrs } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   theme: { type: [String, Object], required: false, default: "auto" },
+  mode: { type: String, required: false, default: "auto" },
   tag: { type: String, required: false, default: "div" }
 });
 const attrs = useAttrs();
 const dataTheme = computed(() => props.theme === "auto" ? void 0 : props.theme);
+const dataMode = computed(() => props.mode === "auto" ? void 0 : props.mode);
 const themeProviderClasses = computed(() => {
   return ["origam-theme-provider", attrs.class];
 });

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -19,7 +19,7 @@
 					:description="entry.description"
 					:icon="entry.icon"
 					:intent="entry.intent"
-					:is-last="index === items!.length - 1"
+					:is-last="index === (items?.length ?? 0) - 1"
 					:truncate-line="truncateLine ?? false"
 					:side="side ?? 'start'"
 					:orientation="orientation"
@@ -38,7 +38,7 @@
 				:description="entry.description"
 				:icon="entry.icon"
 				:intent="entry.intent"
-				:is-last="index === items!.length - 1"
+				:is-last="index === (items?.length ?? 0) - 1"
 				:truncate-line="truncateLine ?? false"
 				:side="side ?? 'start'"
 				:orientation="orientation"
@@ -49,7 +49,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide } from "vue";
 import { OrigamTimelineItem } from "../../components";
 import {
@@ -69,7 +69,7 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false },
   density: { type: null, required: false }
 });

package/dist/src/components/Timeline/OrigamTimelineItem.vue

@@ -40,7 +40,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject } from "vue";
 import { OrigamIcon } from "../../components";
 import {
@@ -63,7 +63,9 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  density: { type: null, required: false },
+  size: { type: null, required: false },
   description: { type: String, required: false, default: void 0 }
 });
 const timelineCtx = inject(TIMELINE_CONTEXT_KEY, null);

package/dist/src/components/Title/OrigamTitle.vue

@@ -1,6 +1,8 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
+			v-contrast
 			:class="titleClasses"
 			:style="titleStyles"
 	>
@@ -13,7 +15,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
 import {
   useBorder,
@@ -22,16 +24,18 @@ import {
   useMargin,
   usePadding,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   text: { type: String, required: false },
   tag: { type: String, required: false, default: "h1" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  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 },
   density: { type: null, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -55,7 +59,12 @@ const props = defineProps({
   borderBlock: { type: [Boolean, Number, String], required: false },
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false }
+  borderStyle: { 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 { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -64,6 +73,7 @@ const slots = useSlots();
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
+const { typographyStyles } = useTypography(props, "title");
 const hasContent = computed(() => {
   return slots.default || props.text;
 });
@@ -73,6 +83,7 @@ const titleStyles = computed(() => {
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });
@@ -87,11 +98,11 @@ const titleClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(titleStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(titleStyles);
 defineExpose({
   filterProps,
   css,
-  id,
+  id: styleId,
   load,
   unload,
   isLoaded
@@ -102,6 +113,7 @@ defineExpose({
 	.origam-title {
 		color:          var(--origam-title---color);
 		font-family:    var(--origam-title---font-family);
+		font-size:      var(--origam-title---font-size);
 		font-weight:    var(--origam-title---font-weight);
 		letter-spacing: var(--origam-title---letter-spacing);
 		line-height:    var(--origam-title---line-height);
@@ -109,15 +121,15 @@ defineExpose({
 		margin-block-end:   var(--origam-title---margin-block-end);
 
 		&--density-compact {
-			font-size: var(--origam-title---font-size-xs);
+			font-size: var(--origam-title---font-size, var(--origam-title---font-size-xs));
 		}
 
 		&--density-default {
-			font-size: var(--origam-title---font-size-md);
+			font-size: var(--origam-title---font-size, var(--origam-title---font-size-md));
 		}
 
 		&--density-comfortable {
-			font-size: var(--origam-title---font-size-xl);
+			font-size: var(--origam-title---font-size, var(--origam-title---font-size-xl));
 		}
 	}
 </style>

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -2,6 +2,7 @@
 	<component
 			:is="tag"
 			:id="id"
+			v-contrast
 			:class="barClasses"
 	>
 		<slot name="default">
@@ -14,6 +15,7 @@
 				</div>
 				<div
 						v-if="hasTitle"
+						:style="typographyStyles"
 						class="origam-toolbar__title"
 				>
 					<slot name="title">
@@ -34,12 +36,11 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, toRef, useSlots } from "vue";
 import { OrigamTitle } from "../../components";
 import {
   useActive,
-  useBothColor,
   useDensity,
   useDimension,
   useHover,
@@ -47,8 +48,10 @@ import {
   useProps,
   useRtl,
   useStateEffect,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { DENSITY } from "../../enums";
 const props = defineProps({
   collapse: { type: Boolean, required: false },
@@ -76,8 +79,8 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  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 +108,12 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], 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 slots = useSlots();
@@ -122,6 +130,8 @@ const { rtlClasses } = useRtl();
 const { isHover, hoverState } = useHover(props);
 const { isActive, activeState } = useActive(props);
 const {
+  colorClasses,
+  colorStyles,
   borderClasses,
   borderStyles,
   roundedClasses,
@@ -133,10 +143,10 @@ const {
   marginClasses,
   marginStyles
 } = useStateEffect(props, isHover, isActive, hoverState, activeState, void 0, toRef(props, "flat"));
-const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { densityClasses } = useDensity(props);
 const { dimensionStyles } = useDimension(props);
 const { positionStyles, positionClasses } = usePosition(props);
+const { typographyStyles } = useTypography(props, "toolbar__title");
 const barStyles = computed(() => {
   return [
     colorStyles.value,
@@ -247,6 +257,8 @@ defineExpose({
 		border-end-start-radius: var(--origam-toolbar---border-end-start-radius, 0);
 
 		background: var(--origam-toolbar---background);
+		backdrop-filter: var(--origam-appbar---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-appbar---backdrop-filter, none);
 		box-shadow: var(--origam-toolbar---box-shadow);
 		color: var(--origam-toolbar---color);