@iroco/ui 1.0.0-2 → 1.0.0-3

package/dist/Alert.svelte

@@ -86,5 +86,5 @@ export let callback;
   background-color: transparent;
   border: none;
   cursor: pointer;
-  color: #f2ebe3;
+  color: #a9a29e;
 }</style>

package/dist/Button.stories.svelte

@@ -34,9 +34,6 @@
 	</Button>
 </Template>
 
+<Story name="Default"></Story>
+<Story name="Success" args={{ kind: 'success' }} />
 <Story name="Danger" args={{ kind: 'danger' }} />
-
-<!-- Dynamic snippet should be disabled for this story -->
-<Story name="Button No Args">
-	<Button>Label</Button>
-</Story>

package/dist/Button.svelte

@@ -237,6 +237,7 @@ export let node;
   border-radius: 0.3em;
 }
 .iroco-ui-button--basic {
+  color: #18151e;
   background: #f2ebe3;
   border: 1px solid #18151e;
 }
@@ -267,7 +268,9 @@ export let node;
   box-shadow: none;
 }
 .iroco-ui-button.disabled {
-  background-color: #f5f5f5;
+  background-color: #a9a29e;
+  color: #33323a;
+  border-color: #464452;
   cursor: default;
 }
 .iroco-ui-button.disabled:hover {

package/dist/NavBar.svelte

@@ -523,6 +523,7 @@ $:
 }
 
 .iroco-ui-button--basic {
+  color: #18151e;
   background: #f2ebe3;
   border: 1px solid #18151e;
 }
@@ -562,7 +563,9 @@ $:
 }
 
 .iroco-ui-button.disabled {
-  background-color: #f5f5f5;
+  background-color: #a9a29e;
+  color: #33323a;
+  border-color: #464452;
   cursor: default;
 }
 

package/dist/Navigation.stories.svelte

@@ -1,6 +1,6 @@
 <script context="module">
 	import Navigation from './Navigation.svelte';
-	import { NavigationItem } from './definition';
+	import { NavigationItem, NavigationItemType } from './definition';
 
 	export const meta = {
 		title: 'Navigation',
@@ -21,12 +21,6 @@
 			}
 
 		},
-		args: {
-			navigationItems: [
-				new NavigationItem('About', `/about`),
-				new NavigationItem('Foo', `/foo`),
-				new NavigationItem('Bar', `/bar`)]
-		}
 	};
 </script>
 
@@ -37,9 +31,13 @@
 <Template let:args>
 	<Navigation {...args}
 							navigationItems={[
-							new NavigationItem('About', `/about`),
-	new NavigationItem('Foo', `/foo`),
-	new NavigationItem('Bar', `/bar`)]}>
+								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)
+				]}>
 
 	</Navigation>
 </Template>

package/dist/Navigation.stories.svelte.d.ts

@@ -32,9 +32,6 @@ export namespace meta {
             export { control_3 as control };
         }
     }
-    export namespace args {
-        let navigationItems: NavigationItem[];
-    }
 }
 /** @typedef {typeof __propDef.props}  NavigationProps */
 /** @typedef {typeof __propDef.events}  NavigationEvents */
@@ -49,7 +46,6 @@ export type NavigationProps = typeof __propDef.props;
 export type NavigationEvents = typeof __propDef.events;
 export type NavigationSlots = typeof __propDef.slots;
 import Navigation from './Navigation.svelte';
