@swr-data-lab/components 1.0.9 → 1.0.10

package/package.json

@@ -55,5 +55,5 @@
       "@semantic-release/npm"
     ]
   },
-  "version": "1.0.9"
+  "version": "1.0.10"
 }

package/src/Autocomplete/Autocomplete.svelte

@@ -1,86 +1,90 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import Circle from '../assets/icons/times-circle-solid.svg.svelte';
-
-  export let data = [];
-  export let query = '';
-  export let placeholder = 'Platzhalter';
-  
-  
-  const sortData = (a, b) => {
-    return a.value.localeCompare(b.value);
-  }
-  
-  let listRef;
-  let controlsRef;
-  let inputRef;
-  const dispatch = createEventDispatcher();
-
-  let highlightedItemIndex = -1;
-  $: suggestions = data.sort(sortData).slice(0, 50);
-  $: isActive = false;
-
-  // Insert clicked item into search input,
-  // dispatch it as select event and close the dropdown
-  const handleItemClick = (index) => {
-    highlightedItemIndex = index;
-    setSelectedItem(suggestions[highlightedItemIndex]);
-  };
-
-  const setSelectedItem = (item) => {
-    query = item.value;
-    isActive = false;
-    dispatch('select', { item });
-  };
-
-  // Register keyboard events
-  const handleKeyDown = (e) => {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      highlightedItemIndex =
-        highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
-      const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-      target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      highlightedItemIndex =
-        highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
-      const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-      target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    } else if (e.key === 'Enter') {
-      if (highlightedItemIndex > -1){
-        setSelectedItem(suggestions[highlightedItemIndex]);
-        isActive = false;
-      }
-    }
-  };
-
-  const handleClear = (e) => {
-    query = '';
-    inputRef.focus()
-    setSuggestions()
-    dispatch('select', {
-      item: null
-    });
-  };
-
-
-  const setSuggestions  = () => {
-    suggestions = data.filter((el) =>{
-        return el.value.toLowerCase().startsWith(query.toLowerCase())
-      }).sort(sortData);
-  }
-
-  // update dropdown list if input value changes
-  const handleInput = () => {
-    isActive = true;
-    if (query.length === 0){
-      suggestions = data
-    } else {
-      setSuggestions()
-      highlightedItemIndex = -1;
-    }
-  }
+	import { createEventDispatcher } from 'svelte';
+	import Circle from '../assets/times-circle-solid.svg.svelte';
+
+	export let data = [];
+	export let query: string = '';
+	export let placeholder: string = 'Platzhalter';
+	export let label: string;
+	export let name: string;
+
+	const sortData = (a, b) => {
+		return a.value.localeCompare(b.value);
+	};
+
+	let listRef;
+	let inputRef;
+	let controlsRef;
+	const dispatch = createEventDispatcher();
+	const maxSuggestions = 100;
+
+	let highlightedItemIndex = -1;
+	$: suggestions = data.sort(sortData).slice(0, maxSuggestions);
+	$: isActive = false;
+
+	// Insert clicked item into search input,
+	// dispatch it as select event and close the dropdown
+	const handleItemClick = (index) => {
+		highlightedItemIndex = index;
+		setSelectedItem(suggestions[highlightedItemIndex]);
+	};
+
+	const setSelectedItem = (item) => {
+		query = item.value;
+		isActive = false;
+		dispatch('select', { item });
+	};
+
+	// Register keyboard events
+	const handleKeyDown = (e) => {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightedItemIndex =
+				highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
+			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
+			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedItemIndex =
+				highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
+			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
+			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		} else if (e.key === 'Enter') {
+			if (highlightedItemIndex > -1) {
+				setSelectedItem(suggestions[highlightedItemIndex]);
+				isActive = false;
+			}
+		}
+	};
+
+	const handleClear = () => {
+		query = '';
+		inputRef.focus();
+		setSuggestions();
+		dispatch('select', {
+			item: null
+		});
+	};
+
+	const setSuggestions = () => {
+		suggestions = data
+			.filter((el) => {
+				return el.value.toLowerCase().startsWith(query.toLowerCase());
+			})
+			.slice(0, maxSuggestions)
+			.sort(sortData);
+	};
+
+	// update dropdown list if input value changes
+	const handleInput = () => {
+		isActive = true;
+		if (query.length === 0) {
+			suggestions = data;
+		} else {
+			setSuggestions();
+			highlightedItemIndex = -1;
+		}
+	};
 </script>
 
 <!--
