@sveltia/ui 0.6.6 → 0.7.1

package/package/styles/variables.scss

@@ -1,63 +1,69 @@
 :root[data-theme="light"],
 :host[data-theme="light"] {
-  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 0%; // highlight
-  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 20%; // primary
-  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 40%; // secondary
-  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 60%; // tertiary
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%; // highlight
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%; // primary
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%; // secondary
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%; // tertiary
+  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%; // disabled
   --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%; // content/input
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%; // primary
-  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 94%; // secondary
-  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 90%; // tertiary/disabled
-  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 86%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 78%; // primary
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 82%; // secondary/input
+  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
+  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%; // highlight
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
-  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 45%);
-  --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 80% 40%);
-  --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 80% 50%);
-  --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%); // white/inverted
+  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
+  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
+  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
+  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
   // Alerts
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
   --sui-info-color-hue: 210;
   --sui-success-color-hue: 100;
-  --sui-alert-foreground-color-saturation: 88%;
-  --sui-alert-foreground-color-lightness: 28%;
-  --sui-alert-background-color-saturation: 68%;
-  --sui-alert-background-color-lightness: 88%;
+  --sui-alert-foreground-color-saturation: 85%;
+  --sui-alert-foreground-color-lightness: 25%;
+  --sui-alert-background-color-saturation: 65%;
+  --sui-alert-background-color-lightness: 90%;
   --sui-alert-border-color-saturation: 48%;
   --sui-alert-border-color-lightness: 68%;
 }
 
 :root[data-theme="dark"],
 :host[data-theme="dark"] {
-  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 100%; // highlight
-  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 80%; // primary
-  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 60%; // secondary
-  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 40%; // tertiary
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%; // highlight
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%; // primary
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%; // secondary
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%; // tertiary
+  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%; // disabled
   --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%; // content/input
   --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%; // primary
-  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 16%; // secondary
-  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 20%; // tertiary/disabled
-  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 24%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 32%; // primary
-  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 28%; // secondary/input
+  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
+  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
+  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 35%; // control
+  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
-  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
-  --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 100% 55%);
-  --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 100% 35%);
-  --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%); // white
+  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%); // lighter
+  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
+  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
+  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
   // Alerts
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
   --sui-info-color-hue: 210;
   --sui-success-color-hue: 100;
-  --sui-alert-foreground-color-saturation: 48%;
-  --sui-alert-foreground-color-lightness: 68%;
-  --sui-alert-background-color-saturation: 88%;
-  --sui-alert-background-color-lightness: 8%;
+  --sui-alert-foreground-color-saturation: 85%;
+  --sui-alert-foreground-color-lightness: 75%;
+  --sui-alert-background-color-saturation: 40%;
+  --sui-alert-background-color-lightness: 10%;
   --sui-alert-border-color-saturation: 38%;
   --sui-alert-border-color-lightness: 18%;
 }
@@ -70,8 +76,8 @@
   --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
   --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
   --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
-  --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
-  --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
+  --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
+  --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
   --sui-error-foreground-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
       var(--sui-alert-foreground-color-lightness)
@@ -89,7 +95,9 @@
       var(--sui-alert-foreground-color-lightness)
   );
   // Background
-  --sui-highlight-background-color: hsl(var(--sui-background-color-5-hsl));
+  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 50%);
+  --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
+  --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
   --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
@@ -115,10 +123,8 @@
       var(--sui-alert-background-color-lightness)
   );
   // Borders
-  --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
-  --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
-  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
-  --sui-checkbox-background-color: hsl(var(--sui-background-color-5-hsl));
+  --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)
@@ -156,43 +162,55 @@
   --sui-line-height-comfortable: 1.75;
   // Controls
   --sui-control-small-border-width: 1px;
-  --sui-control-small-border-radius: 2px;
+  --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
+  --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
   --sui-control-small-height: 24px;
   --sui-control-medium-border-width: 1px;
-  --sui-control-medium-border-radius: 4px;
+  --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
+  --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
   --sui-control-medium-height: 32px;
   --sui-control-large-border-width: 1px;
-  --sui-control-large-border-radius: 8px;
-  --sui-control-large-height: 40px;
-  --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
+  --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
+  --sui-control-large-height: 48px;
+  --sui-control-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-control-foreground-color: var(--sui-primary-foreground-color);
-  --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
   --sui-control-font-size: var(--sui-font-size-default);
   --sui-control-line-height: var(--sui-line-height-default);
