Generate theme for @fluentui/react-components (#52)
* Add Single Source of Truth (SSoT) JSON matching Web/React * Remove generated shared alias colors * Generate global and alias color tokens for @fluentui/react-theme@9 * Remove dots in alias token names * Rename strokeAccessible* to transparentStroke* * Change values for neutralForeground4 and neutralForegroundInverted * Add NeutralBackgroundInverted, NeutralStencil1 and NeutralStencil2 aliases * Fix tests * Add npm command to transform the new SSoT * Address PR comments
This commit is contained in:
Miroslav Stastny
GitHub
Родитель
547798195d
Коммит
4e429183b3
|
|
@ -24,11 +24,12 @@ jobs:
|
|||
run: |
|
||||
npm install
|
||||
npm run build --if-present
|
||||
|
||||
|
||||
- name: Run tests
|
||||
run: |
|
||||
npm run test --if-present
|
||||
npm run transform
|
||||
npm run transform-light
|
||||
|
||||
- name: Save test transform output as artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
|
|
|
|||
|
|
@ -16,3 +16,5 @@ Thumbs.db
|
|||
# Lockfiles
|
||||
package-deps.json
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
"build": "tsc",
|
||||
"inc": "tsc --incremental --tsBuildInfoFile .tsbuildinfo",
|
||||
"watch": "tsc --watch",
|
||||
"transform": "node dist/cli --in src/demo/fluentui.json --out build"
|
||||
"transform": "node dist/cli --in src/demo/fluentui.json --out build",
|
||||
"transform-light": "node dist/cli --in src/demo/fluentui-global.json --in src/demo/fluentui-light.json --out build/light"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,613 @@
|
|||
{
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
|
||||
"Set": {
|
||||
"Neutral": {
|
||||
"NeutralForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.68"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.60"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.36"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForegroundLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.30"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.30"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundOnBrand": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInvertedLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.16"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.24"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.12"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.22"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.12"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.18"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.16"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.4"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.4"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.12"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Black"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground5": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Black"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.2"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.6"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground6": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"SubtleBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.22"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.18"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Pressed": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Selected": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.34"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.40"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackgroundStatic": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.40"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeAccessible": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.68"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.74"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.70"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.40"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.46"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.42"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.44"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.32"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke3": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.24"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.30"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.26"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeInteractive": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Black"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.24)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.28)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.12)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.14)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.40)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.48)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.30)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.25)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,385 @@
|
|||
{
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
"Global": {
|
||||
"Color": {
|
||||
"Brand": {
|
||||
"Shade": {
|
||||
"60": {
|
||||
"value": "#092c47"
|
||||
},
|
||||
"50": {
|
||||
"value": "#043862"
|
||||
},
|
||||
"40": {
|
||||
"value": "#004578"
|
||||
},
|
||||
"30": {
|
||||
"value": "#004c87"
|
||||
},
|
||||
"20": {
|
||||
"value": "#005a9e"
|
||||
},
|
||||
"10": {
|
||||
"value": "#106ebe"
|
||||
}
|
||||
},
|
||||
"Primary": {
|
||||
"value": "#0078d4"
|
||||
},
|
||||
"Tint": {
|
||||
"10": {
|
||||
"value": "#2899f5"
|
||||
},
|
||||
"20": {
|
||||
"value": "#3aa0f3"
|
||||
},
|
||||
"30": {
|
||||
"value": "#6cb8f6"
|
||||
},
|
||||
"40": {
|
||||
"value": "#c7e0f4"
|
||||
},
|
||||
"50": {
|
||||
"value": "#deecf9"
|
||||
},
|
||||
"60": {
|
||||
"value": "#eff6fc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"Grey": {
|
||||
"generate": {
|
||||
"type": "lightness0to100by2",
|
||||
"value": "grey"
|
||||
}
|
||||
},
|
||||
"White": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"Black": {
|
||||
"value": "#000000"
|
||||
},
|
||||
"hcHyperlink": {
|
||||
"value": "#ffff00"
|
||||
},
|
||||
"hcHighlight": {
|
||||
"value": "#1aebff"
|
||||
},
|
||||
"hcDisabled": {
|
||||
"value": "#3ff23f"
|
||||
},
|
||||
"hcCanvas": {
|
||||
"value": "#000000"
|
||||
},
|
||||
"hcCanvasText": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"hcHighlightText": {
|
||||
"value": "#000000"
|
||||
},
|
||||
"hcButtonText": {
|
||||
"value": "#000000"
|
||||
},
|
||||
"hcButtonFace": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
|
||||
"DarkRed": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#750b1c"
|
||||
}
|
||||
},
|
||||
"Burgundy": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#a4262c"
|
||||
}
|
||||
},
|
||||
"Cranberry": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#c50f1f"
|
||||
}
|
||||
},
|
||||
"Red": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#d13438"
|
||||
}
|
||||
},
|
||||
"DarkOrange": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#da3b01"
|
||||
}
|
||||
},
|
||||
"Bronze": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#a74109"
|
||||
}
|
||||
},
|
||||
"Pumpkin": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#ca5010"
|
||||
}
|
||||
},
|
||||
"Orange": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#f7630c"
|
||||
}
|
||||
},
|
||||
"Peach": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#ff8c00"
|
||||
}
|
||||
},
|
||||
"Marigold": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#eaa300"
|
||||
}
|
||||
},
|
||||
"Yellow": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#fde300"
|
||||
}
|
||||
},
|
||||
"Gold": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#c19c00"
|
||||
}
|
||||
},
|
||||
"Brass": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#986f0b"
|
||||
}
|
||||
},
|
||||
"Brown": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#8e562e"
|
||||
}
|
||||
},
|
||||
"DarkBrown": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#4d291c"
|
||||
}
|
||||
},
|
||||
"Lime": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#73aa24"
|
||||
}
|
||||
},
|
||||
"Forest": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#498205"
|
||||
}
|
||||
},
|
||||
"Seafoam": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#00cc6a"
|
||||
}
|
||||
},
|
||||
"LightGreen": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#13a10e"
|
||||
}
|
||||
},
|
||||
"Green": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#107c10"
|
||||
}
|
||||
},
|
||||
"DarkGreen": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#0b6a0b"
|
||||
}
|
||||
},
|
||||
"LightTeal": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#00b7c3"
|
||||
}
|
||||
},
|
||||
"Teal": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#038387"
|
||||
}
|
||||
},
|
||||
"DarkTeal": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#006666"
|
||||
}
|
||||
},
|
||||
"Cyan": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#0099bc"
|
||||
}
|
||||
},
|
||||
"Steel": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#005b70"
|
||||
}
|
||||
},
|
||||
"LightBlue": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#3a96dd"
|
||||
}
|
||||
},
|
||||
"Blue": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#0078d4"
|
||||
}
|
||||
},
|
||||
"RoyalBlue": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#004e8c"
|
||||
}
|
||||
},
|
||||
"DarkBlue": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#003966"
|
||||
}
|
||||
},
|
||||
"Cornflower": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#4f6bed"
|
||||
}
|
||||
},
|
||||
"Navy": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#0027b4"
|
||||
}
|
||||
},
|
||||
"Lavender": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#7160e8"
|
||||
}
|
||||
},
|
||||
"Purple": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#5c2e91"
|
||||
}
|
||||
},
|
||||
"DarkPurple": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#401b6c"
|
||||
}
|
||||
},
|
||||
"Orchid": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#8764b8"
|
||||
}
|
||||
},
|
||||
"Grape": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#881798"
|
||||
}
|
||||
},
|
||||
"Berry": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#c239b3"
|
||||
}
|
||||
},
|
||||
"Lilac": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#b146c2"
|
||||
}
|
||||
},
|
||||
"Pink": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#e43ba6"
|
||||
}
|
||||
},
|
||||
"HotPink": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#e3008c"
|
||||
}
|
||||
},
|
||||
"Magenta": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#bf0077"
|
||||
}
|
||||
},
|
||||
"Plum": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#77004d"
|
||||
}
|
||||
},
|
||||
"Beige": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#7a7574"
|
||||
}
|
||||
},
|
||||
"Mink": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#5d5a58"
|
||||
}
|
||||
},
|
||||
"Silver": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#859599"
|
||||
}
|
||||
},
|
||||
"Platinum": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#69797e"
|
||||
}
|
||||
},
|
||||
"Anchor": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#394146"
|
||||
}
|
||||
},
|
||||
"Charcoal": {
|
||||
"generate": {
|
||||
"type": "fluentsharedcolors",
|
||||
"value": "#393939"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,612 @@
|
|||
{
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
"Set": {
|
||||
"Neutral": {
|
||||
"NeutralForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.hcHighlightText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcDisabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForegroundLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcButtonText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundOnBrand": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcButtonText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInvertedLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHyperlink"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground5": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground6": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"SubtleBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.52"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcButtonFace"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackgroundStatic": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcButtonFace"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeAccessible": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke3": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcDisabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvasText"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeInteractive": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcDisabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcCanvas"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.hcHighlight"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.24)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.28)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.12)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.14)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.40)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.48)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.30)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.25)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,612 @@
|
|||
{
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
"Set": {
|
||||
"Neutral": {
|
||||
"NeutralForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.26"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.38"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.26"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.26"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.26"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.44"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.74"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForegroundLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.40"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundOnBrand": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInvertedLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.96"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.88"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.92"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.98"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.94"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.86"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.90"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.96"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.92"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.88"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.94"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.98"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.96"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground5": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.92"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.96"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.94"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.98"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground6": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.90"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.38"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"SubtleBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.96"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.88"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.92"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Pressed": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Selected": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.94"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.90"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.98"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.40"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackgroundStatic": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.60"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeAccessible": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.38"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.34"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.30"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.82"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.78"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.70"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.74"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.88"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke3": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.94"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.40"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.88"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeInteractive": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Black"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.12)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.14)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.06)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.07)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.20)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.24)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.30)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.25)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,613 @@
|
|||
{
|
||||
"Meta": {
|
||||
"FluentUITokensVersion": 0
|
||||
},
|
||||
|
||||
"Set": {
|
||||
"Neutral": {
|
||||
"NeutralForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.68"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.84"
|
||||
},
|
||||
"BrandHover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"BrandPressed": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"BrandSelected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForeground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.60"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.36"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForegroundLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.30"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandForeground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.30"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundOnBrand": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralForegroundInvertedLink": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.16"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.24"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.12"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.22"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.22"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.10"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground3": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.12"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.18"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground4": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.16"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.4"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.14"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground5": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.4"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.12"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Black"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackground6": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundInverted": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"SubtleBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.22"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.18"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Hover": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Pressed": {
|
||||
"value": "transparent"
|
||||
},
|
||||
"Selected": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralBackgroundDisabled": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil1": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStencil2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.34"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.40"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandBackground": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackgroundStatic": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandBackground2": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.40"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeAccessible": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.68"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.74"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.70"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.40"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Grey.46"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Grey.42"
|
||||
},
|
||||
"Selected": {
|
||||
"aliasOf": "Global.Color.Grey.44"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.32"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStroke3": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.24"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandStroke2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Shade.30"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"CompoundBrandStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.10"
|
||||
},
|
||||
"Hover": {
|
||||
"aliasOf": "Global.Color.Brand.Tint.20"
|
||||
},
|
||||
"Pressed": {
|
||||
"aliasOf": "Global.Color.Brand.Primary"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Grey.26"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStroke": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeInteractive": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"TransparentStrokeDisabled": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus1": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.Black"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"StrokeFocus2": {
|
||||
"Stroke": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"aliasOf": "Global.Color.White"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.24)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.28)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.12)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyLighter": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.14)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowAmbientDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.40)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"NeutralShadowKeyDarker": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.48)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowAmbient": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.30)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"BrandShadowKey": {
|
||||
"Fill": {
|
||||
"Color": {
|
||||
"Rest": {
|
||||
"value": "rgba(0,0,0,0.25)"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
import StyleDictionary from "style-dictionary"
|
||||
import _ from "lodash"
|
||||
|
||||
StyleDictionary.registerFilter({
|
||||
name: "isGlobalColor",
|
||||
matcher: prop =>
|
||||
{
|
||||
const rootName = prop.path[0]
|
||||
return rootName === "Global" && new Set(prop.path).has("Color")
|
||||
},
|
||||
})
|
||||
|
||||
StyleDictionary.registerFilter({
|
||||
name: "isAliasColor",
|
||||
matcher: prop =>
|
||||
{
|
||||
const rootName = prop.path[0]
|
||||
return rootName === "Set" && new Set(prop.path).has("Color")
|
||||
},
|
||||
})
|
||||
|
||||
// These are hacks - can we update the input JSON structure to match the expected output?
|
||||
StyleDictionary.registerTransform({
|
||||
name: "fluentui/react/aliasCssVariable",
|
||||
type: "value",
|
||||
matcher: prop => "resolvedAliasPath" in prop,
|
||||
transformer: prop =>
|
||||
{
|
||||
const aliasPath = prop.resolvedAliasPath.map(_.camelCase)
|
||||
// var(--global-color-brand-shade-60) -> var(--global-palette-brand-shade60)
|
||||
// ^^^^^ ^ ^^^^^^^
|
||||
if (aliasPath.length === 5
|
||||
&& aliasPath[0] === "global"
|
||||
&& aliasPath[1] === "color"
|
||||
&& aliasPath[2] === "brand"
|
||||
)
|
||||
{
|
||||
return `var(--global-palette-brand-${aliasPath[3]}${aliasPath[4]})`
|
||||
}
|
||||
|
||||
// var(--global-color-grey-94) -> var(--global-palette-grey-94)
|
||||
// ^^^^^ ^^^^^^^
|
||||
if (aliasPath.length === 4
|
||||
&& aliasPath[0] === "global"
|
||||
&& aliasPath[1] === "color"
|
||||
)
|
||||
{
|
||||
return `var(--global-palette-${aliasPath[2]}-${aliasPath[3]})`
|
||||
}
|
||||
|
||||
|
||||
return `var(--${aliasPath.join("-")})`
|
||||
},
|
||||
})
|
||||
|
||||
StyleDictionary.registerTransform({
|
||||
name: "fluentui/react/globalColorName",
|
||||
type: "name",
|
||||
matcher: prop => (
|
||||
prop.path[0] === "Global"
|
||||
),
|
||||
transformer: prop =>
|
||||
{
|
||||
return prop.path.slice(2).map(_.camelCase).join(".")
|
||||
},
|
||||
})
|
||||
|
||||
StyleDictionary.registerTransform({
|
||||
name: "fluentui/react/aliasColorName",
|
||||
type: "name",
|
||||
matcher: prop => (
|
||||
prop.path[0] === "Set"
|
||||
),
|
||||
transformer: prop =>
|
||||
{
|
||||
let suffix = prop.path[prop.path.length - 1]
|
||||
if (suffix === "Rest")
|
||||
{
|
||||
suffix = ""
|
||||
}
|
||||
return `${_.camelCase(prop.path[1])}.${_.camelCase(prop.path[2])}${suffix}`
|
||||
},
|
||||
})
|
||||
|
||||
StyleDictionary.registerTransformGroup({
|
||||
name: "fluentui/react",
|
||||
transforms: ["fluentui/name/kebab", "fluentui/react/aliasCssVariable", "fluentui/react/globalColorName", "fluentui/react/aliasColorName"],
|
||||
})
|
||||
|
||||
StyleDictionary.registerFormat({
|
||||
name: "react/colors/global",
|
||||
formatter: (dictionary, config) =>
|
||||
{
|
||||
const colors: any = {}
|
||||
dictionary.allProperties.forEach(prop =>
|
||||
{
|
||||
_.setWith(colors, prop.name, prop.value, Object)
|
||||
})
|
||||
|
||||
const brand = colors.brand ? {
|
||||
...(_.mapKeys(colors.brand.shade, (v, k) => `shade${k}`)),
|
||||
primary: colors.brand.primary,
|
||||
...(_.mapKeys(colors.brand.tint, (v, k) => `tint${k}`)),
|
||||
} : {}
|
||||
delete colors.brand
|
||||
|
||||
const sharedColorNames: string[] = []
|
||||
return [
|
||||
"import { GlobalSharedColors, ColorVariants, BrandVariants } from '../../types';",
|
||||
"",
|
||||
`export const brand: BrandVariants = ${JSON.stringify(brand, null, 2)}`,
|
||||
"",
|
||||
...Object.keys(colors).map(colorName =>
|
||||
{
|
||||
if (colors[colorName].shade50 && !colors[colorName].shade60)
|
||||
{
|
||||
sharedColorNames.push(colorName)
|
||||
return `const ${colorName}: ColorVariants = ${JSON.stringify(colors[colorName], null, 2)}`
|
||||
}
|
||||
return `export const ${colorName} = ${JSON.stringify(colors[colorName], null, 2)}`
|
||||
}),
|
||||
`export const sharedColors: GlobalSharedColors = {
|
||||
${sharedColorNames.join(",\n")}
|
||||
}`
|
||||
].join("\n\n")
|
||||
}
|
||||
})
|
||||
|
||||
StyleDictionary.registerFormat({
|
||||
name: "react/colors/alias",
|
||||
formatter: (dictionary, config) =>
|
||||
{
|
||||
const colors: any = {neutral: {}}
|
||||
dictionary.allProperties.forEach(prop =>
|
||||
{
|
||||
_.setWith(colors, prop.name, prop, Object)
|
||||
})
|
||||
|
||||
return [
|
||||
"import { GlobalSharedColors, NeutralColorTokens, SharedColorTokens } from '../types';",
|
||||
"",
|
||||
"export const neutralColorTokens: NeutralColorTokens = {",
|
||||
...Object.keys(colors.neutral).map(colorName =>
|
||||
{
|
||||
const prop = colors.neutral[colorName]
|
||||
|
||||
return `\t${colorName}: '${prop.value}', // ${prop.original.value} ${prop.resolvedAliasPath && prop.resolvedAliasPath.join(".")}`
|
||||
}),
|
||||
"};",
|
||||
].join("\n")
|
||||
},
|
||||
})
|
||||
|
|
@ -56,7 +56,9 @@ StyleDictionary.registerTransform({
|
|||
}
|
||||
else
|
||||
{
|
||||
sdAttributes = getSDAttributes(prop.path[2], prop.path[3])
|
||||
sdAttributes = prop.path[prop.path.length - 2] === 'Color'
|
||||
? getSDAttributes(prop.path[prop.path.length - 3], prop.path[prop.path.length - 2])
|
||||
: getSDAttributes(prop.path[2], prop.path[3])
|
||||
}
|
||||
|
||||
if (!sdAttributes)
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import "./fluentui-css"
|
|||
import "./fluentui-html"
|
||||
import "./fluentui-json"
|
||||
import "./fluentui-ios"
|
||||
import "./fluentui-react"
|
||||
import "./fluentui-reactnative"
|
||||
import "./fluentui-winui"
|
||||
|
||||
|
|
@ -130,6 +131,21 @@ export const buildOutputs = (input: string[] | string, outputPath: string, platf
|
|||
}
|
||||
}
|
||||
)
|
||||
|
||||
if (!platforms || platforms.includes("react")) buildOnePlatform(tokens, null,
|
||||
{
|
||||
react:
|
||||
{
|
||||
transformGroup: "fluentui/react",
|
||||
buildPath: `${outputPath}/react/`,
|
||||
files: [
|
||||
{ destination: "global-colors.ts", format: "react/colors/global", filter: "isGlobalColor" },
|
||||
{ destination: "alias-colors.ts", format: "react/colors/alias", filter: "isAliasColor" },
|
||||
],
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
const buildOnePlatform = (tokens: any, platformOverride: SupportedPlatform | null, platformConfig: Record<string, unknown>): void =>
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@ export const SupportedPlatforms =
|
|||
ios: true,
|
||||
reactnative: true,
|
||||
winui: true,
|
||||
react: true,
|
||||
}
|
||||
export type SupportedPlatform = keyof typeof SupportedPlatforms
|
||||
export type SupportedPlatformList<ValueType> =
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче