diff --git a/change/@adaptive-web-adaptive-ui-d4b8c096-adce-4fec-8616-9f0320e1f530.json b/change/@adaptive-web-adaptive-ui-d4b8c096-adce-4fec-8616-9f0320e1f530.json new file mode 100644 index 00000000..e9aec605 --- /dev/null +++ b/change/@adaptive-web-adaptive-ui-d4b8c096-adce-4fec-8616-9f0320e1f530.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add support for margin properties", + "packageName": "@adaptive-web/adaptive-ui", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@adaptive-web-adaptive-ui-designer-figma-4c209d8b-7be9-46a2-8600-17463e77f670.json b/change/@adaptive-web-adaptive-ui-designer-figma-4c209d8b-7be9-46a2-8600-17463e77f670.json new file mode 100644 index 00000000..a98fbb93 --- /dev/null +++ b/change/@adaptive-web-adaptive-ui-designer-figma-4c209d8b-7be9-46a2-8600-17463e77f670.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add support for margin properties", + "packageName": "@adaptive-web/adaptive-ui-designer-figma", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts b/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts index 512b275a..b2497c04 100644 --- a/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts +++ b/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts @@ -230,7 +230,7 @@ function parseComponent(node: PluginUINodeData): Anatomy { function isContextNode(node: PluginUINodeData, componentName: string): boolean { // Remove non-ascii characters (we tried a convention of decorating template node names) const nodeName = node.name.replace(/[^\x20-\x7F]/g, "").trim(); - return node.type === "COMPONENT" || nodeName.toLowerCase() === componentName.toLowerCase(); + return node.type === "COMPONENT" || componentName.toLowerCase().indexOf(nodeName.toLowerCase()) !== -1; } function walkNode(node: PluginUINodeData, componentName: string, condition: Record | undefined, anatomy: Anatomy): void { diff --git a/packages/adaptive-ui/docs/api-report.md b/packages/adaptive-ui/docs/api-report.md index 04ed6e5e..9af0b2cb 100644 --- a/packages/adaptive-ui/docs/api-report.md +++ b/packages/adaptive-ui/docs/api-report.md @@ -1,730 +1,734 @@ -## API Report File for "@adaptive-web/adaptive-ui" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { Color as Color_2 } from 'culori/fn'; -import { ComposableStyles } from '@microsoft/fast-element'; -import { CSSDesignToken } from '@microsoft/fast-foundation'; -import { CSSDirective } from '@microsoft/fast-element'; -import { DesignToken } from '@microsoft/fast-foundation'; -import { DesignTokenResolver } from '@microsoft/fast-foundation'; -import { ElementStyles } from '@microsoft/fast-element'; -import { TypedCSSDesignToken as TypedCSSDesignToken_2 } from '../adaptive-design-tokens.js'; -import { ValuesOf } from '@microsoft/fast-foundation'; - -// @public -export class BasePalette implements Palette { - constructor(source: Color, swatches: ReadonlyArray); - readonly closestIndexCache: Map; - closestIndexOf(reference: RelativeLuminance): number; - colorContrast(reference: RelativeLuminance, contrastTarget: number, initialSearchIndex?: number, direction?: PaletteDirection): T; - delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T; - get(index: number): T; - readonly lastIndex: number; - readonly reversedSwatches: ReadonlyArray; - readonly source: Color; - readonly swatches: ReadonlyArray; -} - -// @internal -export const _black: Swatch; - -// @public -export function blackOrWhiteByContrast(reference: Swatch, minContrast: number, defaultBlack: boolean): Swatch; - -// @public -export function blackOrWhiteByContrastSet(set: InteractiveSwatchSet, minContrast: number, defaultBlack: boolean): InteractiveSwatchSet; - -// @public -export type BooleanCondition = string; - -// @public (undocumented) -export const BorderFill: { - all: (value: StyleValue) => StyleProperties; -}; - -// @public (undocumented) -export const BorderStyle: { - all: (value: StyleValue) => StyleProperties; -}; - -// @public (undocumented) -export const BorderThickness: { - all: (value: StyleValue) => StyleProperties; -}; - -// @public -export class Color implements RelativeLuminance, CSSDirective { - constructor(color: Color_2); - readonly color: Color_2; - contrast: (b: RelativeLuminance) => number; - createCSS: () => string; - static from(obj: { - r: number; - g: number; - b: number; - alpha?: number; - }): Color; - static fromRgb(r: number, g: number, b: number, alpha?: number): Color; - static parse(color: string): Color | undefined; - get relativeLuminance(): number; - toColorString(): string; - toString: () => string; -} - -// @public -export type ColorRecipe = RecipeOptional; - -// @public -export type ColorRecipeBySet = Recipe; - -// @public -export type ColorRecipeBySetEvaluate = RecipeEvaluate; - -// @public -export type ColorRecipeEvaluate = RecipeEvaluateOptional; - -// @public -export type ColorRecipePalette = Recipe; - -// @public -export type ColorRecipePaletteEvaluate = RecipeEvaluate; - -// @public -export type ColorRecipePaletteParams = ColorRecipeParams & { - palette: Palette; -}; - -// @public -export type ColorRecipeParams = { - reference: Swatch | null; -}; - -// @public -export interface ComponentAnatomy { - conditions: TConditions; - context?: string; - focus?: FocusDefinition; - interactivity?: InteractivityDefinition; - name?: string; - parts: TParts; -} - -// @public -export type ComponentConditions = Record; - -// @public -export type ComponentParts = Record; - -// @public -export type Condition = BooleanCondition | StringCondition; - -// @public -export function contrast(a: RelativeLuminance, b: RelativeLuminance): number; - -// @public -export function contrastAndDeltaSwatchSet(palette: Palette, reference: Swatch, minContrast: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveSwatchSet; - -// @public -export function contrastSwatch(palette: Palette, reference: Swatch, minContrast: number, direction?: PaletteDirection): Swatch; - -// @public -export const convertStylesToFocusState: (styles: Styles) => Styles; - -// @public (undocumented) -export const CornerRadius: { - all: (value: StyleValue) => StyleProperties; -}; - -// Warning: (ae-internal-missing-underscore) The name "create" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal @deprecated (undocumented) -export const create: typeof DesignToken.create; - -// @public -export function createForegroundSet(foregroundRecipe: TypedDesignToken, background: InteractiveTokenGroup): InteractiveTokenGroup; - -// @public -export function createForegroundSetBySet(foregroundRecipe: TypedDesignToken, background: InteractiveTokenGroup): InteractiveTokenGroup; - -// Warning: (ae-internal-missing-underscore) The name "createNonCss" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal @deprecated (undocumented) -export function createNonCss(name: string): DesignToken; - -// @public -export function createTokenColor(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; - -// @public -export function createTokenColorRecipe(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeEvaluate): TypedDesignToken>; - -// @public -export function createTokenColorRecipeBySet(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeBySetEvaluate): TypedDesignToken>; - -// @public -export function createTokenColorRecipeForPalette(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipePaletteEvaluate): TypedDesignToken>; - -// @public -export function createTokenColorRecipeValue(recipeToken: TypedDesignToken>): TypedCSSDesignToken; - -// @public -export function createTokenColorRecipeWithPalette(recipeToken: TypedDesignToken>, paletteToken: DesignToken): TypedDesignToken>; - -// @public -export function createTokenColorSet(recipeToken: TypedDesignToken): InteractiveTokenGroup; - -// @public -export function createTokenDelta(baseName: string, state: InteractiveState | string, value: number | DesignToken): TypedDesignToken; - -// @public -export function createTokenDimension(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; - -// @public -export function createTokenFontFamily(name: string): TypedCSSDesignToken; - -// @public -export function createTokenFontSize(name: string): TypedCSSDesignToken; - -// @public -export function createTokenFontStyle(name: string): TypedCSSDesignToken; - -// @public -export function createTokenFontVariations(name: string): TypedCSSDesignToken; - -// @public -export function createTokenFontWeight(name: string): TypedCSSDesignToken; - -// @public -export function createTokenLineHeight(name: string): TypedCSSDesignToken; - -// @public -export function createTokenMinContrast(baseName: string, value: number | DesignToken): TypedDesignToken; - -// @public -export function createTokenNonCss(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken; - -// @public -export function createTokenNumber(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; - -// @public -export function createTokenNumberNonStyling(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken; - -// @public -export function createTokenRecipe(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: RecipeEvaluate): TypedDesignToken>; - -// @public -export const createTokenShadow: (name: string) => TypedCSSDesignToken_2; - -// @public -export function createTokenSwatch(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; - -// @public -export const createTyped: typeof TypedCSSDesignToken.createTyped; - -// @public -export function deltaSwatch(palette: Palette, reference: Swatch, delta: number, direction?: PaletteDirection): Swatch; - -// @public -export function deltaSwatchSet(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta?: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveSwatchSet; - -// @public -export const densityAdjustmentUnits: TypedDesignToken; - -// @public -export class DensityPaddingAndGapTokenGroup implements TokenGroup { - constructor(name: string, horizontalPaddingUnits: number, horizontalGapUnits: number, verticalPaddingUnits: number, verticalGapUnits: number, designUnit: string | DesignToken, borderThickness: string | DesignToken); - readonly borderThickness: TypedCSSDesignToken; - readonly designUnit: TypedCSSDesignToken; - readonly horizontalGap: TypedCSSDesignToken; - readonly horizontalGapUnits: TypedDesignToken; - readonly horizontalPadding: TypedCSSDesignToken; - readonly horizontalPaddingUnits: TypedDesignToken; - // (undocumented) - readonly name: string; - get padding(): CSSDirective; - readonly verticalGap: TypedCSSDesignToken; - readonly verticalGapUnits: TypedDesignToken; - readonly verticalPadding: TypedCSSDesignToken; - readonly verticalPaddingUnits: TypedDesignToken; -} - -// @public -export class DesignTokenMetadata { - // (undocumented) - protected init(type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): void; - get intendedFor(): StyleProperty[] | undefined; - protected set intendedFor(value: StyleProperty[] | undefined); - get type(): DesignTokenType; - protected set type(value: DesignTokenType); -} - -// @public -export class DesignTokenMultiValue extends Array implements CSSDirective { - // (undocumented) - createCSS(): string; -} - -// @public -export abstract class DesignTokenRegistry { - static Shared: Map>; -} - -// @public -export const DesignTokenType: { - readonly color: "color"; - readonly dimension: "dimension"; - readonly fontFamily: "fontFamily"; - readonly fontWeight: "fontWeight"; - readonly duration: "duration"; - readonly cubicBezier: "cubicBezier"; - readonly number: "number"; - readonly strokeStyle: "strokeStyle"; - readonly border: "border"; - readonly transition: "transition"; - readonly shadow: "shadow"; - readonly gradient: "gradient"; - readonly typography: "typography"; - readonly boolean: "boolean"; - readonly fontStyle: "fontStyle"; - readonly fontVariations: "fontVariations"; - readonly palette: "palette"; - readonly recipe: "recipe"; - readonly string: "string"; -}; - -// @public -export type DesignTokenType = ValuesOf | string; - -// @public -export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue; - -// @public -export class ElementStylesRenderer { - constructor(styles: Styles); - static disabledStyles: Styles; - static get focusResetStyles(): Styles; - static set focusResetStyles(styles: Styles); - static get focusStateStyles(): Styles; - static set focusStateStyles(styles: Styles); - render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles; - static renderStyleRules(baseStyles: ComposableStyles[] | undefined, styleRules: StyleRules, anatomy?: ComponentAnatomy): ElementStyles; -} - -// @public -export type ElevationRecipe = Recipe; - -// @public -export type ElevationRecipeEvaluate = RecipeEvaluate; - -// @public (undocumented) -export const Fill: { - backgroundAndForeground: (background: InteractiveTokenGroup, foregroundRecipe: TypedDesignToken) => StyleProperties; - backgroundAndForegroundBySet: (background: InteractiveTokenGroup, foregroundRecipe: TypedDesignToken) => StyleProperties; - foregroundNonInteractiveWithDisabled: (foreground: TypedCSSDesignToken, disabled: TypedCSSDesignToken) => StyleProperties; -}; - -// @public -export const Focus: { - readonly contextFocused: () => FocusDefinition; - readonly contextChildFocused: (indicatorPart: keyof TParts & string) => FocusDefinition; - readonly partFocused: (part: keyof TParts_1 & string) => FocusDefinition; - readonly partWithin: (indicatorPart: keyof TParts_2 & string, focusablePart: keyof TParts_2 & string) => FocusDefinition; -}; - -// @public -export interface FocusDefinition { - focusTarget: StyleModuleTarget; - resetTarget?: StyleModuleTarget; -} - -// @public -export function idealColorDeltaSwatchSet(palette: Palette, reference: Swatch, minContrast: number, idealColor: Color, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection): InteractiveSwatchSet; - -// @public -export type InteractiveColorRecipe = ColorRecipe; - -// @public -export type InteractiveColorRecipeBySet = ColorRecipeBySet; - -// @public -export type InteractiveColorRecipeBySetEvaluate = ColorRecipeBySetEvaluate; - -// @public -export type InteractiveColorRecipeEvaluate = ColorRecipeEvaluate; - -// @public -export type InteractiveColorRecipePalette = ColorRecipePalette; - -// @public -export type InteractiveColorRecipePaletteEvaluate = ColorRecipePaletteEvaluate; - -// @public -export enum InteractiveState { - active = "active", - disabled = "disabled", - focus = "focus", - hover = "hover", - rest = "rest" -} - -// @public -export interface InteractiveSwatchSet extends InteractiveValues { -} - -// @public -export function interactiveSwatchSetAsOverlay(set: InteractiveSwatchSet, reference: Swatch, asOverlay: boolean): InteractiveSwatchSet; - -// @public -export interface InteractiveTokenGroup extends TokenGroup, InteractiveValues> { -} - -// @public -export type InteractiveValues = { - [key in InteractiveState]: T; -}; - -// @public -export const Interactivity: { - readonly disabledAttribute: InteractivityDefinition; - readonly disabledClass: InteractivityDefinition; - readonly hrefAttribute: InteractivityDefinition; - readonly always: InteractivityDefinition; - readonly never: InteractivityDefinition; -}; - -// @public -export type InteractivityDefinition = { - [key in InteractiveState]?: string; -} & { - interactive?: string; -}; - -// @public -export function isDark(color: RelativeLuminance): boolean; - -// @public -export function luminanceSwatch(luminance: number): Swatch; - -// @public -export function makeSelector(params: StyleModuleEvaluateParameters, state: InteractiveState): string; - -// @public (undocumented) -export const Padding: { - all: (value: StyleValue) => StyleProperties; - verticalHorizontal: (valueVertical: StyleValue, valueHorizontal: StyleValue) => StyleProperties; -}; - -// @public -export interface Palette { - closestIndexOf(reference: RelativeLuminance): number; - colorContrast(reference: RelativeLuminance, minContrast: number, initialIndex?: number, direction?: PaletteDirection): T; - delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T; - get(index: number): T; - readonly source: Color; - readonly swatches: ReadonlyArray; -} - -// @public -export type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue); - -// @public -export const PaletteDirectionValue: Readonly<{ - readonly darker: 1; - readonly lighter: -1; -}>; - -// @public -export type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue]; - -// @public -export class PaletteOkhsl extends BasePalette { - // (undocumented) - static from(source: Color | string, options?: Partial): PaletteOkhsl; -} - -// @public -export interface PaletteOkhslOptions { - darkEndSaturation: number; - lightEndSaturation: number; - stepCount: number; -} - -// @public -export class PaletteRGB extends BasePalette { - static from(source: Swatch | string, options?: Partial): PaletteRGB; -} - -// @public -export interface PaletteRGBOptions { - preserveSource: boolean; - stepContrast: number; - stepContrastRamp: number; -} - -// @public -export interface Recipe { - evaluate: RecipeEvaluate; -} - -// @public (undocumented) -export type RecipeEvaluate = (resolver: DesignTokenResolver, params: TParam) => TResult; - -// @public (undocumented) -export type RecipeEvaluateOptional = (resolver: DesignTokenResolver, params?: TParam) => TResult; - -// @public -export interface RecipeOptional { - evaluate: RecipeEvaluateOptional; -} - -// @public -export interface RelativeLuminance { - readonly relativeLuminance: number; -} - -// @public -export function resolvePaletteDirection(direction: PaletteDirection): PaletteDirectionValue; - -// @beta (undocumented) -export interface SerializableAnatomy { - // (undocumented) - conditions: Record; - // (undocumented) - context: string; - // (undocumented) - focus?: FocusDefinition; - // (undocumented) - interactivity?: InteractivityDefinition; - // (undocumented) - name: string; - // (undocumented) - parts: Record; - // (undocumented) - styleRules: SerializableStyleRule[]; -} - -// @beta (undocumented) -export type SerializableBooleanCondition = string; - -// @beta (undocumented) -export type SerializableCondition = SerializableBooleanCondition | SerializableStringCondition; - -// @beta (undocumented) -export type SerializableStringCondition = Record; - -// @beta (undocumented) -export interface SerializableStyleRule { - // (undocumented) - contextCondition?: Record; - // (undocumented) - part?: string; - // (undocumented) - properties?: Record; - // (undocumented) - styles?: string[]; -} - -// @public -export class Shadow implements CSSDirective { - constructor(color: Swatch, xOffset: number, yOffset: number, blurRadius?: number | undefined, spread?: number | undefined); - // (undocumented) - blurRadius?: number | undefined; - // (undocumented) - color: Swatch; - // (undocumented) - createCSS(): string; - // (undocumented) - spread?: number | undefined; - // (undocumented) - xOffset: number; - // (undocumented) - yOffset: number; -} - -// @public -export type ShadowValue = Shadow | DesignTokenMultiValue | string; - -// @public -export type StringCondition = Record; - -// @public -export type StyleDeclaration = { - styles?: Styles | Iterable; - properties?: StyleProperties; -}; - -// @public -export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition; - -// @public -export interface StyleModuleTarget { - context?: string; - contextCondition?: string; - // @beta - ignoreInteractivity?: boolean; - part?: string; - partCondition?: string; - stateOnContext?: boolean; -} - -// @public -export type StyleProperties = Partial>; - -// @public -export type StylePropertiesMap = Map; - -// @public -export const StyleProperty: { - readonly backgroundFill: "backgroundFill"; - readonly foregroundFill: "foregroundFill"; - readonly borderFillTop: "borderFillTop"; - readonly borderFillRight: "borderFillRight"; - readonly borderFillBottom: "borderFillBottom"; - readonly borderFillLeft: "borderFillLeft"; - readonly borderThicknessTop: "borderThicknessTop"; - readonly borderThicknessRight: "borderThicknessRight"; - readonly borderThicknessBottom: "borderThicknessBottom"; - readonly borderThicknessLeft: "borderThicknessLeft"; - readonly borderStyleTop: "borderStyleTop"; - readonly borderStyleRight: "borderStyleRight"; - readonly borderStyleBottom: "borderStyleBottom"; - readonly borderStyleLeft: "borderStyleLeft"; - readonly cornerRadiusTopLeft: "cornerRadiusTopLeft"; - readonly cornerRadiusTopRight: "cornerRadiusTopRight"; - readonly cornerRadiusBottomRight: "cornerRadiusBottomRight"; - readonly cornerRadiusBottomLeft: "cornerRadiusBottomLeft"; - readonly fontFamily: "fontFamily"; - readonly fontSize: "fontSize"; - readonly fontWeight: "fontWeight"; - readonly fontStyle: "fontStyle"; - readonly fontVariationSettings: "fontVariationSettings"; - readonly letterSpacing: "letterSpacing"; - readonly lineHeight: "lineHeight"; - readonly paddingTop: "paddingTop"; - readonly paddingRight: "paddingRight"; - readonly paddingBottom: "paddingBottom"; - readonly paddingLeft: "paddingLeft"; - readonly gap: "gap"; - readonly height: "height"; - readonly width: "width"; - readonly layoutDirection: "layoutDirection"; - readonly opacity: "opacity"; - readonly cursor: "cursor"; - readonly outlineColor: "outlineColor"; - readonly outlineOffset: "outlineOffset"; - readonly outlineStyle: "outlineStyle"; - readonly outlineWidth: "outlineWidth"; - readonly shadow: "shadow"; -}; - -// @public -export type StyleProperty = ValuesOf; - -// @public -export const stylePropertyBorderFillAll: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[]; - -// @public -export const stylePropertyBorderStyleAll: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[]; - -// @public -export const stylePropertyBorderThicknessAll: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[]; - -// @public -export const stylePropertyCornerRadiusAll: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[]; - -// @public -export type StylePropertyCss = StyleProperty | (string & Record); - -// @public -export const stylePropertyPaddingAll: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[]; - -// @public -export type StyleRule = { - target?: StyleModuleTarget; -} & StyleDeclaration; - -// @public -export type StyleRules = Array; - -// @public -export class Styles { - // (undocumented) - appendComposed(styles: Styles): void; - clearComposed(): void; - static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles; - get composed(): Styles[] | undefined; - get effectiveAdaptiveProperties(): Map; - get effectiveProperties(): StylePropertiesMap; - static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles; - static fromProperties(properties: StyleProperties, name?: string): Styles; - readonly name: string | undefined; - get properties(): StylePropertiesMap | undefined; - set properties(properties: StylePropertiesMap | undefined); - // (undocumented) - static Shared: Map; -} - -// @public -export type StyleValue = CSSDesignToken | InteractiveValues | CSSDirective | string | number; - -// @public -export class Swatch extends Color { - protected constructor(color: Color_2, intendedColor?: Swatch); - static asOverlay(intendedColor: Swatch, reference: Swatch): Swatch; - static from(obj: { - r: number; - g: number; - b: number; - alpha?: number; - }): Swatch; - static fromColor(color: Color): Swatch; - static fromRgb(r: number, g: number, b: number, alpha?: number): Swatch; - static parse(color: string): Swatch | undefined; - get relativeLuminance(): number; - toTransparent(alpha?: number): Swatch; -} - -// @public -export function swatchAsOverlay(swatch: Swatch | null, reference: Swatch, asOverlay: boolean): Swatch | null; - -// @public -export interface TokenGroup { - intendedFor?: StyleProperty | StyleProperty[]; - name: string; - type?: DesignTokenType; -} - -// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag -// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedCSSDesignToken" because one of its declarations is marked as @internal -// -// @public -export class TypedCSSDesignToken extends CSSDesignToken implements DesignTokenMetadata { - constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]); - static createTyped(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; -} - -// @internal (undocumented) -export interface TypedCSSDesignToken extends DesignTokenMetadata { -} - -// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag -// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedDesignToken" because one of its declarations is marked as @internal -// -// @public -export class TypedDesignToken extends DesignToken implements DesignTokenMetadata { - constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]); - static createTyped(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken; -} - -// @internal (undocumented) -export interface TypedDesignToken extends DesignTokenMetadata { -} - -// @internal -export const _white: Swatch; - -// (No @packageDocumentation comment for this package) - -``` +## API Report File for "@adaptive-web/adaptive-ui" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { Color as Color_2 } from 'culori/fn'; +import { ComposableStyles } from '@microsoft/fast-element'; +import { CSSDesignToken } from '@microsoft/fast-foundation'; +import { CSSDirective } from '@microsoft/fast-element'; +import { DesignToken } from '@microsoft/fast-foundation'; +import { DesignTokenResolver } from '@microsoft/fast-foundation'; +import { ElementStyles } from '@microsoft/fast-element'; +import { TypedCSSDesignToken as TypedCSSDesignToken_2 } from '../adaptive-design-tokens.js'; +import { ValuesOf } from '@microsoft/fast-foundation'; + +// @public +export class BasePalette implements Palette { + constructor(source: Color, swatches: ReadonlyArray); + readonly closestIndexCache: Map; + closestIndexOf(reference: RelativeLuminance): number; + colorContrast(reference: RelativeLuminance, contrastTarget: number, initialSearchIndex?: number, direction?: PaletteDirection): T; + delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T; + get(index: number): T; + readonly lastIndex: number; + readonly reversedSwatches: ReadonlyArray; + readonly source: Color; + readonly swatches: ReadonlyArray; +} + +// @internal +export const _black: Swatch; + +// @public +export function blackOrWhiteByContrast(reference: Swatch, minContrast: number, defaultBlack: boolean): Swatch; + +// @public +export function blackOrWhiteByContrastSet(set: InteractiveSwatchSet, minContrast: number, defaultBlack: boolean): InteractiveSwatchSet; + +// @public +export type BooleanCondition = string; + +// @public (undocumented) +export const BorderFill: { + all: (value: StyleValue) => StyleProperties; +}; + +// @public (undocumented) +export const BorderStyle: { + all: (value: StyleValue) => StyleProperties; +}; + +// @public (undocumented) +export const BorderThickness: { + all: (value: StyleValue) => StyleProperties; +}; + +// @public +export class Color implements RelativeLuminance, CSSDirective { + constructor(color: Color_2); + readonly color: Color_2; + contrast: (b: RelativeLuminance) => number; + createCSS: () => string; + static from(obj: { + r: number; + g: number; + b: number; + alpha?: number; + }): Color; + static fromRgb(r: number, g: number, b: number, alpha?: number): Color; + static parse(color: string): Color | undefined; + get relativeLuminance(): number; + toColorString(): string; + toString: () => string; +} + +// @public +export type ColorRecipe = RecipeOptional; + +// @public +export type ColorRecipeBySet = Recipe; + +// @public +export type ColorRecipeBySetEvaluate = RecipeEvaluate; + +// @public +export type ColorRecipeEvaluate = RecipeEvaluateOptional; + +// @public +export type ColorRecipePalette = Recipe; + +// @public +export type ColorRecipePaletteEvaluate = RecipeEvaluate; + +// @public +export type ColorRecipePaletteParams = ColorRecipeParams & { + palette: Palette; +}; + +// @public +export type ColorRecipeParams = { + reference: Swatch | null; +}; + +// @public +export interface ComponentAnatomy { + conditions: TConditions; + context?: string; + focus?: FocusDefinition; + interactivity?: InteractivityDefinition; + name?: string; + parts: TParts; +} + +// @public +export type ComponentConditions = Record; + +// @public +export type ComponentParts = Record; + +// @public +export type Condition = BooleanCondition | StringCondition; + +// @public +export function contrast(a: RelativeLuminance, b: RelativeLuminance): number; + +// @public +export function contrastAndDeltaSwatchSet(palette: Palette, reference: Swatch, minContrast: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveSwatchSet; + +// @public +export function contrastSwatch(palette: Palette, reference: Swatch, minContrast: number, direction?: PaletteDirection): Swatch; + +// @public +export const convertStylesToFocusState: (styles: Styles) => Styles; + +// @public (undocumented) +export const CornerRadius: { + all: (value: StyleValue) => StyleProperties; +}; + +// Warning: (ae-internal-missing-underscore) The name "create" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal @deprecated (undocumented) +export const create: typeof DesignToken.create; + +// @public +export function createForegroundSet(foregroundRecipe: TypedDesignToken, background: InteractiveTokenGroup): InteractiveTokenGroup; + +// @public +export function createForegroundSetBySet(foregroundRecipe: TypedDesignToken, background: InteractiveTokenGroup): InteractiveTokenGroup; + +// Warning: (ae-internal-missing-underscore) The name "createNonCss" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal @deprecated (undocumented) +export function createNonCss(name: string): DesignToken; + +// @public +export function createTokenColor(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; + +// @public +export function createTokenColorRecipe(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeEvaluate): TypedDesignToken>; + +// @public +export function createTokenColorRecipeBySet(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipeBySetEvaluate): TypedDesignToken>; + +// @public +export function createTokenColorRecipeForPalette(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: ColorRecipePaletteEvaluate): TypedDesignToken>; + +// @public +export function createTokenColorRecipeValue(recipeToken: TypedDesignToken>): TypedCSSDesignToken; + +// @public +export function createTokenColorRecipeWithPalette(recipeToken: TypedDesignToken>, paletteToken: DesignToken): TypedDesignToken>; + +// @public +export function createTokenColorSet(recipeToken: TypedDesignToken): InteractiveTokenGroup; + +// @public +export function createTokenDelta(baseName: string, state: InteractiveState | string, value: number | DesignToken): TypedDesignToken; + +// @public +export function createTokenDimension(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; + +// @public +export function createTokenFontFamily(name: string): TypedCSSDesignToken; + +// @public +export function createTokenFontSize(name: string): TypedCSSDesignToken; + +// @public +export function createTokenFontStyle(name: string): TypedCSSDesignToken; + +// @public +export function createTokenFontVariations(name: string): TypedCSSDesignToken; + +// @public +export function createTokenFontWeight(name: string): TypedCSSDesignToken; + +// @public +export function createTokenLineHeight(name: string): TypedCSSDesignToken; + +// @public +export function createTokenMinContrast(baseName: string, value: number | DesignToken): TypedDesignToken; + +// @public +export function createTokenNonCss(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken; + +// @public +export function createTokenNumber(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; + +// @public +export function createTokenNumberNonStyling(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken; + +// @public +export function createTokenRecipe(baseName: string, intendedFor: StyleProperty | StyleProperty[], evaluate: RecipeEvaluate): TypedDesignToken>; + +// @public +export const createTokenShadow: (name: string) => TypedCSSDesignToken_2; + +// @public +export function createTokenSwatch(name: string, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; + +// @public +export const createTyped: typeof TypedCSSDesignToken.createTyped; + +// @public +export function deltaSwatch(palette: Palette, reference: Swatch, delta: number, direction?: PaletteDirection): Swatch; + +// @public +export function deltaSwatchSet(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta?: number, disabledPalette?: Palette, direction?: PaletteDirection, zeroAsTransparent?: boolean): InteractiveSwatchSet; + +// @public +export const densityAdjustmentUnits: TypedDesignToken; + +// @public +export class DensityPaddingAndGapTokenGroup implements TokenGroup { + constructor(name: string, horizontalPaddingUnits: number, horizontalGapUnits: number, verticalPaddingUnits: number, verticalGapUnits: number, designUnit: string | DesignToken, borderThickness: string | DesignToken); + readonly borderThickness: TypedCSSDesignToken; + readonly designUnit: TypedCSSDesignToken; + readonly horizontalGap: TypedCSSDesignToken; + readonly horizontalGapUnits: TypedDesignToken; + readonly horizontalPadding: TypedCSSDesignToken; + readonly horizontalPaddingUnits: TypedDesignToken; + // (undocumented) + readonly name: string; + get padding(): CSSDirective; + readonly verticalGap: TypedCSSDesignToken; + readonly verticalGapUnits: TypedDesignToken; + readonly verticalPadding: TypedCSSDesignToken; + readonly verticalPaddingUnits: TypedDesignToken; +} + +// @public +export class DesignTokenMetadata { + // (undocumented) + protected init(type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): void; + get intendedFor(): StyleProperty[] | undefined; + protected set intendedFor(value: StyleProperty[] | undefined); + get type(): DesignTokenType; + protected set type(value: DesignTokenType); +} + +// @public +export class DesignTokenMultiValue extends Array implements CSSDirective { + // (undocumented) + createCSS(): string; +} + +// @public +export abstract class DesignTokenRegistry { + static Shared: Map>; +} + +// @public +export const DesignTokenType: { + readonly color: "color"; + readonly dimension: "dimension"; + readonly fontFamily: "fontFamily"; + readonly fontWeight: "fontWeight"; + readonly duration: "duration"; + readonly cubicBezier: "cubicBezier"; + readonly number: "number"; + readonly strokeStyle: "strokeStyle"; + readonly border: "border"; + readonly transition: "transition"; + readonly shadow: "shadow"; + readonly gradient: "gradient"; + readonly typography: "typography"; + readonly boolean: "boolean"; + readonly fontStyle: "fontStyle"; + readonly fontVariations: "fontVariations"; + readonly palette: "palette"; + readonly recipe: "recipe"; + readonly string: "string"; +}; + +// @public +export type DesignTokenType = ValuesOf | string; + +// @public +export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue; + +// @public +export class ElementStylesRenderer { + constructor(styles: Styles); + static disabledStyles: Styles; + static get focusResetStyles(): Styles; + static set focusResetStyles(styles: Styles); + static get focusStateStyles(): Styles; + static set focusStateStyles(styles: Styles); + render(target: StyleModuleTarget, interactivity?: InteractivityDefinition): ElementStyles; + static renderStyleRules(baseStyles: ComposableStyles[] | undefined, styleRules: StyleRules, anatomy?: ComponentAnatomy): ElementStyles; +} + +// @public +export type ElevationRecipe = Recipe; + +// @public +export type ElevationRecipeEvaluate = RecipeEvaluate; + +// @public (undocumented) +export const Fill: { + backgroundAndForeground: (background: InteractiveTokenGroup, foregroundRecipe: TypedDesignToken) => StyleProperties; + backgroundAndForegroundBySet: (background: InteractiveTokenGroup, foregroundRecipe: TypedDesignToken) => StyleProperties; + foregroundNonInteractiveWithDisabled: (foreground: TypedCSSDesignToken, disabled: TypedCSSDesignToken) => StyleProperties; +}; + +// @public +export const Focus: { + readonly contextFocused: () => FocusDefinition; + readonly contextChildFocused: (indicatorPart: keyof TParts & string) => FocusDefinition; + readonly partFocused: (part: keyof TParts_1 & string) => FocusDefinition; + readonly partWithin: (indicatorPart: keyof TParts_2 & string, focusablePart: keyof TParts_2 & string) => FocusDefinition; +}; + +// @public +export interface FocusDefinition { + focusTarget: StyleModuleTarget; + resetTarget?: StyleModuleTarget; +} + +// @public +export function idealColorDeltaSwatchSet(palette: Palette, reference: Swatch, minContrast: number, idealColor: Color, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, disabledDelta: number, disabledPalette?: Palette, direction?: PaletteDirection): InteractiveSwatchSet; + +// @public +export type InteractiveColorRecipe = ColorRecipe; + +// @public +export type InteractiveColorRecipeBySet = ColorRecipeBySet; + +// @public +export type InteractiveColorRecipeBySetEvaluate = ColorRecipeBySetEvaluate; + +// @public +export type InteractiveColorRecipeEvaluate = ColorRecipeEvaluate; + +// @public +export type InteractiveColorRecipePalette = ColorRecipePalette; + +// @public +export type InteractiveColorRecipePaletteEvaluate = ColorRecipePaletteEvaluate; + +// @public +export enum InteractiveState { + active = "active", + disabled = "disabled", + focus = "focus", + hover = "hover", + rest = "rest" +} + +// @public +export interface InteractiveSwatchSet extends InteractiveValues { +} + +// @public +export function interactiveSwatchSetAsOverlay(set: InteractiveSwatchSet, reference: Swatch, asOverlay: boolean): InteractiveSwatchSet; + +// @public +export interface InteractiveTokenGroup extends TokenGroup, InteractiveValues> { +} + +// @public +export type InteractiveValues = { + [key in InteractiveState]: T; +}; + +// @public +export const Interactivity: { + readonly disabledAttribute: InteractivityDefinition; + readonly disabledClass: InteractivityDefinition; + readonly hrefAttribute: InteractivityDefinition; + readonly always: InteractivityDefinition; + readonly never: InteractivityDefinition; +}; + +// @public +export type InteractivityDefinition = { + [key in InteractiveState]?: string; +} & { + interactive?: string; +}; + +// @public +export function isDark(color: RelativeLuminance): boolean; + +// @public +export function luminanceSwatch(luminance: number): Swatch; + +// @public +export function makeSelector(params: StyleModuleEvaluateParameters, state: InteractiveState): string; + +// @public (undocumented) +export const Padding: { + all: (value: StyleValue) => StyleProperties; + verticalHorizontal: (valueVertical: StyleValue, valueHorizontal: StyleValue) => StyleProperties; +}; + +// @public +export interface Palette { + closestIndexOf(reference: RelativeLuminance): number; + colorContrast(reference: RelativeLuminance, minContrast: number, initialIndex?: number, direction?: PaletteDirection): T; + delta(reference: RelativeLuminance, delta: number, direction: PaletteDirection): T; + get(index: number): T; + readonly source: Color; + readonly swatches: ReadonlyArray; +} + +// @public +export type PaletteDirection = PaletteDirectionValue | (() => PaletteDirectionValue); + +// @public +export const PaletteDirectionValue: Readonly<{ + readonly darker: 1; + readonly lighter: -1; +}>; + +// @public +export type PaletteDirectionValue = typeof PaletteDirectionValue[keyof typeof PaletteDirectionValue]; + +// @public +export class PaletteOkhsl extends BasePalette { + // (undocumented) + static from(source: Color | string, options?: Partial): PaletteOkhsl; +} + +// @public +export interface PaletteOkhslOptions { + darkEndSaturation: number; + lightEndSaturation: number; + stepCount: number; +} + +// @public +export class PaletteRGB extends BasePalette { + static from(source: Swatch | string, options?: Partial): PaletteRGB; +} + +// @public +export interface PaletteRGBOptions { + preserveSource: boolean; + stepContrast: number; + stepContrastRamp: number; +} + +// @public +export interface Recipe { + evaluate: RecipeEvaluate; +} + +// @public (undocumented) +export type RecipeEvaluate = (resolver: DesignTokenResolver, params: TParam) => TResult; + +// @public (undocumented) +export type RecipeEvaluateOptional = (resolver: DesignTokenResolver, params?: TParam) => TResult; + +// @public +export interface RecipeOptional { + evaluate: RecipeEvaluateOptional; +} + +// @public +export interface RelativeLuminance { + readonly relativeLuminance: number; +} + +// @public +export function resolvePaletteDirection(direction: PaletteDirection): PaletteDirectionValue; + +// @beta (undocumented) +export interface SerializableAnatomy { + // (undocumented) + conditions: Record; + // (undocumented) + context: string; + // (undocumented) + focus?: FocusDefinition; + // (undocumented) + interactivity?: InteractivityDefinition; + // (undocumented) + name: string; + // (undocumented) + parts: Record; + // (undocumented) + styleRules: SerializableStyleRule[]; +} + +// @beta (undocumented) +export type SerializableBooleanCondition = string; + +// @beta (undocumented) +export type SerializableCondition = SerializableBooleanCondition | SerializableStringCondition; + +// @beta (undocumented) +export type SerializableStringCondition = Record; + +// @beta (undocumented) +export interface SerializableStyleRule { + // (undocumented) + contextCondition?: Record; + // (undocumented) + part?: string; + // (undocumented) + properties?: Record; + // (undocumented) + styles?: string[]; +} + +// @public +export class Shadow implements CSSDirective { + constructor(color: Swatch, xOffset: number, yOffset: number, blurRadius?: number | undefined, spread?: number | undefined); + // (undocumented) + blurRadius?: number | undefined; + // (undocumented) + color: Swatch; + // (undocumented) + createCSS(): string; + // (undocumented) + spread?: number | undefined; + // (undocumented) + xOffset: number; + // (undocumented) + yOffset: number; +} + +// @public +export type ShadowValue = Shadow | DesignTokenMultiValue | string; + +// @public +export type StringCondition = Record; + +// @public +export type StyleDeclaration = { + styles?: Styles | Iterable; + properties?: StyleProperties; +}; + +// @public +export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition; + +// @public +export interface StyleModuleTarget { + context?: string; + contextCondition?: string; + // @beta + ignoreInteractivity?: boolean; + part?: string; + partCondition?: string; + stateOnContext?: boolean; +} + +// @public +export type StyleProperties = Partial>; + +// @public +export type StylePropertiesMap = Map; + +// @public +export const StyleProperty: { + readonly backgroundFill: "backgroundFill"; + readonly foregroundFill: "foregroundFill"; + readonly borderFillTop: "borderFillTop"; + readonly borderFillRight: "borderFillRight"; + readonly borderFillBottom: "borderFillBottom"; + readonly borderFillLeft: "borderFillLeft"; + readonly borderThicknessTop: "borderThicknessTop"; + readonly borderThicknessRight: "borderThicknessRight"; + readonly borderThicknessBottom: "borderThicknessBottom"; + readonly borderThicknessLeft: "borderThicknessLeft"; + readonly borderStyleTop: "borderStyleTop"; + readonly borderStyleRight: "borderStyleRight"; + readonly borderStyleBottom: "borderStyleBottom"; + readonly borderStyleLeft: "borderStyleLeft"; + readonly cornerRadiusTopLeft: "cornerRadiusTopLeft"; + readonly cornerRadiusTopRight: "cornerRadiusTopRight"; + readonly cornerRadiusBottomRight: "cornerRadiusBottomRight"; + readonly cornerRadiusBottomLeft: "cornerRadiusBottomLeft"; + readonly fontFamily: "fontFamily"; + readonly fontSize: "fontSize"; + readonly fontWeight: "fontWeight"; + readonly fontStyle: "fontStyle"; + readonly fontVariationSettings: "fontVariationSettings"; + readonly letterSpacing: "letterSpacing"; + readonly lineHeight: "lineHeight"; + readonly marginTop: "marginTop"; + readonly marginRight: "marginRight"; + readonly marginBottom: "marginBottom"; + readonly marginLeft: "marginLeft"; + readonly paddingTop: "paddingTop"; + readonly paddingRight: "paddingRight"; + readonly paddingBottom: "paddingBottom"; + readonly paddingLeft: "paddingLeft"; + readonly gap: "gap"; + readonly height: "height"; + readonly width: "width"; + readonly layoutDirection: "layoutDirection"; + readonly opacity: "opacity"; + readonly cursor: "cursor"; + readonly outlineColor: "outlineColor"; + readonly outlineOffset: "outlineOffset"; + readonly outlineStyle: "outlineStyle"; + readonly outlineWidth: "outlineWidth"; + readonly shadow: "shadow"; +}; + +// @public +export type StyleProperty = ValuesOf; + +// @public +export const stylePropertyBorderFillAll: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[]; + +// @public +export const stylePropertyBorderStyleAll: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[]; + +// @public +export const stylePropertyBorderThicknessAll: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[]; + +// @public +export const stylePropertyCornerRadiusAll: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[]; + +// @public +export type StylePropertyCss = StyleProperty | (string & Record); + +// @public +export const stylePropertyPaddingAll: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[]; + +// @public +export type StyleRule = { + target?: StyleModuleTarget; +} & StyleDeclaration; + +// @public +export type StyleRules = Array; + +// @public +export class Styles { + // (undocumented) + appendComposed(styles: Styles): void; + clearComposed(): void; + static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles; + get composed(): Styles[] | undefined; + get effectiveAdaptiveProperties(): Map; + get effectiveProperties(): StylePropertiesMap; + static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles; + static fromProperties(properties: StyleProperties, name?: string): Styles; + readonly name: string | undefined; + get properties(): StylePropertiesMap | undefined; + set properties(properties: StylePropertiesMap | undefined); + // (undocumented) + static Shared: Map; +} + +// @public +export type StyleValue = CSSDesignToken | InteractiveValues | CSSDirective | string | number; + +// @public +export class Swatch extends Color { + protected constructor(color: Color_2, intendedColor?: Swatch); + static asOverlay(intendedColor: Swatch, reference: Swatch): Swatch; + static from(obj: { + r: number; + g: number; + b: number; + alpha?: number; + }): Swatch; + static fromColor(color: Color): Swatch; + static fromRgb(r: number, g: number, b: number, alpha?: number): Swatch; + static parse(color: string): Swatch | undefined; + get relativeLuminance(): number; + toTransparent(alpha?: number): Swatch; +} + +// @public +export function swatchAsOverlay(swatch: Swatch | null, reference: Swatch, asOverlay: boolean): Swatch | null; + +// @public +export interface TokenGroup { + intendedFor?: StyleProperty | StyleProperty[]; + name: string; + type?: DesignTokenType; +} + +// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedCSSDesignToken" because one of its declarations is marked as @internal +// +// @public +export class TypedCSSDesignToken extends CSSDesignToken implements DesignTokenMetadata { + constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]); + static createTyped(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedCSSDesignToken; +} + +// @internal (undocumented) +export interface TypedCSSDesignToken extends DesignTokenMetadata { +} + +// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag +// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "TypedDesignToken" because one of its declarations is marked as @internal +// +// @public +export class TypedDesignToken extends DesignToken implements DesignTokenMetadata { + constructor(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]); + static createTyped(name: string, type: DesignTokenType, intendedFor?: StyleProperty | StyleProperty[]): TypedDesignToken; +} + +// @internal (undocumented) +export interface TypedDesignToken extends DesignTokenMetadata { +} + +// @internal +export const _white: Swatch; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/adaptive-ui/src/bin/aui.ts b/packages/adaptive-ui/src/bin/aui.ts index e275dee9..cd7d6226 100644 --- a/packages/adaptive-ui/src/bin/aui.ts +++ b/packages/adaptive-ui/src/bin/aui.ts @@ -15,13 +15,13 @@ import postcssMergeRules from "postcss-merge-rules" import postcssMergeBorderRadius from "postcss-merge-border-radius"; import { ElementStylesRenderer } from '../core/modules/element-styles-renderer.js'; import { - BooleanCondition, ComponentAnatomy, ComponentConditions, ComponentParts, SerializableAnatomy, + SerializableBooleanCondition, + SerializableStringCondition, SerializableStyleRule, - StringCondition, StyleModuleTarget, StyleRules } from '../core/modules/types.js'; @@ -226,9 +226,13 @@ function createCondition(obj: SerializableAnatomy, style: SerializableStyleRule) const condition = obj.conditions[conditionKey]; if (typeof value === "string") { - return (condition as StringCondition)[value]; + return (condition as SerializableStringCondition)[value]; } else { - return condition as BooleanCondition; + if (value === false) { + return `:not(${condition as SerializableBooleanCondition})`; + } else { + return condition as SerializableBooleanCondition; + } } }); return conditionSelectors.join(""); diff --git a/packages/adaptive-ui/src/core/modules/css.ts b/packages/adaptive-ui/src/core/modules/css.ts index a23296e3..76b4d5ed 100644 --- a/packages/adaptive-ui/src/core/modules/css.ts +++ b/packages/adaptive-ui/src/core/modules/css.ts @@ -59,6 +59,14 @@ export const stylePropertyToCssProperty = (usage: StyleProperty): string => { return "letter-spacing"; case StyleProperty.lineHeight: return "line-height"; + case StyleProperty.marginTop: + return "margin-top"; + case StyleProperty.marginRight: + return "margin-right"; + case StyleProperty.marginBottom: + return "margin-bottom"; + case StyleProperty.marginLeft: + return "margin-left"; case StyleProperty.paddingTop: return "padding-top"; case StyleProperty.paddingRight: diff --git a/packages/adaptive-ui/src/core/modules/types.ts b/packages/adaptive-ui/src/core/modules/types.ts index 7f20d299..87b1e918 100644 --- a/packages/adaptive-ui/src/core/modules/types.ts +++ b/packages/adaptive-ui/src/core/modules/types.ts @@ -326,6 +326,10 @@ export const StyleProperty = { fontVariationSettings: "fontVariationSettings", letterSpacing: "letterSpacing", lineHeight: "lineHeight", + marginTop: "marginTop", + marginRight: "marginRight", + marginBottom: "marginBottom", + marginLeft: "marginLeft", paddingTop: "paddingTop", paddingRight: "paddingRight", paddingBottom: "paddingBottom",