-  // Buttons
+  // Button
   --sui-button-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-button-small-padding: var(--sui-control-small-padding);
   --sui-button-small-height: var(--sui-control-small-height);
   --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-button-medium-padding: var(--sui-control-medium-padding);
   --sui-button-medium-height: var(--sui-control-medium-height);
   --sui-button-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-button-large-padding: var(--sui-control-large-padding);
   --sui-button-large-height: var(--sui-control-large-height);
-  // Options & menu items
-  --sui-option-small-border-radius: var(--sui-control-small-border-radius);
-  --sui-option-small-height: var(--sui-control-small-height);
-  --sui-option-medium-border-radius: var(--sui-control-medium-border-radius);
-  --sui-option-medium-height: var(--sui-control-medium-height);
-  --sui-option-large-border-radius: var(--sui-control-large-border-radius);
-  --sui-option-large-height: var(--sui-control-large-height);
+  --sui-button-border-color: var(--sui-control-border-color);
+  --sui-button-background-color: var(--sui-control-background-color);
+  // Checkbox
+  --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
+  --sui-checkbox-height: 20px;
+  --sui-checkbox-border-color: var(--sui-control-border-color);
+  --sui-checkbox-background-color: var(--sui-control-background-color);
+  // Option & menu item
+  --sui-option-border-radius: var(--sui-control-medium-border-radius);
+  --sui-option-padding: var(--sui-control-medium-padding);
+  --sui-option-height: var(--sui-control-medium-height);
+  // Listbox
+  --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
+  --sui-listbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-listbox-foreground-color: var(--sui-control-foreground-color);
+  --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
   // Textbox: singleline & multiline text fields
-  --sui-textbox-small-border-radius: var(--sui-control-small-border-radius);
-  --sui-textbox-small-height: var(--sui-control-small-height);
-  --sui-textbox-medium-border-radius: var(--sui-control-medium-border-radius);
-  --sui-textbox-medium-height: var(--sui-control-medium-height);
-  --sui-textbox-large-border-radius: var(--sui-control-large-border-radius);
-  --sui-textbox-large-height: var(--sui-control-large-height);
+  --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
+  --sui-textbox-height: var(--sui-control-medium-height);
+  --sui-textbox-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-textbox-foreground-color: var(--sui-control-foreground-color);
-  --sui-textbox-background-color: var(--sui-control-background-color);
+  --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);
   --sui-textbox-font-size: var(--sui-font-size-default);
   --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
@@ -201,4 +219,22 @@
   --sui-tab-small-height: var(--sui-control-small-height);
   --sui-tab-medium-height: var(--sui-control-medium-height);
   --sui-tab-large-height: var(--sui-control-large-height);
+  // Toolbar
+  --sui-primary-toolbar-size: 48px;
+  --sui-secondary-toolbar-size: 40px;
+  // table
+  --sui-primary-row-height: 48px;
+  --sui-secondary-row-height: 40px;
+
+  // Make controls larger on touch devices, e.g. mobile & tablet
+  @media (pointer: coarse) {
+    --sui-control-small-height: 30px;
+    --sui-control-medium-height: 40px;
+    --sui-control-large-height: 60px;
+    --sui-checkbox-height: 24px;
+    --sui-primary-toolbar-size: 56px;
+    --sui-secondary-toolbar-size: 48px;
+    --sui-primary-row-height: 56px;
+    --sui-secondary-row-height: 48px;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.6.6",
+  "version": "0.7.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -27,16 +27,16 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "^1.27.2",
+    "@sveltejs/adapter-auto": "2.1.1",
+    "@sveltejs/kit": "^1.27.3",
     "@sveltejs/package": "^2.2.2",
     "cspell": "^7.3.8",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsdoc": "^46.8.2",
-    "eslint-plugin-svelte": "^2.34.0",
+    "eslint-plugin-svelte": "^2.34.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-html": "^1.5.0",
@@ -44,7 +44,7 @@
     "prettier-plugin-svelte": "^3.0.3",
     "sass": "^1.69.5",
     "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-scss": "^5.3.0",
     "svelte-check": "^3.5.2",
     "svelte-i18n": "^4.0.0",
@@ -281,6 +281,11 @@
       "svelte": "./package/components/text-field/text-input.svelte",
       "default": "./package/components/text-field/text-input.svelte"
     },
