@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/layouts/app-navigation/styles.css

@@ -0,0 +1,331 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="app-navigation"] {
+    min-height: 100%;
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) details[data-ui="app-navigation"]::details-content {
+    content-visibility: visible;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-trigger"] {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-layer"],
+  :where([data-kv-design-system]) [data-ui="navigation-drawer"] {
+    min-height: 100%;
+  }
+
+  :where([data-kv-design-system])
+    details[data-ui="app-navigation"]:not([open])
+    > [data-ui="navigation-layer"] {
+    display: block;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-backdrop"] {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-drawer"] {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    background: var(--kv-sidebar-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-header"] {
+    display: flex;
+    min-height: 3.5rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kv-space-3);
+    padding: var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-sidebar-border);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-identity"] {
+    font-size: var(--kv-text-base);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: -0.01em;
+    line-height: var(--kv-leading-tight);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-context"] {
+    margin-top: var(--kv-space-1);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    line-height: var(--kv-leading-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-close"] {
+    display: none;
+    width: var(--kv-density-control-height);
+    height: var(--kv-density-control-height);
+    place-items: center;
+    padding: 0;
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-sm);
+    background: transparent;
+    color: var(--kv-text-secondary);
+    cursor: pointer;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-close"] > span,
+  :where([data-kv-design-system]) [data-ui="navigation-close"] > span::after {
+    display: block;
+    width: 0.875rem;
+    height: 1px;
+    background: currentcolor;
+    content: "";
+    transform: rotate(45deg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-close"] > span::after {
+    transform: rotate(90deg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-groups"] {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kv-space-5);
+    padding: var(--kv-space-2) var(--kv-space-2) var(--kv-space-3);
+    overflow-y: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-group"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-group-label"] {
+    margin: 0 0 var(--kv-space-1-5);
+    padding-inline: var(--kv-space-2);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0.075em;
+    line-height: var(--kv-leading-normal);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-items"] {
+    display: grid;
+    gap: var(--kv-space-0-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-branch"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]) {
+    display: grid;
+    width: 100%;
+    min-height: var(--kv-sidebar-item-height);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-2-5);
+    padding: var(--kv-space-1) var(--kv-space-2);
+    border: 1px solid transparent;
+    border-radius: var(--kv-radius-sm);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-md);
+    line-height: var(--kv-leading-tight);
+    text-decoration: none;
+    cursor: pointer;
+    list-style: none;
+    transition:
+      color var(--kv-motion-fast),
+      background var(--kv-motion-fast),
+      border-color var(--kv-motion-fast);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-branch-trigger"]::-webkit-details-marker {
+    display: none;
+  }
+
+  :where([data-kv-design-system])
+    :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]):hover {
+    background: var(--kv-surface-hover);
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item"][data-active="true"] {
+    border-color: var(--kv-border-default);
+    background: var(--kv-accent-subtle);
+    color: var(--kv-text-main);
+    font-weight: var(--kv-weight-medium);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-children"] {
+    display: grid;
+    gap: var(--kv-space-0-5);
+    padding: var(--kv-space-0-5) 0 var(--kv-space-1) var(--kv-space-5);
+    margin-left: var(--kv-space-3);
+    border-left: 1px solid var(--kv-sidebar-border);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="navigation-children"]
+    :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]) {
+    min-height: var(--kv-control-height-sm);
+    padding: var(--kv-space-0-5) var(--kv-space-2);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-children"][data-level="3"] {
+    padding-left: var(--kv-space-3);
+    margin-left: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-leading"] {
+    display: grid;
+    width: var(--kv-space-5);
+    place-items: center;
+    color: var(--kv-text-muted);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-copy"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-0-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-label"],
+  :where([data-kv-design-system]) [data-ui="navigation-item-description"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-description"] {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-count"] {
+    min-width: var(--kv-space-5);
+    padding: var(--kv-space-0-5) var(--kv-space-1-5);
+    border-radius: var(--kv-radius-full);
+    background: var(--kv-panel-bg-subtle);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-footer"] {
+    padding: var(--kv-space-3) var(--kv-space-4);
+    border-top: 1px solid var(--kv-sidebar-border);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system]) [data-ui="app-navigation"] {
+      min-height: 0;
+    }
+
+    :where([data-kv-design-system]) details[data-ui="app-navigation"]:not([open])::details-content {
+      content-visibility: hidden;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger"] {
+      display: flex;
+      min-height: 3.25rem;
+      align-items: center;
+      gap: var(--kv-space-2-5);
+      padding: var(--kv-space-3) var(--kv-space-4);
+      color: var(--kv-text-main);
+      cursor: pointer;
+      font-size: var(--kv-text-sm);
+      font-weight: var(--kv-weight-semibold);
+      list-style: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger"]::-webkit-details-marker {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-identity"] {
+      min-width: 0;
+      overflow: hidden;
+      font-size: var(--kv-text-base);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-label"] {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-icon"] {
+      display: grid;
+      width: var(--kv-space-4);
+      gap: var(--kv-space-1);
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-icon"] > span {
+      display: block;
+      height: 1px;
+      background: currentcolor;
+    }
+
+    :where([data-kv-design-system])
+      details[data-ui="app-navigation"]:not([open])
+      > [data-ui="navigation-layer"] {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-layer"] {
+      position: fixed;
+      z-index: var(--kv-layer-dialog);
+      inset: 0;
+      display: grid;
+      min-height: 0;
+      grid-template-columns: min(20rem, 86vw) minmax(0, 1fr);
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-backdrop"] {
+      display: block;
+      grid-column: 2;
+      padding: 0;
+      border: 0;
+      background: rgb(15 16 18 / 58%);
+      cursor: pointer;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-drawer"] {
+      grid-column: 1;
+      min-height: 100dvh;
+      box-shadow: var(--kv-shadow-float);
+      animation: kv-navigation-enter var(--kv-motion-normal);
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-close"] {
+      display: grid;
+    }
+  }
+
+  @keyframes kv-navigation-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/dist/layouts/app-navigation.d.ts

