Design System - Sass Functions

Configure the global CSS Variables of the design system to instantly change the look and feel of your application.

All of Inkline’s Global CSS Variables propagate throughout the application and are used for design elements such as spacing, border, colors, and typography.

Border

Inkline provides border-radius getter functions to quickly retrieve any border-radius variable variant.

Functions

$size-key: 'md'; // 'sm', 'md', 'lg'

border-top-left-radius($size-key);
border-top-right-radius($size-key);
border-bottom-right-radius($size-key);
border-bottom-left-radius($size-key);
border-radius($size-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    border-radius: border-radius('lg');
}

Result

.element {
    border-radius: var(--border-radius);
}

Breakpoints

Inkline provides breakpoint getter functions to quickly retrieve any breakpoint variable variant.

Functions

$breakpoint-key: 'md'; // 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'

breakpoint($breakpoint-key);
@include breakpoint-up($breakpoint-key) {}
@include breakpoint-down($breakpoint-key) {}

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    @media screen and (max-width: #{breakpoint('md')}) {
        ...
    }
    
    @include breakpoint-down('md') {
        ...
    }
    
    @include breakpoint-up('md') {
        ...
    }
}

Result

@media screen and (max-width: 768px) {
    .element {}
}

@media screen and (max-width: 768px) {
    .element {}
}

@media screen and (min-width: 768px) {
    .element {}
}

Colors

Inkline provides color getter functions to quickly retrieve any color variable variant.

Functions

$color-key: 'gray-60'; // any color variant key

color($color-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    background: color('white');
    color: color('primary');
}

Result

.element {
    background: var(--color--white);
    color: var(--color--primary);
}

Gutter

Inkline provides gutter getter functions to quickly retrieve any gutter variable variant. The gutter is used for spacing grid elements such as column, row, and container.

Functions

$size-key: 'md'; // 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'

gutter($size-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    margin-right: gutter('sm');
}

Result

.element {
    margin-right: var(--gutter--sm);
}

Scale ratio

Inkline provides scale ratio getter functions to quickly retrieve any scale ratio variable variant.

Functions

$scale-ratio-key: 'minor-third'; // any scale ratio key

scale-ratio($scale-ratio-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    padding: calc(#{spacing()} * #{scale-ratio('major-third')});
}

Result

.element {
    padding: calc(var(--spacing) * var(--scale-ratio--major-third));
}

Sizes

Inkline provides size getter functions to quickly retrieve any size variable variant.

Functions

$size-percentage-key: '0'; // '0', '25', '50', '75', '100'
$size-multiplier-key: 'md'; // 'xs', 'sm', 'md', 'lg', 'xl'

size-percentage($size-percentage-key);
size-multiplier($size-multiplier-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    padding: calc(#{spacing()} * #{size-multiplier('lg')});
}

Result

.element {
    padding: calc(var(--spacing) * var(--size-multiplier--lg));
}

Spacing

Inkline provides spacing getter functions to quickly retrieve any spacing variable variant.

Functions

$spacing-key: '1/2'; // '1/2', '1/3', '2/3', '1/4', '3/4', '0', '1', '2', '3', '4', '5', '6', '7', '8'

spacing($spacing-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    padding: spacing('2');
}

Result

.element {
    padding: calc(var(--spacing) * 2);
}

Typography

Inkline provides typography getter functions to quickly retrieve any typography variable variant.

Functions

$font-family-key: 'base'; // 'base', 'monospace', 'print'
$size-key: 'md'; // 'xs', 'sm', 'md', 'lg', 'xl'
$font-weight-key: 'semibold'; // 'extralight', 'light', 'lighter', 'normal', 'semibold', 'bold', 'bolder', 'black'
$heading-font-size-key: 'h1'; // 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
$display-font-size-key: 'd1'; // 'd1', 'd2', 'd3', 'd4', 'd5', 'd6'

font-family-primary($font-family-key);
font-family-secondary($font-family-key);
font-size($size-key);
font-weight($font-weight-key);
heading-font-size($heading-font-size-key);
display-font-size($display-font-size-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.title {
    font-family: font-family-secondary('base');
    font-size: font-size('lg');
    font-weight: font-weight('bold');
}

Result

.title {
    font-family: var(--font-family-secondary--base);
    font-size: var(--font-size--lg);
    font-weight: var(--font-weight--bold);
}

Z-Index

Inkline provides z-index getter functions to quickly retrieve any z-index variable variant.

Functions

$z-index-key: 'sticky'; // 'dropdown', 'sticky', 'fixed', 'modal-backdrop', 'modal', 'popover', 'tooltip'

z-index($z-index-key);

Basic usage

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

.element {
    top: 0;
    left: 0;
    position: absolute;
    z-index: z-index('tooltip');
}

Result

.element {
    top: 0;
    left: 0;
    position: absolute;
    z-index: var(--z-index--tooltip);
}