@namostack/cli 0.1.0-rc.1 → 0.1.0-rc.2

package/templates/vanilla/src/style.css

@@ -0,0 +1,330 @@
+/* seedui's tokens (seedui.dev), so the plugin looks like the app and the react template. */
+:root {
+  --text: #000;
+  --text-muted: #5a6480;
+  --surface: #fff;
+  --border: #eceef3;
+  --code: #eceef3;
+  --primary: #6344e5;
+  --primary-hover: #7b61ff;
+  --primary-active: #3f2c99;
+  --neutral: #d8dce5;
+  --neutral-hover: #eceef3;
+  --neutral-active: #8b93a5;
+  --transparent-hover: #eceef3;
+  --transparent-active: #b5bbc9;
+  --disabled: #eceef3;
+  --disabled-text: #d8dce5;
+  --disabled-transparent-text: #d8dce5;
+  --tag: #eceef3;
+  --tag-text: #5a6480;
+  --error: #d42b2b;
+  --focus-gap: #fff;
+  --shadow: 0 2px 8px rgb(0 0 0 / 10%), 0 1px 3px rgb(0 0 0 / 6%);
+}
+
+:root[data-mode='dark'] {
+  --text: #fff;
+  --text-muted: #959fbc;
+  --surface: #1b1f25;
+  --border: #2e333c;
+  --code: #2e333c;
+  --primary: #7b61ff;
+  --primary-hover: #42357a;
+  --primary-active: #332b60;
+  --neutral: #3c414d;
+  --neutral-hover: #4f5565;
+  --neutral-active: #252930;
+  --transparent-hover: #252930;
+  --transparent-active: #252930;
+  --disabled: #2e333c;
+  --disabled-text: #3c414d;
+  --disabled-transparent-text: #2e333c;
+  --tag: #2e333c;
+  --tag-text: #798199;
+  --error: #e86060;
+  --focus-gap: #1b1f25;
+  --shadow: 0 2px 8px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 25%);
+}
+
+body {
+  margin: 0;
+  color: var(--text);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* Text: seedui's h3, h5, h2, p and caption. */
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+.h3,
+.h2 {
+  font-family: 'Source Serif 4 Variable', serif;
+  font-weight: 600;
+}
+
+.h3 {
+  font-size: 36px;
+  line-height: 44px;
+  letter-spacing: -0.01em;
+}
+
+.h2 {
+  font-size: 44px;
+  line-height: 54px;
+  letter-spacing: -0.02em;
+}
+
+.h5,
+.p,
+.caption,
+.button {
+  font-family: 'Inter Variable';
+}
+
+.h5 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.p {
+  font-size: 14px;
+  line-height: 23px;
+}
+
+.caption {
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.error {
+  color: var(--error);
+}
+
+code {
+  padding: 1px 6px;
+  border-radius: 2px;
+  background: var(--code);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Layout */
+.page {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 40px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.icon {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+}
+
+/* seedui's outlined Card, padding 20. */
+.card {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+
+.card-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* seedui's small neutral Tag. */
+.tag {
+  display: flex;
+  align-items: center;
+  padding: 7px 8px;
+  border-radius: 9999px;
+  background: var(--tag);
+  color: var(--tag-text);
+  font-family: 'Inter Variable';
+  font-size: 12px;
+  line-height: 12px;
+  letter-spacing: 0.01em;
+}
+
+/* seedui's md Button: filled primary, filled neutral, transparent neutral. */
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 8px;
+  background: var(--primary);
+  color: #fff;
+  font-size: 14px;
+  line-height: 23px;
+}
+
+.button:hover {
+  background: var(--primary-hover);
+  cursor: pointer;
+}
+
+.button:active {
+  background: var(--primary-active);
+  transform: scale(0.95);
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--focus-gap),
+    0 0 0 3px var(--primary);
+}
+
+.button-neutral {
+  background: var(--neutral);
+  color: var(--text);
+}
+
+.button-neutral:hover {
+  background: var(--neutral-hover);
+}
+
+.button-neutral:active {
+  background: var(--neutral-active);
+}
+
+.button-transparent {
+  background: transparent;
+  color: var(--text);
+}
+
+.button-transparent:hover {
+  background: var(--transparent-hover);
+}
+
+.button-transparent:active {
+  background: var(--transparent-active);
+}
+
+.button:disabled {
+  background: var(--disabled);
+  color: var(--disabled-text);
+  cursor: default;
+  transform: none;
+}
+
+.button-transparent:disabled {
+  background: transparent;
+  color: var(--disabled-transparent-text);
+}
+
+/* While loading, a button keeps its size and shows seedui's spinner. */
+.button[aria-busy='true'] {
+  cursor: default;
+  transform: none;
+}
+
+.spinner {
+  width: 16px;
+  padding: 3px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--primary);
+  --mask:
+    conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  mask: var(--mask);
+  mask-composite: subtract;
+  animation: spin 1s infinite linear;
+}
+
+.button:not(.button-neutral, .button-transparent) .spinner {
+  background: #fff;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* seedui's breakpoints: tablet below 960px, mobile below 600px. */
+@media only screen and (max-width: 960px) {
+  .h3 {
+    font-size: 30px;
+    line-height: 38px;
+  }
+
+  .h2 {
+    font-size: 36px;
+    line-height: 44px;
+  }
+
+  .h5 {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .h3 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .h2 {
+    font-size: 26px;
+    line-height: 34px;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .page {
+    padding: 24px 16px;
+  }
+}