@dialpad/dialtone-css/lib/build/less/components/link.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: LINKS
//
//  These are link classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/links
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//  • ALTERNATE STYLES
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-link {
    --link-color-default: var(--dt-color-link-primary);
    --link-color-default-hover: var(--dt-color-link-primary-hover);
    --link-text-decoration: underline;
    --link-padding: 0;
    --link-background-color: transparent;

    position: relative;
    display: inline-flex;
    gap: var(--dt-space-300);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: var(--link-padding);
    color: var(--link-color-default);
    font: inherit;
    text-decoration: var(--link-text-decoration);
    text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
    text-decoration-thickness: var(--dt-size-border-50);
    background-color: var(--link-background-color);
    border: 0;
    transition-timing-function: var(--ttf-out-quint);
    transition-duration: var(--td200);
    transition-property: background-color, border, box-shadow;

    //  Reset button appearance
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    fill: currentColor;

    &:hover {
        --link-text-decoration: none;

        color: var(--link-color-default-hover);
        cursor: pointer;
    }

    &:active {
        // --link-text-decoration: underline;
        color: var(--link-color-default);
    }

    &:focus-visible {
        --link-text-decoration: none;

        outline: none;
        box-shadow: var(--dt-shadow-focus);
    }

    //  ============================================================================
    //  $   ALTERNATE STYLES
    //  ============================================================================
    //  $$  WARNING
    //  ----------------------------------------------------------------------------
    &--warning {
        --link-color-default: var(--dt-color-link-warning);
        --link-color-default-hover: var(--dt-color-link-warning-hover);
    }

    //  $$  DANGER
    //  ----------------------------------------------------------------------------
    &--danger {
        --link-color-default: var(--dt-color-link-critical);
        --link-color-default-hover: var(--dt-color-link-critical-hover);
    }

    //  $$  SUCCESS
    //  ----------------------------------------------------------------------------
    &--success {
        --link-color-default: var(--dt-color-link-success);
        --link-color-default-hover: var(--dt-color-link-success-hover);
    }

    //  $$  MUTED
    //  ----------------------------------------------------------------------------
    &--muted {
        --link-color-default: var(--dt-color-link-muted);
        --link-color-default-hover: var(--dt-color-link-muted-hover);
    }

    //  $$  DISABLED
    //  ----------------------------------------------------------------------------
    // We don't expose these in the documentation because they're meant to be consumed
    // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
    &[disabled],
    &--disabled {
        --link-color-default: var(--dt-color-link-disabled);
        --link-color-default-hover: var(--dt-color-link-disabled-hover);
        --link-text-decoration: none;

        &:hover {
            cursor: not-allowed;
        }
    }

    //  $$  INVERTED
    //  ----------------------------------------------------------------------------
    &--inverted {
        --link-color-default: var(--dt-color-link-primary-inverted);
        --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
    }

    //  $$  INVERTED DISABLED
    //  ----------------------------------------------------------------------------
    // We don't expose these in the documentation because they're meant to be consumed
    // by buttons using .d-link. Links with a disabled attribute are not valid mark-up.
    &--inverted-disabled {
        --link-color-default: var(--dt-color-link-disabled-inverted);
        --link-color-default-hover: var(--dt-color-link-disabled-inverted-hover);
        --link-text-decoration: none !important;

        &:hover {
            cursor: not-allowed;
        }
    }

    //  $$  INVERTED DANGER
    //  ----------------------------------------------------------------------------
    &--inverted-danger {
        --link-color-default: var(--dt-color-link-critical-inverted);
        --link-color-default-hover: var(--dt-color-link-critical-inverted-hover);
    }

    //  $$  INVERTED SUCCESS
    //  ----------------------------------------------------------------------------
    &--inverted-success {
        --link-color-default: var(--dt-color-link-success-inverted);
        --link-color-default-hover: var(--dt-color-link-success-inverted-hover);
    }

    //  $$  INVERTED WARNING
    //  ----------------------------------------------------------------------------
    &--inverted-warning {
        --link-color-default: var(--dt-color-link-warning-inverted);
        --link-color-default-hover: var(--dt-color-link-warning-inverted-hover);
    }

    //  $$  INVERTED MUTED
    //  ----------------------------------------------------------------------------
    &--inverted-muted {
        --link-color-default: var(--dt-color-link-muted-inverted);
        --link-color-default-hover: var(--dt-color-link-muted-inverted-hover);
    }

    //  $$  INVERTED MENTION
    //  ----------------------------------------------------------------------------
    &--inverted-mention {
        --link-color-default: var(--dt-color-link-primary-inverted);
        --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
        --link-text-decoration: none;
        --link-padding: 0 var(--dt-space-200);
        --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.3);

        line-height: var(--dt-font-line-height-200);
        border-radius: var(--dt-size-radius-200);
    }

    //  $$  MENTION
    //  ----------------------------------------------------------------------------
    // Styling specific to mentions such as @brad.paugh. The underline highlighting
    // is reversed compared to a regular link, and it has a light background.
    &--mention {
        --link-text-decoration: none;
        --link-padding: 0 var(--dt-space-200);
        --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.1);

        line-height: var(--dt-font-line-height-200);
        border-radius: var(--dt-size-radius-200);

        &:hover {
            --link-text-decoration: underline;
            --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.25);

            text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
            text-decoration-thickness: var(--dt-size-border-50);
        }

        &:active {
            --link-background-color: hsl(var(--dt-color-surface-brand-strong-hsl) / 0.1);
        }
    }
}