@seeqdev/qomponents 0.0.178 → 0.0.179

package/README.md

@@ -48,6 +48,15 @@ To make sure all styles are properly applied be sure to include the qomponents c
 
 ```css
 @import '@seeqdev/qomponents/dist/styles.css';
+
+@font-face {
+  font-family: 'fontCustom';
+  src: url('@seeqdev/qomponents/dist/FontCustom.woff2') format('woff2'),
+    url('@seeqdev/qomponents/dist/FontCustom.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 ```
 
 <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the

package/dist/example/src/Example.tsx

@@ -37,8 +37,8 @@ const options = [
 ];
 
 const Trigger = ({ label }: { label: string }) => (
-  <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
-    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
+  <div className="flex justify-start items-center border-b px-2 tw:text-sq-theme-dark">
+    <Icon icon="fc-arrow-dropdown" extraClassNames="tw:text-sq-theme-dark mr-[0.5rem] text-[0.75rem]" type="text" />
     {label}
   </div>
 );
@@ -80,7 +80,7 @@ const accordionItems = [
 ];
 
 const renderData = (text: string) => (
-  <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
+  <div className="tw:text-sq-gray dark:tw-text-sq-white p-6">
     <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
   </div>
 );
@@ -484,7 +484,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">Explore the Mountains</div>
-                    <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
+                    <div className="text-xs tw:text-sq-dark-gray">Find peace in nature's beauty.</div>
                   </div>,
                   <div className="flex flex-col items-center justify-center p-4" key="slide2">
                     <img
@@ -493,7 +493,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">City Lights</div>
-                    <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
+                    <div className="text-xs tw:text-sq-dark-gray">Experience the energy of the city.</div>
                   </div>,
                   <div className="flex flex-col items-center justify-center p-4" key="slide3">
                     <img
@@ -502,7 +502,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">Relax at the Beach</div>
-                    <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
+                    <div className="text-xs tw:text-sq-dark-gray">Soak up the sun and surf.</div>
                   </div>,
                 ]}
                 showArrows={false}
@@ -527,7 +527,7 @@ function Example() {
               <Collapse isVisible={collapseVisible}>
                 <div className="p-4 mt-2 bg-transparent rounded-md">
                   <div className="font-bold">Advanced Settings</div>
-                  <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
+                  <div className="text-xs tw:text-sq-dark-gray">Configure rarely used options here.</div>
                   <Checkbox label="Enable beta features" />
                   <Checkbox label="Show debug info" />
                 </div>