-import { NavigationItem } from './definition';
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {

package/dist/Navigation.svelte

@@ -319,7 +319,7 @@ let showMenu = false;
   .navigation--mobile__button {
     background-color: transparent;
     border: none;
-    color: #464452;
+    color: #a9a29e;
   }
   .navigation--mobile__title-container {
     display: flex;
@@ -331,5 +331,5 @@ let showMenu = false;
 }
 
 .navigation__title-link, .navigation-mobile__title-link {
-  color: white;
+  color: #ffffff;
 }</style>

package/dist/NumberInput.svelte

@@ -74,7 +74,7 @@ export let max;
 .iroco-ui-form .iroco-ui-input > input {
   color: #f2ebe3;
   background: #211d28;
-  border: 1px solid #211d28;
+  border: 1px solid #464452;
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/TextInput.svelte

@@ -111,7 +111,7 @@ textarea:focus {
 .iroco-ui-input > input {
   color: #f2ebe3;
   background: #211d28;
-  border: 1px solid #211d28;
+  border: 1px solid #464452;
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/scss/button.scss

@@ -19,23 +19,29 @@
 	border-radius: constants.$border-radius;
 
 	&--basic {
-		background: colors.$beige;
-		border: 1px solid colors.$nightBlue;
+		color: colors.$buttonSecondaryLabel;
+		background: colors.$buttonSecondaryBackground;
+		border: 1px solid colors.$buttonSecondaryBorder;
 	}
+
 	&--dark {
-		background: colors.$nightBlue;
-		color: colors.$beige;
+		background: colors.$buttonPrimaryBackgroundDark;
+		color: colors.$buttonPrimaryLabelDark;
 	}
+
 	&--success {
-		background: colors.$green;
+		background: colors.$success;
 		color: colors.$nightBlue;
 	}
+
 	&--danger {
-		background: colors.$red;
+		background: colors.$danger;
 	}
+
 	&--regular {
 		padding: 1em 2em;
 	}
+
 	&--small {
 		padding: 0.5em 1em;
 	}
@@ -45,6 +51,7 @@
 	&--danger:hover {
 		box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
 	}
+
 	&--dark:hover {
 		box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
 	}
@@ -54,8 +61,11 @@
 	}
 
 	&.disabled {
-		background-color: colors.$lightGrey;
+		background-color: colors.$buttonDisabledBackground;
+		color: colors.$buttonDisabledLabel;
+		border-color: colors.$buttonDisabledBorder;
 		cursor: default;
+
 		&:hover {
 			box-shadow: none;
 		}
@@ -66,6 +76,6 @@
 	background: none;
 	border: none;
 	font-family: fonts.$arial;
-	color: colors.$beige;
+	color: colors.$text;
 	cursor: pointer;
 }

package/dist/scss/check.scss

@@ -1,3 +1,4 @@
+/* @deprecated does not seem to be used anywhere */
 .ui-check {
 	width: 30px;
 	min-width: 30px;

package/dist/scss/colors.scss

@@ -1,9 +1,12 @@
+// Declarative colors
+
 $blue: #00b9ff;
 $darkBlue: #211d28;
 $nightBlue: #18151e;
 $green: #00d692;
 $red: #ff504d;
 $yellow: #ffe032;
+$white: #ffffff;
 $beige: #f2ebe3;
 $darkBeige: #a9a29e;
 $mediumGrey: #464452;
@@ -13,33 +16,77 @@ $lightGrey: #f5f5f5;
 .font-color-blue {
 	color: $blue;
 }
+
 .font-color-darkBlue {
 	color: $darkBlue;
 }
+
 .font-color-nightBlue {
 	color: $nightBlue;
 }
+
 .font-color-green {
 	color: $green;
 }
+
 .font-color-red {
 	color: $red;
 }
+
 .font-color-yellow {
 	color: $yellow;
 }
+
 .font-color-beige {
 	color: $beige;
 }
+
 .font-color-darkBeige {
 	color: $darkBeige;
 }
+
 .font-color-mediumGrey {
 	color: $mediumGrey;
 }
+
 .font-color-darkGrey {
 	color: $darkGrey;
 }
+
 .font-color-lightGrey {
 	color: $lightGrey;
 }
+
+// Semantic colors
+
+$primary: $green;
+
+$success: $green;
+$danger: $red;
+$warning: $yellow;
+
+$background: $darkBlue;
+$text: $beige;
+$textLight: $white;
+
+$iconPrimary: $darkBeige;
+$border: $mediumGrey;
+
+$formElementBackground: $beige;
+$formElementBorder: $beige;
+$formTextPlaceholder: $beige;
+
+$buttonPrimaryLabel: $beige;
+$buttonPrimaryBackground: $primary;
+$buttonPrimaryBorder: $nightBlue;
+
+$buttonPrimaryBackgroundDark: $nightBlue;
+$buttonPrimaryLabelDark: $beige;
+
+$buttonSecondaryLabel: $nightBlue;
+$buttonSecondaryBackground: $beige;
+$buttonSecondaryBorder: $nightBlue;
+
+$buttonDisabledLabel: $darkGrey;
+$buttonDisabledBackground: $darkBeige;
+$buttonDisabledBorder: $mediumGrey;

package/dist/scss/fields/_input.scss

@@ -1,3 +1,4 @@
+@use './../colors';
 .ui-fields-input {
 	width: 100%;
 	transition: width linear 100ms;
@@ -36,7 +37,7 @@
 			left: 0;
 			width: 0;
 			height: 3px;
-			background: $green;
+			background: colors.$green;
 			transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
 		}
 
@@ -45,7 +46,7 @@
 		}
 
 		> input {
-			@include Arial(1em, $darkBlue);
+			@include Arial(1em, colors.$darkBlue);
 			flex: 1;
 			padding: 10px 15px;
 			text-overflow: ellipsis;
@@ -53,7 +54,7 @@
 			overflow: hidden;
 
 			&::placeholder {
-				color: rgba($darkBlue, 0.3);
+				color: rgba(colors.$darkBlue, 0.3);
 				font-style: italic;
 			}
 		}
@@ -82,7 +83,7 @@
 				-ms-user-select: none;
 				user-select: none;
 				flex-shrink: 0;
-				border-top: solid $beige 1px;
+				border-top: solid colors.$beige 1px;
 				background: white;
 				transition: background linear 100ms;
 
@@ -92,14 +93,14 @@
 
 				&:hover,
 				&.selected {
-					background: $lightGrey;
+					background: colors.$lightGrey;
 				}
 			}
 		}
 	}
 
 	> .instructions {
-		@include Arial(1em, $darkBeige);
+		@include Arial(1em, colors.$darkBeige);
 		margin-top: 10px;
 	}
 
