@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/workbench/auth/auth-flows.css

@@ -1,440 +1,440 @@
-.workbench-auth-gate {
-  min-width: 0;
-  min-height: 100%;
-}
-
-.workbench-auth-gate__loading {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  color: var(--color-text-muted);
-  background: var(--color-bg);
-  font-size: var(--font-size-sm);
-}
-
-.workbench-bootstrap-gate {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: var(--color-bg);
-  color: var(--color-text);
-}
-
-.workbench-bootstrap-view {
-  width: min(100%, 440px);
-  display: grid;
-  gap: 16px;
-}
-
-.workbench-bootstrap-view__header {
-  display: grid;
-  gap: 6px;
-}
-
-.workbench-bootstrap-view__heading {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.workbench-bootstrap-view__subtitle,
-.workbench-bootstrap-view__active {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-}
-
-.workbench-bootstrap-view__tasks {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 8px;
-}
-
-.workbench-bootstrap-view__task {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  background: var(--color-surface);
-  font-size: var(--font-size-sm);
-}
-
-.workbench-bootstrap-view__task--running {
-  border-color: color-mix(in srgb, var(--color-accent, #3794ff) 45%, var(--color-border));
-}
-
-.workbench-bootstrap-view__task--completed {
-  color: var(--color-text-muted);
-}
-
-.workbench-bootstrap-view__task--failed {
-  border-color: color-mix(in srgb, var(--color-danger, #f14c4c) 45%, var(--color-border));
-}
-
-.workbench-bootstrap-view__task-label {
-  flex: 1;
-  min-width: 0;
-}
-
-.workbench-bootstrap-view__task-detail {
-  color: var(--color-text-muted);
-  font-size: 12px;
-}
-
-.workbench-bootstrap-view__error {
-  display: grid;
-  gap: 10px;
-  color: var(--color-danger, #f14c4c);
-  font-size: var(--font-size-sm);
-}
-
-.workbench-bootstrap-view__error p {
-  margin: 0;
-}
-
-.workbench-bootstrap-view__footer {
-  color: var(--color-text-muted);
-  font-size: 12px;
-}
-
-.workbench-login-view {
-  box-sizing: border-box;
-  min-height: 100vh;
-  display: grid;
-  grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
-  color: var(--color-text);
-  background: var(--color-bg);
-  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
-  overflow: hidden;
-}
-
-.workbench-login-view__brand-pane {
-  position: relative;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: clamp(32px, 5vw, 72px);
-  background: var(--color-surface);
-  border-right: 1px solid var(--color-border);
-}
-
-.workbench-login-view__mark {
-  width: min(100%, 360px);
-  max-width: 100%;
-}
-
-.workbench-login-brand-mark {
-  width: 100%;
-  aspect-ratio: 1;
-}
-
-.workbench-login-view__footer-brand {
-  position: absolute;
-  left: clamp(32px, 5vw, 72px);
-  bottom: clamp(28px, 5vh, 56px);
-  max-width: calc(100% - clamp(64px, 10vw, 144px));
-  overflow: hidden;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.workbench-login-view__form {
-  box-sizing: border-box;
-  width: min(100%, 440px);
-  min-width: 0;
-  display: grid;
-  justify-self: center;
-  align-content: center;
-  gap: 22px;
-  padding: clamp(32px, 5vw, 72px);
-}
-
-.workbench-login-view__heading {
-  min-width: 0;
-  display: grid;
-  gap: 8px;
-}
-
-.workbench-login-view__title {
-  margin: 0;
-  overflow-wrap: anywhere;
-  color: currentColor;
-  font-size: clamp(2rem, 3vw, 2.75rem);
-  font-weight: 650;
-  letter-spacing: 0;
-  line-height: 1.08;
-}
-
-.workbench-login-view__status {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-base);
-  line-height: 1.45;
-}
-
-.workbench-login-view__fields {
-  display: grid;
-  gap: 14px;
-}
-
-.workbench-login-view__field {
-  display: grid;
-  gap: 7px;
-}
-
-.workbench-login-view__label {
-  color: var(--color-text);
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  line-height: 1.35;
-}
-
-.workbench-login-view__field .ui-input {
-  --ui-input-height: var(--workbench-login-input-height);
-  --ui-input-padding: 0 var(--control-padding-x-md);
-  height: var(--workbench-login-input-height);
-  min-width: 0;
-  padding: 0 var(--control-padding-x-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text);
-  background: var(--color-bg);
-  font-size: var(--font-size-base);
-}
-
-.workbench-login-view__field .ui-input:focus {
-  border-color: var(--color-accent);
-}
-
-.workbench-login-view__field .ui-input:disabled {
-  opacity: 0.62;
-  cursor: default;
-}
-
-.workbench-login-view__error {
-  padding: 9px 11px;
-  color: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger) 9%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
-  border-radius: var(--radius-sm);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  line-height: 1.45;
-}
-
-.workbench-login-view__actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.workbench-login-view__actions .ui-button {
-  --ui-button-height: var(--workbench-login-button-height);
-  --ui-button-min-height: var(--workbench-login-button-height);
-  --ui-button-padding: 0 var(--control-padding-x-lg);
-  min-width: 104px;
-  height: var(--workbench-login-button-height);
-}
-
-.workbench-login-view__actions .ui-button:disabled {
-  opacity: 0.58;
-  cursor: default;
-}
-
-.workbench-login-view__secondary-actions {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-  line-height: 1.45;
-  text-align: center;
-}
-
-.workbench-auth-story-brand {
-  display: grid;
-  gap: 18px;
-}
-
-.workbench-auth-story-brand__icon {
-  width: 52px;
-  height: 52px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: var(--color-accent);
-  border-radius: var(--radius-sm);
-}
-
-.workbench-auth-story-brand__icon .codicon {
-  font-size: 24px;
-}
-
-.workbench-auth-story-brand__copy {
-  display: grid;
-  gap: 6px;
-}
-
-.workbench-auth-story-brand__copy strong {
-  color: var(--color-text);
-  font-size: clamp(1.85rem, 4vw, 3.25rem);
-  font-weight: 650;
-  letter-spacing: 0;
-  line-height: 1.05;
-}
-
-.workbench-auth-story-brand__copy span {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-base);
-}
-
-.workbench-auth-story-link {
-  padding: 0;
-  border: 0;
-  color: var(--color-accent);
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.workbench-auth-story-link:hover {
-  color: var(--color-accent-hover);
-  text-decoration: underline;
-}
-
-@media (max-width: 760px) {
-  .workbench-settings-modal {
-    --ui-modal-max-width: 100vw;
-    --ui-modal-max-height: 100vh;
-  }
-
-  .ui-workbench-navigation-panel,
-  .ui-workbench-navigation-panel[data-has-nav='true'] {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  .ui-workbench-navigation-panel__nav {
-    height: auto;
-    border-right: 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .ui-workbench-navigation-panel__nav-scroll.ui-scroll-area--vertical {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  .workbench-settings-sidebar {
-    flex-direction: row;
-    padding: 8px 12px;
-    border-bottom: 0;
-  }
-
-  .workbench-settings-nav-item {
-    width: auto;
-    flex: 0 0 auto;
-  }
-
-  .workbench-settings-content > .ui-workbench-navigation-panel__content-scroll > * {
-    padding-inline: var(--workbench-panel-padding-inline-compact);
-  }
-
-  .ui-workbench-sectioned-panel__nav {
-    display: flex;
-    padding: 8px 0;
-  }
-
-  .ui-workbench-section-tab-panel__scroll,
-  .ui-workbench-sectioned-panel__scroll {
-    padding-left: var(--workbench-panel-padding-inline-compact);
-  }
-
-  .ui-workbench-structured-data-form__section {
-    max-width: none;
-    padding: var(--workbench-panel-padding-block-start)
-      var(--workbench-panel-padding-inline-compact) var(--workbench-panel-padding-block-end);
-  }
-
-  .ui-workbench-structured-data-form__actions {
-    padding-inline: 12px;
-  }
-}
-
-@media (max-width: 900px) {
-  .workbench-login-view {
-    grid-template-columns: minmax(0, 1fr);
-    overflow: auto;
-  }
-
-  .workbench-login-view__brand-pane {
-    min-height: auto;
-    padding: 36px 32px 22px;
-    border-right: 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .workbench-login-view__mark {
-    width: min(62vw, 320px);
-  }
-
-  .workbench-login-view__footer-brand {
-    position: static;
-    justify-self: start;
-    align-self: end;
-    max-width: 100%;
-    font-size: 1rem;
-  }
-
-  .workbench-login-view__brand-pane {
-    display: grid;
-    place-items: center;
-    gap: 20px;
-  }
-
-  .workbench-login-view__form {
-    width: 100%;
-    align-content: start;
-    padding: 32px;
-  }
-
-  .workbench-login-view__title {
-    font-size: 2.15rem;
-  }
-}
-
-@media (max-width: 520px) {
-  .workbench-login-view__field {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 8px;
-  }
-
-  .workbench-login-view__actions {
-    justify-content: stretch;
-  }
-
-  .workbench-login-view__actions .ui-button {
-    width: 100%;
-  }
-
-  .workbench-login-view__actions {
-    align-items: stretch;
-  }
-}
+.workbench-auth-gate {
+  min-width: 0;
+  min-height: 100%;
+}
+
+.workbench-auth-gate__loading {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--color-text-muted);
+  background: var(--color-bg);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-gate {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.workbench-bootstrap-view {
+  width: min(100%, 440px);
+  display: grid;
+  gap: 16px;
+}
+
+.workbench-bootstrap-view__header {
+  display: grid;
+  gap: 6px;
+}
+
+.workbench-bootstrap-view__heading {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.workbench-bootstrap-view__subtitle,
+.workbench-bootstrap-view__active {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-view__tasks {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.workbench-bootstrap-view__task {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-view__task--running {
+  border-color: color-mix(in srgb, var(--color-accent, #3794ff) 45%, var(--color-border));
+}
+
+.workbench-bootstrap-view__task--completed {
+  color: var(--color-text-muted);
+}
+
+.workbench-bootstrap-view__task--failed {
+  border-color: color-mix(in srgb, var(--color-danger, #f14c4c) 45%, var(--color-border));
+}
+
+.workbench-bootstrap-view__task-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.workbench-bootstrap-view__task-detail {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.workbench-bootstrap-view__error {
+  display: grid;
+  gap: 10px;
+  color: var(--color-danger, #f14c4c);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-view__error p {
+  margin: 0;
+}
+
+.workbench-bootstrap-view__footer {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.workbench-login-view {
+  box-sizing: border-box;
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  overflow: hidden;
+}
+
+.workbench-login-view__brand-pane {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(32px, 5vw, 72px);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+}
+
+.workbench-login-view__mark {
+  width: min(100%, 360px);
+  max-width: 100%;
+}
+
+.workbench-login-brand-mark {
+  width: 100%;
+  aspect-ratio: 1;
+}
+
+.workbench-login-view__footer-brand {
+  position: absolute;
+  left: clamp(32px, 5vw, 72px);
+  bottom: clamp(28px, 5vh, 56px);
+  max-width: calc(100% - clamp(64px, 10vw, 144px));
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-login-view__form {
+  box-sizing: border-box;
+  width: min(100%, 440px);
+  min-width: 0;
+  display: grid;
+  justify-self: center;
+  align-content: center;
+  gap: 22px;
+  padding: clamp(32px, 5vw, 72px);
+}
+
+.workbench-login-view__heading {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.workbench-login-view__title {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: currentColor;
+  font-size: clamp(2rem, 3vw, 2.75rem);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.08;
+}
+
+.workbench-login-view__status {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
+  line-height: 1.45;
+}
+
+.workbench-login-view__fields {
+  display: grid;
+  gap: 14px;
+}
+
+.workbench-login-view__field {
+  display: grid;
+  gap: 7px;
+}
+
+.workbench-login-view__label {
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.workbench-login-view__field .ui-input {
+  --ui-input-height: var(--workbench-login-input-height);
+  --ui-input-padding: 0 var(--control-padding-x-md);
+  height: var(--workbench-login-input-height);
+  min-width: 0;
+  padding: 0 var(--control-padding-x-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-size: var(--font-size-base);
+}
+
+.workbench-login-view__field .ui-input:focus {
+  border-color: var(--color-accent);
+}
+
+.workbench-login-view__field .ui-input:disabled {
+  opacity: 0.62;
+  cursor: default;
+}
+
+.workbench-login-view__error {
+  padding: 9px 11px;
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+.workbench-login-view__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.workbench-login-view__actions .ui-button {
+  --ui-button-height: var(--workbench-login-button-height);
+  --ui-button-min-height: var(--workbench-login-button-height);
+  --ui-button-padding: 0 var(--control-padding-x-lg);
+  min-width: 104px;
+  height: var(--workbench-login-button-height);
+}
+
+.workbench-login-view__actions .ui-button:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+.workbench-login-view__secondary-actions {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+  text-align: center;
+}
+
+.workbench-auth-story-brand {
+  display: grid;
+  gap: 18px;
+}
+
+.workbench-auth-story-brand__icon {
+  width: 52px;
+  height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: var(--color-accent);
+  border-radius: var(--radius-sm);
+}
+
+.workbench-auth-story-brand__icon .codicon {
+  font-size: 24px;
+}
+
+.workbench-auth-story-brand__copy {
+  display: grid;
+  gap: 6px;
+}
+
+.workbench-auth-story-brand__copy strong {
+  color: var(--color-text);
+  font-size: clamp(1.85rem, 4vw, 3.25rem);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.05;
+}
+
+.workbench-auth-story-brand__copy span {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
+}
+
+.workbench-auth-story-link {
+  padding: 0;
+  border: 0;
+  color: var(--color-accent);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.workbench-auth-story-link:hover {
+  color: var(--color-accent-hover);
+  text-decoration: underline;
+}
+
+@media (max-width: 760px) {
+  .workbench-settings-modal {
+    --ui-modal-max-width: 100vw;
+    --ui-modal-max-height: 100vh;
+  }
+
+  .ui-workbench-navigation-panel,
+  .ui-workbench-navigation-panel[data-has-nav='true'] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .ui-workbench-navigation-panel__nav {
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .ui-workbench-navigation-panel__nav-scroll.ui-scroll-area--vertical {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .workbench-settings-sidebar {
+    flex-direction: row;
+    padding: 8px 12px;
+    border-bottom: 0;
+  }
+
+  .workbench-settings-nav-item {
+    width: auto;
+    flex: 0 0 auto;
+  }
+
+  .workbench-settings-content > .ui-workbench-navigation-panel__content-scroll > * {
+    padding-inline: var(--workbench-panel-padding-inline-compact);
+  }
+
+  .ui-workbench-sectioned-panel__nav {
+    display: flex;
+    padding: 8px 0;
+  }
+
+  .ui-workbench-section-tab-panel__scroll,
+  .ui-workbench-sectioned-panel__scroll {
+    padding-left: var(--workbench-panel-padding-inline-compact);
+  }
+
+  .ui-workbench-structured-data-form__section {
+    max-width: none;
+    padding: var(--workbench-panel-padding-block-start)
+      var(--workbench-panel-padding-inline-compact) var(--workbench-panel-padding-block-end);
+  }
+
+  .ui-workbench-structured-data-form__actions {
+    padding-inline: 12px;
+  }
+}
+
+@media (max-width: 900px) {
+  .workbench-login-view {
+    grid-template-columns: minmax(0, 1fr);
+    overflow: auto;
+  }
+
+  .workbench-login-view__brand-pane {
+    min-height: auto;
+    padding: 36px 32px 22px;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .workbench-login-view__mark {
+    width: min(62vw, 320px);
+  }
+
+  .workbench-login-view__footer-brand {
+    position: static;
+    justify-self: start;
+    align-self: end;
+    max-width: 100%;
+    font-size: 1rem;
+  }
+
+  .workbench-login-view__brand-pane {
+    display: grid;
+    place-items: center;
+    gap: 20px;
+  }
+
+  .workbench-login-view__form {
+    width: 100%;
+    align-content: start;
+    padding: 32px;
+  }
+
+  .workbench-login-view__title {
+    font-size: 2.15rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .workbench-login-view__field {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .workbench-login-view__actions {
+    justify-content: stretch;
+  }
+
+  .workbench-login-view__actions .ui-button {
+    width: 100%;
+  }
+
+  .workbench-login-view__actions {
+    align-items: stretch;
+  }
+}