@kth/style 1.1.0 → 1.2.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 (4) hide show
  1. package/package.json +1 -1
  2. package/scss/components/button.scss +4 -0
  3. package/scss/tokens/icons-raw.scss +2 -0
  4. package/scss/tokens/icons.scss +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kth/style",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {
package/scss/components/button.scss CHANGED
@@ -103,6 +103,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
103
103
  .kth-button.menu::before {
104
104
  @include icons.icon-menu;
105
105
  width: 20px;
106
+ min-width: 20px;
106
107
  height: 20px;
107
108
  background-color: var(--color-tertiary);
108
109
  }
@@ -110,6 +111,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
110
111
  .kth-button.back::before {
111
112
  @include icons.icon-arrow-back;
112
113
  width: 20px;
114
+ min-width: 20px;
113
115
  height: 20px;
114
116
  background-color: var(--color-tertiary);
115
117
  }
@@ -121,6 +123,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
121
123
  .kth-button.previous::before {
122
124
  @include icons.icon-arrow-back-500;
123
125
  width: 20px;
126
+ min-width: 20px;
124
127
  height: 20px;
125
128
  background-color: var(--color-text);
126
129
  }
@@ -132,6 +135,7 @@ $icon-size: calc(#{spacing.$space-24} + 2 * var(--space-inner-icon));
132
135
  .kth-button.next::after {
133
136
  @include icons.icon-arrow-forward-500;
134
137
  width: 20px;
138
+ min-width: 20px;
135
139
  height: 20px;
136
140
  background-color: var(--color-on-primary);
137
141
  }
package/scss/tokens/icons-raw.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /* This file is autogenerated with `scripts/generate-icons.mjs */
2
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
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-card-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%22M4.756%208.84a1.3%201.3%200%200%201-.944-.389%201.282%201.282%200%200%201-.395-.951V5.013c0-.365.132-.68.396-.944.263-.264.578-.396.943-.396h10.488c.375%200%20.692.132.95.396a1.3%201.3%200%200%201%20.39.944V7.5c0%20.375-.13.692-.39.951a1.294%201.294%200%200%201-.95.389H4.755Zm0-1.084h10.488a.245.245%200%200%200%20.176-.08.244.244%200%200%200%20.08-.176V5.013a.244.244%200%200%200-.08-.176.245.245%200%200%200-.177-.08H4.756a.245.245%200%200%200-.176.08.245.245%200%200%200-.08.176V7.5c0%20.064.027.123.08.176.054.054.112.08.176.08Zm0%208.57a1.3%201.3%200%200%201-.944-.388%201.282%201.282%200%200%201-.395-.95V12.5c0-.365.132-.68.396-.944.263-.264.578-.396.943-.396h10.488c.375%200%20.692.132.95.396.26.264.39.579.39.944v2.487c0%20.375-.13.692-.39.951-.258.26-.575.389-.95.389H4.755Zm0-1.083h10.488a.244.244%200%200%200%20.176-.08.244.244%200%200%200%20.08-.176V12.5a.244.244%200%200%200-.08-.176.245.245%200%200%200-.177-.08H4.756a.245.245%200%200%200-.176.08.244.244%200%200%200-.08.176v2.487c0%20.064.027.123.08.176.054.054.112.08.176.08Z%22%2F%3E%3C%2Fsvg%3E");
4
5
  $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
6
  $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
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");
@@ -11,6 +12,7 @@ $icon-fullscreen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w
11
12
  $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
13
  $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
14
  $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
+ $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");
14
16
  $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
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");
16
18
  $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");
package/scss/tokens/icons.scss CHANGED
@@ -91,3 +91,11 @@
91
91
  @include with-icon(raw.$icon-spinner);
92
92
  animation: spin 750ms infinite linear;
93
93
  }
94
+
95
+ @mixin icon-card-view {
96
+ @include with-icon(raw.$icon-card-view);
97
+ }
98
+
99
+ @mixin icon-list-view {
100
+ @include with-icon(raw.$icon-list-view);
101
+ }