@cfx-dev/ui-components 4.4.0 → 4.5.1

package/dist/main.js

@@ -1,4 +1,4 @@
-import { mergeRefs as e } from "./utils/mergeRefs.js";
+import { mergeRefs as r } from "./utils/mergeRefs.js";
 import { clsx as a } from "./utils/clsx.js";
 import { getValue as m } from "./utils/getValue.js";
 import { usePopoverController as x } from "./utils/hooks/usePopoverController.js";
@@ -11,10 +11,10 @@ import { useOutlet as g } from "./utils/hooks/useOutlet.js";
 import { CLIPBOARD_TITLE_APPEARANCE as B, useClipboardComponent as R } from "./utils/hooks/useClipboardComponent.js";
 import { formatDate as D, formatLocaleDate as y, 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 F, invoke as v, noop as h, returnFalse as U, returnTrue as M } from "./utils/functional.js";
-import { Linkify as z, defaultLinkReplacer as N, defaultLinkReplacerx as G, isExternalUrl as V, linkify as Y, linkifyx as K, matchLinkNodes as X, matchLinks as H } from "./utils/links.js";
+import { identity as O, invoke as v, noop as h, 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 X } 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 ro, splitByIndices as eo, unicodeCharAt as to } from "./utils/string.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";
@@ -23,186 +23,186 @@ import { isInEnum as go } from "./utils/enum.js";
 import { joaat32 as Bo } from "./utils/joaat32.js";
 import { default as So } from "./components/IconButton/IconButton.js";
 import { Accordion as yo, AccordionContent as Po, AccordionHeader as bo, AccordionItem as Ao, AccordionTrigger as ko } from "./components/Accordion/Accordion.js";
-import { default as Oo } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as Fo } from "./components/ClipboardButton/ClipboardButton.js";
 import { default as vo } 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 Vo } from "./components/Button/LinkButton.js";
-import { BurgerMenuButton as Ko } from "./components/BurgerMenu/BurgerMenuButton.js";
-import { BurgerMenu as Ho } from "./components/BurgerMenu/BurgerMenu.js";
+import { LinkButton as Go } from "./components/Button/LinkButton.js";
+import { BurgerMenuButton as Ho } from "./components/BurgerMenu/BurgerMenuButton.js";
+import { BurgerMenu as Xo } from "./components/BurgerMenu/BurgerMenu.js";
 import { default as jo, getLinkClassName as Jo, getLinkStyles as Qo } from "./components/Link/Link.js";
 import { default as qo } from "./components/Link/ButtonLink.js";
