@kth/style 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/assets/fonts.css +2 -2
  2. package/package.json +3 -2
  3. package/scss/components/alert.scss +55 -0
  4. package/scss/components/button.scss +10 -13
  5. package/scss/components/description-list.scss +30 -0
  6. package/scss/components/details.scss +1 -2
  7. package/scss/components/menu-item.scss +5 -1
  8. package/scss/components/menu-panel.scss +8 -0
  9. package/scss/components/search.scss +4 -5
  10. package/scss/tokens/icons-raw.scss +24 -0
  11. package/scss/tokens/icons.scss +27 -45
  12. package/scss/tokens/typography.scss +108 -28
  13. package/scss/utils/prose.scss +7 -6
  14. package/scss/utils/reset.scss +2 -2
  15. /package/assets/{figtree-italic[wght].woff2 → figtree-italic.woff2} +0 -0
  16. /package/assets/{figtree[wght].woff2 → figtree.woff2} +0 -0
package/assets/fonts.css CHANGED
@@ -1,13 +1,13 @@
1
1
  @font-face {
2
2
  font-family: Figtree;
3
- src: url("figtree[wght].woff2") format("woff2-variations");
3
+ src: url("figtree.woff2") format("woff2-variations");
4
4
  font-weight: 100 900;
5
5
  font-style: normal;
6
6
  }
7
7
 
8
8
  @font-face {
9
9
  font-family: Figtree;
10
- src: url("figtree-italic[wght].woff2") format("woff2-variations");
10
+ src: url("figtree-italic.woff2") format("woff2-variations");
11
11
  font-weight: 100 900;
12
12
  font-style: italic;
13
13
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kth/style",
3
- "version": "0.3.0",
3
+ "version": "0.5.0",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {
@@ -42,11 +42,12 @@
42
42
  "react": "^18.2.0",
43
43
  "react-dom": "^18.2.0",
44
44
  "rollup": "^3.21.4",
45
+ "svgo": "^3.0.2",
45
46
  "typescript": "^5.0.2",
46
47
  "vite": "^4.3.0"
47
48
  },
48
49
  "peerDependencies": {
49
50
  "react": "*"
50
51
  },
51
- "gitHead": "22910d9bc7994e3704105c0f2ab3ca45a422d960"
52
+ "gitHead": "bd4ad4e23abb131c4583fab73f02e4c22191a849"
52
53
  }
package/scss/components/alert.scss ADDED
@@ -0,0 +1,55 @@
1
+ @use "../tokens/spacing.scss";
2
+ @use "../tokens/icons.scss";
3
+ @use "../tokens/typography.scss";
4
+
5
+ $border-inline: spacing.$space-2;
6
+ $padding-inline: calc(spacing.$space-12 - $border-inline);
7
+
8
+ @layer kth-style {
9
+ .kth-alert {
10
+ display: grid;
11
+ gap: spacing.$space-4 spacing.$space-8;
12
+ grid-template-columns: auto 1fr;
13
+ padding-inline: $padding-inline;
14
+ padding-block-start: spacing.$space-8;
15
+ padding-block-end: spacing.$space-16;
16
+
17
+ border-block-start-width: spacing.$space-6;
18
+ border-inline-width: $border-inline;
19
+ border-block-end-width: $border-inline;
20
+ border-style: solid;
21
+ border-color: var(--color-text);
22
+
23
+ &.info {
24
+ border-color: var(--color-primary);
25
+ }
26
+
27
+ &.info::before {
28
+ @include icons.icon-info-500;
29
+ background-color: var(--color-text);
30
+ grid-column-start: 1;
31
+ align-self: center;
32
+ }
33
+
34
+ > * {
35
+ grid-column-start: 2;
36
+ }
37
+
38
+ > :is(h2, h3, h4) {
39
+ @include typography.font-default;
40
+ font-weight: 600;
41
+ }
42
+
43
+ p {
44
+ margin-block: spacing.$space-8;
45
+ }
46
+
47
+ p:first-child {
48
+ margin-block-start: 0;
49
+ }
50
+
51
+ p:last-child {
52
+ margin-block-end: 0;
53
+ }
54
+ }
55
+ }
package/scss/components/button.scss CHANGED
@@ -1,27 +1,24 @@
1
1
  @use "../tokens/spacing";
2
2
  @use "../tokens/icons";
3
3
 
4
+ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
5
+
4
6
  @layer kth-style {
7
+ // Buttons with only icon:
5
8
  .kth-button.close {
6
9
  display: flex;
7
- margin-inline-start: auto;
8
10
  background: transparent;
9
11
  border: none;
10
- padding-inline: spacing.$space-8;
11
- padding-block: spacing.$space-8;
12
+ padding: var(--space-inner-icon);
13
+ width: $icon-size;
14
+ height: $icon-size;
12
15
  border-radius: 100%;
13
16
  }
14
17
 
15
18
  .kth-button.close::before {
16
- content: "";
17
- display: inline-block;
18
- width: 1.5rem;
19
- height: 1.5rem;
20
- background-color: var(--color-primary);
21
-
22
- mask-image: icons.$icon-url-close;
23
- -webkit-mask-image: icons.$icon-url-close;
24
- mask-size: cover;
25
- -webkit-mask-size: cover;
19
+ @include icons.icon-close;
20
+ width: 100%;
21
+ height: 100%;
22
+ background-color: var(--color-secondary);
26
23
  }
27
24
  }
package/scss/components/description-list.scss ADDED
@@ -0,0 +1,30 @@
1
+ @use "../tokens/spacing.scss" as s;
2
+
3
+ @layer kth-style {
4
+ .kth-description-list {
5
+ display: grid;
6
+ gap: 0 s.$space-16;
7
+ grid-template-columns: minmax(15rem, 1fr) 2fr;
8
+
9
+ @container (max-width: 30rem) {
10
+ grid-template-columns: 1fr;
11
+ }
12
+
13
+ > div:nth-child(n + 2) {
14
+ grid-column: 1 / -1;
15
+ display: grid;
16
+ grid-template-columns: subgrid;
17
+ padding-block: s.$space-8;
18
+ border-block-start: 1px solid gray;
19
+ }
20
+
21
+ dt {
22
+ font-weight: 600;
23
+ grid-column: 1 / 2;
24
+ }
25
+
26
+ dd {
27
+ grid-column: -2 / -1;
28
+ }
29
+ }
30
+ }
package/scss/components/details.scss CHANGED
@@ -13,7 +13,6 @@ $border-width: spacing.$space-4;
13
13
  color: var(--color-tertiary);
