Skip to content
Draft
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
9c18e4b
Add color selection and clipboard copy functionality
erland-obos Nov 17, 2025
0f8cd6d
Support headings in link-list (#1531)
oscarcarlstrom Nov 20, 2025
440543f
Add layout grids (#1532)
oscarcarlstrom Nov 20, 2025
b1b752c
Version Packages (#1522)
github-actions[bot] Nov 20, 2025
25b08b0
Fix layout-gap-x utility class (#1533)
oscarcarlstrom Nov 20, 2025
27bd60e
Version Packages (#1534)
github-actions[bot] Nov 20, 2025
6dd0def
Move layout-grid classes to utility layer (#1535)
oscarcarlstrom Nov 21, 2025
2d52120
Version Packages (#1536)
github-actions[bot] Nov 21, 2025
5cb5f28
Respect prefers-reduced-motion in carousel scroll buttons (#1537)
oscarcarlstrom Nov 21, 2025
5d2c582
chore(deps): update actions/checkout action to v5.0.1 (#1539)
renovate[bot] Nov 24, 2025
b0fb8d5
chore(deps): update falti/dotenv-action action to v1.1.5 (#1540)
renovate[bot] Nov 24, 2025
718ee9e
chore(deps): update mikefarah/yq action to v4.49.1 (#1541)
renovate[bot] Nov 24, 2025
ac0021d
fix(deps): update dependency vite to v7.2.4 (#1542)
renovate[bot] Nov 24, 2025
c24f5be
chore(deps): update pnpm to v10.23.0 (#1544)
renovate[bot] Nov 24, 2025
37ca479
fix(deps): update sanity packages (#1545)
renovate[bot] Nov 24, 2025
6dc3cf2
Reduce motion for arrow key scrolling in Carousel (#1549)
oscarcarlstrom Nov 24, 2025
2c66d4c
fix sanity studio url (#1550)
aulonm Nov 24, 2025
7a22a4a
Mark LinkList as stable (#1551)
oscarcarlstrom Nov 24, 2025
d4be27b
Add color selection and clipboard copy functionality
erland-obos Nov 17, 2025
a563bd9
Merge remote-tracking branch 'origin/feature/enable-copy-color-as-css…
erland-obos Nov 24, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 32 additions & 5 deletions apps/docs/src/routes/_docs/profil/farger.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
'use client';
import { createFileRoute } from '@tanstack/react-router';
import { useState } from 'react';
import colors from '../../../../colors';

export const Route = createFileRoute('/_docs/profil/farger')({
Expand All @@ -12,35 +14,60 @@ export const Route = createFileRoute('/_docs/profil/farger')({
});

function RouteComponent() {
const [selectedColor, setSelectedColor] = useState<string>('');
return (
<>
<h1 className="heading-l my-12">Farger</h1>
<div className="prose mb-12">
<p>Grunnmuren har {Object.keys(colors).length} forskjellige farger.</p>
<p>
Klikk på en farge for å kopiere CSS-variabelen til utklippstavlen
(eksempel: <i>var(--color-mint-lightest)</i>)
</p>
</div>

<div className="grid grid-cols-[repeat(auto-fill,130px)] content-center gap-6">
{Object.entries(colors).map(([name, value]) => (
<Color key={name} name={name} value={value} />
<Color
key={name}
name={name}
value={value}
selected={selectedColor}
onClick={() => setSelectedColor(name)}
/>
))}
</div>
</>
);
}

const Color = ({ name, value }) => {
const Color = ({ name, value, selected, onClick }) => {
function handleCopy() {
void navigator.clipboard.writeText(`var(--${name})`);
onClick();
}

return (
<div
<button
onClick={handleCopy}
type="button"
title={`Kopier var(--${name}) til utklippstavlen`}
style={{
backgroundColor: value,
// Makes sure the text has enough contrast by calculating the color based on the background color
// This will yield a color that is either black or white
// Refer to: https://til.jakelazaroff.com/css/swap-between-black-and-white-text-based-on-background-color/
color: `lch(from ${value} calc((54 - l) * infinity) 0 0)`,
border: name === 'white' ? '1px solid var(--color-blue-dark)' : '',
cursor: 'copy',
}}
className="grid h-32 w-32 items-end"
>
<span className="block p-2 text-sm">{name}</span>
</div>
<div className="flex items-end justify-between p-2">
<span className="block text-sm">
{name} {name === selected && '✅'}
</span>
</div>
</button>
);
};