From 61bbc2d5008135c69dc21c5784d53d876a5eb5c7 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Tue, 30 Jul 2024 09:12:56 -0500 Subject: [PATCH] feat!(rebrand): mercury-rising rebrand effort ci: update rebrand mercury workflow for deployments revert(font-weight): combine font-weights back to *00 based fix: DSS-752 style(letter-spacing): updates to letter spacing for medium and smaller (#1922) fix: DSS-747 Co-authored-by: Julian Skinner style: update body-xs to 12px (#1926) refactor: removes page scope empty state and updates styles style: adds styles for Icon Card for default and compact variants style: adds gradient to icon card and empty state docs: removes unneeded examples and adds new props refactor: removes gradient refactor: renames scope prop to size chore: fixes Story name refactor: adds background color to icon docs: updates Empty States docs pages for Rails and React docs: updates React component description with better clarity chore: fixes linting issues chore: removes unneeded gradient references style(alert): adjust small variant icon alignment (#1930) style(checkbox): adjust checkbox margin for alignment (#1931) style(dropdown): add display flex to dropdown trigger (#1934) * style(dropdown): add display flex to dropdown trigger * style(dropdown): reorder css property style(badge): correct interactive icon size (#1935) style(line-height): update line-height to have rem units (#1933) fix(p): remove adjacent p tag spacing (#1936) fix: add white background color to box-like elements * fix(box-shadow): update box shadow token value * fix(box like components): add white background and md box shadow * fix(container): remove color and shadow from container * fix(css): updated order * fix(frame): update to fix background color with nested frames * fix(frame): add white background to bordered variant chore: adds scope prop to address spec failures chore: fixes syntax error fix: add panel box-shadow (#1944) * fix: add box-shadow to panel * fix: remove box-shadow from inner card and panels fix: updates placeholder assets & styles (#1947) * fix: add new image assets * style: adjust page heading image bg color * fix: add new image assets for storybook * fix: convert unsplash images to placeholders * fix: convert unsplash images to small placeholder * fix: hello linter my old friend * fix: update image in empty state fix: update line-height tokens (#1951) fix: update box shadows (#1952) * fix: update box shadows * fix: add space after comma ci: revert rebrand-mercury-rising back to original workflow this is done since release-deploy has been fixed. We hopes this solves this branch from not deploying properly in staging style(pagination): remove background color (#1956) style(choice): correct icon alignment (#1957) * style(choice): remove incorrect margin styles * docs(choice): add additional example without subtext fix(sortable): update template columns (#1960) fix(frame): add box shadow to bordered frame (#1958) style(tab): adjust tab underline variable value (#1959) chore: update pine-ds/icons to latets version fix: updates conditionals to make image optional (#1965) style: remove border from box like elements with box shadows (#1967) * style: add shadow to frame * style: remove border from box-like elements * chore: remove white space for linter style: change the active tab color to mercury 50 (#1969) Co-authored-by: Julian Skinner style: focus state updates (#1970) * style: update sage-focus-ring mixin * style: update focus-outline colors * fix: removes duplicate focus ring * style: update focus colors and sizing * style: adjust tab focus * fix: replace named color for linter style(alert): add borders (#1972) style(progress): update the default fill color to mercury-50 (#1971) Co-authored-by: Julian Skinner style(button): change border radius to 9999px (#1973) Co-authored-by: Julian Skinner style: update spacer to use logical properties (#1968) style(button): change the colors for the accent variant to be purple (#1974) Co-authored-by: Julian Skinner feature(loader): change loader to new behavior and colors (#1975) * feat(loader-rails): change the loader animation and fill color * feat(loader-react): change the loader animation and fill color * style(loader): change timing to 1.5s per convo with design team --------- Co-authored-by: Julian Skinner style: updates button font family style: add Faire Spring font family (#1980) Co-authored-by: Julian Skinner style(button): change button font-weight to med (500) (#1984) Co-authored-by: Julian Skinner fix(button): loading button wasn't animating, updated svg in button-spinner.js (#1987) Co-authored-by: Julian Skinner --- .github/workflows/rebrand-mercury-rising.yml | 3 + .../app/assets/images/card-placeholder-lg.png | Bin 551 -> 2239 bytes .../app/assets/images/card-placeholder-sm.png | Bin 732 -> 1387 bytes .../components/choice/_preview.html.erb | 9 + .../components/empty_state/_preview.html.erb | 64 +- .../components/empty_state/_props.html.erb | 32 +- .../components/list/_preview.html.erb | 4 +- .../components/media_tile/_preview.html.erb | 8 +- .../components/progress_bar/_preview.html.erb | 2 - docs/app/views/pages/_color_values.html.erb | 199 +- .../views/pages/_color_values_body.html.erb | 38 + docs/app/views/pages/color.html.erb | 29 +- .../stylesheets/docs/_colors.scss | 31 +- .../stylesheets/docs/_panel.scss | 11 +- .../app/sage_components/sage_empty_state.rb | 4 +- .../app/sage_tokens/sage_dictionary.rb | 902 +++++++- .../app/sage_tokens/sage_schemas.rb | 1 + .../sage_rails/app/sage_tokens/sage_tokens.rb | 15 + .../_sage_empty_state.html.erb | 22 +- .../views/sage_components/_sage_hero.html.erb | 12 +- .../sage_components/_sage_loader.html.erb | 21 +- .../_sage_progress_bar.html.erb | 2 +- lerna.json | 2 +- .../lib/stylesheets/components/_alert.scss | 26 +- .../lib/stylesheets/components/_badge.scss | 3 +- .../stylesheets/components/_breadcrumbs.scss | 10 +- .../lib/stylesheets/components/_button.scss | 46 +- .../lib/stylesheets/components/_card.scss | 7 + .../components/_card_highlight.scss | 13 +- .../lib/stylesheets/components/_checkbox.scss | 6 +- .../lib/stylesheets/components/_choice.scss | 14 +- .../stylesheets/components/_copy_text.scss | 2 +- .../lib/stylesheets/components/_dot.scss | 13 +- .../lib/stylesheets/components/_dropdown.scss | 23 +- .../stylesheets/components/_empty_state.scss | 115 +- .../lib/stylesheets/components/_hero.scss | 2 +- .../stylesheets/components/_icon_card.scss | 1 + .../lib/stylesheets/components/_link.scss | 4 +- .../lib/stylesheets/components/_loader.scss | 40 +- .../stylesheets/components/_media_tile.scss | 4 +- .../lib/stylesheets/components/_nav.scss | 12 +- .../stylesheets/components/_page_heading.scss | 2 +- .../stylesheets/components/_pagination.scss | 3 +- .../lib/stylesheets/components/_panel.scss | 5 + .../lib/stylesheets/components/_radio.scss | 4 +- .../lib/stylesheets/components/_search.scss | 5 +- .../lib/stylesheets/components/_sortable.scss | 2 +- .../lib/stylesheets/components/_stat_box.scss | 20 +- .../stylesheets/components/_status_icon.scss | 2 +- .../lib/stylesheets/components/_switch.scss | 7 + .../lib/stylesheets/components/_tab.scss | 4 +- .../lib/stylesheets/components/_toast.scss | 2 +- .../components/_transaction_card.scss | 7 + .../stylesheets/components/_typeahead.scss | 2 +- .../lib/stylesheets/core/_fonts.scss | 418 +++- .../lib/stylesheets/core/_typography.scss | 46 +- .../lib/stylesheets/core/_variables.scss | 5 +- .../lib/stylesheets/core/mixins/_sage.scss | 15 +- .../lib/stylesheets/dictionary/_tokens.scss | 1815 +++++++++++++++-- .../lib/stylesheets/global/_reboot.scss | 17 +- .../lib/stylesheets/layout/_frame.scss | 25 +- .../lib/stylesheets/tokens/_font_size.scss | 15 +- .../lib/stylesheets/tokens/_font_weight.scss | 1 + .../stylesheets/tokens/_letter_spacing.scss | 12 +- .../lib/stylesheets/tokens/_line_height.scss | 17 +- .../lib/stylesheets/tokens/_shadow.scss | 15 +- .../lib/stylesheets/tokens/_type_specs.scss | 72 +- .../lib/stylesheets/utilities/_spacer.scss | 14 +- packages/sage-react/lib/Card/Card.story.jsx | 4 +- .../sage-react/lib/Choice/Choice.story.jsx | 5 +- .../sage-react/lib/EmptyState/EmptyState.jsx | 72 +- .../lib/EmptyState/EmptyState.story.jsx | 63 - .../lib/EmptyState/EmptyState.story.mdx | 94 + packages/sage-react/lib/EmptyState/configs.js | 3 +- packages/sage-react/lib/Frame/Frame.jsx | 6 + packages/sage-react/lib/Frame/Frame.story.jsx | 18 +- packages/sage-react/lib/Frame/configs.js | 15 + packages/sage-react/lib/List/List.story.jsx | 3 +- packages/sage-react/lib/Loader/Loader.jsx | 58 +- .../lib/MediaTile/MediaTile.story.jsx | 3 +- .../lib/MediaTile/MediaTiles.story.jsx | 9 +- .../NextBestAction/NextBestAction.story.jsx | 3 +- packages/sage-react/lib/Panel/Panel.story.mdx | 5 +- .../lib/ProgressBar/ProgressBar.jsx | 2 +- .../lib/ProgressBar/ProgressBar.story.jsx | 3 +- .../lib/configs/dictionary/tokens.js | 902 +++++++- .../lib/configs/tokens/box_shadows.js | 14 + .../sage-react/lib/configs/tokens/index.js | 2 + .../public/CardPlaceholderLarge.png | Bin 0 -> 2239 bytes .../public/CardPlaceholderSmall.png | Bin 0 -> 1387 bytes packages/sage-system/lib/button-spinner.js | 18 +- style-dictionary/tokens/color/base.json | 506 ++++- style-dictionary/tokens/color/core.json | 9 + yarn.lock | 6 +- 94 files changed, 5005 insertions(+), 1122 deletions(-) create mode 100644 docs/app/views/pages/_color_values_body.html.erb delete mode 100644 packages/sage-react/lib/EmptyState/EmptyState.story.jsx create mode 100644 packages/sage-react/lib/EmptyState/EmptyState.story.mdx create mode 100644 packages/sage-react/lib/configs/tokens/box_shadows.js create mode 100644 packages/sage-react/public/CardPlaceholderLarge.png create mode 100644 packages/sage-react/public/CardPlaceholderSmall.png diff --git a/.github/workflows/rebrand-mercury-rising.yml b/.github/workflows/rebrand-mercury-rising.yml index d1f4820a66..227a6711c1 100644 --- a/.github/workflows/rebrand-mercury-rising.yml +++ b/.github/workflows/rebrand-mercury-rising.yml @@ -52,6 +52,9 @@ jobs: - name: Yarn Install run: yarn install --frozen-lockfile + - name: Build + run: NODE_OPTIONS=--openssl-legacy-provider yarn build + - name: Lerna Boostrap run: yarn lerna bootstrap --ci diff --git a/docs/app/assets/images/card-placeholder-lg.png b/docs/app/assets/images/card-placeholder-lg.png index b651c278c19f0893d8f46e1bda3340d47fa8a713..e069d7bf9c006c320615412e1d09b395e3a01261 100644 GIT binary patch literal 2239 zcmcJQ`(ILN9>=LrBuiT>s(EF$P3i7>>EgWvJ5#P>=4HxK%hH`Dp&GLUhd_xsu8r1) zIh6_;(NtQRWTQq%ilkyw0S6K9q^Tfy!BAAl$OYza=<~~Yp7;0je9rgzo*zzbbY$rA zrQa-t!C=e7zTbNQ23rilV2fVaEin@v)#1MRkrur_Cd6Pc==FM??xXIbMH3U_6XO1>4ygF{t3jz}cv$G4^3&dRL8Se@|-L!i}h_qm6cdKy4 zo~S3eP}wZM$JdZW8qD7mXjLoZjd_dJmHI{zFq^8HVr{#hkR z-7H)Bva)6ARaY*m;vbCmBTpXSoWgsmeK1) zjfGt~>i0_(G56OCIf$SQo&}#wiQ5n2^JCiWHa9PtXrDVaKlOC>9`BSeP8omH?FG~* z9UoIf74PmhzcUh+Oi$z%iucQdJ~t}`%TEV&Icb41RKd3xZ#!UpFxfd+PH za77KDFT@_o8&5k7@d(i~`SXQ+~mX%bb(y7Oe4ulh?xD^;};<03nm z0*{D;5~sr^T)<@8jwRri-w-$#8_`5cB*Jvz8sa~G4cQ@$`vO#l9#U?5VLfp_f)^zZ z4GP|E77|Im{cDDkkE|J?82)e?@D9s_DuRSJS@ca9wQJrF_6+1;)^XMOe*xaW1!$7n ze)jI9b_3Iq-@OIrYUfxd%AOm2EfIHs$)K85$o)vpG_m0#xBz&H@6YM5Ue?TD<*QD8aDSh2W8CKyp2C#h z`%4CAqG)4~dXlT>9zCqll6qB{VmnjSdy4sc%o>kF3A@x~L1M~I_NN}zLU}BxssqaW z@_ulX7z-s>0550xlm2&dG{9&p^9S%ER>j-;x4O^_gNX`w%L;F5Wq(T~yM(Xt$p?t- zq(>Y=bLY2`1$)MrO+9XU+g*7h^X>085$B*Gj<#oBfG!NNXH>E5w~}&{Io3)H^sqCt z=X8wZq!e`ZQ0qcCCpt&|zyT{)6Eu(4<)7%DW|_~MT`d{fxx?4hT)w%6BAk*BH;tbB zMvkYNkL^_N(CipNqKQ{gK9_;Qg2{z`LiMpyr1fnOE8MXn<(Pj&^+Fe0dtm3&5l-n- z9N^u5ccXU9=<7L4F}K9ERrKTc9ZHpg$xOgSW5k(LH>zJVqgHw17K5}g<4;!bh>7?M zXh_jkki$fvEDi@XDM`BE{D9%!9QFsBcKv`MbV5vbY5x!;nIYrnI>I-xa$ z%&!x`GIuaLGy}Iq*JFW$j10(xwr4C!-aw#AK-CQrLeXE%3dD5)b8{Xzhhn_7yusU{ zj*kUo*aj;mi~Q7Im^Kl7%Vf>&A4{#6M#oy+FoAWu7;ep?Z``4d*OzpFs!c#@vJ~HA z$Edn}jx3R79d|3*RuQQV#H|96fa7F5w10)O{wxYzHVLZMOG2QPWZE(^eW2!~*0B8= z^PneA{Oq;!JQ5vhYs!OT;if<{EZ$WPUoy--?SPKux(ilBXfH4zd>?Lso|Kc<_l#~{ zFG{|Xl#`M#UPg|jDrqU;-w$)gG_&Zf)%exo=^MP!;<*yW&z&^yTJ9Oj7?ZDJ`w6!7 z<3H%0qk~ni^57#5Qf_@zu!(e^xhBHzJN)xg+WJc9mF3Cu%n)Wb)!M{UbFaha*PCePds6~ew97*F4ZTL z?^ZP6D|r(RK90@D4#|cRKmYrhzCuS2k9#???vb!z@x#}*pN2|)P&Lx*2fIdE{NT|4NR$5k^5)av^r<(Q^gaDPES-Em z9-m%Zqh_7GN2QC8sPyVHYOU=nYSwlON>7pL?=5JplaqsHo!a!w>4gP}K0_vd2|BOu zSK|_Qp_ffL=+0Ma*!|l3lclo{O+KTZ=*efyd&s8QSARrWpZn+*lJ2q{nBIcY>uX&4 zr}v<=kErzIx*jp<)YE57diGYX@#%NB!OCrXI&XbwS_0CgO6Ah*Z^P5;E|pU$BHfGY zsmVV^r>FZfX0pepFHJqI@#*BI0V-Q*w(+ zD=K|SK4a27TY}QPSB{wUE-ib=*RHEHSKZ`*^rV>drYDc zxbt7I69n7aM8Z}919LkY27`AT!bc?(44X9a-2QN{pW+2bqEi8}W3=yjdJ*o*9F3O_Dk;7E{=Sg961tx|Mx;|6U8 zG~ebvhfB=!%q;SqzB%5V-Z=flWzWQ`V`CnA;xYCQgnu40~ zJTG#X_mXd&nVqr_=!&#P_mV@r_b@zCJ37_d?IS*2i=!Aj_xaq!)_CbFX*Jk|2=QGm z2;N?WWI_Z@@38$%9+wxeuX?*+Q>9 z2?(wO*C#-$ZH98#QX5tql(7~>Nm(YHQMK<5`sQ8`)y<-|M~+S+Um}!ATZ}}Ui=koZ zB=b?_+FBhq5P1Yn^LP6!Gbd0)c6Rjh#uhB%fCr-a5aZdg)WH-Ue;&A_Ge%n*BE&=Y zfNVWzycu^x zc?vV_Yf{Rk;>?CN84cs7dc@L8$>~$YqDiO|q~iMMeEwV>F|)`QgTVXiceaeuE%r&j z`u$BhO*4gwbqe)gm{u$smMP3fE=jK|6+X|4KUD^k1j*#Xyeja$0oKv*^oG+sxM~_E z<3P(AkSvG1NIF1IcF=c2^rR2;_d1>)Tq-ZO>B$WsfK^$j7sF|rxN0aiNeazCQBv0U zTY9d2aH?kw8nB)o^f924(Fc*&@0_JxB1QEB7XzKGh?+Ih!s9<5mj#nXrLp0wvsrqP z5t}I64V4Rp?@KuC%a_`RY9f!>0M3({*oxW4G(qxkL|N7lASSz_zB;{W=PdMM9D>lr zyGhaJTvBY|(tlb#x%77{)_lIo=WVWbq=`~)I!opx7dPkMtxCKl;*4<0np@ae581XD zk)r!S$2Bhy^+8B#`PRPgqACN-(0x$jR3fu*d7=Ho-0002BAlSJ8000S4OjJd?%h~7Ilgop%xZEp?0MHr(9F=#L(TK-)Go>)U*;e2|l_z77 z2UVYpB_32$V*8V^%!BIxJ@ yx%E@&hF5x6K#J0FWf7Hwj-I%GmS$4*2C?- zoxPo5%)si08Br~m6kjaZTU-E|8)jGKJVEZx*!1l@^n+^}&&mL-uAN!EF{((g03>J< zEJD9PmtYxM03;YtW?&PfaT!U>Pz9X@K8OfSfJN93(tit^?KkI~p&l>O3k%c(1GXb3 zURb1mp8W}$R~i$XTiTY+t23Y+HqAP8!e;CgXX*@OA1nafjMY+!4;BIJ?b%v-VHu#< zmbSwIK4}D?4%#-{;?>#0@#Gn>QR0OKM%k9O8$MXHW5@EfSMrAGxHYzDRr z{X;EwV}J2U;{vP^80uu@)7e<50Q>>YJIMu$&~E(0F}h$Gik-UKc_(;a9oR-A4ApA( zzyLn|&NVDMq!HL}&Zp$lS+lDqz>3YMD!^8oPn!U<^fCEkyIpo?ES)PAX@bs*jf^6| zY$snQf9!mu0Na&Vm0<}sWoPfdZdc~@rOOLTB1ugD`C9xkSXF*Zx&3PojtKw&Ko|fm zr1r030>7O=%Jw&@0RR910000000000000000DuD_p6h(>cc^Uu0000Icon Variation

Select any icon to appear to the left of the text.

+<%= sage_component SageChoice, { + target: "example", + text: "Option 1", + type: "icon", + icon: "video-on", + } +%> + +

With additional subtext.

<%= sage_component SageChoice, { target: "example", text: "Option 1", diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb index b1c7f56bc4..f033a770f5 100644 --- a/docs/app/views/examples/components/empty_state/_preview.html.erb +++ b/docs/app/views/examples/components/empty_state/_preview.html.erb @@ -8,79 +8,21 @@ <% end %>

With Icon and Compact

-

Compact variants, with less top and bottom padding, are useful for smaller contexts.

+

Compact variants, with a smaller icon, are useful for smaller contexts.

<%= sage_component SageEmptyState, { icon: "bold", title: "Title for state, compact variety", text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.", - scope: "compact", + size: "compact", } do %>

Other stuff such as buttons...

<% end %>

With Graphic

<%= sage_component SageEmptyState, { - graphic: image_tag("empty-state-sm.svg", alt: ""), + graphic: image_tag("card-placeholder-lg.png", alt: ""), title: "Title for state, with graphic instead of icon", text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.", } do %>

Other stuff such as buttons...

<% end %> - -

Page Scope and Graphic

-<%= sage_component SageEmptyState, { - title: "Create your first Email Campaign", - graphic: image_tag("empty-state-lg.svg", alt: ""), - scope: "page", -} do %> - <% content_for :sage_empty_state_text do %> -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Elit arcu volutpat cursus ultricies ac, ultricies. - Platea sed nibh molestie ut. -

- <% end %> - <% content_for :sage_empty_state_actions do %> - <%= sage_component SageButtonGroup, { gap: :sm } do %> - <%= sage_component SageButton, { - attributes: { href: "#" }, - style: "primary", - value: "Create Email Campaigns", - } %> - <%= sage_component SageButton, { - attributes: { href: "#" }, - style: "secondary", - subtle: true, - value: "Learn More", - } %> - <% end %> - <% end %> -<% end %> - -

Page Scope and Graphic with Video

-<%= sage_component SageEmptyState, { - title: "Create your first Email Campaign", - graphic: image_tag("empty-state-lg.svg", alt: ""), - scope: "page", -} do %> - <% content_for :sage_empty_state_text do %> -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Elit arcu volutpat cursus ultricies ac, ultricies. - Platea sed nibh molestie ut. -

- <% end %> - <% content_for :sage_empty_state_actions do %> - <%= sage_component SageButton, { - attributes: { href: "#" }, - style: "primary", - value: "Create Email Campaigns", - } %> - <%= sage_component SageButton, { - attributes: { href: "#" }, - style: "secondary", - subtle: true, - value: "Learn More", - } %> - <% end %> -<% end %> diff --git a/docs/app/views/examples/components/empty_state/_props.html.erb b/docs/app/views/examples/components/empty_state/_props.html.erb index 78d94b1012..8ea699b93d 100644 --- a/docs/app/views/examples/components/empty_state/_props.html.erb +++ b/docs/app/views/examples/components/empty_state/_props.html.erb @@ -1,6 +1,6 @@ <%= md('`center_vertical`') %> - <%= md('If true, the empty state will be adjust to be visually centered inside the entire page context. Meant to be used in pairing with `scope: "page"`.') %> + <%= md('If true, the empty state will be visually centered inside the entire page context.') %> <%= md('Boolean') %> <%= md('`false`') %> @@ -17,14 +17,13 @@ <%= md('`nil`') %> - <%= md('`scope`') %> - <%= md('The layout of the component adjusts depending on this context setting: - -- `nil` (default) sets up a "feature"-level layout for use within panels or cards for showing empty state for particular features. + <%= md('`size`') %> + <%= md('The size of the icon adjusts depending on this context setting: + +- `nil` (default) sets up a "feature"-level layout for use on whole page empty states and is intended to fill the stage. - `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts. -- `"page"` is for use on whole page empty states and is intended to fill the stage. ') %> - <%= md('`nil` | `"compact"` | `"page"`') %> + <%= md('`nil` | `"compact"`') %> <%= md('`nil`') %> @@ -48,11 +47,28 @@ Content Slots + + <%= md('`:sage_empty_state_actions`') %> + <%= md(' + Slot into which buttons or other actions can be placed. + ') %> + + + + + <%= md('`:sage_empty_state_text`') %> + <%= md(' + Slot into which text can be placed. + ') %> + + + <%= md('`:sage_empty_state_video`') %> <%= md(' - Slot into which video cards or other media can be placed. + Slot into which video cards or other media can be placed. ') %> + diff --git a/docs/app/views/examples/components/list/_preview.html.erb b/docs/app/views/examples/components/list/_preview.html.erb index 998fb90be2..6958351c1d 100644 --- a/docs/app/views/examples/components/list/_preview.html.erb +++ b/docs/app/views/examples/components/list/_preview.html.erb @@ -124,7 +124,7 @@ Note that this example also implements the [Reveal utility class](#{pages_helper css_classes: SageClassnames::REVEAL_CONTAINER, } do %> <%= sage_component SageCardRow, { grid_template: "ete" } do %> - + <%= sage_component SageCardBlock, {} do %>

<%= item[:name] %>

Item <%= item[:id] %> specs

@@ -161,7 +161,7 @@ Note that this example also implements the [Reveal utility class](#{pages_helper more_actions: { items: dropdown_items(item[:id]) }, } do %> <%= sage_component SageCardRow, { grid_template: "ete" } do %> - + <%= sage_component SageCardBlock, {} do %> <%= sage_component SageLink, { spacer: { bottom: "2xs" }, diff --git a/docs/app/views/examples/components/media_tile/_preview.html.erb b/docs/app/views/examples/components/media_tile/_preview.html.erb index c0eb17fea4..dc7e7a48c5 100644 --- a/docs/app/views/examples/components/media_tile/_preview.html.erb +++ b/docs/app/views/examples/components/media_tile/_preview.html.erb @@ -32,7 +32,7 @@ panels = [ caption: %(

Vivamus dictum rutrum dui, nec placerat ante

), - media: %(Image of Product Abra), + media: %(Image of Product Abra), title: "Product Abra", }, { @@ -44,7 +44,7 @@ panels = [ caption: %(

Suspendisse eu tellus quis arcu sagittis semper

), - media: %(Image of Product Cadabra), + media: %(Image of Product Cadabra), title: "Product Cadabra", }, { @@ -56,7 +56,7 @@ panels = [ caption: %(

Maecenas vitae leo eu tellus efficitur viverra sit amet ut tortor vestibulum

), - media: %(Image of Product Jimminycricket), + media: %(Image of Product Jimminycricket), title: "Product Jimminycricket", }, ] @@ -155,7 +155,7 @@ NOTE: the examples below omit `media` but this can safely be used as well with t title_tag: "h2", } do %> <%= content_for :sage_media_tile_media do %> - MEDIA Image of Product Abra + MEDIA Image of Product Abra <% end %> <%= content_for :sage_media_tile_actions_custom do %> <%= sage_component SageBadge, { value: "CUSTOM Draft", color: "draft" } %> diff --git a/docs/app/views/examples/components/progress_bar/_preview.html.erb b/docs/app/views/examples/components/progress_bar/_preview.html.erb index 67ffdbe41f..28bdcbe607 100644 --- a/docs/app/views/examples/components/progress_bar/_preview.html.erb +++ b/docs/app/views/examples/components/progress_bar/_preview.html.erb @@ -1,13 +1,11 @@

Default

<%= sage_component SageProgressBar, { - color: SageTokens::COLOR_PALETTE[:PRIMARY_300], percent: 70, label: "Cloning product" } %>

Default with Percentage

<%= sage_component SageProgressBar, { - color: SageTokens::COLOR_PALETTE[:SAGE_300], display_percent: true, percent: 70, label: "Cloning product" diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb index fee9cb8e38..ffebface9d 100644 --- a/docs/app/views/pages/_color_values.html.erb +++ b/docs/app/views/pages/_color_values.html.erb @@ -1,192 +1,11 @@
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_100" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_100" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_100]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_100" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_200" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_200" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_200]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_200" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_300" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_300" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_300]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_300" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_400" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_400" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_400]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_400" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_500" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_500" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_500]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_500" - } %> -
-
-
-
+ <% if color == "primary" || color == "sage" || color == "orange" %> + <% [100, 200, 300, 400, 500].each do |value| %> + <%= render "color_values_body", color: color, value: value %> + <% end %> + <% else %> + <% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %> + <%= render "color_values_body", color: color, value: value %> + <% end %> + <% end %>
diff --git a/docs/app/views/pages/_color_values_body.html.erb b/docs/app/views/pages/_color_values_body.html.erb new file mode 100644 index 0000000000..5006844d44 --- /dev/null +++ b/docs/app/views/pages/_color_values_body.html.erb @@ -0,0 +1,38 @@ +
+
+
"> +

Classname Token

+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageClassnames::TYPE_COLORS::#{color.upcase}_#{value}" + } %> +
+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageClassnames.TYPE_COLORS.#{color.upcase}_#{value}" + } %> +
+
+
+

Hex Token

+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_#{value}]" + } %> +
+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageTokens.COLOR_PALETTE.#{color.upcase}_#{value}" + } %> +
+
+
+
diff --git a/docs/app/views/pages/color.html.erb b/docs/app/views/pages/color.html.erb index 650d7cc901..20837149db 100644 --- a/docs/app/views/pages/color.html.erb +++ b/docs/app/views/pages/color.html.erb @@ -26,17 +26,17 @@ General background and text colors. Text and border colors, drop-shadows, and other interface components. ", use_sage_type: true) %> - <%= render "color_values_neutral", color: "grey"%> - <%= render "color_values_neutral", color: "charcoal"%> + <%= render "color_values", color: "grey"%>
<%= md(" ## Primary palette -Kajabi blue is the primary color used to signify that an element is clickable or has a selected state. +To signify that an element is clickable or has a selected state. ", use_sage_type: true) %> - <%= render "color_values", color: "primary"%> + <%= render "color_values", color: "blue"%> + <%= render "color_values", color: "mercury"%>
@@ -45,7 +45,7 @@ Kajabi blue is the primary color used to signify that an element is clickable or To communicate success and positive states. ", use_sage_type: true) %> - <%= render "color_values", color: "sage"%> + <%= render "color_values", color: "green"%>
@@ -73,5 +73,24 @@ Reserved for times when something important is missing or for irreversible or de Used only when no other color option is available. ", use_sage_type: true) %> <%= render "color_values", color: "purple"%> +
+ +
+<%= md(" +## Deprecated colors + +It is no longer recommended to use these colors. +", use_sage_type: true) %> +

Primary

+

Blue should be used instead of primary.

+ <%= render "color_values", color: "primary"%> +

Sage

+

Green should be used instead of sage.

+ <%= render "color_values", color: "sage"%> +

Orange

+

Mercury should be used instead of orange.

<%= render "color_values", color: "orange"%> +

Charcoal

+

Grey should be used instead of charcoal.

+ <%= render "color_values_neutral", color: "charcoal"%>
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index 9c83ba03cd..a705c5abc4 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -52,18 +52,39 @@ font-size: sage-font-size(body); background: $hex; - @if (($name == white) or ($name == grey)) { + @if ($name == grey and $value > 40) { + color: sage-color(white); + } + @else if ($name == white or $name == grey) { color: sage-color(charcoal, 500); } - - @else if (($name == black) or ($name == charcoal)) { + @else if ($name == black or $name == charcoal) { + color: sage-color(white); + } + @else if ($name == blue and $value > 40) { + color: sage-color(blue, 20); + } + @else if ($name == blue) { + color: sage-color(blue, 95); + } + @else if ($name == mercury and $value > 20) { + color: sage-color(white); + } + @else if ($name == mercury) { + color: sage-color(mercury, 50); + } + @else if ($name == green and $value > 20) { + color: sage-color(white); + } + @else if ($name == green) { + color: sage-color(green, 60); + } + @else if ($name == yellow and $value > 30) { color: sage-color(white); } - @else if (lightness($hex) < 65) { color: sage-color($name, 100); } - @else { color: sage-color($name, 400); } diff --git a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss index 4e10874734..e9be56793c 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss @@ -1,7 +1,16 @@ .docs-panel { @include sage-panel; - + + .sage-card, + .sage-panel { + box-shadow: none; + } + @media screen and (min-width: sage-breakpoint(lg-min)) { padding: 5rem; } + + p + p { + margin-top: 1.5rem; + } } diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb index 79a7fc2112..9b8b2af6dd 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb @@ -3,10 +3,12 @@ class SageEmptyState < SageComponent center_vertical: [:optional, NilClass, TrueClass], graphic: [:optional, NilClass, String], icon: [:optional, NilClass, String], + icon_background: [:optional, NilClass, String], scope: [:optional, NilClass, Set.new(["page", "compact", nil])], + size: [:optional, NilClass, Set.new(["compact", nil])], text: [:optional, NilClass, String], title: [:optional, NilClass, String], - title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h5", "h6"])], + title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h6"])], }) def sections %w(empty_state_actions empty_state_text empty_state_video) diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb index 9b9ccacc87..f76cae65af 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -21,124 +21,376 @@ module SageDictionary # # Static vars for COLOR BASE # - SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#e6f4fe" + SD_SAGE_COLOR_BASE_BLUE_5_HEX = "#fafcff" + SD_SAGE_COLOR_BASE_BLUE_5_CODE = "blue-5" + SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME = "t-sage--color-blue-5" + SD_SAGE_COLOR_BASE_BLUE_10_HEX = "#eff6ff" + SD_SAGE_COLOR_BASE_BLUE_10_CODE = "blue-10" + SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME = "t-sage--color-blue-10" + SD_SAGE_COLOR_BASE_BLUE_15_HEX = "#dbe9fe" + SD_SAGE_COLOR_BASE_BLUE_15_CODE = "blue-15" + SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME = "t-sage--color-blue-15" + SD_SAGE_COLOR_BASE_BLUE_20_HEX = "#bfdbfe" + SD_SAGE_COLOR_BASE_BLUE_20_CODE = "blue-20" + SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME = "t-sage--color-blue-20" + SD_SAGE_COLOR_BASE_BLUE_30_HEX = "#92c5fd" + SD_SAGE_COLOR_BASE_BLUE_30_CODE = "blue-30" + SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME = "t-sage--color-blue-30" + SD_SAGE_COLOR_BASE_BLUE_40_HEX = "#60a5fa" + SD_SAGE_COLOR_BASE_BLUE_40_CODE = "blue-40" + SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME = "t-sage--color-blue-40" + SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#3c82f6" + SD_SAGE_COLOR_BASE_BLUE_50_CODE = "blue-50" + SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME = "t-sage--color-blue-50" + SD_SAGE_COLOR_BASE_BLUE_60_HEX = "#2463eb" + SD_SAGE_COLOR_BASE_BLUE_60_CODE = "blue-60" + SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME = "t-sage--color-blue-60" + SD_SAGE_COLOR_BASE_BLUE_70_HEX = "#1c4ed8" + SD_SAGE_COLOR_BASE_BLUE_70_CODE = "blue-70" + SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME = "t-sage--color-blue-70" + SD_SAGE_COLOR_BASE_BLUE_80_HEX = "#1d40ae" + SD_SAGE_COLOR_BASE_BLUE_80_CODE = "blue-80" + SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME = "t-sage--color-blue-80" + SD_SAGE_COLOR_BASE_BLUE_90_HEX = "#1f3a8a" + SD_SAGE_COLOR_BASE_BLUE_90_CODE = "blue-90" + SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME = "t-sage--color-blue-90" + SD_SAGE_COLOR_BASE_BLUE_95_HEX = "#172554" + SD_SAGE_COLOR_BASE_BLUE_95_CODE = "blue-95" + SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME = "t-sage--color-blue-95" + SD_SAGE_COLOR_BASE_GREEN_5_HEX = "#fbfefc" + SD_SAGE_COLOR_BASE_GREEN_5_CODE = "green-5" + SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME = "t-sage--color-green-5" + SD_SAGE_COLOR_BASE_GREEN_10_HEX = "#edfcf2" + SD_SAGE_COLOR_BASE_GREEN_10_CODE = "green-10" + SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME = "t-sage--color-green-10" + SD_SAGE_COLOR_BASE_GREEN_15_HEX = "#d3f8df" + SD_SAGE_COLOR_BASE_GREEN_15_CODE = "green-15" + SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME = "t-sage--color-green-15" + SD_SAGE_COLOR_BASE_GREEN_20_HEX = "#aaf0c4" + SD_SAGE_COLOR_BASE_GREEN_20_CODE = "green-20" + SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME = "t-sage--color-green-20" + SD_SAGE_COLOR_BASE_GREEN_30_HEX = "#73e2a3" + SD_SAGE_COLOR_BASE_GREEN_30_CODE = "green-30" + SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME = "t-sage--color-green-30" + SD_SAGE_COLOR_BASE_GREEN_40_HEX = "#3dcb7f" + SD_SAGE_COLOR_BASE_GREEN_40_CODE = "green-40" + SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME = "t-sage--color-green-40" + SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#17b365" + SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50" + SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50" + SD_SAGE_COLOR_BASE_GREEN_60_HEX = "#079250" + SD_SAGE_COLOR_BASE_GREEN_60_CODE = "green-60" + SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME = "t-sage--color-green-60" + SD_SAGE_COLOR_BASE_GREEN_70_HEX = "#097443" + SD_SAGE_COLOR_BASE_GREEN_70_CODE = "green-70" + SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME = "t-sage--color-green-70" + SD_SAGE_COLOR_BASE_GREEN_80_HEX = "#085c37" + SD_SAGE_COLOR_BASE_GREEN_80_CODE = "green-80" + SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME = "t-sage--color-green-80" + SD_SAGE_COLOR_BASE_GREEN_90_HEX = "#094c2f" + SD_SAGE_COLOR_BASE_GREEN_90_CODE = "green-90" + SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME = "t-sage--color-green-90" + SD_SAGE_COLOR_BASE_GREEN_95_HEX = "#052e1c" + SD_SAGE_COLOR_BASE_GREEN_95_CODE = "green-95" + SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME = "t-sage--color-green-95" + SD_SAGE_COLOR_BASE_MERCURY_5_HEX = "#fffcfa" + SD_SAGE_COLOR_BASE_MERCURY_5_CODE = "mercury-5" + SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME = "t-sage--color-mercury-5" + SD_SAGE_COLOR_BASE_MERCURY_10_HEX = "#fff3ed" + SD_SAGE_COLOR_BASE_MERCURY_10_CODE = "mercury-10" + SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME = "t-sage--color-mercury-10" + SD_SAGE_COLOR_BASE_MERCURY_15_HEX = "#ffe3d4" + SD_SAGE_COLOR_BASE_MERCURY_15_CODE = "mercury-15" + SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME = "t-sage--color-mercury-15" + SD_SAGE_COLOR_BASE_MERCURY_20_HEX = "#ffc3a8" + SD_SAGE_COLOR_BASE_MERCURY_20_CODE = "mercury-20" + SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME = "t-sage--color-mercury-20" + SD_SAGE_COLOR_BASE_MERCURY_30_HEX = "#ff9970" + SD_SAGE_COLOR_BASE_MERCURY_30_CODE = "mercury-30" + SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME = "t-sage--color-mercury-30" + SD_SAGE_COLOR_BASE_MERCURY_40_HEX = "#ff6337" + SD_SAGE_COLOR_BASE_MERCURY_40_CODE = "mercury-40" + SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME = "t-sage--color-mercury-40" + SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#ff3e15" + SD_SAGE_COLOR_BASE_MERCURY_50_CODE = "mercury-50" + SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME = "t-sage--color-mercury-50" + SD_SAGE_COLOR_BASE_MERCURY_60_HEX = "#f11f06" + SD_SAGE_COLOR_BASE_MERCURY_60_CODE = "mercury-60" + SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME = "t-sage--color-mercury-60" + SD_SAGE_COLOR_BASE_MERCURY_70_HEX = "#c81307" + SD_SAGE_COLOR_BASE_MERCURY_70_CODE = "mercury-70" + SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME = "t-sage--color-mercury-70" + SD_SAGE_COLOR_BASE_MERCURY_80_HEX = "#9e110e" + SD_SAGE_COLOR_BASE_MERCURY_80_CODE = "mercury-80" + SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME = "t-sage--color-mercury-80" + SD_SAGE_COLOR_BASE_MERCURY_90_HEX = "#7f120f" + SD_SAGE_COLOR_BASE_MERCURY_90_CODE = "mercury-90" + SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME = "t-sage--color-mercury-90" + SD_SAGE_COLOR_BASE_MERCURY_95_HEX = "#450506" + SD_SAGE_COLOR_BASE_MERCURY_95_CODE = "mercury-95" + SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME = "t-sage--color-mercury-95" + SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#dbe9fe" SD_SAGE_COLOR_BASE_PRIMARY_100_CODE = "primary-100" SD_SAGE_COLOR_BASE_PRIMARY_100_CLASSNAME = "t-sage--color-primary-100" - SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#8ecafb" + SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#92c5fd" SD_SAGE_COLOR_BASE_PRIMARY_200_CODE = "primary-200" SD_SAGE_COLOR_BASE_PRIMARY_200_CLASSNAME = "t-sage--color-primary-200" - SD_SAGE_COLOR_BASE_PRIMARY_300_HEX = "#0072ef" + SD_SAGE_COLOR_BASE_PRIMARY_300_HEX = "#2463eb" SD_SAGE_COLOR_BASE_PRIMARY_300_CODE = "primary-300" SD_SAGE_COLOR_BASE_PRIMARY_300_CLASSNAME = "t-sage--color-primary-300" - SD_SAGE_COLOR_BASE_PRIMARY_400_HEX = "#054fb8" + SD_SAGE_COLOR_BASE_PRIMARY_400_HEX = "#1c4ed8" SD_SAGE_COLOR_BASE_PRIMARY_400_CODE = "primary-400" SD_SAGE_COLOR_BASE_PRIMARY_400_CLASSNAME = "t-sage--color-primary-400" - SD_SAGE_COLOR_BASE_PRIMARY_500_HEX = "#07265f" + SD_SAGE_COLOR_BASE_PRIMARY_500_HEX = "#172554" SD_SAGE_COLOR_BASE_PRIMARY_500_CODE = "primary-500" SD_SAGE_COLOR_BASE_PRIMARY_500_CLASSNAME = "t-sage--color-primary-500" - SD_SAGE_COLOR_BASE_SAGE_100_HEX = "#ddf8f0" + SD_SAGE_COLOR_BASE_SAGE_100_HEX = "#d3f8df" SD_SAGE_COLOR_BASE_SAGE_100_CODE = "sage-100" SD_SAGE_COLOR_BASE_SAGE_100_CLASSNAME = "t-sage--color-sage-100" - SD_SAGE_COLOR_BASE_SAGE_200_HEX = "#86d5bc" + SD_SAGE_COLOR_BASE_SAGE_200_HEX = "#73e2a3" SD_SAGE_COLOR_BASE_SAGE_200_CODE = "sage-200" SD_SAGE_COLOR_BASE_SAGE_200_CLASSNAME = "t-sage--color-sage-200" - SD_SAGE_COLOR_BASE_SAGE_300_HEX = "#23856d" + SD_SAGE_COLOR_BASE_SAGE_300_HEX = "#079250" SD_SAGE_COLOR_BASE_SAGE_300_CODE = "sage-300" SD_SAGE_COLOR_BASE_SAGE_300_CLASSNAME = "t-sage--color-sage-300" - SD_SAGE_COLOR_BASE_SAGE_400_HEX = "#225d53" + SD_SAGE_COLOR_BASE_SAGE_400_HEX = "#085c37" SD_SAGE_COLOR_BASE_SAGE_400_CODE = "sage-400" SD_SAGE_COLOR_BASE_SAGE_400_CLASSNAME = "t-sage--color-sage-400" - SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#183e3b" + SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#052e1c" SD_SAGE_COLOR_BASE_SAGE_500_CODE = "sage-500" SD_SAGE_COLOR_BASE_SAGE_500_CLASSNAME = "t-sage--color-sage-500" - SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fef8e1" + SD_SAGE_COLOR_BASE_YELLOW_5_HEX = "#fffefa" + SD_SAGE_COLOR_BASE_YELLOW_5_CODE = "yellow-5" + SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME = "t-sage--color-yellow-5" + SD_SAGE_COLOR_BASE_YELLOW_10_HEX = "#fffbeb" + SD_SAGE_COLOR_BASE_YELLOW_10_CODE = "yellow-10" + SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME = "t-sage--color-yellow-10" + SD_SAGE_COLOR_BASE_YELLOW_15_HEX = "#fff3c6" + SD_SAGE_COLOR_BASE_YELLOW_15_CODE = "yellow-15" + SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME = "t-sage--color-yellow-15" + SD_SAGE_COLOR_BASE_YELLOW_20_HEX = "#fee589" + SD_SAGE_COLOR_BASE_YELLOW_20_CODE = "yellow-20" + SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME = "t-sage--color-yellow-20" + SD_SAGE_COLOR_BASE_YELLOW_30_HEX = "#fed04b" + SD_SAGE_COLOR_BASE_YELLOW_30_CODE = "yellow-30" + SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME = "t-sage--color-yellow-30" + SD_SAGE_COLOR_BASE_YELLOW_40_HEX = "#fdbb21" + SD_SAGE_COLOR_BASE_YELLOW_40_CODE = "yellow-40" + SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME = "t-sage--color-yellow-40" + SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#f79a0b" + SD_SAGE_COLOR_BASE_YELLOW_50_CODE = "yellow-50" + SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME = "t-sage--color-yellow-50" + SD_SAGE_COLOR_BASE_YELLOW_60_HEX = "#db7303" + SD_SAGE_COLOR_BASE_YELLOW_60_CODE = "yellow-60" + SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME = "t-sage--color-yellow-60" + SD_SAGE_COLOR_BASE_YELLOW_70_HEX = "#b64f06" + SD_SAGE_COLOR_BASE_YELLOW_70_CODE = "yellow-70" + SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME = "t-sage--color-yellow-70" + SD_SAGE_COLOR_BASE_YELLOW_80_HEX = "#943d0e" + SD_SAGE_COLOR_BASE_YELLOW_80_CODE = "yellow-80" + SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME = "t-sage--color-yellow-80" + SD_SAGE_COLOR_BASE_YELLOW_90_HEX = "#79330e" + SD_SAGE_COLOR_BASE_YELLOW_90_CODE = "yellow-90" + SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME = "t-sage--color-yellow-90" + SD_SAGE_COLOR_BASE_YELLOW_95_HEX = "#451902" + SD_SAGE_COLOR_BASE_YELLOW_95_CODE = "yellow-95" + SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME = "t-sage--color-yellow-95" + SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fff3c6" SD_SAGE_COLOR_BASE_YELLOW_100_CODE = "yellow-100" SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME = "t-sage--color-yellow-100" - SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fad980" + SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fed04b" SD_SAGE_COLOR_BASE_YELLOW_200_CODE = "yellow-200" SD_SAGE_COLOR_BASE_YELLOW_200_CLASSNAME = "t-sage--color-yellow-200" - SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#ffc505" + SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#fdbb21" SD_SAGE_COLOR_BASE_YELLOW_300_CODE = "yellow-300" SD_SAGE_COLOR_BASE_YELLOW_300_CLASSNAME = "t-sage--color-yellow-300" - SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#c56a02" + SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#db7303" SD_SAGE_COLOR_BASE_YELLOW_400_CODE = "yellow-400" SD_SAGE_COLOR_BASE_YELLOW_400_CLASSNAME = "t-sage--color-yellow-400" - SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#8c3b08" + SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#451902" SD_SAGE_COLOR_BASE_YELLOW_500_CODE = "yellow-500" SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME = "t-sage--color-yellow-500" - SD_SAGE_COLOR_BASE_RED_100_HEX = "#fff0f0" + SD_SAGE_COLOR_BASE_RED_5_HEX = "#fffafa" + SD_SAGE_COLOR_BASE_RED_5_CODE = "red-5" + SD_SAGE_COLOR_BASE_RED_5_CLASSNAME = "t-sage--color-red-5" + SD_SAGE_COLOR_BASE_RED_10_HEX = "#fef2f2" + SD_SAGE_COLOR_BASE_RED_10_CODE = "red-10" + SD_SAGE_COLOR_BASE_RED_10_CLASSNAME = "t-sage--color-red-10" + SD_SAGE_COLOR_BASE_RED_15_HEX = "#fee2e1" + SD_SAGE_COLOR_BASE_RED_15_CODE = "red-15" + SD_SAGE_COLOR_BASE_RED_15_CLASSNAME = "t-sage--color-red-15" + SD_SAGE_COLOR_BASE_RED_20_HEX = "#fecaca" + SD_SAGE_COLOR_BASE_RED_20_CODE = "red-20" + SD_SAGE_COLOR_BASE_RED_20_CLASSNAME = "t-sage--color-red-20" + SD_SAGE_COLOR_BASE_RED_30_HEX = "#fda5a5" + SD_SAGE_COLOR_BASE_RED_30_CODE = "red-30" + SD_SAGE_COLOR_BASE_RED_30_CLASSNAME = "t-sage--color-red-30" + SD_SAGE_COLOR_BASE_RED_40_HEX = "#f87171" + SD_SAGE_COLOR_BASE_RED_40_CODE = "red-40" + SD_SAGE_COLOR_BASE_RED_40_CLASSNAME = "t-sage--color-red-40" + SD_SAGE_COLOR_BASE_RED_50_HEX = "#ef4444" + SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" + SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" + SD_SAGE_COLOR_BASE_RED_60_HEX = "#dc2625" + SD_SAGE_COLOR_BASE_RED_60_CODE = "red-60" + SD_SAGE_COLOR_BASE_RED_60_CLASSNAME = "t-sage--color-red-60" + SD_SAGE_COLOR_BASE_RED_70_HEX = "#b91c1b" + SD_SAGE_COLOR_BASE_RED_70_CODE = "red-70" + SD_SAGE_COLOR_BASE_RED_70_CLASSNAME = "t-sage--color-red-70" + SD_SAGE_COLOR_BASE_RED_80_HEX = "#991b1b" + SD_SAGE_COLOR_BASE_RED_80_CODE = "red-80" + SD_SAGE_COLOR_BASE_RED_80_CLASSNAME = "t-sage--color-red-80" + SD_SAGE_COLOR_BASE_RED_90_HEX = "#7f1c1d" + SD_SAGE_COLOR_BASE_RED_90_CODE = "red-90" + SD_SAGE_COLOR_BASE_RED_90_CLASSNAME = "t-sage--color-red-90" + SD_SAGE_COLOR_BASE_RED_95_HEX = "#572627" + SD_SAGE_COLOR_BASE_RED_95_CODE = "red-95" + SD_SAGE_COLOR_BASE_RED_95_CLASSNAME = "t-sage--color-red-95" + SD_SAGE_COLOR_BASE_RED_100_HEX = "#fee2e1" SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100" SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" - SD_SAGE_COLOR_BASE_RED_200_HEX = "#fdb0aa" + SD_SAGE_COLOR_BASE_RED_200_HEX = "#fda5a5" SD_SAGE_COLOR_BASE_RED_200_CODE = "red-200" SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-200" - SD_SAGE_COLOR_BASE_RED_300_HEX = "#cf3c32" + SD_SAGE_COLOR_BASE_RED_300_HEX = "#ef4444" SD_SAGE_COLOR_BASE_RED_300_CODE = "red-300" SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-300" - SD_SAGE_COLOR_BASE_RED_400_HEX = "#99221e" + SD_SAGE_COLOR_BASE_RED_400_HEX = "#991b1b" SD_SAGE_COLOR_BASE_RED_400_CODE = "red-400" SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-400" - SD_SAGE_COLOR_BASE_RED_500_HEX = "#5e0d0d" + SD_SAGE_COLOR_BASE_RED_500_HEX = "#572627" SD_SAGE_COLOR_BASE_RED_500_CODE = "red-500" SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-500" - SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#fef1e1" + SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" - SD_SAGE_COLOR_BASE_ORANGE_200_HEX = "#ffb36b" + SD_SAGE_COLOR_BASE_ORANGE_200_HEX = "#ff9970" SD_SAGE_COLOR_BASE_ORANGE_200_CODE = "orange-200" SD_SAGE_COLOR_BASE_ORANGE_200_CLASSNAME = "t-sage--color-orange-200" - SD_SAGE_COLOR_BASE_ORANGE_300_HEX = "#fb7e09" + SD_SAGE_COLOR_BASE_ORANGE_300_HEX = "#ff3e15" SD_SAGE_COLOR_BASE_ORANGE_300_CODE = "orange-300" SD_SAGE_COLOR_BASE_ORANGE_300_CLASSNAME = "t-sage--color-orange-300" - SD_SAGE_COLOR_BASE_ORANGE_400_HEX = "#b3501e" + SD_SAGE_COLOR_BASE_ORANGE_400_HEX = "#9e110e" SD_SAGE_COLOR_BASE_ORANGE_400_CODE = "orange-400" SD_SAGE_COLOR_BASE_ORANGE_400_CLASSNAME = "t-sage--color-orange-400" - SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#5a260c" + SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#450506" SD_SAGE_COLOR_BASE_ORANGE_500_CODE = "orange-500" SD_SAGE_COLOR_BASE_ORANGE_500_CLASSNAME = "t-sage--color-orange-500" - SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#eee4f6" + SD_SAGE_COLOR_BASE_PURPLE_5_HEX = "#fafbff" + SD_SAGE_COLOR_BASE_PURPLE_5_CODE = "purple-5" + SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME = "t-sage--color-purple-5" + SD_SAGE_COLOR_BASE_PURPLE_10_HEX = "#edf1ff" + SD_SAGE_COLOR_BASE_PURPLE_10_CODE = "purple-10" + SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME = "t-sage--color-purple-10" + SD_SAGE_COLOR_BASE_PURPLE_15_HEX = "#e0e4ff" + SD_SAGE_COLOR_BASE_PURPLE_15_CODE = "purple-15" + SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME = "t-sage--color-purple-15" + SD_SAGE_COLOR_BASE_PURPLE_20_HEX = "#c7cdfe" + SD_SAGE_COLOR_BASE_PURPLE_20_CODE = "purple-20" + SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME = "t-sage--color-purple-20" + SD_SAGE_COLOR_BASE_PURPLE_30_HEX = "#a3acfd" + SD_SAGE_COLOR_BASE_PURPLE_30_CODE = "purple-30" + SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME = "t-sage--color-purple-30" + SD_SAGE_COLOR_BASE_PURPLE_40_HEX = "#8081f9" + SD_SAGE_COLOR_BASE_PURPLE_40_CODE = "purple-40" + SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME = "t-sage--color-purple-40" + SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#6a62f2" + SD_SAGE_COLOR_BASE_PURPLE_50_CODE = "purple-50" + SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME = "t-sage--color-purple-50" + SD_SAGE_COLOR_BASE_PURPLE_60_HEX = "#533be5" + SD_SAGE_COLOR_BASE_PURPLE_60_CODE = "purple-60" + SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME = "t-sage--color-purple-60" + SD_SAGE_COLOR_BASE_PURPLE_70_HEX = "#4f37cb" + SD_SAGE_COLOR_BASE_PURPLE_70_CODE = "purple-70" + SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME = "t-sage--color-purple-70" + SD_SAGE_COLOR_BASE_PURPLE_80_HEX = "#402fa4" + SD_SAGE_COLOR_BASE_PURPLE_80_CODE = "purple-80" + SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME = "t-sage--color-purple-80" + SD_SAGE_COLOR_BASE_PURPLE_90_HEX = "#372d82" + SD_SAGE_COLOR_BASE_PURPLE_90_CODE = "purple-90" + SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME = "t-sage--color-purple-90" + SD_SAGE_COLOR_BASE_PURPLE_95_HEX = "#221b4b" + SD_SAGE_COLOR_BASE_PURPLE_95_CODE = "purple-95" + SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME = "t-sage--color-purple-95" + SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#e0e4ff" SD_SAGE_COLOR_BASE_PURPLE_100_CODE = "purple-100" SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME = "t-sage--color-purple-100" - SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#d9c2ef" + SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#a3acfd" SD_SAGE_COLOR_BASE_PURPLE_200_CODE = "purple-200" SD_SAGE_COLOR_BASE_PURPLE_200_CLASSNAME = "t-sage--color-purple-200" - SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#8e5ad8" + SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#533be5" SD_SAGE_COLOR_BASE_PURPLE_300_CODE = "purple-300" SD_SAGE_COLOR_BASE_PURPLE_300_CLASSNAME = "t-sage--color-purple-300" - SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#50348a" + SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#402fa4" SD_SAGE_COLOR_BASE_PURPLE_400_CODE = "purple-400" SD_SAGE_COLOR_BASE_PURPLE_400_CLASSNAME = "t-sage--color-purple-400" - SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#381c5e" + SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#221b4b" SD_SAGE_COLOR_BASE_PURPLE_500_CODE = "purple-500" SD_SAGE_COLOR_BASE_PURPLE_500_CLASSNAME = "t-sage--color-purple-500" - SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#8d939a" + SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#828180" SD_SAGE_COLOR_BASE_CHARCOAL_100_CODE = "charcoal-100" SD_SAGE_COLOR_BASE_CHARCOAL_100_CLASSNAME = "t-sage--color-charcoal-100" - SD_SAGE_COLOR_BASE_CHARCOAL_200_HEX = "#60666c" + SD_SAGE_COLOR_BASE_CHARCOAL_200_HEX = "#6c6a69" SD_SAGE_COLOR_BASE_CHARCOAL_200_CODE = "charcoal-200" SD_SAGE_COLOR_BASE_CHARCOAL_200_CLASSNAME = "t-sage--color-charcoal-200" - SD_SAGE_COLOR_BASE_CHARCOAL_300_HEX = "#43474b" + SD_SAGE_COLOR_BASE_CHARCOAL_300_HEX = "#4d4d4c" SD_SAGE_COLOR_BASE_CHARCOAL_300_CODE = "charcoal-300" SD_SAGE_COLOR_BASE_CHARCOAL_300_CLASSNAME = "t-sage--color-charcoal-300" - SD_SAGE_COLOR_BASE_CHARCOAL_400_HEX = "#202327" + SD_SAGE_COLOR_BASE_CHARCOAL_400_HEX = "#343332" SD_SAGE_COLOR_BASE_CHARCOAL_400_CODE = "charcoal-400" SD_SAGE_COLOR_BASE_CHARCOAL_400_CLASSNAME = "t-sage--color-charcoal-400" - SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#040506" + SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_CHARCOAL_500_CODE = "charcoal-500" SD_SAGE_COLOR_BASE_CHARCOAL_500_CLASSNAME = "t-sage--color-charcoal-500" - SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f9fafa" + SD_SAGE_COLOR_BASE_GREY_5_HEX = "#fcfcfc" + SD_SAGE_COLOR_BASE_GREY_5_CODE = "grey-5" + SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME = "t-sage--color-grey-5" + SD_SAGE_COLOR_BASE_GREY_10_HEX = "#f8f8f8" + SD_SAGE_COLOR_BASE_GREY_10_CODE = "grey-10" + SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME = "t-sage--color-grey-10" + SD_SAGE_COLOR_BASE_GREY_15_HEX = "#f0f0f0" + SD_SAGE_COLOR_BASE_GREY_15_CODE = "grey-15" + SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME = "t-sage--color-grey-15" + SD_SAGE_COLOR_BASE_GREY_20_HEX = "#e4e4e4" + SD_SAGE_COLOR_BASE_GREY_20_CODE = "grey-20" + SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME = "t-sage--color-grey-20" + SD_SAGE_COLOR_BASE_GREY_30_HEX = "#d2d1d1" + SD_SAGE_COLOR_BASE_GREY_30_CODE = "grey-30" + SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME = "t-sage--color-grey-30" + SD_SAGE_COLOR_BASE_GREY_40_HEX = "#bbbab9" + SD_SAGE_COLOR_BASE_GREY_40_CODE = "grey-40" + SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME = "t-sage--color-grey-40" + SD_SAGE_COLOR_BASE_GREY_50_HEX = "#9b9a98" + SD_SAGE_COLOR_BASE_GREY_50_CODE = "grey-50" + SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME = "t-sage--color-grey-50" + SD_SAGE_COLOR_BASE_GREY_60_HEX = "#828180" + SD_SAGE_COLOR_BASE_GREY_60_CODE = "grey-60" + SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME = "t-sage--color-grey-60" + SD_SAGE_COLOR_BASE_GREY_70_HEX = "#6c6a69" + SD_SAGE_COLOR_BASE_GREY_70_CODE = "grey-70" + SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME = "t-sage--color-grey-70" + SD_SAGE_COLOR_BASE_GREY_80_HEX = "#4d4d4c" + SD_SAGE_COLOR_BASE_GREY_80_CODE = "grey-80" + SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME = "t-sage--color-grey-80" + SD_SAGE_COLOR_BASE_GREY_90_HEX = "#343332" + SD_SAGE_COLOR_BASE_GREY_90_CODE = "grey-90" + SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME = "t-sage--color-grey-90" + SD_SAGE_COLOR_BASE_GREY_95_HEX = "#1a1a19" + SD_SAGE_COLOR_BASE_GREY_95_CODE = "grey-95" + SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME = "t-sage--color-grey-95" + SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f8f8f8" SD_SAGE_COLOR_BASE_GREY_100_CODE = "grey-100" SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME = "t-sage--color-grey-100" - SD_SAGE_COLOR_BASE_GREY_200_HEX = "#f6f8f8" + SD_SAGE_COLOR_BASE_GREY_200_HEX = "#f0f0f0" SD_SAGE_COLOR_BASE_GREY_200_CODE = "grey-200" SD_SAGE_COLOR_BASE_GREY_200_CLASSNAME = "t-sage--color-grey-200" - SD_SAGE_COLOR_BASE_GREY_300_HEX = "#eceeef" + SD_SAGE_COLOR_BASE_GREY_300_HEX = "#e4e4e4" SD_SAGE_COLOR_BASE_GREY_300_CODE = "grey-300" SD_SAGE_COLOR_BASE_GREY_300_CLASSNAME = "t-sage--color-grey-300" - SD_SAGE_COLOR_BASE_GREY_400_HEX = "#d3d5d9" + SD_SAGE_COLOR_BASE_GREY_400_HEX = "#d2d1d1" SD_SAGE_COLOR_BASE_GREY_400_CODE = "grey-400" SD_SAGE_COLOR_BASE_GREY_400_CLASSNAME = "t-sage--color-grey-400" - SD_SAGE_COLOR_BASE_GREY_500_HEX = "#b5bac0" + SD_SAGE_COLOR_BASE_GREY_500_HEX = "#9b9a98" SD_SAGE_COLOR_BASE_GREY_500_CODE = "grey-500" SD_SAGE_COLOR_BASE_GREY_500_CLASSNAME = "t-sage--color-grey-500" SD_SAGE_COLOR_BASE_WHITE_100_HEX = "#fff" @@ -176,6 +428,192 @@ module SageDictionary # Map for COLOR BASE # SD_SAGE_COLOR = { + "BLUE": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME, + }, + }, + "GREEN": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME, + }, + }, + "MERCURY": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME, + }, + }, "PRIMARY": { "100": { "HEX": SD_SAGE_COLOR_BASE_PRIMARY_100_HEX, @@ -231,6 +669,66 @@ module SageDictionary }, }, "YELLOW": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE, @@ -258,6 +756,66 @@ module SageDictionary }, }, "RED": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_RED_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_RED_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_RED_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_RED_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_RED_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_RED_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_RED_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_RED_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_RED_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_RED_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_RED_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, @@ -312,6 +870,66 @@ module SageDictionary }, }, "PURPLE": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE, @@ -366,6 +984,66 @@ module SageDictionary }, }, "GREY": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_GREY_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_GREY_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_GREY_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_GREY_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_GREY_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_GREY_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_GREY_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_GREY_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_GREY_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_GREY_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_GREY_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE, @@ -455,74 +1133,74 @@ module SageDictionary # # Static vars for COLOR COMBOS # - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = "#202327" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = "#040506" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#eceeef" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = "#d3d5d9" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = "#60666c" - SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = "#60666c" - SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = "#8d939a" - SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = "#8d939a" - SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = "#f6f8f8" - SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = "#202327" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = "#225d53" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = "#183e3b" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = "#ddf8f0" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = "#86d5bc" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = "#23856d" - SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = "#225d53" - SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = "#23856d" - SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = "#23856d" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = "#343332" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = "#1a1a19" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#e4e4e4" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = "#d2d1d1" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = "#6c6a69" + SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = "#6c6a69" + SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = "#828180" + SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = "#828180" + SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = "#f0f0f0" + SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = "#343332" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = "#085c37" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = "#052e1c" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = "#d3f8df" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = "#73e2a3" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = "#079250" + SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = "#085c37" + SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = "#079250" + SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = "#079250" SD_SAGE_COLOR_COMBOS_PUBLISHED_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = "#23856d" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = "#054fb8" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = "#07265f" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = "#e6f4fe" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#8ecafb" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = "#0072ef" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = "#054fb8" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = "#0072ef" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#8ecafb" - SD_SAGE_COLOR_COMBOS_INFO_BOLD_FOREGROUND = "#e6f4fe" - SD_SAGE_COLOR_COMBOS_INFO_BOLD_BACKGROUND = "#0072ef" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = "#50348a" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = "#381c5e" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = "#eee4f6" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = "#d9c2ef" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = "#8e5ad8" - SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = "#50348a" - SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = "#8e5ad8" - SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = "#d9c2ef" - SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = "#eee4f6" - SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = "#8e5ad8" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = "#c56a02" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = "#8c3b08" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = "#fef8e1" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = "#fad980" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = "#c56a02" - SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = "#c56a02" - SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = "#ffc505" - SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = "#ffc505" + SD_SAGE_COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = "#079250" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = "#1c4ed8" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = "#172554" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = "#dbe9fe" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#92c5fd" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = "#2463eb" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = "#1c4ed8" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = "#2463eb" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#92c5fd" + SD_SAGE_COLOR_COMBOS_INFO_BOLD_FOREGROUND = "#dbe9fe" + SD_SAGE_COLOR_COMBOS_INFO_BOLD_BACKGROUND = "#2463eb" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = "#402fa4" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = "#221b4b" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = "#e0e4ff" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = "#a3acfd" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = "#533be5" + SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = "#402fa4" + SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = "#533be5" + SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = "#a3acfd" + SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = "#e0e4ff" + SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = "#533be5" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = "#db7303" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = "#451902" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = "#fff3c6" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = "#fed04b" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = "#db7303" + SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = "#db7303" + SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = "#fdbb21" + SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = "#fdbb21" SD_SAGE_COLOR_COMBOS_WARNING_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_WARNING_BOLD_BACKGROUND = "#ffc505" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = "#99221e" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = "#5e0d0d" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = "#fff0f0" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = "#fdb0aa" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = "#cf3c32" - SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = "#99221e" - SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = "#fdb0aa" - SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = "#fdb0aa" - SD_SAGE_COLOR_COMBOS_DANGER_BOLD_FOREGROUND = "#fff0f0" - SD_SAGE_COLOR_COMBOS_DANGER_BOLD_BACKGROUND = "#fdb0aa" + SD_SAGE_COLOR_COMBOS_WARNING_BOLD_BACKGROUND = "#fdbb21" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = "#991b1b" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = "#572627" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = "#fee2e1" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = "#fda5a5" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = "#ef4444" + SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = "#991b1b" + SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = "#fda5a5" + SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = "#fda5a5" + SD_SAGE_COLOR_COMBOS_DANGER_BOLD_FOREGROUND = "#fee2e1" + SD_SAGE_COLOR_COMBOS_DANGER_BOLD_BACKGROUND = "#fda5a5" SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = "#fff" SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#8ecafb" + SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#92c5fd" SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = "#fff" SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#8ecafb" + SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#92c5fd" SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#8ecafb" + SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#92c5fd" # # Map for COLOR COMBOS @@ -661,14 +1339,17 @@ module SageDictionary # # Static vars for COLOR CORE # - SD_SAGE_COLOR_CORE_PRIMARY = "#0072ef" - SD_SAGE_COLOR_CORE_SAGE = "#23856d" - SD_SAGE_COLOR_CORE_YELLOW = "#ffc505" - SD_SAGE_COLOR_CORE_RED = "#cf3c32" - SD_SAGE_COLOR_CORE_ORANGE = "#fb7e09" - SD_SAGE_COLOR_CORE_PURPLE = "#8e5ad8" - SD_SAGE_COLOR_CORE_CHARCOAL = "#43474b" - SD_SAGE_COLOR_CORE_GREY = "#8d939a" + SD_SAGE_COLOR_CORE_BLUE = "#2463eb" + SD_SAGE_COLOR_CORE_GREEN = "#079250" + SD_SAGE_COLOR_CORE_MERCURY = "#ff3e15" + SD_SAGE_COLOR_CORE_PRIMARY = "#2463eb" + SD_SAGE_COLOR_CORE_SAGE = "#079250" + SD_SAGE_COLOR_CORE_YELLOW = "#fdbb21" + SD_SAGE_COLOR_CORE_RED = "#ef4444" + SD_SAGE_COLOR_CORE_ORANGE = "#ff3e15" + SD_SAGE_COLOR_CORE_PURPLE = "#533be5" + SD_SAGE_COLOR_CORE_CHARCOAL = "#4d4d4c" + SD_SAGE_COLOR_CORE_GREY = "#828180" SD_SAGE_COLOR_CORE_WHITE = "#fff" SD_SAGE_COLOR_CORE_BLACK = "#000" @@ -676,6 +1357,9 @@ module SageDictionary # Map for 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, diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb b/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb index e52196ae2d..56636c3335 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb @@ -124,6 +124,7 @@ module SageSchemas background: [:optional, NilClass, Set.new(SageTokens::COLOR_SLIDERS), String], border: [:optional, NilClass, Set.new(SageTokens::FRAME_BORDERS)], border_radius: [:optional, NilClass, Set.new(SageTokens::FRAME_BORDER_RADII)], + box_shadow: [:optional, NilClass, Set.new(SageTokens::FRAME_BOX_SHADOWS)], direction: [:optional, NilClass, Set.new(SageTokens::FRAME_DIRECTIONS)], gap: [:optional, NilClass, Set.new(SageTokens::FRAME_SPACINGS)], padding: [:optional, NilClass, Set.new(SageTokens::FRAME_SPACINGS)], diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb index 2028d31aec..71df0aa096 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb @@ -479,6 +479,21 @@ def SageTokens.grid_templates "lg" ] + # Keep in sync with `packages/sage-assets/lib/stylesheets/components/_frame.scss` + FRAME_BOX_SHADOWS = [ + "none", + "sm", + "md", + "lg", + "modal", + "050", + "100", + "200", + "300", + "400", + "500", + ] + # Keep in sync with `packages/sage-assets/lib/stylesheets/components/_frame.scss` FRAME_DIRECTIONS = [ "vertical", diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb index f2d9c8b4ea..7f4070f492 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb @@ -1,6 +1,6 @@ <% -variant = component.scope.present? ? component.scope : false -title_tag = variant == "feature" ? "h1" : "h2" +variant = component.size.present? ? component.size : false +title_tag = variant == "compact" ? "h2" : "h1" if component.title_tag.present? title_tag = component.title_tag end @@ -20,11 +20,19 @@ end <% end %> - <%= sage_component SageIcon, { - icon: component.icon, - size: "3xl", - css_classes: "sage-empty-state__icon" - } if component.icon %> + <% if component.icon.present? %> +
+ <%= sage_component SageIcon, { + color: "white", + icon: component.icon, + size: variant == 'compact' ? 'xl' : '3xl', + css_classes: "sage-empty-state__icon" + }%> +
+ <% end %>
<% if component.title.present? %> diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb index 0a867238da..7117612a52 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb @@ -11,7 +11,7 @@ #{image_tag(component.image, image_options)} - ).html_safe + ).html_safe if component.image.present? %>
- <% if component.cta_attributes.present? %> + <% if component.cta_attributes.present? && artwork.present? %> <%= "#{key}='#{value}'".html_safe %> @@ -55,9 +55,11 @@ <%= artwork %> <% else %> -
- <%= artwork %> -
+ <% if artwork.present? %> +
+ <%= artwork %> +
+ <% end %> <% end %> diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb index 91cd1973cc..111436cb76 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb @@ -1,5 +1,6 @@ <% component_description = component.type === "success" ? "Success" : "Loading..." + stroke_color = SageTokens::COLOR_PALETTE[:MERCURY_40] %>
-> +> <%# Spinner SVG %> <% if component.type === "spinner" %> -
&, @@ -72,6 +86,12 @@ $-alert-icon-colors: ( } } +@each $name, $value in $-alert-border-colors { + .sage-alert--#{$name} { + border-color: $value; + } +} + .sage-alert--small { grid-template-columns: auto 1fr auto; grid-template-areas: "icon copy actions"; @@ -117,7 +137,7 @@ $-alert-icon-colors: ( } .sage-alert--small & { - transform: translateY(-2px); + transform: translateY(0); } } @@ -153,7 +173,7 @@ $-alert-icon-colors: ( } &:focus { - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } } @@ -180,7 +200,7 @@ $-alert-icon-colors: ( } &:focus { - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_badge.scss b/packages/sage-assets/lib/stylesheets/components/_badge.scss index 80f26bc86d..4ca5bf32bf 100644 --- a/packages/sage-assets/lib/stylesheets/components/_badge.scss +++ b/packages/sage-assets/lib/stylesheets/components/_badge.scss @@ -102,7 +102,7 @@ $-badge-statuses: ( .sage-badge__value { @include sage-focus-outline($outline-offset-block: -1, $outline-offset-inline: -1); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); position: static; padding-right: rem(24px); @@ -126,7 +126,6 @@ $-badge-statuses: ( align-items: center; position: absolute; right: rem(8px); - min-height: rem(22px); margin-top: rem(1px); border-radius: 0 $-badge-border-radius $-badge-border-radius 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss index c43606f2f3..0c59c97996 100644 --- a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss +++ b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss @@ -6,7 +6,7 @@ $-breadcrumb-current-color: sage-color(charcoal, 400); $-breadcrumb-interactive-color: sage-color(charcoal, 400); -$-breadcrumb-outline-color: sage-color(primary, 200); +$-breadcrumb-outline-color: sage-color(purple, 30); .sage-breadcrumbs { display: flex; @@ -89,10 +89,10 @@ $-breadcrumb-outline-color: sage-color(primary, 200); background: transparent; border-radius: rem(6px); @include sage-focus-outline( - $outline-width: 4px, - $outline-offset-block: -4, - $outline-offset-inline: -6, - $outline-border-radius: rem(6px) + $outline-width: 2px, + $outline-offset-block: -2, + $outline-offset-inline: -3, + $outline-border-radius: rem(3px) ); @include sage-focus-outline--update-color($-breadcrumb-outline-color); diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 320a7f3bc2..2d11487671 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -13,7 +13,7 @@ $-btn-transition: map-get($sage-transitions, default); $-btn-base-padding-block: sage-spacing(xs); // vertical (y) axis $-btn-base-padding-inline: sage-spacing(sm); // horizontal (x) axis $-btn-base-line-height: var(--sage-line-height-body, #{rem(24px)}); -$-btn-border-radius: sage-border(radius); +$-btn-border-radius: 9999px; $-btn-shadow-base: sage-shadow(sm); $-btn-icon-only-standard-size: rem(40px); $-btn-icon-only-subtle-size: rem(16px); @@ -26,24 +26,24 @@ $-btn-base-styles: ( accent: ( default: ( color: sage-color(white), - background-color: sage-color(primary, 300), - border-color: sage-color(primary, 300), - ring-color: sage-color(primary, 200), + background-color: sage-color(purple, 50), + border-color: sage-color(purple, 50), + ring-color: sage-color(purple, 30), ), hover: ( color: sage-color(white), - background-color: sage-color(primary, 400), - border-color: sage-color(primary, 400), + background-color: sage-color(purple, 60), + border-color: sage-color(purple, 60), ), focus: ( color: sage-color(white), - background-color: sage-color(primary, 300), - border-color: sage-color(primary, 300), + background-color: sage-color(purple, 50), + border-color: sage-color(purple, 50), ), disabled: ( - color: sage-color(primary, 200), - background-color: sage-color(primary, 100), - border-color: sage-color(primary, 100), + color: sage-color(purple, 30), + background-color: sage-color(purple, 15), + border-color: sage-color(purple, 15), ) ), primary: ( @@ -51,7 +51,7 @@ $-btn-base-styles: ( color: sage-color(white), background-color: sage-color(charcoal, 400), border-color: sage-color(charcoal, 400), - ring-color: sage-color(primary, 200), + ring-color: sage-color(purple, 30), ), hover: ( color: sage-color(white), @@ -72,7 +72,7 @@ $-btn-base-styles: ( default: ( color: sage-color(charcoal, 400), background-color: sage-color(white), - ring-color: sage-color(primary, 200), + ring-color: sage-color(purple, 30), ), hover: ( color: sage-color(charcoal, 400), @@ -117,7 +117,7 @@ $-btn-subtle-styles: ( hover: sage-color(primary, 300), hover-background: sage-color(primary, 100), focus: sage-color(primary, 300), - focus-outline: sage-color(primary, 200), + focus-outline: sage-color(purple, 30), disabled: sage-color(primary, 200), ), primary: ( @@ -125,7 +125,7 @@ $-btn-subtle-styles: ( hover: sage-color(charcoal, 400), hover-background: sage-color(grey, 200), focus: sage-color(charcoal, 400), - focus-outline: sage-color(primary, 200), + focus-outline: sage-color(purple, 30), disabled: sage-color(charcoal, 100), ), secondary: ( @@ -133,7 +133,7 @@ $-btn-subtle-styles: ( hover: sage-color(charcoal, 400), hover-background: sage-color(grey, 200), focus: sage-color(charcoal, 400), - focus-outline: sage-color(primary, 200), + focus-outline: sage-color(purple, 30), disabled: sage-color(charcoal, 100), ), danger: ( @@ -169,7 +169,7 @@ $-btn-loading-min-height: rem(36px); // stylelint-disable max-nesting-depth .sage-btn { - @extend %t-sage-body-semi; + @extend %t-sage-body-med; @include sage-button-style-reset(); @include sage-focus-ring; @@ -179,6 +179,7 @@ $-btn-loading-min-height: rem(36px); align-items: center; justify-self: flex-start; padding: $-btn-base-padding-block $-btn-base-padding-inline; + font-family: $-heading-font; text-align: left; // Prevents text alignment issue when inner text is truncated border-width: 1px; border-style: solid; @@ -262,15 +263,6 @@ $-btn-loading-min-height: rem(36px); } } - .sage-accordion &.sage-expandable-card__trigger { - &:focus { - box-shadow: inherit; - } - &:focus-visible { - @include sage-focus-ring; - } - } - .sage-input-group & { border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -422,7 +414,7 @@ $-btn-loading-min-height: rem(36px); .sage-upload-card & { &.sage-btn--subtle:focus { - @include sage-focus-outline--update-color(sage-color(primary, 300)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss index 498f851b9a..f469d911f3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card.scss @@ -13,6 +13,13 @@ $-sage-card-background: transparent; position: relative; width: 100%; + background-color: sage-color(white); + box-shadow: sage-shadow(100); + + .sage-card, + .sage-panel & { + box-shadow: none; + } } .sage-card--border-dashed { diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss index 71969d650d..bc67b9446f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss @@ -54,7 +54,18 @@ $-card-highlight-size: rem(12px); @each $-color-name, $-color-sliders in $sage-colors { .sage-card-highlight--#{"" + $-color-name} { - --color: #{sage-color($-color-name, 300)}; + @if ($-color-name == blue) { + --color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == green) { + --color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == mercury) { + --color: #{sage-color($-color-name, 50)}; + } + @else { + --color: #{sage-color($-color-name, 300)}; + } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss index 8b916c24d6..343c460a00 100644 --- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss +++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss @@ -32,8 +32,8 @@ $-checkbox-marker-offset: $-checkbox-marker-border * 2; // Focus state // $-checkbox-focus-outline-size: rem(3px); -$-checkbox-focus-outline-width: 4; -$-checkbox-focus-outline-color: sage-color(primary, 200); +$-checkbox-focus-outline-width: 2; +$-checkbox-focus-outline-color: sage-color(purple, 30); .sage-checkbox { @@ -285,7 +285,7 @@ $-checkbox-focus-outline-color: sage-color(primary, 200); } .sage-checkbox & { - margin-top: rem(4px); + margin-top: rem(2px); } &.sage-checkbox, // spcificity that should apply only to `--standalone` variation diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss index 641fb40e4e..59291d8e78 100644 --- a/packages/sage-assets/lib/stylesheets/components/_choice.scss +++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss @@ -41,8 +41,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); padding: sage-spacing(); text-decoration: none; color: $-choice-color-default; + background-color: sage-color(white); border: sage-border(); border-radius: sage-border(radius-large); + box-shadow: sage-shadow(100); transition: map-get($sage-transitions, default); transition-property: color, background-color, border-color, box-shadow; @@ -64,7 +66,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); } &:focus { - border-color: sage-color(primary, 200); + border-color: sage-color(purple, 30); outline: none; } @@ -75,6 +77,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); border-color: sage-color(charcoal, 400); border-width: rem(4px); } + } &[aria-disabled="true"], @@ -92,6 +95,11 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); } } + .sage-card & , + .sage-panel & { + box-shadow: none; + } + .sage-tabs--layout-default &:not(:last-child) { @media (max-width: sage-breakpoint(sm-max)) { margin-bottom: sage-spacing(sm); @@ -134,10 +142,6 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner); transition: color map-get($sage-transitions, default); } - pds-icon { - margin-top: var(--icon-top-offset); - } - &.sage-choice--vertical-align-icon-start::#{$-choice-el-icon} { align-self: start; margin-top: var(--icon-top-offset); diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss index 45f46ea0e1..93eccd598e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss +++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss @@ -6,7 +6,7 @@ $-copy-text-border: 1px solid sage-color(grey, 400); -$-copy-text-border-focus-color: sage-color(primary, 200); +$-copy-text-border-focus-color: sage-color(purple, 30); $-copy-text-border-hover-color: sage-color(grey, 500); $-copy-text-color: sage-color(charcoal, 400); $-copy-text-color-hover: sage-color(charcoal, 500); diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index fcc0eade96..c065fdc97c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -42,6 +42,17 @@ $-sage-dot-size--badge: rem(6px); @each $-color-name, $-color-sliders in $sage-colors { .sage-dot--color-#{"" + $-color-name} { - --sage-dot-color: #{sage-color($-color-name)}; + @if ($-color-name == blue) { + --sage-dot-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == green) { + --sage-dot-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == mercury) { + --sage-dot-color: #{sage-color($-color-name, 50)}; + } + @else { + --sage-dot-color: #{sage-color($-color-name)}; + } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss index aa9b7dffc2..12b1d20cad 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss @@ -126,7 +126,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:focus-within { outline: none; - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } } @@ -144,7 +144,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item--disabled { &:active { - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } } @@ -161,7 +161,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown__item-control { @include sage-button-style-reset(); @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); @extend %t-sage-body-med; @@ -192,7 +192,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); &:focus-within { @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); &::after { opacity: 1; @@ -273,7 +273,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); max-height: $-dropdown-panel-max-height; padding: sage-spacing(xs) 0; border-radius: sage-border(radius-medium); - + // adds a box shadow to the menu when it is scrollable overflow-scrolling: touch; background: @@ -282,27 +282,27 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); white 30%, rgba(255, 255, 255, 0) ) center top, - + /* Shadow Cover BOTTOM */ linear-gradient( - rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0), white 70% ) center bottom, - + /* Shadow TOP */ radial-gradient( farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) ) center top, - + /* Shadow BOTTOM */ radial-gradient( farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) ) center bottom; - + background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; @@ -322,7 +322,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); .sage-dropdown--page-size & { min-width: 100%; } - + @media (max-height: $-dropdown-panel-max-height-breakpoint) { max-height: $-dropdown-panel-max-height-small; } @@ -413,6 +413,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs); } .sage-dropdown__trigger { + display: flex; width: 100%; border-radius: inherit; diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss index effb269696..e2c15fb632 100644 --- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss +++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss @@ -4,28 +4,23 @@ /// @group sage //// -$-empty-state-graphic-feature-width: 100%; -$-empty-state-graphic-feature-height: rem(142px); -$-empty-state-graphic-page-width: 100%; -$-empty-state-graphic-page-height: rem(336px); -$-empty-state-page-max-width: rem(1064px); +$-empty-state-graphic-default-width: 100%; +$-empty-state-graphic-default-height: rem(104px); +$-empty-state-graphic-compact-width: 100%; +$-empty-state-graphic-compact-height: rem(56px); +$-empty-state-icon-background-color: var(--color-background-icon); +$-empty-state-icon-size: rem(104px); +$-empty-state-icon-compact-size: rem(56px); .sage-empty-state { - margin-left: auto; - margin-right: auto; - - &:not(.sage-empty-state--page) { - @include sage-grid-panel(); - - max-width: sage-container(md); - text-align: center; - justify-items: center; - } - - &:not(.sage-empty-state--compact):not(.sage-empty-state--page) { - gap: sage-spacing(); - padding: sage-spacing(2xl) sage-spacing(); - } + @include sage-grid-panel(); + + gap: sage-spacing(sm); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: sage-container(md); + text-align: center; + justify-items: center; } .sage-empty-state--center { @@ -34,48 +29,12 @@ $-empty-state-page-max-width: rem(1064px); top: 50%; transform: translate(-50%, -50%); padding: sage-spacing(); - - @media screen and (min-width: sage-breakpoint(lg-max)) { - padding: 0; - } -} - -.sage-empty-state--compact { - padding: sage-spacing(xs) sage-spacing(); -} - -.sage-empty-state--page { - display: flex; - align-items: center; - justify-content: center; - gap: sage-spacing(); - width: 100%; - padding: sage-spacing(lg); - - @media screen and (max-width: sage-breakpoint(lg-max)) { - flex-direction: column; - } - - @media screen and (min-width: sage-breakpoint(xl-min)) { - flex-direction: row; - max-width: $-empty-state-page-max-width; - } } .sage-empty-state__actions, .sage-empty-state__custom-content, .sage-empty-state__video { - margin-top: sage-spacing(); -} - -.sage-empty-state__content { - .sage-empty-state--page & { - max-width: $-empty-state-graphic-page-width; - - @media screen and (min-width: sage-breakpoint(xl-min)) { - order: 1; - } - } + margin-block-start: sage-spacing(); } .sage-empty-state__graphic { @@ -83,8 +42,8 @@ $-empty-state-page-max-width: rem(1064px); align-items: center; justify-content: center; overflow: hidden; - width: $-empty-state-graphic-feature-width; - height: $-empty-state-graphic-feature-height; + inline-size: $-empty-state-graphic-default-width; + block-size: $-empty-state-graphic-default-height; > img { display: block; @@ -93,39 +52,47 @@ $-empty-state-page-max-width: rem(1064px); border-radius: sage-border(radius); } - .sage-empty-state--page & { - max-width: $-empty-state-graphic-page-width; - height: $-empty-state-graphic-page-height; + .sage-empty-state--compact & { + block-size: $-empty-state-graphic-compact-height; + inline-size: $-empty-state-graphic-compact-width; + } +} + +.sage-empty-state__icon-container { + display: flex; + padding: sage-spacing(lg); + background-color: $-empty-state-icon-background-color; + border-radius: sage-border(radius-round); - @media screen and (min-width: sage-breakpoint(xl-min)) { - order: 2; - } + .sage-empty-state--compact & { + padding: sage-spacing(sm); } } .sage-empty-state__icon { display: inline-flex; - color: sage-color(charcoal, 100); + inline-size: $-empty-state-icon-size; + block-size: $-empty-state-icon-size; } .sage-empty-state__title { - @extend %t-sage-heading-4; + @extend %t-sage-heading-3; - color: sage-color(charcoal, 500); + color: sage-color(grey, 90); word-wrap: break-word; - .sage-empty-state--page & { - @extend %t-sage-heading-1; - } - &:not(:only-child) { - margin-bottom: sage-spacing(sm); + margin-block-end: sage-spacing(sm); } } .sage-empty-state__text { @extend %t-sage-body; - color: sage-color(charcoal, 300); word-wrap: break-word; } + +.sage-empty-state__text, +.sage-empty-state__custom-content { + color: sage-color(grey, 70); +} diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss index 7dd2e193ea..13e9b8a2ca 100644 --- a/packages/sage-assets/lib/stylesheets/components/_hero.scss +++ b/packages/sage-assets/lib/stylesheets/components/_hero.scss @@ -134,7 +134,7 @@ $-hero-play-icon-background-color: sage-color(white); @include sage-focus-ring; &:focus { - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss index 04ede8922a..ece871d7fd 100644 --- a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss @@ -29,6 +29,7 @@ --background-color: #{sage-color-combo($-color, default, background)}; } } + .sage-icon-card--round { border-radius: sage-border(radius-round); } diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss index 71735e36cb..cc374bd398 100644 --- a/packages/sage-assets/lib/stylesheets/components/_link.scss +++ b/packages/sage-assets/lib/stylesheets/components/_link.scss @@ -77,7 +77,7 @@ $-link-base-styles: ( &:focus { color: sage-color(primary, 300); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } .sage-card--interactive & { @@ -214,7 +214,7 @@ $-link-base-styles: ( $outline-offset-block: 4px, $outline-border-radius: sage-border(radius-round), ); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } .sage-link--remove-underline { diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss index 014e30b0ca..1ae92a2902 100644 --- a/packages/sage-assets/lib/stylesheets/components/_loader.scss +++ b/packages/sage-assets/lib/stylesheets/components/_loader.scss @@ -10,8 +10,7 @@ $-loader-bar-speed: 1.2s; $-loader-bar-speed-delay: 0.5s; $-loader-bar-width: rem(300px); $-loader-spinner-size: rem(48px); -$-loader-spinner-speed: 2s; -$-loader-spinner-path-speed: 1.5s; +$-loader-spinner-speed: 1.5s; $-loader-typing-size: rem(6px); $-loader-lower-opacity: 0.4; @@ -84,7 +83,7 @@ $-loader-lower-opacity: 0.4; .sage-loader__spinner { width: sage-spacing(xl); height: sage-spacing(xl); - animation: rotate $-loader-spinner-speed linear infinite; + animation: loader-rotate $-loader-spinner-speed linear infinite; } .sage-loader__spinner--loading-button { @@ -94,11 +93,20 @@ $-loader-lower-opacity: 0.4; } .sage-loader__spinner-path { - stroke-dasharray: 150, 200; - stroke-dashoffset: -10; + stroke-width: 8px; +} + +.sage-loader__spinner-secondHalf { + stroke: url("#sage-loader__spinner-secondHalf"); +} + +.sage-loader__spinner-firstHalf { + stroke: url("#sage-loader__spinner-firstHalf"); +} + +.sage-loader__spinner-highlight { + stroke: currentColor; stroke-linecap: round; - stroke: sage-color(primary, 300); - animation: dash $-loader-spinner-path-speed ease-in-out infinite; } .sage-loader__spinner-path--loading-button { @@ -146,24 +154,12 @@ $-loader-lower-opacity: 0.4; } } -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes dash { +@keyframes loader-rotate { 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -35; + transform: rotate(0deg); } 100% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -124; + transform: rotate(360deg); } } diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss index f4b3e9947b..0b457bf687 100644 --- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss +++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss @@ -81,8 +81,8 @@ $-media-tile-breakpoints: ( outline: 0; &::after { - border-width: sage-spacing(2xs); - border-color: sage-color(primary, 200); + border-width: rem(2px); + border-color: sage-color(purple, 30); } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss index 5ecab8ca10..fca0188e11 100644 --- a/packages/sage-assets/lib/stylesheets/components/_nav.scss +++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss @@ -31,12 +31,12 @@ $-nav-subitem-border-width: rem(2px); .sage-nav__link, .sage-nav__link--active { @include sage-focus-outline( - $outline-width: 4px, - $outline-offset-inline: -2, - $outline-offset-block: -4, + $outline-width: 2px, + $outline-offset-inline: 0, + $outline-offset-block: -1, $outline-border-radius: sage-border(radius-medium), ); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); display: flex; align-items: center; @@ -63,7 +63,7 @@ $-nav-subitem-border-width: rem(2px); @extend %t-sage-body-small-med; &.sage-nav__link--active { - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); background: $-nav-color-background; } @@ -88,7 +88,7 @@ $-nav-subitem-border-width: rem(2px); &:not(.sage-nav__list--sub) { .sage-nav__link--active { - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } .sage-nav__link--active::after { diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss index 45ef8ab244..998e7ba6ce 100644 --- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss +++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px); grid-area: image; overflow: hidden; min-height: $-page-heading-image-height-min; - background: sage-color(grey, 300); + background: sage-color(grey, 30); border-radius: sage-border(radius); border: sage-border(); diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss index 8fe75575de..fc035f3e15 100644 --- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss +++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss @@ -12,7 +12,7 @@ $-pagination-text-color: sage-color(charcoal, 400); $-pagination-text-color-disabled: sage-color(charcoal, 100); $-pagination-bg-color-current: sage-color(grey, 200); $-pagination-bg-color-hover: sage-color(grey, 300); -$-pagination-focus-ring-color: sage-color(primary, 200); +$-pagination-focus-ring-color: sage-color(purple, 30); .sage-pagination { @@ -84,7 +84,6 @@ $-pagination-focus-ring-color: sage-color(primary, 200); text-decoration: none; color: $-pagination-text-color; border: 0; - background-color: sage-color(white); border-radius: $-pagination-radius; &:hover, diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss index 31d92f60f4..e6789cc4a0 100644 --- a/packages/sage-assets/lib/stylesheets/components/_panel.scss +++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss @@ -7,6 +7,11 @@ .sage-panel { @include sage-panel; @include sage-grid-panel; + + .sage-card &, + .sage-panel { + box-shadow: none; + } } .sage-panel-grid { diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss index 6f41a66e8c..467f9ccca4 100644 --- a/packages/sage-assets/lib/stylesheets/components/_radio.scss +++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss @@ -15,7 +15,7 @@ $-radio-color-disabled: map-get($sage-radio-colors, disabled); $-radio-color-error: map-get($sage-radio-colors, error); $-radio-color-hover: map-get($sage-radio-colors, hover); $-radio-color-text-disabled: sage-color(grey, 500); -$-radio-color-focus-outline: sage-color(primary, 200); +$-radio-color-focus-outline: sage-color(purple, 30); $-radio-color-focus-outline-error: sage-color(red, 200); // Additional configurations @@ -26,7 +26,7 @@ $-radio-selected-indicator-size: rem(6px); // Focus state $-radio-focus-outline-size: rem(3px); -$-radio-focus-outline-width: 4; +$-radio-focus-outline-width: 2; $-radio-focus-outline-color: currentColor; // stylelint-disable max-nesting-depth diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss index e32f1146dd..49e6569b75 100644 --- a/packages/sage-assets/lib/stylesheets/components/_search.scss +++ b/packages/sage-assets/lib/stylesheets/components/_search.scss @@ -197,10 +197,13 @@ $-search-icon: "::before"; box-shadow: map-get($sage-toolbar-button-borders, hover); } - &:focus, &:active { box-shadow: map-get($sage-toolbar-button-borders, active-hover); } + + &:focus { + box-shadow: map-get($sage-toolbar-button-borders, focus); + } } .sage-search--contained &:focus, diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss index 403425c532..66d29f2b39 100644 --- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss +++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss @@ -15,7 +15,7 @@ $-sortable-image-height: rem(48px); .sage-sortable__item { display: grid; - grid-template-columns: min-content minmax(0, 1fr) auto auto; + grid-template-columns: min-content min-content minmax(0, 1fr) auto auto; gap: sage-spacing(card); align-items: center; padding: sage-spacing(xs) sage-spacing(panel); diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index 9b32dfc981..74e49f3134 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -11,6 +11,13 @@ $-stat-box-image-max-width: rem(48px); @include sage-card($grid: false); padding: rem(18px) sage-spacing(sm); border-radius: sage-border(radius-large); + box-shadow: sage-shadow(100); + background-color: sage-color(white); + + .sage-card &, + .sage-panel & { + box-shadow: none; + } &.sage-stat-box--raised { box-shadow: sage-shadow(sm); @@ -94,7 +101,18 @@ $-stat-box-image-max-width: rem(48px); @each $-color-name, $-color-sliders in $sage-colors { .sage-stat-box__title--legend-#{"" + $-color-name} { - --legend-color: #{sage-color($-color-name, 500)}; + @if ($-color-name == blue) { + --legend-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == green) { + --legend-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == mercury) { + --legend-color: #{sage-color($-color-name, 50)}; + } + @else { + --legend-color: #{sage-color($-color-name, 500)}; + } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss index 8e30d41782..2fda034429 100644 --- a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss +++ b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss @@ -20,7 +20,7 @@ $outline-offset-block: 4px, $outline-border-radius: sage-border(radius-round), ); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); &:hover:not(:focus):not(:active) { color: sage-color(charcoal, 400); diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss index 96c9cf7afb..4066e34501 100644 --- a/packages/sage-assets/lib/stylesheets/components/_switch.scss +++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss @@ -42,6 +42,13 @@ $-switch-toggle-size: rem(16px); padding: sage-spacing(card); border: sage-border(); border-radius: sage-border(radius); + box-shadow: sage-shadow(100); + background-color: sage-color(white); + + .sage-card &, + .sage-panel & { + box-shadow: none; + } } &.sage-switch--toggle-right { diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss index 3c1ebda1de..945e590fc3 100644 --- a/packages/sage-assets/lib/stylesheets/components/_tab.scss +++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss @@ -43,9 +43,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled); } &:focus { - z-index: sage-z-index(default, 1); - outline: none; - box-shadow: 0 0 0 4px sage-color(primary, 200); + @include sage-focus-ring(); border-radius: sage-border(radius-small); .sage-tabs--filter & { diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index 3b5b948b40..a10b61b0e2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -161,7 +161,7 @@ $-toast-bottom-spacing: sage-spacing(xs); text-decoration: underline; @include sage-focus-outline($outline-offset-inline: 4px); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); } @keyframes rotate { diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss index 32e57cea5e..ad53bfb056 100644 --- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss @@ -11,8 +11,15 @@ $-transaction-card-price-max-width: rem(100px); .sage-transaction-card { @include sage-card; + .sage-card &, + .sage-panel & { + box-shadow: none; + } + position: relative; width: 100%; + background-color: sage-color(white); + box-shadow: sage-shadow(100); > * { min-width: 0; diff --git a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss index 1991a3fd83..e1e3769e4f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_typeahead.scss +++ b/packages/sage-assets/lib/stylesheets/components/_typeahead.scss @@ -58,7 +58,7 @@ $-typeahead-item-height: rem(68px); $outline-offset-inline: -4px, $outline-animation-speed: 0.05s ); - @include sage-focus-outline--update-color(sage-color(primary, 200)); + @include sage-focus-outline--update-color(sage-color(purple, 30)); display: grid; position: unset; // Undo position defined in sage-focus-outline() diff --git a/packages/sage-assets/lib/stylesheets/core/_fonts.scss b/packages/sage-assets/lib/stylesheets/core/_fonts.scss index 0ff328f311..9aa3519d39 100644 --- a/packages/sage-assets/lib/stylesheets/core/_fonts.scss +++ b/packages/sage-assets/lib/stylesheets/core/_fonts.scss @@ -3,79 +3,455 @@ /// /// @group sage //// - -$-body-font-path: "#{$sage-font-cdn-root}/circular" !default; // pathname of font directory -$-body-font-name: "CircularXXWeb"; $-body-font-version: 1; +$sage-greet-font-path: "#{$sage-font-cdn-root}/greet" !default; // pathname of font directory +$-greet-font-name: "greetstandard"; + +$sage-inter-font-path: "#{$sage-font-cdn-root}/inter" !default; // pathname of font directory +$-inter-font-name: "Inter"; + +$sage-sprig-font-path: "#{$sage-font-cdn-root}/sprig" !default; // pathname of font directory +$-sprig-font-name: "FAIRE-Sprig"; + +// Sample Url +// https://sage.kajabi-cdn.com/font/greet/greetstandard-bold.woff2?v=1 +// https://sage.kajabi-cdn.com/font/greet/greetstandard-bold.woff?v=1 + +// Greet Standard + +// Light +@font-face { + font-family: "GreetStandard"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: local("#{$-greet-font-name}-light"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-light.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-light.woff?v=#{$-body-font-version}") format("woff"); +} + +// Light Italic +@font-face { + font-family: "GreetStandard"; + font-style: italic; + font-weight: 300; + font-display: swap; + src: local("#{$-greet-font-name}-lightitalic"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-lightitalic.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-lightitalic.woff?v=#{$-body-font-version}") format("woff"); +} + // Regular @font-face { - font-family: "Circular"; + font-family: "GreetStandard"; font-style: normal; font-weight: 400; font-display: swap; - src: local("#{$-body-font-name}-Regular"), url("#{$-body-font-path}/#{$-body-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Regular.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-greet-font-name}-regular"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-regular.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-regular.woff?v=#{$-body-font-version}") format("woff"); } // Regular Italic @font-face { - font-family: "Circular"; + font-family: "GreetStandard"; font-style: italic; font-weight: 400; font-display: swap; - src: local("#{$-body-font-name}-Italic"), url("#{$-body-font-path}/#{$-body-font-name}-Italic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Italic.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-greet-font-name}-regularitalic"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-regularitalic.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-regularitalic.woff?v=#{$-body-font-version}") format("woff"); } // Medium @font-face { - font-family: "Circular"; + font-family: "GreetStandard"; font-style: normal; font-weight: 500; font-display: swap; - src: local("#{$-body-font-name}-Book"), url("#{$-body-font-path}/#{$-body-font-name}-Book.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Book.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-greet-font-name}-medium"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-medium.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-medium.woff?v=#{$-body-font-version}") format("woff"); } // Medium Italic @font-face { - font-family: "Circular"; + font-family: "GreetStandard"; font-style: italic; font-weight: 500; font-display: swap; - src: local("#{$-body-font-name}-BookItalic"), url("#{$-body-font-path}/#{$-body-font-name}-BookItalic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-BookItalic.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-greet-font-name}-mediumitalic"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-mediumitalic.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-mediumitalic.woff?v=#{$-body-font-version}") format("woff"); +} + +// Semi-Bold +@font-face { + font-family: "GreetStandard"; + font-style: normal ; + font-weight: 600 ; + font-display: swap; + src: local("#{$-greet-font-name}-semibold"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibold.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibold.woff?v=#{$-body-font-version}") format("woff"); +} + +// Semi-Bold Italic +@font-face { + font-family: "GreetStandard"; + font-style: italic ; + font-weight: 600 ; + font-display: swap; + src: local("#{$-greet-font-name}-semibolditalic"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibolditalic.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibolditalic.woff?v=#{$-body-font-version}") format("woff"); +} + +// Bold +@font-face { + font-family: "GreetStandard"; + font-style: normal ; + font-weight: 700 ; + font-display: swap; + src: local("#{$-greet-font-name}-bold"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-bold.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-bold.woff?v=#{$-body-font-version}") format("woff"); +} + +// Bold Italic +@font-face { + font-family: "GreetStandard"; + font-style: italic ; + font-weight: 700 ; + font-display: swap; + src: local("#{$-greet-font-name}-bolditalic"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-bolditalic.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-bolditalic.woff?v=#{$-body-font-version}") format("woff"); +} + +// Heavy (Black) +@font-face { + font-family: "GreetStandard"; + font-style: "normal"; + font-weight: 900; + font-display: swap; + src: local("#{$-greet-font-name}-heavy"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavy.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavy.woff?v=#{$-body-font-version}") format("woff"); +} + +// Heavy (Black) Italic +@font-face { + font-family: "GreetStandard"; + font-style: italic; + font-weight: 900; + font-display: swap; + src: local("#{$-greet-font-name}-heavyitalic"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavyitalic.woff2?v=#{$-body-font-version}") format("woff2"), + url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavyitalic.woff?v=#{$-body-font-version}") format("woff"); +} + + +// Inter + +// Thin +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 100; + font-display: swap; + src: local("#{$-inter-font-name}-Thin"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Thin.woff2?v=#{$-body-font-version}") format("woff2"); } -// Semibold +// Thin Italic @font-face { - font-family: "Circular"; + font-family: "Inter"; + font-style: italic; + font-weight: 100; + font-display: swap; + src: local("#{$-inter-font-name}-ThinItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-ThinItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Extra Light +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 200; + font-display: swap; + src: local("#{$-inter-font-name}-ExtraLight"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraLight.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Extra Light Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 200; + font-display: swap; + src: local("#{$-inter-font-name}-ExtraLightItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraLightItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Light +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: local("#{$-inter-font-name}-Light"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Light.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Light Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 300; + font-display: swap; + src: local("#{$-inter-font-name}-LightItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-LightItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Regular +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("#{$-inter-font-name}-Regular"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("#{$-inter-font-name}-Italic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Italic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Medium +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local("#{$-inter-font-name}-Medium"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Medium Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 500; + font-display: swap; + src: local("#{$-inter-font-name}-MediumItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +@font-face { + font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; - src: local("#{$-body-font-name}-Medium"), url("#{$-body-font-path}/#{$-body-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Medium.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-inter-font-name}-SemiBold"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-SemiBold.woff2?v=#{$-body-font-version}") format("woff2"); } -// Semibold Italic @font-face { - font-family: "Circular"; + font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; - src: local("#{$-body-font-name}-MediumItalic"), url("#{$-body-font-path}/#{$-body-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-MediumItalic.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-inter-font-name}-SemiBoldItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-SemiBoldItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Semi-Bold +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local("#{$-inter-font-name}-Bold"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Bold Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 700; + font-display: swap; + src: local("#{$-inter-font-name}-BoldItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Extra Bold +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 800; + font-display: swap; + src: local("#{$-inter-font-name}-ExtraBold"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraBold.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Extra Bold Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 800; + font-display: swap; + src: local("#{$-inter-font-name}-ExtraBoldItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraBoldItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Black +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 900; + font-display: swap; + src: local("#{$-inter-font-name}-Black"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-Black.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Black Italic +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 900; + font-display: swap; + src: local("#{$-inter-font-name}-BlackItalic"), + url("#{$sage-inter-font-path}/#{$-inter-font-name}-BlackItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + + +// FAIRE Sprig + +// Thin +@font-face { + font-family: "Sprig"; + font-style: normal; + font-weight: 200; + font-display: swap; + src: local("#{$-sprig-font-name}-Thin"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Thin.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Thin Italic +@font-face { + font-family: "Sprig"; + font-style: italic; + font-weight: 200; + font-display: swap; + src: local("#{$-sprig-font-name}-ThinItalic"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-ThinItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Light +@font-face { + font-family: "Sprig"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: local("#{$-sprig-font-name}-Light"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Light.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Light Italic +@font-face { + font-family: "Sprig"; + font-style: italic; + font-weight: 300; + font-display: swap; + src: local("#{$-sprig-font-name}-LightItalic"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-LightItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Regular +@font-face { + font-family: "Sprig"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local("#{$-sprig-font-name}-Regular"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Regular Italic +@font-face { + font-family: "Sprig"; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local("#{$-sprig-font-name}-RegularItalic"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-RegularItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Medium +@font-face { + font-family: "Sprig"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local("#{$-sprig-font-name}-Medium"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Medium Italic +@font-face { + font-family: "Sprig"; + font-style: italic; + font-weight: 500; + font-display: swap; + src: local("#{$-sprig-font-name}-MediumItalic"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2"); } // Bold @font-face { - font-family: "Circular"; + font-family: "Sprig"; font-style: normal; font-weight: 700; font-display: swap; - src: local("#{$-body-font-name}-Bold"), url("#{$-body-font-path}/#{$-body-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-Bold.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-sprig-font-name}-Bold"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2"); } // Bold Italic @font-face { - font-family: "Circular"; + font-family: "Sprig"; font-style: italic; font-weight: 700; font-display: swap; - src: local("#{$-body-font-name}-BoldItalic"), url("#{$-body-font-path}/#{$-body-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2"), url("#{$-body-font-path}/#{$-body-font-name}-BoldItalic.woff?v=#{$-body-font-version}") format("woff"); + src: local("#{$-sprig-font-name}-BoldItalic"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Super +@font-face { + font-family: "Sprig"; + font-style: normal; + font-weight: 900; + font-display: swap; + src: local("#{$-sprig-font-name}-Super"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-Super.woff2?v=#{$-body-font-version}") format("woff2"); +} + +// Super Italic +@font-face { + font-family: "Sprig"; + font-style: italic; + font-weight: 900; + font-display: swap; + src: local("#{$-sprig-font-name}-SuperItalic"), + url("#{$sage-sprig-font-path}/#{$-sprig-font-name}-SuperItalic.woff2?v=#{$-body-font-version}") format("woff2"); } diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index d863c9b042..3524214b35 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -6,7 +6,8 @@ // Font definitions -$-body-font-stack: "Circular", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif; +$-heading-font: "GreetStandard"; +$-body-font-stack: "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif; $-body-margin-bottom: sage-spacing(xs); $-headings-margin-bottom: sage-spacing(sm); @@ -24,23 +25,23 @@ $-headings-margin-bottom: sage-spacing(sm); --sage-font-size-body-xs: #{map-get($sage-font-sizes, xs)}; --sage-font-size-body-sm: #{map-get($sage-font-sizes, sm)}; --sage-font-size-body: #{map-get($sage-font-sizes, md)}; - --sage-font-size-h6: #{map-get($sage-font-sizes, md)}; - --sage-font-size-h5: #{map-get($sage-font-sizes, lg)}; - --sage-font-size-h4: #{map-get($sage-font-sizes, xl)}; - --sage-font-size-h3: #{map-get($sage-font-sizes, 2xl)}; - --sage-font-size-h2: #{map-get($sage-font-sizes, 3xl)}; - --sage-font-size-h1: #{map-get($sage-font-sizes, 4xl)}; + --sage-font-size-h6: #{map-get($sage-font-sizes, lg)}; + --sage-font-size-h5: #{map-get($sage-font-sizes, xl)}; + --sage-font-size-h4: #{map-get($sage-font-sizes, 2xl)}; + --sage-font-size-h3: #{map-get($sage-font-sizes, 3xl)}; + --sage-font-size-h2: #{map-get($sage-font-sizes, 4xl)}; + --sage-font-size-h1: #{map-get($sage-font-sizes, 5xl)}; // Line heights --sage-line-height-body-xs: #{map-get($sage-line-heights, xs)}; --sage-line-height-body-sm: #{map-get($sage-line-heights, sm)}; --sage-line-height-body: #{map-get($sage-line-heights, md)}; --sage-line-height-h6: #{map-get($sage-line-heights, lg)}; - --sage-line-height-h5: #{map-get($sage-line-heights, lg)}; - --sage-line-height-h4: #{map-get($sage-line-heights, xl)}; - --sage-line-height-h3: #{map-get($sage-line-heights, xl)}; - --sage-line-height-h2: #{map-get($sage-line-heights, 2xl)}; - --sage-line-height-h1: #{map-get($sage-line-heights, 3xl)}; + --sage-line-height-h5: #{map-get($sage-line-heights, xl)}; + --sage-line-height-h4: #{map-get($sage-line-heights, 2xl)}; + --sage-line-height-h3: #{map-get($sage-line-heights, 3xl)}; + --sage-line-height-h2: #{map-get($sage-line-heights, 4xl)}; + --sage-line-height-h1: #{map-get($sage-line-heights, 5xl)}; } // Responsive adjustments are currently TBD @@ -105,7 +106,6 @@ body:not(.sage-excluded), .sage-type { // Body-like elements get spacing below - > p:not([class]), > ul:not([class]), > ol:not([class]), > dl:not([class]), @@ -209,14 +209,26 @@ body:not(.sage-excluded), // Generate text color modifiers @each $color-name, $color-slider in $sage-colors { - // Default color values - $color-value: sage-color($color-name); + $color-value: ""; - @if ($color-name == grey) { + @if ($color-name == blue) { + $color-value: sage-color($color-name, 60); + } + @else if ($color-name == green) { + $color-value: sage-color($color-name, 60); + } + @else if ($color-name == mercury) { + $color-value: sage-color($color-name, 50); + } + @else if ($color-name == grey) { $color-value: sage-color($color-name, 500); } - + @else { + // Default color values + $color-value: sage-color($color-name); + } .t-sage--color-#{"" + $color-name} { + color: $color-value; } diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss index 67f315388c..898977de9d 100644 --- a/packages/sage-assets/lib/stylesheets/core/_variables.scss +++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss @@ -8,13 +8,14 @@ /// Base Font CDN path /// $sage-font-cdn-root: "https://sage.kajabi-cdn.com/fonts"; +$sage-greet-font-path: "#{$sage-font-cdn-root}/greet"; /// /// Active underline configuration /// $sage-active-underline-configs: ( height: rem(3px), - color: sage-color(charcoal, 400), + color: sage-color(mercury, 50), ); /// @@ -102,7 +103,7 @@ $sage-text-colors: ( /// $sage-toolbar-button-borders: ( default: 0 0 0 1px sage-color(grey, 500), - focus: 0 0 0 4px sage-color(primary, 200), + focus: 0 0 0 2px sage-color(purple, 30), 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), diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index c70fcb32ba..74012ac311 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -178,13 +178,14 @@ /// @param {time} $focus-animation-speed [0.2s] How quickly the focus ring animates on activation /// @mixin sage-focus-ring( - $focus-shadow: sage-color(primary, 200), - $focus-width: 4px + $focus-shadow: sage-color(purple, 30), + $focus-width-inner: 1px, + $focus-width-outter: 3px ) { &:focus { z-index: sage-z-index(default, 1); outline: none; - box-shadow: 0 0 0 $focus-width $focus-shadow; + box-shadow: 0 0 0 $focus-width-inner #fff, 0 0 0 $focus-width-outter $focus-shadow; } } @@ -198,7 +199,7 @@ /// @param {time} $outline-animation-speed [0.2s] How quickly the focus ring animates on activation /// @mixin sage-focus-outline( - $outline-width: 4px, + $outline-width: 2px, $outline-offset-block: 0, $outline-offset-inline: 0, $outline-animation-speed: 0.2s, @@ -283,7 +284,6 @@ } gap: sage-spacing(); padding: sage-spacing(card); - border: sage-border(); border-radius: sage-border(radius-large); } @@ -656,8 +656,8 @@ @mixin sage-panel() { padding: sage-spacing(panel); background-color: sage-color(white); - border: sage-border(); border-radius: sage-border(radius-large); + box-shadow: sage-shadow(100); } /// @@ -669,7 +669,7 @@ $item-underline: "after"; &::#{$item-underline} { - $spacing-off: 50%; + $spacing-off: calc(50% + #{sage-letter-spacing(lg)}); content: ""; position: absolute; @@ -701,6 +701,7 @@ /// @mixin sage-font-family() { font-family: $-body-font-stack; + font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */ } /// diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index f630d3c5c8..8f5b4b5b52 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -22,189 +22,909 @@ // Static vars for color base // /// +/// color color-base-blue-5-hex +/// +$sd-sage-color-base-blue-5-hex: #fafcff; +/// +/// color color-base-blue-5-code +/// +$sd-sage-color-base-blue-5-code: "blue-5"; +/// +/// color color-base-blue-5-classname +/// +$sd-sage-color-base-blue-5-classname: "t-sage--color-blue-5"; +/// +/// color color-base-blue-10-hex +/// +$sd-sage-color-base-blue-10-hex: #eff6ff; +/// +/// color color-base-blue-10-code +/// +$sd-sage-color-base-blue-10-code: "blue-10"; +/// +/// color color-base-blue-10-classname +/// +$sd-sage-color-base-blue-10-classname: "t-sage--color-blue-10"; +/// +/// color color-base-blue-15-hex +/// +$sd-sage-color-base-blue-15-hex: #dbe9fe; +/// +/// color color-base-blue-15-code +/// +$sd-sage-color-base-blue-15-code: "blue-15"; +/// +/// color color-base-blue-15-classname +/// +$sd-sage-color-base-blue-15-classname: "t-sage--color-blue-15"; +/// +/// color color-base-blue-20-hex +/// +$sd-sage-color-base-blue-20-hex: #bfdbfe; +/// +/// color color-base-blue-20-code +/// +$sd-sage-color-base-blue-20-code: "blue-20"; +/// +/// color color-base-blue-20-classname +/// +$sd-sage-color-base-blue-20-classname: "t-sage--color-blue-20"; +/// +/// color color-base-blue-30-hex +/// +$sd-sage-color-base-blue-30-hex: #92c5fd; +/// +/// color color-base-blue-30-code +/// +$sd-sage-color-base-blue-30-code: "blue-30"; +/// +/// color color-base-blue-30-classname +/// +$sd-sage-color-base-blue-30-classname: "t-sage--color-blue-30"; +/// +/// color color-base-blue-40-hex +/// +$sd-sage-color-base-blue-40-hex: #60a5fa; +/// +/// color color-base-blue-40-code +/// +$sd-sage-color-base-blue-40-code: "blue-40"; +/// +/// color color-base-blue-40-classname +/// +$sd-sage-color-base-blue-40-classname: "t-sage--color-blue-40"; +/// +/// color color-base-blue-50-hex +/// +$sd-sage-color-base-blue-50-hex: #3c82f6; +/// +/// color color-base-blue-50-code +/// +$sd-sage-color-base-blue-50-code: "blue-50"; +/// +/// color color-base-blue-50-classname +/// +$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50"; +/// +/// color color-base-blue-60-hex +/// +$sd-sage-color-base-blue-60-hex: #2463eb; +/// +/// color color-base-blue-60-code +/// +$sd-sage-color-base-blue-60-code: "blue-60"; +/// +/// color color-base-blue-60-classname +/// +$sd-sage-color-base-blue-60-classname: "t-sage--color-blue-60"; +/// +/// color color-base-blue-70-hex +/// +$sd-sage-color-base-blue-70-hex: #1c4ed8; +/// +/// color color-base-blue-70-code +/// +$sd-sage-color-base-blue-70-code: "blue-70"; +/// +/// color color-base-blue-70-classname +/// +$sd-sage-color-base-blue-70-classname: "t-sage--color-blue-70"; +/// +/// color color-base-blue-80-hex +/// +$sd-sage-color-base-blue-80-hex: #1d40ae; +/// +/// color color-base-blue-80-code +/// +$sd-sage-color-base-blue-80-code: "blue-80"; +/// +/// color color-base-blue-80-classname +/// +$sd-sage-color-base-blue-80-classname: "t-sage--color-blue-80"; +/// +/// color color-base-blue-90-hex +/// +$sd-sage-color-base-blue-90-hex: #1f3a8a; +/// +/// color color-base-blue-90-code +/// +$sd-sage-color-base-blue-90-code: "blue-90"; +/// +/// color color-base-blue-90-classname +/// +$sd-sage-color-base-blue-90-classname: "t-sage--color-blue-90"; +/// +/// color color-base-blue-95-hex +/// +$sd-sage-color-base-blue-95-hex: #172554; +/// +/// color color-base-blue-95-code +/// +$sd-sage-color-base-blue-95-code: "blue-95"; +/// +/// color color-base-blue-95-classname +/// +$sd-sage-color-base-blue-95-classname: "t-sage--color-blue-95"; +/// +/// color color-base-green-5-hex +/// +$sd-sage-color-base-green-5-hex: #fbfefc; +/// +/// color color-base-green-5-code +/// +$sd-sage-color-base-green-5-code: "green-5"; +/// +/// color color-base-green-5-classname +/// +$sd-sage-color-base-green-5-classname: "t-sage--color-green-5"; +/// +/// color color-base-green-10-hex +/// +$sd-sage-color-base-green-10-hex: #edfcf2; +/// +/// color color-base-green-10-code +/// +$sd-sage-color-base-green-10-code: "green-10"; +/// +/// color color-base-green-10-classname +/// +$sd-sage-color-base-green-10-classname: "t-sage--color-green-10"; +/// +/// color color-base-green-15-hex +/// +$sd-sage-color-base-green-15-hex: #d3f8df; +/// +/// color color-base-green-15-code +/// +$sd-sage-color-base-green-15-code: "green-15"; +/// +/// color color-base-green-15-classname +/// +$sd-sage-color-base-green-15-classname: "t-sage--color-green-15"; +/// +/// color color-base-green-20-hex +/// +$sd-sage-color-base-green-20-hex: #aaf0c4; +/// +/// color color-base-green-20-code +/// +$sd-sage-color-base-green-20-code: "green-20"; +/// +/// color color-base-green-20-classname +/// +$sd-sage-color-base-green-20-classname: "t-sage--color-green-20"; +/// +/// color color-base-green-30-hex +/// +$sd-sage-color-base-green-30-hex: #73e2a3; +/// +/// color color-base-green-30-code +/// +$sd-sage-color-base-green-30-code: "green-30"; +/// +/// color color-base-green-30-classname +/// +$sd-sage-color-base-green-30-classname: "t-sage--color-green-30"; +/// +/// color color-base-green-40-hex +/// +$sd-sage-color-base-green-40-hex: #3dcb7f; +/// +/// color color-base-green-40-code +/// +$sd-sage-color-base-green-40-code: "green-40"; +/// +/// color color-base-green-40-classname +/// +$sd-sage-color-base-green-40-classname: "t-sage--color-green-40"; +/// +/// color color-base-green-50-hex +/// +$sd-sage-color-base-green-50-hex: #17b365; +/// +/// color color-base-green-50-code +/// +$sd-sage-color-base-green-50-code: "green-50"; +/// +/// color color-base-green-50-classname +/// +$sd-sage-color-base-green-50-classname: "t-sage--color-green-50"; +/// +/// color color-base-green-60-hex +/// +$sd-sage-color-base-green-60-hex: #079250; +/// +/// color color-base-green-60-code +/// +$sd-sage-color-base-green-60-code: "green-60"; +/// +/// color color-base-green-60-classname +/// +$sd-sage-color-base-green-60-classname: "t-sage--color-green-60"; +/// +/// color color-base-green-70-hex +/// +$sd-sage-color-base-green-70-hex: #097443; +/// +/// color color-base-green-70-code +/// +$sd-sage-color-base-green-70-code: "green-70"; +/// +/// color color-base-green-70-classname +/// +$sd-sage-color-base-green-70-classname: "t-sage--color-green-70"; +/// +/// color color-base-green-80-hex +/// +$sd-sage-color-base-green-80-hex: #085c37; +/// +/// color color-base-green-80-code +/// +$sd-sage-color-base-green-80-code: "green-80"; +/// +/// color color-base-green-80-classname +/// +$sd-sage-color-base-green-80-classname: "t-sage--color-green-80"; +/// +/// color color-base-green-90-hex +/// +$sd-sage-color-base-green-90-hex: #094c2f; +/// +/// color color-base-green-90-code +/// +$sd-sage-color-base-green-90-code: "green-90"; +/// +/// color color-base-green-90-classname +/// +$sd-sage-color-base-green-90-classname: "t-sage--color-green-90"; +/// +/// color color-base-green-95-hex +/// +$sd-sage-color-base-green-95-hex: #052e1c; +/// +/// color color-base-green-95-code +/// +$sd-sage-color-base-green-95-code: "green-95"; +/// +/// color color-base-green-95-classname +/// +$sd-sage-color-base-green-95-classname: "t-sage--color-green-95"; +/// +/// color color-base-mercury-5-hex +/// +$sd-sage-color-base-mercury-5-hex: #fffcfa; +/// +/// color color-base-mercury-5-code +/// +$sd-sage-color-base-mercury-5-code: "mercury-5"; +/// +/// color color-base-mercury-5-classname +/// +$sd-sage-color-base-mercury-5-classname: "t-sage--color-mercury-5"; +/// +/// color color-base-mercury-10-hex +/// +$sd-sage-color-base-mercury-10-hex: #fff3ed; +/// +/// color color-base-mercury-10-code +/// +$sd-sage-color-base-mercury-10-code: "mercury-10"; +/// +/// color color-base-mercury-10-classname +/// +$sd-sage-color-base-mercury-10-classname: "t-sage--color-mercury-10"; +/// +/// color color-base-mercury-15-hex +/// +$sd-sage-color-base-mercury-15-hex: #ffe3d4; +/// +/// color color-base-mercury-15-code +/// +$sd-sage-color-base-mercury-15-code: "mercury-15"; +/// +/// color color-base-mercury-15-classname +/// +$sd-sage-color-base-mercury-15-classname: "t-sage--color-mercury-15"; +/// +/// color color-base-mercury-20-hex +/// +$sd-sage-color-base-mercury-20-hex: #ffc3a8; +/// +/// color color-base-mercury-20-code +/// +$sd-sage-color-base-mercury-20-code: "mercury-20"; +/// +/// color color-base-mercury-20-classname +/// +$sd-sage-color-base-mercury-20-classname: "t-sage--color-mercury-20"; +/// +/// color color-base-mercury-30-hex +/// +$sd-sage-color-base-mercury-30-hex: #ff9970; +/// +/// color color-base-mercury-30-code +/// +$sd-sage-color-base-mercury-30-code: "mercury-30"; +/// +/// color color-base-mercury-30-classname +/// +$sd-sage-color-base-mercury-30-classname: "t-sage--color-mercury-30"; +/// +/// color color-base-mercury-40-hex +/// +$sd-sage-color-base-mercury-40-hex: #ff6337; +/// +/// color color-base-mercury-40-code +/// +$sd-sage-color-base-mercury-40-code: "mercury-40"; +/// +/// color color-base-mercury-40-classname +/// +$sd-sage-color-base-mercury-40-classname: "t-sage--color-mercury-40"; +/// +/// color color-base-mercury-50-hex +/// +$sd-sage-color-base-mercury-50-hex: #ff3e15; +/// +/// color color-base-mercury-50-code +/// +$sd-sage-color-base-mercury-50-code: "mercury-50"; +/// +/// color color-base-mercury-50-classname +/// +$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50"; +/// +/// color color-base-mercury-60-hex +/// +$sd-sage-color-base-mercury-60-hex: #f11f06; +/// +/// color color-base-mercury-60-code +/// +$sd-sage-color-base-mercury-60-code: "mercury-60"; +/// +/// color color-base-mercury-60-classname +/// +$sd-sage-color-base-mercury-60-classname: "t-sage--color-mercury-60"; +/// +/// color color-base-mercury-70-hex +/// +$sd-sage-color-base-mercury-70-hex: #c81307; +/// +/// color color-base-mercury-70-code +/// +$sd-sage-color-base-mercury-70-code: "mercury-70"; +/// +/// color color-base-mercury-70-classname +/// +$sd-sage-color-base-mercury-70-classname: "t-sage--color-mercury-70"; +/// +/// color color-base-mercury-80-hex +/// +$sd-sage-color-base-mercury-80-hex: #9e110e; +/// +/// color color-base-mercury-80-code +/// +$sd-sage-color-base-mercury-80-code: "mercury-80"; +/// +/// color color-base-mercury-80-classname +/// +$sd-sage-color-base-mercury-80-classname: "t-sage--color-mercury-80"; +/// +/// color color-base-mercury-90-hex +/// +$sd-sage-color-base-mercury-90-hex: #7f120f; +/// +/// color color-base-mercury-90-code +/// +$sd-sage-color-base-mercury-90-code: "mercury-90"; +/// +/// color color-base-mercury-90-classname +/// +$sd-sage-color-base-mercury-90-classname: "t-sage--color-mercury-90"; +/// +/// color color-base-mercury-95-hex +/// +$sd-sage-color-base-mercury-95-hex: #450506; +/// +/// color color-base-mercury-95-code +/// +$sd-sage-color-base-mercury-95-code: "mercury-95"; +/// +/// color color-base-mercury-95-classname +/// +$sd-sage-color-base-mercury-95-classname: "t-sage--color-mercury-95"; +/// /// color color-base-primary-100-hex /// -$sd-sage-color-base-primary-100-hex: #e6f4fe; +$sd-sage-color-base-primary-100-hex: #dbe9fe; +/// +/// color color-base-primary-100-code +/// +$sd-sage-color-base-primary-100-code: "primary-100"; +/// +/// color color-base-primary-100-classname +/// +$sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100"; +/// +/// color color-base-primary-200-hex +/// +$sd-sage-color-base-primary-200-hex: #92c5fd; +/// +/// color color-base-primary-200-code +/// +$sd-sage-color-base-primary-200-code: "primary-200"; +/// +/// color color-base-primary-200-classname +/// +$sd-sage-color-base-primary-200-classname: "t-sage--color-primary-200"; +/// +/// color color-base-primary-300-hex +/// +$sd-sage-color-base-primary-300-hex: #2463eb; +/// +/// color color-base-primary-300-code +/// +$sd-sage-color-base-primary-300-code: "primary-300"; +/// +/// color color-base-primary-300-classname +/// +$sd-sage-color-base-primary-300-classname: "t-sage--color-primary-300"; +/// +/// color color-base-primary-400-hex +/// +$sd-sage-color-base-primary-400-hex: #1c4ed8; +/// +/// color color-base-primary-400-code +/// +$sd-sage-color-base-primary-400-code: "primary-400"; +/// +/// color color-base-primary-400-classname +/// +$sd-sage-color-base-primary-400-classname: "t-sage--color-primary-400"; +/// +/// color color-base-primary-500-hex +/// +$sd-sage-color-base-primary-500-hex: #172554; +/// +/// color color-base-primary-500-code +/// +$sd-sage-color-base-primary-500-code: "primary-500"; +/// +/// color color-base-primary-500-classname +/// +$sd-sage-color-base-primary-500-classname: "t-sage--color-primary-500"; +/// +/// color color-base-sage-100-hex +/// +$sd-sage-color-base-sage-100-hex: #d3f8df; +/// +/// color color-base-sage-100-code +/// +$sd-sage-color-base-sage-100-code: "sage-100"; +/// +/// color color-base-sage-100-classname +/// +$sd-sage-color-base-sage-100-classname: "t-sage--color-sage-100"; +/// +/// color color-base-sage-200-hex +/// +$sd-sage-color-base-sage-200-hex: #73e2a3; +/// +/// color color-base-sage-200-code +/// +$sd-sage-color-base-sage-200-code: "sage-200"; +/// +/// color color-base-sage-200-classname +/// +$sd-sage-color-base-sage-200-classname: "t-sage--color-sage-200"; +/// +/// color color-base-sage-300-hex +/// +$sd-sage-color-base-sage-300-hex: #079250; +/// +/// color color-base-sage-300-code +/// +$sd-sage-color-base-sage-300-code: "sage-300"; +/// +/// color color-base-sage-300-classname +/// +$sd-sage-color-base-sage-300-classname: "t-sage--color-sage-300"; +/// +/// color color-base-sage-400-hex +/// +$sd-sage-color-base-sage-400-hex: #085c37; +/// +/// color color-base-sage-400-code +/// +$sd-sage-color-base-sage-400-code: "sage-400"; +/// +/// color color-base-sage-400-classname +/// +$sd-sage-color-base-sage-400-classname: "t-sage--color-sage-400"; +/// +/// color color-base-sage-500-hex +/// +$sd-sage-color-base-sage-500-hex: #052e1c; +/// +/// color color-base-sage-500-code +/// +$sd-sage-color-base-sage-500-code: "sage-500"; +/// +/// color color-base-sage-500-classname +/// +$sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; +/// +/// color color-base-yellow-5-hex +/// +$sd-sage-color-base-yellow-5-hex: #fffefa; +/// +/// color color-base-yellow-5-code +/// +$sd-sage-color-base-yellow-5-code: "yellow-5"; +/// +/// color color-base-yellow-5-classname +/// +$sd-sage-color-base-yellow-5-classname: "t-sage--color-yellow-5"; +/// +/// color color-base-yellow-10-hex +/// +$sd-sage-color-base-yellow-10-hex: #fffbeb; +/// +/// color color-base-yellow-10-code +/// +$sd-sage-color-base-yellow-10-code: "yellow-10"; +/// +/// color color-base-yellow-10-classname +/// +$sd-sage-color-base-yellow-10-classname: "t-sage--color-yellow-10"; +/// +/// color color-base-yellow-15-hex +/// +$sd-sage-color-base-yellow-15-hex: #fff3c6; +/// +/// color color-base-yellow-15-code +/// +$sd-sage-color-base-yellow-15-code: "yellow-15"; +/// +/// color color-base-yellow-15-classname +/// +$sd-sage-color-base-yellow-15-classname: "t-sage--color-yellow-15"; +/// +/// color color-base-yellow-20-hex +/// +$sd-sage-color-base-yellow-20-hex: #fee589; +/// +/// color color-base-yellow-20-code +/// +$sd-sage-color-base-yellow-20-code: "yellow-20"; +/// +/// color color-base-yellow-20-classname +/// +$sd-sage-color-base-yellow-20-classname: "t-sage--color-yellow-20"; +/// +/// color color-base-yellow-30-hex +/// +$sd-sage-color-base-yellow-30-hex: #fed04b; +/// +/// color color-base-yellow-30-code +/// +$sd-sage-color-base-yellow-30-code: "yellow-30"; +/// +/// color color-base-yellow-30-classname +/// +$sd-sage-color-base-yellow-30-classname: "t-sage--color-yellow-30"; +/// +/// color color-base-yellow-40-hex +/// +$sd-sage-color-base-yellow-40-hex: #fdbb21; +/// +/// color color-base-yellow-40-code +/// +$sd-sage-color-base-yellow-40-code: "yellow-40"; +/// +/// color color-base-yellow-40-classname +/// +$sd-sage-color-base-yellow-40-classname: "t-sage--color-yellow-40"; +/// +/// color color-base-yellow-50-hex +/// +$sd-sage-color-base-yellow-50-hex: #f79a0b; +/// +/// color color-base-yellow-50-code +/// +$sd-sage-color-base-yellow-50-code: "yellow-50"; +/// +/// color color-base-yellow-50-classname +/// +$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; +/// +/// color color-base-yellow-60-hex +/// +$sd-sage-color-base-yellow-60-hex: #db7303; +/// +/// color color-base-yellow-60-code +/// +$sd-sage-color-base-yellow-60-code: "yellow-60"; +/// +/// color color-base-yellow-60-classname +/// +$sd-sage-color-base-yellow-60-classname: "t-sage--color-yellow-60"; +/// +/// color color-base-yellow-70-hex +/// +$sd-sage-color-base-yellow-70-hex: #b64f06; +/// +/// color color-base-yellow-70-code +/// +$sd-sage-color-base-yellow-70-code: "yellow-70"; +/// +/// color color-base-yellow-70-classname +/// +$sd-sage-color-base-yellow-70-classname: "t-sage--color-yellow-70"; +/// +/// color color-base-yellow-80-hex +/// +$sd-sage-color-base-yellow-80-hex: #943d0e; +/// +/// color color-base-yellow-80-code +/// +$sd-sage-color-base-yellow-80-code: "yellow-80"; +/// +/// color color-base-yellow-80-classname +/// +$sd-sage-color-base-yellow-80-classname: "t-sage--color-yellow-80"; +/// +/// color color-base-yellow-90-hex +/// +$sd-sage-color-base-yellow-90-hex: #79330e; +/// +/// color color-base-yellow-90-code +/// +$sd-sage-color-base-yellow-90-code: "yellow-90"; +/// +/// color color-base-yellow-90-classname +/// +$sd-sage-color-base-yellow-90-classname: "t-sage--color-yellow-90"; +/// +/// color color-base-yellow-95-hex +/// +$sd-sage-color-base-yellow-95-hex: #451902; +/// +/// color color-base-yellow-95-code +/// +$sd-sage-color-base-yellow-95-code: "yellow-95"; +/// +/// color color-base-yellow-95-classname +/// +$sd-sage-color-base-yellow-95-classname: "t-sage--color-yellow-95"; +/// +/// color color-base-yellow-100-hex +/// +$sd-sage-color-base-yellow-100-hex: #fff3c6; +/// +/// color color-base-yellow-100-code +/// +$sd-sage-color-base-yellow-100-code: "yellow-100"; +/// +/// color color-base-yellow-100-classname +/// +$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100"; +/// +/// color color-base-yellow-200-hex +/// +$sd-sage-color-base-yellow-200-hex: #fed04b; /// -/// color color-base-primary-100-code +/// color color-base-yellow-200-code /// -$sd-sage-color-base-primary-100-code: "primary-100"; +$sd-sage-color-base-yellow-200-code: "yellow-200"; /// -/// color color-base-primary-100-classname +/// color color-base-yellow-200-classname /// -$sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100"; +$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200"; /// -/// color color-base-primary-200-hex +/// color color-base-yellow-300-hex /// -$sd-sage-color-base-primary-200-hex: #8ecafb; +$sd-sage-color-base-yellow-300-hex: #fdbb21; /// -/// color color-base-primary-200-code +/// color color-base-yellow-300-code /// -$sd-sage-color-base-primary-200-code: "primary-200"; +$sd-sage-color-base-yellow-300-code: "yellow-300"; /// -/// color color-base-primary-200-classname +/// color color-base-yellow-300-classname /// -$sd-sage-color-base-primary-200-classname: "t-sage--color-primary-200"; +$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300"; /// -/// color color-base-primary-300-hex +/// color color-base-yellow-400-hex /// -$sd-sage-color-base-primary-300-hex: #0072ef; +$sd-sage-color-base-yellow-400-hex: #db7303; /// -/// color color-base-primary-300-code +/// color color-base-yellow-400-code /// -$sd-sage-color-base-primary-300-code: "primary-300"; +$sd-sage-color-base-yellow-400-code: "yellow-400"; /// -/// color color-base-primary-300-classname +/// color color-base-yellow-400-classname /// -$sd-sage-color-base-primary-300-classname: "t-sage--color-primary-300"; +$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400"; /// -/// color color-base-primary-400-hex +/// color color-base-yellow-500-hex /// -$sd-sage-color-base-primary-400-hex: #054fb8; +$sd-sage-color-base-yellow-500-hex: #451902; /// -/// color color-base-primary-400-code +/// color color-base-yellow-500-code /// -$sd-sage-color-base-primary-400-code: "primary-400"; +$sd-sage-color-base-yellow-500-code: "yellow-500"; /// -/// color color-base-primary-400-classname +/// color color-base-yellow-500-classname /// -$sd-sage-color-base-primary-400-classname: "t-sage--color-primary-400"; +$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; /// -/// color color-base-primary-500-hex +/// color color-base-red-5-hex /// -$sd-sage-color-base-primary-500-hex: #07265f; +$sd-sage-color-base-red-5-hex: #fffafa; /// -/// color color-base-primary-500-code +/// color color-base-red-5-code /// -$sd-sage-color-base-primary-500-code: "primary-500"; +$sd-sage-color-base-red-5-code: "red-5"; /// -/// color color-base-primary-500-classname +/// color color-base-red-5-classname /// -$sd-sage-color-base-primary-500-classname: "t-sage--color-primary-500"; +$sd-sage-color-base-red-5-classname: "t-sage--color-red-5"; /// -/// color color-base-sage-100-hex +/// color color-base-red-10-hex /// -$sd-sage-color-base-sage-100-hex: #ddf8f0; +$sd-sage-color-base-red-10-hex: #fef2f2; /// -/// color color-base-sage-100-code +/// color color-base-red-10-code /// -$sd-sage-color-base-sage-100-code: "sage-100"; +$sd-sage-color-base-red-10-code: "red-10"; /// -/// color color-base-sage-100-classname +/// color color-base-red-10-classname /// -$sd-sage-color-base-sage-100-classname: "t-sage--color-sage-100"; +$sd-sage-color-base-red-10-classname: "t-sage--color-red-10"; /// -/// color color-base-sage-200-hex +/// color color-base-red-15-hex /// -$sd-sage-color-base-sage-200-hex: #86d5bc; +$sd-sage-color-base-red-15-hex: #fee2e1; /// -/// color color-base-sage-200-code +/// color color-base-red-15-code /// -$sd-sage-color-base-sage-200-code: "sage-200"; +$sd-sage-color-base-red-15-code: "red-15"; /// -/// color color-base-sage-200-classname +/// color color-base-red-15-classname /// -$sd-sage-color-base-sage-200-classname: "t-sage--color-sage-200"; +$sd-sage-color-base-red-15-classname: "t-sage--color-red-15"; /// -/// color color-base-sage-300-hex +/// color color-base-red-20-hex /// -$sd-sage-color-base-sage-300-hex: #23856d; +$sd-sage-color-base-red-20-hex: #fecaca; /// -/// color color-base-sage-300-code +/// color color-base-red-20-code /// -$sd-sage-color-base-sage-300-code: "sage-300"; +$sd-sage-color-base-red-20-code: "red-20"; /// -/// color color-base-sage-300-classname +/// color color-base-red-20-classname /// -$sd-sage-color-base-sage-300-classname: "t-sage--color-sage-300"; +$sd-sage-color-base-red-20-classname: "t-sage--color-red-20"; /// -/// color color-base-sage-400-hex +/// color color-base-red-30-hex /// -$sd-sage-color-base-sage-400-hex: #225d53; +$sd-sage-color-base-red-30-hex: #fda5a5; /// -/// color color-base-sage-400-code +/// color color-base-red-30-code /// -$sd-sage-color-base-sage-400-code: "sage-400"; +$sd-sage-color-base-red-30-code: "red-30"; /// -/// color color-base-sage-400-classname +/// color color-base-red-30-classname /// -$sd-sage-color-base-sage-400-classname: "t-sage--color-sage-400"; +$sd-sage-color-base-red-30-classname: "t-sage--color-red-30"; /// -/// color color-base-sage-500-hex +/// color color-base-red-40-hex /// -$sd-sage-color-base-sage-500-hex: #183e3b; +$sd-sage-color-base-red-40-hex: #f87171; /// -/// color color-base-sage-500-code +/// color color-base-red-40-code /// -$sd-sage-color-base-sage-500-code: "sage-500"; +$sd-sage-color-base-red-40-code: "red-40"; /// -/// color color-base-sage-500-classname +/// color color-base-red-40-classname /// -$sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; +$sd-sage-color-base-red-40-classname: "t-sage--color-red-40"; /// -/// color color-base-yellow-100-hex +/// color color-base-red-50-hex /// -$sd-sage-color-base-yellow-100-hex: #fef8e1; +$sd-sage-color-base-red-50-hex: #ef4444; /// -/// color color-base-yellow-100-code +/// color color-base-red-50-code /// -$sd-sage-color-base-yellow-100-code: "yellow-100"; +$sd-sage-color-base-red-50-code: "red-50"; /// -/// color color-base-yellow-100-classname +/// color color-base-red-50-classname /// -$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100"; +$sd-sage-color-base-red-50-classname: "t-sage--color-red-50"; /// -/// color color-base-yellow-200-hex +/// color color-base-red-60-hex /// -$sd-sage-color-base-yellow-200-hex: #fad980; +$sd-sage-color-base-red-60-hex: #dc2625; /// -/// color color-base-yellow-200-code +/// color color-base-red-60-code /// -$sd-sage-color-base-yellow-200-code: "yellow-200"; +$sd-sage-color-base-red-60-code: "red-60"; /// -/// color color-base-yellow-200-classname +/// color color-base-red-60-classname /// -$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200"; +$sd-sage-color-base-red-60-classname: "t-sage--color-red-60"; /// -/// color color-base-yellow-300-hex +/// color color-base-red-70-hex /// -$sd-sage-color-base-yellow-300-hex: #ffc505; +$sd-sage-color-base-red-70-hex: #b91c1b; /// -/// color color-base-yellow-300-code +/// color color-base-red-70-code /// -$sd-sage-color-base-yellow-300-code: "yellow-300"; +$sd-sage-color-base-red-70-code: "red-70"; /// -/// color color-base-yellow-300-classname +/// color color-base-red-70-classname /// -$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300"; +$sd-sage-color-base-red-70-classname: "t-sage--color-red-70"; /// -/// color color-base-yellow-400-hex +/// color color-base-red-80-hex /// -$sd-sage-color-base-yellow-400-hex: #c56a02; +$sd-sage-color-base-red-80-hex: #991b1b; /// -/// color color-base-yellow-400-code +/// color color-base-red-80-code /// -$sd-sage-color-base-yellow-400-code: "yellow-400"; +$sd-sage-color-base-red-80-code: "red-80"; /// -/// color color-base-yellow-400-classname +/// color color-base-red-80-classname /// -$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400"; +$sd-sage-color-base-red-80-classname: "t-sage--color-red-80"; /// -/// color color-base-yellow-500-hex +/// color color-base-red-90-hex /// -$sd-sage-color-base-yellow-500-hex: #8c3b08; +$sd-sage-color-base-red-90-hex: #7f1c1d; /// -/// color color-base-yellow-500-code +/// color color-base-red-90-code /// -$sd-sage-color-base-yellow-500-code: "yellow-500"; +$sd-sage-color-base-red-90-code: "red-90"; /// -/// color color-base-yellow-500-classname +/// color color-base-red-90-classname /// -$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; +$sd-sage-color-base-red-90-classname: "t-sage--color-red-90"; +/// +/// color color-base-red-95-hex +/// +$sd-sage-color-base-red-95-hex: #572627; +/// +/// color color-base-red-95-code +/// +$sd-sage-color-base-red-95-code: "red-95"; +/// +/// color color-base-red-95-classname +/// +$sd-sage-color-base-red-95-classname: "t-sage--color-red-95"; /// /// color color-base-red-100-hex /// -$sd-sage-color-base-red-100-hex: #fff0f0; +$sd-sage-color-base-red-100-hex: #fee2e1; /// /// color color-base-red-100-code /// @@ -216,7 +936,7 @@ $sd-sage-color-base-red-100-classname: "t-sage--color-red-100"; /// /// color color-base-red-200-hex /// -$sd-sage-color-base-red-200-hex: #fdb0aa; +$sd-sage-color-base-red-200-hex: #fda5a5; /// /// color color-base-red-200-code /// @@ -228,7 +948,7 @@ $sd-sage-color-base-red-200-classname: "t-sage--color-red-200"; /// /// color color-base-red-300-hex /// -$sd-sage-color-base-red-300-hex: #cf3c32; +$sd-sage-color-base-red-300-hex: #ef4444; /// /// color color-base-red-300-code /// @@ -240,7 +960,7 @@ $sd-sage-color-base-red-300-classname: "t-sage--color-red-300"; /// /// color color-base-red-400-hex /// -$sd-sage-color-base-red-400-hex: #99221e; +$sd-sage-color-base-red-400-hex: #991b1b; /// /// color color-base-red-400-code /// @@ -252,7 +972,7 @@ $sd-sage-color-base-red-400-classname: "t-sage--color-red-400"; /// /// color color-base-red-500-hex /// -$sd-sage-color-base-red-500-hex: #5e0d0d; +$sd-sage-color-base-red-500-hex: #572627; /// /// color color-base-red-500-code /// @@ -264,7 +984,7 @@ $sd-sage-color-base-red-500-classname: "t-sage--color-red-500"; /// /// color color-base-orange-100-hex /// -$sd-sage-color-base-orange-100-hex: #fef1e1; +$sd-sage-color-base-orange-100-hex: #ffe3d4; /// /// color color-base-orange-100-code /// @@ -276,7 +996,7 @@ $sd-sage-color-base-orange-100-classname: "t-sage--color-orange-100"; /// /// color color-base-orange-200-hex /// -$sd-sage-color-base-orange-200-hex: #ffb36b; +$sd-sage-color-base-orange-200-hex: #ff9970; /// /// color color-base-orange-200-code /// @@ -288,7 +1008,7 @@ $sd-sage-color-base-orange-200-classname: "t-sage--color-orange-200"; /// /// color color-base-orange-300-hex /// -$sd-sage-color-base-orange-300-hex: #fb7e09; +$sd-sage-color-base-orange-300-hex: #ff3e15; /// /// color color-base-orange-300-code /// @@ -300,7 +1020,7 @@ $sd-sage-color-base-orange-300-classname: "t-sage--color-orange-300"; /// /// color color-base-orange-400-hex /// -$sd-sage-color-base-orange-400-hex: #b3501e; +$sd-sage-color-base-orange-400-hex: #9e110e; /// /// color color-base-orange-400-code /// @@ -312,7 +1032,7 @@ $sd-sage-color-base-orange-400-classname: "t-sage--color-orange-400"; /// /// color color-base-orange-500-hex /// -$sd-sage-color-base-orange-500-hex: #5a260c; +$sd-sage-color-base-orange-500-hex: #450506; /// /// color color-base-orange-500-code /// @@ -322,9 +1042,153 @@ $sd-sage-color-base-orange-500-code: "orange-500"; /// $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500"; /// +/// color color-base-purple-5-hex +/// +$sd-sage-color-base-purple-5-hex: #fafbff; +/// +/// color color-base-purple-5-code +/// +$sd-sage-color-base-purple-5-code: "purple-5"; +/// +/// color color-base-purple-5-classname +/// +$sd-sage-color-base-purple-5-classname: "t-sage--color-purple-5"; +/// +/// color color-base-purple-10-hex +/// +$sd-sage-color-base-purple-10-hex: #edf1ff; +/// +/// color color-base-purple-10-code +/// +$sd-sage-color-base-purple-10-code: "purple-10"; +/// +/// color color-base-purple-10-classname +/// +$sd-sage-color-base-purple-10-classname: "t-sage--color-purple-10"; +/// +/// color color-base-purple-15-hex +/// +$sd-sage-color-base-purple-15-hex: #e0e4ff; +/// +/// color color-base-purple-15-code +/// +$sd-sage-color-base-purple-15-code: "purple-15"; +/// +/// color color-base-purple-15-classname +/// +$sd-sage-color-base-purple-15-classname: "t-sage--color-purple-15"; +/// +/// color color-base-purple-20-hex +/// +$sd-sage-color-base-purple-20-hex: #c7cdfe; +/// +/// color color-base-purple-20-code +/// +$sd-sage-color-base-purple-20-code: "purple-20"; +/// +/// color color-base-purple-20-classname +/// +$sd-sage-color-base-purple-20-classname: "t-sage--color-purple-20"; +/// +/// color color-base-purple-30-hex +/// +$sd-sage-color-base-purple-30-hex: #a3acfd; +/// +/// color color-base-purple-30-code +/// +$sd-sage-color-base-purple-30-code: "purple-30"; +/// +/// color color-base-purple-30-classname +/// +$sd-sage-color-base-purple-30-classname: "t-sage--color-purple-30"; +/// +/// color color-base-purple-40-hex +/// +$sd-sage-color-base-purple-40-hex: #8081f9; +/// +/// color color-base-purple-40-code +/// +$sd-sage-color-base-purple-40-code: "purple-40"; +/// +/// color color-base-purple-40-classname +/// +$sd-sage-color-base-purple-40-classname: "t-sage--color-purple-40"; +/// +/// color color-base-purple-50-hex +/// +$sd-sage-color-base-purple-50-hex: #6a62f2; +/// +/// color color-base-purple-50-code +/// +$sd-sage-color-base-purple-50-code: "purple-50"; +/// +/// color color-base-purple-50-classname +/// +$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; +/// +/// color color-base-purple-60-hex +/// +$sd-sage-color-base-purple-60-hex: #533be5; +/// +/// color color-base-purple-60-code +/// +$sd-sage-color-base-purple-60-code: "purple-60"; +/// +/// color color-base-purple-60-classname +/// +$sd-sage-color-base-purple-60-classname: "t-sage--color-purple-60"; +/// +/// color color-base-purple-70-hex +/// +$sd-sage-color-base-purple-70-hex: #4f37cb; +/// +/// color color-base-purple-70-code +/// +$sd-sage-color-base-purple-70-code: "purple-70"; +/// +/// color color-base-purple-70-classname +/// +$sd-sage-color-base-purple-70-classname: "t-sage--color-purple-70"; +/// +/// color color-base-purple-80-hex +/// +$sd-sage-color-base-purple-80-hex: #402fa4; +/// +/// color color-base-purple-80-code +/// +$sd-sage-color-base-purple-80-code: "purple-80"; +/// +/// color color-base-purple-80-classname +/// +$sd-sage-color-base-purple-80-classname: "t-sage--color-purple-80"; +/// +/// color color-base-purple-90-hex +/// +$sd-sage-color-base-purple-90-hex: #372d82; +/// +/// color color-base-purple-90-code +/// +$sd-sage-color-base-purple-90-code: "purple-90"; +/// +/// color color-base-purple-90-classname +/// +$sd-sage-color-base-purple-90-classname: "t-sage--color-purple-90"; +/// +/// color color-base-purple-95-hex +/// +$sd-sage-color-base-purple-95-hex: #221b4b; +/// +/// color color-base-purple-95-code +/// +$sd-sage-color-base-purple-95-code: "purple-95"; +/// +/// color color-base-purple-95-classname +/// +$sd-sage-color-base-purple-95-classname: "t-sage--color-purple-95"; +/// /// color color-base-purple-100-hex /// -$sd-sage-color-base-purple-100-hex: #eee4f6; +$sd-sage-color-base-purple-100-hex: #e0e4ff; /// /// color color-base-purple-100-code /// @@ -336,7 +1200,7 @@ $sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100"; /// /// color color-base-purple-200-hex /// -$sd-sage-color-base-purple-200-hex: #d9c2ef; +$sd-sage-color-base-purple-200-hex: #a3acfd; /// /// color color-base-purple-200-code /// @@ -348,7 +1212,7 @@ $sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200"; /// /// color color-base-purple-300-hex /// -$sd-sage-color-base-purple-300-hex: #8e5ad8; +$sd-sage-color-base-purple-300-hex: #533be5; /// /// color color-base-purple-300-code /// @@ -360,7 +1224,7 @@ $sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300"; /// /// color color-base-purple-400-hex /// -$sd-sage-color-base-purple-400-hex: #50348a; +$sd-sage-color-base-purple-400-hex: #402fa4; /// /// color color-base-purple-400-code /// @@ -372,7 +1236,7 @@ $sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400"; /// /// color color-base-purple-500-hex /// -$sd-sage-color-base-purple-500-hex: #381c5e; +$sd-sage-color-base-purple-500-hex: #221b4b; /// /// color color-base-purple-500-code /// @@ -384,7 +1248,7 @@ $sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500"; /// /// color color-base-charcoal-100-hex /// -$sd-sage-color-base-charcoal-100-hex: #8d939a; +$sd-sage-color-base-charcoal-100-hex: #828180; /// /// color color-base-charcoal-100-code /// @@ -396,7 +1260,7 @@ $sd-sage-color-base-charcoal-100-classname: "t-sage--color-charcoal-100"; /// /// color color-base-charcoal-200-hex /// -$sd-sage-color-base-charcoal-200-hex: #60666c; +$sd-sage-color-base-charcoal-200-hex: #6c6a69; /// /// color color-base-charcoal-200-code /// @@ -408,7 +1272,7 @@ $sd-sage-color-base-charcoal-200-classname: "t-sage--color-charcoal-200"; /// /// color color-base-charcoal-300-hex /// -$sd-sage-color-base-charcoal-300-hex: #43474b; +$sd-sage-color-base-charcoal-300-hex: #4d4d4c; /// /// color color-base-charcoal-300-code /// @@ -420,7 +1284,7 @@ $sd-sage-color-base-charcoal-300-classname: "t-sage--color-charcoal-300"; /// /// color color-base-charcoal-400-hex /// -$sd-sage-color-base-charcoal-400-hex: #202327; +$sd-sage-color-base-charcoal-400-hex: #343332; /// /// color color-base-charcoal-400-code /// @@ -432,7 +1296,7 @@ $sd-sage-color-base-charcoal-400-classname: "t-sage--color-charcoal-400"; /// /// color color-base-charcoal-500-hex /// -$sd-sage-color-base-charcoal-500-hex: #040506; +$sd-sage-color-base-charcoal-500-hex: #1a1a19; /// /// color color-base-charcoal-500-code /// @@ -442,9 +1306,153 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500"; /// $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500"; /// +/// color color-base-grey-5-hex +/// +$sd-sage-color-base-grey-5-hex: #fcfcfc; +/// +/// color color-base-grey-5-code +/// +$sd-sage-color-base-grey-5-code: "grey-5"; +/// +/// color color-base-grey-5-classname +/// +$sd-sage-color-base-grey-5-classname: "t-sage--color-grey-5"; +/// +/// color color-base-grey-10-hex +/// +$sd-sage-color-base-grey-10-hex: #f8f8f8; +/// +/// color color-base-grey-10-code +/// +$sd-sage-color-base-grey-10-code: "grey-10"; +/// +/// color color-base-grey-10-classname +/// +$sd-sage-color-base-grey-10-classname: "t-sage--color-grey-10"; +/// +/// color color-base-grey-15-hex +/// +$sd-sage-color-base-grey-15-hex: #f0f0f0; +/// +/// color color-base-grey-15-code +/// +$sd-sage-color-base-grey-15-code: "grey-15"; +/// +/// color color-base-grey-15-classname +/// +$sd-sage-color-base-grey-15-classname: "t-sage--color-grey-15"; +/// +/// color color-base-grey-20-hex +/// +$sd-sage-color-base-grey-20-hex: #e4e4e4; +/// +/// color color-base-grey-20-code +/// +$sd-sage-color-base-grey-20-code: "grey-20"; +/// +/// color color-base-grey-20-classname +/// +$sd-sage-color-base-grey-20-classname: "t-sage--color-grey-20"; +/// +/// color color-base-grey-30-hex +/// +$sd-sage-color-base-grey-30-hex: #d2d1d1; +/// +/// color color-base-grey-30-code +/// +$sd-sage-color-base-grey-30-code: "grey-30"; +/// +/// color color-base-grey-30-classname +/// +$sd-sage-color-base-grey-30-classname: "t-sage--color-grey-30"; +/// +/// color color-base-grey-40-hex +/// +$sd-sage-color-base-grey-40-hex: #bbbab9; +/// +/// color color-base-grey-40-code +/// +$sd-sage-color-base-grey-40-code: "grey-40"; +/// +/// color color-base-grey-40-classname +/// +$sd-sage-color-base-grey-40-classname: "t-sage--color-grey-40"; +/// +/// color color-base-grey-50-hex +/// +$sd-sage-color-base-grey-50-hex: #9b9a98; +/// +/// color color-base-grey-50-code +/// +$sd-sage-color-base-grey-50-code: "grey-50"; +/// +/// color color-base-grey-50-classname +/// +$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; +/// +/// color color-base-grey-60-hex +/// +$sd-sage-color-base-grey-60-hex: #828180; +/// +/// color color-base-grey-60-code +/// +$sd-sage-color-base-grey-60-code: "grey-60"; +/// +/// color color-base-grey-60-classname +/// +$sd-sage-color-base-grey-60-classname: "t-sage--color-grey-60"; +/// +/// color color-base-grey-70-hex +/// +$sd-sage-color-base-grey-70-hex: #6c6a69; +/// +/// color color-base-grey-70-code +/// +$sd-sage-color-base-grey-70-code: "grey-70"; +/// +/// color color-base-grey-70-classname +/// +$sd-sage-color-base-grey-70-classname: "t-sage--color-grey-70"; +/// +/// color color-base-grey-80-hex +/// +$sd-sage-color-base-grey-80-hex: #4d4d4c; +/// +/// color color-base-grey-80-code +/// +$sd-sage-color-base-grey-80-code: "grey-80"; +/// +/// color color-base-grey-80-classname +/// +$sd-sage-color-base-grey-80-classname: "t-sage--color-grey-80"; +/// +/// color color-base-grey-90-hex +/// +$sd-sage-color-base-grey-90-hex: #343332; +/// +/// color color-base-grey-90-code +/// +$sd-sage-color-base-grey-90-code: "grey-90"; +/// +/// color color-base-grey-90-classname +/// +$sd-sage-color-base-grey-90-classname: "t-sage--color-grey-90"; +/// +/// color color-base-grey-95-hex +/// +$sd-sage-color-base-grey-95-hex: #1a1a19; +/// +/// color color-base-grey-95-code +/// +$sd-sage-color-base-grey-95-code: "grey-95"; +/// +/// color color-base-grey-95-classname +/// +$sd-sage-color-base-grey-95-classname: "t-sage--color-grey-95"; +/// /// color color-base-grey-100-hex /// -$sd-sage-color-base-grey-100-hex: #f9fafa; +$sd-sage-color-base-grey-100-hex: #f8f8f8; /// /// color color-base-grey-100-code /// @@ -456,7 +1464,7 @@ $sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100"; /// /// color color-base-grey-200-hex /// -$sd-sage-color-base-grey-200-hex: #f6f8f8; +$sd-sage-color-base-grey-200-hex: #f0f0f0; /// /// color color-base-grey-200-code /// @@ -468,7 +1476,7 @@ $sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200"; /// /// color color-base-grey-300-hex /// -$sd-sage-color-base-grey-300-hex: #eceeef; +$sd-sage-color-base-grey-300-hex: #e4e4e4; /// /// color color-base-grey-300-code /// @@ -480,7 +1488,7 @@ $sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300"; /// /// color color-base-grey-400-hex /// -$sd-sage-color-base-grey-400-hex: #d3d5d9; +$sd-sage-color-base-grey-400-hex: #d2d1d1; /// /// color color-base-grey-400-code /// @@ -492,7 +1500,7 @@ $sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400"; /// /// color color-base-grey-500-hex /// -$sd-sage-color-base-grey-500-hex: #b5bac0; +$sd-sage-color-base-grey-500-hex: #9b9a98; /// /// color color-base-grey-500-code /// @@ -626,6 +1634,192 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500"; /// Map for color base /// $sd-sage-color: ( + blue: ( + 5: ( + hex: $sd-sage-color-base-blue-5-hex, + code: $sd-sage-color-base-blue-5-code, + classname: $sd-sage-color-base-blue-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-blue-10-hex, + code: $sd-sage-color-base-blue-10-code, + classname: $sd-sage-color-base-blue-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-blue-15-hex, + code: $sd-sage-color-base-blue-15-code, + classname: $sd-sage-color-base-blue-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-blue-20-hex, + code: $sd-sage-color-base-blue-20-code, + classname: $sd-sage-color-base-blue-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-blue-30-hex, + code: $sd-sage-color-base-blue-30-code, + classname: $sd-sage-color-base-blue-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-blue-40-hex, + code: $sd-sage-color-base-blue-40-code, + classname: $sd-sage-color-base-blue-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-blue-50-hex, + code: $sd-sage-color-base-blue-50-code, + classname: $sd-sage-color-base-blue-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-blue-60-hex, + code: $sd-sage-color-base-blue-60-code, + classname: $sd-sage-color-base-blue-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-blue-70-hex, + code: $sd-sage-color-base-blue-70-code, + classname: $sd-sage-color-base-blue-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-blue-80-hex, + code: $sd-sage-color-base-blue-80-code, + classname: $sd-sage-color-base-blue-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-blue-90-hex, + code: $sd-sage-color-base-blue-90-code, + classname: $sd-sage-color-base-blue-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-blue-95-hex, + code: $sd-sage-color-base-blue-95-code, + classname: $sd-sage-color-base-blue-95-classname, + ), + ), + green: ( + 5: ( + hex: $sd-sage-color-base-green-5-hex, + code: $sd-sage-color-base-green-5-code, + classname: $sd-sage-color-base-green-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-green-10-hex, + code: $sd-sage-color-base-green-10-code, + classname: $sd-sage-color-base-green-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-green-15-hex, + code: $sd-sage-color-base-green-15-code, + classname: $sd-sage-color-base-green-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-green-20-hex, + code: $sd-sage-color-base-green-20-code, + classname: $sd-sage-color-base-green-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-green-30-hex, + code: $sd-sage-color-base-green-30-code, + classname: $sd-sage-color-base-green-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-green-40-hex, + code: $sd-sage-color-base-green-40-code, + classname: $sd-sage-color-base-green-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-green-50-hex, + code: $sd-sage-color-base-green-50-code, + classname: $sd-sage-color-base-green-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-green-60-hex, + code: $sd-sage-color-base-green-60-code, + classname: $sd-sage-color-base-green-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-green-70-hex, + code: $sd-sage-color-base-green-70-code, + classname: $sd-sage-color-base-green-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-green-80-hex, + code: $sd-sage-color-base-green-80-code, + classname: $sd-sage-color-base-green-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-green-90-hex, + code: $sd-sage-color-base-green-90-code, + classname: $sd-sage-color-base-green-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-green-95-hex, + code: $sd-sage-color-base-green-95-code, + classname: $sd-sage-color-base-green-95-classname, + ), + ), + mercury: ( + 5: ( + hex: $sd-sage-color-base-mercury-5-hex, + code: $sd-sage-color-base-mercury-5-code, + classname: $sd-sage-color-base-mercury-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-mercury-10-hex, + code: $sd-sage-color-base-mercury-10-code, + classname: $sd-sage-color-base-mercury-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-mercury-15-hex, + code: $sd-sage-color-base-mercury-15-code, + classname: $sd-sage-color-base-mercury-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-mercury-20-hex, + code: $sd-sage-color-base-mercury-20-code, + classname: $sd-sage-color-base-mercury-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-mercury-30-hex, + code: $sd-sage-color-base-mercury-30-code, + classname: $sd-sage-color-base-mercury-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-mercury-40-hex, + code: $sd-sage-color-base-mercury-40-code, + classname: $sd-sage-color-base-mercury-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-mercury-50-hex, + code: $sd-sage-color-base-mercury-50-code, + classname: $sd-sage-color-base-mercury-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-mercury-60-hex, + code: $sd-sage-color-base-mercury-60-code, + classname: $sd-sage-color-base-mercury-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-mercury-70-hex, + code: $sd-sage-color-base-mercury-70-code, + classname: $sd-sage-color-base-mercury-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-mercury-80-hex, + code: $sd-sage-color-base-mercury-80-code, + classname: $sd-sage-color-base-mercury-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-mercury-90-hex, + code: $sd-sage-color-base-mercury-90-code, + classname: $sd-sage-color-base-mercury-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-mercury-95-hex, + code: $sd-sage-color-base-mercury-95-code, + classname: $sd-sage-color-base-mercury-95-classname, + ), + ), primary: ( 100: ( hex: $sd-sage-color-base-primary-100-hex, @@ -681,6 +1875,66 @@ $sd-sage-color: ( ), ), yellow: ( + 5: ( + hex: $sd-sage-color-base-yellow-5-hex, + code: $sd-sage-color-base-yellow-5-code, + classname: $sd-sage-color-base-yellow-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-yellow-10-hex, + code: $sd-sage-color-base-yellow-10-code, + classname: $sd-sage-color-base-yellow-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-yellow-15-hex, + code: $sd-sage-color-base-yellow-15-code, + classname: $sd-sage-color-base-yellow-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-yellow-20-hex, + code: $sd-sage-color-base-yellow-20-code, + classname: $sd-sage-color-base-yellow-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-yellow-30-hex, + code: $sd-sage-color-base-yellow-30-code, + classname: $sd-sage-color-base-yellow-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-yellow-40-hex, + code: $sd-sage-color-base-yellow-40-code, + classname: $sd-sage-color-base-yellow-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-yellow-50-hex, + code: $sd-sage-color-base-yellow-50-code, + classname: $sd-sage-color-base-yellow-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-yellow-60-hex, + code: $sd-sage-color-base-yellow-60-code, + classname: $sd-sage-color-base-yellow-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-yellow-70-hex, + code: $sd-sage-color-base-yellow-70-code, + classname: $sd-sage-color-base-yellow-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-yellow-80-hex, + code: $sd-sage-color-base-yellow-80-code, + classname: $sd-sage-color-base-yellow-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-yellow-90-hex, + code: $sd-sage-color-base-yellow-90-code, + classname: $sd-sage-color-base-yellow-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-yellow-95-hex, + code: $sd-sage-color-base-yellow-95-code, + classname: $sd-sage-color-base-yellow-95-classname, + ), 100: ( hex: $sd-sage-color-base-yellow-100-hex, code: $sd-sage-color-base-yellow-100-code, @@ -708,6 +1962,66 @@ $sd-sage-color: ( ), ), red: ( + 5: ( + hex: $sd-sage-color-base-red-5-hex, + code: $sd-sage-color-base-red-5-code, + classname: $sd-sage-color-base-red-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-red-10-hex, + code: $sd-sage-color-base-red-10-code, + classname: $sd-sage-color-base-red-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-red-15-hex, + code: $sd-sage-color-base-red-15-code, + classname: $sd-sage-color-base-red-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-red-20-hex, + code: $sd-sage-color-base-red-20-code, + classname: $sd-sage-color-base-red-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-red-30-hex, + code: $sd-sage-color-base-red-30-code, + classname: $sd-sage-color-base-red-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-red-40-hex, + code: $sd-sage-color-base-red-40-code, + classname: $sd-sage-color-base-red-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-red-50-hex, + code: $sd-sage-color-base-red-50-code, + classname: $sd-sage-color-base-red-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-red-60-hex, + code: $sd-sage-color-base-red-60-code, + classname: $sd-sage-color-base-red-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-red-70-hex, + code: $sd-sage-color-base-red-70-code, + classname: $sd-sage-color-base-red-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-red-80-hex, + code: $sd-sage-color-base-red-80-code, + classname: $sd-sage-color-base-red-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-red-90-hex, + code: $sd-sage-color-base-red-90-code, + classname: $sd-sage-color-base-red-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-red-95-hex, + code: $sd-sage-color-base-red-95-code, + classname: $sd-sage-color-base-red-95-classname, + ), 100: ( hex: $sd-sage-color-base-red-100-hex, code: $sd-sage-color-base-red-100-code, @@ -762,6 +2076,66 @@ $sd-sage-color: ( ), ), purple: ( + 5: ( + hex: $sd-sage-color-base-purple-5-hex, + code: $sd-sage-color-base-purple-5-code, + classname: $sd-sage-color-base-purple-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-purple-10-hex, + code: $sd-sage-color-base-purple-10-code, + classname: $sd-sage-color-base-purple-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-purple-15-hex, + code: $sd-sage-color-base-purple-15-code, + classname: $sd-sage-color-base-purple-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-purple-20-hex, + code: $sd-sage-color-base-purple-20-code, + classname: $sd-sage-color-base-purple-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-purple-30-hex, + code: $sd-sage-color-base-purple-30-code, + classname: $sd-sage-color-base-purple-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-purple-40-hex, + code: $sd-sage-color-base-purple-40-code, + classname: $sd-sage-color-base-purple-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-purple-50-hex, + code: $sd-sage-color-base-purple-50-code, + classname: $sd-sage-color-base-purple-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-purple-60-hex, + code: $sd-sage-color-base-purple-60-code, + classname: $sd-sage-color-base-purple-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-purple-70-hex, + code: $sd-sage-color-base-purple-70-code, + classname: $sd-sage-color-base-purple-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-purple-80-hex, + code: $sd-sage-color-base-purple-80-code, + classname: $sd-sage-color-base-purple-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-purple-90-hex, + code: $sd-sage-color-base-purple-90-code, + classname: $sd-sage-color-base-purple-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-purple-95-hex, + code: $sd-sage-color-base-purple-95-code, + classname: $sd-sage-color-base-purple-95-classname, + ), 100: ( hex: $sd-sage-color-base-purple-100-hex, code: $sd-sage-color-base-purple-100-code, @@ -816,6 +2190,66 @@ $sd-sage-color: ( ), ), grey: ( + 5: ( + hex: $sd-sage-color-base-grey-5-hex, + code: $sd-sage-color-base-grey-5-code, + classname: $sd-sage-color-base-grey-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-grey-10-hex, + code: $sd-sage-color-base-grey-10-code, + classname: $sd-sage-color-base-grey-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-grey-15-hex, + code: $sd-sage-color-base-grey-15-code, + classname: $sd-sage-color-base-grey-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-grey-20-hex, + code: $sd-sage-color-base-grey-20-code, + classname: $sd-sage-color-base-grey-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-grey-30-hex, + code: $sd-sage-color-base-grey-30-code, + classname: $sd-sage-color-base-grey-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-grey-40-hex, + code: $sd-sage-color-base-grey-40-code, + classname: $sd-sage-color-base-grey-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-grey-50-hex, + code: $sd-sage-color-base-grey-50-code, + classname: $sd-sage-color-base-grey-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-grey-60-hex, + code: $sd-sage-color-base-grey-60-code, + classname: $sd-sage-color-base-grey-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-grey-70-hex, + code: $sd-sage-color-base-grey-70-code, + classname: $sd-sage-color-base-grey-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-grey-80-hex, + code: $sd-sage-color-base-grey-80-code, + classname: $sd-sage-color-base-grey-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-grey-90-hex, + code: $sd-sage-color-base-grey-90-code, + classname: $sd-sage-color-base-grey-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-grey-95-hex, + code: $sd-sage-color-base-grey-95-code, + classname: $sd-sage-color-base-grey-95-classname, + ), 100: ( hex: $sd-sage-color-base-grey-100-hex, code: $sd-sage-color-base-grey-100-code, @@ -926,75 +2360,75 @@ $sd-sage-color: ( /// /// color combos color-combos-draft-default-foreground /// -$sd-sage-color-combos-draft-default-foreground: #202327; +$sd-sage-color-combos-draft-default-foreground: #343332; /// /// color combos color-combos-draft-default-foreground-accent /// -$sd-sage-color-combos-draft-default-foreground-accent: #040506; +$sd-sage-color-combos-draft-default-foreground-accent: #1a1a19; /// /// color combos color-combos-draft-default-background /// -$sd-sage-color-combos-draft-default-background: #eceeef; +$sd-sage-color-combos-draft-default-background: #e4e4e4; /// /// color combos color-combos-draft-default-background-accent /// -$sd-sage-color-combos-draft-default-background-accent: #d3d5d9; +$sd-sage-color-combos-draft-default-background-accent: #d2d1d1; /// /// color combos color-combos-draft-default-icon-background-accent /// -$sd-sage-color-combos-draft-default-icon-background-accent: #60666c; +$sd-sage-color-combos-draft-default-icon-background-accent: #6c6a69; /// /// color combos color-combos-draft-subtle-foreground /// -$sd-sage-color-combos-draft-subtle-foreground: #60666c; +$sd-sage-color-combos-draft-subtle-foreground: #6c6a69; /// /// color combos color-combos-draft-subtle-foreground-accent /// -$sd-sage-color-combos-draft-subtle-foreground-accent: #8d939a; +$sd-sage-color-combos-draft-subtle-foreground-accent: #828180; /// /// color combos color-combos-draft-subtle-background /// -$sd-sage-color-combos-draft-subtle-background: #8d939a; +$sd-sage-color-combos-draft-subtle-background: #828180; /// /// color combos color-combos-draft-bold-foreground /// -$sd-sage-color-combos-draft-bold-foreground: #f6f8f8; +$sd-sage-color-combos-draft-bold-foreground: #f0f0f0; /// /// color combos color-combos-draft-bold-background /// -$sd-sage-color-combos-draft-bold-background: #202327; +$sd-sage-color-combos-draft-bold-background: #343332; /// /// color combos color-combos-published-default-foreground /// -$sd-sage-color-combos-published-default-foreground: #225d53; +$sd-sage-color-combos-published-default-foreground: #085c37; /// /// color combos color-combos-published-default-foreground-accent /// -$sd-sage-color-combos-published-default-foreground-accent: #183e3b; +$sd-sage-color-combos-published-default-foreground-accent: #052e1c; /// /// color combos color-combos-published-default-background /// -$sd-sage-color-combos-published-default-background: #ddf8f0; +$sd-sage-color-combos-published-default-background: #d3f8df; /// /// color combos color-combos-published-default-background-accent /// -$sd-sage-color-combos-published-default-background-accent: #86d5bc; +$sd-sage-color-combos-published-default-background-accent: #73e2a3; /// /// color combos color-combos-published-default-icon-background-accent /// -$sd-sage-color-combos-published-default-icon-background-accent: #23856d; +$sd-sage-color-combos-published-default-icon-background-accent: #079250; /// /// color combos color-combos-published-subtle-foreground /// -$sd-sage-color-combos-published-subtle-foreground: #225d53; +$sd-sage-color-combos-published-subtle-foreground: #085c37; /// /// color combos color-combos-published-subtle-foreground-accent /// -$sd-sage-color-combos-published-subtle-foreground-accent: #23856d; +$sd-sage-color-combos-published-subtle-foreground-accent: #079250; /// /// color combos color-combos-published-subtle-background /// -$sd-sage-color-combos-published-subtle-background: #23856d; +$sd-sage-color-combos-published-subtle-background: #079250; /// /// color combos color-combos-published-bold-foreground /// @@ -1002,119 +2436,119 @@ $sd-sage-color-combos-published-bold-foreground: #fff; /// /// color combos color-combos-published-bold-background /// -$sd-sage-color-combos-published-bold-background: #23856d; +$sd-sage-color-combos-published-bold-background: #079250; /// /// color combos color-combos-info-default-foreground /// -$sd-sage-color-combos-info-default-foreground: #054fb8; +$sd-sage-color-combos-info-default-foreground: #1c4ed8; /// /// color combos color-combos-info-default-foreground-accent /// -$sd-sage-color-combos-info-default-foreground-accent: #07265f; +$sd-sage-color-combos-info-default-foreground-accent: #172554; /// /// color combos color-combos-info-default-background /// -$sd-sage-color-combos-info-default-background: #e6f4fe; +$sd-sage-color-combos-info-default-background: #dbe9fe; /// /// color combos color-combos-info-default-background-accent /// -$sd-sage-color-combos-info-default-background-accent: #8ecafb; +$sd-sage-color-combos-info-default-background-accent: #92c5fd; /// /// color combos color-combos-info-default-icon-background-accent /// -$sd-sage-color-combos-info-default-icon-background-accent: #0072ef; +$sd-sage-color-combos-info-default-icon-background-accent: #2463eb; /// /// color combos color-combos-info-subtle-foreground /// -$sd-sage-color-combos-info-subtle-foreground: #054fb8; +$sd-sage-color-combos-info-subtle-foreground: #1c4ed8; /// /// color combos color-combos-info-subtle-foreground-accent /// -$sd-sage-color-combos-info-subtle-foreground-accent: #0072ef; +$sd-sage-color-combos-info-subtle-foreground-accent: #2463eb; /// /// color combos color-combos-info-subtle-background /// -$sd-sage-color-combos-info-subtle-background: #8ecafb; +$sd-sage-color-combos-info-subtle-background: #92c5fd; /// /// color combos color-combos-info-bold-foreground /// -$sd-sage-color-combos-info-bold-foreground: #e6f4fe; +$sd-sage-color-combos-info-bold-foreground: #dbe9fe; /// /// color combos color-combos-info-bold-background /// -$sd-sage-color-combos-info-bold-background: #0072ef; +$sd-sage-color-combos-info-bold-background: #2463eb; /// /// color combos color-combos-locked-default-foreground /// -$sd-sage-color-combos-locked-default-foreground: #50348a; +$sd-sage-color-combos-locked-default-foreground: #402fa4; /// /// color combos color-combos-locked-default-foreground-accent /// -$sd-sage-color-combos-locked-default-foreground-accent: #381c5e; +$sd-sage-color-combos-locked-default-foreground-accent: #221b4b; /// /// color combos color-combos-locked-default-background /// -$sd-sage-color-combos-locked-default-background: #eee4f6; +$sd-sage-color-combos-locked-default-background: #e0e4ff; /// /// color combos color-combos-locked-default-background-accent /// -$sd-sage-color-combos-locked-default-background-accent: #d9c2ef; +$sd-sage-color-combos-locked-default-background-accent: #a3acfd; /// /// color combos color-combos-locked-default-icon-background-accent /// -$sd-sage-color-combos-locked-default-icon-background-accent: #8e5ad8; +$sd-sage-color-combos-locked-default-icon-background-accent: #533be5; /// /// color combos color-combos-locked-subtle-foreground /// -$sd-sage-color-combos-locked-subtle-foreground: #50348a; +$sd-sage-color-combos-locked-subtle-foreground: #402fa4; /// /// color combos color-combos-locked-subtle-foreground-accent /// -$sd-sage-color-combos-locked-subtle-foreground-accent: #8e5ad8; +$sd-sage-color-combos-locked-subtle-foreground-accent: #533be5; /// /// color combos color-combos-locked-subtle-background /// -$sd-sage-color-combos-locked-subtle-background: #d9c2ef; +$sd-sage-color-combos-locked-subtle-background: #a3acfd; /// /// color combos color-combos-locked-bold-foreground /// -$sd-sage-color-combos-locked-bold-foreground: #eee4f6; +$sd-sage-color-combos-locked-bold-foreground: #e0e4ff; /// /// color combos color-combos-locked-bold-background /// -$sd-sage-color-combos-locked-bold-background: #8e5ad8; +$sd-sage-color-combos-locked-bold-background: #533be5; /// /// color combos color-combos-warning-default-foreground /// -$sd-sage-color-combos-warning-default-foreground: #c56a02; +$sd-sage-color-combos-warning-default-foreground: #db7303; /// /// color combos color-combos-warning-default-foreground-accent /// -$sd-sage-color-combos-warning-default-foreground-accent: #8c3b08; +$sd-sage-color-combos-warning-default-foreground-accent: #451902; /// /// color combos color-combos-warning-default-background /// -$sd-sage-color-combos-warning-default-background: #fef8e1; +$sd-sage-color-combos-warning-default-background: #fff3c6; /// /// color combos color-combos-warning-default-background-accent /// -$sd-sage-color-combos-warning-default-background-accent: #fad980; +$sd-sage-color-combos-warning-default-background-accent: #fed04b; /// /// color combos color-combos-warning-default-icon-background-accent /// -$sd-sage-color-combos-warning-default-icon-background-accent: #c56a02; +$sd-sage-color-combos-warning-default-icon-background-accent: #db7303; /// /// color combos color-combos-warning-subtle-foreground /// -$sd-sage-color-combos-warning-subtle-foreground: #c56a02; +$sd-sage-color-combos-warning-subtle-foreground: #db7303; /// /// color combos color-combos-warning-subtle-foreground-accent /// -$sd-sage-color-combos-warning-subtle-foreground-accent: #ffc505; +$sd-sage-color-combos-warning-subtle-foreground-accent: #fdbb21; /// /// color combos color-combos-warning-subtle-background /// -$sd-sage-color-combos-warning-subtle-background: #ffc505; +$sd-sage-color-combos-warning-subtle-background: #fdbb21; /// /// color combos color-combos-warning-bold-foreground /// @@ -1122,47 +2556,47 @@ $sd-sage-color-combos-warning-bold-foreground: #fff; /// /// color combos color-combos-warning-bold-background /// -$sd-sage-color-combos-warning-bold-background: #ffc505; +$sd-sage-color-combos-warning-bold-background: #fdbb21; /// /// color combos color-combos-danger-default-foreground /// -$sd-sage-color-combos-danger-default-foreground: #99221e; +$sd-sage-color-combos-danger-default-foreground: #991b1b; /// /// color combos color-combos-danger-default-foreground-accent /// -$sd-sage-color-combos-danger-default-foreground-accent: #5e0d0d; +$sd-sage-color-combos-danger-default-foreground-accent: #572627; /// /// color combos color-combos-danger-default-background /// -$sd-sage-color-combos-danger-default-background: #fff0f0; +$sd-sage-color-combos-danger-default-background: #fee2e1; /// /// color combos color-combos-danger-default-background-accent /// -$sd-sage-color-combos-danger-default-background-accent: #fdb0aa; +$sd-sage-color-combos-danger-default-background-accent: #fda5a5; /// /// color combos color-combos-danger-default-icon-background-accent /// -$sd-sage-color-combos-danger-default-icon-background-accent: #cf3c32; +$sd-sage-color-combos-danger-default-icon-background-accent: #ef4444; /// /// color combos color-combos-danger-subtle-foreground /// -$sd-sage-color-combos-danger-subtle-foreground: #99221e; +$sd-sage-color-combos-danger-subtle-foreground: #991b1b; /// /// color combos color-combos-danger-subtle-foreground-accent /// -$sd-sage-color-combos-danger-subtle-foreground-accent: #fdb0aa; +$sd-sage-color-combos-danger-subtle-foreground-accent: #fda5a5; /// /// color combos color-combos-danger-subtle-background /// -$sd-sage-color-combos-danger-subtle-background: #fdb0aa; +$sd-sage-color-combos-danger-subtle-background: #fda5a5; /// /// color combos color-combos-danger-bold-foreground /// -$sd-sage-color-combos-danger-bold-foreground: #fff0f0; +$sd-sage-color-combos-danger-bold-foreground: #fee2e1; /// /// color combos color-combos-danger-bold-background /// -$sd-sage-color-combos-danger-bold-background: #fdb0aa; +$sd-sage-color-combos-danger-bold-background: #fda5a5; /// /// color combos color-combos-primary-default-foreground /// @@ -1174,7 +2608,7 @@ $sd-sage-color-combos-primary-default-foreground-accent: #fff; /// /// color combos color-combos-primary-default-background /// -$sd-sage-color-combos-primary-default-background: #8ecafb; +$sd-sage-color-combos-primary-default-background: #92c5fd; /// /// color combos color-combos-primary-subtle-foreground /// @@ -1186,7 +2620,7 @@ $sd-sage-color-combos-primary-subtle-foreground-accent: #fff; /// /// color combos color-combos-primary-subtle-background /// -$sd-sage-color-combos-primary-subtle-background: #8ecafb; +$sd-sage-color-combos-primary-subtle-background: #92c5fd; /// /// color combos color-combos-primary-bold-foreground /// @@ -1194,7 +2628,7 @@ $sd-sage-color-combos-primary-bold-foreground: #fff; /// /// color combos color-combos-primary-bold-background /// -$sd-sage-color-combos-primary-bold-background: #8ecafb; +$sd-sage-color-combos-primary-bold-background: #92c5fd; /// /// Map for color combos @@ -1352,37 +2786,49 @@ $sd-sage-color-combos: ( // Static vars for color core // /// +/// color core color-core-blue +/// +$sd-sage-color-core-blue: #2463eb; +/// +/// color core color-core-green +/// +$sd-sage-color-core-green: #079250; +/// +/// color core color-core-mercury +/// +$sd-sage-color-core-mercury: #ff3e15; +/// /// color core color-core-primary /// -$sd-sage-color-core-primary: #0072ef; +$sd-sage-color-core-primary: #2463eb; /// /// color core color-core-sage /// -$sd-sage-color-core-sage: #23856d; +$sd-sage-color-core-sage: #079250; /// /// color core color-core-yellow /// -$sd-sage-color-core-yellow: #ffc505; +$sd-sage-color-core-yellow: #fdbb21; /// /// color core color-core-red /// -$sd-sage-color-core-red: #cf3c32; +$sd-sage-color-core-red: #ef4444; /// /// color core color-core-orange /// -$sd-sage-color-core-orange: #fb7e09; +$sd-sage-color-core-orange: #ff3e15; /// /// color core color-core-purple /// -$sd-sage-color-core-purple: #8e5ad8; +$sd-sage-color-core-purple: #533be5; /// /// color core color-core-charcoal /// -$sd-sage-color-core-charcoal: #43474b; +$sd-sage-color-core-charcoal: #4d4d4c; /// /// color core color-core-grey /// -$sd-sage-color-core-grey: #8d939a; +$sd-sage-color-core-grey: #828180; /// /// color core color-core-white /// @@ -1396,6 +2842,9 @@ $sd-sage-color-core-black: #000; /// Map for 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, diff --git a/packages/sage-assets/lib/stylesheets/global/_reboot.scss b/packages/sage-assets/lib/stylesheets/global/_reboot.scss index 337467f95d..d2ee03f90f 100644 --- a/packages/sage-assets/lib/stylesheets/global/_reboot.scss +++ b/packages/sage-assets/lib/stylesheets/global/_reboot.scss @@ -33,9 +33,9 @@ section { body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */ font-size: 1rem; font-weight: 400; line-height: 1.5; /* NOTE: line-height must be '1.5' to avoid conflicts with Ladera */ @@ -57,10 +57,17 @@ h2, h3, h4, h5, -h6 { +h6, +.t-sage-heading-1, +.t-sage-heading-2, +.t-sage-heading-3, +.t-sage-heading-4, +.t-sage-heading-5, +.t-sage-heading-6 { margin-top: 0; margin-bottom: 0; color: sage-color(charcoal, 500); + font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif ; } p { @@ -172,7 +179,7 @@ pre, code, kbd, samp { - font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; + font-family: "ui-monospace", "Menlo", "Consolas", "Liberation Mono", monospace; font-size: 1em; } diff --git a/packages/sage-assets/lib/stylesheets/layout/_frame.scss b/packages/sage-assets/lib/stylesheets/layout/_frame.scss index 7592747095..cb97fe45c4 100644 --- a/packages/sage-assets/lib/stylesheets/layout/_frame.scss +++ b/packages/sage-assets/lib/stylesheets/layout/_frame.scss @@ -109,6 +109,22 @@ $-sage-frame-borders: ( default: sage-border(), ); +// Border radii options +// Generally aligned to border tokens plus a `none` option +$-sage-frame-box-shadows: ( + none: 0, + sm: sage-shadow(sm), + md: sage-shadow(md), + lg: sage-shadow(lg), + modal: sage-shadow(modal), + 050: sage-shadow(050), + 100: sage-shadow(100), + 200: sage-shadow(200), + 300: sage-shadow(300), + 400: sage-shadow(400), + 500: sage-shadow(500), +); + // Directions that map to `flex-direction` // named to resemble the auto layout settings in Figma $-sage-frame-directions: ( @@ -216,6 +232,7 @@ $-sage-frame-wrap: none; @each $-key, $-val in $-sage-frame-borders { .sage-frame--border-#{$-key} { + background-color: sage-color(white); border: #{$-val}; } } @@ -226,6 +243,12 @@ $-sage-frame-wrap: none; } } +@each $-key, $-val in $-sage-frame-box-shadows { + .sage-frame--box-shadow-#{$-key} { + box-shadow: #{$-val}; + } +} + @each $-key, $-val in $-sage-frame-directions { .sage-frame--direction-#{$-key} { flex-direction: #{$-val}; @@ -242,7 +265,7 @@ $-sage-frame-wrap: none; .sage-frame--gap-#{$-key} { gap: #{$-val}; } - + .sage-frame--padding-#{$-key} { padding: #{$_val}; } diff --git a/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss b/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss index 92341c0c00..1f80f1211a 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_font_size.scss @@ -12,13 +12,14 @@ /// $sage-font-sizes: ( xs: rem(12px), - sm: rem(14px), - md: rem(16px), - lg: rem(18px), - xl: rem(24px), - 2xl: rem(28px), - 3xl: rem(32px), - 4xl: rem(40px) + sm: rem(12px), + md: rem(14px), + lg: rem(16px), + xl: rem(18px), + 2xl: rem(20px), + 3xl: rem(22px), + 4xl: rem(26px), + 5xl: rem(28px) ); /// diff --git a/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss b/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss index 6e9e108ab9..cf1a7ff951 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_font_weight.scss @@ -24,5 +24,6 @@ $sage-font-weights: ( /// @function sage-font-weight($key: regular) { $value: map-get($sage-font-weights, $key); + @return $value; } diff --git a/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss b/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss index fcf41051ff..a40549f686 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_letter_spacing.scss @@ -9,9 +9,15 @@ /// Sage letter spacing/kerning token /// $sage-letter-spacings: ( - xs: rem(-0.15px), - sm: rem(-0.5px), - md: rem(-0.6px), + 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), ); /// diff --git a/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss b/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss index 2982bc9682..287b7f6683 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_line_height.scss @@ -10,14 +10,15 @@ /// See core/_typography.scss for where these are primarily implemented. /// $sage-line-heights: ( - xs: sage-baseline(4), // 16 - sm: sage-baseline(5), // 20 - md: sage-baseline(6), // 24 - lg: sage-baseline(7), // 28 - xl: sage-baseline(8), // 32 - 2xl: sage-baseline(10), // 40 - 3xl: sage-baseline(12), // 48 - 4xl: sage-baseline(15), // 60 + 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), ); /// diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss index 700bf9b01b..0540f7fa4b 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss @@ -9,10 +9,17 @@ /// Sage shadows token /// $sage-shadows: ( - sm: (0 2px 4px rgba(sage-color(black), 0.12), 0 0 2px rgba(sage-color(black), 0.08)), - md: (0 8px 14px rgba(sage-color(black), 0.16), 0 0 4px rgba(sage-color(black), 0.08)), - lg: (0 8px 40px rgba(sage-color(black), 0.24)), - modal: (0 8px 40px rgba(sage-color(black), 0.24), 0 0 4px rgba(sage-color(black), 0.1)), + sm: (0 1px 2px rgba(sage-color(grey, 95), 0.06), 0 1px 3px rgba(sage-color(grey, 95), 0.1)), + md: (0 4px 6px -2px rgba(sage-color(grey, 95), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 95), 0.08)), + lg: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)), + modal: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.24)), + 050: (0 1px 2px 0 rgba(sage-color(grey, 95), 0.05)), + 100: (0 1px 3px 0 rgba(sage-color(grey, 95), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 95), 0.06)), + 150: (0 4px 8px -2px rgba(sage-color(grey, 95), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 95), 0.06)), + 200: (0 12px 16px -4px rgba(sage-color(grey, 95), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 95), 0.03)), + 300: (0 20px 24px -4px rgba(sage-color(grey, 95), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 95), 0.03)), + 400: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)), + 500: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.14)), ); /// diff --git a/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss b/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss index 5e7e9743ff..2d643b3d25 100644 --- a/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss +++ b/packages/sage-assets/lib/stylesheets/tokens/_type_specs.scss @@ -7,21 +7,63 @@ // Base specs to avoid repetition $-t-base-spec: ( - kerning: sage-letter-spacing(xs), + kerning: sage-letter-spacing(sm), responsive: true, type-pairing: body, weight: sage-font-weight(), ); -$-t-body-small-spec: ( +$-t-body-xsmall-spec: ( kerning: sage-letter-spacing(xs), responsive: true, + type-pairing: body-xs, + weight: sage-font-weight(), +); +$-t-body-small-spec: ( + kerning: sage-letter-spacing(sm), + responsive: true, type-pairing: body-sm, weight: sage-font-weight(), ); -$-t-body-xsmall-spec: ( - kerning: sage-letter-spacing(xs), +$-t-body-medium-spec: ( + kerning: sage-letter-spacing(md), responsive: true, - type-pairing: body-xs, + type-pairing: body-md, + weight: sage-font-weight(), +); +$-t-body-large-spec: ( + kerning: sage-letter-spacing(lg), + responsive: true, + type-pairing: body-lg, + weight: sage-font-weight(), +); +$-t-body-xlarge-spec: ( + kerning: sage-letter-spacing(xl), + responsive: true, + type-pairing: body-xl, + weight: sage-font-weight(), +); +$-t-body-2xlarge-spec: ( + kerning: sage-letter-spacing(2xl), + responsive: true, + type-pairing: body-2xl, + weight: sage-font-weight(), +); +$-t-body-3xlarge-spec: ( + kerning: sage-letter-spacing(3xl), + responsive: true, + type-pairing: body-3xl, + weight: sage-font-weight(), +); +$-t-body-4xlarge-spec: ( + kerning: sage-letter-spacing(4xl), + responsive: true, + type-pairing: body-4xl, + weight: sage-font-weight(), +); +$-t-body-5xlarge-spec: ( + kerning: sage-letter-spacing(5xl), + responsive: true, + type-pairing: body-5xl, weight: sage-font-weight(), ); @@ -38,38 +80,40 @@ $-t-body-xsmall-spec: ( $sage-type-specs: ( // Headings "heading-1": ( - kerning: sage-letter-spacing(md), + kerning: sage-letter-spacing(5xl), responsive: true, type-pairing: h1, - weight: sage-font-weight(bold), + weight: sage-font-weight(semibold), ), "heading-2": ( - kerning: sage-letter-spacing(md), + kerning: sage-letter-spacing(4xl), responsive: true, type-pairing: h2, - weight: sage-font-weight(bold), + weight: sage-font-weight(semibold), ), "heading-3": ( - kerning: sage-letter-spacing(xs), + kerning: sage-letter-spacing(3xl), responsive: true, type-pairing: h3, - weight: sage-font-weight(bold), + weight: sage-font-weight(semibold), ), "heading-4": ( - kerning: sage-letter-spacing(xs), + 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(semibold), + weight: sage-font-weight(medium), ), "heading-6": ( + kerning: sage-letter-spacing(lg), responsive: true, type-pairing: h6, - weight: sage-font-weight(semibold), + weight: sage-font-weight(medium), ), "nav": ( responsive: false, diff --git a/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss b/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss index 56baf6f4c8..48631dc9ca 100644 --- a/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss +++ b/packages/sage-assets/lib/stylesheets/utilities/_spacer.scss @@ -4,22 +4,30 @@ /// @group sage //// +$css-property-map: ( + top: block-start, + right: inline-end, + bottom: block-end, + left: inline-start +); @each $-name, $-value in $sage-spacings { $suffix: "-#{$-name}"; - + @if $-name == md { $suffix: ""; } - + @each $-box-side in ( top, right, bottom, left ) { + $css-logical-property: map-get($css-property-map, $-box-side); + .sage-spacer-#{$-box-side}#{$suffix} { - margin-#{$-box-side}: $-value; + margin-#{$css-logical-property}: $-value; } } } diff --git a/packages/sage-react/lib/Card/Card.story.jsx b/packages/sage-react/lib/Card/Card.story.jsx index 8361f78b1c..7d8a1c8200 100644 --- a/packages/sage-react/lib/Card/Card.story.jsx +++ b/packages/sage-react/lib/Card/Card.story.jsx @@ -8,6 +8,8 @@ import { Link } from '../Link'; import { Card } from './Card'; import { Frame } from '../Frame'; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; + export default { title: 'Sage/Card', component: Card, @@ -122,7 +124,7 @@ Default.args = { Figure (with side bleed) - + Divider diff --git a/packages/sage-react/lib/Choice/Choice.story.jsx b/packages/sage-react/lib/Choice/Choice.story.jsx index 1c7032b176..1279725dfd 100644 --- a/packages/sage-react/lib/Choice/Choice.story.jsx +++ b/packages/sage-react/lib/Choice/Choice.story.jsx @@ -3,6 +3,7 @@ import { selectArgs } from '../story-support/helpers'; import { SageTokens } from '../configs'; import { Avatar } from '../Avatar'; import { Choice } from './Choice'; +import placeholderImg from '../../public/CardPlaceholderSmall.png'; // Default Sandbox export default { @@ -113,7 +114,7 @@ export const WiredIcon = () => { export const Graphic = () => (
( export const LinkText = () => (
)} - {icon && ()} + {icon && ( +
+ +
+ )}
{title && ( @@ -59,7 +73,10 @@ export const EmptyState = ({ )} {actions && (
- + {actions}
@@ -75,7 +92,8 @@ export const EmptyState = ({ ); }; -EmptyState.SCOPES = EMPTY_STATE_SCOPES; +EmptyState.SIZES = EMPTY_STATE_SIZES; +EmptyState.SCOPES = EMPTY_STATE_SIZES; EmptyState.defaultProps = { actions: null, @@ -83,7 +101,9 @@ EmptyState.defaultProps = { children: null, graphic: null, icon: null, - scope: EmptyState.SCOPES.DEFAULT, + backgroundColor: null, + scope: EmptyState.SIZES.DEFAULT, + size: EmptyState.SIZES.DEFAULT, text: null, title: null, titleTag: 'h2', @@ -91,14 +111,52 @@ EmptyState.defaultProps = { }; EmptyState.propTypes = { + /** + * Slot into which buttons or other actions can be placed. + */ actions: PropTypes.node, + /** + * If true, the Empty State will be visually centered inside the entire page context. + */ centerVertical: PropTypes.bool, + /** + * The content to be rendered within the Empty State. + */ children: PropTypes.node, + /** + * Adds a graphic above the content. + */ graphic: PropTypes.node, + /** + * Adds an icon above the content. + */ icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)), - scope: PropTypes.oneOf(Object.values(EmptyState.SCOPES)), + /** + * Sets the background color of the icon container. Defaults to Mercury 30 + */ + backgroundColor: PropTypes.string, + /** + * Sets the scope for the Empty State. Deprecated. + */ + scope: PropTypes.oneOf(Object.values(EmptyState.SIZES)), + /** + * The size and context of the Empty State. + */ + size: PropTypes.oneOf(Object.values(EmptyState.SIZES)), + /** + * Sets the text for the Empty State. + */ text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + /** + * Sets the title for the Empty State. + */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + /** + * Sets which HTML heading tag to use on the title. + */ titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']), + /** + * Slot into which video cards or other media can be placed. + */ video: PropTypes.node, }; diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx deleted file mode 100644 index 23c7bd7b41..0000000000 --- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import { selectArgs } from '../story-support/helpers'; -import { Button } from '../Button'; -import { SageTokens } from '../configs'; -import { EmptyState } from './EmptyState'; - -export default { - title: 'Sage/EmptyState', - component: EmptyState, - // displays description on Docs tab - parameters: { - docs: { - description: { - component: 'The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show.' - }, - }, - }, - argTypes: { - ...selectArgs({ - icon: SageTokens.ICONS, - scope: EmptyState.SCOPES - }) - }, - args: { - actions: ( - <> - - - - - ), - icon: SageTokens.ICONS.GEAR, - text: 'Text Here', - title: 'Title Here' - } -}; - -const Template = (args) => ; - -export const Default = Template.bind({}); - -export const PageScope = Template.bind({}); -PageScope.args = { - icon: null, - graphic: (), - scope: EmptyState.SCOPES.PAGE, - text: ( -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Elit arcu volutpat cursus ultricies ac, ultricies. - Platea sed nibh molestie ut. -

- ), - title: 'Create your first Email Campaign', - titleTag: 'h1', - children: null, - actions: ( - <> - - - - ) -}; diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx new file mode 100644 index 0000000000..d634cc0379 --- /dev/null +++ b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx @@ -0,0 +1,94 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Button } from '../Button'; +import { SageTokens } from '../configs'; +import { EmptyState } from './EmptyState'; + +import placeholderImg from '../../public/CardPlaceholderLarge.png'; + + + +# Empty State + +The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show. + +## Accessibility + +Ensure images or graphics that are used in the Empty State component *do not* include `alt` text so that the image remains decorative and invisible to screen readers. + +## Properties + + + +## Size + +The Empty State component has two sizes: default and `compact`. The default size is meant to be used for whole-page empty states and is intended to fill the stage. The compact size features a smaller icon and is intended to fill empty states for smaller contexts. + +### Default + + + + + + + + )} + icon={SageTokens.ICONS.PEN} + title="Create your first Email Campaign" + titleTag="h1" + text={(

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Elit arcu volutpat cursus ultricies ac, ultricies. + Platea sed nibh molestie ut. +

)} + /> + + + +### Compact + + + + + + + + )} + icon={SageTokens.ICONS.PEN} + size={EmptyState.SIZES.COMPACT} + title="Create your first Email Campaign" + titleTag="h1" + text={(

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Elit arcu volutpat cursus ultricies ac, ultricies. + Platea sed nibh molestie ut. +

)} + /> + + + +### With Graphic + + + + + + + + )} + graphic={()} + title="Create your first Email Campaign" + titleTag="h1" + text={(

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Elit arcu volutpat cursus ultricies ac, ultricies. + Platea sed nibh molestie ut. +

)} + /> + + diff --git a/packages/sage-react/lib/EmptyState/configs.js b/packages/sage-react/lib/EmptyState/configs.js index 6550148d23..75df4b370d 100644 --- a/packages/sage-react/lib/EmptyState/configs.js +++ b/packages/sage-react/lib/EmptyState/configs.js @@ -1,5 +1,4 @@ -export const EMPTY_STATE_SCOPES = { +export const EMPTY_STATE_SIZES = { DEFAULT: null, - PAGE: 'page', COMPACT: 'compact', }; diff --git a/packages/sage-react/lib/Frame/Frame.jsx b/packages/sage-react/lib/Frame/Frame.jsx index dd0e9c8b48..cf9a153ab9 100644 --- a/packages/sage-react/lib/Frame/Frame.jsx +++ b/packages/sage-react/lib/Frame/Frame.jsx @@ -6,6 +6,7 @@ import { FRAME_ALIGNMENTS, FRAME_BORDERS, FRAME_BORDER_RADII, + FRAME_BOX_SHADOWS, FRAME_DIRECTIONS, FRAME_SPACINGS, FRAME_WIDTHS, @@ -19,6 +20,7 @@ export const Frame = ({ background, border, borderRadius, + boxShadow, direction, gap, maxWidth, @@ -49,6 +51,7 @@ export const Frame = ({ [`sage-frame--background-${background}`]: background && !hasCustomBackground, [`sage-frame--border-${border}`]: border, [`sage-frame--border-radius-${borderRadius}`]: borderRadius, + [`sage-frame--box-shadow-${boxShadow}`]: boxShadow, [`sage-frame--direction-${direction}`]: direction, [`sage-frame--gap-${gap}`]: gap, [`sage-frame--padding-${padding}`]: padding, @@ -98,6 +101,7 @@ export const Frame = ({ Frame.ALIGNMENTS = FRAME_ALIGNMENTS; Frame.BORDERS = FRAME_BORDERS; +Frame.BOX_SHADOWS = FRAME_BOX_SHADOWS; Frame.BORDER_RADII = FRAME_BORDER_RADII; Frame.DIRECTIONS = FRAME_DIRECTIONS; Frame.GAPS = FRAME_SPACINGS; @@ -110,6 +114,7 @@ Frame.defaultProps = { background: null, border: null, borderRadius: null, + boxShadow: null, children: null, className: '', direction: FRAME_DIRECTIONS.VERTICAL, @@ -133,6 +138,7 @@ Frame.propTypes = { ]), border: PropTypes.oneOf(Object.values(Frame.BORDERS)), borderRadius: PropTypes.oneOf(Object.values(Frame.BORDER_RADII)), + boxShadow: PropTypes.oneOf(Object.values(Frame.BOX_SHADOWS)), direction: PropTypes.oneOf(Object.values(Frame.DIRECTIONS)), gap: PropTypes.oneOf(Object.values(Frame.GAPS)), maxWidth: PropTypes.oneOfType([ diff --git a/packages/sage-react/lib/Frame/Frame.story.jsx b/packages/sage-react/lib/Frame/Frame.story.jsx index c9d1458d37..00fd694eda 100644 --- a/packages/sage-react/lib/Frame/Frame.story.jsx +++ b/packages/sage-react/lib/Frame/Frame.story.jsx @@ -4,6 +4,8 @@ import { SageClassnames, SageTokens } from '../configs'; import { Button, Label, Property } from '..'; import { Frame } from './Frame'; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; + export default { title: 'Sage/Frame', component: Frame, @@ -82,6 +84,18 @@ export const BorderedBox = () => ( ); +export const BoxShadow = () => ( + + Galinti Marcus + galinti@example.com + Member since 2022 + +); + export const NestingFrames = () => ( ( align={Frame.ALIGNMENTS.CENTER_LEFT} > - + @@ -195,7 +209,7 @@ export const CustomBlock = () => ( - + ); diff --git a/packages/sage-react/lib/Frame/configs.js b/packages/sage-react/lib/Frame/configs.js index 03bd68fae5..6ff087d163 100644 --- a/packages/sage-react/lib/Frame/configs.js +++ b/packages/sage-react/lib/Frame/configs.js @@ -30,6 +30,21 @@ export const FRAME_BORDERS = { DEFAULT: 'default', }; +// Keep in sync with `packages/sage-assets/lib/stylesheets/components/_frame.scss` +export const FRAME_BOX_SHADOWS = { + NONE: 'none', + SM: 'sm', + MD: 'md', + LG: 'lg', + MODAL: 'modal', + '050': '050', + 100: '100', + 200: '200', + 300: '300', + 400: '400', + 500: '500', +}; + // Keep in sync with `packages/sage-assets/lib/stylesheets/components/_frame.scss` export const FRAME_BORDER_RADII = { NONE: 'none', diff --git a/packages/sage-react/lib/List/List.story.jsx b/packages/sage-react/lib/List/List.story.jsx index 47cdc4ace6..8b34d5a877 100644 --- a/packages/sage-react/lib/List/List.story.jsx +++ b/packages/sage-react/lib/List/List.story.jsx @@ -9,6 +9,7 @@ import { OptionsDropdown } from '../Dropdown'; import { Property } from '../Property'; import { List } from './List'; import { ListItem } from './ListItem'; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; import { sampleItems, sampleItemRenderer, @@ -81,7 +82,7 @@ export const otherActionItems = () => ( > - + + + + + + + + + + + + + + + )} {(type === LOADER_TYPES.SPINNER) && ( )} {(type === LOADER_TYPES.SUCCESS) && ( diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx index b2813d8450..bfd1803c21 100644 --- a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx +++ b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx @@ -4,6 +4,7 @@ import { selectArgs } from '../story-support/helpers'; import { Button } from '../Button'; import { Badge } from '../Badge'; import { MediaTile } from './MediaTile'; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; export default { title: 'Sage/Media Tile', @@ -53,7 +54,7 @@ export default { ), footer: null, media: ( - + ), tileLink: { href: '//example.com', diff --git a/packages/sage-react/lib/MediaTile/MediaTiles.story.jsx b/packages/sage-react/lib/MediaTile/MediaTiles.story.jsx index 0a29bb0f6c..5cd2df51aa 100644 --- a/packages/sage-react/lib/MediaTile/MediaTiles.story.jsx +++ b/packages/sage-react/lib/MediaTile/MediaTiles.story.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { selectArgs } from '../story-support/helpers'; import { MediaTiles } from './MediaTiles'; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; const actionsDropdownItems = [ { @@ -55,7 +56,7 @@ export default { children: commonChildren, footer: null, media: ( - + ), tileLink: commonTileLink, }, @@ -66,7 +67,7 @@ export default { children: commonChildren, footer: null, media: ( - + ), tileLink: commonTileLink, }, @@ -77,7 +78,7 @@ export default { children: commonChildren, footer: null, media: ( - + ), tileLink: commonTileLink, }, @@ -88,7 +89,7 @@ export default { children: commonChildren, footer: null, media: ( - + ), tileLink: commonTileLink, }, diff --git a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx index 7cf98be596..48619f744e 100644 --- a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx +++ b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { selectArgs } from '../story-support/helpers'; import { NextBestAction } from './NextBestAction'; import { Button } from '../Button'; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; export default { title: 'Sage/Next Best Action', @@ -34,7 +35,7 @@ export default { ), dismissable: true, graphic: { - element: () + element: () }, // eslint-disable-next-line no-console onClickDismiss: () => { console.log('Add your own dismiss functionality here!'); }, diff --git a/packages/sage-react/lib/Panel/Panel.story.mdx b/packages/sage-react/lib/Panel/Panel.story.mdx index 585cca4b74..1b833bdec1 100644 --- a/packages/sage-react/lib/Panel/Panel.story.mdx +++ b/packages/sage-react/lib/Panel/Panel.story.mdx @@ -5,6 +5,7 @@ import { Icon } from "../Icon"; import { OptionsDropdown } from "../Dropdown"; import { Panel } from "./Panel"; import { SageClassnames, SageTokens } from "../configs"; +import placeholderImg from '../../public/CardPlaceholderLarge.png'; - + `} @@ -380,7 +381,7 @@ A panel figure contains an image that occupies a substantive space in the panel. - + diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx index 85ed0b80a4..02b649e114 100644 --- a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx +++ b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx @@ -81,7 +81,7 @@ ProgressBar.defaultProps = { animate: true, backgroundColor: null, className: null, - color: ProgressBar.COLORS.PRIMARY_300, + color: ProgressBar.COLORS.MERCURY_50, disableTooltip: false, displayPercent: false, label: null, diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx index 83885f6b6f..b21ee82740 100644 --- a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx +++ b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx @@ -14,7 +14,6 @@ export default { }, }, args: { - color: ProgressBar.COLORS.PRIMARY_300, label: 'Cloning product', percent: '44', }, @@ -30,7 +29,7 @@ const Template = (args) => ; export const Default = Template.bind({}); export const CustomColor = Template.bind({}); CustomColor.args = { - color: ProgressBar.COLORS.ORANGE_300, + color: ProgressBar.COLORS.PURPLE_50, backgroundColor: ProgressBar.COLORS.ORANGE_100, label: 'Cloning product', percent: '44', diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index e99148786c..fc6635ea4f 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -19,124 +19,376 @@ // // Static vars for COLOR BASE // -export const COLOR_BASE_PRIMARY_100_HEX = '#e6f4fe'; +export const COLOR_BASE_BLUE_5_HEX = '#fafcff'; +export const COLOR_BASE_BLUE_5_CODE = 'blue-5'; +export const COLOR_BASE_BLUE_5_CLASSNAME = 't-sage--color-blue-5'; +export const COLOR_BASE_BLUE_10_HEX = '#eff6ff'; +export const COLOR_BASE_BLUE_10_CODE = 'blue-10'; +export const COLOR_BASE_BLUE_10_CLASSNAME = 't-sage--color-blue-10'; +export const COLOR_BASE_BLUE_15_HEX = '#dbe9fe'; +export const COLOR_BASE_BLUE_15_CODE = 'blue-15'; +export const COLOR_BASE_BLUE_15_CLASSNAME = 't-sage--color-blue-15'; +export const COLOR_BASE_BLUE_20_HEX = '#bfdbfe'; +export const COLOR_BASE_BLUE_20_CODE = 'blue-20'; +export const COLOR_BASE_BLUE_20_CLASSNAME = 't-sage--color-blue-20'; +export const COLOR_BASE_BLUE_30_HEX = '#92c5fd'; +export const COLOR_BASE_BLUE_30_CODE = 'blue-30'; +export const COLOR_BASE_BLUE_30_CLASSNAME = 't-sage--color-blue-30'; +export const COLOR_BASE_BLUE_40_HEX = '#60a5fa'; +export const COLOR_BASE_BLUE_40_CODE = 'blue-40'; +export const COLOR_BASE_BLUE_40_CLASSNAME = 't-sage--color-blue-40'; +export const COLOR_BASE_BLUE_50_HEX = '#3c82f6'; +export const COLOR_BASE_BLUE_50_CODE = 'blue-50'; +export const COLOR_BASE_BLUE_50_CLASSNAME = 't-sage--color-blue-50'; +export const COLOR_BASE_BLUE_60_HEX = '#2463eb'; +export const COLOR_BASE_BLUE_60_CODE = 'blue-60'; +export const COLOR_BASE_BLUE_60_CLASSNAME = 't-sage--color-blue-60'; +export const COLOR_BASE_BLUE_70_HEX = '#1c4ed8'; +export const COLOR_BASE_BLUE_70_CODE = 'blue-70'; +export const COLOR_BASE_BLUE_70_CLASSNAME = 't-sage--color-blue-70'; +export const COLOR_BASE_BLUE_80_HEX = '#1d40ae'; +export const COLOR_BASE_BLUE_80_CODE = 'blue-80'; +export const COLOR_BASE_BLUE_80_CLASSNAME = 't-sage--color-blue-80'; +export const COLOR_BASE_BLUE_90_HEX = '#1f3a8a'; +export const COLOR_BASE_BLUE_90_CODE = 'blue-90'; +export const COLOR_BASE_BLUE_90_CLASSNAME = 't-sage--color-blue-90'; +export const COLOR_BASE_BLUE_95_HEX = '#172554'; +export const COLOR_BASE_BLUE_95_CODE = 'blue-95'; +export const COLOR_BASE_BLUE_95_CLASSNAME = 't-sage--color-blue-95'; +export const COLOR_BASE_GREEN_5_HEX = '#fbfefc'; +export const COLOR_BASE_GREEN_5_CODE = 'green-5'; +export const COLOR_BASE_GREEN_5_CLASSNAME = 't-sage--color-green-5'; +export const COLOR_BASE_GREEN_10_HEX = '#edfcf2'; +export const COLOR_BASE_GREEN_10_CODE = 'green-10'; +export const COLOR_BASE_GREEN_10_CLASSNAME = 't-sage--color-green-10'; +export const COLOR_BASE_GREEN_15_HEX = '#d3f8df'; +export const COLOR_BASE_GREEN_15_CODE = 'green-15'; +export const COLOR_BASE_GREEN_15_CLASSNAME = 't-sage--color-green-15'; +export const COLOR_BASE_GREEN_20_HEX = '#aaf0c4'; +export const COLOR_BASE_GREEN_20_CODE = 'green-20'; +export const COLOR_BASE_GREEN_20_CLASSNAME = 't-sage--color-green-20'; +export const COLOR_BASE_GREEN_30_HEX = '#73e2a3'; +export const COLOR_BASE_GREEN_30_CODE = 'green-30'; +export const COLOR_BASE_GREEN_30_CLASSNAME = 't-sage--color-green-30'; +export const COLOR_BASE_GREEN_40_HEX = '#3dcb7f'; +export const COLOR_BASE_GREEN_40_CODE = 'green-40'; +export const COLOR_BASE_GREEN_40_CLASSNAME = 't-sage--color-green-40'; +export const COLOR_BASE_GREEN_50_HEX = '#17b365'; +export const COLOR_BASE_GREEN_50_CODE = 'green-50'; +export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50'; +export const COLOR_BASE_GREEN_60_HEX = '#079250'; +export const COLOR_BASE_GREEN_60_CODE = 'green-60'; +export const COLOR_BASE_GREEN_60_CLASSNAME = 't-sage--color-green-60'; +export const COLOR_BASE_GREEN_70_HEX = '#097443'; +export const COLOR_BASE_GREEN_70_CODE = 'green-70'; +export const COLOR_BASE_GREEN_70_CLASSNAME = 't-sage--color-green-70'; +export const COLOR_BASE_GREEN_80_HEX = '#085c37'; +export const COLOR_BASE_GREEN_80_CODE = 'green-80'; +export const COLOR_BASE_GREEN_80_CLASSNAME = 't-sage--color-green-80'; +export const COLOR_BASE_GREEN_90_HEX = '#094c2f'; +export const COLOR_BASE_GREEN_90_CODE = 'green-90'; +export const COLOR_BASE_GREEN_90_CLASSNAME = 't-sage--color-green-90'; +export const COLOR_BASE_GREEN_95_HEX = '#052e1c'; +export const COLOR_BASE_GREEN_95_CODE = 'green-95'; +export const COLOR_BASE_GREEN_95_CLASSNAME = 't-sage--color-green-95'; +export const COLOR_BASE_MERCURY_5_HEX = '#fffcfa'; +export const COLOR_BASE_MERCURY_5_CODE = 'mercury-5'; +export const COLOR_BASE_MERCURY_5_CLASSNAME = 't-sage--color-mercury-5'; +export const COLOR_BASE_MERCURY_10_HEX = '#fff3ed'; +export const COLOR_BASE_MERCURY_10_CODE = 'mercury-10'; +export const COLOR_BASE_MERCURY_10_CLASSNAME = 't-sage--color-mercury-10'; +export const COLOR_BASE_MERCURY_15_HEX = '#ffe3d4'; +export const COLOR_BASE_MERCURY_15_CODE = 'mercury-15'; +export const COLOR_BASE_MERCURY_15_CLASSNAME = 't-sage--color-mercury-15'; +export const COLOR_BASE_MERCURY_20_HEX = '#ffc3a8'; +export const COLOR_BASE_MERCURY_20_CODE = 'mercury-20'; +export const COLOR_BASE_MERCURY_20_CLASSNAME = 't-sage--color-mercury-20'; +export const COLOR_BASE_MERCURY_30_HEX = '#ff9970'; +export const COLOR_BASE_MERCURY_30_CODE = 'mercury-30'; +export const COLOR_BASE_MERCURY_30_CLASSNAME = 't-sage--color-mercury-30'; +export const COLOR_BASE_MERCURY_40_HEX = '#ff6337'; +export const COLOR_BASE_MERCURY_40_CODE = 'mercury-40'; +export const COLOR_BASE_MERCURY_40_CLASSNAME = 't-sage--color-mercury-40'; +export const COLOR_BASE_MERCURY_50_HEX = '#ff3e15'; +export const COLOR_BASE_MERCURY_50_CODE = 'mercury-50'; +export const COLOR_BASE_MERCURY_50_CLASSNAME = 't-sage--color-mercury-50'; +export const COLOR_BASE_MERCURY_60_HEX = '#f11f06'; +export const COLOR_BASE_MERCURY_60_CODE = 'mercury-60'; +export const COLOR_BASE_MERCURY_60_CLASSNAME = 't-sage--color-mercury-60'; +export const COLOR_BASE_MERCURY_70_HEX = '#c81307'; +export const COLOR_BASE_MERCURY_70_CODE = 'mercury-70'; +export const COLOR_BASE_MERCURY_70_CLASSNAME = 't-sage--color-mercury-70'; +export const COLOR_BASE_MERCURY_80_HEX = '#9e110e'; +export const COLOR_BASE_MERCURY_80_CODE = 'mercury-80'; +export const COLOR_BASE_MERCURY_80_CLASSNAME = 't-sage--color-mercury-80'; +export const COLOR_BASE_MERCURY_90_HEX = '#7f120f'; +export const COLOR_BASE_MERCURY_90_CODE = 'mercury-90'; +export const COLOR_BASE_MERCURY_90_CLASSNAME = 't-sage--color-mercury-90'; +export const COLOR_BASE_MERCURY_95_HEX = '#450506'; +export const COLOR_BASE_MERCURY_95_CODE = 'mercury-95'; +export const COLOR_BASE_MERCURY_95_CLASSNAME = 't-sage--color-mercury-95'; +export const COLOR_BASE_PRIMARY_100_HEX = '#dbe9fe'; export const COLOR_BASE_PRIMARY_100_CODE = 'primary-100'; export const COLOR_BASE_PRIMARY_100_CLASSNAME = 't-sage--color-primary-100'; -export const COLOR_BASE_PRIMARY_200_HEX = '#8ecafb'; +export const COLOR_BASE_PRIMARY_200_HEX = '#92c5fd'; export const COLOR_BASE_PRIMARY_200_CODE = 'primary-200'; export const COLOR_BASE_PRIMARY_200_CLASSNAME = 't-sage--color-primary-200'; -export const COLOR_BASE_PRIMARY_300_HEX = '#0072ef'; +export const COLOR_BASE_PRIMARY_300_HEX = '#2463eb'; export const COLOR_BASE_PRIMARY_300_CODE = 'primary-300'; export const COLOR_BASE_PRIMARY_300_CLASSNAME = 't-sage--color-primary-300'; -export const COLOR_BASE_PRIMARY_400_HEX = '#054fb8'; +export const COLOR_BASE_PRIMARY_400_HEX = '#1c4ed8'; export const COLOR_BASE_PRIMARY_400_CODE = 'primary-400'; export const COLOR_BASE_PRIMARY_400_CLASSNAME = 't-sage--color-primary-400'; -export const COLOR_BASE_PRIMARY_500_HEX = '#07265f'; +export const COLOR_BASE_PRIMARY_500_HEX = '#172554'; export const COLOR_BASE_PRIMARY_500_CODE = 'primary-500'; export const COLOR_BASE_PRIMARY_500_CLASSNAME = 't-sage--color-primary-500'; -export const COLOR_BASE_SAGE_100_HEX = '#ddf8f0'; +export const COLOR_BASE_SAGE_100_HEX = '#d3f8df'; export const COLOR_BASE_SAGE_100_CODE = 'sage-100'; export const COLOR_BASE_SAGE_100_CLASSNAME = 't-sage--color-sage-100'; -export const COLOR_BASE_SAGE_200_HEX = '#86d5bc'; +export const COLOR_BASE_SAGE_200_HEX = '#73e2a3'; export const COLOR_BASE_SAGE_200_CODE = 'sage-200'; export const COLOR_BASE_SAGE_200_CLASSNAME = 't-sage--color-sage-200'; -export const COLOR_BASE_SAGE_300_HEX = '#23856d'; +export const COLOR_BASE_SAGE_300_HEX = '#079250'; export const COLOR_BASE_SAGE_300_CODE = 'sage-300'; export const COLOR_BASE_SAGE_300_CLASSNAME = 't-sage--color-sage-300'; -export const COLOR_BASE_SAGE_400_HEX = '#225d53'; +export const COLOR_BASE_SAGE_400_HEX = '#085c37'; export const COLOR_BASE_SAGE_400_CODE = 'sage-400'; export const COLOR_BASE_SAGE_400_CLASSNAME = 't-sage--color-sage-400'; -export const COLOR_BASE_SAGE_500_HEX = '#183e3b'; +export const COLOR_BASE_SAGE_500_HEX = '#052e1c'; export const COLOR_BASE_SAGE_500_CODE = 'sage-500'; export const COLOR_BASE_SAGE_500_CLASSNAME = 't-sage--color-sage-500'; -export const COLOR_BASE_YELLOW_100_HEX = '#fef8e1'; +export const COLOR_BASE_YELLOW_5_HEX = '#fffefa'; +export const COLOR_BASE_YELLOW_5_CODE = 'yellow-5'; +export const COLOR_BASE_YELLOW_5_CLASSNAME = 't-sage--color-yellow-5'; +export const COLOR_BASE_YELLOW_10_HEX = '#fffbeb'; +export const COLOR_BASE_YELLOW_10_CODE = 'yellow-10'; +export const COLOR_BASE_YELLOW_10_CLASSNAME = 't-sage--color-yellow-10'; +export const COLOR_BASE_YELLOW_15_HEX = '#fff3c6'; +export const COLOR_BASE_YELLOW_15_CODE = 'yellow-15'; +export const COLOR_BASE_YELLOW_15_CLASSNAME = 't-sage--color-yellow-15'; +export const COLOR_BASE_YELLOW_20_HEX = '#fee589'; +export const COLOR_BASE_YELLOW_20_CODE = 'yellow-20'; +export const COLOR_BASE_YELLOW_20_CLASSNAME = 't-sage--color-yellow-20'; +export const COLOR_BASE_YELLOW_30_HEX = '#fed04b'; +export const COLOR_BASE_YELLOW_30_CODE = 'yellow-30'; +export const COLOR_BASE_YELLOW_30_CLASSNAME = 't-sage--color-yellow-30'; +export const COLOR_BASE_YELLOW_40_HEX = '#fdbb21'; +export const COLOR_BASE_YELLOW_40_CODE = 'yellow-40'; +export const COLOR_BASE_YELLOW_40_CLASSNAME = 't-sage--color-yellow-40'; +export const COLOR_BASE_YELLOW_50_HEX = '#f79a0b'; +export const COLOR_BASE_YELLOW_50_CODE = 'yellow-50'; +export const COLOR_BASE_YELLOW_50_CLASSNAME = 't-sage--color-yellow-50'; +export const COLOR_BASE_YELLOW_60_HEX = '#db7303'; +export const COLOR_BASE_YELLOW_60_CODE = 'yellow-60'; +export const COLOR_BASE_YELLOW_60_CLASSNAME = 't-sage--color-yellow-60'; +export const COLOR_BASE_YELLOW_70_HEX = '#b64f06'; +export const COLOR_BASE_YELLOW_70_CODE = 'yellow-70'; +export const COLOR_BASE_YELLOW_70_CLASSNAME = 't-sage--color-yellow-70'; +export const COLOR_BASE_YELLOW_80_HEX = '#943d0e'; +export const COLOR_BASE_YELLOW_80_CODE = 'yellow-80'; +export const COLOR_BASE_YELLOW_80_CLASSNAME = 't-sage--color-yellow-80'; +export const COLOR_BASE_YELLOW_90_HEX = '#79330e'; +export const COLOR_BASE_YELLOW_90_CODE = 'yellow-90'; +export const COLOR_BASE_YELLOW_90_CLASSNAME = 't-sage--color-yellow-90'; +export const COLOR_BASE_YELLOW_95_HEX = '#451902'; +export const COLOR_BASE_YELLOW_95_CODE = 'yellow-95'; +export const COLOR_BASE_YELLOW_95_CLASSNAME = 't-sage--color-yellow-95'; +export const COLOR_BASE_YELLOW_100_HEX = '#fff3c6'; export const COLOR_BASE_YELLOW_100_CODE = 'yellow-100'; export const COLOR_BASE_YELLOW_100_CLASSNAME = 't-sage--color-yellow-100'; -export const COLOR_BASE_YELLOW_200_HEX = '#fad980'; +export const COLOR_BASE_YELLOW_200_HEX = '#fed04b'; export const COLOR_BASE_YELLOW_200_CODE = 'yellow-200'; export const COLOR_BASE_YELLOW_200_CLASSNAME = 't-sage--color-yellow-200'; -export const COLOR_BASE_YELLOW_300_HEX = '#ffc505'; +export const COLOR_BASE_YELLOW_300_HEX = '#fdbb21'; export const COLOR_BASE_YELLOW_300_CODE = 'yellow-300'; export const COLOR_BASE_YELLOW_300_CLASSNAME = 't-sage--color-yellow-300'; -export const COLOR_BASE_YELLOW_400_HEX = '#c56a02'; +export const COLOR_BASE_YELLOW_400_HEX = '#db7303'; export const COLOR_BASE_YELLOW_400_CODE = 'yellow-400'; export const COLOR_BASE_YELLOW_400_CLASSNAME = 't-sage--color-yellow-400'; -export const COLOR_BASE_YELLOW_500_HEX = '#8c3b08'; +export const COLOR_BASE_YELLOW_500_HEX = '#451902'; export const COLOR_BASE_YELLOW_500_CODE = 'yellow-500'; export const COLOR_BASE_YELLOW_500_CLASSNAME = 't-sage--color-yellow-500'; -export const COLOR_BASE_RED_100_HEX = '#fff0f0'; +export const COLOR_BASE_RED_5_HEX = '#fffafa'; +export const COLOR_BASE_RED_5_CODE = 'red-5'; +export const COLOR_BASE_RED_5_CLASSNAME = 't-sage--color-red-5'; +export const COLOR_BASE_RED_10_HEX = '#fef2f2'; +export const COLOR_BASE_RED_10_CODE = 'red-10'; +export const COLOR_BASE_RED_10_CLASSNAME = 't-sage--color-red-10'; +export const COLOR_BASE_RED_15_HEX = '#fee2e1'; +export const COLOR_BASE_RED_15_CODE = 'red-15'; +export const COLOR_BASE_RED_15_CLASSNAME = 't-sage--color-red-15'; +export const COLOR_BASE_RED_20_HEX = '#fecaca'; +export const COLOR_BASE_RED_20_CODE = 'red-20'; +export const COLOR_BASE_RED_20_CLASSNAME = 't-sage--color-red-20'; +export const COLOR_BASE_RED_30_HEX = '#fda5a5'; +export const COLOR_BASE_RED_30_CODE = 'red-30'; +export const COLOR_BASE_RED_30_CLASSNAME = 't-sage--color-red-30'; +export const COLOR_BASE_RED_40_HEX = '#f87171'; +export const COLOR_BASE_RED_40_CODE = 'red-40'; +export const COLOR_BASE_RED_40_CLASSNAME = 't-sage--color-red-40'; +export const COLOR_BASE_RED_50_HEX = '#ef4444'; +export const COLOR_BASE_RED_50_CODE = 'red-50'; +export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; +export const COLOR_BASE_RED_60_HEX = '#dc2625'; +export const COLOR_BASE_RED_60_CODE = 'red-60'; +export const COLOR_BASE_RED_60_CLASSNAME = 't-sage--color-red-60'; +export const COLOR_BASE_RED_70_HEX = '#b91c1b'; +export const COLOR_BASE_RED_70_CODE = 'red-70'; +export const COLOR_BASE_RED_70_CLASSNAME = 't-sage--color-red-70'; +export const COLOR_BASE_RED_80_HEX = '#991b1b'; +export const COLOR_BASE_RED_80_CODE = 'red-80'; +export const COLOR_BASE_RED_80_CLASSNAME = 't-sage--color-red-80'; +export const COLOR_BASE_RED_90_HEX = '#7f1c1d'; +export const COLOR_BASE_RED_90_CODE = 'red-90'; +export const COLOR_BASE_RED_90_CLASSNAME = 't-sage--color-red-90'; +export const COLOR_BASE_RED_95_HEX = '#572627'; +export const COLOR_BASE_RED_95_CODE = 'red-95'; +export const COLOR_BASE_RED_95_CLASSNAME = 't-sage--color-red-95'; +export const COLOR_BASE_RED_100_HEX = '#fee2e1'; export const COLOR_BASE_RED_100_CODE = 'red-100'; export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; -export const COLOR_BASE_RED_200_HEX = '#fdb0aa'; +export const COLOR_BASE_RED_200_HEX = '#fda5a5'; export const COLOR_BASE_RED_200_CODE = 'red-200'; export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-200'; -export const COLOR_BASE_RED_300_HEX = '#cf3c32'; +export const COLOR_BASE_RED_300_HEX = '#ef4444'; export const COLOR_BASE_RED_300_CODE = 'red-300'; export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-300'; -export const COLOR_BASE_RED_400_HEX = '#99221e'; +export const COLOR_BASE_RED_400_HEX = '#991b1b'; export const COLOR_BASE_RED_400_CODE = 'red-400'; export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-400'; -export const COLOR_BASE_RED_500_HEX = '#5e0d0d'; +export const COLOR_BASE_RED_500_HEX = '#572627'; export const COLOR_BASE_RED_500_CODE = 'red-500'; export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-500'; -export const COLOR_BASE_ORANGE_100_HEX = '#fef1e1'; +export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; -export const COLOR_BASE_ORANGE_200_HEX = '#ffb36b'; +export const COLOR_BASE_ORANGE_200_HEX = '#ff9970'; export const COLOR_BASE_ORANGE_200_CODE = 'orange-200'; export const COLOR_BASE_ORANGE_200_CLASSNAME = 't-sage--color-orange-200'; -export const COLOR_BASE_ORANGE_300_HEX = '#fb7e09'; +export const COLOR_BASE_ORANGE_300_HEX = '#ff3e15'; export const COLOR_BASE_ORANGE_300_CODE = 'orange-300'; export const COLOR_BASE_ORANGE_300_CLASSNAME = 't-sage--color-orange-300'; -export const COLOR_BASE_ORANGE_400_HEX = '#b3501e'; +export const COLOR_BASE_ORANGE_400_HEX = '#9e110e'; export const COLOR_BASE_ORANGE_400_CODE = 'orange-400'; export const COLOR_BASE_ORANGE_400_CLASSNAME = 't-sage--color-orange-400'; -export const COLOR_BASE_ORANGE_500_HEX = '#5a260c'; +export const COLOR_BASE_ORANGE_500_HEX = '#450506'; export const COLOR_BASE_ORANGE_500_CODE = 'orange-500'; export const COLOR_BASE_ORANGE_500_CLASSNAME = 't-sage--color-orange-500'; -export const COLOR_BASE_PURPLE_100_HEX = '#eee4f6'; +export const COLOR_BASE_PURPLE_5_HEX = '#fafbff'; +export const COLOR_BASE_PURPLE_5_CODE = 'purple-5'; +export const COLOR_BASE_PURPLE_5_CLASSNAME = 't-sage--color-purple-5'; +export const COLOR_BASE_PURPLE_10_HEX = '#edf1ff'; +export const COLOR_BASE_PURPLE_10_CODE = 'purple-10'; +export const COLOR_BASE_PURPLE_10_CLASSNAME = 't-sage--color-purple-10'; +export const COLOR_BASE_PURPLE_15_HEX = '#e0e4ff'; +export const COLOR_BASE_PURPLE_15_CODE = 'purple-15'; +export const COLOR_BASE_PURPLE_15_CLASSNAME = 't-sage--color-purple-15'; +export const COLOR_BASE_PURPLE_20_HEX = '#c7cdfe'; +export const COLOR_BASE_PURPLE_20_CODE = 'purple-20'; +export const COLOR_BASE_PURPLE_20_CLASSNAME = 't-sage--color-purple-20'; +export const COLOR_BASE_PURPLE_30_HEX = '#a3acfd'; +export const COLOR_BASE_PURPLE_30_CODE = 'purple-30'; +export const COLOR_BASE_PURPLE_30_CLASSNAME = 't-sage--color-purple-30'; +export const COLOR_BASE_PURPLE_40_HEX = '#8081f9'; +export const COLOR_BASE_PURPLE_40_CODE = 'purple-40'; +export const COLOR_BASE_PURPLE_40_CLASSNAME = 't-sage--color-purple-40'; +export const COLOR_BASE_PURPLE_50_HEX = '#6a62f2'; +export const COLOR_BASE_PURPLE_50_CODE = 'purple-50'; +export const COLOR_BASE_PURPLE_50_CLASSNAME = 't-sage--color-purple-50'; +export const COLOR_BASE_PURPLE_60_HEX = '#533be5'; +export const COLOR_BASE_PURPLE_60_CODE = 'purple-60'; +export const COLOR_BASE_PURPLE_60_CLASSNAME = 't-sage--color-purple-60'; +export const COLOR_BASE_PURPLE_70_HEX = '#4f37cb'; +export const COLOR_BASE_PURPLE_70_CODE = 'purple-70'; +export const COLOR_BASE_PURPLE_70_CLASSNAME = 't-sage--color-purple-70'; +export const COLOR_BASE_PURPLE_80_HEX = '#402fa4'; +export const COLOR_BASE_PURPLE_80_CODE = 'purple-80'; +export const COLOR_BASE_PURPLE_80_CLASSNAME = 't-sage--color-purple-80'; +export const COLOR_BASE_PURPLE_90_HEX = '#372d82'; +export const COLOR_BASE_PURPLE_90_CODE = 'purple-90'; +export const COLOR_BASE_PURPLE_90_CLASSNAME = 't-sage--color-purple-90'; +export const COLOR_BASE_PURPLE_95_HEX = '#221b4b'; +export const COLOR_BASE_PURPLE_95_CODE = 'purple-95'; +export const COLOR_BASE_PURPLE_95_CLASSNAME = 't-sage--color-purple-95'; +export const COLOR_BASE_PURPLE_100_HEX = '#e0e4ff'; export const COLOR_BASE_PURPLE_100_CODE = 'purple-100'; export const COLOR_BASE_PURPLE_100_CLASSNAME = 't-sage--color-purple-100'; -export const COLOR_BASE_PURPLE_200_HEX = '#d9c2ef'; +export const COLOR_BASE_PURPLE_200_HEX = '#a3acfd'; export const COLOR_BASE_PURPLE_200_CODE = 'purple-200'; export const COLOR_BASE_PURPLE_200_CLASSNAME = 't-sage--color-purple-200'; -export const COLOR_BASE_PURPLE_300_HEX = '#8e5ad8'; +export const COLOR_BASE_PURPLE_300_HEX = '#533be5'; export const COLOR_BASE_PURPLE_300_CODE = 'purple-300'; export const COLOR_BASE_PURPLE_300_CLASSNAME = 't-sage--color-purple-300'; -export const COLOR_BASE_PURPLE_400_HEX = '#50348a'; +export const COLOR_BASE_PURPLE_400_HEX = '#402fa4'; export const COLOR_BASE_PURPLE_400_CODE = 'purple-400'; export const COLOR_BASE_PURPLE_400_CLASSNAME = 't-sage--color-purple-400'; -export const COLOR_BASE_PURPLE_500_HEX = '#381c5e'; +export const COLOR_BASE_PURPLE_500_HEX = '#221b4b'; export const COLOR_BASE_PURPLE_500_CODE = 'purple-500'; export const COLOR_BASE_PURPLE_500_CLASSNAME = 't-sage--color-purple-500'; -export const COLOR_BASE_CHARCOAL_100_HEX = '#8d939a'; +export const COLOR_BASE_CHARCOAL_100_HEX = '#828180'; export const COLOR_BASE_CHARCOAL_100_CODE = 'charcoal-100'; export const COLOR_BASE_CHARCOAL_100_CLASSNAME = 't-sage--color-charcoal-100'; -export const COLOR_BASE_CHARCOAL_200_HEX = '#60666c'; +export const COLOR_BASE_CHARCOAL_200_HEX = '#6c6a69'; export const COLOR_BASE_CHARCOAL_200_CODE = 'charcoal-200'; export const COLOR_BASE_CHARCOAL_200_CLASSNAME = 't-sage--color-charcoal-200'; -export const COLOR_BASE_CHARCOAL_300_HEX = '#43474b'; +export const COLOR_BASE_CHARCOAL_300_HEX = '#4d4d4c'; export const COLOR_BASE_CHARCOAL_300_CODE = 'charcoal-300'; export const COLOR_BASE_CHARCOAL_300_CLASSNAME = 't-sage--color-charcoal-300'; -export const COLOR_BASE_CHARCOAL_400_HEX = '#202327'; +export const COLOR_BASE_CHARCOAL_400_HEX = '#343332'; export const COLOR_BASE_CHARCOAL_400_CODE = 'charcoal-400'; export const COLOR_BASE_CHARCOAL_400_CLASSNAME = 't-sage--color-charcoal-400'; -export const COLOR_BASE_CHARCOAL_500_HEX = '#040506'; +export const COLOR_BASE_CHARCOAL_500_HEX = '#1a1a19'; export const COLOR_BASE_CHARCOAL_500_CODE = 'charcoal-500'; export const COLOR_BASE_CHARCOAL_500_CLASSNAME = 't-sage--color-charcoal-500'; -export const COLOR_BASE_GREY_100_HEX = '#f9fafa'; +export const COLOR_BASE_GREY_5_HEX = '#fcfcfc'; +export const COLOR_BASE_GREY_5_CODE = 'grey-5'; +export const COLOR_BASE_GREY_5_CLASSNAME = 't-sage--color-grey-5'; +export const COLOR_BASE_GREY_10_HEX = '#f8f8f8'; +export const COLOR_BASE_GREY_10_CODE = 'grey-10'; +export const COLOR_BASE_GREY_10_CLASSNAME = 't-sage--color-grey-10'; +export const COLOR_BASE_GREY_15_HEX = '#f0f0f0'; +export const COLOR_BASE_GREY_15_CODE = 'grey-15'; +export const COLOR_BASE_GREY_15_CLASSNAME = 't-sage--color-grey-15'; +export const COLOR_BASE_GREY_20_HEX = '#e4e4e4'; +export const COLOR_BASE_GREY_20_CODE = 'grey-20'; +export const COLOR_BASE_GREY_20_CLASSNAME = 't-sage--color-grey-20'; +export const COLOR_BASE_GREY_30_HEX = '#d2d1d1'; +export const COLOR_BASE_GREY_30_CODE = 'grey-30'; +export const COLOR_BASE_GREY_30_CLASSNAME = 't-sage--color-grey-30'; +export const COLOR_BASE_GREY_40_HEX = '#bbbab9'; +export const COLOR_BASE_GREY_40_CODE = 'grey-40'; +export const COLOR_BASE_GREY_40_CLASSNAME = 't-sage--color-grey-40'; +export const COLOR_BASE_GREY_50_HEX = '#9b9a98'; +export const COLOR_BASE_GREY_50_CODE = 'grey-50'; +export const COLOR_BASE_GREY_50_CLASSNAME = 't-sage--color-grey-50'; +export const COLOR_BASE_GREY_60_HEX = '#828180'; +export const COLOR_BASE_GREY_60_CODE = 'grey-60'; +export const COLOR_BASE_GREY_60_CLASSNAME = 't-sage--color-grey-60'; +export const COLOR_BASE_GREY_70_HEX = '#6c6a69'; +export const COLOR_BASE_GREY_70_CODE = 'grey-70'; +export const COLOR_BASE_GREY_70_CLASSNAME = 't-sage--color-grey-70'; +export const COLOR_BASE_GREY_80_HEX = '#4d4d4c'; +export const COLOR_BASE_GREY_80_CODE = 'grey-80'; +export const COLOR_BASE_GREY_80_CLASSNAME = 't-sage--color-grey-80'; +export const COLOR_BASE_GREY_90_HEX = '#343332'; +export const COLOR_BASE_GREY_90_CODE = 'grey-90'; +export const COLOR_BASE_GREY_90_CLASSNAME = 't-sage--color-grey-90'; +export const COLOR_BASE_GREY_95_HEX = '#1a1a19'; +export const COLOR_BASE_GREY_95_CODE = 'grey-95'; +export const COLOR_BASE_GREY_95_CLASSNAME = 't-sage--color-grey-95'; +export const COLOR_BASE_GREY_100_HEX = '#f8f8f8'; export const COLOR_BASE_GREY_100_CODE = 'grey-100'; export const COLOR_BASE_GREY_100_CLASSNAME = 't-sage--color-grey-100'; -export const COLOR_BASE_GREY_200_HEX = '#f6f8f8'; +export const COLOR_BASE_GREY_200_HEX = '#f0f0f0'; export const COLOR_BASE_GREY_200_CODE = 'grey-200'; export const COLOR_BASE_GREY_200_CLASSNAME = 't-sage--color-grey-200'; -export const COLOR_BASE_GREY_300_HEX = '#eceeef'; +export const COLOR_BASE_GREY_300_HEX = '#e4e4e4'; export const COLOR_BASE_GREY_300_CODE = 'grey-300'; export const COLOR_BASE_GREY_300_CLASSNAME = 't-sage--color-grey-300'; -export const COLOR_BASE_GREY_400_HEX = '#d3d5d9'; +export const COLOR_BASE_GREY_400_HEX = '#d2d1d1'; export const COLOR_BASE_GREY_400_CODE = 'grey-400'; export const COLOR_BASE_GREY_400_CLASSNAME = 't-sage--color-grey-400'; -export const COLOR_BASE_GREY_500_HEX = '#b5bac0'; +export const COLOR_BASE_GREY_500_HEX = '#9b9a98'; export const COLOR_BASE_GREY_500_CODE = 'grey-500'; export const COLOR_BASE_GREY_500_CLASSNAME = 't-sage--color-grey-500'; export const COLOR_BASE_WHITE_100_HEX = '#fff'; @@ -174,6 +426,192 @@ export const COLOR_BASE_BLACK_500_CLASSNAME = 't-sage--color-black-500'; // Map for COLOR BASE // export const COLOR = { + BLUE: { + 5: { + HEX: COLOR_BASE_BLUE_5_HEX, + CODE: COLOR_BASE_BLUE_5_CODE, + CLASSNAME: COLOR_BASE_BLUE_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_BLUE_10_HEX, + CODE: COLOR_BASE_BLUE_10_CODE, + CLASSNAME: COLOR_BASE_BLUE_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_BLUE_15_HEX, + CODE: COLOR_BASE_BLUE_15_CODE, + CLASSNAME: COLOR_BASE_BLUE_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_BLUE_20_HEX, + CODE: COLOR_BASE_BLUE_20_CODE, + CLASSNAME: COLOR_BASE_BLUE_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_BLUE_30_HEX, + CODE: COLOR_BASE_BLUE_30_CODE, + CLASSNAME: COLOR_BASE_BLUE_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_BLUE_40_HEX, + CODE: COLOR_BASE_BLUE_40_CODE, + CLASSNAME: COLOR_BASE_BLUE_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_BLUE_50_HEX, + CODE: COLOR_BASE_BLUE_50_CODE, + CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_BLUE_60_HEX, + CODE: COLOR_BASE_BLUE_60_CODE, + CLASSNAME: COLOR_BASE_BLUE_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_BLUE_70_HEX, + CODE: COLOR_BASE_BLUE_70_CODE, + CLASSNAME: COLOR_BASE_BLUE_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_BLUE_80_HEX, + CODE: COLOR_BASE_BLUE_80_CODE, + CLASSNAME: COLOR_BASE_BLUE_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_BLUE_90_HEX, + CODE: COLOR_BASE_BLUE_90_CODE, + CLASSNAME: COLOR_BASE_BLUE_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_BLUE_95_HEX, + CODE: COLOR_BASE_BLUE_95_CODE, + CLASSNAME: COLOR_BASE_BLUE_95_CLASSNAME, + }, + }, + GREEN: { + 5: { + HEX: COLOR_BASE_GREEN_5_HEX, + CODE: COLOR_BASE_GREEN_5_CODE, + CLASSNAME: COLOR_BASE_GREEN_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_GREEN_10_HEX, + CODE: COLOR_BASE_GREEN_10_CODE, + CLASSNAME: COLOR_BASE_GREEN_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_GREEN_15_HEX, + CODE: COLOR_BASE_GREEN_15_CODE, + CLASSNAME: COLOR_BASE_GREEN_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_GREEN_20_HEX, + CODE: COLOR_BASE_GREEN_20_CODE, + CLASSNAME: COLOR_BASE_GREEN_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_GREEN_30_HEX, + CODE: COLOR_BASE_GREEN_30_CODE, + CLASSNAME: COLOR_BASE_GREEN_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_GREEN_40_HEX, + CODE: COLOR_BASE_GREEN_40_CODE, + CLASSNAME: COLOR_BASE_GREEN_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_GREEN_50_HEX, + CODE: COLOR_BASE_GREEN_50_CODE, + CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_GREEN_60_HEX, + CODE: COLOR_BASE_GREEN_60_CODE, + CLASSNAME: COLOR_BASE_GREEN_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_GREEN_70_HEX, + CODE: COLOR_BASE_GREEN_70_CODE, + CLASSNAME: COLOR_BASE_GREEN_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_GREEN_80_HEX, + CODE: COLOR_BASE_GREEN_80_CODE, + CLASSNAME: COLOR_BASE_GREEN_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_GREEN_90_HEX, + CODE: COLOR_BASE_GREEN_90_CODE, + CLASSNAME: COLOR_BASE_GREEN_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_GREEN_95_HEX, + CODE: COLOR_BASE_GREEN_95_CODE, + CLASSNAME: COLOR_BASE_GREEN_95_CLASSNAME, + }, + }, + MERCURY: { + 5: { + HEX: COLOR_BASE_MERCURY_5_HEX, + CODE: COLOR_BASE_MERCURY_5_CODE, + CLASSNAME: COLOR_BASE_MERCURY_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_MERCURY_10_HEX, + CODE: COLOR_BASE_MERCURY_10_CODE, + CLASSNAME: COLOR_BASE_MERCURY_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_MERCURY_15_HEX, + CODE: COLOR_BASE_MERCURY_15_CODE, + CLASSNAME: COLOR_BASE_MERCURY_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_MERCURY_20_HEX, + CODE: COLOR_BASE_MERCURY_20_CODE, + CLASSNAME: COLOR_BASE_MERCURY_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_MERCURY_30_HEX, + CODE: COLOR_BASE_MERCURY_30_CODE, + CLASSNAME: COLOR_BASE_MERCURY_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_MERCURY_40_HEX, + CODE: COLOR_BASE_MERCURY_40_CODE, + CLASSNAME: COLOR_BASE_MERCURY_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_MERCURY_50_HEX, + CODE: COLOR_BASE_MERCURY_50_CODE, + CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_MERCURY_60_HEX, + CODE: COLOR_BASE_MERCURY_60_CODE, + CLASSNAME: COLOR_BASE_MERCURY_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_MERCURY_70_HEX, + CODE: COLOR_BASE_MERCURY_70_CODE, + CLASSNAME: COLOR_BASE_MERCURY_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_MERCURY_80_HEX, + CODE: COLOR_BASE_MERCURY_80_CODE, + CLASSNAME: COLOR_BASE_MERCURY_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_MERCURY_90_HEX, + CODE: COLOR_BASE_MERCURY_90_CODE, + CLASSNAME: COLOR_BASE_MERCURY_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_MERCURY_95_HEX, + CODE: COLOR_BASE_MERCURY_95_CODE, + CLASSNAME: COLOR_BASE_MERCURY_95_CLASSNAME, + }, + }, PRIMARY: { 100: { HEX: COLOR_BASE_PRIMARY_100_HEX, @@ -229,6 +667,66 @@ export const COLOR = { }, }, YELLOW: { + 5: { + HEX: COLOR_BASE_YELLOW_5_HEX, + CODE: COLOR_BASE_YELLOW_5_CODE, + CLASSNAME: COLOR_BASE_YELLOW_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_YELLOW_10_HEX, + CODE: COLOR_BASE_YELLOW_10_CODE, + CLASSNAME: COLOR_BASE_YELLOW_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_YELLOW_15_HEX, + CODE: COLOR_BASE_YELLOW_15_CODE, + CLASSNAME: COLOR_BASE_YELLOW_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_YELLOW_20_HEX, + CODE: COLOR_BASE_YELLOW_20_CODE, + CLASSNAME: COLOR_BASE_YELLOW_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_YELLOW_30_HEX, + CODE: COLOR_BASE_YELLOW_30_CODE, + CLASSNAME: COLOR_BASE_YELLOW_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_YELLOW_40_HEX, + CODE: COLOR_BASE_YELLOW_40_CODE, + CLASSNAME: COLOR_BASE_YELLOW_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_YELLOW_50_HEX, + CODE: COLOR_BASE_YELLOW_50_CODE, + CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_YELLOW_60_HEX, + CODE: COLOR_BASE_YELLOW_60_CODE, + CLASSNAME: COLOR_BASE_YELLOW_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_YELLOW_70_HEX, + CODE: COLOR_BASE_YELLOW_70_CODE, + CLASSNAME: COLOR_BASE_YELLOW_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_YELLOW_80_HEX, + CODE: COLOR_BASE_YELLOW_80_CODE, + CLASSNAME: COLOR_BASE_YELLOW_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_YELLOW_90_HEX, + CODE: COLOR_BASE_YELLOW_90_CODE, + CLASSNAME: COLOR_BASE_YELLOW_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_YELLOW_95_HEX, + CODE: COLOR_BASE_YELLOW_95_CODE, + CLASSNAME: COLOR_BASE_YELLOW_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_YELLOW_100_HEX, CODE: COLOR_BASE_YELLOW_100_CODE, @@ -256,6 +754,66 @@ export const COLOR = { }, }, RED: { + 5: { + HEX: COLOR_BASE_RED_5_HEX, + CODE: COLOR_BASE_RED_5_CODE, + CLASSNAME: COLOR_BASE_RED_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_RED_10_HEX, + CODE: COLOR_BASE_RED_10_CODE, + CLASSNAME: COLOR_BASE_RED_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_RED_15_HEX, + CODE: COLOR_BASE_RED_15_CODE, + CLASSNAME: COLOR_BASE_RED_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_RED_20_HEX, + CODE: COLOR_BASE_RED_20_CODE, + CLASSNAME: COLOR_BASE_RED_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_RED_30_HEX, + CODE: COLOR_BASE_RED_30_CODE, + CLASSNAME: COLOR_BASE_RED_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_RED_40_HEX, + CODE: COLOR_BASE_RED_40_CODE, + CLASSNAME: COLOR_BASE_RED_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_RED_50_HEX, + CODE: COLOR_BASE_RED_50_CODE, + CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_RED_60_HEX, + CODE: COLOR_BASE_RED_60_CODE, + CLASSNAME: COLOR_BASE_RED_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_RED_70_HEX, + CODE: COLOR_BASE_RED_70_CODE, + CLASSNAME: COLOR_BASE_RED_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_RED_80_HEX, + CODE: COLOR_BASE_RED_80_CODE, + CLASSNAME: COLOR_BASE_RED_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_RED_90_HEX, + CODE: COLOR_BASE_RED_90_CODE, + CLASSNAME: COLOR_BASE_RED_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_RED_95_HEX, + CODE: COLOR_BASE_RED_95_CODE, + CLASSNAME: COLOR_BASE_RED_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_RED_100_HEX, CODE: COLOR_BASE_RED_100_CODE, @@ -310,6 +868,66 @@ export const COLOR = { }, }, PURPLE: { + 5: { + HEX: COLOR_BASE_PURPLE_5_HEX, + CODE: COLOR_BASE_PURPLE_5_CODE, + CLASSNAME: COLOR_BASE_PURPLE_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_PURPLE_10_HEX, + CODE: COLOR_BASE_PURPLE_10_CODE, + CLASSNAME: COLOR_BASE_PURPLE_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_PURPLE_15_HEX, + CODE: COLOR_BASE_PURPLE_15_CODE, + CLASSNAME: COLOR_BASE_PURPLE_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_PURPLE_20_HEX, + CODE: COLOR_BASE_PURPLE_20_CODE, + CLASSNAME: COLOR_BASE_PURPLE_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_PURPLE_30_HEX, + CODE: COLOR_BASE_PURPLE_30_CODE, + CLASSNAME: COLOR_BASE_PURPLE_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_PURPLE_40_HEX, + CODE: COLOR_BASE_PURPLE_40_CODE, + CLASSNAME: COLOR_BASE_PURPLE_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_PURPLE_50_HEX, + CODE: COLOR_BASE_PURPLE_50_CODE, + CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_PURPLE_60_HEX, + CODE: COLOR_BASE_PURPLE_60_CODE, + CLASSNAME: COLOR_BASE_PURPLE_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_PURPLE_70_HEX, + CODE: COLOR_BASE_PURPLE_70_CODE, + CLASSNAME: COLOR_BASE_PURPLE_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_PURPLE_80_HEX, + CODE: COLOR_BASE_PURPLE_80_CODE, + CLASSNAME: COLOR_BASE_PURPLE_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_PURPLE_90_HEX, + CODE: COLOR_BASE_PURPLE_90_CODE, + CLASSNAME: COLOR_BASE_PURPLE_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_PURPLE_95_HEX, + CODE: COLOR_BASE_PURPLE_95_CODE, + CLASSNAME: COLOR_BASE_PURPLE_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_PURPLE_100_HEX, CODE: COLOR_BASE_PURPLE_100_CODE, @@ -364,6 +982,66 @@ export const COLOR = { }, }, GREY: { + 5: { + HEX: COLOR_BASE_GREY_5_HEX, + CODE: COLOR_BASE_GREY_5_CODE, + CLASSNAME: COLOR_BASE_GREY_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_GREY_10_HEX, + CODE: COLOR_BASE_GREY_10_CODE, + CLASSNAME: COLOR_BASE_GREY_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_GREY_15_HEX, + CODE: COLOR_BASE_GREY_15_CODE, + CLASSNAME: COLOR_BASE_GREY_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_GREY_20_HEX, + CODE: COLOR_BASE_GREY_20_CODE, + CLASSNAME: COLOR_BASE_GREY_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_GREY_30_HEX, + CODE: COLOR_BASE_GREY_30_CODE, + CLASSNAME: COLOR_BASE_GREY_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_GREY_40_HEX, + CODE: COLOR_BASE_GREY_40_CODE, + CLASSNAME: COLOR_BASE_GREY_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_GREY_50_HEX, + CODE: COLOR_BASE_GREY_50_CODE, + CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_GREY_60_HEX, + CODE: COLOR_BASE_GREY_60_CODE, + CLASSNAME: COLOR_BASE_GREY_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_GREY_70_HEX, + CODE: COLOR_BASE_GREY_70_CODE, + CLASSNAME: COLOR_BASE_GREY_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_GREY_80_HEX, + CODE: COLOR_BASE_GREY_80_CODE, + CLASSNAME: COLOR_BASE_GREY_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_GREY_90_HEX, + CODE: COLOR_BASE_GREY_90_CODE, + CLASSNAME: COLOR_BASE_GREY_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_GREY_95_HEX, + CODE: COLOR_BASE_GREY_95_CODE, + CLASSNAME: COLOR_BASE_GREY_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_GREY_100_HEX, CODE: COLOR_BASE_GREY_100_CODE, @@ -453,74 +1131,74 @@ export const COLOR = { // // Static vars for COLOR COMBOS // -export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = '#202327'; -export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = '#040506'; -export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = '#eceeef'; -export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = '#d3d5d9'; -export const COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = '#60666c'; -export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = '#60666c'; -export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = '#8d939a'; -export const COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = '#8d939a'; -export const COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = '#f6f8f8'; -export const COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = '#202327'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = '#225d53'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = '#183e3b'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = '#ddf8f0'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = '#86d5bc'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = '#23856d'; -export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = '#225d53'; -export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = '#23856d'; -export const COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = '#23856d'; +export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = '#343332'; +export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = '#1a1a19'; +export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = '#e4e4e4'; +export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = '#d2d1d1'; +export const COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = '#6c6a69'; +export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = '#6c6a69'; +export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = '#828180'; +export const COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = '#828180'; +export const COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = '#f0f0f0'; +export const COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = '#343332'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = '#085c37'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = '#052e1c'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = '#d3f8df'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = '#73e2a3'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = '#079250'; +export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = '#085c37'; +export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = '#079250'; +export const COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = '#079250'; export const COLOR_COMBOS_PUBLISHED_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = '#23856d'; -export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = '#054fb8'; -export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = '#07265f'; -export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = '#e6f4fe'; -export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = '#8ecafb'; -export const COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = '#0072ef'; -export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = '#054fb8'; -export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = '#0072ef'; -export const COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = '#8ecafb'; -export const COLOR_COMBOS_INFO_BOLD_FOREGROUND = '#e6f4fe'; -export const COLOR_COMBOS_INFO_BOLD_BACKGROUND = '#0072ef'; -export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = '#50348a'; -export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = '#381c5e'; -export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = '#eee4f6'; -export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = '#d9c2ef'; -export const COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = '#8e5ad8'; -export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = '#50348a'; -export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = '#8e5ad8'; -export const COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = '#d9c2ef'; -export const COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = '#eee4f6'; -export const COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = '#8e5ad8'; -export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = '#c56a02'; -export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = '#8c3b08'; -export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = '#fef8e1'; -export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = '#fad980'; -export const COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = '#c56a02'; -export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = '#c56a02'; -export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = '#ffc505'; -export const COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = '#ffc505'; +export const COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = '#079250'; +export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = '#1c4ed8'; +export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = '#172554'; +export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = '#dbe9fe'; +export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = '#92c5fd'; +export const COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = '#2463eb'; +export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = '#1c4ed8'; +export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = '#2463eb'; +export const COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = '#92c5fd'; +export const COLOR_COMBOS_INFO_BOLD_FOREGROUND = '#dbe9fe'; +export const COLOR_COMBOS_INFO_BOLD_BACKGROUND = '#2463eb'; +export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = '#402fa4'; +export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = '#221b4b'; +export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = '#e0e4ff'; +export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = '#a3acfd'; +export const COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = '#533be5'; +export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = '#402fa4'; +export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = '#533be5'; +export const COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = '#a3acfd'; +export const COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = '#e0e4ff'; +export const COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = '#533be5'; +export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = '#db7303'; +export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = '#451902'; +export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = '#fff3c6'; +export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = '#fed04b'; +export const COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = '#db7303'; +export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = '#db7303'; +export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = '#fdbb21'; +export const COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = '#fdbb21'; export const COLOR_COMBOS_WARNING_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_WARNING_BOLD_BACKGROUND = '#ffc505'; -export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = '#99221e'; -export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = '#5e0d0d'; -export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = '#fff0f0'; -export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = '#fdb0aa'; -export const COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = '#cf3c32'; -export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = '#99221e'; -export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = '#fdb0aa'; -export const COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = '#fdb0aa'; -export const COLOR_COMBOS_DANGER_BOLD_FOREGROUND = '#fff0f0'; -export const COLOR_COMBOS_DANGER_BOLD_BACKGROUND = '#fdb0aa'; +export const COLOR_COMBOS_WARNING_BOLD_BACKGROUND = '#fdbb21'; +export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = '#991b1b'; +export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = '#572627'; +export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = '#fee2e1'; +export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = '#fda5a5'; +export const COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = '#ef4444'; +export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = '#991b1b'; +export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = '#fda5a5'; +export const COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = '#fda5a5'; +export const COLOR_COMBOS_DANGER_BOLD_FOREGROUND = '#fee2e1'; +export const COLOR_COMBOS_DANGER_BOLD_BACKGROUND = '#fda5a5'; export const COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = '#fff'; export const COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = '#fff'; -export const COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = '#8ecafb'; +export const COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = '#92c5fd'; export const COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = '#fff'; export const COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = '#fff'; -export const COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = '#8ecafb'; +export const COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = '#92c5fd'; export const COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = '#8ecafb'; +export const COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = '#92c5fd'; // // Map for COLOR COMBOS @@ -659,14 +1337,17 @@ export const COLOR_COMBOS = { // // Static vars for COLOR CORE // -export const COLOR_CORE_PRIMARY = '#0072ef'; -export const COLOR_CORE_SAGE = '#23856d'; -export const COLOR_CORE_YELLOW = '#ffc505'; -export const COLOR_CORE_RED = '#cf3c32'; -export const COLOR_CORE_ORANGE = '#fb7e09'; -export const COLOR_CORE_PURPLE = '#8e5ad8'; -export const COLOR_CORE_CHARCOAL = '#43474b'; -export const COLOR_CORE_GREY = '#8d939a'; +export const COLOR_CORE_BLUE = '#2463eb'; +export const COLOR_CORE_GREEN = '#079250'; +export const COLOR_CORE_MERCURY = '#ff3e15'; +export const COLOR_CORE_PRIMARY = '#2463eb'; +export const COLOR_CORE_SAGE = '#079250'; +export const COLOR_CORE_YELLOW = '#fdbb21'; +export const COLOR_CORE_RED = '#ef4444'; +export const COLOR_CORE_ORANGE = '#ff3e15'; +export const COLOR_CORE_PURPLE = '#533be5'; +export const COLOR_CORE_CHARCOAL = '#4d4d4c'; +export const COLOR_CORE_GREY = '#828180'; export const COLOR_CORE_WHITE = '#fff'; export const COLOR_CORE_BLACK = '#000'; @@ -674,6 +1355,9 @@ export const COLOR_CORE_BLACK = '#000'; // Map for COLOR CORE // export const COLOR_CORE = { + BLUE: COLOR_CORE_BLUE, + GREEN: COLOR_CORE_GREEN, + MERCURY: COLOR_CORE_MERCURY, PRIMARY: COLOR_CORE_PRIMARY, SAGE: COLOR_CORE_SAGE, YELLOW: COLOR_CORE_YELLOW, diff --git a/packages/sage-react/lib/configs/tokens/box_shadows.js b/packages/sage-react/lib/configs/tokens/box_shadows.js new file mode 100644 index 0000000000..7d1aebb9cb --- /dev/null +++ b/packages/sage-react/lib/configs/tokens/box_shadows.js @@ -0,0 +1,14 @@ +export const TOKENS_BOX_SHADOW_OPTIONS = { + DEFAULT: null, + XS: 'xs', + SM: 'sm', + MD: 'md', + LG: 'lg', + MODAL: 'modal', + '050': '050', + 100: '100', + 200: '200', + 300: '300', + 400: '400', + 500: '500', +}; diff --git a/packages/sage-react/lib/configs/tokens/index.js b/packages/sage-react/lib/configs/tokens/index.js index adaf57ad2a..c6d83f13e0 100644 --- a/packages/sage-react/lib/configs/tokens/index.js +++ b/packages/sage-react/lib/configs/tokens/index.js @@ -1,4 +1,5 @@ import { TOKENS_COLORS, TOKENS_COLOR_PALETTE, TOKENS_COLOR_SLIDERS } from './colors'; +import { TOKENS_BOX_SHADOW_OPTIONS } from './box_shadows'; import { TOKENS_GRID_GAP_OPTIONS } from './grid_gap_options'; import { TOKENS_GRID_TEMPLATES } from './grid-templates'; import { TOKENS_ICONS } from './icons'; @@ -10,6 +11,7 @@ import { SAGE_BREAKPOINT_QUERIES, SAGE_BREAKPOINT_VALUES } from './breakpoints'; export const SageTokens = { BREAKPOINTS: SAGE_BREAKPOINT_VALUES, BREAKPOINT_QUERIES: SAGE_BREAKPOINT_QUERIES, + BOX_SHADOWS: TOKENS_BOX_SHADOW_OPTIONS, COLORS: TOKENS_COLORS, COLOR_PALETTE: TOKENS_COLOR_PALETTE, COLOR_SLIDERS: TOKENS_COLOR_SLIDERS, diff --git a/packages/sage-react/public/CardPlaceholderLarge.png b/packages/sage-react/public/CardPlaceholderLarge.png new file mode 100644 index 0000000000000000000000000000000000000000..e069d7bf9c006c320615412e1d09b395e3a01261 GIT binary patch literal 2239 zcmcJQ`(ILN9>=LrBuiT>s(EF$P3i7>>EgWvJ5#P>=4HxK%hH`Dp&GLUhd_xsu8r1) zIh6_;(NtQRWTQq%ilkyw0S6K9q^Tfy!BAAl$OYza=<~~Yp7;0je9rgzo*zzbbY$rA zrQa-t!C=e7zTbNQ23rilV2fVaEin@v)#1MRkrur_Cd6Pc==FM??xXIbMH3U_6XO1>4ygF{t3jz}cv$G4^3&dRL8Se@|-L!i}h_qm6cdKy4 zo~S3eP}wZM$JdZW8qD7mXjLoZjd_dJmHI{zFq^8HVr{#hkR z-7H)Bva)6ARaY*m;vbCmBTpXSoWgsmeK1) zjfGt~>i0_(G56OCIf$SQo&}#wiQ5n2^JCiWHa9PtXrDVaKlOC>9`BSeP8omH?FG~* z9UoIf74PmhzcUh+Oi$z%iucQdJ~t}`%TEV&Icb41RKd3xZ#!UpFxfd+PH za77KDFT@_o8&5k7@d(i~`SXQ+~mX%bb(y7Oe4ulh?xD^;};<03nm z0*{D;5~sr^T)<@8jwRri-w-$#8_`5cB*Jvz8sa~G4cQ@$`vO#l9#U?5VLfp_f)^zZ z4GP|E77|Im{cDDkkE|J?82)e?@D9s_DuRSJS@ca9wQJrF_6+1;)^XMOe*xaW1!$7n ze)jI9b_3Iq-@OIrYUfxd%AOm2EfIHs$)K85$o)vpG_m0#xBz&H@6YM5Ue?TD<*QD8aDSh2W8CKyp2C#h z`%4CAqG)4~dXlT>9zCqll6qB{VmnjSdy4sc%o>kF3A@x~L1M~I_NN}zLU}BxssqaW z@_ulX7z-s>0550xlm2&dG{9&p^9S%ER>j-;x4O^_gNX`w%L;F5Wq(T~yM(Xt$p?t- zq(>Y=bLY2`1$)MrO+9XU+g*7h^X>085$B*Gj<#oBfG!NNXH>E5w~}&{Io3)H^sqCt z=X8wZq!e`ZQ0qcCCpt&|zyT{)6Eu(4<)7%DW|_~MT`d{fxx?4hT)w%6BAk*BH;tbB zMvkYNkL^_N(CipNqKQ{gK9_;Qg2{z`LiMpyr1fnOE8MXn<(Pj&^+Fe0dtm3&5l-n- z9N^u5ccXU9=<7L4F}K9ERrKTc9ZHpg$xOgSW5k(LH>zJVqgHw17K5}g<4;!bh>7?M zXh_jkki$fvEDi@XDM`BE{D9%!9QFsBcKv`MbV5vbY5x!;nIYrnI>I-xa$ z%&!x`GIuaLGy}Iq*JFW$j10(xwr4C!-aw#AK-CQrLeXE%3dD5)b8{Xzhhn_7yusU{ zj*kUo*aj;mi~Q7Im^Kl7%Vf>&A4{#6M#oy+FoAWu7;ep?Z``4d*OzpFs!c#@vJ~HA z$Edn}jx3R79d|3*RuQQV#H|96fa7F5w10)O{wxYzHVLZMOG2QPWZE(^eW2!~*0B8= z^PneA{Oq;!JQ5vhYs!OT;if<{EZ$WPUoy--?SPKux(ilBXfH4zd>?Lso|Kc<_l#~{ zFG{|Xl#`M#UPg|jDrqU;-w$)gG_&Zf)%exo=^MP!;<*yW&z&^yTJ9Oj7?ZDJ`w6!7 z<3H%0qk~ni^57#5Qf_@zu!(e^xhBHzJN)xg+WJc9mF3Cu%n)Wb)!M{UbFaha*PCePds6~ew97*F4ZTL z?^ZP6D|r(RK90@D4#|cRKmYrhzCuS2k9#???vbDc zxbt7I69n7aM8Z}919LkY27`AT!bc?(44X9a-2QN{pW+2bqEi8}W3=yjdJ*o*9F3O_Dk;7E{=Sg961tx|Mx;|6U8 zG~ebvhfB=!%q;SqzB%5V-Z=flWzWQ`V`CnA;xYCQgnu40~ zJTG#X_mXd&nVqr_=!&#P_mV@r_b@zCJ37_d?IS*2i=!Aj_xaq!)_CbFX*Jk|2=QGm z2;N?WWI_Z@@38$%9+wxeuX?*+Q>9 z2?(wO*C#-$ZH98#QX5tql(7~>Nm(YHQMK<5`sQ8`)y<-|M~+S+Um}!ATZ}}Ui=koZ zB=b?_+FBhq5P1Yn^LP6!Gbd0)c6Rjh#uhB%fCr-a5aZdg)WH-Ue;&A_Ge%n*BE&=Y zfNVWzycu^x zc?vV_Yf{Rk;>?CN84cs7dc@L8$>~$YqDiO|q~iMMeEwV>F|)`QgTVXiceaeuE%r&j z`u$BhO*4gwbqe)gm{u$smMP3fE=jK|6+X|4KUD^k1j*#Xyeja$0oKv*^oG+sxM~_E z<3P(AkSvG1NIF1IcF=c2^rR2;_d1>)Tq-ZO>B$WsfK^$j7sF|rxN0aiNeazCQBv0U zTY9d2aH?kw8nB)o^f924(Fc*&@0_JxB1QEB7XzKGh?+Ih!s9<5mj#nXrLp0wvsrqP z5t}I64V4Rp?@KuC%a_`RY9f!>0M3({*oxW4G(qxkL|N7lASSz_zB;{W=PdMM9D>lr zyGhaJTvBY|(tlb#x%77{)_lIo=WVWbq=`~)I!opx7dPkMtxCKl;*4<0np@ae581XD zk)r!S$2Bhy^+8B#`PRPgqACN-(