14
14
  padding-block: var(--space-inner-block);
15
15
  cursor: pointer;
16
- // padding-inline-start: spacing.$space-20;
17
16
  list-style: none;
18
17
  font: inherit;
19
18
  display: grid;
@@ -31,7 +30,7 @@ $border-width: spacing.$space-4;
31
30
  }
32
31
 
33
32
  &[open] summary::before {
34
- rotate: 0deg;
33
+ rotate: 90deg;
35
34
  }
36
35
 
37
36
  > div {
package/scss/components/menu-item.scss CHANGED
@@ -33,7 +33,11 @@
33
33
  background-color: var(--color-primary);
34
34
  }
35
35
  &.language::before {
36
- @include icons.icon-globe;
36
+ @include icons.icon-language;
37
+ background-color: var(--color-primary);
38
+ }
39
+ &.menu::before {
40
+ @include icons.icon-menu;
37
41
  background-color: var(--color-primary);
38
42
  }
39
43
  }
package/scss/components/menu-panel.scss CHANGED
@@ -15,6 +15,10 @@
15
15
  &__container {
16
16
  @include mixins.container;
17
17
  }
18
+
19
+ .kth-button.close {
20
+ margin-inline-start: auto;
21
+ }
18
22
  }
19
23
 
20
24
  .kth-menu-panel--modal {
@@ -28,5 +32,9 @@
28
32
  width: 100dvw;
29
33
  height: 100dvh;
30
34
  border: 0;
35
+
36
+ .kth-button.close {
37
+ margin-inline-start: auto;
38
+ }
31
39
  }
32
40
  }
package/scss/components/search.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:math";
2
2
  @use "../tokens/spacing.scss";
3
3
  @use "../tokens/icons.scss";
4
+ @use "../tokens/typography.scss";
4
5
 
5
6
  $secondary-border-width: math.div(1rem, 16);
6
7
 
@@ -11,7 +12,7 @@ $secondary-border-width: math.div(1rem, 16);
11
12
  max-width: 40rem;
12
13
 
13
14
  > label {
14
- font: var(--font-label-s);
15
+ @include typography.font-heading-s;
15
16
  display: block;
16
17
  margin-block: spacing.$space-4;
17
18
  grid-area: label;
@@ -43,12 +44,10 @@ $secondary-border-width: math.div(1rem, 16);
43
44
  }
44
45
 
45
46
  > button::after {
46
- content: "";
47
- display: inline-block;
48
- @include icons.mask(icons.$icon-url-search);
49
- background-color: var(--color-secondary);
47
+ @include icons.icon-search;
50
48
  width: 1.5rem;
51
49
  height: 1.5rem;
50
+ background-color: var(--color-secondary);
52
51
  }
53
52
  }
54
53
  }