@@ -93,140 +97,140 @@ Data should be provided as array of objects. Each object contains the informatio
 @component
 -->
 
-<div class="autocomplete">
-  <input
-    type="text"
-    {placeholder}
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-    data-testid="autocomplete-input"
-    bind:this={inputRef}
-    on:keydown={handleKeyDown}
-    bind:value={query}
-    on:input={handleInput}
-    on:focus={() => {
-      isActive = true;
-    }}
-    on:blur={(e) => {
-      if (listRef.contains(e.relatedTarget)){
-        window.setTimeout(()=>{
-          isActive = false;
-        }, 100)
-      } else if (!controlsRef.contains(e.relatedTarget)){
-        isActive = false
-      }
-    }}
-  />
-
-  <ul tabindex="-1" bind:this={listRef} class:active={isActive}>
-    {#each suggestions as item, i (item.value)}
-      <li>
-        <button
-          class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
-          tabindex="-1"
-          type="button"
-          on:click={(e) => {
-            e.preventDefault();
-            handleItemClick(i);
-          }}
-        >
-          {item.label}
-        </button>
-      </li>
-    {/each}
-  </ul>
-  <div class="controls" bind:this={controlsRef}>
-    <button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
-      <Circle />
-    </button>
-  </div>
+<div class="autocomplete" class:active={isActive}>
+	<label for={name}>{label}</label>
+	<input
+		type="text"
+		{name}
+		{placeholder}
+		autocomplete="off"
+		autocorrect="off"
+		autocapitalize="off"
+		data-testid="autocomplete-input"
+		bind:this={inputRef}
+		on:keydown={handleKeyDown}
+		bind:value={query}
+		on:input={handleInput}
+		on:focus={() => {
+			isActive = true;
+		}}
+		on:blur={(e) => {
+			if (listRef.contains(e.relatedTarget)) {
+				window.setTimeout(() => {
+					isActive = false;
+				}, 100);
+			} else if (!controlsRef.contains(e.relatedTarget)) {
+				isActive = false;
+			}
+		}}
+	/>
+
+	<ul tabindex="-1" bind:this={listRef}>
+		{#each suggestions as item, i (item.value)}
+			<li>
+				<button
+					class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
+					tabindex="-1"
+					type="button"
+					on:click={(e) => {
+						e.preventDefault();
+						handleItemClick(i);
+					}}
+				>
+					{item.label}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	<div class="controls" bind:this={controlsRef}>
+		<button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
+			<Circle />
+		</button>
+	</div>
 </div>
 
 <style lang="scss">
-  @import '../styles/scss/base.scss';
-
-  .autocomplete {
-    position: relative;
-    display: block;
-    color: white;
-
-    input {
-      @extend %copy;
-      border: 1px solid black;
-      border-radius: $border-radius-input;
-      background: transparent;
-      padding: 0 0.5em;
-      height: $input-height;
-      margin: 0;
-      display: block;
-      width: 100%;
-      &:focus-visible {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    input[type='text'] {
-      text-size-adjust: none;
-    }
-
-    ul {
-      position: absolute;
-      top: 100%;
-      border: 1px solid black;
-      border-bottom-left-radius: $border-radius-input;
-      border-bottom-right-radius: $border-radius-input;
-      border-top: 0;
-      left: 0;
-      right: 0;
-      max-height: 10rem;
-      overflow-y: scroll;
-      z-index: 1000;
-      opacity: 0;
-      transition: 100ms;
-      pointer-events: none;
-      &:empty {
-        box-shadow: none;
-      }
-      &.active {
-        opacity: 1;
-        pointer-events: all;
-      }
-
-      .item {
-        @extend %caption;
-        padding: 0.5em;
-        width: 100%;
-        background: transparent;
-        border: 0;
-        text-align: left;
-        border-bottom: 1px solid rgba(black, 0.5);
-        cursor: pointer;
-        &.active, &:hover {
-          text-decoration: underline;
-          background-color: rgba(black, .1);
-        }
-      }
-    }
-
-    .clear {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0.75rem;
-      width: 1.2rem;
-      height: 1.2rem;
-      background: transparent;
-      border: 0;
-      display: none;
-      &.active {
-        display: block;
-      }
-      &:hover,
-      &:focus {
-        color: $orange--1;
-        cursor: pointer;
-      }
-    }
-  }
+	@import '../styles/base.scss';
+
+	.autocomplete {
+		position: relative;
+		display: block;
+		color: white;
+
+		label {
+			@extend %form-label;
+		}
+
+		input {
+			@extend %form-input;
+		}
+
+		ul {
+			position: absolute;
+			top: 100%;
+			border: 1px solid currentColor;
+			background: $reanimation-violetblue;
+			border-bottom-left-radius: $border-radius-input;
+			border-bottom-right-radius: $border-radius-input;
+			border-top: 0;
+			left: 0;
+			right: 0;
+			max-height: 10rem;
+			overflow-y: scroll;
+			z-index: 1000;
+			opacity: 0;
+			transition: 100ms;
+			pointer-events: none;
+			&:empty {
+				box-shadow: none;
+			}
+
+			.item {
+				@extend %caption;
+				padding: 0.5em;
+				width: 100%;
+				background: transparent;
+				border: 0;
+				text-align: left;
+				color: currentColor;
+				border-bottom: 1px solid rgba(white, 0.25);
+				cursor: pointer;
+				&.active,
+				&:hover {
+					text-decoration: underline;
+					background-color: rgba(white, 0.05);
+				}
+			}
+		}
+
+		.clear {
+			position: absolute;
+			top: 50%;
+			right: 0.75rem;
+			width: 1.2rem;
+			height: 1.2rem;
+			background: transparent;
+			border: 0;
+			display: none;
+			color: white;
+			&.active {
+				display: block;
+			}
+			&:hover,
+			&:focus {
+				color: $orange;
+				cursor: pointer;
+			}
+		}
+		&.active {
+			ul {
+				opacity: 1;
+				pointer-events: all;
+			}
+			input {
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+	}
 </style>

package/src/Autocomplete/index.js

@@ -1,2 +1,2 @@
-import AutoComplete from "./Autocomplete.svelte"
-export default AutoComplete
+import Autocomplete from './Autocomplete.svelte';
+export default Autocomplete;

package/src/Button/Button.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let as: string = 'button';
+	export let label: string = '';
+	export let href: string = '';
+	export let disabled: boolean = false;
+</script>
+
+{#if as === 'a'}
+	<a class="button" class:disabled {href}>{label}</a>
+{:else}
+	<button class="button" on:click {disabled}>{label}</button>
+{/if}
+
+<style lang="scss">
+	@import '../styles/base.scss';
+	.button {
+		@extend %copy-bold;
+		background: $reanimation-violet;
+		display: inline-flex;
+		align-items: center;
+		justify-self: flex-start;
+		padding: 0.25em 1.25em;
+		padding-bottom: 0.35em;
+		color: white;
+		border: 1px solid rgba(white, 0.1);
+		box-shadow: 0px 0px 10px rgba(black, 0.05);
+		border-radius: $border-radius-input;
+		text-shadow: 0px 0px 5px rgba(black, 0.05);
+		font-size: 1.2rem;
+		text-decoration: none;
+		@include bp($break-tablet) {
+			font-size: 1.4rem;
+		}
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+			text-underline-offset: 0.15em;
+		}
+		&.disabled,
+		&:disabled {
+			opacity: 0.5;
+			/* pointer-events: none; */
+		}
+	}
+</style>

package/src/Button/index.js

@@ -0,0 +1,2 @@
+import Button from './Button.svelte';
+export default Button;

package/src/Card/Card.svelte

@@ -0,0 +1,19 @@
+<div class="card">
+	<slot />
+</div>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+	.card {
+		width: auto;
+		max-width: $app-max-width;
+		color: white;
+		background: $reanimation-violetblue;
+		border-radius: $border-radius-container;
+		margin: 0 1rem;
+		padding: 1.5rem;
+		@include bp($break-tablet) {
+			padding: 2.5rem;
+		}
+	}
+</style>

package/src/Card/index.js

@@ -0,0 +1,2 @@
+import Card from './Card.svelte';
+export default Card;

package/src/Container/Container.svelte

@@ -0,0 +1,12 @@
+<div>
+	<slot />
+</div>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+	:host {
+		--swr-sans: #{$swr-sans};
+		--swr-text: #{$swr-text};
+		--orange: #{$orange};
+	}
+</style>

package/src/Container/index.js

@@ -0,0 +1,2 @@
+import Container from './Container.svelte';
+export default Container;

package/src/Input/Input.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let label: string = '';
+	export let name: string = '';
+	export let placeholder: string = '';
+	export let value: string = '';
+</script>
+
+<div class="container">
+	<label for={name}>{label}</label>
+	<input {name} type="text" {placeholder} bind:value />
+</div>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+
+	label {
+		@extend %form-label;
+	}
+	input {
+		@extend %form-input;
+	}
+</style>

package/src/Input/index.js

@@ -0,0 +1,2 @@
+import Input from './Input.svelte';
+export default Input;

package/src/Switcher/Switcher.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
+	export let label: string = '';
 
-  // The options available in the switcher.
-  export let options: string[] = [];
-  
-  // Machine-readable name for the form field. Should be unique to other fields in the form.
-  export let groupName: string = "";
-    
-  // The currently selected option
-  export let value : string = options[0];
-      
-  function optionToID(o:string) {
-    // TODO: This should use $id() when it comes out, so
-    // input IDs are guaranteed unique across the app
-    // See: https://github.com/sveltejs/svelte/issues/13108
-    return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
-  }
+	// The options available in the switcher.
+	export let options: string[] = [];
+
+	// Machine-readable name for the form field. Should be unique to other fields in the form.
+	export let groupName: string = '';
+
+	// The currently selected option
+	export let value: string = options[0];
+
+	function optionToID(o: string) {
+		// TODO: This should use $id() when it comes out, so
+		// input IDs are guaranteed unique across the app
+		// See: https://github.com/sveltejs/svelte/issues/13108
+		return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
+	}
 </script>
 
 <!--
@@ -22,89 +23,98 @@ Radio-like form component to choose exactly one of a given set of options.
 @component
 -->
 
-<ol class="container">
-  {#each options as o (o)}
-    <li class:is-selected={o === value}>
-      <label for={optionToID(o)}>
-        {o}
-        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M19.7054 6.29119C20.0969 6.68077 20.0984 7.31393 19.7088 7.7054L9.75697 17.7054C9.56928 17.894 9.31416 18 9.04809 18C8.78201 18 8.52691 17.8939 8.33925 17.7053L4.2911 13.6365C3.90157 13.245 3.90318 12.6118 4.2947 12.2223C4.68621 11.8327 5.31938 11.8344 5.7089 12.2259L9.04825 15.5823L18.2912 6.2946C18.6808 5.90314 19.3139 5.90161 19.7054 6.29119Z"
-            fill="currentColor"
-          />
-        </svg>
-      </label>
-      <input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
-    </li>
-  {/each}
-</ol>
+<fieldset class="container">
+	<legend>{label}</legend>
+	<ul>
+		{#each options as o (o)}
+			<li class:is-selected={o === value}>
+				<label for={optionToID(o)}>
+					{o}
+					<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path
+							d="M19.7054 6.29119C20.0969 6.68077 20.0984 7.31393 19.7088 7.7054L9.75697 17.7054C9.56928 17.894 9.31416 18 9.04809 18C8.78201 18 8.52691 17.8939 8.33925 17.7053L4.2911 13.6365C3.90157 13.245 3.90318 12.6118 4.2947 12.2223C4.68621 11.8327 5.31938 11.8344 5.7089 12.2259L9.04825 15.5823L18.2912 6.2946C18.6808 5.90314 19.3139 5.90161 19.7054 6.29119Z"
+							fill="currentColor"
+						/>
+					</svg>
+				</label>
+				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
+			</li>
+		{/each}
+	</ul>
+</fieldset>
 
 <style lang="scss">
-  @import "../styles/scss/base.scss";
+	@import '../styles/base.scss';
+
+	fieldset {
+		border: 0;
+	}
+
+	legend {
+		@extend %form-label;
+	}
 
-  .container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    border-radius: $border-radius-input;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    border: 1px solid black;
-    outline-offset: 2px;
+	ul {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		border-radius: $border-radius-input;
+		overflow: hidden;
+		padding: 0;
+		margin: 0;
+		overflow: hidden;
+		border: 1px solid currentColor;
 
-    &:focus-within,
-    &:active {
-      outline: 2px solid lightgray;
-    }
-  }
-  li {
-    display: contents;
-    &:last-child label {
-      border-right: 0;
-    }
-  }
-  input {
-    position: absolute;
-    left: -999px;
-  }
-  label {
-    @extend %copy;
-    line-height: 1;
-    padding-top: 0.1em;
-    height: $input-height;
-    cursor: pointer;
-    margin: 0;
-    flex-basis: 0;
-    flex-grow: 1;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    color: black;
-    position: relative;
-    transition: $transition-fast;
-    text-underline-offset: 0.1em;
-    border-right: 1px solid black;
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-    svg {
-      position: absolute;
-      left: 0.65em;
-      width: 1em;
-      height: auto;
-      opacity: 0;
-      transition: $transition-fast;
-      display: block;
-    }
-    .is-selected & {
-      background: black;
-      color: white;
-      svg {
-        opacity: 1;
-      }
-    }
-  }
+		&:focus-within,
+		&:active {
+			outline: 3px solid rgba(white, 0.5);
+		}
+	}
+	li {
+		display: contents;
+		&:last-child label {
+			border-right: 0;
+		}
+	}
+	input {
+		position: absolute;
+		left: -999px;
+	}
+	label {
+		@extend %copy;
+		line-height: 1;
+		height: $input-height;
+		cursor: pointer;
+		margin: 0;
+		flex-basis: 0;
+		flex-grow: 1;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		color: currentColor;
+		position: relative;
+		transition: $transition-fast;
+		text-underline-offset: 0.1em;
+		border-right: 1px solid currentColor;
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+		}
+		svg {
+			position: absolute;
+			left: 0.65em;
+			width: 1em;
+			height: auto;
+			opacity: 0;
+			transition: $transition-fast;
+			display: block;
+		}
+		.is-selected & {
+			background: white;
+			color: black;
+			svg {
+				opacity: 1;
+			}
+		}
+	}
 </style>

package/src/assets/times-circle-solid.svg.svelte

@@ -0,0 +1,14 @@
+<svg
+	aria-hidden="true"
+	focusable="false"
+	data-prefix="fas"
+	data-icon="times-circle"
+	class="svg-inline--fa fa-times-circle fa-w-16"
+	role="img"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 512 512"
+	><path
+		fill="currentColor"
+		d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+	></path></svg
+>

package/src/styles/_typography.scss

@@ -0,0 +1,49 @@
+%caption {
+	font-family: $swr-sans;
+	font-size: 0.9rem;
+	line-height: 1;
+	letter-spacing: 0.0045em;
+}
+
+%caption-bold {
+	@extend %caption;
+	font-weight: 600;
+}
+
+%form-label {
+	@extend %caption;
+	display: block;
+	margin-bottom: 0.5em;
+}
+
+%copy {
+	font-family: $swr-sans;
+	font-size: 1.1rem;
+	line-height: 1.45;
+	letter-spacing: 0.0045em;
+}
+
+%copy-bold {
+	@extend %copy;
+	font-weight: 600;
+}
+
+%form-input {
+	@extend %copy;
+	height: $input-height;
+	width: 100%;
+	border: 1px solid currentColor;
+	border-radius: $border-radius-input;
+	background: transparent;
+	padding: 0 0.5em;
+	padding-top: 0.1em;
+	color: currentColor;
+	height: $input-height;
+	margin: 0;
+	display: block;
+	width: 100%;
+	text-size-adjust: none;
+	&:focus-visible {
+		outline: 4px solid rgba(white, 0.4);
+	}
+}

package/src/styles/_vars.scss

@@ -0,0 +1,31 @@
+$reanimation-black: #0c0c0c;
+$reanimation-violetblue: #1d0b40;
+$reanimation-violetblue-hover: #2d155d;
+$reanimation-violet: #5920c0;
+$reanimation-blue: #3053d9;
+$reanimation-warmgrey: #dbd5cd;
+$reanimation-activeorange: #ff3300;
+$orange: #ff3300;
+
+$border-radius-container: 8px;
+$border-radius-input: 4px;
+$input-height: 2.5rem;
+$app-max-width: 40rem;
+
+$swr-sans: 'SWR-VAR-Sans', serif;
+$swr-text: 'SWR-VAR-Text', serif;
+
+$transition-fast: 150ms;
+
+// Breakpoints
+$break-phone: 510px;
+$break-tablet: 992px;
+$break-desktop-small: 1200px;
+$break-desktop-large: 1400px;
+$break-desktop-xl: 1400px;
+
+@mixin bp($point) {
+	@media (min-width: $point) {
+		@content;
+	}
+}

package/src/styles/base.scss

@@ -0,0 +1,8 @@
+@import 'vars';
+@import 'typography';
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}

package/src/assets/icons/times-circle-solid.svg.svelte

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>

package/src/styles/css/colors.css

@@ -1,77 +0,0 @@
-body {
-  --petrol--1: #00677f;
-  --eisblau--1: #00dbd7;
-  --türkisblau--1: #007e8f;
-  --dunkelblau--1: #0a1e3c;
-  --orange--1: #ff4e3c;
-  --purpur--1: #5c267e;
-  --rosarot--1: #ff003c;
-  --pink--1: #ff0096;
-}
-
-body[data-stationid="swraktuell"] {
-  --swrdata-color-primary: var(--petrol--1);
-  --swrdata-color-highlight: var(--orange--1);
-}
-
-body[data-stationid="swr3"] {
-  --swrdata-color-primary: var(--rosarot--1);
-  --swrdata-color-highlight: var(--pink--1);
-}
-
-/* load fonts for swr3 */
-
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-3_Light.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-3_Light.woff) format("woff");
-  font-weight: 300;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-4_SemiLight.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-4_SemiLight.woff) format("woff");
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-5_Plain.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-5_Plain.woff) format("woff");
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-6_SemiBold.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-6_SemiBold.woff) format("woff");
-  font-weight: 600;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-7_Bold.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-7_Bold.woff) format("woff");
-  font-weight: 700;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-8_ExtraBold.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-8_ExtraBold.woff) format("woff");
-  font-weight: 800;
-  font-display: swap;
-  font-style: normal;
-}

