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

[mixin] sage-tab-underline
[mixin] sage-tab-underline
[mixin] sage-tab-underline

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

[mixin] sage-form-field
[mixin] sage-tab-underline
[mixin] sage-tab-underline

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

[function] sage-border

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

[function] sage-border-interactive

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

[function] sage-breakpoint

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

[function] sage-color-combo
[function] sage-color-combo
[function] sage-color
[function] sage-color

sage-color-default-name

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

Description

Sage default color name for debug output.

Used by

[function] sage-color-combo
[function] sage-color

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

[function] sage-container

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

[function] sage-font-size

sage-font-weights

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

Description

Sage font weights token

Used by

[function] sage-font-weight

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

[function] sage-grid-template

See

[function] parse-morse-code

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

[function] sage-grid-gap-options

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

[mixin] sage-icon-base

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),
  add-square: unicode(e970),
  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),
  block: unicode(ea18),
  blog: unicode(e916),
  blog-filled: unicode(ea0f),
  bold: unicode(e917),
  broadcast: unicode(e918),
  button: unicode(ea1b),
  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),
  circle-dashed: unicode(ea26),
  clock: unicode(e93d),
  closed-captions: unicode(e93e),
  cloud-upload: unicode(ea06),
  code: unicode(e93f),
  code-block: unicode(ea1c),
  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),
  floppy-disk: unicode(ea1d),
  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-1: unicode(ea1e),
  heading-2: unicode(ea1f),
  heading-3: unicode(ea20),
  heading-4: unicode(ea21),
  heading-5: unicode(ea22),
  heading-6: unicode(ea23),
  heading-large: unicode(e96f),
  heading-small: unicode(ea24),
  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-twitter-x: unicode(ea29),
  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),
  rocket: unicode(ea27),
  rocket-filled: unicode(ea28),
  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-filled: unicode(ea25),
  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

[function] sage-icon

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

[function] sage-letter-spacing

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

[function] sage-line-height

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

[function] sage-shadow

sage-sidebars

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

Description

Sage sidebars token

Used by

[function] sage-sidebar

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

[function] sage-spacing

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

[function] sage-type-pairing

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

[mixin] sage-type-spec

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

key	value	notes
default	0	reset and parent for negative positioning
negative	-1
raised	1000	page widgets such as tooltips, dropdowns
alert	2000	raised priority on-page items: banners
underlay	3000	lower priority overlay, moved one level down from current position
nav	4000	uses underlay, not overlay
overlay	5000
modal	6000	this is typically the highest level needed
--	7000	reserved for future use
priority	8000
nuclear	9000	use with extreme caution

Used by

[function] sage-z-index

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 Name	parameter Description	parameter Type	parameter Default value
`$num`	Unitless number of baseline units	`Number`	`2`
`$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 Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`default`

Requires

[variable] sage-borders

Used by

[mixin] sage-copy-text
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-card
[mixin] sage-card
[mixin] sage-form-field
[mixin] sage-panel
[mixin] sage-panel

sage-border-interactive

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

Description

Sage border interactive token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`default`

Requires

[variable] sage-borders-interactive

Used by

[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field

sage-breakpoint

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

Description

Sage breakpoints token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`sm-max`

Requires

[variable] sage-breakpoints

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 Name	parameter Description	parameter Type	parameter Default value
`$color-key`	The color token to retrieve	`String`	`draft`
`$combo-set-key`	The color set to retrieve	`String`	`default`
`$color-type`	The detail of the set to retrieve	`String`	`foreground`

Returns

Color —

The value retrieved

Requires

[function] sd-sage-color-combos
[function] sd-sage-color-combos
[variable] sage-color-default-name
[variable] sage-color-default
[variable] sage-color-default

sage-color

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

Description

Sage breakpoints token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$base`	the color token to retrieve	`String`	— none
`$value`	the tint or shade to retrieve	`Number`	`300`

Returns

Color —

the value retrieved

Requires

