@cfx-dev/ui-components 4.5.17 → 4.5.18

package/dist/main.js

@@ -6,28 +6,28 @@ import { useInstance as l } from "./utils/hooks/useInstance.js";
 import { useDynamicRef as s } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
-import { useWindowResize as g } from "./utils/hooks/useWindowResize.js";
-import { useOutlet as E } from "./utils/hooks/useOutlet.js";
-import { CLIPBOARD_TITLE_APPEARANCE as L, useClipboardComponent as B } from "./utils/hooks/useClipboardComponent.js";
-import { formatDate as y, formatLocaleDate as D, formatShortDate as P } from "./utils/formatDate.js";
-import { CURRENCY_MAP as A, FREE_PRICE_TEXT as k, formatCurrency as _ } from "./utils/formatCurrency.js";
-import { identity as O, invoke as h, noop as v, returnFalse as U, returnTrue as M } from "./utils/functional.js";
-import { Linkify as z, defaultLinkReplacer as N, defaultLinkReplacerx as V, isExternalUrl as G, linkify as Y, linkifyx as H, matchLinkNodes as K, matchLinks as W } from "./utils/links.js";
+import { useWindowResize as C } from "./utils/hooks/useWindowResize.js";
+import { useOutlet as R } from "./utils/hooks/useOutlet.js";
+import { CLIPBOARD_TITLE_APPEARANCE as L, useClipboardComponent as S } from "./utils/hooks/useClipboardComponent.js";
+import { formatDate as y, formatLocaleDate as D, formatShortDate as O } from "./utils/formatDate.js";
+import { CURRENCY_MAP as A, FREE_PRICE_TEXT as P, formatCurrency as b } from "./utils/formatCurrency.js";
+import { identity as k, invoke as h, noop as v, returnFalse as U, returnTrue as M } from "./utils/functional.js";
+import { Linkify as w, defaultLinkReplacer as z, defaultLinkReplacerx as Y, isExternalUrl as V, linkify as G, linkifyx as H, matchLinkNodes as K, matchLinks as W } from "./utils/links.js";
 import { clamp as j, clamp01 as J, minmax as Q } from "./utils/math.js";
 import { isFalseString as q, isTrueString as $, normalizeSlashes as oo, replaceRange as eo, splitByIndices as ro, unicodeCharAt as to } from "./utils/string.js";
 import { debounce as fo, throttle as mo } from "./utils/execution.js";
 import { getColor as xo } from "./utils/color.js";
 import { ui as lo } from "./utils/ui/ui.js";
-import { BorderRadiusEnum as so, ColorEnum as io, MediaQueryEnum as co, OffsetEnum as To, TextSizeEnum as Io, ZIndexEnum as go } from "./utils/ui/ui.types.js";
-import { isInEnum as Eo } from "./utils/enum.js";
+import { BorderRadiusEnum as so, ColorEnum as io, MediaQueryEnum as co, OffsetEnum as To, TextSizeEnum as Io, ZIndexEnum as Co } from "./utils/ui/ui.types.js";
+import { isInEnum as Ro } from "./utils/enum.js";
 import { joaat32 as Lo } from "./utils/joaat32.js";
-import { default as So } from "./components/IconButton/IconButton.js";
-import { Accordion as Do, AccordionContent as Po, AccordionHeader as bo, AccordionItem as Ao, AccordionTrigger as ko } from "./components/Accordion/Accordion.js";
+import { default as Bo } from "./components/IconButton/IconButton.js";
+import { Accordion as Do, AccordionContent as Oo, AccordionHeader as _o, AccordionItem as Ao, AccordionTrigger as Po } from "./components/Accordion/Accordion.js";
 import { default as Fo } from "./components/ClipboardButton/ClipboardButton.js";
 import { default as ho } from "./components/Checkbox/Checkbox.js";
