Development - WIP

Here is the development documentation for Matryoshka.

Colors

Returns the specified color from $ds-colors settings.

• colorName: required the color name defined in $ds-colors
• contrastName: optional the contrast name
  • defined in $ds-contrasts for automatic color groups
  • defined in its own color group $ds-colors for manual and custom color groups

For the following examples, assuming we have the following colors and contrasts:

// Colors example
$ds-colors: (
    brand:      #123456, // Automatic color group
    neutral: ( // Manual color group
        0:          gray, // Reference color
        light:      #eee,
        dark:       #333
    ),
    other: ( // Custom color group
        foo:        blue,
        bar:        green
    )
);

// Contrasts example
$ds-contrasts: (
    max:      100,
    mid:      30,
    mid-rev:  -30,
    max-rev:  -100
);

// brand color group: Automatic (based on $ds-contrasts)
my-color(brand);
// Returns #123456;

my-color(brand, max);
// Returns computed #ffffff;

my-color(brand, mid);
// Returns computed #2771bb;

my-color(brand, mid-rev);
// Returns computed #0d243c;

my-color(brand, mid-rev);
// Returns computed #000000;

// neutral color group: Manual (based on its reference color 0: gray)
my-color(neutral) // Similar to my-color(neutral, 0);
// Returns #123456;

my-color(neutral, light);
// Returns specified #eee;

my-color(neutral, dark);
// Returns specified #333;

// other color group: Custom (independant colors)
my-color(other, foo)
// Returns specified blue;

my-color(other, bar);
// Returns specified green;

Font sizes

Returns the specified font size with the design system unit from $ds-font-sizes settings.

fontSizeName: required the font size name defined in $ds-font-sizes.

For the following examples, assuming we have the following font sizes set:

// Design system unit example
$ds-unit: px;

// Font sizes example
$ds-font-sizes: (
    xxs: 10,
    xs:  13,
    sm:  16,
    md:  24,
    lg:  36,
    xl:  48,
    xxl: 64
);

my-font-size(xxs);
// Returns 10px;

my-font-size(md);
// Returns 24px;

my-font-size(xxl);
// Returns 64px;

// etc

Spacings

Returns the specified spacing with the design system unit from $ds-spacings settings.

• sName1: required a spacing name defined in $ds-spacings.
  This function supports shorthand. Thus, sName1 argument can be
  • Global spacing, for ex.
    • my-spacing(sName1)
  • Vertical spacing, for ex.
    • my-spacing(sName1, sName2)
  • Top spacing, for ex.
    • my-spacing(sName1, sName2, sName3, sName4)
• sName2: optional a spacing name defined in $ds-spacings.
  This function supports shorthand. Thus, sName2 argument can be
  • Horizontal spacing, for ex.
    • my-spacing(sName1, sName2)
  • Right spacing, for ex.
    • my-spacing(sName1, sName2, sName3, sName4)
• sName3: optional a spacing name defined in $ds-spacings.
  This function supports shorthand. Thus, sName3 defines bottom spacing, for ex.
  • my-spacing(sName1, sName2, sName3, sName4)
• sName4: optional a spacing name defined in $ds-spacings.
  This function supports shorthand. Thus, sName4 defines left spacing, for ex.
  • my-spacing(sName1, sName2, sName3, sName4)

For the following examples, assuming we have the following spacings set:

// Design system unit example
$ds-unit: px;

// Spacings example
$ds-spacings: (
    none:   0,
    xxs:    5,
    xs:     10,
    sm:     15,
    md:     25,
    lg:     40,
    xl:     64,
    xxl:    128
);

my-spacing(xxs);
// Returns 5px;

my-spacing(md);
// Returns 25px;

my-spacing(xxl);
// Returns 128px;

// etc

Shorthand for spacings

This function supports CSS shorthand:

// Design system unit example
$ds-unit: px;

// Spacings example
$ds-spacings: (
    none:   0,
    xxs:    5,
    xs:     10,
    sm:     15,
    md:     25,
    lg:     40,
    xl:     64,
    xxl:    128
);

my-spacing(xs, md);
// Returns 10px 25px;

my-spacing(xxs, sm, md, lg);
// Returns 5px 15px 25px 40px;

Border radius

Returns the specified border radius with the design system unit from $ds-border-radius settings.

• brName1: required a border radius name defined in $ds-border-radius.
  This function supports shorthand. Thus, brName1 argument can be
  • Global border radius, for ex.
    • my-border-radius(brName1)
  • Top-left + bottom-right border radius, for ex.
    • my-border-radius(brName1, brName2)
  • Top-left border radius, for ex.
    • my-border-radius(brName1, brName2, brName3, brName4)
• brName2: optional a border radius name defined in $ds-border-radius.
  This function supports shorthand. Thus, brName2 argument can be
  • Top-right + bottom-left border radius, for ex.
    • my-border-radius(brName1, brName2)
  • Top-right border radius, for ex.
    • my-border-radius(brName1, brName2, brName3, brName4)
• brName3: optional a border radius name defined in $ds-border-radius.
  This function supports shorthand. Thus, brName3 defines bottom-right border radius, for ex.
  • my-border-radius(brName1, brName2, brName3, brName4)
• brName4: optional a border radius name defined in $ds-border-radius.
  This function supports shorthand. Thus, brName4 defines bottom-left border radius, for ex.
  • my-border-radius(brName1, brName2, brName3, brName4)

For the following examples, assuming we have the following border radius set:

// Design system unit example
$ds-unit: px;

// Border radius example
$ds-border-radius: (
    min:    0,
    second: 4,
    third:  9,
    max:    16
);

my-border-radius(min);
// Returns 0px;

my-border-radius(second);
// Returns 4px;

my-border-radius(max);
// Returns 16px;

// etc

Shorthand for border radius

This function supports CSS shorthand:

// Design system unit example
$ds-unit: px;

// Border radius example
$ds-border-radius: (
    min:    0,
    second: 4,
    third:  9,
    max:    16
);

my-border-radius(min);
// Returns 0px;

my-border-radius(min, second);
// Returns 0px 4px;

my-border-radius(min, second, third, max);
// Returns 0px 4px 9px 16px;