[function] sd-sage-color
[function] sd-sage-color
[variable] sage-color-default-name
[variable] sage-color-default
[variable] sage-color-default

Used by

[mixin] sage-copy-text
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field
[mixin] sage-form-field-message
[mixin] sage-form-field-message
[mixin] sage-panel

sage-container

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

Description

Sage containers token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`md`

Returns

Length —

The value retrieved

Requires

[variable] sage-containers

sage-font-size

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

Description

Sage font size token utility (responsive)

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`body`
`$responsive`	Whether or not retrieve a responsive css custom property or a flat value	`Bool`	`true`

Returns

Length} —

The value retrieved

Requires

[variable] sage-font-sizes

Used by

[mixin] sage-type-pairing

sage-font-weight

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

Description

Sage font weight token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`regular`

Returns

Number —

The value retrieved

Requires

[variable] sage-font-weights

sage-grid-template

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

Description

Sage grid templates token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`md`

Returns

Map —

The value retrieved.

Requires

[variable] sage-grid-templates

sage-grid-gap-options

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

Description

Sage grid gap token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`md`

Returns

Length —

The value retrieved

Requires

[variable] sage-grid-gap-options

sage-icon

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

Description

Sage icon token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$icon-name`	The token to retrieve	`String`	— none

Returns

String —

The value retrieved

Requires

[variable] sage-icons

Used by

[mixin] sage-icon-base

sage-letter-spacing

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

Description

Sage letter spacing token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`sm`

Returns

Length —

The value retrieved

Requires

[variable] sage-letter-spacings

sage-line-height

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

Description

Sage line height token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter 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.	`String`	`body`
`$responsive`	Whether or not retrieve a responsive css custom property (based on type specs) or a flat value (based on line-height tokens).	`Bool`	`true`

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

[variable] sage-line-heights

Used by

[mixin] sage-type-pairing

sage-modal-size

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

Description

Sage modal sizes token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`md`

Returns

Length —

The value retrieved

Requires

[variable] sage-modal-sizes

sage-shadow

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

Description

Sage shadow token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`md`

Returns

Any type —

The value retrieved

Requires

[variable] sage-shadows

sage-sidebar

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

Description

Sage sidebar token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`sm`

Returns

Length —

The value retrieved

Requires

[variable] sage-sidebars

sage-spacing

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

Description

Sage spacing token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`md`

Returns

Length —

The value retrieved

Requires

[variable] sage-spacings

Used by

[mixin] sage-copy-text
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-card
[mixin] sage-card
[mixin] sage-grid-card
[mixin] sage-grid-stack
[mixin] sage-grid-panel
[mixin] sage-grid-card-row
[mixin] sage-grid-panel-row
[mixin] sage-form-field-group
[mixin] sage-form-field
[mixin] sage-form-field-message
[mixin] sage-form-field-message
[mixin] sage-form-toggle
[mixin] sage-panel

sage-type-pairing

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

Description

Sage Type Pairing token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`default`

Requires

[variable] sage-type-pairings

Used by

[mixin] sage-type-pairing

sage-z-index

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

Description

Sage z-index token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	`default`
`$increment`	An amount to add onto the retrieved value	`Number`	`0`

Returns

Number —

The value retrieved

Requires

[variable] sage-z-indexes

Used by

[mixin] sage-focus-ring
[mixin] sage-focus-outline
[mixin] sage-form-field-floating-label

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 Name	parameter Description	parameter Type	parameter 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

[mixin] truncate
[function] rem
[function] sage-spacing
[function] sage-color
[function] sage-border

sage-button-icon-generator

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

Description

Generates icon variations for buttons

Parameters

parameter Name	parameter Description	parameter Type	parameter 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

[mixin] sage-icon-base
[mixin] sage-icon-base
[mixin] sage-icon-base
[function] sage-spacing
[function] sage-spacing
[function] sage-spacing
[function] sage-spacing
[function] sage-border
[function] rem
[function] rem
[function] rem
[function] rem
[function] rem
[function] sage-border
[function] rem
[function] sage-breakpoint
[function] sage-spacing
[function] rem
[function] sage-spacing
[function] rem
[function] rem
[function] sage-spacing
[function] sage-spacing
[function] sage-spacing
[function] rem
[function] sage-spacing
[function] sage-spacing
[function] sage-breakpoint
[function] rem
[function] rem
[function] rem
[function] rem

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 Name	parameter Description	parameter Type	parameter Default value
`$focus-width`	Thickness of the focus ring itself	`Length`	`4px`
`$focus-shadow`	Hex color to be used for the background-color	`Length`	`#8ECAFB`
`$focus-animation-speed`	How quickly the focus ring animates on activation	`Time`	`0.2s`

