@outbook/design-decisions

This package provides a centralized and version-controlled way to manage and reuse the foundational design choices for our web components. It ensures a consistent look and feel across all components by offering a common set of SCSS variables and rules.

Installation

To use these design decisions in your project, you'll need to have Sass installed. You can then install this package via npm (or your preferred package manager):

npm install @outbook/design-decisions

Usage

This package exposes SCSS variables and mixins that you can use in your own stylesheets.

Unified Entry Point

You can use the main entry point to access all design decisions. Each module is prefixed with its name.

@use "@outbook/design-decisions" as design;

.my-component {
  padding: design.$measures-baseline;
  @include design.a11y-sr-only();
}

Individual Modules

Alternatively, you can import specific modules directly.

A11y

Accessibility helpers.

@use "@outbook/design-decisions/a11y" as a11y;

.screen-reader-only {
  @include a11y.sr-only();
}

Animation Pulse

Skeleton loader animation.

@use "@outbook/design-decisions/animation-pulse" as animation;

.skeleton {
  --pulse-bg-start: #eee;
  --pulse-bg-end: #ddd;
  @include animation.background();
}

Breakpoints

Responsive design breakpoints.

@use "@outbook/design-decisions/breakpoints" as bp;

@media (min-width: bp.$default-m) {
  // Styles for medium screens
}

Color

Design tokens for colors and themes.

@use "@outbook/design-decisions/color" as design-color;

.text {
  color: design-color.$text--light;
}

Container

Mixins for standard layouts.

@use "@outbook/design-decisions/container" as container;

.main-content {
  @include container.default();
}

Crystal

Mixins for glassmorphism effects.

@use "@outbook/design-decisions/crystal" as crystal;

.glass-panel {
  @include crystal.default();
}

Dialog

Variables for dialog and header dimensions.

@use "@outbook/design-decisions/dialog" as dialog;

.header {
  height: dialog.$header-height;
}

Measures

Spacing, radius, and sizing variables.

@use "@outbook/design-decisions/measures" as measures;

.card {
  border-radius: measures.$radius-m;
  padding: measures.$baseline;
}

Outline

Standardized focus outlines.

@use "@outbook/design-decisions/outline" as outline;

.button:focus {
  @include outline.default();
}

Table

Standardized table styles.

@use "@outbook/design-decisions/table" as table;

.data-table {
  @include table.default();
}

Transition

Animation and transition timing helpers.

@use "@outbook/design-decisions/transition" as transition;

.element {
  @include transition.main();
}

License

This package is licensed under the Apache-2.0 License.