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(mercury, 500),
);
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, 300),
default: sage-color(grey, 800),
disabled: sage-color(grey, 500),
disabled-background: sage-color(grey, 150),
error: sage-color(red, 500),
label-background: sage-color(white),
success: sage-color(primary, 300),
);
Description
Field coloring
sage-radio-colors
$sage-radio-colors: (
checked: sage-color(grey, 900),
checked-disabled: sage-color(grey, 200),
checked-hover: sage-color(grey, 950),
checked-inner: sage-color(white),
default: sage-color(grey, 300),
disabled: sage-color(grey, 150),
error: sage-color(red, 500),
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(grey, 800),
active: sage-color(grey, 900),
disabled: sage-color(grey, 600),
);
Description
Tab colors shared by components such as tabs and choices
sage-text-colors
$sage-text-colors: (
body: sage-color(grey, 900),
heading: sage-color(grey, 950),
);
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 2px sage-color(purple, 300),
hover: 0 0 0 1px sage-color(charcoal, 100),
hover-large: 0 0 0 2px sage-color(charcoal, 100),
active-hover: 0 0 0 4px sage-color(primary, 200),
);
Description
Toolbar border styles
sage-transitions
$sage-transitions: (
default: 0.1s ease-in-out,
input: 0.2s ease-in-out
);
Description
Transitions
Used by
- [mixin]
sage-form-field
- [mixin]
sage-tab-underline
- [mixin]
sage-tab-underline
sage-baseline
$sage-baseline: rem(4px);
Description
Default baseline for the system
sage-borders
$sage-borders: (
default: rem(1px) solid sage-color(grey, 200),
error: rem(1px) solid sage-color(red, 500),
interactive: rem(1px) solid sage-color(grey, 300),
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, 300),
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(grey, 900),
error: 0 0 0 1px sage-color(red, 500),
error-focus: 0 0 0 4px sage-color(red, 500),
disabled: 0 0 0 1px sage-color(grey, 200),
);
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(12px),
md: rem(14px),
lg: rem(16px),
xl: rem(18px),
2xl: rem(20px),
3xl: rem(22px),
4xl: rem(26px),
5xl: rem(28px)
);
Description
Sage raw font sizes token (non-responsive)
Sage allows for responsive typography which use these raw font sizes as the source of truth for its possible sizes. See core/_typography.scss for where these are primarily implemented.
Used by
- [function]
sage-font-size
sage-font-weights
$sage-font-weights: (
regular: 400,
medium: 500,
semibold: 600,
bold: 700
);
Description
Sage font weights token
Used by
- [function]
sage-font-weight
sage-grid-templates
$sage-grid-templates: ();
Description
Stores a full map of grid configurationsfrom Style Dictionary. See style-dictionary/tokens/content/grid-template.json
. Result is a map of codes.
Used by
- [function]
sage-grid-template
See
- [function]
parse-morse-code
sage-grid-gap-options
$sage-grid-gap-options: (
// Generic sizes
xs: rem(8px),
sm: rem(16px),
md: rem(24px),
lg: rem(32px),
);
Description
Sage grid gap options token
Used by
- [function]
sage-grid-gap-options
sage-icon-sizes
$sage-icon-sizes: (
xs: rem(8px),
sm: rem(12px),
md: rem(16px),
lg: rem(20px),
xl: rem(24px),
2xl: rem(28px),
3xl: rem(32px),
4xl: rem(36px),
);
Description
Sage icon sizes
Used by
- [mixin]
sage-icon-base
sage-icon-background-sizes
$sage-icon-background-sizes: (
xs: rem(30px),
sm: rem(40px),
md: rem(50px),
lg: rem(60px),
xl: rem(70px),
2xl: rem(80px),
3xl: rem(90px),
4xl: rem(100px),
);
Description
Sage icon Background sizes
sage-icons
$sage-icons: (
// Primary/active list
access-key: unicode(e900),
add: unicode(e901),
add-circle: unicode(e902),
add-image: unicode(e903),
add-small: unicode(e904),
add-square: unicode(e970),
advanced: unicode(ea11),
ai-sparkle: unicode(ea02),
ai-writer: unicode(e91d),
ai-writer-filled: unicode(e9fb),
align-center: unicode(e905),
align-justify: unicode(e906),
align-left: unicode(e907),
align-right: unicode(e908),
app-store: unicode(ea00),
archive: unicode(e909),
arrow-corner: unicode(e90a),
arrow-down: unicode(e90b),
arrow-left: unicode(e90c),
arrow-right: unicode(e90d),
arrow-up: unicode(e90e),
assessment: unicode(e90f),
at-sign: unicode(e910),
attach: unicode(e911),
automations: unicode(e912),
ban: unicode(e913),
bank: unicode(e914),
bell: unicode(e915),
block: unicode(ea18),
blog: unicode(e916),
blog-filled: unicode(ea0f),
bold: unicode(e917),
broadcast: unicode(e918),
button: unicode(ea1b),
calendar-date: unicode(e919),
calendar-schedule: unicode(e91a),
calendar-simple: unicode(e91b),
card-amex: unicode(e91e),
card-android: unicode(e91f),
card-apple: unicode(e920),
card-diners: unicode(e921),
card-discover: unicode(e923),
card-generic: unicode(e922),
card-gpay: unicode(e9fc),
card-mastercard: unicode(e924),
card-paypal: unicode(e925),
card-stripe: unicode(e926),
card-update: unicode(e927),
card-visa: unicode(e928),
caret-down: unicode(e929),
caret-left: unicode(e92a),
caret-right: unicode(e92b),
caret-up: unicode(e92c),
cart: unicode(e92d),
cart-add: unicode(e92e),
certificate: unicode(e9ec),
chart: unicode(e92f),
chart-filled: unicode(e930),
check: unicode(e931),
check-circle: unicode(e932),
check-circle-filled: unicode(e933),
circle-1: unicode(e934),
circle-2: unicode(e935),
circle-3: unicode(e936),
circle-4: unicode(e937),
circle-5: unicode(e938),
circle-6: unicode(e939),
circle-7: unicode(e93a),
circle-8: unicode(e93b),
circle-9: unicode(e93c),
circle-dashed: unicode(ea26),
clock: unicode(e93d),
closed-captions: unicode(e93e),
cloud-upload: unicode(ea06),
code: unicode(e93f),
code-block: unicode(ea1c),
color: unicode(e940),
columns: unicode(e941),
comment: unicode(e942),
comment-no: unicode(ea2a),
connect: unicode(e943),
contact: unicode(e944),
conversation: unicode(e945),
copy: unicode(e946),
coupon: unicode(e947),
course: unicode(e948),
creator-studio: unicode(e9ed),
creator-studio-filled: unicode(e9ee),
credit-card: unicode(e949),
cursor: unicode(ea12),
cursor-pointer: unicode(ea13),
custom-field: unicode(e94a),
customize: unicode(e94b),
danger: unicode(e94c),
danger-filled: unicode(e94d),
delete-circle: unicode(e94e),
delete-key: unicode(e94f),
delete-x: unicode(e950),
dollar: unicode(e951),
dot-menu-horizontal: unicode(e952),
down-small: unicode(e953),
download: unicode(e954),
downsell: unicode(e955),
draft: unicode(e956),
drawer-collapse: unicode(ea14),
drawer-expand: unicode(ea15),
drop: unicode(e957),
duplicate: unicode(e958),
editor: unicode(e9ef),
editor-filled: unicode(e9f0),
email-activity: unicode(e959),
emoji: unicode(e9f1),
enlarge: unicode(e95a),
enlarge-vertical: unicode(e95b),
expand: unicode(e95c),
favorite: unicode(e95d),
feedback: unicode(e95e),
file: unicode(e95f),
file-money: unicode(e960),
filter: unicode(e961),
flag: unicode(e962),
flash: unicode(ea07),
flash-filled: unicode(ea08),
floppy-disk: unicode(ea1d),
folder: unicode(e963),
folder-group: unicode(e964),
form: unicode(e965),
form-field: unicode(e966),
form-filled: unicode(ea09),
fullscreen: unicode(e967),
funnel: unicode(e9ea),
gear: unicode(e968),
gear-filled: unicode(e969),
grant-offer: unicode(e96a),
handle: unicode(e96b),
handle-2: unicode(e96c),
handle-2-vertical: unicode(e96d),
hashtag: unicode(e96e),
hd-video: unicode(ea0a),
heading-1: unicode(ea1e),
heading-2: unicode(ea1f),
heading-3: unicode(ea20),
heading-4: unicode(ea21),
heading-5: unicode(ea22),
heading-6: unicode(ea23),
heading-large: unicode(e96f),
heading-small: unicode(ea24),
headset: unicode(e971),
help: unicode(e972),
help-filled: unicode(e973),
home: unicode(e974),
home-alt: unicode(e975),
home-filled: unicode(e976),
horizontal-line: unicode(e977),
image: unicode(e978),
info-circle: unicode(e979),
info-circle-filled: unicode(e97a),
ios-battery: unicode(e9ff),
ios-data: unicode(ea04),
ios-wifi: unicode(ea05),
italic: unicode(e97b),
kajabi: unicode(e97c),
kajabi-filled: unicode(e97d),
klarna: unicode(ea16),
lab: unicode(e97e),
launch: unicode(e97f),
layout-grid: unicode(e980),
layout-list: unicode(e981),
left-small: unicode(e982),
list-bullet: unicode(e983),
list-details: unicode(e984),
list-numbers: unicode(e985),
location: unicode(e987),
lock: unicode(e988),
lock-alt: unicode(e989),
logo-afterpay: unicode(ea03),
logo-facebook: unicode(e9e5),
logo-facebook-round: unicode(e9f9),
logo-instagram: unicode(e9e6),
logo-linkedin: unicode(e9e7),
logo-tiktok: unicode(e9e8),
logo-twitter: unicode(e9e9),
logo-twitter-x: unicode(ea29),
logo-youtube: unicode(e9fa),
loop: unicode(e98a),
mail: unicode(e98b),
mail-filled: unicode(ea10),
mail-open: unicode(ea17),
map: unicode(ea0b),
mapped: unicode(e98c),
margin-left: unicode(e98d),
margin-right: unicode(e98e),
marker: unicode(e9f2),
marker-filled: unicode(e9f3),
megaphone: unicode(e98f),
megaphone-filled: unicode(e990),
menu: unicode(e991),
menu-alt: unicode(e992),
menu-bordered: unicode(e993),
merge: unicode(e994),
microphone: unicode(e995),
microphone-off: unicode(e996),
monitor: unicode(e997),
monitor-filled: unicode(e998),
more-menu: unicode(ea2b),
more-menu-filled: unicode(ea2c),
move-left: unicode(e999),
move-right: unicode(e99a),
multi-pay: unicode(e99b),
newsletter: unicode(e99c),
newsletter-2: unicode(ea19),
"null": "",
one-off-session: unicode(e99d),
one-time: unicode(e99e),
package: unicode(e99f),
pause: unicode(e9fe),
pause-circle: unicode(e9a0),
payout: unicode(e9a1),
pen: unicode(e9a2),
phone-portrait: unicode(e9a3),
phone-toolbar: unicode(e9a4),
phone-toolbar-filled: unicode(ea1a),
play: unicode(e9a5),
play-circle: unicode(e9a6),
play-outline: unicode(e9a7),
play-store: unicode(ea01),
plug: unicode(e9a8),
premium: unicode(ea0e),
present: unicode(e9a9),
preview-off: unicode(e9aa),
preview-on: unicode(e9ab),
product: unicode(e9ac),
product-filled: unicode(e9ad),
question-circle: unicode(e9ae),
quote: unicode(e9af),
redo: unicode(e9b0),
refresh: unicode(e9b1),
remove: unicode(e9b2),
remove-circle: unicode(e9b3),
rename: unicode(e9b4),
reset-password: unicode(e9b5),
restore: unicode(e9b6),
right-small: unicode(e9b7),
rocket: unicode(ea27),
rocket-filled: unicode(ea28),
round-dollar: unicode(e9b8),
rows: unicode(e986),
scissor: unicode(e9fd),
screen-share-off: unicode(e9b9),
screen-share-on: unicode(e9ba),
search: unicode(e9bb),
search-small: unicode(e9bc),
send-message: unicode(e9bd),
sequences: unicode(e9be),
share: unicode(e9eb),
skipped: unicode(e9bf),
slash-divider: unicode(e9c0),
speaker: unicode(e9c1),
stack: unicode(e9c2),
star: unicode(e9c3),
stop: unicode(e9c4),
stopwatch: unicode(e91c),
strikethrough: unicode(e9c5),
subscript: unicode(e9c6),
subscriptions: unicode(e9c7),
super-admin: unicode(e9c8),
superscript: unicode(e9c9),
sync: unicode(e9ca),
tablet-landscape: unicode(e9cb),
tablet-portrait: unicode(e9cc),
tag: unicode(e9cd),
tag-filled: unicode(e9ce),
text-styles: unicode(e9f4),
theme-store: unicode(e9cf),
theme-store-filled: unicode(ea0d),
thumb-down: unicode(e9f5),
thumb-down-filled: unicode(e9f6),
thumb-up: unicode(e9f7),
thumb-up-filled: unicode(e9f8),
trash: unicode(e9d0),
underline: unicode(e9d1),
undo: unicode(e9d2),
unlock: unicode(e9d3),
unmapped: unicode(e9d4),
up-small: unicode(e9d5),
upload: unicode(e9d6),
url: unicode(e9d7),
user: unicode(e9d8),
user-circle: unicode(e9d9),
user-circle-filled: unicode(e9da),
user-filled: unicode(ea25),
user-star: unicode(e9db),
user-star-filled: unicode(e9dc),
users: unicode(e9dd),
users-alt: unicode(e9de),
video-off: unicode(e9df),
video-on: unicode(e9e0),
warning: unicode(e9e1),
warning-filled: unicode(e9e2),
window-paragraph: unicode(e9e3),
world: unicode(e9e4),
wrench: unicode(ea0c)
);
Description
Sage icons
Used by
- [function]
sage-icon
sage-letter-spacings
$sage-letter-spacings: (
xs: rem(0),
sm: rem(0),
md: rem(-0.16px),
lg: rem(0.16px),
xl: rem(0.18px),
2xl: rem(0.2px),
3xl: rem(0.22px),
4xl: rem(0.24px),
5xl: rem(0.26px),
);
Description
Sage letter spacing/kerning token
Used by
- [function]
sage-letter-spacing
sage-line-heights
$sage-line-heights: (
xs: rem(18px),
sm: rem(18px),
md: rem(20px),
lg: rem(20px),
xl: rem(22px),
2xl: rem(26px),
3xl: rem(28px),
4xl: rem(32px),
5xl: rem(36px),
);
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 1px 2px rgba(sage-color(grey, 950), 0.06), 0 1px 3px rgba(sage-color(grey, 950), 0.1)),
md: (0 4px 6px -2px rgba(sage-color(grey, 950), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 950), 0.08)),
lg: (0 24px 48px -12px rgba(sage-color(grey, 950), 0.18)),
modal: (0 32px 64px -12px rgba(sage-color(grey, 950), 0.24)),
050: (0 1px 2px 0 rgba(sage-color(grey, 950), 0.05)),
100: (0 1px 3px 0 rgba(sage-color(grey, 950), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 950), 0.06)),
150: (0 4px 8px -2px rgba(sage-color(grey, 950), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 950), 0.06)),
200: (0 12px 16px -4px rgba(sage-color(grey, 950), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 950), 0.03)),
300: (0 20px 24px -4px rgba(sage-color(grey, 950), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 950), 0.03)),
400: (0 24px 48px -12px rgba(sage-color(grey, 950), 0.18)),
500: (0 32px 64px -12px rgba(sage-color(grey, 950), 0.14)),
);
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(5xl),
responsive: true,
type-pairing: h1,
weight: sage-font-weight(semibold),
),
"heading-2": (
kerning: sage-letter-spacing(4xl),
responsive: true,
type-pairing: h2,
weight: sage-font-weight(semibold),
),
"heading-3": (
kerning: sage-letter-spacing(3xl),
responsive: true,
type-pairing: h3,
weight: sage-font-weight(semibold),
),
"heading-4": (
kerning: sage-letter-spacing(2xl),
responsive: true,
type-pairing: h4,
weight: sage-font-weight(semibold),
),
"heading-5": (
kerning: sage-letter-spacing(xl),
responsive: true,
type-pairing: h5,
weight: sage-font-weight(medium),
),
"heading-6": (
kerning: sage-letter-spacing(lg),
responsive: true,
type-pairing: h6,
weight: sage-font-weight(medium),
),
"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-form-field
- [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
Used by
- [mixin]
sage-tab-underline
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
Used by
- [mixin]
sage-panel
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
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-shadow
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
- [function]
sage-letter-spacing
- [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-blue-100-hex
$sd-sage-color-base-blue-100-hex: #eff6ff;
Description
color color-base-blue-100-hex
sd-sage-color-base-blue-100-code
$sd-sage-color-base-blue-100-code: "blue-100";
Description
color color-base-blue-100-code
sd-sage-color-base-blue-100-classname
$sd-sage-color-base-blue-100-classname: "t-sage--color-blue-100";
Description
color color-base-blue-100-classname
sd-sage-color-base-blue-150-hex
$sd-sage-color-base-blue-150-hex: #dbe9fe;
Description
color color-base-blue-150-hex
sd-sage-color-base-blue-150-code
$sd-sage-color-base-blue-150-code: "blue-150";
Description
color color-base-blue-150-code
sd-sage-color-base-blue-150-classname
$sd-sage-color-base-blue-150-classname: "t-sage--color-blue-150";
Description
color color-base-blue-150-classname
sd-sage-color-base-blue-200-hex
$sd-sage-color-base-blue-200-hex: #bfdbfe;
Description
color color-base-blue-200-hex
sd-sage-color-base-blue-200-code
$sd-sage-color-base-blue-200-code: "blue-200";
Description
color color-base-blue-200-code
sd-sage-color-base-blue-200-classname
$sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200";
Description
color color-base-blue-200-classname
sd-sage-color-base-blue-300-hex
$sd-sage-color-base-blue-300-hex: #92c5fd;
Description
color color-base-blue-300-hex
sd-sage-color-base-blue-300-code
$sd-sage-color-base-blue-300-code: "blue-300";
Description
color color-base-blue-300-code
sd-sage-color-base-blue-300-classname
$sd-sage-color-base-blue-300-classname: "t-sage--color-blue-300";
Description
color color-base-blue-300-classname
sd-sage-color-base-blue-400-hex
$sd-sage-color-base-blue-400-hex: #60a5fa;
Description
color color-base-blue-400-hex
sd-sage-color-base-blue-400-code
$sd-sage-color-base-blue-400-code: "blue-400";
Description
color color-base-blue-400-code
sd-sage-color-base-blue-400-classname
$sd-sage-color-base-blue-400-classname: "t-sage--color-blue-400";
Description
color color-base-blue-400-classname
sd-sage-color-base-blue-500-hex
$sd-sage-color-base-blue-500-hex: #3c82f6;
Description
color color-base-blue-500-hex
sd-sage-color-base-blue-500-code
$sd-sage-color-base-blue-500-code: "blue-500";
Description
color color-base-blue-500-code
sd-sage-color-base-blue-500-classname
$sd-sage-color-base-blue-500-classname: "t-sage--color-blue-500";
Description
color color-base-blue-500-classname
sd-sage-color-base-blue-600-hex
$sd-sage-color-base-blue-600-hex: #2463eb;
Description
color color-base-blue-600-hex
sd-sage-color-base-blue-600-code
$sd-sage-color-base-blue-600-code: "blue-600";
Description
color color-base-blue-600-code
sd-sage-color-base-blue-600-classname
$sd-sage-color-base-blue-600-classname: "t-sage--color-blue-600";
Description
color color-base-blue-600-classname
sd-sage-color-base-blue-700-hex
$sd-sage-color-base-blue-700-hex: #1c4ed8;
Description
color color-base-blue-700-hex
sd-sage-color-base-blue-700-code
$sd-sage-color-base-blue-700-code: "blue-700";
Description
color color-base-blue-700-code
sd-sage-color-base-blue-700-classname
$sd-sage-color-base-blue-700-classname: "t-sage--color-blue-700";
Description
color color-base-blue-700-classname
sd-sage-color-base-blue-800-hex
$sd-sage-color-base-blue-800-hex: #1d40ae;
Description
color color-base-blue-800-hex
sd-sage-color-base-blue-800-code
$sd-sage-color-base-blue-800-code: "blue-800";
Description
color color-base-blue-800-code
sd-sage-color-base-blue-800-classname
$sd-sage-color-base-blue-800-classname: "t-sage--color-blue-800";
Description
color color-base-blue-800-classname
sd-sage-color-base-blue-900-hex
$sd-sage-color-base-blue-900-hex: #1f3a8a;
Description
color color-base-blue-900-hex
sd-sage-color-base-blue-900-code
$sd-sage-color-base-blue-900-code: "blue-900";
Description
color color-base-blue-900-code
sd-sage-color-base-blue-900-classname
$sd-sage-color-base-blue-900-classname: "t-sage--color-blue-900";
Description
color color-base-blue-900-classname
sd-sage-color-base-blue-950-hex
$sd-sage-color-base-blue-950-hex: #172554;
Description
color color-base-blue-950-hex
sd-sage-color-base-blue-950-code
$sd-sage-color-base-blue-950-code: "blue-950";
Description
color color-base-blue-950-code
sd-sage-color-base-blue-950-classname
$sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950";
Description
color color-base-blue-950-classname
sd-sage-color-base-blue-050-hex
$sd-sage-color-base-blue-050-hex: #fafcff;
Description
color color-base-blue-050-hex
sd-sage-color-base-blue-050-code
$sd-sage-color-base-blue-050-code: "blue-050";
Description
color color-base-blue-050-code
sd-sage-color-base-blue-050-classname
$sd-sage-color-base-blue-050-classname: "t-sage--color-blue-050";
Description
color color-base-blue-050-classname
sd-sage-color-base-green-100-hex
$sd-sage-color-base-green-100-hex: #edfcf2;
Description
color color-base-green-100-hex
sd-sage-color-base-green-100-code
$sd-sage-color-base-green-100-code: "green-100";
Description
color color-base-green-100-code
sd-sage-color-base-green-100-classname
$sd-sage-color-base-green-100-classname: "t-sage--color-green-100";
Description
color color-base-green-100-classname
sd-sage-color-base-green-150-hex
$sd-sage-color-base-green-150-hex: #d3f8df;
Description
color color-base-green-150-hex
sd-sage-color-base-green-150-code
$sd-sage-color-base-green-150-code: "green-150";
Description
color color-base-green-150-code
sd-sage-color-base-green-150-classname
$sd-sage-color-base-green-150-classname: "t-sage--color-green-150";
Description
color color-base-green-150-classname
sd-sage-color-base-green-200-hex
$sd-sage-color-base-green-200-hex: #aaf0c4;
Description
color color-base-green-200-hex
sd-sage-color-base-green-200-code
$sd-sage-color-base-green-200-code: "green-200";
Description
color color-base-green-200-code
sd-sage-color-base-green-200-classname
$sd-sage-color-base-green-200-classname: "t-sage--color-green-200";
Description
color color-base-green-200-classname
sd-sage-color-base-green-300-hex
$sd-sage-color-base-green-300-hex: #73e2a3;
Description
color color-base-green-300-hex
sd-sage-color-base-green-300-code
$sd-sage-color-base-green-300-code: "green-300";
Description
color color-base-green-300-code
sd-sage-color-base-green-300-classname
$sd-sage-color-base-green-300-classname: "t-sage--color-green-300";
Description
color color-base-green-300-classname
sd-sage-color-base-green-400-hex
$sd-sage-color-base-green-400-hex: #3dcb7f;
Description
color color-base-green-400-hex
sd-sage-color-base-green-400-code
$sd-sage-color-base-green-400-code: "green-400";
Description
color color-base-green-400-code
sd-sage-color-base-green-400-classname
$sd-sage-color-base-green-400-classname: "t-sage--color-green-400";
Description
color color-base-green-400-classname
sd-sage-color-base-green-500-hex
$sd-sage-color-base-green-500-hex: #17b365;
Description
color color-base-green-500-hex
sd-sage-color-base-green-500-code
$sd-sage-color-base-green-500-code: "green-500";
Description
color color-base-green-500-code
sd-sage-color-base-green-500-classname
$sd-sage-color-base-green-500-classname: "t-sage--color-green-500";
Description
color color-base-green-500-classname
sd-sage-color-base-green-600-hex
$sd-sage-color-base-green-600-hex: #079250;
Description
color color-base-green-600-hex
sd-sage-color-base-green-600-code
$sd-sage-color-base-green-600-code: "green-600";
Description
color color-base-green-600-code
sd-sage-color-base-green-600-classname
$sd-sage-color-base-green-600-classname: "t-sage--color-green-600";
Description
color color-base-green-600-classname
sd-sage-color-base-green-700-hex
$sd-sage-color-base-green-700-hex: #097443;
Description
color color-base-green-700-hex
sd-sage-color-base-green-700-code
$sd-sage-color-base-green-700-code: "green-700";
Description
color color-base-green-700-code
sd-sage-color-base-green-700-classname
$sd-sage-color-base-green-700-classname: "t-sage--color-green-700";
Description
color color-base-green-700-classname
sd-sage-color-base-green-800-hex
$sd-sage-color-base-green-800-hex: #085c37;
Description
color color-base-green-800-hex
sd-sage-color-base-green-800-code
$sd-sage-color-base-green-800-code: "green-800";
Description
color color-base-green-800-code
sd-sage-color-base-green-800-classname
$sd-sage-color-base-green-800-classname: "t-sage--color-green-800";
Description
color color-base-green-800-classname
sd-sage-color-base-green-900-hex
$sd-sage-color-base-green-900-hex: #094c2f;
Description
color color-base-green-900-hex
sd-sage-color-base-green-900-code
$sd-sage-color-base-green-900-code: "green-900";
Description
color color-base-green-900-code
sd-sage-color-base-green-900-classname
$sd-sage-color-base-green-900-classname: "t-sage--color-green-900";
Description
color color-base-green-900-classname
sd-sage-color-base-green-950-hex
$sd-sage-color-base-green-950-hex: #052e1c;
Description
color color-base-green-950-hex
sd-sage-color-base-green-950-code
$sd-sage-color-base-green-950-code: "green-950";
Description
color color-base-green-950-code
sd-sage-color-base-green-950-classname
$sd-sage-color-base-green-950-classname: "t-sage--color-green-950";
Description
color color-base-green-950-classname
sd-sage-color-base-green-050-hex
$sd-sage-color-base-green-050-hex: #fbfefc;
Description
color color-base-green-050-hex
sd-sage-color-base-green-050-code
$sd-sage-color-base-green-050-code: "green-050";
Description
color color-base-green-050-code
sd-sage-color-base-green-050-classname
$sd-sage-color-base-green-050-classname: "t-sage--color-green-050";
Description
color color-base-green-050-classname
sd-sage-color-base-mercury-100-hex
$sd-sage-color-base-mercury-100-hex: #fff3ed;
Description
color color-base-mercury-100-hex
sd-sage-color-base-mercury-100-code
$sd-sage-color-base-mercury-100-code: "mercury-100";
Description
color color-base-mercury-100-code
sd-sage-color-base-mercury-100-classname
$sd-sage-color-base-mercury-100-classname: "t-sage--color-mercury-100";
Description
color color-base-mercury-100-classname
sd-sage-color-base-mercury-150-hex
$sd-sage-color-base-mercury-150-hex: #ffe3d4;
Description
color color-base-mercury-150-hex
sd-sage-color-base-mercury-150-code
$sd-sage-color-base-mercury-150-code: "mercury-150";
Description
color color-base-mercury-150-code
sd-sage-color-base-mercury-150-classname
$sd-sage-color-base-mercury-150-classname: "t-sage--color-mercury-150";
Description
color color-base-mercury-150-classname
sd-sage-color-base-mercury-200-hex
$sd-sage-color-base-mercury-200-hex: #ffc3a8;
Description
color color-base-mercury-200-hex
sd-sage-color-base-mercury-200-code
$sd-sage-color-base-mercury-200-code: "mercury-200";
Description
color color-base-mercury-200-code
sd-sage-color-base-mercury-200-classname
$sd-sage-color-base-mercury-200-classname: "t-sage--color-mercury-200";
Description
color color-base-mercury-200-classname
sd-sage-color-base-mercury-300-hex
$sd-sage-color-base-mercury-300-hex: #ff9970;
Description
color color-base-mercury-300-hex
sd-sage-color-base-mercury-300-code
$sd-sage-color-base-mercury-300-code: "mercury-300";
Description
color color-base-mercury-300-code
sd-sage-color-base-mercury-300-classname
$sd-sage-color-base-mercury-300-classname: "t-sage--color-mercury-300";
Description
color color-base-mercury-300-classname
sd-sage-color-base-mercury-400-hex
$sd-sage-color-base-mercury-400-hex: #ff6337;
Description
color color-base-mercury-400-hex
sd-sage-color-base-mercury-400-code
$sd-sage-color-base-mercury-400-code: "mercury-400";
Description
color color-base-mercury-400-code
sd-sage-color-base-mercury-400-classname
$sd-sage-color-base-mercury-400-classname: "t-sage--color-mercury-400";
Description
color color-base-mercury-400-classname
sd-sage-color-base-mercury-500-hex
$sd-sage-color-base-mercury-500-hex: #ff3e15;
Description
color color-base-mercury-500-hex
sd-sage-color-base-mercury-500-code
$sd-sage-color-base-mercury-500-code: "mercury-500";
Description
color color-base-mercury-500-code
sd-sage-color-base-mercury-500-classname
$sd-sage-color-base-mercury-500-classname: "t-sage--color-mercury-500";
Description
color color-base-mercury-500-classname
sd-sage-color-base-mercury-600-hex
$sd-sage-color-base-mercury-600-hex: #f11f06;
Description
color color-base-mercury-600-hex
sd-sage-color-base-mercury-600-code
$sd-sage-color-base-mercury-600-code: "mercury-600";
Description
color color-base-mercury-600-code
sd-sage-color-base-mercury-600-classname
$sd-sage-color-base-mercury-600-classname: "t-sage--color-mercury-600";
Description
color color-base-mercury-600-classname
sd-sage-color-base-mercury-700-hex
$sd-sage-color-base-mercury-700-hex: #c81307;
Description
color color-base-mercury-700-hex
sd-sage-color-base-mercury-700-code
$sd-sage-color-base-mercury-700-code: "mercury-700";
Description
color color-base-mercury-700-code
sd-sage-color-base-mercury-700-classname
$sd-sage-color-base-mercury-700-classname: "t-sage--color-mercury-700";
Description
color color-base-mercury-700-classname
sd-sage-color-base-mercury-800-hex
$sd-sage-color-base-mercury-800-hex: #9e110e;
Description
color color-base-mercury-800-hex
sd-sage-color-base-mercury-800-code
$sd-sage-color-base-mercury-800-code: "mercury-800";
Description
color color-base-mercury-800-code
sd-sage-color-base-mercury-800-classname
$sd-sage-color-base-mercury-800-classname: "t-sage--color-mercury-800";
Description
color color-base-mercury-800-classname
sd-sage-color-base-mercury-900-hex
$sd-sage-color-base-mercury-900-hex: #7f120f;
Description
color color-base-mercury-900-hex
sd-sage-color-base-mercury-900-code
$sd-sage-color-base-mercury-900-code: "mercury-900";
Description
color color-base-mercury-900-code
sd-sage-color-base-mercury-900-classname
$sd-sage-color-base-mercury-900-classname: "t-sage--color-mercury-900";
Description
color color-base-mercury-900-classname
sd-sage-color-base-mercury-950-hex
$sd-sage-color-base-mercury-950-hex: #450506;
Description
color color-base-mercury-950-hex
sd-sage-color-base-mercury-950-code
$sd-sage-color-base-mercury-950-code: "mercury-950";
Description
color color-base-mercury-950-code
sd-sage-color-base-mercury-950-classname
$sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950";
Description
color color-base-mercury-950-classname
sd-sage-color-base-mercury-050-hex
$sd-sage-color-base-mercury-050-hex: #fffcfa;
Description
color color-base-mercury-050-hex
sd-sage-color-base-mercury-050-code
$sd-sage-color-base-mercury-050-code: "mercury-050";
Description
color color-base-mercury-050-code
sd-sage-color-base-mercury-050-classname
$sd-sage-color-base-mercury-050-classname: "t-sage--color-mercury-050";
Description
color color-base-mercury-050-classname
sd-sage-color-base-primary-100-hex
$sd-sage-color-base-primary-100-hex: #dbe9fe;
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: #92c5fd;
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: #2463eb;
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: #1c4ed8;
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: #172554;
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: #d3f8df;
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: #73e2a3;
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: #079250;
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: #085c37;
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: #052e1c;
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: #fffbeb;
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-150-hex
$sd-sage-color-base-yellow-150-hex: #fff3c6;
Description
color color-base-yellow-150-hex
sd-sage-color-base-yellow-150-code
$sd-sage-color-base-yellow-150-code: "yellow-150";
Description
color color-base-yellow-150-code
sd-sage-color-base-yellow-150-classname
$sd-sage-color-base-yellow-150-classname: "t-sage--color-yellow-150";
Description
color color-base-yellow-150-classname
sd-sage-color-base-yellow-200-hex
$sd-sage-color-base-yellow-200-hex: #fee589;
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: #fed04b;
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: #fdbb21;
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: #f79a0b;
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-yellow-600-hex
$sd-sage-color-base-yellow-600-hex: #db7303;
Description
color color-base-yellow-600-hex
sd-sage-color-base-yellow-600-code
$sd-sage-color-base-yellow-600-code: "yellow-60";
Description
color color-base-yellow-600-code
sd-sage-color-base-yellow-600-classname
$sd-sage-color-base-yellow-600-classname: "t-sage--color-yellow-600";
Description
color color-base-yellow-600-classname
sd-sage-color-base-yellow-700-hex
$sd-sage-color-base-yellow-700-hex: #b64f06;
Description
color color-base-yellow-700-hex
sd-sage-color-base-yellow-700-code
$sd-sage-color-base-yellow-700-code: "yellow-700";
Description
color color-base-yellow-700-code
sd-sage-color-base-yellow-700-classname
$sd-sage-color-base-yellow-700-classname: "t-sage--color-yellow-700";
Description
color color-base-yellow-700-classname
sd-sage-color-base-yellow-800-hex
$sd-sage-color-base-yellow-800-hex: #943d0e;
Description
color color-base-yellow-800-hex
sd-sage-color-base-yellow-800-code
$sd-sage-color-base-yellow-800-code: "yellow-800";
Description
color color-base-yellow-800-code
sd-sage-color-base-yellow-800-classname
$sd-sage-color-base-yellow-800-classname: "t-sage--color-yellow-800";
Description
color color-base-yellow-800-classname
sd-sage-color-base-yellow-900-hex
$sd-sage-color-base-yellow-900-hex: #79330e;
Description
color color-base-yellow-900-hex
sd-sage-color-base-yellow-900-code
$sd-sage-color-base-yellow-900-code: "yellow-900";
Description
color color-base-yellow-900-code
sd-sage-color-base-yellow-900-classname
$sd-sage-color-base-yellow-900-classname: "t-sage--color-yellow-900";
Description
color color-base-yellow-900-classname
sd-sage-color-base-yellow-950-hex
$sd-sage-color-base-yellow-950-hex: #451902;
Description
color color-base-yellow-950-hex
sd-sage-color-base-yellow-950-code
$sd-sage-color-base-yellow-950-code: "yellow-950";
Description
color color-base-yellow-950-code
sd-sage-color-base-yellow-950-classname
$sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950";
Description
color color-base-yellow-950-classname
sd-sage-color-base-yellow-050-hex
$sd-sage-color-base-yellow-050-hex: #fffefa;
Description
color color-base-yellow-050-hex
sd-sage-color-base-yellow-050-code
$sd-sage-color-base-yellow-050-code: "yellow-050";
Description
color color-base-yellow-050-code
sd-sage-color-base-yellow-050-classname
$sd-sage-color-base-yellow-050-classname: "t-sage--color-yellow-050";
Description
color color-base-yellow-050-classname
sd-sage-color-base-red-100-hex
$sd-sage-color-base-red-100-hex: #fef2f2;
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-150-hex
$sd-sage-color-base-red-150-hex: #fee2e1;
Description
color color-base-red-150-hex
sd-sage-color-base-red-150-code
$sd-sage-color-base-red-150-code: "red-150";
Description
color color-base-red-150-code
sd-sage-color-base-red-150-classname
$sd-sage-color-base-red-150-classname: "t-sage--color-red-150";
Description
color color-base-red-150-classname
sd-sage-color-base-red-200-hex
$sd-sage-color-base-red-200-hex: #fecaca;
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: #fda5a5;
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: #f87171;
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: #ef4444;
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-red-600-hex
$sd-sage-color-base-red-600-hex: #dc2625;
Description
color color-base-red-600-hex
sd-sage-color-base-red-600-code
$sd-sage-color-base-red-600-code: "red-600";
Description
color color-base-red-600-code
sd-sage-color-base-red-600-classname
$sd-sage-color-base-red-600-classname: "t-sage--color-red-600";
Description
color color-base-red-600-classname
sd-sage-color-base-red-700-hex
$sd-sage-color-base-red-700-hex: #b91c1b;
Description
color color-base-red-700-hex
sd-sage-color-base-red-700-code
$sd-sage-color-base-red-700-code: "red-700";
Description
color color-base-red-700-code
sd-sage-color-base-red-700-classname
$sd-sage-color-base-red-700-classname: "t-sage--color-red-700";
Description
color color-base-red-700-classname
sd-sage-color-base-red-800-hex
$sd-sage-color-base-red-800-hex: #991b1b;
Description
color color-base-red-800-hex
sd-sage-color-base-red-800-code
$sd-sage-color-base-red-800-code: "red-800";
Description
color color-base-red-800-code
sd-sage-color-base-red-800-classname
$sd-sage-color-base-red-800-classname: "t-sage--color-red-800";
Description
color color-base-red-800-classname
sd-sage-color-base-red-900-hex
$sd-sage-color-base-red-900-hex: #7f1c1d;
Description
color color-base-red-900-hex
sd-sage-color-base-red-900-code
$sd-sage-color-base-red-900-code: "red-900";
Description
color color-base-red-900-code
sd-sage-color-base-red-900-classname
$sd-sage-color-base-red-900-classname: "t-sage--color-red-900";
Description
color color-base-red-900-classname
sd-sage-color-base-red-950-hex
$sd-sage-color-base-red-950-hex: #572627;
Description
color color-base-red-950-hex
sd-sage-color-base-red-950-code
$sd-sage-color-base-red-950-code: "red-950";
Description
color color-base-red-950-code
sd-sage-color-base-red-950-classname
$sd-sage-color-base-red-950-classname: "t-sage--color-red-950";
Description
color color-base-red-950-classname
sd-sage-color-base-red-050-hex
$sd-sage-color-base-red-050-hex: #fffafa;
Description
color color-base-red-050-hex
sd-sage-color-base-red-050-code
$sd-sage-color-base-red-050-code: "red-050";
Description
color color-base-red-050-code
sd-sage-color-base-red-050-classname
$sd-sage-color-base-red-050-classname: "t-sage--color-red-050";
Description
color color-base-red-050-classname
sd-sage-color-base-orange-100-hex
$sd-sage-color-base-orange-100-hex: #ffe3d4;
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: #ff9970;
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: #ff3e15;
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: #9e110e;
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: #450506;
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: #edf1ff;
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-150-hex
$sd-sage-color-base-purple-150-hex: #e0e4ff;
Description
color color-base-purple-150-hex
sd-sage-color-base-purple-150-code
$sd-sage-color-base-purple-150-code: "purple-150";
Description
color color-base-purple-150-code
sd-sage-color-base-purple-150-classname
$sd-sage-color-base-purple-150-classname: "t-sage--color-purple-150";
Description
color color-base-purple-150-classname
sd-sage-color-base-purple-200-hex
$sd-sage-color-base-purple-200-hex: #c7cdfe;
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: #a3acfd;
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: #8081f9;
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: #6a62f2;
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-purple-600-hex
$sd-sage-color-base-purple-600-hex: #533be5;
Description
color color-base-purple-600-hex
sd-sage-color-base-purple-600-code
$sd-sage-color-base-purple-600-code: "purple-600";
Description
color color-base-purple-600-code
sd-sage-color-base-purple-600-classname
$sd-sage-color-base-purple-600-classname: "t-sage--color-purple-600";
Description
color color-base-purple-600-classname
sd-sage-color-base-purple-700-hex
$sd-sage-color-base-purple-700-hex: #4f37cb;
Description
color color-base-purple-700-hex
sd-sage-color-base-purple-700-code
$sd-sage-color-base-purple-700-code: "purple-700";
Description
color color-base-purple-700-code
sd-sage-color-base-purple-700-classname
$sd-sage-color-base-purple-700-classname: "t-sage--color-purple-700";
Description
color color-base-purple-700-classname
sd-sage-color-base-purple-800-hex
$sd-sage-color-base-purple-800-hex: #402fa4;
Description
color color-base-purple-800-hex
sd-sage-color-base-purple-800-code
$sd-sage-color-base-purple-800-code: "purple-800";
Description
color color-base-purple-800-code
sd-sage-color-base-purple-800-classname
$sd-sage-color-base-purple-800-classname: "t-sage--color-purple-800";
Description
color color-base-purple-800-classname
sd-sage-color-base-purple-900-hex
$sd-sage-color-base-purple-900-hex: #372d82;
Description
color color-base-purple-900-hex
sd-sage-color-base-purple-900-code
$sd-sage-color-base-purple-900-code: "purple-900";
Description
color color-base-purple-900-code
sd-sage-color-base-purple-900-classname
$sd-sage-color-base-purple-900-classname: "t-sage--color-purple-900";
Description
color color-base-purple-900-classname
sd-sage-color-base-purple-950-hex
$sd-sage-color-base-purple-950-hex: #221b4b;
Description
color color-base-purple-950-hex
sd-sage-color-base-purple-950-code
$sd-sage-color-base-purple-950-code: "purple-950";
Description
color color-base-purple-950-code
sd-sage-color-base-purple-950-classname
$sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950";
Description
color color-base-purple-950-classname
sd-sage-color-base-purple-050-hex
$sd-sage-color-base-purple-050-hex: #fafbff;
Description
color color-base-purple-050-hex
sd-sage-color-base-purple-050-code
$sd-sage-color-base-purple-050-code: "purple-050";
Description
color color-base-purple-050-code
sd-sage-color-base-purple-050-classname
$sd-sage-color-base-purple-050-classname: "t-sage--color-purple-050";
Description
color color-base-purple-050-classname
sd-sage-color-base-charcoal-100-hex
$sd-sage-color-base-charcoal-100-hex: #828180;
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: #6c6a69;
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: #4d4d4c;
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: #343332;
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: #1a1a19;
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: #f8f8f8;
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-150-hex
$sd-sage-color-base-grey-150-hex: #f0f0f0;
Description
color color-base-grey-150-hex
sd-sage-color-base-grey-150-code
$sd-sage-color-base-grey-150-code: "grey-15";
Description
color color-base-grey-150-code
sd-sage-color-base-grey-150-classname
$sd-sage-color-base-grey-150-classname: "t-sage--color-grey-150";
Description
color color-base-grey-150-classname
sd-sage-color-base-grey-200-hex
$sd-sage-color-base-grey-200-hex: #e4e4e4;
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: #d2d1d1;
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: #bbbab9;
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: #9b9a98;
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-grey-600-hex
$sd-sage-color-base-grey-600-hex: #828180;
Description
color color-base-grey-600-hex
sd-sage-color-base-grey-600-code
$sd-sage-color-base-grey-600-code: "grey-600";
Description
color color-base-grey-600-code
sd-sage-color-base-grey-600-classname
$sd-sage-color-base-grey-600-classname: "t-sage--color-grey-600";
Description
color color-base-grey-600-classname
sd-sage-color-base-grey-700-hex
$sd-sage-color-base-grey-700-hex: #6c6a69;
Description
color color-base-grey-700-hex
sd-sage-color-base-grey-700-code
$sd-sage-color-base-grey-700-code: "grey-700";
Description
color color-base-grey-700-code
sd-sage-color-base-grey-700-classname
$sd-sage-color-base-grey-700-classname: "t-sage--color-grey-700";
Description
color color-base-grey-700-classname
sd-sage-color-base-grey-800-hex
$sd-sage-color-base-grey-800-hex: #4d4d4c;
Description
color color-base-grey-800-hex
sd-sage-color-base-grey-800-code
$sd-sage-color-base-grey-800-code: "grey-800";
Description
color color-base-grey-800-code
sd-sage-color-base-grey-800-classname
$sd-sage-color-base-grey-800-classname: "t-sage--color-grey-800";
Description
color color-base-grey-800-classname
sd-sage-color-base-grey-900-hex
$sd-sage-color-base-grey-900-hex: #343332;
Description
color color-base-grey-900-hex
sd-sage-color-base-grey-900-code
$sd-sage-color-base-grey-900-code: "grey-900";
Description
color color-base-grey-900-code
sd-sage-color-base-grey-900-classname
$sd-sage-color-base-grey-900-classname: "t-sage--color-grey-900";
Description
color color-base-grey-900-classname
sd-sage-color-base-grey-950-hex
$sd-sage-color-base-grey-950-hex: #1a1a19;
Description
color color-base-grey-950-hex
sd-sage-color-base-grey-950-code
$sd-sage-color-base-grey-950-code: "grey-950";
Description
color color-base-grey-950-code
sd-sage-color-base-grey-950-classname
$sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950";
Description
color color-base-grey-950-classname
sd-sage-color-base-grey-050-hex
$sd-sage-color-base-grey-050-hex: #fcfcfc;
Description
color color-base-grey-050-hex
sd-sage-color-base-grey-050-code
$sd-sage-color-base-grey-050-code: "grey-050";
Description
color color-base-grey-050-code
sd-sage-color-base-grey-050-classname
$sd-sage-color-base-grey-050-classname: "t-sage--color-grey-050";
Description
color color-base-grey-050-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: (
blue: (
100: (
hex: $sd-sage-color-base-blue-100-hex,
code: $sd-sage-color-base-blue-100-code,
classname: $sd-sage-color-base-blue-100-classname,
),
150: (
hex: $sd-sage-color-base-blue-150-hex,
code: $sd-sage-color-base-blue-150-code,
classname: $sd-sage-color-base-blue-150-classname,
),
200: (
hex: $sd-sage-color-base-blue-200-hex,
code: $sd-sage-color-base-blue-200-code,
classname: $sd-sage-color-base-blue-200-classname,
),
300: (
hex: $sd-sage-color-base-blue-300-hex,
code: $sd-sage-color-base-blue-300-code,
classname: $sd-sage-color-base-blue-300-classname,
),
400: (
hex: $sd-sage-color-base-blue-400-hex,
code: $sd-sage-color-base-blue-400-code,
classname: $sd-sage-color-base-blue-400-classname,
),
500: (
hex: $sd-sage-color-base-blue-500-hex,
code: $sd-sage-color-base-blue-500-code,
classname: $sd-sage-color-base-blue-500-classname,
),
600: (
hex: $sd-sage-color-base-blue-600-hex,
code: $sd-sage-color-base-blue-600-code,
classname: $sd-sage-color-base-blue-600-classname,
),
700: (
hex: $sd-sage-color-base-blue-700-hex,
code: $sd-sage-color-base-blue-700-code,
classname: $sd-sage-color-base-blue-700-classname,
),
800: (
hex: $sd-sage-color-base-blue-800-hex,
code: $sd-sage-color-base-blue-800-code,
classname: $sd-sage-color-base-blue-800-classname,
),
900: (
hex: $sd-sage-color-base-blue-900-hex,
code: $sd-sage-color-base-blue-900-code,
classname: $sd-sage-color-base-blue-900-classname,
),
950: (
hex: $sd-sage-color-base-blue-950-hex,
code: $sd-sage-color-base-blue-950-code,
classname: $sd-sage-color-base-blue-950-classname,
),
050: (
hex: $sd-sage-color-base-blue-050-hex,
code: $sd-sage-color-base-blue-050-code,
classname: $sd-sage-color-base-blue-050-classname,
),
),
green: (
100: (
hex: $sd-sage-color-base-green-100-hex,
code: $sd-sage-color-base-green-100-code,
classname: $sd-sage-color-base-green-100-classname,
),
150: (
hex: $sd-sage-color-base-green-150-hex,
code: $sd-sage-color-base-green-150-code,
classname: $sd-sage-color-base-green-150-classname,
),
200: (
hex: $sd-sage-color-base-green-200-hex,
code: $sd-sage-color-base-green-200-code,
classname: $sd-sage-color-base-green-200-classname,
),
300: (
hex: $sd-sage-color-base-green-300-hex,
code: $sd-sage-color-base-green-300-code,
classname: $sd-sage-color-base-green-300-classname,
),
400: (
hex: $sd-sage-color-base-green-400-hex,
code: $sd-sage-color-base-green-400-code,
classname: $sd-sage-color-base-green-400-classname,
),
500: (
hex: $sd-sage-color-base-green-500-hex,
code: $sd-sage-color-base-green-500-code,
classname: $sd-sage-color-base-green-500-classname,
),
600: (
hex: $sd-sage-color-base-green-600-hex,
code: $sd-sage-color-base-green-600-code,
classname: $sd-sage-color-base-green-600-classname,
),
700: (
hex: $sd-sage-color-base-green-700-hex,
code: $sd-sage-color-base-green-700-code,
classname: $sd-sage-color-base-green-700-classname,
),
800: (
hex: $sd-sage-color-base-green-800-hex,
code: $sd-sage-color-base-green-800-code,
classname: $sd-sage-color-base-green-800-classname,
),
900: (
hex: $sd-sage-color-base-green-900-hex,
code: $sd-sage-color-base-green-900-code,
classname: $sd-sage-color-base-green-900-classname,
),
950: (
hex: $sd-sage-color-base-green-950-hex,
code: $sd-sage-color-base-green-950-code,
classname: $sd-sage-color-base-green-950-classname,
),
050: (
hex: $sd-sage-color-base-green-050-hex,
code: $sd-sage-color-base-green-050-code,
classname: $sd-sage-color-base-green-050-classname,
),
),
mercury: (
100: (
hex: $sd-sage-color-base-mercury-100-hex,
code: $sd-sage-color-base-mercury-100-code,
classname: $sd-sage-color-base-mercury-100-classname,
),
150: (
hex: $sd-sage-color-base-mercury-150-hex,
code: $sd-sage-color-base-mercury-150-code,
classname: $sd-sage-color-base-mercury-150-classname,
),
200: (
hex: $sd-sage-color-base-mercury-200-hex,
code: $sd-sage-color-base-mercury-200-code,
classname: $sd-sage-color-base-mercury-200-classname,
),
300: (
hex: $sd-sage-color-base-mercury-300-hex,
code: $sd-sage-color-base-mercury-300-code,
classname: $sd-sage-color-base-mercury-300-classname,
),
400: (
hex: $sd-sage-color-base-mercury-400-hex,
code: $sd-sage-color-base-mercury-400-code,
classname: $sd-sage-color-base-mercury-400-classname,
),
500: (
hex: $sd-sage-color-base-mercury-500-hex,
code: $sd-sage-color-base-mercury-500-code,
classname: $sd-sage-color-base-mercury-500-classname,
),
600: (
hex: $sd-sage-color-base-mercury-600-hex,
code: $sd-sage-color-base-mercury-600-code,
classname: $sd-sage-color-base-mercury-600-classname,
),
700: (
hex: $sd-sage-color-base-mercury-700-hex,
code: $sd-sage-color-base-mercury-700-code,
classname: $sd-sage-color-base-mercury-700-classname,
),
800: (
hex: $sd-sage-color-base-mercury-800-hex,
code: $sd-sage-color-base-mercury-800-code,
classname: $sd-sage-color-base-mercury-800-classname,
),
900: (
hex: $sd-sage-color-base-mercury-900-hex,
code: $sd-sage-color-base-mercury-900-code,
classname: $sd-sage-color-base-mercury-900-classname,
),
950: (
hex: $sd-sage-color-base-mercury-950-hex,
code: $sd-sage-color-base-mercury-950-code,
classname: $sd-sage-color-base-mercury-950-classname,
),
050: (
hex: $sd-sage-color-base-mercury-050-hex,
code: $sd-sage-color-base-mercury-050-code,
classname: $sd-sage-color-base-mercury-050-classname,
),
),
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,
),
150: (
hex: $sd-sage-color-base-yellow-150-hex,
code: $sd-sage-color-base-yellow-150-code,
classname: $sd-sage-color-base-yellow-150-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,
),
600: (
hex: $sd-sage-color-base-yellow-600-hex,
code: $sd-sage-color-base-yellow-600-code,
classname: $sd-sage-color-base-yellow-600-classname,
),
700: (
hex: $sd-sage-color-base-yellow-700-hex,
code: $sd-sage-color-base-yellow-700-code,
classname: $sd-sage-color-base-yellow-700-classname,
),
800: (
hex: $sd-sage-color-base-yellow-800-hex,
code: $sd-sage-color-base-yellow-800-code,
classname: $sd-sage-color-base-yellow-800-classname,
),
900: (
hex: $sd-sage-color-base-yellow-900-hex,
code: $sd-sage-color-base-yellow-900-code,
classname: $sd-sage-color-base-yellow-900-classname,
),
950: (
hex: $sd-sage-color-base-yellow-950-hex,
code: $sd-sage-color-base-yellow-950-code,
classname: $sd-sage-color-base-yellow-950-classname,
),
050: (
hex: $sd-sage-color-base-yellow-050-hex,
code: $sd-sage-color-base-yellow-050-code,
classname: $sd-sage-color-base-yellow-050-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,
),
150: (
hex: $sd-sage-color-base-red-150-hex,
code: $sd-sage-color-base-red-150-code,
classname: $sd-sage-color-base-red-150-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,
),
600: (
hex: $sd-sage-color-base-red-600-hex,
code: $sd-sage-color-base-red-600-code,
classname: $sd-sage-color-base-red-600-classname,
),
700: (
hex: $sd-sage-color-base-red-700-hex,
code: $sd-sage-color-base-red-700-code,
classname: $sd-sage-color-base-red-700-classname,
),
800: (
hex: $sd-sage-color-base-red-800-hex,
code: $sd-sage-color-base-red-800-code,
classname: $sd-sage-color-base-red-800-classname,
),
900: (
hex: $sd-sage-color-base-red-900-hex,
code: $sd-sage-color-base-red-900-code,
classname: $sd-sage-color-base-red-900-classname,
),
950: (
hex: $sd-sage-color-base-red-950-hex,
code: $sd-sage-color-base-red-950-code,
classname: $sd-sage-color-base-red-950-classname,
),
050: (
hex: $sd-sage-color-base-red-050-hex,
code: $sd-sage-color-base-red-050-code,
classname: $sd-sage-color-base-red-050-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,
),
150: (
hex: $sd-sage-color-base-purple-150-hex,
code: $sd-sage-color-base-purple-150-code,
classname: $sd-sage-color-base-purple-150-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,
),
600: (
hex: $sd-sage-color-base-purple-600-hex,
code: $sd-sage-color-base-purple-600-code,
classname: $sd-sage-color-base-purple-600-classname,
),
700: (
hex: $sd-sage-color-base-purple-700-hex,
code: $sd-sage-color-base-purple-700-code,
classname: $sd-sage-color-base-purple-700-classname,
),
800: (
hex: $sd-sage-color-base-purple-800-hex,
code: $sd-sage-color-base-purple-800-code,
classname: $sd-sage-color-base-purple-800-classname,
),
900: (
hex: $sd-sage-color-base-purple-900-hex,
code: $sd-sage-color-base-purple-900-code,
classname: $sd-sage-color-base-purple-900-classname,
),
950: (
hex: $sd-sage-color-base-purple-950-hex,
code: $sd-sage-color-base-purple-950-code,
classname: $sd-sage-color-base-purple-950-classname,
),
050: (
hex: $sd-sage-color-base-purple-050-hex,
code: $sd-sage-color-base-purple-050-code,
classname: $sd-sage-color-base-purple-050-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,
),
150: (
hex: $sd-sage-color-base-grey-150-hex,
code: $sd-sage-color-base-grey-150-code,
classname: $sd-sage-color-base-grey-150-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,
),
600: (
hex: $sd-sage-color-base-grey-600-hex,
code: $sd-sage-color-base-grey-600-code,
classname: $sd-sage-color-base-grey-600-classname,
),
700: (
hex: $sd-sage-color-base-grey-700-hex,
code: $sd-sage-color-base-grey-700-code,
classname: $sd-sage-color-base-grey-700-classname,
),
800: (
hex: $sd-sage-color-base-grey-800-hex,
code: $sd-sage-color-base-grey-800-code,
classname: $sd-sage-color-base-grey-800-classname,
),
900: (
hex: $sd-sage-color-base-grey-900-hex,
code: $sd-sage-color-base-grey-900-code,
classname: $sd-sage-color-base-grey-900-classname,
),
950: (
hex: $sd-sage-color-base-grey-950-hex,
code: $sd-sage-color-base-grey-950-code,
classname: $sd-sage-color-base-grey-950-classname,
),
050: (
hex: $sd-sage-color-base-grey-050-hex,
code: $sd-sage-color-base-grey-050-code,
classname: $sd-sage-color-base-grey-050-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: #343332;
Description
color combos color-combos-draft-default-foreground
sd-sage-color-combos-draft-default-foreground-accent
$sd-sage-color-combos-draft-default-foreground-accent: #1a1a19;
Description
color combos color-combos-draft-default-foreground-accent
sd-sage-color-combos-draft-default-background
$sd-sage-color-combos-draft-default-background: #e4e4e4;
Description
color combos color-combos-draft-default-background
sd-sage-color-combos-draft-default-background-accent
$sd-sage-color-combos-draft-default-background-accent: #d2d1d1;
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: #6c6a69;
Description
color combos color-combos-draft-default-icon-background-accent
sd-sage-color-combos-draft-subtle-foreground
$sd-sage-color-combos-draft-subtle-foreground: #6c6a69;
Description
color combos color-combos-draft-subtle-foreground
sd-sage-color-combos-draft-subtle-foreground-accent
$sd-sage-color-combos-draft-subtle-foreground-accent: #828180;
Description
color combos color-combos-draft-subtle-foreground-accent
sd-sage-color-combos-draft-subtle-background
$sd-sage-color-combos-draft-subtle-background: #828180;
Description
color combos color-combos-draft-subtle-background
sd-sage-color-combos-draft-bold-foreground
$sd-sage-color-combos-draft-bold-foreground: #f0f0f0;
Description
color combos color-combos-draft-bold-foreground
sd-sage-color-combos-draft-bold-background
$sd-sage-color-combos-draft-bold-background: #343332;
Description
color combos color-combos-draft-bold-background
sd-sage-color-combos-published-default-foreground
$sd-sage-color-combos-published-default-foreground: #085c37;
Description
color combos color-combos-published-default-foreground
sd-sage-color-combos-published-default-foreground-accent
$sd-sage-color-combos-published-default-foreground-accent: #052e1c;
Description
color combos color-combos-published-default-foreground-accent
sd-sage-color-combos-published-default-background
$sd-sage-color-combos-published-default-background: #d3f8df;
Description
color combos color-combos-published-default-background
sd-sage-color-combos-published-default-background-accent
$sd-sage-color-combos-published-default-background-accent: #73e2a3;
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: #079250;
Description
color combos color-combos-published-default-icon-background-accent
sd-sage-color-combos-published-subtle-foreground
$sd-sage-color-combos-published-subtle-foreground: #085c37;
Description
color combos color-combos-published-subtle-foreground
sd-sage-color-combos-published-subtle-foreground-accent
$sd-sage-color-combos-published-subtle-foreground-accent: #079250;
Description
color combos color-combos-published-subtle-foreground-accent
sd-sage-color-combos-published-subtle-background
$sd-sage-color-combos-published-subtle-background: #079250;
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: #079250;
Description
color combos color-combos-published-bold-background
sd-sage-color-combos-info-default-foreground
$sd-sage-color-combos-info-default-foreground: #1c4ed8;
Description
color combos color-combos-info-default-foreground
sd-sage-color-combos-info-default-foreground-accent
$sd-sage-color-combos-info-default-foreground-accent: #172554;
Description
color combos color-combos-info-default-foreground-accent
sd-sage-color-combos-info-default-background
$sd-sage-color-combos-info-default-background: #dbe9fe;
Description
color combos color-combos-info-default-background
sd-sage-color-combos-info-default-background-accent
$sd-sage-color-combos-info-default-background-accent: #92c5fd;
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: #2463eb;
Description
color combos color-combos-info-default-icon-background-accent
sd-sage-color-combos-info-subtle-foreground
$sd-sage-color-combos-info-subtle-foreground: #1c4ed8;
Description
color combos color-combos-info-subtle-foreground
sd-sage-color-combos-info-subtle-foreground-accent
$sd-sage-color-combos-info-subtle-foreground-accent: #2463eb;
Description
color combos color-combos-info-subtle-foreground-accent
sd-sage-color-combos-info-subtle-background
$sd-sage-color-combos-info-subtle-background: #92c5fd;
Description
color combos color-combos-info-subtle-background
sd-sage-color-combos-info-bold-foreground
$sd-sage-color-combos-info-bold-foreground: #dbe9fe;
Description
color combos color-combos-info-bold-foreground
sd-sage-color-combos-info-bold-background
$sd-sage-color-combos-info-bold-background: #2463eb;
Description
color combos color-combos-info-bold-background
sd-sage-color-combos-locked-default-foreground
$sd-sage-color-combos-locked-default-foreground: #402fa4;
Description
color combos color-combos-locked-default-foreground
sd-sage-color-combos-locked-default-foreground-accent
$sd-sage-color-combos-locked-default-foreground-accent: #221b4b;
Description
color combos color-combos-locked-default-foreground-accent
sd-sage-color-combos-locked-default-background
$sd-sage-color-combos-locked-default-background: #e0e4ff;
Description
color combos color-combos-locked-default-background
sd-sage-color-combos-locked-default-background-accent
$sd-sage-color-combos-locked-default-background-accent: #a3acfd;
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: #533be5;
Description
color combos color-combos-locked-default-icon-background-accent
sd-sage-color-combos-locked-subtle-foreground
$sd-sage-color-combos-locked-subtle-foreground: #402fa4;
Description
color combos color-combos-locked-subtle-foreground
sd-sage-color-combos-locked-subtle-foreground-accent
$sd-sage-color-combos-locked-subtle-foreground-accent: #533be5;
Description
color combos color-combos-locked-subtle-foreground-accent
sd-sage-color-combos-locked-subtle-background
$sd-sage-color-combos-locked-subtle-background: #a3acfd;
Description
color combos color-combos-locked-subtle-background
sd-sage-color-combos-locked-bold-foreground
$sd-sage-color-combos-locked-bold-foreground: #e0e4ff;
Description
color combos color-combos-locked-bold-foreground
sd-sage-color-combos-locked-bold-background
$sd-sage-color-combos-locked-bold-background: #533be5;
Description
color combos color-combos-locked-bold-background
sd-sage-color-combos-warning-default-foreground
$sd-sage-color-combos-warning-default-foreground: #db7303;
Description
color combos color-combos-warning-default-foreground
sd-sage-color-combos-warning-default-foreground-accent
$sd-sage-color-combos-warning-default-foreground-accent: #451902;
Description
color combos color-combos-warning-default-foreground-accent
sd-sage-color-combos-warning-default-background
$sd-sage-color-combos-warning-default-background: #fff3c6;
Description
color combos color-combos-warning-default-background
sd-sage-color-combos-warning-default-background-accent
$sd-sage-color-combos-warning-default-background-accent: #fed04b;
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: #db7303;
Description
color combos color-combos-warning-default-icon-background-accent
sd-sage-color-combos-warning-subtle-foreground
$sd-sage-color-combos-warning-subtle-foreground: #db7303;
Description
color combos color-combos-warning-subtle-foreground
sd-sage-color-combos-warning-subtle-foreground-accent
$sd-sage-color-combos-warning-subtle-foreground-accent: #fdbb21;
Description
color combos color-combos-warning-subtle-foreground-accent
sd-sage-color-combos-warning-subtle-background
$sd-sage-color-combos-warning-subtle-background: #fdbb21;
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: #fdbb21;
Description
color combos color-combos-warning-bold-background
sd-sage-color-combos-danger-default-foreground
$sd-sage-color-combos-danger-default-foreground: #991b1b;
Description
color combos color-combos-danger-default-foreground
sd-sage-color-combos-danger-default-foreground-accent
$sd-sage-color-combos-danger-default-foreground-accent: #572627;
Description
color combos color-combos-danger-default-foreground-accent
sd-sage-color-combos-danger-default-background
$sd-sage-color-combos-danger-default-background: #fee2e1;
Description
color combos color-combos-danger-default-background
sd-sage-color-combos-danger-default-background-accent
$sd-sage-color-combos-danger-default-background-accent: #fda5a5;
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: #ef4444;
Description
color combos color-combos-danger-default-icon-background-accent
sd-sage-color-combos-danger-subtle-foreground
$sd-sage-color-combos-danger-subtle-foreground: #991b1b;
Description
color combos color-combos-danger-subtle-foreground
sd-sage-color-combos-danger-subtle-foreground-accent
$sd-sage-color-combos-danger-subtle-foreground-accent: #fda5a5;
Description
color combos color-combos-danger-subtle-foreground-accent
sd-sage-color-combos-danger-subtle-background
$sd-sage-color-combos-danger-subtle-background: #fda5a5;
Description
color combos color-combos-danger-subtle-background
sd-sage-color-combos-danger-bold-foreground
$sd-sage-color-combos-danger-bold-foreground: #fee2e1;
Description
color combos color-combos-danger-bold-foreground
sd-sage-color-combos-danger-bold-background
$sd-sage-color-combos-danger-bold-background: #fda5a5;
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: #92c5fd;
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: #92c5fd;
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: #92c5fd;
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-blue
$sd-sage-color-core-blue: #2463eb;
Description
color core color-core-blue
sd-sage-color-core-green
$sd-sage-color-core-green: #079250;
Description
color core color-core-green
sd-sage-color-core-mercury
$sd-sage-color-core-mercury: #ff3e15;
Description
color core color-core-mercury
sd-sage-color-core-primary
$sd-sage-color-core-primary: #2463eb;
Description
color core color-core-primary
sd-sage-color-core-sage
$sd-sage-color-core-sage: #079250;
Description
color core color-core-sage
sd-sage-color-core-yellow
$sd-sage-color-core-yellow: #fdbb21;
Description
color core color-core-yellow
sd-sage-color-core-red
$sd-sage-color-core-red: #ef4444;
Description
color core color-core-red
sd-sage-color-core-orange
$sd-sage-color-core-orange: #ff3e15;
Description
color core color-core-orange
sd-sage-color-core-purple
$sd-sage-color-core-purple: #533be5;
Description
color core color-core-purple
sd-sage-color-core-charcoal
$sd-sage-color-core-charcoal: #4d4d4c;
Description
color core color-core-charcoal
sd-sage-color-core-grey
$sd-sage-color-core-grey: #828180;
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: (
blue: $sd-sage-color-core-blue,
green: $sd-sage-color-core-green,
mercury: $sd-sage-color-core-mercury,
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
We first convert the input to a unitless number, then divide by the base font size (default of 16) to obtain the equivalent ratio of rems. The resulting calculation is multiplied by 1rem
to "attach" the unit.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Length value, typically a | Length | — none |
Returns
Length
—Provided value as a rem
.
Example
Basic usage
// Declaration
.sage-box {
width: rem(200px);
}
// Output
.sage-box {
width: 12.5rem;
}
Requires
- [function]
strip-unit
- [variable]
sage-use-rem-conversion
Used by
- [mixin]
sage-copy-text
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-button-icon-generator
- [mixin]
sage-form-field-icon
- [mixin]
sage-form-field-icon
- [mixin]
sage-form-field-message
strip-unit
@function strip-unit($number) { ... }
Description
Strips non-numeric content from values See https://css-tricks.com/snippets/sass/strip-unit-function/
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | Length from which to strip a unit | Length | — none |
Returns
Number
—Unitless number
Used by
- [function]
rem
str-replace
@function str-replace($string, $search, $replace) { ... }
Description
Replace $search
with $replace
in $string
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | Initial string | String | — none |
$search | Substring to replace | String | — none |
$replace | ('') - New value | String | — none |
Returns
String
—Updated string
Used by
- [mixin]
sage-dashed-border
Author
Kitty Giraudel
unicode
@function unicode($str) { ... }
Description
Converts a string to unicode
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$str | The string to convert to unicode | String | — none |
variables
sage-use-rem-conversion
$sage-use-rem-conversion: true !default;
Description
Whether or not to use rem conversion across the system For use in cases where a theme has modified the root font-size to something other than the browser default.
Used by
- [function]
rem
mixins
clearfix
@mixin clearfix() { ... }
Description
Adds a clearfix psuedo-element for use in containers that may include floated elements. Testing a new item.
Parameters
None.
Example
Basic usage
.sage-box {
@include clearfix;
}
icon-rotate
@mixin icon-rotate($degrees, $rotation) { ... }
Description
Generates cross-browser icon rotations
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$degrees | Degrees value | Number | — none |
$rotation | Rotation value | Number | — none |
icon-flip
@mixin icon-flip($horiz, $vert, $rotation) { ... }
Description
Generates cross-browser icon flip in either axis
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$horiz | Whether or not to flip on the horizontal axis | Number | — none |
$vert | Whether or not to flip on the vertical axis | Number | — none |
$rotation | Rotation value | Number | — none |
overflow-scroll
@mixin overflow-scroll($dimension: y) { ... }
Description
Define overflow scrolling dimensions
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$dimension | The dimension along which to overflow. | String(y,x,all) | y |
Example
Basic usage
.sage-box {
@include overflow-scroll(x);
}
placeholder
@mixin placeholder() { ... }
Description
Outputs the enclosed style rules within browser-prefixed pseudo-element selectors for placeholder content. Includes:
- webkit
- moz (pseudo element and pseudo-class)
- ms
Parameters
None.
position
@mixin position($top: false, $right: false, $bottom: false, $left: false) { ... }
Description
Shorthand for setting positioning offsets on specific sides of an element.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$top | Top offset | Length | false |
$right | Right offset | Length | false |
$bottom | Bottom offset | Length | false |
$left | Left offset | Length | false |
Requires
- [function]
position-print-value
- [function]
position-print-value
- [function]
position-print-value
- [function]
position-print-value
position-full
@mixin position-full($offset: 0) { ... }
Description
Shorthand for absolute positioning an element to span all side of a container.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$offset | The desired offset to apply to all sides | Length | 0 |
Example
Basic usage
.sage-box {
@include position-full(4px);
}
truncate
@mixin truncate() { ... }
Description
Truncates text of the given element to a single line.
Parameters
None.
Used by
- [mixin]
sage-copy-text
target-safari
@mixin target-safari() { ... }
Description
Media Queries to target Safari browser
Parameters
None.