From 45458ea3951df2e9e32525cb1dc31724d4fa6633 Mon Sep 17 00:00:00 2001
From: Amrita Desmet <176904642+amritadesmet@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:06:54 +0000
Subject: [PATCH 1/6] Update iconography foundation pg.mdx
---
site/docs/foundations/iconography.mdx | 23 ++++++++++++++++++++++-
1 file changed, 22 insertions(+), 1 deletion(-)
diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx
index b305d4afcd3..3386e49c031 100644
--- a/site/docs/foundations/iconography.mdx
+++ b/site/docs/foundations/iconography.mdx
@@ -3,10 +3,31 @@ title: Iconography
layout: DetailTechnical
---
-Icons are visually simplified and recognizable symbols that represent a specific action, object or concept. There are two variant types: Outline and Solid. All icons within the icon set have an outline variant, but not all have a solid variant, for instance, `minimize` (a horizontal dash).
+Icons are simplified visual representations of a specific action, object or concept. Country symbols represent a specific country and are used in contexts where geographical identification is necessary.
+
+The Salt design system has:
+- 415 icons
+- 265 outline icons
+- 150 solid icons
+
+## Icon variants
+
+Icons come in two variant types: **Outline** and **Solid**. Please note that all icons within the icon set have an outline variant, but 115 don’t have a solid variant.
+
+### Solid icons
+
+Solid icons are faster to recognise than outline icons due to less visual noise, especially depending on the complexity of the icon. Solid icons better represent how we view objects, whereas outline icons are silhouettes and therefore can take longer to perceive.
+
+### Outline icons
+
+Outline icons have a lower emphasis on non-imperative items and are more recognisable when they have wider inner spacing. They’re also better to use when you need to make subtle design cues more noticeable.
## All icons
+## Country symbols
+
+Country symbols can be considered icons that are visually representative of a country or inter-governmental organisation. All flags are available in both circle and rectangle shapes.
+
:fragment{src="./fragments/feedback.mdx"}
From c75c44d14d2cdbf4903b8646e03e78b41ec30fac Mon Sep 17 00:00:00 2001
From: Amrita Desmet <176904642+amritadesmet@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:39:22 +0000
Subject: [PATCH 2/6] Update iconography.mdx
Put in existing scale components for size icon and size base
---
site/docs/foundations/iconography.mdx | 46 +++++++++++++++++++++++++++
1 file changed, 46 insertions(+)
diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx
index 3386e49c031..78abd6231af 100644
--- a/site/docs/foundations/iconography.mdx
+++ b/site/docs/foundations/iconography.mdx
@@ -26,8 +26,54 @@ Outline icons have a lower emphasis on non-imperative items and are more recogni
+## Scaling icons with size icon
+
+Icon size will vary based on use case and system requirements. Standard sizing ensures components maintain a consistent spatial relationship with surrounding elements.
+
+
+
+| Size token | Multiplier | High density (px) | Medium | Low | Touch |
+| ------------------ | ---------- | ----------------- | ------ | --- | ----- |
+| `--salt-size-icon` | x1 | 12\* | 12 | 14 | 16 |
+| | x2 | 20 | 24 | 28 | 32 |
+| | x3 | 30 | 36 | 42 | 48 |
+| | x4 | 40 | 48 | 56 | 64 |
+
+\* Icons have a minimum size set at 12px and should not be displayed any smaller. For high density this means the default size of an icon is 12px, but the rest of the scale grows based on small base dimension.
+
## Country symbols
Country symbols can be considered icons that are visually representative of a country or inter-governmental organisation. All flags are available in both circle and rectangle shapes.
+## All country symbols
+
+```jsx
+import { BE } from '@salt-ds/countries';
+```
+
+## Scaling country symbols with size base
+
+Country symbols have a default size across all four densities, changed in multiples of the base size.
+
+
+
+| Size token | Multiplier | High density (px) | Medium | Low | Touch |
+| ------------------ | ---------- | ----------------- | ------ | --- | ----- |
+| `--salt-size-base` | x1 | 20 | 28 | 36 | 44 |
+| | x2 | 40 | 56 | 72 | 88 |
+| | x3 | 60 | 84 | 108 | 132 |
+| | x4 | 80 | 112 | 144 | 176 |
+
:fragment{src="./fragments/feedback.mdx"}
From 45bcd87fd0727c0319fd97ebf5f553e0ca0ed749 Mon Sep 17 00:00:00 2001
From: Amrita Desmet <176904642+amritadesmet@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:12:31 +0000
Subject: [PATCH 3/6] Update iconography.mdx
---
site/docs/foundations/iconography.mdx | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx
index 78abd6231af..535a72446d0 100644
--- a/site/docs/foundations/iconography.mdx
+++ b/site/docs/foundations/iconography.mdx
@@ -53,9 +53,7 @@ Country symbols can be considered icons that are visually representative of a co
## All country symbols
-```jsx
-import { BE } from '@salt-ds/countries';
-```
+
## Scaling country symbols with size base
From ff23cb16e008980cbac9aecae9ffc5c281f27aab Mon Sep 17 00:00:00 2001
From: amritadesmet <176904642+amritadesmet@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:00:53 +0000
Subject: [PATCH 4/6] add-images-foundations
---
.../img/foundations/countrysymbols-variants.png | Bin 0 -> 27679 bytes
site/public/img/foundations/icon-variants.png | Bin 0 -> 17452 bytes
2 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 site/public/img/foundations/countrysymbols-variants.png
create mode 100644 site/public/img/foundations/icon-variants.png
diff --git a/site/public/img/foundations/countrysymbols-variants.png b/site/public/img/foundations/countrysymbols-variants.png
new file mode 100644
index 0000000000000000000000000000000000000000..215ef4d35c40478c72c200f00f1213f57afc25b7
GIT binary patch
literal 27679
zcmeEug;$hq_wFdKqNIwHltqJxw4^A4bVv*--Q5i;@X{#VAten%w{#EPA)N!l00Tpv
zdwAd9ch30_&RXYlEtfvCnCH3g{p`K(y|3%q1j@^bLLfNi5XjAU
zcW#4EkdB{4!9RCxB%t;X$P-@7-y32v?4Q7gH|!O~MIl84l$+qlfi?d7
zCw_zQfBp-B7`%rP{pafO+n$8~TtLVb$N&1zRaZnA-G44b{G+&T{O9UbX2IS6TtqxE
zl=;tv4<4iW&Hr2(Nc{Iv{~F`J2K=vE{NoD$jjR9UhyUNR#iKhPdkV;NurUTPY5(;$
zpf$a<)z|D~*s{ux&2zKz+E9fji{9Q(<*DfYn^^yKoc~79zlMN7{(q04|JMtabYBSM
z<3O0;SqqWyX}}-!h_prUJ$Lz#}bI;j@
zXXkvej%e!{z78&;`jBuJN278V$5rE{u}Zb|MbFEo;){G6)$?3brW+?Hk=d(J`+K#p0ExH`0P*($IxnTGp4yBOJ`
zAtdY*+Pr96^yRS+AA)}g@b}+}H9_ra(F;|%PwbWyA0M~R)tRRXA738lq!J7U^2iGF
z?6{p_zrEj+WGr}fAb-*vitRPO#;xB5@G`%~G`7vI<$kNaO4>ul`prut;4b49NCHO;uI
z^YS8g+-`6*hOYLibxF4tKw(?4E5)T_z%bm>Y#l-bFk|CyB1Xvp`1atpuy?uVf8&BGM3l6nRP&qF8$)xF&fR!kZM
zYA*J4a3{Ps)8%h}h(}5w5a0aY8^3boh~ddOoS5I+D{dk*v|;%=tC`BA5Yw_Y#$$Px
zg2sg|N?{5oF$hz2I|M^v#sRnk!oo>9bu6yy-%AX-`M1S-7IIff2!)RH7`~`&gv27@
zO}{hY)(edd+DjgXL!Dc<2E=JRIYpptSVN_MP+4+KY*BAm%sLKqmpk&y7&LU16o?=j
zVi;pbuxjYsx#D$rdERjgxh>Y!!5AA@UCU7Phe7JojPyZW=jGa;Z~Cd*`J_B&(L9WP
zF13v;e*LdVxrhuIEtt$e#U^iP`+CinJh-*fYuj_tyJoA0onE6z!_&*9Bt|1@>N~B}
zR;(0TL&2r3W>%x;*~p?Vc4L112gc{F8bklrof;&81??VSC0JjAH;)3|yl{RAI|^?)
zY`ReQ{J!RrcW*L`q&KluJS>U9`k02zs^ex(#pc6wJimUXhg?Krq})6hhZnx&2bL32
zuD3*am-F7|lwFXfv*|e63>QS3xEz*twm3JPX_=2O
zz5`48_g<;Om&o37I%>#cHejfTbh18=qo#9S59Fe8YfNFCEE+~OUew^x{dM6-kT1gI
zh
zd93;A0y#%^K)t}n-reG98*kd6guskzhY=}O8vn~Dik67835}phWiaW`TRRZ5#{E(u
z<>7rf3$>I%)fJMwXm4IW6?}VC@woK70=aq-jmJ5kR68XGaa^{w?s#_d=Un1
zKF+@k`&+*kcDBwG!W->&5c{vz$Je!)J>&RmtN9#1NjB6^ZTnBRP#1~~=SRDzg@rtlQm@iEQkv!3
zM(Q=JuioT-SDO`ZaG5NZvAdt6xw6=RkLqR8h-mFbqk}c%}mqN4A@)hEpxb$biQ0&ZeHfSlmM$cRR96lASlf|osMr(*Kwv6EVcJ8
z%8%}R5S*}&$~~Y9rrW&dFVLcBJSwyv>rF%s2=a(LI_Qfd>5Hezdr{1o+5O82;-j4nzzo*EY5Ny0Mw;#h
zd!6Oe%Zymi#n4Vzy9ulm&VUEAb2K2yH^l_wWWshI@tInfu+pI+n!
z&l?+28x{~4RM##+uBN-$zAA1psv_m0V6^=1??G>_;;wEmKV>*Z2%aDv1MnNp`}D?M
zyXN6vbsCQcD#7v&m@JMZ6<`YbrpT@?2_L5wDv=kxr8{wctHB4%^6Gv7{}Iui=e?Lk
z*CL(%{dq<3^NQ2;i~bZ*+@>?123%(ka7gdj!zH7+Zun5=0Q3ErJq)F9$sqLR@^D&S
z2&>zzCx(KAJ=*A8Ow2{mKD-8co9*`gZ_{UkI5!Nom-f6mLN=es#j*&}gFT6;_+uMQ
zNF~(GU;eV4NUnOi-C}g!XuIl$`Ent&j(gVY3~_WoSIz`)?Hno-8xt(>>>hS~BFB6i
zdEp9y82$iD=(La4991mtnC4`nSS#)Hqq4|*-71~C&v}ia1HBNwk_$Y4D
z%M@9xu24dOk)dF=ql#^Nq()sz_Nl#*zpTLFXt3_GbIRRhwU@?DU~N9-p@(vW#SKTQ
ztzkMRh!3%x6o$%^9+xMmx%iR1qgRPM*4mz|=&Id1Hcgvfw{CQdY%VUlq;7M<)hnxO
z11i>?BQ!b!o2q7!AH~DnZD9lu5jKiDkilg=b|lKmGk4i>y>QZ|{-f*i7E<)lL#{*$
zYH9-UutUF}SV}F;QH(bdOnH1l(wFJ2rWM&9cPy>e<`3Ye*6NiM?v*YHu76E-&qFQs
z9B}8{Y)f;x$fofJ#ZkWZ`JhtWcDOro=8kSY<#nvcV$YZH)*n<7Qx)=Ciz!algEF!*
z1uI-k0al|necpqp3c%#sH*ot3K&o)&_%uy6vbmdlknqtZ7oyyDlD&}5(cJdAz^>E`NbEn!lpR-f&9X~bGCTYdKrpc&
znlT0`gUZk3&J9-P(oXpGrV0JpJoy$D%dJhc~&+Uh|DW;&{kj0XnN
z<_|3!&exn?aAcpWH_(I$WzOYBV$I+(SI^gtF=qA?nDUsRnw^v};hXseO5~G5lw*2%
zP~q&)s)5vsj5LCjS}a0+1LMoOO$uiTJ8{h@Du|{DUKGuHa+A=}*EZ1MTz{g%J`14i
zG|KO$3B^ejPeXtQyFSvKMZasZZ3=&?)GIw@Q2y&~&j1nCu+`{*FM?^_nhpBedR91f
zBf{y26M=>55lGY`j{xSoLC)@SIwyRQsF`EREeR`N>@x{xOnlx^M^i~O%56qlUbs}=
zwQrU0^m+Pyp?{@z6et?gh^&*mtae8@DOh!)26X#x5wKUbN69=OvaB*Y0uN9jv{1EG
zUvasGbi(X-wb_aIddFgz9hWR;c`n8l&po_cnh_=t``}oXtt??Fm2E*ytunb|sDCRW
z`LBvl^}Cj_sw^c`+wA!xX_Z6o(hHR(K(v-`|2e;6$Mh%msoC+oPVyYdsakAF{mPRT
zs;>-{bYae+(Tt965_LoGuq$J;IH5dp{WxpM)WcSsL%&s8@KbV|>$ZQSGhvOnCvZ)Kml1PVbHiqb1r1sFL
z8$mCvM`Bw{Ns~!|16j1|&676%@%yt**g#^H()O#R`;lhUZe}&{9v}S<3opDNgVzwL
zv4B>oMvQB;7FOUkWI@3ZIy`T)PN+0h8BICai26o_3EG7Zt}0^$G@T314!=BR?2E@?
z!-W-9rhj8s>T5rO4TF+tIa9bU^Y~Hcnz)mHw;RG)h*%rFDRtxESbgEXB?aWQ9ym(0
znBz0a*bI3?g%s2xlXjC$k|kGGHdorbc?!h#1b<+4b<2)W_Npmy=X2k8_G;BP!ZTxQ
zyxjf?ayVCFnduye3P>UE)o0umor^IYKTsttD)qgmiwGiZEYDJwm|
zHKDDc6D(wYyd$z_BH)qK!P#HRnOFv`2&_h~_X%t+yGZbB=ahrOxHQ}1Mci`ZUC1FF
zAR%fMS(Yy>K9XBcwK&LCRq1EgRFraZ5510lH>ScA8(Oi^K!5i!49|=rw2@8K@~PE9
zb+oeljERGZ`Ss$60uAe{58TEJ^x-tvxC1>My;qN5f1glRPd$MvHR{|_Wr~&245sd_
zAJ0IAt^Bc72`H!F;xD11Us4fMdl`9WB2VbT&uZhuvCKbXEy2#U|BdGf+
z|NMC)F5GMzO*wU;IO&Z<_^t_^##H(JwAQ(Ixs;XcYgcVGHf+<01^5e5;0WFPpcS=2mphs1R
z+ZCZprXw!N-v=ur$7F>s)~Z@AQyU+W%}`X#nC!-0a!Pxn_;0qWJC7BAC6a9V
zo=eTgpZQ=jXlik%hKI*jzZ;t;RVH5Kpi)V!k`G`arCZSPRjHQGHL%t%j8x;hM%!lL
zxW)r<)K+o(HjF_(0o2j)$N|E%=X`Z&Ez4*|_rCanIxqdz*qaYO5AyI)6Ks*tUrApp
zZN((;ybDDo7yjVZwFc)G6JUEsA$lHl#D1+9svTR$?xgx{&J-F8oV5bV6{?i{t6yuW1qmWRSV9$+yXVXb4(TKy^o-gJE`bqO8=p2_nP%h*8Nd#
zNzoaO`HZM&zi*yzbtjt6Cv-Q2=O`FD=!@0dmM)%$WY)OMJol|^CIR`|>J{g<*5V$#
zfe9SHG^p+GSThtflhkzik>`6c{cC`&iqQKH)UW?@L9NZ=2O6C!Gt;yh1DrQcZ&w1t$vc+j)~xUJ&Y<}t
z1zD(Y6_P1G_c8sDLjK{&LAU?7Sd{Z$$S8sOxbU8ZkXy%;OlViWyJ3qLO7VAw3%}<{
z8SM>-j~Reo)9hX|nq@z^En%DW?Wbddm@bF+zTdZ@NKXC7j3t6&8ztO9RU>)0q!>~;
zH%~Sw!BkDjJ-3yhg5MiBwgZxS6j2hy8Ss=-gX`&?O_^tB{w;sjd46^KnlA_d1%ZZ2WV1bE
z&A92fDxHCuO>^=PsqzYytu{H^fPUoHkH_h*YrrYCsjq(5JhB)ZQ9iGN#rn0@Jzi2$
zGpsf1&aRZ|*~~MhhLg7)*wR6U8@%id%ufD%(+g^yE0~i1YVn)ki~$DD;mcS!{7c-IQ3&8Xb=ICV~?)e~guIKbY)LLKe=clz!Z`
z1@aA_vY<%LU>39Y`DWw`YS>RFc>kJ$jfVluV(PhIA?0Wo<+zonzHHxxP(_dYUGQcV
zfX|kvoOClUqGzaa#1c&0k{@R}Q=x}A7NdpHguV_Qb|H!m91V^0b;*wMH#LC$dMw~@
zEo~D8jz`vRS^{cY_YC%G*SZe>1dBIBCHTh~7uK5S_UbHbZ#T?L#VnU_LqsZE{BMXb
zA|_#M9)Ijn{uwgmX7BC|&m3Rn^e@s_qwPK&EIkZ%(yYomvNNtSbp$~vBn#58$W;CD
zxDGz1PkU&Z@nxFe&2eRXI@@{Ovz&k$ZQ0~u4dkuRN4vJRLMr&6+P)>^Wej~$XN<*SLPnVeI|1y8!lUE!c!2s
zgaD?$1)d7&(KA`AYcV&zG-H@fAW6~Z|7&VyjT%9CWp#4+^4a07*E~bueYsUI%I&3fy2ykOoD$qaZ|SVa_EZKUuTkPLz-UKvRJlqc2apT;0hxF9r){wN_k-VL5XTBYu22Yj(|!;)1n
zeQImR3R9CC7bUIPnjNalbQ{$cP!_|^&E*A}*U
zY2m(GQG#ktFFBf0Z5fCSXhBv;ou72CYvVfjF6Vw)Z-F<1GseE{Ag#RGTac4L#_Mz0b^PXbL`;=xyciHTgUl-0)h`{)=C+WnUwEtt0P=^)^;x!u8$&kxb!+~6-iuXRH1xj4
z9%qAwHU)6sMu?ng^c&e*|%@K29)iNvOE0z4Y>U@d#Gtrmf;$
zzn?0+;44u^V8uacAtSC*R)211YmC6|ps?~R)n
zc&qbm@+~$v9tF3|?%~c`xdt*TP0!0fk%~LlPufeh#=%-2z%}+TaQrQ^px*QsoTT<~-sf(yiOnL8>b=T&Zv=6&39?uBhFN;`#
z7Cy|3WO>hIv_LQKaLBh8*RrP)(odtCtXwMo@Dw_`Pjy
zr6=YhVplr_Y?|!r*^nn~*jBTe!ccVsU5>)-x32A*2^{lR=DNSv`88B!++@Gju>KVV
zm8}cSpI`pV=NA5=#T2LPZL93kK5}~U!(lWdcv*DT^EK-L#;#7^Ol{ZGe+1`xxM7YX{GVwk^JR4~(RPrKWP|<%=8$T2f2}^LIfHiKbuolL$uTS76aBwi|%XS2I
zHxn6Tv7gPHcZH!Lco4|&1PvtZ6QF9oE-pUH@eo4j=_^joo+KmE?*t_@=o&1@yPOgV
zkuo%q$#;BSqOFjMS=2wD-#2bcRqn_zV*dVWJt)f>MFubmkr}I|i{qE(<3HhnBQLl+
zT8#Rxj!8IaWffpN=WAV~CFdJaA~m$GDzjan${P?pZ!Df@^gicfw`S2-fDwOCskPXj
zI{MBGflL8rAx+*kVQrBTG=^k77#eg{8*mOgtior%mXD%0qI9TH{mGr)9Z2G)t4`9|
zrK2vhn;1jQZ6=r(<0IFSYki;R>*)({lBYJUVd#n-)~mHHQ{DF)xYyssuh?tyQaakZ
z+INgpbEzT$eI7sP^ByvhaETWS!+!`w8|&JG{@OpdxJgO@*4gH`fjOC@RO_wRlrxIl
zbU7H!Ivg=L#b93b<@vOEvEV8a8k!_B84LKP9+ev(vFm~~
zPNFiS&^7xv_>;?gBBkt70M6*FFzzQKCR6a1E$8W8VrdCE&32wBAQ~U*U@Y)dcGN=C
zTl<{?$NevVC+>YfeJ#wO3#=v(l%2|??6Fx8P??<7MBg+>g1GG;Ib(;R%3)=S3<13R!^_P)w6JvytaUmG)12B6BnQ+0wt46XQlGOD^
zZTA-`{{7)QcLp~SKyepD6r8{gXVM6)Ex_0k;^PLW`Ko?P%NN;0NbQc);N^Zonx
zTZV=Q%4-=$Pf57Fmpl587AhoyFm$%GN>c7r^`$`Rr-2>$a!!sq!{8owwZx_KRPRG^
zUyta9Yl7~?eV5f`I~-7sBKyDtyJT4Ms07^(qu>*A6>!$Zk{Zz3KEXGv5sHE@wzkUb
zVa-`tOEPy%EBj>_{Wz&3QNE@TA&>C^8e%yDXVcI;UtIgxn?PGF6eY*P6z)i~VI*eg
ztqi)%r9G&@H5;BriFuM3ODq7V}EgjVtQqQw|#!9=f*
zYtW*8G{_)N|0U@&7eR8ce67skwl}N?Yufmpg%nl4Z8@%she0x6Mx??YxaBlb-DwLJ
zqO9+}T!WJ8c&i$M8~j7sLRQm3E&ZY+Aupc6&GF=%k3$1p8<65wnpMo)YDV8<>Qar$
zHm5Uet_NX9NQ1-#B8ZL%f7kUC3gAvX>{lMYlAuSHoMH(JEp$mI0yWX+Pqk@Gi~#wk
zi%8%~pRmX^v~?xs&QCG^mt$oh1!v`}Dt&n4pPgX$&WnVM-q2psWWn9k&fhDTc3U*6
ze-Q(?>6(}mKhWPC+e}~=@U)rPjR*)x=~-VlFvXM@0v4CQ2!NM@g9K3+%tmIPXQZe5
z>sDtVL9n%#fw-sQLY>*v!n-V(nt;|zRo%!nH``hx2XR@~@qt*Bst`QLub)2Eopoh#
zt$zmWXqEjQ;q2KE0=xop;*Vl*?*)$xSTuRy*s|};q%qsU;G(4O(jFbjE-FYw0
zz3->p@r0=-P6MVunFn+}=j&9)qlCN*RbGa1!tWXF#Sk^Sk+%w2sM*ef1Imkw487U0
zq}v#MOI^5kk6ht=y6e=~kNK2eX(7iotnnK%#}LYq%7-yU<(l6|%Wm{-vwzS-qnB?0mM7_4Nu_^yAoV&miW{WCN6Uf
z2^v?B9>4b*;IhqpvQr*jqX|pIUrry^B#>)8#TXf=7%qkja;F%yQwe9QPouVBpJew6
zYqA}?9s0Guo8Pcqgr@f#uoOGDV)$6A3=lBcLRI_UvQw=|rb&oxxcw!7bAa%ydN|s6
z>P+B=$^J^BGsIHCxM_?{2DL`TT^v4|^7|PMu$!(idDPd8SCZOjh!U5$xzne*uJvue
zy$bDLVk*TKjh97t2~Bx|yp0ci5yW5UYSC26RQj3+w|---psI73c*b6+b>0oiB6M*l61rtn3<-{n+~F+p~1l6>3Pe8z$
zk4oPJ?=DRVLmPHpAUm*T#DsKo8aE1v0?L6XCJNUITABi8*Ax_J`SId808bMDAb-%^(62z2xPj-dYoV5
za(czbo7f{+4
z!~JW{WFj5INPL}BFV70Kx|mggZVnkFe_RiR^$#_dy_L$mf0#seKsyKU$nx`)=g*z9
z3F&B6q3egKt*m&ig5kgRG*MpgR`B3K0j!`K00pv0=fJx
zy;Y5|#>Mg0yJ!r9hUCl>K~_`$kCoHJN-F5<32-RnNKNF$Zx4Nv9VV(lfc&QF
ztj4Uoxwl=tB+AH=V_K>8ilZYqO)3E;&)4>u?YWBcV#G{d3-$~^+e1Nx^>gN6r6?kx
z`X(czujAY1c+FI`(T9`AF@XBAIW$3$aI4}~Y70q!o(4oS|9(w%cEQ{r_k1`>pJnlL
z_1lOjX^Jn?9UrKZzg8;aV+11%@9CAe`0wYKy$4I?s}ZtQifEl~(8ru!ma%dZ7Ds<<
zm!BY#@u$W*uv1LWnvcuc#{@iPWiMkXhr{AcpUzt$s3*CBSmN3XB<3)Lz(K^tmC!>
zAcZhNMB(p^cbep*)#^1{H;nbwDB8DSl~UvULkX>|;-Xavxe|g3U^U5uPQQ}23S$#Y
z@D-WgSpHCXJCo;+$(SqFS0Q3g2+dyz^KIv&7uPzzOb-DR`O*Io2s{Z4XXdN_(4{aYA`S`$jnzw
z=NYjA>xdq#3>tZgO&Ts3n3kMYslc3WN!)4))^UJ2BPm^amm(@o1RM|5SD9$6s6GD(
zm^o2xTE%L+nQm|)D1lLW06QuhOj(>eh2aDWDJP4Tt}_%E1QN-swD5dlz34&ETEaa>9kSSo;G6s(ui0iLdbR4$sqSVY9%vvv~FvlUTrG9k-Cgp${
z<4=d_y1zgHh~)&Y#=L;UPNw)Gjk$*WQob=vPwv)k0BEd)jppMZ)JNtkiu{6_({EH%
z;DuqBTVf)M!yAytG$2=J(vff>)qI6i)HJSOIJcALoIE#X|45)>xd1p$5lTGW@$~SW
zd0fxR{qFh4xr4J-#lUS=4~KGh_(rUm|MhzL0Vog)&8=dT>P)bV&!waRV!
zgp1Xi`Lxw2xHP`KLv0-^Z084qH`nA5HaS7*8fX>|O
zASi43(shi0C)^nW%(`-^){VqlY5S$Lg9r8#Sg?V*C-?iQ{eq@g%JDxRsUk46eHB3F
zA9J}Dh=i}U4@IuO&sS{bQ#hdvt)L6sb;!icF$YQv1`KPyG3YdvvGrGFETxWEl;JfK
zs!?&RUhr70xam3OhYJobCMv6xjo+>qq!#C+;L33C3*0$|UT~1SrridAj}Y
z)$p}TWC538N^v=k_E1SH7P4+B{`t@IwVd12nkxfBC^s9+jPR&o1ZEUm{*}tLdwsOGYoev;fK874K(u}!_^*^kr1+0DYg~#EUu{#q;&2qDdpeBYS5jpch&9wPMe+x
zPLEwp;1iMr7S@-)!b(0_arMlUswGSSTZDoDalnWP|Yk%r$xk!;nEEr53KC11BMB5%ceUx=E}l$4fw
zQdWtjzw?|J;&Y5~rXXvttEs`CnWG#{mrg2i!YDO9j+lr1TBha4Wwb|9Pj4s9n7uJ(
z;kWWUj$Wo|O89Wf&KOJAJ9ezS5SD_tN&NhHFJ9-T#5yXL2YK%eIPM8=
z+G~Uxd$KdhL`SGH@z~Bt==hYM^NF9a
z%EUA%J#xXuj-{hJ|7`1}Y4M&gS*67s@$^yQ5pydzm;40UA~=hvf&d!&J4!fw(O7fr
z0oI^w^d`D(jDu#{<|?y@u$|BD9TaAze|bTdKy_K5+a6s&n1WZIXeasp?B=|mH=hYdCh=;$M*
zBe5VN#$w6zNww^4dq;$`sgtMIacC34S=HgK9?Rb$Q;P-R#rRR3IV$+$3pf_^F%P+Z
zxYQNOxwd1_)Kh+-RUa$@tTvQQe139?=?}{V6oHD9R^VWoIWkol6(~E)D!E#l!CFNH
zKf72A1e$NVL)y;ZAp&zbi@E*IU%Y{wM&1~9uv`{2A0O)KT8TGoJ>l3^^;LtPmyw;`
z0Vj3RD#S%_xu(;?lB*oHTRnSygj(ciV^WRt)i^Z)O~7vv(coHiRuwIZuH!U{53*l-uc`wo<8Ui`#yHRb9
z`7tRj3%ZDXF6z-R4M)oH+YpoRiv)=DG?B0?tpgJyuTZKev`ots;8Y+bGYtHqf$A%R
z(FJsLq)?czCEim$<+7WM->#LfA18ioBIL#_9^!^=^AIboe1PS;F1b5R9i@{sxr|Dc
z8{UT%@IEOU0tDXe1PzX@%AkM>!z>^#K}th>KFpLks>X#p#R-FwP=M?$ACl_jE|uoe
z-!d(6qqK(C(V-l;{WD;Hd97sGF^iAyezEuJ=~rpd98~RWL}56OARcs@(?g`ltu`fE
zC2@-O8PjMxW{5~HC`03-Fq(SPziC@By0S_1Z2l8-*M}6>eY+EVBv-F)K}I^!a!yeD
z_>eBbB^Ater9B#EFn?eA+vP|`LzMb}fqM;#!4_pPjmx5*RmC+^R>hiKQ+=~xb3KvL
z3CLsl;5Q+0QS|hsH$BT6unGJ?-^4f4VwBR}A%MXp=C&isj2J_RMQ|*DnQ(pu3Y)*O
z#ehL(yu6ln=7SWL9>3%Ja1&igD3A;QQE)157ti@Ch?rgsAgmk&=BXA1`0o^8fr$_Z
zC(v&;XG%NWLYqKIxPuwE>HPYwYJ^sd0g6lJrR$u=Tbj$K0t%ew82t`h^Jl)S0JY@;
z+#nbwiO6QbO%!`bp|6YdFBYIIOUs>_BS|cPRy*dyDUfhI1!QY%JXt*19*`!&sW2`P
zXnX@A-2>)fM5oIbEJ&ah02$m#*?#LafAWhEtDT$;!^G49YRdN>h626Y^!^hrcu|6_
zO2z>!27om#n{?@2v($3*?CP|Ow<;41Tc>s1EcOQMT9i)pkC5~8Dx5S%z
z5_S!NIV{B%Po4qoiX$jQ94varNkwDy829_ig9K^2>X(j8X$RvZSoj-KL^mT3C@#-P
zvD!@>aWaXP3jsImVHQ2M4<4<2fT@HmsPIi0q~=&F7M>+1`r)|LDR20h(2u}ajh67=
z1y;ne*{V@MKHUWL*kEbH8KECbyHdVs6vg&}IcTO$_R*P!u0adI2d__-jc=X?x3@as
z#5GV)Rz4bkKcU6Wa2?YDzVMnpvXt(}%LM@`EPBU|6DwWDU!)qUDpN#buQv
zv@XJlz^ro?u4@VL*>}AS5$Oc{sqj~p{!|W*Ov7JEQ|TtA+Np-Ye^oYoI`Ny+HArU
zP%Bft(PYVoOFK2uJT~xft7lc);lz&=>vWUTXQ#cnGLrEx`pexdBq*04t1+iIhkP9L
z=LzdN)HpQLe{{C2=@k#R{-}6))l;i3lxJlD$Yo$h1eIuC&K8l%%UCvI(J(<^?p*83
z5L5-jL`**@lr}_?@=npdJ9Or<<=iIL2xA@35mXD%1da+fF8dm{cy6nXi_VvRiSert
zc0Z_5eS05h&^lAz-@}@g8~r>Tkn&okudd3e0VB~0b@lwNEWwXb`!4o}^oUKd_1;XJVm)bd=6sqrKT_;tI)sG{dCrv^%BRR9HD?^}|I2QQ-Na_bME8
zo}ctuv8G~f0cGo@LtWgNmQwH460#MXw&delj@s3w$FuG%VzCtTOy(VLrzv*NbuZ9u
z+a$&CoFcNb-|J=V+}nqr0Ri8at3~kjhp$6hy*2dhF=>D(r`PPy6O{KMjVe#~)10
zF*pUxqkCaX2wNkB8>kw}+KneTn&P5moj$cyjTgVRJsVvZ*Y2HEhhGwm!$7_1Zixli
zkip~#1Mv>I%uZY$&@{jE(7P%Mw|>M^uBCwM6U-zP%EOq(o-5Nfyas?c&)GrlA}7W1
z9WU|YUBdDgphU~CuV0`w>^nVz%M^W@3_`>CsSS$iZGJI&3%yR0?nx566$SO1DE#}1
zWk8eDv#;~)B(A!U#BQQD@kdXRGIJv)Acq!xEmBDdURVj$*dIPYwE6SX(4at%^-C|O
zx<7TMp5-;rDLqV`xm-jLhP!_{Yselx3W*m#Yw;B_>{p@cT?kwC{*Y3U_5`<2@w>4Y
zbHc2+ehL@b=Abk@0EaIrY4z8U%5&&u(BS#L#dhGA8Twehd^L|-5R+)oOjEgfUcp6U
z5~7_uKx@`M$nBrx4ODnJUz5aA-dl4srhx_?^p2GqW3nr)2K|ABwKlq*d4|-6ecfiX
zX#$l?h|37S6WCsXpwOB^M^eEF+^(IMO`6tl0F)}Ygkk%(aq_geZ4WTu9=Y3upOkdF=
zz*a~t8y1eg+%UjSZX4I0&^!N4irl{J`;2LQfdi0Wjp~rzglv#p+3;arUl!vbgc`
z*=^Fj%adf*TV(rpJ@ELfi*8Ye-o|C&;jR+`48cU4SpWNdb0M4M2F$nt-zHM5*y$-v
zD;q<)%=7uwrRnstfbhb<>E|#*C7SWKpY>-el0apH^3}pFw29=fE$K)KiZ1n%T59UNUU6%uW~lOi
z3;*V+GFP><#n$nYB0x4?RDpJX{|O1K%BX(HeHp7WXhA1WkXvQSUnV@@$T>{Mg31eh
zgZ
z)AR%36U&Z46UK9J__ZXPrz-
zu)qK}pqy1@-+thBZY(r(#e-*A%~;Rv=KY3U!iV@h|?+YCP^guxB})l
z<>PfXt>0Did);VF+bU#&zDQ8gyyAntiF=1eUK83cu)W3T%EG)@y>!v#H#DooX#RRk
zqoecSL~op&SUot(xCBrrgZX7ZU1iJP(LS*dJ#D`T1dBN;#4ua^_1?4AI$G2>%
zMFBR1!8ZxVMF;BJiJDA-O1yp0DW6M1@RvjXaa+q8T4sy^NlYcw(b;~2L{WD+soSaR
zebc%2e0OLpm;Q0=vHhZ&G}9KJe!Y+>jTM~fS(b;D;$v2ilA6
ziTqD9`
RJZ4
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
Date: Thu, 7 Nov 2024 10:41:08 +0000
Subject: [PATCH 5/6] docs:update iconograpy images
---
site/docs/foundations/iconography.mdx | 10 ++++++++++
...s.png => iconography-countrysymbols-variant.png} | Bin
...n-variants.png => iconography-icon-variants.png} | Bin
3 files changed, 10 insertions(+)
rename site/public/img/foundations/{countrysymbols-variants.png => iconography-countrysymbols-variant.png} (100%)
rename site/public/img/foundations/{icon-variants.png => iconography-icon-variants.png} (100%)
diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx
index 535a72446d0..229f3ba0f3a 100644
--- a/site/docs/foundations/iconography.mdx
+++ b/site/docs/foundations/iconography.mdx
@@ -22,6 +22,11 @@ Solid icons are faster to recognise than outline icons due to less visual noise,
Outline icons have a lower emphasis on non-imperative items and are more recognisable when they have wider inner spacing. They’re also better to use when you need to make subtle design cues more noticeable.
+
+
## All icons
@@ -51,6 +56,11 @@ Icon size will vary based on use case and system requirements. Standard sizing e
Country symbols can be considered icons that are visually representative of a country or inter-governmental organisation. All flags are available in both circle and rectangle shapes.
+
+
## All country symbols
diff --git a/site/public/img/foundations/countrysymbols-variants.png b/site/public/img/foundations/iconography-countrysymbols-variant.png
similarity index 100%
rename from site/public/img/foundations/countrysymbols-variants.png
rename to site/public/img/foundations/iconography-countrysymbols-variant.png
diff --git a/site/public/img/foundations/icon-variants.png b/site/public/img/foundations/iconography-icon-variants.png
similarity index 100%
rename from site/public/img/foundations/icon-variants.png
rename to site/public/img/foundations/iconography-icon-variants.png
From a811b8de7d823d54ec22adb8bcff50986473f145 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Thu, 7 Nov 2024 13:12:32 +0000
Subject: [PATCH 6/6] Fix lint. Update country symbol preview.
---
site/docs/foundations/iconography.mdx | 19 +++---
.../CountrySymbolPreview.tsx | 63 +++++++++++++++++++
.../country-symbol-preview/index.ts | 1 +
site/src/components/index.ts | 1 +
4 files changed, 75 insertions(+), 9 deletions(-)
create mode 100644 site/src/components/country-symbol-preview/CountrySymbolPreview.tsx
create mode 100644 site/src/components/country-symbol-preview/index.ts
diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx
index 229f3ba0f3a..8285077bc28 100644
--- a/site/docs/foundations/iconography.mdx
+++ b/site/docs/foundations/iconography.mdx
@@ -3,24 +3,25 @@ title: Iconography
layout: DetailTechnical
---
-Icons are simplified visual representations of a specific action, object or concept. Country symbols represent a specific country and are used in contexts where geographical identification is necessary.
+Icons are simplified visual representations of a specific action, object or concept. Country symbols represent a specific country and are used in contexts where geographical identification is necessary.
The Salt design system has:
-- 415 icons
-- 265 outline icons
+
+- 415 icons
+- 265 outline icons
- 150 solid icons
## Icon variants
-Icons come in two variant types: **Outline** and **Solid**. Please note that all icons within the icon set have an outline variant, but 115 don’t have a solid variant.
+Icons come in two variant types: **Outline** and **Solid**. Please note that all icons within the icon set have an outline variant, but 115 don’t have a solid variant.
### Solid icons
-Solid icons are faster to recognise than outline icons due to less visual noise, especially depending on the complexity of the icon. Solid icons better represent how we view objects, whereas outline icons are silhouettes and therefore can take longer to perceive.
+Solid icons are faster to recognise than outline icons due to less visual noise, especially depending on the complexity of the icon. Solid icons better represent how we view objects, whereas outline icons are silhouettes and therefore can take longer to perceive.
### Outline icons
-Outline icons have a lower emphasis on non-imperative items and are more recognisable when they have wider inner spacing. They’re also better to use when you need to make subtle design cues more noticeable.
+Outline icons have a lower emphasis on non-imperative items and are more recognisable when they have wider inner spacing. They’re also better to use when you need to make subtle design cues more noticeable.
-## All country symbols
+## All country symbols
-
+
## Scaling country symbols with size base
-Country symbols have a default size across all four densities, changed in multiples of the base size.
+Country symbols have a default size across all four densities, changed in multiples of the base size.
{
+ const [inputText, setInputText] = useState("");
+
+ return (
+
+
+
+ Search country symbols
+ {
+ setInputText(event.target.value);
+ },
+ }}
+ />
+
+