@iroco/ui 1.0.0-4 → 1.0.0-5

package/dist/NavBar.stories.svelte

@@ -9,8 +9,7 @@
 			type: {
 				control: { type: 'select' },
 				options: ['sidebar', 'topbar']
-			},
-
+			}
 		}
 	};
 </script>
@@ -20,19 +19,19 @@
 </script>
 
 <Template let:args>
-	<NavBar {...args}
-					navigationItems={[
-								new NavigationItem('About', `/about`),
-				new NavigationItem('Foo', `/foo`),
-				new NavigationItem('Bar', `/bar`),
-				new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
-				new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
-				new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
-				]}>
-
-	</NavBar>
+	<NavBar
+		{...args}
+		navigationItems={[
+			new NavigationItem('About', `/about`),
+			new NavigationItem('Foo', `/foo`),
+			new NavigationItem('Bar', `/bar`),
+			new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
+			new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
+			new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
+		]}
+	/>
 </Template>
 
 <Story name="Default" />
 <Story name="Sidebar" args={{ type: 'sidebar' }} />
-<Story name="Title" args={{ title: 'Alternative title' }}></Story>
+<Story name="Title" args={{ title: 'Alternative title' }} />

package/dist/NavBar.svelte

@@ -54,165 +54,58 @@ $:
 	<div class="nav__version">{version == null ? '' : version}</div>
 </nav>
 
-<style>.font-color-blue {
-  color: #00b9ff;
-}
-
-.font-color-darkBlue {
-  color: #211d28;
-}
-
-.font-color-nightBlue {
-  color: #18151e;
-}
-
-.font-color-green {
-  color: #00d692;
-}
-
-.font-color-red {
-  color: #ff504d;
-}
-
-.font-color-yellow {
-  color: #ffe032;
-}
-
-.font-color-beige {
-  color: #f2ebe3;
-}
-
-.font-color-darkBeige {
-  color: #a9a29e;
-}
-
-.font-color-mediumGrey {
-  color: #464452;
-}
-
-.font-color-darkGrey {
-  color: #33323a;
-}
-
-.font-color-lightGrey {
-  color: #f5f5f5;
-}
-
-:root {
-  --color-white-op-20: rgba(255, 255, 255, 0.2);
-  --color-white-op-30: rgba(255, 255, 255, 0.3);
-  --color-black-op-20: rgba(0, 0, 0, 0.2);
-  --color-black-op-40: rgba(0, 0, 0, 0.4);
-  --color-black-op-60: rgba(0, 0, 0, 0.6);
-  --color-dark-blue-op-30: #211d284d;
-  /* semantic colors */
-  --color-primary-light: #82eec7;
-  --color-primary: #00d692;
-  --color-primary-bg: #00d69280;
-  --color-primary-dark: #00a873;
-  --color-secondary-light: #ffffff;
-  --color-secondary: #f2ebe3;
-  --color-secondary-dark: #a9a29e;
-  /* feedback */
-  --color-success: #00d692;
-  --color-success-bg: #00d69280;
-  --color-danger: #ff504d;
-  --color-danger-bg: #ff504d80;
-  --color-warning: #ffe032;
-  --color-warning-bg: #ffe03280;
-  /* typography */
-  --color-text-light: #ffffff;
-  --color-text: #f2ebe3;
-  --color-text-op-50: #f2ebe380;
-  --color-text-op-60: #f2ebe399;
-  --color-text-dark: #464452;
-  /* border */
-  --color-border: #464452;
-  /* body */
-  --color-body: #211d28;
-  /* forms */
-  --form-element-border: var(--color-border);
-  --form-element-bg: #f2ebe3;
-  --form-text-placeholder: #a9a29e;
-  /* buttons */
-  --btn-primary-bg: #f2ebe3;
-  --btn-primary-border: #18151e;
-  --btn-primary-label: #f2ebe3;
-  --dark-btn-primary-label: #f2ebe3;
-  --dark-btn-primary-bg: #18151e;
-  --btn-basic-label: #18151e;
-  --btn-basic-bg: #f2ebe3;
-  --btn-basic-border: #18151e;
-  --btn-disabled-label: var(--color-black-op-60);
-  --btn-disabled-bg: #a9a29e;
-  --btn-disabled-border: var(--color-black-op-60);
-  /* icons */
-  --color-icon-primary: #a9a29e;
-  --color-icon-secondary: inherit;
-}
-
-.container-wide {
+<style>.container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
   margin-left: auto;
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 2560px) {
   .container-wide {
     max-width: 1620px;
   }
 }