@@ -111,14 +112,14 @@
 		margin-top: 15px;
 
 		> span {
-			@include Arial(0.9em, $red);
+			@include Arial(0.9em, colors.$red);
 			margin-left: 10px;
 		}
 	}
 
 	> .warning {
 		> span {
-			color: $blue;
+			color: colors.$blue;
 		}
 	}
 
@@ -137,11 +138,7 @@
 
 	&.dark {
 		> .container {
-			background: $darkBlue;
-
-			&:after {
-				//background: $blue;
-			}
+			background: colors.$background;
 
 			> input {
 				padding: 15px 20px;

package/dist/scss/forms.scss

@@ -13,8 +13,8 @@
 		flex-direction: column;
 		> input {
 			color: colors.$beige;
-			background: colors.$darkBlue;
-			border: 1px solid colors.$darkBlue;
+			background: colors.$background;
+			border: 1px solid colors.$border;
 			padding: 1em 1.5em;
 			text-overflow: ellipsis;
 			white-space: nowrap;

package/dist/scss/iroco.scss

@@ -2,6 +2,8 @@
 @use 'fonts';
 @use 'style';
 
+/** @deprectated : does not seem to be used anywhere */
+
 *,
 *::before,
 *::after {
@@ -31,6 +33,6 @@ html {
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		font-kerning: normal;
-		background: colors.$darkBlue;
+		background: colors.$background;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.0.0-2",
+	"version": "1.0.0-3",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {