@bonniernews/dn-design-system-web 0.0.1-alpha.0

package/foundations/icons/icon-sprite.svg

@@ -0,0 +1,2 @@
+<!-- This is an auto-generated file -->
+<svg style="display:block; height:0; width:0; visibility:hidden;"><defs/><symbol id="arrow_back" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825l5.6 5.6L12 20Z" fill="#1C1B1F"/></g></symbol><symbol id="check" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><path fill="#D9D9D9" d="M.241-.168h24v24h-24z"/></mask><g mask="url(#a)"><path d="m9.791 17.832-5.7-5.7 1.425-1.425 4.275 4.275 9.175-9.175 1.425 1.425-10.6 10.6Z" fill="#1C1B1F"/></g></symbol><symbol id="arrow_forward" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 20-1.425-1.4 5.6-5.6H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21.35-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 12.237 2 10.417 2 8.5c0-1.567.525-2.875 1.575-3.925C4.625 3.525 5.933 3 7.5 3a5.72 5.72 0 0 1 2.5.562c.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538A5.72 5.72 0 0 1 16.5 3c1.567 0 2.875.525 3.925 1.575C21.475 5.625 22 6.933 22 8.5c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21.35Z" fill="#1C1B1F"/></g></symbol><symbol id="favorite" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m12 21-1.45-1.3c-2.617-2.333-4.696-4.363-6.238-6.088C2.771 11.887 2 10.067 2 8.15c0-1.567.525-2.875 1.575-3.925C4.625 3.175 5.933 2.65 7.5 2.65c.883 0 1.717.187 2.5.562.783.375 1.45.888 2 1.538a5.962 5.962 0 0 1 2-1.538 5.721 5.721 0 0 1 2.5-.562c1.567 0 2.875.525 3.925 1.575C21.475 5.275 22 6.583 22 8.15c0 1.917-.77 3.737-2.312 5.462-1.542 1.725-3.621 3.755-6.238 6.088L12 21Zm0-2.7c2.383-2.167 4.313-4.033 5.788-5.6C19.263 11.133 20 9.617 20 8.15c0-1-.333-1.833-1-2.5s-1.5-1-2.5-1c-.783 0-1.508.22-2.175.662C13.658 5.754 13.2 6.317 12.95 7h-1.9c-.25-.683-.708-1.246-1.375-1.688A3.862 3.862 0 0 0 7.5 4.65c-1 0-1.833.333-2.5 1s-1 1.5-1 2.5c0 1.467.738 2.983 2.213 4.55 1.475 1.567 3.404 3.433 5.787 5.6Z" fill="#1C1B1F"/></g></symbol><symbol id="delete" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M7 21c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 5 19V6H4V4h5V3h6v1h5v2h-1v13c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 17 21H7ZM17 6H7v13h10V6ZM9 17h2V8H9v9Zm4 0h2V8h-2v9Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Z" fill="#1C1B1F"/></g></symbol><symbol id="headphones" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M9 21H5c-.55 0-1.021-.196-1.413-.587A1.928 1.928 0 0 1 3 19v-7c0-1.25.237-2.421.712-3.513a9.159 9.159 0 0 1 1.926-2.85 9.152 9.152 0 0 1 2.85-1.925A8.709 8.709 0 0 1 12 3c1.25 0 2.421.237 3.513.712a9.168 9.168 0 0 1 2.85 1.925 9.167 9.167 0 0 1 1.925 2.85A8.715 8.715 0 0 1 21 12v7c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 19 21h-4v-8h4v-1c0-1.95-.68-3.604-2.038-4.963C15.604 5.679 13.95 5 12 5c-1.95 0-3.604.679-4.962 2.037C5.679 8.396 5 10.05 5 12v1h4v8Zm-2-6H5v4h2v-4Zm10 0v4h2v-4h-2Z" fill="#1C1B1F"/></g></symbol><symbol id="home-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Z" fill="#1C1B1F"/></g></symbol><symbol id="home" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 21V9l8-6 8 6v12h-6v-7h-4v7H4Zm2-2h2v-7h8v7h2v-9l-6-4.5L6 10v9Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts-filled" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.567.142-1.088.425-1.563A2.795 2.795 0 0 1 3.6 14.55c1-.5 2.038-.883 3.113-1.15 1.075-.267 2.17-.4 3.287-.4h.338c.108 0 .212.017.312.05a7.613 7.613 0 0 0-.588 3.563A6.86 6.86 0 0 0 11.25 20H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Z" fill="#1C1B1F"/></g></symbol><symbol id="manage_accounts" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 8v-2.8c0-.55.142-1.067.425-1.55.283-.483.675-.85 1.175-1.1.85-.433 1.808-.8 2.875-1.1C7.542 13.15 8.717 13 10 13h.35c.1 0 .2.017.3.05-.133.3-.246.613-.338.938A7.82 7.82 0 0 0 10.1 15H10c-1.183 0-2.246.15-3.188.45-.941.3-1.712.6-2.312.9a.97.97 0 0 0-.5.85v.8h6.3c.1.35.233.696.4 1.038.167.341.35.662.55.962H2Zm14 1-.3-1.5c-.2-.083-.388-.17-.563-.262a4.42 4.42 0 0 1-.537-.338l-1.45.45-1-1.7 1.15-1a4.62 4.62 0 0 1-.05-.65c0-.2.017-.417.05-.65l-1.15-1 1-1.7 1.45.45a4.42 4.42 0 0 1 .537-.338c.175-.091.363-.179.563-.262L16 11h2l.3 1.5c.2.083.388.175.563.275.175.1.354.225.537.375l1.45-.5 1 1.75-1.15 1c.033.2.05.408.05.625a3.8 3.8 0 0 1-.05.625l1.15 1-1 1.7-1.45-.45a4.42 4.42 0 0 1-.537.338 7.272 7.272 0 0 1-.563.262L18 21h-2Zm1-3c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.021-.587-1.413A1.928 1.928 0 0 0 17 14c-.55 0-1.02.196-1.412.587A1.927 1.927 0 0 0 15 16c0 .55.196 1.021.588 1.413.391.391.862.587 1.412.587Zm-7-8c.55 0 1.021-.196 1.413-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.587-1.412A1.927 1.927 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.923 1.923 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z" fill="#1C1B1F"/></g></symbol><symbol id="menu" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z" fill="#1C1B1F"/></g></symbol><symbol id="notifications" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M4 19v-2h2v-7c0-1.383.417-2.613 1.25-3.688.833-1.075 1.917-1.779 3.25-2.112v-.7c0-.417.146-.77.438-1.062A1.444 1.444 0 0 1 12 2c.417 0 .77.146 1.062.438.292.291.438.645.438 1.062v.7c1.333.333 2.417 1.037 3.25 2.112C17.583 7.387 18 8.617 18 10v7h2v2H4Zm8 3c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 10 20h4c0 .55-.196 1.021-.587 1.413A1.928 1.928 0 0 1 12 22Zm-4-5h8v-7c0-1.1-.392-2.042-1.175-2.825C14.042 6.392 13.1 6 12 6s-2.042.392-2.825 1.175C8.392 7.958 8 8.9 8 10v7Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility_off" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.862-.3.292-.067.605-.1.938-.1 1.25 0 2.313.437 3.188 1.312S16.5 10.25 16.5 11.5c0 .333-.033.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.957 10.957 0 0 0 1.688-1.588A8.9 8.9 0 0 0 20.8 11.5c-.833-1.683-2.03-3.021-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85a11.106 11.106 0 0 1 2.1-.638A11.608 11.608 0 0 1 12 4c2.517 0 4.758.696 6.725 2.087C20.692 7.479 22.117 9.283 23 11.5a11.714 11.714 0 0 1-1.512 2.738A11.025 11.025 0 0 1 19.3 16.45Zm.5 6.15-4.2-4.15c-.583.183-1.17.321-1.762.413-.592.091-1.205.137-1.838.137-2.517 0-4.758-.696-6.725-2.087C3.308 15.521 1.883 13.717 1 11.5c.35-.883.792-1.704 1.325-2.463A11.522 11.522 0 0 1 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4-1.4 1.4ZM5.55 8.4c-.483.433-.925.908-1.325 1.425A9.016 9.016 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.504 10.083 17 12 17c.333 0 .658-.02.975-.062.317-.042.642-.088.975-.138l-.9-.95c-.183.05-.358.087-.525.112A3.497 3.497 0 0 1 12 16c-1.25 0-2.313-.437-3.188-1.312S7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525a4.66 4.66 0 0 1 .113-.525L5.55 8.4Z" fill="#1C1B1F"/></g></symbol><symbol id="visibility" viewBox="0 0 24 24"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><path fill="#D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path d="M12 16c1.25 0 2.313-.437 3.188-1.312S16.5 12.75 16.5 11.5c0-1.25-.437-2.313-1.312-3.188S13.25 7 12 7c-1.25 0-2.313.437-3.188 1.312S7.5 10.25 7.5 11.5c0 1.25.437 2.313 1.312 3.188S10.75 16 12 16Zm0-1.8c-.75 0-1.387-.263-1.912-.788A2.601 2.601 0 0 1 9.3 11.5c0-.75.263-1.388.788-1.913A2.603 2.603 0 0 1 12 8.8c.75 0 1.388.262 1.913.787.525.525.787 1.163.787 1.913s-.262 1.387-.787 1.912A2.605 2.605 0 0 1 12 14.2Zm0 4.8c-2.433 0-4.65-.68-6.65-2.038-2-1.358-3.45-3.179-4.35-5.462.9-2.283 2.35-4.104 4.35-5.463C7.35 4.679 9.567 4 12 4c2.433 0 4.65.679 6.65 2.037 2 1.359 3.45 3.18 4.35 5.463-.9 2.283-2.35 4.104-4.35 5.462C16.65 18.321 14.433 19 12 19Zm0-2a9.545 9.545 0 0 0 5.188-1.488A9.77 9.77 0 0 0 20.8 11.5a9.777 9.777 0 0 0-3.612-4.013A9.55 9.55 0 0 0 12 6a9.55 9.55 0 0 0-5.188 1.487A9.777 9.777 0 0 0 3.2 11.5a9.77 9.77 0 0 0 3.612 4.012A9.545 9.545 0 0 0 12 17Z" fill="#1C1B1F"/></g></symbol></svg>

