@iroco/ui 1.0.0-4 → 1.0.0-5

package/dist/TextInput.svelte

@@ -47,104 +47,7 @@ function typeAction(node) {
 	{/if}
 </div>
 
-<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;
-}
-
-input,
+<style>input,
 textarea {
   outline: none;
   text-decoration: none;

package/dist/scss/button.scss

@@ -1,4 +1,4 @@
-@use './colors';
+//@use './colors';
 @use './fonts';
 @use './containers';
 @use './constants';

package/dist/scss/colors.scss

@@ -1,63 +1,5 @@
-// Declarative colors
-
-$blue: #00b9ff;
-$darkBlue: #211d28;
-$nightBlue: #18151e;
-$greenLight: #82eec7;
-$green: #00d692;
-$greenDark: #00a873;
-$red: #ff504d;
-$yellow: #ffe032;
-$white: #ffffff;
-$beige: #f2ebe3;
-$darkBeige: #a9a29e;
-$mediumGrey: #464452;
-$darkGrey: #33323a;
-$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;
-}
+// Import this file for Iroco colors
+// Create your own theme by duplicating this one and importing it globally
 
 :root {
 	--color-white-op-20: rgba(255, 255, 255, 0.2);

package/dist/scss/fields/_checkbox.scss

@@ -5,7 +5,7 @@
 		justify-content: flex-start;
 
 		> label {
-			@include Arial(0.9em, $blue, bold);
+			@include Arial(0.9em, #00b9ff /*$blue*/, bold);
 			letter-spacing: 0.05em;
 			text-transform: uppercase;
 			display: inline-block;
@@ -26,14 +26,14 @@
 		margin-top: 15px;
 
 		> span {
-			@include Arial(0.9em, $red);
+			@include Arial(0.9em, var(--color-danger) /* red */);
 			margin-left: 10px;
 		}
 	}
 
 	> .warning {
 		> span {
-			color: $blue;
+			color: #00b9ff /*$blue*/;
 		}
 	}
 }

package/dist/scss/fields/_input.scss

@@ -1,4 +1,4 @@
-@use './../colors';
+//@use './../colors';
 .ui-fields-input {
 	width: 100%;
 	transition: width linear 100ms;
@@ -46,7 +46,7 @@
 		}
 
 		> input {
-			@include Arial(1em, colors.$darkBlue);
+			@include Arial(1em, #211d28); /* $darkBlue */
 			flex: 1;
 			padding: 10px 15px;
 			text-overflow: ellipsis;
@@ -82,7 +82,7 @@
 				-ms-user-select: none;
 				user-select: none;
 				flex-shrink: 0;
-				border-top: solid colors.$beige 1px;
+				border-top: solid #f2ebe3 /*colors.$beige*/ 1px;
 				background: white;
 				transition: background linear 100ms;
 
@@ -92,14 +92,14 @@
 
 				&:hover,
 				&.selected {
-					background: colors.$lightGrey;
+					background: #f5f5f5 /*lighGrey*/;
 				}
 			}
 		}
 	}
 
 	> .instructions {
-		@include Arial(1em, colors.$darkBeige);
+		@include Arial(1em, var(--color-secondary-dark) /*$darkBeige*/);
 		margin-top: 10px;
 	}
 
@@ -111,14 +111,14 @@
 		margin-top: 15px;
 
 		> span {
-			@include Arial(0.9em, colors.$red);
+			@include Arial(0.9em, var(--color-danger) /*$red*/);
 			margin-left: 10px;
 		}
 	}
 
 	> .warning {
 		> span {
-			color: colors.$blue;
+			color: #00b9ff /*$blue*/;
 		}
 	}
 

package/dist/scss/forms.scss

@@ -1,4 +1,4 @@
-@use 'colors';
+//@use 'colors';
 
 .iroco-ui-form {
 	input,

package/dist/scss/style.scss

@@ -1,4 +1,4 @@
-@use 'colors';
+//@use 'colors';
 @use 'containers';
 @use 'fonts';
 @use 'forms';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.0.0-4",
+	"version": "1.0.0-5",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
@@ -38,6 +38,7 @@
 		"@testing-library/user-event": "^14.5.2",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
+		"@vitest/ui": "^1.2.2",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-storybook": "^0.6.15",