@eddy-aus/core v1.0.4

Core

Eddy's core.

Table of Contents

• Getting Started
• Configuration
• JS
• Sass
  • Functions
  • Mixins
  • Tokens

Getting Started

To use Eddy's core, run the following command in your project.

yarn add --dev @eddy-aus/core

Then add the following @use statement in your Sass:

@use '~@eddy-aus/core/sass';

Configuration

The following options can be configured by creating a con file in your project's root diretory.

Dark Scheme

The darkScheme property includes a dark scheme in your project's CSS Boilerplate.

Syntax

Example

To exclude a dark scheme, configure your eddy.config.js file as follows:

// eddy.config.js
module.exports = {
  darkScheme: false,
};

Note: if the boilerplate property is set to false then any darkScheme configuration will have no effect.

font-size

The $font-size variable sets the root font-size in your project's Sass.

Syntax

Example

To change the root font-size, configure your @use statement as follows:

@use '~@eddy-aus/core/sass' with (
  $font-size: 20px
);

namespace

The $namespace variable includes a namespace in your project's Sass.

Syntax

Example

To include a namespace, configure your @use statement as follows:

@use '~@eddy-aus/core/sass' with (
  $namespace: 'eddy'
);

reset

The $reset variable includes a CSS Reset in your project's CSS Boilerplate.

Syntax

Example

To exclude a CSS Reset from your project, configure your @use statement as follows:

@use '~@eddy-aus/core/sass' with (
  $reset: false
);

root

The $root variable includes a root selector in your project's Sass.

Syntax

Example

To include a root selector, configure your @use statement as follows:

@use '~@eddy-aus/core/sass' with (
  $root: '#root'
);

vendors

The $vendors variable includes vendor-specific Custom Properties in your project's CSS Boilerplate.

Syntax

Examples

To exclude all vendors, configure your @use statement as follows:

@use '~@eddy-aus/core/sass' with (
  $vendors: false
);

To exclude specific vendors, configure your @use statement as follows:

@use '~@eddy-aus/core/sass' with (
  $vendors: (
    swinburne: (
      '.swinburne',
    ),
  )
);

JavaScript

Sass

Functions

The following functions are available for use in your project.

circ

The circ() function converts a diameter to its corresponding circumference.

Arguments

Returns

Examples

circ(12);
// => 37.6991118431

circ(20px);
// => 62.8318530718px

class

The class() function converts strings into classes.

Arguments

Returns

Examples

class('active');
// => .active

$namespace: 'eddy';

class('mounted', 'active');
// => .eddy-mounted.eddy-active

display-p3

The display-p3() function converts a color to its corresponding display-p3 value.

Arguments

Returns

Examples

