sage

css

:root

:root { ... }

Description

Sage responsive font sizes and line heights custom props

Responsive font sizes and line heights use CSS custom properties to apply a raw font size for a given breakpoint range. NOTE: Changes to these configurations should also be synced up in the following places:

  • components/_icon.scss
  • Sage Rails tokens definition
  • React Icon configurations

variables

sage-font-cdn-root

$sage-font-cdn-root: "https://sage.kajabi-cdn.com/fonts";

Description

Base Font CDN path

sage-active-underline-configs

$sage-active-underline-configs: (
  height: rem(3px),
  color: sage-color(charcoal, 400),
);

Description

Active underline configuration

Used by

sage-assistant-height

$sage-assistant-height: rem(56px);

Description

Assistant height shared by layout components

sage-banner-heights

$sage-banner-heights: (
  default: rem(48px),
  ladera: rem(60px),
);

Description

Banner heights for page offsets

sage-field-configs

$sage-field-configs: (
  // Border treatments
  border-radius: sage-border(radius),
  border-width: rem(1px),
  box-shadow-size: 0 0 0 rem(1px),
  // Sizing
  height: rem(40px),
  padding: sage-spacing(sm),
  padding-label: sage-spacing(2xs),
  // Outer spacing
  bottom-gap: sage-spacing(),
);

Description

Field configurations

sage-field-colors

$sage-field-colors: (
  border: sage-color(grey, 400),
  default: sage-color(charcoal, 300),
  disabled: sage-color(grey, 500),
  disabled-background: sage-color(grey, 200),
  error: sage-color(red, 300),
  label-background: sage-color(white),
  success: sage-color(primary, 300),
);

Description

Field coloring

sage-radio-colors

$sage-radio-colors: (
  checked: sage-color(charcoal, 400),
  checked-disabled: sage-color(grey, 300),
  checked-hover: sage-color(charcoal, 500),
  checked-inner: sage-color(white),
  default: sage-color(grey, 400),
  disabled: sage-color(grey, 200),
  error: sage-color(red, 300),
  hover: sage-color(grey, 500),
);

Description

Radio button colors

sage-radio-size

$sage-radio-size: rem(16px);

Description

Radio button size

sage-tab-colors

$sage-tab-colors: (
  default: sage-color(charcoal, 300),
  active: sage-color(charcoal, 400),
  disabled: sage-color(charcoal, 100),
);

Description

Tab colors shared by components such as tabs and choices

sage-text-colors

$sage-text-colors: (
  body: sage-color(charcoal, 400),
  heading: sage-color(charcoal, 500),
);

Description

Standard text colors

sage-toolbar-button-borders

$sage-toolbar-button-borders: (
  default: 0 0 0 1px sage-color(grey, 500),
  focus: 0 0 0 4px sage-color(primary, 200),
  hover: 0 0 0 1px sage-color(charcoal, 100),
  active-hover: 0 0 0 4px sage-color(primary, 200),
);

Description

Toolbar border styles

sage-transitions

$sage-transitions: (
  default: 0.1s ease-in-out,
  input: 0.2s ease-in-out
);

Description

Transitions

Used by

sage-baseline

$sage-baseline: rem(4px);

Description

Default baseline for the system

sage-borders

$sage-borders: (
  default: rem(1px) solid sage-color(grey, 300),
  error: rem(1px) solid sage-color(red, 300),
  interactive: rem(1px) solid sage-color(grey, 400),
  interactive-hover: rem(1px) solid sage-color(grey, 500),
  radius-small: rem(4px),
  radius: rem(8px),
  radius-medium: rem(10px),
  radius-large: rem(16px),
  radius-x-large: rem(100px),
  radius-round: 50%,
  focus-outline: rem(11px),
);

Description

Sage borders token

Used by

sage-borders-interactive

$sage-borders-interactive: (
  default: 0 0 0 1px sage-color(grey, 400),
  hover: 0 0 0 1px sage-color(grey, 500),
  focus: 0 0 0 4px sage-color(primary, 200),
  selected: 0 0 0 4px sage-color(charcoal, 400),
  error: 0 0 0 1px sage-color(red, 300),
  error-focus: 0 0 0 4px sage-color(red, 300),
  disabled: 0 0 0 1px sage-color(grey, 300),
);

Description

Sage borders interactive token

Used by

sage-breakpoints

$sage-breakpoints: (
  xs-max: 544px,
  sm-min: 545px,
  sm-max: 767px,
  md-min: 768px,
  md-max: 991px,
  lg-min: 992px,
  lg-max: 1199px,
  xl-min: 1200px,
  xxl-min: 1440px,
);

Description

Sage breakpoints token

Used by

sage-color-combos

$sage-color-combos: $sd-sage-color-combos;

Description

Sage color combinations token from Style Dictionary. See style-dictionary/tokens/color/combos.json.

sage-colors

$sage-colors: $sd-sage-color;

Description

Sage color palette token from Style Dictionary. See style-dictionary/tokens/color/base.json.

sage-color-default

$sage-color-default: $sd-sage-color-base-grey-500-hex;

Description

Sage default color

Used by

sage-color-default-name

$sage-color-default-name: "grey 500";

Description

Sage default color name for debug output.

Used by

sage-containers

$sage-containers: (
  tiny: rem(200px),
  xs: rem(240px),
  sm: rem(340px),
  md: rem(520px),
  lg: rem(700px),
  xl: rem(1064px),
  full: rem(1440px),
);

Description

Sage containers token

Used by

sage-font-sizes

$sage-font-sizes: (
  xs: rem(12px),
  sm: rem(14px),
  md: rem(16px),
  lg: rem(18px),
  xl: rem(24px),
  2xl: rem(28px),
  3xl: rem(32px),
  4xl: rem(40px)
);

Description

Sage raw font sizes token (non-responsive)

Sage allows for responsive typography which use these raw font sizes as the source of truth for its possible sizes. See core/_typography.scss for where these are primarily implemented.

Used by

sage-font-weights

$sage-font-weights: (
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700
);

Description

Sage font weights token

Used by

sage-grid-templates

$sage-grid-templates: ();

Description

Stores a full map of grid configurationsfrom Style Dictionary. See style-dictionary/tokens/content/grid-template.json. Result is a map of codes.

Used by

See

sage-grid-gap-options

$sage-grid-gap-options: (
  // Generic sizes
  xs: rem(8px),
  sm: rem(16px),
  md: rem(24px),
  lg: rem(32px),
);

Description

Sage grid gap options token

Used by

sage-icon-sizes

$sage-icon-sizes: (
  xs: rem(8px),
  sm: rem(12px),
  md: rem(16px),
  lg: rem(20px),
  xl: rem(24px),
  2xl: rem(28px),
  3xl: rem(32px),
  4xl: rem(36px),
);

Description

Sage icon sizes

Used by

sage-icon-background-sizes

$sage-icon-background-sizes: (
  xs: rem(30px),
  sm: rem(40px),
  md: rem(50px),
  lg: rem(60px),
  xl: rem(70px),
  2xl: rem(80px),
  3xl: rem(90px),
  4xl: rem(100px),
);

Description

Sage icon Background sizes

sage-icons

$sage-icons: (
  // Primary/active list
  access-key: unicode(e900),
  add: unicode(e901),
  add-circle: unicode(e902),
  add-image: unicode(e903),
  add-small: unicode(e904),
  align-center: unicode(e905),
  align-justify: unicode(e906),
  align-left: unicode(e907),
  align-right: unicode(e908),
  archive: unicode(e909),
  arrow-corner: unicode(e90a),
  arrow-down: unicode(e90b),
  arrow-left: unicode(e90c),
  arrow-right: unicode(e90d),
  arrow-up: unicode(e90e),
  assessment: unicode(e90f),
  at-sign: unicode(e910),
  attach: unicode(e911),
  automations: unicode(e912),
  ban: unicode(e913),
  bank: unicode(e914),
  bell: unicode(e915),
  blog: unicode(e916),
  bold: unicode(e917),
  broadcast: unicode(e918),
  calendar-date: unicode(e919),
  calendar-schedule: unicode(e91a),
  calendar-simple: unicode(e91b),
  card-amex: unicode(e91e),
  card-android: unicode(e91f),
  card-apple: unicode(e920),
  card-diners: unicode(e921),
  card-discover: unicode(e923),
  card-generic: unicode(e922),
  card-mastercard: unicode(e924),
  card-paypal: unicode(e925),
  card-stripe: unicode(e926),
  card-update: unicode(e927),
  card-visa: unicode(e928),
  caret-down: unicode(e929),
  caret-left: unicode(e92a),
  caret-right: unicode(e92b),
  caret-up: unicode(e92c),
  cart: unicode(e92d),
  cart-add: unicode(e92e),
  chart: unicode(e92f),
  chart-filled: unicode(e930),
  check: unicode(e931),
  check-circle: unicode(e932),
  check-circle-filled: unicode(e933),
  circle-1: unicode(e934),
  circle-2: unicode(e935),
  circle-3: unicode(e936),
  circle-4: unicode(e937),
  circle-5: unicode(e938),
  circle-6: unicode(e939),
  circle-7: unicode(e93a),
  circle-8: unicode(e93b),
  circle-9: unicode(e93c),
  clock: unicode(e93d),
  closed-captions: unicode(e93e),
  code: unicode(e93f),
  color: unicode(e940),
  columns: unicode(e941),
  comment: unicode(e942),
  connect: unicode(e943),
  contact: unicode(e944),
  conversation: unicode(e945),
  copy: unicode(e946),
  coupon: unicode(e947),
  course: unicode(e948),
  credit-card: unicode(e949),
  custom-field: unicode(e94a),
  customize: unicode(e94b),
  danger: unicode(e94c),
  danger-filled: unicode(e94d),
  delete-circle: unicode(e94e),
  delete-key: unicode(e94f),
  delete-x: unicode(e950),
  dollar: unicode(e951),
  dot-menu-horizontal: unicode(e952),
  down-small: unicode(e953),
  download: unicode(e954),
  downsell: unicode(e955),
  draft: unicode(e956),
  drop: unicode(e957),
  duplicate: unicode(e958),
  email-activity: unicode(e959),
  enlarge: unicode(e95a),
  enlarge-vertical: unicode(e95b),
  expand: unicode(e95c),
  favorite: unicode(e95d),
  feedback: unicode(e95e),
  file: unicode(e95f),
  file-money: unicode(e960),
  filter: unicode(e961),
  flag: unicode(e962),
  folder: unicode(e963),
  folder-group: unicode(e964),
  form: unicode(e965),
  form-field: unicode(e966),
  fullscreen: unicode(e967),
  gear: unicode(e968),
  gear-filled: unicode(e969),
  grant-offer: unicode(e96a),
  handle: unicode(e96b),
  handle-2: unicode(e96c),
  handle-2-vertical: unicode(e96d),
  hashtag: unicode(e96e),
  heading-large: unicode(e96f),
  heading-small: unicode(e970),
  headset: unicode(e971),
  help: unicode(e972),
  help-filled: unicode(e973),
  home: unicode(e974),
  home-alt: unicode(e975),
  home-filled: unicode(e976),
  horizontal-line: unicode(e977),
  image: unicode(e978),
  info-circle: unicode(e979),
  info-circle-filled: unicode(e97a),
  italic: unicode(e97b),
  kajabi: unicode(e97c),
  kajabi-filled: unicode(e97d),
  lab: unicode(e97e),
  launch: unicode(e97f),
  layout-grid: unicode(e980),
  layout-list: unicode(e981),
  left-small: unicode(e982),
  list-bullet: unicode(e983),
  list-details: unicode(e984),
  list-numbers: unicode(e985),
  location: unicode(e987),
  lock: unicode(e988),
  lock-alt: unicode(e989),
  logo-facebook: unicode(e9e5),
  logo-instagram: unicode(e9e6),
  logo-linkedin: unicode(e9e7),
  logo-tiktok: unicode(e9e8),
  logo-twitter: unicode(e9e9),
  loop: unicode(e98a),
  mail: unicode(e98b),
  mapped: unicode(e98c),
  margin-left: unicode(e98d),
  margin-right: unicode(e98e),
  megaphone: unicode(e98f),
  megaphone-filled: unicode(e990),
  menu: unicode(e991),
  menu-alt: unicode(e992),
  menu-bordered: unicode(e993),
  merge: unicode(e994),
  microphone: unicode(e995),
  microphone-off: unicode(e996),
  monitor: unicode(e997),
  monitor-filled: unicode(e998),
  move-left: unicode(e999),
  move-right: unicode(e99a),
  multi-pay: unicode(e99b),
  newsletter: unicode(e99c),
  "null": "",
  one-off-session: unicode(e99d),
  one-time: unicode(e99e),
  package: unicode(e99f),
  pause: unicode(e9a0),
  payout: unicode(e9a1),
  pen: unicode(e9a2),
  phone-portrait: unicode(e9a3),
  phone-toolbar: unicode(e9a4),
  play: unicode(e9a5),
  play-circle: unicode(e9a6),
  play-outline: unicode(e9a7),
  plug: unicode(e9a8),
  present: unicode(e9a9),
  preview-off: unicode(e9aa),
  preview-on: unicode(e9ab),
  product: unicode(e9ac),
  product-filled: unicode(e9ad),
  question-circle: unicode(e9ae),
  quote: unicode(e9af),
  redo: unicode(e9b0),
  refresh: unicode(e9b1),
  remove: unicode(e9b2),
  remove-circle: unicode(e9b3),
  rename: unicode(e9b4),
  reset-password: unicode(e9b5),
  restore: unicode(e9b6),
  right-small: unicode(e9b7),
  round-dollar: unicode(e9b8),
  rows: unicode(e986),
  screen-share-off: unicode(e9b9),
  screen-share-on: unicode(e9ba),
  search: unicode(e9bb),
  search-small: unicode(e9bc),
  send-message: unicode(e9bd),
  sequences: unicode(e9be),
  skipped: unicode(e9bf),
  slash-divider: unicode(e9c0),
  speaker: unicode(e9c1),
  stack: unicode(e9c2),
  star: unicode(e9c3),
  stop: unicode(e9c4),
  strikethrough: unicode(e9c5),
  subscript: unicode(e9c6),
  subscriptions: unicode(e9c7),
  super-admin: unicode(e9c8),
  superscript: unicode(e9c9),
  sync: unicode(e9ca),
  tablet-landscape: unicode(e9cb),
  tablet-portrait: unicode(e9cc),
  tag: unicode(e9cd),
  tag-filled: unicode(e9ce),
  theme-store: unicode(e9cf),
  trash: unicode(e9d0),
  underline: unicode(e9d1),
  undo: unicode(e9d2),
  unlock: unicode(e9d3),
  unmapped: unicode(e9d4),
  up-small: unicode(e9d5),
  upload: unicode(e9d6),
  url: unicode(e9d7),
  user: unicode(e9d8),
  user-circle: unicode(e9d9),
  user-circle-filled: unicode(e9da),
  user-star: unicode(e9db),
  user-star-filled: unicode(e9dc),
  users: unicode(e9dd),
  users-alt: unicode(e9de),
  video-off: unicode(e9df),
  video-on: unicode(e9e0),
  warning: unicode(e9e1),
  warning-filled: unicode(e9e2),
  window-paragraph: unicode(e9e3),
  world: unicode(e9e4),
);

Description

Sage icons

Used by

sage-letter-spacings

$sage-letter-spacings: (
  xs: rem(-0.15px),
  sm: rem(-0.5px),
  md: rem(-0.6px),
);

Description

Sage letter spacing/kerning token

Used by

sage-line-heights

$sage-line-heights: (
  xs: sage-baseline(4), // 16
  sm: sage-baseline(5), // 20
  md: sage-baseline(6), // 24
  lg: sage-baseline(7), // 28
  xl: sage-baseline(8), // 32
  2xl: sage-baseline(10), // 40
  3xl: sage-baseline(12), // 48
  4xl: sage-baseline(15), // 60
);

Description

