@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/features/compose.css

@@ -0,0 +1,192 @@
+/**
+ * Resource Compose Page Styles
+ *
+ * Styles for the resource creation and editing interface
+ */
+
+/* Page Layout */
+.semiont-page__compose {
+  /* Use full width like the Discover page instead of centering */
+}
+
+/* Form Upload Section */
+.semiont-form__upload-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.semiont-form__upload-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.semiont-form__upload-dropzone {
+  flex: 1;
+  cursor: pointer;
+}
+
+.semiont-form__upload-area {
+  border: 2px dashed var(--semiont-color-gray-300);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  text-align: center;
+  transition: border-color 0.15s;
+}
+
+[data-theme="dark"] .semiont-form__upload-area {
+  border-color: var(--semiont-color-gray-600);
+}
+
+.semiont-form__upload-area:hover {
+  border-color: var(--semiont-color-blue-500);
+}
+
+[data-theme="dark"] .semiont-form__upload-area:hover {
+  border-color: var(--semiont-color-blue-400);
+}
+
+.semiont-form__upload-input {
+  display: none;
+}
+
+.semiont-form__upload-text {
+  font-size: 0.875rem;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-form__upload-text {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-form__upload-hint {
+  font-size: 0.75rem;
+  color: var(--semiont-color-gray-500);
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .semiont-form__upload-hint {
+  color: var(--semiont-color-gray-400);
+}
+
+/* Media Type Display */
+.semiont-form__media-type {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.semiont-form__media-type-label {
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-form__media-type-label {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-form__media-type-value {
+  padding: 0.125rem 0.5rem;
+  background-color: var(--semiont-color-gray-100);
+  border-radius: 0.25rem;
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-form__media-type-value {
+  background-color: var(--semiont-bg-secondary);
+  color: var(--semiont-color-gray-100);
+}
+
+.semiont-form__media-type-lock {
+  color: var(--semiont-color-gray-500);
+}
+
+[data-theme="dark"] .semiont-form__media-type-lock {
+  color: var(--semiont-color-gray-400);
+}
+
+/* Image Preview */
+.semiont-form__image-preview {
+  border: 1px solid var(--semiont-color-gray-300);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+[data-theme="dark"] .semiont-form__image-preview {
+  border-color: var(--semiont-color-gray-600);
+}
+
+.semiont-form__image-preview-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--semiont-color-gray-700);
+  margin-bottom: 0.5rem;
+}
+
+[data-theme="dark"] .semiont-form__image-preview-label {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-form__image-preview-container {
+  max-height: 24rem;
+  overflow: hidden;
+  border-radius: 0.25rem;
+}
+
+.semiont-form__image-preview-img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Button Variants */
+.semiont-button--danger {
+  background-color: var(--semiont-color-red-600);
+  color: var(--semiont-color-white);
+}
+
+.semiont-button--danger:hover {
+  background-color: var(--semiont-color-red-700);
+}
+
+[data-theme="dark"] .semiont-button--danger {
+  background-color: var(--semiont-color-red-700);
+  color: var(--semiont-color-white);
+}
+
+[data-theme="dark"] .semiont-button--danger:hover {
+  background-color: var(--semiont-color-red-600);
+}
+
+/* Focus styles for danger button */
+.semiont-button--danger:focus-visible {
+  outline: 2px solid var(--semiont-color-red-500);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-button--danger:focus-visible {
+  outline-color: var(--semiont-color-red-400);
+}
+
+.semiont-button--danger:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.semiont-button--small {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+/* Focus styles for small button */
+.semiont-button--small:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-button--small:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+}
+
+.semiont-button--small:focus:not(:focus-visible) {
+  outline: none;
+}

package/src/styles/features/devops.css

@@ -0,0 +1,154 @@
+/**
+ * DevOps Feature Styles
+ *
+ * Styles for the Admin DevOps page components
+ */
+
+/* DevOps Feature Card */
+.semiont-devops-feature {
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  background-color: var(--semiont-bg-secondary);
+  border: 1px solid var(--semiont-color-gray-200);
+}
+
+[data-theme="dark"] .semiont-devops-feature {
+  background-color: rgba(0, 0, 0, 0.05); /* gray-800/50 */
+  border-color: var(--semiont-color-gray-700);
+}
+
+.semiont-devops-feature__header {
+  display: flex;
+  align-items: flex-start;
+}
+
+.semiont-devops-feature__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--semiont-color-gray-200);
+}
+
+[data-theme="dark"] .semiont-devops-feature__icon-box {
+  background-color: var(--semiont-color-gray-700);
+}
+
+.semiont-devops-feature__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-devops-feature__icon {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-devops-feature__content {
+  margin-left: 0.75rem;
+  flex: 1;
+}
+
+.semiont-devops-feature__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-devops-feature__title {
+  color: var(--semiont-color-white);
+}
+
+.semiont-devops-feature__description {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-devops-feature__description {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-devops-feature__available {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  font-family: var(--semiont-font-mono);
+  color: var(--semiont-color-blue-600);
+}
+
+[data-theme="dark"] .semiont-devops-feature__available {
+  color: var(--semiont-color-blue-400);
+}
+
+/* Admin Info Box */
+.semiont-admin__info-box {
+  padding: 1rem;
+  background-color: var(--semiont-color-blue-50);
+  border: 1px solid var(--semiont-color-blue-200);
+  border-radius: 0.375rem;
+  margin-top: 2rem;
+}
+
+[data-theme="dark"] .semiont-admin__info-box {
+  background-color: rgba(30, 58, 138, 0.1);
+  border-color: var(--semiont-color-blue-800);
+}
+
+.semiont-admin__info-box-content {
+  display: flex;
+}
+
+.semiont-admin__info-box-icon {
+  flex-shrink: 0;
+}
+
+.semiont-admin__info-box-text {
+  margin-left: 0.75rem;
+}
+
+.semiont-admin__info-box-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--semiont-color-blue-800);
+}
+
+[data-theme="dark"] .semiont-admin__info-box-title {
+  color: var(--semiont-color-blue-300);
+}
+
+.semiont-admin__info-box-description {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--semiont-color-blue-700);
+}
+
+[data-theme="dark"] .semiont-admin__info-box-description {
+  color: var(--semiont-color-blue-400);
+}
+
+.semiont-admin__info-box-code {
+  display: block;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: var(--semiont-color-blue-100);
+  border-radius: 0.25rem;
+  font-family: var(--semiont-font-mono);
+  font-size: 0.75rem;
+}
+
+[data-theme="dark"] .semiont-admin__info-box-code {
+  background-color: rgba(30, 58, 138, 0.5);
+}
+
+/* Icon utilities for info state */
+.semiont-icon--info {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--semiont-color-blue-600);
+}
+
+[data-theme="dark"] .semiont-icon--info {
+  color: var(--semiont-color-blue-400);
+}

package/src/styles/features/entity-tags.css

@@ -0,0 +1,140 @@
+/**
+ * Entity Tags Feature Styles
+ *
+ * Styles for the entity tags management page
+ */
+
+/* Header section */
+.semiont-entity-tags__header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+}
+
+.semiont-entity-tags__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  background-color: rgba(59, 130, 246, 0.1);
+  margin-right: 0.75rem;
+}
+
+[data-theme="dark"] .semiont-entity-tags__icon-box {
+  background-color: rgba(30, 58, 138, 0.2);
+}
+
+.semiont-entity-tags__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--semiont-color-blue-600);
+}
+
+[data-theme="dark"] .semiont-entity-tags__icon {
+  color: var(--semiont-color-blue-400);
+}
+
+.semiont-entity-tags__content {
+  flex: 1;
+}
+
+.semiont-entity-tags__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-entity-tags__title {
+  color: var(--semiont-color-white);
+}
+
+.semiont-entity-tags__description {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-entity-tags__description {
+  color: var(--semiont-color-gray-400);
+}
+
+/* Tags section */
+.semiont-entity-tags__tags-section {
+  margin-bottom: 1.5rem;
+}
+
+/* Tags now use centralized styles from components/tags.css
+   Entity tags use: .semiont-tag.semiont-tag--info.semiont-tag--rounded-md */
+
+/* Input group */
+.semiont-entity-tags__input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.semiont-entity-tags__input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--semiont-color-gray-300);
+  border-radius: 0.375rem;
+  background-color: var(--semiont-color-white);
+  color: var(--semiont-color-gray-900);
+  font-size: 0.875rem;
+}
+
+.semiont-entity-tags__input::placeholder {
+  color: var(--semiont-color-gray-500);
+}
+
+.semiont-entity-tags__input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--semiont-color-blue-500);
+  border-color: var(--semiont-color-blue-500);
+}
+
+[data-theme="dark"] .semiont-entity-tags__input {
+  border-color: var(--semiont-color-gray-600);
+  background-color: var(--semiont-bg-tertiary);
+  color: var(--semiont-color-white);
+}
+
+[data-theme="dark"] .semiont-entity-tags__input::placeholder {
+  color: var(--semiont-color-gray-400);
+}
+
+[data-theme="dark"] .semiont-entity-tags__input:focus {
+  border-color: var(--semiont-color-blue-400);
+}
+
+/* Error message */
+.semiont-entity-tags__error {
+  margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  color: var(--semiont-color-red-600);
+  font-size: 0.875rem;
+}
+
+[data-theme="dark"] .semiont-entity-tags__error {
+  color: var(--semiont-color-red-400);
+}
+
+.semiont-entity-tags__error-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.25rem;
+}
+
+/* Icon utilities */
+.semiont-icon--small {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.semiont-icon--inline {
+  display: inline-block;
+  margin-right: 0.25rem;
+}

package/src/styles/features/recent-docs.css

@@ -0,0 +1,97 @@
+/**
+ * Recent Documents Feature Styles
+ *
+ * Styles for the recent documents page
+ */
+
+/* Header section */
+.semiont-recent-docs__header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.semiont-recent-docs__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--semiont-color-gray-100);
+  margin-right: 0.75rem;
+}
+
+[data-theme="dark"] .semiont-recent-docs__icon-box {
+  background-color: rgba(17, 24, 39, 0.2);
+}
+
+.semiont-recent-docs__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-recent-docs__icon {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-recent-docs__content {
+  flex: 1;
+}
+
+.semiont-recent-docs__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-recent-docs__title {
+  color: var(--semiont-color-white);
+}
+
+.semiont-recent-docs__description {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-recent-docs__description {
+  color: var(--semiont-color-gray-400);
+}
+
+/* Empty state */
+.semiont-recent-docs__empty-state {
+  text-align: center;
+  padding: 3rem 0;
+}
+
+.semiont-recent-docs__empty-icon {
+  width: 4rem;
+  height: 4rem;
+  color: var(--semiont-color-gray-300);
+  margin: 0 auto 1rem;
+}
+
+[data-theme="dark"] .semiont-recent-docs__empty-icon {
+  color: var(--semiont-color-gray-600);
+}
+
+.semiont-recent-docs__empty-message {
+  color: var(--semiont-color-gray-500);
+  font-size: 1rem;
+}
+
+[data-theme="dark"] .semiont-recent-docs__empty-message {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-recent-docs__empty-hint {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--semiont-color-gray-400);
+}
+
+[data-theme="dark"] .semiont-recent-docs__empty-hint {
+  color: var(--semiont-color-gray-500);
+}