taurean

@use "sass:map";
@use "sass:list";
@use "sass:math";

$breakpoints: (
    mobile: 414px, // mobile portrait
    tablet: 768px, // mobile landscape / Tablet Portrait
    desktop: 1280px, // tablet landscape
);

taurean

@use "sass:map";
@use "sass:list";
@use "sass:math";

$breakpoints: (
    mobile: 414px, // mobile portrait
    tablet: 768px, // mobile landscape / Tablet Portrait
    desktop: 1280px, // tablet landscape
);

taurean

.test {
  color: blue;
}
@media screen and (min-width: 400px) {
  .test {
    color: red;
  }
}
@media screen and (max-width: 1024px) {
  .test {

taurean

// The Map & Mixin
$transition-props-map: (
  color: (
    duration: 75ms,
    timing: ease-in
  ),
  opacity: (
    duration: 100ms,
    timing: ease-in,
  ),

taurean

.example-case {
  @include transition(opacity, color, transform);
  color: blue;
  opacity: 0.5;
  transform: translateX(0);
  
  &:hover,
  &:focus {
    color: dodgerblue;
    opacity: 1;

taurean

$transition-props-map: (
  color: (
    duration: 75ms,
    timing: ease-in
  ),
  opacity: (
    duration: 100ms,
    timing: ease-in,
  ),
  transform: (

taurean

$transition-props-map: (
  color: (
    duration: 75ms,
    timing: ease-in
  ),
  opacity: (
    duration: 100ms,
    timing: ease-in,
  ),
  transform: (

taurean

@mixin transition($properties...) {
    $transition-props: ();

    @each $property in $properties {
      $transition-props: append($transition-props, #{$property + ' ' + '100ms' + ' ' + 'ease'}, comma);
    }

    transition: $transition-props;
}

taurean

Introduction

I'll add some introduction stuff here to help route new Handbook users to different documentation based on what they might need or what role in the organization they're in.

Understanding the language

Among other things, design systems rely on everyone speaking the same language as they serve multiple departments. You can view the full almanac of terms here but for the sake of understanding how to navigate the Handbook we'll cover the basics here in this introduction. For most people, it's natural to break up applications from pages into components, components into design patterns, and design patterns into individual design properties. But, since each step builds and contributes to the larger level of fidelity above it we'll work from the bottom up instead.

Tokens & Design Properties

Design properties are the smallest possible pieces that represent a design idea. A design property can be anything as long as it's a single property. For example, `text-color: #ff0

taurean

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Welcome, Button } from '@storybook/angular/demo';

storiesOf('Welcome', module).add('to Storybook', () => ({
  component: Welcome,
  props: {},
}));