Sage raw line height/leading token (non-responsive) See core/_typography.scss for where these are primarily implemented.

Used by

sage-shadows

$sage-shadows: (
  sm: (0 2px 4px rgba(sage-color(black), 0.12), 0 0 2px rgba(sage-color(black), 0.08)),
  md: (0 8px 14px rgba(sage-color(black), 0.16), 0 0 4px rgba(sage-color(black), 0.08)),
  lg: (0 8px 40px rgba(sage-color(black), 0.24)),
  modal: (0 8px 40px rgba(sage-color(black), 0.24), 0 0 4px rgba(sage-color(black), 0.1)),
);

Description

Sage shadows token

Used by

sage-sidebars

$sage-sidebars: (
  sm: rem(240px),
  md: rem(320px),
  lg: rem(400px),
  xl: 80vw
);

Description

Sage sidebars token

Used by

sage-spacings

$sage-spacings: (
  // Generic sizes
  3xs: rem(2px),
  2xs: rem(4px),
  xs: rem(8px),
  sm: rem(16px),
  md: rem(24px),
  lg: rem(32px),
  xl: rem(48px),
  2xl: rem(64px),
  // Contextual sizes
  stage: rem(48px),
  panel: rem(32px),
  card: rem(24px),
  stack: rem(8px),
);

Description

Sage spacing token

Used by

sage-type-pairings

$sage-type-pairings: (
  4xl: (
    font-size: sage-font-size(4xl, false),
    line-height: sage-line-height(4xl),
  ),
  3xl: (
    font-size: sage-font-size(3xl, false),
    line-height: sage-line-height(3xl),
  ),
  2xl: (
    font-size: sage-font-size(2xl, false),
    line-height: sage-line-height(2xl),
  ),
  xl: (
    font-size: sage-font-size(xl, false),
    line-height: sage-line-height(xl),
  ),
  lg: (
    font-size: sage-font-size(lg, false),
    line-height: sage-line-height(lg),
  ),
  md: (
    font-size: sage-font-size(md, false),
    line-height: sage-line-height(md),
  ),
  sm: (
    font-size: sage-font-size(sm, false),
    line-height: sage-line-height(sm),
  ),
  xs: (
    font-size: sage-font-size(xs, false),
    line-height: sage-line-height(xs),
  ),
);

Description

Sage Type_pairings token

Used by

sage-type-specs

$sage-type-specs: (
  // Headings
  "heading-1": (
    kerning: sage-letter-spacing(md),
    responsive: true,
    type-pairing: h1,
    weight: sage-font-weight(bold),
  ),
  "heading-2": (
    kerning: sage-letter-spacing(md),
    responsive: true,
    type-pairing: h2,
    weight: sage-font-weight(bold),
  ),
  "heading-3": (
    kerning: sage-letter-spacing(xs),
    responsive: true,
    type-pairing: h3,
    weight: sage-font-weight(bold),
  ),
  "heading-4": (
    kerning: sage-letter-spacing(xs),
    responsive: true,
    type-pairing: h4,
    weight: sage-font-weight(semibold),
  ),
  "heading-5": (
    responsive: true,
    type-pairing: h5,
    weight: sage-font-weight(semibold),
  ),
  "heading-6": (
    responsive: true,
    type-pairing: h6,
    weight: sage-font-weight(semibold),
  ),
  "nav": (
    responsive: false,
    type-pairing: md,
    weight: sage-font-weight(medium),
  ),
  "nav-sub": (
    responsive: false,
    type-pairing: sm,
    weight: sage-font-weight(medium),
  ),

  // Body
  "body": $-t-base-spec,
  "body-med": map-merge($-t-base-spec, (
    weight: sage-font-weight(medium)
  )),
  "body-semi": map-merge($-t-base-spec, (
    weight: sage-font-weight(semibold)
  )),
  "body-bold": map-merge($-t-base-spec, (
    weight: sage-font-weight(bold)
  )),

  // Body Small
  "body-small": $-t-body-small-spec,
  "body-small-med": map-merge($-t-body-small-spec, (
    weight: sage-font-weight(medium)
  )),
  "body-small-semi": map-merge($-t-body-small-spec, (
    weight: sage-font-weight(semibold)
  )),
  "body-small-bold": map-merge($-t-body-small-spec, (
    weight: sage-font-weight(bold)
  )),

  // Body XSmall
  "body-xsmall": $-t-body-xsmall-spec,
  "body-xsmall-med": map-merge($-t-body-xsmall-spec, (
    weight: sage-font-weight(medium)
  )),
  "body-xsmall-semi": map-merge($-t-body-xsmall-spec, (
    weight: sage-font-weight(semibold)
  )),
  "body-xsmall-bold": map-merge($-t-body-xsmall-spec, (
    weight: sage-font-weight(bold)
  )),

  // Additional custom specs
  // TBD
);

Description

Main map of type specs. This is used to generate both %t- classes for each entry. These are used to create base classes as well as to apply type specs in context with @extend %t- etc.

NOTE: Changes here should be made with care as a potentially large number of paired configurations would be affected. Known locations include:

  • docs/lib/sage_rails/app/sage_components/sage_tokens.rb
  • packages/sage-react/lib/configs/classnames/type.js

Used by

sage-z-indexes

$sage-z-indexes: (
  negative: -1,
  default: 0,
  raised: 1000,
  alert: 2000,
  underlay: 3000,
  nav: 4000,
  overlay: 5000,
  modal: 6000,
  priority: 8000,
  nuclear: 9000
);

Description

Sage z-index token

Initial increment levels must be in units 100 (unless negative, see below). For example, sage-z-index('raised', 100) will output 1100.

If more granular adjustment is needed, the smallest increment should be a factor of 10 (1110 and 1120) and never by 1 (1101 and 1102), unless using a negative value or to prevent a collision.

NOTE: The expected use for negative (decremental) values will be to lower their value behind a positioned parent. However, it is still recommended to remain within the guidelines whenever possible, to avoid a potential z-index collision.

NOTE: These values are duplicated in the following spots and any changes here should be synced there as well:

  • packages/sage-react/lib/configs/tokens/z-indexes.js
  • docs/lib/sage_rails/app/sage_components/sage_tokens.rb
keyvaluenotes
default0reset and parent for negative positioning
negative-1
raised1000page widgets such as tooltips, dropdowns
alert2000raised priority on-page items: banners
underlay3000lower priority overlay, moved one level down from current position
nav4000uses underlay, not overlay
overlay5000
modal6000this is typically the highest level needed
--7000reserved for future use
priority8000
nuclear9000use with extreme caution

Used by

functions

sage-baseline

@function sage-baseline($num: 2, $baseline: $default-baseline) { ... }

Description

Generates a value based on the baseline grid. Given a baseline grid and a number of units, this function returns the product, resulting in the equivalent of that number of baselines' dimension.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

Unitless number of baseline units

Number2
$baseline

The baseline grid value

Length$default-baseline

Returns

Length

Product of the arguments resulting in a rem measurement

sage-border

@function sage-border($key: default) { ... }

Description

Sage border token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringdefault

Requires

Used by

sage-border-interactive

@function sage-border-interactive($key: default) { ... }

Description

Sage border interactive token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringdefault

Requires

Used by

sage-breakpoint

@function sage-breakpoint($key: sm-max) { ... }

Description

Sage breakpoints token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringsm-max

Requires

Used by

sage-color-combo

@function sage-color-combo($color-key: draft, $combo-set-key: default, $color-type: foreground) { ... }

Description

Sage color combinations token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color-key

The color token to retrieve

Stringdraft
$combo-set-key

The color set to retrieve

Stringdefault
$color-type

The detail of the set to retrieve

Stringforeground

Returns

Color

The value retrieved

Requires

sage-color

@function sage-color($base, $value: 300) { ... }

Description

Sage breakpoints token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$base

the color token to retrieve

String none
$value

the tint or shade to retrieve

Number300

Returns

Color

the value retrieved

Requires

Used by

sage-container

@function sage-container($key: md) { ... }

Description

Sage containers token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringmd

Returns

Length

The value retrieved

Requires

sage-font-size

@function sage-font-size($key: body, $responsive: true) { ... }

Description

Sage font size token utility (responsive)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringbody
$responsive

Whether or not retrieve a responsive css custom property or a flat value

Booltrue

Returns

Length}

The value retrieved

Requires

Used by

sage-font-weight

@function sage-font-weight($key: regular) { ... }

Description

Sage font weight token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringregular

Returns

Number

The value retrieved

Requires

sage-grid-template

@function sage-grid-template($key: md) { ... }

Description

Sage grid templates token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringmd

Returns

Map

The value retrieved.

Requires

sage-grid-gap-options

@function sage-grid-gap-options($key: md) { ... }

Description

Sage grid gap token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringmd

Returns

Length

The value retrieved

Requires

sage-icon

@function sage-icon($icon-name) { ... }

Description

Sage icon token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icon-name

The token to retrieve

String none

Returns

String

The value retrieved

Requires

Used by

sage-letter-spacing

@function sage-letter-spacing($key: sm) { ... }

Description

Sage letter spacing token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringsm

Returns

Length

The value retrieved

Requires

sage-line-height

@function sage-line-height($key: body, $responsive: true) { ... }

Description

Sage line height token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve. By default, this should be a type spec token. If the next parameter is false then this should be a line height token.

Stringbody
$responsive

Whether or not retrieve a responsive css custom property (based on type specs) or a flat value (based on line-height tokens).

Booltrue

Returns

Length

The value retrieved

Example

Responsive setting

.sage-box {
  line-height: sage-line-height(body-sm);
}

// Output
.sage-box {
  line-height: var(--sage-line-height-body-sm);
}

Flat setting

.sage-box {
  @include sage-line-height(md, false);
}

// Output
.sage-box {
  line-height: 1.75rem;
}

Requires

Used by

sage-shadow

@function sage-shadow($key: md) { ... }

Description

Sage shadow token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringmd

Returns

Any type —

The value retrieved

Requires

sage-sidebar

@function sage-sidebar($key: sm) { ... }

Description

Sage sidebar token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringsm

Returns

Length

The value retrieved

Requires

sage-spacing

@function sage-spacing($key: md) { ... }

Description

Sage spacing token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringmd

Returns

Length

The value retrieved

Requires

Used by

sage-type-pairing

@function sage-type-pairing($key: default) { ... }

Description

Sage Type Pairing token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringdefault

Requires

Used by

sage-z-index

@function sage-z-index($key: default, $increment: 0) { ... }

Description

Sage z-index token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringdefault
$increment

An amount to add onto the retrieved value

Number0

Returns

Number

The value retrieved

Requires

Used by

mixins

sage-block-spacing

@mixin sage-block-spacing($block-spacing) { ... }

Description

Adds bottom margin or undoes bottom margin on .no-margin-bottom or :last-child elements of parent selector

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$block-spacing

Amount of spacing to apply

Length none

sage-button-style-reset

@mixin sage-button-style-reset() { ... }

Description

Resets base button styles

Parameters

None.

sage-button-style-disabled

@mixin sage-button-style-disabled() { ... }

Description

Button disabled mixin that sets up disabled styles for buttons

Parameters

None.

sage-copy-text

@mixin sage-copy-text() { ... }

Description

Sets up styles for sage "copy" (system) text.

Parameters

None.

Requires

sage-button-icon-generator

@mixin sage-button-icon-generator($icon-name, $icon-code, $direction) { ... }

Description

Generates icon variations for buttons

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icon-name

Name of the icon from the system icon library

String none
$icon-code

They code form of the icon

String none
$direction

An inline direction indicator

String(left or Right or Only) none

Requires

sage-focus-ring

