@vuu-ui/vuu-theme 4.1.0 → 5.0.0-alpha.1

package/css/components/app-header.css

@@ -26,7 +26,7 @@
 .salt-theme.vuu-theme {
   .vuuAppHeader {
     border-radius: 8px;
-    margin-bottom: 8px;
+    margin: 8px 8px 8px 0;
   }
 
 }

package/css/components/checkbox.css

@@ -6,6 +6,11 @@
     }    
   }
 
+  /* Tree checkboxes aren't inside .saltCheckbox; without this, unchecked ones are invisible. */
+  .saltTreeNode-checkbox.saltCheckboxIcon:not(.saltCheckboxIcon-checked,.saltCheckboxIcon-disabled) {
+    border-color: var(--vuu-color-gray-30);
+  }
+
   .saltCheckbox:hover {
     .saltCheckboxIcon:not(.saltCheckboxIcon-checked,.saltCheckboxIcon-disabled) {
         background: var(--vuu-color-coral-lightest);

package/css/components/shell.css

@@ -12,9 +12,10 @@
     border-radius: 0 0 6px 6px;
     padding: 31px 0 0 0;
 
-    & > .vuuTabs-tabPanel {
-      border: solid 1px var(--salt-separable-primary-borderColor);
-      border-top: none !important;
+    .vuuWorkspaceHost-content {
+      border-style: none solid solid solid;
+      border-width: 1px;
+      border-color: var(--salt-separable-primary-borderColor);
       border-radius: 0 0 6px 6px;
       padding: 0 8px 8px 8px;
     }

package/css/global.css

@@ -18,6 +18,21 @@
   color-scheme: dark;
 }
 
+/*
+ * The selected item of a navigation list or panel list: a tint of the
+ * accent behind it, and the accent for its icon or marker. Dark mode uses a
+ * lighter accent, which reads on a dark background.
+ */
+.salt-theme.vuu-theme {
+  --vuu-selected-background: color-mix(in srgb, var(--salt-accent-background) 13%, transparent);
+  --vuu-selected-accent: var(--salt-accent-background);
+}
+
+.salt-theme.vuu-theme[data-mode="dark"] {
+  --vuu-selected-background: color-mix(in srgb, color-mix(in srgb, var(--salt-accent-background) 80%, white) 52%, transparent);
+  --vuu-selected-accent: color-mix(in srgb, var(--salt-accent-background) 35%, white);
+}
+
 /* This uses the :where selector so it doesn't add any specificity */
 :where(.salt-theme.vuu-theme) :focus-visible {
   outline: var(--salt-focused-outline);

package/index.css.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.0",
+  "version": "5.0.0-alpha.1",
   "license": "Apache-2.0",
   "type": "module",
   "scripts": {
@@ -7,8 +7,9 @@
   },
   "files": [
     "index.css",
-    "NunitoSans.css",
     "reset.css",
+    "index.css.d.ts",
+    "NunitoSans.css",
     "css",
     "fonts",
     "README.md",
@@ -19,6 +20,11 @@
       "import": "./src/index.js"
     },
     "./style": {
+      "types": "./index.css.d.ts",
+      "import": "./index.css"
+    },
+    "./index.css": {
+      "types": "./index.css.d.ts",
       "import": "./index.css"
     }
   },

package/reset.css

@@ -6,3 +6,7 @@ of the element is never exceeded due to padding or border. */
   box-sizing: border-box;
 }
 
+body {
+  margin: 0;
+}
+

package/css/next/characteristics/accent.css

@@ -1,6 +0,0 @@
-.salt-theme.salt-theme-next.vuu-theme {
-  --salt-accent-background: var(--salt-palette-accent);
-  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
-  --salt-accent-borderColor: var(--salt-palette-accent);
-  --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
-}

package/css/next/palette/text.css

@@ -1,29 +0,0 @@
-.salt-theme-next.vuu-theme {
-  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-nunito);
-}
-
-.salt-theme-next.salt-theme[data-heading-font="Nunito sans"] {
-  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-nunito);
-
-  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
-
-  --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
-
-  --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
-  --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
-  --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
-
-  --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
-  --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
-  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
-}
-
-.salt-theme-next.salt-theme[data-action-font="Nunito sans"] {
-  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-nunito);
-
-  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
-}