@pgcorp/ui-kit 0.5.0 → 0.6.0

package/src/styles/style.css

@@ -26,6 +26,120 @@ body {
 }
 
 @layer components {
+  :where([data-s-feedback-tone="primary"]) {
+    --s-feedback-tone-background: var(--s-feedback-primary-background);
+    --s-feedback-tone-foreground: var(--s-feedback-primary-foreground);
+  }
+
+  :where([data-s-feedback-tone="secondary"]) {
+    --s-feedback-tone-background: var(--s-feedback-secondary-background);
+    --s-feedback-tone-foreground: var(--s-feedback-secondary-foreground);
+  }
+
+  :where([data-s-feedback-tone="success"]) {
+    --s-feedback-tone-background: var(--s-feedback-success-background);
+    --s-feedback-tone-foreground: var(--s-feedback-success-foreground);
+  }
+
+  :where([data-s-feedback-tone="info"]) {
+    --s-feedback-tone-background: var(--s-feedback-info-background);
+    --s-feedback-tone-foreground: var(--s-feedback-info-foreground);
+  }
+
+  :where([data-s-feedback-tone="warn"]) {
+    --s-feedback-tone-background: var(--s-feedback-warn-background);
+    --s-feedback-tone-foreground: var(--s-feedback-warn-foreground);
+  }
+
+  :where([data-s-feedback-tone="danger"]) {
+    --s-feedback-tone-background: var(--s-feedback-danger-background);
+    --s-feedback-tone-foreground: var(--s-feedback-danger-foreground);
+  }
+
+  :where([data-s-feedback-tone="contrast"]) {
+    --s-feedback-tone-background: var(--s-feedback-contrast-background);
+    --s-feedback-tone-foreground: var(--s-feedback-contrast-foreground);
+  }
+
+  :where([data-s-pill-surface]) {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    border-radius: var(--s-feedback-pill-radius);
+    background-color: var(--s-feedback-tone-background);
+    color: var(--s-feedback-tone-foreground);
+  }
+
+  :where([data-s-pill-surface="badge"]) {
+    --s-pill-icon-size: 0.75rem;
+    gap: 0.25rem;
+    font-weight: 600;
+  }
+
+  :where([data-s-pill-surface="chip"]) {
+    --s-pill-icon-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  :where([data-s-pill-surface="badge"][data-s-pill-size="md"]) {
+    padding: 0.125rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="badge"][data-s-pill-size="sm"]) {
+    padding: 0.125rem 0.5rem;
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="badge"][data-s-pill-size="xs"]) {
+    padding: 0 0.375rem;
+    font-size: 0.625rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="md"]) {
+    min-height: 1.75rem;
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="sm"]) {
+    min-height: 1.5rem;
+    gap: 0.25rem;
+    padding-inline: 0.5rem;
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="md"][data-s-pill-closable="true"]) {
+    padding-right: 0.25rem;
+  }
+
+  :where([data-s-pill-surface="chip"][data-s-pill-size="sm"][data-s-pill-closable="true"]) {
+    padding-right: 0.125rem;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-disabled="true"]) {
+    opacity: 0.6;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-dot="true"]) {
+    width: 0.625rem;
+    height: 0.625rem;
+    padding: 0;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-max-width="sm"]) {
+    max-width: 9.5rem;
+  }
+
+  :where([data-s-pill-surface][data-s-pill-max-width="md"]) {
+    max-width: 14rem;
+  }
+
   :where([data-s-field-surface]) {
     transition-property: color, background-color, border-color, box-shadow;
     transition-duration: var(--s-motion-standard);

package/src/styles/tokens.css

@@ -231,6 +231,7 @@
   /* Semantic feedback surfaces */
   --s-feedback-surface: color-mix(in srgb, var(--color-surface) 88%, transparent);
   --s-feedback-backdrop-blur: 1.5rem;
+  --s-feedback-pill-radius: var(--s-radius-pill);
   --s-floating-surface: var(--color-surface);
   --s-floating-foreground: var(--color-text);
   --s-floating-outline: color-mix(in srgb, var(--color-border) 44%, transparent);
@@ -607,6 +608,21 @@
   --s-progress-indicator-foreground-warn: var(--color-warn-600);
   --s-progress-indicator-foreground-danger: var(--color-danger-600);
 
+  --s-feedback-primary-background: var(--color-primary-100);
+  --s-feedback-primary-foreground: var(--color-primary-800);
+  --s-feedback-secondary-background: var(--color-surface-100);
+  --s-feedback-secondary-foreground: var(--color-surface-800);
+  --s-feedback-success-background: var(--color-success-100);
+  --s-feedback-success-foreground: var(--color-success-800);
+  --s-feedback-info-background: var(--color-info-100);
+  --s-feedback-info-foreground: var(--color-info-800);
+  --s-feedback-warn-background: var(--color-warn-100);
+  --s-feedback-warn-foreground: var(--color-warn-800);
+  --s-feedback-danger-background: var(--color-danger-100);
+  --s-feedback-danger-foreground: var(--color-danger-800);
+  --s-feedback-contrast-background: var(--color-surface-800);
+  --s-feedback-contrast-foreground: var(--color-surface-100);
+
   --s-graph-node-tone-neutral-fill: var(--color-surface-50);
   --s-graph-node-tone-neutral-border: var(--color-surface-500);
   --s-graph-node-tone-neutral-label: var(--color-surface-900);
@@ -742,6 +758,21 @@
   --s-progress-indicator-foreground-warn: var(--color-warn-300);
   --s-progress-indicator-foreground-danger: var(--color-danger-300);
 
+  --s-feedback-primary-background: var(--color-primary-950);
+  --s-feedback-primary-foreground: var(--color-primary-50);
+  --s-feedback-secondary-background: var(--color-surface-800);
+  --s-feedback-secondary-foreground: var(--color-surface-50);
+  --s-feedback-success-background: var(--color-success-950);
+  --s-feedback-success-foreground: var(--color-success-50);
+  --s-feedback-info-background: var(--color-info-950);
+  --s-feedback-info-foreground: var(--color-info-50);
+  --s-feedback-warn-background: var(--color-warn-950);
+  --s-feedback-warn-foreground: var(--color-warn-50);
+  --s-feedback-danger-background: var(--color-danger-950);
+  --s-feedback-danger-foreground: var(--color-danger-50);
+  --s-feedback-contrast-background: var(--color-surface-200);
+  --s-feedback-contrast-foreground: var(--color-surface-800);
+
   --s-graph-node-tone-neutral-fill: var(--color-surface-700);
   --s-graph-node-tone-neutral-border: var(--color-surface-300);
   --s-graph-node-tone-neutral-label: var(--color-surface-50);

package/src/components/shared/containers/SPageHeader.css

@@ -1,82 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-page-header {
-  @apply flex min-w-0 items-start justify-between gap-4 border border-surface-200 bg-surface-0 p-5 shadow-sm;
-  @apply dark:border-surface-700 dark:bg-surface-900;
-  border-radius: var(--radius-sm);
-}
-
-.s-page-header[data-appearance='plain'] {
-  @apply border-x-0 border-t-0 bg-transparent px-0 pt-0 shadow-none dark:bg-transparent;
-  border-radius: 0;
-}
-
-.s-page-header[data-size='compact'] {
-  @apply p-4;
-}
-
-.s-page-header[data-appearance='plain'][data-size='compact'] {
-  @apply px-0 pt-0;
-}
-
-.s-page-header[data-appearance='bare'] {
-  @apply border-0 bg-transparent p-0 shadow-none dark:bg-transparent;
-  border-radius: 0;
-}
-
-.s-page-header__copy {
-  @apply min-w-0;
-}
-
-.s-page-header__eyebrow {
-  @apply text-xs font-medium uppercase text-surface-500 dark:text-surface-400;
-}
-
-.s-page-header__title {
-  @apply m-0 text-2xl font-semibold leading-tight text-surface-900 dark:text-surface-50;
-}
-
-.s-page-header__title[data-presentation='assistive'] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.s-page-header[data-size='compact'] .s-page-header__title {
-  @apply text-xl;
-}
-
-.s-page-header__eyebrow + .s-page-header__title {
-  @apply mt-1;
-}
-
-.s-page-header__description {
-  @apply mt-2 max-w-4xl text-sm text-surface-500 dark:text-surface-400;
-}
-
-.s-page-header__actions {
-  @apply flex shrink-0 flex-wrap items-center justify-end gap-2;
-}
-
-.s-page-header[data-actions-layout='stacked'] {
-  @apply flex-col;
-}
-
-.s-page-header[data-actions-layout='stacked'] .s-page-header__actions {
-  @apply w-full justify-start;
-}
-
-@media (max-width: 639px) {
-  .s-page-header[data-actions-layout='responsive'] {
-    @apply flex-col;
-  }
-
-  .s-page-header[data-actions-layout='responsive'] .s-page-header__actions {
-    @apply w-full justify-start;
-  }
-}

package/src/components/shared/data-display/SBadge.css

@@ -1,73 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-badge {
-  @apply inline-flex items-center gap-1 rounded-full font-semibold;
-}
-
-.s-badge[data-size='md'] {
-  @apply px-2.5 py-0.5 text-xs;
-}
-
-.s-badge[data-size='sm'] {
-  @apply px-2 py-0.5 text-[11px] leading-4;
-}
-
-.s-badge[data-size='xs'] {
-  @apply px-1.5 py-0 text-[10px] leading-4;
-}
-
-.s-badge__icon {
-  @apply inline-flex h-3 w-3 shrink-0 items-center justify-center;
-}
-
-.s-badge__icon-graphic {
-  @apply h-full w-full;
-}
-
-.s-badge[data-icon-motion='spin'] .s-badge__icon-graphic {
-  @apply animate-spin;
-}
-
-.s-badge__label {
-  @apply min-w-0;
-}
-
-.s-badge[data-max-width='sm'] {
-  max-width: 9.5rem;
-}
-
-.s-badge[data-max-width='md'] {
-  max-width: 14rem;
-}
-
-.s-badge[data-truncate='true'] .s-badge__label {
-  @apply overflow-hidden text-ellipsis whitespace-nowrap;
-}
-
-/* Severity Colors */
-.s-badge[data-severity='primary'] {
-  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
-}
-.s-badge[data-severity='secondary'] {
-  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
-}
-.s-badge[data-severity='success'] {
-  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
-}
-.s-badge[data-severity='info'] {
-  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
-}
-.s-badge[data-severity='warn'] {
-  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
-}
-.s-badge[data-severity='danger'] {
-  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
-}
-.s-badge[data-severity='contrast'] {
-  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
-}
-
-/* Dot Mode */
-.s-badge.s-badge--dot {
-  @apply w-2.5 h-2.5 p-0;
-}

package/src/components/shared/data-display/SChip.css

@@ -1,59 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-chip {
-  @apply inline-flex min-w-0 items-center rounded-full font-medium;
-}
-
-.s-chip[data-size='md'] {
-  @apply min-h-7 gap-1.5 px-2.5 text-xs;
-}
-
-.s-chip[data-size='md'][data-closable='true'] {
-  @apply pr-1;
-}
-
-.s-chip[data-size='sm'] {
-  @apply min-h-6 gap-1 px-2 text-[11px] leading-4;
-}
-
-.s-chip[data-size='sm'][data-closable='true'] {
-  @apply pr-0.5;
-}
-
-.s-chip__icon {
-  @apply inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center;
-}
-
-.s-chip__icon-graphic {
-  @apply h-full w-full;
-}
-
-.s-chip__label {
-  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
-}
-
-.s-chip[data-disabled='true'] {
-  @apply opacity-60;
-}
-
-.s-chip[data-severity='primary'] {
-  @apply bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-50;
-}
-.s-chip[data-severity='secondary'] {
-  @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-50;
-}
-.s-chip[data-severity='success'] {
-  @apply bg-success-100 text-success-800 dark:bg-success-950 dark:text-success-50;
-}
-.s-chip[data-severity='info'] {
-  @apply bg-info-100 text-info-800 dark:bg-info-950 dark:text-info-50;
-}
-.s-chip[data-severity='warn'] {
-  @apply bg-warn-100 text-warn-800 dark:bg-warn-950 dark:text-warn-50;
-}
-.s-chip[data-severity='danger'] {
-  @apply bg-danger-100 text-danger-800 dark:bg-danger-950 dark:text-danger-50;
-}
-.s-chip[data-severity='contrast'] {
-  @apply bg-surface-800 text-surface-100 dark:bg-surface-200 dark:text-surface-800;
-}

package/src/components/shared/data-display/SSectionHeader.css

@@ -1,84 +0,0 @@
-@reference "../../../styles/reference.css";
-
-.s-section-header {
-  @apply flex min-w-0 flex-wrap items-start justify-between gap-3;
-}
-
-.s-section-header[data-spacing-after='sm'] {
-  @apply mb-2;
-}
-
-.s-section-header[data-spacing-after='md'] {
-  @apply mb-3;
-}
-
-.s-section-header[data-divider='true'] {
-  @apply border-b border-surface-200 pb-3 dark:border-surface-700;
-}
-
-.s-section-header[data-padding='sm'] {
-  @apply p-2;
-}
-
-.s-section-header[data-padding='md'] {
-  @apply p-4;
-}
-
-.s-section-header[data-divider='true'][data-padding='sm'] {
-  @apply pb-2;
-}
-
-.s-section-header[data-divider='true'][data-padding='md'] {
-  @apply pb-4;
-}
-
-.s-section-header__copy {
-  @apply min-w-0 flex-1;
-}
-
-.s-section-header__eyebrow {
-  @apply text-xs font-semibold uppercase text-surface-500 dark:text-surface-400;
-}
-
-.s-section-header__title {
-  @apply m-0 break-words text-base font-semibold text-surface-900 dark:text-surface-50;
-}
-
-.s-section-header[data-size='sm'] .s-section-header__title {
-  @apply text-sm;
-}
-
-.s-section-header[data-variant='display'] .s-section-header__title {
-  @apply text-xl font-semibold uppercase tracking-[0.22em] text-surface-700 dark:text-surface-200;
-}
-
-.s-section-header__eyebrow + .s-section-header__title {
-  @apply mt-1;
-}
-
-.s-section-header__description,
-.s-section-header__meta {
-  @apply mt-1 min-w-0 break-words text-xs text-surface-500 dark:text-surface-400;
-  overflow-wrap: anywhere;
-}
-
-.s-section-header__trailing {
-  @apply flex min-w-0 flex-wrap items-center justify-end gap-2;
-}
-
-.s-section-header__badges,
-.s-section-header__actions {
-  @apply flex min-w-0 flex-wrap items-center justify-end gap-2;
-}
-
-.s-section-header[data-trailing-layout='stacked'] .s-section-header__trailing,
-.s-section-header[data-trailing-layout='stacked'] .s-section-header__actions {
-  @apply w-full justify-start;
-}
-
-@media (max-width: 639px) {
-  .s-section-header[data-trailing-layout='responsive'] .s-section-header__trailing,
-  .s-section-header[data-trailing-layout='responsive'] .s-section-header__actions {
-    @apply w-full justify-start;
-  }
-}