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),
  hover-large: 0 0 0 2px 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),
  advanced: unicode(ea11),
  ai-sparkle: unicode(ea02),
  ai-writer: unicode(e91d),
  ai-writer-filled: unicode(e9fb),
  align-center: unicode(e905),
  align-justify: unicode(e906),
  align-left: unicode(e907),
  align-right: unicode(e908),
  app-store: unicode(ea00),
  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),
  blog-filled: unicode(ea0f),
  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-gpay: unicode(e9fc),
  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),
  certificate: unicode(e9ec),
  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),
  cloud-upload: unicode(ea06),
  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),
  creator-studio: unicode(e9ed),
  creator-studio-filled: unicode(e9ee),
  credit-card: unicode(e949),
  cursor: unicode(ea12),
  cursor-pointer: unicode(ea13),
  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),
  drawer-collapse: unicode(ea14),
  drawer-expand: unicode(ea15),
  drop: unicode(e957),
  duplicate: unicode(e958),
  editor: unicode(e9ef),
  editor-filled: unicode(e9f0),
  email-activity: unicode(e959),
  emoji: unicode(e9f1),
  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),
  flash: unicode(ea07),
  flash-filled: unicode(ea08),
  folder: unicode(e963),
  folder-group: unicode(e964),
  form: unicode(e965),
  form-field: unicode(e966),
  form-filled: unicode(ea09),
  fullscreen: unicode(e967),
  funnel: unicode(e9ea),
  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),
  hd-video: unicode(ea0a),
  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),
  ios-battery: unicode(e9ff),
  ios-data: unicode(ea04),
  ios-wifi: unicode(ea05),
  italic: unicode(e97b),
  kajabi: unicode(e97c),
  kajabi-filled: unicode(e97d),
  klarna: unicode(ea16),
  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-afterpay: unicode(ea03),
  logo-facebook: unicode(e9e5),
  logo-facebook-round: unicode(e9f9),
  logo-instagram: unicode(e9e6),
  logo-linkedin: unicode(e9e7),
  logo-tiktok: unicode(e9e8),
  logo-twitter: unicode(e9e9),
  logo-youtube: unicode(e9fa),
  loop: unicode(e98a),
  mail: unicode(e98b),
  mail-filled: unicode(ea10),
  mail-open: unicode(ea17),
  map: unicode(ea0b),
  mapped: unicode(e98c),
  margin-left: unicode(e98d),
  margin-right: unicode(e98e),
  marker: unicode(e9f2),
  marker-filled: unicode(e9f3),
  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),
  newsletter-2: unicode(ea19),
  "null": "",
  one-off-session: unicode(e99d),
  one-time: unicode(e99e),
  package: unicode(e99f),
  pause: unicode(e9fe),
  pause-circle: unicode(e9a0),
  payout: unicode(e9a1),
  pen: unicode(e9a2),
  phone-portrait: unicode(e9a3),
  phone-toolbar: unicode(e9a4),
  phone-toolbar-filled: unicode(ea1a),
  play: unicode(e9a5),
  play-circle: unicode(e9a6),
  play-outline: unicode(e9a7),
  play-store: unicode(ea01),
  plug: unicode(e9a8),
  premium: unicode(ea0e),
  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),
  scissor: unicode(e9fd),
  screen-share-off: unicode(e9b9),
  screen-share-on: unicode(e9ba),
  search: unicode(e9bb),
  search-small: unicode(e9bc),
  send-message: unicode(e9bd),
  sequences: unicode(e9be),
  share: unicode(e9eb),
  skipped: unicode(e9bf),
  slash-divider: unicode(e9c0),
  speaker: unicode(e9c1),
  stack: unicode(e9c2),
  star: unicode(e9c3),
  stop: unicode(e9c4),
  stopwatch: unicode(e91c),
  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),
  text-styles: unicode(e9f4),
  theme-store: unicode(e9cf),
  theme-store-filled: unicode(ea0d),
  thumb-down: unicode(e9f5),
  thumb-down-filled: unicode(e9f6),
  thumb-up: unicode(e9f7),
  thumb-up-filled: unicode(e9f8),
  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),
  wrench: unicode(ea0c)
);

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-modal-sizes

$sage-modal-sizes: (
  xs: rem(343px),
  sm: rem(520px),
  md: rem(700px),
  lg: rem(900px)
);

Description

Sage modal sizes token

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-modal-size

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

Description

Sage modal sizes token utility

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The token to retrieve

Stringmd

Returns

Length

The value retrieved

Requires

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

We first convert the input to a unitless number, then divide by the base font size (default of 16) to obtain the equivalent ratio of rems. The resulting calculation is multiplied by 1rem to "attach" the unit.

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 See https://css-tricks.com/snippets/sass/strip-unit-function/

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

  • Kitty 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.