package/src/styles/scss/_colors.scss

@@ -1,87 +0,0 @@
-// swr main colors
-$petrol--1: #05556a;
-$eisblau--1: #00dbd7;
-$dunkelblau--1: #0a1e3c;
-$orange--1: #ff4e3c;
-$purpur--1: #5c267e;
-$rosarot--1: #ff003c;
-
-// impfungen
-$erst: #929292;
-$voll: rgb(0, 150, 160);
-$boost: #05556a;
-
-// min max
-$inzidenz--max: #05556a;
-$inzidenz--min: transparentize($inzidenz--max, 0.1);
-
-// scale with 10 options
-$inzidenz--10: rgb(4, 52, 58);
-$inzidenz--9: rgb(5, 70, 84);
-$inzidenz--8: rgb(5, 92, 112);
-$inzidenz--7: rgb(4, 128, 142);
-$inzidenz--6: rgb(1, 165, 172);
-$inzidenz--5: rgb(1, 203, 203);
-$inzidenz--4: rgb(103, 229, 228);
-$inzidenz--3: rgb(177, 245, 250);
-$inzidenz--2: rgb(203, 245, 250);
-$inzidenz--1: rgb(218, 241, 244);
-
-$inzidenz-1--8: rgb(4, 52, 58);
-$inzidenz-1--7: rgb(5, 69, 82);
-$inzidenz-1--6: rgb(5, 86, 107);
-$inzidenz-1--5: rgb(2, 122, 137);
-$inzidenz-1--4: rgb(0, 150, 160);
-$inzidenz-1--3: rgb(0, 218, 214);
-$inzidenz-1--2: rgb(194, 247, 254);
-$inzidenz-1--1: rgb(218, 241, 244);
-
-// Spritpreise
-$diesel-min: #f9ebb7;
-$diesel-max: #b7950d;
-$e5-min: #d0f0f1;
-$e5-max: #05556a;
-$e10-min: #ebd9e1;
-$e10-max: #7e2d41;
-
-// extra colors
-$hellgrau--1: #b8b8b8;
-$hellgrau--2: #929292;
-$hellgrau--3: #7b7b7b;
-$hellgrau--4: #494949;
-$schwarzgrau--1: #383838;
-$schwarzgrau--4: #161616;
-
-$schatten-grau: #eeeeee;
-$hintergrund-grau: #f5f5f5;
-
-body {
-  --petrol--1: #00677f;
-  --eisblau--1: #00dbd7;
-  --türkisblau--1: #007e8f;
-  --dunkelblau--1: #0a1e3c;
-  --orange--1: #ff4e3c;
-  --purpur--1: #5c267e;
-
-  --rosarot--1: #ff003c;
-  --pink--1: #ff0096;
-}
-
-body[stationid='swraktuell'] {
-  --swrdata-color-primary: var(--petrol--1);
-  --swrdata-color-highlight: var(--orange--1);
-}
-
-body[stationid='swr3'] {
-  --swrdata-color-primary: var(--rosarot--1);
-  --swrdata-color-highlight: var;
-}
-
-:export {
-  dieselMin: $diesel-min;
-  dieselMax: $diesel-max;
-  e5Min: $e5-min;
-  e5Max: $e5-max;
-  e10Min: $e10-min;
-  e10Max: $e10-max;
-}

