@jonsoc/console-app 1.1.34 → 1.1.49

package/src/style/base.css

@@ -1,21 +1,21 @@
-html {
-  line-height: 1;
-  background-color: var(--color-bg);
-  color: var(--color-text);
-}
-
-body {
-  font-family: var(--font-sans);
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
+html {
+  line-height: 1;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+body {
+  font-family: var(--font-sans);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/style/component/button.css

@@ -1,102 +1,102 @@
-[data-component="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border: 1px solid transparent;
-  border-radius: var(--space-2);
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
-  font-weight: 500;
-  line-height: 1.25;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  text-decoration: none;
-  user-select: none;
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary);
-  }
-
-  &[data-color="primary"] {
-    background-color: var(--color-primary);
-    color: var(--color-primary-text);
-    border-color: var(--color-primary);
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-primary-hover);
-      border-color: var(--color-primary-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--color-primary-active);
-      border-color: var(--color-primary-active);
-    }
-  }
-
-  &[data-color="danger"] {
-    background-color: var(--color-danger);
-    color: var(--color-danger-text);
-    border-color: var(--color-danger);
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-danger-hover);
-      border-color: var(--color-danger-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--color-danger-active);
-      border-color: var(--color-danger-active);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 2px var(--color-danger);
-    }
-  }
-
-  &[data-color="warning"] {
-    background-color: var(--color-warning);
-    color: var(--color-warning-text);
-    border-color: var(--color-warning);
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-warning-hover);
-      border-color: var(--color-warning-hover);
-    }
-
-    &:active:not(:disabled) {
-      background-color: var(--color-warning-active);
-      border-color: var(--color-warning-active);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 2px var(--color-warning);
-    }
-  }
-
-  &[data-size="small"] {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--font-size-sm);
-    gap: var(--space-1-5);
-  }
-
-  &[data-size="large"] {
-    padding: var(--space-4) var(--space-6);
-    font-size: var(--font-size-lg);
-    gap: var(--space-3);
-  }
-
-  [data-slot="icon"] {
-    display: flex;
-    align-items: center;
-    width: 1em;
-    height: 1em;
-  }
-}
+[data-component="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid transparent;
+  border-radius: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  line-height: 1.25;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+  user-select: none;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+  }
+
+  &[data-color="primary"] {
+    background-color: var(--color-primary);
+    color: var(--color-primary-text);
+    border-color: var(--color-primary);
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-primary-hover);
+      border-color: var(--color-primary-hover);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--color-primary-active);
+      border-color: var(--color-primary-active);
+    }
+  }
+
+  &[data-color="danger"] {
+    background-color: var(--color-danger);
+    color: var(--color-danger-text);
+    border-color: var(--color-danger);
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-danger-hover);
+      border-color: var(--color-danger-hover);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--color-danger-active);
+      border-color: var(--color-danger-active);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--color-danger);
+    }
+  }
+
+  &[data-color="warning"] {
+    background-color: var(--color-warning);
+    color: var(--color-warning-text);
+    border-color: var(--color-warning);
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-warning-hover);
+      border-color: var(--color-warning-hover);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--color-warning-active);
+      border-color: var(--color-warning-active);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--color-warning);
+    }
+  }
+
+  &[data-size="small"] {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-sm);
+    gap: var(--space-1-5);
+  }
+
+  &[data-size="large"] {
+    padding: var(--space-4) var(--space-6);
+    font-size: var(--font-size-lg);
+    gap: var(--space-3);
+  }
+
+  [data-slot="icon"] {
+    display: flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+  }
+}

package/src/style/index.css

@@ -1,8 +1,8 @@
-@import "./token/color.css";
-@import "./token/font.css";
-@import "./token/space.css";
-
-@import "./component/button.css";
-
-@import "./reset.css";
-@import "./base.css";
+@import "./token/color.css";
+@import "./token/font.css";
+@import "./token/space.css";
+
+@import "./component/button.css";
+
+@import "./reset.css";
+@import "./base.css";

package/src/style/reset.css

@@ -1,76 +1,76 @@
-/* 1. Use a more-intuitive box-sizing model */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* 2. Remove default margin */
-* {
-  margin: 0;
-}
-
-/* 3. Enable keyword animations */
-@media (prefers-reduced-motion: no-preference) {
-  html {
-    interpolate-size: allow-keywords;
-  }
-}
-
-body {
-  /* 4. Add accessible line-height */
-  line-height: 1.5;
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
-}
-
-/* 6. Improve media defaults */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-/* 7. Inherit fonts for form controls */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* 8. Avoid text overflows */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-/* 9. Improve line wrapping */
-p {
-  text-wrap: pretty;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-}
-
-/*
-  10. Create a root stacking context
-*/
-#root,
-#__next {
-  isolation: isolate;
-}
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}

package/src/style/token/color.css