package/scss/tokens/icons-raw.scss ADDED
@@ -0,0 +1,24 @@
1
+ /* This file is autogenerated with `scripts/generate-icons.mjs */
2
+ $icon-arrow-forward-500: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M12.851%2010.864h-9.02V9.136h9.02L8.773%205.057%2010%203.831%2016.17%2010%2010%2016.17l-1.227-1.228%204.078-4.078Z%22%2F%3E%3C%2Fsvg%3E");
3
+ $icon-arrow-forward: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M13.502%2010.542H4.417V9.458h9.085L9.234%205.191%2010%204.417%2015.583%2010%2010%2015.583l-.766-.774%204.268-4.267Z%22%2F%3E%3C%2Fsvg%3E");
4
+ $icon-caret-right-big: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m5.992%2017.712-1.12-1.12L11.463%2010%204.872%203.409l1.12-1.12L13.704%2010l-7.712%207.712Z%22%2F%3E%3C%2Fsvg%3E");
5
+ $icon-caret-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M11.164%2010%207.226%206.062%208%205.288%2012.711%2010%208%2014.711l-.774-.774L11.164%2010Z%22%2F%3E%3C%2Fsvg%3E");
6
+ $icon-check-500: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M8.23%2014.222%204.548%2010.52l1.206-1.206%202.474%202.453%206.016-5.995L15.451%207%208.23%2014.222Z%22%2F%3E%3C%2Fsvg%3E");
7
+ $icon-close: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M6.063%2015%205%2013.937%208.938%2010%205%206.062%206.063%205%2010%208.938%2013.938%205%2015%206.063%2011.062%2010%2015%2013.938%2013.937%2015%2010%2011.062%206.062%2015Z%22%2F%3E%3C%2Fsvg%3E");
8
+ $icon-edit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M4.5%2015.5h.926l8.197-8.197-.926-.926L4.5%2014.574v.926Zm-1.083%201.083v-2.466L13.784%203.734c.112-.115.232-.196.362-.245a1.211%201.211%200%200%201%20.812-.005c.128.046.253.127.374.242l.934.926c.115.12.197.246.245.375a1.163%201.163%200%200%201-.004.817%201.03%201.03%200%200%201-.24.364L5.882%2016.583H3.417Zm9.735-9.735-.455-.471.927.926-.472-.455Z%22%2F%3E%3C%2Fsvg%3E");
9
+ $icon-fullscreen-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m3.183%2017.583-.766-.766%205.734-5.734H4.417V10H10v5.583H8.917V11.85l-5.734%205.734ZM10%2010V4.417h1.083V8.15l5.734-5.734.766.766-5.734%205.734h3.734V10H10Z%22%2F%3E%3C%2Fsvg%3E");
10
+ $icon-fullscreen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M3.417%2016.583V11H4.5v3.734L14.734%204.5H11V3.417h5.583V9H15.5V5.266L5.266%2015.5H9v1.083H3.417Z%22%2F%3E%3C%2Fsvg%3E");
11
+ $icon-info-500: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M11%207c-1%200-3.5%202-4%202.5l.5.5c.5-.5%201-1%202-1s-1%204-1%207.5c0%201.5%201%201.5%202%201s2.5-1.5%203-2L13%2015c-1%20.5-1.5%201.5-2%201s1-7%201-8%200-1-1-1ZM12.5%204a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200Z%22%2F%3E%3C%2Fsvg%3E");
12
+ $icon-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M9.25%2014h1.5V9h-1.5v5Zm.746-6.5c.21%200%20.39-.071.535-.214a.714.714%200%200%200%20.219-.532.736.736%200%200%200-.214-.535.714.714%200%200%200-.532-.219.736.736%200%200%200-.535.214.714.714%200%200%200-.219.532c0%20.21.071.39.214.535.143.146.32.219.532.219Zm.01%2010.5a7.81%207.81%200%200%201-3.11-.625%208.064%208.064%200%200%201-2.552-1.719%208.065%208.065%200%200%201-1.719-2.551A7.818%207.818%200%200%201%202%209.99c0-1.104.208-2.14.625-3.105a8.066%208.066%200%200%201%204.27-4.26A7.818%207.818%200%200%201%2010.009%202a7.75%207.75%200%200%201%203.106.625%208.082%208.082%200%200%201%204.26%204.265A7.77%207.77%200%200%201%2018%209.994a7.81%207.81%200%200%201-.625%203.11%208.063%208.063%200%200%201-1.719%202.552%208.08%208.08%200%200%201-2.546%201.719%207.77%207.77%200%200%201-3.104.625Z%22%2F%3E%3C%2Fsvg%3E");
13
+ $icon-language: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M10%2017.583a7.398%207.398%200%200%201-2.948-.593%207.64%207.64%200%200%201-2.416-1.626%207.64%207.64%200%200%201-1.626-2.416A7.397%207.397%200%200%201%202.417%2010c0-1.052.197-2.037.593-2.954a7.66%207.66%200%200%201%201.626-2.41A7.64%207.64%200%200%201%207.052%203.01%207.397%207.397%200%200%201%2010%202.417c1.052%200%202.037.197%202.954.593a7.66%207.66%200%200%201%202.41%201.626%207.66%207.66%200%200%201%201.626%202.41c.396.917.593%201.902.593%202.954a7.397%207.397%200%200%201-.593%202.948%207.64%207.64%200%200%201-1.626%202.416%207.66%207.66%200%200%201-2.41%201.626%207.384%207.384%200%200%201-2.954.593Zm0-1.121c.3-.3.582-.79.845-1.468.262-.678.464-1.433.605-2.267h-2.9c.151.855.356%201.621.614%202.3.257.677.536%201.156.836%201.435Zm-1.343-.105c-.264-.416-.502-.94-.715-1.573a12.306%2012.306%200%200%201-.488-2.057H4.106a6.426%206.426%200%200%200%201.864%202.4%206.026%206.026%200%200%200%202.687%201.23Zm2.686%200a6.027%206.027%200%200%200%202.687-1.23%206.426%206.426%200%200%200%201.864-2.4h-3.348c-.14.744-.316%201.432-.528%202.065-.213.632-.438%201.154-.675%201.565Zm-7.615-4.713h3.618a9.153%209.153%200%200%201-.072-.87%2024.147%2024.147%200%200%201%200-1.611c.01-.27.034-.54.072-.807H3.728c-.08.269-.138.542-.174.82a6.441%206.441%200%200%200%200%201.648c.036.277.094.551.174.82Zm4.722%200h3.1c.038-.31.062-.597.072-.861a21.579%2021.579%200%200%200%200-1.576%209.133%209.133%200%200%200-.072-.851h-3.1c-.038.296-.062.58-.072.85a22.424%2022.424%200%200%200%200%201.587c.01.272.034.555.072.851Zm4.204%200h3.619c.08-.269.138-.543.173-.82a6.44%206.44%200%200%200%200-1.658%204.633%204.633%200%200%200-.174-.81h-3.618c.038.296.062.585.072.87a24.172%2024.172%200%200%201%200%201.611c-.01.27-.034.539-.072.807Zm-.107-4.372h3.347c-.445-.973-1.063-1.773-1.852-2.4a6.203%206.203%200%200%200-2.699-1.237c.264.443.5.977.707%201.601.207.625.373%201.303.496%202.036Zm-3.997%200h2.9c-.151-.849-.36-1.62-.625-2.31-.266-.692-.54-1.166-.825-1.424-.284.258-.559.732-.824%201.423a12.65%2012.65%200%200%200-.626%202.311Zm-4.444%200h3.348c.124-.733.29-1.411.496-2.036a8.174%208.174%200%200%201%20.707-1.601%206.154%206.154%200%200%200-2.703%201.242%206.486%206.486%200%200%200-1.848%202.395Z%22%2F%3E%3C%2Fsvg%3E");
14
+ $icon-menu: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M3.417%2014.195v-1.083h13.166v1.083H3.417Zm0-3.653V9.458h13.166v1.084H3.417Zm0-3.654V5.804h13.166v1.084H3.417Z%22%2F%3E%3C%2Fsvg%3E");
15
+ $icon-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m15.89%2016.647-4.964-4.963a4.96%204.96%200%200%201-1.37.735c-.498.174-1.01.26-1.54.26-1.3%200-2.404-.454-3.314-1.364C3.792%2010.405%203.337%209.3%203.337%208S3.792%205.598%204.7%204.687c.91-.911%202.015-1.366%203.314-1.366s2.403.455%203.314%201.365c.911.91%201.366%202.015%201.366%203.315%200%20.545-.089%201.066-.268%201.563a4.993%204.993%200%200%201-.727%201.346l4.963%204.963-.774.774Zm-7.874-5.05c1.004%200%201.855-.35%202.551-1.046.697-.696%201.045-1.547%201.045-2.551%200-1.004-.348-1.855-1.045-2.551-.696-.697-1.547-1.045-2.551-1.045-1.004%200-1.855.348-2.551%201.045C4.768%206.145%204.42%206.996%204.42%208c0%201.004.348%201.855%201.045%202.551.696.697%201.547%201.045%202.551%201.045Z%22%2F%3E%3C%2Fsvg%3E");
16
+ $icon-sort-asc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M15.833%2014.167h2.5L15%2017.5l-3.333-3.333h2.5V2.5h1.666v11.667Zm-14.166%200H10v1.666H1.667v-1.666ZM5%204.167v1.666H1.667V4.167H5Zm-3.333%205H7.5v1.666H1.667V9.167Z%22%2F%3E%3C%2Fsvg%3E");
17
+ $icon-sort-desc: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M15.833%205.833h2.5L15%202.5l-3.333%203.333h2.5V17.5h1.666V5.833ZM1.667%2014.167H10v1.666H1.667v-1.666ZM5%204.167v1.666H1.667V4.167H5Zm-3.333%205H7.5v1.666H1.667V9.167Z%22%2F%3E%3C%2Fsvg%3E");
18
+ $icon-star-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M7.333%2014.896%2010%2013.312l2.688%201.584-.709-3%202.313-1.98-3.063-.27L10%206.792%208.77%209.646l-3.062.27%202.334%201.98-.709%203ZM5.063%2018l1.312-5.542L2%208.73l5.75-.5L10%203l2.25%205.25%205.75.48-4.375%203.728L14.938%2018%2010%2015.062%205.062%2018Z%22%2F%3E%3C%2Fsvg%3E");
19
+ $icon-star-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m5.063%2018%201.312-5.542L2%208.73l5.75-.5L10%203l2.25%205.25%205.75.48-4.375%203.728L14.938%2018%2010%2015.062%205.062%2018Z%22%2F%3E%3C%2Fsvg%3E");
20
+ $icon-thumbs_up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M14.876%2017.289h-9.53V7.099l5.925-5.925.798.537c.248.174.439.398.572.672.133.273.172.559.117.857l-.021.049-.777%203.81h5.435c.474%200%20.88.17%201.22.51.34.34.51.747.51%201.22v.883c0%20.12-.01.229-.032.328-.02.1-.055.2-.103.3l-2.51%205.902c-.142.315-.358.568-.65.76-.29.191-.61.287-.954.287ZM7%2015.559h7.876l2.51-5.847V8.83H9.922l.96-4.819L7%207.894v7.666ZM5.346%207.1v1.73H2.5v6.73h2.846v1.73H.77V7.099h4.575Z%22%2F%3E%3C%2Fsvg%3E");
21
+ $icon-visibility-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M12.998%2010.873%2011.98%209.854c.056-.565-.113-1.03-.507-1.392-.394-.364-.836-.518-1.326-.462l-1.02-1.02c.133-.042.274-.074.423-.095.149-.022.3-.032.451-.032.876%200%201.62.305%202.23.916.612.611.917%201.355.917%202.231%200%20.152-.01.305-.032.46-.021.153-.06.292-.117.413Zm2.755%202.74-.795-.78c.5-.389.955-.816%201.365-1.28.41-.466.753-.984%201.031-1.553a7.692%207.692%200%200%200-3.01-3.302A8.266%208.266%200%200%200%2010%205.5c-.361%200-.715.02-1.063.062a6.336%206.336%200%200%200-1.02.209l-.888-.888a6.623%206.623%200%200%201%201.478-.37c.5-.064.998-.096%201.493-.096%201.842%200%203.551.496%205.127%201.49A8.518%208.518%200%200%201%2018.551%2010a7.892%207.892%200%200%201-1.154%201.96c-.475.59-1.023%201.14-1.644%201.652Zm.215%203.903-2.58-2.596a8.812%208.812%200%200%201-3.388.663%209.41%209.41%200%200%201-5.127-1.49C3.302%2013.099%202.16%2011.735%201.449%2010a8.32%208.32%200%200%201%201.296-2.175%209.96%209.96%200%200%201%201.838-1.73L2.484%204.01l.774-.774%2013.484%2013.505-.774.774ZM5.358%206.889c-.524.379-1.036.831-1.535%201.358A6.183%206.183%200%200%200%202.646%2010a7.692%207.692%200%200%200%203.01%203.302A8.266%208.266%200%200%200%2010%2014.5c.463%200%20.924-.039%201.383-.117.46-.078.855-.172%201.186-.282l-1.242-1.226a2.817%202.817%200%200%201-.64.2%203.54%203.54%200%200%201-.687.072c-.876%200-1.62-.305-2.23-.916-.612-.611-.917-1.355-.917-2.231%200-.21.03-.436.093-.675.061-.24.121-.458.179-.652L5.357%206.889Z%22%2F%3E%3C%2Fsvg%3E");
22
+ $icon-visibility-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M10.002%2013.148c.875%200%201.618-.307%202.229-.92.61-.611.916-1.355.916-2.23s-.306-1.618-.918-2.229c-.612-.61-1.356-.916-2.23-.916-.876%200-1.619.306-2.23.918-.61.613-.916%201.356-.916%202.231%200%20.875.306%201.618.918%202.229a3.04%203.04%200%200%200%202.23.917ZM10%2012a1.929%201.929%200%200%201-1.417-.583A1.929%201.929%200%200%201%208%2010c0-.555.194-1.028.583-1.417A1.929%201.929%200%200%201%2010%208c.556%200%201.028.195%201.417.583.389.39.583.862.583%201.417%200%20.556-.194%201.028-.583%201.417A1.929%201.929%200%200%201%2010%2012Zm.001%203.583c-1.869%200-3.572-.507-5.109-1.523A9.358%209.358%200%200%201%201.449%2010%209.36%209.36%200%200%201%204.89%205.94C6.427%204.924%208.13%204.417%209.999%204.417c1.869%200%203.572.507%205.109%201.523A9.358%209.358%200%200%201%2018.55%2010a9.36%209.36%200%200%201-3.442%204.06c-1.536%201.016-3.239%201.523-5.108%201.523ZM10%2014.5a8.123%208.123%200%200%200%204.313-1.208A8.085%208.085%200%200%200%2017.354%2010a8.085%208.085%200%200%200-3.041-3.292A8.123%208.123%200%200%200%2010%205.5a8.123%208.123%200%200%200-4.313%201.208A8.085%208.085%200%200%200%202.646%2010a8.085%208.085%200%200%200%203.041%203.292A8.122%208.122%200%200%200%2010%2014.5Z%22%2F%3E%3C%2Fsvg%3E");
23
+ $icon-warning-500: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M2.386%2017.085a.848.848%200%200%201-.764-.435.735.735%200%200%201-.109-.43c.007-.16.05-.311.13-.455L9.255%203.062a.708.708%200%200%201%20.324-.313.982.982%200%200%201%20.843%200%20.709.709%200%200%201%20.324.313l7.611%2012.703c.08.144.123.296.13.455a.735.735%200%200%201-.109.43.98.98%200%200%201-.31.313.83.83%200%200%201-.454.122H2.386ZM3.77%2015.43h12.46L10%205.056%203.77%2015.43Zm6.226-.945a.758.758%200%200%200%20.55-.224.736.736%200%200%200%20.229-.546.75.75%200%200%200-.224-.549.74.74%200%200%200-.547-.226.762.762%200%200%200-.55.222.728.728%200%200%200-.229.544c0%20.214.075.398.224.55.15.153.332.23.547.23Zm0-2.485c.21%200%20.39-.072.535-.216a.72.72%200%200%200%20.219-.534V8.805a.728.728%200%200%200-.214-.535.72.72%200%200%200-.532-.215.734.734%200%200%200-.535.215.72.72%200%200%200-.219.535v2.445c0%20.213.071.39.214.534a.72.72%200%200%200%20.532.216Z%22%2F%3E%3C%2Fsvg%3E");
24
+ $icon-warning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M2.915%2016.583a.655.655%200%200%201-.6-.335.53.53%200%200%201-.086-.333.835.835%200%200%201%20.106-.358L9.428%203.776a.548.548%200%200%201%20.248-.243.761.761%200%200%201%20.649%200%20.55.55%200%200%201%20.248.243l7.092%2011.781a.836.836%200%200%201%20.106.358.53.53%200%200%201-.087.333.763.763%200%200%201-.241.242.658.658%200%200%201-.358.093H2.915Zm.73-1.083h12.71L10%204.917%203.646%2015.5Zm6.35-1.16a.581.581%200%200%200%20.595-.586.581.581%200%200%200-.586-.594.581.581%200%200%200-.594.586.581.581%200%200%200%20.586.594Zm0-2.18a.532.532%200%200%200%20.388-.155.52.52%200%200%200%20.159-.386V8.702a.526.526%200%200%200-.538-.542.532.532%200%200%200-.387.156.52.52%200%200%200-.159.386v2.917a.526.526%200%200%200%20.538.541Z%22%2F%3E%3C%2Fsvg%3E");
package/scss/tokens/icons.scss CHANGED
@@ -1,69 +1,51 @@
1
- $icon-url-caret-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99997 12.782L5.28845 8.07053L6.06247 7.29651L9.99997 11.234L13.9375 7.29651L14.7115 8.07053L9.99997 12.782Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A");
2
- $icon-url-globe: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5001 17.5833C9.45625 17.5833 8.47362 17.3857 7.55217 16.9904C6.63069 16.5951 5.8254 16.0529 5.13629 15.3638C4.44719 14.6747 3.905 13.8694 3.50971 12.9479C3.1144 12.0264 2.91675 11.0438 2.91675 10C2.91675 8.94765 3.1144 7.96288 3.50971 7.04569C3.905 6.12849 4.44719 5.32534 5.13629 4.63623C5.8254 3.94713 6.63069 3.40494 7.55217 3.00965C8.47362 2.61434 9.45625 2.41669 10.5001 2.41669C11.5524 2.41669 12.5372 2.61434 13.4544 3.00965C14.3716 3.40494 15.1747 3.94713 15.8638 4.63623C16.5529 5.32534 17.0951 6.12849 17.4904 7.04569C17.8857 7.96288 18.0834 8.94765 18.0834 10C18.0834 11.0438 17.8857 12.0264 17.4904 12.9479C17.0951 13.8694 16.5529 14.6747 15.8638 15.3638C15.1747 16.0529 14.3716 16.5951 13.4544 16.9904C12.5372 17.3857 11.5524 17.5833 10.5001 17.5833ZM10.5001 16.4615C10.8003 16.1613 11.0818 15.6723 11.3446 14.9944C11.6074 14.3165 11.8094 13.5609 11.9504 12.7275H9.04973C9.20144 13.5823 9.40603 14.3485 9.66352 15.0264C9.92099 15.7043 10.1998 16.1827 10.5001 16.4615ZM9.15714 16.3574C8.89326 15.9407 8.655 15.4161 8.44239 14.7836C8.22978 14.1512 8.06685 13.4658 7.9536 12.7275H4.60581C5.04599 13.6902 5.66753 14.4901 6.47041 15.1274C7.27332 15.7647 8.16889 16.1747 9.15714 16.3574ZM11.843 16.3574C12.8312 16.1747 13.7268 15.7647 14.5297 15.1274C15.3326 14.4901 15.9541 13.6902 16.3943 12.7275H13.0465C12.9066 13.4711 12.7303 14.1592 12.5177 14.7917C12.3051 15.4242 12.0802 15.9461 11.843 16.3574ZM4.22762 11.6443H7.84623C7.80777 11.3483 7.78373 11.0585 7.77412 10.7749C7.76451 10.4912 7.75971 10.219 7.75971 9.95833C7.75971 9.69765 7.76451 9.43242 7.77412 9.16265C7.78373 8.89288 7.80777 8.62392 7.84623 8.35575H4.22762C4.1475 8.62499 4.08954 8.89849 4.05375 9.17627C4.01796 9.45405 4.00006 9.72862 4.00006 10C4.00006 10.2714 4.01796 10.546 4.05375 10.8237C4.08954 11.1015 4.1475 11.375 4.22762 11.6443ZM8.95037 11.6443H12.0497C12.0882 11.3344 12.1122 11.0473 12.1219 10.7829C12.1315 10.5184 12.1363 10.2575 12.1363 10C12.1363 9.74251 12.1315 9.47809 12.1219 9.20673C12.1122 8.93535 12.0882 8.65169 12.0497 8.35575H8.95037C8.91191 8.65169 8.88787 8.93535 8.87825 9.20673C8.86864 9.47809 8.86383 9.74251 8.86383 10C8.86383 10.2575 8.86864 10.5219 8.87825 10.7933C8.88787 11.0646 8.91191 11.3483 8.95037 11.6443ZM13.1539 11.6443H16.7725C16.8526 11.375 16.9106 11.1015 16.9464 10.8237C16.9822 10.546 17.0001 10.2714 17.0001 10C17.0001 9.72862 16.9822 9.45058 16.9464 9.16585C16.9106 8.88113 16.8526 8.6111 16.7725 8.35575H13.1539C13.1924 8.65169 13.2164 8.94149 13.226 9.22515C13.2356 9.50881 13.2404 9.78099 13.2404 10.0417C13.2404 10.3023 13.2356 10.5676 13.226 10.8374C13.2164 11.1071 13.1924 11.3761 13.1539 11.6443ZM13.0465 7.27246H16.3943C15.9488 6.29915 15.3313 5.49919 14.5417 4.87258C13.7522 4.24599 12.8526 3.83333 11.843 3.6346C12.1069 4.07798 12.3424 4.6119 12.5497 5.23638C12.757 5.86085 12.9226 6.53954 13.0465 7.27246ZM9.04973 7.27246H11.9504C11.7987 6.4231 11.5901 5.65279 11.3246 4.96154C11.0591 4.27031 10.7843 3.79594 10.5001 3.53846C10.2159 3.79594 9.94103 4.27031 9.67554 4.96154C9.41004 5.65279 9.20144 6.4231 9.04973 7.27246ZM4.60581 7.27246H7.9536C8.07753 6.53954 8.24314 5.86085 8.45041 5.23638C8.65768 4.6119 8.89326 4.07798 9.15714 3.6346C8.14219 3.83333 7.24127 4.24733 6.45439 4.8766C5.66753 5.50588 5.05134 6.3045 4.60581 7.27246Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A");
3
- $icon-url-search: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M16.3895 16.6474L11.4264 11.6843C11.0097 12.0005 10.5528 12.2454 10.0557 12.419C9.5586 12.5927 9.04565 12.6795 8.51686 12.6795C7.21707 12.6795 6.11209 12.2245 5.20192 11.3146C4.29175 10.4047 3.83667 9.30024 3.83667 8.00131C3.83667 6.70237 4.29163 5.5975 5.20155 4.68671C6.11146 3.77593 7.21589 3.32054 8.51484 3.32054C9.81377 3.32054 10.9186 3.77563 11.8294 4.68579C12.7402 5.59596 13.1956 6.70094 13.1956 8.00073C13.1956 8.54555 13.1061 9.06651 12.9272 9.56362C12.7482 10.0607 12.506 10.5096 12.2004 10.9102L17.1635 15.8734L16.3895 16.6474ZM8.51613 11.5962C9.52041 11.5962 10.3708 11.2479 11.0674 10.5513C11.764 9.85471 12.1123 9.00428 12.1123 8C12.1123 6.99572 11.764 6.14529 11.0674 5.44871C10.3708 4.75213 9.52041 4.40383 8.51613 4.40383C7.51185 4.40383 6.66142 4.75213 5.96484 5.44871C5.26827 6.14529 4.91998 6.99572 4.91998 8C4.91998 9.00428 5.26827 9.85471 5.96484 10.5513C6.66142 11.2479 7.51185 11.5962 8.51613 11.5962Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A");
4
- $icon-url-arrow-right-300: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2740_45' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2740_45)'%3E%3Cpath d='M13.5017 10.5417H4.41675V9.45842H13.5017L9.23406 5.19077L10.0001 4.41675L15.5834 10.0001L10.0001 15.5834L9.23406 14.8094L13.5017 10.5417Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A");
5
- $icon-url-arrow-right-500: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2676_13984' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2676_13984)'%3E%3Cpath d='M12.851 10.8645H3.83057V9.13538H12.851L8.77307 5.05748L9.99996 3.83057L16.1694 9.99996L9.99996 16.1694L8.77307 14.9424L12.851 10.8645Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A");
6
- $icon-url-check: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2742_210' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='25'%3E%3Crect x='0.764648' y='0.942017' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2742_210)'%3E%3Cpath d='M10.3146 19.1333L4.42334 13.242L6.04561 11.6197L10.3146 15.8887L19.4837 6.71973L21.1059 8.342L10.3146 19.1333Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
7
- $icon-url-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.06247 14.7115L5.28845 13.9375L9.22595 9.99997L5.28845 6.06247L6.06247 5.28845L9.99997 9.22595L13.9375 5.28845L14.7115 6.06247L10.774 9.99997L14.7115 13.9375L13.9375 14.7115L9.99997 10.774L6.06247 14.7115Z' fill='currentColor' /%3E%3C/svg%3E%0A");
8
- $icon-url-info: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2831_14099' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='21' height='21'%3E%3Crect x='0.506958' y='0.468018' width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2831_14099)'%3E%3Cpath d='M9.75696 14.468H11.257V9.46802H9.75696V14.468ZM10.5026 7.96802C10.7138 7.96802 10.8924 7.89657 11.0382 7.75366C11.184 7.61075 11.257 7.43366 11.257 7.22241C11.257 7.01115 11.1855 6.8326 11.0426 6.68677C10.8997 6.54093 10.7226 6.46802 10.5114 6.46802C10.3001 6.46802 10.1215 6.53947 9.97571 6.68237C9.82987 6.82529 9.75696 7.00237 9.75696 7.21362C9.75696 7.42489 9.82841 7.60343 9.97131 7.74927C10.1142 7.8951 10.2913 7.96802 10.5026 7.96802ZM10.5127 18.468C9.41165 18.468 8.37501 18.2597 7.40279 17.843C6.43057 17.4264 5.57987 16.8534 4.85071 16.1243C4.12154 15.3951 3.54862 14.5447 3.13196 13.5731C2.71529 12.6014 2.50696 11.5632 2.50696 10.4585C2.50696 9.35373 2.71529 8.31871 3.13196 7.35343C3.54862 6.38816 4.12154 5.54093 4.85071 4.81177C5.57987 4.0826 6.43028 3.50968 7.40192 3.09302C8.37357 2.67635 9.41176 2.46802 10.5165 2.46802C11.6213 2.46802 12.6563 2.67635 13.6215 3.09302C14.5868 3.50968 15.434 4.0826 16.1632 4.81177C16.8924 5.54093 17.4653 6.38971 17.882 7.3581C18.2986 8.3265 18.507 9.36123 18.507 10.4623C18.507 11.5633 18.2986 12.6 17.882 13.5722C17.4653 14.5444 16.8924 15.3951 16.1632 16.1243C15.434 16.8534 14.5853 17.4264 13.6169 17.843C12.6485 18.2597 11.6138 18.468 10.5127 18.468Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
1
+ @use "./icons-raw.scss" as raw;
9
2
 