package/src/styles/scss/_constants.scss

@@ -1,43 +0,0 @@
-$swr-inner-container-width-m: 490px;
-$swr-inner-container-width-l: 730px;
-$swr-inner-container-width-xl: 976px;
-$swr-padding-removal: 20px;
-$reanimation-width: 1440px;
-$reanimation-max-width: 1440px;
-$reanimation-max-text-width: 864px;
-$reanimation-ff-text: "SWR-VAR-Text";
-$reanimation-ff-sans: "SWR-VAR-Sans";
-$reanimation-ff-slab: "SWR-VAR-Slab";
-$transition-fast: 150ms;
-
-// Padding
-$reanimation-padding-s: 16px;
-$reanimation-padding-m: 32px;
-$reanimation-padding-l: 48px;
-$reanimation-padding-xl: 64px;
-$reanimation-padding-xxl: 96px;
-$reanimation-padding-xxxl: 112px;
-
-// Breakpoints
-$break-phone: 510px;
-$break-tablet: 992px;
-$break-desktop-small: 1200px;
-$break-desktop-large: 1400px;
-$break-desktop-xl: 1400px;
-
-// Colors
-$reanimation-black: #0c0c0c;
-$reanimation-violetblue: #1d0b40;
-$reanimation-violetblue-hover: #2d155d;
-$reanimation-violet: #5920c0;
-$reanimation-blue: #3053d9;
-$reanimation-warmgrey: #dbd5cd;
-$reanimation-activeorange: #ff3300;
-
-// Breakout radius
-$border-radius-box: 8px;
-$border-radius-input: 4px;
-
-// max container width
-$app-max-width: 650px !default;
-$input-height: 2.35em;