@@ -1,91 +1,91 @@
-:root {
-  --color-white: #ffffff;
-  --color-black: #000000;
-
-  /* Default light theme colors */
-  --color-bg: #ffffff;
-  --color-bg-surface: #f5f5f7;
-  --color-bg-elevated: #ffffff;
-
-  --color-text: #1d1d1f;
-  --color-text-secondary: #424245;
-  --color-text-muted: #6e6e73;
-  --color-text-disabled: #86868b;
-
-  --color-accent: #007aff;
-  --color-accent-hover: #0056b3;
-  --color-accent-active: #004085;
-
-  --color-success: #30d158;
-  --color-warning: #ff9f0a;
-  --color-danger: #ff3b30;
-
-  --color-border: #d2d2d7;
-  --color-border-muted: #e5e5ea;
-
-  /* Button colors */
-  --color-primary: var(--color-accent);
-  --color-primary-hover: var(--color-accent-hover);
-  --color-primary-active: var(--color-accent-active);
-  --color-primary-text: #ffffff;
-
-  --color-danger: #ff3b30;
-  --color-danger-hover: #d70015;
-  --color-danger-active: #a50011;
-  --color-danger-text: #ffffff;
-
-  --color-warning: #ff9f0a;
-  --color-warning-hover: #cc7f08;
-  --color-warning-active: #995f06;
-  --color-warning-text: #000000;
-
-  /* Surface colors */
-  --color-surface: var(--color-bg-surface);
-  --color-surface-hover: var(--color-bg-elevated);
-  --color-surface-border: var(--color-border);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: #0c0c0e;
-    --color-bg-surface: #161618;
-    --color-bg-elevated: #1c1c1f;
-
-    --color-text: #ffffff;
-    --color-text-secondary: #c7c7cc;
-    --color-text-muted: #a1a1a6;
-    --color-text-disabled: #68686f;
-
-    --color-accent: #007aff;
-    --color-accent-hover: #0056b3;
-    --color-accent-active: #004085;
-
-    --color-success: #30d158;
-    --color-warning: #ff9f0a;
-    --color-danger: #ff453a;
-
-    --color-border: #38383a;
-    --color-border-muted: #2c2c2e;
-
-    /* Button colors */
-    --color-primary: var(--color-accent);
-    --color-primary-hover: var(--color-accent-hover);
-    --color-primary-active: var(--color-accent-active);
-    --color-primary-text: #ffffff;
-
-    --color-danger: #ff453a;
-    --color-danger-hover: #d70015;
-    --color-danger-active: #a50011;
-    --color-danger-text: #ffffff;
-
-    --color-warning: #ff9f0a;
-    --color-warning-hover: #cc7f08;
-    --color-warning-active: #995f06;
-    --color-warning-text: #000000;
-
-    /* Surface colors */
-    --color-surface: var(--color-bg-surface);
-    --color-surface-hover: var(--color-bg-elevated);
-    --color-surface-border: var(--color-border);
-  }
-}
+:root {
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Default light theme colors */
+  --color-bg: #ffffff;
+  --color-bg-surface: #f5f5f7;
+  --color-bg-elevated: #ffffff;
+
+  --color-text: #1d1d1f;
+  --color-text-secondary: #424245;
+  --color-text-muted: #6e6e73;
+  --color-text-disabled: #86868b;
+
+  --color-accent: #007aff;
+  --color-accent-hover: #0056b3;
+  --color-accent-active: #004085;
+
+  --color-success: #30d158;
+  --color-warning: #ff9f0a;
+  --color-danger: #ff3b30;
+
+  --color-border: #d2d2d7;
+  --color-border-muted: #e5e5ea;
+
+  /* Button colors */
+  --color-primary: var(--color-accent);
+  --color-primary-hover: var(--color-accent-hover);
+  --color-primary-active: var(--color-accent-active);
+  --color-primary-text: #ffffff;
+
+  --color-danger: #ff3b30;
+  --color-danger-hover: #d70015;
+  --color-danger-active: #a50011;
+  --color-danger-text: #ffffff;
+
+  --color-warning: #ff9f0a;
+  --color-warning-hover: #cc7f08;
+  --color-warning-active: #995f06;
+  --color-warning-text: #000000;
+
+  /* Surface colors */
+  --color-surface: var(--color-bg-surface);
+  --color-surface-hover: var(--color-bg-elevated);
+  --color-surface-border: var(--color-border);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #0c0c0e;
+    --color-bg-surface: #161618;
+    --color-bg-elevated: #1c1c1f;
+
+    --color-text: #ffffff;
+    --color-text-secondary: #c7c7cc;
+    --color-text-muted: #a1a1a6;
+    --color-text-disabled: #68686f;
+
+    --color-accent: #007aff;
+    --color-accent-hover: #0056b3;
+    --color-accent-active: #004085;
+
+    --color-success: #30d158;
+    --color-warning: #ff9f0a;
+    --color-danger: #ff453a;
+
+    --color-border: #38383a;
+    --color-border-muted: #2c2c2e;
+
+    /* Button colors */
+    --color-primary: var(--color-accent);
+    --color-primary-hover: var(--color-accent-hover);
+    --color-primary-active: var(--color-accent-active);
+    --color-primary-text: #ffffff;
+
+    --color-danger: #ff453a;
+    --color-danger-hover: #d70015;
+    --color-danger-active: #a50011;
+    --color-danger-text: #ffffff;
+
+    --color-warning: #ff9f0a;
+    --color-warning-hover: #cc7f08;
+    --color-warning-active: #995f06;
+    --color-warning-text: #000000;
+
+    /* Surface colors */
+    --color-surface: var(--color-bg-surface);
+    --color-surface-hover: var(--color-bg-elevated);
+    --color-surface-border: var(--color-border);
+  }
+}

package/src/style/token/font.css

@@ -1,21 +1,21 @@
-body {
-  --font-size-2xs: 0.6875rem;
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.8125rem;
-  --font-size-md: 0.9375rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
-  --font-size-6xl: 3.75rem;
-  --font-size-7xl: 4.5rem;
-  --font-size-8xl: 6rem;
-  --font-size-9xl: 8rem;
-
-  --font-mono:
-    "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  --font-sans: var(--font-mono);
-}
+body {
+  --font-size-2xs: 0.6875rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-md: 0.9375rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-size-7xl: 4.5rem;
+  --font-size-8xl: 6rem;
+  --font-size-9xl: 8rem;
+
+  --font-mono:
+    "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --font-sans: var(--font-mono);
+}