@uzum-tech/ui 0.1.2 → 1.0.0

package/es/collapse/src/Collapse.d.ts

@@ -1,6 +1,6 @@
 import { type PropType, type Ref, type ExtractPropTypes, type Slots } from 'vue';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
-import type { OnItemHeaderClick, OnUpdateExpandedNames } from './interface';
+import type { OnItemHeaderClick, OnUpdateExpandedNames, ArrowPlacement } from './interface';
 export declare const collapseProps: {
     readonly defaultExpandedNames: {
         readonly type: PropType<string | number | (string | number)[] | null>;
@@ -8,7 +8,7 @@ export declare const collapseProps: {
     };
     readonly expandedNames: PropType<string | number | (string | number)[] | null>;
     readonly arrowPlacement: {
-        readonly type: PropType<"left" | "right">;
+        readonly type: PropType<ArrowPlacement>;
         readonly default: "left";
     };
     readonly accordion: {
@@ -29,12 +29,15 @@ export declare const collapseProps: {
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -42,12 +45,15 @@ export declare const collapseProps: {
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -55,12 +61,15 @@ export declare const collapseProps: {
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -83,7 +92,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly expandedNames: PropType<string | number | (string | number)[] | null>;
     readonly arrowPlacement: {
-        readonly type: PropType<"left" | "right">;
+        readonly type: PropType<ArrowPlacement>;
         readonly default: "left";
     };
     readonly accordion: {
@@ -104,12 +113,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -117,12 +129,15 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -130,12 +145,15 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -145,134 +163,126 @@ declare const _default: import("vue").DefineComponent<{
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            tertiaryColor: string;
-            tertiaryColorHover: string;
-            tertiaryColorActive: string;
-            tertiaryColorSuppl: string;
-            tertiaryElements: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textTertiary: string;
-            boxShadowHover: string;
-            boxShadowFocus: string;
-            boxShadowHoverChecked: string;
-            boxShadowFocusChecked: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            borderTagColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
             scrollbarColor: string;
             scrollbarColorHover: string;
             scrollbarWidth: string;
             scrollbarHeight: string;
             scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            avatarTextColor: string;
-            avatarIconColor: string;
-            invertedColor: string;
-            tooltipColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
             opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
+            brandPrimary50: string;
+            brandPrimary100: string;
+            brandPrimary200: string;
+            brandPrimary300: string;
+            brandPrimary400: string;
+            brandPrimary500: string;
+            brandPrimary550: string;
+            brandPrimary600: string;
+            brandSecondary500: string;
+            brandSecondary300: string;
+            brandSecondary600: string;
+            brandTertiary500: string;
+            brandTertiary300: string;
+            brandTertiary600: string;
+            brandQuaternary500: string;
+            brandQuaternary300: string;
+            brandQuaternary600: string;
+            brandQuinary500: string;
+            brandQuinary300: string;
+            brandQuinary600: string;
+            brandQuinary100: string;
+            surfacePrimary: string;
+            surfaceSecondary: string;
+            containerPrimary: string;
+            containerSecondary: string;
+            textPrimary: string;
+            textSecondary: string;
+            textTertiary: string;
+            textQuaternary: string;
+            textBrand: string;
+            elementsPrimary: string;
+            elementsSecondary: string;
+            elementsTertiary: string;
+            elementsQuaternary: string;
+            elementsQuinary: string;
+            elementsDarkQuinary: string;
+            elementsSenary: string;
+            elementsOnContainer: string;
+            transparencyPrimary: string;
+            transparencySecondary: string;
+            transparencyTertiary: string;
+            transparencyQuinary: string;
+            transparencyModal: string;
+            staticBlack: string;
+            staticDarkGrey: string;
+            staticWhite: string;
+            staticRed: string;
+            staticOrange: string;
+            staticGreen: string;
+            staticErrorAccent: string;
+            shadowDepth2: string;
             fontFamily: string;
             fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
             cubicBezierEaseInOut: string;
             cubicBezierEaseOut: string;
             cubicBezierEaseIn: string;
-            borderWidth: number;
-            borderTagWidth: number;
+            borderRadiusLarge: string;
             borderRadius: string;
+            borderRadiusMedium: string;
             borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
+            borderRadiusTiny: string;
             heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
             heightHuge: string;
+            fontDisplayLarge: string;
+            fontDisplaySmall: string;
+            fontHeadingLarge: string;
+            fontHeadingMedium: string;
+            fontHeadingSmall: string;
+            fontTitleLarge: string;
+            fontTitleMedium: string;
+            fontTitleSmall: string;
+            fontBodyLarge: string;
+            fontBodyMedium: string;
+            fontBodySmall: string;
+            lineHeightDisplayLarge: string;
+            lineHeightDisplaySmall: string;
+            lineHeightHeadingLarge: string;
+            lineHeightHeadingMedium: string;
+            lineHeightHeadingSmall: string;
+            lineHeightTitleLarge: string;
+            lineHeightTitleMedium: string;
+            lineHeightTitleSmall: string;
+            lineHeightBodyLarge: string;
+            lineHeightBodyMedium: string;
+            lineHeightBodySmall: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            fontWeightBold: string;
+            iconSmall: string;
+            iconMedium: string;
+            iconLarge: string;
+            iconHuge: string;
+            closeSmall: string;
+            closeMedium: string;
+            closeLarge: string;
+            closeHuge: string;
+            closeBorderRadius: string;
             name: "common";
         };
         self: {
             titleFontSize: string;
+            titleLineHeight: string;
             titleFontWeight: string;
             dividerColor: string;
             titleTextColor: string;
             titleTextColorDisabled: string;
             fontSize: string;
+            lineHeight: string;
             textColor: string;
+            arrowSize: string;
             arrowColor: string;
             arrowColorDisabled: string;
             itemMargin: string;
@@ -288,12 +298,15 @@ declare const _default: import("vue").DefineComponent<{
         '--u-font-size': string;
         '--u-bezier': string;
         '--u-text-color': string;
+        '--u-line-height': string;
         '--u-divider-color': string;
         '--u-title-padding': string;
         '--u-title-font-size': string;
         '--u-title-text-color': string;
+        '--u-title-line-height': string;
         '--u-title-text-color-disabled': string;
         '--u-title-font-weight': string;
+        '--u-arrow-size': string;
         '--u-arrow-color': string;
         '--u-arrow-color-disabled': string;
         '--u-item-margin': string;
@@ -307,7 +320,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly expandedNames: PropType<string | number | (string | number)[] | null>;
     readonly arrowPlacement: {
-        readonly type: PropType<"left" | "right">;
+        readonly type: PropType<ArrowPlacement>;
         readonly default: "left";
     };
     readonly accordion: {
@@ -328,12 +341,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -341,12 +357,15 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -354,12 +373,15 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
+        titleLineHeight: string;
         titleFontWeight: string;
         dividerColor: string;
         titleTextColor: string;
         titleTextColorDisabled: string;
         fontSize: string;
+        lineHeight: string;
         textColor: string;
+        arrowSize: string;
         arrowColor: string;
         arrowColorDisabled: string;
         itemMargin: string;
@@ -368,7 +390,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly displayDirective: "show" | "if";
     readonly defaultExpandedNames: string | number | (string | number)[] | null;
-    readonly arrowPlacement: "left" | "right";
+    readonly arrowPlacement: ArrowPlacement;
     readonly accordion: boolean;
     readonly onExpandedNamesChange: MaybeArray<OnUpdateExpandedNames> | undefined;
 }, {}>;

package/es/collapse/src/Collapse.js

@@ -101,17 +101,20 @@ export default defineComponent({
         });
         const rtlEnabledRef = useRtl('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, itemMargin } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titlePadding, titleTextColor, titleTextColorDisabled, textColor, arrowColor, fontSize, titleFontSize, arrowColorDisabled, itemMargin, lineHeight, titleLineHeight, arrowSize } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-text-color': textColor,
+                '--u-line-height': lineHeight,
                 '--u-divider-color': dividerColor,
                 '--u-title-padding': titlePadding,
                 '--u-title-font-size': titleFontSize,
                 '--u-title-text-color': titleTextColor,
+                '--u-title-line-height': titleLineHeight,
                 '--u-title-text-color-disabled': titleTextColorDisabled,
                 '--u-title-font-weight': titleFontWeight,
+                '--u-arrow-size': arrowSize,
                 '--u-arrow-color': arrowColor,
                 '--u-arrow-color-disabled': arrowColorDisabled,
                 '--u-item-margin': itemMargin

package/es/collapse/src/CollapseItem.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
+import { ArrowPlacement } from './interface';
 export declare const collapseItemProps: {
     readonly title: StringConstructor;
     readonly name: PropType<string | number>;
@@ -21,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").Ref<string>;
     collapsed: import("vue").ComputedRef<boolean>;
     mergedDisplayDirective: import("vue").ComputedRef<"show" | "if">;
-    arrowPlacement: import("vue").ComputedRef<"left" | "right">;
+    arrowPlacement: import("vue").ComputedRef<ArrowPlacement>;
     handleClick(e: MouseEvent): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly title: StringConstructor;

package/es/collapse/src/CollapseItem.js

@@ -72,6 +72,14 @@ export default defineComponent({
         const headerNode = resolveSlotWithProps($slots.header, { collapsed }, () => [this.title]);
         const headerExtraSlot = $slots['header-extra'] || collapseSlots['header-extra'];
         const arrowSlot = $slots.arrow || collapseSlots.arrow;
+        const arrowNode = (h("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, resolveSlotWithProps(arrowSlot, { collapsed }, () => {
+            var _a;
+            return [
+                h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                    default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? h(ArrowLeftIcon, null) : h(ArrowRightIcon, null))
+                })
+            ];
+        })));
         return (h("div", { class: [
                 `${mergedClsPrefix}-collapse-item`,
                 `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
@@ -83,17 +91,10 @@ export default defineComponent({
                     !collapsed && `${mergedClsPrefix}-collapse-item__header--active`
                 ] },
                 h("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, onClick: this.handleClick },
-                    arrowPlacement === 'right' && headerNode,
-                    h("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, resolveSlotWithProps(arrowSlot, { collapsed }, () => {
-                        var _a;
-                        return [
-                            h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                                default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? (h(ArrowLeftIcon, null)) : (h(ArrowRightIcon, null)))
-                            })
-                        ];
-                    })),
-                    arrowPlacement === 'left' && headerNode),
-                resolveWrappedSlotWithProps(headerExtraSlot, { collapsed }, (children) => (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, children)))),
+                    arrowPlacement !== 'right-edge' && arrowNode,
+                    headerNode),
+                resolveWrappedSlotWithProps(headerExtraSlot, { collapsed }, (children) => (h("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, children))),
+                arrowPlacement === 'right-edge' && arrowNode),
             h(UCollapseItemContent, { clsPrefix: mergedClsPrefix, displayDirective: mergedDisplayDirective, show: !collapsed }, $slots)));
     }
 });

package/es/collapse/src/interface.d.ts

@@ -7,3 +7,4 @@ export interface HeaderClickInfo<T> {
     expanded: boolean;
     event: MouseEvent;
 }
+export type ArrowPlacement = 'left' | 'right' | 'right-edge';

package/es/collapse/src/styles/index.cssr.js

@@ -15,6 +15,7 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-
 // --u-item-margin
 export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
  color: var(--u-text-color);
  transition:
  color .3s var(--u-bezier),
@@ -24,10 +25,14 @@ export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  color: var(--u-title-text-color-disabled);
  `), cB('collapse-item-arrow', `
  color: var(--u-arrow-color-disabled);
- `)])]), cB('collapse-item', 'margin-left: 32px;'), c('&:first-child', 'margin-top: 0;'), c('&:first-child >', [cE('header', 'padding-top: 0;')]), cM('left-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-right: 4px;')])]), cM('right-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-left: 4px;')])]), cE('content-wrapper', [cE('content-inner', 'padding-top: 16px;'), fadeInHeightExpandTransition({
+ `)])]), cB('collapse-item', 'margin-left: 32px;'), c('&:first-child', 'margin-top: 0;'), c('&:first-child >', [cE('header', 'padding-top: 0;')]), cM('left-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-right: 4px;')])]), cM('right-arrow-placement', [cE('header', [cB('collapse-item-arrow', `
+ margin-left: 4px;
+ order: 1;
+ `)])]), cM('right-edge-arrow-placement', [cE('header', [cB('collapse-item-arrow', 'margin-left: auto;')])]), cE('content-wrapper', [cE('content-inner', 'padding-top: 16px;'), fadeInHeightExpandTransition({
   duration: '0.15s'
 })]), cM('active', [cE('header', [cM('active', [cB('collapse-item-arrow', 'transform: rotate(90deg);')])])]), c('&:not(:first-child)', 'border-top: 1px solid var(--u-divider-color);'), cE('header', `
  font-size: var(--u-title-font-size);
+ line-height: var(--u-title-line-height);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
@@ -54,6 +59,6 @@ export default cB('collapse', 'width: 100%;', [cB('collapse-item', `
  transition:
  transform .15s var(--u-bezier),
  color .3s var(--u-bezier);
- font-size: 18px;
+ font-size: var(--u-arrow-size);
  color: var(--u-arrow-color);
  `)])])]);