package/src/styles/scss/_functions.scss

@@ -1,30 +0,0 @@
-@mixin flex-center {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin respond-min($width) {
-  @media screen and (min-width: $width) {
-    @content;
-  }
-}
-
-@mixin respond-max($width) {
-  @media screen and (max-width: $width) {
-    @content;
-  }
-}
-
-@mixin hover {
-  @media (hover: hover) {
-    &:hover {
-      @content;
-    }
-  }
-  &:active {
-    // &:focus {
-    @content;
-  }
-}

package/src/styles/scss/_typography.scss

@@ -1,49 +0,0 @@
-@use 'sass:math';
-
-@font-face {
-  font-family: 'SWR-VAR-Sans';
-  font-weight: 400 600 700;
-  font-display: swap;
-  src:
-    local('SWR-VAR-Sans'),
-    url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2') format('woff2');
-}
-@font-face {
-  font-family: 'SWR-VAR-Text';
-  font-weight: 400 600 700;
-  font-display: swap;
-  src:
-    local('SWR-VAR-Text'),
-    url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2') format('woff2');
-}
-
-$sans: 'SWR-VAR-Sans', sans-serif;
-$text: 'SWR-VAR-Text', sans-serif;
-
-%caption {
-  font-size: 0.9rem;
-  line-height: 1;
-  letter-spacing: 0.0045em;
-}
-%caption-bold {
-  @extend %caption;
-  font-weight: 700;
-}
-%copy {
-  font-family: $text;
-  font-size: 1.1rem;
-  line-height: 1.45;
-  letter-spacing: 0.0045em;
-}
-%copy-bold {
-  @extend %copy;
-  font-weight: 700;
-}
-%h3 {
-  @extend %copy;
-  font-family: $sans;
-  font-size: 2.2rem;
-  line-height: 1.15;
-  font-weight: 600;
-  letter-spacing: 0.0025em;
-}

package/src/styles/scss/base.scss

@@ -1,10 +0,0 @@
-@import "constants";
-@import "typography";
-@import "functions";
-@import "colors";
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}