❤
npm
Sign UpSign In

@eddy-aus/core

1.0.4 • Public • Published

Core

Eddy's core.

Table of Contents

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

Name Type Default Value
darkScheme {boolean} true

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

Name Type Default Value
$font-size {number} 16px

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

Name Type Default Value
$namespace {(string|false)} false

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

Name Type Default Value
$reset {bool} true

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

Name Type Default Value
$root {(string|false)} false

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

Name Type Default Value
$vendors {((swinburne?: string(), yoobee?: string())|false)} (swinburne: '.swiburne', yoobee: '.yoobee')

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
Name Type Default Value Description
$diameter {number} None The diameter to convert
Returns
Type Description
{number} The corresponding circumference
Examples
circ(12);
// => 37.6991118431

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

class

The class() function converts strings into classes.

Arguments
Name Type Default Value Description
$strings {string()} None The strings to convert
Returns
Type Description
{string} The classes
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
Name Type Default Value Description
$color {color} None The color to convert
Returns
Type Description
{string} The corresponding display-p3 value
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
Name Type Default Value Description
$pixels {number} None The pixel value to convert
Returns
Type Description
{number} The corresponding em value
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
Name Type Default Value Description
$map {map} None The multi-dimensional map to convert
$flattened-parent-keys {string} '' The map's flattened, parent keys
Returns
Type Description
{map} The one-dimensional map
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
Type Description
{string} The prefix
Examples
prefix();
// => ''

$namespace: 'eddy';

prefix();
// => eddy-

prop

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