Requires

[function] sage-z-index

Used by

[mixin] sage-form-field

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 Name	parameter Description	parameter Type	parameter Default value
`$outline-width`	Thickness of the focus ring itself	`Length`	`2px`
`$outline-offset-block`	How far the focus ring is offset from the object on the y axis (block)	`Length`	`4px`
`$outline-offset-inline`	How far the focus ring is offset from the object on the x axis (inline)	`Length`	`4px`
`$outline-animation-speed`	How quickly the focus ring animates on activation	`Time`	`0.2s`

Requires

[function] sage-z-index

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 Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter 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

[mixin] sage-grid-card
[function] sage-spacing
[function] sage-spacing
[function] sage-border
[function] sage-border

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 Name	parameter Description	parameter Type	parameter Default value
`$thickness`	unitless number for thickness of the stroke	`Number`	`1`
`$color`	hex color to be used for the stroke color	`Color`	`sage-color(grey, 500)`
`$dash`	unitless number for the size of a dash	`Number`	`4.5`
`$gap`	unitless number for the size of a gap between dashes	`Number`	`4.5`
`$offset`	unitless number for the initial offset for the starting point of the dash; typically matches a dash size	`Number`	`4.5`
`$border-radius`	unitless number for the border radius of the shape	`Number`	`4`

Requires

[function] str-replace

sage-grid-card

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

Description

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

Parameters

None.

Requires

[function] sage-spacing

Used by

[mixin] sage-card

sage-grid-stack

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

Description

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

Parameters

None.

Requires

[function] sage-spacing

sage-grid-panel

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

Description

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

Parameters

None.

Requires

[function] sage-spacing

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

[function] sage-spacing
[function] sage-breakpoint
[function] sage-breakpoint

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

[function] sage-spacing
[function] sage-breakpoint
[function] sage-breakpoint

sage-form-field-group

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

Description

Adds the basic default form spacing, and border treatment

Parameters

None.

Requires

[function] sage-spacing

sage-form-field

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

Description

Adds the basic default form spacing, and border treatment

Parameters

None.

Requires

[mixin] sage-focus-ring
[function] sage-spacing
[function] sage-color
[function] sage-border-interactive
[function] sage-border
[function] sage-color
[function] sage-color
[function] sage-color
[function] sage-border-interactive
[function] sage-border-interactive
[function] sage-color
[function] sage-color
[function] sage-border-interactive
[function] sage-color
[function] sage-color
[function] sage-border-interactive
[function] sage-color
[function] sage-border-interactive
[variable] sage-transitions

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

[function] rem
[function] rem

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

[function] sage-z-index

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

[mixin] sage-icon-base
[function] sage-spacing
[function] sage-color
[function] sage-color
[function] rem
[function] sage-spacing

sage-form-toggle

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

Description

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

Parameters

None.

Requires

[function] sage-spacing

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 Name	parameter Description	parameter Type	parameter Default value
`$icon`	The alias from the icon library for the icon to use	`String` or `Null`	`null`
`$icon`	The code for the desired spacing size from the `sage-icon-sizes` token	`String`	`md`

Requires

[function] sage-icon
[variable] sage-icon-sizes

Used by

