@jorilindell/hds-core 4.10.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 City of Helsinki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# hds-core [![npm](https://img.shields.io/npm/v/hds-core?style=flat-square)](https://www.npmjs.com/package/hds-core) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/hds-core?label=gzipped%20size&style=flat-square)](https://bundlephobia.com/result?p=hds-core)
+
+Base styles and individual HTML component styles for the Helsinki Design System.
+
+:books: [See the components in Storybook](https://hds.hel.fi/storybook/core)
+
+## Getting started
+
+Install the package.
+
+```bash
+yarn add hds-core
+```
+
+### What's included
+
+```
+hds-core/
+├── src/                # source css
+└── lib/
+    ├── components/     # collection of HDS component styles
+    │   ├── all.css               # bundled stylesheet including all components
+    |   └── <component name>/     # component stylesheets
+    │       ├── <component name>.css
+    │       :
+    │
+    ├── icons/          # collection of HDS icon styles
+    │   ├── icons.css               # bundled stylesheet including all icons
+    │   ├── icon.css              # base styles for icons
+    │   ├── icon-<icon name>.css  # individual icon stylesheet
+    │   :
+    │
+    ├── utils/          # utility stylesheets
+    ├── variables/      # collection of css variables and base styles
+    └── base.css        # base styles
+```
+
+### Using the styles
+
+To import styles for all the core components, you'll need two stylesheets: `base.css` (the base styles and CSS variables) and `components/all.css`. If you use any of the icons, you'll also need `icons/icons.css`. Do note that the `components/all.css` bundles all the components and `icons/icons.css` bundles all the icons into single stylesheets and thus are large in filesize.
+
+Therefore, we do recommend that you use individual component and icon stylesheets instead of the bundled styles.
+
+JS
+```js
+// import base styles and css variables
+import "hds-core";
+```
+
+### Helsinki fonts
+
+The Helsinki fonts are not included in the package due to copyright reasons.
+
+### Overriding styles
+
+Helsinki Design System uses CSS variables from the [hds-design-tokens](https://www.npmjs.com/package/hds-design-tokens) package to control coloring, spacing and layout. You can override these variables if necessary, but it is not recommended.
+
+## Development
+
+Read more [here](DEVELOPMENT.md).
+
+## Built with
+
+- [PostCSS](https://github.com/postcss/postcss)
+- [Storybook](https://storybook.js.org/)
+- hds-core follows the [BEM methodology](http://getbem.com/)

package/lib/base.css

@@ -0,0 +1,243 @@
+:root {
+  --breakpoint-xs: 320px;
+  --breakpoint-s: 576px;
+  --breakpoint-m: 768px;
+  --breakpoint-l: 992px;
+  --breakpoint-xl: 1248px;
+  --container-width-xs: 288px;
+  --container-width-s: 544px;
+  --container-width-m: 720px;
+  --container-width-l: 944px;
+  --container-width-xl: 1200px;
+  --color-brick: #bd2719;
+  --color-brick-light: #ffeeed;
+  --color-brick-medium-light: #facbc8;
+  --color-brick-dark: #800e04;
+  --color-bus: #0000bf;
+  --color-bus-light: #f0f0ff;
+  --color-bus-medium-light: #ccccff;
+  --color-bus-dark: #00005e;
+  --color-coat-of-arms: #0072c6;
+  --color-coat-of-arms-light: #e6f4ff;
+  --color-coat-of-arms-medium-light: #b5daf7;
+  --color-coat-of-arms-dark: #005799;
+  --color-copper: #00d7a7;
+  --color-copper-light: #cffaf1;
+  --color-copper-medium-light: #9ef0de;
+  --color-copper-dark: #00a17d;
+  --color-engel: #ffe977;
+  --color-engel-light: #fff9db;
+  --color-engel-medium-light: #fff3b8;
+  --color-engel-dark: #dbc030;
+  --color-fog: #9fc9eb;
+  --color-fog-light: #e8f3fc;
+  --color-fog-medium-light: #d0e6f7;
+  --color-fog-dark: #72a5cf;
+  --color-gold: #c2a251;
+  --color-gold-light: #f7f2e4;
+  --color-gold-medium-light: #e8d7a7;
+  --color-gold-dark: #9e823c;
+  --color-metro: #fd4f00;
+  --color-metro-light: #ffeee6;
+  --color-metro-medium-light: #ffcab3;
+  --color-metro-dark: #bd2f00;
+  --color-silver: #dedfe1;
+  --color-silver-light: #f7f7f8;
+  --color-silver-medium-light: #efeff0;
+  --color-silver-dark: #b0b8bf;
+  --color-summer: #ffc61e;
+  --color-summer-light: #fff4d4;
+  --color-summer-medium-light: #ffe49c;
+  --color-summer-dark: #cc9200;
+  --color-suomenlinna: #f5a3c7;
+  --color-suomenlinna-light: #fff0f7;
+  --color-suomenlinna-medium-light: #ffdbeb;
+  --color-suomenlinna-dark: #e673a5;
+  --color-tram: #008741;
+  --color-tram-light: #dff7eb;
+  --color-tram-medium-light: #a3e3c2;
+  --color-tram-dark: #006631;
+  --color-focus-outline: #0072c6;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-black-5: #f2f2f2;
+  --color-black-10: #e6e6e6;
+  --color-black-20: #cccccc;
+  --color-black-30: #b3b3b3;
+  --color-black-40: #999999;
+  --color-black-50: #808080;
+  --color-black-60: #595959;
+  --color-black-70: #4d4d4d;
+  --color-black-80: #333333;
+  --color-black-90: #1a1a1a;
+  --color-error: #b01038;
+  --color-error-light: #f6e2e6;
+  --color-error-dark: #8d0d2d;
+  --color-success: #007a64;
+  --color-success-light: #e2f5f3;
+  --color-success-dark: #006250;
+  --color-alert: #ffda07;
+  --color-alert-light: #fff4b4;
+  --color-alert-dark: #d18200;
+  --color-info: #0062b9;
+  --color-info-light: #e5eff8;
+  --color-info-dark: #004f94;
+  --box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);
+  --box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  --box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);
+  --spacing-layout-2-xs: 1rem; /* 16px */
+  --spacing-layout-xs: 1.5rem; /* 24px */
+  --spacing-layout-s: 2rem; /* 32px */
+  --spacing-layout-m: 3rem; /* 48px */
+  --spacing-layout-l: 4rem; /* 64px */
+  --spacing-layout-xl: 6rem; /* 96px */
+  --spacing-layout-2-xl: 8rem; /* 128px */
+  --spacing-4-xs: 0.125rem; /* 2px */
+  --spacing-3-xs: 0.25rem; /* 4px */
+  --spacing-2-xs: 0.5rem; /* 8px */
+  --spacing-xs: 0.75rem; /* 12px */
+  --spacing-s: 1rem; /* 16px */
+  --spacing-m: 1.5rem; /* 24px */
+  --spacing-l: 2rem; /* 32px */
+  --spacing-xl: 2.5rem; /* 40px */
+  --spacing-2-xl: 3.0rem; /* 48px */
+  --spacing-3-xl: 3.5rem; /* 56px */
+  --spacing-4-xl: 4rem; /* 64px */
+  --spacing-5-xl: 4.5rem; /* 72px */
+  --fontsize-heading-xxl: 4rem; /* 64px */
+  --fontsize-heading-xl: 3rem; /* 48px */
+  --fontsize-heading-xl-mobile: 2.5rem; /* 40px */
+  --fontsize-heading-l: 2rem; /* 32px */
+  --fontsize-heading-m: 1.5rem; /* 24px */
+  --fontsize-heading-s: 1.25rem; /* 20px */
+  --fontsize-heading-xs: 1.125rem; /* 18px */
+  --fontsize-heading-xxs: 1rem; /* 16px */
+  --fontsize-body-s: 0.875rem; /* 14px */
+  --fontsize-body-m: 1rem; /* 16px */
+  --fontsize-body-l: 1.125rem; /* 18px */
+  --fontsize-body-xl: 1.25rem; /* 20px */
+  --font-default: HelsinkiGrotesk, Arial, sans-serif;
+  --lineheight-s: 1;
+  --lineheight-m: 1.2;
+  --lineheight-l: 1.5;
+  --lineheight-xl: 1.75;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+.visually-hidden {
+  border: 0;
+  clip: 'rect(0 0 0 0)';
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.button-reset {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+.text-body {
+  color: var(--color-black-90);
+  font-family: var(--font-default);
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+}
+.text-medium {
+  font-family: var(--font-default);
+  font-weight: 500;
+}
+.text-bold {
+  font-family: var(--font-default);
+  font-weight: bold;
+}
+.text-xl {
+  font-size: var(--fontsize-heading-m);
+}
+.text-lg {
+  font-size: var(--fontsize-heading-s);
+}
+.text-md {
+  font-size: var(--fontsize-heading-xs);
+}
+.subtitle {
+  font-size: var(--fontsize-body-m);
+}
+.text-sm {
+  font-size: var(--fontsize-body-s);
+  line-height: var(--lineheight-xl);
+}
+/* HEADINGS */
+.heading-xxl {
+  font-size: var(--fontsize-heading-xxl);
+  font-weight: 400;
+  letter-spacing: -1.2px;
+  line-height: var(--lineheight-s);
+}
+.heading-xl {
+  font-size: var(--fontsize-heading-xl);
+  font-weight: 400;
+  letter-spacing: -1px;
+  line-height: var(--lineheight-s);
+}
+.heading-xl-mobile {
+  font-size: var(--fontsize-heading-xl-mobile);
+  font-weight: 400;
+  letter-spacing: -0.8px;
+  line-height: var(--lineheight-s);
+}
+.heading-l {
+  font-size: var(--fontsize-heading-l);
+  font-weight: 400;
+  letter-spacing: -0.4px;
+  line-height: var(--lineheight-m);
+}
+.heading-m {
+  font-size: var(--fontsize-heading-m);
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: var(--lineheight-m);
+}
+.heading-s {
+  font-size: var(--fontsize-heading-s);
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: var(--lineheight-l);
+}
+.heading-xs {
+  font-size: var(--fontsize-heading-xs);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: var(--lineheight-l);
+}
+.heading-xxs {
+  font-size: var(--fontsize-heading-xxs);
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  line-height: var(--lineheight-l);
+}
+.helper-text {
+  color: var(--color-black-60);
+  display: block;
+  flex-basis: 100%;
+  font-size: var(--fontsize-body-m);
+  margin-top: var(--spacing-2-xs);
+}
+/*
+ * Normalize.css rule
+ */
+html {
+  -webkit-text-size-adjust: 100%;
+}

package/lib/base.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../node_modules/hds-design-tokens/lib/all.css","../src/utils/animations.css","../src/utils/helpers.css","../src/base.css%23sass","../src/base.css"],"names":[],"mappings":"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","file":"base.css","sourcesContent":[":root {\n  --breakpoint-xs: 320px;\n  --breakpoint-s: 576px;\n  --breakpoint-m: 768px;\n  --breakpoint-l: 992px;\n  --breakpoint-xl: 1248px;\n  --container-width-xs: 288px;\n  --container-width-s: 544px;\n  --container-width-m: 720px;\n  --container-width-l: 944px;\n  --container-width-xl: 1200px;\n  --color-brick: #bd2719;\n  --color-brick-light: #ffeeed;\n  --color-brick-medium-light: #facbc8;\n  --color-brick-dark: #800e04;\n  --color-bus: #0000bf;\n  --color-bus-light: #f0f0ff;\n  --color-bus-medium-light: #ccccff;\n  --color-bus-dark: #00005e;\n  --color-coat-of-arms: #0072c6;\n  --color-coat-of-arms-light: #e6f4ff;\n  --color-coat-of-arms-medium-light: #b5daf7;\n  --color-coat-of-arms-dark: #005799;\n  --color-copper: #00d7a7;\n  --color-copper-light: #cffaf1;\n  --color-copper-medium-light: #9ef0de;\n  --color-copper-dark: #00a17d;\n  --color-engel: #ffe977;\n  --color-engel-light: #fff9db;\n  --color-engel-medium-light: #fff3b8;\n  --color-engel-dark: #dbc030;\n  --color-fog: #9fc9eb;\n  --color-fog-light: #e8f3fc;\n  --color-fog-medium-light: #d0e6f7;\n  --color-fog-dark: #72a5cf;\n  --color-gold: #c2a251;\n  --color-gold-light: #f7f2e4;\n  --color-gold-medium-light: #e8d7a7;\n  --color-gold-dark: #9e823c;\n  --color-metro: #fd4f00;\n  --color-metro-light: #ffeee6;\n  --color-metro-medium-light: #ffcab3;\n  --color-metro-dark: #bd2f00;\n  --color-silver: #dedfe1;\n  --color-silver-light: #f7f7f8;\n  --color-silver-medium-light: #efeff0;\n  --color-silver-dark: #b0b8bf;\n  --color-summer: #ffc61e;\n  --color-summer-light: #fff4d4;\n  --color-summer-medium-light: #ffe49c;\n  --color-summer-dark: #cc9200;\n  --color-suomenlinna: #f5a3c7;\n  --color-suomenlinna-light: #fff0f7;\n  --color-suomenlinna-medium-light: #ffdbeb;\n  --color-suomenlinna-dark: #e673a5;\n  --color-tram: #008741;\n  --color-tram-light: #dff7eb;\n  --color-tram-medium-light: #a3e3c2;\n  --color-tram-dark: #006631;\n  --color-focus-outline: #0072c6;\n  --color-black: #000000;\n  --color-white: #ffffff;\n  --color-black-5: #f2f2f2;\n  --color-black-10: #e6e6e6;\n  --color-black-20: #cccccc;\n  --color-black-30: #b3b3b3;\n  --color-black-40: #999999;\n  --color-black-50: #808080;\n  --color-black-60: #595959;\n  --color-black-70: #4d4d4d;\n  --color-black-80: #333333;\n  --color-black-90: #1a1a1a;\n  --color-error: #b01038;\n  --color-error-light: #f6e2e6;\n  --color-error-dark: #8d0d2d;\n  --color-success: #007a64;\n  --color-success-light: #e2f5f3;\n  --color-success-dark: #006250;\n  --color-alert: #ffda07;\n  --color-alert-light: #fff4b4;\n  --color-alert-dark: #d18200;\n  --color-info: #0062b9;\n  --color-info-light: #e5eff8;\n  --color-info-dark: #004f94;\n  --box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);\n  --box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);\n  --box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);\n  --spacing-layout-2-xs: 1rem; /* 16px */\n  --spacing-layout-xs: 1.5rem; /* 24px */\n  --spacing-layout-s: 2rem; /* 32px */\n  --spacing-layout-m: 3rem; /* 48px */\n  --spacing-layout-l: 4rem; /* 64px */\n  --spacing-layout-xl: 6rem; /* 96px */\n  --spacing-layout-2-xl: 8rem; /* 128px */\n  --spacing-4-xs: 0.125rem; /* 2px */\n  --spacing-3-xs: 0.25rem; /* 4px */\n  --spacing-2-xs: 0.5rem; /* 8px */\n  --spacing-xs: 0.75rem; /* 12px */\n  --spacing-s: 1rem; /* 16px */\n  --spacing-m: 1.5rem; /* 24px */\n  --spacing-l: 2rem; /* 32px */\n  --spacing-xl: 2.5rem; /* 40px */\n  --spacing-2-xl: 3.0rem; /* 48px */\n  --spacing-3-xl: 3.5rem; /* 56px */\n  --spacing-4-xl: 4rem; /* 64px */\n  --spacing-5-xl: 4.5rem; /* 72px */\n  --fontsize-heading-xxl: 4rem; /* 64px */\n  --fontsize-heading-xl: 3rem; /* 48px */\n  --fontsize-heading-xl-mobile: 2.5rem; /* 40px */\n  --fontsize-heading-l: 2rem; /* 32px */\n  --fontsize-heading-m: 1.5rem; /* 24px */\n  --fontsize-heading-s: 1.25rem; /* 20px */\n  --fontsize-heading-xs: 1.125rem; /* 18px */\n  --fontsize-heading-xxs: 1rem; /* 16px */\n  --fontsize-body-s: 0.875rem; /* 14px */\n  --fontsize-body-m: 1rem; /* 16px */\n  --fontsize-body-l: 1.125rem; /* 18px */\n  --fontsize-body-xl: 1.25rem; /* 20px */\n  --font-default: HelsinkiGrotesk, Arial, sans-serif;\n  --lineheight-s: 1;\n  --lineheight-m: 1.2;\n  --lineheight-l: 1.5;\n  --lineheight-xl: 1.75;\n}\n","@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n",".visually-hidden {\n  border: 0;\n  clip: 'rect(0 0 0 0)';\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.button-reset {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n\n.text-body {\n  color: var(--color-black-90);\n  font-family: var(--font-default);\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n\n.text-medium {\n  font-family: var(--font-default);\n  font-weight: 500;\n}\n\n.text-bold {\n  font-family: var(--font-default);\n  font-weight: bold;\n}\n\n.text-xl {\n  font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n  font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n  font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n  font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n  font-size: var(--fontsize-body-s);\n  line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n  font-size: var(--fontsize-heading-xxl);\n  font-weight: 400;\n  letter-spacing: -1.2px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n  font-size: var(--fontsize-heading-xl);\n  font-weight: 400;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: 400;\n  letter-spacing: -0.8px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-l {\n  font-size: var(--fontsize-heading-l);\n  font-weight: 400;\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-m {\n  font-size: var(--fontsize-heading-m);\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-s {\n  font-size: var(--fontsize-heading-s);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xs {\n  font-size: var(--fontsize-heading-xs);\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xxs {\n  font-size: var(--fontsize-heading-xxs);\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  line-height: var(--lineheight-l);\n}\n\n.helper-text {\n  color: var(--color-black-60);\n  display: block;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n}\n","@import url(\"hds-design-tokens\");\n@import url(\"utils/animations.css\");\n@import url(\"utils/helpers.css\");\n\n/*\n * Normalize.css rule\n */\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n","@import url(\"hds-design-tokens\");\n@import url(\"utils/animations.css\");\n@import url(\"utils/helpers.css\");\n\n/*\n * Normalize.css rule\n */\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n"]}

package/lib/base.min.css

@@ -0,0 +1 @@
+:root{--breakpoint-xs:320px;--breakpoint-s:576px;--breakpoint-m:768px;--breakpoint-l:992px;--breakpoint-xl:1248px;--container-width-xs:288px;--container-width-s:544px;--container-width-m:720px;--container-width-l:944px;--container-width-xl:1200px;--color-brick:#bd2719;--color-brick-light:#ffeeed;--color-brick-medium-light:#facbc8;--color-brick-dark:#800e04;--color-bus:#0000bf;--color-bus-light:#f0f0ff;--color-bus-medium-light:#ccf;--color-bus-dark:#00005e;--color-coat-of-arms:#0072c6;--color-coat-of-arms-light:#e6f4ff;--color-coat-of-arms-medium-light:#b5daf7;--color-coat-of-arms-dark:#005799;--color-copper:#00d7a7;--color-copper-light:#cffaf1;--color-copper-medium-light:#9ef0de;--color-copper-dark:#00a17d;--color-engel:#ffe977;--color-engel-light:#fff9db;--color-engel-medium-light:#fff3b8;--color-engel-dark:#dbc030;--color-fog:#9fc9eb;--color-fog-light:#e8f3fc;--color-fog-medium-light:#d0e6f7;--color-fog-dark:#72a5cf;--color-gold:#c2a251;--color-gold-light:#f7f2e4;--color-gold-medium-light:#e8d7a7;--color-gold-dark:#9e823c;--color-metro:#fd4f00;--color-metro-light:#ffeee6;--color-metro-medium-light:#ffcab3;--color-metro-dark:#bd2f00;--color-silver:#dedfe1;--color-silver-light:#f7f7f8;--color-silver-medium-light:#efeff0;--color-silver-dark:#b0b8bf;--color-summer:#ffc61e;--color-summer-light:#fff4d4;--color-summer-medium-light:#ffe49c;--color-summer-dark:#cc9200;--color-suomenlinna:#f5a3c7;--color-suomenlinna-light:#fff0f7;--color-suomenlinna-medium-light:#ffdbeb;--color-suomenlinna-dark:#e673a5;--color-tram:#008741;--color-tram-light:#dff7eb;--color-tram-medium-light:#a3e3c2;--color-tram-dark:#006631;--color-focus-outline:#0072c6;--color-black:#000;--color-white:#fff;--color-black-5:#f2f2f2;--color-black-10:#e6e6e6;--color-black-20:#ccc;--color-black-30:#b3b3b3;--color-black-40:#999;--color-black-50:grey;--color-black-60:#595959;--color-black-70:#4d4d4d;--color-black-80:#333;--color-black-90:#1a1a1a;--color-error:#b01038;--color-error-light:#f6e2e6;--color-error-dark:#8d0d2d;--color-success:#007a64;--color-success-light:#e2f5f3;--color-success-dark:#006250;--color-alert:#ffda07;--color-alert-light:#fff4b4;--color-alert-dark:#d18200;--color-info:#0062b9;--color-info-light:#e5eff8;--color-info-dark:#004f94;--box-shadow-s:0px 2px 10px 0px rgba(0,0,0,0.07);--box-shadow-m:0px 2px 10px 0px rgba(0,0,0,0.1);--box-shadow-l:0px 2px 20px 0px rgba(0,0,0,0.2);--spacing-layout-2-xs:1rem;--spacing-layout-xs:1.5rem;--spacing-layout-s:2rem;--spacing-layout-m:3rem;--spacing-layout-l:4rem;--spacing-layout-xl:6rem;--spacing-layout-2-xl:8rem;--spacing-4-xs:0.125rem;--spacing-3-xs:0.25rem;--spacing-2-xs:0.5rem;--spacing-xs:0.75rem;--spacing-s:1rem;--spacing-m:1.5rem;--spacing-l:2rem;--spacing-xl:2.5rem;--spacing-2-xl:3.0rem;--spacing-3-xl:3.5rem;--spacing-4-xl:4rem;--spacing-5-xl:4.5rem;--fontsize-heading-xxl:4rem;--fontsize-heading-xl:3rem;--fontsize-heading-xl-mobile:2.5rem;--fontsize-heading-l:2rem;--fontsize-heading-m:1.5rem;--fontsize-heading-s:1.25rem;--fontsize-heading-xs:1.125rem;--fontsize-heading-xxs:1rem;--fontsize-body-s:0.875rem;--fontsize-body-m:1rem;--fontsize-body-l:1.125rem;--fontsize-body-xl:1.25rem;--font-default:HelsinkiGrotesk,Arial,sans-serif;--lineheight-s:1;--lineheight-m:1.2;--lineheight-l:1.5;--lineheight-xl:1.75}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.visually-hidden{border:0;clip:"rect(0 0 0 0)";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.button-reset{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.text-body{color:var(--color-black-90);font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}.text-body,.text-medium{font-family:var(--font-default)}.text-medium{font-weight:500}.text-bold{font-family:var(--font-default);font-weight:700}.text-xl{font-size:var(--fontsize-heading-m)}.text-lg{font-size:var(--fontsize-heading-s)}.text-md{font-size:var(--fontsize-heading-xs)}.subtitle{font-size:var(--fontsize-body-m)}.text-sm{font-size:var(--fontsize-body-s);line-height:var(--lineheight-xl)}.heading-xxl{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px}.heading-xl,.heading-xxl{font-weight:400;line-height:var(--lineheight-s)}.heading-xl{font-size:var(--fontsize-heading-xl);letter-spacing:-1px}.heading-xl-mobile{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-.8px;line-height:var(--lineheight-s)}.heading-l{font-size:var(--fontsize-heading-l);font-weight:400;letter-spacing:-.4px}.heading-l,.heading-m{line-height:var(--lineheight-m)}.heading-m{font-size:var(--fontsize-heading-m);font-weight:500;letter-spacing:-.2px}.heading-s{font-size:var(--fontsize-heading-s);font-weight:500}.heading-s,.heading-xs{letter-spacing:0;line-height:var(--lineheight-l)}.heading-xs{font-size:var(--fontsize-heading-xs);font-weight:700}.heading-xxs{font-size:var(--fontsize-heading-xxs);font-weight:700;letter-spacing:.2px;line-height:var(--lineheight-l)}.helper-text{color:var(--color-black-60);display:block;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs)}html{-webkit-text-size-adjust:100%}

package/lib/base.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../node_modules/hds-design-tokens/lib/all.css","../src/utils/animations.css","../src/utils/helpers.css","../src/base.css%23sass","../src/base.css"],"names":[],"mappings":"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","file":"base.min.css","sourcesContent":[":root {\n  --breakpoint-xs: 320px;\n  --breakpoint-s: 576px;\n  --breakpoint-m: 768px;\n  --breakpoint-l: 992px;\n  --breakpoint-xl: 1248px;\n  --container-width-xs: 288px;\n  --container-width-s: 544px;\n  --container-width-m: 720px;\n  --container-width-l: 944px;\n  --container-width-xl: 1200px;\n  --color-brick: #bd2719;\n  --color-brick-light: #ffeeed;\n  --color-brick-medium-light: #facbc8;\n  --color-brick-dark: #800e04;\n  --color-bus: #0000bf;\n  --color-bus-light: #f0f0ff;\n  --color-bus-medium-light: #ccccff;\n  --color-bus-dark: #00005e;\n  --color-coat-of-arms: #0072c6;\n  --color-coat-of-arms-light: #e6f4ff;\n  --color-coat-of-arms-medium-light: #b5daf7;\n  --color-coat-of-arms-dark: #005799;\n  --color-copper: #00d7a7;\n  --color-copper-light: #cffaf1;\n  --color-copper-medium-light: #9ef0de;\n  --color-copper-dark: #00a17d;\n  --color-engel: #ffe977;\n  --color-engel-light: #fff9db;\n  --color-engel-medium-light: #fff3b8;\n  --color-engel-dark: #dbc030;\n  --color-fog: #9fc9eb;\n  --color-fog-light: #e8f3fc;\n  --color-fog-medium-light: #d0e6f7;\n  --color-fog-dark: #72a5cf;\n  --color-gold: #c2a251;\n  --color-gold-light: #f7f2e4;\n  --color-gold-medium-light: #e8d7a7;\n  --color-gold-dark: #9e823c;\n  --color-metro: #fd4f00;\n  --color-metro-light: #ffeee6;\n  --color-metro-medium-light: #ffcab3;\n  --color-metro-dark: #bd2f00;\n  --color-silver: #dedfe1;\n  --color-silver-light: #f7f7f8;\n  --color-silver-medium-light: #efeff0;\n  --color-silver-dark: #b0b8bf;\n  --color-summer: #ffc61e;\n  --color-summer-light: #fff4d4;\n  --color-summer-medium-light: #ffe49c;\n  --color-summer-dark: #cc9200;\n  --color-suomenlinna: #f5a3c7;\n  --color-suomenlinna-light: #fff0f7;\n  --color-suomenlinna-medium-light: #ffdbeb;\n  --color-suomenlinna-dark: #e673a5;\n  --color-tram: #008741;\n  --color-tram-light: #dff7eb;\n  --color-tram-medium-light: #a3e3c2;\n  --color-tram-dark: #006631;\n  --color-focus-outline: #0072c6;\n  --color-black: #000000;\n  --color-white: #ffffff;\n  --color-black-5: #f2f2f2;\n  --color-black-10: #e6e6e6;\n  --color-black-20: #cccccc;\n  --color-black-30: #b3b3b3;\n  --color-black-40: #999999;\n  --color-black-50: #808080;\n  --color-black-60: #595959;\n  --color-black-70: #4d4d4d;\n  --color-black-80: #333333;\n  --color-black-90: #1a1a1a;\n  --color-error: #b01038;\n  --color-error-light: #f6e2e6;\n  --color-error-dark: #8d0d2d;\n  --color-success: #007a64;\n  --color-success-light: #e2f5f3;\n  --color-success-dark: #006250;\n  --color-alert: #ffda07;\n  --color-alert-light: #fff4b4;\n  --color-alert-dark: #d18200;\n  --color-info: #0062b9;\n  --color-info-light: #e5eff8;\n  --color-info-dark: #004f94;\n  --box-shadow-s: 0px 2px 10px 0px rgba(0, 0, 0, 0.07);\n  --box-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);\n  --box-shadow-l: 0px 2px 20px 0px rgba(0, 0, 0, 0.2);\n  --spacing-layout-2-xs: 1rem; /* 16px */\n  --spacing-layout-xs: 1.5rem; /* 24px */\n  --spacing-layout-s: 2rem; /* 32px */\n  --spacing-layout-m: 3rem; /* 48px */\n  --spacing-layout-l: 4rem; /* 64px */\n  --spacing-layout-xl: 6rem; /* 96px */\n  --spacing-layout-2-xl: 8rem; /* 128px */\n  --spacing-4-xs: 0.125rem; /* 2px */\n  --spacing-3-xs: 0.25rem; /* 4px */\n  --spacing-2-xs: 0.5rem; /* 8px */\n  --spacing-xs: 0.75rem; /* 12px */\n  --spacing-s: 1rem; /* 16px */\n  --spacing-m: 1.5rem; /* 24px */\n  --spacing-l: 2rem; /* 32px */\n  --spacing-xl: 2.5rem; /* 40px */\n  --spacing-2-xl: 3.0rem; /* 48px */\n  --spacing-3-xl: 3.5rem; /* 56px */\n  --spacing-4-xl: 4rem; /* 64px */\n  --spacing-5-xl: 4.5rem; /* 72px */\n  --fontsize-heading-xxl: 4rem; /* 64px */\n  --fontsize-heading-xl: 3rem; /* 48px */\n  --fontsize-heading-xl-mobile: 2.5rem; /* 40px */\n  --fontsize-heading-l: 2rem; /* 32px */\n  --fontsize-heading-m: 1.5rem; /* 24px */\n  --fontsize-heading-s: 1.25rem; /* 20px */\n  --fontsize-heading-xs: 1.125rem; /* 18px */\n  --fontsize-heading-xxs: 1rem; /* 16px */\n  --fontsize-body-s: 0.875rem; /* 14px */\n  --fontsize-body-m: 1rem; /* 16px */\n  --fontsize-body-l: 1.125rem; /* 18px */\n  --fontsize-body-xl: 1.25rem; /* 20px */\n  --font-default: HelsinkiGrotesk, Arial, sans-serif;\n  --lineheight-s: 1;\n  --lineheight-m: 1.2;\n  --lineheight-l: 1.5;\n  --lineheight-xl: 1.75;\n}\n","@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n",".visually-hidden {\n  border: 0;\n  clip: 'rect(0 0 0 0)';\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.button-reset {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n\n.text-body {\n  color: var(--color-black-90);\n  font-family: var(--font-default);\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n\n.text-medium {\n  font-family: var(--font-default);\n  font-weight: 500;\n}\n\n.text-bold {\n  font-family: var(--font-default);\n  font-weight: bold;\n}\n\n.text-xl {\n  font-size: var(--fontsize-heading-m);\n}\n\n.text-lg {\n  font-size: var(--fontsize-heading-s);\n}\n\n.text-md {\n  font-size: var(--fontsize-heading-xs);\n}\n\n.subtitle {\n  font-size: var(--fontsize-body-m);\n}\n\n.text-sm {\n  font-size: var(--fontsize-body-s);\n  line-height: var(--lineheight-xl);\n}\n\n/* HEADINGS */\n\n.heading-xxl {\n  font-size: var(--fontsize-heading-xxl);\n  font-weight: 400;\n  letter-spacing: -1.2px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl {\n  font-size: var(--fontsize-heading-xl);\n  font-weight: 400;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-xl-mobile {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: 400;\n  letter-spacing: -0.8px;\n  line-height: var(--lineheight-s);\n}\n\n.heading-l {\n  font-size: var(--fontsize-heading-l);\n  font-weight: 400;\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-m {\n  font-size: var(--fontsize-heading-m);\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n}\n\n.heading-s {\n  font-size: var(--fontsize-heading-s);\n  font-weight: 500;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xs {\n  font-size: var(--fontsize-heading-xs);\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: var(--lineheight-l);\n}\n\n.heading-xxs {\n  font-size: var(--fontsize-heading-xxs);\n  font-weight: 700;\n  letter-spacing: 0.2px;\n  line-height: var(--lineheight-l);\n}\n\n.helper-text {\n  color: var(--color-black-60);\n  display: block;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n}\n","@import url(\"hds-design-tokens\");\n@import url(\"utils/animations.css\");\n@import url(\"utils/helpers.css\");\n\n/*\n * Normalize.css rule\n */\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n","@import url(\"hds-design-tokens\");\n@import url(\"utils/animations.css\");\n@import url(\"utils/helpers.css\");\n\n/*\n * Normalize.css rule\n */\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n"]}