Arguments
Name Type Default Value Description
$string {string} None The string to convert
$method {('get'|'set')} 'get' The Custom Property method
Returns
Type Description
{string} The Custom Property
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
Name Type Default Value Description
$pixels {number} None The pixel value to convert
Returns
Type Description
{number} The corresponding rem value
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
Name Type Default Value Description
$string {string} None The string to modify
$original {string} None The original substring
$replacement {string} '' The replacement substring
Returns
Type Description
{string} The modified string
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
Name Type Default Value Description
$number {number} None The number to remove the unit from
Returns
Type Description
{number} The number without its unit
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
Name Type Default Value Description
$name {string} None The name of the font
$weight {(100|200|300|400|500|600|700|800|900)} 400 The weight of the font
$style {('italic'|'normal')} 'normal' The style of the font
$glyphs {('all'|'latin')} 'all' The glyphs of the font
$path {string} '../fonts' The path of the font's source files
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
Name Type Default Value Description
$min-width {(number|false)} false The media query's minimum width
$min-height {(number|false)} false The media query's minimum height
$orientation {('landscape'|'portrait'|false)} false The media query's orientation
$prefers-color-scheme {('dark'|'light'|false)} false The media query's color scheme preferences
$prefers-reduced-motion {('no-preference'|'reduce'|false)} false The media query's motion preferences
$min-device-pixel-ratio {(1|2|3)} 1 The media query's minimum device pixel ratio
$media-type {('all'|'print'|'screen')} screen The media query's media type
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
Name Type Default Value Description
$tokens {map} None The map of key-value pairs to set
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
Token Type Value
border-radius-xxxs {number} 0.5rem
border-radius-xxs {number} 0.75rem
border-radius-xs {number} 0.1rem
border-radius-s {number} 1.5rem
border-radius-m {number} 2.25rem
border-radius-l {number} 3.5rem
border-radius-xl {number} 5.5rem
border-radius-xxl {number} 8.75rem
border-radius-xxxl {number} 14rem
Color
Brand
Token Type Value
color-brand-alabaster {color} #fefefe
color-brand-bilbao {color} #248802
color-brand-christi {color} #59dd05
color-brand-crusoe {color} #005000
color-brand-harlequin {color} #6bf906
color-brand-jewel {color} #126c01
color-brand-limeaid {color} #47c104
color-brand-mercury {color} #e8e8e8
color-brand-mine-shaft {color} #242424
color-brand-salem {color} #36a503
color-brand-tundora {color} #333333
Scheme
Token Type Value Dark Scheme Value
color-scheme-background-primary {color} #fefefe #333333
color-scheme-background-primary-inverse {color} #333333 #fefefe
color-scheme-background-secondary {color} #e8e8e8 #242424
color-scheme-background-secondary-inverse {color} #242424 #e8e8e8
color-scheme-gray-1 {color} #242424 #fefefe
color-scheme-gray-1-inverse {color} #fefefe #242424
color-scheme-gray-2 {color} rgba(36, 36, 36, 0.86) rgba(254, 254, 254, 0.79)
color-scheme-gray-2-inverse {color} rgba(254, 254, 254, 0.79) rgba(36, 36, 36, 0.86)
color-scheme-gray-3 {color} rgba(36, 36, 36, 0.66) rgba(254, 254, 254, 0.51)
color-scheme-gray-3-inverse {color} rgba(254, 254, 254, 0.51) rgba(36, 36, 36, 0.66)
color-scheme-gray-4 {color} rgba(36, 36, 36, 0.51) rgba(254, 254, 254, 0.36)
color-scheme-gray-4-inverse {color} rgba(254, 254, 254, 0.36) rgba(36, 36, 36, 0.51)
color-scheme-gray-5 {color} rgba(36, 36, 36, 0.16) rgba(254, 254, 254, 0.1)
color-scheme-gray-5-inverse {color} rgba(254, 254, 254, 0.1) rgba(36, 36, 36, 0.16)
color-scheme-gray-6 {color} rgba(36, 36, 36, 0.11) rgba(254, 254, 254, 0.07)
color-scheme-gray-6-inverse {color} rgba(254, 254, 254, 0.07) rgba(36, 36, 36, 0.11)
color-scheme-gray-7 {color} rgba(36, 36, 36, 0.06) rgba(254, 254, 254, 0.04)
color-scheme-gray-7-inverse {color} rgba(254, 254, 254, 0.04) rgba(36, 36, 36, 0.06)
color-scheme-icon {color} rgba(36, 36, 36, 0.51) rgba(254, 254, 254, 0.36)
color-scheme-icon-inverse {color} rgba(254, 254, 254, 0.36) rgba(36, 36, 36, 0.51)
color-scheme-interaction-primary {color} #126c01 #59dd05
color-scheme-interaction-primary-inverse {color} #59dd05 #126c01
color-scheme-interaction-secondary {color} rgba(89, 221, 5, 0.4) rgba(18, 108, 1, 0.32)
color-scheme-interaction-secondary-inverse {color} rgba(18, 108, 1, 0.32) rgba(89, 221, 5, 0.4)
color-scheme-text-primary {color} #242424 #fefefe
color-scheme-text-primary-inverse {color} #fefefe #242424
color-scheme-text-secondary {color} rgba(36, 36, 36, 0.86) rgba(254, 254, 254, 0.79)
color-scheme-text-secondary-inverse {color} rgba(254, 254, 254, 0.79) rgba(36, 36, 36, 0.86)
color-scheme-text-tertiary {color} rgba(36, 36, 36, 0.66) rgba(254, 254, 254, 0.51)
color-scheme-text-tertiary-inverse {color} rgba(254, 254, 254, 0.51) rgba(36, 36, 36, 0.66)
Font
Family
Token Type Value
font-family-heading {string()} ('metropolis', 'figtree', 'montserrat', 'helvetica neue', arial, sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol')
font-family-paragraph {string()} (system-ui, -apple-system, BlinkMacSystemFont, 'segoe ui', roboto, 'helvetica neue', arial, sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol')
font-family-source {string()} (ui-monospace, menlo, monaco, 'cascadia mono', 'segoe ui mono', 'roboto mono', 'courier new', monospace, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol')
font-family-ui {string()} (system-ui, -apple-system, BlinkMacSystemFont, 'segoe ui', roboto, 'helvetica neue', arial, sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol')
Size
Token Type Value
font-size-xxxxxxs {number} 0.585rem
font-size-xxxxxs {number} 0.658125rem
font-size-xxxxs {number} 0.740625rem
font-size-xxxs {number} 0.833125rem
font-size-xxs {number} 0.9375rem
font-size-xs {number} 1.055rem
font-size-s {number} 1.18625rem
font-size-m {number} 1.335rem
font-size-l {number} 1.501875rem
font-size-xl {number} 1.689375rem
font-size-xxl {number} 1.900625rem
font-size-xxxl {number} 2.138125rem
font-size-xxxxl {number} 2.405625rem
font-size-xxxxxl {number} 2.70625rem
font-size-xxxxxxl {number} 3.044375rem
Stack
Token Type Value
font-stack-monospace {string()} (ui-monospace, menlo, monaco, 'cascadia mono', 'segoe ui mono', 'roboto mono', 'courier new', monospace, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol')
font-stack-sans-serif {string()} (system-ui, -apple-system, BlinkMacSystemFont, 'segoe ui', roboto, 'helvetica neue', arial, sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol')
Motion
Token Type Value Reduced Motion Value
motion-duration-1 {number} 200ms 100ms
motion-duration-2 {number} 400ms 200ms
motion-duration-3 {number} 600ms 300ms
motion-duration-4 {number} 800ms 400ms
motion-duration-5 {number} 1000ms 500ms
motion-duration-6 {number} 1200ms 600ms
motion-duration-7 {number} 1400ms 700ms
motion-duration-8 {number} 1600ms 800ms
motion-duration-9 {number} 1800ms 900ms
motion-duration-10 {number} 2000ms 1000ms
Space
Token Type Value
space-xxxs {number} 0.25rem
space-xxs {number} 0.5rem
space-xs {number} 0.75rem
space-s {number} 1.25rem
space-m {number} 2rem
space-l {number} 3.25rem
space-xl {number} 5.25rem
space-xxl {number} 8.5rem
space-xxxl {number} 13.75rem

Swinburne

Yoobee

Readme

Keywords

none

Package Sidebar

Install

npm i @eddy-aus/core

Repository

github.com/eddy-aus/design-system

Homepage

github.com/eddy-aus/design-system/packages/core#readme

Weekly Downloads

50

Version

1.0.4

License

MIT

Unpacked Size

1.3 MB

Total Files

98

Last publish

Collaborators

  • danielmaddison
Try on RunKit
Report malware