@iroco/ui 1.14.10 → 1.14.12

package/dist/Navigation.svelte

@@ -223,6 +223,93 @@
   }
 }
 
+:root {
+  --color-beige: #f2ebe3;
+  --color-light-beige: #fff9f4;
+  --color-dark-beige: #eaddd5;
+  --color-dark-grey: #33323a;
+  --color-medium-grey: #464452;
+  --color-medium-light-grey: #a9a29e;
+  --color-light-grey: #f5f5f5;
+  --color-dark-blue: #211d28;
+  --color-dark-blue-op-30: #211d284d;
+  --color-night-blue: #18151e;
+  --color-black: black;
+  --color-white: white;
+  --color-red: #ff504d;
+  --color-green: #00d692;
+  --color-light-green: #82eec7;
+  --color-dark-green: #00704e;
+  --color-yellow: #ffe032;
+  --color-blue: #001fcd;
+  /* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
+  --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-red-op-80: rgba(var(--color-red), 0.8);
+  --color-green-op-80: rgba(var(--color-green), 0.8);
+  --color-yellow-op-80: rgba(var(--color-yellow), 0.8);
+  /* global colors */
+  /* semantic colors */
+  --color-primary-light: var(--color-light-green);
+  --color-primary: var(--color-green);
+  --color-secondary: var(--color-beige);
+  /* feedback */
+  --color-success: var(--color-green);
+  --color-success-bg: var(--color-green-op-80);
+  --color-danger: var(--color-red);
+  --color-danger-bg: var(--color-red-op-80);
+  --color-warning: var(--color-yellow);
+  --color-warning-bg: var(--color-yellow-op-80);
+  /* typography */
+  --color-text: var(--color-foreground);
+  --color-text-dark: var(--color-medium-grey);
+  --color-text-op-80: rgba(var(--color-text), 0.8);
+  --color-text-op-99: rgba(var(--color-text), 0.99);
+  /* border */
+  /* body */
+  --color-body: var(--color-background);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--color-dark-blue);
+    --color-background-darker: var(--color-night-blue);
+    --color-foreground: var(--color-beige);
+    --color-link: var(--color-green);
+    --color-highlight: var(--color-yellow);
+  }
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-background: var(--color-light-beige);
+    --color-background-darker: var(--color-dark-beige);
+    --color-foreground: var(--color-black);
+    --color-link: var(--color-dark-green);
+    --color-highlight: var(--color-blue);
+  }
+}
+@media (prefers-contrast: more) {
+  :root {
+    --color-background: var(--color-white);
+    --color-background-darker: var(--color-dark-beige);
+    --color-foreground: var(--color-black);
+    --color-link: var(--color-dark-green);
+    --color-highlight: var(--color-blue);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-border: var(--color-medium-grey);
+  }
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-border: var(--color-medium-light-grey);
+  }
+}
+
 .navigation {
   display: flex;
   flex-direction: row;
@@ -237,6 +324,7 @@
   display: flex;
   align-items: center;
   padding-left: 1em;
+  height: 4.5em;
 }
 .navigation__title-container__title {
   padding-left: 1em;
@@ -245,8 +333,25 @@
 @media all and (max-width: 768px) {
   .navigation {
     display: none;
-    color: var(--color-text);
+    color: var(--color-background);
+  }
+}
+@media (max-width: 768px) and (prefers-color-scheme: dark) {
+  .navigation {
+    --color-background: var(--color-white);
   }
+}
+@media (max-width: 768px) and (prefers-color-scheme: light) {
+  .navigation {
+    --color-background: var(--color-black);
+  }
+}
+@media (max-width: 768px) and (prefers-contrast: more) {
+  .navigation {
+    --color-background: var(--color-black);
+  }
+}
+@media all and (max-width: 768px) {
   .navigation--mobile {
     display: flex;
     padding: 0 1em;
@@ -258,6 +363,8 @@
     border-bottom: 1px solid var(--color-border);
   }
   .navigation--mobile__button {
+    --color-icon-primary: var(--color-medium-light-grey);
+    --color-icon-secondary: inherit;
     background-color: transparent;
     border: none;
     color: var(--color-icon-primary);
@@ -272,7 +379,25 @@
 }
 .navigation__title-container__title,
 .navigation--mobile__title-container__title {
-  color: var(--color-text-light);
+  color: var(--color-background);
   font-weight: bold;
   font-size: 2em;
+}
+@media (prefers-color-scheme: dark) {
+  .navigation__title-container__title,
+  .navigation--mobile__title-container__title {
+    --color-background: var(--color-white);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .navigation__title-container__title,
+  .navigation--mobile__title-container__title {
+    --color-background: var(--color-black);
+  }
+}
+@media (prefers-contrast: more) {
+  .navigation__title-container__title,
+  .navigation--mobile__title-container__title {
+    --color-background: var(--color-black);
+  }
 }</style>

package/dist/NumberInput.svelte

@@ -46,7 +46,7 @@
   border-radius: 0.5em;
 }
 .iroco-ui-form .iroco-ui-input > input::placeholder {
-  color: var(--color-text-op-50);
+  color: var(--form-text-placeholder);
 }
 .iroco-ui-form .iroco-ui-input > input.error {
   border-color: var(--color-danger);
@@ -61,7 +61,7 @@
   border: 1px solid var(--form-element-border);
 }
 .iroco-ui-form .iroco-ui-label {
-  color: var(--color-text-op-60);
+  color: var(--color-text-op-99);
   font-weight: bold;
   padding-bottom: 10px;
   display: inline-block;

package/dist/RadioButton.svelte

@@ -42,7 +42,7 @@
   border-radius: 0.5em;
 }
 .iroco-ui-form .iroco-ui-input > input::placeholder {
-  color: var(--color-text-op-50);
+  color: var(--form-text-placeholder);
 }
 .iroco-ui-form .iroco-ui-input > input.error {
   border-color: var(--color-danger);
@@ -57,7 +57,7 @@
   border: 1px solid var(--form-element-border);
 }
 .iroco-ui-form .iroco-ui-label {
-  color: var(--color-text-op-60);
+  color: var(--color-text-op-99);
   font-weight: bold;
   padding-bottom: 10px;
   display: inline-block;

package/dist/TextInput.svelte

@@ -104,7 +104,7 @@
   border-radius: 0.5em;
 }
 .iroco-ui-form .iroco-ui-input > input::placeholder {
-  color: var(--color-text-op-50);
+  color: var(--form-text-placeholder);
 }
 .iroco-ui-form .iroco-ui-input > input.error {
   border-color: var(--color-danger);
@@ -119,7 +119,7 @@
   border: 1px solid var(--form-element-border);
 }
 .iroco-ui-form .iroco-ui-label {
-  color: var(--color-text-op-60);
+  color: var(--color-text-op-99);
   font-weight: bold;
   padding-bottom: 10px;
   display: inline-block;

package/dist/scss/button.scss

@@ -4,6 +4,7 @@
 @use './colors';
 
 .iroco-ui-button {
+	@include colors.button-colors;
 	cursor: pointer;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -18,24 +19,24 @@
 	border-radius: constants.$border-radius;
 
 	&--basic {
-		color: var(--btn-secondary-label);
-		background: var(--btn-secondary-bg);
-		border: 1px solid var(--btn-secondary-border);
+		color: var(--btn-label);
+		background: var(--btn-bg);
+		border: 1px solid var(--btn-border);
 	}
 
 	&--dark {
-		@include colors.global-colors();
-		background: var(--color-background-darker);
-		color: var(--color-foreground);
+		background: var(--dark-btn-bg);
+		color: var(--dark-btn-label);
 	}
 
 	&--success {
 		background: var(--color-success);
-		color: var(--btn-secondary-label);
+		color: var(--colored-btn-label);
 	}
 
 	&--danger {
 		background: var(--color-danger);
+		color: var(--colored-btn-label);
 	}
 
 	&--regular {
@@ -46,14 +47,17 @@
 		padding: 0.5em 1em;
 	}
 
-	&--basic:hover,
+	&--basic:hover {
+		box-shadow: inset 0 0 0 10em var(--btn-hover);
+	}
+
 	&--success:hover,
 	&--danger:hover {
-		box-shadow: inset 0 0 0 10em var(--color-black-op-20);
+		box-shadow: inset 0 0 0 10em var(--colored-btn-hover);
 	}
 
 	&--dark:hover {
-		box-shadow: inset 0 0 0 10em var(--color-white-op-20);
+		box-shadow: inset 0 0 0 10em var(--dark-btn-hover);
 	}
 
 	&:active {

package/dist/scss/colors.scss

@@ -2,91 +2,87 @@
 // Create your own theme by duplicating this one and importing it globally
 
 :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-beige-lighter: #fff9f4;
 	--color-beige: #f2ebe3;
-	--color-beige-darker: #eaddd5;
+	--color-light-beige: #fff9f4;
+	--color-dark-beige: #eaddd5;
 	--color-dark-grey: #33323a;
 	--color-medium-grey: #464452;
+	--color-medium-light-grey: #a9a29e;
 	--color-light-grey: #f5f5f5;
 	--color-dark-blue: #211d28;
 	--color-dark-blue-op-30: #211d284d;
 	--color-night-blue: #18151e;
 	--color-black: black;
 	--color-white: white;
+	--color-red: #ff504d;
 	--color-green: #00d692;
-	--color-green-light: #82eec7;
-	--color-green-dark: #00704e;
-	--color-green-alpha: #00d69280;
+	--color-light-green: #82eec7;
+	--color-dark-green: #00704e;
 	--color-yellow: #ffe032;
-	--color-yellow-op-80: #ffe03280;
 	--color-blue: #001fcd; // yellow complementary color
 
+	/* Caution !!! Hover doesn't work with --color-white-op-20: rgba(var(--color-white), 0.2)); */
+	--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-red-op-80: rgba(var(--color-red), 0.8);
+	--color-green-op-80: rgba(var(--color-green), 0.8);
+	--color-yellow-op-80: rgba(var(--color-yellow), 0.8);
+
+	/* global colors */
+	@media (prefers-color-scheme: dark) {
+		--color-background: var(--color-dark-blue);
+		--color-background-darker: var(--color-night-blue);
+		--color-foreground: var(--color-beige);
+		--color-link: var(--color-green);
+		--color-highlight: var(--color-yellow);
+	}
+	@media (prefers-color-scheme: light) {
+		--color-background: var(--color-light-beige);
+		--color-background-darker: var(--color-dark-beige);
+		--color-foreground: var(--color-black);
+		--color-link: var(--color-dark-green);
+		--color-highlight: var(--color-blue);
+	}
+	@media (prefers-contrast: more) {
+		--color-background: var(--color-white);
+		--color-background-darker: var(--color-dark-beige);
+		--color-foreground: var(--color-black);
+		--color-link: var(--color-dark-green);
+		--color-highlight: var(--color-blue);
+	}
+
 	/* semantic colors */
-	--color-primary-light: var(--color-green-light);
+	--color-primary-light: var(--color-light-green); // only use in mookup landing
 	--color-primary: var(--color-green);
-	--color-primary-bg: var(--color-green-alpha);
-	--color-primary-dark: var(--color-green-dark);
-
-	--color-secondary-light: #ffffff;
-	--color-secondary: #f2ebe3;
-	--color-secondary-dark: #a9a29e;
+	--color-secondary: var(--color-beige);
 
 	/* feedback */
-	--color-success: #00d692;
-	--color-success-bg: #00d69280;
-	--color-danger: #ff504d;
-	--color-danger-bg: #ff504d80;
+	--color-success: var(--color-green);
+	--color-success-bg: var(--color-green-op-80);
+	--color-danger: var(--color-red);
+	--color-danger-bg: var(--color-red-op-80);
 	--color-warning: var(--color-yellow);
 	--color-warning-bg: var(--color-yellow-op-80);
 
 	/* typography */
-	--color-text-light: #ffffff;
-	--color-text: #f2ebe3;
-	--color-text-op-50: #f2ebe380;
-	--color-text-op-60: #f2ebe399;
-	--color-text-dark: #464452;
+	--color-text: var(--color-foreground);
+	--color-text-dark: var(--color-medium-grey);
+	--color-text-op-80: rgba(var(--color-text), 0.8);
+	--color-text-op-99: rgba(var(--color-text), 0.99);
 
 	/* border */
-	--color-border: #464452;
+	@media (prefers-color-scheme: dark) {
+		--color-border: var(--color-medium-grey);
+	}
+	@media (prefers-color-scheme: light) {
+		--color-border: var(--color-medium-light-grey);
+	}
 
 	/* body */
-	--color-body: var(--color-dark-blue);
-
-	/* forms */
-	--form-element-border: var(--color-beige);
-	--form-element-bg: var(--color-beige);
-	--form-text-placeholder: #a9a29e;
-
-	/* buttons */
-	--btn-primary-bg: var(--color-beige);
-	--btn-primary-border: var(--color-night-blue);
-	--btn-primary-label: var(--color-beige);
-
-	--dark-btn-primary-label: var(--color-beige);
-	--dark-btn-primary-bg: var(--color-night-blue);
-
-	--btn-secondary-bg: var(--color-secondary);
-	--btn-secondary-border: var(--color-night-blue);
-	--btn-secondary-label: var(--color-night-blue);
-
-	--btn-basic-label: var(--color-night-blue);
-	--btn-basic-bg: var(--color-beige);
-	--btn-basic-border: var(--color-night-blue);
-
-	--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;
+	--color-body: var(--color-background);
 }
 
 @mixin logo-color() {
@@ -101,26 +97,38 @@
 	}
 }
 
-@mixin global-colors() {
+@mixin form-colors() {
+	--form-element-border: var(--color-foreground);
+	--form-element-bg: var(--color-foreground);
+	--form-text-placeholder: var(--color-text-op-80);
+}
+
+@mixin button-colors() {
+	--btn-bg: var(--color-foreground);
+	--btn-border: var(--color-background-darker);
+	--btn-label: var(--color-background-darker);
+
+	--colored-btn-label: var(--color-black);
+	--colored-btn-hover: var(--color-black-op-20);
+
+	--dark-btn-label: var(--color-foreground);
+	--dark-btn-bg: var(--color-background-darker);
+
+	--btn-disabled-label: var(--color-black-op-60);
+	--btn-disabled-bg: var(--color-medium-light-grey);
+	--btn-disabled-border: var(--color-black-op-60);
+
 	@media (prefers-color-scheme: dark) {
-		--color-background: var(--color-dark-blue);
-		--color-background-darker: var(--color-night-blue);
-		--color-foreground: var(--color-beige);
-		--color-link: var(--color-success);
-		--color-highlight: var(--color-yellow);
+		--btn-hover: var(--color-black-op-20);
+		--dark-btn-hover: var(--color-white-op-20);
 	}
 	@media (prefers-color-scheme: light) {
-		--color-background: var(--color-beige-lighter);
-		--color-background-darker: var(--color-beige-darker);
-		--color-foreground: var(--color-black);
-		--color-link: var(--color-primary-dark);
-		--color-highlight: var(--color-blue);
-	}
-	@media (prefers-contrast: more) {
-		--color-background: var(--color-white);
-		--color-background-darker: var(--color-beige-darker);
-		--color-foreground: var(--color-black);
-		--color-link: var(--color-primary-dark);
-		--color-highlight: var(--color-blue);
+		--btn-hover: var(--color-white-op-20);
+		--dark-btn-hover: var(--color-black-op-20);
 	}
 }
+
+@mixin icon-colors() {
+	--color-icon-primary: var(--color-medium-light-grey);
+	--color-icon-secondary: inherit;
+}

package/dist/scss/forms.scss

@@ -28,7 +28,7 @@
 			border-radius: 0.5em;
 
 			&::placeholder {
-				color: var(--color-text-op-50);
+				color: var(--form-text-placeholder);
 			}
 
 			&.error {
@@ -50,7 +50,7 @@
 	}
 
 	.iroco-ui-label {
-		color: var(--color-text-op-60);
+		color: var(--color-text-op-99);
 		font-weight: bold;
 		padding-bottom: 10px;
 		display: inline-block;

package/package.json

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