sturobson

$red: #ff0000;
$blue: #00ff00;
$green: #00ffff;
$yellow: #ffff00;
$purple: #ff00ff;
$pink: #ff0080;
$orange: #ff8000;
$white: #ffffff;
$black: #000000;

sturobson

$red: #ff0000;
$blue: #00ff00;
$white: #ffffff;
$black: #000000;

$color-map: (
  red: (
    100: mix($white, $red, 10%),
    200: mix($white, $red, 20%),
    300: mix($white, $red, 30%),

sturobson

@mixin margin($value, $direction: null) {
    @if $direction == null {
        margin: $value;
    }
    @if $direction == top {
        margin-block-start: $value
    }
    @if $direction == bottom {
        margin-block-end: $value
    }

sturobson

Your design system contribution practice is doomed to fail

Amy Hupe

sturobson

// To stop the front-end toolkits from outputting all the CSS custom properties we could make use of the global-variable-exists in Sass. 

// The variable would need to be declare before the 00-tokens/_index.scss file is imported.

// I'm hoping we can get style dictionary to generate the second 'category specific' part of the @if statement below 
// (global-variable-exists(use_custom_properties--color)). So folks can turn it  all on, or only the bits they need.

// If you uncomment either of the Sass variables below you'll see that the CSS is printed

sturobson

$context--spacing: (0, 2, 4, 8, 16, 24, 32, 48, 64);
$context--keyline-border-color: #ccc;

@function spacing($keys...) {
	@if length($context--spacing) == 0 {
		@error 'No values found in $context--spacing.';
	}

	@if length($keys) > 4 {
		@error 'spacing() accepts a maximum of 4 arguments.';

sturobson

@use "sass:map";

$context--colors: (
	'accent': #ee7d11,
	'corporate': #00285a,
	'corporate-light': scale-color(#00285a, $lightness: 10%),
	'error': #c40606,
	'warning': #fc0,
	'info': #004b83,
	'success': #71ab0b,

sturobson

// Declare the values as Sass variables

$context--font-size-h1: 2rem;
$context--font-size-h2: 1.5rem;
$context--font-size-h3: 1.25rem;

$context--font-weight-bold: 700;

// Then use those values in these Sass placeholders.

sturobson

// Declare the values as Sass variables

$context--font-size-h1: 2rem;
$context--font-size-h2: 1.5rem;
$context--font-size-h3: 1.25rem;
$context--font-size-h4: 1.25rem;
$context--font-size-h5: 1.125rem;

$context--font-weight-normal: 400;
$context--font-weight-bold: 700;

sturobson

@use "sass:map"; // needed for new way

$context--colors: (
	'accent': #ee7d11,
	'corporate': #00285a,
	'corporate-light': scale-color(#00285a, $lightness: 10%),
	'error': #c40606,
	'warning': #fc0,
	'info': #004b83,
	'success': #71ab0b,