Merge pull request #931 from zed-industries/add-size-token

WIP: Add the `size` token
This commit is contained in:
Nate Butler 2022-04-29 01:46:50 -04:00 committed by GitHub
commit 038f306ed8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 2175 additions and 955 deletions

440
styles/dist/core.json vendored

File diff suppressed because it is too large Load diff

240
styles/dist/dark.json vendored
View file

@ -5,104 +5,104 @@
"text": {
"primary": {
"value": "#f1f1f1",
"step": 50,
"description": "Step: 50",
"type": "color"
},
"secondary": {
"value": "#9c9c9c",
"step": 350,
"description": "Step: 350",
"type": "color"
},
"muted": {
"value": "#808080",
"step": 450,
"description": "Step: 450",
"type": "color"
},
"placeholder": {
"value": "#474747",
"step": 650,
"description": "Step: 650",
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"feature": {
"value": "#4f8ff7",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"ok": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"error": {
"value": "#f15656",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"warning": {
"value": "#f7bb57",
"step": 300,
"description": "Step: 300",
"type": "color"
},
"info": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"icon": {
"primary": {
"value": "#c6c6c6",
"step": 200,
"description": "Step: 200",
"type": "color"
},
"secondary": {
"value": "#9c9c9c",
"step": 350,
"description": "Step: 350",
"type": "color"
},
"muted": {
"value": "#555555",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"placeholder": {
"value": "#393939",
"step": 700,
"description": "Step: 700",
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"feature": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"ok": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"error": {
"value": "#eb2d2d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"warning": {
"value": "#f6a724",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"info": {
"value": "#135acd",
"step": 600,
"description": "Step: 600",
"type": "color"
}
},
@ -110,198 +110,198 @@
"100": {
"base": {
"value": "#2b2b2b",
"step": 750,
"description": "Step: 750",
"type": "color"
},
"hovered": {
"value": "#323232",
"step": 725,
"description": "Step: 725",
"type": "color"
},
"active": {
"value": "#1c1c1c",
"step": 800,
"description": "Step: 800",
"type": "color"
},
"focused": {
"value": "#404040",
"step": 675,
"description": "Step: 675",
"type": "color"
}
},
"300": {
"base": {
"value": "#1c1c1c",
"step": 800,
"description": "Step: 800",
"type": "color"
},
"hovered": {
"value": "#232323",
"step": 775,
"description": "Step: 775",
"type": "color"
},
"active": {
"value": "#2b2b2b",
"step": 750,
"description": "Step: 750",
"type": "color"
},
"focused": {
"value": "#232323",
"step": 775,
"description": "Step: 775",
"type": "color"
}
},
"500": {
"base": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"hovered": {
"value": "#ffffff14",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"active": {
"value": "#ffffff1f",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"focused": {
"value": "#151515",
"step": 825,
"description": "Step: 825",
"type": "color"
}
},
"on300": {
"base": {
"value": "#0e0e0e80",
"step": 850,
"description": "Step: 850",
"type": "color"
},
"hovered": {
"value": "#070707",
"step": 875,
"description": "Step: 875",
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"focused": {
"value": "#070707",
"step": 875,
"description": "Step: 875",
"type": "color"
}
},
"on500": {
"base": {
"value": "#0e0e0e",
"step": 850,
"description": "Step: 850",
"type": "color"
},
"hovered": {
"value": "#1c1c1c",
"step": 800,
"description": "Step: 800",
"type": "color"
},
"active": {
"value": "#232323",
"step": 775,
"description": "Step: 775",
"type": "color"
},
"focused": {
"value": "#1c1c1c",
"step": 800,
"description": "Step: 800",
"type": "color"
}
},
"ok": {
"base": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"hovered": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"active": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"focused": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
}
},
"error": {
"base": {
"value": "#f15656",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"hovered": {
"value": "#f15656",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"active": {
"value": "#f15656",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"focused": {
"value": "#f15656",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"warning": {
"base": {
"value": "#f7bb57",
"step": 300,
"description": "Step: 300",
"type": "color"
},
"hovered": {
"value": "#f7bb57",
"step": 300,
"description": "Step: 300",
"type": "color"
},
"active": {
"value": "#f7bb57",
"step": 300,
"description": "Step: 300",
"type": "color"
},
"focused": {
"value": "#f7bb57",
"step": 300,
"description": "Step: 300",
"type": "color"
}
},
"info": {
"base": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"hovered": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"active": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"focused": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
}
}
@ -309,139 +309,139 @@
"border": {
"primary": {
"value": "#070707",
"step": 875,
"description": "Step: 875",
"type": "color"
},
"secondary": {
"value": "#232323",
"step": 775,
"description": "Step: 775",
"type": "color"
},
"muted": {
"value": "#404040",
"step": 675,
"description": "Step: 675",
"type": "color"
},
"focused": {
"value": "#484bed",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"ok": {
"value": "#20b456",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"error": {
"value": "#eb2d2d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"warning": {
"value": "#de900c",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"info": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"editor": {
"background": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"indent_guide": {
"value": "#404040",
"step": 675,
"description": "Step: 675",
"type": "color"
},
"indent_guide_active": {
"value": "#232323",
"step": 775,
"description": "Step: 775",
"type": "color"
},
"line": {
"active": {
"value": "#ffffff12",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"highlighted": {
"value": "#ffffff1f",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"inserted": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"deleted": {
"value": "#f15656",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"modified": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#2472f23d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"occurrence": {
"value": "#ffffff1f",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"activeOccurrence": {
"value": "#ffffff29",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"matchingBracket": {
"value": "#ffffff1f",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"match": {
"value": "#3f15a380",
"step": 700,
"description": "Step: 700",
"type": "color"
},
"activeMatch": {
"value": "#5316e0b3",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"related": {
"value": "#151515",
"step": 825,
"description": "Step: 825",
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#474747",
"step": 650,
"description": "Step: 650",
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
}
}
@ -449,50 +449,62 @@
"syntax": {
"primary": {
"value": "#d5d5d5",
"description": "Step: 150",
"type": "color"
},
"comment": {
"value": "#aaaaaa",
"description": "Step: 300",
"type": "color"
},
"keyword": {
"value": "#4f8ff7",
"description": "Step: 400",
"type": "color"
},
"function": {
"value": "#f9da82",
"description": "Step: 200",
"type": "color"
},
"type": {
"value": "#3eeeda",
"description": "Step: 300",
"type": "color"
},
"variant": {
"value": "#53c1f5",
"description": "Step: 300",
"type": "color"
},
"property": {
"value": "#4f8ff7",
"description": "Step: 400",
"type": "color"
},
"enum": {
"value": "#ee670a",
"description": "Step: 500",
"type": "color"
},
"operator": {
"value": "#ee670a",
"description": "Step: 500",
"type": "color"
},
"string": {
"value": "#f99d5f",
"description": "Step: 300",
"type": "color"
},
"number": {
"value": "#aeef4b",
"description": "Step: 300",
"type": "color"
},
"boolean": {
"value": "#aeef4b",
"description": "Step: 300",
"type": "color"
}
},
@ -500,176 +512,176 @@
"1": {
"baseColor": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"cursorColor": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"selectionColor": {
"value": "#2472f23d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"borderColor": {
"value": "#2472f2cc",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#79ba16",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"cursorColor": {
"value": "#79ba16",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"selectionColor": {
"value": "#79ba163d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"borderColor": {
"value": "#79ba16cc",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#d430e0",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"cursorColor": {
"value": "#d430e0",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"selectionColor": {
"value": "#d430e03d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"borderColor": {
"value": "#d430e0cc",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#ee670a",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"cursorColor": {
"value": "#ee670a",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"selectionColor": {
"value": "#ee670a3d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"borderColor": {
"value": "#ee670acc",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#993bf3",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"cursorColor": {
"value": "#993bf3",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"selectionColor": {
"value": "#993bf33d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"borderColor": {
"value": "#993bf3cc",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#16d6c1",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#16d6c1",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#16d6c13d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#16d6c1cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#ef59a3",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#ef59a3",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#ef59a33d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#ef59a3cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#f7bf17",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#f7bf17",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#f7bf173d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#f7bf17cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
}

240
styles/dist/light.json vendored
View file

@ -5,104 +5,104 @@
"text": {
"primary": {
"value": "#2b2b2b",
"step": 750,
"description": "Step: 750",
"type": "color"
},
"secondary": {
"value": "#474747",
"step": 650,
"description": "Step: 650",
"type": "color"
},
"muted": {
"value": "#636363",
"step": 550,
"description": "Step: 550",
"type": "color"
},
"placeholder": {
"value": "#808080",
"step": 450,
"description": "Step: 450",
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"feature": {
"value": "#484bed",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"ok": {
"value": "#20b456",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"error": {
"value": "#eb2d2d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"warning": {
"value": "#d3a20b",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"info": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"icon": {
"primary": {
"value": "#393939",
"step": 700,
"description": "Step: 700",
"type": "color"
},
"secondary": {
"value": "#717171",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"muted": {
"value": "#9c9c9c",
"step": 350,
"description": "Step: 350",
"type": "color"
},
"placeholder": {
"value": "#aaaaaa",
"step": 300,
"description": "Step: 300",
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"feature": {
"value": "#484bed",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"ok": {
"value": "#1b9447",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"error": {
"value": "#c91818",
"step": 600,
"description": "Step: 600",
"type": "color"
},
"warning": {
"value": "#f7bf17",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"info": {
"value": "#135acd",
"step": 600,
"description": "Step: 600",
"type": "color"
}
},
@ -110,198 +110,198 @@
"100": {
"base": {
"value": "#eaeaea",
"step": 75,
"description": "Step: 75",
"type": "color"
},
"hovered": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"active": {
"value": "#d5d5d5",
"step": 150,
"description": "Step: 150",
"type": "color"
},
"focused": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
}
},
"300": {
"base": {
"value": "#f8f8f8",
"step": 25,
"description": "Step: 25",
"type": "color"
},
"hovered": {
"value": "#eaeaea",
"step": 75,
"description": "Step: 75",
"type": "color"
},
"active": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#eaeaea",
"step": 75,
"description": "Step: 75",
"type": "color"
}
},
"500": {
"base": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"hovered": {
"value": "#00000008",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"active": {
"value": "#0000000f",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"focused": {
"value": "#f1f1f1",
"step": 50,
"description": "Step: 50",
"type": "color"
}
},
"on300": {
"base": {
"value": "#f1f1f1",
"step": 50,
"description": "Step: 50",
"type": "color"
},
"hovered": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"active": {
"value": "#d5d5d5",
"step": 150,
"description": "Step: 150",
"type": "color"
},
"focused": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
}
},
"on500": {
"base": {
"value": "#f1f1f1",
"step": 50,
"description": "Step: 50",
"type": "color"
},
"hovered": {
"value": "#f8f8f8",
"step": 25,
"description": "Step: 25",
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"focused": {
"value": "#f8f8f8",
"step": 25,
"description": "Step: 25",
"type": "color"
}
},
"ok": {
"base": {
"value": "#b7f9ce",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"hovered": {
"value": "#b7f9ce",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"active": {
"value": "#b7f9ce",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#b7f9ce",
"step": 100,
"description": "Step: 100",
"type": "color"
}
},
"error": {
"base": {
"value": "#fcc6c6",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"hovered": {
"value": "#fcc6c6",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"active": {
"value": "#fcc6c6",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#fcc6c6",
"step": 100,
"description": "Step: 100",
"type": "color"
}
},
"warning": {
"base": {
"value": "#fce9b7",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"hovered": {
"value": "#fce9b7",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"active": {
"value": "#fce9b7",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#fce9b7",
"step": 100,
"description": "Step: 100",
"type": "color"
}
},
"info": {
"base": {
"value": "#c5dafc",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"hovered": {
"value": "#c5dafc",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"active": {
"value": "#c5dafc",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#c5dafc",
"step": 100,
"description": "Step: 100",
"type": "color"
}
}
@ -309,139 +309,139 @@
"border": {
"primary": {
"value": "#d5d5d5",
"step": 150,
"description": "Step: 150",
"type": "color"
},
"secondary": {
"value": "#d5d5d5",
"step": 150,
"description": "Step: 150",
"type": "color"
},
"muted": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"focused": {
"value": "#484bed",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"active": {
"value": "#b8b8b8",
"step": 250,
"description": "Step: 250",
"type": "color"
},
"ok": {
"value": "#84f2ab",
"step": 200,
"description": "Step: 200",
"type": "color"
},
"error": {
"value": "#f9a0a0",
"step": 200,
"description": "Step: 200",
"type": "color"
},
"warning": {
"value": "#f9da82",
"step": 200,
"description": "Step: 200",
"type": "color"
},
"info": {
"value": "#9ec1fa",
"step": 200,
"description": "Step: 200",
"type": "color"
}
},
"editor": {
"background": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"indent_guide": {
"value": "#e3e3e3",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"indent_guide_active": {
"value": "#d5d5d5",
"step": 150,
"description": "Step: 150",
"type": "color"
},
"line": {
"active": {
"value": "#0000000f",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"highlighted": {
"value": "#0000001f",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"inserted": {
"value": "#b7f9ce",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"deleted": {
"value": "#fcc6c6",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"modified": {
"value": "#c5dafc",
"step": 100,
"description": "Step: 100",
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#2472f23d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"occurrence": {
"value": "#0000000f",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"activeOccurrence": {
"value": "#00000029",
"step": 900,
"description": "Step: 900",
"type": "color"
},
"matchingBracket": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
},
"match": {
"value": "#fce9b7",
"step": 100,
"description": "Step: 100",
"type": "color"
},
"activeMatch": {
"value": "#f9da82",
"step": 200,
"description": "Step: 200",
"type": "color"
},
"related": {
"value": "#ffffff",
"step": 0,
"description": "Step: 0",
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#aaaaaa",
"step": 300,
"description": "Step: 300",
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"description": "Step: 900",
"type": "color"
}
}
@ -449,50 +449,62 @@
"syntax": {
"primary": {
"value": "#1c1c1c",
"description": "Step: 800",
"type": "color"
},
"comment": {
"value": "#717171",
"description": "Step: 500",
"type": "color"
},
"keyword": {
"value": "#1819a1",
"description": "Step: 700",
"type": "color"
},
"function": {
"value": "#bb550e",
"description": "Step: 600",
"type": "color"
},
"type": {
"value": "#a8820e",
"description": "Step: 600",
"type": "color"
},
"variant": {
"value": "#97142a",
"description": "Step: 700",
"type": "color"
},
"property": {
"value": "#106c4e",
"description": "Step: 700",
"type": "color"
},
"enum": {
"value": "#eb2d2d",
"description": "Step: 500",
"type": "color"
},
"operator": {
"value": "#eb2d2d",
"description": "Step: 500",
"type": "color"
},
"string": {
"value": "#eb2d2d",
"description": "Step: 500",
"type": "color"
},
"number": {
"value": "#484bed",
"description": "Step: 500",
"type": "color"
},
"boolean": {
"value": "#eb2d2d",
"description": "Step: 500",
"type": "color"
}
},
@ -500,176 +512,176 @@
"1": {
"baseColor": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"cursorColor": {
"value": "#2472f2",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"selectionColor": {
"value": "#2472f23d",
"step": 500,
"description": "Step: 500",
"type": "color"
},
"borderColor": {
"value": "#2472f2cc",
"step": 500,
"description": "Step: 500",
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#12d796",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#12d796",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#12d7963d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#12d796cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#de57e8",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#de57e8",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#de57e83d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#de57e8cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#f9812e",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#f9812e",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#f9812e3d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#f9812ecc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#b066f8",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#b066f8",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#b066f83d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#b066f8cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#16d6c1",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#16d6c1",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#16d6c13d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#16d6c1cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#ef59a3",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#ef59a3",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#ef59a33d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#ef59a3cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#f7bf17",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"cursorColor": {
"value": "#f7bf17",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"selectionColor": {
"value": "#f7bf173d",
"step": 400,
"description": "Step: 400",
"type": "color"
},
"borderColor": {
"value": "#f7bf17cc",
"step": 400,
"description": "Step: 400",
"type": "color"
}
}

View file

@ -93,11 +93,11 @@
"type": "color"
},
"hovered": {
"value": "#586e75",
"value": "#586e7552",
"type": "color"
},
"active": {
"value": "#586e75",
"value": "#586e757a",
"type": "color"
},
"focused": {
@ -111,11 +111,11 @@
"type": "color"
},
"hovered": {
"value": "#586e75",
"value": "#586e7552",
"type": "color"
},
"active": {
"value": "#586e75",
"value": "#586e757a",
"type": "color"
},
"focused": {
@ -165,15 +165,15 @@
"type": "color"
},
"hovered": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
},
"active": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
}
},
@ -260,15 +260,15 @@
"type": "color"
},
"muted": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
},
"focused": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
},
"active": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
},
"ok": {
@ -294,7 +294,7 @@
"type": "color"
},
"indent_guide": {
"value": "#586e75",
"value": "#657b83",
"type": "color"
},
"indent_guide_active": {
@ -329,11 +329,11 @@
"type": "color"
},
"occurrence": {
"value": "#657b831f",
"value": "#002b361f",
"type": "color"
},
"activeOccurrence": {
"value": "#657b8329",
"value": "#002b3629",
"type": "color"
},
"matchingBracket": {
@ -370,7 +370,7 @@
"type": "color"
},
"comment": {
"value": "#eee8d5",
"value": "#93a1a1",
"type": "color"
},
"keyword": {

View file

@ -93,11 +93,11 @@
"type": "color"
},
"hovered": {
"value": "#93a1a1",
"value": "#93a1a11f",
"type": "color"
},
"active": {
"value": "#93a1a1",
"value": "#93a1a12e",
"type": "color"
},
"focused": {
@ -111,11 +111,11 @@
"type": "color"
},
"hovered": {
"value": "#93a1a1",
"value": "#93a1a11f",
"type": "color"
},
"active": {
"value": "#93a1a1",
"value": "#93a1a12e",
"type": "color"
},
"focused": {
@ -165,15 +165,15 @@
"type": "color"
},
"hovered": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
},
"active": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
},
"focused": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
}
},
@ -260,15 +260,15 @@
"type": "color"
},
"muted": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
},
"focused": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
},
"active": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
},
"ok": {
@ -294,7 +294,7 @@
"type": "color"
},
"indent_guide": {
"value": "#93a1a1",
"value": "#839496",
"type": "color"
},
"indent_guide_active": {
@ -329,11 +329,11 @@
"type": "color"
},
"occurrence": {
"value": "#8394961f",
"value": "#fdf6e31f",
"type": "color"
},
"activeOccurrence": {
"value": "#83949629",
"value": "#fdf6e329",
"type": "color"
},
"matchingBracket": {
@ -370,7 +370,7 @@
"type": "color"
},
"comment": {
"value": "#073642",
"value": "#586e75",
"type": "color"
},
"keyword": {
@ -561,7 +561,7 @@
}
},
"shadowAlpha": {
"value": 0.32,
"value": 0.12,
"type": "number"
}
}

2054
styles/dist/tokens.json vendored

File diff suppressed because it is too large Load diff

View file

@ -2,8 +2,9 @@ import * as fs from "fs";
import * as path from "path";
import dark from "./themes/dark";
import light from "./themes/light";
import { light as solarizedLight, dark as solarizedDark } from "./themes/solarized";
import Theme from "./themes/theme";
import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
import { colors, fontFamilies, fontSizes, fontWeights, sizes } from "./tokens";
// Organize theme tokens
function themeTokens(theme: Theme) {
@ -17,54 +18,18 @@ function themeTokens(theme: Theme) {
border: theme.borderColor,
editor: theme.editor,
syntax: {
primary: {
value: theme.syntax.primary.color.value,
type: "color",
},
comment: {
value: theme.syntax.comment.color.value,
type: "color",
},
keyword: {
value: theme.syntax.keyword.color.value,
type: "color",
},
function: {
value: theme.syntax.function.color.value,
type: "color",
},
type: {
value: theme.syntax.type.color.value,
type: "color",
},
variant: {
value: theme.syntax.variant.color.value,
type: "color",
},
property: {
value: theme.syntax.property.color.value,
type: "color",
},
enum: {
value: theme.syntax.enum.color.value,
type: "color",
},
operator: {
value: theme.syntax.operator.color.value,
type: "color",
},
string: {
value: theme.syntax.string.color.value,
type: "color",
},
number: {
value: theme.syntax.number.color.value,
type: "color",
},
boolean: {
value: theme.syntax.boolean.color.value,
type: "color",
},
primary: theme.syntax.primary.color,
comment: theme.syntax.comment.color,
keyword: theme.syntax.keyword.color,
function: theme.syntax.function.color,
type: theme.syntax.type.color,
variant: theme.syntax.variant.color,
property: theme.syntax.property.color,
enum: theme.syntax.enum.color,
operator: theme.syntax.operator.color,
string: theme.syntax.string.color,
number: theme.syntax.number.color,
boolean: theme.syntax.boolean.color,
},
player: theme.player,
shadowAlpha: theme.shadowAlpha,
@ -73,14 +38,13 @@ function themeTokens(theme: Theme) {
// Organize core tokens
const coreTokens = {
color: {
...colors,
},
color: colors,
text: {
family: fontFamilies,
weight: fontWeights,
},
size: fontSizes,
size: sizes,
fontSize: fontSizes,
};
const combinedTokens: any = {};
@ -96,7 +60,7 @@ combinedTokens.core = coreTokens;
// Add each theme to the combined tokens and write ${theme}.json.
// We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
let themes = [dark, light];
let themes = [dark, light, solarizedDark, solarizedLight];
themes.forEach((theme) => {
const themePath = `${distPath}/${theme.name}.json`
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));

View file

@ -65,6 +65,27 @@ export const fontWeights = {
"black": fontWeight("black"),
}
// Standard size unit used for paddings, margins, borders, etc.
export type Size = number
export type SizeToken = Token<Size, "size">;
function size(value: Size): SizeToken {
return {
value,
type: "size"
};
}
export const sizes = {
px: size(1),
xs: size(2),
sm: size(4),
md: size(6),
lg: size(8),
xl: size(12),
};
export type Color = string;
export interface ColorToken {
value: Color,
@ -104,5 +125,6 @@ export default {
fontFamilies,
fontSizes,
fontWeights,
size,
colors,
};

View file

@ -2,7 +2,7 @@ import chroma, { Scale } from "chroma-js";
import { ColorToken } from "../tokens";
export type Color = string;
export type ColorRampStep = { value: Color; type: "color"; step: number };
export type ColorRampStep = { value: Color; type: "color"; description: string };
export type ColorRamp = {
[index: number]: ColorRampStep;
};
@ -36,7 +36,7 @@ export function colorRamp(
const step = ix * increment;
ramp[step] = {
value: color,
step,
description: `Step: ${step}`,
type: "color",
};
});