-import { Avatar as or } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as er, default as tr } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as fr } from "./components/Badge/Badge.js";
-import { default as pr } from "./components/ControlBox/ControlBox.js";
-import { default as nr } from "./components/CountryFlag/CountryFlag.js";
-import { default as ur } from "./components/Decorate/Decorate.js";
-import { Dot as ir } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as cr, Flyout as Tr } from "./components/Flyout/Flyout.js";
-import { Logos as Cr } from "./components/Logos/index.js";
-import { I as gr } from "./cfxIcons-B9nzO6TW.js";
-import { I as Br } from "./cfxIconsBig-BLJjMT-Y.js";
-import { Icon as Sr } from "./components/Icon/Icon.js";
-import { IconBig as yr } from "./components/IconBig/IconBig.js";
-import { Indicator as br } from "./components/Indicator/Indicator.js";
-import { default as kr } from "./components/InfoPanel/InfoPanel.js";
-import { default as Or } from "./components/Input/Input.js";
-import { default as vr } from "./components/Input/RichInput.js";
-import { Interactive as Ur } from "./components/Interactive/Interactive.js";
-import { Island as wr, IslandCorner as zr } from "./components/Island/Island.js";
-import { default as Gr } from "./components/Box/Box.js";
-import { stringPropFormater as Yr } from "./components/RSC/Box/Box.js";
-import { Center as Xr } from "./components/Layout/Center/Center.js";
-import { default as Wr } from "./components/Flex/Flex.js";
-import { FlexAlignItemsEnum as Jr, FlexDirectionEnum as Qr, FlexJustifyContentEnum as Zr, FlexWrapEnum as qr } from "./components/RSC/Flex/Flex.types.js";
-import { FlexRestricter as oe } from "./components/RSC/Flex/FlexRestricter.js";
-import { Pad as ee } from "./components/Layout/Pad/Pad.js";
-import { Page as ae } from "./components/Layout/Page/Page.js";
-import { R as me } from "./Rail-CHFAf3wJ.js";
-import { Scrollable as xe } from "./components/Scrollable/Scrollable.js";
-import { VirtualScrollable as le } from "./components/Scrollable/VirtualScrollable.js";
-import { Loaf as se } from "./components/Loaf/Loaf.js";
-import { Modal as de } from "./components/Modal/Modal.js";
-import { NavList as Te } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Ce, Overlay as Ee } from "./components/Overlay/Overlay.js";
-import { default as Le } from "./components/Pagination/Pagination.js";
-import { Popover as Re } from "./components/Popover/Popover.js";
-import { PremiumBadge as De } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as Pe } from "./components/Prose/Prose.js";
-import { Radio as Ae } from "./components/Radio/Radio.js";
-import { Select as _e } from "./components/Select/Select.js";
-import { DropdownSelect as Fe } from "./components/DropdownSelect/DropdownSelect.js";
-import { default as he } from "./components/DropdownMenu/DropdownMenu.js";
-import { Separator as Me } from "./components/Separator/Separator.js";
-import { Shroud as ze } from "./components/Shroud/Shroud.js";
-import { Slider as Ge } from "./components/Slider/Slider.js";
-import { Spacer as Ye } from "./components/Spacer/Spacer.js";
-import { Style as Xe, useContextualStyle as He } from "./components/Style/Style.js";
-import { default as je } from "./components/Switch/Switch.js";
-import { ToggleGroup as Qe } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as qe } from "./components/Tabular/Tabular.js";
-import { DataTable as ot, DataTableHeaderItem as rt, DataTableRow as et } from "./components/DataTable/DataTable.js";
+import { Avatar as oe } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as re, default as te } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as fe } from "./components/Badge/Badge.js";
+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 Ce } from "./components/Logos/index.js";
+import { I as ge } from "./cfxIcons-B9nzO6TW.js";
+import { I as Be } from "./cfxIconsBig-BLJjMT-Y.js";
+import { Icon as Se } from "./components/Icon/Icon.js";
+import { IconBig as ye } 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 ve } from "./components/Input/RichInput.js";
+import { Interactive as Ue } from "./components/Interactive/Interactive.js";
+import { Island as we, IslandCorner as ze } from "./components/Island/Island.js";
+import { default as Ve } from "./components/Box/Box.js";
+import { stringPropFormater as Ye } from "./components/RSC/Box/Box.js";
+import { Center as Ke } from "./components/Layout/Center/Center.js";
+import { default as We } from "./components/Flex/Flex.js";
+import { FlexAlignItemsEnum as Je, FlexDirectionEnum as Qe, FlexJustifyContentEnum as Ze, FlexWrapEnum as qe } from "./components/RSC/Flex/Flex.types.js";
+import { FlexRestricter as or } from "./components/RSC/Flex/FlexRestricter.js";
+import { Pad as rr } from "./components/Layout/Pad/Pad.js";
+import { Page as ar } from "./components/Layout/Page/Page.js";
+import { R as mr } from "./Rail-CHFAf3wJ.js";
+import { Scrollable as xr } from "./components/Scrollable/Scrollable.js";
+import { VirtualScrollable as lr } from "./components/Scrollable/VirtualScrollable.js";
+import { Loaf as sr } from "./components/Loaf/Loaf.js";
+import { Modal as dr } from "./components/Modal/Modal.js";
+import { NavList as Tr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Cr, Overlay as Er } from "./components/Overlay/Overlay.js";
+import { default as Lr } from "./components/Pagination/Pagination.js";
+import { Popover as Rr } from "./components/Popover/Popover.js";
+import { PremiumBadge as Dr } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as Pr } from "./components/Prose/Prose.js";
+import { Radio as Ar } from "./components/Radio/Radio.js";
+import { Select as _r } from "./components/Select/Select.js";
+import { DropdownSelect as Or } from "./components/DropdownSelect/DropdownSelect.js";
+import { default as hr } from "./components/DropdownMenu/DropdownMenu.js";
+import { Separator as Mr } from "./components/Separator/Separator.js";
+import { Shroud as zr } from "./components/Shroud/Shroud.js";
+import { Slider as Vr } from "./components/Slider/Slider.js";
+import { Spacer as Yr } from "./components/Spacer/Spacer.js";
+import { Style as Kr, useContextualStyle as Xr } from "./components/Style/Style.js";
+import { default as jr } from "./components/Switch/Switch.js";
+import { ToggleGroup as Qr } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as qr } from "./components/Tabular/Tabular.js";
+import { DataTable as ot, DataTableHeaderItem as et, DataTableRow as rt } from "./components/DataTable/DataTable.js";
 import { Table as at } from "./components/Table/index.js";
 import { default as mt } from "./components/TableResponsiveText/TableResponsiveText.js";
