@kth/style 1.2.1 → 1.4.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 (7) hide show
  1. package/package.json +1 -1
  2. package/scss/components/breadcrumbs.scss +36 -0
  3. package/scss/components/content.scss +6 -0
  4. package/scss/components/local-navigation.scss +0 -12
  5. package/scss/tokens/icons-raw.scss +3 -1
  6. package/scss/tokens/icons.scss +8 -0
  7. package/scss/utils/layers.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kth/style",
3
- "version": "1.2.1",
3
+ "version": "1.4.0",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {
package/scss/components/breadcrumbs.scss ADDED
@@ -0,0 +1,36 @@
1
+ @use "../tokens/spacing";
2
+ @use "../tokens/sizing.scss";
3
+ @use "../utils/mixins.scss";
4
+
5
+ .kth-breadcrumbs {
6
+ display: none;
7
+ @include mixins.container;
8
+ padding-block-start: spacing.$space-16;
9
+
10
+ @media (min-width: sizing.$breakpoint-64) {
11
+ display: block;
12
+ }
13
+
14
+ &__list {
15
+ list-style: none;
16
+ display: flex;
17
+ padding: 0;
18
+ margin: 0;
19
+
20
+ li {
21
+ position: relative;
22
+ padding-right: spacing.$space-8;
23
+
24
+ &::after {
25
+ content: "/";
26
+ color: var(--color-tertiary);
27
+ padding-left: spacing.$space-8;
28
+ }
29
+
30
+ &:last-child::after {
31
+ content: "";
32
+ position: static;
33
+ }
34
+ }
35
+ }
36
+ }
package/scss/components/content.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "../tokens/sizing.scss";
1
2
  @use "../tokens/spacing.scss";
2
3
  @use "../utils/mixins.scss";
3
4
 
@@ -8,7 +9,12 @@
8
9
 
9
10
  .kth-main-content {
10
11
  @include mixins.container;
12
+ padding-block: spacing.$space-16;
11
13
  flex: 1;
14
+
15
+ @media (min-width: sizing.$breakpoint-64) {
16
+ padding-block: spacing.$space-32;
17
+ }
12
18
  }
13
19
  }
14
20
 
package/scss/components/local-navigation.scss CHANGED
@@ -5,18 +5,6 @@
5
5
  @use "../tokens/sizing.scss";
6
6
  @use "../tokens/icons";
7
7
 