10
- @mixin mask($icon-url) {
11
- -webkit-mask-image: $icon-url;
12
- mask-image: $icon-url;
3
+ @mixin with-icon($icon, $size: 1.25rem) {
4
+ // We use this variable to avoid sending the same data twice to the users
5
+ --icon: #{$icon};
6
+ content: "";
7
+ display: inline-block;
8
+ width: $size;
9
+ height: $size;
10
+ -webkit-mask-image: var(--icon);
11
+ mask-image: var(--icon);
13
12
  mask-size: cover;
14
13
  -webkit-mask-size: cover;
15
14
  }
16
15
 
17
- @mixin with-icon {
18
- content: "";
19
- display: inline-block;
20
- width: 1.25em;
21
- height: 1.25em;
16
+ @mixin icon-language {
17
+ @include with-icon(raw.$icon-language);
22
18
  }
23
19
 
24
- @mixin icon-globe {
25
- @include with-icon;
26
- -webkit-mask-image: $icon-url-globe;
27
- mask-image: $icon-url-globe;
20
+ @mixin icon-search {
21
+ @include with-icon(raw.$icon-search);
28
22
  }
29
23
 
30
- @mixin icon-search {
31
- @include with-icon;
32
- -webkit-mask-image: $icon-url-search;
33
- mask-image: $icon-url-search;
24
+ @mixin icon-menu {
25
+ @include with-icon(raw.$icon-menu);
34
26
  }
35
27
 
36
28
  @mixin icon-caret-down {
37
- @include with-icon;
38
- -webkit-mask-image: $icon-url-caret-down;
39
- mask-image: $icon-url-caret-down;
29
+ @include with-icon(raw.$icon-caret-right);
30
+ rotate: 90deg;
40
31
  }
41
32
 
42
33
  @mixin icon-caret-right {
43
- @include icon-caret-down;
44
- rotate: -90deg;
34
+ @include with-icon(raw.$icon-caret-right);
45
35
  }
46
36
 
47
- @mixin icon-caret-up {
48
- @include icon-caret-down;
49
- rotate: 180deg;
37
+ @mixin icon-close {
38
+ @include with-icon(raw.$icon-close);
50
39
  }
51
40
 
52
- @mixin icon-arrow-left-300 {
53
- @include with-icon;
54
- -webkit-mask-image: $icon-url-arrow-right-300;
55
- mask-image: $icon-url-arrow-right-300;
56
- rotate: 180deg;
41
+ @mixin icon-info-500 {
42
+ @include with-icon(raw.$icon-info-500);
57
43
  }
58
44
 
59
- @mixin icon-arrow-right-500 {
60
- @include with-icon;
61
- -webkit-mask-image: $icon-url-arrow-right-500;
62
- mask-image: $icon-url-arrow-right-500;
45
+ @mixin icon-warning-500 {
46
+ @include with-icon(raw.$icon-warning-500);
63
47
  }
64
48
 
65
- @mixin icon-close {
66
- @include with-icon;
67
- -webkit-mask-image: $icon-url-close;
68
- mask-image: $icon-url-close;
49
+ @mixin icon-check-500 {
50
+ @include with-icon(raw.$icon-check-500);
69
51
  }
package/scss/tokens/typography.scss CHANGED
@@ -1,35 +1,115 @@
1
- @use "sass:math";
2
1
  @use "sass:list";
3
2
 
4
- /// Given a font-size and line-height values in "pixel units" (i.e. 1/16rem),
5
- /// returns the value for the CSS `font` shorthand property expresseing font
6
- /// size in rem and line height as unitless.
7
- @function _generate-shorthand-font(
8
- $font-size-px,
9
- $line-height-px,
10
- $font-weight: null
11
- ) {
12
- // Same font-family for everything
13
- $font-family: "Figtree, sans-serif";
14
- $font-size-rem: math.div($font-size-px, 16) * 1rem;
15
- $line-height-unitless: math.div($line-height-px, $font-size-px);
16
-
17
- @if $font-weight {
18
- @return $font-weight list.slash($font-size-rem, $line-height-unitless)
19
- $font-family;
3
+ $font-figtree: Figtree, sans-serif;
4
+ $breakpoint-fluid-typography: 48rem;
5
+ $font-bold: 600;
6
+
7
+ // Replaces h1 (non-fluid)
8
+ @mixin font-heading-xl {
9
+ font-weight: 600;
10
+ font-size: 2.75rem;
11
+ line-height: 3.5rem;
12
+ }
13
+
14
+ // Replaces h2 (non-fluid)
15
+ @mixin font-heading-l {
16
+ font-weight: 600;
17
+ font-size: 1.875rem;
18
+ line-height: 2.5rem;
19
+ }
20
+
21
+ // Replaces h3 (non-fluid)
22
+ @mixin font-heading-m {
23
+ font-weight: 600;
24
+ font-size: 1.5rem;
25
+ line-height: 2rem;
26
+ }
27
+
28
+ // Replaces h4 (non-fluid)
29
+ @mixin font-heading-s {
30
+ font-weight: 600;
31
+ font-size: 1.25rem;
32
+ line-height: 1.75rem;
33
+ }
34
+
35
+ @mixin font-heading-xs {
36
+ font-weight: 600;
37
+ font-size: 1rem;
38
+ line-height: 1.5rem;
39
+ }
40
+
41
+ // Replaces t10 (non-fluid)
42
+ @mixin font-lead {
43
+ font-weight: 400;
44
+ font-size: 1.5rem;
45
+ line-height: 2.25rem;
46
+ }
47
+
48
+ // Replaces t11, t12 (non-fluid)
49
+ @mixin font-default {
50
+ font-weight: 400;
51
+ font-size: 1rem;
52
+ line-height: 1.5rem;
53
+ }
54
+
55
+ /// Do we need these?
56
+ ///
57
+ // Replaces t1
58
+ @mixin font-heading-xl-fluid {
59
+ @include font-heading-l;
60
+
61
+ @media (min-width: $breakpoint-fluid-typography) {
62
+ @include font-heading-xl;
20
63
  }
64
+ }
65
+
66
+ // Replaces t2
67
+ @mixin font-heading-l-fluid {
68
+ @include font-heading-m;
21
69
 
22
- @return list.slash($font-size-rem, $line-height-unitless) $font-family;
70
+ @media (min-width: $breakpoint-fluid-typography) {
71
+ @include font-heading-l;
72
+ }
23
73
  }
24
74
 
25
- @mixin theme-default {
26
- --font-default: 1rem/1.5 Figtree, sans-serif;
27
- --font-heading-xl: #{_generate-shorthand-font(44, 56, 600)};
28
- --font-heading-l: #{_generate-shorthand-font(30, 40, 600)};
29
- --font-heading-m: #{_generate-shorthand-font(24, 32, 600)};
30
- --font-heading-s: #{_generate-shorthand-font(20, 28, 600)};
31
- --font-label-l: #{_generate-shorthand-font(24, 32, 600)};
32
- --font-label-m: #{_generate-shorthand-font(19, 24, 600)};
33
- --font-label-s: #{_generate-shorthand-font(16, 24, 600)};
34
- --font-lead: #{_generate-shorthand-font(24, 36)};
75
+ // Replaces t3
76
+ @mixin font-heading-m-fluid {
77
+ @include font-heading-s;
78
+
79
+ @media (min-width: $breakpoint-fluid-typography) {
80
+ @include font-heading-m;
81
+ }
35
82
  }
83
+
84
+ // Replaces t4
85
+ @mixin font-heading-s-fluid {
86
+ @include font-heading-xs;
87
+
88
+ @media (min-width: $breakpoint-fluid-typography) {
89
+ @include font-heading-s;
90
+ }
91
+ }
92
+
93
+ // Replaces t10
94
+ @mixin font-lead-fluid {
95
+ font-size: 1.125rem;
96
+ line-height: 1.5rem;
97
+
98
+ @media (min-width: $breakpoint-fluid-typography) {
99
+ @include font-lead;
100
+ }
101
+ }
102
+
103
+ // What is the use case of this??
104
+ // Replaces t24
105
+ // @mixin t24 {
106
+ // @include font-heading-s;
107
+
108
+ // @media (min-width: $breakpoint-fluid-typography) {
109
+ // // This is the same as `font-heading-l` but with weight 400
110
+ // // Can we use just @include font-heading-l; ??
111
+ // font-weight: 400;
112
+ // font-size: 1.875rem;
113
+ // line-height: 2.5rem;
114
+ // }
115
+ // }
package/scss/utils/prose.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "../tokens/spacing.scss" as s;
2
+ @use "../tokens/typography.scss" as t;
2
3
 
3
4
  /// This mixin provides CSS for webpages with lots of prose text.
4
5
  ///
@@ -12,7 +13,7 @@
12
13
  }
13
14
 
14
15
  .lead {
15
- font: var(--font-lead);
16
+ @include t.font-lead;
16
17
  margin-block-start: s.$space-12;
17
18
  margin-block-end: s.$space-16;
18
19
  }
@@ -25,25 +26,25 @@
25
26
  }
26
27
 
27
28
  h1 {
28
- font: var(--font-heading-xl);
29
+ @include t.font-heading-xl;
29
30
  margin-block-start: s.$space-32;
30
31
  margin-block-end: s.$space-16;
31
32
  }
32
33
 
33
34
  h2 {
34
- font: var(--font-heading-l);
35
+ @include t.font-heading-l;
35
36
  margin-block-start: s.$space-32;
36
37
  margin-block-end: s.$space-16;
37
38
  }
38
39
 
39
40
  h3 {
40
- font: var(--font-heading-m);
41
+ @include t.font-heading-m;
41
42
  margin-block-start: s.$space-32;
42
43
  margin-block-end: s.$space-8;
43
44
  }
44
45
 
45
46
  h4 {
46
- font: var(--font-heading-s);
47
+ @include t.font-heading-s;
47
48
  margin-block-start: s.$space-32;
48
49
  margin-block-end: s.$space-4;
49
50
  }
@@ -87,7 +88,7 @@
87
88
  thead {
88
89
  // TODO: border
89
90
  th {
90
- font: var(--font-label-s);
91
+ @include t.font-heading-s;
91
92
  padding-block: var(--space-inner-block);
92
93
  padding-inline: var(--space-inner-inline);
93
94
 
package/scss/utils/reset.scss CHANGED
@@ -59,13 +59,13 @@ $generate-css: true !default;
59
59
  :root {
60
60
  @include colors.theme-default;
61
61
  @include spacing.theme-default;
62
- @include typography.theme-default;
62
+ font-family: typography.$font-figtree;
63
63
  }
64
64
 
65
65
  body {
66
+ @include typography.font-default;
66
67
  color: var(--color-text);
67
68
  background: var(--color-background);
68
- font: var(--font-default);
69
69
  min-height: 100vh;
70
70
  margin: 0;
71
71
  }
/package/assets/{figtree[wght].woff2 → figtree.woff2} RENAMED
File without changes