-import { default as Uo, ButtonContent as Mo, getButtonClassName as wo } from "./components/Button/Button.js";
-import { ButtonBar as No } from "./components/Button/ButtonBar.js";
-import { LinkButton as Go } from "./components/Button/LinkButton.js";
+import { default as Uo, ButtonContent as Mo, getButtonClassName as No } from "./components/Button/Button.js";
+import { ButtonBar as zo } from "./components/Button/ButtonBar.js";
+import { LinkButton as Vo } from "./components/Button/LinkButton.js";
 import { BurgerMenuButton as Ho } from "./components/BurgerMenu/BurgerMenuButton.js";
 import { BurgerMenu as Wo } from "./components/BurgerMenu/BurgerMenu.js";
 import { default as jo, getLinkClassName as Jo, getLinkStyles as Qo } from "./components/Link/Link.js";
@@ -39,199 +39,201 @@ import { default as pe } from "./components/ControlBox/ControlBox.js";
 import { default as ne } from "./components/CountryFlag/CountryFlag.js";
 import { default as ue } from "./components/Decorate/Decorate.js";
 import { Dot as ie } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as ce, Flyout as Te } from "./components/Flyout/Flyout.js";
-import { Logos as ge } from "./components/Logos/index.js";
-import { I as Ee } from "./cfxIcons-B4SQ4Ljd.js";
-import { I as Le } from "./cfxIconsBig-BLJjMT-Y.js";
-import { Icon as Se } from "./components/Icon/Icon.js";
-import { IconBig as De } from "./components/IconBig/IconBig.js";
-import { Indicator as be } from "./components/Indicator/Indicator.js";
-import { default as ke } from "./components/InfoPanel/InfoPanel.js";
-import { default as Fe } from "./components/Input/Input.js";
-import { default as he } from "./components/Input/RichInput.js";
-import { default as Ue } from "./components/StyledInput/StyledInput.js";
-import { Interactive as we } from "./components/Interactive/Interactive.js";
-import { Island as Ne, IslandCorner as Ve } from "./components/Island/Island.js";
-import { default as Ye } from "./components/Box/Box.js";
-import { stringPropFormater as Ke } from "./components/RSC/Box/Box.js";
-import { Center as Xe } from "./components/Layout/Center/Center.js";
-import { default as Je } from "./components/Flex/Flex.js";
-import { FlexAlignItemsEnum as Ze, FlexDirectionEnum as qe, FlexJustifyContentEnum as $e, FlexWrapEnum as or } from "./components/RSC/Flex/Flex.types.js";
-import { FlexRestricter as rr } from "./components/RSC/Flex/FlexRestricter.js";
-import { Pad as ar } from "./components/Layout/Pad/Pad.js";
-import { Page as mr } from "./components/Layout/Page/Page.js";
-import { R as xr } from "./Rail-CHFAf3wJ.js";
-import { Scrollable as lr } from "./components/Scrollable/Scrollable.js";
-import { VirtualScrollable as sr } from "./components/Scrollable/VirtualScrollable.js";
-import { Loaf as dr } from "./components/Loaf/Loaf.js";
-import { Modal as Tr } from "./components/Modal/Modal.js";
-import { NavList as gr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Er, Overlay as Rr } from "./components/Overlay/Overlay.js";
-import { default as Br } from "./components/Pagination/Pagination.js";
-import { Popover as yr } from "./components/Popover/Popover.js";
-import { PremiumBadge as Pr } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as Ar } from "./components/Prose/Prose.js";
-import { Radio as _r } from "./components/Radio/Radio.js";
-import { Select as Or } from "./components/Select/Select.js";
-import { DropdownSelect as vr } from "./components/DropdownSelect/DropdownSelect.js";
-import { default as Mr } from "./components/DropdownMenu/DropdownMenu.js";
-import { Separator as zr } from "./components/Separator/Separator.js";
-import { Shroud as Vr } from "./components/Shroud/Shroud.js";
-import { Slider as Yr } from "./components/Slider/Slider.js";
-import { default as Kr } from "./components/Range/Range.js";
-import { default as Xr } from "./components/Range/RangeInput.js";
-import { default as Jr } from "./components/Range/RangeWithInputs.js";
-import { Spacer as Zr } from "./components/Spacer/Spacer.js";
-import { Style as $r, useContextualStyle as ot } from "./components/Style/Style.js";
-import { default as rt } from "./components/Switch/Switch.js";
-import { ToggleGroup as at } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as mt } from "./components/Tabular/Tabular.js";
-import { DataTable as xt, DataTableHeaderItem as nt, DataTableRow as lt } from "./components/DataTable/DataTable.js";
-import { Table as st } from "./components/Table/index.js";
-import { default as dt } from "./components/TableResponsiveText/TableResponsiveText.js";
-import { DEFAULT_TEXT_COLOR as Tt, TEXT_OPACITY_MAP as It, Text as gt, TextBlock as Ct, getTextOpacity as Et, lineHeightResponsiveValueFormatter as Rt, textSizeResponsiveValueFormatter as Lt } from "./components/Text/Text.js";
-import { default as St } from "./components/Label/Label.js";
-import { Textarea as Dt } from "./components/Textarea/Textarea.js";
-import { default as bt } from "./components/StyledTextarea/StyledTextarea.js";
-import { TITLE_OUTLET_ID as kt, Title as _t, titleGetCoords as Ft, titleGetCssStyle as Ot } from "./components/Title/Title.js";
-import { default as vt } from "./components/InputDropzone/InputDropzone.js";
-import { default as Mt } from "./components/InputDropzone/ItemPreview.js";
-import { default as zt } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as Vt } from "./components/OnScreenSensor.js";
-import { Symbols as Yt } from "./components/Symbols.js";
-import { default as Kt } from "./components/Table/TableIconButton.js";
+import { FLYOUT_OUTLET_ID as ce, FLYOUT_ROOT_ID as Te, FLYOUT_ROOT_SHRINK_CLASSNAME as Ie, Flyout as Ce } from "./components/Flyout/Flyout.js";
+import { Logos as Re } from "./components/Logos/index.js";
+import { I as Le } from "./cfxIcons-B4SQ4Ljd.js";
+import { I as Be } from "./cfxIconsBig-BLJjMT-Y.js";
+import { Icon as De } from "./components/Icon/Icon.js";
+import { IconBig as _e } from "./components/IconBig/IconBig.js";
+import { Indicator as Pe } from "./components/Indicator/Indicator.js";
+import { default as Fe } from "./components/InfoPanel/InfoPanel.js";
+import { default as he } from "./components/Input/Input.js";
+import { default as Ue } from "./components/Input/RichInput.js";
+import { default as Ne } from "./components/StyledInput/StyledInput.js";
+import { Interactive as ze } from "./components/Interactive/Interactive.js";
+import { Island as Ve, IslandCorner as Ge } from "./components/Island/Island.js";
+import { default as Ke } from "./components/Box/Box.js";
+import { stringPropFormater as Xe } from "./components/RSC/Box/Box.js";
+import { Center as Je } from "./components/Layout/Center/Center.js";
+import { default as Ze } from "./components/Flex/Flex.js";
+import { FlexAlignItemsEnum as $e, FlexDirectionEnum as or, FlexJustifyContentEnum as er, FlexWrapEnum as rr } from "./components/RSC/Flex/Flex.types.js";
+import { FlexRestricter as ar } from "./components/RSC/Flex/FlexRestricter.js";
+import { Pad as mr } from "./components/Layout/Pad/Pad.js";
+import { Page as xr } from "./components/Layout/Page/Page.js";
+import { R as lr } from "./Rail-CHFAf3wJ.js";
+import { Scrollable as sr } from "./components/Scrollable/Scrollable.js";
+import { VirtualScrollable as dr } from "./components/Scrollable/VirtualScrollable.js";
+import { Loaf as Tr } from "./components/Loaf/Loaf.js";
+import { Modal as Cr } from "./components/Modal/Modal.js";
+import { NavList as Rr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Lr, Overlay as Sr } from "./components/Overlay/Overlay.js";
+import { default as yr } from "./components/Pagination/Pagination.js";
+import { Popover as Or } from "./components/Popover/Popover.js";
+import { PremiumBadge as Ar } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as br } from "./components/Prose/Prose.js";
+import { Radio as kr } from "./components/Radio/Radio.js";
+import { Select as vr } from "./components/Select/Select.js";
+import { DropdownSelect as Mr } from "./components/DropdownSelect/DropdownSelect.js";
+import { default as wr } from "./components/DropdownMenu/DropdownMenu.js";
+import { Separator as Yr } from "./components/Separator/Separator.js";
+import { Shroud as Gr } from "./components/Shroud/Shroud.js";
+import { Slider as Kr } from "./components/Slider/Slider.js";
+import { default as Xr } from "./components/Range/Range.js";
+import { default as Jr } from "./components/Range/RangeInput.js";
+import { default as Zr } from "./components/Range/RangeWithInputs.js";
+import { Spacer as $r } from "./components/Spacer/Spacer.js";
+import { Style as et, useContextualStyle as rt } from "./components/Style/Style.js";
+import { default as at } from "./components/Switch/Switch.js";
+import { ToggleGroup as mt } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as xt } from "./components/Tabular/Tabular.js";
+import { DataTable as lt, DataTableHeaderItem as ut, DataTableRow as st } from "./components/DataTable/DataTable.js";
+import { Table as dt } from "./components/Table/index.js";
+import { default as Tt } from "./components/TableResponsiveText/TableResponsiveText.js";
+import { DEFAULT_TEXT_COLOR as Ct, TEXT_OPACITY_MAP as Et, Text as Rt, TextBlock as gt, getTextOpacity as Lt, lineHeightResponsiveValueFormatter as St, textSizeResponsiveValueFormatter as Bt } from "./components/Text/Text.js";
+import { default as Dt } from "./components/Label/Label.js";
+import { Textarea as _t } from "./components/Textarea/Textarea.js";
+import { default as Pt } from "./components/StyledTextarea/StyledTextarea.js";
+import { TITLE_OUTLET_ID as Ft, Title as kt, titleGetCoords as ht, titleGetCssStyle as vt } from "./components/Title/Title.js";
+import { default as Mt } from "./components/InputDropzone/InputDropzone.js";
+import { default as wt } from "./components/InputDropzone/ItemPreview.js";
+import { default as Yt } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as Gt } from "./components/OnScreenSensor.js";
+import { Symbols as Kt } from "./components/Symbols.js";
+import { default as Xt } from "./components/Table/TableIconButton.js";
 export {
   Do as Accordion,
-  Po as AccordionContent,
-  bo as AccordionHeader,
+  Oo as AccordionContent,
+  _o as AccordionHeader,
   Ao as AccordionItem,
-  ko as AccordionTrigger,
+  Po as AccordionTrigger,
   oe as Avatar,
   re as BACKDROP_OUTLET_ID,
   te as BackdropPortal,
   fe as Badge,
   so as BorderRadiusEnum,
-  Ye as Box,
+  Ke as Box,
   Wo as BurgerMenu,
   Ho as BurgerMenuButton,
   Uo as Button,
-  No as ButtonBar,
+  zo as ButtonBar,
   Mo as ButtonContent,
   qo as ButtonLink,
   L as CLIPBOARD_TITLE_APPEARANCE,
   A as CURRENCY_MAP,
-  Xe as Center,
+  Je as Center,
   ho as Checkbox,
   Fo as ClipboardButton,
   io as ColorEnum,
   pe as ControlBox,
   ne as CountryFlag,
-  Tt as DEFAULT_TEXT_COLOR,
-  xt as DataTable,
-  nt as DataTableHeaderItem,
-  lt as DataTableRow,
+  Ct as DEFAULT_TEXT_COLOR,
+  lt as DataTable,
+  ut as DataTableHeaderItem,
+  st as DataTableRow,
   ue as Decorate,
   ie as Dot,
-  Mr as DropdownMenu,
-  vr as DropdownSelect,
-  Mt as DropzoneItemPreview,
+  wr as DropdownMenu,
+  Mr as DropdownSelect,
+  wt as DropzoneItemPreview,
   ce as FLYOUT_OUTLET_ID,
-  k as FREE_PRICE_TEXT,
-  Je as Flex,
-  Ze as FlexAlignItemsEnum,
-  qe as FlexDirectionEnum,
-  $e as FlexJustifyContentEnum,
-  rr as FlexRestricter,
-  or as FlexWrapEnum,
-  Te as Flyout,
-  Se as Icon,
-  De as IconBig,
-  So as IconButton,
-  Ee as Icons,
-  Le as IconsBig,
-  be as Indicator,
-  ke as InfoPanel,
-  Fe as Input,
-  vt as InputDropzone,
-  we as Interactive,
-  Ne as Island,
-  Ve as IslandCorner,
-  St as Label,
+  Te as FLYOUT_ROOT_ID,
+  Ie as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  P as FREE_PRICE_TEXT,
+  Ze as Flex,
+  $e as FlexAlignItemsEnum,
+  or as FlexDirectionEnum,
+  er as FlexJustifyContentEnum,
+  ar as FlexRestricter,
+  rr as FlexWrapEnum,
+  Ce as Flyout,
+  De as Icon,
+  _e as IconBig,
+  Bo as IconButton,
+  Le as Icons,
+  Be as IconsBig,
+  Pe as Indicator,
+  Fe as InfoPanel,
+  he as Input,
+  Mt as InputDropzone,
+  ze as Interactive,
+  Ve as Island,
+  Ge as IslandCorner,
+  Dt as Label,
   jo as Link,
-  Go as LinkButton,
-  z as Linkify,
-  dr as Loaf,
-  ge as Logos,
+  Vo as LinkButton,
+  w as Linkify,
+  Tr as Loaf,
+  Re as Logos,
   co as MediaQueryEnum,
-  Tr as Modal,
-  gr as NavList,
-  Er as OVERLAY_OUTLET_ID,
+  Cr as Modal,
+  Rr as NavList,
+  Lr as OVERLAY_OUTLET_ID,
   To as OffsetEnum,
-  Vt as OnScreenSensor,
-  Rr as Overlay,
-  ar as Pad,
-  mr as Page,
-  Br as Pagination,
-  yr as Popover,
-  Pr as PremiumBadge,
-  Ar as Prose,
-  _r as Radio,
-  xr as Rail,
-  Kr as Range,
-  Xr as RangeInput,
-  Jr as RangeWithInputs,
-  he as RichInput,
-  lr as Scrollable,
-  Or as Select,
-  zr as Separator,
-  Vr as Shroud,
-  zt as Skeleton,
-  Yr as Slider,
-  Zr as Spacer,
-  $r as Style,
-  Ue as StyledInput,
-  bt as StyledTextarea,
-  rt as Switch,
-  Yt as Symbols,
-  It as TEXT_OPACITY_MAP,
-  kt as TITLE_OUTLET_ID,
-  st as Table,
-  Kt as TableIconButton,
-  dt as TableResponsiveText,
-  mt as Tabular,
-  gt as Text,
-  Ct as TextBlock,
+  Gt as OnScreenSensor,
+  Sr as Overlay,
+  mr as Pad,
+  xr as Page,
+  yr as Pagination,
+  Or as Popover,
+  Ar as PremiumBadge,
+  br as Prose,
+  kr as Radio,
+  lr as Rail,
+  Xr as Range,
+  Jr as RangeInput,
+  Zr as RangeWithInputs,
+  Ue as RichInput,
+  sr as Scrollable,
+  vr as Select,
+  Yr as Separator,
+  Gr as Shroud,
+  Yt as Skeleton,
+  Kr as Slider,
+  $r as Spacer,
+  et as Style,
+  Ne as StyledInput,
+  Pt as StyledTextarea,
+  at as Switch,
+  Kt as Symbols,
+  Et as TEXT_OPACITY_MAP,
+  Ft as TITLE_OUTLET_ID,
+  dt as Table,
+  Xt as TableIconButton,
+  Tt as TableResponsiveText,
+  xt as Tabular,
+  Rt as Text,
+  gt as TextBlock,
   Io as TextSizeEnum,
-  Dt as Textarea,
-  _t as Title,
-  at as ToggleGroup,
-  sr as VirtualScrollable,
-  go as ZIndexEnum,
+  _t as Textarea,
+  kt as Title,
+  mt as ToggleGroup,
+  dr as VirtualScrollable,
+  Co as ZIndexEnum,
   j as clamp,
   J as clamp01,
   a as clsx,
   fo as debounce,
-  N as defaultLinkReplacer,
-  V as defaultLinkReplacerx,
-  _ as formatCurrency,
+  z as defaultLinkReplacer,
+  Y as defaultLinkReplacerx,
+  b as formatCurrency,
   y as formatDate,
   D as formatLocaleDate,
-  P as formatShortDate,
-  wo as getButtonClassName,
+  O as formatShortDate,
+  No as getButtonClassName,
   xo as getColor,
   Jo as getLinkClassName,
   Qo as getLinkStyles,
-  Et as getTextOpacity,
+  Lt as getTextOpacity,
   m as getValue,
-  O as identity,
+  k as identity,
   h as invoke,
-  G as isExternalUrl,
+  V as isExternalUrl,
   q as isFalseString,
-  Eo as isInEnum,
+  Ro as isInEnum,
   $ as isTrueString,
   Lo as joaat32,
-  Rt as lineHeightResponsiveValueFormatter,
-  Y as linkify,
+  St as lineHeightResponsiveValueFormatter,
+  G as linkify,
   H as linkifyx,
   K as matchLinkNodes,
   W as matchLinks,
@@ -243,20 +245,20 @@ export {
   U as returnFalse,
   M as returnTrue,
   ro as splitByIndices,
-  Ke as stringPropFormater,
-  Lt as textSizeResponsiveValueFormatter,
+  Xe as stringPropFormater,
+  Bt as textSizeResponsiveValueFormatter,
   mo as throttle,
-  Ft as titleGetCoords,
-  Ot as titleGetCssStyle,
+  ht as titleGetCoords,
+  vt as titleGetCssStyle,
   lo as ui,
   to as unicodeCharAt,
-  B as useClipboardComponent,
-  ot as useContextualStyle,
+  S as useClipboardComponent,
+  rt as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
   l as useInstance,
   T as useKeyboardClose,
-  E as useOutlet,
+  R as useOutlet,
   x as usePopoverController,
-  g as useWindowResize
+  C as useWindowResize
 };

package/dist/styles-scss/_ui.scss

@@ -367,6 +367,7 @@ $zindexMap: (
   'zero': 0,
   'first': 1,
   'second': 2,
+  'flyout': 1000,
   'max': 9000,
 );
 

package/dist/styles-scss/global.scss

@@ -33,6 +33,8 @@ body {
   @include tokens.separator-tokens;
   @include tokens.zindex-tokens;
   @include tokens.text-tokens;
+  @include tokens.flyout-tokens;
+  @include tokens.shadow-tokens;
 
   // initiat fonts
   @include typography.font-HelveticaNow;

package/dist/styles-scss/tokens.scss

@@ -42,16 +42,6 @@
 
 // font size is responsive, and one size in different media queries can have different values
 @mixin text-tokens() {
-  @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
-  @include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
-  @include ui.define-font-size('xsmall', ui.q(1.75), 1.5);
-  @include ui.define-font-size('small', ui.q(2), 1.5);
-  @include ui.define-font-size('normal', ui.q(2), 1.5);
-  @include ui.define-font-size('medium', ui.q(2.5), 1.2);
-  @include ui.define-font-size('large', ui.q(3), 1.2);
-  @include ui.define-font-size('xlarge', ui.q(4), 1.2);
-  @include ui.define-font-size('xxlarge', ui.q(5), 1.2);
-  @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
   @include ui.def('font-weight-thin', 100);
   @include ui.def('font-weight-small', 300);
   @include ui.def('font-weight-normal', 400);
@@ -73,6 +63,19 @@
   @include ui.def('text-opacity-75', 0.75);
   @include ui.define-color-token('text-a75', ui.color('primary', $alpha: 0.75));
 
+  // Mobile font sizes
+  @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
+  @include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
+  @include ui.define-font-size('xsmall', ui.q(1.75), 1.5);
+  @include ui.define-font-size('small', ui.q(2), 1.5);
+  @include ui.define-font-size('normal', ui.q(2), 1.5);
+  @include ui.define-font-size('medium', ui.q(2.5), 1.2);
+  @include ui.define-font-size('large', ui.q(3), 1.2);
+  @include ui.define-font-size('xlarge', ui.q(4), 1.2);
+  @include ui.define-font-size('xxlarge', ui.q(5), 1.2);
+  @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
+
+  // Tablet font sizes
   @include ui.media-min('medium') {
     @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
     @include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
@@ -86,6 +89,7 @@
     @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
   }
 
+  // Desktop font sizes
   @include ui.media-min('large') {
     @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
     @include ui.define-font-size('xxsmall', ui.q(1.75), 1.5);
@@ -99,6 +103,7 @@
     @include ui.define-font-size('xxxlarge', ui.q(7.5), 1.2);
   }
 
+  // Large Desktop font sizes - same as desktop
   @include ui.media-min('xlg') {
     @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
     @include ui.define-font-size('xxsmall', ui.q(1.75), 1.5);
@@ -337,6 +342,17 @@
   @include ui.define-color-token('separator-background', ui.color('secondary', $alpha: 0.2));
 }
 
+@mixin flyout-tokens() {
+  @include ui.define-color-token('flyout-holder-border', ui.color('primary', 100, 0.25));
+}
+
+@mixin shadow-tokens() {
+  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, 0.5));
+  @include ui.def('shadow-small', 0 ui.q(0.25) ui.q(0.75) ui.color-token('shadow-small'));
+  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, 0.5));
+  @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) ui.q(0.25) ui.color-token('shadow-large'));
+}
+
 /**
  * LEGACY
  * Look for usages by searching for `ui.color-token('name')`
@@ -345,13 +361,6 @@
   @include ui.define-color-token('li-marker', ui.color('main', 950, 0.75));
   @include ui.define-color-token('kbd-border', ui.color('main', 300));
   @include ui.define-color-token('kbd-background', ui.color('main', 200));
-  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, 0.5));
-  @include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
-  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, 0.5));
-  @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
-
-  // TODO: add text warning, success and error
-
   @include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
   @include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: 0.4));
   @include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: 0.6));
@@ -370,10 +379,6 @@
   @include ui.define-color-token('checkbox-border', ui.color('main', 950, 0.25));
   @include ui.define-color-token('checkbox-background', ui.color('main', 950, 0.1));
   @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, 0.05));
-  @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, 0.9));
-  @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, 0.25));
-  @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, 0.75));
-  @include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
   @include ui.define-color-token('indicator-bright', ui.color('primary'));
   @include ui.define-color-token('indicator-dim', transparent);
   @include ui.define-color-token('island-border', ui.color('main', 50, 0.25));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.5.17",
+  "version": "4.5.18",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",