package/es/collapse/styles/light.d.ts

@@ -2,12 +2,15 @@ import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins/use-theme';
 export declare const self: (vars: ThemeCommonVars) => {
     titleFontSize: string;
+    titleLineHeight: string;
     titleFontWeight: string;
     dividerColor: string;
     titleTextColor: string;
     titleTextColorDisabled: string;
     fontSize: string;
+    lineHeight: string;
     textColor: string;
+    arrowSize: string;
     arrowColor: string;
     arrowColorDisabled: string;
     itemMargin: string;

package/es/collapse/styles/light.js

@@ -1,16 +1,19 @@
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { fontWeight, textColor1, textColor2, textColorDisabled, dividerColor, fontSize } = vars;
+    const { fontWeight, fontBodyLarge, lineHeightBodyLarge, elementsQuaternary, textPrimary, textSecondary, fontBodyMedium, lineHeightBodyMedium, iconSmall } = vars;
     return {
-        titleFontSize: fontSize,
+        titleFontSize: fontBodyLarge,
+        titleLineHeight: lineHeightBodyLarge,
         titleFontWeight: fontWeight,
-        dividerColor,
-        titleTextColor: textColor1,
-        titleTextColorDisabled: textColorDisabled,
-        fontSize,
-        textColor: textColor2,
-        arrowColor: textColor2,
-        arrowColorDisabled: textColorDisabled,
+        dividerColor: elementsQuaternary,
+        titleTextColor: textPrimary,
+        titleTextColorDisabled: textSecondary,
+        fontSize: fontBodyMedium,
+        lineHeight: lineHeightBodyMedium,
+        textColor: textPrimary,
+        arrowSize: iconSmall,
+        arrowColor: textPrimary,
+        arrowColorDisabled: textSecondary,
         itemMargin: '16px 0 0 0',
         titlePadding: '16px 0 0 0'
     };