@eddy-aus/core
v1.0.4
Published
Eddy's core
Readme
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/coreThen 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.8318530718pxclass
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-activedisplay-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);
// => 20emflatten
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-xlrem
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.6666666667remreplace
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-serifunitless
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.25Mixins
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 |