package/foundations/icons/icon.njk

@@ -0,0 +1,83 @@
+{# This is an auto-generated file #}
+{% macro Icon(params) %}
+  {% if params.icon == "arrow_back" %}
+    <i class="ds-icon ds-icon--arrow_back">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1443" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1443)"><path d="M12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825L13.425 18.6L12 20Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "arrow_forward" %}
+    <i class="ds-icon ds-icon--arrow_forward">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1436" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1436)"><path d="M12 20L10.575 18.6L16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "delete" %}
+    <i class="ds-icon ds-icon--delete">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4492_1853" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4492_1853)"><path d="M7 21C6.45 21 5.97933 20.8043 5.588 20.413C5.196 20.021 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8043 20.021 18.413 20.413C18.021 20.8043 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "check" %}
+    <i class="ds-icon ds-icon--check">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4492_1867" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25"><rect x="0.241394" y="-0.168091" width="24" height="24"/></mask><g mask="url(#mask0_4492_1867)"><path d="M9.79143 17.8319L4.09143 12.1319L5.51643 10.7069L9.79143 14.9819L18.9664 5.80688L20.3914 7.23188L9.79143 17.8319Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "favorite-filled" %}
+    <i class="ds-icon ds-icon--favorite-filled">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1439" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1439)"><path d="M12 21.35L10.55 20.05C7.93333 17.7167 5.854 15.6873 4.312 13.962C2.77067 12.2373 2 10.4167 2 8.5C2 6.93333 2.525 5.625 3.575 4.575C4.625 3.525 5.93333 3 7.5 3C8.38333 3 9.21667 3.18733 10 3.562C10.7833 3.93733 11.45 4.45 12 5.1C12.55 4.45 13.2167 3.93733 14 3.562C14.7833 3.18733 15.6167 3 16.5 3C18.0667 3 19.375 3.525 20.425 4.575C21.475 5.625 22 6.93333 22 8.5C22 10.4167 21.2293 12.2373 19.688 13.962C18.146 15.6873 16.0667 17.7167 13.45 20.05L12 21.35Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "headphones-filled" %}
+    <i class="ds-icon ds-icon--headphones-filled">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1446" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1446)"><path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "favorite" %}
+    <i class="ds-icon ds-icon--favorite">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1447" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1447)"><path d="M12 21L10.55 19.7C7.93333 17.3667 5.854 15.3374 4.312 13.612C2.77067 11.8874 2 10.0667 2 8.15002C2 6.58336 2.525 5.27502 3.575 4.22502C4.625 3.17502 5.93333 2.65002 7.5 2.65002C8.38333 2.65002 9.21667 2.83736 10 3.21202C10.7833 3.58736 11.45 4.10002 12 4.75002C12.55 4.10002 13.2167 3.58736 14 3.21202C14.7833 2.83736 15.6167 2.65002 16.5 2.65002C18.0667 2.65002 19.375 3.17502 20.425 4.22502C21.475 5.27502 22 6.58336 22 8.15002C22 10.0667 21.2293 11.8874 19.688 13.612C18.146 15.3374 16.0667 17.3667 13.45 19.7L12 21ZM12 18.3C14.3833 16.1334 16.3127 14.2667 17.788 12.7C19.2627 11.1334 20 9.61669 20 8.15002C20 7.15002 19.6667 6.31669 19 5.65002C18.3333 4.98336 17.5 4.65002 16.5 4.65002C15.7167 4.65002 14.9917 4.87069 14.325 5.31202C13.6583 5.75402 13.2 6.31669 12.95 7.00002H11.05C10.8 6.31669 10.3417 5.75402 9.675 5.31202C9.00833 4.87069 8.28333 4.65002 7.5 4.65002C6.5 4.65002 5.66667 4.98336 5 5.65002C4.33333 6.31669 4 7.15002 4 8.15002C4 9.61669 4.73767 11.1334 6.213 12.7C7.68767 14.2667 9.61667 16.1334 12 18.3Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "headphones" %}
+    <i class="ds-icon ds-icon--headphones">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1438" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1438)"><path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21ZM7 15H5V19H7V15ZM17 15V19H19V15H17Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "home" %}
+    <i class="ds-icon ds-icon--home">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1448)"><path d="M4 21V9L12 3L20 9V21H14V14H10V21H4ZM6 19H8V12H16V19H18V10L12 5.5L6 10V19Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "home-filled" %}
+    <i class="ds-icon ds-icon--home-filled">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1435" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1435)"><path d="M4 21V9L12 3L20 9V21H14V14H10V21H4Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "manage_accounts-filled" %}
+    <i class="ds-icon ds-icon--manage_accounts-filled">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1441" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1441)"><path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.6333 2.14167 16.1123 2.425 15.637C2.70833 15.1623 3.1 14.8 3.6 14.55C4.6 14.05 5.63767 13.6667 6.713 13.4C7.78767 13.1333 8.88333 13 10 13C10.1167 13 10.2293 13 10.338 13C10.446 13 10.55 13.0167 10.65 13.05C10.1667 14.2 9.97067 15.3877 10.062 16.613C10.154 17.8377 10.55 18.9667 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "manage_accounts" %}
+    <i class="ds-icon ds-icon--manage_accounts">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1434" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1434)"><path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.65 2.14167 16.1333 2.425 15.65C2.70833 15.1667 3.1 14.8 3.6 14.55C4.45 14.1167 5.40833 13.75 6.475 13.45C7.54167 13.15 8.71667 13 10 13C10.1333 13 10.25 13 10.35 13C10.45 13 10.55 13.0167 10.65 13.05C10.5167 13.35 10.404 13.6627 10.312 13.988C10.2207 14.3127 10.15 14.65 10.1 15H10C8.81667 15 7.754 15.15 6.812 15.45C5.87067 15.75 5.1 16.05 4.5 16.35C4.35 16.4333 4.22933 16.55 4.138 16.7C4.046 16.85 4 17.0167 4 17.2V18H10.3C10.4 18.35 10.5333 18.696 10.7 19.038C10.8667 19.3793 11.05 19.7 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18ZM10 10C10.55 10 11.021 9.804 11.413 9.412C11.8043 9.02067 12 8.55 12 8C12 7.45 11.8043 6.97933 11.413 6.588C11.021 6.196 10.55 6 10 6C9.45 6 8.97933 6.196 8.588 6.588C8.196 6.97933 8 7.45 8 8C8 8.55 8.196 9.02067 8.588 9.412C8.97933 9.804 9.45 10 10 10Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "menu" %}
+    <i class="ds-icon ds-icon--menu">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1442" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1442)"><path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "notifications" %}
+    <i class="ds-icon ds-icon--notifications">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1445" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1445)"><path d="M4 19V17H6V10C6 8.61667 6.41667 7.38733 7.25 6.312C8.08333 5.23733 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.646 2.72933 10.938 2.438C11.2293 2.146 11.5833 2 12 2C12.4167 2 12.7707 2.146 13.062 2.438C13.354 2.72933 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.23733 16.75 6.312C17.5833 7.38733 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9793 21.8043 10.588 21.413C10.196 21.021 10 20.55 10 20H14C14 20.55 13.8043 21.021 13.413 21.413C13.021 21.8043 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "visibility_off" %}
+    <i class="ds-icon ds-icon--visibility_off">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1440" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1440)"><path d="M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.64999C13.375 8.96665 12.6 8.69999 11.65 8.84999L10.2 7.39999C10.4833 7.26665 10.7707 7.16665 11.062 7.09999C11.354 7.03332 11.6667 6.99999 12 6.99999C13.25 6.99999 14.3127 7.43732 15.188 8.31199C16.0627 9.18732 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.146 16.4 12.438C16.3333 12.7293 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.046 14.0373 19.538 13.462C20.0293 12.8873 20.45 12.2333 20.8 11.5C19.9667 9.81665 18.7707 8.47899 17.212 7.48699C15.654 6.49565 13.9167 5.99999 12 5.99999C11.5167 5.99999 11.0417 6.03332 10.575 6.09999C10.1083 6.16665 9.65 6.26665 9.2 6.39999L7.65 4.84999C8.33333 4.56665 9.03333 4.35399 9.75 4.21199C10.4667 4.07065 11.2167 3.99999 12 3.99999C14.5167 3.99999 16.7583 4.69565 18.725 6.08699C20.6917 7.47899 22.1167 9.28332 23 11.5C22.6167 12.4833 22.1127 13.396 21.488 14.238C20.8627 15.0793 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4293 18.771 13.838 18.863C13.246 18.9543 12.6333 19 12 19C9.48333 19 7.24167 18.3043 5.275 16.913C3.30833 15.521 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79565 2.325 9.03699C2.85833 8.27899 3.46667 7.59999 4.15 6.99999L1.4 4.19999L2.8 2.79999L21.2 21.2L19.8 22.6ZM5.55 8.39999C5.06667 8.83332 4.625 9.30832 4.225 9.82499C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.229 14.5207 6.787 15.512C8.34567 16.504 10.0833 17 12 17C12.3333 17 12.6583 16.9793 12.975 16.938C13.2917 16.896 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9373 12.525 15.962C12.3583 15.9873 12.1833 16 12 16C10.75 16 9.68733 15.5627 8.812 14.688C7.93733 13.8127 7.5 12.75 7.5 11.5C7.5 11.3167 7.51233 11.1417 7.537 10.975C7.56233 10.8083 7.6 10.6333 7.65 10.45L5.55 8.39999Z"/></g></svg>
+    </i>
+  {% endif %}
+  {% if params.icon == "visibility" %}
+    <i class="ds-icon ds-icon--visibility">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4407_1437" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24"/></mask><g mask="url(#mask0_4407_1437)"><path d="M12 16C13.25 16 14.3127 15.5627 15.188 14.688C16.0627 13.8127 16.5 12.75 16.5 11.5C16.5 10.25 16.0627 9.18733 15.188 8.312C14.3127 7.43733 13.25 7 12 7C10.75 7 9.68733 7.43733 8.812 8.312C7.93733 9.18733 7.5 10.25 7.5 11.5C7.5 12.75 7.93733 13.8127 8.812 14.688C9.68733 15.5627 10.75 16 12 16ZM12 14.2C11.25 14.2 10.6127 13.9373 10.088 13.412C9.56267 12.8873 9.3 12.25 9.3 11.5C9.3 10.75 9.56267 10.1123 10.088 9.587C10.6127 9.06233 11.25 8.8 12 8.8C12.75 8.8 13.3877 9.06233 13.913 9.587C14.4377 10.1123 14.7 10.75 14.7 11.5C14.7 12.25 14.4377 12.8873 13.913 13.412C13.3877 13.9373 12.75 14.2 12 14.2ZM12 19C9.56667 19 7.35 18.3207 5.35 16.962C3.35 15.604 1.9 13.7833 1 11.5C1.9 9.21667 3.35 7.39567 5.35 6.037C7.35 4.679 9.56667 4 12 4C14.4333 4 16.65 4.679 18.65 6.037C20.65 7.39567 22.1 9.21667 23 11.5C22.1 13.7833 20.65 15.604 18.65 16.962C16.65 18.3207 14.4333 19 12 19ZM12 17C13.8833 17 15.6127 16.504 17.188 15.512C18.7627 14.5207 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7627 8.479 17.188 7.487C15.6127 6.49567 13.8833 6 12 6C10.1167 6 8.38733 6.49567 6.812 7.487C5.23733 8.479 4.03333 9.81667 3.2 11.5C4.03333 13.1833 5.23733 14.5207 6.812 15.512C8.38733 16.504 10.1167 17 12 17Z"/></g></svg>
+    </i>
+  {% endif %}
+{% endmacro %}

