rift-ds 1.2.0 → 1.3.0

package/tokens/registry.json.js

@@ -1,4 +1,4 @@
-const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-button-bg", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-calendar-cell-bg", "--color-calendar-cell-bg-hover", "--color-calendar-event-bg", "--color-calendar-event-bg-hover", "--color-calendar-event-border", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-chat-context-bg", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-icon", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-icon", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-icon", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-icon", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-icon", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-body", "--font-family-code", "--font-family-heading", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-line-height-1100", "--font-line-height-400", "--font-line-height-500", "--font-line-height-600", "--font-line-height-700", "--font-line-height-800", "--font-line-height-900", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-emphasis-family", "--font-paragraph-emphasis-letter-spacing", "--font-paragraph-emphasis-line-height", "--font-paragraph-emphasis-size", "--font-paragraph-emphasis-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-emphasis-family", "--font-paragraph-sm-emphasis-letter-spacing", "--font-paragraph-sm-emphasis-line-height", "--font-paragraph-sm-emphasis-size", "--font-paragraph-sm-emphasis-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-size-1000", "--font-size-1200", "--font-size-1400", "--font-size-1600", "--font-size-2400", "--font-size-2900", "--font-size-300", "--font-size-3300", "--font-size-350", "--font-size-400", "--font-size-550", "--font-size-600", "--font-size-650", "--font-size-750", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-050", "--gap-100", "--gap-1000", "--gap-1500", "--gap-200", "--gap-2000", "--gap-300", "--gap-3000", "--gap-400", "--gap-500", "--padding-050", "--padding-100", "--padding-1000", "--padding-150", "--padding-1500", "--padding-200", "--padding-300", "--padding-400", "--padding-500"], "radius": ["--radius-050", "--radius-100", "--radius-1200", "--radius-200", "--radius-300", "--radius-400", "--radius-600", "--radius-pill"], "border": ["--border-025", "--border-050"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-1200", "--icon-size-500", "--icon-size-600", "--icon-size-800"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
+const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-button-bg", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-calendar-cell-bg", "--color-calendar-cell-bg-hover", "--color-calendar-event-bg", "--color-calendar-event-bg-hover", "--color-calendar-event-border", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-chat-context-bg", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-icon", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-icon", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-icon", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-icon", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-icon", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-body", "--font-family-code", "--font-family-heading", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-line-height-1100", "--font-line-height-400", "--font-line-height-500", "--font-line-height-600", "--font-line-height-700", "--font-line-height-800", "--font-line-height-900", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-emphasis-family", "--font-paragraph-emphasis-letter-spacing", "--font-paragraph-emphasis-line-height", "--font-paragraph-emphasis-size", "--font-paragraph-emphasis-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-emphasis-family", "--font-paragraph-sm-emphasis-letter-spacing", "--font-paragraph-sm-emphasis-line-height", "--font-paragraph-sm-emphasis-size", "--font-paragraph-sm-emphasis-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-size-1000", "--font-size-1200", "--font-size-1400", "--font-size-1600", "--font-size-2400", "--font-size-2900", "--font-size-300", "--font-size-3300", "--font-size-350", "--font-size-400", "--font-size-550", "--font-size-600", "--font-size-650", "--font-size-750", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-050", "--gap-100", "--gap-1000", "--gap-1500", "--gap-200", "--gap-2000", "--gap-300", "--gap-3000", "--gap-400", "--gap-500", "--padding-050", "--padding-100", "--padding-1000", "--padding-150", "--padding-1500", "--padding-200", "--padding-300", "--padding-400", "--padding-500"], "radius": ["--radius-050", "--radius-100", "--radius-1200", "--radius-200", "--radius-300", "--radius-400", "--radius-600", "--radius-pill"], "border": ["--border-025", "--border-050"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-1200", "--icon-size-500", "--icon-size-600", "--icon-size-800"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-orbit", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
 const registry = {
   categories
 };

package/tokens/tokens-dark.css

@@ -79,10 +79,10 @@
   --color-action-primary-border-secondary: var(--primitive-teal-06);
   --color-action-primary-border-tertiary: var(--primitive-teal-04);
 
-  /* Action - Icon. The active icon sits on the hover/active fills, which
-     are the light half of the ramp here — so it inverts with the label. */
+  /* Action - Icon. The active icon follows the active label (see
+     tokens-light.css), which inverts with the fill here. */
   --color-action-icon-default: var(--primitive-neutral-01);
-  --color-action-icon-active: var(--primitive-teal-10);
+  --color-action-icon-active: var(--color-action-primary-text-active);
 
   /* Action - Passive (Secondary button) */
   --color-action-passive-text: var(--primitive-neutral-01);
@@ -92,11 +92,14 @@
 
   /* Action - Neutral (grey filled buttons). The fill stays visible at
      rest, one step above the container greys; hover and active brighten
-     toward the page's opposite, like the primary family. */
+     toward the page's opposite, like the primary family. The label is
+     the ramp's white end, not neutral-01: the pressed fill (neutral-06)
+     leaves neutral-01 only 4.58:1, and the tint lever pulls the near-white
+     down further, which sank every tinted preset below AA. */
   --color-action-neutral-bg: var(--primitive-neutral-08);
   --color-action-neutral-bg-hover: var(--primitive-neutral-07);
   --color-action-neutral-bg-active: var(--primitive-neutral-06);
-  --color-action-neutral-text: var(--primitive-neutral-01);
+  --color-action-neutral-text: var(--primitive-neutral-00);
 
   /* Status - Positive */
   --color-status-positive-bg: var(--primitive-green-10);

package/tokens/tokens-light.css

@@ -97,9 +97,11 @@
   --color-action-primary-border-secondary: var(--primitive-teal-08);
   --color-action-primary-border-tertiary: var(--primitive-teal-08);
 
-  /* Action - Icon */
+  /* Action - Icon. The active icon sits on the same hover/active fills as
+     the active label, so it IS the active label: a theme that repaints
+     those fills repairs labels and icons in one declaration. */
   --color-action-icon-default: var(--primitive-neutral-10);
-  --color-action-icon-active: var(--primitive-teal-02);
+  --color-action-icon-active: var(--color-action-primary-text-active);
 
   /* Action - Passive (Secondary button) */
   --color-action-passive-text: var(--primitive-neutral-10);

package/tokens/tokens-motion.css

@@ -26,6 +26,7 @@
 
   --motion-duration-instant: 75ms;        /* Sub-threshold: takes the edge off a size change without reading as motion (Composer grow/shrink) */
   --motion-duration-deliberate: 400ms;    /* Carousel slide */
+  --motion-duration-orbit: 120000ms;      /* One full turn of an auto-rotating surface (Globe): a tempo, so it paces with the schedule durations */
   --motion-duration-loop-spin: 1000ms;    /* Spinner rotation */
   --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer, agent label sweep */
   --motion-duration-loop-matrix: 1400ms;  /* Agent dot-matrix cycle (twelve slots) */
@@ -56,6 +57,7 @@
     --motion-duration-slower: 0.01ms;
     --motion-duration-instant: 0.01ms;
     --motion-duration-deliberate: 0.01ms;
+    --motion-duration-orbit: 0.01ms;
     --motion-duration-loop-spin: 0.01ms;
     --motion-duration-loop-shimmer: 0.01ms;
     --motion-duration-loop-matrix: 0.01ms;