daggerheart/styles/less/utils/mixin.less

/**
 * Applies theme-specific styles.
 * @param {Rules}    @darkRules  - Styles to apply when `.theme-dark` is present
 * @param {Rules}    @lightRules - Styles to apply when `.theme-light` is present
 */
.appTheme(@darkRules, @lightRules) {
    // Dark theme selectors
    .themed.theme-dark .application.daggerheart.sheet.dh-style,
    .themed.theme-dark.application.daggerheart.sheet.dh-style,
    body.theme-dark .application.daggerheart,
    body.theme-dark.application.daggerheart {
        @darkRules();
    }

    // Light theme selectors
    .themed.theme-light .application.daggerheart.sheet.dh-style,
    .themed.theme-light.application.daggerheart.sheet.dh-style,
    body.theme-light .application.daggerheart,
    body.theme-light.application.daggerheart {
        @lightRules();
    }
}

/**
 * Apply a style to sidebar titles.
 */
.section-title() {
    display: flex;
    gap: 15px;
    align-items: center;

    h3 {
        font-size: var(--font-size-20);
    }
}

/**
 * Apply default item list style.
 * @param {Length} @gap - The vertical spacing between elements (e.g., 10px, 1rem)
 */
.column-list(@gap: 10px) {
    display: flex;
    flex-direction: column;
    gap: @gap;
    align-items: center;
}

/**
 * Apply default typography styles.
 */
.dh-typography() {
    h1 {
        font-family: @font-title;
        margin: 0;
        border: none;
        font-weight: normal;
    }

    h1 input[type='text'] {
        font-family: @font-title;
    }

    h2,
    h3 {
        font-family: @font-subtitle;
        margin: 0;
        border: none;
        font-weight: normal;
    }

    h4 {
        font-family: @font-body;
        font-size: var(--font-size-14);
        border: none;
        font-weight: 700;
        margin: 0;
        text-shadow: none;
        font-weight: normal;
    }

    h5 {
        font-family: @font-body;
        font-size: var(--font-size-14);
        margin: 0;
        font-weight: normal;
    }

    p,
    span,
    textarea,
    label,
    select,
    multi-select .tags .tag,
    table,
    fieldset legend,
    input[type='text'],
    input[type='number'],
    input[type='search'],
    .tagify__dropdown,
    li {
        font-family: @font-body;
    }

    button span {
        font-weight: bold;
    }

    small {
        font-family: @font-body;
        opacity: 0.8;
    }

    nav a {
        font-family: @font-body;
    }
}


// A simple ease-out mask
.smooth-gradient-ease-out(@param, @to, @destination, @length) {
    @{param}+: linear-gradient(
        @to,
        transparent 0%,
        rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.008 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.029 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.064 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.166 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.304 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.554 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.644 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.735 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.825 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
        @destination @length
    );
}

/**
 * A simple ease in and out mask.
 * @param - the parameter to add to
 * @param - direction, such as "to top"
 * @destination - the color at the destination. The origin is always transparent
 * @length - the value at the destination
 */
.smooth-gradient-ease-in-out(@param, @to, @destination, @length: 100%) {
    @{param}+: linear-gradient(
        @to,
        transparent 0%,
        rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.081 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.155 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.225 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.353 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.471 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.647 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.71 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.775 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.845 * @length),
        rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
        @destination @length
    );
}