@dataloop-ai/components 0.20.196 → 0.20.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.196",
+  "version": "0.20.197",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/assets/globals.scss

@@ -440,22 +440,14 @@ html {
     flex-direction: row;
 }
 
-// maybe add this in the future
-// .disabled {
-//     opacity: 0.6 !important;
-// }
-// .disabled,  .disabled * {
-//     outline: 0 !important;
-//     cursor: not-allowed !important;
-// }
-
 [disabled] {
-    opacity: 0.6 !important;
+    opacity: 1 !important;
 }
 [disabled],
 [disabled] * {
     outline: 0 !important;
     cursor: not-allowed !important;
+    opacity: 1 !important;
 }
 
 @import 'grid';

package/src/components/compound/DlInput/DlInput.vue

@@ -1443,18 +1443,18 @@ export default defineComponent({
         position: relative;
         display: flex;
         justify-content: space-between;
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-500);
         min-width: var(--dl-input-width);
         max-width: var(--dl-input-max-width);
         max-height: var(--dl-input-max-height);
         height: var(--dl-input-height);
 
         &--readonly {
-            border-color: var(--dl-color-separator) !important;
+            border-color: var(--dell-gray-500) !important;
         }
 
         &:hover {
-            border-color: var(--dl-input-border-color-hover);
+            border-color: var(--dell-gray-800);
         }
         &--error {
             border-color: var(--dl-color-negative);
@@ -1463,7 +1463,7 @@ export default defineComponent({
             border-color: var(--dl-input-border-color-hover);
         }
         &--disabled {
-            border-color: var(--dl-color-separator);
+            border-color: var(--dell-gray-500);
             color: var(--dl-color-disabled);
             cursor: not-allowed;
         }
@@ -1476,7 +1476,7 @@ export default defineComponent({
         display: inline-block;
         font-family: Arial, Helvetica, sans-serif;
         border-right: none;
-        border-radius: 2px;
+        border-radius: 0px;
         color: var(--dl-color-darker);
         white-space: var(--dl-input-white-space);
         font-size: var(--dl-font-size-body);

package/src/components/compound/DlPagination/DlPagination.vue

@@ -115,15 +115,15 @@ export default defineComponent({
         },
         textColor: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         },
         activeColor: {
             type: String,
-            default: 'dl-color-secondary'
+            default: 'dell-blue-500'
         },
         activeTextColor: {
             type: String,
-            default: 'dl-color-text-buttons'
+            default: 'dell-white'
         },
         totalItems: {
             type: Number,

package/src/components/compound/DlPagination/components/PageNavigation.vue

@@ -1,18 +1,12 @@
 <template>
-    <div
-        class="dl-pagination--page_navigation"
-        :style="cssVars"
-    >
+    <div class="dl-pagination--page_navigation" :style="cssVars">
         <button
             v-if="boundaryLinks"
             class="dl-pagination--nav_button"
             :disabled="disabled || isFirstPage"
             @click="setPage(min)"
         >
-            <dl-icon
-                icon="icon-dl-first-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-first-page" size="16px" />
         </button>
         <button
             v-if="directionLinks"
@@ -20,10 +14,7 @@
             :disabled="disabled || isFirstPage"
             @click="setPage(value - 1)"
         >
-            <dl-icon
-                icon="icon-dl-previous-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-previous-page" size="16px" />
         </button>
         <div class="dl-pagination--page_buttons_wrapper">
             <button
@@ -92,10 +83,7 @@
             :disabled="disabled || isLastPage"
             @click="setPage(value + 1)"
         >
-            <dl-icon
-                icon="icon-dl-right-next-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-right-next-page" size="16px" />
         </button>
         <button
             v-if="boundaryLinks"
@@ -103,10 +91,7 @@
             :disabled="disabled || isLastPage"
             @click="setPage(max)"
         >
-            <dl-icon
-                icon="icon-dl-last-page"
-                size="16px"
-            />
+            <dl-icon icon="icon-dl-last-page" size="16px" />
         </button>
     </div>
 </template>
@@ -155,15 +140,15 @@ export default defineComponent({
         },
         textColor: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         },
         activeColor: {
             type: String,
-            default: 'dl-color-secondary'
+            default: 'dell-blue-500'
         },
         activeTextColor: {
             type: String,
-            default: 'dl-color-text-buttons'
+            default: 'dell-white'
         }
     },
     emits: ['update:model-value'],
@@ -194,12 +179,12 @@ export default defineComponent({
                 ),
                 '--dl-active-button-bg-color': getColor(
                     this.activeColor,
-                    'dl-color-secondary'
+                    'dell-blue-500'
                 ),
-                '--dl-text-color': getColor(this.textColor, 'dl-color-darker'),
+                '--dl-text-color': getColor(this.textColor, 'dell-gray-800'),
                 '--dl-active-text-color': getColor(
                     this.activeTextColor,
-                    'dl-color-text-buttons'
+                    'dell-white'
                 ),
                 '--dl-button-min-width': this.buttonMinWidth
             }
@@ -319,44 +304,75 @@ export default defineComponent({
     }
 
     &--active {
-        color: var(--dl-active-text-color) !important;
-        background-color: var(--dl-active-button-bg-color) !important;
+        color: var(--dell-white) !important;
+        background-color: var(--dell-blue-500) !important;
     }
 
-    &--page_button,
     &--nav_button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         min-width: var(--dl-button-min-width);
         padding: 0;
         cursor: pointer;
         border: none;
         border-radius: 2px;
-        color: var(--dl-text-color);
+        color: var(--dell-blue-500) !important;
         background-color: var(--dl-button-bg-color);
 
-        &:active:not(:disabled) {
-            background-color: var(--dl-color-secondary);
-            color: var(--dl-color-text-buttons);
+        &:hover:not(:disabled) {
+            color: var(--dell-blue-600);
+            border-radius: 2px;
+            background-color: var(--dell-gray-100);
+            border: 1px solid var(--dell-gray-100);
 
             ::v-deep .dl-icon {
-                color: var(--dl-color-text-buttons);
+                color: var(--dell-blue-600);
+            }
+        }
+
+        &:disabled {
+            color: var(--dell-gray-500);
+            cursor: default;
+
+            ::v-deep .dl-icon {
+                color: var(--dell-gray-500);
+            }
+        }
+    }
+
+    &--page_button {
+        min-width: var(--dl-button-min-width);
+        padding: 0;
+        cursor: pointer;
+        border: none;
+        border-radius: 2px;
+        color: var(--dell-gray-800);
+        background-color: var(--dl-button-bg-color);
+
+        &:active:not(:disabled) {
+            background-color: var(--dell-blue-500);
+            color: var(--dell-white);
+            ::v-deep .dl-icon {
+                color: var(--dell-white);
             }
         }
 
         &:disabled {
-            color: var(--dl-color-disabled);
+            color: var(--dell-gray-500);
             cursor: default;
 
             ::v-deep .dl-icon {
-                color: var(--dl-color-disabled);
+                color: var(--dell-gray-500);
             }
         }
 
         &:hover:not(:disabled):not(.active) {
-            background-color: var(--dl-color-hover);
-            color: var(--dl-color-text-buttons);
+            background-color: var(--dell-gray-100);
+            color: var(--dell-gray-800);
 
             ::v-deep .dl-icon {
-                color: var(--dl-color-text-buttons);
+                color: var(--dell-gray-800);
             }
         }
     }

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 .dl-pagination--legend {
     justify-content: flex-end;
     display: flex;
-    color: var(--dl-color-lighter);
+    color: var(--dell-gray-500);
     height: 100%;
     min-width: min-content;
     overflow-y: scroll;

package/src/components/compound/DlPagination/components/QuickNavigation.vue

@@ -10,32 +10,31 @@
             :disabled="disabled"
             @keydown="handleKeyDown"
             @keyup="handleKeyUp"
-        >
-        <dl-button
-            size="s"
-            flat
-            margin="0"
-            class="dl-pagination--quick_nav_button"
+        />
+        <dl-link
+            class="dl-pagination--quick_nav_link"
+            color="dell-blue-600"
             :disabled="disabled"
+            hover-color="dell-blue-700"
             @click="handleNavigation"
         >
             Go
-        </dl-button>
+        </dl-link>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlButton } from '../../../basic'
 import { DlTypography } from '../../../essential'
 import { stopAndPrevent } from '../../../../utils'
 import { admissibleKeys } from '../../../../utils/nav-keys-constants'
+import { DlLink } from '../../../essential'
 
 export default defineComponent({
     name: 'QuickNavigation',
     components: {
         DlTypography,
-        DlButton
+        DlLink
     },
     model: {
         prop: 'modelValue',
@@ -96,16 +95,16 @@ export default defineComponent({
     &--quick_navigation {
         display: flex;
         align-items: center;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
         padding-right: 16px;
         & p {
             padding-right: 4px;
         }
     }
     &--navigation_input {
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-500);
         border-radius: 2px;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
         outline: none;
         background: none;
         padding-top: 3px;
@@ -121,23 +120,26 @@ export default defineComponent({
             margin: 0;
         }
         &:hover {
-            border-color: var(--dl-color-hover);
+            border-color: var(--dell-blue-600);
         }
 
         &:focus {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dell-blue-500);
         }
 
         &:disabled {
-            border-color: var(--dl-color-disabled);
-            color: var(--dl-color-disabled);
+            border-color: var(--dell-gray-500);
+            color: var(--dell-gray-500);
             cursor: not-allowed;
 
             &:hover {
-                border-color: var(--dl-color-disabled);
+                border-color: var(--dell-gray-500);
             }
         }
     }
+    &--quick_nav_link {
+        margin-left: 5px;
+    }
 }
 
 ::v-deep .dl-button {

package/src/components/compound/DlPagination/components/RowsSelector.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="dl-pagination--rows_selector">
-        <span class="dl-pagination--rows_per_page_label">{{ itemsName }} per page:</span>
-        <dl-typography
-            v-if="hasSingeValue"
-            color="dl-color-darker"
+        <span class="dl-pagination--rows_per_page_label"
+        >{{ itemsName }} per page:</span
         >
+        <dl-typography v-if="hasSingeValue" color="dell-gray-800">
             {{ modelValue }}
         </dl-typography>
         <dl-select
@@ -72,7 +71,7 @@ export default defineComponent({
     &--rows_selector {
         display: flex;
         align-items: center;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
     }
 
     &--rows_per_page_label {

package/src/components/compound/DlSelect/DlSelect.vue

@@ -807,7 +807,7 @@ export default defineComponent({
             return {
                 '--placeholder-color': getColor(
                     this.modelValueLength > 0 || this.selectedIndex !== -1
-                        ? 'dl-color-darker'
+                        ? 'dell-gray-800'
                         : 'dl-color-lighter'
                 )
             }
@@ -929,7 +929,7 @@ export default defineComponent({
             return !!this.$slots.prepend && !this.isSmall
         },
         chevronIconColor(): string {
-            return `${this.disabled ? 'dl-color-disabled' : null}`
+            return `${this.disabled ? 'dell-gray-500' : null}`
         },
         showMenuList(): boolean {
             if (
@@ -1048,7 +1048,11 @@ export default defineComponent({
             return !!option?.readonly
         },
         isDisableRowOption(option: DlSelectOptionType) {
-            return typeof option === 'object' && option !== null && !!option.disableRow
+            return (
+                typeof option === 'object' &&
+                option !== null &&
+                !!option.disableRow
+            )
         },
         getOptionCount(option: any) {
             return option?.count ?? null
@@ -1323,10 +1327,10 @@ export default defineComponent({
     }
 
     .dl_select__select {
-        border: 1px solid var(--dl-color-separator);
-        border-radius: 2px;
+        border: 1px solid var(--dell-gray-500);
+        border-radius: 0px;
         cursor: pointer;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
         height: 12px;
         width: 100%;
         box-sizing: content-box;
@@ -1415,11 +1419,11 @@ export default defineComponent({
         }
 
         &:hover {
-            border-color: var(--dl-color-hover);
+            border-color: var(--dell-gray-800);
         }
 
         &--focused {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dell-blue-500) !important;
         }
 
         &--disabled {

package/src/components/compound/DlTable/DlTable.vue

@@ -88,7 +88,7 @@
                                     v-bind="getHeaderScope({})"
                                 >
                                     <DlCheckbox
-                                        :color="color"
+                                        :color="checkboxColor"
                                         :model-value="headerSelectedValue"
                                         :indeterminate-value="true"
                                         @update:model-value="
@@ -161,7 +161,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                            visibleColumns.length
+                                                visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -169,8 +169,8 @@
                                         <dl-button
                                             :text-color="
                                                 isVisibleColumnsOpen
-                                                    ? 'dl-color-secondary'
-                                                    : 'dl-color-medium'
+                                                    ? 'dell-blue-600'
+                                                    : 'dell-gray-600'
                                             "
                                             flat
                                             icon="icon-dl-column"
@@ -274,8 +274,8 @@
                                     isRowSelected(getRowKey(props.item))
                                         ? 'selected'
                                         : hasAnyAction
-                                        ? ' cursor-pointer'
-                                        : ''
+                                            ? ' cursor-pointer'
+                                            : ''
                                 "
                                 :no-hover="noHover"
                                 @click="
@@ -325,7 +325,7 @@
                                         "
                                     >
                                         <DlCheckbox
-                                            :color="color"
+                                            :color="checkboxColor"
                                             :model-value="
                                                 isRowSelected(
                                                     getRowKey(props.item)
@@ -490,7 +490,7 @@
                                     v-bind="getHeaderScope({})"
                                 >
                                     <DlCheckbox
-                                        :color="color"
+                                        :color="checkboxColor"
                                         :model-value="headerSelectedValue"
                                         :indeterminate-value="true"
                                         @update:model-value="
@@ -565,7 +565,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                            visibleColumns.length
+                                                visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -674,8 +674,8 @@
                             <dl-top-scroll
                                 v-if="
                                     tableScroll &&
-                                    infiniteScroll &&
-                                    !isDataEmpty
+                                        infiniteScroll &&
+                                        !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-top="
@@ -709,8 +709,8 @@
                                         isRowSelected(getRowKey(row))
                                             ? 'selected'
                                             : hasAnyAction
-                                            ? ' cursor-pointer'
-                                            : ''
+                                                ? ' cursor-pointer'
+                                                : ''
                                     "
                                     :no-hover="noHover"
                                     @click="onTrClick($event, row, pageIndex)"
@@ -747,7 +747,7 @@
                                             "
                                         >
                                             <DlCheckbox
-                                                :color="color"
+                                                :color="checkboxColor"
                                                 :model-value="
                                                     isRowSelected(
                                                         getRowKey(row)
@@ -845,8 +845,8 @@
                             <dl-bottom-scroll
                                 v-if="
                                     tableScroll &&
-                                    infiniteScroll &&
-                                    !isDataEmpty
+                                        infiniteScroll &&
+                                        !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-bottom="
@@ -903,7 +903,7 @@
                     <div
                         v-if="
                             hasBottomSelectionBanner &&
-                            selectedRowsLabel(rowsSelectedNumber)
+                                selectedRowsLabel(rowsSelectedNumber)
                         "
                         class="dl-table__control"
                     >
@@ -1285,6 +1285,10 @@ export default defineComponent({
             validator: (value: string) =>
                 ['first', 'last', 'both'].includes(value)
         },
+        checkboxColor: {
+            type: String,
+            default: 'dell-blue-500'
+        },
         ...useTableActionsProps,
         ...commonVirtScrollProps,
         ...useTableRowExpandProps,

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -9,20 +9,20 @@
     border-spacing: 0;
 
     .vertical-border {
-        border-left: 1px solid var(--dl-color-separator);
-        border-right: 1px solid var(--dl-color-separator);
+        border-left: 1px solid var(--dell-gray-300);
+        border-right: 1px solid var(--dell-gray-300);
     }
 
     thead {
         position: sticky;
         top: 0;
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         z-index: 50;
     }
 
     .sticky-col {
         position: sticky;
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         z-index: 50;
     }
 
@@ -84,7 +84,7 @@
     //markup-table
 
     &__card {
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         border-radius: 2px;
 
         .dl-table__middle {
@@ -101,7 +101,7 @@
     .dl-table__bottom,
     thead tr:first-child th {
         /* bg color is important for th; just specify one */
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
     }
 
     thead tr th {
@@ -134,14 +134,14 @@
                 opacity: 1;
             }
             td:not(.dl-td--no-hover) {
-                background-color: var(--dl-color-fill-hover);
+                background-color: var(--dell-blue-100);
             }
         }
     }
 
     tbody tr.highlighted {
         td {
-            background-color: var(--dl-color-fill);
+            background-color: var(--dell-blue-100);
         }
     }
 
@@ -158,7 +158,7 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 14px;
-        color: var(--dl-color-medium);
+        color: var(--dell-gray-900);
         background-color: inherit;
         user-select: none;
 
@@ -197,7 +197,7 @@
     }
 
     .dl-td {
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
         &--no-hover {
             &:hover {
                 background-color: none !important;
@@ -211,7 +211,7 @@
 
     tbody {
         tr.selected td {
-            background-color: var(--dl-color-fill);
+            background-color: var(--dell-blue-100);
         }
 
         tr.selected td:after {
@@ -264,11 +264,11 @@
         font-size: 20px;
         letter-spacing: 0.005em;
         font-weight: 400;
-        color: var(--dl-color-darker);
+        color: var(--dell-gray-800);
     }
 
     &--bordered {
-        border: 1px solid var(--dl-color-separator);
+        border: 1px solid var(--dell-gray-300);
         border-radius: 2px;
     }
 
@@ -321,7 +321,7 @@
     }
 
     &__bottom {
-        border-top: 1px solid var(--dl-color-separator);
+        border-top: 1px solid var(--dell-gray-300);
         min-height: 50px;
         padding: 4px 14px 4px 16px;
         font-size: 12px;
@@ -364,7 +364,7 @@
     tr,
     th,
     td {
-        border-color: var(--dl-color-separator);
+        border-color: var(--dell-gray-300);
 
         &>label {
             padding: 0;
@@ -377,7 +377,7 @@
             font-size: 12px;
             line-height: 14px;
             background-color: inherit;
-            color: var(--dl-color-darker);
+            color: var(--dell-gray-800);
 
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -400,13 +400,13 @@
     }
 
     &__is-dragging {
-        background-color: var(--dl-color-fill);
+        background-color: var(--dell-blue-200);
     }
 
     &__selected {
-        background-color: var(--dl-color-fill) !important;
+        background-color: var(--dell-blue-100) !important;
         color: var(--dl-color-fill) !important;
-        border-color: var(--dl-color-fill) !important;
+        border-color: var(--dell-gray-300) !important;
     }
 
     &__drag {
@@ -419,7 +419,7 @@
         box-shadow: 0px 3px 6px rgba(16, 30, 115, 0.15);
         border-radius: 2px;
         font-size: 12px;
-        background-color: var(--dl-color-panel-background);
+        background-color: var(--dell-white);
 
         & th {
             cursor: grabbing !important;
@@ -554,7 +554,7 @@
 
     .dl-table__top {
         position: relative;
-        border-bottom: 1px solid var(--dl-color-separator);
+        border-bottom: 1px solid var(--dell-gray-300);
     }
 }
 

package/src/components/essential/DlCheckbox/DlCheckbox.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        :id="uuid"
-        :class="identifierClass"
-        class="container-wrapper"
-    >
+    <div :id="uuid" :class="identifierClass" class="container-wrapper">
         <label
             ref="container"
             :for="computedId"
@@ -15,10 +11,7 @@
             @keydown="onKeydown"
             @keyup="onKeyup"
         >
-            <span
-                class="checkbox-wrapper"
-                :style="cssSvgVars"
-            >
+            <span class="checkbox-wrapper" :style="cssSvgVars">
                 <input
                     :id="computedId"
                     :value="value"
@@ -27,7 +20,7 @@
                     tabindex="-1"
                     :disabled="disabled"
                     :style="cssSvgVars"
-                >
+                />
                 <svg
                     class="check"
                     :class="{ active: isTrue }"
@@ -56,21 +49,13 @@
                     />
                 </svg>
             </span>
-            <span
-                v-if="hasLabel"
-                class="checkbox-label"
-                :for="computedId"
-            >
+            <span v-if="hasLabel" class="checkbox-label" :for="computedId">
                 <slot>
                     {{ label }}
                 </slot>
             </span>
         </label>
-        <div
-            v-if="hasSubLabel"
-            :style="subLabelStyle"
-            class="sub-text"
-        >
+        <div v-if="hasSubLabel" :style="subLabelStyle" class="sub-text">
             <slot name="sub-label">
                 <span>{{ subLabel }}</span>
             </slot>
@@ -93,7 +78,7 @@ export default defineComponent({
         event: 'update:model-value'
     },
     props: {
-        color: { type: String, default: 'dl-color-secondary' },
+        color: { type: String, default: 'dell-blue-500' },
         disabled: { type: Boolean, default: false },
         id: { type: [String, Number], default: null },
         modelValue: { type: ValueTypes, required: false, default: null },
@@ -174,9 +159,9 @@ export default defineComponent({
     methods: {
         getCurrentColor() {
             if (this.disabled) {
-                return 'var(--dl-color-disabled)'
+                return 'var(--dell-gray-500)'
             }
-            return getColor(this.color, 'dl-color-secondary')
+            return getColor(this.color, 'dell-blue-500')
         },
         onClick(e: Event) {
             if (e) {

package/src/components/essential/DlIcon/DlIcon.vue

@@ -127,7 +127,7 @@ export default defineComponent({
                           color.value === 'secondary'
                               ? 'q-color-secondary'
                               : color.value,
-                          'dl-color-icon-default'
+                          'dell-gray-800'
                       )
                     : 'inherit'
             }

package/src/components/essential/DlLink/DlLink.vue

@@ -1,13 +1,10 @@
 <template>
-    <div
-        :id="uuid"
-        class="link-wrapper"
-    >
+    <div :id="uuid" class="link-wrapper">
         <a
             :href="link"
             :target="target"
             :rel="rel"
-            :style="`color: var(--${textColor});`"
+            :style="linkStyles"
             :class="`${disabled ? 'disabled' : ''}`"
             @click="$emit('click')"
         >
@@ -28,7 +25,8 @@ export default defineComponent({
         newtab: { required: false, default: false, type: Boolean },
         external: { required: false, default: false, type: Boolean },
         disabled: { required: false, default: false, type: Boolean },
-        color: { required: false, type: String, default: null }
+        color: { required: false, type: String, default: null },
+        hoverColor: { required: false, type: String, default: null }
     },
     data() {
         return {
@@ -44,8 +42,13 @@ export default defineComponent({
                 ? `${this.href}`
                 : `${window.origin}/${this.href}`
         },
-        textColor(): string {
-            return this.color ?? 'dl-color-studio-secondary'
+        linkStyles(): Record<string, string> {
+            const textColor = this.color ?? 'dl-color-studio-secondary'
+            const hoverTextColor = this.hoverColor ?? textColor
+            return {
+                '--link-color': `var(--${textColor})`,
+                '--link-hover-color': `var(--${hoverTextColor})`
+            }
         },
         target(): string | null {
             if (!this.href) {
@@ -68,16 +71,19 @@ export default defineComponent({
 a {
     text-decoration: none;
     font-size: var(--dl-font-size-body);
+    color: var(--link-color) !important;
 }
 
 a:hover {
     text-decoration: underline;
     cursor: pointer;
+    color: var(--link-hover-color) !important;
 }
 
 .disabled {
     pointer-events: none;
     color: var(--dl-color-disabled) !important;
+    text-decoration: none !important;
 }
 
 .link-wrapper {

package/src/components/essential/DlTypography/DlTypography.vue

@@ -35,7 +35,7 @@ export default defineComponent({
         bold: Boolean,
         color: {
             type: String,
-            default: 'dl-color-darker'
+            default: 'dell-gray-800'
         }
     },
     data() {