display-p3(#6bf906);
// => color(display-p3 0.4196078431 0.9764705882 0.0235294118)

display-p3(rgba(36, 36, 36, 0.06));
// => color(display-p3 0.1411764706 0.1411764706 0.1411764706 / 6%)

em

The em() function converts a pixel value to its corresponding em value.

Arguments

Returns

Examples

em(400px);
// => 25em

$font-size: 20px;

em(400px);
// => 20em

flatten

The flatten() function converts a multi-dimensional map into a one-dimensional map.

Arguments

Returns

Examples

flatten(
  (
    motion: (
      duration: (
        '1': calc(var(--motion-duration-unit) * 1),
        '2': calc(var(--motion-duration-unit) * 2),
      ),
    ),
  ),
);

// => (
// =>   motion-duration-1: calc(var(--motion-duration-unit) * 1),
// =>   motion-duration-2: calc(var(--motion-duration-unit) * 2),
// => )

flatten(
  (
    font: (
      family: (
        monospace: var(--font-stack-monospace),
        sans-serif: var(--font-stack-sans-serif),
      ),
      size: (
        s: calc(var(--font-size-unit) * 1.265625),
        l: calc(var(--font-size-unit) * 1.6018066406),
      ),
    ),
  ),
);

// => (
// =>   font-family-monospace: var(--font-stack-monospace),
// =>   font-family-sans-serif: var(--font-stack-sans-serif),
// =>   font-size-s: calc(var(--font-size-unit) * 1.265625),
// =>   font-size-l: calc(var(--font-size-unit) * 1.6018066406),
// => )

prefix

The prefix() function creates a kebab-case prefix based on the $namespace variable.

Returns

Examples

prefix();
// => ''

$namespace: 'eddy';

prefix();
// => eddy-

prop

The prop() function converts a string into a Custom Property.

Arguments

Returns

Examples

prop('color-accent-1');
// => var(--color-accent-1)

$namespace: 'eddy';

prop('font-size-xl', 'set');
// => --eddy-font-size-xl

rem

The rem() function converts a pixel value to its corresponding rem value.

Arguments

Returns

Examples

rem(20px);
// => 1.25rem

$font-size: 12px;

rem(20px);
// => 1.6666666667rem

replace

The replace() function modifies a string, replacing an original substring with a replacement substring.

Arguments

Returns

Examples

replace('color-neutral-1-inverse', '-inverse');
// => 'color-neutral-1

replace('font-stack-monospace', 'monospace', 'sans-serif');
// => font-stack-sans-serif

unitless

The unitless() function removes a unit from a number.

Arguments

Returns

Examples

unitless(8px);
// => 8

unitless(3.25rem);
// => 3.25

Mixins

The following mixins are available for use in your project.

font-face

The font-face() mixin adds a @font-face delaration.

Arguments

Examples

@include font-face('metropolis', 800, 'italic');

// => @font-face {
// =>   font-display: swap;
// =>   font-family: 'metropolis';
// =>   font-style: italic;
// =>   font-weight: 800;
// =>   src:
// =>     url('../fonts/metropolis-all-800-italic.woff2') format('woff2'),
// =>     url('../fonts/metropolis-all-800-italic.woff') format('woff);
// => }

@include font-face($glyphs: 'latin', $name: 'open sans');

// => @font-face {
// =>   font-display: swap;
// =>   font-family: 'open sans';
// =>   font-style: normal;
// =>   font-weight: 400;
// =>   src:
// =>     url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'),
// =>     url('../fonts/open-sans-latin-400-normal.woff') format('woff);
// => }

media

The media() mixin wraps any nested CSS rules in a @media query.

Arguments

Examples

@include media(400px) {
  h3 {
    font-size: var(--font-size-xxxxl);
  }
}

// => @media only screen and (min-width: 25em) {
// =>   h3 {
// =>     font-size: var(--font-size-xxxxl);
// =>   }
// => }

body {
  --font-weight-unit: 400;

  @include media($min-device-pixel-ratio: 2) {
    --font-weight-unit: 300;
  }
}

// => body {
// =>   --font-weight-unit 400;
// => }
// =>
// => @media only screen and (min-device-pixel-ratio: 2),
// =>   only screen and (min-resolution: 192dpi),
// =>   only screen and (min-resolution: 2dppx) {
// =>   body {
// =>     --font-weight-unit: 300;
// =>   }
// => }

props

The props() mixin sets a map of key-value pairs as CSS Custom Properties.

Arguments

Examples

body {
  @include props(
    (
      default: (
        r-jewel: 18,
        g-jewel: 108,
        b-jewel: 1,
        rgb-jewel: (
          prop(--r-jewel),
          prop(--g-jewel),
          prop(--b-jewel),
        ),
      ),
      supports-display-p3: (
        display-p3-jewel: (
          display-p3 calc(prop(--r-jewel) / 255) calc(prop(--g-jewel) / 255)
            calc(prop(--b-jewel) / 255),
        ),
      ),
    )
  );
}

// => body {
// =>   --r-jewel: 18;
// =>   --g-jewel: 108;
// =>   --b-jewel: 1;
// =>   --rgb-jewel: var(--r-jewel), var(--g-jewel), var(--b-jewel);
// => }
// =>
// => @supports (color: color(display-p3 0 0 0)) {
// =>   body {
// =>     --display-p3-jewel:
// =>       display-p3 calc(var(--r-jewel) / 255)
// =>       calc(var(--g-jewel) / 255) calc(var(--b-jewel) / 255);
// =>   }
// => }

$namespace: 'eddy';

body {
  @include props(
    (
      default: (
        r-jewel: 18,
        g-jewel: 108,
        b-jewel: 1,
        rgb-jewel: (
          prop(--r-jewel),
          prop(--g-jewel),
          prop(--b-jewel),
        ),
      ),
      supports-display-p3: (
        display-p3-jewel: (
          display-p3 calc(prop(--r-jewel) / 255) calc(prop(--g-jewel) / 255)
            calc(prop(--b-jewel) / 255),
        ),
      ),
    )
  );
}

// => body {
// =>   --eddy-r-jewel: 18;
// =>   --eddy-g-jewel: 108;
// =>   --eddy-b-jewel: 1;
// =>   --eddy-rgb-jewel:
// =>     var(--eddy-r-jewel), var(--eddy-g-jewel), var(--eddy-b-jewel);
// => }
// =>
// => @supports (color: color(display-p3 0 0 0)) {
// =>   body {
// =>     --eddy-display-p3-jewel:
// =>       display-p3 calc(var(--eddy-r-jewel) / 255)
// =>       calc(var(--eddy-g-jewel) / 255)
// =>       calc(var(--eddy-b-jewel) / 255);
// =>   }
// => }

scope

The scope() mixin scopes any nested CSS rules to the $root selector if one is set, or a fallback selector if one is passed.

Examples

@include scope {
  .button {
    cursor: pointer;
  }
}

// => .button {
// =>   cursor: pointer;
// => }

$root: '#root';

@include scope('body') {
  .button {
    cursor: pointer;
  }
}

// => #root .button {
// =>   cursor: pointer;
// => }

Tokens

The following tokens are available for use in your project as CSS Custom Properties. It's recommended that you reference these tokens in conjunction with the prop() function:

body {
  background-color: prop('color-scheme-background-primary');
  color: prop('color-scheme-text-primary');
}

Defaults

Each token has a default value which may be contextualised to support different vendors:

Border

Color

Brand

Scheme

Font

Family

Size

Stack

Motion

Space

Swinburne

Yoobee