package/foundations/icons/icon.scss

@@ -0,0 +1,5 @@
+.ds-icon {
+  svg {
+    fill: currentColor;
+  }
+}

package/foundations/icons/svg/arrow_back.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1443" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1443)">
+<path d="M12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825L13.425 18.6L12 20Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/arrow_forward.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1436" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1436)">
+<path d="M12 20L10.575 18.6L16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/check.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4492_1867" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="25" height="25">
+<rect x="0.241394" y="-0.168091" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4492_1867)">
+<path d="M9.79143 17.8319L4.09143 12.1319L5.51643 10.7069L9.79143 14.9819L18.9664 5.80688L20.3914 7.23188L9.79143 17.8319Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/delete.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4492_1853" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4492_1853)">
+<path d="M7 21C6.45 21 5.97933 20.8043 5.588 20.413C5.196 20.021 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8043 20.021 18.413 20.413C18.021 20.8043 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/favorite-filled.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1439" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1439)">
+<path d="M12 21.35L10.55 20.05C7.93333 17.7167 5.854 15.6873 4.312 13.962C2.77067 12.2373 2 10.4167 2 8.5C2 6.93333 2.525 5.625 3.575 4.575C4.625 3.525 5.93333 3 7.5 3C8.38333 3 9.21667 3.18733 10 3.562C10.7833 3.93733 11.45 4.45 12 5.1C12.55 4.45 13.2167 3.93733 14 3.562C14.7833 3.18733 15.6167 3 16.5 3C18.0667 3 19.375 3.525 20.425 4.575C21.475 5.625 22 6.93333 22 8.5C22 10.4167 21.2293 12.2373 19.688 13.962C18.146 15.6873 16.0667 17.7167 13.45 20.05L12 21.35Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/favorite.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1447" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1447)">
+<path d="M12 21L10.55 19.7C7.93333 17.3667 5.854 15.3374 4.312 13.612C2.77067 11.8874 2 10.0667 2 8.15002C2 6.58336 2.525 5.27502 3.575 4.22502C4.625 3.17502 5.93333 2.65002 7.5 2.65002C8.38333 2.65002 9.21667 2.83736 10 3.21202C10.7833 3.58736 11.45 4.10002 12 4.75002C12.55 4.10002 13.2167 3.58736 14 3.21202C14.7833 2.83736 15.6167 2.65002 16.5 2.65002C18.0667 2.65002 19.375 3.17502 20.425 4.22502C21.475 5.27502 22 6.58336 22 8.15002C22 10.0667 21.2293 11.8874 19.688 13.612C18.146 15.3374 16.0667 17.3667 13.45 19.7L12 21ZM12 18.3C14.3833 16.1334 16.3127 14.2667 17.788 12.7C19.2627 11.1334 20 9.61669 20 8.15002C20 7.15002 19.6667 6.31669 19 5.65002C18.3333 4.98336 17.5 4.65002 16.5 4.65002C15.7167 4.65002 14.9917 4.87069 14.325 5.31202C13.6583 5.75402 13.2 6.31669 12.95 7.00002H11.05C10.8 6.31669 10.3417 5.75402 9.675 5.31202C9.00833 4.87069 8.28333 4.65002 7.5 4.65002C6.5 4.65002 5.66667 4.98336 5 5.65002C4.33333 6.31669 4 7.15002 4 8.15002C4 9.61669 4.73767 11.1334 6.213 12.7C7.68767 14.2667 9.61667 16.1334 12 18.3Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/headphones-filled.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1446" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1446)">
+<path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/headphones.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1438" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1438)">
+<path d="M9 21H5C4.45 21 3.979 20.8043 3.587 20.413C3.19567 20.021 3 19.55 3 19V12C3 10.75 3.23733 9.579 3.712 8.487C4.18733 7.39567 4.82933 6.44567 5.638 5.637C6.446 4.829 7.396 4.18733 8.488 3.712C9.57933 3.23733 10.75 3 12 3C13.25 3 14.421 3.23733 15.513 3.712C16.6043 4.18733 17.5543 4.829 18.363 5.637C19.171 6.44567 19.8127 7.39567 20.288 8.487C20.7627 9.579 21 10.75 21 12V19C21 19.55 20.8043 20.021 20.413 20.413C20.021 20.8043 19.55 21 19 21H15V13H19V12C19 10.05 18.3207 8.39567 16.962 7.037C15.604 5.679 13.95 5 12 5C10.05 5 8.396 5.679 7.038 7.037C5.67933 8.39567 5 10.05 5 12V13H9V21ZM7 15H5V19H7V15ZM17 15V19H19V15H17Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/home-filled.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1435" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1435)">
+<path d="M4 21V9L12 3L20 9V21H14V14H10V21H4Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/home.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1448)">
+<path d="M4 21V9L12 3L20 9V21H14V14H10V21H4ZM6 19H8V12H16V19H18V10L12 5.5L6 10V19Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/manage_accounts-filled.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1441" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1441)">
+<path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.6333 2.14167 16.1123 2.425 15.637C2.70833 15.1623 3.1 14.8 3.6 14.55C4.6 14.05 5.63767 13.6667 6.713 13.4C7.78767 13.1333 8.88333 13 10 13C10.1167 13 10.2293 13 10.338 13C10.446 13 10.55 13.0167 10.65 13.05C10.1667 14.2 9.97067 15.3877 10.062 16.613C10.154 17.8377 10.55 18.9667 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/manage_accounts.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1434" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1434)">
+<path d="M10 12C8.9 12 7.95833 11.6083 7.175 10.825C6.39167 10.0417 6 9.1 6 8C6 6.9 6.39167 5.95833 7.175 5.175C7.95833 4.39167 8.9 4 10 4C11.1 4 12.0417 4.39167 12.825 5.175C13.6083 5.95833 14 6.9 14 8C14 9.1 13.6083 10.0417 12.825 10.825C12.0417 11.6083 11.1 12 10 12ZM2 20V17.2C2 16.65 2.14167 16.1333 2.425 15.65C2.70833 15.1667 3.1 14.8 3.6 14.55C4.45 14.1167 5.40833 13.75 6.475 13.45C7.54167 13.15 8.71667 13 10 13C10.1333 13 10.25 13 10.35 13C10.45 13 10.55 13.0167 10.65 13.05C10.5167 13.35 10.404 13.6627 10.312 13.988C10.2207 14.3127 10.15 14.65 10.1 15H10C8.81667 15 7.754 15.15 6.812 15.45C5.87067 15.75 5.1 16.05 4.5 16.35C4.35 16.4333 4.22933 16.55 4.138 16.7C4.046 16.85 4 17.0167 4 17.2V18H10.3C10.4 18.35 10.5333 18.696 10.7 19.038C10.8667 19.3793 11.05 19.7 11.25 20H2ZM16 21L15.7 19.5C15.5 19.4167 15.3123 19.3293 15.137 19.238C14.9623 19.146 14.7833 19.0333 14.6 18.9L13.15 19.35L12.15 17.65L13.3 16.65C13.2667 16.4167 13.25 16.2 13.25 16C13.25 15.8 13.2667 15.5833 13.3 15.35L12.15 14.35L13.15 12.65L14.6 13.1C14.7833 12.9667 14.9623 12.854 15.137 12.762C15.3123 12.6707 15.5 12.5833 15.7 12.5L16 11H18L18.3 12.5C18.5 12.5833 18.6877 12.675 18.863 12.775C19.0377 12.875 19.2167 13 19.4 13.15L20.85 12.65L21.85 14.4L20.7 15.4C20.7333 15.6 20.75 15.8083 20.75 16.025C20.75 16.2417 20.7333 16.45 20.7 16.65L21.85 17.65L20.85 19.35L19.4 18.9C19.2167 19.0333 19.0377 19.146 18.863 19.238C18.6877 19.3293 18.5 19.4167 18.3 19.5L18 21H16ZM17 18C17.55 18 18.021 17.8043 18.413 17.413C18.8043 17.021 19 16.55 19 16C19 15.45 18.8043 14.979 18.413 14.587C18.021 14.1957 17.55 14 17 14C16.45 14 15.9793 14.1957 15.588 14.587C15.196 14.979 15 15.45 15 16C15 16.55 15.196 17.021 15.588 17.413C15.9793 17.8043 16.45 18 17 18ZM10 10C10.55 10 11.021 9.804 11.413 9.412C11.8043 9.02067 12 8.55 12 8C12 7.45 11.8043 6.97933 11.413 6.588C11.021 6.196 10.55 6 10 6C9.45 6 8.97933 6.196 8.588 6.588C8.196 6.97933 8 7.45 8 8C8 8.55 8.196 9.02067 8.588 9.412C8.97933 9.804 9.45 10 10 10Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/menu.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1442" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1442)">
+<path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/notifications.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1445" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1445)">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.38733 7.25 6.312C8.08333 5.23733 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.646 2.72933 10.938 2.438C11.2293 2.146 11.5833 2 12 2C12.4167 2 12.7707 2.146 13.062 2.438C13.354 2.72933 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.23733 16.75 6.312C17.5833 7.38733 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9793 21.8043 10.588 21.413C10.196 21.021 10 20.55 10 20H14C14 20.55 13.8043 21.021 13.413 21.413C13.021 21.8043 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/visibility.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1437" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1437)">
+<path d="M12 16C13.25 16 14.3127 15.5627 15.188 14.688C16.0627 13.8127 16.5 12.75 16.5 11.5C16.5 10.25 16.0627 9.18733 15.188 8.312C14.3127 7.43733 13.25 7 12 7C10.75 7 9.68733 7.43733 8.812 8.312C7.93733 9.18733 7.5 10.25 7.5 11.5C7.5 12.75 7.93733 13.8127 8.812 14.688C9.68733 15.5627 10.75 16 12 16ZM12 14.2C11.25 14.2 10.6127 13.9373 10.088 13.412C9.56267 12.8873 9.3 12.25 9.3 11.5C9.3 10.75 9.56267 10.1123 10.088 9.587C10.6127 9.06233 11.25 8.8 12 8.8C12.75 8.8 13.3877 9.06233 13.913 9.587C14.4377 10.1123 14.7 10.75 14.7 11.5C14.7 12.25 14.4377 12.8873 13.913 13.412C13.3877 13.9373 12.75 14.2 12 14.2ZM12 19C9.56667 19 7.35 18.3207 5.35 16.962C3.35 15.604 1.9 13.7833 1 11.5C1.9 9.21667 3.35 7.39567 5.35 6.037C7.35 4.679 9.56667 4 12 4C14.4333 4 16.65 4.679 18.65 6.037C20.65 7.39567 22.1 9.21667 23 11.5C22.1 13.7833 20.65 15.604 18.65 16.962C16.65 18.3207 14.4333 19 12 19ZM12 17C13.8833 17 15.6127 16.504 17.188 15.512C18.7627 14.5207 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7627 8.479 17.188 7.487C15.6127 6.49567 13.8833 6 12 6C10.1167 6 8.38733 6.49567 6.812 7.487C5.23733 8.479 4.03333 9.81667 3.2 11.5C4.03333 13.1833 5.23733 14.5207 6.812 15.512C8.38733 16.504 10.1167 17 12 17Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/icons/svg/visibility_off.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_4407_1440" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_4407_1440)">
+<path d="M16.1 13.3L14.65 11.85C14.8 11.0667 14.575 10.3333 13.975 9.64999C13.375 8.96665 12.6 8.69999 11.65 8.84999L10.2 7.39999C10.4833 7.26665 10.7707 7.16665 11.062 7.09999C11.354 7.03332 11.6667 6.99999 12 6.99999C13.25 6.99999 14.3127 7.43732 15.188 8.31199C16.0627 9.18732 16.5 10.25 16.5 11.5C16.5 11.8333 16.4667 12.146 16.4 12.438C16.3333 12.7293 16.2333 13.0167 16.1 13.3ZM19.3 16.45L17.85 15.05C18.4833 14.5667 19.046 14.0373 19.538 13.462C20.0293 12.8873 20.45 12.2333 20.8 11.5C19.9667 9.81665 18.7707 8.47899 17.212 7.48699C15.654 6.49565 13.9167 5.99999 12 5.99999C11.5167 5.99999 11.0417 6.03332 10.575 6.09999C10.1083 6.16665 9.65 6.26665 9.2 6.39999L7.65 4.84999C8.33333 4.56665 9.03333 4.35399 9.75 4.21199C10.4667 4.07065 11.2167 3.99999 12 3.99999C14.5167 3.99999 16.7583 4.69565 18.725 6.08699C20.6917 7.47899 22.1167 9.28332 23 11.5C22.6167 12.4833 22.1127 13.396 21.488 14.238C20.8627 15.0793 20.1333 15.8167 19.3 16.45ZM19.8 22.6L15.6 18.45C15.0167 18.6333 14.4293 18.771 13.838 18.863C13.246 18.9543 12.6333 19 12 19C9.48333 19 7.24167 18.3043 5.275 16.913C3.30833 15.521 1.88333 13.7167 1 11.5C1.35 10.6167 1.79167 9.79565 2.325 9.03699C2.85833 8.27899 3.46667 7.59999 4.15 6.99999L1.4 4.19999L2.8 2.79999L21.2 21.2L19.8 22.6ZM5.55 8.39999C5.06667 8.83332 4.625 9.30832 4.225 9.82499C3.825 10.3417 3.48333 10.9 3.2 11.5C4.03333 13.1833 5.229 14.5207 6.787 15.512C8.34567 16.504 10.0833 17 12 17C12.3333 17 12.6583 16.9793 12.975 16.938C13.2917 16.896 13.6167 16.85 13.95 16.8L13.05 15.85C12.8667 15.9 12.6917 15.9373 12.525 15.962C12.3583 15.9873 12.1833 16 12 16C10.75 16 9.68733 15.5627 8.812 14.688C7.93733 13.8127 7.5 12.75 7.5 11.5C7.5 11.3167 7.51233 11.1417 7.537 10.975C7.56233 10.8083 7.6 10.6333 7.65 10.45L5.55 8.39999Z" fill="#1C1B1F"/>
+</g>
+</svg>

