@genesislcap/rapid-design-system 14.446.2 → 14.447.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1692 -258
- package/dist/dts/_common/color.hex.d.ts +1 -0
- package/dist/dts/_common/color.hex.d.ts.map +1 -1
- package/dist/dts/_config/configure.d.ts +13 -0
- package/dist/dts/_config/configure.d.ts.map +1 -0
- package/dist/dts/_config/index.d.ts +1 -0
- package/dist/dts/_config/index.d.ts.map +1 -1
- package/dist/dts/_config/tokens/error-palette.d.ts +3 -0
- package/dist/dts/_config/tokens/error-palette.d.ts.map +1 -0
- package/dist/dts/_config/tokens/index.d.ts +5 -0
- package/dist/dts/_config/tokens/index.d.ts.map +1 -1
- package/dist/dts/_config/tokens/secondary.d.ts +7 -0
- package/dist/dts/_config/tokens/secondary.d.ts.map +1 -0
- package/dist/dts/_config/tokens/semantic-palette.factory.d.ts +42 -0
- package/dist/dts/_config/tokens/semantic-palette.factory.d.ts.map +1 -0
- package/dist/dts/_config/tokens/success-palette.d.ts +3 -0
- package/dist/dts/_config/tokens/success-palette.d.ts.map +1 -0
- package/dist/dts/_config/tokens/tertiary-palette.d.ts +7 -0
- package/dist/dts/_config/tokens/tertiary-palette.d.ts.map +1 -0
- package/dist/dts/_config/tokens/warning-palette.d.ts +3 -0
- package/dist/dts/_config/tokens/warning-palette.d.ts.map +1 -0
- package/dist/dts/_config/values/color.d.ts +5 -0
- package/dist/dts/_config/values/color.d.ts.map +1 -1
- package/dist/dts/_config/values/defaults.d.ts.map +1 -1
- package/dist/dts/button/button.styles.d.ts.map +1 -1
- package/dist/dts/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/dts/react.d.ts +8 -8
- package/dist/esm/_common/color.hex.js +1 -0
- package/dist/esm/_config/configure.js +31 -0
- package/dist/esm/_config/index.js +1 -0
- package/dist/esm/_config/tokens/error-palette.js +4 -0
- package/dist/esm/_config/tokens/index.js +5 -0
- package/dist/esm/_config/tokens/secondary.js +11 -0
- package/dist/esm/_config/tokens/semantic-palette.factory.js +145 -0
- package/dist/esm/_config/tokens/success-palette.js +4 -0
- package/dist/esm/_config/tokens/tertiary-palette.js +11 -0
- package/dist/esm/_config/tokens/warning-palette.js +4 -0
- package/dist/esm/_config/values/color.js +5 -0
- package/dist/esm/_config/values/defaults.js +21 -1
- package/dist/esm/button/button.styles.js +176 -38
- package/dist/esm/dialog/dialog.styles.js +2 -3
- package/dist/esm/flyout/flyout.styles.js +1 -1
- package/dist/react.cjs +5 -5
- package/dist/react.mjs +4 -4
- package/package.json +11 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.hex.d.ts","sourceRoot":"","sources":["../../../src/_common/color.hex.ts"],"names":[],"mappings":"AACA,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,YAAY;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,IAAI,YAAY;IAChB,GAAG,YAAY;IACf,IAAI,YAAY;IAEhB,SAAS,YAAY;IACrB,SAAS,YAAY;IACrB,SAAS,YAAY;IACrB,aAAa,YAAY;IACzB,KAAK,YAAY;IACjB,UAAU,YAAY;IACtB,GAAG,YAAY;IACf,QAAQ,YAAY;IACpB,UAAU,YAAY;IACtB,eAAe,YAAY;IAC3B,MAAM,YAAY;IAClB,WAAW,YAAY;IACvB,KAAK,YAAY;IACjB,MAAM,YAAY;IAClB,OAAO,YAAY;IACnB,YAAY,YAAY;IACxB,KAAK,YAAY;IACjB,UAAU,YAAY;IACtB,OAAO,YAAY;IACnB,YAAY,YAAY;IACxB,GAAG,YAAY;IACf,QAAQ,YAAY;CACrB"}
|
|
1
|
+
{"version":3,"file":"color.hex.d.ts","sourceRoot":"","sources":["../../../src/_common/color.hex.ts"],"names":[],"mappings":"AACA,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,YAAY;IACjB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,YAAY;IACpB,IAAI,YAAY;IAChB,GAAG,YAAY;IACf,IAAI,YAAY;IAEhB,SAAS,YAAY;IACrB,SAAS,YAAY;IACrB,SAAS,YAAY;IACrB,aAAa,YAAY;IACzB,KAAK,YAAY;IACjB,UAAU,YAAY;IACtB,GAAG,YAAY;IACf,QAAQ,YAAY;IACpB,UAAU,YAAY;IACtB,eAAe,YAAY;IAC3B,MAAM,YAAY;IAClB,WAAW,YAAY;IACvB,KAAK,YAAY;IACjB,MAAM,YAAY;IAClB,OAAO,YAAY;IACnB,YAAY,YAAY;IACxB,KAAK,YAAY;IACjB,UAAU,YAAY;IACtB,OAAO,YAAY;IACnB,YAAY,YAAY;IACxB,GAAG,YAAY;IACf,QAAQ,YAAY;CACrB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { DesignTokensConfig } from '@genesislcap/foundation-ui';
|
|
2
|
+
/**
|
|
3
|
+
* Extends {@link configureDesignSystem} with support for the `secondary`, `tertiary`, `error`,
|
|
4
|
+
* `success`, and `warning` color palettes.
|
|
5
|
+
*
|
|
6
|
+
* Pass any of these entries under `design_tokens.color` in your config to override the defaults.
|
|
7
|
+
* Omitting any of them is safe — existing apps are unaffected and each token falls back to its
|
|
8
|
+
* built-in default.
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
11
|
+
*/
|
|
12
|
+
export declare const configureRapidDesignSystem: (provider: HTMLElement, config: Partial<DesignTokensConfig>) => void;
|
|
13
|
+
//# sourceMappingURL=configure.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../../../src/_config/configure.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,kBAAkB,EAEnB,MAAM,4BAA4B,CAAC;AAOpC;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,EACrB,QAAQ,OAAO,CAAC,kBAAkB,CAAC,KAClC,IAUF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/_config/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/_config/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const errorPalette: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Palette<import("@microsoft/fast-components").Swatch>>, errorFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, errorFillRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, errorFillRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorFillHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorFillActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnErrorRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorLargeRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnErrorRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnErrorFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorForegroundRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, errorForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, errorForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>;
|
|
2
|
+
export { errorPalette, errorFillRestDelta, errorFillHoverDelta, errorFillActiveDelta, errorFillFocusDelta, errorForegroundRestDelta, errorForegroundHoverDelta, errorForegroundActiveDelta, errorForegroundFocusDelta, errorFillRecipe, errorFillRest, errorFillHover, errorFillActive, errorFillFocus, foregroundOnErrorRecipe, foregroundOnErrorRest, foregroundOnErrorHover, foregroundOnErrorActive, foregroundOnErrorFocus, foregroundOnErrorLargeRecipe, foregroundOnErrorRestLarge, foregroundOnErrorHoverLarge, foregroundOnErrorActiveLarge, foregroundOnErrorFocusLarge, errorForegroundRecipe, errorForegroundRest, errorForegroundHover, errorForegroundActive, errorForegroundFocus, };
|
|
3
|
+
//# sourceMappingURL=error-palette.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"error-palette.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/error-palette.ts"],"names":[],"mappings":"AAGA,QAAA,MACW,YAAY,kJACN,kBAAkB,+DACjB,mBAAmB,+DAClB,oBAAoB,+DACrB,mBAAmB,+DACd,wBAAwB,+DACvB,yBAAyB,+DACxB,0BAA0B,+DAC3B,yBAAyB,+DACnC,eAAe,oHACjB,aAAa,oGACZ,cAAc,oGACb,eAAe,oGAChB,cAAc,oGACL,uBAAuB,yGACzB,qBAAqB,oGACpB,sBAAsB,oGACrB,uBAAuB,oGACxB,sBAAsB,oGAChB,4BAA4B,yGAC9B,0BAA0B,oGACzB,2BAA2B,oGAC1B,4BAA4B,oGAC7B,2BAA2B,oGACjC,qBAAqB,oHACvB,mBAAmB,oGAClB,oBAAoB,oGACnB,qBAAqB,oGACtB,oBAAoB,kGACO,CAAC;AAE/C,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC5B,0BAA0B,EAC1B,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC3B,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,GACrB,CAAC"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
export * from './default';
|
|
2
2
|
export * from './custom';
|
|
3
|
+
export * from './secondary';
|
|
4
|
+
export * from './tertiary-palette';
|
|
5
|
+
export * from './error-palette';
|
|
6
|
+
export * from './success-palette';
|
|
7
|
+
export * from './warning-palette';
|
|
3
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Swatch, SwatchRGB } from '@microsoft/fast-components';
|
|
2
|
+
export declare const defaultSecondaryColor: SwatchRGB;
|
|
3
|
+
/** @public */
|
|
4
|
+
export declare const secondaryColor: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
5
|
+
declare const secondaryPalette: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Palette<Swatch>>, secondaryFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, secondaryFillRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, secondaryFillRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryFillHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryFillActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnSecondaryRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryLargeRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnSecondaryRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnSecondaryFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryForegroundRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, secondaryForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, secondaryForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
6
|
+
export { secondaryPalette, secondaryFillRestDelta, secondaryFillHoverDelta, secondaryFillActiveDelta, secondaryFillFocusDelta, secondaryForegroundRestDelta, secondaryForegroundHoverDelta, secondaryForegroundActiveDelta, secondaryForegroundFocusDelta, secondaryFillRecipe, secondaryFillRest, secondaryFillHover, secondaryFillActive, secondaryFillFocus, foregroundOnSecondaryRecipe, foregroundOnSecondaryRest, foregroundOnSecondaryHover, foregroundOnSecondaryActive, foregroundOnSecondaryFocus, foregroundOnSecondaryLargeRecipe, foregroundOnSecondaryRestLarge, foregroundOnSecondaryHoverLarge, foregroundOnSecondaryActiveLarge, foregroundOnSecondaryFocusLarge, secondaryForegroundRecipe, secondaryForegroundRest, secondaryForegroundHover, secondaryForegroundActive, secondaryForegroundFocus, };
|
|
7
|
+
//# sourceMappingURL=secondary.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"secondary.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/secondary.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAM/D,eAAO,MAAM,qBAAqB,WAIjC,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,cAAc,6DACuD,CAAC;AAEnF,QAAA,MACW,gBAAgB,6GACV,sBAAsB,+DACrB,uBAAuB,+DACtB,wBAAwB,+DACzB,uBAAuB,+DAClB,4BAA4B,+DAC3B,6BAA6B,+DAC5B,8BAA8B,+DAC/B,6BAA6B,+DACvC,mBAAmB,oHACrB,iBAAiB,+DAChB,kBAAkB,+DACjB,mBAAmB,+DACpB,kBAAkB,+DACT,2BAA2B,yGAC7B,yBAAyB,+DACxB,0BAA0B,+DACzB,2BAA2B,+DAC5B,0BAA0B,+DACpB,gCAAgC,yGAClC,8BAA8B,+DAC7B,+BAA+B,+DAC9B,gCAAgC,+DACjC,+BAA+B,+DACrC,yBAAyB,oHAC3B,uBAAuB,+DACtB,wBAAwB,+DACvB,yBAAyB,+DAC1B,wBAAwB,6DACW,CAAC;AAEvD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,2BAA2B,EAC3B,yBAAyB,EACzB,0BAA0B,EAC1B,2BAA2B,EAC3B,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,+BAA+B,EAC/B,gCAAgC,EAChC,+BAA+B,EAC/B,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,wBAAwB,GACzB,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ColorRecipe, InteractiveColorRecipe, Palette, Swatch } from '@microsoft/fast-components';
|
|
2
|
+
import { DesignToken } from '@microsoft/fast-foundation';
|
|
3
|
+
/**
|
|
4
|
+
* Creates the full set of interactive palette tokens for a semantic colour (fill, foreground,
|
|
5
|
+
* foreground-on variants) mirroring FAST's built-in accent/neutral pattern.
|
|
6
|
+
*
|
|
7
|
+
* @param cssPrefix - Token name prefix, e.g. `'error'` → `--error-fill-rest`
|
|
8
|
+
* @param sourceColorToken - The swatch token whose value drives the palette
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export declare function createSemanticPalette(cssPrefix: string, sourceColorToken: DesignToken<Swatch>): {
|
|
12
|
+
palette: import("@microsoft/fast-foundation").CSSDesignToken<Palette<Swatch>>;
|
|
13
|
+
fillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
14
|
+
fillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
15
|
+
fillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
16
|
+
fillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
17
|
+
foregroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
18
|
+
foregroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
19
|
+
foregroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
20
|
+
foregroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
|
|
21
|
+
fillRecipe: import("@microsoft/fast-foundation").CSSDesignToken<InteractiveColorRecipe>;
|
|
22
|
+
fillRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
23
|
+
fillHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
24
|
+
fillActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
25
|
+
fillFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
26
|
+
foregroundOnRecipe: import("@microsoft/fast-foundation").CSSDesignToken<ColorRecipe>;
|
|
27
|
+
foregroundOnRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
28
|
+
foregroundOnHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
29
|
+
foregroundOnActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
30
|
+
foregroundOnFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
31
|
+
foregroundOnLargeRecipe: import("@microsoft/fast-foundation").CSSDesignToken<ColorRecipe>;
|
|
32
|
+
foregroundOnRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
33
|
+
foregroundOnHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
34
|
+
foregroundOnActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
35
|
+
foregroundOnFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
36
|
+
foregroundRecipe: import("@microsoft/fast-foundation").CSSDesignToken<InteractiveColorRecipe>;
|
|
37
|
+
foregroundRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
38
|
+
foregroundHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
39
|
+
foregroundActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
40
|
+
foregroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=semantic-palette.factory.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"semantic-palette.factory.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/semantic-palette.factory.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,sBAAsB,EAEtB,OAAO,EAEP,MAAM,EAOP,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAiFzD;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkK7F"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const successPalette: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Palette<import("@microsoft/fast-components").Swatch>>, successFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, successFillRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, successFillRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successFillHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successFillActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnSuccessRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessLargeRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnSuccessRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnSuccessFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successForegroundRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, successForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, successForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>;
|
|
2
|
+
export { successPalette, successFillRestDelta, successFillHoverDelta, successFillActiveDelta, successFillFocusDelta, successForegroundRestDelta, successForegroundHoverDelta, successForegroundActiveDelta, successForegroundFocusDelta, successFillRecipe, successFillRest, successFillHover, successFillActive, successFillFocus, foregroundOnSuccessRecipe, foregroundOnSuccessRest, foregroundOnSuccessHover, foregroundOnSuccessActive, foregroundOnSuccessFocus, foregroundOnSuccessLargeRecipe, foregroundOnSuccessRestLarge, foregroundOnSuccessHoverLarge, foregroundOnSuccessActiveLarge, foregroundOnSuccessFocusLarge, successForegroundRecipe, successForegroundRest, successForegroundHover, successForegroundActive, successForegroundFocus, };
|
|
3
|
+
//# sourceMappingURL=success-palette.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"success-palette.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/success-palette.ts"],"names":[],"mappings":"AAGA,QAAA,MACW,cAAc,kJACR,oBAAoB,+DACnB,qBAAqB,+DACpB,sBAAsB,+DACvB,qBAAqB,+DAChB,0BAA0B,+DACzB,2BAA2B,+DAC1B,4BAA4B,+DAC7B,2BAA2B,+DACrC,iBAAiB,oHACnB,eAAe,oGACd,gBAAgB,oGACf,iBAAiB,oGAClB,gBAAgB,oGACP,yBAAyB,yGAC3B,uBAAuB,oGACtB,wBAAwB,oGACvB,yBAAyB,oGAC1B,wBAAwB,oGAClB,8BAA8B,yGAChC,4BAA4B,oGAC3B,6BAA6B,oGAC5B,8BAA8B,oGAC/B,6BAA6B,oGACnC,uBAAuB,oHACzB,qBAAqB,oGACpB,sBAAsB,oGACrB,uBAAuB,oGACxB,sBAAsB,kGACS,CAAC;AAEnD,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,0BAA0B,EAC1B,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC3B,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,wBAAwB,EACxB,8BAA8B,EAC9B,4BAA4B,EAC5B,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,GACvB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Swatch, SwatchRGB } from '@microsoft/fast-components';
|
|
2
|
+
export declare const defaultTertiaryColor: SwatchRGB;
|
|
3
|
+
/** @public */
|
|
4
|
+
export declare const tertiaryColor: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
5
|
+
declare const tertiaryPalette: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Palette<Swatch>>, tertiaryFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, tertiaryFillRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, tertiaryFillRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryFillHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryFillActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnTertiaryRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryLargeRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnTertiaryRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, foregroundOnTertiaryFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryForegroundRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, tertiaryForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>, tertiaryForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
|
|
6
|
+
export { tertiaryPalette, tertiaryFillRestDelta, tertiaryFillHoverDelta, tertiaryFillActiveDelta, tertiaryFillFocusDelta, tertiaryForegroundRestDelta, tertiaryForegroundHoverDelta, tertiaryForegroundActiveDelta, tertiaryForegroundFocusDelta, tertiaryFillRecipe, tertiaryFillRest, tertiaryFillHover, tertiaryFillActive, tertiaryFillFocus, foregroundOnTertiaryRecipe, foregroundOnTertiaryRest, foregroundOnTertiaryHover, foregroundOnTertiaryActive, foregroundOnTertiaryFocus, foregroundOnTertiaryLargeRecipe, foregroundOnTertiaryRestLarge, foregroundOnTertiaryHoverLarge, foregroundOnTertiaryActiveLarge, foregroundOnTertiaryFocusLarge, tertiaryForegroundRecipe, tertiaryForegroundRest, tertiaryForegroundHover, tertiaryForegroundActive, tertiaryForegroundFocus, };
|
|
7
|
+
//# sourceMappingURL=tertiary-palette.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tertiary-palette.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/tertiary-palette.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAM/D,eAAO,MAAM,oBAAoB,WAIhC,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,aAAa,6DACsD,CAAC;AAEjF,QAAA,MACW,eAAe,6GACT,qBAAqB,+DACpB,sBAAsB,+DACrB,uBAAuB,+DACxB,sBAAsB,+DACjB,2BAA2B,+DAC1B,4BAA4B,+DAC3B,6BAA6B,+DAC9B,4BAA4B,+DACtC,kBAAkB,oHACpB,gBAAgB,+DACf,iBAAiB,+DAChB,kBAAkB,+DACnB,iBAAiB,+DACR,0BAA0B,yGAC5B,wBAAwB,+DACvB,yBAAyB,+DACxB,0BAA0B,+DAC3B,yBAAyB,+DACnB,+BAA+B,yGACjC,6BAA6B,+DAC5B,8BAA8B,+DAC7B,+BAA+B,+DAChC,8BAA8B,+DACpC,wBAAwB,oHAC1B,sBAAsB,+DACrB,uBAAuB,+DACtB,wBAAwB,+DACzB,uBAAuB,6DACU,CAAC;AAErD,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,2BAA2B,EAC3B,4BAA4B,EAC5B,6BAA6B,EAC7B,4BAA4B,EAC5B,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,wBAAwB,EACxB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,+BAA+B,EAC/B,6BAA6B,EAC7B,8BAA8B,EAC9B,+BAA+B,EAC/B,8BAA8B,EAC9B,wBAAwB,EACxB,sBAAsB,EACtB,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,GACxB,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const warningPalette: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Palette<import("@microsoft/fast-components").Swatch>>, warningFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>, warningFillRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, warningFillRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningFillHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningFillActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnWarningRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningLargeRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").ColorRecipe>, foregroundOnWarningRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, foregroundOnWarningFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningForegroundRecipe: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").InteractiveColorRecipe>, warningForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>, warningForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<import("@microsoft/fast-components").Swatch>;
|
|
2
|
+
export { warningPalette, warningFillRestDelta, warningFillHoverDelta, warningFillActiveDelta, warningFillFocusDelta, warningForegroundRestDelta, warningForegroundHoverDelta, warningForegroundActiveDelta, warningForegroundFocusDelta, warningFillRecipe, warningFillRest, warningFillHover, warningFillActive, warningFillFocus, foregroundOnWarningRecipe, foregroundOnWarningRest, foregroundOnWarningHover, foregroundOnWarningActive, foregroundOnWarningFocus, foregroundOnWarningLargeRecipe, foregroundOnWarningRestLarge, foregroundOnWarningHoverLarge, foregroundOnWarningActiveLarge, foregroundOnWarningFocusLarge, warningForegroundRecipe, warningForegroundRest, warningForegroundHover, warningForegroundActive, warningForegroundFocus, };
|
|
3
|
+
//# sourceMappingURL=warning-palette.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"warning-palette.d.ts","sourceRoot":"","sources":["../../../../src/_config/tokens/warning-palette.ts"],"names":[],"mappings":"AAGA,QAAA,MACW,cAAc,kJACR,oBAAoB,+DACnB,qBAAqB,+DACpB,sBAAsB,+DACvB,qBAAqB,+DAChB,0BAA0B,+DACzB,2BAA2B,+DAC1B,4BAA4B,+DAC7B,2BAA2B,+DACrC,iBAAiB,oHACnB,eAAe,oGACd,gBAAgB,oGACf,iBAAiB,oGAClB,gBAAgB,oGACP,yBAAyB,yGAC3B,uBAAuB,oGACtB,wBAAwB,oGACvB,yBAAyB,oGAC1B,wBAAwB,oGAClB,8BAA8B,yGAChC,4BAA4B,oGAC3B,6BAA6B,oGAC5B,8BAA8B,oGAC/B,6BAA6B,oGACnC,uBAAuB,oHACzB,qBAAqB,oGACpB,sBAAsB,oGACrB,uBAAuB,oGACxB,sBAAsB,kGACS,CAAC;AAEnD,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,0BAA0B,EAC1B,2BAA2B,EAC3B,4BAA4B,EAC5B,2BAA2B,EAC3B,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,wBAAwB,EACxB,8BAA8B,EAC9B,4BAA4B,EAC5B,6BAA6B,EAC7B,8BAA8B,EAC9B,6BAA6B,EAC7B,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,GACvB,CAAC"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
export declare const accentPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
2
2
|
export declare const neutralPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
3
|
+
export declare const secondaryPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
4
|
+
export declare const tertiaryPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
5
|
+
export declare const errorPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
6
|
+
export declare const successPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
7
|
+
export declare const warningPaletteValue: import("@microsoft/fast-components").PaletteRGB;
|
|
3
8
|
export declare const baseLayerLuminanceValue: 0.23;
|
|
4
9
|
export declare const accentFillRestDeltaValue = 0;
|
|
5
10
|
export declare const accentFillHoverDeltaValue = 4;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/_config/values/color.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,iDAAmC,CAAC;AACnE,eAAO,MAAM,mBAAmB,iDAAmC,CAAC;AAEpE,eAAO,MAAM,uBAAuB,MAA6B,CAAC;AAElE,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAChD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AACjD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAC7C,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAE5C,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAChD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AACjD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAClD,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAClD,eAAO,MAAM,iCAAiC,IAAI,CAAC;AACnD,eAAO,MAAM,kCAAkC,IAAI,CAAC;AACpD,eAAO,MAAM,iCAAiC,IAAI,CAAC;AAEnD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AACjD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAClD,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAElD,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAEhD,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAC9C,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAC/C,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAChD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,eAAO,MAAM,kCAAkC,IAAI,CAAC"}
|
|
1
|
+
{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/_config/values/color.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,iDAAmC,CAAC;AACnE,eAAO,MAAM,mBAAmB,iDAAmC,CAAC;AACpE,eAAO,MAAM,qBAAqB,iDAAiC,CAAC;AACpE,eAAO,MAAM,oBAAoB,iDAAoC,CAAC;AACtE,eAAO,MAAM,iBAAiB,iDAAiC,CAAC;AAChE,eAAO,MAAM,mBAAmB,iDAAmC,CAAC;AACpE,eAAO,MAAM,mBAAmB,iDAAmC,CAAC;AAEpE,eAAO,MAAM,uBAAuB,MAA6B,CAAC;AAElE,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAChD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AACjD,eAAO,MAAM,gCAAgC,KAAK,CAAC;AACnD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAC7C,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAE5C,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAChD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AACjD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAClD,eAAO,MAAM,+BAA+B,KAAK,CAAC;AAElD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAClD,eAAO,MAAM,iCAAiC,IAAI,CAAC;AACnD,eAAO,MAAM,kCAAkC,IAAI,CAAC;AACpD,eAAO,MAAM,iCAAiC,IAAI,CAAC;AAEnD,eAAO,MAAM,+BAA+B,IAAI,CAAC;AACjD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAClD,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAElD,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAEhD,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAC9C,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAC/C,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAChD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,eAAO,MAAM,kCAAkC,IAAI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/_config/values/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/_config/values/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAwBhE,eAAO,MAAM,YAAY,EAAE,kBA+E1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AA8TpC,eAAO,MAAM,iBAAiB,GAC5B,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAgBA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,iDA8F7B,CAAC"}
|
package/dist/dts/react.d.ts
CHANGED
|
@@ -111,23 +111,23 @@ interface HTMLWCProps extends React.AriaAttributes {
|
|
|
111
111
|
onInput?(e: Event): void;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
export declare const
|
|
114
|
+
export declare const AccordionItem: React.ForwardRefExoticComponent<
|
|
115
115
|
React.PropsWithChildren<
|
|
116
|
-
Omit<PublicOf<
|
|
116
|
+
Omit<PublicOf<AccordionItemWC>, 'children' | 'style'> &
|
|
117
117
|
HTMLWCProps & {
|
|
118
118
|
}
|
|
119
|
-
> & React.RefAttributes<
|
|
119
|
+
> & React.RefAttributes<AccordionItemWC>
|
|
120
120
|
>;
|
|
121
|
-
export type
|
|
121
|
+
export type AccordionItemRef = AccordionItemWC;
|
|
122
122
|
|
|
123
|
-
export declare const
|
|
123
|
+
export declare const Accordion: React.ForwardRefExoticComponent<
|
|
124
124
|
React.PropsWithChildren<
|
|
125
|
-
Omit<PublicOf<
|
|
125
|
+
Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
|
|
126
126
|
HTMLWCProps & {
|
|
127
127
|
}
|
|
128
|
-
> & React.RefAttributes<
|
|
128
|
+
> & React.RefAttributes<AccordionWC>
|
|
129
129
|
>;
|
|
130
|
-
export type
|
|
130
|
+
export type AccordionRef = AccordionWC;
|
|
131
131
|
|
|
132
132
|
export declare const ActionsMenu: React.ForwardRefExoticComponent<
|
|
133
133
|
React.PropsWithChildren<
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { configureDesignSystem, paletteFromHex, } from '@genesislcap/foundation-ui';
|
|
2
|
+
import { errorPalette } from './tokens/error-palette';
|
|
3
|
+
import { secondaryPalette } from './tokens/secondary';
|
|
4
|
+
import { successPalette } from './tokens/success-palette';
|
|
5
|
+
import { tertiaryPalette } from './tokens/tertiary-palette';
|
|
6
|
+
import { warningPalette } from './tokens/warning-palette';
|
|
7
|
+
/**
|
|
8
|
+
* Extends {@link configureDesignSystem} with support for the `secondary`, `tertiary`, `error`,
|
|
9
|
+
* `success`, and `warning` color palettes.
|
|
10
|
+
*
|
|
11
|
+
* Pass any of these entries under `design_tokens.color` in your config to override the defaults.
|
|
12
|
+
* Omitting any of them is safe — existing apps are unaffected and each token falls back to its
|
|
13
|
+
* built-in default.
|
|
14
|
+
*
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
export const configureRapidDesignSystem = (provider, config) => {
|
|
18
|
+
var _a;
|
|
19
|
+
configureDesignSystem(provider, config);
|
|
20
|
+
const color = (_a = config.design_tokens) === null || _a === void 0 ? void 0 : _a.color;
|
|
21
|
+
if (color === null || color === void 0 ? void 0 : color.secondary)
|
|
22
|
+
secondaryPalette.setValueFor(provider, paletteFromHex(color.secondary.$value));
|
|
23
|
+
if (color === null || color === void 0 ? void 0 : color.tertiary)
|
|
24
|
+
tertiaryPalette.setValueFor(provider, paletteFromHex(color.tertiary.$value));
|
|
25
|
+
if (color === null || color === void 0 ? void 0 : color.error)
|
|
26
|
+
errorPalette.setValueFor(provider, paletteFromHex(color.error.$value));
|
|
27
|
+
if (color === null || color === void 0 ? void 0 : color.success)
|
|
28
|
+
successPalette.setValueFor(provider, paletteFromHex(color.success.$value));
|
|
29
|
+
if (color === null || color === void 0 ? void 0 : color.warning)
|
|
30
|
+
warningPalette.setValueFor(provider, paletteFromHex(color.warning.$value));
|
|
31
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { errorColor } from './custom';
|
|
2
|
+
import { createSemanticPalette } from './semantic-palette.factory';
|
|
3
|
+
const { palette: errorPalette, fillRestDelta: errorFillRestDelta, fillHoverDelta: errorFillHoverDelta, fillActiveDelta: errorFillActiveDelta, fillFocusDelta: errorFillFocusDelta, foregroundRestDelta: errorForegroundRestDelta, foregroundHoverDelta: errorForegroundHoverDelta, foregroundActiveDelta: errorForegroundActiveDelta, foregroundFocusDelta: errorForegroundFocusDelta, fillRecipe: errorFillRecipe, fillRest: errorFillRest, fillHover: errorFillHover, fillActive: errorFillActive, fillFocus: errorFillFocus, foregroundOnRecipe: foregroundOnErrorRecipe, foregroundOnRest: foregroundOnErrorRest, foregroundOnHover: foregroundOnErrorHover, foregroundOnActive: foregroundOnErrorActive, foregroundOnFocus: foregroundOnErrorFocus, foregroundOnLargeRecipe: foregroundOnErrorLargeRecipe, foregroundOnRestLarge: foregroundOnErrorRestLarge, foregroundOnHoverLarge: foregroundOnErrorHoverLarge, foregroundOnActiveLarge: foregroundOnErrorActiveLarge, foregroundOnFocusLarge: foregroundOnErrorFocusLarge, foregroundRecipe: errorForegroundRecipe, foregroundRest: errorForegroundRest, foregroundHover: errorForegroundHover, foregroundActive: errorForegroundActive, foregroundFocus: errorForegroundFocus, } = createSemanticPalette('error', errorColor);
|
|
4
|
+
export { errorPalette, errorFillRestDelta, errorFillHoverDelta, errorFillActiveDelta, errorFillFocusDelta, errorForegroundRestDelta, errorForegroundHoverDelta, errorForegroundActiveDelta, errorForegroundFocusDelta, errorFillRecipe, errorFillRest, errorFillHover, errorFillActive, errorFillFocus, foregroundOnErrorRecipe, foregroundOnErrorRest, foregroundOnErrorHover, foregroundOnErrorActive, foregroundOnErrorFocus, foregroundOnErrorLargeRecipe, foregroundOnErrorRestLarge, foregroundOnErrorHoverLarge, foregroundOnErrorActiveLarge, foregroundOnErrorFocusLarge, errorForegroundRecipe, errorForegroundRest, errorForegroundHover, errorForegroundActive, errorForegroundFocus, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { parseColorHexRGB } from '@microsoft/fast-colors';
|
|
2
|
+
import { SwatchRGB } from '@microsoft/fast-components';
|
|
3
|
+
import { DesignToken } from '@microsoft/fast-foundation';
|
|
4
|
+
import { ColorHEX } from '../../_common';
|
|
5
|
+
import { createSemanticPalette } from './semantic-palette.factory';
|
|
6
|
+
const secondaryColorRGB = parseColorHexRGB(ColorHEX.green);
|
|
7
|
+
export const defaultSecondaryColor = SwatchRGB.create(secondaryColorRGB.r, secondaryColorRGB.g, secondaryColorRGB.b);
|
|
8
|
+
/** @public */
|
|
9
|
+
export const secondaryColor = DesignToken.create('secondary-color').withDefault(defaultSecondaryColor);
|
|
10
|
+
const { palette: secondaryPalette, fillRestDelta: secondaryFillRestDelta, fillHoverDelta: secondaryFillHoverDelta, fillActiveDelta: secondaryFillActiveDelta, fillFocusDelta: secondaryFillFocusDelta, foregroundRestDelta: secondaryForegroundRestDelta, foregroundHoverDelta: secondaryForegroundHoverDelta, foregroundActiveDelta: secondaryForegroundActiveDelta, foregroundFocusDelta: secondaryForegroundFocusDelta, fillRecipe: secondaryFillRecipe, fillRest: secondaryFillRest, fillHover: secondaryFillHover, fillActive: secondaryFillActive, fillFocus: secondaryFillFocus, foregroundOnRecipe: foregroundOnSecondaryRecipe, foregroundOnRest: foregroundOnSecondaryRest, foregroundOnHover: foregroundOnSecondaryHover, foregroundOnActive: foregroundOnSecondaryActive, foregroundOnFocus: foregroundOnSecondaryFocus, foregroundOnLargeRecipe: foregroundOnSecondaryLargeRecipe, foregroundOnRestLarge: foregroundOnSecondaryRestLarge, foregroundOnHoverLarge: foregroundOnSecondaryHoverLarge, foregroundOnActiveLarge: foregroundOnSecondaryActiveLarge, foregroundOnFocusLarge: foregroundOnSecondaryFocusLarge, foregroundRecipe: secondaryForegroundRecipe, foregroundRest: secondaryForegroundRest, foregroundHover: secondaryForegroundHover, foregroundActive: secondaryForegroundActive, foregroundFocus: secondaryForegroundFocus, } = createSemanticPalette('secondary', secondaryColor);
|
|
11
|
+
export { secondaryPalette, secondaryFillRestDelta, secondaryFillHoverDelta, secondaryFillActiveDelta, secondaryFillFocusDelta, secondaryForegroundRestDelta, secondaryForegroundHoverDelta, secondaryForegroundActiveDelta, secondaryForegroundFocusDelta, secondaryFillRecipe, secondaryFillRest, secondaryFillHover, secondaryFillActive, secondaryFillFocus, foregroundOnSecondaryRecipe, foregroundOnSecondaryRest, foregroundOnSecondaryHover, foregroundOnSecondaryActive, foregroundOnSecondaryFocus, foregroundOnSecondaryLargeRecipe, foregroundOnSecondaryRestLarge, foregroundOnSecondaryHoverLarge, foregroundOnSecondaryActiveLarge, foregroundOnSecondaryFocusLarge, secondaryForegroundRecipe, secondaryForegroundRest, secondaryForegroundHover, secondaryForegroundActive, secondaryForegroundFocus, };
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { isDark, PaletteRGB, SwatchRGB, fillColor, neutralFillActiveDelta, neutralFillHoverDelta, neutralFillRestDelta, neutralPalette, } from '@microsoft/fast-components';
|
|
2
|
+
import { DesignToken } from '@microsoft/fast-foundation';
|
|
3
|
+
const { create } = DesignToken;
|
|
4
|
+
const createNonCss = (name) => DesignToken.create({ name, cssCustomPropertyName: null });
|
|
5
|
+
const white = SwatchRGB.create(1, 1, 1);
|
|
6
|
+
const black = SwatchRGB.create(0, 0, 0);
|
|
7
|
+
const FILL_HOVER_DELTA_DEFAULT = 4;
|
|
8
|
+
const FILL_ACTIVE_DELTA_DEFAULT = -5;
|
|
9
|
+
const FOREGROUND_HOVER_DELTA_DEFAULT = 6;
|
|
10
|
+
const FOREGROUND_ACTIVE_DELTA_DEFAULT = -4;
|
|
11
|
+
const WCAG_AA_CONTRAST = 4.5;
|
|
12
|
+
const WCAG_AAA_CONTRAST = 7;
|
|
13
|
+
// Inlined from @microsoft/fast-components internal recipes (accentFill, accentForeground, foregroundOnAccent)
|
|
14
|
+
function fillAlgorithm(palette, neutral, reference, hoverDelta, activeDelta, focusDelta, nFillRestDelta, nFillHoverDelta, nFillActiveDelta) {
|
|
15
|
+
const accent = palette.source;
|
|
16
|
+
const referenceIndex = neutral.closestIndexOf(reference);
|
|
17
|
+
const swapThreshold = Math.max(nFillRestDelta, nFillHoverDelta, nFillActiveDelta);
|
|
18
|
+
const direction = referenceIndex >= swapThreshold ? -1 : 1;
|
|
19
|
+
const accentIndex = palette.closestIndexOf(accent);
|
|
20
|
+
const hoverIndex = accentIndex;
|
|
21
|
+
const restIndex = hoverIndex + direction * -1 * hoverDelta;
|
|
22
|
+
const activeIndex = restIndex + direction * activeDelta;
|
|
23
|
+
const focusIndex = restIndex + direction * focusDelta;
|
|
24
|
+
return {
|
|
25
|
+
rest: palette.get(restIndex),
|
|
26
|
+
hover: palette.get(hoverIndex),
|
|
27
|
+
active: palette.get(activeIndex),
|
|
28
|
+
focus: palette.get(focusIndex),
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function foregroundAlgorithm(palette, reference, contrastTarget, restDelta, hoverDelta, activeDelta, focusDelta) {
|
|
32
|
+
const accent = palette.source;
|
|
33
|
+
const accentIndex = palette.closestIndexOf(accent);
|
|
34
|
+
const direction = isDark(reference) ? -1 : 1;
|
|
35
|
+
const startIndex = accentIndex +
|
|
36
|
+
(direction === 1
|
|
37
|
+
? Math.min(restDelta, hoverDelta)
|
|
38
|
+
: Math.max(direction * restDelta, direction * hoverDelta));
|
|
39
|
+
const accessibleSwatch = palette.colorContrast(reference, contrastTarget, startIndex, direction);
|
|
40
|
+
const accessibleIndex1 = palette.closestIndexOf(accessibleSwatch);
|
|
41
|
+
const accessibleIndex2 = accessibleIndex1 + direction * Math.abs(restDelta - hoverDelta);
|
|
42
|
+
const indexOneIsRestState = direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta;
|
|
43
|
+
const restIndex = indexOneIsRestState ? accessibleIndex1 : accessibleIndex2;
|
|
44
|
+
const hoverIndex = indexOneIsRestState ? accessibleIndex2 : accessibleIndex1;
|
|
45
|
+
return {
|
|
46
|
+
rest: palette.get(restIndex),
|
|
47
|
+
hover: palette.get(hoverIndex),
|
|
48
|
+
active: palette.get(restIndex + direction * activeDelta),
|
|
49
|
+
focus: palette.get(restIndex + direction * focusDelta),
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
function foregroundOnAlgorithm(reference, contrastTarget) {
|
|
53
|
+
return reference.contrast(white) >= contrastTarget ? white : black;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Creates the full set of interactive palette tokens for a semantic colour (fill, foreground,
|
|
57
|
+
* foreground-on variants) mirroring FAST's built-in accent/neutral pattern.
|
|
58
|
+
*
|
|
59
|
+
* @param cssPrefix - Token name prefix, e.g. `'error'` → `--error-fill-rest`
|
|
60
|
+
* @param sourceColorToken - The swatch token whose value drives the palette
|
|
61
|
+
* @public
|
|
62
|
+
*/
|
|
63
|
+
export function createSemanticPalette(cssPrefix, sourceColorToken) {
|
|
64
|
+
const p = cssPrefix;
|
|
65
|
+
// Palette
|
|
66
|
+
const palette = createNonCss(`${p}-palette`).withDefault((element) => PaletteRGB.from(sourceColorToken.getValueFor(element)));
|
|
67
|
+
// Delta tokens
|
|
68
|
+
const fillRestDelta = createNonCss(`${p}-fill-rest-delta`).withDefault(0);
|
|
69
|
+
const fillHoverDelta = createNonCss(`${p}-fill-hover-delta`).withDefault(FILL_HOVER_DELTA_DEFAULT);
|
|
70
|
+
const fillActiveDelta = createNonCss(`${p}-fill-active-delta`).withDefault(FILL_ACTIVE_DELTA_DEFAULT);
|
|
71
|
+
const fillFocusDelta = createNonCss(`${p}-fill-focus-delta`).withDefault(0);
|
|
72
|
+
const foregroundRestDelta = createNonCss(`${p}-foreground-rest-delta`).withDefault(0);
|
|
73
|
+
const foregroundHoverDelta = createNonCss(`${p}-foreground-hover-delta`).withDefault(FOREGROUND_HOVER_DELTA_DEFAULT);
|
|
74
|
+
const foregroundActiveDelta = createNonCss(`${p}-foreground-active-delta`).withDefault(FOREGROUND_ACTIVE_DELTA_DEFAULT);
|
|
75
|
+
const foregroundFocusDelta = createNonCss(`${p}-foreground-focus-delta`).withDefault(0);
|
|
76
|
+
// Fill recipe + tokens
|
|
77
|
+
const fillRecipe = createNonCss(`${p}-fill-recipe`).withDefault({
|
|
78
|
+
evaluate: (element, reference) => fillAlgorithm(palette.getValueFor(element), neutralPalette.getValueFor(element), reference !== null && reference !== void 0 ? reference : fillColor.getValueFor(element), fillHoverDelta.getValueFor(element), fillActiveDelta.getValueFor(element), fillFocusDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element)),
|
|
79
|
+
});
|
|
80
|
+
const fillRest = create(`${p}-fill-rest`).withDefault((element) => fillRecipe.getValueFor(element).evaluate(element).rest);
|
|
81
|
+
const fillHover = create(`${p}-fill-hover`).withDefault((element) => fillRecipe.getValueFor(element).evaluate(element).hover);
|
|
82
|
+
const fillActive = create(`${p}-fill-active`).withDefault((element) => fillRecipe.getValueFor(element).evaluate(element).active);
|
|
83
|
+
const fillFocus = create(`${p}-fill-focus`).withDefault((element) => fillRecipe.getValueFor(element).evaluate(element).focus);
|
|
84
|
+
// Foreground-on (text rendered on top of the semantic fill)
|
|
85
|
+
const foregroundOnByContrast = (contrast) => (element, reference) => foregroundOnAlgorithm(reference !== null && reference !== void 0 ? reference : fillRest.getValueFor(element), contrast);
|
|
86
|
+
const foregroundOnRecipe = createNonCss(`foreground-on-${p}-recipe`).withDefault({
|
|
87
|
+
evaluate: (element, reference) => foregroundOnByContrast(WCAG_AA_CONTRAST)(element, reference),
|
|
88
|
+
});
|
|
89
|
+
const foregroundOnRest = create(`foreground-on-${p}-rest`).withDefault((element) => foregroundOnRecipe.getValueFor(element).evaluate(element, fillRest.getValueFor(element)));
|
|
90
|
+
const foregroundOnHover = create(`foreground-on-${p}-hover`).withDefault((element) => foregroundOnRecipe.getValueFor(element).evaluate(element, fillHover.getValueFor(element)));
|
|
91
|
+
const foregroundOnActive = create(`foreground-on-${p}-active`).withDefault((element) => foregroundOnRecipe.getValueFor(element).evaluate(element, fillActive.getValueFor(element)));
|
|
92
|
+
const foregroundOnFocus = create(`foreground-on-${p}-focus`).withDefault((element) => foregroundOnRecipe.getValueFor(element).evaluate(element, fillFocus.getValueFor(element)));
|
|
93
|
+
const foregroundOnLargeRecipe = createNonCss(`foreground-on-${p}-large-recipe`).withDefault({
|
|
94
|
+
evaluate: (element, reference) => foregroundOnByContrast(WCAG_AAA_CONTRAST)(element, reference),
|
|
95
|
+
});
|
|
96
|
+
const foregroundOnRestLarge = create(`foreground-on-${p}-rest-large`).withDefault((element) => foregroundOnLargeRecipe.getValueFor(element).evaluate(element, fillRest.getValueFor(element)));
|
|
97
|
+
const foregroundOnHoverLarge = create(`foreground-on-${p}-hover-large`).withDefault((element) => foregroundOnLargeRecipe
|
|
98
|
+
.getValueFor(element)
|
|
99
|
+
.evaluate(element, fillHover.getValueFor(element)));
|
|
100
|
+
const foregroundOnActiveLarge = create(`foreground-on-${p}-active-large`).withDefault((element) => foregroundOnLargeRecipe
|
|
101
|
+
.getValueFor(element)
|
|
102
|
+
.evaluate(element, fillActive.getValueFor(element)));
|
|
103
|
+
const foregroundOnFocusLarge = create(`foreground-on-${p}-focus-large`).withDefault((element) => foregroundOnLargeRecipe
|
|
104
|
+
.getValueFor(element)
|
|
105
|
+
.evaluate(element, fillFocus.getValueFor(element)));
|
|
106
|
+
// Semantic-coloured foreground text on backgrounds
|
|
107
|
+
const foregroundRecipe = createNonCss(`${p}-foreground-recipe`).withDefault({
|
|
108
|
+
evaluate: (element, reference) => foregroundAlgorithm(palette.getValueFor(element), reference !== null && reference !== void 0 ? reference : fillColor.getValueFor(element), WCAG_AA_CONTRAST, foregroundRestDelta.getValueFor(element), foregroundHoverDelta.getValueFor(element), foregroundActiveDelta.getValueFor(element), foregroundFocusDelta.getValueFor(element)),
|
|
109
|
+
});
|
|
110
|
+
const foregroundRest = create(`${p}-foreground-rest`).withDefault((element) => foregroundRecipe.getValueFor(element).evaluate(element).rest);
|
|
111
|
+
const foregroundHover = create(`${p}-foreground-hover`).withDefault((element) => foregroundRecipe.getValueFor(element).evaluate(element).hover);
|
|
112
|
+
const foregroundActive = create(`${p}-foreground-active`).withDefault((element) => foregroundRecipe.getValueFor(element).evaluate(element).active);
|
|
113
|
+
const foregroundFocus = create(`${p}-foreground-focus`).withDefault((element) => foregroundRecipe.getValueFor(element).evaluate(element).focus);
|
|
114
|
+
return {
|
|
115
|
+
palette,
|
|
116
|
+
fillRestDelta,
|
|
117
|
+
fillHoverDelta,
|
|
118
|
+
fillActiveDelta,
|
|
119
|
+
fillFocusDelta,
|
|
120
|
+
foregroundRestDelta,
|
|
121
|
+
foregroundHoverDelta,
|
|
122
|
+
foregroundActiveDelta,
|
|
123
|
+
foregroundFocusDelta,
|
|
124
|
+
fillRecipe,
|
|
125
|
+
fillRest,
|
|
126
|
+
fillHover,
|
|
127
|
+
fillActive,
|
|
128
|
+
fillFocus,
|
|
129
|
+
foregroundOnRecipe,
|
|
130
|
+
foregroundOnRest,
|
|
131
|
+
foregroundOnHover,
|
|
132
|
+
foregroundOnActive,
|
|
133
|
+
foregroundOnFocus,
|
|
134
|
+
foregroundOnLargeRecipe,
|
|
135
|
+
foregroundOnRestLarge,
|
|
136
|
+
foregroundOnHoverLarge,
|
|
137
|
+
foregroundOnActiveLarge,
|
|
138
|
+
foregroundOnFocusLarge,
|
|
139
|
+
foregroundRecipe,
|
|
140
|
+
foregroundRest,
|
|
141
|
+
foregroundHover,
|
|
142
|
+
foregroundActive,
|
|
143
|
+
foregroundFocus,
|
|
144
|
+
};
|
|
145
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { successColor } from './custom';
|
|
2
|
+
import { createSemanticPalette } from './semantic-palette.factory';
|
|
3
|
+
const { palette: successPalette, fillRestDelta: successFillRestDelta, fillHoverDelta: successFillHoverDelta, fillActiveDelta: successFillActiveDelta, fillFocusDelta: successFillFocusDelta, foregroundRestDelta: successForegroundRestDelta, foregroundHoverDelta: successForegroundHoverDelta, foregroundActiveDelta: successForegroundActiveDelta, foregroundFocusDelta: successForegroundFocusDelta, fillRecipe: successFillRecipe, fillRest: successFillRest, fillHover: successFillHover, fillActive: successFillActive, fillFocus: successFillFocus, foregroundOnRecipe: foregroundOnSuccessRecipe, foregroundOnRest: foregroundOnSuccessRest, foregroundOnHover: foregroundOnSuccessHover, foregroundOnActive: foregroundOnSuccessActive, foregroundOnFocus: foregroundOnSuccessFocus, foregroundOnLargeRecipe: foregroundOnSuccessLargeRecipe, foregroundOnRestLarge: foregroundOnSuccessRestLarge, foregroundOnHoverLarge: foregroundOnSuccessHoverLarge, foregroundOnActiveLarge: foregroundOnSuccessActiveLarge, foregroundOnFocusLarge: foregroundOnSuccessFocusLarge, foregroundRecipe: successForegroundRecipe, foregroundRest: successForegroundRest, foregroundHover: successForegroundHover, foregroundActive: successForegroundActive, foregroundFocus: successForegroundFocus, } = createSemanticPalette('success', successColor);
|
|
4
|
+
export { successPalette, successFillRestDelta, successFillHoverDelta, successFillActiveDelta, successFillFocusDelta, successForegroundRestDelta, successForegroundHoverDelta, successForegroundActiveDelta, successForegroundFocusDelta, successFillRecipe, successFillRest, successFillHover, successFillActive, successFillFocus, foregroundOnSuccessRecipe, foregroundOnSuccessRest, foregroundOnSuccessHover, foregroundOnSuccessActive, foregroundOnSuccessFocus, foregroundOnSuccessLargeRecipe, foregroundOnSuccessRestLarge, foregroundOnSuccessHoverLarge, foregroundOnSuccessActiveLarge, foregroundOnSuccessFocusLarge, successForegroundRecipe, successForegroundRest, successForegroundHover, successForegroundActive, successForegroundFocus, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { parseColorHexRGB } from '@microsoft/fast-colors';
|
|
2
|
+
import { SwatchRGB } from '@microsoft/fast-components';
|
|
3
|
+
import { DesignToken } from '@microsoft/fast-foundation';
|
|
4
|
+
import { ColorHEX } from '../../_common';
|
|
5
|
+
import { createSemanticPalette } from './semantic-palette.factory';
|
|
6
|
+
const tertiaryColorRGB = parseColorHexRGB(ColorHEX.tertiary);
|
|
7
|
+
export const defaultTertiaryColor = SwatchRGB.create(tertiaryColorRGB.r, tertiaryColorRGB.g, tertiaryColorRGB.b);
|
|
8
|
+
/** @public */
|
|
9
|
+
export const tertiaryColor = DesignToken.create('tertiary-color').withDefault(defaultTertiaryColor);
|
|
10
|
+
const { palette: tertiaryPalette, fillRestDelta: tertiaryFillRestDelta, fillHoverDelta: tertiaryFillHoverDelta, fillActiveDelta: tertiaryFillActiveDelta, fillFocusDelta: tertiaryFillFocusDelta, foregroundRestDelta: tertiaryForegroundRestDelta, foregroundHoverDelta: tertiaryForegroundHoverDelta, foregroundActiveDelta: tertiaryForegroundActiveDelta, foregroundFocusDelta: tertiaryForegroundFocusDelta, fillRecipe: tertiaryFillRecipe, fillRest: tertiaryFillRest, fillHover: tertiaryFillHover, fillActive: tertiaryFillActive, fillFocus: tertiaryFillFocus, foregroundOnRecipe: foregroundOnTertiaryRecipe, foregroundOnRest: foregroundOnTertiaryRest, foregroundOnHover: foregroundOnTertiaryHover, foregroundOnActive: foregroundOnTertiaryActive, foregroundOnFocus: foregroundOnTertiaryFocus, foregroundOnLargeRecipe: foregroundOnTertiaryLargeRecipe, foregroundOnRestLarge: foregroundOnTertiaryRestLarge, foregroundOnHoverLarge: foregroundOnTertiaryHoverLarge, foregroundOnActiveLarge: foregroundOnTertiaryActiveLarge, foregroundOnFocusLarge: foregroundOnTertiaryFocusLarge, foregroundRecipe: tertiaryForegroundRecipe, foregroundRest: tertiaryForegroundRest, foregroundHover: tertiaryForegroundHover, foregroundActive: tertiaryForegroundActive, foregroundFocus: tertiaryForegroundFocus, } = createSemanticPalette('tertiary', tertiaryColor);
|
|
11
|
+
export { tertiaryPalette, tertiaryFillRestDelta, tertiaryFillHoverDelta, tertiaryFillActiveDelta, tertiaryFillFocusDelta, tertiaryForegroundRestDelta, tertiaryForegroundHoverDelta, tertiaryForegroundActiveDelta, tertiaryForegroundFocusDelta, tertiaryFillRecipe, tertiaryFillRest, tertiaryFillHover, tertiaryFillActive, tertiaryFillFocus, foregroundOnTertiaryRecipe, foregroundOnTertiaryRest, foregroundOnTertiaryHover, foregroundOnTertiaryActive, foregroundOnTertiaryFocus, foregroundOnTertiaryLargeRecipe, foregroundOnTertiaryRestLarge, foregroundOnTertiaryHoverLarge, foregroundOnTertiaryActiveLarge, foregroundOnTertiaryFocusLarge, tertiaryForegroundRecipe, tertiaryForegroundRest, tertiaryForegroundHover, tertiaryForegroundActive, tertiaryForegroundFocus, };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { warningColor } from './custom';
|
|
2
|
+
import { createSemanticPalette } from './semantic-palette.factory';
|
|
3
|
+
const { palette: warningPalette, fillRestDelta: warningFillRestDelta, fillHoverDelta: warningFillHoverDelta, fillActiveDelta: warningFillActiveDelta, fillFocusDelta: warningFillFocusDelta, foregroundRestDelta: warningForegroundRestDelta, foregroundHoverDelta: warningForegroundHoverDelta, foregroundActiveDelta: warningForegroundActiveDelta, foregroundFocusDelta: warningForegroundFocusDelta, fillRecipe: warningFillRecipe, fillRest: warningFillRest, fillHover: warningFillHover, fillActive: warningFillActive, fillFocus: warningFillFocus, foregroundOnRecipe: foregroundOnWarningRecipe, foregroundOnRest: foregroundOnWarningRest, foregroundOnHover: foregroundOnWarningHover, foregroundOnActive: foregroundOnWarningActive, foregroundOnFocus: foregroundOnWarningFocus, foregroundOnLargeRecipe: foregroundOnWarningLargeRecipe, foregroundOnRestLarge: foregroundOnWarningRestLarge, foregroundOnHoverLarge: foregroundOnWarningHoverLarge, foregroundOnActiveLarge: foregroundOnWarningActiveLarge, foregroundOnFocusLarge: foregroundOnWarningFocusLarge, foregroundRecipe: warningForegroundRecipe, foregroundRest: warningForegroundRest, foregroundHover: warningForegroundHover, foregroundActive: warningForegroundActive, foregroundFocus: warningForegroundFocus, } = createSemanticPalette('warning', warningColor);
|
|
4
|
+
export { warningPalette, warningFillRestDelta, warningFillHoverDelta, warningFillActiveDelta, warningFillFocusDelta, warningForegroundRestDelta, warningForegroundHoverDelta, warningForegroundActiveDelta, warningForegroundFocusDelta, warningFillRecipe, warningFillRest, warningFillHover, warningFillActive, warningFillFocus, foregroundOnWarningRecipe, foregroundOnWarningRest, foregroundOnWarningHover, foregroundOnWarningActive, foregroundOnWarningFocus, foregroundOnWarningLargeRecipe, foregroundOnWarningRestLarge, foregroundOnWarningHoverLarge, foregroundOnWarningActiveLarge, foregroundOnWarningFocusLarge, warningForegroundRecipe, warningForegroundRest, warningForegroundHover, warningForegroundActive, warningForegroundFocus, };
|
|
@@ -3,6 +3,11 @@ import { StandardLuminance } from '@microsoft/fast-components';
|
|
|
3
3
|
import { ColorHEX } from '../../_common/color.hex';
|
|
4
4
|
export const accentPaletteValue = paletteFromHex(ColorHEX.primary);
|
|
5
5
|
export const neutralPaletteValue = paletteFromHex(ColorHEX.neutral);
|
|
6
|
+
export const secondaryPaletteValue = paletteFromHex(ColorHEX.green);
|
|
7
|
+
export const tertiaryPaletteValue = paletteFromHex(ColorHEX.tertiary);
|
|
8
|
+
export const errorPaletteValue = paletteFromHex(ColorHEX.error);
|
|
9
|
+
export const successPaletteValue = paletteFromHex(ColorHEX.success);
|
|
10
|
+
export const warningPaletteValue = paletteFromHex(ColorHEX.warning);
|
|
6
11
|
export const baseLayerLuminanceValue = StandardLuminance.DarkMode;
|
|
7
12
|
export const accentFillRestDeltaValue = 0;
|
|
8
13
|
export const accentFillHoverDeltaValue = 4;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { accentPaletteValue, baseLayerLuminanceValue, neutralPaletteValue } from '../values/color';
|
|
1
|
+
import { accentPaletteValue, baseLayerLuminanceValue, errorPaletteValue, neutralPaletteValue, secondaryPaletteValue, successPaletteValue, tertiaryPaletteValue, warningPaletteValue, } from '../values/color';
|
|
2
2
|
import { strokeWidthValue } from './misc';
|
|
3
3
|
import { designUnitValue, densityValue, controlCornerRadiusValue, baseHeightMultiplierValue, } from './sizing';
|
|
4
4
|
import { bodyFontValue, typeRampBaseFontSizeValue, typeRampBaseLineHeightValue, } from './typography';
|
|
@@ -13,6 +13,26 @@ export const designTokens = {
|
|
|
13
13
|
$value: neutralPaletteValue.source.toColorString(),
|
|
14
14
|
$type: 'color',
|
|
15
15
|
},
|
|
16
|
+
secondary: {
|
|
17
|
+
$value: secondaryPaletteValue.source.toColorString(),
|
|
18
|
+
$type: 'color',
|
|
19
|
+
},
|
|
20
|
+
tertiary: {
|
|
21
|
+
$value: tertiaryPaletteValue.source.toColorString(),
|
|
22
|
+
$type: 'color',
|
|
23
|
+
},
|
|
24
|
+
error: {
|
|
25
|
+
$value: errorPaletteValue.source.toColorString(),
|
|
26
|
+
$type: 'color',
|
|
27
|
+
},
|
|
28
|
+
success: {
|
|
29
|
+
$value: successPaletteValue.source.toColorString(),
|
|
30
|
+
$type: 'color',
|
|
31
|
+
},
|
|
32
|
+
warning: {
|
|
33
|
+
$value: warningPaletteValue.source.toColorString(),
|
|
34
|
+
$type: 'color',
|
|
35
|
+
},
|
|
16
36
|
},
|
|
17
37
|
fontFamily: {
|
|
18
38
|
bodyFont: {
|