Skip to content

Commit

Permalink
fix(design-tokens): Changes to Design Tokens
Browse files Browse the repository at this point in the history
Added tokens:
+ brand.lineHeight.100percent
+ typography.subtitle.fontSize.lg
+ typography.subtitle.fontSize.md
+ typography.subtitle.fontWeight.default
+ typography.subtitle.lineHeight.lg
+ typography.subtitle.lineHeight.md
+ typography.subtitle.letterSpacing.default







# Figma User: Stephanie Zeng
  • Loading branch information
stephanie56 committed Dec 10, 2024
1 parent d7633cd commit 3a38489
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 30 deletions.
2 changes: 1 addition & 1 deletion packages/foundations/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@repo/foundations",
"version": "4.1.0",
"version": "4.2.0",
"description": "",
"main": "index.js",
"exports": {
Expand Down
228 changes: 199 additions & 29 deletions packages/foundations/tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,13 @@
"description": "",
"value": "-1"
},
{
"name": "brand.lineHeight.100percent",
"key": "--brand-line-height-100percent",
"type": "lineHeight",
"description": "",
"value": "100"
},
{
"name": "brand.letterSpacing.tighter",
"key": "--brand-letter-spacing-tighter",
Expand Down Expand Up @@ -1018,6 +1025,13 @@
"description": "",
"value": "-1"
},
{
"name": "brand.lineHeight.100percent",
"key": "--brand-line-height-100percent",
"type": "lineHeight",
"description": "",
"value": "120"
},
{
"name": "brand.letterSpacing.tighter",
"key": "--brand-letter-spacing-tighter",
Expand Down Expand Up @@ -1643,20 +1657,20 @@
"description": "",
"value": "{--brand-spacing-60}"
},
{
"name": "breakpoint.action.gap.default",
"key": "--breakpoint-action-gap-default",
"type": "gap",
"description": "",
"value": "{--brand-spacing-80}"
},
{
"name": "breakpoint.static.padding.md",
"key": "--breakpoint-static-padding-md",
"type": "padding",
"description": "",
"value": "{--density-padding-md}"
},
{
"name": "breakpoint.action.gap.default",
"key": "--breakpoint-action-gap-default",
"type": "gap",
"description": "",
"value": "{--brand-spacing-80}"
},
{
"name": "breakpoint.action.borderRadius.sm",
"key": "--breakpoint-action-border-radius-sm",
Expand Down Expand Up @@ -1768,6 +1782,48 @@
"type": "letterSpacing",
"description": "",
"value": "{--brand-letter-spacing-regular}"
},
{
"name": "typography.subtitle.fontSize.lg",
"key": "--typography-subtitle-font-size-lg",
"type": "fontSize",
"description": "",
"value": "{--brand-font-size-sm}"
},
{
"name": "typography.subtitle.fontSize.md",
"key": "--typography-subtitle-font-size-md",
"type": "fontSize",
"description": "",
"value": "{--brand-font-size-regular}"
},
{
"name": "typography.subtitle.fontWeight.default",
"key": "--typography-subtitle-font-weight-default",
"type": "fontWeight",
"description": "",
"value": "{--brand-font-weight-bold}"
},
{
"name": "typography.subtitle.lineHeight.lg",
"key": "--typography-subtitle-line-height-lg",
"type": "lineHeight",
"description": "",
"value": "{--brand-line-height-5}"
},
{
"name": "typography.subtitle.lineHeight.md",
"key": "--typography-subtitle-line-height-md",
"type": "lineHeight",
"description": "",
"value": "{--brand-line-height-4}"
},
{
"name": "typography.subtitle.letterSpacing.default",
"key": "--typography-subtitle-letter-spacing-default",
"type": "letterSpacing",
"description": "",
"value": "{--brand-letter-spacing-regular}"
}
]
},
Expand Down Expand Up @@ -1912,20 +1968,20 @@
"description": "",
"value": "{--brand-spacing-80}"
},
{
"name": "breakpoint.action.gap.default",
"key": "--breakpoint-action-gap-default",
"type": "gap",
"description": "",
"value": "{--brand-spacing-160}"
},
{
"name": "breakpoint.static.padding.md",
"key": "--breakpoint-static-padding-md",
"type": "padding",
"description": "",
"value": "{--density-padding-lg}"
},
{
"name": "breakpoint.action.gap.default",
"key": "--breakpoint-action-gap-default",
"type": "gap",
"description": "",
"value": "{--brand-spacing-160}"
},
{
"name": "breakpoint.action.borderRadius.sm",
"key": "--breakpoint-action-border-radius-sm",
Expand Down Expand Up @@ -2037,6 +2093,48 @@
"type": "letterSpacing",
"description": "",
"value": "{--brand-letter-spacing-regular}"
},
{
"name": "typography.subtitle.fontSize.lg",
"key": "--typography-subtitle-font-size-lg",
"type": "fontSize",
"description": "",
"value": "{--brand-font-size-regular}"
},
{
"name": "typography.subtitle.fontSize.md",
"key": "--typography-subtitle-font-size-md",
"type": "fontSize",
"description": "",
"value": "{--brand-font-size-lg}"
},
{
"name": "typography.subtitle.fontWeight.default",
"key": "--typography-subtitle-font-weight-default",
"type": "fontWeight",
"description": "",
"value": "{--brand-font-weight-bold}"
},
{
"name": "typography.subtitle.lineHeight.lg",
"key": "--typography-subtitle-line-height-lg",
"type": "lineHeight",
"description": "",
"value": "{--brand-line-height-6}"
},
{
"name": "typography.subtitle.lineHeight.md",
"key": "--typography-subtitle-line-height-md",
"type": "lineHeight",
"description": "",
"value": "{--brand-line-height-5}"
},
{
"name": "typography.subtitle.letterSpacing.default",
"key": "--typography-subtitle-letter-spacing-default",
"type": "letterSpacing",
"description": "",
"value": "{--brand-letter-spacing-regular}"
}
]
}
Expand All @@ -2055,26 +2153,98 @@
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.60817 8.19257V4.34122M2.60817 4.34122L8.77033 0.875L11.8514 2.60811M2.60817 4.34122L5.68925 6.21666M14.9325 4.34122V11.5304L8.51357 15.125M14.9325 4.34122L8.51357 7.93581M14.9325 4.34122L11.8514 2.60811M8.51357 15.125L6.45952 13.8412M8.51357 15.125V7.93581M8.51357 7.93581L5.68925 6.21666M5.68925 6.21666L11.8514 2.60811M1.06763 11.7872L4.91898 9.47635M1.06763 14.3547L6.45952 11.0169\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {
"Size": "S",
"Icon type": "Stroke",
"Icon colour": "Default",
"Frame type": "None",
"Frame fill": "None"
}
"source": "<svg width=\"72\" height=\"72\" viewBox=\"0 0 72 72\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.70272 36.9392V18.1554M9.70272 18.1554L39.7568 1.25L54.7838 9.7027M9.70272 18.1554L24.7297 27.3023M69.8108 18.1554V53.2185L38.5045 70.75M69.8108 18.1554L38.5045 35.6869M69.8108 18.1554L54.7838 9.7027M38.5045 70.75L28.4865 64.4887M38.5045 70.75V35.6869M38.5045 35.6869L24.7297 27.3023M24.7297 27.3023L54.7838 9.7027M2.18921 54.4707L20.973 43.2004M2.18921 66.9932L28.4865 50.714\" stroke=\"#00549A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"72\" height=\"72\" viewBox=\"0 0 72 72\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M9.70272 36.9392V18.1554M9.70272 18.1554L39.7568 1.25L54.7838 9.7027M9.70272 18.1554L24.7297 27.3023M69.8108 18.1554V53.2185L38.5045 70.75M69.8108 18.1554L38.5045 35.6869M69.8108 18.1554L54.7838 9.7027M38.5045 70.75L28.4865 64.4887M38.5045 70.75V35.6869M38.5045 35.6869L24.7297 27.3023M24.7297 27.3023L54.7838 9.7027M2.18921 54.4707L20.973 43.2004M2.18921 66.9932L28.4865 50.714\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"72\" height=\"72\" viewBox=\"0 0 72 72\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 36C1 16.67 16.67 1 36 1C55.33 1 71 16.67 71 36C71 55.33 55.33 71 36 71C16.67 71 1 55.33 1 36Z\" stroke=\"#00549A\" stroke-width=\"2\"/>\n<path d=\"M21.8108 36.5068V26.3716M21.8108 26.3716L38.027 17.25L46.1351 21.8108M21.8108 26.3716L29.9189 31.307M54.2432 26.3716V45.2905L37.3513 54.75M54.2432 26.3716L37.3513 35.8311M54.2432 26.3716L46.1351 21.8108M37.3513 54.75L31.9459 51.3716M37.3513 54.75V35.8311M37.3513 35.8311L29.9189 31.307M29.9189 31.307L46.1351 21.8108M17.7567 45.9662L27.8919 39.8851M17.7567 52.723L31.9459 43.9392\" stroke=\"#00549A\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.35136 32.8446V15.9527M8.35136 15.9527L35.3784 0.75L48.8919 8.35135M8.35136 15.9527L21.8649 24.1783M62.4054 15.9527V47.4842L34.2523 63.25M62.4054 15.9527L34.2523 31.7185M62.4054 15.9527L48.8919 8.35135M34.2523 63.25L25.2433 57.6194M34.2523 63.25V31.7185M34.2523 31.7185L21.8649 24.1783M21.8649 24.1783L48.8919 8.35135M1.5946 48.6104L18.4865 38.4752M1.5946 59.8716L25.2433 45.232\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.40545 24.6284V12.0608M6.40545 12.0608L26.5136 0.75L36.5676 6.40541M6.40545 12.0608L16.4595 18.1807M46.6217 12.0608V35.5203L25.6757 47.25M46.6217 12.0608L25.6757 23.7905M46.6217 12.0608L36.5676 6.40541M25.6757 47.25L18.973 43.0608M25.6757 47.25V23.7905M25.6757 23.7905L16.4595 18.1807M16.4595 18.1807L36.5676 6.40541M1.37842 36.3581L13.946 28.8176M1.37842 44.7365L18.973 33.8446\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.45941 16.4122V8.16892M4.45941 8.16892L17.6486 0.75L24.2432 4.45946M4.45941 8.16892L11.054 12.183M30.8378 8.16892V23.5563L17.099 31.25M30.8378 8.16892L17.099 15.8626M30.8378 8.16892L24.2432 4.45946M17.099 31.25L12.7027 28.5023M17.099 31.25V15.8626M17.099 15.8626L11.054 12.183M11.054 12.183L24.2432 4.45946M1.16211 24.1059L9.40535 19.1599M1.16211 29.6013L12.7027 22.4572\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.48651 12.3041V6.22297M3.48651 6.22297L13.2162 0.75L18.0811 3.48649M3.48651 6.22297L8.35137 9.1842M22.946 6.22297V17.5743L12.8108 23.25M22.946 6.22297L12.8108 11.8986M22.946 6.22297L18.0811 3.48649M12.8108 23.25L9.56759 21.223M12.8108 23.25V11.8986M12.8108 11.8986L8.35137 9.1842M8.35137 9.1842L18.0811 3.48649M1.05408 17.9797L7.13516 14.3311M1.05408 22.0338L9.56759 16.7635\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {
"Size": "M",
"Icon type": "Stroke",
"Icon colour": "Default",
"Frame type": "None",
"Frame fill": "None"
}
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.60817 8.19257V4.34122M2.60817 4.34122L8.77033 0.875L11.8514 2.60811M2.60817 4.34122L5.68925 6.21666M14.9325 4.34122V11.5304L8.51357 15.125M14.9325 4.34122L8.51357 7.93581M14.9325 4.34122L11.8514 2.60811M8.51357 15.125L6.45952 13.8412M8.51357 15.125V7.93581M8.51357 7.93581L5.68925 6.21666M5.68925 6.21666L11.8514 2.60811M1.06763 11.7872L4.91898 9.47635M1.06763 14.3547L6.45952 11.0169\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.60817 8.19257V4.34122M2.60817 4.34122L8.77033 0.875L11.8514 2.60811M2.60817 4.34122L5.68925 6.21666M14.9325 4.34122V11.5304L8.51357 15.125M14.9325 4.34122L8.51357 7.93581M14.9325 4.34122L11.8514 2.60811M8.51357 15.125L6.45952 13.8412M8.51357 15.125V7.93581M8.51357 7.93581L5.68925 6.21666M5.68925 6.21666L11.8514 2.60811M1.06763 11.7872L4.91898 9.47635M1.06763 14.3547L6.45952 11.0169\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.48651 12.3041V6.22297M3.48651 6.22297L13.2162 0.75L18.0811 3.48649M3.48651 6.22297L8.35137 9.1842M22.946 6.22297V17.5743L12.8108 23.25M22.946 6.22297L12.8108 11.8986M22.946 6.22297L18.0811 3.48649M12.8108 23.25L9.56759 21.223M12.8108 23.25V11.8986M12.8108 11.8986L8.35137 9.1842M8.35137 9.1842L18.0811 3.48649M1.05408 17.9797L7.13516 14.3311M1.05408 22.0338L9.56759 16.7635\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.45947 16.4122V8.16892M4.45947 8.16892L17.6487 0.75L24.2433 4.45946M4.45947 8.16892L11.0541 12.183M30.8378 8.16892V23.5563L17.0991 31.25M30.8378 8.16892L17.0991 15.8626M30.8378 8.16892L24.2433 4.45946M17.0991 31.25L12.7027 28.5023M17.0991 31.25V15.8626M17.0991 15.8626L11.0541 12.183M11.0541 12.183L24.2433 4.45946M1.16217 24.1059L9.40541 19.1599M1.16217 29.6013L12.7027 22.4572\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.40538 24.6284V12.0608M6.40538 12.0608L26.5135 0.75L36.5675 6.40541M6.40538 12.0608L16.4594 18.1807M46.6216 12.0608V35.5203L25.6757 47.25M46.6216 12.0608L25.6757 23.7905M46.6216 12.0608L36.5675 6.40541M25.6757 47.25L18.973 43.0608M25.6757 47.25V23.7905M25.6757 23.7905L16.4594 18.1807M16.4594 18.1807L36.5675 6.40541M1.37836 36.3581L13.9459 28.8176M1.37836 44.7365L18.973 33.8446\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.35136 32.8446V15.9527M8.35136 15.9527L35.3784 0.75L48.8919 8.35135M8.35136 15.9527L21.8649 24.1783M62.4054 15.9527V47.4842L34.2523 63.25M62.4054 15.9527L34.2523 31.7185M62.4054 15.9527L48.8919 8.35135M34.2523 63.25L25.2433 57.6194M34.2523 63.25V31.7185M34.2523 31.7185L21.8649 24.1783M21.8649 24.1783L48.8919 8.35135M1.5946 48.6104L18.4865 38.4752M1.5946 59.8716L25.2433 45.232\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0.75 16C0.75 7.57766 7.57766 0.75 16 0.75C24.4223 0.75 31.25 7.57766 31.25 16C31.25 24.4223 24.4223 31.25 16 31.25C7.57766 31.25 0.75 24.4223 0.75 16Z\" stroke=\"#00549A\" stroke-width=\"1.5\"/>\n<path d=\"M10.6081 16.1926V12.3412M10.6081 12.3412L16.7703 8.875L19.8513 10.6081M10.6081 12.3412L13.6892 14.2167M22.9324 12.3412V19.5304L16.5135 23.125M22.9324 12.3412L16.5135 15.9358M22.9324 12.3412L19.8513 10.6081M16.5135 23.125L14.4595 21.8412M16.5135 23.125V15.9358M16.5135 15.9358L13.6892 14.2167M13.6892 14.2167L19.8513 10.6081M9.06757 19.7872L12.9189 17.4764M9.06757 22.3547L14.4595 19.0169\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0.75 24C0.75 11.1594 11.1594 0.75 24 0.75C36.8406 0.75 47.25 11.1594 47.25 24C47.25 36.8406 36.8406 47.25 24 47.25C11.1594 47.25 0.75 36.8406 0.75 24Z\" stroke=\"#00549A\" stroke-width=\"1.5\"/>\n<path d=\"M15.4865 24.3041V18.223M15.4865 18.223L25.2162 12.75L30.0811 15.4865M15.4865 18.223L20.3514 21.1842M34.946 18.223V29.5743L24.8108 35.25M34.946 18.223L24.8108 23.8986M34.946 18.223L30.0811 15.4865M24.8108 35.25L21.5676 33.223M24.8108 35.25V23.8986M24.8108 23.8986L20.3514 21.1842M20.3514 21.1842L30.0811 15.4865M13.0541 29.9797L19.1352 26.3311M13.0541 34.0338L21.5676 28.7635\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
},
{
"name": "Box - Moving",
"description": "",
"source": "<svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0.75 32C0.75 14.7411 14.7411 0.75 32 0.75C49.2589 0.75 63.25 14.7411 63.25 32C63.25 49.2589 49.2589 63.25 32 63.25C14.7411 63.25 0.75 49.2589 0.75 32Z\" stroke=\"#00549A\" stroke-width=\"1.5\"/>\n<path d=\"M18.3784 32.4865V22.7568M18.3784 22.7568L33.946 14L41.7298 18.3784M18.3784 22.7568L26.1622 27.4947M49.5135 22.7568V40.9189L33.2973 50M49.5135 22.7568L33.2973 31.8378M49.5135 22.7568L41.7298 18.3784M33.2973 50L28.1081 46.7568M33.2973 50V31.8378M33.2973 31.8378L26.1622 27.4947M26.1622 27.4947L41.7298 18.3784M14.4865 41.5676L24.2162 35.7297M14.4865 48.0541L28.1081 39.6216\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"properties": {}
}
]
}

0 comments on commit 3a38489

Please sign in to comment.