nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Button.css

@@ -1,151 +1,180 @@
-@layer nexus.components {
-  .nx-btn {
-    --nx-btn-height: var(--nx-control-md);
-    --nx-btn-bg: var(--nx-surface);
-    --nx-btn-bg-hover: var(--nx-surface-hover);
-    --nx-btn-color: var(--nx-text);
-    --nx-btn-border: var(--nx-border-strong);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--nx-space-2);
-    height: var(--nx-btn-height);
-    padding: 0 var(--nx-space-3);
-    border: 1px solid var(--nx-btn-border);
-    border-radius: var(--nx-radius);
-    background: var(--nx-btn-bg);
-    color: var(--nx-btn-color);
-    font-size: var(--nx-text-md);
-    font-weight: 500;
-    line-height: 1;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    box-shadow: var(--nx-shadow-sm);
-    transition:
-      background-color var(--nx-duration),
-      border-color var(--nx-duration),
-      color var(--nx-duration),
-      box-shadow var(--nx-duration),
-      transform var(--nx-duration);
-  }
-
-  .nx-btn .nx-icon {
-    width: 1.15em;
-    height: 1.15em;
-    vertical-align: 0;
-  }
-
-  .nx-btn:hover:not(:disabled) {
-    background: var(--nx-btn-bg-hover);
-  }
-
-  .nx-btn:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-
-  .nx-btn:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-    box-shadow: none;
-  }
-
-  .nx-btn[aria-busy="true"] {
-    cursor: progress;
-    opacity: 0.8;
-  }
-
-  /* Variants */
-  .nx-btn--primary {
-    --nx-btn-bg: var(--nx-primary-solid);
-    --nx-btn-bg-hover: var(--nx-primary-hover);
-    --nx-btn-color: var(--nx-primary-text);
-    --nx-btn-border: transparent;
-  }
-
-  .nx-btn--danger {
-    --nx-btn-bg: var(--nx-danger-solid);
-    --nx-btn-bg-hover: var(--nx-danger-hover);
-    --nx-btn-color: var(--nx-danger-text);
-    --nx-btn-border: transparent;
-  }
-
-  .nx-btn--ghost {
-    --nx-btn-bg: transparent;
-    --nx-btn-border: transparent;
-    box-shadow: none;
-  }
-
-  /*
-   * Hover tones: a secondary or ghost button stays neutral, then takes the tone on its border,
-   * a soft background, and its text while hovered or focused from the keyboard.
-   * Every tone meets WCAG AA contrast on its soft background (npm run check:themes).
-   */
-  .nx-btn--hover-primary {
-    --nx-btn-tone: var(--nx-primary);
-    --nx-btn-tone-soft: var(--nx-primary-soft);
-  }
-
-  .nx-btn--hover-danger {
-    --nx-btn-tone: var(--nx-danger);
-    --nx-btn-tone-soft: var(--nx-danger-soft);
-  }
-
-  .nx-btn--hover-success {
-    --nx-btn-tone: var(--nx-success);
-    --nx-btn-tone-soft: var(--nx-success-soft);
-  }
-
-  .nx-btn--hover-warning {
-    --nx-btn-tone: var(--nx-warning);
-    --nx-btn-tone-soft: var(--nx-warning-soft);
-  }
-
-  .nx-btn--hover-info {
-    --nx-btn-tone: var(--nx-info);
-    --nx-btn-tone-soft: var(--nx-info-soft);
-  }
-
-  :is(.nx-btn--secondary, .nx-btn--ghost):is(
-      .nx-btn--hover-primary,
-      .nx-btn--hover-danger,
-      .nx-btn--hover-success,
-      .nx-btn--hover-warning,
-      .nx-btn--hover-info
-    ):is(:hover, :focus-visible):not(:disabled) {
-    --nx-btn-bg: var(--nx-btn-tone-soft);
-    --nx-btn-bg-hover: var(--nx-btn-tone-soft);
-    --nx-btn-border: var(--nx-btn-tone);
-    --nx-btn-color: var(--nx-btn-tone);
-  }
-
-  /* Sizes */
-  .nx-btn--sm {
-    --nx-btn-height: var(--nx-control-sm);
-    padding: 0 var(--nx-space-2);
-    gap: 6px;
-    font-size: var(--nx-text-sm);
-  }
-
-  .nx-btn--lg {
-    --nx-btn-height: var(--nx-control-lg);
-    padding: 0 var(--nx-space-4);
-    font-size: var(--nx-text-lg);
-  }
-
-  .nx-btn--icon {
-    width: var(--nx-btn-height);
-    padding: 0;
-  }
-
-  .nx-btn--block {
-    display: flex;
-    width: 100%;
-  }
-}
+@layer nexus.components {
+  .nx-btn {
+    --nx-btn-height: var(--nx-control-md);
+    --nx-btn-bg: var(--nx-surface);
+    --nx-btn-bg-hover: var(--nx-surface-hover);
+    --nx-btn-color: var(--nx-text);
+    --nx-btn-border: var(--nx-border-strong);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--nx-space-2);
+    height: var(--nx-btn-height);
+    padding: 0 var(--nx-space-3);
+    border: 1px solid var(--nx-btn-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-btn-bg);
+    color: var(--nx-btn-color);
+    font-size: var(--nx-text-md);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    /* The same classes make a link look like a button, for a call to action that navigates. */
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: var(--nx-shadow-sm);
+    transition:
+      background-color var(--nx-duration),
+      border-color var(--nx-duration),
+      color var(--nx-duration),
+      box-shadow var(--nx-duration),
+      transform var(--nx-duration);
+  }
+
+  .nx-btn .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    vertical-align: 0;
+  }
+
+  .nx-btn:hover:not(:disabled) {
+    background: var(--nx-btn-bg-hover);
+  }
+
+  .nx-btn:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  .nx-btn:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    box-shadow: none;
+  }
+
+  .nx-btn[aria-busy="true"] {
+    cursor: progress;
+    opacity: 0.8;
+  }
+
+  /* Variants */
+  .nx-btn--primary {
+    --nx-btn-bg: var(--nx-primary-solid);
+    --nx-btn-bg-hover: var(--nx-primary-hover);
+    --nx-btn-color: var(--nx-primary-text);
+    --nx-btn-border: transparent;
+  }
+
+  .nx-btn--danger {
+    --nx-btn-bg: var(--nx-danger-solid);
+    --nx-btn-bg-hover: var(--nx-danger-hover);
+    --nx-btn-color: var(--nx-danger-text);
+    --nx-btn-border: transparent;
+  }
+
+  .nx-btn--ghost {
+    --nx-btn-bg: transparent;
+    --nx-btn-border: transparent;
+    box-shadow: none;
+  }
+
+  /*
+   * Hover tones: a secondary or ghost button stays neutral, then takes the tone on its border,
+   * a soft background, and its text while hovered or focused from the keyboard.
+   * Every tone meets WCAG AA contrast on its soft background (npm run check:themes).
+   */
+  .nx-btn--hover-primary {
+    --nx-btn-tone: var(--nx-primary);
+    --nx-btn-tone-soft: var(--nx-primary-soft);
+  }
+
+  .nx-btn--hover-danger {
+    --nx-btn-tone: var(--nx-danger);
+    --nx-btn-tone-soft: var(--nx-danger-soft);
+  }
+
+  .nx-btn--hover-success {
+    --nx-btn-tone: var(--nx-success);
+    --nx-btn-tone-soft: var(--nx-success-soft);
+  }
+
+  .nx-btn--hover-warning {
+    --nx-btn-tone: var(--nx-warning);
+    --nx-btn-tone-soft: var(--nx-warning-soft);
+  }
+
+  .nx-btn--hover-info {
+    --nx-btn-tone: var(--nx-info);
+    --nx-btn-tone-soft: var(--nx-info-soft);
+  }
+
+  :is(.nx-btn--secondary, .nx-btn--ghost):is(
+      .nx-btn--hover-primary,
+      .nx-btn--hover-danger,
+      .nx-btn--hover-success,
+      .nx-btn--hover-warning,
+      .nx-btn--hover-info
+    ):is(:hover, :focus-visible):not(:disabled) {
+    --nx-btn-bg: var(--nx-btn-tone-soft);
+    --nx-btn-bg-hover: var(--nx-btn-tone-soft);
+    --nx-btn-border: var(--nx-btn-tone);
+    --nx-btn-color: var(--nx-btn-tone);
+  }
+
+  /* Sizes */
+  .nx-btn--sm {
+    --nx-btn-height: var(--nx-control-sm);
+    padding: 0 var(--nx-space-2);
+    gap: 6px;
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-btn--lg {
+    --nx-btn-height: var(--nx-control-lg);
+    padding: 0 var(--nx-space-4);
+    font-size: var(--nx-text-lg);
+  }
+
+  .nx-btn--icon {
+    width: var(--nx-btn-height);
+    padding: 0;
+  }
+
+  .nx-btn--block {
+    display: flex;
+    width: 100%;
+  }
+
+  /* Something new behind the button (red), or a state that is on (primary): a dot on its corner, ringed in the
+     surface so it reads over the icon. */
+  .nx-btn:has(> .nx-btn__dot) {
+    position: relative;
+  }
+
+  .nx-btn__dot {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 7px;
+    height: 7px;
+    border: 1.5px solid var(--nx-surface);
+    border-radius: 50%;
+    background: var(--nx-danger-solid);
+  }
+
+  .nx-btn__dot[data-tone="primary"] {
+    background: var(--nx-primary-solid);
+  }
+
+  /* A small icon sits nearer the corner: the dot moves into it, clear of a narrow icon such as ⋮. */
+  .nx-btn--icon.nx-btn--sm > .nx-btn__dot {
+    top: 3px;
+    right: 3px;
+  }
+}