@iroco/ui 1.0.0-2 → 1.0.0-4

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: var(--color-primary);
 			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: var(--color-dark-blue-op-30);
 				font-style: italic;
 			}
 		}
@@ -77,12 +78,11 @@
 				cursor: pointer;
 				-webkit-touch-callout: none;
 				-webkit-user-select: none;
-				-khtml-user-select: none;
 				-moz-user-select: none;
 				-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 +92,14 @@
 
 				&:hover,
 				&.selected {
-					background: $lightGrey;
+					background: colors.$lightGrey;
 				}
 			}
 		}
 	}
 
 	> .instructions {
-		@include Arial(1em, $darkBeige);
+		@include Arial(1em, colors.$darkBeige);
 		margin-top: 10px;
 	}
 
@@ -111,14 +111,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,17 +137,13 @@
 
 	&.dark {
 		> .container {
-			background: $darkBlue;
-
-			&:after {
-				//background: $blue;
-			}
+			background: var(--color-body);
 
 			> input {
 				padding: 15px 20px;
 
 				&::placeholder {
-					color: rgba(white, 0.3);
+					color: var(--color-white-op-30);
 				}
 			}
 		}

package/dist/scss/forms.scss

@@ -12,9 +12,9 @@
 		display: flex;
 		flex-direction: column;
 		> input {
-			color: colors.$beige;
-			background: colors.$darkBlue;
-			border: 1px solid colors.$darkBlue;
+			color: var(--color-text);
+			background: var(--color-body);
+			border: 1px solid var(--color-border);
 			padding: 1em 1.5em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -22,10 +22,10 @@
 			border-radius: 0.5em;
 
 			&::placeholder {
-				color: rgba(colors.$beige, 0.5);
+				color: var(--color-text-op-50);
 			}
 			&.error {
-				border-color: colors.$red;
+				border-color: var(--color-danger);
 			}
 			&.readonlyInput {
 				cursor: not-allowed;
@@ -34,7 +34,7 @@
 	}
 
 	.iroco-ui-label {
-		color: rgba(colors.$beige, 0.6);
+		color: var(--color-text-op-60);
 		font-weight: bold;
 		padding-bottom: 10px;
 		display: inline-block;
@@ -54,6 +54,6 @@
 
 	p.error {
 		margin: 0;
-		color: colors.$red;
+		color: var(--color-danger);
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.0.0-2",
+	"version": "1.0.0-4",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
@@ -18,14 +18,15 @@
 		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
+		"@ljcl/storybook-addon-cssprops": "^3.2.0",
 		"@storybook/addon-essentials": "^7.6.13",
 		"@storybook/addon-interactions": "^7.6.13",
 		"@storybook/addon-links": "^7.6.13",
 		"@storybook/addon-svelte-csf": "^4.1.1",
 		"@storybook/blocks": "^7.6.13",
 		"@storybook/svelte": "^7.6.13",
-		"@storybook/sveltekit": "^7.6.13",
 		"@storybook/svelte-vite": "^8.0.0-beta.1",
+		"@storybook/sveltekit": "^7.6.13",
 		"@storybook/test": "^7.6.13",
 		"@sveltejs/adapter-auto": "^3.1.1",
 		"@sveltejs/kit": "^2.5.0",

package/dist/NumberInputSized.svelte

@@ -1,4 +0,0 @@
-<script>import NumberInput from "./NumberInput.svelte";
-</script>
-
-<NumberInput id="sized" placeholder="ph" size="3" />

package/dist/NumberInputSized.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NumberInputSizedProps = typeof __propDef.props;
-export type NumberInputSizedEvents = typeof __propDef.events;
-export type NumberInputSizedSlots = typeof __propDef.slots;
-export default class NumberInputSized extends SvelteComponent<NumberInputSizedProps, NumberInputSizedEvents, NumberInputSizedSlots> {
-}
-export {};

package/dist/TopBar.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  TopBarProps */
-/** @typedef {typeof __propDef.events}  TopBarEvents */
-/** @typedef {typeof __propDef.slots}  TopBarSlots */
-export default class TopBar extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TopBarProps = typeof __propDef.props;
-export type TopBarEvents = typeof __propDef.events;
-export type TopBarSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/scss/check.scss

@@ -1,47 +0,0 @@
-.ui-check {
-	width: 30px;
-	min-width: 30px;
-	height: 30px;
-	min-height: 30px;
-	background: rgba($darkBeige, 0.1);
-	border: solid rgba($darkBeige, 0.4) 1px;
-	cursor: pointer;
-	outline: none;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
-	border-radius: 2px;
-
-	&.tag {
-		width: auto;
-		padding: 0 10px;
-	}
-
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 5px rgba($blue, 0.3);
-	}
-
-	> svg {
-		stroke-dashoffset: 100;
-		transition: stroke-dashoffset cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
-	}
-
-	> span {
-		@include Arial(1em, $darkBeige);
-	}
-
-	&[aria-pressed='true'] {
-		border: solid $blue 1px;
-
-		> svg {
-			stroke-dashoffset: 0;
-		}
-
-		> span {
-			color: $blue;
-		}
-	}
-}

package/dist/scss/iroco.scss

@@ -1,36 +0,0 @@
-@use 'colors';
-@use 'fonts';
-@use 'style';
-
-*,
-*::before,
-*::after {
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-a,
-a:visited,
-a:active,
-button {
-	text-decoration: none;
-	font-size: 14px;
-	color: colors.$beige;
-}
-
-html {
-	margin: 0;
-	padding: 0;
-
-	> body {
-		@include fonts.Arial(14px, white);
-		margin: 0;
-		padding: 0;
-		cursor: default;
-		text-rendering: optimizeLegibility;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		font-kerning: normal;
-		background: colors.$darkBlue;
-	}
-}