@kth/style 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {

package/scss/components/details.scss

@@ -29,6 +29,11 @@ $border-width: spacing.$space-4;
     }
   }
 
+  // Safari requires extra code to hide the default ">" marker
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
   &[open] summary::before {
     rotate: 90deg;
   }

package/scss/tokens/icons-raw.scss

@@ -11,6 +11,7 @@ $icon-filter-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w
 $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");
 $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");
 $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");
+$icon-home: 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%22M5.5%2015.5h2.289v-4.952h4.422V15.5H14.5V8.25L10%204.859%205.5%208.25v7.25Zm-1.083%201.083V7.708L10%203.505l5.583%204.203v8.875h-4.455v-4.951H8.872v4.951H4.417Z%22%2F%3E%3C%2Fsvg%3E");
 $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");
 $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");
 $icon-input-checkbox: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22m9.55%2018-5.7-5.7%201.425-1.425L9.55%2015.15l9.175-9.175L20.15%207.4%209.55%2018Z%22%2F%3E%3C%2Fsvg%3E");
@@ -19,6 +20,8 @@ $icon-list-view: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3
 $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");
 $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");
 $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");
+$icon-pdf: 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.356%2010.452h.904v-1.5h.596a.875.875%200%200%200%20.644-.26.875.875%200%200%200%20.26-.644v-.596a.875.875%200%200%200-.26-.644.875.875%200%200%200-.644-.26h-1.5v3.904Zm.904-2.404v-.596h.596v.596H8.26Zm2.016%202.404h1.467a.875.875%200%200%200%20.645-.26.875.875%200%200%200%20.26-.644V7.452a.875.875%200%200%200-.26-.644.875.875%200%200%200-.645-.26h-1.467v3.904Zm.903-.904V7.452h.564v2.096h-.564Zm2.064.904h.905v-1.5h1.16v-.904h-1.16v-.596h1.16v-.904h-2.065v3.904Zm-6.695%204.131c-.375%200-.692-.13-.951-.388a1.294%201.294%200%200%201-.389-.952V3.756c0-.375.13-.692.389-.95.259-.26.576-.39.951-.39h9.487c.375%200%20.692.13.951.39.26.258.389.575.389.95v9.487c0%20.376-.13.693-.389.952s-.576.388-.95.388H6.547Zm0-1.083h9.487a.245.245%200%200%200%20.177-.08.245.245%200%200%200%20.08-.177V3.756a.245.245%200%200%200-.08-.176.245.245%200%200%200-.177-.08H6.548a.245.245%200%200%200-.176.08.245.245%200%200%200-.08.176v9.487c0%20.065.026.123.08.177.053.053.112.08.176.08Zm-2.583%203.667c-.375%200-.692-.13-.951-.389a1.294%201.294%200%200%201-.389-.951V5.257h1.083v10.57c0%20.064.027.123.08.176.054.054.113.08.177.08h10.57v1.084H3.965Z%22%2F%3E%3C%2Fsvg%3E");
+$icon-schedule: 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%22m12.936%2013.398.774-.775-3.168-3.168V5H9.458v4.92l3.478%203.478ZM10%2017.582a7.385%207.385%200%200%201-2.945-.592%207.656%207.656%200%200%201-2.417-1.63%207.646%207.646%200%200%201-1.63-2.418%207.408%207.408%200%200%201-.592-2.951%207.522%207.522%200%200%201%202.221-5.363%207.734%207.734%200%200%201%202.419-1.62%207.408%207.408%200%200%201%202.951-.592c1.047%200%202.031.199%202.953.597a7.652%207.652%200%200%201%202.406%201.62%207.657%207.657%200%200%201%201.62%202.408c.397.922.596%201.908.596%202.957a7.386%207.386%200%200%201-.592%202.945%207.745%207.745%200%200%201-1.619%202.417%207.513%207.513%200%200%201-5.37%202.222Zm.009-1.083c1.798%200%203.33-.635%204.594-1.906%201.264-1.271%201.896-2.806%201.896-4.604s-.632-3.33-1.896-4.594C13.339%204.132%2011.808%203.5%2010.01%203.5c-1.798%200-3.333.632-4.604%201.896C4.136%206.661%203.5%208.192%203.5%209.99c0%201.798.635%203.333%201.906%204.604%201.271%201.27%202.806%201.906%204.604%201.906Z%22%2F%3E%3C%2Fsvg%3E");
 $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");
 $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");
 $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

@@ -111,4 +111,16 @@
 
 @mixin icon-filter-off {
   @include with-icon(raw.$icon-filter-off);
+}
+
+@mixin icon-home {
+  @include with-icon(raw.$icon-home);
+}
+
+@mixin icon-schedule {
+  @include with-icon(raw.$icon-schedule);
+}
+
+@mixin icon-pdf {
+  @include with-icon(raw.$icon-pdf);
 }