[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-form-field-message

sage-panel

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

Description

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

Parameters

None.

Requires

[function] sage-spacing
[function] sage-color
[function] sage-border
[function] sage-border

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 Name	parameter Description	parameter Type	parameter Default value
`$active-class`	class for an active state on the elememnt	`String`	`".sage-tab--active"`

Requires

[variable] sage-active-underline-configs
[variable] sage-active-underline-configs
[variable] sage-active-underline-configs
[variable] sage-transitions
[variable] sage-transitions

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 Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter 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`.	`String`	`body`
`$responsive`	Whether or not to use the responsive css custom properties for the provided pairing.	`Bool`	`false`

Requires

[function] sage-font-size
[function] sage-line-height
[function] sage-type-pairing

Used by

[mixin] sage-type-spec

sage-type-spec

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

Description

Implements a type spec as CSS properties.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$spec-name`	Name of the type spec to set up	`String`	— none

Requires

[mixin] sage-type-pairing
[variable] sage-type-specs

Used by

[placeholder] t-sage-

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

[mixin] sage-type-spec

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

[function] sd-sage-color

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

[function] sd-sage-color-combos

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

[function] sd-sage-color-core

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

[function] sd-sage-color-custom

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

[function] sd-sage-content-grid-template

functions

sd-sage-color

@function sd-sage-color($key, $subkey, $subsubkey) { ... }

Description

Sage color base token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter 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

[variable] sd-sage-color

Used by

[function] sage-color
[function] sage-color

sd-sage-color-combos

@function sd-sage-color-combos($key, $subkey, $subsubkey) { ... }

Description

Sage color combos token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter 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

[variable] sd-sage-color-combos

Used by

[function] sage-color-combo
[function] sage-color-combo

sd-sage-color-core

@function sd-sage-color-core($key) { ... }

Description

Sage color core token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	— none

Requires

[variable] sd-sage-color-core

sd-sage-color-custom

@function sd-sage-color-custom($key) { ... }

Description

Sage color custom token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	— none

Requires

[variable] sd-sage-color-custom

sd-sage-content-grid-template

@function sd-sage-content-grid-template($key, $subkey) { ... }

Description

Sage content grid-template token utility

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	The token to retrieve	`String`	— none
`$subkey`	The subtoken to retrieve	`String`	— none

Requires

[variable] sd-sage-content-grid-template

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 Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter 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

[mixin] position
[mixin] position
[mixin] position
[mixin] position

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 Name	parameter Description	parameter Type	parameter 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

[function] strip-unit
[variable] sage-use-rem-conversion

Used by

[mixin] sage-copy-text
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-button-icon-generator
[mixin] sage-form-field-icon
[mixin] sage-form-field-icon
[mixin] sage-form-field-message

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 Name	parameter Description	parameter Type	parameter Default value
`$number`	Length from which to strip a unit	`Length`	— none

Returns

Number —

Unitless number

Used by

[function] rem

str-replace

@function str-replace($string, $search, $replace) { ... }

Description

Replace $search with $replace in $string

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Initial string	`String`	— none
`$search`	Substring to replace	`String`	— none
`$replace`	('') - New value	`String`	— none

Returns

String —

Updated string

Used by

[mixin] sage-dashed-border

Author

Kitty Giraudel

unicode

@function unicode($str) { ... }

Description

Converts a string to unicode

Parameters

parameter Name	parameter Description	parameter Type	parameter 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

[function] rem

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 Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter Default value
`$top`	Top offset	`Length`	`false`
`$right`	Right offset	`Length`	`false`
`$bottom`	Bottom offset	`Length`	`false`
`$left`	Left offset	`Length`	`false`

Requires

[function] position-print-value
[function] position-print-value
[function] position-print-value
[function] position-print-value

position-full

@mixin position-full($offset: 0) { ... }

Description

Shorthand for absolute positioning an element to span all side of a container.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$offset`	The desired offset to apply to all sides	`Length`	`0`

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

[mixin] sage-copy-text

target-safari

@mixin target-safari() { ... }

Description

Media Queries to target Safari browser

Parameters

None.