macOS high contrast tokens (#1390)
### Platforms Impacted - [ ] iOS - [X] macOS - [ ] win32 (Office) - [ ] windows - [ ] android ### Description of changes Standing up a token pipeline for high contrast modes on macOS. Most token values are based off of iOS, some are guesstimates based on existing controls in Office. ### Verification Ensured tokens can be consumed in the apple theme. ### Pull request checklist This PR has considered (when applicable): - [ ] Automated Tests - [ ] Documentation and examples - [ ] Keyboard Accessibility - [ ] Voiceover - [ ] Internationalization and Right-to-left Layouts
This commit is contained in:
chiuam
GitHub
Родитель
46b25d50ec
Коммит
338ce0f09b
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "adding HC tokens",
|
||||
"packageName": "@fluentui-react-native/theme-tokens",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none"
|
||||
}
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
{
|
||||
"body": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"fontWeight": "400"
|
||||
},
|
||||
"bodyStrong": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"borderless": {
|
||||
"strokeAlignment": "inner",
|
||||
"strokeColorRest": "transparent",
|
||||
"strokeColorHover": "transparent",
|
||||
"strokeColorPressed": "transparent",
|
||||
"strokeColorDisabled": "transparent",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"brandBackground": {
|
||||
"fillColorRest": "#0086f0",
|
||||
"fillColorHover": "#1890f1",
|
||||
"fillColorPressed": "#6cb8f6",
|
||||
"fillColorDisabled": "#d6d6d6",
|
||||
"fillColorSelected": "#3aa0f3"
|
||||
},
|
||||
"brandBackground2": {
|
||||
"fillColorRest": "#092c47"
|
||||
},
|
||||
"brandBackgroundStatic": {
|
||||
"fillColorRest": "#0086f0"
|
||||
},
|
||||
"brandForeground1": {
|
||||
"fillColorRest": "#0086f0",
|
||||
"fillColorHover": "#1890f1",
|
||||
"fillColorPressed": "#6cb8f6",
|
||||
"fillColorDisabled": "#5c5c5c",
|
||||
"fillColorSelected": "#3aa0f3"
|
||||
},
|
||||
"brandForeground2": {
|
||||
"fillColorRest": "#092c47"
|
||||
},
|
||||
"brandForegroundLink": {
|
||||
"fillColorRest": "#043862",
|
||||
"fillColorHover": "#092c47",
|
||||
"fillColorPressed": "#0078d4",
|
||||
"fillColorSelected": "#092c47"
|
||||
},
|
||||
"brandStroke1": {
|
||||
"strokeColorRest": "#0086f0",
|
||||
"strokeColorHover": "#1890f1",
|
||||
"strokeColorPressed": "#6cb8f6",
|
||||
"strokeColorDisabled": "#d6d6d6",
|
||||
"strokeColorSelected": "#3aa0f3",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"brandStroke2": {
|
||||
"strokeColorRest": "#004c87",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"caption": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 16,
|
||||
"fontSize": 12,
|
||||
"fontWeight": "400"
|
||||
},
|
||||
"compoundBrandBackground1": {
|
||||
"fillColorRest": "#0086f0",
|
||||
"fillColorHover": "#1890f1",
|
||||
"fillColorPressed": "#6cb8f6"
|
||||
},
|
||||
"compoundBrandForeground1": {
|
||||
"fillColorRest": "#043862",
|
||||
"fillColorHover": "#092c47",
|
||||
"fillColorPressed": "#0078d4"
|
||||
},
|
||||
"compoundBrandStroke1": {
|
||||
"strokeColorRest": "#0086f0",
|
||||
"strokeColorHover": "#1890f1",
|
||||
"strokeColorPressed": "#6cb8f6",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"display": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 92,
|
||||
"fontSize": 68,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"headline": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 28,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"largeTitle": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 52,
|
||||
"fontSize": 40,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"neutralBackground1": {
|
||||
"fillColorRest": "#000000",
|
||||
"fillColorHover": "#3d3d3d",
|
||||
"fillColorPressed": "#5c5c5c",
|
||||
"fillColorSelected": "#383838"
|
||||
},
|
||||
"neutralBackground2": {
|
||||
"fillColorRest": "#0a0a0a",
|
||||
"fillColorHover": "#333333",
|
||||
"fillColorPressed": "#141414",
|
||||
"fillColorSelected": "#2e2e2e"
|
||||
},
|
||||
"neutralBackground3": {
|
||||
"fillColorRest": "#141414",
|
||||
"fillColorHover": "#292929",
|
||||
"fillColorPressed": "#0a0a0a",
|
||||
"fillColorSelected": "#242424"
|
||||
},
|
||||
"neutralBackground4": {
|
||||
"fillColorRest": "#1f1f1f",
|
||||
"fillColorHover": "#1f1f1f",
|
||||
"fillColorPressed": "#000000",
|
||||
"fillColorSelected": "#1a1a1a"
|
||||
},
|
||||
"neutralBackground5": {
|
||||
"fillColorRest": "#5c5c5c",
|
||||
"fillColorHover": "#141414",
|
||||
"fillColorPressed": "#050505",
|
||||
"fillColorSelected": "#0f0f0f"
|
||||
},
|
||||
"neutralBackground6": {
|
||||
"fillColorRest": "#333333"
|
||||
},
|
||||
"neutralBackgroundDisabled": {
|
||||
"fillColorRest": "#d6d6d6",
|
||||
"fillColorSelected": "#9e9e9e"
|
||||
},
|
||||
"neutralBackgroundInverted": {
|
||||
"fillColorRest": "#ffffff"
|
||||
},
|
||||
"neutralForeground1": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#ffffff",
|
||||
"fillColorPressed": "#ffffff",
|
||||
"fillColorSelected": "#ffffff"
|
||||
},
|
||||
"neutralForeground2": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#ffffff",
|
||||
"fillColorPressed": "#ffffff",
|
||||
"fillColorBrandHover": "#092c47",
|
||||
"fillColorBrandPressed": "#0078d4",
|
||||
"fillColorBrandSelected": "#092c47",
|
||||
"fillColorSelected": "#ffffff"
|
||||
},
|
||||
"neutralForeground3": {
|
||||
"fillColorRest": "#d6d6d6",
|
||||
"fillColorHover": "#d6d6d6",
|
||||
"fillColorPressed": "#d6d6d6",
|
||||
"fillColorBrandHover": "#092c47",
|
||||
"fillColorBrandPressed": "#0078d4",
|
||||
"fillColorBrandSelected": "#092c47",
|
||||
"fillColorSelected": "#d6d6d6"
|
||||
},
|
||||
"neutralForeground4": {
|
||||
"fillColorRest": "#d6d6d6"
|
||||
},
|
||||
"neutralForegroundDisabled": {
|
||||
"fillColorRest": "#5c5c5c"
|
||||
},
|
||||
"neutralForegroundInverted": {
|
||||
"fillColorRest": "#000000"
|
||||
},
|
||||
"neutralForegroundInvertedLink": {
|
||||
"fillColorRest": "#292929",
|
||||
"fillColorHover": "#292929",
|
||||
"fillColorPressed": "#292929",
|
||||
"fillColorSelected": "#292929"
|
||||
},
|
||||
"neutralForegroundOnBrand": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#ffffff",
|
||||
"fillColorPressed": "#ffffff",
|
||||
"fillColorSelected": "#ffffff"
|
||||
},
|
||||
"neutralStencil1": {
|
||||
"fillColorRest": "#333333"
|
||||
},
|
||||
"neutralStencil2": {
|
||||
"fillColorRest": "#575757"
|
||||
},
|
||||
"neutralStroke1": {
|
||||
"strokeColorRest": "#adadad",
|
||||
"strokeColorHover": "#757575",
|
||||
"strokeColorPressed": "#6b6b6b",
|
||||
"strokeColorSelected": "#707070",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStroke2": {
|
||||
"strokeColorRest": "#adadad",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStroke3": {
|
||||
"strokeColorRest": "#adadad",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStrokeAccessible": {
|
||||
"strokeColorRest": "#d6d6d6",
|
||||
"strokeColorHover": "#bdbdbd",
|
||||
"strokeColorPressed": "#b3b3b3",
|
||||
"strokeColorSelected": "#0086f0",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStrokeDisabled": {
|
||||
"strokeColorRest": "#525252",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"strokeFocus1": {
|
||||
"strokeColorRest": "#000000",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"strokeFocus2": {
|
||||
"strokeColorRest": "#ffffff",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"subheadline": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 22,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"subtleBackground": {
|
||||
"fillColorRest": "transparent",
|
||||
"fillColorHover": "#3d3d3d",
|
||||
"fillColorPressed": "#1f1f1f",
|
||||
"fillColorSelected": "#383838"
|
||||
},
|
||||
"title1": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 40,
|
||||
"fontSize": 32,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"title2": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 36,
|
||||
"fontSize": 28,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"title3": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"transparentBackground": {
|
||||
"fillColorRest": "transparent",
|
||||
"fillColorHover": "transparent",
|
||||
"fillColorPressed": "transparent",
|
||||
"fillColorSelected": "transparent"
|
||||
},
|
||||
"transparentStroke": {
|
||||
"strokeAlignment": "inner",
|
||||
"strokeColorRest": "#a8a8a8",
|
||||
"strokeColorHover": "#a8a8a8",
|
||||
"strokeColorPressed": "#ebebeb",
|
||||
"strokeColorDisabled": "#d6d6d6",
|
||||
"strokeWidth": 1
|
||||
}
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,272 @@
|
|||
{
|
||||
"body": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"fontWeight": "400"
|
||||
},
|
||||
"bodyStrong": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 20,
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"borderless": {
|
||||
"strokeAlignment": "inner",
|
||||
"strokeColorRest": "transparent",
|
||||
"strokeColorHover": "transparent",
|
||||
"strokeColorPressed": "transparent",
|
||||
"strokeColorDisabled": "transparent",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"brandBackground": {
|
||||
"fillColorRest": "#0078d4",
|
||||
"fillColorHover": "#106ebe",
|
||||
"fillColorPressed": "#004578",
|
||||
"fillColorDisabled": "#e0e0e0",
|
||||
"fillColorSelected": "#005a9e"
|
||||
},
|
||||
"brandBackground2": {
|
||||
"fillColorRest": "#eff6fc"
|
||||
},
|
||||
"brandBackgroundStatic": {
|
||||
"fillColorRest": "#0078d4"
|
||||
},
|
||||
"brandForeground1": {
|
||||
"fillColorRest": "#0078d4",
|
||||
"fillColorHover": "#106ebe",
|
||||
"fillColorPressed": "#004578",
|
||||
"fillColorDisabled": "#bdbdbd",
|
||||
"fillColorSelected": "#005a9e"
|
||||
},
|
||||
"brandForeground2": {
|
||||
"fillColorRest": "#106ebe"
|
||||
},
|
||||
"brandForegroundLink": {
|
||||
"fillColorRest": "#0078d4",
|
||||
"fillColorHover": "#106ebe",
|
||||
"fillColorPressed": "#004578",
|
||||
"fillColorSelected": "#005a9e"
|
||||
},
|
||||
"brandStroke1": {
|
||||
"strokeColorRest": "#0078d4",
|
||||
"strokeColorHover": "#106ebe",
|
||||
"strokeColorPressed": "#004578",
|
||||
"strokeColorDisabled": "#e0e0e0",
|
||||
"strokeColorSelected": "#005a9e",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"brandStroke2": {
|
||||
"strokeColorRest": "#c7e0f4",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"caption": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 16,
|
||||
"fontSize": 12,
|
||||
"fontWeight": "400"
|
||||
},
|
||||
"compoundBrandBackground1": {
|
||||
"fillColorRest": "#0078d4",
|
||||
"fillColorHover": "#106ebe",
|
||||
"fillColorPressed": "#004578"
|
||||
},
|
||||
"compoundBrandForeground1": {
|
||||
"fillColorRest": "#0078d4",
|
||||
"fillColorHover": "#106ebe",
|
||||
"fillColorPressed": "#004578"
|
||||
},
|
||||
"compoundBrandStroke1": {
|
||||
"strokeColorRest": "#0078d4",
|
||||
"strokeColorHover": "#106ebe",
|
||||
"strokeColorPressed": "#004578",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"display": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 92,
|
||||
"fontSize": 68,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"headline": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 28,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"largeTitle": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 52,
|
||||
"fontSize": 40,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"neutralBackground1": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#f5f5f5",
|
||||
"fillColorPressed": "#ebebeb",
|
||||
"fillColorSelected": "#ebebeb"
|
||||
},
|
||||
"neutralBackground2": {
|
||||
"fillColorRest": "#fafafa",
|
||||
"fillColorHover": "#f0f0f0",
|
||||
"fillColorPressed": "#dbdbdb",
|
||||
"fillColorSelected": "#e6e6e6"
|
||||
},
|
||||
"neutralBackground3": {
|
||||
"fillColorRest": "#f5f5f5",
|
||||
"fillColorHover": "#ebebeb",
|
||||
"fillColorPressed": "#d6d6d6",
|
||||
"fillColorSelected": "#e0e0e0"
|
||||
},
|
||||
"neutralBackground4": {
|
||||
"fillColorRest": "#f0f0f0",
|
||||
"fillColorHover": "#fafafa",
|
||||
"fillColorPressed": "#f5f5f5",
|
||||
"fillColorSelected": "#ffffff"
|
||||
},
|
||||
"neutralBackground5": {
|
||||
"fillColorRest": "#ebebeb",
|
||||
"fillColorHover": "#f5f5f5",
|
||||
"fillColorPressed": "#f0f0f0",
|
||||
"fillColorSelected": "#fafafa"
|
||||
},
|
||||
"neutralBackground6": {
|
||||
"fillColorRest": "#e6e6e6"
|
||||
},
|
||||
"neutralBackgroundDisabled": {
|
||||
"fillColorRest": "#f0f0f0",
|
||||
"fillColorSelected": "PlatformColor(Window)"
|
||||
},
|
||||
"neutralBackgroundInverted": {
|
||||
"fillColorRest": "#616161"
|
||||
},
|
||||
"neutralForeground1": {
|
||||
"fillColorRest": "#000000",
|
||||
"fillColorHover": "#000000",
|
||||
"fillColorPressed": "#000000",
|
||||
"fillColorSelected": "#000000"
|
||||
},
|
||||
"neutralForeground2": {
|
||||
"fillColorRest": "#000000",
|
||||
"fillColorHover": "#242424",
|
||||
"fillColorPressed": "#242424",
|
||||
"fillColorBrandHover": "#106ebe",
|
||||
"fillColorBrandPressed": "#004578",
|
||||
"fillColorBrandSelected": "#005a9e",
|
||||
"fillColorSelected": "#242424"
|
||||
},
|
||||
"neutralForeground3": {
|
||||
"fillColorRest": "#000000",
|
||||
"fillColorHover": "#424242",
|
||||
"fillColorPressed": "#424242",
|
||||
"fillColorBrandHover": "#106ebe",
|
||||
"fillColorBrandPressed": "#004578",
|
||||
"fillColorBrandSelected": "#005a9e",
|
||||
"fillColorSelected": "#424242"
|
||||
},
|
||||
"neutralForeground4": {
|
||||
"fillColorRest": "#424242"
|
||||
},
|
||||
"neutralForegroundDisabled": {
|
||||
"fillColorRest": "#bdbdbd"
|
||||
},
|
||||
"neutralForegroundInverted": {
|
||||
"fillColorRest": "#ffffff"
|
||||
},
|
||||
"neutralForegroundInvertedLink": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#ffffff",
|
||||
"fillColorPressed": "#ffffff",
|
||||
"fillColorSelected": "#ffffff"
|
||||
},
|
||||
"neutralForegroundOnBrand": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#ffffff",
|
||||
"fillColorPressed": "#ffffff",
|
||||
"fillColorSelected": "#ffffff"
|
||||
},
|
||||
"neutralStencil1": {
|
||||
"fillColorRest": "#e6e6e6"
|
||||
},
|
||||
"neutralStencil2": {
|
||||
"fillColorRest": "#fafafa"
|
||||
},
|
||||
"neutralStroke1": {
|
||||
"strokeColorRest": "#616161",
|
||||
"strokeColorHover": "#c7c7c7",
|
||||
"strokeColorPressed": "#b3b3b3",
|
||||
"strokeColorSelected": "#bdbdbd",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStroke2": {
|
||||
"strokeColorRest": "#616161",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStroke3": {
|
||||
"strokeColorRest": "#616161",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStrokeAccessible": {
|
||||
"strokeColorRest": "#242424",
|
||||
"strokeColorHover": "#575757",
|
||||
"strokeColorPressed": "#4d4d4d",
|
||||
"strokeColorSelected": "#0078d4",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"neutralStrokeDisabled": {
|
||||
"strokeColorRest": "#e0e0e0",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"strokeFocus1": {
|
||||
"strokeColorRest": "#ffffff",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"strokeFocus2": {
|
||||
"strokeColorRest": "#000000",
|
||||
"strokeWidth": 1
|
||||
},
|
||||
"subheadline": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 22,
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"subtleBackground": {
|
||||
"fillColorRest": "transparent",
|
||||
"fillColorHover": "#f5f5f5",
|
||||
"fillColorPressed": "#e0e0e0",
|
||||
"fillColorSelected": "#ebebeb"
|
||||
},
|
||||
"title1": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 40,
|
||||
"fontSize": 32,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"title2": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 36,
|
||||
"fontSize": 28,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"title3": {
|
||||
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, \"Microsoft Sans Serif\"",
|
||||
"fontLineHeight": 32,
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
"transparentBackground": {
|
||||
"fillColorRest": "transparent",
|
||||
"fillColorHover": "transparent",
|
||||
"fillColorPressed": "transparent",
|
||||
"fillColorSelected": "transparent"
|
||||
},
|
||||
"transparentStroke": {
|
||||
"strokeAlignment": "inner",
|
||||
"strokeColorRest": "#858585",
|
||||
"strokeColorHover": "#666666",
|
||||
"strokeColorPressed": "#292929",
|
||||
"strokeColorDisabled": "#bdbdbd",
|
||||
"strokeWidth": 1
|
||||
}
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -103,7 +103,7 @@
|
|||
"neutralBackground1": {
|
||||
"fillColorRest": "#ffffff",
|
||||
"fillColorHover": "#f5f5f5",
|
||||
"fillColorPressed": "#e0e0e0",
|
||||
"fillColorPressed": "#ebebeb",
|
||||
"fillColorSelected": "#ebebeb"
|
||||
},
|
||||
"neutralBackground2": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
{
|
||||
"$schema": "https://raw.githubusercontent.com/microsoft/fluentui-token-pipeline/main/docs/token.schema.json",
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
"Set": {
|
||||
"NeutralForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.100" },
|
||||
"Hover": { "aliasOf": "Global.Color.Grey.100" },
|
||||
"Pressed": { "aliasOf": "Global.Color.Grey.100" },
|
||||
"Selected": { "aliasOf": "Global.Color.Grey.100" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.100" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.84" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.84" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"NeutralBackgroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Selected": { "aliasOf": "Global.Color.Grey.62" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"NeutralStrokeAccessible": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.84" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.68" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.68" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStroke3": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.68" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.32" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"TransparentStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.66" },
|
||||
"Hover": { "aliasOf": "Global.Color.Grey.66" },
|
||||
"Pressed": { "aliasOf": "Global.Color.Grey.92" },
|
||||
"Disabled": { "aliasOf": "Global.Color.Grey.84" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" },
|
||||
"Alignment": { "value": "inner" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
{
|
||||
"$schema": "https://raw.githubusercontent.com/microsoft/fluentui-token-pipeline/main/docs/token.schema.json",
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
"Set": {
|
||||
"NeutralForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.0" },
|
||||
"Hover": { "aliasOf": "Global.Color.Grey.0" },
|
||||
"Pressed": { "aliasOf": "Global.Color.Grey.0" },
|
||||
"Selected": { "aliasOf": "Global.Color.Grey.0" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.0" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.0" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.26" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"NeutralBackgroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Selected": { "aliasOf": "Global.Color.HC.Canvas" }
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeAccessible": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.14" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.38" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.38" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStroke3": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.38" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"NeutralStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.88" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" }
|
||||
}
|
||||
},
|
||||
"TransparentStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": { "aliasOf": "Global.Color.Grey.52" },
|
||||
"Hover": { "aliasOf": "Global.Color.Grey.40" },
|
||||
"Pressed": { "aliasOf": "Global.Color.Grey.16" },
|
||||
"Disabled": { "aliasOf": "Global.Color.Grey.74" }
|
||||
},
|
||||
"Width": { "aliasOf": "Global.Stroke.Width.Thin" },
|
||||
"Alignment": { "value": "inner" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,12 +39,28 @@ async function run() {
|
|||
);
|
||||
fs.unlinkSync(path.join(process.cwd(), 'packages/theming/theme-tokens/src/generated/light-macos/reactnative/tokens-controls.json'));
|
||||
|
||||
console.log('Generating macOS light high contrast mode global and alias tokens...');
|
||||
child_process.execSync(
|
||||
'yarn transform-tokens --in ./packages/theming/theme-tokens/src/pipeline-input/token-input.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-global.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-brand-light.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-light.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-light.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-light-hc.macos.json --out ./packages/theming/theme-tokens/src/generated/light-high-contrast-macos --p reactnative',
|
||||
);
|
||||
fs.unlinkSync(
|
||||
path.join(process.cwd(), 'packages/theming/theme-tokens/src/generated/light-high-contrast-macos/reactnative/tokens-controls.json'),
|
||||
);
|
||||
|
||||
console.log('Generating macOS dark mode global and alias tokens...');
|
||||
child_process.execSync(
|
||||
'yarn transform-tokens --in ./packages/theming/theme-tokens/src/pipeline-input/token-input.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-global.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-brand-dark.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-dark.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-dark.macos.json --out ./packages/theming/theme-tokens/src/generated/dark-macos --p reactnative',
|
||||
);
|
||||
fs.unlinkSync(path.join(process.cwd(), 'packages/theming/theme-tokens/src/generated/dark-macos/reactnative/tokens-controls.json'));
|
||||
|
||||
console.log('Generating macOS dark high contrast mode global and alias tokens...');
|
||||
child_process.execSync(
|
||||
'yarn transform-tokens --in ./packages/theming/theme-tokens/src/pipeline-input/token-input.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-global.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-brand-dark.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-dark.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-dark.macos.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-dark-hc.macos.json --out ./packages/theming/theme-tokens/src/generated/dark-high-contrast-macos --p reactnative',
|
||||
);
|
||||
fs.unlinkSync(
|
||||
path.join(process.cwd(), 'packages/theming/theme-tokens/src/generated/dark-high-contrast-macos/reactnative/tokens-controls.json'),
|
||||
);
|
||||
|
||||
console.log('Generating android global tokens...');
|
||||
child_process.execSync(
|
||||
'yarn transform-tokens --in ./packages/theming/theme-tokens/src/pipeline-input/token-input.json --in ./packages/theming/theme-tokens/src/pipeline-input/token-input-brand.android.json --out ./packages/theming/theme-tokens/src/generated/global-android --p reactnative',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче