Blog

ACSS Pallette

#acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3{ –col-w: 18rem; –swatch-h: 150px; –gap: 16px; –radius: var(–radius-l); –border: rgb(0 0 0 / .08); –shadow: 0 1px 2px rgb(0 0 0 / .10); –font: var(–sans,apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif); –mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”,”Courier New”, monospace; –apca-min: 60; –pop-w: clamp(18rem, 42vw, 34rem); font-family: var(–font); } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3, #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 *{ box-sizing: border-box; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__safari-note{ margin: 0 var(–space-m) 12px; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .85); color: rgb(10 10 10); border: 1px solid rgb(0 0 0 / .14); font-size: 14px; line-height: 1.35; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__safari-note strong{ font-weight: 750; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__grid{ display: grid; grid-auto-flow: column; grid-auto-columns: var(–col-w); gap: var(–card-gap, var(–gap)); align-items: start; overflow-x: auto; padding: var(–space-m); width: 100%; max-width: 100%; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__col{ display: grid; gap: var(–card-gap, 10px); margin: 0; padding: 0; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__title{ font-weight: 750; font-size: 1rem; letter-spacing: .2px; padding: 6px 2px 2px; margin: 0; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch{ height: var(–swatch-h); border-radius: var(–radius); position: relative; overflow: visible; isolation: isolate; box-shadow: var(–shadow); border: 1px solid var(–border); corner-shape: squircle; display: flex; gap: var(–card-gap, 8px); flex-direction: column; padding: var(–space-s); margin: 0; color: #fff; –swatch-scrim: transparent; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch.needs-scrim::before{ content: “”; position: absolute; inset: 0; background: var(–swatch-scrim); pointer-events: none; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__meta, #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__value, #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__copied{ position: relative; z-index: 1; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__meta{ display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__label{ font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; min-width: 0; flex: 1 1 auto; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__meta-right{ margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__badge{ font-size: calc(var(–text-xs) – 3px); padding: 4px 8px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .18); line-height: 1; white-space: nowrap; margin: 0; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__palette-btn{ inline-size: 30px; block-size: 30px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .18); color: currentColor; display: inline-grid; place-items: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__palette-btn svg{ inline-size: 18px; block-size: 18px; display: block; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__palette-btn:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__value{ font-family: var(–font); font-size: calc(var(–text-m) – 2px); line-height: 1.15; opacity: .98; word-break: break-word; margin: 0; text-align: left; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__value:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__copied{ position: absolute; inset-inline: auto var(–space-s); inset-block: auto var(–space-s); padding: 6px 10px; border-radius: 999px; font-weight: 750; font-size: 12px; letter-spacing: .02em; /* lock toast colors (no inheritance from swatch) */ color: #fff; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .25); backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch.is-copied .acss-matrix__copied{ opacity: 1; transform: translateY(0); } /* is-light means dark text */ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch.is-light{ color: rgb(10 10 10); } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch.is-light .acss-matrix__badge, #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch.is-light .acss-matrix__palette-btn{ border-color: rgb(0 0 0 / .18); background: rgb(255 255 255 / .60); } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__swatch.is-light .acss-matrix__value{ opacity: .9; } /* —————————- Popover + theme switching —————————- */ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-pop{ inline-size: var(–pop-w); max-inline-size: min(34rem, calc(100vw – 2rem)); border-radius: calc(var(–radius) + 2px); box-shadow: 0 12px 30px rgb(0 0 0 / .35); backdrop-filter: blur(16px); padding: 14px; /* defaults = ACSS theme */ background: var(–body-bg-color, rgb(15 15 18 / .92)); color: var(–text-color, #fff); border: 1px solid rgb(0 0 0 / .12); } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-pop::backdrop{ background: transparent; } /* Light theme */ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-pop[data-theme=”light”]{ background: rgb(255 255 255 / .92); color: rgb(10 10 10); border: 1px solid rgb(0 0 0 / .14); } /* Dark theme */ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-pop[data-theme=”dark”]{ background: rgb(10 10 10 / .92); color: #fff; border: 1px solid rgb(255 255 255 / .18); } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-title{ font-family: var(–mono); font-size: 22px; letter-spacing: .2px; font-weight: 750; margin: 0; flex: 1 1 auto; min-width: 12ch; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-close{ margin-left: auto; inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; display: inline-grid; place-items: center; cursor: pointer; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-close svg{ inline-size: 18px; block-size: 18px; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-body{ display: grid; gap: 10px; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-row{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-chip{ inline-size: 26px; block-size: 26px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: transparent; flex: 0 0 auto; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-code{ font-family: var(–mono); font-size: 15px; line-height: 1.2; opacity: .95; word-break: break-word; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-list{ display: grid; gap: 10px; } /* Theme switcher (segmented control) */ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__sr-only{ position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__theme{ display: inline-flex; align-items: center; gap: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); padding: 2px; margin: 0; flex: 0 0 auto; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__theme-input{ position: absolute; opacity: 0; pointer-events: none; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__theme-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; font-weight: 750; font-size: 12px; letter-spacing: .02em; cursor: pointer; user-select: none; color: inherit; opacity: .85; margin-bottom:0; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__theme-input:checked + .acss-matrix__theme-btn{ background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1; } #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__theme-btn:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } /* Anchor positioning */ @supports (anchor-name: –a) and (position-anchor: –a){ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-pop{ position-anchor: var(–acss-anchor); inset: auto; inset-area: bottom; translate: 0 10px; position-try-fallbacks: flip-block, flip-inline; } } @supports not ((anchor-name: –a) and (position-anchor: –a)){ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__alpha-pop{ position: fixed; left: 50%; top: 18vh; transform: translateX(-50%); } } @media (max-width: 1100px){ #acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3 .acss-matrix__grid{ grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); overflow-x: visible; } } (() => { const host = document.getElementById(“acss-matrix-8d1efd41-462b-4e98-82b9-efdcedf3cce3″); if (!host) return; /* ———- Safari-only notice ———- */ const safariNotice = host.querySelector(‘.acss-matrix__safari-note’); const isSafari = (() => { const ua = navigator.userAgent || ”; const isWebKit = /AppleWebKit/i.test(ua); const isSafariName = /Safari/i.test(ua); const notChromium = !/Chrome|Chromium|CriOS|Edg|EdgiOS|OPR|Opera|Brave/i.test(ua); return isWebKit && isSafariName && notChromium; })(); const hasPopoverAPI = typeof HTMLElement !== ‘undefined’ && ‘popover’ in HTMLElement.prototype; if (safariNotice && isSafari && hasPopoverAPI) { safariNotice.hidden = false; } /* ———- APCA-ish helpers ———- */ const clamp01 = (v) => Math.min(1, Math.max(0, v)); const srgb8ToLin = (c8) => { const c = c8 / 255; return (c { const r = srgb8ToLin(r8), g = srgb8ToLin(g8), b = srgb8ToLin(b8); return (0.2126 * r) + (0.7152 * g) + (0.0722 * b); }; const apcaLc = (textRGB, bgRGB) => { const Ytxt = yFromRGB(textRGB[0], textRGB[1], textRGB[2]); const Ybg = yFromRGB(bgRGB[0], bgRGB[1], bgRGB[2]); const txt = clamp01(Ytxt); const bg = clamp01(Ybg); const isDarkText = txt { const m = /rgba?\(\s*([0-9.]+)[,\s]+([0-9.]+)[,\s]+([0-9.]+)/i.exec(cssColor || ”); if (!m) return null; const r = Math.round(parseFloat(m[1])); const g = Math.round(parseFloat(m[2])); const b = Math.round(parseFloat(m[3])); if (![r,g,b].every(Number.isFinite)) return null; return [r,g,b]; }; const parseL = (v) => { const m = /oklch\(\s*([0-9.]+)/i.exec(v || ”); if (!m) return null; const L = parseFloat(m[1]); return Number.isFinite(L) ? L : null; }; const getApcaMin = () => { const raw = getComputedStyle(host).getPropertyValue(‘–apca-min’).trim(); const n = parseFloat(raw); return Number.isFinite(n) ? Math.abs(n) : 60; }; const WHITE = [255,255,255]; const BLACK = [10,10,10]; const minLc = getApcaMin(); /* ———- Clipboard helpers ———- */ const copyText = async (text) => { const t = String(text || ”).trim(); if (!t) return false; try { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(t); return true; } } catch (e) {} try { const ta = document.createElement(‘textarea’); ta.value = t; ta.setAttribute(‘readonly’, ”); ta.style.position = ‘fixed’; ta.style.left = ‘-9999px’; ta.style.top = ‘0’; document.body.appendChild(ta); ta.select(); const ok = document.execCommand(‘copy’); document.body.removeChild(ta); return !!ok; } catch (e) {} return false; }; const pulseCopied = (sw) => { if (!sw) return; sw.classList.add(‘is-copied’); window.clearTimeout(sw.__acssCopiedTO); sw.__acssCopiedTO = window.setTimeout(() => { sw.classList.remove(‘is-copied’); }, 1200); }; /* ———- Popover theme switching ———- */ const THEME_STORE_KEY = ‘acss_matrix_pop_theme’; const validTheme = (t) => (t === ‘acss’ || t === ‘light’ || t === ‘dark’) ? t : ‘acss’; const getStoredTheme = () => { try { return validTheme(localStorage.getItem(THEME_STORE_KEY) || ‘acss’); } catch (e) { return ‘acss’; } }; const setStoredTheme = (t) => { try { localStorage.setItem(THEME_STORE_KEY, t); } catch (e) {} }; const setPopoverTheme = (pop, theme) => { if (!pop) return; const t = validTheme(theme); pop.dataset.theme = t; }; const syncPopoverRadios = (pop) => { if (!pop) return; const t = validTheme(pop.dataset.theme || ‘acss’); const input = pop.querySelector(`.acss-matrix__theme-input[value=”${CSS.escape(t)}”]`); if (input) input.checked = true; }; /* ———- Popover content ———- */ const buildTransparency = (sw) => { const popId = sw.getAttribute(‘data-popover’); const pop = popId ? document.getElementById(popId) : null; if (!pop) return; const varName = (sw.getAttribute(‘data-var’) || ”).trim(); // e.g. –neutral const cssVarRef = `var(${varName})`; const baseRow = pop.querySelector(‘.acss-matrix__alpha-row–base’); const baseChip = baseRow?.querySelector(‘.acss-matrix__alpha-chip’); const baseCode = baseRow?.querySelector(‘.acss-matrix__alpha-code’); if (baseChip) baseChip.style.background = cssVarRef; if (baseCode) baseCode.textContent = cssVarRef; const list = pop.querySelector(‘.acss-matrix__alpha-list’); if (!list) return; list.innerHTML = ”; const steps = [10,20,30,40,50,60,70,80,90]; steps.forEach(pct => { const expr = `color-mix(in oklch, ${cssVarRef} ${pct}%, transparent)`; const row = document.createElement(‘div’); row.className = ‘acss-matrix__alpha-row’; row.setAttribute(‘role’, ‘listitem’); const chip = document.createElement(‘div’); chip.className = ‘acss-matrix__alpha-chip’; chip.style.background = expr; const code = document.createElement(‘div’); code.className = ‘acss-matrix__alpha-code’; code.textContent = expr; row.appendChild(chip); row.appendChild(code); list.appendChild(row); }); const anchor = sw.getAttribute(‘data-anchor’); if (anchor) pop.style.setProperty(‘–acss-anchor’, anchor); }; /* ———- Enhance swatches (badge + APCA) ———- */ host.querySelectorAll(‘.acss-matrix__swatch’).forEach(sw => { const v = sw.getAttribute(‘data-value’) || ”; const badge = sw.querySelector(‘.acss-matrix__badge’); const L = parseL(v); if (L !== null) { if (badge) badge.textContent = ‘L ‘ + (Math.round(L * 1000) / 10).toFixed(1); } else { const vv = v.trim().toLowerCase(); if (vv === ‘#fff’ || vv === ‘#ffffff’ || vv === ‘white’) { if (badge) badge.textContent = ‘white’; } else if (vv === ‘#000’ || vv === ‘#000000’ || vv === ‘black’) { if (badge) badge.textContent = ‘black’; } } const bgCss = getComputedStyle(sw).backgroundColor; const bgRGB = parseRgb(bgCss); if (!bgRGB) { if (L !== null && L >= 0.72) sw.classList.add(‘is-light’); buildTransparency(sw); return; } const lcBlack = apcaLc(BLACK, bgRGB); const lcWhite = apcaLc(WHITE, bgRGB); const absBlack = Math.abs(lcBlack); const absWhite = Math.abs(lcWhite); const useBlack = absBlack >= absWhite; const bestLc = useBlack ? lcBlack : lcWhite; const bestAbs = Math.abs(bestLc); sw.classList.toggle(‘is-light’, useBlack); if (bestAbs { const valueBtn = e.target.closest(‘.acss-matrix__value’); if (!valueBtn || !host.contains(valueBtn)) return; const sw = valueBtn.closest(‘.acss-matrix__swatch’); if (!sw) return; const raw = (sw.getAttribute(‘data-value’) || ”).trim(); if (!raw) return; const m = /(oklch\([^)]+\))/i.exec(raw); const toCopy = (m && m[1]) ? m[1].trim() : raw; const ok = await copyText(toCopy); if (ok) pulseCopied(sw); }); /* ———- Theme switching (delegated, persists) ———- */ const globalTheme = getStoredTheme(); // Set initial theme on all popovers + radios host.querySelectorAll(‘.acss-matrix__alpha-pop’).forEach(pop => { setPopoverTheme(pop, globalTheme); syncPopoverRadios(pop); }); host.addEventListener(‘change’, (e) => { const input = e.target; if (!input || !input.classList || !input.classList.contains(‘acss-matrix__theme-input’)) return; const pop = input.closest(‘.acss-matrix__alpha-pop’); if (!pop) return; const t = validTheme(input.value); setPopoverTheme(pop, t); setStoredTheme(t); // Apply to *all* popovers so the user’s preference carries over host.querySelectorAll(‘.acss-matrix__alpha-pop’).forEach(p => { setPopoverTheme(p, t); syncPopoverRadios(p); }); }); /* ———- Popover open: rebuild + sync theme ———- */ document.addEventListener(‘toggle’, (e) => { const pop = e.target; if (!pop || !pop.classList || !pop.classList.contains(‘acss-matrix__alpha-pop’)) return; if (!host.contains(pop)) return; if (pop.matches(‘:popover-open’)) { // Ensure current stored theme is applied (in case it changed elsewhere) const t = getStoredTheme(); setPopoverTheme(pop, t); syncPopoverRadios(pop); const popId = pop.id; const sw = host.querySelector(`.acss-matrix__swatch[data-popover=”${CSS.escape(popId)}”]`); if (sw) buildTransparency(sw); } }, true); })();

Read More