Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(web-components) Updated the default fill color to neutral layer 1 #19726

Merged
merged 3 commits into from
Sep 9, 2021
Merged

(web-components) Updated the default fill color to neutral layer 1 #19726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a35a2da
Updated the default fill color to neutral layer 1
bheston Sep 9, 2021
f247711
Change files
bheston Sep 9, 2021
8241409
Update Storybook wrapper to set foreground color
bheston Sep 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-79361e82-0819-43b5-bb93-6fd3cad41bb0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Updated the default fill color to neutral layer 1",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
10 changes: 10 additions & 0 deletions packages/web-components/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,14 @@
height: 100%;
background: var(--fill-color);
}
#root > h1,
#root > h2,
#root > h3,
#root > h4,
#root > h5,
#root > h6,
#root > p,
#root > span {
color: var(--neutral-foreground-rest);
}
</style>
257 changes: 127 additions & 130 deletions packages/web-components/src/design-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,12 +228,136 @@ export const accentPalette = create<Palette>({ name: 'accent-palette', cssCustom
PaletteRGB.create(accentBase),
);

// Neutral Layer Card Container
/** @public */
export const neutralLayerCardContainerRecipe = create<ColorRecipe>({
name: 'neutral-layer-card-container-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayerCardContainerAlgorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayerCardContainer = create<Swatch>(
'neutral-layer-card-container',
).withDefault((element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element));

// Neutral Layer Floating
/** @public */
export const neutralLayerFloatingRecipe = create<ColorRecipe>({
name: 'neutral-layer-floating-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayerFloatingAlgorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayerFloating = create<Swatch>('neutral-layer-floating').withDefault((element: HTMLElement) =>
neutralLayerFloatingRecipe.getValueFor(element).evaluate(element),
);

// Neutral Layer 1
/** @public */
export const fillColor = create<Swatch>('fill-color').withDefault(element => {
const palette = neutralPalette.getValueFor(element);
return palette.get(0);
export const neutralLayer1Recipe = create<ColorRecipe>({
name: 'neutral-layer-1-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)),
});

/** @public */
export const neutralLayer1 = create<Swatch>('neutral-layer-1').withDefault((element: HTMLElement) =>
neutralLayer1Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer1 */
export const neutralLayerL1 = neutralLayer1;

// Neutral Layer 2
/** @public */
export const neutralLayer2Recipe = create<ColorRecipe>({
name: 'neutral-layer-2-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer2Algorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
neutralFillRestDelta.getValueFor(element),
neutralFillHoverDelta.getValueFor(element),
neutralFillActiveDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayer2 = create<Swatch>('neutral-layer-2').withDefault((element: HTMLElement) =>
neutralLayer2Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer2 */
export const neutralLayerL2 = neutralLayer2;

// Neutral Layer 3
/** @public */
export const neutralLayer3Recipe = create<ColorRecipe>({
name: 'neutral-layer-3-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer3Algorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
neutralFillRestDelta.getValueFor(element),
neutralFillHoverDelta.getValueFor(element),
neutralFillActiveDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayer3 = create<Swatch>('neutral-layer-3').withDefault((element: HTMLElement) =>
neutralLayer3Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer3 */
export const neutralLayerL3 = neutralLayer3;

// Neutral Layer 4
/** @public */
export const neutralLayer4Recipe = create<ColorRecipe>({
name: 'neutral-layer-4-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer4Algorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
neutralFillRestDelta.getValueFor(element),
neutralFillHoverDelta.getValueFor(element),
neutralFillActiveDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayer4 = create<Swatch>('neutral-layer-4').withDefault((element: HTMLElement) =>
neutralLayer4Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer4 */
export const neutralLayerL4 = neutralLayer4;

/** @public */
export const fillColor = create<Swatch>('fill-color').withDefault(element => neutralLayer1.getValueFor(element));

enum ContrastTarget {
normal = 4.5,
large = 7,
Expand Down Expand Up @@ -760,130 +884,3 @@ export const neutralStrokeStrongActive = create<Swatch>('neutral-stroke-strong-a
export const neutralStrokeStrongFocus = create<Swatch>('neutral-stroke-strong-focus').withDefault(
(element: HTMLElement) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus,
);

// Neutral Layer Card Container
/** @public */
export const neutralLayerCardContainerRecipe = create<ColorRecipe>({
name: 'neutral-layer-card-container-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayerCardContainerAlgorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayerCardContainer = create<Swatch>(
'neutral-layer-card-container',
).withDefault((element: HTMLElement) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element));

// Neutral Layer Floating
/** @public */
export const neutralLayerFloatingRecipe = create<ColorRecipe>({
name: 'neutral-layer-floating-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayerFloatingAlgorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayerFloating = create<Swatch>('neutral-layer-floating').withDefault((element: HTMLElement) =>
neutralLayerFloatingRecipe.getValueFor(element).evaluate(element),
);

// Neutral Layer 1
/** @public */
export const neutralLayer1Recipe = create<ColorRecipe>({
name: 'neutral-layer-1-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)),
});

/** @public */
export const neutralLayer1 = create<Swatch>('neutral-layer-1').withDefault((element: HTMLElement) =>
neutralLayer1Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer1 */
export const neutralLayerL1 = neutralLayer1;

// Neutral Layer 2
/** @public */
export const neutralLayer2Recipe = create<ColorRecipe>({
name: 'neutral-layer-2-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer2Algorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
neutralFillRestDelta.getValueFor(element),
neutralFillHoverDelta.getValueFor(element),
neutralFillActiveDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayer2 = create<Swatch>('neutral-layer-2').withDefault((element: HTMLElement) =>
neutralLayer2Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer2 */
export const neutralLayerL2 = neutralLayer2;

// Neutral Layer 3
/** @public */
export const neutralLayer3Recipe = create<ColorRecipe>({
name: 'neutral-layer-3-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer3Algorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
neutralFillRestDelta.getValueFor(element),
neutralFillHoverDelta.getValueFor(element),
neutralFillActiveDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayer3 = create<Swatch>('neutral-layer-3').withDefault((element: HTMLElement) =>
neutralLayer3Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer3 */
export const neutralLayerL3 = neutralLayer3;

// Neutral Layer 4
/** @public */
export const neutralLayer4Recipe = create<ColorRecipe>({
name: 'neutral-layer-4-recipe',
cssCustomPropertyName: null,
}).withDefault({
evaluate: (element: HTMLElement): Swatch =>
neutralLayer4Algorithm(
neutralPalette.getValueFor(element),
baseLayerLuminance.getValueFor(element),
neutralFillLayerRestDelta.getValueFor(element),
neutralFillRestDelta.getValueFor(element),
neutralFillHoverDelta.getValueFor(element),
neutralFillActiveDelta.getValueFor(element),
),
});

/** @public */
export const neutralLayer4 = create<Swatch>('neutral-layer-4').withDefault((element: HTMLElement) =>
neutralLayer4Recipe.getValueFor(element).evaluate(element),
);
/** @public @deprecated Use neutralLayer4 */
export const neutralLayerL4 = neutralLayer4;