@@ -0,0 +1,2 @@
+export * from './app-navigation/index.tsx';
+//# sourceMappingURL=app-navigation.d.ts.map

package/dist/layouts/app-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-navigation.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/app-navigation.tsx"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

package/dist/layouts/app-navigation.js

@@ -0,0 +1,2 @@
+export * from './app-navigation/index.js';
+//# sourceMappingURL=app-navigation.js.map

package/dist/layouts/app-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-navigation.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/app-navigation.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA4B,CAAA"}

package/dist/layouts/flat/styles.css

@@ -0,0 +1,74 @@
+/* Opt-in white, unframed workspace. Sidebar appearance is independent. */
+@layer ket.app {
+  [data-kv-design-system][data-presentation="flat"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
+    color-scheme: light;
+    --kv-page-bg: var(--kv-ref-white);
+    --kv-page-chrome-bg: var(--kv-ref-white);
+    --kv-page-content-bg: var(--kv-ref-white);
+    --kv-panel-bg: var(--kv-ref-white);
+    --kv-panel-bg-subtle: var(--kv-ref-white);
+    --kv-table-bg: var(--kv-ref-white);
+    --kv-table-header-bg: var(--kv-ref-white);
+    --kv-table-row-bg: var(--kv-ref-white);
+    color: var(--kv-text-main);
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="app-main"] {
+    background: var(--kv-ref-white);
+  }
+
+  [data-kv-design-system][data-presentation="flat"]
+    :is([data-ui="app-main"], [data-ui="modal-layer"])
+    :is(
+      [data-ui="surface"],
+      [data-ui="metric"],
+      [data-ui="content-card"],
+      [data-ui="table-scroll"],
+      [data-ui="disclosure"],
+      [data-ui="notice"],
+      [data-ui="list-page-footer"]
+    ) {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  [data-kv-design-system][data-presentation="flat"]
+    :is([data-ui="app-main"], [data-ui="modal-layer"])
+    :is([data-ui="surface"], [data-ui="metric"], [data-ui="content-card"], [data-ui="notice"]) {
+    padding: 0;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] {
+    overflow: visible;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] > [data-ui="surface-head"] {
+    padding: 0;
+    margin-bottom: var(--kv-space-5);
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="metric"] {
+    min-height: 0;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="content-card"] {
+    padding-block: var(--kv-space-3);
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="card-title"] a:hover {
+    text-decoration: underline;
+  }
+
+  [data-kv-design-system][data-presentation="flat"]
+    :is([data-ui="disclosure-summary"], [data-ui="disclosure-body"]) {
+    padding-inline: 0;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="modal-sheet"] {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

package/dist/layouts/flat.css

@@ -1,74 +1 @@
-/* Opt-in white, unframed workspace. Sidebar appearance is independent. */
-@layer ket.app {
-  [data-kv-design-system][data-presentation="flat"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
-    color-scheme: light;
-    --kv-page-bg: var(--kv-ref-white);
-    --kv-page-chrome-bg: var(--kv-ref-white);
-    --kv-page-content-bg: var(--kv-ref-white);
-    --kv-panel-bg: var(--kv-ref-white);
-    --kv-panel-bg-subtle: var(--kv-ref-white);
-    --kv-table-bg: var(--kv-ref-white);
-    --kv-table-header-bg: var(--kv-ref-white);
-    --kv-table-row-bg: var(--kv-ref-white);
-    color: var(--kv-text-main);
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="app-main"] {
-    background: var(--kv-ref-white);
-  }
-
-  [data-kv-design-system][data-presentation="flat"]
-    :is([data-ui="app-main"], [data-ui="modal-layer"])
-    :is(
-      [data-ui="surface"],
-      [data-ui="metric"],
-      [data-ui="content-card"],
-      [data-ui="table-scroll"],
-      [data-ui="disclosure"],
-      [data-ui="notice"],
-      [data-ui="list-page-footer"]
-    ) {
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  [data-kv-design-system][data-presentation="flat"]
-    :is([data-ui="app-main"], [data-ui="modal-layer"])
-    :is([data-ui="surface"], [data-ui="metric"], [data-ui="content-card"], [data-ui="notice"]) {
-    padding: 0;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] {
-    overflow: visible;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] > [data-ui="surface-head"] {
-    padding: 0;
-    margin-bottom: var(--kv-space-5);
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="metric"] {
-    min-height: 0;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="content-card"] {
-    padding-block: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="card-title"] a:hover {
-    text-decoration: underline;
-  }
-
-  [data-kv-design-system][data-presentation="flat"]
-    :is([data-ui="disclosure-summary"], [data-ui="disclosure-body"]) {
-    padding-inline: 0;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="modal-sheet"] {
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-}
+@import "./flat/styles.css";

package/dist/layouts/grouped/styles.css

@@ -0,0 +1,131 @@
+/* Grey canvas and chrome, white working groups, and a single boundary per group. */
+@layer ket.app {
+  [data-kv-design-system][data-presentation="grouped"] {
+    --kv-page-bg: light-dark(#f6f6f7, var(--kv-ref-bg-main));
+    --kv-app-bg: light-dark(#f6f6f7, var(--kv-ref-bg-app));
+    --kv-sidebar-bg: light-dark(#f7f5f5, var(--kv-ref-bg-sidebar));
+    --kv-nav-selected: light-dark(#eef0fb, var(--kv-ref-nav-selected));
+    --kv-nav-selected-hover: light-dark(#dde2f7, var(--kv-ref-nav-selected-hover));
+    --kv-panel-bg-subtle: light-dark(#f6f6f7, var(--kv-ref-surface-0));
+    --kv-surface-raised: light-dark(#fafafb, var(--kv-ref-surface-2));
+    --kv-surface-hover: light-dark(#f0f1f3, var(--kv-ref-surface-3));
+    --kv-panel-border: light-dark(#e2e4e8, var(--kv-ref-border-subtle));
+    --kv-sidebar-border: light-dark(#e9e7e8, rgb(255 255 255 / 7%));
+    --kv-table-header-bg: light-dark(#f0f1f3, #282d34);
+    --kv-table-row-hover: light-dark(#f6f6f7, rgb(255 255 255 / 2.7%));
+    --kv-input-bg-hover: light-dark(#f6f6f7, #252b32);
+    --kv-interactive-hover: light-dark(#f6f6f7, var(--kv-ref-control-hover));
+    --kv-interactive-active: light-dark(#f0f1f3, var(--kv-ref-control-active));
+    --kv-interactive-disabled: light-dark(#f0f1f3, var(--kv-ref-control-disabled));
+    /* Rebind inherited aliases at the presentation boundary. */
+    --kv-page-content-bg: var(--kv-page-bg);
+    --kv-panel-divider: var(--kv-panel-border);
+    --kv-table-border: var(--kv-panel-border);
+    --kv-right-rail-border: var(--kv-sidebar-border);
+    --kv-color-canvas: var(--kv-page-bg);
+    --kv-color-canvas-raised: var(--kv-panel-bg-subtle);
+    --kv-color-surface-subtle: var(--kv-surface-raised);
+    --kv-color-surface-hover: var(--kv-surface-hover);
+    --kv-color-line: var(--kv-panel-border);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
+    --kv-page-chrome-bg: var(--kv-page-bg);
+    color: var(--kv-text-main);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="app-main"] {
+    --kv-page-padding-x: var(--kv-space-3);
+    background: var(--kv-page-bg);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"]
+    :is([data-ui="list-page"], [data-ui="record-page"], [data-pattern="workspace"])
+    > :is([data-ui$="-context"], [data-ui$="-header"], [data-ui$="-navigation"], [data-ui$="-toolbar"]) {
+    padding-inline: var(--kv-page-padding-x);
+  }
+
+  @media (max-width: 42rem) {
+    [data-kv-design-system][data-presentation="grouped"]
+      :is([data-ui="list-page-body"], [data-ui="list-page-footer"]) {
+      margin-inline: var(--kv-page-padding-x);
+    }
+  }
+
+  [data-kv-design-system][data-presentation="grouped"]
+    :is([data-ui="dashboard-page-body"], [data-ui="board-page-body"], [data-ui="record-page-body"]) {
+    padding: var(--kv-space-3) var(--kv-page-padding-x);
+    gap: var(--kv-space-2);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"]
+    :is([data-ui="dashboard-page-body"], [data-ui="board-page-body"], [data-ui="record-page-body"])
+    > [data-ui="stack"],
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="app-main"] [data-ui="grid"],
+  [data-kv-design-system][data-presentation="grouped"]
+    [data-ui="section-body"]
+    > [data-ui="stack"]:has(> [data-ui="content-card"]) {
+    gap: var(--kv-space-2);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"]
+    :is([data-ui="surface"], [data-ui="metric"], [data-ui="content-card"]) {
+    padding: var(--kv-space-3);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="surface-head"] {
+    padding: 0;
+    margin-bottom: var(--kv-space-3);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="table-scroll"][data-framed="false"] {
+    width: auto;
+    margin-inline: 0;
+  }
+
+  [data-kv-design-system][data-presentation="grouped"]
+    [data-ui="surface"][data-padding="none"]
+    > [data-ui="surface-head"] {
+    padding: 0;
+    margin-bottom: var(--kv-space-3);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
+    margin: var(--kv-space-3) var(--kv-space-3) var(--kv-space-3) 0;
+    padding: var(--kv-space-3);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] > [data-ui="stack"] {
+    gap: var(--kv-space-3);
+  }
+
+  /* The context surface already owns its background. */
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] [data-ui="metric"] {
+    padding: 0;
+    min-height: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  @media (max-width: 63.9375rem) {
+    [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
+      margin: 0 var(--kv-space-3) var(--kv-space-3);
+    }
+  }
+
+  [data-kv-design-system][data-presentation="grouped"] [data-ui="surface"] [data-ui="disclosure"] {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  [data-kv-design-system][data-presentation="grouped"]
+    [data-ui="surface"]
+    :is([data-ui="disclosure-summary"], [data-ui="disclosure-body"]) {
+    padding-inline: 0;
+  }
+}