/** * tokens.css — the product's names for Intel Spark's values. * * Every value here is a reference to a Spark variable (--spark-*), defined * in shared/spark.css, which is copied verbatim from vendor/spark-css/. The * names are ours, by role (--color-text-muted, --space-4), so the product's * own parts read the same way they always have; the values are Intel's. * * What is not a Spark variable, and why: * - 1rem and 1.5rem spacing: Spark's components use both throughout; its * global space scale leaves them out. * - Font weights 400/500: Spark writes these as literals too. * - Layout widths, z-order and motion timings: page composition, which * Spark does not define. * - App icon tile radii: the shape of the publisher's artwork. * docs/spark-adoption.md records the whole mapping. */ :root { /* ---- Colour: text ---- Spark's light theme greys. They run lighter than the ones we inferred, so each is checked against the surface it is actually read on. */ /* Spark: theme-light-gray900. 13.95:1 on white. */ --color-text-ink: var(--spark-color-theme-light-gray900); /* Spark: theme-light-gray700. 5.18:1 on white, 4.74:1 on the page grey — AA on both, which was the thing to verify before adopting it. */ --color-text-muted: var(--spark-color-theme-light-gray700); /* Spark: theme-light-gray600. 3.27:1, deliberately below AA: it marks a value that does not exist yet ("Not assigned yet"), never text to read. */ --color-text-disabled: var(--spark-color-theme-light-gray700); /* White text on any filled surface — a primary button, a dark code block, a tooltip, a toast icon. One token rather than eleven hardcoded #fff. */ --color-text-on-brand: var(--spark-color-theme-light-gray50); /* Spark: classic-blue / classic-blue-shade1. */ --color-text-link: var(--spark-color-classic-blue); --color-text-link-hover: var(--spark-color-classic-blue-shade1); /* ---- Colour: surfaces ---- Spark's light theme greys. Ours carried a blue cast; Spark's are neutral, which is the most visible part of the change. */ --color-bg-page: var(--spark-color-theme-light-gray100); /* Spark: theme-light-gray100 */ --color-bg-surface: var(--spark-color-theme-light-gray50); /* Spark: theme-light-gray50 */ --color-bg-surface-sunken: var(--spark-color-theme-light-gray75); /* Spark: theme-light-gray75 */ --color-border: var(--spark-color-theme-light-gray300); /* Spark: theme-light-gray300 */ --color-border-strong: var(--spark-color-theme-light-gray400); /* Spark: theme-light-gray400 */ /* ---- Colour: brand ---- Spark's primary, Intel Classic Blue. Spark has no pale brand tint: its own selected and hover surface is gray200, so that is what a "subtle" brand surface is here. */ --color-brand: var(--spark-color-classic-blue); --color-brand-emphasis: var(--spark-color-classic-blue-shade1); --color-brand-subtle-bg: var(--spark-color-theme-light-gray200); --color-brand-subtle-border: var(--spark-color-theme-light-gray300); /* ---- Colour: default app icon ---- Six pale backgrounds for an app that has no icon yet, each a Spark tint mixed mostly with white so they stay quiet. Picked per app by name in components.js (tintPlaceholders). */ --color-icon-tint-1: color-mix(in srgb, var(--spark-color-aqua-tint2) 22%, white); --color-icon-tint-2: color-mix(in srgb, var(--spark-color-cobalt-tint2) 18%, white); --color-icon-tint-3: color-mix(in srgb, var(--spark-color-moss-tint2) 28%, white); --color-icon-tint-4: color-mix(in srgb, var(--spark-color-geode-tint2) 24%, white); --color-icon-tint-5: color-mix(in srgb, var(--spark-color-rust-tint2) 20%, white); --color-icon-tint-6: color-mix(in srgb, var(--spark-color-daisy-tint1) 22%, white); /* ---- Colour: state ---- Spark's status hues — moss, daisy, coral — as Spark's message banner uses them. Spark has no pale status tints either; a status surface is that hue's lightest Spark step. --color-warning-text is Spark's rust, not daisy: Spark's darkest daisy is below AA as text, rust-shade1 is readable, and it matches the rust "Pending" and "Suspended" tags. */ --color-success-text: var(--spark-color-moss-shade2); --color-success-bg: var(--spark-color-theme-light-gray100); --color-warning-text: var(--spark-color-rust-shade1); --color-warning-bg: var(--spark-color-theme-light-gray100); --color-danger-text: var(--spark-color-coral-shade1); --color-danger-bg: var(--spark-color-theme-light-gray100); --color-danger-soft: var(--spark-color-coral-shade1); --color-neutral-text: var(--spark-color-theme-light-gray800); --color-neutral-bg: var(--spark-color-theme-light-gray200); /* The near-black the sign-in backdrop's brand gradient falls away to. */ --color-auth-backdrop-shade: var(--spark-color-theme-dark-gray50); /* ---- Type ---- */ /* Intel One, from Spark. IntelOneText carries body and everything by default; IntelOneDisplay is reserved for page and pane titles, which is how Spark composes the two (vendor/spark-css/global/spark-typography.css). */ --font-family-base: var(--spark-font-intel-one-text); --font-family-display: var(--spark-font-intel-one-display); --font-family-mono: var(--spark-code-snippet-font-family); /* Spark's scale, nearest step for each of our five. Spark has no 13px and no 15px, so the two half-steps our own scale carried collapse: the result is a scale with real gaps in it rather than three sizes a pixel apart. page-title font-size-300 1.5rem pane-title font-size-200 1.25rem body font-size-75 0.875rem (already matched) meta font-size-50 0.75rem eyebrow font-size-25 0.6875rem Kept in px like every other token here; the rem values are Spark's. */ --font-size-page-title: var(--spark-font-size-300); --font-size-pane-title: var(--spark-font-size-200); --font-size-body: var(--spark-font-size-75); --font-size-meta: var(--spark-font-size-75); --font-size-eyebrow: var(--spark-font-size-50); /* Weights follow builders.intel.com rather than a generic UI scale. Its production CSS uses 400 (38 declarations) and 500 (21) almost exclusively; 700 appears three times in the whole stylesheet. Intel Clear gets its emphasis from size, not from weight, which is why the site reads light. 700 here was making every label heavier than anything on Intel's own pages. --font-weight-display is for large headings, which Intel sets at the regular weight and lets the size carry. */ --font-weight-regular: 400; --font-weight-display: 400; --font-weight-medium: 500; --font-weight-bold: 500; --line-height-tight: var(--spark-line-height-heading); /* Spark: line-height-heading */ --line-height-body: var(--spark-line-height-text); /* Spark: line-height-text */ /* ---- Spacing scale ---- */ --space-1: var(--spark-space-4); --space-2: var(--spark-space-8); --space-3: var(--spark-space-12); --space-4: 1rem; /* Spark's own component step (input-l and button-m inline padding), which its global scale skips */ --space-5: var(--spark-space-20); --space-6: 1.5rem; /* Spark's own component step (small-modal padding), which its global scale skips */ --space-7: var(--spark-space-32); --space-8: var(--spark-space-32); /* 40px, off Spark's scale, moved to its nearest step */ --space-9: var(--spark-space-52); /* 48px, off Spark's scale, moved to its nearest step */ /* ---- Controls ---- Spark's medium control height, for the few custom controls that sit in a row of Spark ones. */ --control-height-m: var(--spark-button-m-block-size); /* ---- Icon sizes ---- Marks that sit beside text rather than inside a control. They have no Spark equivalent — Spark sizes its icons per component — so these are the two sizes this product actually uses, named once. */ --icon-size-md: 22px; /* the topbar logo, against the wordmark beside it */ --icon-size-lg: 26px; /* the file mark on an upload row */ /* ---- Radius ---- Three roles, no more. Intel's Collaboration screenshots settle what the package only implied: buttons, inputs and search are hard 90° corners, and Spark's own component CSS agrees — button, input, card and modal declare no border-radius at all. Only status pills carry a curve. --radius-sm and --radius-md are gone rather than both set to 0: two tokens that mean the same thing invite someone to change one of them. */ --radius-none: 0; /* Pills, badges and tags. Spark: tag-rounding-semi-round (0.25rem), and badge-square-border-radius at 0.3125rem — 4px is the reading that matches Intel's product. */ /* Avatars, state dots, the wizard's step circles. */ --radius-full: 50%; /* a circle, as Spark's circular badge draws one */ /* The app icon tile is the one exemption from square: it holds the publisher's artwork and reads as an app icon, the way a home-screen icon does, not as product chrome. It has no Spark equivalent — Spark has no app icon. One ramp, four sizes, rather than five magic numbers scattered across three files. */ --radius-app-icon-sm: 12px; /* 40px tile */ --radius-app-icon: 16px; /* 56px tile */ --radius-app-icon-lg: 20px; /* 96px tile */ --radius-app-icon-xl: 32px; /* 140px tile, the application page head */ /* ---- Shadow ---- Spark's shadow for resting surfaces, and Spark's popover shadow for anything floating above the page (menus, dropdowns). */ --shadow-sm: var(--spark-shadow-x) var(--spark-shadow-y) var(--spark-shadow-blur-radius) var(--spark-shadow-basic); --shadow-md: var(--spark-popover-popover-box-shadow-x) var(--spark-popover-popover-box-shadow-y) var(--spark-popover-popover-box-shadow-blur-radius) var(--spark-popover-popover-shadow-color); /* ---- Layout ---- */ --layout-max-width: 1440px; --layout-side-padding: 40px; --layout-topbar-height: 64px; --layout-rail-width: 300px; /* Intel Admin's left navigation column (the admin shell has no top bar). */ --layout-sidenav-width: 248px; /* ---- Focus ---- Spark's own ring, from interactions/focus. Two tone on purpose: a 3px classic-blue-shade1 outline with a 3px white ring outside it, drawn as a box-shadow, so it stays visible against a dark backdrop or a filled surface where a single blue outline disappears — the sign-in page and the code blocks, in our build. Spark: focus-color-focus-primary, focus-color-focus-backup, focus-outline-width-final-primary, focus-outline-width-final-backup. */ --focus-ring-color: var(--spark-color-classic-blue-shade1); /* Spark: classic-blue-shade1 */ --focus-ring-backup: var(--spark-color-theme-light-gray50); /* Spark: theme-light-gray50 */ --focus-ring-width: var(--spark-focus-outline-width-final-primary); /* Spark: 0.1875rem */ --focus-ring-offset: var(--spark-focus-outline-width-final-backup); /* Spark: 0.1875rem */ /* ---- Motion ---- */ --motion-duration-fast: 120ms; --motion-duration-base: 200ms; --motion-easing: ease; /* ---- Z-index ---- */ --z-topbar: 100; --z-toast: 400; } @media (prefers-reduced-motion: reduce) { :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; } }