nexus-shared 3.1.0 → 4.0.0

package/src/Styles/Nexus.Tokens.css

@@ -1,89 +1,94 @@
-/*
- * Design tokens. Components use only these variables. Colors come from the active theme (Nexus.Themes.css);
- * this file holds everything else, plus the colors derived from a theme's palette.
- */
-@layer nexus.tokens {
-  :root {
-    /* Light, dark, or the system setting when data-nx-mode is not set. */
-    color-scheme: light dark;
-
-    /* Type */
-    --nx-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
-    --nx-font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
-    /* Nepali text (lang="ne"): system fonts with Devanagari glyphs; the page font has none. */
-    --nx-font-devanagari: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", Mangal, var(--nx-font);
-    --nx-text-xs: 0.75rem;
-    --nx-text-sm: 0.8125rem;
-    --nx-text-md: 0.875rem;
-    --nx-text-lg: 1rem;
-    --nx-text-xl: 1.25rem;
-    --nx-text-2xl: 1.625rem;
-    --nx-leading: 1.5;
-
-    /* Shape and spacing */
-    --nx-radius-sm: 4px;
-    --nx-radius: 6px;
-    --nx-radius-lg: 10px;
-    --nx-radius-full: 999px;
-    --nx-space-1: 4px;
-    --nx-space-2: 8px;
-    --nx-space-3: 12px;
-    --nx-space-4: 16px;
-    --nx-space-5: 20px;
-    --nx-space-6: 24px;
-    --nx-space-8: 32px;
-
-    /* Density: the sizes a compact and a cozy page differ by (cozy below). Everything sized by them follows. */
-    --nx-control-sm: 28px;
-    --nx-control-md: 34px;
-    --nx-control-lg: 40px;
-    /* A row in a list: a menu's item, a table's row and header, a dropdown's option, the Columns panel's line. */
-    --nx-row: 32px;
-    /* A bottom band, such as a table's footer: small controls with 6px above and below, and its 1px line. */
-    --nx-footbar: calc(var(--nx-control-sm) + 13px);
-
-    /* Motion */
-    --nx-duration: 120ms;
-  }
-
-  /*
-   * Cozy: every control 4px taller and every row 6px, for a touch screen or a large monitor. One attribute on <html>
-   * (ThemeScript and ThemeSwitcher set it), so no component asks; compact, the default, is the sizes above.
-   */
-  :root[data-nx-density="cozy"] {
-    --nx-control-sm: 32px;
-    --nx-control-md: 38px;
-    --nx-control-lg: 44px;
-    --nx-row: 38px;
-  }
-
-  :root[data-nx-mode="light"] {
-    color-scheme: light;
-  }
-
-  :root[data-nx-mode="dark"] {
-    color-scheme: dark;
-  }
-
-  /*
-   * Derived colors, declared wherever a theme applies, so an element with its own data-nx-theme
-   * (a theme preview, for example) gets hover and soft colors from that theme.
-   * Mixing toward the text color darkens in light mode and lightens in dark mode.
-   */
-  :root,
-  [data-nx-theme] {
-    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), var(--nx-text) 16%);
-    --nx-primary-soft: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-surface));
-    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), var(--nx-text) 16%);
-    --nx-danger-soft: color-mix(in oklab, var(--nx-danger) 14%, var(--nx-surface));
-    --nx-success-soft: color-mix(in oklab, var(--nx-success) 14%, var(--nx-surface));
-    --nx-warning-soft: color-mix(in oklab, var(--nx-warning) 14%, var(--nx-surface));
-    --nx-info-soft: color-mix(in oklab, var(--nx-info) 14%, var(--nx-surface));
-
-    --nx-focus-ring: 0 0 0 3px color-mix(in oklab, var(--nx-primary) 35%, transparent);
-    --nx-shadow-sm: 0 1px 2px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.4));
-    --nx-shadow:
-      0 4px 14px light-dark(rgb(16 24 40 / 0.08), rgb(0 0 0 / 0.45)),
-      0 1px 3px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.35));
-  }
-}
+/*
+ * Design tokens. Components use only these variables. Colors come from the active theme (Nexus.Themes.css);
+ * this file holds everything else, plus the colors derived from a theme's palette.
+ */
+@layer nexus.tokens {
+  :root {
+    /* Light, dark, or the system setting when data-nx-mode is not set. */
+    color-scheme: light dark;
+
+    /* Type */
+    --nx-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
+    --nx-font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
+    /* Nepali text (lang="ne"): system fonts with Devanagari glyphs; the page font has none. */
+    --nx-font-devanagari: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", Mangal, var(--nx-font);
+    --nx-text-xs: 0.75rem;
+    --nx-text-sm: 0.8125rem;
+    --nx-text-md: 0.875rem;
+    --nx-text-lg: 1rem;
+    --nx-text-xl: 1.25rem;
+    --nx-text-2xl: 1.625rem;
+    --nx-leading: 1.5;
+
+    /* Shape and spacing */
+    --nx-radius-sm: 4px;
+    --nx-radius: 6px;
+    --nx-radius-lg: 10px;
+    --nx-radius-full: 999px;
+    --nx-space-1: 4px;
+    --nx-space-2: 8px;
+    --nx-space-3: 12px;
+    --nx-space-4: 16px;
+    --nx-space-5: 20px;
+    --nx-space-6: 24px;
+    --nx-space-8: 32px;
+
+    /* Density: the sizes a compact and a cozy page differ by (cozy below). Everything sized by them follows. */
+    --nx-control-sm: 28px;
+    --nx-control-md: 34px;
+    --nx-control-lg: 40px;
+    /* A row in a list: a menu's item, a table's row and header, a dropdown's option, the Columns panel's line. */
+    --nx-row: 32px;
+    /* A bottom band, such as a table's footer: small controls with 6px above and below, and its 1px line. */
+    --nx-footbar: calc(var(--nx-control-sm) + 13px);
+
+    /* Motion */
+    --nx-duration: 120ms;
+  }
+
+  /*
+   * Cozy: every control 4px taller and every row 6px, for a touch screen or a large monitor. One attribute on <html>
+   * (ThemeScript and ThemeSwitcher set it), so no component asks; compact, the default, is the sizes above.
+   */
+  :root[data-nx-density="cozy"] {
+    --nx-control-sm: 32px;
+    --nx-control-md: 38px;
+    --nx-control-lg: 44px;
+    --nx-row: 38px;
+  }
+
+  :root[data-nx-mode="light"] {
+    color-scheme: light;
+  }
+
+  :root[data-nx-mode="dark"] {
+    color-scheme: dark;
+  }
+
+  /*
+   * Derived colors, declared wherever a theme applies, so an element with its own data-nx-theme
+   * (a theme preview, for example) gets hover and soft colors from that theme.
+   *
+   * A solid fill under the pointer (--nx-primary-hover, --nx-danger-hover; a button pressed too) is the fill with 12%
+   * black mixed in, in every theme and in light and dark mode alike. The fill sits behind the white --nx-*-text label,
+   * so the darker step only raises the label's contrast: 6:1 or more, from 4.6:1 at rest. It is about the same step in
+   * every theme (an OKLab difference of 5.8 to 7.4, x100). Mixing toward the text color lightened the fill in dark
+   * mode, to 3.5:1. npm run check:themes reads these two lines and checks both.
+   */
+  :root,
+  [data-nx-theme] {
+    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), black 12%);
+    --nx-primary-soft: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-surface));
+    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), black 12%);
+    --nx-danger-soft: color-mix(in oklab, var(--nx-danger) 14%, var(--nx-surface));
+    --nx-success-soft: color-mix(in oklab, var(--nx-success) 14%, var(--nx-surface));
+    --nx-warning-soft: color-mix(in oklab, var(--nx-warning) 14%, var(--nx-surface));
+    --nx-info-soft: color-mix(in oklab, var(--nx-info) 14%, var(--nx-surface));
+
+    --nx-focus-ring: 0 0 0 3px color-mix(in oklab, var(--nx-primary) 35%, transparent);
+    --nx-shadow-sm: 0 1px 2px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.4));
+    --nx-shadow:
+      0 4px 14px light-dark(rgb(16 24 40 / 0.08), rgb(0 0 0 / 0.45)),
+      0 1px 3px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.35));
+  }
+}