davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
tolaria/design/status-color-picker.pen
Luca Rossi 47acd1c30d feat: status color picker — assign persistent color per status value (#120) 
Add color dot indicators to each status option in the dropdown. Clicking
the dot opens an inline palette of 8 accent colors (from the design system).
Color assignments persist in localStorage and override the built-in defaults.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2026-02-27 14:27:43 +00:00

619 lines
18 KiB
Plaintext
Raw Permalink Blame History

{
"children": [
{
"children": [
{
"content": "Status Dropdown — Color Dots",
"fill": "$--foreground",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600",
"id": "1wdqT",
"name": "title1",
"type": "text"
},
{
"content": "Each status option shows a color dot on the left. Clicking the dot opens the color palette picker.",
"fill": "$--muted-foreground",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal",
"id": "PsCXR",
"lineHeight": 1.5,
"name": "desc1",
"textGrowth": "fixed-width",
"type": "text",
"width": 272
},
{
"children": [
{
"children": [
{
"content": "Type a status...",
"fill": "$--muted-foreground",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal",
"id": "VyDsY",
"name": "searchText",
"type": "text"
}
],
"id": "tim0g",
"name": "searchBar",
"padding": [
8,
10
],
"stroke": {
"fill": "$--border",
"thickness": {
"bottom": 1
}
},
"type": "frame",
"width": "fill_container"
},
{
"children": [
{
"content": "FROM VAULT",
"fill": "$--muted-foreground",
"fontFamily": "IBM Plex Mono",
"fontSize": 9,
"fontWeight": "500",
"id": "Bn3lU",
"letterSpacing": 1.2,
"name": "labelText",
"type": "text"
}
],
"id": "CB90c",
"name": "sectionLabel",
"padding": [
4,
10
],
"type": "frame",
"width": "fill_container"
},
{
"alignItems": "center",
"children": [
{
"fill": "$--accent-green",
"height": 10,
"id": "8uSm6",
"name": "dot1",
"type": "ellipse",
"width": 10
},
{
"children": [
{
"content": "ACTIVE",
"fill": "$--accent-green",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"id": "h4OER",
"letterSpacing": 1.2,
"name": "pill1text",
"type": "text"
}
],
"cornerRadius": 16,
"fill": "$--accent-green-light",
"id": "k7sSo",
"name": "pill1",
"padding": [
1,
6
],
"type": "frame"
}
],
"cornerRadius": 4,
"gap": 8,
"id": "IZrMP",
"name": "Status Option - Active",
"padding": [
5,
10
],
"type": "frame",
"width": "fill_container"
},
{
"alignItems": "center",
"children": [
{
"fill": "$--accent-red",
"height": 10,
"id": "sSEfx",
"name": "dot2",
"type": "ellipse",
"width": 10
},
{
"children": [
{
"content": "BLOCKED",
"fill": "$--accent-red",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"id": "61jBJ",
"letterSpacing": 1.2,
"name": "pill2text",
"type": "text"
}
],
"cornerRadius": 16,
"fill": "$--accent-red-light",
"id": "ozLQM",
"name": "pill2",
"padding": [
1,
6
],
"type": "frame"
}
],
"cornerRadius": 4,
"gap": 8,
"id": "B3Im8",
"name": "Status Option - Blocked",
"padding": [
5,
10
],
"type": "frame",
"width": "fill_container"
},
{
"alignItems": "center",
"children": [
{
"fill": "$--accent-yellow",
"height": 10,
"id": "2mTmp",
"name": "dot3",
"type": "ellipse",
"width": 10
},
{
"children": [
{
"content": "DRAFT",
"fill": "$--accent-yellow",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"id": "evl7l",
"letterSpacing": 1.2,
"name": "pill3text",
"type": "text"
}
],
"cornerRadius": 16,
"fill": "$--accent-yellow-light",
"id": "6Fuxw",
"name": "pill3",
"padding": [
1,
6
],
"type": "frame"
}
],
"cornerRadius": 4,
"fill": "$--muted",
"gap": 8,
"id": "TwUBA",
"name": "Status Option - Draft (hover)",
"padding": [
5,
10
],
"type": "frame",
"width": "fill_container"
}
],
"cornerRadius": 8,
"fill": "$--background",
"id": "DT2gn",
"layout": "vertical",
"name": "Dropdown Container",
"stroke": {
"fill": "$--border",
"thickness": 1
},
"type": "frame",
"width": "fill_container"
}
],
"fill": "$--background",
"gap": 16,
"id": "2N2BP",
"layout": "vertical",
"name": "1 — Status Dropdown with Color Dots",
"padding": 24,
"type": "frame",
"width": 320,
"x": 0,
"y": 0
},
{
"children": [
{
"content": "Color Picker — Expanded",
"fill": "$--foreground",
"fontFamily": "Inter",
"fontSize": 16,
"fontWeight": "600",
"id": "zPCnI",
"name": "title2",
"type": "text"
},
{
"content": "Clicking a color dot expands the palette inline. The 8 accent colors from the design system are shown as clickable swatches. A 'Default' option resets to the built-in color.",
"fill": "$--muted-foreground",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal",
"id": "TtaTt",
"lineHeight": 1.5,
"name": "desc2",
"textGrowth": "fixed-width",
"type": "text",
"width": 272
},
{
"children": [
{
"alignItems": "center",
"children": [
{
"fill": "$--accent-yellow",
"height": 10,
"id": "FRKg5",
"name": "dotActive",
"stroke": {
"fill": "$--foreground",
"thickness": 2
},
"type": "ellipse",
"width": 10
},
{
"children": [
{
"content": "DRAFT",
"fill": "$--accent-yellow",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"id": "rA60a",
"letterSpacing": 1.2,
"name": "pillActiveText",
"type": "text"
}
],
"cornerRadius": 16,
"fill": "$--accent-yellow-light",
"id": "15D2Q",
"name": "pillActive",
"padding": [
1,
6
],
"type": "frame"
}
],
"cornerRadius": 4,
"fill": "$--muted",
"gap": 8,
"id": "3QplJ",
"name": "Draft Option Row",
"padding": [
5,
10
],
"type": "frame",
"width": "fill_container"
},
{
"children": [
{
"content": "ASSIGN COLOR",
"fill": "$--muted-foreground",
"fontFamily": "IBM Plex Mono",
"fontSize": 9,
"fontWeight": "500",
"id": "5yhS8",
"letterSpacing": 1.2,
"name": "paletteLabel",
"type": "text"
},
{
"alignItems": "center",
"children": [
{
"children": [
{
"content": "Default",
"fill": "$--muted-foreground",
"fontFamily": "Inter",
"fontSize": 10,
"fontWeight": "normal",
"id": "Q2ZwX",
"name": "defText",
"type": "text"
}
],
"cornerRadius": 10,
"id": "Sgzjz",
"name": "defBtn",
"padding": [
2,
6
],
"stroke": {
"fill": "$--border",
"thickness": 1
},
"type": "frame"
},
{
"fill": "$--accent-red",
"height": 16,
"id": "sOgl3",
"name": "sw1",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-orange",
"height": 16,
"id": "kqj6G",
"name": "sw2",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-yellow",
"height": 16,
"id": "luCEG",
"name": "sw3",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-green",
"height": 16,
"id": "KmBPE",
"name": "sw4",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-blue",
"height": 16,
"id": "IsLDd",
"name": "sw5",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-purple",
"height": 16,
"id": "M6bwU",
"name": "sw6",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-teal",
"height": 16,
"id": "LKPIO",
"name": "sw7",
"type": "ellipse",
"width": 16
},
{
"fill": "$--accent-pink",
"height": 16,
"id": "bFQCa",
"name": "sw8",
"type": "ellipse",
"width": 16
}
],
"gap": 6,
"id": "zwiKV",
"name": "Swatches Row",
"type": "frame"
}
],
"fill": "$--muted",
"gap": 8,
"id": "ZUL7a",
"layout": "vertical",
"name": "Color Palette",
"padding": [
8,
10
],
"type": "frame",
"width": "fill_container"
},
{
"fill": "$--border",
"height": 1,
"id": "hsnvv",
"name": "divider",
"type": "rectangle",
"width": "fill_container"
},
{
"alignItems": "center",
"children": [
{
"fill": "$--accent-green",
"height": 10,
"id": "Mddih",
"name": "otherDot",
"type": "ellipse",
"width": 10
},
{
"children": [
{
"content": "ACTIVE",
"fill": "$--accent-green",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"id": "pVJ5Z",
"letterSpacing": 1.2,
"name": "otherText",
"type": "text"
}
],
"cornerRadius": 16,
"fill": "$--accent-green-light",
"id": "bHWx0",
"name": "otherPill",
"padding": [
1,
6
],
"type": "frame"
}
],
"cornerRadius": 4,
"gap": 8,
"id": "EpnwC",
"name": "Other Option",
"padding": [
5,
10
],
"type": "frame",
"width": "fill_container"
}
],
"cornerRadius": 8,
"fill": "$--background",
"id": "f2Adq",
"layout": "vertical",
"name": "Dropdown with Picker",
"stroke": {
"fill": "$--border",
"thickness": 1
},
"type": "frame",
"width": "fill_container"
}
],
"fill": "$--background",
"gap": 16,
"id": "jbCuz",
"layout": "vertical",
"name": "2 — Color Picker Expanded",
"padding": 24,
"type": "frame",
"width": 320,
"x": 360,
"y": 0
}
],
"variables": {
"--accent-blue": {
"type": "color",
"value": "#155DFF"
},
"--accent-blue-light": {
"type": "color",
"value": "#155DFF14"
},
"--accent-green": {
"type": "color",
"value": "#38A169"
},
"--accent-green-light": {
"type": "color",
"value": "#38A16919"
},
"--accent-orange": {
"type": "color",
"value": "#D9730D"
},
"--accent-orange-light": {
"type": "color",
"value": "#D9730D19"
},
"--accent-pink": {
"type": "color",
"value": "#D53F8C"
},
"--accent-pink-light": {
"type": "color",
"value": "#D53F8C19"
},
"--accent-purple": {
"type": "color",
"value": "#805AD5"
},
"--accent-purple-light": {
"type": "color",
"value": "#805AD519"
},
"--accent-red": {
"type": "color",
"value": "#E53E3E"
},
"--accent-red-light": {
"type": "color",
"value": "#E53E3E19"
},
"--accent-teal": {
"type": "color",
"value": "#319795"
},
"--accent-teal-light": {
"type": "color",
"value": "#31979519"
},
"--accent-yellow": {
"type": "color",
"value": "#D69E2E"
},
"--accent-yellow-light": {
"type": "color",
"value": "#D69E2E19"
},
"--background": {
"type": "color",
"value": "#FFFFFF"
},
"--border": {
"type": "color",
"value": "#E9E9E7"
},
"--foreground": {
"type": "color",
"value": "#37352F"
},
"--muted": {
"type": "color",
"value": "#F5F5F4"
},
"--muted-foreground": {
"type": "color",
"value": "#787774"
}
}
}
Reference in New Issue View Git Blame Copy Permalink