@surflane/ui 0.9.0 → 0.10.0

package/dist/css/rules/bottom-navigation.css

@@ -5,137 +5,138 @@
 @layer surflane.components {
   /* The phone's chrome along the bottom edge, as the sidebar is on wider screens. It
      shows where AppShell hides the sidebar, and pads the home indicator's safe area. */
-  .pui-bottom-nav {
+  .surf-bottom-nav {
     box-sizing: border-box;
     display: none;
     inline-size: 100%;
     padding-block-end: env(safe-area-inset-bottom, 0px);
-    border-block-start: 1px solid var(--line);
-    background: var(--chrome);
+    border-block-start: 1px solid var(--surf-line);
+    background: var(--surf-chrome);
   }
-  .pui-bottom-nav[data-visible='always'] {
+  .surf-bottom-nav[data-visible='always'] {
     display: block;
   }
   @media (max-width: 760px) {
-    .pui-bottom-nav {
+    .surf-bottom-nav {
       display: block;
     }
   }
-  .pui-bottom-nav[data-position='fixed'] {
+  .surf-bottom-nav[data-position='fixed'] {
     position: fixed;
     inset-inline: 0;
     inset-block-end: 0;
-    z-index: var(--layer-chrome);
+    z-index: var(--surf-layer-chrome);
   }
-  .pui-bottom-nav-list {
+  .surf-bottom-nav-list {
     display: flex;
-    block-size: var(--size-bottom-navigation);
+    block-size: var(--surf-size-bottom-navigation);
     margin: 0;
-    padding: 0 var(--space-1);
+    padding: 0 var(--surf-space-1);
     list-style: none;
   }
-  .pui-bottom-nav-entry {
+  .surf-bottom-nav-entry {
     display: flex;
     flex: 1 1 0;
     min-inline-size: 0;
   }
-  .pui-bottom-nav-item {
+  .surf-bottom-nav-item {
     display: flex;
     flex: 1;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--space-1);
+    gap: var(--surf-space-1);
     min-inline-size: 0;
-    min-block-size: var(--control-target-size);
-    color: var(--ink-muted);
-    font: var(--weight-medium)
-      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
-    letter-spacing: var(--type-caption-tracking);
+    min-block-size: var(--surf-control-target-size);
+    color: var(--surf-ink-muted);
+    font: var(--surf-weight-medium)
+      var(--surf-type-caption-size)/var(--surf-type-caption-leading)
+      var(--surf-font-body);
+    letter-spacing: var(--surf-type-caption-tracking);
     text-decoration: none;
     -webkit-tap-highlight-color: transparent;
   }
   /* The icon sits in a pill: the current destination fills it, touch presses it. */
-  .pui-bottom-nav-icon {
+  .surf-bottom-nav-icon {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--space-1) var(--space-4);
-    border-radius: var(--radius-full);
-    transition: background-color var(--duration-fast) var(--ease-out);
+    padding: var(--surf-space-1) var(--surf-space-4);
+    border-radius: var(--surf-radius-pill);
+    transition: background-color var(--surf-duration-fast) var(--surf-ease-out);
   }
   /* Icons take the medium size here unless their own size prop sets one. */
-  .pui-bottom-nav-icon > .pui-icon:not([data-size]) {
-    width: var(--icon-size-md);
-    height: var(--icon-size-md);
+  .surf-bottom-nav-icon > .surf-icon:not([data-size]) {
+    width: var(--surf-size-icon-large);
+    height: var(--surf-size-icon-large);
   }
-  .pui-bottom-nav-item[aria-current='page'] {
-    color: var(--ink);
+  .surf-bottom-nav-item[aria-current='page'] {
+    color: var(--surf-ink);
   }
-  .pui-bottom-nav-item[aria-current='page'] .pui-bottom-nav-icon {
-    background: var(--selected);
+  .surf-bottom-nav-item[aria-current='page'] .surf-bottom-nav-icon {
+    background: var(--surf-selected);
   }
   @media (hover: hover) {
-    .pui-bottom-nav-item:hover .pui-bottom-nav-icon {
+    .surf-bottom-nav-item:hover .surf-bottom-nav-icon {
       background-image: linear-gradient(
-        var(--interaction-hover-bg),
-        var(--interaction-hover-bg)
+        var(--surf-interaction-hover-bg),
+        var(--surf-interaction-hover-bg)
       );
     }
   }
-  .pui-bottom-nav-item:active .pui-bottom-nav-icon {
+  .surf-bottom-nav-item:active .surf-bottom-nav-icon {
     background-image: linear-gradient(
-      var(--interaction-active-bg),
-      var(--interaction-active-bg)
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
     );
   }
-  .pui-bottom-nav-item:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-inset);
-    border-radius: var(--radius-md);
+  .surf-bottom-nav-item:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-inset);
+    border-radius: var(--surf-radius-md);
   }
-  .pui-bottom-nav-label {
+  .surf-bottom-nav-label {
     max-inline-size: 100%;
-    padding-inline: var(--space-1);
+    padding-inline: var(--surf-space-1);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   /* A count or a dot at the pill's top corner, in the danger color. */
-  .pui-bottom-nav-badge {
+  .surf-bottom-nav-badge {
     position: absolute;
-    inset-block-start: calc(-1 * var(--space-1));
-    inset-inline-start: calc(50% + var(--space-1));
+    inset-block-start: calc(-1 * var(--surf-space-1));
+    inset-inline-start: calc(50% + var(--surf-space-1));
     box-sizing: border-box;
-    min-inline-size: calc(var(--type-caption-leading) * 1em);
-    padding-inline: var(--space-1);
-    border-radius: var(--radius-full);
-    background: var(--status-danger-fg);
-    color: var(--canvas);
+    min-inline-size: calc(var(--surf-type-caption-leading) * 1em);
+    padding-inline: var(--surf-space-1);
+    border-radius: var(--surf-radius-pill);
+    background: var(--surf-status-danger-fg);
+    color: var(--surf-canvas);
     font-variant-numeric: tabular-nums;
     text-align: center;
   }
-  .pui-bottom-nav-badge[data-dot] {
+  .surf-bottom-nav-badge[data-dot] {
     inset-block-start: 0;
     min-inline-size: 0;
-    inline-size: var(--space-2);
-    block-size: var(--space-2);
+    inline-size: var(--surf-space-2);
+    block-size: var(--surf-space-2);
     padding: 0;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-bottom-nav-icon {
+    .surf-bottom-nav-icon {
       transition: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-bottom-nav {
+    .surf-bottom-nav {
       border-block-start-color: CanvasText;
     }
-    .pui-bottom-nav-item[aria-current='page'] .pui-bottom-nav-icon {
+    .surf-bottom-nav-item[aria-current='page'] .surf-bottom-nav-icon {
       outline: 1px solid Highlight;
     }
-    .pui-bottom-nav-badge {
+    .surf-bottom-nav-badge {
       border: 1px solid CanvasText;
     }
   }

package/dist/css/rules/breadcrumbs.css

@@ -3,7 +3,7 @@
   surflane.sizes;
 
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-breadcrumbs) {
-    font-size: var(--ui-font);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-breadcrumbs) {
+    font-size: var(--surf-ui-font);
   }
 }

package/dist/css/rules/button.css

@@ -3,129 +3,130 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-button {
+  .surf-button {
     box-sizing: border-box;
-    height: var(--control-height);
+    height: var(--surf-control-height);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--space-2);
-    min-height: var(--control-height);
-    padding: 0 var(--size-button-padding-default);
+    gap: var(--surf-space-2);
+    min-height: var(--surf-control-height);
+    padding: 0 var(--surf-size-button-padding-default);
     border: 1px solid transparent;
-    border-radius: var(--radius-full);
-    font: var(--weight-medium) var(--type-label-size)/var(--type-label-leading)
-      var(--font-body);
-    letter-spacing: var(--type-label-tracking);
-    color: var(--ink);
-    background: var(--canvas);
+    border-radius: var(--surf-radius-pill);
+    font: var(--surf-weight-medium)
+      var(--surf-type-label-size)/var(--surf-type-label-leading)
+      var(--surf-font-body);
+    letter-spacing: var(--surf-type-label-tracking);
+    color: var(--surf-ink);
+    background: var(--surf-canvas);
     /* A link rendered as a button drops the user-agent underline. */
     text-decoration: none;
     cursor: pointer;
   }
-  .pui-button:is([data-variant='default'], [data-variant='primary']) {
+  .surf-button:is([data-variant='default'], [data-variant='primary']) {
     /* On the brand fill the layer is its ink: light ink barely moves bright cyan. */
-    --interaction-hover-bg: oklch(from var(--on-brand) l c h / 0.08);
-    --interaction-active-bg: oklch(from var(--on-brand) l c h / 0.14);
-    background: var(--brand);
+    --surf-interaction-hover-bg: oklch(from var(--surf-on-brand) l c h / 0.08);
+    --surf-interaction-active-bg: oklch(from var(--surf-on-brand) l c h / 0.14);
+    background: var(--surf-brand);
     border-color: transparent;
-    color: var(--on-brand);
+    color: var(--surf-on-brand);
   }
-  .pui-button[data-variant='outline'] {
-    border-color: var(--line);
+  .surf-button[data-variant='outline'] {
+    border-color: var(--surf-line);
     background: transparent;
   }
-  .pui-button[data-variant='ghost'] {
+  .surf-button[data-variant='ghost'] {
     border-color: transparent;
     background: transparent;
   }
   /* Hover adds the state layer over the variant's own fill, so a primary, a
      pressed toggle and a transparent toolbar button all step by the same amount. */
-  .pui-button:hover:not(:disabled, [data-disabled], [data-variant='link']) {
+  .surf-button:hover:not(:disabled, [data-disabled], [data-variant='link']) {
     background-image: linear-gradient(
-      var(--interaction-hover-bg),
-      var(--interaction-hover-bg)
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
     );
   }
-  .pui-button[data-variant='link']:hover:not(:disabled, [data-disabled]) {
+  .surf-button[data-variant='link']:hover:not(:disabled, [data-disabled]) {
     text-decoration-thickness: 2px;
   }
-  .pui-button:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-button:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-button:is(:disabled, [data-disabled], [aria-disabled='true']) {
-    opacity: var(--control-disabled-opacity);
+  .surf-button:is(:disabled, [data-disabled], [aria-disabled='true']) {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  /* Touch targets grow on narrow screens and on touch, as --control-height does. */
+  /* Touch targets grow on narrow screens and on touch, as --surf-control-height does. */
   @media (max-width: 760px), (pointer: coarse) {
-    .pui-button {
-      min-height: var(--control-target-size);
+    .surf-button {
+      min-height: var(--surf-control-target-size);
     }
   }
-  .pui-button[data-variant='secondary'] {
-    background: var(--selected);
-    color: var(--ink);
+  .surf-button[data-variant='secondary'] {
+    background: var(--surf-selected);
+    color: var(--surf-ink);
   }
-  .pui-button[data-variant='destructive'] {
-    background: var(--status-danger-bg);
-    color: var(--status-danger-fg);
+  .surf-button[data-variant='destructive'] {
+    background: var(--surf-status-danger-bg);
+    color: var(--surf-status-danger-fg);
     border-color: transparent;
   }
-  .pui-button[data-variant='link'] {
+  .surf-button[data-variant='link'] {
     background: transparent;
-    color: var(--brand-ink);
+    color: var(--surf-brand-ink);
     border-color: transparent;
     text-decoration: underline;
   }
   /* Active feedback is transient; persistent selection belongs to Toggle. */
-  .pui-button:active:not(:disabled, [data-disabled], [data-variant='link']) {
+  .surf-button:active:not(:disabled, [data-disabled], [data-variant='link']) {
     background-image: linear-gradient(
-      var(--interaction-active-bg),
-      var(--interaction-active-bg)
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
     );
   }
-  .pui-button[aria-busy='true'] {
+  .surf-button[aria-busy='true'] {
     cursor: progress;
   }
   @media (forced-colors: active) {
-    .pui-button {
+    .surf-button {
       border-color: ButtonText;
     }
-    .pui-button:active {
+    .surf-button:active {
       background-image: none;
     }
   }
 }
 @layer surflane.sizes {
-  .pui-button[data-size='xs'] {
+  .surf-button[data-size='xs'] {
     height: 24px;
     min-height: 24px;
-    padding-inline: var(--space-2);
-    font-size: var(--type-caption-size);
-    letter-spacing: var(--type-caption-tracking);
-    gap: var(--space-1);
+    padding-inline: var(--surf-space-2);
+    font-size: var(--surf-type-caption-size);
+    letter-spacing: var(--surf-type-caption-tracking);
+    gap: var(--surf-space-1);
   }
-  .pui-button[data-size^='icon'] {
-    width: var(--control-height);
+  .surf-button[data-size^='icon'] {
+    width: var(--surf-control-height);
     padding: 0;
   }
-  :where([data-ui-size], [data-ui-size] *).pui-button {
-    height: var(--control-height);
-    min-height: var(--control-height);
-    padding-inline: var(--ui-button-padding);
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *).surf-button {
+    height: var(--surf-control-height);
+    min-height: var(--surf-control-height);
+    padding-inline: var(--surf-ui-button-padding);
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
-  :where([data-ui-size], [data-ui-size] *).pui-button[data-size^='icon'] {
-    inline-size: var(--control-height);
-    block-size: var(--control-height);
+  :where([data-ui-size], [data-ui-size] *).surf-button[data-size^='icon'] {
+    inline-size: var(--surf-control-height);
+    block-size: var(--surf-control-height);
     padding: 0;
-    border-radius: var(--radius-full);
+    border-radius: var(--surf-radius-pill);
   }
-  :where([data-ui-size], [data-ui-size] *):is(.pui-button) > svg {
-    inline-size: var(--ui-icon);
-    block-size: var(--ui-icon);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-button) > svg {
+    inline-size: var(--surf-ui-icon);
+    block-size: var(--surf-ui-icon);
   }
 }

package/dist/css/rules/card.css

@@ -3,8 +3,8 @@
   surflane.sizes;
 
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-card {
-    padding: var(--surface-padding, var(--ui-card-padding));
-    gap: var(--ui-surface-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-card {
+    padding: var(--surf-surface-padding, var(--surf-ui-card-padding));
+    gap: var(--surf-ui-surface-padding);
   }
 }