@sparqjs/schema-vue 0.1.0

package/src/semantic-components/style.css

@@ -0,0 +1,263 @@
+.sparq-help-text {
+    color: var(--sq-schema-muted);
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.sparq-field-label {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    gap: 4px;
+}
+
+.sparq-field-label__text {
+    min-width: 0;
+}
+
+.sparq-field-label__tip-trigger {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    color: var(--sq-schema-muted);
+    cursor: help;
+    outline: none;
+}
+
+.sparq-field-label__tip-trigger::before {
+    position: absolute;
+    inset: -13px;
+    content: '';
+}
+
+.sparq-field-label__tip-trigger:hover {
+    color: var(--sq-schema-text);
+}
+
+.sparq-field-label__tip-trigger:focus-visible {
+    box-shadow: 0 0 0 2px var(--sq-schema-primary-soft);
+    color: var(--sq-schema-primary);
+}
+
+.sparq-field-tip-popper {
+    box-sizing: border-box;
+    max-width: min(280px, calc(100vw - 32px));
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+
+.sparq-section-block {
+    min-width: 0;
+    padding: var(--sparq-section-padding-y, 8px) 0;
+}
+
+.sparq-section-block__header {
+    margin-bottom: var(--sparq-section-header-margin-bottom, 16px);
+    border-left: 3px solid var(--sparq-section-border-color, var(--sq-schema-primary));
+    padding: var(--sparq-section-header-padding-y, 2px) 0 var(--sparq-section-header-padding-y, 2px)
+        var(--sparq-section-header-padding-left, 12px);
+}
+
+.sparq-section-block__title {
+    color: var(--sq-schema-title);
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.sparq-section-block__body {
+    min-width: 0;
+    padding-top: var(--sparq-section-body-padding-top, 2px);
+}
+
+.sparq-status-tag {
+    --sparq-status-tag-font-size: 12px;
+    --sparq-status-tag-border-radius: var(--sq-schema-radius-3xs);
+    --sparq-status-tag-border-radius-round: var(--sq-schema-radius-pill);
+    --sparq-status-tag-text-color: var(--sq-schema-primary);
+    --sparq-status-tag-bg-color: color-mix(in srgb, var(--sq-schema-primary-soft) 78%, var(--sq-schema-surface));
+    --sparq-status-tag-border-color: color-mix(in srgb, var(--sq-schema-primary) 20%, var(--sq-schema-border) 80%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 24px;
+    border: 1px solid var(--sparq-status-tag-border-color);
+    border-radius: var(--sparq-status-tag-border-radius);
+    background-color: var(--sparq-status-tag-bg-color);
+    padding: 0 9px;
+    color: var(--sparq-status-tag-text-color);
+    font-size: var(--sparq-status-tag-font-size);
+    line-height: 1;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.sparq-status-tag__content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sparq-status-tag--primary {
+    --sparq-status-tag-text-color: var(--sq-schema-primary);
+    --sparq-status-tag-bg-color: color-mix(in srgb, var(--sq-schema-primary-soft) 78%, var(--sq-schema-surface));
+    --sparq-status-tag-border-color: color-mix(in srgb, var(--sq-schema-primary) 20%, var(--sq-schema-border) 80%);
+}
+
+.sparq-status-tag--default {
+    --sparq-status-tag-text-color: var(--sq-schema-subtle);
+    --sparq-status-tag-bg-color: var(--sq-schema-surface-soft);
+    --sparq-status-tag-border-color: var(--sq-schema-border);
+}
+
+.sparq-status-tag--success {
+    --sparq-status-tag-text-color: var(--sq-schema-success);
+    --sparq-status-tag-bg-color: color-mix(in srgb, var(--sq-schema-success) 10%, var(--sq-schema-surface));
+    --sparq-status-tag-border-color: color-mix(in srgb, var(--sq-schema-success) 18%, var(--sq-schema-border) 82%);
+}
+
+.sparq-status-tag--warning {
+    --sparq-status-tag-text-color: var(--sq-schema-warning-strong);
+    --sparq-status-tag-bg-color: color-mix(in srgb, var(--sq-schema-warning) 10%, var(--sq-schema-surface));
+    --sparq-status-tag-border-color: color-mix(in srgb, var(--sq-schema-warning) 18%, var(--sq-schema-border) 82%);
+}
+
+.sparq-status-tag--danger,
+.sparq-status-tag--error {
+    --sparq-status-tag-text-color: var(--sq-schema-danger);
+    --sparq-status-tag-bg-color: color-mix(in srgb, var(--sq-schema-danger) 10%, var(--sq-schema-surface));
+    --sparq-status-tag-border-color: color-mix(in srgb, var(--sq-schema-danger) 18%, var(--sq-schema-border) 82%);
+}
+
+.sparq-status-tag--info {
+    --sparq-status-tag-text-color: var(--sq-schema-subtle);
+    --sparq-status-tag-bg-color: var(--sq-schema-surface-soft);
+    --sparq-status-tag-border-color: var(--sq-schema-border);
+}
+
+.sparq-status-tag--plain {
+    --sparq-status-tag-bg-color: var(--sq-schema-surface);
+}
+
+.sparq-status-tag--dark {
+    --sparq-status-tag-text-color: #ffffff;
+    --sparq-status-tag-bg-color: var(--sparq-status-tag-dark-color);
+    --sparq-status-tag-border-color: var(--sparq-status-tag-dark-color);
+}
+
+.sparq-status-tag--primary.sparq-status-tag--dark {
+    --sparq-status-tag-dark-color: var(--sq-schema-primary);
+}
+
+.sparq-status-tag--success.sparq-status-tag--dark {
+    --sparq-status-tag-dark-color: var(--sq-schema-success);
+}
+
+.sparq-status-tag--warning.sparq-status-tag--dark {
+    --sparq-status-tag-dark-color: var(--sq-schema-warning);
+}
+
+.sparq-status-tag--danger.sparq-status-tag--dark,
+.sparq-status-tag--error.sparq-status-tag--dark {
+    --sparq-status-tag-dark-color: var(--sq-schema-danger);
+}
+
+.sparq-status-tag--info.sparq-status-tag--dark {
+    --sparq-status-tag-dark-color: var(--sq-schema-subtle);
+}
+
+.sparq-status-tag--large {
+    height: 32px;
+    padding: 0 11px;
+}
+
+.sparq-status-tag--small {
+    height: 20px;
+    padding: 0 7px;
+}
+
+.sparq-status-tag.is-round {
+    border-radius: var(--sparq-status-tag-border-radius-round);
+}
+
+.sparq-status-tag.is-hit {
+    border-color: var(--sparq-status-tag-text-color);
+}
+
+.sparq-field-link {
+    color: var(--sq-schema-link);
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.sparq-field-link:hover {
+    text-decoration: underline;
+}
+
+.sparq-field-display {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    color: var(--sq-schema-text);
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.sparq-field-display--empty {
+    color: var(--sq-schema-muted);
+}
+
+.sparq-field-display--json-summary {
+    max-width: 280px;
+    font-family: var(--sparq-monospace-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: 12px;
+}
+
+.sparq-file-link-list {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+    vertical-align: middle;
+}
+
+.sparq-file-link {
+    overflow: hidden;
+    color: var(--sq-schema-link);
+    text-overflow: ellipsis;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.sparq-file-link:hover {
+    text-decoration: underline;
+}
+
+.sparq-thumbnail-list {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.sparq-thumbnail {
+    flex: 0 0 auto;
+    border: 1px solid var(--sq-schema-border);
+    border-radius: var(--sq-schema-radius-2xs);
+    object-fit: cover;
+}
+
+.sparq-thumbnail-empty,
+.sparq-thumbnail-more {
+    color: var(--sq-schema-muted);
+}
+
+.sparq-thumbnail-more {
+    font-size: 12px;
+}

package/src/style.css

@@ -0,0 +1,9 @@
+@import './tokens.css';
+@import './semantic-components/style.css';
+@import './render/style.css';
+@import './detail/style.css';
+@import './custom-components/Upload/style.css';
+@import './custom-components/IconInput/style.css';
+@import './custom-components/KeyValueEditor/style.css';
+@import './asset/picker/style.css';
+@import './asset/upload/style.css';

package/src/tokens.css

@@ -0,0 +1,44 @@
+:root {
+    --sq-schema-bg: #f3f6fb;
+    --sq-schema-surface: #ffffff;
+    --sq-schema-surface-soft: #eff5fb;
+    --sq-schema-surface-muted: #f8fafc;
+    --sq-schema-panel-glass: rgba(255, 255, 255, 0.88);
+    --sq-schema-text: #162033;
+    --sq-schema-title: #0f172a;
+    --sq-schema-subtle: #5b6b84;
+    --sq-schema-muted: #7b8aa3;
+    --sq-schema-border: #dce7f3;
+    --sq-schema-border-strong: #c8d6e7;
+    --sq-schema-primary: #2563eb;
+    --sq-schema-primary-strong: #1d4ed8;
+    --sq-schema-primary-soft: rgba(37, 99, 235, 0.12);
+    --sq-schema-accent: #0ea5e9;
+    --sq-schema-success: #059669;
+    --sq-schema-warning: #b45309;
+    --sq-schema-warning-strong: #92400e;
+    --sq-schema-danger: #dc2626;
+    --sq-schema-hover: #eef4fb;
+    --sq-schema-link: #2251cc;
+    --sq-schema-radius: 12px;
+    --sq-schema-radius-3xs: max(4px, calc(var(--sq-schema-radius) - 8px));
+    --sq-schema-radius-2xs: max(6px, calc(var(--sq-schema-radius) - 6px));
+    --sq-schema-radius-xs: max(8px, calc(var(--sq-schema-radius) - 4px));
+    --sq-schema-radius-sm: max(10px, calc(var(--sq-schema-radius) - 2px));
+    --sq-schema-radius-lg: calc(var(--sq-schema-radius) + 2px);
+    --sq-schema-radius-xl: calc(var(--sq-schema-radius) + 4px);
+    --sq-schema-radius-pill: 999px;
+    --sq-schema-spacing-3xs: 6px;
+    --sq-schema-spacing-2xs: 8px;
+    --sq-schema-spacing-xs: 10px;
+    --sq-schema-spacing-sm: 12px;
+    --sq-schema-spacing-md: 14px;
+    --sq-schema-spacing-lg: 16px;
+    --sq-schema-spacing-xl: 18px;
+    --sq-schema-spacing-2xl: 20px;
+    --sq-schema-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
+    --sq-schema-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.04);
+    --sq-schema-shadow-floating: 0 24px 48px rgba(15, 23, 42, 0.14);
+    --sq-schema-focus: 0 0 0 3px rgba(37, 99, 235, 0.18);
+    --sq-schema-overlay: rgb(8 17 31 / 42%);
+}