-import { DEFAULT_TEXT_COLOR as xt, TEXT_OPACITY_MAP as nt, Text as lt, TextBlock as ut, getTextOpacity as st, textSizeResponsiveValueFormatter as it } from "./components/Text/Text.js";
-import { default as ct } from "./components/Label/Label.js";
-import { Textarea as It } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as Et, Title as gt, titleGetCoords as Lt, titleGetCssStyle as Bt } from "./components/Title/Title.js";
-import { default as St } from "./components/InputDropzone/InputDropzone.js";
-import { default as yt } from "./components/InputDropzone/ItemPreview.js";
-import { default as bt } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as kt } from "./components/OnScreenSensor.js";
+import { DEFAULT_TEXT_COLOR as xt, TEXT_OPACITY_MAP as nt, Text as lt, TextBlock as ut, getTextOpacity as st, lineHeightResponsiveValueFormatter as it, textSizeResponsiveValueFormatter as dt } from "./components/Text/Text.js";
+import { default as Tt } from "./components/Label/Label.js";
+import { Textarea as Ct } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as gt, Title as Lt, titleGetCoords as Bt, titleGetCssStyle as Rt } from "./components/Title/Title.js";
+import { default as Dt } from "./components/InputDropzone/InputDropzone.js";
+import { default as Pt } from "./components/InputDropzone/ItemPreview.js";
+import { default as At } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as _t } from "./components/OnScreenSensor.js";
 import { Symbols as Ot } from "./components/Symbols.js";
