@loja-integrada/admin-components 0.19.10 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.19.10",
+  "version": "0.21.0",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {
@@ -134,7 +134,7 @@
     "tailwindcss": ">=3.1.0"
   },
   "dependencies": {
-    "@loja-integrada/tailwindcss-config": "^2.0.3",
+    "@loja-integrada/tailwindcss-config": "^2.4.0",
     "@tippyjs/react": "^4.2.5",
     "@types/react-select": "^4.0.17",
     "babel-jest": "^29.2.2",

package/src/Components/Button/Button.tsx

@@ -27,12 +27,12 @@ const commonFocus =
 
 const listOfStyles = {
   primary: `bg-primary text-base-1 ${listOfStylesHover['primary']} ${listOfStylesActive['primary']} ${commonFocus}`,
-  secondary: `bg-primary-light text-primary-bold  ${listOfStylesHover['secondary']} ${listOfStylesActive['secondary']} ${commonFocus}`,
+  secondary: `bg-primary-light text-primary-bold komea:bg-secondary komea:text-secondary-bold komea:hover:bg-secondary/80 komea:active:bg-secondary/60 komea:active:shadow-none  ${listOfStylesHover['secondary']} ${listOfStylesActive['secondary']} ${commonFocus}`,
   outlineSecondary: `bg-transparent text-primary border border-primary ${listOfStylesHover['outlineSecondary']} ${listOfStylesActive['outlineSecondary']} ${commonFocus}`,
   tertiary: `bg-inverted-2 text-on-primary ${listOfStylesHover['tertiary']} ${listOfStylesActive['tertiary']} ${commonFocus}`,
   warning: `bg-warning text-on-base ${listOfStylesHover['warning']} ${listOfStylesActive['warning']} ${commonFocus}`,
   danger: `bg-danger text-base-1 ${listOfStylesHover['danger']} ${listOfStylesActive['danger']} ${commonFocus}`,
-  outline: `bg-transparent text-inverted-2 border border-inverted-2 ${listOfStylesHover['outline']} ${listOfStylesActive['outline']} ${commonFocus}`,
+  outline: `bg-transparent text-inverted-2 border border-inverted-2 komea:border-card-stroke komea:bg-base-2 komea:text-on-base komea:hover:bg-primary-light komea:active:bg-secondary komea:active:shadow-none ${listOfStylesHover['outline']} ${listOfStylesActive['outline']} ${commonFocus}`,
   onlyText: `bg-transparent border-transparent text-inverted-2 px-0 ${listOfStylesHover['onlyText']} ${listOfStylesActive['onlyText']} ${commonFocus}`,
 }
 
@@ -49,9 +49,9 @@ const listOfStylesDisabled = {
 }
 
 const listOfSizes = {
-  small: `text-f6 h-10`,
-  default: `text-f6 h-12`,
-  large: `text-f5 h-14`,
+  small: `text-f6 komea:h-8 komea:px-3 h-10`,
+  default: `text-f6 komea:h-9 h-12`,
+  large: `text-f5 komea:h-10 komea:px-6 h-14`,
 }
 
 const ButtonType = React.forwardRef(
@@ -97,7 +97,7 @@ const ButtonComponent = (
     ;(!disabled || !loading) && onClick && onClick(event)
   }
 
-  let classes = `inline-flex leading-none font-semibold tracking-tight items-center justify-center px-5 text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
+  let classes = `inline-flex font-medium items-center justify-center px-5 komea:px-4 text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
 
   if (loading) {
     classes +=

package/src/Components/HelpLink/index.tsx

@@ -17,7 +17,7 @@ export const HelpLink: React.FC<HelpLinkProps> = React.memo(
       <>
         <Icon icon="questionCircle" size={4} className="shrink-0" block />
         <span
-          className={`text-f6 font-semibold tracking-4 leading-6 ml-2
+          className={`text-f6 font-semibold ml-2
             ${!mobileText ? 'hidden md:inline' : ''}
           `}
         >

package/src/Components/Modal/Modal.tsx

@@ -57,7 +57,7 @@ const ModalComponent = ({
         <div {...props}>
           <div className="ReactModal__header w-full flex justify-between items-start">
             <span
-              className={`min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words ${
+              className={`min-w-0 text-inverted-2 text-xs font-semibold uppercase komea:font-medium komea:normal-case break-words ${
                 headerTitle ? 'pb-3' : ''
               }`}
             >

package/src/Components/Table/Table.tsx

@@ -150,7 +150,7 @@ const TableComponent = ({
       <table
         {...getTableProps()}
         id={id}
-        className={`w-full bg-base-1 rounded border-separate border border-card-stroke`}
+        className={`w-full bg-base-1 rounded komea:rounded-xs border-separate border border-card-stroke`}
         cellSpacing="0"
       >
         <thead className={`text-left`}>
@@ -211,7 +211,7 @@ const TableComponent = ({
             <tr>
               <td colSpan={columnsLength || 1} className={`${TdClasses}`}>
                 <TdWrapper>
-                  <div className="text-center py-16 text-xl font-semibold text-on-base-2">
+                  <div className="text-center py-16 text-xl font-medium text-on-base-2">
                     {emptyText}
                   </div>
                 </TdWrapper>

package/src/Components/TableList/TableList.tsx

@@ -45,7 +45,7 @@ const TableListComponent = ({
   }, [items])
 
   return (
-    <div className={`table-list tracking-tight ${className}`}>
+    <div className={`table-list ${className}`}>
       {isLoading ? (
         <div className="table-list-loading">
           <TableListItemLoading />
@@ -60,11 +60,11 @@ const TableListComponent = ({
               {empty.illustration}
             </div>
           )}
-          <div className="table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7">
+          <div className="table-list-empty-title text-center text-f4 font-medium text-primary-bold">
             {empty.title}
           </div>
           {empty.subTitle && (
-            <div className="table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1">
+            <div className="table-list-empty-subtitle text-center text-f6 text-on-base-2 -mt-1">
               {empty.subTitle}
             </div>
           )}
@@ -89,7 +89,7 @@ const TableListComponent = ({
                   }`}
                 >
                   <span
-                    className={`text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2`}
+                    className={`text-f5 text-on-base-2 break-words inline-block pt-6 pb-2`}
                   >
                     {group.title}
                   </span>

package/src/Components/TableList/TableListItemWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { TableListItemWrapperProp } from './TableListItem.interface'
 
-const ItemWrapperClasses = `flex relative py-6 text-f7 leading-4 break-words no-underline`
+const ItemWrapperClasses = `flex relative py-6 text-f7 break-words no-underline`
 const ItemWrapperClassesContainerHover = `before:hover:block before:hover:absolute before:hover:h-full before:hover:w-5 lg:before:hover:w-8 before:hover:top-0 before:hover:-left-5 lg:before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-5 lg:after:hover:w-8 after:hover:top-0 after:hover:-right-5 lg:after:hover:-right-8 after:hover:bg-base-2`
 
 const DefaultWrapper = (props: any) => {

package/src/Components/Tabs/TabsItem.tsx

@@ -39,7 +39,7 @@ export const TabsItem = ({
       disabled={disabled}
     >
       <span
-        className={`block tracking-4 text-f6 text-sm py-4 border-b-4 break-words ${
+        className={`block text-f6 py-4 border-b-4 break-words ${
           disabled ? '' : 'group-hover:font-semibold'
         } ${activeStyles(active)} ${boldFixStyle}`}
         data-title={title}

package/src/Components/Timeline/TimelineItem.tsx

@@ -19,7 +19,7 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
       </div>
       <div className="ml-7 pt-px">
         <div
-          className={`timeline-title group py-1 text-f6 leading-6 tracking-4 text-inverted-1 font-semibold break-words ${
+          className={`timeline-title group py-1 text-f6 text-inverted-1 font-semibold break-words ${
             showToggle ? 'cursor-pointer' : ''
           }`}
           onClick={() => showToggle && setIsOpen((isOpen) => !isOpen)}
@@ -41,14 +41,14 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
           <span className="inline break-words">{item.title}</span>
         </div>
         {item.timestamp && (
-          <div className="timeline-timestamp mb-1 inline-flex items-center text-xs tracking-4 text-inverted-2 break-words">
+          <div className="timeline-timestamp mb-1 inline-flex items-center text-xs text-inverted-2 break-words">
             <Icon icon="clock" size={3} className="mr-1" />
             {item.timestamp}
           </div>
         )}
         {item.description && (
           <div
-            className={`timeline-description mt-1 overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height ${
+            className={`timeline-description mt-1 overflow-hidden text-sm text-inverted-1 break-words transition-max-height ${
               isOpen ? 'max-h-96' : 'max-h-0'
             }`}
           >

package/src/Forms/Checkbox/Checkbox.tsx

@@ -49,7 +49,7 @@ const CheckboxComponent = (
     isChecked || isIndeterminate ? 'scale-100' : 'scale-0'
   }`
 
-  const checkboxIconContainerClasses = `border border-card-stroke transition duration-200 ease-in-out
+  const checkboxIconContainerClasses = `border border-card-stroke komea:border-input-stroke komea:shadow-sm transition duration-200 ease-in-out
     ${
       disabled
         ? 'bg-base-4'
@@ -58,10 +58,10 @@ const CheckboxComponent = (
         : 'bg-base-1'
     }
     ${isCenterBoxAlign ? 'items-center' : ''}
-    rounded w-4 h-4 flex justify-center m-px
+    rounded-xs w-4 h-4 flex justify-center m-px
   `
 
-  const checkboxLabelClasses = `ml-1 input-label text-f6 tracking-4 leading-6 ${
+  const checkboxLabelClasses = `ml-1 input-label text-f6 ${
     hasErrorState ? 'text-danger' : disabled ? 'text-inverted-2' : ''
   }`
 
@@ -87,7 +87,7 @@ const CheckboxComponent = (
         htmlFor={inputId}
         className={`inline-flex ${alignOptions[boxAlign]} cursor-pointer`}
       >
-        <span className="relative rounded z-10 flex items-center justify-center focus-within:ring-2 ring-focus">
+        <span className="relative rounded-xs z-10 flex items-center justify-center focus-within:ring-2 komea:focus-within:ring-[3px] ring-focus komea:ring-focus/50">
           <input
             ref={ref || inputRef}
             type="checkbox"

package/src/Forms/Dropdown/Dropdown.tsx

@@ -13,9 +13,9 @@ import { InputHelpText } from '../InputHelpText'
 import { InputLabel, InputLabelProps } from '../InputLabel'
 
 export const sizeClasses = {
-  default: 'h-12',
+  default: 'komea:h-9 h-12',
   small: 'h-8',
-  large: 'h-14',
+  large: 'komea:h-10 h-14',
   xlarge: 'h-24',
 }
 
@@ -27,7 +27,8 @@ export const valueFontSizesClasses = {
 }
 
 export const variantControlClasses = {
-  default: 'border-card-stroke rounded pl-2',
+  default:
+    'border-card-stroke rounded pl-2 komea:border-input-stroke komea:shadow-sm',
   secondary:
     'border-inverted-2 hover:bg-base-3 rounded-md focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:bg-base-1 pl-2',
   simple: 'border-0 border-b border-on-base-3',
@@ -175,7 +176,7 @@ const formatGroupLabel = (
 const CustomGroupHeading = (props: any) => (
   <GroupHeading
     {...props}
-    className="p-2 pt-0 pb-3 text-inverted-1 uppercase font-bold text-xs"
+    className="p-2 pt-0 pb-3 text-inverted-1 uppercase font-semibold text-xs"
   />
 )
 
@@ -189,7 +190,7 @@ const CustomPlaceholder = (
 ) => (
   <Placeholder
     {...props}
-    className={`tracking-4 w-full pr-2 truncate ${valueFontSizesClasses[fontSize]}`}
+    className={`w-full pr-2 truncate ${valueFontSizesClasses[fontSize]}`}
   />
 )
 
@@ -200,7 +201,7 @@ const CustomSingleValue = (
 ) => (
   <SingleValue
     {...props}
-    className={`tracking-4 truncate ${variantValueClasses[variant]} ${valueFontSizesClasses[fontSize]}`}
+    className={`truncate ${variantValueClasses[variant]} ${valueFontSizesClasses[fontSize]}`}
   />
 )
 

package/src/Forms/Input/Input.tsx

@@ -59,7 +59,7 @@ const InputComponent = (
     inputContainerClass += ` ${defaultBorderClasses}`
   }
 
-  const inputClass = `w-full tracking-4 px-4 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
+  const inputClass = `w-full px-4 komea:px-3 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
     hasErrorState ? errorBorderClasses : defaultBorderClasses
   } ${prefix && prefixBorder ? 'border-l' : ''}  ${
     sufix && sufixBorder ? 'border-r' : ''

package/src/Forms/InputHelpText/InputHelpText.tsx

@@ -5,7 +5,7 @@ export const InputHelpText = React.memo(
     if (!helpText) return null
     return (
       <div
-        className={`input-help-text text-xs tracking-4 leading-4 ${
+        className={`input-help-text text-xs ${
           hasError ? 'text-danger' : 'text-on-base-2'
         } ${className}`}
       >

package/src/Forms/InputLabel/InputLabel.tsx

@@ -12,7 +12,7 @@ export const InputLabel = React.memo(
     if (!label) return null
     return (
       <label
-        className={`input-label text-f6 tracking-4 leading-6 font-semibold inline-flex items-center mb-0.5 ${
+        className={`input-label text-f6 font-medium inline-flex items-center mb-0.5 ${
           hasError ? 'text-danger' : 'text-on-base'
         } ${className}`}
         htmlFor={htmlFor}

package/src/Forms/Toggle/Toggle.tsx

@@ -51,7 +51,7 @@ const ToggleComponent = (
 
   const toggleCircleClasses = `transform  ${toggleClasses.circle[toggleCheckText][toggleStatusText]} absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition`
 
-  const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 tracking-4 label`
+  const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 komea:font-medium label`
 
   return (
     <label

package/src/Forms/ToggleButton/ToggleButton.tsx

@@ -58,7 +58,7 @@ const ToggleButtonComponent = (
 
   return (
     <div
-      className={`${className} inline-flex justify-center items-center h-12 ${toggleClasses}} rounded text-f6 tracking-4 font-semibold`}
+      className={`${className} inline-flex justify-center items-center h-12 ${toggleClasses}} rounded text-f6 font-semibold`}
     >
       <ul className="list-none inline-flex justify-center items-center h-12">
         {toggleItems}

package/src/Forms/commonStyles.ts

@@ -5,25 +5,26 @@ export const inputContainerDisabledClasses =
 
 export const inputContainerReadonlyClasses = '!bg-base-2'
 
-export const errorBorderClasses = 'border-danger focus:border-danger'
+export const errorBorderClasses =
+  'border-danger focus:border-danger komea:focus:ring-danger/20'
 
-export const defaultBorderClasses = 'border-card-stroke'
+export const defaultBorderClasses = 'border-card-stroke komea:border-input-stroke'
 
 export const focusClass = 'focus:border-inverted-1'
 
-export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm tracking-4 min-w-0 w-full transition-border duration-75 ${focusClass} ${inputPlaceholderClasses}`
+export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 komea:border-input-stroke komea:px-3 komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus:border-focus komea:focus:ring-[3px] komea:focus:ring-focus/50 ${focusClass} ${inputPlaceholderClasses}`
 
-export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm tracking-4 min-w-0 w-full transition-border duration-75 overflow-hidden ${inputPlaceholderClasses}`
+export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 overflow-hidden komea:border-input-stroke komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:border-focus komea:focus-within:ring-[3px] komea:focus-within:ring-focus/50 ${inputPlaceholderClasses}`
 
-const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 tracking-4 -mt-px`
+const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 -mt-px`
 
 export const prefixClasses = `${adornmentClasses} rounded-l left-0`
 
 export const sufixClasses = `${adornmentClasses} rounded-r right-0`
 
 export const variantClasses = {
-  default: 'h-12',
-  small: 'h-10',
-  large: 'h-14',
+  default: 'komea:h-9 h-12',
+  small: 'komea:h-8 h-10',
+  large: 'komea:h-10 h-14',
   xlarge: 'h-24',
 }

package/src/Indicators/Alert/Alert.spec.tsx

@@ -36,7 +36,7 @@ describe(specTitle('Alert tests'), () => {
     cy.get('.alert').should('have.class', 'bg-danger-light')
 
     mount(<Default type="info" />)
-    cy.get('.alert').should('have.class', 'bg-focus-light')
+    cy.get('.alert').should('have.class', 'bg-info-light')
 
     mount(<Default type="primary" />)
     cy.get('.alert').should('have.class', 'bg-primary-light')

package/src/Indicators/Alert/Alert.tsx

@@ -16,42 +16,51 @@ const alertTypes: Record<
     class: string
     icon: IconProps['icon']
     iconClass: string
+    textClass: string
   }
 > = {
   success: {
-    class: 'bg-success-light border-success',
+    class: 'bg-success-light border-success komea:border-success-stroke',
     icon: 'checkCircle',
-    iconClass: 'text-success',
+    iconClass: 'text-success komea:text-success-dark',
+    textClass: 'komea:text-success-dark',
   },
   warning: {
-    class: 'bg-warning-light border-warning-dark',
+    class: 'bg-warning-light border-warning-dark komea:border-warning-stroke',
     icon: 'exclamationTriangle',
     iconClass: 'text-warning-dark',
+    textClass: 'komea:text-warning-dark',
   },
   danger: {
-    class: 'bg-danger-light border-danger',
+    class: 'bg-danger-light border-danger komea:border-danger-stroke',
     icon: 'ban',
-    iconClass: 'text-danger',
+    iconClass: 'text-danger komea:text-danger-dark',
+    textClass: 'komea:text-danger-dark',
   },
   info: {
-    class: 'bg-focus-light border-focus-dark',
+    class: 'bg-info-light border-info-dark komea:border-info-stroke',
     icon: 'infoCircle',
-    iconClass: 'text-focus-dark',
+    iconClass: 'text-info-dark',
+    textClass: 'komea:text-info-dark',
   },
   infoOutline: {
-    class: 'bg-base-1 border-focus-dark',
+    class: 'bg-base-1 border-info-dark komea:border-info-stroke',
     icon: 'infoCircle',
-    iconClass: 'text-focus-dark',
+    iconClass: 'text-info-dark',
+    textClass: '',
   },
   infoDark: {
-    class: 'bg-base-1 border-[#607081]',
+    // O hex cravado não acompanha o `data-chrome`; na chrome nova cai no neutro do design system.
+    class: 'bg-base-1 border-[#607081] komea:border-card-stroke',
     icon: 'infoCircle',
-    iconClass: 'text-[#607081]',
+    iconClass: 'text-[#607081] komea:text-on-base-2',
+    textClass: '',
   },
   primary: {
-    class: 'bg-primary-light border-primary',
+    class: 'bg-primary-light border-primary komea:border-card-stroke',
     icon: 'infoCircle',
     iconClass: 'text-primary',
+    textClass: '',
   },
 }
 
@@ -80,7 +89,7 @@ const AlertComponent = ({
   if (!alertIsOpen) return null
   return (
     <div
-      className={`alert border-l-4 py-4 pl-6 pr-5 rounded w-full relative flex items-start sm:items-center ${
+      className={`alert border-l-4 komea:border-l py-4 pl-6 pr-5 rounded w-full relative flex items-start sm:items-center ${
         alertTypes[type].class
       }${hideBorder ? '' : ' border'}`}
     >
@@ -95,9 +104,17 @@ const AlertComponent = ({
         </div>
       )}
       <div className="flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words text-f6 tracking-4 leading-6 text-on-base">
-          <span className="alert-title font-semibold">{title}</span>
-          {subtitle && <span className="alert-subtitle mt-1">{subtitle}</span>}
+        <div
+          className={`flex flex-col justify-center min-w-0 break-words text-f6 text-on-base ${alertTypes[type].textClass}`}
+        >
+          <span className="alert-title font-semibold komea:font-medium">
+            {title}
+          </span>
+          {subtitle && (
+            <span className="alert-subtitle komea:text-caption mt-1">
+              {subtitle}
+            </span>
+          )}
         </div>
         {actions && (
           <div className="alert-actions flex flex-shrink-0 items-center flex-row sm:flex-row-reverse sm:space-x-reverse space-x-3 mt-3 sm:mt-0 sm:ml-5">

package/src/Indicators/Badge/Badge.spec.tsx

@@ -69,6 +69,6 @@ describe(specTitle('Badge tests'), () => {
     cy.get(badgeClass).should('have.class', 'bg-danger-dark text-base-1')
 
     mount(<Default type="focus" />)
-    cy.get(badgeClass).should('have.class', 'bg-focus text-base-1')
+    cy.get(badgeClass).should('have.class', 'bg-info text-base-1')
   })
 })

package/src/Indicators/Badge/Badge.tsx

@@ -8,7 +8,7 @@ const badgeTypes = {
   danger: 'bg-danger-dark text-base-1',
   success: 'bg-success-dark text-base-1',
   warning: 'bg-warning-dark text-base-1',
-  focus: 'bg-focus text-base-1',
+  focus: 'bg-info text-base-1',
 }
 
 const badgeRounded = {
@@ -44,7 +44,7 @@ const BadgeComponent = ({
         expanded ? 'flex w-full' : 'inline-flex'
       }`}
     >
-      <span className="badgeText tracking-4 font-semibold">{text}</span>
+      <span className="badgeText font-semibold">{text}</span>
     </div>
   )
 }

package/src/Indicators/InformationBox/InformationBox.spec.tsx

@@ -29,9 +29,9 @@ describe(specTitle('InformationBox tests'), () => {
     cy.get('.InformationBox').should('have.class', 'bg-danger-light')
 
     mount(<Default type="info" />)
-    cy.get('.InformationBox-title').should('have.class', 'text-focus-dark')
+    cy.get('.InformationBox-title').should('have.class', 'text-info-dark')
     cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
-    cy.get('.InformationBox').should('have.class', 'bg-focus-light')
+    cy.get('.InformationBox').should('have.class', 'bg-info-light')
   })
 
   it('Close button', () => {

package/src/Indicators/InformationBox/InformationBox.tsx

@@ -36,10 +36,10 @@ const InformationBoxTypes: Record<
   },
   info: {
     title: 'Informação',
-    titleClass: 'text-focus-dark',
-    class: 'bg-focus-light border-focus-dark',
+    titleClass: 'text-info-dark',
+    class: 'bg-info-light border-info-dark komea:border-info-stroke',
     icon: 'lightbulb',
-    iconClass: 'text-focus-dark',
+    iconClass: 'text-info-dark',
   },
 }
 
@@ -74,7 +74,7 @@ const InformationBoxComponent = ({
       </div>
 
       <div className="flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base">
+        <div className="flex flex-col justify-center min-w-0 break-words leading-6 text-on-base">
           <span
             className={`InformationBox-title text-f5 font-semibold ${InformationBoxTypes[type].titleClass}`}
           >

package/src/Indicators/Tag/Tag.tsx

@@ -19,7 +19,7 @@ const TagComponent = ({
     <div
       className={`tag ${
         fullWidth ? 'flex' : 'inline-flex'
-      } items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold ${
+      } items-center justify-between border rounded px-4 py-2 text-f6 text-primary-bold ${
         TagTypes[type]
       } ${className}`}
     >

package/src/Indicators/Tooltip/style.scss

@@ -1,5 +1,5 @@
 .tippy-box {
-  @apply relative bg-inverted-1 text-base-1 rounded text-f7 tracking-4 leading-4 outline-0 transition-all;
+  @apply relative bg-inverted-1 text-base-1 rounded text-f7 outline-0 transition-all;
 
   &[data-animation='fade'][data-state='hidden'] {
     @apply opacity-0;

package/src/Layout/Box/Components/Header/BoxHeader.tsx

@@ -30,14 +30,12 @@ export const BoxHeader = React.memo(
             >
               <div className="flex-1 min-w-0 mr-2">
                 {title && (
-                  <h3
-                    className={`tracking-3 text-base font-semibold break-words`}
-                  >
+                  <h3 className="text-f5 font-medium break-words lg:text-f4">
                     {title}
                   </h3>
                 )}
                 {subtitle && (
-                  <h4 className="tracking-4 text-sm text-on-base-2 leading-6 break-words">
+                  <h4 className="text-f7 text-on-base-2 break-words lg:text-f6">
                     {subtitle}
                   </h4>
                 )}

package/src/Layout/ListActions/ListActions.tsx

@@ -21,7 +21,7 @@ const Tag = ({ type, text }: ListActionsTagProps) => {
 
   return (
     <span
-      className={`top-3 left-3 px-0.5 py-px rounded-sm text-f8 font-semibold leading-3 text-base-1 ${commonClasses}`}
+      className={`top-3 left-3 px-0.5 py-px rounded-sm text-f8 font-semibold text-base-1 ${commonClasses}`}
     >
       <Badge
         size="xsmall"
@@ -60,7 +60,7 @@ const ListActionButton = ({
         <Icon icon={icon} size={5} className="p-px" />
         {tagType || tagText ? <Tag type={tagType} text={tagText} /> : null}
       </span>
-      <p className="lg:w-24 text-f8 lg:text-f7 font-semibold tracking-4 text-center select-none leading-tight">
+      <p className="lg:w-24 text-f8 lg:text-f7 font-semibold text-center select-none">
         {text}
       </p>
     </button>

package/src/Layout/Sidebar/Item.tsx

@@ -3,7 +3,7 @@ import { Icon, IconProps } from '../../Icons/Icon'
 import { safeCSSId } from '../../utils'
 import { SidebarSubItemProps } from './ItemSub'
 
-const sidebarItemBtnClasses = `flex items-center relative px-6 py-3.5 lg:py-2.5 text-sm tracking-4 font-semibold duration-200 group-hover:text-on-base`
+const sidebarItemBtnClasses = `flex items-center relative px-6 py-3.5 lg:py-2.5 text-sm font-semibold duration-200 group-hover:text-on-base`
 const sidebarItemBtnActiveClasses = (active: boolean | undefined) =>
   active ? `text-on-base` : `text-on-base-2`
 const sidebarItemBtnIconClasses = `w-4 h-6 flex-shrink-0`

package/src/Layout/Sidebar/ItemSub.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { safeCSSId } from '../../utils'
 
-const sidebarItemDropdownItemClasses = `flex items-center pl-14 pr-0 py-1.5 lg:py-1 text-on-base-2 text-f6 tracking-4 leading-6 duration-200 hover:text-on-base`
+const sidebarItemDropdownItemClasses = `flex items-center pl-14 pr-0 py-1.5 lg:py-1 text-on-base-2 text-f6 duration-200 hover:text-on-base`
 const sidebarItemDropdownItemActiveClasses = (active: boolean | undefined) =>
   active ? `text-on-base font-semibold active` : `text-on-base-2`
 

package/src/Navigation/Breadcrumb/index.tsx

@@ -62,7 +62,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
         <div
           className={`header-navigation-breadcrumb max-w-full truncate w-full`}
         >
-          <div className="w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3">
+          <div className="w-full inline-flex self-center items-center font-semibold text-f5 sm:text-f4 lg:text-f3">
             {(previousTitle || previousHref || Link) && (
               <span className="header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate">
                 {renderPrevLink()}
@@ -72,7 +72,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
               </span>
             )}
             <span
-              className={`header-navigation-current text-on-base truncate leading-relaxed ${
+              className={`header-navigation-current text-on-base truncate ${
                 mobileAlign === 'center'
                   ? 'w-full lg:w-auto text-center lg:text-left'
                   : ''

package/src/Navigation/Pagination/PaginationInfo.tsx

@@ -19,7 +19,7 @@ const PaginationInfoComponent = ({
 
   return (
     <div className="pagination-info hidden sm:flex">
-      <div className="flex items-center mr-5 text-inverted-2 tracking-4 text-f6">
+      <div className="flex items-center mr-5 text-inverted-2 text-f6">
         {itemsLengthOptions ? (
           <Select
             id="selectItemsPerPage"

package/src/Navigation/Pagination/PaginationNav.tsx

@@ -46,7 +46,7 @@ const PaginationNavComponent = ({
 
   return (
     <div className="pagination-nav flex items-center justify-between w-full sm:w-auto">
-      <div className="text-inverted-2 text-f6 tracking-4">
+      <div className="text-inverted-2 text-f6">
         <span
           id="btnPaginationActualPage"
           className="pagination-nav-current inline-block w-9 bg-base-1 border border-card-stroke/50 rounded font-semibold leading-8 text-center text-primary"