+    "./components/toast/toast.svelte": {
+      "types": "./package/components/toast/toast.svelte.d.ts",
+      "svelte": "./package/components/toast/toast.svelte",
+      "default": "./package/components/toast/toast.svelte"
+    },
     "./components/toolbar/toolbar.svelte": {
       "types": "./package/components/toolbar/toolbar.svelte.d.ts",
       "svelte": "./package/components/toolbar/toolbar.svelte",
@@ -291,23 +296,11 @@
       "svelte": "./package/components/util/app-shell.svelte",
       "default": "./package/components/util/app-shell.svelte"
     },
-    "./components/util/events": {
-      "types": "./package/components/util/events.d.ts",
-      "default": "./package/components/util/events.js"
-    },
-    "./components/util/group": {
-      "types": "./package/components/util/group.d.ts",
-      "default": "./package/components/util/group.js"
-    },
     "./components/util/group.svelte": {
       "types": "./package/components/util/group.svelte.d.ts",
       "svelte": "./package/components/util/group.svelte",
       "default": "./package/components/util/group.svelte"
     },
-    "./components/util/popup": {
-      "types": "./package/components/util/popup.d.ts",
-      "default": "./package/components/util/popup.js"
-    },
     "./components/util/popup.svelte": {
       "types": "./package/components/util/popup.svelte.d.ts",
       "svelte": "./package/components/util/popup.svelte",
@@ -318,10 +311,6 @@
       "svelte": "./package/components/util/portal.svelte",
       "default": "./package/components/util/portal.svelte"
     },
-    "./components/util/util": {
-      "types": "./package/components/util/util.d.ts",
-      "default": "./package/components/util/util.js"
-    },
     ".": {
       "types": "./package/index.d.ts",
       "svelte": "./package/index.js",
@@ -335,6 +324,22 @@
       "types": "./package/locales/ja.d.ts",
       "default": "./package/locales/ja.js"
     },
+    "./services/events": {
+      "types": "./package/services/events.d.ts",
+      "default": "./package/services/events.js"
+    },
+    "./services/group": {
+      "types": "./package/services/group.d.ts",
+      "default": "./package/services/group.js"
+    },
+    "./services/popup": {
+      "types": "./package/services/popup.d.ts",
+      "default": "./package/services/popup.js"
+    },
+    "./services/util": {
+      "types": "./package/services/util.d.ts",
+      "default": "./package/services/util.js"
+    },
     "./styles/core.scss": "./package/styles/core.scss",
     "./styles/variables.scss": "./package/styles/variables.scss",
     "./typedef": {
@@ -483,33 +488,24 @@
       "components/text-field/text-input.svelte": [
         "./package/components/text-field/text-input.svelte.d.ts"
       ],
+      "components/toast/toast.svelte": [
+        "./package/components/toast/toast.svelte.d.ts"
+      ],
       "components/toolbar/toolbar.svelte": [
         "./package/components/toolbar/toolbar.svelte.d.ts"
       ],
       "components/util/app-shell.svelte": [
         "./package/components/util/app-shell.svelte.d.ts"
       ],
-      "components/util/events": [
-        "./package/components/util/events.d.ts"
-      ],
-      "components/util/group": [
-        "./package/components/util/group.d.ts"
-      ],
       "components/util/group.svelte": [
         "./package/components/util/group.svelte.d.ts"
       ],
-      "components/util/popup": [
-        "./package/components/util/popup.d.ts"
-      ],
       "components/util/popup.svelte": [
         "./package/components/util/popup.svelte.d.ts"
       ],
       "components/util/portal.svelte": [
         "./package/components/util/portal.svelte.d.ts"
       ],
-      "components/util/util": [
-        "./package/components/util/util.d.ts"
-      ],
       "index": [
         "./package/index.d.ts"
       ],
@@ -519,6 +515,18 @@
       "locales/ja": [
         "./package/locales/ja.d.ts"
       ],
+      "services/events": [
+        "./package/services/events.d.ts"
+      ],
+      "services/group": [
+        "./package/services/group.d.ts"
+      ],
+      "services/popup": [
+        "./package/services/popup.d.ts"
+      ],
+      "services/util": [
+        "./package/services/util.d.ts"
+      ],
       "typedef": [
         "./package/typedef.d.ts"
       ]

package/package/components/util/group.d.ts

@@ -1 +0,0 @@
-export function activateGroup(...args: any[]): void;