-import { default as vt } from "./components/Table/TableIconButton.js";
+import { default as ht } from "./components/Table/TableIconButton.js";
 export {
   yo as Accordion,
   Po as AccordionContent,
   bo as AccordionHeader,
   Ao as AccordionItem,
   ko as AccordionTrigger,
-  or as Avatar,
-  er as BACKDROP_OUTLET_ID,
-  tr as BackdropPortal,
-  fr as Badge,
+  oe as Avatar,
+  re as BACKDROP_OUTLET_ID,
+  te as BackdropPortal,
+  fe as Badge,
   so as BorderRadiusEnum,
-  Gr as Box,
-  Ho as BurgerMenu,
-  Ko as BurgerMenuButton,
+  Ve as Box,
+  Xo as BurgerMenu,
+  Ho as BurgerMenuButton,
   Uo as Button,
   No as ButtonBar,
   Mo as ButtonContent,
   qo as ButtonLink,
   B as CLIPBOARD_TITLE_APPEARANCE,
   A as CURRENCY_MAP,
-  Xr as Center,
+  Ke as Center,
   vo as Checkbox,
-  Oo as ClipboardButton,
+  Fo as ClipboardButton,
   io as ColorEnum,
-  pr as ControlBox,
-  nr as CountryFlag,
+  pe as ControlBox,
+  ne as CountryFlag,
   xt as DEFAULT_TEXT_COLOR,
   ot as DataTable,
-  rt as DataTableHeaderItem,
-  et as DataTableRow,
-  ur as Decorate,
-  ir as Dot,
-  he as DropdownMenu,
-  Fe as DropdownSelect,
-  yt as DropzoneItemPreview,
-  cr as FLYOUT_OUTLET_ID,
+  et as DataTableHeaderItem,
+  rt as DataTableRow,
+  ue as Decorate,
+  ie as Dot,
+  hr as DropdownMenu,
+  Or as DropdownSelect,
+  Pt as DropzoneItemPreview,
+  ce as FLYOUT_OUTLET_ID,
   k as FREE_PRICE_TEXT,
-  Wr as Flex,
-  Jr as FlexAlignItemsEnum,
-  Qr as FlexDirectionEnum,
-  Zr as FlexJustifyContentEnum,
-  oe as FlexRestricter,
-  qr as FlexWrapEnum,
-  Tr as Flyout,
-  Sr as Icon,
-  yr as IconBig,
+  We as Flex,
+  Je as FlexAlignItemsEnum,
+  Qe as FlexDirectionEnum,
+  Ze as FlexJustifyContentEnum,
+  or as FlexRestricter,
+  qe as FlexWrapEnum,
+  Te as Flyout,
+  Se as Icon,
+  ye as IconBig,
   So as IconButton,
-  gr as Icons,
-  Br as IconsBig,
-  br as Indicator,
-  kr as InfoPanel,
-  Or as Input,
-  St as InputDropzone,
-  Ur as Interactive,
-  wr as Island,
-  zr as IslandCorner,
-  ct as Label,
+  ge as Icons,
+  Be as IconsBig,
+  be as Indicator,
+  ke as InfoPanel,
+  Fe as Input,
+  Dt as InputDropzone,
+  Ue as Interactive,
+  we as Island,
+  ze as IslandCorner,
+  Tt as Label,
   jo as Link,
-  Vo as LinkButton,
+  Go as LinkButton,
   z as Linkify,
-  se as Loaf,
-  Cr as Logos,
+  sr as Loaf,
+  Ce as Logos,
   co as MediaQueryEnum,
-  de as Modal,
-  Te as NavList,
-  Ce as OVERLAY_OUTLET_ID,
+  dr as Modal,
+  Tr as NavList,
+  Cr as OVERLAY_OUTLET_ID,
   To as OffsetEnum,
-  kt as OnScreenSensor,
-  Ee as Overlay,
-  ee as Pad,
-  ae as Page,
-  Le as Pagination,
-  Re as Popover,
-  De as PremiumBadge,
-  Pe as Prose,
-  Ae as Radio,
-  me as Rail,
-  vr as RichInput,
-  xe as Scrollable,
-  _e as Select,
-  Me as Separator,
-  ze as Shroud,
-  bt as Skeleton,
-  Ge as Slider,
-  Ye as Spacer,
-  Xe as Style,
-  je as Switch,
+  _t as OnScreenSensor,
+  Er as Overlay,
+  rr as Pad,
+  ar as Page,
+  Lr as Pagination,
+  Rr as Popover,
+  Dr as PremiumBadge,
+  Pr as Prose,
+  Ar as Radio,
+  mr as Rail,
+  ve as RichInput,
+  xr as Scrollable,
+  _r as Select,
+  Mr as Separator,
+  zr as Shroud,
+  At as Skeleton,
+  Vr as Slider,
+  Yr as Spacer,
+  Kr as Style,
+  jr as Switch,
   Ot as Symbols,
   nt as TEXT_OPACITY_MAP,
-  Et as TITLE_OUTLET_ID,
+  gt as TITLE_OUTLET_ID,
   at as Table,
-  vt as TableIconButton,
+  ht as TableIconButton,
   mt as TableResponsiveText,
-  qe as Tabular,
+  qr as Tabular,
   lt as Text,
   ut as TextBlock,
   Io as TextSizeEnum,
-  It as Textarea,
-  gt as Title,
-  Qe as ToggleGroup,
-  le as VirtualScrollable,
+  Ct as Textarea,
+  Lt as Title,
+  Qr as ToggleGroup,
+  lr as VirtualScrollable,
   Co as ZIndexEnum,
   j as clamp,
   J as clamp01,
   a as clsx,
   fo as debounce,
   N as defaultLinkReplacer,
-  G as defaultLinkReplacerx,
+  V as defaultLinkReplacerx,
   _ as formatCurrency,
   D as formatDate,
   y as formatLocaleDate,
@@ -213,34 +213,35 @@ export {
   Qo as getLinkStyles,
   st as getTextOpacity,
   m as getValue,
-  F as identity,
+  O as identity,
   v as invoke,
-  V as isExternalUrl,
+  G as isExternalUrl,
   q as isFalseString,
   go as isInEnum,
   $ as isTrueString,
   Bo as joaat32,
+  it as lineHeightResponsiveValueFormatter,
   Y as linkify,
-  K as linkifyx,
-  X as matchLinkNodes,
-  H as matchLinks,
-  e as mergeRefs,
+  H as linkifyx,
+  K as matchLinkNodes,
+  X as matchLinks,
+  r as mergeRefs,
   Q as minmax,
   h as noop,
   oo as normalizeSlashes,
-  ro as replaceRange,
+  eo as replaceRange,
   U as returnFalse,
   M as returnTrue,
-  eo as splitByIndices,
-  Yr as stringPropFormater,
-  it as textSizeResponsiveValueFormatter,
+  ro as splitByIndices,
+  Ye as stringPropFormater,
+  dt as textSizeResponsiveValueFormatter,
   mo as throttle,
-  Lt as titleGetCoords,
-  Bt as titleGetCssStyle,
+  Bt as titleGetCoords,
+  Rt as titleGetCssStyle,
   lo as ui,
   to as unicodeCharAt,
   R as useClipboardComponent,
-  He as useContextualStyle,
+  Xr as useContextualStyle,
   s as useDynamicRef,
   d as useGlobalKeyboardEvent,
   l as useInstance,

package/dist/styles-scss/_ui.scss

@@ -5,6 +5,10 @@
 @use 'sass:meta';
 @use 'colors';
 
+@function negative($cssValue) {
+  @return calc(-1 * #{$cssValue});
+}
+
 @mixin def($var, $value) {
   --#{$var}: #{$value};
 }
@@ -41,18 +45,42 @@
   @return var(--font-size-#{$size});
 }
 
+@mixin font-size($size: 'normal') {
+  font-size: var(--font-size-#{$size});
+}
+
 @function font-weight($weight: 'normal') {
   @return var(--font-weight-#{$weight});
 }
 
-@function negative($cssValue) {
-  @return calc(-1 * #{$cssValue});
+@mixin font-weight($weight: 'normal') {
+  font-weight: var(--font-weight-#{$weight});
+}
+
+@mixin font-family($family: 'primary') {
+  font-family: var(--font-family-#{$family});
+}
+
+@mixin font-color($colorToken) {
+  color: color-token($colorToken);
+}
+
+@mixin letter-spacing($size: 'normal') {
+  letter-spacing: var(--letter-spacing-#{$size});
+}
+
+@mixin line-height($size: 'normal') {
+  line-height: var(--line-height-#{$size});
 }
 
 @function border-radius($size: 'normal') {
   @return var(--border-radius-#{$size});
 }
 
+@mixin border-radius($size: 'normal') {
+  border-radius: var(--border-radius-#{$size});
+}
+
 @function viewport-width($multiplier: 1) {
   @return calc((var(--width) - var(--offset-safezone) * 2) * #{$multiplier});
 }
@@ -170,34 +198,6 @@ $cfxuiColorAlpha: (
   @return var(--color-#{$name});
 }
 
-@mixin border-radius($size: 'normal') {
-  border-radius: var(--border-radius-#{$size});
-}
-
-@mixin font-size($size: 'normal') {
-  font-size: var(--font-size-#{$size});
-}
-
-@mixin font-family($family: 'primary') {
-  font-family: var(--font-family-#{$family});
-}
-
-@mixin font-weight($weight: 'normal') {
-  font-weight: var(--font-weight-#{$weight});
-}
-
-@mixin font-color($colorToken) {
-  color: color-token($colorToken);
-}
-
-@mixin letter-spacing($size: 'normal') {
-  letter-spacing: var(--letter-spacing-#{$size});
-}
-
-@mixin line-height($size: 'normal') {
-  line-height: var(--line-height-#{$size});
-}
-
 @mixin animated($props: 'all', $subClass: '&') {
   @if meta.type-of($props) == 'list' {
     $transition: ();
@@ -366,12 +366,14 @@ $mediaMap: (
     @if $size == 'initial' {
       @content;
     } @else {
-      @media (width >= calc(map.get($mediaMap, $size) - 1px)) {
+      $mediaSize: map.get($mediaMap, $size);
+
+      @media (width < $mediaSize) {
         @content;
       }
     }
   } @else {
-    @media (min-width: $fix) {
+    @media (width < $fix) {
       @content;
     }
   }

package/dist/styles-scss/tokens.scss

@@ -40,18 +40,58 @@
   }
 }
 
+// font size is responsive, and one size in different media queries can have different values
 @mixin text-tokens() {
-  @include ui.define-font-size('xxsmall', ui.q(1.875), 1.5);
-  @include ui.define-font-size('xsmall', ui.q(2.25), 1.5);
-  @include ui.define-font-size('small', ui.q(2.5), 1.5);
-
-  // normal is mirroring small, becouse it's the default size
-  @include ui.define-font-size('normal', ui.q(2.5), 1.5);
-  @include ui.define-font-size('medium', ui.q(3.125), 1.3);
-  @include ui.define-font-size('large', ui.q(3.75), 1.3);
-  @include ui.define-font-size('xlarge', ui.q(5), 1.3);
-  @include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
-  @include ui.define-font-size('xxxlarge', ui.q(8.75), 1.15);
+  @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.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);
+    @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.3);
+    @include ui.define-font-size('large', ui.q(3), 1.3);
+    @include ui.define-font-size('xlarge', ui.q(4), 1.3);
+    @include ui.define-font-size('xxlarge', ui.q(5), 1.3);
+    @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
+  }
+
+  @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);
+    @include ui.define-font-size('xsmall', ui.q(2), 1.5);
+    @include ui.define-font-size('small', ui.q(2.25), 1.5);
+    @include ui.define-font-size('normal', ui.q(2.25), 1.5);
+    @include ui.define-font-size('medium', ui.q(2.5), 1.3);
+    @include ui.define-font-size('large', ui.q(3.75), 1.3);
+    @include ui.define-font-size('xlarge', ui.q(5), 1.3);
+    @include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
+    @include ui.define-font-size('xxxlarge', ui.q(7.5), 1.2);
+  }
+
+  @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);
+    @include ui.define-font-size('xsmall', ui.q(2), 1.5);
+    @include ui.define-font-size('small', ui.q(2.25), 1.5);
+    @include ui.define-font-size('normal', ui.q(2.25), 1.5);
+    @include ui.define-font-size('medium', ui.q(2.5), 1.3);
+    @include ui.define-font-size('large', ui.q(3.75), 1.3);
+    @include ui.define-font-size('xlarge', ui.q(5), 1.3);
+    @include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
+    @include ui.define-font-size('xxxlarge', ui.q(7.5), 1.2);
+  }
+
   @include ui.def('font-weight-thin', 100);
   @include ui.def('font-weight-small', 300);
   @include ui.def('font-weight-normal', 400);
@@ -205,6 +245,8 @@
   @include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: 0.1));
   @include ui.define-color-token('button-active-border', ui.color('primary', $alpha: 0.15));
   @include ui.define-color-token('button-active-background', transparent);
+
+  // primary
   @include ui.define-color-token('button-primary-text', ui.color('primary'));
   @include ui.define-color-token('button-primary-border', ui.color('accent'));
   @include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: 0.4));
@@ -217,6 +259,8 @@
   @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: 0.4));
   @include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: 0.4));
   @include ui.define-color-token('button-primary-disabled-background', transparent);
+
+  // secondary
   @include ui.define-color-token('button-secondary-text', ui.color('primary'));
   @include ui.define-color-token('button-secondary-border', ui.color('primary'));
   @include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
@@ -229,6 +273,8 @@
   @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: 0.4));
   @include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: 0.4));
   @include ui.define-color-token('button-secondary-disabled-background', transparent);
+
+  // onlight
   @include ui.define-color-token('button-onlight-text', ui.color('primary'));
   @include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
   @include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
@@ -241,6 +287,8 @@
   @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: 0.4));
   @include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: 0.4));
   @include ui.define-color-token('button-onlight-disabled-background', transparent);
+
+  // linked
   @include ui.define-color-token('button-linked-text', ui.color('tertiary'));
   @include ui.define-color-token('button-linked-border', transparent);
   @include ui.define-color-token('button-linked-background', transparent);
@@ -253,6 +301,8 @@
   @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: 0.4));
   @include ui.define-color-token('button-linked-disabled-border', transparent);
   @include ui.define-color-token('button-linked-disabled-background', transparent);
+
+  // quicklink
   @include ui.define-color-token('button-quicklink-text', ui.color('primary'));
   @include ui.define-color-token('button-quicklink-border', transparent);
   @include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));

package/dist/utils/ui/index.d.ts

@@ -1,3 +1,3 @@
 export { ui } from './ui';
 export { OffsetEnum, MediaQueryEnum, BorderRadiusEnum, ZIndexEnum, ColorEnum, TextSizeEnum, } from './ui.types';
-export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, } from './ui.types';
+export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, OpacityRange, } from './ui.types';

package/dist/utils/ui/ui.types.d.ts

@@ -88,3 +88,4 @@ export interface MPProps {
     py?: ResponsiveOffsetType;
     px?: ResponsiveOffsetType;
 }
+export type OpacityRange = 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;

package/package.json

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