@mixin sage-focus-ring($focus-width: 4px, $focus-shadow: #8ECAFB, $focus-animation-speed: 0.2s) { ... }

Description

Sets a Sage-style custom focus outline to an interactive element. Should be paired with sage-focus-outline--update-color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$focus-width

Thickness of the focus ring itself

Length4px
$focus-shadow

Hex color to be used for the background-color

Length#8ECAFB
$focus-animation-speed

How quickly the focus ring animates on activation

Time0.2s

Requires

Used by

sage-focus-outline

@mixin sage-focus-outline($outline-width: 2px, $outline-offset-block: 4px, $outline-offset-inline: 4px, $outline-animation-speed: 0.2s) { ... }

Description

Sets a Sage-style custom focus outline to an interactive element. Should be paired with sage-focus-outline--update-color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$outline-width

Thickness of the focus ring itself

Length2px
$outline-offset-block

How far the focus ring is offset from the object on the y axis (block)

Length4px
$outline-offset-inline

How far the focus ring is offset from the object on the x axis (inline)

Length4px
$outline-animation-speed

How quickly the focus ring animates on activation

Time0.2s

Requires

sage-focus-outline--focus-within

@mixin sage-focus-outline--focus-within($focus-within-background-color) { ... }

Description

Sets the background-color focus outline to an interactive element's parent.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$focus-within-background-color

Hex color to be used for the background-color

Color none

sage-focus-outline--update-color

@mixin sage-focus-outline--update-color($color) { ... }

Description

Sets the color custom focus outline to an interactive element. Can be used both for the initial setting and for a modified setting for a particular state.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Hex color to be used for the stroke color

Color none

sage-auto-col

@mixin sage-auto-col() { ... }

Description

Adds automatic sizing to the grid columns. The sibling columns automatically resize accordingly if they don't have defined breakpoint widths

Parameters

None.

sage-card

@mixin sage-card() { ... }

Description

Adds the basic default card setup including grid, spacing, and border treatment

Parameters

None.

Requires

sage-dashed-border

@mixin sage-dashed-border($thickness: 1, $color: sage-color(grey, 500), $dash: 4.5, $gap: 4.5, $offset: 4.5, $border-radius: 4) { ... }

Description

Adds the appearance of a dashed border on an element using a url-encoded SVG shape as a background image.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$thickness

unitless number for thickness of the stroke

Number1
$color

hex color to be used for the stroke color

Colorsage-color(grey, 500)
$dash

unitless number for the size of a dash

Number4.5
$gap

unitless number for the size of a gap between dashes

Number4.5
$offset

unitless number for the initial offset for the starting point of the dash; typically matches a dash size

Number4.5
$border-radius

unitless number for the border radius of the shape

Number4

Requires

sage-grid-card

@mixin sage-grid-card() { ... }

Description

Sets up a grid stack that uses card-scoped spacing (16px)

Parameters

None.

Requires

Used by

sage-grid-stack

@mixin sage-grid-stack() { ... }

Description

Sets up a generic content stack that uses standard stack spacing (8px)

Parameters

None.

Requires

sage-grid-panel

@mixin sage-grid-panel() { ... }

Description

Sets up a grid stack that uses panel-scoped spacing (24px)

Parameters

None.

Requires

sage-grid-card-row

@mixin sage-grid-card-row() { ... }

Description

Standard grid setup for a single row layout in the card spacing scope (16px). Typically used in combination with a grid template. Adjusts to a wrapping flex layout below the min breakpoint.

Parameters

None.

Requires

sage-grid-panel-row

@mixin sage-grid-panel-row() { ... }

Description

Standard grid setup for a single row layout in the panel spacing scope (24px). Typically used in combination with a grid template. Adjusts to a wrapping flex layout below the min breakpoint.

Parameters

None.

Requires

sage-form-field-group

@mixin sage-form-field-group() { ... }

Description

Adds the basic default form spacing, and border treatment

Parameters

None.

Requires

sage-form-field

@mixin sage-form-field() { ... }

Description

Adds the basic default form spacing, and border treatment

Parameters

None.

Requires

sage-form-field-icon

@mixin sage-form-field-icon() { ... }

Description

Adds layout styles for form input icon container. This is used for a static icon and popover icon placement.

Parameters

None.

Requires

sage-form-field-label

@mixin sage-form-field-label() { ... }

Description

Adds the basic default form label spacing, and border treatment

Parameters

None.

sage-form-field-floating-label

@mixin sage-form-field-floating-label() { ... }

Description

Adds the basic default styling for floating input labels

Parameters

None.

Requires

sage-form-field-message

@mixin sage-form-field-message() { ... }

Description

Adds the basic default form field message font sizing and color treatment

Parameters

None.

Requires

sage-form-toggle

@mixin sage-form-toggle() { ... }

Description

Mixins for common styles between the form toggles Radio, Checkbox, and Switch

Parameters

None.

Requires

sage-icon-base

@mixin sage-icon-base($icon: null, $icon: md) { ... }

Description

Sets up an element to implement the sage icon font and basic settings related to displaying the icon. Usually implemented on a pseudo-element.

If an $icon is passed in this mixin also displays the icon as content for the element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icon

The alias from the icon library for the icon to use

String or Nullnull
$icon

The code for the desired spacing size from the sage-icon-sizes token

Stringmd

Requires

Used by

sage-panel

@mixin sage-panel() { ... }

Description

Adds the basic default panel setup including grid, spacing, and border treatment

Parameters

None.

Requires

sage-tab-underline

@mixin sage-tab-underline($active-class: ".sage-tab--active") { ... }

Description

Adds an tab-styled underline that animates in and out when active class is toggled

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$active-class

class for an active state on the elememnt

String".sage-tab--active"

Requires

sage-font-family

@mixin sage-font-family() { ... }

Description

Adds the default font family

Parameters

None.

line-clamp

@mixin line-clamp($lines) { ... }

Description

Truncates the text

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lines

Number of lines of visible text before truncation

Number none

sage-row

@mixin sage-row() { ... }

Description

Rows

Parameters

None.

sage-col

@mixin sage-col() { ... }

Description

Columns

Parameters

None.

sage-type-pairing

@mixin sage-type-pairing($key: body, $responsive: false) { ... }

Description

Sage Type Pairing mixin

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve. If the $responsive parameter is true this is used to retrieve values from the responsive CSS custom properties --sage-font-size-#{$key} and --sage-line-height-#{$key}. Otherwise it is used to retrieve from sage-raw-type-pairings.

Stringbody
$responsive

Whether or not to use the responsive css custom properties for the provided pairing.

Boolfalse

Requires

Used by

sage-type-spec

@mixin sage-type-spec($spec-name) { ... }

Description

Implements a type spec as CSS properties.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$spec-name

Name of the type spec to set up

String none

Requires

Used by

placeholders

t-sage-

%t-sage- { ... }

Description

Sage type placeholder/extendables

Follow the t-sage- with the desired type spec token.

Example

Usage example

.sage-box__heading {
  @extend %t-sage-heading-3;
}

Requires

tokens

variables

sd-sage-color-base-primary-100-hex

$sd-sage-color-base-primary-100-hex: #e6f4fe;

Description

color color-base-primary-100-hex

sd-sage-color-base-primary-100-code

$sd-sage-color-base-primary-100-code: "primary-100";

Description

color color-base-primary-100-code

sd-sage-color-base-primary-100-classname

$sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100";

Description

color color-base-primary-100-classname

sd-sage-color-base-primary-200-hex

$sd-sage-color-base-primary-200-hex: #8ecafb;

Description

color color-base-primary-200-hex

sd-sage-color-base-primary-200-code

$sd-sage-color-base-primary-200-code: "primary-200";

Description

color color-base-primary-200-code

sd-sage-color-base-primary-200-classname

$sd-sage-color-base-primary-200-classname: "t-sage--color-primary-200";

Description

color color-base-primary-200-classname

sd-sage-color-base-primary-300-hex

$sd-sage-color-base-primary-300-hex: #0072ef;

Description

color color-base-primary-300-hex

sd-sage-color-base-primary-300-code

$sd-sage-color-base-primary-300-code: "primary-300";

Description

color color-base-primary-300-code

sd-sage-color-base-primary-300-classname

$sd-sage-color-base-primary-300-classname: "t-sage--color-primary-300";

Description

color color-base-primary-300-classname

sd-sage-color-base-primary-400-hex

$sd-sage-color-base-primary-400-hex: #054fb8;

Description

color color-base-primary-400-hex

sd-sage-color-base-primary-400-code

$sd-sage-color-base-primary-400-code: "primary-400";

Description

color color-base-primary-400-code

sd-sage-color-base-primary-400-classname

$sd-sage-color-base-primary-400-classname: "t-sage--color-primary-400";

Description

color color-base-primary-400-classname

sd-sage-color-base-primary-500-hex

$sd-sage-color-base-primary-500-hex: #07265f;

Description

color color-base-primary-500-hex

sd-sage-color-base-primary-500-code

$sd-sage-color-base-primary-500-code: "primary-500";

Description

color color-base-primary-500-code

sd-sage-color-base-primary-500-classname

$sd-sage-color-base-primary-500-classname: "t-sage--color-primary-500";

Description

color color-base-primary-500-classname

sd-sage-color-base-sage-100-hex

$sd-sage-color-base-sage-100-hex: #ddf8f0;

Description

color color-base-sage-100-hex

sd-sage-color-base-sage-100-code

$sd-sage-color-base-sage-100-code: "sage-100";

Description

color color-base-sage-100-code

sd-sage-color-base-sage-100-classname

$sd-sage-color-base-sage-100-classname: "t-sage--color-sage-100";

Description

color color-base-sage-100-classname

sd-sage-color-base-sage-200-hex

$sd-sage-color-base-sage-200-hex: #86d5bc;

Description

color color-base-sage-200-hex

sd-sage-color-base-sage-200-code

$sd-sage-color-base-sage-200-code: "sage-200";

Description

color color-base-sage-200-code

sd-sage-color-base-sage-200-classname

$sd-sage-color-base-sage-200-classname: "t-sage--color-sage-200";

Description

color color-base-sage-200-classname

sd-sage-color-base-sage-300-hex

$sd-sage-color-base-sage-300-hex: #23856d;

Description

color color-base-sage-300-hex

sd-sage-color-base-sage-300-code

$sd-sage-color-base-sage-300-code: "sage-300";

Description

color color-base-sage-300-code

sd-sage-color-base-sage-300-classname

$sd-sage-color-base-sage-300-classname: "t-sage--color-sage-300";

Description

color color-base-sage-300-classname

sd-sage-color-base-sage-400-hex

$sd-sage-color-base-sage-400-hex: #225d53;

Description

color color-base-sage-400-hex

sd-sage-color-base-sage-400-code

$sd-sage-color-base-sage-400-code: "sage-400";

Description

color color-base-sage-400-code

sd-sage-color-base-sage-400-classname

$sd-sage-color-base-sage-400-classname: "t-sage--color-sage-400";

Description

color color-base-sage-400-classname

sd-sage-color-base-sage-500-hex

$sd-sage-color-base-sage-500-hex: #183e3b;

Description

color color-base-sage-500-hex

sd-sage-color-base-sage-500-code

$sd-sage-color-base-sage-500-code: "sage-500";

Description

color color-base-sage-500-code

sd-sage-color-base-sage-500-classname

$sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500";

Description

color color-base-sage-500-classname

sd-sage-color-base-yellow-100-hex

$sd-sage-color-base-yellow-100-hex: #fef8e1;

Description

color color-base-yellow-100-hex

sd-sage-color-base-yellow-100-code

$sd-sage-color-base-yellow-100-code: "yellow-100";

Description

color color-base-yellow-100-code

sd-sage-color-base-yellow-100-classname

$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100";

Description

color color-base-yellow-100-classname

sd-sage-color-base-yellow-200-hex

$sd-sage-color-base-yellow-200-hex: #fad980;

Description

color color-base-yellow-200-hex

sd-sage-color-base-yellow-200-code

$sd-sage-color-base-yellow-200-code: "yellow-200";

Description

color color-base-yellow-200-code

sd-sage-color-base-yellow-200-classname

$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200";

Description

color color-base-yellow-200-classname

sd-sage-color-base-yellow-300-hex

$sd-sage-color-base-yellow-300-hex: #ffc505;

Description

color color-base-yellow-300-hex

sd-sage-color-base-yellow-300-code

$sd-sage-color-base-yellow-300-code: "yellow-300";

Description

color color-base-yellow-300-code

sd-sage-color-base-yellow-300-classname

$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300";

Description

color color-base-yellow-300-classname

sd-sage-color-base-yellow-400-hex

$sd-sage-color-base-yellow-400-hex: #c56a02;

Description

color color-base-yellow-400-hex

sd-sage-color-base-yellow-400-code

$sd-sage-color-base-yellow-400-code: "yellow-400";

Description

color color-base-yellow-400-code

sd-sage-color-base-yellow-400-classname

$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400";

Description

color color-base-yellow-400-classname

sd-sage-color-base-yellow-500-hex

$sd-sage-color-base-yellow-500-hex: #8c3b08;

Description

color color-base-yellow-500-hex

sd-sage-color-base-yellow-500-code

$sd-sage-color-base-yellow-500-code: "yellow-500";

Description

color color-base-yellow-500-code

sd-sage-color-base-yellow-500-classname

$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500";

Description

color color-base-yellow-500-classname

sd-sage-color-base-red-100-hex

$sd-sage-color-base-red-100-hex: #fff0f0;

Description

color color-base-red-100-hex

sd-sage-color-base-red-100-code

$sd-sage-color-base-red-100-code: "red-100";

Description

color color-base-red-100-code

sd-sage-color-base-red-100-classname

$sd-sage-color-base-red-100-classname: "t-sage--color-red-100";

Description

color color-base-red-100-classname

sd-sage-color-base-red-200-hex

$sd-sage-color-base-red-200-hex: #fdb0aa;

Description

color color-base-red-200-hex

sd-sage-color-base-red-200-code

$sd-sage-color-base-red-200-code: "red-200";

Description

color color-base-red-200-code

sd-sage-color-base-red-200-classname

$sd-sage-color-base-red-200-classname: "t-sage--color-red-200";

Description

color color-base-red-200-classname

sd-sage-color-base-red-300-hex

$sd-sage-color-base-red-300-hex: #cf3c32;

Description

color color-base-red-300-hex

sd-sage-color-base-red-300-code

$sd-sage-color-base-red-300-code: "red-300";

Description

color color-base-red-300-code

sd-sage-color-base-red-300-classname

$sd-sage-color-base-red-300-classname: "t-sage--color-red-300";

Description

color color-base-red-300-classname

sd-sage-color-base-red-400-hex

$sd-sage-color-base-red-400-hex: #99221e;

Description

color color-base-red-400-hex

sd-sage-color-base-red-400-code

$sd-sage-color-base-red-400-code: "red-400";

Description

color color-base-red-400-code

sd-sage-color-base-red-400-classname

$sd-sage-color-base-red-400-classname: "t-sage--color-red-400";

Description

color color-base-red-400-classname

sd-sage-color-base-red-500-hex

$sd-sage-color-base-red-500-hex: #5e0d0d;

Description

color color-base-red-500-hex

sd-sage-color-base-red-500-code

$sd-sage-color-base-red-500-code: "red-500";

Description

color color-base-red-500-code

sd-sage-color-base-red-500-classname

$sd-sage-color-base-red-500-classname: "t-sage--color-red-500";

Description

color color-base-red-500-classname

sd-sage-color-base-orange-100-hex

$sd-sage-color-base-orange-100-hex: #fef1e1;

Description

color color-base-orange-100-hex

sd-sage-color-base-orange-100-code

$sd-sage-color-base-orange-100-code: "orange-100";

Description

color color-base-orange-100-code

sd-sage-color-base-orange-100-classname

$sd-sage-color-base-orange-100-classname: "t-sage--color-orange-100";

Description

color color-base-orange-100-classname

sd-sage-color-base-orange-200-hex

$sd-sage-color-base-orange-200-hex: #ffb36b;

Description

color color-base-orange-200-hex

sd-sage-color-base-orange-200-code

$sd-sage-color-base-orange-200-code: "orange-200";

Description

color color-base-orange-200-code

sd-sage-color-base-orange-200-classname

$sd-sage-color-base-orange-200-classname: "t-sage--color-orange-200";

Description

color color-base-orange-200-classname

sd-sage-color-base-orange-300-hex

$sd-sage-color-base-orange-300-hex: #fb7e09;

Description

color color-base-orange-300-hex

sd-sage-color-base-orange-300-code

$sd-sage-color-base-orange-300-code: "orange-300";

Description

color color-base-orange-300-code

sd-sage-color-base-orange-300-classname

$sd-sage-color-base-orange-300-classname: "t-sage--color-orange-300";

Description

color color-base-orange-300-classname

sd-sage-color-base-orange-400-hex

$sd-sage-color-base-orange-400-hex: #b3501e;

Description

color color-base-orange-400-hex

sd-sage-color-base-orange-400-code

$sd-sage-color-base-orange-400-code: "orange-400";

Description

color color-base-orange-400-code

sd-sage-color-base-orange-400-classname

$sd-sage-color-base-orange-400-classname: "t-sage--color-orange-400";

Description

color color-base-orange-400-classname

sd-sage-color-base-orange-500-hex

$sd-sage-color-base-orange-500-hex: #5a260c;

Description

color color-base-orange-500-hex

sd-sage-color-base-orange-500-code

$sd-sage-color-base-orange-500-code: "orange-500";

Description

color color-base-orange-500-code

sd-sage-color-base-orange-500-classname

$sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500";

Description

color color-base-orange-500-classname

sd-sage-color-base-purple-100-hex

$sd-sage-color-base-purple-100-hex: #eee4f6;

Description

color color-base-purple-100-hex

sd-sage-color-base-purple-100-code

$sd-sage-color-base-purple-100-code: "purple-100";

Description

color color-base-purple-100-code

sd-sage-color-base-purple-100-classname

$sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100";

Description

color color-base-purple-100-classname

sd-sage-color-base-purple-200-hex

$sd-sage-color-base-purple-200-hex: #d9c2ef;

Description

color color-base-purple-200-hex

sd-sage-color-base-purple-200-code

$sd-sage-color-base-purple-200-code: "purple-200";

Description

color color-base-purple-200-code

sd-sage-color-base-purple-200-classname

$sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200";

Description

color color-base-purple-200-classname

sd-sage-color-base-purple-300-hex

$sd-sage-color-base-purple-300-hex: #8e5ad8;

Description

color color-base-purple-300-hex

sd-sage-color-base-purple-300-code

$sd-sage-color-base-purple-300-code: "purple-300";

Description

color color-base-purple-300-code

sd-sage-color-base-purple-300-classname

$sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300";

Description

color color-base-purple-300-classname

sd-sage-color-base-purple-400-hex

$sd-sage-color-base-purple-400-hex: #50348a;

Description

color color-base-purple-400-hex

sd-sage-color-base-purple-400-code

$sd-sage-color-base-purple-400-code: "purple-400";

Description

color color-base-purple-400-code

sd-sage-color-base-purple-400-classname

$sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400";

Description

color color-base-purple-400-classname

sd-sage-color-base-purple-500-hex

$sd-sage-color-base-purple-500-hex: #381c5e;

Description

color color-base-purple-500-hex

sd-sage-color-base-purple-500-code

$sd-sage-color-base-purple-500-code: "purple-500";

Description

color color-base-purple-500-code

sd-sage-color-base-purple-500-classname

$sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500";

Description

color color-base-purple-500-classname

sd-sage-color-base-charcoal-100-hex

$sd-sage-color-base-charcoal-100-hex: #8d939a;

Description

color color-base-charcoal-100-hex

sd-sage-color-base-charcoal-100-code

$sd-sage-color-base-charcoal-100-code: "charcoal-100";

Description

color color-base-charcoal-100-code

sd-sage-color-base-charcoal-100-classname

$sd-sage-color-base-charcoal-100-classname: "t-sage--color-charcoal-100";

Description

color color-base-charcoal-100-classname

sd-sage-color-base-charcoal-200-hex

$sd-sage-color-base-charcoal-200-hex: #60666c;

Description

color color-base-charcoal-200-hex

sd-sage-color-base-charcoal-200-code

$sd-sage-color-base-charcoal-200-code: "charcoal-200";

Description

color color-base-charcoal-200-code

sd-sage-color-base-charcoal-200-classname

$sd-sage-color-base-charcoal-200-classname: "t-sage--color-charcoal-200";

Description

color color-base-charcoal-200-classname

sd-sage-color-base-charcoal-300-hex

$sd-sage-color-base-charcoal-300-hex: #43474b;

Description

color color-base-charcoal-300-hex

sd-sage-color-base-charcoal-300-code

$sd-sage-color-base-charcoal-300-code: "charcoal-300";

Description

color color-base-charcoal-300-code

sd-sage-color-base-charcoal-300-classname

$sd-sage-color-base-charcoal-300-classname: "t-sage--color-charcoal-300";

Description

color color-base-charcoal-300-classname

sd-sage-color-base-charcoal-400-hex

$sd-sage-color-base-charcoal-400-hex: #202327;

Description

color color-base-charcoal-400-hex

sd-sage-color-base-charcoal-400-code

$sd-sage-color-base-charcoal-400-code: "charcoal-400";

Description

color color-base-charcoal-400-code

sd-sage-color-base-charcoal-400-classname

$sd-sage-color-base-charcoal-400-classname: "t-sage--color-charcoal-400";

Description

color color-base-charcoal-400-classname

sd-sage-color-base-charcoal-500-hex

$sd-sage-color-base-charcoal-500-hex: #040506;

Description

color color-base-charcoal-500-hex

sd-sage-color-base-charcoal-500-code

$sd-sage-color-base-charcoal-500-code: "charcoal-500";

Description

color color-base-charcoal-500-code

sd-sage-color-base-charcoal-500-classname

$sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500";

Description

color color-base-charcoal-500-classname

sd-sage-color-base-grey-100-hex

$sd-sage-color-base-grey-100-hex: #f9fafa;

Description

color color-base-grey-100-hex

sd-sage-color-base-grey-100-code

$sd-sage-color-base-grey-100-code: "grey-100";

Description

color color-base-grey-100-code

sd-sage-color-base-grey-100-classname

$sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100";

Description

color color-base-grey-100-classname

sd-sage-color-base-grey-200-hex

$sd-sage-color-base-grey-200-hex: #f6f8f8;

Description

color color-base-grey-200-hex

sd-sage-color-base-grey-200-code

$sd-sage-color-base-grey-200-code: "grey-200";

Description

color color-base-grey-200-code

sd-sage-color-base-grey-200-classname

$sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200";

Description

color color-base-grey-200-classname

sd-sage-color-base-grey-300-hex

$sd-sage-color-base-grey-300-hex: #eceeef;

Description

color color-base-grey-300-hex

sd-sage-color-base-grey-300-code

$sd-sage-color-base-grey-300-code: "grey-300";

Description

color color-base-grey-300-code

sd-sage-color-base-grey-300-classname

$sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300";

Description

color color-base-grey-300-classname

sd-sage-color-base-grey-400-hex

$sd-sage-color-base-grey-400-hex: #d3d5d9;

Description

color color-base-grey-400-hex

sd-sage-color-base-grey-400-code

$sd-sage-color-base-grey-400-code: "grey-400";

Description

color color-base-grey-400-code

sd-sage-color-base-grey-400-classname

$sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400";

Description

color color-base-grey-400-classname

sd-sage-color-base-grey-500-hex

$sd-sage-color-base-grey-500-hex: #b5bac0;

Description

color color-base-grey-500-hex

sd-sage-color-base-grey-500-code

$sd-sage-color-base-grey-500-code: "grey-500";

Description

color color-base-grey-500-code

sd-sage-color-base-grey-500-classname

$sd-sage-color-base-grey-500-classname: "t-sage--color-grey-500";

Description

color color-base-grey-500-classname

sd-sage-color-base-white-100-hex

$sd-sage-color-base-white-100-hex: #fff;

Description

color color-base-white-100-hex

sd-sage-color-base-white-100-code

$sd-sage-color-base-white-100-code: "white-100";

Description

color color-base-white-100-code

sd-sage-color-base-white-100-classname

$sd-sage-color-base-white-100-classname: "t-sage--color-white-100";

Description

color color-base-white-100-classname

sd-sage-color-base-white-200-hex

$sd-sage-color-base-white-200-hex: #fff;

Description

color color-base-white-200-hex

sd-sage-color-base-white-200-code

$sd-sage-color-base-white-200-code: "white-200";

Description

color color-base-white-200-code

sd-sage-color-base-white-200-classname

$sd-sage-color-base-white-200-classname: "t-sage--color-white-200";

Description

color color-base-white-200-classname

sd-sage-color-base-white-300-hex

$sd-sage-color-base-white-300-hex: #fff;

Description

color color-base-white-300-hex

sd-sage-color-base-white-300-code

$sd-sage-color-base-white-300-code: "white-300";

Description

color color-base-white-300-code

sd-sage-color-base-white-300-classname

$sd-sage-color-base-white-300-classname: "t-sage--color-white-300";

Description

color color-base-white-300-classname

sd-sage-color-base-white-400-hex

$sd-sage-color-base-white-400-hex: #fff;

Description

color color-base-white-400-hex

sd-sage-color-base-white-400-code

$sd-sage-color-base-white-400-code: "white-400";

Description

color color-base-white-400-code

sd-sage-color-base-white-400-classname

$sd-sage-color-base-white-400-classname: "t-sage--color-white-400";

Description

color color-base-white-400-classname

sd-sage-color-base-white-500-hex

$sd-sage-color-base-white-500-hex: #fff;

Description

color color-base-white-500-hex

sd-sage-color-base-white-500-code

$sd-sage-color-base-white-500-code: "white-500";

Description

color color-base-white-500-code

sd-sage-color-base-white-500-classname

$sd-sage-color-base-white-500-classname: "t-sage--color-white-500";

Description

color color-base-white-500-classname

sd-sage-color-base-black-100-hex

$sd-sage-color-base-black-100-hex: #000;

Description

color color-base-black-100-hex

sd-sage-color-base-black-100-code

$sd-sage-color-base-black-100-code: "black-100";

Description

color color-base-black-100-code

sd-sage-color-base-black-100-classname

$sd-sage-color-base-black-100-classname: "t-sage--color-black-100";

Description

color color-base-black-100-classname

sd-sage-color-base-black-200-hex

$sd-sage-color-base-black-200-hex: #000;

Description

color color-base-black-200-hex

sd-sage-color-base-black-200-code

$sd-sage-color-base-black-200-code: "black-200";

Description

color color-base-black-200-code

sd-sage-color-base-black-200-classname

$sd-sage-color-base-black-200-classname: "t-sage--color-black-200";

Description

color color-base-black-200-classname

sd-sage-color-base-black-300-hex

$sd-sage-color-base-black-300-hex: #000;

Description

color color-base-black-300-hex

sd-sage-color-base-black-300-code

$sd-sage-color-base-black-300-code: "black-300";

Description

color color-base-black-300-code

sd-sage-color-base-black-300-classname

$sd-sage-color-base-black-300-classname: "t-sage--color-black-300";

Description

color color-base-black-300-classname

sd-sage-color-base-black-400-hex

$sd-sage-color-base-black-400-hex: #000;

Description

color color-base-black-400-hex

sd-sage-color-base-black-400-code

$sd-sage-color-base-black-400-code: "black-400";

Description

color color-base-black-400-code

sd-sage-color-base-black-400-classname

$sd-sage-color-base-black-400-classname: "t-sage--color-black-400";

Description

color color-base-black-400-classname

sd-sage-color-base-black-500-hex

$sd-sage-color-base-black-500-hex: #000;

Description

color color-base-black-500-hex

sd-sage-color-base-black-500-code

$sd-sage-color-base-black-500-code: "black-500";

Description

color color-base-black-500-code

sd-sage-color-base-black-500-classname

$sd-sage-color-base-black-500-classname: "t-sage--color-black-500";

Description

color color-base-black-500-classname

sd-sage-color

$sd-sage-color: (
  primary: (
    100: (
      hex: $sd-sage-color-base-primary-100-hex,
      code: $sd-sage-color-base-primary-100-code,
      classname: $sd-sage-color-base-primary-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-primary-200-hex,
      code: $sd-sage-color-base-primary-200-code,
      classname: $sd-sage-color-base-primary-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-primary-300-hex,
      code: $sd-sage-color-base-primary-300-code,
      classname: $sd-sage-color-base-primary-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-primary-400-hex,
      code: $sd-sage-color-base-primary-400-code,
      classname: $sd-sage-color-base-primary-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-primary-500-hex,
      code: $sd-sage-color-base-primary-500-code,
      classname: $sd-sage-color-base-primary-500-classname,
    ),
  ),
  sage: (
    100: (
      hex: $sd-sage-color-base-sage-100-hex,
      code: $sd-sage-color-base-sage-100-code,
      classname: $sd-sage-color-base-sage-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-sage-200-hex,
      code: $sd-sage-color-base-sage-200-code,
      classname: $sd-sage-color-base-sage-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-sage-300-hex,
      code: $sd-sage-color-base-sage-300-code,
      classname: $sd-sage-color-base-sage-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-sage-400-hex,
      code: $sd-sage-color-base-sage-400-code,
      classname: $sd-sage-color-base-sage-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-sage-500-hex,
      code: $sd-sage-color-base-sage-500-code,
      classname: $sd-sage-color-base-sage-500-classname,
    ),
  ),
  yellow: (
    100: (
      hex: $sd-sage-color-base-yellow-100-hex,
      code: $sd-sage-color-base-yellow-100-code,
      classname: $sd-sage-color-base-yellow-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-yellow-200-hex,
      code: $sd-sage-color-base-yellow-200-code,
      classname: $sd-sage-color-base-yellow-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-yellow-300-hex,
      code: $sd-sage-color-base-yellow-300-code,
      classname: $sd-sage-color-base-yellow-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-yellow-400-hex,
      code: $sd-sage-color-base-yellow-400-code,
      classname: $sd-sage-color-base-yellow-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-yellow-500-hex,
      code: $sd-sage-color-base-yellow-500-code,
      classname: $sd-sage-color-base-yellow-500-classname,
    ),
  ),
  red: (
    100: (
      hex: $sd-sage-color-base-red-100-hex,
      code: $sd-sage-color-base-red-100-code,
      classname: $sd-sage-color-base-red-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-red-200-hex,
      code: $sd-sage-color-base-red-200-code,
      classname: $sd-sage-color-base-red-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-red-300-hex,
      code: $sd-sage-color-base-red-300-code,
      classname: $sd-sage-color-base-red-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-red-400-hex,
      code: $sd-sage-color-base-red-400-code,
      classname: $sd-sage-color-base-red-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-red-500-hex,
      code: $sd-sage-color-base-red-500-code,
      classname: $sd-sage-color-base-red-500-classname,
    ),
  ),
  orange: (
    100: (
      hex: $sd-sage-color-base-orange-100-hex,
      code: $sd-sage-color-base-orange-100-code,
      classname: $sd-sage-color-base-orange-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-orange-200-hex,
      code: $sd-sage-color-base-orange-200-code,
      classname: $sd-sage-color-base-orange-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-orange-300-hex,
      code: $sd-sage-color-base-orange-300-code,
      classname: $sd-sage-color-base-orange-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-orange-400-hex,
      code: $sd-sage-color-base-orange-400-code,
      classname: $sd-sage-color-base-orange-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-orange-500-hex,
      code: $sd-sage-color-base-orange-500-code,
      classname: $sd-sage-color-base-orange-500-classname,
    ),
  ),
  purple: (
    100: (
      hex: $sd-sage-color-base-purple-100-hex,
      code: $sd-sage-color-base-purple-100-code,
      classname: $sd-sage-color-base-purple-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-purple-200-hex,
      code: $sd-sage-color-base-purple-200-code,
      classname: $sd-sage-color-base-purple-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-purple-300-hex,
      code: $sd-sage-color-base-purple-300-code,
      classname: $sd-sage-color-base-purple-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-purple-400-hex,
      code: $sd-sage-color-base-purple-400-code,
      classname: $sd-sage-color-base-purple-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-purple-500-hex,
      code: $sd-sage-color-base-purple-500-code,
      classname: $sd-sage-color-base-purple-500-classname,
    ),
  ),
  charcoal: (
    100: (
      hex: $sd-sage-color-base-charcoal-100-hex,
      code: $sd-sage-color-base-charcoal-100-code,
      classname: $sd-sage-color-base-charcoal-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-charcoal-200-hex,
      code: $sd-sage-color-base-charcoal-200-code,
      classname: $sd-sage-color-base-charcoal-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-charcoal-300-hex,
      code: $sd-sage-color-base-charcoal-300-code,
      classname: $sd-sage-color-base-charcoal-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-charcoal-400-hex,
      code: $sd-sage-color-base-charcoal-400-code,
      classname: $sd-sage-color-base-charcoal-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-charcoal-500-hex,
      code: $sd-sage-color-base-charcoal-500-code,
      classname: $sd-sage-color-base-charcoal-500-classname,
    ),
  ),
  grey: (
    100: (
      hex: $sd-sage-color-base-grey-100-hex,
      code: $sd-sage-color-base-grey-100-code,
      classname: $sd-sage-color-base-grey-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-grey-200-hex,
      code: $sd-sage-color-base-grey-200-code,
      classname: $sd-sage-color-base-grey-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-grey-300-hex,
      code: $sd-sage-color-base-grey-300-code,
      classname: $sd-sage-color-base-grey-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-grey-400-hex,
      code: $sd-sage-color-base-grey-400-code,
      classname: $sd-sage-color-base-grey-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-grey-500-hex,
      code: $sd-sage-color-base-grey-500-code,
      classname: $sd-sage-color-base-grey-500-classname,
    ),
  ),
  white: (
    100: (
      hex: $sd-sage-color-base-white-100-hex,
      code: $sd-sage-color-base-white-100-code,
      classname: $sd-sage-color-base-white-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-white-200-hex,
      code: $sd-sage-color-base-white-200-code,
      classname: $sd-sage-color-base-white-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-white-300-hex,
      code: $sd-sage-color-base-white-300-code,
      classname: $sd-sage-color-base-white-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-white-400-hex,
      code: $sd-sage-color-base-white-400-code,
      classname: $sd-sage-color-base-white-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-white-500-hex,
      code: $sd-sage-color-base-white-500-code,
      classname: $sd-sage-color-base-white-500-classname,
    ),
  ),
  black: (
    100: (
      hex: $sd-sage-color-base-black-100-hex,
      code: $sd-sage-color-base-black-100-code,
      classname: $sd-sage-color-base-black-100-classname,
    ),
    200: (
      hex: $sd-sage-color-base-black-200-hex,
      code: $sd-sage-color-base-black-200-code,
      classname: $sd-sage-color-base-black-200-classname,
    ),
    300: (
      hex: $sd-sage-color-base-black-300-hex,
      code: $sd-sage-color-base-black-300-code,
      classname: $sd-sage-color-base-black-300-classname,
    ),
    400: (
      hex: $sd-sage-color-base-black-400-hex,
      code: $sd-sage-color-base-black-400-code,
      classname: $sd-sage-color-base-black-400-classname,
    ),
    500: (
      hex: $sd-sage-color-base-black-500-hex,
      code: $sd-sage-color-base-black-500-code,
      classname: $sd-sage-color-base-black-500-classname,
    ),
  ),
);

Description

Map for color base

Used by

sd-sage-color-combos-draft-default-foreground

$sd-sage-color-combos-draft-default-foreground: #202327;

Description

color combos color-combos-draft-default-foreground

sd-sage-color-combos-draft-default-foreground-accent

$sd-sage-color-combos-draft-default-foreground-accent: #040506;

Description

color combos color-combos-draft-default-foreground-accent

sd-sage-color-combos-draft-default-background

$sd-sage-color-combos-draft-default-background: #eceeef;

Description

color combos color-combos-draft-default-background

sd-sage-color-combos-draft-default-background-accent

$sd-sage-color-combos-draft-default-background-accent: #d3d5d9;

Description

color combos color-combos-draft-default-background-accent

sd-sage-color-combos-draft-default-icon-background-accent

$sd-sage-color-combos-draft-default-icon-background-accent: #60666c;

Description

color combos color-combos-draft-default-icon-background-accent

sd-sage-color-combos-draft-subtle-foreground

$sd-sage-color-combos-draft-subtle-foreground: #60666c;

Description

color combos color-combos-draft-subtle-foreground

sd-sage-color-combos-draft-subtle-foreground-accent

$sd-sage-color-combos-draft-subtle-foreground-accent: #8d939a;

Description

color combos color-combos-draft-subtle-foreground-accent

sd-sage-color-combos-draft-subtle-background

$sd-sage-color-combos-draft-subtle-background: #8d939a;

Description

color combos color-combos-draft-subtle-background

sd-sage-color-combos-draft-bold-foreground

$sd-sage-color-combos-draft-bold-foreground: #f6f8f8;

Description

color combos color-combos-draft-bold-foreground

sd-sage-color-combos-draft-bold-background

$sd-sage-color-combos-draft-bold-background: #202327;

Description

color combos color-combos-draft-bold-background

sd-sage-color-combos-published-default-foreground

$sd-sage-color-combos-published-default-foreground: #225d53;

Description

color combos color-combos-published-default-foreground

sd-sage-color-combos-published-default-foreground-accent

$sd-sage-color-combos-published-default-foreground-accent: #183e3b;

Description

color combos color-combos-published-default-foreground-accent

sd-sage-color-combos-published-default-background

$sd-sage-color-combos-published-default-background: #ddf8f0;

Description

color combos color-combos-published-default-background

sd-sage-color-combos-published-default-background-accent

$sd-sage-color-combos-published-default-background-accent: #86d5bc;

Description

color combos color-combos-published-default-background-accent

sd-sage-color-combos-published-default-icon-background-accent

$sd-sage-color-combos-published-default-icon-background-accent: #23856d;

Description

color combos color-combos-published-default-icon-background-accent

sd-sage-color-combos-published-subtle-foreground

$sd-sage-color-combos-published-subtle-foreground: #225d53;

Description

color combos color-combos-published-subtle-foreground

sd-sage-color-combos-published-subtle-foreground-accent

$sd-sage-color-combos-published-subtle-foreground-accent: #23856d;

Description

color combos color-combos-published-subtle-foreground-accent

sd-sage-color-combos-published-subtle-background

$sd-sage-color-combos-published-subtle-background: #23856d;

Description

color combos color-combos-published-subtle-background

sd-sage-color-combos-published-bold-foreground

$sd-sage-color-combos-published-bold-foreground: #fff;

Description

color combos color-combos-published-bold-foreground

sd-sage-color-combos-published-bold-background

$sd-sage-color-combos-published-bold-background: #23856d;

Description

color combos color-combos-published-bold-background

sd-sage-color-combos-info-default-foreground

$sd-sage-color-combos-info-default-foreground: #054fb8;

Description

color combos color-combos-info-default-foreground

sd-sage-color-combos-info-default-foreground-accent

$sd-sage-color-combos-info-default-foreground-accent: #07265f;

Description

color combos color-combos-info-default-foreground-accent

sd-sage-color-combos-info-default-background

$sd-sage-color-combos-info-default-background: #e6f4fe;

Description

color combos color-combos-info-default-background

sd-sage-color-combos-info-default-background-accent

$sd-sage-color-combos-info-default-background-accent: #8ecafb;

Description

color combos color-combos-info-default-background-accent

sd-sage-color-combos-info-default-icon-background-accent

$sd-sage-color-combos-info-default-icon-background-accent: #0072ef;

Description

color combos color-combos-info-default-icon-background-accent

sd-sage-color-combos-info-subtle-foreground

$sd-sage-color-combos-info-subtle-foreground: #054fb8;

Description

color combos color-combos-info-subtle-foreground

sd-sage-color-combos-info-subtle-foreground-accent

$sd-sage-color-combos-info-subtle-foreground-accent: #0072ef;

Description

color combos color-combos-info-subtle-foreground-accent

sd-sage-color-combos-info-subtle-background

$sd-sage-color-combos-info-subtle-background: #8ecafb;

Description

color combos color-combos-info-subtle-background

sd-sage-color-combos-info-bold-foreground

$sd-sage-color-combos-info-bold-foreground: #e6f4fe;

Description

color combos color-combos-info-bold-foreground

sd-sage-color-combos-info-bold-background

$sd-sage-color-combos-info-bold-background: #0072ef;

Description

color combos color-combos-info-bold-background

sd-sage-color-combos-locked-default-foreground

$sd-sage-color-combos-locked-default-foreground: #50348a;

Description

color combos color-combos-locked-default-foreground

sd-sage-color-combos-locked-default-foreground-accent

$sd-sage-color-combos-locked-default-foreground-accent: #381c5e;

Description

color combos color-combos-locked-default-foreground-accent

sd-sage-color-combos-locked-default-background

$sd-sage-color-combos-locked-default-background: #eee4f6;

Description

color combos color-combos-locked-default-background

sd-sage-color-combos-locked-default-background-accent

$sd-sage-color-combos-locked-default-background-accent: #d9c2ef;

Description

color combos color-combos-locked-default-background-accent

sd-sage-color-combos-locked-default-icon-background-accent

$sd-sage-color-combos-locked-default-icon-background-accent: #8e5ad8;

Description

color combos color-combos-locked-default-icon-background-accent

sd-sage-color-combos-locked-subtle-foreground

$sd-sage-color-combos-locked-subtle-foreground: #50348a;

Description

color combos color-combos-locked-subtle-foreground

sd-sage-color-combos-locked-subtle-foreground-accent

$sd-sage-color-combos-locked-subtle-foreground-accent: #8e5ad8;

Description

color combos color-combos-locked-subtle-foreground-accent

sd-sage-color-combos-locked-subtle-background

$sd-sage-color-combos-locked-subtle-background: #d9c2ef;

Description

color combos color-combos-locked-subtle-background

sd-sage-color-combos-locked-bold-foreground

$sd-sage-color-combos-locked-bold-foreground: #eee4f6;

Description

color combos color-combos-locked-bold-foreground

sd-sage-color-combos-locked-bold-background

$sd-sage-color-combos-locked-bold-background: #8e5ad8;

Description

color combos color-combos-locked-bold-background

sd-sage-color-combos-warning-default-foreground

$sd-sage-color-combos-warning-default-foreground: #c56a02;

Description

color combos color-combos-warning-default-foreground

sd-sage-color-combos-warning-default-foreground-accent

$sd-sage-color-combos-warning-default-foreground-accent: #8c3b08;

Description

color combos color-combos-warning-default-foreground-accent

sd-sage-color-combos-warning-default-background

$sd-sage-color-combos-warning-default-background: #fef8e1;

Description

color combos color-combos-warning-default-background

sd-sage-color-combos-warning-default-background-accent

$sd-sage-color-combos-warning-default-background-accent: #fad980;

Description

color combos color-combos-warning-default-background-accent

sd-sage-color-combos-warning-default-icon-background-accent

$sd-sage-color-combos-warning-default-icon-background-accent: #c56a02;

Description

color combos color-combos-warning-default-icon-background-accent

sd-sage-color-combos-warning-subtle-foreground

$sd-sage-color-combos-warning-subtle-foreground: #c56a02;

Description

color combos color-combos-warning-subtle-foreground

sd-sage-color-combos-warning-subtle-foreground-accent

$sd-sage-color-combos-warning-subtle-foreground-accent: #ffc505;

Description

color combos color-combos-warning-subtle-foreground-accent

sd-sage-color-combos-warning-subtle-background

$sd-sage-color-combos-warning-subtle-background: #ffc505;

Description

color combos color-combos-warning-subtle-background

sd-sage-color-combos-warning-bold-foreground

$sd-sage-color-combos-warning-bold-foreground: #fff;

Description

color combos color-combos-warning-bold-foreground

sd-sage-color-combos-warning-bold-background

$sd-sage-color-combos-warning-bold-background: #ffc505;

Description

color combos color-combos-warning-bold-background

sd-sage-color-combos-danger-default-foreground

$sd-sage-color-combos-danger-default-foreground: #99221e;

Description

color combos color-combos-danger-default-foreground

sd-sage-color-combos-danger-default-foreground-accent

$sd-sage-color-combos-danger-default-foreground-accent: #5e0d0d;

Description

color combos color-combos-danger-default-foreground-accent

sd-sage-color-combos-danger-default-background

$sd-sage-color-combos-danger-default-background: #fff0f0;

Description

color combos color-combos-danger-default-background

sd-sage-color-combos-danger-default-background-accent

$sd-sage-color-combos-danger-default-background-accent: #fdb0aa;

Description

color combos color-combos-danger-default-background-accent

sd-sage-color-combos-danger-default-icon-background-accent

$sd-sage-color-combos-danger-default-icon-background-accent: #cf3c32;

Description

color combos color-combos-danger-default-icon-background-accent

sd-sage-color-combos-danger-subtle-foreground

$sd-sage-color-combos-danger-subtle-foreground: #99221e;

Description

color combos color-combos-danger-subtle-foreground

sd-sage-color-combos-danger-subtle-foreground-accent

$sd-sage-color-combos-danger-subtle-foreground-accent: #fdb0aa;

Description

color combos color-combos-danger-subtle-foreground-accent

sd-sage-color-combos-danger-subtle-background

$sd-sage-color-combos-danger-subtle-background: #fdb0aa;

Description

color combos color-combos-danger-subtle-background

sd-sage-color-combos-danger-bold-foreground

$sd-sage-color-combos-danger-bold-foreground: #fff0f0;

Description

color combos color-combos-danger-bold-foreground

sd-sage-color-combos-danger-bold-background

$sd-sage-color-combos-danger-bold-background: #fdb0aa;

Description

color combos color-combos-danger-bold-background

sd-sage-color-combos-primary-default-foreground

$sd-sage-color-combos-primary-default-foreground: #fff;

Description

color combos color-combos-primary-default-foreground

sd-sage-color-combos-primary-default-foreground-accent

$sd-sage-color-combos-primary-default-foreground-accent: #fff;

Description

color combos color-combos-primary-default-foreground-accent

sd-sage-color-combos-primary-default-background

$sd-sage-color-combos-primary-default-background: #8ecafb;

Description

color combos color-combos-primary-default-background

sd-sage-color-combos-primary-subtle-foreground

$sd-sage-color-combos-primary-subtle-foreground: #fff;

Description

color combos color-combos-primary-subtle-foreground

sd-sage-color-combos-primary-subtle-foreground-accent

$sd-sage-color-combos-primary-subtle-foreground-accent: #fff;

Description

color combos color-combos-primary-subtle-foreground-accent

sd-sage-color-combos-primary-subtle-background

$sd-sage-color-combos-primary-subtle-background: #8ecafb;

Description

color combos color-combos-primary-subtle-background

sd-sage-color-combos-primary-bold-foreground

$sd-sage-color-combos-primary-bold-foreground: #fff;

Description

color combos color-combos-primary-bold-foreground

sd-sage-color-combos-primary-bold-background

$sd-sage-color-combos-primary-bold-background: #8ecafb;

Description

color combos color-combos-primary-bold-background

sd-sage-color-combos

$sd-sage-color-combos: (
  draft: (
    default: (
      foreground: $sd-sage-color-combos-draft-default-foreground,
      foreground-accent: $sd-sage-color-combos-draft-default-foreground-accent,
      background: $sd-sage-color-combos-draft-default-background,
      background-accent: $sd-sage-color-combos-draft-default-background-accent,
      icon-background-accent: $sd-sage-color-combos-draft-default-icon-background-accent,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-draft-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-draft-subtle-foreground-accent,
      background: $sd-sage-color-combos-draft-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-draft-bold-foreground,
      background: $sd-sage-color-combos-draft-bold-background,
    ),
  ),
  published: (
    default: (
      foreground: $sd-sage-color-combos-published-default-foreground,
      foreground-accent: $sd-sage-color-combos-published-default-foreground-accent,
      background: $sd-sage-color-combos-published-default-background,
      background-accent: $sd-sage-color-combos-published-default-background-accent,
      icon-background-accent: $sd-sage-color-combos-published-default-icon-background-accent,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-published-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-published-subtle-foreground-accent,
      background: $sd-sage-color-combos-published-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-published-bold-foreground,
      background: $sd-sage-color-combos-published-bold-background,
    ),
  ),
  info: (
    default: (
      foreground: $sd-sage-color-combos-info-default-foreground,
      foreground-accent: $sd-sage-color-combos-info-default-foreground-accent,
      background: $sd-sage-color-combos-info-default-background,
      background-accent: $sd-sage-color-combos-info-default-background-accent,
      icon-background-accent: $sd-sage-color-combos-info-default-icon-background-accent,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-info-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-info-subtle-foreground-accent,
      background: $sd-sage-color-combos-info-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-info-bold-foreground,
      background: $sd-sage-color-combos-info-bold-background,
    ),
  ),
  locked: (
    default: (
      foreground: $sd-sage-color-combos-locked-default-foreground,
      foreground-accent: $sd-sage-color-combos-locked-default-foreground-accent,
      background: $sd-sage-color-combos-locked-default-background,
      background-accent: $sd-sage-color-combos-locked-default-background-accent,
      icon-background-accent: $sd-sage-color-combos-locked-default-icon-background-accent,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-locked-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-locked-subtle-foreground-accent,
      background: $sd-sage-color-combos-locked-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-locked-bold-foreground,
      background: $sd-sage-color-combos-locked-bold-background,
    ),
  ),
  warning: (
    default: (
      foreground: $sd-sage-color-combos-warning-default-foreground,
      foreground-accent: $sd-sage-color-combos-warning-default-foreground-accent,
      background: $sd-sage-color-combos-warning-default-background,
      background-accent: $sd-sage-color-combos-warning-default-background-accent,
      icon-background-accent: $sd-sage-color-combos-warning-default-icon-background-accent,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-warning-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-warning-subtle-foreground-accent,
      background: $sd-sage-color-combos-warning-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-warning-bold-foreground,
      background: $sd-sage-color-combos-warning-bold-background,
    ),
  ),
  danger: (
    default: (
      foreground: $sd-sage-color-combos-danger-default-foreground,
      foreground-accent: $sd-sage-color-combos-danger-default-foreground-accent,
      background: $sd-sage-color-combos-danger-default-background,
      background-accent: $sd-sage-color-combos-danger-default-background-accent,
      icon-background-accent: $sd-sage-color-combos-danger-default-icon-background-accent,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-danger-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-danger-subtle-foreground-accent,
      background: $sd-sage-color-combos-danger-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-danger-bold-foreground,
      background: $sd-sage-color-combos-danger-bold-background,
    ),
  ),
  primary: (
    default: (
      foreground: $sd-sage-color-combos-primary-default-foreground,
      foreground-accent: $sd-sage-color-combos-primary-default-foreground-accent,
      background: $sd-sage-color-combos-primary-default-background,
    ),
    subtle: (
      foreground: $sd-sage-color-combos-primary-subtle-foreground,
      foreground-accent: $sd-sage-color-combos-primary-subtle-foreground-accent,
      background: $sd-sage-color-combos-primary-subtle-background,
    ),
    bold: (
      foreground: $sd-sage-color-combos-primary-bold-foreground,
      background: $sd-sage-color-combos-primary-bold-background,
    ),
  ),
);

Description

Map for color combos

Used by

sd-sage-color-core-primary

$sd-sage-color-core-primary: #0072ef;

Description

color core color-core-primary

sd-sage-color-core-sage

$sd-sage-color-core-sage: #23856d;

Description

color core color-core-sage

sd-sage-color-core-yellow

$sd-sage-color-core-yellow: #ffc505;

Description

color core color-core-yellow

sd-sage-color-core-red

$sd-sage-color-core-red: #cf3c32;

Description

color core color-core-red

sd-sage-color-core-orange

$sd-sage-color-core-orange: #fb7e09;

Description

color core color-core-orange

sd-sage-color-core-purple

$sd-sage-color-core-purple: #8e5ad8;

Description

color core color-core-purple

sd-sage-color-core-charcoal

$sd-sage-color-core-charcoal: #43474b;

Description

color core color-core-charcoal

sd-sage-color-core-grey

$sd-sage-color-core-grey: #8d939a;

Description

color core color-core-grey

sd-sage-color-core-white

$sd-sage-color-core-white: #fff;

Description

color core color-core-white

sd-sage-color-core-black

$sd-sage-color-core-black: #000;

Description

color core color-core-black

sd-sage-color-core

$sd-sage-color-core: (
  primary: $sd-sage-color-core-primary,
  sage: $sd-sage-color-core-sage,
  yellow: $sd-sage-color-core-yellow,
  red: $sd-sage-color-core-red,
  orange: $sd-sage-color-core-orange,
  purple: $sd-sage-color-core-purple,
  charcoal: $sd-sage-color-core-charcoal,
  grey: $sd-sage-color-core-grey,
  white: $sd-sage-color-core-white,
  black: $sd-sage-color-core-black,
);

Description

Map for color core

Used by

sd-sage-color-custom-label-primary-icon-background-accent

$sd-sage-color-custom-label-primary-icon-background-accent: #3e92ee;

Description

color custom color-custom-label-primary-icon-background-accent

sd-sage-color-custom-label-warning-background-accent

$sd-sage-color-custom-label-warning-background-accent: #f9df8b;

Description

color custom color-custom-label-warning-background-accent

sd-sage-color-custom-label-danger-background-accent

$sd-sage-color-custom-label-danger-background-accent: #f3988c;

Description

color custom color-custom-label-danger-background-accent

sd-sage-color-custom-label-danger-icon-background-accent

$sd-sage-color-custom-label-danger-icon-background-accent: #da665e;

Description

color custom color-custom-label-danger-icon-background-accent

sd-sage-color-custom

$sd-sage-color-custom: (
  label-primary-icon-background-accent: $sd-sage-color-custom-label-primary-icon-background-accent,
  label-warning-background-accent: $sd-sage-color-custom-label-warning-background-accent,
  label-danger-background-accent: $sd-sage-color-custom-label-danger-background-accent,
  label-danger-icon-background-accent: $sd-sage-color-custom-label-danger-icon-background-accent,
);

Description

Map for color custom

Used by

sd-sage-content-grid-template-e-code

$sd-sage-content-grid-template-e-code: ".";

Description

content grid-template content-grid-template-e-code

sd-sage-content-grid-template-e-symbol

$sd-sage-content-grid-template-e-symbol: "e";

Description

content grid-template content-grid-template-e-symbol

sd-sage-content-grid-template-e-classname

$sd-sage-content-grid-template-e-classname: "sage-grid-template-e";

Description

content grid-template content-grid-template-e-classname

sd-sage-content-grid-template-i-code

$sd-sage-content-grid-template-i-code: "..";

Description

content grid-template content-grid-template-i-code

sd-sage-content-grid-template-i-symbol

$sd-sage-content-grid-template-i-symbol: "i";

Description

content grid-template content-grid-template-i-symbol

sd-sage-content-grid-template-i-classname

$sd-sage-content-grid-template-i-classname: "sage-grid-template-i";

Description

content grid-template content-grid-template-i-classname

sd-sage-content-grid-template-s-code

$sd-sage-content-grid-template-s-code: "...";

Description

content grid-template content-grid-template-s-code

sd-sage-content-grid-template-s-symbol

$sd-sage-content-grid-template-s-symbol: "s";

Description

content grid-template content-grid-template-s-symbol

sd-sage-content-grid-template-s-classname

$sd-sage-content-grid-template-s-classname: "sage-grid-template-s";

Description

content grid-template content-grid-template-s-classname

sd-sage-content-grid-template-t-code

$sd-sage-content-grid-template-t-code: "-";

Description

content grid-template content-grid-template-t-code

sd-sage-content-grid-template-t-symbol

$sd-sage-content-grid-template-t-symbol: "t";

Description

content grid-template content-grid-template-t-symbol

sd-sage-content-grid-template-t-classname

$sd-sage-content-grid-template-t-classname: "sage-grid-template-t";

Description

content grid-template content-grid-template-t-classname

sd-sage-content-grid-template-m-code

$sd-sage-content-grid-template-m-code: "--";

Description

content grid-template content-grid-template-m-code

sd-sage-content-grid-template-m-symbol

$sd-sage-content-grid-template-m-symbol: "m";

Description

content grid-template content-grid-template-m-symbol

sd-sage-content-grid-template-m-classname

$sd-sage-content-grid-template-m-classname: "sage-grid-template-m";

Description

content grid-template content-grid-template-m-classname

sd-sage-content-grid-template-o-code

$sd-sage-content-grid-template-o-code: "---";

Description

content grid-template content-grid-template-o-code

sd-sage-content-grid-template-o-symbol

$sd-sage-content-grid-template-o-symbol: "o";

Description

content grid-template content-grid-template-o-symbol

sd-sage-content-grid-template-o-classname

$sd-sage-content-grid-template-o-classname: "sage-grid-template-o";

Description

content grid-template content-grid-template-o-classname

sd-sage-content-grid-template-se-code

$sd-sage-content-grid-template-se-code: "....";

Description

content grid-template content-grid-template-se-code

sd-sage-content-grid-template-se-symbol

$sd-sage-content-grid-template-se-symbol: "se";

Description

content grid-template content-grid-template-se-symbol

sd-sage-content-grid-template-se-classname

$sd-sage-content-grid-template-se-classname: "sage-grid-template-se";

Description

content grid-template content-grid-template-se-classname

sd-sage-content-grid-template-si-code

$sd-sage-content-grid-template-si-code: ".....";

Description

content grid-template content-grid-template-si-code

sd-sage-content-grid-template-si-symbol

$sd-sage-content-grid-template-si-symbol: "si";

Description

content grid-template content-grid-template-si-symbol

sd-sage-content-grid-template-si-classname

$sd-sage-content-grid-template-si-classname: "sage-grid-template-si";

Description

content grid-template content-grid-template-si-classname

sd-sage-content-grid-template-ss-code

$sd-sage-content-grid-template-ss-code: "......";

Description

content grid-template content-grid-template-ss-code

sd-sage-content-grid-template-ss-symbol

$sd-sage-content-grid-template-ss-symbol: "ss";

Description

content grid-template content-grid-template-ss-symbol

sd-sage-content-grid-template-ss-classname

$sd-sage-content-grid-template-ss-classname: "sage-grid-template-ss";

Description

content grid-template content-grid-template-ss-classname

sd-sage-content-grid-template-ot-code

$sd-sage-content-grid-template-ot-code: "----";

Description

content grid-template content-grid-template-ot-code

sd-sage-content-grid-template-ot-symbol

$sd-sage-content-grid-template-ot-symbol: "ot";

Description

content grid-template content-grid-template-ot-symbol

sd-sage-content-grid-template-ot-classname

$sd-sage-content-grid-template-ot-classname: "sage-grid-template-ot";

Description

content grid-template content-grid-template-ot-classname

sd-sage-content-grid-template-om-code

$sd-sage-content-grid-template-om-code: "-----";

Description

content grid-template content-grid-template-om-code

sd-sage-content-grid-template-om-symbol

$sd-sage-content-grid-template-om-symbol: "om";

Description

content grid-template content-grid-template-om-symbol

sd-sage-content-grid-template-om-classname

$sd-sage-content-grid-template-om-classname: "sage-grid-template-om";

Description

content grid-template content-grid-template-om-classname

sd-sage-content-grid-template-oo-code

$sd-sage-content-grid-template-oo-code: "------";

Description

content grid-template content-grid-template-oo-code

sd-sage-content-grid-template-oo-symbol

$sd-sage-content-grid-template-oo-symbol: "oo";

Description

content grid-template content-grid-template-oo-symbol

sd-sage-content-grid-template-oo-classname

$sd-sage-content-grid-template-oo-classname: "sage-grid-template-oo";

Description

content grid-template content-grid-template-oo-classname

sd-sage-content-grid-template-et-code

$sd-sage-content-grid-template-et-code: ".-";

Description

content grid-template content-grid-template-et-code

sd-sage-content-grid-template-et-symbol

$sd-sage-content-grid-template-et-symbol: "et";

Description

content grid-template content-grid-template-et-symbol

sd-sage-content-grid-template-et-classname

$sd-sage-content-grid-template-et-classname: "sage-grid-template-et";

Description

content grid-template content-grid-template-et-classname

sd-sage-content-grid-template-em-code

$sd-sage-content-grid-template-em-code: ".--";

Description

content grid-template content-grid-template-em-code

sd-sage-content-grid-template-em-symbol

$sd-sage-content-grid-template-em-symbol: "em";

Description

content grid-template content-grid-template-em-symbol

sd-sage-content-grid-template-em-classname

$sd-sage-content-grid-template-em-classname: "sage-grid-template-em";

Description

content grid-template content-grid-template-em-classname

sd-sage-content-grid-template-eo-code

$sd-sage-content-grid-template-eo-code: ".---";

Description

content grid-template content-grid-template-eo-code

sd-sage-content-grid-template-eo-symbol

$sd-sage-content-grid-template-eo-symbol: "eo";

Description

content grid-template content-grid-template-eo-symbol

sd-sage-content-grid-template-eo-classname

$sd-sage-content-grid-template-eo-classname: "sage-grid-template-eo";

Description

content grid-template content-grid-template-eo-classname

sd-sage-content-grid-template-it-code

$sd-sage-content-grid-template-it-code: "..-";

Description

content grid-template content-grid-template-it-code

sd-sage-content-grid-template-it-symbol

$sd-sage-content-grid-template-it-symbol: "it";

Description

content grid-template content-grid-template-it-symbol

sd-sage-content-grid-template-it-classname

$sd-sage-content-grid-template-it-classname: "sage-grid-template-it";

Description

content grid-template content-grid-template-it-classname

sd-sage-content-grid-template-im-code

$sd-sage-content-grid-template-im-code: "..--";

Description

content grid-template content-grid-template-im-code

sd-sage-content-grid-template-im-symbol

$sd-sage-content-grid-template-im-symbol: "im";

Description

content grid-template content-grid-template-im-symbol

sd-sage-content-grid-template-im-classname

$sd-sage-content-grid-template-im-classname: "sage-grid-template-im";

Description

content grid-template content-grid-template-im-classname

sd-sage-content-grid-template-io-code

$sd-sage-content-grid-template-io-code: "..---";

Description

content grid-template content-grid-template-io-code

sd-sage-content-grid-template-io-symbol

$sd-sage-content-grid-template-io-symbol: "io";

Description

content grid-template content-grid-template-io-symbol

sd-sage-content-grid-template-io-classname

$sd-sage-content-grid-template-io-classname: "sage-grid-template-io";

Description

content grid-template content-grid-template-io-classname

sd-sage-content-grid-template-st-code

$sd-sage-content-grid-template-st-code: "...-";

Description

content grid-template content-grid-template-st-code

sd-sage-content-grid-template-st-symbol

$sd-sage-content-grid-template-st-symbol: "st";

Description

content grid-template content-grid-template-st-symbol

sd-sage-content-grid-template-st-classname

$sd-sage-content-grid-template-st-classname: "sage-grid-template-st";

Description

content grid-template content-grid-template-st-classname

sd-sage-content-grid-template-sm-code

$sd-sage-content-grid-template-sm-code: "...--";

Description

content grid-template content-grid-template-sm-code

sd-sage-content-grid-template-sm-symbol

$sd-sage-content-grid-template-sm-symbol: "sm";

Description

content grid-template content-grid-template-sm-symbol

sd-sage-content-grid-template-sm-classname

$sd-sage-content-grid-template-sm-classname: "sage-grid-template-sm";

Description

content grid-template content-grid-template-sm-classname

sd-sage-content-grid-template-so-code

$sd-sage-content-grid-template-so-code: "...---";

Description

content grid-template content-grid-template-so-code

sd-sage-content-grid-template-so-symbol

$sd-sage-content-grid-template-so-symbol: "so";

Description

content grid-template content-grid-template-so-symbol

sd-sage-content-grid-template-so-classname

$sd-sage-content-grid-template-so-classname: "sage-grid-template-so";

Description

content grid-template content-grid-template-so-classname

sd-sage-content-grid-template-te-code

$sd-sage-content-grid-template-te-code: "-.";

Description

content grid-template content-grid-template-te-code

sd-sage-content-grid-template-te-symbol

$sd-sage-content-grid-template-te-symbol: "te";

Description

content grid-template content-grid-template-te-symbol

sd-sage-content-grid-template-te-classname

$sd-sage-content-grid-template-te-classname: "sage-grid-template-te";

Description

content grid-template content-grid-template-te-classname

sd-sage-content-grid-template-ti-code

$sd-sage-content-grid-template-ti-code: "-..";

Description

content grid-template content-grid-template-ti-code

sd-sage-content-grid-template-ti-symbol

$sd-sage-content-grid-template-ti-symbol: "ti";

Description

content grid-template content-grid-template-ti-symbol

sd-sage-content-grid-template-ti-classname

$sd-sage-content-grid-template-ti-classname: "sage-grid-template-ti";

Description

content grid-template content-grid-template-ti-classname

sd-sage-content-grid-template-ts-code

$sd-sage-content-grid-template-ts-code: "-...";

Description

content grid-template content-grid-template-ts-code

sd-sage-content-grid-template-ts-symbol

$sd-sage-content-grid-template-ts-symbol: "ts";

Description

content grid-template content-grid-template-ts-symbol

sd-sage-content-grid-template-ts-classname

$sd-sage-content-grid-template-ts-classname: "sage-grid-template-ts";

Description

content grid-template content-grid-template-ts-classname

sd-sage-content-grid-template-me-code

$sd-sage-content-grid-template-me-code: "--.";

Description

content grid-template content-grid-template-me-code

sd-sage-content-grid-template-me-symbol

$sd-sage-content-grid-template-me-symbol: "me";

Description

content grid-template content-grid-template-me-symbol

sd-sage-content-grid-template-me-classname

$sd-sage-content-grid-template-me-classname: "sage-grid-template-me";

Description

content grid-template content-grid-template-me-classname

sd-sage-content-grid-template-mi-code

$sd-sage-content-grid-template-mi-code: "--..";

Description

content grid-template content-grid-template-mi-code

sd-sage-content-grid-template-mi-symbol

$sd-sage-content-grid-template-mi-symbol: "mi";

Description

content grid-template content-grid-template-mi-symbol

sd-sage-content-grid-template-mi-classname

$sd-sage-content-grid-template-mi-classname: "sage-grid-template-mi";

Description

content grid-template content-grid-template-mi-classname

sd-sage-content-grid-template-ms-code

$sd-sage-content-grid-template-ms-code: "--...";

Description

content grid-template content-grid-template-ms-code

sd-sage-content-grid-template-ms-symbol

$sd-sage-content-grid-template-ms-symbol: "ms";

Description

content grid-template content-grid-template-ms-symbol

sd-sage-content-grid-template-ms-classname

$sd-sage-content-grid-template-ms-classname: "sage-grid-template-ms";

Description

content grid-template content-grid-template-ms-classname

sd-sage-content-grid-template-oe-code

$sd-sage-content-grid-template-oe-code: "---.";

Description

content grid-template content-grid-template-oe-code

sd-sage-content-grid-template-oe-symbol

$sd-sage-content-grid-template-oe-symbol: "oe";

Description

content grid-template content-grid-template-oe-symbol

sd-sage-content-grid-template-oe-classname

$sd-sage-content-grid-template-oe-classname: "sage-grid-template-oe";

Description

content grid-template content-grid-template-oe-classname

sd-sage-content-grid-template-oi-code

$sd-sage-content-grid-template-oi-code: "---..";

Description

content grid-template content-grid-template-oi-code

sd-sage-content-grid-template-oi-symbol

$sd-sage-content-grid-template-oi-symbol: "oi";

Description

content grid-template content-grid-template-oi-symbol

sd-sage-content-grid-template-oi-classname

$sd-sage-content-grid-template-oi-classname: "sage-grid-template-oi";

Description

content grid-template content-grid-template-oi-classname

sd-sage-content-grid-template-os-code

$sd-sage-content-grid-template-os-code: "---...";

Description

content grid-template content-grid-template-os-code

sd-sage-content-grid-template-os-symbol

$sd-sage-content-grid-template-os-symbol: "os";

Description

content grid-template content-grid-template-os-symbol

sd-sage-content-grid-template-os-classname

$sd-sage-content-grid-template-os-classname: "sage-grid-template-os";

Description

content grid-template content-grid-template-os-classname

sd-sage-content-grid-template-ete-code

$sd-sage-content-grid-template-ete-code: ".-.";

Description

content grid-template content-grid-template-ete-code

sd-sage-content-grid-template-ete-symbol

$sd-sage-content-grid-template-ete-symbol: "ete";

Description

content grid-template content-grid-template-ete-symbol

sd-sage-content-grid-template-ete-classname

$sd-sage-content-grid-template-ete-classname: "sage-grid-template-ete";

Description

content grid-template content-grid-template-ete-classname

sd-sage-content-grid-template-eti-code

$sd-sage-content-grid-template-eti-code: ".-..";

Description

content grid-template content-grid-template-eti-code

sd-sage-content-grid-template-eti-symbol

$sd-sage-content-grid-template-eti-symbol: "eti";

Description

content grid-template content-grid-template-eti-symbol

sd-sage-content-grid-template-eti-classname

$sd-sage-content-grid-template-eti-classname: "sage-grid-template-eti";

Description

content grid-template content-grid-template-eti-classname

sd-sage-content-grid-template-ets-code

$sd-sage-content-grid-template-ets-code: ".-...";

Description

content grid-template content-grid-template-ets-code

sd-sage-content-grid-template-ets-symbol

$sd-sage-content-grid-template-ets-symbol: "ets";

Description

content grid-template content-grid-template-ets-symbol

sd-sage-content-grid-template-ets-classname

$sd-sage-content-grid-template-ets-classname: "sage-grid-template-ets";

Description

content grid-template content-grid-template-ets-classname

sd-sage-content-grid-template-eme-code

$sd-sage-content-grid-template-eme-code: ".--.";

Description

content grid-template content-grid-template-eme-code

sd-sage-content-grid-template-eme-symbol

$sd-sage-content-grid-template-eme-symbol: "eme";

Description

content grid-template content-grid-template-eme-symbol

sd-sage-content-grid-template-eme-classname

$sd-sage-content-grid-template-eme-classname: "sage-grid-template-eme";

Description

content grid-template content-grid-template-eme-classname

sd-sage-content-grid-template-emi-code

$sd-sage-content-grid-template-emi-code: ".--..";

Description

content grid-template content-grid-template-emi-code

sd-sage-content-grid-template-emi-symbol

$sd-sage-content-grid-template-emi-symbol: "emi";

Description

content grid-template content-grid-template-emi-symbol

sd-sage-content-grid-template-emi-classname

$sd-sage-content-grid-template-emi-classname: "sage-grid-template-emi";

Description

content grid-template content-grid-template-emi-classname

sd-sage-content-grid-template-ems-code

$sd-sage-content-grid-template-ems-code: ".--...";

Description

content grid-template content-grid-template-ems-code

sd-sage-content-grid-template-ems-symbol

$sd-sage-content-grid-template-ems-symbol: "ems";

Description

content grid-template content-grid-template-ems-symbol

sd-sage-content-grid-template-ems-classname

$sd-sage-content-grid-template-ems-classname: "sage-grid-template-ems";

Description

content grid-template content-grid-template-ems-classname

sd-sage-content-grid-template-eoe-code

$sd-sage-content-grid-template-eoe-code: ".---.";

Description

content grid-template content-grid-template-eoe-code

sd-sage-content-grid-template-eoe-symbol

$sd-sage-content-grid-template-eoe-symbol: "eoe";

Description

content grid-template content-grid-template-eoe-symbol

sd-sage-content-grid-template-eoe-classname

$sd-sage-content-grid-template-eoe-classname: "sage-grid-template-eoe";

Description

content grid-template content-grid-template-eoe-classname

sd-sage-content-grid-template-eoi-code

$sd-sage-content-grid-template-eoi-code: ".---..";

Description

content grid-template content-grid-template-eoi-code

sd-sage-content-grid-template-eoi-symbol

$sd-sage-content-grid-template-eoi-symbol: "eoi";

Description

content grid-template content-grid-template-eoi-symbol

sd-sage-content-grid-template-eoi-classname

$sd-sage-content-grid-template-eoi-classname: "sage-grid-template-eoi";

Description

content grid-template content-grid-template-eoi-classname

sd-sage-content-grid-template-eos-code

$sd-sage-content-grid-template-eos-code: ".---...";

Description

content grid-template content-grid-template-eos-code

sd-sage-content-grid-template-eos-symbol

$sd-sage-content-grid-template-eos-symbol: "eos";

Description

content grid-template content-grid-template-eos-symbol

sd-sage-content-grid-template-eos-classname

$sd-sage-content-grid-template-eos-classname: "sage-grid-template-eos";

Description

content grid-template content-grid-template-eos-classname

sd-sage-content-grid-template-ite-code

$sd-sage-content-grid-template-ite-code: "..-.";

Description

content grid-template content-grid-template-ite-code

sd-sage-content-grid-template-ite-symbol

$sd-sage-content-grid-template-ite-symbol: "ite";

Description

content grid-template content-grid-template-ite-symbol

sd-sage-content-grid-template-ite-classname

$sd-sage-content-grid-template-ite-classname: "sage-grid-template-ite";

Description

content grid-template content-grid-template-ite-classname

sd-sage-content-grid-template-iti-code

$sd-sage-content-grid-template-iti-code: "..-..";

Description

content grid-template content-grid-template-iti-code

sd-sage-content-grid-template-iti-symbol

$sd-sage-content-grid-template-iti-symbol: "iti";

Description

content grid-template content-grid-template-iti-symbol

sd-sage-content-grid-template-iti-classname

$sd-sage-content-grid-template-iti-classname: "sage-grid-template-iti";

Description

content grid-template content-grid-template-iti-classname

sd-sage-content-grid-template-its-code

$sd-sage-content-grid-template-its-code: "..-...";

Description

content grid-template content-grid-template-its-code

sd-sage-content-grid-template-its-symbol

$sd-sage-content-grid-template-its-symbol: "its";

Description

content grid-template content-grid-template-its-symbol

sd-sage-content-grid-template-its-classname

$sd-sage-content-grid-template-its-classname: "sage-grid-template-its";

Description

content grid-template content-grid-template-its-classname

sd-sage-content-grid-template-ime-code

$sd-sage-content-grid-template-ime-code: "..--.";

Description

content grid-template content-grid-template-ime-code

sd-sage-content-grid-template-ime-symbol

$sd-sage-content-grid-template-ime-symbol: "ime";

Description

content grid-template content-grid-template-ime-symbol

sd-sage-content-grid-template-ime-classname

$sd-sage-content-grid-template-ime-classname: "sage-grid-template-ime";

Description

content grid-template content-grid-template-ime-classname

sd-sage-content-grid-template-imi-code

$sd-sage-content-grid-template-imi-code: "..--..";

Description

content grid-template content-grid-template-imi-code

sd-sage-content-grid-template-imi-symbol

$sd-sage-content-grid-template-imi-symbol: "imi";

Description

content grid-template content-grid-template-imi-symbol

sd-sage-content-grid-template-imi-classname

$sd-sage-content-grid-template-imi-classname: "sage-grid-template-imi";

Description

content grid-template content-grid-template-imi-classname

sd-sage-content-grid-template-ims-code

$sd-sage-content-grid-template-ims-code: "..--...";

Description

content grid-template content-grid-template-ims-code

sd-sage-content-grid-template-ims-symbol

$sd-sage-content-grid-template-ims-symbol: "ims";

Description

content grid-template content-grid-template-ims-symbol

sd-sage-content-grid-template-ims-classname

$sd-sage-content-grid-template-ims-classname: "sage-grid-template-ims";

Description

content grid-template content-grid-template-ims-classname

sd-sage-content-grid-template-ioe-code

$sd-sage-content-grid-template-ioe-code: "..---.";

Description

content grid-template content-grid-template-ioe-code

sd-sage-content-grid-template-ioe-symbol

$sd-sage-content-grid-template-ioe-symbol: "ioe";

Description

content grid-template content-grid-template-ioe-symbol

sd-sage-content-grid-template-ioe-classname

$sd-sage-content-grid-template-ioe-classname: "sage-grid-template-ioe";

Description

content grid-template content-grid-template-ioe-classname

sd-sage-content-grid-template-ioi-code

$sd-sage-content-grid-template-ioi-code: "..---..";

Description

content grid-template content-grid-template-ioi-code

sd-sage-content-grid-template-ioi-symbol

$sd-sage-content-grid-template-ioi-symbol: "ioi";

Description

content grid-template content-grid-template-ioi-symbol

sd-sage-content-grid-template-ioi-classname

$sd-sage-content-grid-template-ioi-classname: "sage-grid-template-ioi";

Description

content grid-template content-grid-template-ioi-classname

sd-sage-content-grid-template-ios-code

$sd-sage-content-grid-template-ios-code: "..---...";

Description

content grid-template content-grid-template-ios-code

sd-sage-content-grid-template-ios-symbol

$sd-sage-content-grid-template-ios-symbol: "ios";

Description

content grid-template content-grid-template-ios-symbol

sd-sage-content-grid-template-ios-classname

$sd-sage-content-grid-template-ios-classname: "sage-grid-template-ios";

Description

content grid-template content-grid-template-ios-classname

sd-sage-content-grid-template-ste-code

$sd-sage-content-grid-template-ste-code: "...-.";

Description

content grid-template content-grid-template-ste-code

sd-sage-content-grid-template-ste-symbol

$sd-sage-content-grid-template-ste-symbol: "ste";

Description

content grid-template content-grid-template-ste-symbol

sd-sage-content-grid-template-ste-classname

$sd-sage-content-grid-template-ste-classname: "sage-grid-template-ste";

Description

content grid-template content-grid-template-ste-classname

sd-sage-content-grid-template-sti-code

$sd-sage-content-grid-template-sti-code: "...-..";

Description

content grid-template content-grid-template-sti-code

sd-sage-content-grid-template-sti-symbol

$sd-sage-content-grid-template-sti-symbol: "sti";

Description

content grid-template content-grid-template-sti-symbol

sd-sage-content-grid-template-sti-classname

$sd-sage-content-grid-template-sti-classname: "sage-grid-template-sti";

Description

content grid-template content-grid-template-sti-classname

sd-sage-content-grid-template-sts-code

$sd-sage-content-grid-template-sts-code: "...-...";

Description

content grid-template content-grid-template-sts-code

sd-sage-content-grid-template-sts-symbol

$sd-sage-content-grid-template-sts-symbol: "sts";

Description

content grid-template content-grid-template-sts-symbol

sd-sage-content-grid-template-sts-classname

$sd-sage-content-grid-template-sts-classname: "sage-grid-template-sts";

Description

content grid-template content-grid-template-sts-classname

sd-sage-content-grid-template-sme-code

$sd-sage-content-grid-template-sme-code: "...--.";

Description

content grid-template content-grid-template-sme-code

sd-sage-content-grid-template-sme-symbol

$sd-sage-content-grid-template-sme-symbol: "sme";

Description

content grid-template content-grid-template-sme-symbol

sd-sage-content-grid-template-sme-classname

$sd-sage-content-grid-template-sme-classname: "sage-grid-template-sme";

Description

content grid-template content-grid-template-sme-classname

sd-sage-content-grid-template-smi-code

$sd-sage-content-grid-template-smi-code: "...--..";

Description

content grid-template content-grid-template-smi-code

sd-sage-content-grid-template-smi-symbol

$sd-sage-content-grid-template-smi-symbol: "smi";

Description

content grid-template content-grid-template-smi-symbol

sd-sage-content-grid-template-smi-classname

$sd-sage-content-grid-template-smi-classname: "sage-grid-template-smi";

Description

content grid-template content-grid-template-smi-classname

sd-sage-content-grid-template-sms-code

$sd-sage-content-grid-template-sms-code: "...--...";

Description

content grid-template content-grid-template-sms-code

sd-sage-content-grid-template-sms-symbol

$sd-sage-content-grid-template-sms-symbol: "sms";

Description

content grid-template content-grid-template-sms-symbol

sd-sage-content-grid-template-sms-classname

$sd-sage-content-grid-template-sms-classname: "sage-grid-template-sms";

Description

content grid-template content-grid-template-sms-classname

sd-sage-content-grid-template-soe-code

$sd-sage-content-grid-template-soe-code: "...---.";

Description

content grid-template content-grid-template-soe-code

sd-sage-content-grid-template-soe-symbol

$sd-sage-content-grid-template-soe-symbol: "soe";

Description

content grid-template content-grid-template-soe-symbol

sd-sage-content-grid-template-soe-classname

$sd-sage-content-grid-template-soe-classname: "sage-grid-template-soe";

Description

content grid-template content-grid-template-soe-classname

sd-sage-content-grid-template-soi-code

$sd-sage-content-grid-template-soi-code: "...---..";

Description

content grid-template content-grid-template-soi-code

sd-sage-content-grid-template-soi-symbol

$sd-sage-content-grid-template-soi-symbol: "soi";

Description

content grid-template content-grid-template-soi-symbol

sd-sage-content-grid-template-soi-classname

$sd-sage-content-grid-template-soi-classname: "sage-grid-template-soi";

Description

content grid-template content-grid-template-soi-classname

sd-sage-content-grid-template-sos-code

$sd-sage-content-grid-template-sos-code: "...---...";

Description

content grid-template content-grid-template-sos-code

sd-sage-content-grid-template-sos-symbol

$sd-sage-content-grid-template-sos-symbol: "sos";

Description

content grid-template content-grid-template-sos-symbol

sd-sage-content-grid-template-sos-classname

$sd-sage-content-grid-template-sos-classname: "sage-grid-template-sos";

Description

content grid-template content-grid-template-sos-classname

sd-sage-content-grid-template

$sd-sage-content-grid-template: (
  e: (
    code: $sd-sage-content-grid-template-e-code,
    symbol: $sd-sage-content-grid-template-e-symbol,
    classname: $sd-sage-content-grid-template-e-classname,
  ),
  i: (
    code: $sd-sage-content-grid-template-i-code,
    symbol: $sd-sage-content-grid-template-i-symbol,
    classname: $sd-sage-content-grid-template-i-classname,
  ),
  s: (
    code: $sd-sage-content-grid-template-s-code,
    symbol: $sd-sage-content-grid-template-s-symbol,
    classname: $sd-sage-content-grid-template-s-classname,
  ),
  t: (
    code: $sd-sage-content-grid-template-t-code,
    symbol: $sd-sage-content-grid-template-t-symbol,
    classname: $sd-sage-content-grid-template-t-classname,
  ),
  m: (
    code: $sd-sage-content-grid-template-m-code,
    symbol: $sd-sage-content-grid-template-m-symbol,
    classname: $sd-sage-content-grid-template-m-classname,
  ),
  o: (
    code: $sd-sage-content-grid-template-o-code,
    symbol: $sd-sage-content-grid-template-o-symbol,
    classname: $sd-sage-content-grid-template-o-classname,
  ),
  se: (
    code: $sd-sage-content-grid-template-se-code,
    symbol: $sd-sage-content-grid-template-se-symbol,
    classname: $sd-sage-content-grid-template-se-classname,
  ),
  si: (
    code: $sd-sage-content-grid-template-si-code,
    symbol: $sd-sage-content-grid-template-si-symbol,
    classname: $sd-sage-content-grid-template-si-classname,
  ),
  ss: (
    code: $sd-sage-content-grid-template-ss-code,
    symbol: $sd-sage-content-grid-template-ss-symbol,
    classname: $sd-sage-content-grid-template-ss-classname,
  ),
  ot: (
    code: $sd-sage-content-grid-template-ot-code,
    symbol: $sd-sage-content-grid-template-ot-symbol,
    classname: $sd-sage-content-grid-template-ot-classname,
  ),
  om: (
    code: $sd-sage-content-grid-template-om-code,
    symbol: $sd-sage-content-grid-template-om-symbol,
    classname: $sd-sage-content-grid-template-om-classname,
  ),
  oo: (
    code: $sd-sage-content-grid-template-oo-code,
    symbol: $sd-sage-content-grid-template-oo-symbol,
    classname: $sd-sage-content-grid-template-oo-classname,
  ),
  et: (
    code: $sd-sage-content-grid-template-et-code,
    symbol: $sd-sage-content-grid-template-et-symbol,
    classname: $sd-sage-content-grid-template-et-classname,
  ),
  em: (
    code: $sd-sage-content-grid-template-em-code,
    symbol: $sd-sage-content-grid-template-em-symbol,
    classname: $sd-sage-content-grid-template-em-classname,
  ),
  eo: (
    code: $sd-sage-content-grid-template-eo-code,
    symbol: $sd-sage-content-grid-template-eo-symbol,
    classname: $sd-sage-content-grid-template-eo-classname,
  ),
  it: (
    code: $sd-sage-content-grid-template-it-code,
    symbol: $sd-sage-content-grid-template-it-symbol,
    classname: $sd-sage-content-grid-template-it-classname,
  ),
  im: (
    code: $sd-sage-content-grid-template-im-code,
    symbol: $sd-sage-content-grid-template-im-symbol,
    classname: $sd-sage-content-grid-template-im-classname,
  ),
  io: (
    code: $sd-sage-content-grid-template-io-code,
    symbol: $sd-sage-content-grid-template-io-symbol,
    classname: $sd-sage-content-grid-template-io-classname,
  ),
  st: (
    code: $sd-sage-content-grid-template-st-code,
    symbol: $sd-sage-content-grid-template-st-symbol,
    classname: $sd-sage-content-grid-template-st-classname,
  ),
  sm: (
    code: $sd-sage-content-grid-template-sm-code,
    symbol: $sd-sage-content-grid-template-sm-symbol,
    classname: $sd-sage-content-grid-template-sm-classname,
  ),
  so: (
    code: $sd-sage-content-grid-template-so-code,
    symbol: $sd-sage-content-grid-template-so-symbol,
    classname: $sd-sage-content-grid-template-so-classname,
  ),
  te: (
    code: $sd-sage-content-grid-template-te-code,
    symbol: $sd-sage-content-grid-template-te-symbol,
    classname: $sd-sage-content-grid-template-te-classname,
  ),
  ti: (
    code: $sd-sage-content-grid-template-ti-code,
    symbol: $sd-sage-content-grid-template-ti-symbol,
    classname: $sd-sage-content-grid-template-ti-classname,
  ),
  ts: (
    code: $sd-sage-content-grid-template-ts-code,
    symbol: $sd-sage-content-grid-template-ts-symbol,
    classname: $sd-sage-content-grid-template-ts-classname,
  ),
  me: (
    code: $sd-sage-content-grid-template-me-code,
    symbol: $sd-sage-content-grid-template-me-symbol,
    classname: $sd-sage-content-grid-template-me-classname,
  ),
  mi: (
    code: $sd-sage-content-grid-template-mi-code,
    symbol: $sd-sage-content-grid-template-mi-symbol,
    classname: $sd-sage-content-grid-template-mi-classname,
  ),
  ms: (
    code: $sd-sage-content-grid-template-ms-code,
    symbol: $sd-sage-content-grid-template-ms-symbol,
    classname: $sd-sage-content-grid-template-ms-classname,
  ),
  oe: (
    code: $sd-sage-content-grid-template-oe-code,
    symbol: $sd-sage-content-grid-template-oe-symbol,
    classname: $sd-sage-content-grid-template-oe-classname,
  ),
  oi: (
    code: $sd-sage-content-grid-template-oi-code,
    symbol: $sd-sage-content-grid-template-oi-symbol,
    classname: $sd-sage-content-grid-template-oi-classname,
  ),
  os: (
    code: $sd-sage-content-grid-template-os-code,
    symbol: $sd-sage-content-grid-template-os-symbol,
    classname: $sd-sage-content-grid-template-os-classname,
  ),
  ete: (
    code: $sd-sage-content-grid-template-ete-code,
    symbol: $sd-sage-content-grid-template-ete-symbol,
    classname: $sd-sage-content-grid-template-ete-classname,
  ),
  eti: (
    code: $sd-sage-content-grid-template-eti-code,
    symbol: $sd-sage-content-grid-template-eti-symbol,
    classname: $sd-sage-content-grid-template-eti-classname,
  ),
  ets: (
    code: $sd-sage-content-grid-template-ets-code,
    symbol: $sd-sage-content-grid-template-ets-symbol,
    classname: $sd-sage-content-grid-template-ets-classname,
  ),
  eme: (
    code: $sd-sage-content-grid-template-eme-code,
    symbol: $sd-sage-content-grid-template-eme-symbol,
    classname: $sd-sage-content-grid-template-eme-classname,
  ),
  emi: (
    code: $sd-sage-content-grid-template-emi-code,
    symbol: $sd-sage-content-grid-template-emi-symbol,
    classname: $sd-sage-content-grid-template-emi-classname,
  ),
  ems: (
    code: $sd-sage-content-grid-template-ems-code,
    symbol: $sd-sage-content-grid-template-ems-symbol,
    classname: $sd-sage-content-grid-template-ems-classname,
  ),
  eoe: (
    code: $sd-sage-content-grid-template-eoe-code,
    symbol: $sd-sage-content-grid-template-eoe-symbol,
    classname: $sd-sage-content-grid-template-eoe-classname,
  ),
  eoi: (
    code: $sd-sage-content-grid-template-eoi-code,
    symbol: $sd-sage-content-grid-template-eoi-symbol,
    classname: $sd-sage-content-grid-template-eoi-classname,
  ),
  eos: (
    code: $sd-sage-content-grid-template-eos-code,
    symbol: $sd-sage-content-grid-template-eos-symbol,
    classname: $sd-sage-content-grid-template-eos-classname,
  ),
  ite: (
    code: $sd-sage-content-grid-template-ite-code,
    symbol: $sd-sage-content-grid-template-ite-symbol,
    classname: $sd-sage-content-grid-template-ite-classname,
  ),
  iti: (
    code: $sd-sage-content-grid-template-iti-code,
    symbol: $sd-sage-content-grid-template-iti-symbol,
    classname: $sd-sage-content-grid-template-iti-classname,
  ),
  its: (
    code: $sd-sage-content-grid-template-its-code,
    symbol: $sd-sage-content-grid-template-its-symbol,
    classname: $sd-sage-content-grid-template-its-classname,
  ),
  ime: (
    code: $sd-sage-content-grid-template-ime-code,
    symbol: $sd-sage-content-grid-template-ime-symbol,
    classname: $sd-sage-content-grid-template-ime-classname,
  ),
  imi: (
    code: $sd-sage-content-grid-template-imi-code,
    symbol: $sd-sage-content-grid-template-imi-symbol,
    classname: $sd-sage-content-grid-template-imi-classname,
  ),
  ims: (
    code: $sd-sage-content-grid-template-ims-code,
    symbol: $sd-sage-content-grid-template-ims-symbol,
    classname: $sd-sage-content-grid-template-ims-classname,
  ),
  ioe: (
    code: $sd-sage-content-grid-template-ioe-code,
    symbol: $sd-sage-content-grid-template-ioe-symbol,
    classname: $sd-sage-content-grid-template-ioe-classname,
  ),
  ioi: (
    code: $sd-sage-content-grid-template-ioi-code,
    symbol: $sd-sage-content-grid-template-ioi-symbol,
    classname: $sd-sage-content-grid-template-ioi-classname,
  ),
  ios: (
    code: $sd-sage-content-grid-template-ios-code,
    symbol: $sd-sage-content-grid-template-ios-symbol,
    classname: $sd-sage-content-grid-template-ios-classname,
  ),
  ste: (
    code: $sd-sage-content-grid-template-ste-code,
    symbol: $sd-sage-content-grid-template-ste-symbol,
    classname: $sd-sage-content-grid-template-ste-classname,
  ),
  sti: (
    code: $sd-sage-content-grid-template-sti-code,
    symbol: $sd-sage-content-grid-template-sti-symbol,
    classname: $sd-sage-content-grid-template-sti-classname,
  ),
  sts: (
    code: $sd-sage-content-grid-template-sts-code,
    symbol: $sd-sage-content-grid-template-sts-symbol,
    classname: $sd-sage-content-grid-template-sts-classname,
  ),
  sme: (
    code: $sd-sage-content-grid-template-sme-code,
    symbol: $sd-sage-content-grid-template-sme-symbol,
    classname: $sd-sage-content-grid-template-sme-classname,
  ),
  smi: (
    code: $sd-sage-content-grid-template-smi-code,
    symbol: $sd-sage-content-grid-template-smi-symbol,
    classname: $sd-sage-content-grid-template-smi-classname,
  ),
  sms: (
    code: $sd-sage-content-grid-template-sms-code,
    symbol: $sd-sage-content-grid-template-sms-symbol,
    classname: $sd-sage-content-grid-template-sms-classname,
  ),
  soe: (
    code: $sd-sage-content-grid-template-soe-code,
    symbol: $sd-sage-content-grid-template-soe-symbol,
    classname: $sd-sage-content-grid-template-soe-classname,
  ),
  soi: (
    code: $sd-sage-content-grid-template-soi-code,
    symbol: $sd-sage-content-grid-template-soi-symbol,
    classname: $sd-sage-content-grid-template-soi-classname,
  ),
  sos: (
    code: $sd-sage-content-grid-template-sos-code,
    symbol: $sd-sage-content-grid-template-sos-symbol,
    classname: $sd-sage-content-grid-template-sos-classname,
  ),
);

Description

Map for content grid-template

Used by

functions

sd-sage-color

@function sd-sage-color($key, $subkey, $subsubkey) { ... }

Description

Sage color base token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

String none
$subkey

The subtoken to retrieve

String none
$subsubkey

The sub-subtoken to retrieve

String none

Requires

Used by

sd-sage-color-combos

@function sd-sage-color-combos($key, $subkey, $subsubkey) { ... }

Description

Sage color combos token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

String none
$subkey

The subtoken to retrieve

String none
$subsubkey

The sub-subtoken to retrieve

String none

Requires

Used by

sd-sage-color-core

@function sd-sage-color-core($key) { ... }

Description

Sage color core token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

String none

Requires

sd-sage-color-custom

@function sd-sage-color-custom($key) { ... }

Description

Sage color custom token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

String none

Requires

sd-sage-content-grid-template

@function sd-sage-content-grid-template($key, $subkey) { ... }

Description

Sage content grid-template token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

String none
$subkey

The subtoken to retrieve

String none

Requires

utilities

functions

parse-morse-code

@function parse-morse-code($-code) { ... }

Description

Parse a Morse code into a prescriptive object pattern that is used to create CSS for the code value.

  • code - the original morse code value provided.
  • pattern - the grid template pattern, a combination of auto and 1fr depending on the morse code provided. For example, the pattern ..--. would return auto auto 1fr 1fr auto.
  • dash-slots - a list of the indeces for slots in the pattern occupied by dashes. For example, the pattern ..--. would return 2 3.
  • dot-slots - a list of the indeces for slots in the pattern occupied by dashes. For example, the pattern ..--. would return 0 1 4.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$-code

The morse code value to parse.

Any none

Returns

Map

See documentation above

position-print-value

@function position-print-value($key, $value) { ... }

Description

Checks the value of a positioning property to ensure it is present.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The property name being inspected

String none
$value

The value to check

Any none

Returns

Any type —

Outputs an error message if the value is not present, the value if provided, or null if the value is unset.

Throws

  • position() mixin requires all 4 position values (top, right, bottom, left): #{$key} is missing or invalid.

Used by

rem

@function rem($value) { ... }

Description

Converts an integer to a rem value based on 16 as the base size.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Length value, typically a px or pt that is to be converted to rem

Length none

Returns

Length

Provided value as a rem.

Example

Basic usage

// Declaration
.sage-box {
  width: rem(200px);
}

// Output
.sage-box {
  width: 12.5rem;
}

Requires

Used by

strip-unit

@function strip-unit($number) { ... }

Description

Strips non-numeric content from values

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Length from which to strip a unit

Length none

Returns

Number

Unitless number

Used by

str-replace

@function str-replace($string, $search, $replace) { ... }

Description

Replace $search with $replace in $string

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

Initial string

String none
$search

Substring to replace

String none
$replace

('') - New value

String none

Returns

String

Updated string

Used by

Author

  • Hugo Giraudel

unicode

@function unicode($str) { ... }

Description

Converts a string to unicode

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$str

The string to convert to unicode

String none

variables

sage-use-rem-conversion

$sage-use-rem-conversion: true !default;

Description

Whether or not to use rem conversion across the system For use in cases where a theme has modified the root font-size to something other than the browser default.

Used by

mixins

clearfix

@mixin clearfix() { ... }

Description

Adds a clearfix psuedo-element for use in containers that may include floated elements. Testing a new item.

Parameters

None.

Example

Basic usage

.sage-box {
  @include clearfix;
}

icon-rotate

@mixin icon-rotate($degrees, $rotation) { ... }

Description

Generates cross-browser icon rotations

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$degrees

Degrees value

Number none
$rotation

Rotation value

Number none

icon-flip

@mixin icon-flip($horiz, $vert, $rotation) { ... }

Description

Generates cross-browser icon flip in either axis

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$horiz

Whether or not to flip on the horizontal axis

Number none
$vert

Whether or not to flip on the vertical axis

Number none
$rotation

Rotation value

Number none

overflow-scroll

@mixin overflow-scroll($dimension: y) { ... }

Description

Define overflow scrolling dimensions

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$dimension

The dimension along which to overflow.

String(y,x,all)y

Example

Basic usage

.sage-box {
  @include overflow-scroll(x);
}

placeholder

@mixin placeholder() { ... }

Description

Outputs the enclosed style rules within browser-prefixed pseudo-element selectors for placeholder content. Includes:

  • webkit
  • moz (pseudo element and pseudo-class)
  • ms

Parameters

None.

position

@mixin position($top: false, $right: false, $bottom: false, $left: false) { ... }

Description

Shorthand for setting positioning offsets on specific sides of an element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$top

Top offset

Lengthfalse
$right

Right offset

Lengthfalse
$bottom

Bottom offset

Lengthfalse
$left

Left offset

Lengthfalse

Requires

position-full

@mixin position-full($offset: 0) { ... }

Description

Shorthand for absolute positioning an element to span all side of a container.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$offset

The desired offset to apply to all sides

Length0

Example

Basic usage

.sage-box {
  @include position-full(4px);
}

truncate

@mixin truncate() { ... }

Description

Truncates text of the given element to a single line.

Parameters

None.

Used by

visually-hidden

@mixin visually-hidden() { ... }

Description

Hides content from view, but allows text to stay visible to screen readers

Parameters

None.

target-safari

@mixin target-safari() { ... }

Description

Media Queries to target Safari browser

Parameters

None.