8
- @layer legacy-compatibility {
9
- .kth-local-navigation--mobile {
10
- display: block;
11
- width: auto;
12
- padding: 0;
13
-
14
- @media (min-width: 992px) {
15
- display: none;
16
- }
17
- }
18
- }
19
-
20
8
  @layer kth-style {
21
9
  .kth-local-navigation,
22
10
  .kth-local-navigation--mobile {
package/scss/tokens/icons-raw.scss CHANGED
@@ -7,6 +7,8 @@ $icon-caret-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.
7
7
  $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");
8
8
  $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");
9
9
  $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");
10
+ $icon-filter-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%231C1B1F%22%20d%3D%22m11.558%209.454-.766-.787L13.396%205.5H7.625L6.542%204.417h8.533a.28.28%200%200%201%20.268.169.289.289%200%200%201-.032.323l-3.753%204.545Zm4.466%208.11-5.44-5.44v3.055c0%20.113-.04.208-.119.286a.39.39%200%200%201-.286.118h-.358a.39.39%200%200%201-.286-.118.389.389%200%200%201-.118-.286v-4.222L2.436%203.976l.774-.766%2013.58%2013.58-.766.774Z%22%2F%3E%3C%2Fsvg%3E");
11
+ $icon-filter: 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%231C1B1F%22%20d%3D%22M9.824%2015.583a.397.397%200%200%201-.407-.404v-4.552L4.689%204.909a.29.29%200%200%201-.033-.323.279.279%200%200%201%20.269-.17h10.15c.125%200%20.214.057.269.17a.29.29%200%200%201-.033.323l-4.728%205.718v4.552a.391.391%200%200%201-.115.288.39.39%200%200%201-.287.116h-.357ZM10%209.625%2013.375%205.5h-6.77L10%209.625Z%22%2F%3E%3C%2Fsvg%3E");
10
12
  $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");
11
13
  $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");
12
14
  $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");
@@ -14,8 +16,8 @@ $icon-info: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
14
16
  $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");
15
17
  $icon-list-view: 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%231C1B1F%22%20d%3D%22M7.756%2014.792v-1.084h8.827v1.084H7.756Zm0-4.25V9.458h8.827v1.084H7.756Zm0-4.25V5.208h8.827v1.084H7.756ZM4.632%2015.47c-.337%200-.623-.12-.86-.36a1.186%201.186%200%200%201-.355-.864c0-.337.12-.624.36-.86.239-.237.527-.356.864-.356.336%200%20.623.12.86.36.236.24.355.528.355.864%200%20.337-.12.624-.36.86-.24.237-.528.356-.864.356Zm0-4.25c-.337%200-.623-.12-.86-.36a1.186%201.186%200%200%201-.355-.864c0-.337.12-.624.36-.86.239-.237.527-.356.864-.356.336%200%20.623.12.86.36.236.24.355.528.355.864%200%20.337-.12.624-.36.86-.24.237-.528.356-.864.356Zm0-4.25c-.337%200-.623-.12-.86-.36a1.186%201.186%200%200%201-.355-.864c0-.337.12-.624.36-.86.239-.237.527-.356.864-.356.336%200%20.623.12.86.36.236.24.355.528.355.864%200%20.337-.12.624-.36.86-.24.237-.528.356-.864.356Z%22%2F%3E%3C%2Fsvg%3E");
16
18
  $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");
17
- $icon-new-window: 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.756%2016.583c-.375%200-.692-.13-.95-.388a1.294%201.294%200%200%201-.39-.951V4.756c0-.375.13-.692.39-.95.258-.26.575-.39.95-.39H9.68V4.5H4.756a.245.245%200%200%200-.176.08.245.245%200%200%200-.08.176v10.488c0%20.064.027.122.08.176.054.053.112.08.176.08h10.488a.245.245%200%200%200%20.176-.08.245.245%200%200%200%20.08-.176V10.32h1.083v4.924c0%20.375-.13.692-.388.95-.26.26-.576.39-.951.39H4.756Zm3.323-3.887-.775-.774L14.726%204.5H12V3.417h4.583V8H15.5V5.274l-7.421%207.421Z%22%2F%3E%3C%2Fsvg%3E");
18
19
  $icon-new-window-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%22M4.56%2017.17c-.48%200-.887-.17-1.224-.506a1.667%201.667%200%200%201-.505-1.224V4.56c0-.48.168-.887.505-1.224a1.667%201.667%200%200%201%201.224-.505H10V4.56H4.56v10.88h10.88V10h1.73v5.44c0%20.48-.17.887-.506%201.224a1.667%201.667%200%200%201-1.224.505H4.56ZM8.217%2013%207%2011.783l7.223-7.223H12V2.83h5.17V8h-1.73V5.777L8.217%2013Z%22%2F%3E%3C%2Fsvg%3E");
20
+ $icon-new-window: 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.756%2016.583c-.375%200-.692-.13-.95-.388a1.294%201.294%200%200%201-.39-.951V4.756c0-.375.13-.692.39-.95.258-.26.575-.39.95-.39H9.68V4.5H4.756a.245.245%200%200%200-.176.08.245.245%200%200%200-.08.176v10.488c0%20.064.027.122.08.176.054.053.112.08.176.08h10.488a.245.245%200%200%200%20.176-.08.245.245%200%200%200%20.08-.176V10.32h1.083v4.924c0%20.375-.13.692-.388.95-.26.26-.576.39-.951.39H4.756Zm3.323-3.887-.775-.774L14.726%204.5H12V3.417h4.583V8H15.5V5.274l-7.421%207.421Z%22%2F%3E%3C%2Fsvg%3E");
19
21
  $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");
20
22
  $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");
21
23
  $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");
package/scss/tokens/icons.scss CHANGED
@@ -99,4 +99,12 @@
99
99
 
100
100
  @mixin icon-list-view {
101
101
  @include with-icon(raw.$icon-list-view);
102
+ }
103
+
104
+ @mixin icon-filter {
105
+ @include with-icon(raw.$icon-filter);
106
+ }
107
+
108
+ @mixin icon-filter-off {
109
+ @include with-icon(raw.$icon-filter-off);
102
110
  }
package/scss/utils/layers.scss CHANGED
@@ -1 +1 @@
1
- @layer kth-style.old, kth-style, legacy-compatibility;
1
+ @layer kth-style.old, kth-style;