fix carousel hardcoded gradient color (#104)

Co-authored-by: ponnexcodev <[email protected]>
Toniq-Labs · May 3, 2024 · 344e627 · 344e627
1 parent 939f581
commit 344e627
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.9.1",
+    "version": "16.9.2",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.9.1",
+    "version": "16.9.2",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-carousel/toniq-carousel.element.ts b/packages/design-system/src/elements/toniq-carousel/toniq-carousel.element.ts
@@ -96,7 +96,7 @@ export const ToniqCarousel = defineToniqElement<{
             z-index: 200;
             background: linear-gradient(
                 var(--background-degrees),
-                white 0%,
+                ${toniqColors.pagePrimary.backgroundColor} 0%,
                 rgba(255, 255, 255, 0) 100%
             );
             will-change: visibility;
@@ -123,7 +123,7 @@ export const ToniqCarousel = defineToniqElement<{
             padding: 8px;
             border-radius: 50%;
             transition: ${toniqDurations.interaction};
-            border: 1px solid transparent;
+            border: 1px solid ${toniqColors.dividerFaint.foregroundColor};
             ${applyBackgroundAndForeground(toniqColors.pagePrimary)};
         }
 

diff --git a/packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts b/packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts
@@ -65,7 +65,6 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
         }
 
         .table-wrapper {
-            min-height: 500px;
             position: relative;
             overflow-y: hidden;
             overflow-x: auto;
@@ -225,6 +224,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
         }
 
         .loading-wrapper {
+            min-height: 300px;
             transition: ${toniqDurations.pretty};
             opacity: 1;
             width: 100%;

diff --git a/packages/design-system/src/elements/toniq-middle-ellipsis/toniq-middle-ellipsis.element.ts b/packages/design-system/src/elements/toniq-middle-ellipsis/toniq-middle-ellipsis.element.ts
@@ -1,4 +1,4 @@
-import {classMap, css, defineElementEvent, html, listen, renderIf} from 'element-vir';
+import {classMap, css, defineElementEvent, html, ifDefined, listen, renderIf} from 'element-vir';
 import {noNativeFormStyles} from 'vira';
 import {copyToClipboard} from '../../clipboard';
 import {Copy24Icon, ExternalLink24Icon, ToniqSvg} from '../../icons';
@@ -243,7 +243,7 @@ export const ToniqMiddleEllipsis = defineToniqElement<
                             target="_blank"
                             rel="noopener noreferrer"
                             class="text-wrapper"
-                            href=${inputs.externalLink}
+                            href=${ifDefined(inputs.externalLink)}
                             title=${hoverText}
                         >
                             ${textTemplate} ${iconTemplate}

diff --git a/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts b/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts
@@ -97,6 +97,7 @@ export const ToniqTopTabs = defineToniqElement<{
 
         li.selected .tab {
             ${toniqFontStyles.boldFont};
+            color: ${toniqColors.pageInteraction.foregroundColor};
             cursor: default;
         }
 

diff --git a/packages/design-system/src/icons/svgs/core-24/circle-wavy-check-24.icon.ts b/packages/design-system/src/icons/svgs/core-24/circle-wavy-check-24.icon.ts
@@ -17,7 +17,7 @@ export const CircleWavyCheck24Icon = defineIcon({
             viewBox="0 0 24 24"
         >
             <path
-                stroke-width=${toniqIconCssVars['toniq-icon-stroke-width'].value}
+                stroke-width="0"
                 d="M5.64 18.36a2.6 2.6 0 0 0 1.7.68c.57.03 1.22-.07 1.69.12.47.2.86.73 1.3 1.11.52.45 1.08.73 1.67.73.58 0 1.15-.29 1.67-.73.45-.38.85-.92 1.3-1.1.45-.2 1.1-.09 1.67-.13a2.64 2.64 0 0 0 1.71-.68 2.6 2.6 0 0 0 .69-1.7c.03-.57-.07-1.22.12-1.69.2-.47.73-.86 1.11-1.3.45-.52.73-1.09.73-1.67 0-.58-.29-1.15-.73-1.67-.38-.45-.92-.85-1.1-1.3-.2-.45-.09-1.1-.13-1.67a2.64 2.64 0 0 0-.68-1.71 2.61 2.61 0 0 0-1.7-.69c-.57-.03-1.22.07-1.69-.12-.47-.2-.86-.73-1.3-1.11A2.61 2.61 0 0 0 12 3c-.58 0-1.15.29-1.67.73-.45.38-.85.92-1.3 1.1-.45.2-1.1.09-1.67.13a2.6 2.6 0 0 0-1.71.68 2.61 2.61 0 0 0-.69 1.7c-.03.57.07 1.22-.12 1.69-.2.47-.73.86-1.11 1.3A2.57 2.57 0 0 0 3 12c0 .58.29 1.15.73 1.67.38.45.92.85 1.1 1.3.2.45.09 1.1.13 1.67.06.69.25 1.3.68 1.71v.01Z"
             />
             <path

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.9.1",
+    "version": "16.9.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.9.1",
+    "version": "16.9.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",