package/foundations/typography-sans.scss

@@ -0,0 +1,43 @@
+@use "./helpers/fontFamily.scss" as *;
+
+.ds-font-sans {
+  @include ds-font-sans();
+  font-weight: 400;
+
+  &--monospace {
+    font-feature-settings: "tnum";
+  }
+
+  &--thin {
+    font-weight: 300;
+  }
+  &--regular {
+    font-weight: 400;
+  }
+  &--medium {
+    font-weight: 500;
+  }
+  &--bold {
+    font-weight: 700;
+  }
+  &--black {
+    font-weight: 900;
+  }
+
+  &--12 {
+    font-size: 12px;
+    line-height: 16px;
+  }
+  &--14 {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  &--16 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  &--18 {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}

package/foundations/variables/colorsDnDark.scss

@@ -0,0 +1,66 @@
+$ds-dark-role-brand: #D43B33;
+$ds-dark-role-business: #3A8352;
+$ds-dark-role-primary: #FFF;
+$ds-dark-role-secondary: #161616;
+$ds-dark-role-critical: #DC605A;
+$ds-dark-text-primary-default: #FFF;
+$ds-dark-text-primary-soft: #C6C6C6;
+$ds-dark-text-primary-disabled: #8D8D8D;
+$ds-dark-text-brand-default: #D43B33;
+$ds-dark-text-critical-default: #DC605A;
+$ds-dark-text-critical-disabled: #8D8D8D;
+$ds-dark-text-on-primary: #161616;
+$ds-dark-text-on-brand: #FFF;
+$ds-dark-text-on-business: #FFF;
+$ds-dark-icon-primary-default: #FFF;
+$ds-dark-icon-primary-disabled: #8D8D8D;
+$ds-dark-icon-brand-default: #D43B33;
+$ds-dark-icon-brand-disabled: #8D8D8D;
+$ds-dark-icon-business-default: #3A8352;
+$ds-dark-icon-business-disabled: #8D8D8D;
+$ds-dark-icon-secondary-default: #FFF;
+$ds-dark-icon-secondary-disabled: #8D8D8D;
+$ds-dark-icon-critical-default: #DC605A;
+$ds-dark-icon-on-primary: #161616;
+$ds-dark-icon-on-brand: #FFF;
+$ds-dark-icon-on-business: #FFF;
+$ds-dark-action-primary-default: #FFF;
+$ds-dark-action-primary-hover: #F4F4F4;
+$ds-dark-action-primary-pressed: #E0E0E0;
+$ds-dark-action-primary-disabled: #393939;
+$ds-dark-action-brand-default: #D43B33;
+$ds-dark-action-brand-hover: #942924;
+$ds-dark-action-brand-pressed: #6A1E1A;
+$ds-dark-action-brand-disabled: #393939;
+$ds-dark-action-business-default: #3A8352;
+$ds-dark-action-business-hover: #36633E;
+$ds-dark-action-business-pressed: #2D5233;
+$ds-dark-action-business-disabled: #393939;
+$ds-dark-action-critical-default: #FCF3F3;
+$ds-dark-action-critical-hover: #FCF3F3;
+$ds-dark-action-critical-pressed: #FCF3F3;
+$ds-dark-action-overlay-default: rgba(255, 255, 255, 0.1);
+$ds-dark-action-overlay-hover: rgba(255, 255, 255, 0.15);
+$ds-dark-action-overlay-pressed: rgba(255, 255, 255, 0.15);
+$ds-dark-action-secondary-default: #161616;
+$ds-dark-action-secondary-hover: #262626;
+$ds-dark-action-secondary-pressed: #262626;
+$ds-dark-action-secondary-disabled: #393939;
+$ds-dark-action-transparent-default: transparent;
+$ds-dark-surface-primary-default: #FFF;
+$ds-dark-surface-primary-hover: #F4F4F4;
+$ds-dark-surface-primary-pressed: #E0E0E0;
+$ds-dark-surface-secondary-default: #161616;
+$ds-dark-surface-secondary-hover: #262626;
+$ds-dark-surface-secondary-pressed: #393939;
+$ds-dark-surface-critical-default: #461311;
+$ds-dark-surface-critical-hover: #461311;
+$ds-dark-surface-critical-pressed: #461311;
+$ds-dark-surface-brand-default: #D43B33;
+$ds-dark-border-primary-default: #525252;
+$ds-dark-border-primary-strong: #FFFFFF;
+$ds-dark-border-primary-disabled: #A8A8A8;
+$ds-dark-border-brand-default: #D43B33;
+$ds-dark-border-business-default: #3A8352;
+$ds-dark-border-secondary-default: #161616;
+$ds-dark-border-critical-default: #DC605A;

package/foundations/variables/colorsDnLight.scss

@@ -0,0 +1,66 @@
+$ds-role-brand: #D43B33;
+$ds-role-business: #3A8352;
+$ds-role-primary: #161616;
+$ds-role-secondary: #FFF;
+$ds-role-critical: #D43B33;
+$ds-text-primary-default: #161616;
+$ds-text-primary-soft: #525252;
+$ds-text-primary-disabled: #8D8D8D;
+$ds-text-brand-default: #D43B33;
+$ds-text-critical-default: #D43B33;
+$ds-text-critical-disabled: #8D8D8D;
+$ds-text-on-primary: #FFF;
+$ds-text-on-brand: #FFF;
+$ds-text-on-business: #FFF;
+$ds-icon-primary-default: #161616;
+$ds-icon-primary-disabled: #8D8D8D;
+$ds-icon-brand-default: #D43B33;
+$ds-icon-brand-disabled: #8D8D8D;
+$ds-icon-business-default: #3A8352;
+$ds-icon-business-disabled: #8D8D8D;
+$ds-icon-secondary-default: #FFF;
+$ds-icon-secondary-disabled: #8D8D8D;
+$ds-icon-critical-default: #D43B33;
+$ds-icon-on-primary: #FFF;
+$ds-icon-on-brand: #FFF;
+$ds-icon-on-business: #FFF;
+$ds-action-primary-default: #161616;
+$ds-action-primary-hover: #262626;
+$ds-action-primary-pressed: #393939;
+$ds-action-primary-disabled: #E0E0E0;
+$ds-action-brand-default: #D43B33;
+$ds-action-brand-hover: #942924;
+$ds-action-brand-pressed: #6A1E1A;
+$ds-action-brand-disabled: #E0E0E0;
+$ds-action-business-default: #3A8352;
+$ds-action-business-hover: #36633E;
+$ds-action-business-pressed: #2D5233;
+$ds-action-business-disabled: #E0E0E0;
+$ds-action-critical-default: #FCF3F3;
+$ds-action-critical-hover: #FCF3F3;
+$ds-action-critical-pressed: #FCF3F3;
+$ds-action-overlay-default: rgba(13, 13, 13, 0.1);
+$ds-action-overlay-hover: rgba(13, 13, 13, 0.15);
+$ds-action-overlay-pressed: rgba(13, 13, 13, 0.15);
+$ds-action-secondary-default: #FFF;
+$ds-action-secondary-hover: #F4F4F4;
+$ds-action-secondary-pressed: #F4F4F4;
+$ds-action-secondary-disabled: #E0E0E0;
+$ds-action-transparent-default: transparent;
+$ds-surface-primary-default: #0D0D0D;
+$ds-surface-primary-hover: #161616;
+$ds-surface-primary-pressed: #161616;
+$ds-surface-secondary-default: #FFF;
+$ds-surface-secondary-hover: #F4F4F4;
+$ds-surface-secondary-pressed: #E0E0E0;
+$ds-surface-critical-default: #FCF3F3;
+$ds-surface-critical-hover: #FCF3F3;
+$ds-surface-critical-pressed: #FCF3F3;
+$ds-surface-brand-default: #D43B33;
+$ds-border-primary-default: #A8A8A8;
+$ds-border-primary-strong: #0D0D0D;
+$ds-border-primary-disabled: #A8A8A8;
+$ds-border-brand-default: #D43B33;
+$ds-border-business-default: #3A8352;
+$ds-border-secondary-default: #FFF;
+$ds-border-critical-default: #D43B33;

package/foundations/variables/spacingComponent.scss

@@ -0,0 +1,7 @@
+$ds-spacing-component-x05: 4px;
+$ds-spacing-component-x1: 8px;
+$ds-spacing-component-x15: 12px;
+$ds-spacing-component-x2: 16px;
+$ds-spacing-component-x3: 24px;
+$ds-spacing-component-x4: 32px;
+$ds-spacing-component-x6: 48px;

package/foundations/variables/spacingLayout.scss

@@ -0,0 +1,6 @@
+$ds-spacing-layout-x2: 16px;
+$ds-spacing-layout-x3: 24px;
+$ds-spacing-layout-x4: 32px;
+$ds-spacing-layout-x6: 48px;
+$ds-spacing-layout-x8: 64px;
+$ds-spacing-layout-x12: 96px;