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),
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),
align-center: unicode(e905),
align-justify: unicode(e906),
align-left: unicode(e907),
align-right: unicode(e908),
archive: unicode(e909),
arrow-corner: unicode(e90a),
arrow-down: unicode(e90b),
arrow-left: unicode(e90c),
arrow-right: unicode(e90d),
arrow-up: unicode(e90e),
assessment: unicode(e90f),
at-sign: unicode(e910),
attach: unicode(e911),
automations: unicode(e912),
ban: unicode(e913),
bank: unicode(e914),
bell: unicode(e915),
blog: unicode(e916),
bold: unicode(e917),
broadcast: unicode(e918),
calendar-date: unicode(e919),
calendar-schedule: unicode(e91a),
calendar-simple: unicode(e91b),
card-amex: unicode(e91e),
card-android: unicode(e91f),
card-apple: unicode(e920),
card-diners: unicode(e921),
card-discover: unicode(e923),
card-generic: unicode(e922),
card-mastercard: unicode(e924),
card-paypal: unicode(e925),
card-stripe: unicode(e926),
card-update: unicode(e927),
card-visa: unicode(e928),
caret-down: unicode(e929),
caret-left: unicode(e92a),
caret-right: unicode(e92b),
caret-up: unicode(e92c),
cart: unicode(e92d),
cart-add: unicode(e92e),
certificate: unicode(e9ec),
chart: unicode(e92f),
chart-filled: unicode(e930),
check: unicode(e931),
check-circle: unicode(e932),
check-circle-filled: unicode(e933),
circle-1: unicode(e934),
circle-2: unicode(e935),
circle-3: unicode(e936),
circle-4: unicode(e937),
circle-5: unicode(e938),
circle-6: unicode(e939),
circle-7: unicode(e93a),
circle-8: unicode(e93b),
circle-9: unicode(e93c),
clock: unicode(e93d),
closed-captions: unicode(e93e),
code: unicode(e93f),
color: unicode(e940),
columns: unicode(e941),
comment: unicode(e942),
connect: unicode(e943),
contact: unicode(e944),
conversation: unicode(e945),
copy: unicode(e946),
coupon: unicode(e947),
course: unicode(e948),
creator-studio: unicode(e9ed),
creator-studio-filled: unicode(e9ee),
credit-card: unicode(e949),
custom-field: unicode(e94a),
customize: unicode(e94b),
danger: unicode(e94c),
danger-filled: unicode(e94d),
delete-circle: unicode(e94e),
delete-key: unicode(e94f),
delete-x: unicode(e950),
dollar: unicode(e951),
dot-menu-horizontal: unicode(e952),
down-small: unicode(e953),
download: unicode(e954),
downsell: unicode(e955),
draft: unicode(e956),
drop: unicode(e957),
duplicate: unicode(e958),
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),
folder: unicode(e963),
folder-group: unicode(e964),
form: unicode(e965),
form-field: unicode(e966),
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),
heading-large: unicode(e96f),
heading-small: unicode(e970),
headset: unicode(e971),
help: unicode(e972),
help-filled: unicode(e973),
home: unicode(e974),
home-alt: unicode(e975),
home-filled: unicode(e976),
horizontal-line: unicode(e977),
image: unicode(e978),
info-circle: unicode(e979),
info-circle-filled: unicode(e97a),
italic: unicode(e97b),
kajabi: unicode(e97c),
kajabi-filled: unicode(e97d),
lab: unicode(e97e),
launch: unicode(e97f),
layout-grid: unicode(e980),
layout-list: unicode(e981),
left-small: unicode(e982),
list-bullet: unicode(e983),
list-details: unicode(e984),
list-numbers: unicode(e985),
location: unicode(e987),
lock: unicode(e988),
lock-alt: unicode(e989),
logo-facebook: unicode(e9e5),
logo-instagram: unicode(e9e6),
logo-linkedin: unicode(e9e7),
logo-tiktok: unicode(e9e8),
logo-twitter: unicode(e9e9),
loop: unicode(e98a),
mail: unicode(e98b),
mapped: unicode(e98c),
margin-left: unicode(e98d),
margin-right: unicode(e98e),
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),
"null": "",
one-off-session: unicode(e99d),
one-time: unicode(e99e),
package: unicode(e99f),
pause: unicode(e9a0),
payout: unicode(e9a1),
pen: unicode(e9a2),
phone-portrait: unicode(e9a3),
phone-toolbar: unicode(e9a4),
play: unicode(e9a5),
play-circle: unicode(e9a6),
play-outline: unicode(e9a7),
plug: unicode(e9a8),
present: unicode(e9a9),
preview-off: unicode(e9aa),
preview-on: unicode(e9ab),
product: unicode(e9ac),
product-filled: unicode(e9ad),
question-circle: unicode(e9ae),
quote: unicode(e9af),
redo: unicode(e9b0),
refresh: unicode(e9b1),
remove: unicode(e9b2),
remove-circle: unicode(e9b3),
rename: unicode(e9b4),
reset-password: unicode(e9b5),
restore: unicode(e9b6),
right-small: unicode(e9b7),
round-dollar: unicode(e9b8),
rows: unicode(e986),
screen-share-off: unicode(e9b9),
screen-share-on: unicode(e9ba),
search: unicode(e9bb),
search-small: unicode(e9bc),
send-message: unicode(e9bd),
sequences: unicode(e9be),
share: unicode(e9eb),
skipped: unicode(e9bf),
slash-divider: unicode(e9c0),
speaker: unicode(e9c1),
stack: unicode(e9c2),
star: unicode(e9c3),
stop: unicode(e9c4),
strikethrough: unicode(e9c5),
subscript: unicode(e9c6),
subscriptions: unicode(e9c7),
super-admin: unicode(e9c8),
superscript: unicode(e9c9),
sync: unicode(e9ca),
tablet-landscape: unicode(e9cb),
tablet-portrait: unicode(e9cc),
tag: unicode(e9cd),
tag-filled: unicode(e9ce),
text-styles: unicode(e9f4),
theme-store: unicode(e9cf),
thumb-down: unicode(e9f5),
thumb-down-filled: unicode(e9f6),
thumb-up: unicode(e9f7),
thumb-up-filled: unicode(e9f8),
trash: unicode(e9d0),
underline: unicode(e9d1),
undo: unicode(e9d2),
unlock: unicode(e9d3),
unmapped: unicode(e9d4),
up-small: unicode(e9d5),
upload: unicode(e9d6),
url: unicode(e9d7),
user: unicode(e9d8),
user-circle: unicode(e9d9),
user-circle-filled: unicode(e9da),
user-star: unicode(e9db),
user-star-filled: unicode(e9dc),
users: unicode(e9dd),
users-alt: unicode(e9de),
video-off: unicode(e9df),
video-on: unicode(e9e0),
warning: unicode(e9e1),
warning-filled: unicode(e9e2),
window-paragraph: unicode(e9e3),
world: unicode(e9e4),
);
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-modal-sizes
$sage-modal-sizes: (
xs: rem(343px),
sm: rem(520px),
md: rem(700px),
lg: rem(900px)
);
Description
Sage modal sizes token
Used by
- [function]
sage-modal-size
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
Used by
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-grid-card-row
- [mixin]
sage-grid-card-row
- [mixin]
sage-grid-panel-row
- [mixin]
sage-grid-panel-row
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 | 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
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
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 | 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 | 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 ofauto
and1fr
depending on the morse code provided. For example, the pattern..--.
would returnauto auto 1fr 1fr auto
.dash-slots
- a list of the indeces for slots in the pattern occupied by dashes. For example, the pattern..--.
would return2 3
.dot-slots
- a list of the indeces for slots in the pattern occupied by dashes. For example, the pattern..--.
would return0 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
Outputs an error message if the value is not present, the value if provided, or null
if the value is unset
.
Throws
position() mixin requires all 4 position values (top, right, bottom, left): #{$key} is missing or invalid.
Used by
rem
@function rem($value) { ... }
Description
Converts an integer to a rem value based on 16 as the base size.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Length value, typically a | 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
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
Hugo 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.