-
 @media all and (max-width: 1800px) {
   .container-wide {
     max-width: 1280px;
   }
 }
-
 @media all and (max-width: 1440px) {
   .container-wide {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-wide {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-wide {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-wide {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-wide {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-wide {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-wide {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -220,49 +113,41 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1440px) {
   .container-large {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-large {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-large {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-large {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-large {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-large {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-large {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -270,43 +155,36 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1024px) {
   .container-medium {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-medium {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-medium {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-medium {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-medium {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-medium {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -314,122 +192,21 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 425px) {
   .container-small {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-small {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-small {
     max-width: calc(100% - 20px);
   }
 }
-
-.font-color-blue {
-  color: #00b9ff;
-}
-
-.font-color-darkBlue {
-  color: #211d28;
-}
-
-.font-color-nightBlue {
-  color: #18151e;
-}
-
-.font-color-green {
-  color: #00d692;
-}
-
-.font-color-red {
-  color: #ff504d;
-}
-
-.font-color-yellow {
-  color: #ffe032;
-}
-
-.font-color-beige {
-  color: #f2ebe3;
-}
-
-.font-color-darkBeige {
-  color: #a9a29e;
-}
-
-.font-color-mediumGrey {
-  color: #464452;
-}
-
-.font-color-darkGrey {
-  color: #33323a;
-}
-
-.font-color-lightGrey {
-  color: #f5f5f5;
-}
-
-:root {
-  --color-white-op-20: rgba(255, 255, 255, 0.2);
-  --color-white-op-30: rgba(255, 255, 255, 0.3);
-  --color-black-op-20: rgba(0, 0, 0, 0.2);
-  --color-black-op-40: rgba(0, 0, 0, 0.4);
-  --color-black-op-60: rgba(0, 0, 0, 0.6);
-  --color-dark-blue-op-30: #211d284d;
-  /* semantic colors */
-  --color-primary-light: #82eec7;
-  --color-primary: #00d692;
-  --color-primary-bg: #00d69280;
-  --color-primary-dark: #00a873;
-  --color-secondary-light: #ffffff;
-  --color-secondary: #f2ebe3;
-  --color-secondary-dark: #a9a29e;
-  /* feedback */
-  --color-success: #00d692;
-  --color-success-bg: #00d69280;
-  --color-danger: #ff504d;
-  --color-danger-bg: #ff504d80;
-  --color-warning: #ffe032;
-  --color-warning-bg: #ffe03280;
-  /* typography */
-  --color-text-light: #ffffff;
-  --color-text: #f2ebe3;
-  --color-text-op-50: #f2ebe380;
-  --color-text-op-60: #f2ebe399;
-  --color-text-dark: #464452;
-  /* border */
-  --color-border: #464452;
-  /* body */
-  --color-body: #211d28;
-  /* forms */
-  --form-element-border: var(--color-border);
-  --form-element-bg: #f2ebe3;
-  --form-text-placeholder: #a9a29e;
-  /* buttons */
-  --btn-primary-bg: #f2ebe3;
-  --btn-primary-border: #18151e;
-  --btn-primary-label: #f2ebe3;
-  --dark-btn-primary-label: #f2ebe3;
-  --dark-btn-primary-bg: #18151e;
-  --btn-basic-label: #18151e;
-  --btn-basic-bg: #f2ebe3;
-  --btn-basic-border: #18151e;
-  --btn-disabled-label: var(--color-black-op-60);
-  --btn-disabled-bg: #a9a29e;
-  --btn-disabled-border: var(--color-black-op-60);
-  /* icons */
-  --color-icon-primary: #a9a29e;
-  --color-icon-secondary: inherit;
-}
-
 .container-wide {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -437,61 +214,51 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 2560px) {
   .container-wide {
     max-width: 1620px;
   }
 }
-
 @media all and (max-width: 1800px) {
   .container-wide {
     max-width: 1280px;
   }
 }
-
 @media all and (max-width: 1440px) {
   .container-wide {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-wide {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-wide {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-wide {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-wide {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-wide {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-wide {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -499,49 +266,41 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1440px) {
   .container-large {
     max-width: 884px;
   }
 }
-
 @media all and (max-width: 1024px) {
   .container-large {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-large {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-large {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-large {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-large {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-large {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -549,43 +308,36 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 1024px) {
   .container-medium {
     max-width: 648px;
   }
 }
-
 @media all and (max-width: 768px) {
   .container-medium {
     max-width: 496px;
   }
 }
-
 @media all and (max-width: 596px) {
   .container-medium {
     max-width: 365px;
   }
 }
-
 @media all and (max-width: 425px) {
   .container-medium {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-medium {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-medium {
     max-width: calc(100% - 20px);
   }
 }
-
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -593,25 +345,21 @@ $:
   margin-right: auto;
   transition: max-width ease-out 200ms;
 }
-
 @media all and (max-width: 425px) {
   .container-small {
     max-width: calc(100% - 60px);
   }
 }
-
 @media all and (max-width: 375px) {
   .container-small {
     max-width: calc(100% - 40px);
   }
 }
-
 @media all and (max-width: 320px) {
   .container-small {
     max-width: calc(100% - 20px);
   }
 }
-
 .iroco-ui-button {
   cursor: pointer;
   -webkit-touch-callout: none;
@@ -626,58 +374,46 @@ $:
   text-transform: uppercase;
   border-radius: 0.3em;
 }
-
 .iroco-ui-button--basic {
   color: var(--btn-basic-label);
   background: var(--btn-basic-bg);
   border: 1px solid var(--btn-basic-border);
 }
-
 .iroco-ui-button--dark {
   background: var(--dark-btn-primary-bg);
   color: var(--dark-btn-primary-label);
 }
-
 .iroco-ui-button--success {
   background: var(--color-success);
   color: var(--btn-secondary-label);
 }
-
 .iroco-ui-button--danger {
   background: var(--color-danger);
 }
-
 .iroco-ui-button--regular {
   padding: 1em 2em;
 }
-
 .iroco-ui-button--small {
   padding: 0.5em 1em;
 }
-
 .iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
   box-shadow: inset 0 0 0 10em var(--color-black-op-20);
 }
-
 .iroco-ui-button--dark:hover {
   box-shadow: inset 0 0 0 10em var(--color-white-op-20);
 }
-
 .iroco-ui-button:active {
   box-shadow: none;
 }
-
 .iroco-ui-button.disabled, .iroco-ui-button:disabled {
   background-color: var(--btn-disabled-bg);
   color: var(--btn-disabled-label);
   border-color: var(--btn-disabled-border);
   cursor: default;
 }
-
 .iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
   box-shadow: none;
 }
-
 .iroco-ui-link {
   background: none;
   border: none;
@@ -685,17 +421,14 @@ $:
   color: var(--color-text);
   cursor: pointer;
 }
-
 .nav__sidebar__item, .nav__topbar__item {
   text-decoration: none;
   display: block;
   font-size: 1em;
 }
-
 .nav__sidebar__close, .nav__topbar__close {
   display: none;
 }
-
 .nav__sidebar {
   height: 100%;
   width: 300px;
@@ -706,53 +439,43 @@ $:
   display: flex;
   flex-direction: column;
 }
-
 .nav__sidebar__item-container {
   margin: 0;
   padding: 0;
 }
-
 .nav__sidebar__item {
   padding: 2em;
   border-top: 1px solid var(--color-border);
 }
-
 .nav__sidebar__item:first-child {
   border-top: none;
 }
-
 .nav__sidebar .active {
   border-top: 1px solid var(--color-primary);
   border-bottom: 1px solid var(--color-primary);
 }
-
 .nav__topbar {
   flex-grow: 1;
   display: flex;
   justify-content: flex-end;
 }
-
 .nav__topbar ul,
 .nav__topbar li {
   display: inline;
 }
-
 .nav__topbar ul {
   display: flex;
   flex-grow: 1;
   justify-content: space-around;
 }
-
 .nav__topbar .active {
   border-bottom: 1px solid var(--color-primary);
 }
-
 .nav__version {
   margin-top: auto;
   padding-left: 2em;
   color: var(--color-text-dark);
 }
-
 @media all and (max-width: 768px) {
   .nav__sidebar, .nav__topbar {
     position: fixed;